/* =========================================================
   HISAR SAINIK SCHOOL
   Editorial / Premium Education Design
========================================================= */

:root {

    --navy-950: #07111d;
    --navy-900: #0c1928;
    --navy-800: #112438;
    --navy-700: #19334b;

    --copper: #b98251;
    --copper-light: #d4a575;

    --cream: #f5f1e9;
    --ivory: #faf9f5;

    --white: #ffffff;
    --black: #12171c;

    --gray-100: #f2f3f3;
    --gray-200: #e2e5e5;
    --gray-400: #9ba2a5;
    --gray-600: #626a6e;
    --gray-700: #40494e;

    --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: "DM Sans", sans-serif;
    color: var(--black);
    background: var(--ivory);
    line-height: 1.7;
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
}

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: "Libre Baskerville", serif;

    line-height: 1.15;

}

h1 em,
h2 span {

    color: var(--copper);

    font-style: normal;

}

.section {

    padding: 115px 0;

}

.section-number {

    color: var(--navy-700);

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: 2.5px;

    margin-bottom: 22px;

}

.section-number.light {

    color: var(--copper-light);

}


/* =========================================================
   ANNOUNCEMENT
========================================================= */

.announcement {

    background: var(--copper);

    color: var(--navy-950);

    font-size: .72rem;

    font-weight: 700;

}

.announcement-inner {

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.announcement i {

    margin-right: 7px;

}

.announcement a {

    text-transform: uppercase;

    letter-spacing: 1px;

}

.announcement a i {

    margin-left: 5px;

    margin-right: 0;

}


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

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(250, 249, 245, .96);

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

    transition: var(--transition);

}

.header.scrolled {

    box-shadow: 0 12px 40px rgba(7, 17, 29, .08);

}

.nav-wrapper {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* Brand */

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

}

.brand-symbol {

    width: 40px;

    height: 48px;

    display: grid;

    place-items: center;

    color: var(--copper);

    background: var(--navy-900);

    clip-path: polygon(50% 0,
            100% 18%,
            92% 75%,
            50% 100%,
            8% 75%,
            0 18%);

}

.brand-name {

    display: flex;

    flex-direction: column;

    line-height: 1;

}

.brand-name strong {

    font-size: .95rem;

    letter-spacing: 2px;

    color: var(--navy-900);

}

.brand-name span {

    margin-top: 5px;

    font-size: .55rem;

    letter-spacing: 1.5px;

    color: var(--gray-600);

}


/* Navigation */

.navigation {

    display: flex;

    align-items: center;

    gap: 27px;

}

.navigation>a {

    font-size: .77rem;

    font-weight: 600;

    color: var(--gray-700);

    transition: var(--transition);

}

.navigation>a:hover {

    color: var(--copper);

}

.nav-button {

    padding: 12px 18px;

    background: var(--navy-900);

    color: white !important;

}

.mobile-menu {

    display: none;

    background: none;

    border: 0;

    color: var(--navy-900);

    font-size: 1.4rem;

}


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

.hero {

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

    position: relative;

    display: flex;

    align-items: center;

    color: white;

    overflow: hidden;

}

.hero-background {

    position: absolute;

    inset: 0;

}

.hero-background img {

    height: 100%;

    object-fit: cover;

}

.hero-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(7, 17, 29, .95),
            rgba(7, 17, 29, .78) 48%,
            rgba(7, 17, 29, .2));

}

.hero-layout {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 100px;

}

.hero-copy {

    max-width: 780px;

    padding: 110px 0;

}

.hero-kicker {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--copper-light);

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: 2.5px;

    margin-bottom: 28px;

}

.hero-kicker span {

    width: 40px;

    height: 1px;

    background: var(--copper);

}

.hero h1 {

    max-width: 850px;

    font-size: clamp(3.5rem, 7vw, 7.5rem);

    letter-spacing: -3px;

    margin-bottom: 30px;

}

.hero-copy>p {

    max-width: 640px;

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

    font-size: 1.05rem;

}

