/* ATHEEQ TECHNICAL INSTITUTE - OPTIMIZED MASTER CSS
   Individual sector CSS files remain available for editing.
   This bundled file avoids multiple @import network requests.
*/

/* ===== variables.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   VARIABLES CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

:root{--bg:#05070b;--surface:#0b1018;--surface-2:#111925;--text:#f6f9ff;--muted:#a9b5c7;--primary:#1687ff;--primary-light:#5eb2ff;--cyan:#27d8ff;--border:rgba(255,255,255,.10);--shadow:0 22px 70px rgba(0,0,0,.38);--radius:22px}

body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}

.site-header.scrolled{background:rgba(5,7,11,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);box-shadow:0 10px 35px rgba(0,0,0,.18)}

.brand-mark span{color:var(--primary-light);font-size:18px}

.brand small{display:block;font-size:9px;color:var(--primary-light);letter-spacing:.14em}

.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--primary);box-shadow:0 0 18px rgba(22,135,255,.55)}

.menu-btn{display:none;background:transparent;color:#fff;border:1px solid var(--border);width:44px;height:44px;border-radius:14px}

.eyebrow{color:var(--primary-light);text-transform:uppercase;letter-spacing:.16em;font-weight:900;font-size:11px}

.hero-visual img{width:100%;border-radius:28px;border:1px solid rgba(94,178,255,.22);box-shadow:var(--shadow);transform:perspective(1000px) rotateY(-4deg)}

.hero-badge{position:absolute;right:-14px;bottom:22px;background:rgba(5,7,11,.82);backdrop-filter:blur(16px);border:1px solid var(--border);padding:16px 18px;border-radius:18px;box-shadow:var(--shadow)}

.hero-badge span{display:block;color:var(--muted);font-size:11px}

.kicker{color:var(--primary);font-weight:900;text-transform:uppercase;letter-spacing:.15em;font-size:10px}

.section p{color:var(--muted)}

.icon{width:42px;height:42px;border-radius:14px;background:rgba(22,135,255,.12);border:1px solid rgba(22,135,255,.25);display:grid;place-items:center;color:var(--primary-light);margin-bottom:18px}

.feature-list div{padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.025)}

.feature-list span{color:var(--muted);font-size:13px}

.footer-bottom{border-top:1px solid var(--border);margin-top:40px;padding-top:22px;color:#7f8b9e;font-size:12px;display:flex;justify-content:space-between;gap:20px}

.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--cyan));z-index:2000;width:0}

.close{position:absolute;top:18px;right:22px;background:transparent;color:#fff;border:1px solid var(--border);width:44px;height:44px;border-radius:14px}

.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,135,255,.12)}

.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px;border:1px solid var(--border);border-radius:18px}

.timeline-item strong{color:var(--primary-light)}

.acc{border-bottom:1px solid var(--border)}

.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(340px,90vw);background:#070b11;z-index:1200;padding:90px 24px 24px;transform:translateX(100%);transition:.35s;border-left:1px solid var(--border)}

.drawer-links a{padding:15px;border:1px solid var(--border);border-radius:14px}

.hero-dot.active{width:24px;border-radius:8px;background:var(--primary)}


/* ===== reset.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   RESET CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

*{box-sizing:border-box}

html{scroll-behavior:smooth}


/* ===== header.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   HEADER CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.35s}

.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}

.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.04em}

.brand-mark{width:38px;height:38px;border:1px solid rgba(94,178,255,.5);border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#0c1b2c,#06101b)}

.nav-links{display:flex;gap:22px;align-items:center;font-size:13px;color:#dbe5f4}

.nav-links a{opacity:.82;position:relative}

.nav-links a:hover,.nav-links a.active{opacity:1;color:#fff}

.nav-cta{display:flex;gap:10px;align-items:center}






/* ==========================================================
   ATHEEQ PREMIUM PAGE BACKGROUNDS
   DATA-PAGE BASED IMAGE SYSTEM
   ========================================================== */


/* ==========================================================
   COMMON PAGE HERO
   ========================================================== */

body[data-page] .page-hero,
body[data-page] .hero:not(.home-hero){
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-color:#050b12 !important;
}


/* ==========================================================
   ABOUT
   assets/images/about/about-bg.svg
   ========================================================== */

body[data-page="about"] .page-hero,
body[data-page="about"] .hero:not(.home-hero){

    background-image:
        url("../assets/images/about/about-bg.svg") !important;

}


/* ==========================================================
   COURSES
   assets/images/courses/courses-bg.svg
   ========================================================== */

body[data-page="courses"] .page-hero,
body[data-page="courses"] .hero:not(.home-hero){

    background-image:
        url("../assets/images/courses/courses-bg.svg") !important;

}


/* ==========================================================
   REPAIR & TOOLS
   assets/images/repair-tools/repair-tools-bg.svg
   ========================================================== */

body[data-page="repair-tools"] .page-hero,
body[data-page="repair-tools"] .hero:not(.home-hero){

    background-image:
        url("../assets/images/repair-tools/repair-tools-bg.svg") !important;

}


/* ==========================================================
   TEAM & PARTNERS
   assets/images/team-partners/team-partners-bg.svg
   ========================================================== */

body[data-page="team-partners"] .page-hero,
body[data-page="team-partners"] .hero:not(.home-hero){

    background-image:
        url("../assets/images/team-partners/team-partners-bg.svg") !important;

}


/* ==========================================================
   CONTACT / ENROLL
   assets/images/contact/contact-bg.svg
   ========================================================== */

body[data-page="contact"] .page-hero,
body[data-page="contact"] .hero:not(.home-hero){

    background-image:
        url("../assets/images/contact/contact-bg.svg") !important;

}


/* ==========================================================
   PREMIUM DARK READABILITY OVERLAY
   ========================================================== */

