@font-face {



    font-family: 'Montserrat-Medium';

    src: url(../fonts/Montserrat-Medium.ttf);

}

@font-face {

    font-family: 'GT-Eesti-Pro-Display-regular';

    src: url(../fonts/gteestiprodisplay_regular.otf);

}



@font-face {

    font-family: 'GT-Eesti-Pro-Display-thin';

    src: url(../fonts/gteestiprodisplay_thin.otf);

}

@font-face {

    font-family: 'GT-Eesti-Pro-Display-bold';

    src: url(../fonts/gteestiprodisplay_bold.otf);

}



@font-face {

    font-family: 'GT-Eesti-Pro-Display-medium';

    src: url(../fonts/gteestiprodisplay_medium.otf);

}



@font-face {

    font-family: 'Montserrat-bold';

    src: url(../fonts/Montserrat-Bold.ttf);

}



@font-face {

    font-family: 'Montserrat-regular';

    src: url(../fonts/Montserrat-Regular.ttf);

}



@font-face {

    font-family: 'Montserrat-Black';

    src: url(../fonts/Montserrat-Black.ttf);

}


html,
body {
    background-color: #00000000;
    font-family: 'Montserrat-Medium';
    height: 100%;
    margin: 0;
    padding: 0;


}

:root {
    --white: aliceblue;
    --gray: #1a1a18;
    --background: #f5f5dc;
    --background2: #faebd7;
    --fon1: #1420DF;
    --fon2: #F700B6;
}

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


.grid_index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 108px 1fr 250px;
    grid-template-areas:
        "header"
        "main"
        "footer"
    ;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

/* Главная картинка */
.full_screen {

    position: relative;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}

.full_screen_body {

    z-index: 2;
    position: relative;

    min-height: 100vh;


}



.full_screen_menu {}



