/* ==========================================================================
   START: css/style.css - FINAL MODERN STYLE (Colorful Light, Layout Fixes)
   ========================================================================== */

/* --- Theme Variables & Base --- */

/* Default: Dark Mode (Modern Dark) */
:root {
    --primary-color: #00bfff; /* Deep Sky Blue */
    --primary-color-dark: #009acd;
    --primary-color-rgb: 0, 191, 255;
    --secondary-color: #ffae42; /* Amber */

    --gradient-primary: linear-gradient(45deg, var(--primary-color), var(--primary-color-dark));
    --gradient-secondary: linear-gradient(45deg, var(--secondary-color), #ff8c00);

    /* Modern Dark Palette */
    --bg-color: #111827; /* Very Dark Blue/Grey */
    --card-bg: #1f2937; /* Dark Slate Blue */
    --header-bg: rgba(31, 41, 55, 0.9); /* Slightly transparent card bg */
    --footer-bg: #0b111d; /* Even Darker */
    --input-bg: #374151; /* Mid Grey */
    --border-color: #374151; /* Mid Grey Border */
    --top-bar-bg: #0b111d;
    --top-bar-text: #9ca3af;

    --text-color: #d1d5db; /* Light Grey */
    --heading-color: #f9fafb; /* Near White */
    --text-muted-color: #9ca3af;
    --button-text-color: #ffffff; /* White text on primary buttons */
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-dark);

    /* Standard Shadow */
    --box-shadow-std: 0 4px 12px rgba(0, 0, 0, 0.3);
    --box-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.35);

    /* Other Vars */
    --star-color: #ffc107;
    --logo-dark-display: block;
    --logo-light-display: none;

    /* Fonts */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;
    --font-article: 'Merriweather', serif;

    /* Spacing */
    --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --spacing-xl: 64px;

    /* Other */
    --border-radius: 8px;
    --transition-speed: 0.25s;
    --header-height: 75px;

    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

/* Light Mode Overrides (Modern - More Colorful) */
[data-theme="light"] {
    --primary-color: #0077FF; /* Vibrant Blue */
    --primary-color-dark: #0052cc;
    --primary-color-rgb: 0, 119, 255;
    --secondary-color: #FFA500; /* Vibrant Orange */

    --gradient-primary: linear-gradient(45deg, #0077FF, #0052cc);
    --gradient-secondary: linear-gradient(45deg, #FFA500, #FF8C00);

    /* Modern Light Colorful Palette */
    --bg-color: #F0F7FF; /* Very Light Blue Background */
    --card-bg: #ffffff; /* White Cards */
    --header-bg: rgba(255, 255, 255, 0.9); /* Semi-transparent White */
    --footer-bg: #e9ecef; /* Light Grey Footer/TopBar */
    --input-bg: #ffffff; /* White Input */
    --border-color: #d8e1eb; /* Slightly blueish light Border */
    --top-bar-bg: #e9ecef;
    --top-bar-text: #5a6a7e; /* Darker grey-blue text */

    --text-color: #334155; /* Dark Slate Grey */
    --heading-color: #1E293B; /* Darker Slate */
    --text-muted-color: #64748B; /* Medium Slate Grey */
    --button-text-color: #ffffff;
    --link-color: var(--primary-color);
    --link-hover-color: var(--primary-color-dark);

    /* Standard Shadow */
    --box-shadow-std: 0 5px 15px rgba(0, 119, 255, 0.1); /* Blueish shadow */
    --box-shadow-lg: 0 10px 30px rgba(0, 119, 255, 0.15);

    /* Other Vars */
    --star-color: #ffc107;
    --logo-dark-display: none;
    --logo-light-display: block;
}

/* --- Removed Scroll Snap --- */
/* html { scroll-snap-type: none; } */ /* Ensure snapping is off */


/* --- Global Styles & Resets --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-secondary); background-color: var(--bg-color); color: var(--text-color);
    line-height: 1.6; font-size: 16px; overflow-x: hidden;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    display: flex; flex-direction: column; min-height: 100vh;
}
main { flex-grow: 1; }

.container { max-width: 1200px; width: 90%; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--heading-color); margin-bottom: var(--spacing-md); line-height: 1.3; font-weight: 600; }
h1 { font-size: 2.8rem; font-weight: 700; } h2 { font-size: 2.2rem; font-weight: 700; }
h3 { font-size: 1.6rem; } h4 { font-size: 1.2rem; }

a { color: var(--link-color); text-decoration: none; transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease; }
a:hover { color: var(--link-hover-color); opacity: 0.8; }
a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; }

img { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius); }
ul { list-style: none; }
p { margin-bottom: var(--spacing-md); }

/* --- Accessibility Focus --- */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary-color) !important; outline-offset: 2px; border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.3) !important;
}