.hero-actions {

    display: flex;

    gap: 13px;

    margin-top: 35px;

}

.button {

    min-height: 52px;

    padding: 14px 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 1px solid transparent;

    font-size: .77rem;

    font-weight: 800;

    transition: var(--transition);

}

.button-gold {

    background: var(--copper);

    color: var(--navy-950);

}

.button-gold:hover {

    background: var(--copper-light);

    transform: translateY(-2px);

}

.button-ghost {

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

    color: white;

}

.button-ghost:hover {

    border-color: var(--copper);

    color: var(--copper-light);

}

.button-light {

    background: white;

    color: var(--navy-900);

}

.button-light:hover {

    background: var(--copper-light);

}

.button-dark {

    background: var(--navy-900);

    color: white;

}

.button-dark:hover {

    background: var(--navy-700);

}

.hero-disclaimer {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 24px;

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

    font-size: .67rem;

}

.hero-disclaimer i {

    color: var(--copper);

}

.vertical-text {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

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

    letter-spacing: 3px;

    font-size: .6rem;

    align-self: center;

}

.hero-bottom {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

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

    font-size: .58rem;

    letter-spacing: 2px;

}

.hero-bottom i {

    color: var(--copper);

}


/* =========================================================
   INTRO STRIP
========================================================= */

.intro-strip {

    padding: 75px 0;

    background: var(--cream);

    border-bottom: 1px solid #dedbd3;

}

.intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}

.intro-title>span {

    color: var(--copper);

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: 2px;

}

.intro-title h2 {

    max-width: 500px;

    margin-top: 15px;

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

}

.intro-title strong {

    color: var(--navy-700);

}

.intro-text {

    max-width: 600px;

}

.intro-text p {

    margin-bottom: 14px;

    color: var(--gray-700);

    font-size: .9rem;

}


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

.about-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: center;

}

.about-visual {

    min-height: 620px;

    position: relative;

}

.about-image-main {

    width: 83%;

    height: 550px;

    overflow: hidden;

}

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

    height: 100%;

    object-fit: cover;

}

.about-image-small {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 43%;

    height: 260px;

    border: 9px solid var(--ivory);

    overflow: hidden;

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

}

.about-stamp {

    position: absolute;

    left: -30px;

    bottom: 80px;

    width: 145px;

    height: 145px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: var(--copper);

    color: var(--navy-950);

    transform: rotate(-8deg);

}

.about-stamp span {

    font-size: .57rem;

    letter-spacing: 2px;

}

.about-stamp strong {

    font-family: "Libre Baskerville", serif;

    font-size: .8rem;

    margin: 3px 0;

}

.about-content h2 {

    max-width: 600px;

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

    margin-bottom: 25px;

}

.about-content p {

    color: var(--gray-700);

    font-size: .87rem;

}

.about-content.large-text {

    font-size: 1.05rem;

    margin-bottom: 17px;

}

.about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 32px;

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

}

.about-feature {

    display: flex;

    gap: 15px;

    padding: 20px 15px 20px 0;

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

}

.about-feature>span {

    color: var(--copper);

    font-size: .68rem;

    font-weight: 800;

}

.about-feature h3 {

    font-size: 1rem;

    margin-bottom: 5px;

}

.about-feature p {

    font-size: .72rem;

}


/* =========================================================
   VALUES
========================================================= */

.values {

    padding: 110px 0;

    background: var(--navy-900);

    color: white;

}

.values-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 55px;

}

.values-heading h2 {

    max-width: 600px;

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

}

.values-grid {

    display: grid;

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

}

.value-card {

    min-height: 320px;

    padding: 30px;

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

    transition: var(--transition);

}

.value-card:hover {

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

    transform: translateY(-5px);

}

.value-top {

    display: flex;

    justify-content: space-between;

    color: var(--copper);

}

.value-top span {

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: 2px;

}

.value-top i {

    font-size: 1.5rem;

}

.value-card h3 {

    margin-top: 70px;

    margin-bottom: 15px;

    font-size: 1.35rem;

}

