@media(max-width:1200px){

:root{

--fs-5xl:3.5rem;

}

}

@media(max-width:992px){

:root{

--fs-5xl:3rem;

}

}

@media(max-width:768px){

:root{

--fs-5xl:2.4rem;

--fs-4xl:2rem;

}

}

@media(max-width:576px){

:root{

--fs-5xl:2rem;

--fs-4xl:1.75rem;

}

}

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

@media(max-width:992px){

.nav-menu{

display:none;

}

.nav-actions .btn{

display:none;

}

.hamburger{

display:flex;

}

}

/*===================================
Mobile Courses Dropdown
===================================*/

.mobile-dropdown{

    width:100%;

}

.mobile-dropdown-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0;

    background:none;

    border:none;

    font-size:16px;

    font-weight:600;

    color:var(--secondary);

    cursor:pointer;

}

.mobile-submenu{

    max-height:0;

    overflow:hidden;

    margin:0;

    padding:0;

    list-style:none;

    transition:max-height .35s ease;

}

.mobile-dropdown.active .mobile-submenu{

    max-height:300px;

    margin-top:12px;

}

.mobile-submenu li{

    margin:0;

}

.mobile-submenu a{

    display:block;

    padding:10px 0 10px 18px;

    font-size:15px;

    color:var(--muted);

}

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

@media(max-width:576px){

.top-right{

display:none;

}

.top-bar-wrapper{

justify-content:center;

}

.mobile-menu{

width:100%;

}

.mobile-menu > ul{

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:0;

    margin:30px 0;

}

.mobile-menu > ul > li{

    margin:0;

    list-style:none;

}

}

@media(max-width:992px){

.hero-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:30px;

    text-align:center;

}

.hero-content{

    width:100%;

    max-width:620px;

}

.hero-content h1{

    font-size:42px;

    line-height:1.2;

}

.hero-content p{

    margin:auto;

    max-width:560px;

}

.hero-features{

    grid-template-columns:1fr;

}

.hero-buttons{

    flex-direction:column;

    gap:16px;

    justify-content:center;

    width:100%;

    max-width:420px;

    margin:auto;

}

.hero-image{

    margin-top:40px;

    min-height:auto;

    width:100%;

    max-width:100%;

    padding:0 16px;

}

.hero-image img{

    width:100%;

    max-width:420px;

    height:auto;

}

.hero-card{

    position:static;

    margin:20px auto 0;

    left:auto;

    right:auto;

    top:auto;

    bottom:auto;

    width:min(360px,100%);

}

.hero-blob{

    width:320px;

    height:340px;

}

.hero-orange-circle,

.hero-shape-1,

.hero-shape-2,

.hero-dots-left,

.hero-dots-right,

.floating-circle{

    display:none;

}

}

@media(max-width:768px){

.hero-card {
    display: none;
}

/* .hero-content h1{

    font-size:36px;

}

.hero-features{

    gap:16px;

}

.hero-buttons{

    width:100%;

}

.hero-card{

    width:100%;

}

.hero-image img{

    max-width:360px;

}

.hero-blob{

    width:260px;

    height:290px;

} */

} 

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

.hero-mobile-stats{
    display:none;
}

@media (max-width:768px){

    .hero-section{
        padding:70px 0;
    }

    .hero-wrapper{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:40px;
    }

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

    .hero-content{
        width:100%;
        max-width:100%;
    }

    .hero-content h1{
        font-size:36px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .hero-content p{
        max-width:100%;
        margin:0 auto 28px;
        font-size:16px;
        line-height:1.7;
    }

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

    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:14px;
        width:100%;
        max-width:300px;
        margin:0 auto;
    }

    .hero-buttons .btn{
        width:100%;
    }

    /*==============================
    FEATURES
    ==============================*/

    .hero-features{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:35px;
    }

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

    .hero-image{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:100%;
        padding:20px 0 40px;
        min-height:auto;
    }

    .hero-image img{
        width:320px;
        max-width:100%;
        height:auto;
        position:relative;
        z-index:2;
    }

    /*==============================
    BLUE OVAL
    ==============================*/

    .hero-blob{
        width:320px;
        height:340px;

        position:absolute;

        left:50%;
        top:40px;

        transform:translateX(-50%);

        z-index:1;
    }

    /*==============================
    HIDE DESKTOP FLOATING CARDS
    ==============================*/

    .hero-card{
        display:none;
    }

    /*==============================
    REMOVE DECORATION
    ==============================*/

    .hero-orange-circle,
    .hero-shape-1,
    .hero-shape-2,
    .hero-dots-left,
    .hero-dots-right,
    .floating-circle{
        display:none;
    }

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

    .hero-mobile-stats{

        display:flex;

        flex-direction:column;

        gap:18px;

        width:100%;

        max-width:320px;

        margin:35px auto 0;

    }

    .mobile-stat-card{

        display:flex;

        align-items:center;

        gap:18px;

        background:#fff;

        padding:18px 22px;

        border-radius:18px;

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

    }

    .mobile-stat-card span{

        width:52px;

        height:52px;

        border-radius:16px;

        display:flex;

        align-items:center;

        justify-content:center;

        background:#eef4ff;

        color:var(--primary);

        font-size:28px;

        flex-shrink:0;

    }

    .mobile-stat-card h3{

        font-size:22px;

        color:var(--secondary);

        margin-bottom:4px;

    }

    .mobile-stat-card p{

        margin:0;

        color:#6b7280;

        font-size:14px;

        line-height:1.5;

    }

    /*==============================
    SCROLL INDICATOR
    ==============================*/

    .scroll-indicator{
        margin-top:35px;
    }

}

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

