/* =========================================================
   AL FAKHAMA
   responsive.css
   Responsive / Tablet / Mobile Styles
========================================================= */


/* =========================================================
   01. LARGE DESKTOPS
   <= 1400px
========================================================= */

@media (max-width: 1400px) {

    :root {
        --container-width: 1180px;
    }

    .nav-link {
        padding-inline: 11px;
    }

    .gallery-grid {
        gap: 10px;
    }

    .services-grid {
        gap: 12px;
    }

    .service-card {
        min-height: 145px;
    }

}


/* =========================================================
   02. SMALL DESKTOP / LAPTOP
   <= 1200px
========================================================= */

@media (max-width: 1200px) {

    :root {
        --container-width: 1060px;
        --container-padding: 22px;
    }

    .navbar-container {
        gap: 14px;
    }

    .navbar-brand-text {
        display: none;
    }

    .main-navigation {
        margin-inline: auto;
    }

    .nav-list {
        gap: 1px;
    }

    .nav-link {
        padding-inline: 9px;

        font-size: 0.78rem;
    }

    .navbar-call-button {
        min-width: 104px;

        padding-inline: 14px;
    }

    .hero-content {
        width: min(100%, 900px);
    }

    .about-content-grid,
    .contact-layout {
        gap: 34px;
    }

    .gallery-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .featured-services-grid {
        gap: 18px;
    }

    .services-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .why-us-grid {
        gap: 20px;
    }

    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-grid {
        gap: 34px;
    }

}


/* =========================================================
   03. TABLET LANDSCAPE
   <= 992px
========================================================= */

