/* =========================================================
   GLOBAL
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* NOTE: scroll-behavior:smooth removed because Lenis handles
   smooth scrolling (the two conflict). JS adds it back
   automatically only if Lenis fails to load. */
html{
    scroll-padding-top:90px;
}

/* Lenis required styles */
html.lenis,
html.lenis body{
    height:auto;
}

.lenis.lenis-smooth{
    scroll-behavior:auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent]{
    overscroll-behavior:contain;
}

.lenis.lenis-stopped{
    overflow:hidden;
}

body{
    margin:0;
    background:#f5f5ff;
    color:#073b4c;
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
textarea{
    font-family:inherit;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;
}

.section-label{
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#0aa6cc;
    margin-bottom:8px;
}

h1,
h2,
h3,
h4{
    font-family:'Jost',sans-serif;
}

.main-heading{
    font-family:'Jost',sans-serif;
    font-size:48px;
    line-height:1.08;
    font-weight:700;
}

.sub-heading{
    font-family:'Jost',sans-serif;
    font-size:22px;
    line-height:1.25;
    font-weight:600;
}

p{
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.65;
    font-weight:400;
}


/* =========================================================
   PARALLAX
========================================================= */

[data-parallax]{
    will-change:transform;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 22px;
    border-radius:30px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    border:none;
    cursor:pointer;
    transition:.3s ease;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(90deg, #062B38, #1565C0);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(8,172,210,.25);
}

.btn-light{
    background:#fff;
    color:#063d4e;
}

.btn-outline{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
}

.btn-arrow{
    font-size:16px;
}


/* =========================================================
   HEADER (STICKY)
========================================================= */

.site-header{
    position:fixed;            /* sticky on scroll */
    z-index:1000;
    top:23px;
    left:0;
    width:100%;
    transition:top .35s ease;
}

.site-header.scrolled{
    top:10px;
}

.navbar{
    max-width:1200px;
    min-height:55px;
    margin:auto;

    background:#fff;
    border-radius:40px;

    padding:7px 16px 7px 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:box-shadow .35s ease, min-height .35s ease, background .35s ease;
}

.site-header.scrolled .navbar{
    min-height:50px;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 35px rgba(0,0,0,.15);
    backdrop-filter:blur(8px);
}

.logo{
    width:105px;
}

.logo img{
    width:100%;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
}

.nav-menu a{
    font-size:14px;
    color:#142f3c;
    transition:.3s ease;
}

.nav-menu a:hover{
    color:#00a6d2;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.phone-btn{
    border:1px solid #dce5e9;
    padding:9px 16px;
    border-radius:25px;
    font-size:13px;
    color:#164252;
    white-space:nowrap;
}

.quote-btn {
    padding: 10px 18px;
    font-size: 13px;
    background: linear-gradient(172deg, #0EA5E9, #0D9488);
}

.menu-toggle{
    display:none;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#073f51;
    color:#fff;
    cursor:pointer;
    font-size:20px;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;
    min-height:865px;
    overflow:hidden;
    border-radius:0 0 80px 80px;
	background-image: url('images/Hero-bg.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);

    background-size:9px 9px;
    opacity:.35;
}

.hero-map{
    position:absolute;
    width:760px;
    max-width:70%;
    left:50%;
    top:180px;
    transform:translateX(-50%);
    opacity:.12;
    pointer-events:none;
}

.hero-inner{
    position:relative;
    z-index:2;

    max-width:1200px;
    margin:auto;
    min-height:735px;

    padding:145px 20px 70px;

    display:flex;
    align-items:center;

    will-change:transform, opacity;
}

.hero-slider{
    width:100%;
}

.hero-slide{
    display:none;
    width:100%;
}

.hero-slide.active{
    display:block;
}

.hero-content{
    width:100%;
    max-width:560px;
}

.hero-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 12px;
    border-radius:20px;

    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);

    color:#6bc8e3;

    font-size:11px;
    margin-bottom:18px;
}

.hero-tag:before{
    content:"";
    width:5px;
    height:5px;
    background:#09b7df;
    border-radius:50%;
}

.hero h1{
    color:#fff;
    font-size:100px;
    line-height:.95;
    font-weight:600;
    margin-bottom:25px;
    letter-spacing:-1px;
}

.hero-description{
    color:#a7c1ca;
    max-width:530px;
    margin-bottom:25px;
}

.hero-buttons{
    display:flex;
    gap:10px;
    margin-bottom:24px;
}

.hero-stats{
    display:flex;
    align-items:center;
    margin-top:5px;
}

.stat{
    padding-right:28px;
    margin-right:28px;
    border-right:1px solid rgba(255,255,255,.14);
}

.stat:last-child{
    border:none;
}

.stat-number{
    color:#fff;
    font-family:'Jost',sans-serif;
    font-size:27px;
    font-weight:600;
}

.stat-label{
    color:#8baab4;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-top:2px;
}


/* HERO FORM */

.hero-form {
    position: absolute;
    right: 20px;
    top: 190px;
    width: 370px;
    background: rgba(49,106,121,.19);
    border: 1px solid rgba(255,255,255,.05);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.form-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.form-label{
    color:#8eafb8;
    font-size:15px;
    letter-spacing:2px;
}

.form-title{
    color:#fff;
    font-family:'Jost',sans-serif;
    font-size:24px;
    font-weight:500;
}

.online{
    border:1px solid rgba(255,255,255,.15);
    color:#8bd4e8;
    padding:5px 9px;
    border-radius:20px;
    font-size:9px;
}

.form-input{
    width:100%;
    border: 1px solid rgb(207 192 192 / 15%);
    background:rgba(255,255,255,.09);
    color:#fff;
    padding:13px 13px 13px 32px;
    border-radius:6px;
    margin-bottom:10px;
    outline:none;
    font-size:13px;
}

.form-input.textarea-h {
    padding: 13px 13px 13px 13px;
    font-size: 13px;
}

.form-inn .form-control.name {
	background-image: url('images/name.png');
	background-position: 6px center;
}

.form-inn .form-control.email {
    background-image: url('images/mail-icon.png');
	background-position: 8px center;
	background-size: 20px;
}

.form-inn .form-control.call {
    background-image: url('images/phone.png');
	background-position: 8px center;
	background-size: 20px;
}

.form-inn .form-control {
    position: relative;
    background: left center no-repeat;
}

.form-inn .form-control.textarea-h{
min-height:150px;	
}

.form-input::placeholder{
    color:#9eb9c2;
}

.form-textarea{
    min-height:70px;
    resize:none;
}

.submit-btn{
    width:100%;
    background:#fff;
    color:#063d4e;
    border:0;
    border-radius:30px;
    padding:12px;
    cursor:pointer;
    font-size:14px;
    letter-spacing:1px;
    font-weight:600;
	text-transform: uppercase;
}

.response-text{
    color:#91abb3;
    text-align:center;
    font-size:9px;
    margin-top:17px;
}


/* SLIDER CONTROLS */

.slider-controls{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:35px;
}

.slider-arrow{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
    transition:.3s ease;
}

.slider-arrow:hover{
    background:#08a8cd;
}

.slider-dots{
    display:flex;
    gap:7px;
}

.slider-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#819da6;
    cursor:pointer;
}

.slider-dot.active{
    width:20px;
    border-radius:10px;
    background:#0bb1d7;
}

.slide-count{
    color:#89a6af;
    font-size:10px;
}



/* --------------scroll mouse---------------- */

.mouse-scroll{
	position:relative;
	z-index:10;
}

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  animation: floatUpDown 2s ease-in-out infinite;
  transition: opacity .4s ease, visibility .4s ease;
}

/* hidden after the user scrolls down */
.scroll-down.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.scroll-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* mouse icon */
.mouse {
  width: 20px;
  height: 30px;
  border: 2px solid #14b8d4;
  border-radius: 12px;
  position: relative;
}

/* scroll wheel dot */
.wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  background: #14b8d4;
  border-radius: 2px;
  animation: wheelMove 1.5s ease-in-out infinite;
}

