/* ============================================
   JANANI PU COLLEGE - MAIN STYLESHEET
   This single CSS file controls the appearance
   of every page on the website. It uses CSS
   custom properties (variables) so colors and
   fonts can be updated in one place.
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES / DESIGN TOKENS
   These variables define the brand colors, fonts,
   spacing and other reusable design values used
   throughout the entire website.
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #8fa083;
    --color-dark-green: #3f5344;
    --color-orange: #dc7633;
    --color-gold: #c9a15c;
    --color-cream: #f5efe3;
    --color-brown: #6c3227;
    --color-black: #000000;
    --color-white: #ffffff;

    /* Derived / Utility Colors */
    --color-dark-green-light: #4d6455;
    --color-primary-light: #a8b89c;
    --color-cream-dark: #ebe3d2;
    --color-text: #2a2a2a;
    --color-text-light: #5a5a5a;
    --color-border: #e0d9c8;
    --color-overlay: rgba(63, 83, 68, 0.85);
    --color-shadow: rgba(63, 83, 68, 0.12);
    --color-shadow-strong: rgba(63, 83, 68, 0.25);

    /* Fonts */
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Spacing - 8px base system */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Layout */
    --container-max: 1280px;
    --container-wide: 1400px;
    --header-height: 80px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 1px 3px var(--color-shadow);
    --shadow-md: 0 4px 12px var(--color-shadow);
    --shadow-lg: 0 8px 30px var(--color-shadow);
    --shadow-xl: 0 20px 60px var(--color-shadow-strong);
}

/* ============================================
   RESET & BASE STYLES
   These rules normalize browser defaults and
   set up the base typography for the whole site.
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-dark-green);
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 3vw, 2rem); }
h4 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: var(--space-sm);
}

a {
    color: var(--color-dark-green);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-orange);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style-position: inside;
    margin-bottom: var(--space-sm);
}

li {
    margin-bottom: 0.35rem;
}

/* ============================================
   ACCESSIBILITY - SKIP LINK & FOCUS STATES
   The skip link lets keyboard users jump directly
   to the main content, skipping the navigation.
   ============================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-dark-green);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    z-index: 9999;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    color: var(--color-white);
}

:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 2px;
}

/* ============================================
   LAYOUT UTILITIES
   Reusable container, section and grid classes
   used to structure page content consistently.
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.container--narrow {
    max-width: 900px;
}

.container--wide {
    max-width: var(--container-wide);
}

.section {
    padding: var(--space-3xl) 0;
}

.section--sm {
    padding: var(--space-2xl) 0;
}

.section--cream {
    background-color: var(--color-cream);
}

.section--green {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.section--green h1,
.section--green h2,
.section--green h3,
.section--green h4 {
    color: var(--color-white);
}

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

.section--primary h1,
.section--primary h2,
.section--primary h3 {
    color: var(--color-white);
}

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
}

.section-header h2 {
    margin-bottom: var(--space-sm);
}

.section-header p {
    color: var(--color-text-light);
    font-size: 1.1rem;
}

.section--green .section-header p,
.section--primary .section-header p {
    color: rgba(255, 255, 255, 0.85);
}

.section--green .section-header p,
.section--primary .section-header p {
    color: rgba(255, 255, 255, 0.85);
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin-bottom: var(--space-sm);
}

.section--green .eyebrow,
.section--primary .eyebrow {
    color: var(--color-gold);
}

/* ============================================
   GRID SYSTEM
   Simple responsive grid utility classes.
   ============================================ */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ============================================
   BUTTONS
   Reusable button styles for calls to action
   throughout the website.
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.85rem 1.75rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    min-height: 48px;
    line-height: 1;
}

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

.btn--primary:hover {
    background-color: #c2682d;
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-dark-green);
    border-color: var(--color-dark-green);
}

.btn--secondary:hover {
    background-color: var(--color-dark-green);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn--light {
    background-color: var(--color-white);
    color: var(--color-dark-green);
}

.btn--light:hover {
    background-color: var(--color-cream);
    color: var(--color-dark-green);
    transform: translateY(-2px);
}

.btn--gold {
    background-color: var(--color-gold);
    color: var(--color-dark-green);
}

.btn--gold:hover {
    background-color: #b8904a;
    color: var(--color-dark-green);
    transform: translateY(-2px);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-dark-green);
    border-color: var(--color-white);
}

.btn--lg {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
}

.btn--block {
    width: 100%;
}

