/* =============================================================
   NOWCLASSES — GLOBAL STYLESHEET
   Shared by: about-us.html, blog-list.html, blog-detail.html
   Font: 'SUSE' (Google Fonts) — do not change site-wide
   ============================================================= */
/* -------------------------------------------------------------
   1. BASE / TYPOGRAPHY
   ------------------------------------------------------------- */
.nowclasses-wrapper {
    font-family: 'SUSE', sans-serif;
    color: #2D2D2D;
    background-color: #FFF;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-weight: 300;
}
.nowclasses-wrapper h1, .nowclasses-wrapper h2, .nowclasses-wrapper h3, .nowclasses-wrapper h4, .nowclasses-wrapper h5 {
    font-family: 'SUSE', sans-serif;
    font-weight: 500;
    color: #2D2D2D;
}
.nowclasses-wrapper img { transition: transform 0.5s ease, box-shadow 0.5s ease; }
/* -------------------------------------------------------------
   2. TOP BAR
   ------------------------------------------------------------- */
.nowclasses-wrapper .top-bar {
    background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%);
    font-size: 0.85rem;
    color: #ffffff;
    border-bottom: none;
    font-weight: 400;
    padding-top: 8px;
    padding-bottom: 8px;
}
.nowclasses-wrapper .top-bar i { color: #ffffff; margin-right: 0px; }
.nowclasses-wrapper .top-bar a { color: #ffffff; text-decoration: none; transition: opacity 0.3s ease; }
.nowclasses-wrapper .top-bar a:hover { opacity: 0.8; }
/* -------------------------------------------------------------
   3. NAVBAR
   ------------------------------------------------------------- */
.nowclasses-wrapper .navbar {
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 4px 6px -6px rgba(0,0,0,0.1);
    z-index: 1030;
}
.nowclasses-wrapper .navbar-brand { font-family: 'SUSE', sans-serif; font-size: 1.5rem; font-weight: 600; color: #2D2D2D; }
.nowclasses-wrapper .navbar-brand i, .nowclasses-wrapper .navbar-brand .brand-now { color: #00D9B8; }
.nowclasses-wrapper .navbar-logo-img, .nowclasses-wrapper .offcanvas-logo-img { height: 40px; width: auto; object-fit: contain; border-radius: 8px; background-color: transparent; }
.nowclasses-wrapper .offcanvas-logo-img { height: 28px; }
.nowclasses-wrapper .nav-link { font-weight: 400; color: #2D2D2D; font-size: 0.95rem; padding: 0.5rem 0.8rem; transition: color 0.3s ease; }
.nowclasses-wrapper .nav-link:hover { color: #0095D9; }
.nowclasses-wrapper .dropdown-item { font-size: 0.9rem; padding: 8px 20px; font-weight: 300; transition: background 0.3s ease, color 0.3s ease; }
.nowclasses-wrapper .dropdown-item:hover { background-color: #FDF8F6; color: #0095D9; }
@media (min-width: 992px) {
    .nowclasses-wrapper .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; animation: fadeIn 0.3s ease; }
    .nowclasses-wrapper .dropdown-toggle::after { vertical-align: middle; }
    .nowclasses-wrapper .dropdown-toggle[data-bs-toggle="dropdown"] { pointer-events: none; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* -------------------------------------------------------------
   4. BUTTONS (site-wide, non-hero)
   ------------------------------------------------------------- */
.nowclasses-wrapper .btn-primary-custom { background: linear-gradient(315deg, #FFA53D 0%, #FF6B00 100%); color: #fff; font-weight: 500; border: none; padding: 10px 28px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35); }
.nowclasses-wrapper .btn-primary-custom:hover { opacity: 0.95; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255, 107, 0, 0.45); color:#fff;}
.nowclasses-wrapper .btn-teal-custom { background: linear-gradient(135deg, #00C2FF 0%, #0062E6 100%); color: #fff; font-weight: 500; border: none; padding: 10px 28px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(0, 149, 217, 0.35); }
.nowclasses-wrapper .btn-teal-custom:hover { opacity: 0.95; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 98, 230, 0.45); color: #fff;}
.nowclasses-wrapper.page-home .hero-section::after {
    background-image: none;
}
.nowclasses-wrapper.page-home .hero-section {
    -webkit-mask-image: none;
    mask-image: none !important;
}
/* -------------------------------------------------------------
   5. SECTION SPACING & HEADING SYSTEM
   (This is the standard every inner page's non-hero content
   should use for top heading / heading / paragraph styling)
   ------------------------------------------------------------- */
.nowclasses-wrapper .content-section { padding: 60px 0; }
.nowclasses-wrapper .section-header { text-align: center; margin: 0 auto 30px; max-width: 700px; }
.nowclasses-wrapper .section-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 9px 22px; border-radius: 50px; margin-bottom: 18px; letter-spacing: 0.3px; box-shadow: 0 6px 18px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper .section-heading { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 14px; }
.nowclasses-wrapper .section-heading .accent { color: #0095D9; }
.nowclasses-wrapper .section-subtext { font-size: 1rem; color: #7A8696; max-width: 600px; line-height: 1.6; margin: 0 auto; }
/* -------------------------------------------------------------
   6. SOCIAL ICONS
   ------------------------------------------------------------- */
.nowclasses-wrapper .social-icons { margin-top: 0px; display: flex; gap: 10px; }
.nowclasses-wrapper .social-icons a { color: #fff; background: rgba(255, 255, 255, 0.2); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8rem; text-decoration: none; transition: background 0.3s; }
.nowclasses-wrapper .social-icons a:hover { background: #0095D9; }
/* =================================================================
   7. INNER-PAGE HERO — shared structure
   Used identically by About Us / Blog List / Blog Detail.
   Visual output is unchanged from the original per-page CSS —
   only de-duplicated here. Do not edit without checking all
   three pages, and never apply this section to the homepage hero,
   which uses a different design.
   ================================================================= */
.nowclasses-wrapper:not(.page-home) .hero-section {
    position: relative;
    background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
    color: #ffffff;
    padding-top: 2.5rem;
    padding-bottom: 4.25rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    -webkit-mask-image:
        linear-gradient(black, black),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
    -webkit-mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-image:
        linear-gradient(black, black),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% calc(100% - 11.5px), 24px 12px;
    mask-position: top left, bottom left;
    mask-repeat: no-repeat, repeat-x;
}
.nowclasses-wrapper:not(.page-home) .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
    background-size: 24px 12px;
    background-position: bottom left;
    background-repeat: repeat-x;
    z-index: 3;
    pointer-events: none;
}
.nowclasses-wrapper .hero-grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}
.nowclasses-wrapper .hero-content { position: relative; z-index: 2; }
.nowclasses-wrapper .hero-breadcrumb {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #b0b8d6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: 50px;
}
.nowclasses-wrapper .hero-breadcrumb span { color: #f7a040; }
.nowclasses-wrapper:not(.page-home) .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Georgia', serif;
    letter-spacing: -1px;
    color: #ffffff;
}
.nowclasses-wrapper:not(.page-home) .hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 90%;
}
.nowclasses-wrapper:not(.page-home) .hero-badge {
    font-size: 0.85rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
    cursor: default;
}
.nowclasses-wrapper .btn-hero-primary {
    background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nowclasses-wrapper .btn-hero-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 991.98px) {
    .nowclasses-wrapper .hero-capsule-container { height: 270px; max-width: 320px; }
}
@media (max-width: 767.98px) {
    .nowclasses-wrapper:not(.page-home) .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper:not(.page-home) .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper:not(.page-home) .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
}
/* --- 7a. About Us / Faculty hero interactions (hover/tilt flourish) --- */
.nowclasses-wrapper.page-about .hero-badge:hover,
.nowclasses-wrapper.page-faculty .hero-badge:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}
.nowclasses-wrapper.page-about .btn-hero-primary:hover,
.nowclasses-wrapper.page-about .btn-hero-primary:focus,
.nowclasses-wrapper.page-faculty .btn-hero-primary:hover,
.nowclasses-wrapper.page-faculty .btn-hero-primary:focus {
    background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5);
    transform: translateY(-4px) scale(1.03);
}
.nowclasses-wrapper.page-about .btn-hero-outline:hover,
.nowclasses-wrapper.page-about .btn-hero-outline:focus,
.nowclasses-wrapper.page-faculty .btn-hero-outline:hover,
.nowclasses-wrapper.page-faculty .btn-hero-outline:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px) scale(1.03);
}
.nowclasses-wrapper.page-about .hero-capsule-container {
    width: 100%;
    max-width: 400px;
    height: 340px;
    border-radius: 16px;
    border: 4px solid #FFC94D;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
}
.nowclasses-wrapper.page-about .hero-capsule-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.nowclasses-wrapper.page-about .hero-capsule-container:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
    box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: #FFD65A;
}
/* --- 7b. Blog List / Blog Detail / Contact Us / Happening hero interactions --- */
.nowclasses-wrapper.page-blog .hero-badge:hover,
.nowclasses-wrapper.page-contact .hero-badge:hover,
.nowclasses-wrapper.page-happening .hero-badge:hover {
    transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}
.nowclasses-wrapper.page-blog .btn-hero-primary:hover,
.nowclasses-wrapper.page-blog .btn-hero-primary:focus,
.nowclasses-wrapper.page-contact .btn-hero-primary:hover,
.nowclasses-wrapper.page-contact .btn-hero-primary:focus,
.nowclasses-wrapper.page-happening .btn-hero-primary:hover,
.nowclasses-wrapper.page-happening .btn-hero-primary:focus {
    background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%);
    color: #ffffff;
    box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5);
    transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
}
.nowclasses-wrapper.page-blog .btn-hero-outline:hover,
.nowclasses-wrapper.page-blog .btn-hero-outline:focus,
.nowclasses-wrapper.page-contact .btn-hero-outline:hover,
.nowclasses-wrapper.page-contact .btn-hero-outline:focus,
.nowclasses-wrapper.page-happening .btn-hero-outline:hover,
.nowclasses-wrapper.page-happening .btn-hero-outline:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
}
.nowclasses-wrapper.page-blog .hero-capsule-container,
.nowclasses-wrapper.page-contact .hero-capsule-container,
.nowclasses-wrapper.page-happening .hero-capsule-container {
    width: 100%;
    max-width: 400px;
    height: 340px;
    border-radius: 16px;
    border: 4px solid #FFC94D;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.1);
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(15deg) rotateY(-15deg);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease;
    will-change: transform;
}
.nowclasses-wrapper.page-blog .hero-capsule-container:hover,
.nowclasses-wrapper.page-contact .hero-capsule-container:hover,
.nowclasses-wrapper.page-happening .hero-capsule-container:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(20px);
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4);
}
.nowclasses-wrapper.page-blog .hero-capsule-container img,
.nowclasses-wrapper.page-contact .hero-capsule-container img,
.nowclasses-wrapper.page-happening .hero-capsule-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.5s ease;
}
/* --- 7d. Faculty only — capsule tilt variant (no perspective() wrapper) --- */
.nowclasses-wrapper.page-faculty .hero-capsule-container {
    width: 100%;
    max-width: 400px;
    height: 340px;
    border-radius: 16px;
    border: 4px solid #FFC94D;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.nowclasses-wrapper.page-faculty .hero-capsule-wrapper { perspective: 1000px; }
.nowclasses-wrapper.page-faculty .hero-capsule-container {
    transform: rotateX(8deg) rotateY(-12deg);
}
.nowclasses-wrapper.page-faculty .hero-capsule-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.nowclasses-wrapper.page-faculty .hero-capsule-container:hover {
    transform: rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
    box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: #FFD65A;
}
/* --- 7c. Blog Detail only — extra hero-capsule tilt (layered over 7b) --- */
.nowclasses-wrapper.page-blog-detail .hero-capsule-container {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(10deg) rotateY(-12deg);
    will-change: transform;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}
.nowclasses-wrapper.page-blog-detail .hero-capsule-container:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}
.nowclasses-wrapper.page-blog-detail .hero-capsule-container img {
    transform: translateZ(40px);
    object-fit: contain;
    background-color: rgba(255,255,255,0.15);
}
/* -------------------------------------------------------------
   8. CTA STRIP (before footer)
   ------------------------------------------------------------- */
.nowclasses-wrapper .cta-strip {
    background: url(images/cta-bg.webp) no-repeat center top;
    background-size: cover;
    padding: 45px 0;
    background-color: #003B5C; /* Fallback */
}
/* -------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------- */
.nowclasses-wrapper .site-footer { padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); background: #0f172a; }
.nowclasses-wrapper .footer-logo { font-family: 'SUSE', sans-serif; font-size: 1.7rem; font-weight: 600; color: #2D2D2D; transition: transform 0.3s ease; display: inline-block; }
.nowclasses-wrapper .footer-logo:hover { transform: scale(1.05); }
.nowclasses-wrapper .footer-logo-img { height: 48px; width: auto; object-fit: contain; background: transparent; }
.nowclasses-wrapper .footer-about-text { font-size: 1.05rem; line-height: 1.75; max-width: 380px; margin: 20px 0 26px; font-weight: 400; color: #fff; }
.nowclasses-wrapper .footer-social { display: flex; gap: 14px; }
.nowclasses-wrapper .footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 20%); display: flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; transition: all 0.3s ease; }
.nowclasses-wrapper .footer-social a:hover { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); border-color: transparent; color: #fff; transform: translateY(-4px) rotate(8deg); box-shadow: 0 6px 15px rgba(0, 149, 217, 0.3); }
.nowclasses-wrapper .footer-heading { font-weight: 700; font-size: 1.4rem; margin-bottom: 28px; color: #fff; }
.nowclasses-wrapper .footer-links { list-style: none; padding: 0; margin: 0; }
.nowclasses-wrapper .footer-links li { margin-bottom: 18px; }
.nowclasses-wrapper .footer-links a { text-decoration: none; font-size: 1.05rem; transition: all 0.3s ease; display: inline-block; color: #ffffff; font-weight: 400;}
.nowclasses-wrapper .footer-links a:hover { color: #0095D9; transform: translateX(5px); }
.nowclasses-wrapper .footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; font-size: 1.02rem; line-height: 1.5; max-width: 320px; transition: transform 0.3s ease; font-weight: 400; color: #fff;}
.nowclasses-wrapper .footer-contact-item:hover { transform: translateX(5px); }
.nowclasses-wrapper .footer-contact-item i { color: #0095D9; font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
.nowclasses-wrapper .footer-contact-item a { text-decoration: none; transition: color 0.3s ease; color: #ffffff; }
.nowclasses-wrapper .footer-contact-item a:hover { color: #0095D9; }
.nowclasses-wrapper .footer-bottom { border-top: 1px solid rgb(255 255 255 / 12%); margin-top: 55px; padding: 24px 0; text-align: center; font-size: 0.95rem; color: #fff; }
/* =================================================================
   10. BLOG CARD COMPONENT — shared by Blog List + Blog Detail
   ================================================================= */
.blog-grid-wrapper { padding: 4rem 0; background-color: #ffffff; }
.blog-grid-wrapper .custom-card { background-color: #ffffff; border: 3px solid #FF6B00; border-radius: 20px; padding: 18px; height: 100%; display: flex; flex-direction: column; transition: all 0.3s ease; }
.blog-grid-wrapper .custom-card:hover { box-shadow: 0 12px 30px rgba(255, 107, 0, 0.15); }
.blog-grid-wrapper .card-img-wrap { position: relative; overflow: hidden; border-radius: 16px;      aspect-ratio: unset;}
.blog-grid-wrapper .card-img-wrap img { width: 100%; height: 100%; object-fit: contain; background-color: #fff; transition: transform 0.6s ease; }
.blog-grid-wrapper .date-badge { position: absolute; top: 12px; left: 12px; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); color: #1a1a1a; padding: 6px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; display: flex; gap: 6px; align-items: center; }
.blog-grid-wrapper .date-badge .day { font-weight: 700; }
.blog-grid-wrapper .date-badge .month { text-transform: uppercase; }
.blog-grid-wrapper .card-body { padding: 1.25rem 0.5rem 0.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.blog-grid-wrapper .card-title { font-size: 1.15rem; font-weight: 600; color: #2D2D2D; line-height: 1.5; margin: 0; transition: color 0.3s ease; }
.blog-grid-wrapper .custom-card:hover .card-title { color: #0095D9; }
.blog-grid-wrapper .read-more-btn { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 8px; color: #FF6B00; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: color 0.3s ease; }
.blog-grid-wrapper .read-more-btn i { font-size: 1.1rem; transition: transform 0.3s ease; }
.blog-grid-wrapper .read-more-btn:hover { color: #0095D9; }
.blog-grid-wrapper .read-more-btn:hover i { transform: translateX(5px); }
.blog-grid-wrapper .colorful-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; padding: 0; margin-top: 3.5rem; }
.blog-grid-wrapper .colorful-pagination li a, .blog-grid-wrapper .colorful-pagination li span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; background-color: #ffffff; color: #2D2D2D; text-decoration: none; font-size: 0.95rem; font-weight: 500; border: 1px solid #eaeaea; transition: all 0.2s ease; }
.blog-grid-wrapper .colorful-pagination li.active a { background-color: #0095D9; color: #fff; border-color: #0095D9; }
.blog-grid-wrapper .colorful-pagination li a:hover:not(.active) { border-color: #0095D9; color: #0095D9; }
/* 3D hover depth enhancement (shared by Blog List + Blog Detail) */
.blog-grid-wrapper .custom-card { transform-style: preserve-3d; transform: perspective(1000px); will-change: transform; }
.blog-grid-wrapper .card-img-wrap { transform: translateZ(30px); transform-style: preserve-3d; }
.blog-grid-wrapper .card-body { transform: translateZ(40px); transform-style: preserve-3d; }
.blog-grid-wrapper .date-badge { transform: translateZ(50px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
/* =================================================================
   11. ABOUT US — PAGE-SPECIFIC SECTIONS
   (Only used on about-us.html; harmless elsewhere but kept scoped
   where the selector is generic, e.g. the image hover effect)
   ================================================================= */
/* Postcard-tilt hover effect used only on About Us content images */
.nowclasses-wrapper.page-about img:not(.navbar-logo-img):not(.offcanvas-logo-img):not(.footer-logo-img) {
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 4px double #FF6B00;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.nowclasses-wrapper.page-about img:not(.navbar-logo-img):not(.offcanvas-logo-img):not(.footer-logo-img):hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 149, 217, 0.4);
    border: 4px solid #0095D9;
}
.nowclasses-wrapper .arch-container { position: relative; padding: 20px; display: inline-block; width: 100%; max-width: 500px; }
.nowclasses-wrapper .arch-border { position: absolute; top: 0; left: 0; right: 0; bottom: 40px; border: 2px solid #0095D9; border-radius: 250px 250px 0 0; z-index: 1; }
.nowclasses-wrapper .arch-img { position: relative; z-index: 2; width: 100%; border-radius: 250px 250px 0 0; object-fit: cover; min-height: 500px; }
.nowclasses-wrapper .vision-img-large { width: 100%; height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; }
.nowclasses-wrapper .vision-img-small { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
.nowclasses-wrapper .feature-list-item { display: flex; align-items: center; margin-bottom: 20px; }
.nowclasses-wrapper .feature-icon { width: 50px; height: 50px; background-color: #f4f6fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0095D9; font-size: 1.2rem; margin-right: 15px; flex-shrink: 0; }
/* Why Choose Us — trust cards */
.nowclasses-wrapper .trust-card { border: 5px solid #ffffff; border-radius: 16px; padding: 2rem 1.5rem; height: 100%; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); transform-style: preserve-3d; text-align: center; color: #ffffff; }
.nowclasses-wrapper .trust-card:hover { transform: translateY(-10px) perspective(1000px) rotateX(4deg) rotateY(-4deg) scale(1.02); box-shadow: 20px 25px 40px rgba(0, 0, 0, 0.18); }
.nowclasses-wrapper .bg-peach { background: linear-gradient(150deg, #FF8A65 0%, #FF5252 100%); }
.nowclasses-wrapper .bg-mint { background: linear-gradient(150deg, #2BE0A0 0%, #00BFAD 100%); }
.nowclasses-wrapper .bg-ice { background: linear-gradient(150deg, #4FA8FF 0%, #0095D9 100%); }
.nowclasses-wrapper .bg-cream { background: linear-gradient(150deg, #FFD23F 0%, #FFA300 100%); }
.nowclasses-wrapper .bg-lavender { background: linear-gradient(150deg, #B98CFF 0%, #7B5CFA 100%); }
.nowclasses-wrapper .bg-lilac { background: linear-gradient(150deg, #FF7ACB 0%, #C147E9 100%); }
.nowclasses-wrapper .icon-wrapper { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; transform: translateZ(20px); background-color: #ffffff; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.nowclasses-wrapper .trust-card:hover .icon-wrapper { transform: translateZ(50px) rotateY(360deg) scale(1.1); box-shadow: 0 15px 25px rgba(0,0,0,0.25); }
.nowclasses-wrapper .icon-peach { color: #FF5252; }
.nowclasses-wrapper .icon-mint { color: #00BFAD; }
.nowclasses-wrapper .icon-ice { color: #0095D9; }
.nowclasses-wrapper .icon-cream { color: #FFA300; }
.nowclasses-wrapper .icon-lavender { color: #7B5CFA; }
.nowclasses-wrapper .icon-lilac { color: #C147E9; }
.nowclasses-wrapper .trust-card-title { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.75rem; transform: translateZ(10px); transition: transform 0.4s ease; color: #ffffff; }
.nowclasses-wrapper .trust-card:hover .trust-card-title { transform: translateZ(30px); }
.nowclasses-wrapper .trust-card-text { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; color: rgba(255,255,255,0.9); transform: translateZ(5px); }
/* Faculty / Team carousel — scoped to .team-section-parent */
.nowclasses-wrapper.page-about .team-section-parent { background-color: #f4eee5; }
.team-section-parent .owl-carousel .owl-stage { display: flex; align-items: stretch; }
.team-section-parent .owl-carousel .owl-item { display: flex; }
.team-section-parent .item { display: flex; width: 100%; }
.team-section-parent .team-card { background-color: #ffffff; padding: 10px; border-radius: 16px; display: flex; flex-direction: column; width: 100%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease; height: 100%; }
.team-section-parent .team-card:hover { transform: translateY(-5px); }
.team-section-parent .team-card img { width: 100%; height: 320px; object-fit: cover; object-position: top center; border-radius: 12px; }
.team-section-parent .team-info { background-color: #f8f6f3; border-radius: 12px; padding: 16px 20px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; flex-grow: 1; }
.team-section-parent .team-text { display: flex; flex-direction: column; text-align: left; }
.team-section-parent .team-text h5 { font-weight: 600; color: #17423c; margin-bottom: 2px; font-size: 1.25rem; font-family: 'SUSE', sans-serif; letter-spacing: -0.3px; }
.team-section-parent .team-text span { font-size: 0.9rem; color: #555555; font-weight: 500; }
.team-section-parent .team-social { display: flex; gap: 12px; align-items: center; }
.team-section-parent .team-social a { color: #c0c0c0; font-size: 1.1rem; text-decoration: none; transition: color 0.2s ease; }
.team-section-parent .team-social a:hover { color: #17423c; }
.team-section-parent .section-heading { font-weight: 800; font-family: 'SUSE', sans-serif; color: #1a1a1a; }
/* =================================================================
   12. CONTACT US — PAGE-SPECIFIC (scoped .page-contact where generic)
   ================================================================= */
.nowclasses-wrapper .icon-box-contact { width: 55px; height: 55px; font-size: 1.3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.nowclasses-wrapper .bg-blue { background-color: #0095D9; }
.nowclasses-wrapper .bg-dark { background-color: #003B5C; }
.nowclasses-wrapper .bg-whatsapp { background-color: #25D366; }
.nowclasses-wrapper .contact-form-card {
    background: #ffffff;
    border: 7px solid #1a254e;
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
    padding: 3.5rem;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    will-change: transform;
}
.nowclasses-wrapper .contact-form-card .section-badge,
.nowclasses-wrapper .contact-form-card .section-heading { transform: translateZ(40px); }
.nowclasses-wrapper .contact-form-card form { transform: translateZ(25px); transform-style: preserve-3d; }
.nowclasses-wrapper .custom-input { border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0; padding: 12px 0; font-size: 0.95rem; color: #2D2D2D; background: transparent; box-shadow: none !important; transition: border-color 0.3s ease; }
.nowclasses-wrapper .custom-input:focus { outline: none; border-bottom: 1px solid #0095D9; }
.nowclasses-wrapper .custom-input::placeholder { color: #7A8696; font-weight: 300; }
.nowclasses-wrapper textarea.custom-input { resize: vertical; }
.nowclasses-wrapper .map-container { height: 450px; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
/* =================================================================
   13. FACULTY — PAGE-SPECIFIC
   ================================================================= */
.faculty-column { perspective: 1200px; }
.faculty-card { background-color: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; border-top: 5px solid #0095D9; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: relative; transform-style: preserve-3d; }
.faculty-card:hover { transform: rotateX(4deg) rotateY(-4deg) scale3d(1.02, 1.02, 1.02) translateY(-10px); border-top-color: #fca34d; box-shadow: 15px 15px 30px rgba(0, 149, 217, 0.15); z-index: 5; }
.faculty-card > * { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.faculty-card:hover .card-img-top { transform: translateZ(30px) scale(1.08); box-shadow: 0 10px 20px rgba(0,0,0,0.12); border-color: #FFF3E0; }
.faculty-card:hover .faculty-name, .faculty-card:hover .faculty-role { transform: translateZ(20px); }
.faculty-card:hover .faculty-meta, .faculty-card:hover .bio-content { transform: translateZ(15px); }
.faculty-card:hover .btn-bio-toggle { transform: translateZ(25px); box-shadow: 0 8px 15px rgba(0, 149, 217, 0.2); }
.faculty-card .card-img-top { width: 150px; height: 150px; object-fit: cover; object-position: top; border-radius: 50%; margin: 25px auto 15px; border: 4px solid #f8fafc; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.faculty-name { color: #003B5C; font-size: 1.4rem; font-weight: 700; }
.faculty-role { color: #0095D9; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; }
.faculty-meta { font-size: 0.85rem; color: #64748b; }
.faculty-meta p { margin-bottom: 0.5rem; }
.faculty-meta i { color: #fca34d; width: 18px; }
.bio-content { font-size: 0.9rem; color: #475569; line-height: 1.6; height: 150px; overflow-y: auto; padding-right: 8px; margin-bottom: 1rem; }
.bio-content::-webkit-scrollbar { width: 5px; }
.bio-content::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.bio-content::-webkit-scrollbar-thumb { background: #0095D9; border-radius: 10px; }
.bio-content::-webkit-scrollbar-thumb:hover { background: #fca34d; }
.bio-full p { margin-bottom: 0.8rem; }
.btn-bio-toggle { background: transparent; color: #0095D9; border: 1px solid #0095D9; border-radius: 50px; padding: 6px 20px; font-size: 0.85rem; font-weight: 600; transition: all 0.3s ease; }
.btn-bio-toggle:hover { background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%); border-color: transparent; color: #ffffff; box-shadow: 0 4px 10px rgba(252, 163, 77, 0.3); }
/* =================================================================
   14. HAPPENING — PAGE-SPECIFIC (event gallery)
   ================================================================= */
.nowclasses-wrapper .gallery-sec { padding: 60px 0; }
.nowclasses-wrapper .gallery-item { position: relative; display: block; overflow: hidden; border-radius: 1.25rem; text-decoration: none; cursor: pointer; transform-style: preserve-3d; transform: perspective(1000px); will-change: transform; }
.nowclasses-wrapper .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 154, 51, 0.59); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1; transform: translateZ(30px); }
.nowclasses-wrapper .gallery-item::after { content: '+'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(60px); color: #ffffff; font-size: 3rem; font-weight: 300; line-height: 1; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 2; }
.nowclasses-wrapper .gallery-item:hover::before, .nowclasses-wrapper .gallery-item:hover::after { opacity: 1; }
.nowclasses-wrapper .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; transform: translateZ(10px); }
.nowclasses-wrapper .gallery-item:hover img { transform: translateZ(10px) scale(1.05); }
.nowclasses-wrapper .ratio-tall { aspect-ratio: 4 / 5; }
.nowclasses-wrapper .ratio-wide { aspect-ratio: 4 / 3; }
/* =================================================================
   15. HOME (index.html) — PAGE-SPECIFIC
   Homepage hero is a different design from the inner-page hero and
   is fully scoped to .page-home so it can never collide with it.
   ================================================================= */
.nowclasses-wrapper .btn-outline-orange { background-color: #fff; color: #FF6B00; font-weight: 500; border: 2px solid #FF6B00; padding: 8px 26px; border-radius: 50px; transition: all 0.3s ease; }
.nowclasses-wrapper .btn-outline-orange:hover { background-color: #FFF6EC; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 0, 0.2); }
@keyframes borderBreatheDesktop { 0%, 100% { border-left-color: #003B5C; } 50% { border-left-color: #0095D9; } }
@keyframes floatUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatUpDown3D { 0%, 100% { transform: translateY(0) translateZ(100px); } 50% { transform: translateY(-15px) translateZ(100px); } }
/* --- Home hero (own design, not the inner-page hero) --- */
.nowclasses-wrapper.page-home .hero-section { position: relative; flex-grow: 1; display: flex; align-items: center; background: linear-gradient(120deg, rgba(6,20,35,0.82) 0%, rgba(6,20,35,0.35) 55%, rgba(6,20,35,0.55) 100%), url('../images/banner-bg-mt.webp') center/cover no-repeat; min-height: 88vh; overflow-x: hidden; padding: 40px 0; }
.nowclasses-wrapper.page-home .hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 184, 28, 0.12), transparent 40%); z-index: 0; pointer-events: none; }
.nowclasses-wrapper.page-home .hero-text-col { position: relative; z-index: 2; padding-top: 30px; padding-bottom: 30px; }
.nowclasses-wrapper.page-home .hero-glass-card { background: rgba(0, 24, 52, 0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: 28px; padding: 44px 42px; box-shadow: 0 25px 60px rgba(0,0,0,0.35); }
.nowclasses-wrapper.page-home .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: #FFC94A; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 0; margin-bottom: 18px; }
.nowclasses-wrapper.page-home .hero-badge i { color: #FFC94A; }
.nowclasses-wrapper.page-home .hero-title { font-size: 2.2rem; line-height: 1.15; margin-bottom: 16px; letter-spacing: -0.5px; color: #ffffff; font-weight: 700; text-shadow: 0 4px 20px rgba(0,0,0,0.35); }
.nowclasses-wrapper.page-home .hero-stat-highlight { font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2rem); line-height: 1.1; margin-bottom: 18px; background: linear-gradient(135deg, #FFD666 0%, #FF8800 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nowclasses-wrapper.page-home .hero-subtitle { font-size: 1.02rem; color: rgba(255,255,255,0.88); margin-bottom: 26px; max-width: 550px; line-height: 1.7; }
.nowclasses-wrapper.page-home .hero-mini-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 0.9rem; font-weight: 500; color: #2D2D2D; margin-bottom: 28px; }
.nowclasses-wrapper.page-home .hero-mini-stats span { display: flex; align-items: center; gap: 14px; }
.nowclasses-wrapper.page-home .hero-mini-stats span:not(:last-child)::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #7A8696; display: inline-block; margin-left: 14px; }
.nowclasses-wrapper.page-home .btn-hero-primary { background: linear-gradient(315deg, #FFD666 0%, #FFB01E 55%, #FF8800 100%); color: #17222E; font-weight: 700; border: none; padding: 12px 30px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(255, 176, 30, 0.4); }
.nowclasses-wrapper.page-home .btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(255, 176, 30, 0.55); color: #17222E; }
.nowclasses-wrapper.page-home .btn-hero-outline { background: rgba(255,255,255,0.06); color: #ffffff; font-weight: 600; border: 1.5px solid rgba(255,255,255,0.55); padding: 11px 28px; border-radius: 50px; transition: all 0.3s ease; }
.nowclasses-wrapper.page-home .btn-hero-outline:hover { background: rgba(255,255,255,0.16); border-color: #fff; transform: translateY(-3px); color: #fff; }
.nowclasses-wrapper.page-home .hero-info-bar { display: flex; align-items: center; gap: 16px; background: #ffffff; border-radius: 16px; padding: 16px 22px; margin-top: 28px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
.nowclasses-wrapper.page-home .hero-info-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #FFD23F 0%, #FF6B00 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.nowclasses-wrapper.page-home .hero-info-text { display: flex; flex-direction: column; gap: 4px; }
.nowclasses-wrapper.page-home .hero-info-text strong { font-size: 0.95rem; color: #17222E; font-weight: 700; }
.nowclasses-wrapper.page-home .hero-info-text span { font-size: 0.82rem; color: #0095D9; font-weight: 500; }
.nowclasses-wrapper.page-home .hero-info-text span i { color: #00BFAD; margin-right: 3px; }
.nowclasses-wrapper.page-home .hero-trust-line { font-size: 0.85rem; color: #000000; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; }
.nowclasses-wrapper.page-home .hero-trust-line i { color: #ff8d0b; margin-right: 4px; }
.nowclasses-wrapper.page-home .hero-image-col { position: relative; z-index: 2; }
.nowclasses-wrapper.page-home .hero-image-frame { position: relative; width: 100%; height: 417px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); }
.nowclasses-wrapper.page-home .hero-image-frame img, .nowclasses-wrapper.page-home .hero-image-frame video { width: 100%; height: 100%; object-fit: contain; object-position: center; animation: imageBreathe 6s ease-in-out infinite; transform-origin: center center; }
@keyframes imageBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
/* --- Home: Stats --- */
.nowclasses-wrapper .stats-board { perspective: 1200px; }
.nowclasses-wrapper .stat-card { display: flex; align-items: center; position: relative; background-color: transparent; border-radius: 12px; transform-style: preserve-3d; transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; cursor: pointer; }
.nowclasses-wrapper .stat-card:hover { transform: translateY(-12px) rotateX(8deg) rotateY(-6deg); }
.nowclasses-wrapper .stat-icon { width: 85px; height: 105px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; position: relative; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.nowclasses-wrapper .stat-icon.bg-pastel-1 { background: linear-gradient(135deg, #00C2FF 0%, #0095D9 100%); }
.nowclasses-wrapper .stat-icon.bg-pastel-2 { background: linear-gradient(135deg, #21E6A1 0%, #00BFAD 100%); }
.nowclasses-wrapper .stat-icon.bg-pastel-3 { background: linear-gradient(135deg, #FF9F5A 0%, #FF6B35 100%); }
.nowclasses-wrapper .stat-icon.bg-pastel-4 { background: linear-gradient(135deg, #FFD23F 0%, #FF8800 100%); }
.nowclasses-wrapper .stat-icon svg { width: 36px; height: 36px; fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nowclasses-wrapper .stat-info { background-color: #f4f6fa; height: 85px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; margin-left: -20px; padding-left: 35px; padding-right: 20px; border-radius: 8px; z-index: 1; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); }
.nowclasses-wrapper .stat-card:hover .stat-icon { transform: translateZ(50px) scale(1.05); box-shadow: -15px 25px 35px rgba(0, 0, 0, 0.2); }
.nowclasses-wrapper .stat-card:hover .stat-info { transform: translateZ(25px); box-shadow: -5px 15px 25px rgba(0, 0, 0, 0.08); background-color: #ffffff; }
.nowclasses-wrapper .stat-value { color: #1e1e1e; font-size: 1.6rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.2rem; letter-spacing: -0.5px; }
.nowclasses-wrapper .stat-label { color: #7A8696; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; }
/* --- Home: About Us section (parallelogram image) --- */
.nowclasses-wrapper .content-section.about-section { background: #FDF8F6; }
.nowclasses-wrapper .about-image-modern { perspective: 1200px; transform-style: preserve-3d; margin-right: 30px; position: relative; }
.nowclasses-wrapper .about-image-modern img { height: 550px; object-fit: cover; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); border-radius: 0; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; z-index: 1; }
.nowclasses-wrapper .about-image-modern:hover img { transform: rotateY(-10deg) rotateX(5deg) scale(1.05) translateZ(20px); }
.nowclasses-wrapper .floating-experience-card { animation: floatUpDown3D 4s ease-in-out infinite; z-index: 20; position: absolute; background-color: #fff; border-radius: 1rem; padding: 1.5rem; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.15); bottom: -20px; right: -20px; width: 220px; }
/* --- Home: Academic Programs --- */
[data-aos="fall-bounce"] { opacity: 0; transform: translateY(-500px); transition-property: transform, opacity; }
[data-aos="fall-bounce"].aos-animate { animation: gravityBounceAnim 1.2s cubic-bezier(0.28, 0.84, 0.42, 1) forwards; }
@keyframes gravityBounceAnim {
    0% { transform: translateY(-500px); opacity: 0; animation-timing-function: ease-in; }
    40% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
    60% { transform: translateY(-80px); animation-timing-function: ease-in; }
    75% { transform: translateY(0); animation-timing-function: ease-out; }
    85% { transform: translateY(-30px); animation-timing-function: ease-in; }
    95% { transform: translateY(0); animation-timing-function: ease-out; }
    98% { transform: translateY(-10px); animation-timing-function: ease-in; }
    100% { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
}
.nowclasses-wrapper .program-card { text-align: center; padding: 10px; margin-bottom: 0px; transition: transform 0.4s ease; cursor: pointer; }
.nowclasses-wrapper .program-card:hover { transform: translateY(-10px); }
.nowclasses-wrapper .program-card .image-container { position: relative; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; border: 2px solid transparent; border-radius: 50%; padding: 10px; background-color: #003B5C; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.nowclasses-wrapper .program-card:hover .image-container { border-color: #0095D9; box-shadow: 0 20px 45px rgba(0, 149, 217, 0.3); transform: scale(1.05); }
.nowclasses-wrapper .program-card .image-container img { width: 260px; height: 260px; object-fit: cover; border-radius: 50%; }
.nowclasses-wrapper .program-card .badge-icon { position: absolute; bottom: 15px; right: 10px; width: 60px; height: 60px; background-color: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 2; transition: transform 0.3s ease; }
.nowclasses-wrapper .program-card:hover .badge-icon { transform: rotate(15deg) scale(1.1); }
.nowclasses-wrapper .program-card .badge-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.nowclasses-wrapper .program-card .icon-primary { stroke: #0095D9; }
.nowclasses-wrapper .program-card .icon-orange { stroke: #FF6B00; }
.nowclasses-wrapper .program-card h5 { font-weight: 700; font-size: 1.4rem; margin-bottom: 10px; }
/* --- Home: Target Audience (flip cards) --- */
.nowclasses-wrapper .flip-cards-section { background: #FDF8F6; }
.nowclasses-wrapper .flip-cards-section .section-subtext { max-width: 950px; }
.nowclasses-wrapper .ref-card { border-radius: 40px; padding: 3rem 2.5rem; text-align: center; height: 100%; position: relative; overflow: hidden; background-color: #ffffff; border: 2px solid transparent; color: #2D2D2D; transition: transform 0.4s ease, box-shadow 0.4s ease; z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.nowclasses-wrapper .ref-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); opacity: 0; transition: opacity 0.4s ease; z-index: -1; }
.nowclasses-wrapper .ref-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px rgba(123, 92, 250, 0.25); }
.nowclasses-wrapper .ref-card:hover::before { opacity: 1; }
.nowclasses-wrapper .ref-icon-circle { width: 90px; height: 90px; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 8px 20px rgba(123, 92, 250, 0.25); transition: background 0.4s ease; }
.nowclasses-wrapper .ref-icon-circle svg { width: 45px; height: 45px; stroke: #ffffff; fill: none; transition: stroke 0.4s ease; }
.nowclasses-wrapper .ref-card-title { font-weight: 800; font-size: 1.6rem; margin-bottom: 1.5rem; line-height: 1.3; transition: color 0.4s ease;}
.nowclasses-wrapper .ref-card-text { font-size: 1rem; line-height: 1.7; font-weight: 400; color: #555555; transition: color 0.4s ease; }
.nowclasses-wrapper .ref-card:hover .ref-icon-circle { background: #ffffff; }
.nowclasses-wrapper .ref-card:hover .ref-icon-circle svg { stroke: #7B5CFA; }
.nowclasses-wrapper .ref-card:hover .ref-card-title, .nowclasses-wrapper .ref-card:hover .ref-card-text { color: #ffffff; }
/* --- Home: team-section-parent shade (About Us uses a different shade — see section 11) --- */
.nowclasses-wrapper.page-home .team-section-parent { background-color: #f5f3f0; }
/* --- Home: Learning Process (flip icon steps) --- */
.nowclasses-wrapper .steps-row { position: relative; }
.nowclasses-wrapper .connector-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.nowclasses-wrapper .step-card { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; transition: transform 0.3s ease; }
.nowclasses-wrapper .step-card:hover { transform: translateY(-5px); }
@media (min-width: 992px) {
    .nowclasses-wrapper .step-up { justify-content: flex-start; padding-bottom: 5rem; }
    .nowclasses-wrapper .step-down { justify-content: flex-end; flex-direction: column; padding-top: 5rem; }
    .nowclasses-wrapper .step-down .process-icon-wrapper { margin-top: auto; }
}
@media (max-width: 991px) {
    .nowclasses-wrapper .step-down { flex-direction: column-reverse; }
    .nowclasses-wrapper .text-content.mb-4 { margin-bottom: 0 !important; margin-top: 1.5rem !important; }
    .nowclasses-wrapper .step-card { margin-bottom: 3rem; }
}
.nowclasses-wrapper .process-icon-wrapper { position: relative; display: inline-block; }
.nowclasses-wrapper .icon-flip { width: 120px; height: 120px; margin: 0 auto; position: relative; z-index: 5; perspective: 1000px; cursor: pointer; }
.nowclasses-wrapper .icon-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
.nowclasses-wrapper .icon-flip:hover .icon-flip-inner { transform: rotateY(180deg); }
.nowclasses-wrapper .icon-box { position: absolute; top: 0; left: 0; width: 120px; height: 120px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 15px 35px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nowclasses-wrapper .icon-box i { font-size: 2.8rem; color: #0095D9; transition: transform 0.4s ease 0.15s; }
.nowclasses-wrapper .icon-flip:hover .icon-box-front i { transform: scale(0.85); }
.nowclasses-wrapper .icon-box-back { background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); transform: rotateY(180deg); box-shadow: 0 15px 35px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper .icon-box-back i { color: #ffffff; }
.nowclasses-wrapper .step-badge { position: absolute; top: 0; left: 0; width: 35px; height: 35px; background: linear-gradient(135deg, #FFD23F 0%, #FF6B00 100%); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; z-index: 6; box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4); }
.nowclasses-wrapper .process-text h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.nowclasses-wrapper .process-text p { font-size: 0.95rem; max-width: 250px; margin: 0 auto; }
.nowclasses-wrapper .trailing-circle { position: absolute; top: -14px; right: -28px; width: 18px; height: 18px; border: 1px solid #0095D9; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 6; }
.nowclasses-wrapper .trailing-circle::after { content: ''; width: 4px; height: 4px; background-color: #0095D9; border-radius: 50%; }
/* --- Home: Success Stories --- */
.nowclasses-wrapper .success-section { background: #FDF8F6; }
.nowclasses-wrapper .marquee-box { background: #ffffff; border-radius: 24px; padding: 2rem 2.5rem; box-shadow: 0 15px 40px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.03); }
.nowclasses-wrapper .marquee-container { height: 500px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%); }
.nowclasses-wrapper .marquee-content { display: flex; flex-direction: column; animation: scrollUp 20s linear infinite; }
.nowclasses-wrapper .marquee-container:hover .marquee-content { animation-play-state: paused; }
@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.nowclasses-wrapper .story-card { padding: 1.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 1rem; transform-style: preserve-3d; transition: transform 0.4s ease, background 0.3s ease; }
.nowclasses-wrapper .story-card:hover { background: #fafafa; border-radius: 12px; padding: 1.5rem; transform: perspective(1000px) translateZ(20px) rotateX(2deg); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.nowclasses-wrapper .color-primary { color: #00BFAD !important; }
.nowclasses-wrapper .color-orange { color: #FF8800 !important; }
.nowclasses-wrapper .color-blue { color: #0095D9 !important; }
.nowclasses-wrapper .student-name { font-weight: 700; font-size: 1.3rem; margin-bottom: 0.5rem; }
.nowclasses-wrapper .student-details { display: flex; align-items: center; gap: 15px; font-size: 0.9rem; margin-bottom: 0.5rem; }
.nowclasses-wrapper .student-achievement { font-size: 1rem; line-height: 1.6; margin: 0; }
.nowclasses-wrapper .sticky-gallery { position: sticky; top: 5rem; height: 550px; width: 100%; }
.nowclasses-wrapper .gallery-layout { position: relative; width: 100%; height: 100%; }
.nowclasses-wrapper .gallery-box { position: absolute; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.15); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; }
.nowclasses-wrapper .gallery-box:hover { transform: perspective(1000px) rotateY(15deg) rotateX(-5deg) scale(1.1) translateZ(30px) !important; z-index: 20; }
.nowclasses-wrapper .gallery-box img { width: 100%; height: 100%; object-fit: cover; }
.nowclasses-wrapper .g-img-1 { top: 0; left: 0; width: 48%; height: 45%; }
.nowclasses-wrapper .g-img-2 { bottom: 0; left: 0; width: 48%; height: 45%; }
.nowclasses-wrapper .g-img-3 { top: 50%; right: 0; transform: translateY(-50%); width: 48%; height: 45%; }
/* --- Home: FAQ --- */
.nowclasses-wrapper .custom-accordion .accordion-item { border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 12px !important; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04); background-color: #fff; margin-bottom: 15px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; }
.nowclasses-wrapper .custom-accordion .accordion-item:hover { transform: translateY(-5px) perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.02); box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.08); z-index: 10; position: relative; }
.nowclasses-wrapper .custom-accordion .accordion-button { font-weight: 700; font-family: 'SUSE', sans-serif; color: #2D2D2D; background-color: #fff; box-shadow: none !important; padding: 1.25rem 1.5rem; transition: color 0.3s ease; }
.nowclasses-wrapper .custom-accordion .accordion-button:not(.collapsed) { color: #0095D9; }
.nowclasses-wrapper .custom-accordion .accordion-body { padding: 0 1.5rem 1.25rem 1.5rem; line-height: 1.6; }
.nowclasses-wrapper .custom-accordion .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M12 7v10m-5-5h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: all 0.3s ease; width: 1.5rem; height: 1.5rem; background-size: contain; }
.nowclasses-wrapper .custom-accordion .accordion-button:not(.collapsed):after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230095D9'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3Cpath d='M7 12h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); transform: rotate(180deg); }
.nowclasses-wrapper .tilt-3d-wrapper { perspective: 1200px; width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px; }
.nowclasses-wrapper .single-faq-img { width: 450px; height: 450px; object-fit: cover; border-radius: 50%; border: 12px solid #ffffff; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.nowclasses-wrapper .tilt-3d-wrapper:hover .single-faq-img { transform: rotateY(-12deg) rotateX(6deg) scale(1.05); box-shadow: -20px 30px 50px rgba(0, 149, 217, 0.2); }
/* --- Home: Registration Form --- */
.nowclasses-wrapper .form-section-bg { position: relative; background-color: #FFF; padding: 90px 0; z-index: 1; }
.nowclasses-wrapper .form-section-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(135deg, rgba(0, 59, 92, 0.95), rgb(0 149 217 / 74%)), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&q=80') center / cover no-repeat; z-index: -1; border-radius: 0 0 50px 50px; }
.nowclasses-wrapper .form-card { border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); transition: transform 0.4s ease, box-shadow 0.4s ease; border: none; background: #ffffff; position: relative; z-index: 10; }
.nowclasses-wrapper .form-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 59, 92, 0.20); }
.nowclasses-wrapper .form-floating > .form-control, .nowclasses-wrapper .form-floating > .form-select { border-radius: 10px; border: 1px solid #e1e5eb; background-color: #f8fafc; font-size: 0.95rem; transition: all 0.3s ease; }
.nowclasses-wrapper .form-floating > .form-control:focus, .nowclasses-wrapper .form-floating > .form-select:focus { background-color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 149, 217, 0.1); border-color: #0095D9; }
.nowclasses-wrapper .form-floating > label { color: #6c757d; font-weight: 500; }
.nowclasses-wrapper .input-group-text { background-color: #f8fafc; border: 1px solid #e1e5eb; border-right: none; border-radius: 10px 0 0 10px; }
.nowclasses-wrapper .input-group .form-control { border-left: none; }
.nowclasses-wrapper .input-group:focus-within .input-group-text { border-color: #0095D9; background-color: #ffffff; }
.nowclasses-wrapper .program-check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.nowclasses-wrapper .program-check-group .form-check { padding-left: 0; margin-bottom: 0; }
.nowclasses-wrapper .program-check-group .form-check-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nowclasses-wrapper .program-check-group .form-check-label { display: inline-block; background-color: #f8fafc; border: 1px solid #e1e5eb; border-radius: 50px; padding: 8px 18px; font-size: 0.85rem; font-weight: 600; color: #495057; cursor: pointer; transition: all 0.3s ease; user-select: none; position: relative; z-index: 5; }
.nowclasses-wrapper .program-check-group .form-check-input:checked + .form-check-label { background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); color: #ffffff; border-color: transparent; box-shadow: 0 4px 12px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper .program-check-group .form-check-label:hover { border-color: #0095D9; color: #0095D9; transform: translateY(-2px); }
.nowclasses-wrapper .program-check-group .form-check-input:checked + .form-check-label:hover { color: #ffffff; }
/* --- Home: Testimonials --- */
.nowclasses-wrapper .content-section.testi-section { background: #FDF8F6; }
.nowclasses-wrapper .owl-stage { display: flex; padding-bottom: 1.5rem; padding-top: 1rem; }
.nowclasses-wrapper .owl-item { display: flex; flex: 1 0 auto; }
.nowclasses-wrapper .testimonial-card { background-color: #ffffff; border-radius: 16px; padding: 2.5rem 2rem; height: 100%; width: 100%; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.02); transform-style: preserve-3d; transition: transform 0.4s ease; }
.nowclasses-wrapper .testimonial-card:hover { transform: translateY(-10px) perspective(1000px) rotateX(5deg) rotateY(-5deg); box-shadow: 0 15px 40px rgba(0, 59, 92, 0.15); z-index: 10; }
.nowclasses-wrapper .profile-wrapper { position: relative; display: inline-block; margin-bottom: 1.5rem; }
.nowclasses-wrapper .profile-img { width: 65px !important; height: 65px; object-fit: cover; background-color: #e9ecef; box-shadow: 0 4px 10px rgba(0,0,0,0.1); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); border-radius: 0 !important; }
.nowclasses-wrapper .quote-badge { position: absolute; bottom: -5px; right: -5px; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); color: #ffffff; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 2px solid #ffffff; }
.nowclasses-wrapper .sparkle-cluster { position: absolute; top: 2rem; right: 2rem; width: 30px; height: 30px; }
.nowclasses-wrapper .sparkle { position: absolute; font-size: 10px; }
.nowclasses-wrapper .sparkle-red { color: #FF6B00; top: 8px; left: 0; }
.nowclasses-wrapper .sparkle-teal { color: #00D9B8; top: 0; right: 0; font-size: 12px; }
.nowclasses-wrapper .sparkle-blue { color: #7B5CFA; bottom: 0; right: 8px; }
.nowclasses-wrapper .review-text { color: #555555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; font-style: italic; }
.nowclasses-wrapper .star-rating { color: #FFA300; font-size: 1rem; margin-bottom: 1.5rem; }
.nowclasses-wrapper .author-name { color: #2D2D2D; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.2rem; }
.nowclasses-wrapper .review-date { color: #0095D9; font-size: 0.8rem; font-weight: 600; }
.nowclasses-wrapper .nav-arrows { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 1rem; }
.nowclasses-wrapper .nav-btn { width: 45px; height: 45px; border-radius: 50%; background-color: #ffffff; border: 1px solid #e9ecef; display: flex; align-items: center; justify-content: center; color: #2D2D2D; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: all 0.2s ease; }
.nowclasses-wrapper .nav-btn:hover { background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 15px rgba(123, 92, 250, 0.3); }
/* =================================================================
   16. RESPONSIVE
   ================================================================= */
@media (max-width: 991px) {
    .nowclasses-wrapper .dropdown-toggle[data-bs-toggle="dropdown"] { pointer-events: auto; }
    .nowclasses-wrapper .site-footer { padding-top: 50px; text-align: left; }
    .nowclasses-wrapper .footer-about-text { margin-left: auto; margin-right: auto; }
    .nowclasses-wrapper .footer-social, .nowclasses-wrapper .footer-contact-item { justify-content: left; text-align: left; }
    /* About Us only */
    .nowclasses-wrapper.page-about .section-heading { font-size: 2rem; }
    .nowclasses-wrapper.page-about .content-section { padding: 40px 0; }
    .nowclasses-wrapper.page-about .arch-container { max-width: 400px; margin: 0 auto; display: block; }
    .nowclasses-wrapper.page-about .text-lg-end { text-align: left !important; }
    .nowclasses-wrapper.page-about .order-mobile-last { order: 2; }
    .nowclasses-wrapper.page-about .order-mobile-first { order: 1; margin-bottom: 30px;}
    /* Home only */
    .nowclasses-wrapper.page-home .content-section { padding: 40px 0; }
    .nowclasses-wrapper.page-home .hero-title { font-size: 2.4rem; }
    .nowclasses-wrapper.page-home .hero-text-col { padding-top: 20px; padding-bottom: 20px; }
    .nowclasses-wrapper.page-home .hero-section { background: linear-gradient(rgba(6, 20, 35, 0.82), rgba(6, 20, 35, 0.75)), url('../images/banner-bg-mt.webp') center/cover no-repeat !important; min-height: auto; }
    .nowclasses-wrapper.page-home .hero-glass-card { padding: 32px 26px; border-radius: 22px; }
    .nowclasses-wrapper.page-home .hero-info-bar { flex-direction: column; align-items: flex-start; text-align: left; }
    .nowclasses-wrapper.page-home .nav-arrows { justify-content: center; }
    .nowclasses-wrapper.page-home .single-faq-img { width: 300px; height: 300px; }
}
@media (max-width: 767px) {
    .nowclasses-wrapper .site-footer { padding-top: 30px; }
    .nowclasses-wrapper .footer-bottom { margin-top: 30px; padding: 15px 0; }
    /* About Us only */
    .nowclasses-wrapper.page-about .content-section { padding: 30px 0; }
    .nowclasses-wrapper.page-about .section-header { margin-bottom: 25px; }
    .nowclasses-wrapper.page-about .section-heading { font-size: 1.6rem; margin-bottom: 8px; }
    .nowclasses-wrapper.page-about .section-badge { margin-bottom: 10px; padding: 6px 15px; font-size: 0.75rem; }
    .nowclasses-wrapper.page-about .btn-teal-custom { padding: 8px 20px; font-size: 0.9rem; }
    .nowclasses-wrapper.page-about .col-lg-6.ps-lg-5 { text-align: center !important; }
    .nowclasses-wrapper.page-about .col-lg-6.ps-lg-5 p.text-start { text-align: center !important; }
    .nowclasses-wrapper.page-about .vision-img-small { height: 150px; }
    .nowclasses-wrapper.page-about .arch-img { min-height: 400px; }
    /* Contact Us only */
    .nowclasses-wrapper.page-contact .contact-form-card { padding: 2rem; transform: none !important; }
    .nowclasses-wrapper.page-contact .map-container { height: 350px; }
    /* Home only */
    .nowclasses-wrapper.page-home .content-section { padding: 30px 0; }
    .nowclasses-wrapper.page-home .hero-text-col .d-flex.gap-3.align-items-center { justify-content: center !important; }
    .nowclasses-wrapper.page-home .hero-text-col { text-align: center; }
    .nowclasses-wrapper.page-home .hero-info-bar { align-items: center; text-align: center; }
    .nowclasses-wrapper.page-home .btn-hero-primary, .nowclasses-wrapper.page-home .btn-hero-outline { padding: 9px 22px; font-size: 0.9rem; }
    .nowclasses-wrapper.page-home .btn-teal-custom, .nowclasses-wrapper.page-home .btn-outline-orange { padding: 8px 20px; font-size: 0.9rem; }
    .nowclasses-wrapper.page-home .col-lg-6.ps-lg-5 { text-align: center !important; }
    .nowclasses-wrapper.page-home .col-lg-6.ps-lg-5 p.text-start { text-align: center !important; }
    .nowclasses-wrapper.page-home .list-unstyled li { justify-content: center; text-align: left; }
    .nowclasses-wrapper.page-home .stats-board .row { --bs-gutter-y: 1rem; --bs-gutter-x: 1rem; }
    .nowclasses-wrapper.page-home .stat-card { flex-direction: column; text-align: center; margin-bottom: 0; }
    .nowclasses-wrapper.page-home .stat-icon { width: 45px; height: 45px; margin: 0 auto -10px; border-radius: 50%; z-index: 2; }
    .nowclasses-wrapper.page-home .stat-icon svg { width: 20px; height: 20px; }
    .nowclasses-wrapper.page-home .stat-info { margin-left: 0; padding: 20px 5px 10px; width: 100%; border-radius: 12px; height: auto; min-height: 70px; }
    .nowclasses-wrapper.page-home .stat-value { font-size: 1.15rem; }
    .nowclasses-wrapper.page-home .stat-label { font-size: 0.7rem; }
    .nowclasses-wrapper.page-home .about-image-modern { margin-right: 0; margin-bottom: 15px; }
    .nowclasses-wrapper.page-home .about-image-modern img { height: 220px; clip-path: none; border-radius: 12px; }
    .nowclasses-wrapper.page-home .floating-experience-card { width: 130px; padding: 10px !important; bottom: -10px; right: -10px; }
    .nowclasses-wrapper.page-home .floating-experience-card h2 { font-size: 1.5rem !important; }
    .nowclasses-wrapper.page-home .floating-experience-card p { font-size: 0.7rem !important; }
    .nowclasses-wrapper.page-home .ref-card { padding: 1.5rem 1rem; }
    .nowclasses-wrapper.page-home .ref-icon-circle { width: 50px; height: 50px; margin-bottom: 1rem; }
    .nowclasses-wrapper.page-home .ref-icon-circle svg { width: 24px; height: 24px; }
    .nowclasses-wrapper.page-home .ref-card-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
    .nowclasses-wrapper.page-home .ref-card-text { font-size: 0.9rem; line-height: 1.4; margin-bottom: 10px !important; }
    .nowclasses-wrapper.page-home .program-card { padding: 5px; margin-bottom: 15px; }
    .nowclasses-wrapper.page-home .program-card .image-container { margin-bottom: 0.5rem; padding: 5px; }
    .nowclasses-wrapper.page-home .program-card .image-container img { width: 120px; height: 120px; }
    .nowclasses-wrapper.page-home .program-card .badge-icon { width: 35px; height: 35px; bottom: 5px; right: 0px; }
    .nowclasses-wrapper.page-home .program-card .badge-icon svg { width: 18px; height: 18px; }
    .nowclasses-wrapper.page-home .program-card h5 { font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
    .nowclasses-wrapper.page-home .trust-card { padding: 1.5rem 1rem; }
    .nowclasses-wrapper.page-home .icon-wrapper { width: 60px; height: 60px; font-size: 1.4rem; margin-bottom: 1rem; }
    .nowclasses-wrapper.page-home .trust-card-title { font-size: 1.15rem; }
    .nowclasses-wrapper.page-home .step-card { margin-bottom: 1.5rem; }
    .nowclasses-wrapper.page-home .icon-flip, .nowclasses-wrapper.page-home .icon-box { width: 80px; height: 80px; }
    .nowclasses-wrapper.page-home .icon-box i { font-size: 1.8rem; }
    .nowclasses-wrapper.page-home .form-section-bg { padding: 40px 0; }
    .nowclasses-wrapper.page-home .testimonial-card { padding: 1.5rem 1rem; }
}
/* =================================================================
   16b. GLOBAL ENHANCEMENT — carried over from inner pages
   ================================================================= */
html { scroll-behavior: smooth; }
/* =================================================================
   17. LOCATIONS PAGE (locations.html) — PAGE-SPECIFIC
   ================================================================= */
.nowclasses-wrapper.page-locations .hero-section { position: relative; background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%); color: #ffffff; padding-top: 2.5rem; padding-bottom: 4.25rem; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px; -webkit-mask-position: top left, bottom left; -webkit-mask-repeat: no-repeat, repeat-x; mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% calc(100% - 11.5px), 24px 12px; mask-position: top left, bottom left; mask-repeat: no-repeat, repeat-x; }
.nowclasses-wrapper.page-locations .hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E"); background-size: 24px 12px; background-position: bottom left; background-repeat: repeat-x; z-index: 3; pointer-events: none; }
.nowclasses-wrapper.page-locations .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: -1px; color: #ffffff; }
.nowclasses-wrapper.page-locations .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; }
.nowclasses-wrapper.page-locations .hero-badge { font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default; }
.nowclasses-wrapper.page-locations .hero-badge:hover { transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6); }
.nowclasses-wrapper.page-locations .btn-hero-primary:hover, .nowclasses-wrapper.page-locations .btn-hero-primary:focus { background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff; box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-locations .btn-hero-outline:hover, .nowclasses-wrapper.page-locations .btn-hero-outline:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-locations .hero-capsule-container { width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto; background-color: rgba(255,255,255,0.1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; cursor: pointer; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg); }
.nowclasses-wrapper.page-locations .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.nowclasses-wrapper.page-locations .hero-capsule-container:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px); box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #FFD65A; }
.nowclasses-wrapper.page-locations .location-main { background-color: #f8fafc; background-image: radial-gradient(#cbd5e1 2px, transparent 2px); background-size: 30px 30px; padding: 60px 0; }
.nowclasses-wrapper.page-locations .location-card { border-radius: 30px; background: #ffffff; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1); height: 100%; position: relative; z-index: 1; transform-style: preserve-3d; will-change: transform, box-shadow; transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.nowclasses-wrapper.page-locations .location-card:hover { transform: perspective(1200px) rotateX(4deg) rotateY(-3deg) scale3d(1.02, 1.02, 1.02) translateY(-12px); z-index: 2; }
.nowclasses-wrapper.page-locations .location-card:hover .badge, .nowclasses-wrapper.page-locations .location-card:hover .card-title, .nowclasses-wrapper.page-locations .location-card:hover .btn, .nowclasses-wrapper.page-locations .location-card:hover .map-container { transform: translateZ(40px); }
.nowclasses-wrapper.page-locations .location-card:hover .btn { box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.nowclasses-wrapper.page-locations .location-card .badge, .nowclasses-wrapper.page-locations .location-card .card-title, .nowclasses-wrapper.page-locations .location-card .btn { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease; }
.nowclasses-wrapper.page-locations .map-container { position: relative; padding-bottom: 56.25%; height: 350px !important; overflow: hidden; border-radius: 26px 26px 0 0; border-bottom: 2px solid #f8fafc; transform: translateZ(20px); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.nowclasses-wrapper.page-locations .map-container iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.nowclasses-wrapper.page-locations .card-dso { border: 4px solid #0095D9; }
.nowclasses-wrapper.page-locations .card-dso:hover { box-shadow: -15px 25px 45px rgba(0, 149, 217, 0.25); }
.nowclasses-wrapper.page-locations .btn-dso { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); color: #ffffff; border: none; }
.nowclasses-wrapper.page-locations .btn-dso:hover { background: linear-gradient(135deg, #0095D9 0%, #003B5C 100%); color: #ffffff; }
.nowclasses-wrapper.page-locations .badge-dso { background-color: #e0f2fe; color: #0095D9; border: 1px solid #0095D9; }
.nowclasses-wrapper.page-locations .card-dso .text-info { color: #0095D9 !important; }
.nowclasses-wrapper.page-locations .card-jlt { border: 4px solid #FF6B00; }
.nowclasses-wrapper.page-locations .card-jlt:hover { box-shadow: -15px 25px 45px rgba(255, 107, 0, 0.25); }
.nowclasses-wrapper.page-locations .btn-jlt { background: linear-gradient(135deg, #FFA53D 0%, #FF6B00 100%); color: #ffffff; border: none; }
.nowclasses-wrapper.page-locations .btn-jlt:hover { background: linear-gradient(135deg, #FF6B00 0%, #FFA53D 100%); color: #ffffff; }
.nowclasses-wrapper.page-locations .badge-jlt { background-color: #fff6ec; color: #FF6B00; border: 1px solid #FF6B00; }
.nowclasses-wrapper.page-locations .card-jlt .text-danger { color: #FF6B00 !important; }
.nowclasses-wrapper.page-locations .address-text { color: #475569; font-size: 0.95rem; line-height: 1.6; }
.nowclasses-wrapper.page-locations .card-title { color: #1e293b; }
.nowclasses-wrapper.page-locations .cta-strip { background: url(../images/cta-bg.webp) no-repeat center top; background-size: cover; padding: 45px 0; }
.nowclasses-wrapper.page-locations .site-footer { background-color: #ffffff; padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); background: linear-gradient(102deg,#f4fbff 2.94%,#f3f9ff 26.23%,#fff8ee 53.32%,#ebfdff 91%); background: #0f172a; }
@media (max-width: 767.98px) {
    .nowclasses-wrapper.page-locations .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper.page-locations .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper.page-locations .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
}
/* =================================================================
   18. MATH & SCIENCE CLUB PAGE (math-science-club.html) — PAGE-SPECIFIC
   ================================================================= */
.nowclasses-wrapper.page-math-science-club .hero-section { position: relative; background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%); color: #ffffff; padding-top: 2.5rem; padding-bottom: 4.25rem; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px; -webkit-mask-position: top left, bottom left; -webkit-mask-repeat: no-repeat, repeat-x; mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% calc(100% - 11.5px), 24px 12px; mask-position: top left, bottom left; mask-repeat: no-repeat, repeat-x; }
.nowclasses-wrapper.page-math-science-club .hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E"); background-size: 24px 12px; background-position: bottom left; background-repeat: repeat-x; z-index: 3; pointer-events: none; }
.nowclasses-wrapper.page-math-science-club .hero-content { position: relative; z-index: 2; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .hero-breadcrumb { display: inline-block; font-size: 0.75rem; letter-spacing: 0.5px; color: #b0b8d6; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.35rem 1rem; border-radius: 50px; transform: translateZ(20px); }
.nowclasses-wrapper.page-math-science-club .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: -1px; color: #ffffff; transform: translateZ(40px); }
.nowclasses-wrapper.page-math-science-club .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; transform: translateZ(30px); }
.nowclasses-wrapper.page-math-science-club .hero-badge { font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default; }
.nowclasses-wrapper.page-math-science-club .hero-badge:hover { transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6); }
.nowclasses-wrapper.page-math-science-club .btn-hero-primary { background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%); color: #ffffff; border: none; font-weight: 600; padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transform: translateZ(50px); }
.nowclasses-wrapper.page-math-science-club .btn-hero-primary:hover, .nowclasses-wrapper.page-math-science-club .btn-hero-primary:focus { background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff; box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03) translateZ(50px); }
.nowclasses-wrapper.page-math-science-club .btn-hero-outline { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600; padding: 0.6rem 1.8rem; border-radius: 50px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); transform: translateZ(50px); }
.nowclasses-wrapper.page-math-science-club .btn-hero-outline:hover, .nowclasses-wrapper.page-math-science-club .btn-hero-outline:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03) translateZ(50px); }
.nowclasses-wrapper.page-math-science-club .hero-capsule-container { width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto; background-color: rgba(255,255,255,0.1); cursor: pointer; transform-style: preserve-3d; transform: perspective(1000px) rotateX(15deg) rotateY(-15deg); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s ease; will-change: transform; }
.nowclasses-wrapper.page-math-science-club .hero-capsule-container:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(20px); box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); }
.nowclasses-wrapper.page-math-science-club .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: translateZ(30px) scale(1.05); transition: transform 0.5s ease; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section * { box-sizing: border-box; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section { color: #3A3654; background-color: #FFF9F0; overflow-x: hidden; line-height: 1.7; perspective: 1200px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h1, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h2, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h3, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h4, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h5, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section h6 { color: #16142B; font-weight: 700; letter-spacing: -0.01em; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .section-padding { padding: 88px 0; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .text-gradient-purple { background: linear-gradient(135deg, #7C3AED, #FF5A5F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .text-gradient-warm { background: linear-gradient(135deg, #FF5A5F, #F5A200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-purple { background: #F1E9FE; color: #7C3AED; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-coral { background: #FFE7E7; color: #FF5A5F; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-teal { color: #ffffff; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); box-shadow: 0 6px 18px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-yellow { color: #ffffff; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); box-shadow: 0 6px 18px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-green { color: #ffffff; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); box-shadow: 0 6px 18px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .eyebrow-onDark { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .btn-modern { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: 50px; font-weight: 700; font-size: 1.08rem; letter-spacing: 0.02em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .btn-primary-glow { background: linear-gradient(135deg, #FF5A5F, #7C3AED); color: white; box-shadow: 0 12px 26px rgba(124, 58, 237, 0.35); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .btn-primary-glow:hover { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(124, 58, 237, 0.45); color: white; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .btn-white-glow { background: #ffffff; color: #7C3AED; box-shadow: 0 12px 26px rgba(0,0,0,0.18); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .btn-white-glow:hover { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0,0,0,0.24); color: #FF5A5F; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .hero-section { background: #F3F4FE; position: relative; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card { background: #FFFFFF; padding: 22px; border-radius: 18px; box-shadow: 0 4px 14px rgba(22, 20, 43, 0.06); display: flex; align-items: center; gap: 18px; margin-bottom: 16px; border-left: 5px solid transparent; transition: box-shadow 0.25s ease; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card:hover { box-shadow: 0 20px 40px rgba(22, 20, 43, 0.15); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card > * { transform: translateZ(20px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card.card-coral { border-left-color: #FF5A5F; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card.card-yellow { border-left-color: #F5A200; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card.card-green { border-left-color: #16A34A; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card.card-teal { border-left-color: #0D9488; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-card.card-purple { border-left-color: #7C3AED; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .feature-icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; color: white; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .icon-coral { background: linear-gradient(135deg, #FF5A5F, #FF8A8D); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .icon-yellow { background: linear-gradient(135deg, #F5A200, #FFC94D); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .icon-green { background: linear-gradient(135deg, #16A34A, #4ADE80); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .icon-teal { background: linear-gradient(135deg, #0D9488, #2DD4BF); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .icon-purple { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .hero-img-wrapper { position: relative; z-index: 1; padding: 20px; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .hero-blob { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #7C3AED, #FF5A5F); border-radius: 90px 130px 130px 30px; opacity: 0.16; z-index: -1; transform: rotate(4deg) translateZ(-20px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .hero-img-shaped { width: 100%; max-width: 460px; aspect-ratio: 3.5 / 5; object-fit: cover; border-radius: 80px 120px 120px 20px; display: block; margin: 0 auto; box-shadow: 0 24px 50px rgba(22, 20, 43, 0.16); transform: translateZ(30px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-look-section { background: #ffffff; position: relative; overflow: hidden; padding: 60px 0 88px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-look-section .container { position: relative; z-index: 1; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-heading { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.25; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-rule { width: 44px; height: 3px; border-radius: 4px; background: #0D9488; margin: 16px auto 20px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-copy p { font-size: 1rem; color: #3A3654; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .closer-copy p + p { margin-top: 12px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-card { background: #FFFFFF; border-radius: 28px; overflow: hidden; box-shadow: 0 14px 34px rgba(22, 20, 43, 0.10); height: 100%; transition: all 0.35s ease; display: flex; flex-direction: column; padding: 0; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-card:hover { box-shadow: 0 34px 60px rgba(22, 20, 43, 0.25); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-topbar { height: 10px; width: 100%; transform: translateZ(10px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bar-purple { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bar-green { background: linear-gradient(90deg, #16A34A, #4ADE80); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bar-yellow { background: linear-gradient(90deg, #F5A200, #FFD166); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); transition: clip-path 0.4s ease, transform 0.4s ease; transform: translateZ(15px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-card:hover .program-img { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 90%); transform: translateZ(35px) scale(1.05); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-content { padding: 32px 28px; margin: -18px 14px 22px 14px; border-radius: 22px; position: relative; z-index: 2; flex-grow: 1; transform: translateZ(25px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-purple { background: #F1E9FE; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-green { background: #E4F9EC; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-yellow { background: #FFF3DC; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-chip { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: white; margin-bottom: 14px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .chip-purple { background: #7C3AED; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .chip-green { background: #16A34A; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .chip-yellow { background: #C97F00; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-list { list-style: none; padding: 0; margin: 0; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-list li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 0.95rem; color: #6B6690; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .program-list li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; font-size: 0.95rem; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-purple .program-list li::before { color: #7C3AED; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-green .program-list li::before { color: #16A34A; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bubble-yellow .program-list li::before { color: #F5A200; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section { background: #16142B; position: relative; overflow: hidden; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section::before { content: ''; position: absolute; top: -20%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(124,58,237,0.35) 0%, rgba(0,0,0,0) 70%); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section::after { content: ''; position: absolute; bottom: -25%; right: -8%; width: 550px; height: 550px; background: radial-gradient(circle, rgba(255,90,95,0.28) 0%, rgba(0,0,0,0) 70%); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section h2, .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section p { color: white; position: relative; z-index: 2; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .method-section .text-muted { color: #B4AFD6 !important; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; position: relative; z-index: 2; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item { background: #2B2750; border-radius: 28px; padding: 30px; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; justify-content: center; grid-column: span 2; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item:hover { border-color: rgba(255,255,255,0.3); box-shadow: 0 15px 35px rgba(0,0,0,0.5); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item > * { transform: translateZ(30px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item h5 { color: white; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item p { color: #B4AFD6; margin-bottom: 0; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 18px; color: white; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item:nth-child(4), .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item:nth-child(5) { grid-column: span 3; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item:nth-child(1) { background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(124,58,237,0.12)); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item:nth-child(4) { background: linear-gradient(135deg, rgba(255,90,95,0.28), rgba(255,90,95,0.10)); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .english-section { background: #eff5f6; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .image-stack { position: relative; transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .image-stack-img { border-radius: 28px; width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 14px 34px rgba(22, 20, 43, 0.10); position: relative; z-index: 2; transform: translateZ(40px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .image-stack-backdrop { position: absolute; top: 22px; left: 22px; right: -22px; bottom: -22px; background: linear-gradient(135deg, #F5A200, #FF5A5F); border-radius: 28px; z-index: 1; transform: translateZ(10px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .modern-list { border-left: 3px solid rgba(245, 162, 0, 0.3); padding-left: 22px; margin-left: 10px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .modern-list-item { position: relative; margin-bottom: 26px; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .modern-list-item::before { content: ''; position: absolute; left: -30px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #F5A200; border: 3px solid #FFF3DC; box-shadow: 0 0 0 3px #FFF3DC; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gain-box { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; background: #FFFFFF; padding: 16px 18px; border-radius: 16px; box-shadow: 0 4px 14px rgba(22, 20, 43, 0.06); transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gain-box > * { transform: translateZ(15px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gain-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.95rem; color: white; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gi-purple { background: #7C3AED; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gi-coral { background: #FF5A5F; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gi-teal { background: #0D9488; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gi-green { background: #16A34A; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .gi-yellow { background: #F5A200; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-banner { background: #16142B; border-radius: 36px; padding: 64px; position: relative; overflow: hidden; box-shadow: 0 30px 60px rgba(22, 20, 43, 0.35); transform-style: preserve-3d; }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-bg-shape-1 { position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(124,58,237,0.45) 0%, rgba(0,0,0,0) 70%); z-index: 0; transform: translateZ(-10px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-bg-shape-2 { position: absolute; bottom: -40%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,90,95,0.35) 0%, rgba(0,0,0,0) 70%); z-index: 0; transform: translateZ(-10px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-content { position: relative; z-index: 2; color: white; transform: translateZ(40px); }
.nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; border: 6px solid rgba(255,255,255,0.15); position: relative; z-index: 2; transform: translateZ(60px); }
.nowclasses-wrapper.page-math-science-club .cta-strip { background: url(../images/cta-bg.webp) no-repeat center top; background-size: cover; padding: 45px 0; }
.nowclasses-wrapper.page-math-science-club .site-footer { background-color: #ffffff; padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); background: linear-gradient(102deg,#f4fbff 2.94%,#f3f9ff 26.23%,#fff8ee 53.32%,#ebfdff 91%); background: #0f172a; }
@media (max-width: 767.98px) {
    .nowclasses-wrapper.page-math-science-club .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper.page-math-science-club .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper.page-math-science-club .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
}
@media (max-width: 991px) {
    .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .bento-item { grid-column: span 6 !important; }
    .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-banner { padding: 44px 24px; text-align: center; }
    .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .cta-img { margin-top: 30px; width: 55%; margin-left: auto; margin-right: auto; display: block; }
    .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .hero-img-shaped { border-radius: 60px 80px 80px 16px; max-width: 100%; }
    .nowclasses-wrapper.page-math-science-club .now-brain-boosters-section .section-padding { padding: 64px 0; }
}
/* =================================================================
   19. IB PAGE (IB.html) — PAGE-SPECIFIC
   ================================================================= */
@keyframes fadeIn3D { from { opacity: 0; transform: rotateX(-15deg) translateY(10px); } to { opacity: 1; transform: rotateX(0) translateY(0); } }
body.page-ib { perspective: 1200px; background-color: #f4f6fa; }
.nowclasses-wrapper.page-ib { font-family: 'SUSE', sans-serif; color: #2D2D2D; background-color: #FFF; min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; font-weight: 300; box-shadow: 0 0 40px rgba(0,0,0,0.05); }
.nowclasses-wrapper.page-ib .top-bar { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); font-size: 0.85rem; color: #ffffff; border-bottom: none; font-weight: 400; padding-top: 8px; padding-bottom: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); position: relative; z-index: 1040; }
.nowclasses-wrapper.page-ib .navbar { background-color: #fff; padding-top: 15px; padding-bottom: 15px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15); z-index: 1030; transform: translateZ(20px); }
.nowclasses-wrapper.page-ib .dropdown-menu { border: none; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-radius: 12px; }
.nowclasses-wrapper.page-ib .btn-primary-custom { background: linear-gradient(315deg, #FFA53D 0%, #FF6B00 100%); color: #fff; font-weight: 500; border: none; padding: 10px 28px; border-radius: 50px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 8px 15px rgba(255, 107, 0, 0.3), inset 0 -3px 0 rgba(0,0,0,0.15); }
.nowclasses-wrapper.page-ib .btn-primary-custom:hover { transform: perspective(400px) translateZ(15px) translateY(-3px); box-shadow: 0 15px 25px rgba(255, 107, 0, 0.45), inset 0 -3px 0 rgba(0,0,0,0.15); color:#fff; }
.nowclasses-wrapper.page-ib .hero-section { position: relative; background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%); color: #ffffff; padding-top: 2.5rem; padding-bottom: 4.25rem; border-top-left-radius: 12px; border-top-right-radius: 12px; box-shadow: inset 0 -20px 40px rgba(0,0,0,0.3); -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px; -webkit-mask-position: top left, bottom left; -webkit-mask-repeat: no-repeat, repeat-x; mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% calc(100% - 11.5px), 24px 12px; mask-position: top left, bottom left; mask-repeat: no-repeat, repeat-x; }
.nowclasses-wrapper.page-ib .hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E"); background-size: 24px 12px; background-position: bottom left; background-repeat: repeat-x; z-index: 3; pointer-events: none; }
.nowclasses-wrapper.page-ib .hero-grid-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; transform: perspective(1000px) rotateX(20deg) scale(1.1); transform-origin: top center; }
.nowclasses-wrapper.page-ib .hero-content { position: relative; z-index: 2; transform-style: preserve-3d; }
.nowclasses-wrapper.page-ib .hero-breadcrumb { display: inline-block; font-size: 0.75rem; letter-spacing: 0.5px; color: #b0b8d6; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.35rem 1rem; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.nowclasses-wrapper.page-ib .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: -1px; color: #ffffff; text-shadow: 2px 4px 10px rgba(0,0,0,0.5); }
.nowclasses-wrapper.page-ib .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; text-shadow: 1px 2px 5px rgba(0,0,0,0.3); }
.nowclasses-wrapper.page-ib .hero-badge { font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.nowclasses-wrapper.page-ib .hero-badge:hover { transform: perspective(600px) rotateX(15deg) rotateY(-10deg) translateZ(10px) translateY(-4px) scale(1.05); box-shadow: -5px 15px 25px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.6); }
.nowclasses-wrapper.page-ib .btn-hero-primary { background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%); color: #ffffff; border: none; font-weight: 600; padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35), inset 0 -3px 0 rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.nowclasses-wrapper.page-ib .btn-hero-primary:hover, .nowclasses-wrapper.page-ib .btn-hero-primary:focus { background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff; box-shadow: 0 15px 30px rgba(255, 123, 35, 0.5), inset 0 -3px 0 rgba(0,0,0,0.15); transform: perspective(600px) rotateX(10deg) translateZ(15px) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-ib .btn-hero-outline { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600; padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }
.nowclasses-wrapper.page-ib .btn-hero-outline:hover, .nowclasses-wrapper.page-ib .btn-hero-outline:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(10deg) translateZ(15px) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-ib .hero-capsule-container { width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), -15px 25px 45px rgba(0, 0, 0, 0.35); overflow: hidden; margin: 0 auto; background-color: rgba(255,255,255,0.1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; cursor: pointer; transform: perspective(1200px) rotateX(15deg) rotateY(-20deg) translateZ(20px); }
.nowclasses-wrapper.page-ib .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: translateZ(30px); }
.nowclasses-wrapper.page-ib .hero-capsule-container:hover { transform: perspective(1200px) rotateX(5deg) rotateY(-5deg) scale3d(1.08, 1.08, 1.08) translateZ(40px) translateY(-10px); box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), -25px 40px 60px rgba(0, 0, 0, 0.5); border-color: #FFD65A; }
.nowclasses-wrapper.page-ib .capsule-page-design { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f8fafc; color: #475569; padding: 3rem 0; box-shadow: inset 0 10px 20px rgba(0,0,0,0.02); }
.nowclasses-wrapper.page-ib .capsule-page-design.ib-teach { background: #e3e8ff; }
.nowclasses-wrapper.page-ib .capsule-page-design h2 { color: #0f172a; font-weight: 800; margin: 1rem 0 2rem 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.05); }
.nowclasses-wrapper.page-ib .capsule-page-design h5 { color: #0f172a; font-weight: 700; margin-bottom: 0.25rem; font-size: 1.15rem; }
.nowclasses-wrapper.page-ib .capsule-page-design p { line-height: 1.6; color: #64748b; }
.nowclasses-wrapper.page-ib .capsule-page-design .section-badge { display: inline-block; padding: 0.35rem 1.5rem; border: 2px dashed #cbd5e1; border-radius: 50px; color: #ffffff; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.nowclasses-wrapper.page-ib .capsule-page-design .section-badge:hover { transform: translateZ(10px) translateY(-2px); }
.nowclasses-wrapper.page-ib .capsule-page-design .modern-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 2.25rem 1.75rem 1.75rem 1.75rem; height: 100%; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.nowclasses-wrapper.page-ib .capsule-page-design .modern-card:hover { transform: perspective(1000px) rotateX(8deg) rotateY(-8deg) translateZ(20px) translateY(-10px); box-shadow: -15px 25px 45px -10px rgba(0, 0, 0, 0.15), 0 15px 20px -3px rgba(0, 0, 0, 0.1); border-color: #cbd5e1; }
.nowclasses-wrapper.page-ib .capsule-page-design .modern-card > * { transform: translateZ(20px); transition: transform 0.3s ease; }
.nowclasses-wrapper.page-ib .capsule-page-design .card-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.nowclasses-wrapper.page-ib .capsule-page-design .card-icon-wrap { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #ffffff; margin-bottom: 1.25rem; box-shadow: 0 6px 12px rgba(0,0,0,0.15); transition: transform 0.3s ease; }
.nowclasses-wrapper.page-ib .capsule-page-design .modern-card:hover .card-icon-wrap { transform: translateZ(40px) scale(1.1); }
.nowclasses-wrapper.page-ib .capsule-page-design .card-num { position: absolute; top: 1.5rem; right: 1.5rem; font-weight: 700; font-size: 0.9rem; transition: transform 0.3s ease; }
.nowclasses-wrapper.page-ib .capsule-page-design .modern-card:hover .card-num { transform: translateZ(30px); }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-blue { background-color: #0ea5e9; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-blue { color: #0ea5e9; }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-purple { background-color: #a855f7; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-purple { color: #a855f7; }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-red { background-color: #f43f5e; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-red { color: #f43f5e; }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-yellow { background-color: #f59e0b; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-yellow { color: #f59e0b; }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-green { background-color: #10b981; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-green { color: #10b981; }
.nowclasses-wrapper.page-ib .capsule-page-design .bg-pink { background-color: #ec4899; }
.nowclasses-wrapper.page-ib .capsule-page-design .text-pink { color: #ec4899; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-strip { display: flex; align-items: center; background-color: #ffffff; border-radius: 100px; padding: 1rem 2.5rem 1rem 1rem; margin-bottom: 1.25rem; border: 1px solid #f1f5f9; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; transform-style: preserve-3d; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0,0,0,0.03); }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-strip:hover { transform: perspective(1000px) rotateX(6deg) rotateY(-2deg) translateZ(15px) translateY(-6px) scale(1.02); box-shadow: -10px 20px 35px -10px rgba(0, 0, 0, 0.15), 0 10px 15px rgba(0,0,0,0.05); border-color: #e2e8f0; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-icon { width: 75px; height: 75px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; margin-right: 1.75rem; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: inset 0 -3px 8px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.08); }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-strip:hover .capsule-icon { transform: translateZ(30px) scale(1.1) rotate(10deg); }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-content { text-align: left; flex-grow: 1; transition: transform 0.4s ease; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-strip:hover .capsule-content { transform: translateZ(20px); }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-content p { font-size: 0.95rem; margin-bottom: 0; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-bg-blue { background-color: #e0f2fe; color: #0284c7; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-bg-purple { background-color: #f3e8ff; color: #9333ea; }
.nowclasses-wrapper.page-ib .capsule-page-design .capsule-bg-red { background-color: #ffe4e6; color: #e11d48; }
.nowclasses-wrapper.page-ib .cta-strip { background: url(images/cta-bg.webp) no-repeat center top; background-size: cover; padding: 60px 0; position: relative; transform-style: preserve-3d; }
.nowclasses-wrapper.page-ib .cta-strip > .container-fluid { position: relative; z-index: 2; transform: translateZ(30px); }
.nowclasses-wrapper.page-ib .site-footer { background: #0f172a; padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); box-shadow: 0 -15px 30px rgba(0,0,0,0.2); position: relative; z-index: 10; }
.nowclasses-wrapper.page-ib .footer-logo:hover { transform: scale(1.05) translateZ(10px); }
.nowclasses-wrapper.page-ib .footer-about-text { font-size: 1.05rem; line-height: 1.75; max-width: 380px; margin: 20px 0 26px; font-weight: 400; color: #cbd5e1; }
.nowclasses-wrapper.page-ib .footer-social { display: flex; gap: 14px; perspective: 400px; }
.nowclasses-wrapper.page-ib .footer-social a:hover { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); border-color: transparent; color: #fff; transform: translateZ(15px) translateY(-6px) rotate(10deg); box-shadow: -5px 10px 20px rgba(0, 149, 217, 0.4); }
.nowclasses-wrapper.page-ib .footer-heading { font-weight: 700; font-size: 1.4rem; margin-bottom: 28px; color: #fff; text-shadow: 1px 2px 4px rgba(0,0,0,0.3); }
.nowclasses-wrapper.page-ib .footer-links a { text-decoration: none; font-size: 1.05rem; transition: all 0.3s ease; display: inline-block; color: #cbd5e1; font-weight: 400; }
.nowclasses-wrapper.page-ib .footer-links a:hover { color: #0095D9; transform: translateX(8px) translateZ(5px); }
.nowclasses-wrapper.page-ib .footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; font-size: 1.02rem; line-height: 1.5; max-width: 320px; transition: transform 0.3s ease; font-weight: 400; color: #cbd5e1; }
.nowclasses-wrapper.page-ib .footer-contact-item:hover { transform: translateX(8px) translateZ(5px); }
.nowclasses-wrapper.page-ib .footer-contact-item a { text-decoration: none; transition: color 0.3s ease; color: #cbd5e1; }
.nowclasses-wrapper.page-ib .footer-bottom { border-top: 1px solid rgb(255 255 255 / 12%); margin-top: 55px; padding: 24px 0; text-align: center; font-size: 0.95rem; color: #94a3b8; }
@media (min-width: 992px) {
    .nowclasses-wrapper.page-ib .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; animation: fadeIn3D 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: top center; }
}
@media (max-width: 767.98px) {
    .nowclasses-wrapper.page-ib .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper.page-ib .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper.page-ib .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
    .nowclasses-wrapper.page-ib .hero-grid-overlay { transform: perspective(800px) rotateX(10deg); }
}
@media (max-width: 768px) {
    .nowclasses-wrapper.page-ib .capsule-page-design .capsule-strip { flex-direction: column; text-align: center; border-radius: 24px; padding: 2rem 1.5rem; }
    .nowclasses-wrapper.page-ib .capsule-page-design .capsule-icon { margin-right: 0; margin-bottom: 1.25rem; }
    .nowclasses-wrapper.page-ib .capsule-page-design .capsule-content { text-align: center; }
}
/* =================================================================
   20. JUNIOR CLUB PAGE (junior-club.html) — PAGE-SPECIFIC
   ================================================================= */
@keyframes jc-wiggle { 0%, 100% { transform: rotate(10deg) translateZ(80px); } 50% { transform: rotate(-6deg) scale(1.05) translateZ(90px); } }
.nowclasses-wrapper.page-junior-club .navbar-brand { font-family: 'SUSE', sans-serif; font-size: 1.5rem; font-weight: 600; color: #2D2D2D; text-decoration: none; }
.nowclasses-wrapper.page-junior-club .hero-section { position: relative; background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%); color: #ffffff; padding-top: 2.5rem; padding-bottom: 4.25rem; border-top-left-radius: 12px; border-top-right-radius: 12px; -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px; -webkit-mask-position: top left, bottom left; -webkit-mask-repeat: no-repeat, repeat-x; mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E"); mask-size: 100% calc(100% - 11.5px), 24px 12px; mask-position: top left, bottom left; mask-repeat: no-repeat, repeat-x; }
.nowclasses-wrapper.page-junior-club .hero-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E"); background-size: 24px 12px; background-position: bottom left; background-repeat: repeat-x; z-index: 3; pointer-events: none; }
.nowclasses-wrapper.page-junior-club .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Baloo 2', 'SUSE', sans-serif; letter-spacing: -1px; color: #ffffff; }
.nowclasses-wrapper.page-junior-club .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; }
.nowclasses-wrapper.page-junior-club .hero-badge { font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default; }
.nowclasses-wrapper.page-junior-club .hero-badge:hover { transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6); }
.nowclasses-wrapper.page-junior-club .btn-hero-primary:hover, .nowclasses-wrapper.page-junior-club .btn-hero-primary:focus { background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff; box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-junior-club .btn-hero-outline:hover, .nowclasses-wrapper.page-junior-club .btn-hero-outline:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03); }
.nowclasses-wrapper.page-junior-club .hero-capsule-container { width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto; background-color: rgba(255,255,255,0.1); transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; transform-style: preserve-3d; cursor: pointer; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg); }
.nowclasses-wrapper.page-junior-club .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: translateZ(20px); transition: transform 0.5s ease; }
.nowclasses-wrapper.page-junior-club .hero-capsule-container:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px); box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #FFD65A; }
.nowclasses-wrapper.page-junior-club .hero-capsule-container:hover img { transform: translateZ(40px) scale(1.1); }
.nowclasses-wrapper.page-junior-club .tilt-card { transform-style: preserve-3d; will-change: transform; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: box-shadow 0.3s ease; }
.nowclasses-wrapper.page-junior-club .tilt-card:hover { z-index: 20; }
.nowclasses-wrapper.page-junior-club .tilt-card .icon-wrapper, .nowclasses-wrapper.page-junior-club .tilt-card .active-icon, .nowclasses-wrapper.page-junior-club .tilt-card .icon-container, .nowclasses-wrapper.page-junior-club .tilt-card .card-img-top { transform: translateZ(50px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nowclasses-wrapper.page-junior-club .tilt-card h3, .nowclasses-wrapper.page-junior-club .tilt-card .feature-title, .nowclasses-wrapper.page-junior-club .tilt-card .step-title, .nowclasses-wrapper.page-junior-club .tilt-card .track-name { transform: translateZ(35px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nowclasses-wrapper.page-junior-club .tilt-card p, .nowclasses-wrapper.page-junior-club .tilt-card .custom-list, .nowclasses-wrapper.page-junior-club .tilt-card .skills-text { transform: translateZ(20px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nowclasses-wrapper.page-junior-club .tilt-card .watermark-icon, .nowclasses-wrapper.page-junior-club .tilt-card .shape-layer { transform: translateZ(-20px); }
.nowclasses-wrapper.page-junior-club .tilt-card .step-badge, .nowclasses-wrapper.page-junior-club .tilt-card .age-badge, .nowclasses-wrapper.page-junior-club .tilt-card .vertical-ribbon { transform: translateZ(60px); }
.nowclasses-wrapper.page-junior-club .jc-sticker { position: absolute; top: -18px; right: -18px; width: 108px; height: 108px; background: #FFB800; border-radius: 50%; border: 3px dashed #fff; display: flex; align-items: center; justify-content: center; text-align: center; color: #241748; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 0.78rem; line-height: 1.25; box-shadow: 0 10px 24px rgba(255,201,60,0.5); transform: rotate(10deg) translateZ(80px); animation: jc-wiggle 4.5s ease-in-out infinite; z-index: 25; }
.nowclasses-wrapper.page-junior-club .cta-strip { background: url(../images/cta-bg.webp) no-repeat center top; background-size: cover; padding: 45px 0; }
.nowclasses-wrapper.page-junior-club .site-footer { background-color: #ffffff; padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); background: linear-gradient(102deg,#f4fbff 2.94%,#f3f9ff 26.23%,#fff8ee 53.32%,#ebfdff 91%); background: #0f172a; }
.nowclasses-wrapper.page-junior-club .jc-section { --jc-coral: #FF2D6B; --jc-sun: #FFB800; --jc-teal: #00C2A8; --jc-violet: #7C1FE0; --jc-sky: #CFEFFF; --jc-cream: #FFE9B8; --jc-ink: #241748; overflow: hidden; position: relative; font-family: 'SUSE', sans-serif; }
.nowclasses-wrapper.page-junior-club .jc-section h1, .nowclasses-wrapper.page-junior-club .jc-section h2, .nowclasses-wrapper.page-junior-club .jc-section h3, .nowclasses-wrapper.page-junior-club .jc-section h4 { font-family: 'Baloo 2', 'SUSE', sans-serif; color: var(--jc-ink); font-weight: 700; }
.nowclasses-wrapper.page-junior-club .jc-section-padding { padding: 70px 0; }
.nowclasses-wrapper.page-junior-club .jc-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--jc-coral); font-weight: 700; font-size: 0.85rem; padding: 8px 18px; border-radius: 50px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); margin-bottom: 14px; }
.nowclasses-wrapper.page-junior-club .jc-eyebrow-light { background: rgba(255,255,255,0.2); color: #fff; box-shadow: none; }
.nowclasses-wrapper.page-junior-club .jc-subtext { max-width: 620px; margin: 0 auto; color: #6a6483; font-weight: 500; }
.nowclasses-wrapper.page-junior-club .jc-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--jc-coral); color: #fff !important; font-weight: 700; padding: 14px 28px; border-radius: 50px; text-decoration: none; box-shadow: 0 6px 0 #C4004A; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.nowclasses-wrapper.page-junior-club .jc-btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #C4004A; color: #fff !important; }
.nowclasses-wrapper.page-junior-club .jc-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #C4004A; }
.nowclasses-wrapper.page-junior-club .jc-btn-light { background: #FFB800; box-shadow: 0 6px 0 #C98800; color: var(--jc-ink) !important; }
.nowclasses-wrapper.page-junior-club .jc-btn-light:hover { color: var(--jc-ink) !important; box-shadow: 0 9px 0 #C98800; }
.nowclasses-wrapper.page-junior-club .jc-hero { position: relative; z-index: 1; padding: 80px 0 40px; }
.nowclasses-wrapper.page-junior-club .jc-hero h1 { font-size: 2.6rem; line-height: 1.15; margin-bottom: 18px; }
.nowclasses-wrapper.page-junior-club .jc-lead { font-size: 1.08rem; color: #574f78; font-weight: 500; max-width: 540px; margin-bottom: 24px; }
.nowclasses-wrapper.page-junior-club .jc-hero-stats { display: flex; gap: 32px; margin-top: 32px; }
.nowclasses-wrapper.page-junior-club .jc-stat h3 { font-size: 2rem; margin: 0; color: var(--jc-teal); }
.nowclasses-wrapper.page-junior-club .jc-stat span { font-size: 0.85rem; font-weight: 600; color: #6a6483; }
.nowclasses-wrapper.page-junior-club .jc-hero-art { position: relative; }
.nowclasses-wrapper.page-junior-club .jc-card-3d { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px rgba(142,107,255,0.28); transform: perspective(900px) rotateY(-6deg) rotateX(3deg); }
.nowclasses-wrapper.page-junior-club .jc-card-3d img { display: block; border-radius: 28px; }
.nowclasses-wrapper.page-junior-club .jc-intro-strip { background: var(--jc-violet); color: #fff; text-align: center; padding: 22px 0; font-weight: 700; font-size: 1.05rem; position: relative; z-index: 1; }
.nowclasses-wrapper.page-junior-club .jc-cta-final { position: relative; border-radius: 32px; padding: 50px 40px; overflow: hidden; color: #fff; margin-top: 40px; }
.nowclasses-wrapper.page-junior-club .jc-cta-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--jc-violet) 0%, var(--jc-coral) 100%); z-index: 0; }
.nowclasses-wrapper.page-junior-club .jc-cta-inner { position: relative; z-index: 1; }
.nowclasses-wrapper.page-junior-club .jc-cta-final h2 { color: #fff; font-size: 1.8rem; margin-bottom: 8px; }
.nowclasses-wrapper.page-junior-club .jc-highlight { position: relative; z-index: 1; white-space: nowrap; }
.nowclasses-wrapper.page-junior-club .jc-highlight::before { content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 0.42em; z-index: -1; border-radius: 6px; transform: rotate(-1deg); }
.nowclasses-wrapper.page-junior-club .jc-highlight-sun::before { background: rgba(255,184,0,0.65); }
.nowclasses-wrapper.page-junior-club .jc-highlight-teal::before { background: rgba(0,194,168,0.40); }
.nowclasses-wrapper.page-junior-club .jc-highlight-coral::before { background: rgba(255,45,107,0.35); }
.nowclasses-wrapper.page-junior-club .jc-highlight-violet::before { background: rgba(124,31,224,0.32); }
.nowclasses-wrapper.page-junior-club .jc-reveal { opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform, opacity; }
.nowclasses-wrapper.page-junior-club .jc-reveal[data-reveal="up"] { transform: translateY(50px); }
.nowclasses-wrapper.page-junior-club .jc-reveal[data-reveal="left"] { transform: translateX(-60px); }
.nowclasses-wrapper.page-junior-club .jc-reveal[data-reveal="right"] { transform: translateX(60px); }
.nowclasses-wrapper.page-junior-club .jc-reveal[data-reveal="pop"] { transform: scale(0.7) translateY(30px); }
.nowclasses-wrapper.page-junior-club .jc-reveal.is-revealed { opacity: 1; transform: scale(1) translate(0, 0); }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout { --color-dark: #121026; --color-purple: #6a1b9a; --color-pink: #ff2a5f; --color-teal: #00bfa5; --color-teal-light: #b2dfdb; --color-text: #424242; --color-bg: #f4f6f9; background-color: var(--color-bg); border-radius: 20px; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .header-title { color: var(--color-dark); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; font-family: 'Baloo 2', 'SUSE', sans-serif; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .header-title u { text-decoration-color: var(--color-teal-light); text-decoration-thickness: 6px; text-underline-offset: 4px; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .header-desc { color: var(--color-text); max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .track-card { background: white; border-radius: 24px; position: relative; overflow: hidden; height: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .vertical-ribbon { position: absolute; top: 0; bottom: 0; width: 48px; display: flex; align-items: center; justify-content: center; z-index: 10; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .vertical-ribbon span { transform: rotate(-90deg); white-space: nowrap; color: white; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .ribbon-left { left: 0; background-color: var(--color-pink); }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .ribbon-right { right: 0; background-color: var(--color-teal); }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .card-content-left { padding: 3rem 2.5rem 3rem 5.5rem; position: relative; z-index: 2; flex-grow: 1; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .card-content-right { padding: 3rem 5.5rem 3rem 2.5rem; position: relative; z-index: 2; flex-grow: 1; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .watermark-icon { position: absolute; bottom: -20%; right: -10%; width: 300px; height: 300px; opacity: 0.03; z-index: 1; pointer-events: none; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .card-content-right .watermark-icon { right: auto; left: -10%; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .active-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .bg-pink { background-color: var(--color-pink); }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .bg-teal { background-color: var(--color-teal); }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .track-label { color: var(--color-purple); font-weight: 700; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 0.5rem; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .track-name { color: var(--color-dark); font-weight: 800; font-size: 1.6rem; margin-bottom: 1rem; font-family: 'Baloo 2', sans-serif; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .track-desc { color: var(--color-text); font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .custom-list { list-style: none; padding: 0; margin: auto 0 0 0; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .custom-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; font-weight: 600; color: var(--color-dark); font-size: 0.95rem; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .custom-list li:last-child { margin-bottom: 0; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .list-icon-pink { color: var(--color-pink); font-size: 1.2rem; }
.nowclasses-wrapper.page-junior-club .jc-watermark-layout .list-icon-teal { color: var(--color-teal); font-size: 1.2rem; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper { font-family: 'Nunito', sans-serif; background-color: #ffffff; overflow-x: hidden; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-card { padding: 0 15px; display: flex; flex-direction: column; align-items: center; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .icon-container { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .shape-layer, .nowclasses-wrapper.page-junior-club .kids-process-wrapper .shape-layer::before, .nowclasses-wrapper.page-junior-club .kids-process-wrapper .shape-layer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: inherit; border-radius: 20%; z-index: 1; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .shape-layer::before { transform: rotate(30deg); }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .shape-layer::after { transform: rotate(60deg); }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .icon-inner { font-size: 3.5rem; line-height: 1; position: relative; z-index: 3; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-badge { position: absolute; top: -5px; right: -5px; width: 45px; height: 45px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 4; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-1-bg { background-color: #fcaf17; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-2-bg { background-color: #ff3a68; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-3-bg { background-color: #00c29a; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .text-step-1 { color: #fcaf17; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .text-step-2 { color: #ff3a68; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .text-step-3 { color: #00c29a; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-title { font-size: 1.4rem; font-weight: 800; color: #271c46; margin-bottom: 12px; text-align: center; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-desc { font-size: 1rem; font-weight: 500; color: #5b6270; line-height: 1.6; margin-bottom: 0; max-width: 320px; text-align: center; }
.nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-arrow { position: absolute; top: 45px; right: -25px; font-size: 2.5rem; color: #ff3a68; z-index: 10; transform: scaleX(1.5) rotate(-5deg); }
.nowclasses-wrapper.page-junior-club .programs-section { padding: 80px 20px; overflow: hidden; }
.nowclasses-wrapper.page-junior-club .programs-section .card { border: none; border-radius: 20px; padding: 15px; text-align: center; background-color: #ffffff; margin-bottom: 30px; }
.nowclasses-wrapper.page-junior-club .programs-section .card-teal { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0px 8px 0px 0px #01c3a7; }
.nowclasses-wrapper.page-junior-club .programs-section .card-pink { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0px 8px 0px 0px #fe3871; }
.nowclasses-wrapper.page-junior-club .programs-section .card-yellow { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0px 8px 0px 0px #fba707; }
.nowclasses-wrapper.page-junior-club .programs-section .card-purple { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0px 8px 0px 0px #8b32e8; }
.nowclasses-wrapper.page-junior-club .programs-section .col-lg-3:nth-child(odd) .card { transform: rotate(-3deg); }
.nowclasses-wrapper.page-junior-club .programs-section .col-lg-3:nth-child(even) .card { transform: rotate(3deg); }
.nowclasses-wrapper.page-junior-club .programs-section .card-img-top { border-radius: 15px; object-fit: cover; height: 180px; width: 100%; margin-bottom: 15px; }
.nowclasses-wrapper.page-junior-club .programs-section .card-body { padding: 1rem 0.5rem; }
.nowclasses-wrapper.page-junior-club .programs-section .age-badge { display: inline-block; padding: 6px 20px; border-radius: 20px; color: #ffffff; font-weight: 800; font-size: 1rem; margin-bottom: 20px; }
.nowclasses-wrapper.page-junior-club .programs-section .bg-teal { background-color: #01c3a7; }
.nowclasses-wrapper.page-junior-club .programs-section .bg-pink { background-color: #fe3871; }
.nowclasses-wrapper.page-junior-club .programs-section .bg-yellow { background-color: #fba707; }
.nowclasses-wrapper.page-junior-club .programs-section .bg-purple { background-color: #8b32e8; }
.nowclasses-wrapper.page-junior-club .programs-section .skills-text { color: #4f4f7a; font-weight: 700; font-size: 1.1rem; line-height: 1.4; margin-bottom: 10px; }
.nowclasses-wrapper.page-junior-club .programs-section .card-description { color: #5a6674; font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif; }
.nowclasses-wrapper.page-junior-club .programs-section .card-footer { background-color: transparent; border-top: none; padding-bottom: 10px; }
.nowclasses-wrapper.page-junior-club .programs-section .btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: #f24f35; color: #ffffff; border-radius: 50%; text-decoration: none; font-size: 1.2rem; transition: background-color 0.3s ease; }
.nowclasses-wrapper.page-junior-club .programs-section .btn-arrow:hover { background-color: #d13d26; color: #ffffff; }
.nowclasses-wrapper.page-junior-club .custom-features-section { font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', sans-serif; background-color: #ffffff; padding: 60px 0; }
.nowclasses-wrapper.page-junior-club .custom-features-section .feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; }
.nowclasses-wrapper.page-junior-club .custom-features-section .icon-wrapper { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 40px; margin-bottom: 25px; transition: transform 0.3s ease; }
.nowclasses-wrapper.page-junior-club .custom-features-section .icon-wrapper svg { width: 55px; height: 55px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nowclasses-wrapper.page-junior-club .custom-features-section .feature-title { font-size: 16px; font-weight: 700; color: #2b2b42; line-height: 1.4; margin: 0; }
.nowclasses-wrapper.page-junior-club .custom-features-section .item-yellow .icon-wrapper { background-color: #FFF8E5; color: #ffb400; box-shadow: 0px 8px 0px 0px #ffb400; }
.nowclasses-wrapper.page-junior-club .custom-features-section .item-pink .icon-wrapper { background-color: #FFEDF1; color: #fc3f72; box-shadow: 0px 8px 0px 0px #fc3f72; }
.nowclasses-wrapper.page-junior-club .custom-features-section .item-teal .icon-wrapper { background-color: #E5F9F5; color: #00c49f; box-shadow: 0px 8px 0px 0px #00c49f; }
.nowclasses-wrapper.page-junior-club .custom-features-section .item-purple .icon-wrapper { background-color: #F4EAFC; color: #9033f9; box-shadow: 0px 8px 0px 0px #9033f9; }
@media (max-width: 767.98px) {
    .nowclasses-wrapper.page-junior-club .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper.page-junior-club .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper.page-junior-club .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
}
@media (max-width: 992px) {
    .nowclasses-wrapper.page-junior-club .jc-hero { padding: 50px 0 20px; }
    .nowclasses-wrapper.page-junior-club .jc-hero h1 { font-size: 2rem; }
    .nowclasses-wrapper.page-junior-club .jc-card-3d { transform: none; }
    .nowclasses-wrapper.page-junior-club .jc-cta-final { padding: 34px 24px; text-align: center; }
}
@media (max-width: 576px) {
    .nowclasses-wrapper.page-junior-club .jc-hero-stats { gap: 20px; flex-wrap: wrap; }
    .nowclasses-wrapper.page-junior-club .jc-section-padding { padding: 46px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nowclasses-wrapper.page-junior-club .jc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 768px) {
    .nowclasses-wrapper.page-junior-club .jc-watermark-layout .vertical-ribbon { width: 10px; }
    .nowclasses-wrapper.page-junior-club .jc-watermark-layout .vertical-ribbon span { display: none; }
    .nowclasses-wrapper.page-junior-club .jc-watermark-layout .card-content-left { padding: 2.5rem 1.5rem 2.5rem 2.5rem; }
    .nowclasses-wrapper.page-junior-club .jc-watermark-layout .card-content-right { padding: 2.5rem 2.5rem 2.5rem 1.5rem; }
}
@media (max-width: 991px) {
    .nowclasses-wrapper.page-junior-club .kids-process-wrapper .step-arrow { right: -10px; font-size: 1.8rem; }
    .nowclasses-wrapper.page-junior-club .kids-process-wrapper .icon-container { margin-top: 20px; }
}
/* =================================================================
   21. PROGRAM ACCORDION COMPONENT — shared by number-master.html + test-prep.html
   ================================================================= */
        .nowclasses-wrapper .master-programs-ui {
            font-family: 'SUSE', sans-serif;
            padding: 60px 15px; 
            margin: 0 auto;
            max-width: 1320px;
            width: 100%; 
            display: block;
        }
        .nowclasses-wrapper .master-programs-ui .accordion {
            width: 100%; 
        }
        .nowclasses-wrapper .master-programs-ui .accordion-item { border: none; border-radius: 32px !important; padding: 0 2.5rem; position: relative; transition: background-color 0.3s ease; width: 100%; display: block; }
        .nowclasses-wrapper .master-programs-ui .accordion-item:nth-child(1) { background-color: #FFE4E1; z-index: 6; } 
        .nowclasses-wrapper .master-programs-ui .accordion-item:nth-child(2) { background-color: #FFE8D6; z-index: 5; margin-top: -1rem; box-shadow: 0 -4px 20px rgba(0,0,0,0.04); } 
        .nowclasses-wrapper .master-programs-ui .accordion-body { padding-bottom: 3rem; }
        .nowclasses-wrapper .master-programs-ui .accordion-item:last-child .accordion-body { padding-bottom: 2.5rem; }
        .nowclasses-wrapper .master-programs-ui .accordion-button { font-family: 'SUSE', sans-serif; font-size: 1.6rem; font-weight: 600; color: #2D2D2D; background-color: transparent; display: flex; justify-content: space-between; align-items: center; transition: color 0.3s ease; box-shadow: none !important; width: 100%;padding: 2rem 0; }
        .nowclasses-wrapper .master-programs-ui .accordion-button::after { display: none; }
        .nowclasses-wrapper .master-programs-ui .accordion-button.collapsed { color: #8e8a7d; }
        .nowclasses-wrapper .master-programs-ui .toggle-icon { width: 44px; height: 44px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.04); color: #2D2D2D; font-size: 1.5rem; line-height: 1; transition: transform 0.3s ease; }
        .nowclasses-wrapper .master-programs-ui .accordion-button.collapsed .toggle-icon::before { content: "+"; font-weight: 400; }
        .nowclasses-wrapper .master-programs-ui .accordion-button:not(.collapsed) .toggle-icon::before { content: "\2212"; font-weight: 400; }
        .nowclasses-wrapper .master-programs-ui .section-subtitle { font-family: 'SUSE', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; color: #0095D9; text-transform: uppercase; margin-bottom: 1rem; margin-top: 0.5rem; }
        .nowclasses-wrapper .master-programs-ui .content-text { color: #040505; font-size: 1rem; font-weight: 300; line-height: 1.6; margin-bottom: 1.5rem; }
        .nowclasses-wrapper .master-programs-ui .results-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem 0; }
        .nowclasses-wrapper .master-programs-ui .results-list li { background-color: #ffffff; border-radius: 50rem; padding: 12px 24px; margin-bottom: 0.85rem; display: inline-flex; align-items: center; font-size: 0.95rem; color: #2D2D2D; box-shadow: 0 2px 10px rgba(0,0,0,0.02); width: fit-content; max-width: 100%; transition: transform 0.3s ease; }
        .nowclasses-wrapper .master-programs-ui .results-list li:hover { transform: translateX(6px); }
        .nowclasses-wrapper .master-programs-ui .results-list li svg { width: 18px; height: 18px; margin-right: 12px; flex-shrink: 0; color: #2D2D2D; }
        .nowclasses-wrapper .master-programs-ui .media-container { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); height: 100%; min-height: 450px; }
        .nowclasses-wrapper .master-programs-ui .media-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s ease; }
        .nowclasses-wrapper .master-programs-ui .media-container:hover .media-img { transform: scale(1.05); }
        @media (max-width: 991.98px) { .nowclasses-wrapper .master-programs-ui .media-container { min-height: 350px; margin-top: 2rem; } }
        @media (max-width: 767.98px) {
            .nowclasses-wrapper .master-programs-ui { padding: 30px 1rem; }
            .nowclasses-wrapper .master-programs-ui .accordion-item { padding: 0 1.5rem; border-radius: 24px !important; }
            .nowclasses-wrapper .master-programs-ui .accordion-button { font-size: 1.25rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
            .nowclasses-wrapper .master-programs-ui .results-list li { display: flex; width: 100%; padding: 12px 16px; }
            .nowclasses-wrapper .master-programs-ui .media-container { min-height: 250px; }
        }
/* =================================================================
   22. SAT PREP PAGE (SAT-prep.html) — PAGE-SPECIFIC
   ================================================================= */
        /* =========================================
           HERO SECTION
           ========================================= */
        .nowclasses-wrapper.page-sat-prep .hero-section {
            position: relative;
            background: linear-gradient(135deg, #0b1a30 0%, #1e2c5a 100%);
            color: #ffffff;
            padding-top: 2.5rem;
            padding-bottom: 4.25rem;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
            -webkit-mask-position: top left, bottom left;
            -webkit-mask-repeat: no-repeat, repeat-x;
        }
        .nowclasses-wrapper.page-sat-prep .hero-section::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0; height: 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23ff5a3c' stroke-width='2.5'/%3E%3C/svg%3E");
            background-size: 24px 12px;
            background-position: bottom left;
            background-repeat: repeat-x;
            z-index: 3;
            pointer-events: none;
        }
        .nowclasses-wrapper.page-sat-prep .hero-grid-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px; z-index: 1;
        }
        .nowclasses-wrapper.page-sat-prep .hero-content { position: relative; z-index: 2; }
        .nowclasses-wrapper.page-sat-prep .hero-breadcrumb {
            display: inline-block; font-size: 0.75rem; letter-spacing: 0.5px; color: #b0b8d6;
            border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.35rem 1rem; border-radius: 50px;
        }
        .nowclasses-wrapper.page-sat-prep .hero-breadcrumb span { color: #ff5a3c; }
        /* Specific overrides for Hero */
        .nowclasses-wrapper.page-sat-prep .hero-title { font-size: 3.5rem; letter-spacing: -1px; color: #ffffff !important; }
        .nowclasses-wrapper.page-sat-prep .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; }
        .nowclasses-wrapper.page-sat-prep .hero-badge {
            font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px);
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default;
        }
        .nowclasses-wrapper.page-sat-prep .hero-badge:hover {
            transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6);
        }
        .nowclasses-wrapper.page-sat-prep .btn-hero-primary {
            background: linear-gradient(90deg, #ff5a3c 0%, #ff7b23 100%); color: #ffffff; border: none; font-weight: 600;
            padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(255, 90, 60, 0.35); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            text-decoration: none; display: inline-block; font-family: 'Inter', sans-serif;
        }
        .nowclasses-wrapper.page-sat-prep .btn-hero-primary:hover, .nowclasses-wrapper.page-sat-prep .btn-hero-primary:focus {
            background: linear-gradient(90deg, #ff7b23 0%, #ff5a3c 100%); color: #ffffff;
            box-shadow: 0 12px 25px rgba(255, 90, 60, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-sat-prep .btn-hero-outline {
            background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600;
            padding: 0.6rem 1.8rem; border-radius: 50px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            text-decoration: none; display: inline-block; font-family: 'Inter', sans-serif;
        }
        .nowclasses-wrapper.page-sat-prep .btn-hero-outline:hover, .nowclasses-wrapper.page-sat-prep .btn-hero-outline:focus {
            background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-sat-prep .hero-capsule-container {
            width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #ff5a3c;
            display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
            box-shadow: 0 0 0 5px rgba(255, 90, 60, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto;
            background-color: rgba(255,255,255,0.1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d; cursor: pointer; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
        }
        .nowclasses-wrapper.page-sat-prep .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
        .nowclasses-wrapper.page-sat-prep .hero-capsule-container:hover {
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
            box-shadow: 0 0 0 6px rgba(255, 90, 60, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #ff7b23;
        }
        @media (max-width: 768px) {
            .nowclasses-wrapper.page-sat-prep .hero-section { padding-top: 1.5rem; padding-bottom: 3.5rem; }
            .nowclasses-wrapper.page-sat-prep .hero-title { font-size: 2.2rem; }
            .nowclasses-wrapper.page-sat-prep .hero-capsule-container { height: 220px; max-width: 100%; border-width: 3px; }
        }
        .sat-custom-layout {
            font-family: 'Inter', sans-serif;
            color: #4b5563;
        }
        /* Example Custom Backgrounds (You can change these colors later) */
        #sat-general-info { background: linear-gradient(180deg, #FFFFFF 0%, #e6f9f2 100%); }
        #sat-who-can-take { background-color: #f9fbfd; }
        #sat-math-reg { background-color: #ffffff; }
        #sat-inline-cta { background: linear-gradient(180deg, #FFFFFF 0%, #e6f9f2 100%); }
        #sat-how-we-work { background-color: #ffffff; }
        /* Highlight Colors */
        .sat-custom-layout .text-navy { color: #0b1a30 !important; }
        .sat-custom-layout .bg-navy { background-color: #0b1a30 !important; }
        .sat-custom-layout .text-sporty { color: #ff5a3c !important; }
        .sat-custom-layout .bg-sporty { background: linear-gradient(135deg, #ff7b23, #ff5a3c) !important; color: #fff; }
        /* Typography - Body specific overrides */
        .sat-custom-layout .section-title {
            font-size: 2.6rem;
            font-weight: 700 !important;
            line-height: 1.2;
            margin-bottom: 14px;
        }
        .sat-custom-layout .section-title .accent {
            color: #0095D9;
        }
        .sat-custom-layout .subsection-title {
            margin-bottom: 1rem;
            font-size: 2rem;
        }
        /* Justified Text Alignment */
        .sat-custom-layout .text-justified {
            font-size: 1.05rem;
            line-height: 1.7; 
            color: #4b5563;
            margin-bottom: 1rem;
            text-align: justify;
        }
        /* Elements */
        .sat-custom-layout .pill-badge {
            display: inline-block;
            margin-bottom: 1rem;
        }
        .sat-custom-layout .pill-badge span {
            display: block;
			padding: 6px 24px;
			background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%);
			box-shadow: 0 6px 18px rgba(123, 92, 250, 0.35);
			border-radius: 50px;
			color: #ffffff;
			font-family: 'Playfair Display', serif;
			font-size: 1rem;
			font-weight: 700;
        }
        .sat-custom-layout .number-bubble {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 12px;
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.2rem;
            color: #ffffff;
            margin-bottom: 1rem;
            box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        }
        /* Inline CTA Styles */
        .sat-custom-layout .cta-inline-block {
            background: linear-gradient(135deg, #0b1a30 0%, #1e2c5a 100%);
            border: 1px solid rgba(255, 90, 60, 0.2);
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
        }
        .sat-custom-layout .cta-inline-block:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(11, 26, 48, 0.15);
        }
        .sat-custom-layout .cta-bg-shape {
            position: absolute;
            top: -50%;
            right: -10%;
            width: 300px;
            height: 300px;
            background: rgba(255, 90, 60, 0.2);
            border-radius: 50%;
            filter: blur(50px);
            z-index: 1;
            pointer-events: none;
        }
        /* 3D Tilted Image Frames */
        .sat-custom-layout .img-frame {
            position: relative;
            z-index: 1;
            margin: 2rem 1rem; 
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .sat-custom-layout .img-frame.edge-right { transform: perspective(1000px) rotateX(6deg) rotateY(-10deg); }
        .sat-custom-layout .img-frame.edge-left { transform: perspective(1000px) rotateX(6deg) rotateY(10deg); }
        .sat-custom-layout .img-frame:hover {
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-8px);
            z-index: 10;
        }
        .sat-custom-layout .img-frame img {
            border-radius: 20px;
            width: 100%;
            box-shadow: 0 15px 35px -5px rgba(0,0,0,0.2);
            position: relative;
            z-index: 2;
        }
        /* Glowing Corner Bracket Accents */
        .sat-custom-layout .img-frame::before,
        .sat-custom-layout .img-frame::after {
            content: "";
            position: absolute;
            width: 70px;
            height: 70px;
            z-index: 0;
            transition: all 0.6s ease;
        }
        .sat-custom-layout .img-frame.edge-right::before {
            top: -20px; left: -20px;
            border-top: 5px solid #0b1a30; border-left: 5px solid #0b1a30;
            border-top-left-radius: 30px; box-shadow: -5px -5px 15px rgba(11, 26, 48, 0.15);
        }
        .sat-custom-layout .img-frame.edge-right::after {
            bottom: -20px; right: -20px;
            border-bottom: 5px solid #0b1a30; border-right: 5px solid #0b1a30;
            border-bottom-right-radius: 30px; box-shadow: 5px 5px 15px rgba(11, 26, 48, 0.15);
        }
        .sat-custom-layout .img-frame.edge-left::before {
            top: -20px; right: -20px;
            border-top: 5px solid #ff5a3c; border-right: 5px solid #ff5a3c;
            border-top-right-radius: 30px; box-shadow: 5px -5px 15px rgba(255, 90, 60, 0.2);
        }
        .sat-custom-layout .img-frame.edge-left::after {
            bottom: -20px; left: -20px;
            border-bottom: 5px solid #ff5a3c; border-left: 5px solid #ff5a3c;
            border-bottom-left-radius: 30px; box-shadow: -5px 5px 15px rgba(255, 90, 60, 0.2);
        }
        .sat-custom-layout .floating-label {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            padding: 8px 24px;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 8px;
            white-space: nowrap;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            background-color: #ffffff;
            color: #0b1a30;
            font-family: 'Inter', sans-serif;
        }
        .sat-custom-layout .label-accent { background-color: #0b1a30; color: #ffffff; }
        /* 3D Hovering Sections for Text/Content */
        .sat-custom-layout .section-3d-hover {
            padding: 24px;
            border-radius: 16px;
            border: 1px solid transparent;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d;
        }
        .sat-custom-layout .section-3d-hover:hover {
            transform: perspective(800px) rotateX(5deg) translateY(-8px) scale(1.02);
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 90, 60, 0.15);
            background: #fdfdfd;
        }
        /* --- TIMELINE / HOW WE WORK --- */
        .sat-custom-layout .timeline-container { position: relative; padding-left: 5px; }
        .sat-custom-layout .timeline-step {
            display: flex; margin-bottom: 2.5rem; align-items: stretch; perspective: 1000px;
        }
        .sat-custom-layout .timeline-step:last-child { margin-bottom: 0; }
        .sat-custom-layout .timeline-indicator {
            display: flex; flex-direction: column; align-items: center; margin-right: 25px; position: relative; width: 50px;
        }
        .sat-custom-layout .timeline-indicator:not(:last-child)::after {
            content: ''; position: absolute; top: 50px; bottom: -2.5rem; width: 3px; z-index: 1;
        }
        /* Permanently Colored Rainbow Steps */
        .sat-custom-layout .step-1 .timeline-circle { border: none; background-color: #ff3b30; color: #fff; box-shadow: 0 5px 15px rgba(255, 59, 48, 0.3); }
        .sat-custom-layout .step-1 .timeline-indicator:not(:last-child)::after { background: linear-gradient(to bottom, #ff3b30, #ff9500); }
        .sat-custom-layout .step-1 .timeline-card { border-left: 5px solid #ff3b30; }
        .sat-custom-layout .step-1:hover .timeline-card { border-color: rgba(255, 59, 48, 0.3); box-shadow: 0 20px 40px rgba(255, 59, 48, 0.15); }
        .sat-custom-layout .step-1:hover .timeline-circle { box-shadow: 0 10px 20px rgba(255, 59, 48, 0.5); }
        .sat-custom-layout .step-2 .timeline-circle { border: none; background-color: #ff9500; color: #fff; box-shadow: 0 5px 15px rgba(255, 149, 0, 0.3); }
        .sat-custom-layout .step-2 .timeline-indicator:not(:last-child)::after { background: linear-gradient(to bottom, #ff9500, #34c759); }
        .sat-custom-layout .step-2 .timeline-card { border-left: 5px solid #ff9500; }
        .sat-custom-layout .step-2:hover .timeline-card { border-color: rgba(255, 149, 0, 0.3); box-shadow: 0 20px 40px rgba(255, 149, 0, 0.15); }
        .sat-custom-layout .step-2:hover .timeline-circle { box-shadow: 0 10px 20px rgba(255, 149, 0, 0.5); }
        .sat-custom-layout .step-3 .timeline-circle { border: none; background-color: #34c759; color: #fff; box-shadow: 0 5px 15px rgba(52, 199, 89, 0.3); }
        .sat-custom-layout .step-3 .timeline-indicator:not(:last-child)::after { background: linear-gradient(to bottom, #34c759, #007aff); }
        .sat-custom-layout .step-3 .timeline-card { border-left: 5px solid #34c759; }
        .sat-custom-layout .step-3:hover .timeline-card { border-color: rgba(52, 199, 89, 0.3); box-shadow: 0 20px 40px rgba(52, 199, 89, 0.15); }
        .sat-custom-layout .step-3:hover .timeline-circle { box-shadow: 0 10px 20px rgba(52, 199, 89, 0.5); }
        .sat-custom-layout .step-4 .timeline-circle { border: none; background-color: #007aff; color: #fff; box-shadow: 0 5px 15px rgba(0, 122, 255, 0.3); }
        .sat-custom-layout .step-4 .timeline-card { border-left: 5px solid #007aff; }
        .sat-custom-layout .step-4:hover .timeline-card { border-color: rgba(0, 122, 255, 0.3); box-shadow: 0 20px 40px rgba(0, 122, 255, 0.15); }
        .sat-custom-layout .step-4:hover .timeline-circle { box-shadow: 0 10px 20px rgba(0, 122, 255, 0.5); }
        .sat-custom-layout .timeline-circle {
            width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 1.1rem; font-family: 'Playfair Display', serif; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .sat-custom-layout .timeline-card {
            background-color: #ffffff; border-radius: 16px; padding: 24px 28px; flex-grow: 1;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d;
        }
        .sat-custom-layout .timeline-step:hover .timeline-card { transform: perspective(800px) rotateX(6deg) translateY(-8px) scale(1.03); background-color: #ffffff; }
        .sat-custom-layout .timeline-step:hover .timeline-circle { transform: scale(1.15) translateY(-3px); }
        .sat-custom-layout .step-title { font-size: 1.35rem; margin-bottom: 0.5rem; }
        .sat-custom-layout .step-desc { margin-bottom: 0; color: #4b5563; font-size: 1rem; line-height: 1.6; text-align: justify; font-family: 'Inter', sans-serif;}
        @media (max-width: 991px) {
            .sat-custom-layout .section-title { 
                font-size: 2rem !important; 
            }
        }
        @media (max-width: 768px) {
            /* General Compression */
            .sat-custom-layout .section-title { font-size: 1.6rem !important; margin-bottom: 8px; }
            .sat-custom-layout .subsection-title { font-size: 1.5rem !important; }
            .sat-custom-layout .text-justified { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.75rem; }
            .sat-custom-layout .section-3d-hover { padding: 15px; }
            /* Images */
            .sat-custom-layout .img-frame { margin: 1.5rem 0.5rem 2rem 0.5rem; }
            /* Timeline Compression */
            .sat-custom-layout .timeline-step { margin-bottom: 1.5rem; }
            .sat-custom-layout .timeline-indicator { margin-right: 15px; width: 40px; }
            .sat-custom-layout .timeline-circle { width: 40px; height: 40px; font-size: 1rem; }
            .sat-custom-layout .timeline-indicator:not(:last-child)::after { top: 40px; bottom: -1.5rem; }
            .sat-custom-layout .timeline-card { padding: 16px 20px; }
            .sat-custom-layout .step-title { font-size: 1.15rem; margin-bottom: 0.25rem; }
            .sat-custom-layout .step-desc { font-size: 0.9rem; line-height: 1.4; }
            .sat-custom-layout .cta-inline-block { padding: 1.5rem !important; }
        }
        .nowclasses-wrapper.page-sat-prep .features-section {
                background: linear-gradient(180deg, #fff4e0 0%, #FFFFFF 60%);
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process {
            padding: 4rem 0;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
            height: 100%;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-content {
            padding: 1.5rem 4rem 1.5rem 1.5rem;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-icon {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 1.25rem;
            display: inline-block;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-title {
            font-size: 1.15rem;
            line-height: 1.3;
            margin-bottom: 0.75rem;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-text {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
            margin: 0;
            font-family: 'Inter', sans-serif;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-sidebar {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 45px;
            display: flex;
            justify-content: center;
            padding-top: 1.25rem;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .plm-number {
            color: #ffffff;
            font-size: 1.1rem;
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-1 { background-color: #00a8e8; }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-2 { background-color: #9b51e0; }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-3 { background-color: #f64768; }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-4 { background-color: #f2994a; }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-5 { background-color: #27ae60; }
        .nowclasses-wrapper.page-sat-prep .modern-plm-process .bg-color-6 { background-color: #e33e9d; }
/* =================================================================
   23. NUMBER MASTER PAGE (number-master.html) — PAGE-SPECIFIC
   ================================================================= */
        /* =========================================
           NEW HERO SECTION (bulletproof SVG mask)
           ========================================= */
        .nowclasses-wrapper.page-number-master .hero-section {
            position: relative;
            background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
            color: #ffffff;
            padding-top: 2.5rem;
            padding-bottom: 4.25rem;
            -webkit-mask-image:
                linear-gradient(black, black),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
            -webkit-mask-position: top left, bottom left;
            -webkit-mask-repeat: no-repeat, repeat-x;
            mask-image:
                linear-gradient(black, black),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            mask-size: 100% calc(100% - 11.5px), 24px 12px;
            mask-position: top left, bottom left;
            mask-repeat: no-repeat, repeat-x;
        }
        .nowclasses-wrapper.page-number-master .hero-section::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
            background-size: 24px 12px;
            background-position: bottom left;
            background-repeat: repeat-x;
            z-index: 3;
            pointer-events: none;
        }
        .nowclasses-wrapper.page-number-master .hero-grid-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 1;
        }
        .nowclasses-wrapper.page-number-master .hero-content { position: relative; z-index: 2; }
        .nowclasses-wrapper.page-number-master .hero-breadcrumb {
            display: inline-block;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            color: #b0b8d6;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.35rem 1rem;
            border-radius: 50px;
        }
        .nowclasses-wrapper.page-number-master .hero-breadcrumb span { color: #f7a040; }
        .nowclasses-wrapper.page-number-master .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            font-family: 'Georgia', serif;
            letter-spacing: -1px;
            color: #ffffff;
        }
        .nowclasses-wrapper.page-number-master .hero-subtitle {
            font-size: 1.15rem;
            line-height: 1.6;
            color: #cbd5e1;
            max-width: 90%;
        }
        .nowclasses-wrapper.page-number-master .hero-badge {
            font-size: 0.85rem;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.05);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            backdrop-filter: blur(4px);
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
            cursor: default;
        }
        .nowclasses-wrapper.page-number-master .hero-badge:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 255, 255, 0.6);
        }
        .nowclasses-wrapper.page-number-master .btn-hero-primary {
            background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%);
            color: #ffffff;
            border: none;
            font-weight: 600;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-number-master .btn-hero-primary:hover,
        .nowclasses-wrapper.page-number-master .btn-hero-primary:focus {
            background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%);
            color: #ffffff;
            box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5);
            transform: translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-number-master .btn-hero-outline {
            background: transparent;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            font-weight: 600;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-number-master .btn-hero-outline:hover,
        .nowclasses-wrapper.page-number-master .btn-hero-outline:focus {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: #ffffff;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
            transform: translateY(-4px) scale(1.03);
        }
        /* 3D Component allowed for Hero Capsule Hover Only */
        .nowclasses-wrapper.page-number-master .hero-capsule-container {
            width: 100%;
            max-width: 400px;
            height: 340px;
            border-radius: 16px;
            border: 4px solid #FFC94D;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
            box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            margin: 0 auto;
            background-color: rgba(255,255,255,0.1);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d;
            cursor: pointer;
            transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
        }
        .nowclasses-wrapper.page-number-master .hero-capsule-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }
        .nowclasses-wrapper.page-number-master .hero-capsule-container:hover {
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
            box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4);
            border-color: #FFD65A;
        }
        @media (max-width: 991.98px) {
            .nowclasses-wrapper.page-number-master .hero-capsule-container { height: 270px; max-width: 320px; }
        }
        @media (max-width: 767.98px) {
            .nowclasses-wrapper.page-number-master .hero-title { font-size: 2.5rem; }
            .nowclasses-wrapper.page-number-master .hero-subtitle { font-size: 1rem; max-width: 100%; }
            .nowclasses-wrapper.page-number-master .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
        }
        .nowclasses-wrapper .beautiful-enquiry-section {
            position: relative;
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.95) 100%), 
                              url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: #2D2D2D;
            font-family: 'SUSE', sans-serif;
            padding: 60px 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 1;
        }
        .nowclasses-wrapper .beautiful-enquiry-section .ambient-glow-1 { position: absolute; top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(255,255,255,0) 70%); z-index: -1; border-radius: 50%; filter: blur(60px); }
        .nowclasses-wrapper .beautiful-enquiry-section .elegant-badge { display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #4f46e5; margin-bottom: 1.5rem; position: relative; }
        .nowclasses-wrapper .beautiful-enquiry-section .elegant-badge::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 40px; height: 2px; background-color: #4f46e5; border-radius: 2px; }
        .nowclasses-wrapper .beautiful-enquiry-section .elegant-heading { font-family: 'SUSE', sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1.2; color: #2D2D2D; margin-bottom: 14px; }
        .nowclasses-wrapper .beautiful-enquiry-section .elegant-desc { font-size: 1rem; line-height: 1.6; font-weight: 300; color: #7A8696; text-align: left; }
        .nowclasses-wrapper .beautiful-enquiry-section .premium-form-card { background-color: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 3.5rem; border: 4px solid rgb(28 42 86); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05); }
        .nowclasses-wrapper .beautiful-enquiry-section .form-title { font-family: 'SUSE', sans-serif; font-size: 1.75rem; font-weight: 700; color: #2D2D2D; margin-bottom: 30px; text-align: center; }
        .nowclasses-wrapper .beautiful-enquiry-section .form-control, .nowclasses-wrapper .beautiful-enquiry-section .input-group-text { border: 1px solid rgba(148, 163, 184, 0.4); border-radius: 12px; padding: 1rem 1.25rem; font-size: 0.95rem; background-color: rgba(255, 255, 255, 0.9); color: #2D2D2D; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important; transition: all 0.3s ease; }
        .nowclasses-wrapper .beautiful-enquiry-section .form-control::placeholder { color: #7A8696; font-weight: 400; }
        .nowclasses-wrapper .beautiful-enquiry-section .form-control:focus { background-color: #ffffff; border-color: #0095D9; box-shadow: 0 0 0 4px rgba(0, 149, 217, 0.15) !important; }
        .nowclasses-wrapper .beautiful-enquiry-section .custom-phone-group { border-radius: 12px; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(148, 163, 184, 0.4); transition: all 0.3s ease; display: flex; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); }
        .nowclasses-wrapper .beautiful-enquiry-section .custom-phone-group:focus-within { background-color: #ffffff; border-color: #0095D9; box-shadow: 0 0 0 4px rgba(0, 149, 217, 0.15); }
        .nowclasses-wrapper .beautiful-enquiry-section .custom-phone-group .input-group-text { background-color: transparent; border: none; padding-right: 0.5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; color: #7A8696; box-shadow: none !important; }
        .nowclasses-wrapper .beautiful-enquiry-section .custom-phone-group .form-control { background-color: transparent; border: none; padding-left: 0.25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none !important; }
        .nowclasses-wrapper .beautiful-enquiry-section .beautiful-recaptcha { background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(148, 163, 184, 0.4); border-radius: 12px; padding: 1rem 1.25rem; max-width: 100%; }
        .nowclasses-wrapper .beautiful-enquiry-section .beautiful-recaptcha .form-check-input { width: 1.25rem; height: 1.25rem; border-color: #cbd5e1; background-color: #ffffff; border-radius: 4px; cursor: pointer; margin-top: 0.15rem; }
        .nowclasses-wrapper .beautiful-enquiry-section .beautiful-recaptcha .form-check-input:checked { background-color: #0095D9; border-color: #0095D9; }
        .nowclasses-wrapper .beautiful-enquiry-section .beautiful-recaptcha .form-check-label { font-size: 0.95rem; font-weight: 500; color: #2D2D2D; cursor: pointer; }
        .nowclasses-wrapper .beautiful-enquiry-section .recaptcha-brand img { width: 26px; }
        .nowclasses-wrapper .beautiful-enquiry-section .recaptcha-brand span { font-size: 0.65rem; color: #7A8696; font-weight: 500; }
        .nowclasses-wrapper .beautiful-enquiry-section .btn-premium { background: linear-gradient(315deg, #FFA53D 0%, #FF6B00 100%); color: #ffffff; border: none; border-radius: 50px; font-weight: 600; font-size: 1.05rem; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35); }
        .nowclasses-wrapper .beautiful-enquiry-section .btn-premium:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255, 107, 0, 0.45); }
        @media (max-width: 991px) { 
            .nowclasses-wrapper .beautiful-enquiry-section .elegant-heading { font-size: 2rem; } 
            .nowclasses-wrapper .beautiful-enquiry-section .premium-form-card { padding: 2.5rem 1.5rem; margin-top: 30px; } 
        }
/* =================================================================
   24. TEST PREP PAGE (test-prep.html) — PAGE-SPECIFIC
   ================================================================= */
        /* =========================================
           NEW HERO SECTION
           ========================================= */
        .nowclasses-wrapper.page-test-prep .hero-section {
            position: relative;
            background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
            color: #ffffff;
            padding-top: 2.5rem;
            padding-bottom: 4.25rem;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            -webkit-mask-image:
                linear-gradient(black, black),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
            -webkit-mask-position: top left, bottom left;
            -webkit-mask-repeat: no-repeat, repeat-x;
            mask-image:
                linear-gradient(black, black),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            mask-size: 100% calc(100% - 11.5px), 24px 12px;
            mask-position: top left, bottom left;
            mask-repeat: no-repeat, repeat-x;
        }
        .nowclasses-wrapper.page-test-prep .hero-section::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
            background-size: 24px 12px;
            background-position: bottom left;
            background-repeat: repeat-x;
            z-index: 3;
            pointer-events: none;
        }
        .nowclasses-wrapper.page-test-prep .hero-grid-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 1;
        }
        .nowclasses-wrapper.page-test-prep .hero-content { position: relative; z-index: 2; }
        .nowclasses-wrapper.page-test-prep .hero-breadcrumb {
            display: inline-block;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
            color: #b0b8d6;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.35rem 1rem;
            border-radius: 50px;
        }
        .nowclasses-wrapper.page-test-prep .hero-breadcrumb span { color: #f7a040; }
        .nowclasses-wrapper.page-test-prep .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            font-family: 'Georgia', serif;
            letter-spacing: -1px;
            color: #ffffff;
        }
        .nowclasses-wrapper.page-test-prep .hero-subtitle {
            font-size: 1.15rem;
            line-height: 1.6;
            color: #cbd5e1;
            max-width: 90%;
        }
        .nowclasses-wrapper.page-test-prep .hero-badge {
            font-size: 0.85rem;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.05);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            backdrop-filter: blur(4px);
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
            cursor: default;
        }
        .nowclasses-wrapper.page-test-prep .hero-badge:hover {
            transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 255, 255, 0.6);
        }
        .nowclasses-wrapper.page-test-prep .btn-hero-primary {
            background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%);
            color: #ffffff;
            border: none;
            font-weight: 600;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35);
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-test-prep .btn-hero-primary:hover,
        .nowclasses-wrapper.page-test-prep .btn-hero-primary:focus {
            background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%);
            color: #ffffff;
            box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5);
            transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-test-prep .btn-hero-outline {
            background: transparent;
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            font-weight: 600;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-test-prep .btn-hero-outline:hover,
        .nowclasses-wrapper.page-test-prep .btn-hero-outline:focus {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            border-color: #ffffff;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
            transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-test-prep .hero-capsule-container {
            width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D;
            display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
            box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25);
            overflow: hidden; margin: 0 auto; background-color: rgba(255,255,255,0.1);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; cursor: pointer;
            transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
        }
        .nowclasses-wrapper.page-test-prep .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
        .nowclasses-wrapper.page-test-prep .hero-capsule-container:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px); box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #FFD65A; }
        @media (max-width: 991.98px) { .nowclasses-wrapper.page-test-prep .hero-capsule-container { height: 270px; max-width: 320px; } }
        @media (max-width: 767.98px) { .nowclasses-wrapper.page-test-prep .hero-title { font-size: 2.5rem; } .nowclasses-wrapper.page-test-prep .hero-subtitle { font-size: 1rem; max-width: 100%; } .nowclasses-wrapper.page-test-prep .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; } }
        .nowclasses-wrapper .smarter-prep-collage {
            background-color: #fdfdfd; 
            padding: 100px 20px;
            font-family: 'Inter', 'SUSE', sans-serif;
            overflow: hidden;
        }
        .nowclasses-wrapper .smarter-prep-collage .content-wrapper { padding-right: 30px; padding-bottom: 20px; }
        .nowclasses-wrapper .smarter-prep-collage .pill-badge {
            display: inline-block; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: #ffffff; padding: 6px 20px; border-radius: 30px; font-weight: 700; font-size: 0.85rem;
            text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
        }
        .nowclasses-wrapper .smarter-prep-collage .main-heading { font-size: 2.7rem; font-weight: 900; color: #1a1a2e; line-height: 1.15; margin-bottom: 15px; letter-spacing: -0.5px; white-space: nowrap; }
        .nowclasses-wrapper .smarter-prep-collage .sub-heading { font-size: 1.15rem; font-weight: 600; color: #0ea5e9; margin-bottom: 25px; }
        .nowclasses-wrapper .smarter-prep-collage .body-text { font-size: 1rem; line-height: 1.8; color: #5a6674; margin-bottom: 18px; text-align: justify; }
        .nowclasses-wrapper .smarter-prep-collage .diamond-wrapper { position: relative; z-index: 1; padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 650px; }
        .nowclasses-wrapper .smarter-prep-collage .diamond-collage { position: relative; width: 85%; aspect-ratio: 100 / 65.666; transform: rotate(45deg); z-index: 2; }
        .nowclasses-wrapper .smarter-prep-collage .d-box { position: absolute; overflow: hidden; background: #3a3a3a; border-radius: 2px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); z-index: 2; }
        .nowclasses-wrapper .smarter-prep-collage .d-box img { width: 100%; height: 100%; object-fit: cover; transform: rotate(-45deg) scale(1.45); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); display: block; }
        .nowclasses-wrapper .smarter-prep-collage .d-box:hover img { transform: rotate(-45deg) scale(1.55); }
        .nowclasses-wrapper .smarter-prep-collage .d-small-1 { width: 31.333%; height: 47.715%; top: 0; left: 0; }
        .nowclasses-wrapper .smarter-prep-collage .d-small-2 { width: 31.333%; height: 47.715%; bottom: 0; left: 0; }
        .nowclasses-wrapper .smarter-prep-collage .d-large { width: 65.666%; height: 100%; top: 0; right: 0; }
        .nowclasses-wrapper .smarter-prep-collage .d-accent { position: absolute; aspect-ratio: 1; z-index: 1; border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .nowclasses-wrapper .smarter-prep-collage .accent-1 { background-color: #0ea5e9; width: 13%; top: -5.5%; left: 23%; }
        .nowclasses-wrapper .smarter-prep-collage .accent-2 { background-color: #4facfe; width: 13%; bottom: -5.5%; left: 23%; }
        .nowclasses-wrapper .smarter-prep-collage .accent-3 { background-color: #00f2fe; width: 13%; top: 43.5%; left: -6.5%; }
        .nowclasses-wrapper .smarter-prep-collage .accent-4 { background-color: #0ea5e9; width: 7%; top: -18%; right: -8%; }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card { 
            position: absolute; bottom: 20px; left: -10px; background: #ffffff; 
            padding: 24px 28px; border-radius: 16px; display: flex; align-items: center; gap: 15px; 
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); z-index: 5; animation: float 5s ease-in-out infinite; 
        }
        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card .icon-circle { width: 45px; height: 45px; background: #0ea5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card .icon-circle svg { width: 22px; height: 22px; fill: currentColor; }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card .stats-info p { margin: 0; }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card .stats-info .stats-number { font-size: 1.3rem; font-weight: 900; color: #1a1a2e; line-height: 1; margin-bottom: 2px; }
        .nowclasses-wrapper .smarter-prep-collage .floating-stats-card .stats-info .stats-label { font-size: 0.8rem; font-weight: 600; color: #5a6674; text-transform: uppercase; letter-spacing: 0.5px; }
        @media (max-width: 1199px) { .nowclasses-wrapper .smarter-prep-collage .main-heading { white-space: normal; } }
        @media (max-width: 991px) { .nowclasses-wrapper .smarter-prep-collage .main-heading { font-size: 2.5rem; } .nowclasses-wrapper .smarter-prep-collage .content-wrapper { padding-right: 0; margin-bottom: 50px; } .nowclasses-wrapper .smarter-prep-collage .diamond-wrapper { min-height: 550px; } .nowclasses-wrapper .smarter-prep-collage .diamond-collage { width: 85%; } .nowclasses-wrapper .smarter-prep-collage .floating-stats-card { left: 10px; bottom: 0px; } }
        @media (max-width: 768px) { .nowclasses-wrapper .smarter-prep-collage .diamond-collage { width: 90%; } .nowclasses-wrapper .smarter-prep-collage .diamond-wrapper { min-height: 450px; } }
        .nowclasses-wrapper.page-test-prep .modern-plm-process {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            padding: 4rem 0;
            background-color: #FDF8F6; 
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .page-title {
            text-align: center;
            font-weight: 800;
            font-size: 2rem;
            letter-spacing: 1px;
            color: #1a1a1a;
            margin-bottom: 3rem;
            text-transform: uppercase;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-card {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden; 
            height: 100%;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
            transform-style: preserve-3d;
            will-change: transform;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-card:hover {
            transform: translateY(-8px) scale3d(1.02, 1.02, 1.02);
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-content {
            padding: 1.5rem 4rem 1.5rem 1.5rem;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-icon {
            font-size: 2.5rem;
            color: #333; 
            margin-bottom: 1.25rem;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-card:hover .plm-icon {
            transform: translateZ(20px) scale(1.1);
            color: #0095D9;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-title {
            font-size: 1.2rem;
            font-weight: 800;
            text-transform: uppercase;
            line-height: 1.2;
            color: #000;
            margin-bottom: 0.25rem;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-subtitle {
            font-size: 0.85rem;
            font-weight: 700;
            color: #555;
            margin-bottom: 0.75rem;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-text {
            font-size: 0.85rem;
            color: #444;
            line-height: 1.4;
            margin: 0;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-sidebar {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 45px;
            display: flex;
            justify-content: center;
            padding-top: 1.25rem;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .plm-number {
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 700;
        }
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-1 { background-color: #f4b41a; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-2 { background-color: #f17036; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-3 { background-color: #8b715f; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-4 { background-color: #55b259; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-5 { background-color: #17a2b8; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-6 { background-color: #2e6db5; } 
        .nowclasses-wrapper.page-test-prep .modern-plm-process .bg-color-7 { background-color: #6a7b97; } 
        .nowclasses-wrapper .activity-container { background: #e1f7fe; }
        .nowclasses-wrapper .activity-container .activity-strip {
            background-color: #ffffff;
            clip-path: polygon(2% 8%, 50% 0, 98% 8%, 99.5% 11%, 100% 15%, 100% 85%, 99.5% 89%, 98% 92%, 50% 100%, 2% 92%, 0.5% 89%, 0% 85%, 0% 15%, 0.5% 11%);
            padding: 0.6rem 2rem; /* Decreased vertical padding to reduce bezel */
            margin-bottom: 1.25rem;
            transition: all 0.4s ease-in-out;
            cursor: pointer;
            position: relative;
            overflow: hidden; 
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
        }
        .nowclasses-wrapper .activity-container .strip-number {
            font-size: 2.5rem; font-weight: 800; color: transparent;
            -webkit-text-stroke: 2px #f4a261; margin-bottom: 0; line-height: 1; transition: all 0.4s ease-in-out;
        }
        .nowclasses-wrapper .activity-container .strip-title {
            color: #2b3a4a; font-weight: 700; font-size: 1.05rem; margin-top: 0.2rem; margin-bottom: 0; transition: color 0.4s ease-in-out; font-family: 'SUSE', sans-serif;
        }
        .nowclasses-wrapper .activity-container .strip-desc {
            color: #000000;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500; margin-bottom: 0; transition: color 0.4s ease-in-out; font-family: 'SUSE', sans-serif;
        }
        .nowclasses-wrapper .activity-container .image-container { display: flex; justify-content: center; align-items: center; width: 100%; }
        .nowclasses-wrapper .activity-container .image-wrapper {
            clip-path: polygon(2% 5%, 50% 0, 98% 5%, 99% 10%, 100% 15%, 100% 85%, 99% 90%, 98% 95%, 50% 100%, 2% 95%, 1% 90%, 0% 85%, 0% 15%, 1% 10%);
            overflow: hidden; background-color: #eee; width: 100%; max-width: 270px;
        }
        .nowclasses-wrapper .activity-container .image-wrapper img { width: 100%; height: 110px; /* Increased height */ object-fit: cover; display: block; transition: transform 0.5s ease; }
        .nowclasses-wrapper .activity-container .activity-strip:hover .image-wrapper img { transform: scale(1.1); }
        .nowclasses-wrapper .activity-container .mobile-bg-img { display: none; }
        /* Hover Effects */
        .nowclasses-wrapper .activity-container .strip-1:hover { background-color: #ff4d4d; transform: scale(1.01); }
        .nowclasses-wrapper .activity-container .strip-1:hover .strip-title, .nowclasses-wrapper .activity-container .strip-1:hover .strip-desc { color: #ffffff; }
        .nowclasses-wrapper .activity-container .strip-1:hover .strip-number { -webkit-text-stroke: 2px #ffffff; }
        .nowclasses-wrapper .activity-container .strip-2:hover { background-color: #f4a261; transform: scale(1.01); }
        .nowclasses-wrapper .activity-container .strip-2:hover .strip-title, .nowclasses-wrapper .activity-container .strip-2:hover .strip-desc { color: #ffffff; }
        .nowclasses-wrapper .activity-container .strip-2:hover .strip-number { -webkit-text-stroke: 2px #ffffff; }
        .nowclasses-wrapper .activity-container .strip-3:hover { background-color: #ffca3a; transform: scale(1.01); }
        .nowclasses-wrapper .activity-container .strip-3:hover .strip-title { color: #2b3a4a; }
        .nowclasses-wrapper .activity-container .strip-3:hover .strip-desc { color: #4a4a4a; }
        .nowclasses-wrapper .activity-container .strip-3:hover .strip-number { -webkit-text-stroke: 2px #2b3a4a; }
        .nowclasses-wrapper .activity-container .strip-4:hover { background-color: #8ac926; transform: scale(1.01); }
        .nowclasses-wrapper .activity-container .strip-4:hover .strip-title, .nowclasses-wrapper .activity-container .strip-4:hover .strip-desc { color: #ffffff; }
        .nowclasses-wrapper .activity-container .strip-4:hover .strip-number { -webkit-text-stroke: 2px #ffffff; }
        .nowclasses-wrapper .activity-container .strip-5:hover { background-color: #1982c4; transform: scale(1.01); }
        .nowclasses-wrapper .activity-container .strip-5:hover .strip-title, .nowclasses-wrapper .activity-container .strip-5:hover .strip-desc { color: #ffffff; }
        .nowclasses-wrapper .activity-container .strip-5:hover .strip-number { -webkit-text-stroke: 2px #ffffff; }
        @media (max-width: 768px) {
            .nowclasses-wrapper .activity-container .activity-strip { 
                clip-path: polygon(2% 4%, 50% 0, 98% 4%, 99.5% 6%, 100% 10%, 100% 90%, 99.5% 94%, 98% 96%, 50% 100%, 2% 96%, 0.5% 94%, 0% 90%, 0% 10%, 0.5% 6%);
                padding: 1.1rem 1rem; text-align: left; 
            }
            .nowclasses-wrapper .activity-container .desktop-img-col { display: none !important; }
            .nowclasses-wrapper .activity-container .mobile-bg-img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.12; z-index: 0; pointer-events: none; }
            .nowclasses-wrapper .activity-container .activity-strip > div { position: relative; z-index: 1; }
        }
/* =================================================================
   25. PRIVACY POLICY PAGE (privacy.html) — PAGE-SPECIFIC
   ================================================================= */
        /* =========================================
           NEW HERO SECTION
           ========================================= */
        .nowclasses-wrapper.page-privacy .hero-section {
            position: relative;
            background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
            color: #ffffff;
            padding-top: 2.5rem;
            padding-bottom: 4.25rem;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
            -webkit-mask-position: top left, bottom left;
            -webkit-mask-repeat: no-repeat, repeat-x;
            mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
            mask-size: 100% calc(100% - 11.5px), 24px 12px;
            mask-position: top left, bottom left;
            mask-repeat: no-repeat, repeat-x;
        }
        .nowclasses-wrapper.page-privacy .hero-section::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0; height: 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
            background-size: 24px 12px;
            background-position: bottom left;
            background-repeat: repeat-x;
            z-index: 3;
            pointer-events: none;
        }
        .nowclasses-wrapper.page-privacy .hero-grid-overlay {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 40px 40px; z-index: 1;
        }
        .nowclasses-wrapper.page-privacy .hero-content { position: relative; z-index: 2; }
        .nowclasses-wrapper.page-privacy .hero-breadcrumb {
            display: inline-block; font-size: 0.75rem; letter-spacing: 0.5px; color: #b0b8d6;
            border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.35rem 1rem; border-radius: 50px;
        }
        .nowclasses-wrapper.page-privacy .hero-breadcrumb span { color: #f7a040; }
        .nowclasses-wrapper.page-privacy .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: -1px; color: #ffffff; }
        .nowclasses-wrapper.page-privacy .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; }
        .nowclasses-wrapper.page-privacy .hero-badge {
            font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px);
            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default;
        }
        .nowclasses-wrapper.page-privacy .hero-badge:hover {
            transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6);
        }
        .nowclasses-wrapper.page-privacy .btn-hero-primary {
            background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%); color: #ffffff; border: none; font-weight: 600;
            padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-privacy .btn-hero-primary:hover, .nowclasses-wrapper.page-privacy .btn-hero-primary:focus {
            background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff;
            box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-privacy .btn-hero-outline {
            background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600;
            padding: 0.6rem 1.8rem; border-radius: 50px; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .nowclasses-wrapper.page-privacy .btn-hero-outline:hover, .nowclasses-wrapper.page-privacy .btn-hero-outline:focus {
            background: rgba(255, 255, 255, 0.1); color: #ffffff; border-color: #ffffff;
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
        }
        .nowclasses-wrapper.page-privacy .hero-capsule-container {
            width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D;
            display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
            box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto;
            background-color: rgba(255,255,255,0.1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d; cursor: pointer; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
        }
        .nowclasses-wrapper.page-privacy .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
        .nowclasses-wrapper.page-privacy .hero-capsule-container:hover {
            transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
            box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #FFD65A;
        }
        @media (max-width: 991.98px) { .nowclasses-wrapper.page-privacy .hero-capsule-container { height: 270px; max-width: 320px; } }
        @media (max-width: 767.98px) {
            .nowclasses-wrapper.page-privacy .hero-title { font-size: 2.5rem; }
            .nowclasses-wrapper.page-privacy .hero-subtitle { font-size: 1rem; max-width: 100%; }
            .nowclasses-wrapper.page-privacy .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
        }
		/* =========================================
   BASE SCOPED CSS
   ========================================= */
body {
    /* Global perspective to allow 3D transforms to feel deep */
    perspective: 1200px; 
    background-color: #f4f6fa;
}
.nowclasses-wrapper {
    font-family: 'SUSE', sans-serif;
    color: #2D2D2D;
    background-color: #FFF;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-weight: 300;
    box-shadow: 0 0 40px rgba(0,0,0,0.05);
}
.nowclasses-wrapper h1, .nowclasses-wrapper h2, .nowclasses-wrapper h3, .nowclasses-wrapper h4, .nowclasses-wrapper h5 {
    font-family: 'SUSE', sans-serif;
    font-weight: 500;
    color: #2D2D2D;
}
/* Top Bar */
.nowclasses-wrapper .top-bar {
    background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%);
    font-size: 0.85rem;
    color: #ffffff;
    border-bottom: none;
    font-weight: 400;
    padding-top: 8px; 
    padding-bottom: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1040;
}
.nowclasses-wrapper .top-bar i { color: #ffffff; margin-right: 0px; }
.nowclasses-wrapper .top-bar a { color: #ffffff; text-decoration: none; transition: opacity 0.3s ease; }
.nowclasses-wrapper .top-bar a:hover { opacity: 0.8; }
/* Navbar */
.nowclasses-wrapper .navbar {
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    /* Enhanced 3D shadow for Navbar */
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
    z-index: 1030;
}
.nowclasses-wrapper .navbar-brand { font-family: 'SUSE', sans-serif; font-size: 1.5rem; font-weight: 600; color: #2D2D2D; }
.nowclasses-wrapper .navbar-brand i, .nowclasses-wrapper .navbar-brand .brand-now { color: #00D9B8; }
.nowclasses-wrapper .navbar-logo-img, .nowclasses-wrapper .offcanvas-logo-img { height: 40px; width: auto; object-fit: contain; border-radius: 8px; background-color: transparent; }
.nowclasses-wrapper .offcanvas-logo-img { height: 28px; }
.nowclasses-wrapper .nav-link { font-weight: 400; color: #2D2D2D; font-size: 0.95rem; padding: 0.5rem 0.8rem; transition: color 0.3s ease; }
.nowclasses-wrapper .nav-link:hover { color: #0095D9; }
.nowclasses-wrapper .dropdown-menu { border: none; box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-radius: 12px; }
.nowclasses-wrapper .dropdown-item { font-size: 0.9rem; padding: 8px 20px; font-weight: 300; transition: background 0.3s ease, color 0.3s ease; }
.nowclasses-wrapper .dropdown-item:hover { background-color: #FDF8F6; color: #0095D9; }
/* Buttons */
.nowclasses-wrapper .btn-primary-custom { 
    background: linear-gradient(315deg, #FFA53D 0%, #FF6B00 100%); 
    color: #fff; 
    font-weight: 500; 
    border: none; 
    padding: 10px 28px; 
    border-radius: 50px; 
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 
    /* 3D Button Shadow */
    box-shadow: 0 8px 15px rgba(255, 107, 0, 0.3), inset 0 -3px 0 rgba(0,0,0,0.15); 
}
.nowclasses-wrapper .btn-primary-custom:hover { 
    transform: perspective(400px) translateZ(15px) translateY(-3px); 
    box-shadow: 0 15px 25px rgba(255, 107, 0, 0.45), inset 0 -3px 0 rgba(0,0,0,0.15); 
    color:#fff;
}
@media (min-width: 992px) {
    .nowclasses-wrapper .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; animation: fadeIn3D 0.4s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: top center; }
    .nowclasses-wrapper .dropdown-toggle::after { vertical-align: middle; }
    .nowclasses-wrapper .dropdown-toggle[data-bs-toggle="dropdown"] { pointer-events: none; }
}
@keyframes fadeIn3D { from { opacity: 0; transform: rotateX(-15deg) translateY(10px); } to { opacity: 1; transform: rotateX(0) translateY(0); } }
/* =========================================
   NEW HERO SECTION
   ========================================= */
.nowclasses-wrapper .hero-section {
    position: relative;
    background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
    color: #ffffff;
    padding-top: 2.5rem;
    padding-bottom: 4.25rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    /* Adds depth to the section block itself */
    box-shadow: inset 0 -20px 40px rgba(0,0,0,0.3);
    -webkit-mask-image:
        linear-gradient(black, black),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
    -webkit-mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-image:
        linear-gradient(black, black),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% calc(100% - 11.5px), 24px 12px;
    mask-position: top left, bottom left;
    mask-repeat: no-repeat, repeat-x;
}
.nowclasses-wrapper .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
    background-size: 24px 12px;
    background-position: bottom left;
    background-repeat: repeat-x;
    z-index: 3;
    pointer-events: none;
}
.nowclasses-wrapper .hero-grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    /* 3D tilt for background grid */
    transform: perspective(1000px) rotateX(20deg) scale(1.1);
    transform-origin: top center;
}
.nowclasses-wrapper .hero-content { position: relative; z-index: 2; transform-style: preserve-3d; }
.nowclasses-wrapper .hero-breadcrumb {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #b0b8d6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.nowclasses-wrapper .hero-breadcrumb span { color: #f7a040; }
.nowclasses-wrapper .hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Georgia', serif;
    letter-spacing: -1px;
    color: #ffffff;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}
.nowclasses-wrapper .hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 90%;
    text-shadow: 1px 2px 5px rgba(0,0,0,0.3);
}
.nowclasses-wrapper .hero-badge {
    font-size: 0.85rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.nowclasses-wrapper .hero-badge:hover {
    transform: perspective(600px) rotateX(15deg) rotateY(-10deg) translateZ(10px) translateY(-4px) scale(1.05);
    box-shadow: -5px 15px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}
.nowclasses-wrapper .btn-hero-primary {
    background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35), inset 0 -3px 0 rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nowclasses-wrapper .btn-hero-primary:hover,
.nowclasses-wrapper .btn-hero-primary:focus {
    background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%);
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(255, 123, 35, 0.5), inset 0 -3px 0 rgba(0,0,0,0.15);
    transform: perspective(600px) rotateX(10deg) translateZ(15px) translateY(-4px) scale(1.03);
}
.nowclasses-wrapper .btn-hero-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nowclasses-wrapper .btn-hero-outline:hover,
.nowclasses-wrapper .btn-hero-outline:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    transform: perspective(600px) rotateX(10deg) translateZ(15px) translateY(-4px) scale(1.03);
}
.nowclasses-wrapper .hero-capsule-container {
    width: 100%;
    max-width: 400px;
    height: 340px;
    border-radius: 16px;
    border: 4px solid #FFC94D;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    /* Deepened base shadow */
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), -15px 25px 45px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    /* Enhanced 3D starting tilt */
    transform: perspective(1200px) rotateX(15deg) rotateY(-20deg) translateZ(20px);
}
.nowclasses-wrapper .hero-capsule-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Internal pop */
    transform: translateZ(30px); 
}
.nowclasses-wrapper .hero-capsule-container:hover {
    transform: perspective(1200px) rotateX(5deg) rotateY(-5deg) scale3d(1.08, 1.08, 1.08) translateZ(40px) translateY(-10px);
    box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), -25px 40px 60px rgba(0, 0, 0, 0.5);
    border-color: #FFD65A;
}
@media (max-width: 991.98px) {
    .nowclasses-wrapper .hero-capsule-container { height: 270px; max-width: 320px; }
}
@media (max-width: 767.98px) {
    .nowclasses-wrapper .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
    .nowclasses-wrapper .hero-grid-overlay { transform: perspective(800px) rotateX(10deg); }
}
/* =========================================
   SCOPED STYLES FOR GCSE CAPSULE PAGE DESIGN
   ========================================= */
.capsule-page-design {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f8fafc;
    color: #475569;
    padding: 3rem 0;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.02);
}
.capsule-page-design.ib-teach {
    background: #e3e8ff;
}
.capsule-page-design h2 {
    color: #0f172a;
    font-weight: 800;
    margin: 1rem 0 2rem 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}
.capsule-page-design h5 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 1.15rem;
}
.capsule-page-design p {
    line-height: 1.6;
    color: #64748b;
}
/* Section Badges */
.capsule-page-design .section-badge {
    display: inline-block;
    padding: 0.35rem 1.5rem;
    border: 2px dashed #cbd5e1;
    border-radius: 50px;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}
.capsule-page-design .section-badge:hover {
    transform: translateZ(10px) translateY(-2px);
}
/* Modern Card Design (Section 2) with 3D Effect */
.capsule-page-design .modern-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 2.25rem 1.75rem 1.75rem 1.75rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    /* Layered shadow for un-hovered depth */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.capsule-page-design .modern-card:hover {
    /* 3D Rotate and Lift */
    transform: perspective(1000px) rotateX(8deg) rotateY(-8deg) translateZ(20px) translateY(-10px);
    /* Massive dispersed shadow to simulate floating */
    box-shadow: -15px 25px 45px -10px rgba(0, 0, 0, 0.15), 0 15px 20px -3px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}
.capsule-page-design .modern-card > * {
    /* Pop internal elements slightly */
    transform: translateZ(20px);
    transition: transform 0.3s ease;
}
.capsule-page-design .card-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
}
.capsule-page-design .card-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}
.capsule-page-design .modern-card:hover .card-icon-wrap {
    transform: translateZ(40px) scale(1.1);
}
.capsule-page-design .card-num {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}
.capsule-page-design .modern-card:hover .card-num {
     transform: translateZ(30px);
}
/* Color Utilities */
.capsule-page-design .bg-blue { background-color: #0ea5e9; }
.capsule-page-design .text-blue { color: #0ea5e9; }
.capsule-page-design .bg-purple { background-color: #a855f7; }
.capsule-page-design .text-purple { color: #a855f7; }
.capsule-page-design .bg-red { background-color: #f43f5e; }
.capsule-page-design .text-red { color: #f43f5e; }
.capsule-page-design .bg-yellow { background-color: #f59e0b; }
.capsule-page-design .text-yellow { color: #f59e0b; }
.capsule-page-design .bg-green { background-color: #10b981; }
.capsule-page-design .text-green { color: #10b981; }
.capsule-page-design .bg-pink { background-color: #ec4899; }
.capsule-page-design .text-pink { color: #ec4899; }
/* --- CAPSULE STRIPS DESIGN (Section 3) 3D Upgrade --- */
.capsule-page-design .capsule-strip {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 100px;
    padding: 1rem 2.5rem 1rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid #f1f5f9;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    transform-style: preserve-3d;
    /* 3D Base Shadow */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0,0,0,0.03);
}
.capsule-page-design .capsule-strip:hover {
    /* 3D Lift & Rotate */
    transform: perspective(1000px) rotateX(6deg) rotateY(-2deg) translateZ(15px) translateY(-6px) scale(1.02);
    box-shadow: -10px 20px 35px -10px rgba(0, 0, 0, 0.15), 0 10px 15px rgba(0,0,0,0.05);
    border-color: #e2e8f0;
}
.capsule-page-design .capsule-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    margin-right: 1.75rem;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: inset 0 -3px 8px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.08);
}
.capsule-page-design .capsule-strip:hover .capsule-icon {
    transform: translateZ(30px) scale(1.1) rotate(10deg);
}
.capsule-page-design .capsule-content {
    text-align: left;
    flex-grow: 1;
    transition: transform 0.4s ease;
}
.capsule-page-design .capsule-strip:hover .capsule-content {
    transform: translateZ(20px);
}
.capsule-page-design .capsule-content p {
    font-size: 0.95rem;
    margin-bottom: 0;
}
/* Capsule Soft Colors */
.capsule-page-design .capsule-bg-blue { background-color: #e0f2fe; color: #0284c7; }
.capsule-page-design .capsule-bg-purple { background-color: #f3e8ff; color: #9333ea; }
.capsule-page-design .capsule-bg-red { background-color: #ffe4e6; color: #e11d48; }
/* Mobile Adjustments for Capsules */
@media (max-width: 768px) {
    .capsule-page-design .capsule-strip {
        flex-direction: column;
        text-align: center;
        border-radius: 24px;
        padding: 2rem 1.5rem;
    }
    .capsule-page-design .capsule-icon {
        margin-right: 0;
        margin-bottom: 1.25rem;
    }
    .capsule-page-design .capsule-content {
        text-align: center;
    }
}
/* =========================================
   SECTION 9: REGISTRATION FORM
   ========================================= */
.nowclasses-wrapper .form-section-bg { position: relative; background-color: #FFF; padding: 90px 0; z-index: 1; }
.nowclasses-wrapper .form-section-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(135deg, rgba(0, 59, 92, 0.95), rgb(0 149 217 / 74%)), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&q=80') center / cover no-repeat; z-index: -1; border-radius: 0 0 50px 50px; }
.nowclasses-wrapper .form-card { border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); transition: transform 0.4s ease, box-shadow 0.4s ease; border: none; background: #ffffff; position: relative; z-index: 10; }
.nowclasses-wrapper .form-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0, 59, 92, 0.20); }
.nowclasses-wrapper .form-floating > .form-control, .nowclasses-wrapper .form-floating > .form-select { border-radius: 10px; border: 1px solid #e1e5eb; background-color: #f8fafc; font-size: 0.95rem; transition: all 0.3s ease; }
.nowclasses-wrapper .form-floating > .form-control:focus, .nowclasses-wrapper .form-floating > .form-select:focus { background-color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 149, 217, 0.1); border-color: #0095D9; }
.nowclasses-wrapper .form-floating > label { color: #6c757d; font-weight: 500; }
.nowclasses-wrapper .input-group-text { background-color: #f8fafc; border: 1px solid #e1e5eb; border-right: none; border-radius: 10px 0 0 10px; }
.nowclasses-wrapper .input-group .form-control { border-left: none; }
.nowclasses-wrapper .input-group:focus-within .input-group-text { border-color: #0095D9; background-color: #ffffff; }
.nowclasses-wrapper .program-check-group { display: flex; flex-wrap: wrap; gap: 10px; }
.nowclasses-wrapper .program-check-group .form-check { padding-left: 0; margin-bottom: 0; }
.nowclasses-wrapper .program-check-group .form-check-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nowclasses-wrapper .program-check-group .form-check-label { display: inline-block; background-color: #f8fafc; border: 1px solid #e1e5eb; border-radius: 50px; padding: 8px 18px; font-size: 0.85rem; font-weight: 600; color: #495057; cursor: pointer; transition: all 0.3s ease; user-select: none; position: relative; z-index: 5; }
.nowclasses-wrapper .program-check-group .form-check-input:checked + .form-check-label { background: linear-gradient(135deg, #00C2FF 0%, #7B5CFA 100%); color: #ffffff; border-color: transparent; box-shadow: 0 4px 12px rgba(123, 92, 250, 0.35); }
.nowclasses-wrapper .program-check-group .form-check-label:hover { border-color: #0095D9; color: #0095D9; transform: translateY(-2px); }
.nowclasses-wrapper .program-check-group .form-check-input:checked + .form-check-label:hover { color: #ffffff; }
/* =========================================
   CTA STRIP BEFORE FOOTER
   ========================================= */
.nowclasses-wrapper .cta-strip { 
    background: url(../images/cta-bg.webp) no-repeat center top;
    background-size: cover;
    padding: 60px 0; 
    position: relative;
    transform-style: preserve-3d;
}
.nowclasses-wrapper .cta-strip > .container-fluid {
    position: relative;
    z-index: 2;
/*     transform: translateZ(30px); */
}

/* =========================================
   FOOTER SECTION
   ========================================= */
.nowclasses-wrapper .site-footer { 
    background: #0f172a; 
    padding: 70px 0 0; 
    border-top: 1px solid rgba(0,0,0,0.06); 
    box-shadow: 0 -15px 30px rgba(0,0,0,0.2); 
    position: relative;
    z-index: 10;
}
.nowclasses-wrapper .footer-logo { font-family: 'SUSE', sans-serif; font-size: 1.7rem; font-weight: 600; color: #2D2D2D; transition: transform 0.3s ease; display: inline-block; }
.nowclasses-wrapper .footer-logo:hover { transform: scale(1.05) translateZ(10px); }
.nowclasses-wrapper .footer-logo-img { height: 48px; width: auto; object-fit: contain; background: transparent; }
.nowclasses-wrapper .footer-about-text { font-size: 1.05rem; line-height: 1.75; max-width: 380px; margin: 20px 0 26px; font-weight: 400; color: #cbd5e1; }
.nowclasses-wrapper .footer-social { display: flex; gap: 14px; perspective: 400px; }
.nowclasses-wrapper .footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 20%); display: flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; transition: all 0.3s ease; }
.nowclasses-wrapper .footer-social a:hover { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); border-color: transparent; color: #fff; transform: translateZ(15px) translateY(-6px) rotate(10deg); box-shadow: -5px 10px 20px rgba(0, 149, 217, 0.4); }
.nowclasses-wrapper .footer-heading { font-weight: 700; font-size: 1.4rem; margin-bottom: 28px; color: #fff; text-shadow: 1px 2px 4px rgba(0,0,0,0.3); }
.nowclasses-wrapper .footer-links { list-style: none; padding: 0; margin: 0; }
.nowclasses-wrapper .footer-links li { margin-bottom: 18px; }
.nowclasses-wrapper .footer-links a { text-decoration: none; font-size: 1.05rem; transition: all 0.3s ease; display: inline-block;  color: #cbd5e1; font-weight: 400;}
.nowclasses-wrapper .footer-links a:hover { color: #0095D9; transform: translateX(8px) translateZ(5px); }
.nowclasses-wrapper .footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; font-size: 1.02rem; line-height: 1.5; max-width: 320px; transition: transform 0.3s ease; font-weight: 400; color: #cbd5e1;}
.nowclasses-wrapper .footer-contact-item:hover { transform: translateX(8px) translateZ(5px); }
.nowclasses-wrapper .footer-contact-item i { color: #0095D9; font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
.nowclasses-wrapper .footer-contact-item a { text-decoration: none; transition: color 0.3s ease; color: #cbd5e1; }
.nowclasses-wrapper .footer-contact-item a:hover { color: #0095D9; }
.nowclasses-wrapper .footer-bottom { border-top: 1px solid rgb(255 255 255 / 12%); margin-top: 55px; padding: 24px 0; text-align: center; font-size: 0.95rem; color: #94a3b8; }
@media (max-width: 991px) {
    .nowclasses-wrapper .site-footer { padding-top: 50px; text-align: left; }
    .nowclasses-wrapper .footer-about-text { margin-left: auto; margin-right: auto; }
    .nowclasses-wrapper .footer-social, .nowclasses-wrapper .footer-contact-item { justify-content: left; text-align: left; }
}
@media (max-width: 767px) {
    .nowclasses-wrapper .site-footer { padding-top: 30px; }
    .nowclasses-wrapper .footer-bottom { margin-top: 30px; padding: 15px 0; }
}/* =============================================================
   NOWCLASSES — GALLERY STYLESHEET (standalone)
   Only needed on pages with a Fancybox image gallery.
   Currently: happening.html only.
   Load order on those pages:
     <link rel="stylesheet" href="css/global.css">
     <link rel="stylesheet" href="css/gallery.css">
   NOTE: the 3D tilt/perspective effect lives on an INNER wrapper
   (.gallery-tilt), not on the <a data-fancybox> trigger itself
   (.gallery-item).
   ============================================================= */
.nowclasses-wrapper .gallery-sec { padding: 60px 0; }
.nowclasses-wrapper .gallery-item { display: block; text-decoration: none; cursor: pointer; }
.nowclasses-wrapper .ratio-tall { aspect-ratio: 4 / 5; }
.nowclasses-wrapper .ratio-wide { aspect-ratio: 4 / 3; }
.nowclasses-wrapper .gallery-tilt {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1.25rem;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    will-change: transform;
}
.nowclasses-wrapper .gallery-tilt::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background-color: rgba(255, 154, 51, 0.59); 
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
    z-index: 1; 
    transform: translateZ(30px); 
}
.nowclasses-wrapper .gallery-tilt::after { 
    content: '+'; 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%) translateZ(60px); 
    color: #ffffff; 
    font-size: 3rem; 
    font-weight: 300; 
    line-height: 1; 
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
    z-index: 2; 
}
.nowclasses-wrapper .gallery-tilt:hover::before, 
.nowclasses-wrapper .gallery-tilt:hover::after { 
    opacity: 1; 
}
.nowclasses-wrapper .gallery-tilt img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.4s ease; 
}
.nowclasses-wrapper .gallery-tilt:hover img { 
    transform: scale(1.05); 
}
/* 
   Note: All custom .fancybox__ CSS overrides have been removed. 
   The CDN stylesheet now handles the viewport centering naturally.
*//* =============================================================
   FIX: FANCYBOX SCROLL POSITION BUG (Escape Containing Block)
   ============================================================= */
/* 1. Strip the perspective from the body tag to restore position: fixed */
body, 
body.page-ib {
    perspective: none !important; 
}
/* 2. Move the perspective to the main wrapper. 
      This safely preserves all your VanillaTilt 3D effects site-wide 
      while allowing the Fancybox modal to open perfectly centered. */
.nowclasses-wrapper {
    perspective: 1200px !important; 
}/* =========================================
    BASE SCOPED CSS
    ========================================= */
.nowclasses-wrapper {
    font-family: 'SUSE', sans-serif;
    color: #2D2D2D;
    background-color: #FFF;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    font-weight: 300;
}
.nowclasses-wrapper h1, .nowclasses-wrapper h2, .nowclasses-wrapper h3, .nowclasses-wrapper h4, .nowclasses-wrapper h5 {
    font-family: 'SUSE', sans-serif;
    font-weight: 500;
    color: #2D2D2D;
}
/* Top Bar */
.nowclasses-wrapper .top-bar {
    background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%);
    font-size: 0.85rem;
    color: #ffffff;
    border-bottom: none;
    font-weight: 400;
    padding-top: 8px; 
    padding-bottom: 8px; 
}
.nowclasses-wrapper .top-bar i { color: #ffffff; margin-right: 0px; }
.nowclasses-wrapper .top-bar a { color: #ffffff; text-decoration: none; transition: opacity 0.3s ease; }
.nowclasses-wrapper .top-bar a:hover { opacity: 0.8; }
/* Navbar */
.nowclasses-wrapper .navbar {
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: 0 4px 6px -6px rgba(0,0,0,0.1);
    z-index: 1030;
}
.nowclasses-wrapper .navbar-brand { font-family: 'SUSE', sans-serif; font-size: 1.5rem; font-weight: 600; color: #2D2D2D; }
.nowclasses-wrapper .navbar-brand i, .nowclasses-wrapper .navbar-brand .brand-now { color: #00D9B8; }
.nowclasses-wrapper .navbar-logo-img, .nowclasses-wrapper .offcanvas-logo-img { height: 40px; width: auto; object-fit: contain; border-radius: 8px; background-color: transparent; }
.nowclasses-wrapper .offcanvas-logo-img { height: 28px; }
.nowclasses-wrapper .nav-link { font-weight: 400; color: #2D2D2D; font-size: 0.95rem; padding: 0.5rem 0.8rem; transition: color 0.3s ease; }
.nowclasses-wrapper .nav-link:hover { color: #0095D9; }
.nowclasses-wrapper .dropdown-item { font-size: 0.9rem; padding: 8px 20px; font-weight: 300; transition: background 0.3s ease, color 0.3s ease; }
.nowclasses-wrapper .dropdown-item:hover { background-color: #FDF8F6; color: #0095D9; }
/* Buttons */
.nowclasses-wrapper .btn-primary-custom { background: linear-gradient(315deg, #FFA53D 0%, #FF6B00 100%); color: #fff; font-weight: 500; border: none; padding: 10px 28px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35); }
.nowclasses-wrapper .btn-primary-custom:hover { opacity: 0.95; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255, 107, 0, 0.45); color:#fff;}
@media (min-width: 992px) {
    .nowclasses-wrapper .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; animation: fadeIn 0.3s ease; }
    .nowclasses-wrapper .dropdown-toggle::after { vertical-align: middle; }
    .nowclasses-wrapper .dropdown-toggle[data-bs-toggle="dropdown"] { pointer-events: none; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* =========================================
    NEW HERO SECTION
    ========================================= */
.nowclasses-wrapper .hero-section {
    position: relative;
    background: linear-gradient(135deg, #121936 0%, #1e2c5a 100%);
    color: #ffffff;
    padding-top: 2.5rem;
    padding-bottom: 4.25rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    -webkit-mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% calc(100% - 11.5px), 24px 12px;
    -webkit-mask-position: top left, bottom left;
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-image: linear-gradient(black, black), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% calc(100% - 11.5px), 24px 12px;
    mask-position: top left, bottom left;
    mask-repeat: no-repeat, repeat-x;
}
.nowclasses-wrapper .hero-section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0,0 A12,12 0 0,0 24,0' fill='none' stroke='%23FFC94D' stroke-width='2.5'/%3E%3C/svg%3E");
    background-size: 24px 12px;
    background-position: bottom left;
    background-repeat: repeat-x;
    z-index: 3;
    pointer-events: none;
}
.nowclasses-wrapper .hero-grid-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px; z-index: 1;
}
.nowclasses-wrapper .hero-content { position: relative; z-index: 2; }
.nowclasses-wrapper .hero-breadcrumb {
    display: inline-block; font-size: 0.75rem; letter-spacing: 0.5px; color: #b0b8d6;
    border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.35rem 1rem; border-radius: 50px;
}
.nowclasses-wrapper .hero-breadcrumb span { color: #f7a040; }
.nowclasses-wrapper .hero-title { font-size: 3.5rem; font-weight: 700; font-family: 'Georgia', serif; letter-spacing: -1px; color: #ffffff; }
.nowclasses-wrapper .hero-subtitle { font-size: 1.15rem; line-height: 1.6; color: #cbd5e1; max-width: 90%; }
.nowclasses-wrapper .hero-badge {
    font-size: 0.85rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05); padding: 0.4rem 1rem; border-radius: 50px; backdrop-filter: blur(4px);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease; cursor: default;
}
.nowclasses-wrapper .hero-badge:hover {
    transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.6);
}
.nowclasses-wrapper .btn-hero-primary {
    background: linear-gradient(90deg, #fca34d 0%, #ff7b23 100%); color: #ffffff; border: none; font-weight: 600;
    padding: 0.6rem 1.8rem; border-radius: 50px; box-shadow: 0 6px 20px rgba(255, 123, 35, 0.35); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nowclasses-wrapper .btn-hero-primary:hover, .nowclasses-wrapper .btn-hero-primary:focus {
    background: linear-gradient(90deg, #ff7b23 0%, #fca34d 100%); color: #ffffff;
    box-shadow: 0 12px 25px rgba(255, 123, 35, 0.5); transform: perspective(600px) rotateX(8deg) translateY(-4px) scale(1.03);
}
.nowclasses-wrapper .hero-capsule-container {
    width: 100%; max-width: 400px; height: 340px; border-radius: 16px; border: 4px solid #FFC94D;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
    box-shadow: 0 0 0 5px rgba(255, 201, 77, 0.18), 0 15px 35px rgba(0, 0, 0, 0.25); overflow: hidden; margin: 0 auto;
    background-color: rgba(255,255,255,0.1); transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d; cursor: pointer; transform: perspective(1000px) rotateX(8deg) rotateY(-12deg);
}
.nowclasses-wrapper .hero-capsule-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.nowclasses-wrapper .hero-capsule-container:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1.05, 1.05, 1.05) translateY(-10px);
    box-shadow: 0 0 0 6px rgba(255, 201, 77, 0.3), 0 25px 50px rgba(0, 0, 0, 0.4); border-color: #FFD65A;
}
@media (max-width: 991.98px) { .nowclasses-wrapper .hero-capsule-container { height: 270px; max-width: 320px; } }
@media (max-width: 767.98px) {
    .nowclasses-wrapper .hero-title { font-size: 2.5rem; }
    .nowclasses-wrapper .hero-subtitle { font-size: 1rem; max-width: 100%; }
    .nowclasses-wrapper .hero-section { padding-top: 2rem; padding-bottom: 3.25rem; }
}
/* =========================================
    BLOG DETAIL CSS 
    ========================================= */
.blog-page-wrapper {
    color: #333;
    background-color: #ffffff; 
    padding-bottom: 3rem;
}
.blog-page-wrapper .article-container {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.blog-page-wrapper .main-title {
    font-weight: 800;
    color: #1a1a1a;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.blog-page-wrapper .date-meta {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff6b6b, #f06595);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}
.blog-page-wrapper .date-meta i { margin-right: 0.4rem; }
.blog-page-wrapper .hero-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.blog-page-wrapper .sub-heading {
    font-weight: 800;
    color: #2c2c2c;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    margin-top: 2.5rem;
    position: relative;
    padding-left: 14px;
}
.blog-page-wrapper .sub-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    background: linear-gradient(to bottom, #339af0, #20c997);
    border-radius: 4px;
}
.blog-page-wrapper .article-text {
    color: #4a4a4a;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}
.blog-page-wrapper .grid-img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    height: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.blog-page-wrapper .grid-img:hover { transform: translateY(-3px); }
/* Sidebar Widgets */
.blog-page-wrapper .sidebar-widget {
    border: none;
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
}
.blog-page-wrapper .sidebar-widget:hover { transform: translateY(-2px); }
.blog-page-wrapper .widget-title {
    font-weight: 800;
    color: #1a1a1a;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.blog-page-wrapper .widget-search { background-color: #e7f5ff; }
.blog-page-wrapper .widget-search .widget-title { color: #1864ab; }
.blog-page-wrapper .search-input {
    border: 2px solid #fff;
    border-right: none;
    box-shadow: none;
    border-radius: 10px 0 0 10px;
    padding: 10px 15px;
}
.blog-page-wrapper .search-input:focus { border-color: #fff; box-shadow: 0 0 0 0.25rem rgba(51, 154, 240, 0.25); }
.blog-page-wrapper .btn-search {
    background: linear-gradient(135deg, #339af0, #5c7cfa);
    color: #fff; border: none; border-radius: 0 10px 10px 0; padding: 10px 20px; transition: opacity 0.2s;
}
.blog-page-wrapper .btn-search:hover { opacity: 0.9; color: #fff; }
.blog-page-wrapper .widget-categories { background-color: #f3d9fa; }
.blog-page-wrapper .widget-categories .widget-title { color: #862e9c; }
.blog-page-wrapper .category-list li {
    padding: 0.75rem 0; font-size: 1rem; color: #495057; font-weight: 600;
    border-bottom: 1px dashed rgba(134, 46, 156, 0.2); transition: color 0.2s ease; cursor: pointer;
}
.blog-page-wrapper .category-list li:hover { color: #862e9c; }
.blog-page-wrapper .category-list li:last-child { border-bottom: none; padding-bottom: 0; }
.blog-page-wrapper .category-badge {
    color: #fff; font-size: 0.8rem; font-weight: 700; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.blog-page-wrapper .category-list li:nth-child(1) .category-badge { background-color: #ff6b6b; }
.blog-page-wrapper .category-list li:nth-child(2) .category-badge { background-color: #339af0; }
.blog-page-wrapper .category-list li:nth-child(3) .category-badge { background-color: #20c997; }
.blog-page-wrapper .category-list li:nth-child(4) .category-badge { background-color: #fcc419; color: #333; }
.blog-page-wrapper .category-list li:nth-child(5) .category-badge { background-color: #cc5de8; }
.blog-page-wrapper .widget-news { background-color: #fff9db; }
.blog-page-wrapper .widget-news .widget-title { color: #d9480f; }
.blog-page-wrapper .news-item { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; align-items: center; cursor: pointer; }
.blog-page-wrapper .news-item:last-child { margin-bottom: 0; }
.blog-page-wrapper .news-thumb {
    width: 75px; height: 75px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: transform 0.3s ease;
}
.blog-page-wrapper .news-item:hover .news-thumb { transform: scale(1.05) rotate(-2deg); }
.blog-page-wrapper .news-title {
    font-size: 0.95rem; font-weight: 700; color: #343a40; margin-bottom: 0.4rem; line-height: 1.4; transition: color 0.2s ease;
}
.blog-page-wrapper .news-item:hover .news-title { color: #e8590c; }
.blog-page-wrapper .news-date { font-size: 0.8rem; color: #868e96; display: block; font-weight: 500; }
.blog-page-wrapper .news-date i { color: #fcc419; margin-right: 4px; }
/* =========================================
    CTA STRIP BEFORE FOOTER
    ========================================= */
.nowclasses-wrapper .cta-strip { 
    background: url('../images/cta-bg.webp') no-repeat center top;
    background-size: cover; padding: 45px 0; overflow: hidden; 
}
/* =========================================
    FOOTER SECTION
    ========================================= */
.nowclasses-wrapper .site-footer { padding: 70px 0 0; border-top: 1px solid rgba(0,0,0,0.06); background: #0f172a; overflow: hidden; }
.nowclasses-wrapper .footer-logo { font-family: 'SUSE', sans-serif; font-size: 1.7rem; font-weight: 600; color: #2D2D2D; transition: transform 0.3s ease; display: inline-block; }
.nowclasses-wrapper .footer-logo:hover { transform: scale(1.05); }
.nowclasses-wrapper .footer-logo-img { height: 48px; width: auto; object-fit: contain; background: transparent; }
.nowclasses-wrapper .footer-about-text { font-size: 1.05rem; line-height: 1.75; max-width: 380px; margin: 20px 0 26px; font-weight: 400; color: #fff; }
.nowclasses-wrapper .footer-social { display: flex; gap: 14px; }
.nowclasses-wrapper .footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 20%); display: flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; transition: all 0.3s ease; }
.nowclasses-wrapper .footer-social a:hover { background: linear-gradient(135deg, #003B5C 0%, #0095D9 100%); border-color: transparent; color: #fff; transform: translateY(-4px) rotate(8deg); box-shadow: 0 6px 15px rgba(0, 149, 217, 0.3); }
.nowclasses-wrapper .footer-heading { font-weight: 700; font-size: 1.4rem; margin-bottom: 28px; color: #fff; }
.nowclasses-wrapper .footer-links { list-style: none; padding: 0; margin: 0; }
.nowclasses-wrapper .footer-links li { margin-bottom: 18px; }
.nowclasses-wrapper .footer-links a { text-decoration: none; font-size: 1.05rem; transition: all 0.3s ease; display: inline-block;  color: #ffffff; font-weight: 400;}
.nowclasses-wrapper .footer-links a:hover { color: #0095D9; transform: translateX(5px); }
.nowclasses-wrapper .footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; font-size: 1.02rem; line-height: 1.5; max-width: 320px; transition: transform 0.3s ease; font-weight: 400; color: #fff;}
.nowclasses-wrapper .footer-contact-item:hover { transform: translateX(5px); }
.nowclasses-wrapper .footer-contact-item i { color: #0095D9; font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
.nowclasses-wrapper .footer-contact-item a { text-decoration: none; transition: color 0.3s ease; color: #ffffff; }
.nowclasses-wrapper .footer-contact-item a:hover { color: #0095D9; }
.nowclasses-wrapper .footer-bottom { border-top: 1px solid rgb(255 255 255 / 12%); margin-top: 55px; padding: 24px 0; text-align: center; font-size: 0.95rem; color: #fff; }
@media (max-width: 991px) {
    .nowclasses-wrapper .site-footer { padding-top: 50px; text-align: left; }
    .nowclasses-wrapper .footer-about-text { margin-left: auto; margin-right: auto; }
    .nowclasses-wrapper .footer-social, .nowclasses-wrapper .footer-contact-item { justify-content: left; text-align: left; }
}
@media (max-width: 767px) {
    .nowclasses-wrapper .site-footer { padding-top: 30px; }
    .nowclasses-wrapper .footer-bottom { margin-top: 30px; padding: 15px 0; }
}