@import "./fonts.css";


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

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

:root {
    --btnBg: #008EB0;
    --btnHover: #0e2350;
    --elBg: #0a7777;
    --blue: #003654;
    --green: #2e5728;
    --tera: #b14a04;
    --grey: #d7d8da;
    --nexus_blue: #0885c8;
    --nexus_orange: #f49914;
    --nexus_green: #0a9748;

}

body {
    font-family: 'Montserrat';
    font-weight: 400;
}

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

.header__nav-logo .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo__left-img{
    height: 150px;
}
.logo__right-img{
    width: 400px;
}

.header__nav-img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
}

.header__nav .container {
    position: relative;
}

.header__nav-list {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;


}

.header__nav-links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.header__nav-link-active{
    font-weight: 700;
    color: var(--nexus_orange);
}

/* Скрыть меню по умолчанию на узких экранах */
.header__nav-list.hidden {
    display: none;
}

.header__nav-link.hidden2 {
    display: block;
}

/* Кнопка управления меню */
.menu-toggle {
    font-size: 16px;
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    background: transparent;
    color: #fff;
    border: none;
    padding: 3px;
    cursor: pointer;
}

.menu-toggle2 {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 100px;
    z-index: 10;
    background: transparent;
    color: #fff;
    border: none;
    padding: 3px;
    cursor: pointer;
}

.header__nav-link {
    color: white;
    font-size: 22px;
}

.header__nav-link:hover {
    color: #ffc354;
    /* Цвет текста */
}

.header__nav-link-active{
    font-weight: 700;
    color: var(--nexus_orange);
}

/* Chart */
.chart__desc span{
color: blue;
font-weight: 700;
font-style: italic;

}


.orgChart__work {
    margin-top: 50px;
    margin-left: 20%;
}

.special-class {
    color: var(--nexus_blue) !important;
}

/* sub menu */
.submenu {
    margin: 20px 0;

}

.submenu__list{
display: flex;
justify-content: start;
align-items: center;
}

.submenu__list a {
    cursor: pointer;
    padding: 10px;
    box-shadow: rgba(149, 157, 165, 0.4) 5px 8px 10px;
    font-size: 16px;
    color: #000;
}


.submenu__list a:hover {
    background: var(--blue);
    color: white;
}


.sub__active {
    background: var(--blue) !important;
    color: white !important;
}


/* Main */

.activ__menu{
    display: block;
}

.main__top {
    padding: 20px 0;
}

.main__top-title{
    margin-bottom: 30px;
    color: var(--nexus_blue);
    font-size: 30px;
}

.main__top-desc {
    margin-bottom: 30px;
}

.main__top-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.main__item {
    border: 1px solid var(--blue);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start ;
    align-items: center;
    gap: 10px;
    text-align: center;
    width: 100%;
    height: 280px;
    padding: 20px 5px;

}

.main__item:hover {
    background-color: rgb(241, 241, 241);
}

.main__item img {
    width: 100px;
}
.main__item p {
   font-size: 14px;
}

.main__workPacket {
    padding: 20px 0 30px 0;
}

.main__workPacket-title {
    margin-bottom: 20px;
    margin-top: 40px;
}

.main__workPacket-title2 {
    margin-bottom: 20px;
}

.main__workPacket-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}


.workPacket__item {
    position: relative; /* Важно для абсолютного позиционирования псевдоэлемента */
    border: 1px solid #d3d3d3;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    text-align: center;
    width: 100%;
    height: 370px;
    overflow: hidden; /* Скрываем лишнее */
    transition: transform 0.3s; /* Плавное увеличение */
}


.workPacket__item:hover {
    transform: scale(1.05);
    cursor: pointer;
}

/* Синий фон с текстом */
.workPacket__item::after {
    content: attr(data-hover-text); /* Берем текст из data-hover-text */
    position: absolute;
    bottom: -150px; /* Изначально скрыт */
    left: 0;
    width: 100%;
    height: 150px;
    background-color: #113d64;
    color: white;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    transition: bottom 0.3s ease; /* Анимация выезда */
    
}

/* При наведении выезжает синий фон */
.workPacket__item:hover::after {
    bottom: 0; /* Синий фон появляется */
}

.workPacket__item img {
    width: 150px;
}
.workPacket__item2 img {
    width: 130px;
}

.main__workPacket-title, .main__workPacket-desc {
    color: #000;
}

/* Structure */


.main__workPacket-list2{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 15px;
}
.workPacket__item2{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between ;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    text-align: center;
    width: 100%; 
}

