.nav{
 
    color: #fff;
  }
  
   
    .nav-link{
  color: #fff;
      cursor: pointer;
    }
    .nav-link:hover{
      color: #FFA400;
    }
    button {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: transparent;
        border: 0;
        color: #122c6c;
        cursor: pointer;
        font: inherit; 
        position: relative;
        transition: filter var(--motion-duration);
      }
      
      button:hover {
        filter: brightness(1.1);
        color: #122c6c;
      }
      
      button:active {
        filter: brightness(0.9);
      }
      
      button > span {
        display: block;
        position: relative;
        transition: transform var(--motion-duration) var(--motion-ease);
        z-index: 1;
      }
      
      button:hover > span {
        transform: scale(1.05);
      }
      
      button:active > span {
        transform: scale(0.95);
      }
      
      button > svg {
        fill: #FFA400;
        position: absolute;
        top: -5%;
        left: -5%;
        width: 110%;
        height: 110%;
      }
      
      button > svg > path {
        transition: var(--motion-duration) var(--motion-ease);
      }
      
      button:hover > svg > path {
        d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0");
      }
      
      button:active > svg > path {
        d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0");
      }



      .banner{
        background-size: cover;
        background-repeat: no-repeat;
        background-position:top; 
        background-image:linear-gradient(rgba(17, 33, 59, 0.229),rgba(0,0,0,0.5)), url(../images/l-intro-1680795177.jpg);
      }
     .banner-Repair{
        background-size: cover;
        background-repeat: no-repeat;
        background-position:top; 
        background-image:linear-gradient(rgba(17, 33, 59, 0.229),rgba(0,0,0,0.5)), url(../images/garage-door-repair-and-maintenance-why-it-is-crucial-for-every-business-2.png);
}
.banner-installation{
  background-size: cover;
  background-repeat: no-repeat;
  background-position:top; 
  background-image:linear-gradient(rgba(17, 33, 59, 0.229),rgba(0,0,0,0.5)), url(../images/grg-door-repair-8.jpg);
}
.banner-opener{
  background-size: cover;
  background-repeat: no-repeat;
  background-position:top; 
  background-image:linear-gradient(rgba(17, 33, 59, 0.329),rgba(0,0,0,0.6)), url(../images/hero_02.jpg);
}
.banner-spring{
  background-size: cover;
  background-repeat: no-repeat;
  background-position:top; 
  background-image:linear-gradient(rgba(17, 33, 59, 0.329),rgba(0,0,0,0.6)), url(../images/garage-door-repair-e1630931235655.png);
}
      /* --------------------------------------------------- */

      /* marquee */

 .marquee {
	width:100%;
	margin: 15px auto;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	animation: marquee 35s linear infinite;
	color:#fff;
	padding-left: 70%;
  }
  
  .marquee:hover {animation-play-state: paused}
  
  /* Make it move */
  
  @keyframes marquee {0%   { text-indent: 27.5em }100% { text-indent: -120em }}
  
   /* marquee */



   .aboutcontainer{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)),  url(../images/Spring-Repair2.webp);
    background-size: cover;
    background-position: center;  
  
    /* background-attachment: fixed; */
   }
   
   .aboutcontainer-repair{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)),  url(../images/repair-Recovered.png);
    background-size: cover;
    background-position: center;  
   }

   .aboutcontainer-installation{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)),  url(../images/install-Recovered.png);
    background-size: cover;
    background-position: center;  
   }

.aboutcontainer-opener{
  background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)),  url(../images/opener-Recovered.png);
  background-size: cover;
  background-position: center;  
}
.aboutcontainer-spring{
  background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)),  url(../images/spring-Recovered.png);
  background-size: cover;
  background-position: center;  
}

   section{padding:5% 0}
   .alizarin{background:#163583}
   .amethyst{background:#5196f2}
   .emerald{background:#2556b1}
   .midnight-blue{background:#2c3e50}
   .peter-river{background:#347cdb}
   .dl{background:#f0f0f0;padding:30px 0;border-radius:20px;position:relative}
   .dl:before{content:" ";height:20px;width:20px;background:#ddd;border-radius:20px;position:absolute;left:50%;top:20px;margin-left:-10px}
   .dl .brand{text-transform:uppercase;letter-spacing:3px;padding:10px 15px;margin-top:10px;text-align:center;min-height:100px}
   .dl .discount{min-height:50px;position:relative;font-size:80px;line-height:80px;text-align:center;font-weight:700;padding:20px 15px 0;color:#fff}
   .dl .discount:after{content:" ";border-right:20px solid transparent;border-left:20px solid transparent;position:absolute;bottom:-20px;left:20%}
   .dl .discount.alizarin:after{border-top:20px solid #163583}
   .dl .discount.peter-river:after{border-top:20px solid #347cdb}
   .dl .discount.emerald:after{border-top:20px solid #2556b1}
   .dl .discount.amethyst:after{border-top:20px solid #5196f2}
   .dl .discount .type{font-size:20px;letter-spacing:1px;text-transform:uppercase;margin-top:-30px}
   .dl .descr{color:#999;margin-top:10px;padding:20px 15px}
   .dl .ends{padding:0 15px;color:#f1c40f;margin-bottom:10px}
   .dl .coupon{min-height:50px;text-align:center;text-transform:uppercase;font-weight:700;font-size:18px;padding:20px 15px}
   .dl .coupon a.open-code{color:#FFA400; text-decoration: none;}
   .dl .coupon .code{letter-spacing:1px;border-radius:4px;margin-top:10px;padding:10px 15px;color:#f1c40f;background:#f0f0f0}

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

.form{
  background-image:url(../images/background.webp) ;
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center ; 
}

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


.serviceslist ul li a{
  font-size: 18px;
  text-decoration: none; 
  color: #fff;
 }
 .serviceslist ul li a:hover{
color: #FFA400;
cursor: pointer;
 }
    textarea{
    resize: none;
    margin-bottom: 20px; 
    }
    
  
    .userselect{
    user-select: none;
    }
    
    .spam { display:none;}
  
 
    .Locations a{
      width:30% ;
      margin:9px auto;
     }


     .social-links {
      display:inline-block;
      height:15px;
      width:15px;
      background-color:rgba(255,255,255,0.2);
      margin:0 8px 8px 0;
      padding: 8px;
      text-align:center;
      line-height:20px;
      border-radius:50%;
      color:#ffffff;
      transition:all 0.5s ease;
    }
    .social-links:hover{
        color:#f89e28;
        background-color:#ffffff;
    }


.formbtn{
  width: 30%;
}









  
  @media (max-width: 617.233px){
 .formbtn{
  width: 50%;
 }
 .head{
  display: none;
 }

}