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

.ri-hero{
    position:relative;
    overflow:hidden;
    padding:70px 0;
    background:#F8FAFC;
}

.ri-hero::before{
    content:'';
    position:absolute;
    top:-250px;
    right:-220px;
    width:650px;
    height:650px;
    border-radius:50%;
    background:rgba(36,52,110,.05);
    z-index:0;
}

.ri-hero::after{
    content:'';
    position:absolute;
    bottom:-180px;
    left:-180px;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(236,107,47,.05);
    z-index:0;
}

/*-----------------------------------
Container
-----------------------------------*/

.ri-hero .ri-container{
    position:relative;
    z-index:2;
}

/*-----------------------------------
Wrapper
-----------------------------------*/

.ri-hero-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:80px;

}

/*-----------------------------------
Left
-----------------------------------*/

.ri-hero-content{

    width:52%;

}

/*-----------------------------------
Right
-----------------------------------*/

.ri-hero-visual{

    width:48%;

    position:relative;

    min-height:700px;

}

/*-----------------------------------
Hero Image
-----------------------------------*/

.ri-hero-image{

    position:relative;

    z-index:5;

    text-align:center;

}

.ri-hero-image img{

    width:100%;

    max-width:560px;

    display:block;

    margin:auto;

}

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

.ri-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 18px;

    margin-bottom:28px;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:50px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);

}

.ri-badge-icon{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#24346E;

    color:#FFF;

    border-radius:50%;

    font-size:16px;

}

.ri-badge-text{

    font-size:15px;

    font-weight:700;

    color:#24346E;

}

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

.ri-hero-title{

    margin:0;

    font-size:68px;

    line-height:1.08;

    font-weight:800;

    color:#111827;

    letter-spacing:-2px;

}

.ri-hero-title span{

    color:#24346E;

}

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

.ri-hero-description{

    max-width:620px;

    margin:30px 0;

    font-size:19px;

    line-height:1.8;

    color:#6B7280;

}

/*==================================================
Feature List
==================================================*/

.ri-hero-features{

    display:grid;

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

    gap:16px 24px;

    margin-bottom:40px;

}

.ri-feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

    font-weight:600;

    color:#374151;

}

.ri-feature-icon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EC6B2F;

    color:#FFF;

    font-size:14px;

    flex-shrink:0;

}

/*==================================================
Buttons
==================================================*/

.ri-hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

}

.ri-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;

}

.ri-btn-primary{

    background:#24346E;

    color:#FFF;

    box-shadow:0 15px 35px rgba(36,52,110,.25);

}

.ri-btn-primary:hover{

    transform:translateY(-4px);

}

.ri-btn-outline{

    background:#FFF;

    color:#24346E;

    border:1px solid #D1D5DB;

}

.ri-btn-outline:hover{

    background:#24346E;

    color:#FFF;

}

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

.ri-hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

/*==================================================
Background Circles
==================================================*/

.ri-hero-bg-circle{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background:linear-gradient(135deg,#24346E,#4F46E5);
    opacity:.06;
    z-index:1;
}

.ri-circle-2{
    width:360px;
    height:360px;
    background:#EC6B2F;
    opacity:.08;
    top:120px;
    left:40px;
}

.ri-hero-dot{
    position:absolute;
    border-radius:50%;
    z-index:2;
}

.ri-dot-blue{
    width:18px;
    height:18px;
    background:#24346E;
    top:80px;
    right:90px;
}

.ri-dot-orange{
    width:12px;
    height:12px;
    background:#EC6B2F;
    bottom:120px;
    left:60px;
}

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

.ri-hero-image{
    position:relative;
    z-index:5;
}

.ri-hero-image img{

    width:100%;

    max-width:560px;

    border-radius:30px;

    display:block;

    box-shadow:
        0 35px 80px rgba(0,0,0,.12);

}

/*==================================================
Floating Cards
==================================================*/

.ri-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 22px;

    background:#FFFFFF;

    border-radius:18px;

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);

    z-index:10;

    transition:.35s ease;

}

.ri-floating-card:hover{

    transform:translateY(-8px);

}

.ri-card-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#F4F7FD;

    font-size:24px;

}

.ri-card-content{

    display:flex;

    flex-direction:column;

}

.ri-card-content strong{

    font-size:22px;

    color:#111827;

    font-weight:800;

}

.ri-card-content span{

    font-size:14px;

    color:#6B7280;

}

/*==================================================
Card Positions
==================================================*/

.ri-card-members{

    top:40px;

    left:-40px;

}

.ri-card-discussions{

    top:180px;

    right:-50px;

}

.ri-card-meetups{

    bottom:170px;

    left:-60px;

}

.ri-card-writers{

    bottom:40px;

    right:20px;

}

.ri-card-clubs{

    top:320px;

    left:10px;

}

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

.ri-hero-trust{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:20px;

}

.ri-member-images{

    display:flex;

    align-items:center;

}

.ri-member-images img{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #FFFFFF;

    margin-left:-14px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.ri-member-images img:first-child{

    margin-left:0;

}

.ri-trust-content{

    display:flex;

    flex-direction:column;

}

.ri-stars{

    font-size:18px;

    color:#F59E0B;

    letter-spacing:2px;

    margin-bottom:4px;

}

.ri-trust-content p{

    margin:0;

    font-size:15px;

    color:#6B7280;

    font-weight:500;

}

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

.ri-hero-stats{

    margin-top:90px;

    display:grid;

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

    gap:30px;

}

.ri-stat-card{

    background:#FFFFFF;

    border-radius:24px;

    padding:34px;

    text-align:center;

    border:1px solid #EEF2F7;

    box-shadow:0 20px 45px rgba(15,23,42,.06);

    transition:.35s ease;

}

.ri-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(15,23,42,.10);

}

.ri-stat-card h3{

    margin:0 0 12px;

    font-size:42px;

    font-weight:800;

    color:#24346E;

    line-height:1;

}

.ri-stat-card p{

    margin:0;

    font-size:16px;

    color:#6B7280;

    font-weight:600;

}

/*==================================================
Small Animation
==================================================*/

@keyframes riFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.ri-card-members{

    animation:riFloat 5s ease-in-out infinite;

}

.ri-card-discussions{

    animation:riFloat 6s ease-in-out infinite;

}

.ri-card-meetups{

    animation:riFloat 7s ease-in-out infinite;

}

.ri-card-writers{

    animation:riFloat 6.5s ease-in-out infinite;

}

.ri-card-clubs{

    animation:riFloat 5.5s ease-in-out infinite;

}