/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Cairo",sans-serif;
    background:#F7F8FB;
    color:#111827;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

.wrapper{

    width:min(1350px,92%);
    margin:auto;

}

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

.hero{

    min-height:100vh;

}

.container{

    width:100%;
    min-height:100vh;

    display:grid;
    grid-template-columns:45% 55%;

    direction:ltr;

}

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

.hero-content{

    direction:rtl;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:90px;

}

.logo{

    width:320px;
    margin-bottom:70px;

}

.badge{

    display:inline-flex;

    width:max-content;

    padding:12px 24px;

    background:#EAF7EC;

    color:#2E7D32;

    border-radius:50px;

    font-weight:700;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:72px;

    font-weight:900;

    line-height:1.1;

    margin-bottom:20px;

}

.hero-content p{

    font-size:22px;

    color:#666;

    line-height:2;

    margin-bottom:45px;

}

/* ==========================
   STATS
========================== */

.stats{

    display:flex;

    gap:18px;

    margin-bottom:45px;

}

.card{

    flex:1;

    background:#fff;

    border-radius:22px;

    padding:28px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(46,125,50,.18);

}

.card h2{

    color:#2E7D32;

    font-size:38px;

    margin-bottom:10px;

}

.card span{

    color:#777;

}

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

.buttons{

    display:flex;

    gap:18px;

}

.btn{

    padding:18px 35px;

    border-radius:16px;

    font-weight:700;

    transition:.3s;

}

.green{

    background:#2E7D32;
    color:#fff;

}

.white{

    background:#fff;
    color:#111827;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.btn:hover{

    transform:translateY(-4px);

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

.hero-image{

    position:relative;

    overflow:hidden;

}

.hero-image img{

    width:100%;
    height:100vh;

    object-fit:cover;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

/* ==========================
   الخلفية المائلة
========================== */

.hero-image::before{

    content:"";

    position:absolute;

    top:0;
    left:-120px;

    width:260px;
    height:100%;

    background:#F7F8FB;

    transform:skewX(-10deg);

    z-index:2;

}

/* ==========================
   التدرج
========================== */

.hero-image::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:260px;
    height:100%;

    background:linear-gradient(

        to right,

        #F7F8FB 0%,
        rgba(247,248,251,.96) 15%,
        rgba(247,248,251,.75) 35%,
        rgba(247,248,251,.30) 60%,
        rgba(247,248,251,0) 100%

    );

    z-index:3;

}

/* ==========================
   اللمعة
========================== */

.shine{

    position:absolute;

    top:0;
    left:160px;

    width:120px;
    height:100%;

    background:linear-gradient(

        to right,

        transparent,
        rgba(255,255,255,.45),
        transparent

    );

    filter:blur(30px);

    pointer-events:none;

    z-index:4;

}

/* ==========================
   ANIMATION
========================== */

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

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

.features{

    padding:120px 0;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:#2E7D32;

    font-weight:700;

    letter-spacing:1px;

}

.section-title h2{

    font-size:44px;

    margin-top:12px;

}

.features-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:22px;

}

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.35s;

    cursor:default;

    border:1px solid transparent;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#2E7D32;

    box-shadow:0 25px 60px rgba(46,125,50,.15);

}

.icon{

    width:72px;

    height:72px;

    margin:auto auto 22px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:#EDF8EF;

}

.feature-card h3{

    font-size:22px;

    margin-bottom:12px;

}

.feature-card p{

    color:#666;

    line-height:1.9;

}

/* ==========================
   GALLERY
========================== */

.gallery{

    padding:120px 0;

    background:#F7F8FB;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin-top:60px;

}

