/*=========================================================
SAINIK SCHOOL AMBIKAPUR
Modern Editorial / Forest Campus Theme
=========================================================*/

:root {

    --forest: #173D32;
    --forest-dark: #0E2B24;
    --forest-light: #285849;

    --cream: #F7F4EC;
    --ivory: #FCFBF7;

    --copper: #B87333;
    --copper-light: #D39A62;

    --gold: #C8A96B;

    --white: #FFFFFF;

    --text: #56615D;
    --heading: #18352D;

    --border: #E4E0D6;

    --shadow: 0 20px 50px rgba(23, 61, 50, .10);

    --transition: .4s ease;

    --header-height: 110px;

}


/*=========================================================
GLOBAL
=========================================================*/

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background: var(--ivory);

    color: var(--text);

    line-height: 1.8;

    overflow-x: hidden;

    padding-top: var(--header-height);

}


h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Playfair Display', serif;

    color: var(--heading);

    font-weight: 700;

}


a {

    text-decoration: none;

    transition: var(--transition);

}


img {

    max-width: 100%;

    display: block;

}


.container {

    max-width: 1240px;

}


.section-padding {

    padding: 110px 0;

}


/*=========================================================
TOPBAR
=========================================================*/

.topbar {

    background: var(--forest-dark);

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

    padding: 10px 0;

    font-size: 13px;

    width:100%;


}


.topbar-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.topbar-left {

    display: flex;

    gap: 30px;

    align-items: center;

}


.topbar-left span {

    display: flex;

    align-items: center;

    gap: 8px;

}


.topbar-left i {

    color: var(--copper-light);

}


.topbar-right {

    display: flex;

    gap: 10px;

}


.topbar-right a {

    width: 30px;

    height: 30px;

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

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

}


.topbar-right a:hover {

    background: var(--copper);

    border-color: var(--copper);

}


/*=========================================================
NAVBAR
STATIC HEADER
=========================================================*/

.site-header {

    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

}


.navbar {

    background: var(--ivory);

    padding: 17px 0;

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

    width:100%;


}


.navbar-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.navbar-brand img {

    width: 58px;

    height: 58px;

    object-fit: contain;

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}


.brand-text strong {

    font-family: 'Playfair Display', serif;

    font-size: 20px;

    color: var(--forest);

}


.brand-text span {

    color: var(--copper);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

}


.navbar-nav {

    align-items: center;

}


.nav-link {

    color: var(--forest);

    font-size: 14px;

    font-weight: 600;

    margin-left: 25px;

    padding: 8px 0 !important;

    position: relative;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background: var(--copper);

    transition: var(--transition);

}


.nav-link:hover,
.nav-link.active {

    color: var(--copper);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.btn-admission {

    margin-left: 28px;

    background: var(--forest);

    color: #fff;

    padding: 12px 24px;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 600;

}


.btn-admission:hover {

    background: var(--copper);

    color: #fff;

    transform: translateY(-2px);

}


.navbar-toggler {

    border: 1px solid var(--forest);

    padding: 7px 10px;

}


.navbar-toggler:focus {

    box-shadow: none;

}


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

.hero {

    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;

    overflow: hidden;

    /* margin-top:var(--header-height); */

    background: var(--forest-dark);

}


.hero-background {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(14, 43, 36, .96) 0%,
            rgba(14, 43, 36, .82) 42%,
            rgba(14, 43, 36, .25) 100%),

        url("/images/hero.png");

    background-size: cover;

    background-position: center;

    z-index: 0;

}


.hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -200px;

    bottom: -250px;

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

    border-radius: 50%;

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    padding: 90px 0;

}


.hero-tag {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #D8C9A7;

    font-size: 12px;

    letter-spacing: 2.5px;

    font-weight: 700;

    margin-bottom: 25px;

}


.hero-tag span {

    display: inline-block;

    width: 45px;

    height: 2px;

    background: var(--copper-light);

}


.hero h1 {

    color: #fff;

    font-size: 76px;

    line-height: 1.05;

    margin-bottom: 28px;

    letter-spacing: -1px;

}


.hero h1 em {

    color: #D39A62;

    font-style: normal;

}


