@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--cream:#f6f1e8;--paper:#fffdf8;--coffee:#39271f;--brown:#684a38;--gold:#bd965d;--ink:#28221e;--muted:#766b62;--line:#e5dbce}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.site-header{height:82px;padding:0 6.5%;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,248,.97);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px}.brand img{width:54px;height:54px;object-fit:contain}.brand span{display:grid;line-height:1.2;letter-spacing:1.5px}.brand strong{font-size:15px;color:var(--coffee)}.brand small{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:5px}nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:600;color:#51453c}nav a:hover,.text-link:hover{color:var(--gold)}.nav-cta{background:var(--coffee);color:white;padding:11px 19px;border-radius:2px}.menu-toggle{display:none;background:none;border:0;font-size:25px;color:var(--coffee)}
.hero{min-height:620px;background:url("images/hero.jpg") center 52%/cover no-repeat;position:relative;display:flex;align-items:center;color:white}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,17,13,.86),rgba(25,17,13,.55) 53%,rgba(25,17,13,.1))}.hero-content{position:relative;max-width:700px;margin-left:10%;padding:80px 25px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2.4px;font-weight:700;color:var(--gold)}.hero h1{font:600 clamp(43px,6vw,72px)/1.12 "Playfair Display",serif;margin:18px 0}.hero-copy{max-width:510px;color:#eee5da;font-size:16px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 18px}.button{display:inline-flex;justify-content:center;align-items:center;padding:13px 22px;border:0;border-radius:2px;font:600 12px "DM Sans",sans-serif;cursor:pointer;transition:.2s}.button:hover{transform:translateY(-2px)}.button-gold{background:var(--gold);color:#201710}.button-outline{border:1px solid rgba(255,255,255,.7);color:white}.button-dark{background:var(--coffee);color:white;width:100%}.button-light{background:var(--cream);color:var(--coffee);white-space:nowrap}.hero-note{font-size:11px;color:#d7c8b8;letter-spacing:.4px}
.section{padding:95px 9%}.intro{background:var(--cream)}.intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%;margin-top:24px}.section h2{font:600 clamp(34px,4vw,49px)/1.15 "Playfair Display",serif;color:var(--coffee);margin:12px 0 20px}.section h2 em{color:var(--gold);font-style:normal}.intro-text{color:#62574f;font-size:14px}.intro-text p:first-child{margin-top:0}.purpose{padding-top:0;background:var(--cream);display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.purpose-card{background:var(--paper);padding:28px 25px;min-height:210px}.purpose-card h3,.special-programs h3{font:600 23px "Playfair Display",serif;color:var(--coffee);margin:12px 0}.purpose-card p,.special-programs p{font-size:12px;color:var(--muted);margin-bottom:0}.purpose-dark{background:var(--coffee)}.purpose-dark h3,.purpose-dark p{color:#fff}.purpose-dark p{opacity:.75}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:330px;color:var(--muted);font-size:13px;margin:0 0 5px}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.course-card{background:#fff;border:1px solid var(--line)}.course-card>img{width:100%;height:220px;object-fit:cover}.course-body{padding:24px}.course-number{color:var(--gold);font-size:11px;letter-spacing:2px}.course-body h3{font:600 24px "Playfair Display",serif;color:var(--coffee);margin:8px 0}.duration{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--gold)}.course-body p:not(.duration){font-size:12px;color:var(--muted);min-height:60px}.text-link{font-size:11px;font-weight:700;color:var(--brown)}.sca-panel{margin-top:28px;padding:34px 38px;background:var(--coffee);color:white;display:flex;align-items:center;justify-content:space-between;gap:25px}.sca-panel h3{font:600 30px "Playfair Display",serif;margin:8px 0}.sca-panel h3 span{color:var(--gold)}.sca-panel p{max-width:650px;color:#d9cec4;font-size:12px;margin-bottom:0}.special-programs{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:40px 5px 15px}.small-note{font-size:10px;color:#8b8077;margin-top:25px}
.approach{background:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.approach-image img{width:100%;height:590px;object-fit:cover}.approach-content h2{margin-bottom:30px}.step{display:flex;gap:20px;border-top:1px solid #ded2c4;padding:15px 0}.step>b{font:600 18px "Playfair Display",serif;color:var(--gold)}.step h3{font:600 18px "Playfair Display",serif;color:var(--coffee);margin:0}.step p{font-size:12px;color:var(--muted);margin:3px 0 0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.service-item{background:var(--paper);padding:28px;min-height:175px}.service-item span{font-size:10px;color:var(--gold);letter-spacing:2px}.service-item h3{font:600 20px "Playfair Display",serif;color:var(--coffee);margin:12px 0 5px}.service-item p{font-size:12px;color:var(--muted);margin:0}
.facilities{background:var(--cream)}.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.facility-grid figure{margin:0;background:white}.facility-grid img{width:100%;height:270px;object-fit:cover}.facility-grid figcaption{padding:14px 18px;font:600 17px "Playfair Display",serif;color:var(--coffee)}.service-image {
    width: 150px;
    height: 120px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.person{border:1px solid var(--line);padding:20px 17px}.person img{width:100%;height:225px;object-fit:contain;object-position:center bottom;background:var(--cream)}.person h3{font:600 18px "Playfair Display",serif;color:var(--coffee);margin:16px 0 3px}.person span{display:block;color:var(--gold);font-size:10px;font-weight:700;line-height:1.5}.person p{font-size:11px;color:var(--muted)}
.gallery{background:var(--cream)}.gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:190px 190px;gap:12px}.gallery-grid img{width:100%;height:100%;object-fit:cover}.gallery-grid img:first-child{grid-row:span 2}
.register{background:#ede3d6;display:grid;grid-template-columns:1fr .85fr;gap:9%;align-items:center}.register-copy>p{max-width:440px;color:var(--muted);font-size:14px}.direct-contact{margin-top:28px}.direct-contact a{color:var(--brown);font-weight:700}.form-card{background:var(--paper);padding:32px;box-shadow:0 12px 40px rgba(53,37,26,.06)}.form-card h3{font:600 25px "Playfair Display",serif;color:var(--coffee);margin:0 0 22px}.form-card label{display:block;font-size:11px;font-weight:700;color:#55483e;margin:13px 0}.form-card label small{font-weight:400;color:var(--muted)}.form-card input,.form-card select,.form-card textarea{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);background:#fffdf9;font:12px "DM Sans",sans-serif;color:var(--ink);border-radius:1px}.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:1px solid var(--gold)}.form-status{font-size:12px;color:#3e7655;min-height:18px}.privacy{display:block;color:#93877c;font-size:9px;margin-top:10px}
.contact{display:grid;grid-template-columns:1fr .85fr;gap:9%;align-items:start}.contact>div>p{max-width:430px;color:var(--muted);font-size:13px}.contact-details{margin:28px 0}.contact-details p{display:grid;grid-template-columns:125px 1fr;gap:8px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);padding:11px 0;margin:0}.contact-details b{color:var(--coffee)}.contact-details a{color:var(--brown)}.enquiry-card{box-shadow:none;border:1px solid var(--line)}
footer{background:#2c201a;color:#e9dfd4;text-align:center;padding:42px 20px}footer .footer-brand{font:600 25px "Playfair Display",serif;letter-spacing:3px;color:#d5b17b}footer>span{display:block;font-size:9px;letter-spacing:3px}footer p{font-size:11px;color:#bcae9f}footer small{font-size:10px;color:#998a7c}.whatsapp-float{position:fixed;right:22px;bottom:20px;background:#276c4c;color:white;padding:12px 18px;border-radius:30px;font-size:11px;font-weight:700;box-shadow:0 5px 20px #0002;z-index:15}
@media(max-width:900px){nav{gap:13px;font-size:11px}.section{padding:75px 6%}.team-grid{grid-template-columns:repeat(2,1fr)}.person img{height:260px}}
@media(max-width:680px){.site-header{height:70px;padding:0 5%}.brand img{width:45px;height:45px}.menu-toggle{display:block}nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:20px 6%;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}nav.open{display:flex}nav a{padding:8px}.hero{min-height:590px;background-position:58% center}.hero-content{margin:0;padding:65px 7%}.hero h1{font-size:47px}.section{padding:65px 6%}.intro-grid,.approach,.register,.contact{grid-template-columns:1fr;gap:28px}.purpose{grid-template-columns:1fr;padding-left:6%;padding-right:6%}.section-heading{display:block}.section-heading>p{margin-top:15px}.course-grid,.facility-grid{grid-template-columns:1fr}.course-card>img{height:240px}.sca-panel{display:block;padding:27px}.sca-panel .button{margin-top:22px}.special-programs{grid-template-columns:1fr;gap:15px}.approach-image img{height:300px}.service-grid{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:1fr 1fr;gap:10px}.person{padding:12px}.person img{height:180px}.person h3{font-size:16px}.person p{font-size:10px}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:160px 160px 160px}.gallery-grid img:first-child{grid-row:span 2}.form-card{padding:24px}.contact-details p{grid-template-columns:105px 1fr}.whatsapp-float{right:13px;bottom:13px}.hero-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:390px){.team-grid,.service-grid{grid-template-columns:1fr}.person img{height:240px}}


/* STUDENT VIDEO GALLERY */

.student-videos {
    background: #f6f1e8;
}

.video-category {
    margin-top: 40px;
}

.video-category h3 {
    color: #3b2a20;
    font-size: 21px;
    margin-bottom: 18px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.video-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

.video-card video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #211b16;
}

.video-note {
    text-align: center;
    margin-top: 40px;
    color: #76685d;
    font-style: italic;
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .video-category {
        margin-top: 30px;
    }
}


/* MOBILE RESPONSIVE */

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .video-category {
        margin-top: 30px;
    }
}

/* OUR FACILITY SERVICES */

.services {
    background: #f6f1e8;
}

.services-content {
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin-top: 35px;
}

/* SERVICES LIST */

.services-list {
    display: flex;
    flex-direction: column;
}

.service-row {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(75, 55, 40, 0.18);
}

.service-row:first-child {
    border-top: 1px solid rgba(75, 55, 40, 0.18);
}

.service-number {
    color: #b18a55;
    font-size: 14px;
    font-weight: 600;
    padding-top: 5px;
}

.service-row h3 {
    color: #3b2a20;
    margin: 0 0 7px;
    font-size: 20px;
}

.service-row p {
    color: #76685d;
    margin: 0;
    line-height: 1.7;
    font-size: 14px;
}

/* FEATURED COFFEE BEANS */

.beans-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 35px;
    background: #ffffff;
    padding: 22px;
    border-radius: 12px;
}

