/*=====================================================
BETTER DAYS
Premium Psychology Landing Page
PART 1
======================================================*/


/*=====================================================
GOOGLE FONTS
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');


/*=====================================================
ROOT VARIABLES
======================================================*/

:root{

--bg:#0b0b0b;
--glass:rgba(18,18,18,.58);
--glass2:rgba(30,30,30,.45);

--gold:#d4af37;
--gold2:#f0d47a;

--text:#ffffff;
--text2:#d9d9d9;
--muted:#aaaaaa;

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

--shadow:
0 15px 45px rgba(0,0,0,.35);

--radius:24px;

--transition:.35s cubic-bezier(.2,.8,.2,1);

}


/*=====================================================
RESET
======================================================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
color:var(--text);

overflow-x:hidden;

line-height:1.8;

/* GLOBAL WEBSITE BACKGROUND */
/*
background-image:

linear-gradient(
rgba(5,5,5,.42),
rgba(5,5,5,.42)
),

url("background.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed; */

}
.site-background{

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            rgba(5,5,5,.42),
            rgba(5,5,5,.42)
        ),
        url("background.png") center center / cover no-repeat;

    z-index:-1;

    pointer-events:none;

    overflow:hidden;

    transform:translateZ(0);

    will-change:transform;

}

/*=====================================================
GLOBAL TYPOGRAPHY
======================================================*/

h1,h2,h3,h4{

font-family:'Cormorant Garamond',serif;
font-weight:600;
letter-spacing:.4px;

}

h1{

font-size:78px;
line-height:1.05;

}

h2{

font-size:60px;
margin-bottom:22px;

}

h3{

font-size:34px;

}

p{

font-size:18px;
color:var(--text2);

}

.subtitle{

max-width:760px;

margin:auto;

margin-bottom:65px;

text-align:center;

color:#d2d2d2;

font-size:19px;

}

/*=====================================================
SECTION HEADINGS
=====================================================*/

.section-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-tag{

    display:block;

    font-size:13px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:24px;

}

.section-heading h2{

    margin-bottom:24px;

    line-height:1.15;

}

.section-heading p{

    max-width:700px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text2);

}

/*=====================================================
GENERAL
======================================================*/

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}


/*=====================================================
CONTAINER
======================================================*/

.container{

width:min(92%,1250px);

margin:auto;

}


/*=====================================================
EVERY SECTION
======================================================*/

section{

position:relative;

padding:110px 0;

}

/* Glass overlay */

section::before{

content:"";

position:absolute;

inset:0;

background:

rgba(8,8,8,.48);

backdrop-filter:

none;

z-index:-1;

}


/*=====================================================
PREMIUM SCROLLBAR
======================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

var(--gold),

#b98d14

);

border-radius:20px;

}


/*=====================================================
TEXT SELECTION
======================================================*/

::selection{

background:var(--gold);

color:black;

}


/*=====================================================
HEADER
======================================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.4s;

background:

rgba(10,10,10,.45);

backdrop-filter:

blur(20px);

border-bottom:

1px solid rgba(255,255,255,.05);

}


/*=====================================================
NAVIGATION
======================================================*/

nav{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo img{

height:62px;

}

nav ul{

display:flex;

gap:42px;

align-items:center;

}

nav ul li a{

font-size:15px;

font-weight:500;

color:#d5d5d5;

position:relative;

transition:var(--transition);

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-7px;

height:2px;

width:0;

background:var(--gold);

transition:.35s;

}

nav ul li a:hover{

color:white;

}

nav ul li a:hover::after{

width:100%;

}


/*=====================================================
BUTTONS
======================================================*/

.primary-btn,
.secondary-btn,
.btn-nav{

display:inline-flex;

justify-content:center;

align-items:center;

padding:17px 34px;

border-radius:100px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.primary-btn,
.btn-nav{

background:

linear-gradient(
135deg,
var(--gold),
#b98d14
);

color:black;

box-shadow:

0 15px 35px rgba(212,175,55,.28);

}

.primary-btn:hover,
.btn-nav:hover{

transform:

translateY(-4px);

box-shadow:

0 20px 50px rgba(212,175,55,.45);

}

.secondary-btn{

border:

1px solid rgba(255,255,255,.15);

background:

rgba(255,255,255,.05);

backdrop-filter:

blur(12px);

color:white;

}

.secondary-btn:hover{

background:

rgba(255,255,255,.12);

transform:

translateY(-4px);

}


/*=====================================================
SMALL UTILITIES
======================================================*/

.gold{

color:var(--gold);

}

.center{

text-align:center;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:35px;

}

.mt-4{

margin-top:55px;

}

.shadow{

box-shadow:var(--shadow);

}

.round{

border-radius:var(--radius);

}

/*=====================================================
PART 2A
HERO SECTION
======================================================*/


.hero{

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding-top:120px;

padding-bottom:80px;

}


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

.hero-content{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:70px;

align-items:center;

}


/*----------------------------------
Left Side
-----------------------------------*/

.hero-left{

position:relative;

z-index:5;

}

.hero-left h5{

display:inline-block;

padding:10px 22px;

border-radius:50px;

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

backdrop-filter:blur(12px);

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

letter-spacing:2px;

font-size:13px;

font-weight:600;

text-transform:uppercase;

color:var(--gold);

margin-bottom:28px;

}

.hero-left h1{

font-size:78px;

line-height:1.05;

margin-bottom:28px;

max-width:700px;

}

.hero-left .hero-subtitle{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-size:42px;      /* Adjust as desired */
    font-weight:600;
    line-height:1.15;
    margin-top:14px;
    margin-bottom:24px;
    color:#ffffff;
}

.hero-left p{

max-width:620px;

font-size:19px;

line-height:1.9;

margin-bottom:40px;

color:#dddddd;

}


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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:45px;

}


/*----------------------------------
Trust Features
-----------------------------------*/

.hero-features{

display:grid;

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

gap:18px;

max-width:650px;

}

.hero-features div{

display:flex;

align-items:center;

gap:14px;

padding:16px 20px;

border-radius:18px;

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

backdrop-filter:blur(10px);

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

transition:var(--transition);

}

.hero-features div:hover{

transform:translateY(-4px);

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

}

.hero-features i{

font-size:20px;

color:var(--gold);

min-width:22px;

}

.hero-features span{

font-size:15px;

font-weight:500;

color:#eeeeee;

}


/*----------------------------------
Right Side
-----------------------------------*/

.hero-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
}


