@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --deep-mahogany: #3D262A;   /* Dark rich primary */
  --emerald-teal: #127C56;    /* Fresh action / accent */
  --harvest-gold: #EAB64D;    /* Warm highlight / CTA */
  --misty-sky: #ECF3F6;       /* Soft light background */
}


::selection {
  background: var(--harvest-gold);
  color: var(--deep-mahogany);
}

*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
   font-family: "Work Sans", sans-serif;
   
}


html,
body {
  height: 100%;
  width: 100%;
 scrollbar-color: var(--dark-blue) var(--light-grey);
  scrollbar-width: thin;
  background-color: var(--misty-sky);

}



body {
  overflow-x: hidden;
} 



a {
  text-decoration: none !important;
  pointer-events: auto; /* Ensure links remain clickable */


}





nav{
 

background: rgba(236, 243, 246, 0.85);
border-radius: 50px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
border: 1px solid rgba(236, 243, 246, 1);
  
  position: fixed;
  margin-inline: 3%;
  padding: 0 !important;
  z-index: 999;



}


.budiness-name{
  margin: 5%;
  text-transform: capitalize;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--deep-mahogany);
  
}


.navbar-brand {
  position: relative;
  padding-right: 20px;
  margin-right: 20px;
}

.navbar-brand::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50px; /* line height */
  background: var(--harvest-gold); /* line color */
}




.cta {
  border: none;
  background: none;
  cursor: pointer;
}

.cta span {
  letter-spacing: 2px;
  font-size: 14px;
  padding-right: 10px;
  text-transform: uppercase;
  
}





.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 10px;
  font-weight: 900;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--harvest-gold);
  transform-origin: bottom left;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom right;
}



.navbar-toggler{
  background-color: var(--harvest-gold) !important;
  color: var(--deep-mahogany) !important;
}



.btn {
  
  font-size: 1.2rem;
  background: var(--deep-mahogany);
  border: none;
  border-radius: 50px;
  color: var(--misty-sky);
  outline: none;
  cursor: pointer;
  padding: 1% 2%;
  margin: 1%;
  transition: all 0.4s;
}

.btn:hover {
  
  background:var(--misty-sky);
  color: var(--deep-mahogany);
}



/* Button */
.explore-btn {
  padding: 15px;
  border-radius: 50px;
  

  color: var(--misty-sky);
  background-color: var(--deep-mahogany);
 
  font-size: 18px;
  transition: all 0.4s ease;
}

/* Hover effect */
/* ===============================
   BUTTON STYLE
=================================*/
.explore-btn {
  padding: 10px 15px;
  border-radius: 50px;
  color: var(--misty-sky);
  background-color: var(--deep-mahogany);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.4s ease;
}

/* Button hover */
.explore-btn:hover {
  background: var(--misty-sky);
  color: var(--deep-mahogany);
}


/* ===============================
   ARROW ICON STYLE
=================================*/
.explore-icon {
  padding: 10px;
  border-radius: 50px;
  background-color: var(--emerald-teal);

  /* important for transform animation */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* initial state */

  transition: transform 0.35s ease, background 0.3s ease;

  cursor: pointer;
}


/* ===============================
   ARROW HOVER ANIMATION (SELF)
=================================*/
.explore-icon:hover {
  transform: rotate(45deg) translate(6px, -6px);
}


/* ===============================
   OPTIONAL — CLICK EFFECT
=================================*/
.explore-icon:active {
  transform: rotate(45deg) translate(3px, -3px) scale(0.95);
}


/* Icon */




