/* =========================================================
   GLOBAL.CSS
   Premium UI Framework 2026
   Author : Ardiaz Fahrezi
========================================================= */

/* =========================================================
   DESIGN TOKENS
========================================================= */

:root{

    /* =====================================================
       BRAND COLORS
    ===================================================== */

    --primary:#15803d;
    --primary-dark:#166534;
    --primary-light:#22c55e;
    --primary-soft:#dcfce7;

    --accent:#16a34a;
    --accent-light:#4ade80;

    --gold:#d4af37;
    --gold-light:#f7e29a;

    --danger:#dc2626;
    --warning:#f59e0b;
    --info:#2563eb;
    --success:#16a34a;

    /* =====================================================
       BACKGROUND
    ===================================================== */

    --bg-body:#ffffff;

    --bg-section:#f8fbf9;

    --bg-section-alt:#eef8f1;

    --bg-card:#ffffff;

    --bg-card-hover:#fcfefd;

    --bg-dark:#0f172a;

    /* =====================================================
       GLASS
    ===================================================== */

    --glass:
        rgba(255,255,255,.72);

    --glass-strong:
        rgba(255,255,255,.90);

    --glass-dark:
        rgba(15,23,42,.72);

    /* =====================================================
       TEXT
    ===================================================== */

    --text-main:#0f172a;

    --text-heading:#0b1324;

    --text-soft:#475569;

    --text-muted:#64748b;

    --text-light:#94a3b8;

    --text-white:#ffffff;

    /* =====================================================
       BORDER
    ===================================================== */

    --border:#e2e8f0;

    --border-soft:#edf2f7;

    --border-strong:#dbe5ec;

    --border-accent:
        rgba(21,128,61,.15);

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-xs:10px;

    --radius-sm:16px;

    --radius-md:22px;

    --radius-lg:30px;

    --radius-xl:42px;

    --radius-full:999px;

    /* =====================================================
       SHADOW
    ===================================================== */

    --shadow-xs:
        0 4px 10px rgba(15,23,42,.04);

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

    --shadow-md:
        0 18px 40px rgba(15,23,42,.08);

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

    --shadow-green:
        0 16px 34px rgba(21,128,61,.12);

    --shadow-gold:
        0 16px 34px rgba(212,175,55,.18);

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-main:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container:1320px;

    --container-wide:1440px;

    --container-sm:960px;

    --header-height:82px;

    /* =====================================================
       IMAGE
    ===================================================== */

    --image-radius:22px;

    /* =====================================================
       Z-INDEX
    ===================================================== */

    --z-dropdown:100;

    --z-sticky:500;

    --z-fixed:800;

    --z-modal:1000;

    --z-toast:1200;

    /* =====================================================
       TRANSITION
    ===================================================== */

    --transition-fast:.18s ease;

    --transition:
        .30s cubic-bezier(.4,0,.2,1);

    --transition-slow:
        .45s cubic-bezier(.4,0,.2,1);

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

/* =========================================================
   HTML
========================================================= */

html{

    font-size:16px;

    scroll-behavior:smooth;

    overflow-x:hidden;

    -webkit-text-size-adjust:100%;

    text-size-adjust:100%;

}

/* =========================================================
   BODY & FORM ELEMENTS
========================================================= */

body,
button,
input,
textarea,
select{

    font-family:var(--font-main);

}

/* =========================================================
   BODY
========================================================= */

body{

    position:relative;

    min-height:100vh;

    overflow-x:hidden;

    color:var(--text-main);

    background:

        radial-gradient(
            circle at top left,
            rgba(34,197,94,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at top right,
            rgba(212,175,55,.05),
            transparent 28%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(16,185,129,.06),
            transparent 34%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(21,128,61,.04),
            transparent 34%
        ),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefb 20%,
            #f7fcf8 48%,
            #f3faf5 75%,
            #ffffff 100%
        );

    background-attachment:fixed;

    font-weight:400;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

/* =========================================================
   BACKGROUND LIGHT EFFECT
========================================================= */

body::before{

    content:"";

    position:fixed;

    top:-260px;
    left:-220px;

    width:560px;
    height:560px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(34,197,94,.14),

            transparent 72%

        );

    filter:blur(90px);

    pointer-events:none;

    z-index:-10;

}

body::after{

    content:"";

    position:fixed;

    right:-220px;
    bottom:-240px;

    width:560px;
    height:560px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.10),

            transparent 72%

        );

    filter:blur(100px);

    pointer-events:none;

    z-index:-10;

}

/* =========================================================
   COMMON ELEMENTS
========================================================= */

main,
section,
article,
aside,
footer{

    position:relative;

}

picture{

    display:block;

}

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}

