@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Gotham-Black';
    src: url('/assets/fonts/gotham/Gotham-Black.woff2') format('woff2'),
    url('/assets/fonts/gotham/Gotham-Black.woff') format('woff');
    font-weight: 800;
    /*font-style: normal;*/
    /*font-display: swap;*/
}

@font-face {
    font-family: 'Gotham-Bold';
    src: url('/assets/fonts/gotham/Gotham-Bold.woff2') format('woff2'),
    url('/assets/fonts/gotham/Gotham-Bold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('/assets/fonts/gotham/Gotham-Medium.woff2') format('woff2'),
    url('/assets/fonts/gotham/Gotham-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Gotham-Book';
    src: url('/assets/fonts/gotham/Gotham-Book.woff2') format('woff2'),
    url('/assets/fonts/gotham/Gotham-Book.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('/assets/fonts/gotham/Gotham-Light.woff2') format('woff2'),
    url('/assets/fonts/gotham/Gotham-Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: Sansilk;
    src: url("/assets/fonts/sansilk/Sansilk.otf");
}

@font-face {
    font-family: 'Lumios';
    src: url('/assets/fonts/lumios-marker/Lumios-Marker.woff2') format('woff2'),
    url('/assets/fonts/lumios-marker/Lumios-Marker.woff') format('woff');
    font-weight: 800;
    /*font-style: normal;*/
    /*font-display: swap;*/
}


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

body {
    width: 100%;
    height: 100vh;
    background: #1a1a1a;

}

#background-video.blurred,
.content-wrapper.blurred {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.banner__video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

video#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 100vh;
    z-index: -100;
    object-fit: cover;
}

.banner__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .55;
    background-color: #000;
}

.container-fluid {
    --bs-gutter-x: 0;
}

h2 {
    font-family: Gotham-Black, 'sans-serif';
    font-size: 92px;

    margin-bottom: 0;
    line-height: normal;
}

h3 {
    font-family: Gotham-Black, 'sans-serif';
    font-size: 70px;

    margin-bottom: 0;
}

h5 {
    font-family: Gotham-Medium, 'sans-serif';
    font-size: 35px;

    margin-bottom: 0;
}

p {
    font-family: Gotham, 'sans-serif';
    font-weight: 300;
}

.main-container {
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: calc(100vh - 104px);
    margin: 0 auto;
}

.title {
    z-index: 0;
}

.title h2 {
    font-family: Gotham-Black, 'sans-serif';
    text-align: center;

    font-size: 92px;
    line-height: 6rem;
    text-transform: uppercase;

    color: #ffffff;

    transform: translateY(-40%);
}


html[lang="mk"] .title h2 {
    transform: translateY(-60%);
}

.landing-content-wrapper {
    position: absolute;
    bottom: 2rem;

    display: flex;
    flex-direction: column;
    flex: 0 1 auto;

    align-self: center;
    align-items: center;

}

.landing-text {
    width: 70%;

    text-align: center;
    font-family: Gotham-Light, 'sans-serif';
    font-size: 22px;

    padding: 0 0 2rem 0;

    color: #ffffff;
}

.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
}

.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
}

.we-are-maraton__wrapper {
    padding: 200px 0;
    background-color: #1a1a1a;
    color: #ffffff;
}

.we-are-maraton__wraper__content {
    text-align: center;
}

.we-are-maraton__content__title span {
    position: relative;

    font-size: 150px;
    font-family: Sansilk, 'sans-serif';
    color: #E4282D;
}


html[lang="mk"] .we-are-maraton__content__title h2,
html[lang="mk"] .mediums__content__title h2,
html[lang="mk"] .services__content__title h2,
html[lang="mk"] .gallery__content__title h2 {
    margin-top: -85px;
}


/*html[lang="mk"] .footer__content__title h2 {*/
/*    margin-top: -220px;*/
/*}*/

/*html[lang="mk"] .footer__content__title span {*/
/*    font-family: 'Lumios', 'sans-serif';*/
/*    font-weight: 400;*/

/*    font-size: 190px;*/
/*}*/

html[lang="mk"] .we-are-maraton__content__title span,
html[lang="mk"] .mediums__content__title span,
html[lang="mk"] .services__content__title span,
html[lang="mk"] .gallery__content__title span {
    font-family: 'Lumios', 'sans-serif';
    font-weight: 400;

    font-size: 130px;
}


html[lang="mk"] .content-slide p,
html[lang="mk"] .content-slide.two p,
html[lang="mk"] .content-slide.three p,
html[lang="mk"] .content-slide.four p,
html[lang="mk"] .content-slide.five p {
    font-size: 2.1rem;
    width: 100%;
}

html[lang="mk"] .content-slide h4 {
    font-size: 3rem;
}


.we-are-maraton__content__title h2 {

    margin-top: -120px;

    font-size: 92px;
    font-family: Gotham-Black, 'sans-serif';
    color: #ffffff;
    margin-bottom: 2.5rem;

    text-transform: uppercase;
}

.we-are-maraton__content__text {
    width: 40%;
    margin: 0 auto;
}

.we-are-maraton__content__text p {
    font-size: 38px;
    font-family: Gotham, 'sans-serif';
    font-weight: 300;

    width: 100%;
}

.we-are-maraton__content__button,
.gallery-button__wrapper {
    transform: translate(-50%, -50%);
    position: absolute;
    margin-top: 6rem;
    left: 50%;
    /*width: 100%;*/
    text-align: center;
}

a.learn-more__btn {
    background: transparent;
    border: none;
    padding: 1rem;
    font-size: 1.2rem;
    font-family: Gotham-Book, 'sans-serif';
    position: relative;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
}

a.learn-more__btn:after {
    transform: translateY(-50%);
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E4282D;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: -1;
    transition: 0.3s ease;
}

a.learn-more__btn:hover:after {
    width: 100%;
    height: 100%;
    left: 0;
    border-radius: 150px;
}

a.learn-more__btn i {
    margin-left: 1rem;
}


.counter-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    align-items: baseline;

    padding: 200px 0;
    background-color: #1a1a1a;
}

