/* =========================================================
Dr. Maryam Dana Psychology Website
Developed by Aryia AEZ Team
========================================================= */

/* ---------- Google Font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

/* ---------- Variables ---------- */

:root{

--primary:#9E8CFF;
--secondary:#6CB8FF;
--bg:#F5F8FF;
--white:#ffffff;
--dark:#293246;
--text:#4F5A70;

--glass:rgba(255,255,255,.22);

--border:rgba(255,255,255,.28);

--shadow:0 20px 45px rgba(63,81,181,.15);

--radius:26px;

--transition:.35s ease;

}

/* ---------- Reset ---------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

html{
overflow-x:hidden;
}

body{

font-family:'Vazirmatn',sans-serif;

background:linear-gradient(
135deg,
#f5f8ff,
#eef4ff,
#faf6ff);

background-size:400% 400%;

animation:bgMove 14s ease infinite;

color:var(--text);

overflow-x:hidden;

position:relative;

}

/* ---------- Animated Background ---------- */

body::before{

content:"";

position:fixed;

width:600px;
height:600px;

background:#B49CFF;

filter:blur(170px);

opacity:.18;

top:-180px;

left:-150px;

animation:blob1 12s infinite alternate;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:650px;
height:650px;

background:#8AC8FF;

filter:blur(180px);

opacity:.15;

bottom:-220px;

right:-220px;

animation:blob2 16s infinite alternate;

z-index:-2;

}

/* ---------- Selection ---------- */

::selection{

background:var(--primary);

color:white;

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF3FF;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--secondary));

border-radius:100px;

}

/* ---------- Typography ---------- */

h1,h2,h3,h4{

color:var(--dark);

font-weight:800;

line-height:1.4;

}

p{

line-height:2;

font-size:17px;

}

/* ---------- Container ---------- */

.container{

width:min(1180px,92%);

margin:auto;

}

/* ---------- Glass ---------- */

.glass{

background:rgba(255,255,255,.24);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/* ---------- Buttons ---------- */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:999px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:var(--transition);

text-decoration:none;

border:none;

position:relative;

overflow:hidden;

}

.btn-primary{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

color:white;

box-shadow:0 15px 35px rgba(122,129,255,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 25px 55px rgba(122,129,255,.45);

}

.btn-secondary{

background:white;

color:var(--primary);

}

.btn-secondary:hover{

transform:translateY(-5px);

}

/* ---------- Section ---------- */

section{

padding:110px 0;

position:relative;

}

/* ---------- Animation ---------- */

.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade-up.active{

opacity:1;

transform:none;

}

/* ---------- Keyframes ---------- */

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

@keyframes blob1{

from{

transform:translateY(0) translateX(0);

}

to{

transform:translateY(120px) translateX(80px);

}

}

@keyframes blob2{

from{

transform:translateY(0) translateX(0);

}

to{

transform:translateY(-90px) translateX(-120px);

}

}



/* ==========================================================
NAVBAR
========================================================== */

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.4s;

padding:18px 0;

}

header.scrolled{

padding:12px 0;

background:rgba(255,255,255,.55);

backdrop-filter:blur(18px);

box-shadow:0 15px 40px rgba(0,0,0,.06);

border-bottom:1px solid rgba(255,255,255,.35);

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

}

/* ========= Logo ========= */

.logo{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

}

.logo-circle{

width:56px;

height:56px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--secondary));

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;

font-weight:800;

box-shadow:0 15px 35px rgba(120,120,255,.35);

transition:.4s;

}

.logo:hover .logo-circle{

transform:rotate(10deg) scale(1.08);

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text h3{

font-size:20px;

color:var(--dark);

font-weight:800;

}

.logo-text span{

font-size:13px;

color:#7c86a5;

margin-top:3px;

}

/* ========= Menu ========= */

.nav-links{

display:flex;

align-items:center;

gap:38px;

}

.nav-links a{

position:relative;

text-decoration:none;

color:var(--dark);

font-size:16px;

font-weight:700;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

bottom:-8px;

left:50%;

transform:translateX(-50%);

width:0;

height:3px;

border-radius:50px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

transition:.35s;

}

.nav-links a:hover::after{

width:100%;

}

/* ========= CTA ========= */

.nav-btn{

padding:14px 28px;

border-radius:999px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

text-decoration:none;

font-weight:700;

box-shadow:0 15px 35px rgba(110,120,255,.35);

transition:.35s;

}

.nav-btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(110,120,255,.45);

}

