:root {
    --primary: #003366;
    --primary-dark: #002244;
    --secondary: #00B140;
    --secondary-dark: #008f33;
    --accent: #FFB81C;
    --bg-light: #F8F9FA;
    --text-dark: #1A1A1A;
    --text-muted: #666666;
    --white: #FFFFFF;
    --soft-blue: #E8F0F8;
    --soft-green: #E8F5E9;
    --soft-yellow: #FFF8E1;
    --gradient-blue: linear-gradient(135deg, var(--primary) 0%, #0055aa 100%);
    --gradient-green: linear-gradient(135deg, var(--secondary) 0%, #00d951 100%);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow: 0 15px 35px rgba(0, 51, 102, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Nav */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
}

header.scrolled {
    position: fixed;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 10px 0;
    animation: slideDown 0.4s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Logo Styles */
.logo-text {
    fill: var(--white);
    transition: var(--transition);
}

.logo-rect {
    transition: var(--transition);
}

header.scrolled .logo-text {
    fill: var(--primary);
}

header.scrolled .logo-rect {
    fill: var(--secondary);
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
}

header:not(.scrolled) .nav-links a {
    color: var(--white);
}

.nav-links a:hover {
    color: var(--secondary);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    display: flex;
    gap: 5px;
}

.lang-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

header.scrolled .lang-btn {
    border-color: var(--primary);
    color: var(--primary);
}

.lang-btn.active {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

.btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-secondary {
    background: var(--gradient-green);
    color: var(--white);
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 177, 64, 0.2);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 177, 64, 0.3);
}

.btn-white {
    background: var(--white);
    color: var(--primary);
}

/* Hero Section */
.hero {
    position: relative;
    padding: 180px 0 120px;
    background-color: var(--primary);
    background-image: linear-gradient(135deg, var(--primary) 0%, #004d99 100%);
    color: var(--white);
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,224L48,213.3C96,203,192,181,288,186.7C384,192,480,224,576,218.7C672,213,768,171,864,160C960,149,1056,171,1152,186.7C1248,203,1344,213,1392,218.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    z-index: 2;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 3;
}

.hero-text h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 35px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-image img {
    width: 100%;
    border-radius: 20px;
    transform: perspective(1000px) rotateY(-5deg);
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.3);
}

/* Vibrancy Accents */
section {
    position: relative;
    padding: 120px 0;
}

/* Pillars / Mission */
.mission {
    text-align: center;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.mission-card {
    padding: 40px 30px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    text-align: left;
    border-bottom: 4px solid transparent;
}

.mission-card:hover {
    transform: translateY(-10px);
    border-bottom-color: var(--secondary);
}

.stat-icon {
    font-size: 32px;
    margin-bottom: 15px;
    display: block;
}

/* About Section */
.about {
    background: #fdfdfd;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-img-main {
    width: 100%;
    height: 500px;
    object-fit: cover;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    border-radius: 20px;
    transition: var(--transition);
}

.about-img-main:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.about-content h2 {
    font-size: 42px;
    color: var(--primary);
    margin-bottom: 20px;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Tutoring Features */
.tutoring-features {
    background: var(--white);
}

.feature-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 14px 28px;
    border: 2px solid var(--soft-blue);
    background: var(--white);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    color: var(--primary);
}

.tab-btn.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.2);
}

.feature-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.feature-graphic {
    position: relative;
    border-radius: 30px;
}

.graphic-main {
    width: 100%;
    border-radius: 30px;
    box-shadow: var(--shadow);
    display: block;
    transition: opacity 0.3s ease;
}

.graphic-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 5;
}

.overlay-top {
    top: -30px;
    right: -20px;
    width: 220px;
    animation: float 4s ease-in-out infinite;
}

.overlay-bottom {
    bottom: -30px;
    left: -20px;
    width: 200px;
    animation: float 5s ease-in-out infinite reverse;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
    }
}

.feature-info h3 {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 25px;
}

.feature-list {
    list-style: none;
    margin-bottom: 40px;
}

.feature-list li {
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
    font-size: 18px;
}

.check-icon {
    color: var(--secondary);
    font-weight: bold;
}

/* Modern FAQ Section */
.faq-section {
    padding: 120px 0;
    background: #fdfdfd;
}

.faq-section {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
    padding: 120px 0;
}

.faq-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.faq-header h2 {
    font-size: 42px;
    color: var(--primary);
    margin-bottom: 20px;
}

.faq-header p {
    color: var(--text-muted);
    font-size: 18px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.faq-item {
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    border-left: 5px solid var(--soft-green);
    overflow: hidden;
    height: fit-content;
}

.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 51, 102, 0.1);
    border-left-color: var(--secondary);
}

.faq-question {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
    font-size: 18px;
    user-select: none;
}

