/* ------------------------------
    - Desktop XL: > 1400px
    - Desktop: 1200px - 1400px
    - Laptop: 992px - 1199px
    - Tablet: 768px - 991px
    - Mobile landscape: 576px - 767px
    - Mobile: <= 575px
------------------------------ */

/* Large desktops (very large screens) */
@media (min-width: 1401px) {
    .hero { min-height: 720px; }
    .hero-title, .hero-title-in { font-size: 6.5rem; line-height: 6.8rem; }
    .hero-title-2, .hero-title-3 { font-size: 7rem; line-height: 7.2rem; }
    .heading { font-size: 4.5rem; }
    .img-badge .badge-big { font-size: 4rem; }
}

/* Laptop / small desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero { min-height: 620px; padding-top: 10px; padding-bottom: 10px; }
    .hero-title, .hero-title-in { font-size: 5.25rem; line-height: 5.6rem; }
    .hero-title-2, .hero-title-3 { font-size: 5.75rem; line-height: 5.8rem; }
    .heading { font-size: 3.3rem; }
    .img-badge .badge-big { font-size: 3.5rem; }
    .cn-bg-image { right: -4%; top: -18%; }
    .swiper-button-next, .swiper-button-prev { top: 88%; left: 48%; width:44px; height:44px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hero { min-height: 520px; padding: 2.5rem 0; }
    .hero-content { text-align: left; }
    .hero-title, .hero-title-in { font-size: 3.8rem; line-height: 4.2rem; }
    .hero-title-2, .hero-title-3 { font-size: 4.2rem; line-height: 4.4rem; }
    .hero-subtitle { font-size: 1.125rem; }
    .heading { font-size: 2.6rem; }
    .who-we-are .accordion { width: 100% !important; }
    /* .custom-card .row > [class*="col-"] { min-height: auto; } */
    .card-right-img { border-radius: 0.75rem; }
    .img-badge { left: 0.6rem; bottom: 0.6rem; padding: 0.5rem; }
    .img-badge .badge-big { font-size: 2.75rem; }
    .swiper-button-next, .swiper-button-prev { top: 90%; width:44px; height:44px; }
    .swiper-button-next { left: 52% !important;}
    .swiper-button-prev { left: 44% !important;}
    .contact-hero .badge { margin-bottom: 1rem;}
    .icon-card { padding: 18px; }
    .testimonial { max-width: 100%; padding: 16px; }
    .why-choose-us .cn-bg-image { top: -4%; right: 2%; width: 120px; }
    .btn-no-more{ padding: 0.50rem 0.9rem;}
}

/* Mobile landscape (>=576 and <768) */
@media (min-width: 576px) and (max-width: 767px) {
    .hero { min-height: 420px; padding: 2rem 0; }
    .hero-content { padding-left: 0.5rem; padding-right: 0.5rem; }
    .hero-title, .hero-title-in { font-size: 3rem; line-height: 3.4rem; }
    .hero-title-2, .hero-title-3 { font-size: 3.25rem; line-height: 3.6rem; }
    .hero-subtitle { font-size: 1rem; }
    .heading { font-size: 2.1rem; }
    .img-badge .badge-big { font-size: 2.25rem; }
    .card-right-img { height: auto; }
    .btn-enroll { padding: 0.45rem 1rem; font-size: 0.95rem; }
    .course_card .card-body { padding: 1rem; }
    .swiper-button-next, .swiper-button-prev { top: 93%; width:40px; height:40px; }
    .cn-bg-image { display: none; }
    .faq-accordion .accordion-button { font-size: 1.35rem; padding: 1rem; }
}


