/* =========================================================
   01. GLOBAL / RESET
   ========================================================= */
*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"DM Sans",Arial,sans-serif;
  color:#17202b;
  background:#fff;
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}


/* =========================================================
   02. HEADER / TOP BAR
   ========================================================= */
.topbar{
  background:#0b1220;
  color:#cbd5e1;
  font-size:17px;
}

.topbar-inner{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.top-links{
  display:flex;
  gap:24px;
}

.top-links a:hover{
  color:#fff;
}


/* =========================================================
   03. NAVBAR & LOGO
   ========================================================= */
.navbar{
  height:78px;
  background:#fff;
  border-bottom:1px solid #e9edf2;
  position:sticky;
  top:0;
  z-index:1000;
}

.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
}

/* Logo Image */
.brand{
  display:flex;
  align-items:center;
  margin-right:auto;
  text-decoration:none;
}

.brand img{
  width:175px;
  height:68px;
  object-fit:contain;
  object-position:left center;
  display:block;
}

/* Old text logo hidden */
.brand span,
.brand b,
.brand small{
  display:none;
}


/* =========================================================
   04. NAVIGATION & DROPDOWN
   ========================================================= */
.nav-menu{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav-menu>a,
.nav-dropdown>a{
  font-size:13px;
  font-weight:700;
  padding:29px 11px;
  color:#334155;
  position:relative;
}

.nav-menu>a:after,
.nav-dropdown>a:after{
  content:"";
  height:2px;
  position:absolute;
  left:11px;
  right:11px;
  bottom:18px;
  background:#e24b2f;
  transform:scaleX(0);
  transition:.25s;
}

.nav-menu>a:hover:after,
.nav-dropdown>a:hover:after{
  transform:scaleX(1);
}

.nav-dropdown{
  position:relative;
}

.nav-dropdown>a span{
  font-size:10px;
}

.dropdown-menu{
  position:absolute;
  top:66px;
  left:0;
  width:220px;
  background:#fff;
  box-shadow:0 18px 45px #17202b18;
  border:1px solid #edf0f3;
  border-radius:12px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s;
}

.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:none;
}

.dropdown-menu a{
  display:block;
  padding:9px 11px;
  font-size:12px;
  border-radius:8px;
}

.dropdown-menu a:hover{
  background:#f4f6f8;
  color:#e24b2f;
}

.nav-cta{
  background:#e24b2f;
  color:#fff;
  padding:12px 18px;
  border-radius:8px;
  font-weight:800;
  font-size:12px;
  box-shadow:0 10px 24px #e24b2f30;
}

.nav-cta span{
  margin-left:8px;
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
}


/* =========================================================
   05. HERO SLIDER
   ========================================================= */
.hero{
  height:680px;
  position:relative;
  overflow:hidden;
  background:#0b1220;
}

.hero-slider,
.hero-slide{
  position:absolute;
  inset:0;
}

.hero-slide{
  opacity:0;
  transition:opacity 1s ease;
}

.hero-slide.active{
  opacity:1;
}

.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    #07111ddd 0%,
    #07111da8 42%,
    #07111d38 75%,
    #07111d20 100%
  );
}

.hero-content{
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  z-index:2;
}

.hero-copy{
  max-width:650px;
  color:#fff;
  padding-bottom:35px;
}

.eyebrow,
.section-label{
  font-size:11px;
  letter-spacing:2.5px;
  font-weight:800;
  color:#e24b2f;
}

.hero .eyebrow{
  color:#ffb19f;
}

.hero h1{
  font-family:Manrope,sans-serif;
  font-size:clamp(42px,5.2vw,70px);
  line-height:1.05;
  margin:16px 0 20px;
  letter-spacing:-2px;
}

.hero h1 em{
  font-style:normal;
  color:#ff967e;
}

.hero p{
  font-size:17px;
  color:#d9e0e8;
  max-width:610px;
  margin:0 0 28px;
}


