File: /var/www/html/wpcurated/wp-content/themes/curated/scss/service-details.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;
}
&.abt{
background: url(../img/abt-bnr.png) no-repeat center;
background-size: cover;
}
&.service-dtl{
background: url(../img/service-dtail-bnr.png) no-repeat center;
background-size: cover;
// overflow: hidden;
// .bnr-img{
// img{
// width: auto;
// max-width: unset;
// height: 836px;
// }
// }
}
&.other-details{
background: url(../img/other-dtls-bnr.png) no-repeat right;
background-size: cover;
height: 473px;
min-height: auto;
@media ($sm-1679){
height: 450px;
}
@media ($sm-1199){
height: 410px;
}
@media ($sm-991){
height: 350px;
background-position: center;
}
.content-area{
max-width: 1090px;
@media ($sm-1199){
max-width: 565px;
margin-right: 50px;
}
@media ($sm-991){
max-width: 500px;
margin-right: 50px;
}
title{
.nxt{
display: block;
}
}
.date-blog{
position: relative;
display: flex;
align-items: center;
color: #000000;
margin-top: 32px;
@media ($sm-1679){
margin-top: 25px;
}
@media ($sm-1441){
margin-top: 20px;
}
&.sub-title{
margin-bottom: 0;
font-weight: 500;
}
&::before{
content: "";
display: inline-block;
width: 35px;
height: 18px;
background: url(../img/blog-date-symbol.png) no-repeat center;
background-size: contain;
margin-right: 6px;
@media ($sm-1679){
width: 30px;
}
@media ($sm-1441){
width: 28px;
}
}
&::after{
content: "";
display: inline-block;
width: 35px;
height: 18px;
background: url(../img/blog-date-symbol.png) no-repeat center;
background-size: contain;
transform: rotate(180deg);
margin-left: 6px;
@media ($sm-1679){
width: 30px;
}
@media ($sm-1441){
width: 28px;
}
}
}
}
}
.container{
display: flex;
align-items: center;
height: 100%;
}
.content-area{
max-width: 677px;
@media ($sm-1199){
max-width: 500px;
margin-right: 50px;
}
@media ($sm-991){
max-width: 450px;
margin-right: 50px;
}
.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{
&:not(.nxt){
display: inline;
}
&.nxt{
display: block;
}
color: #014CB2;
}
}
.sub-para{
line-height: 25px;
font-weight: 400;
color: #313646;
}
}
.bnr-img{
flex: 1;
}
.video-sec{
flex: 1;
position: absolute;
right: 0px;
}
.bnt-txt-btm{
width: 100%;
position: absolute;
bottom: 0;
img{
max-width: 100%;
filter: brightness(3.5);
}
}
}
.service-dtl-wrp{
padding: 110px 0 146px;
@media ($sm-1679){
padding: 100px 0;
}
@media ($sm-1441){
padding: 80px 0;
}
@media ($sm-1199){
padding: 60px 0;
}
@media ($sm-991){
padding: 50px 0;
}
.title-blk{
text-align: center;
.small-title-sec{
font-size: 24px;
font-weight: 600;
color: #014CB2;
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: #00124D;
@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;
}
}
}
.service-dtl-sec{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
@media ($sm-767){
flex-direction: column;
}
.dtl-blks{
display: flex;
// flex: 0 0 50%;
flex-direction: column;
width: calc(50% - 19px);
@media ($sm-1679){
width: calc(50% - 15px);
}
@media ($sm-1199){
width: calc(50% - 10px);
}
@media ($sm-767){
width: 100%;
}
&.full-h{
.inner-wrp{
height: 100%;
padding: 50px 45px;
background: url(../img/service-dtl-h-flower.png) no-repeat bottom;
background-size: contain;
@media ($sm-1441){
padding: 50px 40px;
}
@media ($sm-1199){
padding: 40px 35px;
}
@media ($sm-991){
padding: 30px 30px;
}
@media ($sm-767){
padding: 20px;
margin-top: 20px;
}
}
}
.sub-title{
color: #00124D;
margin-bottom: 8px;
span{
color: #014CB2;
}
}
.sub-para{
color: #313646;
font-weight: 300;
line-height: 27px;
@media ($sm-1679){
font-size: 16px;
line-height: 24px;
}
@media ($sm-1441){
font-size: 15px;
line-height: 23px;
}
@media ($sm-1199){
font-size: 14px;
line-height: 22px;
}
}
.inner-wrp{
border-radius: 32px;
border: 1px solid #BCC5D3;
background: url(../img/service-dtl-v-flower.png) no-repeat left;
background-size: contain;
padding: 80px 45px;
margin-top: 46px;
flex: 1 1 auto;
@media ($sm-1679){
padding: 60px 40px;
margin-top: 40px;
}
@media ($sm-1441){
padding: 50px 35px;
margin-top: 35px;
border-radius: 28px;
}
@media ($sm-1199){
padding: 40px 30px;
margin-top: 30px;
border-radius: 24px;
}
@media ($sm-991){
padding: 30px 30px;
margin-top: 25px;
border-radius: 20px;
}
@media ($sm-767){
padding: 20px;
margin-top: 20px;
}
@media ($sm-579){
margin-top: 10px;
}
.list-inside-line{
list-style: none;
padding-left: 0;
margin-top: 20px;
li{
font-size: 18px;
line-height: 27px;
font-weight: 300;
color: #313646;
position: relative;
padding-left: 30px;
margin-top: 20px;
@media ($sm-1679){
font-size: 16px;
}
@media ($sm-1441){
font-size: 15px;
margin-top: 15px;
}
@media ($sm-1199){
font-size: 14px;
}
@media ($sm-991){
margin-top: 10px;
}
&::before{
content: "";
width: 13px;
height: 13px;
background-color: #014CB2;
transform:rotate(-45deg);
display: inline-block;
margin-right: 0px;
position: absolute;
left: 3px;
top: 11px;
@media ($sm-1679){
width: 12px;
height: 12px;
}
@media ($sm-1441){
width: 10px;
height: 10px;
}
@media ($sm-991){
width: 8px;
height: 8px;
}
}
}
}
}
}
}
}
// service-details styles
// 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 ($sm-767){
font-size: 15px;
}
@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
.block{display: block !important;}
.sub-bnr{
&.treatment-banner{ background: url(../img/treatment-banner.jpg) no-repeat top center / cover; height: 475px; min-height: 100%;
@media ($sm-1441) {height: 410px;}
@media ($sm-1199) {height: 300px;}
@media ($sm-991) {height: 250px;}
.content-area{
.title{ line-height: 1.2;}
}
}
}
.sub-bnr{
&.depression-disorder-banner{
background: url(../img/depression-disorder.png) no-repeat top center / cover ;
.title{ line-height: 1.2;}
}
}
.sub-bnr{
&.depression-treatment-newyork-banner{
background: url(../img/depression-tratment-newyork.png) no-repeat top center / cover ;
.title{line-height: 1.2;}
}
}
.sub-bnr{
&.anxity-disorder-banner{
background: url(../img/anxity-disorder-banner.png) no-repeat top center / cover ;
.title{ line-height: 1.2;}
}
}
.sub-bnr{
&.insomnia-disorder-banner{
background: url(../img/insomnia-banner.png) no-repeat top center / cover ;
.title{ line-height: 1.2;}
}
}
.inner-content-wrap{ padding: 100px 0; position: relative; z-index: 1;
@media ($sm-1679) {padding: 70px 0;}
@media ($sm-991) {padding: 50px 0;}
@media ($sm-767) {padding: 30px 0;}
.content-leaf{position: absolute; right: 0; bottom: 50px; z-index: -1;
@media ($sm-1679) {max-width: 400px;}
@media ($sm-767) {max-width: 280px;}
}
.content{ padding: 0 0 40px 0;
.sub-title{ margin: 0; padding: 0; font-size: 24px; font-weight: 700; color: #00124D; padding: 0 0 20px 0;
@media ($sm-1679) {
font-size: 22px;
}
@media ($sm-1441) {
font-size: 20px;
}
@media ($sm-1199) {
font-size: 18px;
}
@media ($sm-767) {
font-size: 16px; padding-bottom: 10px;
}
span{ color: #014CB2;}
}
.para{ color: #313646; font-size: 18px; font-weight: 300; line-height: 1.4; margin: 0; padding: 0 0 20px 0;
@media ($sm-1679) {
font-size: 16px;
}
@media ($sm-1441) {
font-size: 14px; padding-bottom: 20px;
}
@media ($sm-991) {
font-size: 13px;
}
}
.button { margin: 20px 0 0 0;
border: 0;
background: #014cb2;
height: 52px;
display: flex; min-width: 230px;
align-items: center;
border-radius: 30px;
justify-content: space-between;
padding: 10px 20px;
transition: all 0.5s ease;
@media ($sm-1441) {
height: 45px;
padding: 10px 12px;
}
span {
font-size: 16px;
color: #ffffff;
font-weight: 600;
padding-right: 40px;
@media (max-width: 1799px) {
padding-right: 15px;
}
@media ($sm-1441) {
font-size: 14px;
}
}
.icon {
width: 16px;
@media ($sm-1441) {
width: 14px;
}
path {
transition: all 0.5s ease;
}
}
&:hover {
background: #000;
span {
color: #ffffff;
}
.icon {
path {
stroke: #fff;
}
}
}
}
}
.inner-video-wrap{
iframe{width: 100%; height: 300px; border-radius: 20px;
@media ($sm-991) {margin-bottom: 30px;}
}
}
}
.ser-detail-content-wrap{padding: 100px 0 150px 0;
@media ($sm-1679) {padding: 70px 0;}
@media ($sm-991) {padding: 50px 0;}
@media ($sm-767) {padding: 30px 0;}
.sub-head,h2{ font-size: 24px; color: #00124D; font-weight: 700; line-height: 1.2; margin: 0; padding: 0 0 20px 0;
@media ($sm-1679) {
font-size: 22px;
}
@media ($sm-1441) {
font-size: 20px;
}
@media ($sm-1199) {
font-size: 18px;
}
@media ($sm-767) {
font-size: 16px; padding-bottom: 10px;
}
span{ color: #014CB2;}
}
.contnet{padding: 0 50px 0 0;
&.insomnia{
.box-listing{margin-bottom: 20px; height: auto;}
}
}
.para,p{ font-size: 18px; color: #313646; line-height: 1.4; padding: 0 0 30px 0; margin: 0;
@media ($sm-1679) {
font-size: 16px;
}
@media ($sm-1441) {
font-size: 14px; padding-bottom: 20px;
}
@media ($sm-991) {
font-size: 13px;
}
}
.listing,ul{ padding: 0; margin: 0;
li{ list-style: none; font-size: 18px; color: #313646; line-height: 1.4; background: url(../img/listing-bg.svg) no-repeat 0 7px / 14px; padding: 0 0 0 30px;
@media ($sm-1679) {
font-size: 16px; background-size: 12px; padding: 0 0 0 25px;
}
@media ($sm-1441) {
font-size: 14px;
}
@media ($sm-991) {
font-size: 13px;
}
&+li{margin-top: 20px;
@media ($sm-1679) {margin-top: 15px;}
}
}
&.box-listing{border: 1px solid #B5BACD; border-radius: 10px; height: 100%; padding: 30px 45px; margin-bottom:0px;
@media ($sm-1679) {padding: 30px 30px;}
@media ($sm-767) { height: auto; margin-bottom: 20px; padding: 20px 15px;}
&.space-adj{margin-bottom: 20px; height: auto;}
}
}
.box-listing-ul{
ul{border: 1px solid #B5BACD; border-radius: 10px; height: 100%; padding: 30px 45px; margin-bottom:0px;
@media ($sm-1679) {padding: 30px 30px;}
@media ($sm-767) { height: auto; margin-bottom: 20px; padding: 20px 15px;}
&.space-adj{margin-bottom: 20px; height: auto;}
}
}
.spacer{padding: 0 0 30px 0;
@media ($sm-767) {padding: 0 0 10px 0;}
}
.img{margin: 0; padding: 0; max-width: 590px; border-radius: 30px; overflow: hidden;
@media ($sm-1441) {max-width: 510px;}
@media ($sm-767) { max-width: 410px; margin-bottom: 20px;}
img{}
}
.row-align{
&+.row-align{padding-top: 80px;
@media ($sm-1679) {padding-top: 50px;}
@media ($sm-1199) {padding-top: 30px;}
@media ($sm-767) {padding-top: 20px;}
}
}
}
.other-details-blk{
display: flex;
flex-direction: column;
width: 100%;
padding: 73px 0 120px;
@media ($sm-1679){
padding: 60px 0 100px;
}
@media ($sm-1441){
padding: 50px 0 80px;
}
@media ($sm-1199){
padding: 50px 0 60px;
}
@media ($sm-991){
padding: 40px 0 15px;
}
@media ($sm-767){
padding: 30px 0 15px;
}
.container{
&.custom-container{
@media (min-width:1200px){
max-width: 1121px;
}
}
}
.content-area{
margin-bottom: 50px;
font-size: 18px;
line-height: 25px;
font-weight: 300;
@media ($sm-1679){
font-size: 17px;
margin-bottom: 40px;
}
@media ($sm-1441){
font-size: 16px;
margin-bottom: 35px;
}
@media ($sm-1199){
font-size: 15px;
margin-bottom: 30px;
}
@media ($sm-991){
font-size: 14px;
margin-bottom: 25px;
}
@media ($sm-767){
font-size: 14px;
margin-bottom: 15px;
}
}
.img-blk-full{
width: 100%;
display: flex;
height: 218px;
position: relative;
margin-bottom: 50px;
@media ($sm-1679){
margin-bottom: 40px;
}
@media ($sm-1441){
margin-bottom: 35px;
height: 200px;
}
@media ($sm-1199){
margin-bottom: 30px;
height: 190px;
}
@media ($sm-991){
margin-bottom: 25px;
}
@media ($sm-767){
margin-bottom: 20px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}
}
.sub-title{
font-weight: 700;
color: #00124D;
margin-bottom: 15px;
@media ($sm-991){
margin-bottom: 10px;
}
span{
color: #014CB2;
}
}
.list-inside-line{
list-style: none;
padding-left: 0;
margin-top: 20px;
li{
font-size: 18px;
line-height: 27px;
font-weight: 300;
color: #313646;
position: relative;
padding-left: 30px;
margin-top: 20px;
@media ($sm-1679){
font-size: 16px;
}
@media ($sm-1441){
font-size: 15px;
margin-top: 15px;
}
@media ($sm-1199){
font-size: 14px;
}
@media ($sm-991){
margin-top: 10px;
}
&::before{
content: "";
width: 13px;
height: 13px;
background-color: #014CB2;
transform:rotate(-45deg);
display: inline-block;
margin-right: 0px;
position: absolute;
left: 3px;
top: 11px;
@media ($sm-1679){
width: 12px;
height: 12px;
}
@media ($sm-1441){
width: 10px;
height: 10px;
}
@media ($sm-991){
width: 8px;
height: 8px;
}
}
}
}
}