.btn-group {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ============================================
   ANNOUNCEMENT BAR
   A thin bar at the very top of the page for
   important announcements like admission notices.
   ============================================ */
.announcement-bar {
    background-color: var(--color-dark-green);
    color: var(--color-white);
    font-size: 0.85rem;
    padding: 0.5rem 0;
    text-align: center;
    position: relative;
}

.announcement-bar a {
    color: var(--color-gold);
    font-weight: 600;
}

.announcement-bar__close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.announcement-bar__close:hover {
    color: var(--color-gold);
}

/* ============================================
   HEADER / NAVIGATION
   The main site header with logo, navigation menu,
   dropdown menus, admission CTA button and mobile
   hamburger menu toggle.
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.header--scrolled {
    box-shadow: var(--shadow-md);
}

.header__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-md);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}

.header__logo-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.header__logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header__logo-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-dark-green);
}

.header__logo-sub {
    font-size: 0.72rem;
    color: var(--color-text-light);
    letter-spacing: 0.05em;
}

/* Desktop Navigation */
.nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark-green);
    text-decoration: none;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.nav__link:hover,
.nav__link.active {
    color: var(--color-orange);
}

.nav__link.active {
    font-weight: 700;
}

.nav__dropdown-icon {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.nav__item:hover .nav__dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
    list-style: none;
    margin: 0;
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown li {
    margin: 0;
}

.nav__dropdown a {
    display: block;
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.nav__dropdown a:hover {
    background-color: var(--color-cream);
    color: var(--color-orange);
}

.nav__dropdown-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    padding: 0.6rem 0.85rem 0.3rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

/* Mobile Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--color-dark-green);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.hamburger--open span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.hamburger--open span:nth-child(2) {
    opacity: 0;
}
.hamburger--open span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* ============================================
   MOBILE NAVIGATION PANEL
   The slide-in navigation panel that appears on
   phones and tablets when the hamburger is tapped.
   ============================================ */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    background: var(--color-white);
    box-shadow: -4px 0 30px var(--color-shadow-strong);
    z-index: 1000;
    overflow-y: auto;
    transition: right var(--transition-base);
    padding: var(--space-lg) var(--space-md);
}

.mobile-nav--open {
    right: 0;
}

.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-dark-green);
    cursor: pointer;
    padding: 0.25rem;
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav__link {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark-green);
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link:hover {
    color: var(--color-orange);
}

.mobile-nav__sub {
    list-style: none;
    padding: 0 0 0.5rem 1rem;
    margin: 0;
}

.mobile-nav__sub li a {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-light);
    border-bottom: none;
}

.mobile-nav__sub-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    padding: 0.75rem 0 0.25rem 1rem;
}

.mobile-nav__toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--color-dark-green);
    cursor: pointer;
    float: right;
    padding: 0.5rem;
    transition: transform var(--transition-fast);
}

.mobile-nav__toggle--open {
    transform: rotate(180deg);
}

.mobile-nav__cta {
    margin-top: var(--space-lg);
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-overlay--visible {
    display: block;
}

/* ============================================
   HERO SECTION
   The large, visually impressive area at the top
   of the homepage with the main headline, subtext
   and call-to-action buttons.
   ============================================ */
.hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--color-dark-green) 0%, #2d3d33 60%, var(--color-brown) 100%);
    color: var(--color-white);
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(143, 160, 131, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(201, 161, 92, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: var(--space-3xl) 0;
}

.hero__eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.hero__title {
    color: var(--color-white);
    margin-bottom: var(--space-md);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 1.1;
}

.hero__title em {
    color: var(--color-gold);
    font-style: italic;
}

.hero__subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-lg);
    max-width: 560px;
    line-height: 1.7;
}

.hero__buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Hero decorative side panel */
.hero__visual {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hero__visual-card {
    width: 80%;
    max-width: 420px;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(143, 160, 131, 0.3), rgba(201, 161, 92, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl);
    backdrop-filter: blur(4px);
}

.hero__visual-card-icon {
    font-size: 3.5rem;
    margin-bottom: var(--space-md);
    color: var(--color-gold);
}

.hero__visual-card-text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    line-height: 1.4;
}

/* ============================================
   PAGE HERO (INTERIOR PAGES)
   A smaller hero banner used at the top of
   interior pages like About, Courses, etc.
   ============================================ */