.hero-content>p {

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

    font-size: 17px;

    max-width: 690px;

    margin-bottom: 35px;

}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}


.btn-primary-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: var(--copper);

    color: #fff;

    padding: 15px 28px;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 700;

    border: none;

}


.btn-primary-custom:hover {

    background: #D39A62;

    color: #fff;

    transform: translateY(-3px);

}


.btn-secondary-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 27px;

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

    color: #fff;

    border-radius: 4px;

    font-size: 14px;

    font-weight: 600;

}


.btn-secondary-custom:hover {

    background: #fff;

    color: var(--forest);

}


.hero-highlights {

    display: flex;

    gap: 45px;

    margin-top: 55px;

    padding-top: 28px;

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

}


.hero-highlights div {

    display: flex;

    flex-direction: column;

}


.hero-highlights strong {

    color: #fff;

    font-size: 15px;

}


.hero-highlights span {

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

    font-size: 12px;

}


.hero-bottom {

    position: absolute;

    bottom: 25px;

    left: 0;

    width: 100%;

    z-index: 3;

}


.scroll-indicator {

    display: flex;

    align-items: center;

    gap: 15px;

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

    font-size: 12px;

    letter-spacing: 1px;

}


.scroll-indicator i {

    color: var(--copper-light);

    animation: scrollArrow 1.8s infinite;

}


@keyframes scrollArrow {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(7px);

    }

}


/*=========================================================
SECTION LABEL
=========================================================*/

.section-label {

    color: var(--copper);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 18px;

}


.section-label::before {

    content: "";

    display: inline-block;

    width: 30px;

    height: 2px;

    background: var(--copper);

    vertical-align: middle;

    margin-right: 10px;

}


.section-label.light {

    color: var(--copper-light);

}


.section-title {

    font-size: 48px;

    line-height: 1.2;

    margin-bottom: 25px;

}


.section-title span {

    color: var(--copper);

}


.section-text {

    font-size: 16px;

    color: var(--text);

    margin-bottom: 20px;

}


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

.about-section {

    background: var(--ivory);

}


.about-visual {

    position: relative;

    padding-right: 45px;

    padding-bottom: 45px;

}


.about-main-image {

    position: relative;

    z-index: 2;

    overflow: hidden;

}


.about-main-image img {

    width: 100%;

    height: 570px;

    object-fit: cover;

    transition: .7s;

}


.about-main-image:hover img {

    transform: scale(1.04);

}


.about-visual::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    background: var(--cream);

    top: -30px;

    left: -30px;

}


.about-shape {

    position: absolute;

    width: 230px;

    height: 230px;

    right: 0;

    bottom: 0;

    background: var(--forest);

    z-index: 1;

}


.about-experience {

    position: absolute;

    right: 25px;

    bottom: 35px;

    z-index: 3;

    width: 180px;

    padding: 25px;

    background: var(--copper);

    color: #fff;

    display: flex;

    flex-direction: column;

}


.about-experience strong {

    font-family: 'Playfair Display', serif;

    font-size: 42px;

    line-height: 1;

}


.about-experience span {

    font-size: 12px;

    line-height: 1.5;

    margin-top: 8px;

}


.about-points {

    margin-top: 30px;

}


.about-point {

    display: flex;

    gap: 15px;

    margin-bottom: 20px;

}


.about-point>i {

    color: var(--copper);

    font-size: 21px;

    margin-top: 3px;

}


.about-point strong {

    color: var(--heading);

    font-size: 15px;

}


.about-point p {

    margin: 3px 0 0;

    font-size: 13px;

}


.text-link {

    color: var(--forest);

    font-weight: 700;

    font-size: 14px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

}


.text-link:hover {

    color: var(--copper);

}


.text-link i {

    transition: .3s;

}


.text-link:hover i {

    transform: translate(4px, -4px);

}

/*=========================================================
LEGACY STRIP
=========================================================*/

.legacy-strip {

    background: var(--cream);

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

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

}


.legacy-grid {

    display: grid;

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

}


.legacy-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 30px 25px;

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

}


.legacy-item:last-child {

    border-right: none;

}


.legacy-number {

    font-family: 'Playfair Display', serif;

    color: var(--copper);

    font-size: 25px;

}


