/* ==========================================================================
   RESPONSIVE FIXES - Photographie Marrakech
   Corrections pour mobile et tablette
   ========================================================================== */ 
/* ==========================================================================
   0. FOOTER FAQ ICONS - Theme colors (Yellow/White) + ALIGNMENT
   ========================================================================== */ 
/* FAQ Icon Alignment - Flexbox for perfect alignment */
.faq-item h5.accordion-button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 45px 15px 15px !important;
    text-align: left !important;
    position: relative !important;
} 
.faq-item h5.accordion-button svg {
    flex-shrink: 0 !important;
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
} 
/* Fix accordion +/- indicator alignment */
.faq-item h5.accordion-button::after {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
} 
/* Uniformiser les couleurs des icônes FAQ en jaune (#FBB42F) et blanc */
.faq-item h5 svg path[fill="#464BD8"],
.faq-item h5 svg path[fill="#2AEFC8"],
.faq-item h5 svg path[fill="#514DDF"],
.faq-item h5 svg path[fill="#AA00C0"],
.faq-item h5 svg circle[fill="#464BD8"],
.faq-item h5 svg circle[style*="fill:#00D2FF"],
.faq-item h5 svg path[style*="fill:#00D2FF"],
.faq-item h5 svg path[style*="fill:#18BDF6"],
.faq-item h5 svg path[style*="fill:#C7CFE2"],
.faq-item h5 svg path[style*="fill:#A5D76E"],
.faq-item h5 svg path[style*="fill:#C3E678"],
.faq-item h5 svg path[style*="fill:#D2F578"],
.faq-item h5 svg path[style*="fill:#E6FFA0"] {
    fill: #FBB42F !important;
} 
.faq-item h5 svg path[fill="#FFFFFF"],
.faq-item h5 svg path[fill="#E4EAF6"],
.faq-item h5 svg path[style*="fill:#E4EAF6"] {
    fill: #FFFFFF !important;
} 
.faq-item h5 svg path[fill="#151B28"],
.faq-item h5 svg path[fill=""],
.faq-item h5 svg path:not([fill]) {
    fill: #FFFFFF !important;
} 
/* Icône check */
.faq-item h5 svg path[fill="#2ad025"] {
    fill: #FBB42F !important;
} 
.faq-item h5 svg path[fill="#851919"] {
    fill: #FFFFFF !important;
} 
/* Icône question */
.faq-item h5 svg path[fill="#39509d"] {
    fill: #FBB42F !important;
} 
/* ==========================================================================
   1. FIX GLOBAL - Empêcher le débordement horizontal
   ========================================================================== */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
} 
/* Container principal - empêcher débordement */
#smooth-wrapper,
#smooth-content,
.container-fluid,
.container {
    overflow-x: hidden;
} 
/* ==========================================================================
   2. HERO SECTION - Responsive mobile
   ========================================================================== */
@media (max-width: 768px) { 
    /* Hero video wrapper */
    .horo-style-2 {
        max-height: 100vh !important;
        min-height: 60vh;
    } 
    .horo-style-2 .video-wraper {
        height: 60vh;
        min-height: 400px;
    } 
    .horo-style-2 .video-wraper video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    } 
    /* Hero title - responsive */
    .banner-pagination-content h1 {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        padding: 5px 45px 3px 10px !important;
        max-width: 90vw;
        word-wrap: break-word;
    } 
    .banner-pagination-content h1::after {
        width: 30px !important;
        right: 10px !important;
        top: 12px !important;
    } 
    .banner-pagination-content h2 {
        font-size: 12px !important;
        line-height: 1.4 !important;
        max-width: 90vw;
        padding: 0 10px;
    } 
    /* Cacher la barre latérale sociale sur mobile */
    .horo-style-2 .social-area {
        display: none !important;
    } 
    /* Cacher le scroll-down indicator sur petit écran */
    .horo-style-2 .scroll-down {
        display: none !important;
    }
} 
@media (max-width: 576px) {
    .banner-pagination-content h1 {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
    } 
    .banner-pagination-content h2 {
        font-size: 11px !important;
    } 
    .banner-pagination-content.style-two {
        padding: 0 15px;
    }
} 
/* ==========================================================================
   3. ABOUT SECTION - Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .about-area2 {
        padding: 40px 0 !important;
    } 
    .about-area2 .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    } 
    .about-area2 .about-right {
        padding: 20px 0 !important;
    } 
    .about-area2 .about-title h3 {
        font-size: 24px !important;
        line-height: 1.4 !important;
        text-align: center;
    } 
    .about-area2 .about-content p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: justify;
    } 
    /* Swiper images */
    .about-img-slider {
        max-width: 100% !important;
    } 
    .about-img-slider .swiper-slide img {
        width: 100% !important;
        max-width: 100% !important;
    }
} 
@media (max-width: 576px) {
    .about-area2 .about-title h3 {
        font-size: 20px !important;
    } 
    .about-area2 .about-content p {
        font-size: 13px !important;
    }
} 
/* ==========================================================================
   4. PORTFOLIO SECTION - Responsive Grid
   ========================================================================== */
