@font-face {
    font-family: 'bebasregular';
    src: url("../fonts/bebas/BEBAS.eot");
    src: url("../fonts/bebas/BEBAS.eot?#iefix") format("embedded-opentype"), url("../fonts/bebas/BEBAS.woff") format("woff"), url("../fonts/bebas/BEBAS.ttf") format("truetype"), url("../fonts/bebas/BEBAS.svg#bebasregular") format("svg");
    font-weight: normal;
    font-style: normal;
}
:root{
    --font-bebas: 'bebasregular';
}
.section-hero{
    background: #112040 url("../img/bg_hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 80px 0 80px;
}
@media (min-width: 768px) {
    .section-hero{
        padding: 100px 0 80px;
    }
}
.section-hero h1{
    font-family: var(--font-bebas);
    font-size: 35px;
    font-weight: normal;
    color: #377ae9;
    word-spacing: 5px;
}
@media (min-width: 992px) {
    .section-hero h1{
        font-size: 48px;
    }
}
.section-hero h4{
    font-family: var(--font-caveat);
    font-size: 32px;
    font-weight: bold;
    line-height: 2.38;
    color: #377ae9;
}
.checkout-text{
    font-family: var(--font-caveat);
    font-size: 23.5px;
    font-weight: bold;
    /*line-height: 3.19;*/
    color: #377ae9;
}
.hero-text, .hero-text p{
    font-family: var(--font-raleway);
    font-size: 20px;
    font-weight: normal;
    line-height: 1.75;
    color: #bfc0dd;
}
.hero-text a, .hero-text p a{
    text-decoration: none;
    color: #377ae9;
}
.hero-text a:hover, .hero-text p a:hover{
    text-decoration: none;
    color: #225ebf;
}
/*.frame-div-position{*/
/*    position: absolute;*/
/*    left: 222px;*/
/*    top: 230px;*/
/*}*/
.frame-div{
    height: 362px;
    width: 316px;
    position: relative;
    background: url(../img/frame.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 11px 11px 57px;
    transform: rotate(11deg);
}
.frame-div-copy{
    height: 312px;
    width: 268px;
    transform: rotate(0deg);
    margin-bottom: 15px;
    margin-top: 35px;
}
.frame-name{
    font-family: var(--font-caveat);
    font-size: 23.5px;
    font-weight: bold;
    color: #72657c;
    position: absolute;
    bottom: 14px;
    right: 20px;
}
.img-frame{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.frame-img{
    height: 293px;
    /* width: 316px; */
    overflow: hidden;
}
.frame-img-copy{
    height: 246px;
}
.top-logo-div{
    margin-bottom: 50px;
}
@media (min-width: 992px) {
    .top-logo-div{
        margin-bottom: 110px;
    }
}
.section2{
    background: #ffffff;
    padding: 120px 0 80px;
}
.section2 h1{
    font-family: var(--font-bebas);
    font-size: 35px;
    font-weight: normal;
    text-align: center;
    color: #151d2a;
    word-spacing: 5px;
    margin-bottom: 100px;
}
@media (min-width: 992px) {
    .section2 h1{
        font-size: 50px;
    }
}
.section-contact{
    background: #f9f8fa;
    padding: 100px 0;
}
.section-contact h1{
    font-family: var(--font-bebas);
    font-size: 50px;
    font-weight: normal;
    word-spacing: 5px;
    color: #151d2a;
    position: relative;
    top: -7px;
}
.section-contact h5{
    font-family: var(--font-bebas);
    font-size: 21px;
    font-weight: normal;
    word-spacing: 5px;
    color: #151d2a;
}
.section-contact p, .section-contact p a{
    font-family: var(--font-raleway);
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.43;
    color: #151d2a;
    margin-bottom: 60px;

}
.btn.btn-signup{
    background: #141520;
    border-radius: 29px;
    font-family: var(--font-bebas);
    font-size: 18px;
    font-weight: normal;
    color: #fe7c43;
    min-width: 288px;
    word-spacing: 5px;
    padding: 14px;
}
.btn.btn-signup:hover, .btn.btn-signup:focus{
    background: #3b3e5a;
    color: #ffffff;
}
.product-text{
    font-family: var(--font-raleway);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.89;
    color: #141520;
    margin-bottom: 45px;
    text-transform: capitalize;
    /*min-height: 100px;*/
}
.img-container{
    min-height: 218px;
    margin-bottom: 45px;
}

.section-logo{
    background: #ffffff;
    padding: 35px;
}