/*
JANGAN menggunakan object-fit secara global.

Gunakan class berikut bila diperlukan.

.img-cover{
    object-fit:cover;
}

.img-contain{
    object-fit:contain;
}

.img-rounded{
    border-radius:var(--image-radius);
}

*/

svg,
canvas,
video{

    display:block;

}

video{

    width:100%;

    height:auto;

}

iframe{

    width:100%;

    border:none;

}

embed,
object{

    max-width:100%;

}

/* =========================================================
   HORIZONTAL RULE
========================================================= */

hr{

    border:none;

    height:1px;

    background:var(--border);

}

/* =========================================================
   FOCUS
========================================================= */

:focus-visible{

    outline:3px solid rgba(34,197,94,.35);

    outline-offset:3px;

}

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

::selection{

    background:var(--primary-light);

    color:#ffffff;

}

::-moz-selection{

    background:var(--primary-light);

    color:#ffffff;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

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

    margin:0;

    color:var(--text-heading);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-.03em;

}

h1{

    font-size:clamp(42px,6vw,72px);

    margin-bottom:24px;

}

h2{

    font-size:clamp(34px,4vw,56px);

    margin-bottom:20px;

}

h3{

    font-size:clamp(28px,3vw,40px);

    margin-bottom:18px;

}

h4{

    font-size:24px;

    margin-bottom:16px;

}

h5{

    font-size:20px;

    margin-bottom:14px;

}

h6{

    font-size:17px;

    margin-bottom:12px;

}

p{

    margin:0 0 18px;

    color:var(--text-soft);

    font-size:16px;

    line-height:1.85;

}

p:last-child{

    margin-bottom:0;

}

strong{

    font-weight:700;

    color:var(--text-main);

}

small{

    font-size:13px;

    color:var(--text-muted);

}

code{

    padding:2px 8px;

    border-radius:8px;

    background:var(--bg-section);

    color:var(--primary);

    font-size:.95em;

}

pre{

    overflow:auto;

    padding:22px;

    border-radius:18px;

    background:#0f172a;

    color:#f8fafc;

}

/* =========================================================
   LINK
========================================================= */

a{

    color:inherit;

    text-decoration:none;

    transition:

        color var(--transition),

        opacity var(--transition),

        transform var(--transition);

}

a:hover{

    color:var(--primary);

}

a:focus-visible{

    outline:3px solid rgba(34,197,94,.25);

    outline-offset:4px;

    border-radius:6px;

}

/* =========================================================
   CONTAINER
========================================================= */

.container{

    width:100%;

    max-width:var(--container);

    margin-inline:auto;

    padding-inline:24px;

}

.container-wide{

    width:100%;

    max-width:var(--container-wide);

    margin-inline:auto;

    padding-inline:24px;

}

.container-sm{

    width:100%;

    max-width:var(--container-sm);

    margin-inline:auto;

    padding-inline:24px;

}

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

section{

    width:100%;

    padding:

        clamp(70px,8vw,120px)

        0;

}

.section-sm{

    padding:

        clamp(40px,6vw,70px)

        0;

}

.section-lg{

    padding:

        clamp(110px,10vw,160px)

        0;

}

/* =========================================================
   SECTION HEADER
========================================================= */

.section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-header h2{

    margin-bottom:18px;

}

.section-header p{

    font-size:17px;

    color:var(--text-muted);

}

/* =========================================================
   BADGE
========================================================= */

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:999px;

    background:var(--primary-soft);

    color:var(--primary-dark);

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* =========================================================
   LIST
========================================================= */

ul,
ol{

    list-style:none;

    margin:0;

    padding:0;

}

li{

    margin:0;

}

/* =========================================================
   FORM ELEMENTS
========================================================= */

label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:var(--text-main);

}

input,
textarea,
select{

    width:100%;

    padding:14px 16px;

    color:var(--text-main);

    background:#ffffff;

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

    border-radius:14px;

    outline:none;

    transition:

        border-color var(--transition),

        box-shadow var(--transition),

        background var(--transition);

}

input::placeholder,
textarea::placeholder{

    color:var(--text-muted);

}

textarea{

    min-height:120px;

    resize:vertical;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(34,197,94,.10);

}

/* =========================================================
   BUTTON RESET
========================================================= */

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    user-select:none;

    font:inherit;

    transition:

        background var(--transition),

        color var(--transition),

        border-color var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}

button:disabled{

    opacity:.6;

    cursor:not-allowed;

}

/* =========================================================
   TABLE
========================================================= */

table{

    width:100%;

    border-collapse:collapse;

    border-spacing:0;

}

thead{

    background:var(--bg-section);

}

th{

    padding:16px;

    text-align:left;

    font-weight:700;

    color:var(--text-main);

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

}

td{

    padding:16px;

    color:var(--text-soft);

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

}