@media (max-width: 991px) {
    .portfolio-area2 {
        padding: 40px 0 !important;
    } 
    .portfolio-area2 .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    } 
    .section-title3 h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        padding: 0 10px;
    } 
    .section-title3 span {
        font-size: 13px !important;
        letter-spacing: 3px !important;
    } 
    /* Portfolio images - pleine largeur sur mobile */
    .portfolio-img {
        margin-bottom: 20px !important;
        width: 100% !important;
    } 
    .portfolio-img img {
        width: 100% !important;
        max-width: 100% !important;
    } 
    /* Magnetic wrap - désactiver offset sur mobile */
    .magnetic-wrap {
        transform: none !important;
        left: 0 !important;
        right: 0 !important;
    } 
    .magnetic-item {
        transform: none !important;
    } 
    /* Portfolio overlay - nouveau style fixe */
    .portfolio-img .overlay {
        padding: 15px 20px !important;
    } 
    .portfolio-img .overlay .icon {
        top: -15px !important;
        right: 15px !important;
    } 
    .portfolio-img .overlay .icon a {
        height: 40px !important;
        width: 40px !important;
    } 
    .portfolio-img .overlay .icon a i {
        font-size: 28px !important;
    } 
    .portfolio-img .overlay .content h4,
    .portfolio-img .overlay .content h4 a {
        font-size: 18px !important;
    } 
    .portfolio-img .overlay .content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
} 
@media (max-width: 576px) {
    .section-title3 h2 {
        font-size: 22px !important;
    } 
    .portfolio-img .overlay {
        padding: 12px 15px !important;
    } 
    .portfolio-img .overlay .icon {
        top: -12px !important;
        right: 12px !important;
    } 
    .portfolio-img .overlay .icon a {
        height: 35px !important;
        width: 35px !important;
    } 
    .portfolio-img .overlay .icon a i {
        font-size: 24px !important;
    } 
    .portfolio-img .overlay .content h4,
    .portfolio-img .overlay .content h4 a {
        font-size: 16px !important;
    } 
    .portfolio-img .overlay .content p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
} 
/* ==========================================================================
   5. SERVICE HIGHLIGHTS SECTION - Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .service-highlights {
        padding: 40px 0 !important;
    } 
    .service-highlights .row {
        margin-bottom: 30px !important;
    } 
    .service-highlights .service-title h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        padding: 0 10px;
    } 
    .service-highlights h4 {
        font-size: 1.4rem !important;
        text-align: center;
    } 
    .service-highlights .service-content p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
    } 
    .service-highlights img,
    .service-highlights video {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        display: block !important;
    } 
    /* Réorganiser les colonnes sur mobile */
    .service-highlights .order-lg-1,
    .service-highlights .order-lg-2 {
        order: unset !important;
    } 
    .service-highlights .col-lg-6 {
        margin-bottom: 20px !important;
    }
} 
@media (max-width: 576px) {
    .service-highlights .service-title h2 {
        font-size: 20px !important;
    } 
    .service-highlights h4 {
        font-size: 1.2rem !important;
    } 
    .service-highlights .service-content p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
} 
/* ==========================================================================
   6. REVEAL ANIMATIONS - Fix débordement mobile
   ========================================================================== */
@media (max-width: 991px) { 
    /* Réduire la distance de translation pour éviter le débordement */
    .reveal-left,
    .reveal-right {
        transform: translateX(0) !important;
    } 
    .reveal-up,
    .reveal-down {
        transform: translateY(0) !important;
    } 
    /* Force l'opacité visible */
    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-down {
        opacity: 1 !important;
    } 
    /* Alternative: réduire la distance de reveal */
    [class*="reveal-"] {
        overflow: visible !important;
    }
} 
/* ==========================================================================
   7. HEADER / NAVIGATION - Mobile
   ========================================================================== */
