/* ApnaIndia Web - Modern upGrad Style Design */

:root {
    --primary-red: #0a2342;
    --primary-red-dark: #071a31;
    --primary-red-light: #1a6b8a;
    --text-dark: #1a1a1a;
    --text-light: #6c757d;
    --bg-light: #f8f9fa;
    --white: #ffffff;
    --black: #000000;
    --dark-bg: #1a1a1a;
    --dark-section: #0d1117;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

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

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header & Navigation - Ultra Modern Professional Design */
.navbar {
    padding: 1rem 0;
    box-shadow: var(--shadow-sm);
    background: var(--white) !important;
    border-bottom: 1px solid var(--border-color);
}

.modern-navbar-ultra {
    padding: 0.875rem 0;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(10,35,66, 0.1);
    transition: all 0.3s ease;
}

.modern-navbar-ultra.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 0.5rem 0;
}

.navbar-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 100%);
    z-index: -1;
}

.navbar-nav-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-nav .nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s;
    font-size: 0.95rem;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--primary-red) !important;
    background: rgba(10,35,66, 0.05);
}

/* Ultra Modern Navigation */
.main-nav-ultra {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link-modern {
    font-weight: 600;
    color: var(--text-dark) !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.nav-link-modern::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: var(--primary-red);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.nav-link-modern:hover::after,
.nav-link-modern.active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link-modern:hover,
.nav-link-modern.active {
    color: var(--primary-red) !important;
    background: rgba(10,35,66, 0.08);
    transform: translateY(-2px);
}

.nav-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.nav-link-modern[aria-expanded="true"] .nav-arrow {
    transform: rotate(180deg);
}

/* Mega Menu Styles - Ultra Modern */
.mega-menu-wrapper {
    position: static !important;
}

.mega-menu-wrapper-ultra {
    position: static !important;
}

.mega-menu {
    width: 100%;
    max-width: 1200px;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    padding: 2rem !important;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-top: 3px solid var(--primary-red);
}

.mega-menu-ultra {
    width: 100%;
    max-width: 1200px;
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 0.75rem;
    padding: 0 !important;
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(10,35,66, 0.1);
    background: var(--white);
    overflow: hidden;
    animation: megaMenuSlideDown 0.3s ease-out;
}

@keyframes megaMenuSlideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.mega-menu-header {
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    color: var(--white);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.mega-menu-header h5 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.mega-menu-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.85rem;
}

.mega-menu-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-list li {
    margin-bottom: 0.75rem;
}

.mega-menu-list a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    transition: all 0.3s;
    border-radius: 6px;
}

.mega-menu-list a:hover {
    color: var(--primary-red);
    padding-left: 0.5rem;
    background: rgba(10,35,66, 0.05);
}

.mega-menu-list a i.fa-circle {
    font-size: 0.4rem;
    color: var(--primary-red);
}

/* Ultra Modern Mega Menu Columns */
.mega-menu-column {
    padding: 1.5rem 1.25rem;
    transition: all 0.3s;
    border-radius: 12px;
    height: 100%;
}

.mega-menu-column:hover {
    background: rgba(10,35,66, 0.03);
    transform: translateY(-4px);
}

.mega-menu-icon-box {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 1.25rem;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
    transition: all 0.3s;
}

.mega-menu-column:hover .mega-menu-icon-box {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(10,35,66, 0.4);
}

.mega-menu-title-modern {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

.mega-menu-list-modern {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-menu-list-modern li {
    margin-bottom: 0.5rem;
}

.mega-menu-list-modern a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.mega-menu-list-modern a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--primary-red);
    transform: scaleY(0);
    transition: transform 0.3s;
}

.mega-menu-list-modern a:hover::before {
    transform: scaleY(1);
}

.menu-link-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6rem;
    color: var(--primary-red);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s;
    font-size: 0.75rem;
}

.mega-menu-list-modern a:hover .menu-link-icon {
    opacity: 1;
    transform: translateX(0);
}

.mega-menu-list-modern a:hover {
    color: var(--primary-red);
    background: rgba(10,35,66, 0.08);
    padding-left: 1.25rem;
    transform: translateX(5px);
}

/* Active State for First Menu Item */
.mega-menu-list-modern a.active {
    color: var(--primary-red);
    background: rgba(10,35,66, 0.12);
    padding-left: 1.25rem;
    font-weight: 600;
}

.mega-menu-list-modern a.active::before {
    transform: scaleY(1);
}

.mega-menu-list-modern a.active .menu-link-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Modern Search Bar */
.modern-search-group {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid var(--border-color);
    transition: all 0.3s;
}

.modern-search-group:focus-within {
    border-color: var(--primary-red);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.2);
}

.modern-search-input {
    border: none;
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    background: transparent;
}

.modern-search-input:focus {
    box-shadow: none;
    outline: none;
}

.btn-search-modern {
    background: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 0.65rem 1.5rem;
    transition: all 0.3s;
}

.btn-search-modern:hover {
    background: var(--primary-red-dark);
    color: var(--white);
}

/* Ultra Modern Search Bar */
.search-box-nav-ultra {
    position: relative;
    max-width: 600px;
}

.search-form-header {
    width: 100%;
    margin: 0;
}

.modern-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 50px;
    border: 1.5px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    height: 48px;
    gap: 0;
}

.modern-search-wrapper:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modern-search-wrapper:focus-within {
    border-color: var(--primary-red);
    box-shadow: 0 4px 16px rgba(10,35,66, 0.2);
    transform: translateY(-1px);
}

/* Left search icon removed - only button icon remains */

.modern-search-input-ultra {
    border: none;
    padding: 0.7rem 0.75rem 0.7rem 1.25rem;
    font-size: 0.95rem;
    background: transparent;
    flex: 1;
    min-width: 0;
    color: var(--text-dark);
    font-weight: 400;
    line-height: 1.5;
}

.modern-search-input-ultra:focus {
    box-shadow: none;
    outline: none;
}

.modern-search-input-ultra::placeholder {
    color: #999;
    font-weight: 400;
    letter-spacing: 0.2px;
    opacity: 1;
}

.modern-search-input-ultra::-webkit-input-placeholder {
    color: #999;
    opacity: 1;
}

.modern-search-input-ultra::-moz-placeholder {
    color: #999;
    opacity: 1;
}

.modern-search-input-ultra:-ms-input-placeholder {
    color: #999;
    opacity: 1;
}

.btn-search-ultra {
    background: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 0;
    border-radius: 0 50px 50px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    width: 56px;
    height: 48px;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-search-ultra:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: scale(1.02);
}

.btn-search-ultra:active {
    transform: scale(0.98);
}

.btn-search-ultra i {
    font-size: 1rem;
}

/* Navbar Actions */
.navbar-actions {
    gap: 0.75rem;
}

.nav-action-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
    padding: 0.5rem 0;
}

.nav-action-link:hover {
    color: var(--primary-red);
}

.nav-action-icon {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s;
    cursor: pointer;
}

.nav-action-icon:hover {
    background: var(--bg-light);
    color: var(--primary-red);
}

/* Ultra Modern Navbar Actions */
.navbar-actions-ultra {
    gap: 1rem;
}

.nav-action-link-modern {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.65rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.nav-action-link-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(10,35,66, 0.1);
    transition: left 0.3s;
}

.nav-action-link-modern:hover::before {
    left: 0;
}

.nav-action-link-modern:hover {
    color: var(--primary-red);
    transform: translateY(-2px);
}

.nav-action-link-modern i {
    transition: transform 0.3s;
}

.nav-action-link-modern:hover i {
    transform: scale(1.2);
}

.nav-action-icon-modern {
    background: var(--bg-light);
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    font-size: 1.1rem;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-action-icon-modern:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
}

.btn-outline-primary-modern {
    border: 2px solid var(--primary-red);
    color: var(--primary-red);
    background: transparent;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
}

.btn-outline-primary-modern:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(10,35,66, 0.4);
}

.btn-danger-modern {
    background: var(--primary-red);
    color: var(--white);
    border: 2px solid var(--primary-red);
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
}

.btn-danger-modern:hover {
    background: var(--primary-red-dark);
    border-color: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(10,35,66, 0.4);
}

/* Quick Menu Offcanvas - Ultra Modern */
.offcanvas {
    border-left: 1px solid var(--border-color);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
}

.offcanvas-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-dark);
}

.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, var(--bg-light), var(--white));
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.quick-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    opacity: 0;
    transition: opacity 0.3s;
}

.quick-menu-item:hover::before {
    opacity: 0.1;
}

.quick-menu-item i {
    font-size: 2.5rem;
    color: var(--primary-red);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.quick-menu-item span {
    font-size: 0.95rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.quick-menu-item:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 30px rgba(10,35,66, 0.2);
}

.quick-menu-item:hover i {
    transform: scale(1.2) rotate(5deg);
    color: var(--primary-red-dark);
}

.quick-menu-item:hover span {
    font-weight: 700;
}

/* Responsive Navigation */
@media (max-width: 991px) {
    .navbar-nav-wrapper {
        display: none;
    }
    
    .search-box-nav {
        order: 3;
        width: 100%;
        margin: 1rem 0 0 0;
    }
    
    .mega-menu {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        max-width: 100%;
    }
}

.logo-square {
    width: 48px;
    height: 48px;
    background: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.logo-square:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.logo-text {
    color: var(--white);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
}

.brand-text {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

/* Ultra Modern Logo */
.logo-square-modern {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
}

.logo-square-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s;
}

.logo-square-modern:hover::before {
    left: 100%;
}

.logo-square-modern:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(10,35,66, 0.4);
}

.logo-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.logo-square-modern:hover .logo-shine {
    left: 100%;
}

.logo-text-modern {
    color: var(--white);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.brand-text-modern {
    font-weight: 800;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--text-dark), var(--primary-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    transition: all 0.3s;
}

.brand-wrapper:hover .brand-text-modern {
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.search-box-nav {
    max-width: 500px;
}

.search-box-nav .form-control {
    border-radius: 30px 0 0 30px;
    border: 2px solid var(--border-color);
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.search-box-nav .form-control:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(10,35,66, 0.1);
}

.search-box-nav .btn {
    border-radius: 0 30px 30px 0;
    border: 2px solid var(--primary-red);
    background: var(--primary-red);
    color: var(--white);
    padding: 0.65rem 1.5rem;
    transition: all 0.3s;
}

.search-box-nav .btn:hover {
    background: var(--primary-red-dark);
    border-color: var(--primary-red-dark);
    transform: translateY(-1px);
}

.nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: all 0.3s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-red) !important;
    background: rgba(10,35,66, 0.05);
}

.btn-primary {
    background: var(--primary-red);
    border-color: var(--primary-red);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: var(--primary-red-dark);
    border-color: var(--primary-red-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Hero Banner - Modern upGrad Style with Professional Design */
.hero-banner-web {
    min-height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 2rem 0 0;
    overflow: hidden;
}

/* Hero Background Slider */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    background-blend-mode: normal;
    /* Fallback gradient if image fails to load */
    background-image: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(13, 17, 23, 0.95));
}

/* Ensure images load properly */
.hero-slide[style*="background-image"] {
    background-image: var(--bg-image, linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(13, 17, 23, 0.95)));
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.4), rgba(13, 17, 23, 0.5));
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.hero-banner-web .container {
    position: relative;
    z-index: 2;
}

.hero-banner-content {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.hero-content-wrapper {
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(10,35,66, 0.2);
    border: 1px solid rgba(10,35,66, 0.5);
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

.badge-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.3px;
}

.hero-banner-web::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.hero-banner-web .container {
    position: relative;
    z-index: 1;
}

.hero-banner-web h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}

.hero-banner-web .lead {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    line-height: 1.5;
}

.hero-cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.hero-banner-web .hero-cta {
    background: var(--primary-red);
    color: var(--white);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    border: none;
}

.hero-banner-web .hero-cta:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(10,35,66, 0.4);
}

.hero-banner-web .hero-cta-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.hero-banner-web .hero-cta-outline:hover {
    background: var(--white);
    color: var(--primary-red);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-search-box-main {
    max-width: 750px;
    margin: 0 auto;
}

.hero-search-box-main .input-group {
    box-shadow: var(--shadow-xl);
    border-radius: 50px;
    overflow: hidden;
    background: var(--white);
}

.hero-search-box-main .form-control {
    border: none;
    padding: 1.3rem 2rem;
    font-size: 1.05rem;
    background: transparent;
}

.hero-search-box-main .form-control:focus {
    box-shadow: none;
    outline: none;
}

.hero-search-box-main .btn-search {
    background: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 1.3rem 2.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s;
}

.hero-search-box-main .btn-search:hover {
    background: var(--primary-red-dark);
}

/* Quick Links Section - Modern Card Grid */
.quick-links-web {
    padding: 3rem 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.quick-link-item {
    text-align: center;
    padding: 2rem 1.5rem;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
    border-radius: 16px;
    display: block;
    height: 100%;
}

.quick-link-item:hover {
    background: var(--bg-light);
    color: var(--primary-red);
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.quick-link-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--primary-red);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--white);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.quick-link-item:hover .quick-link-icon {
    background: var(--primary-red-dark);
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-lg);
}

.quick-link-item h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
    line-height: 1.4;
}

/* Top Cities Section - Modern Cards */
.top-cities-section {
    padding: 4rem 0;
    background: var(--bg-light);
}

/* Modern React-Style Cities Section */
.top-cities-section-modern {
    padding: 5rem 0;
    background: #000000;
    position: relative;
    overflow: hidden;
}

.bg-black {
    background-color: #000000;
}

.top-cities-section-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-red), transparent);
}

.section-header-modern {
    margin-bottom: 3rem;
}

.section-title-modern {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-red);
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.top-cities-section-modern .section-title-modern {
    color: #ffffff;
}

.section-subtitle-modern {
    font-size: 0.95rem;
    color: #666;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.top-cities-section-modern .section-subtitle-modern {
    color: #ffffff;
}

.cities-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.city-card-modern {
    text-decoration: none;
    display: block;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cityCardFadeIn 0.6s ease-out backwards;
}

.city-card-modern[data-index] {
    animation-delay: calc(var(--index, 0) * 0.08s);
}

@keyframes cityCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.city-card-content-simple {
    background: #1a1a1a;
    border: 1.5px solid #333333;
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 160px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    color: #f3f3f3;
}

.city-card-content-simple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-red);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.city-card-modern:hover .city-card-content-simple::before {
    transform: scaleX(1);
    background: linear-gradient(90deg, var(--primary-red), var(--primary-red-dark));
}

.city-card-modern:hover .city-card-content-simple {
    border-color: var(--primary-red);
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(10,35,66, 0.4);
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
}

