@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200;400;700;800&display=swap');

/* 1. CSS VARIABLES & ROOT SETTINGS */
:root {
    --bg: #ffffff;
    --surface: #f8f8f8;
    --accent: #ff1f1f;
    --accent-glow: rgba(255, 31, 31, 0.2);
    --text: #1a1a1a;
    --text-dim: #666666;
    --border: rgba(0, 0, 0, 0.08);
    --transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    --nav-bg: rgba(5, 5, 5, 0.95);
}

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

body {
    font-family: 'Gemunu Libre', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.4;
    overflow-x: hidden;
    /* Subtle Grid Background */
    background-image: 
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* 3. NAVIGATION */
.nav {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 5%;
    height: 90px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000;
    background: var(--nav-bg); 
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Container for the right-side elements */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px; /* Spacing between search, button, and menu */
}

/* Styling for your custom PNG icons */
.custom-icon {
    width: 24px;   /* Adjust size as needed */
    height: 24px;
    object-fit: contain;
    transition: var(--transition);
    /* If your PNG is black and you want it white to match your nav: */
    filter: brightness(0) invert(1); 
}

/* Hover effect for the PNGs */
.nav-icon:hover .custom-icon {
    transform: scale(1.1);
    /* Change PNG color to your red accent on hover */
    filter: invert(24%) sepia(93%) saturate(6851%) hue-rotate(358deg) brightness(108%) contrast(114%);
}

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

/* Styling for the icons */
.nav-icon {
    color: #ffffff;
    font-size: 1.3rem;
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Specific styling for the Menu Trigger to make it stand out */
.menu-trigger {
    margin-left: 10px;
    padding: 8px;
  }

.menu-trigger:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
}

  

.logo-brand { position: relative; width: 60px; height: 1px; }

.logo-circle {
    width: 130px; height: 130px;
    background: #000;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    border: 2px solid var(--bg);
    position: absolute; top: -30px; left: -20px;
    transition: var(--transition);
 }

.logo-circle:hover { transform: scale(1.1)  ; }
.logo-circle img { width: 90%; object-fit: contain; }

.nav-links { display: flex; list-style: none; gap: 2.5rem; }
.nav-links a { 
    text-decoration: none; color: #ffffff; 
    font-weight: 400; font-size: 0.9rem; letter-spacing: 1.5px; 
    transition: var(--transition);
    position: relative;
}

.nav-links a::after {
    content: ''; position: absolute; bottom: -5px; left: 0;
    width: 0%; height: 1px; background: var(--accent);
    transition: var(--transition);
}

.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--accent); }

/* 4. BUTTONS */
.btn { 
    padding: 1rem 2.2rem; border-radius: 80px; 
    cursor: pointer; font-weight: 700; transition: var(--transition);
    text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem;
    text-decoration: none; display: inline-block;
    border: none;
}

.btn.primary { background: var(--accent); color: white;      font-family: 'Gemunu Libre', sans-serif;
}
.btn.primary:hover { 
    background: #000; 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* PC Nav - Active Style */
.nav-links a.active {
    color: var(--accent);
}
.nav-links a.active::after {
    width: 100%; /* Shows the red underline */
}

/* Sidebar & Mobile - Active Style */
.sidebar-links a.active,
.mobile-nav-links a.active {
    color: var(--accent) !important;
    transform: translateX(15px); /* Mimics your sidebar hover shift */
}

.sidebar-links a.active::before {
    width: 15px; /* Shows the red dash indicator in sidebar */
}

/* 5. HERO SECTION */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
        margin-top: 100px;

    padding: 0 5%;
    z-index: 5;
    align-items: center;
}

.hero-content { flex: 1.2; padding-right: 50px; }

.hero-content h1 {
    font-size: 6rem;
    line-height: 0.85;
    font-weight: 800;
    text-transform: uppercase;
    margin: 5px 0;
    letter-spacing: -2px;
}

.subtitle { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; }
.description { color: var(--text-dim); max-width: 550px; margin-bottom: 40px; font-size: 1.2rem; }

/* Slanted Background with Depth */
.hero-bg-slant {
    position: absolute;
    top: 0; right: -10%;
    width: 50%; height: 100%;
    background: var(--accent);
    transform: skewX(-15deg);
    z-index: 1;
    transition: transform 0.2s ease-out; /* For smooth parallax */
}

/* Search Box - Advanced Glassmorphism */
.search-box {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 80px;
    padding: 10px;
    display: flex;
    width: fit-content;
    margin-bottom: 50px;
}

.search-box input {
    border: none; padding: 15px 25px; outline: none; width: 350px;
    font-family: inherit; font-size: 1.1rem; background: transparent;
}

/* Target the button specifically inside the search-box container */
.search-box .btn.primary {
    font-weight: 500!important;
    font-family: inherit;
    
}

/* Stats Area */
.stats { display: flex; gap: 50px; }
.stat-item { display: flex; align-items: center; gap: 15px; font-weight: 800; font-size: 1rem; }
.stat-item i { color: var(--accent); font-size: 1.5rem; }

/* 6. ADVANCED ANIMATIONS (REVEAL ENGINE) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: var(--transition);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* --- HERO IMAGE SECTION --- */
.hero-image {
    flex: 1;
    position: relative;
    z-index: 6;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-wrapper {
    position: relative;
    height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px; /* Enhanced 3D depth */
}

/* Base Slide Styling */
.slide {
    position: absolute;
    height: 100%;
    width: auto;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    
    /* Movie Mood: Initial state (Hidden/Entering) */
    transform: translateX(120px) scale(0.7) rotateY(-15deg); 
    transition: 
        opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Shadow for the character/student pngs */
 }

/* Active Slide Styling */
.slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
    
    /* Cinematic Entry: Centers, scales up, and levels out */
    transform: translateX(0) scale(1) rotateY(0deg);
    
    /* Starts floating only when active */
    animation: floatPersona 6s ease-in-out infinite;
}

/* Cinematic Floating Animation */
@keyframes floatPersona {
    0%, 100% { 
        transform: translateY(0) scale(1) rotate(0deg); 
    }
    50% { 
        transform: translateY(-25px) scale(1.03) rotate(1deg); 
    }
}

