/* Main stylesheet - Global styles and typography resets */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--line-height-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-smooth);
    overflow-x: hidden;
    width: 100%;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    line-height: var(--line-height-heading);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--text-h1);
    font-weight: 800;
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

h4 {
    font-size: var(--text-h4);
}

h5 {
    font-size: var(--text-h5);
    font-weight: 600;
}

h6 {
    font-size: var(--text-h6);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Paragraphs and Text Elements */
p {
    font-size: var(--text-body);
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

small {
    font-size: var(--text-small);
    color: var(--text-muted);
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--accent-color);
}

/* Gradient text utility for premium look */
.gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Responsive utilities */
@media (max-width: 768px) {
    p {
        margin-bottom: 1.25rem;
    }
    
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0.85rem;
    }
}

/* ==========================================
   HEADER & NAVIGATION SYSTEM
   ========================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 4px 15px -8px rgba(15, 23, 42, 0.04);
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    padding: 1.5rem 0;
}

/* Sticky Scrolled State with Glassmorphism */
.site-header.scrolled {
    padding: 0.75rem 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(226, 232, 240, 1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.logo-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.03);
}

/* Desktop Navigation */
.desktop-nav {
    display: block;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    opacity: 0.85;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-gradient);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover, .nav-link.active {
    opacity: 1;
    color: var(--brand-blue);
}

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

.chevron-icon {
    transition: transform 0.3s ease;
}

.nav-item:hover .chevron-icon {
    transform: rotate(180deg);
}

/* ==========================================
   MEGA MENU DESIGN
   ========================================== */

.has-megamenu {
    /* Keep position static to allow full-width megamenu relative to container */
    position: static;
}

.megamenu-wrapper {
    position: absolute;
    top: 100%; /* Exactly flush with the bottom border of the header */
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: calc(100% - 3rem);
    max-width: 1400px; /* Centers and aligns perfectly to the main container */
    background: var(--bg-primary);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.1);
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    z-index: 999;
}

/* Safety mouse bridge */
.megamenu-wrapper::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.has-megamenu:hover .megamenu-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.megamenu-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 2.5rem;
}

.megamenu-grid-col {
    display: flex;
    flex-direction: column;
}

.megamenu-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.megamenu-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.megamenu-item-link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.megamenu-item-link:hover {
    background-color: var(--bg-secondary);
    transform: translateX(5px);
}

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.icon-box.dev { background-color: rgba(0, 91, 234, 0.08); }
.icon-box.design { background-color: rgba(0, 198, 251, 0.08); }
.icon-box.mkt { background-color: rgba(16, 185, 129, 0.08); }

.item-text {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.item-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Mega Menu Promo Panel */
.megamenu-promo {
    background: var(--brand-gradient);
    border-radius: var(--border-radius-sm);
    padding: 2rem;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.megamenu-promo::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.promo-badge {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.megamenu-promo h3 {
    color: var(--text-light);
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.megamenu-promo p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.promo-btn {
    align-self: flex-start;
    background: var(--bg-primary);
    color: var(--brand-blue);
    padding: 0.6rem 1.25rem;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.promo-btn:hover {
    background: var(--text-light);
    color: var(--brand-blue);
    transform: translateY(-2px);
}

/* ==========================================
   HEADER ACTION BUTTONS (Smooth Position Swap)
   ========================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.enroll-btn-group {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 44px;
    width: 172px; /* 118px (pill width) + 44px (circle width) + 10px (gap) */
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
}

.btn-text-pill {
    position: absolute;
    left: 0;
    width: 118px;
    height: 44px;
    background: var(--brand-gradient);
    background-size: 200% auto;
    background-position: left center;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.5s ease;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0, 91, 234, 0.15);
}

.btn-circle-arrow {
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-gradient);
    background-size: 200% auto;
    background-position: right center;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.5s ease;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 198, 251, 0.15);
}

/* Smooth Side-Swapping Hover Interaction */
.enroll-btn-group:hover .btn-text-pill {
    transform: translateX(54px); /* Moves pill to the right side of circle */
    background-position: right center;
    color: #ffffff !important;
}

.enroll-btn-group:hover .btn-circle-arrow {
    transform: translateX(-128px); /* Moves circle to the left side of pill without rotation */
    background-position: left center;
    color: #ffffff !important;
}

/* Ensure white text color is preserved on resting buttons */
.btn-text-pill, .btn-circle-arrow {
    color: #ffffff !important;
}

/* Mobile Toggle Hamburger button */
.mobile-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Sits below offcanvas backdrop */
    padding: 0;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: var(--transition-smooth);
}

/* ==========================================
   OFFCANVAS DRAWER SYSTEM
   ========================================== */

/* Backdrop overlay overlaying the screen */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1004;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s;
}

.offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Sliding Drawer Panel */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -360px; /* Hidden offscreen on the right */
    width: 320px;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 1005;
    transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.08);
}

.mobile-drawer.show {
    right: 0; /* Slides in to screen viewport */
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.mobile-close-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition-smooth);
}

.mobile-close-btn:hover {
    background-color: var(--bg-secondary);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fill all vertical drawer space to push footer to the bottom */
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-link {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Mobile Dropdown Accordion */
.mobile-nav-item-dropdown {
    display: flex;
    flex-direction: column;
}

.mobile-dropdown-trigger {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    background: none;
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
    width: 100%;
}

.mobile-dropdown-menu {
    list-style: none;
    padding-left: 1rem;
    margin-top: 0.75rem;
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 2px solid var(--border-color);
}

.mobile-dropdown-menu.show {
    display: flex;
}

.mobile-dropdown-menu strong {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
}

.mobile-dropdown-menu a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.mobile-dropdown-trigger .chevron-icon.rotate {
    transform: rotate(180deg);
}
.mobile-drawer-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.mobile-enroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 48px;
    background: var(--brand-gradient);
    color: var(--bg-primary);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 91, 234, 0.15);
    transition: var(--transition-smooth);
}

.mobile-enroll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 91, 234, 0.25);
}

/* Media Queries */
@media (max-width: 900px) {
    .site-header {
        padding: 1rem 0;
    }
    
    .desktop-nav {
        display: none;
    }

    .header-actions .enroll-btn-group {
        display: none; /* Hide from the mobile header */
    }
    
    .mobile-toggle-btn {
        display: flex;
    }
}

/* ==========================================
   HERO SECTION & ROTATING CARDS SYSTEM
   ========================================== */

.hero-section {
    position: relative;
    padding-top: calc(5.5rem + 80px); /* 80px sticky header height + 5.5rem even content padding */
    padding-bottom: 5.5rem; /* Perfect matching 5.5rem bottom padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
    /* Premium light tech grid background combined with brand color glow blobs */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 198, 251, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(0, 91, 234, 0.05) 0%, transparent 45%),
        linear-gradient(rgba(241, 245, 249, 0.65) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241, 245, 249, 0.65) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
}

.hero-header {
    max-width: 1200px; /* Widened further for grand spacious presentation */
    text-align: center;
    padding: 0 1.5rem;
    margin-bottom: 2.5rem;
    z-index: 10;
}

.hero-badge {
    background-color: rgba(0, 198, 251, 0.08);
    color: var(--brand-blue);
    padding: 0.4rem 1.15rem;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-block;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(0, 198, 251, 0.12);
}

.hero-title {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.hero-desc {
    font-size: var(--text-body);
    color: var(--text-secondary);
    max-width: 880px; /* Widened proportionally */
    margin: 0 auto;
    line-height: 1.6;
}

/* Fanned 3D Orbiting Cards Carousel (3 Cards Visible) */
.carousel-wheel-container {
    position: relative;
    width: 100%;
    height: 630px; /* Expanded height to completely prevent hover clipping at the top */
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Carousel Dots Indicator - Hidden on desktop by default */
.carousel-dots-container {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    z-index: 15;
    position: relative;
    width: 100%;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 91, 234, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-dot:hover {
    background-color: rgba(0, 198, 251, 0.6);
}

.carousel-dot.active {
    width: 24px; /* Pill shaped active dot indicator */
    border-radius: 4px;
    background: var(--brand-gradient);
    box-shadow: 0 0 10px rgba(0, 198, 251, 0.35);
}

.carousel-wheel-track {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* Course Card Wrapper: Wider and taller proper card size (Centered exactly) */
.course-card-wrapper {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 320px; /* Card width */
    height: 440px; /* Card height restored and optimized (original 420px + 20px) */
    transform-origin: center center;
    /* Smooth 0.9s cubic-bezier transition for stepped motion */
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease, z-index 0.9s ease;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

/* Card Positional Classes - flat elliptical arc showing 3 cards (left, center, right) */
.course-card-wrapper.pos-hidden-left {
    transform: translate(calc(-50% - 700px), 120px) rotate(-30deg) scale(0.8);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.course-card-wrapper.pos-1 {
    transform: translate(calc(-50% - 370px), 10px) rotate(-15deg) scale(0.92); /* Spaced out (50px gap) */
    opacity: 0.85;
    z-index: 5;
}

.course-card-wrapper.pos-2 {
    transform: translate(-50%, -90px) rotate(0deg) scale(1.05); /* Center active card centered exactly */
    opacity: 1;
    z-index: 10;
}

.course-card-wrapper.pos-3 {
    transform: translate(calc(-50% + 370px), 10px) rotate(15deg) scale(0.92); /* Spaced out (50px gap) */
    opacity: 0.85;
    z-index: 5;
}

.course-card-wrapper.pos-hidden-right {
    transform: translate(calc(-50% + 700px), 120px) rotate(30deg) scale(0.8);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* Hover style specifically targeted at center active card */
.course-card-wrapper.pos-2:hover {
    transform: translate(-50%, -98px) rotate(0deg) scale(1.08);
    box-shadow: 0 30px 60px -15px rgba(0, 91, 234, 0.22), 0 0 40px rgba(0, 198, 251, 0.15);
    z-index: 12;
}

/* Course Card Proper Structured Layout */
.course-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Creative top brand gradient indicator line on hover */
.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.course-card:hover::before {
    opacity: 1;
}

.card-image-box {
    position: relative;
    width: 100%;
    height: 180px; /* Image takes the top portion of the larger card */
    min-height: 180px; /* Fixed min-height to prevent vertical compression */
    overflow: hidden;
    background: #000;
}

.card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-card:hover .card-bg-img {
    transform: scale(1.06);
    opacity: 1;
}

.card-category-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    color: var(--text-light);
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.tag-dev { background: linear-gradient(135deg, #005bea 0%, #00a3f5 100%); }
.tag-design { background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%); }
.tag-mkt { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.card-details {
    padding: 1.5rem 1.35rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--bg-primary);
}

.card-course-title {
    font-family: var(--font-heading);
    font-size: 1.22rem; /* Title font size for larger cards */
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card:hover .card-course-title {
    color: var(--brand-blue);
}

.card-course-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.65rem; /* Margined bottom for separation gap */
    padding-left: 0.75rem;
    /* Creative left highlighted quote/description bar */
    border-left: 3px solid var(--brand-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-course-excerpt {
    font-size: 0.75rem; /* Very small text size */
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 0.25rem;
    margin-bottom: auto; /* Pushes card footer to the bottom of the card */
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.card-duration {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.card-duration::before {
    content: '⏱';
    font-size: 0.85rem;
    color: var(--brand-blue);
}

/* Swapping Mini CTA Button Group (Cohesive with Header CTA) */
.card-cta-group {
    position: relative;
    width: 135px; /* Increased width to create a clean gap */
    height: 36px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.card-btn-text {
    position: absolute;
    left: 0;
    top: 0;
    width: 92px; /* Text pill width */
    height: 36px;
    border-radius: 20px;
    background: var(--brand-gradient);
    background-size: 200% auto;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.5s ease;
    z-index: 2;
}

.card-btn-circle {
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-gradient);
    background-size: 200% auto;
    background-position: right center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.5s ease;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 91, 234, 0.1);
}

.card-arrow-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.5s ease;
}

/* Hover Swap Animation triggered by hovering the course card wrapper */
.course-card:hover .card-btn-text {
    transform: translateX(43px); /* Slides flush to the right */
    background-position: right center;
}

.course-card:hover .card-btn-circle {
    transform: translateX(-99px) rotate(-45deg); /* Slides flush to left and rotates -45deg to point arrow up-right */
    background-position: left center;
    box-shadow: 0 4px 12px rgba(0, 91, 234, 0.18);
}

.course-card-wrapper.pos-2:hover {
    transform: translate(-50%, -98px) rotate(0deg) scale(1.08); /* Adjusted translate to align with -90px center base */
    box-shadow: 0 30px 60px -15px rgba(0, 91, 234, 0.22), 0 0 40px rgba(0, 198, 251, 0.15);
    z-index: 12;
}

/* ==========================================
   PARTNER LOGO TICKER SECTION (DARK BACKGROUND)
   ========================================== */
.partner-section {
    background-color: #0b0f19; /* Deep dark slate background */
    /* Premium dark tech grid background combined with subtle theme radial overlay */
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 198, 251, 0.07) 0%, transparent 65%),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 30px 30px, 30px 30px;
    padding: 5.5rem 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 10;
}

.partner-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content */
}

.partner-title {
    text-align: center; /* Centered text */
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45); /* Soft light gray text */
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.partner-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--brand-gradient);
    border-radius: 2px;
}

.partner-ticker-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 1.25rem 0; /* Vertical padding to prevent hover translation clipping */
}

/* Fade out covers matching dark background exactly */
.partner-fade-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 15%;
    background: linear-gradient(to right, #0b0f19 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.partner-fade-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 15%;
    background: linear-gradient(to left, #0b0f19 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.partner-ticker-track {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    width: max-content;
    animation: scroll-partners 25s linear infinite;
    z-index: 2;
}

@keyframes scroll-partners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Wide horizontal box for horizontal logos */
.partner-logo-box {
    width: 140px; /* Wider rectangular container for wordmarks */
    height: 52px; /* Perfect horizontal height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    padding: 0 10px;
}

.partner-svg {
    width: 100%;
    height: 100%;
    max-width: 115px; /* Extended to match horizontal text wordmarks */
    max-height: 26px; /* Bound height to maintain proportion */
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.4s ease;
}

.partner-logo-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-cyan);
    box-shadow: 0 0 20px rgba(0, 198, 251, 0.15);
    transform: translateY(-3px);
}

.partner-logo-box:hover .partner-svg {
    color: #ffffff;
    transform: scale(1.08);
}

/* Pause ticker on hover */
.partner-ticker-wrapper:hover .partner-ticker-track {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-section {
        padding-top: calc(4.5rem + 80px); /* Clear header + even top padding */
        padding-bottom: 4.5rem; /* Even bottom padding */
    }

    .partner-section {
        padding: 4.5rem 0; /* Even bottom padding matching hero content spacing */
    }

    .carousel-wheel-container {
        height: 480px; /* Safe height for full size 420px tall cards */
    }

    .carousel-dots-container {
        display: flex !important; /* Visible on tablet screens */
    }
    
    .course-card-wrapper {
        width: 44%; /* Percentage width so cards scale dynamically to fill tablet screen width */
        max-width: 420px; /* Safe upper bound to maintain premium card geometry */
        height: auto !important; /* Make height dynamic/fluid, wrapping content organically */
        bottom: 20px;
        transform-origin: center center;
    }

    .course-card {
        height: auto !important; /* Allow internal card body to size dynamically */
    }
    
    /* Flat 2-item slider layout in percentages: pos-1 (left active) and pos-2 (right active) visible side-by-side */
    .course-card-wrapper.pos-hidden-left {
        transform: translate(-230%, -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .course-card-wrapper.pos-1 {
        transform: translate(-105%, -20px) rotate(0deg) scale(0.98);
        opacity: 1;
        z-index: 10;
        pointer-events: auto;
    }
    
    .course-card-wrapper.pos-2 {
        transform: translate(5%, -20px) rotate(0deg) scale(0.98);
        opacity: 1;
        z-index: 10;
        pointer-events: auto;
    }
    
    .course-card-wrapper.pos-3 {
        transform: translate(120%, -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .course-card-wrapper.pos-hidden-right {
        transform: translate(230%, -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }

    /* Elevate either visible card on hover using percentage offsets */
    .course-card-wrapper.pos-1:hover {
        transform: translate(-105%, -28px) rotate(0deg) scale(1.01);
        box-shadow: 0 20px 45px -10px rgba(0, 91, 234, 0.18), 0 0 25px rgba(0, 198, 251, 0.1);
        z-index: 12;
    }

    .course-card-wrapper.pos-2:hover {
        transform: translate(5%, -28px) rotate(0deg) scale(1.01);
        box-shadow: 0 20px 45px -10px rgba(0, 91, 234, 0.18), 0 0 25px rgba(0, 198, 251, 0.1);
        z-index: 12;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: calc(3.5rem + 80px); /* Clear header + even top padding */
        padding-bottom: 3.5rem; /* Even bottom padding */
    }

    .partner-section {
        padding: 3.5rem 0; /* Even bottom padding matching hero mobile spacing */
    }

    .partner-title {
        font-size: 0.72rem;
        margin-bottom: 1.5rem;
    }

    .partner-ticker-track {
        gap: 2rem; /* Reduced gap on mobile */
    }

    .partner-logo-box {
        width: 110px; /* Scaled down horizontally for mobile */
        height: 44px; /* Scaled down vertically for mobile */
        border-radius: 9px;
        padding: 0 6px;
    }

    .partner-svg {
        max-width: 90px;
        max-height: 22px;
    }

    .hero-title {
        font-size: 2.25rem;
    }
    
    .carousel-wheel-container {
        height: 480px; /* Safe height for full size mobile cards */
    }
    
    /* Mobile Cards: Full-width orientation expanding to viewport width */
    .course-card-wrapper {
        width: calc(100% - 2rem); /* Dynamic full-width with elegant 16px side margins */
        max-width: 480px; /* Expands to fill modern large phone screen sizes fully */
        /* height inherits auto !important dynamically to prevent content cutting */
        bottom: 20px;
        transform-origin: center center;
    }
    
    /* Horizontal Slider coordinates: only active card visible, left/right slide off-screen */
    .course-card-wrapper.pos-hidden-left {
        transform: translate(calc(-50% - 250%), -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .course-card-wrapper.pos-1 {
        transform: translate(calc(-50% - 150%), -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .course-card-wrapper.pos-2 {
        transform: translate(-50%, -20px) rotate(0deg) scale(1);
        opacity: 1;
        z-index: 10;
        pointer-events: auto;
    }
    
    .course-card-wrapper.pos-3 {
        transform: translate(calc(-50% + 150%), -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }
    
    .course-card-wrapper.pos-hidden-right {
        transform: translate(calc(-50% + 250%), -20px) rotate(0deg) scale(0.9);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
    }

    .course-card-wrapper.pos-2:hover {
        transform: translate(-50%, -24px) rotate(0deg) scale(1.03);
    }
    
    /* Lock exact height to prevent responsive fluid distortion on mobile */
    .card-image-box {
        height: 180px !important;
    }
    
    .card-details {
        padding: 1.25rem 1.15rem;
    }
    
    .card-course-title {
        font-size: 1.15rem;
    }
    
    .card-course-desc {
        display: block; /* Visible on mobile */
        font-size: 0.82rem;
    }

    .card-course-excerpt {
        display: block; /* Visible on mobile */
        font-size: 0.72rem;
        margin-top: 0.5rem;
    }
}

/* Premium Floating Theme Background Bubbles (Moving in all directions) */
.hero-bg-bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1; /* Above base lines, behind content */
    opacity: 0.65;
}

.bubble-1 {
    top: 10%;
    left: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.18) 0%, transparent 75%);
    filter: blur(60px);
    animation: float-bubble-clockwise 25s ease-in-out infinite;
}

.bubble-2 {
    bottom: 15%;
    right: 5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.15) 0%, transparent 75%);
    filter: blur(85px);
    animation: float-bubble-counter 30s ease-in-out infinite;
}

.bubble-3 {
    top: 45%;
    left: 8%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.14) 0%, transparent 80%);
    filter: blur(50px);
    animation: float-bubble-diagonal 22s ease-in-out infinite;
}

.bubble-4 {
    top: 18%;
    right: 12%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.12) 0%, transparent 80%);
    filter: blur(55px);
    animation: float-bubble-bounce 26s ease-in-out infinite;
}

/* GPU-accelerated multi-point floating paths for active continuous movement */
@keyframes float-bubble-clockwise {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, -60px) scale(1.06); }
    50% { transform: translate(120px, 20px) scale(0.94); }
    75% { transform: translate(40px, 80px) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes float-bubble-counter {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-90px, 70px) scale(0.93); }
    50% { transform: translate(-40px, -80px) scale(1.08); }
    75% { transform: translate(60px, -30px) scale(0.96); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes float-bubble-diagonal {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(90px, 90px) scale(1.05); }
    66% { transform: translate(-60px, -50px) scale(0.92); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes float-bubble-bounce {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-70px, 40px) scale(1.04); }
    50% { transform: translate(60px, -70px) scale(0.95); }
    75% { transform: translate(100px, 50px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ==========================================
   ABOUT US SECTION & DYNAMIC USPs SYSTEM
   ========================================== */
.about-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Consistent symmetric vertical padding */
    background: #f8fafc; /* Alternating clean light slate background */
    overflow: hidden;
}

/* Subtle tech grid mesh background pattern */
.about-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(0, 91, 234, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 1;
}

/* Accent background cyan radial blur */
.about-bg-glow {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.06) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.about-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 5rem;
    align-items: stretch; /* Stretch columns to have exactly equal height on desktop */
    min-height: 580px; /* Force minimum height on desktop to enable vertical centering of content next to a tall image */
    z-index: 2;
}

/* Left Column: Glowing interactive graphic frame stretched to full column height */
.about-image-column {
    flex: 1.1;
    display: flex;
    position: relative;
}

.about-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* Fill column height dynamically matching content */
    border-radius: 24px;
    overflow: visible; /* Allow floating badges to extend bounds */
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-primary);
}

.about-main-img {
    width: 100%;
    height: 100%; /* Fill wrapper height dynamically */
    object-fit: cover; /* Crop and fill boundaries cleanly, matching column height perfectly */
    border-radius: 24px;
    display: block;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.6s ease;
}

/* Subtle cyan/blue hover glow overlay */
.about-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    background: radial-gradient(circle at 30% 20%, rgba(0, 198, 251, 0.08) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.about-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 91, 234, 0.12), 0 0 30px rgba(0, 198, 251, 0.08);
}

/* Floating Glassmorphic Badges */
.floating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    padding: 0.8rem 1.2rem;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    z-index: 10;
}

.floating-badge:hover {
    transform: scale(1.06) !important;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 15px 35px rgba(0, 91, 234, 0.15), 0 0 20px rgba(0, 198, 251, 0.1);
}

.badge-1 {
    top: 12%;
    left: -50px;
    animation: float-about-badge-1 6s ease-in-out infinite;
}

.badge-2 {
    right: -50px;
    top: 45%;
    animation: float-about-badge-2 8s ease-in-out infinite;
}

.badge-3 {
    bottom: 12%;
    left: -35px;
    animation: float-about-badge-3 7s ease-in-out infinite;
}

/* Floating keyframes for micro movement */
@keyframes float-about-badge-1 {
    0%, 100% { transform: translateY(0px) rotate(0.5deg); }
    50% { transform: translateY(-8px) rotate(-0.5deg); }
}

@keyframes float-about-badge-2 {
    0%, 100% { transform: translateY(0px) rotate(-0.5deg); }
    50% { transform: translateY(10px) rotate(0.5deg); }
}

@keyframes float-about-badge-3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px) translateX(4px); }
}

.badge-icon {
    font-size: 1.35rem;
}

.badge-text {
    display: flex;
    flex-direction: column;
}

.badge-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.badge-desc {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Right Column Content styling */
.about-content-column {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* Vertically center the content inner wrapper within the stretched column height */
}

.about-content-inner {
    width: 100%;
    display: block;
}

.about-subtitle-badge {
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 198, 251, 0.08);
    border: 1px solid rgba(0, 198, 251, 0.15);
    margin-bottom: 1.25rem;
}

.about-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.2vw, 3.25rem); /* Substantially increased heading size, fully responsive */
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.about-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* USPs Value Cards Grid */
.usps-grid {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
    margin-bottom: 2.5rem;
}