tbody tr{

    transition:background var(--transition);

}

tbody tr:hover{

    background:var(--bg-section);

}

/* =========================================================
   TEXT UTILITIES
========================================================= */

.text-left{

    text-align:left;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary);

}

.text-soft{

    color:var(--text-soft);

}

.text-muted{

    color:var(--text-muted);

}

.text-white{

    color:var(--text-white);

}

/* =========================================================
   DISPLAY
========================================================= */

.d-none{

    display:none;

}

.d-block{

    display:block;

}

.d-inline{

    display:inline;

}

.d-inline-block{

    display:inline-block;

}

.d-flex{

    display:flex;

}

.d-inline-flex{

    display:inline-flex;

}

.d-grid{

    display:grid;

}

/* =========================================================
   GAP
========================================================= */

.gap-1{

    gap:8px;

}

.gap-2{

    gap:16px;

}

.gap-3{

    gap:24px;

}

.gap-4{

    gap:32px;

}

.gap-5{

    gap:48px;

}

/* =========================================================
   BUTTON COMPONENT
========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    padding:14px 28px;

    border:none;

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

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    transition:var(--transition);

}

.btn-primary{

    color:#ffffff;

    background:

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

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

}

.btn-primary:hover{

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:

        0 22px 42px rgba(21,128,61,.18);

}

.btn-outline{

    color:var(--primary);

    background:#ffffff;

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

}

.btn-outline:hover{

    color:var(--primary-dark);

    border-color:var(--primary);

    transform:translateY(-3px);

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

}

.btn-dark{

    color:#ffffff;

    background:var(--bg-dark);

}

.btn-dark:hover{

    color:#ffffff;

    transform:translateY(-3px);

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

}

/* =========================================================
   CARD
========================================================= */

.card{

    position:relative;

    overflow:hidden;

    background:var(--bg-card);

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

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

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-4px);

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

}

/* =========================================================
   GLASS
========================================================= */

.glass{

    background:var(--glass);

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.glass-strong{

    background:var(--glass-strong);

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

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

}

/* =========================================================
   BORDER RADIUS
========================================================= */

.radius-xs{

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

}

.radius-sm{

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

}

.radius-md{

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

}

.radius-lg{

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

}

.radius-xl{

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

}

.radius-full{

    border-radius:999px;

}

/* =========================================================
   SHADOW
========================================================= */

.shadow-xs{

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

}

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}

.shadow-green{

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

}

.shadow-gold{

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

}

/* =========================================================
   IMAGE UTILITIES
========================================================= */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

.img-rounded{

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

}

.img-circle{

    border-radius:50%;

}

/* =========================================================
   BADGE VARIANTS
========================================================= */

.badge-primary{

    background:var(--primary-soft);

    color:var(--primary-dark);

}

.badge-gold{

    background:#fff8dc;

    color:#9a6b00;

}

.badge-dark{

    background:var(--bg-dark);

    color:#ffffff;

}

/* =========================================================
   FLEX UTILITIES
========================================================= */

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.flex-column{

    flex-direction:column;

}

.flex-row{

    flex-direction:row;

}

.flex-wrap{

    flex-wrap:wrap;

}

.flex-nowrap{

    flex-wrap:nowrap;

}

.items-start{

    align-items:flex-start;

}

.items-center{

    align-items:center;

}

.items-end{

    align-items:flex-end;

}

.items-stretch{

    align-items:stretch;

}

.justify-start{

    justify-content:flex-start;

}

.justify-center{

    justify-content:center;

}

.justify-end{

    justify-content:flex-end;

}

.justify-between{

    justify-content:space-between;

}

.justify-around{

    justify-content:space-around;

}

.justify-evenly{

    justify-content:space-evenly;

}

/* =========================================================
   GRID UTILITIES
========================================================= */

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:24px;

}

.grid-3{

    display:grid;

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

    gap:24px;

}

.grid-4{

    display:grid;

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

    gap:24px;

}

.grid-auto{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap:24px;

}

/* =========================================================
   WIDTH
========================================================= */

.w-25{

    width:25%;

}

.w-50{

    width:50%;

}

.w-75{

    width:75%;

}

.w-100{

    width:100%;

}

.max-100{

    max-width:100%;

}

.h-100{

    height:100%;

}

.mx-auto{

    margin-inline:auto;

}

/* =========================================================
   SPACING
========================================================= */

.m-0{margin:0;}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}
.mt-5{margin-top:48px;}
.mt-6{margin-top:64px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}
.mb-5{margin-bottom:48px;}
.mb-6{margin-bottom:64px;}

.ml-auto{

    margin-left:auto;

}

.mr-auto{

    margin-right:auto;

}

.p-0{padding:0;}

