File: /var/www/html/WPSassoon/wp-content/themes/sassoon/scss/contact-us.scss
@import 'partials';
.inner-banner{ background-color: #32327A; background-size: cover; background-position: center; background-repeat: no-repeat; height: 595px;
@media($sm-1199){
height: 520px;
}
@media($sm-991){
height: 500px;
}
@media($sm-767){
height: 480px;
}
@media($sm-579){
max-width: 100%;
height: 450px;
}
.align-center{display: flex; align-items: center; height: 100%;}
.contents{ max-width: 1150px;
@media($sm-1481){
max-width: 70%;
}
@media($sm-1199){
max-width: 65%;
}
@media($sm-767){
padding-top: 30px;
}
@media($sm-579){
max-width: 100%;
padding-top: 30px;
}
}
.subtitle{ font-weight: 600; font-size: 23px; line-height: 1.2; color: #fff; padding-bottom: 40px;
@media($sm-1679){
font-size: 20px;
padding-bottom: 30px;
}
@media($sm-1481){
font-size: 18px;
}
@media($sm-1199){
font-size: 16px;
padding-bottom: 15px;
}
}
.main-title{ color: #fff; font-weight: 700; font-size: 46px; line-height: 1.2; padding-bottom: 20px;
@media($sm-1679){
font-size: 40px;
line-height: 46px;
}
@media($sm-1481){
font-size: 36px;
line-height: 44px;
}
@media($sm-1199){
font-size: 34px;
line-height: 42px;
}
@media($sm-991){
font-size: 28px;
line-height: 40px;
}
@media($sm-767){
font-size: 26px;
line-height: 38px;
}
@media($sm-579){
font-size: 24px;
line-height: 34px;
}
}
.content{font-weight: 400; font-size: 18px; line-height: 1.6; color: #fff; max-width: 1000px;
@media($sm-1679){
font-size: 16px;
line-height: 28px;
}
@media($sm-1481){
font-size: 14px;
line-height: 26px;
margin: 0px;
}
}
&.contact-banner{background-image: url(../img/contact-banner-bg.png); }
.btn-sec{
.round-btn{
height: 41px;
font-weight: 700;
font-size: 12px;
line-height: 14.52px;
letter-spacing: 0%;
width: 160px;
}
}
}
.map{
height: 734px;
@media($sm-1679){
height: 680px;
}
@media($sm-1481){
height: 600px;
}
@media($sm-1199){
height: 550px;
}
@media($sm-991){
height: 400px;
}
@media($sm-767){
height: 250px;
}
iframe{
width: 100%;
height: 100%;
}
}
.contact-form{
padding: 95px 0px;
@media($sm-1679){
padding: 80px 0px;
}
@media($sm-1481){
padding: 60px 0px;
}
@media($sm-1199){
padding: 40px 0px;
}
.contact-form-inner{
display: flex;
@media($sm-767){
flex-wrap: wrap;
}
}
.contact-left{
width: 485px;
background: #DFDFF6;
padding: 63px 32px 0px 53px;
border-radius: 30px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
position: relative;
// background-image: url('../img/contact-side-img.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
@media($sm-1199){
width: 40%;
padding: 20px;
}
@media($sm-767){
border-radius: 30px !important;
margin-bottom: 15px;
width: 100%;
padding: 20px;
}
&::after{
content: "";
position: absolute;
bottom: 0;
background-image: url('../img/contact-left-img.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 754px;
width: 100%;
left: 0;
z-index: 9;
@media($sm-1199){
height: 521px;
}
@media($sm-767){
display: none;
}
}
}
.icon-box{
display: flex;
background: #FFFFFF;
padding: 26px;
border-radius: 10px;
align-items: center;
margin-bottom: 20px;
position: relative;
z-index: 99;
@media($sm-1679){
padding: 22px;
}
@media($sm-1481){
padding: 20px;
}
@media($sm-1199){
padding: 18px;
}
@media($sm-991){
padding: 15px;
z-index: 1;
}
.icons{
width: 83px;
height: 83px;
border-radius: 60px;
box-shadow: 0px 10px 50px 0px #EBEBFC;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 20px;
@media($sm-1679){
width: 70px;
height: 70px;
img{
width: 40px;
height: 40px;
object-fit: contain;
}
}
@media($sm-1481){
width: 60px;
height: 60px;
img{
width: 35px;
height: 35px;
object-fit: contain;
}
}
@media($sm-1199){
width: 40px;
height: 40px;
img{
width: 25px;
height: 25px;
object-fit: contain;
}
}
@media($sm-991){
margin-right: 10px;
}
}
.label-text{
color: #2E2E78CC;
font-weight: 400;
font-size: 17px;
line-height: 27px;
letter-spacing: 0%;
color: #2E2E78CC;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1481){
font-size: 14px;
}
.mail-sec{
color: #2E2E78CC;
}
}
}
.contact-rt{
background: #F0F0FF;
flex: 1;
padding: 70px 60px;
border-radius: 14px;
margin-left: -10px;
z-index: 99;
@media($sm-1199){
padding: 20px;
z-index: 9;
}
@media($sm-767){
margin-left: 0px;
padding: 20px;
}
.title-sec{
padding-bottom: 45px;
@media($sm-1679){
padding-bottom: 35px;
}
@media($sm-1481){
padding-bottom: 25px;
}
.title1{
font-family: $secondary-font;
font-weight: 400;
font-size: 38px;
line-height: 59px;
letter-spacing: 0%;
@media($sm-1679){
font-size: 36px;
line-height: 44px;
}
@media($sm-1481){
font-size: 34px;
line-height: 42px;
}
@media($sm-1199){
font-size: 28px;
line-height: 40px;
}
@media($sm-991){
font-size: 26px;
line-height: 38px;
}
@media($sm-767){
font-size: 24px;
line-height: 34px;
}
@media($sm-579){
font-size: 22px;
line-height: 32px;
}
}
.inner-titel{
font-weight: 400;
font-size: 17px;
line-height: 36px;
letter-spacing: 0%;
color: #080836;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1481){
font-size: 14px;
line-height: 22px;
}
}
}
.form-label{
color: #2F2F78;
font-weight: 400;
font-size: 22px;
line-height: 26.63px;
padding-bottom: 30px;
letter-spacing: 0%;
margin: 0;
@media($sm-1679){
font-size: 22px;
padding-bottom: 20px;
}
@media($sm-1481){
font-size: 20px;
padding-bottom: 15px;
}
@media($sm-1199){
font-size: 18px;
}
@media($sm-991){
font-size: 16px;
}
@media($sm-767){
font-size: 14px;
}
}
.form-control{
height: 70px;
box-shadow: 0px 4px 4px 0px #E2E2FF;
background: #FFFFFF;
font-weight: 400;
font-size: 16px;
line-height: 19.36px;
letter-spacing: 0%;
color: #9696CF;
display: flex;
align-items: center;
border-radius: 8px;
&::placeholder{
color: #9696CF;
}
&:focus{
box-shadow: none;
outline: none;
;
}
&.form-textarea{
height: 154px;
}
@media($sm-1679){
height: 60px;
font-size: 14px;
}
@media($sm-1481){
height: 50px;
}
}
.input-group-text{
width: 66px;
box-shadow: 0px 4px 4px 0px #E2E2FF;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
@media($sm-1679){
width: 56px;
img{
width: 20px;
object-fit: contain;
}
}
@media($sm-991){
width: 40px;
img{
width: 15px;
flex-shrink: 0;
}
}
}
.btn-sec{
display: flex;
justify-content: space-between;
padding-top: 0px;
padding-bottom: 40px;
.btn{
width: 49%;
background: #ADADC6;
height: 70px;
font-weight: 700;
font-size: 18px;
line-height: 21.09px;
letter-spacing: 0%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
&.btn-send {
background-color: #262677;
}
@media($sm-1679){
font-size: 16px;
height: 60px;
}
@media($sm-1481){
font-size: 14px;
height: 50px;
}
@media($sm-991){
height: 40px;
}
}
}
.privacy-text{
font-weight: 400;
font-size: 19px;
line-height: 22.27px;
letter-spacing: 0%;
color: #2F2F78;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1481){
font-size: 14px;
}
}
.input-sec{
margin-bottom: 60px;
@media($sm-1679){
margin-bottom: 50px;
}
@media($sm-1481){
margin-bottom: 40px;
}
@media($sm-1199){
margin-bottom: 30px;
}
@media($sm-991){
margin-bottom: 20px;
}
}
}
}