.legacy-item strong {

    display: block;

    color: var(--heading);

    font-size: 14px;

}


.legacy-item p {

    margin: 3px 0 0;

    font-size: 12px;

    color: #7A817D;

}


/*=========================================================
PRINCIPAL
=========================================================*/

.principal-section {

    background: #fff;

}


.principal-portrait {

    position: relative;

    padding-right: 35px;

    padding-bottom: 35px;

}


.principal-portrait::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    background: var(--forest);

    right: 0;

    bottom: 0;

    z-index: 0;

}


.principal-portrait img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 520px;

    object-fit: cover;

}


.principal-caption {

    position: absolute;

    z-index: 2;

    left: 25px;

    bottom: 10px;

    background: #fff;

    padding: 18px 25px;

    min-width: 210px;

    box-shadow: var(--shadow);

}


.principal-caption strong {

    display: block;

    color: var(--heading);

    font-family: 'Playfair Display', serif;

}


.principal-caption span {

    display: block;

    color: var(--copper);

    font-size: 12px;

    margin-top: 3px;

}


.principal-section blockquote {

    margin: 30px 0;

    padding-left: 25px;

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

    font-family: 'Playfair Display', serif;

    font-size: 24px;

    line-height: 1.6;

    color: var(--heading);

}


.principal-signature {

    display: flex;

    flex-direction: column;

    margin-top: 30px;

}


.principal-signature span {

    font-size: 12px;

    color: #8A918D;

}


.principal-signature strong {

    color: var(--forest);

    font-family: 'Playfair Display', serif;

    font-size: 22px;

}


/*=========================================================
WHY CHOOSE US
=========================================================*/

.why-section {

    background: var(--cream);

}


.why-card {

    position: relative;

    background: #fff;

    padding: 40px 35px;

    height: 100%;

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

    transition: var(--transition);

    overflow: hidden;

}


.why-card::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: -45px;

    bottom: -45px;

    border-radius: 50%;

    background: rgba(184, 115, 51, .08);

    transition: .5s;

}


.why-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow);

    border-color: transparent;

}


.why-card:hover::after {

    transform: scale(2.2);

}


.why-card.featured {

    background: var(--forest);

}


.why-card.featured h3,

.why-card.featured p {

    color: #fff;

}


.why-card.featured p {

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

}


.why-number {

    position: absolute;

    top: 25px;

    right: 30px;

    color: var(--copper);

    font-family: 'Playfair Display', serif;

    font-size: 18px;

}


.why-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--cream);

    color: var(--copper);

    font-size: 27px;

    margin-bottom: 25px;

}


.why-card.featured .why-icon {

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

}


.why-card h3 {

    font-size: 25px;

    margin-bottom: 15px;

}


.why-card p {

    font-size: 14px;

    margin-bottom: 25px;

}


.why-card a {

    color: var(--copper);

    font-size: 13px;

    font-weight: 700;

}


.why-card a i {

    margin-left: 7px;

}


/*=========================================================
STATISTICS
=========================================================*/

.stats-section {

    position: relative;

    background:

        linear-gradient(rgba(14, 43, 36, .94),
            rgba(14, 43, 36, .94)),

        url("../images/campus.webp");

    background-size: cover;

    background-position: center;

    color: #fff;

    padding: 90px 0;

}


.stats-intro {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 55px;

}


.stats-intro h2 {

    color: #fff;

    font-size: 43px;

    max-width: 600px;

}


.stats-intro h2 span {

    color: var(--copper-light);

}


.stats-intro p {

    max-width: 420px;

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

    margin: 0;

}


.stats-grid {

    display: grid;

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

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

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

}


.stat-item {

    padding: 35px 25px;

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

}


.stat-item:last-child {

    border-right: none;

}


.stat-item i {

    display: block;

    color: var(--copper-light);

    font-size: 24px;

    margin-bottom: 15px;

}


.stat-item strong {

    display: block;

    font-family: 'Playfair Display', serif;

    font-size: 50px;

    color: #fff;

    line-height: 1;

}


.stat-item span {

    display: block;

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

    font-size: 13px;

    margin-top: 10px;

}


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

.academics-section {

    background: #fff;

}


