/* =========================================================
   SAINIK SCHOOL ARAVALLI
   Army Academy / Field Training Design
========================================================= */

:root {

    --olive-950: #101610;
    --olive-900: #182019;
    --olive-800: #253025;
    --olive-700: #344234;

    --khaki: #b5a47a;
    --khaki-light: #d1c399;

    --bronze: #9f7548;
    --bronze-light: #c29a68;

    --sand: #eee9dd;
    --paper: #f8f6f0;

    --white: #ffffff;
    --black: #111411;

    --gray-300: #d9dcd5;
    --gray-500: #7c837a;
    --gray-600: #626960;
    --gray-700: #444b44;

    --container: 1180px;

    --transition: .3s ease;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 85px;

}

body {

    font-family: "Inter", sans-serif;

    background: var(--paper);

    color: var(--black);

    line-height: 1.7;

    overflow-x: hidden;

}

img {

    width: 100%;

    display: block;

}

a {

    color: inherit;

    text-decoration: none;

}

button,
input,
textarea,
select {

    font: inherit;

}

button {

    cursor: pointer;

}

.container {

    width: min(92%, var(--container));

    margin-inline: auto;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3 {

    font-family: "Barlow Condensed", sans-serif;

    line-height: 1;

    text-transform: uppercase;

}

h1 strong,
h2 span {

    color: var(--khaki);

}

.section {

    padding: 115px 0;

}

.section-tag {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: var(--olive-700);

    font-size: .66rem;

    font-weight: 800;

    letter-spacing: 2px;

}

.section-tag span {

    width: 30px;

    height: 22px;

    display: grid;

    place-items: center;

    background: var(--olive-900);

    color: var(--khaki-light);

    font-size: .62rem;

}

.section-tag.dark {

    color: var(--khaki);

}

.section-tag.light {

    color: var(--khaki-light);

}

.section-tag.light span {

    background: var(--bronze);

    color: white;

}


/* =========================================================
   UTILITY BAR
========================================================= */

.utility-bar {

    background: var(--olive-950);

    color: rgba(255, 255, 255, .6);

    font-size: .63rem;

    letter-spacing: 1px;

}

.utility-inner {

    min-height: 36px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.utility-inner i {

    color: var(--khaki);

    margin-right: 5px;

}

.utility-inner a {

    color: var(--khaki-light);

    font-weight: 800;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(248, 246, 240, .97);

    border-bottom: 1px solid var(--gray-300);

    transition: var(--transition);

}

.header.scrolled {

    box-shadow: 0 12px 40px rgba(16, 22, 16, .1);

}

.nav-container {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* Brand */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}

.brand-badge {

    width: 40px;

    height: 47px;

    display: grid;

    place-items: center;

    background: var(--olive-900);

    color: var(--khaki);

    clip-path: polygon(50% 0,
            100% 17%,
            93% 75%,
            50% 100%,
            7% 75%,
            0 17%);

}

.brand-copy {

    display: flex;

    flex-direction: column;

    line-height: 1;

}

.brand-copy strong {

    color: var(--olive-950);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.25rem;

    letter-spacing: 2px;

}

.brand-copy span {

    margin-top: 5px;

    color: var(--gray-500);

    font-size: .49rem;

    letter-spacing: 1.8px;

}


/* Nav */

.nav {

    display: flex;

    align-items: center;

    gap: 24px;

}

.nav>a {

    color: var(--gray-700);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .3px;

    transition: var(--transition);

}

.nav>a:hover {

    color: var(--bronze);

}

.nav-cta {

    padding: 13px 20px;

    background: var(--olive-900);

    color: white !important;

    letter-spacing: 1px !important;

}

.menu-button {

    display: none;

    border: 0;

    background: none;

    color: var(--olive-900);

    font-size: 1.35rem;

}


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

.hero {

    min-height: calc(100vh - 118px);

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;

}

.hero-image {

    position: absolute;

    inset: 0;

}

.hero-image img {

    height: 100%;

    object-fit: cover;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(12, 20, 13, .96) 0%,
            rgba(20, 29, 20, .84) 47%,
            rgba(15, 25, 17, .25) 100%);

}

.hero-grid-lines {

    position: absolute;

    inset: 0;

    opacity: .13;

    background-image:

        linear-gradient(rgba(255, 255, 255, .3) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, .3) 1px,
            transparent 1px);

    background-size: 80px 80px;

}

