/* =====================================================
   MOBILE VERSION
   ===================================================== */

@media (max-width: 700px) {

    /* ================= NAVBAR ================= */

    .navbar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 82px !important;

        padding: 10px 22px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        background: transparent !important;
        border: none !important;

        z-index: 1000 !important;
    }


    /* اللوجو ناحية الشمال */

    .navbar .logo {
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar .logo img {
        width: 105px !important;
        height: auto !important;

        max-width: none !important;
        max-height: none !important;

        transform: none !important;
    }


    /* زرار الـ 3 شرط ناحية اليمين */

    .menu-button {
        order: 3 !important;

        display: flex !important;

        width: 46px !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        font-size: 29px !important;

        background: rgba(7, 35, 52, 0.55) !important;

        border: 1px solid rgba(0, 200, 255, 0.12) !important;

        border-radius: 10px !important;

        color: #fff !important;
    }


    /* إخفاء روابط الديسكتوب */

    .nav-links,
    .nav-phone {
        display: none !important;
    }

    .nav-links.show {
        display: flex !important;
        position: absolute;
        top: 75px;
        right: 20px;
        flex-direction: column;
        width: 200px;
        padding: 15px;
        gap: 15px;
        background: #111827;
        border-radius: 12px;
        z-index: 9999;
    }



    /* ================= HERO ================= */

    .hero {

        position: relative !important;

        width: 100% !important;
        height: 650px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;

        overflow: hidden !important;

        background: #06131d !important;
    }


    /* ================= HERO IMAGE ================= */

    /* ================= HERO IMAGE ================= */
    /* ================= HERO IMAGE ================= */

    .hero-image {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        border-radius: 0 !important;

        overflow: hidden !important;

        z-index: 1 !important;

        background: #06131d !important;
    }

    .hero-image img {
        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        /* نجيب الجزء المناسب من الصورة */
        object-position: 72% center !important;
    }


    /* طبقة خفيفة جدًا عشان الكلام يفضل واضح */

    .hero-image::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: 2;

        background:
            linear-gradient(90deg,
                rgba(2, 13, 22, 0.90) 0%,
                rgba(2, 13, 22, 0.65) 28%,
                rgba(2, 13, 22, 0.20) 55%,
                rgba(2, 13, 22, 0) 75%);
    }

    .hero-image::after {
        display: none !important;
    }



    /* ================= HERO CONTENT ================= */

    .hero-content {

        position: absolute !important;

        z-index: 5 !important;

        top: 185px !important;

        left: 5% !important;
        right: auto !important;

        width: 57% !important;

        margin: 0 !important;
        padding: 0 !important;

        direction: rtl !important;

        text-align: center !important;
    }


    /* ================= TITLE ================= */

    .hero-content h1 {

        margin: 0 0 8px !important;

        font-size: 31px !important;

        line-height: 1.25 !important;

        font-weight: 800 !important;

        color: #fff !important;

        white-space: normal !important;
    }


    /* ================= SUBTITLE ================= */

    .hero-content h2 {

        margin: 0 0 18px !important;

        font-size: 23px !important;

        line-height: 1.4 !important;

        font-weight: 700 !important;

        color: #19c9ff !important;
    }


    /* ================= DESCRIPTION ================= */

    .hero-description {

        margin: 0 auto 22px !important;

        width: 100% !important;

        font-size: 16px !important;

        line-height: 1.9 !important;

        font-weight: 600 !important;

        color: #fff !important;
    }



    /* ================= FEATURES ================= */

    .hero-features {

        width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;

        direction: rtl !important;
    }


    .hero-feature {

        min-height: 92px !important;

        padding: 11px 7px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 2px !important;

        text-align: center !important;

        background: rgba(8, 35, 51, 0.88) !important;

        border: 1px solid rgba(35, 190, 240, 0.25) !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;
    }


    .feature-icon {

        width: 38px !important;
        height: 38px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin-bottom: 4px !important;

        border-radius: 10px !important;

        background: rgba(0, 174, 239, 0.20) !important;

        color: #20d1ff !important;

        font-size: 19px !important;
    }


    .hero-feature span {

        display: block !important;

        font-size: 15px !important;

        line-height: 1.35 !important;

        font-weight: 700 !important;

        color: #fff !important;
    }



    /* ================= BUTTONS ================= */

    .hero-actions {

        margin-top: 18px !important;

        display: flex !important;

        justify-content: center !important;

        gap: 9px !important;

        flex-wrap: wrap !important;
    }


    .hero-actions a {

        font-size: 14px !important;

        padding: 11px 17px !important;

        border-radius: 9px !important;
    }



    /* =====================================================
       SECTIONS UNDER HERO
       ===================================================== */

    .services {

        width: 92% !important;

        margin: 35px auto 0 !important;

        padding: 0 !important;

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }


    .service-card {

        min-height: 230px !important;

        padding: 18px 13px !important;

        box-sizing: border-box !important;

        border-radius: 14px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .service-icon {

        width: 46px !important;
        height: 46px !important;

        margin-bottom: 10px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        font-size: 21px !important;
    }


    .service-content h3 {

        font-size: 18px !important;

        line-height: 1.4 !important;

        margin: 0 0 8px !important;
    }


    .service-content p {

        font-size: 13px !important;

        line-height: 1.75 !important;

        margin: 0 0 10px !important;
    }


    .service-content a {

        font-size: 14px !important;
    }



    /* ================= ABOUT ================= */

    .about-section {

        width: 92% !important;

        margin: 45px auto 0 !important;

        padding: 28px 20px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;
    }


    .about-content {

        width: 100% !important;

        margin: 0 !important;

        text-align: right !important;
    }


    .section-label {

        font-size: 14px !important;
    }


    .about-content h2,
    .why-content h2 {

        font-size: 24px !important;

        line-height: 1.5 !important;

        margin: 8px 0 14px !important;
    }


    .about-content p,
    .why-content>p {

        font-size: 15px !important;

        line-height: 1.9 !important;

        margin-bottom: 13px !important;
    }



    /* ================= WHY US ================= */

    .why-section {

        width: 92% !important;

        margin: 35px auto 0 !important;

        padding: 28px 15px !important;

        box-sizing: border-box !important;

        border-radius: 15px !important;
    }


    .why-content {

        width: 100% !important;

        margin: 0 !important;

        text-align: right !important;
    }


    .why-grid {

        display: grid !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        margin-top: 20px !important;
    }


    .why-card {

        min-height: 190px !important;

        padding: 17px 12px !important;

        box-sizing: border-box !important;

        border-radius: 13px !important;

        text-align: center !important;
    }


    .why-icon {

        width: 42px !important;
        height: 42px !important;

        margin: 0 auto 9px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


    .why-card h3 {

        font-size: 16px !important;

        line-height: 1.4 !important;

        margin: 0 0 7px !important;
    }


    .why-card p {

        font-size: 13px !important;

        line-height: 1.7 !important;

        margin: 0 !important;
    }



    /* ================= FOOTER ================= */

    .footer {

        margin-top: 45px !important;
    }


    .footer-container {

        width: 92% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 28px !important;

        text-align: center !important;
    }


    .footer-brand img {

        width: 110px !important;

        height: auto !important;
    }


    .footer-brand p,
    .footer-contact a,
    .footer-links a {

        font-size: 14px !important;

        line-height: 1.8 !important;
    }


    .footer-links,
    .footer-contact {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 7px !important;
    }


    .footer h3 {

        font-size: 18px !important;

        margin-bottom: 7px !important;
    }


    .footer-bottom {

        margin-top: 25px !important;

        padding: 15px 10px !important;
    }


    .footer-bottom p {

        font-size: 12px !important;
    }

}



/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 390px) {

    .hero {
        height: 730px !important;
    }


    .navbar {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }


    .navbar .logo img {
        width: 95px !important;
    }


    .menu-button {
        width: 42px !important;
        height: 42px !important;

        font-size: 26px !important;
    }


    .hero-content {

        top: 175px !important;

        left: 4% !important;

        width: 60% !important;
    }


    .hero-content h1 {
        font-size: 27px !important;
    }


    .hero-content h2 {
        font-size: 21px !important;
    }


    .hero-description {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }


    .hero-feature {
        min-height: 86px !important;
    }


    .hero-feature span {
        font-size: 14px !important;
    }


    .feature-icon {
        width: 34px !important;
        height: 34px !important;

        font-size: 17px !important;
    }


    .services,
    .why-grid {
        gap: 9px !important;
    }


    .service-card {
        min-height: 215px !important;
        padding: 15px 9px !important;
    }


    .service-content h3 {
        font-size: 16px !important;
    }


    .service-content p {
        font-size: 12px !important;
    }


    .why-card {
        min-height: 180px !important;
        padding: 14px 9px !important;
    }


    .why-card h3 {
        font-size: 15px !important;
    }


    .why-card p {
        font-size: 12px !important;
    }

}