/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
 :root {
   --color-default: #865439;
   --color-lighttbrown: #C68B59;
   --color-blue: #8FC1D4;
   --color-light: #dccfa4;
   --color-red: #81123C;
 }


 body {
   font-family: "Open Sans", sans-serif;
 }

 a {
   text-decoration: none;
 }

 a:hover {
   text-decoration: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: "Playfair Display", serif;
 }


 /*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
 .back-to-top {
   position: fixed;
   visibility: hidden;
   opacity: 0;
   left: 15px;
   bottom: 15px;
   z-index: 996;
   width: 44px;
   height: 44px;
   border-radius: 50px;
   transition: all 0.4s;
   border: 2px solid var(--color-default);
 }

 .back-to-top i {
   font-size: 28px;
   color: var(--color-default);
   line-height: 0;
 }

 .back-to-top:hover {
   background: var(--color-light);
   color: var(--color-default);
 }

 .back-to-top:hover i {
   color: var(--color-default);
 }

 .back-to-top.active {
   visibility: visible;
   opacity: 1;
 }



 /*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
 #topbar {
   height: 30px;
   font-size: 14px;
   transition: all 0.5s;
   z-index: 996;
 }


 #topbar .contact-info i {
   font-style: normal;
   color: var(--color-light);
   font-weight: bold;
   font-size: 14px;


 }

 #topbar .contact-info i span {
   padding-left: 5px;
   color: #fff;
 }

 


 @media (max-width:390px) {
  #topbar {
   height: 30px;
   font-size: 11px;
   transition: all 0.5s;
   z-index: 996;
 }


 #topbar .contact-info i {
   font-style: normal;
   color: var(--color-light);
   font-weight: bold;
   font-size: 11px;


 }

 #topbar .contact-info i span {
   padding-left: 5px;
   color: #fff;
 }
 }

 /*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
 #header {
   background: url("../img/garage-door.webp") top center;
   background-size: cover;
   border-bottom: 1px solid rgba(12, 11, 9, 0.6);
   transition: all 0.5s;
   z-index: 997;

 }

 #header .logo img {
   max-height: 60px;
 }

 
 .logo img {
  max-height: 60px;
}

/* --------------------------------------------------- 
*/
 
#header-opener {
  background: url("../img/opener.jpeg") top center;
  background-size: cover;
  border-bottom: 1px solid rgba(12, 11, 9, 0.6);
  transition: all 0.5s;
  z-index: 997;

}

#header-opener .logo img {
  max-height: 60px;
}
/* ---------------------------------------------
 */

 #header-install {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url("../img/installation.jpg") top center;
  background-size: cover;
  border-bottom: 1px solid rgba(12, 11, 9, 0.6);
  transition: all 0.5s;
  z-index: 997;

}

#header-install .logo img {
  max-height: 60px;
}

/* ---------------------------------------------
 */

 #header-spring {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url("../img/Spring-Repair.jpg") top center;
  background-size: cover;
  border-bottom: 1px solid rgba(12, 11, 9, 0.6);
  transition: all 0.5s;
  z-index: 997;

}

#header-spring .logo img {
  max-height: 60px;
}
/* ---------------------------------------------
 */

 #header-repair {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url("../img/garage-repair.webp") top center;
  background-size: cover;
  border-bottom: 1px solid rgba(12, 11, 9, 0.6);
  transition: all 0.5s;
  z-index: 997;

}