body[data-page] .page-hero::before,
body[data-page] .hero:not(.home-hero)::before{

    content:"";
    position:absolute;
    inset:0;

    z-index:-1;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(2,7,14,.84) 0%,
            rgba(2,7,14,.62) 32%,
            rgba(2,7,14,.32) 62%,
            rgba(2,7,14,.10) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.08) 50%,
            rgba(0,0,0,.30) 100%
        );

}


/* ==========================================================
   KEEP HERO CONTENT ABOVE IMAGE
   ========================================================== */

body[data-page] .page-hero > *,
body[data-page] .hero:not(.home-hero) > *{

    position:relative;
    z-index:1;

}


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

@media (max-width:768px){

    body[data-page] .page-hero,
    body[data-page] .hero:not(.home-hero){

        background-position:center center !important;
        background-size:cover !important;

    }

}


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

@media (max-width:480px){

    body[data-page] .page-hero::before,
    body[data-page] .hero:not(.home-hero)::before{

        background:
            linear-gradient(
                180deg,
                rgba(2,7,14,.72) 0%,
                rgba(2,7,14,.42) 45%,
                rgba(2,7,14,.72) 100%
            );

    }

}












/* ==========================================================
   ATHEEQ PREMIUM CINEMATIC PAGE HERO OVERLAY
   DARKER IMAGE + CLEAR WHITE TYPOGRAPHY
   ========================================================== */

body[data-page] .page-hero::before,
body[data-page] .hero:not(.home-hero)::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:-1;
    pointer-events:none;

    /* Premium layered dark treatment */
    background:
        /* Left readability layer */
        linear-gradient(
            90deg,
            rgba(2,7,14,.92) 0%,
            rgba(2,7,14,.80) 22%,
            rgba(2,7,14,.62) 42%,
            rgba(2,7,14,.38) 65%,
            rgba(2,7,14,.18) 100%
        ),

        /* Top-to-bottom cinematic shade */
        linear-gradient(
            180deg,
            rgba(0,0,0,.28) 0%,
            rgba(0,0,0,.12) 42%,
            rgba(0,0,0,.34) 100%
        ),

        /* Subtle blue premium tint */
        linear-gradient(
            135deg,
            rgba(0,35,70,.16),
            rgba(0,0,0,0) 60%
        );
}


/* ==========================================================
   EXTRA TEXT READABILITY
   ========================================================== */

body[data-page] .page-hero .kicker,
body[data-page] .page-hero .eyebrow{
    text-shadow:
        0 2px 8px rgba(0,0,0,.75);
}


body[data-page] .page-hero h1{
    text-shadow:
        0 3px 14px rgba(0,0,0,.85),
        0 1px 2px rgba(0,0,0,.95);
}


body[data-page] .page-hero p{
    text-shadow:
        0 2px 8px rgba(0,0,0,.80);
}


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

@media (min-width:1200px){

    body[data-page] .page-hero::before,
    body[data-page] .hero:not(.home-hero)::before{

        background:
            linear-gradient(
                90deg,
                rgba(2,7,14,.94) 0%,
                rgba(2,7,14,.82) 24%,
                rgba(2,7,14,.60) 44%,
                rgba(2,7,14,.34) 68%,
                rgba(2,7,14,.16) 100%
            ),

            linear-gradient(
                180deg,
                rgba(0,0,0,.30),
                rgba(0,0,0,.10) 45%,
                rgba(0,0,0,.38)
            ),

            linear-gradient(
                135deg,
                rgba(0,35,70,.16),
                transparent 60%
            );
    }

}


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

@media (max-width:768px){

    body[data-page] .page-hero::before,
    body[data-page] .hero:not(.home-hero)::before{

        background:
            linear-gradient(
                90deg,
                rgba(2,7,14,.90) 0%,
                rgba(2,7,14,.70) 50%,
                rgba(2,7,14,.38) 100%
            ),

            linear-gradient(
                180deg,
                rgba(0,0,0,.25),
                rgba(0,0,0,.38)
            );
    }

}










/* ============================================================
   ATHEEQ - PREMIUM HEADER NAVIGATION
   ============================================================ */

