/* =========================================================
COLOR SYSTEM
========================================================= */
:root{
--primary:#F2D16D;
--primary-hover:#C98F00;
--accent-dark:#A87500;
--light-blue:#F7F6F2;
--white:#FFFFFF;
--navy:#202223;
--gold:#E6A900;
--light-gray:#DCDCDC;
--dark-navy:#202223;
--text:#202223;
--gray:#707070;
--border:#D8D8D8;
--difference-yellow:#C9A227;
--radius:14px;
}
/* =========================================================
GLOBAL
========================================================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Inter',system-ui,-apple-system,sans-serif;
color:var(--text);
background:var(--white);
line-height:1.7;
-webkit-font-smoothing:antialiased;
padding-top: 126px;
}
h1,h2,h3,h4{
font-family:"DM Sans", Arial, sans-serif;
font-weight:700;
line-height:1.15;
letter-spacing:.01em;
}
a{
text-decoration:none;
color:inherit;
}
img{
max-width:100%;
display:block;
}
.container{
width:100%;
max-width:1600px;
margin:0 auto;
padding-left:clamp(20px, 4vw, 70px);
padding-right:clamp(20px, 4vw, 70px);
}
section{
padding:80px 0;
}
/* =========================================================
HEADER
========================================================= */
header {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
backdrop-filter:blur(10px);
background:rgba(255,255,255,0.96);
border-bottom: 1px solid var(--border);
box-shadow:0 2px 12px rgba(37,50,58,0.06);
}
.header-info{
background:#111314;
color:#D5D9D6;
border-bottom:1px solid rgba(255,255,255,.12);
font-size:1.38rem;
}
.header-info-wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
min-height:56px;
/* Keep the complete information bar on ONE line */
flex-wrap:nowrap;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
/* Hide scrollbar while allowing horizontal scrolling */
scrollbar-width:none;
-ms-overflow-style:none;
}
.availability,
.header-contact{
display:flex;
align-items:center;
gap:14px;
flex:0 0 auto;
flex-wrap:nowrap;
white-space:nowrap;
}
.availability strong{
color:var(--white);
}
.availability-hours{
color:var(--primary);
}
.sunday-closed{
color:var(--primary);
font-weight:800;
}
.header-contact a{
color:var(--primary);
font-weight:600;
}
.header-contact a:hover{
color:var(--difference-yellow);
}
.top-accent{
height:4px;
background:linear-gradient(
90deg,
var(--primary),
var(--gold),
var(--primary-hover),
var(--primary)
);
}
.nav-wrap {
width: 100%;
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
flex: 0 1 auto;
min-width: 0;
text-decoration: none;
}
.brand img {
width: 54px;
height: 54px;
flex: 0 0 48px;
background-color: white;
object-fit: cover;
border-radius: 10px;
transition:
transform .3s ease,
box-shadow .3s ease;
}
/* Keep existing hover feeling */
.brand:hover img {
transform: translateY(-1px) scale(1.03);
}
/* Brand text */
.brand-name {
min-width: 0;
white-space: nowrap;
font-family:'Cormorant Garamond',serif;
font-size: 2.22rem;
font-weight: 700;
color:var(--navy);
line-height: 1.05;
transition: color .25s ease;
}
.brand-name small {
display: block;
margin-top: 4px;
font-family:'Inter',sans-serif;
font-size: .58rem;
font-weight: 600;
letter-spacing: .12em;
color:var(--gray);
white-space: nowrap;
text-transform:uppercase;
}
nav {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
nav ul {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.8vw, 28px);
list-style: none;
margin: 0;
padding: 0;
min-width: 0;
background:rgba(255,255,255,.08);
border:1px solid rgba(230,169,0,.4);
box-shadow:0 10px 0 rgba(230,169,0,.12),0 18px 30px rgba(0,0,0,.24);
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
nav li {
position: relative;
flex: 0 0 auto;
}
nav:hover ul,
nav:focus-within ul{
transform:translateY(-2px);
}
nav a {
position: relative;
display: inline-block;
padding: 8px 2px;
white-space: nowrap;
text-decoration: none;
font-size: .84rem;
font-weight: 500;
color:var(--text);
transition:
color .25s ease,
transform .25s ease,
opacity .25s ease;
}
/* Existing-style underline */
nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 1px;
width: 0;
height: 2px;
background: var(--primary);
border-radius: 2px;
transition:
width .3s ease,
left .3s ease,
right .3s ease;
}
/* Hover */
nav a:hover {
color: var(--accent-dark);
transform: translateY(-1px);
}
nav a:hover::after {
width: 100%;
}
/* Active / current */
nav a.active,
nav a[aria-current="page"] {
color: var(--primary);
}
nav a.active::after,
nav a[aria-current="page"]::after {
width: 100%;
}
/* ---------------------------------------------------------
CALL BUTTON
--------------------------------------------------------- */
.cta-btn {
background:var(--primary-hover);
color:var(--navy);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 10px 15px;
border-radius: 999px;
white-space: nowrap;
text-decoration: none;
font-size: .76rem;
font-weight: 700;
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
color .25s ease;
box-shadow:0 5px 16px rgba(37,50,58,0.18);
}
.cta-btn:active {
transform: translateY(0);
}
/* =========================================================
BUTTONS
========================================================= */
.cta-btn:hover{
background:var(--primary-hover);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(37,50,58,0.22);
}
/* ---------------------------------------------------------
APPOINTMENT BUTTON
--------------------------------------------------------- */
.appointment-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 10px 16px;
border: 1px solid transparent;
border-radius: 999px;
background:#C4C4C4;
color:var(--navy);
font-size: .76rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
box-shadow:0 4px 14px rgba(37,50,58,0.16);
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
color .25s ease;
}
.appointment-trigger:hover {
transform: translateY(-2px);
background: var(--primary-hover);
box-shadow:
0 9px 22px rgba(0,0,0,.12);
}
.appointment-trigger:active {
transform: translateY(0);
}
/* ---------------------------------------------------------
NAVIGATION CTA AREA
--------------------------------------------------------- */
.nav-cta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
min-width: max-content;
}
.menu-toggle {
display: none;
width: 42px;
height: 42px;
flex: 0 0 42px;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 10px;
background: none;
color: var(--navy);
font-size: 23px;
line-height: 1;
cursor: pointer;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
.menu-toggle:hover {
background: var(--teal-deep);
color: #fff;
border-color: var(--teal-deep);
transform: translateY(-1px);
box-shadow:
0 6px 18px rgba(0,0,0,.10);
}
.menu-toggle:active {
transform: scale(.96);
}
.btn-outline{
border:2px solid var(--primary);
color:var(--navy);
padding:10px 22px;
border-radius:30px;
font-weight:600;
font-size:0.9rem;
transition:all .25s ease;
}
.btn-outline:hover{
background:var(--primary);
border-color:var(--primary);
color:var(--navy);
transform:translateY(-2px);
}
.secondary-btn{
border:1px solid var(--border);
background:#C4C4C4;
color:var(--navy);
padding:12px 22px;
border-radius:30px;
font-weight:700;
cursor:pointer;
}
.secondary-btn:hover{
background:var(--light-blue);
border-color:var(--primary);
}
/* =========================================================
APPOINTMENT MODAL
========================================================= */
.appointment-modal-overlay{
position:fixed;
inset:0;
background:rgba(37,50,58,0.68);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
z-index:999;
opacity:0;
visibility:hidden;
transition:opacity .25s ease,visibility .25s ease;
}
.appointment-modal-overlay.open{
opacity:1;
visibility:visible;
}
.appointment-modal{
width:min(760px,100%);
background:var(--white);
border-radius:20px;
box-shadow:0 28px 60px rgba(37,50,58,0.25);
padding:28px 28px 20px;
position:relative;
max-height:90vh;
overflow:auto;
}
.modal-close{
position:absolute;
top:16px;
right:16px;
border:none;
background:var(--light-blue);
width:36px;
height:36px;
border-radius:50%;
font-size:1.5rem;
color:var(--navy);
cursor:pointer;
}
.modal-close:hover{
background:var(--primary-hover);
color:var(--navy);
}
.modal-head{
margin-bottom:22px;
padding-right:42px;
}
.modal-head h3{
font-size:2rem;
color:var(--navy);
margin-bottom:8px;
}
.modal-head p{
color:var(--gray);
margin:0;
}
.appointment-form{
display:flex;
flex-direction:column;
gap:18px;
}
.form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px 20px;
}
.form-group{
display:flex;
flex-direction:column;
gap:8px;
}
.form-group.full{
grid-column:1 / -1;
}
.form-group label{
font-size:0.82rem;
font-weight:700;
color:var(--navy);
letter-spacing:0.02em;
}
.slot-status{
color:var(--gray);
font-size:0.78rem;
line-height:1.4;
}
.form-group input,
.form-group textarea,
.form-group select{
width:100%;
padding:12px 14px;
border:1px solid var(--border);
border-radius:12px;
background:#fff;
color:var(--text);
font:inherit;
resize:vertical;
transition:border-color .2s ease,box-shadow .2s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(255,216,90,0.24);
}
.form-group textarea{
min-height:120px;
}
.radio-row{
display:flex;
gap:18px;
flex-wrap:wrap;
padding-top:6px;
}
.radio-option{
display:flex;
align-items:center;
gap:8px;
font-weight:500;
color:var(--text);
}
.radio-option input{
width:auto;
accent-color:var(--primary);
}
.medication-box{
display:none;
margin-top:4px;
}
.medication-box.visible{
display:block;
}
.form-actions{
display:flex;
justify-content:flex-end;
gap:12px;
padding-top:8px;
}
.appointment-step{display:none;}
.appointment-step.active{display:block;}
.appointment-progress{
display:flex;
align-items:center;
gap:10px;
margin:0 0 24px;
padding:12px 14px;
background:var(--light-blue);
border-radius:12px;
}
.step-indicator{
flex:1;
text-align:center;
font-size:.78rem;
font-weight:700;
color:var(--gray);
padding:8px 10px;
border-radius:9px;
}
.step-indicator.active{background:var(--primary);color:var(--navy);}
.step-actions{
display:flex;
justify-content:space-between;
gap:12px;
padding-top:18px;
}
.right-actions{display:flex;gap:12px;margin-left:auto;}
.optional-note{font-size:.78rem;color:var(--gray);font-weight:500;margin-left:4px;}
.clinical-intro{
background:var(--light-blue);
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
margin-bottom:18px;
color:var(--gray);
font-size:.9rem;
}
.clinical-intro strong{color:var(--navy);}
.clinical-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}
.clinical-section-title{color:var(--navy);font-size:1rem;font-weight:700;margin-bottom:14px;}
.clinical-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--white);}
.clinical-table{width:100%;border-collapse:collapse;min-width:620px;}
.clinical-table th,.clinical-table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;}
.clinical-table th{background:var(--light-blue);color:var(--navy);font-size:.8rem;}
.clinical-table td{font-size:.86rem;}
.clinical-table tr:last-child td{border-bottom:0;}
.clinical-table select{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--white);font:inherit;color:var(--text);}
.clinical-check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.88rem;font-weight:500;}
.clinical-check input{width:auto;accent-color:var(--primary);}
.option-grid{display:flex;flex-wrap:wrap;gap:10px 18px;padding:5px 0 8px;}
.hygiene-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.hygiene-grid .form-group.full{grid-column:1 / -1;}
@media(max-width:600px){
.hygiene-grid{grid-template-columns:1fr;}
.hygiene-grid .form-group.full{grid-column:auto;}
.clinical-table{min-width:560px;}
.appointment-progress{flex-direction:column;align-items:stretch;}
.step-indicator{width:100%;}
.step-actions,.right-actions{flex-wrap:wrap;}
.right-actions{margin-left:0;}
}
/* =========================================================
HERO
========================================================= */
.hero{
background:var(--light-blue);
padding:84px 0 70px;
position:relative;
overflow:hidden;
}
.hero-grid{
display:grid;
grid-template-columns:1.05fr 0.95fr;
gap:clamp(40px, 5vw, 90px);
align-items:center;
}
.eyebrow{
display:inline-block;
background:var(--primary);
color:var(--navy);
font-size:0.75rem;
font-weight:700;
letter-spacing:.08em;
/* text-transform:uppercase; */
padding:6px 14px;
border-radius:20px;
margin-bottom:18px;
}
.eyebrow-outline{
background:transparent;
color:var(--accent-dark);
border:1px solid var(--primary-hover);
}
.hero h1{
font-size:3.2rem;
color:var(--navy);
margin-bottom:20px;
letter-spacing:0;
}
.hero h1 span{
background:linear-gradient(
90deg,
var(--primary),
var(--primary-hover)
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero p{
font-size:1.12rem;
color:black;
max-width:520px;
margin-bottom:32px;
line-height:1.75;
}
.hero-ctas{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.trust-badge{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:26px;
font-size:0.88rem;
color:var(--gray);
}
.trust-badge .tb-stars{
color:var(--gold);
letter-spacing:2px;
font-size:1rem;
}
.trust-badge:hover{
color:var(--accent-dark);
}
.hero-points{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin-top:30px;
max-width:680px;
}
.hero-point{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}
.hero-point-icon{
width:42px;
height:42px;
border:1px solid var(--primary);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
color:var(--accent-dark);
font-size:1rem;
font-weight:700;
background:rgba(255,253,245,.72);
}
.hero-point-icon img{
width:27px;
height:27px;
object-fit:contain;
}
.hero-point strong,
.hero-point div span{
display:block;
}
.hero-point strong{
color:var(--navy);
font-size:.78rem;
line-height:1.2;
}
.hero-point div span{
color:var(--gray);
font-size:.66rem;
line-height:1.25;
margin-top:3px;
}
.hero-points{
padding-top:18px;
border-top:1px solid rgba(215,169,40,.35);
}
.hero-point strong{
letter-spacing:.01em;
}
.hero-img{
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 30px 60px -12px rgba(37,50,58,0.28);
position:relative;
}
.hero-img img{
width:100%;
height:clamp(420px, 32vw, 560px);
object-fit:cover;
transition:transform .6s ease;
}
.hero-img:hover img{
transform:scale(1.04);
}
/* =========================================================
STATS
========================================================= */
.stats{
background:var(--light-gray);
color:var(--navy);
padding:44px 0;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
gap:20px;
}
.stats-grid .num{
font-family:'Cormorant Garamond',serif;
font-size:2.6rem;
color:var(--accent-dark);
font-weight:700;
}
.stats-grid .label{
font-size:0.85rem;
color:var(--gray);
margin-top:4px;
}
.stat-icon svg {
width: 48px;
height: 48px;
stroke-width: 1.8;
}
/* =========================================================
CREDENTIALS
========================================================= */
.credentials{
background:var(--white);
padding:44px 0;
border-bottom:1px solid var(--border);
}
.credentials .cred-label{
text-align:center;
font-size:0.72rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--gray);
margin-bottom:26px;
}
.cred-grid{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:36px;
}
.cred-item{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.cred-badge{
width:68px;
height:68px;
border-radius:50%;
background:var(--white);
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
padding:10px;
transition:all .25s ease;
box-shadow:0 2px 8px rgba(37,50,58,0.05);
}
.cred-badge img{
width:100%;
height:100%;
object-fit:contain;
}
.cred-item:hover .cred-badge{
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(37,50,58,0.14);
}
.cred-item span.cred-name{
font-size:0.76rem;
color:var(--gray);
text-align:center;
max-width:110px;
line-height:1.3;
}
/* =========================================================
SECTION HEADERS
========================================================= */
.sec-head{
text-align:center;
max-width:640px;
margin:0 auto 48px;
}
.sec-head .eyebrow{
background:transparent;
color:#e6a900;
/* border:1px solid var(--primary-hover); */
}
.sec-head p{
color:var(--light-blue);
}
/* =========================================================
DIFFERENCE
========================================================= */
.diff{
background:var(--light-blue);
}
.diff-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:50px;
align-items:center;
}
.diff-img{
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 20px 50px rgba(37,50,58,0.15);
}
.diff-img img{
width:100%;
height:380px;
object-fit:cover;
}
.diff-text h2{
font-size:1.9rem;
color:var(--navy);
margin-bottom:16px;
}
.diff-text p{
color:var(--text);
margin-bottom:14px;
}
.diff-list{
list-style:none;
margin-top:20px;
}
.diff-list li{
display:flex;
gap:12px;
margin-bottom:12px;
font-weight:500;
}
.diff-list li::before{
content:"✓";
background:var(--primary-hover);
color:var(--navy);
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:0.75rem;
flex-shrink:0;
}
/* =========================================================
ABOUT
========================================================= */
.about{
background:var(--light-blue);
}
.about-grid{
display:grid;
grid-template-columns:0.8fr 1.2fr;
gap:50px;
align-items:center;
}
.about-img{
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 20px 50px rgba(37,50,58,0.15);
}
.about-img img{
width:100%;
height:440px;
object-fit:cover;
}
.about-text h2{
font-size:1.9rem;
color:var(--navy);
margin-bottom:6px;
}
.about-text .role{
color:var(--accent-dark);
font-weight:600;
margin-bottom:16px;
display:block;
}
.about-text p{
color:var(--text);
margin-bottom:14px;
}
/* =========================================================
SERVICES
========================================================= */
.services-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.service-item{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
display:flex;
align-items:center;
gap:14px;
transition:all .2s ease;
}
.service-item:hover{
border-color:var(--primary-hover);
box-shadow:0 8px 20px rgba(37,50,58,0.10);
transform:translateY(-2px);
}
.service-item:hover .service-dot{
background:var(--accent-dark);
}
.service-dot{
width:10px;
height:10px;
border-radius:50%;
background:var(--primary);
flex-shrink:0;
}
.service-item span{
font-weight:500;
color:var(--navy);
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testi{
background:var(--light-gray);
}
.testi .sec-head h2,
.testi .sec-head p{
color:var(--navy);
}
.testi .sec-head .eyebrow{
border-color:var(--accent-dark);
color:var(--accent-dark);
}
.testi .reviews-btn{
border-color:var(--accent-dark);
color:var(--accent-dark);
}
.testi .reviews-btn:hover{
background:var(--primary-hover) !important;
border-color:var(--primary-hover) !important;
color:var(--navy) !important;
}
.testi-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.testi-card{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
color:var(--text);
transition:all .25s ease;
}
.testi-card:hover{
background:var(--white);
transform:translateY(-3px);
}
.testi-card .stars{
color:var(--accent-dark);
margin-bottom:12px;
font-size:1rem;
}
.testi-card p{
font-size:0.94rem;
margin-bottom:16px;
}
.testi-card .who{
font-weight:700;
color:var(--navy);
font-size:0.9rem;
}
/* =========================================================
GALLERY
========================================================= */
.gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
.gallery-grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:10px;
transition:transform .5s ease,filter .5s ease;
}
.gallery-grid img:hover{
transform:scale(1.03);
filter:brightness(1.03);
}
/* =========================================================
CONTACT
========================================================= */
#contact{
background:var(--light-gray);
}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}
.contact-info h2{
font-size:1.9rem;
color:var(--navy);
margin-bottom:20px;
}
.info-row{
display:flex;
gap:16px;
margin-bottom:22px;
}
.info-icon{
width:42px;
height:42px;
background:var(--light-blue);
color:var(--accent-dark);
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:1.1rem;
}
.info-row h4{
font-size:0.95rem;
color:var(--navy);
margin-bottom:3px;
}
.info-row p{
color:var(--gray);
font-size:0.92rem;
}
.map-wrap{
border-radius:var(--radius);
overflow:hidden;
box-shadow:0 20px 50px rgba(37,50,58,0.12);
height:100%;
min-height:340px;
}
.map-wrap iframe{
width:100%;
height:100%;
border:0;
min-height:340px;
}
/* =========================================================
FINAL CTA
========================================================= */
.final-cta{
background:linear-gradient(
135deg,
#F4F5F2 0%,
#D1D4D0 100%
);
color:var(--navy);
text-align:center;
border-top:4px solid var(--primary);
}
.final-cta h2{
font-size:2rem;
margin-bottom:14px;
}
.final-cta p{
color:var(--text);
margin-bottom:28px;
}
.final-cta .cta-btn{
background:var(--primary-hover);
color:var(--navy);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.final-cta .cta-btn:hover{
background:var(--primary);
color:var(--navy);
}
/* =========================================================
FOOTER
========================================================= */
footer{
background:var(--light-gray);
color:var(--text);
padding:50px 0 24px;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
margin-bottom:36px;
}
.footer-grid h4{
color: var(--primary);
margin-bottom:14px;
font-size:2rem;
}
.footer-grid p,
.footer-grid a{
font-size:0.88rem;
color:var(--gray);
display:block;
margin-bottom:8px;
}
.footer-grid a:hover{
color:var(--primary-hover);
}
.footer-bottom{
border-top:1px solid var(--border);
padding-top:20px;
text-align:center;
font-size:0.8rem;
color:var(--gray);
}
/* =========================================================
WHATSAPP FLOAT
========================================================= */
.whatsapp-float{
position:fixed;
bottom:24px;
right:24px;
background:#25D366;
color:#fff;
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.6rem;
box-shadow:0 8px 20px rgba(0,0,0,0.2);
z-index:200;
}
/* =========================================================
ANIMATION
========================================================= */
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease,transform .7s ease;
}
.reveal.in{
opacity:1;
transform:translateY(0);
}
.about-img img,
.diff-img img{
transition:transform .6s ease;
}
.about-img:hover img,
.diff-img:hover img{
transform:scale(1.03);
}
/* =========================================================
RESPONSIVE
========================================================= */
/* =========================================================
LARGE LAPTOP
1200px+
========================================================= */
@media (min-width: 1200px) {
body {
padding-top: 118px;
}
.nav-wrap {
min-height: 78px;
}
nav ul {
gap: clamp(18px, 2vw, 30px);
}
nav a {
font-size: 1.25rem;
}
.appointment-trigger,
.nav-cta .cta-btn {
min-height: 42px;
padding-left: 17px;
padding-right: 17px;
}
}
/* =========================================================
LAPTOP
1100px – 1199px
========================================================= */
@media (max-width: 1199px) and (min-width: 1050px) {
.nav-wrap {
gap: 12px;
}
.brand {
gap: 7px;
}
.brand img {
width: 40px;
height: 40px;
flex-basis: 40px;
}
.brand-name {
font-size: 1.98rem;
}
.brand-name small {
font-size: .52rem;
letter-spacing: .08em;
}
nav ul {
gap: 12px;
}
nav a {
font-size: .76rem;
}
.nav-cta {
gap: 5px;
}
.appointment-trigger,
.nav-cta .cta-btn {
min-height: 38px;
padding: 8px 10px;
font-size: .68rem;
}
}
/* =========================================================
SMALL LAPTOP / TABLET
1049px AND BELOW
========================================================= */
@media (max-width: 1049px) {
body {
padding-top: 124px;
}
.nav-wrap {
min-height: 68px;
gap: 8px;
}
/* Hide desktop links */
nav ul {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 12px;
width: min(
340px,
calc(100vw - 24px)
);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 8px 16px;
margin: 0;
background: rgba(255,255,255,.98);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow:
0 18px 45px rgba(20,31,43,.16);
backdrop-filter: blur(14px);
overflow: hidden;
z-index: 9998;
}
/* Show hamburger */
.menu-toggle {
display: flex;
}
/* Navigation links inside dropdown */
nav li {
width: 100%;
border-bottom: 1px solid var(--border);
}
nav li:last-child {
border-bottom: none;
}
nav a {
display: block;
width: 100%;
padding: 13px 4px;
font-size: .86rem;
}
/*
KEEP ::after EFFECT
It now animates from left to right.
*/
nav a::after {
bottom: 6px;
}
nav a:hover {
padding-left: 8px;
}
nav a:hover::after {
width: calc(100% - 8px);
}
/* -----------------------------------------------------
IMPORTANT:
Your existing HTML needs a CSS state selector
for the menu to actually open.
If your hamburger is a checkbox/label structure,
use the selectors below.
----------------------------------------------------- */
.menu-toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
}
/* =========================================================
IF YOUR EXISTING HTML USES A CHECKBOX TO CONTROL MENU
========================================================= */
/*
These selectors support common CSS-only hamburger
structures without requiring JavaScript.
Example structure:
If your existing checkbox has a different ID,
change ONLY the ID selector below.
*/
/* Common IDs */
#menu-toggle:checked ~ nav ul,
#nav-toggle:checked ~ nav ul,
#mobile-menu-toggle:checked ~ nav ul {
display: flex;
}
/* If checkbox is before the nav-wrap */
#menu-toggle:checked ~ .nav-wrap nav ul,
#nav-toggle:checked ~ .nav-wrap nav ul,
#mobile-menu-toggle:checked ~ .nav-wrap nav ul {
display: flex;
}
/* =========================================================
TABLET
900px AND BELOW
========================================================= */
@media(max-width:900px){
.container {
padding-left: 20px;
padding-right: 20px;
}
.brand-name {
font-size: 1.08rem;
}
.brand-name small {
font-size: .54rem;
}
.appointment-trigger {
min-height: 38px;
padding: 8px 12px;
font-size: .70rem;
}
nav ul{
display:none;
position:absolute;
top:calc(100% + 14px);
right:0;
z-index:10;
flex-direction:column;
gap:0;
width:min(330px,calc(100vw - 32px));
padding:10px 18px 14px;
background:rgba(255,255,255,0.98);
border:1px solid rgba(230,169,0,.42);
border-radius:14px;
box-shadow:0 18px 0 rgba(230,169,0,.18),0 24px 42px rgba(16,18,19,.28);
transform:perspective(700px) rotateX(-10deg) translateY(-10px);
transform-origin:top right;
opacity:0;
visibility:hidden;
transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
nav:hover ul,
nav:focus-within ul{
background:rgba(255,255,255,0.98);
border-color:rgba(230,169,0,.42);
box-shadow:0 18px 0 rgba(230,169,0,.18),0 24px 42px rgba(16,18,19,.28);
transform:perspective(700px) rotateX(-10deg) translateY(-10px);
}
header.menu-open nav ul{
display:flex;
opacity:1;
visibility:visible;
transform:perspective(700px) rotateX(0) translateY(0);
}
nav li{
border-bottom:1px solid var(--border);
transform:translateZ(0);
}
nav li:last-child{
border-bottom:0;
}
nav a{
display:block;
padding:12px 0;
}
.menu-toggle{
display:block;
color:var(--white);
padding:4px;
line-height:1;
}
.hero-grid,
.diff-grid,
.about-grid,
.contact-grid{
grid-template-columns:1fr;
}
.hero h1{
font-size:2rem;
}
.hero-points{
grid-template-columns:repeat(2,1fr);
}
.stats-grid{
grid-template-columns:repeat(2,1fr);
row-gap:24px;
}
.cards-grid,
.services-grid,
.testi-grid{
grid-template-columns:1fr 1fr;
}
.gallery-grid{
grid-template-columns:1fr 1fr;
}
.footer-grid{
grid-template-columns:1fr;
}
section{
padding:56px 0;
}
}
/* =========================================================
MOBILE
700px AND BELOW
========================================================= */
/* @media(max-width:600px){ */
/* } */
@media (max-width: 700px) {
body {
padding-top: 118px;
}
.form-grid{
grid-template-columns:1fr;
}
.nav-cta .cta-btn{
display:none;
}
.modal-head h3{
font-size:1.7rem;
}
.nav-wrap {
min-height: 62px;
padding-top: 8px;
padding-bottom: 8px;
gap: 6px;
}
.container{
padding-left:16px;
padding-right:16px;
}
/* Brand takes available space */
.brand {
flex: 1 1 auto;
min-width: 0;
}
.brand img {
width: 35px;
height: 35px;
flex-basis: 35px;
border-radius: 8px;
}
.brand-name {
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
}
.brand-name small {
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
}
/* CTA */
.nav-cta {
gap: 5px;
}
.appointment-trigger {
min-height: 35px;
padding: 7px 10px;
font-size: .64rem;
}
/* Hamburger */
.menu-toggle {
width: 37px;
height: 37px;
flex-basis: 37px;
font-size: 20px;
border-radius: 9px;
}
/* Dropdown */
nav ul {
top: calc(100% + 6px);
right: 10px;
width: min(
320px,
calc(100vw - 20px)
);
}
nav a {
padding: 12px 4px;
font-size: .84rem;
}
}
/* =========================================================
SMALL MOBILE
480px AND BELOW
========================================================= */
@media (max-width: 480px) {
.cards-grid,
.services-grid,
.testi-grid,
.gallery-grid{
grid-template-columns:1fr;
}
body {
padding-top: 110px;
}
.hero-img img{
height:280px;
}
.container {
padding-left: 12px;
padding-right: 12px;
}
.nav-wrap {
min-height: 58px;
gap: 5px;
}
.brand {
gap: 6px;
}
.brand img {
width: 31px;
height: 31px;
flex-basis: 31px;
}
.brand-name {
max-width: 145px;
font-size: .90rem;
}
.brand-name small {
max-width: 145px;
font-size: .47rem;
letter-spacing: .05em;
}
/* Appointment */
.appointment-trigger {
min-height: 33px;
padding: 6px 8px;
font-size: .59rem;
}
/* Hamburger */
.menu-toggle {
width: 33px;
height: 33px;
flex-basis: 33px;
font-size: 18px;
border-radius: 8px;
}
/* Dropdown */
nav ul {
right: 12px;
width: calc(100vw - 24px);
border-radius: 12px;
}
}
/* =========================================================
VERY SMALL PHONES
360px AND BELOW
========================================================= */
@media (max-width: 360px) {
.brand-name {
max-width: 115px;
font-size: .84rem;
}
.brand-name small {
display: none;
}
.appointment-trigger {
padding: 6px 7px;
font-size: .55rem;
}
.menu-toggle {
width: 30px;
height: 30px;
flex-basis: 30px;
font-size: 17px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
nav a:focus-visible,
.appointment-trigger:focus-visible,
.nav-cta .cta-btn:focus-visible,
.menu-toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* =========================================================
REDUCE MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
nav a,
nav a::after,
.brand img,
.appointment-trigger,
.nav-cta .cta-btn,
.menu-toggle {
transition: none !important;
}
}
/* =========================================================
REFERENCE-INSPIRED VISUAL TREATMENT
========================================================= */
header{
background:rgba(32,34,35,.97);
border-bottom-color:rgba(230,169,0,.32);
box-shadow:0 8px 24px rgba(32,34,35,.18);
}
.brand-name,
nav a{
color:var(--white);
}
.brand-name{
color:var(--primary);
text-shadow:0 1px 0 rgba(255,238,166,.85),0 0 10px rgba(230,169,0,.42);
}
.brand-name small,
nav a:hover{
color:#E6D7A4;
}
nav a::after{
background:var(--primary);
}
.hero{
background:
linear-gradient(90deg,rgba(247,246,242,.98) 0%,rgba(247,246,242,.88) 52%,rgba(247,246,242,.52) 100%),
var(--light-blue);
padding:96px 0 86px;
}
.hero-img,
.diff-img,
.about-img,
.map-wrap{
border-radius:8px;
box-shadow:0 22px 48px rgba(32,34,35,.16);
}
.cta-btn{
background:var(--primary);
color:var(--navy);
border-radius:6px;
box-shadow:0 8px 18px rgba(32,34,35,.16);
}
.cta-btn:hover,
.final-cta .cta-btn:hover{
background:var(--primary-hover);
color:var(--white);
}
header .appointment-trigger{
background:#C4C4C4;
border-color:var(--primary);
color:var(--navy);
}
header .appointment-trigger:hover{
background:var(--primary);
color:var(--navy);
}
.btn-outline,
.appointment-trigger,
.secondary-btn{
border-radius:6px;
border-color:var(--navy);
color:var(--navy);
background:transparent;
box-shadow:none;
}
.stats,
#why{
background:var(--dark-navy);
color:#ff6b4a;
}
.stats-grid .num{
color:var(--primary);
}
.stats-grid .label{
color:#D5D9D6;
}
.credentials,
.diff{
background:var(--light-blue);
}
.about{
background:var(--white);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}
.card,
.service-item,
.testi-card{
border-radius:8px;
border-color:rgba(32,34,35,.12);
box-shadow:0 8px 24px rgba(32,34,35,.05);
}
.card:hover,
.service-item:hover,
.testi-card:hover{
box-shadow:0 16px 32px rgba(32,34,35,.12);
}
.card-icon,
.info-icon{
border-radius:8px;
background:#F4E8BD;
}
.eyebrow{
border-radius:3px;
background:transparent;
border-color:var(--primary);
}
.final-cta{
background:var(--dark-navy);
color:var(--white);
border-top:4px solid var(--primary);
}
.final-cta h2,
.final-cta p{
color:var(--white);
}
footer{
background:#17191A;
}
/* footer .footer-grid h4{
color:var(--white);
} */
footer .footer-grid p,
footer .footer-grid a,
footer .footer-bottom{
color:#D5D9D6;
}
footer .footer-grid a:hover{
color:var(--primary);
}
footer .footer-bottom{
border-top-color:rgba(255,255,255,.18);
}
@media(max-width:1049px){
.header-info-wrap{
padding-top:7px;
padding-bottom:7px;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
gap:8px;
width:100%;
min-width:0;
}
.availability,
.header-contact{
display:flex;
align-items:center;
flex-wrap:nowrap;
gap:7px;
min-width:0;
}
.availability{
flex:1 1 auto;
}
.header-contact{
flex:0 1 auto;
}
.header-info{
font-size:clamp(.52rem, 1.05vw, .68rem);
line-height:1.15;
white-space:nowrap;
}
}
@media(max-width:600px){
.header-info-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
flex-wrap:nowrap;
gap:6px;
width:100%;
min-width:0;
overflow:hidden;
white-space:nowrap;
}
.availability,
.header-contact{
display:flex;
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
flex-shrink:0;
gap:5px;
white-space:nowrap;
}
.availability{
min-width:0;
flex:1 1 auto;
}
.header-contact{
flex:0 0 auto;
}
.header-info{
font-size:clamp(.46rem, 1.8vw, .58rem);
line-height:1.15;
white-space:nowrap;
}
.header-contact{
padding-top:0;
}
}
@media(max-width:900px){
nav ul{
background:rgba(255,255,255,.98);
}
nav a{
color:var(--navy);
}
.menu-toggle{
color:var(--navy);
}
}
/* =========================================================
HERO IMAGE CAROUSEL
========================================================= */
.hero-img {
position: relative;
width: 100%;
}
/* Main carousel */
.hero-carousel {
position: relative;
width: 100%;
height: clamp(420px, 42vw, 650px);
overflow: hidden;
border-radius: 22px;
background: #eeeeee;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.12);
}
/* Individual slides */
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition:
opacity 0.7s ease,
visibility 0.7s ease;
}
/* Active slide */
.hero-slide.active {
opacity: 1;
visibility: visible;
z-index: 1;
}
/* Images */
.hero-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
ARROW BUTTONS
========================================================= */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #333333;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
.carousel-arrow:hover {
background: #f3c000;
transform: translateY(-50%) scale(1.05);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.15);
}
.carousel-prev {
left: 18px;
}
.carousel-next {
right: 18px;
}
/* =========================================================
DOTS
========================================================= */
.carousel-dots {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 30px;
background: rgba(30, 30, 30, 0.35);
backdrop-filter: blur(5px);
}
.carousel-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease;
}
.carousel-dot.active {
width: 24px;
border-radius: 10px;
background: #f3c000;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.hero-carousel {
height: 420px;
border-radius: 16px;
}
.carousel-arrow {
width: 38px;
height: 38px;
font-size: 18px;
}
.carousel-prev {
left: 12px;
}
.carousel-next {
right: 12px;
}
.carousel-dots {
bottom: 12px;
}
}
@media (max-width: 480px) {
.hero-carousel {
height: 350px;
border-radius: 14px;
}
}
/* =========================================================
HERO BACKGROUND IMAGE
========================================================= */
.home_bg {
position: relative;
overflow: hidden;
/* Your normal hero background */
/* background: #f5f5f3; */
}
/* Blurred background image */
.home_bg::before {
content: "";
position: absolute;
inset: -30px;
background-image: url("clinic_photos_shortlist/dental_bg.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* Blur */
/* filter: blur(5px); */
/* Low visibility */
opacity: 1.65;
/* Keep it behind the content */
z-index: 0;
transform: scale(1.05);
}
/* Make all actual hero content stay above background */
.home_bg > * {
position: relative;
z-index: 1;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: rgba(245, 245, 243, 0.72);
z-index: 0;
}
.hero > * {
position: relative;
z-index: 1;
}
/* home page logoes */
.home_logoes{
width:100%;
max-width:1600px;
margin:0 auto;
padding-bottom:50px;
}
.cred-grid{
display:flex;
justify-content:flex-start;
align-items:unset;
flex-wrap:wrap;
gap:10px;
}
.cred-item{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.cred-badge{
width:68px;
height:68px;
border-radius:50%;
background:var(--white);
border:1px solid var(--border);
display:flex;
align-items:center;
justify-content:center;
padding:10px;
transition:all .25s ease;
box-shadow:0 2px 8px rgba(37,50,58,0.05);
}
.cred-badge img{
width:100%;
height:100%;
object-fit:contain;
}
.cred-item:hover .cred-badge{
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(37,50,58,0.14);
}
.cred-item span.cred-name{
font-size:0.76rem;
color:var(--gray);
text-align:center;
max-width:110px;
line-height:1.3;
}
/* read more for about page sarts here and end at line no 3662 */
/* =========================================================
ABOUT DR. TANUPRIYA GUPTA
PREMIUM PROFESSIONAL PROFILE SECTION
========================================================= */
.doctor-about-section {
position: relative;
width: 100%;
padding: 110px 0 120px;
background:
linear-gradient(
135deg,
#F5F7F8 0%,
#FFFFFF 55%,
#F8F6EF 100%
);
overflow: hidden;
}
/* =========================================================
SUBTLE BACKGROUND DETAIL
========================================================= */
.doctor-about-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -180px;
top: 80px;
border-radius: 50%;
background: rgba(232, 193, 90, 0.08);
pointer-events: none;
}
.doctor-about-section::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
left: -130px;
bottom: 100px;
border-radius: 50%;
border: 1px solid rgba(232, 193, 90, 0.18);
pointer-events: none;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.doctor-about-container {
position: relative;
z-index: 2;
width: min(1180px, 92%);
margin: 0 auto;
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
gap: 80px;
align-items: start;
}
/* =========================================================
LEFT - DOCTOR IMAGE
========================================================= */
.doctor-about-image {
position: sticky;
top: 110px;
align-self: start;
}
/* =========================================================
IMAGE FRAME
========================================================= */
.doctor-image-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
padding: 12px;
background: #FFFFFF;
border: 1px solid #E4E1D8;
box-shadow:
0 18px 45px rgba(48, 52, 59, 0.10);
}
/* Gold offset frame */
.doctor-image-frame::before {
content: "";
position: absolute;
left: -12px;
top: -12px;
width: 100%;
height: 100%;
border: 2px solid #E8C15A;
z-index: -1;
}
/* Image */
.doctor-image-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(0.92);
transition:
transform 0.7s cubic-bezier(.2,.8,.2,1),
filter 0.5s ease;
}
.doctor-about-image:hover .doctor-image-frame img {
transform: scale(1.025);
filter: saturate(1);
}
/* =========================================================
IMAGE CAPTION
========================================================= */
.doctor-image-caption {
display: flex;
flex-direction: column;
gap: 5px;
padding: 20px 5px 0;
}
.doctor-image-caption strong {
color: #30343B;
font-family: inherit;
font-size: 19px;
font-weight: 700;
line-height: 1.25;
}
.doctor-image-caption span {
color: #A88600;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.doctor-about-content {
min-width: 0;
padding-top: 4px;
}
/* =========================================================
SECTION LABEL
========================================================= */
.doctor-section-label {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
color: #A88600;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.doctor-section-label::before {
content: "";
width: 38px;
height: 2px;
background: #E8C15A;
flex-shrink: 0;
}
/* =========================================================
MAIN NAME
========================================================= */
.doctor-about-content > h1 {
margin: 0;
color: #30343B;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(46px, 5vw, 68px);
font-weight: 600;
line-height: 0.98;
letter-spacing: -1px;
}
/* =========================================================
DESIGNATION
========================================================= */
.doctor-about-content > h2 {
margin: 14px 0 34px;
color: #A88600;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* =========================================================
MAIN PARAGRAPHS
========================================================= */
.doctor-about-content > p {
margin: 0 0 20px;
max-width: 760px;
color: #5F6368;
font-size: 15px;
line-height: 1.85;
}
.doctor-about-content p strong {
color: #30343B;
font-weight: 700;
}
/* =========================================================
FIRST PARAGRAPH - INTRO
========================================================= */
.doctor-about-content > p:first-of-type {
position: relative;
padding-left: 24px;
color: #41454B;
font-size: 17px;
line-height: 1.8;
}
.doctor-about-content > p:first-of-type::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: calc(100% - 10px);
background: #E8C15A;
}
/* =========================================================
CLINICAL PHILOSOPHY
========================================================= */
.doctor-subsection {
position: relative;
margin-top: 48px;
padding-top: 38px;
border-top: 1px solid #E4E1D9;
}
/* =========================================================
SUBSECTION HEADING
========================================================= */
.doctor-subsection-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 22px;
}
.heading-line {
width: 6px;
height: 42px;
flex-shrink: 0;
background: #E8C15A;
}
.doctor-subsection-heading h3 {
margin: 0;
color: #30343B;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 32px;
font-weight: 600;
line-height: 1.1;
}
.doctor-subsection > p {
margin: 0 0 18px;
color: #62666A;
font-size: 14.5px;
line-height: 1.8;
}
.doctor-subsection > p strong {
color: #30343B;
}
/* =========================================================
TECHNOLOGY BOX
========================================================= */
.technology-box {
position: relative;
margin-top: 42px;
padding: 38px 40px 40px;
background: #30343B;
border-radius: 2px;
overflow: hidden;
box-shadow:
0 18px 45px rgba(48, 52, 59, 0.12);
}
/* Gold decorative element */
.technology-box::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -80px;
top: -80px;
border-radius: 50%;
border: 1px solid rgba(232, 193, 90, 0.28);
}
.technology-box::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
right: -45px;
top: -45px;
border-radius: 50%;
background: rgba(232, 193, 90, 0.06);
}
/* =========================================================
TECHNOLOGY TITLE
========================================================= */
.technology-title {
position: relative;
z-index: 2;
display: flex;
align-items: flex-start;
gap: 18px;
}
/* =========================================================
TECHNOLOGY ICON
========================================================= */
.technology-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border: 1px solid rgba(232, 193, 90, 0.55);
color: #E8C15A;
font-size: 20px;
}
/* =========================================================
TECHNOLOGY LABEL
========================================================= */
.technology-label {
display: block;
margin-bottom: 7px;
color: #E8C15A;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
/* =========================================================
TECHNOLOGY HEADING
========================================================= */
.technology-title h3 {
margin: 0;
color: #FFFFFF;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 30px;
font-weight: 600;
line-height: 1.15;
}
/* =========================================================
QUOTE
========================================================= */
.technology-box blockquote {
position: relative;
z-index: 2;
margin: 30px 0 24px;
padding: 20px 0 20px 22px;
border-left: 2px solid #E8C15A;
color: #F1F1F1;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 21px;
font-style: italic;
line-height: 1.5;
}
/* =========================================================
TECHNOLOGY DESCRIPTION
========================================================= */
.technology-box > p {
position: relative;
z-index: 2;
margin: 0;
color: #C7C9CB;
font-size: 14px;
line-height: 1.8;
}
.technology-box > p strong {
color: #FFFFFF;
font-weight: 600;
}
/* =========================================================
TECHNOLOGY HIGHLIGHTS
========================================================= */
.technology-highlights {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: 34px;
background: rgba(255, 255, 255, 0.12);
}
/* =========================================================
TECHNOLOGY ITEM
========================================================= */
.technology-item {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 22px 20px;
background: #30343B;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.technology-item:hover {
background: #383C43;
transform: translateY(-3px);
}
/* =========================================================
TECHNOLOGY NUMBER
========================================================= */
.technology-number {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 38px;
color: #30343B;
background: #E8C15A;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.5px;
}
/* =========================================================
TECHNOLOGY ITEM TEXT
========================================================= */
.technology-item strong {
display: block;
margin-bottom: 7px;
color: #FFFFFF;
font-size: 13px;
line-height: 1.35;
}
.technology-item span {
display: block;
color: #AEB1B4;
font-size: 11.5px;
line-height: 1.6;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.doctor-about-section {
padding: 90px 0 100px;
}
.doctor-about-container {
grid-template-columns: 300px minmax(0, 1fr);
gap: 50px;
}
.doctor-about-content > h1 {
font-size: 52px;
}
.doctor-subsection-heading h3 {
font-size: 28px;
}
.technology-box {
padding: 32px;
}
.technology-highlights {
grid-template-columns: 1fr;
}
.technology-item {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
align-items: start;
}
}
/* =========================================================
MOBILE / TABLET PORTRAIT
========================================================= */
@media (max-width: 760px) {
.doctor-about-section {
padding: 75px 0 80px;
}
.doctor-about-container {
display: flex;
flex-direction: column;
width: min(92%, 600px);
gap: 45px;
}
/* Remove sticky image */
.doctor-about-image {
position: relative;
top: auto;
width: min(100%, 380px);
margin: 0 auto;
}
.doctor-image-frame {
aspect-ratio: 4 / 5;
}
.doctor-about-content {
width: 100%;
}
.doctor-about-content > h1 {
font-size: clamp(42px, 11vw, 58px);
}
.doctor-about-content > h2 {
margin-bottom: 28px;
font-size: 12px;
}
.doctor-about-content > p:first-of-type {
font-size: 16px;
line-height: 1.75;
}
.doctor-subsection {
margin-top: 40px;
padding-top: 32px;
}
.doctor-subsection-heading h3 {
font-size: 29px;
}
.technology-box {
margin-top: 35px;
padding: 30px 25px;
}
.technology-title h3 {
font-size: 27px;
}
.technology-box blockquote {
font-size: 19px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.doctor-about-section {
padding: 60px 0 70px;
}
.doctor-about-container {
width: 90%;
gap: 38px;
}
.doctor-image-frame {
padding: 8px;
}
.doctor-image-frame::before {
left: -8px;
top: -8px;
}
.doctor-image-caption {
padding-top: 16px;
}
.doctor-image-caption strong {
font-size: 17px;
}
.doctor-about-content > h1 {
font-size: 42px;
letter-spacing: -0.5px;
}
.doctor-about-content > p {
font-size: 14px;
line-height: 1.75;
}
.doctor-about-content > p:first-of-type {
padding-left: 18px;
font-size: 15px;
}
.doctor-subsection-heading {
align-items: flex-start;
}
.heading-line {
width: 5px;
height: 38px;
}
.doctor-subsection-heading h3 {
font-size: 26px;
}
.doctor-subsection > p {
font-size: 14px;
}
.technology-box {
padding: 26px 20px;
}
.technology-title {
gap: 13px;
}
.technology-icon {
width: 38px;
height: 38px;
font-size: 17px;
}
.technology-title h3 {
font-size: 24px;
}
.technology-box blockquote {
margin-top: 25px;
padding-left: 16px;
font-size: 18px;
}
.technology-box > p {
font-size: 13px;
}
.technology-item {
padding: 18px 15px;
}
}
/* ream more about us page ends here */
/* about us page education and experience starts here */
/* =========================================================
CREDENTIALS
========================================================= */
.credentials {
padding: 96px 24px;
background: #FAF7F0;
}
.credentials-inner {
max-width: 920px;
margin: 0 auto;
}
.credentials-head {
text-align: center;
margin-bottom: 64px;
}
.credentials-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
color:var(--difference-yellow);
font-weight: 600;
display: block;
margin-bottom: 10px;
}
.credentials-head h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
font-weight: 600;
color: #12213F;
margin: 0 0 14px;
}
.credentials-head p {
font-size: 16px;
color: #6B7280;
max-width: 520px;
margin: 0 auto;
line-height: 1.6;
}
/* =========================================================
TIMELINE
========================================================= */
.timeline {
position: relative;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: linear-gradient(
to bottom,
transparent,
#C9A227 6%,
#C9A227 94%,
transparent
);
transform: translateX(-50%);
}
/* =========================================================
TIMELINE ITEM
========================================================= */
.t-item {
position: relative;
width: 50%;
padding: 0 48px 56px;
}
.t-item:nth-child(odd) {
left: 0;
text-align: right;
}
.t-item:nth-child(even) {
left: 50%;
text-align: left;
}
.t-item:last-child {
padding-bottom: 0;
}
/* =========================================================
TIMELINE MARKER
========================================================= */
.t-marker {
position: absolute;
top: 2px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #12213F;
border: 3px solid #C9A227;
display: flex;
align-items: center;
justify-content: center;
}
.t-item:nth-child(odd) .t-marker {
right: -17px;
}
.t-item:nth-child(even) .t-marker {
left: -17px;
}
.t-marker svg {
width: 15px;
height: 15px;
fill: #E7CB6B;
}
/* =========================================================
TIMELINE CARD
========================================================= */
.t-card {
background: #fff;
border: 1px solid #E9E4D8;
border-radius: 10px;
padding: 22px 26px;
box-shadow:
0 4px 18px rgba(18, 33, 63, 0.05);
}
/* =========================================================
CARD HEADER
========================================================= */
.t-card-header {
display: flex;
align-items: flex-start;
width: 100%;
margin-bottom: 10px;
}
/* =========================================================
LEFT-SIDE CARDS
Logo appears on LEFT beside badge
========================================================= */
.t-item:nth-child(odd) .t-card-header {
justify-content: space-between;
}
.t-item:nth-child(odd) .t-card-logo {
order: -1;
margin-right: 12px;
margin-left: 0;
}
/* =========================================================
RIGHT-SIDE CARDS
Logo appears on RIGHT beside badge
========================================================= */
.t-item:nth-child(even) .t-card-header {
justify-content: space-between;
}
.t-item:nth-child(even) .t-card-logo {
order: 2;
margin-left: 15px;
margin-right: 0;
}
/* =========================================================
BADGE
========================================================= */
.t-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 0;
}
.t-badge.edu {
background: #EFE6C8;
color: #8A6D0E;
}
.t-badge.exp {
background: #DDE3EE;
color: #12213F;
}
/* =========================================================
INSTITUTION LOGO
========================================================= */
.t-card-logo {
width: 52px;
height: 52px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
background: #FFFFFF;
border: 1px solid #E5E3DC;
border-radius: 9px;
box-sizing: border-box;
}
/* =========================================================
LOGO IMAGE
========================================================= */
.t-card-logo img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* =========================================================
CARD HEADING
========================================================= */
.t-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 700;
color: #12213F;
margin: 0 0 4px;
}
/* =========================================================
CARD META
========================================================= */
.t-card .t-meta {
font-size: 13px;
color: var(--difference-yellow);
font-weight: 600;
margin-bottom: 10px;
}
/* =========================================================
CARD DESCRIPTION
========================================================= */
.t-card p {
font-size: 14px;
line-height: 1.6;
color: #6B7280;
margin: 0;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 720px) {
.credentials {
padding: 70px 18px;
}
.credentials-head {
margin-bottom: 45px;
}
.credentials-head h2 {
font-size: 36px;
}
.credentials-head p {
font-size: 15px;
}
/* Timeline moves to left */
.timeline::before {
left: 20px;
}
/* All cards become single column */
.t-item {
width: 100%;
left: 0 !important;
text-align: left !important;
padding: 0 0 40px 56px;
}
/* Marker */
.t-item:nth-child(odd) .t-marker,
.t-item:nth-child(even) .t-marker {
left: 3px;
right: auto;
}
/* On mobile logo always stays on RIGHT */
.t-card-header {
justify-content: space-between !important;
}
.t-card-logo {
order: 2 !important;
margin-left: 12px !important;
margin-right: 0 !important;
}
.t-card {
padding: 20px 22px;
}
.t-card-logo {
width: 46px;
height: 46px;
}
.t-card h3 {
font-size: 21px;
}
}
/* about us page education and experience ends here */
/* service section css starts here */
/* =========================================================
SERVICES SECTION
========================================================= */
.services-section {
padding: 100px 0;
background: #f8fbfd;
overflow: hidden;
}
/* ---------------------------------------------------------
HEADING
--------------------------------------------------------- */
.services-section .sec-head {
text-align: center;
margin-bottom: 50px;
}
.services-section .eyebrow {
display: inline-block;
margin-bottom: 12px;
color: var(--difference-yellow);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: 0;
/* text-transform: uppercase; */
}
.services-section h2 {
max-width: 760px;
margin: 0 auto;
color: var(--charcoal);
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.1;
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.services-slider-wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 18px;
}
/* =========================================================
SLIDER
========================================================= */
.services-slider {
width: 100%;
display: flex;
flex-wrap: nowrap; /* IMPORTANT */
gap: 22px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding: 10px 4px 25px;
scrollbar-width: none;
}
.services-slider::-webkit-scrollbar {
display: none;
}
/* =========================================================
CARD
========================================================= */
.service-card {
position: relative;
flex: 0 0 calc(
(100% - 66px) / 4
);
min-width: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(20, 31, 43, .08);
border-radius: 20px;
scroll-snap-align: start;
box-shadow:
0 10px 30px rgba(20, 31, 43, .08);
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
/* ---------------------------------------------------------
CARD HOVER
--------------------------------------------------------- */
.service-card:hover {
transform: translateY(-8px);
border-color: rgba(42, 169, 224, .25);
box-shadow:
0 20px 45px rgba(20, 31, 43, .14);
}
/* =========================================================
IMAGE
========================================================= */
.service-card-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: #eaf8fd;
}
.service-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .6s ease,
filter .4s ease;
}
/* Image hover */
.service-card:hover .service-card-image img {
transform: scale(1.07);
filter: brightness(1.03);
}
/* =========================================================
IMAGE SHINE
========================================================= */
.service-card-image::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background:
linear-gradient(
100deg,
transparent,
rgba(255,255,255,.38),
transparent
);
transform: skewX(-20deg);
transition: left .7s ease;
pointer-events: none;
}
.service-card:hover .service-card-image::after {
left: 140%;
}
/* =========================================================
CARD CONTENT
========================================================= */
.service-card-content {
position: relative;
padding: 22px 22px 25px;
min-height: 185px;
background: #ffffff;
}
/* Number */
.service-card-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 13px;
border-radius: 50%;
background: var(--teal-deep);
color: #ffffff;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
transition:
background .3s ease,
transform .3s ease;
}
.service-card:hover .service-card-number {
background: var(--gold);
transform: rotate(8deg) scale(1.05);
}
/* Title */
.service-card h3 {
margin: 0 0 10px;
color: var(--charcoal);
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.15;
transition: color .3s ease;
}
.service-card:hover h3 {
color: var(--teal-deep);
}
/* Description */
.service-card p {
margin: 0;
color: var(--gray);
font-size: .82rem;
line-height: 1.65;
}
/* =========================================================
ARROWS
========================================================= */
.service-arrow {
position: relative;
z-index: 5;
flex: 0 0 46px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(42, 169, 224, .18);
border-radius: 50%;
background: #ffffff;
color: var(--teal-deep);
font-size: 22px;
line-height: 1;
cursor: pointer;
box-shadow:
0 8px 22px rgba(20, 31, 43, .10);
transition:
background .25s ease,
color .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
.service-arrow:hover {
background: var(--teal-deep);
color: #ffffff;
transform: scale(1.08);
box-shadow:
0 12px 28px rgba(20, 31, 43, .16);
}
.service-arrow:active {
transform: scale(.96);
}
/* =========================================================
DOTS
========================================================= */
.services-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.service-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: #c9e6f2;
cursor: pointer;
transition:
width .3s ease,
background .3s ease,
transform .3s ease;
}
.service-dot:hover {
transform: scale(1.2);
background: var(--teal-deep);
}
.service-dot.active {
width: 25px;
border-radius: 20px;
background: var(--teal-deep);
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1200px) {
.service-card {
flex-basis: calc(
(100% - 44px) / 3
);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.services-section {
padding: 80px 0;
}
.service-card {
flex-basis: calc(
(100% - 22px) / 2
);
}
.service-card-image {
height: 210px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.services-section {
padding: 70px 0;
}
.services-section .sec-head {
margin-bottom: 35px;
}
.services-section .eyebrow {
font-size: clamp(2rem, 10vw, 2.75rem);
}
.services-slider-wrapper {
gap: 8px;
}
.services-slider {
gap: 16px;
padding-left: 2px;
padding-right: 2px;
}
.service-card {
flex: 0 0 85%;
border-radius: 17px;
}
.service-card-image {
height: 220px;
}
.service-card-content {
padding: 20px;
min-height: 175px;
}
.service-arrow {
flex: 0 0 38px;
width: 38px;
height: 38px;
font-size: 18px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.service-card {
flex-basis: 88%;
}
.service-card-image {
height: 200px;
}
.service-card h3 {
font-size: 1.15rem;
}
}
/* service section css ends here */
/* style for page service.html */
/* =========================================================
SERVICES PAGE
========================================================= */
.services-page {
background: #f8f7f3;
color: #30343b;
overflow: hidden;
}
.services-container {
width: min(1180px, calc(100% - 50px));
margin: 0 auto;
}
/* =========================================================
SERVICES INTRO
========================================================= */
.services-intro {
padding: 110px 0 80px;
text-align: center;
}
.services-intro-label {
display: inline-block;
margin-bottom: 18px;
color: var(--difference-yellow);
font-size: 48px;
font-weight: 800;
letter-spacing: 2.5px;
}
.services-intro h1 {
max-width: 850px;
margin: 0 auto 25px;
color: #30343b;
font-size: clamp(36px, 5vw, 42px);
line-height: 1.05;
font-weight: 500;
letter-spacing: -1.5px;
}
.services-intro h1 span {
color: #a88600;
}
.services-intro p {
max-width: 700px;
margin: 0 auto;
color: #686a6d;
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
FEATURED SERVICES
========================================================= */
.featured-services {
padding: 30px 0 110px;
}
.service-feature {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 470px;
margin-bottom: 40px;
background: #ffffff;
border: 1px solid #e5e3dc;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 10px 35px rgba(0, 0, 0, 0.045);
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
box-shadow 0.45s ease;
}
.service-feature:hover {
transform: translateY(-8px);
box-shadow:
0 25px 55px rgba(0, 0, 0, 0.11);
}
/* =========================================================
REVERSE SERVICE
========================================================= */
.service-reverse .service-feature-image {
order: 2;
}
.service-reverse .service-feature-content {
order: 1;
}
/* =========================================================
FEATURE IMAGE
========================================================= */
.service-feature-image {
position: relative;
min-height: 470px;
overflow: hidden;
}
.service-feature-image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0,0,0,0.08),
transparent
);
pointer-events: none;
}
.service-feature-image img {
width: 100%;
height: 100%;
display: block;
object-fit: fill;
transition:
transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.service-feature:hover
.service-feature-image img {
transform: scale(1.07);
}
/* =========================================================
SERVICE NUMBER
========================================================= */
.service-number {
position: absolute;
top: 22px;
left: 22px;
z-index: 2;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e8c15a;
color: #30343b;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
/* =========================================================
FEATURE CONTENT
========================================================= */
.service-feature-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
}
.service-label {
margin-bottom: 15px;
color: #a88600;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.service-feature-content h2 {
margin: 0 0 20px;
color: var(--difference-yellow);
font-size: clamp(30px, 3vw, 42px);
line-height: 1.12;
font-weight: 500;
}
.service-feature-content p {
margin: 0 0 25px;
color: #686a6d;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
SERVICE LIST
========================================================= */
.service-feature-content ul {
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.service-feature-content li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
color: #4d5054;
font-size: 15px;
}
.service-feature-content li::before {
content: "✓";
position: absolute;
left: 0;
color: #a88600;
font-weight: 800;
}
/* =========================================================
SERVICE LINK
========================================================= */
.service-link {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
color: #30343b;
text-decoration: none;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
transition: gap 0.3s ease;
}
.service-link span {
color: #a88600;
font-size: 18px;
line-height: 1;
}
.service-link:hover {
gap: 16px;
}
/* =========================================================
OTHER SERVICES
========================================================= */
.other-services {
padding: 110px 0;
background: #ffffff;
}
.other-services-heading {
margin-bottom: 55px;
}
.other-services-heading h2 {
max-width: 650px;
margin: 0;
color: #30343b;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.1;
font-weight: 500;
}
.other-services-heading h2 span {
color: #a88600;
}
/* =========================================================
SMALL SERVICE GRID
========================================================= */
.services-small-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 20px;
}
.service-small-card {
position: relative;
min-height: 300px;
padding: 35px 28px;
background: #f8f7f3;
border: 1px solid #e5e3dc;
border-radius: 18px;
overflow: hidden;
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
background 0.4s ease;
}
.service-small-card:hover {
transform: translateY(-8px);
background: #ffffff;
box-shadow:
0 20px 45px rgba(0,0,0,0.09);
}
.small-card-number {
position: absolute;
top: 20px;
right: 22px;
color: #c4c1b8;
font-size: 11px;
font-weight: 800;
}
.small-card-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 35px;
border-radius: 50%;
background: #e8c15a;
color: #30343b;
font-size: 18px;
}
.service-small-card h3 {
margin: 0 0 15px;
color: #30343b;
font-size: 21px;
line-height: 1.25;
}
.service-small-card p {
margin: 0;
color: #686a6d;
font-size: 13px;
line-height: 1.75;
}
/* =========================================================
CLINICAL PHILOSOPHY
========================================================= */
.services-philosophy {
padding: 110px 0;
}
.philosophy-box {
position: relative;
max-width: 950px;
margin: 0 auto;
padding: 75px 80px;
text-align: center;
background: #12213f;
border-radius: 25px;
overflow: hidden;
}
.philosophy-mark {
position: absolute;
top: 15px;
left: 35px;
color: #e8c15a;
font-family: Georgia, serif;
font-size: 120px;
line-height: 1;
opacity: 0.2;
}
.philosophy-box .services-intro-label {
color: #e8c15a;
}
.philosophy-box h2 {
position: relative;
margin: 0 auto 25px;
max-width: 760px;
color: #ffffff;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.2;
font-weight: 500;
}
.philosophy-box h2 span {
color: #e8c15a;
}
.philosophy-box p {
position: relative;
max-width: 650px;
margin: 0 auto;
color: #d8d8d8;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
CTA
========================================================= */
.services-cta {
padding: 110px 0;
background: #e8c15a;
}
.services-cta-content {
max-width: 750px;
}
.services-cta .services-intro-label {
color: #5b4a00;
}
.services-cta h2 {
margin: 0 0 20px;
color: #30343b;
font-size: clamp(40px, 5vw, 62px);
line-height: 1.05;
font-weight: 500;
}
.services-cta h2 span {
color: #ffffff;
}
.services-cta p {
max-width: 650px;
margin: 0 0 35px;
color: #4e4b3f;
font-size: 15px;
line-height: 1.8;
}
.services-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.services-primary-btn,
.services-secondary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 25px;
border-radius: 6px;
text-decoration: none;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.services-primary-btn {
background: #30343b;
color: #ffffff;
}
.services-secondary-btn {
background: #ffffff;
color: #30343b;
}
.services-primary-btn:hover,
.services-secondary-btn:hover {
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(0,0,0,0.15);
}
/* =========================================================
RESPONSIVE - TABLET
========================================================= */
@media (max-width: 1000px) {
.services-small-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.service-feature-content {
padding: 45px;
}
}
/* =========================================================
RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 700px) {
.services-container {
width: min(100% - 30px, 1180px);
}
.services-intro {
padding: 75px 0 55px;
}
.services-intro h1 {
font-size: 40px;
letter-spacing: -1px;
}
.services-intro p {
font-size: 14px;
}
/* FEATURE */
.featured-services {
padding: 10px 0 70px;
}
.service-feature {
grid-template-columns: 1fr;
margin-bottom: 25px;
}
.service-feature-image {
min-height: 280px;
height: 280px;
}
.service-reverse .service-feature-image {
order: 1;
}
.service-reverse .service-feature-content {
order: 2;
}
.service-feature-content {
padding: 35px 28px;
}
.service-feature-content h2 {
font-size: 30px;
}
.service-feature-content p {
font-size: 14px;
}
/* SMALL SERVICES */
.other-services {
padding: 75px 0;
}
.services-small-grid {
grid-template-columns: 1fr;
}
.service-small-card {
min-height: auto;
padding: 30px;
}
/* PHILOSOPHY */
.services-philosophy {
padding: 70px 0;
}
.philosophy-box {
padding: 55px 28px;
}
.philosophy-box h2 {
font-size: 30px;
}
.philosophy-box p {
font-size: 14px;
}
/* CTA */
.services-cta {
padding: 75px 0;
}
.services-cta h2 {
font-size: 42px;
}
.services-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.services-primary-btn,
.services-secondary-btn {
width: 100%;
}
}
/* =========================================================
SERVICES SCROLL ANIMATION
========================================================= */
.service-hidden {
opacity: 0;
transform: translateY(35px);
transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.service-visible {
opacity: 1;
transform: translateY(0);
}
/* style for service.html ends here */
/* why us section css home page starts here */
/* =========================================================================
WHY US — interactive flip cards
========================================================================= */
.why-us{
overflow:hidden;
}
.why-us .sec-head h2{
color:var(--difference-yellow);
}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.why-card{
appearance:none;
border:none;
background:none;
padding:0;
cursor:pointer;
perspective:1200px;
height:230px;
font-family:inherit;
}
.why-card-inner{
position:relative;
display:block;
width:100%;
height:100%;
transition:transform .6s cubic-bezier(.4,.2,.2,1);
transform-style:preserve-3d;
}
.why-card.is-flipped .why-card-inner{
transform:rotateY(180deg);
}
.why-card-face{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:26px 22px;
border-radius:22px;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.why-card-front{
background:var(--white);
border:2px solid var(--light-gray);
box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.why-card-icon{
font-size:2.1rem;
margin-bottom:14px;
display:block;
}
.why-card-title{
font-family:var(--font-display);
font-size:1.05rem;
font-weight:600;
color:var(--navy);
line-height:1.25;
margin-bottom:10px;
}
.why-flip-hint{
font-size:.7rem;
font-weight:700;
letter-spacing:.03em;
color:var(--teal-deep);
}
.why-card-back{
background:linear-gradient(135deg,var(--primary),var(--gold));
transform:rotateY(180deg);
box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.why-card-back-text{
color:var(--navy);
font-size:.88rem;
line-height:1.6;
font-weight:500;
}
.why-card:hover .why-card-inner{
transform:rotateY(180deg);
}
.why-card:focus-visible .why-card-front{
outline:3px solid var(--gold);
outline-offset:3px;
}
@media(max-width:900px){
.why-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:560px){
.why-grid{
grid-template-columns:1fr;
}
.why-card{
height:200px;
}
/* Hover-flip doesn't make sense on touch; tap relies on the JS-toggled class instead. */
.why-card:hover .why-card-inner{
transform:none;
}
.why-card.is-flipped .why-card-inner{
transform:rotateY(180deg);
}
}
/* why us section css home page ends here */
/* =========================================================
OUR DIFFERENCE
========================================================= */
/* =========================================================
OUR DIFFERENCE SECTION
========================================================= */
.our-difference {
--difference-yellow: #C9A227;
--difference-gold-light: #E7CB6B;
--difference-ink: #12213F;
--difference-dark: #0C172D;
--difference-muted: #697080;
--difference-soft: #FAF7F0;
--difference-pale: #F5EBC8;
--difference-white: #FFFFFF;
--difference-line: #E4E1D8;
width: 100%;
min-width: 0;
padding: 70px clamp(20px, 5vw, 80px);
background: var(--difference-soft);
color: var(--difference-ink);
overflow: hidden;
}
/* =========================================================
SECTION HEADING
========================================================= */
.difference-heading {
max-width: 700px;
margin: 0 auto 45px;
text-align: center;
}
.difference-heading h2 {
margin: 0;
color: var(--difference-yellow);
font-size: clamp(28px, 3vw, 42px);
line-height: 1.15;
font-weight: 700;
}
.difference-heading .heading-line {
width: 55px;
height: 3px;
margin: 18px auto;
background: var(--difference-yellow);
}
.difference-heading p {
max-width: 560px;
margin: 0 auto;
color: var(--difference-muted);
font-size: 18px;
line-height: 1.7;
}
/* =========================================================
FEATURE GRID
========================================================= */
.difference-features {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
width: 100%;
}
/* =========================================================
FEATURE CARD
========================================================= */
.difference-feature {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
padding: 14px 14px 20px;
border: 1px solid var(--difference-line);
border-radius: 16px;
background: var(--difference-white);
color: var(--difference-ink);
text-decoration: none;
cursor: pointer;
box-shadow:
0 6px 20px rgba(18, 33, 63, 0.04);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
z-index: 1;
}
.difference-feature:hover {
transform: translateY(-8px);
border-color: var(--difference-gold-light);
box-shadow:
0 18px 40px rgba(18, 33, 63, 0.13);
}
.difference-feature:focus-visible {
outline: 3px solid var(--difference-yellow);
outline-offset: 4px;
}
/* =========================================================
FEATURE IMAGE
========================================================= */
.difference-feature .feature-image {
position: relative;
width: 100%;
height: auto;
margin-bottom: 18px;
overflow: hidden;
border-radius: 11px;
background: var(--difference-pale);
}
.difference-feature .feature-image img {
display: block;
width: 100%;
height: auto;
object-fit: initial;
transition:
transform 0.55s ease;
}
.difference-feature:hover .feature-image img {
transform: none;
}
/* =========================================================
MAGNIFICATION BADGE
========================================================= */
.magnification-badge {
position: absolute;
left: 12px;
bottom: 12px;
display: grid;
place-items: center;
min-width: 48px;
min-height: 34px;
padding: 5px 10px;
border: 2px solid var(--difference-white);
border-radius: 30px;
background: var(--difference-dark);
color: var(--difference-gold-light);
font-size: 12px;
font-weight: 700;
box-shadow:
0 5px 15px rgba(12, 23, 45, 0.2);
}
/* =========================================================
CARD TEXT
========================================================= */
.difference-feature h3 {
margin: 0 0 9px;
color: var(--difference-ink);
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.2;
font-weight: 700;
}
.difference-feature p {
margin: 0;
color: var(--difference-muted);
font-size: 14px;
line-height: 1.55;
}
.feature-explore {
display: inline-block;
margin-top: auto;
padding-top: 18px;
color: var(--difference-yellow);
font-size: 12px;
font-weight: 700;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.difference-feature:hover .feature-explore {
color: var(--difference-dark);
transform: translateX(4px);
}
/* =========================================================
LARGE HOVER DETAIL PREVIEW
========================================================= */
/* =========================================================
FULLY VISIBLE DETAIL PREVIEW
========================================================= */
.difference-preview {
position: fixed;
top: 50%;
left: 50%;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
width: min(900px, calc(100vw - 40px));
max-height: calc(100vh - 40px);
/* FULLY OPAQUE BACKGROUND */
background: #FFFFFF;
/* SOLID BORDER */
border: 2px solid #C9A227;
border-radius: 20px;
/* STRONG SHADOW */
box-shadow:
0 20px 70px rgba(12, 23, 45, 0.45);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translate(-50%, -47%)
scale(0.96);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
/* KEEP POPUP ABOVE OTHER CONTENT */
z-index: 9999;
}
/* =========================================================
SHOW PREVIEW
========================================================= */
.difference-preview.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translate(-50%, -50%)
scale(1);
}
/* =========================================================
PREVIEW IMAGE
========================================================= */
.difference-preview-image {
width: 100%;
min-width: 0;
min-height: 0;
background: #FAF7F0;
overflow: hidden;
}
.difference-preview-image img {
display: block;
width: 100%;
height: auto;
object-fit: initial;
opacity: 1;
visibility: visible;
}
/* =========================================================
PREVIEW CONTENT
========================================================= */
.difference-preview-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 0;
padding: 42px;
/* FULLY OPAQUE CONTENT BACKGROUND */
background: #FFFFFF;
opacity: 1;
}
/* =========================================================
PREVIEW LABEL
========================================================= */
.preview-label {
display: block;
margin-bottom: 12px;
color: #C9A227;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 1;
}
/* =========================================================
PREVIEW HEADING
========================================================= */
.difference-preview-content h3 {
margin: 0;
color: #12213F;
font-size: clamp(25px, 3vw, 38px);
font-weight: 700;
line-height: 1.15;
opacity: 1;
}
/* =========================================================
PREVIEW LINE
========================================================= */
.preview-line {
width: 48px;
height: 3px;
margin: 18px 0;
background: #C9A227;
opacity: 1;
}
/* =========================================================
PREVIEW DESCRIPTION
========================================================= */
.difference-preview-content p {
margin: 0 0 20px;
color: #697080;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
opacity: 1;
}
/* =========================================================
PREVIEW BULLET LIST
========================================================= */
.difference-preview-content ul {
display: flex;
flex-direction: column;
gap: 11px;
margin: 0 0 25px;
padding: 0;
list-style: none;
opacity: 1;
}
.difference-preview-content li {
position: relative;
padding-left: 28px;
color: #12213F;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
opacity: 1;
}
.difference-preview-content li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
width: 19px;
height: 19px;
border-radius: 50%;
background: #C9A227;
color: #0C172D;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
PREVIEW LINK
========================================================= */
.preview-link {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 13px 20px;
border-radius: 8px;
background: #C9A227;
color: #0C172D;
font-size: 12px;
font-weight: 700;
text-decoration: none;
opacity: 1;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.preview-link:hover {
background: #E7CB6B;
transform: translateY(-2px);
}
/* =========================================================
CLOSE BUTTON
========================================================= */
.difference-preview-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid #E4E1D8;
border-radius: 50%;
background: #FFFFFF;
color: #0C172D;
font-size: 23px;
line-height: 1;
cursor: pointer;
opacity: 1;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.difference-preview-close:hover {
background: #F5EBC8;
transform: rotate(90deg);
}
/* =========================================================
REMOVE TRANSPARENT OVERLAY
========================================================= */
/*
Do not use a transparent pseudo-element inside
the popup because it can affect the appearance
of the preview.
*/
.difference-preview::before {
display: none;
content: none;
}
/* =========================================================
TABLET RESPONSIVENESS
========================================================= */
@media (max-width: 1100px) {
.difference-features {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.difference-feature h3 {
font-size: 18px;
}
.difference-preview {
width: min(780px, calc(100vw - 32px));
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media (max-width: 800px) {
.our-difference {
padding:
55px
20px;
}
.difference-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.difference-preview {
display: flex;
flex-direction: column;
width: min(600px, calc(100vw - 30px));
max-height: calc(100vh - 30px);
overflow-y: auto;
background: #FFFFFF;
}
.difference-preview-image {
flex-shrink: 0;
}
.difference-preview-image img {
height: auto;
}
.difference-preview-content {
flex-shrink: 0;
padding: 32px;
background: #FFFFFF;
}
.difference-preview-content h3 {
font-size: 28px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 520px) {
.our-difference {
padding:
45px
15px;
}
.difference-heading {
margin-bottom: 30px;
}
.difference-heading h2 {
font-size: 28px;
}
.difference-heading p {
font-size: 13px;
}
.difference-features {
grid-template-columns: 1fr;
gap: 16px;
}
.difference-feature {
padding: 12px 12px 18px;
}
.difference-feature .feature-image {
aspect-ratio: 1 / 0.72;
}
.difference-feature h3 {
font-size: 20px;
}
.difference-feature p {
font-size: 13px;
}
.difference-preview {
width: calc(100vw - 24px);
border-radius: 15px;
}
.difference-preview-image {
min-height: 0;
max-height: none;
}
.difference-preview-image img {
min-height: 0;
max-height: none;
}
.difference-preview-content {
padding: 28px 22px;
}
.difference-preview-content h3 {
font-size: 25px;
}
.difference-preview-content p {
font-size: 13px;
}
.difference-preview-content li {
font-size: 12px;
}
.preview-link {
padding: 12px 16px;
font-size: 11px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.difference-feature,
.difference-feature .feature-image img,
.feature-explore,
.difference-preview,
.preview-link,
.difference-preview-close {
transition: none;
}
}
/* =========================================================
OUR COMMITMENT
========================================================= */
.commitment-section {
width: 100%;
padding: 45px 5% 55px;
background: #f7f8f6;
box-sizing: border-box;
}
.commitment-container {
width: min(1200px, 100%);
min-height: 180px;
margin: 0 auto;
padding: 28px 25px;
background: #ffffff;
border-radius: 22px;
box-shadow:
0 8px 30px rgba(30,40,50,0.04);
display: grid;
grid-template-columns:
1.25fr
1px
1fr
1px
1fr
1px
1fr
1px
1.05fr;
align-items: center;
box-sizing: border-box;
}
/* ---------- Commitment Heading ---------- */
.commitment-heading {
padding: 0 20px;
}
.commitment-heading h2 {
margin: 0;
color: #172b4d;
font-size: 36px;
line-height: 1.12;
font-weight: 700;
letter-spacing: -1px;
}
.commitment-heading h2 span {
display: block;
color: #f1b900;
}
.commitment-line {
width: 65px;
height: 4px;
margin-top: 15px;
background: #f5c62f;
border-radius: 10px;
}
/* ---------- Vertical Dividers ---------- */
.commitment-divider {
width: 1px;
height: 100px;
background: #e1e3e5;
}
/* ---------- Commitment Item ---------- */
.commitment-item {
min-height: 120px;
padding: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.commitment-icon {
width: 62px;
height: 62px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f7c72f;
color: #172b4d;
}
.commitment-icon svg {
width: 32px;
height: 32px;
}
.commitment-item h3 {
margin: 0;
color: #172b4d;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
}
/* ---------- Handwritten Note ---------- */
.commitment-note {
min-height: 120px;
padding: 0 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.commitment-note p {
margin: 0;
color: #26334a;
font-family: "Brush Script MT",
"Segoe Script",
cursive;
font-size: 27px;
line-height: 1.05;
transform: rotate(-3deg);
}
.smile-face {
display: block;
margin-top: 7px;
color: #f2bc08;
font-size: 35px;
line-height: 1;
transform: rotate(4deg);
}
/* =========================================================
HOVER EFFECTS
========================================================= */
.feature-image {
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.difference-feature:hover .feature-image {
transform: scale(1.035);
box-shadow:
0 12px 30px rgba(245,198,47,0.15);
}
.commitment-icon {
transition:
transform 0.3s ease,
background 0.3s ease;
}
.commitment-item:hover .commitment-icon {
transform: translateY(-4px);
background: #f5c62f;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.difference-features {
grid-template-columns:
repeat(2, 1fr);
column-gap: 40px;
row-gap: 55px;
}
.commitment-container {
grid-template-columns:
1fr 1px 1fr 1px 1fr;
row-gap: 25px;
padding: 35px;
}
.commitment-heading {
grid-column: 1 / -1;
text-align: center;
padding-bottom: 15px;
}
.commitment-heading h2 span {
display: inline;
}
.commitment-heading .commitment-line {
margin-left: auto;
margin-right: auto;
}
.commitment-note {
grid-column: 1 / -1;
border-top: 1px solid #e1e3e5;
padding-top: 25px;
}
.commitment-container > .commitment-divider:nth-of-type(1) {
display: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.our-difference {
padding: 65px 20px;
}
.difference-heading {
margin-bottom: 40px;
}
.difference-heading h2 {
font-size: 32px;
letter-spacing: -1px;
}
.difference-heading p {
font-size: 15px;
padding: 0 10px;
}
.difference-features {
grid-template-columns: 1fr;
gap: 48px;
}
.difference-feature .feature-image {
width: 100%;
height: auto;
aspect-ratio: auto;
}
.difference-feature h3 {
font-size: 18px;
}
.difference-feature p {
font-size: 14px;
}
/* Commitment */
.commitment-section {
padding: 40px 18px;
}
.commitment-container {
display: flex;
flex-direction: column;
gap: 0;
padding: 30px 15px;
border-radius: 20px;
}
.commitment-heading {
width: 100%;
padding: 0 10px 25px;
border-bottom: 1px solid #e1e3e5;
}
.commitment-heading h2 {
font-size: 31px;
}
.commitment-item {
width: 100%;
min-height: 110px;
padding: 22px 10px;
border-bottom: 1px solid #e1e3e5;
}
.commitment-divider {
display: none;
}
.commitment-note {
width: 100%;
padding: 25px 10px 10px;
min-height: 100px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.difference-heading h2 {
font-size: 29px;
}
.feature-image {
width: 170px;
height: 170px;
}
.magnification-badge {
width: 58px;
height: 58px;
font-size: 16px;
}
}
/* what patients says style starts here */
/* =========================================================
PATIENT STORIES
Organic / Leaf Inspired Design
========================================================= */
.patient-stories {
--ps-navy: #12213f;
--ps-navy-dark: #0c172d;
--ps-gold: #c9a227;
--ps-gold-light: #e7cb6b;
--ps-cream: #faf7f0;
--ps-cream-dark: #f2eee3;
--ps-white: #ffffff;
--ps-text: #252a38;
--ps-grey: #697080;
--ps-border: #e4dfd2;
position: relative;
width: 100%;
overflow: hidden;
background:
radial-gradient(
circle at 8% 20%,
rgba(201, 162, 39, 0.08),
transparent 24%
),
radial-gradient(
circle at 92% 75%,
rgba(18, 33, 63, 0.05),
transparent 26%
),
var(--ps-cream);
padding: 110px 30px 90px;
}
/* =========================================================
DECORATIVE BACKGROUND LEAVES
========================================================= */
.patient-stories::before,
.patient-stories::after {
content: "";
position: absolute;
width: 170px;
height: 300px;
border: 1px solid rgba(201, 162, 39, 0.18);
border-radius: 100% 0 100% 0;
pointer-events: none;
opacity: 0.7;
}
.patient-stories::before {
left: -75px;
top: 80px;
transform: rotate(-28deg);
}
.patient-stories::after {
right: -75px;
bottom: 70px;
transform: rotate(152deg);
}
/* =========================================================
INNER
========================================================= */
.patient-stories-inner {
width: min(1400px, 100%);
margin: 0 auto;
position: relative;
z-index: 2;
}
/* =========================================================
HEADING
========================================================= */
.patient-stories-heading {
max-width: 760px;
margin: 0 auto 65px;
text-align: center;
}
.patient-stories-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--ps-gold);
margin-bottom: 17px;
}
.patient-stories-eyebrow::before,
.patient-stories-eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--ps-gold);
}
.patient-stories-heading h2 {
margin: 0;
font-family: "DM Sans", Arial, sans-serif;
font-size: clamp(42px, 5vw, 48px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.035em;
color: var(--difference-yellow);
}
.patient-stories-heading h2 span {
color: var(--ps-gold);
font-style: italic;
}
.patient-stories-heading p {
max-width: 650px;
margin: 22px auto 0;
color: var(--ps-grey);
font-size: 20px;
line-height: 1.8;
}
/* =========================================================
SLIDER
========================================================= */
.patient-slider {
width: 100%;
display: grid;
grid-template-columns: 58px minmax(0, 1fr) 58px;
gap: 20px;
align-items: center;
}
.patient-slider-viewport {
width: 100%;
overflow: hidden;
padding: 18px 5px 35px;
}
.patient-slider-track {
display: flex;
gap: 28px;
transform: translateX(0);
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
TESTIMONIAL CARD
========================================================= */
.patient-review-card {
position: relative;
flex: 0 0 calc((100% - 56px) / 3);
min-height: 410px;
padding: 52px 42px 38px;
background: var(--ps-white);
border: 1px solid rgba(201, 162, 39, 0.22);
/*
Organic shape rather than standard rectangular card
*/
border-radius:
42px 12px 48px 18px;
box-shadow:
0 18px 50px rgba(18, 33, 63, 0.07);
transition:
transform 0.45s ease,
box-shadow 0.45s ease;
overflow: hidden;
}
/* Organic gold corner */
.patient-review-card::before {
content: "";
position: absolute;
width: 115px;
height: 115px;
right: -40px;
top: -42px;
border-radius:
100% 0 100% 0;
background: rgba(231, 203, 107, 0.18);
transform: rotate(25deg);
transition: transform 0.5s ease;
}
/* Small leaf stem */
.patient-review-card::after {
content: "";
position: absolute;
width: 55px;
height: 2px;
right: 28px;
top: 45px;
background: var(--ps-gold);
transform: rotate(-42deg);
transform-origin: right center;
opacity: 0.65;
}
.patient-review-card:hover {
transform: translateY(-9px) rotate(-0.4deg);
box-shadow:
0 28px 65px rgba(18, 33, 63, 0.12);
}
.patient-review-card:hover::before {
transform: rotate(45deg) scale(1.15);
}
/* =========================================================
QUOTE
========================================================= */
.patient-quote-mark {
position: absolute;
left: 34px;
top: 20px;
font-family: Georgia, "Times New Roman", serif;
font-size: 105px;
line-height: 1;
color: rgba(201, 162, 39, 0.17);
pointer-events: none;
}
/* =========================================================
STARS
========================================================= */
.patient-stars {
position: relative;
z-index: 2;
display: flex;
gap: 4px;
margin-bottom: 23px;
}
.patient-stars span {
color: var(--ps-gold);
font-size: 18px;
}
/* =========================================================
REVIEW TEXT
========================================================= */
.patient-review-text {
position: relative;
z-index: 2;
margin: 0;
color: var(--ps-text);
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
line-height: 1.75;
min-height: 210px;
}
/* =========================================================
DIVIDER
========================================================= */
.patient-review-line {
width: 100%;
height: 1px;
background:
linear-gradient(
to right,
transparent,
var(--ps-border),
transparent
);
margin: 20px 0 23px;
}
/* =========================================================
AUTHOR
========================================================= */
.patient-review-author {
display: flex;
align-items: center;
gap: 14px;
position: relative;
z-index: 2;
}
.patient-author-initial {
width: 46px;
height: 46px;
flex: 0 0 46px;
display: grid;
place-items: center;
border-radius:
50% 45% 50% 42%;
background: var(--ps-navy);
color: var(--ps-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
box-shadow:
0 7px 20px rgba(18, 33, 63, 0.15);
}
.patient-author-details {
display: flex;
flex-direction: column;
gap: 4px;
}
.patient-author-details strong {
color: var(--ps-navy);
font-size: 14px;
font-weight: 700;
}
.patient-author-details span {
color: var(--ps-grey);
font-size: 12px;
}
.patient-author-details span b {
color: #4285f4;
font-size: 15px;
font-weight: 800;
margin-right: 4px;
}
/* =========================================================
ARROWS
========================================================= */
.patient-arrow {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--ps-border);
background: rgba(255, 255, 255, 0.9);
color: var(--ps-navy);
display: grid;
place-items: center;
cursor: pointer;
font-size: 22px;
box-shadow:
0 10px 25px rgba(18, 33, 63, 0.07);
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease,
border-color 0.3s ease;
}
.patient-arrow:hover:not(:disabled) {
background: var(--ps-navy);
color: var(--ps-white);
border-color: var(--ps-navy);
transform: scale(1.08);
}
.patient-arrow:disabled {
opacity: 0.3;
cursor: default;
}
/* =========================================================
DOTS
========================================================= */
.patient-slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
margin-top: 5px;
}
.patient-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d8d2c4;
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease;
}
.patient-dot.active {
width: 28px;
border-radius: 20px;
background: var(--ps-gold);
}
/* =========================================================
GOOGLE AREA
========================================================= */
.patient-google-area {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 28px;
margin-top: 65px;
}
.patient-google-line {
height: 1px;
background:
linear-gradient(
to right,
transparent,
var(--ps-border)
);
}
.patient-google-line:last-child {
background:
linear-gradient(
to left,
transparent,
var(--ps-border)
);
}
.patient-google-button {
display: inline-flex;
align-items: center;
gap: 13px;
padding: 15px 23px;
border: 1px solid var(--ps-border);
border-radius: 50px;
background: rgba(255, 255, 255, 0.7);
color: var(--ps-navy);
text-decoration: none;
font-size: 13px;
font-weight: 700;
box-shadow:
0 8px 25px rgba(18, 33, 63, 0.05);
transition:
transform 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
.patient-google-button:hover {
transform: translateY(-3px);
background: var(--ps-white);
border-color: var(--ps-gold);
}
.google-g {
font-size: 19px;
font-weight: 800;
color: #4285f4;
}
.patient-google-button strong {
font-size: 18px;
color: var(--ps-gold);
}
/* =========================================================
TRUST STRIP
========================================================= */
.patient-trust-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 60px;
border-top: 1px solid var(--ps-border);
border-bottom: 1px solid var(--ps-border);
background: #12213F;
}
.patient-trust-item {
min-height: 105px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
padding: 18px;
border-right: 1px solid var(--ps-border);
}
.patient-trust-item:last-child {
border-right: 0;
}
.patient-trust-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
border-radius:
50% 45% 50% 42%;
background: rgba(201, 162, 39, 0.13);
color: var(--ps-gold);
font-size: 17px;
}
.patient-trust-item strong {
display: block;
color: #FFFFFF;
font-size: 13px;
}
.patient-trust-item span {
display: block;
margin-top: 3px;
color: #9AA4BD;
font-size: 11px;
}
/* =========================================================
ANIMATION
========================================================= */
.patient-stories-heading,
.patient-slider,
.patient-google-area,
.patient-trust-strip {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.patient-stories.is-visible .patient-stories-heading,
.patient-stories.is-visible .patient-slider,
.patient-stories.is-visible .patient-google-area,
.patient-stories.is-visible .patient-trust-strip {
opacity: 1;
transform: translateY(0);
}
.patient-stories.is-visible .patient-slider {
transition-delay: 0.12s;
}
.patient-stories.is-visible .patient-google-area {
transition-delay: 0.22s;
}
.patient-stories.is-visible .patient-trust-strip {
transition-delay: 0.3s;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.patient-review-card {
flex-basis: calc((100% - 28px) / 2);
}
.patient-trust-strip {
grid-template-columns: repeat(2, 1fr);
}
.patient-trust-item:nth-child(2) {
border-right: 0;
}
.patient-trust-item:nth-child(-n + 2) {
border-bottom: 1px solid var(--ps-border);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.patient-stories {
padding: 75px 18px 65px;
}
.patient-stories-heading {
margin-bottom: 38px;
}
.patient-stories-heading h2 {
font-size: 43px;
}
.patient-stories-heading p {
font-size: 14px;
line-height: 1.7;
}
.patient-slider {
grid-template-columns: 42px minmax(0, 1fr) 42px;
gap: 7px;
}
.patient-slider-viewport {
padding: 12px 2px 28px;
}
.patient-slider-track {
gap: 0;
}
.patient-review-card {
flex: 0 0 100%;
min-height: 420px;
padding: 48px 28px 30px;
border-radius:
35px 10px 40px 15px;
}
.patient-review-text {
font-size: 16px;
min-height: 215px;
}
.patient-arrow {
width: 40px;
height: 40px;
font-size: 17px;
}
.patient-google-area {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 45px;
}
.patient-google-line {
display: none;
}
.patient-google-button {
justify-content: center;
width: 100%;
}
.patient-trust-strip {
grid-template-columns: 1fr;
margin-top: 45px;
}
.patient-trust-item,
.patient-trust-item:nth-child(2) {
border-right: 0;
border-bottom: 1px solid var(--ps-border);
}
.patient-trust-item:last-child {
border-bottom: 0;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 430px) {
.patient-stories-heading h2 {
font-size: 38px;
}
.patient-slider {
grid-template-columns: 34px minmax(0, 1fr) 34px;
}
.patient-review-card {
padding: 45px 23px 28px;
}
.patient-review-text {
font-size: 15px;
}
.patient-author-details strong {
font-size: 13px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.patient-stories *,
.patient-stories *::before,
.patient-stories *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* what patients says style ends here */
/* =========================================================
ABOUT SECTION HEADING
========================================================= */
.about-heading h2,
.about-heading p,
.about-eyebrow,
.about-line {
font-family: "DM Sans", Arial, sans-serif;
}
.about-heading {
text-align: center;
max-width: 800px;
margin: 0 auto 45px;
}
.about-eyebrow {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
/* text-transform: uppercase; */
}
.about-heading h2 {
margin: 0;
color: var(--difference-yellow);
font-size: clamp(30px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -1px;
}
.about-heading p {
max-width: 600px;
margin: 14px auto 0;
color: #697080;
font-size: 24px;
line-height: 1.6;
}
.about-line {
width: 48px;
height: 3px;
margin: 16px auto 0;
background: var(--difference-yellow);
}
/* =========================================================
CONTINUOUS CERTIFICATE SLIDER
========================================================= */
.certificate-marquee-section {
--certificate-gold: #C9A227;
--certificate-ink: #12213F;
--certificate-soft: #FAF7F0;
--certificate-white: #FFFFFF;
--certificate-line: #E4E1D8;
width: 100%;
padding: 35px 0;
background: var(--certificate-soft);
overflow: hidden;
}
/* =========================================================
SLIDER WRAPPER
========================================================= */
.certificate-marquee {
position: relative;
width: 100%;
overflow: hidden;
/*
* Adds a soft fade at the left and right edges.
*/
mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
}
/* =========================================================
MOVING TRACK
========================================================= */
.certificate-marquee-track {
display: flex;
align-items: center;
width: max-content;
gap: 22px;
padding: 12px 0;
/*
* The animation moves exactly half of the
* duplicated track for a seamless loop.
*/
animation: certificateContinuousMove 42s linear infinite;
will-change: transform;
}
/* =========================================================
PAUSE WHEN MOUSE HOVERS OVER SLIDER
========================================================= */
.certificate-marquee:hover
.certificate-marquee-track {
animation-play-state: paused;
}
/* =========================================================
CERTIFICATE CARD
========================================================= */
.certificate-card {
position: relative;
flex: 0 0 auto;
width: 245px;
height: 165px;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
background: var(--certificate-white);
border: 1px solid var(--certificate-line);
border-radius: 8px;
box-shadow:
0 5px 18px rgba(18, 33, 63, 0.08);
overflow: hidden;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
transform-origin: center center;
}
/* =========================================================
CERTIFICATE IMAGE
========================================================= */
.certificate-card img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 4px;
transition:
transform 0.4s ease;
transform-origin: center center;
}
/* =========================================================
HOVER ZOOM
========================================================= */
.certificate-card:hover {
z-index: 5;
border-color: var(--certificate-gold);
transform: scale(1.12);
box-shadow:
0 12px 35px rgba(18, 33, 63, 0.20);
}
/*
* Zoom the image slightly inside the card.
*/
.certificate-card:hover img {
transform: scale(1.035);
}
/* =========================================================
CONTINUOUS ANIMATION
========================================================= */
@keyframes certificateContinuousMove {
from {
transform: translateX(0);
}
to {
/*
* Six cards × 245px width
* Five gaps × 22px
*
* Total movement:
* 6 × 245 + 6 × 22 = 1602px
*
* The exact value is adjusted below
* through the CSS variable.
*/
transform: translateX(-1602px);
}
}
/* =========================================================
TABLET RESPONSIVENESS
========================================================= */
@media (max-width: 900px) {
.certificate-marquee-section {
padding: 30px 0;
}
.certificate-marquee-track {
gap: 18px;
animation-duration: 38s;
}
.certificate-card {
width: 215px;
height: 145px;
padding: 7px;
}
@keyframes certificateContinuousMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-1398px);
}
}
}
/* =========================================================
MOBILE RESPONSIVENESS
========================================================= */
@media (max-width: 600px) {
.certificate-marquee-section {
padding: 24px 0;
}
.certificate-marquee-track {
gap: 14px;
padding: 10px 0;
animation-duration: 32s;
}
.certificate-card {
width: 175px;
height: 120px;
padding: 6px;
border-radius: 6px;
}
.certificate-card:hover {
transform: scale(1.08);
}
@keyframes certificateContinuousMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-1134px);
}
}
}
/* =========================================================
SMALL MOBILE DEVICES
========================================================= */
@media (max-width: 400px) {
.certificate-card {
width: 155px;
height: 108px;
}
.certificate-marquee-track {
gap: 12px;
animation-duration: 28s;
}
@keyframes certificateContinuousMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-1002px);
}
}
}
/* =========================================================
REDUCED MOTION ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.certificate-marquee-track {
animation-play-state: paused;
}
}
/* =========================================================
RESPONSIVE CONSOLIDATION PATCH
Purpose: preserve the existing design while preventing
overflow, overlap, and broken layouts at all screen sizes.
========================================================= */
/* ---------------------------------------------------------
01. GLOBAL RESPONSIVE SAFETY
--------------------------------------------------------- */
html {
width: 100%;
max-width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
img,
svg,
video,
iframe {
max-width: 100%;
}
button,
a,
input,
select,
textarea {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
/* ---------------------------------------------------------
02. MAIN CONTAINERS AND SECTION SPACING
--------------------------------------------------------- */
.container {
width: min(100% - 40px, 1600px);
margin-inline: auto;
}
section,
main,
header,
footer {
max-width: 100%;
}
/* ---------------------------------------------------------
03. HEADER AND NAVIGATION — LARGE DESKTOP
--------------------------------------------------------- */
@media (min-width: 1451px) {
.nav-wrap {
min-height: 82px;
gap: 24px;
}
/* .brand-name {
font-size: clamp(1.55rem, 1.65vw, 2.22rem);
} */
nav ul {
gap: clamp(12px, 1.35vw, 24px);
}
nav a {
font-size: clamp(1rem, 1.15rem, 1.25rem);
}
.appointment-trigger {
min-height: 44px;
padding: 11px 20px;
font-size: .92rem;
}
}
/* ---------------------------------------------------------
04. HEADER AND NAVIGATION — LAPTOP / COMPACT DESKTOP
--------------------------------------------------------- */
@media (min-width: 1050px) and (max-width: 1450px) {
.nav-wrap {
display: grid;
grid-template-columns: minmax(185px, auto) minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 72px;
}
.brand {
min-width: 0;
max-width: 100%;
}
.brand img {
width: 44px !important;
height: 44px !important;
flex-basis: 44px;
}
/* .brand-name {
max-width: clamp(150px, 15vw, 245px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: clamp(1.25rem, 1.45vw, 1.65rem);
} */
nav {
/* min-width: 0;
width: 100%; */
/* width: fit-content; */
max-width: 100%;
/* flex: 0 1 auto; */
min-width: 0;
justify-content: center;
}
nav ul {
/* width: 100%;
max-width: 100%;
gap: clamp(5px, .72vw, 13px);
justify-content: center; */
display: flex;
width: max-content;
max-width: 100%;
margin: 0;
padding: 0;
gap: clamp(12px, 1.2vw, 20px);
justify-content: center;
align-items: center;
list-style: none;
}
nav a {
/* padding: 7px 1px;*/
/* font-size: clamp(.65rem, .75vw, .84rem); */
font-size: clamp(.85rem, .95rem, 1.15rem);
/* letter-spacing: -.01em; */
padding-left: 8px;
padding-right: 8px;
white-space: nowrap;
}
nav ul li {
flex: 0 0 auto;
}
.nav-cta {
gap: 6px;
}
.appointment-trigger {
min-height: 42px;
padding: 10px 13px;
font-size: .84rem;
}
}
/* Extra compact laptop range: keep all three header columns usable. */
@media (min-width: 1050px) and (max-width: 1199px) {
.container {
width: min(100% - 28px, 1600px);
}
.nav-wrap {
grid-template-columns: minmax(145px, 1fr) minmax(0, 2.4fr) auto;
gap: 8px;
}
/* .brand-name {
max-width: 155px;
font-size: 1rem;
} */
nav ul {
gap: 5px;
}
nav a {
font-size: .59rem;
}
.appointment-trigger {
padding-inline: 10px;
font-size: .80rem;
}
}
/* ---------------------------------------------------------
05. HEADER INFORMATION BAR
--------------------------------------------------------- */
@media (min-width: 1050px) {
.header-info {
font-size: clamp(.65rem, .72vw, .82rem);
}
.header-info-wrap {
min-height: 42px;
gap: 12px;
}
}
/* ---------------------------------------------------------
06. MOBILE / TABLET NAVIGATION
--------------------------------------------------------- */
@media (max-width: 1049px) {
.nav-wrap {
min-height: 68px;
gap: 10px;
}
/* .brand-name {
max-width: 46vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: clamp(1rem, 3vw, 1.45rem);
} */
.appointment-trigger {
min-height: 42px;
padding: 9px 13px;
font-size: .88rem;
}
.menu-toggle {
display: flex;
}
nav ul {
max-width: calc(100vw - 24px);
}
}
/* ---------------------------------------------------------
07. TABLET SECTION LAYOUTS
--------------------------------------------------------- */
@media (max-width: 900px) {
.container {
width: min(100% - 40px, 760px);
}
.hero,
.about-grid,
.doctor-about-container,
.two-col,
.contact-grid,
.practice,
.difference-layout {
grid-template-columns: 1fr !important;
}
.hero-content,
.hero-text,
.about-text,
.text-block {
width: 100%;
max-width: 100%;
}
.hero-image,
.about-img,
.photo-card,
.map-wrap {
width: 100%;
max-width: 100%;
}
.services-grid,
.features-grid,
.cred-grid,
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arrow {
display: none;
}
}
/* ---------------------------------------------------------
08. MOBILE TYPOGRAPHY AND SPACING
--------------------------------------------------------- */
@media (max-width: 600px) {
.container {
width: calc(100% - 32px);
}
.header-info-wrap {
min-height:34px;
padding-block:6px;
gap:6px;
flex-direction:row;
align-items:center;
justify-content:flex-start;
flex-wrap:nowrap;
overflow:hidden;
white-space:nowrap;
}
.header-info {
font-size:clamp(.46rem, 1.8vw, .58rem);
line-height:1.15;
white-space:nowrap;
}
/* .brand-name {
max-width: 40vw;
font-size: .98rem;
} */
.brand img {
width: 40px !important;
height: 40px !important;
}
.appointment-trigger {
min-height: 38px;
padding: 8px 10px;
font-size: .78rem;
}
.menu-toggle {
width: 38px;
height: 38px;
flex-basis: 38px;
font-size: 21px;
}
nav ul {
right: 0;
width: min(320px, calc(100vw - 32px));
}
.services-grid,
.features-grid,
.cred-grid,
.footer-grid,
.steps {
grid-template-columns: 1fr;
}
.section,
section {
scroll-margin-top: 90px;
}
.hero,
.about,
.doctor-about-section,
.services-section,
.contact-section,
.journey,
.practice,
.cta {
padding-top: 60px;
padding-bottom: 60px;
}
.hero h1,
.section-title,
.about h2,
.doctor-about-section h2 {
font-size: clamp(1.8rem, 8vw, 2.7rem);
line-height: 1.1;
}
.cta,
.footer-bottom {
text-align: center;
}
.cta {
flex-direction: column;
align-items: stretch;
gap: 22px;
}
.cta .btn,
.cta .cta-btn {
width: 100%;
justify-content: center;
}
input,
select,
textarea {
width: 100%;
max-width: 100%;
}
.map-wrap iframe {
min-height: 300px;
}
}
/* ---------------------------------------------------------
09. VERY SMALL MOBILE DEVICES
--------------------------------------------------------- */
@media (max-width: 400px) {
.container {
width: calc(100% - 24px);
}
.nav-wrap {
gap: 5px;
}
/* .brand-name {
max-width: 34vw;
font-size: .86rem;
} */
.appointment-trigger {
padding-inline: 8px;
font-size: .70rem;
}
.header-info-wrap{
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
flex-wrap:nowrap;
gap:5px;
overflow:hidden;
white-space:nowrap;
}
.availability,
.header-contact{
flex-wrap:nowrap;
white-space:nowrap;
flex-shrink:0;
}
.header-info{
font-size:.48rem;
line-height:1.1;
white-space:nowrap;
}
}
/* ---------------------------------------------------------
10. ACCESSIBILITY AND MOTION SAFETY
--------------------------------------------------------- */
:focus-visible {
outline: 3px solid var(--gold, #E6A900);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
FINAL COMPATIBILITY SAFETY RULES
These rules prevent overflow and preserve existing layouts.
========================================================= */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
img,
video,
iframe {
max-width: 100%;
}
button,
a,
input,
select,
textarea {
font: inherit;
}
@media (max-width: 700px) {
.container {
width: 100%;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
}
.hero,
.about-grid,
.doctor-about-container,
.two-col,
.contact-grid,
.practice,
.difference-layout {
grid-template-columns: 1fr;
}
.services-grid,
.cards-grid,
.features-grid,
.credentials-grid,
.gallery-grid,
.testi-grid {
grid-template-columns: 1fr;
}
.btn,
.cta-btn,
.appointment-trigger,
.preview-link {
max-width: 100%;
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}