.scroll-text {
  font-size: 15px;
  color: #6b8299;
}

/* the whole button floats up and down */
@keyframes floatUpDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}

/* the small wheel dot moves down inside the mouse */
@keyframes wheelMove {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}



/* =========================================================
   ABOUT
========================================================= */

.about{
    padding:100px 0 120px;
    background:#f5f5ff;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;
}

.about-title{
    color:#073c4d;
    margin-bottom:20px;
	font-size:80px;
}

.about-title span{
    display:block;
    color:transparent;
    -webkit-text-stroke:1px #073c4d;
    font-weight:600;
	padding-left: 65px;
}

.about-text{
    color:#172b32;
    max-width:500px;
    margin-bottom:20px;
}
.about-text1{
    color:#6d8a94;
    max-width:500px;
    margin-bottom:20px;
}

.about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.about-tag {
   background: #fff;
    border: 1px solid #dce9ed;
    padding: 7px 13px 7px 26px;
    border-radius: 20px;
    font-size: 15px;
    color: #213f48;
    position: relative;
    font-weight: 500;
}

.about-tag:after{
	content: "";
    position: absolute;
    background-color: #000;
    height: 5px;
    width: 5px;
    border-radius: 50px;
    left: 12px;
    top: 13px;
}

.about-tags span:first-child{
	 border:1px solid rgba(127,222,255,.20);
	 background:rgba(127,222,255,.05);
}
.about-tags span:first-child:after{
	content: "";
    position: absolute;
    background-color: #7FDEFF;
    height: 7px;
    width: 7px;
    border-radius: 50px;
    left: 12px;
    top: 14px;
}