.nav-link {
  font-weight: 700;
  color: var(--deep-mahogany) !important;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.nav-link:hover,
.nav-link.active {
  border-bottom: 2px solid var(--harvest-gold);
   transform-origin: bottom left;
  transition: transform 0.25s ease-out;
 
}

.dropdown-item{
  color: var(--deep-mahogany);
   font-weight: 600;
}
.dropdown-item:hover,
.dropdown-item.active {
 border-bottom: 2px solid var(--harvest-gold) !important;
   transform-origin: bottom left;
  transition: transform 0.25s ease-out;
  background-color: transparent;
  color: var(--deep-mahogany);
   font-weight: 600;
 
}


.dropdown-menu{
  margin-top: 25% !important;
  padding: 5% 10%;
  border-radius: 20px;
  width: 200px !important;
  
}
/* remove arrow */
.dropdown-toggle::after {
  display: none !important;
  
}

/* show dropdown on hover */

/* keep open when active */
.dropdown.active .dropdown-menu {
  display: block;
}



/* marquee */

.image-marquee{
  width: 100%;
  overflow: hidden;
  padding: 5px 1px;
  background: #ECF3F6; /* optional */
  margin-bottom: 5% !important;
  margin-top: -7%;
}

.image-track{
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: scroll 18s linear infinite;
}

/* images */
.image-track img{
  height: 70px;        /* control size */
  width: auto;
  object-fit: contain;
  transition: .3s ease;
}

/* hover effect */
.image-track img:hover{
  transform: scale(1.1);
}

/* animation */
@keyframes scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pause on hover */
.image-marquee:hover .image-track{
  animation-play-state: paused;
}

/* mobile optimization */
@media (max-width:768px){
  .image-track img{
    height: 50px;
  }
}



/* end of marquee  */


/* main */

#main{
  background-image: url(../images/garage-door-repair-hero-image.webp);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  height: 107vh;

} 






/* hero */

.hero-section{
  position: relative;
 
}




.hero-heading{
  font-size: 5rem;
  font-weight: 700;
  color: var(--deep-mahogany);
  text-transform: capitalize;
}
.hero-paragraph{
  font-size: 0.9rem;
  margin-right: 7%;
}


.get-a-quote{
  background: rgba(236, 243, 246, 0);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  border: 1px solid var(--harvest-gold);
  color: var(--emerald-teal);
  font-weight: 700;

  border-radius: 50%;
  width: 150px;
  height: 150px;

  position: absolute;
  top: 80% !important;
  left: 85%;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* ✅ AUTO PLAY animation */
  animation: float 2s ease-in-out infinite;

  /* smooth scaling */
  transition: transform 0.3s ease;
}

.get-a-quote span{
  font-size: 1.4rem;
  margin: 15%;
}

/* optional: stronger effect on hover */
.get-a-quote:hover{
  transform: scale(1.1);
}

@keyframes float{
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}
/* end of main */





/* about us  */


#about-us{
  border-radius: 50px 50px 0 0 ;
  background-color: var(--misty-sky)  ;
  margin-top: -3%;
  padding: 10% 10%;
}

.span-marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 200px;
 
  border: 1px solid var(--harvest-gold);
  border-radius: 50px;

 
}


.about-us-title h2{
   font-size: 4rem;
   margin-top: 5%;
}
/* make content wider than container */
.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
 
  width: max-content;                 /* ⭐ important */
  animation: marquee 12s linear infinite;
 -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    rgb(255, 255, 255) 10%,
    rgb(255, 255, 255) 90%,
    transparent 90%,
    transparent 100%
  );

  mask: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    rgb(255, 254, 254) 10%,
    rgb(255, 255, 255) 90%,
    transparent 90%,
    transparent 100%
  );


}

.marquee-content span{
  text-transform: uppercase;
  font-weight: 500;
   padding: 0; margin: 0;
  flex-shrink: 0;                     /* ⭐ prevent shrink */
}

/* seamless animation */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

 .mix-colored {
        background: linear-gradient(0deg, var(--emerald-teal) 0%, var(--emerald-teal) 50%, var(--misty-sky) 50%, var(--misty-sky) 100%);
        padding-bottom: 3%;
    }