.usp-card {
    display: flex;
    gap: 1.15rem;
    align-items: center; /* Center-aligned vertically to look sleek and slender */
    padding: 0.85rem; /* Equal and compact padding on all 4 sides */
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: var(--bg-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.usp-card:hover {
    border-color: rgba(0, 198, 251, 0.4);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
    transform: translateX(6px);
}

.usp-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* Compact icon container width */
    height: 38px; /* Compact icon container height */
    border-radius: 10px; /* Aligned rounded corners */
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.usp-card:hover .usp-icon-wrapper {
    transform: scale(1.08);
}

.usp-icon-wrapper.dev {
    background: rgba(0, 91, 234, 0.08);
    color: var(--brand-blue);
}

.usp-icon-wrapper.design {
    background: rgba(0, 198, 251, 0.08);
    color: var(--brand-cyan);
}

.usp-icon-wrapper.mkt {
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
}

.usp-info {
    display: flex;
    flex-direction: column;
}

.usp-title {
    font-family: var(--font-heading);
    font-size: 0.95rem; /* Slightly reduced font size for cleaner typography */
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 2px 0; /* Reset margins and add a tiny bottom spacing */
    line-height: 1.2;
}

.usp-desc {
    font-size: 0.82rem; /* Reduced size for a sleeker horizontal card body */
    line-height: 1.4; /* Compact line-height */
    color: var(--text-muted);
    margin: 0; /* Reset browser default paragraph margins entirely */
}

/* About Us CTA Button wrapper (matching header CTA group dimensions) */
.about-cta-wrapper {
    margin-top: 0.25rem;
    margin-bottom: 0; /* Removed bottom margin as the CTA is the last element in the centered content wrapper */
    width: 100%;
}

/* Stats counter strip styling */
.about-stats-banner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    padding-top: 2rem;
}

.stat-item {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(226, 232, 240, 0.6);
}

.stat-item:last-child {
    border-right: none;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--brand-blue);
    line-height: 1;
    margin-bottom: 0.35rem;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.stat-number span {
    color: var(--brand-cyan);
}

.stat-item:hover .stat-number {
    transform: translateY(-3px) scale(1.05);
    color: var(--brand-cyan);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* About Us Section Media Queries */
@media (max-width: 1024px) {
    .about-section {
        padding: 4.5rem 0;
    }
    
    .about-container {
        flex-direction: column;
        gap: 3.5rem;
    }
    
    .about-image-column, 
    .about-content-column {
        width: 100%;
        flex: none;
    }
    
    .about-image-wrapper {
        margin: 0 auto;
        height: 350px !important; /* Set proper banner height for stacked tablet column layout */
    }
    
    /* Reposition badges for tablet */
    .floating-badge {
        transform: scale(0.9);
    }
    
    .badge-1 { left: -30px; }
    .badge-2 { right: -30px; }
    .badge-3 { left: -20px; }
}

@media (max-width: 768px) {
    .about-section {
        padding: 3.5rem 0;
    }
    
    .about-heading {
        font-size: 1.85rem;
    }
    
    .about-desc {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    
    .usps-grid {
        gap: 1rem;
    }
    
    .usp-card {
        padding: 0.95rem;
    }

    .about-image-wrapper {
        height: 280px !important; /* Tighter banner height on mobile viewports */
    }
    
    /* Downscale badges to fit small phone screens */
    .floating-badge {
        transform: scale(0.8);
    }
    
    .badge-1 { left: -15px; top: 6%; }
    .badge-2 { right: -15px; top: 43%; }
    .badge-3 { left: -10px; bottom: 6%; }
    
    .about-stats-banner {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
        padding-top: 1.5rem;
    }
    
    .stat-item {
        flex: unset;
        width: 45%;
        border-right: none;
    }
}

@media (max-width: 480px) {
    /* Hide floating badges on tight viewports to avoid overlapping content */
    .floating-badge {
        display: none !important;
    }
    
    .stat-item {
        width: 100%;
    }
}

/* ==========================================
   DYNAMIC DARK STATS COUNTER SECTION
   ========================================== */
.stats-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Symmetric Vertical Spacing */
    background: #080c14; /* Slightly darker than Partner showcase for beautiful depth */
    overflow: hidden;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Floating Subtle Background Particles */
.stats-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: screen;
    animation: float-stats-particle 18s ease-in-out infinite alternate;
}

.particle-1 {
    top: 15%;
    left: 10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--brand-blue) 0%, transparent 70%);
    animation-duration: 20s;
}

.particle-2 {
    bottom: -10%;
    left: 45%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%);
    animation-duration: 24s;
    animation-delay: -4s;
}

.particle-3 {
    top: 25%;
    right: 8%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    animation-duration: 16s;
    animation-delay: -2s;
}

@keyframes float-stats-particle {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.03; }
    50% { transform: translate(30px, -30px) scale(1.1) rotate(180deg); opacity: 0.05; }
    100% { transform: translate(-20px, 15px) scale(0.9) rotate(360deg); opacity: 0.03; }
}

/* Glowing Background Radial Tech Blurs */
.stats-bg-glow-1 {
    position: absolute;
    top: -20%;
    left: 10%;
    width: 45%;
    height: 70%;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.06) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

.stats-bg-glow-2 {
    position: absolute;
    bottom: -20%;
    right: 10%;
    width: 45%;
    height: 70%;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.05) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 1;
}

/* Fine dark mesh grid pattern */
.stats-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 2;
}

.stats-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 3;
}

/* Stats Section Header */
.stats-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem auto; /* Symmetric spacing to separate header from grid */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 198, 251, 0.08);
    border: 1px solid rgba(0, 198, 251, 0.15);
    margin-bottom: 1.25rem;
}

.stats-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.stats-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Premium Dark Glassmorphic Card Box */
.stat-card {
    position: relative;
    background: rgba(13, 20, 35, 0.65); /* Rich solid base for clean box visibility */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Default distinct colored card borders and soft ambient glows */
.stat-card.card-blue {
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(59, 130, 246, 0.02);
}

.stat-card.card-cyan {
    border: 1px solid rgba(0, 198, 251, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 198, 251, 0.02);
}

.stat-card.card-green {
    border: 1px solid rgba(16, 185, 129, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(16, 185, 129, 0.02);
}

.stat-card.card-purple {
    border: 1px solid rgba(139, 92, 246, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(139, 92, 246, 0.02);
}

/* Clean lifting hover animation */
.stat-card:hover {
    transform: translateY(-8px);
    background: rgba(18, 27, 47, 0.85); /* Slightly brighten box on hover */
}

/* Specific custom glow borders, shadows, and text glowing for each color card on hover */
.stat-card.card-blue:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(59, 130, 246, 0.08);
}
.stat-card.card-blue:hover .stat-number {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.stat-card.card-cyan:hover {
    border-color: rgba(0, 198, 251, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 198, 251, 0.08);
}
.stat-card.card-cyan:hover .stat-number {
    text-shadow: 0 0 20px rgba(0, 198, 251, 0.4);
}

.stat-card.card-green:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(16, 185, 129, 0.08);
}
.stat-card.card-green:hover .stat-number {
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.stat-card.card-purple:hover {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(139, 92, 246, 0.08);
}
.stat-card.card-purple:hover .stat-number {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Accent top hover gradient strip */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover::after {
    opacity: 1;
}

/* Stat Icon Wrapper styles */
.stat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.stat-card:hover .stat-icon-wrapper {
    transform: scale(1.1) rotate(2deg);
}

.stat-icon-wrapper.blue {
    background: rgba(0, 91, 234, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(0, 91, 234, 0.1);
}

.stat-card:hover .stat-icon-wrapper.blue {
    box-shadow: 0 0 20px rgba(0, 91, 234, 0.25);
}

.stat-icon-wrapper.cyan {
    background: rgba(0, 198, 251, 0.12);
    color: #00c6fb;
    border: 1px solid rgba(0, 198, 251, 0.1);
}

.stat-card:hover .stat-icon-wrapper.cyan {
    box-shadow: 0 0 20px rgba(0, 198, 251, 0.25);
}

.stat-icon-wrapper.green {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.stat-card:hover .stat-icon-wrapper.green {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.stat-icon-wrapper.purple {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.stat-card:hover .stat-icon-wrapper.purple {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.25);
}

/* Stat numbers and suffixes */
.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: text-shadow 0.4s ease; /* Support smooth glowing animation on hover */
}

.stat-suffix {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

/* Animated Progress Bars inside Cards */
.stat-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center; /* Center-align the progress fill */
}

.stat-progress-fill {
    height: 100%;
    width: 0%; /* Dynamic fill via IntersectionObserver JS */
    border-radius: 10px;
    margin: 0 auto; /* Ensure symmetric horizontal alignment */
    transition: width 1.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 10px currentColor;
}

.stat-progress-fill.blue-fill {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    color: rgba(59, 130, 246, 0.5);
}

.stat-progress-fill.cyan-fill {
    background: linear-gradient(90deg, #00c6fb, #005bea);
    color: rgba(0, 198, 251, 0.5);
}

.stat-progress-fill.green-fill {
    background: linear-gradient(90deg, #059669, #10b981);
    color: rgba(16, 185, 129, 0.5);
}

.stat-progress-fill.purple-fill {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
    color: rgba(139, 92, 246, 0.5);
}

/* Text Label */
.stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    transition: color 0.4s ease;
}

.stat-card:hover .stat-label {
    color: #ffffff;
}

/* Stats Section Responsive Styles */
@media (max-width: 1024px) {
    .stats-section {
        padding: 4.5rem 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .stats-section {
        padding: 3.5rem 0;
    }
    
    .stats-container {
        padding: 0 1.25rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 460px; /* Keep boxes compact and centered on mobile viewports */
        margin: 0 auto;
    }
    
    .stat-card {
        padding: 2.25rem 1.5rem;
    }
}

/* ==========================================
   INTERACTIVE COURSES SECTION (LIGHT SLATE)
   ========================================== */
.courses-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Symmetric Spacing */
    background-color: #f8fafc; /* Alternating Light Slate background */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}

.courses-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header row containing Badge and Title above controls */
.courses-section-header {
    margin-bottom: 2rem;
    width: 100%;
}

.courses-section-header .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.12);
    margin-bottom: 0.75rem;
}

.courses-section-header .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-heading-left {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

/* Controls row (Left: category filters / dropdown, Right: carousel prev/next buttons) */
.courses-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.25rem;
    width: 100%;
}

.courses-controls-row .controls-left {
    display: flex;
    align-items: center;
}

.courses-controls-row .controls-right {
    display: flex;
    gap: 0.75rem;
}

/* Premium Round Navigation Button Arrows */
.carousel-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-nav-btn:hover {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 91, 234, 0.2);
}

.carousel-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* Category Filter Pills (Desktop layout) */
.courses-filter-categories {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Responsive Dropdown Filter Wrapper */
.courses-filter-dropdown-wrapper {
    position: relative;
    display: none; /* Hidden on desktop by default */
}

.filter-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.35rem;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 170px;
}

.filter-dropdown-btn:hover {
    border-color: var(--brand-blue);
}

.filter-dropdown-btn .dropdown-chevron {
    transition: transform 0.3s ease;
    color: var(--text-secondary);
}

.filter-dropdown-btn.active .dropdown-chevron {
    transform: rotate(180deg);
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding: 0.5rem;
    min-width: 200px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown-item {
    width: 100%;
    text-align: left;
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
}

.filter-dropdown-item:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.filter-dropdown-item.active {
    background: rgba(0, 91, 234, 0.05);
    color: var(--brand-blue);
}

.filter-pill {
    padding: 0.6rem 1.35rem;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-pill:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.filter-pill.active {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 91, 234, 0.15);
}

/* Carousel Track & Viewport */
.courses-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 25px 0; /* Padding for card hover offset dropshadows */
}

.courses-carousel-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

/* Course Card Item */
.course-slide-card {
    flex: 0 0 calc(33.333% - 1.33rem); /* 3 cards visible on desktop */
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.course-slide-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 198, 251, 0.25);
    box-shadow: 0 20px 45px rgba(0, 91, 234, 0.08);
}

/* Image/Graphic block with accent glows */
.course-slide-img-box {
    position: relative;
    width: 100%;
    height: 260px; /* Increased to 260px for a highly prominent and clear image banner presentation */
    overflow: hidden;
}

/* Image tag styling for course card banners */
.course-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-slide-card:hover .course-slide-img {
    transform: scale(1.08); /* Zoom in on card hover for dynamic high-end feel */
}

/* Slide Badge overlay */
.course-slide-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.8rem;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.course-slide-badge.dev { background-color: #3b82f6; }
.course-slide-badge.design { background-color: #d946ef; }
.course-slide-badge.marketing { background-color: #10b981; }

/* Slide Content */
.course-slide-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-slide-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}

.course-slide-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

/* Card Meta info */
.course-slide-meta {
    display: flex;
    gap: 1.25rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    margin-bottom: 1.25rem;
}

.meta-item {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Slide Footer & Price */
.course-slide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-slide-price {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-blue);
    letter-spacing: -0.01em;
}

.course-slide-link {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.3s ease;
}

.course-slide-link:hover {
    color: var(--brand-blue);
}

.course-slide-link svg {
    transition: transform 0.3s ease;
}

.course-slide-link:hover svg {
    transform: translateX(3px);
}

/* Dots slide indicators */
.courses-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem; /* Reduced gap from 3.5rem to 1.5rem */
}

.courses-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.courses-dot.active {
    width: 28px;
    border-radius: 30px;
    background: var(--brand-gradient);
    box-shadow: 0 3px 8px rgba(0, 91, 234, 0.2);
}

/* Courses Carousel Responsiveness */
@media (max-width: 1024px) {
    .courses-section {
        padding: 4.5rem 0;
    }
    
    .course-slide-card {
        flex: 0 0 calc(50% - 1rem); /* 2 cards visible on tablet viewports */
    }
    
    .courses-filter-categories {
        display: none !important; /* Hide pills on tablet and mobile */
    }
    
    .courses-filter-dropdown-wrapper {
        display: inline-block !important; /* Show dropdown button on tablet and mobile */
    }
    
    .courses-controls-row {
        margin-bottom: 1.75rem; /* Tighter gap */
    }
}

@media (max-width: 768px) {
    .courses-section {
        padding: 3.5rem 0;
    }
    
    .courses-container {
        padding: 0 1.25rem;
    }
    
    .course-slide-card {
        flex: 0 0 100%; /* 1 card visible on mobile viewports */
    }
    
    .courses-carousel-dots {
        margin-top: 1rem; /* Reduced gap on mobile */
    }
    
    .courses-controls-row {
        margin-bottom: 1.5rem; /* Tighter gap on mobile */
    }
}

/* ==========================================
   WHY CHOOSE US SECTION (LIGHT THEME - 3-COLUMNS GRID)
   ========================================== */
.why-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Symmetric Spacing */
    background-color: #ffffff; /* Alternating pure white background */
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}

.why-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Two-column section header */
.why-section-header {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; /* Asymmetric grid, left is slightly wider for title */
    gap: 4rem;
    align-items: flex-end; /* Align elements to the bottom of the row */
    margin-bottom: 3.5rem;
    text-align: left;
}

.why-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.why-header-left .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.12);
    margin-bottom: 0.75rem;
}

.why-header-left .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.why-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0; /* Clear margin bottom since layout is side-by-side */
}

.why-header-right {
    display: flex;
    align-items: flex-end;
}

.why-desc-main {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 100%;
}

/* 3 Column Grid for 6 Cards */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.pillar-card {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem; /* Tightened padding to reduce vertical space */
    border-radius: 16px; /* Sleeker, less rounded border radius */
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%); /* Logo Brand gradient */
    background-size: 200% 200%;
    background-position: left top;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
    height: 100%; /* Restore equal heights across the row */
    box-shadow: 0 10px 30px rgba(0, 91, 234, 0.1);
}

/* Skewed Glossy Glare Sweep Sweep effect on Hover */
.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 1;
}

.pillar-card:hover::before {
    left: 150%;
}

/* Card hover lift up and smooth gradient shift */
.pillar-card:hover {
    transform: translateY(-10px);
    background-position: right bottom; /* Flows gradient colors smoothly */
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 22px 50px rgba(0, 91, 234, 0.22);
}

/* Unique color parameters on hover mapping */
.pillar-card.card-blue-glow { --theme-color: #005bea; }
.pillar-card.card-cyan-glow { --theme-color: #00b4d8; }
.pillar-card.card-green-glow { --theme-color: #10b981; }
.pillar-card.card-purple-glow { --theme-color: #8b5cf6; }
.pillar-card.card-orange-glow { --theme-color: #f97316; }
.pillar-card.card-teal-glow { --theme-color: #14b8a6; }

/* Premium Swapping Icon Box on hover with 360-degree rotation */
.pillar-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 10px; /* Synced smaller border radius proportionally */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.pillar-card:hover .pillar-icon-box {
    transform: scale(1.15) rotate(360deg); /* Full 360 spin + scale */
    background: #ffffff;
    color: var(--theme-color); /* Theme color inside icon */
    box-shadow: 0 5px 15px rgba(0, 91, 234, 0.15);
}

.pillar-info {
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.pillar-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff; /* White title on gradient bg */
    margin-bottom: 0.45rem;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.pillar-text {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88); /* Bright semi-transparent description text */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    margin: 0; /* Override global paragraph margins */
}

/* Float content slightly up on hover */
.pillar-card:hover .pillar-title,
.pillar-card:hover .pillar-text {
    transform: translateY(-3px);
}

/* Why Choose Us Responsiveness */
@media (max-width: 1024px) {
    .why-section {
        padding: 4.5rem 0;
    }
    
    .why-section-header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 3rem;
    }
    
    .why-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .why-section {
        padding: 3.5rem 0;
    }
    
    .why-container {
        padding: 0 1.25rem;
    }
    
    .why-section-header {
        margin-bottom: 2.25rem;
    }
    
    .why-grid {
        grid-template-columns: 1fr; /* 1 column on mobiles */
        gap: 1.25rem;
    }
    
    .pillar-card {
        padding: 1.25rem;
    }
    
    .pillar-card:hover {
        transform: translateY(-4px);
    }
}

/* ==========================================
   FULL-WIDTH PROMOTIONAL BANNER SLIDER
   ========================================== */
.promo-slider-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #0f172a; /* Tech dark backdrop */
    border-bottom: 1px solid var(--border-color);
}

.promo-slider-container {
    position: relative;
    width: 100%;
    height: 600px; /* Exact requested desktop height */
    overflow: hidden;
}

.promo-slider-track {
    display: flex;
    width: 300%; /* 3 slides = 300% */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.promo-slide-link {
    display: block;
    width: 33.333333%;
    height: 100%;
    text-decoration: none;
    outline: none;
}

.promo-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.promo-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover guarantees filling the banner area beautifully */
    object-position: center;
    display: block;
    transition: transform 0.8s ease;
}

/* Subtle image scale zoom effect on hover for a high-end feel */
.promo-slide-link:hover .promo-slide-img {
    transform: scale(1.03);
}

/* Arrow Navigation Buttons Overlay */
.promo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.35); /* Glass navy */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.promo-arrow:hover {
    background: #ffffff;
    color: var(--brand-blue);
    border-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 91, 234, 0.25);
}

.promo-arrow.prev-arrow {
    left: 3rem;
}

.promo-arrow.next-arrow {
    right: 3rem;
}

/* Dots Navigation Indicator Overlay */
.promo-dots-container {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.65rem;
    z-index: 10;
    background: rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 0.85rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.promo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.promo-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.promo-dot.active {
    background: #ffffff;
    width: 20px;
    border-radius: 30px;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .promo-slider-container {
        height: 480px; /* Scaled down height on tablet landscape */
    }
    
    .promo-arrow.prev-arrow { left: 2rem; }
    .promo-arrow.next-arrow { right: 2rem; }
}

@media (max-width: 900px) {
    .promo-slider-container {
        height: 380px; /* Scaled down height on tablet portrait */
    }
}

@media (max-width: 768px) {
    .promo-slider-container {
        height: 280px; /* Scaled down height on mobile landscape */
    }
    
    .promo-arrow {
        width: 40px;
        height: 40px;
    }
    
    .promo-arrow.prev-arrow { left: 1rem; }
    .promo-arrow.next-arrow { right: 1rem; }
    .promo-arrow svg { width: 18px; height: 18px; }
    .promo-dots-container { bottom: 1.25rem; }
}

@media (max-width: 480px) {
    .promo-slider-container {
        height: 190px; /* Scaled down height on mobile portrait */
    }
    
    .promo-arrow {
        display: none; /* Hide navigation arrows on small mobile to avoid layout overlap */
    }
    
    .promo-dots-container {
        padding: 0.35rem 0.65rem;
        bottom: 0.85rem;
    }
}

/* ==========================================
   EVERYTHING YOU NEED TO GET HIRED (CAREER SUITE)
   ========================================== */
.hired-suite-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Symmetric Spacing */
    background-color: #f8fafc; /* Alternating light tech background */
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    overflow: hidden;
}

/* Background mesh glow effects */
.hired-suite-section::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(120px);
    background: radial-gradient(circle, rgba(0, 198, 251, 0.12) 0%, rgba(0, 91, 234, 0.05) 100%);
    top: -10%;
    left: -10%;
    pointer-events: none;
    z-index: 1;
}

.hired-suite-section::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(120px);
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(0, 198, 251, 0.03) 100%);
    bottom: -10%;
    right: -10%;
    pointer-events: none;
    z-index: 1;
}

.hired-suite-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 2;
}

/* Two-column responsive section header */
.hired-section-header {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: flex-end;
    margin-bottom: 3.5rem;
    text-align: left;
}

.hired-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hired-header-left .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.12);
    margin-bottom: 0.75rem;
}

.hired-header-left .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hired-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.hired-header-right {
    display: flex;
    align-items: flex-end;
}

.hired-desc-main {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 100%;
}

/* 3-Column Interactive Card Grid */
.hired-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
}

.hired-card {
    position: relative;
    padding: 2.25rem 1.75rem;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.01);
}

/* Hover lift and box shadow outlines */
.hired-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 91, 234, 0.18);
    box-shadow: 0 20px 40px rgba(0, 91, 234, 0.05);
}

.hired-card.card-blue-glow:hover { border-color: rgba(0, 91, 234, 0.25); box-shadow: 0 20px 40px rgba(0, 91, 234, 0.06); }
.hired-card.card-cyan-glow:hover { border-color: rgba(0, 198, 251, 0.3); box-shadow: 0 20px 40px rgba(0, 198, 251, 0.06); }
.hired-card.card-green-glow:hover { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.06); }
.hired-card.card-purple-glow:hover { border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.06); }
.hired-card.card-orange-glow:hover { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 20px 40px rgba(249, 115, 22, 0.06); }
.hired-card.card-teal-glow:hover { border-color: rgba(20, 184, 166, 0.3); box-shadow: 0 20px 40px rgba(20, 184, 166, 0.06); }

/* Step Count Numbers glowing on hover */
.card-step-num {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.04;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
    pointer-events: none;
}

.hired-card:hover .card-step-num {
    opacity: 0.28;
    transform: scale(1.15) translateY(-2px);
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3D Flip Icon Wrapper */
.hired-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    perspective: 1000px;
    flex-shrink: 0;
}

/* Y-Axis flip rotation on card hover */
.hired-card:hover .hired-icon-wrapper {
    transform: rotateY(180deg);
}

