/*
===========================================
TOK UI FRAMEWORK
Tested OK Electronics
===========================================
*/

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,sans-serif;

    color:#111827;

    background:#ffffff;

    line-height:1.7;

    overflow-x:hidden;

}

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

:root{

    --tok-primary:#0D47A1;

    --tok-secondary:#E31E24;

    --tok-dark:#111827;

    --tok-light:#F8FAFC;

    --tok-border:#E5E7EB;

    --tok-text:#6B7280;

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

}

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

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

    font-family:"Space Grotesk",sans-serif;

    color:var(--tok-dark);

    line-height:1.15;

}

p{

    color:var(--tok-text);

    margin-bottom:1rem;

}

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

.tok-container{

    width:min(1320px, calc(100% - 48px));

    margin-inline:auto;

}

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

.tok-section{

    padding:90px 0;

}

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

.tok-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.35s ease;

}

.tok-btn-primary{

    background:var(--tok-primary);

    color:#fff;

}

.tok-btn-primary:hover{

    background:var(--tok-secondary);

    transform:translateY(-3px);

}

.tok-btn-outline{

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

    color:var(--tok-primary);

}

.tok-btn-outline:hover{

    background:var(--tok-primary);

    color:#fff;

}

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

.tok-main{

    overflow:hidden;

}

.tok-grid{

    display:grid;

    gap:30px;

}

.tok-grid-2{

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

}

.tok-flex{

    display:flex;

}

.tok-align-center{

    align-items:center;

}

.tok-justify-between{

    justify-content:space-between;

}

.tok-shadow{

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

}

.tok-radius{

    border-radius:20px;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}