@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-Thin.woff2) format("woff2"), url(../fonts/TTCommons-Thin.woff) format("woff"), url(../fonts/TTCommons-Thin.ttf) format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-Regular.woff2) format("woff2"), url(../fonts/TTCommons-Regular.woff) format("woff"), url(../fonts/TTCommons-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-Medium.woff2) format("woff2"), url(../fonts/TTCommons-Medium.woff) format("woff"), url(../fonts/TTCommons-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-MediumItalic.woff2) format("woff2"), url(../fonts/TTCommons-MediumItalic.woff) format("woff"), url(../fonts/TTCommons-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-DemiBold.woff2) format("woff2"), url(../fonts/TTCommons-DemiBold.woff) format("woff"), url(../fonts/TTCommons-DemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-Bold.woff2) format("woff2"), url(../fonts/TTCommons-Bold.woff) format("woff"), url(../fonts/TTCommons-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Commons";
    src: url(../fonts/TTCommons-BoldItalic.woff2) format("woff2"), url(../fonts/TTCommons-BoldItalic.woff) format("woff"), url(../fonts/TTCommons-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}



:root {
    --main-font: "Geologica";
    --main-color: #000000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 400;
    line-height: 1.2;
}

a {
    color: var(--main-color);
    text-decoration: none;
    transition: color .3s ease;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.main {
    flex-grow: 1;
}

.container {
    width: 100%;
    max-width: 1325px;
    margin: 0 auto;
    padding: 0 15px;
}

.header {
    height: 80px;
    background: linear-gradient(90deg, #252525 0%, #363636 51.69%, #272727 100%);
}

.footer {
    /*background: #279FD4;*/
    color: #ffffff;
    font-family: "TT Commons";
}

.footer-slogan {
    text-align: center;
    margin-bottom: 10px;
    color: #BDBDBD;
    font-family: "TT Commons";
    font-size: 40px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    /*letter-spacing: -2.3px;*/
    text-transform: uppercase;
}

.footer-bottom {
    background: #279FD4;
}

.footer-bottom__top {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.footer-bottom__top a {
    color: #ffffff;
    font-size: 14px;
}

.footer-bottom__body {
    display: flex;
}

.footer-bottom__left {
    display: flex;
    align-items: center;
    margin-right: 150px;
}

.footer-logo {
    display: block;
    width: 135px;
    margin-right: 25px;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer-bottom__about {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.footer-bottom__center {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .footer-slogan {
        text-align: left;
    }

    .footer-bottom__left {
        margin-right: 0;
    }

    .footer-bottom__body {
        flex-wrap: wrap;
    }

    .footer-bottom__center {
        margin-top: 15px;
    }
}

.grid-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.grid-subrow {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}

.mb-top__left {
    width: 100%;
}

.mb-top__right {
    width: 100%;
}

.mbb-1 {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 35px 20px 20px 30px;
    background-image: url('../img/mbb-1__bg.png');
    background-position: right center;
    height: 250px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.mbb-1__title {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    font-weight: 600;
    font-size: 46px;
    line-height: 46px;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.mbb-1__title svg {
    position: absolute;
    right: 0;
    transform: translateX(70px);
}

.mbb-1 p {
    color: #fff;
    font-size: 16px;
    line-height: 18px;
    display: block;
    max-width: 300px;
    margin-bottom: 20px;
}

.mbb-1__buttons a {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.mbb-1__buttons a span {
    display: inline-flex;
    background-color: #fff;
    color: #1AA0E9;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    align-items: center;
    height: 33px;
}

.mb-prem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 250px;
    border-radius: 5px;
    background-color: #FFDB60;
    padding: 15px 25px;
}

.mb-prem img {
    display: block;
    width: 100%;
}

.mb-prem__dis {
    margin-top: 10px;
    font-size: 5px;
    color: #0000004D;
    margin-bottom: 13px;
}

.mb-prem a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background-color: #08C7EA;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    height: 33px;
}

.mb-top__right .grid-row {
    margin-bottom: 0;
}

.reels-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 5px;
    background-image: url('../img/reels-bg.png');
    padding: 30px 30px 0px;
    position: relative;
    overflow-x: hidden;
}

.reels-col__all {
    display: flex;
    align-items: center;
    width: 147px;
    height: 147px;
    border: #000000 1px solid;
    border-radius: 50%;
    font-family: "TT Commons";
    gap: 5px;
    font-size: 10px;
    line-height: 9px;
    align-items: center;
    padding-left: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}

.reels-col__top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.reels-col__top span {
    color: #414245;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "TT Commons";
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px 2px;
}

.reels-col__title {
    color: #414245;
    font-weight: 600;
    font-size: 18px;
    font-size: 20px;
    margin-bottom: 25px;
}

.reels-col__item a img {
    display: block;
    width: 185px;
}

.reels-col__item a {
    display: block;
    position: relative;
}

.reels-col__item a svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-75%, -50%);
}

.mb-top__art {
    border-radius: 5px;
    height: 250px;
    background-color: #8D6FCB;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

.mb-top__art-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.mb-top__art-top span {
    color: #414245;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "TT Commons";
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px 2px;
}

.mb-top__art-title {
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mb-top__art p {
    color: #fff;
    font-weight: 400;
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 10px;
    margin-bottom: 20px;
}

.mb-top__art a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #414245;
    background-color: #FFDB60;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    min-height: 33px;
}

.mbb-4 {
    width: 100%;
    height: 250px;
}

.mbb-4__left {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 15px 20px 20px 30px;
    background-image: url('../img/mbb-4__left.png');
    height: 250px;
}

.mbb-4__left-top {
    margin-bottom: 15px;
    width: 100%;
}

.mbb-4__left-label {
    color: #414245;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "TT Commons";
    font-size: 12px;
    line-height: 12px;
    font-weight: 400;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px 2px;
}

.mbb-4__left h3 {
    color: #414245;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
}

.mbb-4__left p {
    color: #414245;
    font-weight: 400;
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 10px;
}

.mbb-4__left-middle {
    display: flex;
    align-items: flex-start;
    gap: 13px
}

.mbb-4__left-middle img {
    display: block;
    width: 67px;
}

.mbb-4__left-btns {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mbb-4__left-btns a {
    display: flex;
    align-items: center;
    color: #414245;
    font-weight: 400;
    font-weight: 700;
    font-size: 11px;
    gap: 10px;
}

.mbb-4__right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 15px 20px 20px 20px;
    background-image: url('../img/mbb-4__right.png');
    height: 250px;
}

.mbb-4__right > img {
    display: block;
    width: 67px;
}

.mbb-4__right h3 {
    color: #414245;
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
}

.mbb-4__right p {
    margin: 10px 0 15px;
    color: #414245;
    font-size: 10px;
    line-height: 11px;
}

.mbb-4__right a {
    display: inline-flex;
    height: 39px;
    align-items: center;
    background-color: #08C7EA;
    padding: 0 15px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;

}

.mbb-5 {
    border-radius: 10px;    
    background-image: url('../img/mb-5__bg.png');
    height: 250px;
    background-position: center;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px;
}

.mb-5__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mb5__btn {
    display: flex;
    justify-content: flex-start;
}

.mb5__btn a {
    display: flex;
    height: 39px;
    align-items: center;
    background-color: #FFDB60;
    padding: 0 15px;
    border-radius: 5px;
    color: #414245;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
}

.mb-6 {
    border-radius: 10px;    
    background-image: url('../img/mb-6__bg.png');
    height: 250px;
    background-position: center;
    background-size: cover;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 35px;
    gap: 100px;
}

.mb-6__title {
    color: #414245;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 30px
}

.mb-6__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-6__list a {
    display: flex;
    font-size: 18px;
}

.mb-7 {
    border-radius: 10px;    
    background-image: url('../img/mb-7__bg.png');
    height: 250px;
    background-position: center;
    background-size: cover;
    width: 100%;
    padding: 30px 25px;
    display: flex;
    align-items: center;
}

.mb-7__title {
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.mb-7__title span {
    display: block;
    color: #369FD9;
}

.mb-7 p {
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 10px;
}

.mb-7__buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mb-7__buttons a {
    display: flex;
    height: 39px;
    align-items: center;
    background-color: #FFDB60;
    padding: 0 15px;
    border-radius: 5px;
    color: #414245;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
}

.mb-7__buttons img {
    display: block;
    height: 39px;
}



@media (max-width: 600px) {
    .grid-row {
        grid-template-columns: repeat(1, 1fr);
    }

    .mb-6 {
        gap: 20px;
    }

    .mb-6__title {
        gap: 10px;
        max-width: 140px;
    }

    .mb-6__title svg {
        display: none;
    }

    .mb-7 {
        flex-direction: column;
        height: auto;
    }

    .mb-7 > img {
        margin-top: 25px;
    }

    .mbb-4 {
        height: auto;
    }

    .mbb-4__left {
        padding: 10px;
    }

    .mbb-4__right h3 {
        color: #414245;
        font-weight: 600;
        font-size: 16px;
        line-height: 18px;
        text-transform: uppercase;
    }

    .mbb-4__right {
        padding: 10px;
        flex-wrap: wrap;
    }

    .mbb-4__right > img {
        display: block;
        width: 45px;
    }

    .mb-prem {
        padding: 10px;
        justify-content: space-between;
    }


    .head-logo {
        color: #2F2F2F;
        font-size: 20px;
        font-style: italic;
        font-weight: 600;
        text-transform: uppercase;
    }

    .head-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px
    }


    .mb-prem a {
        height: 27px;
        font-size: 10px;
    }

    .mb-top__art {
        padding: 10px;
        justify-content: space-between;
    }

    .mb-top__art-top span {
        font-size: 10px;
    }

    .mb-top__art-top {
        margin-bottom: 15px;
    }

    .mb-top__art-title {
        font-size: 15px;
    }

    .mb-top__art a {
        height: 27px;
        font-size: 10px;
        min-height: 27px;
    }

    .mb-top__art p {
        font-size: 9px;
    }

    .mbb-5 {
        border-radius: 0;
        background-image: url('../img/mb-5__bg-m.png');
        padding: 10px;
    }

    .mb-5__title {
        max-width: 155px;
    }

    .mbb-4__left-btns {
        flex-direction: column;
        align-items: flex-start;
    }

    .mbb-4__left-middle img {
        display: none;
    }

    .mbb-4__left-btns a:last-of-type {
        padding: 5px 10px;
        background-color: #fff;
        border-radius: 5px;
    }

    .mbb-4__right-title {
        display: flex;
        align-items: center;
    }

    .mbb-4__right-title img {
        display: block;
        width: 45px;
    }

    .reels-col {
        padding: 10px;
        background: none;
    }

    .reels-col__line {
        display: flex;
        gap: 10px;
        overflow-x: auto;
    }

    .reels-col__item a svg {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .reels-col__item a img {
        display: block;
        width: 170px;
        border-radius: 10px;
    }
    

}