/* =====================================================
   ROOT
===================================================== */

:root{
    --purple: rgb(0, 156, 39);
    --purple-dark: rgb(0, 130, 33);

    --orange: rgb(8, 100, 254);
    --orange-dark: rgb(6, 80, 210);

    --black:#171717;
    --white:#ffffff;
    --light:#fafafa;
}

/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
    width:100%;
}

body{
    font-family:"DM Sans",sans-serif;
    background:#fff;
    color:#171717;
    overflow-x:hidden;
    width:100%;
    max-width:100vw;
    padding-top:95px;
}

a{
    text-decoration:none;
    color:inherit;
}

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

button{
    font-family:inherit;
}

/* =====================================================
   COMMON CONTAINERS
===================================================== */

.nav-container,
.hero-container,
.highlight-container,
.about-container,
.footer-container{
    width:calc(100% - 120px);
    max-width:1380px;
    margin:auto;
}

/* =====================================================
   HEADER
===================================================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    border-bottom:1px solid #eeeeee;
    z-index:9999;
}

.nav-container{
    width:92%;
    max-width:1280px;
    margin:0 auto;
    display:flex;
    align-items:center;
    min-height:95px;
    position:relative;
    background:transparent;
}

/* =====================================================
   CIAT LOGO
===================================================== */

.logo{
    width:270px;
    height:105px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-shrink:0;
    overflow:hidden;
}

.logo img{
    width:115%;
    height:115%;
    object-fit:contain;
    object-position:center;
    display:block;
}

/* =====================================================
   NAVIGATION
===================================================== */

.navigation{
    display:flex;
    align-items:center;
    gap:36px;
    margin-left:auto;
}

.navigation > a,
.nav-dropdown > a{
    font-family:"Nunito Sans",sans-serif;
    font-size:17px;
    font-weight:600;
    color:#111;
    white-space:nowrap;
    transition:color .25s ease, transform .25s ease;
}

.navigation > a:hover,
.nav-dropdown > a:hover{
    color:var(--orange);
}

/* =====================================================
   COURSES DROPDOWN
===================================================== */

.nav-dropdown{
    position:static;
}

.nav-dropdown > a{
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
}

.nav-dropdown > a i{
    font-size:10px;
    transition:transform .25s ease;
}

.nav-dropdown > a.active i{
    transform:rotate(180deg);
}

/* =====================================================
   MEGA MENU
===================================================== */

.mega-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    min-height:410px;
    background:#fff;
    display:grid;
    grid-template-columns:.75fr 2fr 1.25fr;
    border-top:1px solid #eeeeee;
    box-shadow:0 18px 40px rgba(0,0,0,.10);
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.mega-menu.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =====================================================
   MEGA LEFT
===================================================== */

.mega-left{
    position:relative;
    min-height:410px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
}

.learn-title{
    position:relative;
    z-index:2;
    font-family:"Nunito Sans",sans-serif;
    font-size:48px;
    line-height:.86;
    font-weight:800;
    text-align:center;
    color:var(--orange);
    transform:rotate(-4deg);
}

.learn-title span{
    display:block;
    color:var(--purple);
}

.learn-dots{
    position:absolute;
    width:170px;
    height:170px;
    right:15px;
    bottom:20px;
    border-radius:50%;
    opacity:.20;
    background:radial-gradient(circle, var(--orange) 2px, transparent 3px);
    background-size:18px 18px;
}

/* =====================================================
   MEGA COURSES
===================================================== */

.mega-courses{
    padding:45px 28px;
    border-left:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
}

.mega-courses h3{
    font-size:20px;
    font-weight:500;
    color:#111;
    margin-bottom:18px;
}

.course-menu-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.course-menu-card{
    min-height:98px;
    padding:17px 15px;
    border:1px solid #e4e4e4;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
    background:#fff;
    transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.course-menu-card:hover{
    border-color:#c8e7d0;
    background:#f6fdf8;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,156,39,.08);
}

.course-menu-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:var(--purple);
    font-size:21px;
}

.course-menu-card span{
    font-size:15px;
    color:#171717;
    line-height:1.25;
}

/* =====================================================
   CERTIFICATION
===================================================== */

.mega-certification{
    min-height:410px;
    padding:45px 35px;
    background:#f7f7f7;
}

.mega-certification h3{
    font-size:18px;
    font-weight:500;
    color:#111;
    margin-bottom:20px;
}

.mega-certification > a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#333;
    font-size:15px;
    margin-bottom:14px;
    transition:.25s;
}

.mega-certification > a:hover{
    color:var(--purple);
    transform:translateX(3px);
}