/* --- Utility Classes --- */
.section-padding { padding: var(--spacing-xl) 0; }
.section-title { text-align: center; margin-bottom: var(--spacing-lg); font-size: 2.5rem; position: relative; padding-bottom: var(--spacing-sm); color: var(--heading-color); }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--primary-color); border-radius: 2px; }
.bg-alt { background-color: var(--card-bg); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } /* Use card bg + borders */
.text-center { text-align: center; }
.grid-3-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); }
.grid-2-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--spacing-lg); }
@media (min-width: 768px) { .grid-2-col { grid-template-columns: repeat(2, 1fr); } }


/* --- Buttons (Modern) --- */
.btn {
    display: inline-block; padding: 12px 28px; border: 1px solid transparent;
    border-radius: var(--border-radius); font-family: var(--font-primary); font-weight: 600;
    cursor: pointer; transition: all var(--transition-speed) ease; text-align: center;
    font-size: 1rem; line-height: 1.2; box-shadow: var(--box-shadow-std);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-lg); }
.btn:active { transform: translateY(-1px) scale(0.98); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }

.btn-primary { background-image: var(--gradient-primary); color: var(--button-text-color); border-color: var(--primary-color-dark); }
.btn-primary:hover { background-image: var(--gradient-primary); opacity: 0.9; }

.btn-secondary { background-color: var(--card-bg); color: var(--primary-color); border-color: var(--primary-color); box-shadow: none; }
.btn-secondary:hover { background-color: var(--primary-color); color: var(--button-text-color); border-color: var(--primary-color); box-shadow: var(--box-shadow-std); }
.btn-secondary:active { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.btn-small { padding: 8px 18px; font-size: 0.9rem; }


/* --- Forms (Modern) --- */
.form-group { margin-bottom: var(--spacing-md); }
.form-group label { display: block; margin-bottom: var(--spacing-sm); font-weight: 600; color: var(--text-color); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%; padding: 12px; border: 1px solid var(--border-color);
    border-radius: var(--border-radius); background-color: var(--input-bg);
    color: var(--text-color); font-size: 1rem;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.25);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input[type="checkbox"] { width: auto; margin-right: 8px; appearance: auto; width: 16px; height: 16px; box-shadow: none; vertical-align: middle; top: -1px; }


/* --- Header Section --- */

/* Top Bar */
.top-bar { background-color: var(--top-bar-bg); color: var(--top-bar-text); padding: 6px 0; font-size: 0.85rem; border-bottom: 1px solid var(--border-color); }
.top-bar .container { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.top-bar-right { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); margin-left: auto; /* Push group right */ }
.rolling-text { white-space: nowrap; color: var(--top-bar-text); flex-shrink: 0; }
.rolling-text span { display: inline-block; }
.top-social-links { display: flex; align-items: center; gap: 12px; }
.top-social-links a { color: var(--top-bar-text); font-size: 1rem; opacity: 0.8; transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease; line-height: 1; display: inline-flex; align-items: center; }
.top-social-links a:hover { color: var(--primary-color); opacity: 1; }
/* Theme Switcher Button */
.theme-switcher {}
.theme-toggle-button {
    background-color: var(--card-bg); color: var(--text-muted-color); border: 1px solid var(--border-color);
    border-radius: 50%; cursor: pointer; font-size: 1.1em; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; box-shadow: var(--box-shadow-std);
    transition: all var(--transition-speed) ease;
}
.theme-toggle-button:hover { color: var(--primary-color); border-color: var(--primary-color); background-color: var(--bg-color); transform: scale(1.05); }
.theme-toggle-button:active { transform: scale(0.95); }
#theme-toggle-btn .fa-sun { display: block; } #theme-toggle-btn .fa-moon { display: none; }
[data-theme="dark"] #theme-toggle-btn .fa-sun { display: none; } [data-theme="dark"] #theme-toggle-btn .fa-moon { display: block; }

/* Main Header */
#main-header {
    background-color: var(--header-bg); backdrop-filter: blur(10px); padding: var(--spacing-sm) 0;
    position: sticky; top: 0; left: 0; width: 100%; z-index: 1000;
    transition: background-color var(--transition-speed) ease; height: var(--header-height);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-bottom: 1px solid var(--border-color);
}
#main-header .container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo img { height: 200px; transition: opacity var(--transition-speed) ease; border-radius: 0; }
.logo-dark { display: var(--logo-dark-display); } .logo-light { display: var(--logo-light-display); }