.pt-1{padding-top:8px;}
.pt-2{padding-top:16px;}
.pt-3{padding-top:24px;}
.pt-4{padding-top:32px;}

.pb-1{padding-bottom:8px;}
.pb-2{padding-bottom:16px;}
.pb-3{padding-bottom:24px;}
.pb-4{padding-bottom:32px;}

/* =========================================================
   POSITION
========================================================= */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

.sticky{

    position:sticky;

}

/* =========================================================
   OVERFLOW
========================================================= */

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}

.overflow-x-auto{

    overflow-x:auto;

}

.overflow-y-auto{

    overflow-y:auto;

}

/* =========================================================
   Z-INDEX
========================================================= */

.z-dropdown{

    z-index:var(--z-dropdown);

}

.z-sticky{

    z-index:var(--z-sticky);

}

.z-fixed{

    z-index:var(--z-fixed);

}

.z-modal{

    z-index:var(--z-modal);

}

/* =========================================================
   CURSOR
========================================================= */

.cursor-pointer{

    cursor:pointer;

}

.cursor-default{

    cursor:default;

}

.pointer-none{

    pointer-events:none;

}

/* =========================================================
   VISIBILITY
========================================================= */

.hidden{

    display:none !important;

}

.visible{

    display:block;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =========================================================
   ANIMATION CLASSES
========================================================= */

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .6s ease both;

}

.float{

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

}

/* =========================================================
   TRANSITION HELPERS
========================================================= */

.transition{

    transition:var(--transition);

}

.transition-fast{

    transition:var(--transition-fast);

}

.transition-slow{

    transition:var(--transition-slow);

}

/* =========================================================
   DIVIDER
========================================================= */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

}

.divider-lg{

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--primary),

            transparent

        );

}

/* =========================================================
   OPACITY
========================================================= */

.opacity-0{

    opacity:0;

}

.opacity-25{

    opacity:.25;

}

.opacity-50{

    opacity:.5;

}

.opacity-75{

    opacity:.75;

}

.opacity-100{

    opacity:1;

}

/* =========================================================
   BORDER
========================================================= */

.border{

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

}

.border-top{

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

}

.border-bottom{

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

}

.border-primary{

    border-color:var(--primary);

}

/* =========================================================
   BACKGROUND
========================================================= */

.bg-white{

    background:#ffffff;

}

.bg-section{

    background:var(--bg-section);

}

.bg-section-alt{

    background:var(--bg-section-alt);

}

.bg-dark{

    background:var(--bg-dark);

    color:#ffffff;

}

.bg-primary{

    background:var(--primary);

    color:#ffffff;

}

/* =========================================================
   USER SELECT
========================================================= */

.select-none{

    user-select:none;

}

.select-text{

    user-select:text;

}

/* =========================================================
   SCREEN READER
========================================================= */

.sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

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

/* ==========================
   ≤ 1200px
========================== */

@media (max-width:1200px){

    .container,
    .container-wide{

        max-width:1140px;

    }

}

/* ==========================
   ≤ 992px
========================== */

@media (max-width:992px){

    html{

        font-size:15.5px;

    }

    .container,
    .container-wide,
    .container-sm{

        padding-inline:20px;

    }

    .grid-4{

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

    }

    .grid-3{

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

    }

    section{

        padding:

            clamp(60px,7vw,90px)

            0;

    }

}

/* ==========================
   ≤ 768px
========================== */

@media (max-width:768px){

    html{

        font-size:15px;

    }

    body{

        line-height:1.65;

    }

    .container,
    .container-wide,
    .container-sm{

        padding-inline:18px;

    }

    h1{

        margin-bottom:18px;

    }

    h2{

        margin-bottom:16px;

    }

    .section-header{

        margin-bottom:42px;

    }

    .section-header p{

        font-size:15px;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .btn{

        width:100%;

    }

    th,
    td{

        padding:12px;

    }

    input,
    textarea,
    select{

        padding:13px 14px;

    }

}

/* ==========================
   ≤ 576px
========================== */

@media (max-width:576px){

    section{

        padding:

            clamp(50px,7vw,70px)

            0;

    }

    .container,
    .container-wide,
    .container-sm{

        padding-inline:16px;

    }

    .badge{

        font-size:11px;

        padding:8px 14px;

    }

}

/* ==========================
   ≤ 480px
========================== */

@media (max-width:480px){

    html{

        font-size:14.5px;

    }

    .btn{

        min-height:50px;

        padding:13px 20px;

        font-size:14px;

    }

}

/* =========================================================
   PRINT
========================================================= */

@media print{

    body{

        background:#ffffff !important;

    }

    body::before,
    body::after{

        display:none;

    }

    .btn,
    .badge{

        box-shadow:none !important;

    }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* =========================================================
   END OF GLOBAL.CSS
========================================================= */