@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif ;
} 
:root {
  /* Primary brand color */
  --color-primary: #99c7d6; /* buttons, links, icons */
  /* Accent and complementary tones */
  --color-dark-accent: #2176bd; /* hover, headings */
  --color-complementary: #F8C86B; /* callouts, highlights */
  /* Neutral tones */
  --color-light-neutral: #f5f7fa; /* background */
  --color-dark-neutral: #283845; /* typography */
  --color-darK-navy:#082B4A;
}

/* Reset & Base Styles */
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    /* font-optical-sizing: auto; */
    font-style: normal; 

}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  background-color: var(--color-light-neutral);
  color: var(--color-dark-neutral);
}
a {
  color: inherit;
  text-decoration: none;
}

/* scroll to top */
.scroll-to-top {
  display: flex;
  align-items: center;
  width: auto;
  height: 35px;
  background: transparent;
  position: fixed;
  bottom: 60px;
  left: -7px;
  z-index: 99;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: rotate(-90deg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.scroll-to-top:hover {
  color: var(--reroof-base);
}

.scroll-to-top__text {
  display: inline;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-left: 10px;
}

.scroll-to-top__wrapper {
  display: inline-block;
  width: 30px;
  height: 4px;
  background-color: var(--reroof-base);
  position: relative;
  overflow: hidden;
}

.scroll-to-top__inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: var(--reroof-black);
  transition: width 0.2s ease;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  bottom: 70px;
}



.subject{
  display: none ;
} 
article{
  font-size: 14px !important;
}
main{
  height: 100%;
  width: 100%;
  
}

/*--------------------------------------------------------------
# Custom Cursor
--------------------------------------------------------------*/
#cursor {
  width: 25px;
  height: 25px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999991;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid var(--reroof-base, var(--color-complementary));
  transform: translate(-50%, -50%);
  transition: all 200ms ease-out;
  /* smooth edges */
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* inner dot = #cursor .dot */
#cursor .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--reroof-base, var(--color-complementary));
  opacity: 0.3;
  transition: width 0.3s, height 0.3s, opacity 0.3s, background-color 0.3s;
  pointer-events: none;
}

/* hover effect on clickable elements */
#cursor.is-hover {
  background-color: var(--reroof-base, var(--color-complementary));
  opacity: 0.4;
  scale: 2;
}

/* when hovering, enlarge the inner dot and make it brighter */
#cursor.is-hover .dot {
  width: 25px;
  height: 25px;
  opacity: 0.4;
}



/* =================hero ==================== */

#hero {
  height: 100vh;
 background: 
    linear-gradient(
       90deg,
      rgba(8, 44, 75, 1) 0%,
      rgba(8, 44, 75, 1) 17%,
      rgba(8, 44, 75, 0.835) 32%,
      rgba(8, 44, 75, 0.608) 60%,
      rgba(8, 44, 75, 0.449) 78%,
      rgba(8, 44, 75, 0) 89%

    ),
    url("../images/Humable-TX-Air-Ducts-Cleaning.webp"); 

  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: top;
  color: var(--color-porcelain-white);

}

.nav-link{
  color: var(--color-light-neutral);
  font-size: 1.2rem;
  font-weight: 500;
}

.nav-link:hover{
  color: var(--color-primary);
  scale: 1.1;
}


.navbar-brand{
  text-align: left !important;
}

nav .container {
  position: relative; /* important so ::after positions relative to nav */
}

nav  .container::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; /* puts the line just below nav */
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 1px; /* adjust thickness */
  background-color: var(--color-light-neutral);
}

/* From Uiverse.io by KlaujonRuamni */ 
.button {
  position: relative;
  display: inline-block;
  background: var(--color-dark-accent);
 /* Gradient background */
  color: var(--color-light-neutral);
 /* White text color */
 
 /* Stylish and legible font */
  font-weight: bold;
  font-size: 16px;
 /* Large font size */
  border: none;
 /* No border */
  border-radius: 10px;
 /* Rounded corners */
  padding: 10px 18px;
 /* Large padding */
  cursor: pointer;
 /* Cursor on hover */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 /* Subtle shadow */
  animation: button-shimmer 2s infinite;
  transition: all 0.3s ease-in-out;
 /* Smooth transition */
}