/* =========================================================
   06. HERO BUTTONS & CONTROLS
   ========================================================= */
.hero-actions{
  display:flex;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:0;
  border-radius:8px;
  padding:14px 22px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:.25s;
}

.btn-primary{
  background:#e24b2f;
  color:#fff;
  box-shadow:0 12px 30px #e24b2f30;
}

.btn-primary:hover{
  transform:translateY(-2px);
  background:#f15a3d;
}

.btn-whatsapp{
  background:#1fbd65;
  color:#fff;
  box-shadow:0 12px 30px #1fbd6530;
}

.btn-whatsapp:hover{
  transform:translateY(-2px);
}

.btn-white{
  background:#fff;
  color:#17202b;
}

.hero-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:11px;
  color:#d5dde6;
  margin-top:25px;
}

.hero-trust span{
  color:#ff967e;
}

.slider-controls{
  position:absolute;
  z-index:4;
  bottom:34px;
  right:max(20px,calc((100vw - 1180px)/2));
  display:flex;
  align-items:center;
  gap:8px;
}

.slider-controls button{
  width:38px;
  height:38px;
  border:1px solid #ffffff50;
  background:#ffffff15;
  color:#fff;
  border-radius:50%;
  cursor:pointer;
}

.slider-controls button:hover{
  background:#e24b2f;
  border-color:#e24b2f;
}

.dots{
  display:flex;
  gap:6px;
  margin:0 5px;
}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffffff70;
  cursor:pointer;
}

.dot.active{
  width:20px;
  border-radius:5px;
  background:#fff;
}


/* =========================================================
   07. QUICK INFO STRIP
   ========================================================= */
.quick-strip{
  background:#e24b2f;
  color:#fff;
}

.quick-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.quick-grid>div{
  padding:18px 22px;
  border-right:1px solid #ffffff28;
  display:flex;
  flex-direction:column;
}

.quick-grid>div:last-child{
  border:0;
}

.quick-grid strong{
  font-family:Manrope,sans-serif;
  font-size:14px;
}

.quick-grid span{
  font-size:11px;
  color:#ffd9d1;
}


/* =========================================================
   08. COMMON SECTIONS
   ========================================================= */
.section{
  padding:105px 0;
}


/* =========================================================
   09. ABOUT SECTION
   ========================================================= */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.image-card{
  position:relative;
}

.image-card img{
  height:500px;
  width:100%;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 25px 60px #10182718;
}

.image-badge{
  position:absolute;
  bottom:25px;
  right:-25px;
  background:#fff;
  padding:18px 22px;
  border-radius:12px;
  box-shadow:0 16px 40px #10182720;
  display:flex;
  flex-direction:column;
}

.image-badge b{
  font-family:Manrope;
  font-size:15px;
}

.image-badge span{
  font-size:11px;
  color:#6b7280;
}

.section-copy h2,
.section-head h2,
.contact h2,
.quote-copy h2{
  font-family:Manrope,sans-serif;
  font-size:clamp(32px,4vw,48px);
  line-height:1.1;
  letter-spacing:-1.5px;
  margin:12px 0 20px;
}

.section-copy h2 span,
.section-head h2 span,
.contact h2 span,
.quote-copy h2 span{
  color:#e24b2f;
}

.section-copy p{
  color:#64748b;
  font-size:14px;
  margin:0 0 14px;
}

.feature-line{
  display:flex;
  gap:15px;
  margin-top:23px;
}

.feature-line>span{
  color:#e24b2f;
  font-weight:800;
  font-size:12px;
}

.feature-line div{
  display:flex;
  flex-direction:column;
}

.feature-line b{
  font-size:13px;
}

.feature-line small{
  font-size:11px;
  color:#7a8796;
}

.text-link{
  display:inline-block;
  color:#e24b2f;
  font-weight:800;
  font-size:12px;
  margin-top:25px;
}

.text-link span{
  margin-left:8px;
}