/* ========= Mobile Icon ========= */

.menu-toggle{

display:none;

width:50px;

height:50px;

border-radius:50%;

background:rgba(255,255,255,.4);

backdrop-filter:blur(15px);

cursor:pointer;

align-items:center;

justify-content:center;

border:1px solid rgba(255,255,255,.35);

transition:.3s;

}

.menu-toggle:hover{

transform:rotate(90deg);

}

.menu-toggle span{

display:block;

width:24px;

height:3px;

background:var(--dark);

position:relative;

border-radius:20px;

}

.menu-toggle span::before,

.menu-toggle span::after{

content:"";

position:absolute;

left:0;

width:24px;

height:3px;

background:var(--dark);

border-radius:20px;

transition:.35s;

}

.menu-toggle span::before{

top:-7px;

}

.menu-toggle span::after{

bottom:-7px;

}

/* ========= Mobile Menu ========= */

@media(max-width:980px){

.menu-toggle{

display:flex;

}

.nav-links{

position:fixed;

top:0;

right:-100%;

width:310px;

height:100vh;

background:rgba(255,255,255,.88);

backdrop-filter:blur(20px);

display:flex;

flex-direction:column;

justify-content:center;

gap:35px;

transition:.45s;

box-shadow:-20px 0 60px rgba(0,0,0,.08);

}

.nav-links.active{

right:0;

}

.nav-links a{

font-size:20px;

}

.nav-btn{

display:none;

}

}

/* ========= Desktop ========= */

@media(max-width:1180px){

.nav-links{

gap:26px;

}

}



/* ==========================================================
HERO
========================================================== */

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:120px;

overflow:hidden;

position:relative;

}

/* ========= Layout ========= */

.hero-content{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

/* ========= Left ========= */

.hero-text{

animation:fadeHero 1.2s ease;

}

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:999px;

background:rgba(255,255,255,.35);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.35);

font-size:14px;

font-weight:700;

margin-bottom:28px;

color:var(--primary);

}

.hero-text h1{

font-size:64px;

font-weight:900;

line-height:1.25;

color:var(--dark);

margin-bottom:18px;

}

.hero-text h1 span{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-text p{

font-size:19px;

line-height:2.1;

max-width:560px;

margin-bottom:40px;

}

/* ========= Buttons ========= */

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

/* ========= Right ========= */

.hero-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

/* ========= Main Card ========= */

.image-card{

width:470px;

height:620px;

border-radius:40px;

background:rgba(255,255,255,.25);

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.35);

overflow:hidden;

box-shadow:0 30px 60px rgba(50,70,120,.18);

position:relative;

animation:floatCard 6s ease-in-out infinite;

}

/* ========= Doctor Image ========= */

.image-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}

.image-card:hover img{

transform:scale(1.05);

}

/* ========= Glow ========= */

.image-card::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:var(--primary);

filter:blur(140px);

opacity:.18;

top:-80px;

right:-60px;

z-index:0;

}

.image-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:var(--secondary);

filter:blur(130px);

opacity:.15;

bottom:-70px;

left:-70px;

}

/* ========= Rotating Ring ========= */

.hero-ring{

position:absolute;

width:560px;

height:560px;

border-radius:50%;

border:2px dashed rgba(140,160,255,.35);

animation:rotateRing 30s linear infinite;

}

/* ========= Small Floating Cards ========= */

.floating-box{

position:absolute;

padding:18px 22px;

background:rgba(255,255,255,.45);

backdrop-filter:blur(18px);

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

font-size:15px;

font-weight:700;

animation:floatSmall 4s ease-in-out infinite;

}

.box1{

top:70px;

left:-40px;

}

.box2{

bottom:100px;

right:-35px;

animation-delay:2s;

}

/* ========= Decorative Circles ========= */

.circle{

position:absolute;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

opacity:.15;

filter:blur(15px);

}

.circle.one{

width:90px;

height:90px;

top:30px;

right:80px;

animation:floatCircle 5s infinite ease-in-out;

}

.circle.two{

width:140px;

height:140px;

bottom:40px;

left:40px;

animation:floatCircle 8s infinite ease-in-out;

}

/* ========= Animations ========= */

