/* --- 1. GLOBAL VARIABLES (CHANGE COLORS HERE) --- */
:root {
    --primary-color: #ffffff; /* Dark text */
    --color-red: #E63946;
    --color-blue: #457B9D;
    --color-green: #588157;
    --color-yellow: #FFB703;
    --light-background: #F1FAEE; /* A very light, calming green */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
}

/* --- 2. RESET & BASICS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-blue); /* Dark text for readability */
    /* This is a fallback color in case the image can't be loaded */
    background-color: var(--light-background); 
    /* The subtle texture is fine, but the full-page image should be set to the body in CSS */
    background-image: url('images/background-blur.png'); /* Using the full-page background image path */
    background-size: cover;          /* Ensures the image covers the entire viewport */
    background-repeat: no-repeat;    /* Prevents the image from tiling */
    background-attachment: fixed;    /* Keeps the image fixed while content scrolls over it */
    background-position: center center; /* Centers the image */
    overflow-x: hidden;
}

/* --- 3. TYPOGRAPHY --- */
h1, h2, h3 { font-family: var(--font-heading); }
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-yellow);
    margin: 10px auto 0;
}


/* ------------------------------------------- */
/* --- 4. NAVIGATION (IMPROVED STICKY/SCROLL) --- */
/* ------------------------------------------- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: #54a4ee;
    position: fixed;
    width: 100%;
    z-index: 1000;
    /* *** IMPORTANT CHANGE HERE ***
       Add 'transform' to ensure smooth sliding 
    */
    transition: background 0.4s, box-shadow 0.4s, transform 0.3s ease-in-out;
}

/* Class applied by JavaScript to hide the navbar */
.navbar-hidden {
    transform: translateY(-100%);
}

/* Logo Styling */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700; 
    font-family: var(--font-heading);
}
.logo-img {
    height: 100px; /* **Increased Logo Size** for better visibility */
    margin-right: 0.5rem;
}

.logo-text {
    /* Logo text color is set by the inline styles in HTML, which is fine */
    line-height: 1.2;
}

/* NEW: Container for logo text and slogan */
.logo-text-container {
    display: flex;
    flex-direction: column;
}

/* NEW: Slogan styling */
.logo-slogan {
    font-size: 0.7rem; /* Smaller font size for the slogan */
    text-align: right;
    font-weight: 700; 
    font-family: var(--font-heading);
    color: var(--color-red) !important;
    margin-top: -5px; /* Pulls the slogan closer to the logo text */
}

.logo-slogan span {

    text-shadow: 
        /* Top-left highlight (simulates light source) */
        1px 1px 2px rgba(255, 255, 255, 0.7), 
        /* Bottom-right darker shadow (simulates depth/cast shadow) */
        -1px -1px 2px rgba(0, 0, 0, 0.5),
        /* Central subtle glow/shine */
        0 0 10px rgba(255, 255, 255, 0.4); 

    /* Add a slight 3D perspective effect (optional) */
    transform: perspective(500px) translateZ(0); /* Add a tiny bit of perceived depth */
    transition: all 0.2s ease-out; /* Smooth transition for potential hover effects */
}

/* --- Shiny Effect for Logo Text --- */
.logo-text span {
    /* Existing filter: brightness(1.2); if you have a dark navbar */

    /* Add multiple text shadows to simulate highlights and depth */
    text-shadow: 
        /* Top-left highlight (simulates light source) */
        1px 1px 2px rgba(255, 255, 255, 0.7), 
        /* Bottom-right darker shadow (simulates depth/cast shadow) */
        -1px -1px 2px rgba(0, 0, 0, 0.5),
        /* Central subtle glow/shine */
        0 0 10px rgba(255, 255, 255, 0.4); 

    /* Add a slight 3D perspective effect (optional) */
    transform: perspective(500px) translateZ(0); /* Add a tiny bit of perceived depth */
    transition: all 0.2s ease-out; /* Smooth transition for potential hover effects */
}

/* Optional: Make it "pop" more on hover */
.logo-text span:hover {
    text-shadow: 
        1px 1px 3px rgba(255, 255, 255, 0.9), 
        -1px -1px 3px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(255, 255, 255, 0.6);
    transform: perspective(500px) translateZ(5px) scale(1.02); /* Bring it forward */
}

/* NEW: Wrapper for social and nav links */
.nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align items to the right */
}

/* Nav Links Styling */
.nav-links {
    list-style: none;
    display: flex;
    flex-shrink: 0;
}

/* Nav Links - Ensure colors are dark since the background is light */
.nav-links li a {
    text-decoration: none;
    color: var(--primary-color); /* Dark text color */
    margin-left: 3rem;
    font-weight: 900;
    font-size: large;
    transition: color 0.3s;
}
/* Link hover transition */
.nav-links li a:hover { 
    color: var(--color-yellow); /* Bright hover color */
}