@media (max-width: 991px) {
    .header-area.style-2 {
        padding: 10px 15px !important;
    } 
    .header-area.style-2 .header-logo {
        margin-left: 0 !important;
    } 
    /* NOTE: Logo size is NOT modified - left as original */ 
    /* Menu principal - cacher sur mobile */
    .header-area.style-2 .main-menu {
        display: none !important;
    } 
    /* Nav right */
    .header-area.style-2 .nav-right {
        margin-right: 0 !important;
    } 
    .header-area.style-2 .nav-right .side-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
} 
/* Menu mobile - sidebar */
@media (max-width: 991px) {
    .main-nav-wrapper .main-nav {
        width: 100% !important;
        padding: 20px !important;
    } 
    .main-nav-wrapper .menu-list li a {
        font-size: 16px !important;
    } 
    .main-nav-wrapper .sub-menu li a {
        font-size: 14px !important;
    } 
    .main-nav-wrapper .nav-contact-list {
        padding: 20px 0 !important;
    } 
    .main-nav-wrapper .nav-contact-list .citem h6 {
        font-size: 12px !important;
    } 
    .main-nav-wrapper .nav-contact-list .citem a,
    .main-nav-wrapper .nav-contact-list .citem p {
        font-size: 13px !important;
    }
} 
/* ==========================================================================
   8. FLOATING BUTTONS - Responsive positioning
   ========================================================================== */
@media (max-width: 768px) { 
    /* Theme switcher */
    .tt-style-switch {
        top: auto !important;
        bottom: 150px !important;
        right: 10px !important;
        width: 35px !important;
        height: 30px !important;
        font-size: 14px !important;
    } 
    /* Language switcher */
    .tt-lang-switch {
        top: auto !important;
        bottom: 195px !important;
        right: 10px !important;
    } 
    .tt-lang-switch .lang-btn {
        width: 35px !important;
        height: 30px !important;
        font-size: 12px !important;
    } 
    /* Circle container (scroll to top) */
    .circle-container {
        right: 15px !important;
        bottom: 100px !important;
        width: 40px !important;
        height: 40px !important;
    } 
    .circle-container svg {
        width: 40px !important;
        height: 40px !important;
    } 
    /* WhatsApp button */
    .wa-btn {
        bottom: 20px !important;
        left: 15px !important;
        width: 50px !important;
        height: 50px !important;
    } 
    .wa-btn svg,
    .wa-btn img {
        width: 28px !important;
        height: 28px !important;
    }
} 
@media (max-width: 576px) { 
    .tt-style-switch,
    .tt-lang-switch {
        right: 5px !important;
    } 
    .wa-btn {
        left: 10px !important;
        bottom: 15px !important;
        width: 45px !important;
        height: 45px !important;
    }
} 
/* ==========================================================================
   9. FOOTER - Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .video-contact-testimonial-area {
        padding-bottom: 60px !important;
    } 
    /* Contact form */
    .contact-wrap {
        padding: 30px 20px !important;
        margin-bottom: 30px !important;
    } 
    .contact-wrap .title h2 {
        font-size: 28px !important;
    } 
    .contact-wrap .form-inner input,
    .contact-wrap .form-inner textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 14px !important;
    } 
    /* FAQ section */
    .faq-wrap {
        padding: 20px !important;
    } 
    .faq-item h5 {
        font-size: 14px !important;
        padding: 15px 10px !important;
    } 
    .faq-item h5 svg {
        width: 30px !important;
        min-width: 30px !important;
    } 
    .faq-body p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    } 
    /* Footer widgets */
    footer.style1 .footer-top {
        padding: 40px 0 !important;
    } 
    footer.style1 .footer-widget {
        margin-bottom: 30px !important;
        text-align: center !important;
    } 
    footer.style1 .widget-title h4 {
        font-size: 18px !important;
    } 
    footer.style1 .menu-container ul li a {
        font-size: 14px !important;
    } 
    footer.style1 .footer-btm p {
        font-size: 12px !important;
        text-align: center;
        padding: 0 15px;
    }
} 
@media (max-width: 576px) {
    .contact-wrap .title h2 {
        font-size: 24px !important;
    } 
    .faq-item h5 {
        font-size: 13px !important;
        flex-wrap: nowrap;
    } 
    .faq-item h5 svg {
        width: 25px !important;
        min-width: 25px !important;
        margin-right: 10px !important;
    } 
    footer.style1 .widget-title h4 {
        font-size: 16px !important;
    }
} 
/* ==========================================================================
   10. BUTTONS - Responsive
   ========================================================================== */
