/* ===========================================================
   BAECN Website Theme
   Version : 2.0
   Author  : BAECN
   =========================================================== */

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

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

/* ===========================
   Root Variables
=========================== */

:root {

    /* -------------------------------------------------
       Brand Colors
    ------------------------------------------------- */

    --primary: #15B9D9;
    --primary-dark: #0E8EAA;
    --primary-light: #DDF8FC;

    /* -------------------------------------------------
       Background
    ------------------------------------------------- */

    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --muted-bg: #F9FAFB;

    /* -------------------------------------------------
       Text
    ------------------------------------------------- */

    --text: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;

    /* -------------------------------------------------
       Border
    ------------------------------------------------- */

    --border: #E5E7EB;
    --border-light: #F3F4F6;

    /* -------------------------------------------------
       Status
    ------------------------------------------------- */

    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;
    --info: #2563EB;

    /* -------------------------------------------------
       Border Radius
    ------------------------------------------------- */

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* -------------------------------------------------
       Shadows
    ------------------------------------------------- */

    --shadow-sm: 0 5px 15px rgba(0, 0, 0, .05);

    --shadow: 0 10px 30px rgba(0, 0, 0, .06);

    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .08);

    /* -------------------------------------------------
       Transition
    ------------------------------------------------- */

    --transition: .30s ease;

    /* -------------------------------------------------
       Layout
    ------------------------------------------------- */

    --section-padding: 100px;

    --container-width: 1320px;

    /* -------------------------------------------------
       Bootstrap Overrides
    ------------------------------------------------- */

    --bs-primary: var(--primary);
    --bs-primary-rgb: 21,185,217;

    --bs-border-radius: 12px;
    --bs-border-radius-lg: 20px;
    --bs-border-radius-xl: 28px;

}

/* ===========================
   Global
=========================== */

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:16px;
    line-height:1.7;

    overflow-x:hidden;

    min-height:100vh;

    display:flex;
    flex-direction:column;

      background:
        radial-gradient(
            circle at top left,
            rgba(21,185,217,.12),
            transparent 40%
        ),

        radial-gradient(
            circle at top right,
            rgba(21,185,217,.08),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #F4FBFE 0%,
            #F8FCFE 40%,
            #FCFEFF 100%
        );

}



img{

    max-width:100%;

    display:block;

    height:auto;

}

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

a:hover{

    color:var(--primary);

}

ul{

    list-style:none;

    margin:0;

    padding:0;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text);

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

h1{

    font-size:56px;

}

h2{

    font-size:42px;

}

h3{

    font-size:30px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

h6{

    font-size:18px;

}

p{

    color:var(--text-secondary);

    margin-bottom:20px;

}

small{

    color:var(--text-muted);

}

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

section{

    padding:var(--section-padding) 0;

}

/* ===========================
   Reusable Section Title
=========================== */

.section-title{

    max-width:720px;

    margin:0 auto 60px;

    text-align:center;

}

.section-title h2{

    margin-bottom:16px;

}

.section-title p{

    margin-bottom:0;

}

/* ===========================
   Content Width
=========================== */

.content-width{

    max-width:720px;

}

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

.btn{

    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:var(--transition);

    border:none;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

}

.btn-outline-primary{

    background:#fff;

    color:var(--primary);

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

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}

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

.theme-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.theme-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

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

.theme-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--primary-light);

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

}

/* ===========================
   Utilities
=========================== */

.bg-app{

    background:var(--bg);

}

.bg-surface{

    background:var(--surface);

}

.bg-primary-light{

    background:var(--primary-light);

}

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--text-secondary)!important;

}

.text-muted{

    color:var(--text-muted)!important;

}

.rounded-xl{

    border-radius:var(--radius-xl);

}

.shadow-theme{

    box-shadow:var(--shadow);

}

.shadow-lg-theme{

    box-shadow:var(--shadow-lg);

}

.transition{

    transition:var(--transition);

}

.fw-500{

    font-weight:500;

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

/* ===========================
   Accessibility
=========================== */

button:focus,
.btn:focus,
a:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(21,185,217,.18);

}

/* ===========================
   Selection
=========================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#F1F5F9;

}