/* --- NEXT BUTTON CONTROL --- */
.next-control {
    position: absolute;
    bottom: 50px;
    right: 0;
    color: #ffffff;
    font-weight: 600;
    
    font-size: 0.9rem;
    letter-spacing: 2px;
    display: flex;    font-family: 'Gemunu Libre', sans-serif;

    align-items: center;
    gap: 12px;
    z-index: 10;
    cursor: pointer;
    background: rgba(5, 5, 5, 0.4);
    padding: 12px 25px;
    border-radius: 80px 0 0 80px; /* Stylish half-pill shape */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.next-control i {
    font-size: 1.1rem;
    
    color: var(--accent); /* Red theme color */
    transition: transform 0.4s ease;
}

.next-control:hover {
    background: var(--accent);
    transform: translateX(-10px);
}

.next-control:hover i {
    color: #fff;
    transform: translateX(5px);
}
@media (max-width: 768px) {
    .hero-bg-slant {
         transform: skewY(-5deg) !important; 
        
         transition: none !important; 
        
         pointer-events: none; 
    }
}
/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .hero-image {
        width: 100%;
        margin-top: 30px;
        overflow: visible; /* Prevents shadow clipping */
    }

    .slider-wrapper {
        height: 55vh; /* Larger for better mobile impact */
        perspective: 800px;
    }

    .slide {
        height: 100%;
        width: auto;
        /* Simpler transition for mobile performance */
        transform: translateX(50px) scale(0.8);
    }

    .slide.active {
        /* On mobile, we keep the float subtle */
        animation: floatPersonaMobile 5s ease-in-out infinite;
    }

    @keyframes floatPersonaMobile {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-15px) scale(1.02); }
    }

    .next-control {
        bottom: 10px;
        right: 10px;
        border-radius: 50px; /* Full pill for mobile */
        padding: 10px 20px;
        font-size: 0.8rem;
        background: var(--accent);
        box-shadow: 0 10px 20px var(--accent-glow);
    }
    
    .next-control i {
        color: #fff;
    }
}


 @media (max-width: 768px) {
    /* 1. Fix Hero Height & Padding */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 100px; /* Space for fixed mobile nav */
        display: block;
    }

    .container {
        flex-direction: column; /* Stack text over image */
        text-align: center;
        margin-top: 0;
    }

    /* 2. Scale Down Typography */
    .hero-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .hero-content h1 {
        font-size: 3.2rem; /* Reduced from 6rem */
        line-height: 0.95;
        margin: 15px 0;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .description {
        font-size: 1rem;
        margin: 0 auto 30px auto;
        max-width: 100%;
    }

    /* 3. Simplify Search Box for Mobile */
    .search-box {
        width: 100%;
        flex-direction: column;
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .search-box input {
        width: 100%;
        background: #f1f1f1;
        border-radius: 40px;
        margin-bottom: 10px;
        text-align: center;
    }

    .search-box .btn.primary {
        width: 100%;
    }

    /* 4. Adjust Stats */
    .stats {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .stat-item {
        font-size: 0.85rem;
    }

    /* 5. Handle the Background Slant & Image */
    .hero-bg-slant {
        width: 100%;
        height: 40%; /* Only covers the bottom section now */
        top: auto;
        bottom: 0;
        right: 0;
        transform: skewY(-5deg); /* Skew Y is better for vertical stacking */
        transform-origin: bottom right;
    }

    
}


/* 1. BUTTON WRAPPER */
.cta-action {
    position: relative;
    display: inline-block;
    padding: 20px;
    z-index: 10;
}

/* 2. THE BUTTON (Sinhala Text Styling) */
.btn-white-sketch {
    font-family: 'Gemunu Libre', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background: transparent;
    padding: 12px 35px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 80px;
    transition: var(--transition);
    position: relative;
    z-index: 2;
    display: inline-block;
}

.btn-white-sketch:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* 3. SVG SKETCH ANIMATION */
.apply-sketch {
    position: absolute;
    bottom: -15px; /* Adjust based on text alignment */
    left: 50%;
    transform: translateX(-50%);
    width: 220px; /* Slightly wider than the button */
    height: auto;
    pointer-events: none;
    z-index: 1;
}

/* The path starts hidden */
.apply-sketch path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger animation when the parent section becomes active */
.cta-section.active .apply-sketch path {
    stroke-dashoffset: 0;
}

/* Subtle pulse for the sketch on hover */
.cta-action:hover .apply-sketch {
    filter: drop-shadow(0 0 8px var(--accent-glow));
    transform: translateX(-50%) scale(1.05);
    transition: var(--transition);
}

/* 4. MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
    .btn-white-sketch {
        font-size: 1.1rem;
        padding: 10px 25px;
    }
    
    .apply-sketch {
        width: 180px;
        bottom: -10px;
    }
}

/* ==========================================
   1. DESKTOP SETTINGS (Hide Mobile Elements)
   ========================================== */
.mobile-nav, 
.mobile-menu-overlay {
    display: none; /* This ensures PC mode never shows mobile parts */
}

/* ==========================================
   2. MOBILE MODE (Triggered at 768px)
   ========================================== */
@media (max-width: 768px) {
    
    /* Hide your original PC Navbar */
    .nav {
        display: none !important;
    }

    /* Show Mobile Bar */
    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
        height: 70px;
        background: var(--nav-bg);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2000;
        backdrop-filter: blur(15px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 1. Position the brand container */
    .mobile-logo-brand {
        position: relative;
        width: 50px; /* Space holder */
        height: 10px;
        z-index: 2001;
    }

    /* 2. Re-create the black circle for mobile */
    .mobile-logo-brand .logo-circle {
        width: 90px;  /* Slightly smaller than desktop's 130px */
        height: 90px;
        background: #000;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--bg);
        
        /* This makes it "float" outside the 70px nav */
        position: absolute;
        top: -20px; 
        left: -5px;
        
        transition: var(--transition);
     }

    /* 3. Ensure the image fits inside the smaller circle */
    .mobile-logo-brand .logo-circle img {
        width: 80%;
        height: auto;
        object-fit: contain;
    }
    /* Icons on the Right */
    .mobile-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mobile-icon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    /* Re-using your PNG filter trick for mobile icons */
    .mobile-icon .custom-icon {
        width: 24px;
        height: 24px;
        filter: brightness(0) invert(1); /* Makes PNGs white */
        transition: var(--transition);
    }

    /* ==========================================
       3. FULL SCREEN MENU OVERLAY
       ========================================== */
    .mobile-menu-overlay {
        display: flex; /* Display flex now, but we hide it via transform */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #050505;
        z-index: 1999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%); /* Hidden to the right */
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .mobile-icon.menu-trigger {
        width: 45px;
        height: 45px;
        background: var(--accent); /* Your red color */
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: var(--transition);
        box-shadow: 0 4px 10px var(--accent-glow);
        border: 2px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-icon.menu-trigger:hover {
        background: #000; /* Turns black on hover */
        transform: scale(1.1);
    }

    /* Adjust the icon size inside the red circle */
    .mobile-icon.menu-trigger .custom-icon {
        width: 20px;
        height: 20px;
        /* Keep it white against the red background */
        filter: brightness(0) invert(1);
    }

    /* When JS adds the .active class */
    .mobile-menu-overlay.active {
        transform: translateX(0);
    }

    .mobile-nav-links {
        list-style: none;
        text-align: center;
        width: 100%;
    }

    .mobile-nav-links li {
        margin: 20px 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    /* Simple animation for links when menu opens */
    .mobile-menu-overlay.active .mobile-nav-links li {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.3s;
    }

    .mobile-nav-links a {
        color: white;
        text-decoration: none;
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .mobile-nav-links .btn.primary {
        margin-top: 20px;
        font-size: 1rem;
        padding: 15px 40px;
    }
}


/* ==========================================
   ENHANCED PC SIDEBAR (REFINED)
   ========================================== */
.pc-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: #050505;
    backdrop-filter: blur(20px);
    z-index: 3000;
    transition: var(--transition);
    padding: 50px 40px;
     display: flex;
    flex-direction: column;
}

.pc-sidebar.active {
    right: 0;
 }

 
.sidebar-content h3 {
    color: var(--accent); /* Using your #ff1f1f red */
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
/* 1. Ensure the header/parent is the reference point */
.sidebar-header {
    position: relative; /* This allows absolute positioning inside it */
    width: 100%;
    height: 50px; /* Give it some height so the button has a home */
    margin-bottom: 40px;
}

/* 2. Pin the button to the top-right corner */
.close-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    
    /* Your existing styles */
    width: 45px;
    height: 45px;
    background: var(--accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.5rem;
    box-shadow: 0 4px 15px var(--accent-glow);
    z-index: 10; /* Keep it on top */
}

.close-sidebar:hover {
    transform: rotate(90deg) scale(1.1); /* Added scale for extra pop */
    background: #ffffff;
    color: var(--accent);
}

/* --- 2. NAVIGATION LINKS --- */
.sidebar-content {
    flex-grow: 1;
}

.sidebar-links {
    list-style: none;
    padding: 0;
}

.sidebar-links li {
    margin: 25px 0;
}

.sidebar-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-block;
    letter-spacing: 1px;
    position: relative;
}

/* Red Hover Effect */
.sidebar-links a:hover {
    color: var(--accent);
    transform: translateX(15px);
}

/* Red Dash Indicator */
.sidebar-links a::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 50%;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: var(--transition);
}

.sidebar-links a:hover::before {
    width: 15px;
}

/* --- 3. FOOTER & SOCIALS --- */
.sidebar-footer {
    margin-top: auto;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer p {
    color: var(--accent) !important; /* THE RED COLOR */
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

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

.social-icons i {
    color: #ffffff;
    font-size: 1.3rem;
    transition: var(--transition);
    cursor: pointer;
}

.social-icons i:hover {
    color: var(--accent);
    transform: translateY(-5px);
}















/* ==========================================
   FEATURES SECTION STYLES
   ========================================== */

.features {
    padding: 100px 0;
    background: #ffffff; 
    position: relative;
    /* Ensure the section stays above background decorations */
    z-index: 5;
}

/* Responsive Grid System 
   Automatically adjusts columns based on screen size (min 300px per card)
*/
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}

/* Individual Feature Card 
   Uses transition variable for smooth hovering
*/
.feature-card {
    padding: 60px 40px;
    border-radius: 40px;
    text-align: center;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Hover Effect: Lifts card up and adds a soft shadow */
.feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

/* Icon Container Styling */
.feature-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Color Filter Logic: 
       Converts standard black icons into the Theme Red (#ff1f1f) 
    */
    filter: invert(24%) sepia(93%) saturate(6851%) hue-rotate(358deg) brightness(108%) contrast(114%);
}

/* Typography for Card Titles */
.feature-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text);
    text-transform: capitalize;
}

/* Card Body Text */
.feature-card p {
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Interactive "Learn More" Link 
   Includes an animated underline effect
*/
.learn-more {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 5px;
}

/* Decorative underline that expands on hover */
.learn-more::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0.3);
    transform-origin: left;
    transition: var(--transition);
}

.feature-card:hover .learn-more::after {
    transform: scaleX(1);
}
 
/* ==========================================
   MOBILE RESPONSIVE: FEATURES SECTION
   ========================================== */
@media (max-width: 768px) {
    .features {
        padding: 60px 0; /* Reduced padding for mobile */
    }

    /* Grid adjustment for single column stack */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5%;
    }

    .feature-card {
        padding: 40px 25px; /* Compact padding */
        border-radius: 30px; /* Slightly smaller radius */
        text-align: center; /* Ensures content stays centered */
    }

    /* TOPIC/HEADING: Standardized & Centered */
    .feature-card h3 {
        font-size: 1.8rem; /* Uniform size for all section topics */
        margin-bottom: 15px;
        width: 100%;
        text-align: center;
    }

    /* BODY TEXT: Standardized Size */
    .feature-card p {
        font-size: 1rem; /* Reduced uniform size for mobile descriptions */
        line-height: 1.5;
        margin-bottom: 25px;
    }

    /* Icon sizing for mobile */
    .feature-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    /* Interactive elements */
    .learn-more {
        font-size: 0.85rem;
    }
}



 /* ==========================================
   ABOUT SECTION STYLES
   ========================================== */

.about-section {
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden; /* Prevents decorative shapes from causing scrollbars */
}

.about-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
}

.about-content { 
    flex: 1; 
}

.about-content h2 {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    margin: 20px 0 30px;
    text-transform: capitalize;
    color: var(--text);
}

/* --- Button & SVG Sketch Logic --- */
.about-btn-wrapper {
    position: relative;
    display: inline-block;
    margin-top: 20px;
}

.btn-outline {
    padding: 15px 45px;
    border: 1px solid #ddd;
    border-radius: 50px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    display: inline-block;
    transition: var(--transition);
    background: transparent;
    z-index: 2;
    position: relative;
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.button-sketch {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    pointer-events: none;
    opacity: 0.8;
    z-index: 1;
}

/* SVG Path Animation: Draws the line on reveal */
.button-sketch path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 2s ease-in-out;
}

.about-content.active .button-sketch path {
    stroke-dashoffset: 0;
}

/* --- Image Composition & Shapes --- */
.about-images {
    flex: 1.2;
    position: relative;
    height: 550px;
}

.image-main {
    width: 80%;
    height: 450px;
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
 }

.image-overlay {
    width: 55%;
    height: 350px;
    border-radius: 30px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 10px solid #ffffff;
     z-index: 2;
    animation: floatOverlay 5s ease-in-out infinite;
}

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

/* Decorative Shapes Styling */
.shape-orange-circle {
    position: absolute;
    bottom: 30px;
    right: 15%;
    width: 80px;
    height: 80px;
    background: #ff6b4a;
    border-radius: 50%;
    z-index: 3;
}

.shape-yellow-ring {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    border: 25px solid #ffb800;
    border-radius: 50%;
    /* Creates the partial ring effect */
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
    z-index: 1;
}

/* Floating animation for the smaller overlay image */
@keyframes floatOverlay {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
/* ==========================================
   MOBILE RESPONSIVE: ABOUT SECTION
   ========================================== */
@media (max-width: 768px) {
    .about-section {
        padding: 60px 0; /* Mobile එකේදී padding අඩු කරමු */
    }

    .about-wrapper {
        flex-direction: column-reverse; /* මෙයින් Images ටික Title එකට උඩින් පෙන්වයි */
        gap: 40px;
        text-align: center;
    }

    /* 1. Images Area Adjustment */
    .about-images {
        width: 100%;
        height: 350px; /* Mobile එකේදී height එක සකස් කරමු */
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-main {
        width: 85%;
        height: 280px;
        position: relative;
        right: auto;
        top: 0;
        border-radius: 20px;
    }

    .image-overlay {
        width: 50%;
        height: 180px;
        bottom: 10px;
        left: 5%;
        border: 5px solid #ffffff; /* Thinner border for mobile */
        border-radius: 20px;
    }

    /* Decorative Shapes resize */
    .shape-orange-circle {
        width: 40px;
        height: 40px;
        right: 10%;
        bottom: 60px;
    }

    .shape-yellow-ring {
        width: 70px;
        height: 70px;
        border-width: 12px;
        right: 0;
        bottom: 20px;
    }

    /* 2. Content (Text) Area Adjustment */
    .about-content {
        width: 100%;
        padding: 0 5%;
    }

    .about-content h2 {
        font-size: 2.2rem; /* Mobile එකට ගැලපෙන size එක */
        line-height: 1.2;
        margin: 15px 0 20px;
    }

    .about-content .subtitle {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .description {
        font-size: 1rem;
        line-height: 1.5;
        margin: 0 auto 30px auto;
        max-width: 100%;
    }

    /* Button alignment */
    .about-btn-wrapper {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .btn-outline {
        padding: 12px 35px;
        font-size: 0.95rem;
    }
}






/* ==========================================
   COURSE CATEGORIES STYLES
   ========================================== */

.course-categories {
    padding: 100px 0;
    background: #ffffff;
    text-align: center;
}

/* Header layout for the category section */
.category-header { 
    margin-bottom: 60px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-header h2 { 
    font-size: 3.5rem; 
    font-weight: 800; 
    margin: 10px 0 0;
    color: var(--text);
}

/* Grid System: 4 Columns for Desktop */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    max-width: 1300px;
    margin: 0 auto 50px auto;
    padding: 0 5%;
}

/* Base Category Card Styling */
.cat-card {
    position: relative;
    height: 260px;
    background-color: var(--bg-color);
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition); /* Using the 0.7s cubic-bezier from root */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.02);
}

/* Icon Box Design */
.cat-icon {
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0,0,0,0.04);
    z-index: 2; /* Keeps icon above the hover image */
}

.cat-icon i {
    font-size: 2rem;
    color: var(--accent);
}

/* Content Container */
.cat-content {
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.cat-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.cat-card span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* --- Hover Effects --- */

.cat-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

/* Change text to white when background image appears */
.cat-card:hover h3, 
.cat-card:hover span {
    color: #ffffff;
}

/* Hidden Background Image Logic */
.cat-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    z-index: 1;
}

/* Dark Overlay for the background image to ensure text is readable */
.cat-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.cat-card:hover .cat-image {
    opacity: 1;
    transform: scale(1.1);
}

/* Footer Section */
.category-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ==========================================
   MOBILE RESPONSIVE: COURSE CATEGORIES
   ========================================== */
@media (max-width: 768px) {
    .course-categories {
        padding: 60px 0;
    }

    .category-header {
        margin-bottom: 40px;
        padding: 0 5%;
    }

    /* TOPIC/HEADING: Standardized & Centered */
    .category-header h2 {
        font-size: 2.1rem; /* Uniform size matched to previous sections */
        text-align: center;
        line-height: 1.2;
    }

    /* Grid adjustment: Switch to 1 column for mobile */
    .category-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5%;
    }

    /* Adjust Card Height for better mobile scrolling */
    .cat-card {
        height: 200px; /* Reduced from 260px for compact view */
        border-radius: 20px;
    }

    /* Scaling down card content */
    .cat-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 15px;
    }

    .cat-icon i {
        font-size: 1.5rem;
    }

    .cat-card h3 {
        font-size: 1.2rem;
    }

    .cat-card span {
        font-size: 0.75rem;
    }

    /* Footer Adjustment */
    .category-footer {
        margin-top: 30px;
    }
}



