/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


body.scroll .header {
    display: none;
}

.header-desktop {
    display: block;
}

.header-mobile {
    display: none;
}

.hidden-mobile {
    display: block;
}

.hidden-desktop {
    display: none;
}

/* Hide/show at 768px breakpoint to match main mobile styles */
@media screen and (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
    .hidden-desktop {
        display: block !important;
    }
}

/* CSS for mobile devices */
@media screen and (max-width: 768px) {
    /* Hide titles on mobile */
    #sectionHero .secondBlock .titles,
    #sectionHero .secondBlock .firstContent .titles,
    #sectionHero .secondBlock .firstContent .titles .title,
    .titles {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Smaller scroll indicator on mobile */
    .scroll-indicator svg {
        width: 20px;
        height: 20px;
    }
    
    #sectionHero .hero-video-overlay {
        padding-bottom: 80px;
    }
    
    /* Full video coverage on mobile using dvh for dynamic viewport */
    html, body {
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    #sectionHero {
        position: relative !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    
    #sectionHero .secondBlock {
        position: relative !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Show mobile video, hide desktop video on mobile */
    #sectionHero .hero-video-desktop {
        display: none !important;
    }
    
    #sectionHero .hero-video-mobile {
        display: block !important;
    }
    
    #sectionHero .hero-video-bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        z-index: 1 !important;
    }
    
    #sectionHero .hero-video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        background: linear-gradient(180deg, rgba(4,18,40,0.7) 0%, rgba(4,18,40,0.3) 35%, transparent 60%) !important;
    }
    
    /* Mobile hero headline */
    #sectionHero .hero-mobile-headline {
        display: flex !important;
        position: absolute !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 5 !important;
        padding: 20px !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        transform: none !important;
        width: 100% !important;
    }
    
    #sectionHero .hero-mobile-headline h1 {
        font-family: 'Marcher', sans-serif !important;
        font-size: clamp(26px, 7vw, 36px) !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        text-transform: uppercase !important;
        line-height: 1.3 !important;
        letter-spacing: 2px !important;
        margin: 0 !important;
        text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 4px 40px rgba(4,18,40,0.4) !important;
    }
    
    #sectionHero .hero-mobile-headline h1 span {
        display: block !important;
        font-size: clamp(18px, 4.5vw, 24px) !important;
        font-weight: 400 !important;
        opacity: 0.9 !important;
        letter-spacing: 3px !important;
        margin: 8px 0 !important;
    }
    
    /* Press logos bar with full white shadow effect */
    #sectionHero .secondContent {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        padding: 12px 10px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: auto !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 -10px 30px rgba(255, 255, 255, 0.8), 0 -5px 15px rgba(255, 255, 255, 1) !important;
    }
    
    #sectionHero .secondContent .media-label,
    #sectionHero .secondBlock .secondContent .media-label,
    .secondContent .media-label {
        display: block !important;
        visibility: visible !important;
        color: #041228 !important;
        font-family: 'Marcher', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 3px !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    #sectionHero .secondContent .media {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 0 !important;
    }
    
    #sectionHero .secondContent .mediaSlider {
        z-index: 11 !important;
    }
    
    #sectionHero .secondContent .mediaSlider img {
        width: 60px !important;
        height: 30px !important;
    }
    
    /* Hide other hero content on mobile to show video only */
    #sectionHero .secondBlock .firstContent {
        display: none !important;
    }
    
    #sectionHero .secondBlock .cloud {
        display: none !important;
    }
    
    .section .blockHeader,
    .section .blockSlider,
    .section .categories,
    .section .subCategory,
    .section .letsGo,
    #sectionEducation,
    #sectionUniversities,
    #sectionJoinUs,
    #sectionEtudiant,
    #sectionHero .firstBlock,
    #sectionHero .firstBlock .content,
    #sectionHero .firstBlock .title,
    #sectionHero .firstBlock .subTitle {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    
    html, body {
        overflow-x: hidden;
    }
    
    #sectionFooter {
        margin-bottom: 0 !important;
        padding-bottom: 20px;
    }
    
    .pathBg {
        display: none !important;
    }
    
    /* About page - meaning section mobile fix */
    .about-meaning {
        background: linear-gradient(135deg, #041228 0%, #0a2a4a 100%) !important;
        padding: 60px 20px !important;
    }
    
    .about-meaning .meaning-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .about-meaning .meaning-arabic {
        font-size: 50px !important;
        color: rgba(234, 202, 145, 0.5) !important;
        min-width: auto !important;
    }
    
    .about-meaning .meaning-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .about-meaning .meaning-text h2 {
        color: #FFFFFF !important;
        font-size: 24px !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
    
    .about-meaning .meaning-text p {
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
        display: block !important;
        margin-bottom: 12px !important;
    }
    
    .footer .thirdFooter {
        margin-bottom: 0;
        padding: 15px 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .thirdFooter .menu ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {

    .hidden-mobile {
        display: none !important;
    }

    .hidden-desktop {
        display: block;
    }

    .header-desktop {
        display: none;
    }

    .header-mobile {
        display: block;
        width: 100%;
        padding: 30px 2px !important;
        background: #041228;
        border-radius: 0px 0px 20px 20px;

    }

    .header {
        padding: 0;
    }

    .logo-menu {
        padding: 36px 20px;
    }

    #sectionHero .firstBlock .content {
        top: 155px;
    }

    #sectionHero .firstBlock .title {
        font-size: 46px;
        line-height: 39px;
    }

    #sectionHero .firstBlock .subTitle {
        font-size: 30px;
        line-height: 25px;
        margin-bottom: 68px
    }

    #sectionHero .firstBlock .bg-person {
        height: 338px;
        position: absolute;
        bottom: calc(0px - -158px);
    }


    .header-mobile nav {
        display: block;
    }

    .logo-top img {
        width: 40px;
    }

    .header-mobile .logo-top {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    #menuToggle {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background: #fff;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 3px;
    }

    .header-mobile.sticky #menuToggle {
        background: #000;
    }

    .header-mobile.sticky #menuToggle span {
        background: #FFFFFF;
    }

    #menuToggle input {
        display: block;
        width: 36px;
        height: 36px;
        position: absolute;
        top: -1px;
        left: -1px;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }

    #menuToggle span {
        display: block;
        width: 19px;
        height: 2px;
        position: relative;
        border-radius: 52px;
        z-index: 1;
        -webkit-transform-origin: 4px 0px;
        -ms-transform-origin: 4px 0px;
        transform-origin: 4px 0px;
        -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        background: #000000;
    }

    #menuToggle input:checked~span {
        background: #000000 !important;
    }

    #menuToggle span:first-child {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }

    #menuToggle input:checked~span {
        opacity: 1;
        -webkit-transform: rotate(45deg) translate(-4px, -2px);
        -ms-transform: rotate(45deg) translate(-4px, -2px);
        transform: rotate(45deg) translate(-4px, -2px);

    }


    #menuToggle input:checked~span:nth-last-child(2) {
        opacity: 1;
        -webkit-transform: rotate(-45deg) translate(0, -1px);
        -ms-transform: rotate(-45deg) translate(0, -1px);
        transform: rotate(-45deg) translate(0, -1px);
    }

    #menu {
        position: fixed;
        right: -10px;
        -webkit-font-smoothing: antialiased;
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        transform: translate(100%, 0);
        -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        -o-transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        width: 340px;
        height: 100%;
        border-radius: 50px 0px 0px 50px;
        -webkit-box-shadow: -11px 4px 17.5px 0px #00000024;
        box-shadow: -11px 4px 17.5px 0px #00000024;
        background: #FFFFFF;
        top: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

    }

    .overlayMenu {
        position: fixed;
    }

    .overlayMenu::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        background-color: #041228;
        opacity: 0.7;
        z-index: 99;
    }


    #menu ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    #menu hr {
        height: 0.5px;
        background-color: #000000;
        width: 80%;
        margin: 20px 0;
    }

    #menu a {
        font-family: 'Marcher';
        font-size: 18px;
        font-weight: 700;
        line-height: normal;
        text-align: left;
        list-style: none;
        color: #041228;
        text-decoration: none;
    }

    #menu li {
        padding: 0;
    }

    #menuToggle input:checked~#menu {
        -webkit-transform: scale(1.0, 1.0);
        -ms-transform: scale(1.0, 1.0);
        transform: scale(1.0, 1.0);
        opacity: 1;
    }

    #menu .menu-footer .logo {
        margin-bottom: 23px;
        text-align: center;
    }

    #menu .social-media {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 12px;
    }


    /* footer*/
    #sectionFooter {
        margin-top: 60px;
    }

    .firstFooter {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 50px 25px 40px;
        gap: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: auto;
        border-radius: 30px 30px 0 0;
    }

    .firstFooter .content h1 {
        font-size: 28px;
        line-height: 38px;
        width: 100%;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .firstFooter .content p {
        font-size: 14px;
        line-height: 22px;
        opacity: 0.85;
        max-width: 300px;
        margin: 0 auto;
    }

    .firstFooter .actions {
        gap: 14px;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
        margin-top: 30px;
    }

    .firstFooter button.btn {
        font-size: 12px;
        line-height: 13px;
        padding: 28px 15px 12px;
    }
    
    .firstFooter .actions .cartoon-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 0 25px !important;
        height: 52px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border-radius: 30px !important;
        border: none !important;
        text-align: center !important;
        text-decoration: none !important;
        background: linear-gradient(135deg, #d4a855 0%, #c49a4b 100%) !important;
        color: #1a1a1a !important;
        box-shadow: 0 4px 15px rgba(212, 168, 85, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .firstFooter .actions .cartoon-btn.white {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    .firstFooter-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .firstFooter-inner .content {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    
    .firstFooter-inner .content h1,
    .firstFooter-inner .content p {
        text-align: center !important;
    }
    
    .firstFooter-inner .actions {
        margin-top: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .secondFooter {
        padding: 30px 20px 20px;
        background: linear-gradient(180deg, #041228 0%, #020a14 100%);
    }
    
    /* Payment logos section - mobile */
    .secondFooter .logos-footer,
    .secondFooter .menuFooter .logos-footer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 20px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 16px !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .secondFooter .logos-footer .payment-icons,
    .secondFooter .menuFooter .logos-footer .payment-icons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .secondFooter .logos-footer img,
    .secondFooter .menuFooter .logos-footer img,
    .secondFooter .payment-icons img {
        height: 22px !important;
        width: auto !important;
        opacity: 0.9 !important;
        filter: brightness(1.15) !important;
        max-width: none !important;
    }

    .secondFooter .menuFooter {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Social media icons - mobile */
    .secondFooter .menuFooter .socialMedia,
    .secondFooter .socialMedia {
        margin-bottom: 15px !important;
        margin-top: 0 !important;
        gap: 10px !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    .secondFooter .menuFooter .socialMedia a,
    .secondFooter .socialMedia a {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .secondFooter .menuFooter .socialMedia a:hover,
    .secondFooter .socialMedia a:hover {
        background: rgba(212, 168, 85, 0.25) !important;
        transform: translateY(-3px) !important;
        border-color: rgba(212, 168, 85, 0.4) !important;
    }
    
    .secondFooter .menuFooter .socialMedia a svg,
    .secondFooter .menuFooter .socialMedia a img,
    .secondFooter .socialMedia a svg,
    .secondFooter .socialMedia a img {
        width: 20px !important;
        height: 20px !important;
        opacity: 0.95 !important;
        filter: brightness(1.1) !important;
    }

    .secondFooter .conditions {
        justify-content: center;
        width: 100%;
        display: flex;
        gap: 30px;
        padding-top: 20px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-top: none;
    }

    .secondFooter .menu ul {
        gap: 24px;
    }

    .secondFooter .menu ul li a {
        font-size: 15px;
    }

    .secondFooter .copyRight {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .secondFooter .copyRight p {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    .secondFooter .conditions a {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition: color 0.3s ease;
        font-weight: 500;
    }
    
    .secondFooter .conditions a:hover {
        color: #d4a855;
    }
    
    /* Hide desktop HR on mobile */
    .secondFooter hr {
        display: none !important;
    }
    
    /* ===== FOOTER MOBILE CENTERING FIX ===== */
    /* Ensure ALL footer content is centered on mobile */
    
    /* First footer section - CTA area */
    .firstFooter,
    .firstFooter > .container,
    .firstFooter-inner,
    .firstFooter .content,
    .firstFooter .actions {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .firstFooter .content h1,
    .firstFooter .content p,
    .firstFooter-inner .content h1,
    .firstFooter-inner .content p {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .firstFooter .actions,
    .firstFooter-inner .actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .firstFooter .actions button,
    .firstFooter .actions .cartoon-btn,
    .firstFooter-inner .actions button,
    .firstFooter-inner .actions .cartoon-btn {
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Second footer section - menu, social, legal */
    .secondFooter,
    .secondFooter > .container,
    .secondFooter .menuFooter {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Payment icons row - centered */
    .secondFooter .logos-footer,
    .secondFooter .menuFooter .logos-footer,
    .secondFooter .payment-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Social media icons row - centered */
    .secondFooter .socialMedia,
    .secondFooter .menuFooter .socialMedia {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto 15px auto !important;
    }
    
    /* Legal links row - centered */
    .secondFooter .conditions {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    
    /* Copyright text - centered */
    .secondFooter .copyRight {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .secondFooter .copyRight p {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Arabic RTL footer - still center content */
    [dir="rtl"] .firstFooter,
    [dir="rtl"] .firstFooter-inner,
    [dir="rtl"] .firstFooter .content,
    [dir="rtl"] .firstFooter .actions,
    [dir="rtl"] .secondFooter,
    [dir="rtl"] .secondFooter .menuFooter,
    [dir="rtl"] .secondFooter .socialMedia,
    [dir="rtl"] .secondFooter .conditions,
    [dir="rtl"] .secondFooter .copyRight {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* ===== END FOOTER MOBILE CENTERING FIX ===== */


    /* home page */

    #sectionHero .secondBlock .firstContent .titles .title {
        margin: 0 20px;
    }

    #sectionHero .secondBlock .firstContent {
        overflow: hidden;
    }

    .titles .text {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    #sectionHero .secondBlock .firstContent .titles h2 {
        line-height: 57px;
        font-size: 68px;
        width: 100%;
    }

    #sectionHero .secondBlock .img-building {
        height: 600px;
    }

    #sectionHero .secondBlock .img-building img {
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 25%;
        object-position: 25%;
    }



    #sectionHero .secondContent .media {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 13px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: 100%;
        padding: 0 20px;
    }

    /* #sectionEducation {
        padding: 200px 0 0 0;
    } */

    .blockHeader {
        width: 100%;
        padding: 0 20px;
    }

    #sectionEducation .blockSlider {
        margin: 30px 0 0 20px;
    }

    .blockHeader .title {
        font-size: 30px;
        line-height: 26.88px;
    }

    .blockHeader .description {
        line-height: 15.6px;
        font-size: 15px
    }

    #sectionEducation .card .cardNumber {
        font-size: 113px;
        line-height: 128px;
    }

    #sectionEducation .card .cardTitle {
        font-size: 29px;
        line-height: 45.6px;
    }

    #sectionEducation .card .link {
        font-size: 14px;
    }


    .swiper-buttons {
        margin-top: 78px;
    }

    #sectionEducation .swiper-buttons {
        left: calc(50% - 40px);
    }

    .subCategory {
        margin-left: 20px;
    }

    .questionnes {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .blockSliderSubCat {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
    }

    .detailQuestion .number {
        font-size: 64px;
        line-height: 72.96px;
    }

    .detailQuestion .tag {
        font-size: 18px;
        line-height: 15px;

    }

    .detailQuestion .questionTitle {
        font-size: 36px;
        line-height: 30px;
    }

    .detailQuestion .questionDetail {
        font-size: 12px;
        line-height: 12px;
    }

    img.bgIconPen {
        top: 0;
    }

    img.bgIconPad {
        left: 0;
        top: 0;
    }

    img.bgIconCalculator {
        bottom: -120px;
        left: 0;
    }


    #sectionJoinUs {
        padding: 0;
    }

    #sectionJoinUs .container .content {
        padding: 0;
    }

    #sectionJoinUs .signup {
        width: 100%;
    }

    #sectionJoinUs .blockHeader {
        width: 100%;
    }

    #sectionJoinUs .blockHeader .title {
        font-size: 30px;
        line-height: 36px;
    }


    #sectionJoinUs .description {
        font-size: 15px;
        width: 100%;
        line-height: 16.9px;
    }
    
    #sectionJoinUs .container .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    
    #sectionJoinUs .container .content .cartoon-btn {
        display: block;
        margin: 30px auto;
    }
    
    /* Quiz section centering */
    .sectionAction {
        text-align: center !important;
        padding: 40px 20px !important;
    }
    
    .sectionAction .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .sectionAction .title {
        text-align: center !important;
        width: 100% !important;
    }
    
    .sectionAction .actionquiz {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    #sectionEtudiant .blockHeader {
        width: 100%;
        padding: 0 20px;
    }

    .blockHeader p {
        font-size: 15px;
    }

    #sectionEtudiant {
        padding: 144px 0;
    }

    #sectionEtudiant .blockSlider {
        margin-left: 20px;
    }

    #sectionEtudiant .cardEdudiant {
        width: 246px;
        height: 437px;
    }

    #sectionEtudiant .cardDetail {
        left: -20px;
        bottom: -70px;
        width: 85%;
    }

    #sectionEtudiant .buttonPlay {
        right: 0;
    }

    #sectionEtudiant .swiper-buttons {
        margin-top: 70px;
    }

    #playVideo .modal-dialog.modal-dialog-centered {
        max-width: 70% !important;
        margin: 0 auto;
    }

    /* page contact */


    .section-contact .padding-section {
        padding: 0;
    }

    .section-contact .contact-content h1 {
        font-size: 50px;
        line-height: 36px;
        margin-bottom: 12px;
    }

    .section-contact .contact-content p {
        font-size: 12px;
        line-height: 20px;
    }

    .contact-content .social-meida {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 20px;
    }

    .contact-content .social-meida .icons {
        gap: 25px;
    }

    .contact-content .form-contact {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
    }

    .contact-content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 24px;
    }

    .form-contact form .header-form {
        margin-bottom: 24px;
    }

    .form-contact form .header-form .title {
        font-size: 20px;
    }

    .form-contact form h4 {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .form-contact .form-input {
        margin-bottom: 20px;
    }

    .form-contact form textarea {
        height: 180px;
    }

    .form-contact form {
        padding: 18px 20px;
    }

    .form-contact form .btn-submit {
        font-size: 12px;
    }

    /* page join us */
    .content-join-us {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-bottom: 38px;
    }

    .content-join-us .title h1 {
        font-size: 20px;
        line-height: 24px;
    }

    .content-join-us .description p {
        font-size: 15px;
        line-height: 22px;
    }

    .section-work-at-foorsa .card svg {
        margin-bottom: 16px;
        width: 50px;
        height: 50px;
    }

    .section-work-at-foorsa .card h2 {
        font-size: 16px;
        line-height: 24px;
    }

    .section-ready .content h2 {
        font-size: 16px;
        line-height: 23px;
        margin: 32px 0 24px;
    }


    /* page careers*/
    .form-careers .block-header {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .form-careers .block-header p {
        margin: 0;
    }

    .form-careers .block-content .form-group {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
    }

    .form-careers h3 {
        font-size: 18px;
        line-height: 16px;
    }

    .form-careers .block-content .form-label {
        font-size: 13px;
        line-height: 15px;
    }

    .form-careers .block-content input::-webkit-input-placeholder,
    .form-careers .block-content textarea::-webkit-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input::-moz-placeholder,
    .form-careers .block-content textarea::-moz-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input:-ms-input-placeholder,
    .form-careers .block-content textarea:-ms-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input::-ms-input-placeholder,
    .form-careers .block-content textarea::-ms-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input::-webkit-input-placeholder,
    .form-careers .block-content textarea::-webkit-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input::-moz-placeholder,
    .form-careers .block-content textarea::-moz-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input:-ms-input-placeholder,
    .form-careers .block-content textarea:-ms-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input::-ms-input-placeholder,
    .form-careers .block-content textarea::-ms-input-placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    .form-careers .block-content input,
    .form-careers .block-content select,
    .form-careers .block-content input::placeholder,
    .form-careers .block-content textarea,
    .form-careers .block-content textarea::placeholder {
        font-size: 14px;
        line-height: 15px;
    }

    html[lang="fr-FR"] .checkout {
        right: -48px;
    }

    .checkout {
        right: -35px;
    }

    .checkout a {
        font-size: 15px;
        padding: 15px 35px;
    }


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

    .section-journey {
        padding: 117px 20px 0 20px;
    }

    .card-journey .card .title {
        font-size: 20px;
    }

    .card-journey .card .sub-title {
        font-size: 20px;
    }

    .card-journey .card .content p {
        font-size: 13px;
    }

    .padding-section {
        padding: 40px 20px;
    }

    .card-journey .cards {
        display: block;
    }

    .card-journey .card:nth-child(2) {
        margin-top: auto;
    }

    .card-journey .card:first-child {
        width: auto;
    }

    .card-journey .card {
        width: 100%;
        margin-bottom: 50px;
        padding: 15px;
    }

    .card-journey .card:last-child {
        width: 100%;
    }

    .card-journey .card .content li {
        font-size: 15px;
    }

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

    .card-journey .pathBg {
        display: none;
    }

    .section-journey .heading-page h1 {
        font-size: 30px !important;
    }

    .section-infos .card-context {
        padding: 15px;
    }

    .section-infos .card-context .description p {
        font-size: 15px;
        margin-bottom: 0;
    }

    .padding-section.section-infos.info-contact {
        padding: 0 20px;
    }

    /* Page frais */

    .section-frais .heading-page h1 {
        font-size: 30px;
    }

    .about-frais .heading-page h2 {
        font-size: 20px;
    }

    .about-frais .heading-page h4 {
        font-size: 20px;
        line-height: 1.5;
    }

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

    .section-slider {
        padding-left: 0;
        padding-top: 0;
    }

    .swiperFrais .swiper-buttons {
        margin-top: 50px;
    }

    .cardFrais .content {
        font-size: 15px;
    }

    .cardFrais {
        height: 500px;
    }

    .cardFrais .price h5,
    .cardFrais .price span {
        font-size: 14px;
    }

    .cardFrais {
        padding: 30px 10px;
    }

    .section-infos .blocks {
        display: block;
    }

    .section-infos .card-context h2 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .section-infos .blocks .block {
        margin-bottom: 30px;
    }

    .section-cards .sub-heading {
        width: 100%;
        margin: 0 auto 40px;
    }

    .section-cards .cards {
        display: block;
    }

    .section-cards .cards .card {
        margin-bottom: 20px;
        width: 100%;
    }

    .section-cards .cards .card .content p {
        font-size: 15px;
    }

    .section-cards .sub-description {
        font-size: 15px;
        width: 100%;
    }

    /* Page scolarship */
    .padding-navbar {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section-scholarship .heading-page h1 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .section-scholarship .heading-page {
        width: 100% !important;
    }

    .card-scholarship .card {
        width: 100%;
        margin-bottom: 25px;
    }

    .card-scholarship .card .title {
        font-size: 20px;
    }

    .card-scholarship .card p {
        font-size: 15px;
    }

    .card-scholarship .sub-scription {
        width: 100%;
    }

    .section-billet .content {
        width: 100%;
    }

    body .pathBg {
        display: none;
    }

    .card-scholarship .sub-scription li {
        font-size: 15px;
    }


    /* Page frais foorsa */
    .payment .price {
        position: relative;
        width: 100%;
        padding: 15px 0;
        height: 75px;
    }

    .payment .price a {
        font-size: 20px;
    }

    .card-payment {
        -webkit-transform: translateY(-17px);
        -ms-transform: translateY(-17px);
        transform: translateY(-17px);
        display: block;
        padding: 30px 20px;
    }

    .card-payment .content h3 {
        font-size: 20px;
    }

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

    .frais-foorsa .notice {
        font-size: 15px;
    }

    .frais-foorsa p {
        padding: 0 20px;
        font-size: 15px;
    }

    .frais-foorsa .list-options li:not(:last-child) {
        padding-bottom: 25px;
    }

    .frais-foorsa .list-options li {
        font-size: 14px;
        line-height: 19.78px;
    }

    .frais-foorsa .list-options {
        padding: 20px 25px;
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
    }


    html[lang="fr-FR"] .frais-foorsa .list-price li {
        padding: 21px 0;
        line-height: 27px;
    }

    .frais-foorsa .list-price li {
        padding: 14px 0;
        font-size: 14px;
    }

    .section-payment.section-scholarship .heading-page h1 {
        margin: 0;
    }

    #sectionEtudiant .cardEdudiant img {
        height: 100%;
    }

    body .swiper-button-prev,
    body .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    /* quiz page*/

    .sectionquiz,
    .sectionReasualt {
        height: 100vh;
        gap: 40px;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .sectionquiz .bolckDescription {
        width: 100%;
    }

    .sectionquiz .bolckDescription h1 {
        font-size: 30px;
    }

    .sectionquiz .bolckDescription p {
        line-height: 15.6px;
        font-size: 15px;
    }

    form#questionForm h2 {
        font-size: 20px;
    }

    .radio-container {
        padding: 12px 20px;
    }

    .sectionquiz .timeline {
        width: 100%;
        bottom: unset;
    }

    #submitButton {
        font-size: 15px;
        padding: 20px 40px;
        margin-top: 130px;
    }

    main.quiz {
        padding-bottom: 100px;
    }

    .quiz .actions a {
        font-size: 15px;
        padding: 20px 40px;
    }

    .quiz .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sectionReasualt .description {
        font-size: 16px;
    }

    .sectionReasualt .scools .image {
        width: 140px;
        height: 140px;
    }

    .sectionReasualt .scools>div p,
    .sectionReasualt .scools span {
        font-size: 20px;
    }

    /* study page*/
    .swiperStudy {
        margin-left: 0;
    }

    .sectionStudy {
        padding-left: 0;
        padding-right: 0;
    }

    .studies .title,
    .detailStudy .title {
        width: 100%;
        font-size: 30px;
    }

    .sectionStudy p {
        line-height: 15.6px;
        font-size: 15px;
    }

    .btnquiz {
        font-size: 15px;
    }

    .detailStudy section.details {
        padding: 0 20px;
    }

    .detailStudy .cardHeader svg {
        width: 30px;
        height: 30px;
    }

    .detailStudy .cardHeader h3 {
        font-size: 16px;
    }

    .barBlue {
        width: 100%;
    }

    .barDark {
        width: 95%;
    }

    .barGray {
        width: 90%;
    }

    .detailStudy .cardContent {
        padding: 15px 20px;
    }

    #sectionUniversities .universities .image img {
        max-width: 100px;
    }

    /*page map */
    .sectionMap .bolckDescription {
        width: 100%;
    }

    .sectionMap .bolckDescription h1 {
        font-size: 30px;
    }

    .sectionMap .bolckDescription p {
        font-size: 15px;
    }

    #map {
        overflow-x: scroll;
        width: 100% !important;
    }

    .tt_sm {
        width: 100%;
        all: unset;
    }

    .file-required {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .about-mission.padding-section,
    .about-frais.padding-section {
        padding: 0;
    }

    /* page about*/
    .teams {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .teams .member .image {
        width: 100%;
    }

    .section-about .description {
        width: 100%;
    }

    /*page partner*/
    .section-joinUs.section-partner h1 {
        margin-bottom: 0;
    }

    .section-joinUs.section-partner h2 {
        font-size: 26px;
    }

    .sctions-partner-with-us {
        width: 100%;
    }

    .cards-partner .cards {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

    }

    .cards-partner .about-frais {
        width: 100%;
    }

    .card-partner {
        width: 100%;
    }

    .form-partner {
        width: 100%;
        padding: 30px 20px;
        margin-bottom: -70px;

    }

    /* map mobile */

    .map-mobile {
        margin-bottom: 32px;
    }

    .map-mobile button.accordion-button {
        background-color: #041228;
        color: #fff;
        border-radius: 0 !important;
        border-top: 0.68px solid #041228;
        border-left: 0.68px solid #041228;
        border-right: 0.68px solid #041228;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'Marcher';
        font-size: 14px;
        font-weight: 700;
        line-height: 11.76px;
        padding: 14px 10px;

    }

    .map-mobile button.accordion-button.collapsed {
        background: #041228;
        color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
    }

    .map-mobile .accordion-button::after {
        color: #fff;
    }

    .map-mobile .accordion-collapse {
        border-left: 0.5px solid #041228;
        border-right: 0.5px solid #041228;
        padding: 24px 13px;
    }

    .map-mobile .accordion-item:last-of-type .accordion-collapse {
        border-bottom: 0.5px solid #041228;
    }

    .map-mobile .tt_sm hr {
        display: none;
    }

    .map-mobile .accordion-button::after {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-chevron-down" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E');
    }

    .map-mobile .accordion-button.collapsed::after {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" class="bi bi-chevron-down" viewBox="0 0 16 16"%3E%3Cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E');
    }


    .padding-section.cards-partner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .padding-section.section-infos {
        margin-top: 45px;
    }

    /*pae faq */

    .section-faq form {
        margin-top: 30px;
        padding: 12px 19px;
    }

    .faq-page .faq-questions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
    }

    .faq-page .faq-questions .categories ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 10px;
        overflow: auto;
    }

    .faq-page .faq-questions .categories ul li {
        margin-bottom: 10px;
    }

    .faq-page .faq-questions .categories ul li a {
        padding: 18px 20px;
        font-size: 16px;
        width: 180px;
    }

    .faq-page button.accordion-button {
        font-size: 18px;
    }

    /*page document*/
    .section-document h2 {
        font-size: 18px;
    }

    .section-document ul,
    .section-document ol {
        font-size: 15px;
    }

    .section-document .card-document {
        width: 100%;
        padding: 30px;
    }


    body .ti-widget.ti-goog .ti-controls-line {
        display: none !important;
    }

    /*page blog*/

    .article-img img {
        height: 195px;
    }

    .article-details h3 {
        font-size: 16px;
    }

    .article-excerpt {
        font-size: 15px;
    }

    .read-more .btn-send {
        font-size: 13px;
    }

    .section-newsletter .newsletter h3 {
        font-size: 22px;
    }

    .section-newsletter .newsletter p {
        font-size: 15px;
        width: 100%;
    }

    section.section-newsletter {
        padding: 26px 20px;
    }

    section.section-single-blog {
        height: 200px;
    }

    .content-blog h1 {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 28px;
    }

    .content-blog .content {
        font-size: 15px;
    }

    /*page newsletter*/

    .page-newsletter .section-journey .heading-page h1 {
        margin-bottom: 60px;
    }

    .page-newsletter .heading-page p {
        font-size: 16px;
    }

    /*page cash plus*/

    .cashplus-infos {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .section-cashplus h2 {
        font-size: 18px;

    }

    .section-cashplus p,
    .section-cashplus .detail a,
    .section-cashplus .notice p {
        font-size: 15px;
    }

    span#payment-token {
        font-size: 20px;
    }

    .logos-footer{
        width: 100%;
        margin-bottom: 20px;
    }

    .logos-footer img{
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .menuFooter{
        display: block;
        margin: 0 auto;
    }

    .btn-apply-navbar{
        position: absolute;
        left: 0;
        right: 0;
        width: max-content;
        margin: auto;
        top: 10px;
        font-size: 14px;
    }
}