/* =========================
   HERO SECTION
========================= */

.hero-section{

position:relative;

overflow:hidden;

padding:100px 0;

background:
linear-gradient(
135deg,
#eff6ff,
#ffffff
);

}

.min-vh-75{
min-height:75vh;
}

/* Background Shapes */

.hero-bg-shape{

position:absolute;

border-radius:50%;

filter:blur(100px);

opacity:.25;

}

.shape-1{

width:350px;
height:350px;

background:#2563eb;

top:-100px;
left:-100px;

}

.shape-2{

width:250px;
height:250px;

background:#60a5fa;

right:-50px;
top:100px;

}

.shape-3{

width:300px;
height:300px;

background:#3b82f6;

bottom:-100px;
left:50%;

}

/* Badge */

.hero-badge{

display:inline-block;

padding:10px 18px;

background:#dbeafe;

color:#1d4ed8;

font-weight:600;

border-radius:50px;

margin-bottom:20px;

font-size:14px;

}

/* Title */

.hero-title{

font-size:3.5rem;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

color:#0f172a;

}

.hero-title span{

color:#2563eb;

}

/* Description */

.hero-description{

font-size:18px;

line-height:1.8;

color:#64748b;

margin-bottom:35px;

}

/* Buttons */

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:40px;

}

.hero-btn-primary{

background:#2563eb;

color:#fff;

padding:15px 28px;

border-radius:14px;

font-weight:700;

}

.hero-btn-primary:hover{

background:#1d4ed8;

color:#fff;

}

.hero-btn-outline{

border:2px solid #2563eb;

color:#2563eb;

padding:15px 28px;

border-radius:14px;

font-weight:700;

}

.hero-btn-outline:hover{

background:#2563eb;

color:#fff;

}

/* Stats */

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.hero-stat{

background:#fff;

padding:18px 25px;

border-radius:18px;

box-shadow:
0 10px 25px rgba(0,0,0,.05);

}

.hero-stat h3{

font-weight:800;

color:#2563eb;

margin-bottom:5px;

}

.hero-stat p{

margin:0;

color:#64748b;

font-size:14px;

}

/* Image */

.hero-image-wrapper{

position:relative;

text-align:center;

}

.hero-image{

max-width:100%;

animation:
float 4s ease-in-out infinite;

}

/* Floating Cards */

.hero-card{

position:absolute;

background:#fff;

padding:15px 20px;

border-radius:16px;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

font-weight:600;

display:flex;

gap:10px;

align-items:center;

}

.hero-card i{

color:#2563eb;

font-size:20px;

}

.card-1{

top:80px;
left:20px;

}

.card-2{

bottom:80px;
right:20px;

}

/* Animation */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}

/* Responsive */

@media(max-width:991px){

.hero-section{

padding:70px 0;

text-align:center;

}

.hero-title{

font-size:2.4rem;

}

.hero-stats{

justify-content:center;

}

.hero-image-wrapper{

margin-top:50px;

}

.hero-card{

display:none;

}

}

@media(max-width:576px){

.hero-title{

font-size:2rem;

}

.hero-description{

font-size:16px;

}

.hero-buttons{

justify-content:center;

}

.hero-stat{

width:45%;

}

}