.wp__structure-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 85px;
    background-color: #0e2350;
    color: white;
    font-weight: 700;
    padding: 5px;
}

.wp__active{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    background-color: #ececec;
    padding: 10px 0;
    width: 100%;
}
.wp__active-org span{
    color: blue;
}
.wp__active-org2 span{
    color: orange;
}

.workPacket__item2 img{
    margin-top: 20px;
}


.wp__active p{
    font-weight: 700;
    color: #000;
}

.wp__active-desc{
    font-size: 13px;
    font-weight: normal !important;
    
}
.wp__active-link:hover{
    background-color: #d4d4d4;
}
.legend{
   margin: 15px 0;
}

.tips span{
    color: blue;
    font-weight: 700;
}
.tips2 span{
    color: orange;
    font-weight: 700;
}

.lit1{
    color: blue;
}
.lit2{
    color: orange;
}


/* WP */
.wp__item{
    margin-bottom: 20px;
    border-bottom: var(--grey) 1px solid;
}

.wp__main-title{
    font-size: 32px;
    color: var(--nexus_blue);
}
.wp__main-desc{
    margin-top: 20px;
    font-size: 24px;
    color: var(--nexus_orange);
}

.wp__desc-lit{
    font-size: 15px;
    margin-bottom: 30px;
    font-style: italic;
}

.wp__title{
margin-top: 40px;
margin-bottom: 10px;
color: var(--blue);
}
.wp__desc{
    margin: 20px 0;
    font-weight: 700;
    font-size: 22px;
}

.wp__desc-p{
    margin-bottom: 20px;
    font-size: 22px;
}
.wp__ul{
 list-style: disc; 
   list-style-position: inside;
   margin-bottom: 20px;
}
.wp__ul ul{
 list-style: disc; 
   list-style-position: inside;
}
.wp__ul li{
    padding-left: 40px; 
    text-indent: -20px;
    margin-bottom: 10px;
}




/* news */

.main__news {
    background-color: rgb(241, 241, 241);
    padding: 20px 0;
}


.main__news-desc {
    margin-bottom: 30px;
}

.main__news-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.news__item {
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: center;
    width: 100%;
    height: 400px;
    margin-bottom: 10px;
    padding: 10px;
}

.news__item:hover {
    background-color: white;
}

.news__img{
width: 350px;
height: 250px;
}

.news__img img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.news__item h2{
font-size: 12px;
color: #000;
text-transform: uppercase;
}

.news__item-all{
display: block;
 color: var(--btnHover);
 font-weight: 700;
 text-align: right;
}
.news__item-data{
transform: translateX(-70%);
color: var(--elBg);
}


/* about    */


.about__title {
    font-size: 28px;
    margin: 20px 0;
}

.about__desc {
    font-size: 20px;
    margin: 10px 0;
}


/* Publications */
.publications__title{
    font-size: 32px;
    color: var(--btnBg);
}
.publications__list h3{
    margin: 20px 0;
    font-size: 28px;
}
.publications__list a{
    color: var(--blue)
}
.publications__list a:hover{
    color: var(--elBg);
}
.publications__list-box{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 30px;
    border-bottom: #000 1px solid; 
}
.publications__list-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pub11{
    width: 300px;
    height: 450px;
}

/* Events */
.events{
    margin: 30px 0;

}

h3.events {
    margin: 20px 0;
    font-size: 28px;
}

.events__list{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.events__title{
    font-size: 32px;
    color: var(--btnBg);
}


.events__item{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    width: 550px;
    height: 500px;

}
.events__item:hover{
    transform: scale(1.02);
}
.events__item-block{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.events__item-title{
    margin: 5px 0;
    color: #000;
 }
.events__item-title:nth-child(1){
    margin: 5px 0;
    color: var(--elBg);
 }

 .events__img{
    width: 500px;
    height: 300px;
    overflow: hidden;
}

.events__item-img{
width: 100%;
}
.events__list{
    margin-top: 20px;
}



/* FOOTER */

.footer {
    background: #979797;
    padding: 20px 0;
    margin-top: 25px;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.footer_h4 {
    color: #FFF;
    font-weight: 500;
    font-size: 24px;
}

.footer__desc {
    color: #FFF;
    margin-top: 15px;
}

.footer__desc a {
    color: #FFF;
    margin-bottom: 2px;
    line-height: 100%;
}

.footer__desc p {
    margin: 10px 0;
}

.footer_right-img{
    width: 600px;
}