/* ==========================================
   HERO SECTION
========================================== */

.hero-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#ffffff 0%,#eef7ff 55%,#d9ecff 100%);

    padding:90px 0;

    min-height:100vh;

}


/* Background Circles */

.hero-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#0d6efd15;

    border-radius:50%;

    top:-120px;

    right:-120px;

}


.hero-section::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:#0d6efd10;

    border-radius:50%;

    bottom:-90px;

    left:-90px;

}


/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#ffffff;

    color:#0d6efd;

    border-radius:40px;

    padding:10px 22px;

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}


.hero-badge i{

    font-size:18px;

}


/* Title */

.hero-title{

    font-size:58px;

    font-weight:800;

    color:#002b5b;

    line-height:1.15;

    margin-top:25px;

}


.hero-subtitle{

    color:#0d6efd;

    font-size:28px;

    font-weight:600;

    margin-top:15px;

}


/* Description */

.hero-description{

    margin-top:25px;

    font-size:17px;

    line-height:1.9;

    color:#555;

}


.hero-description ul{

    padding-left:20px;

}

.hero-description li{

    margin-bottom:10px;

}


/* Buttons */

.hero-buttons{

    margin-top:35px;

}

.hero-buttons .btn{

    border-radius:50px;

    padding:15px 35px;

    font-weight:600;

}

.hero-image{
    width:100%;
    max-width:480px;
    border-radius:30px;
    object-fit:cover;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}
.hero-image-wrapper{
    position:relative;
    display:inline-block;
}

.hero-image{
    max-width:500px;
    width:100%;
    border-radius:30px;
    border:8px solid #fff;
    box-shadow:0 30px 70px rgba(13,110,253,.20);
    object-fit:cover;
    position:relative;
    z-index:2;
}

.hero-image-wrapper::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:linear-gradient(135deg,#0d6efd,#4da3ff);
    border-radius:50%;
    top:40px;
    right:-40px;
    opacity:.12;
    z-index:1;
}

.hero-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:30px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:500;

    color:#333;

}

.hero-features i{

    color:#0d6efd;

    font-size:18px;

}

.experience-card{
    position:absolute;
    bottom:25px;
    left:-25px;
    background:#fff;
    padding:18px 25px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    z-index:3;
}

.experience-card h2{
    margin:0;
    color:#0d6efd;
    font-size:32px;
    font-weight:700;
}

.experience-card span{
    color:#555;
    font-size:14px;
}

.hero-buttons .btn-primary{
    background:#0d6efd;
    border:none;
    padding:14px 32px;
    border-radius:50px;
}

.hero-buttons .btn-primary:hover{
    transform:translateY(-3px);
}

.hero-buttons .btn-outline-primary{
    border-radius:50px;
    padding:14px 32px;
}

.hero-description ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.hero-description li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    font-weight: 500;
}

.hero-description li::before {
    content: "\F26E"; /* Bootstrap Icons check-circle-fill */
    font-family: "bootstrap-icons";
    color: #0d6efd;
    position: absolute;
    left: 0;
}