/* Navigation Links */
.nav-links { display: flex; align-items: center; gap: var(--spacing-md); }
.nav-links a { color: var(--text-color); font-weight: 500; padding: 5px 0; position: relative; text-transform: uppercase; font-size: 0.95rem; transition: color var(--transition-speed); background: none; box-shadow: none; border-radius: 0; }
.nav-links a:not(.btn)::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width var(--transition-speed) ease; }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--primary-color); background: none; box-shadow: none; }
.nav-links a.active { font-weight: 600; }
.nav-links .btn { box-shadow: none; border: 1px solid var(--primary-color); color: var(--primary-color); background: transparent; }
.nav-links .btn:hover { background: var(--primary-color); color: var(--button-text-color); box-shadow: var(--box-shadow-std); }

/* Mobile Navigation */
.mobile-nav-toggle { display: none; background: none; border: none; color: var(--text-color); font-size: 1.8rem; cursor: pointer; z-index: 1001; padding: 5px;}
.mobile-nav-toggle:hover { color: var(--primary-color); }


/* --- Hero Section --- */
.hero-section { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; background-image: url('../assets/images/hero-bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; padding: var(--spacing-xl) var(--spacing-md); }
.hero-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(17, 24, 39, 0.7), rgba(17, 24, 39, 0.85)); z-index: 1; }
[data-theme="light"] .hero-bg-overlay { background: linear-gradient(rgba(0, 119, 255, 0.3), rgba(0, 86, 179, 0.5)); } /* Light mode overlay */
.hero-content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }
.hero-content h1 { font-size: 3.2rem; color: #fff; margin-bottom: var(--spacing-md); font-weight: 800; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.subheadline { font-size: 1.2rem; margin-bottom: var(--spacing-lg); color: rgba(255, 255, 255, 0.95); }
.hero-buttons { display: flex; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-lg); flex-wrap: wrap; }
.hero-buttons .btn-primary { box-shadow: var(--box-shadow-std); border: none; }
.hero-buttons .btn-primary:hover { box-shadow: var(--box-shadow-lg); opacity: 0.9; }
.hero-buttons .btn-secondary { background-color: transparent; border: 2px solid #fff; color: #fff; box-shadow: none; }
.hero-buttons .btn-secondary:hover { background-color: #fff; color: var(--heading-color); border-color: #fff; box-shadow: var(--box-shadow-std);}


/* --- Modern Cards --- */
/* Base styles for all card-like elements */
.course-card, .article-card, .video-card, .testimonial-card,
.team-member-card, .pricing-card, .sidebar-widget,
.login-container, .contact-form-wrapper, .contact-info-box,
.course-main-content, .article-main-content, .faq-item,
.ad-placeholder-sidebar, .video-item-detailed
{
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg); /* Default padding */
    box-shadow: var(--box-shadow-std);
    transition: all var(--transition-speed) ease;
    border: 1px solid var(--border-color);
}

/* Overrides for specific card types (Converted from SCSS Nesting) */
.course-card, .article-card, .video-card, .video-item-detailed {
    padding: 0; /* Override base padding */
}
.team-member-card, .testimonial-card, .pricing-card {
    padding: var(--spacing-lg); /* Explicitly set padding (matches base) */
}
.faq-item {
    padding: 0; /* Override base padding */
    border: 1px solid var(--border-color); /* Explicitly set border (matches base) */
    margin-bottom: var(--spacing-sm);
}
.ad-placeholder-sidebar {
    padding: var(--spacing-md); /* Override base padding */
    border-style: dashed; /* Override base border style */
    box-shadow: none; /* Override base box-shadow */
}
.login-container {
    border: none; /* Override base border */
}
.video-item-detailed {
    border: none; /* Override base border */
    padding: var(--spacing-md); /* NEEDS PADDING RE-APPLIED - Added based on usage */
}
/* --- End Card Overrides --- */


.course-card:hover, .article-card:hover, .video-card:hover, .testimonial-card:hover,
.team-member-card:hover, .pricing-card:hover
{ transform: translateY(-5px); box-shadow: var(--box-shadow-lg); }

/* Card Content Padding */
.course-card .course-content, .article-card .article-content, .video-card .video-content {
    padding: var(--spacing-md);
}
/* NOTE: Added padding back to .video-item-detailed directly in override section above as it seemed required */

/* Card Specific Adjustments */
.course-thumbnail {
    background-color: var(--bg-alt-color);
    /* padding: var(--spacing-md);  Optional: remove padding if you want edge-to-edge */
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    min-height: 180px; /* Adjust as needed */
    border-bottom: 1px solid var(--border-color);
    overflow: hidden; /* Hide parts of image that don't fit */
    position: relative; /* Needed for play icon positioning */
}}
.course-thumbnail img
{
    width: 100%;          /* Set a fixed width */
    height: 100%;         /* Set a fixed height */
    object-fit: contain;  /* Scale image down to fit */
    border-radius: 0;
}
.article-card img, .video-embed-container { border-radius: var(--border-radius) var(--border-radius) 0 0; background-color: var(--bg-alt-color); border-bottom: 1px solid var(--border-color); }
.team-member-card img { border: 3px solid var(--bg-color); box-shadow: var(--box-shadow-std); }
.testimonial-header img { border: 2px solid var(--border-color); box-shadow: var(--box-shadow-std);}
.testimonial-card blockquote { background-color: var(--bg-alt-color); border-left: 3px solid var(--primary-color); padding-left: var(--spacing-md); box-shadow: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; }