.hired-icon-wrapper.blue-theme { background: rgba(0, 91, 234, 0.06); color: var(--brand-blue); }
.hired-icon-wrapper.cyan-theme { background: rgba(0, 198, 251, 0.08); color: #00b4d8; }
.hired-icon-wrapper.green-theme { background: rgba(16, 185, 129, 0.08); color: #10b981; }
.hired-icon-wrapper.purple-theme { background: rgba(139, 92, 246, 0.08); color: #8b5cf6; }
.hired-icon-wrapper.orange-theme { background: rgba(249, 115, 22, 0.08); color: #f97316; }
.hired-icon-wrapper.teal-theme { background: rgba(20, 184, 166, 0.08); color: #14b8a6; }

.hired-info-wrapper {
    display: flex;
    flex-direction: column;
}

.hired-card-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
    display: inline-block;
}

.hired-card-tag.text-blue { color: var(--brand-blue); }
.hired-card-tag.text-cyan { color: #00b4d8; }
.hired-card-tag.text-green { color: #10b981; }
.hired-card-tag.text-purple { color: #8b5cf6; }
.hired-card-tag.text-orange { color: #f97316; }
.hired-card-tag.text-teal { color: #14b8a6; }

.hired-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.hired-card-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsiveness Media Queries */
@media (max-width: 1024px) {
    .hired-suite-section {
        padding: 4.5rem 0;
    }
    
    .hired-section-header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 3rem;
    }
    
    .hired-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hired-suite-section {
        padding: 3.5rem 0;
    }
    
    .hired-suite-container {
        padding: 0 1.25rem;
    }
    
    .hired-section-header {
        margin-bottom: 2.25rem;
    }
    
    .hired-grid {
        grid-template-columns: 1fr; /* 1 column on mobiles */
        gap: 1.25rem;
    }
    
    .hired-card {
        padding: 1.75rem 1.5rem;
    }
}

/* ==========================================
   GRADUATION CERTIFICATE AUTHORITY SECTION
   ========================================== */
.cert-authority-section {
    position: relative;
    width: 100%;
    padding: 5.5rem 0; /* Symmetric Spacing */
    background-color: #ffffff; /* White background to contrast Career Support */
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    overflow: hidden;
}

.cert-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cert-row {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5.5rem;
    align-items: center;
}

.cert-content-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cert-content-column .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 198, 251, 0.05);
    border: 1px solid rgba(0, 198, 251, 0.12);
    margin-bottom: 0.75rem;
}

.cert-content-column .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cert-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.8vw, 2.85rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.cert-desc-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.cert-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
    margin: 2.25rem 0;
    width: 100%;
}

.cert-highlight-item {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.cert-check-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 198, 251, 0.06);
    color: var(--brand-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    transition: all 0.3s ease;
}

.cert-highlight-item:hover .cert-check-icon {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.2);
}

.cert-highlight-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.cert-highlight-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}

.cert-cta-wrapper {
    margin-top: 1rem;
}

/* Right side Image Column */
.cert-image-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.cert-mockup-wrapper {
    position: relative;
    width: 100%;
    max-width: 540px;
}

/* 3D Angled Frame Presentation */
.cert-mockup-frame {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(0, 91, 234, 0.1);
    box-shadow: 0 25px 60px rgba(0, 91, 234, 0.08), 0 5px 15px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    background: #ffffff;
    padding: 0.75rem;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform: perspective(1200px) rotateY(-10deg) rotateX(5deg) rotateZ(1deg);
    z-index: 2;
}

.cert-mockup-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.cert-mockup-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 3;
}

/* 3D Hover realignment */
.cert-mockup-wrapper:hover .cert-mockup-frame {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.03);
    box-shadow: 0 35px 80px rgba(0, 91, 234, 0.16);
    border-color: rgba(0, 91, 234, 0.25);
}

/* Floating ISO Badge Overlay Base */
.cert-floating-badge {
    position: absolute;
    padding: 0.65rem 1.15rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 91, 234, 0.12);
    box-shadow: 0 15px 35px rgba(0, 91, 234, 0.08);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    z-index: 5;
    transition: all 0.4s ease;
}

.cert-floating-badge span {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 750;
    color: var(--text-primary);
}

.badge-icon-shield {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icon-shield.secure-blue { background: rgba(0, 91, 234, 0.06); color: var(--brand-blue); }
.badge-icon-shield.verify-green { background: rgba(16, 185, 129, 0.06); color: #10b981; }

/* Twin Badges Placement */
.cert-floating-badge.blockchain-badge {
    top: -1.75rem;
    left: -1.75rem;
}

.cert-floating-badge.quality-badge {
    bottom: -1.75rem;
    right: -1.75rem;
}

.cert-mockup-wrapper:hover .cert-floating-badge {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 20px 45px rgba(0, 91, 234, 0.12);
    border-color: rgba(0, 91, 234, 0.2);
}

/* Custom Dedicated Certificate Verification CTA Button Group */
.cert-btn-group {
    width: 214px !important; /* 160px (pill) + 44px (circle) + 10px (gap) */
    display: inline-flex;
    position: relative;
    height: 44px;
}

.cert-btn-group .btn-text-pill {
    width: 160px !important;
}

.cert-btn-group:hover .btn-text-pill {
    transform: translateX(54px) !important;
}

.cert-btn-group:hover .btn-circle-arrow {
    transform: translateX(-170px) !important;
}

/* Redesigned Card-Style Highlights */
.cert-highlight-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.cert-highlight-item:hover {
    background: #ffffff;
    border-color: rgba(0, 198, 251, 0.25);
    box-shadow: 0 10px 30px rgba(0, 198, 251, 0.05);
    transform: translateY(-2px);
}

/* Secure Verification Trust Panel */
.cert-trust-panel {
    width: 100%;
    max-width: 540px;
    margin-top: 2rem;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01);
    transition: all 0.4s ease;
}

.cert-trust-panel:hover {
    border-color: rgba(0, 91, 234, 0.18);
    box-shadow: 0 15px 35px rgba(0, 91, 234, 0.04);
}

.trust-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.trust-shield-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 91, 234, 0.06);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trust-panel-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.trust-panel-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.mock-lookup-form {
    width: 100%;
    margin-bottom: 0.75rem;
}

.mock-lookup-group {
    display: flex;
    width: 100%;
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    overflow: hidden;
    height: 48px;
    transition: all 0.3s ease;
}

.mock-lookup-group:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 91, 234, 0.1);
}

.mock-lookup-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0 1rem;
    font-family: monospace;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: transparent;
}

.mock-lookup-btn {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--brand-gradient);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.mock-lookup-btn:hover {
    opacity: 0.9;
}

.trust-panel-footer {
    display: flex;
    align-items: center;
}

.secure-ssl-status {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 750;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hide {
    display: none !important;
}

/* Pulse radar ring on checks hover */
.cert-highlight-item:hover .cert-check-icon {
    animation: pulseRadar 1s infinite;
}

@keyframes pulseRadar {
    0% { box-shadow: 0 0 0 0 rgba(0, 198, 251, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 198, 251, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 198, 251, 0); }
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .cert-authority-section {
        padding: 4.5rem 0;
    }
    
    .cert-row {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    
    .cert-content-column {
        align-items: flex-start;
        text-align: left;
    }
    
    .cert-highlights-grid {
        max-width: 100%;
        margin: 2rem 0;
    }
    
    .cert-highlight-item {
        text-align: left;
    }
    
    .cert-mockup-frame {
        transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
    }
    
    .cert-trust-panel {
        margin: 2rem auto 0 auto;
        max-width: 100%;
    }
    
    .cert-mockup-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .cert-authority-section {
        padding: 3.5rem 0;
    }
    
    .cert-container {
        padding: 0 1.25rem;
    }
    
    .cert-highlights-grid {
        grid-template-columns: 1fr; /* Stacks to 1 column on mobile */
        gap: 1.25rem;
    }
    
    .cert-floating-badge.blockchain-badge {
        left: 0;
        top: -1.25rem;
    }
    
    .cert-floating-badge.quality-badge {
        right: 0;
        bottom: -1.25rem;
    }
    
    .cert-trust-panel {
        width: 100%;
        max-width: 100%;
        margin-top: 1.5rem;
    }
}

/* ==========================================
   CERTIFICATE VERIFICATION MODAL POPUP
   ========================================== */
.cert-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45); /* Glass dark overlay */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1.5rem;
}

.cert-modal-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(0, 91, 234, 0.12);
    width: 100%;
    max-width: 580px;
    padding: 2.5rem 2rem;
    box-shadow: 0 35px 80px rgba(15, 23, 42, 0.18);
    animation: certModalScaleUp 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes certModalScaleUp {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cert-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

.cert-modal-close:hover {
    background: #ffffff;
    color: var(--brand-blue);
    border-color: rgba(0, 91, 234, 0.2);
    transform: rotate(90deg);
}

/* Modal Loading Radar State */
.cert-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0;
}

.spinner-radar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 91, 234, 0.04);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.radar-ping {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--brand-blue);
    animation: radarPulse 1.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes radarPulse {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.loading-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.loading-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 320px;
    margin: 0 auto;
}

/* Modal Success Verification Details */
.cert-modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: slideDownFade 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.success-seal-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.08);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    animation: successBadgePulse 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes successBadgePulse {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.success-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.success-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 440px;
    margin: 0;
}

/* Param Table details styling */
.success-params-table {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
    margin: 1.75rem 0;
}

.param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
    text-align: left;
}

.param-row:last-child {
    border-bottom: none;
}

.param-label {
    color: var(--text-secondary);
}

.param-value {
    font-weight: 700;
    color: var(--text-primary);
}

.param-value.text-highlight {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.param-value.text-green {
    color: #10b981;
}

.param-value.hash-code {
    font-family: monospace;
    color: var(--brand-blue);
    background: rgba(0, 91, 234, 0.04);
    padding: 0 0.35rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.modal-btn-group {
    display: flex;
    justify-content: center;
    margin: 0.5rem auto 0 auto;
    width: 204px !important;
    position: relative;
    height: 44px;
}

.modal-btn-group .btn-text-pill,
.modal-btn-group .btn-circle-arrow {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0;
    color: #ffffff;
}

.modal-btn-group .btn-text-pill {
    width: 150px !important;
}

.modal-btn-group:hover .btn-text-pill {
    transform: translateX(54px) !important;
}

.modal-btn-group:hover .btn-circle-arrow {
    transform: translateX(-160px) !important;
}

@media (max-width: 480px) {
    .cert-modal-card {
        padding: 2rem 1.25rem;
    }
    
    .param-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ==========================================
   PLACEMENT PORTAL / LAUNCHPAD SECTION
   ========================================== */
.placement-assistance-section {
    position: relative;
    padding: 5.5rem 0;
    background-color: #f8fafc;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.placement-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

.placement-bg-glow {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.placement-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 2;
}

.placement-header-row {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 3.5rem auto;
}

.placement-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1rem auto 1.25rem auto;
}

.placement-desc-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* 3-Column Interactive Grid */
.placement-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.placement-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3rem 2rem 2.5rem 2rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    overflow: hidden;
}

/* Card Badge (Step Counter) */
.placement-card-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: #f1f5f9;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.placement-card:hover .placement-card-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.placement-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.placement-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.placement-card-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    transition: color 0.3s ease;
}

/* Color-Coded Themes */
/* Cyan Card */
.placement-card.card-cyan .placement-icon-box {
    background: rgba(0, 198, 251, 0.06);
    color: var(--brand-cyan);
}
.placement-card.card-cyan:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 198, 251, 0.22);
}

/* Blue Card */
.placement-card.card-blue .placement-icon-box {
    background: rgba(0, 91, 234, 0.06);
    color: var(--brand-blue);
}
.placement-card.card-blue:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 91, 234, 0.22);
}

/* Purple Card */
.placement-card.card-purple .placement-icon-box {
    background: rgba(124, 58, 237, 0.06);
    color: #7c3aed;
}
.placement-card.card-purple:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    border-color: transparent;
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.22);
}

/* Global hover text colors logic for gradient cards */
.placement-card:hover {
    color: #ffffff;
}

.placement-card:hover .placement-icon-box {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.placement-card:hover .placement-card-title,
.placement-card:hover .placement-card-desc {
    color: #ffffff !important;
}

/* Custom CTA Button alignment */
.placement-cta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.placement-btn-group {
    width: 254px !important; /* 200px (pill) + 44px (circle) + 10px (gap) */
    display: inline-flex;
    position: relative;
    height: 44px;
}

.placement-btn-group .btn-text-pill {
    width: 200px !important;
}

.placement-btn-group:hover .btn-text-pill {
    transform: translateX(54px) !important;
}

.placement-btn-group:hover .btn-circle-arrow {
    transform: translateX(-210px) !important;
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .placement-assistance-section {
        padding: 4.5rem 0;
    }
    
    .placement-container {
        padding: 0 1.5rem;
    }
    
    .placement-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .placement-assistance-section {
        padding: 3.5rem 0;
    }
    
    .placement-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .placement-card {
        padding: 2.5rem 1.5rem 2rem 1.5rem;
    }
}

/* ==========================================
   TESTIMONIALS CAROUSEL SLIDER (DARK MODE)
   ========================================== */
.testimonials-section {
    position: relative;
    padding: 5.5rem 0;
    background-color: #060913;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonials-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

.testimonials-bg-glow-1 {
    position: absolute;
    top: -10%;
    left: 10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.testimonials-bg-glow-2 {
    position: absolute;
    bottom: -15%;
    right: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.testimonials-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 2;
}

.testimonials-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.5rem;
    gap: 2rem;
}

.testimonials-header-left {
    max-width: 780px;
    text-align: left;
}

.testimonials-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1rem 0;
    color: #ffffff !important;
}

.testimonials-desc-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0;
}

/* Custom badge override for dark background */
.testimonials-header-left .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 198, 251, 0.08);
    border: 1px solid rgba(0, 198, 251, 0.15);
    margin-bottom: 0.75rem;
}

.testimonials-header-left .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #00c6fb !important;
}

/* Navigation Buttons on the Right Side of Header */
.testimonials-carousel-btns {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.testimonials-carousel-btns .carousel-nav-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.testimonials-carousel-btns .carousel-nav-btn:hover {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 198, 251, 0.25) !important;
}

.testimonials-carousel-btns .carousel-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Testimonials Carousel Container */
.testimonials-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
}

.testimonials-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Slide Cards Styling */
.testimonial-slide-card {
    position: relative;
    flex: 0 0 calc((100% - 4rem) / 3); /* exactly 3 columns with 2rem gap */
    width: calc((100% - 4rem) / 3);
    min-height: 290px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.65) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
    overflow: hidden;
}

.testimonial-slide-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 198, 251, 0.3);
    background: linear-gradient(135deg, rgba(0, 198, 251, 0.08) 0%, rgba(0, 91, 234, 0.12) 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 198, 251, 0.06);
}

.testimonial-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(0, 198, 251, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.card-top-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    z-index: 3;
}

.alumni-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alumni-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0, 198, 251, 0.2);
    transition: border-color 0.3s ease;
}

.testimonial-slide-card:hover .alumni-avatar {
    border-color: #00c6fb;
}

.alumni-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumni-meta {
    display: flex;
    flex-direction: column;
}

.alumni-name {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 0.15rem 0;
}

.alumni-role {
    font-size: 0.82rem;
    color: #00c6fb !important;
    font-weight: 600;
}

.alumni-company {
    font-size: 0.78rem;
    color: #94a3b8 !important;
    margin-top: 0.1rem;
}

/* Play Button at Top Right */
.btn-play-topright {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-gradient);
    background-size: 200% auto;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 198, 251, 0.35);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 5;
}

.btn-play-topright svg {
    margin-left: 2px; /* visual triangle center correction */
    transition: transform 0.3s ease;
}

.btn-play-topright:hover {
    background-position: right center;
    transform: scale(1.18);
    box-shadow: 0 0 25px rgba(0, 198, 251, 0.7);
}

.btn-play-topright:hover svg {
    transform: scale(1.2);
}

/* Pulsing outline around play button */
.play-pulse-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(0, 198, 251, 0.4);
    pointer-events: none;
    z-index: -1;
    animation: topPlayPulse 2.5s infinite;
}

@keyframes topPlayPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Alumni Text Badge for Non-Video Cards */
.company-badge-topright {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.testimonial-slide-card:hover .company-badge-topright {
    color: #ffffff;
    background: rgba(0, 198, 251, 0.12);
    border-color: rgba(0, 198, 251, 0.25);
}

/* Testimonial Quote details */
.testimonial-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.testimonial-quote {
    font-size: 0.96rem;
    line-height: 1.6;
    color: #e2e8f0 !important;
    margin: 0;
    font-style: italic;
}

.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.quote-watermark {
    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    margin-bottom: -1.25rem;
    user-select: none;
    transition: color 0.3s ease;
}

.testimonial-slide-card:hover .quote-watermark {
    color: rgba(0, 198, 251, 0.12);
}

.rating-stars-row {
    display: flex;
    gap: 0.25rem;
}

.star-filled {
    color: #f59e0b; /* Gold star color */
    font-size: 1.15rem;
}

/* Dots and Slider Indicators */
.testimonials-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonials-dot.active {
    background: #00c6fb;
    transform: scale(1.2);
    width: 20px;
    border-radius: 4px;
}

/* ==========================================
   VIDEO MODAL POPUP WINDOW
   ========================================== */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(9, 13, 22, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal-overlay.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.video-modal-card {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 1.5rem;
    background: #0d121f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.video-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.video-modal-close:hover {
    background: #ef4444; /* red background on hover */
    color: #ffffff;
}

.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Styles for Testimonials */
@media (max-width: 1024px) {
    .testimonials-section {
        padding: 4.5rem 0;
    }
    
    .testimonials-container {
        padding: 0 1.5rem;
    }
    
    .testimonials-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    
    .testimonials-carousel-btns {
        align-self: flex-start;
    }
    
    .testimonial-slide-card {
        flex: 0 0 calc((100% - 2rem) / 2); /* exactly 2 columns with 2rem gap */
        width: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 3.5rem 0;
    }
    
    .testimonials-header-wrapper {
        gap: 1rem;
    }
    
    .testimonial-slide-card {
        flex: 0 0 100%; /* exactly 1 column */
        width: 100%;
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .testimonial-slide-card {
        padding: 1.5rem 1.25rem;
    }
    
    .alumni-avatar {
        width: 48px;
        height: 48px;
    }
    
    .alumni-name {
        font-size: 0.98rem;
    }
    
    .alumni-role {
        font-size: 0.78rem;
    }
    
    .alumni-company {
        font-size: 0.74rem;
    }
    
    .btn-play-topright {
        width: 36px;
        height: 36px;
    }
    
    .company-badge-topright {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
        height: 22px;
    }
}

/* ==========================================
   BLOGS & INSIGHTS SECTION (LIGHT THEME)
   ========================================== */
.blogs-section {
    position: relative;
    padding: 5.5rem 0;
    background-color: #ffffff; /* pure crisp white for light mode */
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.blogs-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.blogs-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3rem;
    gap: 2rem;
}

.blogs-header-left {
    max-width: 780px;
    text-align: left;
}

.blogs-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1rem 0;
    color: var(--text-primary);
}

.blogs-desc-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Subtitle badge in light theme blogs section */
.blogs-header-left .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.12);
    margin-bottom: 0.75rem;
}

.blogs-header-left .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Carousel Buttons Row */
.blogs-carousel-btns {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Blogs Slider Container & Track */
.blogs-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0 25px 0; /* padding for hover lift dropshadows */
}

.blogs-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* Blog Card Item */
.blog-slide-card {
    position: relative;
    flex: 0 0 calc((100% - 4rem) / 3); /* 3 cards visible on desktop */
    width: calc((100% - 4rem) / 3);
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.blog-slide-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 198, 251, 0.25);
    box-shadow: 0 20px 45px rgba(0, 91, 234, 0.08);
}

/* Glowing bottom line indicator on hover */
.blog-slide-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--brand-gradient);
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

.blog-slide-card:hover::after {
    width: 100%;
}

/* Image Container */
.blog-img-box {
    position: relative;
    width: 100%;
    height: 280px; /* Increased image box height for a grand presentation */
    overflow: hidden;
    background: #f1f5f9;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-slide-card:hover .blog-card-img {
    transform: scale(1.08);
}

/* Floating overlay tags on image */
.blog-category-tag {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 198, 251, 0.15);
    color: var(--brand-blue);
    padding: 0.4rem 1rem;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 5;
}

.blog-slide-card:hover .blog-category-tag {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 91, 234, 0.2);
}

.blog-readtime-tag {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.4rem 0.85rem;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 5;
}

.blog-slide-card:hover .blog-readtime-tag {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(0, 198, 251, 0.3);
    transform: translateY(2px);
}

/* Blog Content Body */
.blog-content-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.blog-meta-dot {
    color: rgba(0, 0, 0, 0.15);
}

.blog-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
    transition: color 0.3s ease;
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-slide-card:hover .blog-card-title {
    color: var(--brand-blue);
}

.blog-excerpt {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    /* Limit to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card footer row with Read link */
.blog-footer-row {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.blog-read-link {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s ease;
}

.blog-read-link svg {
    transition: transform 0.3s ease;
}

.blog-slide-card:hover .blog-read-link {
    color: var(--brand-blue);
}

.blog-slide-card:hover .blog-read-link svg {
    transform: translateX(4px);
}

/* Blog Dots Carousel indicators */
.blogs-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.blogs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cbd5e1;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blogs-dot.active {
    width: 24px;
    border-radius: 10px;
    background: var(--brand-gradient);
    box-shadow: 0 2px 8px rgba(0, 91, 234, 0.2);
}

/* Responsiveness overrides for Blogs section */
@media (max-width: 1024px) {
    .blogs-section {
        padding: 4.5rem 0;
    }
    
    .blogs-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    
    .blogs-carousel-btns {
        align-self: flex-start;
    }
    
    .blog-slide-card {
        flex: 0 0 calc((100% - 2rem) / 2); /* exactly 2 columns with 2rem gap */
        width: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 768px) {
    .blogs-section {
        padding: 3.5rem 0;
    }
    
    .blog-slide-card {
        flex: 0 0 100%; /* exactly 1 column */
        width: 100%;
        padding: 0;
    }
    
    .blog-img-box {
        height: 220px;
    }
    
    .blog-content-body {
        padding: 1.5rem;
    }
}

/* ==========================================
   ENQUIRY / CONTACT SECTION (LIGHT TECH THEME)
   ========================================== */
.contact-section {
    position: relative;
    padding: 5.5rem 0;
    background-color: #f8fafc; /* premium off-white background */
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.contact-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

.contact-bg-glow-1 {
    position: absolute;
    top: -10%;
    right: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.contact-bg-glow-2 {
    position: absolute;
    bottom: -15%;
    left: 10%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.contact-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 2;
}

.contact-section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.contact-section-header .section-subtitle-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 30px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.12);
    margin-bottom: 0.75rem;
}

.contact-section-header .section-subtitle-badge .subtitle-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-heading {
    font-family: var(--font-heading);
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1rem 0;
    color: var(--text-primary) !important;
}

.contact-desc-text {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 4rem;
    align-items: start;
}

/* Left Column: Contact info cards */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.contact-info-card {
    position: relative;
    padding: 2rem 1.75rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.contact-info-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 198, 251, 0.3);
    box-shadow: 0 15px 35px rgba(0, 91, 234, 0.06);
}

/* Card absolute glowing aura */
.contact-info-card .card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 198, 251, 0.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.contact-info-card:hover .card-glow {
    opacity: 1;
}

/* Icon box */
.info-icon-box {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(0, 91, 234, 0.04);
    border: 1px solid rgba(0, 91, 234, 0.1);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.contact-info-card:hover .info-icon-box {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: rotateY(180deg);
    box-shadow: 0 5px 15px rgba(0, 198, 251, 0.3);
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 2;
}

.info-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-blue);
}

.info-value {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-primary);
    margin: 0;
}

.info-value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-value a:hover {
    color: var(--brand-blue);
}

/* Social Media Connections Block */
.contact-social-block {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.social-title-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.contact-social-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-social-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    text-decoration: none;
}

.contact-social-btn:hover {
    background: var(--brand-gradient);
    color: #ffffff !important;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 91, 234, 0.2);
}

/* Right Column: Glassmorphic Form Card */
.glass-form-card {
    position: relative;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.glass-form-card .form-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.form-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 2rem 0;
    z-index: 2;
    position: relative;
}

.enquiry-form {
    position: relative;
    z-index: 2;
}

.form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Input Fields Styling */
.input-group-wrapper {
    position: relative;
    width: 100%;
}

.input-group-wrapper.full-width {
    grid-column: span 2;
    margin-bottom: 1.5rem;
}

.input-group-wrapper input,
.input-group-wrapper textarea,
.input-group-wrapper select {
    width: 100%;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-body);
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.input-group-wrapper input::placeholder,
.input-group-wrapper textarea::placeholder {
    color: var(--text-muted);
}

.input-group-wrapper input:focus,
.input-group-wrapper textarea:focus,
.input-group-wrapper select:focus {
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 15px rgba(0, 91, 234, 0.1);
}

/* Custom Select Dropdown Chevron arrow style */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '▼';
    font-size: 0.65rem;
    color: var(--text-muted);
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.input-group-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
}

.input-group-wrapper select option {
    background: #ffffff;
    color: var(--text-primary);
}

.input-group-wrapper textarea {
    resize: none;
}

/* Checkbox Style */
.form-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.form-checkbox-wrapper input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.form-checkbox-wrapper input[type="checkbox"]:checked {
    background: var(--brand-gradient);
    border-color: transparent;
}

