/*
Theme Name: SIET Nursery
Theme URI: https://example.com/siet-nursery
Author: Antigravity
Author URI: https://example.com
Description: A custom WordPress theme for SIET Nursery based on SVG designs.
Version: 1.0.0
Text Domain: siet-nursery
*/

:root {
    /* Color Palette */
    --primary-color: #FF6B6B;
    --secondary-color: #4ECDC4;
    --accent-color: #FFE66D;
    --text-color: #333333;
    --text-light: #777777;
    --bg-color: #ffffff;
    --bg-light: #f9f9f9;
    --white: #ffffff;
    --black: #000000;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --container-width: 1200px;

    /* Typography */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --line-height-body: 1.6;
    --line-height-heading: 1.2;
    --radius-sm: 5px;
    --radius-md: 10px;
}

/* Reset / Base */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-sm);
    color: var(--black);
    margin-top: 0;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #84aad6;
}


.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 0rem;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

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

.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%);
    /* NOTE: vanilla CSS doesn't support darken, but illustrating intent. Use hardcoded or opacity */
    opacity: 0.9;
    color: var(--white);
}


/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ------------------------------------------------------------------------- *
 *  Header
 * ------------------------------------------------------------------------- */

/* Top Bar */
.top-bar {
    background-color: var(--secondary-color);
    color: var(--white);
    padding: var(--spacing-xs) 0;
    font-size: 0.9rem;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.top-bar a {
    color: var(--white);
    margin-right: var(--spacing-sm);
}

.top-bar a:hover {
    color: var(--accent-color);
}

/* Site Header */
.site-header {
    background-color: var(--white);
    padding: var(--spacing-sm) 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.site-header-inner {
    display: flex;
    justify-content: space-between;
    /* Keeps logo left, nav right */
    align-items: center;
    flex-wrap: wrap;
}


/* Ensure branding stays left and nav goes right if space permits */
.site-branding {
    margin-right: auto;
    
}

.main-navigation {
    margin-left: auto;
}

.site-branding .site-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
}

.site-branding .site-title a {
    color: var(--primary-color);
}

.site-branding img {
    max-height: 120px;
    width: auto;
    display: block;
}


.site-description {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Navigation */
/* Navigation */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    /* Center items vertically */
    gap: 5px;
    /* Gap between list items */
}

.main-navigation li {
    margin: 0;
    /* Remove old margin */
    display: flex;
    align-items: center;
}

.main-navigation a {
    color: var(--text-color);
    font-weight: 500;
    font-size: 19.99px;
    padding: 0 10px;
    position: relative;
    /* Add padding to links */
}

/* Base style for the underline pseudo-element */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    /* Appears slightly below the text */
    left: 10px;
    /* Accounts for left padding */
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* Color and underline expansion on hover and active */
.main-navigation a:hover,
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a {
    color: #84aad6;
    /* Matching user's previous custom color */
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item>a::after,
.main-navigation .current_page_item>a::after {
    width: calc(100% - 20px);
    background-color: #84aad6;
}

.main-navigation li:not(:last-child)::after {
    content: "|";
    color: var(--text-color);
    opacity: 0.5;
    font-size: 0.9em;
}

.menu-toggle {
    display: none;
    /* Hidden on desktop */
}





/* ============================= */
/* Mobile Menu */
/* ============================= */

@media (max-width: 768px) {

    /* Show hamburger button */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 26px;
        cursor: pointer;
    }

    /* Mobile Menu Container */
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--white);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        margin-top: 0;
    }

    /* Remove separator line in mobile */
    .main-navigation li:not(:last-child)::after {
        content: "";
    }

    /* Stack menu items */
    .main-navigation li {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        justify-content: flex-start;
    }

    .main-navigation a {
        display: block;
        width: 100%;
        padding: 10px 15px;
    }

    /* Show menu when active */
    .main-navigation.toggled ul {
        display: flex;
    }
}

/* ------------------------------------------------------------------------- *
 *  Front Page / Hero
 * ------------------------------------------------------------------------- */

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

.hero-section {
    background: #84aad6;
    position: relative;
    overflow: hidden;
}