.about-us-image {
  /* image */
  background-image: url(../images/garage-door-repair-hero-image-1.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* layout */
  position: relative;
  min-height: 700px;
  padding-bottom: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  /* base radius */
  border-radius: 30px;

  /* ===== MASK SETTINGS ===== */
  --r: 15px; /* outer radius */
  --s: 40px; /* inner curve size */
  --x: 300px; /* horizontal offset */
  --y: 10px; /* vertical offset */

  --_m: /calc(2*var(--r)) calc(2*var(--r))
        radial-gradient(#000 70%, #0000 72%);

  --_g: conic-gradient(at var(--r) var(--r), #000 75%, #0000 0);

  --_d: calc(var(--s) + var(--r));

  -webkit-mask:
    calc(var(--_d) + var(--x)) 0 var(--_m),
    0 calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px))
      calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(var(--_d) + var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));

  mask:
    calc(var(--_d) + var(--x)) 0 var(--_m),
    0 calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 0 0, #0000 99%, #000 calc(100% + 1px))
      calc(var(--r) + var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(var(--_d) + var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

    .about-us-cards {
      position: absolute;
      bottom: 0;
       display: grid;
        grid-template-columns: repeat(2, 300px);
        grid-template-rows: auto auto;
        gap: 15px;
        margin: 20px;
        z-index: 2;  
    }

    .about-us-card {
        background-color: var(--misty-sky);
        border-radius: 30px;
        position: relative;
        height: 300px;
        width: 300px;
        transition: transform 0.3s; /* Added transition for hover effect */
    }


/* TOP CARD (centered above two) */
.card-top {

 grid-column: 2;   /* place in 2nd column */
  justify-self: end; /* align to right inside column */
}

/* Bottom cards auto place */
.card-bottom-left {
  grid-column: 1;
}

.card-bottom-right {
  grid-column: 2;
}



    .about-us-card:hover {
        transform: scale(1.05); /* Scale on hover */
    }

    .about-us-card-icon {
        position: absolute;
        top: 10px; /* Adjusted for better alignment */
        left: 65%;
    }

    .about-us-card-icon i {
        font-size: 4rem;
        color: var(--deep-mahogany);
    }

    .about-us-card-title {
        position: absolute;
        bottom: 10px; /* Adjusted for better alignment */
        left: 5%;
    }

    .about-us-card-title span {
        font-size: 3rem;
        color: var(--deep-mahogany);
        font-weight: 700;
    }

    .about-us-card-title p {
        font-size: 1rem;
        color: #3D262Aaa;
        font-weight: 600;
    }

    .about-us-card-title span sup {
        font-size: 2rem;
        margin-left: -8%;
        color: var(--harvest-gold);
        font-weight: 700;
    }







/* why chhose us  */

#why-choose-us{
  /* background-color: var(--emerald-teal); */
  color: var(--deep-mahogany);
   padding-top: 7%;
  background-color: var(--misty-sky);

}

.why-choose-us_txt h2{
 margin-top: 7%;
 

  
}
.why-choose-us_txt p{
  margin-top: 3%;
  font-size: 0.9rem;
}


.why-choose-us-img{
    --r: 20px; /* the radius */
  --s: 10px; /* size of inner curve */
  --x: 100px; /* horizontal offset (no percentage) */
  --y: 1px; /* vertical offset (no percentage) */
  
  width:100%;

  aspect-ratio: 16/9;
 
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));
  mask:
    calc(var(--_d) + var(--x)) 100% var(--_m),
    0 calc(100% - var(--_d) - var(--y)) var(--_m),
    radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) 
     calc(var(--r) + var(--x)) calc(-1*var(--r) - var(--y)),
    var(--_g) calc(var(--_d) + var(--x)) 0,
    var(--_g) 0 calc(-1*var(--_d) - var(--y));
  mask-repeat: no-repeat;
}





/* Card */
.why-card{
  border-radius: 20px;
 

background: rgba(61, 38, 42, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01);
backdrop-filter: blur(0.6px);
-webkit-backdrop-filter: blur(0.6px);
border: 1px solid rgba(61, 38, 42, 0.3);



  transition: 0.3s ease;
  text-align: left;
  color: var(--deep-mahogany);
}

.why-card:hover{
  transform: translateY(-8px);
}

/* Icon */
.why-icon{
  font-size: 50px;
  margin-bottom: 5px;
  
}

/* Divider */
.why-divider{
  width: 100%;
  height: 3px;
  
  margin: 15px auto;
  opacity: 0.5;
}

/* Title */
.why-title{
  font-weight: 600;
  margin-bottom: 10px;
}
.small{
  font-size: 0.8rem;
}
/* end of why choose us */



/* contact us form  */

