@font-face {
    font-family: 'ZonaPro-Light';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-Light'), url('../fonts/zonapro-light-webfont.woff') format('woff'), url('../fonts/zonapro-light-webfont.woff2') format('woff2')
}

@font-face {
    font-family: 'ZonaPro-Thin';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-Thin'), url('../fonts/zonapro-thin-webfont.woff') format('woff'), url('../fonts/zonapro-thin-webfont.woff2') format('woff2')
}

@font-face {
    font-family: 'ZonaPro-Regular';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-Regular'), url('../fonts/zonapro-regular-webfont.woff') format('woff'), url('../fonts/zonapro-regular-webfont.woff2') format('woff2')
}

@font-face {
    font-family: 'ZonaPro-SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-SemiBold'), url('../fonts/zonapro-semibold-webfont.woff') format('woff'), url('../fonts/zonapro-semibold-webfont.woff2') format('woff2')
}
    
@font-face {
    font-family: 'ZonaPro-Bold';    
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-Bold'), url('../fonts/zonapro-bold-webfont.woff') format('woff'), url('../fonts/zonapro-bold-webfont.woff2') format('woff2')
}

@font-face {
    font-family: 'ZonaPro-ExtraBold';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-ExtraBold'), url('../fonts/zonapro-extrabold-webfont.woff') format('woff'), url('../fonts/zonapro-extrabold-webfont.woff2') format('woff2')
}

@font-face {
    font-family: 'ZonaPro-Black';
    font-style: normal;
    font-weight: normal;
    src: local('ZonaPro-Black'), url('../fonts/zonapro-black-webfont.woff') format('woff'), url('../fonts/zonapro-black-webfont.woff2') format('woff2')
}