/* Glow */

.hero-right::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.22),

transparent 70%);

filter:blur(40px);

z-index:0;

}


/* Image */

.hero-right img{

position:relative;

z-index:2;

width:100%;

max-width:500px;

border-radius:28px;

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

box-shadow:

0 30px 70px rgba(0,0,0,.45);

transition:all .5s ease;

}

.hero-right img:hover{

transform:

translateY(-8px)

scale(1.02);

}


/* Floating Card */

.hero-card{

    position:relative;

    left:0;

    bottom:0;

    margin-top:25px;

    z-index:10;

    padding:22px 26px;

    border-radius:22px;

    background:rgba(18,18,18,.72);

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow);

    min-width:240px;

}

.hero-card h4{

font-size:30px;

margin-bottom:4px;

color:white;

}

.hero-card p{

font-size:15px;

margin:0;

color:#cfcfcf;

}

.hero-card i{

color:var(--gold);

margin-right:8px;

}


/*----------------------------------
Scroll Indicator
-----------------------------------*/

.scroll-indicator{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

color:#d8d8d8;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

}

.scroll-indicator span{

width:2px;

height:48px;

background:linear-gradient(

transparent,

var(--gold),

transparent);

animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

0%{

transform:translateY(-10px);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:translateY(10px);

opacity:0;

}

}


/*----------------------------------
Entrance Animations
-----------------------------------*/

.hero-left{

animation:fadeLeft .9s ease;

}

.hero-right{

animation:fadeRight .9s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-45px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(45px);

}

to{

opacity:1;

transform:none;

}

}


/*----------------------------------
Tablet
-----------------------------------*/

@media(max-width:1100px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.hero-left h1{

margin:auto;

margin-bottom:30px;

font-size:64px;

}

.hero-left .hero-subtitle{
    font-size:40px;
    line-height:1.2;
}

.hero-left p{

margin:auto;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

margin:auto;

}

.hero-card{

position:relative;

left:auto;

bottom:auto;

margin-top:-40px;

}

}


/*----------------------------------
Mobile
-----------------------------------*/

@media(max-width:768px){

.hero{

padding-top:150px;

}

.hero-left h1{

font-size:46px;

}

.hero-left .hero-subtitle{
    font-size:28px;
    line-height:1.25;
}

.hero-left p{

font-size:17px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .primary-btn,

.hero-buttons .secondary-btn{

width:100%;

}

.hero-right img{

max-width:340px;

}

.hero-card{

min-width:unset;

width:100%;

max-width:320px;

margin:auto;

margin-top:-30px;

}

.scroll-indicator{

display:none;

}

}

/*=====================================================
PART 2B
TRUST + SERVICES
======================================================*/


/*=====================================================
TRUST SECTION
======================================================*/

.trust{

text-align:center;

}

.trust .container{

max-width:1000px;

}

.trust h2{

margin-bottom:25px;

}

.trust p{

font-size:19px;

line-height:2;

color:var(--text2);

margin-bottom:55px;

}


/*----------------------------------
Trust Stats
-----------------------------------*/

.trust-stats{

display:grid;

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

gap:25px;

margin-top:20px;

}

.trust-box{

padding:35px;

border-radius:26px;

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

backdrop-filter:blur(14px);

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

transition:var(--transition);

}

.trust-box:hover{

transform:translateY(-8px);

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

box-shadow:var(--shadow);

}

.trust-box h3{

font-size:48px;

color:var(--gold);

margin-bottom:8px;

}

.trust-box p{

font-size:16px;

margin:0;

color:#d6d6d6;

}


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

.services{

text-align:center;

}

.cards{

display:grid;

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

gap:35px;

margin-top:70px;

}


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

.card{

padding:45px 35px;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

transition:var(--transition);

position:relative;

overflow:hidden;

}


/* Gold glow */

.card::before{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.18),

transparent 70%);

top:-110px;

right:-110px;

opacity:0;

transition:.45s;

}

.card:hover::before{

opacity:1;

}

.card:hover{

transform:

translateY(-12px);

border-color:

rgba(212,175,55,.35);

box-shadow:

0 30px 60px rgba(0,0,0,.35);

}


/*----------------------------------
Icon
-----------------------------------*/

.card i{

font-size:52px;

margin-bottom:28px;

color:var(--gold);

}


/*----------------------------------
Heading
-----------------------------------*/

.card h3{

font-size:34px;

margin-bottom:18px;

}


/*----------------------------------
Description
-----------------------------------*/

.card p{

font-size:17px;

line-height:1.9;

color:#d6d6d6;

}


/*----------------------------------
Read More
-----------------------------------*/

.card a{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:30px;

font-weight:600;

color:var(--gold);

transition:var(--transition);

}

.card a i{

font-size:16px;

margin:0;

}