.form-checkbox-wrapper input[type="checkbox"]:checked::after {
    content: '✓';
    font-size: 0.75rem;
    color: #ffffff;
    font-weight: bold;
}

.form-checkbox-wrapper label {
    font-size: 0.88rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.form-checkbox-wrapper label a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.form-checkbox-wrapper label a:hover {
    color: var(--text-primary);
}

/* Validation Helper Classes */
.validation-message {
    max-height: 0;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ef4444; /* bright red */
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
    transform: translateY(-4px);
    margin-top: 0;
}

.validation-message.show {
    max-height: 40px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0.35rem;
}

.input-group-wrapper input.invalid-input,
.input-group-wrapper textarea.invalid-input,
.input-group-wrapper select.invalid-input,
.phone-input-wrapper.invalid-input,
.custom-select-wrapper.invalid-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.15) !important;
}

.input-group-wrapper input.valid-input,
.input-group-wrapper textarea.valid-input,
.input-group-wrapper select.valid-input,
.phone-input-wrapper.valid-input,
.custom-select-wrapper.valid-input {
    border-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.1) !important;
}

.form-checkbox-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.form-checkbox-group-wrapper .validation-message {
    margin-top: 0;
}

/* Phone Input Wrapper & Country Selector */
.phone-input-group {
    position: relative;
}

.phone-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: visible; /* to allow dropdown overflow */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.phone-input-wrapper:focus-within {
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 15px rgba(0, 91, 234, 0.1);
}

.phone-input-wrapper input[type="tel"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 12px 12px 0 !important;
    padding-left: 0.75rem !important;
    flex-grow: 1;
}

.country-code-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    height: 100%;
    cursor: pointer;
    border-right: 1px solid var(--border-color);
    user-select: none;
    min-height: 52px;
    transition: background 0.3s ease;
}

.country-code-selector:hover {
    background: rgba(0, 91, 234, 0.03);
}

.selected-flag {
    font-size: 1.15rem;
    line-height: 1;
}

.selected-code {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chevron-icon {
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.country-code-selector.active .chevron-icon,
.custom-select-trigger.active .chevron-icon {
    transform: rotate(180deg);
}

/* Searchable Dropdown Menu */
.country-dropdown-menu {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
    z-index: 999;
    overflow: hidden;
    transform-origin: top;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.country-dropdown-menu.hide {
    display: none;
}

.country-search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: #f8fafc;
}

.country-search-box .search-icon {
    color: var(--text-muted);
}

.country-search-box input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0.88rem !important;
    height: auto !important;
    color: var(--text-primary) !important;
}

.country-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* custom scrollbar for options list */
.country-options-list::-webkit-scrollbar,
.custom-select-options::-webkit-scrollbar {
    width: 6px;
}
.country-options-list::-webkit-scrollbar-track,
.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.country-options-list::-webkit-scrollbar-thumb,
.custom-select-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.country-options-list::-webkit-scrollbar-thumb:hover,
.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.country-option {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.country-option:hover {
    background: rgba(0, 91, 234, 0.04);
}

.country-option.active {
    background: rgba(0, 91, 234, 0.06);
    font-weight: 700;
}

.option-flag {
    font-size: 1.15rem;
}

.option-name {
    font-size: 0.88rem;
    color: var(--text-primary);
    flex-grow: 1;
}

.option-code {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Premium Submit Button Styling */
.form-submit-wrapper {
    width: 100%;
    margin-bottom: 1.25rem;
}

/* Creative Premium Submit Button */
.btn-submit-premium-creative {
    position: relative;
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    border-radius: 14px;
    background: var(--brand-gradient);
    background-size: 200% auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 91, 234, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-submit-premium-creative .btn-text-content {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-submit-premium-creative .btn-icon-box {
    position: absolute;
    right: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    z-index: 3;
    transform: scale(0);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-submit-premium-creative .icon-arrow-static {
    transition: transform 0.3s ease;
}

/* Sweep shine effect overlay */
.btn-submit-premium-creative .btn-shine-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: skewX(-25deg);
    z-index: 2;
    transition: none;
}

/* Hover Animations */
.btn-submit-premium-creative:hover {
    background-position: right center;
    box-shadow: 0 10px 25px rgba(0, 198, 251, 0.45);
    transform: translateY(-2px);
}

.btn-submit-premium-creative:hover .btn-text-content {
    transform: translateX(-15px);
}

.btn-submit-premium-creative:hover .btn-icon-box {
    transform: scale(1);
    opacity: 1;
}

.btn-submit-premium-creative:hover .icon-arrow-static {
    animation: arrowBounce 1.2s infinite;
}

.btn-submit-premium-creative:hover .btn-shine-sweep {
    left: 150%;
    transition: left 1s ease-in-out;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* Privacy Footnote */
.form-privacy-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.form-privacy-footnote svg {
    color: #10b981; /* Green lock icon */
}

/* Responsiveness overrides for Enquiry section */
@media (max-width: 1024px) {
    .contact-section {
        padding: 4.5rem 0;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .glass-form-card {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 3.5rem 0;
    }
    
    .contact-section-header {
        margin-bottom: 2.5rem;
    }
    
    .form-fields-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .input-group-wrapper.full-width {
        grid-column: span 1 !important;
        margin-bottom: 1.25rem;
    }
    
    .contact-info-card {
        padding: 1.5rem 1.25rem;
    }
}

@keyframes submitErrorShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes spinnerRotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom Interest Selector (Smart Dropdown Selector) */
.interest-select-group {
    position: relative;
}

.custom-select-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.custom-select-wrapper:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 0 15px rgba(0, 91, 234, 0.1);
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    min-height: 52px;
}

.selected-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

/* Custom Dropdown Options Menu */
.custom-select-dropdown {
    position: absolute;
    top: 105%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
    z-index: 999;
    overflow: hidden;
    transform-origin: top;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.custom-select-dropdown.hide {
    display: none;
}

.custom-select-options {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

.select-option {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-option:hover {
    background: rgba(0, 91, 234, 0.04);
    color: var(--brand-blue);
}

.select-option.active {
    background: rgba(0, 91, 234, 0.06);
    color: var(--brand-blue);
    font-weight: 700;
}

/* =======================================================
   PREMIUM DARK FOOTER SECTION
   ======================================================= */
.site-footer {
    position: relative;
    background: #060913; /* deep dark slate matching testimonials */
    padding: 6rem 0 2rem 0;
    color: #94a3b8; /* soft gray */
    font-family: var(--font-body);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Background Glowing Bubbles */
.footer-bg-glow-1 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.06) 0%, transparent 70%);
    top: -50px;
    left: -50px;
    pointer-events: none;
    z-index: 1;
}

.footer-bg-glow-2 {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.06) 0%, transparent 70%);
    bottom: -50px;
    right: -50px;
    pointer-events: none;
    z-index: 1;
}

.footer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Newsletter Subscriber Card */
.footer-newsletter-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 3rem;
    background: var(--brand-gradient);
    border: none;
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 5rem;
    box-shadow: 0 20px 50px rgba(0, 91, 234, 0.25);
    position: relative;
    overflow: hidden;
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    color: #ffffff;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.newsletter-desc {
    font-size: 0.95rem;
    color: #f1f5f9;
    line-height: 1.5;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.newsletter-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 0.25rem 0.25rem 0.25rem 1.5rem;
    width: 100%;
    transition: all 0.3s ease;
    gap: 0.75rem;
}

.newsletter-mail-icon {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.75);
}

.newsletter-input-wrapper:focus-within {
    border-color: #ffffff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
}

.newsletter-input-wrapper input {
    flex-grow: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 0.95rem;
    padding: 0.4rem 0;
    width: 100%;
}

.newsletter-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.news-submit-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    position: relative;
    width: 172px;
    height: 44px;
    flex-shrink: 0;
}

.news-submit-btn .btn-text-pill {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-submit-btn .btn-circle-arrow {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Swapping animations background overrides - Invert to White on Hover */
.news-submit-btn:hover .btn-text-pill {
    background: #ffffff !important;
    color: var(--brand-blue) !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.news-submit-btn:hover .btn-circle-arrow {
    background: #ffffff !important;
    color: var(--brand-blue) !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.news-submit-btn .news-check-icon,
.news-submit-btn .news-spinner-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.4s ease;
}

.news-submit-btn:hover .news-check-icon,
.news-submit-btn:hover .news-spinner-icon {
    color: var(--brand-blue);
}

/* Footer Grid columns */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo img {
    height: 52px;
    object-fit: contain;
    margin-bottom: 1.5rem;
}

.footer-brand-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 1.75rem;
}

/* Social links bubbles */
.footer-social-wrapper {
    display: flex;
    gap: 0.85rem;
}

.footer-social-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.footer-social-bubble:hover {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 91, 234, 0.25);
}

.footer-col-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 2rem;
    position: relative;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 25px;
    height: 2px;
    background: var(--brand-gradient);
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-links-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.25s ease;
    display: inline-block;
}

.footer-links-list a:hover {
    color: var(--brand-cyan);
    transform: translateX(5px);
}

/* Contact Info Col */
.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.info-icon {
    color: var(--brand-cyan);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.info-text, .info-link {
    font-size: 0.92rem;
    color: #94a3b8;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-link:hover {
    color: var(--brand-cyan);
}

.footer-helpdesk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 50px;
    align-self: flex-start;
}

.footer-helpdesk-badge .ping-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    animation: alertPulse 1.8s infinite;
}

.helpdesk-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
}

/* Footer Divider */
.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
    margin-bottom: 2rem;
}

/* Footer Bottom Row */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.copyright-text {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.footer-legal-links a {
    font-size: 0.85rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--brand-cyan);
}

/* Back to Top Button */
.btn-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-gradient);
    border: none;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 91, 234, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 198, 251, 0.5);
}

/* Responsiveness overrides for Footer */
@media (max-width: 1024px) {
    .testimonials-container,
    .blogs-container,
    .contact-container,
    .footer-container {
        padding: 0 1.5rem !important;
    }

    .footer-newsletter-card {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem;
        text-align: center;
    }
    
    .newsletter-info {
        text-align: center;
    }
    
    .footer-newsletter-card .newsletter-form {
        max-width: 540px;
        margin: 0 auto;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 4rem 0 2rem 0;
    }
    
    .footer-newsletter-card {
        margin-bottom: 3.5rem;
        padding: 2rem 1.5rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: left;
    }
    
    .footer-col {
        align-items: flex-start;
    }
    
    .footer-brand-desc {
        text-align: left;
        max-width: 440px;
        margin-left: 0;
        margin-right: 0;
    }
    
    .footer-social-wrapper {
        justify-content: flex-start;
    }
    
    .footer-links-list {
        align-items: flex-start;
    }
    
    .footer-contact-info {
        align-items: flex-start;
        text-align: left;
    }
    
    .footer-bottom {
        flex-direction: column-reverse;
        gap: 1.25rem;
        text-align: center;
    }
    
    .footer-legal-links {
        justify-content: center;
    }
    
    .btn-back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
}

@keyframes alertPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@media (max-width: 576px) {
    .testimonials-container,
    .blogs-container,
    .contact-container,
    .footer-container {
        padding: 0 1rem !important;
    }

    .newsletter-input-wrapper {
        flex-direction: column;
        align-items: stretch;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        gap: 1rem !important;
        position: relative;
        box-shadow: none !important;
    }
    
    .newsletter-mail-icon {
        position: absolute;
        left: 1.25rem;
        top: 14px;
        z-index: 10;
        color: rgba(255, 255, 255, 0.75) !important;
        display: flex;
        align-items: center;
    }
    
    .newsletter-input-wrapper input {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 30px !important;
        padding: 0.85rem 1rem 0.85rem 3rem !important;
        height: 48px !important;
        color: #ffffff !important;
        width: 100% !important;
    }

    .newsletter-input-wrapper input:focus {
        border-color: #ffffff !important;
        background: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
    }
    
    .news-submit-btn {
        width: 100% !important;
        height: 48px !important;
        justify-content: center;
    }

    .news-submit-btn .btn-text-pill {
        height: 48px !important;
        flex-grow: 1;
        justify-content: center;
        border-radius: 30px !important;
        width: 100% !important;
    }

    .news-submit-btn .btn-circle-arrow {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
    }
    
    /* Disable swapping translations on mobile layout to fit screen space */
    .news-submit-btn:hover .btn-text-pill {
        transform: none !important;
    }
    
    .news-submit-btn:hover .btn-circle-arrow {
        transform: none !important;
    }
}

/* =======================================================
   RESPONSIVENESS OVERRIDES: CONTACT, TESTIMONIALS, & BLOGS
   ======================================================= */

@media (max-width: 1024px) {
    /* Testimonials */
    .testimonials-section {
        padding: 4.5rem 0;
    }
    .testimonials-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .testimonials-carousel-btns {
        align-self: flex-start;
    }
    
    /* Blogs */
    .blogs-section {
        padding: 4.5rem 0;
    }
    .blogs-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .blogs-carousel-btns {
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    /* Testimonials Header Center Alignment */
    .testimonials-header-wrapper {
        align-items: center !important;
        text-align: center !important;
        flex-direction: column !important;
    }
    
    .testimonials-header-left {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .testimonials-carousel-btns {
        align-self: center !important;
        justify-content: center !important;
    }
    
    /* Blogs Header Center Alignment */
    .blogs-header-wrapper {
        align-items: center !important;
        text-align: center !important;
        flex-direction: column !important;
    }
    
    .blogs-header-left {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .blogs-carousel-btns {
        align-self: center !important;
        justify-content: center !important;
    }

    /* Contact Details Center Alignment */
    .contact-section-header {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .contact-info-column {
        align-items: stretch !important;
    }

    .contact-social-block {
        align-items: center !important;
        text-align: center !important;
    }

    .contact-social-row {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    /* Contact Glass Card padding reductions for narrow screen viewports */
    .glass-form-card {
        padding: 2rem 1.25rem !important;
        border-radius: 16px !important;
    }

    .form-card-title {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
        text-align: left !important;
    }

    .btn-submit-premium-creative {
        width: 100% !important;
        height: 50px !important;
        padding: 0 1.25rem !important;
        font-size: 0.9rem !important;
    }

    .btn-submit-premium-creative .btn-text-content {
        transform: none !important;
    }

    .btn-submit-premium-creative .btn-icon-box {
        display: none !important; /* Hide icon on tiny mobile to fit text space */
    }

    .country-dropdown-menu,
    .custom-select-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================
   ABOUT US PAGE STYLING
   ========================================== */
.about-hero-section {
    position: relative;
    padding-top: calc(5.5rem + 80px); /* sticky header clearance */
    padding-bottom: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-color: #0b0f19; /* Deep premium dark slate background */
}

.about-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

.about-hero-glow {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
}

.about-hero-glow.glow-1 {
    top: -20%;
    left: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.12) 0%, transparent 70%);
}

.about-hero-glow.glow-2 {
    bottom: -20%;
    right: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.1) 0%, transparent 70%);
}

.about-hero-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 2;
    text-align: left;
}

/* Breadcrumbs */
.breadcrumb-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    font-weight: 600;
}

.breadcrumb-link {
    color: #94a3b8; /* Light slate for dark theme */
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: #00c6fb; /* Accent cyan on hover */
}

.breadcrumb-separator {
    color: rgba(148, 163, 184, 0.3);
}

.breadcrumb-current {
    color: #00c6fb; /* Accent cyan */
    font-weight: 700;
}

/* Title Block */
.about-title-block {
    max-width: 900px;
    margin: 0;
}

.about-title-block .section-subtitle-badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-title-block .section-subtitle-badge .subtitle-text {
    color: #00c6fb; /* Accent cyan */
}

.about-page-title {
    font-size: clamp(2.25rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    color: #ffffff; /* Crisp white title */
    margin: 1.25rem 0;
    letter-spacing: -0.03em;
}

.about-page-subtitle {
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    color: #cbd5e1; /* Smooth grey description */
    line-height: 1.65;
    margin: 0;
}

/* Responsive adjust for container gutters */
@media (max-width: 1024px) {
    .about-hero-container {
        padding: 0 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .about-hero-container {
        padding: 0 1rem !important;
    }
    
    .about-hero-section {
        padding-top: calc(3.5rem + 80px);
        padding-bottom: 3.5rem;
    }
    
    .breadcrumb-wrapper {
        margin-bottom: 1rem;
        font-size: 0.82rem;
    }
}

/* ==========================================
   ABOUT US CONTENT SECTIONS STYLING
   ========================================== */
.about-mission-section,
.about-pillars-section,
.about-timeline-section {
    position: relative;
    padding: 6.5rem 0;
}

.about-mission-section {
    background-color: #ffffff;
}

.about-pillars-section {
    background-color: #f8fafc; /* Alternating light background */
}

.about-timeline-section {
    background-color: #ffffff;
}

.about-section-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.about-section-heading {
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
    margin: 1rem 0 1.5rem;
    letter-spacing: -0.02em;
}

.about-section-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 2rem;
}

/* Tag Pill */
.section-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    background: rgba(0, 91, 234, 0.06);
    border: 1px solid rgba(0, 91, 234, 0.08);
    color: var(--brand-blue);
}

/* Section 1: Mission Grid */
.about-mission-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Background effects */
.mission-bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(80px);
    opacity: 0.06;
}

.mission-bg-glow.glow-blue {
    top: 10%;
    left: -10%;
    background: radial-gradient(circle, #005bea 0%, transparent 70%);
}

.mission-bg-glow.glow-cyan {
    bottom: 10%;
    right: -10%;
    background: radial-gradient(circle, #00c6fb 0%, transparent 70%);
}

.mission-dot-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: 1;
}

/* Heading & Highlight Boxes */
.mission-title-area {
    margin-bottom: 2.5rem;
}

.title-highlight-box {
    display: inline-block;
    padding: 0.15rem 0.75rem;
    border-radius: 10px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.08);
    transform: rotate(-1.5deg);
    margin-right: 0.25rem;
}

.title-highlight-box.border-gradient {
    background: rgba(0, 198, 251, 0.03);
    border: 1.5px solid rgba(0, 198, 251, 0.3);
    transform: rotate(1deg);
}

.highlight-cyan {
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Feature Cards Redesign */
.mission-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mission-feature-card {
    position: relative;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    box-shadow: 0 5px 25px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.card-border-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mission-feature-card:hover {
    transform: translateX(10px) translateY(-2px);
    border-color: rgba(0, 198, 251, 0.25);
    box-shadow: 0 12px 30px rgba(0, 198, 251, 0.06);
}

.mission-feature-card:hover .card-border-glow {
    opacity: 1;
}

.feature-card-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.08);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.feature-svg {
    width: 24px;
    height: 24px;
    stroke: var(--brand-blue);
    transition: all 0.3s ease;
}

.mission-feature-card:hover .feature-card-icon-wrapper {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 198, 251, 0.3);
}

.mission-feature-card:hover .feature-svg {
    stroke: #ffffff;
    transform: scale(1.1);
}

.feature-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feature-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.feature-card-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
}

/* Console Workspace Visual Redesign */
.console-layout-wrapper {
    position: relative;
    padding: 2.5rem 0;
}

.console-backdrop-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--brand-gradient);
    filter: blur(60px);
    opacity: 0.12;
    z-index: 1;
    border-radius: 30px;
    pointer-events: none;
}

.console-main-frame {
    position: relative;
    background: #0f172a;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
    transition: transform 0.4s ease;
}

.console-main-frame:hover {
    transform: translateY(-5px);
}