.contact-card{
  border-radius: 30px;
  border: 1px solid var(--harvest-gold);
  
}
.info-head-title{
  font-size: 1.2rem ;
  font-weight: bold;
}


.contact-card p{
text-align: center !important;
}
/* end of contact us */

/* offfer section */


#offers{
  margin-top: 10%;
  margin-bottom: 10%;
}


.offer-head-txt{
   display: flex;
   justify-content: center;
   align-items: center;
  flex-direction: column;
}

.offer-head-txt h2{
  color: var(--deep-mahogany);
  font-size: 4rem;
  margin-top: 7%;
  font-weight: 700;
}
/* ================================
   OFFER CARD (FULL CSS)
   - Icon pinned top-right
   - Badge top-left (no overlap)
   - Image bottom-left behind content
   - Works with your mask shape
================================== */

/* Card */
.offer-card{
  position: relative;
}



.offer-card-inner{
  position: relative;
  background: #fff;
  padding: 22px 22px 70px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
  transition: all .25s ease;
  min-height: 300px;

  --r: 20px;
  --s: 30px;
  --x: 20px;
  --y: 10px;

  aspect-ratio: 1;
  border-radius: var(--r);

  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g:conic-gradient(at calc(100% - var(--r)) var(--r),#0000 25%,#000 0);
  --_d:(var(--s) + var(--r));

  mask:
    calc(100% - var(--_d) - var(--x)) 0 var(--_m),
    100% calc(var(--_d) + var(--y)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 calc(100% + 1px))
    calc(-1*var(--r) - var(--x)) calc(var(--r) + var(--y)),
    var(--_g) calc(-1*var(--_d) - var(--x)) 0,
    var(--_g) 0 calc(var(--_d) + var(--y));
  mask-repeat: no-repeat;
}

/* Hover */
.offer-card-inner:hover{
  background: var(--emerald-teal);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  border-color: rgba(31,143,58,.35);
}

/* Bottom-left image (behind everything) */
.offer-card .offer-img{
  position: absolute;
  left: -15%;
  bottom: -15%;
  width: 300px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  transition: transform .25s ease, filter .25s ease;
}

.offer-card:hover .offer-img{
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.05);
}

/* Text content above image */
.offer-card .offer-title,
.offer-card .offer-text{
  position: relative;
  z-index: 5;
}

/* Title */
.offer-card .offer-title{
  font-weight: 800;
  font-size: 3rem;
  margin: 40px 0 6px; /* leaves room for badge/icon */
  color: var(--deep-mahogany);
  transition: color .25s ease;
}

/* Text */
.offer-card .offer-text{
  margin: 0;
  max-width: 90%;
  font-size: 1.5rem;
  color: var(--deep-mahogany);
  transition: color .25s ease;
}

.offer-card:hover .offer-title,
.offer-card:hover .offer-text{
  color: #fff;
}

/* Badge (top-left so it won't overlap icon) */
.offer-card .offer-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  font-size: .8rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: #0b1f33;
  z-index: 6;
  transition: all .25s ease;
}

.offer-card:hover .offer-badge{
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Icon holder (top-right) ✅ */
.offer-card .offer-icon-holder{
  position: absolute;
  top: 3px;
  right: 5px;

  width: 44px;
  height: 44px;

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

  border-radius: 999px;
  text-decoration: none;

  color: var(--deep-mahogany);
  background: white;

  z-index: 10;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.offer-card:hover .offer-icon-holder{
    background-color: var(--emerald-teal);
}

/* Icon hover */
.offer-card .offer-icon-holder:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* If you want only the <i> rotated */
.offer-card .offer-icon-holder i{
  display: inline-block;
  transition: transform .25s ease;
  /* optional: rotate icon */
  /* transform: rotate(45deg); */
}

/* Optional: rotate more on hover */
.offer-card .offer-icon-holder:hover i{
  transform: rotate(15deg);
}


/* end of offer section */


/* sub context */



.sub-context{
  margin-top: 5%;
  margin-bottom: 5%;
 
  border-radius: 30px;
  border: 1px solid var(--harvest-gold);
}


.sub-context img{
    border-radius: 20px;
}
.sub-context .row:hover{
  background-color: var(--harvest-gold);
   border-radius: 30px;

}



.sub-context-txt {
   margin: 4%;
}



.sub-context-txt h2{
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--deep-mahogany);
  position: relative;
  display: inline-block; /* or block if full width */
  padding-bottom: 12px;
}

.sub-context-txt h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 100%;
  height: 2px; /* line thickness */
  background: rgba(60, 37, 41,0.3); /* change color */
  margin-top: 5%;
}