.card a:hover{

transform:translateX(6px);

}


/*=====================================================
SECTION TITLE ANIMATION
======================================================*/

.services h2,
.trust h2{

position:relative;

display:inline-block;

}

.services h2::after,
.trust h2::after{

content:"";

position:absolute;

left:50%;

bottom:-15px;

transform:translateX(-50%);

width:80px;

height:3px;

border-radius:20px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent);

}


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

@media(max-width:1100px){

.cards{

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

}

.trust-stats{

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

}

}


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

@media(max-width:768px){

.cards{

grid-template-columns:1fr;

}

.trust-stats{

grid-template-columns:1fr;

}

.card{

padding:35px 28px;

}

.card h3{

font-size:30px;

}

.trust-box{

padding:28px;

}

.trust-box h3{

font-size:42px;

}

}

/*=====================================================
PART 2C-1
PSYCHOLOGISTS
======================================================*/

.psychologists{

text-align:center;

}

.psych-grid{

display:grid;

grid-template-columns:repeat(2,minmax(320px,480px));

justify-content:center;

gap:40px;

margin-top:70px;

}


/*=====================================================
DOCTOR CARD
======================================================*/

.doctor{

position:relative;

overflow:hidden;

padding:38px 34px;

border-radius:28px;

background:linear-gradient(
180deg,
rgba(30,30,30,.72),
rgba(16,16,16,.78)
);

backdrop-filter:blur(24px);

border:1px solid rgba(212,175,55,.12);

transition:all .4s ease;

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

text-align:center;

}

.doctor:hover{

transform:translateY(-8px);

border-color:rgba(212,175,55,.30);

box-shadow:

0 28px 60px rgba(0,0,0,.45);

}


/*=====================================================
GOLD GLOW
======================================================*/

.doctor::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(212,175,55,.18),

transparent 72%

);

top:-120px;

right:-120px;

opacity:0;

transition:.45s;

}

.doctor:hover::before{

opacity:1;

}


/*=====================================================
PHOTO
======================================================*/

.doctor-photo{

position:relative;

width:180px;

height:180px;

margin:auto;

margin-bottom:28px;

}

.doctor-photo img{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

border:3px solid rgba(212,175,55,.35);

transition:.45s;

box-shadow:

0 12px 40px rgba(0,0,0,.45);

}

.doctor:hover .doctor-photo img{

transform:scale(1.05);

}


/* Gold ring */

.doctor-photo::before{

content:"";

position:absolute;

inset:-6px;

border-radius:50%;

border:1px solid rgba(212,175,55,.18);

animation:ringRotate 20s linear infinite;

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*=====================================================
NAME
======================================================*/

.doctor h3{

font-size:36px;

margin-bottom:14px;

letter-spacing:.4px;

}

.doctor h4{

font-family:Poppins,sans-serif;

font-size:15px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:18px;

}


/*=====================================================
DESCRIPTION
======================================================*/

.doctor p{

font-size:15.5px;

line-height:1.9;

color:#cfcfcf;

max-width:390px;

margin:0 auto 30px;

}


/*=====================================================
SPECIALITIES
======================================================*/

.specialities{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

margin-bottom:28px;

}

.specialities span{

padding:10px 18px;

border-radius:999px;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.22);

color:#f0d47a;

font-size:13px;

font-weight:500;

}


/*=====================================================
EXPERIENCE BAR
======================================================*/

.doctor-footer{

display:flex;

justify-content:center;

align-items:center;

padding-top:24px;

margin-top:12px;

border-top:1px solid rgba(255,255,255,.06);

}

.experience{

display:flex;

align-items:center;

gap:10px;

font-size:15px;

color:#dddddd;

}

.experience i{

color:var(--gold);

}

.consult-btn{

padding:14px 30px;

border-radius:999px;

background:linear-gradient(
135deg,
var(--gold),
#c99a1d
);

font-size:15px;

font-weight:600;

letter-spacing:.3px;

color:#000;

transition:all .35s ease;

box-shadow:0 12px 28px rgba(212,175,55,.20);

}

.consult-btn:hover{

transform:translateY(-3px);

box-shadow:

0 12px 30px rgba(212,175,55,.35);

}


/*=====================================================
SOCIAL LINKS
======================================================*/

.doctor-social{

display:flex;

justify-content:center;

gap:14px;

margin-top:28px;

}

.doctor-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

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

transition:var(--transition);

}

.doctor-social a:hover{

background:var(--gold);

color:#000;

transform:translateY(-4px);

}


/*=====================================================
SECTION TITLE
======================================================*/

.psychologists h2{

display:inline-block;

position:relative;

}

.psychologists h2::after{

content:"";

position:absolute;

left:50%;

bottom:-15px;

transform:translateX(-50%);

width:90px;

height:3px;

border-radius:30px;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent);

}


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

@media(max-width:1100px){

.psych-grid{

grid-template-columns:1fr;

gap:35px;

}

}


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

@media(max-width:768px){

.doctor{

padding:35px 25px;

}

.doctor-photo{

width:180px;

height:180px;

}

.doctor h3{

font-size:34px;

}

.doctor-footer{

flex-direction:column;

gap:18px;

}

.consult-btn{

width:100%;

text-align:center;

}

}

/*=====================================================
PART 2C-2
WHY CHOOSE US
======================================================*/

.why-us{

position:relative;

text-align:center;

overflow:hidden;

}

.why-us .container{

position:relative;

z-index:2;

}

.why-us h2{

margin-bottom:20px;

}

.why-us> .container> p{

max-width:760px;

margin:0 auto 70px;

font-size:18px;

line-height:1.9;

color:var(--text2);

}