.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 80px;

}

.hero-content {

    max-width: 820px;

    padding: 105px 0;

}

.hero-code {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: var(--khaki-light);

    font-family: "Barlow Condensed", sans-serif;

    font-size: .72rem;

    letter-spacing: 2px;

}

.hero-code strong {

    color: var(--bronze-light);

}

.hero-kicker {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--khaki-light);

    font-size: .67rem;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 25px;

}

.hero-kicker span {

    width: 35px;

    height: 2px;

    background: var(--bronze-light);

}

.hero h1 {

    max-width: 850px;

    font-size: clamp(4rem, 8vw, 8rem);

    letter-spacing: -1px;

    margin-bottom: 30px;

}

.hero-content>p {

    max-width: 650px;

    color: rgba(255, 255, 255, .7);

    font-size: 1rem;

}

.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 35px;

}

.btn {

    min-height: 51px;

    padding: 13px 21px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 1px solid transparent;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: 1px;

    transition: var(--transition);

}

.btn-primary {

    background: var(--bronze);

    color: white;

}

.btn-primary:hover {

    background: var(--bronze-light);

    transform: translateY(-2px);

}

.btn-outline {

    border-color: rgba(255, 255, 255, .35);

    color: white;

}

.btn-outline:hover {

    border-color: var(--khaki);

    color: var(--khaki-light);

}

.btn-light {

    background: white;

    color: var(--olive-950);

}

.btn-light:hover {

    background: var(--khaki-light);

}

.btn-dark {

    background: var(--olive-900);

    color: white;

}

.btn-dark:hover {

    background: var(--olive-700);

}

.hero-note {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 22px;

    color: rgba(255, 255, 255, .45);

    font-size: .64rem;

}

.hero-note i {

    color: var(--khaki);

}

.hero-side {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 15px;

}

.hero-side-number {

    color: var(--khaki);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 2rem;

}

.hero-side-line {

    height: 130px;

    width: 1px;

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

}

.hero-side span {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: rgba(255, 255, 255, .5);

    font-size: .58rem;

    letter-spacing: 3px;

}

.hero-bottom {

    position: absolute;

    z-index: 3;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: rgba(255, 255, 255, .45);

    font-size: .55rem;

    letter-spacing: 2px;

}

.hero-bottom i {

    color: var(--khaki);

}


/* =========================================================
   MISSION
========================================================= */

.mission {

    padding: 75px 0;

    background: var(--sand);

    border-bottom: 1px solid #d8d2c3;

}

.mission-grid {

    display: grid;

    grid-template-columns: .45fr 1.15fr 1fr;

    gap: 60px;

    align-items: center;

}

.mission-label {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.mission-label span {

    color: var(--bronze);

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: 2px;

}

.mission-label strong {

    color: rgba(0, 0, 0, .12);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 4rem;

}

.mission-title h2 {

    font-size: clamp(2.2rem, 4vw, 3.7rem);

}

.mission-title h2 span {

    display: block;

}

.mission-copy p {

    color: var(--gray-600);

    font-size: .82rem;

}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}

.about-media {

    min-height: 610px;

    position: relative;

}

.about-main-image {

    width: 83%;

    height: 540px;

    overflow: hidden;

}

.about-main-image img,
.about-secondary-image img {

    height: 100%;

    object-fit: cover;

}

.about-secondary-image {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 43%;

    height: 245px;

    border: 8px solid var(--paper);

    overflow: hidden;

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

}

.field-marker {

    position: absolute;

    left: -25px;

    bottom: 80px;

    width: 120px;

    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: var(--olive-900);

    color: var(--khaki);

    transform: rotate(-7deg);

}

.field-marker span {

    font-size: .55rem;

    letter-spacing: 2px;

}

