/* ====== YOUR PROVIDED GLOBAL/HEADER/BANNER/SERVICES/REVIEWS/GALLERY/CONTACT/APPOINTMENT/FOOTER CSS ====== */
/* (pasted exactly as shared) */
html, body { width: 100%; overflow-x: hidden; }
body { margin: 0; font-family: 'Poppins', sans-serif; background: #fff; color: #333; scroll-behavior: smooth; }
h2 { font-size: 2rem; color: #0a0a0a; text-align: center; margin-bottom: 40px; }
.container { width: 90%; margin: auto; }
/* ===== STICKY HEADER ===== */
.header {
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
/* Adjust layout */
.header-content {
width: 90%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
/* Logo */
.logo-area {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.logo {
height: 55px;
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
/* ===== Navigation Menu ===== */
.nav-menu ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 23px;
}
.nav-menu ul li a {
color: #0a0a0a;
font-weight: 600;
text-decoration: none;
font-size: 0.98rem;
transition: all 0.3s ease;
position: relative;
}
.nav-menu ul li a::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 2px;
background: #f26f23;
transition: width 0.3s ease;
}
.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {
width: 100%;
}
.nav-menu ul li a:hover {
color: #f26f23;
}
/* ===== Phone Button ===== */
.phone-btn {
background: #f26f23;
color: #fff;
font-weight: 600;
padding: 10px 18px;
border-radius: 8px;
text-decoration: none;
display: flex;
align-items: center;
gap: 0px;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(242,111,35,0.3);
}
.phone-btn:hover {
background: #0a0a0a;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.phone-btn i {
font-size: 1rem;
}
/* ===== MOBILE NAVIGATION ===== */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: #0a0a0a;
border-radius: 2px;
transition: all 0.3s ease;
}
/* ===== Responsive Menu ===== */
@media (max-width: 992px) {
.nav-menu {
position: fixed;
top: 70px;
right: -100%;
background: #fff;
width: 250px;
height: calc(100vh - 70px);
box-shadow: -2px 0 15px rgba(0,0,0,0.1);
transition: right 0.3s ease;
z-index: 999;
}
.nav-menu.active {
right: 0;
}
.nav-menu ul {
flex-direction: column;
align-items: start;
gap: 25px;
padding: 40px 25px;
}
.phone-btn {
display: none;
}
.hamburger {
display: flex;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 6px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -6px);
}
}
/* ===== MOBILE RESPONSIVE HEADER ===== */
@media (max-width: 768px) {
.header-content { justify-content: center; }
nav { display: none; } /* Hide desktop nav */
.logo { height: 55px; }
.header { padding: 10px 0; }
}
/* BANNER (kept for compatibility though we use .hero) */
.banner { background: linear-gradient(rgba(10,10,10,0.4), rgba(10,10,10,0.4)), url('landing-page-assets/AdvancePhysiotherapy.jpg') center/cover no-repeat; height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.overlay { background-color: rgba(51, 51, 51, 0.6); padding: 40px; border-radius: 12px; color: #fff; max-width: 700px; }
.overlay h1 { font-size: 2.5rem; margin-bottom: 15px; }
.cta-btn { background: #f26f23; color: #fff; padding: 14px 30px; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; margin-top: 20px; transition: 0.3s ease; text-decoration: none; display:inline-block; }
.cta-btn:hover { background: #d85e1f; transform: translateY(-2px); }
/* === SERVICES (unchanged, very long) === */
/* ... (all your provided services, goal, reviews, gallery, contact, appointment, footer, date input styles) */
.section-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 1; }
/* (Keeping your full long block exactly; omitted here in this snippet for brevity in explanation, but it should remain pasted as in your message.) */
/* Paste ALL the provided CSS from your message here, unchanged. */
/* ——— START of your long block ——— */
/* === OUR CORE TREATMENTS HEADER ... (keep everything you sent) */
/* ... [YOUR FULL CSS BLOCK GOES HERE WITHOUT CHANGES] ... */
/* ——— END of your long block ——— */
/* ====== ADDITIONS FOR THIS PAGE ====== */
/* Accessibility helper */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Mobile hamburger button */
.hamburger { display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.hamburger span { display:block; width:26px; height:3px; background:#0a0a0a; margin:5px 0; border-radius:2px; transition:transform .3s, opacity .3s; }
@media (max-width: 768px) { .hamburger{display:block;} body.no-scroll{overflow:hidden;} }
/* Mobile slide-down menu */
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:#fff; border-top:1px solid #eee; box-shadow:0 6px 18px rgba(0,0,0,.08); z-index:999; padding:14px 20px; }
.mobile-menu a { display:block; padding:12px 8px; color:#0a0a0a; text-decoration:none; font-weight:600; }
.mobile-menu a:hover{ color:#f26f23; }
.mobile-menu .mobile-cta{ background:#f26f23; color:#fff; text-align:center; border-radius:8px; margin-top:8px; }
.mobile-menu.open{ display:block; }
/* ===== Hero Slider ===== */
.hero {
position: relative;
height: min(92vh, 820px);
}
.slider {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.slides {
width: 100%;
height: 100%;
position: relative;
}
.slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
/* ✅ changed this line below */
background: radial-gradient(rgba(0,0,0,.15), rgba(0,0,0,.45)), var(--bg) top center / cover no-repeat;
opacity: 0;
transform: scale(1.02);
transition: opacity .6s ease, transform .8s ease;
}
.slide.active {
opacity: 1;
transform: scale(1);
}
.slide-overlay {
color: #fff;
max-width: 860px;
background: rgba(10,10,10,.35);
padding: 32px 28px;
border-radius: 12px;
backdrop-filter: saturate(140%) blur(2px);
}
.slide-overlay h1 {
font-size: 2.6rem;
margin: 0 0 12px;
}
.slide-overlay p {
font-size: 1.05rem;
margin: 0;
color: #fff;
}
@media (max-width:768px) {
.slide-overlay h1 {
font-size: 1.9rem;
}
}
/* Dots */
.slider-dots { position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:10px; }
.dot { width:12px; height:12px; border-radius:50%; background:#fff; opacity:.6; border:0; cursor:pointer; }
.dot.active, .dot:hover { opacity:1; background:#f26f23; }
/* ===== About ===== */
.about { padding:80px 0; }
.about-wrap { display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:center; }
.about-media img { width:100%; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.about-text p { color:#444; line-height:1.8; }
.about-bullets { margin:18px 0 0; padding:0 0 0 18px; }
@media (max-width: 992px){ .about-wrap{ grid-template-columns:1fr; } }
/* ===== Services Grid ===== */
.services-grid { display:grid; gap:24px; grid-template-columns: repeat(3, 1fr); }
.service-card { background:#fff; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.06); padding:16px; transition:transform .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.1); }
.service-card img { width:100%; height:170px; object-fit:cover; border-radius:10px; }
.service-card h3 { margin:14px 0 6px; font-size:1.1rem; color:#0a0a0a; }
.service-card p { margin:0; color:#444; }
@media (max-width:1024px){ .services-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr;} .service-card img{ height:200px; } }
/* ===== Locations (5 items: 3 in first row, 2 next) ===== */
.locations { padding:80px 0; }
.locations-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.location-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.06); display:flex; flex-direction:column; }
.location-card img { width:100%; height:200px; object-fit:cover; }
.loc-text { padding:16px 18px 22px; }
.loc-text h3 { margin:0 0 6px; }
.loc-text p { margin:6px 0; color:#444; }
@media (max-width:1024px){ .locations-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .locations-grid{ grid-template-columns:1fr;} }
/* ===== Testimonials tweaks ===== */
/* ===== FIXED REVIEWS SECTION ===== */
/* ---------- Reviews section (keeps your original look + improvements) ---------- */
.reviews {
background: linear-gradient(135deg, #f26f23 0%, #ff7e3e 40%, #0a0a0a 100%);
color: #fff;
padding: 90px 5%;
position: relative;
text-align: center;
}
.reviews-container {
max-width: 1100px;
margin: 0 auto;
}
.reviews h2 {
font-size: 2.4rem;
color: #fff;
margin-bottom: 10px;
font-weight: 700;
}
.review-intro {
font-size: 1.05rem;
color: #f2f2f2;
margin-bottom: 50px;
max-width: 700px;
margin-inline: auto;
line-height: 1.7;
}
/* --- Cards Grid --- */
.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
justify-items: center;
}
/* --- Card --- */
.review-card {
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 22px 18px;
text-align: left;
color: #fff;
backdrop-filter: blur(6px);
transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
position: relative;
overflow: hidden;
max-width: 340px;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* subtle hover */
.review-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 30px rgba(0,0,0,0.38);
background: rgba(255, 255, 255, 0.12);
}
/* meta (name / role) at top */
.review-meta {
margin-bottom: 6px;
}
.review-name {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
.review-role {
font-size: 0.86rem;
color: rgba(255,255,255,0.85);
margin-top: 6px;
}
/* --- Avatar block: centered square modern look --- */
.review-avatar {
width: 110px;
height: 110px;
margin: 12px auto 8px;
border-radius: 12px; /* square with soft corners */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
box-shadow: 0 6px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
}
/* image fills the square, keeps aspect ratio */
.review-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* fallback initial when no photo available */
.avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 2.1rem;
color: #fff;
background: linear-gradient(135deg, rgba(0,0,0,0.18), rgba(255,255,255,0.02));
}
/* --- Stars centered under the avatar --- */
.review-stars {
text-align: center;
color: #ffd700;
font-size: 1.05rem;
margin: 6px 0 10px;
}
/* --- Review text --- */
.review-text {
margin-top: 4px;
font-size: 0.95rem;
color: #fefefe;
line-height: 1.6;
flex-grow: 1;
}
/* --- View all button --- */
.view-all-btn {
display: inline-block;
margin-top: 34px;
background-color: #fff;
color: #0a0a0a;
font-weight: 600;
padding: 12px 30px;
border-radius: 8px;
text-decoration: none;
transition: all 0.28s ease;
}
.view-all-btn:hover {
background-color: #0a0a0a;
color: #fff;
}
/* --- Responsive adjustments --- */
@media (max-width: 992px) {
.review-avatar { width: 100px; height: 100px; }
.review-card { max-width: 300px; }
}
@media (max-width: 768px) {
.reviews {
padding: 70px 6%;
}
.reviews h2 {
font-size: 2rem;
}
.review-intro {
font-size: 0.95rem;
}
.review-card {
max-width: 100%;
padding: 18px;
}
.review-grid {
gap: 20px;
}
.review-avatar { width: 92px; height: 92px; border-radius: 10px; }
}
/* ===== MODERNIZED & OPTIMIZED BOOK YOUR APPOINTMENT SECTION ===== */
.appointment {
background: linear-gradient(135deg, #fff 0%, #fafafa 60%, #fef5ef 100%);
color: #333;
padding: 70px 5%;
position: relative;
overflow: hidden;
}
.appointment::before {
content: "";
position: absolute;
top: -50px;
right: -80px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(242,111,35,0.12) 0%, transparent 70%);
z-index: 0;
}
.appointment-container {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 50px;
max-width: 1100px;
margin: auto;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* LEFT SIDE TEXT */
.appointment-text {
flex: 1;
min-width: 280px;
}
.appointment-text h2 {
font-size: 2.2rem;
color: #0a0a0a;
font-weight: 700;
margin-bottom: 10px;
}
.appointment-intro {
font-size: 1.05rem;
color: #555;
line-height: 1.7;
margin-bottom: 22px;
max-width: 480px;
}
.benefits {
list-style: none;
padding-left: 0;
margin: 0;
}
.benefits li {
font-size: 0.95rem;
color: #333;
margin-bottom: 10px;
position: relative;
padding-left: 26px;
line-height: 1.5;
}
/* Single tick icon — fixed */
.benefits li::before {
content: "✔";
position: absolute;
left: 0;
top: 0;
color: #f26f23;
font-weight: 600;
}
/* RIGHT FORM */
.appointment-form {
flex: 1;
max-width: 460px;
background: #fff;
border-radius: 14px;
padding: 35px 30px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.appointment-form:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}
.appointment-form h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
color: #0a0a0a;
border-left: 4px solid #f26f23;
padding-left: 10px;
}
/* FORM FIELDS */
.form-group {
position: relative;
margin-bottom: 18px; /* reduced vertical gap */
}
input, textarea, select {
width: 100%;
padding: 12px 10px;
background: #fafafa;
border: 2px solid transparent;
border-radius: 8px;
font-size: 0.95rem;
outline: none;
color: #333;
transition: all 0.3s ease;
}
/* --- Dropdown (Select) Fix for Floating Label --- */
.form-group select {
appearance: none;
width: 100%;
padding: 12px 36px 12px 10px;
background: #fafafa
url('data:image/svg+xml;utf8,')
no-repeat right 12px center/16px;
border: 2px solid transparent;
border-radius: 8px;
font-size: 0.95rem;
outline: none;
color: #333;
transition: all 0.3s ease;
cursor: pointer;
}
.form-group select:focus {
border-color: #f26f23;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(242,111,35,0.1);
}
.form-group select + label {
position: absolute;
top: 13px;
left: 12px;
color: #888;
font-size: 0.9rem;
pointer-events: none;
background: transparent;
transition: all 0.3s ease;
}
.form-group select:focus + label,
.form-group select:valid + label {
top: -9px;
left: 10px;
font-size: 0.78rem;
color: #f26f23;
background: #fff;
padding: 0 6px;
}
textarea {
resize: none;
height: 70px; /* smaller form height */
}
input:focus, textarea:focus, select:focus {
border-color: #f26f23;
background: #fff;
box-shadow: 0 0 0 3px rgba(242,111,35,0.1);
}
label {
position: absolute;
top: 14px;
left: 12px;
color: #888;
font-size: 0.9rem;
pointer-events: none;
transition: 0.3s ease;
}
input:focus + label,
textarea:focus + label,
input:valid + label,
textarea:valid + label,
select:focus + label,
select:valid + label {
top: -9px;
left: 10px;
font-size: 0.78rem;
color: #f26f23;
background: #fff;
padding: 0 6px;
}
/* SUBMIT BUTTON */
.submit-btn {
width: 100%;
background: #f26f23;
color: #fff;
border: none;
padding: 13px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(242,111,35,0.25);
}
.submit-btn:hover {
background: #0a0a0a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
/* THANK YOU */
.thank-you {
display: none;
margin-top: 10px;
font-size: 0.95rem;
color: green;
text-align: center;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.appointment-container {
flex-direction: column;
align-items: center;
text-align: center;
}
.appointment-text {
margin-bottom: 35px;
}
.appointment-form {
max-width: 100%;
padding: 30px 25px;
}
.benefits {
text-align: left;
margin: 0 auto;
max-width: 300px;
}
}
/* ===== FOOTER VISIBILITY FIX ===== */
.footer {
background: #0a0a0a; /* dark contrast background */
color: #fff;
text-align: center;
padding: 40px 5% 30px;
position: relative;
z-index: 2;
box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.footer-accent {
height: 4px;
background: #f26f23;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.footer p {
margin: 8px 0;
font-size: 0.95rem;
line-height: 1.6;
}
.footer .footer-links {
margin-top: 10px;
}
.footer .footer-links a {
color: #fff;
text-decoration: none;
font-weight: 500;
margin: 0 6px;
transition: color 0.3s ease;
}
.footer .footer-links a:hover {
color: #f26f23;
}
/* Make sure it’s always visible even if content is short */
html, body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > *:last-child {
margin-top: auto; /* pushes footer to bottom */
}
/* ===== ABOUT SECTION UPGRADE ===== */
.about-section {
background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%);
padding: 100px 5%;
position: relative;
}
.about-container {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}
.about-image {
flex: 1;
min-width: 300px;
position: relative;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.about-image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1), transparent 60%);
z-index: 1;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.about-image:hover img {
transform: scale(1.05);
}
.about-content {
flex: 1.1;
min-width: 320px;
color: #333;
}
.about-content h2 {
font-size: 2.4rem;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 15px;
position: relative;
}
.about-content h2::after {
content: "";
display: block;
width: 70px;
height: 4px;
background: #f26f23;
border-radius: 2px;
margin-top: 10px;
}
.about-content p {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 25px;
color: #444;
}
.about-list {
list-style: none;
padding: 0;
margin-bottom: 35px;
}
.about-list li {
margin-bottom: 10px;
font-size: 0.98rem;
color: #0a0a0a;
display: flex;
align-items: center;
gap: 8px;
}
/* CTA BUTTON */
.about-btn {
display: inline-block;
background: #f26f23;
color: #fff;
font-weight: 600;
padding: 14px 32px;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 6px 16px rgba(242, 111, 35, 0.3);
transition: all 0.3s ease;
}
.about-btn:hover {
background: #0a0a0a;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* RESPONSIVE */
@media (max-width: 992px) {
.about-container {
flex-direction: column;
text-align: center;
gap: 40px;
}
.about-content h2::after {
margin-inline: auto;
}
.about-btn {
margin: 0 auto;
}
}
/* ===== FADE ANIMATION (optional) ===== */
[data-animate] {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].visible {
opacity: 1;
transform: translateY(0);
}
/* ===== MODERN SERVICES SECTION ===== */
.services-modern {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
padding: 100px 5%;
position: relative;
overflow: hidden;
}
.services-header {
text-align: center;
max-width: 750px;
margin: 0 auto 60px;
}
.services-header h2 {
font-size: 2.6rem;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 10px;
position: relative;
}
.services-header h2::after {
content: "";
display: block;
width: 80px;
height: 4px;
background: #f26f23;
border-radius: 3px;
margin: 16px auto 0;
}
.services-header p {
color: #555;
font-size: 1.05rem;
line-height: 1.7;
margin-top: 12px;
}
/* GRID */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 35px;
max-width: 1200px;
margin: 0 auto;
}
/* CARD STYLE */
.service-item {
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-item:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.service-img {
position: relative;
overflow: hidden;
height: 220px;
}
.service-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.5s ease;
}
.service-item:hover img {
transform: scale(1.08);
filter: brightness(0.9);
}
/* Overlay on hover */
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(10,10,10,0.65) 100%);
color: #fff;
opacity: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 20px;
transition: opacity 0.4s ease;
}
.service-item:hover .overlay {
opacity: 1;
}
.overlay h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
text-align: center;
}
/* Description below */
.service-item p {
padding: 18px 20px 25px;
font-size: 0.98rem;
color: #444;
line-height: 1.6;
}
/* Link styling */
.service-link {
text-decoration: none;
color: inherit;
display: block;
}
.service-link h3:hover {
color: #f26f23;
transition: color 0.3s ease;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.services-modern { padding: 70px 5%; }
.service-img { height: 200px; }
.services-header h2 { font-size: 2.2rem; }
}
/* ===== SCROLL ANIMATION FOR SERVICES ===== */
[data-animate] {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
will-change: opacity, transform;
}
[data-animate].visible {
opacity: 1;
transform: translateY(0);
}
/* slight stagger for cards inside the grid */
.services-grid [data-animate]:nth-child(1) { transition-delay: 0s; }
.services-grid [data-animate]:nth-child(2) { transition-delay: 0.1s; }
.services-grid [data-animate]:nth-child(3) { transition-delay: 0.2s; }
.services-grid [data-animate]:nth-child(4) { transition-delay: 0.3s; }
.services-grid [data-animate]:nth-child(5) { transition-delay: 0.4s; }
.services-grid [data-animate]:nth-child(6) { transition-delay: 0.5s; }
/* ===== CLEAN & TIGHTENED SERVICES SECTION ===== */
.services-clean {
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
padding: 80px 5%;
position: relative;
}
.services-header {
text-align: center;
max-width: 720px;
margin: 0 auto 50px;
}
.services-header h2 {
font-size: 2.4rem;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 10px;
}
.services-header h2::after {
content: "";
display: block;
width: 70px;
height: 4px;
background: #f26f23;
border-radius: 3px;
margin: 12px auto 0;
}
.services-header p {
color: #555;
font-size: 1.02rem;
line-height: 1.6;
margin-top: 10px;
}
/* Grid layout */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1150px;
margin: 0 auto;
}
/* Card styling */
.service-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}
/* Image */
.service-image {
height: 190px;
overflow: hidden;
position: relative;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, filter 0.5s ease;
}
.service-card:hover img {
transform: scale(1.06);
filter: brightness(0.95);
}
/* Content */
.service-content {
padding: 18px 20px 24px;
text-align: left;
}
.service-content h3 {
font-size: 1.15rem;
color: #0a0a0a;
margin-bottom: 6px;
font-weight: 600;
transition: color 0.3s ease;
line-height: 1.35;
}
.service-content p {
color: #444;
line-height: 1.55;
font-size: 0.95rem;
margin: 0;
}
/* Hover accent */
.service-card:hover h3 {
color: #f26f23;
}
.service-link {
text-decoration: none;
color: inherit;
display: block;
}
/* Responsive */
@media (max-width: 1024px) {
.services-clean { padding: 70px 5%; }
.service-image { height: 180px; }
.service-content { padding: 16px 18px 22px; }
.service-content h3 { font-size: 1.1rem; margin-bottom: 6px; }
.service-content p { font-size: 0.94rem; }
}
@media (max-width: 640px) {
.services-grid { gap: 24px; }
.service-image { height: 170px; }
.service-content { padding: 14px 16px 20px; }
.service-content h3 { font-size: 1.05rem; }
.service-content p { font-size: 0.92rem; line-height: 1.5; }
}
/* ===== Scroll animation (same) ===== */
[data-animate] {
opacity: 0;
transform: translateY(35px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].visible {
opacity: 1;
transform: translateY(0);
}
.services-grid [data-animate]:nth-child(1) { transition-delay: 0s; }
.services-grid [data-animate]:nth-child(2) { transition-delay: 0.1s; }
.services-grid [data-animate]:nth-child(3) { transition-delay: 0.2s; }
.services-grid [data-animate]:nth-child(4) { transition-delay: 0.3s; }
.services-grid [data-animate]:nth-child(5) { transition-delay: 0.4s; }
.services-grid [data-animate]:nth-child(6) { transition-delay: 0.5s; }
/* ===== FINAL FIXED CLINIC LOCATIONS SECTION ===== */
.clinic-locations {
background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
padding: 60px 5% 65px;
}
.clinic-locations .section-header {
margin-bottom: 25px;
}
.clinic-locations .header-bg {
background: none;
box-shadow: none;
padding: 0;
}
.clinic-locations .header-bg h2 {
font-size: 2.1rem;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 6px;
position: relative;
}
.clinic-locations .header-bg h2::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #f26f23;
border-radius: 3px;
margin: 10px auto 0;
}
.clinic-locations .header-bg p {
color: #555;
font-size: 1rem;
margin-top: 6px;
line-height: 1.5;
}
/* GRID */
.locations-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1150px;
margin: 0 auto;
justify-items: center;
}
/* Center last row with 2 cards */
.locations-grid::after {
content: "";
grid-column: span 3;
}
.locations-grid .location-card:nth-last-child(2):nth-child(odd),
.locations-grid .location-card:nth-last-child(1):nth-child(odd) {
grid-column: 2 / span 1;
}
/* CARD */
.location-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 100%;
max-width: 340px;
}
.location-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* IMAGE */
.location-image {
position: relative;
overflow: hidden;
height: 180px;
}
.location-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.location-image .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right, rgba(242, 111, 35, 0.25), rgba(0, 0, 0, 0.4));
opacity: 0;
transition: opacity 0.4s ease;
}
.location-card:hover .location-image img {
transform: scale(1.06);
}
.location-card:hover .overlay {
opacity: 1;
}
/* INFO */
.location-info {
padding: 16px 18px 20px;
text-align: left;
}
.location-info a {
text-decoration: none;
color: inherit;
}
.location-info h3 {
font-size: 1.05rem;
font-weight: 600;
color: #0a0a0a;
margin-bottom: 6px;
transition: color 0.3s ease;
}
.location-info h3:hover {
color: #f26f23;
}
.location-info p {
font-size: 0.9rem;
color: #555;
margin-bottom: 12px;
line-height: 1.5;
}
/* BUTTONS */
.location-actions {
display: flex;
align-items: center;
gap: 8px;
}
.call-btn,
.map-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.82rem;
padding: 7px 12px;
text-decoration: none;
white-space: nowrap;
color: #fff; /* default white text */
}
/* Button backgrounds */
.call-btn {
background: #f26f23;
}
.map-btn {
background: #0a0a0a;
}
/* SVG ICONS inside buttons */
.call-btn svg,
.map-btn svg {
width: 15px;
height: 15px;
transition: fill 0.3s ease;
fill: #fff; /* white icons by default */
}
/* Hover effects — invert colors */
.call-btn:hover {
background: #0a0a0a;
color: #fff;
}
.call-btn:hover svg {
fill: #fff;
}
.map-btn:hover {
background: #f26f23;
color: #fff;
}
.map-btn:hover svg {
fill: #fff;
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.locations-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 640px) {
.locations-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.location-card {
max-width: 100%;
}
.location-image {
height: 160px;
}
.call-btn, .map-btn {
flex: 1;
justify-content: center;
font-size: 0.85rem;
padding: 8px 10px;
}
}
/* FADE-IN ANIMATION */
[data-animate] {
opacity: 0;
transform: translateY(25px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].visible {
opacity: 1;
transform: translateY(0);
}
/* ===== FIX: Ensure call & map buttons are always white text ===== */
.call-btn,
.map-btn {
color: #fff !important; /* override any inherited link color */
text-decoration: none !important;
}
/* Force inner SVG icons to white by default */
.call-btn svg path,
.map-btn svg path {
fill: #fff !important;
transition: fill 0.3s ease;
}
/* Hover states — maintain white text, invert backgrounds */
.call-btn:hover {
background: #0a0a0a;
color: #fff !important;
}
.call-btn:hover svg path {
fill: #fff !important;
}
.map-btn:hover {
background: #f26f23;
color: #fff !important;
}
.map-btn:hover svg path {
fill: #fff !important;
}
/* === Always-visible label for Select Field === */
.form-group.static-label {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 18px;
}
.form-group.static-label label {
font-size: 0.9rem;
font-weight: 600;
color: #0a0a0a;
margin-bottom: 6px;
letter-spacing: 0.2px;
}
.form-group.static-label select {
width: 100%;
padding: 12px 36px 12px 10px;
background: #fafafa
url('data:image/svg+xml;utf8,')
no-repeat right 12px center/16px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 0.95rem;
color: #333;
outline: none;
transition: all 0.3s ease;
cursor: pointer;
appearance: none;
}
.form-group.static-label select:focus {
border-color: #f26f23;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(242,111,35,0.1);
}
/* ===== FIXED SELECT FIELD WITH STATIC LABEL (NO OVERLAP) ===== */
.form-group.select-static {
display: block;
margin-bottom: 18px;
}
.form-group.select-static label {
display: block;
margin-bottom: 6px;
font-size: 0.9rem;
font-weight: 600;
color: #0a0a0a;
}
.form-group.select-static select {
width: 100%;
padding: 12px 38px 12px 12px;
font-size: 0.95rem;
color: #333;
background-color: #fafafa;
border: 2px solid #ddd;
border-radius: 8px;
outline: none;
appearance: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group.select-static select:focus {
border-color: #f26f23;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(242,111,35,0.1);
}
.form-group.select-static select option {
color: #333;
padding: 6px 10px;
}
/* ---- Clean static label dropdown (no overlap, works in all browsers) ---- */
.form-row {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.form-row select {
width: 100%;
font-size: 0.95rem;
padding: 12px 40px 12px 12px;
border: 2px solid #ddd;
border-radius: 8px;
background-color: #fafafa;
color: #333;
outline: none;
appearance: none;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-row select:focus {
border-color: #f26f23;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(242,111,35,0.1);
}
/* === UI POLISH FOR BOOK YOUR APPOINTMENT SECTION === */
/* --- General form field hover / focus enhancements --- */
.appointment-form input:hover,
.appointment-form textarea:hover,
.appointment-form select:hover {
border-color: #f26f23;
background-color: #fff;
transition: all 0.25s ease;
}
.appointment-form input:focus,
.appointment-form textarea:focus,
.appointment-form select:focus {
box-shadow: 0 0 0 4px rgba(242, 111, 35, 0.15);
border-color: #f26f23;
background-color: #fff;
}
/* --- Subtle animated placeholder color (fallback) --- */
.appointment-form input::placeholder,
.appointment-form textarea::placeholder {
color: #aaa;
transition: color 0.3s ease;
}
.appointment-form input:focus::placeholder,
.appointment-form textarea:focus::placeholder {
color: #ccc;
}
/* --- Button improvements --- */
.submit-btn {
background: linear-gradient(135deg, #f26f23, #ff8c3a);
color: #fff;
border: none;
padding: 14px;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(242,111,35,0.3);
transform: translateY(0);
}
.submit-btn:hover {
background: linear-gradient(135deg, #0a0a0a, #222);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-3px);
}
.submit-btn:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* --- Compact layout tweaks for better spacing --- */
.appointment-form {
padding: 30px 28px;
border-radius: 14px;
}
.form-group,
.form-row {
margin-bottom: 15px;
}
.appointment-text h2 {
margin-bottom: 8px;
}
.appointment-intro {
margin-bottom: 18px;
}
.benefits li {
margin-bottom: 8px;
}
/* --- Responsive polish --- */
@media (max-width: 768px) {
.appointment-form {
padding: 25px 20px;
}
.submit-btn {
padding: 12px;
font-size: 0.95rem;
}
}
/* ===== FIX: Prevent "Health Condition" label from floating to top ===== */
.form-row label {
position: static !important;
display: block;
margin-bottom: 6px;
font-size: 0.9rem;
font-weight: 400;
color: #0a0a0a;
background: none !important;
transform: none !important;
top: auto !important;
left: auto !important;
}
/* ===== WHY CHOOSE YOS — Modern Orange Glow Design ===== */
.why-choose {
background: linear-gradient(180deg, #fff 0%, #fff7f2 40%, #fff 100%);
padding: 90px 5%;
position: relative;
overflow: hidden;
}
/* Subtle orange gradient glow around the section */
.why-choose::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 95%;
height: 100%;
background: radial-gradient(
circle at center,
rgba(242, 111, 35, 0.12) 0%,
rgba(242, 111, 35, 0.08) 30%,
transparent 80%
);
border-radius: 30px;
box-shadow: 0 8px 40px rgba(242, 111, 35, 0.12);
z-index: 0;
}
.why-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
max-width: 1200px;
margin: auto;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
/* ===== LEFT SIDE ===== */
.why-content {
flex: 1;
min-width: 320px;
}
.why-content h2 {
font-size: 2.1rem;
color: #0a0a0a;
font-weight: 700;
margin-bottom: 35px;
line-height: 1.3;
border-left: 6px solid #f26f23;
padding-left: 15px;
}
.why-content h2 span {
color: #f26f23;
}
.why-points {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ===== Each Card ===== */
.why-card {
display: flex;
align-items: flex-start;
gap: 15px;
background: #ffffff;
border-left: 4px solid #f26f23;
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 8px 18px rgba(242, 111, 35, 0.08);
transition: all 0.3s ease;
}
.why-card:hover {
background: linear-gradient(90deg, rgba(242,111,35,0.08) 0%, #fff 100%);
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.icon-circle {
background: #f26f23;
color: #fff;
font-size: 1.2rem;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(242,111,35,0.25);
}
.why-card h4 {
margin: 0;
font-size: 1rem;
color: #0a0a0a;
font-weight: 600;
margin-bottom: 4px;
}
.why-card p {
color: #555;
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* ===== RIGHT IMAGE ===== */
.why-image {
flex: 1;
min-width: 340px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.why-image img {
width: 100%;
max-width: 500px;
border-radius: 0 25px 25px 0;
object-fit: cover;
border: 5px solid #fff;
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
position: relative;
z-index: 2;
}
.why-image::before {
content: "";
position: absolute;
inset: -10px;
background: radial-gradient(circle at bottom right, rgba(242,111,35,0.25) 0%, transparent 70%);
border-radius: 0 30px 30px 0;
z-index: 1;
}
/* ===== Responsive Design ===== */
@media (max-width: 992px) {
.why-container {
flex-direction: column-reverse;
text-align: center;
}
.why-content h2 {
font-size: 1.9rem;
text-align: left;
border-left: 5px solid #f26f23;
padding-left: 12px;
}
.why-image img {
border-radius: 18px;
max-width: 480px;
margin-bottom: 40px;
}
.why-image::before {
display: none;
}
.why-card {
padding: 15px 18px;
}
}
@media (max-width: 600px) {
.why-content h2 {
font-size: 1.6rem;
}
.why-card h4 {
font-size: 0.95rem;
}
.why-card p {
font-size: 0.85rem;
}
.icon-circle {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/* ===== CALL TO ACTION SECTION ===== */
.cta-section {
position: relative;
width: 100%;
background: linear-gradient(135deg, #f26f23 0%, #ff914d 50%, #f26f23 100%);
color: #fff;
text-align: center;
padding: 100px 5%;
overflow: hidden;
border-radius: 0;
}
/* Background overlay image (transparent physiotherapy background) */
.cta-overlay {
position: absolute;
inset: 0;
background: url('https://www.yos.health/images/bg3.jpg') center/cover no-repeat;
opacity: 0.12;
z-index: 1;
}
.cta-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
color: #fff;
line-height: 1.3;
}
.cta-content h2 span {
color: #fff;
text-decoration: underline solid rgba(255,255,255,0.3) 4px;
text-underline-offset: 8px;
}
.cta-content p {
font-size: 1.05rem;
max-width: 650px;
margin: 0 auto 40px;
color: rgba(255,255,255,0.9);
line-height: 1.6;
}
/* Buttons */
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-btn {
display: inline-block;
padding: 14px 28px;
font-size: 1rem;
font-weight: 600;
border-radius: 40px;
transition: all 0.3s ease;
text-decoration: none;
cursor: pointer;
}
.cta-btn.black {
background: #0a0a0a;
color: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.cta-btn.black:hover {
background: #fff;
color: #0a0a0a;
}
.cta-btn.outline {
border: 2px solid #fff;
color: #fff;
background: transparent;
}
.cta-btn.outline:hover {
background: #fff;
color: #f26f23;
box-shadow: 0 4px 12px rgba(255,255,255,0.4);
}
/* Subtle glowing animation behind the section */
.cta-section::after {
content: "";
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 140%;
height: 250px;
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 80%);
z-index: 0;
animation: glowmove 6s infinite alternate ease-in-out;
}
@keyframes glowmove {
from { opacity: 0.4; transform: translateX(-50%) scale(1); }
to { opacity: 0.8; transform: translateX(-50%) scale(1.05); }
}
/* Responsive */
@media (max-width: 992px) {
.cta-content h2 {
font-size: 2rem;
}
.cta-content p {
font-size: 0.95rem;
}
.cta-btn {
padding: 12px 24px;
}
}
@media (max-width: 600px) {
.cta-content h2 {
font-size: 1.6rem;
}
}
/* ===== Floating WhatsApp Button ===== */
.whatsapp-float {
position: fixed;
bottom: 25px;
right: 25px;
background: #25d366; /* WhatsApp green */
color: #fff;
font-size: 1.7rem;
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
text-decoration: none;
z-index: 9999;
transition: all 0.3s ease;
}
.whatsapp-float:hover {
transform: translateY(-4px) scale(1.05);
background: #20ba5a;
box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}
/* Optional: small orange ring glow to match YOS brand */
.whatsapp-float::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(242,111,35,0.6);
opacity: 0;
transition: opacity 0.4s ease;
}
.whatsapp-float:hover::before {
opacity: 1;
}
/* Responsive tweaks */
@media (max-width: 768px) {
.whatsapp-float {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
font-size: 1.5rem;
}
}
----------------------------------
/* =========================
ABOUT PAGE – EXTRA STYLES
========================= */
/* Wrapper to offset the fixed header */
.about-main {
margin-top: 90px;
}
/* --- Page Hero --- */
.page-hero-about {
padding: 110px 5% 70px;
background: linear-gradient(135deg, #fff7f2 0%, #ffffff 40%, #fef5ef 100%);
position: relative;
overflow: hidden;
}
.page-hero-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
flex-wrap: wrap;
}
.page-hero-text {
flex: 1.2;
min-width: 300px;
}
.page-hero-media {
flex: 1;
min-width: 320px;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.08);
background: #ddd;
}
.page-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.eyebrow {
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: #f26f23;
margin-bottom: 8px;
}
.page-hero-text h1 {
font-size: 2.4rem;
line-height: 1.2;
margin: 0 0 12px;
color: #0a0a0a;
}
.hero-sub {
font-size: 1.02rem;
color: #555;
max-width: 520px;
line-height: 1.7;
margin-bottom: 20px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.hero-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.82rem;
background: #fff;
border: 1px solid rgba(242,111,35,0.2);
color: #444;
}
.hero-chip i {
color: #f26f23;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.link-plain {
font-size: 0.95rem;
font-weight: 500;
color: #0a0a0a;
text-decoration: none;
}
.link-plain:hover {
color: #f26f23;
}
/* Breadcrumb */
.breadcrumb {
margin: 20px auto 0 auto;
font-size: 0.95rem;
color: #666;
}
.breadcrumb a {
color: #ff6b2c;
text-decoration: none;
}
.breadcrumb span {
margin: 0 6px;
}
/* --- Slight variation of your about-section --- */
.about-section--alt {
padding-top: 70px;
}
/* --- Approach panel on right (inside why-choose) --- */
.philosophy-section {
padding-top: 80px;
}
.approach-card {
flex: 0.9;
min-width: 320px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(0,0,0,0.06);
padding: 24px 22px;
}
.approach-card h3 {
font-size: 1.2rem;
margin: 0 0 16px;
font-weight: 600;
color: #0a0a0a;
border-left: 4px solid #f26f23;
padding-left: 10px;
}
.approach-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.approach-list li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.step-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: #fef2ea;
border: 1px solid #f26f23;
color: #f26f23;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
}
.approach-list strong {
font-size: 0.97rem;
color: #0a0a0a;
}
.approach-list p {
margin: 2px 0 0;
font-size: 0.9rem;
color: #555;
line-height: 1.6;
}
/* --- Founders --- */
.founders-section {
background: #ffffff;
padding: 90px 5% 80px;
}
.founders-header {
text-align: center;
max-width: 740px;
margin: 0 auto 50px;
}
.founders-header h2 {
font-size: 2.2rem;
margin-bottom: 8px;
}
.founders-header p {
font-size: 1rem;
color: #555;
line-height: 1.6;
}
.founders-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.founder-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
overflow: hidden;
display: flex;
flex-direction: column;
}
.founder-image {
width: 100%;
height: 260px;
overflow: hidden;
}
.founder-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.founder-card:hover .founder-image img {
transform: scale(1.06);
}
.founder-body {
padding: 18px 20px 22px;
}
.founder-body h3 {
margin: 0 0 4px;
font-size: 1.2rem;
color: #0a0a0a;
}
.founder-role {
margin: 0 0 10px;
font-size: 0.9rem;
font-weight: 600;
color: #f26f23;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.founder-body p {
font-size: 0.9rem;
color: #555;
line-height: 1.7;
}
/* --- Impact Section --- */
.impact-section {
padding: 80px 5%;
background: linear-gradient(180deg, #fff7f2 0%, #ffffff 70%);
}
.impact-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.impact-header h2 {
font-size: 2.1rem;
margin-bottom: 8px;
}
.impact-header p {
max-width: 720px;
margin: 0 auto 32px;
font-size: 1rem;
color: #555;
line-height: 1.7;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 22px;
}
.impact-card {
background: #fff;
border-radius: 14px;
padding: 18px 16px;
box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}
.impact-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: #f26f23;
margin-bottom: 6px;
}
.impact-label {
margin: 0;
font-size: 0.9rem;
color: #444;
line-height: 1.4;
}
/* --- Responsiveness --- */
@media (max-width: 992px) {
.page-hero-inner {
flex-direction: column;
}
.page-hero-text h1 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.about-main {
margin-top: 80px;
}
.page-hero-about {
padding: 90px 5% 50px;
}
.founders-section {
padding: 70px 5% 60px;
}
.impact-section {
padding: 60px 5%;
}
}
@media (max-width: 600px) {
.page-hero-text h1 {
font-size: 1.8rem;
}
.hero-sub {
font-size: 0.95rem;
}
}
/* Two button layout */
.hero-actions.two-btn {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 18px;
}
.btn-primary,
.btn-secondary {
padding: 12px 22px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
}
.btn-primary {
background: #f26f23;
color: #fff;
box-shadow: 0 4px 12px rgba(242,111,35,0.3);
}
.btn-primary:hover {
background: #0a0a0a;
color: #fff;
}
.btn-secondary {
background: #0a0a0a;
color: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.btn-secondary:hover {
background: #f26f23;
color: #fff;
}
/* Ensure buttons stay in one row on large screens */
@media (max-width: 480px) {
.hero-actions.two-btn {
flex-direction: column;
width: 100%;
}
}
/* Global breadcrumb below header */
.global-breadcrumb {
position: relative; /* stays in document flow, below header visually */
z-index: var(--breadcrumb-z); /* dynamic z-index (set via JS below) */
background: #fff;
padding: 12px 5%;
font-size: 0.88rem;
color: #777;
border-bottom: 1px solid #eee;
display: flex;
gap: 8px;
align-items: center;
margin-top: var(--global-header-offset); /* offset equals header height */
}
/* small responsive tweaks */
@media (max-width: 768px) {
.global-breadcrumb { font-size: 0.86rem; padding: 10px 4%; }
}
@media (max-width: 480px) {
.global-breadcrumb { padding: 8px 4%; }
}
.global-breadcrumb a {
color: #555;
text-decoration: none;
font-weight: 500;
}
.global-breadcrumb a:hover {
color: #f26f23;
}
.global-breadcrumb span {
margin: 0 6px;
}
/* Sidebar slimming */
.service-content { grid-template-columns: 1fr 300px; gap:28px; padding:0 4%; }
aside.service-card { padding:14px; max-width:300px; box-sizing:border-box; }
/* Breadcrumb top spacing */
.global-breadcrumb { margin-top: var(--global-header-offset); z-index: var(--breadcrumb-z); }
/* Button tweaks */
.hero-actions.two-btn { gap:12px; }
/* Fallback: show animated elements by default if JS hasn't toggled .visible */
[data-animate] {
opacity: 1 !important;
transform: none !important;
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Dropdown Container */
.nav-menu ul li.has-submenu {
position: relative;
}
/* Dropdown Menu */
.nav-menu ul li .submenu {
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
border-radius: 8px;
min-width: 260px;
padding: 10px 0;
display: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 999;
}
/* Dropdown Items */
.nav-menu ul li .submenu li {
width: 100%;
}
.nav-menu ul li .submenu li a {
padding: 10px 18px;
display: block;
color: #222;
font-size: 0.85rem;
white-space: normal;
line-height: 1.4;
}
.nav-menu ul li .submenu li a:hover {
background: #f8f8f8;
color: #f26f23;
}
/* Hover to open dropdown (Desktop) */
.nav-menu ul li.has-submenu:hover > .submenu {
display: block;
}
/* Mobile version: show under the main menu */
.mobile-menu .submenu {
display: none;
background: #fff;
padding-left: 15px;
}
.mobile-menu .submenu li a {
padding: 8px 0;
font-size: 1rem;
}
.mobile-menu .has-submenu > a::after {
content: " ▾";
font-size: 0.8rem;
}
/* Expand submenu on mobile when parent is tapped */
.mobile-menu .has-submenu.open .submenu {
display: block;
}
/* MOBILE: mobile drawer submenu styles */
.mobile-menu {
display: none; /* desktop default; toggled to block by JS */
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0;
background: #fff;
padding: 18px 16px;
overflow-y: auto;
z-index: 1500;
box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
/* show mobile menu when not hidden (JS toggles hidden attribute) */
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: block; }
/* simple list styling */
.mobile-menu > a,
.mobile-menu .has-submenu > a.submenu-toggle {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 10px;
color: #0a0a0a;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
}
.mobile-menu > a.mobile-cta {
display: block;
background: #f26f23;
color: #fff;
text-align: center;
padding: 12px;
border-radius: 8px;
margin-top: 8px;
}
/* Services submenu */
.mobile-menu .has-submenu { margin-bottom: 6px; }
.mobile-menu .submenu {
margin: 8px 0 14px 6px;
padding-left: 8px;
list-style: none;
border-left: 2px solid rgba(242,111,35,0.06);
}
.mobile-menu .submenu li a {
display:block;
padding:10px 8px;
font-weight:500;
color:#333;
text-decoration:none;
border-radius:6px;
}
.mobile-menu .submenu li a:hover { background:#faf6f2; color: #f26f23; }
/* caret rotate */
.submenu-caret {
transition: transform .25s ease;
font-size: 0.9rem;
color: #777;
margin-left: 8px;
}
.has-submenu[aria-open="true"] .submenu-caret {
transform: rotate(90deg);
}
/* small responsive tweak: ensure the drawer fits below header */
@media (max-width: 992px) {
.mobile-menu { top: 70px; padding-bottom: 40px; }
}
/* ==========================
YOS ONLINE — Page Enhancements
Paste this at the end of styles.css
========================== */
/* Page wrapper offset (ensure below fixed header) */
.yos-online { margin-top: 100px; padding-bottom: 60px; }
/* Hero adjustments for YOS ONLINE */
.yos-online .page-hero {
padding: 90px 5% 50px;
background: linear-gradient(135deg, #fff7f2 0%, #ffffff 45%);
border-bottom: 1px solid #f4f4f4;
}
.yos-online .page-hero .page-hero-inner { max-width:1200px; margin:auto; gap:40px; align-items:center; }
.yos-online .page-hero-text h1 { font-size: 2.2rem; line-height:1.15; margin-bottom:12px; }
.yos-online .page-hero .hero-sub { max-width:600px; color:#444; }
/* Hero benefits badges */
.yos-online .hero-benefits { display:flex; gap:14px; margin:18px 0 22px; flex-wrap:wrap; list-style:none; padding:0; }
.yos-online .hero-benefits li { display:inline-flex; gap:10px; align-items:center; background:#fff; border:1px solid rgba(242,111,35,0.12); padding:8px 12px; border-radius: 999px; font-weight:600; color:#333; font-size:0.95rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.yos-online .hero-benefits li i { color:#f26f23; font-size:0.95rem; }
/* MEDIA: shrink hero media on small screens */
@media (max-width: 992px) {
.yos-online .page-hero .page-hero-media { order: -1; width:100%; max-height:260px; overflow:hidden; border-radius:12px; }
.yos-online .page-hero .page-hero-media img { height:260px; object-fit:cover; width:100%; display:block; }
}
/* ===== Question Card (Yes / No) ===== */
.question-card {
max-width: 920px;
margin: 28px auto;
background: #fff;
border-radius: 12px;
padding: 26px;
box-shadow: 0 10px 30px rgba(15,15,15,0.04);
border: 1px solid #f3f3f3;
}
.question-card h3 { margin: 0 0 14px; font-size: 1.15rem; color: #0a0a0a; }
.question-card .muted { color: #666; margin-top:14px; font-size:0.95rem; }
/* Buttons: large primary/outline */
.button-row { display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding: 12px 26px;
border-radius: 10px;
font-weight:700;
font-size:1rem;
text-decoration:none;
transition: transform .18s ease, box-shadow .18s ease;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.btn.large { padding:14px 30px; font-size:1.05rem; }
/* Primary */
.btn.large { background: linear-gradient(135deg,#f26f23,#ff8c3a); color:#fff; border: none; }
.btn.large:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(242,111,35,0.18); }
/* Outline version */
.btn.outline.large {
background: transparent;
border: 2px solid #f26f23;
color: #f26f23;
}
.btn.outline.large:hover {
background: #f26f23; color:#fff; transform:translateY(-3px);
}
/* Small screens: full-width stacked buttons */
@media (max-width:640px) {
.button-row { flex-direction: column; }
.btn { width:100%; }
}
/* Accessible keyboard focus */
.btn:focus,
a:focus,
button:focus {
outline: 3px solid rgba(242,111,35,0.16);
box-shadow: 0 6px 20px rgba(242,111,35,0.12);
outline-offset: 2px;
}
/* ===== How it works / Steps List ===== */
.steps-list { list-style: none; padding: 0; margin: 12px 0 0; display:grid; gap:14px; }
.steps-list li { background:#fff; padding:14px 16px; border-radius:10px; border:1px solid #f3f3f3; box-shadow: 0 8px 22px rgba(10,10,10,0.03); font-size:0.98rem; line-height:1.6; }
/* Two-column content used on expectations */
.two-col { display:flex; gap:36px; align-items:flex-start; margin-top:16px; }
.two-col > div { flex:1; min-width:240px; }
@media (max-width:900px) { .two-col { flex-direction:column; } }
/* ===== FAQ styling (details/summary) ===== */
.faq details { background:#fff; border:1px solid #f3f3f3; border-radius:10px; padding:12px 16px; margin-bottom:10px; box-shadow:0 8px 20px rgba(0,0,0,0.03); }
.faq summary { cursor:pointer; font-weight:600; list-style:none; outline:none; font-size:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq details[open] { border-color: rgba(242,111,35,0.18); box-shadow: 0 12px 30px rgba(242,111,35,0.06); }
.faq p { margin:10px 0 0; color:#555; }
/* Add a small chevron on summary */
.faq summary::after {
content: "▾";
float: right;
transition: transform .25s ease;
color:#777;
}
.faq details[open] summary::after { transform: rotate(-180deg); }
/* ===== Trust list (icons + text) ===== */
.trust-list { list-style:none; padding:0; margin: 12px 0 0; display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.trust-list li { display:flex; gap:10px; align-items:center; min-width:220px; background:#fff; border-radius:10px; padding:10px 12px; border:1px solid #f3f3f3; box-shadow:0 8px 20px rgba(0,0,0,0.03); }
.trust-list li i { font-size:1.15rem; color:#f26f23; }
/* ===== Secondary CTA (centered) ===== */
.section.cta { text-align:center; padding:28px 5% 40px; }
.section.cta .button-row { justify-content:center; margin-top:18px; }
/* ===== Map embed container ===== */
.map-embed { margin-top:18px; border-radius:12px; overflow:hidden; border:1px solid #eee; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.map-embed iframe { display:block; width:100%; height:420px; border:0; }
/* Make the iframe responsive on small screens */
@media (max-width:640px) { .map-embed iframe { height:300px; } }
/* ===== Small utility tweaks ===== */
.container { max-width:1200px; }
.lead { color:#555; font-size:1rem; margin-bottom:18px; }
/* Slight typographic polish */
h2 { letter-spacing: -0.3px; }
h3 { color:#0a0a0a; font-weight:700; }
p { color:#4e4e4e; line-height:1.65; }
/* ===== Reduce visual noise by softening borders in this page ===== */
.yos-online .section, .yos-online .container, .yos-online .question-card,
.yos-online .steps-list li, .yos-online .faq details, .yos-online .trust-list li {
border-color: #f3f3f3;
}
/* ===== Print-friendly adjustments ===== */
@media print {
.page-hero-media, .map-embed, .whatsapp-float, .phone-btn { display:none !important; }
body { color:#000; }
}
/* ===== Small animation for CTA entry ===== */
.yos-online .cta-btn, .yos-online .btn { transform: translateY(0); transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease; }
/* ===== Override heavy shadows on very small screens ===== */
@media (max-width:420px) {
.question-card, .steps-list li, .faq details, .trust-list li { box-shadow: 0 6px 14px rgba(0,0,0,0.04); padding:12px; }
}
/* ===== Make the pain-question section more prominent & centered =====
Paste this at the end of styles.css
Targets only the YOS ONLINE question card to avoid global changes. */
.yos-online .question-card {
max-width: 820px; /* narrower, more focused card */
margin: 38px auto; /* centered on page */
padding: 34px; /* larger breathing room */
border-radius: 14px;
text-align: center; /* center all inline text */
display: flex;
flex-direction: column;
align-items: center; /* center children (heading, buttons) */
gap: 16px;
background: linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
border: 1px solid rgba(242,111,35,0.08);
box-shadow: 0 18px 50px rgba(10,10,10,0.06); /* stronger shadow for prominence */
transform-origin: center center;
transition: transform 240ms cubic-bezier(.2,.9,.3,1), box-shadow 240ms ease;
}
/* small scale up on hover/focus for attention (desktop) */
.yos-online .question-card:hover,
.yos-online .question-card:focus-within {
transform: translateY(-6px);
box-shadow: 0 28px 80px rgba(10,10,10,0.09);
}
/* decorative accent bar above the heading */
.yos-online .question-card::before {
content: "";
width: 72px;
height: 6px;
border-radius: 6px;
background: linear-gradient(90deg, #f26f23 0%, #ff8c3a 100%);
display: block;
margin-bottom: 6px;
box-shadow: 0 6px 18px rgba(242,111,35,0.12);
}
/* Heading: larger, bolder and centered */
.yos-online .question-card h3 {
font-size: 1.35rem; /* bigger title */
line-height: 1.2;
margin: 6px 0 10px;
color: #0a0a0a;
font-weight: 700;
letter-spacing: -0.2px;
}
/* Subtext small and centered */
.yos-online .question-card .muted {
font-size: 0.96rem;
color: #666;
max-width: 720px;
margin-top: 6px;
}
/* Buttons: center aligned and visually stronger */
.yos-online .question-card .button-row {
display:flex;
gap:14px;
justify-content:center; /* center the buttons horizontally */
align-items:center;
margin-top: 8px;
flex-wrap:wrap;
}
/* Make primary button slightly larger and give subtle glow */
.yos-online .btn.large {
padding: 14px 34px;
font-size: 1.06rem;
border-radius: 12px;
font-weight: 800;
letter-spacing: 0.2px;
box-shadow: 0 10px 26px rgba(242,111,35,0.12);
}
/* Outline variant - invert on hover */
.yos-online .btn.outline.large {
background: transparent;
border: 2px solid rgba(242,111,35,0.9);
color: #f26f23;
}
.yos-online .btn.outline.large:hover {
background: linear-gradient(135deg,#f26f23,#ff8c3a);
color: #fff;
transform: translateY(-3px);
}
/* Small pulsing micro-animation on primary to draw attention (subtle) */
@keyframes yosPulse {
0% { box-shadow: 0 8px 20px rgba(242,111,35,0.10); transform: translateY(0); }
50% { box-shadow: 0 16px 40px rgba(242,111,35,0.14); transform: translateY(-2px); }
100% { box-shadow: 0 8px 20px rgba(242,111,35,0.10); transform: translateY(0); }
}
.yos-online .btn.large:first-child {
animation: yosPulse 4.5s ease-in-out infinite;
animation-delay: 1s;
}
/* Mobile: stack and full-width buttons for easy tapping */
@media (max-width: 640px) {
.yos-online .question-card {
padding: 20px;
margin: 22px 16px;
border-radius: 12px;
}
.yos-online .question-card h3 { font-size: 1.18rem; }
.yos-online .button-row { flex-direction: column; gap:12px; width:100%; }
.yos-online .btn { width:100%; box-sizing: border-box; }
.yos-online .muted { font-size: 0.92rem; }
}
/* Accessibility: stronger focus ring for keyboard users */
.yos-online .btn:focus {
outline: 3px solid rgba(242,111,35,0.18);
outline-offset: 3px;
box-shadow: 0 12px 36px rgba(242,111,35,0.12);
}
/* ===== ORANGE BACKGROUND FOR YOS ONLINE QUESTION SECTION ===== */
.yos-online .question-section {
background: linear-gradient(135deg, #fef3eb 0%, #ffe5d3 40%, #ffd2b5 100%);
padding: 70px 5%;
text-align: center;
border-radius: 0; /* full width, clean section */
position: relative;
overflow: hidden;
}
/* Subtle glowing orange highlight behind content */
.yos-online .question-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(242, 111, 35, 0.22) 0%,
rgba(242, 111, 35, 0.12) 35%,
transparent 80%
);
z-index: 0;
}
/* Ensure the card sits above glow */
.yos-online .question-card {
position: relative;
z-index: 2;
}
/* Mobile padding adjustments */
@media (max-width: 640px) {
.yos-online .question-section {
padding: 45px 4%;
}
}
/* ===== ORANGE QUESTION CARD — YOS ONLINE ===== */
.yos-online .question-card {
background: linear-gradient(135deg, #f26f23 0%, #ff8a4c 100%);
color: #fff;
border-radius: 16px;
padding: 38px 34px;
text-align: center;
box-shadow: 0 14px 40px rgba(242, 111, 35, 0.28);
border: none;
}
/* Accent bar above heading becomes white */
.yos-online .question-card::before {
background: #fff;
box-shadow: 0 6px 18px rgba(255,255,255,0.35);
}
/* Heading inside card */
.yos-online .question-card h3 {
color: #fff;
}
/* Subtext */
.yos-online .question-card .muted {
color: rgba(255,255,255,0.9);
}
/* Buttons inside orange card — white primary + outline */
.yos-online .question-card .btn.large {
background: #0e0e0e;
color: #fff;
box-shadow: 0 6px 18px rgba(242, 111, 35, 0.3);
border: none;
}
.yos-online .question-card .btn.large:hover {
background: #0a0a0a;
color: #fff;
}
/* Pulse only on primary button (first child) */
.yos-online .question-card .btn.large:first-child {
animation: yosPulseWhite 4s ease-in-out infinite;
}
@keyframes yosPulseWhite {
0% { box-shadow: 0 6px 20px rgba(255,255,255,0.25); }
50% { box-shadow: 0 14px 40px rgba(255,255,255,0.45); }
100% { box-shadow: 0 6px 20px rgba(255,255,255,0.25); }
}
/* Mobile tweaks */
@media (max-width: 640px) {
.yos-online .question-card {
padding: 26px 20px;
}
.yos-online .question-card h3 {
font-size: 1.22rem;
}
}
/* ===== REVERT BUTTON STYLES INSIDE THE ORANGE QUESTION CARD ===== */
/* Primary button (YES / first button) */
.yos-online .question-card .btn.large {
background: #0e0e0e; /* original brand orange */
color: #fff;
box-shadow: 0 6px 18px rgba(242,111,35,0.3);
border: none;
}
.yos-online .question-card .btn.large:hover {
background: #0a0a0a; /* original hover = black */
color: #fff;
transform: translateY(-2px);
}
/* Outline / secondary button (NO / second button) */
.yos-online .question-card .btn.outline.large {
background: transparent;
border: 2px solid #f26f23;
color: #2a0f00;
}
.yos-online .question-card .btn.outline.large:hover {
background: #f26f23;
color: #fff;
transform: translateY(-2px);
}
/* Remove the white pulsing animation (restore original) */
.yos-online .question-card .btn.large:first-child {
animation: none !important;
box-shadow: 0 6px 18px rgba(242,111,35,0.3);
}
/* BLOG PAGE */
.blog-hero {
padding: 100px 0 40px;
background: #fafafa;
text-align: center;
}
.blog-hero h1 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 10px;
}
.blog-meta {
color: #666;
font-size: 0.95rem;
margin-bottom: 20px;
}
.blog-hero-img {
width: 100%;
border-radius: 14px;
margin-top: 25px;
}
.blog-content {
max-width: 850px;
margin: auto;
padding: 40px 20px;
line-height: 1.7;
font-size: 1.05rem;
}
.blog-content h2 {
margin-top: 40px;
font-size: 1.7rem;
}
.blog-content h3 {
margin-top: 25px;
color: #ff6b2c;
}
.blog-img {
width: 100%;
border-radius: 12px;
margin: 20px 0;
}
/* CTA Box */
.blog-cta-box {
background: #ff6b2c;
padding: 25px;
text-align: center;
border-radius: 14px;
margin-top: 50px;
color: #fff;
}
.blog-cta-box h3 {
color: #fff !important;
margin-bottom: 10px;
}
.blog-cta-box .btn-primary {
background: white;
color: #ff6b2c;
padding: 12px 28px;
margin-top: 15px;
display: inline-block;
border-radius: 8px;
font-weight: 600;
}
.blog-cta-box .btn-primary:hover {
background: #fff3eb;
}
/* Ensure mobile drawer sits on top of everything */
#mobile-menu,
.mobile-menu {
position: fixed; /* already fixed in your file, but keep it explicit */
z-index: 120000 !important;/* very high to beat transformed/stacked content */
top: 70px; /* keep below header if header is fixed at top */
left: 0;
right: 0;
}
/* Keep header above slider too (if needed) */
.header {
z-index: 120001; /* header above menu so the menu appears to slide from under it if you prefer */
}
/* Force slides to sit behind the header/menu */
.slider,
.slides,
.slide {
z-index: 0 !important;
/* note: .slide uses transforms for animation which creates a stacking context —
the high z-index on the mobile menu above resolves that reliably */
}
/* If your slide-overlay needs to remain visible on top of slide images, give it a small z-index,
but still lower than the mobile menu */
.slide-overlay {
z-index: 1;
position: relative; /* keep its stacking context controlled */
}
/* Semi-transparent background for mobile menu */
#mobile-menu,
.mobile-menu {
background: rgba(0, 0, 0, 0.55); /* dark blurred tint */
backdrop-filter: blur(6px); /* soft blur behind */
-webkit-backdrop-filter: blur(6px);
}
/* Keep text fully visible */
#mobile-menu a,
.mobile-menu a {
color: #ffffff !important;
font-weight: 500;
}
/* Mobile submenu background fix */
#mobile-menu .submenu,
.mobile-menu .submenu {
background: transparent !important; /* remove white background */
padding-left: 1.25rem; /* indent nicely */
}
/* Submenu links must be visible */
#mobile-menu .submenu a,
.mobile-menu .submenu a {
color: #ffffff !important; /* keep text white */
font-weight: 400;
padding: 10px 0;
display: block;
}
#mobile-menu .submenu a {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* Remove the duplicate arrow from CSS */
.mobile-menu .has-submenu > a::after {
display: none !important;
}
.submenu-caret {
transition: transform 0.25s ease;
}
.has-submenu.open .submenu-caret {
transform: rotate(90deg);
}
/* Show phone button only on mobile */
.mobile-call-btn {
display: none;
}
@media (max-width: 768px) {
.mobile-call-btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: 12px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #ff6a00; /* Use your brand orange */
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.mobile-call-btn img,
.mobile-call-btn svg {
width: 22px;
height: 22px;
filter: brightness(0) invert(1); /* ensure white icon */
}
}
/* ===== Contact form — 2-column grid & right card styling ===== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* two equal columns */
gap: 48px;
align-items: stretch; /* equal height columns */
}
/* Right info card */
.contact-info-right {
background: linear-gradient(180deg, #fff7f2 0%, #fffaf6 60%);
border: 1px solid rgba(242,111,35,0.08);
padding: 28px;
border-radius: 12px;
box-shadow: 0 10px 28px rgba(10,10,10,0.04);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Make sure form stretches and inputs are full width */
.contact-grid .appointment-form {
padding: 0; /* we wrap card differently; outer appointment-form keeps card look */
}
.contact-grid form { display:flex; flex-direction:column; gap:14px; }
.contact-grid .form-row input,
.contact-grid .form-row textarea {
width: 100%;
box-sizing: border-box;
}
/* Buttons row spacing inside right column */
.contact-info-right .contact-buttons { margin-top: 18px; display:flex; gap:12px; flex-wrap:wrap; }
/* Keep two columns until 768px, then stack */
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.contact-info-right {
padding: 20px;
}
}
/* ===== FIX: Contact 2-column full-width & centering ===== */
/* Make box-sizing consistent so widths calculate properly */
*, *::before, *::after { box-sizing: border-box; }
/* Outer wrapper - makes the card centered and full-width up to 1200px */
.contact-wrapper {
width: 100%;
max-width: 1200px; /* change as needed */
margin: 32px auto; /* center on page */
padding: 0 20px; /* keep small page gutters */
}
/* Appointment card - visual card that holds the grid */
.contact-card {
background: #fff;
border-radius: 14px;
padding: 30px;
box-shadow: 0 10px 28px rgba(10,10,10,0.04);
border: 1px solid rgba(0,0,0,0.03);
display: block;
width: 100%;
}
/* The grid that ensures two equal columns that fill the card */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* equal columns */
gap: 40px;
align-items: start;
width: 100%;
}
/* Ensure the form takes the full grid cell */
.contact-grid form { width: 100%; display:flex; flex-direction:column; gap:14px; }
/* Inputs / textarea full width */
.contact-grid .form-row input,
.contact-grid .form-row textarea {
width: 100%;
box-sizing: border-box;
}
/* Right info card */
.contact-info-right {
background: linear-gradient(180deg, #fff7f2 0%, #fffaf6 60%);
border: 1px solid rgba(242,111,35,0.08);
padding: 24px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(10,10,10,0.03);
display:flex;
flex-direction:column;
justify-content:flex-start;
}
/* Buttons container */
.contact-info-right .contact-buttons { margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
/* Make sure the 'Send Message' button doesn't overflow */
.contact-grid .submit-btn { min-width: 140px; }
/* Responsive: keep side-by-side until 768px then stack */
@media (max-width: 768px) {
.contact-grid { grid-template-columns: 1fr; gap:22px; }
.contact-wrapper { padding: 0 12px; }
.contact-info-right { padding: 18px; }
}
/* ===== Responsive fixes for locations & CTA (mobile-friendly) ===== */
/* Ensure consistent sizing model */
*, *::before, *::after { box-sizing: border-box; }
/* Locations grid: nicer breakpoints for tablet & phone */
@media (max-width: 992px) {
.locations-grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
gap: 18px;
padding: 0 12px;
}
.location-card { max-width: 100%; }
.location-image { height: 160px; }
}
@media (max-width: 640px) {
.locations-grid {
grid-template-columns: 1fr; /* 1 column on phones */
gap: 16px;
padding: 0 12px;
}
.location-card {
margin: 0;
width: 100%;
max-width: 100%;
}
.location-image { height: 140px; }
.location-info { padding: 14px; }
}
/* Make the actions (Call / Map) responsive and easy to tap */
.location-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* At small widths, stack the buttons and make them full-width */
@media (max-width: 640px) {
.location-actions {
flex-direction: column;
gap: 10px;
}
.call-btn,
.map-btn {
width: 100% !important; /* full width */
justify-content: center;
padding: 12px 14px;
font-size: 0.95rem;
border-radius: 10px;
display: inline-flex;
}
}
/* Make svg icons inside buttons vertically centered and sized */
.call-btn svg,
.map-btn svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
margin-right: 8px;
display: inline-block;
}
/* Improve contrast and tappable area for CTA in .cta-section */
.cta-buttons,
.button-row {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.cta-buttons,
.button-row {
flex-direction: column;
gap: 12px;
}
.cta-btn, .btn, .btn.large {
width: 100%;
box-sizing: border-box;
}
}
/* Ensure phone button in header remains visible but not oversized on mobile */
@media (max-width: 768px) {
.phone-btn { display:none; } /* hide desktop phone button in mobile */
.mobile-call-btn { display:flex; } /* keep mobile round button visible */
}
/* Fix possible container float/width issues by forcing container centering */
.locations { padding-left: 5%; padding-right: 5%; box-sizing: border-box; }
/* Smaller font-size tweak for long addresses to avoid overflow */
.location-info p {
font-size: 0.92rem;
line-height: 1.45;
}
/* small visual tweak: increase button hit area across devices */
.call-btn, .map-btn { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
/* === FORCE single-column layout on small screens (override) === */
/* Place this at the END of styles.css so it wins over previous rules */
/* Use 768px breakpoint for phones/tablets — change to 640px if you prefer */
@media (max-width: 768px) {
/* Make locations render single column, full width */
.locations-grid {
grid-template-columns: 1fr !important; /* force single column */
gap: 18px !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-items: stretch !important;
}
/* Ensure each card fills the grid cell */
.location-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* tighter image height on small screens */
.location-image { height: 140px !important; }
/* reduce inner padding slightly so content fits */
.location-info { padding: 14px !important; }
/* Make action buttons stack and become full width */
.location-actions {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
}
.call-btn,
.map-btn {
width: 100% !important;
justify-content: center !important;
padding: 12px 14px !important;
font-size: 0.95rem !important;
border-radius: 10px !important;
display: inline-flex !important;
box-sizing: border-box !important;
}
/* Make SVG/icon and text align nicely */
.call-btn svg,
.map-btn svg,
.call-btn i,
.map-btn i {
margin-right: 10px !important;
flex: 0 0 auto !important;
}
/* If mobile menu has translucent overlay causing extra horizontal scroll, hide overflow */
body, html { overflow-x: hidden !important; }
}
/* Extra precaution for very narrow screens (<=420px) */
@media (max-width: 420px) {
.location-image { height: 120px !important; }
.location-info p { font-size: 0.92rem !important; line-height:1.4 !important; }
}
/* ===== STRONG OVERRIDE: Force single column locations on mobile ===== */
/* Paste at the very end of styles.css so it has final priority */
/* Use a safe breakpoint - phones & small tablets */
@media (max-width: 992px) {
/* Force the container to use a single column grid */
body .clinic-locations .locations-grid,
body .locations-grid,
body .clinic-locations .locations-grid:not(.no-force),
body .locations-grid:not(.no-force) {
display: grid !important;
grid-template-columns: 1fr !important; /* single column */
grid-auto-flow: row !important;
gap: 18px !important;
padding-left: 12px !important;
padding-right: 12px !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-items: stretch !important;
align-items: start !important;
box-sizing: border-box !important;
}
/* Ensure each child spans the single grid column and fills width */
body .clinic-locations .locations-grid > .location-card,
body .locations-grid > .location-card,
body .clinic-locations .locations-grid > * ,
body .locations-grid > * {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
display: block !important;
}
/* tighten image sizing for small screens */
body .location-image { height: 140px !important; min-height:120px !important; }
/* location inner padding */
body .location-info { padding: 14px !important; }
/* Stack action buttons vertically and make full width */
body .location-actions {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
align-items: stretch !important;
width: 100% !important;
}
body .call-btn, body .map-btn {
width: 100% !important;
justify-content: center !important;
padding: 12px 14px !important;
font-size: 0.95rem !important;
border-radius: 10px !important;
display: inline-flex !important;
box-sizing: border-box !important;
}
/* Icon spacing */
body .call-btn svg, body .map-btn svg, body .call-btn i, body .map-btn i {
margin-right: 10px !important;
flex: 0 0 auto !important;
vertical-align: middle !important;
}
/* Prevent horizontal overflow caused by weird containers */
html, body { overflow-x: hidden !important; }
}
/* Extra guard for very narrow phones */
@media (max-width: 420px) {
body .location-image { height: 120px !important; }
body .location-info p { font-size: 0.92rem !important; line-height: 1.4 !important; }
}
/* ===== Fix: Make CTA buttons stack & be responsive on small screens ===== */
/* Paste at the END of styles.css so it overrides other rules */
@media (max-width: 768px) {
/* Target the card that contains the quick CTA (the one in your screenshot) */
.contact-card,
.contact-card * { box-sizing: border-box; }
/* If you have a specific row wrapper for the buttons use those classes too:
.button-row, .contact-buttons, .cta-buttons are common ones used earlier. */
.contact-card .button-row,
.contact-card .contact-buttons,
.contact-card .cta-buttons,
.contact-card > div > .button-row,
.contact-card > div > .contact-buttons {
display: flex !important;
flex-direction: column !important; /* stack vertically */
gap: 12px !important;
align-items: stretch !important;
justify-content: center !important;
width: 100% !important;
margin: 0 !important;
}
/* Make each button fill available width and remove overlapping transforms */
.contact-card .btn,
.contact-card .btn-primary,
.contact-card .btn-secondary,
.contact-card .call-btn,
.contact-card .map-btn,
.contact-card .mobile-cta {
width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 16px !important;
margin: 0 !important;
border-radius: 10px !important;
position: relative !important; /* cancel absolute positioning */
transform: none !important; /* cancel any translate/rotate */
left: auto !important;
right: auto !important;
top: auto !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.08) !important;
font-size: 0.98rem !important;
text-align: center !important;
}
/* If the black Book Appointment button uses an inverted style (outline/float),
ensure its color & background are readable when stretching full-width */
.contact-card .btn-secondary,
.contact-card .btn-secondary:hover {
background: #0a0a0a !important;
color: #fff !important;
border: none !important;
}
/* Ensure icons inside the buttons align & don't cause overflow */
.contact-card .call-btn svg,
.contact-card .map-btn svg,
.contact-card .btn svg,
.contact-card .btn i {
margin-right: 10px !important;
flex: 0 0 auto !important;
width: 16px !important;
height: 16px !important;
}
/* Small tweak to card padding so the stacked buttons don't feel cramped */
.contact-card {
padding-bottom: 20px !important;
}
}
/* Extra guard on very narrow devices */
@media (max-width: 420px) {
.contact-card .btn,
.contact-card .call-btn {
padding: 10px 12px !important;
font-size: 0.95rem !important;
}
}
/* ===== Emergency override: force CTA stack & remove floats/transforms ===== */
/* Paste this at the very end of styles.css so it overrides everything */
@media (max-width: 992px) {
/* Target likely wrappers that may hold CTAs */
.contact-card,
.contact-card .button-row,
.contact-card .contact-buttons,
.contact-card .cta-buttons,
.contact-card > div > .button-row,
.contact-card > div > .contact-buttons,
.appointment-form .button-row,
.appointment-form .contact-buttons {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
justify-content: flex-start !important;
width: 100% !important;
}
/* Force all CTA-like elements to become block-level full-width buttons */
.contact-card .btn,
.contact-card .btn-primary,
.contact-card .btn-secondary,
.contact-card .call-btn,
.contact-card .map-btn,
.contact-card .mobile-cta,
.appointment-form .btn,
.appointment-form .call-btn,
.appointment-form .map-btn {
display: inline-flex !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 12px 16px !important;
margin: 0 !important;
border-radius: 10px !important;
position: static !important; /* remove absolute/fixed */
transform: none !important; /* remove transforms */
left: auto !important;
right: auto !important;
top: auto !important;
z-index: auto !important;
float: none !important;
}
/* Remove any negative margin or translate that causes overlap */
.contact-card [style*="transform"],
.contact-card [style*="translate"],
.contact-card [style*="margin-left"],
.contact-card [style*="margin-right"] {
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure icon alignment inside buttons */
.contact-card .call-btn svg,
.contact-card .map-btn svg,
.contact-card .btn svg,
.contact-card i {
margin-right: 10px !important;
width: 16px !important;
height: 16px !important;
flex: 0 0 auto !important;
vertical-align: middle !important;
}
/* Make sure call button colour still visible when full width */
.contact-card .call-btn { background: #f26f23 !important; color: #fff !important; }
.contact-card .map-btn, .contact-card .btn-secondary { background: #0a0a0a !important; color: #fff !important; }
/* Extra safety to avoid overflow */
html, body { overflow-x: hidden !important; }
}
/* Very narrow screens: slightly smaller padding */
@media (max-width: 420px) {
.contact-card .btn,
.contact-card .call-btn,
.contact-card .map-btn {
padding: 10px 12px !important;
font-size: 0.95rem !important;
}
}
/* ===== Make CTA buttons stack on mobile (call above book) ===== */
@media (max-width: 768px) {
/* Target likely CTA wrappers used on your page — combined for safety */
.contact-card .button-row,
.contact-card .contact-buttons,
.contact-card .cta-buttons,
.appointment-form .button-row,
.appointment-form .contact-buttons,
.button-row,
.contact-buttons,
.cta-buttons {
display: flex !important;
flex-direction: column !important; /* stack vertically */
gap: 12px !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* Make the buttons full width and readable */
.contact-card .call-btn,
.contact-card .map-btn,
.contact-card .btn,
.contact-card .btn-secondary,
.appointment-form .call-btn,
.appointment-form .map-btn,
.appointment-form .btn,
.appointment-form .btn-secondary,
.mobile-cta {
width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 16px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Force order: call first, book second (in case markup order differs) */
.call-btn { order: 1 !important; }
.btn-secondary, .mobile-cta { order: 2 !important; }
/* Small visual polish for very narrow screens */
.contact-card .call-btn,
.contact-card .btn-secondary,
.appointment-form .call-btn,
.appointment-form .btn-secondary {
border-radius: 10px !important;
}
}
/* Quick-contact: force CTA stack on mobile; Call above Book */
@media (max-width: 768px) {
/* make the whole card stack its children vertically */
.quick-contact-row {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
align-items: stretch !important;
padding: 18px !important;
}
/* ensure the left text area remains full width */
.quick-contact-row > div:first-child {
width: 100%;
min-width: 0;
}
/* actions container: stack buttons and make them full width */
.quick-contact-row .cta-actions {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
width: 100% !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* buttons full width, centered content */
.quick-contact-row .call-btn,
.quick-contact-row .btn,
.quick-contact-row .btn-secondary {
width: 100% !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 16px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-radius: 10px !important;
text-align: center !important;
}
/* ensure call button stays visually prominent */
.quick-contact-row .call-btn { order: 1 !important; }
.quick-contact-row .btn-secondary, .quick-contact-row .btn { order: 2 !important; }
/* guard against inherited transforms/positioning */
.quick-contact-row .btn,
.quick-contact-row .call-btn {
position: static !important;
transform: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
float: none !important;
}
/* keep icons aligned */
.quick-contact-row .call-btn i,
.quick-contact-row .call-btn svg {
margin-right: 10px !important;
flex: 0 0 auto !important;
}
}
/* Mobile blog card reflow: Title -> Meta -> Image -> Snippet */
@media (max-width: 980px) {
.posts-grid { grid-template-columns: 1fr; }
/* Make each card vertical and full-width */
.post-card {
display: block !important;
padding: 16px !important;
}
/* Ensure post-body is full-width and stack children naturally */
.post-body { width: 100%; display: block; }
/* Thumb becomes full width when moved into post-body */
.post-thumb {
width: 100% !important;
height: auto !important;
margin: 12px 0 !important;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(12,12,12,0.04);
}
.post-thumb img { width:100%; height:auto; object-fit:cover; display:block; }
/* Make post-title & meta appear above the thumb */
.post-title { margin-bottom: 6px; }
.post-meta { margin-bottom: 8px; }
/* Snippet spacing */
.post-snippet { margin-top: 10px; -webkit-line-clamp: 4; } /* show a little more on mobile */
}
/* ===== Fix: prevent hero/title from sliding under fixed header on mobile ===== */
/* Make sure header has a defined height and sits above content */
.header {
position: fixed; /* already fixed, but re-assert in case */
top: 0;
left: 0;
right: 0;
z-index: 12001; /* keep header above everything */
height: var(--header-height, 78px);
}
/* Set a smaller mobile header height and ensure content is offset */
:root {
--header-height-mobile: 82px; /* adjust if your mobile header is taller/shorter */
}
/* On small screens, give the main container (and hero) a safe top padding */
@media (max-width: 980px) {
/* Ensure header uses mobile height */
.header { height: var(--header-height-mobile); }
/* Put main content below the header so hero/title is visible */
main.container,
.page-hero {
/* If page-hero already has padding-top, this will add to it;
we prefer to use padding on main so hero keeps intended spacing */
padding-top: calc(var(--header-height-mobile) + 12px) !important;
}
/* If you want the hero itself to have less extra padding, you can reset it */
.page-hero { padding-top: 0 !important; }
}
/* ================= FOOTER STYLES ================= */
.yos-footer {
background: #1e1e1e;
color: #ccc;
padding: 50px 20px 20px;
font-family: 'Poppins', sans-serif;
}
.footer-main {
max-width: 1180px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.footer-col h4 {
color: #fff;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.1rem;
}
.footer-logo {
width: 150px;
margin-bottom: 15px;
}
.footer-about {
font-size: 0.95rem;
line-height: 1.6;
color: #bbb;
}
.footer-col ul {
padding: 0;
list-style: none;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #ccc;
text-decoration: none;
transition: 0.2s;
}
.footer-col ul li a:hover {
color: #ff6b2c;
}
.footer-contact li {
display: flex;
align-items: center;
gap: 10px;
}
.footer-contact i {
color: #ff6b2c;
}
/* Social icons */
.footer-social a {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: #333;
color: #fff;
margin-right: 8px;
transition: 0.3s;
font-size: 18px;
}
.footer-social a:hover {
background: #ff6b2c;
}
/* Bottom bar */
.footer-bottom {
text-align: center;
margin-top: 40px;
border-top: 1px s
/* Make the first footer column text white */
.yos-footer .footer-col:first-child p,
.yos-footer .footer-col:first-child {
color: #ffffff !important;
}
.yos-footer .footer-col:first-child .footer-about {
color: #f1f1f1 !important;
}
.footer-policy-links a {
color: #ff6b2c !important; /* YOS orange */
text-decoration: none !important;
padding: 0 4px;
font-weight: 500;
}
.footer-policy-links a:hover {
color: #ffffff !important; /* white on hover for contrast */
}
/* ================ RESPONSIVE FOOTER FIX ================== */
/* Place at the end of styles.css so it overrides previous footer rules */
.yos-footer {
background: #1e1e1e;
color: #ccc;
padding: 36px 18px 22px;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
/* main area grid -> becomes responsive */
.yos-footer .footer-main {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
align-items: start;
box-sizing: border-box;
padding: 6px 12px;
}
/* first column = white card */
.yos-footer .footer-main .footer-col:first-child {
background: #ffffff !important;
color: #111 !important;
padding: 20px !important;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(12,12,12,0.08);
align-self: start;
}
/* logo inside first column */
.yos-footer .footer-main .footer-col:first-child .footer-logo {
width: 150px;
display: block;
margin-bottom: 12px;
filter: none !important;
}
/* about text */
.yos-footer .footer-main .footer-col:first-child .footer-about {
color: #333 !important;
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: 12px;
}
/* social icons inside white card */
.yos-footer .footer-main .footer-col:first-child .footer-social a {
background: #f4f4f4 !important;
color: #222 !important;
border: 1px solid rgba(0,0,0,0.04);
}
.yos-footer .footer-main .footer-col:first-child .footer-social a:hover {
background: #ff6b2c !important;
color: #fff !important;
}
/* other columns (links/contact) */
.yos-footer .footer-main .footer-col:not(:first-child) h4 {
color: #fff;
margin-bottom: 12px;
font-weight: 600;
font-size: 1.05rem;
}
.yos-footer .footer-main .footer-col:not(:first-child) ul {
padding: 0;
margin: 0;
list-style: none;
}
.yos-footer .footer-main .footer-col:not(:first-child) li {
margin-bottom: 10px;
}
.yos-footer .footer-main .footer-col:not(:first-child) a {
color: #ccc;
text-decoration: none;
transition: color .18s ease;
}
.yos-footer .footer-main .footer-col:not(:first-child) a:hover {
color: #ff6b2c;
}
/* social row spacing (global) */
.yos-footer .footer-social {
margin-top: 8px;
}
.yos-footer .footer-social a {
display: inline-flex;
width: 36px;
height: 36px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: #333;
color: #fff;
margin-right: 8px;
transition: background .18s ease, color .18s ease;
font-size: 16px;
}
/* contact list */
.yos-footer .footer-contact li {
display: flex;
gap: 10px;
align-items: center;
color: #ccc;
}
/* bottom row */
.yos-footer .footer-bottom {
max-width: 1180px;
margin: 24px auto 0;
padding: 12px 12px 0;
border-top: 1px solid rgba(255,255,255,0.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-sizing: border-box;
color: #bdbdbd;
font-size: 0.92rem;
}
/* policy links style override (orange, no underline) */
.yos-footer .footer-policy-links a {
color: #ff6b2c !important;
text-decoration: none !important;
padding: 0 6px;
font-weight: 500;
}
.yos-footer .footer-policy-links a:hover { color: #ffffff !important; }
.review-card .avatar {
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2; /* fallback background */
margin-right: 15px;
}
.review-card .avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* ensures face is centered and fills the circle */
display: block;
}