.about-tags span:nth-child(2) {
    border:1px solid rgba(34,197,94,.20);
	 background:rgba(34,197,94,.08);
}
.about-tags span:nth-child(2):after{
	content: "";
    position: absolute;
    background-color: #22C55E;
    height: 7px;
    width: 7px;
    border-radius: 50px;
    left: 12px;
    top: 14px;
}

.about-tags span:nth-child(3) {
    border:1px solid rgba(245,158,11,.30);
	 background:rgba(245,158,11,.05);
}
.about-tags span:nth-child(3):after{
	content: "";
    position: absolute;
    background-color: #F59E0B;
    height: 7px;
    width: 7px;
    border-radius: 50px;
    left: 12px;
    top: 14px;
}

.about-tags span:nth-child(4) {
    border:1px solid rgba(218,191,255,.30);
	 background:rgba(238,233,288,.46);
}
.about-tags span:nth-child(4):after{
	content: "";
    position: absolute;
    background-color: #DABFFF;
    height: 7px;
    width: 7px;
    border-radius: 50px;
    left: 12px;
    top: 14px;
}




.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:7px;
    position:relative;
    z-index:2;

}

.about-image:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    border-radius:7px;
    top:9px;
    left:9px;
    opacity:.4;
}


/* =========================================================
   SERVICES
========================================================= */

.services{
    background:#f5f5ff;
    padding:30px 0 150px;
}

.services-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:25px;
}

.services-header-text{
    color:#718c95;
    max-width:280px;
    font-size:16px;
    line-height:1.5;
}

.services-title{
    margin-bottom:0;
}

.services-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    /* grid-template-rows:130px 130px; */
    gap:5px;
}

.service-card{
    background:#fff;
    border:1px solid #e0eaed;
    border-radius:8px;
    padding:18px;
    position:relative;
    overflow:hidden;
}

.service-card.large{
    grid-row:span 2;
    background:#004153;
    color:#fff;
	background-image: url('images/01.png');
	background-repeat: no-repeat;
	background-position: top right;
}

 .service-card.large .service-icon img{
		 opacity:0.4;
	 }

.service-card.large2 {
    grid-row: span 2;
    background: #004153;
    color: #fff;
}
.service-card.large2 h3 {
    color: #fff;
}

.transport-modes {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 22px;
}

.transport-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.transport-item img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
}

.transport-item span {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #8ba5ae;
    line-height: 1;
}


.service-target {
    background-image: url('images/target-04.png')!important;
    background-repeat: no-repeat!important;
    background-position: top right!important;
    min-height: 213px;
	padding-top: 100px !important;
}


.service-card-3{
	background-color:#F0FDFF!important;
}
.service-card-4{
	background-image: url('images/Frame-28.png')!important;
    background-position: top right!important;
	padding-top: 50px !important;
	    padding-right: 50px !important;
		
}


.service-card.wide{
    grid-column:span 2;
}

.service-icon{
    font-size:22px;
    margin-bottom:10px;
}

.service-card h3{
    font-size:22px;
    margin-bottom:6px;
    color:#083d4e;
}

.service-card.large h3{
    color:#fff;
}

.service-card p{
    font-size:16px;
    line-height:1.5;
    color:#7d969e;
}

.service-card.large p{
    color:#a2bdc5;
}

.service-link{
    position:absolute;
    bottom:15px;
    left:18px;
    font-size:18px;
    color:#0ba4ca;
}


.services-grid2 {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 5px;
	margin-top: 7px;
}

.services-grid2 .service-card{
    background:#fff;
    border:1px solid #e0eaed;
    border-radius:8px;
    padding:18px;
    position:relative;
    overflow:hidden;
}