.mega-certification > a span{
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mega-certification > a i{
    color:var(--purple);
    font-size:17px;
}

.mega-certification .view-more{
    display:inline-flex;
    margin-top:10px;
    font-weight:500;
}

/* =====================================================
   ENQUIRY BUTTON
===================================================== */

.enquiry-btn{
    min-width:123px;
    margin-left:45px;
    flex-shrink:0;
    padding:12px 28px;
    text-align:center;
    background:var(--orange);
    color:#fff;
    border-radius:30px;
    font-size:16px;
    font-weight:600;
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.enquiry-btn:hover{
    background:var(--orange-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(8,100,254,.25);
}

.mobile-enquiry-btn{
    display:none;
}

/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle{
    display:none;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:100000;
}

.menu-toggle span{
    display:block;
    width:27px;
    height:3px;
    margin:3px 0;
    border-radius:5px;
    background:#222;
    transition:transform .3s ease, opacity .3s ease;
}

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px, -6px);
}

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

.hero{
    position:relative;
    background:#fff;
    min-height:580px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero-container{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:30px;
    padding:65px 0 35px;
}

.hero-content{
    padding-left:40px;
}

.hero-content h1{
    font-family:"Nunito Sans",sans-serif;
    color:var(--purple);
    font-size:clamp(48px,5vw,70px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
}

.hero-content h2{
    font-family:"Nunito Sans",sans-serif;
    color:var(--orange);
    font-size:clamp(34px,3.5vw,52px);
    font-weight:700;
    line-height:1.15;
    margin-top:8px;
}

.hero-content h3{
    font-size:24px;
    font-weight:500;
    color:#151515;
    margin-top:18px;
}

.hero-content p{
    max-width:700px;
    margin-top:20px;
    color:#333;
    font-size:18px;
    line-height:1.7;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:35px;
}

.brochure-btn{
    padding:13px 27px;
    display:flex;
    align-items:center;
    gap:7px;
    border-radius:28px;
    background:var(--purple);
    color:#fff;
    font-size:16px;
    transition:.3s;
}

.brochure-btn:hover{
    background:var(--purple-dark);
    transform:translateY(-2px);
}

.social{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:19px;
    transition:.3s;
}

.social:hover{
    transform:translateY(-4px);
    box-shadow:0 7px 18px rgba(0,0,0,.15);
}

.social.whatsapp{ background:#20c976; }
.social.instagram{ background:#e1306c; }
.social.facebook{ background:#287be0; }

.hero-image{
    position:relative;
    height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-image img{
    position:relative;
    z-index:2;
    width:100%;
    max-width:580px;
    height:500px;
    object-fit:contain;
}

.hero-image-bg{
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(246,160,26,.08), transparent 65%);
}

/* =====================================================
   HIGHLIGHTS
===================================================== */

.highlights{ padding:0 0 80px; }

.highlight-container{
    display:grid;
    grid-template-columns:1fr 2fr 1fr 1fr;
    gap:12px;
}

.highlight-card{
    position:relative;
    height:230px;
    overflow:hidden;
    border-radius:15px;
    background:#eee;
}

.highlight-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.highlight-card:hover img{ transform:scale(1.05); }

.card-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:25px 20px;
    color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.82));
}

.card-overlay span{ font-size:10px; letter-spacing:1px; }
.card-overlay h3{ font-size:18px; margin-top:5px; }

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

.about{ padding:100px 0; background:#fafafa; }

.about-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-image{ overflow:hidden; border-radius:18px; }

.about-image img{
    width:100%;
    height:450px;
    object-fit:cover;
    transition:.5s;
}

.about-image:hover img{ transform:scale(1.03); }

.small-title{
    color:var(--orange);
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.about-content h2{
    font-family:"Nunito Sans",sans-serif;
    color:var(--purple);
    font-size:52px;
    line-height:1.1;
    margin-top:15px;
}

.about-content h2 span{ display:block; color:var(--orange); }

.about-content p{
    color:#555;
    font-size:16px;
    line-height:1.8;
    margin-top:25px;
}

.learn-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:25px;
    padding:13px 22px;
    border-radius:25px;
    background:var(--purple);
    color:#fff;
    transition:.3s;
}

.learn-btn:hover{ background:var(--purple-dark); transform:translateY(-2px); }
.learn-btn i{ transition:.3s; }
.learn-btn:hover i{ transform:translateX(5px); }

/* =====================================================
   FLOATING BUTTONS
===================================================== */

.floating-buttons{
    position:fixed;
    left:30px;
    bottom:25px;
    z-index:900;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.call-btn,
.floating-whatsapp{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:23px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.call-btn{ background:var(--orange); }
.floating-whatsapp{ background:#18c96e; }

.call-btn:hover,
.floating-whatsapp:hover{ transform:scale(1.08); }

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

footer{
    padding:70px 0 50px;
    background:var(--purple);
    color:#fff;
}

.footer-container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:70px;
}

.footer-logo{ width:150px; margin-bottom:20px; }
.footer-container h3{ margin-bottom:18px; }
.footer-container p{ color:#ddd; line-height:1.7; }

.footer-container a{
    display:block;
    color:#ddd;
    margin-bottom:10px;
    transition:.3s;
}

.footer-container a:hover{ color:#fff; transform:translateX(4px); }

/* =========================================================
   CIAT COURSES SECTION
========================================================= */

.ciat-course-section{
    width:100%;
    padding:35px 0 40px;
    background:#fff;
    overflow:hidden;
}
.course-top{
    width:92%;
    max-width:1280px;
    margin:0 auto 55px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.course-title h2{
    margin:0;
    max-width:850px;
    font-family:"Nunito Sans",sans-serif;
    font-size:48px;
    line-height:1.15;
    font-weight:400;
    color:#111;
}

.course-title h2 span{ display:block; color:var(--orange); }

.explore-btn{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:12px 24px;
    border:2px solid #111;
    border-radius:30px;
    background:#fff;
    color:#111;
    font-family:"Nunito Sans",sans-serif;
    font-size:16px;
    font-weight:500;
    white-space:nowrap;
    transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.explore-btn span{ font-size:20px; line-height:1; transition:.3s; }

.explore-btn:hover{
    background:#111;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.explore-btn:hover span{ transform:translateX(5px); }

.course-cards{
    width:92%;
    max-width:1280px;
    margin:auto;
    display:flex;
    align-items:stretch;
    gap:8px;
    height:500px;
}

.course-item{
    position:relative;
    flex:1 1 0;
    min-width:0;
    height:100%;
    overflow:hidden;
    border-radius:18px;
    background:#eee;
    cursor:pointer;
    z-index:1;
    transition:flex .6s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}

.course-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
}

.course-dark{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(to bottom, rgba(0,0,0,.02) 20%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.82) 100%);
    transition:.4s;
}

.course-arrow{
    position:absolute;
    top:22px; right:18px;
    width:38px; height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.25);
    backdrop-filter:blur(5px);
    color:#fff;
    font-size:20px;
    z-index:3;
    transition:.35s;
}

.course-name{
    position:absolute;
    left:22px; right:18px; bottom:25px;
    z-index:3;
    color:#fff;
    font-family:"Nunito Sans",sans-serif;
    font-size:20px;
    line-height:1.2;
    font-weight:700;
    transition:.35s;
}

/* =====================================================
   COURSE ITEM HOVER — DESKTOP / MOUSE ONLY
   Wrapped in (hover:hover) and (pointer:fine) so touch
   devices never get a "stuck" expanded card after tap.
===================================================== */
@media(hover:hover) and (pointer:fine){
    .course-item:hover{
        flex:2.2 1 0;
        z-index:20;
        box-shadow:0 18px 40px rgba(0,0,0,.25);
    }
    .course-item:hover img{ transform:scale(1.02); }
    .course-item:hover .course-arrow{
        background:var(--orange);
        transform:rotate(-45deg) scale(1.06);
    }
    .course-item:hover .course-name{
        transform:translateY(-5px);
        font-size:23px;
    }
}

@media(max-width:1100px){
    .nav-container, .hero-container, .highlight-container, .about-container, .footer-container{ width:calc(100% - 60px); }
    .logo{ width:190px; height:90px; }
    .navigation{ gap:23px; margin-right:25px; }
    .navigation > a, .nav-dropdown > a{ font-size:14px; }
    .enquiry-btn{ min-width:100px; padding:11px 20px; font-size:14px; }
    .hero-content{ padding-left:10px; }
    .hero-content h1{ font-size:50px; }
    .hero-content h2{ font-size:36px; }
    .highlight-container{ grid-template-columns:1fr 1fr; }
    .mega-menu{ grid-template-columns:.6fr 2fr 1.1fr; }
    .mega-courses{ padding:35px 18px; }
    .mega-certification{ padding:35px 25px; }
    .course-top{ width:calc(100% - 60px); }
    .course-cards{ width:calc(100% - 60px); height:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .course-item{ height:260px; }
    .course-title h2{ font-size:40px; }
    .course-name{ font-size:17px; }
}

@media(max-width:1100px) and (hover:hover) and (pointer:fine){
    .course-item:hover .course-name{ font-size:20px; }
}

/* =========================================================
   CAREER SECTION
========================================================= */

.career-left{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.career-heading{ text-align:center; margin-bottom:25px; }

.career-heading h2{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:42px;
    line-height:1.1;
    font-weight:500;
    color:#5f4a96;
}

.career-heading p{
    margin:7px 0 0;
    font-family:"Nunito Sans",sans-serif;
    font-size:23px;
    line-height:1.3;
    font-weight:500;
    color:#5f4a96;
}

.career-info-card{
    position:relative;
    padding:22px 20px;
    border-radius:20px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-width:0;
}

.career-info-card h3{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:22px;
    line-height:1.2;
    font-weight:500;
    color:#171717;
}

.career-info-card p{
    margin:15px 0 0;
    font-family:"Nunito Sans",sans-serif;
    font-size:14px;
    line-height:1.6;
    color:#555;
}

.purple-card{ grid-column:1; grid-row:1; background:#d8c8ff; }

.career-image-card{
    grid-column:2; grid-row:1;
    padding:0;
    border-radius:20px;
    overflow:hidden;
}

.career-image-card img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}

.orange-card{ grid-column:3; grid-row:1; background:#ffd18d; }

.white-card{
    grid-column:2; grid-row:2;
    background:#fff;
    border:1px solid #222;
}

.career-decoration{
    grid-column:1; grid-row:2;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:transparent;
    border-radius:20px;
}

.career-decoration img{
    width:65%; height:65%;
    object-fit:contain;
    display:block;
    animation:holoRotate 8s linear infinite;
}

@keyframes holoRotate{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}

.gradient-card{ overflow:hidden; border-radius:30px; }

.gradient-card img{
    width:100%; height:100%;
    display:block;
    object-fit:cover;
    border-radius:30px;
}

.placement-track{
    width:100%;
    height:max-content;
    display:flex;
    flex-direction:column;
    gap:12px;
    flex-shrink:0;
    will-change:transform;
}

.placement-up{ animation:placementUp 20s linear infinite; }
.placement-down{ animation:placementDown 20s linear infinite; }

@keyframes placementUp{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }
}

@keyframes placementDown{
    from{ transform:translateY(-50%); }
    to{ transform:translateY(0); }
}

.placement-slider:hover .placement-track{ animation-play-state:paused; }

@media(max-width:1100px){ .career-left{ padding:0; } }

@media(max-width:700px){
    .career-left{ padding:0; }
    .career-heading{ margin-bottom:25px; }
    .career-heading h2{ font-size:34px; }
    .career-heading p{ font-size:20px; }
    .purple-card{ grid-column:1; grid-row:1; }
    .career-image-card{ grid-column:2; grid-row:1; }
    .orange-card{ grid-column:1 / 3; grid-row:2; }
    .white-card{ grid-column:1; grid-row:3; }
    .career-decoration{ grid-column:2; grid-row:3; }
    .gradient-card{ display:none; }
}

/* =====================================================
   COURSE CARDS — MOBILE + PHABLET (single breakpoint)
   Extended to 767px so phones/phablets in the old
   501–767px gap don't get 6 squished flex:1 columns.
===================================================== */
@media(max-width:767px){
    .course-top{ width:calc(100% - 30px); flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:35px; }
    .course-title h2{ font-size:29px; }
    .explore-btn{ font-size:15px; padding:11px 21px; }
    .course-cards{
        width:calc(100% - 30px);
        height:auto !important;
        display:flex !important;
        flex-direction:column !important;
        overflow-x:visible !important;
        overflow-y:visible !important;
        gap:16px !important;
    }
    .course-item{
        flex:0 0 auto !important;
        width:100% !important;
        height:210px !important;
    }
    .course-name{ left:20px; bottom:20px; font-size:20px; }
    .course-arrow{ top:20px; right:20px; width:38px; height:38px; }
}

@media(max-width:767px) and (hover:hover) and (pointer:fine){
    .course-item:hover{ flex:0 0 275px; }
    .course-item:hover .course-name{ font-size:20px; }
}

@media(max-width:500px){
    .logo{ width:155px; height:68px; }
    .hero-content h1{ font-size:37px; letter-spacing:-1px; }
    .hero-content h2{ font-size:27px; }
    .hero-content h3{ font-size:18px; }
    .hero-content p{ font-size:15px; line-height:1.6; }
    .hero-image{ height:330px; }
    .hero-image img{ height:330px; }
    .highlight-container{ grid-template-columns:1fr; }
    .highlight-card{ height:220px; }
    .about{ padding:75px 0; }
    .about-image img{ height:340px; }
    .about-content h2{ font-size:38px; }
    .floating-buttons{ left:15px; bottom:18px; }
    .call-btn, .floating-whatsapp{ width:50px; height:50px; font-size:21px; }
    footer{ padding:55px 0 35px; }
    .ciat-course-section{ padding:60px 0 70px; }
    .career-heading h2{ font-size:30px; }
    .career-heading p{ font-size:18px; }
    .career-info-card{ padding:18px 16px; }
    .career-info-card h3{ font-size:19px; }
    .career-info-card p{ font-size:13px; }
}

/* =========================================================
   CIAT PHOTO SHOWCASE
========================================================= */

.ciat-showcase{
    width:100%;
    padding:80px 0 90px;
    background:#ffffff;
    overflow:hidden;
}

.showcase-container{
    width:92%;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.85fr 1.7fr .85fr;
    grid-auto-rows:275px;
    gap:14px;
}

.showcase-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#eeeeee;
    min-width:0;
}

.showcase-card img{
    width:100%; height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .5s ease;
}

.showcase-card:hover img{ transform:scale(1.06); }

.showcase-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:20px;
    color:#fff;
    background:linear-gradient(transparent, rgba(0,0,0,.78));
    z-index:2;
}

.showcase-overlay span{
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.showcase-overlay h3{ font-size:17px; line-height:1.25; margin-top:5px; }

.small-card:nth-of-type(1){ grid-column:1; grid-row:1; }

.large-card{
    grid-column:2;
    grid-row:1 / 3;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:50px;
    background:#111111;
}

.small-card:nth-of-type(3){ grid-column:3; grid-row:1; }
.bottom-card:nth-of-type(4){ grid-column:1; grid-row:2; }
.bottom-card:nth-of-type(5){ grid-column:2; grid-row:2; }
.bottom-card:nth-of-type(6){ grid-column:3; grid-row:2; }

.large-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(0,156,39,.22), transparent 65%);
}

.showcase-content{ position:relative; z-index:2; max-width:520px; }

.showcase-tag{
    display:inline-block;
    margin-bottom:15px;
    font-family:"Nunito Sans",sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--purple);
}

.showcase-content h2{
    margin:0 0 18px;
    font-family:"Nunito Sans",sans-serif;
    font-size:42px;
    line-height:1.15;
    font-weight:700;
    color:#ffffff;
}

.showcase-content h2 strong{ color:var(--purple); }

.showcase-content p{
    margin:0 auto 25px;
    max-width:470px;
    font-family:"Nunito Sans",sans-serif;
    font-size:16px;
    line-height:1.7;
    color:#dddddd;
}

.showcase-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 24px;
    border-radius:30px;
    background:var(--purple);
    color:#ffffff;
    font-family:"Nunito Sans",sans-serif;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
}

.showcase-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.20);
}

.showcase-btn i{ transition:.3s ease; }
.showcase-btn:hover i{ transform:translateX(5px); }

.small-card::after,
.bottom-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.35), transparent 60%);
    pointer-events:none;
}

