/* ===================================================================
   BEYOND TECHNOLOGY - Custom Fixes for Menu & Animation Issues
   =================================================================== */

/* ----------------------------- FIX #0: FOUC Prevention ------------------------ */
/* Prevent Flash of Unstyled Content (FOUC) */
html.loading {
    visibility: hidden;
    opacity: 0;
}

html.loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Fallback - auto-show after 100ms if JS fails */
html {
    visibility: visible;
    animation: fouc-fallback 0s 0.1s forwards;
}

@keyframes fouc-fallback {
    to {
        visibility: visible;
        opacity: 1;
    }
}

/* ----------------------------- FIX #1: AOS Animation Performance ------------------------ */
/* Prevent flash of unstyled content on first load */
[data-aos] {
    visibility: hidden;
}

[data-aos].aos-animate {
    visibility: visible;
}

/* Optimize AOS transitions for better first-load performance */
[data-aos][data-aos-delay] {
    transition-delay: 0s !important;
}

[data-aos][data-aos-delay].aos-animate {
    transition-delay: inherit !important;
}


/* ----------------------------- FIX #2: Mobile Offcanvas Menu ------------------------ */
/* Ensure offcanvas stays visible when open */
.offcanvas.show {
    visibility: visible !important;
    opacity: 1 !important;
}

