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

.hero-section{

    padding:35px 0 25px;

    text-align:center;

    animation:heroFade .7s ease;

}

.hero-title{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#0F172A;

    margin-bottom:18px;

    letter-spacing:-1px;

}

.hero-description{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#64748B;

}

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin:35px 0 50px;

}

.hero-buttons .btn{

transition:.25s ease;

box-shadow:0 6px 18px rgba(37,99,235,.08);

}

.hero-buttons .btn:hover{

transform:translateY(-4px);

box-shadow:0 16px 34px rgba(37,99,235,.18);

}
.welcome-box{

display:inline-flex;

align-items:center;

gap:12px;

margin-top:28px;

padding:16px 24px;

background:#FFFFFF;

border:1px solid #E2E8F0;

border-radius:16px;

box-shadow:0 8px 22px rgba(15,23,42,.05);

transition:.25s;

}

.welcome-box:hover{

transform:translateY(-2px);

}

/* ==================================================
                    FEATURE SECTION
================================================== */

.features-section{

    margin-top:45px;

}

.feature-card{

    height:100%;

    border:none;

    border-radius:18px;

    background:#FFFFFF;

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

    transition:.3s;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 22px 48px rgba(37,99,235,.12);

}

.feature-card .card-body{

    padding:32px 24px;

    text-align:center;

}

.feature-icon{

width:74px;

height:74px;

margin:auto;

margin-bottom:22px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:#EFF6FF;

color:#2563EB;

font-size:30px;

transition:.3s;

}

.feature-card:hover .feature-icon{

transform:rotate(-8deg) scale(1.08);

}

.feature-card h5{

    font-size:19px;

    font-weight:700;

    margin-bottom:10px;

    color:#0F172A;

}

.feature-card p{

    font-size:15px;

    line-height:1.7;

    color:#64748B;

}

/* ==================================================
                    STATUS BADGES
================================================== */

.badge{

    padding:7px 16px;

    font-size:12px;

    border-radius:20px;

    font-weight:700;

    letter-spacing:.3px;

}

/* ==================================================
                    ACTION BUTTONS
================================================== */

.hero-buttons .btn-primary{

    background:#2563EB;

    border:none;

}

.hero-buttons .btn-primary:hover{

    background:#1D4ED8;

}

.hero-buttons .btn-success{

    background:#16A34A;

    border:none;

}

.hero-buttons .btn-success:hover{

    background:#15803D;

}

/* ==================================================
                    WORKFLOW
================================================== */

.workflow-card{

    margin-top:55px;

    border:none;

    background:#FFFFFF;

    border-radius:20px;

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

    padding:20px;

}

.workflow-step{

    padding:25px;

    text-align:center;

}

.workflow-icon{

width:82px;

height:82px;

margin:auto;

margin-bottom:20px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:#EFF6FF;

color:#2563EB;

font-size:32px;

transition:.3s;

}

.workflow-step:hover .workflow-icon{

transform:scale(1.08);

}
.workflow-step h5{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    color:#0F172A;

}

.workflow-step p{

    font-size:15px;

    line-height:1.7;

    color:#64748B;

}

/* ==================================================
                    SECTION TITLE
================================================== */

.section-title h2{

font-size:38px;

font-weight:800;

letter-spacing:-1px;

color:#0F172A;

}

.section-title h2{

    font-size:34px;

    font-weight:800;

    color:#0F172A;

}

.section-title p{

    max-width:700px;

    margin:auto;

    margin-top:12px;

    color:#64748B;

}

/* ==================================================
                    ANIMATIONS
================================================== */

.feature-card,

.workflow-card{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .hero-title{

        font-size:40px;

    }

}

@media(max-width:768px){

    .hero-section{

        padding:30px 0;

    }

    .hero-title{

        font-size:34px;

    }

    .hero-description{

        font-size:15px;

    }

    .hero-buttons .btn{

        width:100%;

        margin:8px 0;

    }

    .workflow-step{

        margin-bottom:25px;

    }

}

@media(max-width:576px){

    .hero-title{

        font-size:28px;

    }

    .feature-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .workflow-icon{

        width:65px;

        height:65px;

        font-size:24px;

    }

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

.feature-icon{

animation:floating 4s ease-in-out infinite;

}