/* ============================= */
/* GLOBAL MOBILE FIX */
/* ============================= */

html, body{

width:100%;
overflow-x:hidden;

}


/* ============================= */
/* HERO MOBILE FIX */
/* ============================= */

.hero{

position:relative;

height:70vh; /* بدل 100vh */

min-height:500px;

}

.hero img{

width:100%;
height:100%;

object-fit:cover;

}

.hero-content{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%, -50%);

width:90%;

text-align:center;

padding:0 10px;

}

.hero h1{

font-size:25px;

letter-spacing:8px;

}

.hero p{

font-size:15px;

}


/* ============================= */
/* ZIGZAG MOBILE FIX */
/* ============================= */

.zigzag{

display:grid;

grid-template-columns:1fr;

gap:25px;

margin:60px auto;

padding:0 18px;

}

.zigzag.reverse{

direction:rtl;

}

.zigzag img{

width:100%;
height:auto;

display:block;

border-radius:8px;

}


/* ============================= */
/* TEXT MOBILE */
/* ============================= */

.text{

text-align:center;

}

.text h2{

font-size:22px;

}

.text p{

font-size:15px;

}


/* ============================= */
/* CTA MOBILE */
/* ============================= */

.cta{

padding:80px 20px;

}

.cta h2{

font-size:22px;

}

.cta a{

padding:12px 26px;

font-size:14px;

}


/* ============================= */
/* DESKTOP */
/* ============================= */

@media(min-width:768px){

.hero{

height:100vh;

}

.hero h1{

font-size:52px;

}

.zigzag{

grid-template-columns:1fr 1fr;

gap:80px;

margin:140px auto;

}

.text{

text-align:right;

}

}