.console-top-bar {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.25rem;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.console-dots {
    display: flex;
    gap: 0.5rem;
}

.console-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red { background-color: #ef4444; }
.dot-yellow { background-color: #f59e0b; }
.dot-green { background-color: #10b981; }

.console-address-bar {
    margin-left: 2rem;
    flex-grow: 0.6;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.75rem;
    font-family: monospace;
    padding: 0.35rem 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.console-img {
    display: block;
    width: 100%;
    height: clamp(400px, 50vw, 560px);
    object-fit: cover;
}

/* Floating Glass Widgets */
.glass-floating-widget {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.75rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.widget-glow-point {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background: #00c6fb;
    border-radius: 50%;
    box-shadow: 0 0 10px #00c6fb;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.glass-floating-widget:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(0, 198, 251, 0.4);
    box-shadow: 0 20px 40px rgba(0, 198, 251, 0.12);
}

/* Specific Widget Placements */
.stat-widget {
    bottom: -10px;
    left: -35px;
}

.student-widget {
    top: -15px;
    right: -35px;
}

.location-widget {
    bottom: 25px;
    right: -25px;
    padding: 0.85rem 1.5rem;
    gap: 0.75rem;
    border-radius: 50px;
}

.widget-icon {
    font-size: 1.8rem;
}

.widget-details {
    display: flex;
    flex-direction: column;
}

.widget-number {
    font-size: 1.6rem;
    font-weight: 850;
    line-height: 1.1;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.widget-txt {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.widget-badge-circle {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
}

.widget-badge-txt {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
    .stat-widget {
        left: -10px;
    }
    .student-widget {
        right: -10px;
    }
    .location-widget {
        right: -10px;
    }
}

/* Section 2: Core Pillars Grid */
.section-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem;
}

.section-header-left {
    text-align: left;
    max-width: 800px;
    margin: 0 0 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-header-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pillars-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pillar-glass-card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-glass-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 198, 251, 0.4);
    box-shadow: 0 12px 30px rgba(0, 198, 251, 0.08);
}

.pillar-card-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    margin-bottom: 1.75rem;
    background: rgba(0, 91, 234, 0.05);
    border: 1px solid rgba(0, 91, 234, 0.08);
    transition: all 0.4s ease;
}

.pillar-svg {
    width: 28px;
    height: 28px;
    stroke: var(--brand-blue);
    transition: all 0.4s ease;
}

.pillar-glass-card:hover .pillar-card-icon-box {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 6px 15px rgba(0, 198, 251, 0.25);
}

.pillar-glass-card:hover .pillar-svg {
    stroke: #ffffff;
    transform: scale(1.1);
}

.pillar-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.pillar-card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Section 3: Timeline Journey */
.about-timeline-section {
    position: relative;
    padding: 7.5rem 0;
    overflow: hidden;
    background-color: #f8fafc; /* Alternating off-white background */
    border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.timeline-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(100px);
    opacity: 0.05;
}

.timeline-bg-glow.glow-1 {
    top: -10%;
    right: -10%;
    background: radial-gradient(circle, #00c6fb 0%, transparent 70%);
}

.timeline-bg-glow.glow-2 {
    bottom: -10%;
    left: -10%;
    background: radial-gradient(circle, #005bea 0%, transparent 70%);
}

.timeline-interactive-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 6rem;
    align-items: start;
    position: relative;
    z-index: 2;
}

/* Sticky HUD Left column */
.timeline-sticky-hud {
    position: sticky;
    top: 130px; /* Aligns with sticky header */
    z-index: 5;
}

.hud-inner-panel {
    display: flex;
    flex-direction: column;
}

.hud-sub-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 1.5rem 0 2.5rem;
}

/* Giant HUD clock */
.hud-giant-clock {
    position: relative;
    background: #0b0f19;
    border-radius: 24px;
    padding: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.clock-mesh-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 198, 251, 0.15) 1px, transparent 1px);
    background-size: 15px 15px;
    opacity: 0.5;
}

.clock-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--brand-cyan);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.clock-year-value {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: monospace;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.clock-year-desc {
    font-size: 1.1rem;
    font-weight: 700;
    color: #cbd5e1;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

/* Right Stack Milestones styling */
.timeline-milestones-stack {
    position: relative;
    padding-left: 3rem;
}

/* Laser Track line */
.hud-track-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}

.hud-laser-pointer {
    position: absolute;
    top: 35px; /* JS moves this */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 32px;
    border-radius: 10px;
    background: var(--brand-gradient);
    box-shadow: 0 0 15px var(--brand-cyan), 0 0 5px var(--brand-blue);
    transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* Milestone Cards */
.timeline-milestone-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 24px;
    padding: 2.25rem 2.5rem;
    margin-bottom: 3.5rem;
    box-shadow: 0 5px 30px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    overflow: hidden;
}

.timeline-milestone-card:last-child {
    margin-bottom: 0;
}

.card-glow-aurora {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Active card state */
.timeline-milestone-card.active,
.timeline-milestone-card:hover {
    transform: translateX(8px);
    border-color: rgba(0, 198, 251, 0.3);
    box-shadow: 0 15px 35px rgba(0, 198, 251, 0.06);
}

.timeline-milestone-card.active .card-glow-aurora,
.timeline-milestone-card:hover .card-glow-aurora {
    opacity: 1;
}

.timeline-milestone-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.timeline-milestone-card.active::before,
.timeline-milestone-card:hover::before {
    opacity: 1;
}

/* Timeline Icons & tags on active card */
.milestone-phase-tag {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
    background: rgba(0, 91, 234, 0.05);
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
}

.timeline-milestone-card.active .milestone-phase-tag,
.timeline-milestone-card:hover .milestone-phase-tag {
    background: var(--brand-gradient);
    color: #ffffff;
}

.milestone-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.milestone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.timeline-svg {
    width: 22px;
    height: 22px;
    stroke: var(--brand-blue);
    transition: all 0.3s ease;
}

.timeline-milestone-card.active .milestone-icon,
.timeline-milestone-card:hover .milestone-icon {
    background: var(--brand-gradient);
    border-color: transparent;
}

.timeline-milestone-card.active .timeline-svg,
.timeline-milestone-card:hover .timeline-svg {
    stroke: #ffffff;
    transform: scale(1.1);
}

.timeline-card-heading {
    font-size: 1.2rem;
    font-weight: 850;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.timeline-card-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================
   ABOUT RESPONSIVE OVERRIDES
   ========================================== */
@media (max-width: 1024px) {
    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    
    .mission-visual-col {
        max-width: 550px;
        margin: 0 auto;
        width: 100%;
    }
    
    .contact-page-form-col {
        max-width: 100% !important;
    }
    
    .pillars-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .timeline-interactive-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    
    .timeline-sticky-hud {
        position: relative !important;
        top: 0 !important;
    }
    
    .timeline-milestones-stack {
        padding-left: 2.5rem;
    }
}

@media (max-width: 768px) {
    .about-mission-section,
    .about-pillars-section,
    .about-timeline-section {
        padding: 4.5rem 0;
    }
    
    .pillars-cards-grid {
        grid-template-columns: 1fr;
    }
    
    /* Timeline Mobile Stack */
    .timeline-beam-line,
    .timeline-beam-progress {
        left: 20px;
        transform: none;
    }
    
    .timeline-connector {
        display: none; /* Hide connector lines in mobile stack */
    }
    
    .timeline-year-badge {
        left: 20px;
        transform: translateX(-50%);
        width: 54px;
        height: 54px;
    }
    
    .badge-glow-ring {
        border-width: 2px;
    }
    
    .badge-year-txt {
        font-size: 0.82rem;
    }
    
    .timeline-milestone-row:hover .badge-glow-ring {
        transform: translateX(-50%) scale(1.1);
    }
    
    .timeline-card {
        width: calc(100% - 60px);
        margin-left: 60px;
        padding: 1.75rem;
    }
    
    .timeline-milestone-row.left-align,
    .timeline-milestone-row.right-align {
        justify-content: flex-start;
    }
    
    .timeline-milestone-row {
        margin-bottom: 3.5rem;
    }
}

@media (max-width: 576px) {
    .about-section-container {
        padding: 0 1.25rem !important;
    }
    
    .about-mission-section,
    .about-pillars-section,
    .about-timeline-section {
        padding: 3.5rem 0;
    }
    
    .pillar-glass-card {
        padding: 2rem 1.5rem;
    }

    /* Interactive HUD timeline mobile adjustments */
    .timeline-milestones-stack {
        padding-left: 2rem;
    }
    
    .timeline-milestone-card {
        padding: 1.5rem;
        border-radius: 16px;
        margin-bottom: 2rem;
    }

    .hud-giant-clock {
        padding: 1.5rem;
        border-radius: 16px;
    }

    /* Floating visual mockup widgets scaling on mobile */
    .glass-floating-widget {
        padding: 0.5rem 0.85rem;
        border-radius: 12px;
    }
    
    .widget-number {
        font-size: 1.25rem;
    }
    
    .widget-txt {
        font-size: 0.7rem;
    }
    
    .widget-icon {
        font-size: 1.25rem;
    }
    
    .stat-widget {
        bottom: -5px;
        left: 0;
    }
    
    .student-widget {
        top: -5px;
        right: 0;
    }
    
    .location-widget {
        bottom: 15px;
        right: 0;
        padding: 0.5rem 1rem;
    }
}
}

/* ==========================================
   CREATIVE MID-PAGE CTA SECTION STYLING
   ========================================== */
.about-mid-cta-section {
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
    background-color: #ffffff;
}

.cta-mesh-box {
    position: relative;
    background: linear-gradient(135deg, #0b0f19 0%, #0f172a 100%);
    border-radius: 32px;
    padding: 4.5rem 5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.cta-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 198, 251, 0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    z-index: 1;
}

.cta-glow-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    z-index: 2;
    pointer-events: none;
}

.cta-glow-circle.glow-blue {
    bottom: -150px;
    right: -100px;
    background: #005bea;
}

.cta-glow-circle.glow-cyan {
    top: -150px;
    left: -100px;
    background: #00c6fb;
}

.cta-content-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* Info Side styling */
.cta-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cta-badge .subtitle-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-box-heading {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1rem 0 1.25rem;
}

.cta-box-desc {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 2.5rem;
}

.cta-stats-row {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.cta-stat-item {
    display: flex;
    flex-direction: column;
}

.cta-stat-num {
    font-size: 2.2rem;
    font-weight: 850;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 0.35rem;
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-stat-lbl {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* Visual Mock Side styling */
.cta-visual-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cta-terminal-window {
    background: #060913;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: monospace;
}

.terminal-titlebar {
    background: #0f172a;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.red-dot { background: #ef4444; }
.yellow-dot { background: #f59e0b; }
.green-dot { background: #10b981; }

.terminal-file-name {
    color: #64748b;
    font-size: 0.75rem;
    margin-left: 1.5rem;
}

.terminal-body-content {
    padding: 1.5rem;
    color: #38bdf8;
    font-size: 0.85rem;
    line-height: 1.6;
}

.cmd-prompt {
    color: #10b981;
}

.response-line {
    color: #94a3b8;
}

.cursor-blink {
    animation: terminal-cursor 1s infinite step-end;
    color: #ffffff;
}

@keyframes terminal-cursor {
    from, to { opacity: 0 }
    50% { opacity: 1 }
}

.cta-button-wrapper {
    display: flex;
    justify-content: flex-start;
}

.about-cta-btn {
    width: 236px;
}

.about-cta-btn .btn-text-pill {
    width: 180px;
    text-align: center;
}

.about-cta-btn:hover .btn-text-pill {
    transform: translateX(56px);
}

.about-cta-btn:hover .btn-circle-arrow {
    transform: translateX(-192px);
}

/* Responsive CTA */
@media (max-width: 1024px) {
    .cta-mesh-box {
        padding: 3.5rem 3rem;
    }
    
    .cta-content-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    
    .cta-visual-side {
        max-width: 500px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .about-mid-cta-section {
        padding: 4.5rem 0;
    }
    
    .cta-mesh-box {
        padding: 2.5rem 2rem;
        border-radius: 24px;
    }
    
    .cta-stats-row {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .cta-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .cta-stat-divider {
        display: none;
    }
}

/* =======================================================
   CONTACT PAGE DETAILS, MAP CONSOLE & FAQ STYLING
   ======================================================= */
.contact-details-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2.5rem 0 3rem;
}

.contact-detail-card-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-detail-card-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 198, 251, 0.3);
    box-shadow: 0 10px 25px rgba(0, 198, 251, 0.08);
}

.contact-detail-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue);
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-detail-card-item:hover .contact-detail-icon-box {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 198, 251, 0.2);
}

.detail-svg {
    width: 22px;
    height: 22px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-detail-card-item:hover .detail-svg {
    transform: rotateY(180deg);
}

.contact-detail-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.detail-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-cyan);
}

.detail-anchor {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.detail-anchor:hover {
    color: var(--brand-blue);
}

.detail-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.detail-static-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-blue);
    text-decoration: none;
    margin-top: 0.25rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.detail-link:hover {
    transform: translateX(4px);
}

/* Social media connections row */
.contact-social-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.social-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.contact-social-icons-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-social-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-social-bubble:hover {
    transform: translateY(-5px);
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(0, 198, 251, 0.2);
}

/* Form container overrides */
.contact-page-form-wrapper {
    max-width: 100%;
}

/* Campus map section */
.campus-map-mesh-box {
    margin-top: 2rem;
}

.map-grid-console {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4.5rem;
    align-items: center;
}

.map-console-meta {
    background: #060913;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: monospace;
}

.console-tab-header {
    background: #0f172a;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tab-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.tab-dot.red { background: #ef4444; }
.tab-dot.yellow { background: #eab308; }
.tab-dot.green { background: #22c55e; }

.tab-title {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 0.5rem;
    font-weight: 700;
}

.console-tab-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.meta-coords-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 0.75rem;
}

.meta-coords-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.coord-label {
    color: var(--brand-cyan);
    font-weight: 800;
    font-size: 0.85rem;
}

.coord-val {
    color: #cbd5e1;
    font-size: 0.95rem;
}

.console-actions-row {
    margin-top: 1.5rem;
}

/* Map Mockup Graphics styling */
.map-mockup-graphics {
    position: relative;
    height: 400px;
    background: #0b0f19;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 40px rgba(0, 198, 251, 0.05);
    overflow: hidden;
}

.map-lines-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(rgba(148, 163, 184, 0.06) 1.5px, transparent 1.5px),
        linear-gradient(rgba(0, 198, 251, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 198, 251, 0.02) 1px, transparent 1px);
    background-size: 20px 20px, 40px 40px, 40px 40px;
}

.map-sonar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0, 198, 251, 0.25);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: sonarPulse 6s infinite linear;
    pointer-events: none;
}

.map-sonar-ring.delay-1 {
    animation-delay: 2s;
}

.map-sonar-ring.delay-2 {
    animation-delay: 4s;
}

@keyframes sonarPulse {
    0% {
        width: 40px;
        height: 40px;
        opacity: 0.8;
    }
    100% {
        width: 320px;
        height: 320px;
        opacity: 0;
    }
}

.map-hub-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.pin-dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--brand-gradient);
    box-shadow: 0 0 15px var(--brand-cyan), 0 0 5px var(--brand-blue);
    border: 2px solid #ffffff;
}

.pin-card-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(0, 198, 251, 0.3);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 140px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.pin-card-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
}

.pin-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

.pin-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
}

/* Accordion FAQs styling */
.faq-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 3.5rem;
}

.faq-accordion-item {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-trigger-header {
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 1.5rem;
    user-select: none;
}

.faq-question-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: left;
    margin: 0;
    transition: color 0.3s ease;
}

.faq-arrow-icon {
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.faq-body-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 2rem;
}

.faq-answer-txt {
    font-size: 1.02rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    padding-bottom: 1.75rem;
    text-align: left;
}

/* Active FAQ states */
.faq-accordion-item.active {
    border-color: rgba(0, 198, 251, 0.3);
    box-shadow: 0 10px 30px rgba(0, 198, 251, 0.05);
}

.faq-accordion-item.active .faq-question-title {
    color: var(--brand-blue);
}

.faq-accordion-item.active .faq-arrow-icon {
    transform: rotate(180deg);
    color: var(--brand-cyan);
}

.faq-accordion-item.active .faq-body-content {
    max-height: 500px; /* Large enough threshold */
}

/* Responsive FAQ & Map Console overrides */
@media (max-width: 900px) {
    .map-grid-console {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .map-mockup-graphics {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .console-tab-body {
        padding: 1.5rem;
    }
    
    .meta-coords-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    
    .faq-trigger-header {
        padding: 1.25rem 1.5rem;
    }
    
    .faq-question-title {
        font-size: 1.05rem;
    }
    
    .faq-answer-txt {
        font-size: 0.95rem;
        padding-bottom: 1.25rem;
    }
    
    .faq-body-content {
        padding: 0 1.5rem;
    }
}

/* Custom radio chips styling */
.batch-select-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
    text-align: left;
}

.batch-options-chips {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.batch-chip-item {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.batch-chip-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.batch-chip-item .chip-text {
    display: block;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    transition: all 0.3s ease;
}

.batch-chip-item input[type="radio"]:checked + .chip-text {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 198, 251, 0.2);
}

/* Contact page mobile responsive overrides */
@media (max-width: 576px) {
    .contact-details-cards {
        gap: 1rem;
        margin: 2rem 0;
    }
    
    .contact-detail-card-item {
        padding: 1.25rem 1rem;
        gap: 1rem;
        border-radius: 12px;
    }
    
    .contact-detail-icon-box {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .detail-svg {
        width: 18px;
        height: 18px;
    }
    
    .detail-anchor {
        font-size: 1.05rem;
    }
    
    .detail-static-text {
        font-size: 0.95rem;
    }
    
    .contact-social-icons-row {
        gap: 0.75rem;
    }
    
    .contact-social-bubble {
        width: 40px;
        height: 40px;
    }
    
    .batch-chip-item .chip-text {
        padding: 0.75rem 0.5rem;
        font-size: 0.82rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .map-mockup-graphics {
        height: 250px;
    }
    
    .pin-card-popup {
        padding: 0.35rem 0.75rem;
        min-width: 110px;
    }
    
    .pin-title {
        font-size: 0.72rem;
    }
    
    .pin-sub {
        font-size: 0.62rem;
    }
}

/* Custom live Google Map */
.map-iframe-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.map-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================
   BLOG LIST PAGE STYLING
   ========================================== */
.blog-list-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    margin-bottom: 5.5rem;
}

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-widget {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.01);
}

.widget-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 850;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    padding-left: 0.75rem;
    position: relative;
}

.widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: var(--brand-gradient);
    border-radius: 2px;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    background: #f8fafc;
    border: 1px solid transparent;
}

.category-item:hover, .category-item.active {
    background: rgba(0, 198, 251, 0.05);
    border-color: rgba(0, 198, 251, 0.18);
    color: var(--brand-blue);
}

.cat-count {
    background: #e2e8f0;
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.3s ease;
}

.category-item:hover .cat-count, .category-item.active .cat-count {
    background: var(--brand-gradient);
    color: #ffffff;
}

.recent-posts-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.recent-post-item {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.recent-post-item:hover {
    transform: translateX(4px);
}

.recent-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.recent-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    flex: 1;
}

.recent-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
}

.recent-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-post-item:hover .recent-title {
    color: var(--brand-blue);
}

/* Main content & controls styles */
.blog-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.blog-count-info {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.blog-count-number {
    color: var(--brand-blue);
    font-weight: 850;
}

.blog-search-wrapper {
    position: relative;
    width: 300px;
}

.blog-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.blog-search-input:focus {
    background: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 0 15px rgba(0, 91, 234, 0.08);
    outline: none;
}

.search-icon-svg {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.3s ease;
}

.blog-search-input:focus + .search-icon-svg {
    color: var(--brand-blue);
}

/* Blog Cards Grid Overrides */
.blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.blog-cards-grid .blog-slide-card {
    flex: none;
    width: 100%;
    height: 100%;
}

/* Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3.5rem;
}

.pagination-number, .pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-number:hover, .pagination-arrow:hover {
    border-color: var(--brand-cyan);
    color: var(--brand-blue);
    background: rgba(0, 198, 251, 0.02);
}

.pagination-number.active {
    background: var(--brand-gradient);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(0, 198, 251, 0.2);
}

.pagination-arrow.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: #f8fafc;
}

/* Premium Sidebar Bento CTA Widget */
.sidebar-cta-widget {
    position: relative;
    background: #060913;
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.sidebar-cta-widget:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 198, 251, 0.12);
}

/* Conic gradient glowing border line flow */
.sidebar-cta-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(0, 198, 251, 0.3) 0%, rgba(0, 91, 234, 0.3) 50%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
    transition: background 0.5s ease;
}

.sidebar-cta-widget:hover::before {
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 50%, #00c6fb 100%);
    background-size: 200% 200%;
    animation: ctaBorderFlow 3s linear infinite;
}

@keyframes ctaBorderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cta-widget-glow {
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    animation: ctaOrbFloating 6s ease-in-out infinite alternate;
}

@keyframes ctaOrbFloating {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, -20px) scale(1.25); }
}

.cta-widget-mesh {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
    z-index: 1;
}

/* Sweeping laser scanning sweep line */
.cta-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 198, 251, 0.35), transparent);
    animation: ctaScanSweep 4.5s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes ctaScanSweep {
    0% { top: -2%; }
    100% { top: 102%; }
}

.limited-seats-badge-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 198, 251, 0.08);
    border: 1px solid rgba(0, 198, 251, 0.18);
    padding: 0.35rem 0.75rem;
    border-radius: 30px;
    width: fit-content;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 2;
}

.pulse-radar {
    width: 7px;
    height: 7px;
    background: #00c6fb;
    border-radius: 50%;
    position: relative;
}

.pulse-radar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2.5px solid #00c6fb;
    animation: radarPulseScale 1.8s infinite ease-out;
}

@keyframes radarPulseScale {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.limited-seats-badge {
    font-size: 0.72rem;
    font-weight: 850;
    color: var(--brand-cyan);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta-widget-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 850;
    color: #ffffff;
    line-height: 1.35;
    margin: 1.25rem 0 0.75rem 0;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.sidebar-cta-widget:hover .cta-widget-title .gradient-text {
    background-size: 200% auto;
    animation: flowTitleText 1.5s linear infinite;
}

@keyframes flowTitleText {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.cta-widget-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1.75rem 0;
    position: relative;
    z-index: 2;
}

.sidebar-cta-btn {
    align-self: flex-start;
    z-index: 2;
}

/* Responsive Overrides & Offcanvas Styles */
.blog-controls-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-filter-toggle-btn {
    display: none; /* hidden on desktop */
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.blog-filter-toggle-btn:hover {
    border-color: var(--brand-cyan);
    color: var(--brand-blue);
    background: rgba(0, 198, 251, 0.02);
}

.blog-filter-toggle-btn svg {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.blog-filter-toggle-btn:hover svg {
    color: var(--brand-blue);
}

/* Offcanvas Drawer Elements */
.blog-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1010;
}

.blog-offcanvas-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.blog-offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    max-width: 85%;
    background: #f8fafc;
    box-shadow: 15px 0 35px rgba(15, 23, 42, 0.15);
    z-index: 1015;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%); /* Shift offscreen left relative to its own width */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-offcanvas.active {
    transform: translateX(0); /* Slide open smoothly to the left viewport edge */
}

.blog-offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.offcanvas-drawer-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 850;
    color: var(--text-primary);
    margin: 0;
}

.blog-offcanvas-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.blog-offcanvas-close:hover {
    background: #f1f5f9;
    color: var(--text-primary);
}

.blog-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 0; /* Remove horizontal padding for edge-to-edge layout */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Strip card borders, shadows, backgrounds, and radius from widgets inside offcanvas */
.blog-offcanvas .sidebar-widget {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 1.5rem !important; /* Retain horizontal padding only for content alignment */
    margin: 0 !important;
}

/* Offcanvas Body Sidebar Widget specific scroll height adjustments */
.blog-offcanvas-body::-webkit-scrollbar {
    width: 6px;
}

.blog-offcanvas-body::-webkit-scrollbar-track {
    background: transparent;
}

.blog-offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 4px;
}

@media (max-width: 1024px) {
    .blog-list-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .blog-list-layout .blog-sidebar {
        display: none !important; /* Hide standard desktop sidebar ONLY on blog list page */
    }
    
    .blog-filter-toggle-btn {
        display: inline-flex; /* Show mobile filter trigger button */
    }
}

@media (max-width: 768px) {
    .blog-controls-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .blog-controls-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .blog-search-wrapper {
        flex: 1;
        width: auto !important;
    }
    
    .blog-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .blog-offcanvas {
        width: 280px;
    }
    
    .blog-offcanvas-body {
        padding: 1rem 0;
        gap: 1.5rem;
    }
    
    .blog-offcanvas .sidebar-widget {
        padding: 0 1.15rem !important; /* Tighter padding for small phone viewports */
    }
    
    .blog-controls-right {
        gap: 0.5rem;
    }
    
    .blog-filter-toggle-btn {
        padding: 0.7rem 1rem;
    }
}

/* ==========================================================================
   Blog Detail Page Styles
   ========================================================================== */

/* Hero adjustments */
.blog-detail-hero {
    padding-bottom: 5.5rem !important;
}

.blog-detail-hero .about-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Breadcrumbs navigation */
.breadcrumb-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    flex-wrap: wrap;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: var(--brand-cyan);
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-current {
    color: #ffffff;
    font-weight: 600;
    max-width: none; /* Allow breadcrumbs to span full width */
}

/* Badge row & titles */
.blog-detail-badge-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/* Reset badge absolute styles and force vertical flex alignment */
.blog-detail-badge-row .blog-category-tag,
.blog-detail-badge-row .blog-readtime-tag {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin: 0 !important;
    box-sizing: border-box;
}

.blog-detail-badge-row .blog-category-tag {
    padding: 0 0.85rem;
}

.blog-detail-badge-row .blog-readtime-tag {
    padding: 0 0.75rem;
}

.blog-detail-date {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    height: 28px; /* Sync with badge height for vertical centering */
}

.blog-detail-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 2rem 0;
}

/* Author metadata block */
.blog-author-meta-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 23, 42, 0.45);
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    backdrop-filter: blur(10px);
    max-width: 100%;
    flex-wrap: wrap;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-cyan);
}

.author-details-text {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 750;
    color: #ffffff;
}

.author-role {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
}

/* Grand Featured Image Frame */
.blog-detail-featured-frame {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.featured-image-file {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.blog-detail-featured-frame:hover .featured-image-file {
    transform: scale(1.03);
}

.featured-image-overlay-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 91, 234, 0.05) 100%);
    pointer-events: none;
}

/* Rich Text Content */
.blog-detail-article-column {
    background: #ffffff;
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.rich-text-content-wrapper {
    font-family: var(--font-body);
    font-size: 1.12rem;
    line-height: 1.75;
    color: #334155; /* Slightly softer than pure black for readability */
}

.article-lead-paragraph {
    font-size: 1.25rem;
    line-height: 1.7;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2rem;
    max-width: none !important;
}

.drop-cap-letter {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 900;
    float: left;
    line-height: 0.8;
    padding-right: 0.65rem;
    padding-top: 0.35rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rich-text-content-wrapper h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.5vw, 1.85rem);
    font-weight: 850;
    color: var(--text-primary);
    margin: 3.5rem 0 1.25rem 0;
    letter-spacing: -0.02em;
}

.rich-text-content-wrapper p {
    max-width: none !important;
    margin-bottom: 1.75rem;
}

/* Blockquote */
.rich-text-content-wrapper blockquote {
    position: relative;
    margin: 3rem 0;
    padding: 2.25rem 2.5rem;
    background: #f8fafc;
    border-left: 5px solid var(--brand-cyan);
    border-radius: 0 24px 24px 0;
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
}

.rich-text-content-wrapper blockquote::before {
    content: '“';
    position: absolute;
    top: -1rem;
    left: 1rem;
    font-family: var(--font-heading);
    font-size: 6rem;
    font-weight: 900;
    color: rgba(0, 198, 251, 0.15);
    line-height: 1;
}

/* Takeaway Bento Block */
.article-takeaway-bento {
    background: #0f172a;
    border-radius: 24px;
    padding: 2rem 2.25rem;
    margin: 3rem 0;
    border: 1px solid rgba(0, 198, 251, 0.15);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
}

.takeaway-badge-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--brand-cyan);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.takeaway-list-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.takeaway-list-bullets li {
    position: relative;
    padding-left: 1.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: #e2e8f0;
}

.takeaway-list-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    background: var(--brand-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--brand-cyan);
}

/* Code Mockup Terminal styles */
.code-snippet-terminal {
    background: #060913;
    border-radius: 20px;
    overflow: hidden;
    margin: 3rem 0;
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.terminal-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f172a;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.terminal-dots-row {
    display: flex;
    gap: 0.45rem;
}

.term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.terminal-title-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.code-snippet-terminal pre {
    margin: 0;
    padding: 1.75rem 2rem;
    overflow-x: auto;
}

.code-snippet-terminal code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e2e8f0;
}