/* Hover animation */
.button:hover {
 
  animation: button-particles 1s ease-in-out infinite;
  transform: translateY(-2px);
}

/* Click animation */
.button:active {
  transform: scale(0.95);
  
}

/* Shimmer animation */
@keyframes button-shimmer {
  0% {
    background-position: left top;
  }

  100% {
    background-position: right bottom;
  }
}

/* Particle animation */
@keyframes button-particles {
  0% {
    background-position: left top;
  }

  100% {
    background-position: right bottom;
  }
}

.business-name{
  color: var(--color-light-neutral) !important;
  font-size: 1.5rem;
  font-weight: 700; 
}

h1{
  line-height: 1.5 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero-span {
  color: var(--color-complementary);
  font-weight: 700; 
  border-radius: 30px;
  text-align: center;
  padding: 0% 3% 0% 3%;
   margin-right: 3%;
  border: 5px solid #f5f7fadd;
  font-size: 3rem;
}

#hero-article {
  color: var(--color-light-neutral);
  width: 70%;
  font-size: 0.9rem !important;
}


#hero-left-side{
  padding-top:7vw
}
/* form style  */


#hero-right-side{
  padding-left: 10%;
  padding-top: 10%
}
.form{
  max-width: 550px ;
  border-radius: 10px;
  padding: 20px;
  background-color: #99c7d6aa;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.0.2);
  padding: 7%;
}
.form-head-title{
  color: var(--color-light-neutral);
  font-size: 1.8rem ;
  font-weight: 800;
}

.input {
  width: 100%;
  /* max-width: 220px; */
  height: 60px;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--color-light-neutral);
  outline: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0px 0px 20px -18px;
}

.input:hover {
  border: 2px solid var(--color-dark-neutral);
  box-shadow: 0px 0px 20px -17px;
}

.input:active {
  transform: scale(0.95);
}

.input:focus {
  border: 2px solid var(--color-dark-neutral);
}



.input::placeholder {
  color: #000000; /* light gray */
  opacity: 1 !important; /* ensure it’s visible */
  font-style: italic;
}
/* end of form style  */


/*==================== services =================== */
#services{
  margin-top: 7% !important;
}
.service-card{
  
  text-align: left;
  position: relative;
  border: 1px solid #2E3A4644;
  padding: 5%;
  padding-top: 15%;
  border-radius: 30px;

}
.service-card span{
  
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-dark-neutrall);
}
.service-card p{
  margin-top: 3%;
  font-size: 0.8rem;
  font-weight: 500;
  
}
.service-card a{
  font-weight: 500;
   color: var(--color-dark-neutrall);
}

.service-card-icon{
  position: absolute;
  top: -20%;
  background-color: #2176bd;
  border-radius: 20px;
  width: 90px;
  height: 90px;
  padding: 10px;
  text-align: center;
  
  
}


.service-card-icon i{
  color: white;
  font-size: 3rem !important;
  font-weight: 900;
}


  /* Flip the icon on hover */
  .service-card-icon:hover {
   transform: rotateY(180deg);
   transition-delay: 0.1s;
  }

  
/* ==================== end of services =================== */

/* sub context */



.sub-context{
  background-color: var(--color-darK-navy) ;
  color: var(--color-light-neutral);
  margin-top: 10%;
  margin-bottom: 5%;

 
}
.sub-context img{ 
  border-radius: 30px;
  width: 700px !important;
  height: 700px !important;
  padding: 10px;
  text-align: center;
}
.sub-context-content{
  margin-inline: 5%;
}
/* end of sub context */



/* =====================about us ================= */

  .about-images {
  position: relative;
  min-height: 520px; /* ensures space for both images */
}

/* Image positions */
.about-images figure {
  position: absolute;
  margin: 0;
 
}
.about-images figure img{
  border-radius: 30px !important;
}
.about-images figure img:hover{
   opacity: 0.9;
    transform: scaleY(1.05);
}
.about-images figure:nth-child(2) {
  top: 0;
  left: 0;
  width: 70%;
  z-index: 1;
}

.about-images figure:nth-child(3) {
  top: 20%;
  left: 50%;
  width: 50%;
  z-index: 2;
   
}