@media (max-width: 768px) { 
    .primary-btn6,
    .primary-btn3,
    .primary-btn4 {
        padding: 10px 20px 8px !important;
        font-size: 14px !important;
    } 
    .see-more-btn a {
        padding: 10px 25px 8px !important;
        font-size: 14px !important;
    }
} 
/* ==========================================================================
   11. TYPOGRAPHY - Responsive
   ========================================================================== */
@media (max-width: 768px) {
    h1 {
        font-size: 28px !important;
    } 
    h2 {
        font-size: 24px !important;
    } 
    h3 {
        font-size: 20px !important;
    } 
    h4 {
        font-size: 18px !important;
    } 
    p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
} 
@media (max-width: 576px) {
    h1 {
        font-size: 24px !important;
    } 
    h2 {
        font-size: 20px !important;
    } 
    h3 {
        font-size: 18px !important;
    } 
    h4 {
        font-size: 16px !important;
    } 
    p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
} 
/* ==========================================================================
   12. IMAGES & VIDEOS - Responsive
   ========================================================================== */
@media (max-width: 991px) { 
    img,
    video {
        max-width: 100% !important;
        height: auto !important;
    } 
    .img-fluid {
        max-width: 100% !important;
    } 
    /* Video wrapper */
    .video-wraper {
        width: 100% !important;
        overflow: hidden !important;
    } 
    .video-wraper video {
        width: 100% !important;
        object-fit: cover !important;
    }
} 
/* ==========================================================================
   13. SPACING - Responsive padding/margin
   ========================================================================== */
@media (max-width: 991px) {
    .mb-120 {
        margin-bottom: 60px !important;
    } 
    .pb-120 {
        padding-bottom: 60px !important;
    } 
    .pt-120 {
        padding-top: 60px !important;
    } 
    .mb-60 {
        margin-bottom: 30px !important;
    } 
    .pt-35 {
        padding-top: 20px !important;
    }
} 
@media (max-width: 576px) {
    .mb-120 {
        margin-bottom: 40px !important;
    } 
    .pb-120 {
        padding-bottom: 40px !important;
    } 
    .pt-120 {
        padding-top: 40px !important;
    }
} 
/* ==========================================================================
   14. MAGIC CURSOR - Désactiver sur mobile/tablette
   ========================================================================== */
@media (max-width: 1024px) {
    #magic-cursor {
        display: none !important;
    } 
    #ball {
        display: none !important;
    }
} 
/* ==========================================================================
   15. PRELOADER - Fix mobile
   ========================================================================== */
@media (max-width: 768px) {
    .preloader::before {
        transform: scale(0.6) !important;
        top: 20% !important;
    } 
    .preloader .counter {
        font-size: 3rem !important;
    } 
    .preloader .counter::after {
        font-size: 40px !important;
    }
} 
/* ==========================================================================
   16. TABLET SPECIFIC FIXES (768px - 991px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) { 
    /* Grid columns */
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    } 
    /* About section */
    .about-area2 .row {
        flex-direction: column !important;
    } 
    /* Portfolio - 2 columns */
    .portfolio-area2 .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    } 
    /* Service highlights */
    .service-highlights .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
} 
/* ==========================================================================
   17. LANDSCAPE MOBILE FIX
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .horo-style-2 {
        max-height: 100vh !important;
        min-height: 100vh !important;
    } 
    .banner-pagination-content h1 {
        font-size: 14px !important;
    } 
    .banner-pagination-content h2 {
        font-size: 12px !important;
    }
} 
/* ==========================================================================
   18. PRINT STYLES
   ========================================================================== */
@media print { 
    .wa-btn,
    .tt-style-switch,
    .tt-lang-switch,
    .circle-container,
    .scroll-btn,
    #magic-cursor,
    .preloader {
        display: none !important;
    }
} 
/* ==========================================================================
   19. HIDE SCROLL TO TOP / PROGRESS INDICATOR (Requested)
   ========================================================================== */
.circle-container,
.scroll-btn {
    display: none !important;
} 
/* ==========================================================================
   20. SCROLL FIX - Portfolio Cards
   ========================================================================== */
/* Force enable vertical scrolling on portfolio cards */
.portfolio-img,
.portfolio-img .overlay,
.magnetic-item,
.magnetic-wrap,
.swiper-slide,
.swiper-wrapper,
.service-highlights {
    touch-action: pan-y !important;
} 
/* Ensure no overflow hidden traps */
.portfolio-area2,
.service-highlights {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
} 
/* Fix GSAP potential conflict */
.magnetic-wrap {
    pointer-events: auto !important;
}