@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Quicksand:wght@300..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



/* CSS Custom Properties */
:root {
  --color-navy-blue: #10316B;
  --color-forest-green: #0B8457;
  --color-golden-yellow: #EAC100;
  --color-soft-gray: #DEE1EC;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
 
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.hero {
  height: 100vh;
  background-image: 
    linear-gradient(to right, #000000aa 0%, #000000aa 50.6%, transparent 50.6%, transparent 100%),
    url(../images/garage-door-repair-sterling-heights-mi-technician.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}


/* nav bar */

.navbar >div {
  padding-top: 0%;
  margin-top: 0%;
  background-color: var(--color-soft-gray);
  padding-inline: 3%;
  border-radius: 10px;

 
}

.navbar .container-fluid{
   padding: 0 !important;
   margin-inline: 3% !important;
  /* margin-top:1%; */
 
}

.navbar-brand{
  margin-left: 4%;
}

.nav-item a{
   color: black;
   font-size: 1rem;
   font-weight: 500;
 
}

.btn{
  background-color: var(--color-navy-blue);
  text-transform: uppercase;
  color: var(--color-soft-gray);
  font-size: 1.3rem;
  border-radius: 20px;
}

.btn:hover{
  scale: 1.1;
}


/* marquee */

.hero-right_side{
    padding: 0 !important;
} 

.carousel-field {
  position: absolute;
  top: 90%;
  bottom: 0;
  height: 10vh;
  width: 100%;
  background-color: var(--color-forest-green);
  padding: 0 !important;

}

.marquee-carousel{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top:0.5%;
  
}


/*hero-left_side  */

.hero-left_side{
  background-color: #000000dd;
}




/* hero left side  */
.hero-left_side{
  background-color: transparent;
 
 
}


.hero-left_side .row{
    margin-left: 10%;
    margin-top: 5%;
    padding-inline: 4%;
}

.keyword_head span {
  position: relative;
  display: inline-block;
  padding: 0 20px; /* space between text and lines */
  color: var(--color-soft-gray); /* optional: text color */
 font-style: 1.5rem !important;
 font-weight: 900;
 text-transform: capitalize;

}

.keyword_head span::before,
.keyword_head span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-forest-green);
}

.keyword_head span::before {
  left: 0;
  transform: translateX(-100%);
}

.keyword_head span::after {
  right: 0;
  transform: translateX(100%);
}


.hero-context_content{
  margin-top: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-soft-gray);
}

.hero-context_content a {
  margin-top: 5%;
}


/* statisces */
.statis-container{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 10%;
}
.statis  span{
   color: var(--color-soft-gray);
   font-size: 2rem;
   font-weight: 900;
}





.why-choose-us_card{
  background-color: var(--color-soft-gray);
  border-radius: 20px;
  height: 300px !important;
  display: flex;
   align-items: center; 
 flex-direction: column;
 text-align: center;
 padding-inline: 10%;
 margin-top: 5%;
  
}

.why-choose-us_card_icon  {

  width: 70px;
  height: 70px;
  text-align: center;
  background-color:var(--color-golden-yellow);
   border-radius: 50%;
   margin-top: 10%;
  

}

.why-choose-us_card_icon i{
  font-size: 2.5rem;
   margin-top: 15%;
   padding-bottom: 10%;
   align-items: center; 

}
.why-choose-us_card_text{
  margin-top: 5%;
}

.why-choose-us_card span{
 
 font-size: 1.5rem;

}

.why-choose-us_card article{
  margin-top: 5%;
 font-size: 1rem;
}


#why-choose-us{
  padding-top: 5%;
  padding-bottom: 5%;
}
/* why choose us  */




/* offers section  */



  #offers {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-navy-blue);
  }
  
  .offers-container {
    position: relative;
    width: 95%;
    height: 90vh;
    margin: 0 auto;
  }
  
  .offers-head_title_first_span {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 7rem;
    color: var(--color-soft-gray);
    font-weight: bold;
  }
  
  .offers-head_title_second_span {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 7rem;
    color: var(--color-soft-gray);
    font-weight: bold;
  }
  
  .offer-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    background: var(--color-soft-gray);
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
  }
  
  
  .offer-body span{
    color: var(--color-navy-blue);
    font-style: 6rem;

  }
  
  @media (max-width: 768px) {
    .offer-card {
      width: 80%;
    }
  }

/* end of offer section  */





/* out main services  */

#main-services{
  background-color: var(--color-soft-gray);
  padding-bottom: 5%;
 
}

.main-services-head_title{
  font-weight: 600;
  font-size: 2rem;

}



/* Container with hover effect */
.main-service{
    width:100%;
    height:100%;
    margin-bottom: 15%;
}