.academic-feature {

    display: grid;

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

    min-height: 500px;

    margin-bottom: 30px;

}


.academic-image {

    overflow: hidden;

}


.academic-image img {

    width: 100%;

    height: 100%;

    min-height: 500px;

    object-fit: cover;

    transition: .7s;

}


.academic-image:hover img {

    transform: scale(1.04);

}


.academic-content {

    background: var(--forest);

    padding: 55px;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.feature-number {

    color: var(--copper-light);

    font-family: 'Playfair Display', serif;

    font-size: 18px;

    margin-bottom: 15px;

}


.academic-content h3 {

    color: #fff;

    font-size: 35px;

    margin-bottom: 20px;

}


.academic-content p {

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

    font-size: 15px;

}


.academic-content ul {

    list-style: none;

    padding: 0;

    margin: 20px 0 0;

}


.academic-content li {

    display: flex;

    gap: 12px;

    align-items: center;

    padding: 8px 0;

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

    font-size: 13px;

}


.academic-content li i {

    color: var(--copper-light);

}


.academic-services {

    display: grid;

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

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

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

}


.academic-service {

    padding: 35px;

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

}


.academic-service:last-child {

    border-right: none;

}


.service-icon {

    color: var(--copper);

    font-size: 30px;

    margin-bottom: 18px;

}


.academic-service h4 {

    font-size: 21px;

    margin-bottom: 12px;

}


.academic-service p {

    font-size: 13px;

    margin: 0;

}


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

.campus-section {

    background: var(--cream);

}


.campus-heading {

    display: grid;

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

    align-items: end;

    gap: 60px;

    margin-bottom: 50px;

}


.campus-layout {

    display: grid;

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

    grid-template-rows: 280px 280px;

    gap: 18px;

}


.campus-large {

    grid-row: span 2;

}


.campus-small,
.campus-large {

    position: relative;

    overflow: hidden;

}


.campus-large img,
.campus-small img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


.campus-large:hover img,
.campus-small: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, .78));

    color: #fff;

}


.campus-overlay span {

    color: var(--copper-light);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.campus-overlay h3 {

    color: #fff;

    margin: 5px 0 0;

    font-size: 24px;

}


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

.hostel-section {

    background: #fff;

}


.hostel-image {

    position: relative;

    padding-left: 30px;

    padding-bottom: 30px;

}


.hostel-image::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 180px;

    height: 180px;

    background: var(--copper);

    z-index: 0;

}


.hostel-image img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 540px;

    object-fit: cover;

}


.hostel-badge {

    position: absolute;

    z-index: 2;

    right: 10px;

    bottom: 10px;

    background: var(--forest);

    color: #fff;

    padding: 20px 25px;

    display: flex;

    align-items: center;

    gap: 15px;

}


.hostel-badge i {

    color: var(--copper-light);

    font-size: 28px;

}


.hostel-badge strong {

    display: block;

    color: #fff;

    font-family: 'Playfair Display', serif;

}


.hostel-badge span {

    display: block;

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

    font-size: 11px;

}


.hostel-list {

    margin-top: 30px;

}


.hostel-list div {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 0;

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

    font-size: 14px;

}


.hostel-list i {

    color: var(--copper);

    font-size: 18px;

}


/*=========================================================
SPORTS
=========================================================*/

.sports-section {

    background: var(--cream);

}


.sports-grid {

    display: grid;

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

    gap: 20px;

}


.sport-card {

    position: relative;

    height: 480px;

    overflow: hidden;

    background: var(--forest);

}


.sport-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


.sport-card:hover img {

    transform: scale(1.08);

}


.sport-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(transparent 35%,
            rgba(10, 30, 24, .92));

}


.sport-card-content {

    position: absolute;

    z-index: 2;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 30px;

    color: #fff;

}


.sport-card-content span {

    color: var(--copper-light);

    font-family: 'Playfair Display', serif;

}


.sport-card-content h3 {

    color: #fff;

    font-size: 30px;

    margin: 5px 0;

}


.sport-card-content p {

    margin: 0;

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

    font-size: 13px;

}


/*=========================================================
LEADERSHIP
=========================================================*/

