html{
    min-height: 100%;
}
body{
    min-height: 100vh;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.bg-head{
    background-image: url('../image/bg1.webp');
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav{
    position: fixed;
    padding: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
        z-index: 0999999;
}

.nav img{
    height: 2.5rem;
}

.nav button{
    padding: .7rem 2rem;
    padding-bottom: 1rem;
    margin-right: 1rem;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    background-color: #968eff;
    color: white;
}

.p-btn{
    text-align: center;
    width: 20rem;
    padding: 1rem;
}

/* Keep p-btn centered and sticky while bg-head is in view */
.bg-head{ position: relative; }
.p-btn{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: calc(50vh - 4rem); /* keep vertically centered roughly */
    margin: 0 auto;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1), opacity 0.4s;
}

.p-btn h2{
    color: white;

}

.p-btn .p-b{
    margin-top: 2rem;
    width: 100%;
   display: flex;
   justify-content: space-evenly;
}

.p-btn .p-b .and{
    background-color: #968eff;
        padding: .7rem 3rem;
    padding-bottom: 1rem;
    border-radius: 2rem;
    color: white;
    width: 2.8rem;
    text-decoration: none;
}

.p-btn .p-b .ios{
    
        padding: .7rem 3rem;
    padding-bottom: 1rem;
    border-radius: 2rem;
    color: white;
        width: 2.8rem;
        border: 2px solid white;
        text-decoration: none;
}

/* Entry animations for site sections */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* subtle reveal for nav and header */
.nav{ animation: fadeUp 700ms ease both; }
.bg-head .p-btn{ animation: fadeUp 900ms 150ms ease both; }

/* Cars section reveal */
.cars{ animation: fadeUp 700ms 200ms both; }

/* Slider caption animations
   captions are placed below images (not overlay) and RTL */
.caption{
    position: relative;
    text-align: right;
    direction: rtl;
    color: #222;
    width: 100%;
    padding: 1rem 1.25rem;
    background: #fff;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 360ms;
    border-radius: 0 0 .9rem .9rem;
    box-sizing: border-box;
}
.caption-title{
    margin: 0 0 .4rem 0;
    color: #968eff; /* requested color */
    font-size: 1.15rem;
}
.caption-desc{ margin: 0; color: #444; }

.slide.active .caption,
.slide.is-active .caption{
    transform: translateY(0);
    opacity: 1;
}

/* Add subtle parallax-like overlay and image transform on active slide */
.slide img{ transition: transform 900ms cubic-bezier(.2,.9,.2,1), filter 700ms; object-fit: cover; }
.slide.active img,
.slide.is-active img{ transform: scale(1.03); filter: saturate(1.05) contrast(1.02); }

/* Animated prev/next appearance */
.prev, .next{ transition: transform 220ms, opacity 220ms; opacity: 0.95; }
.slider:hover .prev, .slider:hover .next{ transform: translateY(-50%) scale(1.03); opacity: 1; }

/* small adjustments for sticky behavior on small screens */
@media (max-width: 900px){
    .cars .list{ gap: .75rem; }
    .cars .list{ flex-wrap: wrap; }
    .cars .item{ width: 48%; }
    .slider{ max-width: 100%; }
}

@media (max-width: 700px){
    .p-btn{ top: 40vh; width: 90%; }
    /* .caption{ right: 1rem; left: 1rem; max-width: none; bottom: 1.5rem; } */
    .caption-title{ font-size: 1rem; }
    .cars .item{ width: 100%; }
    .nav img{ height: 2rem; }
    .prev, .next{ width: 2.6rem; height: 2.6rem; font-size: 1rem; }
    .dot{ width: .9rem; height: .9rem; }
    .slide img{ max-height: 52vh; object-fit: contain; }
}

@media (max-width: 480px){
    html, body{ font-size: 14px; }

    .p-btn{ top: 38vh; width: 95%; }
    .nav{ padding: .4rem; }
    .nav button{ padding: .5rem .8rem; }
    .slider{ margin: 0 0.6rem; }
    .slide img{ object-fit: contain; max-height: 48vh; }
    .footer .container{ grid-template-columns: 1fr; }
    .footer .nl-form{ flex-direction: column; }
    .footer .nl-form input{ width: 100%; }
}

.cars h3{
    text-align: center;
    color: #968eff;
}

.cars .list{
    display: flex;
    justify-content: center; 
    gap: 1rem;   
}

.cars .item{
    width: 15rem;
    text-align: center;
    background-color: rgb(235, 243, 243);
    border-radius: 1rem;
    padding: 1rem;

}

.item img{
    width: 80%;
}

/* Gallery / Slider */
.gallery{
    padding: 3rem 1rem;
    background: #fff;
    text-align: center;
}
.gallery h3{
    color: #968eff;
    margin-bottom: 1rem;
}
.slider{
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    max-height: 75vh; /* prevent excessive growth on large screens */
}
.slides{
    display: flex;
    width: 100%;
    align-items: center; /* center slide content vertically */
    transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}
.slide{
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* center images horizontally */
    justify-content: flex-start;
    background: #f7f7fb;
    position: relative;
    overflow: hidden;
    border-radius: .9rem;
}
.slide img{
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 65vh; /* default cap so full screenshot fits */
    display: block;
    transition: transform 900ms ease, filter 700ms ease;
    border-radius: .9rem .9rem 0 0;
    object-fit: contain; /* show full screenshot without cropping */
    background: #f7f7fb;
    
}
.slide .caption{ opacity: 0; transform: translateY(18px); transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 500ms; }
.slide.is-active .caption{ opacity: 1; transform: translateY(0); }

.prev, .next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.35);
    color: white;
    border: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
}
.prev{ left: 0.7rem; }
.next{ right: 0.7rem; }