/* LabGrotesque-Thin */
@font-face {
  font-family: 'LabGrotesque-Thin';
  src: url('../fonts/LabGrotesque-Thin.woff') format('woff'),
       url('../fonts/LabGrotesque-Thin.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Black */
@font-face {
  font-family: 'LabGrotesque-Black';
  src: url('../fonts/LabGrotesque-Black.woff') format('woff'),
       url('../fonts/LabGrotesque-Black.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Bold */
@font-face {
  font-family: 'LabGrotesque-Bold';
  src: url('../fonts/LabGrotesque-Bold.woff') format('woff'),
       url('../fonts/LabGrotesque-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Bolditalic */
@font-face {
  font-family: 'LabGrotesque-Bolditalic';
  src: url('../fonts/LabGrotesque-Bolditalic.woff') format('woff'),
       url('../fonts/LabGrotesque-Bolditalic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Italic */
@font-face {
  font-family: 'LabGrotesque-Italic';
  src: url('../fonts/LabGrotesque-Italic.woff') format('woff'),
       url('../fonts/LabGrotesque-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Light */
@font-face {
  font-family: 'LabGrotesque-Light';
  src: url('../fonts/LabGrotesque-Light.woff') format('woff'),
       url('../fonts/LabGrotesque-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Lightitalic */
@font-face {
  font-family: 'LabGrotesque-Lightitalic';
  src: url('../fonts/LabGrotesque-Lightitalic.woff') format('woff'),
       url('../fonts/LabGrotesque-Lightitalic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Medium */
@font-face {
  font-family: 'LabGrotesque-Medium';
  src: url('../fonts/LabGrotesque-Medium.woff') format('woff'),
       url('../fonts/LabGrotesque-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Mediumitalic */
@font-face {
  font-family: 'LabGrotesque-Mediumitalic';
  src: url('../fonts/LabGrotesque-Mediumitalic.woff') format('woff'),
       url('../fonts/LabGrotesque-Mediumitalic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* LabGrotesque-Regular */
@font-face {
  font-family: 'LabGrotesque-Regular';
  src: url('../fonts/LabGrotesque-Regular.woff') format('woff'),
       url('../fonts/LabGrotesque-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family: 'LabGrotesque-Regular', 'ZonaPro-Regular';
    color: #2B2B2B;
    font-size: 16px;
    line-height: 32px;
    font-weight: 400;
}

:root {
    --color-red: #D0021B;
    --color-dark: #1F1F1F;
    --color-light-dark: #2B2B2B;
    --color-grey: #878787;
    --color-light-grey: #D8D8D8;
    --color-extra-light-grey: #F3F3F3;
    --color-white: #ffffff;
    --h1:42px;
    --h2:30px;
    --h3:26px;
    --h4:24px;
    --h5:22px;
    --h6:16px;
}

.color-red {
    color: var(--color-red)
}

.bg-color-red {
    background-color: var(--color-red)
}

.color-dark {
    color: var(--color-dark)
}

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

.bg-color-light-dark {
    background-color: var(--color-light-dark)
}

.color-grey {
    color: var(--color-grey)
}

.bg-color-grey {
    background-color: var(--color-grey)
}

.color-light-grey {
    color: var(--color-light-gray)
}

.bg-color-light-grey {
    background-color: var(--color-light-grey)
}

.color-extra-light-grey {
    color: var(--color-extra-light-grey)
}

.bg-color-extra-light-grey {
    background-color: var(--color-extra-light-grey)
}

.color-white {
    color: var(--color-white)
}

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

.custom-btn {
    padding: 10px 15px;
    min-width: 260px;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-white);
    font-weight: 800;
    background-color: var(--color-red);
    transition: 0.5s ease-in-out all;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    border: 0;
    overflow: hidden;
    z-index: 1;
    text-align: center;
}

.custom-btn:hover {
    color: #fff;
    background-color: #B40116;
}

.custom-btn:focus {
    color: #D0021B;
    background-color: transparent;
    border: 2px solid #D0021B;
}

h1 {
    font-size: var(--h1);   
    line-height: 54px;
    color: var(--color-white);
}

h2 {
    font-size: var(--h2);
    font-family: 'LabGrotesque-Black', 'ZonaPro-ExtraBold';
    line-height: 38px;
    color: #0F0F0F;
}

h3 {
    font-size: var(--h3);   
    line-height: 34px;
    color: var(--color-white);
}

h4 {
    font-size: var(--h4);   
    line-height: 32px;
    color: var(--color-dark-blue);
}

h5 {
    font-size: var(--h5);   
    line-height: 26px;
    color: var(--color-white);
}

h6 {
    font-size: var(--h6);   
    line-height: 26px;
    color: var(--color-dark);
    font-family: 'LabGrotesque-Medium', 'ZonaPro-SemiBold';
}

.container {
    max-width: 1560px;
    padding: 0 15px;
    margin: 0 auto;
}

@media only screen and (max-width:1440px) {
    :root {
        --h1:40px;
        --h2:28px;
        --h3:23px;
        --h4:18px;
    }

    h1 {
        font-size: var(--h1);
        line-height: 52px;
    }

    h2 {
        font-size: var(--h2);
        line-height: 40px;
    }

    h3 {
        font-size: var(--h3);
        line-height: 35px;
    }

    h4 {
        font-size: var(--h4);
        line-height: 30px;
    }

}

@media only screen and (max-width:1024px) {
    :root {
        --h1:35px;
        --h2:25px;
        --h3:20px;
        --h4:18px;
    }

    h1 {
        font-size: var(--h1);
        line-height: 43px;
    }

    h2 {
        font-size: var(--h2);
        line-height: 38px;
    }

    h3 {
        font-size: var(--h3);
        line-height: 33px;
    }

    h4 {
        font-size: var(--h4);
        line-height: 28px;
    }

}

@media only screen and (max-width:991px) {
    :root {
        --h1:30px;
        --h2:24px;
        --h3:18px;
    }

    h1 {
        font-size: var(--h1);
        line-height: 38px;
    }

    h2 {
        font-size: var(--h2);
        line-height: 33px;
    }

    h3 {
        font-size: var(--h3);
        line-height: 31px;
    }

}

@media only screen and (max-width:767px) {
    :root {
        --h1:18px;
        --h2:22px;
        --h3:20px;
        --h4:18px;
        --h6:16px;
    }

    h1 {
        font-size: var(--h1);
        line-height: 43px;
    }

    h2 {
        font-size: var(--h2);
        line-height: 33px;
    }

    h3 {
        font-size: var(--h3);
        line-height: 33px;
    }

    h4 {
        font-size: var(--h4);
        line-height: 28px;
    }

    h6 {
        font-size: var(--h6);
        line-height: 24px;
        color: var(--color-dark);
    }

    .mobile-view-more-btn .custom-btn {
        width:225px;
        height: 40px; 
        font-size: 10px;
        min-width: auto;
        line-height: 20px;
        letter-spacing: 1px;
        font-family: 'LabGrotesque-Black', 'ZonaPro-ExtraBold';
        text-transform: uppercase;
        margin-top:10px;
    }

}