html,
body{
margin:0;
padding:0;
overflow-x:hidden;
width:100%;
font-family:'Poppins',sans-serif;
background:#06192d;
}
/*=========================================
Desktop Header
=========================================*/
.main-header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:999;
padding:8px 0;
transition:.3s ease;
}
.navbar{
padding:0;
min-height:95px;
align-items:center;
}
.navbar-brand{
margin:0;
padding:0;
}
.navbar-brand img{
height:89px;
width:auto;
display:block;
object-fit:contain;
transition:.3s;
}
.navbar-nav{
gap:18px;
align-items:center;
}
.nav-link{
color:#fff !important;
font-size:18px;
font-weight:600;
padding:10px 0;
transition:.3s;
}
.nav-link:hover{
color:#2fd8ff !important;
}
.login-btn{
color:#fff;
border:2px solid #2fd8ff;
border-radius:40px;
padding:12px 28px;
font-weight:600;
transition:.3s;
}
.login-btn:hover{
background:#2fd8ff;
color:#000;
}
/* Mobile */
@media (max-width:991px){
.main-header{
background:#051423;
padding:0 !important;
}
.navbar{
padding:6px 12px !important;
min-height:65px;
}
.navbar-brand{
padding:0;
margin:0;
}
.navbar-brand img{
margin-left: -28px;
height:56px !important;
width:auto;
}
.navbar-toggler{
padding:0;
}
.navbar-collapse{
background:#051423;
padding:15px;
margin-top:10px;
border-radius:12px;
}
.navbar-nav{
gap:5px;
}
.nav-link{
padding:10px 0;
}
.login-btn{
display:block;
margin-top:15px;
text-align:center;
}
}
.special-dropdown{
min-width:420px;
background:#0B243B;
border:none;
border-radius:18px;
padding:12px;
box-shadow:0 20px 40px rgba(0,0,0,.25);
}
.special-dropdown .dropdown-item{
display:flex;
align-items:center;
gap:15px;
padding:14px 18px;
color:#fff;
border-radius:12px;
transition:.3s;
white-space:normal;
}
.special-dropdown .dropdown-item i{
width:40px;
height:40px;
background:rgba(72,216,232,.12);
color:#48D8E8;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
flex-shrink:0;
}
.special-dropdown .dropdown-item:hover{
background:#48D8E8;
color:#041726;
}
.special-dropdown .dropdown-item:hover i{
background:#fff;
color:#041726;
}
/* Desktop Hover */
@media (min-width:992px){
.dropdown:hover>.dropdown-menu{
display:block;
margin-top:0;
}
}
@media (max-width:991px){
.special-dropdown{
min-width:100% !important;
width:100% !important;
}
}
/*================================================
HERO SECTION
================================================*/
.hero-section{
position:relative;
min-height:100vh;
background:url("../images/banner.png") center center/cover no-repeat;
overflow:hidden;
padding-top:130px;
padding-bottom:70px;
}
.hero-section::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,
rgba(3,16,30,.92) 15%,
rgba(3,16,30,.70) 45%,
rgba(3,16,30,.20) 100%);
}
.hero-section .container{
position:relative;
z-index:5;
}
.hero-row{
min-height:720px;
}
/*=========================================
LEFT CONTENT
=========================================*/
.hero-content{
color:#fff;
}
.hero-content h1{
font-size:54px;
font-weight:700;
line-height:1.15;
margin-bottom:20px;
color:#fff;
}
.hero-content h1 span{
color:#29D8FF;
}
.location-icon{
color:#FFBE2E;
font-size:60px;
margin-left:18px;
vertical-align:middle;
text-shadow:0 0 20px rgba(255,180,0,.7);
}
.hero-line{
width:70px;
height:4px;
border-radius:20px;
background:#29D8FF;
margin:30px 0;
}
.hero-content p{
max-width:620px;
color:#ECECEC;
font-size:18px;
line-height:1.8;
margin-bottom:45px;
}
/*=========================================
BUTTONS
=========================================*/
.hero-btn-group{
display:flex;
gap:25px;
flex-wrap:wrap;
}
.hero-btn{
width:275px;
height:82px;
display:flex;
align-items:center;
gap:16px;
padding:14px 20px;
border-radius:20px;
text-decoration:none;
transition:.35s;
overflow:hidden;
position:relative;
}
.client-btn{
background:linear-gradient(135deg,#36E0D8 0%,#1798D2 100%);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 12px 30px rgba(0,180,255,.20);
}
.therapist-btn{
background:linear-gradient(135deg,#132F85 0%,#0B1F59 100%);
border:1px solid rgba(255,255,255,.15);
box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.hero-btn:hover{
transform:translateY(-6px);
color:#fff;
box-shadow:0 20px 45px rgba(0,0,0,.40);
border-color:#3CE6FF;
}
.hero-icon{
width:50px;
height:50px;
border-radius:50%;
border:2px solid rgba(255,255,255,.35);
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:#fff;
background:rgba(255,255,255,.08);
flex-shrink:0;
transition:.3s;
}
.hero-btn:hover .hero-icon{
background:#fff;
color:#0B6ECF;
transform:rotate(8deg);
}
.hero-btn h5{
font-size:19px;
margin:0;
font-weight:600;
color:#fff;
line-height:1.2;
}
.hero-btn span{
font-size:14px;
color:#e8e8e8;
}
.hero-btn::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.25),
transparent);
transition:.8s;
}
.hero-btn:hover::before{
left:130%;
}
/*=========================================
RIGHT IMAGE
=========================================*/
.hero-image{
text-align:right;
}
.hero-image img{
width:100%;
max-width:720px;
}
/* =========================
Feature Section
========================= */
.feature-row{
row-gap:20px;
}
.feature-box{
display:flex;
align-items:center;
gap:15px;
background:#0A243B;
border:1px solid rgba(72,216,232,.15);
border-radius:20px;
padding:22px;
height:100%;
transition:.3s;
}
.feature-box i{
width:65px;
height:65px;
min-width:65px;
border-radius:16px;
background:rgba(72,216,232,.12);
color:#48D8E8;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
}
.feature-box h5{
margin:0;
color:#fff;
font-size:24px;
font-weight:700;
}
.feature-box p{
margin:5px 0 0;
color:#D8E4ED;
font-size:17px;
}
/* Hover */
.feature-box:hover{
transform:translateY(-6px);
border-color:#48D8E8;
}
/*==========================
Tablet
==========================*/
@media(max-width:991px){
.feature-box{
margin-top: 20px;
padding:18px;
}
.feature-box i{
width:55px;
height:55px;
min-width:55px;
font-size:24px;
}
.feature-box h5{
font-size:20px;
}
.feature-box p{
font-size:15px;
}
}
/*==========================
Mobile
==========================*/
@media(max-width:767px){
.feature-row{
row-gap:15px;
}
.feature-row>.col-6{
padding-left:8px;
padding-right:8px;
}
.feature-box{
padding:15px;
border-radius:16px;
gap:12px;
}
.feature-box i{
width:45px;
height:45px;
min-width:45px;
font-size:20px;
border-radius:12px;
}
.feature-box h5{
font-size:18px;
line-height:1.2;
}
.feature-box p{
font-size:14px;
line-height:1.2;
margin-top:3px;
}
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:991px){
.hero-section{
padding-top:120px;
text-align:center;
}
.hero-content h1{
margin-top: 30px;
font-size:40px;
}
.hero-content p{
font-size:14px;
margin:auto;
margin-bottom:30px;
}
.location-icon{
/*display:none;*/
margin:20px auto;
}
.hero-btn-group{
justify-content:center;
}
.hero-btn{
width:260px;
margin:auto;
}
.hero-image{
margin-top:0px;
text-align:center;
}
.feature-row{
margin-top:-20px;
}
.feature-box{
margin-bottom:5px;
}
}
@media (max-width:576px){
.hero-btn-group{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
margin-top:25px;
}
.hero-btn{
width:220px;
height:62px;
padding:10px 16px;
display:flex;
align-items:center;
gap:12px;
border-radius:16px;
margin:0;
}
.hero-icon{
width:40px;
height:40px;
font-size:17px;
display:flex;
justify-content:center;
align-items:center;
border:2px solid rgba(255,255,255,.4);
border-radius:50%;
flex-shrink:0;
}
.hero-btn h5{
font-size:15px;
margin:0;
line-height:18px;
font-weight:600;
}
.hero-btn span{
display:block;
font-size:11px;
margin-top:2px;
color:#E8E8E8;
}
.client-btn{
margin-bottom:0;
}
.therapist-btn{
margin-top:0;
}
}
@media only screen and (max-width:767px){
.hero-section{
background-image:url("../images/banner-mobile.png") !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
min-height:100vh !important;
padding-top:90px !important;
padding-bottom:40px !important;
}
.hero-section::before{
background:linear-gradient(
180deg,
rgba(3,16,30,.75) 0%,
rgba(3,16,30,.55) 45%,
rgba(3,16,30,.25) 100%
) !important;
}
.hero-content{
text-align:center;
}
.hero-content h1{
font-size:34px;
}
.hero-content p{
font-size:15px;
}
}
/*==========================
MOBILE HERO
==========================*/
@media only screen and (max-width: 576px) {
/* Hero Content */
.hero-content {
width: 100%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start !important;
text-align: left !important;
}
/* Heading */
.hero-content h1 {
width: 100%;
margin: 0;
font-size: 40px;
line-height: 1.15;
font-weight: 900;
color: #fff;
text-align: left !important;
}
/* Highlight Text */
.near-you-text {
color: #29D8FF;
font-weight: 800;
}
/*==========================
LOCATION ICON
==========================*/
.location-icon {
position: relative;
display: inline-block;
margin-left: 8px;
font-size: 30px;
color: #FFC107 !important;
animation: pinBounce 2s ease-in-out infinite;
}
/* Ring Animation */
.location-icon::after {
content: "";
position: absolute;
left: 50%;
top: 38%;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 193, 7, 0.85);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: ringPulse 2s infinite;
pointer-events: none;
}
/* Hero Line */
.hero-line {
width: 90px;
height: 5px;
margin: 20px 0;
border-radius: 20px;
background: #29D8FF;
}
/* Paragraph */
.hero-content p {
width: 100%;
margin: 0;
color: #fff;
font-size: 17px;
line-height: 1.7;
text-align: left !important;
}
} /* End Media Query */
/*==========================
ANIMATIONS
==========================*/
@keyframes pinBounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes ringPulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
/*==========================
Statistics
===========================*/
.stats-section{
padding:40px 0 80px;
}
.stats-section .container{
background:linear-gradient(180deg,
rgba(8,30,52,.95),
rgba(4,18,35,.95));
border:1px solid rgba(34,217,255,.20);
border-radius:28px;
backdrop-filter:blur(18px);
overflow:hidden;
box-shadow:
0 25px 60px rgba(0,0,0,.45),
inset 0 1px 0 rgba(255,255,255,.08),
0 0 40px rgba(34,217,255,.10);
transition:.35s ease;
}
.stats-section .container:hover{
transform:translateY(-8px);
border-color:#22d9ff;
box-shadow:
0 35px 70px rgba(0,0,0,.55),
0 0 50px rgba(34,217,255,.20);
}
.stat-box{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
padding:40px 20px;
position:relative;
}
.stat-box::after{
content:"";
position:absolute;
top:25%;
right:0;
width:1px;
height:50%;
background:rgba(255,255,255,.15);
}
.col-lg-4:last-child .stat-box::after{
display:none;
}
.stat-icon{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
color:#A7D93C;
font-size:42px;
}
.stat-box h2{
color:#fff;
font-size:46px;
margin:0;
font-weight:700;
}
.stat-box p{
color:#fff;
margin:0;
font-size:24px;
opacity:.9;
}
@media(max-width:768px){
.stats-section{
padding:30px 0 40px;
}
.stat-box{
padding:25px 20px;
justify-content:flex-start;
}
.stat-box::after{
display:none;
}
.stat-icon{
width:50px;
height:50px;
font-size:28px;
}
.stat-box h2{
font-size:28px;
}
.stat-box p{
font-size:16px;
}
}
/*==========================
THERAPY SECTION
===========================*/
.therapy-section{
/*background:#081b2e;*/
padding:70px 0;
}
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title span{
color:#2DD9FF;
font-size:18px;
font-weight:600;
}
.section-title h2{
color:#fff;
font-size:48px;
margin:15px 0;
font-weight:700;
}
.section-title p{
color:#d8d8d8;
max-width:700px;
margin:auto;
line-height:1.8;
}
.therapy-card{
background:#0C243C;
border:1px solid rgba(46,220,255,.18);
border-radius:20px;
text-align:center;
padding:35px 20px;
transition:.35s;
}
.therapy-card:hover{
transform:translateY(-8px);
border-color:#2DD9FF;
box-shadow:0 18px 35px rgba(0,0,0,.30);
}
.therapy-card img{
width:70px;
margin-bottom:20px;
}
.therapy-card h4{
color:#fff;
font-size:22px;
}
@media(max-width:768px){
.section-title h2{
font-size:32px;
}
.section-title p{
font-size:15px;
}
.therapy-card{
padding:25px 15px;
}
.therapy-card img{
width:50px;
}
.therapy-card h4{
font-size:16px;
}
}
/*==========================
HOW IT WORKS
===========================*/
.how-work{
background:#071a2d;
padding:90px 0;
}
.work-card{
background:#0b2238;
border:1px solid rgba(42,217,255,.18);
border-radius:22px;
padding:45px 30px;
text-align:center;
transition:.35s;
height:100%;
}
.work-card:hover{
transform:translateY(-8px);
border-color:#2DD9FF;
box-shadow:0 20px 40px rgba(0,0,0,.30);
}
.work-icon{
width:95px;
height:95px;
background:linear-gradient(135deg,#2DD9FF,#1695D3);
border-radius:50%;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:38px;
margin-bottom:30px;
}
.work-card h3{
color:#fff;
margin-bottom:18px;
font-size:28px;
}
.work-card p{
color:#d7d7d7;
line-height:1.8;
font-size:17px;
}
@media(max-width:768px){
.how-work{
padding:60px 0;
}
.work-card{
padding:30px 20px;
margin-bottom:20px;
}
.work-icon{
width:70px;
height:70px;
font-size:28px;
margin-bottom:20px;
}
.work-card h3{
font-size:22px;
}
.work-card p{
font-size:15px;
}
}
/*==========================
FEATURED THERAPISTS
===========================*/
.featured-therapists{
padding:100px 0;
background:#06192d;
}
.therapist-card{
background:#0c243c;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
transition:.35s;
}
.therapist-card:hover{
transform:translateY(-10px);
border-color:#22d9ff;
box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.therapist-img{
height:420px;
overflow:hidden;
}
.therapist-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}
.therapist-card:hover img{
transform:scale(1.08);
}
.therapist-body{
padding:25px;
}
.therapist-body h3{
color:#fff;
font-size:26px;
margin-bottom:8px;
}
.speciality{
color:#22d9ff;
font-size:15px;
}
.therapist-body ul{
list-style:none;
padding:0;
margin:20px 0;
}
.therapist-body ul li{
color:#ddd;
margin-bottom:12px;
}
.therapist-body i{
color:#22d9ff;
width:25px;
}
.fee{
font-size:24px;
color:#fff;
font-weight:700;
margin-bottom:20px;
}
.profile-btn{
display:block;
background:#22d9ff;
text-align:center;
color:#fff;
padding:14px;
border-radius:40px;
text-decoration:none;
transition:.3s;
}
.profile-btn:hover{
background:#18b8da;
color:#fff;
}
@media(max-width:768px){
.featured-therapists{
padding:60px 0;
}
.therapist-img{
height:350px;
}
.therapist-body{
padding:20px;
}
.therapist-body h3{
font-size:22px;
}
.fee{
font-size:20px;
}
}
/*==========================
WHY CHOOSE US
===========================*/
.why-choose{
background:#081b2e;
padding:100px 0;
}
.why-image img{
width:100%;
border-radius:20px;
}
.sub-title{
color:#25D8FF;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
}
.why-content h2{
color:#fff;
font-size:46px;
font-weight:700;
margin:15px 0;
}
.why-content>p{
color:#cfd8dc;
line-height:1.9;
margin-bottom:35px;
}
.feature-list{
display:flex;
flex-direction:column;
gap:25px;
}
.feature-item{
display:flex;
align-items:flex-start;
gap:20px;
}
.feature-item i{
width:60px;
height:60px;
background:#22d9ff;
color:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
flex-shrink:0;
}
.feature-item h4{
color:#fff;
margin-bottom:8px;
font-size:22px;
}
.feature-item p{
color:#cfd8dc;
margin:0;
line-height:1.7;
}
.why-btn{
display:inline-block;
margin-top:40px;
background:#22d9ff;
color:#fff;
text-decoration:none;
padding:15px 35px;
border-radius:50px;
font-weight:600;
transition:.3s;
}
.why-btn:hover{
background:#16b9dc;
color:#fff;
}
@media(max-width:768px){
.why-choose{
padding:60px 0;
}
.why-image{
margin-bottom:35px;
}
.why-content{
text-align:center;
}
.why-content h2{
font-size:32px;
}
.feature-item{
flex-direction:column;
align-items:center;
text-align:center;
}
.feature-item i{
margin-bottom:12px;
}
.why-btn{
width:100%;
text-align:center;
}
}
/*==========================
TESTIMONIAL
===========================*/
.testimonial-section{
background:#081b2e;
padding:100px 0;
}
.testimonial-card{
background:#0d2740;
border-radius:22px;
padding:40px 30px;
text-align:center;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
height:100%;
}
.testimonial-card:hover{
transform:translateY(-10px);
border-color:#27D9FF;
}
.user-img{
width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin:auto;
margin-bottom:20px;
border:4px solid #22d9ff;
}
.stars{
margin-bottom:20px;
}
.stars i{
color:#FFD54F;
margin:2px;
}
.testimonial-card p{
color:#d8d8d8;
line-height:1.8;
font-size:16px;
margin-bottom:20px;
}
.testimonial-card h4{
color:#fff;
margin-bottom:5px;
}
.testimonial-card span{
color:#22d9ff;
}
.swiper{
padding-bottom:60px;
}
.swiper-pagination-bullet{
background:#22d9ff;
}
.swiper-slide{
height:auto;
}
/* Swiper */
.therapistSlider{
padding-bottom:60px;
}
.therapistSlider .swiper-slide{
height:auto;
}
.therapist-pagination .swiper-pagination-bullet{
background:#22d9ff;
width:10px;
height:10px;
}
.therapist-pagination .swiper-pagination-bullet-active{
width:30px;
border-radius:20px;
}
/*==========================
FOOTER
===========================*/
.footer{
background:#041321;
padding:80px 0 25px;
}
.footer-logo{
margin-left:-20px;
/*height: 138px;*/
width:381px;
margin-bottom:25px;
}
.footer-about{
color:#cfd8dc;
line-height:1.9;
margin-bottom:30px;
}
.footer h4{
color:#fff;
margin-bottom:25px;
font-size:22px;
}
.footer ul{
list-style:none;
padding:0;
margin:0;
}
.footer ul li{
margin-bottom:15px;
}
.footer ul li a{
color:#cfd8dc;
text-decoration:none;
transition:.3s;
}
.footer ul li a:hover{
color:#22d9ff;
padding-left:8px;
}
.contact-info li{
color:#cfd8dc;
}
.contact-info i{
color:#22d9ff;
width:28px;
}
.social-links{
display:flex;
gap:15px;
}
.social-links a{
width:45px;
height:45px;
border-radius:50%;
background:#0b2238;
display:flex;
justify-content:center;
align-items:center;
color:#22d9ff;
text-decoration:none;
transition:.3s;
}
.social-links a:hover{
background:#22d9ff;
color:#fff;
transform:translateY(-5px);
}
.footer hr{
border-color:rgba(255,255,255,.08);
margin:45px 0 25px;
}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
}
.footer-bottom p{
color:#cfd8dc;
margin:0;
}
.footer-bottom a{
color:#cfd8dc;
text-decoration:none;
margin:0 8px;
}
.footer-bottom a:hover{
color:#22d9ff;
}
@media(max-width:768px){
.footer{
text-align:center;
padding:60px 0 25px;
}
.footer-logo{
width:300px;
margin-left: -60px;
margin:auto;
}
.social-links{
justify-content:center;
margin-bottom:30px;
}
.footer-bottom{
flex-direction:column;
}
}
.about-hero{
position: relative;
padding: 170px 0 120px;
background: linear-gradient(rgba(4,23,38,.82),rgba(4,23,38,.82)),
url("asset/images/about.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
/* Optional Glow Effect */
.about-hero::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(72,216,232,.08);
filter:blur(120px);
border-radius:50%;
top:-150px;
right:-100px;
}
.about-hero::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(72,216,232,.05);
filter:blur(100px);
border-radius:50%;
bottom:-120px;
left:-100px;
}
.about-hero .container{
position:relative;
z-index:2;
}
/*==========================================
SUBTITLE
==========================================*/
.about-subtitle{
display:inline-block;
padding:10px 24px;
background:rgba(72,216,232,.12);
border:1px solid rgba(72,216,232,.25);
border-radius:50px;
color:#48D8E8;
font-size:14px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:25px;
}
/*==========================================
HEADING
==========================================*/
.about-hero h1{
font-family:"Playfair Display",serif;
font-size:72px;
font-weight:700;
line-height:1.15;
color:#fff;
margin-bottom:25px;
}
.about-hero h1 span{
color:#48D8E8;
}
/*==========================================
PARAGRAPH
==========================================*/
.about-hero p{
max-width:750px;
margin:auto;
color:#d8e5ef;
font-size:20px;
line-height:36px;
}
/*==========================================
RESPONSIVE
==========================================*/
@media(max-width:991px){
.about-hero{
padding:140px 0 90px;
}
.about-hero h1{
font-size:52px;
}
.about-hero p{
font-size:18px;
line-height:32px;
}
}
@media(max-width:767px){
.about-hero{
padding:120px 0 70px;
}
.about-hero h1{
font-size:38px;
line-height:1.25;
}
.about-subtitle{
font-size:12px;
padding:8px 18px;
}
.about-hero p{
font-size:16px;
line-height:28px;
}
}
/*=================================================
ABOUT SECTION
=================================================*/
.about-section{
padding:120px 0;
background:#041726;
overflow:hidden;
}
.about-content{
padding-right:40px;
}
.about-subtitle{
display:inline-block;
padding:8px 18px;
border-radius:50px;
border:1px solid rgba(72,216,232,.25);
background:rgba(72,216,232,.08);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
margin-bottom:25px;
}
.about-content h2{
font-size:58px;
font-weight:700;
line-height:1.15;
color:#fff;
margin-bottom:25px;
font-family:'Playfair Display',serif;
}
.about-content h2 span{
color:#48D8E8;
}
.about-content p{
color:#c7d7e2;
font-size:18px;
line-height:32px;
margin-bottom:35px;
}
/* Buttons */
.about-btns{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:50px;
}
.btn-explore{
padding:16px 35px;
border-radius:50px;
background:linear-gradient(135deg,#48D8E8,#0E95B7);
color:#fff;
text-decoration:none;
font-weight:600;
transition:.35s;
}
.btn-explore:hover{
color:#fff;
transform:translateY(-3px);
}
.btn-contact{
padding:16px 35px;
border-radius:50px;
border:1px solid #48D8E8;
color:#48D8E8;
text-decoration:none;
font-weight:600;
transition:.35s;
}
.btn-contact:hover{
background:#48D8E8;
color:#041726;
}
/* Counter */
.about-counter{
display:flex;
gap:45px;
flex-wrap:wrap;
}
.counter-box h3{
color:#48D8E8;
font-size:42px;
font-weight:700;
margin:0;
}
.counter-box span{
color:#d8e5ef;
font-size:15px;
}
/* Right */
.about-video-box{
position:relative;
overflow:hidden;
border-radius:30px;
}
.about-video-box img{
width:100%;
height:620px;
object-fit:cover;
border-radius:30px;
display:block;
}
/* Overlay */
.about-video-box::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(4,23,38,.55),
rgba(4,23,38,.15));
}
/* Play */
.play-btn{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
border-radius:50%;
background:#48D8E8;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#041726;
font-size:28px;
z-index:5;
transition:.35s;
box-shadow:0 20px 45px rgba(72,216,232,.35);
}
.play-btn:hover{
transform:translate(-50%,-50%) scale(1.08);
color:#041726;
}
/* Floating Cards */
.badge-left{
position:absolute;
left:25px;
bottom:25px;
background:rgba(8,33,55,.92);
border:1px solid rgba(72,216,232,.25);
backdrop-filter:blur(14px);
color:#fff;
padding:16px 24px;
border-radius:16px;
display:flex;
align-items:center;
gap:10px;
z-index:6;
}
.badge-left i{
color:#48D8E8;
}
.badge-right{
position:absolute;
right:25px;
top:25px;
background:rgba(8,33,55,.92);
border:1px solid rgba(72,216,232,.25);
backdrop-filter:blur(14px);
color:#fff;
padding:18px 25px;
border-radius:16px;
z-index:6;
}
.badge-right span{
display:block;
margin-top:8px;
color:#d7e5ef;
font-size:14px;
}
/* Responsive */
@media(max-width:1199px){
.about-content h2{
font-size:48px;
}
.about-video-box img{
height:540px;
}
}
@media(max-width:991px){
.about-section{
padding:80px 0;
}
.about-content{
padding-right:0;
margin-bottom:50px;
}
.about-content h2{
font-size:42px;
}
.about-video-box img{
height:480px;
}
.about-counter{
justify-content:flex-start;
}
}
@media(max-width:767px){
.about-content h2{
font-size:34px;
}
.about-content p{
font-size:16px;
line-height:28px;
}
.about-video-box img{
height:320px;
}
.play-btn{
width:70px;
height:70px;
font-size:22px;
}
.badge-left,
.badge-right{
position:static;
margin-top:15px;
width:100%;
}
.about-counter{
gap:20px;
}
.counter-box{
width:30%;
}
.counter-box h3{
font-size:30px;
}
}
/*======================================
CONTACT HERO
======================================*/
.contact-hero-area{
padding:170px 0 110px;
background:#041726;
position:relative;
overflow:hidden;
}
.contact-hero-area::before{
content:"";
position:absolute;
width:420px;
height:420px;
background:rgba(72,216,232,.08);
border-radius:50%;
filter:blur(130px);
top:-150px;
right:-100px;
}
.contact-hero-content{
position:relative;
z-index:5;
}
.contact-hero-tag{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
color:#48D8E8;
font-size:14px;
letter-spacing:2px;
}
.contact-hero-title{
font-weight:700;
color:#fff;
font-size:46px;
margin:30px 0;
}
.contact-hero-title span{
color:#48D8E8;
}
.contact-hero-text{
color:#d7e5ef;
font-size:20px;
line-height:36px;
}
@media(max-width:991px){
.contact-hero-title{
font-size:48px;
}
}
@media(max-width:767px){
.contact-hero-area{
padding:120px 0 80px;
}
.contact-hero-title{
font-size:36px;
}
.contact-hero-text{
font-size:16px;
line-height:28px;
}
}
/*====================================
CONTACT INFO
====================================*/
.tw-contact-info-section{
padding:100px 0;
background:#071b2d;
}
.tw-contact-card{
background:#0b2740;
border-radius:25px;
padding:40px 30px;
text-align:center;
height:100%;
transition:.4s;
border:1px solid rgba(72,216,232,.12);
}
.tw-contact-card:hover{
transform:translateY(-10px);
border-color:#48D8E8;
box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.tw-contact-icon{
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
border-radius:20px;
background:linear-gradient(135deg,#48D8E8,#1288AE);
display:flex;
align-items:center;
justify-content:center;
}
.tw-contact-icon i{
color:#fff;
font-size:32px;
}
.tw-contact-card h4{
color:#fff;
font-size:24px;
margin-bottom:15px;
}
.tw-contact-card p{
color:#c7d7e2;
margin-bottom:15px;
line-height:28px;
}
.tw-contact-card a{
color:#48D8E8;
font-weight:600;
text-decoration:none;
}
.tw-contact-card span{
color:#48D8E8;
font-weight:600;
}
@media(max-width:768px){
.tw-contact-info-section{
padding:70px 0;
}
.tw-contact-card{
padding:30px 20px;
}
}
/*====================================
CONTACT FORM
====================================*/
.tw-contact-form-section{
padding:120px 0;
background:#041726;
}
.tw-form-box{
background:#0A243B;
padding:45px;
border-radius:25px;
border:1px solid rgba(72,216,232,.12);
height:100%;
}
.tw-form-tag{
color:#48D8E8;
letter-spacing:2px;
font-size:14px;
font-weight:600;
}
.tw-form-box h2{
font-weight:700;
color:#fff;
font-size:46px;
margin:20px 0;
}
.tw-form-box p{
color:#d7e5ef;
margin-bottom:35px;
}
.tw-input{
background:#082033;
border:1px solid rgba(72,216,232,.12);
color:#fff;
height:58px;
border-radius:15px;
}
textarea.tw-input{
height:auto;
resize:none;
}
.tw-input::placeholder{
color:#a7b7c5;
}
.tw-input:focus{
background:#082033;
color:#fff;
border-color:#48D8E8;
box-shadow:none;
}
.tw-submit-btn{
width:100%;
height:58px;
border:none;
border-radius:50px;
background:linear-gradient(135deg,#48D8E8,#1188AE);
color:#fff;
font-weight:600;
transition:.3s;
}
.tw-submit-btn:hover{
transform:translateY(-3px);
}
.tw-map-box{
overflow:hidden;
border-radius:25px;
height:100%;
min-height:650px;
}
.tw-map-box iframe{
width:100%;
height:100%;
border:0;
}
/* Responsive */
@media(max-width:991px){
.tw-contact-form-section{
padding:80px 0;
}
.tw-form-box{
margin-bottom:20px;
}
.tw-map-box{
min-height:450px;
}
}
@media(max-width:576px){
.tw-form-box{
padding:30px 20px;
}
.tw-form-box h2{
font-size:34px;
}
}
/*====================================
THERAPY SERVICES MARQUEE
====================================*/
.tw-service-marquee{
padding:35px 0;
background:#48d8e8;
overflow:hidden;
border-top:1px solid rgba(72,216,232,.10);
border-bottom:1px solid rgba(72,216,232,.10);
}
.tw-marquee{
overflow:hidden;
white-space:nowrap;
}
.tw-marquee-track{
display:flex;
width:max-content;
animation:therapyScroll 30s linear infinite;
}
.tw-service-item{
display:flex;
align-items:center;
gap:12px;
margin-right:30px;
padding:16px 28px;
border-radius:50px;
background:#0A243B;
border:1px solid rgba(72,216,232,.15);
color:#fff;
font-size:18px;
font-weight:500;
flex-shrink:0;
}
.tw-service-item i{
color:#48D8E8;
font-size:20px;
}
.tw-service-item:hover{
background:#48D8E8;
color:#041726;
transition:.3s;
}
.tw-service-item:hover i{
color:#041726;
}
@keyframes therapyScroll{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
.tw-marquee:hover .tw-marquee-track{
animation-play-state:paused;
}
/* Mobile */
@media(max-width:768px){
.tw-service-item{
font-size:15px;
padding:12px 20px;
margin-right:18px;
}
}
/*=====================================
THERAPY WINDOWS ABOUT
======================================*/
.tw-about-wrapper{
padding:120px 0;
background:#041726;
overflow:hidden;
}
.tw-about-left{
padding-right:50px;
}
.tw-about-tag{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.18);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
margin-bottom:25px;
}
.tw-about-heading{
font-size:46px;
line-height:1.15;
color:#fff;
margin-bottom:25px;
font-weight: 700;
}
.tw-about-heading span{
color:#48D8E8;
}
.tw-about-text{
color:#c7d7e2;
font-size:18px;
line-height:34px;
margin-bottom:35px;
}
.tw-about-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.tw-btn-primary{
padding:16px 34px;
border-radius:50px;
text-decoration:none;
color:#fff;
background:linear-gradient(135deg,#48D8E8,#1188AE);
transition:.35s;
}
.tw-btn-primary:hover{
color:#fff;
transform:translateY(-4px);
}
.tw-btn-outline{
padding:16px 34px;
border-radius:50px;
border:1px solid #48D8E8;
color:#48D8E8;
text-decoration:none;
transition:.35s;
}
.tw-btn-outline:hover{
background:#48D8E8;
color:#041726;
}
/* Image */
.tw-about-image{
position:relative;
border-radius:30px;
overflow:hidden;
}
.tw-about-image img{
width:100%;
height:620px;
object-fit:cover;
border-radius:30px;
transition:.4s;
}
.tw-about-image:hover img{
transform:scale(1.05);
}
/* Overlay */
.tw-about-image::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(4,23,38,.55),
rgba(4,23,38,.15));
z-index:1;
}
/* Play */
.tw-about-play{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
border-radius:50%;
background:#48D8E8;
display:flex;
justify-content:center;
align-items:center;
color:#041726;
font-size:28px;
text-decoration:none;
z-index:2;
transition:.35s;
}
.tw-about-play:hover{
color:#041726;
transform:translate(-50%,-50%) scale(1.08);
}
/* Responsive */
@media(max-width:991px){
.tw-about-wrapper{
padding:80px 0;
}
.tw-about-left{
padding-right:0;
margin-bottom:50px;
}
.tw-about-heading{
font-size:42px;
}
.tw-about-image img{
height:450px;
}
}
@media(max-width:768px){
.tw-about-heading{
font-size:34px;
}
.tw-about-text{
font-size:16px;
line-height:28px;
}
.tw-about-image img{
height:320px;
}
.tw-about-play{
width:70px;
height:70px;
font-size:22px;
}
}
/*=========================================
THERAPY WINDOWS COMPANY SECTION
=========================================*/
.tw-company-section{
padding:120px 0;
background:#041726;
position:relative;
overflow:hidden;
}
/* Background Glow */
.tw-company-section::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(72,216,232,.06);
border-radius:50%;
filter:blur(130px);
top:-180px;
left:-150px;
}
.tw-company-section::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(72,216,232,.05);
border-radius:50%;
filter:blur(100px);
right:-120px;
bottom:-120px;
}
/*=================================
Image
=================================*/
.tw-company-image{
position:relative;
overflow:hidden;
border-radius:30px;
z-index:2;
}
.tw-company-image img{
width:100%;
height:620px;
object-fit:cover;
border-radius:30px;
transition:.5s;
}
.tw-company-image:hover img{
transform:scale(1.06);
}
/*=================================
Content
=================================*/
.tw-company-content{
padding-left:60px;
position:relative;
z-index:2;
}
.tw-company-tag{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
margin-bottom:25px;
}
.tw-company-title{
font-size:46px;
color:#fff;
line-height:1.15;
margin-bottom:25px;
font-weight: 700;
}
.tw-company-title span{
color:#48D8E8;
}
.tw-company-text{
color:#c9d7e2;
font-size:18px;
line-height:34px;
margin-bottom:35px;
}
/*=================================
List
=================================*/
.tw-company-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-bottom:40px;
}
.tw-company-item{
display:flex;
align-items:center;
gap:12px;
color:#fff;
font-size:17px;
font-weight:500;
}
.tw-company-item i{
color:#48D8E8;
font-size:18px;
}
/*=================================
Button
=================================*/
.tw-company-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:58px;
padding:0 35px;
border-radius:50px;
text-decoration:none;
color:#fff;
font-weight:600;
background:linear-gradient(135deg,#48D8E8,#148AB1);
transition:.35s;
}
.tw-company-btn:hover{
color:#fff;
transform:translateY(-4px);
box-shadow:0 18px 35px rgba(72,216,232,.30);
}
/*=================================
Responsive
=================================*/
@media(max-width:991px){
.tw-company-section{
padding:80px 0;
}
.tw-company-content{
padding-left:0;
margin-top:50px;
}
.tw-company-title{
font-size:42px;
}
.tw-company-image img{
height:450px;
}
.tw-company-list{
grid-template-columns:1fr;
}
}
@media(max-width:767px){
.tw-company-title{
font-size:34px;
}
.tw-company-text{
font-size:16px;
line-height:28px;
}
.tw-company-image img{
height:320px;
}
.tw-company-btn{
width:100%;
}
}
/*=========================================
THERAPY WINDOWS WHY CHOOSE
=========================================*/
.twwc-section{
padding:120px 0;
background:#071b2d;
position:relative;
overflow:hidden;
}
.twwc-section::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(72,216,232,.05);
border-radius:50%;
filter:blur(140px);
top:-180px;
right:-150px;
}
.twwc-subtitle{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.18);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
}
.twwc-title{
font-size:46px;
color:#fff;
margin:25px 0 20px;
line-height:1.15;
font-weight: 700;
}
.twwc-title span{
color:#48D8E8;
}
.twwc-description{
color:#c7d7e2;
font-size:18px;
line-height:32px;
}
.twwc-card{
background:#0A243B;
padding:40px 35px;
border-radius:24px;
border:1px solid rgba(72,216,232,.12);
transition:.35s;
height:100%;
position:relative;
z-index:2;
}
.twwc-card:hover{
transform:translateY(-10px);
border-color:#48D8E8;
box-shadow:0 20px 45px rgba(0,0,0,.30);
}
.twwc-icon{
width:75px;
height:75px;
border-radius:20px;
background:linear-gradient(135deg,#48D8E8,#1288AE);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:25px;
}
.twwc-icon i{
font-size:30px;
color:#fff;
}
.twwc-card h4{
color:#fff;
font-size:24px;
margin-bottom:15px;
font-weight:600;
}
.twwc-card p{
color:#c8d8e3;
line-height:30px;
margin:0;
}
/*==========================
Responsive
==========================*/
@media(max-width:991px){
.twwc-section{
padding:80px 0;
}
.twwc-title{
font-size:42px;
}
}
@media(max-width:576px){
.twwc-title{
font-size:32px;
}
.twwc-description{
font-size:16px;
line-height:28px;
}
.twwc-card{
padding:30px 25px;
}
.twwc-icon{
width:65px;
height:65px;
}
.twwc-icon i{
font-size:26px;
}
}
/*=========================================
THERAPY WINDOWS MISSION & VISION
=========================================*/
.twmv-section{
padding:120px 0;
background:#041726;
position:relative;
overflow:hidden;
}
.twmv-section::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(72,216,232,.05);
border-radius:50%;
filter:blur(140px);
top:-180px;
left:-150px;
}
.twmv-subtitle{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.18);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
margin-bottom:20px;
}
.twmv-title{
font-weight: 700;
font-size:46px;
color:#fff;
line-height:1.15;
margin-bottom:20px;
}
.twmv-title span{
color:#48D8E8;
}
.twmv-description{
color:#c7d7e2;
font-size:18px;
line-height:32px;
max-width:700px;
margin:auto;
}
.twmv-card{
background:#0A243B;
border-radius:25px;
padding:45px;
height:100%;
border:1px solid rgba(72,216,232,.12);
transition:.35s;
position:relative;
}
.twmv-card:hover{
transform:translateY(-10px);
border-color:#48D8E8;
box-shadow:0 20px 45px rgba(0,0,0,.30);
}
.twmv-icon{
width:80px;
height:80px;
border-radius:20px;
background:linear-gradient(135deg,#48D8E8,#1288AE);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:30px;
}
.twmv-icon i{
color:#fff;
font-size:32px;
}
.twmv-card h3{
color:#fff;
font-size:30px;
margin-bottom:20px;
font-weight:600;
}
.twmv-card p{
color:#c9d7e2;
font-size:17px;
line-height:30px;
margin:0;
}
/* Responsive */
@media(max-width:991px){
.twmv-section{
padding:80px 0;
}
.twmv-title{
font-size:42px;
}
.twmv-card{
padding:35px;
}
}
@media(max-width:576px){
.twmv-title{
font-size:32px;
}
.twmv-description{
font-size:16px;
line-height:28px;
}
.twmv-card{
padding:30px 25px;
}
.twmv-icon{
width:65px;
height:65px;
}
.twmv-icon i{
font-size:26px;
}
.twmv-card h3{
font-size:24px;
}
}
/*==================================
PREMIUM COUNTER
==================================*/
.tw-counter-section{
background:#041726;
padding:120px 0;
}
.tw-counter-wrapper{
background:#0A243B;
border-radius:35px;
padding:50px;
border:1px solid rgba(72,216,232,.12);
box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.tw-counter-box{
text-align:center;
position:relative;
}
.tw-counter-box::after{
content:"";
position:absolute;
right:-15px;
top:20%;
width:1px;
height:60%;
background:rgba(255,255,255,.08);
}
.col-lg-3:last-child .tw-counter-box::after{
display:none;
}
.tw-counter-icon{
width:85px;
height:85px;
margin:auto;
margin-bottom:20px;
border-radius:22px;
background:linear-gradient(135deg,#48D8E8,#1288AE);
display:flex;
justify-content:center;
align-items:center;
}
.tw-counter-icon i{
color:#fff;
font-size:34px;
}
.tw-counter-number{
color:#48D8E8;
font-size:54px;
font-weight:700;
margin-bottom:10px;
}
.tw-counter-box h6{
color:#fff;
font-size:18px;
margin:0;
}
.tw-counter-box:hover .tw-counter-icon{
transform:rotate(-8deg) scale(1.08);
transition:.4s;
}
@media(max-width:991px){
.tw-counter-wrapper{
padding:35px;
}
.tw-counter-box::after{
display:none;
}
.tw-counter-number{
font-size:42px;
}
}
@media(max-width:576px){
.tw-counter-wrapper{
padding:25px;
}
.tw-counter-icon{
width:65px;
height:65px;
}
.tw-counter-icon i{
font-size:26px;
}
.tw-counter-number{
font-size:34px;
}
.tw-counter-box h6{
font-size:15px;
}
}
/*=========================================
THERAPY WINDOWS FAQ
=========================================*/
.twfaq-section{
padding:120px 0;
background:#071B2D;
}
.twfaq-subtitle{
display:inline-block;
padding:10px 22px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
font-weight:600;
margin-bottom:20px;
}
.twfaq-title{
font-size:46px;
color:#fff;
line-height:1.15;
margin-bottom:20px;
font-weight: 700;
}
.twfaq-title span{
color:#48D8E8;
}
.twfaq-description{
color:#c9d7e2;
font-size:18px;
line-height:32px;
}
.twfaq-accordion{
--bs-accordion-bg:#0A243B;
--bs-accordion-border-color:rgba(72,216,232,.12);
--bs-accordion-border-radius:18px;
--bs-accordion-btn-bg:#0A243B;
--bs-accordion-active-bg:#10344F;
--bs-accordion-active-color:#48D8E8;
--bs-accordion-btn-color:#ffffff;
--bs-accordion-color:#d7e5ef;
}
.twfaq-item{
margin-bottom:18px;
border-radius:18px !important;
overflow:hidden;
border:1px solid rgba(72,216,232,.12);
}
.twfaq-button{
padding:24px 30px;
font-size:20px;
font-weight:600;
box-shadow:none !important;
}
.twfaq-button:focus{
box-shadow:none;
}
.twfaq-body{
padding:25px 30px;
color:#c9d7e2;
line-height:30px;
font-size:17px;
}
.twfaq-button::after{
filter:brightness(100);
}
@media(max-width:991px){
.twfaq-section{
padding:80px 0;
}
.twfaq-title{
font-size:42px;
}
}
@media(max-width:576px){
.twfaq-title{
font-size:32px;
}
.twfaq-button{
font-size:17px;
padding:18px;
}
.twfaq-body{
padding:18px;
font-size:15px;
line-height:26px;
}
}
/*=========================================
PREMIUM CTA
=========================================*/
.twcta-section{
padding:120px 0;
background:#041726;
}
.twcta-wrapper{
background:linear-gradient(135deg,#0B2A43,#0E3D5F);
border-radius:35px;
padding:70px;
overflow:hidden;
position:relative;
}
.twcta-wrapper::before{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(72,216,232,.15);
border-radius:50%;
filter:blur(120px);
top:-150px;
right:-100px;
}
.twcta-content{
position:relative;
z-index:2;
}
.twcta-tag{
color:#48D8E8;
letter-spacing:3px;
font-size:14px;
font-weight:600;
}
.twcta-content h2{
color:#fff;
font-size:46px;
font-weight: 700;
line-height:1.2;
margin:20px 0;
}
.twcta-content h2 span{
color:#48D8E8;
}
.twcta-content p{
color:#d7e5ef;
font-size:18px;
line-height:34px;
margin-bottom:35px;
}
.twcta-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.twcta-primary{
background:linear-gradient(135deg,#48D8E8,#138CB1);
color:#fff;
padding:18px 38px;
border-radius:50px;
text-decoration:none;
font-weight:600;
}
.twcta-secondary{
border:1px solid #48D8E8;
color:#48D8E8;
padding:18px 38px;
border-radius:50px;
text-decoration:none;
}
.twcta-secondary i{
margin-right:8px;
}
.twcta-image{
text-align:center;
}
.twcta-image img{
max-height:420px;
}
@media(max-width:991px){
.twcta-wrapper{
padding:40px 30px;
text-align:center;
}
.twcta-content h2{
font-size:40px;
}
.twcta-buttons{
justify-content:center;
margin-bottom:40px;
}
}
@media(max-width:576px){
.twcta-content h2{
font-size:32px;
}
.twcta-primary,
.twcta-secondary{
width:100%;
text-align:center;
}
}
/*====================================
HOW HERO
====================================*/
.tw-how-hero{
padding:140px 0 110px;
background:linear-gradient(rgba(4,23,38,.80),rgba(4,23,38,.80)),
url("../images/how-banner.png") center/cover;
text-align:center;
}
.tw-how-tag{
display:inline-block;
padding:10px 24px;
border-radius:50px;
background:rgba(72,216,232,.12);
border:1px solid rgba(72,216,232,.25);
color:#48D8E8;
font-size:13px;
font-weight:600;
letter-spacing:2px;
margin-bottom:25px;
}
.tw-how-title{
color:#fff;
font-size:62px;
line-height:1.2;
margin-bottom:25px;
font-weight: 700;
}
.tw-how-title span{
color:#48D8E8;
}
.tw-how-text{
color:#d7e5ef;
font-size:20px;
line-height:36px;
max-width:760px;
margin:auto;
}
@media(max-width:991px){
.tw-how-title{
font-size:46px;
}
}
@media(max-width:576px){
.tw-how-title{
font-size:34px;
}
.tw-how-text{
font-size:16px;
line-height:28px;
}
}
/*======================================
HOW PROCESS
======================================*/
.tw-process-section{
padding:120px 0;
background:#041726;
position:relative;
overflow:hidden;
}
.tw-process-section::before{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(72,216,232,.06);
border-radius:50%;
filter:blur(130px);
top:-180px;
left:-180px;
}
.tw-process-section::after{
content:"";
position:absolute;
width:350px;
height:350px;
background:rgba(72,216,232,.05);
border-radius:50%;
filter:blur(120px);
right:-120px;
bottom:-120px;
}
.tw-process-tag{
display:inline-block;
padding:10px 24px;
border-radius:50px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
color:#48D8E8;
letter-spacing:2px;
font-size:13px;
font-weight:600;
}
.tw-process-title{
color:#fff;
font-weight:700;
font-size:58px;
margin:22px 0;
}
.tw-process-title span{
color:#48D8E8;
}
.tw-process-text{
color:#c9d7e2;
font-size:18px;
line-height:32px;
max-width:720px;
margin:auto;
}
.tw-process-card{
background:#0A243B;
border:1px solid rgba(72,216,232,.12);
border-radius:24px;
padding:40px 30px;
text-align:center;
position:relative;
transition:.35s;
height:100%;
}
.tw-process-card:hover{
transform:translateY(-12px);
border-color:#48D8E8;
box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.tw-process-number{
position:absolute;
top:18px;
right:22px;
font-size:48px;
font-weight:700;
color:rgba(72,216,232,.12);
}
.tw-process-icon{
width:85px;
height:85px;
border-radius:50%;
background:linear-gradient(135deg,#48D8E8,#0D8DB2);
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-bottom:25px;
}
.tw-process-icon i{
font-size:34px;
color:#fff;
}
.tw-process-card h4{
color:#fff;
font-size:24px;
margin-bottom:15px;
}
.tw-process-card p{
color:#c9d7e2;
line-height:30px;
margin:0;
}
@media(max-width:991px){
.tw-process-section{
padding:80px 0;
}
.tw-process-title{
font-size:42px;
}
}
@media(max-width:576px){
.tw-process-title{
font-size:32px;
}
.tw-process-text{
font-size:16px;
line-height:28px;
}
}
/*=========================================
THERAPY SESSION TYPES
=========================================*/
.tw-session-section{
padding:120px 0;
background:#071B2D;
}
.tw-session-tag{
display:inline-block;
padding:10px 24px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.18);
border-radius:50px;
color:#48D8E8;
font-size:13px;
font-weight:600;
letter-spacing:2px;
}
.tw-session-title{
color:#fff;
font-weight: 700;
font-size:46px;
margin:22px 0;
}
.tw-session-title span{
color:#48D8E8;
}
.tw-session-text{
color:#c8d8e3;
font-size:18px;
line-height:32px;
max-width:700px;
margin:auto;
}
.tw-session-card{
background:#0A243B;
border-radius:25px;
padding:45px 35px;
border:1px solid rgba(72,216,232,.12);
transition:.4s;
height:100%;
}
.tw-session-card:hover{
transform:translateY(-12px);
border-color:#48D8E8;
box-shadow:0 25px 60px rgba(0,0,0,.30);
}
.tw-session-icon{
width:85px;
height:85px;
background:linear-gradient(135deg,#48D8E8,#0C8EB3);
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:30px;
}
.tw-session-icon i{
color:#fff;
font-size:34px;
}
.tw-session-card h3{
color:#fff;
margin-bottom:18px;
font-size:28px;
}
.tw-session-card p{
color:#c8d8e3;
line-height:30px;
margin-bottom:25px;
}
.tw-session-card a{
color:#48D8E8;
text-decoration:none;
font-weight:600;
}
.tw-session-card a i{
margin-left:8px;
transition:.3s;
}
.tw-session-card:hover a i{
transform:translateX(6px);
}
@media(max-width:768px){
.tw-session-title{
font-size:36px;
}
}
/*==================================
WHY THERAPY WINDOWS
==================================*/
.tw-why-section{
padding:120px 0;
background:#041726;
}
.tw-why-image{
overflow:hidden;
border-radius:25px;
}
.tw-why-image img{
width:100%;
border-radius:25px;
margin-top: 106px;
/*height: 540px;*/
}
.tw-why-tag{
display:inline-block;
padding:10px 22px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
border-radius:50px;
color:#48D8E8;
letter-spacing:2px;
font-size:13px;
font-weight:600;
}
.tw-why-title{
color:#fff;
font-size:46px;
margin:25px 0;
font-weight: 700;
}
.tw-why-title span{
color:#48D8E8;
}
.tw-why-text{
color:#c8d8e3;
line-height:32px;
margin-bottom:20px;
}
.tw-why-card{
background:#0A243B;
border:1px solid rgba(72,216,232,.12);
border-radius:20px;
padding:28px;
display:flex;
align-items:center;
gap:18px;
transition:.35s;
}
.tw-why-card:hover{
transform:translateY(-8px);
border-color:#48D8E8;
}
.tw-why-card i{
width:65px;
height:65px;
border-radius:18px;
background:linear-gradient(135deg,#48D8E8,#138CB1);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:28px;
}
.tw-why-card h5{
color:#fff;
margin:0;
font-size:20px;
}
@media(max-width:768px){
.tw-why-title{
font-size:38px;
}
}
.login-section{
position:relative;
min-height:100vh;
background:url("../images/login-bg.jpg") center center/cover no-repeat;
overflow:hidden;
}
.overlay{
position:absolute;
inset:0;
background:rgba(4,20,35,.82);
}
.container{
position:relative;
z-index:2;
}
/*==============================
LEFT IMAGE
==============================*/
.login-image{
text-align:center;
}
.login-image img{
max-width:100%;
animation:float 4s ease-in-out infinite;
}
@keyframes float{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-15px);
}
}
/*==============================
LOGIN BOX
==============================*/
.login-box{
background:rgba(8,28,46,.78);
backdrop-filter:blur(20px);
border:1px solid rgba(34,217,255,.18);
border-radius:25px;
padding:45px;
box-shadow:0 25px 60px rgba(0,0,0,.40);
}
.logo{
width:180px;
margin-bottom:25px;
}
.login-box h2{
color:#fff;
font-size:38px;
font-weight:700;
}
.login-box p{
color:#d7d7d7;
margin-bottom:35px;
}
/*==============================
INPUT
==============================*/
label{
color:#fff;
margin-bottom:8px;
font-weight:500;
}
.form-control{
background:#0d2943;
border:1px solid rgba(255,255,255,.08);
color:#fff;
height:55px;
border-radius:12px;
}
.form-control:focus{
background:#0d2943;
color:#fff;
border-color:#22d9ff;
box-shadow:none;
}
.form-control::placeholder{
color:#9aa6b2;
}
.password-box{
position:relative;
}
.password-box i{
position:absolute;
right:18px;
top:18px;
color:#9aa6b2;
cursor:pointer;
}
/*==============================
CHECKBOX
==============================*/
.login-box a{
color:#22d9ff;
text-decoration:none;
}
.login-box a:hover{
color:#fff;
}
/* Register Form */
.form-select,
textarea{
background:#0d2943;
border:1px solid rgba(255,255,255,.08);
color:#fff;
border-radius:12px;
}
.form-select{
height:55px;
}
.form-select:focus,
textarea:focus{
background:#0d2943;
color:#fff;
border-color:#22d9ff;
box-shadow:none;
}
textarea{
resize:none;
padding:15px;
}
.login-box{
max-width:620px;
margin:auto;
}
/*==============================
LOGIN BUTTON
==============================*/
.login-btn2{
width:100%;
height:56px;
border:none;
border-radius:50px;
background:linear-gradient(135deg,#2DD9FF,#118BC8);
color:#fff;
font-size:18px;
font-weight:600;
transition:.35s;
}
.login-btn2:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(34,217,255,.35);
}
/*==============================
DIVIDER
==============================*/
.divider{
text-align:center;
margin:30px 0;
position:relative;
}
.divider::before{
content:"";
position:absolute;
left:0;
top:50%;
width:42%;
height:1px;
background:#29465f;
}
.divider::after{
content:"";
position:absolute;
right:0;
top:50%;
width:42%;
height:1px;
background:#29465f;
}
.divider span{
color:#9aa6b2;
}
/*==============================
GOOGLE BUTTON
==============================*/
.google-btn{
width:100%;
height:56px;
border-radius:50px;
background:transparent;
border:1px solid rgba(255,255,255,.15);
color:#fff;
transition:.35s;
}
.google-btn i{
margin-right:10px;
color:#EA4335;
}
.google-btn:hover{
border-color:#22d9ff;
background:#0d2943;
}
.password-box{
position:relative;
}
.password-box i{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
color:#9aa6b2;
cursor:pointer;
font-size:18px;
transition:.3s;
}
.password-box i:hover{
color:#22d9ff;
}
/*==============================
REGISTER
==============================*/
.register{
margin-top:25px;
text-align:center;
color:#d7d7d7;
}
/*==============================
RESPONSIVE
==============================*/
@media(max-width:991px){
.login-section{
padding:50px 20px;
}
.login-box{
padding:35px 25px;
}
.logo{
width:160px;
}
.login-box h2{
font-size:30px;
}
}
@media(max-width:576px){
.login-box{
padding:25px 18px;
border-radius:18px;
}
.login-box h2{
font-size:26px;
}
.form-control{
height:50px;
}
.login-btn,
.google-btn{
height:50px;
font-size:16px;
}
.logo{
width:140px;
margin:auto;
display:block;
margin-bottom:20px;
}
}
.registration-section{
position:relative;
padding:80px 0;
min-height:100vh;
background:#071b2d;
}
.registration-overlay{
position:absolute;
inset:0;
background:rgba(5,18,35,.85);
}
.container{
position:relative;
z-index:10;
}
.registration-image{
max-width:520px;
}
.registration-box{
background:#0b2238;
padding:40px;
border-radius:20px;
border:1px solid rgba(34,217,255,.15);
box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.registration-logo{
width:170px;
margin-bottom:20px;
}
.registration-box h2{
color:#fff;
font-size:36px;
font-weight:700;
}
.registration-box p{
color:#bfc9d4;
margin-bottom:30px;
}
.form-label{
color:#fff;
font-weight:500;
margin-bottom:8px;
display:block;
}
.form-control,
.form-select{
height:52px;
background:#102a44;
border:1px solid rgba(255,255,255,.08);
color:#fff;
}
textarea.form-control{
height:auto;
}
.form-control::placeholder{
color:#8ca1b4;
}
.form-control:focus,
.form-select:focus{
background:#102a44;
border-color:#22d9ff;
color:#fff;
box-shadow:none;
}
.registration-btn{
width:100%;
height:54px;
border:none;
border-radius:50px;
background:linear-gradient(135deg,#2DD9FF,#1089c5);
color:#fff;
font-weight:600;
font-size:18px;
}
.registration-btn:hover{
box-shadow:0 15px 30px rgba(34,217,255,.3);
}
.registration-btn-group{
margin-top:20px;
}
.registration-btn{
width:100%;
height:55px;
border:none;
border-radius:50px;
background:linear-gradient(135deg,#2DD9FF,#118BC8);
color:#fff;
font-size:18px;
font-weight:600;
margin-bottom:15px;
transition:.3s;
}
.registration-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(34,217,255,.35);
}
.login-page-btn{
width:100%;
height:55px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border:2px solid #22d9ff;
border-radius:50px;
color:#fff;
text-decoration:none;
font-size:17px;
font-weight:600;
transition:.3s;
}
.login-page-btn:hover{
background:#22d9ff;
color:#06182a;
}
.registration-password{
position:relative;
}
.registration-password span{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
color:#9aa6b2;
font-size:18px;
transition:.3s;
}
.registration-password span:hover{
color:#22d9ff;
}
@media(max-width:991px){
.registration-image{
display:none;
}
.registration-box{
margin-top:30px;
}
}
/* ==========================
TherapyWindows Floating CTA
========================== */
.fixed-consult-btn{
position:fixed;
right:20px;
bottom:20px;
z-index:99999;
display:flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,#0a243b,#0a243b);
color:#fff;
padding:14px 24px;
border-radius:50px;
font-size:15px;
font-weight:700;
text-decoration:none;
box-shadow:0 10px 30px rgba(0,159,196,.35);
transition:all .3s ease;
}
.fixed-consult-btn:hover{
background:linear-gradient(135deg,#8CC63F,#009FC4);
color:#fff;
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(0,159,196,.45);
}
.fixed-consult-btn i{
width:42px;
height:42px;
background:#fff;
color:#009FC4;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
@media(max-width:768px){
.fixed-consult-btn{
right:15px;
bottom:15px;
padding:12px 18px;
font-size:14px;
}
.fixed-consult-btn i{
width:38px;
height:38px;
font-size:16px;
}
}
/* Modal Header */
.consultation-modal .modal-header{
background:linear-gradient(135deg,#071a2d,#071a2d);
border:0;
padding:18px 20px;
}
.consultation-modal .modal-title{
color:#fff;
font-size:24px;
font-weight:700;
}
.consultation-modal .btn-close{
filter:brightness(0) invert(1);
}
/* Modal Box */
.consultation-modal .modal-content{
border-radius:18px;
border:none;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}
/* Body */
.consultation-modal .modal-body{
padding:30px;
}
.consultation-modal p{
color:#666;
text-align:center;
margin-bottom:25px;
font-size:16px;
}
/* Input */
.consultation-input{
width:100%;
height:55px;
border:2px solid #E8EEF3;
border-radius:12px;
padding:0 18px;
margin-bottom:18px;
font-size:16px;
outline:none;
transition:.3s;
}
.consultation-input:focus{
border-color:#009FC4;
box-shadow:0 0 10px rgba(0,159,196,.2);
}
/* Button */
.consultation-btn{
width:100%;
height:55px;
border:none;
border-radius:12px;
background: linear-gradient(135deg, #36E0D8 0%, #1798D2 100%);
color:#fff;
font-size:18px;
font-weight:600;
transition:.3s;
}
.consultation-btn:hover{
background:linear-gradient(135deg,#8CC63F,#009FC4);
}
/* Mobile */
@media(max-width:768px){
.consultation-modal .modal-body{
padding:20px;
}
.consultation-modal .modal-title{
font-size:20px;
}
}
/* Message Textarea */
.consultation-textarea{
width:100%;
min-height:130px;
padding:15px 18px;
border:2px solid #E5E7EB;
border-radius:12px;
font-size:16px;
font-family:inherit;
color:#333;
background:#fff;
resize:vertical;
outline:none;
transition:all .3s ease;
box-sizing:border-box;
}
.consultation-textarea::placeholder{
color:#9CA3AF;
}
.consultation-textarea:focus{
border-color:#009FC4;
box-shadow:0 0 0 4px rgba(0,159,196,.15);
}
/*====================================
ASD HERO
====================================*/
.asd-hero-section{
padding:170px 0 100px;
background:#041726;
position:relative;
overflow:hidden;
}
.asd-hero-section::before{
content:"";
position:absolute;
width:600px;
height:600px;
background:#48D8E8;
opacity:.05;
border-radius:50%;
right:-250px;
top:-250px;
}
.asd-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 20px;
background:rgba(72,216,232,.10);
border:1px solid rgba(72,216,232,.20);
border-radius:50px;
color:#48D8E8;
font-size:13px;
letter-spacing:2px;
margin-bottom:25px;
}
.asd-badge i{
font-size:16px;
}
.asd-hero-content h1{
color:#fff;
font-size:46px;
line-height:1.15;
margin-bottom:25px;
font-weight:700;
}
.asd-hero-content h1 span{
color:#48D8E8;
}
.asd-hero-content p{
color:#D8E4ED;
font-size:18px;
line-height:34px;
margin-bottom:35px;
}
.asd-btn-group{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-bottom:45px;
}
.asd-btn-primary{
padding:16px 35px;
background:#48D8E8;
color:#041726;
border-radius:50px;
font-weight:600;
text-decoration:none;
transition:.3s;
}
.asd-btn-primary:hover{
transform:translateY(-5px);
color:#041726;
}
.asd-btn-outline{
padding:16px 35px;
border:2px solid #48D8E8;
color:#fff;
border-radius:50px;
text-decoration:none;
transition:.3s;
}
.asd-btn-outline:hover{
background:#48D8E8;
color:#041726;
}
.asd-stats{
display:flex;
gap:50px;
}
.asd-stat h3{
color:#48D8E8;
font-size:34px;
margin-bottom:5px;
}
.asd-stat span{
color:#D8E4ED;
}
.asd-hero-image{
text-align:right;
}
.asd-hero-image img{
max-width:95%;
}
/* Mobile */
@media(max-width:991px){
.asd-hero-section{
padding:120px 0 70px;
text-align:center;
}
.asd-btn-group{
justify-content:center;
}
.asd-stats{
justify-content:center;
gap:25px;
margin-top:30px;
}
.asd-hero-image{
margin-top:40px;
text-align:center;
}
.asd-hero-content h1{
font-size:42px;
}
}
@media(max-width:576px){
.asd-hero-content h1{
font-size:34px;
}
.asd-hero-content p{
font-size:16px;
line-height:28px;
}
.asd-stats{
flex-direction:column;
gap:15px;
}
}
/*==================================
ASD QUICK FACTS
===================================*/
.asd-facts-section{
padding:80px 0;
background:#06192d;
position:relative;
overflow:hidden;
}
.asd-facts-section::before{
content:"";
position:absolute;
width:450px;
height:450px;
background:rgba(72,216,232,.05);
border-radius:50%;
top:-180px;
right:-180px;
filter:blur(80px);
}
.asd-section-tag{
display:inline-block;
color:#48D8E8;
letter-spacing:2px;
font-size:13px;
font-weight:600;
margin-bottom:15px;
text-transform:uppercase;
}
.asd-facts-section h2{
font-size:46px;
color:#ffffff;
margin-bottom:20px;
font-weight:700;
}
.asd-facts-section h2 span{
color:#48D8E8;
}
.asd-facts-section> .container> .row:first-child p{
color:#C9D9E4;
line-height:32px;
}
/*======================
Fact Box
=======================*/
.asd-fact-box{
background:#06192d;
border:1px solid rgba(72,216,232,.12);
border-radius:22px;
padding:35px 30px;
text-align:center;
height:100%;
transition:.35s;
position:relative;
}
.asd-fact-box:hover{
transform:translateY(-10px);
border-color:#48D8E8;
box-shadow:0 25px 50px rgba(0,0,0,.30);
}
/*======================
Icon
=======================*/
.fact-icon{
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
background:rgba(72,216,232,.12);
border:1px solid rgba(72,216,232,.18);
color:#48D8E8;
display:flex;
justify-content:center;
align-items:center;
font-size:32px;
transition:.35s;
}
.asd-fact-box:hover .fact-icon{
background:#48D8E8;
color:#041726;
}
/*======================
Content
=======================*/
.asd-fact-box h4{
font-size:24px;
color:#ffffff;
margin-bottom:15px;
font-weight:600;
}
.asd-fact-box p{
color:#C9D9E4;
line-height:28px;
margin:0;
}
/*======================
Responsive
=======================*/
@media(max-width:991px){
.asd-facts-section{
padding:80px 0;
}
.asd-facts-section h2{
font-size:40px;
}
}
@media(max-width:767px){
.asd-facts-section{
padding:70px 0;
}
.asd-facts-section h2{
font-size:30px;
line-height:1.3;
}
.asd-fact-box{
padding:25px 20px;
}
.fact-icon{
width:65px;
height:65px;
font-size:24px;
}
.asd-fact-box h4{
font-size:20px;
}
}
/*==================================
ABOUT ASD
===================================*/
.asd-about-section{
padding:80px 0;
background:#06192d;
}
.asd-about-image img{
width:100%;
border-radius:25px;
border:1px solid rgba(72,216,232,.15);
}
.asd-about-content{
padding-left:40px;
}
.asd-about-content h2{
color:#fff;
font-weight:700;
font-size:46px;
margin:20px 0;
line-height:1.2;
}
.asd-about-content h2 span{
color:#48D8E8;
}
.asd-about-content p{
color:#D8E4ED;
font-size:17px;
line-height:32px;
margin-bottom:20px;
}
.asd-feature-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:35px;
}
.asd-feature-list div{
display:flex;
align-items:center;
gap:12px;
color:#fff;
font-size:17px;
}
.asd-feature-list i{
color:#48D8E8;
font-size:20px;
}
@media(max-width:991px){
.asd-about-content{
padding-left:0;
margin-top:40px;
}
}
@media(max-width:767px){
.asd-about-section{
padding:80px 0;
}
.asd-about-content h2{
font-size:32px;
}
.asd-feature-list{
grid-template-columns:1fr;
}
}
/*==================================
ASD Symptoms
===================================*/
.asd-symptoms-section{
padding:80px 0;
background:#06192d;
}
.asd-symptoms-image img{
width:100%;
border-radius:25px;
}
.asd-symptoms-content{
padding-left:40px;
}
.asd-symptoms-content h2{
color:#fff;
font-size:46px;
font-weight: 700;
margin:20px 0;
line-height:1.2;
}
.asd-symptoms-content h2 span{
color:#48D8E8;
}
.asd-symptoms-content p{
color:#D8E4ED;
line-height:30px;
}
.asd-symptom-list{
margin-top:40px;
}
.asd-symptom-item{
display:flex;
align-items:flex-start;
gap:20px;
margin-bottom:30px;
}
.asd-symptom-item i{
width:60px;
height:60px;
border-radius:50%;
background:#48D8E8;
color:#041726;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
flex-shrink:0;
}
.asd-symptom-item h5{
color:#fff;
margin-bottom:8px;
font-size:22px;
}
.asd-symptom-item p{
color:#C8D8E3;
margin:0;
}
@media(max-width:991px){
.asd-symptoms-content{
padding-left:0;
margin-top:40px;
}
}
@media(max-width:767px){
.asd-symptoms-section{
padding:80px 0;
}
.asd-symptoms-content h2{
font-size:32px;
}
.asd-symptom-item{
gap:15px;
}
.asd-symptom-item i{
width:50px;
height:50px;
font-size:20px;
}
.asd-symptom-item h5{
font-size:18px;
}
}
/*==================================
ASD Causes
===================================*/
.asd-causes-section{
padding:80px 0;
background:#06192d;
}
.asd-causes-section h2{
color:#fff;
font-weight:700;
font-size:46px;
line-height:1.2;
margin:20px 0;
}
.asd-causes-section h2 span{
color:#48D8E8;
}
.asd-causes-section p{
color:#C8D8E3;
line-height:30px;
}
/* Timeline */
.asd-timeline{
position:relative;
max-width:900px;
margin:auto;
}
.asd-timeline::before{
content:"";
position:absolute;
left:30px;
top:0;
width:3px;
height:100%;
background:rgba(72,216,232,.25);
}
.asd-timeline-item{
position:relative;
display:flex;
gap:30px;
margin-bottom:45px;
}
.timeline-icon{
width:60px;
height:60px;
background:#48D8E8;
color:#041726;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
z-index:2;
flex-shrink:0;
}
.timeline-content{
flex:1;
background:#0B243B;
border:1px solid rgba(72,216,232,.15);
border-radius:18px;
padding:28px;
transition:.3s;
}
.timeline-content:hover{
border-color:#48D8E8;
transform:translateY(-4px);
}
.timeline-content h4{
color:#fff;
margin-bottom:12px;
}
.timeline-content p{
margin:0;
}
@media(max-width:767px){
.asd-causes-section{
padding:80px 0;
}
.asd-causes-section h2{
font-size:32px;
}
.asd-timeline::before{
left:25px;
}
.timeline-icon{
width:50px;
height:50px;
font-size:20px;
}
.timeline-content{
padding:20px;
}
}
/*==================================
Diagnosis Process
===================================*/
.asd-diagnosis-section{
padding:80px 0;
background:#06192d;
}
.asd-diagnosis-section h2{
color:#fff;
font-weight:700;
font-size:46px;
line-height:1.2;
margin:20px 0;
}
.asd-diagnosis-section h2 span{
color:#48D8E8;
}
.asd-diagnosis-section p{
color:#C9D9E4;
}
.diagnosis-step{
position:relative;
background:#0c243c;
border:1px solid rgba(72,216,232,.15);
border-radius:22px;
padding:40px 25px;
text-align:center;
height:100%;
transition:.35s;
}
.diagnosis-step:hover{
transform:translateY(-8px);
border-color:#48D8E8;
}
.step-number{
position:absolute;
top:20px;
right:20px;
color:#48D8E8;
font-size:18px;
font-weight:700;
}
.step-icon{
width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
background:rgba(72,216,232,.12);
display:flex;
justify-content:center;
align-items:center;
color:#48D8E8;
font-size:34px;
}
.diagnosis-step h4{
color:#fff;
margin-bottom:15px;
}
.diagnosis-step p{
color:#C9D9E4;
line-height:28px;
}
@media(max-width:991px){
.diagnosis-step{
margin-bottom:25px;
}
}
@media(max-width:767px){
.asd-diagnosis-section{
padding:80px 0;
}
.asd-diagnosis-section h2{
font-size:34px;
}
.step-icon{
width:65px;
height:65px;
font-size:28px;
}
}
/*==================================
ASD FAQ
===================================*/
.asd-faq-section{
padding:80px 0;
background:#06192d;
}
.asd-faq-section h2{
color:#fff;
line-height:1.2;
font-size:48px;
margin:20px 0;
font-weight:700;
}
.asd-faq-section h2 span{
color:#48D8E8;
}
.asd-faq-section p{
color:#C9D9E4;
}
/* Accordion */
.asd-faq .accordion-item{
background:#0c243c;
border:1px solid rgba(72,216,232,.15);
border-radius:16px;
margin-bottom:18px;
overflow:hidden;
}
.asd-faq .accordion-button{
background:#0c243c;
color:#fff;
font-size:18px;
font-weight:600;
padding:22px 25px;
box-shadow:none;
}
.asd-faq .accordion-button:not(.collapsed){
background:#48D8E8;
color:#041726;
}
.asd-faq .accordion-button:focus{
box-shadow:none;
}
.asd-faq .accordion-button::after{
filter:brightness(0) invert(1);
}
.asd-faq .accordion-button:not(.collapsed)::after{
filter:none;
}
.asd-faq .accordion-body{
background:#0c243c;
color:#C9D9E4;
line-height:30px;
padding:25px;
}
@media(max-width:767px){
.asd-faq-section{
padding:80px 0;
}
.asd-faq-section h2{
font-size:32px;
}
.asd-faq .accordion-button{
font-size:16px;
padding:18px;
}
}