/*==================================================
SB MAILER
Style Sheet
Version : 1.0
Author  : ChatGPT
===================================================*/

/*=========================
Google Font
==========================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*=========================
CSS Variables
==========================*/

:root {

    --primary: #0A5CC4;
    --primary-dark: #0D2E66;
    --secondary: #63C132;

    --white: #ffffff;
    --black: #111827;

    --text: #64748B;
    --heading: #0F172A;

    --bg: #F7FAFF;

    --border: #E5E7EB;

    --success: #22C55E;
    --danger: #EF4444;

    --radius: 18px;

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

    --transition: .35s ease;

}

/*=========================
Reset
==========================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: var(--bg);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

}

img {

    max-width: 100%;

    display: block;

}

a {

    text-decoration: none;

    transition: var(--transition);

}

ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

section {

    position: relative;

    padding: 100px 0;

}

/*=========================
Typography
==========================*/

h1,
h2,
h3,
h4,
h5 {

    color: var(--heading);

    font-weight: 800;

    line-height: 1.2;

}

h1 {

    font-size: 58px;

}

h2 {

    font-size: 46px;

}

h3 {

    font-size: 34px;

}

h4 {

    font-size: 22px;

}

p {

    color: var(--text);

}

/*=========================
Common
==========================*/

.section-title span {

    color: var(--primary);

    text-transform: uppercase;

    font-weight: 700;

    letter-spacing: 1px;

    display: inline-block;

    margin-bottom: 15px;

}

.section-title h2 span {

    color: var(--primary);

}

.container {

    position: relative;

    z-index: 2;

}

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

.btn {

    border-radius: 50px;

    padding: 14px 30px;

    font-weight: 600;

    transition: var(--transition);

}

.btn-primary {

    background: linear-gradient(135deg,
            var(--primary),
            var(--secondary));

    border: none;

}

.btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:

        0 15px 35px rgba(10, 92, 196, .35);

}

.btn-outline-primary {

    border: 2px solid var(--primary);

    color: var(--primary);

}

.btn-outline-primary:hover {

    background: var(--primary);

    color: #fff;

}

/*=========================
Preloader
==========================*/

#preloader {

    position: fixed;

    inset: 0;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}

.loader {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: 6px solid #ddd;

    border-top: 6px solid var(--primary);

    animation: spin 1s linear infinite;

}

@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}

/*=========================
Navbar
==========================*/

.header-area {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 999;

    transition: .4s;

}

.header-area.sticky {

    background: #fff;

    backdrop-filter: blur(18px);

    box-shadow: var(--shadow);

}

.navbar {

    padding: 20px 0;

}

.navbar-brand img {

    height: 56px;

}

.nav-link {

    color: var(--heading);

    font-weight: 600;

    margin: 0 12px;

}

.nav-link:hover {

    color: var(--primary);

}

.nav-link.active {

    color: var(--primary);

}

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

.hero-section {

    padding-top: 170px;

    overflow: hidden;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #EAF4FF;

    color: var(--primary);

    padding: 10px 18px;

    border-radius: 50px;

    font-weight: 600;

}

.hero-title {

    margin-top: 30px;

    margin-bottom: 25px;

}

.hero-title span {

    color: var(--primary);

}

.hero-description {

    font-size: 18px;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.hero-list {

    display: grid;

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

    gap: 18px;

    margin-top: 45px;

}

.hero-list div {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;

}

.hero-list i {

    color: var(--secondary);

}

.dashboard-wrapper {

    position: relative;

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

}

.dashboard-wrapper img {

    border-radius: 24px;

    box-shadow:

        0 30px 60px rgba(0, 0, 0, .12);

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-18px);

    }

    100% {

        transform: translateY(0);

    }

}

/* Decorative Background */

.hero-section::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    background:

        radial-gradient(circle,
            rgba(10, 92, 196, .15),
            transparent);

    top: -180px;

    right: -120px;

    border-radius: 50%;

}

.hero-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    background:

        radial-gradient(circle,
            rgba(99, 193, 50, .18),
            transparent);

    left: -120px;

    bottom: -100px;

    border-radius: 50%;

}

/*==================================================
STATS SECTION
==================================================*/

.stats-section{
    position: relative;
    padding: 80px 0;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.stat-box{
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: .35s ease;
    border: 1px solid rgba(10,92,196,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stat-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

.stat-box:hover{

    transform:translateY(-10px);

    box-shadow:
        0 20px 45px rgba(10,92,196,.12);

}

.stat-box i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:20px;

}

.stat-box h2{

    font-size:42px;

    margin-bottom:10px;

    font-weight:800;

}

.stat-box p{

    margin:0;

    font-weight:500;

    color:#6B7280;

}

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

.features-section{

    position:relative;

    background:#fff;

}

.features-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(10,92,196,.08),
            transparent
        );

    top:50px;

    right:-120px;

}

.features-section::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(99,193,50,.08),
            transparent
        );

    left:-100px;

    bottom:30px;

}

