/* font style */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,600;0,800;1,400&display=swap');body
{
  font-family: 'Noto Serif', serif;
}
/* header */
.hero-bg
{
  background-image: url(../images/Garage-Door-Forney.webp);
  background-size: Cover;
  background-repeat: no-repeat;
  background-position: center center;

}
.insttlation
{
  background-image: url(../images/installation-is-not-an-easy-mission.webp);
  background-size: Cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.opener
{
  background-image: url(../images/Garage-Door-Opener.webp);
  background-size: Cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.spring
{
  background-image: url(../images/garage-door-springs-get-damaged.webp);
  background-size: Cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.cable
{
  background-image: url(../images/Garage-Door-Broken-Cables.webp);
  background-size: Cover;
  background-repeat: no-repeat;
  background-position: center center;
}
p
{
  font-family: 'Noto Serif', serif;
  font-weight: 400;
}
h2,h3,h4,h5,h6
{
  font-family: 'Noto Serif', serif;
  font-weight: 600;
  font-weight: bold;

}
h1
{
  font-family: 'Noto Serif', serif;
 font-weight: 800;
 font-size: 4em;
  color: #FFC436;
}
.top
{
  margin-top: 9em;
}

a
{
  text-decoration: none;
}
/* navbar */
.navbar .nav  a
{
  text-decoration: none;
  color: white;
  margin: 0em 0.3em;
}

.bg
{
  background-color: #3C2A21;
}
.btn-light:hover
{
  background-color: #FFC436;
  color: #3C2A21;
}
.navbar-toggler{

  border: 1px solid #fff;
  color: #fff;
}
/* why choose us */
.bg-sec
{
  background-color: #FFC436;
position: relative;
}
.bg-sec:hover
{
  background-color: #fff;
    border: 6rem;
    border-radius: 50px;
    border-color: #FFC436;
}

.module{padding:0px 0px 0px 0px;margin-top:-10rem}
.services .service-item{padding-top:20px;padding-bottom:20px;font-size:16px;line-height:20px;position:relative;color:#3C2A21;transition:all 0.4s linear;background:#FFC436;}
.services .service-item h2{font-size:24px;color:#3C2A21;border-bottom: #535156 solid 1px;padding-bottom:7px;}
.services .service-item i{color:#3C2A21;width:80px;}
.section-title{position:relative;font-size:30px;padding-bottom:30px;margin-bottom:30px;font-weight:500}
.section-title::before{position:absolute;content:"";width:120px;height:2px;background-color:#3C2A21;bottom:10px;left:0}
.sup-title{color:#3C2A21;font-size:1.8em;font-weight:500}
.fa-ul li::before{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f14a";margin-right:5px;color:#FFC436}
.fa-ul{margin-left:15px !important}
.bg-sec:hover
{
  background-color: #fff;
    border: 6rem;
    border-top: #FFC436;
    border-bottom: #FFC436;
    border-radius: 5rem;
    border-color: #FFC436;
}
  /*coupon*/
  a.lightbox img{height:auto;transition:.5s;margin-top:7rem;margin-bottom:3rem}
  .lightbox-target{position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.7);opacity:0;-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;overflow:hidden;z-index:2}
  .lightbox-target img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:0 0 8px rgba(0,0,0,0.7);box-sizing:border-box;transition:.5s ease-in-out}
  a.lightbox-close{width:100%;height:100%;position:absolute;transition:.5s ease-in-out;opacity:0;top:0;left:0}
  .lightbox-target:target{opacity:1;top:0;bottom:0}
  .lightbox-target:target img{max-height:100%;max-width:100%}
  .printable{position:relative;}
  

  body{
    margin:0;
    padding:0;
  }
  
  .btn{
  cursor:pointer;
    position:relative;
    padding:10px 20px;
    background:white;
    font-size:28px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    transition:all 1s;
    &:after,&:before{
      content:" ";
      width:10px;
      height:10px;
      position:absolute;
      border :0px solid #fff;
      transition:all 1s;
      }
    &:after{
      top:-1px;
      left:-1px;
      border-top:5px solid #3C2A21;
      border-left:5px solid #3C2A21;
    }
    &:before{
      bottom:-1px;
      right:-1px;
      border-bottom:5px solid #3C2A21;
      border-right:5px solid #3C2A21;
    }
    &:hover{
      border-top-right-radius:0px;
    border-bottom-left-radius:0px;
      /* // background:rgba(0,0,0,.5);
      // color:white; */
      &:before,&:after{
        
        width:100%;
        height:100%;
        /* // border-color:white; */
      }
    }
  }
  
  .data-container{
    background:#ffebee;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  /* gallary */

.gallary a:focus img{
  width:40%;
  transform:none;
  box-shadow:12px 12px 25px #333;
}
.gallary img{
  width:23%;
  margin:1%;
  vertical-align:top;
}
img:hover{

  box-shadow:6px 6px 20px rgba(0,0,0,.3);
  transform:scale(1.02);

}

footer
{
  background-color: #3C2A21;
  color: #fff;
}
footer a
{
  color: #fff;
}
footer a:hover
{
  color: #FFC436;
  
}
footer ul li
{
  list-style-type: none;
  padding: 0; 
  margin: 0;
}
@media (max-width: 775px) {
  h1
{
  font-family: 'Noto Serif', serif;
 font-weight: 800;
 font-size: 2.8em;
  color: #FFC436;
}
  .top
  {
    margin-top: 2em;
  }
}
.spam { display:none;}