.value-card p {

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

    font-size: .8rem;

}


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

.academics-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: center;

}

.academics-content h2 {

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

    margin-bottom: 25px;

}

.academics-content.large-text {

    font-size: 1rem;

    margin-bottom: 30px;

}

.academic-list {

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

}

.academic-list>div {

    display: flex;

    gap: 18px;

    padding: 20px 0;

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

}

.academic-icon {

    width: 45px;

    height: 45px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: var(--navy-900);

    color: var(--copper);

}

.academic-list h3 {

    font-size: 1.05rem;

    margin-bottom: 5px;

}

.academic-list p {

    color: var(--gray-600);

    font-size: .76rem;

}

.academics-image {

    position: relative;

}

.academics-image img {

    height: 600px;

    object-fit: cover;

}

.image-tag {

    position: absolute;

    bottom: 25px;

    left: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    background: rgba(7, 17, 29, .86);

    color: white;

    font-size: .6rem;

    letter-spacing: 1px;

}

.image-tag strong {

    color: var(--copper-light);

}


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

.campus {

    background: var(--cream);

}

.campus-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 50px;

}

.campus-heading h2 {

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

}

.campus-heading>p {

    max-width: 400px;

    color: var(--gray-600);

    font-size: .85rem;

}

.campus-gallery {

    display: grid;

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

    grid-template-rows: 290px 290px;

    gap: 13px;

}

.campus-card {

    position: relative;

    overflow: hidden;

}

.campus-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: 25px;

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

    color: white;

}

.campus-overlay small {

    color: var(--copper-light);

    font-size: .58rem;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.campus-overlay h3 {

    font-size: 1.25rem;

    margin: 5px 0;

}

.campus-overlay p {

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

    font-size: .7rem;

}


/* =========================================================
   RESIDENTIAL
========================================================= */

.residential {

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: var(--navy-800);

    color: white;

}

.residential-image {

    min-height: 650px;

}

.residential-image img {

    height: 100%;

    object-fit: cover;

}

.residential-content {

    align-self: center;

    padding: 90px;

}

.residential-content h2 {

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

    margin-bottom: 25px;

}

.residential-content>p {

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

    font-size: .88rem;

}

.residential-points {

    display: grid;

    gap: 15px;

    margin: 30px 0;

}

.residential-points>div {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 14px;

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

    font-size: .8rem;

}

.residential-points i {

    color: var(--copper-light);

}


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

.admission {

    background: var(--ivory);

}

.admission-heading {

    display: grid;

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

    gap: 80px;

    align-items: end;

    margin-bottom: 60px;

}

.admission-heading h2 {

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

}

.admission-heading>p {

    color: var(--gray-600);

    font-size: .85rem;

}

.admission-steps {

    display: grid;

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

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

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

}

.step {

    min-height: 270px;

    padding: 28px;

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

}

.step:last-child {

    border-right: 0;

}

.step-number {

    color: var(--copper);

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: 2px;

}

.step h3 {

    margin-top: 65px;

    margin-bottom: 12px;

    font-size: 1.05rem;

}

.step p {

    color: var(--gray-600);

    font-size: .74rem;

}

.important-box {

    max-width: 900px;

    margin: 45px auto 0;

    display: flex;

    gap: 18px;

    padding: 24px;

    background: #f8f1e7;

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

}

.important-box>i {

    color: var(--copper);

    font-size: 1.3rem;

}

.important-box strong {

    font-size: .78rem;

}

.important-box p {

    margin-top: 5px;

    color: var(--gray-600);

    font-size: .72rem;

}


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

.fees-section {

    padding: 100px 0;

    background: var(--cream);

}

.fees-layout {

    display: grid;

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

    gap: 90px;

    align-items: center;

}

.fees-intro h2 {

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

    margin-bottom: 22px;

}

.fees-intro p {

    font-size: .85rem;

    color: var(--gray-600);

}

.inline-link {

    display: inline-flex;

    gap: 10px;

    margin-top: 25px;

    color: var(--navy-800);

    font-size: .75rem;

    font-weight: 800;

}

.fees-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

}