@media (max-width: 992px) {

    :root {
        --header-height: 72px;
        --container-padding: 20px;
    }

    /* Header */

    .site-header {
        height: var(--header-height);
    }

    .navbar-container {
        min-height: calc(var(--header-height) - 2px);
    }

    .navbar-logo {
        width: 50px;
        height: 50px;
    }

    .main-navigation {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .navbar-actions {
        margin-inline-start: auto;
    }

    .language-switch {
        min-width: 58px;
    }

    .navbar-call-button {
        min-width: 108px;
    }


    /* Mobile Navigation */

    .mobile-navigation {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        display: block;

        max-height: 0;

        overflow: hidden;

        opacity: 0;

        visibility: hidden;

        background: rgba(10, 36, 78, 0.99);

        border-top: 1px solid rgba(255, 255, 255, 0.06);

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .mobile-navigation.is-open {
        max-height: 520px;

        opacity: 1;

        visibility: visible;
    }

    .mobile-nav-list {
        width: min(
            calc(100% - 40px),
            760px
        );

        margin-inline: auto;

        padding: 16px 0 20px;
    }

    .mobile-nav-list li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .mobile-nav-list a {
        display: flex;
        align-items: center;

        min-height: 47px;

        padding: 10px 4px;

        color: var(--color-gold-light);

        font-size: 0.9rem;
        font-weight: 600;

        transition:
            color var(--transition-fast),
            padding var(--transition-fast);
    }

    .mobile-nav-list a:hover {
        color: var(--color-white);

        padding-inline-start: 10px;
    }


    /* Hamburger active */

    .mobile-menu-toggle.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* Hero */

    .hero-section {
        min-height: 820px;
    }

    .hero-container {
        min-height: calc(820px - var(--header-height));

        padding-block: 70px 54px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 6vw, 4.2rem);
    }

    .hero-subtitle {
        font-size: clamp(1.7rem, 4vw, 2.6rem);
    }

    .hero-description {
        max-width: 700px;
    }


    /* About */

    .about-section {
        padding-block: 65px 82px;
    }

    .about-content-grid {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .about-media {
        width: min(100%, 720px);

        margin-inline: auto;
    }

    .about-video {
        height: 390px;
    }

    .about-copy {
        width: min(100%, 760px);

        margin-inline: auto;
    }


    /* Gallery */

    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gallery-lightbox {
        padding-inline: 75px;
    }


    /* Services */

    .featured-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-service-card:last-child {
        grid-column: 1 / -1;

        width: min(100%, 520px);

        margin-inline: auto;
    }

    .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* Why Us */

    .why-us-grid {
        grid-template-columns: 1fr;

        width: min(100%, 720px);

        margin-inline: auto;

        margin-top: 48px;
    }

    .why-us-card {
        min-height: 190px;
    }


    /* Testimonials */

    .testimonials-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Contact */

    .contact-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .contact-info-column,
    .contact-form-column {
        width: min(100%, 760px);

        margin-inline: auto;
    }


    /* Footer */

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 40px;

        padding-block: 42px 32px;
    }

}


/* =========================================================
   04. TABLET PORTRAIT
   <= 768px
========================================================= */

@media (max-width: 768px) {

    :root {
        --container-padding: 18px;
        --header-height: 68px;
    }

    body {
        font-size: 15px;
    }


    /* Shared headings */

    .section-title {
        font-size: clamp(1.9rem, 7vw, 2.8rem);
    }

    .section-description {
        font-size: 0.93rem;
    }


    /* Header */

    .navbar-logo {
        width: 46px;
        height: 46px;
    }

    .language-switch {
        min-width: 50px;
        min-height: 40px;

        padding-inline: 10px;
    }

    .language-switch i {
        display: none;
    }

    .navbar-call-button {
        min-width: auto;

        padding: 9px 12px;
    }

    .navbar-call-button span {
        display: none;
    }

    .navbar-call-button i {
        margin: 0;
    }


    /* Hero */

    .hero-section {
        min-height: 760px;
    }

    .hero-container {
        min-height: calc(760px - var(--header-height));

        padding-block: 64px 45px;
    }

    .hero-content {
        width: 100%;
    }

    .hero-decoration {
        margin-bottom: 16px;
    }

    .decoration-line {
        width: 50px;
    }

    .hero-title {
        font-size: clamp(2.1rem, 8vw, 3.4rem);

        line-height: 1.35;
    }

    .hero-subtitle {
        margin-top: 12px;

        font-size: clamp(1.45rem, 6vw, 2.2rem);
    }

    .hero-description {
        margin-top: 18px;

        font-size: 0.98rem;
        line-height: 1.9;
    }

    .hero-actions {
        flex-direction: column;

        width: min(100%, 360px);

        margin-inline: auto;
        margin-top: 26px;
    }

    .hero-button {
        width: 100%;

        min-height: 52px;
    }

    .hero-call-button,
    .hero-gallery-button {
        min-width: 0;
    }

    .hero-scroll-indicator {
        margin-top: 10px;
    }

    .hero-quick-navigation {
        flex-wrap: wrap;

        gap: 12px 22px;

        max-width: 360px;

        margin-inline: auto;
    }


    /* About */

    .about-section {
        padding-block: 56px 70px;
    }

    .about-heading {
        margin-bottom: 42px;
    }

    .about-video {
        height: 340px;
    }

    .experience-badge {
        left: 14px;
        bottom: -22px;

        min-width: 88px;
    }

    .about-copy {
        margin-top: 12px;
    }

    .about-intro {
        font-size: 0.95rem;
    }

    .about-values {
        grid-template-columns: 1fr;
    }


    /* Gallery */

    .projects-section {
        padding-block: 58px;
    }

    .gallery-filters {
        margin-top: 26px;
        margin-bottom: 28px;
    }

    .gallery-filter {
        padding-inline: 15px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-lightbox {
        padding: 54px 58px;
    }

    .gallery-lightbox-close,
    .gallery-lightbox-nav {
        width: 46px;
        height: 46px;
    }

    .gallery-lightbox-close {
        top: 14px;
        right: 14px;
    }

    .gallery-lightbox-prev {
        left: 10px;
    }

    .gallery-lightbox-next {
        right: 10px;
    }


    /* Services */

    .services-section {
        padding-block: 60px;
    }

    .featured-services-grid {
        grid-template-columns: 1fr;

        width: min(100%, 620px);

        margin-inline: auto;
    }

    .featured-service-card:last-child {
        grid-column: auto;

        width: 100%;
    }

    .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service-card {
        min-height: 138px;
    }


    /* Why Us */

    .why-us-section {
        padding-block: 58px 66px;
    }

    .why-us-grid {
        margin-top: 40px;
    }

    .why-us-card {
        min-height: 180px;

        padding: 26px;
    }

    .why-us-icon {
        width: 58px;
        height: 58px;
    }


    /* Testimonials */

    .testimonials-section {
        padding-block: 54px 64px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;

        width: min(100%, 620px);

        margin-inline: auto;
    }

    .testimonial-card {
        min-height: auto;
    }

    .testimonial-text {
        min-height: 0;
    }


    /* Contact */

    .contact-section {
        padding-block: 54px 64px;
    }

    .contact-heading {
        margin-bottom: 42px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    .contact-map-wrapper {
        height: 250px;
    }

    .contact-form {
        padding: 26px 22px 24px;
    }


    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-column {
        width: min(100%, 620px);

        margin-inline: auto;
    }

    .footer-brand-column {
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-about-text {
        margin-inline: auto;
    }

    .footer-column-title {
        text-align: center;
    }

    .footer-links {
        align-items: center;
    }

    .footer-contact-list {
        width: max-content;
        max-width: 100%;

        margin-inline: auto;
    }

    .footer-social {
        text-align: center;
    }

    .footer-social-links {
        justify-content: center;
    }

}


/* =========================================================
   05. MOBILE
   <= 576px
========================================================= */

@media (max-width: 576px) {

    :root {
        --container-padding: 15px;
        --header-height: 64px;
    }


    /* Header */

    .navbar-container {
        gap: 8px;
    }

    .navbar-logo {
        width: 42px;
        height: 42px;
    }

    .navbar-actions {
        gap: 5px;
    }

    .language-switch {
        min-width: 44px;

        padding-inline: 8px;

        font-size: 0.78rem;
    }

    .navbar-call-button {
        width: 40px;
        height: 40px;
        min-height: 40px;

        padding: 0;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;

        padding: 8px;
    }


    /* Hero */

    .hero-section {
        min-height: 720px;
    }

    .hero-container {
        min-height: calc(720px - var(--header-height));

        padding-block: 60px 40px;
    }

    .hero-pattern {
        background-size: 24px 24px;
    }

    .hero-title {
        font-size: clamp(1.85rem, 9vw, 2.7rem);
    }

    .hero-subtitle {
        font-size: clamp(1.3rem, 7vw, 1.8rem);
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .hero-button {
        min-height: 50px;

        padding-inline: 18px;

        font-size: 0.9rem;
    }

    .hero-quick-navigation {
        gap: 10px 18px;
    }

    .hero-quick-navigation a {
        font-size: 0.78rem;
    }


    /* About */

    .about-video {
        height: 280px;
    }

    .experience-badge {
        left: 10px;

        min-width: 82px;
        min-height: 86px;

        padding: 10px;
    }

    .experience-badge-title {
        font-size: 0.72rem;
    }

    .experience-badge-text {
        font-size: 0.62rem;
    }

    .about-quote {
        padding: 15px 17px;

        font-size: 0.9rem;
    }

    .about-value-card {
        min-height: auto;

        padding: 18px;
    }


    /* Gallery */

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 9px;
    }

    .gallery-filter {
        min-height: 34px;

        padding: 6px 12px;

        font-size: 0.76rem;
    }

    .gallery-more-button {
        min-width: 190px;
        min-height: 50px;

        font-size: 0.88rem;
    }


    /* Lightbox */

    .gallery-lightbox {
        padding: 58px 12px 60px;
    }

    .gallery-lightbox-content {
        width: 100%;
    }

    .gallery-lightbox-image-wrapper {
        max-width: 100%;
        max-height: calc(100vh - 125px);
    }

    .gallery-lightbox-image {
        max-height: calc(100vh - 125px);
    }

    .gallery-lightbox-close,
    .gallery-lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .gallery-lightbox-close {
        top: 10px;
        right: 10px;
    }

    .gallery-lightbox-prev {
        left: 8px;

        background: rgba(16, 47, 99, 0.82);
    }

    .gallery-lightbox-next {
        right: 8px;

        background: rgba(16, 47, 99, 0.82);
    }

    .gallery-lightbox-counter {
        bottom: -16px;

        min-width: 78px;
        min-height: 34px;

        font-size: 0.8rem;
    }


    /* Services */

    .featured-service-card {
        min-height: auto;

        padding: 23px;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .service-card {
        min-height: 132px;

        padding: 16px 9px;
    }

    .service-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 13px;

        font-size: 1.15rem;
    }

    .service-card-title {
        font-size: 0.7rem;
    }


    /* Why Us */

    .why-us-card {
        min-height: 170px;

        padding: 24px 20px;
    }

    .why-us-check {
        top: 18px;
        left: 18px;

        width: 30px;
        height: 30px;
    }

    html[dir="ltr"] .why-us-check {
        right: 18px;
        left: auto;
    }

    .why-us-icon {
        width: 52px;
        height: 52px;

        font-size: 1.35rem;
    }

    .why-us-card-title {
        font-size: 1.05rem;
    }

    .why-us-card-description {
        font-size: 0.84rem;
    }


    /* Testimonials */

    .testimonial-card {
        padding: 20px;
    }


    /* Contact */

    .contact-info-card {
        min-height: 100px;

        padding: 16px;
    }

    .contact-info-icon {
        width: 46px;
        height: 46px;
    }

    .contact-social-card {
        padding: 20px;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .contact-map-wrapper {
        height: 220px;
    }

    .contact-form {
        padding: 24px 16px 20px;
    }

    .contact-form-title {
        font-size: 1.2rem;
    }

    .form-group {
        margin-top: 15px;
    }


    /* Footer */

    .footer-grid {
        padding-top: 38px;
    }

    .footer-brand {
        flex-direction: column;

        text-align: center;
    }

    .footer-brand-text {
        align-items: center;
    }

    .footer-contact-list li {
        font-size: 0.8rem;
    }

    .footer-copyright {
        width: 100%;

        padding: 10px 15px;

        font-size: 0.75rem;
    }


    /* Floating Buttons */

    .floating-whatsapp {
        left: 14px;
        bottom: 14px;

        width: 52px;
        height: 52px;

        font-size: 1.65rem;
    }

    .floating-contact {
        left: 16px;
        bottom: 79px;

        width: 46px;
        height: 46px;

        font-size: 1.05rem;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;

        width: 44px;
        height: 44px;
    }

}


/* =========================================================
   06. VERY SMALL MOBILE
   <= 400px
========================================================= */

@media (max-width: 400px) {

    :root {
        --container-padding: 12px;
    }

    .navbar-logo {
        width: 40px;
        height: 40px;
    }

    .language-switch {
        min-width: 40px;

        padding-inline: 6px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-description {
        font-size: 0.84rem;
    }

    .hero-quick-navigation {
        gap: 8px 14px;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .about-video {
        height: 240px;
    }

    .gallery-grid {
        gap: 7px;
    }

    .gallery-filter {
        padding-inline: 10px;
    }

    .service-card {
        min-height: 125px;
    }

    .service-icon {
        width: 44px;
        height: 44px;
    }

    .testimonial-card {
        padding: 18px;
    }

    .contact-info-card {
        gap: 12px;

        padding: 14px;
    }

    .contact-info-value {
        font-size: 0.84rem;
    }

    .contact-form {
        padding-inline: 14px;
    }

}


/* =========================================================
   07. SHORT VIEWPORT HEIGHTS
========================================================= */

@media (max-height: 700px) and (min-width: 769px) {

    .hero-section {
        min-height: 700px;
    }

    .hero-container {
        min-height: calc(700px - var(--header-height));

        padding-block: 42px 28px;
    }

    .hero-title {
        font-size: clamp(2.4rem, 4vw, 4rem);
    }

    .hero-subtitle {
        font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    }

    .hero-description {
        margin-top: 14px;
    }

    .hero-actions {
        margin-top: 22px;
    }

}


/* =========================================================
   08. MOBILE LANDSCAPE
========================================================= */

@media (orientation: landscape) and (max-height: 520px) {

    .hero-section {
        min-height: 620px;
    }

    .hero-container {
        min-height: calc(620px - var(--header-height));
    }

    .gallery-lightbox {
        padding-block: 18px;
    }

    .gallery-lightbox-image-wrapper,
    .gallery-lightbox-image {
        max-height: calc(100vh - 38px);
    }

    .gallery-lightbox-counter {
        bottom: 8px;
    }

}


/* =========================================================
   09. RTL RESPONSIVE ADJUSTMENTS
========================================================= */

@media (max-width: 992px) {

    html[dir="rtl"] .mobile-nav-list a:hover {
        padding-right: 10px;
        padding-left: 4px;
    }

    html[dir="ltr"] .mobile-nav-list a:hover {
        padding-left: 10px;
        padding-right: 4px;
    }

}


/* =========================================================
   10. TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .gallery-image-overlay {
        background: linear-gradient(
            180deg,
            transparent 50%,
            rgba(7, 29, 64, 0.55)
        );

        opacity: 1;

        align-items: flex-end;
        justify-content: flex-end;

        padding: 10px;
    }

    .gallery-open-icon {
        width: 32px;
        height: 32px;

        border: 0;

        background: rgba(7, 29, 64, 0.82);

        transform: none;
    }

    .gallery-open-text {
        display: none;
    }

    .gallery-image-button:hover img {
        transform: none;

        filter: none;
    }

    .gallery-image-button:hover .gallery-open-icon {
        transform: none;
    }

}


/* =========================================================
   11. SAFE AREA SUPPORT
   iPhone / modern devices
========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    .floating-whatsapp {
        bottom: max(
            14px,
            calc(env(safe-area-inset-bottom) + 8px)
        );
    }

    .floating-contact {
        bottom: max(
            79px,
            calc(env(safe-area-inset-bottom) + 73px)
        );
    }

    .back-to-top {
        bottom: max(
            14px,
            calc(env(safe-area-inset-bottom) + 8px)
        );
    }

}


/* =========================================================
   12. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mobile-navigation,
    .mobile-menu-toggle span {
        transition: none;
    }

}

/* =========================================================
   VIDEO GALLERY RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .video-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 576px) {

    .video-gallery-section {
        padding-block: 58px;
    }

    .video-gallery-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .video-gallery-card {
        width: min(100%, 480px);

        margin-inline: auto;
    }

    .video-play-button {
        width: 54px;
        height: 54px;

        font-size: 1.05rem;
    }

    .video-card-info {
        right: 16px;
        bottom: 14px;
        left: 16px;
    }

    .video-lightbox {
        padding: 20px 12px;
    }

    .video-lightbox-panel {
        padding: 8px;
    }

    .video-lightbox-close {
        top: -14px;
        right: -4px;

        width: 40px;
        height: 40px;
    }

    .video-lightbox-player {
        max-height: 70vh;
    }

}

/* =========================================================
   FAQ RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .faq-section {
        padding-block: 58px 66px;
    }

    .faq-heading {
        margin-bottom: 34px;
    }

    .faq-question {
        min-height: 66px;

        padding: 16px 18px;

        font-size: 0.93rem;
    }

    .faq-answer-inner p {
        padding:
            0
            18px
            18px;

        font-size: 0.88rem;
    }

    .faq-cta {
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }

}


@media (max-width: 480px) {

    .faq-list {
        gap: 10px;
    }

    .faq-question {
        gap: 12px;

        padding: 14px;

        font-size: 0.86rem;
    }

    .faq-icon {
        width: 30px;
        height: 30px;

        font-size: 0.8rem;
    }

    .faq-answer-inner p {
        padding:
            0
            14px
            16px;

        font-size: 0.82rem;
    }

    .faq-cta-button {
        width: 100%;

        max-width: 280px;
    }

}