.full_screen_image {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* Блок с галвной надписью направления*/

.full_screen_body h3 {
    font-family: GT-Eesti-Pro-Display-bold;
    color: white;
    font-size: 170px;
}


.h3_main {
    position: absolute;
    width: 170px;
    top: 15%;
    left: 6%;
    z-index: 4;

}

.h3_main_2 {
    position: absolute;
    width: 170px;
    top: 35%;
    left: 20%;
    z-index: 4;
}

.h3_main_3 {
    position: absolute;
    width: 170px;
    top: 55%;
    left: 6%;
    z-index: 4;
}

.h3_stroke_1 {
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px white;
    z-index: 3;
    width: 170px;
    top: 17%;
    left: 5.3%;
    z-index: 3;


}

.h3_stroke_2 {
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px white;
    z-index: 3;
    width: 170px;
    top: 37%;
    left: 19%;
    z-index: 3;

}

.h3_stroke_3 {
    position: absolute;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 5px white;
    z-index: 3;
    width: 170px;
    top: 57%;
    left: 5.3%;
    z-index: 3;

}

/* Блок со всей информацией */

.all_information {
    height: 920px;
    background: linear-gradient(135.00deg, rgb(247, 0, 182) 0%, rgb(50, 25, 240) 100%);
}

/* Надпись "О КЛУБАХ" */

.title_PMK {
    display: flex;
    justify-content: end;
    align-items: center;
}

.title_PMK,
.title_PMK2 h3 {
    font-family: GT-Eesti-Pro-Display-bold;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px white;
    font-size: 200px;
    padding: 0;
}

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

/* Описание о пмк */
.text_description {
    max-width: 1440px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.text_description p {
    font-family: GT-Eesti-Pro-Display-regular;
    font-size: 40px;
    color: white;
    text-align: justify;
    padding: 0 40px 0 40px;
}

/* Числовые показатели пмк */
.number_PMK {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    grid-gap: 20px;
    margin: 0 auto;
    max-width: 1440px;
    padding-top: 40px;
}

.number_PMK span {
    font-size: 44px;
    color: white;
    font-family: GT-Eesti-Pro-Display-bold;
}

.number_PMK p {
    font-size: 20px;
    color: white;
    font-family: GT-Eesti-Pro-Display-bold;
}

.number_PMK .bottom {
    border-bottom: 4px solid #5696FF;
    margin-bottom: 5px;
}


/* 4й блок со слайдером и текстом*/

.slider_map {
    background: linear-gradient(45.00deg, rgb(247, 0, 182) 0%, rgb(50, 25, 240) 100%);
    height: 100vh;
}


.animation_line,
.animation_line2 {

    overflow: hidden;

}




.animation_line div {

    animation: running-text 45s linear infinite;

}



.animation_line2 div {

    animation: running-text2 45s linear infinite;

}



.text {

    display: inline-block;

    padding: 15px;

    color: #fff;

    text-align: center;

    font-size: 30px;

}



@keyframes running-text {

    0% {

        transform: translateX(100%);

    }



    100% {

        transform: translateX(-100%);

    }



}



@keyframes running-text2 {

    0% {

        transform: translateX(-100%);

    }



    100% {

        transform: translateX(100%);

    }



}

/* Карточки с клубами */

.cards {

    display: grid;

    grid-template-columns: repeat(1, 650px);

    grid-template-rows: 1fr;

    max-width: 1440px;

    grid-gap: 40px;

    margin: 0 auto;

    justify-content: left;






}



.card_direction {

    padding: 50px 0 50px 0;


}



.card_direction_1 {

    width: 650px;
    height: 320px;

    border-radius: 40px;
    box-shadow: 0 0 1rem #23135C;
    background: rgb(30, 19, 87, .3);
    backdrop-filter: blur(3px);
    position: relative;
    z-index: 3;
}



.cards2 {

    display: grid;

    grid-template-columns: repeat(1, 650px);

    grid-template-rows: 1fr;

    max-width: 1440px;

    grid-gap: 40px;

    margin: 0 auto;
    color: white;

    justify-content: right;
}





.margin {

    padding-top: 30px;

}



/* Бокс для позиционирования абсолюnнх обьектов, нужно для нижних карточек */

.ramka {

    position: relative;
    /* display: inline-block; */



}

.color_blue {}



.color_blue h3 {

    font-size: 19px;
    color: white;
    display: inline-block;

}



.title1 {

    position: absolute;

    top: 10%;

    left: 6%
}

.title1 h3{
    font-size: 26px;
}


.title2 {

    position: absolute;

    top: 27%;

    left: 5%
}

.title3 {
    position: absolute;

    top: 40%;

    left: 5%
}

.card_direction_icon {

    background-image: url(../image/SVG/walpepper/vector.svg);

    background-position: 100% 70%;

    background-repeat: no-repeat;

    background-size: 500px;



}





.direction_btn {

    background: rgb(40, 68, 115, .5);

    width: 265px;

    height: 58px;

    position: absolute;

    top: 74%;

    left: 10%;
    border: 1px solid rgb(40, 68, 115);
    border-radius: 16px;

    justify-content: center;

    align-items: center;

    display: flex;

    font-family: GT-Eesti-Pro-Display-bold;

    font-size: 22px;

    color: white;
}



.direction_btn:hover {

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid white;

    color: white;

}


.color_green {}



.card_direction_icon5 {

    background-image: url(../image/SVG/DIRECTIONS_LOGOS/GAZETA.svg);

    background-position: 90% 75%;

    background-repeat: no-repeat;

    background-size: 150px;

}



.color_green h3 {

    font-size: 20px;



}



.title_gazeta {

    position: absolute;

    top: 10%;

    left: 6%
}

.title_gazeta h3{
    font-size: 26px;
}


.title_gazeta2 {

    position: absolute;

    top: 27%;

    left: 5%
}

.title_gazeta3 {

    position: absolute;

    top: 40%;

    left: 5%
}

/* картинки на карточках */

.card_direction_icon_pokolenie{
    background-image: url(../image/SVG/walpepper/pokolenie.svg);

    background-position: 100% 70%;

    background-repeat: no-repeat;

    background-size: 500px;
}

.card_direction_icon_rassvet{
    background-image: url(../image/SVG/walpepper/RASSVET.svg);

    background-position: 100% 70%;

    background-repeat: no-repeat;

    background-size: 250px;
}

.card_direction_icon_aviator{
    
}

.card_direction_icon_geodezist{

}

.card_direction_icon_youbileyniq{
    background-image: url(../image/SVG/walpepper/YOUB.svg);

    background-position: 260% 70%;

    background-repeat: no-repeat;

    background-size: 500px;
}