.beans-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.beans-description {
    padding: 15px;
}

.beans-description h3 {
    color: #3b2a20;
    font-size: 27px;
    margin: 12px 0;
}

.beans-description p {
    color: #76685d;
    line-height: 1.8;
    font-size: 15px;
}

/* MOBILE VIEW */

@media (max-width: 768px) {
    .beans-feature {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .beans-image img {
        height: 230px;
    }

    .beans-description {
        padding: 5px;
    }

    .service-row {
        gap: 15px;
    }
}

/* STUDENT VIDEO GALLERY */

.student-videos {
    background: #f6f1e8;
}

.video-category {
    margin: 35px auto;
}

.video-category h3 {
    color: #3b2a20;
    font-size: 20px;
    margin-bottom: 18px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 650px;
    margin: 0 auto;
    justify-items: center;
}

.video-card {
    width: 100%;
    max-width: 280px;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}

.video-card video {
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: contain;
    display: block;
    background: #211b16;
}

.video-note {
    text-align: center;
    margin-top: 30px;
    color: #76685d;
    font-style: italic;
}

/* TABLET VIEW */

@media (max-width: 900px) {
    .video-grid {
        max-width: 600px;
        gap: 18px;
    }

    .video-card {
        max-width: 250px;
    }
}

/* MOBILE VIEW */

@media (max-width: 600px) {
    .video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .video-card {
        max-width: 100%;
    }

    .video-category {
        margin: 25px auto;
    }

    .video-category h3 {
        font-size: 17px;
    }
}

/* WEBSITE DESCRIPTION FONT SIZE IMPROVEMENTS */

/* General paragraph descriptions */
p {
    font-size: 16px;
    line-height: 1.8;
}

/* Course descriptions */
.course-body p {
    font-size: 16px;
    line-height: 1.8;
}

/* About section descriptions */
.intro-text p {
    font-size: 17px;
    line-height: 1.9;
}

/* Mission, Vision and Purpose descriptions */
.purpose-card p {
    font-size: 16px;
    line-height: 1.8;
}

/* Service descriptions */
.service-row p,
.beans-description p {
    font-size: 16px;
    line-height: 1.8;
}

/* Video descriptions */
.video-caption p {
    font-size: 15px;
    line-height: 1.7;
}

/* Contact and registration descriptions */
.contact p,
.register-copy p {
    font-size: 16px;
    line-height: 1.8;
}

/* Mobile font adjustment */
@media (max-width: 600px) {
    p {
        font-size: 15px;
        line-height: 1.7;
    }

    .intro-text p,
    .course-body p,
    .purpose-card p,
    .service-row p,
    .beans-description p {
        font-size: 15px;
    }
}

/* SECTION LABELS AND EYEBROW TEXT */

.section-kicker {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
}

.eyebrow {
    font-size: 14px;
    letter-spacing: 1.8px;
    font-weight: 600;
}

/* Hero small heading */
.hero-content .eyebrow {
    font-size: 15px;
}

/* Mission, vision and purpose labels */
.purpose-card .eyebrow {
    font-size: 14px;
}

/* Mobile view */
@media (max-width: 600px) {
    .section-kicker,
    .eyebrow {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .hero-content .eyebrow {
        font-size: 13px;
    }
}

/* COFFEE BEANS - SERVICE NUMBER 05 */

.service-beans-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    width: 100%;
}

.service-beans-content img {
    width: 150px;
    height: 105px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .service-beans-content img {
        width: 110px;
        height: 85px;
    }
}

/* CONTACT PHONE NUMBERS */

.contact-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 20px;
}