.fee-item {

    min-height: 220px;

    padding: 30px;

    background: var(--ivory);

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

}

.fee-item i {

    color: var(--copper);

    font-size: 1.5rem;

}

.fee-item h3 {

    margin: 35px 0 10px;

    font-size: 1.2rem;

}

.fee-item p {

    color: var(--gray-600);

    font-size: .73rem;

}


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

.new- school {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    color: white;

    overflow: hidden;

}

.new- school-background {

    position: absolute;

    inset: 0;

}

.new- school-background img {

    height: 100%;

    object-fit: cover;

}

.new- school-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(7, 17, 29, .96),
            rgba(7, 17, 29, .82));

}

.new-school-layout {

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 100px;

    align-items: center;

}

.new-school-layout h2 {

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

    margin-bottom: 25px;

}

.new-school-layout>div:first-child p {

    max-width: 600px;

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

    font-size: .86rem;

    margin-bottom: 15px;

}

.new-school-layout.button {

    margin-top: 15px;

}

.new-school-facts {

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

}

.new-school-facts>div {

    display: grid;

    grid-template-columns: 45px 1fr;

    padding: 23px 0;

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

}

.new- school-facts span {

    color: var(--copper-light);

    font-size: .68rem;

    font-weight: 800;

}

.new- school-facts strong {

    font-family: "Libre Baskerville", serif;

    font-size: 1.1rem;

}

.new- school-facts p {

    grid-column: 2;

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

    font-size: .72rem;

}


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

.haryana {

    background: var(--ivory);

}

.haryana-heading {

    max-width: 800px;

    margin-bottom: 55px;

}

.haryana-heading h2 {

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

    margin-bottom: 25px;

}

.haryana-heading p {

    color: var(--gray-600);

    font-size: .87rem;

}

.haryana-grid {

    display: grid;

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

}

.haryana-grid article {

    min-height: 300px;

    position: relative;

    padding: 35px;

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

    transition: var(--transition);

}

.haryana-grid article:hover {

    background: var(--cream);

    transform: translateY(-5px);

}

.location-number {

    position: absolute;

    top: 25px;

    right: 25px;

    color: var(--copper);

    font-size: .65rem;

    font-weight: 800;

}

.haryana-grid article>i {

    color: var(--copper);

    font-size: 1.4rem;

}

.haryana-grid h3 {

    margin: 50px 0 10px;

    font-size: 1.4rem;

}

.haryana-grid p {

    color: var(--gray-600);

    font-size: .75rem;

    margin-bottom: 20px;

}

.haryana-grid a {

    color: var(--navy-800);

    font-size: .7rem;

    font-weight: 800;

}


/* =========================================================
   CAREER
========================================================= */

.career-section {

    padding: 0;

    background: var(--cream);

}

.career-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 620px;

}

.career-image {

    overflow: hidden;

}

.career-image img {

    height: 100%;

    object-fit: cover;

}

.career-content {

    align-self: center;

    padding: 80px;

}

.career-content h2 {

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

    margin-bottom: 25px;

}

.career-content>p {

    color: var(--gray-600);

    font-size: .84rem;

}

.career-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 30px 0;

}

.career-tags span {

    padding: 8px 12px;

    border: 1px solid #d6d1c7;

    color: var(--navy-800);

    font-size: .63rem;

    font-weight: 700;

}

.career-note {

    padding-top: 20px;

    border-top: 1px solid #d8d5ce;

    font-size: .72rem !important;

}


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

.faq {

    background: var(--ivory);

}

.faq-layout {

    display: grid;

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

    gap: 100px;

}

.faq-intro h2 {

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

    margin-bottom: 23px;

}

.faq-intro p {

    color: var(--gray-600);

    font-size: .83rem;

    margin-bottom: 30px;

}

.faq-list {

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

}

.faq-item {

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

}

.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 0;

    background: none;

    border: 0;

    color: var(--black);

    text-align: left;

    font-size: .82rem;

    font-weight: 700;

}