/* --- FAMOUS COURSES SECTION --- */
.famous-courses { 
    padding: 100px 0; 
    background: #fdfdfd; 
    width: 100%;
}

/* මේ කොටස අනිවාර්යයි - Container එකේ flex reset කරනවා */
.courses-container {
    display: flex !important;
    flex-direction: column !important; /* Title එක උඩට, Grid එක පල්ලෙහාට ගන්නවා */
    align-items: flex-start; /* Title එක වම් පැත්තටම ගන්නවා */
}

.category-header {
    width: 100%;
    margin-bottom: 50px;
    text-align: left;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC එකේදී හරියටම 4ක් පේළියට */
    gap: 30px;
    width: 100%;
}

/* --- CARD STYLES (Keep your existing styles but ensure these are added) --- */
.course-card {
    background: #ffffff;
    border-radius: 25px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.course-img-wrapper { 
    position: relative; 
    overflow: hidden; 
    height: 220px; 
}

.course-img-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: var(--transition); 
}

.course-info { 
    padding: 25px; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    transition: var(--transition); 
}

.course-info h3 { 
    margin: 15px 0 10px; 
    font-size: 1.5rem; 
    font-weight: 800;
}

.course-meta { 
    display: flex; 
    gap: 15px; 
    font-size: 0.9rem; 
    color: var(--text-dim); 
    margin: 20px 0; 
}