.leadership-section {

    background: #fff;

}


.leadership-wrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 600px;

}


.leadership-image {

    overflow: hidden;

}


.leadership-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .7s;

}


.leadership-image:hover img {

    transform: scale(1.04);

}


.leadership-content {

    background: var(--cream);

    padding: 70px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.leadership-points {

    margin-top: 25px;

}


.leadership-points>div {

    display: flex;

    gap: 20px;

    padding: 18px 0;

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

}


.leadership-points>div>span {

    color: var(--copper);

    font-family: 'Playfair Display', serif;

    font-size: 18px;

}


.leadership-points strong {

    color: var(--heading);

    font-size: 15px;

}


.leadership-points p {

    margin: 3px 0 0;

    font-size: 13px;

}

/*=========================================================
DEFENCE SECTION
=========================================================*/

.defence-section{

    background:var(--forest);

    color:#fff;

}


.defence-image{

    position:relative;

    padding-right:35px;

    padding-bottom:35px;

}


.defence-image::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:0;

    bottom:0;

    border:2px solid var(--copper);

    z-index:0;

}


.defence-image img{

    position:relative;

    z-index:1;

    width:100%;

    height:520px;

    object-fit:cover;

}


.defence-stamp{

    position:absolute;

    z-index:2;

    left:10px;

    bottom:10px;

    background:var(--copper);

    padding:20px 25px;

    display:flex;

    align-items:center;

    gap:12px;

}


.defence-stamp i{

    font-size:27px;

}


.defence-stamp span{

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    line-height:1.5;

}


.defence-section .section-title{

    color:#fff;

}


.defence-section .section-text{

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

}


.defence-features{

    display:grid;

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

    gap:15px;

    margin:30px 0;

}


.defence-features div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:17px;

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

}


.defence-features i{

    color:var(--copper-light);

    font-size:20px;

}


.defence-features strong{

    color:#fff;

    font-size:13px;

}


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

.admission-section{

    background:var(--ivory);

}


.admission-header{

    display:grid;

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

    align-items:end;

    gap:60px;

    margin-bottom:55px;

}


.admission-timeline{

    position:relative;

}


.admission-timeline::before{

    content:"";

    position:absolute;

    left:37px;

    top:40px;

    bottom:40px;

    width:1px;

    background:var(--border);

}


.admission-step{

    position:relative;

    display:grid;

    grid-template-columns:75px 1fr;

    gap:30px;

    padding:25px 0;

}


.step-number{

    position:relative;

    z-index:2;

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--forest);

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:20px;

}


.admission-step h3{

    font-size:24px;

    margin-bottom:8px;

}


.admission-step p{

    font-size:14px;

    max-width:700px;

    margin:0;

}


.admission-note{

    display:flex;

    gap:15px;

    align-items:flex-start;

    margin-top:30px;

    padding:20px 25px;

    background:var(--cream);

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

}


.admission-note i{

    color:var(--copper);

    font-size:20px;

}


.admission-note p{

    margin:0;

    font-size:13px;

}


/*=========================================================
SEO SECTION
=========================================================*/

.seo-section{

    background:var(--cream);

}


.search-card{

    background:var(--forest);

    padding:45px;

    color:#fff;

    height:100%;

    position:relative;

    overflow:hidden;

}


.search-card::after{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

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

    border-radius:50%;

    right:-80px;

    bottom:-80px;

}


.search-card-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--copper-light);

    font-size:25px;

    margin-bottom:25px;

}


.search-card h3{

    color:#fff;

    font-size:30px;

    margin-bottom:18px;

}


.search-card p{

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

    font-size:14px;

}


.search-card .text-link{

    color:var(--copper-light);

}


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

.gallery-section{

    background:#fff;

}


.gallery-heading{

    display:grid;

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

    gap:60px;

    align-items:end;

    margin-bottom:45px;

}


.gallery-grid{

    display:grid;

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

    grid-auto-rows:240px;

    gap:15px;

}


.gallery-item{

    overflow:hidden;

    position:relative;

}


.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}


.gallery-item:hover img{

    transform:scale(1.06);

}


.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    border:0 solid rgba(255,255,255,.7);

    transition:.3s;

    pointer-events:none;

}


