/* --- PRELOADER --- */
body.loading-active { overflow: hidden; }

#preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background-color: var(--white); 
    z-index: 99999; 
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

.loader-logo-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader-logo { width: 180px; height: auto; animation: pulseLogo 1.5s infinite ease-in-out; }

@keyframes pulseLogo {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.loader-spinner {
    width: 40px; height: 40px; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--primary-color);
    border-radius: 50%; animation: spinLoader 1s linear infinite;
}

@keyframes spinLoader { to { transform: rotate(360deg); } }
#preloader.preloader-hidden { opacity: 0; visibility: hidden; }

/* --- BASIC VARIABLES AND SETTINGS --- */
:root { --primary-color: #fbc02d; --secondary-color: #1a1a1a; --white: #ffffff; --light-gray: #f8f8f8; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; background-color: #fcfcfc; }
.fw-black { font-weight: 900; }
.bg-primary { background-color: var(--primary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #000; font-weight: bold; }

/* --- DESKTOP LOGOS AND HEADER --- */
.header-logo { height: 120px; width: auto; max-width: 100%; }
.bs-eclass-logo { height: 12px; width: auto; max-width: 100%; transition: transform 0.3s ease; }
.ex-eclass-logo { height: 20px; width: auto; max-width: 100%; transition: transform 0.3s ease; }
.rw-logo { height: 14px; width: auto; max-width: 100%; transition: transform 0.3s ease; }
.wd-logo { height: 18px; width: auto; max-width: 100%; transition: transform 0.3s ease; }
.sk-logo { height: 18px; width: auto; max-width: 100%; transition: transform 0.3s ease; }

.navbar, .navbar-brand, .header-logo { transition: all 0.4s ease-in-out; }
.navbar { background-color: var(--primary-color) !important; border-bottom: 2px solid rgba(0,0,0,0.1) !important; }

/* --- TOP BAR SMOOTH HIDE EFFECT --- */
.top-bar { max-height: 100px; overflow: hidden; opacity: 1; transition: all 0.4s ease-in-out; z-index: 1060; background-color: var(--white); }
header.scrolled .top-bar { max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; opacity: 0; margin: 0; }
header.scrolled .navbar { box-shadow: 0 4px 20px rgba(136, 126, 126, 0.08); }

/* --- MENU (GENERAL & DESKTOP) --- */
.dropdown-menu { margin: 0; border: none; border-radius: 12px; padding: 10px; min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
.dropdown-item { font-size: 0.9rem; font-weight: 500; padding: 8px 15px; border-radius: 8px; }
.dropdown-item:hover { background-color: var(--primary-color) !important; color: #000 !important; }

@media (min-width: 992px) {
    .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

.offcanvas-header { background-color: var(--white); }
.navbar-toggler-icon { filter: brightness(0.2); }
.offcanvas-body .lang-switcher { font-size: 1.1rem; }
.offcanvas-body .lang-switcher a { padding: 0 10px; }
.offcanvas-body .btn-dark { letter-spacing: 1px; padding: 12px; transition: transform 0.2s; }
.offcanvas-body .btn-dark:active { transform: scale(0.95); }

/* --- BUTTONS AND FORMS --- */
.form-select.category-select-mobile { border: 2px solid var(--secondary-color); background-color: #fff; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; transform: translateX(15px); }
.form-select.category-select-mobile:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(251, 192, 45, 0.2); outline: none; }

/* --- SLIDER AND ICON BOXES --- */
.swiper { width: 100%; margin: 20px auto; aspect-ratio: 1920 / 600; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
@media (max-width: 768px) {.swiper {aspect-ratio: 1920 / 1250; margin: 10px auto; border-radius: 15px;}}
.hero-slide { height: 100% !important; background-size: cover; background-position: center; display: flex !important; align-items: center; }
.hero-slide h2 { text-shadow: 0 2px 15px rgba(0,0,0,0.7); }
.service-box { transition: 0.3s ease; cursor: pointer; border: 2px solid transparent; }
.service-box:hover { transform: translateY(-10px); border-color: var(--secondary-color); }
.service-box i { color: var(--secondary-color); }

/* --- BOOK CATALOG (BOOK SWIPER) --- */
.level-selection .btn { border-radius: 5px; font-weight: bold; min-width: 35px; }
.level-selection .btn.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #000; }
.book-card { transition: 0.3s; }
.book-card:hover { transform: translateY(-5px); border-color: var(--primary-color) !important; }

.bookSwiper { aspect-ratio: auto !important; height: auto !important; padding-bottom: 20px !important; padding-top: 10px !important; }
.bookSwiper .swiper-slide { height: auto; display: flex; }
.bookSwiper .book-card { width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; }
.bookSwiper .swiper-button-next, .bookSwiper .swiper-button-prev { background: white; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.bookSwiper .swiper-button-next:after, .bookSwiper .swiper-button-prev:after { font-size: 1.2rem; font-weight: bold; }

/* --- COMPONENTS AND SUBPAGES --- */
.phone-img { height: 250px; margin-top: -20px; margin-bottom: -20px; }
.app-btn { height: 45px; transition: transform 0.2s; }
.app-btn:hover { transform: scale(1.05); }
.social-icons a { transition: opacity 0.3s; }
.social-icons a:hover { opacity: 0.7; }
.form-control:focus { box-shadow: none; border-color: var(--secondary-color); }
.footer-logo { height: 150px; width: auto; }
.main-footer li a:hover { font-weight: bold; padding-left: 5px; transition: all 0.2s; }

/* --- SMALL SCREENS (TABLET/MOBILE FOOTER - UNDER 767px) --- */
@media (max-width: 767px) {
    .footer-menu-title, .footer-toggle { cursor: pointer; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
    .footer-menu-title::after { content: '+'; font-size: 1.2rem; }
    .phone-img { display: none !important; }
    .footer-logo { height: 70px; }
}

/* --- GENERAL MOBILE VIEW (UNDER 991px) --- */
@media (max-width: 991px) {
    .swiper { border-radius: 0; width: 100%; }
    .hero-slide h2 { font-size: 1.8rem !important; }
    .header-logo { height: 90px !important; width: auto; }
    .navbar.py-2 { padding-top: 2px !important; padding-bottom: 2px !important; }

    /* Mobile Offcanvas Menu Settings */
    .offcanvas { width: 400px !important; }
    .offcanvas-body { overflow-y: auto; }
    .offcanvas-body .navbar-nav .nav-link { padding: 15px 10px; border-bottom: 1px solid rgba(0,0,0,0.05); }
    
    /* Proper Behavior for Mobile Dropdowns (Original Bootstrap) */
    .offcanvas-body .dropdown-menu { 
        position: static !important; 
        transform: none !important; /* Overrides Popper.js positions */
        float: none !important;
        background-color: rgba(0, 0, 0, 0.05) !important; 
        border-radius: 8px;
        box-shadow: none !important; 
        margin-top: 5px;
        padding-left: 10px;
    }

    .bookSwiper .swiper-button-next, .bookSwiper .swiper-button-prev { width: 30px; height: 30px; }
    .bookSwiper .swiper-button-next:after, .bookSwiper .swiper-button-prev:after { font-size: 1rem; }

    /* Mobile Scroll Glass Effect */
    header.scrolled {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    header.scrolled .navbar {
        background-color: rgba(251, 192, 45, 0.85) !important; 
        backdrop-filter: blur(12px); 
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    header.scrolled .navbar-brand { transform: translateX(170px); }
    header.scrolled .header-logo { height: 32px !important; }
}