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

.hero-section{
    position:relative;
    padding:160px 0 110px;
    background:linear-gradient(135deg,#F7FBFF 0%,#EEF6FF 100%);
    overflow:hidden;
}

.hero-section::before{
    content:"";
    position:absolute;
    top:-250px;
    right:-180px;
    width:650px;
    height:650px;
    background:rgba(15,76,129,.05);
    border-radius:50%;
}

.hero-section::after{
    content:"";
    position:absolute;
    bottom:-220px;
    left:-180px;
    width:520px;
    height:520px;
    background:rgba(0,168,168,.05);
    border-radius:50%;
}

/*==============================
LEFT CONTENT
==============================*/

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 24px;
    border-radius:50px;
    background:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    font-weight:600;
    color:var(--primary);
    margin-bottom:25px;
}

.hero-badge i{
    color:#22c55e;
}

.hero-section h1{
    font-size:64px;
    font-weight:800;
    line-height:1.12;
    color:var(--dark);
    margin-bottom:25px;
}

.hero-section h1 span{
    color:var(--secondary);
}

.hero-section p{
    font-size:19px;
    line-height:1.9;
    max-width:620px;
    margin-bottom:35px;
    color:#555;
}

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

.hero-users{
    display:flex;
    align-items:center;
    gap:18px;
}

.avatars{
    display:flex;
}

.avatars img{
    width:52px;
    height:52px;
    border-radius:50%;
    border:3px solid #fff;
    margin-left:-12px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.hero-users strong{
    display:block;
    font-size:18px;
}

.hero-users span{
    font-size:14px;
    color:#666;
}

/*==============================
RIGHT IMAGE
==============================*/

.hero-image-wrapper{
    position:relative;
    max-width:820px;
    margin:0 auto;
    padding:10px;
}

.hero-image{
    width:100%;
    min-height:560px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:0 35px 80px rgba(0,0,0,.18);
    animation:heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

/*==============================
FLOATING CARDS
==============================*/

.floating-card{

position:absolute;
width:180px;
min-height:150px;
display:flex;
flex-direction:column;
justify-content:center;
padding:16px;
background:#fff;
border-radius:18px;
box-shadow:0 20px 45px rgba(0,0,0,.12);
transition:.35s;
z-index:10;

}

.floating-card:hover{

transform:translateY(-8px);

}

.floating-card i{

font-size:24px;
color:var(--primary);
margin-bottom:10px;

}

.floating-card h6{

font-size:18px;
font-weight:700;
margin-bottom:8px;
line-height:1.3;

}

.floating-card p{

font-size:13px;
line-height:1.6;
margin:0;

}

/*==============================
CARD POSITIONS
==============================*/

.card1{

top:25px;
right:40px;

}

.card2{

top:150px;
left:20px;

}

.card3{

bottom:35px;
left:40px;

}

.card4{

bottom:25px;
right:20px;

}

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

@media(max-width:1200px){

.hero-section h1{

font-size:54px;

}

.hero-image-wrapper{

max-width:720px;

}

.floating-card{

width:165px;

}

.card1{
    top:40px;
    right:10px;
}

.card2{
    top:220px;
    left:-35px;
}

.card3{
    bottom:150px;
    left:40px;
}

.card4{
    bottom:35px;
    right:15px;
}

}

@media(max-width:991px){

.hero-section{

padding:130px 0 80px;
text-align:center;

}

.hero-section h1{

font-size:42px;

}

.hero-section p{

margin-left:auto;
margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-users{

justify-content:center;
margin-bottom:40px;

}

.hero-image{

margin-top:30px;
min-height:auto;

}

.floating-card{

display:none;

}

}

@media(max-width:576px){

.hero-section{

padding:110px 0 70px;

}

.hero-section h1{

font-size:34px;

}

.hero-section p{

font-size:16px;

}

.hero-badge{

font-size:13px;
padding:10px 18px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary-custom,
.btn-outline-custom{

width:100%;
justify-content:center;

}

}