/* Decorative glow */

.why-us::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,

rgba(212,175,55,.10),

transparent 72%);

top:-250px;

right:-250px;

filter:blur(40px);

pointer-events:none;

}

.why-us::after{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:radial-gradient(circle,

rgba(0,180,140,.10),

transparent 72%);

bottom:-180px;

left:-180px;

filter:blur(40px);

pointer-events:none;

}


/*=====================================================
GRID
======================================================*/

.why-grid{

display:grid;

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

gap:32px;

}


/*=====================================================
CARD
======================================================*/

.why-card{

position:relative;

padding:42px 34px;

border-radius:26px;

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

backdrop-filter:blur(18px);

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

transition:all .35s ease;

overflow:hidden;

}

.why-card:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.35);

box-shadow:

0 30px 60px rgba(0,0,0,.35);

}


/* Gold shine */

.why-card::before{

content:"";

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.15),

transparent);

transform:skewX(-25deg);

transition:1s;

}

.why-card:hover::before{

left:160%;

}


/*=====================================================
ICON
======================================================*/

.why-icon{

width:78px;

height:78px;

margin:0 auto 28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:

linear-gradient(

135deg,

rgba(212,175,55,.22),

rgba(212,175,55,.05));

border:1px solid rgba(212,175,55,.25);

}

.why-icon i{

font-size:34px;

color:var(--gold);

}


/*=====================================================
TEXT
======================================================*/

.why-card h3{

font-size:30px;

margin-bottom:18px;

}

.why-card p{

font-size:16px;

line-height:1.9;

color:var(--text2);

}


/*=====================================================
FEATURE LIST
======================================================*/

.why-list{

margin-top:24px;

display:flex;

flex-direction:column;

gap:12px;

text-align:left;

}

.why-list li{

list-style:none;

display:flex;

align-items:flex-start;

gap:12px;

font-size:15px;

color:#dddddd;

}

.why-list i{

margin-top:3px;

color:var(--gold);

}


/*=====================================================
HOVER ICON
======================================================*/

.why-card:hover .why-icon{

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

transition:.35s;

}


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

@media(max-width:1100px){

.why-grid{

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

}

}


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

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.why-card{

padding:34px 26px;

}

.why-card h3{

font-size:26px;

}

.why-icon{

width:70px;

height:70px;

}

.why-icon i{

font-size:30px;

}

}

/*=====================================================
PART 2D-1
TESTIMONIALS
======================================================*/

.testimonials{

    position:relative;

    text-align:center;

    overflow:hidden;

}

.testimonials .container{

    position:relative;

    z-index:2;

}

.testimonials h2{

    margin-bottom:18px;

}

.testimonials>.container>p{

    max-width:760px;

    margin:0 auto 70px;

    color:var(--text2);

    font-size:18px;

    line-height:1.9;

}


/*==========================
GRID
==========================*/

.testimonial-grid{

    display:grid;

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

    gap:32px;

}


/*==========================
CARD
==========================*/

.testimonial-card{

    position:relative;

    padding:42px 34px;

    border-radius:26px;

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

    backdrop-filter:blur(18px);

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

    transition:all .35s ease;

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 28px 60px rgba(0,0,0,.35);

}


/*==========================
QUOTE
==========================*/

.quote-icon{

    font-size:42px;

    color:var(--gold);

    margin-bottom:25px;

    opacity:.8;

}

.testimonial-card p{

    font-size:16px;

    line-height:1.9;

    color:#dddddd;

    margin-bottom:28px;

    font-style:italic;

}


/*==========================
RATING
==========================*/

.rating{

    display:flex;

    justify-content:center;

    gap:5px;

    margin-bottom:22px;

}

.rating i{

    color:var(--gold);

}


/*==========================
AUTHOR
==========================*/

.client{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.client img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid rgba(212,175,55,.35);

    margin-bottom:15px;

}

.client h4{

    margin-bottom:5px;

    font-size:20px;

}

.client span{

    color:var(--text2);

    font-size:14px;

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:1100px){

    .testimonial-grid{

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

    }

}

@media(max-width:768px){

    .testimonial-grid{

        grid-template-columns:1fr;

    }

    .testimonial-card{

        padding:32px 24px;

    }

}

/*=====================================================
PART 2D-2
FAQ
======================================================*/

.faq{

    position:relative;

}

.faq .container{

    max-width:900px;

}

.faq-heading{

    text-align:center;

    margin-bottom:70px;

}

.faq-heading p{

    max-width:650px;

    margin:25px auto 0;

    color:var(--text2);

    line-height:1.9;

}


/*=====================================================
FAQ ITEM
======================================================*/

.faq-item{

    margin-bottom:22px;

    border-radius:22px;

    overflow:hidden;

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

    backdrop-filter:blur(18px);

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

    transition:.35s;

}

.faq-item:hover{

    border-color:rgba(212,175,55,.35);

    box-shadow:0 18px 45px rgba(0,0,0,.30);

}


/*=====================================================
QUESTION
======================================================*/

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:26px 30px;

    font-size:20px;

    font-weight:600;

    color:#fff;

}

.faq-question i{

    color:var(--gold);

    transition:.35s;

    font-size:18px;

}


/*=====================================================
ANSWER
======================================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 30px 28px;

    color:var(--text2);

    line-height:1.9;

    font-size:16px;

}


/*=====================================================
ACTIVE
======================================================*/

.faq-item.active{

    border-color:rgba(212,175,55,.35);

}

.faq-item.active .faq-question i{

    transform:rotate(180deg);

}

.faq-item.active .faq-answer{

    max-height:300px;

}