.hover-card-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5rem;
  /* padding: 0.1rem; */
  border-radius: 0.5rem;
  transition: all 0.5s ease;
}

.hover-card-container:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 10px 15px -3px rgba(243, 244, 246, 0.5); /* Light shadow effect */
}

/* Optional: styling image container */



.card-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Hover-animated description box */
.hover-card-hover {
  position: absolute;
  right: 3rem;      /* like Tailwind's right-20 */
  bottom: -3.5rem;  /* like Tailwind's -bottom-10 */
  width: 85%;
  height: 50%;
  background-color:#DEE1ECdd; 
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.7s ease;
 
}

.hover-card-container:hover .hover-card-hover {
  transform: translateY(-1rem) translateX(-1rem);
}

.main-serviced-description{
    padding: 3%;
    height: 40%;
     text-align: left;
    justify-content: center;
    align-items: center;
}
.main-serviced-description span {

 color: var(--color-navy-blue);
 font-weight: 700;
 font-size: 1.6rem;
 padding-top: 1%;
 padding-bottom: 2%;

}


/* end of our main services  */




#contact-us{
  padding-top: 7%;
  padding-bottom: 7%;
}




/* info section  */


iframe{
  border-bottom-left-radius: 20px; 
      border-top-left-radius: 20px;
}


.info{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  border-bottom: 5px solid #fff;
  padding-inline: 0 !important;
  margin-bottom: 3%;
  
 
}

.info_card{
  padding-top: 10%;
  
}
.info_card_icon{
font-size: 1rem;
   
}
.info_card_text span{
  font-size: 1.2rem;
  margin-bottom: 5%;

}
.info_card_text p{
  font-size: 1rem;
}



.spam{
  display: none;
}

#info-div{

  border-radius: 20px;
}
form{
  padding-inline: 2%;
}



.form-control{

  background-color: #fff;
}

/* cta */

#cta {
  background-color: var(--color-navy-blue);
/* Optional: Add space at bottom */
}


.cta-context{
  color: var(--color-soft-gray);
  padding-inline: 10%;
  margin-top: 2%;
}
/* Optional: Add some spacing between image and content on mobile */
@media (max-width: 991.98px) {
  #cta .col-lg-6 {
    margin-top: 0 !important;
    padding-top: 2rem;
  }
}


/* testimonials */




#testimonials_body{
  padding-inline:10%;
  margin-inline:10%;

}



 /* Custom pagination styles */
  .custom-pagination-container {
    position: relative;
    z-index: 10;
    margin-top: -70px; /* Adjust this to position properly */
    padding-bottom: 30px;
    margin-left:2%;
  }
  
  .custom-pagination {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
  
  .custom-pagination .swiper-pagination-bullet {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    margin: 0 !important;
    opacity: 1 !important;
    background: none !important;
  }
  
  .custom-pagination .swiper-pagination-bullet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .custom-pagination .swiper-pagination-bullet-active {
    border-color: var(--color-forest-green); /* Change to your active color */
    transform: scale(1.3);
  }

 .testimonials-card_text{
  margin-top: 10% ;
 }

.testimonials-card_text article{
  font-size: 1.2rem ;
}

.client_name{
  font-weight: 700;
   font-size: 1.5rem ;
  padding-top: 5%;
  padding-inline: 5%;


}
.quoted {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  font-style: italic;
}

.quoted::before,
.quoted::after {
  content: '';
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
}

.quoted::before {
  left: 0;
background-image: url(../images/quote-left-svgrepo-com.svg);
}

.quoted::after {
  right: 0;
  top: 100%;
  background-image: url(../images/quote-right-svgrepo-com.svg);
}





/* footer */

 .table-style-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    width: 800px; /* Fixed width */
    height: 400px; /* Fixed height */
    overflow-y: auto; /* Add scroll if content exceeds height */
    padding: 10px;
    border: 1px solid #ddd;
    /* background: white; */
  }
  
  .table-style-list .item {
    display: flex;
    align-items: center;
    padding: 8px;
    /* border-bottom: 1px solid #eee; */
  }
  
  .table-style-list .btn {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: left;
   
    text-decoration: none;
    border-radius: 10px;
    
  }
  


/* .item{
  display:inline-block;
  margin:0;
  padding:3px 3px;
  border-radius:0.5em;
  
}
.item a{
  text-decoration:none;
  font-size:1rem !important; 
  text-align: left;
 
}
.main-button{
  color:var(--color-navy-blue)

} */


.footer-cta{
  background-color: var(--color-navy-blue);
  color: var(--color-soft-gray);
  margin-top: -15%;
  border-radius: 30px;
  text-align: center;
  padding: 5%;
}


.footer-cta a{
  border: 3px solid var(--color-golden-yellow);
}