.counter-box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
}

.count_up {
    color: #E4282D;
    background: transparent;
    text-align: center;

    width: 28%;
}

.number {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;


    align-items: baseline;
}

.count_up .number h2 {
    font-size: 140px;
}

h3.suffix {
    font-size: 140px;
}

h3.prefix {
    font-size: 140px;
}

.count_up .headline {
    width: 65%;

    font-family: Gotham, 'sans-serif';
    font-size: 26px;
    font-weight: 300;

    color: #ffffff;
}

h3.suffix span {
    font-size: 90px;
}

h3.prefix span {
    font-size: 90px;
}

/*.headline.days {*/
/*    width: 25%;*/
/*}*/

.count_up .text {
    font-size: 16px;
    margin-top: 32px;
    font-weight: 400;
    color: #aaaaaa;
}

.cards-container {
    background-color: #1a1a1a;
    padding: 100px 0;
}

.cards-wrapper {
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    justify-content: center;

    column-gap: 2rem;
    row-gap: 2rem;
    width: 70%;

    margin: 0 auto;
}

.card-box {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;

    padding: 2rem;

    background-color: #262626;
    color: white;

    border: 1px solid #1a1a1a;
}

.card-box__text {
    margin-top: 2rem;

    width: 100%;
}

.card-box__text h5 {
    font-family: Gotham-Book, 'sans-serif';
}


.mediums-wrapper {
    padding: 200px 0;
    background-color: #1a1a1a;
    color: #ffffff;
}

.mediums__wraper__content {
    text-align: center;
}

.mediums__content__title span {
    position: relative;

    font-size: 150px;
    font-family: Sansilk, 'sans-serif';
    color: #E4282D;
}

.mediums__content__title h2 {

    margin-top: -110px;

    text-transform: uppercase;
    font-size: 92px;
    font-family: Gotham-Black, 'sans-serif';
    color: #ffffff;
    margin-bottom: 2.5rem;
}

.mediums__boxes__wrapper {
    width: 75%;
    margin: 6rem auto;
}

.mediums__box {
    display: flex;
    flex-direction: row;
    margin: 2rem auto;
    column-gap: 3rem;
}

.mediums__box__buses,
.mediums__box__bus-stop,
.mediums__box__bus-tv,
.mediums__box__bus-stop-tv {
    position: relative;
    width: 50%;
}

.mediums__box__buses img,
.mediums__box__bus-stop img,
.mediums__box__bus-tv img,
.mediums__box__bus-stop-tv img {
    width: 100%;
}

.mediums__box__buses p,
.mediums__box__bus-stop p,
.mediums__box__bus-tv p,
.mediums__box__bus-stop-tv p {
    position: absolute;
    float: right;
    bottom: 1rem;

    margin: 0 1.5rem;

    font-family: Gotham-Medium, 'sans-serif';
    font-size: 30px;
    text-transform: uppercase;
}

a.box__link {
    text-decoration: none;
    color: #ffffff;
}

.services-wrapper {
    background-color: #1a1a1a;
    color: #ffffff;

    max-width: 100%;
}

.services__wraper__content {
    text-align: center;
}

.services__content__title {
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-bottom: 50px;
}

.services__content__title span {
    position: relative;

    font-size: 150px;
    font-family: Sansilk, 'sans-serif';
    color: #E4282D;

    align-self: center;
}

.services__content__title h2 {

    margin-top: -110px;

    text-transform: uppercase;
    font-size: 92px;
    font-family: Gotham-Black, 'sans-serif';
    color: #ffffff;
    margin-bottom: 2.5rem;
}


.services-content__wrapper {
    display: flex;
    flex-direction: row;
    column-gap: 6rem;

    width: 80%;

    align-items: center;
    margin: 0 auto;
}


.my-slider-progress {
    background: #ccc;
}

