.justify-con {
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 1rem 0;
    color: white;
}

/* ───────────────────────────────
   الارتفاعات حسب النوع
─────────────────────────────── */
.hyptecht-dim-desktop,
.hyptecht-above-desktop-text {
    min-height: 600px;
}

.desktop-height {
    min-height: 850px;
}


.mobile-height
{
    min-height: 400px;
}
.hyptecht-above-mobile-text {
    min-height: 500px;
}

/* ───────────────────────────────
   الخلفيات
─────────────────────────────── */
/* سطح المكتب */
.hyptecht-dim-desktop         { background-image: url('../img/d5.webp'); }
.all-car-img-desktop-text     { background-image: url('../img/d2-pc.webp'); }
.all-car-img-desktop-text-interior { background-image: url('../img/d4.webp'); }
.all-car-img-desktop-text-backend  { background-image: url('../img/d7.webp'); }
.all-car-img-desktop-text-performance  { background-image: url('../img/d9.webp'); }
.all-car-img-desktop-text-saftey  { background-image: url('../img/d12.webp'); }
.hyptecht-above-desktop-text  { background-image: url('../img/aiony1-above-desktop.webp'); }

/* الجوال */
.hyptecht-dim-mobile                { background-image: url('../img/d5.webp'); }
.all-car-img-mobile-text           { background-image: url('../img/d2-mobile.webp'); }
.all-car-img-mobile-text-interior  { background-image: url('../img/d4-mobile.webp'); }
.all-car-img-mobile-text-backend   { background-image: url('../img/d7-mobile.webp'); }
.all-car-img-mobile-text-performance   { background-image: url('../img/d9-mobile.webp'); }
.all-car-img-mobile-text-saftey   { background-image: url('../img/d12-mobile.webp'); }

.hyptecht-above-mobile-text        { background-image: url('../img/aiony1-above-mobile.webp'); }

/* ───────────────────────────────
   النصوص المتحركة
─────────────────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ───────────────────────────────
   نصوص أسفل الصور
─────────────────────────────── 
.bottom-text {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 100%;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
}

.bottom-text-mobile {
    left: 0;
    width: 100%;
    padding: 15px;
}
*/
/* ───────────────────────────────
   عناصر الفيديو والتراكب
─────────────────────────────── */
.video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-text {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    color: white;
    font-size: 2rem;
    text-align: center;
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.overlay-text.show {
    opacity: 1;
    transform: translate(-50%, -40%);
}

.overlay-text img {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.overlay-text h2 {
    font-size: 1rem;
    margin-top: 1rem;
    line-height: 1.5;
}

.overlay-text a {
    display: inline-block;
    margin-top: 1.5rem;
    border: 2px solid #fff;
    padding: 0.5rem 1rem;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 1rem;
}

.after-video {
    height: 100vh;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #333;
}

/* ───────────────────────────────
   contact-box
─────────────────────────────── */
.contact-box {
    background: url('../img/contact-form.webp') no-repeat center center !important;
    background: rgba(255, 255, 255, 0.15);
    background-size: cover;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.contact-box h2,
label {
    color: #fff;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.contact-box h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

.form-control {
    border-radius: 0;
    height: 50px;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.btn-custom {
    background-color: #3498db;
    color: white;
    font-weight: bold;
    border-radius: 12px;
    transition: background 0.3s ease;
}

.btn-custom:hover {
    background-color: #2980b9;
}

/* ───────────────────────────────
   Swiper Slider
─────────────────────────────── */
.swiper {
    width: 100%;
    height: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

.swiper-slide {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    width: 85%;
}

.caption {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
}

/* ───────────────────────────────
   الداخلية - الانعكاس (اختياري)
─────────────────────────────── */
.interior1-b2 {
    transform: scaleX(-1);
}

/* ───────────────────────────────
   التصميم المتجاوب (Responsive)
─────────────────────────────── */
@media (max-width: 768px) {
    .all-car-img-desktop,
    .all-car-img-desktop-interior,
    .hyptecht-dim-desktop,
    .hyptecht-interior-desktop,
    .hyptecht-above-desktop {
        display: none;
    }

    .swiper-slide {
        width: 90%;
    }

    .swiper-slide img {
        width: 100%;
        display: block;
        object-fit: contain;
        padding: 20px;
        border-radius: 50px;
    }

    .caption {
        font-size: 0.9rem;
    }

    .overlay-text h2 {
        font-size: 0.9rem;
    }

    .overlay-text a {
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (min-width: 768px) {
    .all-car-img-mobile,
    .all-car-img-mobile-interior,
    .aiony-interior-mobile,
    .hyptecht-above-mobile,
    .hyptecht-dim-mobile {
        display: none;
    }

    .swiper-slide img {
        width: 100%;
        height: 500px;
        display: block;
        object-fit: cover;
        padding: 20px;
        border-radius: 50px;
    }
    
}

.aiony-interior-mobile img {
    background-size: contain;
    width: 100%;
}

.aiony-interior-desktop {
    padding: 100px;
}

.aiony-interior-desktop img {
    background-size: cover;
    width: 100%;
}