.offcanvas {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* Fix offcanvas menu items from fading away */
.offcanvas-menu ul li {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

.offcanvas-body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdown items stay visible in offcanvas */
.offcanvas-menu ul li .dropdown-menu-list {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix accordion dropdown in mobile menu */
.offcanvas-menu .accordion-collapse.show {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ----------------------------- FIX #3: RTL Menu Styling ------------------------ */
/* RTL-specific dropdown menu positioning */
[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

/* RTL dropdown toggle chevron icon */
[dir="rtl"] .main-menu nav ul li .dropdown-toggle span {
    order: -1;
    margin-left: 0;
    margin-right: 8px;
}

/* RTL dropdown item chevron positioning */
[dir="rtl"] .dropdown-menu > li > .dropdown-item span {
    order: -1;
    margin-left: 0;
    margin-right: 8px;
}

/* RTL dropdown item alignment */
[dir="rtl"] .dropdown-menu > li > .dropdown-item {
    text-align: right;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding-right: 16px;
    padding-left: 16px;
}

/* RTL dropdown menu padding and spacing */
[dir="rtl"] .dropdown-menu {
    padding: 16px;
    text-align: right;
}

/* RTL dropdown item icon */
[dir="rtl"] .dropdown-menu > li > .dropdown-item span i {
    transform: scaleX(-1);
}

/* RTL chevron icon rotation for dropdown */
[dir="rtl"] .dropdown-toggle span i.fa-chevron-down {
    transform: none;
}

/* RTL offcanvas menu alignment */
[dir="rtl"] .offcanvas-menu ul li a {
    text-align: right !important;
    flex-direction: row-reverse;
}

[dir="rtl"] .offcanvas-menu ul li .dropdown-menu-list li a {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

[dir="rtl"] .offcanvas-menu ul li .dropdown-menu-list li a span {
    margin-left: 0;
    margin-right: auto;
}

/* RTL header button spacing */
[dir="rtl"] .header-btns {
    flex-direction: row-reverse;
}

[dir="rtl"] .header-contact-btn span {
    order: -1;
    margin-left: 0;
    margin-right: 8px;
}

/* RTL language selector positioning */
[dir="rtl"] .language-select {
    direction: ltr;
}

/* RTL Header Container - Full Layout Fix */
[dir="rtl"] .header-inner-block {
    flex-direction: row-reverse;
}

/* RTL main menu gap fixes */
[dir="rtl"] .header-left-block {
    flex-direction: row-reverse;
    order: 2;
}

[dir="rtl"] .main-menu nav ul {
    flex-direction: row-reverse;
}

[dir="rtl"] .main-menu nav ul li {
    margin-left: 0;
    margin-right: 20px;
}

[dir="rtl"] .main-menu nav ul li:last-child {
    margin-right: 0;
}

/* RTL Logo positioning - Move to right side */
[dir="rtl"] .header-logo {
    order: 3;
}

[dir="rtl"] .header-right-block,
[dir="rtl"] .navbar-right {
    order: 1;
}

/* Ensure RTL dropdown alignment is proper */
[dir="rtl"] .dropdown-menu {
    transform-origin: top right;
}

[dir="ltr"] .dropdown-menu {
    transform-origin: top left;
}


/* ----------------------------- Additional Improvements ------------------------ */
/* Smooth header transitions */
.header-area {
    transition: all 0.3s ease-in-out;
}

/* Prevent layout shift during load */
.main-area {
    min-height: 100vh;
}

/* Optimize dropdown animation */
.dropdown-menu {
    animation-duration: 0.2s !important;
}

/* Fix dropdown visibility issues */
.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ----------------------------- FIX #4: FAQ Accordion Arrow Positioning ------------------------ */
/* LTR-specific FAQ accordion arrow positioning */
[dir="ltr"] .faq-accordion .accordion-button {
    padding-inline-end: 60px !important;
}

[dir="ltr"] .faq-accordion .accordion-button::after {
    position: absolute;
    right: 12px;
    flex-shrink: 0;
}

/* RTL-specific FAQ accordion arrow positioning */
[dir="rtl"] .faq-accordion .accordion-button {
    padding-inline-start: 60px !important;
}

[dir="rtl"] .faq-accordion .accordion-button::after {
    position: absolute;
    left: 12px;
    right: auto;
    flex-shrink: 0;
}

/* Ensure accordion body text alignment matches direction */
[dir="ltr"] .faq-accordion .accordion-body {
    padding-left: 12px;
    padding-right: 42px;
    text-align: left;
}

[dir="rtl"] .faq-accordion .accordion-body {
    padding-right: 12px;
    padding-left: 42px;
    text-align: right;
}


/* ----------------------------- FIX #5: Team Swiper Pagination ------------------------ */
/* Improve pagination bullets clickability and smoothness */
.team-pagination {
    gap: 8px;
}

.team-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    cursor: pointer;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.team-pagination .swiper-pagination-bullet:hover {
    transform: scale(1.2);
    background-color: #3a9e9a;
}

.team-pagination .swiper-pagination-bullet-active {
    width: 28px;
    height: 10px;
    cursor: pointer;
}

/* Ensure smooth slide transitions for team swiper */
.team-card-wrap .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

.team-card-wrap .swiper-slide {
    transition: transform 0.4s ease, opacity 0.4s ease;
}


/* ----------------------------- FIX #6: Global Swiper Smooth Animations ------------------------ */
/* Smooth slide transitions for all swipers */
.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Hero slider smooth transitions */
.hero-slide-thumb .swiper-slide {
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), 
                opacity 0.5s ease,
                height 0.4s ease;
}

.hero-slide-thumb .swiper-slide-active {
    transform: scale(1);
}

.hero-slide-thumb .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.85;
}

/* Work slider smooth transitions */
.work-single-wrap .swiper-slide,
.outer-work-swiper .swiper-slide {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
                opacity 0.4s ease;
}

.work-single-wrap .swiper-slide-active,
.outer-work-swiper .swiper-slide-active {
    opacity: 1;
}

/* Brand logos slider smooth transitions */
.brand-logos-slide .swiper-slide {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
                opacity 0.4s ease,
                filter 0.3s ease;
}

.brand-logos-slide .swiper-slide-active {
    transform: scale(1.05);
}

/* Concept slider smooth transitions */
.concept-thumbnails .swiper-slide {
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), 
                opacity 0.5s ease;
}

/* Team card hover and slide effects */
.team-card-wrap .swiper-slide {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), 
                opacity 0.4s ease,
                box-shadow 0.3s ease;
}

.team-card-wrap .swiper-slide:hover .team-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Swiper pagination bullets global smooth animation */
.swiper-pagination-bullet {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    cursor: pointer;
}

.swiper-pagination-bullet:hover {
    transform: scale(1.15);
}

/* Smooth opacity for slides entering/leaving */
.swiper-slide-prev,
.swiper-slide-next {
    opacity: 0.9;
}

/* Ensure images inside slides transition smoothly */
.swiper-slide img {
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.swiper-slide:hover img {
    transform: scale(1.02);
}