.page-hero {
    background: linear-gradient(135deg, var(--color-dark-green) 0%, #2d3d33 100%);
    color: var(--color-white);
    padding: var(--space-2xl) 0 var(--space-xl);
    position: relative;
}

.page-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(201, 161, 92, 0.1) 0%, transparent 60%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.page-hero h1 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.page-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    max-width: 600px;
}

/* ============================================
   BREADCRUMBS
   Navigation trail showing the user's location
   within the website hierarchy.
   ============================================ */
.breadcrumbs {
    background: var(--color-cream);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
}

.breadcrumbs li {
    margin: 0;
}

.breadcrumbs a {
    color: var(--color-text-light);
    font-weight: 500;
}

.breadcrumbs a:hover {
    color: var(--color-orange);
}

.breadcrumbs span {
    color: var(--color-text-light);
}

.breadcrumbs li:last-child {
    color: var(--color-dark-green);
    font-weight: 600;
}

/* ============================================
   QUICK INFO BAR
   A strip below the hero showing key information
   at a glance: streams, coaching, board affiliation.
   ============================================ */
.quick-info {
    background: var(--color-dark-green);
    color: var(--color-white);
    padding: var(--space-md) 0;
}

.quick-info__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--space-md);
    text-align: center;
}

.quick-info__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.quick-info__item-icon {
    color: var(--color-gold);
    font-size: 1.1rem;
}

/* ============================================
   CARDS
   Reusable card component used for courses,
   features, faculty, facilities and more.
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 1px solid var(--color-border);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card--green {
    background: var(--color-dark-green);
    color: var(--color-white);
    border-color: var(--color-dark-green-light);
}

.card--green h3,
.card--green h4 {
    color: var(--color-white);
}

.card--cream {
    background: var(--color-cream);
}

.card__body {
    padding: var(--space-lg);
}

.card__body--sm {
    padding: var(--space-md);
}

.card__image {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 3rem;
}

.card__title {
    margin-bottom: var(--space-xs);
}

.card__text {
    color: var(--color-text-light);
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
}

.card--green .card__text {
    color: rgba(255, 255, 255, 0.8);
}

.card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    background: var(--color-cream);
    color: var(--color-dark-green);
    margin-bottom: var(--space-sm);
}

.card--green .card__tag {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-gold);
}

/* ============================================
   FEATURE LIST / CHECKLIST
   A styled list with checkmark icons used in
   "Why Janani" and similar sections.
   ============================================ */
.feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-md);
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0;
}

.feature-list__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
    font-size: 1.2rem;
}

.feature-list__content h4 {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.feature-list__content p {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   STATS / INFO CARDS
   Small cards used for displaying key information
   items like course combinations or coaching areas.
   ============================================ */
.info-card {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.info-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.info-card__icon {
    font-size: 2rem;
    color: var(--color-orange);
    margin-bottom: var(--space-sm);
}

.info-card__title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-dark-green);
    margin-bottom: 0.25rem;
}

.info-card__text {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   COURSE CARDS
   Specific card style for displaying PU course
   combinations with subjects and CTAs.
   ============================================ */
.course-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.course-card__header {
    padding: var(--space-md) var(--space-lg);
    color: var(--color-white);
}

.course-card--science .course-card__header {
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-primary));
}

.course-card--commerce .course-card__header {
    background: linear-gradient(135deg, var(--color-brown), var(--color-orange));
}

.course-card__code {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.course-card__fullform {
    font-size: 0.85rem;
    opacity: 0.9;
}

.course-card__body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-card__subjects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-md);
}

.course-card__subject {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    background: var(--color-cream);
    border-radius: 100px;
    color: var(--color-dark-green);
    font-weight: 600;
}

.course-card__pathway {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    flex: 1;
}

.course-card__pathway strong {
    color: var(--color-dark-green);
}

.course-card__buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================
   COMPARISON TABLE
   A responsive table for comparing course options.
   On mobile, it becomes horizontally scrollable.
   ============================================ */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    min-width: 640px;
}

.comparison-table th {
    background: var(--color-dark-green);
    color: var(--color-white);
    padding: var(--space-md);
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
}

.comparison-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.comparison-table tr:hover td {
    background: var(--color-cream);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table .table-stream {
    font-weight: 700;
    color: var(--color-dark-green);
}

/* ============================================
   FACULTY / MANAGEMENT CARDS
   Cards for displaying people with photo
   placeholders, names, roles and messages.
   ============================================ */
.person-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    text-align: center;
}

