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

/* Top nav */
.fa-square-phone{font-size:1.3rem ;color:#eea653;}
.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 {color:  #1a1a1a; font-weight: 600; background-color:rgba(255, 255, 255, 0.2); }
  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}

    /* text-decoration-line: underline;} */

.dropdown:hover .dropdown-content {display: block;}
/* .nav-gradient{ background-color: #eea653 ;  -webkit-background-clip: text; -webkit-text-fill-color: transparent;} */
.navbar-nav {align-items: center; }
.nav-link{color:white;font-size: .9em; margin-left: 20px;padding: 14px 16px; }
/* .nav-link:hover{color: #292929} */
.nav-link {color:white;}
.nav-link span{color:#eea653;font-size: 1.5em;font-weight: 600;}
.nav-link span:hover{color: #1a1a1a; }

/* .nav-link strong:hover{color:#3b3b3b;} */
.nav-item{text-align: start;font-size: 1.1rem;}
.navbar-toggler{background-color: #363636; opacity: .6; z-index: 1;}
#phone-number{color: #eea653; font-size: 1.4em;letter-spacing: 8px;}
.phone{margin-top: -45px;}
.phone a{text-decoration: none;}
header i{padding-top: 5px;color: #c4c4c4 ;}


/* hero */
.hero{background-size: cover;background-position: center center;height:100vh; background-attachment: fixed; }
h1{color: rgb(65, 65, 65);}
.text-gradient { color: #64b6c9; font-size: 1.2em; font-weight: 550;}
/* .heroText{align-items: center;} */
.heroText p{color: white; opacity: .5; position: relative;}
.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;}
.headTitle {background-color:rgba(255,255,255,1);padding: 20px; position: absolute; left: 17%; top: 25%;}
.headAbstract{padding: 20px; position: absolute; left: 20%; bottom: 12%;}
.headSquare{background-color: rgb(238, 238, 238);padding: 30px;}
.headPhoto{padding-right: 15%;}





.btn-1, .btn-2 {
    position: relative;
    display: inline-block;
    height: 30x;
    text-align: center;
    line-height: 30x;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    box-sizing: border-box;
    background: linear-gradient(90deg, #64b6c9,#388a9c, #116d80, #388a9c);
    background-size: 400%;
   border-radius:0px;
    z-index: 1;
    align-items: center;
    width: 100%;
  }
  .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, #64b6c9,#388a9c, #116d80, #388a9c);
    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:#eea653;}




/* section2 */
.section2{ margin-top: 80px;background-size: cover; background-position: center; background-repeat: no-repeat;}
.services{padding-top: 20px; transition: 1s;opacity: .6;}
.services2{padding-top: 70px; transition: 1s;opacity: .6;}
.services img, .services2 img{ border-bottom:#388a9c  10px solid;/* 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;  }

.services3{ box-shadow: 1px 3px 9px  #3a3a3a; opacity: 1;border-top: 5px solid #388a9c; ;border-left: none;padding-top: 20px; transition: 1s; }
.services3 img, .services4 img{ border-bottom:#388a9c  10px solid}
.services4{ box-shadow: 1px 3px 9px  #3a3a3a; opacity: 1;border-top: 5px solid #388a9c; ;border-left: none;padding-top: 70px; transition: 1s; }

.services5{ box-shadow: 1px 3px 9px  #3a3a3a; opacity: 1;border-top: 5px solid #388a9c; ;border-left: none;transition: 1s; }
.services:hover img, .services2:hover img{ filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transform: scale(1.01);}  

.services:hover, .services2:hover{ box-shadow: 1px 3px 9px  #3a3a3a; opacity: 1;border-top: 5px solid #388a9c; ;border-left: none;}

.section2 h2{color: white;}
h5{color:  #ffffff; font-size: 1.5em; }
.services:hover h5, .services2:hover h5, .services3:hover h5, .services4:hover h5{font-size: 2em;transition: 1s; color:#eea653; 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;}




.services2:hover .services3 img, .services:hover .services3 img { }

  


/* 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: 150px;} 
.repair2{position: absolute; bottom:80px; left: 50px;} 
.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:  #ffffff;}
.section4 p {color:white ;}
.section4 h2::before{display: block; position: absolute;content: ""; background-image:url(../img/logo-icon.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; bottom: -30px; right: 170px;}
.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{background-size: cover;background-position:center;}
.pricesParent h3{ color:white ; font-size:2.5em; opacity: .7;}
.pricesParent h2{ color:#ffffff; }
.pricesParent h4{ color:white ; font-weight: 600;}
.pricesArea i{font-size: 2.4em; margin-bottom: px; color:#eea653 ;}
.pricesArea:hover i{ color:rgb(43, 43, 43) ;}
.choose{background-color :rgba(255, 255, 255, 0.3);  padding-top: 20px;padding-bottom: 20px;border-bottom: 5px solid #eea653;}
.choose:hover{ padding-top: 80px;padding-bottom: 50px; transition: .7s;background-color :rgba(100, 182, 201, .7);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(90deg, #64b6c9,#388a9c, #116d80, #388a9c);
  -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:#eea653 ;}
.section5 #FlipX{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);}
  .bg-colorBiegeGray{background-color: #dbdbdb;}
  /* .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:#eea653; opacity: 0.8; font-weight: 500; } */
  form{ border-top: 1px solid #eea653;}
 .form-control {padding: 10px 20px;margin-bottom: 20px;border-top: 0; border-color: #eea653;background-color: rgba(255, 255, 255, 0.4); color: white;border-bottom: 3px solid #eea653;}
.send {background-color:  #116d80;color: white; padding:6px 50px;border: none; font-size: x-large; }
.send:hover {background-color: #eea653; transition: .5s;}
.form-control::placeholder{color: white ;}
form h3{color:  #eea653;}
  form.CUS input.subject { display: none; }
input.new-diagonal {
  background-color: #eea653;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  color: rgb(0, 0, 0);
  font-size: 1.2em;
  font-weight: 600;
   transition: 1s;
    letter-spacing: 1px;
}
input.new-diagonal:hover {
  background-color: transparent;
  color: #eea653;
  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; padding-left: 8%;padding-right: 8%;}
.contact2{background-color: rgb(238, 238, 238); box-shadow: 0px 0px 8px rgb(182, 182, 182);margin-top: -100px; border-top-right-radius: 20px;border-top-left-radius: 20px; padding-left: 8%;padding-right: 8%;}
.form-control2 {padding: 10px 20px;margin-bottom: 20px;border-top: 0; border-color: #116d80;background-color: rgba(255, 255, 255, 1); color: rgb(184, 184, 184) ;border-bottom: 3px solid  #116d80;}
.form-control2::placeholder{color: rgb(184, 184, 184) ;}
.coupon{position: relative;}
.couponFloat{position: absolute; left:45%; top: 30%; }
.map{margin-bottom: 70px;}



/* footer */
.bg-footer{background-position: center top; background-repeat: no-repeat; background-size: cover;}
.bg-footer h2{color: white;}
.bg-footer{background-color: #000000;}
.footer p {color: #fff;}
.footer i, .bg-footer i{color: #eea653 ;  }
.footer a{text-decoration: none;}
.footer span{color: #eea653;}
.footer p strong{color: #eea653; font-size: 1.5em; }
.bg-footer a {color: #eea653;}
.footer #arrow {font-size: 20px;}
.btn-primary{background-color:  rgba(0, 0, 0, .2) ; width: auto; margin: 5px; border: solid 1px  #eea653 ;}
.btn-sm{ width: 150px;}
.btn-primary:hover{ border: solid 1px  #3a5863 ; background-color: #eea653  ;}
.logo-obacity{opacity: .3;}
.zip { padding-bottom: 10px 0 10px 0; opacity: .6;margin-top: 30px;}
.zip strong, #year{ color: #eea653  ; font-size: 1.3em;}
.copyright{color: white;}
.data{position: relative; border-right: 1px solid  #eea653;}
.footer-icon{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.footer-icon img {width: 100%;}
.text-color{color:  #eea653 !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: 1350px)
 { .headAbstract{padding: 20px; position: absolute; left: 50%; bottom: 8%;}
.headTitle{width: 30%; left: 10%; top: 30%;}
.headPhoto{padding-right: 10%;}

}

@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;}
  .col-static .btn-1 {width: 70%;}
  .headAbstract {width:50%}
  .btn-1 strong{ font-size: large;  }
}
@media (max-width: 1000px)
 { 
  .headTitle{width:40%;}
  .headPhoto{width: 80%;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, .services2, .services3, .services4{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%;}
   .dropdown-content {
     top: 0; right: 63%;
    background-color:rgba(255, 255, 255, 1);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 11;
  }
  .dropdown-content a {
    color: #388a9c;
    
  }
  .navbar-nav {
    align-items: end;

  }

}
@media (max-width: 850px)
 { .btn-1 strong{ font-size: x-large;  }
  .headTitle{width:60%;top: 22%;}
  .headPhoto{width: 90%;margin-right:6%;padding-top: 250px;  z-index: 1;}
  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)

 {  .btn-1 strong{ font-size: large;  }
  .repair{ top:-100px; right: 0px; width: 30%;} 
.repair2{ bottom:80px; left: -50px; width: 40%;} 
.couponText{width: 90%; padding: 0; margin: 0;}
     .services, .services2, .services3, .services4{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)

 {     .sect4-Float{display: none;}
 .headPhoto{padding-top: 300px; }

  .navbar-brand{margin-left: -50px;}
    .tech-area2{width: 80%;}
    .coupon{margin-left: 0; margin-right: 0; width: 100%;}
    .arrow{display: none;}
    .navbar-nav { position: absolute; z-index: 3; right: -15%;}
    }
    @media (max-width: 580px)

    {     .col-static p, .col-static img {display: none;}
       }
   
   

    @media (max-width: 460px)

 {.navbar-brand{width: 80%;}
 .btn-1 strong{ font-size: medium;  }
 .col-static p{ font-size: .9em;}

 }