/* =========================================================
   10. WHY CHOOSE US
   ========================================================= */
.why{
  background:#f5f7f9;
}

.section-head{
  margin-bottom:45px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}

.section-head h2{
  max-width:700px;
  margin-bottom:0;
}

.section-head>div{
  max-width:800px;
}

.section-head p{
  max-width:640px;
  color:#718096;
  font-size:14px;
}

.center{
  text-align:center;
  display:block;
}

.center h2{
  margin-left:auto;
  margin-right:auto;
}

.center p{
  margin:0 auto;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.why-card{
  background:#fff;
  border:1px solid #e9edf2;
  padding:28px;
  border-radius:14px;
  transition:.3s;
}

.why-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px #10182712;
  border-color:#f0c1b8;
}

.why-card i{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#fff0ed;
  color:#e24b2f;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-weight:900;
  font-size:13px;
}

.why-card h3{
  font-family:Manrope;
  margin:17px 0 7px;
  font-size:17px;
}

.why-card p,
.service-body p{
  font-size:17px;
  color:#728093;
  margin:0;
}


/* =========================================================
   11. SERVICES
   ========================================================= */
.services{
  background:#fff;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.service-card{
  border:1px solid #e8edf2;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  transition:.3s;
}

.service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 45px #10182712;
}

.service-img{
  height:215px;
  overflow:hidden;
  background:#eee;
}

.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s;
}

.service-card:hover .service-img img{
  transform:scale(1.05);
}

.service-body{
  padding:23px;
}

.service-body>span{
  font-size:10px;
  color:#e24b2f;
  font-weight:800;
  letter-spacing:1px;
}

.service-body h3{
  font-family:Manrope;
  font-size:18px;
  margin:8px 0;
}

.service-link{
  display:inline-block;
  margin-top:15px;
  color:#e24b2f;
  font-size:11px;
  font-weight:800;
}


/* =========================================================
   12. MOVING PROCESS
   ========================================================= */
.process{
  background:#0b1220;
  color:#fff;
}

.process .section-label{
  color:#ff967e;
}

.process .section-head h2{
  color:#fff;
}

.process .section-head p{
  color:#9eabbc;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.process-step{
  min-height:210px;
  padding:25px;
  border:1px solid #ffffff14;
  border-radius:15px;
  background:#ffffff08;
  position:relative;
  transition:.3s;
}

.process-step:hover{
  background:#ffffff10;
  transform:translateY(-5px);
}

.process-number{
  font-family:Manrope;
  font-size:36px;
  font-weight:900;
  color:#ff967e;
  line-height:1;
}

.process-step h3{
  font-family:Manrope;
  font-size:16px;
  margin:20px 0 8px;
}

.process-step p{
  margin:0;
  font-size:11px;
  color:#9eabbc;
}


/* =========================================================
   13. LOCATIONS / BRANCHES
   ========================================================= */
.locations{
  background:#f5f7f9;
}

.location-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
}

.location-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:25px;
}

.location-list a{
  background:#fff;
  border:1px solid #e6ebef;
  padding:12px 13px;
  border-radius:8px;
  font-size:11px;
  font-weight:800;
  transition:.25s;
}

.location-list a:hover{
  border-color:#e24b2f;
  color:#e24b2f;
  transform:translateY(-2px);
}

.location-map{
  min-height:370px;
  border-radius:18px;
  background:#e8edf1;
  position:relative;
  overflow:hidden;
}


/* =========================================================
   14. STATS
   ========================================================= */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid #e8edf2;
  border-bottom:1px solid #e8edf2;
}

.stat{
  padding:28px 18px;
  text-align:center;
  border-right:1px solid #e8edf2;
}

.stat:last-child{
  border-right:0;
}

.stat strong{
  display:block;
  font-family:Manrope;
  font-size:30px;
  color:#e24b2f;
}

.stat span{
  display:block;
  margin-top:4px;
  color:#718096;
  font-size:11px;
}