.person-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.person-card__photo {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f1f1f1;
}

.person-card__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.person-card:hover .person-card__photo img {
    transform: scale(1.03);
}
.person-card__name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-dark-green);
    margin-bottom: 0.25rem;
}

.person-card__role {
    font-size: 0.85rem;
    color: var(--color-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.person-card__detail {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
}

.person-card__detail strong {
    color: var(--color-dark-green);
}

.person-card__message {
    font-size: 0.9rem;
    color: var(--color-text-light);
    font-style: italic;
    line-height: 1.6;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
    text-align: left;
}

/* Management page larger profile */
.profile-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

.profile-card__photo {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 5rem;
}

.profile-card__body {
    padding: var(--space-xl);
}

.profile-card__name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-dark-green);
    margin-bottom: 0.25rem;
}

.profile-card__role {
    font-size: 0.9rem;
    color: var(--color-orange);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.profile-card__message {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.7;
    font-style: italic;
}

/* ============================================
   PLACEHOLDER NOTICE
   A styled notice box for placeholder content
   that the college owner needs to update later.
   ============================================ */
.placeholder-notice {
    background: var(--color-cream);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    color: var(--color-text-light);
}

.placeholder-notice strong {
    color: var(--color-dark-green);
    display: block;
    margin-bottom: 0.25rem;
}

/* ============================================
   IMAGE PLACEHOLDER
   A CSS-based placeholder for images that the
   college owner can replace with real photos.
   ============================================ */
.img-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark-green));
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    padding: var(--space-md);
}

.img-placeholder--square {
    aspect-ratio: 1;
}

.img-placeholder--tall {
    aspect-ratio: 3/4;
}

.img-placeholder__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-xs);
}

.img-placeholder__text {
    font-size: 0.8rem;
    font-weight: 500;
}

/* ============================================
   GALLERY
   Grid of filterable image cards with a
   lightbox modal for viewing full images.
   ============================================ */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.gallery-filter {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-light);
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gallery-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-dark-green);
}

.gallery-filter--active {
    background: var(--color-dark-green);
    border-color: var(--color-dark-green);
    color: var(--color-white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark-green));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item__placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: var(--space-md);
}

.gallery-item__placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-xs);
}

.gallery-item__placeholder-text {
    font-size: 0.85rem;
    font-weight: 500;
}

.gallery-item__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item--hidden {
    display: none;
}

/* ============================================
   LIGHTBOX MODAL
   Full-screen overlay for viewing gallery images
   with previous/next navigation and keyboard support.
   ============================================ */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.lightbox--open {
    display: flex;
}

.lightbox__content {
    max-width: 80%;
    max-height: 75vh;
    background: linear-gradient(135deg, var(--color-primary), var(--color-dark-green));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    padding: var(--space-2xl);
    text-align: center;
    aspect-ratio: 4/3;
    width: auto;
    min-width: 300px;
}

.lightbox__caption {
    color: var(--color-white);
    font-size: 0.95rem;
    margin-top: var(--space-md);
    text-align: center;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    z-index: 2001;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox__close {
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }

/* ============================================
   FAQ ACCORDION
   Collapsible FAQ items that expand/collapse
   when clicked, with smooth animation.
   ============================================ */
.faq {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    overflow: hidden;
    background: var(--color-white);
}

.faq-item__question {
    width: 100%;
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark-green);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    transition: background var(--transition-fast);
}

.faq-item__question:hover {
    background: var(--color-cream);
}

.faq-item__icon {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: var(--color-orange);
    transition: transform var(--transition-base);
    line-height: 1;
}

.faq-item--open .faq-item__icon {
    transform: rotate(45deg);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.faq-item--open .faq-item__answer {
    max-height: 500px;
}

.faq-item__answer-inner {
    padding: 0 var(--space-lg) var(--space-md);
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================
   FORMS
   Styles for admission enquiry and contact forms
   with proper labels, inputs and validation states.
   ============================================ */
.form {
    max-width: 680px;
}

.form__group {
    margin-bottom: var(--space-md);
}

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form__label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-dark-green);
    margin-bottom: 0.35rem;
}

.form__label .required {
    color: var(--color-orange);
}

.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
    min-height: 48px;
}