.course-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
}

.add-cart-btn {
    background: #ffffff;
    color: var(--accent);
    border: none;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 800;
    cursor: pointer;
    opacity: 0;
        font-family: 'Gemunu Libre', sans-serif;

    transform: translateY(10px);
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- THE HOVER TRANSFORMATION --- */
.course-card:hover {
    background: var(--accent);
    transform: translateY(-15px);
}

.course-card:hover .course-info h3,
.course-card:hover .course-info p,
.course-card:hover .course-meta,
.course-card:hover .course-meta i,
.course-card:hover .price {
    color: #ffffff !important;
}

.course-card:hover .add-cart-btn {
    opacity: 1;
    transform: translateY(0);
}
/* ==========================================
   MOBILE RESPONSIVE: FAMOUS COURSES (FULL CARD)
   ========================================== */
@media (max-width: 768px) {
    .famous-courses {
        padding: 60px 0;
        overflow: hidden;
    }

    /* TOPIC/HEADING: Centered & Standard Size */
    .courses-container {
        align-items: center !important;
        text-align: center;
        padding: 0; /* Remove padding to help centering */
    }

    .category-header h2 {
        font-size: 2.1rem; /* Uniform size */
        padding: 0 20px;
        margin-bottom: 30px;
    }

    /* THE SLIDER: Centers the card perfectly */
    .courses-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        /* Padding left/right must be equal to center the first and last card */
        padding: 0 7.5vw 40px 7.5vw; 
        scrollbar-width: none;
    }

    .courses-grid::-webkit-scrollbar {
        display: none;
    }

    /* THE CARD: Width adjusted so it's NOT cut off */
    .course-card {
        min-width: 85vw; /* Shows 85% of screen width */
        max-width: 85vw;
        scroll-snap-align: center; /* Snaps to the center of the screen */
        flex-shrink: 0;
        margin: 0;
        height: auto;
    }

    /* Image adjustment to prevent cropping */
    .course-img-wrapper {
        height: 200px;
    }

    /* Content Layout */
    .course-info {
        padding: 20px;
        text-align: left;
    }

    .course-info h3 {
        font-size: 1.4rem;
        margin: 10px 0;
    }

    .course-info p {
        font-size: 1rem; /* Standardized uniform body text */
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limits description to 2 lines to keep card height even */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Cart Button: Full Width on Mobile for better UX */
    .course-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
    }

    .add-cart-btn {
        opacity: 1;
        transform: translateY(0);
        position: relative;
        padding: 10px 20px;
        font-size: 0.9rem;
        font-weight: 500;
    }
}/* ==========================================
   MOBILE RESPONSIVE: FAMOUS COURSES FIX
   ========================================== */
@media (max-width: 768px) {
    /* 1. DISABLE HOVER TRANSFORMATION FOR MOBILE */
    .course-card:hover {
        background: #ffffff !important; /* Force background to stay white */
        transform: scale(1) !important; /* Stop the card from jumping/lifting */
    }

    /* 2. ENSURE TEXT STAYS DARK (Stop it from turning white) */
    .course-card:hover .course-info h3,
    .course-card:hover .course-info p,
    .course-card:hover .course-meta,
    .course-card:hover .course-meta i,
    .course-card:hover .price {
        color: var(--text) !important; 
    }

    /* 3. FIX THE IMAGE WRAPPER (Prevent red overlap) */
    .course-img-wrapper {
        height: 180px;
        border-radius: 25px 25px 0 0;
        overflow: hidden; /* This stops the red background from cutting into the image */
    }

    /* 4. MAKE THE CARD LOOK PREMIUM WITHOUT HOVER */
    .course-card {
        min-width: 85vw;
        max-width: 85vw;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.05); /* Soft border instead of hover */
        box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
    }

    /* 5. CART BUTTON: ALWAYS VISIBLE & STYLED FOR TOUCH */
    .add-cart-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
        background: var(--accent) !important;
        color: white !important;
        width: auto;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 0.9rem;
    }

    /* 6. FIX THE HEADER ALIGNMENT */
    .category-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .category-header h2 {
        font-size: 2.1rem; /* Uniform Topic Size */
        line-height: 1.2;
    }
}