/*=====================================================
HOVER EFFECT
======================================================*/

.faq-item::before{

    content:"";

    display:block;

    height:3px;

    width:0;

    background:linear-gradient(90deg,

        transparent,

        var(--gold),

        transparent);

    transition:.35s;

}

.faq-item:hover::before{

    width:100%;

}


/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:768px){

    .faq-question{

        font-size:18px;

        padding:22px;

    }

    .faq-answer p{

        padding:0 22px 22px;

    }

}

/*=====================================================
PART 3A-1
CONTACT / APPOINTMENT
======================================================*/

.contact{

    position:relative;

    overflow:hidden;

}

.contact .container{

    position:relative;

    z-index:2;

}

.contact-heading{

    text-align:center;

    margin-bottom:70px;

}

.contact-heading p{

    max-width:760px;

    margin:25px auto 0;

    color:var(--text2);

    line-height:1.9;

}


/*=====================================================
LAYOUT
======================================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    align-items:start;

}


/*=====================================================
LEFT PANEL
======================================================*/

.contact-info{

    padding:40px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

}

.contact-info h3{

    margin-bottom:20px;

}

.contact-info>p{

    color:var(--text2);

    line-height:1.9;

    margin-bottom:35px;

}


/*=====================================================
INFO BOX
======================================================*/

.info-box{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(212,175,55,.12);

    color:var(--gold);

    font-size:22px;

    flex-shrink:0;

}

.info-text h4{

    margin-bottom:6px;

    font-size:18px;

}

.info-text p{

    color:var(--text2);

    line-height:1.7;

}


/*=====================================================
SOCIAL
======================================================*/

.contact-social{

    display:flex;

    gap:15px;

    margin-top:35px;

}

.contact-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

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

    transition:.35s;

}

.contact-social a:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

}


/*=====================================================
RIGHT PANEL
======================================================*/

.contact-form{

    padding:45px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

}


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

.form-grid{

    display:grid;

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

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group.full{

    grid-column:1/-1;

}


/*=====================================================
LABEL
======================================================*/

.form-group label{

    margin-bottom:10px;

    font-weight:500;

    color:#e8e8e8;

}


/*=====================================================
INPUTS
======================================================*/

.form-group input,

.form-group textarea,

.form-group select{

    width:100%;

    padding:18px 20px;

    border-radius:16px;

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

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

    color:#fff;

    font-size:16px;

    transition:.3s;

}

.form-group textarea{

    resize:vertical;

    min-height:180px;

}


/*=====================================================
FOCUS
======================================================*/

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

    outline:none;

    border-color:rgba(212,175,55,.45);

    box-shadow:0 0 0 4px rgba(212,175,55,.08);

}


/*=====================================================
BUTTON
======================================================*/

.contact-form button{

    margin-top:30px;

    width:100%;

}

/*=====================================================
PART 3A-2
CONTACT FINISHING
======================================================*/


/*=====================================================
SUBMIT BUTTON
======================================================*/

.contact-form button{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 34px;

border:none;

border-radius:60px;

background:linear-gradient(
135deg,
var(--gold),
#b98c14);

color:#111;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:all .35s ease;

box-shadow:0 15px 35px rgba(212,175,55,.22);

}

.contact-form button:hover{

transform:translateY(-4px);

box-shadow:0 22px 45px rgba(212,175,55,.32);

}

.contact-form button:active{

transform:scale(.98);

}


/*=====================================================
PLACEHOLDER
======================================================*/

.contact-form input::placeholder,
.contact-form textarea::placeholder{

color:#9b9b9b;

}


/*=====================================================
SELECT
======================================================*/

.contact-form select{

appearance:none;

cursor:pointer;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right 18px center;

padding-right:55px;

}


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

.form-success{

display:none;

margin-top:28px;

padding:18px 22px;

border-radius:16px;

background:rgba(28,156,92,.15);

border:1px solid rgba(28,156,92,.35);

color:#d8ffe7;

font-weight:500;

}

.form-success.show{

display:block;

animation:fadeIn .45s ease;

}


/*=====================================================
MAP
======================================================*/

.contact-map{

margin-top:70px;

overflow:hidden;

border-radius:28px;

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

box-shadow:var(--shadow);

}

.contact-map iframe{

width:100%;

height:420px;

border:0;

display:block;

filter:grayscale(.18) contrast(1.05);

}


/*=====================================================
BACKGROUND GLOW
======================================================*/

.contact::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(212,175,55,.10),

transparent 72%);

top:-250px;

left:-220px;

filter:blur(35px);

pointer-events:none;

}

.contact::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(18,150,120,.10),

transparent 72%);

right:-180px;

bottom:-220px;

filter:blur(35px);

pointer-events:none;

}


/*=====================================================
HOVER EFFECTS
======================================================*/

.info-box{

transition:all .3s ease;

}

.info-box:hover{

transform:translateX(8px);

}

.info-box:hover .info-icon{

background:rgba(212,175,55,.22);

transform:rotate(10deg);

transition:.3s;

}


/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:1100px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-info{

order:2;

}

.contact-form{

order:1;

}

}


@media(max-width:768px){

.contact-form{

padding:30px 24px;

}

.contact-info{

padding:30px 24px;

}

.form-grid{

grid-template-columns:1fr;

}

.contact-map iframe{

height:320px;

}

.info-box{

align-items:flex-start;

}

.contact-social{

justify-content:center;

}

.contact-heading{

margin-bottom:50px;

}

}

/*=====================================================
PART 3B
FOOTER
======================================================*/

.footer{

    position:relative;

    margin-top:120px;

    padding:90px 0 35px;

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(0,0,0,.18);

    backdrop-filter:blur(18px);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:50px;

}