.form__textarea {
    min-height: 120px;
    resize: vertical;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form__input--error,
.form__select--error,
.form__textarea--error {
    border-color: #d93025;
}

.form__error {
    display: none;
    font-size: 0.82rem;
    color: #d93025;
    margin-top: 0.3rem;
}

.form__error--visible {
    display: block;
}

.form__hint {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-top: 0.3rem;
}

.form__success {
    display: none;
    padding: var(--space-md);
    background: #e6f4ea;
    border: 1px solid #34a853;
    border-radius: var(--radius-sm);
    color: #1e6e32;
    font-size: 0.9rem;
    margin-bottom: var(--space-md);
}

.form__success--visible {
    display: block;
}

.form__actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.form__note {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-cream);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}

/* ============================================
   CONTACT CARDS
   Cards for displaying contact information like
   phone, email, address with icons.
   ============================================ */
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.contact-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.contact-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
    font-size: 1.3rem;
}

.contact-card__body h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.contact-card__body p,
.contact-card__body a {
    font-size: 0.9rem;
    color: var(--color-text-light);
    display: block;
    margin-bottom: 0.15rem;
}

.contact-card__body a:hover {
    color: var(--color-orange);
}

/* ============================================
   CTA SECTION
   A prominent call-to-action section used to
   encourage admissions or contact.
   ============================================ */
.cta-section {
    background: linear-gradient(135deg, var(--color-dark-green) 0%, var(--color-brown) 100%);
    color: var(--color-white);
    padding: var(--space-3xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(201, 161, 92, 0.1) 0%, transparent 60%);
}

.cta-section__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}

.cta-section h2 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.cta-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    margin-bottom: var(--space-lg);
}

.cta-section .btn-group {
    justify-content: center;
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   A fixed button on every page that opens
   WhatsApp with a pre-filled enquiry message.
   ============================================ */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    transition: transform var(--transition-base);
    animation: whatsapp-pulse 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: var(--color-white);
}

@keyframes whatsapp-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7); }
}

/* ============================================
   BACK TO TOP BUTTON
   A fixed button that appears after scrolling
   and takes the user back to the top of the page.
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    background: var(--color-dark-green);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-orange);
}

/* ============================================
   FOOTER
   The common footer at the bottom of every page
   with college info, quick links, legal links
   and social media.
   ============================================ */
.footer {
    background: #2a3a30;
    color: rgba(255, 255, 255, 0.75);
    padding: var(--space-2xl) 0 var(--space-md);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.footer__col h4 {
    color: var(--color-white);
    font-size: 1rem;
    margin-bottom: var(--space-md);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
}

.footer__brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.footer__brand-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-white);
    line-height: 1.3;
}

.footer__brand-sub {
    font-size: 0.75rem;
    color: var(--color-gold);
}

.footer__address {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: var(--space-sm);
}

.footer__address a {
    color: rgba(255, 255, 255, 0.75);
}

.footer__address a:hover {
    color: var(--color-gold);
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: 0.5rem;
}

.footer__links a {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--color-gold);
    padding-left: 4px;
}

.footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-sm);
}

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

.footer__social a:hover {
    background: var(--color-orange);
    transform: translateY(-2px);
}

.footer__social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.82rem;
}

.footer__bottom p {
    margin: 0;
}

.footer__bottom a {
    color: var(--color-gold);
}

.footer__sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

/* ============================================
   SUBJECT PAGE LAYOUT
   Specific layout for individual subject pages
   with subject hero, info sections and related combos.
   ============================================ */
.subject-hero {
    background: linear-gradient(135deg, var(--color-dark-green) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    padding: var(--space-2xl) 0;
}

.subject-hero__content {
    max-width: 760px;
}

.subject-hero__icon {
    font-size: 3rem;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.subject-hero h1 {
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.subject-hero p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
}

.subject-section {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.subject-section:last-of-type {
    border-bottom: none;
}

.subject-section h2 {
    margin-bottom: var(--space-md);
}

.combination-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.combination-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-dark-green);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.combination-tag:hover {
    background: var(--color-dark-green);
    color: var(--color-white);
    border-color: var(--color-dark-green);
}

/* ============================================
   CONTENT BLOCKS
   Reusable content block styles for prose
   sections, lists and two-column layouts.
   ============================================ */
.content-block {
    max-width: 760px;
    margin: 0 auto;
}

.content-block h2 {
    margin-bottom: var(--space-md);
}

.content-block h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.content-block p {
    margin-bottom: var(--space-md);
    line-height: 1.8;
}

.content-block ul,
.content-block ol {
    margin-bottom: var(--space-md);
    padding-left: 1.5rem;
}

.content-block li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

/* ============================================
   VALUE CARDS
   Cards for displaying core values with icons.
   ============================================ */
.value-card {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.value-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md);
}

.value-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

.value-card h4 {
    margin-bottom: var(--space-xs);
}

.value-card p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin: 0;
}

