:root {
  --blue: #036FBD;
  --font-size: 1vw;
  --dark-blue: #013589;
}

body {font-family: "urbane-rounded", sans-serif; line-height: 1; font-weight: 200;}

h3 {font-size: 2vw; font-weight: 200; line-height: 1.3;}
h5 {font-size: 14px; font-weight: 500; line-height: 17px; color: #0003; margin-bottom: 1vw; text-transform: uppercase;}

p {font-size: var(--font-size); line-height: 1.5; margin-bottom: 20px;}
p:last-child {margin-bottom: 0;}
a {text-decoration: none; color: inherit; transition: 0.3s;}

.menu-mobile, .mobile-only {display:none}

.button {font-size: var(--font-size); display: inline-block; padding: 15px 40px; transition: 0.3s; background: var(--blue); border: 1px solid var(--blue); border-radius: 50vw; font-weight: 500; color: #fff;}
.button.outline {background: #fff0; border: 1px solid #fff;}

.button:hover {background: #fff; color: var(--blue); border: 1px solid #fff;}

.menu {display: flex; align-items: center; justify-content: flex-end;}
.menu .button {margin: 0 0 0 15px; padding: 15px 30px;}
.menu > ul {width: auto; margin: 0;}
.menu > ul > li {margin: 0 25px;}
.menu > ul > li:first-child {margin-left: 0;}
.menu > ul > li a {color: #fff; font-weight: 500; font-size: var(--font-size);}
.menu > ul > li > ul {position: fixed; top: 0; padding-top: 150px; z-index: -1; background: var(--dark-blue);}

.grid-menu {grid-template-columns: 1fr 1fr 1fr;}
.menu > ul > li > ul::before, .menu > ul > li > ul::after {display: none;}
.menu > ul > li > ul > li {width: 100%;}

header .wrapper .logo {display: block; width: 14vw; object-fit: contain; height: auto; position: relative;}
header .wrapper .logo img {transition: 0.3s; width: 100%; height: 100%; object-fit: contain;}
header .wrapper .menu-logo {position: absolute; top: 0; opacity: 0;}

header.menu-open .wrapper .logo img {opacity: 0;}
header.menu-open .wrapper .menu-logo {opacity: 1!important;}

.sm_menu_outer .mobile_menu a, header ul li ul li.parent.menudepth1 > a {font-family: inherit!important;}

.banner {height: 100dvh; position: relative; background: #000; color: #fff;}
.banner::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); opacity: 0.5;}
.banner img {width: 100%; height: 100%; object-fit: cover;}
.banner .desktop {display: block;}
.banner .mobile {display: none;}
.banner header {position: absolute; top: 2.5vw; width: 100%; left: 0; z-index: 999; box-sizing: border-box; padding: 0 2.5%;}
.banner header .wrapper {display: grid; grid-template-columns: 1fr 1fr; width: 100%; grid-gap: 0;}
.banner header .wrapper .logo {display: block; width: 14vw; object-fit: contain; height: auto;}
.banner > .wrapper {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; display: grid; grid-template-columns: 1.5fr 1fr; z-index: 1;}
.banner > .wrapper article h1 {font-size: 5vw; color: #fff; font-weight: 600; line-height: 1; margin-bottom: 1vw;}
.banner > .wrapper article h2 {font-size: 1.45vw; line-height: 1.3; max-width: 25vw; margin-bottom: 2vw;}

.banner.standard {height:60dvh;}
.banner.standard > .wrapper {top: 55%;}

.blue-bg {background: #172A88; color: #fff;}
.blue-bg h5 {color: #fff3;}

.center {text-align: center;}

.content {margin: 5vw 0;}
.content article {margin: 0 auto; width: 70%;}
.content article h3 {margin-bottom: 2vw;}
.content .grid figure {height: 0; padding-bottom: 80%; position: relative;}
.content .grid figure img {position: absolute; width: 100%; height: 100%; object-fit: cover;}

.mySwiper {box-sizing: border-box; width: 100%; padding: 0 7.5%!important;}
.mySwiper::before, .mySwiper::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 7.5%; z-index: 2; height: 100%; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);}
.mySwiper::after {background: linear-gradient(270deg,rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%); left: auto; right: 0;}
.mySwiper .swiper-slide {display: grid; grid-template-columns: 1.5fr 1fr; grid-gap: 20px;}
.mySwiper .swiper-slide a {display: block; height: 0; padding-bottom: 55%; position: relative;}
.mySwiper .swiper-slide a h3 {position: absolute; bottom: 1.5vw; left: 2vw; margin: 0; color: #fff; font-weight: 300; font-size: 1.4vw; z-index: 2;}
.mySwiper .swiper-slide a img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0;}
.mySwiper .swiper-slide a::before {content: ''; display: block; position: absolute; bottom: 0; left: 0; height: 40%; width: 100%; z-index: 1; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.4;}
.mySwiper .swiper-slide a:first-child {grid-row: span 2; height: 100%; padding: 0;}
.mySwiper .swiper-slide a:first-child img {}

.swiper-pagination {position: relative!important; bottom: auto; margin-top: 40px;}

.grid {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw; align-items: center;}

.colour-block .grid {grid-template-columns: 1.25fr 1fr; grid-gap: 0;}
.colour-block .grid > div {height: 100%; display: flex;}
.colour-block .grid > div article {margin: auto; width: 100%; box-sizing: border-box; padding: 0 7.5vw;}

.wrapper {width: 85%; margin: 0 auto;}

.feature-banner {background: #000; position: relative; height: 55vh;}
.feature-banner article {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 85%; color: #fff;}
.feature-banner article h3 {font-size: 3vw; font-weight: 200; max-width: 40vw; margin: 0 auto 2vw;}
.feature-banner figure {height: 100%;}
.feature-banner figure img {height: 100%; width: 100%; object-fit: cover; opacity: 0.55;}

#sm_menu_ham {top: 30px!important; right: 30px!important;}

footer {background: linear-gradient(180deg,rgba(2, 121, 198, 1) 0%, rgba(1, 52, 136, 1) 100%); color: #fff;}
footer ul {list-style: none; margin: 0;}
footer .flex-row {display: flex; justify-content: space-between; padding: 5vw 0; gap: 10vw;}
footer .footer-column small {font-size: 14px; line-height: 17px; color: #fff5; text-transform: uppercase; display: block; margin-bottom: 20px; font-weight: 500; letter-spacing: 1px;}
footer .footer-column ul li {display: block; margin-bottom: 10px;}
footer .footer-column ul li a {font-weight: 300; display: inline-block; font-size: var(--font-size);}
footer .footer-column p {font-size: var(--font-size); margin-bottom: 10px; font-weight: 300; line-height: 1;}
footer .footer-column p a {font-weight: 300;}
footer .footer-column ul li a, footer .footer-column p a {transition: 0.3s; color: #fff;}
footer .footer-column ul li a:hover, footer .footer-column p a:hover {color: #fff7;}
footer .footer-column.footer-legal li {margin-bottom: 5px;}
footer .footer-column.footer-legal li p, footer .footer-column.footer-legal li a {font-size: 13px; color: #fff5; line-height: 17px; transition: 0.3s; margin: 0;}
footer .footer-column.footer-legal li a:hover {color: #fff;}
footer .footer-divider {width: 1px; background: #fff4; display: block;}
footer .footer-right {display: flex; justify-content: space-between; width: 100%;}
footer .footer-logo {display: flex;}
footer .footer-logo figure {margin: auto;}
footer .footer-logo figure img {display: block; width: 14vw; height: auto;}


  .why-us{
    background:#f4f4f4;
    padding:48px 18px;
  }
  .why-us__inner{
    width: 85%;
  margin: 0 auto;
    text-align:center;
  }
  .why-us__title{
    margin:0 0 10px 0;
    font-size:34px;
    letter-spacing:0.08em;
    font-weight:700;
  }
  .why-us__intro{
    margin:0 auto 35px auto;
    max-width:820px;
    font-size:15px;
    line-height:1.6;
    color:#6c6c6c;
  }

  .why-us__grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:22px;
    align-items:start;
    justify-items:center;
  }

  .why-us__item{
    width:100%;
    max-width:300px;
  }

  .why-us__icon{
    width:56px;
    height:56px;
    margin:0 auto 10px auto;
    border:2px solid #111;
    border-radius:50%;
    display:grid;
    place-items:center;
  }
  .why-us__icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:#111;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .why-us__item-title{
    margin:0 0 12px 0;
    font-size:15px;
    font-weight:700;
    color:#111;
  }
  .why-us__item-text{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:#6c6c6c;
  }