@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes floatSmall{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatCircle{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

@keyframes fadeHero{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:none;

}

}

/* ========= Responsive ========= */

@media(max-width:1100px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-text p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.image-card{

width:390px;

height:520px;

margin-top:50px;

}

.hero-ring{

width:470px;

height:470px;

}

}

@media(max-width:650px){

.hero-text h1{

font-size:42px;

}

.hero-text p{

font-size:17px;

}

.image-card{

width:310px;

height:420px;

}

.hero-ring{

width:360px;

height:360px;

}

.floating-box{

display:none;

}

}




/* ==========================================================
ABOUT SECTION
========================================================== */

.about{

position:relative;

overflow:hidden;

}

.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

/* Left */

.about-image{

position:relative;

display:flex;

justify-content:center;

}

.about-image .glass{

width:430px;

height:560px;

padding:18px;

border-radius:38px;

overflow:hidden;

position:relative;

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

border-radius:28px;

transition:.6s;

}

.about-image:hover img{

transform:scale(1.04);

}

.about-image::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:var(--primary);

filter:blur(100px);

opacity:.18;

top:-20px;

left:-40px;

z-index:-1;

}

.about-image::after{

content:"";

position:absolute;

width:180px;

height:180px;

background:var(--secondary);

filter:blur(110px);

opacity:.15;

bottom:-40px;

right:-30px;

z-index:-1;

}

/* Right */

.about-content h5{

display:inline-block;

padding:10px 22px;

background:rgba(255,255,255,.4);

border-radius:999px;

color:var(--primary);

font-size:14px;

margin-bottom:22px;

font-weight:700;

}

.about-content h2{

font-size:46px;

margin-bottom:24px;

}

.about-content p{

margin-bottom:20px;

font-size:17px;

}

/* Feature */

.about-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

margin-top:35px;

}

.about-item{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:22px;

background:rgba(255,255,255,.32);

backdrop-filter:blur(16px);

transition:.35s;

}

.about-item:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(70,90,170,.15);

}

.about-item i{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:22px;

}

/* ==========================================================
SERVICES
========================================================== */

.services{

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:46px;

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

}

.services-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:32px;

}

.service-card{

position:relative;

padding:40px;

border-radius:32px;

background:rgba(255,255,255,.30);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

transition:.45s;

overflow:hidden;

cursor:pointer;

}

.service-card::before{

content:"";

position:absolute;

width:260px;

height:260px;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

border-radius:50%;

filter:blur(90px);

opacity:0;

transition:.5s;

top:-100px;

right:-100px;

}

.service-card:hover::before{

opacity:.18;

}

.service-card:hover{

transform:translateY(-15px);

box-shadow:0 28px 55px rgba(80,90,180,.18);

}

.service-icon{

width:78px;

height:78px;

border-radius:24px;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

margin-bottom:28px;

box-shadow:0 20px 35px rgba(90,110,255,.28);

transition:.45s;

}

.service-card:hover .service-icon{

transform:rotate(10deg) scale(1.08);

}

.service-card h3{

font-size:28px;

margin-bottom:18px;

}

.service-card p{

font-size:16px;

line-height:2;

}

/* floating line */

.service-card span{

position:absolute;

width:70px;

height:5px;

background:linear-gradient(

90deg,

var(--primary),

var(--secondary)

);

bottom:0;

left:0;

transition:.45s;

}

.service-card:hover span{

width:100%;

}

/* ==========================================================
Responsive
========================================================== */

@media(max-width:1050px){

.about-wrapper{

grid-template-columns:1fr;

}

.about-content{

text-align:center;

}

.about-list{

margin-top:40px;

}

.services-grid{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.about-image .glass{

width:320px;

height:430px;

}

.about-content h2{

font-size:34px;

}

.section-title h2{

font-size:34px;

}

.about-list{

grid-template-columns:1fr;

}

.service-card{

padding:28px;

}

}


/* ==========================================================
STATISTICS
========================================================== */

.statistics{

position:relative;

padding:110px 0;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

margin-top:50px;

}

.stat-card{

padding:35px 25px;

text-align:center;

border-radius:30px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

transition:.4s;

box-shadow:0 15px 35px rgba(80,90,180,.08);

position:relative;

overflow:hidden;

}

.stat-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

filter:blur(90px);

opacity:0;

top:-100px;

right:-100px;

transition:.5s;

}

.stat-card:hover::before{

opacity:.18;

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:0 28px 55px rgba(80,90,180,.18);

}

.stat-number{

font-size:52px;

font-weight:900;

background:linear-gradient(135deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:12px;

}

.stat-title{

font-size:18px;

font-weight:700;

color:var(--dark);

}

/* ==========================================================
TESTIMONIALS
========================================================== */

.testimonials{

padding:120px 0;

position:relative;

}

.testimonial-slider{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

margin-top:60px;

}

.testimonial-card{

padding:35px;

border-radius:30px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

transition:.4s;

position:relative;

overflow:hidden;

}

.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(70,90,170,.15);

}