/* Mobile portrait (small phones) */
@media (max-width: 575px) {
    /* hero */
    .top-bar{padding-top: 0 !important;}
    .main-contact{ flex-direction: row !important; align-items: end !important;}
    .hero { min-height: 360px; padding: 1.4rem 0; background-position: center top; }
    .hero-content { padding-left: 1rem; padding-right: 1rem; }
    .hero-title, .hero-title-in { font-size: 2.2rem; line-height: 2.6rem; }
    .hero-title-2, .hero-title-3 { font-size: 2.6rem; line-height: 2.8rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .btn-enroll { display: inline-block; font-size: 0.95rem; padding: 0.45rem 0.9rem; }
    .btn-enroll.d-none.d-md-block { display: none !important; }
    /* heading & sections */
    .heading, .help_center .heading { font-size: 1.7rem; line-height: 2.2rem; }
    .who-we-are .accordion { width: 100% !important; }
    .custom-card { padding: 0.6rem; }
    .card-right-img { display: block; width: 100%; height: 235px !important; border-radius: 0.75rem; }
    .img-badge { left: 0.5rem; bottom: 0.6rem; padding: 0.5rem; }
    .img-badge .badge-big { font-size: 1.9rem; }
    .course_card .price { font-size: 1.1rem; }
    .course_card .card-title { font-size: 1rem; }
    .icon-card { padding: 16px; text-align: center; }
    .icon-card .icon img { width: 36px; height: 36px; margin: 0 auto; }
    .why-choose-us .cn-bg-image { top: -4%; right: 2%; width: 120px; }
    .testimonial { padding: 14px; max-width: 100%; }
    .swiper-button-next, .swiper-button-prev { display: none; }
    .swiper-button-next i, .swiper-button-prev i { font-size: 18px; }
    .faq-accordion .accordion-body { padding: 0 1rem 1rem 1rem; font-size: 1rem; }
    .faq-accordion .accordion-button { font-size: 1.25rem; padding: 0.9rem 0.75rem; }
    .footer { padding: 28px 0; }
    .footer-nav a { display: block; margin-bottom: 8px; }
    .what-we-offer .heading{ width: 62% !important;}
    .courseSwiper { padding-bottom: 2rem;}
    .contact-hero{ padding-top: 2rem;}
    .contact-hero .contact{ padding: 1.25rem 0;}
    .contact-hero .badge { margin-bottom: 1rem;}
    .copyright{ top: 0;}
    .certificate-partners .sub-heading { font-size: 1.3rem;}
    .certificate-partners .cert_text { font-size: 1rem;}
    .banner-title{ font-size: 2.5rem; margin: 0;}
    .about_p_banner{ min-height: 125px;}
    .about_p_banner img{ width: 50%;}
    .about-main { gap: 1rem;}
    .stat-number { font-size: 2rem;}
    .about-service-section  { margin: auto; margin-top: 20px; }
    .about-mission-vision{ margin: 30px auto; }
    .about-mission-vision .title{ font-size: 1.3rem; }
    .instructors-section { border-radius: 0 0 35px 35px; }
}

/* Small utilities to prevent overflow on small screens */
@media (max-width: 991px) {
    .hero-title, .hero-title-2, .hero-title-in, .hero-title-3 { word-break: break-word; }
    .card-img-wrap img { max-width: 100%; height: auto; }
}

@media (hover: none) and (pointer: coarse) {
    .nav-link { padding: 0.6rem 0.4rem; }
}

/* Fix for Swiper nav alignment (desktop vs mobile differences) */
@media (max-width: 1199px) {
    .courseSwiper .swiper-button-prev { left: 3%; transform: translateX(0); }
    .courseSwiper .swiper-button-next { left: auto; right: 3%; transform: translateX(0); }
}

/* Minor tweaks to keep hero text visible over background on tiny screens */
@media (max-width: 480px) {
    .hero { background-position: center 20%; }
    .highlight { padding: 0 1px; background-position: 0 84%; }

}
/* Target Samsung Galaxy S24 and similar devices */
@media only screen and (max-width: 430px) and (min-width: 390px) {
    .contact-hero .contact-icons{ flex-direction: column; align-items: flex-start;}
}

/* End of responsive overrides */