.nav-links,
.site-nav,
header nav {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.nav-links a,
.site-nav a,
header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1px;

    white-space: nowrap;
    text-decoration: none;

    padding: 9px 11px;
    border-radius: 8px;

    color: #cbd5e1;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.nav-links a:hover,
.site-nav a:hover,
header nav a:hover {
    color: #ffffff;
    background: rgba(30, 144, 255, 0.10);
    transform: translateY(-1px);
}

.nav-links a.active,
.site-nav a.active,
header nav a.active {
    color: #2498ff;
}


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

header .container,
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


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

@media (min-width: 769px) {

    .nav-links,
    .site-nav,
    header nav {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .nav-links a,
    .site-nav a,
    header nav a {
        font-size: 15px;
        padding: 8px 10px;
    }
}


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

@media (max-width: 768px) {

    .nav-links,
    .site-nav,
    header nav {
        gap: 3px;
    }

    .nav-links a,
    .site-nav a,
    header nav a {
        font-size: 14px;
        padding: 8px 9px;
    }
}









/* USE REAL ATHEEQ LOGO IMAGE */
.brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-image: url("../assets/images/home/Logo.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    border: 0 !important;
    box-shadow: none !important;
}

.brand-mark span {
    display: none !important;
}
/* ===== hero.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   HERO CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.home .hero{background:radial-gradient(circle at 80% 20%,rgba(39,216,255,.12),transparent 30%),linear-gradient(180deg,#06101c,#05070b)}

.home .hero h1{max-width:720px}

.about .hero,.courses .hero,.repair-tools .hero,.team-partners .hero,.contact .hero{min-height:55vh}

.hero{min-height:86vh;padding:150px 0 80px;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 24%,rgba(22,135,255,.18),transparent 35%),linear-gradient(180deg,#06101c 0%,#05070b 100%)}

.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%);pointer-events:none}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center}

.hero h1{font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.055em;margin:14px 0 22px;max-width:780px}

.hero p{color:var(--muted);font-size:17px;max-width:690px}

.hero-visual{position:relative}

.hero-badge strong{font-size:24px;color:#fff}

.home-hero{min-height:92vh;padding:145px 0 90px;background:#05070b;isolation:isolate}

.home-hero .hero-slides{position:absolute;inset:0;z-index:-3}

.home-hero .hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease,transform 7s ease}

.home-hero .hero-slide.is-active{opacity:1;transform:scale(1)}

.home-hero .hero-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,7,12,.97) 0%,rgba(3,7,12,.86) 42%,rgba(3,7,12,.48) 72%,rgba(3,7,12,.68) 100%),linear-gradient(180deg,rgba(3,7,12,.32),rgba(3,7,12,.72))}

.home-hero:before{z-index:-1;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);}

.hero-content{position:relative;z-index:2;display:flex;align-items:center;min-height:62vh}

.home-hero .hero-content>div{max-width:850px}

.hero-slider-ui{position:absolute;right:max(24px,calc((100% - 1180px)/2));bottom:34px;display:flex;align-items:center;gap:12px;z-index:5;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(5,7,11,.45);backdrop-filter:blur(12px)}

.hero-prev,.hero-next{width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:22px;line-height:1}

.hero-dots{display:flex;gap:7px}

.hero-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}

.inner-hero{min-height:46vh;padding:145px 0 72px;display:flex;align-items:flex-end;background:#07101b;position:relative;isolation:isolate}

.inner-hero:after{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.20;filter:saturate(.85) contrast(1.08)}

.inner-hero:before{z-index:-1;background:linear-gradient(90deg,rgba(3,7,12,.98),rgba(3,7,12,.68),rgba(3,7,12,.88));}

.inner-hero-content{position:relative;width:100%}

.inner-hero h1{max-width:1000px;font-size:clamp(42px,6vw,72px)}

.repair-tools .inner-hero:after{background-image:url("../assets/images/repair-tools/sample-generated-repair-tools.svg")}

.team-partners .inner-hero:after{background-image:url("../assets/images/team-partners/team-partners-bg.svg")}

.inner-hero .inner-hero-content{padding-left:clamp(42px,5vw,72px);padding-right:clamp(18px,3vw,40px)}

.about .hero,.courses .hero,.repair-tools .hero,.team-partners .hero,.contact .hero{min-height:55vh}

.home .hero{background:radial-gradient(circle at 80% 20%,rgba(39,216,255,.12),transparent 30%),linear-gradient(180deg,#06101c,#05070b)}

.home .hero h1{max-width:720px}


/* ===== home.css ===== */
/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE
   HOME CSS
   PREMIUM 4 IMAGE HERO
   ========================================================== */


/* ==========================================================
   HOME STATS
   ========================================================== */

.stats{
    background:#070b11;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

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

.stat{
    padding:28px 22px;
    border-right:1px solid var(--border);
}

.stat:last-child{
    border:0;
}

.stat strong{
    font-size:30px;
    display:block;
    color:#fff;
}

.stat span{
    color:var(--muted);
    font-size:12px;
}


/* ==========================================================
   FEATURE LIST
   ========================================================== */

.feature-list{
    display:grid;
    gap:12px;
}

.feature-list strong{
    display:block;
}


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

.home-hero{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:#05080d !important;
}


/* ==========================================================
   SLIDES CONTAINER
   ========================================================== */

.home-hero .hero-slides{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    z-index:0 !important;
}


/* ==========================================================
   ALL 4 IMAGES
   IMPORTANT:
   !important overrides the broken inline HTML style.
   ========================================================== */

.home-hero .hero-slide{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;

    opacity:0 !important;

    transform:scale(1.04);

    transition:
        opacity 1.2s ease-in-out,
        transform 7s ease-out !important;

    filter:
        brightness(1.12)
        contrast(1.05)
        saturate(1.10);

    pointer-events:none !important;
}


/* ==========================================================
   IMAGE 01
   ========================================================== */

.home-hero .hero-slide:nth-child(1){
    background-image:
        url("../assets/images/home/home-bg-01.svg") !important;
}


/* ==========================================================
   IMAGE 02
   ========================================================== */

.home-hero .hero-slide:nth-child(2){
    background-image:
        url("../assets/images/home/home-bg-02.svg") !important;
}


/* ==========================================================
   IMAGE 03
   ========================================================== */

.home-hero .hero-slide:nth-child(3){
    background-image:
        url("../assets/images/home/home-bg-03.svg") !important;
}


/* ==========================================================
   IMAGE 04
   ========================================================== */

.home-hero .hero-slide:nth-child(4){
    background-image:
        url("../assets/images/home/home-bg-04.svg") !important;
}


/* ==========================================================
   ACTIVE IMAGE
   JS ALREADY ADDS .is-active
   ========================================================== */

.home-hero .hero-slide.is-active{
    opacity:1 !important;
    transform:scale(1.01) !important;
}


/* ==========================================================
   CINEMATIC ZOOM
   ========================================================== */

.home-hero .hero-slide:nth-child(1).is-active{
    transform:scale(1.035) !important;
}

.home-hero .hero-slide:nth-child(2).is-active{
    transform:scale(1.045) !important;
}

.home-hero .hero-slide:nth-child(3).is-active{
    transform:scale(1.035) !important;
}

.home-hero .hero-slide:nth-child(4).is-active{
    transform:scale(1.045) !important;
}


/* ==========================================================
   PREMIUM OVERLAY
   LEFT DARK
   RIGHT IMAGE CLEAR
   ========================================================== */

.home-hero .hero-overlay{
    position:absolute !important;
    inset:0 !important;

    z-index:1 !important;
    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            rgba(2,7,14,.66) 0%,
            rgba(2,7,14,.42) 25%,
            rgba(2,7,14,.16) 48%,
            rgba(2,7,14,.03) 68%,
            transparent 100%
        ) !important;
}


/* ==========================================================
   HERO CONTENT ABOVE IMAGE
   ========================================================== */

.home-hero .hero-content{
    position:relative !important;
    z-index:2 !important;
}


/* ==========================================================
   SLIDER CONTROLS
   ========================================================== */

.home-hero .hero-slider-ui{
    position:absolute !important;

    z-index:5 !important;

    right:24px;
    bottom:28px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:8px 10px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;

    background:rgba(5,10,16,.38);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}


/* ==========================================================
   DOTS
   ========================================================== */

.home-hero .hero-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.home-hero .hero-dot{
    width:7px;
    height:7px;

    padding:0;

    border:0;
    border-radius:50%;

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

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}

.home-hero .hero-dot.active{
    width:24px;
    border-radius:8px;
    background:#168cff;
}


/* ==========================================================
   PREVIOUS / NEXT
   ========================================================== */

.home-hero .hero-prev,
.home-hero .hero-next{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

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

    color:#fff;

    cursor:pointer;
}


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

@media (min-width:1200px){

    .home-hero .hero-slide{
        filter:
            brightness(1.18)
            contrast(1.06)
            saturate(1.12);
    }

    .home-hero .hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,7,14,.64) 0%,
                rgba(2,7,14,.40) 25%,
                rgba(2,7,14,.13) 48%,
                rgba(2,7,14,.02) 70%,
                transparent 100%
            ) !important;
    }
}


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

