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

@media(max-width:1200px){

.hero-left h1{

font-size:56px;

}

.hero-image{

max-width:520px;

}

.floating-card{

min-width:190px;

}

}

@media(max-width:992px){

.hero-wrapper{

flex-direction:column;

text-align:center;

gap:70px;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-left p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.floating-card{

transform:scale(.9);

}

.card-live{

left:20px;
top:20px;

}

.card-ai{

right:20px;
top:90px;

}

.card-certificate{

left:20px;
bottom:80px;

}

.card-placement{

right:20px;
bottom:20px;

}

}

@media(max-width:768px){

.hero-section{

padding:60px 0 120px;

}

.hero-left h1{

font-size:42px;

}

.hero-left p{

font-size:16px;

line-height:30px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.hero-image{

max-width:380px;

}

.floating-card{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin:15px auto;

width:90%;

}

.hero-right{

display:flex;

flex-direction:column;

}

}

@media(max-width:576px){

.hero-left h1{

font-size:34px;

}

.hero-badge{

font-size:12px;

padding:8px 15px;

}

.stat-box{

width:46%;

padding:18px;

}

.hero-image{

max-width:300px;

}

}