/*==================================================
    RESPONSIVE POLISH
    Tablet and mobile only. Desktop remains untouched.
==================================================*/

@media (max-width: 991px) {

    :root {
        --mobile-page-x: clamp(18px, 5vw, 44px);
        --mobile-section-y: clamp(25px, 6vw, 50px);
        --mobile-card-radius: 22px;
        --mobile-soft-shadow: 0 16px 40px rgba(15, 23, 42, .08);
        --mobile-strong-shadow: 0 22px 52px rgba(15, 23, 42, .12);
    }

    html {
        scroll-padding-bottom: 110px;
    }

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    .container {
        width: 100%;
        max-width: none;
        padding-left: var(--mobile-page-x);
        padding-right: var(--mobile-page-x);
    }

    .section-title,
    .courses-home .section-title,
    .achievements .section-title,
    .testimonials .section-title {
        width: 100%;
        max-width: 720px;
        margin: 0 auto clamp(30px, 6vw, 48px);
        padding: 0;
    }

    .section-title h2,
    .about-content h2,
    .internship-content h2,
    .about-right h2,
    .banner-content h1,
    .contact-hero h1,
    .enroll-hero h1,
    .course-overview h2,
    .gallery-hero-content h1 {
        font-size: clamp(30px, 7vw, 46px);
        line-height: 1.16;
        letter-spacing: 0;
    }

    .section-title p,
    .hero-left p,
    .about-content p,
    .internship-content p,
    .banner-content p,
    .about-right p,
    .contact-hero p,
    .enroll-hero p,
    .gallery-hero-content p {
        font-size: clamp(14px, 2.1vw, 16px);
        line-height: 1.78;
    }

    .section-tag,
    .badge,
    .cta-tag {
        max-width: 100%;
        line-height: 1.2;
        white-space: normal;
    }

    .btn-fill,
    .btn-outline,
    .course-btn,
    .gallery-filter button,
    .download-btn {
        min-height: 48px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .btn-fill:active,
    .btn-outline:active,
    .course-btn:active,
    .gallery-filter button:active {
        transform: scale(.97);
    }

    /*.hero,*/
    .page-banner,
    .gallery-hero,
    .contact-hero,
    .enroll-hero {
        padding-top: clamp(28px, 7vw, 64px);
        padding-bottom: clamp(42px, 8vw, 70px);
    }

    .hero-container,
    .banner-container,
    .about-container,
    .about-intro-container,
    .internship-container,
    .contact-container,
    .enroll-container,
    .gallery-hero-wrapper {
        gap: clamp(30px, 6vw, 52px);
    }

    .hero-left {
        text-align: center;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-left p {
        width: 100%;
        max-width: min(100%, 680px);
        padding-inline: 0;
        overflow-wrap: break-word;
    }

    .hero-mobile-top {
        width: 100%;
        justify-content: center;
        padding: 0 2px;
        min-width: 0;
    }

    .hero-mobile-logo img {
        width: clamp(76px, 17vw, 110px);
    }

    .hero-mobile-title {
        margin-left: clamp(12px, 3vw, 20px);
        min-width: 0;
    }

    .hero-mobile-title h2 {
        font-size: clamp(22px, 5.2vw, 32px);
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .hero-mobile-image {
        width: min(calc(100vw - (var(--mobile-page-x) * 2)), 460px);
        margin: clamp(18px, 4vw, 30px) auto 12px;
    }

    .hero-mobile-image img {
        width: 150%;
        max-width: none;
        padding-left: 0;
    }

    .mobile-glow {
        width: min(72vw, 380px);
        height: min(72vw, 380px);
    }

    .mobile-card {
        width: 55%;
        min-height: 54px;
        border-radius: 16px;
    }

    .mobile-card h3,
    .mobile-card p {
        overflow-wrap: anywhere;
    }

    .mobile-card1,
    .mobile-card3 {
        left: -70 !important;
    }

    .mobile-card2 {
        left: auto !important;
        right: 0 !important;
    }

    /*.hero-buttons,*/
    .banner-buttons,
    .cta-buttons {
        width: 100%;
        justify-content: center;
        align-items: stretch;
        gap: 12px;
    }

    .hero-buttons .btn-fill {
        flex: 1 1 auto;
        max-width: 260px;
    }

    .btn-contact-icon {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }

    .hero-trust {
        width: min(100%, 420px);
        margin-inline: auto;
    }

    .about,
    .internship,
    .courses-home,
    .achievements,
    .testimonials,
    .director,
    .cta,
    .about-intro,
    .mission,
    .journey,
    .why-about,
    .contact-info,
    .contact-form-section,
    .enroll-section,
    .enroll-benefits,
    body .gallery-section,
    body .gallery-cta {
        padding-top: var(--mobile-section-y);
        padding-bottom: var(--mobile-section-y);
    }
    
@media (max-width: 991px) {
    .about-image img{
        height: 100%;
    }
}


    /*.about-image img,*/
    .internship-image img,
    .banner-image img,
    .about-left img,
    .contact-image img,
    .enroll-image img {
        max-width: min(100%, 520px);
        border-radius: var(--mobile-card-radius);
    }

    .about-badge,
    .intern-card {
        box-shadow: var(--mobile-soft-shadow);
    }

    .about-features,
    .internship-features,
    .about-points,
    .mission-grid,
    .info-grid,
    .benefit-grid {
        gap: 14px;
    }

    .feature,
    .internship-item,
    .about-points div,
    .info-card,
    .mission-card,
    .journey-card,
    .benefit-card,
    .meta-box,
    .stat-card,
    .gallery-highlights div {
        border-radius: var(--mobile-card-radius);
        box-shadow: var(--mobile-soft-shadow);
    }

    .feature,
    .internship-item,
    .about-points div {
        min-height: 58px;
        align-items: center;
    }

    .why,
    .courses-home,
    .achievements,
    .testimonials,
    body .gallery-section {
        overflow: hidden;
    }

    .why .container,
    .courses-home .container,
    .achievements .container,
    .testimonials .container,
    body .gallery-section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .why .section-title,
    .courses-home .section-title,
    .achievements .section-title,
    .testimonials .section-title,
    body .gallery-section .section-title {
        padding-left: var(--mobile-page-x);
        padding-right: var(--mobile-page-x);
    }

    .why-grid,
    .course-grid,
    .achievement-grid,
    .testimonial-grid,
    body .gallery-grid {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: stretch;
        gap: 18px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--mobile-page-x);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px var(--mobile-page-x) 24px;
        margin: 0;
    }

    .why-grid::-webkit-scrollbar,
    .course-grid::-webkit-scrollbar,
    .achievement-grid::-webkit-scrollbar,
    .testimonial-grid::-webkit-scrollbar,
    body .gallery-grid::-webkit-scrollbar {
        display: none;
    }

    .why-card,
    .course-card,
    .achievement-card,
    .testimonial-card,
    body .gallery-card {
        flex: 0 0 clamp(300px, 42vw, 370px) !important;
        max-width: none !important;
        min-height: auto;
        height: auto;
        margin: 0 !important;
        border-radius: var(--mobile-card-radius);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-shadow: var(--mobile-soft-shadow);
        transform: none !important;
    }

    .why-card,
    .achievement-card,
    .testimonial-card,
    .course-card,
    body .gallery-card {
        display: flex;
        flex-direction: column;
    }

    .why-card:hover,
    .course-card:hover,
    .achievement-card:hover,
    .testimonial-card:hover,
    body .gallery-card:hover {
        box-shadow: var(--mobile-strong-shadow);
    }

    .why-card:active,
    .course-card:active,
    .achievement-card:active,
    .testimonial-card:active,
    body .gallery-card:active {
        transform: scale(.985) !important;
    }

    .course-card img,
    body .gallery-card img,
    body .gallery-card video,
    body .document-preview {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .course-content,
    .certificate-info {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .course-content ul,
    .course-btn,
    .certificate-info span {
        margin-top: auto;
    }

    .course-content h3,
    .certificate-info h3,
    .why-content h3,
    .why-card h3,
    .achievement-title,
    .testimonial-card h3 {
        overflow-wrap: anywhere;
    }

    .contact-form,
    .enroll-form {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
        padding: clamp(24px, 5vw, 36px);
        /* border-radius: 24px;
        background: #fff;
        box-shadow: var(--mobile-strong-shadow); */
    }

    .contact-form form,
    .enroll-form form {
        gap: 16px;
    }

    .contact-form input,
    .contact-form textarea,
    .enroll-form input,
    .enroll-form select,
    .enroll-form textarea {
        min-height: 50px;
        border-radius: 14px;
        font-size: 16px;
    }

    .contact-form textarea,
    .enroll-form textarea {
        min-height: 132px;
    }

    .contact-form .btn-fill,
    .enroll-form .btn-fill,
    .enroll-form button {
        width: 100%;
        max-width: none;
    }

    .working-hours,
    .contact-social {
        width: 100%;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-social {
        justify-content: center;
    }

    body .gallery-filter {
        justify-content: flex-start;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px var(--mobile-page-x) 16px;
        margin: 0 calc(var(--mobile-page-x) * -1) 34px;
    }

    body .gallery-filter::-webkit-scrollbar {
        display: none;
    }

    body .gallery-filter button {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    #galleryModal {
        padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    }

    .modal-content {
        max-height: 86vh;
    }

    .close-modal {
        top: 10px;
        right: 10px;
        z-index: 2;
    }

    .modal-prev,
    .modal-next {
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .modal-prev {
        left: 18px;
    }

    .modal-next {
        right: 18px;
    }

    .cta-box {
        border-radius: 24px;
        padding: clamp(42px, 8vw, 64px) clamp(22px, 6vw, 44px);
    }

    .footer {
        padding-bottom: calc(1px + env(safe-area-inset-bottom));
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 26px;
    }

    .footer-logo {
        align-items: center;
    }

    .footer-col p {
        max-width: none;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }

    .app-nav {
        width: min(calc(100% - 18px), 660px);
        height: 74px;
        padding: 10px clamp(12px, 3vw, 22px);
        border: 1px solid rgba(239, 144, 45, .10);
        box-shadow: 0 18px 48px rgba(15, 23, 42, .16);
    }

    .app-nav-item {
        min-width: 0;
        min-height: 54px;
        border-radius: 18px;
    }

    .app-nav-item.active {
        background: #fff7ef;
    }

    .fab-action {
        min-height: 52px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    .about-features,
    .internship-features,
    .about-points,
    .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mission-grid,
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: 1.25fr 1fr 1fr;
    }

    .footer-col:first-child {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {

    .container {
        padding-left: clamp(16px, 5vw, 24px);
        padding-right: clamp(16px, 5vw, 24px);
    }

    .hero .container,
    .hero-container,
    .hero-left {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .hero .container {
        padding-left: 0;
        padding-right: 0;
    }

    .hero {
        padding-bottom: 25px;
    }

    .hero-mobile-top,
    .hero-left p,
    .hero-buttons,
    .hero-trust {
        padding-left: 24px;
        padding-right: 24px;
    }

    .hero-buttons {
        flex-wrap: nowrap;
    }

    .hero-buttons .btn-fill {
        max-width: none;
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-mobile-image {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        overflow: hidden;
        border-radius: 24px;
    }

    .hero-mobile-image img {
        width: min(82vw, 320px) !important;
    }

    .hero-left p {
        width: calc(100vw - 48px) !important;
        max-width: 320px !important;
        padding-left: 0;
        padding-right: 18px;
        font-size: 10px;
    }

    /* .mobile-card {
        display: none !important;
    }  */

    .mobile-card {
        width: min(118px, 31vw);
    }

    .mobile-card2 {
        right: 6px !important;
    }

    .banner-buttons,
    .cta-buttons {
        flex-direction: column;
    }

    .banner-buttons .btn-fill,
    .banner-buttons .btn-outline,
    .cta-buttons .btn-fill,
    .cta-buttons .btn-outline {
        width: 100%;
    }

    .why-card,
    .course-card,
    .achievement-card,
    .testimonial-card,
    body .gallery-card {
        flex-basis: min(86vw, 330px) !important;
    }

    .about-badge {
        right: 0;
        max-width: calc(100% - 20px);
    }

    .intern-card {
        max-width: 52vw;
    }

    .form-row {
        flex-direction: column;
        gap: 14px;
    }

    .gallery-highlights,
    .gallery-stats {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-col h4::after {
        align-content: center;
    }

    .footer-bottom-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
    }
}

@media (max-width: 400px) {

    :root {
        --mobile-page-x: 16px;
    }

    body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .hero-mobile-title h2 {
        font-size: 22px;
    }

    .hero-mobile-logo img {
        width: 72px;
    }

    .mobile-card {
        width: 130px;
        padding: 7px;
        gap: 6px;
    }

    .mobile-card i {
        width: 28px;
        height: 28px;
    }

    .why-card,
    .course-card,
    .achievement-card,
    .testimonial-card,
    body .gallery-card {
        flex-basis: min(90vw, 300px) !important;
    }

    .contact-form,
    .enroll-form,
    .mission-card,
    .benefit-card,
    .info-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .app-nav {
        bottom: calc(10px + env(safe-area-inset-bottom));
        height: 66px;
        border-radius: 22px;
    }

    .app-nav-item span {
        font-size: 8px;
    }

    .fab-btn {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 340px) {

    .hero-mobile-top {
        gap: 8px;
    }

    .hero-mobile-title {
        margin-left: 8px;
    }

    .hero-mobile-title h2 {
        font-size: 22px;
    }

    .btn-contact-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .hero-buttons .btn-fill {
        font-size: 14px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-nav {
        width: calc(100% - 10px);
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 991px) and (orientation: landscape) {

    .hero,
    .page-banner,
    .gallery-hero,
    .contact-hero,
    .enroll-hero {
        padding-top: 24px;
    }

    .hero-mobile-image {
        width: min(62vw, 390px);
    }

    .hero-mobile-image img {
        width: min(58vw, 360px);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

    .hero-mobile-image img,
    .mobile-card,
    .why-grid,
    .achievement-grid,
    .testimonial-grid {
        animation: none !important;
    }
}

/*==================================================
    ABOUT PAGE MOBILE POLISH
==================================================*/

@media (max-width:991px){

    /* Hero */

    .banner-container{
        flex-direction:column-reverse;
        text-align:center;
        gap:40px;
    }

    .banner-content,
    .banner-image{
        width:100%;
    }

    .banner-content p{
        max-width:100%;
        margin-inline:auto;
    }

    .banner-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .banner-buttons .btn-fill,
    .banner-buttons .btn-outline{
        width:100%;
    }

    .banner-image img{
        max-width:380px;
        margin:auto;
    }

    /* About Intro */

    .about-intro-container{
        flex-direction:column;
        gap:45px;
    }

    .about-right{
        text-align:center;
    }

    .about-points{
        grid-template-columns:1fr;
    }

    /* Mission */

    .mission-grid{
        grid-template-columns:1fr;
    }

    /* Journey */

    .journey-grid{
        grid-template-columns:1fr;
        margin-top:30px;
    }



    /* Director */

    .director-container{
        flex-direction:column;
        text-align:center;
        gap:45px;
    }

    .director-content blockquote{
        text-align:left;
    }

    /* CTA */

    .cta-buttons{
        flex-direction:column;
    }

    .cta-buttons a{
        width:100%;
    }

}

/*==============================
MISSION SLIDER
==============================*/

@media (max-width:991px){

    .mission-grid{

        display:flex;
        gap:18px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:10px 20px 20px;

    }

    .mission-grid::-webkit-scrollbar{
        display:none;
    }

    .mission-card{

        flex:0 0 85%;
        max-width:330px;

        scroll-snap-align:center;

    }

}

/*==============================
JOURNEY SLIDER
==============================*/

@media (max-width:991px){

    .journey-grid{

        display:flex;

        gap:18px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:10px 20px 20px;

    }

    .journey-grid::-webkit-scrollbar{
        display:none;
    }

    .journey-card{

        flex:0 0 85%;
        max-width:300px;

        scroll-snap-align:center;

    }

}

@media (max-width:767px){

    .why-grid{

        display:flex;

        gap:18px;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

        padding:10px 20px 20px;

    }

    .why-grid::-webkit-scrollbar{
        display:none;
    }

    .why-card{

        flex:0 0 85%;

        max-width:320px;

        scroll-snap-align:center;

    }

}

@media (max-width:991px){

    .about-points{

        display:flex;

        overflow-x:auto;

        gap:15px;

        scrollbar-width:none;

        padding-bottom:10px;

    }

    .about-points::-webkit-scrollbar{
        display:none;
    }

    .about-points div{

        flex:0 0 250px;

    }

}

/*==================================================
    ABOUT PAGE - WHY CHOOSE MAESTER SLIDER
==================================================*/

@media (max-width:767px){

    .why-about .why-grid{

        display:flex !important;

        gap:18px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:10px 20px 20px;

    }

    .why-about .why-grid::-webkit-scrollbar{

        display:none;

    }

    .why-about .why-card{

        flex:0 0 85% !important;

        max-width:320px;

        min-height:280px;

        scroll-snap-align:center;

        margin:0;

    }

}

/*==================================================
    WHY SECTION - MOBILE & TABLET SLIDER
==================================================*/

@media (max-width:767px){

    .why-grid{

        display:flex !important;

        gap:18px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:10px 20px 20px;

        margin-top:30px;

    }

    .why-grid::-webkit-scrollbar{

        display:none;

    }

    .why-card{

        flex:0 0 85% !important;

        max-width:330px;

        min-height:300px;

        scroll-snap-align:center;

        margin:0 !important;

    }

}

/* ============================================================
   FINAL RESPONSIVE HERO ALIGNMENT FIX
   This file loads after tablet.css, so these are the definitive
   <=991px rules. Keep floating stat cards anchored to an
   image-sized wrapper, never to the full viewport.
   ============================================================ */
@media (max-width: 991px) {
    .hero-mobile-image {
        position: relative !important;
        width: min(82vw, 360px) !important;
        max-width: min(82vw, 360px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .hero-mobile-image > img {
        width: 100% !important;
        max-width: 360px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .mobile-card {
        width: clamp(150px, 47%, 190px) !important;
        min-height: 66px !important;
        box-sizing: border-box !important;
    }

    .mobile-card1 {
        top: 6% !important;
        left: -7% !important;
        right: auto !important;
        bottom: auto !important;
    }

    .mobile-card2 {
        top: 43% !important;
        right: -9% !important;
        left: auto !important;
        bottom: auto !important;
    }

    .mobile-card3 {
        left: -9% !important;
        bottom: 10% !important;
        top: auto !important;
        right: auto !important;
    }

    .mobile-card h3,
    .mobile-card p {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .mobile-card p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden !important;
    }

    /* Stable benefit row: no absolute stacking / no slideshow overlap. */
    .hero-trust {
        position: static !important;
        width: min(100%, 620px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 18px auto 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px 18px !important;
        overflow: visible !important;
    }

    .hero-trust .trust-item,
    .hero-trust .trust-item.active {
        position: static !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        white-space: nowrap;
    }

    .hero-trust .trust-item i {
        flex: 0 0 auto;
    }

    .hero-trust .trust-item span {
        font-size: clamp(11px, 1.7vw, 14px) !important;
        line-height: 1.25 !important;
    }
}

/* Small portrait screens: keep cards visible but inside viewport. */
@media (max-width: 430px) {
    .hero-mobile-image {
        width: min(78vw, 310px) !important;
        max-width: min(78vw, 310px) !important;
    }

    .hero-mobile-image > img {
        max-width: 310px !important;
    }

    .mobile-card {
        width: clamp(140px, 48%, 155px) !important;
    }

    .mobile-card1 { left: -5% !important; }
    .mobile-card2 { right: -7% !important; }
    .mobile-card3 { left: -7% !important; }

    .hero-trust {
        gap: 8px 12px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-trust .trust-item span {
        font-size: 11px !important;
    }
}