.services-loc span{
  font-size: 3rem ;
  font-weight: 600;
 
}


.list-unstyled{
  margin-top: 5%;
}

.link-dark i{
  color: var(--color-navy-blue);
}
.link-dark i:hover{
color: var(--color-forest-green);
scale: 1.2;

}






/* end of info section  */


/* faqs */


    #faqs{
      padding: 7%;
      background-color: #10316B;
    }

    .before-and-after-image {
      border-radius: 30px;
    }

    .accordion{
      margin-top: 5%;
    }


    .accordion-item{
      background-color: var(--color-soft-gray) !important;
     margin-top: 2.5%;
     margin-bottom: 2.5%;
     border-radius: 10px !important;
    }

    .accordion-button{
      color: #10316B;
    background-color:var(--color-soft-gray) important;
    font-size: 1.3rem;

    }

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 11.354a.5.5 0 0 0 .708 0L8 5.707l5.646 5.647a.5.5 0 0 0 .708-.708l-6-6a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 0 .708z'/%3E%3C/svg%3E");
}

.accordion-button::after {
  transition: all 0.5s;
}
.accordion-button:not(.collapsed) {
    background-color:var(--color-soft-gray);
   
  }




/* end of faqs  */





/* sub context */


#sub-content{
  margin-top: 10%;
  margin-bottom: 10%;
}

.sub-attached{
  position: absolute;
  top: -0%;
  left: -20%;
  padding-inline: 5%;
  background-color: var(--color-forest-green);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: var(--color-golden-yellow);
 
}




h2{
  color: var(--color-navy-blue);
}
.sub-attached span{
  font-weight: bold;

}
.sub-attached_two{
  position: absolute;
  top: 75%;
  left: 73%;
  padding: 15%;
  border-radius: 20px;
  background-color: var(--color-forest-green);
  
}

.context-image{
 border-radius: 0 20px 20px 20px;
}

/* end of sub context */


/* 404 page */
.page-error{
  display: flex;
  flex-direction: column;
  gap: 10%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}




.page-not-found{
  text-transform:uppercase;
  font-size: 11rem;
  font-weight: bolder;
  position: relative; /* Required for absolute positioning of pseudo-elements */
  display: inline-block;
  color: var(--color-navy-blue);
}


.error-404{
   position: absolute;
   top: 35%;
   left:9%;
   font-size: 1.5rem;
   border-radius: 10px;
   padding-inline: 10px;
   color: var(--color-soft-gray);
   background-color: var(--color-golden-yellow);

  }

.page-not-found::before{
   content: "";
  position: absolute;
  top: 0;
  left: -10%;
  width: 150px; /* Line length */
  height: 4px; /* Line thickness */
  background-color: green;
}


.page-not-found::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -10%;
   width: 150px; /* Line length */
  height: 4px; /* Line thickness */
  background-color: green;
}




 .error-sub-text{
    margin-top: 3%;
    margin-inline: auto;
  }



/* footer */




  .zip-codes-list {
    display: grid;
    grid-template-columns: repeat(minmax(100px, 1fr));
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
      align-items: center;
    justify-content: center;
  }
  
  .zip-codes-list .item {
    margin: 0;
   
  }
  
  .zip-codes-list .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.1rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
 .custom-article-font{
  font-size: 1rem;
 }


  /* background images */
  

.repairs-and-service-bg{
  height: 100vh;
  background-image: 
    linear-gradient(to right, #000000aa 0%, #000000aa 50.6%, transparent 50.6%, transparent 100%),
    url(../images/repairs-and-service/garage-door-repair-sterling-heights-mi-technician-fixing-spring.webp) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}

.broken-garage-door-springs-bg{
   height: 100vh;
  background-image: 
    linear-gradient(to right, #000000aa 0%, #000000aa 50.6%, transparent 50.6%, transparent 100%),
    url(../images/broken-garage-door-springs/broken-garage-door-springs-repair-sterling-heights-mi.webp) !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}

.hour-emergency-garage-door-repair-bg{
  height: 100vh;
   background-image: 
   linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/24hour-emergency-garage-door/24hour-emergency-garage-door-repair-sterling-heights-mi.webp) !important;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}

.commercial-garage-door-repair-bg{
   height: 100vh;
   background-image: 
   linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/commercial/commercial-garage-door-repair-sterling-heights-mi.webp) !important;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}



.residential-garage-door-repair-bg{
  height: 100vh;
   background-image:    linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/residential/residential-garage-door-repair-sterling-heights-mi.webp) !important;
   background-size: cover;
  background-repeat: no-repeat;
  background-position: top;

}


  /* end of background images  */

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