@media(max-width:900px){
    .showcase-container{ grid-template-columns:1fr 1fr; grid-auto-rows:300px; }
    .large-card{ grid-column:1 / 3; grid-row:1; }
    .small-card:nth-of-type(1){ grid-column:1; grid-row:2; }
    .small-card:nth-of-type(3){ grid-column:2; grid-row:2; }
    .bottom-card:nth-of-type(4){ grid-column:1; grid-row:3; }
    .bottom-card:nth-of-type(5){ grid-column:2; grid-row:3; }
    .bottom-card:nth-of-type(6){ grid-column:1 / 3; grid-row:4; }
    .showcase-content h2{ font-size:36px; }
}

@media(max-width:600px){
    .ciat-showcase{ padding:55px 0 65px; }
    .showcase-container{ width:92%; display:grid; grid-template-columns:1fr; grid-auto-rows:auto; gap:12px; }
    .large-card, .small-card, .bottom-card{ grid-column:1 !important; grid-row:auto !important; }
    .large-card{ min-height:380px; padding:30px 22px; }
    .small-card, .bottom-card{ height:260px; }
    .showcase-content h2{ font-size:30px; }
    .showcase-content p{ font-size:14px; }
}

@media(max-width:768px){
    body{ padding-top:90px; }
    .nav-container, .hero-container, .highlight-container, .about-container, .footer-container{ width:calc(100% - 30px); }
    .nav-container{ min-height:90px; }
    .logo{ width:175px; height:75px; }
    .menu-toggle{ display:flex; margin-left:auto; }
    .navigation{
        position:absolute; top:100%; left:0; width:100%; margin:0; padding:20px 24px;
        display:none; flex-direction:column; align-items:flex-start; gap:0;
        background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.12);
        z-index:99998;
        border-top:1px solid #eee;
    }
    .navigation.show-mobile{ display:flex; }
    .navigation > a, .nav-dropdown > a{ width:100%; padding:13px 0; font-size:16px; border-bottom:1px dashed #f0f0f0; }
    .nav-dropdown{ width:100%; }
    .enquiry-btn{ display:none; }
    .mobile-enquiry-btn{
        display:inline-block;
        width:100%;
        margin-top:18px;
        padding:12px 24px;
        text-align:center;
        background:var(--orange);
        color:#fff !important;
        border-radius:30px;
        font-size:16px;
        font-weight:600;
        transition:background .3s ease;
    }
    .mobile-enquiry-btn:hover{
        background:var(--orange-dark);
    }
    .mega-menu{
        position:relative; top:auto; left:auto; width:100%; min-height:auto;
        display:none; grid-template-columns:1fr; box-shadow:none;
        border-top:1px solid #eee; transform:none; opacity:1; visibility:visible;
    }
    .mega-menu.show{ display:block; }
    .mega-left{ display:none; }
    .mega-courses{ padding:20px 0; border:0; }
    .mega-courses h3{ font-size:18px; }
    .course-menu-grid{ grid-template-columns:1fr 1fr; }
    .course-menu-card{ min-height:85px; }
    .mega-certification{ min-height:auto; padding:20px; }
    .hero-container{ grid-template-columns:1fr; padding-top:55px; }
    .hero-content{ padding-left:0; text-align:center; }
    .hero-content h1{ font-size:44px; }
    .hero-content h2{ font-size:31px; }
    .hero-content h3{ font-size:20px; }
    .hero-content p{ margin-left:auto; margin-right:auto; font-size:16px; }
    .hero-actions{ justify-content:center; flex-wrap:wrap; }
    .hero-image{ height:390px; }
    .hero-image img{ height:390px; }
    .about-container{ grid-template-columns:1fr; gap:50px; }
    .about-content{ text-align:center; }
    .footer-container{ grid-template-columns:1fr; gap:40px; }
}

/* =====================================================
   WHY CIAT SECTION
===================================================== */

.why-ciat{ width:100%; padding:90px 0 100px; background:#f8f5ff; overflow:hidden; }

.why-ciat-container{ width:92%; max-width:1380px; margin:auto; }

.why-ciat-top{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:45px;
}

.why-ciat-label{
    display:block;
    margin-bottom:10px;
    font-family:"Nunito Sans",sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--orange);
}

.why-ciat-top h2{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:48px;
    line-height:1.1;
    font-weight:500;
    color:#111;
}

.why-ciat-top h2 span{ color:var(--purple); }