/* =========================================================
   15. CLIENTS / TESTIMONIALS
   ========================================================= */
.testimonials{
  background:#fff;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.testimonial-card{
  padding:28px;
  border:1px solid #e8edf2;
  border-radius:15px;
  background:#fff;
  transition:.3s;
}

.testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px #10182712;
}

.testimonial-stars{
  color:#e24b2f;
  letter-spacing:2px;
  font-size:12px;
}

.testimonial-card p{
  font-size:13px;
  color:#667487;
  margin:18px 0;
}

.testimonial-card b{
  font-size:12px;
}


/* =========================================================
   16. QUOTE SECTION
   ========================================================= */
.quote-section{
  padding:90px 0;
  background:#f5f7f9;
}

.quote-wrap{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:start;
}

.quote-copy p{
  font-size:14px;
  color:#718096;
}

.contact-mini{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:30px;
  font-size:12px;
  font-weight:800;
}

.quote-form{
  background:#fff;
  border:1px solid #e6ebef;
  border-radius:18px;
  padding:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  box-shadow:0 20px 55px #1018270d;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  font-size:10px;
  font-weight:800;
  color:#455468;
}

.field input,
.field textarea{
  width:100%;
  border:1px solid #dfe5eb;
  border-radius:8px;
  padding:12px 13px;
  font:inherit;
  font-size:12px;
  outline:none;
  background:#fff;
}

.field textarea{
  height:105px;
  resize:vertical;
}

.field input:focus,
.field textarea:focus{
  border-color:#e24b2f;
  box-shadow:0 0 0 3px #e24b2f12;
}


/* =========================================================
   17. CTA BANNER
   ========================================================= */
.cta-banner{
  background:#e24b2f;
  color:#fff;
  padding:55px 0;
}

.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.cta-banner .section-label{
  color:#ffd0c5;
}

.cta-banner h2{
  font-family:Manrope;
  font-size:34px;
  margin:7px 0;
}

.cta-banner p{
  font-size:13px;
  color:#ffe3dd;
  margin:0;
}

.cta-actions{
  display:flex;
  gap:10px;
}


/* =========================================================
   18. CONTACT SECTION
   ========================================================= */
.contact{
  background:#fff;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.contact-info>p{
  font-size:14px;
  color:#718096;
  max-width:550px;
}

.contact-item{
  display:flex;
  gap:15px;
  margin-top:23px;
}

.contact-item i{
  font-style:normal;
  width:36px;
  height:36px;
  background:#fff0ed;
  color:#e24b2f;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-item div{
  display:flex;
  flex-direction:column;
}

.contact-item b{
  font-size:11px;
}

.contact-item span,
.contact-item a{
  font-size:12px;
  color:#687587;
}

.map-card{
  height:390px;
  background:#eef2f5;
  border-radius:18px;
  overflow:hidden;
  position:relative;
}