.footer-logo{

    font-size:34px;

    margin-bottom:20px;

}

.footer p{

    color:var(--text2);

    line-height:1.9;

}

.footer h3{

    margin-bottom:25px;

    font-size:22px;

}

.footer-links{

    list-style:none;

}

.footer-links li{

    margin-bottom:14px;

}

.footer-links a{

    color:var(--text2);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--gold);

    padding-left:8px;

}

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-contact div{

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.footer-contact i{

    color:var(--gold);

    margin-top:4px;

}


/*=====================================================
NEWSLETTER
======================================================*/

.newsletter{

    margin-top:25px;

    display:flex;

    gap:12px;

}

.newsletter input{

    flex:1;

    padding:16px 18px;

    border-radius:14px;

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

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

    color:white;

}

.newsletter button{

    padding:16px 24px;

    border:none;

    border-radius:14px;

    background:var(--gold);

    color:#111;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.newsletter button:hover{

    transform:translateY(-2px);

}


/*=====================================================
BOTTOM BAR
======================================================*/

.footer-bottom{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom p{

    margin:0;

}

.footer-social{

    display:flex;

    gap:14px;

}

.footer-social a{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    transition:.3s;

}

.footer-social a:hover{

    background:var(--gold);

    color:#111;

    transform:translateY(-4px);

}


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

.back-to-top{

    position:fixed;

    right:28px;

    bottom:28px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--gold),#c89b1c);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    box-shadow:0 15px 35px rgba(212,175,55,.35);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-5px);

}


/*=====================================================
UTILITY
======================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

.text-center{

    text-align:center;

}

.mt-1{margin-top:10px;}

.mt-2{margin-top:20px;}

.mt-3{margin-top:30px;}

.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}

.mb-2{margin-bottom:20px;}

.mb-3{margin-bottom:30px;}

.mb-4{margin-bottom:40px;}


/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer{

padding:70px 0 30px;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.newsletter{

flex-direction:column;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.back-to-top{

right:18px;

bottom:18px;

width:50px;

height:50px;

}

}

/*=====================================================
PATCH V1 - PART 1
GLOBAL FOUNDATION
=====================================================*/

/* ---------- Better Background ---------- */

body{

    background:
    linear-gradient(
        rgba(6,8,7,.18),
        rgba(6,8,7,.18)
    ),
    url("background.png") center center / cover no-repeat;
    background-attachment: fixed;

}


/*----------------------------------------------------
Remove heavy overlay from every section
----------------------------------------------------*/

section::before{

    background:rgba(5,8,6,.12);

    backdrop-filter:none;

}


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

section{

    padding:130px 0;

}


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

.container{

    width:min(92%,1280px);

}


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

h1{

    line-height:1.05;
    margin-bottom:28px;

}

h2{

    margin-bottom:24px;
    line-height:1.1;

}

h3{

    line-height:1.2;

}

p{

    line-height:1.9;
    color:#e2e2e2;

}

.subtitle{

    max-width:760px;
    margin:0 auto 70px;
    color:#d3d3d3;

}


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

.card,
.doctor,
.why-card,
.testimonial-card,
.faq-item,
.stat,
.appointment-box{

    background:rgba(18,22,20,.58);

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

    backdrop-filter:blur(14px);

    box-shadow:
    0 15px 45px rgba(0,0,0,.30);

}


/*----------------------------------------------------
Hover
----------------------------------------------------*/

.card:hover,
.doctor:hover,
.why-card:hover,
.testimonial-card:hover,
.faq-item:hover,
.stat:hover{

    border-color:rgba(212,175,55,.35);

    box-shadow:
    0 24px 65px rgba(0,0,0,.40);

}


/*----------------------------------------------------
Premium Gold
----------------------------------------------------*/

:root{

    --gold:#D8B247;
    --gold2:#F6D87B;

}


/*----------------------------------------------------
Icons
----------------------------------------------------*/

.card i,
.why-icon i,
.hero-features i,
.experience i{

    color:var(--gold);

}


/*----------------------------------------------------
Images
----------------------------------------------------*/

img{

    image-rendering:auto;

}


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

.services,
.therapy,
.testimonials,
.appointment{

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

}

.trust,
.why,
.steps,
.stats,
.faq,
.contact{

    background:transparent;

}

/*=====================================================
PATCH V1 - PART 2
HERO + PREMIUM CARDS
=====================================================*/


/*---------------------------------
Hero
---------------------------------*/

.hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:150px;
    padding-bottom:110px;

}

.hero-content{

    align-items:center;
    gap:90px;

}

.hero-left h1{

    max-width:760px;

}

.hero-left p{

    max-width:640px;

}

.hero-buttons{

    margin-top:45px;
    margin-bottom:55px;

}


/*---------------------------------
Hero image
---------------------------------*/

.hero-right img{

    border-radius:34px;

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);

}


/*---------------------------------
Hero features
---------------------------------*/

