:root{
    --base-font: "Inter", sans-serif;
    --header-font: 'Liberation Sans', sans-serif;
    --color-black: #000;
    --color-dark: #131416;
    --color-dark-2: #171717;
    --color-dark-3: #0A0A0A;
    --color-dark-4: #262626;

    --color-grey: #9CA3AF;
    --color-grey-2: #525252;
    --color-grey-3: #A3A3A3;
    --color-grey-4: #737373;
    --color-grey-5: #4B5563;
    --color-grey-6: #E4E4E4;

    --color-orange: #F97316;
    --color-orange-2: #FB923C;
    --color-orange-3: #FED7AA;
    --color-orange-4: #EA580C;
    --color-orange-5: #FFF3F3;

    --color-green: #16A34A;
    --color-green-2: #22C55E;

    --color-light: #F8FAFC;
    --color-white: #fff;

    --border-color-white: 1px solid #FFFFFF1A;
    --border-color-white-50: 1px solid #FFFFFF0D;
    --base-transition:  all .2s ease-in-out;
}

body{
    font-family: var(--base-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    background: var(--color-dark);
    color: var(--color-grey-3);
}
img{
    max-width: 100%;
    height: auto;
}
a{
    text-decoration: none;
    transition: var(--base-transition);
}
a:hover{
    color: var(--color-orange);
}
.p-rel{
    position: relative;
}
.container-fluid{
    max-width: 1820px;
}
.w-100{
    width: 100%;
}
.btn{
    font-family: var(--header-font);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 16px;
    border-radius: 4px;
    outline: none;
    border: none;
    transition: var(--base-transition);
    text-decoration: none;
}
.btn.btn-orange{
    color: var(--color-white);
    background: var(--color-orange-4);
}
.btn.btn-orange:hover{
    background: var(--color-orange);
}
.btn.btn-grey{
    color: var(--color-grey);
    background: rgba(255,255,255,0);
    border: 1px solid rgba(255,255,255,.2);
}
.btn.btn-grey:hover{
    color: var(--color-white);
    border-color: var(--color-orange);
    background: var(--color-orange);
}

.btn-orange.btn-orange--dark {
    background: #00000033;
    border: 1px solid #0000001A;
    backdrop-filter: blur(4px);
    padding: 16px 30px;
}

.btn-orange.btn-orange--white {
    background: #FFFFFF;
    box-shadow: 0px 8px 10px -6px #0000001A;
    box-shadow: 0px 20px 25px -5px #0000001A;
    color: #C2410C;
    padding: 16px 30px;
}

.btn-orange.btn-orange--white:hover {
    background: #FFFFFFaa;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    color: var(--color-white);
    font-weight: 700;
    font-family: var(--header-font);
    margin: 0;
}
h1, .h1{
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -1px;
}
h2, .h2{
    font-size: 24px;
    line-height: 36px;
}


h6, .h6{
    font-weight: 400;
}
h3, .h3{
    font-size: 36px;
    line-height: 36px;
}
h4, .h4{
    font-size: 24px;
    line-height: 32px;
}
h5, .h5, h6, .h6{
    font-size: 20px;
    line-height: 26px;
}
.text-center{
    text-align: center;
}
picture.cover,
picture.contain{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
picture.cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: unset;
}
picture.contain img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: unset;
}
.section-header span{
    color: var( --color-orange);
    display: block;
}
@media screen and (min-width: 404px) {
    h1, .h1{
        font-size: 48px;
        line-height: 53px;
        letter-spacing: -1px;
    }
}
@media screen and (min-width: 1200px) {
    h1, .h1{
        font-size: 72px;
        line-height: 72px;
        letter-spacing: -2.24px;
    }
    h2, .h2{
        font-size: 36px;
        line-height: 40px;
    }
}
@media screen and (min-width: 1400px) {
    h1, .h1{
        font-size: 96px;
        line-height: 96px;
    }
}

@media screen and (min-width: 1720px) {
    h1, .h1{
        font-size: 128px;
        line-height: 128px;
    }
}