#header-repair .logo img {
  max-height: 60px;
}


 /*--------------------------------------------------------------
#contact button Menu
--------------------------------------------------------------*/
 .contact-us-btn {
   margin: 0 0 0 15px;
   border: 2px solid var(--color-default);
   color: #fff;
   border-radius: 50px;
   padding: 8px 25px;
   text-transform: uppercase;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: 1px;
   transition: 0.3s;
 }

 .contact-us-btn:hover {
   background: var(--color-default);
   color: #fff;
 }

 @media (max-width: 992px) {
   .contact-us-btn {
     margin: 0 15px 0 0;
     padding: 8px 20px;
   }
 }

 /*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
 /**
* Desktop Navigation 
*/
 .navbar {
   background-color: rgba(220, 207, 164, 0.9);

 }

 .navbar ul {
   margin: 0;
   padding: 0;
   display: flex;
   list-style: none;
   align-items: center;
 }

 .navbar li {
   position: relative;
 }

 .navbar a,
 .navbar a:focus {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0 10px 30px;
   color: var(--color-default);
   white-space: nowrap;
   transition: 0.3s;
   font-size: 20px;
   font-weight: bold;
 }

 .navbar a i,
 .navbar a:focus i {
   font-size: 12px;
   line-height: 0;
   margin-left: 5px;
 }

 .navbar a:hover,
 .navbar .active,
 .navbar .active:focus,
 .navbar li:hover>a {
   color: #fff;
 }

 .smooth {
   transition: all 0.5s ease-in-out;
 }



 /**
* Mobile Navigation 
*/
 .mobile-nav-toggle {
   color: #fff;
   font-size: 28px;
   cursor: pointer;
   display: none;
   line-height: 0;
   transition: 0.5s;
 }

 @media (max-width: 991px) {
   .mobile-nav-toggle {
     display: block;
   }

   .navbar ul {
     display: none;
   }
 }

 .navbar-mobile {
   position: fixed;
   overflow: hidden;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.9);
   transition: 0.3s;
   z-index: 999;
 }

 .navbar-mobile .mobile-nav-toggle {
   position: absolute;
   top: 15px;
   right: 15px;
 }

 .navbar-mobile ul {
   display: block;
   position: absolute;
   top: 55px;
   right: 15px;
   bottom: 15px;
   left: 15px;
   padding: 10px 0;
   border-radius: 6px;
   background-color: #fff;
   overflow-y: auto;
   transition: 0.3s;
 }

 .navbar-mobile a,
 .navbar-mobile a:focus {
   padding: 10px 20px;
   font-size: 15px;
   color: #1a1814;
 }

 .navbar-mobile a:hover,
 .navbar-mobile .active,
 .navbar-mobile li:hover>a {
   color: var(--color-light);
 }

 .navbar-mobile .getstarted,
 .navbar-mobile .getstarted:focus {
   margin: 15px;
 }



 /*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
 #hero {
   width: 100%;
   height: 100vh;

 }



 #hero .container {
   padding-top: 110px;
 }

 @media (max-width: 992px) {
   #hero .container {
     padding-top: 98px;
   }
 }

 #hero h1 {
   margin: 0;
   font-size: 48px;
   font-weight: 700;
   line-height: 56px;
   color: #fff;
   font-family: "Poppins", sans-serif;
 }

 #hero h1 span {
   color: var(--color-light);
 }

 #hero h2 {
   color: #fff;
   margin-bottom: 10px 0 0 0;
   font-size: 22px;
   line-height: 35px;
   letter-spacing: 1px;
 }

 #hero .btns {
   margin-top: 30px;
 }

 #hero .btn-call {
   font-weight: bold;
   font-size: 30px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   display: inline-block;
   padding: 12px 30px;
   border-radius: 50px;
   transition: 0.3s;
   line-height: 1;
   color: #fff;
   border: 3px solid #fff;
 }


 #hero .btn-call:hover {
   background: var(--color-light);
   color: var(--color-default);
   border: 2px solid var(--color-light);
 }

 #hero .btn-call {
   margin-left: 15px;
 }



 @media (min-width: 1600px) {
   #hero {
     background-attachment: fixed;
   }
 }


 @media (max-height: 500px) {
   #hero {
     height: auto;
   }

   #hero .container {
     padding-top: 130px;
     padding-bottom: 60px;
   }
 }

 @media (max-width: 768px) {
   #hero h1 {
     font-size: 28px;
     line-height: 36px;
   }

   #hero h2 {
     font-size: 18px;
     line-height: 24px;
   }
 }

 @keyframes pulsate-btn {
   0% {
     transform: scale(0.6, 0.6);
     opacity: 1;
   }

   100% {
     transform: scale(1, 1);
     opacity: 0;
   }
 }









 /*  */

  
 
 
 /*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/

 .service {
   padding: 60px 0;
   overflow: hidden;
 }



 .section-title {
   text-align: center;
   padding-bottom: 30px;
 }

 .section-title h2 {
   font-size: 32px;
   font-weight: bold;
   text-transform: uppercase;
   margin-bottom: 20px;
   padding-bottom: 20px;
   position: relative;
   color: var(--color-default);
 }

 .section-title h2::before {
   content: "";
   position: absolute;
   display: block;
   width: 120px;
   height: 1px;
   background: #ddd;
   bottom: 1px;
   left: calc(50% - 60px);
 }

 .section-title h2::after {
   content: "";
   position: absolute;
   display: block;
   width: 40px;
   height: 3px;
   background: var(--color-default);
   bottom: 0;
   left: calc(50% - 20px);
 }

 .section-title p {
   margin-bottom: 0;
 }



 .service .content h3 {
   font-weight: 600;
   font-size: 26px;
 }

 .service .content ul {
   list-style: none;
   padding: 0;
 }

 .service .content ul li {
   padding-left: 28px;
   position: relative;
 }

 .service .content ul li+li {
   margin-top: 10px;
 }

 .service .content ul i {
   position: absolute;
   left: 0;
   top: 2px;
   font-size: 20px;
   color: var(--color-default);
   line-height: 1;
 }

 .service .content p:last-child {
   margin-bottom: 0;
 }


 /*  */

 .image {
   margin-left: 40%;
 }


 .offer-content {
  background-image: url('../img/background.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50%;

}

 .offer {
   margin: 0;
   font-size: 8em;
   padding: 5%;
   color: white;
   text-shadow: 0 0.1em 20px rgb(240, 215, 146), 0.05em -0.03em 0 rgba(0, 0, 0, 1),
     0.05em 0.005em 0 rgba(240, 215, 146), 0em 0.08em 0 rgba(0, 0, 0, 1),
     0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1),
     -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);

   span {
     transform: scale(0.9);
     display: inline-block;
   }

   span:first-child {
     animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
   }

   span:last-child {
     animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
   }
 }

 @keyframes bop {
   0% {
     transform: scale(0.9);
   }

   50%,
   100% {
     transform: scale(1);
   }
 }

 @keyframes bopB {
   0% {
     transform: scale(0.9);
   }

   80%,
   100% {
     transform: scale(1) rotateZ(-3deg);
   }
 }

 .btn-call2 {
   font-weight: bold;
   font-size: 30px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   display: inline-block;
   padding: 12px 30px;
   border-radius: 50px;
   transition: 0.3s;
   line-height: 1;
   color: #fff;
   border: 3px solid #fff;
 }


 .btn-call2:hover {
   background: var(--color-light);
   color: var(--color-default);
   border: 2px solid var(--color-light);
 }

 /*  */



 /*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
 .testimonials .testimonials-carousel,
 .testimonials .testimonials-slider {
   overflow: hidden;
 }

 .testimonials .testimonial-item {
   box-sizing: content-box;
   min-height: 320px;
 }

 .testimonials .testimonial-item .testimonial-img {
   width: 90px;
   border-radius: 50%;
   margin: -40px 0 0 40px;
   position: relative;
   z-index: 2;
   border: 6px solid rgba(255, 255, 255, 0.2);
 }

 .testimonials .testimonial-item h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 5px 45px;
   color: var(--color-default);
 }

 .testimonials .testimonial-item h4 {
   font-size: 14px;
   color: var(--color-light);
   margin: 0 0 0 45px;
 }

 .testimonials .testimonial-item .quote-icon-left,
 .testimonials .testimonial-item .quote-icon-right {
   color: var(--color-default);
   font-size: 26px;
 }

 .testimonials .testimonial-item .quote-icon-left {
   display: inline-block;
   left: -5px;
   position: relative;
 }

 .testimonials .testimonial-item .quote-icon-right {
   display: inline-block;
   right: -5px;
   position: relative;
   top: 10px;
 }

 .testimonials .testimonial-item p {
   font-style: italic;
   margin: 0 15px 0 15px;
   padding: 20px 20px 60px 20px;
   position: relative;
   border-radius: 6px;
   position: relative;
   z-index: 1;
 }

 .testimonials .swiper-pagination {
   margin-top: 30px;
   position: relative;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   opacity: 1;
 }

 .testimonials .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--color-light);
 }


 /*  */

 @media (max-width:992px) {
   .image {
     margin-left: 0;
     margin-top: -6%;
   }
   .offer-content{
    margin-top: 100px;
   }
   .offer{
    font-size: 4em;
   }
 }
 @media (max-width:1329px) {
  .image {
    margin-left: 20%;

  }
  .offer-content{
   margin-top: 100px;
  }
  .offer{
   font-size: 4em;
  }
}