.sub-context-txt article{
  font-size: 0.9rem;
  margin-top: 5%;
}

/* end of sub context */



/* testimonials */

#testimonials{
  margin-top: 20%;
   position: relative;
  color: #fff;
}




.circle-wrapper {
  position: absolute;
  top: -15%;
  left: 44%;
  width: 220px;
  height: 220px;
  margin: 10px auto;
}

/* SVG spinning */
.circle-text {
  width: 100%;
  height: 100%;
  animation: rotateText 15s linear infinite;
}

/* Text style */
.circle-text text {
  font-size: 18px;
  letter-spacing: 2px;
  fill: #16243E; /* your midnight-steel brand color */
  font-weight: 700;
}

/* Center rounded image */
.center-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

@keyframes rotateText {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}





.section-inner-curve{
  --r: 20px;  /* rounded parts inside the notch */
  --s: 130px;  /* size of the cut */
  --a: 10deg; /* depth */
  --p: 50%;   /* position */

background: #ECF3F6;
background: linear-gradient(0deg,rgba(236, 243, 246, 1) 0%, rgba(255, 255, 255, 1) 100%);

  /* ✅ square outer corners */
  border-radius: 0;

  /* optional sizing */
  min-height: 700px;

  /* mask math */
  --_m: var(--r), #000 calc(100% - 1px), #0000;
  --_d: calc((var(--s) + var(--r)) * cos(var(--a)));

  -webkit-mask:
    radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)),
    radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)),
    radial-gradient(
      var(--s) at var(--p) calc(-1*sin(var(--a))*var(--s)),
      #0000 100%, #000 calc(100% + 1px)
    ) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat,
    linear-gradient(
      90deg,
      #000 calc(var(--p) - var(--_d)),
      #0000 0 calc(var(--p) + var(--_d)),
      #000 0
    );

  mask:
    radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)),
    radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)),
    radial-gradient(
      var(--s) at var(--p) calc(-1*sin(var(--a))*var(--s)),
      #0000 100%, #000 calc(100% + 1px)
    ) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat,
    linear-gradient(
      90deg,
      #000 calc(var(--p) - var(--_d)),
      #0000 0 calc(var(--p) + var(--_d)),
      #000 0
    );
}







    /* Swiper spacing */
    .testiSwiper{
      padding-top: 0%;
    }

    /* Slide card */
    .testi-card{
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      
      padding: 20% 0%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
    }

    .testi-quote{
      font-size: 24px;
      line-height: 1.7;
      margin: 0;
      color: #111827;
      
    }

    .testi-user{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
    }

    .testi-user img{
      width: 55px;
      height: 55px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--emerald-teal);
    }

    .testi-user .name{
      font-weight: 800;
      font-size: 20px;
      margin-top: 20px;
      color: var(--deep-mahogany);
      line-height: 1.2;
    }

    .testi-user .role{
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    /* Green pagination */
   .swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}
  

.pagination{
  padding-top: 0%;
}
.custom-nav {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--misty-sky);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep-mahogany); /* your brand color */
  transition: all .25s ease;
 
}

.custom-nav i {
  font-size: 22px;
}

/* hover effect */
.custom-nav:hover {
  transform: scale(1.1);
   background: var(--emerald-teal);
  color: #fff;
}



    /* Make slides same height */
    .swiper-slide{
      height: auto;
      padding-inline: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }




/* end of testimonials */


/* faqs  */



#faqs{
  padding-top: 10%;
  padding-bottom: 10%;
}


.faq-head{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 5%;
  gap: 20%;

}