/* Contact Button */
.btn-contact {
    padding: 0.5rem 1.5rem;
    background: var(--color-red);
    color: white !important;
    border-radius: 4px;
    font-weight: 600; /* Added emphasis */
    transition: background 0.3s;
    border: none; /* Ensure no default border */
}
.btn-contact:hover { 
    background: var(--color-blue); 
}

/* ------------------------------------------- */
/* ** NEW: Navigation Scroll Down State (Added via JS) ** */
/* ------------------------------------------- */
.navbar.scrolled {
    background: #ffffff; /* **Solid white background when scrolled** */
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.navbar.scrolled .nav-links li a {
    color: var(--primary-color); /* **Change links to dark text when scrolled** */
}

.navbar.scrolled .nav-links li a:hover {
    color: var(--color-blue);
}

/* Mobile Menu Burger */
.burger {
    display: none;
    cursor: pointer;

}
.burger div {
    width: 25px;
    height: 3px;
    background-color: white; /* **White Burger for initial transparent state** */
    margin: 5px;
    transition: all 0.3s ease;
}

.navbar.scrolled .burger div {
    background-color: var(--primary-color); /* **Dark Burger when scrolled down** */
}

.navbar.scrolled .social-links a {
    color: var(--primary-color); /* Make social icons dark on scroll */
}

.navbar.scrolled .logo-slogan {
    color: var(--color-blue); /* Make slogan dark on scroll */
}


/* Burger 'X' animation (No change needed) */
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
    opacity: 0;
}
.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* --- 5. HERO SLIDESHOW --- */
header {
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* Added padding-top to ensure content is below the fixed navbar */
    padding-top: 0; 
}

.hero-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.slide::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.55); /* **Slightly darker overlay** for better text contrast */
    z-index: 2; /* Increased Z-index */
}
.slide.active { opacity: 1; }

.hero-content {
    position: absolute;
    z-index: 50; /* **Higher Z-index** to sit above the overlay */
    top: 55%; /* Slightly lower to accommodate logo/nav */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    width: 90%;
    color: var(--primary-color); /* Change to dark text for contrast against light backgrounds */
    text-shadow: none; /* Remove text shadow */
}

.hero-content h1 { 
    font-size: 4rem; 
    margin-bottom: 1rem; 
    text-shadow: 0 3px 10px rgba(0,0,0,0.5); /* **Stronger shadow for text** */
    color: var(--primary-color);
}
.hero-content p { 
    font-size: 1.2rem; 
    margin-bottom: 2rem; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    color: var(--primary-color);
}

.cta-button {
    padding: 1rem 2rem;
    background: var(--color-red);
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.3s, background 0.3s;
    display: inline-block;
    border-radius: 5px; /* Added rounded corners */
}
.cta-button:hover { 
    background: var(--color-blue); 
    transform: scale(1.05); 
}

/* --- 6. SECTIONS --- */
.section-pad  {
    padding: 2rem 0rem;
}
.bg-light { background-color: var(--light-background); }
.bg-dark { background-color: var(--color-blue); }
.container { max-width: 1500px; margin: 0 auto; }

/* About */
.about-grid {
    background: rgba(255, 255, 255, 0.95); /* **Slightly less transparent** for better contrast */
    padding: 3rem; /* Added padding to the grid container itself */
    border-radius: 8px; /* Added slight border radius */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    color: var(--color-blue);
}
.about-image img { width: 100%; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* Services (Card is already using rgba(255, 255, 255, 0.9) - looks great!) */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    color: var(--color-blue);
}
.card {
    background: rgba(255, 255, 255, 0.95); /* **Using 95% opacity** */
    padding: 2rem;
    text-align: center;
    border-radius: 8px; /* Added slight border radius */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Slightly stronger shadow for better lift */
    transition: transform 0.3s;
}
.card:hover { transform: translateY(-10px); }
.card:nth-child(4n+1):hover { border-bottom: 3px solid var(--color-red); }
.card:nth-child(4n+2):hover { border-bottom: 3px solid var(--color-blue); }
.card:nth-child(4n+3):hover { border-bottom: 3px solid var(--color-green); }
.card:nth-child(4n+4):hover { border-bottom: 3px solid var(--color-yellow); }

.card h3 { margin-bottom: 1rem; }