.map-art{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 40% 45%,#fff 0 8%,transparent 9%),
    linear-gradient(135deg,#e8edf1,#dce4e9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.map-art:before,
.map-art:after{
  content:"";
  position:absolute;
  width:140%;
  height:1px;
  background:#c6d0d8;
  transform:rotate(22deg);
}

.map-art:after{
  transform:rotate(-32deg);
}

.map-art span,
.map-art b,
.map-art small,
.map-art a{
  position:relative;
  z-index:2;
}

.map-art span{
  font-size:10px;
  letter-spacing:3px;
  color:#e24b2f;
  font-weight:900;
}

.map-art b{
  font-family:Manrope;
  font-size:32px;
  margin-top:8px;
}

.map-art small{
  color:#687587;
}

.map-art a{
  margin-top:22px;
  background:#fff;
  border-radius:8px;
  padding:10px 14px;
  font-size:11px;
  font-weight:800;
  box-shadow:0 8px 20px #10182715;
}


/* =========================================================
   19. FOOTER
   ========================================================= */
.footer{
  background:#0b1220;
  color:#aeb8c5;
  padding-top:65px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:45px;
}

.footer-brand{
  margin-bottom:18px;
}

.footer-brand b{
  color:#fff;
}

.footer p{
  font-size:11px;
  line-height:1.8;
}

.footer h4{
  color:#fff;
  font-family:Manrope;
  font-size:13px;
  margin:0 0 17px;
}

.footer-grid>div:not(:first-child)>a{
  display:block;
  font-size:11px;
  margin:7px 0;
  color:#aeb8c5;
}

.footer-grid>div:not(:first-child)>a:hover{
  color:#fff;
}

.footer-bottom{
  border-top:1px solid #263142;
  padding:18px 0;
}

.footer-bottom .container{
  display:flex;
  justify-content:space-between;
  font-size:10px;
}


/* =========================================================
   20. FLOATING CALL / WHATSAPP BUTTONS
   ========================================================= */
.floating-actions{
  position:fixed;
  z-index:1200;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  background:#fff;
  padding:6px;
  border-radius:999px;
  box-shadow:0 12px 35px #10182735;
}

.floating-actions a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-size:11px;
  font-weight:800;
}

.float-call{
  background:#0e1725;
}

.float-wa{
  background:#1fbd65;
}

.floating-actions span{
  width:23px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#ffffff20;
}

.float-wa:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid #1fbd65;
  animation:pulse 2s infinite;
}


/* =========================================================
   21. ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:.7s ease;
}

.reveal.show{
  opacity:1;
  transform:none;
}

@keyframes pulse{
  0%{
    transform:scale(1);
    opacity:.8;
  }

  70%,100%{
    transform:scale(1.12);
    opacity:0;
  }
}


/* =========================================================
   22. TABLET RESPONSIVE
   ========================================================= */