.faq-question i {

    color: var(--copper);

    transition: var(--transition);

}

.faq-answer {

    display: none;

    padding: 0 30px 23px 0;

}

.faq-answer p {

    color: var(--gray-600);

    font-size: .76rem;

}

.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(--navy-800);

    color: white;

}

.final-cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

}

.final-cta h2 {

    max-width: 700px;

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

}

.final-cta p {

    margin-top: 12px;

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

    font-size: .83rem;

}


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

.contact {

    background: var(--cream);

}

.contact-layout {

    display: grid;

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

    gap: 90px;

}

.contact-intro h2 {

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

    margin-bottom: 23px;

}

.contact-intro>p {

    color: var(--gray-600);

    font-size: .83rem;

}

.contact-details {

    display: grid;

    gap: 22px;

    margin-top: 35px;

}

.contact-details>div {

    display: flex;

    gap: 14px;

}

.contact-details>div>i {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    background: var(--navy-900);

    color: var(--copper);

}

.contact-details section {

    display: flex;

    flex-direction: column;

}

.contact-details strong {

    font-size: .73rem;

}

.contact-details span {

    color: var(--gray-600);

    font-size: .72rem;

}


/* Form */

.contact-form {

    padding: 40px;

    background: var(--ivory);

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

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}

.form-group {

    margin-bottom: 18px;

}

.form-group label {

    display: block;

    margin-bottom: 7px;

    font-size: .67rem;

    font-weight: 800;

    color: var(--gray-700);

}

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

    width: 100%;

    padding: 13px 14px;

    background: white;

    border: 1px solid #d7dad9;

    outline: none;

    color: var(--black);

    font-size: .77rem;

    transition: var(--transition);

}

.form-group textarea {

    resize: vertical;

}

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

    border-color: var(--copper);

}

.submit-button {

    width: 100%;

    border: 0;

}

.form-note {

    margin-top: 12px;

    text-align: center;

    color: var(--gray-400);

    font-size: .6rem;

}

.form-message {

    display: none;

    margin-top: 15px;

    padding: 12px;

    background: #edf6ee;

    color: #315e36;

    font-size: .7rem;

}


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

.footer {

    background: var(--navy-950);

    color: white;

}

.footer-grid {

    display: grid;

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

    gap: 60px;

    padding: 80px 0;

}

.footer-logo.brand-name strong {

    color: white;

}

.footer-logo.brand-name span {

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

}

.footer-brand>p {

    max-width: 330px;

    margin: 22px 0;

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

    font-size: .72rem;

}

.social-links {

    display: flex;

    gap: 8px;

}

.social-links a {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

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

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

    font-size: .7rem;

}

.social-links a:hover {

    border-color: var(--copper);

    color: var(--copper);

}

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 9px;

}

.footer-column h3 {

    margin-bottom: 8px;

    color: var(--copper-light);

    font-family: "DM Sans", sans-serif;

    font-size: .68rem;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}

.footer-column a {

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

    font-size: .7rem;

    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, .35);

    font-size: .62rem;

}

.footer-bottom-inner>div {

    display: flex;

    gap: 20px;

}


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

.back-top {

    position: fixed;

    right: 20px;

    bottom: 20px;

    width: 45px;

    height: 45px;

    display: grid;

    place-items: center;

    border: 0;

    background: var(--copper);

    color: var(--navy-950);

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: var(--transition);

    z-index: 999;

}

.back-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width: 1050px) {

    .navigation {

        gap: 16px;

    }

    .navigation>a {

        font-size: .7rem;

    }

    .about-layout,
    .academics-layout,
    .contact-layout {

        gap: 50px;

    }

    .values-grid {

        grid-template-columns: 1fr 1fr;

    }

    .admission-steps {

        grid-template-columns: 1fr 1fr;

    }

    .step:nth-child(2n) {

        border-right: 0;

    }

    .step:nth-child(-n + 3) {

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

    }

    .footer-grid {

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

    }

}


/* =========================================================
   RESPONSIVE — MOBILE NAV
========================================================= */