.hero-features{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.hero-features div{

    min-height:72px;

    border-radius:22px;

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

    transition:.35s;

}

.hero-features div:hover{

    transform:translateY(-6px);

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

}


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

section h2{

    position:relative;
    display:inline-block;

}

section h2::after{

    content:"";

    position:absolute;

    left:50%;
    transform:translateX(-50%);

    bottom:-18px;

    width:90px;
    height:3px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

}


/*---------------------------------
Cards
---------------------------------*/

.card,
.doctor,
.why-card,
.testimonial-card,
.stat{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*---------------------------------
Premium hover
---------------------------------*/

.card:hover,
.doctor:hover,
.why-card:hover,
.testimonial-card:hover,
.stat:hover{

    transform:
        translateY(-10px);

}


/*---------------------------------
Universal icon box
---------------------------------*/

.card i{

    width:76px;
    height:76px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 28px;

    font-size:34px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(212,175,55,.18),
            rgba(212,175,55,.05)
        );

    border:1px solid rgba(212,175,55,.20);

}


/*---------------------------------
Doctor image
---------------------------------*/

.doctor-photo{

    margin-bottom:40px;

}

.doctor-photo img{

    border-width:6px;

}


/*---------------------------------
Speciality pills
---------------------------------*/

.specialities span{

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

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

    transition:.3s;

}

.specialities span:hover{

    background:rgba(212,175,55,.15);

    border-color:rgba(212,175,55,.30);

}


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

.primary-btn,
.btn-nav{

    box-shadow:
        0 18px 40px rgba(212,175,55,.28);

}

.primary-btn:hover,
.btn-nav:hover{

    transform:
        translateY(-5px);

}

.secondary-btn{

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

}

.secondary-btn:hover{

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

}


/*---------------------------------
Images
---------------------------------*/

.hero-right img,
.doctor-photo img{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

/*=====================================================
PATCH V1 - PART 3
SECTION POLISH
=====================================================*/


/*=====================================================
WHY CHOOSE
=====================================================*/

.why-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:36px;
    margin-top:70px;

}

.why-card{

    padding:46px 40px;
    border-radius:30px;

}

.why-icon{

    width:84px;
    height:84px;
    margin:0 auto 28px;

}

.why-icon i{

    font-size:36px;

}

.why-card h3{

    margin-bottom:18px;

}

.why-card p{

    max-width:420px;
    margin:auto;
}


/*=====================================================
JOURNEY
=====================================================*/

.step-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:70px;

}

.step{

    position:relative;

    padding:45px 30px;

    text-align:center;

    border-radius:28px;

    background:rgba(18,22,20,.58);

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

    backdrop-filter:blur(14px);

    transition:.35s;

}

.step:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

}

.number{

    width:72px;
    height:72px;

    margin:0 auto 25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:28px;
    font-weight:700;

    color:#000;

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold2)
    );

}

.step h3{

    margin-bottom:18px;

}


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

.testimonial-grid{

    gap:36px;

}

.testimonial-card{

    padding:42px;

}

.rating{

    margin-bottom:25px;

}

.quote-icon{

    margin-bottom:28px;

}


/*=====================================================
STATS
=====================================================*/

.stats .container{

    display:grid;

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

    gap:28px;

}

.stat{

    padding:45px 20px;

    text-align:center;

    border-radius:28px;

}

.stat h2{

    margin-bottom:12px;

    color:var(--gold);

}

.stat h2::after{

    display:none;

}


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

.appointment-box{

    display:grid;

    grid-template-columns:1fr 1.1fr;

    gap:70px;

    padding:70px;

    border-radius:34px;

}

.appointment-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.appointment-left ul{

    margin-top:35px;

}

.appointment-left li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.appointment-left i{

    color:var(--gold);

}

.appointment-right form{

    display:grid;

    gap:22px;

}

.appointment input,
.appointment select,
.appointment textarea{

    width:100%;

    padding:18px 20px;

    border-radius:18px;

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

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

    color:white;

    font-size:16px;

}

.appointment textarea{

    resize:vertical;
    min-height:170px;

}

.appointment button{

    width:100%;

    padding:18px;

}


/*=====================================================
RESPONSIVE
=====================================================*/

@media (max-width:1100px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .step-grid{

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

    }

    .stats .container{

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

    }

    .appointment-box{

        grid-template-columns:1fr;

        padding:50px;

    }

}

@media (max-width:768px){

    .step-grid{

        grid-template-columns:1fr;

    }

    .stats .container{

        grid-template-columns:1fr;

    }

    .appointment-box{

        padding:35px 25px;

    }

    .why-card,
    .step,
    .stat{

        padding:35px 25px;

    }

}

/*=====================================================
PATCH V1 - PART 4
FINAL POLISH
=====================================================*/


/*=====================================================
FAQ
=====================================================*/

.faq .container{

    max-width:980px;

}

.faq-question{

    width:100%;

    background:transparent;

    border:none;

    outline:none;

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

    color:#fff;

    text-align:left;

}

.faq-question:hover{

    background:transparent;

}

.faq-question:focus{

    outline:none;

    box-shadow:none;

}

.faq-question span{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    color:var(--gold);

    font-size:20px;

    font-weight:700;

}


/*=====================================================
CONTACT
=====================================================*/

.contact .container{

    max-width:1250px;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px;

    border-radius:26px;

    background:rgba(18,22,20,.58);

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

    backdrop-filter:blur(14px);

}

.contact-card i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(212,175,55,.12);

    color:var(--gold);

    font-size:22px;

}

.contact-form{

    padding:50px;

    border-radius:34px;

    background:rgba(18,22,20,.58);

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

    backdrop-filter:blur(14px);

}

.contact-form form{

    display:grid;

    gap:22px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border-radius:18px;

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

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

    color:white;

}

.contact-form textarea{

    min-height:180px;

}


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