.contact-phone b {
    margin-bottom: 4px;
}

.contact-phone a {
    display: inline-block;
    line-height: 1.6;
}

.contact-phone a:nth-of-type(even) {
    font-size: 13px;
}

/* FOOTER SOCIAL MEDIA ICONS */

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin: 20px 0;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    transition: 0.3s ease;
}

.footer-socials a:hover {
    background: #b18a55;
    border-color: #b18a55;
    transform: translateY(-3px);
}

.footer-socials svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.footer-socials a:nth-child(2) svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.footer-socials .social-dot {
    fill: currentColor;
    stroke: none;
}

/* FLOATING WHATSAPP BUTTON POSITION */


/* FLOATING WHATSAPP ICON */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 85px;
    z-index: 9999;

    width: 58px;
    height: 58px;
    border-radius: 50%;

    background: #25D366;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: 0.3s ease;
}

.whatsapp-float svg {
    width: 34px;
    height: 34px;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    background: #1ebe5d;
}

@media (max-width: 600px) {
    .whatsapp-float {
        right: 15px;
        bottom: 75px;
        width: 54px;
        height: 54px;
    }

    .whatsapp-float svg {
        width: 31px;
        height: 31px;
    }
}


/* HIGHLIGHTED SPECIAL PROGRAMS */
.special-programs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 35px;
}

