/*==========================================================
    TRACKING SYSTEM
    style.css
==========================================================*/

/*========== GOOGLE FONT ==========*/

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


/*========== VARIABLES ==========*/

:root{

    /* Brand */

    --primary:#d90429;
    --primary-dark:#a1031f;

    --secondary:#ffbe0b;

    --success:#22c55e;

    --warning:#f59e0b;

    --danger:#ef4444;

    --info:#3b82f6;


    /* Background */

    --background:#f8fafc;

    --surface:#ffffff;

    --surface-dark:#edf2f7;


    /* Text */

    --text:#1f2937;

    --text-light:#64748b;

    --white:#ffffff;


    /* Borders */

    --border:#e5e7eb;


    /* Radius */

    --radius-xs:6px;

    --radius-sm:10px;

    --radius:18px;

    --radius-lg:30px;


    /* Shadows */

    --shadow-sm:

    0 5px 12px rgba(0,0,0,.05);

    --shadow:

    0 15px 35px rgba(0,0,0,.08);

    --shadow-lg:

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


    /* Transition */

    --transition:.35s ease;


    /* Gradient */

    --gradient:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary)

    );

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

}


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

h1{

font-size:clamp(2.6rem,6vw,4.5rem);

font-weight:700;

line-height:1.1;

}


h2{

font-size:2.4rem;

font-weight:700;

}


h3{

font-size:1.6rem;

font-weight:600;

}


h4{

font-size:1.15rem;

font-weight:600;

}


p{

color:var(--text-light);

line-height:1.8;

}


a{

text-decoration:none;

color:inherit;

}


img{

display:block;

max-width:100%;

}


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

.container{

width:min(1320px,92%);

margin:auto;

}


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

.section{

padding:90px 0;

}


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

.grid{

display:grid;

gap:30px;

}


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

.flex{

display:flex;

}


.flex-center{

display:flex;

justify-content:center;

align-items:center;

}


.flex-between{

display:flex;

justify-content:space-between;

align-items:center;

}


.flex-column{

display:flex;

flex-direction:column;

}


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

.text-center{

text-align:center;

}


.text-right{

text-align:right;

}


.text-primary{

color:var(--primary);

}


.text-success{

color:var(--success);

}


.text-warning{

color:var(--warning);

}


.text-danger{

color:var(--danger);

}


/*========== BACKGROUNDS ==========*/

.bg-primary{

background:var(--primary);

color:white;

}


.bg-gradient{

background:var(--gradient);

color:white;

}


.bg-white{

background:white;

}


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

.rounded{

border-radius:var(--radius);

}


.rounded-lg{

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

}


.rounded-full{

border-radius:999px;

}


/*========== SHADOWS ==========*/

.shadow-sm{

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

}


.shadow{

box-shadow:var(--shadow);

}


.shadow-lg{

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

}


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

.mt-1{

margin-top:10px;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:35px;

}

.mt-4{

margin-top:50px;

}


.mb-1{

margin-bottom:10px;

}

.mb-2{

margin-bottom:20px;

}

.mb-3{

margin-bottom:35px;

}

.mb-4{

margin-bottom:50px;

}


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

.hidden{

display:none!important;

}

.visible{

display:block!important;

}


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

.pointer{

cursor:pointer;

}


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

::-webkit-scrollbar{

width:12px;

}


::-webkit-scrollbar-track{

background:#ececec;

}


::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


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

::selection{

background:var(--primary);

color:white;

}


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

.fade{

animation:fade .5s ease;

}


@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}