@media(max-width: 820px) {

    .mobile-menu {

        display: block;

    }

    .navigation {

        position: absolute;

        top: 82px;

        left: 0;

        right: 0;

        padding: 20px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: var(--ivory);

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

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

    }

    .navigation.open {

        display: flex;

    }

    .navigation>a {

        padding: 11px 0;

        font-size: .8rem;

    }

    .nav-button {

        text-align: center;

    }

    .hero {

        min-height: 720px;

    }

    .hero-layout {

        grid-template-columns: 1fr;

    }

    .hero-copy {

        padding: 90px 0;

    }

    .vertical-text {

        display: none;

    }

    .intro-grid,
    .about-layout,
    .academics-layout,
    .admission-heading,
    .fees-layout,
    .new-school-layout,
    .contact-layout {

        grid-template-columns: 1fr;

    }

    .intro-grid {

        gap: 35px;

    }

    .about-layout,
    .academics-layout,
    .contact-layout {

        gap: 60px;

    }

    .about-visual {

        min-height: 500px;

    }

    .about-image-main {

        height: 450px;

    }

    .values-heading {

        align-items: flex-start;

    }

    .values-grid {

        grid-template-columns: 1fr 1fr;

    }

    .campus-heading {

        align-items: flex-start;

        flex-direction: column;

    }

    .campus-gallery {

        grid-template-columns: 1fr 1fr;

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

    }

    .campus-large {

        grid-column: span 2;

        grid-row: span 1;

    }

    .residential {

        grid-template-columns: 1fr;

    }

    .residential-image {

        min-height: 450px;

    }

    .residential-content {

        padding: 70px 5%;

    }

    .admission-heading {

        gap: 25px;

    }

    .admission-steps {

        grid-template-columns: 1fr;

    }

    .step {

        border-right: 0;

        border-bottom: 1px solid var(--gray-200) !important;

        min-height: 0;

    }

    .step:last-child {

        border-bottom: 0 !important;

    }

    .new- school-layout {

        gap: 50px;

    }

    .career-layout {

        grid-template-columns: 1fr;

    }

    .career-image {

        min-height: 450px;

    }

    .career-content {

        padding: 70px 5%;

    }

    .faq-layout {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .final-cta-inner {

        align-items: flex-start;

        flex-direction: column;

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
========================================================= */

@media(max-width: 540px) {

    .container {

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

    }

    .section {

        padding: 70px 0;

    }

    .announcement-inner {

        justify-content: center;

        text-align: center;

    }

    .announcement-inner>a {

        display: none;

    }

    .hero {

        min-height: 680px;

    }

    .hero h1 {

        font-size: clamp(3rem, 15vw, 4.5rem);

        letter-spacing: -2px;

    }

    .hero-actions {

        flex-direction: column;

    }

    .hero-actions.button {

        width: 100%;

    }

    .hero-bottom {

        display: none;

    }

    .about-visual {

        min-height: 420px;

    }

    .about-image-main {

        width: 90%;

        height: 380px;

    }

    .about-image-small {

        width: 50%;

        height: 175px;

    }

    .about-stamp {

        width: 105px;

        height: 105px;

        left: -10px;

        bottom: 40px;

    }

    .about-stamp strong {

        font-size: .65rem;

    }

    .about-features {

        grid-template-columns: 1fr;

    }

    .values-grid {

        grid-template-columns: 1fr;

    }

    .value-card {

        min-height: 0;

    }

    .value-card h3 {

        margin-top: 45px;

    }

    .academics-image img {

        height: 430px;

    }

    .campus-gallery {

        display: flex;

        flex-direction: column;

    }

    .campus-card,
    .campus-large {

        height: 300px;

    }

    .residential-image {

        min-height: 350px;

    }

    .fees-grid {

        grid-template-columns: 1fr;

    }

    .fee-item {

        min-height: 0;

    }

    .haryana-grid {

        grid-template-columns: 1fr;

    }

    .haryana-grid article {

        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;

    }

}