.why-ciat-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border:1px solid #222;
    border-radius:30px;
    background:#fff;
    color:#222;
    font-size:15px;
    font-weight:500;
    white-space:nowrap;
    transition:.3s ease;
}

.why-ciat-btn i{ transition:.3s ease; }
.why-ciat-btn:hover{ background:#111; color:#fff; transform:translateY(-2px); }
.why-ciat-btn:hover i{ transform:translateX(5px); }

.why-ciat-features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:90px;
}

.why-feature-card{
    position:relative;
    height:250px;
    overflow:hidden;
    border-radius:22px;
    background:#ddd;
    cursor:pointer;
}

.why-feature-card img{
    width:100%; height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease, filter .6s ease;
}

.why-feature-card:hover img{ transform:scale(1.07); filter:brightness(.85); }

.why-feature-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-start;
    padding:25px;
    background:linear-gradient(to bottom, rgba(20,10,40,.65), transparent 65%);
    color:#fff;
}

.why-feature-overlay h3{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:21px;
    line-height:1.25;
    font-weight:600;
}

/* Video banner - matches .showcase-large in the HTML */
.showcase-large{
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
    border-radius:35px;
    background:#111;
}

.showcase-large video{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    opacity:.78;
    transition:transform .7s ease;
}

.showcase-large:hover video{ transform:scale(1.03); }

.showcase-large::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(10,35,15,.88), rgba(10,35,15,.35), transparent);
}

.why-banner-content{
    position:absolute;
    left:60px; top:50%;
    transform:translateY(-50%);
    z-index:2;
    max-width:500px;
    color:#fff;
}

.why-banner-content span{ font-size:12px; font-weight:700; letter-spacing:2px; color:#fff; }

.why-banner-content h2{
    margin:15px 0;
    font-family:"Nunito Sans",sans-serif;
    font-size:48px;
    line-height:1.1;
    font-weight:400;
}

.why-banner-content h2 strong{ color:#d8c8ff; }

.why-banner-content p{
    max-width:450px;
    margin-bottom:25px;
    font-size:16px;
    line-height:1.7;
    color:#eeeeee;
}

.why-banner-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 24px;
    border-radius:30px;
    background:var(--orange);
    color:#fff;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
}

.why-banner-content a:hover{ transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.2); }
.why-banner-content a i{ transition:.3s; }
.why-banner-content a:hover i{ transform:translateX(5px); }

@media(max-width:1000px){
    .why-ciat-features{ grid-template-columns:1fr 1fr; }
    .why-feature-card{ height:230px; }
    .why-ciat-top h2{ font-size:40px; }
    .showcase-large{ height:450px; }
    .why-banner-content{ left:40px; }
}

@media(max-width:600px){
    .why-ciat{ padding:65px 0 75px; }
    .why-ciat-top{ flex-direction:column; align-items:flex-start; margin-bottom:30px; }
    .why-ciat-top h2{ font-size:32px; }
    .why-ciat-btn{ font-size:14px; }
    .why-ciat-features{ grid-template-columns:1fr 1fr; gap:10px; margin-bottom:50px; }
    .why-feature-card{ height:190px; border-radius:16px; }
    .why-feature-overlay{ padding:16px; }
    .why-feature-overlay h3{ font-size:16px; }
    .showcase-large{ height:430px; border-radius:24px; }
    .why-banner-content{ left:25px; right:25px; }
    .why-banner-content h2{ font-size:34px; }
    .why-banner-content p{ font-size:14px; }
}

/* =========================================================
   FINAL LAYOUT FIXES
========================================================= */

html, body{ width:100%; min-height:100%; }
body{ padding-top:95px !important; }

.header{ position:fixed !important; top:0 !important; left:0 !important; width:100% !important; z-index:99999 !important; }
.nav-container{ position:relative !important; min-height:95px !important; }

.hero{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    min-height:620px !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    clear:both !important;
}

.hero-container{
    position:relative !important;
    z-index:2 !important;
    width:92% !important;
    max-width:1380px !important;
    margin:0 auto !important;
    padding:55px 0 !important;
}

.hero-content{
    position:relative !important;
    z-index:5 !important;
    width:100% !important;
    padding-left:40px !important;
}

.hero-content h1, .hero-content h2, .hero-content h3, .hero-content p{
    position:relative !important;
    display:block !important;
    float:none !important;
    clear:both !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

.hero-content h1{ margin:0 0 12px !important; }
.hero-content h2{ margin:0 0 18px !important; }
.hero-content h3{ margin:0 0 18px !important; }
.hero-content p{ margin:0 0 28px !important; }

.hero-actions{
    position:relative !important;
    z-index:10 !important;
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin:0 !important;
}

.hero-image{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:500px !important;
    overflow:hidden !important;
}

.hero-image img{
    position:relative !important;
    z-index:3 !important;
    display:block !important;
    width:100% !important;
    max-width:580px !important;
    height:500px !important;
    object-fit:contain !important;
}

.ciat-showcase{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    clear:both !important;
    margin:0 !important;
    padding:80px 0 !important;
    background:#fff !important;
}

.showcase-container{
    position:relative !important;
    z-index:3 !important;
    width:min(1280px,92%) !important;
    margin:0 auto !important;
}

.showcase-card{ position:relative !important; overflow:hidden !important; border-radius:20px !important; }

.showcase-card img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:20px !important;
    transition:transform .6s ease,filter .6s ease !important;
}

.showcase-card:hover img{ transform:scale(1.08) !important; }

.ciat-course-section{ position:relative !important; z-index:2 !important; clear:both !important; overflow:hidden !important; }
.course-cards{ overflow:visible !important; }
.course-item{ min-width:0 !important; }

.career-section{
    width:100%;
    background:#fff7ed;
    overflow:hidden;
    position:relative;
    clear:both;
    padding:65px 0;
}

.career-container{
    width:92% !important;
    max-width:1380px;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto !important;
    background:transparent !important;
    display:grid !important;
    grid-template-columns:1.35fr .65fr !important;
    gap:40px !important;
    align-items:stretch !important;
}

.career-left{ min-width:0; display:flex; flex-direction:column; justify-content:center; padding:0 !important; }

.career-info-grid{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important;
    grid-template-rows:240px 240px !important;
    gap:10px !important;
    align-items:stretch !important;
}

.career-info-card{ position:relative; min-width:0; min-height:0; overflow:hidden; border-radius:22px !important; }
.career-image-card{ padding:0 !important; overflow:hidden !important; border-radius:22px !important; }

.career-image-card img{
    width:100% !important; height:100% !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:22px !important;
}

.gradient-card, .gradient-card img{ overflow:hidden !important; border-radius:30px !important; }
.gradient-card{ padding:0 !important; }

.gradient-card img{
    width:100% !important; height:100% !important;
    display:block !important;
    object-fit:cover !important;
}

.career-decoration{ overflow:hidden !important; border-radius:22px !important; }

.career-decoration img{
    width:60% !important; height:60% !important;
    object-fit:contain !important;
    display:block !important;
    animation:holoRotate 8s linear infinite !important;
}

.placement-slider{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    overflow:hidden !important;
    position:relative !important;
    align-self:stretch !important;
}

.placement-track{
    width:100%;
    height:max-content;
    min-height:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
    flex-shrink:0;
    will-change:transform;
}

.placement-card{
    width:100% !important;
    height:175px !important;
    flex:0 0 175px !important;
    overflow:hidden !important;
    border-radius:15px !important;
    background:#fff !important;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.placement-card img{
    width:100% !important; height:100% !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;
}

.placement-slider:hover .placement-track{ animation-play-state:paused !important; }

@media(max-width:1100px){
    .nav-container, .hero-container, .highlight-container, .about-container, .footer-container{ width:calc(100% - 60px); }
    .career-section{ padding:55px 0; }
    .career-container{ width:calc(100% - 60px) !important; grid-template-columns:1fr 1fr !important; gap:25px !important; }
    .career-info-grid{ grid-template-columns:1fr 1fr 1fr !important; grid-template-rows:210px 210px !important; }
    .career-heading h2{ font-size:36px; }
    .career-heading p{ font-size:20px; }
    .placement-slider{ gap:10px !important; }
    .placement-card{ height:150px !important; flex-basis:150px !important; }
}