@media (max-width:576px){

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:15px;
    }

    .hero-image{
        display: none;
    }

    /* .hero-image img{
        width:240px;
    }

    .hero-blob{
        width:190px;
        height:220px;
        top:50px;
    } */

    .hero-mobile-stats{
        max-width:100%;
        padding:0 12px;
    }

    .mobile-stat-card{
        padding:16px 18px;
    }

    .mobile-stat-card h3{
        font-size:20px;
    }

}



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

.hero-content h1{

    font-size:32px;

}

.hero-content p{

    font-size:16px;

}

.hero-badge{

    padding:10px 16px;

}

.hero-buttons{

    gap:12px;

    padding:0 12px;

}

.hero-card{

    margin:16px auto 0;

}

.hero-image{

    padding:0 12px;

}

.hero-image img{

    max-width:100%;

}

} */


@media(max-width:576px){

.stats-grid{

grid-template-columns:1fr;

}

.trusted-logos img{

height:28px;

}

} 

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

@media(max-width:992px){

.course-grid{

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

}

}

@media(max-width:768px){

.course-section{

padding:80px 0;

}

.section-heading h2{

font-size:36px;

}

.course-grid{

grid-template-columns:1fr;

}

.course-card{

padding:28px;

}

}

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

@media(max-width:992px){

.why-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.why-content{

text-align:center;

}

.why-item{

text-align:left;

}

.image-bg{

width:340px;

height:340px;

}

.why-image img{

width:340px;

}

.experience-card{

left:50%;

transform:translateX(-50%);

}

}

@media (max-width:768px){

    .why-wrapper{

        grid-template-columns:1fr;

    }

    .why-content{

        width:100%;
        max-width:100%;

    }

    .why-content h2{

        width:100%;
        max-width:100%;
        font-size:34px;
        line-height:1.2;
        word-break:normal;
    }

}

