/* Global Styles & Variables */
:root {
    --primary-color: #7d8c7c; /* Sage Green - Calming & Natural */
    --secondary-color: #f4f1ea; /* Cream - Soft Background */
    --text-dark: #2c2c2c; /* Charcoal - Softer than black */
    --text-light: #666666; /* Muted text */
    --white: #ffffff;
    --font-primary: 'Poppins', sans-serif;
    --transition-speed: 0.3s;
}

body {
    font-family: var(--font-primary);
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

/* Helper Classes */
.btn-primary-custom {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    border: 2px solid var(--primary-color);
    transition: all var(--transition-speed);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.btn-primary-custom:hover {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.section-padding {
    padding: 80px 0;
}

.text-muted-custom {
    color: var(--text-light);
}

/* Header & Navigation */
.navbar {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03);
    transition: all var(--transition-speed);
}

.navbar-brand img {
    height: 100px; /* Significantly increased for high visibility */
    width: auto;
    object-fit: contain;
    transition: height var(--transition-speed);
}

@media (max-width: 768px) {
    .navbar-brand img {
        height: 70px; /* Larger on mobile as well */
    }
}

.nav-link {
    color: var(--text-dark) !important;
    font-weight: 500;
    margin-left: 20px;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.navbar-toggler {
    border: none;
    box-shadow: none !important;
}

/* Hero Section */
.hero-section {
    background-color: var(--secondary-color);
    min-height: 90vh; /* Full viewport height minus header roughly */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 500px;
}

.hero-img-custom {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 500px 500px 0 0; /* Creates a perfect semi-circle/arch top */
    display: block;
    margin-left: auto;
    /* Blending techniques */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
    box-shadow: 0 -15px 30px rgba(0,0,0,0.02); /* Very soft shadow at the top curve */
}

/* About Section */
.about-img {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    width: 100%;
    height: 400px;
    object-fit: cover;
    background-color: #e0e0e0; /* Placeholder color */
}

/* Classes Section */
.class-card {
    background: var(--white);
    border: none;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    height: 100%;
}

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

.icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Call to Action */
.cta-section {
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
}

.cta-section h2 {
    color: var(--white);
}

.btn-light-custom {
    background-color: var(--white);
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 500;
    border: 2px solid var(--white);
    transition: all var(--transition-speed);
}

.btn-light-custom:hover {
    background-color: transparent;
    color: var(--white);
}

/* Footer */
footer {
    background-color: #fafafa;
    padding: 50px 0 20px;
    color: var(--text-light);
}

.footer-logo {
    height: 80px; /* Increased to match header prominence */
    margin-bottom: 20px;
    opacity: 0.8;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--text-dark);
    margin-right: 10px;
    transition: all var(--transition-speed);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .navbar-collapse {
        background: var(--white);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-top: 10px;
    }
    
    .nav-link {
        margin-left: 0;
        padding: 10px 0;
    }

    .hero-img-custom {
        height: 400px;
        width: 80%;
        margin: 40px auto 0;
        border-radius: 150px 150px 0 0;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
        padding: 120px 0 80px;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        margin: 0 auto 2rem;
    }

    .section-padding {
        padding: 60px 0;
    }

    /* Logo centering on mobile */
    .navbar-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .navbar-toggler {
        z-index: 10;
    }

    .hero-img-custom {
        /* Ensure it shows on mobile if desired, or keep it hidden as per original d-none d-lg-block logic. 
           Wait, the HTML has d-none d-lg-block on the parent col. 
           If the user wants it to be seen, they might need to remove that class. 
           For now I will respect the existing responsiveness which hides it on mobile to save space, 
           unless the user asked for it to be visible everywhere. 
           The request was just "blend it properly". 
           I'll keep the standard responsive hiding for small screens to prevent clutter, 
           but I've added CSS just in case they decide to show it later. */
    }
}