.field-marker strong {

    font-family: "Barlow Condensed", sans-serif;

    font-size: 2rem;

}

.about-content h2 {

    max-width: 650px;

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.about-content p {

    color: var(--gray-700);

    font-size: .84rem;

}

.about-content .lead {

    font-size: 1rem;

    margin-bottom: 17px;

}

.about-points {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 30px;

    padding-top: 25px;

    border-top: 1px solid var(--gray-300);

}

.about-points>div {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: .75rem;

    font-weight: 700;

}

.about-points i {

    color: var(--bronze);

}


/* =========================================================
   DEVELOPMENT
========================================================= */

.development {

    background: var(--olive-900);

    color: white;

    padding: 105px 0;

}

.development-top {

    margin-bottom: 55px;

}

.development-heading {

    display: grid;

    grid-template-columns: 1fr .7fr;

    gap: 70px;

    align-items: end;

}

.development-heading h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

}

.development-heading>p {

    color: rgba(255, 255, 255, .55);

    font-size: .82rem;

}

.development-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}

.development-card {

    min-height: 350px;

    padding: 30px;

    position: relative;

    border: 1px solid rgba(255, 255, 255, .1);

    transition: var(--transition);

}

.development-card:hover {

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

    transform: translateY(-5px);

}

.card-number {

    color: var(--khaki);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.5rem;

}

.card-icon {

    margin-top: 65px;

    color: var(--bronze-light);

    font-size: 1.8rem;

}

.development-card h3 {

    margin-top: 22px;

    margin-bottom: 14px;

    font-size: 1.55rem;

}

.development-card p {

    color: rgba(255, 255, 255, .53);

    font-size: .75rem;

}

.card-line {

    position: absolute;

    bottom: 28px;

    left: 30px;

    width: 35px;

    height: 2px;

    background: var(--bronze);

}


/* =========================================================
   ACADEMICS
========================================================= */

.academics-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}

.academics-content h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.academics-content .lead {

    font-size: 1rem;

    margin-bottom: 15px;

}

.academics-content p {

    color: var(--gray-700);

    font-size: .83rem;

}

.academic-features {

    margin-top: 30px;

    border-top: 1px solid var(--gray-300);

}

.academic-features>div {

    display: flex;

    gap: 15px;

    padding: 20px 0;

    border-bottom: 1px solid var(--gray-300);

}

.feature-icon {

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    background: var(--olive-900);

    color: var(--khaki);

}

.academic-features h3 {

    font-size: 1.1rem;

    margin-bottom: 4px;

}

.academic-features p {

    font-size: .72rem;

}

.academics-visual {

    position: relative;

}

.academics-visual>img {

    height: 600px;

    object-fit: cover;

}

.blueprint {

    position: absolute;

    z-index: 2;

    top: 25px;

    left: 25px;

    display: flex;

    flex-direction: column;

    padding: 13px;

    background: rgba(16, 22, 16, .9);

    color: white;

    font-family: "Barlow Condensed", sans-serif;

}

.blueprint span {

    color: var(--khaki);

    font-size: .55rem;

    letter-spacing: 2px;

}

.blueprint strong {

    font-size: 1rem;

    letter-spacing: 1px;

}

.blueprint small {

    margin-top: 5px;

    color: rgba(255, 255, 255, .4);

    font-size: .5rem;

}

.image-label {

    position: absolute;

    bottom: 25px;

    left: 25px;

    display: flex;

    gap: 8px;

}

.image-label span {

    padding: 8px 12px;

    background: var(--olive-900);

    color: var(--khaki-light);

    font-size: .58rem;

    font-weight: 800;

}


/* =========================================================
   CAMPUS
========================================================= */

.campus {

    padding: 110px 0;

    background: var(--sand);

}

.campus-header {

    display: grid;

    grid-template-columns: 1fr .7fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 50px;

}

.campus-header h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

}

.campus-header>p {

    color: var(--gray-600);

    font-size: .8rem;

}

.campus-grid {

    display: grid;

    grid-template-columns: 1.35fr 1fr 1fr;

    grid-template-rows: 290px 290px;

    gap: 13px;

}