.code-keyword { color: #f43f5e; font-weight: 700; }
.code-string { color: #34d399; }
.code-number { color: #f59e0b; }
.code-comment { color: #64748b; font-style: italic; }
.code-function { color: #38bdf8; }

/* Share Strip styling */
.article-share-footer-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    margin: 3.5rem 0;
}

.share-title-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--text-primary);
}

.share-social-links-row {
    display: flex;
    gap: 0.75rem;
}

.share-icon-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.share-icon-bubble:hover {
    background: var(--brand-gradient);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 91, 234, 0.15);
}

/* Comments Form Styles */
.article-feedback-comment-box {
    margin-top: 4rem;
}

.comments-section-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 850;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.comment-submission-form-card {
    display: flex;
    flex-direction: column;
}

.comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.comment-input-text, .comment-textarea-msg {
    width: 100%;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 0.9rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.comment-input-text:focus, .comment-textarea-msg:focus {
    outline: none;
    border-color: var(--brand-cyan);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.05);
}

.comment-submit-btn-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    border: none;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.9rem 2.25rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 1.5rem;
    box-shadow: 0 6px 20px rgba(0, 91, 234, 0.15);
    position: relative;
    overflow: hidden;
}

.comment-submit-btn-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 91, 234, 0.22);
}

.comment-submit-btn-pill:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

/* Comment submission loading state spinner */
.comment-submit-btn-pill .btn-loader-circle {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: ctaLoaderRotate 0.8s linear infinite;
    position: absolute;
}

.comment-submit-btn-pill.loading-state-active .btn-text-normal {
    opacity: 0;
}

.comment-submit-btn-pill.loading-state-active .btn-loader-circle {
    display: block;
}

.comment-submit-error-shake {
    animation: submitErrorShake 0.4s ease;
}

/* Success Notice */
.comment-success-notice {
    display: none; /* hidden until submitted successfully */
    align-items: center;
    gap: 1.25rem;
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.15);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-success-notice.active {
    transform: translateY(0);
    opacity: 1;
}

.success-tick-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    flex-shrink: 0;
}

.success-notice-message {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: #065f46;
    line-height: 1.5;
}

/* Table of Contents Widget styling */
.widget-toc-container {
    background: #ffffff;
}

.toc-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.toc-link-item {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding-left: 1rem;
    transition: all 0.3s ease;
}

.toc-link-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toc-link-item.active {
    color: var(--brand-blue);
    font-weight: 800;
    transform: translateX(4px);
}

.toc-link-item.active::before {
    width: 5px;
    height: 12px;
    border-radius: 3px;
    background: var(--brand-gradient);
    box-shadow: 0 2px 6px rgba(0, 198, 251, 0.25);
}

/* Responsive adjustments for Detail Page */
@media (max-width: 1200px) {
    .blog-detail-article-column {
        padding: 0 !important;
        border-radius: 0 !important;
        margin-bottom: 0;
    }
    
    .article-share-footer-strip {
        margin: 2rem 0 0 0;
    }
    
    .comment-form-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 600px) {
    .blog-detail-badge-row {
        gap: 0.75rem;
    }
    
    .blog-detail-featured-frame {
        border-radius: 18px;
    }
    
    .blog-detail-article-column {
        padding: 0 !important;
    }
    
    .rich-text-content-wrapper blockquote {
        padding: 1.5rem;
        margin: 2rem 0;
        font-size: 1.1rem;
    }
    
    .article-takeaway-bento {
        padding: 1.5rem;
        margin: 2rem 0;
        border-radius: 18px;
    }
    
    .code-snippet-terminal {
        margin: 2rem 0;
        border-radius: 14px;
    }
    
    .code-snippet-terminal pre {
        padding: 1.25rem;
    }
    
    .code-snippet-terminal code {
        font-size: 0.88rem;
    }
    
    .article-share-footer-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.5rem 0;
        margin: 2.5rem 0;
    }
    
    .comment-submit-btn-pill {
        width: 100%;
    }
}

/* General Blog Card Link styling */
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-title a:hover {
    color: var(--brand-blue);
}

/* Blog Detail Page Layout */
.blog-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px; /* Content first (flexible), Sidebar second (fixed 320px) */
    gap: 3rem;
    margin-bottom: 0;
    align-items: start;
}

@media (max-width: 1400px) {
    .blog-detail-layout {
        grid-template-columns: 1fr 280px; /* Make sidebar narrower on smaller desktops to keep article normal */
        gap: 2rem;
    }
}

@media (max-width: 1200px) {
    .blog-detail-layout {
        grid-template-columns: 1fr; /* Collapses to stacked on all tablets and mobile devices */
        gap: 2.5rem;
    }
}

/* Additional mobile responsiveness overrides for Blog Detail Page */
@media (max-width: 480px) {
    .blog-author-meta-card {
        display: flex;
        align-items: center;
        padding: 0.6rem 1rem;
        border-radius: 20px;
        margin-bottom: 2rem;
        width: 100%;
        box-sizing: border-box;
    }
    
    .author-avatar {
        width: 36px;
        height: 36px;
    }
    
    .author-name {
        font-size: 0.88rem;
    }
    
    .author-role {
        font-size: 0.75rem;
    }

    .breadcrumb-current {
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blog-detail-main-title {
        margin-bottom: 1.25rem;
        line-height: 1.25;
    }

    .blog-detail-hero {
        padding-bottom: 3.5rem !important;
    }

    .sidebar-widget {
        padding: 1.25rem !important;
    }

    .sidebar-cta-widget {
        padding: 1.75rem 1.25rem !important;
    }
}

/* Rich Text responsive utilities */
.rich-text-content-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.rich-text-content-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    overflow-x: auto;
    display: block;
}

/* ==========================================================================
   Certificate Verification Portal Styles
   ========================================================================== */

.verify-console-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
    padding: 3rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.verify-console-card p {
    max-width: 100% !important;
    width: 100% !important;
}

.console-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
}

.console-glow.glow-blue {
    background: var(--brand-blue);
    top: -100px;
    left: -100px;
}

.console-glow.glow-cyan {
    background: var(--brand-cyan);
    bottom: -100px;
    right: -100px;
}

.console-inner-wrapper {
    position: relative;
    z-index: 2;
}

.verify-panel {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.verify-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.panel-headline {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.panel-instructions {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    text-align: center;
}

.verify-form-group {
    margin-bottom: 1.5rem;
}

.verify-input-wrapper {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 2px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    padding: 0 1.25rem;
    transition: all 0.3s ease;
}

.verify-input-wrapper:focus-within {
    border-color: var(--brand-cyan);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 198, 251, 0.12);
}

.verify-input-icon {
    color: var(--text-secondary);
    margin-right: 1rem;
}

.cert-input-box {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1.15rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    outline: none;
    text-transform: uppercase;
    text-align: center;
}

.cert-input-box::placeholder {
    color: #94a3b8;
    font-weight: 500;
    text-transform: none;
    text-align: center;
}

.verify-error-tooltip {
    display: none;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
    text-align: center;
}

.verify-error-tooltip.visible {
    display: block;
    animation: slideDownFade 0.3s ease forwards;
}

.verify-cta-wrapper {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.verify-action-submit {
    width: 230px;
    cursor: pointer;
}

.verify-action-submit .btn-text-pill {
    width: 176px;
}

.verify-action-submit:hover .btn-circle-arrow {
    transform: translateX(-186px) !important;
}

.verify-action-submit:hover .btn-text-pill {
    transform: translateX(54px) !important;
    background-position: right center !important;
}

/* Radar Scan Layout */
.radar-scan-box {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.radar-scanner-wheel {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(0, 198, 251, 0.18);
    background: rgba(0, 91, 234, 0.02);
    overflow: hidden;
}

.radar-sweep-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background: linear-gradient(45deg, rgba(0, 198, 251, 0.45) 0%, transparent 100%);
    transform-origin: top left;
    animation: radarScan 1.6s linear infinite;
}

.radar-center-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--brand-cyan);
    border-radius: 50%;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    box-shadow: 0 0 10px var(--brand-cyan);
}

.scanning-status-title {
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.scanning-logs-console {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.25rem;
    font-family: monospace;
    font-size: 0.85rem;
    color: #38bdf8;
    height: 140px;
    overflow-y: auto;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.logs-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.logs-feed-list li {
    display: flex;
    gap: 0.5rem;
    line-height: 1.4;
    animation: typeLog 0.2s ease forwards;
}

.log-indicator {
    color: #22c55e;
    font-weight: bold;
}

/* Success Badge Layout */
.result-badge-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(34, 197, 94, 0.05);
    border: 1px dashed rgba(34, 197, 94, 0.25);
    border-radius: 16px;
    margin-bottom: 2rem;
}

.verified-seal-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #22c55e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
    animation: pulseSeal 2s infinite;
    flex-shrink: 0;
}

.verified-stamp-label {
    display: flex;
    flex-direction: column;
}

.stamp-glow-text {
    font-size: 1rem;
    font-weight: 800;
    color: #16a34a;
    letter-spacing: 0.02em;
}

.stamp-sub-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* Error Badge Layout */
.error-badge-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px dashed rgba(239, 68, 68, 0.25);
    border-radius: 16px;
    margin-bottom: 2rem;
}

.error-seal-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ef4444;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
    flex-shrink: 0;
}

.error-stamp-label {
    display: flex;
    flex-direction: column;
}

.error-glow-text {
    font-size: 1rem;
    font-weight: 800;
    color: #dc2626;
    letter-spacing: 0.02em;
}

.error-sub-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.error-detail-para {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}

/* Student Records details */
.student-records-table {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.record-data-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.95rem;
}

.record-data-row:last-child {
    border-bottom: none;
}

.record-data-row:nth-child(even) {
    background: #f8fafc;
}

.record-data-label {
    font-weight: 700;
    color: var(--text-secondary);
}

.record-data-val {
    font-weight: 700;
    color: var(--text-primary);
}

.id-hash-style {
    font-family: monospace;
    color: var(--brand-blue);
    font-weight: 800;
}

.hash-truncate-style {
    font-family: monospace;
    color: #64748b;
    font-size: 0.85rem;
    word-break: break-all;
}

.status-active-badge {
    display: inline-block;
    justify-self: start;
    align-self: center;
    background: #22c55e;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

/* Buttons & Resets */
.back-reset-btn, .retry-action-btn {
    background: #f1f5f9;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 100px;
    padding: 0.85rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-reset-btn:hover, .retry-action-btn:hover {
    background: #e2e8f0;
    color: var(--text-primary);
}

.download-btn-style {
    cursor: pointer;
}

.download-btn-style .btn-text-pill {
    width: 200px;
}

.download-btn-style:hover .btn-circle-arrow {
    transform: translateX(-210px) !important;
}

.download-btn-style:hover .btn-text-pill {
    transform: translateX(54px) !important;
    background-position: right center !important;
}

.verify-info-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.verify-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

/* Keyframes */
@keyframes radarScan {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulseSeal {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.55);
    }
}

@keyframes typeLog {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .verify-console-card {
        padding: 2rem 1.25rem;
    }
    
    .record-data-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0.85rem 1rem;
    }
    
    .result-actions-strip {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    .back-reset-btn, .retry-action-btn {
        width: auto;
        min-width: 200px;
        text-align: center;
    }
}

/* Creative Verification Pillars Section */
.verify-info-section {
    padding: 0 0 5.5rem 0;
    background-color: #ffffff;
}

.verify-pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.verify-pillar-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.verify-pillar-card:hover {
    transform: translateY(-8px);
}

.verify-pillar-card.theme-cyan:hover {
    box-shadow: 0 20px 40px rgba(0, 198, 251, 0.1);
    border-color: rgba(0, 198, 251, 0.3);
}

.verify-pillar-card.theme-purple:hover {
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
}

.verify-pillar-card.theme-teal:hover {
    box-shadow: 0 20px 40px rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.3);
}

/* Card ambient glow overlays */
.pillar-glow-layer {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    top: -50px;
    left: -50px;
}

.verify-pillar-card:hover .pillar-glow-layer {
    opacity: 0.15;
}

.theme-cyan .pillar-glow-layer {
    background: #00c6fb;
}

.theme-purple .pillar-glow-layer {
    background: #8b5cf6;
}

.theme-teal .pillar-glow-layer {
    background: #14b8a6;
}

/* Translucent Outline Step Numbers */
.pillar-card-step {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(148, 163, 184, 0.18);
    transition: all 0.4s ease;
    user-select: none;
}

.verify-pillar-card:hover .pillar-card-step {
    -webkit-text-stroke-color: transparent;
}

.theme-cyan:hover .pillar-card-step {
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
    -webkit-background-clip: text;
}

.theme-purple:hover .pillar-card-step {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    -webkit-background-clip: text;
}

.theme-teal:hover .pillar-card-step {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    -webkit-background-clip: text;
}

/* Icon box styling and Y-axis rotation */
.verify-pillar-card .pillar-icon-box {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease;
}

.verify-pillar-card:hover .pillar-icon-box {
    transform: rotateY(180deg);
}

.theme-cyan .pillar-icon-box {
    background: rgba(0, 198, 251, 0.08);
    color: #005bea;
}

.theme-purple .pillar-icon-box {
    background: rgba(139, 92, 246, 0.08);
    color: #7c3aed;
}

.theme-teal .pillar-icon-box {
    background: rgba(20, 184, 166, 0.08);
    color: #0d9488;
}

/* Invert colors on hover */
.theme-cyan:hover .pillar-icon-box {
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
    color: #ffffff;
}

.theme-purple:hover .pillar-icon-box {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    color: #ffffff;
}

.theme-teal:hover .pillar-icon-box {
    background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
    color: #ffffff;
}

/* Typography styles */
.pillar-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.theme-cyan:hover .pillar-card-title {
    color: #005bea;
}

.theme-purple:hover .pillar-card-title {
    color: #7c3aed;
}

.theme-teal:hover .pillar-card-title {
    color: #0d9488;
}

.pillar-card-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* Verification search section & responsive page-level alignments */
.verify-search-section {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
    background-color: #ffffff;
}

@media (max-width: 768px) {
    .verify-search-section {
        padding-top: 3.5rem;
        padding-bottom: 1.5rem;
    }
    .verify-info-section {
        padding-bottom: 3.5rem;
    }
    .panel-headline {
        font-size: clamp(1.25rem, 4.5vw, 1.45rem);
    }
}

@media (max-width: 480px) {
    .verify-pillar-card {
        padding: 2rem 1.25rem;
    }
    .pillar-card-step {
        font-size: 2.25rem;
        top: 1rem;
        right: 1rem;
    }
    .verify-console-card {
        padding: 1.75rem 1rem;
    }
    .panel-instructions {
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Courses List Page Styles
   ========================================================================== */

.courses-list-section {
    padding: 5.5rem 0;
    background: #ffffff;
    position: relative;
}

.courses-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.courses-list-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.courses-list-filter-left {
    display: flex;
    align-items: center;
}

/* Search bar styling */
.course-search-wrapper {
    position: relative;
    width: 320px;
}

.course-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    pointer-events: none;
}

#course-search-input {
    width: 100%;
    height: 44px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 0 1rem 0 3rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

#course-search-input:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: #ffffff;
    box-shadow: 0 0 15px rgba(0, 91, 234, 0.06);
}

/* Courses Grid Layout */
.courses-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}

/* Override carousel constraints for grid cards */
.courses-grid-layout .course-slide-card {
    flex: none !important;
    width: 100% !important;
    height: 100%;
}

.course-list-card-wrapper {
    height: 100%;
}

/* No results state */
.no-courses-found {
    text-align: center;
    padding: 6rem 2rem;
    background: #f8fafc;
    border: 1px dashed var(--border-color);
    border-radius: 24px;
    max-width: 600px;
    margin: 2rem auto;
}

.no-courses-found.hide {
    display: none !important;
}

.no-courses-icon {
    font-size: 3rem;
    margin-bottom: 1.25rem;
    animation: pulseSearch 2s infinite;
}

.no-courses-found h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.no-courses-found p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.6;
}

@keyframes pulseSearch {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Responsive Grid and Filters */
@media (max-width: 1024px) {
    .courses-grid-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .courses-list-section {
        padding: 4rem 0;
    }
    
    .courses-list-filter-row {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 2.5rem;
    }
    
    .course-search-wrapper {
        width: 100%;
    }
    
    .courses-grid-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .courses-list-container {
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .courses-list-section {
        padding: 3rem 0;
    }
}

/* ==========================================================================
   Course Detail & LMS Page Styles
   ========================================================================== */

.course-detail-section {
    padding: 5.5rem 0;
    background: #f8fafc;
    position: relative;
}

.course-detail-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.course-detail-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
}

/* Category Badging */
.course-detail-badge-wrapper {
    display: inline-block;
    padding: 0.45rem 1.15rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.course-detail-badge-wrapper.dev {
    background: rgba(0, 198, 251, 0.1);
    color: #00c6fb;
    border: 1px solid rgba(0, 198, 251, 0.2);
}

.course-detail-badge-wrapper.design {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.course-detail-badge-wrapper.marketing {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

/* Hero Metadata block */
.course-hero-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #cbd5e1;
    align-items: center;
}

.hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hero-meta-item.badge-live {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.15rem 0.65rem;
    border-radius: 4px;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Detail Blocks */
.detail-main-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.detail-block-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
}

.detail-block-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.detail-sub-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.detail-block-desc {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 1.05rem;
}

/* Overview Checklist */
.overview-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.highlight-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.highlight-bullet {
    color: #22c55e;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.2;
}

.highlight-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* LMS Curriculum Accordion Styling */
.curriculum-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-module-item {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.accordion-module-item.active {
    border-color: rgba(0, 91, 234, 0.2);
    box-shadow: 0 12px 30px rgba(0, 91, 234, 0.04);
}

.accordion-module-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.accordion-module-header:hover {
    background: #f8fafc;
}

.accordion-module-header .header-left {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.module-number {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--brand-blue);
    background: rgba(0, 91, 234, 0.05);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.module-info {
    display: flex;
    flex-direction: column;
}

.module-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
}

.module-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    font-weight: 600;
}

.accordion-chevron-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accordion-module-item.active .accordion-chevron-icon {
    transform: rotate(180deg);
    color: var(--brand-blue);
}

.accordion-module-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    border-top: 1px solid transparent;
}

.accordion-module-item.active .accordion-module-body {
    max-height: 800px;
    border-top-color: var(--border-color);
}

.lesson-items-list {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
}

.lesson-item {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.lesson-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
    color: #ffffff;
    font-size: 0.65rem;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 91, 234, 0.2);
}

.lesson-title-text {
    line-height: 1.4;
}

/* Perks Grid Deck */
.perks-grid-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.perk-box {
    text-align: center;
    padding: 2rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.perk-box:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 198, 251, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
}

.perk-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.perk-box h4 {
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.perk-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* FAQ Accordion Styling */
.faq-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1rem;
}

.faq-accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
}

.faq-accordion-item.active {
    border-color: rgba(0, 91, 234, 0.15);
    box-shadow: 0 10px 20px rgba(0, 91, 234, 0.02);
}

.faq-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-chevron {
    transition: transform 0.3s ease;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-accordion-item.active .faq-chevron {
    transform: rotate(90deg);
    color: var(--brand-blue);
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f8fafc;
}

.faq-accordion-item.active .faq-body {
    max-height: 250px;
}

.faq-body p {
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Sidebar Column & Sticky Pricing Card */
.detail-sidebar-column {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 10;
}

.sticky-sidebar-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.025);
}

.sidebar-pricing-box {
    padding: 2.25rem 2rem;
    background: linear-gradient(135deg, rgba(0, 198, 251, 0.015) 0%, rgba(0, 91, 234, 0.015) 100%);
    border-bottom: 1px solid var(--border-color);
}

.pricing-badge-promo {
    display: inline-block;
    background: var(--brand-gradient);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 30px;
    margin-bottom: 0.85rem;
    letter-spacing: 0.05em;
}

.sidebar-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

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

.original-price {
    font-size: 1.25rem;
    color: var(--text-secondary);
    text-decoration: line-through;
}

.discount-percent {
    font-size: 0.85rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    align-self: center;
}

.pricing-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Sidebar Enquiry Form */
.sidebar-enquiry-box {
    padding: 2.25rem 2rem;
}

.enquiry-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.enquiry-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.sidebar-enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.enquiry-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.enquiry-input-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.enquiry-input-group input[type="text"],
.enquiry-input-group input[type="email"],
.enquiry-input-group input[type="tel"],
.enquiry-input-group textarea {
    width: 100%;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: #f8fafc;
    transition: all 0.3s ease;
}

.enquiry-input-group textarea {
    height: auto;
    padding: 0.75rem 1rem;
    resize: none;
}

.enquiry-input-group input:focus,
.enquiry-input-group textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 91, 234, 0.05);
}

.enquiry-input-group.invalid input,
.enquiry-input-group.invalid textarea {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.02) !important;
}

.enquiry-input-group.valid input,
.enquiry-input-group.valid textarea {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.02) !important;
}

/* Submission Button States */
.enquiry-submit-btn {
    height: 44px;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: none;
}

.enquiry-submit-btn.success-seal {
    background: #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25) !important;
}

.enquiry-submit-btn.error-shake {
    animation: submitErrorShake 0.5s ease;
}

/* Responsive Course Detail page */
@media (max-width: 1200px) {
    .course-detail-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .detail-sidebar-column {
        position: static;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .course-detail-section {
        padding: 4rem 0;
    }
    
    .detail-block-card {
        padding: 2rem 1.25rem;
    }
    
    .overview-highlights-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .perks-grid-deck {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .course-detail-container {
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .course-detail-section {
        padding: 3rem 0;
    }
    
    .sidebar-pricing-box,
    .sidebar-enquiry-box {
        padding: 1.75rem 1.25rem;
    }
}

/* ==========================================================================
   Program Overview Image Slider Styles
   ========================================================================== */

.overview-slider-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
    background: #0f172a;
}

.overview-slider-track {
    width: 100%;
    height: auto;
    position: relative;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.slider-slide.active {
    position: relative;
    opacity: 1;
    z-index: 2;
}

.slider-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3rem 1.5rem 1.5rem;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 60%, rgba(15, 23, 42, 0) 100%);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 3;
    font-family: var(--font-body);
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

.slider-btn:hover {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0, 91, 234, 0.3);
    transform: translateY(-50%) scale(1.08);
}

.slider-btn.prev-btn {
    left: 1.25rem;
}

.slider-btn.next-btn {
    right: 1.25rem;
}

.slider-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.65rem;
    z-index: 10;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.5rem 0.85rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.slider-dots .dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.slider-dots .dot.active {
    background: #ffffff;
    width: 20px;
    border-radius: 30px;
}

@media (max-width: 768px) {
    .overview-slider-wrapper {
        height: auto;
    }
    
    .about-page-title {
        font-size: 2.25rem !important;
        line-height: 1.25 !important;
    }
    
    .course-hero-meta {
        gap: 1rem;
        font-size: 0.85rem;
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .overview-slider-wrapper {
        height: auto;
    }
    
    .slider-btn {
        width: 36px;
        height: 36px;
    }
    
    .about-page-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    .about-page-subtitle {
        font-size: 0.95rem !important;
        margin-top: 1rem !important;
        line-height: 1.5 !important;
    }
    
    .accordion-module-header {
        padding: 1.15rem 0.85rem !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }
    
    .accordion-module-header .header-left {
        gap: 0.75rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .accordion-module-header .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    .module-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
    }
    
    .module-title {
        font-size: 0.9rem !important;
        line-height: 1.35 !important;
    }
    
    .module-meta {
        font-size: 0.75rem !important;
    }
    
    .module-duration {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
    }
    
    .accordion-chevron-icon svg {
        width: 10px !important;
        height: 6px !important;
    }
    
    .breadcrumb-wrapper {
        gap: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   Privacy Policy Page Style Rules
   ========================================================================== */
.toc-link {
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border-left: 2px solid transparent;
    padding-left: 0;
}

.toc-link:hover {
    padding-left: 6px;
    color: var(--brand-blue) !important;
}

.toc-link.active {
    border-left-color: var(--brand-blue) !important;
    padding-left: 8px;
    color: var(--brand-blue) !important;
}

@media (max-width: 992px) {
    .privacy-layout-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
    
    .privacy-sidebar {
        position: static !important;
        width: 100% !important;
        margin-bottom: 1.5rem;
    }
    
    .privacy-main-content > div {
        padding: 2rem 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .privacy-rights-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
}

/* ==========================================================================
   Admin Portal Split-Screen Layout & Dashboard Styles
   ========================================================================== */
.admin-split-layout {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Left Panel - Dark futuristic branding */
.admin-branding-panel {
    width: 60%;
    height: 100%;
    background: linear-gradient(rgba(11, 15, 25, 0.8), rgba(11, 15, 25, 0.8)),
                url('../images/admin_branding_bg.jpg') no-repeat center center / cover;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.admin-branding-panel .tech-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(30, 41, 59, 0.4) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(30, 41, 59, 0.4) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

/* Background floating animated bubbles for branding panel */
.admin-branding-panel .hero-bg-bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.admin-branding-panel .bubble-1 {
    top: 5%;
    left: 5%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.3) 0%, transparent 75%);
    filter: blur(50px);
    animation: float-bubble-clockwise 25s ease-in-out infinite;
}

.admin-branding-panel .bubble-2 {
    bottom: 10%;
    right: 5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.25) 0%, transparent 75%);
    filter: blur(55px);
    animation: float-bubble-counter 30s ease-in-out infinite;
}

.admin-branding-panel .bubble-3 {
    top: 40%;
    left: 10%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(0, 198, 251, 0.2) 0%, transparent 80%);
    filter: blur(40px);
    animation: float-bubble-diagonal 22s ease-in-out infinite;
}

.admin-branding-panel .bubble-4 {
    top: 15%;
    right: 15%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0, 91, 234, 0.2) 0%, transparent 80%);
    filter: blur(45px);
    animation: float-bubble-bounce 26s ease-in-out infinite;
}