.faq-question i {
    font-size: 14px;
    color: var(--secondary);
    transition: transform 0.3s ease;
    background: var(--soft-green);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.faq-item.active {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.faq-item.active .faq-question {
    color: var(--secondary);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 30px 30px;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    background: var(--secondary);
    color: var(--white);
}

/* Apply Section Template */
.apply-admission {
    position: relative;
    background-color: var(--primary);
    color: var(--white);
    overflow: hidden;
    display: flex;
    min-height: 700px;
}

.apply-left {
    flex: 1;
    padding: 100px 80px;
    z-index: 2;
    position: relative;
}

.apply-right {
    flex: 1;
    position: relative;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.apply-image-single {
    width: 100%;
    height: 100%;
}

.apply-image-single img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: var(--transition);
}

.image-overlay-caption {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    padding: 30px;
    background: rgba(0, 51, 102, 0.85);
    /* Deep Blue matching brand */
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: var(--white);
    border-left: 6px solid var(--secondary);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.image-overlay-caption h4 {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    line-height: 1.2;
}

.image-overlay-caption p {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.5;
}

.apply-right:hover .apply-image-single img {
    opacity: 1;
    transform: scale(1.02);
}

.apply-right:hover .image-overlay-caption {
    transform: translateY(-5px);
    background: rgba(0, 177, 64, 0.9);
    /* Changes to Green on hover */
}

/* Torn paper edge effect */
.apply-admission::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 60px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L10,5 L0,10 L15,15 L5,20 L20,25 L10,30 L25,35 L15,40 L30,45 L20,50 L35,55 L25,60 L40,65 L30,70 L45,75 L35,80 L50,85 L40,90 L55,95 L45,100 L60,105 L50,110 L65,115 L55,120 L70,125 L60,130 L75,135 L65,140 L80,145 L70,150 L85,155 L75,160 L90,165 L80,170 L95,175 L85,180 L100,185 L90,190 L100,195 L90,200 L100,205 L90,210 L100,215 L90,220 L100,225 L90,230 L100,235 L90,240 L100,245 L90,250 L100,255 L90,260 L100,265 L90,270 L100,275 L90,280 L100,285 L90,290 L100,295 L90,300 L100,305 L90,310 L100,315 L90,320 L100,325 L90,330 L100,335 L90,340 L100,345 L90,350 L100,355 L90,360 L100,365 L90,370 L100,375 L90,380 L100,385 L90,390 L100,395 L90,400 L100,405 L90,410 L100,415 L90,420 L100,425 L90,430 L100,435 L90,440 L100,445 L90,450 L100,455 L90,460 L100,465 L90,470 L100,475 L90,480 L100,485 L90,490 L100,495 L90,500 L100,505 L90,510 L100,515 L90,520 L100,525 L90,530 L100,535 L90,540 L100,545 L90,550 L100,555 L90,560 L100,565 L90,570 L100,575 L90,580 L100,585 L90,590 L100,595 L90,600 L100,605 L90,610 L100,615 L90,620 L100,625 L90,630 L100,635 L90,640 L100,645 L90,650 L100,655 L90,660 L100,665 L90,670 L100,675 L90,680 L100,685 L90,690 L100,695 L90,700 L100,705 L90,710 L100,715 L90,720 L100,725 L90,730 L100,735 L90,740 L100,745 L90,750 L100,755 L90,760 L100,765 L90,770 L100,775 L90,780 L100,785 L90,790 L100,795 L90,800 L100,805 L90,810 L100,815 L90,820 L100,825 L90,830 L100,835 L90,840 L100,845 L90,850 L100,855 L90,860 L100,865 L90,870 L100,875 L90,880 L100,885 L90,890 L100,895 L90,900 L100,905 L90,910 L100,915 L90,920 L100,925 L90,930 L100,935 L90,940 L100,945 L90,950 L100,955 L90,960 L100,965 L90,970 L100,975 L90,980 L100,985 L90,990 L100,995 L90,1000 L0,1000 Z' fill='%23ffffff' /%3E%3C/svg%3E");
    background-size: 100% 100%;
    transform: translateX(-50%);
    z-index: 3;
}

.admission-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.form-field {
    position: relative;
}

.form-field.full {
    grid-column: span 2;
}

.form-field label {
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--primary);
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 15px;
    color: var(--white);
    outline: none;
    font-family: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--secondary);
}

.student-pics-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.student-card {
    position: absolute;
    width: 250px;
    border: 10px solid var(--white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.student-card img {
    width: 100%;
    display: block;
}

.card-1 {
    top: 15%;
    right: 20%;
    transform: rotate(3deg);
    z-index: 2;
}

.card-2 {
    bottom: 15%;
    left: 20%;
    transform: rotate(-5deg);
    z-index: 3;
    clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 5% 95%);
}

/* Enhanced Footer */
.main-footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: 80px 0 0;
    font-family: 'Montserrat', sans-serif;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 60px;
}

.footer-about p {
    margin: 20px 0;
    opacity: 0.7;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--white);
    transition: var(--transition);
    text-decoration: none;
}

.social-links a:hover {
    background: var(--secondary);
    transform: translateY(-5px);
}

.footer-links h4 {
    margin-bottom: 30px;
    font-size: 18px;
    position: relative;
    padding-bottom: 15px;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--secondary);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--white);
    opacity: 0.7;
    text-decoration: none;
    transition: var(--transition);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--secondary);
    padding-left: 8px;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 30px 0;
    text-align: center;
    margin-top: 60px;
}

.footer-bottom p {
    opacity: 0.5;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 992px) {

    .hero-content,
    .about-grid,
    .mission-grid,
    .feature-display,
    .apply-admission,
    .footer-top {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 42px;
    }

    .about-img-main {
        height: 350px;
    }

    .apply-admission::before {
        display: none;
    }

    .apply-left {
        padding: 60px 20px;
    }

    .apply-right {
        height: 400px;
    }

    .admission-form-grid {
        grid-template-columns: 1fr;
    }
}