/* ✅ Experience badge bottom center */
.experience-badge {
  position: absolute;
  bottom: -100px;             /* slightly below the image cluster */
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 120px;
  background-color: var(--color-dark-accent);
  padding: 5%;
  z-index: 3;
   border-radius: 30px !important;
}



.about-us-context  span{
  color: var(--color-dark-accent) ;
}
#about-us-text i{
  color: var(--color-dark-accent);
}
/* ===================== end of about us ================== */








   .testimonials-section {
            position: relative;
            padding-top: 4rem;
            padding-bottom: 4rem;
            background-image: url(../images/testimonials-background.webp);
            background-position: top right;
            background-repeat: no-repeat;
            background-size: cover;
            margin-top: 15%;
        }

        /* aligns bottom edges like screenshot */
        .testimonials-row {
            align-items: flex-end;
        }

        /* LEFT IMAGE (Technician) */
        .person-figure {
            position: absolute;
            bottom: 0;
            left: 15%;
            z-index: 5;
        }

        .person-img {
            max-width: 450px;
            height: auto;
            
            
        }

        /* SWIPER HOOKS */
        .testimonials-swiper {
            position: relative;
            z-index: 10;
            left: 30%;
            margin-top: -150px;
        }

        /* CARD ON THE RIGHT */
        .testimonial-card {
            position: relative;
            background-color: #FFFFFFAA;
            max-height: 500px;
            border-radius: 0.75rem;
            padding: 2rem;
            border: 1px solid rgba(0,0,0,0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            max-width: 600px;
            overflow: visible; /* allows the avatar to overlap the edge */
            margin-top: 2.5rem; /* Space for the avatar overlay */
        }

        /* AVATAR CIRCLE overlapping the card edge - FIXED POSITIONING */
        .testimonial-avatar {
            position: absolute;
            left: 2rem;
            top: -2.5rem; /* This positions it above the card */
            width: 75px;
            height: 75px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 15px 30px rgba(0,0,0,0.12);
            border: 2px solid var(--color-dark-accent);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20; /* Higher z-index to ensure it's on top */
        }

        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* CARD INNER TEXT SPACING so it doesn't hide behind avatar */
        .testimonial-body {
            padding-top: 1.5rem; /* Reduced padding since avatar is outside */
            color: #0f1f2f;
            line-height: 1.5;
            font-size: 0.95rem;
        }

        /* NAV ARROWS UNDER THE CARD */
        .testimonial-nav .nav-btn {
            background-color: transparent;
            border: 1px solid var(--color-darK-navy);
            color: #082B4A;
            border-radius: 0.5rem;
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all .15s linear;
        }

        .testimonial-nav .nav-btn:hover {
           
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        }

        .swiper-slide {
            width: auto; /* each slide is the card */
        }

       .swiper-button-prev-custom,
        .swiper-button-next-custom {
            all: unset;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .swiper-button-prev-custom i,
        .swiper-button-next-custom i {
            font-size: 1.2rem;
            line-height: 1;
            color: var(--color-dark-navy);
            transition: color 0.3s ease;
         
        }

        .nav-btn:hover .swiper-button-prev-custom i,
        .nav-btn:hover .swiper-button-next-custom i {
            color: var(--color-dark-accent);
        }

       


/* ======================== end of testimonial ================ */




/* ====================FAQ ==================== */
#faqs{
  margin-top: 10%;
  margin-bottom: 10%;
} 

.accordion-item{
  border-radius: 15px !important; 
  margin-top: 3%;
  margin-bottom: 3%;

}

.accordion-button {
  font-size: 1rem;
  border-radius: 15px 15px 0 0 !important;
  font-weight: 700;
}

.accordion-button::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--color-darK-navy);
  transform: none;
  background-image: none !important;

}



/* When expanded (active), show minus sign */
.accordion-button:not(.collapsed)::after {
  content: "−";
  color: var(--color-darK-navy) ;
}

/* Change header background and text color when active */
.accordion-button:not(.collapsed) {
  /* background-color: #d32f2f;  */
  color: var(--color-darK-navy);
  box-shadow: none;
  background-color: var(--color-complementary);
}

/* Remove default focus ring */
.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}


#features{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0rem;
}