/* ==========================================================
   LEARNING CENTERS - MOBILE RESPONSIVE
========================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------
       SECTION
    ------------------------------------------ */

    .location-section {
        padding: 55px 16px 70px;
        overflow: hidden;
    }


    /* ------------------------------------------
       HEADING
    ------------------------------------------ */

    .location-heading {
        width: 100%;
        max-width: 100%;
        padding: 0 8px;
        margin-bottom: 35px;
    }

    .location-heading h2 {
        font-size: 34px;
        line-height: 1.15;
        margin: 15px 0;
    }

    .location-heading p {
        font-size: 15px;
        line-height: 1.7;
        max-width: 340px;
    }


    /* ------------------------------------------
       ROAD WRAPPER
       
       On mobile we no longer use the desktop
       absolute-positioned road layout.
    ------------------------------------------ */

    .location-road-wrapper {
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }


    /* ------------------------------------------
       HIDE DESKTOP ROAD
       
       The curved SVG road is useful on desktop,
       but on a small phone it causes overlapping.
    ------------------------------------------ */

    .location-road {
        display: none;
    }


    /* ------------------------------------------
       LOCATION CARDS
    ------------------------------------------ */

    .location-card {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100%;
        max-width: 360px;

        padding: 12px 12px 16px;

        border-radius: 18px;

        box-sizing: border-box;

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

        margin: 0 auto;
    }


    /* ------------------------------------------
       REMOVE HOVER MOVEMENT ON TOUCH
    ------------------------------------------ */

    .location-card:hover {
        transform: none;

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


    /* ------------------------------------------
       IMAGE
    ------------------------------------------ */

    .location-image {
        width: 100%;
        height: 145px;

        border-radius: 13px;
    }


    .location-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* ------------------------------------------
       CONTENT
    ------------------------------------------ */

    .location-content {
        padding: 12px 5px 2px;
    }


    .location-content h3 {
        font-size: 18px;
        line-height: 1.3;
    }


    .location-content p {
        margin: 5px 0 10px;
        font-size: 13px;
    }


    /* ------------------------------------------
       VIEW CENTER
    ------------------------------------------ */

    .view-center {
        font-size: 12px;
        gap: 5px;
    }


    .view-center span {
        font-size: 16px;
    }


    /* ------------------------------------------
       RESET ALL DESKTOP POSITIONS
    ------------------------------------------ */

    .location-one,
    .location-two,
    .location-three {
        position: relative;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        width: 100%;
        max-width: 360px;

        margin: 0 auto;
    }


    /* ------------------------------------------
       COMING SOON CARD
    ------------------------------------------ */

    .coming-soon {
        width: 100%;
    }


    .coming-soon .location-image {
        height: 145px;
    }


    .coming-icon {
        width: 58px;
        height: 58px;
    }


    .coming-icon .material-symbols-outlined {
        font-size: 36px;
    }


    /* ------------------------------------------
       HIDE ROAD NODES
    ------------------------------------------ */

    .road-node {
        display: none;
    }

}


/* ==========================================================
   SMALL PHONES
   480px AND BELOW
========================================================== */

@media (max-width: 480px) {

    .location-section {
        padding: 45px 12px 65px;
    }


    .location-heading {
        margin-bottom: 28px;
    }


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


    .location-heading p {
        font-size: 14px;
        line-height: 1.65;
    }


    .location-road-wrapper {
        max-width: 100%;
        gap: 14px;
    }


    .location-card {
        max-width: 100%;
        padding: 10px 10px 15px;
        border-radius: 17px;
    }


    .location-image {
        height: 135px;
        border-radius: 12px;
    }


    .location-content {
        padding-top: 11px;
    }


    .location-content h3 {
        font-size: 17px;
    }


    .location-content p {
        font-size: 12px;
        margin-bottom: 9px;
    }


    .view-center {
        font-size: 11px;
    }

}

/*======================================================
                TESTIMONIALS
======================================================*/

@media(max-width:992px){

.testimonial-card{

flex:0 0 calc(50% - 15px);

}

.slider-btn{

display:none;

}

}

@media(max-width:768px){

.testimonial-section{

padding:80px 0;

}

.testimonial-track{

gap:20px;

}

.testimonial-card{

flex:0 0 100%;

padding:28px;

}

.student-info{

flex-direction:column;

text-align:center;

}

.company{

flex-direction:column;

gap:10px;

text-align:center;

}

}

/* =========================================================
   LEADERSHIP SECTION - TABLET
========================================================= */

@media (max-width: 992px) {

    /* -------------------------
       FOUNDER SECTION
    ------------------------- */

    .mentors-wrapper {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .founder-image {
        flex: 0 0 42%;
    }

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

    .founder-content {
        flex: 1;
    }


    /* -------------------------
       MENTORS
    ------------------------- */

    .mentor-track-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .mentor-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
        width: max-content;

        animation: mentorInfiniteScroll 25s linear infinite;
    }

    .mentor-card {
        flex: 0 0 260px;
        width: 260px;
        height: 260px;
    }

}


/* =========================================================
   LEADERSHIP SECTION - MOBILE
========================================================= */

