/* Mango Engineers theme-safe overrides.
   Keep component-level fixes here so vendor/theme CSS remains upgradeable. */

/* --------------------------------------------------------------------------
   Global responsive safety
   -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#main-wrapper {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    #main-wrapper {
        overflow-x: clip;
    }
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

.row > [class*="col"],
.header-navbar,
.header-brand,
.header-mainnav,
.header-right,
.header-action {
    min-width: 0;
}

.main-wrapper .title,
.main-wrapper .description,
.main-wrapper p,
.main-wrapper li,
.main-wrapper .information-list a {
    overflow-wrap: break-word;
    word-break: normal;
}

.edu-btn {
    max-width: 100%;
}

input,
select,
textarea {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   Shared header / logo sizing
   -------------------------------------------------------------------------- */

.edu-header.header-style-7 .header-brand .logo {
    flex: 0 1 auto;
    margin-right: 28px;
}

.edu-header.header-style-7 .header-brand .logo a {
    display: flex;
    align-items: center;
}

.edu-header.header-style-7 .header-brand .logo a img {
    width: auto;
    height: auto;
    max-width: 210px;
    max-height: 56px;
    object-fit: contain;
}

.edu-header.header-style-7 .header-navbar {
    gap: 12px;
}

.edu-header.header-style-7 .header-right {
    flex: 0 0 auto;
}

.edu-header.header-style-7 .header-action {
    align-items: center;
}