.gallery-grid img{

    width:100%;

    height:360px;

    object-fit:cover;

    border-radius:24px;

    transition:.4s;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.gallery-grid img:hover{

    transform:scale(1.03);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}
/* ==========================
   DETAILS
========================== */

.details{

    padding:120px 0;

    background:#F7F8FB;

}

.details-box{

    background:#fff;

    border-radius:24px;

    display:grid;

    grid-template-columns:1fr 1fr 1.4fr;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.details-box>div{

    padding:45px;

}

.details-box>div:not(:last-child){

    border-left:1px solid #ECECEC;

}

.price-box,
.center-box{

    text-align:center;

}

.price-box span,
.center-box span{

    color:#777;

}

.price-box h3{

    color:#2E7D32;

    font-size:54px;

    margin:15px 0;

}

.center-box img{

    width:85px;

    margin:0 auto 20px;

}

.center-box h3{

    font-size:46px;

    margin-bottom:10px;

}

.specs-box h3{

    margin-bottom:20px;

}

.specs-box ul{

    list-style:none;

}

.specs-box li{

    margin-bottom:16px;

    color:#555;

}

.notice{

    margin-top:25px;

    background:#FFF4D8;

    border:1px solid #F0D48A;

    color:#8A6A00;

    padding:18px 24px;

    border-radius:14px;

    text-align:center;

    font-weight:700;

}


/* ==========================
   CONTACT
========================== */

.contact{

    padding:120px 0;

    background:#fff;

}

.contact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:60px;

}

.contact-card{

    background:#fff;

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.07);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(46,125,50,.18);

}

.contact-card h3{

    font-size:34px;

    margin-bottom:12px;

}

.contact-card small{

    display:block;

    color:#888;

    margin-bottom:25px;

}

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

}

.contact-buttons a{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:22px;

    transition:.3s;

}

.phone-btn{

    background:#1F2937;

}

.whatsapp-btn{

    background:#25D366;

}

.contact-buttons a:hover{

    transform:scale(1.12);

}
/* ==========================
   LOCATION
========================== */

.location{

    padding:120px 0;

    background:#F7F8FB;

}

.location-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:60px;

}

.location-card{

    background:#fff;

    border-radius:24px;

    padding:45px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    border:1px solid transparent;

}

.location-card:hover{

    transform:translateY(-10px);

    border-color:#2E7D32;

    box-shadow:0 25px 65px rgba(46,125,50,.15);

}

.location-card h3{

    font-size:28px;

    margin-bottom:15px;

}

.location-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:28px;

}

.location-card a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 30px;

    background:#2E7D32;

    color:#fff;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}

.location-card a:hover{

    background:#256729;

    transform:translateY(-3px);

}


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

footer{

    background:#111827;

    color:#fff;

    padding:80px 0 40px;

}

.footer-content{

    text-align:center;

}

.footer-logo{

    width:220px;

    margin:0 auto 30px;

}

.footer-content p{

    color:#D1D5DB;

    font-size:18px;

    line-height:2;

    margin-bottom:35px;

}

.footer-content small{

    display:block;

    padding-top:25px;

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

    color:#9CA3AF;

}


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

@media(max-width:1200px){

.hero-content{

padding:60px;

}

.hero-content h1{

font-size:58px;

}

.logo{

width:250px;

}

.features-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:991px){

.container{

grid-template-columns:1fr;

}

.hero-image{

order:-1;

height:420px;

}

.hero-image img{

height:420px;

}

.hero-content{

padding:50px 25px;

text-align:center;

align-items:center;

}

.stats{

flex-direction:column;

width:100%;

}

.buttons{

flex-direction:column;

width:100%;

}

.btn{

width:100%;

text-align:center;

}

.features-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:260px;

}

.details-box{

grid-template-columns:1fr;

}

.details-box>div{

border-left:none;

border-bottom:1px solid #ECECEC;

}

.contact-grid{

grid-template-columns:1fr;

}

.location-grid{

grid-template-columns:1fr;

}

.footer-logo{

width:170px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:42px;

}

.hero-content p{

font-size:18px;

}

.badge{

font-size:14px;

}

.card h2{

font-size:30px;

}

.section-title h2{

font-size:34px;

}

}