.branding-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
}

.branding-logo {
    display: block;
    margin-bottom: auto;
}

.branding-logo img {
    height: 50px;
    object-fit: contain;
}

.branding-text-block {
    margin: 4rem 0;
}

.badge-pill-neon {
    display: inline-block;
    background: rgba(0, 198, 251, 0.1);
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
    padding: 0.35rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 50px;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.branding-title {
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.branding-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0;
}

.branding-footer {
    margin-top: auto;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
}

/* Right Panel - Clean Elegant Form */
.admin-form-panel {
    width: 40%;
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 3rem;
    border-left: 1px solid var(--border-color);
}

.form-card-container {
    width: 100%;
    max-width: 380px;
}

.mobile-logo-wrapper {
    display: none;
}

.form-header {
    margin-bottom: 2rem;
}

.form-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 1.25rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.form-input-field {
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.85rem 1rem 0.85rem 3rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.form-input-field:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 198, 251, 0.08);
}

.form-input-field.has-error {
    border-color: #ef4444 !important;
    background: #fdf2f2;
}

.form-input-field:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.password-toggle-btn {
    position: absolute;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
}

.validation-tooltip-error {
    font-size: 0.8rem;
    color: #ef4444;
    font-weight: 600;
    margin-top: 0.25rem;
}

.form-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkbox-label-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox-input {
    display: none;
}

.checkbox-custom-box {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #f8fafc;
    position: relative;
    transition: all 0.2s ease;
}

.custom-checkbox-input:checked + .checkbox-custom-box {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
}

.custom-checkbox-input:checked + .checkbox-custom-box::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
}

.checkbox-label-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.lockout-warning-badge {
    font-size: 0.75rem;
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
}

.admin-submit-action-btn {
    background: var(--brand-blue);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.95rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.2);
}

.admin-submit-action-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 198, 251, 0.35);
}

.admin-submit-action-btn:disabled {
    background: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.alert-box {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.alert-warning {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #92400e;
}

.alert-error {
    background: #fdf2f2;
    border: 1px solid #fde8e8;
    color: #9b1c1c;
}

.alert-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Spinner Icon */
.spinner-icon {
    animation: rotate 2s linear infinite;
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.spinner-icon .path {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Responsive login screen */
@media (max-width: 992px) {
    .admin-split-layout {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        flex-direction: column;
    }
    .admin-branding-panel {
        display: none;
    }
    .admin-form-panel {
        width: 100%;
        height: auto;
        min-height: 100vh;
        border-left: none;
        padding: 3rem 1.25rem;
    }
    .form-card-container {
        width: 100%;
        max-width: 100%;
        padding: 0 0.5rem;
    }
    .mobile-logo-wrapper {
        display: block;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .mobile-logo {
        height: 45px;
        object-fit: contain;
    }
}

/* ==========================================================================
   Admin Dashboard Console Layout Styles
   ========================================================================== */
.admin-dashboard-layout {
    display: flex;
    min-height: 100vh;
    background: #f4f7f6;
    width: 100%;
}

/* Sidebar navigation styles */
.admin-sidebar {
    width: 260px;
    height: 100vh;
    background: #0f172a;
    border-right: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 150;
}

/* Creative Custom Scrollbar for Admin Sidebar */
.admin-sidebar::-webkit-scrollbar {
    width: 5px !important;
}
.admin-sidebar::-webkit-scrollbar-track {
    background: #0f172a !important;
}
.admin-sidebar::-webkit-scrollbar-thumb {
    background: #1e293b !important;
    border-radius: 99px !important;
}
.admin-sidebar::-webkit-scrollbar-thumb:hover {
    background: #005bea !important;
}

.sidebar-brand {
    padding: 2.25rem 2rem;
    border-bottom: 1px solid #1e293b;
}

.sidebar-brand img {
    height: 36px;
    object-fit: contain;
}

.sidebar-nav-menu {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.sidebar-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-nav-link.active {
    color: #ffffff;
    background: var(--brand-blue);
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.15);
}

.sidebar-footer-info {
    padding: 1.5rem 2rem;
    border-top: 1px solid #1e293b;
    font-size: 0.75rem;
    color: #64748b;
    letter-spacing: 0.05em;
    font-weight: 800;
}

/* Dashboard main container */
.admin-main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    margin-left: 260px;
}

/* Dashboard Top Nav */
.admin-top-nav {
    height: 70px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5rem;
    position: fixed;
    top: 0;
    left: 260px;
    width: calc(100% - 260px);
    z-index: 100;
    flex-shrink: 0;
}

.system-status-indicator {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-ping {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    position: relative;
}

.status-ping::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #22c55e;
    animation: ping 1.5s infinite;
}

@keyframes ping {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.session-timer-pill {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.admin-profile-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-name {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.admin-logout-trigger-btn {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.admin-logout-trigger-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Dashboard main contents area */
.admin-dashboard-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 70px;
}

/* Welcome Banner card */
.admin-welcome-banner {
    position: relative;
    background: linear-gradient(135deg, #005bea 0%, #00c6fb 50%, #7928ca 100%);
    border-radius: 20px;
    padding: 3rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 91, 234, 0.25);
}

.admin-welcome-banner .banner-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.2;
}

.admin-welcome-banner .glow-blue {
    width: 250px;
    height: 250px;
    background: #ffffff;
    top: -50px;
    left: -50px;
}

.admin-welcome-banner .glow-cyan {
    width: 250px;
    height: 250px;
    background: #ffffff;
    bottom: -50px;
    right: -50px;
}

.admin-welcome-banner .banner-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.banner-inner-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.badge-accent {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.welcome-headline {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.welcome-subtext {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* Stats Cards Grid */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.admin-stat-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: var(--brand-blue);
}

.admin-stat-card .card-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.05;
    top: -20px;
    right: -20px;
}

.admin-stat-card .glow-stat-1 { background: var(--brand-blue); }
.admin-stat-card .glow-stat-2 { background: #22c55e; }
.admin-stat-card .glow-stat-3 { background: #a855f7; }

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stat-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.stat-meta-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Console logs card section */
.admin-logs-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.02);
}

/* Background floating animated bubbles for dashboard main container */
.admin-main-container .dashboard-bg-bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}

.admin-main-container .db-bubble-1 {
    top: 20%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--brand-blue) 0%, transparent 70%);
    filter: blur(80px);
    animation: float-bubble-clockwise 28s ease-in-out infinite;
}

.admin-main-container .db-bubble-2 {
    bottom: 10%;
    right: 10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #a855f7 0%, transparent 70%);
    filter: blur(90px);
    animation: float-bubble-counter 35s ease-in-out infinite;
}

.logs-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.logs-table-wrapper {
    overflow-x: auto;
}

.logs-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.logs-data-table th {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logs-data-table td {
    padding: 1.15rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.logs-data-table tr:last-child td {
    border-bottom: none;
}

.log-event-name {
    font-weight: 600;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.status-badge.success {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.active {
    background: #e0f2fe;
    color: #0369a1;
}

/* Offcanvas flyout toggle elements - Default hidden on desktop */
.mobile-sidebar-toggle-btn {
    display: none;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 1rem;
    transition: all 0.2s ease;
}

.mobile-sidebar-toggle-btn:hover {
    color: var(--text-primary);
    background: #f1f5f9;
}

.sidebar-close-btn {
    display: none;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.sidebar-close-btn:hover {
    color: #ffffff;
}

.sidebar-offcanvas-backdrop {
    display: none;
}

/* Responsive Dashboard layout */
@media (max-width: 992px) {
    .admin-dashboard-layout {
        flex-direction: column;
        min-height: 100vh;
    }
    
    .sidebar-offcanvas-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(4px);
        z-index: 190;
    }

    .admin-sidebar {
        width: 260px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid #1e293b;
        border-bottom: none;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }
    
    .sidebar-brand {
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar-close-btn {
        display: block;
    }
    
    .sidebar-nav-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 2rem 1rem;
        gap: 0.5rem;
    }
    
    .sidebar-nav-link {
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .sidebar-footer-info {
        display: block;
        margin-top: auto;
    }

    .admin-main-container {
        margin-left: 0;
    }

    .mobile-sidebar-toggle-btn {
        display: flex;
    }

    .admin-top-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 1.5rem;
        z-index: 100;
    }

    .timer-label {
        display: none;
    }

    .admin-dashboard-content {
        margin-top: 70px;
        padding: 1.5rem;
    }
    
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Admin Custom Capctha Styling
   ========================================================================== */
.captcha-container {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    position: relative;
    overflow: hidden;
}

.captcha-code-box {
    background: #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    position: relative;
    overflow: hidden;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 42px;
}

.captcha-text-value {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: #1e293b;
    transform: rotate(-3deg);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.captcha-distort-line {
    position: absolute;
    height: 2px;
    background: rgba(0, 0, 0, 0.15);
    left: 0;
    width: 100%;
    pointer-events: none;
}

.captcha-distort-line.distort-1 {
    top: 35%;
    transform: rotate(7deg);
}

.captcha-distort-line.distort-2 {
    top: 65%;
    transform: rotate(-8deg);
}

.captcha-refresh-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.captcha-refresh-btn:hover {
    color: var(--text-primary);
    background: #f1f5f9;
    border-color: var(--text-secondary);
}

.captcha-input-row {
    margin-top: 0.5rem;
}

.captcha-timer-bar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.captcha-timer-bar-wrapper .captcha-timer-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.captcha-timer-progress {
    height: 4px;
    background: var(--brand-blue);
    border-radius: 20px;
    width: 100%;
    margin-right: 1rem;
    transform-origin: left center;
}

@keyframes captcha-progress-decay {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

/* ==========================================================================
   Admin Profile Dropdown Menu Styling
   ========================================================================== */
.profile-avatar-trigger {
    background: none;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.profile-avatar-trigger:hover {
    border-color: var(--brand-blue);
    transform: scale(1.05);
}

.profile-avatar-trigger .profile-avatar {
    width: 32px;
    height: 32px;
    background: var(--brand-blue);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
}



.chevron-icon {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.chevron-icon.rotated {
    transform: rotate(180deg);
}

/* Dropdown Menu Container */
.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 220px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    z-index: 200;
    padding: 0.5rem 0;
}

.dropdown-header {
    padding: 0.75rem 1rem;
    text-align: left;
}

.dropdown-header .header-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dropdown-header .header-email {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0.5rem 0;
}

.dropdown-nav {
    display: flex;
    flex-direction: column;
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    text-align: left;
}

.dropdown-link:hover {
    background: #f8fafc;
    color: var(--text-primary);
}

.dropdown-link-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.dropdown-logout-btn {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-logout-btn:hover {
    background: #fdf2f2;
}

/* ==========================================================================
   Admin Enquiries Page & Detail Drawer Styling
   ========================================================================== */
.lead-filter-tabs .tab-btn:hover {
    color: #0f172a !important;
}

@keyframes drawer-slide-in {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

.details-drawer {
    animation: drawer-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay {
    backdrop-filter: blur(4px);
    transition: backdrop-filter 0.3s ease;
}

/* Creative Action Buttons */
.btn-action-creative-details {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 198, 251, 0.25);
    background: rgba(0, 198, 251, 0.06);
    color: var(--brand-blue);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 198, 251, 0.04);
}

.btn-action-creative-details:hover {
    background: var(--brand-blue);
    color: #ffffff;
    border-color: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.25);
}

.btn-action-creative-delete {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.04);
}

.btn-action-creative-delete:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   Admin Enquiries Page Responsiveness Additions
   ========================================================================== */

/* Fluid Stats Grid Adjustments */
@media (max-width: 992px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem;
    }
    .admin-stats-grid .admin-stat-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .admin-stats-grid .admin-stat-card:last-child {
        grid-column: span 1;
    }
}

/* Table Actions Row & Filter/Search Responsiveness */
.table-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.table-search-wrapper {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.table-search-input {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.lead-filter-tabs {
    display: flex;
    gap: 0.5rem;
    background: #f1f5f9;
    padding: 0.35rem;
    border-radius: 10px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.lead-filter-tabs::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

@media (max-width: 768px) {
    .table-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .table-search-wrapper {
        width: 100%;
    }
}

/* Card-Based Table Styling for Mobile Devices */
@media (max-width: 768px) {
    .logs-table-wrapper {
        border: none;
    }
    
    .logs-data-table thead {
        display: none; /* Hide table headers */
    }
    
    .logs-data-table, 
    .logs-data-table tbody, 
    .logs-data-table tr, 
    .logs-data-table td {
        display: block;
        width: 100%;
    }
    
    .logs-data-table tr {
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
        transition: transform 0.2s ease;
    }
    
    .logs-data-table tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
    }
    
    .logs-data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #f1f5f9;
        text-align: right;
    }
    
    .logs-data-table td:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
        justify-content: flex-end;
    }
    
    /* Add labels on mobile */
    .logs-data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.75rem;
        text-align: left;
        margin-right: 1.5rem;
        flex-shrink: 0;
    }
}

/* Details Drawer & Modals Responsiveness */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    transition: backdrop-filter 0.3s ease;
}

.details-drawer {
    width: 500px;
    max-width: 100%;
    background: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 35px rgba(15, 23, 42, 0.15);
    animation: drawer-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.utm-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 1rem;
}

.confirm-delete-modal {
    background: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    width: 400px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15);
}

@media (max-width: 576px) {
    .admin-dashboard-content {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .admin-logs-card {
        padding: 1rem;
    }
    
    .enquiries-header-row h1 {
        font-size: 1.5rem !important;
    }
    
    .enquiries-header-row p {
        font-size: 0.8rem !important;
    }

    .drawer-body {
        padding: 1.25rem;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .utm-details-grid {
        grid-template-columns: 1fr;
    }
    
    .confirm-delete-modal {
        padding: 1.5rem;
    }
    
    .logs-data-table tr {
        padding: 1rem;
    }
}

/* Pagination Styling */
.custom-pagination {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    user-select: none;
    outline: none;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: rgba(0, 198, 251, 0.03);
    transform: translateY(-1px);
}

.pagination-btn.active {
    background: var(--brand-blue);
    color: #ffffff;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(0, 198, 251, 0.2);
    cursor: default;
}

.pagination-btn:disabled:not(.active) {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8fafc;
}

@media (max-width: 576px) {
    .pagination-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }
    .custom-pagination {
        justify-content: center;
    }
    .pagination-info {
        text-align: center;
    }
}

/* Custom Wide Modal Styles for Add/Edit Certificate */
.cert-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    z-index: 350;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.cert-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 800px;
    max-width: 100%;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-zoom-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-zoom-in {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.cert-modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.cert-modal-header h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.cert-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.cert-modal-close-btn:hover {
    color: var(--text-primary);
}

.cert-modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: 70vh;
}

.cert-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cert-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cert-form-group-full {
    grid-column: span 2;
}

.cert-form-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cert-form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.cert-form-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.15);
}

.cert-form-error {
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.cert-hash-input-wrapper {
    display: flex;
    gap: 0.5rem;
}

.cert-hash-input-wrapper input {
    flex-grow: 1;
}

.cert-hash-gen-btn {
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cert-hash-gen-btn:hover {
    background: #e2e8f0;
    border-color: var(--text-secondary);
}

.cert-modal-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.status-badge.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.hash-truncate-style {
    font-family: monospace;
    font-size: 0.8rem;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hash-truncate-style:hover {
    max-width: none;
    position: relative;
    z-index: 10;
    background: #ffffff;
}

@media (max-width: 768px) {
    .cert-form-grid {
        grid-template-columns: 1fr;
    }
    .cert-form-group-full {
        grid-column: span 1;
    }
    .cert-modal-card {
        width: 100%;
        margin: 0;
    }
    .cert-modal-body {
        padding: 1.25rem;
    }
}

/* Google-style & Modern Form Inputs for Certificates Admin Modal */
.google-input-wrapper, .google-select-wrapper {
    position: relative;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
}

.google-input-label {
    position: absolute;
    left: 12px;
    top: -8px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 2;
}

.google-text-input, .google-date-input, .google-select-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.google-text-input:focus, .google-date-input:focus, .google-select-input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(0, 198, 251, 0.12);
}

.google-text-input:focus ~ .google-input-label,
.google-date-input:focus ~ .google-input-label,
.google-select-input:focus ~ .google-input-label {
    color: var(--brand-blue);
}

/* Custom Styled Select */
.google-select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
}

.google-select-chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.google-select-input:focus ~ .google-select-chevron {
    transform: translateY(-50%) rotate(180deg);
    color: var(--brand-blue);
}

/* Google Date Calendar Icon style override */
.google-date-input {
    position: relative;
    cursor: pointer;
    padding-right: 2.5rem;
}

.google-date-input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 3;
}

.google-date-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 1.1rem;
    z-index: 1;
}

.google-date-input:focus ~ .google-date-icon {
    color: var(--brand-blue);
}

/* Sidebar Dropdown Menu Styles */
.sidebar-dropdown-wrapper {
    display: flex;
    flex-direction: column;
}

.sidebar-dropdown-trigger {
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    justify-content: space-between;
    box-sizing: border-box;
}

.sidebar-dropdown-trigger .dropdown-chevron {
    color: #64748b;
    transition: transform 0.2s ease, color 0.2s ease;
}

.sidebar-dropdown-trigger:hover .dropdown-chevron {
    color: #ffffff;
}

.sidebar-dropdown-trigger .dropdown-chevron.rotated {
    transform: rotate(180deg);
}

.sidebar-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 2.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

.submenu-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.submenu-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
}

.submenu-link.active {
    color: #00c6fb;
    background: rgba(0, 198, 251, 0.05);
}

.submenu-dot {
    font-size: 1.1rem;
    line-height: 1;
}

/* WordPress-style Gutenberg Editor Layout */
.editor-back-bar {
    margin-bottom: 1.5rem;
}

.back-navigation-link {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.back-navigation-link:hover {
    color: var(--brand-blue);
}

.gutenberg-editor-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .gutenberg-editor-grid {
        grid-template-columns: 7fr 3fr;
    }
}

.editor-primary-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.editor-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 90px;
}

/* Title Input */
.editor-title-container {
    width: 100%;
}

.editor-title-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 2.25rem;
    font-weight: 800;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s ease;
    border-radius: 0;
}

.editor-title-input::placeholder {
    color: #cbd5e1;
}

.editor-title-input:focus {
    border-color: var(--brand-blue);
}

/* Permalink Row */
.editor-permalink-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: -0.5rem;
    flex-wrap: wrap;
}

.permalink-label {
    font-weight: 700;
}

.permalink-domain {
    color: #94a3b8;
}

.editor-slug-input {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    color: #475569;
    background: #f8fafc;
    width: auto;
    max-width: 300px;
    outline: none;
}

.editor-slug-input:focus {
    border-color: var(--brand-blue);
    background: #ffffff;
}

/* Card Panels */
.editor-card-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.card-panel-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.card-panel-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.editor-textarea-control {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    color: #334155;
    background: #ffffff;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.editor-textarea-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.1);
}

/* Content Panel & Toolbar */
.editor-content-panel {
    padding-bottom: 1.5rem;
}

.editor-toolbar-helpers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

.toolbar-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.editor-content-textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    font-size: 1rem;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    font-family: 'Inter', ui-sans-serif, system-ui;
    line-height: 1.6;
    transition: all 0.2s ease;
}

.editor-content-textarea:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.1);
}

/* Sidebar Widgets */
.sidebar-widget-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.widget-card-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
}

.widget-card-body {
    padding: 1.25rem;
}

.widget-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.widget-info-row .info-label {
    color: #64748b;
    font-weight: 600;
}

.widget-action-buttons-wrapper {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
    padding-top: 1.25rem;
}

.widget-action-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    border: none;
}

.widget-action-btn.secondary-outline {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.widget-action-btn.secondary-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.widget-action-btn.primary-gradient {
    background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 198, 251, 0.2);
}

.widget-action-btn.primary-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 198, 251, 0.3);
}

/* Category widget list */
.widget-categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.category-radio-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.custom-radio-input {
    display: none;
}

.radio-custom-dot {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-radio-input:checked ~ .radio-custom-dot {
    border-color: var(--brand-blue);
}

.custom-radio-input:checked ~ .radio-custom-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--brand-blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-label-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    transition: color 0.2s ease;
}

.custom-radio-input:checked ~ .radio-label-text {
    color: #0f172a;
    font-weight: 700;
}

/* Image Dropzone */
.image-uploader-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 2rem 1rem;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.image-uploader-dropzone:hover, 
.image-uploader-dropzone.drag-active {
    border-color: var(--brand-blue);
    background: rgba(0, 198, 251, 0.02);
}

.hidden-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.dropzone-inner-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.upload-badge-icon {
    font-size: 2rem;
}

.upload-main-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

.upload-sub-text {
    font-size: 0.75rem;
    color: #94a3b8;
}

.featured-image-preview-box {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.preview-img-element {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.remove-preview-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(239, 68, 68, 0.9);
    backdrop-filter: blur(4px);
    border: none;
    color: #ffffff;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.remove-preview-btn:hover {
    background: rgba(220, 38, 38, 1);
}

/* Inline blog images inside body text */
.blog-inline-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    display: block;
}