.gallery-item:hover::after{

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

}


.gallery-large{

    grid-column:span 2;

    grid-row:span 2;

}


.gallery-wide{

    grid-column:span 2;

}


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

.faq-section{

    background:var(--cream);

}


.accordion-item{

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

    margin-bottom:12px;

    background:#fff;

}


.accordion-button{

    padding:22px 25px;

    background:#fff;

    color:var(--heading);

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

    font-size:15px;

    font-weight:700;

}


.accordion-button:not(.collapsed){

    background:var(--forest);

    color:#fff;

    box-shadow:none;

}


.accordion-button:focus{

    box-shadow:none;

}


.accordion-body{

    padding:22px 25px;

    color:var(--text);

    font-size:14px;

    line-height:1.8;

}


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

.contact-section{

    background:var(--forest-dark);

}


.contact-wrapper{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    background:var(--forest);

}


.contact-info{

    padding:65px;

    color:#fff;

}


.contact-info h2{

    color:#fff;

    font-size:45px;

    line-height:1.2;

    margin-bottom:20px;

}


.contact-info h2 span{

    color:var(--copper-light);

}


.contact-info > p{

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

    font-size:14px;

    max-width:430px;

}


.contact-details{

    margin-top:40px;

}


.contact-details > div{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}


.contact-details i{

    color:var(--copper-light);

    font-size:20px;

}


.contact-details span{

    display:block;

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

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1px;

}


.contact-details strong{

    display:block;

    color:#fff;

    font-size:14px;

    font-weight:500;

}


.contact-form{

    background:#fff;

    padding:65px;

}


.contact-form h3{

    font-size:32px;

    margin-bottom:30px;

}


.contact-form .form-control{

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

    border-radius:0;

    padding:14px 16px;

    margin-bottom:15px;

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

    font-size:14px;

    background:#fff;

}


.contact-form .form-control:focus{

    border-color:var(--copper);

    box-shadow:none;

}


.contact-form select{

    height:51px;

}


.contact-form textarea{

    resize:none;

}


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

.footer{

    background:#0A211B;

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

    padding:75px 0 0;

}


.footer-brand{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

}


.footer-brand img{

    width:52px;

    height:52px;

    object-fit:contain;

}


.footer-brand strong{

    display:block;

    color:#fff;

    font-family:'Playfair Display',serif;

    font-size:18px;

}


.footer-brand span{

    display:block;

    color:var(--copper-light);

    font-size:12px;

}


.footer p{

    font-size:13px;

    max-width:350px;

}


.footer h4{

    color:#fff;

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

    font-size:15px;

    margin-bottom:22px;

}


.footer ul{

    list-style:none;

    padding:0;

    margin:0;

}


.footer li{

    margin-bottom:10px;

}


.footer li a{

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

    font-size:13px;

}


.footer li a:hover{

    color:var(--copper-light);

    padding-left:5px;

}


.footer-social{

    display:flex;

    gap:10px;

    margin-top:25px;

}


.footer-social a{

    width:36px;

    height:36px;

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

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

}


.footer-social a:hover{

    background:var(--copper);

    border-color:var(--copper);

}


.footer-bottom{

    margin-top:55px;

    padding:20px 0;

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

    display:flex;

    justify-content:space-between;

    gap:20px;

    font-size:11px;

}


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

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--copper);

    color:#fff;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.3s;

    z-index:999;

}


.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.back-to-top:hover{

    background:var(--forest);

    color:#fff;

}


/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:9px;

}


::-webkit-scrollbar-track{

    background:#EAE7DE;

}


::-webkit-scrollbar-thumb{

    background:var(--forest);

}


::-webkit-scrollbar-thumb:hover{

    background:var(--copper);

}


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

@media(max-width:1100px){

    .hero h1{

        font-size:62px;

    }


    .section-title{

        font-size:42px;

    }


    .nav-link{

        margin-left:15px;

    }


    .btn-admission{

        margin-left:18px;

    }


    .legacy-item{

        padding:25px 15px;

    }


    .stats-grid{

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

    }


    .stat-item:nth-child(2){

        border-right:none;

    }


    .stat-item:nth-child(-n+2){

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

    }

}