/* Gallery (No changes needed) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.gallery-item {
    overflow: hidden;
    cursor: pointer;
    height: 300px;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Added subtle shadow */
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.gallery-item:hover img { transform: scale(1.1); }
.subtitle { text-align: center; margin-bottom: 2rem; color: #777; }

/* Contact (No changes needed) */

.contact {
    color: var(--primary-color);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: none;
    background-color: #fff;
    font-family: inherit;
    border-radius: 4px;
}
.contact-form button {
    padding: 1rem 2rem;
    background: var(--color-yellow);
    border: none;
    color: var(--color-blue);
    cursor: pointer;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.3s;
}
.contact-form button:hover {
    background: var(--color-green);
}

.contact-info h3 { color: var(--primary-color); margin-bottom: 1rem; }
.contact-info p { margin-bottom: 0.5rem; color: var(--primary-color); }

#contact .section-title {
    color: white; /* Ensures readability against the dark background */
}


footer { 
    text-align: center; 
    padding: 2rem; 
    background: #222; 
    color: #888; 
}

/* --- 7. LIGHTBOX (No changes needed) --- */
.lightbox {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; top: 0;
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.9); 
}
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid white;
}
.close {
    position: absolute;
    top: 20px; right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* --- Core Values Section Styles (3 Boxes) --- */
#core-values {
    background-color: #f8f8f8; /* Light background for contrast */
}

.core-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: flex-start; /* Ensure columns start from the same line */
}

.core-value-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Important for consistent height calculation */
}

.core-value-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.core-value-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #2465cd; /* Active blue color */
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.icon-core-value {
    font-size: 3em;
    color: #0F9D58; /* Active green color */
}

.card-link {
    display: inline-block;
    margin-top: 15px;
    color: #DB4437; /* Active red color */
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

.icon-large {
  font-size: 48px; /* Or another size */
  margin-bottom: 15px;
  color: var(--color-blue) /* Example color */
}



/* Media Query for smaller screens */
@media (max-width: 768px) {
    .core-values-grid {
        grid-template-columns: 1fr; /* Single column on tablets/mobile */
        gap: 20px;
    }

    /* --- RESPONSIVE NAVBAR STACKING --- */
    .navbar {
        flex-direction: column; /* Stack logo and nav-wrapper */
        align-items: flex-start; /* Align items to the left */
    }

    .logo {
        margin-bottom: 1rem; /* Space between logo and nav items */
    }

    .nav-wrapper {
        width: 100%; /* Allow wrapper to take full width */
        align-items: flex-start; /* Align its content left */
    }

    .social-links {
        justify-content: flex-start; /* Align social icons to the left */
        padding-right: 0;
    }

    .nav-links {
        margin-top: 1rem; /* Add space above nav links */
    }
}

/* --- 8. MOBILE RESPONSIVE --- */
@media screen and (max-width: 768px) {
    body { overflow-x: hidden; }
    .nav-links {
              display: none;
        margin-top: 0; 
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: var(--color-yellow);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%; /* **Increased width for better menu readability** */
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        z-index: 1000;
    }
    .nav-links li { 
        opacity: 0; 
        margin: 1rem 0; /* **Added vertical spacing** */
    }
    .nav-links li a {
        color: var(--color-blue); /* **Ensure dark links on white mobile menu** */
    }
    
        .burger { 
        display: block; 
        margin-right: 0; 
        /* ADD THIS FOR VERTICAL ADJUSTMENT */
        position: relative; 
        top: 15px; /* Adjusts the burger 25px down relative to its normal position */
        /* You may need to tweak the 25px value. 
           Start with 25px and increase or decrease until it centers 
           between the top and bottom of your 100px logo area. */
    }/* Adjusted margin for better spacing */
    
    .nav-active { transform: translateX(0%); }
    
    @keyframes navLinkFade {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0px); }
    }
    
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.1rem; }
    .about-grid, .contact-wrapper { grid-template-columns: 1fr; }
    .about-text { order: 2; } /* **Text below image on mobile** */
    .about-image { order: 1; }
}

/* --- Styling for the Activity Cards Grid (in #services) --- */

/* 1. Sub-Section Title Styling */
.subsection-title {
    font-size: 2rem;
    color: var(--primary-color); /* Dark text for light background */
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-blue);
    display: inline-block; /* Makes the border line only as wide as the text */
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