/* DESKTOP LAYOUT */

.hero-inner {
    display: flex;
    align-items: flex-end;
    min-height: 500px;
}

/* LEFT CONTENT */

.hero-text {
    width: 50%;
    color: #fff;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
    /* keeps text above image */
}

.hero-small {
    font-size: 26.66px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.hero-title {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.hero-description {
    font-size: 20px;
    margin-bottom: 35px;
    line-height: 1.6;
    font-family: 'DM Sans', sans-serif;
}

.hero-btn {
    display: inline-block;
    padding: 16px 35px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    font-family: 'DM Sans', sans-serif;
}

/* RIGHT IMAGE */

.hero-image {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.hero-image img {
    height: 450px;
    /* adjust size here */
    width: auto;
    display: block;
    border-radius: 10px;
}

/* =========================
   RESPONSIVE FIX
========================= */

@media (max-width: 1024px) {

    .hero-title {
        font-size: 48px;
    }

    .hero-image img {
        height: 400px;
    }
}

@media (max-width: 768px) {

    .hero-section {
        padding: 60px 20px 0 20px;
        position: relative;
        overflow: hidden;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .hero-text {
        width: 100%;
        padding-bottom: 0;
        /* remove extra space */
        margin-bottom: 30px;
        z-index: 2;
    }

    .hero-image {
        position: relative;
        /* NOT absolute */
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .hero-image img {
        width: 85%;
        max-width: 420px;
        border-radius: 10px;
        height: auto;
        display: block;
        margin: 0 auto;
    }

}



/* MISSION SECTION */

/* =========================
   MISSION SECTION
   Mobile First
========================= */

.mission-vision-section {
    background: #ffffff;
    padding: 80px 20px 0 20px;
    position: relative;
    overflow: hidden;
}

/* MOBILE DEFAULT */

.mission-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* IMAGE */

.mission-image {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.mission-image img {
    width: 85%;
    max-width: 320px;
    height: auto;
    display: block;
}

/* CONTENT */

.mission-content {
    width: 100%;
}

.mission-content h2 {
    color: #84aad6;
    font-size: 39.99px;
    margin-bottom: 15px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.mission-content p {
    font-size: 24px;
    line-height: 1.7;
    margin-bottom: 30px;
}


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

@media (min-width: 768px) {

    .mission-content h2 {
        font-size: 32px;
    }

    .mission-content p {
        font-size: 17px;
    }

    .mission-image img {
        max-width: 400px;
    }
}


/* =========================
   DESKTOP
========================= */

@media (min-width: 1024px) {

    .mission-vision-section {
        padding: 120px 0 0 0;
    }

    .mission-inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        text-align: left;
        min-height: 500px;
    }

    .mission-image {
        width: 45%;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .mission-image img {
        height: 600px;
        /* control size here */
        width: auto;
        max-width: none;
    }

    .mission-content {
        width: 50%;
        padding-bottom: 80px;
    }

    .mission-content h2 {
        font-size: 39.99px;
        font-family: 'Avenir Next Thai Modern', sans-serif;
    }

    .mission-content p {
        font-size: 24px;
        font-family: 'DM Sans', sans-serif;
    }
}

/* =========================
   PROGRAMME SECTION
========================= */

.programme-section {
    padding: 80px 20px;
    background: #ffffff;
    text-align: center;
}

.section-title {
    font-size: 53.32px;
    margin-bottom: 40px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.programme-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile = 1 column */
    gap: 30px;
}

.programme-item img {
    height: 150px;
    width: auto;
    margin-bottom: 15px;
    display: block;
}


.programme-item p {
    font-size: 20px;
    line-height: 1.6;
    font-family: 'DM Sans', sans-serif;
}

.programme-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* TABLET */

@media (min-width: 768px) {

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

    .section-title {
        font-size: 32px;
    }
}


/* DESKTOP */

@media (min-width: 1024px) {

    .programme-section {
        padding: 100px 0;
    }

    .programme-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .section-title {
        font-size: 53.32px;
        margin-bottom: 60px;
    }
}

/* =========================
   BOARD SECTION
========================= */

.board-section {
    background: #84aad6;
    padding: 80px 20px;
    text-align: center;
}

.board-title {
    color: #fff;
    font-size: 53.32px;
    margin-bottom: 40px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.board-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

/* Center the board cards if only 1 or 2 members */
.board-grid.centered {
    justify-content: center;
}

.board-member-card {
    align-items: center;
    text-align: center;
}

.board-member {
    width: 100%;
}

.board-member {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-member img {
    width: 100%;
    max-width: 280px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
}

.board-member h4 {
    color: #fff;
    margin-top: 15px;
    font-size: 40px;
    font-family: 'DM Sans', sans-serif;
}


/* TABLET */

@media (min-width: 768px) {

    .board-member {
        width: calc(50% - 15px);
    }

    .board-title {
        font-size: 32px;
    }

    .board-member img {
        max-width: 320px;
        height: 320px;
    }
}


/* DESKTOP */

@media (min-width: 1024px) {

    .board-section {
        padding: 100px 0;
    }

    .board-grid {
        gap: 40px;
    }

    .board-member {
        width: calc(25% - 30px);
    }

    .board-title {
        font-size: 36px;
        margin-bottom: 60px;
    }

    .board-member img {
        max-width: none;
        height: 350px;
    }
}

/* =========================
   IMPACT SECTION
========================= */

.impact-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #84aad6;
}

.impact-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.impact-item {
    width: 100%;
    text-align: center;
}

.impact-item h2 {
    font-size: 66.65px;
    color: #ffffff;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.impact-item p {
    font-weight: 600;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    font-size: 35px;
}


/* TABLET */

@media (min-width: 768px) {

    .impact-inner {
        flex-direction: row;
        gap: 40px;
    }

    .impact-item {
        width: calc(50% - 20px);
    }

    .impact-item h2 {
        font-size: 42px;
    }
}


/* DESKTOP */

@media (min-width: 1024px) {

    .impact-section {
        padding: 80px 0;
    }

    .impact-inner {
        gap: 60px;
    }

    .impact-item {
        width: calc(33.333% - 40px);
    }

    .impact-item h2 {
        font-size: 66px;
    }
}




/* Features Section */
.features-section {
    padding: var(--spacing-lg) 0;
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: var(--spacing-lg);
    color: black;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.feature-item {
    background: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item h3 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

/* Latest News */
.latest-news-section {
    padding: var(--spacing-lg) 0;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}


/* ------------------------------------------------------------------------- *
 *  FOOTER SECTION
 * ------------------------------------------------------------------------- */
.site-footer {
    background: #c2c2c2;
    padding: 80px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    max-width: 50%;
}

.footer-title {
    font-size: 53.32px;
    margin-bottom: 25px;
    color: #222;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.footer-left p {
    font-size: 26px;
    margin-bottom: 10px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    font-weight: bold;
    line-height: 0.8;
}

.footer-right {
    text-align: center;
}

.footer-logo img {
    max-height: 180px;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.footer-social img {
    width: 45px;
    height: 45px;
}


/* ------------------------------------------------------------------------- *
 *  Responsiveness
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .main-navigation ul {
        display: none;
        /* Toggle with JS later */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--white);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    }

    .main-navigation.toggled ul {
        display: flex;
    }

    .main-navigation li {
        margin: 0;
        text-align: center;
        border-bottom: 1px solid #eee;
        display: block;
        /* Stack items */
    }

    .main-navigation li::after {
        display: none;
        /* Hide separator */
    }

    .main-navigation a {
        display: block;
        padding: var(--spacing-sm);
    }

    .site-header-inner {
        position: relative;
    }

    .hero-title {
        font-size: 2rem;
    }
}

/* ============================= */
/* WHO WE ARE */
/* ============================= */

.who-we-are-section {
    background: #84aad6;
    padding: 60px 0 100px 0;
    color: #fff;
}

.about-main-title {
    text-align: center;
    font-size: 69.93px;
    margin: 0 0 60px 0;
    /* clean margin control */
    font-weight: 700;
    color: #fff;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}


.who-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin-bottom: 100px;
}

/* IMAGE SIDE */

.who-image {
    width: 35%;
}

.who-image img {
    width: 100%;
    height: 280px;
    /* FIXED HEIGHT */
    object-fit: cover;
    /* CROPS IMAGE NICELY */
    border-radius: 12px;
}

/* TEXT SIDE */

.who-content {
    width: 55%;
    line-height: 1.9;
}


.who-content p {
    font-size: 22px;
    color: #fff;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

/* ============================= */
/* FOUNDERS */
/* ============================= */

.founders-section {
    padding: 100px 0;
    background: #fff;
}

.section-title {
    text-align: center;
    font-size: 53.32px;
    margin-bottom: 70px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.founder-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

.founder-image {
    width: 25%;
}

.founder-image img {
    width: 100%;
    border-radius: 15px;
}

.founder-content {
    width: 75%;
    padding-left: 10px;
}

.founder-small {
    font-size: 23px;
    color: #000;
    font-family: 'DM Sans', sans-serif;
}

.founder-name {
    font-size: 24px;
    color: #7b9bbd;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    margin: 10px 0;
}

.founder-role {
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'DM Sans', sans-serif;
}

.founder-content p {
    line-height: 1.8;
    font-size: 24px;
    font-family: 'DM Sans', sans-serif;
}


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

@media (max-width: 768px) {

    .who-row,
    .founder-row {
        flex-direction: column;
        text-align: center;
    }

    .who-image,
    .who-content,
    .founder-image,
    .founder-content {
        width: 100%;
    }

    .about-main-title {
        font-size: 34px;
    }

}
    /* =============================================
       ABOUT PAGE — scoped additions only
       All base styles inherited from style.css / pages.css
    ============================================= */

    /* ── WHY CHOOSE ── */
    .why-choose-section {
      background: #84aad6;
      padding: 100px 0;
    }
    .why-choose-section .section-title {
      text-align: center;
      font-size: 53.32px;
      font-family: 'Avenir Next Thai Modern', sans-serif;
      margin-bottom: 60px;
      color: #000;
    }
    .why-intro {
      max-width: 860px;
      margin: 0 auto 60px auto;
      text-align: center;
    }
    .why-intro p {
      font-size: 22px;
      line-height: 1.9;
      font-family: 'DM Sans', sans-serif;
      color: #333;
      margin-bottom: 16px;
    }
    .why-intro p strong { color: #000; }
    .why-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
    .why-card {
      background: #f5f5f5;
      border-top: 4px solid #84aad6;
      border-radius: 10px;
      padding: 30px 28px;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .why-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(0,0,0,.10);
    }
    .why-card img { height: 80px; margin-bottom: 16px; }
    .why-card h4 {
      font-size: 20px;
      font-family: 'Avenir Next Thai Modern', sans-serif;
      color: #7b9bbd;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .why-card p {
      font-size: 17px;
      line-height: 1.7;
      font-family: 'DM Sans', sans-serif;
      color: #555;
      margin: 0;
    }

    /* ── VISION & MISSION ── */
    .vision-mission-section {
      background: #f5f5f5;
      padding: 100px 0;
    }
    .vm-inner { display: flex; gap: 60px; align-items: flex-start; }
    .vm-block  { flex: 1; }
    .vm-block h2 {
      font-family: 'Avenir Next Thai Modern', sans-serif;
      font-size: 39.99px; color: #84aad6; margin-bottom: 20px;
    }
    .vision-quote {
      background: #fff;
      border-left: 5px solid #84aad6;
      border-radius: 0 10px 10px 0;
      padding: 28px;
      font-family: 'DM Sans', sans-serif;
      font-size: 19px; line-height: 1.9; color: #333;
      box-shadow: 0 2px 10px rgba(0,0,0,.06);
      margin: 0;
    }
    .mission-pillars { display: flex; flex-direction: column; gap: 16px; }
    .pillar {
      display: flex; gap: 18px; align-items: flex-start;
      background: #fff; border-radius: 10px; padding: 18px 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .pillar:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }
    .pillar-num {
      width: 34px; height: 34px;
      background: #84aad6; color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; flex-shrink: 0;
      font-family: 'Avenir Next Thai Modern', sans-serif;
    }
    .pillar-body h4 {
      font-family: 'Avenir Next Thai Modern', sans-serif;
      font-size: 17px; font-weight: 700; color: #000; margin-bottom: 4px;
    }
    .pillar-body p {
      font-family: 'DM Sans', sans-serif;
      font-size: 15px; line-height: 1.6; color: #666; margin: 0;
    }

    /* ── SCROLL FADE-IN ── */
    .fade-up {
      opacity: 0; transform: translateY(30px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .fade-up.visible { opacity: 1; transform: translateY(0); }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .why-cards { grid-template-columns: 1fr; gap: 24px; }
      .why-choose-section .section-title,
      .history-section .section-title { font-size: 30px; }
      .why-intro p { font-size: 17px; }

      .timeline::before { left: 28px; transform: none; }
      .tl-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
        margin-bottom: 50px;
      }
      .tl-item:nth-child(odd) .tl-dot,
      .tl-item:nth-child(even) .tl-dot  { grid-column: 1; grid-row: 1; }
      .tl-item:nth-child(odd) .tl-content,
      .tl-item:nth-child(even) .tl-content { grid-column: 2; grid-row: 1; padding: 0 0 0 20px; text-align: left; }
      .tl-item:nth-child(odd) .tl-image,
      .tl-item:nth-child(even) .tl-image   { grid-column: 2; grid-row: 2; padding: 16px 0 0 20px; }
      .tl-year { font-size: 32px; }

      .vm-inner { flex-direction: column; gap: 40px; }
      .vm-block h2 { font-size: 28px; }
    }
/* ============================= */
/* AIMS SECTION */
/* ============================= */

/* ============================= */
/* AIMS SECTION */
/* ============================= */

.aims-section {
    background: #84aad6;
    padding: 120px 0;
    color: #fff;
}

.aims-title {
    text-align: center;
    font-size: 53.32px;
    font-weight: 700;
    margin-bottom: 75px;
    color: #fff;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

/* Wrapper */

.aims-wrapper {
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
}

/* Each Item */

/* .aim-item {
    display: flex;
    gap: 60px;
    margin-bottom: 100px;
    align-items: center
} */

/* Icon */

.aim-item {
    display: flex;
    align-items: center;
    gap: 60px;
}

.aim-icon img {
    width: 220px;
    height: 220px;
    object-fit: contain;
}


/* Text */

.aim-text {
    flex: 1;
}

.aim-text p {
    font-size: 22px;
    line-height: 1.9;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 45px;
}


/* ============================= */
/* DIFFERENCE SECTION */
/* ============================= */

.difference-section {
    background: #f5f5f5;
    padding: 100px 0;
    text-align: center;
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 60px;
}

.difference-item img {
    height: 180px;
    margin-bottom: 20px;
}

.difference-item h4 {
    color: #7b9bbd;
    margin-bottom: 15px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    font-weight: bold;
    font-size: 26.67px;
}

.difference-item p {
    font-size: 18.33px;
    line-height: 1.6;
    font-family: 'DM Sans', sans-serif;
}


/* ============================= */
/* MOTTO SECTION */
/* ============================= */

.motto-section {
    background: #84aad6;
    padding: 80px 0;
    text-align: center;
    color: #fff;
}

.motto-section h2 {
    margin-bottom: 53.32px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 42px;
}

.motto-section p {
    font-size: 40px;
    font-weight: 550;
    font-family: 'DM Sans', sans-serif;
    color: #fff;
}


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

@media (max-width: 768px) {

    .aim-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

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

}

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

.academics-section {
    background: #84aad6;
}

.academics-title {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    padding: 20px;
    background: #84aad6;

}

.academics-image img {
    width: 100%;
    border-radius: 10px;
    display: block;
    background: #84aad6;

}

.academics-content-section {
    background-color: #fff;
    padding: 15px;
}

.academics-content {
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.academics-content p {
    font-size: 22px;
    line-height: 1.5;
    color: #000;
}


/* =========================
   ACTIVITIES SECTION
========================= */

.activities-section {
    background: #84aad6;
    padding: 100px 20px;
}

.activities-title {
    font-size: 53.32px;
    color: #fff;
    margin-bottom: 50px;
    text-align: center;
}

.activities-content {
    max-width: 1000px;
    margin: 0 auto 60px auto;
}

.activities-content p {
    color: #fff;
    font-size: 20px;
    line-height: 1.9;
}

.activities-image img {
    width: 100%;
    max-width: 1000px;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

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

.activities-gallery {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-bottom: 60px;
}

.gallery-item {
    flex: 1;
    max-width: 500px;
}

.gallery-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
}

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

@media (max-width: 768px) {

    .activities-gallery {
        flex-direction: column;
        gap: 20px;
    }

    .gallery-item img {
        height: auto;
    }

    .activities-title {
        font-size: 28px;
    }

    .activities-content p {
        font-size: 16px;
    }
}

/* =========================
   INFRASTRUCTURE SECTION
========================= */

.infrastructure-section {
    background: #84aad6;
    padding: 120px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.infrastructure-title {
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 80px;
    text-align: center;
}


/* GRID */

.infra-grid {
    display: grid;
    grid-template-columns: repeat(2, 420px);
    justify-content: center;
    gap: 70px;
}


/* CARD */

.infra-card {
    width: 420px;
    background: #f4f4f4;
    border-radius: 30px;
    padding: 60px 40px;

    display: flex;
    flex-direction: column;
    align-items: center;

    transition: 0.3s ease;
}


/* ICON */

.infra-card img {
    width: 175px;
    margin-bottom: 30px;
}


/* HEADING */

.infra-card h4 {
    font-size: 24px;
    color: #6c97c8;
    margin-bottom: 25px;
    font-weight: 650;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    text-align: center;
}


/* TEXT */

.infra-card p {
    font-size: 22px;
    line-height: 1.5;
    color: #000;
    font-family: 'DM Sans', sans-serif;
}


/* HOVER */

.infra-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


/* RESPONSIVE */

@media (max-width: 1024px) {
    .infra-grid {
        grid-template-columns: 1fr;
    }

    .infra-card {
        width: 100%;
    }

    .infrastructure-title {
        font-size: 32px;
    }
}

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

.admissions-hero {
    background: #84aad6;
    padding: 30px;
    text-align: center;
}

.admissions-hero h1 {
    color: #fff;
    font-size: 53.32px;
    font-weight: 700;
    font-family: 'Avenir Next Thai Modern', sans-serif;
}

.admissions-hero .year {
    font-size: 120px;
    font-weight: 800;
    color: #ffffff;
    margin: 20px 0;
}

.hero-sub {
    color: #fff;
    font-size: 33px;
}


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

.admissions-image-section img {
    width: 100%;
    object-fit: cover;
    display: block;
}


/* =================================
   DETAILS SECTION
================================= */

.admissions-details {
    background: #f3f3f3;
    padding: 100px 60px;
    /* ← increased horizontal padding */
    position: relative;
}

.details-wrapper {
    display: flex;
    gap: 40px;
    /* ← reduced from 80px */
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.details-left {
    flex: 3;
    /* ← increased from 2 so it takes more space */
    min-width: 0;
}

.details-left h3 {
    color: #84aad6;
    font-size: 36px;
    margin-bottom: 20px;
    font-family: 'Avenir Next Thai Modern', sans-serif;
    font-weight: 500;
}

.details-left p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 50px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    white-space: pre-line;
    /* ← preserves <br> line breaks naturally */
}

.details-left ul {
    padding-left: 20px;
}

.details-left li {
    font-size: 18px;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.5;
}


/* WATERMARK */

.details-right {
    flex: 0 0 200px;
    /* ← fixed width instead of flex:1 eating into content space */
    position: relative;
}

.details-right img {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    width: 250px;
    /* ← slightly smaller */
}


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

@media (max-width: 992px) {

    .admissions-hero .year {
        font-size: 70px;
    }

    .admissions-details {
        padding: 60px 20px;
    }

    .details-wrapper {
        flex-direction: column;
    }

    .details-right {
        flex: unset;
        width: 100%;
    }

    .details-right img {
        position: static;
        opacity: 0.05;
        margin-top: 40px;
        width: 150px;
    }

}

/* =========================
   TEAM PAGE
========================= */

/* ── Hero ─────────────────────────────── */
.team-hero {
    background: #84aad6;
    padding: 40px 20px;
    text-align: center;
}

.team-hero h1 {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ── Section Base ─────────────────────── */
.team-section {
    padding: 60px 40px;
}

.blue-bg {
    background: #84aad6;
}

.white-bg {
    background: #ffffff;
}

/* ── Flex Row ─────────────────────────── */
.team-flex {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
}

/* ── Image ────────────────────────────── */
.team-image {
    flex-shrink: 0;
    width: 260px;
}

.team-image img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* ── Content ──────────────────────────── */
.team-content {
    flex: 1;
}

/* WHITE TEXT — used on blue (#84aad6) backgrounds */
.white-text {
    color: #ffffff;
}

.white-text .team-role {
    color: #ffffff;
}

.white-text .team-name {
    color: #ffffff;
}

.white-text .team-qualification {
    color: #ffffff;
}

.white-text p {
    color: #ffffff;
}

/* DARK TEXT — used on white (#fff) backgrounds */
.dark-text {
    color: #1a1a1a;
}

.dark-text .team-role {
    color: #1a1a1a;
}

.dark-text .team-name {
    color: #1a1a1a;
}

.dark-text .team-qualification {
    color: #1a1a1a;
}

.dark-text p {
    color: #1a1a1a;
}

/* ── Typography ───────────────────────── */
.team-role {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.team-name {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.2;
}

.team-qualification {
    font-size: 42px;
    font-weight: 600;
    margin: 0 0 16px;
}

.team-content p {
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
}

/* ── Grid Section ─────────────────────── */
.team-grid-section {
    padding: 60px 40px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 700px;
    margin: 0 auto;
}

.team-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.team-card h4 {
    margin: 14px 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.team-card span {
    display: block;
    font-size: 0.95rem;
    color: #444;
}

/* ── Responsive ───────────────────────── */
@media (max-width: 768px) {
    .team-flex {
        flex-direction: column;
        text-align: center;
    }

    .team-image {
        width: 100%;
    }

    .team-image img {
        width: 100%;
        height: 260px;
    }

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

    .team-hero h1 {
        font-size: 1.8rem;
    }

    .team-name {
        font-size: 1.5rem;
    }
}

/* ── ADMISSIONS RIBBON ── */
    #siet-ribbon {
      position: sticky;
      top: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 24px;
      overflow: hidden;

      /* Deep Navy: near black → dark navy → mid blue → back */
      background: linear-gradient(
        90deg,
        #0a1628 0%,
        #1e3a5f 25%,
        #2d5a8e 50%,
        #1e3a5f 75%,
        #0a1628 100%
      );
      background-size: 300% 100%;
      animation: siet-ribbon-move 4s linear infinite;
    }

    @keyframes siet-ribbon-move {
      0%   { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }

    @keyframes siet-blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.15; }
    }

    .siet-ribbon-inner {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }

    .siet-ribbon-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #84aad6;
      flex-shrink: 0;
      animation: siet-blink 1.3s ease-in-out infinite;
    }

    .siet-ribbon-text {
      font-family: 'Avenir Next Thai Modern', sans-serif;
      font-size: 25px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 0.4px;
    }

    .siet-ribbon-btn {
      background: #84aad6;
      color: #ffffff;
      font-family: 'Avenir Next Thai Modern', sans-serif;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      display: inline-block;
      letter-spacing: 0.3px;
      transition: opacity 0.2s;
    }

    .siet-ribbon-btn:hover {
      opacity: 0.85;
      color: #ffffff;
    }

    .siet-ribbon-close {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      padding: 0 0 0 16px;
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      transition: color 0.2s;
    }

    .siet-ribbon-close:hover { color: #fff; }

    @media (max-width: 600px) {
      #siet-ribbon      { padding: 10px 14px; }
      .siet-ribbon-text { font-size: 12px; text-align: center; }
      .siet-ribbon-btn  { font-size: 11px; padding: 4px 12px; }
    }