@media (max-width: 768px) {

    /* -------------------------
       FOUNDER SECTION
    ------------------------- */

    .mentors-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;

        width: 100%;
        text-align: center;
    }


    /* Founder image */

    .founder-image {
        width: 100%;
        max-width: 320px;

        flex: none;
    }

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

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

        display: block;

        border-radius: 16px;
    }


    /* Founder content */

    .founder-content {
        width: 100%;
        max-width: 500px;

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

        text-align: center;
    }


    .founder-content .section-badge {
        margin-bottom: 10px;
    }


    .founder-content h2 {
        margin-bottom: 14px;

        font-size: clamp(
            28px,
            7vw,
            38px
        );

        line-height: 1.15;
    }


    .founder-content p {
        max-width: 480px;

        margin: 0 auto 14px;

        line-height: 1.7;
    }


    .founder-content blockquote {
        max-width: 480px;

        margin: 0 auto 10px;

        line-height: 1.6;
    }


    .founder-content h4 {
        margin-top: 4px;
    }


    /* -------------------------
       MENTOR HEADING
    ------------------------- */

    .section-heading {
        text-align: center;
        margin-bottom: 20px;
    }


    .section-heading h2 {
        font-size: clamp(
            28px,
            7vw,
            38px
        );

        line-height: 1.15;
    }


    /* -------------------------
       MENTOR HORIZONTAL SCROLL
    ------------------------- */

    .mentor-track-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .mentor-track {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;

        width: max-content;

        animation: mentorInfiniteScroll 22s linear infinite;
    }


    .mentor-card {
        flex: 0 0 220px;
        width: 220px;
        height: 220px;
    }


    /* Show mentor overlay on mobile */

    .mentor-overlay {
        opacity: 1;

        background: linear-gradient(
            transparent 30%,
            rgba(0, 0, 0, .75)
        );
    }


    .mentor-overlay h4,
    .mentor-overlay p {
        transform: none;
    }

}


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

@media (max-width: 480px) {

    .founder-image {
        max-width: 280px;
    }

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

    .founder-content {
        padding: 0 5px;
    }

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

    .founder-content p {
        font-size: 15px;
        line-height: 1.65;
    }

    .founder-content blockquote {
        font-size: 14px;
    }


    /* Mentor cards */

    .mentor-card {
        flex: 0 0 200px;
        width: 200px;
        height: 200px;
    }

}


/* =========================================================
   INFINITE MENTOR ANIMATION
========================================================= */

@keyframes mentorInfiniteScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* Pause while touching/hovering */
.mentor-track:hover {
    animation-play-state: paused;
}

/* =========================================================
   SOFTWARE COURSES PAGE - MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

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

    .page-hero {
        padding: 45px 0 35px;
    }

    .page-hero .container {
        width: 100%;
    }

    .courses-breadcrumb {
        margin-bottom: 20px;

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

        font-size: 13px;
    }

    .page-hero .eyebrow {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .page-hero h1 {
        font-size: clamp(32px, 9vw, 44px);
        line-height: 1.1;

        margin-bottom: 14px;
    }

    .page-hero h1 .soft-car {
        display: inline;
    }

    .page-hero p {
        max-width: 100%;

        font-size: 15px;
        line-height: 1.65;

        margin: 0;
    }


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

    .courses-section {
        padding-top: 40px;
        padding-bottom: 50px;
    }


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

    .section-header {
        width: 100%;

        margin-bottom: 25px;

        text-align: left;
    }

    .section-header > .eyebrow {
        display: block;

        font-size: 13px;
        margin-bottom: 7px;
    }


    /* Heading + description
       should NOT stay side-by-side */
    .section-sub {
        display: block;

        width: 100%;
    }

    .section-sub h2 {
        margin: 0 0 8px;

        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.15;
    }

    .section-sub p {
        margin: 0;

        max-width: 100%;

        font-size: 14px;
        line-height: 1.6;
    }


    /* ==========================================
       COURSE GRID
    ========================================== */

    .course-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

        width: 100%;
    }


    /* ==========================================
       COURSE CARD
       
       Keep existing card design.
       Only make sure it doesn't overflow.
    ========================================== */

    .course-modern-card {
        width: 100%;
        min-width: 0;
    }

    .course-card-content {
        min-width: 0;
    }

    .course-card-heading {
        gap: 10px;
    }

    .course-card-heading h3 {
        min-width: 0;

        font-size: 17px;
        line-height: 1.3;
    }

    .course-card-content p {
        font-size: 14px;
        line-height: 1.55;
    }

    /* Course Mobile Menu Styling */
    .course-mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .course-mobile-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .course-mobile-menu li:last-child {
        border-bottom: none;
    }

    .course-mobile-menu a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        color: var(--text-secondary, #555);
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .course-mobile-menu a:hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    .course-mobile-menu .dropdown-icon {
        font-size: 20px;
        color: var(--primary, #007bff);
        flex-shrink: 0;
    }

    .course-mobile-menu .dropdown-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }

    .course-mobile-menu .dropdown-text small {
        font-size: 12px;
        color: var(--text-tertiary, #999);
        line-height: 1.4;
    }

}