/* --- Footer Section --- */
.site-footer { background-color: var(--footer-bg); color: var(--footer-text-color); padding: var(--spacing-xl) 0 var(--spacing-md) 0; border-top: 1px solid var(--border-color); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.footer-widget h4 { color: var(--footer-heading-color); margin-bottom: var(--spacing-md); font-size: 1.2rem; position: relative; padding-bottom: var(--spacing-sm); }
.footer-widget h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--primary-color); }
.footer-widget p, .footer-widget ul li a, .footer-widget ul li { color: var(--footer-text-color); font-size: 0.95rem; margin-bottom: var(--spacing-sm); }
.footer-widget ul li a:hover { color: var(--primary-color); padding-left: 5px; }
.footer-logo { margin-bottom: var(--spacing-sm); max-width: 150px; border-radius: 0; }
.footer-social-links { margin-top: var(--spacing-md); }
.footer-social-links h4 { font-size: 1.1rem; margin-bottom: var(--spacing-sm); color: var(--footer-heading-color); }
.footer-social-links a { color: var(--footer-text-muted-color); font-size: 1.3rem; margin-right: 12px; transition: color var(--transition-speed) ease; }
.footer-social-links a:hover { color: var(--primary-color); }
.contact-info li { display: flex; align-items: start; gap: 10px; margin-bottom: var(--spacing-md); }
.contact-info li i { margin-top: 4px; width: 20px; text-align: center; color: var(--primary-color); }
.footer-bottom { border-top: 1px solid var(--footer-border-color); padding-top: var(--spacing-md); text-align: center; font-size: 0.9rem; color: var(--footer-text-muted-color); }
.footer-widget .footer-logo {
    max-width: 150px;
    height: 80px; /* Keep height adjustment */
    width: auto;
    margin-bottom: var(--spacing-sm);    /* CHANGE: Reduced margin below logo (8px) */
    border-radius: 0;
}
/* Keep display rules separate */
.footer-widget .logo-dark { display: var(--logo-dark-display); }
.footer-widget .logo-light { display: var(--logo-light-display); }

