/* =====================
 Hero
===================== */


.skymabiz-hero{


min-height:

850px;


display:flex;


align-items:center;


position:relative;


overflow:hidden;



background:


radial-gradient(

circle at 80% 50%,

rgba(0,183,255,.25),

transparent 40%

),


var(--bg-main);



}





.hero-overlay{


position:absolute;


inset:0;


background:


linear-gradient(

90deg,

rgba(2,8,23,.9),

rgba(2,8,23,.3)

);


}




.hero-container{


display:flex;


align-items:center;


justify-content:space-between;


gap:40px;


position:relative;


z-index:2;


}




.hero-content{


width:50%;


}



.hero-logo img{


width:230px;


margin-bottom:25px;


}



.hero-content h1{


font-size:

52px;


color:white;


margin-bottom:25px;


line-height:1.5;


}




.hero-content p{


font-size:

18px;


max-width:500px;


margin-bottom:35px;


}



.hero-buttons{


display:flex;


gap:20px;


}



.btn-outline{


background:transparent;


border:

1px solid var(--sky-secondary);


}




.hero-image{


width:45%;


position:relative;


}



.hero-image img{


position:relative;


z-index:2;


animation:

floatDevice 5s infinite ease-in-out;


}




.glow{


position:absolute;


width:450px;


height:450px;


background:

var(--sky-secondary);


filter:

blur(120px);


opacity:.35;


}



@keyframes floatDevice{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}


}
4) Responsive Hero
به انتهای hero.css اضافه شود:
@media(max-width:992px){


.skymabiz-hero{


min-height:auto;


padding:

150px 0 80px;


}



.hero-container{


flex-direction:column;


text-align:center;


}



.hero-content,
.hero-image{


width:100%;


}



.hero-content h1{


font-size:38px;


}



.hero-buttons{


justify-content:center;


}


}



@media(max-width:600px){


.hero-content h1{


font-size:30px;


}



.hero-logo img{


margin:auto;


width:170px;


}



.hero-buttons{


flex-direction:column;


}


}