@media (max-width:1024px){

    .home-hero .hero-slide{
        filter:
            brightness(1.15)
            contrast(1.05)
            saturate(1.10);
    }
}


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

@media (max-width:768px){

    .home-hero .hero-slide{
        background-position:center center !important;

        filter:
            brightness(1.12)
            contrast(1.05)
            saturate(1.08);
    }

    .home-hero .hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,7,14,.58),
                rgba(2,7,14,.24),
                transparent
            ) !important;
    }

    .home-hero .hero-slider-ui{
        right:14px;
        bottom:20px;
    }
}


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

@media (max-width:480px){

    .home-hero .hero-slide{
        filter:
            brightness(1.10)
            contrast(1.04)
            saturate(1.06);
    }

    .home-hero .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(2,7,14,.30),
                rgba(2,7,14,.08),
                rgba(2,7,14,.32)
            ) !important;
    }
}


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

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

    .home-hero .hero-slide{
        transition:none !important;
        transform:none !important;
    }
}






/* ==========================================================
   PREMIUM WHATSAPP FLOATING BUTTON
   ORIGINAL WHATSAPP-STYLE ICON
   ========================================================== */

.floating-wa{
    width:62px !important;
    height:62px !important;

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

    padding:0 !important;

    border-radius:50% !important;

    background:#25D366 !important;
    color:transparent !important;
    font-size:0 !important;

    box-shadow:
        0 8px 24px rgba(37,211,102,.32),
        0 0 0 1px rgba(255,255,255,.08) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease !important;
}


/* WhatsApp white icon */
.floating-wa::before{
    content:"" !important;

    width:32px !important;
    height:32px !important;

    display:block !important;

    background-color:#fff !important;

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.52 3.48A11.87 11.87 0 0 0 12.05 0C5.48 0 .13 5.35.13 11.92c0 2.1.55 4.15 1.6 5.96L0 24l6.26-1.64a11.9 11.9 0 0 0 5.78 1.47h.01c6.57 0 11.92-5.35 11.92-11.92 0-3.18-1.24-6.17-3.45-8.43zM12.05 21.83h-.01a9.9 9.9 0 0 1-5.05-1.38l-.36-.21-3.72.98.99-3.63-.23-.37a9.88 9.88 0 0 1-1.52-5.3C2.15 6.46 6.59 2.02 12.05 2.02a9.85 9.85 0 0 1 7 2.9 9.86 9.86 0 0 1 2.9 7c0 5.46-4.44 9.91-9.9 9.91zm5.43-7.42c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.47-1.77-1.64-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.5 1.7.64.71.23 1.35.2 1.86.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3C/svg%3E") !important;

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.52 3.48A11.87 11.87 0 0 0 12.05 0C5.48 0 .13 5.35.13 11.92c0 2.1.55 4.15 1.6 5.96L0 24l6.26-1.64a11.9 11.9 0 0 0 5.78 1.47h.01c6.57 0 11.92-5.35 11.92-11.92 0-3.18-1.24-6.17-3.45-8.43zM12.05 21.83h-.01a9.9 9.9 0 0 1-5.05-1.38l-.36-.21-3.72.98.99-3.63-.23-.37a9.88 9.88 0 0 1-1.52-5.3C2.15 6.46 6.59 2.02 12.05 2.02a9.85 9.85 0 0 1 7 2.9 9.86 9.86 0 0 1 2.9 7c0 5.46-4.44 9.91-9.9 9.91zm5.43-7.42c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.47-1.77-1.64-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49s1.07 2.89 1.22 3.09c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.5 1.7.64.71.23 1.35.2 1.86.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z'/%3E%3C/svg%3E") !important;

    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;

    -webkit-mask-position:center !important;
    mask-position:center !important;

    -webkit-mask-size:contain !important;
    mask-size:contain !important;
}


/* Premium hover */
.floating-wa:hover{
    background:#20bd5a !important;

    transform:translateY(-4px) scale(1.06) !important;

    box-shadow:
        0 14px 32px rgba(37,211,102,.42),
        0 0 0 4px rgba(37,211,102,.10) !important;
}


/* Mobile */
@media (max-width:480px){

    .floating-wa{
        width:58px !important;
        height:58px !important;
    }

    .floating-wa::before{
        width:30px !important;
        height:30px !important;
    }
}












/* =========================================
   MOBILE HOME SECTION FIX
   ========================================= */