.special-program-card {
    background: #f4eee5;
    border: 1px solid #d8c5a8;
    border-radius: 12px;
    padding: 28px;
    transition: 0.3s ease;
}

.special-program-card:hover {
    transform: translateY(-4px);
    border-color: #a9824e;
    box-shadow: 0 8px 22px rgba(70, 48, 25, 0.08);
}

.special-label {
    display: inline-block;
    color: #98713f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.special-program-card h3 {
    color: #493322;
    margin-bottom: 12px;
}

.special-program-card p {
    color: #6d6257;
    line-height: 1.7;
    font-size: 14px;
}

.special-program-card a {
    display: inline-block;
    margin-top: 12px;
    color: #98713f;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 600px) {
    .special-programs {
        grid-template-columns: 1fr;
    }
}

/* STUDENT VIDEO THUMBNAILS */
.video-card video {
    display: block;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    background: #241a14;
    border-radius: 10px;
}

/* STUDENT VIDEO THUMBNAIL GALLERY */
.video-thumbnail {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 12px;
    background: #241a14;
    cursor: pointer;
}

.video-thumbnail > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #493322;
    font-size: 25px;
    cursor: pointer;
    z-index: 2;
}

.video-thumbnail video {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 3;
}

.video-thumbnail.playing img,
.video-thumbnail.playing .video-play {
    display: none;
}

.video-thumbnail.playing video {
    display: block;
}

/* CONTACT WHATSAPP ICONS */
.contact-number {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.contact-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #25D366;
    transition: 0.2s ease;
}

.contact-whatsapp svg {
    width: 23px;
    height: 23px;
}

.contact-whatsapp:hover {
    transform: scale(1.15);
    color: #1ebe5d;
}