.quote{

font-size:70px;

line-height:1;

opacity:.08;

position:absolute;

top:20px;

left:25px;

font-family:serif;

}

.stars{

margin-bottom:20px;

color:#FFC94A;

font-size:18px;

letter-spacing:2px;

}

.testimonial-card p{

line-height:2;

margin-bottom:25px;

}

.client{

display:flex;

align-items:center;

gap:15px;

}

.client img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}

.client h4{

font-size:18px;

margin-bottom:3px;

}

.client span{

font-size:14px;

color:#7c84a0;

}

/* ==========================================================
LOCATION
========================================================== */

.location{

padding:120px 0;

}

.location-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:45px;

align-items:stretch;

}

.location-card{

padding:40px;

border-radius:32px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

box-shadow:0 18px 40px rgba(80,90,180,.10);

}

.location-card h2{

font-size:42px;

margin-bottom:20px;

}

.location-card p{

margin-bottom:28px;

line-height:2;

}

.info-item{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:22px;

}

.info-item .icon{

min-width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:22px;

box-shadow:0 15px 30px rgba(120,120,255,.25);

}

.info-item h4{

font-size:18px;

margin-bottom:6px;

}

.info-item span{

font-size:15px;

color:#6b748d;

line-height:1.9;

}

.map-box{

border-radius:32px;

overflow:hidden;

min-height:450px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

box-shadow:0 18px 40px rgba(80,90,180,.10);

}

.map-box iframe{

width:100%;

height:100%;

border:none;

}

/* ==========================================================
Responsive
========================================================== */

@media(max-width:1100px){

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.testimonial-slider{

grid-template-columns:1fr;

}

.location-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.stats-grid{

grid-template-columns:1fr;

}

.stat-card{

padding:28px;

}

.stat-number{

font-size:42px;

}

.location-card{

padding:28px;

}

.location-card h2{

font-size:34px;

}

.client{

flex-direction:column;

text-align:center;

}

}


 

/* ==========================================================
APPOINTMENT
========================================================== */

.appointment{

position:relative;

padding:120px 0;

overflow:hidden;

}

.appointment::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:var(--primary);

filter:blur(180px);

opacity:.15;

top:-120px;

left:-100px;

z-index:-1;

}

.appointment::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:var(--secondary);

filter:blur(180px);

opacity:.15;

bottom:-120px;

right:-100px;

z-index:-1;

}

.appointment-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

padding:60px;

border-radius:35px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

box-shadow:0 25px 60px rgba(70,90,170,.12);

}

.appointment-info h2{

font-size:48px;

margin-bottom:25px;

}

.appointment-info p{

font-size:17px;

line-height:2.1;

margin-bottom:25px;

}

.contact-item{

display:flex;

align-items:center;

gap:18px;

margin-bottom:20px;

}

.contact-item .icon{

width:58px;

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:24px;

box-shadow:0 15px 30px rgba(120,120,255,.25);

}

/* ================= FORM ================= */

.booking-form{

display:flex;

flex-direction:column;

gap:22px;

}

.booking-form input,

.booking-form textarea{

width:100%;

padding:18px 22px;

border:none;

outline:none;

border-radius:18px;

background:rgba(255,255,255,.55);

backdrop-filter:blur(15px);

font-family:inherit;

font-size:16px;

color:var(--dark);

transition:.35s;

}

.booking-form textarea{

height:170px;

resize:none;

}

.booking-form input:focus,

.booking-form textarea:focus{

box-shadow:0 0 0 4px rgba(155,140,255,.18);

transform:translateY(-2px);

}

.booking-form input::placeholder,

.booking-form textarea::placeholder{

color:#7a84a3;

}

.booking-form button{

padding:18px;

border:none;

border-radius:18px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:0 18px 35px rgba(120,120,255,.28);

}

.booking-form button:hover{

transform:translateY(-6px);

box-shadow:0 28px 50px rgba(120,120,255,.40);

}

/* ==========================================================
FOOTER
========================================================== */

footer{

margin-top:120px;

padding:80px 0 30px;

position:relative;

background:linear-gradient(

135deg,

#eef4ff,

#f9fbff

);

overflow:hidden;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:45px;

}

.footer-box h3{

font-size:26px;

margin-bottom:20px;

}

