/* ==========================================================================
   Theme Toggle Styles - Modern Design (Website Theme Colors)
   ========================================================================== */

/* Theme Toggle Wrapper */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    /* Spacing controlled by parent flex gap */
}

/* Theme Toggle Button - Using Website Theme Colors */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border: 2px solid var(--gorent-base, #FFB51D);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--gorent-base, #FFB51D);
    transform: scale(1.05);
}

.theme-toggle:hover .theme-toggle__icon--light {
    color: var(--gorent-black, #131222);
}

.theme-toggle:active {
    transform: scale(0.95);
}

/* Toggle Icons */
.theme-toggle__icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: var(--gorent-base, #FFB51D);
}

.theme-toggle__icon--light {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--dark {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

/* Dark Mode Active States */
body.dark-mode .theme-toggle {
    border-color: var(--gorent-base, #FFB51D);
    background: transparent;
}

body.dark-mode .theme-toggle:hover {
    background: var(--gorent-base, #FFB51D);
}

body.dark-mode .theme-toggle:hover .theme-toggle__icon--dark {
    color: var(--gorent-black, #131222);
}

body.dark-mode .theme-toggle__icon {
    color: var(--gorent-base, #FFB51D);
}

body.dark-mode .theme-toggle__icon--light {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

body.dark-mode .theme-toggle__icon--dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==========================================================================
   Dark Mode Theme Styles
   ========================================================================== */

/* ==========================================================================
   Theme-Specific Logo Visibility
   ========================================================================== */

/* Light theme (default): Show light logo, hide dark logo */
.logo-for-light-theme {
    display: inline-block !important;
}

.logo-for-dark-theme {
    display: none !important;
}

/* Dark theme: Show dark logo, hide light logo */
body.dark-mode .logo-for-light-theme {
    display: none !important;
}

body.dark-mode .logo-for-dark-theme {
    display: inline-block !important;
}

/* End Theme-Specific Logo Visibility */

body.dark-mode {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .main-header,
body.dark-mode .main-menu__top,
body.dark-mode .main-menu,
body.dark-mode .main-menu__wrapper,
body.dark-mode .main-menu-two,
body.dark-mode .main-menu-two__wrapper,
body.dark-mode .main-menu-three,
body.dark-mode .main-menu-three__wrapper {
    background-color: #16213e !important;
}

body.dark-mode .main-menu__list>li>a,
body.dark-mode .main-menu-two .main-menu__list>li>a,
body.dark-mode .main-menu-three .main-menu__list>li>a {
    color: #e0e0e0 !important;
}

body.dark-mode .main-menu__list>li:hover>a,
body.dark-mode .main-menu-two .main-menu__list>li:hover>a,
body.dark-mode .main-menu-three .main-menu__list>li:hover>a {
    color: var(--gorent-base, #FFB51D) !important;
}

body.dark-mode .main-menu__top-inner,
body.dark-mode .main-menu__contact-list li .text p,
body.dark-mode .main-menu__contact-list li .text p a {
    color: #b0b0b0 !important;
}

/* Sticky header dark mode */
body.dark-mode .stricky-header,
body.dark-mode .stricky-header.stricked-menu {
    background-color: #16213e !important;
}

body.dark-mode .page-header {
    background-color: #0f0f23 !important;
}

body.dark-mode .site-footer {
    background-color: #0f0f23 !important;
}

body.dark-mode .section-title__title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
}

body.dark-mode p {
    color: #c0c0c0 !important;
}

body.dark-mode .shadow-box {
    background-color: #1e2a4a !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .shadow-box li a {
    color: #e0e0e0 !important;
}

body.dark-mode .shadow-box li a:hover {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Fix search icon visibility in dark mode */
body.dark-mode .main-menu__search,
body.dark-mode .main-menu-two__search,
body.dark-mode .main-menu-three__search,
body.dark-mode .icon-search,
body.dark-mode [class*="__search"] {
    color: #ffffff !important;
}

body.dark-mode .main-menu__search:hover,
body.dark-mode .main-menu-two__search:hover,
body.dark-mode .main-menu-three__search:hover {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Cards and sections in dark mode */
body.dark-mode .services-one__single,
body.dark-mode .listing-one__single,
body.dark-mode .listing-two__single,
body.dark-mode .listing-three__single,
body.dark-mode .team-one__single,
body.dark-mode .testimonial-one__single,
body.dark-mode .blog-one__single,
body.dark-mode .pricing-one__single {
    background-color: #1e2a4a !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Input fields in dark mode */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: #1e2a4a !important;
    border-color: #3a4a6a !important;
    color: #e0e0e0 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #8a8a8a !important;
}

/* Call icon text in dark mode */
body.dark-mode .main-menu__call-sub-title,
body.dark-mode .main-menu__call-number a,
body.dark-mode .main-menu-two__call-sub-title,
body.dark-mode .main-menu-two__call-number a,
body.dark-mode .main-menu-three__call-sub-title,
body.dark-mode .main-menu-three__call-number a {
    color: #e0e0e0 !important;
}

/* Smooth transition for theme changes */
body,
.main-header,
.main-menu,
.main-menu__wrapper,
.stricky-header,
.main-menu__list>li>a,
.main-menu__search,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude animations from transition */
.theme-toggle,
.theme-toggle * {
    transition: all 0.3s ease !important;
}

.owl-carousel *,
.swiper-slide *,
img,
video {
    transition: none !important;
}

/* ==========================================================================
   FAQ Section Dark Mode Styles
   ========================================================================== */

/* FAQ Section Background Enhancement */
body.dark-mode .faq-one,
body.dark-mode .faq-two,
body.dark-mode .faq-page {
    background-color: #1a1a2e !important;
}

body.dark-mode .faq-one::before {
    background-color: rgba(26, 26, 46, 0.95) !important;
}

/* FAQ Accordion Cards - Dark Theme */
body.dark-mode .faq-one .faq-one-accrodion .accrodion,
body.dark-mode .faq-two .faq-one-accrodion .accrodion {
    background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%) !important;
    border: 1px solid rgba(255, 181, 29, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Active/Open Accordion Card */
body.dark-mode .faq-one .faq-one-accrodion .accrodion.active,
body.dark-mode .faq-two .faq-one-accrodion .accrodion.active {
    background: linear-gradient(135deg, #243b55 0%, #1e2a4a 100%) !important;
    border: 1px solid rgba(255, 181, 29, 0.4) !important;
    box-shadow: 0 6px 25px rgba(255, 181, 29, 0.15) !important;
}

/* Accordion Title Text - Bright White for Visibility */
body.dark-mode .faq-one .faq-one-accrodion .accrodion-title h4,
body.dark-mode .faq-two .faq-one-accrodion .accrodion-title h4 {
    color: #ffffff !important;
}

/* Active Accordion Title - Golden Highlight */
body.dark-mode .faq-one .faq-one-accrodion .accrodion.active .accrodion-title h4,
body.dark-mode .faq-two .faq-one-accrodion .accrodion.active .accrodion-title h4 {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Accordion Content Text - Clear and Readable */
body.dark-mode .faq-one .faq-one-accrodion .accrodion-content,
body.dark-mode .faq-two .faq-one-accrodion .accrodion-content {
    background-color: transparent !important;
}

body.dark-mode .faq-one .faq-one-accrodion .accrodion-content p,
body.dark-mode .faq-two .faq-one-accrodion .accrodion-content p {
    color: #e0e0e0 !important;
    line-height: 1.8 !important;
}

/* Accordion Arrow Icon - Always Visible */
body.dark-mode .faq-one .faq-one-accrodion .accrodion-title h4::before,
body.dark-mode .faq-two .faq-one-accrodion .accrodion-title h4::before {
    background-color: var(--gorent-base, #FFB51D) !important;
    color: #131222 !important;
}

body.dark-mode .faq-one .faq-one-accrodion .accrodion.active .accrodion-title h4::before,
body.dark-mode .faq-two .faq-one-accrodion .accrodion.active .accrodion-title h4::before {
    background-color: #ffffff !important;
    color: #131222 !important;
}

/* FAQ Section Title and Tagline */
body.dark-mode .faq-one__left .section-title__title,
body.dark-mode .faq-two .section-title__title,
body.dark-mode .faq-one__right .section-title__title {
    color: #ffffff !important;
}

body.dark-mode .faq-one .section-title__tagline,
body.dark-mode .faq-two .section-title__tagline {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Experience Box in FAQ - Dark with Gold Accent */
body.dark-mode .faq-one__experience-box {
    background: linear-gradient(270deg, #FFB51D 45%, #243b55 100%) !important;
}

body.dark-mode .faq-one__experience-year h2,
body.dark-mode .faq-one__experience-text {
    color: #ffffff !important;
}

/* FAQ Page specific styles */
body.dark-mode .faq-page__left,
body.dark-mode .faq-page__right {
    background-color: transparent !important;
}

/* Hover effect on accordion items */
body.dark-mode .faq-one .faq-one-accrodion .accrodion:hover,
body.dark-mode .faq-two .faq-one-accrodion .accrodion:hover {
    border-color: rgba(255, 181, 29, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 181, 29, 0.1) !important;
}

/* ==========================================================================
   About Section Dark Mode Styles
   ========================================================================== */

/* Progress Bar Percentage Numbers (100%) - Make White */
body.dark-mode .about-one__progress .count-text,
body.dark-mode .about-two__progress-single .graph-outer .count-text,
body.dark-mode .about-two__progress-single .graph-outer .count-Parsent {
    color: #ffffff !important;
}

/* Progress Bar Title Text */
body.dark-mode .about-one__progress-title,
body.dark-mode .about-two__progress-text-box h4 {
    color: #ffffff !important;
}

/* Progress Bar Background */
body.dark-mode .about-one__progress .bar {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Experience Box Text - "سنوات من الخبرة" */
body.dark-mode .about-one__experience-text,
body.dark-mode .about-two__experience-text {
    color: #131222 !important;
    font-weight: 600 !important;
}

/* Experience Count Numbers */
body.dark-mode .about-one__experience-count h3,
body.dark-mode .about-one__experience-count span,
body.dark-mode .about-two__experience-count h3,
body.dark-mode .about-two__experience-count span {
    color: #131222 !important;
}

/* About Section Content Text */
body.dark-mode .about-one__text-1,
body.dark-mode .about-one__text-2,
body.dark-mode .about-two__text-1 {
    color: #e0e0e0 !important;
}

/* About Section Points/List Items */
body.dark-mode .about-two__points li p,
body.dark-mode .about-three__points li .content p {
    color: #e0e0e0 !important;
}

/* Call Box Content in About Section */
body.dark-mode .about-one__call-box-content h4 a,
body.dark-mode .about-two__call-box-content h4 a {
    color: #ffffff !important;
}

body.dark-mode .about-one__call-box-content h4 a:hover,
body.dark-mode .about-two__call-box-content h4 a:hover {
    color: var(--gorent-base, #FFB51D) !important;
}

/* ==========================================================================
   Testimonials Section Dark Mode Styles
   ========================================================================== */

/* Reviewer Names - Make White for Visibility */
body.dark-mode .testimonial-one__client-name a,
body.dark-mode .testimonial-two__client-name a,
body.dark-mode .testimonial-three__client-name a {
    color: #ffffff !important;
}

/* Reviewer Names on Hover - Gold */
body.dark-mode .testimonial-one__client-name a:hover,
body.dark-mode .testimonial-two__client-name a:hover,
body.dark-mode .testimonial-three__client-name a:hover {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Client Sub-Title/Role Text */
body.dark-mode .testimonial-one__client-sub-title,
body.dark-mode .testimonial-two__client-sub-title,
body.dark-mode .testimonial-three__client-sub-title {
    color: #b0b0b0 !important;
}

/* Testimonial Text */
body.dark-mode .testimonial-one__text,
body.dark-mode .testimonial-two__text,
body.dark-mode .testimonial-three__text {
    color: #e0e0e0 !important;
}

/* Testimonial Cards Background */
body.dark-mode .testimonial-one__single {
    background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%) !important;
    border-color: rgba(255, 181, 29, 0.2) !important;
}

body.dark-mode .testimonial-two__single,
body.dark-mode .testimonial-three__single {
    background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%) !important;
}

/* Testimonial Section Background */
body.dark-mode .testimonial-one,
body.dark-mode .testimonial-two,
body.dark-mode .testimonial-three {
    background-color: #1a1a2e !important;
}

body.dark-mode .testimonial-two:before {
    background-color: rgba(26, 26, 46, 0.9) !important;
}

/* ==========================================================================
   Counter/Funfact Cards Dark Mode Styles
   ========================================================================== */

/* Counter Text Labels - Make White and Visible */
body.dark-mode .counter-one__count-text,
body.dark-mode .counter-two__count-text,
body.dark-mode .counter-three__count-text {
    color: #ffffff !important;
    text-align: center !important;
}

/* Dark cards (nth-child 2 and 3) - keep gold color */
body.dark-mode .counter-one__list li:nth-child(2) .counter-one__count-text,
body.dark-mode .counter-one__list li:nth-child(3) .counter-one__count-text,
body.dark-mode .counter-two__list li:nth-child(2) .counter-two__count-text,
body.dark-mode .counter-two__list li:nth-child(4) .counter-two__count-text {
    color: var(--gorent-base, #FFB51D) !important;
}

/* Ensure all counter content is centered */
body.dark-mode .counter-one__single-inner,
body.dark-mode .counter-two__single-inner {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.dark-mode .counter-one__count-box,
body.dark-mode .counter-two__count-box,
body.dark-mode .counter-three__count-box {
    justify-content: center !important;
    width: 100% !important;
}

/* Counter Section Background */
body.dark-mode .counter-one,
body.dark-mode .counter-two {
    background-color: #1a1a2e !important;
}

/* ==========================================================================
   Let's Talk / CTA Section Dark Mode Styles
   ========================================================================== */

/* Subtitle "تواصل معنا الآن" - Make visible on gold background */
body.dark-mode .lets-talk__title p {
    color: #131222 !important;
    font-weight: 600 !important;
}

/* Main title - ensure visibility */
body.dark-mode .lets-talk__title h2 {
    color: #ffffff !important;
}

/* ==========================================================================
   Services Cards Hover State Dark Mode Styles
   ========================================================================== */

/* Service card text on hover - make readable on gold background */
body.dark-mode .services-one__single:hover .services-one__text,
body.dark-mode .services-two__single:hover .services-two__text {
    color: #131222 !important;
    text-shadow: none !important;
}

/* Service card title on hover */
body.dark-mode .services-one__single:hover .services-one__title a,
body.dark-mode .services-two__single:hover .services-two__title a {
    color: #131222 !important;
}

/* Service card icon on hover */
body.dark-mode .services-one__single:hover .services-one__icon span,
body.dark-mode .services-two__single:hover .services-two__icon span {
    color: #131222 !important;
}

/* ==========================================================================
   Contact Info Cards Dark Mode Styles
   ========================================================================== */

/* Contact info label text under icons - BLACK text */
body.dark-mode .contact-info__single p {
    color: #131222 !important;
    font-weight: 600 !important;
}

/* Contact info title/value text - BLACK for visibility */
body.dark-mode .contact-info__single h3,
body.dark-mode .contact-info__single h3 a {
    color: #131222 !important;
}

/* Hover effect - turn gold */
body.dark-mode .contact-info__single h3 a:hover {
    color: var(--gorent-base, #FFB51D) !important;
}

/* ==========================================================================
   Responsive Logo Sizing - MAXIMIZED
   Navbar height is ~90px (35px padding + 20px logo padding each side)
   Maximizing logo to fill available vertical space
   ========================================================================== */

/* Desktop - maximize logo height */
.main-menu__logo {
    padding: 10px 0 !important;
}

.main-menu__logo img,
.main-menu-two__logo img,
.main-menu-three__logo img,
.main-menu-four__logo img,
.logo-for-light-theme,
.logo-for-dark-theme {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Medium screens / tablets in landscape */
@media only screen and (max-width: 1199px) {

    .main-menu__logo img,
    .main-menu-two__logo img,
    .main-menu-three__logo img,
    .main-menu-four__logo img,
    .logo-for-light-theme,
    .logo-for-dark-theme {
        max-height: 70px !important;
    }
}

/* Tablet screens */
@media only screen and (max-width: 991px) {

    .main-menu__logo img,
    .main-menu-two__logo img,
    .main-menu-three__logo img,
    .main-menu-four__logo img,
    .logo-for-light-theme,
    .logo-for-dark-theme {
        max-height: 50px !important;
    }

    .mobile-nav__content .logo-box img {
        max-height: 50px !important;
        width: auto !important;
    }

    .xs-sidebar-group .content-inner .logo img {
        max-height: 60px !important;
    }

    .footer-widget__about-logo img {
        max-height: 60px !important;
    }
}

/* Small tablets / large phones */
@media only screen and (max-width: 767px) {

    .main-menu__logo img,
    .main-menu-two__logo img,
    .main-menu-three__logo img,
    .main-menu-four__logo img,
    .logo-for-light-theme,
    .logo-for-dark-theme {
        max-height: 45px !important;
    }

    .mobile-nav__content .logo-box img {
        max-height: 45px !important;
        width: auto !important;
    }

    .xs-sidebar-group .content-inner .logo img {
        max-height: 55px !important;
    }

    .footer-widget__about-logo img {
        max-height: 55px !important;
    }

    .main-menu__logo,
    .main-menu-two__logo,
    .main-menu-three__logo {
        padding: 15px 0 !important;
    }
}

/* Mobile phones */
@media only screen and (max-width: 575px) {

    .main-menu__logo img,
    .main-menu-two__logo img,
    .main-menu-three__logo img,
    .main-menu-four__logo img,
    .logo-for-light-theme,
    .logo-for-dark-theme {
        max-height: 40px !important;
    }

    .mobile-nav__content .logo-box img {
        max-height: 40px !important;
        width: auto !important;
    }

    .xs-sidebar-group .content-inner .logo img {
        max-height: 50px !important;
    }

    .footer-widget__about-logo img {
        max-height: 50px !important;
    }

    .main-menu__logo,
    .main-menu-two__logo,
    .main-menu-three__logo {
        padding: 10px 0 !important;
    }
}

/* Very small phones */
@media only screen and (max-width: 400px) {

    .main-menu__logo img,
    .main-menu-two__logo img,
    .main-menu-three__logo img,
    .main-menu-four__logo img,
    .logo-for-light-theme,
    .logo-for-dark-theme {
        max-height: 35px !important;
    }

    .mobile-nav__content .logo-box img {
        max-height: 35px !important;
        width: auto !important;
    }

    .xs-sidebar-group .content-inner .logo img {
        max-height: 45px !important;
    }

    .footer-widget__about-logo img {
        max-height: 45px !important;
    }
}