File: /var/www/html/wpcurated/wp-content/themes/curated/scss/intake-form.scss
@import 'partials';
// service-details styles
.sub-bnr{
width: 100%;
display: flex;
flex-direction: column;
position: relative;
height: 682px;
@media ($sm-1679){
height: 640px;
}
@media ($sm-1441){
height: 580px;
}
@media ($sm-1199){
height: 450px;
}
@media ($sm-991){
height: 350px;
}
&.intake-form-bnr{
background: url(../img/intake-bnr-bg.png) no-repeat center; background-position:center;
background-size: cover;
// overflow: hidden;
// .bnr-img{
// img{
// width: auto;
// max-width: unset;
// height: 836px;
// }
// }
}
.container{
display: flex;
align-items: center;
height: 100%;
}
.content-area{
max-width: 523px;
@media ($sm-1199){
max-width: 470px;
margin-right: 50px;
}
@media ($sm-991){
max-width: 450px;
margin-right: 50px;
}
@media ($sm-767){
max-width: 450px;
margin-right: 30px;
}
.title{
font-size: 62px;
line-height: 1;
font-weight: 500;
margin-bottom: 18px;
padding-bottom: 0;
color: #00124D;
@media($sm-1679){
font-size: 52px;
line-height: 48px;
}
@media($sm-1441){
font-size: 42px;
line-height: 45px;
margin-bottom: 10px;
}
@media($sm-1199){
font-size: 32px;
line-height: 40px;
}
@media($sm-991){
font-size: 28px;
line-height: 34px;
}
@media($sm-767){
font-size: 24px;
line-height: 30px;
}
span{
color: #014CB2;
}
}
.sub-para{
font-size: 18px;
line-height: 25px;
font-weight: 400;
color: #313646;
@media ($sm-1679){
font-size: 17px;
}
@media ($sm-1441){
font-size: 16px;
}
@media ($sm-1199){
font-size: 15px;
}
@media ($sm-991){
font-size: 14px;
}
}
}
.bnr-img{
width: 438px;
margin-left: auto;
margin-right: 40px;
position: relative;
display: flex;
align-items: flex-end;
@media ($sm-1679){
margin-right: 100px;
width: 380px;
}
@media ($sm-767){
margin-right: 0;
}
img{
max-width: 100%;
max-height: 586px;
object-position: bottom;
@media ($sm-1441){
max-height: 400px;
}
}
}
.video-sec{
flex: 1;
position: absolute;
right: 0px;
}
.bnt-txt-btm{
width: 100%;
position: absolute;
bottom: 0;
img{
width: 100%;
filter: brightness(3.5);
}
}
}
.intake-form-sec{
.intake-form-wrapper{
background: #FFFFFF;
border: 1px solid #AAB5C3;
border-radius: 40px;
padding: 60px;
position: relative;
margin-top: -80px;
margin-bottom: 140px;
@media ($sm-1679){
margin-top: -60px;
margin-bottom: 70px;
padding: 50px;
}
@media ($sm-1441){
padding: 40px;
margin-bottom: 60px;
}
@media ($sm-1199){
margin-top: -40px;
margin-bottom: 50px;
padding: 30px;
}
@media ($sm-579){
border-radius: 15px;
}
&::before{
content: "";
box-shadow: 0 0 25px 18px rgb(0 0 0 / 13%);
height: 47px;
position: absolute;
left: 10%;
right: 10%;
bottom: -1px;
border-radius: 51px;
z-index: -1;
}
.form-group{
margin-bottom: 65px;
position: relative;
@media ($sm-1679){
margin-bottom: 50px;
}
@media ($sm-1441){
margin-bottom: 45px;
}
@media ($sm-1199){
margin-bottom: 40px;
}
@media ($sm-767){
margin-bottom: 30px;
}
&.error{
.input-error-info{
position: absolute;
right: 30px;
top: 65px;
@media ($sm-1679){
top: 45px;
}
@media ($sm-767){
top: 40px;
}
img{
width: 23px;
@media ($sm-1679){
width: 20px;
}
@media ($sm-1441){
width: 17px;
}
}
}
.form-control{
border-color: #FF9C9C;
color: #FF0000;
}
}
.form-label{
font-size: 20px;
line-height: 1;
color: #203063;
margin-bottom: 10px;
@media ($sm-1679){
font-size: 18px;
}
@media ($sm-1441){
font-size: 17px;
}
@media ($sm-1199){
font-size: 16px;
}
@media ($sm-991){
font-size: 15px;
}
@media ($sm-579){
font-size: 14px;
}
}
.form-control{
padding: 29px 33px;
border: 1px solid #BCC5D3;
height: 82px;
border-radius: 14px;
font-size: 24px;
@media ($sm-1679){
font-size: 20px;
height: 55px;
padding: 25px 30px;
border-radius: 12px;
}
@media ($sm-1441){
font-size: 18px;
height: 50px;
}
@media ($sm-1199){
font-size: 16px;
height: 45px;
padding: 20px 25px;
}
@media ($sm-991){
font-size: 14px;
height: 40px;
}
@media ($sm-579){
font-size: 13px;
padding: 15px 20px;
border-radius: 8px;
}
}
.info-label{
color: #8A94B4;
font-size: 18px;
line-height: 1;
margin-top: 15px;
display: block;
position: absolute;
@media ($sm-1679){
font-size: 16px;
margin-top: 10px;
}
@media ($sm-1441){
font-size: 15px;
}
@media ($sm-1199){
font-size: 14px;
margin-top: 5px;
}
@media ($sm-579){
font-size: 13px;
}
&.error{
color: #FF0000;
}
}
}
.btn-blk{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 120px;
@media ($sm-1679){
margin-top: 100px;
}
@media ($sm-1441){
margin-top: 80px;
}
@media ($sm-1199){
margin-top: 60px;
}
@media ($sm-991){
margin-top:40px;
}
@media ($sm-767){
margin-top:10px;
flex-direction: column;
}
.btn-sec{
justify-content: end;
display: flex;
@media ($sm-767){
justify-content: space-between;
}
@media ($sm-479){
flex-direction: column;
}
.primary-btn{
background: #014CB2;
color: #fff;
margin-left: 19px;
img{
filter: brightness(0) saturate(100%) invert(100%) sepia(25%) saturate(65%) hue-rotate(37deg) brightness(107%) contrast(101%);
}
@media ($sm-767){
margin-left: 0;
}
@media ($sm-479){
width: 100%;
margin-top: 15px;
}
&.btn-cancel{
background: transparent;
color: #00124D;
border: 1px solid #BEC2D2;
img{
filter: brightness(0) saturate(100%) invert(17%) sepia(93%) saturate(2019%) hue-rotate(204deg) brightness(104%) contrast(105%);
}
}
}
}
}
}
}
.custom-radio-area{
display: flex;
flex-wrap: wrap;
margin-top: 30px;
@media ($sm-1679){
margin-top: 25px;
}
@media ($sm-1199){
margin-top: 20px;
}
@media ($sm-991){
margin-top: 15px;
}
@media ($sm-579){
margin-top: 10px;
}
@media ($sm-479){
flex-direction: column;
}
}
// custom radio style
.custom-radios{
position: relative;
margin-left: 50px;
padding-left: 62px;
font-size: 20px;
height: 42px;
display: flex;
align-items: center;
@media ($sm-1679){
font-size: 18px;
padding-left: 50px;
margin-left: 40px;
}
@media ($sm-1441){
font-size: 17px;
padding-left: 40px;
margin-left: 30px;
}
@media ($sm-1199){
font-size: 16px;
height: 28px;
margin-left: 20px;
}
@media ($sm-991){
font-size: 15px;
padding-left: 35px;
height: 24px;
margin-left: 15px;
}
@media ($sm-767){
font-size: 14px;
margin-left: 0px;
width: 48%;
margin-bottom: 20px;
}
@media ($sm-479){
width: 100%;
margin-left: 0px;
}
&:first-child{
margin-left: 0;
}
}
.custom-radios input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 42px;
width: 42px;
background-color: transparent;
border-radius: 50%;
border: 1px solid #C0C9E5;
cursor: pointer;
@media ($sm-1679){
width: 36px;
height: 36px;
}
@media ($sm-1441){
width: 30px;
height: 30px;
}
@media ($sm-1199){
width: 28px;
height: 28px;
}
@media ($sm-991){
width: 24px;
height: 24px;
}
}
/* On mouse-over, add a grey background color */
.custom-radios:hover input ~ .checkmark {
background-color: transparent;
border-color: #014CB2;
}
/* When the radio button is checked, add a blue background */
.custom-radios input:checked ~ .checkmark {
background-color: transparent;
border-color: #014CB2;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.custom-radios input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.custom-radios .checkmark:after {
top: 9px;
left: 9px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(180deg, #55E3FF 0%, #014CB2 100%);
@media ($sm-1679){
width: 16px;
height: 16px;
}
@media ($sm-1441){
width: 14px;
height: 14px;
top: 7px;
left: 7px;
}
@media ($sm-1199){
width: 15px;
height: 15px;
top: 6px;
left: 6px;
}
@media ($sm-991){
width: 13px;
height: 13px;
top: 5px;
left: 5px;
}
}
// custom radio style
// switch style
.switch-wrp{
display: flex;
align-items: center;
@media ($sm-767){
margin-bottom: 20px;
}
.txt{
color: #203063;
font-size: 20px;
margin-right: 15px;
@media ($sm-1679){
font-size: 18px;
}
@media ($sm-1441){
font-size: 16px;
}
@media ($sm-1199){
font-size: 15px;
}
@media ($sm-991){
font-size: 14px;
}
}
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 72px;
height: 37px;
@media ($sm-1679){
height: 30px;
width: 65px;
}
@media ($sm-1441){
height: 28px;
width: 60px;
}
@media ($sm-991){
height: 25px;
width: 60px;
}
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 5px;
background-color: #313646;
-webkit-transition: .4s;
transition: .4s;
@media ($sm-1679){
width: 20px;
height: 20px;
}
@media ($sm-1441){
width: 18px;
height: 18px;
}
@media ($sm-991){
height: 15px;
width: 15px;
}
}
input:checked + .slider {
background-color: transparent;
border: 1px solid #C0C9E5;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(36px);
-ms-transform: translateX(36px);
transform: translateX(36px);
@media ($sm-1441){
-webkit-transform: translateX(32px);
-ms-transform: translateX(32px);
transform: translateX(32px);
}
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
// switch style
// faq styles
.faq-sec{
background: url(../img/faq-blue-bg.png) no-repeat bottom right;
background-size: cover;
padding: 106px 0;
margin-bottom: 30px;
@media ($sm-1679){
padding: 100px 0;
}
@media ($sm-1441){
padding: 80px 0;
}
@media ($sm-1199){
padding: 60px 0;
}
@media ($sm-991){
padding: 50px 0;
}
@media ($sm-767){
padding: 40px 0;
}
.title-blk{
text-align: center;
.small-title-sec{
font-size: 24px;
font-weight: 600;
color: #55E3FF;
margin-bottom: 20px;
line-height: 1;
@media ($sm-1679){
font-size: 22px;
}
@media ($sm-1441){
font-size: 20px;
margin-bottom: 5px;
}
@media ($sm-1199){
font-size: 18px;
}
}
.title{
font-size: 62px;
line-height: 1;
font-weight: 500;
margin-bottom: 0px;
padding-bottom: 0;
color: #fff;
@media($sm-1679){
font-size: 52px;
line-height: 48px;
}
@media($sm-1441){
font-size: 42px;
line-height: 45px;
}
@media($sm-1199){
font-size: 32px;
line-height: 40px;
}
@media($sm-991){
font-size: 28px;
line-height: 34px;
}
@media($sm-767){
font-size: 24px;
line-height: 30px;
}
span{
color: #014CB2;
}
}
}
.faq-blk-wrp{
max-width: 1260px;
width: 100%;
margin: 0 auto;
counter-reset: section-counter; /* Resets the counter */
margin-top: 49px;
@media ($sm-1679){
margin-top: 40px;
}
@media ($sm-1441){
margin-top: 35px;
}
@media ($sm-1199){
margin-top: 30px;
}
@media ($sm-991){
margin-top: 25px;
}
.accordion{
background: transparent;
.accordion-item{
background-color: transparent;
border: none;
margin-bottom: 20px;
padding-right: 112px;
padding-left: 112px;
@media ($sm-1679){
padding-right: 97px;
padding-left: 97px;
}
@media ($sm-1441){
padding-right: 87px;
padding-left: 87px;
margin-bottom: 15px;
}
@media ($sm-1199){
padding-right: 77px;
padding-left: 77px;
}
@media ($sm-991){
padding-right: 67px;
padding-left: 67px;
margin-bottom: 10px;
}
@media ($sm-767){
padding-right: 57px;
padding-left: 57px;
}
}
.accordion-header{
background-color: transparent;
background: transparent;
display: flex;
height: 95px;
@media ($sm-1679){
height: 80px;
}
@media ($sm-1441){
height: 70px;
}
@media ($sm-1199){
height: 60px;
}
@media ($sm-991){
height: 50px;
}
@media (max-width:360px){
height: auto;
}
.accordion-button{
background-color: transparent;
background: #55E3FF26;
position: relative;
box-shadow: none;
outline: none;
color: #fff;
display: flex;
border-radius: 47px;
max-width: 1036px;
margin: 0;
padding: 29px 40px 29px;
font-weight: 400;
font-size: 26px;
@media ($sm-1679){
padding: 25px 35px;
font-size: 22px;
}
@media ($sm-1441){
padding: 25px 30px;
font-size: 20px;
}
@media ($sm-1199){
padding: 20px 25px;
font-size: 18px;
}
@media ($sm-991){
padding: 20px;
font-size: 16px;
}
@media (max-width:360px){
font-size: 15px;
border-radius: 10px;
}
&:not(.collapsed){
border-radius: 32px 32px 0 0;
@media ($sm-991){
border-radius: 20px 20px 0 0;
}
}
&::before{
counter-increment: section-counter; /* Increments the counter */
content: counter(section-counter, decimal-leading-zero); /* Displays the counter value */
width: 95px;
height: 95px;
border-radius: 95px;
border: 1px dashed #55E3FF;
display: flex;
align-items: center;
justify-content: center;
background: #55E3FF26;
flex-shrink: 0;
margin-right: 17px;
color: #fff;
font-size: 26px;
font-weight: 400;
position: absolute;
left: -112px;
@media ($sm-1679){
width: 80px;
height: 80px;
font-size: 24px;
left: -97px;
}
@media ($sm-1441){
height: 70px;
width: 70px;
font-size: 22px;
left: -87px;
}
@media ($sm-1199){
height: 60px;
width: 60px;
font-size: 20px;
left: -77px;
}
@media ($sm-991){
height: 50px;
width: 50px;
font-size: 18px;
left: -67px;
}
@media ($sm-767){
height: 40px;
width: 40px;
font-size: 16px;
left: -57px;
}
@media (max-width:360px){
top: 0px;
}
}
&::after{
content: "";
width: 95px;
height: 95px;
border-radius: 95px;
border: 1px dashed #55E3FF;
display: flex;
align-items: center;
justify-content: center;
background: #55E3FF26;
background-image: url(../img/dwn-arrow.png);
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
margin-left: 17px;
position: absolute;
right: -112px;
@media ($sm-1679){
width: 80px;
height: 80px;
background-size: 20px;
right: -97px;
}
@media ($sm-1441){
height: 70px;
width: 70px;
background-size: 18px;
right: -87px;
}
@media ($sm-1199){
height: 60px;
width: 60px;
background-size: 16px;
right: -77px;
}
@media ($sm-991){
height: 50px;
width: 50px;
background-size: 14px;
right: -67px;
}
@media ($sm-767){
height: 40px;
width: 40px;
right: -57px;
}
@media (max-width:360px){
top: 0px;
}
}
}
}
.accordion-body{
max-width: 1036px;
// margin: 0 auto;
background: #55E3FF26;
border-radius: 0 0 32px 32px;
color: #fff;
padding: 0 40px 37px 40px;
@media ($sm-1679){
padding: 0 35px 25px 35px;
font-size: 16px;
}
@media ($sm-1441){
padding: 0 30px 25px 30px;
font-size: 15px;
}
@media ($sm-1199){
padding: 0 25px 20px 25px;
font-size: 14px;
}
@media ($sm-991){
padding: 0 20px 20px 20px;
border-radius: 0 0 20px 20px;
}
}
}
}
}
// faq styles
.sub-bnr{
&.our-location-bnr{ background-image: url(../img/intake-form-banner.png); background-size: cover; background-position:center;
.bnr-img{margin-top: auto; width: 468px; margin-right: 150px;
@media ($sm-479){display: none;}
}
.content-area{
@media ($sm-479){width: 100%; margin-right: 0;}
}
}
}
.our-location-form{
.intake-form-wrapper{ margin-bottom: 50px;
.form-group{margin-bottom: 0;}
.search-btn{background: none; border: 0px; cursor: pointer; height: 83px; border-radius: 15px; background: #E6F1FF; font-size: 20px; color: #014CB2; width: 100%; margin: 33px 0 0 0;
@media ($sm-1679){height: 55px;}
@media ($sm-1199){ height: 45px; font-size: 18px;}
@media ($sm-767){ margin: 20px 0 0 0; font-size: 16px;}
}
}
}
.map-wrap{ padding-bottom: 50px;
@media ($sm-991){ padding-bottom: 30px;}
.iframe{width: 100%; height: 890px; border-radius: 20px; overflow: hidden;
@media ($sm-1679){height: 600px;}
@media ($sm-1441){height: 500px;}
@media ($sm-991){height: 300px;}
}
}
.location-details-outer-wrap{ padding: 0 0 190px 0;
@media ($sm-1679){ padding-bottom: 150px;}
@media ($sm-991){ padding-bottom: 130px;}
@media ($sm-767){padding-bottom: 90px;}
.slick-slider{margin: 0;}
.slick-slide{padding: 0 10px; }
.slick-list{margin: 0 -10px;}
.slick-arrow{ position: absolute; right: 0; bottom: -80px; width: 34px; cursor: pointer; z-index: 9;
@media ($sm-991){width: 25px; bottom: -50px;}
&.pre{ right: 40px;
@media ($sm-991){right: 30px;}
}
&.next{transform: rotate(180deg);}
}
.slick-dots{ width: auto; margin: 0; padding: 0; bottom:-60px; display: flex; align-items: start;
@media ($sm-991){bottom: -40px;}
li{list-style: none; width: 25px; height: 3px; border-radius: 3px; background: #BCC2D8;
@media ($sm-991){width: 20px;}
button{ margin: 0; padding: 0; font-size: 0px; width: auto; height: auto;
&::before{display: none;}
}
&.slick-active{background: #014CB2;
button{}
}
}
}
}
.location-details-wrap{ display: flex; border: 1px solid #97ABC6; border-radius: 15px; padding: 20px; gap: 30px;
@media ($sm-1441){gap: 10px;}
@media ($sm-479){padding: 5px;}
.img{margin: 0; max-width: 143px; border-radius: 10px; overflow: hidden;
@media ($sm-1441){max-width: 110px;}
@media ($sm-479){max-width: 90px;}
img{}
}
.txt{ display: flex; flex-direction: column; justify-content: space-between; flex: 1;
.sub-title{ color: #000000; font-size: 16px; line-height: 1.3; padding-bottom: 15px;
@media ($sm-1679){font-size: 14px;}
span{display: block;}
}
.btn-wrap{ display: flex; justify-content: space-between; align-items: center;
.button { margin: 0;
border: 0;
background: #014cb2;
height: 36px;
display: flex; max-width: 150px; width: 100%;
align-items: center;
border-radius: 30px;
justify-content: space-between;
padding: 10px 15px;
transition: all 0.5s ease;
@media ($sm-1199){max-width: 130px;}
@media ($sm-479){max-width: 110px;}
span {
font-size: 14px;
color: #FFFFFF;
font-weight: 600;
padding-right: 0; line-height: 1;
@media ($sm-1679){font-size: 12px;}
}
.icon {
width: 10px; margin: 3px 0 0 0;
@media ($sm-1679){width: 8px;}
path {
transition: all 0.5s ease;
}
}
&:hover {
background: #000;
span {
color: #ffffff;
}
.icon {
path {
stroke: #fff;
}
}
}
}
.mile{font-size: 16px; color: #000000; white-space: nowrap;
@media ($sm-1679){font-size: 14px;}
@media ($sm-479){font-size: 12px;}
}
}
}
}