@import 'https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap';

* {
    box-sizing: border-box;
}
*,
*:focus,
*:hover,
*:active,
*:before,
*:after {
    outline: 0;
}
p, h1, h2, h3, h4 {
    margin: 0;
}
*::-moz-selection {
    background: #29beec6b;
    color: #fff;
}
*::selection {
    background: hsl(224, 87%, 65%);
    color: hsl(224, 87%, 65%);
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}
html {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
body {
    color: #fff;
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #1d1d1d;
    font-family: montserrat, sans-serif;
    -webkit-font-smoothing: antialiased;
    vertical-align: baseline;
    padding: 0;
}
a {
    text-decoration: none;
    color: var(--secondary-color);
    border: 0;
    vertical-align: baseline;
    cursor: pointer;
}

.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.section-main {
    margin: 100px 0; /* Замените 20px на желаемое значение отступа */
}

footer {
    min-width: 100%;
    position: relative;
    display: block;
}

.navbar-in,
.header-in,
.section-in,
.footer-in {
    width: 100%;
    padding-left: 40px;
    height: 100%;
    margin-left: auto;
    max-width: 1250px;
    position: relative;
    z-index: 5;
    padding-right: 40px;
    margin-right: auto;
}

nav {
    position: absolute;
    height: 100px;
    width: 100%;
    z-index: 5;
    background: #1d1d1d;
}

header {
    background: #fff;
    position: relative;
    padding-top: 200px;
    
}

/*header:before{z-index:2;background:url(../images/wave-ds.svg) no-repeat;content:"";position:absolute;background-size:cover;background-position:center top;bottom:4px;left:0;height:140px;width:100%}
header:after{background:url(../images/wave.svg) no-repeat;content:"";position:absolute;background-size:cover;background-position:center top;bottom:0;left:0;height:140px;width:100%;z-index:3}
*/
.hbg {
    background: #fff url(../images/cubetime_background.png) no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

.hbg:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #297cfa6b;
    backdrop-filter: blur(5px);
    left: 0;
    top: 0;
}
.header-in {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    margin-top: 80px;
    padding-bottom: 300px;
}

.header-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 25px;
}

.header-img img {
    width: 400px;
}


.navbar-l {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.navbar-in {
    display: flex;
    align-items: center;
}

.navbar-link {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    opacity: .8;
    margin-right: 20px;
    border-radius: 5px;
    position: relative;
    padding: 8px 14px;
    transition: .15s ease-in-out;
}

.navbar-link.active {
    opacity: 1;
    background: linear-gradient(to right, hsl(224, 87%, 65%), hsl(224, 87%, 65%));
    color: #fff;
}

/*.navbar-link.active:before {
    content: "";
    position: absolute;
    left: -4px;
    height: 18px;
    width: 8px;
    background: hsl(224, 87%, 65%);
    box-shadow: 0 0 0 2px hsl(224, 88%, 60%);
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: 20px;
}*/

.navbar-link:hover {
    opacity: 1;
}

.navbar-r {
    display: flex;
    align-items: center;
}

.nav-r-link:hover i {
    transform: scale(1.1);
}

.nav-r-link i {
    transition: .1s ease-in-out;
}

.nav-r-link {
    font-size: 20px;
    margin-right: 20px;
    color: #fff;
    border-radius: 100px;
    background: hsl(224, 87%, 65%);
    transition: .2s ease-in-out;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    position: relative;
}

.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
    transition: .2s ease-in-out;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card-header {
    height: 200px;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 20px;
    padding-bottom: 15px;
}

.news-card-header:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, hsla(224, 87%, 65%, 0.3), transparent);
}

.news-card-header h4 {
    color: #fff;
    position: relative;
}

.news-card-in {
    padding: 15px 20px;
    display: block;
    position: relative;
}
    
