/*font family start*/

@font-face {
    font-family: 'CircularStd-Book';
    src: url('../fonts/CircularStd-Book.woff2') format('woff2'),
        url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

@font-face {
    font-family: 'Freight';
    src: url('../fonts/Freight-BigBook.woff2') format('woff2'),
        url('../fonts/Freight-BigBook.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*header start*/
.header { padding: 0 0px 75px;width: 100%}
.header .logo {max-width: 131px}

/*HeroPanel Start*/
.main-content {display: flex;align-items: start;justify-content: center;flex-direction: column;height: 100vh}
.home {background: #0A73DA;background: linear-gradient(to left, #0A73DA 13%, #2DC4F5 54%, #4AE4FC 71%);height: 100vh}
.home .HeroPanel-content{display: flex;align-items:center;justify-content: center;}
.home .heroTextHome {width: 50%}
.home .heroTextHome h1 {padding-bottom: 50px}
.home .heroTextHome h4 { font-family: 'Canela-Light';width: 100%;letter-spacing: 0;}
.home .heroTextHome h6 {font-family: 'CircularStd-Medium';padding-top: 60px;text-transform: uppercase;padding-bottom: 0}
.home .heroImageHome {width: 50% ;display: flex;align-items: center !important;justify-content: center !important;}
.home #canvas-width {width: 450px;height:450px}