.services-grid2 .service-card.large{
    grid-row:span 2;
    background:#004153;
    color:#fff;
	background-image: url('images/01.png');
	background-repeat: no-repeat;
	background-position: top right;
}

.services-grid2 .service-card.large2 {
    grid-row: span 2;
    background: #004153;
    color: #fff;
}
.services-grid2 .service-card.large2 h3 {
    color: #fff;
}

/* =========================================================
   PROCESS
========================================================= */

.lading-process{
  position:relative; overflow:hidden; background:#fff;
  border-radius:0 0 70px 70px; font-family:'Inter',system-ui,sans-serif; color:#0b3548;
  margin-bottom: -50px;
    z-index: 1;
}
.lading-process *,.lading-process *::before,.lading-process *::after{box-sizing:border-box}

.lading-process .lp-wave{height:clamp(50px,7vw,95px);background:#f5f5ff;position:relative}
.lading-process .lp-wave svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.lading-process .lp-inner{padding:clamp(24px,5vw,60px) 20px 40px}
.lading-process .lp-head{text-align:center}
.lading-process .lp-eyebrow{font:600 11px/1 'Inter',sans-serif;letter-spacing:.25em;text-transform:uppercase;color:#4fb3dc;margin:0 0 12px}
.lading-process h2{font:600 clamp(30px,4vw,48px)/1.1 'Jost',sans-serif;margin:0;color:#0b3548}

.lading-process .lp-stage{position:relative;width:100%;max-width:1200px;aspect-ratio:960/380;margin:20px auto 0}
.lading-process .lp-path{position:absolute;inset:0;width:100%;height:100%}
.lading-process .lp-path path{fill:none;stroke:#b9e3ec;stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}

.lading-process .lp-step{position:absolute;transform:translateX(-50%);width:230px;text-align:center}
.lading-process .lp-s1{left:12.5%;top:13.9%}
.lading-process .lp-s2{left:37.2%;top:34.5%}
.lading-process .lp-s3{left:62%;top:12.6%}
.lading-process .lp-s4{left:86%;top:24.5%}

.lading-process .lp-dot{display:block;width:16px;height:16px;border:2px solid #0f9bb8;border-radius:50%;margin:-8px auto 0;position:relative;background:#fff}
.lading-process .lp-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#0f9bb8}
.lading-process .lp-icon{width:30px;height:30px;border-radius:50%;background:#0f9bb8;display:grid;place-items:center;margin:14px auto 0}
.lading-process .lp-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lading-process h3{font:600 clamp(15px,1.6vw,22px)/1.2 'Jost',sans-serif;margin:9px 0 6px;color:#0b3548}
.lading-process .lp-step p{font-size:14px;line-height:1.55;color:#8a9bab;margin:0 auto;max-width:230px}

.lading-process .lp-num{position:absolute;left:50%;transform:translateX(-50%);font:700 clamp(40px,5.6vw,56px)/1 'Jost',sans-serif;color:#f0f4f6;pointer-events:none;user-select:none}
.lading-process .lp-s1 .lp-num,.lading-process .lp-s3 .lp-num{top:-60px}
.lading-process .lp-s2 .lp-num{top:222px}
.lading-process .lp-s4 .lp-num{top:215px}

.lading-process .lp-note{max-width:1200px;margin:30px auto 0;text-align:center;font-size:14px;line-height:1.6;color:#8a9bab}




.service-card.large{
    display:flex;
    flex-direction:column;
}

.service-illustration{
    margin-top:auto;
    padding-top:20px;
    margin-left:-18px;
    margin-right:-18px;
    margin-bottom:-18px;
    overflow:hidden;
}

.service-illustration svg{
    display:block;
    width:100%;
    height:auto;
}

/* Tablet / Mobile */
@media (max-width:860px){
  .lading-process{border-radius:0 0 40px 40px}
  .lading-process .lp-stage{aspect-ratio:auto;max-width:460px;margin-top:36px;padding-left:34px}
  .lading-process .lp-path{display:none}
  .lading-process .lp-stage::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;border-left:1.5px dashed #b9e3ec}
  .lading-process .lp-step{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;text-align:left;padding:0 0 38px}
  .lading-process .lp-step:last-child{padding-bottom:0}
  .lading-process .lp-dot{position:absolute;left:-34px;top:0;margin:0}
  .lading-process .lp-icon{margin:0 0 10px;width:30px;height:30px}
  .lading-process h3{margin:0 0 6px;font-size:18px}
  .lading-process .lp-step p{margin:0;max-width:none;font-size:12px}
  .lading-process .lp-num{left:auto;right:0;top:-6px!important;transform:none;font-size:44px}
  .lading-process .lp-note{font-size:11.5px;margin-top:36px}
  .services-grid2 {
    grid-template-columns: auto;
}
}
@media (max-width:480px){ .lading-process .lp-inner{padding-inline:16px} }


/* =========================================================
   ADVANTAGES
========================================================= */

.why-lading{position:relative;background:linear-gradient(180deg,#012b3d 0%,#01293a 100%);font-family:'Inter',system-ui,sans-serif;padding:120px 0 50px;overflow:hidden}
.why-lading *,.why-lading *::before,.why-lading *::after{box-sizing:border-box}
.why-lading .wl-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.why-lading .wl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px}
.why-lading .wl-eyebrow{font:500 12px/1 'Inter',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#4fb3dc;margin:0 0 14px}
.why-lading h2{font:600 clamp(32px,4.4vw,48px)/1.3 'Jost',sans-serif;color:#fff;margin:0;max-width:340px}
.why-lading .wl-sub{font-size:14px;line-height:1.5;color:#7f99a8;margin:0 0 6px;max-width:250px}

/* Grid */
.why-lading .wl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-lading .wl-card{position:relative;overflow:hidden;background:#163f4f;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:17px 17px 26px;min-height:192px}
.why-lading .wl-card::before{content:"";position:absolute;top:0;left:15%;right:0;height:1px;background:linear-gradient(90deg,transparent,currentColor 45%,transparent)}
.why-lading .wl-wide{grid-column:1 / -1;display:flex;align-items:center;min-height:86px;padding:16px 17px}
.why-lading .wl-wide::before{left:10%;right:10%}

.why-lading .wl-num{position:absolute;top:-2px;right:6px;font:700 62px/1 'Jost',sans-serif;color:currentColor;opacity:.13;pointer-events:none;user-select:none}

.why-lading .wl-icon{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center;color:inherit}
.why-lading .wl-icon::before,.why-lading .wl-icon::after{content:"";position:absolute;inset:0;border-radius:12px}
.why-lading .wl-icon::before{background:currentColor;opacity:.14}
.why-lading .wl-icon::after{border:1px solid currentColor;opacity:.3}
.why-lading .wl-icon svg{position:relative;z-index:1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.why-lading h3{font:500 22px/1.25 'Jost',sans-serif;color:#fff;margin:21px 0 10px}
.why-lading .wl-card p{font-size:14px;line-height:1.65;color:#8aa3b0;margin:0}
.why-lading .wl-wide .wl-text{margin-left:22px}
.why-lading .wl-wide h3{margin:0 0 6px}

/* Accent colors */
.why-lading .wl-c1,.why-lading .wl-c7{color:#4fb3dc}
.why-lading .wl-c2{color:#1fb5a0}
.why-lading .wl-c3{color:#2fb36b}
.why-lading .wl-c4{color:#e8a020}
.why-lading .wl-c5{color:#b9a6f0}
.why-lading .wl-c6{color:#e5484d}

/* Stats */
.why-lading .wl-stats{position:relative;margin-top:44px;padding:21px 0 18px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 48px}
.why-lading .wl-stats::before{content:"";position:absolute;top:0;left:3%;right:3%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.why-lading .wl-stat{display:flex;align-items:center;gap:10px;font-size:14px;color:#7f99a8}
.why-lading .wl-stat svg{width:16px;height:16px;fill:none;stroke:#5f93a8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Tablet */
@media (max-width:900px){
  .why-lading .wl-grid{grid-template-columns:repeat(2,1fr)}
  .why-lading .wl-stats{gap:14px 32px}
}
/* Mobile */
@media (max-width:600px){
  .why-lading .wl-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
  .why-lading h2{max-width:none}
  .why-lading .wl-sub{max-width:none;margin:0}
  .why-lading .wl-grid{grid-template-columns:1fr}
  .why-lading .wl-card{min-height:0}
  .why-lading .wl-wide{align-items:flex-start;padding:17px 17px 26px}
  .why-lading .wl-wide .wl-text{margin-left:16px}
  .why-lading .wl-stats{flex-direction:column;align-items:flex-start;padding-left:10px;gap:14px}
}


/* =========================================================
   FOOTER
========================================================= */

.lading-footer{background:linear-gradient(180deg,#fbf3fb 0%,#f3f4fd 50%,#eaf4ff 100%);font-family:'Inter',system-ui,sans-serif;color:#0b3548;padding:45px 0 45px}
.lading-footer *,.lading-footer *::before,.lading-footer *::after{box-sizing:border-box}
.lading-footer a{text-decoration:none;color:inherit}
.lading-footer ul{list-style:none;margin:0;padding:0}
.lading-footer .lf-wrap{max-width:1200px;margin:0 auto;padding:0 35px}

.lading-footer .lf-top{display:grid;grid-template-columns:1fr 364px 138px;align-items:start}

/* Brand */
.lading-footer .lf-logo{display:inline-block;position:relative;margin-bottom:14px;line-height:1}
.lading-footer .lf-logo b{display:block;font:400 62px/1 'Mrs Saint Delafield',cursive;color:#0b3548;transform:rotate(-4deg);transform-origin:left bottom}
.lading-footer .lf-logo small{position:absolute;left:12px;bottom:-4px;font:400 6px/1 'Inter',sans-serif;letter-spacing:.3em;color:#0b3548}
.lading-footer .lf-about{font-size:14px;line-height:22px;max-width:340px;margin:0 0 20px}
.lading-footer .lf-social{display:flex;gap:15px}
.lading-footer .lf-social a,.lading-footer .lf-ico{display:grid;place-items:center;flex:none;border-radius:50%;background:#e7f3fd;border:1px solid #d6ebfa;color:#4fb3dc}
.lading-footer .lf-social a{width:37px;height:37px;transition:background .2s,transform .2s}
.lading-footer .lf-social a:hover {
    .lading-footer .lf-social a:hover{background:#d3eafa;transform:translateY(-2px)}
}
.lading-footer svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgb(1 41 58);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lading-footer .lf-social svg.lf-fill {
    fill: rgb(1 41 58);
    stroke: none;
    width: 14px;
    height: 14px;
}

/* Headings */
.lading-footer h4{font:400 17px/1.2 'Jost',sans-serif;color:#0b3548;margin:0 0 24px}

/* Contact */
.lading-footer .lf-contact li{display:flex;align-items:center;gap:18px;margin-bottom:14px;font-size:14px;line-height:22px}
.lading-footer .lf-ico{width:40px;height:40px}
.lading-footer .lf-ico svg{width:17px;height:17px}

/* Quick links */
.lading-footer .lf-links li{margin-bottom:14px}
.lading-footer .lf-links a{display:flex;align-items:center;gap:14px;font-size:14px;line-height:22px;transition:color .2s}
.lading-footer .lf-links a::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,transparent,#01293a);flex:none;transition:width .2s}
.lading-footer .lf-links a:hover{color:#0f9bb8}
.lading-footer .lf-links a:hover::before{width:26px}
.lading-footer .lf-links li:first-child{margin-top:-2px}

/* Bottom bar */
.lading-footer .lf-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:20px;font-size:14px;color:#8a9bb0}
.lading-footer .lf-line{position:relative;width:360px;height:1px;background:linear-gradient(90deg,transparent,#8fd3f0 45%,#8fd3f0 55%,transparent)}
.lading-footer .lf-line::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:#4fb3dc;transform:translate(-50%,-50%)}
.lading-footer .lf-bottom p{margin:0; font-size: 14px;}
.lading-footer .lf-bottom p:last-child{text-align:right}

/* Tablet */
@media (max-width:991px){
  .lading-footer .lf-top{grid-template-columns:1fr 1fr;gap:36px 40px}
  .lading-footer .lf-brand{grid-column:1 / -1}
  .lading-footer .lf-bottom{grid-template-columns:1fr;text-align:center;gap:14px}
  .lading-footer .lf-line{display:none}
  .lading-footer .lf-bottom p:last-child{text-align:center}
}
/* Mobile */
@media (max-width:767px){
	.hero-form{
		display:none;
	}
	.hero {
    min-height: 780px!important;
}
.hero-inner {
    min-height: 797px!important;
}
/* .site-header { */
    /* width: 92%; */
/* } */
.arrow {
    font-size: 22px!important;
}
}


@media (max-width:575px){
  .lading-footer .lf-wrap{padding:0 20px}
  .lading-footer .lf-top{grid-template-columns:1fr}
  .lading-footer h4{margin-bottom:18px}
  .lading-footer .lf-bottom{font-size:13px;margin-top:10px}
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

    .navbar{
        max-width:90%;
    }

    .hero-inner{
        padding-left:40px;
        padding-right:40px;
    }

    .hero-form{
        right:40px;
    }

    .hero-content{
        max-width:520px;
    }

}


@media(max-width:900px){

    .nav-menu,
    .header-actions{
        display:none;
    }

    .navbar{
        max-width:calc(100% - 30px);
    }

    .menu-toggle{
        display:block;
    }

    .navbar.mobile-open{
        border-radius:25px;
        flex-wrap:wrap;
    }

    .navbar.mobile-open .nav-menu{
        display:flex;
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
        padding:20px 5px 10px;
    }

    .navbar.mobile-open .header-actions{
        display:flex;
        width:100%;
        padding-bottom:5px;
    }

    .hero{
        min-height:900px;
    }

    .hero-inner{
        min-height:900px;
        align-items:flex-start;
        padding-top:130px;
    }

    .hero-content{
        max-width:100%;
        padding-right:350px;
    }

    .hero-form{
        top:310px;
        right:40px;
        width:300px;
    }

    .about-grid{
        gap:40px;
    }

    .process-path{
        transform:scale(.9);
        transform-origin:top center;
    }

}


@media(max-width:700px){

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .main-heading{
        font-size:40px;
    }

    .sub-heading{
        font-size:22px;
    }

    p{
        font-size:16px;
    }

    /* HEADER */

    .site-header{
        top:15px;
    }

    .site-header.scrolled{
        top:8px;
    }

    .navbar{
        padding:7px 10px 7px 18px;
    }

    .logo{
        width:85px;
    }

    /* HERO */

    .hero{
        min-height:920px;
        border-radius:0 0 45px 45px;
    }

    .hero-inner{
        min-height:920px;
        padding:120px 20px 140px;
        display:block;
    }

    .hero-content{
        padding-right:0;
        max-width:100%;
    }

    .hero h1{
        font-size:48px;
    }

    .hero-description{
        max-width:100%;
    }

    .hero-buttons{
        flex-wrap:wrap;
    }

    .hero-stats{
        flex-wrap:wrap;
        gap:15px;
    }

    .stat{
        padding-right:15px;
        margin-right:0;
    }

    .stat-number{
        font-size:22px;
    }

    .hero-form{
        position:relative;
        top:auto;
        right:auto;
        width:100%;
        max-width:390px;
        margin:35px auto 0;
    }

    .slider-controls{
        margin-top:20px;
    }

    .hero-wave{
        height:55px;
    }

    /* ABOUT */

    .about{
        padding:70px 0 80px;
    }

    .about-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .about-image{
        max-width:500px;
        margin:auto;
    }

    /* SERVICES */

    .services{
        padding-bottom:100px;
    }

    .services-header{
        display:block;
    }

    .services-header-text{
        margin-top:15px;
    }

    .services-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }

    .service-card.large{
        grid-column:span 2;
        grid-row:auto;
        min-height:180px;
    }
	
	

    .service-card.wide{
        grid-column:span 2;
    }

    /* PROCESS */

    .process{
        border-radius:45px;
        padding:70px 0 70px;
    }

    .process-heading{
        margin-bottom:30px;
    }

    .process-path{
        height:auto;
        transform:none;
        max-width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:40px 15px;
    }

    .path-svg{
        display:none;
    }

    .process-item,
    .process-item:nth-child(2),
    .process-item:nth-child(3),
    .process-item:nth-child(4),
    .process-item:nth-child(5){
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        width:auto;
    }

    .process-bottom-number{
        display:none;
    }

    .process-description{
        margin-top:50px;
        padding:0 10px;
    }

    /* ADVANTAGES */

    .advantages{
        padding:70px 0;
    }

    .advantages-header{
        display:block;
    }

    .advantages-intro{
        margin-top:15px;
    }

    .advantages-grid{
        grid-template-columns:1fr;
    }

    .adv-card,
    .adv-card.wide{
        grid-column:auto;
        min-height:110px;
    }

    .advantages-bottom{
        flex-wrap:wrap;
        gap:15px;
    }

    /* FOOTER */

    .footer{
        border-radius:45px 45px 0 0;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:8px;
    }

}


@media(max-width:450px){

    .main-heading{
        font-size:36px;
    }

    .hero h1{
        font-size:43px;
    }

    .hero-stats{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .stat{
        border-right:1px solid rgba(255,255,255,.12);
        padding-right:8px;
    }

    .stat:last-child{
        border:none;
    }

    .stat-number{
        font-size:20px;
    }

    .stat-label{
        font-size:8px;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card.large,
    .service-card.wide{
        grid-column:auto;
    }

    .process-path{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   SMALL ANIMATION
========================================================= */

.fade-slide{
    animation:fadeSlide .5s ease;
}

@keyframes fadeSlide{

    from{
        opacity:0;
        transform:translateX(20px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


/* =========================================================
   PAGE LOAD ANIMATIONS (hero)
========================================================= */

.site-header{
    animation:headerIn .9s cubic-bezier(.22,.61,.36,1) both;
}

.hero-slide.active .hero-content > *{
    animation:heroUp .9s cubic-bezier(.22,.61,.36,1) both;
}

.hero-slide.active .hero-content > *:nth-child(1){ animation-delay:.15s; }
.hero-slide.active .hero-content > *:nth-child(2){ animation-delay:.28s; }
.hero-slide.active .hero-content > *:nth-child(3){ animation-delay:.41s; }
.hero-slide.active .hero-content > *:nth-child(4){ animation-delay:.54s; }
.hero-slide.active .hero-content > *:nth-child(5){ animation-delay:.67s; }

.hero-form{
    animation:heroFormIn 1s cubic-bezier(.22,.61,.36,1) .5s both;
}

.slider-controls{
    animation:heroUp .9s cubic-bezier(.22,.61,.36,1) .9s both;
}

.mouse-scroll{
    animation:fadeInSoft 1s ease 1.3s both;
}

@keyframes headerIn{
    from{ opacity:0; transform:translateY(-60px); }
    to{   opacity:1; transform:translateY(0); }
}

@keyframes heroUp{
    from{ opacity:0; transform:translateY(40px); }
    to{   opacity:1; transform:translateY(0); }
}

@keyframes heroFormIn{
    from{ opacity:0; transform:translateX(60px); }
    to{   opacity:1; transform:translateX(0); }
}

@keyframes fadeInSoft{
    from{ opacity:0; }
    to{   opacity:1; }
}


/* =========================================================
   SCROLL REVEAL (sections)
========================================================= */

.js [data-reveal]{
    opacity:0;
    transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}

.js [data-reveal="up"]{    transform:translateY(45px); }
.js [data-reveal="left"]{  transform:translateX(-60px); }
.js [data-reveal="right"]{ transform:translateX(60px); }
.js [data-reveal="zoom"]{  transform:scale(.92); }

.js [data-reveal].in-view{
    opacity:1;
    transform:none;
}


/* respect "reduce motion" setting */
@media (prefers-reduced-motion: reduce){

    .site-header,
    .hero-slide.active .hero-content > *,
    .hero-form,
    .slider-controls,
    .mouse-scroll{
        animation:none !important;
    }

    .js [data-reveal]{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

}


/* =========================================================
   ACTIVE MENU LINK
========================================================= */

.nav-menu a{
    position:relative;
    padding-bottom:4px;
}

.nav-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#00a6d2;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}

.nav-menu a.active,
.nav-menu a:hover{
    color:#00a6d2;
}

.nav-menu a.active::after,
.nav-menu a:hover::after{
    transform:scaleX(1);
}

html,
body{
    max-width:100%;
    overflow-x:hidden;
    overflow-x:clip;      /* modern browsers: clips without creating a scroll area */
}

.about,
.services,
.lading-footer{
    overflow-x:clip;
}

/* 2. Header always fits the real screen width */
.site-header{
    left:0;
    right:0;
    width:auto;
    max-width:100%;
}

@media (max-width:900px){

    .navbar{
        width:calc(100% - 30px);
        max-width:calc(100% - 30px);
        min-width:0;
        margin-left:auto;
        margin-right:auto;
    }

    /* 3. Opened mobile menu: phone + quote buttons wrap instead of overflowing */
    .navbar.mobile-open .header-actions{
        flex-wrap:wrap;
    }

    .navbar.mobile-open .phone-btn,
    .navbar.mobile-open .quote-btn{
        flex:1 1 auto;
        text-align:center;
        white-space:normal;
    }

    /* very small / landscape phones: let the opened menu scroll */
    .navbar.mobile-open{
        max-height:calc(100vh - 30px);
        max-height:calc(100dvh - 30px);
        overflow-y:auto;
    }

    /* 4. Slide-in-from-side effects start OFF-SCREEN and widen the page
          on load. On tablet/mobile use a vertical reveal instead. */
    .js [data-reveal="left"],
    .js [data-reveal="right"]{
        transform:translateY(45px);
    }
}