@media(max-width:768px){
    body{ padding-top:90px !important; }
    .nav-container{ min-height:90px !important; width:calc(100% - 30px) !important; }
    .hero{ min-height:auto !important; height:auto !important; }
    .hero-container{ width:calc(100% - 30px) !important; display:grid !important; grid-template-columns:1fr !important; gap:20px !important; padding:45px 0 !important; }
    .hero-content{ padding-left:0 !important; text-align:center !important; }
    .hero-content h1{ font-size:44px !important; }
    .hero-content h2{ font-size:32px !important; }
    .hero-content h3{ font-size:19px !important; }
    .hero-content p{ margin-left:auto !important; margin-right:auto !important; font-size:16px !important; }
    .hero-actions{ justify-content:center !important; }
    .hero-image{ height:380px !important; }
    .hero-image img{ height:380px !important; }
    .ciat-showcase{ padding:50px 0 !important; }
    .career-section{ padding:50px 0; }
    .career-container{ width:calc(100% - 30px) !important; display:flex !important; flex-direction:column !important; gap:35px !important; }
    .career-info-grid{ grid-template-columns:1fr 1fr !important; grid-template-rows:200px 200px 200px !important; }
    .career-heading h2{ font-size:32px; }
    .career-heading p{ font-size:19px; }
    .career-decoration img{ width:55% !important; height:55% !important; }
    .placement-slider{ width:100% !important; height:420px !important; min-height:420px !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:0 !important; }
    .placement-track{ gap:8px; }
    .placement-card{ height:150px !important; flex-basis:150px !important; border-radius:12px !important; }
}

@media(max-width:500px){
    .hero-container{ width:calc(100% - 24px) !important; }
    .hero-content h1{ font-size:37px !important; }
    .hero-content h2{ font-size:28px !important; }
    .hero-content h3{ font-size:18px !important; }
    .hero-content p{ font-size:15px !important; }
    .hero-image, .hero-image img{ height:330px !important; }
    .career-container{ width:calc(100% - 24px) !important; }
    .career-info-grid{ grid-template-columns:1fr !important; grid-template-rows:190px 190px 190px 190px !important; }
    .purple-card, .career-image-card, .orange-card, .white-card, .career-decoration, .gradient-card{ grid-column:auto !important; grid-row:auto !important; }
    .orange-card{ grid-column:auto !important; }
    .gradient-card{ display:flex !important; }
    .placement-slider{ height:380px !important; min-height:380px !important; grid-template-columns:1fr 1fr !important; }
    .placement-card{ height:135px !important; flex-basis:135px !important; }
}
/* =========================================================
   CIAT MENTORS SECTION
========================================================= */

.ciat-mentors{
    width:100%;
    padding:80px 0 100px;
    background:#fff;
    overflow:hidden;
}

.mentors-container{
    width:92%;
    max-width:1380px;
    margin:0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.mentors-heading{
    text-align:center;
    margin-bottom:45px;
}

.mentors-heading h2{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:48px;
    line-height:1.15;
    font-weight:400;
    color:#111;
}

.mentors-heading h2 span{
    color:var(--purple);
    margin-left:8px;
}


/* =========================================================
   MENTOR COLLAGE
========================================================= */

.mentors-collage{
    position:relative;
    width:100%;
    max-width:1250px;
    height:560px;
    margin:0 auto;
}


/* =========================================================
   COMMON CARD
========================================================= */

.mentor-card{
    position:absolute;
    width:130px;
    height:175px;
    overflow:hidden;
    border-radius:14px;
    background:#eee;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    z-index:3;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.mentor-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.mentor-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.17);
    z-index:20;
}


/* =========================================================
   LEFT SIDE
========================================================= */

/* Left top */
.mentor-1{
    left:10px;
    top:125px;
}

/* Left upper-middle */
.mentor-2{
    left:165px;
    top:55px;
}

/* Left middle */
.mentor-3{
    left:320px;
    top:105px;
}


/* =========================================================
   TOP CENTER
========================================================= */

.mentor-4{
    left:475px;
    top:15px;
}

.mentor-5{
    left:630px;
    top:15px;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

/* Right middle */
.mentor-6{
    left:785px;
    top:105px;
}

/* Right upper-middle */
.mentor-7{
    left:940px;
    top:55px;
}

/* Right top */
.mentor-8{
    left:1095px;
    top:125px;
}


/* =========================================================
   BOTTOM CARDS
========================================================= */

.mentor-9{
    left:165px;
    top:325px;
}

.mentor-10{
    left:940px;
    top:325px;
}


/* =========================================================
   CENTER TEXT
========================================================= */

.mentor-center-text{
    position:absolute;
    left:50%;
    top:330px;
    width:430px;
    transform:translate(-50%,-50%);
    text-align:center;
    z-index:2;
}

.mentor-center-text h3{
    margin:0;
    font-family:"Nunito Sans",sans-serif;
    font-size:38px;
    line-height:1.3;
    font-weight:400;
    color:#111;
}


/* =========================================================
   DECORATIVE PATTERN CARDS
========================================================= */

.mentor-pattern{
    position:absolute;
    width:130px;
    height:175px;
    border-radius:14px;
    overflow:hidden;
    z-index:1;

    background-color:var(--orange);

    background-image:
        linear-gradient(
            45deg,
            rgba(255,255,255,.30) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.30) 75%
        ),
        linear-gradient(
            45deg,
            rgba(255,255,255,.30) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,.30) 75%
        );

    background-size:42px 42px;
    background-position:0 0,21px 21px;

    box-shadow:0 12px 30px rgba(0,0,0,.10);
}


/* Left pattern */
.pattern-left{
    left:10px;
    top:330px;
}


/* Right pattern */
.pattern-right{
    left:1095px;
    top:330px;
}


/* =========================================================
   CENTER DOT EFFECT
========================================================= */

.mentors-collage::before{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    left:50%;
    top:230px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,156,39,.12) 2px,
            transparent 3px
        );

    background-size:18px 18px;

    z-index:0;
}


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

@media(max-width:1200px){

    .mentors-collage{
        transform:scale(.90);
        transform-origin:top center;
        margin-bottom:-55px;
    }

}


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

@media(max-width:1000px){

    .ciat-mentors{
        padding:70px 0 85px;
    }

    .mentors-heading h2{
        font-size:42px;
    }

    .mentors-collage{
        transform:scale(.78);
        margin-bottom:-120px;
    }

}


/* =========================================================
   MOBILE MENTOR GRID (<= 768px)
========================================================= */

@media(max-width:768px){

    .ciat-mentors{
        padding:50px 0 60px;
    }

    .mentors-container{
        width:92%;
    }

    .mentors-heading{
        margin-bottom:20px;
    }

    .mentors-heading h2{
        font-size:32px;
        line-height:1.2;
    }

    .mentors-heading h2 span{
        display:inline-block;
        margin-left:6px;
    }

    .mentors-collage{
        position:relative !important;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        display:grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap:12px !important;
        transform:none !important;
        margin:0 !important;
        overflow:visible !important;
    }

    .mentors-collage::before,
    .mentor-pattern{
        display:none !important;
    }

    .mentor-center-text{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        width:100% !important;
        max-width:100% !important;
        grid-column:1 / -1 !important;
        margin-bottom:12px !important;
        text-align:center !important;
    }

    .mentor-center-text h3{
        font-size:20px !important;
        line-height:1.35 !important;
        color:var(--orange) !important;
        font-weight:600 !important;
    }

    .mentor-card{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        height:160px !important;
        transform:none !important;
        animation:none !important;
        border-radius:14px !important;
        box-shadow:0 6px 20px rgba(0,0,0,.08) !important;
    }

}

@media(max-width:400px){
    .mentor-card{
        height:140px !important;
    }
    .mentor-center-text h3{
        font-size:18px !important;
    }
}
/* =========================================================
   MENTOR CARDS - FLOATING ANIMATION
========================================================= */

.mentor-card{
    animation: mentorFloat 5s ease-in-out infinite;
    will-change: transform;
}

/* Different movement for each card */

.mentor-1{
    animation-delay:0s;
}

.mentor-2{
    animation-delay:-1.2s;
}

.mentor-3{
    animation-delay:-2.4s;
}

.mentor-4{
    animation-delay:-.7s;
}

.mentor-5{
    animation-delay:-2s;
}

.mentor-6{
    animation-delay:-3.1s;
}

.mentor-7{
    animation-delay:-1.5s;
}

.mentor-8{
    animation-delay:-2.8s;
}

.mentor-9{
    animation-delay:-4s;
}

.mentor-10{
    animation-delay:-2.2s;
}


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

@keyframes mentorFloat{

    0%{
        transform:translateY(0);
    }

    25%{
        transform:translateY(-7px);
    }

    50%{
        transform:translateY(2px);
    }

    75%{
        transform:translateY(-5px);
    }

    100%{
        transform:translateY(0);
    }

}