/* --- CTA SECTION STYLES (Aligned to Core Theme) --- */
.cta-section {
    padding: 100px 0;
    width: 100%;
    background: var(--bg); /* Keeps it clean within the white page flow */
}

.cta-banner {
    /* Changed from Mint to Theme Black for a "Pro" look */
    background: #050505; 
    border-radius: 40px;
    padding: 80px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Added shadow to match your course cards */
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Decorative Circles - Now using Theme Red & White */
.cta-shape {
    position: absolute;
    background: var(--accent); /* Red theme color */
    border-radius: 50%;
    z-index: 1;
    opacity: 0.15; /* Subtler, more premium feel */
    filter: blur(40px); /* Glow effect instead of solid circles */
}

.shape-1 { width: 250px; height: 250px; bottom: -100px; left: -50px; }
.shape-2 { width: 150px; height: 150px; top: -50px; left: 20%; background: #ffffff; opacity: 0.05; }
.shape-3 { width: 200px; height: 200px; top: -60px; right: -40px; }

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-subtitle {
    color: var(--accent);
    font-weight: 800; /* Matching your Gemunu Libre heavy weights */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-size: 1rem;
}

.cta-title {
    font-size: 4rem; /* Matching Hero style */
    font-weight: 800;
    color: #ffffff; /* White text against dark background */
    line-height: 1;
    text-transform: uppercase;
}

.cta-title i {
    color: var(--accent);
    font-size: 2.8rem;
    margin-left: 10px;
}

/* Button & Sketch Style */
.cta-action {
    position: relative;
    z-index: 2;
}

/* Repurposing your Primary Button style for consistency */
.btn-cta {
    background: var(--accent);
    color: white;
    padding: 1.2rem 3rem;
    border-radius: 80px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    transition: var(--transition);
    box-shadow: 0 10px 30px var(--accent-glow);
}

.btn-cta:hover {
    background: #ffffff;
    color: var(--accent);
    transform: translateY(-5px);
}

.apply-sketch {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    pointer-events: none;
    filter: brightness(0) invert(1); /* Makes sketch white to pop on black */
    opacity: 0.6;
}

/* ==========================================
   MOBILE RESPONSIVE: CTA SECTION
   ========================================== */
@media (max-width: 768px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-banner {
        flex-direction: column; /* Stack text and button vertically */
        padding: 60px 30px; /* Compact padding for mobile */
        text-align: center;
        border-radius: 30px;
        gap: 40px; /* Space between text and button */
    }

    .cta-content {
        width: 100%;
    }

    /* SUBTITLE: Standardized */
    .cta-subtitle {
        font-size: 0.9rem;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    /* TOPIC/TITLE: Standardized 1.8rem & Centered */
    .cta-title {
        font-size: 1.8rem; /* Uniform size matched to all other sections */
        line-height: 1.2;
        text-align: center;
    }

    .cta-title i {
        font-size: 1.5rem; /* Scale down the icon */
        display: block; /* Moves icon to its own line for better mobile look */
        margin: 10px 0 0 0;
    }

    /* ACTION BUTTON: Centered */
    .cta-action {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-cta {
        padding: 1rem 2.5rem;
        font-size: 0.9rem;
        width: fit-content;
    }

    /* Fix the sketch underline for mobile */
    .apply-sketch {
        width: 130px;
        bottom: -35px;
    }

    /* Adjust decorative shapes so they don't crowd the text */
    .shape-1 { width: 150px; height: 150px; bottom: -50px; left: -30px; }
    .shape-3 { width: 120px; height: 120px; top: -30px; right: -20px; }
}




/* --- LIVE SESSIONS SECTION --- */
.live-sessions {
    padding: 100px 0;
    background: #fff0f0; /* Light pink background */
    overflow: hidden;
}

.live-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
}

.live-content { flex: 1; }

.live-content h2 {
    font-size: 4rem;
    font-weight: 800;
    margin: 20px 0;
    line-height: 1;
}

/* Features Icons Layout */
.live-features {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.live-feature-item {
    text-align: center;
    transition: var(--transition);
}

.feature-icon-box {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #000;
    transition: var(--transition);
}

.live-feature-item span {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: capitalize;
}

/* Feature Hover Effect */
.live-feature-item:hover .feature-icon-box {
    color: var(--accent);
    transform: translateY(-5px);
}

/* --- VIDEO MEDIA SIDE --- */
.live-media {
    flex: 1.2;
    position: relative;
}

.video-container {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.live-main-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Play Button & Animation */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
}

.play-circle {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--accent);
    position: relative;
    z-index: 6;
    transition: var(--transition);
}

.play-button-overlay:hover .play-circle {
    transform: scale(1.1);
    background: var(--accent);
    color: #fff;
}

/* Pulsing Animation for Play Button */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: play-pulse 2s linear infinite;
}

@keyframes play-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Responsive */
@media (max-width: 992px) {
    .live-wrapper { flex-direction: column; text-align: center; }
    .live-features { justify-content: center; }
    .live-content h2 { font-size: 3rem; }
}





/* --- ACHIEVEMENTS SECTION (Aligned to Core Theme) --- */
.achievements-section {
    padding: 120px 0;
    background: var(--bg);
}

.achievements-banner {
    /* Changed from light blue to your surface color or white for a cleaner look */
    background: var(--surface); 
    border-radius: 40px;
    padding: 80px;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--border);
}

/* Decorative Shapes - Using Theme Red */
.achieve-shape-red {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 140px;
    height: 140px;
    border: 35px solid var(--accent); /* Now Red */
    border-radius: 50%;
    /* Creates the partial ring effect matching your 'About' section */
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
    z-index: 1;
    opacity: 0.8;
}

.achieve-shape-dark {
    position: absolute;
    bottom: 20%;
    right: -25px;
    width: 60px;
    height: 60px;
    background: #000; /* Contrast black circle */
    border-radius: 50%;
    z-index: 1;
}

.achievements-content {
    flex: 1.5;
    position: relative;
    z-index: 5;
}

.achieve-title {
    font-size: 4.5rem; /* Massive Brutalist Heading */
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 10px 0 30px;
    color: var(--text);
    letter-spacing: -2px;
}

/* Stats Layout */
.achievements-stats {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    border-top: 2px solid var(--text); /* Stronger divider */
    padding-top: 40px;
}

.achieve-stat-item {
    flex: 1;
    position: relative;
}

.stat-number {
    font-size: 4rem; /* Matching your Hero weight */
    font-weight: 800;
    color: var(--accent); /* Red numbers make them "pop" */
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Gemunu Libre', sans-serif;
}

.achieve-stat-item p {
    font-weight: 800;
    color: var(--text-dim);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Vertical Divider for stats - Using Accent Glow */
.achieve-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border);
}

/* The Floating Image */
.achievements-image {
    flex: 1;
    position: relative;
    z-index: 6;
}

.achievements-image img {
    width: 100%;
    height: auto;
    border-radius: 40px; /* More rounded to match buttons */
    box-shadow: 0 40px 80px rgba(0,0,0,0.2);
    transform: translateY(-60px); /* Larger "pop" out effect */
    transition: var(--transition);
    border: 5px solid #ffffff;
}

/* Hover Effect */
.achievements-section:hover .achievements-image img {
    transform: translateY(-80px) rotate(2deg); /* Added a slight tilt */
}

/* Responsive */
/* ==========================================
   MOBILE RESPONSIVE: ACHIEVEMENTS SECTION
   ========================================== */
