/*================================================================================
FONT FACE
==================================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

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

:root {

    --primary: #262626;
    --black: #000000;
    --white: #FFFFFF;
    --red: #bf0d1f;
    --gray: #595959;
    --smoke: #ECECEC;


    --s-1: calc(1rem + 1vw);
    --s-2: calc(1rem + 2vw);
    --s-3: calc(1rem + 3vw);
    

    --sd-1: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    --sd-2: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --sd-3: ;

    --gd-1: linear-gradient(to top, rgb(0, 0, 0, 1) 0%, transparent 100%);
    --gd-2: linear-gradient(to left, var(--gray) 50%, var(--white) 50%);
    --gd-3: linear-gradient(180deg, #454545 8.18%, #141414 95.14%);
    --gd-4: linear-gradient(to bottom, var(--black) 50%, transparent 50%);


    --h-1: translateY(-1rem);
    --h-2: translateX(1rem);
    --h-3: scale(1.1);

    --ff-1: 'Noto Sans', sans-serif;
    --ff-2: 'Nunito', sans-serif;
    --ff-bi: 'bootstrap-icons';


    --fs-1: clamp(1.4rem, 2vw, 1.4rem);
    --fs-2: clamp(1.6rem, 2vw, 1.8rem);
    --fs-3: clamp(3.2rem, 5vw, 4rem);
    --fs-4: clamp(2.2rem, 3vw, 2.8rem);
}


@media (max-width: 991px) {
    :root {
        --h-1: translateY(0);
        --h-2: translateX(0);
        --h-3: scale(1.0);
    }
}

/*======================================================
FONT STYLE
========================================================*/

.p {
    font-size: var(--fs-1) !important;
    font-weight: 400 !important;
}

.p1 {
    font-size: var(--fs-2) !important;
    font-weight: 600 !important;
    font-family: var(--ff-2) !important;
}

.h {
    font-size: var(--fs-3) !important;
    font-weight: 800 !important;
    text-transform: capitalize;
    font-family: var(--ff-2) !important;
}

.h1 {
    font-size: var(--fs-4) !important;
    font-weight: 700 !important;
    text-transform: capitalize;
    font-family: var(--ff-2) !important;
}

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

.sec {
    padding-top: var(--s-2);
}

.sec__block {
    padding-block: var(--s-2);
}

.sec-1 {
    padding-top: var(--s-2);
    background-color: var(--white);
}

.sec-2 {
    padding-block: var(--s-2);
    background-color: var(--white);
}

/*===================================================================================
COLOR
=====================================================================================*/

.c-white {
    color: var(--white) !important;
}

.c-primary {
    color: var(--primary) !important;
}

.c-gray {
    color: #8C8C8C;
}

/*================================================================================
FONT FACE
==================================================================================*/