@media (max-width:985px) {
  .image {
    margin-left: 0;
 margin-top: 20%;
 
  }
  .offer-content{
   margin-top: 10px;
  }
  .offer{
   font-size: 4em;
  }
  
}


@media (max-width:768px) {
  .image {
    margin-left: 0;
 margin-top: 20%;
 
  }
  .offer-content{
   margin-top: 10px;
  }
  .offer{
   font-size: 3em;
  
  }
  
}


@media (max-width:576px) {
  .image {
    margin-left: 0;
  margin-top:-50%;
 
  }
  .offer-content{
   margin-top: 200px;
  }
  .offer{
   font-size: 3em;
  
  }
   
}
/*  */


.btn-call3 {
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.3s;
  line-height: 1;
  color: var(--color-default);
  border: 3px solid var(--color-default);
}


.btn-call3:hover {
  background: var(--color-default);
  color: var(--color-light);
  border: 2px solid var(--color-default);
}
/*  */


/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: var(--color-default);
  padding: 80px 0;
}

.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.cta p {
  color: #fff;
}

.cta .cta-btn {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: var(--color-default);
  background: #fff;
}

.cta .cta-btn:hover {
  background: var(--color-light);
  color: var(--color-default);
}

@media (max-width: 1024px) {
  .cta {
    background-attachment: scroll;
  }
}