.campus-card {

    position: relative;

    overflow: hidden;

}

.campus-card.large {

    grid-row: span 2;

}

.campus-card img {

    height: 100%;

    object-fit: cover;

    transition: .7s ease;

}

.campus-card:hover img {

    transform: scale(1.06);

}

.campus-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 24px;

    background: linear-gradient(transparent,
            rgba(0, 0, 0, .9));

    color: white;

}

.campus-overlay span {

    color: var(--khaki-light);

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.campus-overlay h3 {

    margin: 5px 0;

    font-size: 1.45rem;

}

.campus-overlay p {

    color: rgba(255, 255, 255, .62);

    font-size: .68rem;

}


/* =========================================================
   HOSTEL
========================================================= */

.hostel {

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: var(--olive-800);

    color: white;

}

.hostel-photo {

    min-height: 650px;

}

.hostel-photo img {

    height: 100%;

    object-fit: cover;

}

.hostel-content {

    align-self: center;

    padding: 90px;

}

.hostel-content h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.hostel-content>p {

    color: rgba(255, 255, 255, .63);

    font-size: .84rem;

}

.hostel-list {

    display: grid;

    gap: 13px;

    margin: 30px 0;

}

.hostel-list>div {

    display: flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 13px;

    border-bottom: 1px solid rgba(255, 255, 255, .12);

    font-size: .76rem;

}

.hostel-list i {

    color: var(--khaki);

}


/* =========================================================
   ADMISSION
========================================================= */

.admission {

    background: var(--paper);

}

.admission-header {

    display: grid;

    grid-template-columns: 1fr .75fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}

.admission-header h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

}

.admission-header>p {

    color: var(--gray-600);

    font-size: .81rem;

}

.admission-track {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid var(--gray-300);

    border-bottom: 1px solid var(--gray-300);

}

.admission-track article {

    min-height: 270px;

    padding: 28px;

    border-right: 1px solid var(--gray-300);

}

.admission-track article:last-child {

    border-right: 0;

}

.admission-number {

    color: var(--bronze);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.6rem;

}

.admission-track h3 {

    margin-top: 65px;

    margin-bottom: 10px;

    font-size: 1.35rem;

}

.admission-track p {

    color: var(--gray-600);

    font-size: .7rem;

}

.admission-warning {

    max-width: 900px;

    margin: 45px auto 0;

    display: flex;

    gap: 17px;

    padding: 22px;

    background: #f5eee3;

    border-left: 4px solid var(--bronze);

}

.admission-warning>i {

    color: var(--bronze);

    font-size: 1.2rem;

}

.admission-warning strong {

    font-size: .74rem;

}

.admission-warning p {

    margin-top: 4px;

    color: var(--gray-600);

    font-size: .7rem;

}


/* =========================================================
   FEES
========================================================= */

.fees {

    padding: 105px 0;

    background: var(--olive-950);

    color: white;

}

.fees-grid {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 90px;

    align-items: center;

}

.fees-content h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.fees-content p {

    color: rgba(255, 255, 255, .58);

    font-size: .8rem;

    margin-bottom: 13px;

}

.fee-boxes {

    display: grid;

    grid-template-columns: 1fr 1fr;

}

.fee-box {

    min-height: 210px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, .1);

}

.fee-box i {

    color: var(--khaki);

    font-size: 1.5rem;

}

.fee-box strong {

    display: block;

    margin-top: 32px;

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.25rem;

    letter-spacing: 1px;

}

.fee-box p {

    margin-top: 7px;

    font-size: .68rem;

}


/* =========================================================
   NEW SCHOOL
========================================================= */

.new-school {

    min-height: 650px;

    position: relative;

    display: flex;

    align-items: center;

    color: white;

    overflow: hidden;

}

.new-school-image {

    position: absolute;

    inset: 0;

}

.new-school-image img {

    height: 100%;

    object-fit: cover;

}

.new-school-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(10, 16, 10, .96),
            rgba(20, 28, 20, .82));

}

.new-school-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr .7fr;

    gap: 100px;

    align-items: center;

}

