/* ===========================
   HERO SECTION
=========================== */

.hero-section {
    position: relative;
    min-height: 700px;
    padding-top: 86px;
    background: url('../assets/images/hero-campus.jpg') center center/cover no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 26, 54, .75);
}

.hero-section .container {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    transform: translateY(-10px);
}

/* LEFT SIDE */

.hero-left {
    flex: 0 0 50%;
    color: #fff;
}

.hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 10px 18px;
    border-radius: 30px;
    margin-bottom: 25px;
    font-size: .85rem;
    letter-spacing: 1px;
}

.hero-left h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-left p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 35px;
    max-width: 650px;
}

.hero-highlights {
    margin-top: 22px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .9rem;
}

/* BUTTONS */

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary-custom {
    background: #C28A2E;
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
}

.btn-primary-custom:hover {
    color: #fff;
}

.btn-secondary-custom {
    border: 1px solid #fff;
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
}

.btn-secondary-custom:hover {
    color: #fff;
}

/* RIGHT SIDE */

.hero-right {
    flex: 0 0 45%;
    position: relative;
}

.hero-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-main-image img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 24px;
}

.small-card img {
    width: 100%;
    height: 135px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.hero-small-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* FLOATING CARD */

.hero-stat-card {
    position: absolute;
    left: -25px;
    bottom: 40px;

    background: #fff;
    padding: 18px 24px;
    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.hero-stat-card h3 {
    margin: 0;
    font-size: 2rem;
    color: #0A1A36;
    font-weight: 700;
}

.hero-stat-card p {
    margin: 0;
    color: #666;
    font-size: .9rem;
}

.legacy-section {
    padding: 60px 0;
    background: #fff;
}

.legacy-grid {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 60px;
    align-items: center;
}

.legacy-year span {
    color: #C28A2E;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.legacy-year h2 {
    font-size: 7rem;
    font-weight: 800;
    color: #0A1A36;
    line-height: 1;
}

.section-tag {
    color: #C28A2E;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.legacy-content h2 {
    font-size: 3rem;
    color: #0A1A36;
    margin: 15px 0;
}

.legacy-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* Pathway */
.pathways-section {
    padding: 55px 0;
    background: #f8f9fb;
}

.section-header {
    max-width: 680px;
    margin: 0 auto 40px;
}

.section-tag {
    color: #C28A2E;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .8rem;
}

.section-header h2 {
    font-size: 2.6rem;
    color: #0A1A36;
    margin: 12px 0;
    font-weight: 800;
}

.section-header p {
    color: #666;
    font-size: 1rem;
}

.pathways-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.path-card {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    background: #fff;
}

.path-head {
    padding: 28px 32px 24px;
    color: #fff;
}

.path-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.academic-card .path-head {
    background: #0A1A36;
}

.sainik-card .path-head {
    background: #2f4f2f;
}

.path-head span {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 12px;
}

.path-head h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.path-head p {
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
    margin: 0;
}

.path-body {
    padding: 28px 32px 30px;
}

.path-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.path-body li {
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid #eee;
    position: relative;
    color: #333;
}

.path-body li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #C28A2E;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 18px;
}

.path-body a {
    color: #C28A2E;
    font-weight: 700;
    text-decoration: none;
}

/* WHY CHOOSE US */
.why-section {
    padding: 50px 0;
    background: #fff;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.why-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 22px;
    padding: 32px 26px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .05);
    transition: .3s;
}

.why-card:hover {
    transform: translateY(-6px);
}

.why-icon {
    font-size: 2rem;
    margin-bottom: 18px;
}

.why-card h3 {
    font-size: 1.25rem;
    color: #0A1A36;
    margin-bottom: 10px;
}

.why-card p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* PRINCIPAL MESSAGE */
.principal-section {
    padding: 70px 0;
    background: #f8f9fb;
}

.principal-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 60px;
    align-items: center;
}

.principal-image img {
    width: 100%;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    min-height: 400px;
}

.principal-content h2 {
    font-size: 2.7rem;
    color: #0A1A36;
    margin: 15px 0 20px;
}

.principal-content blockquote {
    border-left: 4px solid #C28A2E;
    padding-left: 20px;
    font-size: 1.2rem;
    font-style: italic;
    color: #333;
    margin-bottom: 25px;
}

.principal-content p {
    color: #666;
    line-height: 1.9;
}

.principal-info {
    margin-top: 25px;
}

.principal-info h5 {
    margin: 0;
    color: #0A1A36;
    font-weight: 700;
}

.principal-info span {
    color: #C28A2E;
}