.my-slider-progress-bar {
    background: greenyellow;
    height: 2px;
    transition: width 400ms ease;
    width: 0;
}

.splide__pagination__page.is-active {
    background: #CE181E !important;
}

.splide__pagination {
    bottom: -2rem !important;
    z-index: 0 !important; 
}

.content-slide h4 {
    font-size: 3.125rem;
    font-family: Gotham-Medium, 'sans-serif';

    margin-bottom: 2rem;
}

.content-slide p {
    font-size: 2.2rem;
    font-family: Gotham, 'sans-serif';
    width: 81%;
}

.content-slide.two p,
.content-slide.four p,
.content-slide.five p {
    font-size: 2.2rem;
    font-family: Gotham, 'sans-serif';
    width: 95%;
}

.section1,
.section3 {
    min-height: 100vh;
    background-color: #222;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 50px;
}

/*.head {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    !*height: 100vh;*!*/
/*    align-items: flex-start;*/
/*    !*padding-top: 60px;*!*/

/*    width: 100% !important;*/
/*    height: auto !important;*/
/*    place-content: center;*/
/*    padding: 0 !important;*/
/*}*/

.animation-box__wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    place-content: center;
    gap: 7rem;

    padding: 50px 200px;
    margin: 0 auto;
}

.content-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 400px;
    width: 20%;
    font-size: 40px;
    padding-left: 5em;
}

.text-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 40%;
}

.heading {
    font-size: 21.875rem;
    color: #CE181E;
    font-family: Gotham-Black, 'sans-serif';
}

.gallery-wrapper {
    padding: 200px 0 200px 0;
    background-color: #1a1a1a;
    color: #ffffff;
}

.gallery__wraper__content {
    text-align: center;
}

.gallery__content__title {
    margin-bottom: 150px;
}

.gallery__content__title span {
    position: relative;

    font-size: 150px;
    font-family: Sansilk, 'sans-serif';
    color: #E4282D;
}

.gallery__content__title h2 {

    margin-top: -120px;

    text-transform: uppercase;
    font-size: 92px;
    font-family: Gotham-Black, 'sans-serif';
    color: #ffffff;
    margin-bottom: 2.5rem;
}

.gallery__image {
    width: 100%;
}

