/* CSS Variables */ :root { --main-green: #73bc8d; --pale-green: #f6fcf8; --text-dark: #292525; --shadow: rgba(115, 188, 141, 0.15); --font-size: 15px; --dark-green: #5ea77b; /* Added for improved hover effects */ } /* Base Styles & Reset */ html, body { margin: 0; padding: 0; box-sizing: border-box; /* Include padding and border in the element's total width and height */ overflow-x: hidden; /* Prevent horizontal scrolling */ word-wrap: break-word; /* Ensure long words break */ overflow-wrap: break-word; /* Modern version of word-wrap */ } *, *:before, *:after { box-sizing: inherit; /* Inherit box-sizing from html/body */ } body { font: var(--font-size)/1.5 Arial, sans-serif; background: var(--pale-green); color: var(--text-dark); padding-top: 100px; /* Space for the fixed header */ } body.no-scroll { overflow: hidden; /* For hamburger menu and modal to prevent body scroll */ } /* Favicon is handled in HTML */ /* General image responsiveness */ img { max-width: 100%; height: auto; display: block; /* Ensures images behave as blocks for centering/spacing */ } /* Header Styles */ header { position: fixed; top: 0; left: 0; right: 0; height: 100px; /* Height of the fixed header */ background: white; display: flex; align-items: center; padding: 0 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000; justify-content: space-between; /* Distribute items within the header */ } header .logo-link { /* Logo on the left */ display: flex; align-items: center; text-decoration: none; flex-shrink: 0; transition: opacity 0.3s ease; } header .logo-link:hover { opacity: 0.8; } /* Standardized styling for the logo image */ header .logo-link img { max-height: 80px; /* Max height to fit comfortably in 100px header */ max-width: 160px; /* Limit width */ width: auto; /* Maintain aspect ratio */ object-fit: contain; flex-shrink: 0; } /* Header Enquire Button (Far right, inverted style) */ .header-cta-btn { background: white; /* Inverted: White background */ color: var(--main-green); /* Inverted: Green text */ border: 2px solid var(--main-green); /* Inverted: Green outline */ padding: 8px 16px; border-radius: 25px; /* Bubble shape */ text-decoration: none; font-weight: bold; font-size: 0.9em; transition: background 0.3s, color 0.3s, border-color 0.3s; flex-shrink: 0; white-space: nowrap; } .header-cta-btn:hover { background: var(--main-green); /* On hover: Green background */ color: white; /* On hover: White text */ } /* Desktop Navigation (Center) */ nav { flex-grow: 1; /* Allows nav to take available space */ display: flex; /* Enable flex for inner centering */ justify-content: center; /* Center navigation links */ } nav ul { display:flex; gap:20px; list-style:none; padding:0; margin:0; } nav a { background:#b1dcc0; color:#fff; padding:8px 16px; border-radius:20px; text-decoration:none; font-weight:bold; transition: background 0.3s, color 0.3s; } nav a:hover, nav a.active { background:var(--main-green); color: white; } /* --- Dropdown Menu Specific Styles (Desktop) --- */ nav ul li.dropdown { position: relative; } nav ul li.dropdown > a { padding-right: 32px; position: relative; white-space: nowrap; } nav ul li.dropdown > a::after { content: '▼'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0.7); color: white; transition: transform 0.3s ease; font-size: 0.9em; } nav ul li.dropdown:hover > a::after { transform: translateY(-50%) rotate(180deg) scale(0.7); } nav ul li.dropdown .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--main-green); min-width: 260px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); z-index: 1; list-style: none; padding: 10px 0; margin-top: 5px; border-radius: 8px; overflow: hidden; } nav ul li.dropdown:hover .dropdown-menu { display: block; } nav ul li.dropdown .dropdown-menu li { width: 100%; } nav ul li.dropdown .dropdown-menu a { color: white; padding: 10px 20px 10px 30px; text-decoration: none; display: block; text-align: left; background: transparent; border-radius: 0; font-weight: normal; white-space: nowrap; font-size: 0.95em; transition: background-color 0.3s, color 0.3s; position: relative; } nav ul li.dropdown .dropdown-menu a::before { content: '•'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: white; font-size: 1.2em; line-height: 1; } nav ul li.dropdown .dropdown-menu a:hover { background-color: var(--dark-green); color: white; } nav ul li.dropdown .dropdown-menu a.current-page-link { background: white; color: var(--main-green); pointer-events: none; } nav ul li.dropdown .dropdown-menu a.current-page-link::before { color: var(--main-green); } /* Hamburger Menu (Hidden by default on desktop, Enhanced Visuals) */ .hamburger { display: none; position: relative; width: 30px; height: 20px; cursor: pointer; z-index: 1001; border: 1px solid var(--main-green); border-radius: 8px; padding: 10px; box-sizing: content-box; transition: all 0.3s ease; } .hamburger:hover { background-color: rgba(115, 188, 141, 0.1); border-color: var(--dark-green); } .hamburger span { display: block; width: 100%; height: 3px; background: var(--main-green); border-radius: 5px; position: absolute; left: 0; transition: all 0.3s ease; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 8px; } .hamburger span:nth-child(3) { top: 16px; } .hamburger.open { transform: rotate(360deg); background-color: transparent; border-color: transparent; } .hamburger.open span:nth-child(1) { transform: rotate(45deg); top: 8px; background: white; } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: rotate(-45deg); top: 8px; background: white; } /* Overlay (Dim background for mobile menu) */ .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; } .overlay.active { display: block; } /* Main Content Layout (general containers found on many pages) */ main.content-area { max-width:900px; margin:0 auto; padding:30px 20px; display:flex; flex-direction:column; gap:60px; } .section { /* This is the key: already has `border-radius:20px` and `box-shadow` */ background:#fff; padding:30px; border-radius:20px; box-shadow:0 4px 15px var(--shadow); } /* Contact Page Specifics */ .business-hours { /* No absolute positioning within this section, it's just the padded box */ border:2px solid var(--main-green); border-radius:16px; padding:20px 30px; width:100%; text-align:center; font-weight:600; color:var(--main-green); position:relative; box-shadow:0 4px 8px var(--shadow); } .business-hours p { /* Style for the actual hours text */ margin: 0; /* Remove default paragraph margin */ font-size: 1.1em; /* Ensure readability */ } .contact-row { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; width:100%; } .contact-button { display:flex; align-items:center; gap:8px; color:var(--text-dark); /* Explicit text color */ text-decoration:none; /* Ensure no default underline */ font-weight:600; transition:text-decoration 0.3s, color 0.3s; /* Transition for underline and color */ } .contact-button:hover { text-decoration:underline; /* Add underline on hover */ color: var(--main-green); /* Optional: Change color on hover */ } /* Style for custom SVG icons within contact buttons */ .contact-button svg { width:24px; height:24px; stroke:var(--main-green); /* Use main-green for stroke */ stroke-width:2; fill:none; /* Default to stroke, no fill */ transition: stroke 0.3s, fill 0.3s; /* Transition for icon color */ } /* Specific fill for phone icon if needed, currently stroke only */ .contact-button svg.phone-icon-fill { /* This class can be added to SVGs you want filled */ fill: var(--main-green); /* For phone icons that use fill */ stroke: none; /* No stroke if filled */ } .contact-button:hover svg.phone-icon-fill { /* Change fill color on hover */ fill: var(--dark-green); } .contact-button:hover svg:not(.phone-icon-fill) { /* Change stroke color on hover for stroke-only icons */ stroke: var(--dark-green); } .section-title { /* This is the key: already has `color: var(--main-green)` */ text-align:center; font-weight:700; font-size:1.75rem; margin:0 0 25px; color: var(--main-green); } .address-block { display:flex; flex-direction:column; gap:40px; } .address-item { font-weight:700; display:flex; align-items:center; gap:8px; font-size:1.1rem; } .address-item a { color:var(--text-dark); /* Explicit text color */ text-decoration:none; /* No default underline */ border-bottom:1.5px solid transparent; /* Hidden border-bottom for hover effect */ transition:border-color 0.3s, text-decoration 0.3s, color 0.3s; /* Transition for all */ } .address-item a:hover { border-color:var(--main-green); /* Show border-bottom on hover */ text-decoration: underline; /* Add text-decoration: underline on hover */ color: var(--main-green); /* Optional: Change color on hover for address links */ } iframe { width:100%; height:280px; border:none; border-radius:12px; box-shadow:0 0 12px rgba(0,0,0,0.1); } form { display:flex; flex-direction:column; gap:20px; } form h3 { margin:0; text-align:center; font-size:1.6rem; font-weight:700; } .form-row { display:flex; gap:20px; flex-wrap:wrap; } .form-row > div { flex:1; min-width:200px; display:flex; flex-direction:column; } label { margin-bottom:6px; font-weight:600; } input, select, textarea { padding:10px; border:1px solid #ccc; border-radius:20px; font-family:inherit; font-size:1rem; flex-grow: 1; } textarea { min-height:100px; resize:vertical; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--main-green); box-shadow:0 0 5px var(--main-green); } button[type="submit"] { background:var(--main-green); color:white; border:none; padding:15px; font-size:1.1rem; border-radius:25px; cursor:pointer; font-weight:700; width:200px; margin:0 auto; transition:background 0.3s; } button[type="submit"]:hover { background:#5ea77b; } button[type="submit"]:disabled { background: #ccc; cursor: not-allowed; } /* Footer Styles */ footer { background: #000; color: white; padding: 40px 20px 20px; text-align: center; } footer div { margin-bottom: 0px; } .footer-flags { height: 40px; max-width: 100%; margin: 0 auto 20px; display: block; } footer p { max-width: 800px; margin: 0 auto 30px; font-size: 0.95em; line-height: 1.6; } footer a { color: #73bc8d; text-decoration: underline; } footer a img { height: 24px; display: inline-block; margin: 0 10px; } footer p:last-child { font-size: 0.9em; } /* Modal Styles */ .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { background-color: #fefefe; margin: auto; padding: 30px; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; width: 90%; max-width: 500px; text-align: center; transform: translateY(-20px); transition: transform 0.3s ease; } .modal.active .modal-content { transform: translateY(0); } .close-button { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s ease; } .close-button:hover, .close-button:focus { color: var(--main-green); text-decoration: none; outline: none; } .modal-body h3 { color: var(--main-green); font-size: 2em; margin-bottom: 15px; } .modal-body p { color: var(--text-dark); font-size: 1.1em; line-height: 1.6; margin-bottom: 25px; } .modal-checkmark { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; background: var(--main-green); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .modal-checkmark svg { color: white; width: 60%; height: 60%; stroke-width: 2.5px; } .modal-redirect-button { background: var(--main-green); color: white; border: none; padding: 12px 25px; font-size: 1.1rem; border-radius: 25px; cursor: pointer; font-weight: 700; transition:background 0.3s; margin-top: 20px; } .modal-redirect-button:hover { background: var(--dark-green); } /* --- Styles for Hero Section (common page top content, plain green) --- */ .hero-section { background: var(--main-green); color: white; padding: 60px 20px; text-align: center; margin-top: -100px; /* Counteract body padding-top */ padding-top: 160px; /* Include space for fixed header and its own padding */ border-radius: 0; box-shadow: none; overflow: visible; max-width: none; margin-left: 0; margin-right: 0; } .hero-section .container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero-section h1 { font-size: 2.8em; margin-bottom: 15px; line-height: 1.2; } .hero-section p { font-size: 1.2em; max-width: 700px; margin: 0 auto 30px; } /* General button style, for content sections, not header */ .btn { display: inline-block; background: #fff; color: var(--main-green); padding: 12px 25px; border-radius: 25px; text-decoration: none; font-weight: bold; font-size: 1.1em; transition: background 0.3s, color 0.3s; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .btn:hover { background: #f0f0f0; color: var(--dark-green); } /* --- Services page specific styles --- */ /* Your existing styles for services.html */ .services-page-main { padding: 30px 20px; max-width: 900px; margin: 0 auto; } .services-main-image { margin: 30px auto; width: 100%; max-width: 700px; height: auto; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .services-intro { text-align: center; margin-bottom: 40px; background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 4px 15px var(--shadow); } .services-intro h2 { font-size: 2.2em; color: var(--main-green); margin-bottom: 15px; } .services-intro p { font-size: 1.1em; line-height: 1.6; max-width: 700px; margin: 0 auto; } /* Horizontal Scrollable Services Menu */ .service-carousel-container { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 20px; gap: 20px; margin: 20px 0; padding: 20px 0; justify-content: space-between; } .service-carousel-container::-webkit-scrollbar { height: 8px; } .service-carousel-container::-webkit-scrollbar-track { background: var(--pale-green); border-radius: 10px; } .service-carousel-container::-webkit-scrollbar-thumb { background: var(--main-green); border-radius: 10px; } .service-carousel-container::-webkit-scrollbar-thumb:hover { background: var(--dark-green); } .service-card { flex: 0 0 auto; width: 280px; scroll-snap-align: start; background: #fff; border: 1px solid #eee; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 25px; text-align: center; text-decoration: none; color: var(--text-dark); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: var(--main-green); } .service-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px; border: 2px solid var(--main-green); padding: 5px; } .service-card h3 { font-size: 1.3em; margin-bottom: 10px; color: var(--main-green); display: flex; align-items: center; justify-content: center; gap: 8px; } .service-card .medical-icon { font-size: 1.2em; color: var(--dark-green); line-height: 1; } .service-card p { font-size: 0.95em; color: #555; line-height: 1.5; } /* General Section/Content Styles */ .section ul { list-style: none; padding: 0; margin: 20px auto; max-width: 700px; text-align: left; } .section ul li { padding-left: 25px; position: relative; margin-bottom: 10px; } .section ul li::before { content: '•'; color: var(--main-green); font-size: 1.2em; position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: 1; } /* Outlined Mantra Section */ .outlined-mantra-section { border:2px solid var(--main-green); border-radius:16px; padding:20px 30px; width:100%; text-align:center; font-weight:600; color:var(--main-green); position:relative; box-shadow:0 4px 8px var(--shadow); max-width: 900px; margin: 60px auto; display: flex; flex-direction: column; align-items: center; } .contained-title { position:absolute; top:-20px; left:50%; transform:translateX(-50%); background:var(--pale-green); padding:0 12px; color:var(--main-green); font-size:1.8rem; font-weight: 700; margin:0; white-space: nowrap; display: flex; align-items: center; gap: 8px; } .outlined-mantra-section .mantra-slogan { margin-top: 10px; font-size: 1.2em; line-height: 1.5; color: var(--text-dark); font-weight: 500; } /* Slideshow */ .slideshow-container { position: relative; max-width: 900px; margin: 60px auto; overflow: hidden; border-radius: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); cursor: pointer; } .slideshow-container img { width: 100%; display: block; border-radius: 20px; transition: opacity 0.8s ease-in-out; } /* Mantra Columns */ .mantra-section { max-width: 900px; margin: 0 auto 60px; text-align: center; padding: 30px 20px; background: #fff; border-radius: 20px; box-shadow: 0 4px 15px var(--shadow); } .mantra-section .section-title { margin-bottom: 40px; font-size: 2.2em; color: var(--main-green); } .mantra-grid { display: flex; flex-wrap: nowrap; gap: 30px; justify-content: space-around; padding: 0 10px; } .mantra-card { flex: 0 0 28%; max-width: 200px; aspect-ratio: 1 / 1.1; background: url('blob.png') no-repeat center center / contain; padding: 20px 10px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bold; font-size: 1.5em; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .mantra-card:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,0.25); } /* What We Offer Rows */ .what-we-offer-section { max-width: 900px; margin: 0 auto 60px; text-align: center; padding: 30px 20px; background: #fff; border-radius: 20px; box-shadow: 0 4px 15px var(--shadow); } .what-we-offer-section .section-title { margin-bottom: 40px; font-size: 2.2em; color: var(--main-green); } .offer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-bottom: 50px; } .offer-row:last-child { margin-bottom: 0; } .offer-row.reverse { flex-direction: row-reverse; } .offer-image-container { flex: 1 1 350px; max-width: 450px; display: flex; justify-content: center; align-items: center; } .offer-image-container img { width: 100%; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .offer-image-container img:hover { transform: scale(1.02); } .offer-content-container { flex: 1 1 400px; text-align: left; } .offer-content-container h3 { font-size: 1.8em; color: var(--dark-green); margin-bottom: 15px; } .offer-content-container p { font-size: 1.1em; line-height: 1.6; margin-bottom: 20px; } .offer-content-container .btn { background: var(--main-green); color: white; padding: 12px 25px; border-radius: 25px; display: inline-block; text-decoration: none; font-weight: bold; transition: background 0.3s; } .offer-content-container .btn:hover { background: var(--dark-green); } /* --- Media Queries for Responsiveness --- */ /* Mobile First Adjustments (max-width: 768px for header/nav) */ @media (max-width: 768px) { header { height: 80px; padding: 0 15px; justify-content: flex-start; /* Logo left, CTA & Hamburger right on mobile */ } header .logo-link { height: auto; } header .logo-link img { max-height: 60px; max-width: 120px; } .header-cta-btn { display: block; /* Show CTA button on mobile */ font-size: 0.8em; padding: 6px 12px; margin-left: auto; /* Push CTA button to the right of logo */ } .hamburger { display: block; /* Show hamburger on mobile */ margin-left: 15px; /* Space between CTA and hamburger */ } nav { display: none; /* Hide desktop nav by default on mobile */ position: fixed; top: 0; right: -100%; width: 70%; max-width: 300px; height: 100vh; background: var(--main-green); padding-top: 80px; transition: right 0.3s ease-in-out; z-index: 999; flex-direction: column; align-items: center; box-shadow: -2px 0 8px rgba(0,0,0,0.2); overflow-y: auto; flex-grow: 0; justify-content: flex-start; } nav.open { right: 0; display: flex; } nav ul { flex-direction: column; gap: 0; width: 100%; text-align: center; } nav li { width: 100%; margin-bottom: 5px; } nav a { background: var(--dark-green); color: white; display: block; padding: 12px 0; border-radius: 5px; font-size: 1.1rem; cursor: pointer; } nav a.active, nav a:hover { background: white; color: var(--main-green); } nav ul li.dropdown > a { padding-right: 12px; } nav ul li.dropdown > a::after { content: '+'; font-size: 1.5em; color: white; right: 15px; transform: translateY(-50%); transition: transform 0.3s ease; } nav ul li.dropdown.menu-open > a::after { content: '-'; transform: translateY(-50%) rotate(180deg); } nav ul li.dropdown .dropdown-menu { position: static; display: none; background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; text-align: center; } nav ul li.dropdown.menu-open .dropdown-menu { display: block; } nav ul li.dropdown .dropdown-menu li { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); } nav ul li.dropdown .dropdown-menu li:first-child { border-top: none; } nav ul li.dropdown .dropdown-menu a { padding: 10px 25px 10px 45px; font-size: 1rem; background: rgba(0,0,0,0.1); border-radius: 0; text-align: left; } nav ul li.dropdown .dropdown-menu a.current-page-link { background: white; color: var(--main-green); pointer-events: auto; } nav ul li.dropdown .dropdown-menu a:hover { background: rgba(0,0,0,0.3); } nav ul li.dropdown .dropdown-menu a::before { content: '•'; display: inline-block; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: white; font-size: 1.2em; line-height: 1; } nav ul li.dropdown .dropdown-menu a.current-page-link::before { color: var(--main-green); } body { padding-top: 80px; } /* Hero Section Mobile Adjustments */ .hero-section { padding-top: 120px; padding-bottom: 40px; margin-top: -80px;} /* General mobile adjustment for address font size */ .address-item { font-size: 1rem; /* Slightly smaller font for better fit on small screens */ } .address-item a { font-size: 1rem; /* Ensure link text also shrinks */ word-wrap: break-word; /* Ensure wrapping within links */ overflow-wrap: break-word; /* Modern version */ } /* Other content sections mobile adjustments */ .outlined-mantra-section .contained-title { font-size: 1.4rem; padding:0 8px;} .outlined-mantra-section .mantra-slogan { font-size: 1em; } .mantra-grid { flex-direction: column; gap: 20px; padding: 0; } .mantra-card { width: 80%; max-width: 250px; aspect-ratio: 1 / 1.1; font-size: 1.2em; margin: 0 auto; } .offer-row { flex-direction: column; text-align: center; margin-bottom: 40px; } .offer-row.reverse { flex-direction: column; } .offer-image-container { max-width: 100%; margin-bottom: 20px; } .offer-content-container { text-align: center; } .offer-content-container .btn { margin: 0 auto; } .services-main-image { margin-top: 20px; } .service-carousel-container { padding: 15px; } .service-card { width: 250px; padding: 20px; } } /* General Mobile Adjustments (max-width: 600px for content) */ @media(max-width:600px) { main.content-area { padding: 20px 15px; gap: 40px; } .section-title { font-size: 1.5rem; margin-bottom: 20px; } .business-hours h3 { font-size: 1.1rem; } form h3 { font-size: 1.4rem; } .form-row, .contact-row { flex-direction: column; gap: 15px; } .form-row > div { min-width: unset; width: 100%; } input, select, textarea { padding: 12px; } button[type="submit"] { width: 100%; max-width: 250px; font-size: 1rem; padding: 12px; } .modal-content { padding: 20px; } .modal-body h3 { font-size: 1.8em; } .modal-body p { font-size: 1em; } }