@media (max-width: 768px) {
    .achievements-section {
        padding: 60px 0;
    }

    .achievements-banner {
        flex-direction: column; /* Stack image and text */
        padding: 40px 20px;
        text-align: center;
        min-height: auto;
        border-radius: 30px;
        margin: 0 5%; /* Adds breathing room around the banner */
    }

    /* 1. IMAGE: Moves to top and scales down */
    .achievements-image {
        width: 100%;
        margin-bottom: 30px;
        order: -1; /* Forces image above the text content */
    }

    .achievements-image img {
        transform: translateY(0); /* Remove the desktop pop-out */
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        width: 90%;
        margin: 0 auto;
    }

    .achievements-section:hover .achievements-image img {
        transform: scale(1.02); /* Subtle scale instead of large jump */
    }

    /* 2. TOPIC/TITLE: Standardized 1.8rem & Centered */
    .achievements-content {
        width: 100%;
    }

    .achieve-title {
        font-size: 2.1rem; /* Uniform size matched to all other topics */
        line-height: 1.1;
        margin: 10px 0 20px;
        text-align: center;
        letter-spacing: 0;
    }

    .achievements-content .description {
        font-size: 1rem; /* Standardized uniform body text */
        line-height: 1.5;
    }

    /* 3. STATS: 2-Column Grid for Mobile */
    .achievements-stats {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two items per row */
        gap: 20px;
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid var(--border);
    }

    .stat-number {
        font-size: 2.2rem; /* Reduced to fit 2-column layout */
        margin-bottom: 0;
    }

    .achieve-stat-item p {
        font-size: 0.75rem; /* Compact labels */
        letter-spacing: 1px;
    }

    /* Remove the vertical dividers between stats */
    .achieve-stat-item:not(:last-child)::after {
        display: none;
    }

    /* Hide large decorative shapes on mobile to keep it clean */
    .achieve-shape-red, 
    .achieve-shape-dark {
        display: none;
    }
}






/* --- TESTIMONIAL SECTION (Aligned to Core Theme) --- */
.testimonial-section {
    padding: 120px 0;
    background: var(--bg);
}

.testimonial-banner {
    /* Swapped light green for a deep "Black Canvas" look */
    background: #050505; 
    border-radius: 40px;
    padding: 80px;
    position: relative;
    overflow: hidden;
    width: 100%;
     border: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonial-wrapper {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 5;
}

/* --- Image Side & Quote --- */
.testimonial-image-side {
    flex: 1;
    display: flex;
    justify-content: center;
}

.circle-image-container {
    position: relative;
    width: 380px;
    height: 380px;
}

.circle-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Swapped for a cleaner, high-end border */
    border: 10px solid var(--accent);
    padding: 10px;
    background: transparent;
}

.quote-icon {
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background: var(--accent); /* Now Theme Red */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #ffffff;
    box-shadow: 0 10px 30px var(--accent-glow);
    z-index: 10;
}

/* --- Content Side --- */
.testimonial-content {
    flex: 1.5;
}

.testi-title {
    font-size: 4rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    margin: 10px 0 25px;
    color: #ffffff; /* White text on dark background */
    letter-spacing: -1px;
}

.testi-text {
    font-size: 1.4rem;
    line-height: 1.6; /* Increased slightly for better readability */
    color: #e0e0e0;
    margin-bottom: 30px;
    max-width: 600px;
    font-style: italic;
    font-weight: 200;
    
    /* --- NEW: Text Breaking & Protection --- */
    overflow-wrap: break-word;  /* Standard breaking */
    word-wrap: break-word;      /* Legacy support */
    word-break: break-word;     /* Prevents layout break from long URLs/Strings */
    hyphens: auto;              /* Optional: adds hyphens where needed */
    
    /* --- Smooth Transition for JS switching --- */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}



/* Update for Mobile specifically */
@media (max-width: 768px) {
    .testi-text {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 20px;
        padding: 0 10px;
        
        /* --- NEW: Mobile Line Clamping --- */
        display: -webkit-box;
        -webkit-line-clamp: 6; /* Limits review to 6 lines on small screens */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* Adds "..." if it's too long */
    }
}

.testi-author {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 5px;
    color: #ffffff;
    text-transform: uppercase;
}

.author-role {
    font-weight: 700;
    color: var(--accent); /* Role in Red */
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.testi-rating {
    color: var(--accent); /* Red stars instead of yellow for brand consistency */
    font-size: 1.2rem;
    margin: 15px 0 35px;
}

/* --- Slider Dots --- */
.testi-dots {
    display: flex;
    gap: 12px;
}

.dot {
    width: 30px;
    height: 4px;
    background: #ffffff;
    border-radius: 0; /* Squared dots match your grid background */
    opacity: 0.2;
    transition: var(--transition);
    cursor: pointer;
}

.dot.active {
    width: 60px;
    background: var(--accent);
    opacity: 1;
}

/* --- Decorative Shapes (Brutalized) --- */
.testi-shape-red-top {
    position: absolute;
    top: -30px;
    left: 20%;
    width: 80px;
    height: 80px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.4;
    filter: blur(20px);
}

.testi-shape-outline-bottom {
    position: absolute;
    bottom: -60px;
    right: -20px;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* --- Responsive --- */
 /* ==========================================
   MOBILE RESPONSIVE: TESTIMONIAL SECTION
   ========================================== */
@media (max-width: 768px) {
    .testimonial-section {
        padding: 60px 0;
    }

    .testimonial-banner {
        padding: 60px 25px 40px; /* Reduced padding for mobile */
        border-radius: 30px;
        margin: 0 5%;
    }

    .testimonial-wrapper {
        flex-direction: column; /* Stack image over text */
        gap: 40px;
        text-align: center;
    }

    /* 1. IMAGE SIDE: Scaling down the circle */
    .testimonial-image-side {
        width: 100%;
    }

    .circle-image-container {
        width: 220px; /* Reduced from 380px */
        height: 220px;
    }

    .circle-image-container img {
        border-width: 6px; /* Thinner border for mobile */
    }

    .quote-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%); /* Centers quote icon on top of image */
    }

    /* 2. TOPIC/TITLE: Standardized 1.8rem & Centered */
    .testi-title {
        font-size: 1.8rem; /* Uniform size matched to all other topics */
        text-align: center;
        margin-bottom: 20px;
    }

 
    .testi-author {
        font-size: 1.1rem;
    }

    .testi-rating {
        margin: 10px 0 25px;
        font-size: 1rem;
    }

    /* 4. SLIDER DOTS: Centered */
    .testi-dots {
        justify-content: center;
        gap: 8px;
    }

    .dot {
        width: 20px;
        height: 3px;
    }

    .dot.active {
        width: 40px;
    }

    /* Hide decorative shapes that might cause overflow */
    .testi-shape-red-top,
    .testi-shape-outline-bottom {
        display: none;
    }
}


/* ==========================================
   ADVANCED FOOTER STYLES (v3.0)
   ========================================== */
.footer {
    background: #050505;
    padding: 100px 0 0 0; /* No bottom padding here; bottom-bar handles it */
    color: #ffffff;
    position: relative;
    border-top: 1px solid rgba(255, 31, 31, 0.2); /* Subtle Theme Glow */
}

/* 1. GRID LAYOUT - Best Aligned */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.8fr 1.5fr;
    gap: 60px;
    margin-bottom: 80px;
}

/* 2. TYPOGRAPHY & BRANDING */
.footer-column h3 {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 35px;
    color: var(--accent); /* Red Headlines */
}