/* =========================================================
   HOVER
========================================================= */

.mentor-card:hover{
    animation-play-state:paused;
    transform:translateY(-12px) scale(1.04);
    box-shadow:0 22px 45px rgba(0,0,0,.18);
    z-index:20;
}


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

.mentor-card img{
    transition:
        transform .6s ease,
        filter .6s ease;
}

.mentor-card:hover img{
    transform:scale(1.06);
    filter:brightness(1.04);
}


/* =========================================================
   SOFT SHADOW ANIMATION
========================================================= */

.mentor-card{
    box-shadow:
        0 10px 25px rgba(0,0,0,.09);
}

@keyframes mentorShadow{

    0%{
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }

    50%{
        box-shadow:0 18px 35px rgba(0,0,0,.14);
    }

    100%{
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }

}

.mentor-card{
    animation:
        mentorFloat 5s ease-in-out infinite,
        mentorShadow 5s ease-in-out infinite;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

    .mentor-card{
        animation:none !important;
    }

}

/* =========================================================
   INSTAGRAM / STUDENT SUCCESS SECTION
========================================================= */

.instagram-section{
    width:100%;
    padding:100px 6%;
    background:#ffffff;
    overflow:hidden;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.instagram-heading{
    width:100%;
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.section-small-title{
    display:inline-block;

    margin-bottom:12px;

    font-size:13px;
    font-weight:700;

    letter-spacing:2px;
    text-transform:uppercase;

    line-height:1.4;
}

.instagram-heading h2{
    margin:0;

    font-size:48px;
    font-weight:500;

    line-height:1.15;
    letter-spacing:-1px;
}

.instagram-heading h2 span{
    font-weight:700;
    color: rgb(0, 130, 33);
}

.instagram-heading p{
    max-width:620px;

    margin:18px auto 0;

    font-size:16px;
    line-height:1.7;

    opacity:.75;
}


/* =========================================================
   INSTAGRAM GRID
   DESKTOP = 3 + 3
========================================================= */

.instagram-grid{
    width:100%;
    max-width:1200px;

    margin:0 auto;

    display:grid;

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

    gap:28px;

    align-items:stretch;
}


/* =========================================================
   INSTAGRAM CARD
========================================================= */

.instagram-card{
    position:relative;

    width:100%;

    aspect-ratio:9 / 12;

    min-width:0;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    background:#eeeeee;

    box-shadow:
        0 10px 30px rgba(0,0,0,.10);

    transform:translateY(0);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* CARD HOVER */

.instagram-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);
}


/* =========================================================
   INSTAGRAM IMAGE WRAPPER
========================================================= */

.instagram-image{
    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;
}


/* =========================================================
   THUMBNAIL IMAGE
========================================================= */

.instagram-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1);
}


/* IMAGE ZOOM */

.instagram-card:hover .instagram-image img{
    transform:scale(1.06);
}


/* =========================================================
   DARK HOVER OVERLAY
========================================================= */

.instagram-overlay{
    position:absolute;

    inset:0;

    display:flex;

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

    background:rgba(0,0,0,0);

    transition:
        background .4s ease;
}


/* SHOW OVERLAY */

.instagram-card:hover .instagram-overlay{
    background:rgba(0,0,0,.30);
}


/* =========================================================
   INSTAGRAM PLAY BUTTON
========================================================= */

.instagram-play{
    width:64px;
    height:64px;

    display:flex;

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

    border-radius:50%;

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

    transform:scale(.65);

    opacity:0;

    box-shadow:
        0 10px 30px rgba(0,0,0,.20);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        opacity .4s ease;
}


/* PLAY BUTTON SHOW */

.instagram-card:hover .instagram-play{
    transform:scale(1);

    opacity:1;
}


/* INSTAGRAM ICON */

.instagram-play i{
    font-size:29px;

    line-height:1;
}


/* =========================================================
   REEL LABEL
========================================================= */

.reel-label{
    position:absolute;

    top:15px;
    right:15px;

    display:flex;

    align-items:center;

    padding:8px 12px;

    border-radius:30px;

    background:rgba(0,0,0,.65);

    color:#ffffff;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    line-height:1;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    z-index:5;
}


/* LABEL ICON */

.reel-label i{
    margin-right:5px;

    font-size:9px;
}


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

.instagram-card{
    animation:
        instagramCardIn .8s ease both;
}


/* STAGGER ANIMATION */

.instagram-card:nth-child(1){
    animation-delay:.05s;
}

.instagram-card:nth-child(2){
    animation-delay:.10s;
}

.instagram-card:nth-child(3){
    animation-delay:.15s;
}

.instagram-card:nth-child(4){
    animation-delay:.20s;
}

.instagram-card:nth-child(5){
    animation-delay:.25s;
}

.instagram-card:nth-child(6){
    animation-delay:.30s;
}


/* CARD ENTRY */