.faq-head h2{
  font-size: 4rem;
  width: 80%;
  font-weight: 700;
}
.accordion-button{
  background-color: var(--misty-sky) !important;
}

  .faq-accordion .accordion-button {
    box-shadow: none !important;
  }
  .faq-accordion .accordion-button::after {
    display: none; /* hide default arrow */
  }

 .faq-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0.5%;
  border-bottom: 2px solid rgba(0,0,0,.08);
}

/* Left icon */
.faq-qicon{
 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
 
  z-index: 2;
}


/* smooth transition */
.faq-svg rect,
.faq-svg path{
  transition: .3s ease;
}

/* hover SVG */
.faq-svg:hover rect{
  fill: var(--deep-mahogany);   /* background circle */
}

.faq-svg:hover path{
  fill: var(--harvest-gold);    /* icon */
}




/* Center question */
.faq-question{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 70%;
  font-weight: 500;
  font-size: 1.5rem;
}

/* Right chevron */
.faq-chevron{
  transition: .3s;
  z-index: 2;
  font-size: 1.2rem;
}

/* Rotate chevron when open */
.accordion-button:not(.collapsed) .faq-chevron{
  transform: rotate(180deg);
}

/* Remove default bootstrap arrow */
.accordion-button::after{
  display: none;
}


/* Transparent answer (accordion-body) */
.accordion-item,
.accordion-collapse,
.accordion-body{
  background: transparent !important;
  
}

/* If Bootstrap is adding a background on the button when opened/closed */
.accordion-button,
.accordion-button:not(.collapsed){
  background: transparent !important;
  text-align: center !important;  
  box-shadow: none !important;
}

/* Optional: keep text readable on dark backgrounds */
.accordion-body{
  color: inherit;
}

/* Optional: remove the default accordion borders/lines */
.accordion-button::after{
  background-image: none !important; /* since you use your own chevron icon */
}

  /* Body panel style */
  .faq-accordion .accordion-body{
     background-color: transparent !important;
    border: 1px solid rgba(0,0,0,.08);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    text-align: center !important;
   
  }

  /* Match the top button corners with body when opened */
  .faq-accordion .accordion-button:not(.collapsed){
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .collapse{
      background-color: transparent !important;
  }

  .accordion-collapse{
      background-color: transparent !important;
  }



/* end of faqs */



/* form */



/* From Uiverse.io by Anas92876 */ 
.input {
  
  padding: 1rem 1rem;
  border-radius: 1rem;
  border: none;
  box-shadow: 2px 2px 30px 2px lightgrey;
}

.form-head span{
  font-size: 2rem ;
  font-weight: bold;
  padding-bottom: 10px;
}

.map-wrapper {
  width: 100%;
  height: 100%;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  filter: grayscale(1) opacity(0.99);
}


#form-container{

 
}


footer{
height: 500px;
border-radius:  5rem 5rem  0 0;
color: var(--deep-mahogany);
margin-top: 100px;
 background: #177096;
background: linear-gradient(0deg,rgba(236, 243, 246, 1) 40%, rgba(234, 182, 77, 1) 100%);
}






.footer-contact-info-list li{
  list-style: none;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2%;
}

.footer-business-name{
  font-size: 4rem;
  font-weight: 900;
  color: var(--deep-mahogany);
}

.email{

  color: var(--deep-mahogany);


 
}

.ssn-links{
  color: var(--deep-mahogany);
}

/* end of form */






/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {


  #about-us{
    margin-top: -10% !important;
  }
.budiness-name{
 display: none;
}
.logo{
  width: 70px;
  height: 50px;

}

.navbar-brand::after {
  display: none;
}

.dropdown-menu{
  margin-top: 0% !important;
}


.hero-heading{
  font-size: 3rem;
  font-weight: 700;
  color: var(--deep-mahogany);
}
.hero-paragraph{
  font-size: 0.7rem;
  margin-right: 7%;
}

.section-inner-curve{
  min-height: 600px !important;
  
}

.get-a-quote{

  top: 90% !important;
  left: 50% !important;
  
}



 .about-us-image{
    min-height: 620px;
    padding-bottom: 160px; /* extra room so cards don't cover everything */
  }