/*=========================================================
RESPONSIVE — 992px
=========================================================*/

@media(max-width:992px){

    .topbar-left{

        gap:15px;

    }


    .topbar-left span{

        font-size:11px;

    }


    .navbar-collapse{

        background:var(--ivory);

        padding:20px;

        margin-top:15px;

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

    }


    .navbar-nav{

        align-items:flex-start;

    }


    .nav-link{

        margin-left:0;

        padding:10px 0 !important;

    }


    .btn-admission{

        display:inline-block;

        margin:15px 0 0;

    }


    .hero{

        min-height:650px;

    }


    .hero h1{

        font-size:54px;

    }


    .legacy-grid{

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

    }


    .legacy-item:nth-child(2){

        border-right:none;

    }


    .legacy-item:nth-child(-n+2){

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

    }


    .academic-feature{

        grid-template-columns:1fr;

    }


    .academic-image img{

        min-height:400px;

    }


    .academic-content{

        padding:45px;

    }


    .academic-services{

        grid-template-columns:1fr;

    }


    .academic-service{

        border-right:none;

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

    }


    .academic-service:last-child{

        border-bottom:none;

    }


    .campus-heading{

        grid-template-columns:1fr;

        gap:10px;

    }


    .campus-layout{

        grid-template-columns:1fr 1fr;

        grid-template-rows:400px 250px;

    }


    .campus-large{

        grid-column:span 2;

        grid-row:auto;

    }


    .hostel-image img{

        height:450px;

    }


    .sports-grid{

        grid-template-columns:1fr 1fr;

    }


    .sport-card:last-child{

        grid-column:span 2;

    }


    .leadership-wrapper{

        grid-template-columns:1fr;

    }


    .leadership-image{

        height:500px;

    }


    .leadership-content{

        padding:55px;

    }


    .admission-header{

        grid-template-columns:1fr;

        gap:10px;

    }


    .gallery-heading{

        grid-template-columns:1fr;

        gap:10px;

    }


    .contact-wrapper{

        grid-template-columns:1fr;

    }


    .contact-info{

        padding:50px;

    }


    .contact-form{

        padding:50px;

    }

}


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