footer{

    border-top:1px solid rgba(255,255,255,.08);

    background:rgba(0,0,0,.18);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-column h3{

    margin-bottom:24px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-column a{

    color:#d9d9d9;

    transition:.3s;

}

.footer-column a:hover{

    color:var(--gold);

    padding-left:6px;

}

.footer-bottom{

    margin-top:60px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*=====================================================
GLOBAL ANIMATIONS
=====================================================*/

.card,
.doctor,
.why-card,
.step,
.stat,
.testimonial-card,
.contact-card,
.faq-item{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.card:hover,
.doctor:hover,
.why-card:hover,
.step:hover,
.stat:hover,
.testimonial-card:hover,
.contact-card:hover{

    transform:translateY(-10px);

}


/*=====================================================
SCROLL REVEAL READY
=====================================================*/

.reveal{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}


/*=====================================================
RESPONSIVE
=====================================================*/

@media(max-width:1100px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        gap:18px;

        text-align:center;

    }

    .contact-form{

        padding:35px 25px;

    }

}

@media (max-width: 768px) {

    body {
        background-attachment: scroll;
    }

}

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

@media (max-width:768px){

    nav ul{
        display:none;
    }

    nav{
        justify-content:space-between;
    }

    .logo img{
        height:48px;
    }

    .btn-nav{
        padding:12px 20px;
        font-size:14px;
    }

}



/* ==========================================
   SUCCESS PAGE
========================================== */

.success-card{

background:rgba(18,45,33,.55);

backdrop-filter:blur(18px);

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

border-radius:22px;

padding:22px;

box-shadow:0 14px 34px rgba(0,0,0,.18);

height:100%;

}



.success-id{

text-align:center;

margin-bottom:10px;

}

.success-id h3{

font-size:22px;

margin-bottom:6px;

color:#fff;

line-height:1.2;

}

.success-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:#EAF8EF;

    color:#2E8B57;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    margin:20px auto 0;

    
}

.booking-reference{

text-align:center;

padding:6px 0 10px;

margin-bottom:10px;

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

}

.info-row{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:18px;

padding:10px 0;

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

}

.info-left,
.info-right{

    flex:1;

}

.info-label{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

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

    margin-bottom:6px;

}

.info-value{

    font-size:17px;

    font-weight:600;

    color:#fff;

    line-height:1.6;

}

.info-value.large{

font-size:20px;

}

.success-paid{

    color:#2E8B57;

    font-weight:700;

}

.payment-id{

    font-size:14px;

    word-break:break-word;

    overflow-wrap:anywhere;

}

.success-divider{

    margin:28px 0;

}

/* ---------- Tablets ---------- */

@media (max-width:900px){

.success-card{

    padding:28px;

}

.info-row{

    gap:25px;

}

}

/* ---------- Phones ---------- */

@media (max-width:768px){

.success-card{

    padding:22px;

    border-radius:18px;

}

.success-id{

    margin-bottom:25px;

}

.success-id h3{

    font-size:24px;

}

.success-status{

    font-size:14px;

}

.info-row{

    flex-direction:column;

    gap:10px;

    padding:16px 0;

}

.info-left,
.info-right{

    width:100%;

}

.info-label{

    font-size:11px;

}

.info-value{

    font-size:16px;

}

.info-value.large{

    font-size:22px;

}

.payment-id{

    font-size:13px;

}

}

/* ---------- Small Phones ---------- */

@media (max-width:480px){

.success-card{

    padding:18px;

}

.success-id h3{

    font-size:21px;

}

.info-value{

    font-size:15px;

}

.info-value.large{

    font-size:20px;

}

}

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

.success-hero{

text-align:center;

margin-bottom:6px;

}

.success-hero h2{

font-size:48px;

line-height:1.05;

margin:8px 0;

}

.success-hero p{

font-size:16px;

line-height:1.45;

max-width:680px;

margin:0 auto;

}

.success-icon{

width:64px;

height:64px;

margin:0 auto 10px;

border-radius:50%;

background:#eaf8ef;

color:#2E8B57;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

box-shadow:0 8px 18px rgba(46,139,87,.18);

}

.hero-booking{

    display:inline-block;

    margin-top:25px;

    padding:14px 28px;

    border-radius:999px;

    background:#2E8B57;

    color:#fff;

    font-weight:600;

    font-size:17px;

    letter-spacing:.4px;

}

@media(max-width:768px){

.success-icon{

    width:82px;

    height:82px;

    font-size:46px;

}

.hero-booking{

    font-size:15px;

    padding:12px 22px;

}

}

/* ==========================================
   SUCCESS PAGE ANIMATIONS
========================================== */

@keyframes popSuccess{

0%{

transform:scale(.55);

opacity:0;

}

70%{

transform:scale(1.08);

opacity:1;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.success-icon{

animation:popSuccess .6s ease-out forwards;

}

.hero-booking{

opacity:0;

animation:fadeUp .6s ease-out .35s forwards;

}

.success-card{

opacity:0;

animation:fadeUp .6s ease-out .35s forwards;

}

.success-right{

opacity:0;

animation:fadeUp .6s ease-out .55s forwards;

}

/*=====================================================
SUCCESS PAGE LAYOUT
=====================================================*/

.success-layout{

display:grid;

grid-template-columns:1.45fr .95fr;

gap:24px;

align-items:start;

margin-top:8px;

}

.success-left{

display:block;

}

.success-right{

background:rgba(42,45,48,.35);

backdrop-filter:blur(18px);

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

border-radius:22px;

padding:22px;

height:100%;

box-shadow:0 14px 34px rgba(0,0,0,.18);

}

.success-right h3{

margin-bottom:25px;

}

.success-right p{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:14px;

line-height:1.5;

}

.success-right i{

color:var(--gold);

width:20px;

margin-top:4px;

}

.success-right .primary-btn,

.success-right .secondary-btn{

width:100%;

justify-content:center;

}

@media(max-width:900px){

.success-layout{

grid-template-columns:1fr;

}

.success-right{

padding:30px;

}

}