.new-school-content h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.new-school-content p {

    max-width: 600px;

    color: rgba(255, 255, 255, .62);

    font-size: .82rem;

    margin-bottom: 14px;

}

.new-school-content .btn {

    margin-top: 15px;

}

.new-school-points {

    border-top: 1px solid rgba(255, 255, 255, .13);

}

.new-school-points>div {

    display: grid;

    grid-template-columns: 40px 1fr;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .13);

}

.new-school-points span {

    color: var(--khaki);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.1rem;

}

.new-school-points strong {

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.2rem;

    letter-spacing: .5px;

}

.new-school-points p {

    grid-column: 2;

    color: rgba(255, 255, 255, .45);

    font-size: .68rem;

}


/* =========================================================
   HARYANA
========================================================= */

.haryana {

    background: var(--sand);

}

.haryana-heading {

    max-width: 850px;

    margin-bottom: 55px;

}

.haryana-heading h2 {

    font-size: clamp(2.8rem, 5vw, 5rem);

    margin-bottom: 25px;

}

.haryana-heading p {

    color: var(--gray-600);

    font-size: .82rem;

}

.haryana-cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

}

.haryana-cards article {

    min-height: 300px;

    padding: 32px;

    background: var(--paper);

    border: 1px solid var(--gray-300);

    transition: var(--transition);

}

.haryana-cards article:hover {

    background: white;

    transform: translateY(-5px);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .08);

}

.location-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.location-top span {

    color: var(--bronze);

    font-family: "Barlow Condensed", sans-serif;

    font-size: 1.4rem;

}

.location-top i {

    color: var(--bronze);

}

.haryana-cards h3 {

    margin-top: 65px;

    margin-bottom: 10px;

    font-size: 1.5rem;

}

.haryana-cards p {

    color: var(--gray-600);

    font-size: .71rem;

    margin-bottom: 22px;

}

.haryana-cards a {

    color: var(--olive-800);

    font-size: .61rem;

    font-weight: 800;

    letter-spacing: 1px;

}


/* =========================================================
   FUTURE
========================================================= */

.future {

    background: var(--paper);

}

.future-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

}

.future-image {

    min-height: 600px;

}

.future-image img {

    height: 100%;

    object-fit: cover;

}

.future-content {

    align-self: center;

    padding: 80px;

}

.future-content h2 {

    font-size: clamp(2.8rem, 5vw, 4.7rem);

    margin-bottom: 25px;

}

.future-content>p {

    color: var(--gray-600);

    font-size: .82rem;

}

.future-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin: 30px 0;

}

.future-tags span {

    padding: 8px 11px;

    border: 1px solid var(--gray-300);

    color: var(--olive-800);

    font-size: .58rem;

    font-weight: 800;

}

.future-note {

    padding-top: 20px;

    border-top: 1px solid var(--gray-300);

    font-size: .69rem !important;

}


/* =========================================================
   FAQ
========================================================= */

.faq {

    background: var(--sand);

}

.faq-grid {

    display: grid;

    grid-template-columns: .7fr 1.3fr;

    gap: 100px;

}

.faq-intro h2 {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    margin-bottom: 25px;

}

.faq-intro p {

    color: var(--gray-600);

    font-size: .8rem;

    margin-bottom: 30px;

}

.faq-list {

    border-top: 1px solid var(--gray-300);

}

.faq-item {

    border-bottom: 1px solid var(--gray-300);

}

.faq-question {

    width: 100%;

    padding: 22px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: none;

    border: 0;

    text-align: left;

    color: var(--black);

    font-size: .78rem;

    font-weight: 800;

}

.faq-question i {

    color: var(--bronze);

    transition: var(--transition);

}

.faq-answer {

    display: none;

    padding: 0 30px 22px 0;

}

.faq-answer p {

    color: var(--gray-600);

    font-size: .71rem;

}

.faq-item.active .faq-answer {

    display: block;

}

.faq-item.active .faq-question i {

    transform: rotate(45deg);

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    padding: 85px 0;

    background: var(--olive-800);

    color: white;

}

.final-cta-grid {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}

.final-cta h2 {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

}