@keyframes instagramCardIn{

    from{
        opacity:0;
        transform:translateY(35px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   INSTAGRAM MODAL
========================================================= */

.instagram-modal{
    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

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

    padding:20px;

    background:rgba(0,0,0,.82);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


/* MODAL ACTIVE */

.instagram-modal.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* =========================================================
   MODAL BOX
========================================================= */

.instagram-modal-box{
    position:relative;

    width:100%;

    max-width:500px;

    max-height:95vh;

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.5);

    transform:
        scale(.85)
        translateY(20px);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1);
}


/* MODAL OPEN ANIMATION */

.instagram-modal.active .instagram-modal-box{
    transform:
        scale(1)
        translateY(0);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.instagram-close{
    position:absolute;

    top:10px;
    right:10px;

    z-index:20;

    width:38px;
    height:38px;

    display:flex;

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

    padding:0;

    border:0;

    border-radius:50%;

    background:rgba(0,0,0,.75);

    color:#ffffff;

    font-size:28px;

    line-height:1;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}


/* CLOSE HOVER */

.instagram-close:hover{
    transform:rotate(90deg);

    background:rgba(0,0,0,.95);
}


/* =========================================================
   EMBED CONTAINER
========================================================= */

.instagram-embed-container{
    width:100%;

    min-height:650px;

    background:#ffffff;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    overflow:auto;

    -webkit-overflow-scrolling:touch;
}


/* INSTAGRAM BLOCKQUOTE */

.instagram-embed-container blockquote{
    margin:0 !important;
}


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

@media(max-width:1000px){

    .instagram-section{
        padding:85px 5%;
    }

    .instagram-grid{
        max-width:850px;

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

        gap:22px;
    }

    .instagram-heading h2{
        font-size:42px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .instagram-section{
        padding:70px 18px;
    }


    /* HEADING */

    .instagram-heading{
        margin-bottom:38px;
    }

    .section-small-title{
        font-size:11px;

        letter-spacing:1.6px;
    }

    .instagram-heading h2{
        font-size:34px;

        letter-spacing:-.5px;
    }

    .instagram-heading p{
        margin-top:14px;

        font-size:14px;

        line-height:1.6;
    }


    /* GRID */

    .instagram-grid{
        width:100%;

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

        gap:14px;
    }


    /* CARD */

    .instagram-card{
        border-radius:13px;

        box-shadow:
            0 7px 20px rgba(0,0,0,.10);
    }


    /* PLAY */

    .instagram-play{
        width:48px;
        height:48px;
    }

    .instagram-play i{
        font-size:21px;
    }


    /* LABEL */

    .reel-label{
        top:9px;
        right:9px;

        padding:6px 9px;

        font-size:9px;
    }

    .reel-label i{
        font-size:8px;
        margin-right:4px;
    }


    /* MODAL */

    .instagram-modal{
        padding:10px;
    }

    .instagram-modal-box{
        max-width:100%;

        border-radius:10px;
    }

    .instagram-embed-container{
        min-height:600px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px){

    .instagram-section{
        padding-left:14px;
        padding-right:14px;
    }

    .instagram-grid{
        gap:10px;
    }

    .instagram-heading h2{
        font-size:30px;
    }

    .instagram-card{
        border-radius:10px;
    }

    .reel-label{
        padding:5px 7px;

        font-size:8px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .instagram-card,
    .instagram-image img,
    .instagram-overlay,
    .instagram-play,
    .instagram-modal,
    .instagram-modal-box,
    .instagram-close{
        animation:none !important;

        transition:none !important;
    }

}








/* =========================================================
   ACCOUNTING TOOLS SECTION
========================================================= */

.accounting-tools-section{
    width:100%;
    padding:90px 7% 100px;
    background:#ffffff;
    overflow:hidden;
}


/* =========================================================
   HEADING
========================================================= */

.accounting-tools-heading{
    width:100%;
    max-width:1450px;
    margin:0 auto 35px;
}


.accounting-tools-heading h2{
    margin:0;

    font-size:48px;
    font-weight:400;

    line-height:1.15;

    letter-spacing:-1px;

    color:#111111;
}


.accounting-tools-heading h2 span{
    color:#654494;
    font-weight:400;
}


/* =========================================================
   TOOLS BOX
========================================================= */

.accounting-tools-box{
    width:100%;
    max-width:1450px;

    margin:0 auto;

    padding:42px 48px;

    border:1px solid #d1d1d1;

    border-radius:34px;

    display:grid;

    grid-template-columns:repeat(6, minmax(0, 1fr));

    grid-auto-rows:90px;

    align-items:center;
    justify-items:center;

    column-gap:30px;
    row-gap:15px;

    background:#ffffff;

    box-sizing:border-box;
}


/* =========================================================
   TOOL ITEM
========================================================= */

.accounting-tool{
    width:100%;
    height:90px;

    display:flex;

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

    cursor:pointer;

    transition:transform .35s ease;
}


.accounting-tool:hover{
    transform:scale(1.08);
}


/* =========================================================
   LOGOS
========================================================= */

.accounting-tool img{
    width:auto;

    max-width:95px;
    max-height:58px;

    object-fit:contain;

    display:block;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.accounting-tool:hover img{
    transform:scale(1.08);
}


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

@media(max-width:1100px){

    .accounting-tools-section{
        padding:75px 5%;
    }

    .accounting-tools-heading h2{
        font-size:42px;
    }

    .accounting-tools-box{
        grid-template-columns:repeat(4, minmax(0, 1fr));

        padding:35px 30px;

        column-gap:20px;
        row-gap:12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .accounting-tools-section{
        padding:65px 18px 75px;
    }

    .accounting-tools-heading{
        margin-bottom:28px;
        text-align:center;
    }

    .accounting-tools-heading h2{
        font-size:34px;
    }

    .accounting-tools-box{
        padding:30px 20px;

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

        grid-auto-rows:80px;

        column-gap:10px;
        row-gap:8px;

        border-radius:22px;
    }

    .accounting-tool{
        height:80px;
    }

    .accounting-tool img{
        max-width:72px;
        max-height:45px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .accounting-tools-section{
        padding-left:14px;
        padding-right:14px;
    }

    .accounting-tools-heading h2{
        font-size:30px;
    }

    .accounting-tools-box{
        padding:25px 12px;

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

        grid-auto-rows:70px;

        border-radius:18px;
    }

    .accounting-tool{
        height:70px;
    }

    .accounting-tool img{
        max-width:60px;
        max-height:40px;
    }

}






/* =========================================================
   BOOK A DEMO MODAL
========================================================= */

.demo-modal{
    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    z-index:999999;

    display:flex;

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

    padding:20px;

    background:rgba(0,0,0,.68);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


/* =========================================================
   ACTIVE
========================================================= */

.demo-modal.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* =========================================================
   MODAL BOX
========================================================= */

.demo-modal-box{
    position:relative;

    width:100%;

    max-width:910px;

    min-height:520px;

    display:grid;

    grid-template-columns:1fr 1fr;

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transform:
        translateY(35px)
        scale(.94);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1);
}


/* OPEN ANIMATION */

.demo-modal.active .demo-modal-box{
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.demo-modal-image{
    width:100%;

    height:100%;

    min-height:520px;

    overflow:hidden;

    background:#eeeeee;
}


.demo-modal-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;
}


/* =========================================================
   RIGHT FORM
========================================================= */

.demo-modal-form{
    width:100%;

    padding:55px 60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-sizing:border-box;
}


/* =========================================================
   TITLE
========================================================= */

.demo-modal-form h2{
    margin:0 0 28px;

    font-size:38px;

    font-weight:500;

    line-height:1.2;

    color:#25282d;
}


/* =========================================================
   INPUT GROUP
========================================================= */

.demo-input-group{
    width:100%;

    margin-bottom:20px;
}


/* =========================================================
   INPUT
========================================================= */

.demo-input-group input,
.demo-input-group select{
    width:100%;

    height:48px;

    padding:0 12px;

    border:0;

    border-bottom:1px solid #cccccc;

    outline:none;

    background:transparent;

    color:#252525;

    font-family:inherit;

    font-size:16px;

    box-sizing:border-box;

    transition:
        border-color .3s ease;
}


/* PLACEHOLDER */

.demo-input-group input::placeholder{
    color:#858585;
}


/* SELECT */

.demo-input-group select{
    cursor:pointer;

    color:#333333;

    appearance:none;

    -webkit-appearance:none;

    background-image:
        linear-gradient(45deg, transparent 50%, #555 50%),
        linear-gradient(135deg, #555 50%, transparent 50%);

    background-position:
        calc(100% - 16px) 21px,
        calc(100% - 11px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:no-repeat;
}


/* FOCUS */

.demo-input-group input:focus,
.demo-input-group select:focus{
    border-bottom-color:#654494;
}


/* =========================================================
   SEND BUTTON
========================================================= */

.demo-send-btn{
    width:100%;

    height:58px;

    margin-top:12px;

    border:0;

    border-radius:30px;

    background:#654494;

    color:#ffffff;

    font-family:inherit;

    font-size:17px;

    font-weight:500;

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.demo-send-btn:hover{
    background:#543781;

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(101,68,148,.25);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.demo-modal-close{
    position:absolute;

    top:20px;
    right:25px;

    z-index:10;

    width:35px;
    height:35px;

    display:flex;

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

    border:0;

    background:transparent;

    color:#111111;

    font-size:30px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:
        transform .25s ease;
}


.demo-modal-close:hover{
    transform:rotate(90deg);
}


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

@media(max-width:850px){

    .demo-modal-box{
        max-width:700px;

        grid-template-columns:1fr 1fr;

        min-height:480px;
    }

    .demo-modal-image{
        min-height:480px;
    }

    .demo-modal-form{
        padding:45px 35px;
    }

    .demo-modal-form h2{
        font-size:32px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    .demo-modal{
        padding:15px;
    }


    .demo-modal-box{
        width:100%;

        max-width:430px;

        max-height:92vh;

        display:flex;

        flex-direction:column;

        overflow-y:auto;

        border-radius:18px;
    }


    /* IMAGE */

    .demo-modal-image{
        width:100%;

        height:230px;

        min-height:230px;

        flex-shrink:0;
    }


    /* FORM */

    .demo-modal-form{
        padding:30px 25px 35px;

        justify-content:flex-start;
    }


    .demo-modal-form h2{
        font-size:30px;

        margin-bottom:22px;
    }


    .demo-input-group{
        margin-bottom:14px;
    }


    .demo-input-group input,
    .demo-input-group select{
        height:45px;

        font-size:14px;
    }


    .demo-send-btn{
        height:52px;

        font-size:15px;
    }


    .demo-modal-close{
        top:12px;
        right:15px;

        width:32px;
        height:32px;

        border-radius:50%;

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

        font-size:25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .demo-modal{
        padding:10px;
    }


    .demo-modal-box{
        border-radius:15px;
    }


    .demo-modal-image{
        height:190px;

        min-height:190px;
    }


    .demo-modal-form{
        padding:25px 20px 30px;
    }


    .demo-modal-form h2{
        font-size:27px;
    }

}


/* =========================================================
   SKILL WORKSHOP / ENQUIRY SECTION
========================================================= */

.workshop-section{
    width:100%;

    padding:0 1px;

    margin:0;

    background:#ffffff;

    box-sizing:border-box;

    overflow:hidden;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.workshop-image{
    position:relative;

    width:100%;

    height:520px;

    overflow:hidden;

    background:#222222;

    box-sizing:border-box;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.workshop-image > img:first-child{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    z-index:0;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.workshop-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.55) 38%,
            rgba(0,0,0,.28) 72%,
            rgba(0,0,0,.18) 100%
        );
}


/* =========================================================
   LOGO
========================================================= */

.workshop-logo{
    position:absolute;

    top:42px;

    left:7%;

    width:135px !important;

    height:auto !important;

    display:block;

    object-fit:contain !important;

    z-index:3;
}


/* =========================================================
   TOP RIGHT ARROW
========================================================= */

.workshop-arrow{
    position:absolute;

    top:42px;

    right:7%;

    z-index:3;

    color:#ffffff;

    font-size:46px;

    font-weight:300;

    line-height:1;

    cursor:pointer;

    transition:
        transform .3s ease;
}


.workshop-arrow:hover{
    transform:translate(5px,-5px);
}


/* =========================================================
   CONTENT
========================================================= */

.workshop-content{
    position:absolute;

    left:7%;

    bottom:48px;

    width:100%;

    max-width:760px;

    z-index:3;

    color:#ffffff;
}


.workshop-content h2{
    margin:0 0 12px;

    color:#ffffff;

    font-size:34px;

    font-weight:500;

    line-height:1.2;

    letter-spacing:-.3px;
}


.workshop-content p{
    margin:0;

    max-width:760px;

    color:#ffffff;

    font-size:16px;

    font-weight:400;

    line-height:1.8;
}


/* =========================================================
   ENQUIRY BUTTON
========================================================= */

.workshop-enquiry-btn{
    position:absolute;

    right:7%;

    bottom:55px;

    z-index:5;

    min-width:165px;

    height:54px;

    padding:0 25px;

    border:0;

    border-radius:5px;

    background:#f5a019;

    color:#ffffff;

    font-family:inherit;

    font-size:16px;

    font-weight:500;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.workshop-enquiry-btn:hover{
    background:#e58f0b;

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.25);
}


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

@media(max-width:900px){

    .workshop-section{
        padding-left:1px;
        padding-right:1px;
    }


    .workshop-image{
        height:460px;
    }


    .workshop-logo{
        top:35px;

        left:5%;

        width:120px !important;
    }


    .workshop-arrow{
        top:36px;

        right:5%;

        font-size:40px;
    }


    .workshop-content{
        left:5%;

        bottom:42px;

        max-width:62%;
    }


    .workshop-content h2{
        font-size:30px;
    }


    .workshop-content p{
        font-size:14px;

        line-height:1.7;
    }


    .workshop-enquiry-btn{
        right:5%;

        bottom:48px;

        min-width:150px;

        height:50px;

        font-size:14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .workshop-section{
        padding-left:1px;
        padding-right:1px;
    }


    .workshop-image{
        height:400px;
    }


    /* OVERLAY */

    .workshop-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.40) 0%,
                rgba(0,0,0,.55) 45%,
                rgba(0,0,0,.88) 100%
            );
    }


    /* LOGO */

    .workshop-logo{
        top:25px;

        left:20px;

        width:105px !important;
    }


    /* ARROW */

    .workshop-arrow{
        top:27px;

        right:20px;

        font-size:34px;
    }


    /* CONTENT */

    .workshop-content{
        left:20px;

        right:20px;

        bottom:92px;

        width:auto;

        max-width:none;
    }


    .workshop-content h2{
        margin-bottom:8px;

        font-size:25px;

        line-height:1.2;
    }


    .workshop-content p{
        font-size:13px;

        line-height:1.6;

        max-width:100%;
    }


    /* BUTTON */

    .workshop-enquiry-btn{
        left:20px;

        right:auto;

        bottom:25px;

        min-width:145px;

        height:47px;

        padding:0 20px;

        border-radius:5px;

        font-size:14px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:400px){

    .workshop-image{
        height:380px;
    }


    .workshop-logo{
        top:22px;

        left:18px;

        width:95px !important;
    }


    .workshop-arrow{
        top:24px;

        right:18px;

        font-size:30px;
    }


    .workshop-content{
        left:18px;

        right:18px;

        bottom:85px;
    }


    .workshop-content h2{
        font-size:22px;
    }


    .workshop-content p{
        font-size:12px;

        line-height:1.55;
    }


    .workshop-enquiry-btn{
        left:18px;

        bottom:22px;

        min-width:135px;

        height:44px;

        font-size:13px;
    }

}





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

.ciat-footer{
    width:100%;
    background:#ffffff;
    color:#111111;
    border-top:1px solid #eeeeee;
    padding-top:70px;
}


/* CONTAINER */

.ciat-footer-container{
    width:90%;
    max-width:1250px;
    margin:0 auto;

    display:grid;
    grid-template-columns:2fr 1fr 1.3fr 1.5fr;
    gap:55px;

    padding-bottom:55px;
}


/* FOOTER LOGO */

.ciat-footer-logo{
    width:170px;
    height:auto;
    display:block;
    margin-bottom:22px;
}


/* ABOUT */

.ciat-footer-about p{
    max-width:360px;

    margin:0;

    color:#666;
    font-size:14px;
    line-height:1.8;
}


/* HEADINGS */

.ciat-footer-col h3{
    margin:0 0 22px;

    color:#111;
    font-size:17px;
    font-weight:700;
}


/* LINKS */

.ciat-footer-col ul{
    list-style:none;
    margin:0;
    padding:0;
}

.ciat-footer-col ul li{
    margin-bottom:12px;
}

.ciat-footer-col ul li a{
    color:#666;
    text-decoration:none;
    font-size:14px;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

.ciat-footer-col ul li a:hover{
    color:#0864fe;
    padding-left:4px;
}


/* SOCIAL */

.ciat-social{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:25px;
}

.ciat-social a{
    width:36px;
    height:36px;

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

    border:1px solid #dddddd;
    border-radius:50%;

    color:#222;
    text-decoration:none;

    font-size:13px;
    font-weight:700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.ciat-social a:hover{
    background:#0864fe;
    color:#fff;
    border-color:#0864fe;
}


/* CONTACT */

.ciat-contact-item{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:17px;
}

.ciat-contact-item span{
    width:24px;
    flex-shrink:0;

    font-size:16px;
}

.ciat-contact-item p,
.ciat-contact-item a{
    margin:0;

    color:#666;
    font-size:14px;
    line-height:1.6;

    text-decoration:none;
}

.ciat-contact-item a:hover{
    color:#0864fe;
}


/* BOTTOM */

.ciat-footer-bottom{
    width:90%;
    max-width:1250px;

    margin:0 auto;

    padding:22px 0;

    border-top:1px solid #eeeeee;

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

    gap:20px;
}

.ciat-footer-bottom p{
    margin:0;

    color:#777;
    font-size:13px;
}

.ciat-footer-bottom div{
    display:flex;
    align-items:center;
    gap:12px;
}

.ciat-footer-bottom a{
    color:#777;
    font-size:13px;
    text-decoration:none;
}

.ciat-footer-bottom a:hover{
    color:#0864fe;
}

.ciat-footer-bottom span{
    color:#ddd;
}


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

@media(max-width:900px){

    .ciat-footer-container{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .ciat-footer{
        padding-top:50px;
    }

    .ciat-footer-container{
        width:88%;

        grid-template-columns:1fr;
        gap:35px;

        padding-bottom:40px;
    }

    .ciat-footer-logo{
        width:150px;
    }

    .ciat-footer-about p{
        max-width:100%;
    }

    .ciat-footer-bottom{
        width:88%;

        flex-direction:column;
        align-items:flex-start;

        padding:20px 0;
    }

    .ciat-footer-bottom div{
        flex-wrap:wrap;
    }

}


/* =========================================================
   CIAT SHOWCASE - FIXED GRID POSITION (DESKTOP/TABLET ONLY)
   FIX: wrapped in min-width:601px so it no longer overrides
   the mobile single-column layout defined above (max-width:600px)
========================================================= */

@media(min-width:901px){

    .ciat-showcase .showcase-container{
        display:grid;
        grid-template-columns: 1fr 1.8fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap:16px;
    }


    /* LEFT TOP */
    .ciat-showcase .showcase-card:nth-child(1){
        grid-column:1;
        grid-row:1;
    }


    /* CENTER VIDEO */
    .ciat-showcase .showcase-card:nth-child(2){
        grid-column:2;
        grid-row:1 / 3;
    }


    /* RIGHT TOP */
    .ciat-showcase .showcase-card:nth-child(3){
        grid-column:3;
        grid-row:1;
    }


    /* LEFT BOTTOM */
    .ciat-showcase .showcase-card:nth-child(4){
        grid-column:1;
        grid-row:2;
    }


    /* RIGHT BOTTOM */
    .ciat-showcase .showcase-card:nth-child(5){
        grid-column:3;
        grid-row:2;
    }

}


/* CARD SIZE (applies at all sizes) */
.ciat-showcase .showcase-card{
    position:relative;
    overflow:hidden;
    min-width:0;
}

.ciat-showcase .showcase-card img,
.ciat-showcase .showcase-card video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}