/* =====================================================
   COLORS USED
   Dark green : #0a3d3a
   Green      : #12625c
   Light green: #e6f1ef
   Gold       : #e2a62b
   Cream      : #fbf8f1
   ===================================================== */

/* ---------- Basic ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Nunito Sans", Arial, sans-serif;
    color: #1d2b2a;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
svg { width: 1em; height: 1em; fill: currentColor; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- ROW 0: Contact strip ---------- */
.topbar {
    background: #15635e;
    color: #cfe3e0;
    font-size: 14px;
    padding: 8px 0;
}
.topbar .container { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.topbar span, .topbar a { display: flex; align-items: center; gap: 8px; }
.topbar svg { color: #e2a62b; font-size: 16px; }

/* ---------- ROW 1: College name + buttons ---------- */
.brandbar {
    background: #fbf8f1;
    border-bottom: 1px solid #e3e8e6;
    padding: 16px 0;
}
.brandbar .container {
    display: flex;
    justify-content: space-between;   /* name left, buttons right */
    align-items: center;
    gap: 20px;
}

.brand { display: flex; align-items: center; gap: 16px; }
.logo {
    height: 65px;          /* change this number to make the logo bigger or smaller */
    width: auto;           /* keeps the logo shape, no stretching */
    max-width: 130px;
    object-fit: contain;
}

.college-name {
    display: block;
    font-family: "Merriweather", Georgia, serif;
    font-weight: 900;
    font-size: 26px;
    color: #0a3d3a;
}
.tagline {
    display: block;
    font-weight: 600;
    color: #a87a10;
}

.actions { display: flex; align-items: center; gap: 12px; }

.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.apply-btn { background: #e2a62b; color: #0a3d3a; }
.apply-btn:hover { background: #cf9519; }

.language-btn { background: transparent; color: #0a3d3a; border-color: #0a3d3a; }
.language-btn:hover { background: #0a3d3a; color: #fff; }

/* Language list */
.language { position: relative; }
.language-list {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e3e8e6;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(10, 61, 58, 0.18);
    z-index: 60;
}
.language-list.show { display: block; }
.language-list a { display: block; padding: 11px 16px; }
.language-list a:hover { background: #e6f1ef; }

/* Menu button (hidden on desktop) */
.menu-btn {
    display: none;
    width: 46px;
    height: 46px;
    font-size: 24px;
    background: transparent;
    color: #0a3d3a;
    border: 2px solid #0a3d3a;
    border-radius: 8px;
    cursor: pointer;
}

/* ---------- ROW 2: Navbar ---------- */
nav {
    background: #12625c;
    position: sticky;          /* stays at the top while scrolling */
    top: 0;
    z-index: 50;
    box-shadow: 0 3px 12px rgba(10, 61, 58, 0.25);
}
nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* menu in the center */
}
nav li { position: relative; }

nav > ul > li > a {
    display: block;
    padding: 16px 20px;
    color: #fff;
    font-weight: 700;
    border-bottom: 3px solid transparent;
}
nav > ul > li > a:hover { background: rgba(255, 255, 255, 0.14); }
nav > ul > li > a.active { background: #0a3d3a; border-bottom-color: #e2a62b; }

/* Dropdown (submenu) */
.sub {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    border-top: 3px solid #e2a62b;
    box-shadow: 0 12px 28px rgba(10, 61, 58, 0.16);
}
.has-sub:hover .sub { display: block; }     /* show on mouse over */
.sub a { display: block; padding: 11px 18px; font-weight: 600; color: #0a3d3a; }
.sub a:hover { background: #e6f1ef; }

.sub-btn { display: none; }                  /* only used on mobile */

/* ---------- ROW 3: Notice ---------- */
.notice {
    display: flex;
    align-items: center;
    background: #e2a62b;
    color: #ffffff;
    font-weight: 600;
}
.notice-label {
    background: #0a3d3a;
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
}
.notice marquee { padding: 0 10px; }

/* ---------- Page content ---------- */
.page { padding-top: 56px; padding-bottom: 100px; }

/* ---------- MOBILE ---------- */
@media (max-width: 960px) {
    .college-name { font-size: 20px; }
    .logo { height: 60px; }
    .btn { padding: 10px 16px; }
    .menu-btn { display: block; }

    nav { display: none; position: static; }
    nav.open { display: block; }
    nav > ul { flex-direction: column; }
    nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
    nav > ul > li > a { padding: 14px 20px; }

    /* submenus open by tapping the arrow */
    .has-sub:hover .sub { display: none; }
    .has-sub.open .sub { display: block; }
    .sub { position: static; background: #e6f1ef; border: 0; box-shadow: none; }
    .sub a { padding-left: 36px; }
    .sub-btn {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 56px;
        height: 52px;
        background: transparent;
        color: #fff;
        border: 0;
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .topbar .container { flex-direction: column; gap: 4px; }
    .brandbar .container { flex-wrap: wrap; }
    .college-name { font-size: 17px; }
    .tagline { font-size: 13px; }
    .language-btn span { display: none; }
}

/* ---------- HERO SECTION ---------- */
.hero {
    background: #f3f8f7;
    padding: 60px 0;
}
.hero-inner {
    display: flex;
    align-items: center;
    gap: 50px;
}
.hero-text { flex: 1; }
.hero-image { flex: 1; }

.hero-badge {
    display: inline-block;
    background: #fff;
    color: #12625c;
    border: 1px solid #cfe3e0;
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}
.hero-text h1 {
    font-family: "Merriweather", Georgia, serif;
    font-size: 40px;
    line-height: 1.25;
    color: #0a3d3a;
    margin: 0 0 16px;
}
.hero-text p {
    font-size: 17px;
    color: #44524f;
    margin: 0 0 26px;
}

.hero-btn {
    display: inline-block;
    background: #e2a62b;
    color: #0a3d3a;
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 700;
    margin-right: 10px;
}
.hero-btn:hover { background: #cf9519; }
.hero-btn-outline {
    background: transparent;
    border: 2px solid #0a3d3a;
    padding: 10px 24px;
}

.hero-image img {
    width: 100%;
    height: 380px;
    object-fit: cover;        /* image fills the box without stretching */
    border-radius: 16px;
    border-bottom: 6px solid #e2a62b;
}

/* Mobile */
@media (max-width: 800px) {
    .hero-inner { flex-direction: column; }
    .hero-text h1 { font-size: 28px; }
    .hero-image img { height: 260px; }
}
/* ---------- COURSES WE OFFER ---------- */
.courses {
    padding: 70px 0;
    background: #fff;
}
.section-title {
    text-align: center;
    font-family: "Merriweather", Georgia, serif;
    font-size: 32px;
    color: #0a3d3a;
    margin: 0 0 8px;
}
.section-sub {
    text-align: center;
    color: #44524f;
    margin: 0 0 40px;
}

.course-boxes {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.course-card {
    flex: 1;
    max-width: 440px;
    background: #fbf8f1;
    border: 1px solid #e3e8e6;
    border-top: 5px solid #e2a62b;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}
.course-card h3 {
    font-family: "Merriweather", Georgia, serif;
    font-size: 30px;
    color: #12625c;
    margin: 0 0 4px;
}
.course-name {
    font-weight: 700;
    color: #0a3d3a;
    margin: 0 0 6px;
}
.course-duration {
    color: #a87a10;
    font-weight: 600;
    margin: 0 0 14px;
}
.course-card p { margin: 0 0 14px; }

.course-btn {
    display: inline-block;
    background: #12625c;
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 8px;
}
.course-btn:hover { background: #0a3d3a; }

/* Mobile */
@media (max-width: 800px) {
    .course-boxes { flex-direction: column; align-items: center; }
    .course-card { width: 100%; }
}

/* ---------- WHY CHOOSE OUR COLLEGE ---------- */
.why {
    padding: 70px 0;              /* no background color */
}
.why-title {
    text-align: center;
    font-family: "Merriweather", Georgia, serif;
    font-size: 32px;
    color: #0a3d3a;
    margin: 0 0 8px;
}
.why-sub {
    text-align: center;
    color: #44524f;
    margin: 0 0 45px;
}

/* 3 boxes in a row */
.why-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.why-card {
    background: #fbf8f1;
    border: 1px solid #e3e8e6;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    border-bottom: 4px solid #12625c;
    transition: transform 0.2s, box-shadow 0.2s, border-bottom-color 0.2s;
}
.why-card:hover {
    transform: translateY(-6px);          /* box moves up on mouse over */
    box-shadow: 0 12px 24px rgba(10, 61, 58, 0.15);
    border-bottom-color: #e2a62b;
}
.why-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 16px;
    background: #12625c;
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-card h3 {
    color: #0a3d3a;
    font-size: 20px;
    margin: 0 0 8px;
}
.why-card p {
    color: #44524f;
    margin: 0;
}

/* Tablet */
@media (max-width: 900px) {
    .why-boxes { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile */
@media (max-width: 600px) {
    .why-boxes { grid-template-columns: 1fr; }
}
/* ---------- STATISTICS COUNTER (strip) ---------- */
.stats {
    background: #12625c;               /* the strip color */
    padding: 34px 0;
    border-top: 4px solid #e2a62b;     /* thin gold line on top */
}
.stats-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* each item: no box, only a thin line on the left */
.stat-card {
    text-align: center;
    padding: 6px 16px;
    background: none;
    border: 0;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.stat-card:first-child {
    border-left: 0;
}

.stat-number {
    font-family: "Merriweather", Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

/* small gold bar under the number */
.stat-card p::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    background: #e2a62b;
    border-radius: 2px;
    margin: 8px auto 8px;
}
.stat-card p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #d6e8e5;
}

/* Tablet and mobile */
@media (max-width: 800px) {
    .stats-boxes { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
    .stat-card:nth-child(3) { border-left: 0; }
    .stat-number { font-size: 30px; }
}
/* ---------- OUR FOUNDERS ---------- */
.founders {
    padding: 70px 0;                  /* no background color */
}

/* heading area */
.founders-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}
.founders-label {
    display: inline-block;
    color: #a87a10;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.founders-title {
    font-family: "Merriweather", Georgia, serif;
    font-size: 34px;
    color: #0a3d3a;
    margin: 0 0 12px;
}
.founders-sub {
    color: #44524f;
    margin: 0;
}

/* each founder = one card, photo left and text right */
.founder {
    display: flex;
    align-items: center;
    gap: 40px;
    background: #fbf8f1;
    border: 1px solid #e3e8e6;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
}
.founder:last-child {
    margin-bottom: 0;
}

/* square photo */
.founder-photo {
    flex: none;
    width: 280px;
    height: 280px;
}
.founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    border-bottom: 5px solid #e2a62b;
}

.founder-info {
    flex: 1;
}
.founder-info h3 {
    font-family: "Merriweather", Georgia, serif;
    font-size: 24px;
    color: #0a3d3a;
    margin: 0 0 10px;
}
.founder-role {
    display: inline-block;
    background: #12625c;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 16px;
    border-radius: 20px;
    margin: 0 0 8px;
}
.founder-college {
    color: #a87a10;
    font-weight: 600;
    margin: 0 0 14px;
}
.founder-text {
    color: #44524f;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #e3e8e6;
}

/* Mobile: photo on top, text below */
@media (max-width: 800px) {
    .founder { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
    .founder-photo { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; }
}
/* Managing Director: photo on the right, text on the left */
.founder-reverse {
    flex-direction: row-reverse;
}
/* ---------- GALLERY ---------- */
.gallery {
    padding: 70px 0;                  /* no background color */
}
.gallery-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}
.gallery-label {
    display: inline-block;
    color: #a87a10;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.gallery-title {
    font-family: "Merriweather", Georgia, serif;
    font-size: 34px;
    color: #0a3d3a;
    margin: 0 0 12px;
}
.gallery-sub {
    color: #44524f;
    margin: 0;
}

/* 3 photos in a row */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.gallery-item {
    position: relative;
    height: 240px;
    border-radius: 12px;
    overflow: hidden;                 /* hides the zoom outside the box */
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;                /* photo is not stretched */
    transition: transform 0.4s;
}
.gallery-item:hover img {
    transform: scale(1.08);           /* photo zooms on mouse over */
}

/* name of the photo at the bottom */
.gallery-item span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 16px 12px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(to top, rgba(10, 61, 58, 0.85), transparent);
}

/* button */
.gallery-more {
    text-align: center;
    margin-top: 36px;
}
.gallery-btn {
    display: inline-block;
    background: #12625c;
    color: #fff;
    padding: 13px 30px;
    border-radius: 8px;
    font-weight: 700;
}
.gallery-btn:hover {
    background: #0a3d3a;
}

/* Tablet */
@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile */
@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-item { height: 220px; }
}