@media (max-width: 768px) {

    .home .section .split {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        align-items: stretch !important;
    }

    .home .section .split > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .home .section .split .image-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .home .section .split .image-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 320px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .home .section .split h2 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.12 !important;
        margin-bottom: 14px !important;
    }

    .home .section .split p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
    }

    .home .section .split .btn {
        display: inline-flex !important;
        width: auto !important;
        min-width: 150px !important;
        justify-content: center !important;
    }
}
/* ===== about.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   ABOUT CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.about .hero-grid,.courses .hero-grid,.repair-tools .hero-grid,.team-partners .hero-grid,.contact .hero-grid{grid-template-columns:1fr .75fr}

.about .inner-hero:after{background-image:url("../assets/images/about/sample-generated-about.svg")}

.about .hero-grid,.courses .hero-grid,.repair-tools .hero-grid,.team-partners .hero-grid,.contact .hero-grid{grid-template-columns:1fr .75fr}









/* ==========================================================
   ATHEEQ PREMIUM ABOUT STORY
   ALTERNATIVE HORIZONTAL MILESTONE DESIGN
   ========================================================== */

.timeline{
    position:relative !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;

    gap:24px !important;

    margin-top:45px !important;
    padding:0 !important;
}


/* Remove old vertical timeline */

.timeline::before{
    display:none !important;
}


/* ==========================================================
   STORY INTRO
   ========================================================== */

.timeline + *{
    margin-top:20px;
}


/* ==========================================================
   MILESTONE CARD
   ========================================================== */

.timeline-item,
.timeline-item:nth-child(even){
    direction:ltr !important;

    position:relative !important;

    display:block !important;

    min-height:0 !important;

    margin:0 !important;
}


/* Remove old center dots */

.timeline-item::before{
    display:none !important;
}


/* Card */

.timeline-item > div{
    position:relative !important;

    width:100% !important;
    min-height:230px !important;

    margin:0 !important;

    padding:32px 28px !important;

    box-sizing:border-box !important;

    border:1px solid rgba(20,135,255,.14) !important;

    border-radius:22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(245,248,252,.88)
        ) !important;

    box-shadow:
        0 14px 40px rgba(7,25,48,.07),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow:hidden !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* Premium blue top line */

.timeline-item > div::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #54b5ff,
            transparent
        );
}


/* Hover */

.timeline-item > div:hover{
    transform:translateY(-8px) !important;

    border-color:rgba(22,140,255,.38) !important;

    box-shadow:
        0 24px 55px rgba(7,25,48,.13),
        0 0 30px rgba(22,140,255,.08) !important;
}


/* ==========================================================
   YEAR / NUMBER
   ========================================================== */

.timeline-item > div:first-child{
    color:#168cff !important;

    font-size:14px !important;
    font-weight:800 !important;

    letter-spacing:.08em !important;
}


/* If year is inside a separate element */

.timeline-item .year{
    display:inline-flex !important;

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

    min-width:58px !important;
    height:30px !important;

    padding:0 12px !important;

    margin-bottom:25px !important;

    border-radius:999px !important;

    background:rgba(22,140,255,.09) !important;

    border:1px solid rgba(22,140,255,.16) !important;

    color:#168cff !important;

    font-size:12px !important;
    font-weight:800 !important;
}


/* ==========================================================
   CARD HEADINGS
   ========================================================== */

.timeline-item h3{
    margin:12px 0 12px !important;

    color:#07101d !important;

    font-size:22px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
}


/* ==========================================================
   CARD TEXT
   ========================================================== */

.timeline-item p{
    margin:0 !important;

    color:#59697d !important;

    font-size:14px !important;

    line-height:1.75 !important;
}


/* ==========================================================
   LARGE YEAR NUMBER EFFECT
   ========================================================== */

