body {
    overflow-x: hidden;
  }
  a{text-decoration: none;}
p{color: #1a1a1a;}
h2{color: #764d25; ;padding-left:20px ;margin-bottom: 20px; position: relative;}
h2::before{display: block; position: absolute;content: ""; background-image:url(../img/logo-icon2.webp) ;bottom: -12px;left:-10px;width: 50px;height: 86px;}
h2 strong{color:#edcc94}
h3{color:white}

/* Top nav */
.fa-square-phone{font-size:1.3rem ;color:#edcc94;}
.headRow{position: relative;}
.tech-area{position: absolute; left: 10%; bottom: 0;}
.tech-area2{position: absolute; left: 10%; bottom: 0; display: none;}

/* nav */
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
  li a:hover, .dropdown:hover .dropbtn { background: linear-gradient(to right, #edcc94, #764d25);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  li.dropdown {
    display: inline-block;}
  .dropdown-content {
    display: none;
    position: absolute;
    background-color:rgba(255, 255, 255, 0.3);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;}
  .dropdown-content a {
    color:white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;}
.dropdown:hover .dropdown-content {display: block;}
.nav-gradient{ background: linear-gradient(to right, #edcc94, #764d25);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.navbar-nav {align-items: center;}
.nav-link{color:white;font-size: .9em; margin-left: 20px;}
.nav-link:hover{color: #edcc94}
.nav-link {color:white;}
.nav-link strong{color:#764d25;font-size: 1.3em;}
.nav-link strong:hover{color:#edcc94;}
.nav-item{text-align: start;font-size: 1.1rem;}
.navbar-toggler{background-color: #764d25; opacity: .6;}
#phone-number{color: #edcc94; font-size: 1.4em;letter-spacing: 8px;}
.phone{margin-top: -45px;}
.phone a{text-decoration: none;}
header i{padding-top: 5px;color: #edcc94 ;}



/* hero */
.hero{background-size: cover;background-position: center center;height: auto; background-attachment: fixed; border-bottom:solid 5px #764d25; }
h1{color: white;}
.text-gradient,
.text-gradient > * { background: linear-gradient(to right, #edcc94, #764d25);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5em;
}
.heroText{align-items: center;}
.heroText p{color: white; opacity: .5;}
.btn-color{background-color:  rgba(21, 164, 152, .7);color: white ;padding-top:0;padding-bottom: 0;padding-right: 60px;padding-left: 60px;}
.bg-overlay{background-color: rgba(0, 0, 0, .7);width: 100%; height: 100%;padding-bottom: 200px;}
.col-static{position: relative;}
.col-static p{position: absolute; bottom: -15px; left: 45px; font-size: 1.2em;}



.btn-1, .btn-2 {
    position: relative;
    display: inline-block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    background: linear-gradient(90deg, #edcc94,#a57d4f, #825930, #a57d4f);
    background-size: 400%;
    border-radius: 30px;
    z-index: 1;
    align-items: center;
    padding-bottom: 60px;
  }
  .btn-1 strong{
font-size: x-large;  }
  .btn-1:hover {
    animation: animate 8s linear infinite;
  }
   
  @keyframes animate {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 400%;
    }
  }
   
  .btn-1:before {
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #edcc94,#a57d4f, #825930, #a57d4f);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
  }
   
  .btn-1:hover:before {
    filter: blur(15px);
    opacity: 1;
    animation: animate 8s linear infinite;
  }









/* section1 */
.section1 p strong{color:#edcc94;}




/* section2 */
.section2{ margin-top: 80px;}
.services{padding-top: 20px; transition: 1s;opacity: .6;border-bottom:#edcc94  10px solid;}
.services img{ /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
  filter: gray; /* IE5+ */
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  -webkit-transition: all .8s ease-in-out;  }

.services:hover img{ filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.01);}

.services:hover{ box-shadow: 1px 3px 9px  #3a3a3a;border-top-right-radius: 60px; opacity: 1;border-top: none;border-top: 5px solid #edcc94; ;border-left: none;}
.section2 h2{color: white;}
h5{color:  #edcc94; font-size: 1.5em; }
.services:hover h5{font-size: 2.3em;transition: 1s; color:white; opacity: .8;}

.section2 .h2-line::after{content: '';position: absolute;background-color:white ;width: 500px;height: 1px;top: 32px; margin-left: 10px;}
.section2 .h2-line::before{content: '';position: absolute;background-color:white ;width: 100px;height: 1px;top: 32px; margin-left:-80px;}


/* section3 */
.section3{background-color:#fff6e6 ;background-size: cover; background-repeat: no-repeat; background-position: center center;}
.beforeAfter{margin-top: 120px; position: relative;} 
.repair{position: absolute; top: -30px; right: 200px;} 
.repair2{position: absolute; bottom:80px; left: 150px;} 
.before, .after{margin-top: -80px;}
.section3 .h2-line::after{content: '';position: absolute;background-color:rgb(0, 0, 0) ;width: 450px;height: 1px;top: 32px; margin-left: 10px;}





/* section4 */
.section4{ background-size: cover;background-position: bottom center; background-attachment: fixed; }
.section4 h2 {color:  #edcc94;}
.section4 p {color:white ;}
.section4 h2::before{display: block; position: absolute;content: ""; background-image:url(../img/logo-icon2.webp) ;bottom: 0px;left:-10px;width: 50px;height: 86px;}
.section4 .couponText{background-color: rgba(0, 0, 0, .7);}
.set4-col2{position: relative; }
.sect4-Float{position: absolute; top: 40px; right: 20px;}
.section4 h3 strong{font-size: 3em;}
.section4 .h2-line::after{content: '';position: absolute;background-color:white ;width: 300px;height: 1px;top: 32px; margin-left: 10px;}
.section4 .h2-line::before{content: '';position: absolute;background-color:white ;width: 80px;height: 1px;top: 32px; margin-left:-80px;}





/* section5 */
.parent{position: relative;}
.floating{ position: absolute; top: 250px; left: 300px; }
.pricesParent h3{ color:white ; font-size:2.5em; opacity: .7;}
.pricesParent h2{ color:#edcc94 ; }
.pricesParent h6{ color:white ; }
.pricesArea i{font-size: 2.4em; margin-bottom: 30px; color:#edcc94 ;}
.pricesArea:hover i{ color:rgb(43, 43, 43) ;}
.choose{background-color :rgba(255, 255, 255, 0.3);  padding-top: 50px;padding-bottom: 30px;border-bottom: 5px solid #edcc94;}
.choose:hover{ padding-top: 80px;padding-bottom: 50px; transition: .7s;background-color :#edcc94;  border-top-right-radius: 50px;border-top: 5px solid white; }
.choose:hover h5{color :#ffffff;}
.choose h5{color:#333333;; font-size: 1.8em; font-weight: 700;}
.pricesText h2::after{content: '';position: absolute;background-color:white ;width: 200px;height: 1px;top: 32px; margin-left: 10px;}
.pricesText .h-line-none{ background: linear-gradient(to right, #edcc94, #764d25);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
 }
  .pricesText .h-line-none::after{ content: '';position: absolute;background-color:white ;width: 150px;height: 1px;top:130px; margin-left: 10px;}
.section5 p strong{font-size:1.2em ; color:#edcc94 ;}
.section5 #FlipX{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);}
  .bg-colorBiege{background-color: #faedd6;}
  /* .bg-colorBiege .h2-line::after{content: '';position: absolute;background-color:rgb(0, 0, 0) ;width: 300px;height: 1px;top: 32px; margin-left: 10px;} */



/* contact */
.contact h3 { color:#764d25
; margin-top: 30px; }
.contact p { color:#edcc94; opacity: 0.8; font-weight: 500; }
  
  .form-control { margin-top: 10px; padding-top: 12px; padding-bottom: 12px; color:#888888; }
 
  form.CUS input.subject { display: none; }
input.new-diagonal {
  background-color: #dac8aa;
  color: white;
  font-size: 1em;
  font-weight: 600;
   transition: 1s;
    letter-spacing: 1px;
}
input.new-diagonal:hover {
  background-color: black;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  transition: 1s;
}


/* section6*/
.section6{background-attachment: fixed;background-size: cover; background-position: right center;}
.contact{background-color: white; box-shadow: 0px 0px 8px rgb(182, 182, 182);margin-top: -100px; border-top-right-radius: 20px;border-top-left-radius: 20px;}
.coupon{position: relative;}
.couponFloat{position: absolute; left:45%; top: 30%; }
.map{margin-bottom: 70px;}



/* footer */
.bg-footer{background-color: #000000;}
.footer p {color: #fff;}
.footer i{color: #edcc94 ;}
.footer a{text-decoration: none;}
.footer span{color: #edcc94;}
.footer p strong{color: #edcc94; font-size: 1.5em; }

.footer #arrow {font-size: 20px;}
.btn-primary{background-color:  rgba(0, 0, 0, .2) ; width: auto; margin: 5px; border: solid 1px  #edcc94 ;}
.btn-sm{ width: 150px;}
.btn-primary:hover{ border: solid 1px  #3a5863 ; background-color: #edcc94  ;}
.logo-obacity{opacity: .3;}
.zip { padding-bottom: 10px 0 10px 0; opacity: .6;margin-top: 30px;}
.zip strong, #year{ color: #edcc94  ; font-size: 1.3em;}
.copyright{color: white;}
.data{position: relative; border-right: 1px solid  #edcc94;}
.footer-icon{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.footer-icon img {width: 100%;}
.text-color{color:  #edcc94 !important;}










@-webkit-keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}






@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}




@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}




@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}





@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}



@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(.5, .5, .5);
        transform: scale3d(.5, .5, .5);
    }
    50% {
        -webkit-transform: scale3d(1.3, 1.3, 1.3);
        transform: scale3d(1.3, 1.3, 1.3);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
} 




@media (max-width: 1200px)
 { 
  .outline{width: 30%;}
  .floating{width: 30%; position: absolute; top: 170px; left: 200px;}
  .sec1-p {width: 70%;}
  .tech-area{width: 90%;}
  .col-static p{font-size: 1em;}
}
@media (max-width: 1000px)
 { 
  .headTitle{width: 90%;}
  .headPhoto{width: 90%;margin-right: 0;padding-top: 50px; }
  .col-static p{font-size: 1em;}
  .section2 .h2-line::before{display: none;}
  .h2-line::after, .section2 .h2-line::after, .section4 .h2-line::after, .section3 .h2-line::after{width: 300px}
  .section5{padding-left: 20px;}
  .pricesArea, .pricesText{width: 90%;padding-left: 3%;}
}


@media (max-width: 992px)
 { 
    .section1{padding-top: 0;margin-top: 10px;}
    .outline{width: 80%; margin-left: 10%;}
  .floating{ width: 50%;position: absolute; top: 200px; left: 0%;}
  .floating img{width: 90%;}
  .sec5Text{width: 70%; padding-top: 40px;}
  .sec1-p {width: 100%;margin-top: 150px; padding-left: 5%;}
  .services{width: 40%; margin-top: 20px; }
  .coupon{width: 80%; margin-left: auto; margin-right: auto;margin-top: 50px;}
   .coupon img{width: 100%; }
   .contact{width: 100%;}
   .contact-input{width: 100%;}
   .footer-icon img {width: 40%;}
   .pricesText{width: 100%;}
   .pricesArea{width: 100%;}
   .tech-area{width: 90%;}



}
@media (max-width: 850px)
 { 
  h2::before{display: none}
.section1{width: 90%;}
    .navbar-nav {align-items: end;}

    .contact-inside {
        width: 100%;
        border: none;
      }
      .message {
        width: 100%;
      }
   h2{margin-left: 0px;}
   .tech-area2{display:block;width:60%}
   .tech-area{display:none;}




}

@media (max-width: 770px)

 {  
  .repair{ top:-100px; right: 0px; width: 30%;} 
.repair2{ bottom:80px; left: -50px; width: 40%;} 
.couponText{width: 90%; padding: 0; margin: 0;}
     .services{width: 70%; margin-top: 20px; }
     .before{margin-top: 10px;}
    .after{margin-top: 70px;}
    .footer-icon img {width: 50%;}
    .sect4-Float{top: 500px; right: 20px; width: 50%;}
    .h2-line::after, .section2 .h2-line::after, .section4 .h2-line::after, .section3 .h2-line::after{width: 100px}
   

}


@media (max-width: 580px)

 { 
  .navbar-brand{margin-left: -50px;}
    .tech-area2{width: 80%;}
    .coupon{margin-left: 0; margin-right: 0; width: 100%;}
    .arrow{display: none;}
    }