File: /var/www/html/WPProfessionalCleaning/wp-content/themes/professional-cleaning/scss/home2.scss
@import 'partials';
.banner-slider-wrap{position: relative;
.banner-slider{ margin: 0; padding: 0;
.slick-slide{position: relative;
@media($sm-767){padding: 120px 0;}
&:before{
@media($sm-1199){position: absolute; inset: 0; content: ''; background:rgba(0,0,0,.4);}
}
}
.custom-container{position: relative; z-index: 1;}
.slide-1{background:#000 url(../img/banner-image.png) no-repeat top center / cover;}
.content{ max-width:530px; height: 980px; display: flex; justify-content: center; flex-direction: column;
@media($sm-1679){ height: 700px;}
@media($sm-1199){ height: 590px;}
@media($sm-991){ height: 480px;}
@media($sm-767){height: auto;}
.title{ color: #FFFFFF; margin: 0; padding: 0 0 10px 0; position: relative; line-height: 1.4;
span{ font-weight: 700;}
.img{position: absolute; width: 46px; height: 46px; right:30px; top:-30px;}
&::after{top: -20px;}
}
.para{ color: #FFFFFF; margin: 0; padding: 0 0 50px 0;
@media($sm-1679){font-size: 16px;}
@media($sm-991){padding-bottom: 20px;}
}
.button-wrap{
.white-btn{display: block; display: flex; width: 266px; height: 62px; border-radius: 30px; background: #FFFFFF; padding: 15px 20px; align-items: center; justify-content: space-between;
@media($sm-1679){
height: 53px;
}
@media($sm-1441){width: 230px;}
@media($sm-991){
height: 47px;
}
span{font-size: 18px; color: #001681; font-weight: 700;
@media($sm-1679){font-size: 18px;}
@media ($sm-1441){
font-size: 16px;
}
@media($sm-991){
font-size: 14px;
}
}
img{
@media ($sm-1199){max-width: 18px;}
}
}
}
}
}
.scroll{position: absolute; inset:auto 0 60px 0; margin: auto; z-index: 9; max-width: 100px;
@media($sm-991){bottom: 40px;}
.link{display: flex; align-items: center; justify-content: center;flex-direction: column; }
.img{ margin: 0 0 10px 0;
@media($sm-1679){max-width: 18px;}
}
.txt{color: #FFFFFF; font-size: 12px; font-weight: 300;
@media($sm-1679){font-size: 10px;}
}
}
.slick-arrow{ position: absolute; inset:auto 0 60px 1360px ; margin: auto; width: 42px; height: 42px; z-index: 9999; transform: inherit;
@media($sm-1679){left: 1260px; }
@media($sm-1441){left:1060px}
@media($sm-1199){left:885px}
@media($sm-991){left:645px; bottom: 5px;}
@media($sm-767){left:505px}
@media($sm-579){left:395px}
@media($sm-479){display: none;}
svg{
@media($sm-1679){width:38px; height: 38px;}
@media($sm-1199){width:34px; height: 34px;}
@media($sm-767){width: 25px; height: 25px;}
}
&.slick-prev{transform: translateX(-60px);
@media($sm-1199){transform: translateX(-45px);}
@media($sm-767){transform: translateX(-35px);}
}
&.slick-next{transform: rotate(180deg);}
&:before{display: none;}
svg{transition: all 0.5s ease;
path{transition: all 0.5s ease;}
}
&:hover{
svg{background: #ffde59; border-radius: 50%;
path{stroke: #000;}
}
}
}
.slick-dots{display: flex; padding: 0; margin:0 auto; gap:20px; max-width: 1400px; inset:auto 0 80px 0; z-index: 9999;
@media($sm-1679){max-width: 1290px; gap: 10px;}
@media($sm-1441){ max-width: 1110px;}
@media($sm-1199){ max-width: 930px;}
@media($sm-991){ max-width: 690px; bottom:18px;}
@media($sm-767){ max-width: 550px;}
@media($sm-579){ max-width: 450px;}
@media($sm-479){ max-width: 100%; margin: 0 0 0 0; padding: 10px; justify-content: center; flex-wrap: wrap; bottom: 0; gap: 5px;}
li{ width: 50px; height: 5px; background: #ffde59; border-radius:10px; padding: 0; margin: 0; list-style: none; opacity: .6;
@media($sm-1679){width: 40px; height: 3px;}
@media($sm-479){width: 30px;}
&.slick-active{ opacity: 1;}
button{ display: none;
&::before{display: none;}
}
}
}
}
.gutter-wrap{padding: 175px 0 155px 0;
@media($sm-1679){ padding: 100px 0;}
@media($sm-1199){ padding: 50px 0;}
@media($sm-767){ padding: 30px 0;}
.img{}
.content{max-width: 570px; padding-bottom: 20px;
@media($sm-1441){max-width: 100%;}
.title{padding-bottom: 20px;}
}
.button-wrap{ display: flex; gap: 20px; padding-top: 20px;
@media($sm-579){
flex-wrap: wrap;
}
@media($sm-479){gap: 10px;}
.btn-white,.btn-yellow{
@media($sm-1679){
height: 53px;
}
@media($sm-991){
height: 47px;
}
span{color: #001681; font-size: 20px;
@media($sm-1679){font-size: 18px;}
@media ($sm-1441){
font-size: 16px;
}
@media($sm-991){
font-size: 14px;
}
}
img{
@media ($sm-1199){max-width: 18px;}
}
}
.btn-white{ border: 1px solid #EEEEEE; background: #ffffff; min-width: 206px; display: flex; align-items: center; justify-content: space-between; border-radius: 30px; padding: 10px 25px;
@media ($sm-1199){min-width: 180px;}
@media($sm-479){ min-width: 100%;}
}
.btn-yellow{ background: #FFDE59; min-width: 330px; display: flex; align-items: center; justify-content: space-between; border-radius: 30px; padding: 10px 25px;
@media($sm-1679){min-width: 250px;}
@media ($sm-1199){min-width: 200px;}
@media($sm-479){ min-width: 100%;}
span{font-weight: 700; }
}
}
.figure-img{position: relative; margin: 0; padding: 0; border-radius: 30px; overflow: hidden;
@media ($sm-1199){margin: 20px auto 0 auto; max-width: 75%;}
@media($sm-767){border-radius: 20px;}
@media($sm-479){max-width: 80%;}
&:after{width: 42px; height: 509px; background: #FFF2BF; border-radius:0 20px 20px 0; position: absolute; top: 0; bottom: 0; right:-42px; content: ''; margin: auto; pointer-events: none;}
}
}
.power-wash-wrap{ background: #000000 url(../img/powerwash-bg.png) no-repeat top center / cover; min-height: 890px; display: flex; align-items: center; position: relative; padding: 30px 0;
@media($sm-1679){min-height: 800px;}
@media($sm-1441){min-height: 720px;}
@media($sm-767){min-height: 600px;}
.custom-container{}
.title{ color: #FFFFFF; padding-bottom: 20px;}
.para{color: #ffffff;}
.button-wrap{ display: flex; gap: 20px; padding-top: 20px;
@media($sm-579){
flex-wrap: wrap;
}
.btn-trans,.btn-white{ height: 62px; display: flex; align-items: center; justify-content: space-between; border-radius: 30px; padding: 10px 25px;
@media($sm-1679){
height: 53px;
}
@media($sm-991){
height: 47px;
}
img{
@media ($sm-1199){max-width: 18px;}
}
span{font-size: 20px;
@media($sm-1679){font-size: 18px;}
@media ($sm-1441){
font-size: 16px;
}
@media($sm-991){
font-size: 14px;
}
}
}
.btn-trans{ border: 1px solid #FFDE59; background: none; min-width: 206px;
@media($sm-991){min-width: 200px;}
@media($sm-479){ min-width: 100%;}
span{color: #ffffff; }
}
.btn-white{ background: #FFFFFF; min-width: 330px;
@media($sm-1679){min-width: 270px;}
@media($sm-991){min-width: 200px;}
@media($sm-479){ min-width: 100%;}
span{color: #001681; font-weight: 700; }
}
}
&:after{max-width: 1400px; height: 22px; background:#FFDE59; border-radius:0 0 20px 20px; position: absolute; left: 0; bottom: -22px; right:0; content: ''; margin: auto; pointer-events: none;
@media($sm-1679){max-width: 1290px;}
@media($sm-1441){ max-width: 1110px;}
@media($sm-1199){ max-width: 930px;}
@media($sm-991){ max-width: 690px;}
@media($sm-767){ max-width: 550px;}
@media($sm-579){ max-width: 450px;}
@media($sm-479){ max-width: 100%; margin: 0 15px;}
@media($sm-767){
height: 10px;
bottom: -10px;
}
}
}