/* Components CSS - Jeevajyoti Center */

/* Header & Navigation */
.top-bar {
    background-color: var(--primary-dark);
    color: var(--white);
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.top-bar a {
    color: var(--white);
    margin-left: 1rem;
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--accent-green);
}

.header {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.2rem 0;
    /* Further reduced from 0.5rem to 0.2rem for tighter look */
    width: 100%;
}

/* Header Layout with Bottom Aligned Menu */
.header .container {
    justify-content: space-between;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 2rem;
    /* Increased right padding to shift menu left */
    display: flex;
    align-items: flex-end;
    /* Align logo and menu to the bottom line */
    padding-bottom: 0.5rem;
    /* Slight padding from bottom edge */
}

/* Logo Sizing */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-bottom: 0;
}

.logo img {
    height: 110px !important;
    /* Slightly reduced from 120px to fit tighter header if needed, or kept same? User said reduce padding. Let's keep 120px if it fits, or slight reduce to 110px. Let's try 110px. */
    width: auto;
    display: block;
}

.logo h2 {
    font-size: 3.7rem !important;
    /* Increased from 3.5rem (approx +2 points/units) */
    margin-left: 1.5rem;
    color: var(--primary-royal-blue);
    line-height: 1;
    margin-bottom: 0.2rem;
    /* Slight optical adjustment for bottom alignment */
    align-self: flex-end;
    /* Align text to bottom */
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    /* Changed back to center to ensure text aligns with text, not container bottom */
    margin-bottom: 0.5rem;
    margin-right: 5rem;
    height: 40px;
    /* Fixed height container to force alignment */
}

/* Common styles for links and dropdown trigger to ensure identical sizing */
.nav-link,
.dropdown>.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 1.1rem;
    padding-bottom: 0;
    /* Removing padding bottom dependency */
    display: flex;
    align-items: center;
    /* Center text vertically within the fixed height */
    height: 100%;
    /* Fill the fixed height */
    line-height: normal;
}

/* Dropdown Menu */
.dropdown {
    display: flex;
    /* Make dropdown container flex too */
    align-items: center;
    height: 100%;
    position: relative;
}

.dropdown .nav-link i {
    margin-left: 5px;
    /* Spacing for the arrow */
    font-size: 0.8em;
    display: flex;
    align-items: center;
    /* Ensure icon is centered with text */
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-green);
    /* Hover color change */
    /* text-decoration: underline; Optional */
}

/* Dropdown Menu - Position correction */
/* Dropdown Hover Effect */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* Ensure it captures clicks */
}

/* Ensure hidden state is robust */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    min-width: 200px;

    /* Hidden State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
    pointer-events: none;
    /* Prevent clicks when hidden */
    display: block;
    /* Always block, controlled by opacity/visibility */
}

.dropdown-item {
    color: var(--text-dark);
    padding: 0.75rem 1.5rem;
    display: block;
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: var(--light-gray);
    color: var(--primary-royal-blue);
}

/* Hamburger Menu (Mobile) */
.hamburger {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-royal-blue);
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--white);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: var(--shadow-md);
        text-align: center;
    }

    .nav-menu.active {
        display: flex;
    }

    .header .container {
        flex-wrap: wrap;
        /* Allow wrapping on small screens */
    }

    .logo img {
        height: 60px !important;
        /* Scale back down for mobile */
    }

    .logo h2 {
        font-size: 1.2rem !important;
    }
}

/* Activity Cards */
.activity-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.activity-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.activity-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.activity-content {
    padding: 1.5rem;
}

.activity-content h3 {
    color: var(--primary-royal-blue);
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background-color: var(--primary-royal-blue);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* Contact Form */
.contact-form {
    background: var(--white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-royal-blue);
}

/* Footer */
.footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 1rem 0 0.5rem;
    /* Drastic reduction: 1rem top, 0.5rem bottom */
    font-size: 0.8rem;
    /* Smaller base font */
}

.footer .container>.grid-3 {
    display: flex;
    /* Override grid with flex */
    justify-content: space-between;
    /* Push items to edges */
    align-items: flex-start;
    gap: 2rem;
}

.footer .grid-3>div:first-child {
    flex: 1;
    /* Quick links takes natural width */
    text-align: left;
}

.footer .grid-3>div:nth-child(2) {
    flex: 2;
    /* Center content takes more space if needed, or just auto */
    text-align: center;
}

.footer .grid-3>div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Aligns the children (header, ul) to the right */
}

.footer .grid-3>div:last-child h3,
.footer .grid-3>div:last-child ul {
    text-align: left !important;
    /* Force left alignment for both header and list */
    width: 100%;
    /* Ensure they take full width of the flex item container */
    max-width: fit-content;
    /* Helps align them together if container is wide */
}

/* Ensure the flex container aligns items to start (left) */
.footer .grid-3>div:last-child {
    justify-content: center;
    align-items: center;
    /* Center everything horizontally */
    text-align: center;
}

/* Specific fix for the Contact Us text */
.footer .grid-3>div:last-child h3 {
    text-align: center !important;
    width: 100%;
}

.footer .grid-3>div:last-child ul {
    text-align: center !important;
    width: 100%;
}

.footer .grid-3>div:last-child .footer-links {
    text-align: center !important;
}

.footer .grid-3>div:last-child li {
    justify-content: center;
    /* If list items are flex */
    display: block;
    /* Ensure straightforward stacking */
}

/* Ensure footer links in right column align left */
.footer .grid-3>div:last-child .footer-links {
    text-align: left !important;
}

.footer h3 {
    color: var(--white);
    margin-bottom: 0.3rem;
    /* Tighter heading margin */
    font-size: 1rem;
    /* Smaller headings */
}

.footer p {
    color: #cccccc;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.footer-links li {
    margin-bottom: 0.1rem;
    /* Very tight list items */
}

.footer-links a {
    color: #cccccc;
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.8rem;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    margin-top: 0.5rem;
    /* Minimal separation */
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.75rem;
    /* Tiny copyright text */
    color: rgba(255, 255, 255, 0.7);
}

/* Simple Slideshow - FIXED */
.slideshow-container {
    position: relative;
    height: 400px;
    /* Fixed height matches previous image */
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* z-index: 0; */
    /* Default stack level */
}

/* Make sure the active slide is visible and on top */
.slide.active {
    opacity: 1;
    /* z-index: 1; */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Testimonial Slider */
.testimonial-slider {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.testimonial-text {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.testimonial-author {
    font-weight: 600;
    color: var(--primary-royal-blue);
}