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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Top Bar Styles */
.top-bar {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    padding: 8px 0;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
}

.contact-info i {
    color: #00B050;
    margin-right: 5px;
}

.separator {
    color: #ccc;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #00B050;
    font-size: 14px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #008a3d;
}

/* Logo Section Styles */
.logo-section {
    background-color: #fff;
    padding: 30px 0;
    border-bottom: 1px solid #e0e0e0;
}

.logo-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-image {
    max-width: 100%;
    height: auto;
    width: 300px;
    display: block;
}

/* Navigation Bar Styles */
.navbar {
    background-color: #e8e8e8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-wrapper {
    position: relative;
}

/* Mobile Menu Bar (Hidden on Desktop) */
.mobile-menu-bar {
    display: none;
    width: 100%;
    background-color: #ebece6;
    /* Beige color from image */
    border: none;
    padding: 15px 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000;
}

.mobile-menu-bar i {
    font-size: 16px;
}

/* Menu Header (Hidden on Desktop) */
.menu-header {
    display: none;
    background-color: #999;
    /* Darker grey from image */
    color: #000;
    padding: 15px 20px;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
}

.menu-header i {
    font-size: 18px;
}

/* Desktop Menu Styles */
.nav-menu {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    display: block;
    padding: 12px 10px;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: #d0d0d0;
    color: #00B050;
}

/* Main Content */
main {
    min-height: 500px;
}