@media(max-width:1050px){

  .nav-menu>a,
  .nav-dropdown>a{
    padding-left:7px;
    padding-right:7px;
    font-size:11px;
  }

  .nav-cta{
    display:none;
  }

  .split{
    gap:45px;
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .process-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .process-step{
    min-height:190px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .hero{
    height:610px;
  }
}


/* =========================================================
   23. MOBILE RESPONSIVE
   ========================================================= */
@media(max-width:760px){

  .container{
    width:min(100% - 28px,1180px);
  }

  .topbar{
    display:none;
  }

  .navbar{
    height:100px;
  }

  .nav-inner{
    gap:12px;
  }

  /* Mobile Logo */
  .brand img{
    width:178px;
    height:71px;
    object-fit:contain;
    object-position:left center;
  }

  .brand span,
  .brand b,
  .brand small{
    display:none;
  }

  .menu-toggle{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-left:auto;
    cursor:pointer;
  }

  .menu-toggle span{
    width:24px;
    height:2px;
    background:#17202b;
    transition:.25s;
  }

  .nav-menu{
    position:absolute;
    left:14px;
    right:14px;
    top:64px;
    background:#fff;
    border:1px solid #e7ebef;
    border-radius:12px;
    padding:8px;
    box-shadow:0 18px 40px #10182718;
    display:none;
    flex-direction:column;
    align-items:stretch;
  }

  .nav-menu.open{
    display:flex;
  }

  .nav-menu>a,
  .nav-dropdown>a{
    padding:11px;
    border-radius:7px;
  }

  .nav-menu>a:after,
  .nav-dropdown>a:after{
    display:none;
  }

  .nav-dropdown .dropdown-menu{
    position:static;
    width:auto;
    box-shadow:none;
    border:0;
    padding:0 0 0 10px;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }

  .nav-dropdown.open .dropdown-menu{
    display:block;
  }

  .hero{
    height:590px;
  }

  .hero-slide img{
    object-fit:cover;
    object-position:center;
  }

  .hero-overlay{
    background:
      linear-gradient(
        90deg,
        #07111de8 0%,
        #07111d99 70%,
        #07111d55
      );
  }

  .hero-copy{
    padding:0 3px 25px;
  }

  .hero h1{
    font-size:40px;
    letter-spacing:-1.3px;
  }

  .hero p{
    font-size:14px;
  }

  .hero-trust{
    font-size:9px;
    gap:10px;
  }

  .slider-controls{
    right:14px;
    bottom:20px;
  }

  .quick-grid{
    grid-template-columns:1fr 1fr;
  }

  .quick-grid>div{
    padding:14px;
  }

  .quick-grid strong{
    font-size:12px;
  }

  .quick-grid span{
    font-size:9px;
  }

  .section{
    padding:75px 0;
  }

  .split,
  .quote-wrap,
  .contact-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .image-card img{
    height:350px;
  }

  .image-badge{
    right:12px;
  }

  .section-head{
    display:block;
  }

  .section-head .text-link{
    margin-top:12px;
  }

  .why-grid,
  .testimonial-grid{
    grid-template-columns:1fr;
  }

  .service-grid{
    grid-template-columns:1fr;
  }

  .service-img{
    height:230px;
  }

  .process-grid{
    grid-template-columns:1fr 1fr;
  }

  .process-step{
    min-height:200px;
  }

  .location-layout{
    grid-template-columns:1fr;
  }

  .location-list{
    grid-template-columns:1fr 1fr;
  }

  .stats{
    grid-template-columns:1fr 1fr;
  }

  .stat{
    border-bottom:1px solid #e8edf2;
  }

  .quote-form{
    grid-template-columns:1fr;
  }

  .field.full{
    grid-column:auto;
  }

  .cta-inner{
    display:block;
  }

  .cta-actions{
    margin-top:20px;
    flex-wrap:wrap;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .footer-bottom .container{
    display:block;
  }

  .footer-bottom span{
    display:block;
    margin:4px 0;
  }

  .floating-actions{
    bottom:10px;
  }

  .floating-actions a{
    padding:8px 12px;
  }

  .floating-actions b{
    font-size:10px;
  }
}


/* =========================================================
   24. SMALL MOBILE
   ========================================================= */
@media(max-width:430px){

  .hero{
    height:600px;
  }

  .hero h1{
    font-size:36px;
  }

  .hero-actions{
    flex-wrap:wrap;
  }

  .hero-actions .btn{
    flex:1;
    min-width:130px;
  }

  .hero-slide img{
    object-position:center;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  .location-list{
    grid-template-columns:1fr 1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .floating-actions{
    width:max-content;
    max-width:calc(100% - 20px);
  }
}

/* =========================================================
   25. INDIA METRO CITIES SCROLLING BAR
   ========================================================= */

.metro-bar{
  width:100%;
  height:46px;
  background:linear-gradient(90deg,#e24b2f,#f06445,#e24b2f);
  color:#fff;
  overflow:hidden;
  position:relative;
  border-bottom:1px solid #d43f25;
  display:flex;
  align-items:center;
}

.metro-track{
  width:max-content;
  height:100%;
  display:flex;
  align-items:center;
  gap:48px;
  animation:metroScroll 32s linear infinite;
  white-space:nowrap;
}

.metro-track span{
  display:inline-flex;
  align-items:center;
  font-size:14px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  position:relative;
}

.metro-track span:not(:last-child)::after{
  content:"•";
  position:absolute;
  right:-28px;
  color:#ffd8cf;
  font-size:16px;
}

.metro-track span:first-child{
  color:#fff;
}

.metro-bar:hover .metro-track{
  animation-play-state:paused;
}

@keyframes metroScroll{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   26. METRO BAR MOBILE
   ========================================================= */

@media(max-width:760px){

  .metro-bar{
    height:42px;
  }

  .metro-track{
    gap:38px;
    animation-duration:27s;
  }

  .metro-track span{
    font-size:12px;
  }

  .metro-track span:not(:last-child)::after{
    right:-22px;
    font-size:14px;
  }

}