/* --- Page Specific Layouts & Styles --- */

/* Site-wide Layout (Content | Ads) */
/* Example for main layout */
.main-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 250px; /* Example: Fixed width sidebar */
    gap: var(--spacing-md); /* Adjust gap for minimal margin */
    padding-top: 0;
    padding-bottom: var(--spacing-xl);
}

/* Example for videos page layout */
.videos-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) 250px; /* Example: Fixed width sidebar */
    gap: var(--spacing-md); /* Adjust gap for minimal margin */
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .main-layout-grid,
    .videos-layout {
        grid-template-columns: 1fr; /* Stack columns */
    }

    .ad-sidebar {
        position: static;
        margin-top: var(--spacing-lg); /* Space when stacked */
        padding-top: 0; /* Reset padding when stacked if needed */
        padding-bottom: var(--spacing-lg); /* Still need space above footer */
        /* Optional: Arrange ads horizontally when stacked */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-md);
    }

     /* Adjust margin for ads when they are in a grid */
    .ad-sidebar .ad-placeholder-sidebar {
        margin-bottom: 0; /* Grid gap handles spacing */
    }
}
.main-content-area { min-width: 0; }


/* --- Ad Sidebar Container Styling --- */
.ad-sidebar {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
}

/* --- Individual Ad Placeholder Styling --- */
.ad-sidebar .ad-placeholder-sidebar {
    display: block;
    width: 100%;
    min-height: 200px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color); /* Changed from dashed */
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    padding: 0; /* Removed padding */
    font-size: 0;
    color: transparent;
    box-shadow: none; /* Removed shadow override from SCSS conversion, base has shadow */
    /* Ensure base card shadow is re-applied if needed or explicitly set none */
     box-shadow: var(--box-shadow-std); /* Re-apply base shadow, adjust if needed */

    /* If you DON'T want shadow on ads, uncomment this: */
    /* box-shadow: none; */
}

/* --- Optional: Style the last ad differently if needed --- */
.ad-sidebar .ad-placeholder-sidebar:last-child {
    margin-bottom: 0;
}