.city-icon-modern-simple {
    width: 60px;
    height: 60px;
    background: var(--primary-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(10,35,66, 0.25);
    position: relative;
    overflow: hidden;
}

.city-icon-modern-simple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.city-card-modern:hover .city-icon-modern-simple::after {
    width: 120px;
    height: 120px;
}

.city-icon-modern-simple i {
    color: var(--white) !important;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.city-card-modern:hover .city-icon-modern-simple {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    filter: brightness(0.95);
}

.city-card-modern:hover .city-icon-modern-simple i {
    transform: scale(1.1);
}

/* Removed complex animations for simple design */

.city-name-modern-simple {
    font-size: 1.1rem;
    font-weight: 700;
    color: #b0b0b0;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    letter-spacing: -0.2px;
    transition: all 0.3s ease;
}

.city-card-modern:hover .city-name-modern-simple {
    color: #d0d0d0;
    transform: translateY(-2px);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.city-stats-modern-simple {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.college-count-modern-simple {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-red);
    line-height: 1;
    letter-spacing: -0.3px;
    transition: all 0.3s ease;
    display: inline-block;
}

.city-card-modern:hover .college-count-modern-simple {
    transform: scale(1.08);
}

.college-label-modern-simple {
    font-size: 0.8rem;
    color: #888888;
    font-weight: 500;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.city-card-modern:hover .college-label-modern-simple {
    color: #aaaaaa;
    font-weight: 600;
}

/* Removed arrow and shine effects - using simple design */

/* Responsive Design */
@media (max-width: 992px) {
    .cities-grid-modern {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .cities-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .city-card-content-simple {
        padding: 1.5rem 1.25rem;
        min-height: 150px;
    }
    
    .city-icon-modern-simple {
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
        margin-bottom: 0.875rem;
    }
    
    .city-name-modern-simple {
        font-size: 1rem;
        margin-bottom: 0.625rem;
    }
    
    .college-count-modern-simple {
        font-size: 1.25rem;
    }
    
    .college-label-modern-simple {
        font-size: 0.75rem;
    }
    
    .section-title-modern {
        font-size: 1.75rem;
    }
    
    .section-subtitle-modern {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .cities-grid-modern {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .city-card-content-simple {
        min-height: 160px;
        padding: 1.75rem 1.5rem;
    }
}

.section-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2rem;
    /* text-align: center; */
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.city-card-web {
    background: var(--white);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.city-card-web:hover {
    border-color: var(--primary-red);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.city-icon-web {
    font-size: 3.5rem;
    color: var(--primary-red);
    margin-bottom: 1.25rem;
    transition: all 0.3s;
}

.city-card-web:hover .city-icon-web {
    transform: scale(1.15);
    color: var(--primary-red-dark);
}

.city-card-web h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* Explore Your Future - Modern Grid */
.explore-future-section {
    padding: 5rem 0;
    background: var(--white);
}

.categories-auto-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.categories-slider-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: autoScroll 40s linear infinite;
    will-change: transform;
}

.categories-slider-track:hover {
    animation-play-state: paused;
}

.category-slider-item {
    flex: 0 0 220px;
    background: var(--white);
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.category-slider-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-red), var(--primary-red-dark));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px 20px 0 0;
}

.category-slider-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(10,35,66, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.category-slider-item:hover::before {
    transform: scaleX(1);
}

.category-slider-item:hover::after {
    opacity: 1;
}

.category-slider-item:hover {
    border-color: transparent;
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
}

.category-slider-item:active {
    transform: translateY(-8px) scale(1.01);
}

.category-slider-item:hover .category-icon-web {
    transform: scale(1.1) translateY(-4px) rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.category-slider-item:hover .category-icon-web i {
    transform: scale(1.1);
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.category-slider-item h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: all 0.3s ease;
    letter-spacing: -0.2px;
}

.category-slider-item:hover h5 {
    color: #000000;
    transform: translateY(-2px);
}

.category-slider-item .category-count {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-slider-item:hover .category-count {
    color: #4b5563;
    font-weight: 700;
}

.category-slider-item .arrow-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--primary-red);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1rem;
    background: rgba(10,35,66, 0.1);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
}

.category-slider-item:hover .arrow-icon {
    opacity: 1;
    transform: translateX(5px) scale(1);
    background: rgba(10,35,66, 0.15);
}

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

@media (max-width: 768px) {
    .category-slider-item {
        flex: 0 0 200px;
        padding: 1rem 0.75rem;
    }
    
    .category-icon-web {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .category-slider-item h5 {
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }
    
    .category-slider-item .category-count {
        font-size: 0.8rem;
    }
}

.category-grid-item {
    background: var(--white);
    border: 2px solid #e5e7eb;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.category-grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-red), var(--primary-red-dark));
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px 20px 0 0;
}

.category-grid-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(10,35,66, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.category-grid-item:hover::before {
    transform: scaleX(1);
}

.category-grid-item:hover::after {
    opacity: 1;
}

.category-grid-item:hover {
    border-color: transparent;
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
}

.category-grid-item:active {
    transform: translateY(-8px) scale(1.01);
}

.category-icon-web {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: var(--primary-red);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

.category-icon-web i {
    position: relative;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.category-grid-item:hover .category-icon-web {
    transform: scale(1.1) translateY(-4px) rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.category-grid-item:hover .category-icon-web i {
    transform: scale(1.1);
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.category-grid-item h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    transition: all 0.3s ease;
    letter-spacing: -0.2px;
}

.category-grid-item:hover h5 {
    color: #000000;
    transform: translateY(-2px);
}

.category-grid-item .category-count {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.category-grid-item:hover .category-count {
    color: #4b5563;
    font-weight: 700;
}

.category-grid-item .arrow-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: var(--primary-red);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
    background: rgba(10,35,66, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
}

.category-grid-item:hover .arrow-icon {
    opacity: 1;
    transform: translateX(5px) scale(1);
    background: rgba(10,35,66, 0.15);
}

/* Top Colleges Section - Modern Cards */
.top-colleges-section {
    padding: 5rem 0;
}

.premium-colleges-section {
    background: #f7f8fb;
}

.premium-colleges-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.premium-slider-controls {
    display: flex;
    gap: 0.75rem;
}

.premium-slider-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(10,35,66, 0.2);
    background: #fff;
    color: var(--primary-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.premium-slider-btn:hover {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.premium-slider {
    position: relative;
}

.premium-slider-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.premium-slider-track::-webkit-scrollbar {
    display: none;
}

.college-premium-card {
    flex: 0 0 calc(33.333% - 1.1rem);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.college-card-media {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
}

.college-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%);
}

.college-logo-chip {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 15px;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-red);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 2;
}

.college-premium-content {
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.college-premium-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.college-tagline {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: #7c7f8b;
    margin-bottom: 0.4rem;
}

.college-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #0f172a;
}

.college-location-approval {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.college-location {
    font-size: 0.95rem;
    color: #64748b;
    display: flex;
    align-items: center;
    margin: 0;
    flex: 1;
}

.college-rating-chip {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.college-approval-chip {
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #eef3f8;
    color: var(--primary-red);
    border: 1px solid rgba(10,35,66, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

.college-learn-link {
    color: #2563eb;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.college-learn-link:hover {
    text-decoration: underline;
}

.college-meta-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.college-meta-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    background: #f9fafc;
}

.college-meta-item i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-red);
    font-size: 1rem;
}

.college-meta-item span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}

.college-meta-item strong {
    font-size: 1rem;
    color: #0f172a;
    font-weight: 700;
}

.college-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.college-highlights span {
    font-size: 0.78rem;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.college-premium-card.compact .college-premium-content {
    gap: 1rem;
}

.college-premium-card.compact .college-meta-list,
.college-premium-card.compact .college-highlights,
.college-premium-card.compact .college-learn-link {
    display: none;
}

.college-premium-card.compact .college-premium-content {
    padding-bottom: 1rem;
}

.college-premium-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.college-premium-actions .btn {
    flex: 1 1 45%;
    text-align: center;
    justify-content: center;
}

.btn.btn-outline-primary-modern {
    border: 1.5px solid var(--primary-red);
    color: var(--primary-red);
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn.btn-outline-primary-modern:hover {
    background: var(--primary-red);
    color: #fff;
}

.btn.btn-syllabus-download {
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s ease;
    justify-content: center;
}

.btn.btn-syllabus-download:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}

@media (max-width: 992px) {
    .college-premium-card {
        flex: 0 0 calc(50% - 0.75rem);
    }
}

@media (max-width: 576px) {
    .premium-colleges-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .college-premium-card {
        flex: 0 0 100%;
    }
}

/* Filter Tags - Modern Pills */
.filter-tags {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.filter-tag {
    padding: 0.65rem 1.5rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 30px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.filter-tag:hover,
.filter-tag.active {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Top Exams Section */
.top-exams-section {
    padding: 3rem 0;
    background: var(--white);
}

.apna-journey-section {
    background: #0a0a0a;
    padding: 5rem 0 0;
    position: relative;
    overflow: hidden;
}

.journey-heading {
    padding-bottom: 3rem;
}

.journey-heading h2 {
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
    margin-top: 0.5rem;
    letter-spacing: -1px;
}

.journey-heading h2 span {
    color: var(--primary-red);
    display: inline-block;
}

.journey-eyebrow {
    color: #ccccd3;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.journey-steps {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.journey-steps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, 
        rgba(234, 67, 53, 0.8) 0%, 
        rgba(234, 67, 53, 0.8) 25%,
        rgba(7,26,49, 0.8) 25%,
        rgba(7,26,49, 0.8) 50%,
        rgba(37, 99, 235, 0.8) 50%,
        rgba(37, 99, 235, 0.8) 75%,
        rgba(22, 163, 74, 0.8) 75%,
        rgba(22, 163, 74, 0.8) 100%);
    border-radius: 999px;
    box-shadow: 0 0 30px rgba(255,255,255,0.1);
    z-index: 1;
    opacity: 0.6;
}

.journey-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 4.5rem 10%;
    gap: 4rem;
    position: relative;
    min-height: 500px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(80px);
}

.journey-step.animate-in {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-step:hover {
    transform: translateY(-2px);
}

.journey-step[data-journey-index="0"] {
    transition-delay: 0.1s;
}

.journey-step[data-journey-index="1"] {
    transition-delay: 0.2s;
}

.journey-step[data-journey-index="2"] {
    transition-delay: 0.3s;
}

.journey-step[data-journey-index="3"] {
    transition-delay: 0.4s;
}

.journey-dark { 
    background: #0a0a0a;
}

.journey-crimson { 
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
}

.journey-royal { 
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
}

.journey-emerald { 
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
}

.journey-step:nth-child(even) .journey-content {
    order: 2;
}

.journey-step:nth-child(even) .journey-media {
    order: 1;
}

.journey-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    transform: translateX(-30px);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-step.animate-in .journey-content {
    transform: translateX(0);
    opacity: 1;
}

.journey-step:nth-child(even) .journey-content {
    transform: translateX(30px);
}

.journey-step:nth-child(even).animate-in .journey-content {
    transform: translateX(0);
}

.journey-step h3 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.journey-step-label {
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    display: block;
}

.journey-desc {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
}

.journey-stats {
    display: flex;
    gap: 3rem;
    margin: 2rem 0 2.5rem;
    flex-wrap: wrap;
}

.journey-stats > div {
    position: relative;
}

.journey-stats > div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.2);
}

.journey-stats strong {
    display: block;
    font-size: 2.2rem;
    color: #fff;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
}

.journey-stats span {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    font-weight: 500;
    display: block;
}

.journey-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.25rem;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.journey-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.journey-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.journey-btn:hover::before {
    left: 100%;
}

.journey-btn:active {
    transform: translateY(-2px) scale(1);
}

.journey-media {
    position: relative;
    z-index: 2;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.4);
    transform: translateX(30px) scale(0.95);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.journey-step.animate-in .journey-media {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.journey-step:nth-child(even) .journey-media {
    transform: translateX(-30px) scale(0.95);
}

.journey-step:nth-child(even).animate-in .journey-media {
    transform: translateX(0) scale(1);
}

.journey-step:hover .journey-media {
    transform: scale(1.02);
    box-shadow: 0 60px 120px rgba(0,0,0,0.5);
}

.journey-media img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    border-radius: 24px;
    border: 2px solid rgba(255,255,255,0.1);
    transition: transform 0.4s ease;
    will-change: transform;
}

.journey-step:hover .journey-media img {
    transform: scale(1.05);
}

@media (max-width: 1200px) {
    .journey-step {
        padding: 4rem 6%;
        gap: 3rem;
    }
    
    .journey-step h3 {
        font-size: 2.2rem;
    }
}

@media (max-width: 992px) {
    .journey-step {
        grid-template-columns: 1fr;
        padding: 3.5rem 5%;
        gap: 2.5rem;
        min-height: auto;
    }
    
    .journey-step:nth-child(even) .journey-content,
    .journey-step:nth-child(even) .journey-media {
        order: 0;
    }
    
    .journey-media {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .journey-media img {
        height: 350px;
    }
    
    .journey-steps::before {
        display: none;
    }
}

@keyframes counterPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.journey-stats > div {
    animation: none;
}

@media (max-width: 768px) {
    .journey-heading h2 {
        font-size: 2.2rem;
    }
    
    .journey-step {
        padding: 2.5rem 4%;
    }
    
    .journey-step h3 {
        font-size: 1.8rem;
    }
    
    .journey-desc {
        font-size: 1rem;
    }
    
    .journey-stats {
        gap: 2rem;
    }
    
    .journey-stats > div:not(:last-child)::after {
        display: none;
    }
    
    .journey-stats strong {
        font-size: 1.8rem;
    }
    
    .journey-media img {
        height: 280px;
    }
    
    .journey-content,
    .journey-media {
        transform: none !important;
    }
}

.exam-card-web {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.exam-card-web:hover {
    border-color: var(--primary-red);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.exam-icon-web {
    width: 45px;
    height: 45px;
    background: var(--primary-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.exam-card-web:hover .exam-icon-web {
    background: var(--primary-red-dark);
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-lg);
}

.exam-card-web h5 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

/* Testimonials Section */
.testimonials-section {
    padding: 4rem 0;
    background: var(--bg-light);
}

.testimonials-eyebrow {
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.testimonials-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0;
    letter-spacing: -0.5px;
}

.testimonials-slider-wrapper {
    position: relative;
    padding: 0 3rem;
}

.testimonials-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 0;
}

.testimonials-track::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: 300px;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-thumbnail {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
}

.testimonial-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.testimonial-card:hover .testimonial-thumbnail img {
    transform: scale(1.1);
}

.thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

.watch-story-btn {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.4);
    cursor: pointer;
    font-family: inherit;
}

.watch-story-btn:hover {
    background: var(--primary-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10,35,66, 0.5);
    color: var(--white);
}

.watch-story-btn i {
    font-size: 1.2rem;
}

.testimonial-content {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.testimonial-quote {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 1rem;
    flex: 1;
    font-weight: 500;
}

.testimonial-author {
    margin-top: auto;
}

.testimonial-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.testimonial-designation {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}

.testimonials-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.testimonials-nav-btn:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-50%) scale(1.1);
}

.testimonials-prev {
    left: 0;
}

.testimonials-next {
    right: 0;
}

.btn-talk-alumni {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2.5rem;
    background: var(--primary-red);
    color: var(--white);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(10,35,66, 0.3);
}

.btn-talk-alumni:hover {
    background: var(--primary-red-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10,35,66, 0.4);
    color: var(--white);
}

/* Partner Universities Section */
.partner-universities-section {
    padding: 4rem 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.partner-eyebrow {
    color: var(--primary-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.partner-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0;
    letter-spacing: -0.5px;
}

.universities-slider-wrapper {
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
}

.universities-slider-track {
    display: flex;
    gap: 3rem;
    animation: slideUniversities 30s linear infinite;
    will-change: transform;
}

.universities-slider-track:hover {
    animation-play-state: paused;
}

.university-logo-item {
    flex: 0 0 auto;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--white);
    border-radius: 12px;
    transition: all 0.3s ease;
    opacity: 1;
}

.university-logo-item:hover {
    opacity: 1;
    transform: scale(1.05);
}

.university-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.university-logo-img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.university-logo-img[src=""],
.university-logo-img:not([src]) {
    display: none;
}

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

@media (max-width: 768px) {
    .partner-title {
        font-size: 1.5rem;
    }
    
    .university-logo-item {
        width: 140px;
        height: 80px;
    }
    
    .universities-slider-track {
        gap: 2rem;
    }
}

/* Latest News & Stories Section */
.latest-news-section {
    padding: 4rem 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.news-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.news-section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

.news-filter-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.news-tab-btn {
    padding: 0.6rem 1.5rem;
    border: 2px solid var(--border-color);
    background: var(--white);
    color: var(--text-light);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.news-tab-btn:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}

.news-tab-btn.active {
    background: var(--text-dark);
    border-color: var(--text-dark);
    color: var(--white);
}

.news-cards-wrapper {
    position: relative;
    margin-top: 2rem;
}

.news-cards-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 0;
}

.news-cards-track::-webkit-scrollbar {
    display: none;
}

.news-cards-group {
    display: none;
    gap: 1.5rem;
    min-width: 100%;
}

.news-cards-group.active {
    display: flex;
}

.news-card {
    flex: 0 0 320px;
    background: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-title-link {
    color: var(--text-dark);
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.news-card-title-link:hover {
    color: var(--text-dark);
    text-decoration: none;
}

.news-card-title-link:visited {
    color: var(--text-dark);
    text-decoration: none;
}

.news-card-title-link:active {
    color: var(--text-dark);
    text-decoration: none;
}

.news-card-title-link:focus {
    color: var(--text-dark);
    text-decoration: none;
    outline: none;
}

.news-card-date {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.news-card-snippet {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.news-card-link:hover {
    color: var(--primary-red);
    gap: 0.75rem;
}

.news-card-link i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.news-card-link:hover i {
    transform: translateX(4px);
}

.news-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.news-nav-btn:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-50%) scale(1.1);
}

.news-nav-prev {
    left: -20px;
}

.news-nav-next {
    right: -20px;
}

@media (max-width: 1200px) {
    .news-section-header {
        flex-direction: column;
    }
    
    .news-section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .latest-news-section {
        padding: 3rem 0;
    }
    
    .news-section-title {
        font-size: 1.75rem;
    }
    
    .news-card {
        flex: 0 0 280px;
        padding: 1.25rem;
    }
    
    .news-nav-prev {
        left: -10px;
    }
    
    .news-nav-next {
        right: -10px;
    }
    
    .news-nav-btn {
        width: 40px;
        height: 40px;
    }
}

/* Find Us Nearby Section */
.find-us-nearby-section {
    padding: 5rem 0;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

.find-us-eyebrow {
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
}

.find-us-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 2rem;
    line-height: 1.2;
    letter-spacing: -1px;
}

.find-us-title .text-primary-red {
    color: var(--primary-red);
}

.find-us-benefits {
    margin-bottom: 2.5rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.benefit-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
}

.benefit-text {
    flex: 1;
}

.benefit-text p {
    font-size: 1.05rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

.find-us-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-call-support {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--white);
    color: var(--text-dark);
    border: 2px solid var(--text-dark);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.btn-call-support:hover {
    background: var(--text-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn-visit-office {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--primary-red);
    color: var(--white);
    border: 2px solid var(--primary-red);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(10,35,66, 0.3);
}

.btn-visit-office:hover {
    background: var(--primary-red-dark);
    border-color: var(--primary-red-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(10,35,66, 0.4);
}

.find-us-image {
    position: relative;
}

.find-us-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.find-us-image-wrapper img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.image-overlay-badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.image-overlay-badge i {
    color: var(--primary-red);
    font-size: 1.25rem;
}

.image-overlay-badge span {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.95rem;
}

@media (max-width: 992px) {
    .find-us-nearby-section {
        padding: 4rem 0;
    }
    
    .find-us-title {
        font-size: 2.25rem;
    }
    
    .find-us-image {
        margin-top: 3rem;
    }
    
    .find-us-image-wrapper img {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .find-us-nearby-section {
        padding: 3rem 0;
    }
    
    .find-us-title {
        font-size: 1.75rem;
    }
    
    .benefit-item {
        margin-bottom: 1.25rem;
    }
    
    .benefit-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .benefit-text p {
        font-size: 0.95rem;
    }
    
    .find-us-buttons {
        flex-direction: column;
    }
    
    .btn-call-support,
    .btn-visit-office {
        width: 100%;
        justify-content: center;
    }
    
    .find-us-image-wrapper img {
        height: 300px;
    }
    
    .image-overlay-badge {
        top: 1rem;
        right: 1rem;
        padding: 0.75rem 1.25rem;
    }
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.video-modal-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    z-index: 10000;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal.active .video-modal-container {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.video-modal-close:hover {
    background: var(--primary-red);
    border-color: var(--primary-red);
    transform: rotate(90deg);
}

.video-modal-content {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    overflow: hidden;
}

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

.video-modal-info {
    padding: 1.5rem;
    background: var(--white);
}

.video-modal-info h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

@media (max-width: 1200px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 0.75rem);
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 3rem 0;
    }
    
    .testimonials-title {
        font-size: 2rem;
    }
    
    .testimonials-slider-wrapper {
        padding: 0 2.5rem;
    }
    
    .testimonial-card {
        flex: 0 0 85%;
        min-width: 280px;
    }
    
    .testimonials-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .testimonials-prev {
        left: -0.5rem;
    }
    
    .testimonials-next {
        right: -0.5rem;
    }
}

/* Quick Look Section */
.quick-look-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.nav-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--text-light);
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 0;
    position: relative;
}

.nav-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-red);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.nav-tabs .nav-link.active {
    color: var(--primary-red);
    background: transparent;
}

.nav-tabs .nav-link.active::after {
    transform: scaleX(1);
}

.course-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.course-link-item {
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
}

.course-link-item:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Newsletter Section - Modern Design */
/* Quick Connect Section */
.quick-connect-section {
    padding: 5rem 0;
    background: var(--primary-red);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.quick-connect-section .container {
    position: relative;
    z-index: 1;
}

.quick-connect-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    backdrop-filter: blur(10px);
}

.quick-connect-icon i {
    font-size: 2rem;
    color: var(--white);
}

.quick-connect-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.quick-connect-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.quick-connect-form {
    max-width: 900px;
    margin: 0 auto;
}

.form-group-quick-connect {
    position: relative;
    width: 100%;
}

.form-group-quick-connect .form-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1.1rem;
    z-index: 2;
    pointer-events: none;
}

.quick-connect-form .form-control {
    width: 100%;
    border-radius: 50px;
    border: none;
    padding: 1rem 1.5rem 1rem 3.5rem;
    font-size: 1rem;
    background: var(--white);
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.quick-connect-form .form-control:focus {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    outline: none;
    transform: translateY(-2px);
}

.quick-connect-form .form-control::placeholder {
    color: var(--text-light);
    font-weight: 500;
}

.btn-quick-connect-submit {
    background: var(--white);
    color: var(--primary-red);
    border: none;
    padding: 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-quick-connect-submit:hover {
    background: #f0f0f0;
    color: var(--primary-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn-quick-connect-submit i {
    font-size: 1.1rem;
}

@media (max-width: 992px) {
    .quick-connect-section {
        padding: 4rem 0;
    }
    
    .quick-connect-title {
        font-size: 2rem;
    }
    
    .quick-connect-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .quick-connect-section {
        padding: 3rem 0;
    }
    
    .quick-connect-icon {
        width: 70px;
        height: 70px;
    }
    
    .quick-connect-icon i {
        font-size: 1.75rem;
    }
    
    .quick-connect-title {
        font-size: 1.75rem;
    }
    
    .quick-connect-subtitle {
        font-size: 0.95rem;
    }
    
    .quick-connect-form .form-control {
        padding: 0.875rem 1.25rem 0.875rem 3rem;
        font-size: 0.95rem;
    }
    
    .form-group-quick-connect .form-icon {
        left: 1rem;
        font-size: 1rem;
    }
}

/* Button Styles */
.btn-outline-danger {
    border-color: var(--primary-red);
    color: var(--primary-red);
    background: transparent;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    transition: all 0.3s;
}

.btn-outline-danger:hover {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    transition: all 0.3s;
}

.btn-danger:hover {
    background: var(--primary-red-dark);
    color: var(--white);
    border-color: var(--primary-red-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Cards - Modern Design */
.card {
    border: none;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    font-weight: 600;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xl);
    transition: all 0.3s;
    z-index: 1000;
    font-size: 1.2rem;
}

.scroll-to-top:hover {
    background: var(--primary-red-dark);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 24px rgba(10,35,66, 0.4);
}

.scroll-to-top.show {
    display: flex;
}

/* Statistics Bar - upGrad Style */
.stats-bar {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
    color: var(--white);
}

.stat-item .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-item .stat-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-banner-web {
        min-height: 500px;
        padding: 2rem 0;
    }
    
    .hero-banner-web h1 {
        font-size: 2.2rem;
    }
    
    .hero-banner-web .lead {
        font-size: 1.1rem;
    }
    
    .search-box-nav {
        max-width: 100%;
        margin: 1rem 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .hero-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero-cta-buttons .hero-cta,
    .hero-cta-buttons .hero-cta-outline {
        width: 100%;
        justify-content: center;
        margin: 0.5rem 0 !important;
    }
    
    .category-icon-web,
    .quick-link-icon,
    .exam-icon-web {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
}

/* Dark Section Styles - upGrad Style */
.dark-section {
    background: var(--dark-section);
    color: var(--white);
    padding: 5rem 0;
}

.dark-section h2,
.dark-section h3 {
    color: var(--white);
}

/* Form Styles - Modern */
.form-control,
.form-select {
    border-radius: 12px;
    border: 2px solid var(--border-color);
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    transition: all 0.3s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(10,35,66, 0.1);
    outline: none;
}

/* Table Styles */
.table {
    border-radius: 12px;
    overflow: hidden;
}

.table thead {
    background: var(--bg-light);
}

.table-hover tbody tr:hover {
    background: rgba(10,35,66, 0.05);
}

/* Pagination */
.pagination .page-link {
    border-radius: 8px;
    margin: 0 0.25rem;
    border: 2px solid var(--border-color);
    color: var(--text-dark);
    padding: 0.5rem 1rem;
}

.pagination .page-item.active .page-link {
    background: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--white);
}

.pagination .page-link:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
}

/* Modal Styles */
.modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Smooth Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Utility Classes */
.text-red {
    color: var(--primary-red) !important;
}

.bg-red {
    background: var(--primary-red) !important;
}

.shadow-custom {
    box-shadow: var(--shadow-lg);
}

.rounded-custom {
    border-radius: 20px;
}

/* ============================================
   NEW PROFESSIONAL DESIGN ELEMENTS
   ============================================ */

/* Hero Section Enhancements */
.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    line-height: 1.5;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.hero-main-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-dark);
    font-weight: 600;
    animation: float 3s ease-in-out infinite;
}

.floating-card i {
    font-size: 1.5rem;
    color: var(--primary-red);
}

.floating-card.card-1 {
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

.floating-card.card-2 {
    bottom: 20%;
    left: -10%;
    animation-delay: 1s;
}

.floating-card.card-3 {
    top: 50%;
    right: -5%;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.hero-search-wrapper {
    position: relative;
    background: var(--white);
    border-radius: 50px;
    padding: 0.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.search-icon-wrapper {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    z-index: 1;
}

.hero-search-input {
    padding-left: 3.5rem !important;
    border: none !important;
    background: transparent;
}

.hero-search-input:focus {
    box-shadow: none !important;
}

/* Statistics Bar Enhancements */
.stats-bar-container {
    margin-top: -4rem;
    position: relative;
    z-index: 3;
}

.stats-bar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-red);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--white);
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-dark);
    display: inline-block;
}

.stat-plus, .stat-k, .stat-percent {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-red);
}

.stat-label {
    display: block;
    color: var(--text-light);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Section Headers */
.section-header {
    margin-bottom: 3rem;
}

.section-title-small {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.4px;
    line-height: 1.3;
}

/* Quick Links Enhancements */
.quick-link-arrow {
    position: absolute;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: all 0.3s;
    color: var(--primary-red);
}

.quick-link-item:hover .quick-link-arrow {
    opacity: 1;
    transform: translateX(5px);
}

/* City Cards with Images */
.city-image-wrapper {
    position: relative;
    height: 200px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.city-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.city-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
}

.city-card-web:hover .city-image {
    transform: scale(1.1);
}

/* City Card Icon Only (No Image) */
.city-card-icon-only {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--white);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.city-card-icon-only:hover {
    border-color: var(--primary-red);
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-light);
}

.city-card-icon-only .city-icon-web {
    position: relative;
    top: auto;
    right: auto;
    width: 90px;
    height: 90px;
    background: var(--primary-red);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
    transition: all 0.3s ease;
}

.city-card-icon-only:hover .city-icon-web {
    background: var(--primary-red-dark);
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(10,35,66, 0.4);
}

.city-card-icon-only .city-content {
    padding: 0;
    text-align: center;
}

.city-card-icon-only h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.city-card-icon-only .city-colleges {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
}

.city-content {
    padding: 1.5rem;
    text-align: center;
}

.city-colleges {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Category Grid Enhancements */
.category-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 20px;
    z-index: -1;
}

.category-grid-item:hover .category-hover-effect {
    opacity: 0.05;
}

/* College Cards with Images */
.college-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.college-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.college-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.college-card-web:hover .college-overlay {
    opacity: 1;
}

.college-card-web:hover .college-image {
    transform: scale(1.1);
}

.college-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-red);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.4);
}

.college-card-body {
    padding: 1.5rem;
}

/* Modern Tabs */
.modern-tabs {
    border-bottom: 2px solid var(--border-color);
    justify-content: center;
}

.modern-tabs .nav-link {
    border: none;
    color: var(--text-light);
    font-weight: 500;
    padding: 1rem 2rem;
    border-radius: 0;
    position: relative;
    margin: 0 0.5rem;
}

.modern-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-red);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.modern-tabs .nav-link.active {
    color: var(--primary-red);
    background: transparent;
}

.modern-tabs .nav-link.active::after {
    transform: scaleX(1);
}

/* Newsletter Enhancements */
.newsletter-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0.3;
}

.newsletter-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2.5rem;
    color: var(--white);
    backdrop-filter: blur(10px);
}

.form-group-newsletter {
    position: relative;
}

.form-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    z-index: 1;
}

.form-group-newsletter .form-control,
.form-group-newsletter .form-select {
    padding-left: 3rem;
}

.newsletter-note {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Animations */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-up-delay-1 {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.animate-fade-in-up-delay-2 {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.animate-fade-in-up-delay-3 {
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

/* AOS Animation Support */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(30px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.8);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

[data-aos="flip-left"] {
    transform: rotateY(-90deg);
}

[data-aos="flip-left"].aos-animate {
    transform: rotateY(0);
}

/* Hero Stats Card (White Card on Right) */
.hero-stats-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 450px;
    margin-left: auto;
    position: relative;
    overflow: hidden;
    animation: statsCardFloat 6s ease-in-out infinite, statsCardFadeIn 1s ease-out;
    backdrop-filter: blur(10px);
}

.hero-stats-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(10,35,66, 0.05), transparent);
    animation: statsCardShine 3s linear infinite;
}

@keyframes statsCardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes statsCardFadeIn {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

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

.stat-card-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    padding: 0.6rem;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: statItemFadeIn 0.8s ease-out backwards;
}

.stat-card-item:nth-child(1) {
    animation-delay: 0.2s;
}

.stat-card-item:nth-child(2) {
    animation-delay: 0.4s;
}

.stat-card-item:nth-child(3) {
    animation-delay: 0.6s;
}

.stat-card-item:nth-child(4) {
    animation-delay: 0.8s;
}

@keyframes statItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card-item:hover {
    background: rgba(10,35,66, 0.05);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 8px 20px rgba(10,35,66, 0.15);
}

.stat-icon-small {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: iconPulse 2s ease-in-out infinite;
}

.stat-card-item:hover .stat-icon-small {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 25px rgba(10,35,66, 0.5);
    animation: iconBounce 0.6s ease-out;
}

@keyframes iconPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(10,35,66, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(10,35,66, 0.5);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1.15) rotate(5deg);
    }
    50% {
        transform: scale(1.25) rotate(-5deg);
    }
}

.stat-icon-small::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    border-radius: 14px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card-item:hover .stat-icon-small::before {
    opacity: 0.3;
    animation: iconGlow 1.5s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

.stat-content {
    display: flex;
    flex-direction: column;
    position: relative;
}

.stat-number-large {
    font-size: 1.65rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-dark), var(--primary-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -0.3px;
    transition: all 0.3s;
    position: relative;
}

.stat-card-item:hover .stat-number-large {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--primary-red), var(--primary-red-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label-small {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.2rem;
    font-weight: 500;
    transition: all 0.3s;
    letter-spacing: 0.2px;
}

.stat-card-item:hover .stat-label-small {
    color: var(--primary-red);
    font-weight: 600;
}

/* Hero Search Advanced */
.hero-search-advanced {
    display: flex;
    background: var(--white);
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.search-dropdown-wrapper {
    position: relative;
}

.search-dropdown {
    padding: 1.2rem 2rem 1.2rem 1.5rem;
    border: none;
    background: var(--bg-light);
    font-weight: 500;
    color: var(--text-dark);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
    cursor: pointer;
    border-radius: 50px 0 0 50px;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
}

.search-input-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    z-index: 1;
}

.hero-search-input {
    width: 100%;
    padding: 1.2rem 1.5rem 1.2rem 3.5rem !important;
    border: none;
    background: transparent;
    font-size: 1rem;
}

.hero-search-input:focus {
    outline: none;
    box-shadow: none;
}

.btn-search-hero {
    background: var(--primary-red);
    color: var(--white);
    border: none;
    padding: 1.2rem 2rem;
    border-radius: 0 50px 50px 0;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.btn-search-hero:hover {
    background: var(--primary-red-dark);
}

/* College Carousel */
.colleges-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

.colleges-carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.college-carousel-item {
    flex: 0 0 33.333%;
    padding: 0 0.75rem;
}

.college-carousel-controls {
    display: flex;
    gap: 0.5rem;
}

.carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary-red);
    background: var(--white);
    color: var(--primary-red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-btn:hover {
    background: var(--primary-red);
    color: var(--white);
    transform: scale(1.1);
}

.college-icon-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 60px;
    height: 60px;
    background: var(--primary-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    z-index: 2;
}

.rating-stars {
    font-size: 0.9rem;
}

.rating-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* Course Dots */
.course-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
    margin-right: 0.75rem;
}

/* City Icon in Image */
.city-icon-web {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    background: var(--primary-red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.5rem;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(10,35,66, 0.4);
}

/* Category Icon Solid Colors */
/* Removed !important override to allow inline gradient styles */
.category-grid-item[style*="background"] .category-icon-web {
    background: inherit !important;
}

/* Newsletter Form Adjustments */
.form-group-newsletter .form-select {
    padding-left: 3rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

/* Smooth Scroll Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Fix for Image Loading */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-stats-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 2rem;
        max-width: 100%;
    }
    
    .hero-search-advanced {
        flex-direction: column;
        border-radius: 16px;
    }
    
    .search-dropdown {
        border-radius: 16px 16px 0 0;
        width: 100%;
    }
    
    .btn-search-hero {
        border-radius: 0 0 16px 16px;
        width: 100%;
    }
    
    .college-carousel-item {
        flex: 0 0 100%;
    }
    
    .stats-bar {
        padding: 1.5rem 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .city-image-wrapper {
        height: 150px;
    }
    
    .college-image-wrapper {
        height: 150px;
    }
}

/* ============================================
   LISTING PAGES STYLES
   ============================================ */

/* Colleges Listing Page */
.colleges-listing-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.listing-page-header {
    text-align: center;
}

.listing-page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.listing-page-subtitle {
    font-size: 1.1rem;
    color: #64748b;
}

.listing-filters-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.listing-filter {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.95rem;
}

.listing-filter:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(10,35,66, 0.1);
}

.college-card-listing {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.college-card-listing:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.college-card-header-listing {
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.college-logo-listing {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}

.college-rating-listing {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.college-card-body-listing {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.college-name-listing {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.college-location-listing {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.college-meta-listing {
    margin-bottom: 1rem;
}

.college-approval-badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    background: #eef3f8;
    color: var(--primary-red);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(10,35,66, 0.2);
}

.college-info-listing {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}

.info-item i {
    color: var(--primary-red);
}

.btn-college-view {
    background: var(--primary-red);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-college-view:hover {
    background: #071a31;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.3);
    color: #fff;
}

.empty-state-card {
    background: #fff;
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-card i {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.empty-state-card h5 {
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.btn-primary-modern {
    background: var(--primary-red);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-modern:hover {
    background: #071a31;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.3);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .listing-page-title {
        font-size: 1.75rem;
    }
    
    .college-card-header-listing {
        padding: 1rem;
    }
    
    .college-card-body-listing {
        padding: 1rem;
    }
}

/* ============================================
   COLLEGE PROFILE PAGE STYLES
   ============================================ */

.college-profile-section {
    padding: 0 0 4rem 0;
    background: #f8f9fa;
}

/* ============================================
   COLLEGE BANNER SLIDER
   ============================================ */

.college-banner-slider-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
}

.college-banner-slider {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 16px;
}

.college-banner-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.college-banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.college-banner-slide.active {
    opacity: 1;
}

.college-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

.college-banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 2;
}

.college-banner-nav-btn {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #0f172a;
    font-size: 1.1rem;
}

.college-banner-nav-btn:hover {
    background: var(--primary-red);
    color: #fff;
    transform: scale(1.1);
}

.college-banner-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 2;
}

.banner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.banner-dot.active {
    background: var(--primary-red);
    border-color: #fff;
    transform: scale(1.2);
}

/* ============================================
   COLLEGE TABS NAVIGATION
   ============================================ */

.college-tabs-wrapper {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    position: sticky;
    top: 70px;
    z-index: 100;
    scroll-margin-top: 70px;
}

.college-tabs-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

.college-tab-nav-btn {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #64748b;
    flex-shrink: 0;
    margin: 0 0.5rem;
}

.college-tab-nav-btn:hover {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.college-tabs-track {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.college-tabs-track::-webkit-scrollbar {
    display: none;
}

.college-tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #64748b;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.college-tab-btn:hover {
    color: var(--primary-red);
    background: #eef3f8;
}

.college-tab-btn.active {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
    background: #eef3f8;
}

.college-tab-content-wrapper {
    margin-bottom: 2rem;
    scroll-margin-top: 160px; /* Account for header (70px) + tabs (~60px) + spacing (30px) */
}

/* Sidebar Layout */
.col-md-4 .profile-sidebar-card.sticky-top {
    position: sticky;
    top: 140px; /* Below tabs: 70px (header) + ~60px (tabs height) + 10px spacing */
    z-index: 50; /* Below tabs (z-index: 100) but above content */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .col-md-4 .profile-sidebar-card.sticky-top {
        position: relative;
        top: 0;
        max-height: none;
    }
}

/* Adjust sidebar position based on tabs wrapper */
@media (min-width: 992px) {
    .col-md-4 .profile-sidebar-card.sticky-top {
        top: 140px;
    }
}

.college-tab-content {
    display: none;
    scroll-margin-top: 160px; /* Ensure tab content appears below sticky tabs */
}

.college-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

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

.college-profile-header {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.college-logo-profile {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

.college-name-profile {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.college-location-approval-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.college-location-profile {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.college-approval-chip-profile {
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #eef3f8;
    color: var(--primary-red);
    border: 1px solid rgba(10,35,66, 0.2);
    white-space: nowrap;
}

.college-rating-profile {
    color: #64748b;
    font-size: 0.95rem;
}

.profile-section-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.25rem;
}

.profile-section-card:last-child {
    margin-bottom: 0;
}

.profile-section-header {
    background: var(--primary-red);
    color: #fff;
    padding: 0.875rem 1.25rem;
}

.profile-section-header h5,
.profile-section-header h6 {
    color: #fff;
    margin: 0;
}

.profile-section-body {
    padding: 1.25rem;
}

.info-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

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

.course-list {
    list-style: none;
    padding: 0;
}

.course-list {
    margin-bottom: 0;
}

.course-list li {
    padding: 0.625rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.course-list li:last-child {
    border-bottom: none;
}

.facilities-list {
    list-style: none;
    padding: 0;
}

.facilities-list {
    margin-bottom: 0;
}

.facilities-list li {
    padding: 0.375rem 0;
    font-size: 0.9rem;
}

.review-item {
    padding: 0.875rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.25rem;
}

.profile-sidebar-card:last-child {
    margin-bottom: 0;
}

.contact-item {
    padding: 0.625rem 0;
    border-bottom: 1px solid #f1f5f9;
    color: #64748b;
    font-size: 0.9rem;
}

.contact-item:last-child {
    border-bottom: none;
}

.btn-outline-primary-modern {
    border: 2px solid var(--primary-red);
    color: var(--primary-red);
    background: transparent;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-primary-modern:hover {
    background: var(--primary-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.3);
}

@media (max-width: 768px) {
    .college-name-profile {
        font-size: 1.5rem;
    }
    
    .college-logo-profile {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .college-profile-header {
        padding: 1.5rem;
    }
}

/* Enhanced College Profile Sections */
.college-profile-hero {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.college-key-benefits {
    margin-top: 1.5rem;
}

.benefit-item-small {
    display: flex;
    align-items: start;
    gap: 0.75rem;
    padding: 0.875rem;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.benefit-item-small:hover {
    background: #eef3f8;
    transform: translateY(-2px);
}

.benefit-item-small i {
    font-size: 1.75rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-item-small strong {
    display: block;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.college-cta-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 1.5rem;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
}

.program-details-list {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.875rem 0;
    margin: 1rem 0;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: #64748b;
    font-size: 0.9rem;
}

.detail-item i {
    color: var(--primary-red);
    width: 20px;
}

.feature-card-modern {
    text-align: center;
    padding: 1.25rem;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card-modern:hover {
    background: #eef3f8;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.1);
}

.feature-icon-modern {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.875rem;
    font-size: 1.75rem;
    color: #fff;
}

.feature-card-modern h6 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.stat-card {
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.1);
}

.stat-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary-red);
    line-height: 1;
    margin-bottom: 0.375rem;
}

.stat-label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.admission-steps {
    position: relative;
    padding-left: 2rem;
}

.admission-steps::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-red) 0%, #071a31 100%);
}

.step-item {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--primary-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    position: absolute;
    left: -2rem;
    box-shadow: 0 4px 8px rgba(10,35,66, 0.3);
}

.step-content {
    flex-grow: 1;
    padding-left: 2.5rem;
}

.step-content h6 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.375rem;
    font-size: 0.95rem;
}

.accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.625rem;
    overflow: hidden;
}

.accordion-button {
    background: #f8f9fa;
    color: #0f172a;
    font-weight: 600;
    border: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
}

.accordion-button:not(.collapsed) {
    background: var(--primary-red);
    color: #fff;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: var(--primary-red);
}

.accordion-body {
    padding: 1rem 1.25rem;
    background: #fff;
    color: #64748b;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .college-profile-hero {
        padding: 1.25rem;
    }
    
    .college-name-profile {
        font-size: 1.5rem;
    }
    
    .college-logo-profile {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .college-key-benefits {
        margin-top: 1rem;
    }
    
    .benefit-item-small {
        padding: 0.75rem;
    }
    
    .benefit-item-small i {
        font-size: 1.5rem;
    }
    
    .admission-steps {
        padding-left: 1.5rem;
    }
    
    .step-item {
        margin-bottom: 1.25rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        left: -1.5rem;
    }
    
    .step-content {
        padding-left: 2rem;
    }
    
    .stat-number {
        font-size: 1.75rem;
    }
    
    .profile-section-body {
        padding: 1rem;
    }
    
    .profile-section-header {
        padding: 0.75rem 1rem;
    }
    
    .feature-card-modern {
        padding: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .college-banner-section {
        padding: 1rem 0;
    }
    
    .college-banner-slider {
        height: 180px;
        border-radius: 12px;
    }
    
    .college-banner-nav-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .college-banner-dots {
        bottom: 1rem;
    }
    
    .banner-dot {
        width: 10px;
        height: 10px;
    }
    
    .college-tabs-wrapper {
        top: 70px;
    }
    
    .college-tab-btn {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
    
    .gallery-image {
        height: 150px;
    }
}

/* Table Optimizations */
.profile-section-body .table {
    margin-bottom: 0;
}

.profile-section-body .table thead th {
    font-size: 0.9rem;
    padding: 0.75rem;
    font-weight: 600;
}

.profile-section-body .table tbody td {
    font-size: 0.9rem;
    padding: 0.75rem;
    vertical-align: middle;
}

/* Remove extra spacing from paragraphs */
.profile-section-body p {
    margin-bottom: 1rem;
}

.profile-section-body p:last-child {
    margin-bottom: 0;
}

/* Optimize heading spacing */
.profile-section-body h6 {
    margin-bottom: 0.75rem;
}

.profile-section-body h6:last-child {
    margin-bottom: 0;
}

/* ============================================
   GALLERY SECTION
   ============================================ */

.gallery-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gallery-filter-btn {
    padding: 0.5rem 1.25rem;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.gallery-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.gallery-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    color: #fff;
    font-size: 2rem;
}

.gallery-caption {
    padding: 0.75rem;
    background: #fff;
}

.gallery-caption p {
    margin: 0;
    font-size: 0.9rem;
    color: #0f172a;
    font-weight: 600;
}

/* ============================================
   NEWS & ARTICLES SECTION
   ============================================ */

.news-card-small {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
}

.news-card-small:hover {
    background: #eef3f8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.1);
}

.news-date-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-red);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.news-title-small {
    color: #0f172a;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    padding-right: 4rem;
}

.news-excerpt-small {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.news-link-small {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.news-link-small:hover {
    color: #071a31;
}

/* ============================================
   AFFILIATED COLLEGES SECTION
   ============================================ */

.affiliated-college-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.affiliated-college-card:hover {
    background: #eef3f8;
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.1);
}

.affiliated-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.affiliated-info {
    flex-grow: 1;
}

.affiliated-info h6 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.affiliated-link {
    width: 35px;
    height: 35px;
    background: var(--primary-red);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.affiliated-link:hover {
    background: #071a31;
    transform: scale(1.1);
    color: #fff;
}

/* ============================================
   RECRUITER BADGES
   ============================================ */

.recruiter-badge {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.3s ease;
}

.recruiter-badge:hover {
    background: #eef3f8;
    border-color: var(--primary-red);
    color: var(--primary-red);
}

/* ============================================
   EXAMS PAGES STYLES
   ============================================ */

.exams-listing-section {
    padding: 2rem 0 3rem;
    background: #f8f9fa;
    min-height: 100vh;
}

.exams-listing-section .container {
    max-width: 1340px;
}

.exam-hero-card {
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    border-radius: 24px;
    padding: 2.5rem;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.eyebrow-label {
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
}

.exam-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.exam-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.exam-hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.exam-hero-stats .stat-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.exam-hero-stats .stat-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

.exam-search-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.exam-search-card .form-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: block;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border-radius: 14px;
    padding: 0.35rem 0.75rem;
}

.search-input-wrapper i {
    color: #94a3b8;
}

.search-input-wrapper input {
    border: none;
    box-shadow: none;
}

.quick-tags {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.quick-tags .pill-btn {
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quick-tags .pill-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.exam-filter-sidebar {
    background: #fff;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 4px 25px rgba(15, 23, 42, 0.08);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.exam-filter-sidebar::-webkit-scrollbar {
    width: 6px;
}

.exam-filter-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.exam-filter-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.exam-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.exam-filter-header h5 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.reset-filter-link {
    border: none;
    background: transparent;
    color: var(--primary-red);
    font-weight: 600;
}

.exam-filter-section {
    margin-bottom: 1.5rem;
}

.exam-filter-section h6 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-chip {
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-chip input[type="checkbox"] {
    display: none;
}

.filter-chip:hover {
    border-color: var(--primary-red);
    background: #eef3f8;
}

.filter-chip input[type="checkbox"]:checked + span,
.filter-chip:has(input[type="checkbox"]:checked) {
    background: var(--primary-red);
    color: #fff;
    border-color: var(--primary-red);
}

.filter-chip input:checked + span,
.filter-chip input:checked ~ span {
    color: var(--primary-red);
    font-weight: 600;
}

.status-pill-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.status-pill {
    border-radius: 12px;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.status-pill input {
    display: none;
}

.status-pill span {
    color: #475569;
}

.status-pill.open input:checked + span,
.status-pill.open input:checked ~ span {
    color: #16a34a;
    font-weight: 600;
}

.status-pill.upcoming input:checked + span,
.status-pill.upcoming input:checked ~ span {
    color: #d97706;
    font-weight: 600;
}

.status-pill.closed input:checked + span,
.status-pill.closed input:checked ~ span {
    color: #1a6b8a;
    font-weight: 600;
}

.tool-links a {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
}

.exam-top-toolbar {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    margin-bottom: 1.5rem;
}

.exam-count-badge {
    background: #eef3f8;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--primary-red);
}

.exam-sort-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.active-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.active-filter-pill {
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.active-filter-pill i {
    cursor: pointer;
}

.exam-list-card {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

.exam-list-card.d-none {
    display: none !important;
}

.exam-list-card:hover {
    border-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.exam-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.exam-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.exam-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}

.exam-card-body h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.exam-badge-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.exam-level-chip,
.exam-mode-chip,
.exam-status-chip {
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.exam-level-chip {
    background: #e0f2fe;
    color: #0369a1;
}

.exam-mode-chip {
    background: #ede9fe;
    color: #6d28d9;
}

.exam-status-chip {
    background: #eef3f8;
    color: #355d72;
}

.exam-status-chip.registration-open {
    background: #ecfdf5;
    color: #047857;
}

.exam-status-chip.upcoming {
    background: #fffbeb;
    color: #92400e;
}

.exam-status-chip.window-closed,
.exam-status-chip.closed {
    background: #f1f5f9;
    color: #64748b;
}

.exam-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.exam-card-actions .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.exam-card-actions .btn-outline-dark {
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    background: #fff;
}

.exam-card-actions .btn-outline-dark:hover {
    background: #f8f9fa;
    border-color: #cbd5e0;
}

.exam-card-actions .btn-primary-modern {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
}

.exam-card-actions .btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.exam-card-actions .btn-outline-dark {
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    background: #fff;
}

.exam-card-actions .btn-outline-dark:hover {
    background: #f8f9fa;
    border-color: #cbd5e0;
    color: #0f172a;
}

.exam-card-description {
    color: #475569;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.exam-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0.75rem 0;
    padding: 0.75rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.exam-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.exam-meta-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.exam-meta-grid span {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.exam-meta-grid strong {
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
}

.exam-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
}

.exam-stat i {
    color: var(--primary-red);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.exam-stat > div {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.exam-stat span {
    font-size: 0.7rem;
    color: #94a3b8;
    display: block;
}

.exam-stat strong {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    line-height: 1.3;
}

.exam-empty-state {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: #475569;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.exam-empty-state i {
    color: var(--primary-red);
}

.exam-list-wrapper {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .exam-filter-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .exam-hero-card {
        padding: 1.75rem;
    }
    
    .exam-hero-title {
        font-size: 1.75rem;
    }
    
    .exam-hero-stats {
        gap: 1.5rem;
    }
    
    .exam-hero-stats .stat-value {
        font-size: 1.5rem;
    }
    
    .exam-top-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .exam-list-card {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    .exam-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1rem;
    }
    
    .exam-meta-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .exam-secondary-grid {
        grid-template-columns: 1fr;
    }
    
    .exam-card-header {
        flex-direction: column;
    }
    
    .exam-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.exam-calendar-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.exam-detail-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.exam-detail-section .exam-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 0 0 2rem;
}

.mini-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    height: 100%;
}

.mini-stat-card i {
    font-size: 1.25rem;
    color: var(--primary-red);
}

.mini-stat-card span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}

.mini-stat-card strong {
    display: block;
    font-size: 1.1rem;
    color: #0f172a;
}

@media (min-width: 992px) {
    .exam-detail-section .exam-hero-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.exam-anchor-nav {
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 78px;
    z-index: 90;
}

.exam-anchor-nav span {
    font-weight: 600;
    color: #334155;
    margin-right: 0.35rem;
}

.exam-anchor-nav a {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.exam-anchor-nav a:hover,
.exam-anchor-nav a.active {
    background: #eef3f8;
    color: var(--primary-red);
}

.exam-detail-section .profile-section-card[id],
.exam-detail-section .profile-sidebar-card[id] {
    scroll-margin-top: 150px;
}

.exam-hero-card .btn-outline-dark {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    background: transparent;
    font-weight: 600;
    transition: all 0.3s ease;
}

.exam-hero-card .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.highlight-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.highlight-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: #475569;
}

.highlight-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-red);
    position: absolute;
    left: 0;
    top: 10px;
}

.key-point-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    height: 100%;
}

.timeline-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    border: 1px dashed #e2e8f0;
}

.stepper-list {
    counter-reset: stepper;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.stepper-list li {
    counter-increment: stepper;
    padding-left: 2.5rem;
    position: relative;
    margin-bottom: 1rem;
    color: #475569;
}

.stepper-list li::before {
    content: counter(stepper);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.update-card {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
    margin-bottom: 1rem;
}

.update-card:last-child {
    margin-bottom: 0;
}

.exam-detail-header {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.exam-icon-detail {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    flex-shrink: 0;
}

.exam-name-detail {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.exam-description-detail {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 768px) {
    .exam-name-detail {
        font-size: 1.5rem;
    }
    
    .exam-icon-detail {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .exam-detail-header {
        padding: 1.5rem;
    }
}

/* ============================================
   BLOG PAGES STYLES
   ============================================ */

.blog-listing-section {
    padding: 2rem 0 3rem;
    background: #f8f9fa;
    min-height: 100vh;
}

.blog-listing-section .container {
    max-width: 1340px;
}

.blog-hero-card {
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    border-radius: 24px;
    padding: 2.5rem;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
}

.blog-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.blog-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.blog-hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.blog-hero-stats .stat-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    color: #fff;
}

.blog-hero-stats .stat-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

.blog-search-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.blog-search-card .form-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: block;
}

.blog-filter-tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.blog-filter-btn {
    padding: 0.5rem 1.5rem;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 25px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
    border-color: var(--primary-red);
    background: var(--primary-red);
    color: #fff;
}

.blog-card-listing {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card-listing:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.blog-card-image {
    height: 200px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #fff;
}

.blog-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    color: #64748b;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.75rem 0;
    line-height: 1.4;
}

.blog-card-excerpt {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.blog-detail-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.blog-detail-hero {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-category-chip {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    background: #eef3f8;
    color: var(--primary-red);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.blog-excerpt-detail {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.blog-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.blog-meta span {
    color: #64748b;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-meta i {
    color: var(--primary-red);
}

.blog-anchor-nav {
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: sticky;
    top: 78px;
    z-index: 90;
}

.blog-anchor-nav span {
    font-weight: 600;
    color: #334155;
    margin-right: 0.35rem;
}

.blog-anchor-nav a {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.blog-anchor-nav a:hover,
.blog-anchor-nav a.active {
    background: #eef3f8;
    color: var(--primary-red);
}

.blog-detail-section .blog-content-section[id] {
    scroll-margin-top: 150px;
}

.blog-article {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-date-detail {
    color: #64748b;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-title-detail {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.blog-featured-image {
    height: 400px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #fff;
}

.blog-content-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.blog-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
}

.blog-content h2 {
    color: #0f172a;
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f1f5f9;
}

.blog-content h2:first-child {
    margin-top: 0;
}

.blog-content h3 {
    color: #0f172a;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.blog-content h4 {
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.blog-content p {
    margin-bottom: 1.25rem;
    color: #475569;
}

.blog-content ul,
.blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.blog-content ul li,
.blog-content ol li {
    margin-bottom: 0.75rem;
    color: #475569;
    line-height: 1.7;
}

.blog-content ul li {
    list-style-type: disc;
}

.blog-content ol li {
    list-style-type: decimal;
}

.blog-content strong {
    color: #0f172a;
    font-weight: 600;
}

.blog-content a {
    color: var(--primary-red);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-content a:hover {
    color: #071a31;
    text-decoration: underline;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
}

.blog-content blockquote {
    border-left: 4px solid var(--primary-red);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: #64748b;
    font-style: italic;
}

.blog-content-section[id] {
    scroll-margin-top: 150px;
}

.blog-share-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.related-article-item {
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.related-article-item:last-child {
    border-bottom: none;
}

.related-article-item h6 {
    color: #0f172a;
    transition: color 0.3s ease;
}

.related-article-item:hover h6 {
    color: var(--primary-red);
}

.blog-filter-bar {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.blog-filter-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.9rem;
}

.divider-dot {
    width: 4px;
    height: 4px;
    background: #cbd5e0;
    border-radius: 50%;
}

.featured-blog-card {
    /* background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%); */
    background: linear-gradient(135deg, #000000 0%, #071a31 100%);
    border-radius: 20px;
    padding: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.featured-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.featured-blog-card h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.featured-blog-card p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.featured-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.featured-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.blog-category-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #eef3f8;
    color: var(--primary-red);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.blog-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.blog-card-footer span {
    color: #64748b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.trending-stories-card,
.newsletter-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: trending;
}

.trending-list li {
    counter-increment: trending;
    padding: 1rem 0 1rem 2.5rem;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.trending-list li:last-child {
    border-bottom: none;
}

.trending-list li::before {
    content: counter(trending);
    position: absolute;
    left: 0;
    top: 1rem;
    width: 24px;
    height: 24px;
    background: var(--primary-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.trending-list li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.trending-list li h6 {
    color: #0f172a;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.trending-list li:hover h6 {
    color: var(--primary-red);
}

.trending-list li p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.trending-list li span {
    color: #94a3b8;
    font-size: 0.85rem;
}

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

.guide-links li {
    margin-bottom: 0.75rem;
}

.guide-links li:last-child {
    margin-bottom: 0;
}

.guide-links a {
    color: #475569;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.guide-links a:hover {
    color: var(--primary-red);
}

@media (max-width: 768px) {
    .blog-hero-card {
        padding: 1.75rem;
    }
    
    .blog-hero-title {
        font-size: 1.75rem;
    }
    
    .blog-hero-stats {
        gap: 1.5rem;
    }
    
    .blog-hero-stats .stat-value {
        font-size: 1.5rem;
    }
    
    .blog-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .blog-title-detail {
        font-size: 1.75rem;
    }
    
    .blog-featured-image {
        height: 250px;
        font-size: 3rem;
    }
    
    .blog-article {
        padding: 1.5rem;
    }
    
    .featured-blog-card {
        padding: 1.5rem;
    }
    
    .featured-blog-card h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   SEARCH PAGE STYLES
   ============================================ */

.search-page-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.search-filters-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 20px;
}

.filter-group {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1rem;
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

/* ============================================
   COUNSELLING REQUEST PAGE STYLES
   ============================================ */

.counselling-request-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.counselling-form-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.counselling-benefits-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 20px;
}

.benefit-item {
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.benefit-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.benefit-item h6 {
    color: #0f172a;
    margin-bottom: 0.25rem;
}

/* ============================================
   TOOLS PAGES STYLES
   ============================================ */

.tools-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.tool-form-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

.tool-results-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tool-info-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tracker-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.tracker-info p {
    margin-bottom: 0.75rem;
    color: #64748b;
}

.tracker-info p:last-child {
    margin-bottom: 0;
}

.tracker-info strong {
    color: #0f172a;
}

@media (max-width: 768px) {
    .search-filters-card {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }
    
    .counselling-benefits-card {
        position: relative;
        top: 0;
        margin-top: 2rem;
    }
}

/* ============================================
   ENQUIRY MODAL STYLING
   ============================================ */

.enquiry-modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.enquiry-modal-header {
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    color: #fff;
    border: none;
    padding: 1.5rem;
    border-radius: 20px 20px 0 0;
}

.enquiry-modal-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.enquiry-icon-wrapper {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.enquiry-icon-wrapper i {
    font-size: 1.5rem;
    color: #fff;
}

.enquiry-modal-header .modal-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.enquiry-modal-header .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.875rem;
}

.enquiry-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.enquiry-modal-header .btn-close:hover {
    opacity: 1;
}

.enquiry-modal-body {
    padding: 2rem;
}

.enquiry-modal-body .form-label {
    color: #0f172a;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.enquiry-modal-body .form-control,
.enquiry-modal-body .form-select {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.enquiry-modal-body .form-control:focus,
.enquiry-modal-body .form-select:focus {
    border-color: var(--primary-red);
    box-shadow: 0 0 0 0.2rem rgba(10,35,66, 0.15);
    outline: none;
}

.enquiry-modal-body .form-control-lg {
    padding: 0.875rem 1rem;
}

.enquiry-modal-body .form-select-lg {
    padding: 0.875rem 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.enquiry-modal-body textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.enquiry-modal-body .btn-primary-modern {
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.enquiry-modal-body .btn-primary-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10,35,66, 0.3);
}

.enquiry-modal-body .btn-outline-secondary {
    border: 2px solid #e2e8f0;
    color: #64748b;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.enquiry-modal-body .btn-outline-secondary:hover {
    background: #f8f9fa;
    border-color: #cbd5e0;
    color: #475569;
}

@media (max-width: 576px) {
    .enquiry-modal-body {
        padding: 1.5rem;
    }
    
    .enquiry-modal-header {
        padding: 1.25rem;
    }
    
    .enquiry-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .enquiry-icon-wrapper i {
        font-size: 1.25rem;
    }
    
    .enquiry-modal-header .modal-title {
        font-size: 1.1rem;
    }
}

/* ============================================
   COLLEGES LISTING WITH FILTERS
   ============================================ */

/* Filters Sidebar */
.filters-sidebar {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    margin-bottom: 2rem;
}

.filters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.filters-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.filters-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.colleges-listing-section {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 2rem 0;
}

.filters-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filters-header h5 {
    font-weight: 700;
    color: #0f172a;
    font-size: 1.25rem;
}

.colleges-count-badge {
    background: #eef3f8;
    color: var(--primary-red);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.set-default-link {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.set-default-link:hover {
    text-decoration: underline;
}

.filter-section {
    margin-bottom: 1.5rem;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section-header {
    margin-bottom: 0.75rem;
}

.filter-section-header {
    margin-bottom: 1rem;
}

.filter-section-header h6 {
    font-weight: 700;
    color: #0f172a;
    font-size: 1rem;
}

.filter-search-box {
    position: relative;
    margin-bottom: 0.75rem;
}

.filter-search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
}

.filter-search-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.3s ease;
}

.filter-search-input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(10,35,66, 0.1);
}

.filter-options {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-option-item {
    margin-bottom: 0;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s ease;
    margin: 0;
}

.filter-checkbox:hover {
    background: #f8f9fa;
}

.filter-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e0;
    border-radius: 4px;
    margin-right: 0.625rem;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.filter-checkbox input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-red);
    border-color: var(--primary-red);
}

.filter-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-label {
    font-size: 0.875rem;
    color: #0f172a;
    flex: 1;
    line-height: 1.4;
}

.filter-count {
    color: #64748b;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Top Filter Bar */
.top-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    gap: 1rem;
}

.active-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-tag {
    background: #eef3f8;
    color: var(--primary-red);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-tag i {
    cursor: pointer;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.filter-tag i:hover {
    transform: scale(1.2);
}

.clear-all-filters {
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.clear-all-filters:hover {
    color: var(--primary-red);
    text-decoration: underline;
}

.sort-dropdown-wrapper {
    position: relative;
}

.sort-dropdown {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    transition: all 0.3s ease;
}

.sort-dropdown:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 3px rgba(10,35,66, 0.1);
}

/* Colleges Grid */
.colleges-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Modern College Card */
.college-card-modern {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
}

.college-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.college-card-image {
    position: relative;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: auto;
    min-height: 180px;
    max-height: 200px;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch;
}

.college-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.college-card-modern:hover .college-card-image img {
    transform: scale(1.05);
}

.college-favorite-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.college-favorite-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.college-favorite-btn i {
    color: #64748b;
    font-size: 1rem;
}

.college-favorite-btn:hover i {
    color: var(--primary-red);
}

.college-card-content {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.college-logo-small {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #000000 0%, #372601 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
    position: absolute;
    top: 1rem;
    right: 1.25rem;
}

.college-logo-small span {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.college-card-name {
    margin-bottom: 0.25rem;
    padding-right: 70px;
}

.college-card-name a {
    color: #0f172a;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.2s ease;
    display: block;
}

.college-card-name a:hover {
    color: var(--primary-red);
}

.college-card-location {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
}

.college-card-rating {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.college-card-rating strong {
    color: #0f172a;
    font-size: 1rem;
}

.college-card-rating .text-muted {
    font-size: 0.875rem;
}

.college-card-course-info {
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.college-card-course-info .course-link {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.college-card-course-info .course-link:hover {
    text-decoration: underline;
}

.college-card-course-info .separator {
    color: #cbd5e0;
    margin: 0 0.5rem;
}

.college-card-course-info .course-name {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    margin-left: 0.5rem;
}

.college-card-course-info .fee-range {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}


.college-card-ranking {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.college-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.btn-apply-now {
    flex: 1;
    background: var(--primary-red);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-apply-now:hover {
    background: #071a31;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10,35,66, 0.3);
    color: #fff;
}

.btn-brochure {
    background: #fff;
    color: #0f172a;
    border: 2px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-brochure:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
    background: #eef3f8;
}

/* Empty State */
.empty-state-card {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-card i {
    font-size: 4rem;
    color: #cbd5e0;
    margin-bottom: 1.5rem;
}

.empty-state-card h5 {
    color: #0f172a;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .filters-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 2rem;
    }
    
    .colleges-grid {
        grid-template-columns: 1fr;
    }
    
    .top-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .college-card-modern {
        flex-direction: column;
    }
    
    .college-card-image {
        width: 100%;
        min-width: 100%;
        height: 180px;
        min-height: 180px;
    }
    
    .college-logo-small {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    .colleges-grid {
        grid-template-columns: 1fr;
    }
}

/* Ensure proper layout structure */
.colleges-listing-section .container {
    max-width: 1340px;
}

/* ============================================
   AUTH PAGES STYLES (LOGIN & REGISTER)
   ============================================ */

.auth-section {
    padding: 1rem 0 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: calc(100vh - 200px);
}

.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
    border: 1px solid #f1f5f9;
    max-width: 450px;
    margin: 0 auto;
}

.auth-card-header {
    margin-bottom: 1.25rem;
}

.auth-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 2rem;
    color: #fff;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.alert-danger-modern,
.alert-success-modern {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    border: none;
}

.alert-danger-modern {
    background: #eef3f8;
    color: #071a31;
}

.alert-success-modern {
    background: #f0fdf4;
    color: #16a34a;
}

.auth-form {
    margin-top: 1.5rem;
}

.form-group-modern {
    margin-bottom: 1.25rem;
}

.form-label-modern {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.form-control-modern {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #fff;
    color: #0f172a;
}

.form-control-modern:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 4px rgba(10,35,66, 0.1);
    background: #fff;
}

.form-control-modern::placeholder {
    color: #94a3b8;
}

.form-control-modern[readonly] {
    background: #f8f9fa;
    cursor: not-allowed;
}

.form-control-modern select,
select.form-control-modern {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-control-modern {
    padding-right: 3rem; /* Make room for the eye icon */
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    transition: color 0.3s ease;
}

.password-toggle:hover {
    color: var(--primary-red);
}

.password-toggle:focus {
    outline: none;
}

.form-check-modern {
    display: flex;
    align-items: center;
}

.form-check-input-modern {
    width: 18px;
    height: 18px;
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--primary-red);
}

.form-check-label-modern {
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
    margin: 0;
}

.forgot-password-link {
    color: var(--primary-red);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: #071a31;
    text-decoration: underline;
}

.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
}

.auth-divider span {
    position: relative;
    background: #fff;
    padding: 0 1rem;
    color: #64748b;
    font-size: 0.85rem;
}

.social-login-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.btn-social {
    padding: 0.75rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: #fff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-google:hover {
    border-color: #ea4335;
    color: #ea4335;
}

.btn-facebook:hover {
    border-color: #1877f2;
    color: #1877f2;
}

.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.auth-footer p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.auth-link {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-link:hover {
    color: #071a31;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .auth-section {
        padding: 1.5rem 0;
        min-height: calc(100vh - 150px);
    }
    
    .auth-card {
        padding: 1.5rem;
        border-radius: 16px;
        max-width: 100%;
    }
    
    .auth-title {
        font-size: 1.35rem;
    }
    
    .auth-icon {
        width: 50px;
        height: 50px;
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }
    
    .auth-subtitle {
        font-size: 0.85rem;
    }
    
    .form-group-modern {
        margin-bottom: 1rem;
    }
    
    .social-login-buttons {
        grid-template-columns: 1fr;
    }
}

.colleges-listing-section .row {
    margin: 0;
}

.colleges-listing-section .col-lg-3,
.colleges-listing-section .col-lg-9 {
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================
   USER DASHBOARD STYLES
   ============================================ */

.user-dashboard-section {
    padding: 2rem 0 3rem;
    background: #f8f9fa;
    min-height: calc(100vh - 200px);
}

.dashboard-header {
    background: #fff;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dashboard-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.dashboard-subtitle {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.dashboard-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.dashboard-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #fff;
    flex-shrink: 0;
}

.stat-content {
    flex-grow: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1;
}

.stat-label {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.dashboard-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dashboard-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card-header h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.dashboard-card-body {
    padding: 1.5rem;
}

.college-list-item,
.enquiry-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.3s ease;
}

.college-list-item:last-child,
.enquiry-list-item:last-child {
    border-bottom: none;
}

.college-list-item:hover,
.enquiry-list-item:hover {
    background: #f8fafc;
}

.college-list-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.college-list-content,
.enquiry-content {
    flex-grow: 1;
}

.college-list-content h6,
.enquiry-content h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.college-list-actions,
.enquiry-actions {
    display: flex;
    gap: 0.5rem;
}

.enquiry-status-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.enquiry-status-badge.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.enquiry-status-badge.status-responded {
    background: #dbeafe;
    color: #2563eb;
}

.enquiry-status-badge.status-resolved {
    background: #d1fae5;
    color: #059669;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 3rem;
    color: #cbd5e0;
    margin-bottom: 1rem;
}

.empty-state h6 {
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.quick-action-card {
    display: block;
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 100%;
}

.quick-action-card:hover {
    border-color: var(--primary-red);
    background: #eef3f8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.quick-action-card i {
    font-size: 2rem;
    color: var(--primary-red);
    margin-bottom: 0.75rem;
}

.quick-action-card h6 {
    color: #0f172a;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 auto;
}

.profile-details {
    margin-top: 1rem;
}

.profile-detail-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: #475569;
    font-size: 0.9rem;
}

.deadline-list {
    margin-bottom: 1rem;
}

.deadline-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.deadline-item:last-child {
    border-bottom: none;
}

.deadline-date {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-red) 0%, #071a31 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.deadline-day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.deadline-month {
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.deadline-content h6 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.application-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.3s ease;
}

.application-list-item:last-child {
    border-bottom: none;
}

.application-list-item:hover {
    background: #f8fafc;
}

.application-status-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.application-status-badge.status-under-review {
    background: #fef3c7;
    color: #d97706;
}

.application-status-badge.status-accepted {
    background: #d1fae5;
    color: #059669;
}

.application-status-badge.status-rejected {
    background: #fee2e2;
    color: #1a6b8a;
}

.application-status-badge.status-pending {
    background: #e0e7ff;
    color: #4f46e5;
}

.application-content {
    flex-grow: 1;
}

.application-content h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.application-actions {
    display: flex;
    gap: 0.5rem;
}

.profile-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #eef3f8;
    color: var(--primary-red);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    color: #475569;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: color 0.3s ease;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item:hover {
    color: var(--primary-red);
}

.activity-stats {
    margin-top: 0.5rem;
}

.activity-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.activity-label {
    color: #64748b;
    font-size: 0.9rem;
}

.activity-value {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
}

.review-list {
    margin: 0;
    padding: 0;
}

.review-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.3s ease;
}

.review-list-item:last-child {
    border-bottom: none;
}

.review-list-item:hover {
    background: #f8fafc;
}

.review-college-info {
    flex-grow: 1;
    padding-right: 1.5rem;
}

.review-college-info h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.review-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.review-rating .fa-star {
    font-size: 0.9rem;
}

.review-rating .text-warning {
    color: #fbbf24;
}

.review-text {
    line-height: 1.6;
    color: #64748b;
}

.review-status-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.review-status-badge.status-published {
    background: #d1fae5;
    color: #059669;
}

.review-status-badge.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.review-status-badge.status-rejected {
    background: #fee2e2;
    color: #1a6b8a;
}

.review-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
}

.review-actions .btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .user-dashboard-section {
        padding: 1.5rem 0 2rem;
    }
    
    .dashboard-title {
        font-size: 1.5rem;
    }
    
    .dashboard-stat-card {
        padding: 1.25rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    .college-list-item,
    .enquiry-list-item,
    .application-list-item {
        flex-wrap: wrap;
    }
    
    .college-list-actions,
    .enquiry-actions,
    .application-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ==========================================================================
   Progressive Education Point theme
   Palette and type taken from the PEP landing page: navy #0A2342, deep navy
   #071A31, gold #D9AE66, teal #355D72 / #1A6B8A; Playfair Display + DM Sans.
   ========================================================================== */
:root {
    --pep-navy: #0a2342;
    --pep-navy-deep: #071a31;
    --pep-navy-soft: #17364b;
    --pep-gold: #d9ae66;
    --pep-gold-light: #e0bc80;
    --pep-gold-hover: #c99a4b;
    --pep-teal: #355d72;
    --pep-teal-bright: #1a6b8a;
    --pep-cream: #f7f7f4;
    --pep-light: #f5f7fa;
    --pep-border: #dde3ea;
    --pep-text: #1c2b3a;
    --pep-muted: #6b7b8d;
    --text-dark: var(--pep-text);
    --text-light: var(--pep-muted);
    --border-color: var(--pep-border);
}

body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--pep-text); }
h1, h2, h3,
.section-title, .section-title-small, .section-title-modern, .hero-title,
.find-us-title, .quick-connect-title, .partner-title, .news-section-title,
.testimonials-title, .journey-heading h2, .journey-content h3, .college-name {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.3px;
}
.section-title, .section-title-small, .section-title-modern { color: var(--pep-navy); font-weight: 700; }
.pep-eyebrow { font: 600 12px 'DM Sans', sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--pep-teal); }
.pep-eyebrow-light { color: var(--pep-gold-light); }

/* Buttons */
.pep-btn-gold, .hero-banner-web .hero-cta {
    display: inline-flex; align-items: center; min-height: 48px;
    background: var(--pep-gold); color: var(--pep-navy) !important;
    border: 0; border-radius: 7px; padding: 13px 22px;
    font-weight: 700; font-size: 0.95rem; text-decoration: none;
    box-shadow: none; transition: background 0.2s, transform 0.2s;
}
.pep-btn-gold:hover, .hero-banner-web .hero-cta:hover { background: var(--pep-gold-hover); transform: translateY(-1px); color: var(--pep-navy) !important; }
.btn-danger, .btn-danger-modern { background: var(--pep-navy); border-color: var(--pep-navy); color: #fff; }
.btn-danger:hover, .btn-danger-modern:hover { background: var(--pep-navy-deep); border-color: var(--pep-navy-deep); color: #fff; }
i.text-danger, .fas.text-danger, .fa.text-danger { color: var(--pep-teal-bright) !important; }

/* Navbar: navy bar, gold login, PEP lockup */
.modern-navbar-ultra { background: var(--pep-navy) !important; border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 1px 0 #ffffff12; }
.modern-navbar-ultra .navbar-backdrop { display: none; }
.pep-nav-logo { width: 52px; height: 52px; border-radius: 50%; background: #fff; object-fit: contain; flex-shrink: 0; }
.pep-brand-lockup { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.modern-navbar-ultra .brand-text-modern {
    background: none; -webkit-text-fill-color: #f5f7fb; color: #f5f7fb;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.2px; white-space: nowrap;
}
.pep-brand-sub { font-size: 0.62rem; color: #c8d5e3; letter-spacing: 0.3px; margin-top: 3px; white-space: nowrap; }
.modern-navbar-ultra .nav-link-modern,
.modern-navbar-ultra .nav-action-link-modern { color: rgba(255,255,255,0.85) !important; }
.modern-navbar-ultra .nav-link-modern:hover,
.modern-navbar-ultra .nav-action-link-modern:hover { color: #fff !important; background: rgba(255,255,255,0.1); }
.modern-navbar-ultra .nav-action-icon-modern { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }
.modern-navbar-ultra .btn-outline-primary-modern { background: var(--pep-gold); border-color: var(--pep-gold); color: var(--pep-navy); }
.modern-navbar-ultra .btn-outline-primary-modern:hover { background: var(--pep-gold-hover); border-color: var(--pep-gold-hover); color: var(--pep-navy); }
.modern-navbar-ultra .btn-search-ultra { background: var(--pep-gold); color: var(--pep-navy); }
.modern-navbar-ultra .navbar-toggler { border-color: rgba(255,255,255,0.4); }
.modern-navbar-ultra .navbar-toggler-icon { filter: invert(1); }
.mega-menu-ultra .mega-menu-icon-box { background: var(--pep-navy); }

/* Hero */
.hero-banner-web { min-height: 72vh; padding: 0; }
.hero-banner-web .hero-slide { background-position: 70% center; }
.hero-banner-web .hero-overlay { background: linear-gradient(100deg, rgba(10,32,57,0.97) 0%, rgba(10,32,57,0.9) 45%, rgba(23,54,75,0.55) 100%); }
.hero-banner-content { padding: 72px 0 64px; }
.pep-hero-kicker { display: flex; align-items: center; gap: 10px; color: #d6c4a4; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 22px; }
.pep-hero-kicker span { width: 6px; height: 6px; border-radius: 50%; background: var(--pep-gold); flex-shrink: 0; }
.hero-banner-web .hero-title { font-size: clamp(2.3rem, 4.4vw, 4rem); font-weight: 400; line-height: 1.14; letter-spacing: -1.5px; text-shadow: none; color: #fff; }
.hero-banner-web .hero-title span { color: var(--pep-gold-light); }
.hero-banner-web .hero-subtitle { color: #c0ceda; max-width: 470px; line-height: 1.85; font-size: 1rem; }
.pep-hero-outline { display: inline-flex; align-items: center; min-height: 48px; padding: 13px 22px; border: 1px solid #708396; border-radius: 7px; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.2s, border-color 0.2s; }
.pep-hero-outline:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.pep-hero-footnote { color: #93aabc; font-size: 0.75rem; letter-spacing: 0.35px; margin: 0; }
.pep-clarity-card { background: rgba(7,26,49,0.78); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 28px; color: #fff; backdrop-filter: blur(6px); max-width: 440px; margin-left: auto; }
.pep-clarity-eyebrow { color: var(--pep-gold-light); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 10px; }
.pep-clarity-card h2 { font-size: 1.7rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
.pep-clarity-sub { color: #b9c8d6; font-size: 0.9rem; margin-bottom: 18px; }
.pep-clarity-row { display: grid; grid-template-columns: 36px 1fr 16px; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.pep-clarity-row:hover { color: var(--pep-gold-light); }
.pep-clarity-num { font-family: 'Playfair Display', Georgia, serif; color: var(--pep-gold); font-size: 1.1rem; }
.pep-clarity-row strong { display: block; font-weight: 600; font-size: 0.98rem; }
.pep-clarity-row small { display: block; color: #a9bccd; font-size: 0.8rem; }

/* Stats strip */
.pep-stats-bar { background: #fff; border-bottom: 1px solid var(--pep-border); padding: 26px 0; }
.pep-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.pep-stats-grid div { border-left: 2px solid var(--pep-gold); padding-left: 14px; }
.pep-stats-grid strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; color: var(--pep-navy); font-weight: 600; }
.pep-stats-grid span { color: var(--pep-muted); font-size: 0.85rem; }

/* Quick links, cities, categories */
.quick-links-web, .explore-future-section { background: var(--pep-light); }
.top-cities-section-modern { background: var(--pep-navy-deep); }
.top-cities-section-modern .pep-eyebrow { color: var(--pep-gold-light); }
.top-cities-section-modern .city-card-modern { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
.top-cities-section-modern .college-count-modern-simple { color: var(--pep-gold-light) !important; }
.quick-link-icon { background: var(--pep-navy); color: var(--pep-gold); }
.category-icon-web { background: var(--pep-navy) !important; box-shadow: none !important; color: var(--pep-gold); }

/* Featured universities */
.college-rating-chip { color: var(--pep-navy); }
.college-rating-chip i { color: var(--pep-gold); }
.college-approval-chip { color: var(--pep-navy); background: #f3ede1; border-color: #e7d6b4; }
.college-location i { color: var(--pep-teal-bright); }
.college-logo-chip { background: var(--pep-navy); color: var(--pep-gold); }

/* Domains */
.pep-domains-section { padding: 72px 0; background: #fff; }
.pep-domain-card { display: flex; flex-direction: column; height: 100%; padding: 24px; border: 1px solid var(--pep-border); border-radius: 14px; background: #fff; color: var(--pep-text); text-decoration: none; box-shadow: 0 3px 16px rgba(21,38,62,0.04); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.pep-domain-card:hover { border-color: var(--pep-gold); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,35,66,0.1); color: var(--pep-text); }
.pep-domain-icon { width: 46px; height: 46px; border-radius: 10px; background: #eaf1f8; color: var(--pep-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 16px; }
.pep-domain-card h3 { font-size: 1.15rem; color: var(--pep-navy); margin-bottom: 8px; }
.pep-domain-card p { font-size: 0.88rem; color: var(--pep-muted); line-height: 1.65; flex: 1; }
.pep-domain-link { font-size: 0.85rem; font-weight: 700; color: var(--pep-teal-bright); }

/* How it works (journey) */
.apna-journey-section { background: var(--pep-navy-deep); }
.journey-eyebrow { color: var(--pep-gold-light); }
.journey-heading h2 span { color: var(--pep-gold-light); }
.journey-dark { background: var(--pep-navy-deep); }
.journey-crimson { background: linear-gradient(135deg, var(--pep-navy) 0%, var(--pep-navy-soft) 100%); }
.journey-purple, .journey-royal { background: linear-gradient(135deg, #0d2d4f 0%, var(--pep-teal) 100%); }
.journey-emerald { background: linear-gradient(135deg, var(--pep-navy-deep) 0%, #1f4a5e 100%); }
.journey-btn { background: var(--pep-gold); color: var(--pep-navy); }
.journey-btn:hover { background: var(--pep-gold-hover); color: var(--pep-navy); }

/* Partner universities strip */
.partner-eyebrow { color: var(--pep-teal); }
.partner-title { color: var(--pep-navy); }

/* Branches */
.find-us-eyebrow { color: var(--pep-teal); }
.find-us-title { color: var(--pep-navy); }
.find-us-lead { color: var(--pep-muted); margin-bottom: 1.25rem; }
.find-us-nearby-section .text-primary-red { color: var(--pep-gold-hover) !important; }
.find-us-section .benefit-icon, .find-us-nearby-section .benefit-icon { background: #eaf1f8; color: var(--pep-navy); }
.benefit-text p { margin-bottom: 4px; }
.pep-branch-phone { font-weight: 700; color: var(--pep-teal-bright); text-decoration: none; font-size: 0.9rem; }
.btn-call-support { border-color: var(--pep-navy); color: var(--pep-navy); }
.btn-visit-office { background: var(--pep-navy); border-color: var(--pep-navy); }
.btn-visit-office:hover { background: var(--pep-navy-deep); border-color: var(--pep-navy-deep); }

/* Partner program */
.pep-partner-section { padding: 72px 0; background: var(--pep-light); }
.pep-partner-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; align-items: center; background: linear-gradient(115deg, #0a2039, #17364b); color: #fff; border-radius: 18px; padding: 44px; }
.pep-partner-intro h2 { font-size: 1.8rem; line-height: 1.25; color: #fff; }
.pep-partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pep-partner-grid div { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 18px; }
.pep-partner-grid i { color: var(--pep-gold); font-size: 1.2rem; margin-bottom: 10px; }
.pep-partner-grid h3 { font-size: 1.02rem; color: #fff; margin-bottom: 6px; }
.pep-partner-grid p { font-size: 0.85rem; color: #c0ceda; margin: 0; line-height: 1.6; }

/* Quick connect */
.quick-connect-section { background: linear-gradient(115deg, #0a2039, #17364b); }
.quick-connect-icon i, .quick-connect-section .quick-connect-icon { color: var(--pep-gold); }
.btn-quick-connect-submit { background: var(--pep-gold); color: var(--pep-navy); }
.btn-quick-connect-submit:hover { background: var(--pep-gold-hover); color: var(--pep-navy); }

/* Footer */
.pep-footer { background: var(--pep-navy-deep) !important; padding: 56px 0 24px; }
.pep-footer-logo { width: 76px; height: 76px; border-radius: 50%; background: #fff; object-fit: contain; }
.pep-footer-name { font-family: 'Playfair Display', Georgia, serif; color: #fff; }
.pep-footer-desc { color: #b1c1d1; font-size: 0.88rem; line-height: 1.7; max-width: 360px; }
.pep-footer h6 { color: var(--pep-gold-light); font-weight: 600; letter-spacing: 0.4px; }
.pep-footer .footer-links a { color: #c8d5e3; text-decoration: none; font-size: 0.9rem; }
.pep-footer .footer-links a:hover { color: #fff; }
.pep-footer .footer-links li { margin-bottom: 8px; }
.pep-branch { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; font-size: 0.85rem; color: #b1c1d1; }
.pep-branch strong { color: #fff; font-weight: 600; }
.pep-branch a { color: #e2d1b0; text-decoration: none; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.pep-branch a:hover { color: #fff; }
.pep-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 28px; padding-top: 20px; font-size: 0.8rem; color: #93aabc; }
.scroll-to-top { background: var(--pep-gold); color: var(--pep-navy); }

@media (max-width: 1199.98px) {
    .pep-brand-sub { display: none; }
}
@media (max-width: 991.98px) {
    .pep-clarity-card { margin: 28px 0 0; max-width: none; }
    .pep-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pep-partner-panel { grid-template-columns: 1fr; padding: 32px 24px; }
}
@media (max-width: 575.98px) {
    .pep-nav-logo { width: 42px; height: 42px; }
    .modern-navbar-ultra .brand-text-modern { font-size: 0.92rem; white-space: normal; max-width: 160px; }
    .hero-banner-content { padding: 44px 0 36px; }
    .pep-hero-outline, .hero-banner-web .hero-cta { width: 100%; justify-content: center; }
    .pep-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .pep-partner-grid { grid-template-columns: 1fr; }
}

/* Inner page hero + partner page */
.pep-page-hero { background: linear-gradient(115deg, #0a2039, #17364b); color: #fff; padding: 64px 0 56px; }
.pep-page-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; letter-spacing: -1px; max-width: 760px; }
.pep-page-hero p:not(.pep-eyebrow) { color: #c0ceda; max-width: 640px; line-height: 1.8; margin: 14px 0 0; }
.pep-partner-page { padding: 64px 0 72px; background: var(--pep-light); }
.journey-steps::before { background: linear-gradient(180deg, rgba(217,174,102,0.9) 0%, rgba(217,174,102,0.35) 100%); }
.college-logo-small.has-logo { background: #fff; border: 1px solid var(--pep-border); padding: 4px; }
.college-logo-small.has-logo img { width: 100%; height: 100%; object-fit: contain; }

/* University profile (PEP data) */
.college-logo-profile.has-logo { background: #fff; border: 1px solid var(--pep-border); padding: 6px; overflow: hidden; }
.college-logo-profile.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.college-location-profile i { color: var(--pep-teal-bright); }
.college-approval-chip-profile { background: #f3ede1; color: var(--pep-navy); border: 1px solid #e7d6b4; }
.pep-nirf-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--pep-navy); color: #fff; font-size: 0.8rem; text-decoration: none; }
.pep-nirf-badge strong { color: var(--pep-gold); font-family: 'Playfair Display', Georgia, serif; font-size: 0.95rem; }
.pep-nirf-badge:hover { color: #fff; background: var(--pep-navy-soft); }
.college-key-benefits .benefit-item-small i { color: var(--pep-gold-hover); }
.pep-overview p { line-height: 1.75; }
.pep-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.pep-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pep-border); }
.pep-facts dt { font-weight: 600; color: var(--pep-muted); font-size: 0.88rem; }
.pep-facts dd { margin: 0; text-align: right; color: var(--pep-text); font-size: 0.9rem; }
.pep-facts dd a { color: var(--pep-teal-bright); }
.pep-course-table th { color: var(--pep-navy); font-weight: 700; font-size: 0.85rem; }
.pep-fee-note { font-size: 0.82rem; color: var(--pep-muted); background: var(--pep-light); border-left: 3px solid var(--pep-gold); padding: 10px 14px; border-radius: 6px; margin-top: 12px; }
.pep-doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pep-doc-list i { color: var(--pep-teal-bright); }
.contact-item a { color: var(--pep-text); text-decoration: none; }
.contact-item i { color: var(--pep-teal-bright); }
@media (max-width: 767.98px) { .pep-facts { grid-template-columns: 1fr; } }
/* IILM Jaipur's logo is white artwork; show it on navy as the PEP directory does */
img[src*="iilm-j-logo"] { background: var(--pep-navy); border-radius: 6px; padding: 4px; }

/* ==========================================================================
   React-style UI layer (Inter, slate neutrals, white header, search-first hero)
   Overrides the earlier landing-page-inspired theme above.
   ========================================================================== */
:root {
    --rx-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rx-text: #101828; --rx-text-2: #344054; --rx-muted: #667085; --rx-border: #e4e7ec; --rx-bg: #f8fafc;
    --rx-primary: #0b2a4a; --rx-primary-hover: #0f3a66; --rx-accent: #c8963e; --rx-blue: #175cd3;
}
html body { font-family: var(--rx-font); color: var(--rx-text); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
.section-title, .section-title-small, .section-title-modern, .hero-title, .find-us-title, .quick-connect-title,
.partner-title, .news-section-title, .testimonials-title, .journey-heading h2, .journey-content h3, .college-name,
.pep-domain-card h3, .pep-partner-intro h2, .pep-partner-grid h3, .pep-page-hero h1, .pep-footer-name,
.college-name-profile, .pep-clarity-card h2, .pep-stats-grid strong, .city-name-modern-simple {
    font-family: var(--rx-font) !important; letter-spacing: -0.02em;
}
.section-title, .section-title-small, .section-title-modern { font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important; font-weight: 700 !important; color: var(--rx-text) !important; }
.text-muted, .section-subtitle-modern, .section-subtitle { color: var(--rx-muted) !important; }

/* Header: white, hairline border */
.modern-navbar-ultra { background: rgba(255,255,255,0.92) !important; backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--rx-border) !important; box-shadow: none !important; padding: 10px 0 !important; }
.modern-navbar-ultra .brand-text-modern { -webkit-text-fill-color: var(--rx-text) !important; color: var(--rx-text) !important; font-family: var(--rx-font) !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: -0.01em; }
.modern-navbar-ultra .pep-brand-sub { color: var(--rx-muted) !important; }
.modern-navbar-ultra .pep-nav-logo { border: 1px solid var(--rx-border); }
.modern-navbar-ultra .nav-link-modern, .modern-navbar-ultra .nav-action-link-modern { color: var(--rx-text-2) !important; font-weight: 500 !important; }
.modern-navbar-ultra .nav-link-modern:hover { background: #f2f4f7 !important; color: var(--rx-text) !important; }
.modern-navbar-ultra .nav-action-icon-modern { background: #fff !important; border: 1px solid var(--rx-border) !important; color: var(--rx-text-2) !important; border-radius: 8px !important; }
.modern-navbar-ultra .modern-search-wrapper { border: 1px solid var(--rx-border); border-radius: 10px; background: #f8fafc; box-shadow: none; overflow: hidden; }
.modern-navbar-ultra .modern-search-input-ultra { background: transparent; font-size: 0.9rem; }
.modern-navbar-ultra .btn-search-ultra { background: var(--rx-primary) !important; color: #fff !important; border-radius: 0 !important; height: 42px !important; }
.modern-navbar-ultra .navbar-toggler-icon { filter: none !important; }
.rx-nav-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.rx-nav-btn-outline { border: 1px solid #d0d5dd; color: var(--rx-text-2); background: #fff; }
.rx-nav-btn-outline:hover { background: #f8fafc; color: var(--rx-text); }
.rx-nav-btn-primary { background: var(--rx-primary); color: #fff; border: 1px solid var(--rx-primary); }
.rx-nav-btn-primary:hover { background: var(--rx-primary-hover); color: #fff; }
.mega-menu-ultra { font-family: var(--rx-font); border: 1px solid var(--rx-border) !important; border-radius: 14px !important; box-shadow: 0 18px 40px -12px rgba(16,24,40,.18) !important; }

/* Hero */
.rx-hero {
    position: relative; padding: 64px 0 40px;
    background:
        radial-gradient(800px 380px at 85% -10%, rgba(23,92,211,0.08), transparent 70%),
        radial-gradient(700px 320px at -5% 10%, rgba(200,150,62,0.10), transparent 70%),
        #fff;
    border-bottom: 1px solid var(--rx-border);
}
.rx-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(#eef0f3 1px, transparent 1px), linear-gradient(90deg, #eef0f3 1px, transparent 1px);
    background-size: 40px 40px; mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%);
}
.rx-hero .container { position: relative; }
.rx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid var(--rx-border); background: #fff; font-size: 0.8rem; font-weight: 500; color: var(--rx-text-2); box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.rx-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 4px #d1fadf; }
.rx-hero-title { margin: 20px 0 16px; font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em !important; color: var(--rx-text); }
.rx-hero-title span { color: var(--rx-muted); font-weight: 700; }
.rx-hero-sub { font-size: 1.075rem; line-height: 1.65; color: var(--rx-muted); max-width: 560px; margin-bottom: 26px; }
.rx-search { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 6px 6px 16px; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px -6px rgba(16,24,40,.12); }
.rx-search:focus-within { border-color: #84adff; box-shadow: 0 0 0 4px rgba(23,92,211,.12); }
.rx-search i { color: #98a2b3; }
.rx-search input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 0.975rem; background: transparent; height: 40px; color: var(--rx-text); }
.rx-search button { height: 42px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--rx-primary); color: #fff; font-weight: 600; font-size: .9rem; }
.rx-search button:hover { background: var(--rx-primary-hover); }
.rx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 26px; max-width: 600px; }
.rx-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--rx-border); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 500; color: var(--rx-text-2); text-decoration: none; transition: border-color .15s, background .15s; }
.rx-chips a i { color: #98a2b3; font-size: .78rem; }
.rx-chips a:hover { border-color: #b2ccff; background: #eff4ff; color: var(--rx-blue); }
.rx-chips a:hover i { color: var(--rx-blue); }
.rx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s, transform .15s; }
.rx-btn-primary { background: var(--rx-primary); color: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.rx-btn-primary:hover { background: var(--rx-primary-hover); color: #fff; }
.rx-btn-ghost { color: var(--rx-text-2); border: 1px solid #d0d5dd; background: #fff; }
.rx-btn-ghost:hover { background: #f8fafc; color: var(--rx-text); }
.rx-hero-visual { position: relative; padding: 0 0 40px 40px; }
.rx-hero-img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 65% center; border-radius: 20px; border: 1px solid var(--rx-border); box-shadow: 0 24px 48px -16px rgba(16,24,40,.25); }
.rx-float-card { position: absolute; left: 0; bottom: 0; width: min(360px, 88%); padding: 14px; border-radius: 16px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid var(--rx-border); box-shadow: 0 20px 40px -12px rgba(16,24,40,.22); }
.rx-float-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--rx-muted); }
.rx-float-head a { text-transform: none; letter-spacing: 0; color: var(--rx-blue); text-decoration: none; font-size: .8rem; }
.rx-uni-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--rx-text); text-decoration: none; }
.rx-uni-row:hover { background: #f8fafc; color: var(--rx-text); }
.rx-uni-logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--rx-border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--rx-primary); overflow: hidden; padding: 4px; }
.rx-uni-logo img { width: 100%; height: 100%; object-fit: contain; }
.rx-uni-text { flex: 1; min-width: 0; line-height: 1.25; }
.rx-uni-text strong { display: block; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-uni-text small { font-size: .75rem; color: var(--rx-muted); }
.rx-uni-rank { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #fef6e7; color: #93370d; white-space: nowrap; }
.rx-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 44px 0 0; border: 1px solid var(--rx-border); border-radius: 14px; background: #fff; overflow: hidden; }
.rx-metrics > div { padding: 16px 20px; border-left: 1px solid var(--rx-border); }
.rx-metrics > div:first-child { border-left: 0; }
.rx-metrics dt { font-size: .75rem; font-weight: 500; color: var(--rx-muted); }
.rx-metrics dd { margin: 2px 0 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--rx-text); font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) {
    .rx-hero { padding: 36px 0 28px; }
    .rx-hero-visual { padding: 0; margin-top: 8px; }
    .rx-float-card { position: relative; width: 100%; margin-top: -60px; left: auto; }
    .rx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rx-metrics > div { border-left: 0; border-top: 1px solid var(--rx-border); }
    .rx-metrics > div:nth-child(-n+2) { border-top: 0; }
    .rx-metrics > div:nth-child(even) { border-left: 1px solid var(--rx-border); }
    .rx-metrics > div:last-child { grid-column: 1 / -1; border-left: 0; }
    .navbar-actions-ultra .rx-nav-btn-outline { display: none; }
}

/* Sections & cards: lighter, React-style */
.quick-links-web, .explore-future-section, .pep-domains-section, .pep-partner-section { background: #fff !important; }
.premium-colleges-section, .partner-universities-section, .latest-news-section { background: var(--rx-bg) !important; }
.quick-link-item { border: 1px solid var(--rx-border) !important; border-radius: 14px !important; box-shadow: none !important; background: #fff !important; }
.quick-link-item:hover { border-color: #b2ccff !important; transform: translateY(-2px); }
.quick-link-icon { background: #eff4ff !important; color: var(--rx-blue) !important; border-radius: 10px !important; }
.quick-link-item h6 { font-weight: 600; font-size: .9rem; color: var(--rx-text); }
.category-slider-item { border: 1px solid var(--rx-border) !important; border-radius: 14px !important; box-shadow: none !important; }
.category-icon-web { background: #eff4ff !important; color: var(--rx-blue) !important; border-radius: 10px !important; }
.pep-domain-card { border-radius: 14px; box-shadow: none; }
.pep-domain-card:hover { border-color: #b2ccff; box-shadow: 0 10px 24px -12px rgba(16,24,40,.18); }
.pep-domain-icon { background: #eff4ff; color: var(--rx-blue); }
.pep-domain-card h3 { font-size: 1rem; font-weight: 600; color: var(--rx-text); }
.pep-domain-link { color: var(--rx-blue); }
.college-premium-card { border: 1px solid var(--rx-border) !important; border-radius: 16px !important; box-shadow: none !important; }
.college-premium-card:hover { box-shadow: 0 16px 32px -16px rgba(16,24,40,.22) !important; }
.college-logo-chip.has-logo { background: #fff !important; padding: 6px; }
.college-logo-chip.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.college-name { font-weight: 700 !important; }
.btn-outline-primary-modern { border-radius: 8px !important; }
.top-cities-section-modern { background: #0b2a4a !important; }
.city-card-modern { border-radius: 14px !important; }
.apna-journey-section { background: #0b2a4a !important; }
.journey-heading h2 { font-weight: 800 !important; }
.journey-content h3 { font-weight: 700 !important; }
.pep-partner-panel { border-radius: 20px; background: linear-gradient(135deg, #0b2a4a, #12355e); }
.pep-btn-gold { background: #fff !important; color: var(--rx-primary) !important; border-radius: 10px; }
.pep-btn-gold:hover { background: #f2f4f7 !important; }
.quick-connect-section { background: linear-gradient(135deg, #0b2a4a, #12355e) !important; }
.btn-quick-connect-submit { background: #fff !important; color: var(--rx-primary) !important; }
.find-us-title { font-weight: 800 !important; }
.find-us-nearby-section .text-primary-red { color: var(--rx-blue) !important; }
.btn-call-support, .btn-visit-office { border-radius: 10px !important; }
.pep-footer { background: #0b1b2e !important; }
.pep-footer h6 { color: #fff !important; font-weight: 600; }
.pep-page-hero { background: linear-gradient(135deg, #0b2a4a, #12355e); }
.pep-page-hero h1 { font-weight: 800 !important; }
.scroll-to-top { background: var(--rx-primary) !important; color: #fff !important; }

/* Static pages */
.rx-static-page { padding: 48px 0 72px; background: #fff; }
.rx-prose { max-width: 760px; font-size: 1rem; line-height: 1.75; color: #344054; }
.rx-prose h2 { font-size: 1.5rem; font-weight: 700; color: #101828; margin: 0 0 14px; }
.rx-prose h3 { font-size: 1.15rem; font-weight: 600; color: #101828; margin: 28px 0 8px; }
.rx-prose a { color: #175cd3; font-weight: 500; }

/* Public forms & cards (React-style) */
.rx-section { padding: 48px 0 72px; background: var(--rx-bg); }
.rx-card { background: #fff; border: 1px solid var(--rx-border); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.rx-card-muted { background: #fcfcfd; }
.rx-card-title { font-size: 1.15rem; font-weight: 700; color: var(--rx-text); margin: 0 0 6px; letter-spacing: -0.01em; }
.rx-card-sub { color: var(--rx-muted); font-size: .9rem; margin-bottom: 18px; }
.rx-label { display: block; font-size: .85rem; font-weight: 500; color: var(--rx-text-2); margin-bottom: 6px; }
.rx-label .req { color: #d92d20; }
.rx-input, .rx-select, .rx-textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; font: inherit; font-size: .95rem; color: var(--rx-text); box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: border-color .15s, box-shadow .15s; }
.rx-textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; }
.rx-input:focus, .rx-select:focus, .rx-textarea:focus { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px rgba(23,92,211,.12); }
.rx-help { font-size: .8rem; color: var(--rx-muted); margin-top: 5px; }
.rx-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.rx-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rx-status.tone-info { background: #eff8ff; color: #175cd3; } .rx-status.tone-primary { background: #eef4ff; color: #0b2a4a; }
.rx-status.tone-success { background: #ecfdf3; color: #067647; } .rx-status.tone-warning { background: #fffaeb; color: #b54708; }
.rx-status.tone-danger { background: #fef3f2; color: #b42318; } .rx-status.tone-muted { background: #f2f4f7; color: #475467; }
.rx-track { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.rx-track li { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.rx-track li:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--rx-border); }
.rx-track li.done:not(:last-child)::before { background: #12b76a; }
.rx-track-dot { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 2px solid #d0d5dd; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.rx-track li.done .rx-track-dot { background: #12b76a; border-color: #12b76a; }
.rx-track li.current .rx-track-dot { border-color: #175cd3; box-shadow: 0 0 0 4px #d1e9ff; }
.rx-track strong { display: block; font-size: .92rem; font-weight: 600; color: var(--rx-text); }
.rx-track li:not(.done):not(.current) strong { color: #98a2b3; font-weight: 500; }
.rx-track small { font-size: .78rem; color: var(--rx-muted); }
.rx-app-list { list-style: none; padding: 0; margin: 12px 0 0; }
.rx-app-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rx-border); color: var(--rx-text); text-decoration: none; }
.rx-app-list strong { display: block; font-weight: 600; }
.rx-app-list small { color: var(--rx-muted); font-size: .8rem; }
.pep-footer-legal a { color: #93aabc; text-decoration: none; }
.pep-footer-legal a:hover { color: #fff; }
button.college-favorite-btn { border: 0; cursor: pointer; }
button.college-favorite-btn.is-saved i { color: #d92d20; }

/* Counselling request form */
.rx-form { padding: 0; overflow: hidden; }
.rx-fieldset { border: 0; margin: 0; padding: 24px 26px; border-bottom: 1px solid var(--rx-border); }
.rx-fieldset legend { float: none; width: auto; display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--rx-text); margin-bottom: 16px; }
.rx-fieldset legend small { font-size: .78rem; font-weight: 500; color: var(--rx-muted); }
.rx-step-num { width: 26px; height: 26px; border-radius: 50%; background: #eff4ff; color: #175cd3; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.rx-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-choice label { cursor: pointer; }
.rx-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rx-choice span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--rx-text-2); background: #fff; transition: all .15s; }
.rx-choice input:checked + span { border-color: #175cd3; background: #eff4ff; color: #175cd3; }
.rx-choice input:focus-visible + span { outline: 2px solid #175cd3; outline-offset: 2px; }
.rx-prefix { display: flex; }
.rx-prefix span { display: flex; align-items: center; padding: 0 12px; border: 1px solid #d0d5dd; border-right: 0; border-radius: 10px 0 0 10px; background: #f9fafb; color: var(--rx-muted); font-size: .9rem; }
.rx-prefix .rx-input { border-radius: 0 10px 10px 0; }
.rx-input[aria-invalid="true"] { border-color: #f04438; }
.rx-error { color: #b42318; font-size: .8rem; margin-top: 5px; }
.rx-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 26px; background: #f9fafb; }
.rx-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--rx-text-2); max-width: 460px; }
.rx-consent input { margin-top: 4px; }
.rx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid; margin-bottom: 16px; font-size: .92rem; }
.rx-alert-success { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.rx-alert-danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.rx-alert i { margin-top: 3px; }
.rx-steps { list-style: none; counter-reset: s; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.rx-steps li { counter-increment: s; position: relative; padding-left: 38px; }
.rx-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #0b2a4a; color: #fff; font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rx-steps strong { display: block; font-size: .92rem; color: var(--rx-text); }
.rx-steps span { font-size: .84rem; color: var(--rx-muted); }
.rx-call { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--rx-border); border-radius: 12px; text-decoration: none; color: var(--rx-text); margin-top: 10px; }
.rx-call i { width: 38px; height: 38px; border-radius: 10px; background: #eff4ff; color: #175cd3; display: flex; align-items: center; justify-content: center; }
.rx-call small { display: block; font-size: .75rem; color: var(--rx-muted); }
.rx-call strong { font-size: 1.05rem; }
.rx-branch { padding: 12px 0; border-top: 1px solid var(--rx-border); font-size: .85rem; color: var(--rx-muted); }
.rx-branch:first-of-type { border-top: 0; padding-top: 6px; }
.rx-branch strong { display: block; color: var(--rx-text); font-size: .92rem; }
.rx-branch a { display: inline-block; margin-top: 4px; font-weight: 600; color: #175cd3; text-decoration: none; }
@media (max-width: 575.98px) { .rx-fieldset, .rx-form-foot { padding: 18px 16px; } .rx-form-foot .rx-btn { width: 100%; justify-content: center; } }

/* Phone header: logo, quick menu and primary action on one row, full-width search below */
@media (max-width: 575.98px) {
    .modern-navbar-ultra > .container { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 8px; }
    .modern-navbar-ultra .brand-wrapper { min-width: 0; margin: 0; }
    .modern-navbar-ultra .brand-text-modern { font-size: .9rem !important; line-height: 1.15; }
    .modern-navbar-ultra .pep-nav-logo { width: 40px; height: 40px; }
    .modern-navbar-ultra .nav-action-icon-modern { margin: 0 !important; }
    .modern-navbar-ultra .search-box-nav-ultra { grid-column: 1 / -1; order: 10; margin: 0 !important; width: 100%; }
    .modern-navbar-ultra .navbar-actions-ultra .rx-nav-btn-outline { display: none !important; }
    .modern-navbar-ultra .navbar-actions-ultra .rx-nav-btn { height: 38px; padding: 0 12px; font-size: .85rem; white-space: nowrap; }
}

/* Exams: PEP navy instead of the old black/brown gradient, readable hero numbers, badge fits two-word names */
.exam-hero-card { background: linear-gradient(115deg, #0a2039, #17364b) !important; }
.exam-hero-card .exam-hero-title, .exam-hero-card .stat-value { color: #fff !important; }
.exam-card-icon { background: linear-gradient(135deg, #0b2a4a, #1a6b8a) !important; font-size: .72rem !important; text-align: center; padding: 4px; overflow-wrap: anywhere; }

/* ==========================================================================
   THEME LAYER — colours aligned to the Progressive Education Point landing
   page (navy / gold / teal-blue), with a light default and a dark mode.
   Appended last so these tokens win. Dark mode applies to the public site
   only (panels use pep-ui.css and never set data-theme).
   ========================================================================== */
:root, :root[data-theme="light"] {
    /* Landing-page palette (exact) */
    --pep-navy: #0A2342; --pep-navy-deep: #071a31; --pep-navy-soft: #17364b;
    --pep-gold: #E8A020; --pep-gold-light: #f0b84a; --pep-gold-hover: #d08f16; --pep-gold-soft: #d9ae66;
    --pep-teal: #1A6B8A; --pep-teal-bright: #2c93bf;
    --pep-light: #F5F7FA; --pep-cream: #f7f7f4; --pep-border: #DDE3EA;
    --pep-text: #1C2B3A; --pep-muted: #6B7B8D;

    --rx-primary: #0A2342; --rx-primary-hover: #123a63;
    --rx-accent: #E8A020; --rx-accent-hover: #d08f16;
    --rx-blue: #1A6B8A;                 /* secondary / links use the landing-page teal */
    --rx-text: #1C2B3A; --rx-text-2: #344054; --rx-muted: #6B7B8D;
    --rx-border: #DDE3EA; --rx-bg: #F5F7FA;
    --rx-surface: #ffffff; --rx-surface-2: #F5F7FA; --rx-surface-3: #eef2f7;
    --rx-card-shadow: 0 2px 16px rgba(10,35,66,0.08);
    color-scheme: light;
}
:root[data-theme="dark"] {
    --pep-navy: #0A2342; --pep-navy-deep: #06111f; --pep-navy-soft: #17364b;
    --pep-gold: #E8A020; --pep-gold-light: #f3bf55; --pep-gold-hover: #f3bf55; --pep-gold-soft: #d9ae66;
    --pep-teal: #4bb3d6; --pep-teal-bright: #6cc6e4;
    --pep-light: #0f2440; --pep-cream: #0f2440; --pep-border: rgba(255,255,255,0.12);
    --pep-text: #e8eef6; --pep-muted: #9db0c6;

    --rx-primary: #E8A020; --rx-primary-hover: #f3bf55;   /* on dark, the "primary" fill is gold */
    --rx-accent: #E8A020; --rx-accent-hover: #f3bf55;
    --rx-blue: #6cc6e4;
    --rx-text: #e8eef6; --rx-text-2: #c4d2e2; --rx-muted: #9db0c6;
    --rx-border: rgba(255,255,255,0.12); --rx-bg: #081a30;
    --rx-surface: #0f2440; --rx-surface-2: #0c1f38; --rx-surface-3: #14304f;
    --rx-card-shadow: 0 2px 20px rgba(0,0,0,0.45);
    color-scheme: dark;
}
html, body { background: var(--rx-bg); color: var(--rx-text); transition: background-color .2s ease, color .2s ease; }

/* ---------- Theme toggle button ---------- */
.rx-theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
    border: 1px solid var(--rx-border); background: var(--rx-surface); color: var(--rx-text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; flex: none; }
.rx-theme-toggle:hover { background: var(--rx-surface-2); color: var(--rx-text); border-color: #c3ccd8; }
:root[data-theme="dark"] .rx-theme-toggle { background: rgba(255,255,255,0.06); color: var(--pep-gold-light); border-color: var(--rx-border); }
:root[data-theme="dark"] .rx-theme-toggle:hover { background: rgba(255,255,255,0.12); }

/* ==========================================================================
   HERO — navy with gold accent in BOTH themes (matches the landing page)
   ========================================================================== */
.rx-hero { background: linear-gradient(135deg, #0a2039 0%, #0d2b4d 55%, #102c48 100%) !important; color: #fff; padding: 56px 0 52px; position: relative; overflow: hidden; }
.rx-hero::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(60% 60% at 85% 20%, rgba(232,160,32,0.10), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, rgba(26,107,138,0.18), transparent 70%); pointer-events: none; }
.rx-hero .rx-hero-title { color: #fff; }
.rx-hero .rx-hero-title span { color: var(--pep-gold-light); font-weight: 800; }
.rx-hero .rx-hero-sub { color: rgba(255,255,255,0.82); }
.rx-hero .rx-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.88); backdrop-filter: blur(4px); }
.rx-hero .rx-pill-dot { background: var(--pep-gold); box-shadow: 0 0 0 4px rgba(232,160,32,0.25); }
.rx-hero .rx-search { background: rgba(255,255,255,0.97); border: 1px solid rgba(255,255,255,0.3); }
.rx-hero .rx-chips a { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }
.rx-hero .rx-chips a i { color: var(--pep-gold-light); }
.rx-hero .rx-chips a:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); color: #fff; }
.rx-hero .rx-btn-primary { background: var(--pep-gold); color: #241a04; box-shadow: 0 8px 20px -6px rgba(232,160,32,0.5); }
.rx-hero .rx-btn-primary:hover { background: var(--pep-gold-light); color: #241a04; }
.rx-hero .rx-btn-ghost { color: #0A2342; border: 1px solid #ffffff; background: #ffffff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.35); }
.rx-hero .rx-btn-ghost:hover { background: #eef2f7; border-color: #eef2f7; color: #0A2342; }
.rx-hero .rx-btn-ghost i { color: var(--pep-gold, #E8A020); }
.rx-hero .rx-metrics { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.rx-hero .rx-metrics > div { border-left-color: rgba(255,255,255,0.14); }
.rx-hero .rx-metrics dt { color: rgba(255,255,255,0.65); }
.rx-hero .rx-metrics dd { color: #fff; }
.rx-hero .rx-metrics dd .rx-gold, .rx-hero .rx-metrics dd span { color: var(--pep-gold-light); }
.rx-float-card { background: rgba(255,255,255,0.97); }
:root[data-theme="dark"] .rx-float-card { background: #0f2440; border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .rx-float-head { color: var(--rx-muted); }
:root[data-theme="dark"] .rx-uni-text strong { color: #e8eef6; }

/* Hero "next steps" strip (Explore / Compare / Prepare) — echoes the landing page */
.rx-hero-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 30px; position: relative; }
.rx-hero-steps a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); transition: background .15s, border-color .15s, transform .15s; }
.rx-hero-steps a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.rx-hero-steps .rx-step-ico { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(232,160,32,0.16); color: var(--pep-gold-light); font-size: 15px; }
.rx-hero-steps .rx-step-txt strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.rx-hero-steps .rx-step-txt span { color: rgba(255,255,255,0.68); font-size: .82rem; }
@media (max-width: 767.98px) { .rx-hero-steps { grid-template-columns: 1fr; } }

/* ==========================================================================
   SECTION EYEBROWS & ACCENTS — gold like the landing page
   ========================================================================== */
.pep-eyebrow, .eyebrow-label, .section-eyebrow { color: var(--pep-teal) !important; }
.rx-gold { color: var(--pep-gold) !important; }
.section-title-small, .section-title-modern, .section-title { color: var(--rx-text) !important; }

/* ==========================================================================
   DARK MODE — public page surfaces
   ========================================================================== */
:root[data-theme="dark"] .modern-navbar-ultra { background: rgba(10,29,50,0.92) !important; border-bottom-color: rgba(255,255,255,0.1) !important; }
:root[data-theme="dark"] .modern-navbar-ultra .brand-text-modern { color: #fff !important; -webkit-text-fill-color: #fff !important; }
:root[data-theme="dark"] .modern-navbar-ultra .pep-brand-sub { color: var(--rx-muted) !important; }
:root[data-theme="dark"] .modern-navbar-ultra .nav-link-modern,
:root[data-theme="dark"] .modern-navbar-ultra .nav-action-link-modern { color: #c4d2e2 !important; }
:root[data-theme="dark"] .modern-navbar-ultra .nav-link-modern:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
:root[data-theme="dark"] .modern-navbar-ultra .nav-action-icon-modern { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #c4d2e2 !important; }
:root[data-theme="dark"] .modern-navbar-ultra .modern-search-wrapper { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .modern-navbar-ultra .modern-search-input-ultra { color: #e8eef6; }
:root[data-theme="dark"] .modern-navbar-ultra .modern-search-input-ultra::placeholder { color: #8ea0b6; }
:root[data-theme="dark"] .top-info-bar, :root[data-theme="dark"] .top-bar-ultra { background: #06111f !important; }
:root[data-theme="dark"] .mega-menu-ultra { background: #0f2440 !important; border-color: rgba(255,255,255,0.12) !important; }
:root[data-theme="dark"] .mega-menu-ultra a, :root[data-theme="dark"] .mega-menu-ultra .mega-menu-title-modern { color: #c4d2e2 !important; }
:root[data-theme="dark"] .mega-menu-ultra a:hover { color: #fff !important; }
:root[data-theme="dark"] .rx-nav-btn-outline { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #c4d2e2; }
:root[data-theme="dark"] .rx-nav-btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }
:root[data-theme="dark"] .rx-nav-btn-primary { background: var(--pep-gold); border-color: var(--pep-gold); color: #241a04; }
:root[data-theme="dark"] .rx-nav-btn-primary:hover { background: var(--pep-gold-light); color: #241a04; }

/* Generic light surfaces → dark. Scoped to common section/card wrappers. */
:root[data-theme="dark"] section { background-color: transparent; }
:root[data-theme="dark"] .quick-links-web, :root[data-theme="dark"] .explore-future-section,
:root[data-theme="dark"] .pep-domains-section, :root[data-theme="dark"] .partner-universities-section,
:root[data-theme="dark"] .find-us-nearby-section, :root[data-theme="dark"] .quick-connect-section { background: var(--rx-bg) !important; }
:root[data-theme="dark"] .top-cities-section-modern, :root[data-theme="dark"] .top-colleges-section,
:root[data-theme="dark"] .testimonials-section, :root[data-theme="dark"] .latest-news-section { background: var(--rx-surface-2) !important; }
:root[data-theme="dark"] .section-title, :root[data-theme="dark"] .section-title-small,
:root[data-theme="dark"] .section-title-modern, :root[data-theme="dark"] h1,
:root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: #e8eef6 !important; }
:root[data-theme="dark"] .section-subtitle, :root[data-theme="dark"] .section-subtitle-modern,
:root[data-theme="dark"] .text-muted, :root[data-theme="dark"] p { color: var(--rx-muted) !important; }
:root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black { color: #e8eef6 !important; }

/* Cards and tiles: flip white fills to dark surfaces */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .rx-card, :root[data-theme="dark"] .quick-link-card,
:root[data-theme="dark"] .city-card-modern-simple, :root[data-theme="dark"] .course-card, :root[data-theme="dark"] .course-card-modern,
:root[data-theme="dark"] .college-premium-card, :root[data-theme="dark"] .college-card, :root[data-theme="dark"] .pep-domain-card,
:root[data-theme="dark"] .testimonial-card, :root[data-theme="dark"] .news-card, :root[data-theme="dark"] .news-card-modern,
:root[data-theme="dark"] .partner-uni-card, :root[data-theme="dark"] .find-us-card, :root[data-theme="dark"] .quick-connect-card,
:root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .info-card, :root[data-theme="dark"] .branch-card {
    background: var(--rx-surface) !important; border-color: var(--rx-border) !important; color: var(--rx-text) !important; box-shadow: var(--rx-card-shadow) !important; }
:root[data-theme="dark"] .card *, :root[data-theme="dark"] .rx-card *:not(.rx-uni-rank):not(.badge) { border-color: var(--rx-border); }
:root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light { background: var(--rx-surface) !important; }
:root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select {
    background: var(--rx-surface-3) !important; border-color: var(--rx-border) !important; color: #e8eef6 !important; }
:root[data-theme="dark"] .form-control::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #8ea0b6 !important; }
:root[data-theme="dark"] .btn-outline-dark, :root[data-theme="dark"] .btn-outline-secondary { color: #c4d2e2 !important; border-color: var(--rx-border) !important; }
:root[data-theme="dark"] .btn-outline-dark:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }

/* Footer: already dark navy; nudge borders for dark page */
:root[data-theme="dark"] .modern-footer, :root[data-theme="dark"] .pep-footer, :root[data-theme="dark"] footer { background: #06111f !important; }

/* Dark mode — additional component surfaces found on the homepage */
:root[data-theme="dark"] .city-card-modern, :root[data-theme="dark"] .quick-link-item,
:root[data-theme="dark"] .course-card-modern, :root[data-theme="dark"] .college-meta-item,
:root[data-theme="dark"] .news-tab-btn, :root[data-theme="dark"] .testimonial-card-modern,
:root[data-theme="dark"] .pep-domain-card, :root[data-theme="dark"] .journey-card,
:root[data-theme="dark"] .find-us-card-modern, :root[data-theme="dark"] .stat-box,
:root[data-theme="dark"] .image-overlay-badge {
    background: var(--rx-surface) !important; border-color: var(--rx-border) !important; color: var(--rx-text) !important; }
:root[data-theme="dark"] .news-tab-btn.active { background: var(--pep-gold) !important; color: #241a04 !important; border-color: var(--pep-gold) !important; }
:root[data-theme="dark"] .college-meta-item i { color: var(--pep-gold-light) !important; }
/* Logo tiles keep a light panel so the printed logos stay legible */
:root[data-theme="dark"] .university-logo-item { background: #eef2f7 !important; border-color: rgba(255,255,255,0.14) !important; }
:root[data-theme="dark"] .quick-link-item .quick-link-icon, :root[data-theme="dark"] .course-icon-modern,
:root[data-theme="dark"] .domain-icon, :root[data-theme="dark"] .city-icon-modern { filter: brightness(1.1); }
:root[data-theme="dark"] a:not(.rx-btn):not(.rx-pillar) { color: var(--pep-teal-bright); }
:root[data-theme="dark"] .rx-hero a:not(.rx-btn):not(.rx-pillar) { color: inherit; }

/* Dark mode — shared detail-page surfaces (college / exam / tools profiles) */
:root[data-theme="dark"] .profile-section-card, :root[data-theme="dark"] .profile-sidebar-card,
:root[data-theme="dark"] .college-tabs-wrapper, :root[data-theme="dark"] .benefit-item-small,
:root[data-theme="dark"] .profile-section-body, :root[data-theme="dark"] .profile-section-header,
:root[data-theme="dark"] .info-row, :root[data-theme="dark"] .key-point-card, :root[data-theme="dark"] .timeline-card,
:root[data-theme="dark"] .mini-stat-card, :root[data-theme="dark"] .exam-list-card,
:root[data-theme="dark"] .exam-filter-sidebar, :root[data-theme="dark"] .tool-form-card, :root[data-theme="dark"] .tool-info-card,
:root[data-theme="dark"] .tool-results-card, :root[data-theme="dark"] .update-card, :root[data-theme="dark"] .empty-state-card,
:root[data-theme="dark"] .listing-page-header, :root[data-theme="dark"] .search-box-card, :root[data-theme="dark"] .filter-sidebar,
:root[data-theme="dark"] .cp-uni, :root[data-theme="dark"] .rx-static-page, :root[data-theme="dark"] .rx-prose {
    background: var(--rx-surface) !important; border-color: var(--rx-border) !important; color: var(--rx-text) !important; box-shadow: var(--rx-card-shadow); }
:root[data-theme="dark"] .profile-section-header { background: var(--rx-surface-3) !important; }
:root[data-theme="dark"] .college-profile-hero { background: linear-gradient(135deg, #0a2039, #102c48) !important; }
:root[data-theme="dark"] .info-row strong, :root[data-theme="dark"] .profile-section-card strong { color: #e8eef6 !important; }
:root[data-theme="dark"] .table, :root[data-theme="dark"] .table-striped > tbody > tr { color: var(--rx-text) !important; }
:root[data-theme="dark"] .table thead th { color: #c4d2e2 !important; border-color: var(--rx-border) !important; }
:root[data-theme="dark"] .table td, :root[data-theme="dark"] .table th { border-color: var(--rx-border) !important; }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,0.03) !important; }
:root[data-theme="dark"] .nav-tabs, :root[data-theme="dark"] .exam-anchor-nav { border-color: var(--rx-border) !important; }
:root[data-theme="dark"] .nav-tabs .nav-link, :root[data-theme="dark"] .college-tab-btn, :root[data-theme="dark"] .exam-anchor-nav a { color: var(--rx-muted) !important; }
:root[data-theme="dark"] .nav-tabs .nav-link.active, :root[data-theme="dark"] .college-tab-btn.active, :root[data-theme="dark"] .exam-anchor-nav a.active { color: var(--pep-gold-light) !important; border-color: var(--pep-gold) !important; }
:root[data-theme="dark"] .badge.bg-light, :root[data-theme="dark"] .exam-level-chip, :root[data-theme="dark"] .exam-mode-chip { background: var(--rx-surface-3) !important; color: #c4d2e2 !important; }

/* ==========================================================================
   "Why Progressive Education Point" value band (theme-aware)
   ========================================================================== */
.pep-why-section { padding: 72px 0; background: var(--rx-surface-2); }
.pep-why-card { height: 100%; background: var(--rx-surface); border: 1px solid var(--rx-border); border-radius: 16px;
    padding: 26px 22px; box-shadow: var(--rx-card-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pep-why-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgba(10,35,66,0.28); border-color: #c7d2e0; }
.pep-why-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 20px;
    background: linear-gradient(135deg, rgba(232,160,32,0.16), rgba(26,107,138,0.12)); color: var(--pep-gold); margin-bottom: 16px; }
.pep-why-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--rx-text); margin: 0 0 8px; letter-spacing: -0.01em; }
.pep-why-card p { font-size: 0.92rem; line-height: 1.6; color: var(--rx-muted); margin: 0; }
:root[data-theme="dark"] .pep-why-section { background: var(--rx-surface-2) !important; }
:root[data-theme="dark"] .pep-why-card { background: var(--rx-surface) !important; border-color: var(--rx-border) !important; }
:root[data-theme="dark"] .pep-why-ico { color: var(--pep-gold-light); }
:root[data-theme="dark"] .pep-why-card:hover { border-color: rgba(255,255,255,0.22); box-shadow: 0 18px 36px -14px rgba(0,0,0,0.55); }
@media (max-width: 575.98px) { .pep-why-section { padding: 48px 0; } }

/* Listing page header (colleges) — eyebrow + title, theme-aware */
.rx-listing-head { padding: 6px 0 20px; }
.rx-listing-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--rx-text); margin: 0 0 6px; }
.rx-listing-sub { color: var(--rx-muted); font-size: 1rem; max-width: 640px; margin: 0; }
:root[data-theme="dark"] .rx-listing-title { color: #e8eef6; }

/* Fix: the "Discover your next campus" band is dark navy — its heading/subtitle must be light */
.top-cities-section-modern .section-title-modern { color: #ffffff !important; }
.top-cities-section-modern .section-subtitle-modern { color: rgba(255,255,255,0.78) !important; }
.top-cities-section-modern .pep-eyebrow { color: var(--pep-gold-light) !important; }

/* Colleges listing: "Load more" button (replaces pagination) */
.load-more-wrap { padding: 8px 0 4px; }
.btn-load-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 240px; padding: 13px 30px;
    font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em;
    color: var(--rx-primary, #0A2342); background: #fff;
    border: 1.5px solid var(--rx-primary, #0A2342); border-radius: 999px;
    cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-load-more:hover { background: var(--rx-primary, #0A2342); color: #fff; box-shadow: 0 8px 22px rgba(10,35,66,0.18); }
.btn-load-more:active { transform: translateY(1px); }
.btn-load-more:disabled { opacity: 0.7; cursor: default; }
.btn-load-more .load-more-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lm-spin .6s linear infinite; }
.btn-load-more.is-loading .load-more-spinner { display: inline-block; }
.btn-load-more.is-loading .load-more-label { opacity: 0.85; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
:root[data-theme="dark"] .btn-load-more { background: transparent; color: #e8eef6; border-color: rgba(232,238,246,0.5); }
:root[data-theme="dark"] .btn-load-more:hover { background: var(--pep-gold, #E8A020); color: #10202f; border-color: var(--pep-gold, #E8A020); }

/* Gold eyebrow variant (overrides the teal default) */
.pep-eyebrow-gold { color: var(--pep-gold-light) !important; }

/* ==========================================================================
   "Your ambition. Your next campus." — reference-style CTA band (always dark)
   ========================================================================== */
.pep-ambition-section { padding: 84px 0; background: linear-gradient(135deg, #0a2039 0%, #0d2b4d 55%, #102c48 100%); position: relative; overflow: hidden; }
.pep-ambition-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(55% 55% at 88% 15%, rgba(232,160,32,0.12), transparent 70%),
    radial-gradient(45% 45% at 8% 95%, rgba(26,107,138,0.22), transparent 70%); }
.pep-ambition-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.pep-ambition-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; margin: 0 0 16px; }
.pep-ambition-title span { display: block; color: var(--pep-gold-light); }
.pep-ambition-sub { font-size: 1.1rem; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto 26px; }
.pep-ambition-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.pep-ambition-levels a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.pep-ambition-levels a:hover { background: rgba(232,160,32,0.16); border-color: rgba(232,160,32,0.5); color: #fff; }
.pep-ambition-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pep-ambition-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 10px; font-weight: 600; font-size: 0.98rem; text-decoration: none; transition: background .15s, transform .15s, border-color .15s; }
.pep-ambition-btn-gold { background: var(--pep-gold); color: #241a04; box-shadow: 0 10px 24px -8px rgba(232,160,32,0.5); }
.pep-ambition-btn-gold:hover { background: var(--pep-gold-light); color: #241a04; transform: translateY(-2px); }
.pep-ambition-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }
.pep-ambition-btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.55); color: #fff; }
@media (max-width: 575.98px) { .pep-ambition-section { padding: 56px 0; } }

/* Mega-menu footer strip (Blog / Counselling / Partner) */
.mega-menu-footer { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: center;
    margin-top: 6px; padding: 16px 24px; border-top: 1px solid var(--rx-border); background: var(--rx-surface-2); border-radius: 0 0 14px 14px; }
.mega-menu-footer a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--rx-text-2); text-decoration: none; transition: color .15s; }
.mega-menu-footer a i { color: var(--pep-gold); font-size: 0.85rem; }
.mega-menu-footer a:hover { color: var(--pep-teal); }
:root[data-theme="dark"] .mega-menu-footer { background: rgba(255,255,255,0.04); border-top-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .mega-menu-footer a { color: #c4d2e2; }
:root[data-theme="dark"] .mega-menu-footer a i { color: var(--pep-gold-light); }
:root[data-theme="dark"] .mega-menu-footer a:hover { color: #fff; }

/* Hero illustration (replaces the hero photo) + help-desk card */
.rx-hero-art { position: relative; max-width: 560px; margin-left: auto; }
.rx-hero-art-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.25)); }
.rx-help-card { position: absolute; left: 0; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.97); border: 1px solid var(--rx-border); box-shadow: 0 18px 36px -12px rgba(16,24,40,.35); }
.rx-help-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: #FDF3E1; color: #B8862F; }
.rx-help-text { display: flex; flex-direction: column; line-height: 1.25; }
.rx-help-text strong { font-size: .92rem; color: #0A2342; }
.rx-help-text small { font-size: .78rem; color: #6B7B8D; }
.rx-help-call { margin-left: 6px; padding: 7px 12px; border-radius: 999px; background: #0A2342; color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.rx-help-call:hover { background: #E8A020; color: #0A2342; }
:root[data-theme="dark"] .rx-help-card { background: #0f2440; border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .rx-help-text strong { color: #e8eef6; }
:root[data-theme="dark"] .rx-help-text small { color: #9fb0c3; }
@media (max-width: 991.98px) {
    .rx-hero-art { margin: 8px auto 0; max-width: 440px; }
    .rx-help-card { position: relative; left: auto; bottom: auto; margin-top: -24px; }
}

/* "What a counselling session covers" card (replaces the branches photo) */
.pep-visit-card { position: relative; border-radius: 20px; padding: 28px; background: linear-gradient(155deg, #123A66 0%, #0A2342 100%); color: #fff; box-shadow: 0 24px 48px -18px rgba(10,35,66,.45); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.pep-visit-card::after { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(232,160,32,.22), transparent 70%); }
.pep-visit-head { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.pep-visit-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 12px; background: var(--pep-gold, #E8A020); color: #0A2342; font-size: 1.15rem; }
.pep-visit-head-text strong { display: block; font-size: 1.1rem; line-height: 1.3; }
.pep-visit-head-text small { color: rgba(255,255,255,.72); font-size: .82rem; }
.pep-visit-list { list-style: none; margin: 0 0 22px; padding: 0; position: relative; z-index: 1; }
.pep-visit-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: .95rem; color: rgba(255,255,255,.9); line-height: 1.45; }
.pep-visit-list li i { margin-top: 3px; flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(232,160,32,.18); color: var(--pep-gold, #E8A020); font-size: .62rem; }
.pep-visit-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 999px; background: var(--pep-gold, #E8A020); color: #0A2342; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.pep-visit-cta:hover { color: #0A2342; transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(232,160,32,.6); }
@media (max-width: 991.98px) { .pep-visit-card { margin-top: 28px; } }

/* Cities slider layout (replaces the static grid) */
.cities-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto 2.25rem; }
.cities-head-text { max-width: 640px; }
.cities-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.cities-nav-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font-size: .95rem; cursor: pointer; display: grid; place-items: center; transition: background .18s ease, border-color .18s ease, transform .12s ease; }
.cities-nav-btn:hover { background: var(--pep-gold, #E8A020); border-color: var(--pep-gold, #E8A020); color: #0A2342; }
.cities-nav-btn:active { transform: scale(.94); }
.cities-slider { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; max-width: 1400px; margin: 0 auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cities-slider::-webkit-scrollbar { display: none; }
.city-slide { flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: #0f2440; border: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.city-slide:hover { transform: translateY(-4px); border-color: rgba(232,160,32,.5); box-shadow: 0 18px 36px -16px rgba(0,0,0,.55); }
.city-slide-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.25rem; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.city-slide-name { font-size: 1.2rem; font-weight: 700; color: #fff; }
.city-slide-link { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--pep-gold-light, #F2C46B); opacity: .88; transition: opacity .2s ease, gap .2s ease; }
.city-slide:hover .city-slide-link { opacity: 1; gap: 11px; }
@media (max-width: 767.98px) {
    .cities-head { flex-direction: column; align-items: flex-start; }
    .city-slide { flex-basis: 212px; padding: 20px; }
}

/* Fix: Popular Courses icons were white-on-light (invisible). Use a strong brand colour. */
.category-slider-item .category-icon-web i,
.category-slider-item:hover .category-icon-web i { color: var(--rx-primary, #0b2a4a) !important; text-shadow: none !important; filter: none !important; }
.category-slider-item .category-count { display: none !important; }

/* Apply-now lead popup (student / partner) */
.pep-apply-modal .modal-content { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(10,35,66,.5); }
.pep-apply-modal .modal-header { align-items: flex-start; gap: 12px; border: 0; padding: 22px 24px 8px; }
.pep-apply-modal .modal-title { font-size: 1.15rem; font-weight: 800; color: var(--rx-text, #1C2B3A); line-height: 1.3; }
.pep-apply-sub { margin: 4px 0 0; font-size: .85rem; color: var(--rx-muted, #6B7B8D); }
.pep-apply-modal .modal-body { padding: 8px 24px 24px; }
.pep-apply-toggle { display: flex; gap: 6px; padding: 5px; background: var(--rx-light, #F5F7FA); border: 1px solid var(--rx-border, #DDE3EA); border-radius: 12px; margin-bottom: 18px; }
.pep-apply-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; border-radius: 9px; font-size: .9rem; font-weight: 700; color: var(--rx-muted, #6B7B8D); cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.pep-apply-tab.is-active { background: var(--rx-primary, #0A2342); color: #fff; box-shadow: 0 6px 16px -6px rgba(10,35,66,.5); }
.pep-apply-tab i { font-size: .95rem; }
.pep-apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pep-field { display: flex; flex-direction: column; gap: 6px; }
.pep-field-full { grid-column: 1 / -1; }
.pep-field label { font-size: .8rem; font-weight: 600; color: var(--rx-text, #1C2B3A); }
.pep-field .pep-opt { font-weight: 400; color: var(--rx-muted, #6B7B8D); }
.pep-field input, .pep-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--rx-border, #DDE3EA); border-radius: 10px; font-size: .92rem; color: var(--rx-text, #1C2B3A); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.pep-field input:focus, .pep-field textarea:focus { outline: 0; border-color: var(--rx-primary, #0A2342); box-shadow: 0 0 0 3px rgba(26,107,138,.15); }
.pep-apply-feedback { display: none; margin: 14px 0 0; padding: 10px 13px; border-radius: 10px; font-size: .86rem; }
.pep-apply-feedback.is-success { display: block; background: #E7F5EE; color: #1B7A4A; border: 1px solid #B8E0CB; }
.pep-apply-feedback.is-error { display: block; background: #FBEAE8; color: #B03A2E; border: 1px solid #F1C6C0; }
.pep-apply-submit { width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 999px; background: var(--pep-gold, #E8A020); color: #0A2342; font-weight: 800; font-size: .98rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease; }
.pep-apply-submit:hover { box-shadow: 0 12px 26px -8px rgba(232,160,32,.6); transform: translateY(-1px); }
.pep-apply-submit:disabled { opacity: .75; cursor: default; transform: none; }
.pep-apply-spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lm-spin .6s linear infinite; }
.pep-apply-submit.is-loading .pep-apply-spinner { display: inline-block; }
.pep-apply-note { margin: 12px 0 0; text-align: center; font-size: .82rem; color: var(--rx-muted, #6B7B8D); }
.pep-apply-note a { color: var(--rx-primary, #0A2342); font-weight: 700; }
@media (max-width: 575.98px) { .pep-apply-grid { grid-template-columns: 1fr; } }
/* Dark mode */
:root[data-theme="dark"] .pep-apply-modal .modal-content { background: #0f2440; }
:root[data-theme="dark"] .pep-apply-modal .modal-title { color: #e8eef6; }
:root[data-theme="dark"] .pep-apply-toggle { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .pep-field label { color: #e8eef6; }
:root[data-theme="dark"] .pep-field input, :root[data-theme="dark"] .pep-field textarea { background: #10263f; border-color: rgba(255,255,255,.14); color: #e8eef6; }
:root[data-theme="dark"] .pep-apply-modal .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Hero service pillars (Admission / Training / Placement) — high visibility */
.rx-hero-pillars { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 28px; }
.rx-pillar { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .01em; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
.rx-pillar i { color: var(--pep-gold, #E8A020); font-size: 1rem; transition: color .18s ease; }
.rx-pillar:hover { background: var(--pep-gold, #E8A020); border-color: var(--pep-gold, #E8A020); color: #0A2342; transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(232,160,32,.55); }
.rx-pillar:hover i { color: #0A2342; }
@media (max-width: 575.98px) { .rx-pillar { padding: 10px 18px; font-size: .9rem; } }

/* Hero stat counters (right side, under the illustration) */
.rx-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; margin: 18px auto 0; }
.rx-stat { text-align: center; padding: 15px 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(2px); }
.rx-stat-num { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: var(--pep-gold-light, #F2C46B); font-variant-numeric: tabular-nums; }
.rx-stat-label { display: block; margin-top: 7px; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.82); }
@media (max-width: 575.98px) { .rx-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; } .rx-stat-num { font-size: 1.5rem; } }

/* Hero decorative background pattern (dots + rings + glows) */
.rx-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url('../images/brand/pep-hero-pattern.svg') center center / cover no-repeat; pointer-events: none; }
.rx-hero > .container { position: relative; z-index: 1; }

/* Hero photo background (CollegeDekho-style) + navy overlay for readability */
.rx-hero { background: linear-gradient(100deg, rgba(7,24,44,0.96) 0%, rgba(9,30,54,0.86) 42%, rgba(12,40,70,0.55) 100%), url('../images/brand/pep-hero-bg.jpg?v=3') center 28% / cover no-repeat !important; }
.rx-hero::before, .rx-hero::after { display: none !important; }
.rx-hero .rx-stat { background: rgba(8,26,48,0.6); border-color: rgba(255,255,255,0.22); backdrop-filter: blur(6px); }
@media (max-width: 991.98px) { .rx-hero { background: linear-gradient(170deg, rgba(7,24,44,0.95) 0%, rgba(9,30,54,0.85) 55%, rgba(12,40,70,0.7) 100%), url('../images/brand/pep-hero-bg.jpg?v=3') center / cover no-repeat !important; } }

/* Floating WhatsApp chat button (bottom-right); scroll-to-top sits above it */
.pep-whatsapp-fab { position: fixed; bottom: 2rem; right: 2rem; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.85rem; text-decoration: none; box-shadow: 0 10px 24px -6px rgba(37,211,102,.55); z-index: 1001; transition: transform .2s ease, box-shadow .2s ease; animation: pepWaPulse 2.6s ease-in-out infinite; }
.pep-whatsapp-fab:hover { color: #fff; transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 30px -8px rgba(37,211,102,.7); }
@keyframes pepWaPulse { 0%, 100% { box-shadow: 0 10px 24px -6px rgba(37,211,102,.55), 0 0 0 0 rgba(37,211,102,.45); } 50% { box-shadow: 0 10px 24px -6px rgba(37,211,102,.55), 0 0 0 12px rgba(37,211,102,0); } }
.scroll-to-top { bottom: calc(2rem + 72px) !important; }
@media (max-width: 575.98px) { .pep-whatsapp-fab { width: 52px; height: 52px; font-size: 1.6rem; bottom: 1.25rem; right: 1.25rem; } .scroll-to-top { bottom: calc(1.25rem + 66px) !important; } }
@media (prefers-reduced-motion: reduce) { .pep-whatsapp-fab { animation: none; } }

/* City landmark image (PNG) in the cities slider */
.city-slide-img { width: 60px; height: 60px; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.city-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Explore by Domain" — vibrant per-domain colour accents */
.pep-domains-section .row > [class*="col-"] .pep-domain-card { --d: #1A6B8A; }
.pep-domains-section .row > [class*="col-"]:nth-child(1) .pep-domain-card { --d: #0E7490; }
.pep-domains-section .row > [class*="col-"]:nth-child(2) .pep-domain-card { --d: #2855A0; }
.pep-domains-section .row > [class*="col-"]:nth-child(3) .pep-domain-card { --d: #C7881B; }
.pep-domains-section .row > [class*="col-"]:nth-child(4) .pep-domain-card { --d: #1E9E6A; }
.pep-domains-section .row > [class*="col-"]:nth-child(5) .pep-domain-card { --d: #8A54C6; }
.pep-domains-section .row > [class*="col-"]:nth-child(6) .pep-domain-card { --d: #0E9AA8; }
.pep-domains-section .row > [class*="col-"]:nth-child(7) .pep-domain-card { --d: #C0504D; }
.pep-domains-section .row > [class*="col-"]:nth-child(8) .pep-domain-card { --d: #D9772E; }

.pep-domains-section .pep-domain-card { position: relative; overflow: hidden; border: 1px solid var(--rx-border, #DDE3EA) !important; border-radius: 16px !important; padding: 26px 24px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pep-domains-section .pep-domain-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--d); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.pep-domains-section .pep-domain-card:hover { transform: translateY(-6px); border-color: var(--d) !important; box-shadow: 0 20px 40px -18px var(--d), 0 10px 22px -14px rgba(16,24,40,.22) !important; }
.pep-domains-section .pep-domain-card:hover::before { transform: scaleX(1); }
.pep-domains-section .pep-domain-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--d) !important; color: #fff !important; font-size: 1.3rem; margin-bottom: 18px; box-shadow: 0 10px 20px -8px var(--d); transition: transform .22s ease; }
.pep-domains-section .pep-domain-card:hover .pep-domain-icon { transform: scale(1.08) rotate(-4deg); }
.pep-domains-section .pep-domain-link { color: var(--d) !important; display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; }
.pep-domains-section .pep-domain-link i { transition: transform .2s ease; margin-left: 0 !important; }
.pep-domains-section .pep-domain-card:hover .pep-domain-link i { transform: translateX(5px); }
:root[data-theme="dark"] .pep-domains-section .pep-domain-card { background: #0f2440 !important; }

/* "Why choose PEP" — polished feature cards with branded icon + check badge */
.pep-why-section .pep-why-card { padding: 28px 24px; border-radius: 16px !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pep-why-section .pep-why-card:hover { transform: translateY(-6px); border-color: var(--pep-gold, #E8A020) !important; box-shadow: 0 22px 44px -20px rgba(232,160,32,.4), 0 10px 22px -14px rgba(16,24,40,.2) !important; }
.pep-why-section .pep-why-ico { position: relative; width: 56px; height: 56px; border-radius: 15px; background: linear-gradient(145deg, #15406f, #0A2342) !important; color: var(--pep-gold-light, #F2C46B) !important; font-size: 22px; box-shadow: 0 12px 24px -8px rgba(10,35,66,.45); margin-bottom: 20px; transition: transform .22s ease; }
.pep-why-section .pep-why-card:hover .pep-why-ico { transform: scale(1.06) rotate(-4deg); }
.pep-why-section .pep-why-ico::after { content: '\2713'; position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--pep-gold, #E8A020); color: #0A2342; font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 3px 7px rgba(0,0,0,.28); }
:root[data-theme="dark"] .pep-why-section .pep-why-ico { background: linear-gradient(145deg, #1a4d82, #0c2a4a) !important; }

/* ===== Partner section — bright premium redesign (overrides earlier dark panel) ===== */
.pep-partner-section { padding: 80px 0; background: #fff; }
.pep-partner-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr);
    gap: 48px;
    align-items: center;
    background: linear-gradient(135deg, #0b2a4a, #12355e) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px !important;
    padding: 54px 50px;
    overflow: hidden;
    box-shadow: 0 26px 64px -32px rgba(10,35,66,.5);
}
.pep-partner-panel::before { content:''; position:absolute; top:-130px; right:-90px; width:380px; height:380px; background: radial-gradient(circle, rgba(217,174,102,.22), transparent 70%); pointer-events:none; }
.pep-partner-panel::after  { content:''; position:absolute; bottom:-150px; left:-110px; width:400px; height:400px; background: radial-gradient(circle, rgba(26,107,138,.15), transparent 70%); pointer-events:none; }
.pep-partner-intro { position: relative; z-index: 1; }
.pep-partner-intro .pep-eyebrow-light { color: var(--pep-gold-light) !important; }
.pep-partner-intro h2 { color: #fff !important; font-size: 2rem; font-weight: 800; line-height: 1.22; }
.pep-partner-intro .pep-btn-gold { background: var(--pep-gold) !important; color: var(--pep-navy) !important; border-radius: 10px; box-shadow: 0 14px 28px -12px rgba(217,174,102,.75); }
.pep-partner-intro .pep-btn-gold:hover { background: var(--pep-gold-hover) !important; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(217,174,102,.85); }

.pep-partner-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.pep-partner-grid div {
    background: rgba(255,255,255,.055) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    padding: 24px 22px !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.pep-partner-grid div:hover { transform: translateY(-5px); background: rgba(255,255,255,.09) !important; box-shadow: 0 20px 44px -24px rgba(0,0,0,.5); border-color: rgba(217,174,102,.4) !important; }
.pep-partner-grid i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 13px;
    color: #fff !important; font-size: 1.2rem; margin-bottom: 16px;
    box-shadow: 0 10px 20px -8px rgba(10,35,66,.3);
}
.pep-partner-grid div:nth-child(1) i { background: linear-gradient(145deg, #F0C878, #D9AE66); }
.pep-partner-grid div:nth-child(2) i { background: linear-gradient(145deg, #2E9BC0, #1A6B8A); }
.pep-partner-grid div:nth-child(3) i { background: linear-gradient(145deg, #34B882, #178A5A); }
.pep-partner-grid div:nth-child(4) i { background: linear-gradient(145deg, #2A5B9A, #0A2342); }
.pep-partner-grid h3 { color: #fff !important; font-size: 1.06rem; font-weight: 700; margin-bottom: 7px; }
.pep-partner-grid p { color: #c0ceda !important; font-size: .88rem; margin: 0; line-height: 1.62; }

:root[data-theme="dark"] .pep-partner-panel { border-color: rgba(255,255,255,.1); }
@media (max-width: 991px) { .pep-partner-panel { grid-template-columns: 1fr; padding: 36px 26px; gap: 32px; } }
@media (max-width: 575px) { .pep-partner-grid { grid-template-columns: 1fr; } }

/* ===== Real outcomes / placement stats banner ===== */
.pep-outcomes-section { padding: 72px 0; background: #fff; }
.pep-outcomes-panel {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 440px;
    padding: 54px 56px;
    background: linear-gradient(118deg, #0a2342 0%, #103357 62%, #123a63 100%);
    box-shadow: 0 28px 70px -34px rgba(10,35,66,.55);
    display: flex;
    align-items: center;
}
.pep-outcomes-panel::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url('../images/brand/pep-hero-pattern.svg') center/cover no-repeat;
    opacity: .5; pointer-events: none;
}
.pep-outcomes-content { position: relative; z-index: 2; max-width: 60%; }
.pep-outcomes-title { color: #fff; font-size: 2.3rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; }
.pep-outcomes-title span { font-weight: 500; opacity: .96; }
.pep-outcomes-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }
.pep-outcome-stat {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 15px 22px; min-width: 118px;
    display: flex; flex-direction: column; gap: 3px;
    backdrop-filter: blur(2px);
}
.pep-outcome-num { color: var(--pep-gold-light); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pep-outcome-lbl { color: #cdd9e5; font-size: .85rem; line-height: 1.3; }
.pep-outcomes-ribbon {
    display: inline-block;
    margin: 28px 0 16px -56px;
    padding: 11px 26px 11px 56px;
    background: linear-gradient(90deg, #d9ae66, #e8c680);
    color: #0a2342; font-weight: 600; font-size: .94rem;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 10px 24px -12px rgba(217,174,102,.7);
}
.pep-outcomes-program { color: #fff; font-size: 1.55rem; font-weight: 800; margin: 0; }
.pep-outcomes-figure { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; z-index: 1; }
.pep-outcomes-figure img { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.pep-outcomes-figure::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg, #0a2342 0%, rgba(10,35,66,.84) 22%, rgba(12,38,66,.34) 55%, rgba(18,58,99,.2) 100%);
}
.pep-outcomes-figure::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 2;
    background: linear-gradient(0deg, rgba(10,35,66,.55), transparent);
}
@media (max-width: 1100px) { .pep-outcomes-content { max-width: 66%; } .pep-outcomes-title { font-size: 2rem; } }
@media (max-width: 900px) {
    .pep-outcomes-panel { padding: 40px 30px; min-height: 0; }
    .pep-outcomes-content { max-width: 100%; }
    .pep-outcomes-figure { display: none; }
    .pep-outcomes-ribbon { margin-left: -30px; padding-left: 30px; }
}
@media (max-width: 480px) {
    .pep-outcomes-title { font-size: 1.55rem; }
    .pep-outcomes-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pep-outcome-stat { min-width: 0; padding: 14px 16px; }
    .pep-outcome-num { font-size: 1.3rem; }
    .pep-outcome-lbl { font-size: .8rem; }
    .pep-outcomes-program { font-size: 1.3rem; }
}

/* ===== Top Entrance Exams (home) ===== */
.exams-home-section { padding: 76px 0; background: var(--pep-light); }
.exams-home-section .section-header-modern { text-align: left; }
.exams-home-section .section-subtitle-modern { margin-left: 0; margin-right: 0; max-width: 640px; }
.exam-home-card {
    position: relative;
    display: flex !important; flex-direction: column; height: 100%;
    background: #fff;
    border: 1px solid #e8edf3;
    border-top: 3px solid var(--ex, #0B2A4A);
    border-radius: 16px;
    padding: 26px 24px 28px;
    box-shadow: 0 10px 26px -18px rgba(10,35,66,.22);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.exam-home-card::after {
    content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 120px;
    background: radial-gradient(circle at top right, var(--ex, #0B2A4A), transparent 70%);
    opacity: .06; pointer-events: none;
}
.exam-home-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(10,35,66,.34); }
.exam-home-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.exam-home-icon {
    width: 54px; height: 54px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ex, #0B2A4A);
    color: #fff; font-size: 1.3rem;
    box-shadow: 0 12px 22px -10px var(--ex, rgba(10,35,66,.5));
}
.exam-home-level {
    font-size: .72rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    color: var(--ex, #0B2A4A);
    background: color-mix(in srgb, var(--ex, #0B2A4A) 12%, #fff);
    padding: 5px 12px; border-radius: 30px;
}
.exam-home-title { color: var(--pep-navy); font-size: 1.18rem; font-weight: 700; line-height: 1.3; margin: 0 0 9px; }
.exam-home-desc { color: #5c6c7c; font-size: .92rem; line-height: 1.6; margin: 0 0 22px; flex-grow: 1; }
.exam-home-btn {
    align-self: flex-start;
    display: inline-flex; align-items: center;
    background: var(--ex, #0B2A4A);
    color: #fff !important;
    font-weight: 600; font-size: .9rem;
    padding: 10px 24px; border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 12px 24px -12px var(--ex, rgba(10,35,66,.5));
    transition: filter .2s ease, transform .2s ease, gap .2s ease;
}
.exam-home-btn i { transition: transform .2s ease; }
.exam-home-btn:hover { filter: brightness(.93); transform: translateY(-1px); color: #fff !important; }
.exam-home-btn:hover i { transform: translateX(3px); }
.btn-view-all-exams {
    display: inline-flex; align-items: center;
    color: var(--pep-navy); font-weight: 700; font-size: 1rem;
    text-decoration: none; padding: 12px 28px;
    border: 2px solid var(--pep-navy); border-radius: 44px;
    transition: background .2s ease, color .2s ease;
}
.btn-view-all-exams:hover { background: var(--pep-navy); color: #fff; }
:root[data-theme="dark"] .exams-home-section { background: transparent; }
:root[data-theme="dark"] .exam-home-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); border-top-color: var(--ex, #0B2A4A); }
:root[data-theme="dark"] .exam-home-title { color: #fff; }
:root[data-theme="dark"] .exam-home-desc { color: #c0ceda; }
:root[data-theme="dark"] .exam-home-level { background: color-mix(in srgb, var(--ex, #0B2A4A) 26%, transparent); }
:root[data-theme="dark"] .btn-view-all-exams { color: #fff; border-color: rgba(255,255,255,.4); }
@media (max-width: 575px) { .exams-home-section { padding: 54px 0; } }

/* ===== Service pages (Training / Placement) ===== */
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.svc-btn-gold { display: inline-flex; align-items: center; background: var(--pep-gold); color: var(--pep-navy) !important; font-weight: 700; padding: 12px 26px; border-radius: 44px; text-decoration: none; box-shadow: 0 14px 28px -12px rgba(217,174,102,.7); transition: background .2s ease, transform .2s ease; }
.svc-btn-gold:hover { background: var(--pep-gold-hover); color: var(--pep-navy) !important; transform: translateY(-2px); }
.svc-btn-ghost { display: inline-flex; align-items: center; background: transparent; color: #fff !important; font-weight: 600; padding: 12px 26px; border-radius: 44px; border: 1.5px solid rgba(255,255,255,.4); text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.svc-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff !important; }

.svc-section { padding: 74px 0; background: #fff; }
.svc-section--alt { background: var(--pep-light); }
.svc-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.svc-head .pep-eyebrow { display: block; margin-bottom: 10px; }
.svc-head h2 { color: var(--pep-navy); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; margin: 0 0 12px; }
.svc-head p { color: #5c6c7c; font-size: 1.02rem; line-height: 1.7; margin: 0; }

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e8edf3; border-radius: 16px; padding: 28px 24px; box-shadow: 0 10px 26px -18px rgba(10,35,66,.22); transition: transform .25s ease, box-shadow .25s ease; }
.svc-section--alt .svc-card { background: #fff; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(10,35,66,.32); }
.svc-ico { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #15406f, #0A2342); color: var(--pep-gold-light); font-size: 1.25rem; margin-bottom: 18px; box-shadow: 0 12px 22px -10px rgba(10,35,66,.45); }
.svc-card h3 { color: var(--pep-navy); font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; }
.svc-card p { color: #5c6c7c; font-size: .92rem; line-height: 1.6; margin: 0; }

.svc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: svcstep; }
.svc-step { position: relative; padding: 28px 22px 24px; background: #fff; border: 1px solid #e8edf3; border-radius: 16px; }
.svc-step::before { counter-increment: svcstep; content: counter(svcstep); position: absolute; top: -18px; left: 22px; width: 42px; height: 42px; border-radius: 12px; background: var(--pep-gold); color: var(--pep-navy); font-weight: 800; font-size: 1.1rem; display: grid; place-items: center; box-shadow: 0 10px 20px -8px rgba(217,174,102,.6); }
.svc-step h3 { color: var(--pep-navy); font-size: 1.05rem; font-weight: 700; margin: 16px 0 7px; }
.svc-step p { color: #5c6c7c; font-size: .9rem; line-height: 1.6; margin: 0; }

.svc-cta { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(120deg, #0a2342, #103357 62%, #123a63); color: #fff; padding: 48px 44px; text-align: center; box-shadow: 0 26px 60px -34px rgba(10,35,66,.55); }
.svc-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; margin: 0 0 10px; }
.svc-cta p { color: #cdd9e5; max-width: 560px; margin: 0 auto 24px; line-height: 1.7; }
.svc-cta .svc-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

:root[data-theme="dark"] .svc-section { background: transparent; }
:root[data-theme="dark"] .svc-section--alt { background: transparent; }
:root[data-theme="dark"] .svc-card, :root[data-theme="dark"] .svc-step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
:root[data-theme="dark"] .svc-head h2, :root[data-theme="dark"] .svc-card h3, :root[data-theme="dark"] .svc-step h3 { color: #fff; }
:root[data-theme="dark"] .svc-head p, :root[data-theme="dark"] .svc-card p, :root[data-theme="dark"] .svc-step p { color: #c0ceda; }

@media (max-width: 991px) { .svc-grid, .svc-steps { grid-template-columns: repeat(2, 1fr); } .svc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .svc-grid, .svc-grid--3, .svc-steps { grid-template-columns: 1fr; } .svc-section { padding: 52px 0; } .svc-cta { padding: 36px 24px; } }

/* ===== Abroad Jobs ===== */
.jobs-section { padding: 74px 0; background: #fff; }
.jobs-section--home { background: var(--pep-light); }
.abroad-listing { padding: 48px 0 76px; background: var(--pep-light); }

.jobs-filter { display: flex; flex-wrap: wrap; gap: 12px; background: #fff; border: 1px solid #e8edf3; border-radius: 16px; padding: 16px; margin-bottom: 32px; box-shadow: 0 10px 26px -20px rgba(10,35,66,.22); }
.jobs-filter .jf-field { flex: 1 1 180px; display: flex; flex-direction: column; }
.jobs-filter label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #7a8a99; margin: 0 0 5px 4px; }
.jobs-filter select, .jobs-filter input { border: 1px solid #dbe3ec; border-radius: 10px; padding: 11px 14px; font-size: .92rem; color: var(--pep-navy); background: #fff; }
.jobs-filter .jf-actions { display: flex; align-items: flex-end; gap: 8px; }
.jobs-filter .jf-btn { background: var(--pep-navy); color: #fff; border: none; border-radius: 10px; padding: 12px 22px; font-weight: 600; cursor: pointer; }
.jobs-filter .jf-reset { background: #eef2f6; color: var(--pep-navy); border: none; border-radius: 10px; padding: 12px 18px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }

.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e8edf3; border-top: 3px solid var(--ex, #0B2A4A); border-radius: 16px; padding: 24px; box-shadow: 0 10px 26px -18px rgba(10,35,66,.22); transition: transform .25s ease, box-shadow .25s ease; }
.job-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(10,35,66,.34); }
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.job-ico { width: 52px; height: 52px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--ex, #0B2A4A); color: #fff; font-size: 1.2rem; box-shadow: 0 12px 22px -10px var(--ex, rgba(10,35,66,.5)); }
.job-country { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--ex, #0B2A4A); background: color-mix(in srgb, var(--ex, #0B2A4A) 12%, #fff); padding: 6px 12px; border-radius: 30px; white-space: nowrap; }
.job-card h3 { color: var(--pep-navy); font-size: 1.12rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.job-meta { color: #7a8a99; font-size: .85rem; margin: 0 0 14px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.job-chip { font-size: .76rem; font-weight: 600; color: #475467; background: #f1f5f9; border-radius: 30px; padding: 5px 12px; }
.job-salary { font-size: .92rem; font-weight: 700; color: var(--pep-navy); margin: 0 0 14px; }
.job-salary i { color: var(--pep-gold); margin-right: 6px; }
.job-desc { color: #5c6c7c; font-size: .9rem; line-height: 1.6; margin: 0 0 20px; flex-grow: 1; }
.job-card-btn { align-self: flex-start; display: inline-flex; align-items: center; background: var(--pep-navy); color: #fff !important; font-weight: 600; font-size: .9rem; padding: 10px 22px; border-radius: 40px; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.job-card-btn i { margin-left: 8px; transition: transform .2s ease; }
.job-card-btn:hover { background: var(--pep-navy-deep); color: #fff !important; transform: translateY(-1px); }
.job-card-btn:hover i { transform: translateX(3px); }

.jobs-empty { text-align: center; padding: 60px 20px; color: #7a8a99; }
.jobs-empty i { font-size: 2.4rem; color: #c3cedb; margin-bottom: 14px; }

/* detail */
.job-detail-section { padding: 44px 0 76px; background: var(--pep-light); }
.job-detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; align-items: start; }
.job-detail-main { background: #fff; border: 1px solid #e8edf3; border-radius: 18px; padding: 34px; box-shadow: 0 14px 34px -24px rgba(10,35,66,.25); }
.job-detail-main h2 { color: var(--pep-navy); font-size: 1.25rem; font-weight: 700; margin: 28px 0 12px; }
.job-detail-main h2:first-child { margin-top: 0; }
.job-detail-main p, .job-detail-main li { color: #475467; font-size: .96rem; line-height: 1.75; }
.job-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 14px; padding: 20px 22px; margin-bottom: 26px; }
.job-fact .fl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: #8a97a5; font-weight: 700; margin-bottom: 3px; }
.job-fact .fv { color: var(--pep-navy); font-weight: 600; font-size: .95rem; }

.job-apply-card { position: sticky; top: 90px; background: linear-gradient(135deg, #0b2a4a, #12355e); color: #fff; border-radius: 18px; padding: 28px 26px; box-shadow: 0 24px 54px -30px rgba(10,35,66,.6); }
.job-apply-card h3 { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0 0 4px; }
.job-apply-card p.jac-sub { color: #c0ceda; font-size: .88rem; margin: 0 0 18px; }
.job-apply-card .jac-field { margin-bottom: 12px; }
.job-apply-card label { display: block; font-size: .8rem; color: #cdd9e5; margin-bottom: 5px; }
.job-apply-card input { width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 10px; padding: 11px 14px; font-size: .92rem; }
.job-apply-card input::placeholder { color: #8ca0b4; }
.job-apply-card input:focus { outline: none; border-color: var(--pep-gold); background: rgba(255,255,255,.1); }
.job-apply-submit { width: 100%; margin-top: 6px; background: var(--pep-gold); color: var(--pep-navy); font-weight: 700; border: none; border-radius: 40px; padding: 13px; font-size: .98rem; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.job-apply-submit:hover { background: var(--pep-gold-hover); transform: translateY(-1px); }
.job-apply-submit:disabled { opacity: .7; cursor: default; }
.jac-feedback { font-size: .86rem; margin-top: 12px; min-height: 1em; }
.jac-feedback.ok { color: #7ee0b0; }
.jac-feedback.err { color: #ffb4a8; }
.jac-note { color: #93a3b5; font-size: .8rem; margin: 12px 0 0; text-align: center; }
.jac-note a { color: var(--pep-gold-light); }

:root[data-theme="dark"] .jobs-section, :root[data-theme="dark"] .jobs-section--home, :root[data-theme="dark"] .abroad-listing, :root[data-theme="dark"] .job-detail-section { background: transparent; }
:root[data-theme="dark"] .job-card, :root[data-theme="dark"] .jobs-filter, :root[data-theme="dark"] .job-detail-main { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
:root[data-theme="dark"] .job-card h3, :root[data-theme="dark"] .job-detail-main h2 { color: #fff; }
:root[data-theme="dark"] .job-desc, :root[data-theme="dark"] .job-detail-main p, :root[data-theme="dark"] .job-detail-main li { color: #c0ceda; }
:root[data-theme="dark"] .job-facts { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .job-fact .fv { color: #fff; }
:root[data-theme="dark"] .job-chip { background: rgba(255,255,255,.08); color: #c0ceda; }

@media (max-width: 991px) { .jobs-grid { grid-template-columns: repeat(2, 1fr); } .job-detail-grid { grid-template-columns: 1fr; } .job-apply-card { position: static; } }
@media (max-width: 575px) { .jobs-grid { grid-template-columns: 1fr; } .job-facts { grid-template-columns: 1fr; } .job-detail-main { padding: 24px; } }