.footer-desc {
    color: #999;
    line-height: 1.8;
    margin: 30px 0;
    font-size: 1rem;
    max-width: 320px;
}

.brand-col .logo-circle {
    position: relative;
    top: 0; left: 0;
    width: 90px;
    height: 90px;
    border: 2px solid var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* 3. INTERACTIVE LINKS */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 18px;
}

.footer-links a {
    color: #888;
    text-decoration: none;
    transition: var(--transition);
    font-weight: 500;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--accent);
    transform: translateX(10px);
}

/* 4. SOCIAL & NEWSLETTER (Modern Glass) */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: var(--accent);
    transform: translateY(-8px) rotate(8deg);
    border-color: var(--accent);
}

.footer-newsletter {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
    border-radius: 80px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition);
}

.footer-newsletter:focus-within {
    border-color: var(--accent);
}

.footer-newsletter input {
    background: transparent;
    border: none;
    padding: 0 20px;
    color: white;
    outline: none;
    flex: 1;
    font-family: inherit;
}
  /* ==========================================
   FOOTER BOTTOM BAR
   ========================================== */
.footer-bottom {
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #000000; /* Slightly darker than footer bg */
}

.bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0 !important; /* Resetting your container margin-top */
}

.copyright-text {
    color: #666;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 1px;
}

.copyright-text span {
    color: var(--accent); /* Your #ff1f1f Red */
    font-weight: 700;
}

.footer-bottom-links {
    display: flex;
    gap: 30px;
}
.newsletter-col p {
    margin-bottom: 25px;
    color: #999;
    line-height: 1.6;
}
.footer-bottom-links a {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: var(--transition);
}

.footer-bottom-links a:hover {
    color: #ffffff;
}
 /* ==========================================
   MOBILE OPTIMIZED STYLES (Center Aligned)
   ========================================== */
@media (max-width: 768px) {
    /* 1. Reset Padding & Global Alignment */
    .footer {
        padding: 60px 20px 0 20px;
        text-align: center;
    }

    /* 2. Stack Grid to 1 Column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        margin-bottom: 60px;
    }

    /* 3. Center Branding & Text */
    .brand-col .logo-circle {
        margin: 0 auto; /* Centers the circle logo */
    }

    .footer-desc {
        margin: 25px auto; /* Centers description block */
        max-width: 100%;
    }

    /* 4. Center Social Icons */
    .social-links {
        justify-content: center;
        margin: 0 auto;
    }

    /* 5. Newsletter Mobile Fix */
    .footer-newsletter {
        max-width: 350px;
        margin: 0 auto;
        flex-direction: column; /* Stacks input & button if they get too tight */
        border-radius: 20px;    /* Softer corners for stacked look */
        padding: 15px;
    }

    .footer-newsletter input {
        text-align: center;
        margin-bottom: 10px;
        width: 100%;
    }

    /* 6. Footer Bottom Bar */
    .bottom-container {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap; /* Prevents links from breaking layout */
        gap: 15px;
    }

    /* Remove the hover slide effect on mobile for better UX */
    .footer-links a:hover {
        transform: none;
    }
}










/* ==========================================
   REVIEW & FEEDBACK SECTION (FULLY FIXED & CENTERED)
   ========================================== */
.review-section {
    padding: 120px 0;
    background: #ffffff;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 1. THE CENTERED CONTAINER */
.review-section .container {
    max-width: 1300px; /* Limits width for better readability */
    width: 100%;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the Category Headers */
}

/* 2. CENTERED GRID LAYOUT */
.review-columns {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
    width: 100%;
    margin-top: 40px;
}

/* 3. LEFT SIDE: CENTERED SUBMISSION BOX */
.review-box {
    background: var(--surface);
    padding: 50px;
    border-radius: 40px;
    border: 1px solid var(--border);
    position: sticky;
    top: 120px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
    /* Internal form alignment */
    display: flex;
    flex-direction: column;
}

 
.review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review-form input, 
.review-form textarea {
    width: 100%;
    padding: 18px 25px;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.1);
    background: #ffffff;
    font-family: 'Gemunu Libre', sans-serif;
    font-size: 1.1rem;
    outline: none;
    transition: var(--transition);
}

.review-form input:focus, 
.review-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* 4. STAR RATING WRAPPER */
.rating-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spaced out for better look */
    background: #fff;
    padding: 12px 20px;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.05);
}

.rating-wrapper span {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
}

.star-rating input { display: none; }

.star-rating label {
    font-size: 1.5rem;
    color: #e0e0e0;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.star-rating label:hover { transform: scale(1.2); }

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--accent);
}

/* 5. RIGHT SIDE: REVIEWS FEED */
.reviews-feed {
    width: 100%;
}

