@import 'partials';
.elevate-page-outer{
.elevate-bnr-sec{
padding: 250px 15px 100px;
background-image: url('../img/elevate-bg.png');
background-size: cover;
@media ($sm-1679) {
padding: 200px 15px 80px;
}
@media ($sm-991) {
padding: 150px 15px 60px;
}
@media ($sm-767) {
padding: 120px 15px 60px;
}
.bnr-container{
@media (min-width: 1679px) {
max-width: 1400px;
}
}
.elevate-bnr-wrapper{
@media ($sm-767) {
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.txt-block{
padding-top: 50px;
text-align: center;
max-width: 80%;
padding-right: 20px;
@media ($sm-1679) {
padding-top: 30px;
}
@media ($sm-1481) {
padding-top: 0;
}
@media ($sm-767) {
max-width: 100%;
padding-right: 0;
order: 2;
}
h2{
color: #523170;
font-size: 64px;
font-weight: 600;
font-family: $cooper-font;
margin-bottom: 5px;
@media ($sm-1679) {
font-size: 54px;
}
@media ($sm-1481) {
font-size: 44px;
}
@media ($sm-1199) {
font-size: 38px;
}
@media ($sm-991) {
font-size: 32px;
}
@media ($sm-579) {
font-size: 28px;
}
}
h6{
font-size: 30px;
color: #523170;
font-family: $circular-font;
margin-bottom: 45px;
@media ($sm-1679) {
font-size: 26px;
margin-bottom: 30px;
}
@media ($sm-1481) {
font-size: 23px;
margin-bottom: 25px;
}
@media ($sm-1199) {
font-size: 21px;
}
}
.wth-txt{
text-align: center;
margin-bottom: 35px;
font-weight: 600;
@media ($sm-767) {
margin-bottom: 25px;
}
span{
display: inline-block;
background-color: #E3BDC3;
padding: 10px 25px;
border-radius: 35px;
font-size: 19px;
color: #221E1F;
font-family: $cooper-font;
@media ($sm-1679) {
font-size: 17px;
}
@media ($sm-1481) {
font-size: 16px;
}
}
}
h4{
font-weight: 400;
color: #523170;
font-size: 38px;
font-family: $circular-font;
margin-bottom: 60px;
@media ($sm-1679) {
font-size: 30px;
margin-bottom: 40px;
}
@media ($sm-1481) {
font-size: 26px;
margin-bottom: 30px;
}
@media ($sm-1199) {
font-size: 24px;
margin-bottom: 30px;
}
@media ($sm-991) {
font-size: 21px;
margin-bottom: 25px;
}
@media ($sm-767) {
font-size: 19px;
margin-bottom: 20px;
}
}
.btn-block{
text-align: center;
margin-bottom: 40px;
@media ($sm-1481) {
margin-bottom: 30px;
}
.order-btn{
display: inline-block;
text-decoration: none;
padding: 20px 55px;
border-radius: 50px;
background-color: #fff;
color: #523170;
font-family: $cooper-font;
font-size: 29px;
font-weight: 600;
@media ($sm-1679) {
font-size: 24px;
padding: 15px 45px;
}
@media ($sm-1481) {
font-size: 22px;
padding: 12px 45px;
}
@media ($sm-1199) {
font-size: 20px;
padding: 12px 45px;
}
@media ($sm-991) {
font-size: 18px;
padding: 10px 45px;
}
}
}
p{
color: #523170;
font-family: $circular-font;
font-size: 22px;
max-width: 700px;
margin: 0 auto;
@media ($sm-1679) {
font-size: 19px;
}
@media ($sm-1481) {
max-width: 550px;
font-size: 17px;
}
@media ($sm-1199) {
max-width: 500px;
font-size: 16px;
}
}
}
.img-block{
margin-left: auto;
max-width: 450px;
@media ($sm-767) {
order: 1;
margin-left: unset;
}
img{
max-width: 100%;
@media ($sm-1679) {
max-height: 450px;
}
@media (max-width: 1400px) {
max-height: 400px;
}
@media ($sm-1199) {
max-height: 360px;
}
@media ($sm-767) {
max-height: 280px;
}
}
}
}
}
.how-work-sec{
padding: 100px 0;
background-color: #F6EEEE;
@media ($sm-1679) {
padding: 70px 0;
}
@media ($sm-579) {
padding: 50px 15px;
}
.how-title-block{
margin-bottom: 65px;
text-align: center;
@media ($sm-1679) {
margin-bottom: 45px;
}
span{
display: inline-block;
color: #523170;
font-size: 30px;
font-weight: 600;
font-family: $cooper-font;
padding: 20px 40px;
border-radius: 50px;
background-color: rgba($color: #E3BDC3, $alpha: 0.3);
@media ($sm-1679) {
font-size: 26px;
}
@media ($sm-1481) {
font-size: 23px;
}
@media ($sm-1199) {
font-size: 21px;
}
@media ($sm-579) {
font-size: 19px;
}
}
}
.how-card-block{
.elev-how-col{
margin-bottom: 30px;
&:nth-child(2), &:nth-child(3){
.elev-how-card{
background-color: #EED7DA;
}
}
}
.elev-how-card{
width: 100%;
height: 100%;
background-color: #E9C9D0;
border-radius: 50px;
padding: 70px 75px;
@media ($sm-1481) {
padding: 60px 65px;
}
@media ($sm-1199) {
padding: 40px 45px;
border-radius: 40px;
}
@media ($sm-479) {
padding: 20px 30px;
border-radius: 20px;
}
h4{
font-size: 40px;
font-weight: 500;
color: #523170;
font-family: $cooper-font;
margin-bottom: 20px;
@media ($sm-1679) {
font-size: 34px;
}
@media ($sm-1481) {
font-size: 28px;
}
@media ($sm-1199) {
font-size: 24px;
}
}
h6{
color: #6D4C81;
font-size: 30px;
font-family: $cooper-font;
font-weight: 500;
margin-bottom: 20px;
@media ($sm-1679) {
font-size: 26px;
}
@media ($sm-1481) {
font-size: 22px;
}
@media ($sm-1199) {
font-size: 20px;
}
}
p{
font-size: 20px;
color: #221E1F;
font-weight: 300;
font-family:$circular-font;
@media ($sm-1679) {
font-size: 18px;
}
@media ($sm-1481) {
font-size: 16px;
}
&:last-child{
margin-bottom: 0;
}
a{
display: inline-block;
color: #523170;
}
}
}
}
.order-book-block{
text-align: center;
padding-top: 30px;
margin-bottom: 40px;
@media($sm-991){
padding-top: 0px;
}
.order-book{
text-decoration: none;
display: inline-block;
background-color: #fff;
padding: 25px 50px;
border-radius: 50px;
font-size: 29px;
color: #523170;
font-family: $cooper-font;
font-weight: 600;
@media ($sm-1679) {
font-size: 25px;
padding: 20px 50px;
}
@media ($sm-1481) {
font-size: 22px;
}
@media ($sm-1199) {
font-size: 18px;
}
@media ($sm-579) {
font-size: 17px;
padding: 15px 50px;
}
}
}
.moment-block{
padding-top: 200px;
overflow: hidden;
@media ($sm-1199) {
padding-top: 140px;
}
@media ($sm-991) {
padding-top: 105px;
}
@media ($sm-991) {
padding-top: 100px;
}
.moment-line-block{
position: relative;
border-bottom: solid 1px #CD9FA9;
text-align: center;
z-index: 1;
&::after{
width: 360px;
height: 183px;
background-color: #F6EEEE;
background-image: url('../img/circle_half.svg');
background-repeat: no-repeat;
background-position: center bottom;
// background-size: contain;
content: '';
position: absolute;
left: 0;
right: 0;
top: -153px;
margin: 0 auto;
display: inline-block;
z-index: -1;
@media ($sm-1679) {
width: 280px;
height: 140px;
top: -138px;
background-size: contain;
}
@media ($sm-1199) {
width: 240px;
height: 130px;
top: -128px;
}
@media ($sm-991) {
width: 200px;
height: 120px;
top: -118px;
}
@media ($sm-767) {
width: 140px;
height: 80px;
top: -78px;
border-radius: 140px 140px 0 0;
}
}
}
.logo-block{
text-align: center;
position: relative;
z-index: 1;
img{
margin-top: -80px;
@media ($sm-1679) {
max-height: 135px;
}
@media ($sm-1199) {
max-height: 110px;
}
@media ($sm-991) {
margin-top: -50px;
max-height: 90px;
}
@media ($sm-767) {
margin-top: -50px;
max-height: 70px;
}
}
}
.txt-block{
padding-top: 25px;
.p-1{
font-family: $cooper-font;
font-weight: 600;
margin-bottom: 0;
}
p{
text-align: center;
color: #221E1F;
font-size: 30px;
font-family: $circular-font;
margin-bottom: 10px;
font-weight: 500;
@media ($sm-1679) {
font-size: 26px;
}
@media ($sm-1481) {
font-size: 22px;
}
@media ($sm-1199) {
font-size: 18px;
}
}
}
}
}
}