@media (min-width: 769px) {
  .cta .cta-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}


  /* --------------------------------------- */


  .section-header h3 {
    font-size: 36px;
    color: var(--color-default);
    text-align: center;
    font-weight: 500;
    position: relative;
  }
  
  .section-header p {
    text-align: center;
    margin: auto;
    font-size: 15px;
    padding-bottom: 60px;
    color: #fff;
    width: 50%;
    line-height: 20px;
  }
  
  @media (max-width: 767px) {
    .section-header p {
      width: 100%;
    }
  }

  #why-us {
    padding: 60px 0;
    background: var(--color-default);
  }
  
  #why-us .section-header h3,
  #why-us .section-header p {
    color: #fff;
  }
  
  #why-us .card {
    background: #fff;
    border-color: #fff;
    border-radius: 10px;
    margin: 0 15px;
    padding: 15px 0;
    text-align: center;
    color:#000;
    transition: 0.3s ease-in-out;
    height: 100%;
  }
  
  @media (max-width: 991px) {
    #why-us .card {
      margin: 0;
    }
  }
  
  #why-us .card:hover {
    background: var(--color-light);
    border-color:var(--color-light);
  }
  
  #why-us .card i {
    font-size: 48px;
    padding-top: 15px;
    color:#000;
  }
  
  #why-us .card h5 {
    font-size: 22px;
    font-weight: 600;
  }
  
  #why-us .card p {
    font-size: 15px;
    color:#000;
  }
  
 
/* -------------------------------- */



/* Contact Section
--------------------------------*/

.spam{
  display:none;
}
#contact {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 60px 0;
  overflow: hidden;
  margin-top: 5%;
}

#contact .section-header {
  padding-bottom: 30px;
}

#contact .contact-about h3 {
  font-size: 36px;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-default);
}

#contact .contact-about p {
  font-size: 14px;
  line-height: 24px;
  font-family: "Montserrat", sans-serif;
  color: var(--color-default);
}

#contact .social-links {
  padding-bottom: 20px;
}

#contact .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #fff;
  color: var(--color-default);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  border: 1px solid var(--color-default);
}

#contact .social-links a:hover {
  background: var(--color-default);
  color: #fff;
}

#contact .info {
  color: #283d50;
}

#contact .info i {
  font-size: 32px;
  color: var(--color-default);
  float: left;
  line-height: 0;
}

#contact .info p {
  padding: 0 0 10px 36px;
  line-height: 28px;
  font-size: 14px;
}
 
 

 
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background:#fff;
  padding: 0 0 30px 0;
  color: #000;
  font-size: 14px;
}

#footer .footer-top {
  background:var(--color-light);
  padding: 60px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 34px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  color: var(--color-default);
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#footer .footer-top .footer-info p {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Montserrat", sans-serif;
  color: #ecf5ff;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-default);
  color: #fff;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a i {
  line-height: 0;
}

#footer .footer-top .social-links a:hover {
  background:#fff;
  color: var(--color-default);
}

#footer .footer-top h4 {
  font-size: 20px;
  font-weight: bold;
  color: var(--color-default);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 10px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul li {
  padding: 8px 0;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

 

 

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact p {
  line-height: 26px;
}
 

#footer .copyright {
  text-align: center;
  padding-top: 30px;
}
 

.info-btn{
  width: 200px;
 }