.about-us-cards{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(100px, auto));
    right: 2px;
    left: 2px;
    bottom: 2px;
    
  }

  .card-top,
  .card-bottom-left,
  .card-bottom-right{
    grid-column: auto;
  }

  .about-us-card{
    max-width: 100%;
    height: 100px;
    border-radius: 20px;
  }

   .about-us-card-title span {
        font-size: 2rem;
        
    }

    .about-us-card-title p {
        font-size: 0.8rem;
        
    }

    .about-us-card-title span sup {
        font-size: 1rem;
    }


      .about-us-card-icon i {
        font-size: 3rem;
       
    }



  /* top card becomes normal stacked item */
  .card-top{
    grid-column: auto;
    justify-self: start;
  }
.about-us-title h2{
   font-size: 2rem;
}

.offer-head-txt h2{
  
  font-size: 2rem;
  margin-top: 7%;
  font-weight: 700;
}


.pagination{
 display: none;
}

    .testi-quote{
      font-size: 18px;
     
    }

.circle-wrapper {
  position: absolute;
  
  top: -18% !important;
  left: 20% !important;
 
}


#testimonials{
  margin-top: 30% !important;
  
}


.testiSwiper{
      padding-top: 25% !important;
    }



 .about-us-title h2{
   font-size: 1.5rem;
   margin-top: 10%;
}



#about-us{
 
  margin-top: 3%;
  padding: 5% 5%;
}

#about-us p{
  font-size: 0.8rem;
  margin-top: 5%;
  margin-bottom: 5%;
}



.about-us-image {

  min-height: 500px;


margin-top: -15%;

  /* ===== MASK SETTINGS ===== */
  --r: 15px; /* outer radius */
  --s: 20px; /* inner curve size */
  --x: 200px; /* horizontal offset */
  --y: 10px; /* vertical offset */

}



 .about-us-card-title span {
        font-size: 1.5rem;
      
    }

    .about-us-card-title p {
        font-size: 1rem;
       
    }

    .about-us-card-title span sup {
        font-size: 1rem;
        margin-left: -2%;
       
    }

       .about-us-card-icon i {
        font-size:2rem;
       
    }
    

    .sub-context-txt h2{
  font-size: 1.3rem;
  
}


.sub-context-txt article{
  font-size: 0.7rem;
  margin-top: 5%;
}

.why-choose-us_txt p{
  font-size: 0.9rem !important;
}




.why-choose-us-img{
    --r: 20px; /* the radius */
  --s: 20px; /* size of inner curve */
  --x: 20px; /* horizontal offset (no percentage) */
  --y: 10px; 

}




/* Center question */
.faq-question{
  font-size: 1rem;
  padding-bottom: 20px;
}

/* Right chevron */
.faq-chevron{
  transition: .3s;
  z-index: 2;
  font-size: 1rem;
}
.faq-svg{
  width: 1.5rem;
  height: 1.5rem;
}



.faq-head{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 15%;
  gap: 10%;

}

.faq-head h2{
  margin-top: 10%;
  font-size: 1.5rem;
  width: 100%;
  font-weight: 700;
}


.image-marquee{
 
  margin-bottom: 5% !important;
  margin-top: 3%;
}

.footer-contact-info-list li{

  font-size: 1rem;
  text-align: center;
  padding-left: 10%;
 
}


.footer-logo{
  width: 100px;
  height: 100px;
 
}


.footer-business-name{
  font-size:2rem;
 
}

.hero-section .row{
 background-color:  #ECF3F677;
 border-radius: 20px;
}

}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {



}


@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}



 @media (max-width: 991.98px){

      
  .about-us-card{ border-radius: 24px; }
        
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  /* Give the hero room for the navbar height */
  .hero-section {
    padding-top: 0px; /* adjust if your navbar is taller */
  }

  /* Optional: make the opened menu look like a dropdown panel */
  .navbar-collapse {
    border-radius: 16px;
    padding: 12px;
    margin: 10px 12px 0;
    
  }

}


/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
  


.get-a-quote{
  left: 75%;
}


.circle-wrapper {
  position: absolute;
  top: -15%;
  left: 36%;
  
}

    .testiSwiper{
      padding-top: 10%;
    }


}

/* XXL devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
  
}