/* Back Button Container - Reduced spacing */
.back-button-container {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

/* Page Header - Reduced spacing */
.page-header{ background-color:var(--bg-alt-color); padding:var(--spacing-md) 0; text-align:center; margin-bottom: 0; box-shadow: var(--box-shadow-std); border-radius: var(--border-radius); border: 1px solid var(--border-color);}
.page-header h1{ color:var(--heading-color); margin-bottom:var(--spacing-sm); font-size: 2.2rem; }
.page-header p{ color:var(--text-muted-color); font-size:1.0rem; max-width:700px; margin: 0 auto; }

/* Article Detail / Course Detail */
.article-main-content, .course-main-content { background-color: var(--card-bg); box-shadow: var(--box-shadow-std); padding: var(--spacing-lg); border-radius: var(--border-radius); border: 1px solid var(--border-color); }
.article-sidebar .sidebar-widget { background-color: var(--card-bg); padding: var(--spacing-md); border-radius: var(--border-radius); margin-bottom: var(--spacing-lg); box-shadow: var(--box-shadow-std); border: 1px solid var(--border-color); }
.course-sidebar-inner { background-color: var(--card-bg); padding: var(--spacing-md); border-radius: var(--border-radius); box-shadow: var(--box-shadow-std); border: 1px solid var(--border-color); }
.course-preview img, .course-preview iframe { border-radius: var(--border-radius); margin-bottom: var(--spacing-md); aspect-ratio: 16 / 9; background-color: var(--bg-alt-color); border: none; position: relative; border: 1px solid var(--border-color); }

/* Article Body */
.article-body { font-family: var(--font-article); font-size: 1.1rem; line-height: 1.8; color: var(--text-color); }
.article-body h2, .article-body h3 { font-family: var(--font-primary); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); line-height: 1.4; color: var(--heading-color);}
.article-body blockquote { border-left: 4px solid var(--primary-color); margin: var(--spacing-md) 0; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--bg-alt-color); font-style: italic; color: var(--text-muted-color); border-radius: 0 var(--border-radius) var(--border-radius) 0; box-shadow: none; border: 1px solid var(--border-color); border-left-width: 4px;}
.article-body code { background-color: var(--bg-alt-color); padding: 2px 6px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; color: var(--secondary-color); border: 1px solid var(--border-color); }
.article-body pre[class*="language-"] { border-radius: var(--border-radius); margin: var(--spacing-md) 0; font-size: 0.95rem; background-color: #2d2d2d; box-shadow: var(--box-shadow-std); padding: var(--spacing-md); border: 1px solid #444; }
[data-theme="light"] .article-body pre[class*="language-"] { background-color: #f5f2f0; border-color: var(--border-color); }

/* Login Page */
body.login-page main { display: flex; align-items: center; justify-content: center; }
.login-container { background-color: var(--card-bg); padding: var(--spacing-lg); border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); width: 100%; max-width: 450px; margin: var(--spacing-xl) auto; border: 1px solid var(--border-color); }
/* .login-container specific override handled in card section */
.login-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); font-size: 0.9rem; }
.signup-link { text-align: center; font-size: 0.9rem; margin-top: var(--spacing-md); }
.login-note { font-size: 0.85rem; color: var(--text-muted-color); text-align: center; margin-top: var(--spacing-md);}
body.login-page .back-button-container { position: static; padding: var(--spacing-lg) 0 var(--spacing-md) 0; text-align: center; }

/* Pricing Page */
.pricing-card { box-shadow: var(--box-shadow-std); border: 1px solid var(--border-color); }
/* .pricing-card specific override handled in card section */
.pricing-card.popular { border-color: var(--primary-color); border-width: 2px; transform: scale(1.03); } /* Make popular slightly larger */
.pricing-card.popular::before { display: none; }
.pricing-card .plan-features li i { color: var(--primary-color); width: 20px; }
.pricing-card .plan-features li.disabled i { color: var(--text-muted-color); }

/* FAQ Accordion */
.faq-item { background-color: var(--card-bg); margin-bottom: var(--spacing-sm); border-radius: var(--border-radius); border: 1px solid var(--border-color); overflow: hidden; box-shadow: none; }
/* .faq-item specific override handled in card section */
.faq-question { padding: var(--spacing-md); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--heading-color); background-color: transparent; transition: background-color var(--transition-speed); }
.faq-question:hover { background-color: var(--bg-alt-color); }
.faq-question i { transition: transform 0.3s ease; color: var(--text-muted-color); }
.faq-answer { padding: var(--spacing-md); display: none; font-size: 0.95rem; color: var(--text-color); border-top: 1px solid var(--border-color); margin-top: 0; background-color: var(--bg-color); }
.faq-item.open { border-left: 3px solid var(--primary-color); }
.faq-item.open .faq-question i { transform: rotate(180deg); }
.faq-item.open .faq-answer { display: block; }