.final-cta p {

    margin-top: 12px;

    color: rgba(255, 255, 255, .58);

    font-size: .78rem;

}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    background: var(--paper);

}

.contact-grid {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 90px;

}

.contact-info h2 {

    font-size: clamp(2.8rem, 5vw, 4.5rem);

    margin-bottom: 25px;

}

.contact-info>p {

    color: var(--gray-600);

    font-size: .8rem;

}

.contact-items {

    display: grid;

    gap: 22px;

    margin-top: 35px;

}

.contact-items>div {

    display: flex;

    gap: 13px;

}

.contact-items>div>i {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: var(--olive-900);

    color: var(--khaki);

}

.contact-items section {

    display: flex;

    flex-direction: column;

}

.contact-items strong {

    font-size: .63rem;

    letter-spacing: 1px;

}

.contact-items span {

    color: var(--gray-600);

    font-size: .7rem;

}

.contact-form {

    padding: 40px;

    background: var(--sand);

    border: 1px solid var(--gray-300);

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}

.form-group {

    margin-bottom: 17px;

}

.form-group label {

    display: block;

    margin-bottom: 7px;

    color: var(--gray-700);

    font-size: .6rem;

    font-weight: 800;

    letter-spacing: 1px;

}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    padding: 13px;

    border: 1px solid #d0d3cc;

    background: var(--paper);

    outline: none;

    font-size: .74rem;

    color: var(--black);

    transition: var(--transition);

}

.form-group textarea {

    resize: vertical;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: var(--bronze);

}

.submit {

    width: 100%;

    border: 0;

}

.form-note {

    margin-top: 10px;

    color: var(--gray-500);

    text-align: center;

    font-size: .57rem;

}

.form-message {

    display: none;

    margin-top: 15px;

    padding: 12px;

    background: #e9f3e9;

    color: #315635;

    font-size: .67rem;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    background: var(--olive-950);

    color: white;

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.4fr .7fr .9fr 1fr;

    gap: 60px;

    padding: 80px 0;

}

.footer-logo .brand-copy strong {

    color: white;

}

.footer-logo .brand-copy span {

    color: rgba(255, 255, 255, .4);

}

.footer-brand>p {

    max-width: 330px;

    margin: 22px 0;

    color: rgba(255, 255, 255, .42);

    font-size: .68rem;

}

.socials {

    display: flex;

    gap: 8px;

}

.socials a {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255, 255, 255, .12);

    color: rgba(255, 255, 255, .55);

    font-size: .68rem;

}