/* CAMPUS VIEW */
.campus-section {
    padding: 50px 0;
    background: #fff;
}

.campus-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 230px;
    gap: 20px;
}

.campus-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}

.campus-item.big {
    grid-row: span 2;
}

.campus-item.wide {
    grid-column: span 2;
}

.campus-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.campus-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 26, 54, .75), transparent);
}

.campus-item span {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

/* ADMISSION CTA */
.enquiry-cta {
    padding: 100px 0;
    background: #f8f9fb;
}

.cta-box {
    background: linear-gradient(135deg,
            #0A1A36,
            #162a52);

    border-radius: 30px;

    padding: 80px 60px;

    text-align: center;

    color: #fff;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.cta-tag {
    display: inline-block;

    background: rgba(255, 255, 255, .15);

    padding: 10px 18px;

    border-radius: 30px;

    font-size: .85rem;

    letter-spacing: 1px;

    margin-bottom: 20px;
}

.cta-box h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.cta-box p {
    max-width: 700px;
    margin: 0 auto 35px;
    color: rgba(255, 255, 255, .85);
    font-size: 1.1rem;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.cta-primary {
    background: #C28A2E;
    color: #fff;
    padding: 15px 34px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
}

.cta-secondary {
    border: 1px solid #fff;
    color: #fff;
    padding: 15px 34px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
}

.cta-primary:hover,
.cta-secondary:hover {
    color: #fff;
}

/* =========================
   RESPONSIVE FIXES
========================= */

@media (max-width: 991px){

    .hero-section{
        min-height:auto;
        padding:140px 0 70px;
    }

    .hero-section .container{
        flex-direction:column;
        gap:40px;
        text-align:center;
        transform:none;
    }

    .hero-left,
    .hero-right{
        flex:0 0 100%;
        width:100%;
    }

    .hero-left h1{
        font-size:2.4rem;
    }

    .hero-left p{
        font-size:1rem;
    }

    .hero-buttons,
    .hero-highlights{
        justify-content:center;
    }

    .hero-main-image img{
        height:260px;
    }

    .small-card img{
        height:130px;
    }

    .legacy-section,
    .pathways-section,
    .why-section,
    .principal-section,
    .campus-section,
    .enquiry-cta{
        padding:60px 0;
    }

    .legacy-grid,
    .principal-wrapper{
        grid-template-columns:1fr;
        gap:35px;
    }

    .legacy-year h2{
        font-size:4rem;
    }

    .legacy-content h2,
    .section-header h2,
    .principal-content h2,
    .cta-box h2{
        font-size:2rem;
    }

    .pathways-grid{
        grid-template-columns:1fr;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .principal-image img{
        height:auto;
    }

    .campus-grid{
        grid-template-columns:1fr;
        grid-auto-rows:220px;
    }

    .campus-item.big,
    .campus-item.wide{
        grid-row:auto;
        grid-column:auto;
    }

    .cta-box{
        padding:50px 25px;
    }
}

@media (max-width: 575px){

    .hero-left h1{
        font-size:2rem;
    }

    .hero-tag{
        font-size:.72rem;
        padding:8px 14px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn-primary-custom,
    .btn-secondary-custom{
        width:100%;
        text-align:center;
        margin:0;
    }

    .hero-small-images{
        grid-template-columns:1fr;
    }

    .small-card img{
        height:160px;
    }

    .path-head,
    .path-body{
        padding:24px;
    }

    .principal-content blockquote{
        font-size:1rem;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-primary,
    .cta-secondary{
        width:100%;
        text-align:center;
    }
}

/* CANDIDATE LIST MODAL */
.notice-section{
    margin-top:-40px;
    position:relative;
    z-index:5;
}

.notice-card{
    background:#fff;
    border-radius:20px;
    padding:28px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.notice-label{
    color:#C28A2E;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.notice-card h3{
    margin:8px 0;
    color:#0A1A36;
    font-weight:800;
}

.notice-card p{
    margin:0;
    color:#64748B;
}

.notice-btn{
    background:#C28A2E;
    color:#fff;
    border:0;
    padding:12px 26px;
    border-radius:30px;
    font-weight:700;
    white-space:nowrap;
}

.candidate-modal .modal-body{
    max-height:75vh;
    overflow:auto;
}

.candidate-modal img{
    width:100%;
}

.candidate-modal iframe{
    width:100%;
    height:75vh;
    border:0;
}

@media(max-width:768px){
    .notice-section{
        margin-top:20px;
    }

    .notice-card{
        flex-direction:column;
        align-items:flex-start;
    }
}