/* ============================================
   COACHING CARDS
   Cards for competitive exam coaching areas.
   ============================================ */
.coaching-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.coaching-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.coaching-card__header {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--color-dark-green), var(--color-primary));
    color: var(--color-white);
}

.coaching-card__badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.15rem;
}

.coaching-card__title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-white);
    margin: 0;
}

.coaching-card__body {
    padding: var(--space-lg);
}

.coaching-card__focus {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.coaching-card__detail {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 0.3rem;
}

.coaching-card__detail strong {
    color: var(--color-dark-green);
}

/* ============================================
   FACILITY CARDS
   Cards for displaying campus facilities.
   ============================================ */
.facility-card {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
}

.facility-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.facility-card__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-orange);
}

.facility-card__body h4 {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.facility-card__body p {
    font-size: 0.88rem;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   DIVIDER / SEPARATOR
   A decorative gold line separator.
   ============================================ */
.divider {
    width: 60px;
    height: 3px;
    background: var(--color-gold);
    border-radius: 2px;
    margin: var(--space-sm) 0;
}

.divider--center {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   404 PAGE
   Styles for the custom 404 error page.
   ============================================ */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--color-cream);
}

.error-page__content {
    max-width: 500px;
    padding: var(--space-2xl) var(--space-md);
}

.error-page__code {
    font-family: var(--font-heading);
    font-size: clamp(5rem, 15vw, 10rem);
    color: var(--color-dark-green);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.error-page__code em {
    color: var(--color-orange);
    font-style: normal;
}

.error-page__title {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.error-page__text {
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

/* ============================================
   MAP SECTION
   A placeholder for the Google Maps embed.
   ============================================ */
.map-section {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    text-align: center;
    padding: var(--space-xl);
}

.map-section__icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

/* ============================================
   GROUP INSTITUTIONS
   Section listing other Janani Group institutions.
   ============================================ */
.group-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-sm);
}

.group-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--color-dark-green);
    margin: 0;
}

.group-list li::before {
    content: "•";
    color: var(--color-gold);
    font-size: 1.5rem;
    line-height: 1;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   Elements with the .reveal class fade in and
   slide up when they enter the viewport.
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* ============================================
   REDUCED MOTION
   Respect users who prefer reduced motion by
   disabling animations and transitions.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .whatsapp-float {
        animation: none;
    }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   Media queries that adjust the layout for tablets
   and mobile phones. Navigation transforms into
   a hamburger menu on smaller screens.
   ============================================ */

/* Large desktop down to tablet landscape */
@media (max-width: 1280px) {
    .nav__link {
        padding: 0.6rem 0.7rem;
        font-size: 0.85rem;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --space-3xl: 4rem;
        --space-2xl: 3rem;
    }

    .nav,
    .header__cta-desktop {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .hero__visual {
        display: none;
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-col {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .profile-card {
        grid-template-columns: 220px 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --space-3xl: 3rem;
        --space-2xl: 2.5rem;
        --space-xl: 2rem;
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--auto {
        grid-template-columns: 1fr;
    }

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

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .hero {
        min-height: 500px;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__buttons .btn {
        width: 100%;
    }

    .quick-info__grid {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .profile-card {
        grid-template-columns: 1fr;
    }

    .profile-card__photo {
        max-width: 200px;
        margin: var(--space-lg) auto 0;
        border-radius: var(--radius-lg);
    }

    .profile-card__body {
        padding: var(--space-lg);
    }

    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-group .btn {
        width: 100%;
    }

    .whatsapp-float {
        bottom: 1rem;
        right: 1rem;
    }

    .back-to-top {
        bottom: 1rem;
        left: 1rem;
    }

    .lightbox__prev { left: 0.5rem; }
    .lightbox__next { right: 0.5rem; }
    .lightbox__close { top: 1rem; right: 1rem; }
}

/* Small mobile */
@media (max-width: 480px) {
    .header__logo-sub {
        display: none;
    }

    .header__logo-name {
        font-size: 1rem;
    }

    .header__logo-img {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

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

    .section-header {
        margin-bottom: var(--space-lg);
    }
}