.feed-container {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Custom Scrollbar */
.feed-container::-webkit-scrollbar { width: 5px; }
.feed-container::-webkit-scrollbar-track { background: transparent; }
.feed-container::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

/* 6. INDIVIDUAL REVIEW CARDS */
.mini-review-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 25px;
    border: 1px solid var(--border);
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.mini-review-card:hover {
    transform: translateX(15px);
    border-color: var(--accent);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.default-avatar {
    width: 55px;
    height: 55px;
    background: #f8f8f8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 2.3rem;
    border: 1px solid var(--border);
}

.user-info h4 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0;
    color: var(--text);
}

.stars-display {
    color: var(--accent);
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* 6. INDIVIDUAL REVIEW CARDS */
.mini-review-card p {
    font-size: 1.1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-style: italic;
    
    /* --- NEW ADDITIONS FOR LINE BREAKING --- */
    white-space: pre-wrap;       /* Respects manual line breaks/enters from the textarea */
    overflow-wrap: break-word;   /* Breaks long words if they don't fit */
    word-break: break-word;      /* Extra support for older browsers */
    hyphens: auto;               /* Optional: adds hyphens where words break */
    /* --------------------------------------- */
}
 /* Container for the review text */
.review-content {
    position: relative;
}

.mini-review-card p {
    font-size: 1.1rem;
    color: var(--text-dim);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    
    /* Truncation Logic: Limit to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
    
    /* Ensuring words break correctly */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* The "Read More" text appearance */
.read-more-btn {
    display: block;
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 700;
    margin-top: 5px;
    cursor: pointer;
    text-transform: uppercase;
}

/* EXPANDED STATE: When clicked */
.mini-review-card.expanded p {
    -webkit-line-clamp: unset; /* Show all lines */
    display: block; /* Reset from flex-box */
    overflow: visible;
}

.mini-review-card.expanded .read-more-btn {
    display: none; /* Hide button when already expanded */
}

/* Hover effect to show the card is clickable */
.mini-review-card {
    cursor: pointer;
}
 

/* Button Hover State */
.btn.primary:hover {
    background: #000; /* Changes to black or a darker shade on hover */
    transform: translateY(-5px);
 }

.btn.primary:active {
    transform: translateY(-2px);
}

/* The Sketchy Red Underline */
.button-sketch {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px; /* Slightly wider than the button */
    pointer-events: none; /* User can click through it to the button */
    z-index: 1;
}

.button-sketch path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 0.6s ease-in-out;
}

/* Animate the sketch when the user hovers over the button area */
.about-btn-wrapper:hover .button-sketch path {
    stroke-dashoffset: 0;
}
/* ==========================================
   MOBILE RESPONSIVE: REVIEW SECTION
   ========================================== */
@media (max-width: 768px) {
    .review-section {
        padding: 60px 0;
    }

    /* 1. Reset Grid to Single Column */
    .review-columns {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 30px;
    }

    /* 2. Adjust Submission Box */
    .review-box {
        padding: 30px 20px;
        border-radius: 30px;
        position: relative; /* Remove sticky on mobile for better scrolling */
        top: 0;
        width: 100%;
    }

    /* 3. Reduce Text Sizes */
    .review-form input, 
    .review-form textarea {
        padding: 15px;
        font-size: 1rem; /* Reduced from 1.1rem */
    }

    .rating-wrapper {
        flex-direction: column; /* Stack "Rate Us" and Stars */
        gap: 10px;
        text-align: center;
    }

    .rating-wrapper span {
        font-size: 0.8rem;
    }

    /* 4. Feed & Card Adjustments */
    .feed-container {
        max-height: 400px; /* Shorter scroll area for mobile */
        padding-right: 0;
    }

    .mini-review-card {
        padding: 20px;
        border-radius: 20px;
    }

    .mini-review-card:hover {
        transform: none; /* Disable horizontal lift on touch devices */
    }

    .user-info h4 {
        font-size: 1.1rem; /* Slightly smaller name */
    }

    .mini-review-card p {
        font-size: 0.95rem; /* Standardized mobile body text */
        line-height: 1.5;
    }

    /* 5. Button & Sketch Scaling */
    .btn.primary {
        padding: 15px 30px;
        font-size: 1rem;
    }

    .button-sketch {
        width: 180px; /* Scaled down to match smaller button */
        bottom: -20px;
    }
}


/* 5. RIGHT SIDE: REVIEWS FEED */
.reviews-feed {
    width: 100%;
    position: relative; /* Gradient එක track කරන්න අවශ්‍යයි */
}
.feed-container {
    max-height: 650px; /* පොඩ්ඩක් height එක වැඩි කළා balance වෙන්න */
    overflow-y: auto;
    padding-right: 20px;
    padding-bottom: 150px; /* අන්තිම card එක මැකීලා පේන්න පහළින් වැඩි ඉඩක් */
    display: flex;
    flex-direction: column;
    gap: 25px;

    /* Fade effect එක තදටම දෙන්න මෙන්න මේ අගයන් වෙනස් කරන්න */
    -webkit-mask-image: linear-gradient(to bottom, 
        black 0%, 
        black 40%, 
        transparent 95%
    );
    mask-image: linear-gradient(to bottom, 
        black 0%, 
        black 40%, 
        transparent 95%
    );
}

/* Scroll කරනකොට mask එක fix වෙලා තියෙන්න ඕනේ නම් මේකත් දාන්න */
.feed-container {
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Container for Date and Tag */
.review-status {
    margin-left: auto; /* Pushes it to the far right */
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Date Styling */
.review-date {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 500;
    opacity: 0.8;
}

/* Genuine Tag Styling */
.genuine-tag {
    font-size: 0.7rem;
    color: #27ae60; /* A nice "Genuine" Green */
    background: rgba(39, 174, 96, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.genuine-tag i {
    font-size: 0.8rem;
}

/* Mobile Adjustment for the new tag */
@media (max-width: 768px) {
    .user-meta {
        flex-wrap: wrap; /* Allows date to wrap if name is too long */
    }
    .review-status {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        border-top: 1px solid rgba(0,0,0,0.05);
        padding-top: 10px;
    }
}




/* 1. BUTTON FOOTER LAYOUT */
.testi-footer-action {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

/* 2. THE BUTTON (Brutalist White Border) */
.btn-white-sketch {
    font-family: 'Gemunu Libre', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    background: transparent;
    padding: 12px 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 80px;
    transition: var(--transition);
    position: relative;
    z-index: 5;
    display: inline-block;
}

.btn-white-sketch:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* 3. SVG SKETCHY UNDERLINE */
.cta-action {
    position: relative;
    display: inline-block;
}

.apply-sketch {
    position: absolute;
    bottom: -22px; 
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    pointer-events: none;
    z-index: 1;
}

/* The path starts invisible */
.apply-sketch path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate path when hovering over the wrapper */
.cta-action:hover .apply-sketch path {
    stroke-dashoffset: 0;
}

/* 4. MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .testi-footer-action {
        flex-direction: column; /* Stack dots and button */
        gap: 25px;
        text-align: center;
        justify-content: center;
    }

    .btn-white-sketch {
        font-size: 0.9rem;
        padding: 10px 25px;
        width: 100%; /* Full width on mobile for better touch */
    }

    .apply-sketch {
        width: 130px;
        bottom: -18px;
    }
}





/* ==========================================
   ARTICLE SECTION (Newspaper Style)
   ========================================== */
.article-section {
    padding: 10px 0;
    background: #fdfdfd;
}

.article-paper-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 40px;
    margin-top: 1px;
}

/* Main Large Article */
.main-article {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    display: flex;
    overflow: hidden;
    transition: var(--transition);
}

.main-article:hover {
     transform: translate(-5px, -5px);
}

.article-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--accent);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 5;
}

.main-article .article-content {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.article-date {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 15px;
    display: block;
}

.main-article h3 {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
}

.main-article p {
    color: var(--text-dim);
    margin-bottom: 30px;
    line-height: 1.6;
}

.main-article .article-img {
    flex: 0.8;
    background: #eee;
}

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

/* Read Button */
.read-btn {
    color: var(--accent);
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.read-btn i {
    color: var(--accent);
    transition: transform 0.3s ease;
}

.read-btn:hover i {
    transform: translateX(10px);
}

/* Side Mini Articles */
.side-articles {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mini-article {
    padding: 25px;
    background: #fff;
    border-radius: 20px;
    border-left: 5px  ;
    transition: var(--transition);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.mini-article:hover {
    background: var(--surface);
    transform: translateX(10px);
}

.mini-tag {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 1px;
}

.mini-article h4 {
    margin: 10px 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.mini-article p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.mini-article a {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
}

/* Custom class for the specific subtitle alignment */
.left-aligned-subtitle {
    text-align: left; /* Default: Left align */
    display: block;
    width: 100%;
}

/* Mobile Mood: Center it when the screen is small */
@media (max-width: 768px) {
    .left-aligned-subtitle {
        text-align: center;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .article-paper-grid {
        grid-template-columns: 1fr;
    }
    
    .main-article {
        flex-direction: column;
    }
    
    .main-article .article-img {
        height: 250px;
        order: -1;
    }
}

/* View All Button Container */
.view-all-container {
    padding: 10px 0;
    text-align: center;
    position: sticky; /* Sidebar eka scroll weddi meka yata penna thiyenawa */
    bottom: 0;
    background: linear-gradient(to top, #fdfdfd 80%, transparent);
    z-index: 10;
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: var(--accent);
    color: #fff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.view-all-btn:hover {
    background: #333; /* Hover kalaama pata wenas wenna */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.view-all-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.view-all-btn:hover i {
    transform: translateX(5px);
}





/* FAQ SECTION STYLES */
.faq-section {
    padding: 100px 0;
    background: #ffffff;
}

.faq-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text);
    transition: var(--transition);
}

.faq-question i {
    font-size: 1rem;
    color: var(--accent);
    transition: transform 0.4s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    background: #fff;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
    padding-bottom: 25px;
    color: var(--text-dim);
    line-height: 1.6;
}

/* Active State */
.faq-item.active {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(255, 31, 31, 0.05);
}

.faq-item.active .faq-question {
    color: var(--accent);
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust as needed */
    padding-top: 10px;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .faq-question {
        font-size: 1rem;
        padding: 20px;
    }
}