.images__wrapper {
    /*display: grid;*/
    /*grid-template-columns: 3fr 3fr 3fr;*/
    /*gap: 1rem;*/

    /*margin-top: 1rem;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 1rem;
}

.gallery__image {
    flex: 1 1 33.3%;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery__image.one {
    flex: 1 1 30%;
}

.gallery__image.two {
    flex: 1 1 40%;
}

.gallery__image.three {
    flex: 1 1 20%;
}


.gallery__image.four {
    flex: 1 1 25%;
}

.gallery__image.five {
    flex: 1 1 35%;
}

.gallery__image.six {
    flex: 1 1 30%;
}

.images__wrapper img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);

    width: 100%;
    height: -webkit-fill-available;

    cursor: pointer;

    height: 40vh;
    object-fit: cover;
    object-position: center;
}

.images__wrapper img:hover,
.images__wrapper img:focus {
    filter: none;
    -webkit-filter: grayscale(0);
}

.en-btn,
.mk-btn {
    color: white;
    text-decoration: none;
}

.en-btn:hover,
.mk-btn:hover {
    color: #CE181E;
}

.active-lng {
    color: #CE181E !important;
}

.splideLogos {
    margin: 150px 0 60px 0;
}

.splideLogosSecound {
    margin-bottom: 150px;
}


ul.splideLogos-list li.splide__slide {
    width: calc(8% - 2rem) !important;
}


ul.splideLogosSecound-list li.splide__slide {
    width: calc(8% - 2rem) !important;
}


img.logos-img {
    width: 100%;
    height: 50px;
}





.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    contain: layout style size;
    pointer-events: none;
    will-change: transform;
    -webkit-transition: opacity .3s, color .4s;
    -o-transition: opacity .3s, color .4s;
    -moz-transition: opacity .3s, color .4s;
    transition: opacity .3s, color .4s;
}

.mf-cursor {
    color: #CE181E;
    display: initial;
}


/* width */
::-webkit-scrollbar {
    width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}


@media only screen and (max-width: 1920px) {
    
    html[lang="mk"] .content-slide p,
    html[lang="mk"] .content-slide.two p,
    html[lang="mk"] .content-slide.three p,
    html[lang="mk"] .content-slide.four p,
    html[lang="mk"] .content-slide.five p {
        font-size: 2.1rem;
        width: 100%;
    }
    html[lang="mk"] .content-slide h4 {
        font-size: 3rem;
    }
   
    
    .text-box {
        width: 50%;
    }

    .content-box {
        width: 30%;
    }

    .content-wrapper {
        /*justify-content: start;*/
        /*padding: 20.5rem 0 0 0;*/
    }

    .title h2 {
        transform: translateY(-40%);
    }


    html[lang="mk"] .title h2 {
        transform: translateY(-60%);
    }
    
    .we-are-maraton__content__text {
        width: 51%;
    }

    .content-slide p {
        width: 81%;
    }

    .content-slide.two p,
    .content-slide.four p {
        width: 100%;
    }

    .services-wrapper {
        padding: 0 0 100px 0;
    }

    .services-content__wrapper {
        width: 75%;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(10% - 2rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(10% - 2rem) !important;
    }
}

@media only screen and (max-width: 1600px) {


    html[lang="mk"] .content-slide p,
    html[lang="mk"] .content-slide.two p,
    html[lang="mk"] .content-slide.three p,
    html[lang="mk"] .content-slide.four p,
    html[lang="mk"] .content-slide.five p {
       font-size: 1.6rem;
        width: 98%;
    }

    html[lang="mk"] .content-slide h4 {
        font-size: 2.2rem;
    }
    
    .content-wrapper {
        width: 100%;
    }

    .landing-content-wrapper {
        bottom: 1.5rem;
    }

    .landing-text {
        text-align: center;
        font-family: Gotham-Light, 'sans-serif';
        font-size: 20px;

        padding: 0 0 1rem 0;

        color: #ffffff;
    }

    .we-are-maraton__content__text {
        width: 64%;
        margin: 0 auto;
    }

    .card-box__text h5 {
        font-family: Gotham-Book, 'sans-serif';
    }

    .we-are-maraton__content__text p {
        width: 100%;
        font-size: 34px;
    }

    .count_up .headline {
        width: 70%;
    }

    .count_up .number h2 {
        font-size: 110px;
    }

    h3.suffix {
        font-size: 110px;
    }

    h3.prefix {
        font-size: 110px;
    }

    h3.suffix span {
        font-size: 70px;
    }

    h3.prefix span {
        font-size: 70px;
    }

    .count_up {
        width: 33.3%;
    }

    .cards-wrapper {
        width: 85%;
    }

    .card-box {
        row-gap: 2rem;
    }

    .card-box__text h5 {
        font-size: 32px;
    }

    .mediums-wrapper {
        padding: 100px 0;
    }

    .mediums__box {
        padding: 0 100px;
    }

    .mediums__boxes__wrapper {
        width: 100%;
    }

    .text-box {
        width: 55%;
    }

    .content-box {
        width: 30%;
    }

    .services-content__wrapper {
        width: 70%;
    }

    .content-slide h4 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .content-slide p,
    .content-slide.two p,
    .content-slide.three p,
    .content-slide.four p,
    .content-slide.five p{
        font-size: 1.7rem;
        width: 84%;
    }

    .heading {
        font-size: 17rem;
        color: #CE181E;
        font-family: Gotham-Black, 'sans-serif';
    }

    .animation-box__wrapper {
        padding: 50px 100px;
    }

    .gallery__content__title {
        margin-bottom: 100px;
    }

    .gallery-wrapper {
        padding: 150px 0;
    }

    .images__wrapper img {
        height: 35vh;
    }

    .content-box {
        font-size: 40px;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(12% - 3rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(12% - 3rem) !important;
    }
}



@media only screen and (max-width: 1366px) {
    .title h2 {
        font-size: 92px;
    }

    .landing-text {
        font-size: 22px;
    }

    .we-are-maraton__content__text {
        width: 65%;
    }

    .we-are-maraton__content__text p {
        width: 100%;
    }

    .count_up .headline {
        width: 70%;
        font-size: 24px;
    }

    .card-box__text h5 {
        font-family: Gotham-Book, 'sans-serif';
        font-size: 30px;
    }

    .heading {
        font-size: 17rem;
    }

    .services-content__wrapper {
        width: 75%;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(14% - 4rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(14% - 4rem) !important;
    }
}


@media only screen and (max-width: 1280px) {
    .services-content__wrapper {
        width: 80%;
    }
}


@media only screen and (max-width: 1024px) {
    html[lang="mk"] .we-are-maraton__content__title h2,
    html[lang="mk"] .mediums__content__title h2,
    html[lang="mk"] .services__content__title h2,
    html[lang="mk"] .gallery__content__title h2
    {
        margin-top: -80px;
    }


    .counter-section {
        padding: 150px 50px;
    }

    .landing-text {
        font-size: 24px;
    }

    .title h2 {
        font-size: 4.375rem;
        line-height: 5rem;

        transform: translateY(-40%);
    }


    html[lang="mk"] .title h2 {
        transform: translateY(-60%);
    }
    
    .we-are-maraton__content__text {
        width: 80%;
    }

    .we-are-maraton__content__title h2,
    .services__content__title h2,
    .mediums__content__title h2,
    .gallery__content__title h2 {
        font-size: 70px;
    }

    .we-are-maraton__content__text p {
        font-size: 2rem;
        width: 100%;
    }

    .count_up .headline {
        width: 90%;
        font-size: 22px;
    }

    .count_up .number h2 {
        font-size: 92px;
    }

    h3.suffix {
        font-size: 92px;
    }

    h3.prefix {
        font-size: 92px;
    }

    h3.prefix span {
        font-size: 70px;
    }

    h3.suffix span {
        font-size: 70px;
    }

    .cards-wrapper {
        grid-template-columns: 50% 50%;
    }

    .card-box__text h5 {
        font-size: 32px;
    }

    .animation-box__wrapper {
        padding: 0 30px;
    }

    .mediums__box {
        padding: 0 60px;
    }

    .services__content__title {
        padding-bottom: 0;
    }

    .content-slide h4 {
        font-size: 2rem;
    }

    .content-slide p,
    .content-slide.two p,
    .content-slide.three p,
    .content-slide.four p,
    .content-slide.five p {
        font-size: 1.5rem;
        width: 100%;
    }

    .heading {
        font-size: 15rem;
    }

    .services-content__wrapper {
        width: 90%;
        column-gap: 4rem;
    }

    .gallery__content__title h2 {
        margin-top: -105px;
    }
    
    .gallery-button__wrapper {
        margin-top: 6rem;
    }
    
    .images__wrapper img {
        height: 20vh;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(19% - 4rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(19% - 4rem) !important;
    }
}


@media only screen and (max-width: 820px) {
    .counter-section {
        padding: 150px 20px;
    }

    .title h2 {
        font-size: 4.375rem;
    }

    .we-are-maraton__wrapper {
        padding: 150px 0;
    }

    .we-are-maraton__content__title h2 {
        margin-top: -105px;
        font-size: 4.375rem;
    }

    .we-are-maraton__content__text {
        width: 80%;
    }

    .we-are-maraton__content__text p {
        font-size: 1.6rem;
    }

    .we-are-maraton__content__button {
        margin-top: 4rem;
    }
    
    a.learn-more__btn {
        font-size: 1.2rem;
    }

    .count_up .headline.days {
        width: 70%;
    }

    .card-box__text h5 {
        font-size: 28px;
    }

    .services__content__title h2 {
        font-size: 70px;
    }

    .services-content__wrapper {
        flex-direction: column;
        row-gap: 2rem;
        column-gap: 0;
    }

    .content-slide h4 {
        font-size: 2.7rem;
        margin-bottom: 2rem;
    }

    .content-slide p,
    .content-slide.two p,
    .content-slide.three p,
    .content-slide.four p,
    .content-slide.five p {
        font-size: 2rem;
        width: 100%;
    }


    .content-slide {
        text-align: center;
    }

    .animation-box__wrapper {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .content-box {
        display: flex;
        flex: 1 1 auto;
        height: 300px;
        align-items: center;
        width: 40%;
    }

    .count_up .headline {
        width: 96%;
        font-size: 20px;
    }

    .count_up .number h2 {
        font-size: 82px;
    }

    h3.suffix {
        font-size: 82px;
    }

    h3.prefix {
        font-size: 82px;
    }
    
    h3.prefix span {
        font-size: 52px;
    }

    .text-box {
        width: 80%;
    }

    .scroll-text {
        top: 0;
        text-align: center;
    }

    .logos-secound.logos {
        margin: 0px 0 120px 0;
    }

    .mediums-wrapper {
        padding: 100px 0;
    }

    .mediums__content__title h2 {
        margin: -110px 0 0 0;
        font-size: 70px;
    }

    .mediums__box {
        padding: 0 40px;
        column-gap: 2rem;
    }

    .splide__pagination {
        bottom: -4rem !important;
    }

    .gallery__content__title h2 {
        font-size: 70px;
        margin-top: -95px;
    }

    .gallery__content__title span {
        font-size: 130px;
    }

    .gallery-wrapper {
        padding: 150px 0 100px 0;
    }

    .gallery-button__wrapper {
        margin-top: 5rem;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(21% - 4rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(21% - 4rem) !important;
    }
}


@media only screen and (max-width: 768px) {
    
    html[lang="mk"] .mediums__box__buses p,
    html[lang="mk"] .mediums__box__bus-stop p,
    html[lang="mk"] .mediums__box__bus-tv p,
    html[lang="mk"] .mediums__box__bus-stop-tv p {
        margin: 0 1rem;
        font-size: 22px;
    }

    html[lang="mk"] .we-are-maraton__content__title span, 
    html[lang="mk"] .mediums__content__title span,
    html[lang="mk"] .services__content__title span,
    html[lang="mk"] .gallery__content__title span {
        font-size: 120px;
    }
    

    html[lang="mk"] .we-are-maraton__content__title h2, 
    html[lang="mk"] .mediums__content__title h2,
    html[lang="mk"] .services__content__title h2, 
    html[lang="mk"] .gallery__content__title h2 {
        margin-top: -70px;
    }
    
    
    .we-are-maraton__content__text p {
        font-size: 1.8rem;
    }
    
    .title h2 {
        font-size: 4.25rem;
        line-height: 4rem;

        transform: translateY(-40%);
    }


    html[lang="mk"] .title h2 {
        transform: translateY(-60%);
    }
    
    .content-box {
        font-size: 25px;
        padding-left: 1em;
    }

    .count_up {
        width: 55%;
    }

    .counter-section {
        flex-direction: column;
        align-items: center;
        row-gap: 4rem;
    }

    .count_up .headline {
        width: 100%;
        font-size: 1.635rem;
    }

    .count_up .number h2 {
        font-size: 100px;
    }

    h3.suffix {
        font-size: 100px;
    }

    h3.prefix {
        font-size: 100px;
    }

    h3.prefix span {
        font-size: 72px;
    }

    h3.suffix span {
        font-size: 72px;
    }
    
    .counter-box-container {
        row-gap: 0;
    }

    .mf-cursor {
        display: none;
    }
}


@media only screen and (max-width: 570px) {

    html[lang="mk"] .we-are-maraton__content__title span,
    html[lang="mk"] .mediums__content__title span, 
    html[lang="mk"] .services__content__title span, 
    html[lang="mk"] .gallery__content__title span {
        font-size: 60px;
    }

    html[lang="mk"] .services__content__title h2 {
        font-size: 2.2rem;
    }
    
    html[lang="mk"] .services__content__title h2 {
        font-size: 2.2rem;
        margin-top: -40px;
    }

    html[lang="mk"] .mediums__content__title h2 {
        font-size: 2.6rem;
        margin-top: -40px;
    }

    html[lang="mk"] .we-are-maraton__content__title h2,
    html[lang="mk"] .gallery__content__title h2 {
        margin-top: -40px;
    }

    html[lang="mk"] .mediums__box__buses p,
    html[lang="mk"] .mediums__box__bus-stop p,
    html[lang="mk"] .mediums__box__bus-tv p,
    html[lang="mk"] .mediums__box__bus-stop-tv p {
        font-size: 22px;
    }
    
    
    /*html[lang="mk"] .footer__content__title h2 {*/
    /*    font-size: 2.2rem;*/
    /*    margin: -100px auto 0 auto;*/
    /*    line-height: 3rem;*/
    
    /*    width: 100%;*/
    /*}*/
    
    /*html[lang="mk"] .footer__content__title span {*/
    /*    font-size: 90px;*/
    /*}*/

    html[lang="mk"] .landing-text {
        width: 70%;
    }

    html[lang="mk"] .content-slide h4 {
        font-size: 1.8rem;
    }
    
    html[lang="mk"] .content-slide p, 
    html[lang="mk"] .content-slide.two p,
    html[lang="mk"] .content-slide.three p, 
    html[lang="mk"] .content-slide.four p, 
    html[lang="mk"] .content-slide.five p {
        width: 100%;
        font-size: 1.3rem;
    }
    
    .navbar {
        width: 100%;
        padding: 1rem 0rem;
    }

    .get-in-touch-btn {
        display: none;
    }

    video#background-video {
        height: 40vh;
    }

    .banner__overlay {
        height: 40vh;
    }

    .content-wrapper {
        height: calc(40vh - 66px);
        padding: 2.5rem 0;
        justify-content: space-between;
        /*padding-top: 2rem;*/
    }

    .counter-section {
        padding: 100px 20px;
    }
    
    .title h2 {
        font-size: 3rem;
        transform: translateY(20%);
    }

    .landing-content-wrapper {
        position: sticky;
        padding: 1rem 0;
    }

    .landing-text {
        font-size: 1rem;
        padding: 0;
    }

    .mousey {
        padding: 5px 10px;
        height: 25px;
    }

    .we-are-maraton__wrapper {
        padding: 0 0 80px 0;
    }

    .we-are-maraton__content__title span {
        font-size: 100px;
    }

    .we-are-maraton__content__title h2 {
        margin-top: -75px;
        font-size: 46px;
    }

    .we-are-maraton__content__text {
        width: 90%;
        justify-items: center;
    }

    
    .we-are-maraton__content__text p {
        font-size: 18px;
    }

    .we-are-maraton__content__button {
        margin-top: 3rem;
    }
    
    a.learn-more__btn {
        font-size: 18px;
    }

    .counter-section {
        flex-direction: column;
        row-gap: 3rem;
        align-content: center;

        margin: 0 auto;

    }
    
    .card-box__icon img {
        width: 45%;
    }

    .card-box__text {
        margin-top: 1rem;
        width: 100%;
    }

    .cards-container {
        padding: 0;
    }


    .card-box__text h5 {
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    .count_up {
        width: 100%;
    }

    .count_up .headline {
        font-size: 20px;
        width: 75%;
    }

    .count_up .number h2 {
        font-size: 82px;
    }

    h3.prefix {
        font-size: 62px;
    }

    h3.suffix {
        font-size: 82px;
    }

    h3.suffix span {
        font-size: 82px;
    }

    
    .cards-wrapper {
        width: 85%;
        grid-template-columns: 50% 50%;

        column-gap: 1rem;
        row-gap: 1rem;
    }

    .card-box {
        padding: 1rem;
        row-gap: 0.5rem;
    }

    .mediums__boxes__wrapper {
        margin: 3rem auto;
    }

    .mediums-wrapper {
        padding: 100px 30px;
    }

    .mediums__content__title span {
        font-size: 6rem;
    }

    .mediums__content__title h2 {
        margin-top: -65px;
        font-size: 2.8rem;

    }

    .mediums__box {
        padding: 0px;
    }

    .mediums__box {
        flex-direction: column;
        margin: 0 0 1rem 0;
        row-gap: 1rem;
    }


    .mediums__box__buses, .mediums__box__bus-stop, .mediums__box__bus-tv, .mediums__box__bus-stop-tv {
        width: 100%;
    }

    .mediums__box__buses p,
    .mediums__box__bus-stop p,
    .mediums__box__bus-tv p,
    .mediums__box__bus-stop-tv p {
        font-size: 24px;
        bottom: 0.5rem;
        margin: 0 1rem;
    }

    .services__content__title {
        padding: 0 20px;
    }

    .services__content__title span {
        font-size: 6rem;
    }

    .services-wrapper {
        padding: 0;
    }

    .services__content__title h2 {
        font-size: 2.8rem;
        margin-top: -65px;
    }

    .services-content__wrapper {
        flex-direction: column;
        text-align: -webkit-center;
        align-items: center;
    }

    .services-content__wrapper {
        width: 96%;
    }

    .content-slide h4 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .content-slide p {
        font-size: 1.3rem;
        width: 100%;
    }

    .splide__pagination {
        bottom: 6rem !important;
    }

    .content-box {
        height: 200px;
        width: 100%;
    }

    .text-box {
        width: 100%;
    }

    .heading {
        width: 100%;
        font-size: 11rem;
    }

    .scroll-text h4 {
        font-size: 1.8rem;
    }

    .scroll-text p {
        font-size: 1.3rem;
    }

    .images__wrapper {
        gap: 0.5rem;
    }

    .gallery-button__wrapper {
        padding-top: 2rem;
    }

    .gallery__content__title {
        margin-bottom: 50px;
    }


    .gallery__content__title span {
        font-size: 5rem;
    }

    .gallery__content__title h2 {
        font-size: 2.4rem;
        margin-top: -60px;
    }

    .logos__second__column {
        padding: 10px 0;
    }

    .logo_items img,
    .logo_items__second__column img {
        height: 30px;
    }

    .partners__wrapper {
        padding: 50px 0 0 0;
    }

    .partners__secound__column__wrapper {
        padding: 0 0 100px 0;
    }

    .images__wrapper img {
        height: 15vh;
    }

    .gallery-wrapper {
        padding: 50px 0 80px 0;
    }

    .gallery__image.one,
    .gallery__image.three {
        flex: 1 1 40%;
    }

    .gallery__image.two {
        flex: 1 1 55%;
    }

    .splideLogos{
        margin: 150px 0 20px 0;
    }
    
    .splideLogosSecound {
        margin-bottom: 50px;
    }

    ul.splideLogos-list li.splide__slide {
        width: calc(33% - 3.3rem) !important;
    }


    ul.splideLogosSecound-list li.splide__slide {
        width: calc(33% - 3.3rem) !important;
    }
}


@media only screen and (max-width: 430px) {
    video#background-video {
        height: 45vh;
    }

    .banner__overlay {
        height: 45vh;
    }

    .landing-content-wrapper {
        position: sticky;
        padding: 1rem 0 0 0;
    }

    .count_up .number h2 {
        font-size: 72px;
    }

    h3.prefix {
        font-size: 72px;
    }

    h3.suffix {
        font-size: 72px;
    }
    
    h3.prefix span {
        font-size: 50px;
    }
    h3.suffix span {
        font-size: 50px;
    }

    .content-wrapper {
        height: calc(45vh - 50px);
    }

    .title h2 {
        font-size: 2.5rem;
        transform: translateY(0%);
        line-height: 3rem;
    }
    
    html[lang="mk"] .title h2 {
        transform: translateY(50%);
    }

    
    .mediums-wrapper {
        padding: 100px 30px 50px 30px;
    }

    .content-slide h4 {
        font-size: 1.5rem;
    }

    .services__content__title h2,
    .mediums__content__title h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .services-content__wrapper {
        row-gap: 1rem;
    }

    .content-slide p,
    .content-slide.two p,
    .content-slide.three p,
    .content-slide.four p,
    .content-slide.five p {
        font-size: 1.3rem;
    }

    .card-box__text h5 {
        font-size: 1.1rem;
    }

    .splide__pagination {
        bottom: -1rem !important;
    }

    .gallery-wrapper {
        padding: 100px 0 50px 0;
    }

    .logos {
        margin: 200px 0 50px 0;
    }

    .logos-slide img,
    .logos-slide-secound img {
        height: 30px;
    }
}

@media only screen and (max-width: 420px) {
    .navbar {
        width: 100%;
    }

    .get-in-touch-btn {
        display: none;
    }

    .title h2 {
        font-size: 2.7rem;
        line-height: 3rem;
        transform: translateY(0%);
    }

    html[lang="mk"] .title h2 {
        transform: translateY(50%);
        font-size: 3rem;
    }
  
    .landing-content-wrapper {
        position: sticky;
    }

    .landing-text {
        font-size: 16px;
        padding: 0;
    }

    .mousey {
        width: 2px;
        padding: 5px 12px;
        height: 28px;
    }

    .we-are-maraton__wrapper {
        padding: 0 0 80px 0;
    }

    .gallery-wrapper {
        padding: 100px 0 50px 0;
    }

    .count_up .headline {
        width: 70%;
    }
}


@media only screen and (max-width: 390px) {
    .heading {
        font-size: 10rem;
    }

    html[lang="mk"] .title h2 {
        transform: translateY(80%);
    }
    
    .title h2 {
        font-size: 2.5rem;
        transform: translateY(20%);
        line-height: 3rem;
    }
    
    .card-box {
        padding: 0.7rem;
        row-gap: 0.5rem;
    }

    .we-are-maraton__content__text p {
        font-size: 1rem;
    }

    a.learn-more__btn {
        font-size: 1rem;
    }
    
    .card-box__text h5 {
        font-size: 1rem;
    }

    .count_up .headline {
        font-size: 18px;
    }
    
    .mediums-wrapper {
        padding: 100px 30px 50px 30px;
    }

    .content-slide h4 {
        font-size: 1.4rem;
    }

    .services__content__title h2,
    .mediums__content__title h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .services-content__wrapper {
        row-gap: 1rem;
    }

    .content-slide p,
    .content-slide.two p,
    .content-slide.three p,
    .content-slide.four p,
    .content-slide.five p {
        font-size: 1.2rem;
    }

    .gallery-wrapper {
        padding: 130px 0 50px 0;
    }

    .logos {
        margin: 200px 0 50px 0;
    }

    .logos-slide img,
    .logos-slide-secound img {
        height: 30px;
    }
}

@media only screen and (max-width: 375px) {
    html[lang="mk"] .we-are-maraton__content__title span, 
    html[lang="mk"] .mediums__content__title span,
    html[lang="mk"] .services__content__title span,
    html[lang="mk"] .gallery__content__title span {
        font-size: 60px;
    }
    html[lang="mk"] .mediums__box__buses p, html[lang="mk"] .mediums__box__bus-stop p, html[lang="mk"] .mediums__box__bus-tv p, html[lang="mk"] .mediums__box__bus-stop-tv p {
        font-size: 20px;
        margin: 0 0.5rem;
    }
    
    html[lang="mk"] .services__content__title h2, 
    html[lang="mk"] .we-are-maraton__content__title h2,
    html[lang="mk"] .gallery__content__title h2 {
        font-size: 2.1rem;
        margin-top: -35px;
        
    }

    html[lang="mk"] .mediums__content__title h2 {
        font-size: 2.3rem;
        margin-top: -35px;
    }

    html[lang="mk"] .content-slide h4 {
        font-size: 1.6rem;
    }

    html[lang="mk"] .content-slide p, 
    html[lang="mk"] .content-slide.two p, 
    html[lang="mk"] .content-slide.three p, 
    html[lang="mk"] .content-slide.four p,
    html[lang="mk"] .content-slide.five p {
        width: 100%;
        font-size: 1.2rem;
    }

    .we-are-maraton__content__title h2 {
        margin-top: -55px;
        font-size: 40px;
    }

    .we-are-maraton__content__title span {
        font-size: 70px;
    }

    .mediums__content__title span {
        font-size: 70px;
    }
    
    .mediums__content__title h2 {
        margin-top: -50px;
    }

    .services__content__title span {
        font-size: 70px;
    }

    .services__content__title h2 {
        margin-top: -50px;
    }
    
    .content-wrapper {
        height: calc(50vh - 66px);
    }

    video#background-video {
        height: 50vh;
    }

    .banner__overlay {
        height: 50vh;
    }

    .title h2 {
        font-size: 2.2rem;
        transform: translateY(0%);
        line-height: normal;
    }
    html[lang="mk"] .title h2 {
        transform: translateY(30%);
    }
    
    .landing-content-wrapper {
        padding: 0.5rem 0;
    }
    
    html[lang="mk"] .landing-content-wrapper {
        padding: 2rem 0;
    }

    
    .landing-text {
        font-size: 0.8rem;
        width: 85%;
    }

    .mousey {
        width: 0;
        padding: 4px 12px;
        height: 28px;
    }

    .card-box__text h5 {
        font-size: 0.9rem;
    }

    .we-are-maraton__wrapper {
        padding: 30px 0 80px 0;
    }



    .gallery-wrapper {
        padding: 130px 0 50px 0;
    }
}

.menu__item.active {
    color: #CE181E;
}