.socials a:hover {

    color: var(--khaki);

    border-color: var(--khaki);

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.footer-column h3 {

    margin-bottom: 8px;

    color: var(--khaki);

    font-family: "Inter", sans-serif;

    font-size: .62rem;

    letter-spacing: 1.5px;

}

.footer-column a {

    color: rgba(255, 255, 255, .43);

    font-size: .67rem;

    transition: var(--transition);

}

.footer-column a:hover {

    color: white;

}

.footer-bottom {

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.footer-bottom-inner {

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.footer-bottom p,
.footer-bottom a {

    color: rgba(255, 255, 255, .3);

    font-size: .59rem;

}

.footer-bottom-inner>div {

    display: flex;

    gap: 20px;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {

    position: fixed;

    right: 20px;

    bottom: 20px;

    width: 44px;

    height: 44px;

    display: grid;

    place-items: center;

    border: 0;

    background: var(--bronze);

    color: white;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: var(--transition);

    z-index: 999;

}

.back-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .nav {

        gap: 14px;

    }

    .nav>a {

        font-size: .65rem;

    }

    .about-grid,
    .academics-grid,
    .contact-grid {

        gap: 50px;

    }

    .development-grid {

        grid-template-columns: 1fr 1fr;

    }

    .admission-track {

        grid-template-columns: 1fr 1fr;

    }

    .admission-track article {

        border-bottom: 1px solid var(--gray-300);

    }

    .admission-track article:nth-child(2n) {

        border-right: 0;

    }

    .footer-grid {

        grid-template-columns: 1.4fr 1fr 1fr;

    }

}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 820px) {

    .menu-button {

        display: block;

    }

    .nav {

        position: absolute;

        top: 82px;

        left: 0;

        right: 0;

        padding: 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: var(--paper);

        border-top: 1px solid var(--gray-300);

        box-shadow: 0 20px 35px rgba(0, 0, 0, .08);

    }

    .nav.open {

        display: flex;

    }

    .nav>a {

        padding: 10px 0;

        font-size: .73rem;

    }

    .nav-cta {

        text-align: center;

    }

    .utility-inner span:nth-child(2) {

        display: none;

    }

    .hero {

        min-height: 700px;

    }

    .hero-container {

        grid-template-columns: 1fr;

    }

    .hero-content {

        padding: 85px 0;

    }

    .hero-side {

        display: none;

    }

    .mission-grid,
    .about-grid,
    .academics-grid,
    .admission-header,
    .fees-grid,
    .new-school-grid,
    .contact-grid {

        grid-template-columns: 1fr;

    }

    .mission-grid {

        gap: 25px;

    }

    .about-grid,
    .academics-grid,
    .contact-grid {

        gap: 60px;

    }

    .about-media {

        min-height: 500px;

    }

    .about-main-image {

        height: 450px;

    }

    .development-heading {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .campus-header {

        grid-template-columns: 1fr;

        gap: 25px;

    }

    .campus-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 300px 300px 300px;

    }

    .campus-card.large {

        grid-column: span 2;

        grid-row: span 1;

    }

    .hostel {

        grid-template-columns: 1fr;

    }

    .hostel-photo {

        min-height: 450px;

    }

    .hostel-content {

        padding: 70px 5%;

    }

    .admission-header {

        gap: 25px;

    }

    .new-school-grid {

        gap: 55px;

    }

    .haryana-cards {

        grid-template-columns: 1fr;

    }

    .future-grid {

        grid-template-columns: 1fr;

    }

    .future-image {

        min-height: 450px;

    }

    .future-content {

        padding: 70px 5%;

    }

    .faq-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .final-cta-grid {

        align-items: flex-start;

        flex-direction: column;

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 540px) {

    .container {

        width: min(90%, var(--container));

    }

    .section {

        padding: 70px 0;

    }

    .utility-inner {

        justify-content: center;

    }

    .utility-inner a {

        display: none;

    }

    .hero {

        min-height: 680px;

    }

    .hero h1 {

        font-size: clamp(3.3rem, 16vw, 5rem);

    }

    .hero-actions {

        flex-direction: column;

    }

    .hero-actions .btn {

        width: 100%;

    }

    .hero-bottom {

        display: none;

    }

    .mission {

        padding: 60px 0;

    }

    .mission-label strong {

        font-size: 3rem;

    }

    .about-media {

        min-height: 420px;

    }

    .about-main-image {

        width: 90%;

        height: 380px;

    }

    .about-secondary-image {

        width: 50%;

        height: 175px;

    }

    .field-marker {

        width: 95px;

        height: 95px;

        left: -8px;

        bottom: 45px;

    }

    .about-points {

        grid-template-columns: 1fr;

    }

    .development-grid {

        grid-template-columns: 1fr;

    }

    .development-card {

        min-height: 0;

    }

    .academics-visual>img {

        height: 430px;

    }

    .campus-grid {

        display: flex;

        flex-direction: column;

    }

    .campus-card,
    .campus-card.large {

        height: 300px;

    }

    .hostel-photo {

        min-height: 350px;

    }

    .admission-track {

        grid-template-columns: 1fr;

    }

    .admission-track article {

        min-height: 0;

        border-right: 0 !important;

        border-bottom: 1px solid var(--gray-300);

    }

    .admission-track article:last-child {

        border-bottom: 0;

    }

    .fee-boxes {

        grid-template-columns: 1fr;

    }

    .fee-box {

        min-height: 0;

    }

    .form-row {

        grid-template-columns: 1fr;

    }

    .contact-form {

        padding: 25px;

    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .footer-bottom-inner {

        flex-direction: column;

        justify-content: center;

        padding: 20px 0;

    }

}