/* Responsive Styles */
@media screen and (max-width: 1024px) {
    .nav-menu a {
        padding: 18px 10px;
        font-size: 12px;
    }

    .brand-name {
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {

    /* Top Bar */
    .top-bar {
        font-size: 11px;
    }

    .contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .separator {
        display: none;
    }

    .social-links {
        gap: 10px;
    }

    /* Logo Section */
    .logo-section {
        padding: 20px 0;
    }

    .logo-image {
        width: 200px;
    }

    /* Navigation - Mobile View */
    .navbar {
        background-color: #ebece6;
        /* Match mobile bar bg */
        padding: 0;
    }

    .container {
        padding: 0;
        /* Remove padding to make bar full width */
    }

    .mobile-menu-bar {
        display: flex;
    }

    .nav-menu-container {
        position: fixed;
        top: 0;
        left: -100%;
        /* Hidden by default */
        width: 300px;
        /* Width of the drawer */
        height: 100vh;
        background-color: #fff;
        z-index: 1001;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .nav-menu-container.active {
        left: 0;
    }

    .menu-header {
        display: flex;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .nav-menu li {
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        padding: 15px 20px;
        font-size: 14px;
        color: #000;
        text-align: left;
    }

    .nav-menu a:hover,
    .nav-menu a.active {
        background-color: #f9f9f9;
        color: #000;
        border-left: none;
        /* Remove previous style */
    }
}

@media screen and (max-width: 480px) {
    .top-bar-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .top-bar .container {
        padding: 0 20px;
        /* Restore padding for top bar */
    }

    .logo-section .container {
        padding: 0 20px;
        /* Restore padding for logo section */
    }

    .logo-image {
        width: 100%;
        max-width: 200px;
    }

    .social-links {
        display: none;
    }

    .contact-info {
        align-items: center;
    }

    .top-bar-content {
        align-items: center;
    }
}

/* Overlay for mobile menu */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.nav-overlay.active {
    display: block;
}

@media screen and (min-width: 769px) {
    .nav-overlay {
        display: none !important;
    }
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    padding: 100px 0 150px;
    overflow: hidden;
    /* background-color: #f9f9f9; Removed to show background image */
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/thulasi-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -1;
    opacity: 0.3;
}

.hero-content {
    text-align: right;
    max-width: 600px;
    margin-left: auto;
    padding-right: 20px;
}

.hero-title {
    font-size: 42px;
    color: #000;
    margin-bottom: 20px;
    font-weight: 400;
}

.hero-description {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 40px;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.cta-text {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.cta-button {
    background-color: #00B050;
    color: #fff;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #008a3d;
}

/* Cards Section Styles */
.cards-section {
    position: relative;
    margin-top: -80px;
    /* Overlap with hero section */
    padding-bottom: 80px;
    z-index: 10;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background-color: #fff;
    border-radius: 5px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-icon {
    height: 80px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.card-title {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
    font-weight: 500;
}

.card-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 1;
}

.card-list {
    list-style: none;
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1;
    width: 100%;
}

.card-list li {
    font-size: 12px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.card-list li i {
    color: #000;
    font-size: 10px;
}

.card-button {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #333;
    border-radius: 25px;
    color: #333;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.card-button:hover {
    background-color: #333;
    color: #fff;
}

/* Scroll Top Button */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: #999;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background-color: #666;
}

/* Responsive Adjustments for New Sections */
@media screen and (max-width: 1024px) {
    .cards-grid {
        gap: 20px;
    }

    .card {
        padding: 30px 20px;
    }
}

@media screen and (max-width: 768px) {
    .hero-section {
        padding: 60px 0 100px;
    }

    .hero-content {
        text-align: center;
        margin: 0 auto;
        padding-right: 0;
    }

    .hero-cta {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    .cards-section {
        margin-top: -50px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Our Vaidyas Section Styles */
.vaidyas-section {
    background-color: #fff;
    padding: 80px 0;
    border-top: 1px solid #eee;
    /* Optional separator */
}

.vaidyas-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
    /* Make all items same height */
}

.vaidya-card {
    display: flex;
    flex-direction: column;
}

.vaidya-image-container {
    width: 100%;
    /* aspect-ratio: 1 / 1.2;  Removed fixed aspect ratio to let image dictate or fit */
    overflow: hidden;
    margin-bottom: 0;
    /* Attached to name */
}

.vaidya-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.vaidya-card:hover .vaidya-image-container img {
    transform: scale(1.05);
}

.vaidya-name {
    font-size: 13px;
    color: #666;
    background-color: #f0f0f0;
    padding: 12px 10px;
    text-align: center;
    margin-top: auto;
    /* Push to bottom if needed, though flex-direction column handles it */
}

.vaidya-info {
    padding: 20px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background-color: #fff;
}

.vaidya-title {
    font-size: 22px;
    color: #666;
    margin-bottom: 20px;
    font-weight: 400;
}

.vaidya-text {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 30px;
}

.vaidya-read-more {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.vaidya-read-more:hover {
    background-color: #333;
    color: #fff;
}

/* Responsive Styles for Vaidyas Section */
@media screen and (max-width: 1024px) {
    .vaidyas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .vaidya-info {
        grid-column: span 2;
        /* Take up 2 columns space */
        order: -1;
        /* Move to start */
    }
}

@media screen and (max-width: 768px) {
    .vaidyas-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vaidyas-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        margin: 0 auto;
        gap: 15px;
    }

    .vaidya-info {
        grid-column: span 2;
        order: -1;
        text-align: center;
        margin-bottom: 30px;
        border: none;
        padding: 0;
    }

    .vaidya-read-more {
        align-self: center;
    }
}

/* Booking Section Styles */
.booking-section {
    background-image: url('images/bg-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
    position: relative;
}

.booking-content {
    background-image: linear-gradient(rgba(0, 176, 80, 0.85), rgba(0, 176, 80, 0.85)), url('images/THULASI-AYURVEDA-BG.jpg');
    background-size: cover;
    background-position: center;
    padding: 50px;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    color: #fff;
    /* backdrop-filter: blur(5px); Optional for glass effect */
}

.booking-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 400;
}

.booking-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
}

.booking-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.booking-btn i {
    font-size: 12px;
}

.booking-btn:hover {
    gap: 15px;
    opacity: 0.8;
}

/* Gallery Section Styles */
.gallery-section {
    background-color: #f9f9f9;
    padding: 80px 0;
}

.gallery-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.gallery-info {
    background-image: linear-gradient(rgba(0, 176, 80, 0.85), rgba(0, 176, 80, 0.85)), url('images/THULASI-AYURVEDA-BG.jpg');
    background-size: cover;
    background-position: center;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.gallery-title {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 400;
}

.gallery-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 80%;
}

.gallery-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #fff;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.gallery-btn:hover {
    background-color: #fff;
    color: #00B050;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.gallery-item {
    overflow: hidden;
    height: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Responsive Styles for Booking and Gallery */
@media screen and (max-width: 900px) {
    .gallery-wrapper {
        grid-template-columns: 1fr;
    }

    .gallery-info {
        padding: 60px 30px;
        order: -1;
        /* Keep info on top */
    }
}

@media screen and (max-width: 768px) {
    .booking-section {
        padding: 80px 0;
    }

    .booking-content {
        padding: 30px;
        margin: 0 20px;
    }

    .gallery-section {
        padding: 60px 20px;
    }
}

/* Footer Section Styles */
.site-footer {
    background-color: #ebece6;
    /* Beige color from image */
    padding: 60px 0 0;
    /* No bottom padding as map might touch edge or copyright bar */
    color: #333;
}

.footer-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 0;
    /* Remove gap if map should touch */
    align-items: stretch;
}

.footer-contact {
    padding: 40px 40px 60px 0;
}

.footer-title {
    font-size: 24px;
    color: #666;
    margin-bottom: 30px;
    font-weight: 400;
    line-height: 1.3;
}

.contact-details p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.6;
}

.contact-item {
    margin-top: 15px;
}

.footer-social {
    margin-top: 40px;
}

.footer-social h4 {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
    font-weight: 400;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    color: #fff;
    /* White icons */
    background-color: #fff;
    /* Placeholder circle if needed, but image shows white icons on beige? No, likely dark icons or white circles. Let's assume white circles based on typical design or just icons. Image shows white icons? Hard to tell, looks like white circles. Let's try simple icons first. */
    /* Wait, looking at image again. Follow us text is grey. Icons are white circles? Or just white icons. Let's use white circles. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    color: #ebece6;
    /* Icon color matching bg? No that would be invisible. Let's make icons grey and bg white. */
    color: #ccc;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icons a:hover {
    background-color: #00B050;
    color: #fff;
}

.footer-map {
    position: relative;
    min-height: 300px;
    max-width: 800px;
    max-height: 400px;
}

.footer-map img,
.footer-map iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive Styles for Footer */
@media screen and (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-contact {
        padding: 40px 20px;
    }

    .footer-map {
        min-height: 300px;
    }
}

/* Lightbox Styles */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    object-fit: contain;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px) {
    .lightbox-content {
        width: 100%;
    }
}