/* =====================================================
   ELITE STORE BASE CSS
   Version : 1.0
===================================================== */

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

body{
    font-family:var(--font-primary);
    font-size:var(--fs-16);
    font-weight:var(--fw-400);
    line-height:1.6;
    color:var(--gray-700);
    background:var(--gray-50);
    overflow-x:hidden;
}

/* ==========================
   HEADINGS
========================== */

h1,
h2,
h3,
h4,
h5,
h6{
    font-weight:var(--fw-700);
    line-height:1.2;
}

h1{
    font-size:var(--fs-56);
}

h2{
    font-size:var(--fs-48);
}

h3{
    font-size:var(--fs-40);
}

h4{
    font-size:var(--fs-32);
}

h5{
    font-size:var(--fs-24);
}

h6{
    font-size:var(--fs-20);
}

/* ==========================
   PARAGRAPH
========================== */

p{
    color:var(--gray-600);
    margin-bottom:var(--space-16);
}

/* ==========================
   IMAGES
========================== */

img{
    width:100%;
    height:auto;
    object-fit:cover;
}

/* ==========================
   SECTIONS
========================== */

section{
    padding:80px 0;
}

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

.container{
    width:min(100% - 32px,var(--container-width));
    margin-inline:auto;
}

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

.section-title{
    text-align:center;
    margin-bottom:var(--space-16);
}

.section-description{
    text-align:center;
    max-width:700px;
    margin:0 auto var(--space-48);
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:var(--gray-200);
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:50px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary-dark);
}

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

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

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

.bg-white{
    background:var(--white);
}

.bg-light{
    background:var(--gray-100);
}

.bg-dark{
    background:var(--secondary);
    color:var(--white);
}

/* ==========================
   HIDDEN
========================== */

.hidden{
    display:none !important;
}