.dots{
    display: flex;
    gap: .5rem;
    justify-content: center;
    visibility: hidden;

}
.dot{
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
}
.dot.active{ background: #968eff; }

/* Footer */
.footer{
    background: linear-gradient(180deg, #faf9ff, #fff);
    padding: 2rem 1rem;
    border-top: 1px solid #f0eefb;
}

/* make footer RTL and right-aligned */
.footer{ direction: rtl; text-align: right; }

.footer .container{
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.footer .links ul{ padding-right: 0; }
.footer .links ul li{ text-align: right; }
.footer .about img{ margin-left: 0; margin-right: 0; }
.footer .col h4{ margin: 0 0 .5rem 0; color: #333; }
.footer .about p{ color: #555; margin-top: .5rem; }
.footer .links ul{ list-style: none; padding: 0; margin: 0; }
.footer .links li{ margin-bottom: .45rem; }
.footer .links a{ color: #666; text-decoration: none; }
.footer .contact p{ color: #666; margin: .25rem 0; }
.footer .newsletter .nl-form{ display: flex; gap: .5rem; margin-top: .5rem; }
.footer .nl-form input{ padding: .5rem; flex: 1; border-radius: .4rem; border: 1px solid #e6e6f2; }
.footer .nl-form button{ background: #968eff; color: white; border: none; padding: .55rem 1rem; border-radius: .5rem; }
.footer img{ height: 2.2rem; }
.footer .copy{ text-align: center; color: #888; margin-top: 1rem; grid-column: 1 / -1; }

@media (max-width: 700px){
    .footer .container{ grid-template-columns: 1fr; text-align: center; }
    .nav button{ padding: .6rem 1rem; }
}

/* Scroll reveal base */
.reveal{ opacity: 0; transform: translateY(14px) scale(.995); transition: opacity 650ms ease, transform 650ms ease; will-change: transform, opacity; }
.reveal.show{ opacity: 1; transform: translateY(0) scale(1); }

/* slight stagger for children inside revealed containers */
.reveal .item, .reveal .col, .reveal .p-b a{ transition-delay: 120ms; }