/* Video Page */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); }
.video-item-detailed { background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--box-shadow-std); display: flex; flex-direction: column; border: 1px solid var(--border-color); }
/* .video-item-detailed specific override handled in card section */
.video-embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: var(--spacing-md); border-radius: var(--border-radius); background-color: var(--bg-alt-color); border: 1px solid var(--border-color);}
#load-more-trigger { padding: var(--spacing-lg); text-align: center; font-weight: 600; color: var(--text-muted-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); margin-top: var(--spacing-lg); opacity: 1; transition: opacity 0.3s ease, background-color 0.3s ease; background-color: var(--card-bg); cursor: pointer; box-shadow: var(--box-shadow-std); }
#load-more-trigger:hover { background-color: var(--bg-alt-color); border-color: var(--primary-color); color: var(--primary-color); }
#load-more-trigger.hidden { opacity: 0; pointer-events: none; height: 0; margin: 0; padding: 0; border: none; box-shadow: none;}


/* --- Floating Elements --- */

/* Back to Top */
#back-to-top { position: fixed; bottom: 30px; right: 30px; background-color: var(--card-bg); color: var(--primary-color); border: 1px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--transition-speed) ease; box-shadow: var(--box-shadow-std); display: flex; align-items: center; justify-content: center; } /* Added flex for icon centering */
#back-to-top:hover { background-color: var(--primary-color); color: var(--button-text-color); border-color: var(--primary-color); transform: translateY(-2px); }
#back-to-top:active { transform: translateY(0px) scale(0.95); }
#back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Chatbot */
#chatbot-container { position: fixed; bottom: 95px; right: 30px; z-index: 1001; }
#chatbot-toggle { background-color: var(--card-bg); color: var(--primary-color); border: 1px solid var(--border-color); border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-speed) ease; box-shadow: var(--box-shadow-std); }
#chatbot-toggle:hover { background-color: var(--primary-color); color: var(--button-text-color); border-color: var(--primary-color); transform: scale(1.05); }
#chatbot-toggle:active { transform: scale(0.95); }
#chatbot-toggle .fa-times { display: none; } #chatbot-container.open #chatbot-toggle .fa-comments { display: none; } #chatbot-container.open #chatbot-toggle .fa-times { display: block; }
#chatbot-window { position: absolute; bottom: 70px; right: 0; width: 320px; height: 450px; background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--box-shadow-lg); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all var(--transition-speed) ease; border: 1px solid var(--border-color); }
#chatbot-container.open #chatbot-window { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.chatbot-header { background-image: var(--gradient-primary); color: var(--button-text-color); padding: var(--spacing-sm) var(--spacing-md); font-weight: 600; text-align: center; }
#chatbot-messages { flex-grow: 1; padding: var(--spacing-md); overflow-y: auto; font-size: 0.9rem; }
.user-message { background-image: var(--gradient-primary); color: var(--button-text-color); margin-left: auto; border-bottom-right-radius: 4px; box-shadow: var(--box-shadow-std); padding: 10px 14px; border-radius: var(--border-radius); max-width: 85%; line-height: 1.4; margin-bottom: var(--spacing-sm); }
.bot-message { background-color: var(--bg-alt-color); color: var(--text-color); margin-right: auto; border-bottom-left-radius: 4px; box-shadow: var(--box-shadow-std); border: 1px solid var(--border-color); padding: 10px 14px; border-radius: var(--border-radius); max-width: 85%; line-height: 1.4; margin-bottom: var(--spacing-sm); }
.chatbot-input { display: flex; border-top: 1px solid var(--border-color); padding: var(--spacing-sm); background-color: var(--card-bg); }
#chatbot-user-input { flex-grow: 1; border: 1px solid var(--border-color); padding: 10px; border-radius: var(--border-radius); background-color: var(--input-bg); color: var(--text-color); font-size: 0.9rem; margin-right: var(--spacing-sm); box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
#chatbot-send-btn { background: none; border: none; color: var(--primary-color); font-size: 1.2rem; cursor: pointer; padding: 0 10px; transition: color var(--transition-speed); }
#chatbot-send-btn:hover { color: var(--primary-color-dark); }