.footer-box p{

line-height:2;

}

.footer-links{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-links a{

text-decoration:none;

color:var(--text);

transition:.3s;

font-weight:600;

}

.footer-links a:hover{

padding-right:8px;

color:var(--primary);

}

.socials{

display:flex;

gap:14px;

margin-top:25px;

}

.socials a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

color:var(--primary);

font-size:20px;

box-shadow:0 12px 25px rgba(70,90,170,.12);

transition:.35s;

}

.socials a:hover{

transform:translateY(-6px) rotate(10deg);

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

}

.footer-bottom{

margin-top:55px;

padding-top:25px;

border-top:1px solid rgba(150,160,200,.18);

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

font-size:15px;

}

.footer-bottom span{

font-weight:700;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ================= Responsive ================= */

@media(max-width:1050px){

.appointment-box{

grid-template-columns:1fr;

padding:40px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.socials{

justify-content:center;

}

.footer-bottom{

justify-content:center;

text-align:center;

}

}

@media(max-width:700px){

.appointment-info h2{

font-size:36px;

}

.appointment-box{

padding:28px;

}

footer{

padding:60px 0 25px;

}

}


/* ==========================================================
FINAL EFFECTS
========================================================== */


/* ================= SCROLL PROGRESS ================= */

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0%;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

z-index:9999;

}


/* ================= PRELOADER ================= */

.loader{

position:fixed;

inset:0;

background:linear-gradient(
135deg,
#f5f8ff,
#ffffff
);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.6s;

}


.loader.hide{

opacity:0;

visibility:hidden;

}


.loader-circle{

width:80px;

height:80px;

border-radius:50%;

border:5px solid rgba(150,150,255,.2);

border-top-color:var(--primary);

animation:loaderSpin 1s linear infinite;

}


@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}



/* ================= BACK TO TOP ================= */

.back-top{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

font-size:22px;

cursor:pointer;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.4s;

box-shadow:0 15px 35px rgba(100,120,255,.35);

z-index:999;

}


.back-top.active{

opacity:1;

visibility:visible;

transform:none;

}


.back-top:hover{

transform:translateY(-8px);

}



/* ================= REVEAL ================= */

.reveal{

opacity:0;

transform:translateY(50px);

transition:1s ease;

}


.reveal.show{

opacity:1;

transform:none;

}


/* ================= FLOAT ELEMENT ================= */

.float{

animation:floating 5s ease-in-out infinite;

}


@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}



/* ================= GLOW CURSOR ================= */


.cursor-glow{

position:fixed;

width:35px;

height:35px;

border-radius:50%;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

filter:blur(18px);

opacity:.35;

pointer-events:none;

z-index:99999;

}


/* ================= LARGE SCREEN ================= */


@media(min-width:1600px){


.container{

width:1400px;

}


.hero-text h1{

font-size:78px;

}


.section-title h2{

font-size:60px;

}


}



/* ================= TABLET ================= */


@media(max-width:900px){


section{

padding:80px 0;

}


.hero{

padding-top:100px;

}


.hero-text h1{

font-size:48px;

}


.hero-content{

gap:40px;

}


.footer-grid{

gap:30px;

}


}



/* ================= MOBILE ================= */


@media(max-width:600px){


.container{

width:90%;

}


body{

font-size:15px;

}


.hero-text h1{

font-size:36px;

line-height:1.5;

}


.hero-text p{

font-size:16px;

}


.btn{

width:100%;

}


.hero-buttons{

flex-direction:column;

}


.image-card{

animation:none;

}


.section-title h2{

font-size:30px;

}


.section-title p{

font-size:15px;

}


.service-card h3{

font-size:23px;

}


.appointment-info h2{

font-size:32px;

}


.booking-form input,

.booking-form textarea{

padding:15px;

}


.back-top{

width:48px;

height:48px;

right:20px;

bottom:20px;

}


.cursor-glow{

display:none;

}


}



/* ================= SAFARI FIX ================= */


@supports (-webkit-touch-callout:none){


.hero{

min-height:-webkit-fill-available;

}


}


/* ================= ACCESSIBILITY ================= */


@media(prefers-reduced-motion:reduce){


*,
*::before,
*::after{

animation-duration:.01ms!important;

animation-iteration-count:1!important;

scroll-behavior:auto!important;

transition-duration:.01ms!important;

}


}

.copyright a{
color:#2563eb;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.copyright a:hover{
color:#0ea5e9;
text-shadow:0 0 12px rgba(37,99,235,.5);
}