/* 2. Grid Layout for Activities */
.activities-list {
    display: grid;
    /* Create a responsive 3-column layout that collapses on small screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    text-align: center;
}

/* 3. Individual Activity Card Styling */
.activity-item {
    background: #ffffff;
     text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 5px solid var(--color-yellow); /* Bright top border accent */
}

.activity-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 4. Activity Title and Icon Styling */
.activity-item h4 {
    display: flex; /* Aligns icon and text */
    align-items: center;
    font-size: 1.3rem;
    color: var(--color-blue); /* Dark primary color for title */
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 700;
    text-align: center;
    justify-content: center;
}

.activity-item .icon-small {
    font-size: 1.5rem;
    color: var(--color-red); /* Accent color for the icon */
    margin-right: 0.5rem;
}

/* 5. Activity Description Text */
.activity-item p {
    color: var(--text-color); /* Neutral body text color */
    font-size: 1rem;
    line-height: 1.5;
   text-align: center; /* Ensures the description text is centered */
}

/* --- NEW: Social Media Links Styling --- */
.social-links {
    display: flex;
    justify-content: flex-end; /* Align to the right */
    width: 100%;
    padding-right: 1.5rem; /* Match the contact button's padding */
    margin-bottom: 1rem; /* Space between social and nav links */
    gap: 0.75rem;
}

.social-links a {
    color: white; /* Default white color for transparent navbar */
    font-size: 2rem; /* Large size for visibility */
    transition: color 0.3s, transform 0.3s;
    text-decoration: none; /* Ensure no underline */
    padding-right: 1rem;
}

/* Hover effects for a fun look */
.social-links a:hover {
    transform: scale(1.15); /* Pop out on hover */
}

/* Specific color hover effects (optional but recommended for flair) */
.social-links a .fa-instagram:hover {
    color: #C13584; /* Instagram's brand color */
}

.social-links a .fa-facebook-f:hover {
    color: #4267B2; /* Facebook's brand color */
}


/* If you have a dark navbar, ensure the icons are white */
/* Example for a dark navbar background: */
.navbar[style*="background: #222"] .social-links a {
    color: white; 
}

/* --- NEW: Full-Width Banner Style for #about --- */

/* 1. Force the section to stretch edge-to-edge and apply color/text styles */
.about-banner-style {
    /* Use the color-blue for a striking, full-width background */
    background-color: var(--color-blue); 

    text-align: center;
    color: var(--primary-color); /* White text for contrast */
}

/* 2. Hide the original section title, as the banner text is the main title */
.about-banner-style .section-title {
    display: none;
}

/* 3. Style the content inside the banner */
.banner-content {
    /* Set a max-width to keep the text readable, even if the banner is full-width */
    max-width: 1400px; 
    margin: 0 auto;
}

/* 4. Make the text big and bold horizontally */
.banner-content p {
    font-size: 2rem; /* Larger font size */
    font-weight: 700; /* Bold text */
    line-height: 1.5;
    /* Optional: Slightly reduce letter spacing for aesthetic on large banners */
    letter-spacing: 0.5px; 
}

/* Cleanup: Remove old grid styles for the about section */
.about-grid {
    /* These styles are no longer needed for the banner layout */
    display: block; /* Override grid layout */
    padding: 0;
    box-shadow: none;
    background: transparent;
}

/* Remove old about image styles */
.about-image {
    display: none;
}

/* --- NEW: Phone Number Badge in Navbar --- */

.nav-contact-badge {
    /* Center the badge in the available space on desktop */
    position: absolute;
    left: 70%;
    transform: translateX(-0%);
    display: flex;
    align-items: center;
    /* Ensure it doesn't get hidden behind other elements */
    z-index: 1;
}

.nav-contact-badge a {
    background-color: var(--color-yellow);
    color: var(--color-blue);
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid transparent;
}

.nav-contact-badge a:hover {
    background-color: #fff;
    border-color: var(--color-yellow);
    transform: scale(1.05);
}

.nav-contact-badge a i {
    margin-right: 8px;
}


/* On mobile, move it inside the slide-out menu */
@media screen and (max-width: 768px) {
    .nav-contact-badge {
        /* Reset desktop positioning */
        position: static;
        transform: none;

        /* Place it at the top of the mobile menu */
        order: -1; 
        margin: 0 0 1.5rem 0;
        justify-content: center;
        width: 100%;
    }
}

/* On smaller mobile screens, hide it from the main bar to prevent overlap */
@media screen and (max-width: 768px) {
    .navbar > .nav-contact-badge {
        display: none;
    }
    
    /* And ensure it's visible inside the opened menu */
    .nav-wrapper .nav-contact-badge {
        display: flex;
    }
}

/* --- NEW CLASS FOR SCALING DOWN ITEMS ONLY ON ABOUT PAGE --- */

.about-item-shrink {
    /* Sets the base font size for this container to 90% of the normal base size. 
       This shrinks all headings, paragraphs, padding, and margins defined in 'rem' units. */
    font-size: 80%; 
}

/* Targeting the phone link inside the contact info block */
.contact-info p a[href^="tel:"] {
    /* Sets the color to match the text around it (e.g., white if the parent is dark) */
    color: inherit; 
    
    /* Removes the underline often applied to links */
    text-decoration: underline; 
}