.news-card-in h1{margin-bottom:12px;color:#313131}.news-card-in p{line-height:22px;font-size:15px;font-weight:500;color:#6e6e6e;letter-spacing:.5px}.news-card-footer{padding-left:20px;padding-bottom:15px;width:fit-content;color: hsl(224, 87%, 65%);font-size:15px;font-weight:500;text-transform:uppercase;display:flex;align-items:center;margin-top:auto}.news-card-footer:hover i{margin-right:10px}.nav-r-link:hover{background:hsl(224, 87%, 65%)}
.news-card-footer i{color:hsl(224, 87%, 65%);margin-right:6px;font-size:16px;transition:.2s ease-in-out}footer{height:100px;width:100%;z-index:5;background:#171b1d;margin-top:90px;border-top:5px solid hsl(224, 87%, 65%)}.footer-in{display:flex;align-items:center;justify-content:center}.footer-p{color:#fff;font-size:15px;font-weight:500}p.footer-p.l{margin-right:auto}.footer-p a{color:hsl(224, 87%, 65%)}.news-cont{display:block;width:100%;position:relative}.news-image{width:100%;height:400px;background-size:cover;background-position:center;border-radius:10px;box-shadow:4px 4px hsl(224, 87%, 65%)}.news-header{margin:40px 0 36px;position:relative}.news-header h1{color:#101010;font-size:2.5em}.news-header span{font-size:16px;font-weight:500;color:#6e6e6e;letter-spacing:.5px}.news-in{display:block;position:relative}.news-in p{font-size:16px;font-weight:500;color:#404040;letter-spacing:.5px;line-height:25px;margin:15px 0}.news-in h1{margin:25px 0;font-size:1.7em}.news-in ul{font-size:16px;padding:0 18px}.news-in ul li{font-size:17px;line-height:26px;font-weight:500;letter-spacing:.5px}
.header-s{display:flex;align-items:center;cursor:pointer}
.header-s-i{background:#fffbfa40;height:50px;width:50px;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out}
.header-s-i.l{margin-left:15px}.header-s-i.r{margin-right:15px}.header-s-i i{font-size:27px;color:#fff}.header-s-i.l i{height:22px}
.header-s-c{transition:.2s ease-in-out;display:flex;flex-direction:column}.header-s-c.l{text-align:right}.header-s-c.r{text-align:left}
.header-s-c h2{color:#ffffff;text-shadow:3px 2px 5px #5a37289c}.header-s-c h2 span{color:#fff}.header-s-c p{color:#fff;font-size:14px;font-weight:600}
.header-s.r:hover .header-s-c{transform:translateX(5px)}.header-s.l:hover .header-s-c{transform:translateX(-5px)}

.mobile-nav {
    display: none; /* По умолчанию скрываем навигацию */
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;

}

.mobile-nav-link {
    display: flex; /* Используем flex для центрирования содержимого */
    flex-direction: column; /* Вертикальное расположение иконки и текста */
    justify-content: center; /* Центрируем содержимое по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
    background-color: #1d1d1d; /* Цвет фона кнопки */
    color: #ffffff; /* Цвет текста */
    width: 65px; /* Ширина кнопки */
    height: 100px; /* Высота кнопки */
    border-radius: 50%; /* Делаем кнопки круглыми */
    text-decoration: none; /* Убираем подчеркивание */
    transition: background-color 0.3s; /* Плавный переход для изменения цвета фона */
}

.mobile-nav-link i {
    font-size: 20px; /* Размер иконки */
    margin-bottom: 5px; /* Отступ между иконкой и текстом */
}

.mobile-nav-link span {
    font-size: 12px; /* Размер текста */
    text-align: center; /* Центрируем текст */
}

.mobile-nav-link:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Цвет фона при наведении */
}

@media screen and (max-width:1000px)
{
    .header-s { display: none; }
    .navbar-link { display: none; }
    .navbar-in, .header-in, .section-in, .footer-in { padding-right: 20px; padding-left: 20px; }
    
    .navbar-links {
        display: none; /* Скрываем обычное меню на мобильных устройствах */
    }
    
    .mobile-nav {
        display: flex; /* Показываем мобильное меню на устройствах меньше 1000px */
    }

    .header-img img {
        width: 350px; /* Уменьшите ширину логотипа для мобильных устройств */
        transition: transform 0.3s ease; /* Плавный переход для трансформации */
    }

    .news-grid {
        grid-template-columns: auto;
    }

    .footer-in {
        text-align: center;
        flex-direction: column;
    }


}