/* --- Extracted Premium Admin Console Styles --- */

        /* 1. Analytics Overview Cards Grid */
        .stats-overview-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
            gap: 1.5rem !important;
            margin-bottom: 2rem !important;
        }

        .metric-glass-card {
            position: relative !important;
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            border-radius: 16px !important;
            padding: 1.5rem !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
            overflow: hidden !important;
            transition: all 0.3s ease !important;
            box-sizing: border-box !important;
        }
        
        .metric-glass-card:hover {
            transform: translateY(-3px) !important;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
        }

        .metric-glass-card::before {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 4px !important;
            height: 100% !important;
        }
        
        .metric-glass-card.gradient-blue::before {
            background: linear-gradient(to bottom, #00c6fb, #005bea) !important;
        }
        
        .metric-glass-card.gradient-green::before {
            background: linear-gradient(to bottom, #10b981, #059669) !important;
        }
        
        .metric-glass-card.gradient-orange::before {
            background: linear-gradient(to bottom, #f97316, #ea580c) !important;
        }

        .metric-label {
            font-size: 0.85rem !important;
            font-weight: 700 !important;
            color: #64748b !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            display: block !important;
            margin-bottom: 0.5rem !important;
        }
        
        .metric-numeric-val {
            font-size: 2.25rem !important;
            font-weight: 850 !important;
            color: #1e293b !important;
            margin: 0 !important;
            line-height: 1 !important;
        }
        
        .metric-visual-icon {
            font-size: 2rem !important;
            opacity: 0.8 !important;
            background: rgba(241, 245, 249, 0.8) !important;
            width: 54px !important;
            height: 54px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 12px !important;
            transition: all 0.3s ease !important;
        }
        
        .metric-glass-card:hover .metric-visual-icon {
            transform: scale(1.1) rotate(5deg) !important;
        }

        /* 2. Main Table Container */
        .table-glass-container {
            background: rgba(255, 255, 255, 0.85) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            border-radius: 16px !important;
            padding: 2rem !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
            margin-bottom: 2rem !important;
            box-sizing: border-box !important;
        }

        /* 3. Table Control Header */
        .table-control-header {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            gap: 1.5rem !important;
            margin-bottom: 1.5rem !important;
            flex-wrap: wrap !important;
            box-sizing: border-box !important;
        }
        
        .header-left-actions {
            display: flex !important;
            align-items: center !important;
            gap: 1rem !important;
            flex-wrap: wrap !important;
            flex-grow: 1 !important;
            box-sizing: border-box !important;
        }

        /* 4. Search input Wrapper & Search control */
        .search-input-field-wrapper {
            position: relative !important;
            width: 320px !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
        
        .search-input-field-wrapper .field-icon {
            position: absolute !important;
            left: 1rem !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            color: #94a3b8 !important;
            pointer-events: none !important;
            font-size: 0.9rem !important;
        }
        
        .search-input-control {
            width: 100% !important;
            padding: 0.65rem 1rem 0.65rem 2.5rem !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 10px !important;
            font-size: 0.875rem !important;
            color: #1e293b !important;
            background: #ffffff !important;
            outline: none !important;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
            transition: all 0.25s ease !important;
            box-sizing: border-box !important;
        }
        
        .search-input-control:focus {
            border-color: #00c6fb !important;
            box-shadow: 0 0 0 4px rgba(0, 198, 251, 0.15) !important;
        }

        /* 5. Category & Status filter dropdowns */
        .filter-dropdown-select-wrapper {
            position: relative !important;
            min-width: 160px !important;
            box-sizing: border-box !important;
        }
        
        .filter-select-element {
            width: 100% !important;
            padding: 0.65rem 2rem 0.65rem 1rem !important;
            border: 1px solid #cbd5e1 !important;
            border-radius: 10px !important;
            font-size: 0.875rem !important;
            color: #1e293b !important;
            background: #ffffff !important;
            outline: none !important;
            cursor: pointer !important;
            appearance: none !important;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
            background-repeat: no-repeat !important;
            background-position: right 0.75rem center !important;
            background-size: 16px !important;
            transition: all 0.25s ease !important;
            box-sizing: border-box !important;
        }
        
        .filter-select-element:focus {
            border-color: #00c6fb !important;
            box-shadow: 0 0 0 4px rgba(0, 198, 251, 0.15) !important;
        }

        /* 6. Add New Post Button */
        .action-trigger-btn.primary-solid {
            background: linear-gradient(135deg, #00c6fb, #005bea) !important;
            color: white !important;
            border: none !important;
            border-radius: 10px !important;
            padding: 0.65rem 1.25rem !important;
            font-size: 0.875rem !important;
            font-weight: 700 !important;
            text-decoration: none !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            box-shadow: 0 4px 12px rgba(0, 91, 234, 0.25) !important;
            transition: all 0.3s ease !important;
            box-sizing: border-box !important;
        }
        
        .action-trigger-btn.primary-solid:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 16px rgba(0, 91, 234, 0.35) !important;
            color: white !important;
        }
        
        .btn-icon-plus {
            font-size: 1.1rem !important;
            font-weight: 700 !important;
        }

        /* 7. Table Element Styling */
        .table-responsive-wrapper {
            width: 100% !important;
            overflow: visible !important;
            margin-top: 1rem !important;
            border-radius: 12px !important;
            border: 1px solid #e2e8f0 !important;
            box-sizing: border-box !important;
        }
        
        .dashboard-custom-data-table {
            width: 100% !important;
            border-collapse: collapse !important;
            text-align: left !important;
            box-sizing: border-box !important;
        }
        
        .dashboard-custom-data-table th {
            background: #f8fafc !important;
            padding: 1rem 1.25rem !important;
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            color: #475569 !important;
            border-bottom: 1px solid #e2e8f0 !important;
            box-sizing: border-box !important;
        }
        
        .dashboard-custom-data-table td {
            padding: 1.25rem !important;
            font-size: 0.875rem !important;
            color: #334155 !important;
            border-bottom: 1px solid #f1f5f9 !important;
            vertical-align: middle !important;
            box-sizing: border-box !important;
        }
        
        .dashboard-custom-data-table tr:last-child td {
            border-bottom: none !important;
        }
        
        .dashboard-custom-data-table tr:hover td {
            background: #f8fafc !important;
        }

        /* 8. Row Action Buttons */
        .row-action-btn {
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.35rem !important;
            padding: 0.45rem 0.75rem !important;
            font-size: 0.8rem !important;
            font-weight: 600 !important;
            border-radius: 6px !important;
            text-decoration: none !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            border: none !important;
            box-sizing: border-box !important;
        }
        
        .row-action-btn.edit-action {
            background: rgba(0, 198, 251, 0.08) !important;
            color: #00c6fb !important;
        }
        
        .row-action-btn.edit-action:hover {
            background: #00c6fb !important;
            color: white !important;
        }
        
        .row-action-btn.delete-action {
            background: rgba(239, 68, 68, 0.08) !important;
            color: #ef4444 !important;
        }
        
        .row-action-btn.delete-action:hover {
            background: #ef4444 !important;
            color: white !important;
        }

        /* 9. Custom Badges */
        .custom-badge {
            display: inline-flex !important;
            align-items: center !important;
            padding: 0.25rem 0.6rem !important;
            font-size: 0.75rem !important;
            font-weight: 600 !important;
            border-radius: 12px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.02em !important;
            box-sizing: border-box !important;
        }
        
        .custom-badge.status-active {
            background: rgba(16, 185, 129, 0.12) !important;
            color: #10b981 !important;
        }
        
        .custom-badge.status-revoked {
            background: rgba(148, 163, 184, 0.12) !important;
            color: #64748b !important;
        }

        /* 10. Pagination Footer */
        .table-custom-pagination-footer {
            margin-top: 1.5rem !important;
            display: flex !important;
            justify-content: flex-end !important;
            align-items: center !important;
            box-sizing: border-box !important;
        }

        /* 11. Confirm Delete Modal Styles */
        .modal-backdrop-layer {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(15, 23, 42, 0.4) !important;
            backdrop-filter: blur(8px) !important;
            z-index: 9999 !important;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
        }
        
        .modal-backdrop-layer.active {
            opacity: 1 !important;
            pointer-events: auto !important;
        }
        
        .modern-modal-dialog {
            background: #ffffff !important;
            border-radius: 16px !important;
            width: 100% !important;
            max-width: 480px !important;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
            transform: scale(0.9) !important;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }
        
        .modern-modal-dialog.active {
            transform: scale(1) !important;
        }
        
        .modal-warning-icon-badge {
            font-size: 2.5rem !important;
            margin-bottom: 1rem !important;
            display: inline-block !important;
        }
        
        .modal-alert-action-title {
            font-size: 1.25rem !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            margin: 0 0 0.5rem 0 !important;
        }
        
        .modal-alert-action-description {
            font-size: 0.875rem !important;
            color: #64748b !important;
            margin: 0 !important;
            line-height: 1.5 !important;
        }
        
        .modal-dismiss-btn {
            background: #f1f5f9 !important;
            color: #475569 !important;
            border: none !important;
            padding: 0.65rem 1.5rem !important;
            font-size: 0.875rem !important;
            font-weight: 700 !important;
            border-radius: 10px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            box-sizing: border-box !important;
        }
        
        .modal-dismiss-btn:hover {
            background: #e2e8f0 !important;
            color: #1e293b !important;
        }
        
        .action-trigger-btn.delete-solid {
            background: #ef4444 !important;
            color: #ffffff !important;
            border: none !important;
            padding: 0.65rem 1.5rem !important;
            font-size: 0.875rem !important;
            font-weight: 700 !important;
            border-radius: 10px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            box-sizing: border-box !important;
        }
        
        .action-trigger-btn.delete-solid:hover {
            background: #dc2626 !important;
        }

        /* 12. Primary and Secondary Text overrides for table rows */
        .data-primary-text {
            font-size: 0.85rem !important;
            font-weight: 500 !important;
            color: #1e293b !important;
        }
        
        .data-secondary-subtext {
            font-size: 0.72rem !important;
            color: #64748b !important;
            font-weight: 400 !important;
        }

        /* 13. Three Dots Row Actions Dropdown */
        .three-dots-trigger-btn {
            background: transparent !important;
            border: 1px solid #e2e8f0 !important;
            color: #64748b !important;
            width: 32px !important;
            height: 32px !important;
            border-radius: 50% !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            font-size: 1.1rem !important;
            line-height: 1 !important;
            padding: 0 0 4px 0 !important;
            transition: all 0.2s ease !important;
            outline: none !important;
            box-sizing: border-box !important;
        }

        .three-dots-trigger-btn:hover,
        .three-dots-trigger-btn:focus {
            background: #f1f5f9 !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }

        .row-actions-dropdown-menu {
            position: absolute !important;
            right: 0 !important;
            top: calc(100% + 5px) !important;
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08) !important;
            z-index: 100 !important;
            min-width: 140px !important;
            padding: 0.5rem !important;
            box-sizing: border-box !important;
        }

        .dropdown-menu-item {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            padding: 0.5rem 0.75rem !important;
            font-size: 0.8rem !important;
            font-weight: 500 !important;
            color: #475569 !important;
            text-decoration: none !important;
            border: none !important;
            background: transparent !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
            text-align: left !important;
            box-sizing: border-box !important;
        }

        .dropdown-menu-item:hover {
            background: #f1f5f9 !important;
            color: #0f172a !important;
        }

        .dropdown-menu-item.delete-item:hover {
            background: #fef2f2 !important;
            color: #ef4444 !important;
        }

        .menu-item-icon {
            font-size: 0.9rem !important;
        }

        /* 14. Responsive Media Queries for Mobile/Tablet Devices */
        @media (max-width: 1024px) {
            /* Remove white container card background and paddings on mobile/tablet */
            .table-glass-container {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                backdrop-filter: none !important;
                padding: 0 !important;
            }

            /* Header controls grid layout for height optimization */
            .table-control-header {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0.5rem !important;
            }
            .header-left-actions {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 0.5rem !important;
            }
            .search-input-field-wrapper {
                grid-column: span 2 !important;
                width: 100% !important;
            }
            .filter-dropdown-select-wrapper {
                width: 100% !important;
            }
            .filter-select-element {
                padding: 0.45rem 1.75rem 0.45rem 0.65rem !important;
                font-size: 0.78rem !important;
                height: 36px !important;
            }
            .search-input-element {
                padding: 0.45rem 0.65rem 0.45rem 2rem !important;
                font-size: 0.78rem !important;
                height: 36px !important;
            }
            .search-input-icon-glyph {
                font-size: 0.8rem !important;
                left: 0.65rem !important;
            }
            .action-trigger-btn.primary-solid {
                justify-content: center !important;
                padding: 0.45rem 1rem !important;
                font-size: 0.78rem !important;
                height: 36px !important;
                font-weight: 600 !important;
            }
            .btn-icon-plus {
                font-size: 0.9rem !important;
            }

            /* Responsive Card-based Table Layout */
            .table-responsive-wrapper {
                border: none !important;
                overflow: visible !important;
            }
            .dashboard-custom-data-table thead {
                display: none !important; /* Hide headers on mobile */
            }
            .dashboard-custom-data-table,
            .dashboard-custom-data-table tbody,
            .dashboard-custom-data-table tr,
            .dashboard-custom-data-table td {
                display: block !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .dashboard-custom-data-table tr {
                background: #ffffff !important;
                border: 1px solid #e2e8f0 !important;
                border-radius: 16px !important;
                padding: 1.25rem !important;
                margin-bottom: 1.5rem !important;
                box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
                position: relative !important;
            }
            .dashboard-custom-data-table td {
                border-bottom: none !important;
                padding: 0.5rem 0 !important;
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                gap: 1rem !important;
            }

            /* Add labels before the content */
            .dashboard-custom-data-table td::before {
                content: attr(data-label) !important;
                font-size: 0.8rem !important;
                font-weight: 700 !important;
                color: #64748b !important;
                text-transform: uppercase !important;
                letter-spacing: 0.02em !important;
            }

            /* Adjust visual styling for specific columns on mobile */
            .dashboard-custom-data-table td[data-label="Cover"] {
                justify-content: center !important;
                border-bottom: 1px solid #f1f5f9 !important;
                padding-bottom: 0.75rem !important;
                margin-bottom: 0.5rem !important;
            }
            .dashboard-custom-data-table td[data-label="Cover"]::before {
                display: none !important; /* Hide cover label on mobile */
            }
            
            .dashboard-custom-data-table td[data-label="Title"] {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.25rem !important;
                border-bottom: 1px solid #f1f5f9 !important;
                padding-bottom: 0.75rem !important;
                margin-bottom: 0.5rem !important;
            }
            .dashboard-custom-data-table td[data-label="Title"]::before {
                display: none !important; /* Hide title label on mobile */
            }

            .dashboard-custom-data-table td[data-label="Actions"] {
                border-top: 1px solid #f1f5f9 !important;
                padding-top: 0.75rem !important;
                margin-top: 0.5rem !important;
            }

            /* Push dropdown menu to open above/left on mobile so it stays on screen */
            .row-actions-dropdown-menu {
                right: 0 !important;
                top: auto !important;
                bottom: 100% !important;
                margin-bottom: 8px !important;
            }
            
            /* Align table pagination footer for small screens */
            .table-custom-pagination-footer {
                flex-direction: column !important;
                align-items: center !important;
                gap: 1rem !important;
                text-align: center !important;
            }
        }

        /* Sidebar Nav and Submenu Layout Optimizations */
        .nav-icon {
            display: none !important;
        }
        .submenu-dot {
            display: none !important;
        }
        .sidebar-submenu {
            padding-left: 1.25rem !important;
        }

        /* Auto-numbering for Main Sidebar Menus */
        .sidebar-nav-menu {
            counter-reset: sidebar-menu-counter;
        }
        
        .sidebar-nav-menu > a.sidebar-nav-link::before,
        .sidebar-nav-menu > .sidebar-dropdown-wrapper > button.sidebar-nav-link::before {
            counter-increment: sidebar-menu-counter;
            content: counter(sidebar-menu-counter);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #94a3b8;
            font-size: 0.75rem;
            font-weight: 700;
            margin-right: 0.5rem;
            flex-shrink: 0;
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            transition: all 0.2s ease;
        }

        .sidebar-nav-link:hover::before {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
        }

        .sidebar-nav-link.active::before,
        button.sidebar-nav-link.active::before {
            background: #ffffff !important;
            color: var(--brand-blue) !important;
            border-color: #ffffff !important;
        }

        /* Fix Centering of Dropdown Main Menus due to ::before circle badge */
        .sidebar-dropdown-trigger {
            justify-content: flex-start !important;
            gap: 0.5rem !important;
        }

        .sidebar-nav-link {
            gap: 0.5rem !important;
        }

        .sidebar-dropdown-trigger .dropdown-chevron {
            margin-left: auto !important;
        }

        /* Back to Catalog Premium Button Styling */
        .back-catalog-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0.6rem 1.15rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-radius: 50px;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .back-catalog-btn:hover {
            color: #005bea;
            background: #f8fafc;
            border-color: #cbd5e1;
            box-shadow: 0 4px 12px rgba(0, 91, 234, 0.08);
            transform: translateY(-1px);
        }

        .back-arrow-svg {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: inherit;
        }

        .back-catalog-btn:hover .back-arrow-svg {
            transform: translateX(-4px);
            color: #005bea;
        }

        /* Admin Save Button Premium Styling */
        .admin-save-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0.8rem;
            font-weight: 700;
            font-size: 0.9rem;
            border-radius: 8px;
            border: none;
            background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
            color: #ffffff;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 91, 234, 0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .admin-save-button:hover {
            box-shadow: 0 6px 20px rgba(0, 91, 234, 0.3);
            transform: translateY(-1px);
            background: linear-gradient(135deg, #004fc7 0%, #00b4e5 100%);
        }

        .admin-save-button:active {
            transform: translateY(0);
        }

        .admin-save-button:hover .save-btn-icon {
            transform: rotate(15deg) scale(1.1);
        }

        /* [x-cloak] prevention rule for flash of unstyled content */
        [x-cloak] {
            display: none !important;
        }

        /* Front-End Enroll Now Modal split layout styles */
        .enroll-modal-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            background: rgba(15, 23, 42, 0.6) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            z-index: 999999 !important;
            display: flex; /* NO !important here, allows Alpine x-show to toggle display: none inline */
            align-items: center !important;
            justify-content: center !important;
            padding: 1.5rem !important;
        }

        .enroll-modal-card.split-layout {
            background: #ffffff !important;
            border-radius: 20px !important;
            width: 100% !important;
            max-width: 900px !important; /* Made wider for split layout */
            display: grid !important;
            grid-template-columns: 1fr 1.2fr !important;
            overflow: hidden !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
            position: relative !important;
            max-height: 90vh !important;
            z-index: 1000000 !important;
            animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        @media (max-width: 768px) {
            .enroll-modal-card.split-layout {
                grid-template-columns: 1fr !important;
                max-height: 95vh !important;
                overflow-y: auto !important;
            }
            .modal-left-panel {
                display: none !important; /* Hide left panel on mobile to focus on the form */
            }
        }

        /* Left Info Panel styling */
        .modal-left-panel {
            background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%) !important;
            padding: 2.5rem 2rem !important;
            color: #ffffff !important;
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .gradient-overlay-graphics {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0%, transparent 40%),
                              radial-gradient(circle at 90% 80%, rgba(255,255,255,0.06) 0%, transparent 40%) !important;
            pointer-events: none !important;
        }

        .panel-content-wrapper {
            position: relative !important;
            z-index: 2 !important;
        }

        .academy-badge {
            background: rgba(255, 255, 255, 0.15) !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            color: #ffffff !important;
            padding: 0.35rem 0.75rem !important;
            border-radius: 50px !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.05em !important;
            display: inline-block !important;
            margin-bottom: 1.25rem !important;
        }

        .panel-title {
            font-size: 1.65rem !important;
            font-weight: 800 !important;
            line-height: 1.2 !important;
            margin: 0 0 0.75rem 0 !important;
            color: #ffffff !important;
        }

        .panel-desc {
            font-size: 0.85rem !important;
            line-height: 1.5 !important;
            margin: 0 0 2rem 0 !important;
            opacity: 0.9 !important;
        }

        .panel-features-list {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 1.25rem !important;
        }

        .panel-features-list li {
            display: flex !important;
            align-items: flex-start !important;
            gap: 0.85rem !important;
        }

        .feature-icon {
            font-size: 1.1rem !important;
            background: rgba(255, 255, 255, 0.15) !important;
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            flex-shrink: 0 !important;
        }

        .feature-text {
            display: flex !important;
            flex-direction: column !important;
        }

        .feature-text strong {
            font-size: 0.85rem !important;
            font-weight: 700 !important;
            margin-bottom: 0.15rem !important;
        }

        .feature-text span {
            font-size: 0.75rem !important;
            opacity: 0.85 !important;
            line-height: 1.3 !important;
        }

        /* Right Form Panel styling */
        .modal-right-panel {
            padding: 2.25rem 2rem 2rem 2rem !important;
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            background: #ffffff !important;
        }

        .right-panel-header {
            margin-bottom: 1.25rem !important;
        }

        .form-title {
            font-size: 1.35rem !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            margin: 0 0 0.25rem 0 !important;
            line-height: 1.2 !important;
        }

        .form-subtitle {
            font-size: 0.8rem !important;
            color: #64748b !important;
            margin: 0 !important;
        }

        .enroll-modal-close-btn {
            position: absolute !important;
            top: 1rem !important;
            right: 1rem !important;
            background: #f1f5f9 !important;
            border: none !important;
            width: 28px !important;
            height: 28px !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #64748b !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            font-weight: 700 !important;
            z-index: 1000001 !important;
        }

        .enroll-modal-close-btn:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
        }

        /* Compact form elements overrides */
        .compact-form-wrapper .sidebar-enquiry-box {
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

        .compact-form-wrapper .enquiry-card-title,
        .compact-form-wrapper .enquiry-card-desc {
            display: none !important; /* Hide secondary duplicate headings inside modal */
        }

        .compact-form-wrapper .input-group-wrapper {
            margin-bottom: 0.75rem !important; /* Clean vertical gap */
        }

        .compact-form-wrapper input,
        .compact-form-wrapper select {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.85rem !important;
            height: 44px !important;
            line-height: 44px !important;
            border-radius: 8px !important;
            box-sizing: border-box !important;
            margin-bottom: 0 !important;
            background: #f8fafc !important;
            border: 1px solid #cbd5e1 !important;
        }

        .compact-form-wrapper .phone-input-wrapper {
            height: 44px !important;
            border-radius: 8px !important;
            box-sizing: border-box !important;
            background: #f8fafc !important;
            border: 1px solid #cbd5e1 !important;
            overflow: hidden !important;
        }

        .compact-form-wrapper .phone-input-wrapper.has-error,
        .compact-form-wrapper input.has-error,
        .compact-form-wrapper .custom-select-wrapper.has-error {
            border-color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.02) !important;
        }

        .compact-form-wrapper .country-code-selector {
            height: 42px !important;
            min-height: 42px !important;
            box-sizing: border-box !important;
            border-right: 1px solid #cbd5e1 !important;
            padding: 0 0.5rem !important;
            background: #f1f5f9 !important;
        }

        .compact-form-wrapper .phone-input-wrapper input[type="tel"] {
            height: 42px !important;
            border: none !important;
            padding: 0 0.75rem !important;
            box-sizing: border-box !important;
        }

        .compact-form-wrapper .custom-select-wrapper {
            height: 44px !important;
            border-radius: 8px !important;
            box-sizing: border-box !important;
            border: 1px solid #cbd5e1 !important;
            background: #f8fafc !important;
        }

        .compact-form-wrapper .custom-select-trigger {
            height: 42px !important;
            min-height: 42px !important;
            padding: 0 0.75rem !important;
            box-sizing: border-box !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        .compact-form-wrapper .custom-select-trigger .selected-text {
            font-size: 0.85rem !important;
            color: #334155 !important;
        }

        .compact-form-wrapper textarea {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.85rem !important;
            border-radius: 8px !important;
            min-height: 70px !important;
            box-sizing: border-box !important;
            background: #f8fafc !important;
            border: 1px solid #cbd5e1 !important;
        }

        .compact-form-wrapper .btn-submit-premium-creative {
            height: 44px !important;
            padding: 0 !important;
            border-radius: 8px !important;
            font-size: 0.85rem !important;
            font-weight: 700 !important;
            box-sizing: border-box !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%) !important;
            color: #ffffff !important;
        }

        .compact-form-wrapper .btn-submit-premium-creative .btn-icon-box {
            display: none !important; /* Hide secondary button icon wrapper inside popup */
        }

        .compact-form-wrapper .btn-submit-premium-creative .btn-text-content {
            margin: 0 !important;
            text-align: center !important;
            width: 100% !important;
        }

        /* Force Left Column Text to be White */
        .modal-left-panel,
        .modal-left-panel h3,
        .modal-left-panel p,
        .modal-left-panel strong,
        .modal-left-panel span,
        .modal-left-panel li,
        .modal-left-panel div {
            color: #ffffff !important;
        }

        .modal-left-panel p,
        .modal-left-panel .panel-desc {
            opacity: 0.85 !important;
            color: #ffffff !important;
        }

        .modal-left-panel .panel-features-list li span {
            opacity: 0.8 !important;
            color: #ffffff !important;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Yoast Tabs Styles globally shared */
        .seo-tab-container {
            background: #f1f5f9 !important;
            border-radius: 99px !important;
            padding: 0.25rem !important;
            display: inline-flex !important;
            gap: 0.25rem !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
        }

        .seo-tab-btn {
            border: none !important;
            outline: none !important;
            background: transparent !important;
            color: #64748b !important;
            padding: 0.45rem 1.25rem !important;
            border-radius: 99px !important;
            font-size: 0.775rem !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.35rem !important;
            box-shadow: none !important;
        }

        .seo-tab-btn:hover {
            color: #1e293b !important;
        }

        .seo-tab-btn.active {
            background: linear-gradient(135deg, #00c6fb, #005bea) !important;
            color: white !important;
            box-shadow: 0 4px 10px rgba(0, 91, 234, 0.25) !important;
        }

        /* Override Chrome/Safari Autofill Styles globally to prevent ugly yellow/blue prefilled backgrounds */
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
            -webkit-text-fill-color: #0f172a !important;
            transition: background-color 5000s ease-in-out 0s !important;
        }