.feature-item >div{
  background-color: var(--color-darK-navy);
  color: var(--color-light-neutral) !important;
  display: flex;
  flex-direction: row ;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  padding: 15%;
  margin: 10%;
  border-radius: 20px;
}

.feature-icon i{
font-size: 3rem;
}
/* ==================== end of faq ================ */




/* footer */





 .bi{
  color: var(--color-darK-navy);
  
}
.bi-star-fill{
  color: gold;

}

.item-footer{
  display:inline-block;
  border-radius:0.5rem;
  margin:2px 2px;
  padding: 5px;
  margin-top: 5px;
}

.item-footer .button{
   font-size: 0.8rem;
   margin: 0 !important;
}  

#iframe{
    position: relative;
    display: block;
    padding: 0px 0px 0px;
    z-index: 0;
}

#iframe .map-frame {
  width: 100%;
  height: 350px;
  border: 0;
  display: block;
  filter: grayscale(70%);
}




/* ========================end of footer ============== */


@media screen and (max-width: 650px) {

  #hero {
  height: 100vh;
   background: 
    linear-gradient(
       90deg,
      rgba(8, 44, 75, 1) 0%,
      rgba(8, 44, 75, 1) 17%,
      rgba(8, 44, 75, 0.835) 32%,
      rgba(8, 44, 75, 0.608) 60%,
      rgba(8, 44, 75, 0.449) 78%,
      rgba(8, 44, 75, 0) 89%

    ),
    url("../images/Humable-TX-Air-Ducts-Cleaning.webp");
    background-position: top left  ;
}
#hero-left-side{
  padding-top: 40% !important;
  padding-inline: 5%;
  padding-bottom: 40%;
}
#hero-left-side h1{
  font-size: 2rem !important;
  line-height: 1.5 !important;
}
#hero-article {
  color: var(--color-light-neutral);
  width: 100%;
  font-size: 0.9rem !important;
}



#hero-left-side{
  padding-top:2vw;
}

.business-name {
  display: none;
}
nav{
  padding-inline: 5% !important;
}

.navbar-brand img{
  width: 50px;
  height: 50px;
}

.form{
  max-width: 550px ;
  border-radius: 0px;
  margin-top: 5%;
  background-color: var(--color-dark-accent);
  padding: 7%;
}

.input {

  height: 40px;

}


.form-head-title{
 
  font-size: 1.2rem ;
  font-weight: 800;
}
#hero-right-side{
  padding-left: 0%;
}

  .navbar-collapse.collapsing,
  .navbar-collapse.collapse.show {
    position: fixed;
    inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
    width: 100vw;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #2E3A46;
    overflow: hidden;  
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    padding: 0;

    /* smooth appearance */
    opacity: 1;
    transition: opacity .2s ease;
  }

  /* start of animation (prevents flicker) */
  .navbar-collapse.collapsing {
    opacity: 0;
  }
  /* end state */
  .navbar-collapse.collapse.show {
    opacity: 1;
  }

  /* Keep toggler clickable above overlay */
  .navbar-toggler {
    position: relative;
    z-index: 10000;
  }

  /* Readable links on the overlay */
  .navbar-collapse .nav-link {
    color: #fff !important;
    font-size: 1.25rem;
    text-align: center;
    padding: .75rem 0;
  }

/* services  */


#services{
  margin-top: 120% !important;
}





.service-card{
  
 padding-bottom: 10%;

}


#features{
  display: grid;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 0rem;
}

}

@media screen and (max-width: 767px) {


#hero-right-side{
  padding: 0%;
}




}

       /* RESPONSIVE BEHAVIOR */
        @media (max-width: 991.98px) {

          .about-us-context {
               margin-top: 30% !important;
          }
            .testimonials-row {
                align-items: flex-start;
                text-align: center;
            }

            .person-figure {
               
                display: none;
            }

            .testimonials-swiper {
                left: 0;
                margin-top: 0;
            }

            .testimonial-card {
                text-align: left;
            }

            .testimonial-avatar {
                left: 50%;
                transform: translateX(-50%);
            }

            .testimonial-body {
                padding-top: 0.5rem;
                text-align: left;
            }

            .testimonial-nav {
                justify-content: center;
            }
        }