/* WhatsApp Button */
.whatsapp-float-btn { position: fixed; bottom: 30px; left: 30px; background-color: #25D366; color: #fff; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 998; box-shadow: 0 5px 15px rgba(0,0,0,0.2); opacity: 0.9; visibility: visible; transform: scale(1); transition: all var(--transition-speed) ease; text-decoration: none; }
.whatsapp-float-btn:hover { background-color: #128C7E; color: #fff; transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* --- Media Queries --- */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; } h2 { font-size: 2rem; }
    .hero-content h1 { font-size: 3rem; }
    /* .main-layout-grid handled above */
    /* .ad-sidebar handled above */
    .contact-grid { grid-template-columns: 1fr; }
    .contact-info-box { margin-top: var(--spacing-lg); }

     /* Tablet Navigation */
    .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; width: 280px; background-color: var(--bg-color); flex-direction: column; align-items: flex-start; padding: var(--spacing-xl) var(--spacing-lg); box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right var(--transition-speed) ease-in-out; z-index: 1000; gap: var(--spacing-md); border-left: 1px solid var(--border-color); }
    .nav-links.active { right: 0; }
    .nav-links li { width: 100%; }
    .nav-links a { font-size: 1.1rem; display: block; padding: 10px 15px; width: 100%; box-shadow: none !important; border-radius: var(--border-radius); }
    .nav-links a:hover, .nav-links a.active { background-color: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); }
    .nav-links a.active { font-weight: 600; }
    .nav-links .btn { width: 90%; text-align: center; margin: var(--spacing-lg) auto 0 auto; }
    .mobile-nav-toggle { display: block; }
}

@media (max-width: 768px) {
    .container { width: 95%; }
    .section-padding { padding: var(--spacing-lg) 0; }
    .grid-3-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md);}
    .video-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 2.5rem; }
    .subheadline { font-size: 1.1rem; }
    .footer-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    /* Top Bar Centering/Stacking */
     .top-bar .container { justify-content: center; gap: 10px; }
     .top-bar-right { width: 100%; justify-content: center; order: 1; gap: var(--spacing-sm); }
     .rolling-text { display: none; }
}

@media (max-width: 576px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem; } h2 { font-size: 1.8rem; }
    .hero-content h1 { font-size: 2.2rem; }
    .grid-3-col { grid-template-columns: 1fr; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-buttons a { width: 80%; margin-bottom: var(--spacing-sm); }
    .footer-grid { grid-template-columns: 1fr; }
    #chatbot-window { width: calc(100vw - 40px); max-width: 300px; height: 400px; right: 20px; }
    #chatbot-container { right: 20px; bottom: 90px; }
    .whatsapp-float-btn { width: 50px; height: 50px; font-size: 1.6rem; bottom: 20px; left: 15px; }
    #back-to-top { bottom: 20px; right: 15px; width: 45px; height: 45px;}
    .login-container { padding: var(--spacing-md); margin: var(--spacing-lg) auto;}
    .article-header h1 { font-size: 1.8rem; }
    .article-body { font-size: 1rem; }
    .top-bar-right { flex-direction: column; gap: var(--spacing-sm); }
}
/* --- Style Enhancements for Video Play Button --- */

.video-thumbnail {
  position: relative;
  overflow: hidden;
}

.video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

.video-thumbnail .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* -- Adjust inner Font Awesome icon alignment if necessary -- */
.video-thumbnail .play-icon i.fas.fa-play {
    display: block;
    line-height: 1;
    margin-left: 5px; /* Visual centering adjustment */
}


/* --- Hover Effect --- */
.video-thumbnail:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 1);
}

/* --- Ensure content below doesn't interfere --- */
.video-content {
  position: relative;
  z-index: 1;
}
/* --- End css/style.css --- */