.hero {
   background-image: 
    linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/garage-door-repair-sterling-heights-mi-technician.webp) !important;
    background-position: center ;
}
.repairs-and-service-bg{
 
  background-image: 
   linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/repairs-and-service/garage-door-repair-sterling-heights-mi-technician-fixing-spring.webp) !important;
  background-position:right top !important;
}
.broken-garage-door-springs-bg{
  background-image: 
   linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/broken-garage-door-springs/broken-garage-door-springs-repair-sterling-heights-mi.webp) !important;
  background-position: left ;
}

.hour-emergency-garage-door-repair-bg{
    background-image: 
   linear-gradient(to right, #00000011 0%, #00000011 100%),
    url(../images/24hour-emergency-garage-door/24hour-emergency-garage-door-repair-sterling-heights-mi.webp) !important;
  background-position: center bottom;
}

.commercial-garage-door-repair-bg{
background-image: 
    url(../images/commercial/commercial-garage-door-repair-sterling-heights-mi.webp) !important;
  background-position: center bottom;
}




.residential-garage-door-repair-bg{
  
   background-image: 
   linear-gradient(to right, #00000077 0%, #00000077 100%),
    url(../images/residential/residential-garage-door-repair-sterling-heights-mi.webp) !important;
  background-position: top center;

}

 .custom-article-font{
  font-size: 0.8rem;
 }


.page-not-found{
  font-size: 5rem;
}


.error-404{
   position: absolute;
   top:-15%;
   left:1%;
   font-size: 1.5rem;
   border-radius: 10px;
   padding-inline: 10px;
   color: var(--color-soft-gray);
   background-color: var(--color-golden-yellow);

  }



 .navbar {
    position: relative;
    z-index: 1000;
  }
  
  .navbar-collapse {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
     text-align: center;
     background-color: var(--color-soft-gray);
    z-index: 1000;
     margin: 5%;
     border-radius: 20px;
  }



.navbar-toggler{
  background-color: var(--color-navy-blue);
  color: var(--color-soft-gray);
  margin-right: 3%;
}

.carousel-field {
 border-top-left-radius: 20px !important;  
}

.marquee-carousel{
  margin-top:3%;
  
}

.hero-left_side .row{
    margin-left: 0%;
    margin-top: 0%;
}

.hero-context >div{
  background-color: #00000077;
}

.keyword_head span {
padding: 0;

}

.statis-container{
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 10%;
}
.statis  span{
   color: var(--color-soft-gray);
   font-size: 1.5rem;
}
.statis  p{
   font-size: 0.8rem;
}



.why-choose-us_card{
  
  height: 250px !important;

}


.why-choose-us_card_icon  {

  width: 50px;
  height: 50px;

  

}

.why-choose-us_card_icon i{
  font-size: 2rem;

}


/* main services  */
 
.hover-card-hover {
 
  right: 1rem;      /* like Tailwind's right-20 */
  bottom: -2.5rem;  /* like Tailwind's -bottom-10 */
  width: 91.666667%;
  height: 40%;
  border-radius: 0.5rem;
  transition: transform 0.7s ease;
}

.hover-card-container:hover .hover-card-hover {
  transform: translateY(-1rem) translateX(-1rem);
}

 .main-service{
  margin-top: 15%;
 }



#testimonials_body{
  padding-inline:0%;
  margin-inline:5%;

}

 .custom-pagination-container {
 
    margin-top: 10px; /* Adjust this to position properly */
    padding-bottom: 30px;
    margin-left:2%;
  }

  .testimonials-card_text{
    margin-top: 0% !important;
    padding-right: 10%
  }

  .footer-cta a{
    margin-top: 5%;
    font-size: 1rem !important;
}


.sub-attached{
  position: absolute;
  top: -0%;
  left: -16%;
  padding: 3%;

}

  .offers-head_title_first_span {
    margin-top:-15%;
    z-index: 100;
  }
  .offer-body img{
    margin-top: 5%;
  }
  .offers-head_title_second_span{
     bottom: -7%;
    
  }


  
 .table-style-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    width: 400px; /* Fixed width */
    height: 400px; /* Fixed height */
    overflow-y: auto; /* Add scroll if content exceeds height */
    padding: 0px;
    border: 1px solid #ddd;

    /* background: white; */
  }
  
  .table-style-list .item {
    display: flex;
    align-items: center;
    padding: 2px;
       
    /* border-bottom: 1px solid #eee; */
  }
  
  .table-style-list .btn {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
   
    text-decoration: none;
    border-radius: 10px;
    
  }
  

  .zip-codes-list {
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 6px;
    }
    
    .zip-codes-list .btn {
      padding: 0.5rem;
      font-size: 1.2rem;
    }
 
 }

 /* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) { 
.zip-codes-list {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

 }

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) { 


 }

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


 }


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


 }