@media(max-width:768px){

    body {
        padding-top: 75px;
    }

    .section-padding{

        padding:75px 0;

    }


    .topbar{

        display:none;

    }


    .navbar{

        padding:13px 0;

    }


    .navbar-brand img{

        width:48px;

        height:48px;

    }


    .brand-text strong{

        font-size:17px;

    }


    .brand-text span{

        font-size:11px;

    }


    .hero{

        min-height:0;

    }


    .hero-background{

        background:

            linear-gradient(
                rgba(14,43,36,.9),
                rgba(14,43,36,.88)
            ),

            url("../images/hero.webp");

        background-position:center;

    }


    .hero-content{

        padding:90px 0 100px;

    }


    .hero h1{

        font-size:42px;

        letter-spacing:-.5px;

    }


    .hero-content > p{

        font-size:15px;

    }


    .hero-highlights{

        gap:20px;

        flex-wrap:wrap;

    }


    .hero-highlights div{

        min-width:120px;

    }


    .scroll-indicator{

        display:none;

    }


    .section-title{

        font-size:34px;

    }


    .section-text{

        font-size:14px;

    }


    .about-visual{

        padding-right:20px;

        padding-bottom:25px;

    }


    .about-main-image img{

        height:420px;

    }


    .about-experience{

        right:0;

        bottom:15px;

        width:155px;

        padding:20px;

    }


    .about-experience strong{

        font-size:34px;

    }


    .about-shape{

        width:140px;

        height:140px;

    }


    .principal-portrait{

        padding-right:20px;

        padding-bottom:20px;

    }


    .principal-portrait img{

        height:420px;

    }


    .principal-section blockquote{

        font-size:20px;

    }


    .stats-intro{

        display:block;

        margin-bottom:35px;

    }


    .stats-intro h2{

        font-size:35px;

    }


    .stats-intro p{

        margin-top:20px;

    }


    .stats-grid{

        grid-template-columns:1fr 1fr;

    }


    .stat-item{

        padding:25px 15px;

    }


    .stat-item strong{

        font-size:38px;

    }


    .academic-content{

        padding:35px 25px;

    }


    .academic-content h3{

        font-size:29px;

    }


    .campus-layout{

        display:grid;

        grid-template-columns:1fr;

        grid-template-rows:350px 250px 250px;

    }


    .campus-large{

        grid-column:auto;

    }


    .campus-small{

        grid-column:auto;

    }


    .hostel-image{

        padding-left:15px;

        padding-bottom:20px;

    }


    .hostel-image img{

        height:400px;

    }


    .hostel-badge{

        right:0;

    }


    .sports-grid{

        grid-template-columns:1fr;

    }


    .sport-card{

        height:400px;

    }


    .sport-card:last-child{

        grid-column:auto;

    }


    .leadership-image{

        height:400px;

    }


    .leadership-content{

        padding:45px 25px;

    }


    .defence-image{

        padding-right:20px;

        padding-bottom:25px;

    }


    .defence-image img{

        height:400px;

    }


    .defence-features{

        grid-template-columns:1fr;

    }


    .admission-step{

        grid-template-columns:55px 1fr;

        gap:20px;

    }


    .admission-timeline::before{

        left:27px;

    }


    .step-number{

        width:55px;

        height:55px;

        font-size:16px;

    }


    .gallery-grid{

        grid-template-columns:1fr 1fr;

        grid-auto-rows:190px;

    }


    .gallery-large{

        grid-column:span 2;

        grid-row:span 1;

    }


    .gallery-wide{

        grid-column:span 2;

    }


    .contact-info{

        padding:45px 25px;

    }


    .contact-info h2{

        font-size:36px;

    }


    .contact-form{

        padding:40px 25px;

    }


    .footer{

        padding-top:60px;

    }


    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


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

@media(max-width:576px){

    .hero h1{

        font-size:35px;

    }


    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }


    .btn-primary-custom,
    .btn-secondary-custom{

        width:100%;

    }


    .hero-highlights{

        display:grid;

        grid-template-columns:1fr 1fr;

    }


    .legacy-grid{

        grid-template-columns:1fr;

    }


    .legacy-item{

        border-right:none;

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

    }


    .legacy-item:last-child{

        border-bottom:none;

    }


    .stats-grid{

        grid-template-columns:1fr;

    }


    .stat-item{

        border-right:none !important;

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

    }


    .stat-item:last-child{

        border-bottom:none;

    }


    .gallery-grid{

        grid-template-columns:1fr;

        grid-auto-rows:250px;

    }


    .gallery-large,
    .gallery-wide{

        grid-column:auto;

    }


    .gallery-item{

        grid-row:auto;

    }


    .about-main-image img{

        height:350px;

    }


    .principal-portrait img{

        height:350px;

    }


    .hostel-image img{

        height:340px;

    }


    .defence-image img{

        height:340px;

    }


    .defence-stamp{

        padding:15px;

    }


    .admission-step{

        grid-template-columns:45px 1fr;

        gap:15px;

    }


    .admission-timeline::before{

        left:22px;

    }


    .step-number{

        width:45px;

        height:45px;

        font-size:14px;

    }


    .admission-step h3{

        font-size:20px;

    }


    .contact-form .btn-primary-custom{

        width:100%;

    }


    .back-to-top{

        width:43px;

        height:43px;

        right:15px;

        bottom:15px;

    }

}


/*=========================================================
ANIMATION
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.hero-tag{

    animation:fadeUp .8s ease both;

}


.hero h1{

    animation:fadeUp .9s .1s ease both;

}


.hero-content > p{

    animation:fadeUp .9s .2s ease both;

}


.hero-buttons{

    animation:fadeUp .9s .3s ease both;

}


.hero-highlights{

    animation:fadeUp .9s .4s ease both;

}


/*=========================================================
GENERAL MOBILE SAFETY
=========================================================*/

html,
body{

    max-width:100%;

    overflow-x:hidden;

}


@media(max-width:400px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }


    .section-title{

        font-size:30px;

    }


    .hero h1{

        font-size:31px;

    }


    .hero-highlights{

        grid-template-columns:1fr;

    }


    .about-experience{

        right:-5px;

    }

}