.timeline-item:nth-child(1) > div::after{
    content:"2006";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


.timeline-item:nth-child(2) > div::after{
    content:"20+";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


.timeline-item:nth-child(3) > div::after{
    content:"8K+";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


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

@media (max-width:900px){

    .timeline{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .timeline-item > div{
        min-height:190px !important;
    }

}


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

@media (max-width:600px){

    .timeline{
        margin-top:30px !important;
        gap:16px !important;
    }

    .timeline-item > div{
        min-height:180px !important;

        padding:26px 22px !important;

        border-radius:18px !important;
    }

    .timeline-item h3{
        font-size:20px !important;
    }

}







/* ==========================================================
   ABOUT TIMELINE CARD - TEXT CROP FIX
   ========================================================== */

.timeline{
    align-items:stretch !important;
}

.timeline-item{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
}

.timeline-item > div{
    height:auto !important;
    min-height:230px !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;

    position:relative !important;
}

/* Keep real content above decorative number */

.timeline-item > div > *{
    position:relative !important;
    z-index:2 !important;
}

/* Decorative large number stays behind content */

.timeline-item > div::after{
    z-index:0 !important;
    pointer-events:none !important;
}

/* Better text spacing */

.timeline-item h3{
    position:relative !important;
    z-index:2 !important;

    margin-top:12px !important;
    margin-bottom:14px !important;

    line-height:1.3 !important;
}

.timeline-item p{
    position:relative !important;
    z-index:2 !important;

    margin:0 !important;

    line-height:1.7 !important;

    overflow:visible !important;
}

/* ==========================================================
   MOBILE - NO TEXT CROPPING
   ========================================================== */

@media (max-width:600px){

    .timeline-item > div{
        min-height:0 !important;
        height:auto !important;

        padding:26px 22px 34px !important;
    }

    .timeline-item h3{
        font-size:20px !important;
        line-height:1.35 !important;
    }

    .timeline-item p{
        font-size:14px !important;
        line-height:1.7 !important;
    }
}











/* ==========================================================
   ATHEEQ PREMIUM ABOUT STORY
   ALTERNATIVE HORIZONTAL MILESTONE DESIGN
   ========================================================== */

.timeline{
    position:relative !important;

    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;

    gap:24px !important;

    margin-top:45px !important;
    padding:0 !important;
}


/* Remove old vertical timeline */

.timeline::before{
    display:none !important;
}


/* ==========================================================
   STORY INTRO
   ========================================================== */

.timeline + *{
    margin-top:20px;
}


/* ==========================================================
   MILESTONE CARD
   ========================================================== */

.timeline-item,
.timeline-item:nth-child(even){
    direction:ltr !important;

    position:relative !important;

    display:block !important;

    min-height:0 !important;

    margin:0 !important;
}


/* Remove old center dots */

.timeline-item::before{
    display:none !important;
}


/* Card */

.timeline-item > div{
    position:relative !important;

    width:100% !important;
    min-height:230px !important;

    margin:0 !important;

    padding:32px 28px !important;

    box-sizing:border-box !important;

    border:1px solid rgba(20,135,255,.14) !important;

    border-radius:22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(245,248,252,.88)
        ) !important;

    box-shadow:
        0 14px 40px rgba(7,25,48,.07),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow:hidden !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* Premium blue top line */

.timeline-item > div::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #54b5ff,
            transparent
        );
}


/* Hover */

.timeline-item > div:hover{
    transform:translateY(-8px) !important;

    border-color:rgba(22,140,255,.38) !important;

    box-shadow:
        0 24px 55px rgba(7,25,48,.13),
        0 0 30px rgba(22,140,255,.08) !important;
}


/* ==========================================================
   YEAR / NUMBER
   ========================================================== */

.timeline-item > div:first-child{
    color:#168cff !important;

    font-size:14px !important;
    font-weight:800 !important;

    letter-spacing:.08em !important;
}


/* If year is inside a separate element */

.timeline-item .year{
    display:inline-flex !important;

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

    min-width:58px !important;
    height:30px !important;

    padding:0 12px !important;

    margin-bottom:25px !important;

    border-radius:999px !important;

    background:rgba(22,140,255,.09) !important;

    border:1px solid rgba(22,140,255,.16) !important;

    color:#168cff !important;

    font-size:12px !important;
    font-weight:800 !important;
}


/* ==========================================================
   CARD HEADINGS
   ========================================================== */

.timeline-item h3{
    margin:12px 0 12px !important;

    color:#07101d !important;

    font-size:22px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
}


/* ==========================================================
   CARD TEXT
   ========================================================== */

.timeline-item p{
    margin:0 !important;

    color:#59697d !important;

    font-size:14px !important;

    line-height:1.75 !important;
}


/* ==========================================================
   LARGE YEAR NUMBER EFFECT
   ========================================================== */

.timeline-item:nth-child(1) > div::after{
    content:"2006";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


.timeline-item:nth-child(2) > div::after{
    content:"20+";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


.timeline-item:nth-child(3) > div::after{
    content:"8K+";

    position:absolute;

    right:20px;
    bottom:8px;

    font-size:58px;
    line-height:1;

    font-weight:900;

    color:rgba(22,140,255,.055);

    pointer-events:none;
}


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

@media (max-width:900px){

    .timeline{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .timeline-item > div{
        min-height:190px !important;
    }

}


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

@media (max-width:600px){

    .timeline{
        margin-top:30px !important;
        gap:16px !important;
    }

    .timeline-item > div{
        min-height:180px !important;

        padding:26px 22px !important;

        border-radius:18px !important;
    }

    .timeline-item h3{
        font-size:20px !important;
    }

}











/* =========================================
   ABOUT PAGE - MOBILE RESPONSIVE FIX
   ========================================= */

@media (max-width: 768px) {

    /* Our Story + Timeline */
    .about .section .split {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        align-items: stretch !important;
    }

    .about .section .split > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Our Story text */
    .about .section .split p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .about .section .split h2 {
        font-size: clamp(30px, 9vw, 40px) !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }

    /* Timeline cards */
    .about .timeline {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .about .timeline-item {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 18px !important;
        box-sizing: border-box !important;
    }

    .about .timeline-item > strong {
        flex: 0 0 70px !important;
        width: 70px !important;
    }

    .about .timeline-item > div {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .about .timeline-item h3 {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    .about .timeline-item p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }
}
/* ===== courses.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   COURSES CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.comparison{overflow:auto}

.comparison table{width:100%;border-collapse:collapse;min-width:680px}

.comparison th,.comparison td{padding:15px;border:1px solid var(--border);text-align:left}

.accordion{border-top:1px solid var(--border)}

.courses .inner-hero:after{background-image:url("../assets/images/courses/courses-bg.svg")}

.comparison{overflow:auto}

.comparison table{width:100%;border-collapse:collapse;min-width:680px}

.comparison th,.comparison td{padding:15px;border:1px solid var(--border);text-align:left}









/* =========================================
   COURSES COMPARISON - FULL MOBILE FIX
   ========================================= */

@media (max-width: 768px) {

    .courses .comparison {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .courses .comparison table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        box-sizing: border-box !important;
    }

    .courses .comparison tr {
        width: 100% !important;
    }

    .courses .comparison th,
    .courses .comparison td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 11px 5px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    /* 3 columns */
    .courses .comparison th:nth-child(1),
    .courses .comparison td:nth-child(1) {
        width: 34% !important;
    }

    .courses .comparison th:nth-child(2),
    .courses .comparison td:nth-child(2) {
        width: 28% !important;
    }

    .courses .comparison th:nth-child(3),
    .courses .comparison td:nth-child(3) {
        width: 38% !important;
    }

    /* Enrollment row */
    .courses .comparison td[colspan="2"] {
        width: 66% !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
}
/* ===== repair-tools.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   REPAIR-TOOLS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.repair-tools .image-card img{filter:saturate(.95)}

.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.repair-tools .image-card img{filter:saturate(.95)}







/* =========================================
   REPAIR TOOLS - MOBILE SHOWCASE FIX
   ========================================= */

@media (max-width: 768px) {

    .repair-tools .section .split {
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        align-items: stretch !important;
    }

    .repair-tools .section .split > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Showcase heading */
    .repair-tools .section .split h2 {
        font-size: clamp(30px, 9vw, 40px) !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }

    /* Showcase description */
    .repair-tools .section .split p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    /* Showcase image */
    .repair-tools .section .split .image-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .repair-tools .section .split .image-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 320px !important;
        object-fit: cover !important;
        display: block !important;
    }
}
/* ===== team-partners.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   TEAM-PARTNERS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.partner-strip{display:flex;flex-wrap:wrap;gap:12px}

.partner{padding:15px 20px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.03);font-weight:900}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}

.partner-strip{display:flex;flex-wrap:wrap;gap:12px}

.partner{padding:15px 20px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.03);font-weight:900}













/* ==========================================================
   TEAM MEMBERS - REAL PORTRAIT IMAGES
   AUTO FIT + PERSON FOCUS
   ========================================================== */

/* All team member image boxes */
.team-card img,
.team-member img,
.team-grid img,
.team-list img{
    width:100% !important;
    height:300px !important;

    object-fit:cover !important;
    object-position:center center !important;

    display:block !important;
}


/* ==========================================================
   REAL TEAM IMAGES
   Existing HTML image sources are visually replaced by CSS.
   No HTML editing required.
   ========================================================== */

/* 01 - Rafi Buhary */
.team-card:nth-child(1) img,
.team-member:nth-child(1) img,
.team-grid > *:nth-child(1) img{
    content:url("../assets/images/team-partners/Rafi buhary.svg") !important;
    object-position:center 25% !important;
}

/* 02 - Irshard Najimudeen */
.team-card:nth-child(2) img,
.team-member:nth-child(2) img,
.team-grid > *:nth-child(2) img{
    content:url("../assets/images/team-partners/Irshard Najimudeen.svg") !important;
    object-position:center 25% !important;
}

/* 03 - Mohamed Irfan */
.team-card:nth-child(3) img,
.team-member:nth-child(3) img,
.team-grid > *:nth-child(3) img{
    content:url("../assets/images/team-partners/Mohamed irfan.svg") !important;
    object-position:center 25% !important;
}

/* 04 - Mohamed Inzaam */
.team-card:nth-child(4) img,
.team-member:nth-child(4) img,
.team-grid > *:nth-child(4) img{
    content:url("../assets/images/team-partners/Mohamed inzaam.svg") !important;
    object-position:center 20% !important;
}

/* 05 - Mohamed Ijaz */
.team-card:nth-child(5) img,
.team-member:nth-child(5) img,
.team-grid > *:nth-child(5) img{
    content:url("../assets/images/team-partners/Mohamed ijaz.svg") !important;
    object-position:center 25% !important;
}

/* 06 - Mohamed Sazly */
.team-card:nth-child(6) img,
.team-member:nth-child(6) img,
.team-grid > *:nth-child(6) img{
    content:url("../assets/images/team-partners/Mohamed sazly.svg") !important;
    object-position:center 25% !important;
}

/* 07 - Mohamed Fazlan */
.team-card:nth-child(7) img,
.team-member:nth-child(7) img,
.team-grid > *:nth-child(7) img{
    content:url("../assets/images/team-partners/Mohamed fazlan.svg") !important;
    object-position:center 25% !important;
}


/* ==========================================================
   PREMIUM IMAGE CARD
   ========================================================== */

.team-card img,
.team-member img,
.team-grid img{
    border-radius:16px !important;
    overflow:hidden !important;

    background:#071019 !important;

    transition:
        transform .45s ease,
        object-position .45s ease,
        filter .45s ease !important;
}


/* Subtle premium hover */
.team-card:hover img,
.team-member:hover img,
.team-grid > *:hover img{
    transform:scale(1.025) !important;
    filter:saturate(1.05) contrast(1.02) !important;
}


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

@media (max-width:768px){

    .team-card img,
    .team-member img,
    .team-grid img{
        height:280px !important;
        object-fit:cover !important;
    }
}
/* ===== contact.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   CONTACT CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}

.map{min-height:320px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(135deg,#07111d,#0b1623);display:grid;place-items:center;text-align:center;padding:30px}

.btn-whatsapp{background:#19b96a;border-color:transparent;color:#fff}

.contact .inner-hero:after{background-image:url("../assets/images/contact/sample-generated-contact.svg")}

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}

.map{min-height:320px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(135deg,#07111d,#0b1623);display:grid;place-items:center;text-align:center;padding:30px}











/* =========================================
   CONTACT PAGE - MOBILE RESPONSIVE FIX
   ========================================= */

@media (max-width: 768px) {

    /* Location + FAQ */
    .contact .section .split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 30px !important;
        align-items: stretch !important;
    }

    .contact .section .split > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Location card */
    .contact .map {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact .map h2 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.15 !important;
    }

    .contact .map p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* FAQ */
    .contact .accordion {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact .section-head h2 {
        font-size: clamp(30px, 8vw, 40px) !important;
        line-height: 1.15 !important;
    }

    .contact .acc {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact .acc button {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .contact .acc-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .contact .acc-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}










/* =========================================
   FIX LIVE GOOGLE MAP SIZE
   ========================================= */

.contact .map {
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.contact .map .live-map-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
}

.contact .map .live-map-wrapper iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 430px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    .contact .map .live-map-wrapper {
        height: 300px !important;
        min-height: 300px !important;
        border-radius: 16px !important;
    }

    .contact .map .live-map-wrapper iframe {
        height: 300px !important;
        min-height: 300px !important;
    }
}
/* ===== footer.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   FOOTER CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.footer{background:#030509;border-top:1px solid var(--border);padding:65px 0 28px}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}

.footer h4{margin:0 0 14px}

.footer p,.footer a{color:var(--muted);font-size:13px}

.footer a:hover{color:#fff}


/* ===== forms.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   FORMS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

button,input,textarea,select{font:inherit}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.field label{font-size:12px;font-weight:800}

.field input,.field textarea,.field select{width:100%;background:#080d14;border:1px solid var(--border);color:#fff;padding:13px 14px;border-radius:14px;outline:none}

.field textarea{min-height:130px;resize:vertical}

.mobile-drawer.open{transform:none}


/* ===== gallery.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   GALLERY CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1500;display:none;place-items:center;padding:30px}

.lightbox.open{display:grid}

.lightbox img{max-height:88vh;max-width:92vw;border-radius:18px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.gallery img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:16px;border:1px solid var(--border);cursor:zoom-in;transition:.3s}

.gallery img:hover{transform:scale(1.02)}


/* ===== buttons.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   BUTTONS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.btn{border:1px solid var(--border);padding:12px 18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:13px;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}

.btn:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,.25)}

.btn-primary{background:linear-gradient(135deg,#0876ed,#24a4ff);border-color:transparent;color:#fff}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

.cta{padding:70px 0;background:linear-gradient(135deg,#071a30,#0a1018);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.cta-box{display:flex;align-items:center;justify-content:space-between;gap:25px}

.cta h2{margin:0;font-size:clamp(30px,4vw,48px)}

.acc button{width:100%;padding:18px 0;background:transparent;border:0;color:#fff;text-align:left;display:flex;justify-content:space-between;font-weight:800;cursor:pointer}


/* ===== cards.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   CARDS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.course-card{position:relative;overflow:hidden}

.course-card:after{content:"";position:absolute;inset:auto -20% -55% -20%;height:150px;background:radial-gradient(circle,rgba(22,135,255,.16),transparent 65%);pointer-events:none}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:.3s;box-shadow:0 14px 40px rgba(0,0,0,.12)}

.card:hover{transform:translateY(-7px);border-color:rgba(94,178,255,.4)}

.card h3{margin:0 0 8px}

.image-card img{aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin-bottom:18px}

.team-card{padding:12px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.025)}

.team-card img{aspect-ratio:1;object-fit:cover;border-radius:14px;margin-bottom:12px}

.team-card h3{font-size:15px;margin:0}

.team-card p{font-size:11px;margin:3px 0 5px}

.course-card{position:relative;overflow:hidden}

.course-card:after{content:"";position:absolute;inset:auto -20% -55% -20%;height:150px;background:radial-gradient(circle,rgba(22,135,255,.16),transparent 65%);pointer-events:none}


/* ===== animations.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   ANIMATIONS CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

.floating-wa{position:fixed;right:22px;bottom:22px;z-index:900;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#19b96a;color:#fff;font-weight:900;box-shadow:0 14px 38px rgba(25,185,106,.3);animation:pulse 2.6s infinite}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}

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

.acc-content{max-height:0;overflow:hidden;transition:max-height .35s}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}


/* ===== responsive.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   RESPONSIVE CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

@media(max-width:800px){.product-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.product-grid{grid-template-columns:1fr}}

@media(max-width:850px){.contact-grid{grid-template-columns:1fr}}

@media(max-width:980px){.nav-links,.nav-cta{display:none}.menu-btn{display:block}.hero-grid,.split{grid-template-columns:1fr}.hero{min-height:auto}.stats-grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr 1fr}.team-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.hero-visual{max-width:720px}.cta-box{display:grid}}

@media(max-width:640px){.container{width:min(100% - 28px,1180px)}.nav{height:72px}.hero{padding:125px 0 60px}.hero h1{font-size:44px}.section{padding:70px 0}.cards,.gallery,.team-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:22px 14px}.stat strong{font-size:24px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid}.timeline-item{grid-template-columns:1fr}.btn{width:100%}.actions{display:grid}.hero-badge{right:8px;bottom:10px}.floating-wa{right:14px;bottom:14px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media(max-width:640px){.home-hero{min-height:88vh;padding:120px 0 70px}.home-hero .hero-content{min-height:64vh}.home-hero .hero-overlay{background:linear-gradient(180deg,rgba(3,7,12,.88),rgba(3,7,12,.72) 45%,rgba(3,7,12,.94)),linear-gradient(90deg,rgba(3,7,12,.72),rgba(3,7,12,.5))}.hero-slider-ui{right:14px;bottom:20px}.inner-hero{min-height:38vh;padding:120px 0 55px}.inner-hero h1{font-size:clamp(38px,12vw,56px)}}

@media(prefers-reduced-motion:reduce){.home-hero .hero-slide{transition:none;transform:none}.hero-slider-ui{display:none}}

@media(max-width:980px){.inner-hero .inner-hero-content{padding-left:28px;padding-right:24px}}

@media(max-width:640px){.inner-hero .inner-hero-content{padding-left:14px;padding-right:14px}}

@media(max-width:850px){.contact-grid{grid-template-columns:1fr}}

@media(max-width:800px){.product-grid{grid-template-columns:1fr 1fr}}

@media(max-width:560px){.product-grid{grid-template-columns:1fr}}


/* ===== base.css ===== */

/* ==========================================================
   ATHEEQ TECHNICAL INSTITUTE

   BASE CSS

   EDIT THIS FILE DIRECTLY.

   Changes made here are automatically loaded by:
   css/main.css

   ========================================================== */

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

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

.container{width:min(1180px,calc(100% - 40px));margin:auto}

.skip{position:absolute;left:-9999px}

.skip:focus{left:16px;top:16px;z-index:999;background:#fff;color:#000;padding:10px 14px}

.section{padding:100px 0}

.section.light{background:#f6f8fb;color:#0a111a}

.section-head{max-width:760px;margin-bottom:44px}

.section h2{font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.04em;margin:10px 0 16px}

.light p{color:#566274}

.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}

.field{display:grid;gap:7px}

.field.full{grid-column:1/-1}

.notice{padding:13px 15px;border-radius:14px;background:rgba(22,135,255,.08);border:1px solid rgba(22,135,255,.18);font-size:12px;color:#bcd7f3}

.timeline{display:grid;gap:14px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

.tab{cursor:pointer}

.tab.active{background:#fff;color:#05070b}

.panel{display:none}

.panel.active{display:block}

.acc.open .acc-content{max-height:300px}

.acc-content p{padding:0 0 18px}

.drawer-links{display:grid;gap:8px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100;display:none}

.overlay.open{display:block}