/* Laptop widths need slightly denser navigation without changing the theme. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 18px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 172px;
        max-height: 46px;
    }

    .edu-header.header-style-7 .mainmenu-nav .mainmenu > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    .edu-header.header-style-7 .header-action .header-btn a {
        padding-left: 16px;
        padding-right: 16px;
        white-space: nowrap;
    }
}

@media only screen and (max-width: 1350px) {
    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 20px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 190px;
        max-height: 50px;
    }
}

/* Tablet / iPad header. */
@media only screen and (max-width: 1199px) {
    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 24px !important;
        padding-right: 24px !important;
        line-height: normal;
    }

    .edu-header.header-style-7 .header-navbar {
        min-height: 78px;
    }

    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 0;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 182px;
        max-height: 48px;
    }

    .header-action .mobile-menu-bar .hamberger-button,
    .popup-mobile-menu .inner .header-top .close-menu .close-button {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .popup-mobile-menu .inner {
        width: min(360px, 100vw);
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .popup-mobile-menu .mainmenu li a {
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 0;
        padding: 10px 0;
    }

    .popup-mobile-menu .mainmenu .submenu li a {
        min-height: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .edu-header.header-style-7 .header-navbar {
        min-height: 70px;
        gap: 8px;
    }

    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 12px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 160px;
        max-height: 42px;
    }

    .popup-mobile-menu .inner .header-top {
        padding: 12px 15px;
    }

    .popup-mobile-menu .inner .header-top .logo a img {
        width: auto;
        height: auto;
        max-width: 165px;
        max-height: 40px;
        object-fit: contain;
    }

    .popup-mobile-menu .mainmenu {
        padding: 12px 18px 24px;
    }
}

@media only screen and (max-width: 479px) {
    .edu-header.header-style-7 .header-navbar {
        min-height: 66px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 142px;
        max-height: 38px;
    }

    .popup-mobile-menu .inner .header-top .logo a img {
        max-width: 150px;
        max-height: 38px;
    }
}

/* --------------------------------------------------------------------------
   Hero, buttons and above-the-fold content
   -------------------------------------------------------------------------- */

.hero-banner .banner-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.hero-banner .banner-btn .edu-btn {
    margin-left: 0 !important;
}

@media only screen and (max-width: 991px) {
    .hero-style-15.programming-banner {
        min-height: auto;
        padding: 72px 0 64px;
    }

    .hero-style-15.programming-banner .banner-content {
        margin-top: 0;
        text-align: center;
    }

    .hero-style-15.programming-banner .banner-content .title {
        font-size: clamp(38px, 6vw, 54px);
        line-height: 1.15;
    }

    .hero-style-15.programming-banner .banner-content > p {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-style-15.programming-banner .banner-content .banner-btn {
        justify-content: center;
    }

    .hero-style-15.programming-banner .banner-content .programming-feature-area {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
        padding-top: 34px;
        margin-bottom: 0;
    }

    .hero-style-15.programming-banner .banner-content .programming-feature-area .feature-course,
    .hero-style-15.programming-banner .banner-content .programming-feature-area .feature-instructior {
        justify-content: center;
        min-width: 0;
    }

    .hero-style-15.programming-banner .banner-thumbnail {
        margin-top: 34px;
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .hero-style-15.programming-banner {
        padding: 56px 0 50px;
    }

    .hero-style-15.programming-banner .banner-content .title {
        font-size: clamp(34px, 9vw, 44px);
    }

    .hero-style-15.programming-banner .banner-content .programming-feature-area {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hero-style-15.programming-banner .banner-content .programming-feature-area .feature-course,
    .hero-style-15.programming-banner .banner-content .programming-feature-area .feature-instructior {
        justify-content: flex-start;
        text-align: left;
        max-width: 340px;
        width: 100%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 575px) {
    .hero-banner .banner-btn {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-banner .banner-btn .edu-btn {
        width: 100%;
    }

    .hero-style-15.programming-banner {
        padding-top: 46px;
    }

    .hero-style-15.programming-banner .banner-content .pre-title {
        line-height: 1.5;
    }
}

/* --------------------------------------------------------------------------
   Cards, images and content grids
   -------------------------------------------------------------------------- */

.edu-course .thumbnail img,
.edu-blog .thumbnail img,
.about-image-gallery img {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 1199px) {
    .features-area-7 .features-grid-wrap-2 .features-box {
        padding: 38px 34px;
    }
}

@media only screen and (max-width: 767px) {
    .features-area-7 .features-grid-wrap-2 {
        gap: 20px;
    }

    .features-area-7 .features-grid-wrap-2 .features-box {
        padding: 28px 24px;
    }

    .features-area-7 .features-grid-wrap-2 .features-box .content p {
        margin-bottom: 28px;
    }

    .section-title .title,
    .edu-breadcrumb-area .page-title .title {
        overflow-wrap: anywhere;
    }

    .edu-breadcrumb-area .edu-breadcrumb {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

@media only screen and (max-width: 575px) {
    .features-area-7 .features-grid-wrap-2 .features-box {
        padding: 24px 20px;
    }

    .edu-course-area .course-style-17 .thumbnail {
        padding: 18px;
    }

    .edu-course-area .course-style-17 .content {
        margin-top: -102px;
        padding: 110px 18px 18px;
    }

    .edu-course-area .course-style-17 .content .title {
        overflow-wrap: anywhere;
    }
}

/* --------------------------------------------------------------------------
   Forms, tables, embeds and long content
   -------------------------------------------------------------------------- */

.entry-content,
.course-details-content,
.privacy-policy,
.event-details .details-content {
    min-width: 0;
}

.entry-content table,
.course-details-content table,
.privacy-policy table,
.event-details .details-content table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content iframe,
.course-details-content iframe,
.event-details iframe,
.contact-form iframe {
    width: 100%;
}

@media only screen and (max-width: 575px) {
    .contact-form .edu-btn,
    .contact-form button[type="submit"],
    .cta-area-1 .edu-btn {
        width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   Footer and very small screens
   -------------------------------------------------------------------------- */

.edu-footer .information-list a {
    word-break: break-word;
}

@media only screen and (max-width: 575px) {
    .edu-footer .edu-footer-widget {
        margin-bottom: 8px;
    }

    .edu-footer .social-share {
        flex-wrap: wrap;
    }

    .copyright-area p {
        line-height: 1.6;
    }
}

/* iPhone SE / compact Android widths. */
@media only screen and (max-width: 374px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 12px;
        padding-right: 12px;
    }

    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 132px;
    }

    .hero-style-15.programming-banner .banner-content .title {
        font-size: 32px;
    }
}

/* Page-level responsive QA */
@media only screen and (max-width: 991px) {
    .google-map-area #gmap_canvas {
        height: 420px;
    }

    .edu-event.event-style-1 .thumbnail,
    .edu-event.event-style-1:hover .thumbnail {
        margin-bottom: 0;
    }

    .edu-event.event-style-1 .content,
    .edu-event.event-style-1:hover .content {
        padding: 36px 26px 30px;
        background-color: #f7f5f2;
    }

    .edu-event.event-style-1 .content .read-more-btn,
    .edu-event.event-style-1:hover .content .read-more-btn {
        visibility: visible;
        opacity: 1;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .edu-event.event-style-1 .thumbnail a:after {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .course-details-content .nav-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .course-details-content .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .course-details-content .nav-tabs .nav-item {
        flex: 0 0 auto;
        margin: 0 2px;
    }

    .course-details-content .nav-tabs .nav-item .nav-link {
        white-space: nowrap;
        padding: 13px 16px;
        font-size: 15px;
    }
}

@media only screen and (max-width: 575px) {
    .google-map-area #gmap_canvas {
        height: 320px;
    }

    .edu-event.event-style-1 .content,
    .edu-event.event-style-1:hover .content {
        padding: 34px 20px 26px;
    }

    .edu-event.event-style-1 .content .event-date {
        width: 68px;
        height: 68px;
        top: -34px;
        right: 20px;
    }

    .comment-list-wrapper .comment.comment-reply {
        margin-left: 16px;
    }

    .rn-progress-parent {
        right: 15px;
        bottom: 15px;
        width: 42px;
        height: 42px;
    }

    .rn-progress-parent::after {
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: 22px;
    }
}

/* === Mobile-first stability pass — 2026-09-22 === */
html { overflow-x: hidden; }
body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
@media (max-width: 991.98px) {
  .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
  .edu-header .header-mainmenu, .edu-header .header-navbar { min-height: 64px; }
  .edu-header .header-brand, .edu-header .logo { min-width: 0; }
  .edu-header .header-brand img, .edu-header .logo img { width: min(180px, 54vw); height: auto; }
  .edu-header .hamburger-menu, .edu-header .mobile-menu-toggle, .edu-header button[aria-expanded] {
    min-width: 44px; min-height: 44px;
  }
  .edu-header .mainmenu, .edu-header .submenu { max-width: 100%; }
  .edu-header .mainmenu a, .edu-header .submenu a { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .row > [class*="col-"] { min-width: 0; }
  .edu-course-area, .course-details-area, .edu-section-gap { min-width: 0; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  input, select, textarea, button { font-size: 16px !important; max-width: 100%; }
  .edu-section-gap, .edu-section-gapTop, .edu-section-gapBottom { padding-top: 48px !important; padding-bottom: 48px !important; }
  h1, .title, .hero-title { overflow-wrap: anywhere; }
  .edu-breadcrumb-area h1, .banner-content h1 { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.08 !important; }
  .edu-btn, .btn, button, input[type="submit"] { min-height: 44px; }
  .preloader-close-btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   Approved information architecture: desktop mega menu + mobile accordion
   2026-09-22
   -------------------------------------------------------------------------- */

.edu-header.header-style-7 .header-navbar {
    position: relative;
}

.edu-header.header-style-7 .mango-primary-menu > li > a {
    white-space: nowrap;
}

.edu-header.header-style-7 .mainmenu-nav .mainmenu > li > a {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 14px;
}

.edu-header.header-style-7 .mainmenu-nav .mainmenu > li > .submenu:not(.mango-mega-menu) {
    width: 285px;
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 12px 12px;
}

.edu-header.header-style-7 .mainmenu-nav .mainmenu > li > .submenu:not(.mango-mega-menu) > li > a {
    white-space: normal;
    line-height: 1.4;
}

@media only screen and (min-width: 1200px) {
    .edu-header.header-style-7 .header-mainnav,
    .edu-header.header-style-7 .mainmenu-nav,
    .edu-header.header-style-7 .mango-primary-menu,
    .edu-header.header-style-7 .mango-primary-menu > .courses-mega {
        position: static;
    }

    .edu-header.header-style-7 .mango-primary-menu > .courses-mega > .mango-mega-menu {
        left: 50% !important;
        right: auto !important;
        top: calc(100% - 1px);
        width: min(1080px, calc(100vw - 56px));
        max-height: min(72vh, 720px);
        padding: 18px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translate(-50%, 12px);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 18px 45px rgba(18, 32, 55, 0.16);
    }

    .edu-header.header-style-7 .mango-primary-menu > .courses-mega:hover > .mango-mega-menu {
        transform: translate(-50%, 0);
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group {
        min-width: 0;
        padding: 12px 16px 14px;
        border-right: 1px solid rgba(20, 32, 51, 0.08);
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group:nth-child(3n) {
        border-right: 0;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > a {
        display: block;
        padding: 0 0 8px !important;
        margin-bottom: 5px;
        color: var(--color-heading);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        border-bottom: 1px solid rgba(20, 32, 51, 0.08);
        white-space: normal;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > a::after {
        display: none !important;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > .submenu {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > .submenu > li {
        margin: 0;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > .submenu > li > a {
        display: block;
        padding: 5px 0 !important;
        color: var(--color-body);
        font-size: 13px;
        line-height: 1.35;
        white-space: normal;
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group > .submenu > li > a:hover {
        color: var(--color-primary);
        padding-left: 4px !important;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 14px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 168px;
        max-height: 46px;
    }

    .edu-header.header-style-7 .mainmenu-nav .mainmenu > li > a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
    }

    .edu-header.header-style-7 .header-action .header-btn .edu-btn {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 13px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .edu-header.header-style-7 .header-mainmenu {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .edu-header.header-style-7 .header-brand .logo {
        margin-right: 10px;
    }

    .edu-header.header-style-7 .header-brand .logo a img {
        max-width: 150px;
        max-height: 42px;
    }

    .edu-header.header-style-7 .mainmenu-nav .mainmenu > li > a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 12.5px;
    }

    .edu-header.header-style-7 .header-action .header-btn {
        display: none;
    }

    .edu-header.header-style-7 .mango-primary-menu > .courses-mega > .mango-mega-menu {
        width: min(980px, calc(100vw - 36px));
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (min-width: 1600px) {
    .edu-header.header-style-7 .mango-primary-menu > .courses-mega > .mango-mega-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(1240px, calc(100vw - 96px));
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group:nth-child(3n) {
        border-right: 1px solid rgba(20, 32, 51, 0.08);
    }

    .edu-header.header-style-7 .mango-mega-menu > .mega-group:nth-child(4n) {
        border-right: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .popup-mobile-menu .inner {
        width: min(420px, 100vw);
    }

    .popup-mobile-menu .mango-mobile-menu {
        padding-top: 8px;
    }

    .popup-mobile-menu .mango-mobile-menu > li {
        border-bottom: 1px solid rgba(20, 32, 51, 0.08);
    }

    .popup-mobile-menu .mango-mobile-menu > li > a {
        min-height: 48px;
        padding: 12px 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
    }

    .popup-mobile-menu .mango-mobile-menu .submenu {
        padding-left: 14px;
        margin-left: 0;
        border-left: 1px solid rgba(20, 32, 51, 0.08);
    }

    .popup-mobile-menu .mango-mobile-menu .submenu > li > a {
        min-height: 42px;
        padding: 9px 4px 9px 0;
        line-height: 1.35;
    }

    .popup-mobile-menu .mango-mobile-menu .mango-mega-menu > .mega-group > a {
        font-weight: 650;
    }

    .popup-mobile-menu .mango-mobile-menu .mango-mega-menu .submenu {
        margin-left: 8px;
        padding-left: 12px;
    }

    .popup-mobile-menu .mango-mobile-menu .mango-mega-menu .submenu a {
        font-size: 14px;
    }

    .popup-mobile-menu .mango-mobile-call {
        padding: 0 18px 28px;
    }

    .popup-mobile-menu .mango-mobile-call .edu-btn {
        width: 100%;
        justify-content: center;
    }
}

@media only screen and (max-width: 575px) {
    .popup-mobile-menu .inner {
        width: 100vw;
    }

    .popup-mobile-menu .mango-mobile-menu {
        padding-left: 16px;
        padding-right: 16px;
    }

    .popup-mobile-menu .mango-mobile-menu > li > a {
        font-size: 15px;
    }
}