.feature-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:left;

    transition:.35s ease;

    border:1px solid #EDF2F7;

    position:relative;

    overflow:hidden;

    height:100%;

    box-shadow:
        0 10px 35px rgba(0,0,0,.04);

}

.feature-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:
        rgba(10,92,196,.05);

    top:-90px;

    right:-90px;

}

.feature-card:hover{

    transform:translateY(-12px);

    border-color:rgba(10,92,196,.2);

    box-shadow:

        0 20px 50px rgba(10,92,196,.12);

}

.feature-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#fff;

    font-size:30px;

    margin-bottom:25px;

    transition:.35s;

}

.feature-card:hover .feature-icon{

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

}

.feature-card h4{

    margin-bottom:15px;

    font-weight:700;

}

.feature-card p{

    margin:0;

    color:#64748B;

}

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

.workflow-section{

    background:#F7FAFF;

    position:relative;

}

.workflow-image{

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

}

.workflow-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.workflow-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    background:#fff;

    padding:22px;

    border-radius:18px;

    border:1px solid #EDF2F7;

    transition:.35s ease;

    box-shadow:

        0 10px 25px rgba(0,0,0,.04);

}

.workflow-item:hover{

    transform:translateX(10px);

    border-color:rgba(10,92,196,.25);

    box-shadow:

        0 18px 40px rgba(10,92,196,.10);

}

.workflow-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#fff;

    font-size:24px;

}

.workflow-item h5{

    margin-bottom:8px;

    font-weight:700;

}

.workflow-item p{

    margin:0;

    color:#64748B;

}

/*==================================================
SECTION SUBTITLE
==================================================*/

.section-subtitle{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#EAF4FF;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:20px;

}

/*==================================================
COMMON HOVER EFFECT
==================================================*/

.feature-card,
.stat-box,
.workflow-item{

    will-change:transform;

}

/*==================================================
ANALYTICS SECTION
==================================================*/

.analytics-section{
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

.analytics-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(10,92,196,.08),
            transparent
        );

    left:-180px;

    top:-120px;

}

.analytics-image{

    border-radius:24px;

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

    transition:.4s;

}

.analytics-image:hover{

    transform:translateY(-8px);

}

.analytics-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    border:1px solid #EDF2F7;

    transition:.35s;

    height:100%;

    box-shadow:
        0 12px 30px rgba(0,0,0,.05);

}

.analytics-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(10,92,196,.12);

}

.analytics-card i{

    font-size:36px;

    color:var(--primary);

    margin-bottom:18px;

}

.analytics-card h4{

    font-size:32px;

    margin-bottom:8px;

}

.analytics-card p{

    margin:0;

    color:#64748B;

}

/*==================================================
WHY CHOOSE
==================================================*/

.why-section{

    background:#F7FAFF;

}

.why-card{

    background:#fff;

    padding:40px;

    border-radius:24px;

    text-align:center;

    border:1px solid #EDF2F7;

    transition:.35s;

    height:100%;

    box-shadow:
        0 12px 30px rgba(0,0,0,.05);

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 22px 50px rgba(10,92,196,.12);

}

.why-card i{

    font-size:52px;

    color:var(--primary);

    margin-bottom:25px;

}

.why-card h4{

    margin-bottom:15px;

}

/*==================================================
ABOUT SECTION
==================================================*/

.about-section{

    background:#ffffff;

}

.about-section img{

    border-radius:25px;

    transition:.4s;

}

.about-section img:hover{

    transform:scale(1.02);

}

.about-section h2{

    margin:20px 0;

}

.about-section h2 span{

    color:var(--primary);

}

.about-section p{

    margin-bottom:18px;

}

/*==================================================
CTA
==================================================*/

.cta-section{

    padding:100px 0;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

}

.cta-box{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:60px;

    color:#fff;

}

.cta-box h2{

    color:#fff;

    margin-bottom:18px;

}

.cta-box p{

    color:rgba(255,255,255,.85);

}

.cta-box .btn{

    padding:16px 36px;

    font-weight:700;

}

/*==================================================
FOOTER
==================================================*/

.footer-area{

    background:#0F172A;

    color:#CBD5E1;

    padding:80px 0 30px;

}

.footer-logo{

    height:58px;

    margin-bottom:20px;

}

.footer-area h5{

    color:#fff;

    margin-bottom:25px;

}

.footer-area p{

    color:#94A3B8;

}

.footer-area ul{

    padding:0;

    margin:0;

}

.footer-area li{

    margin-bottom:12px;

}

.footer-area a{

    color:#CBD5E1;

    transition:.3s;

}

.footer-area a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-area hr{

    border-color:rgba(255,255,255,.08);

    margin:45px 0 25px;

}

/*==================================================
SCROLL TOP
==================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:20px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 18px 35px rgba(10,92,196,.30);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

}

.scroll-top.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top:hover{

    transform:translateY(-6px);

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

    border-radius:50px;

}