body {
        font-family: 'Lora', sans-serif;
        font-size: 14px;
        font-weight: 400;
        
        background: linear-gradient(to top, #002e4bc4, #002e4bc4), 
        url("../img/bg.png");
        background-repeat: repeat;
        background-position: center;
        background-size: 15%;
        color: #1e1e1e;
        line-height: 24px;
        /* background-color: #002E4B; */
        margin: 0;
        padding: 0;
    
    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }


    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
    }

    p {
        margin: 0 0 10px;
    }

    .page {
        max-width: 1260px;
        margin: 0 auto;
        background: #ffffff;
    }

    .container {
        width: 100%;
        
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        
    }

    .main__inner{
        position: relative;
        overflow: hidden;
        min-height: 100%;
    }
    .prealoader-round{
        background-color: #f1f1f1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        z-index: 10;
        border-radius: 50%;
        transform: scale(0);
    }

    /*HEADER
    =====================*/

    #header {
        width: 100%;
    }

    .nav_top {
        background-color: #035e97;
    }

    .nav_top .offer_text {
        padding: 10px;
        text-align: center;
        color: #FFF;
        font-size: 16px;
    }
    .header-contact {
        line-height: initial;
        padding: 10px 0 7px;
        min-height: 40px;
        text-transform: capitalize;
        border-bottom: 1px solid #ebebeb;
    }

    .header-contact__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

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

    .contact__item{
        display: flex;
        align-items: center;
        margin-left: 20px;
    }

    .serviceicon__header-top--noborder {
        margin-right: 5px;
    }

    .header_logo {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }

    .logo__img {
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
       
    }

    .header-top {
        font-size: 20px;
        color: #002E4B;
        padding: 5px 0;
        font-weight: 600;
        text-align: center;
        border-top: 1px solid rgba(3, 94, 151, 0.363);
        border-bottom: 1px solid rgb(3, 94, 151, 0.363);
    }


    .row {
        display: flex;
        justify-content: center;
    }

    .item__header-top {
        display: flex;
    
        font-size: 20px;
        color: #002E4B;
        font-weight: 600;
        align-items: center;
        margin-left: 10px;
    
    }

    .servicetv__item {
        display: flex;
        justify-content: center;
        width: 100%;
        border: 1px solid #9cd3f5;
        align-items: center;
        text-align: center;
        
        align-content: center;
        border-radius: 6px; 
        padding: 10px 30px;
        text-decoration: none;
    }



    .serviceicontv__svg {
        width: 70px;
        height: 70px;
        fill: #035e97;
    }


    .servicetv__title {
        margin-left: 10px;
        color: #000;
        align-items: center;
        
    }

    .servicetv__item:hover {
        .serviceicontv__svg{
            fill: #002E4B;
        }
        .servicetv__title{
            color: #002E4B;
            font-weight: 600;
            
        }
        
        
    }
    .servicetv__item:hover {
        box-shadow: 0 0 0 2px rgba(3, 94, 151, 0.5);
    }



    .icon__header-top {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .serviceicon__header-top {
        display: flex;
        width: 50px;
        height: 50px;
        border: 2px solid #035e97;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        transition: background .1s linear;
    }
    

    .serviceicon__header-top:hover {
        background-color: #035e97;
        transition: background .2s linear;
        .serviceicon__svg--header-top{
            fill: #fff;
            transition: background .2s linear;
        }
        
    }

    .serviceicon__svg--header-top {
        width: 30px;
        height: 30px;
        fill: #035e97;
    }

    .header-top-inner {
        
        align-items: center;
        /* position: absolute; */
        margin-top: 10px;
    }

    .nav__list {
        display: flex;
        justify-content: center;
        width: 100%;
        list-style-type: none;
        text-transform: uppercase;
        margin: 0;
    }

    .nav__link {
        display: block;
        width: 100%;
        padding: .25rem 1rem;
        clear: both;
        font-weight: 500;
        color: #002E4B;
        text-align: inherit;
        text-decoration: none; 
        white-space: nowrap;
        background-color: transparent;
        border: 0;
    }

    .nav__link:hover {
        color: #FFF;
        background-color: #035e97;
    }





.nav__item:hover .subnav {
    display: block;

}

.nav__item:hover .has-subnav {
        border-color: #ffffff 
}


.has-subnav {
    position: relative;
}

.has-subnav:after {
    content: "";
    display: block;
    margin-top: -2px;
    margin-left: 10px;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #035e97 
    transparent
    transparent
    transparent;
    position: absolute;
    top: 50%;
    right: 0;
}

.subnav {
    width: 170px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #035e97;
    padding: 10px 0;
    z-index: 1000;
    list-style-type: none;
}

.subnav__block {
    position: absolute;
    top: 100%;
    left: 0;
    width: 170px;
    background-color: #035e97;
    padding: 10px 0;
    
    overflow: hidden;
}


.subnav__link {
    display: block;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 5px 12px;
}


.subnav__link:hover {
    background-color: #9cd3f5;
	color: #002E4B;
    text-decoration: none;
    overflow: hidden;
}



.nav__item-2 {
    position: relative;
}

.subnav-2 {
    width: 170px;
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background: #035e97;
    padding: 10px 0;
    z-index: 1000;
    list-style-type: none;
}

.nav__item-2:hover .subnav-2 {
    display: block;
}
.has-subnav-2:after {
    content: "";
    display: block;
    margin-top: -2px;
    margin-left: 10px;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #035e97 
    transparent
    transparent
    transparent;
    position: absolute;
    top: 50%;
    right: 0;
}



.subnav__link-2 {
    display: block;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    padding: 5px 12px;
}


.subnav__link-2:hover {
    background-color: #9cd3f5;
	color: #002E4B;
    text-decoration: none;
    overflow: hidden;
}

/*block__content
    =====================*/

.columns__inner {
    display: flex;
}

    /*=====================================
    left-column
    ====================================*/



    .left__column {
        width: 21%;
        float: left;
    }

    /*PROFILE DIRECTOR
    =====================*/


    .profile {
        display: block;
        width: 100%;
        height: auto;
        margin: 2rem 0;
        text-align: center;
        border: 1px solid #9cd3f5;
        border-radius: 6px;
        

    }


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


    .profile__content {
        padding-bottom: 10px;
        background-color: #9cd3f5;
    }

    .profile__name {
        font-size: 20px;
        font-weight: 600;
        color: #002E4B;
        text-align: center;
    }

    .profile__profession {
        font-size: 14px;
        font-weight: 400;
        color: #035e97;
        text-align: center;
    }

    /*ТОПОВЫЕ КНИГИ
    =====================*/

    .topBook {
        display: block;
        width: 100%;
        height: auto;
        margin: 2rem 0;
        text-align: center;
        border: 1px solid  #9cd3f5;
        
        border-radius: 6px;
    }


    .topBook__tit{
        font-size: 18px;
        font-weight: 600;
        background-color: #9cd3f5;
        padding: 10px;
    }
.topBook__titv{
        font-size: 18px;
        font-weight: 600;
        background-color: #035e97;
        padding: 10px;
        color: #fff;
    }
    .topBook__inner {
        padding: 0 8px;
    }
.topBook__video{
    padding: 10px;
}
    .topBook__item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: relative; 
        overflow: hidden;
        margin-top: 1rem;
    }

    .topBook__item:hover {
        .btn-blue2 {
            background-color: #035e97;
            color: #FFF;
        }
    }

    .topBook__item img{
        width: 50%;
        margin-bottom: 10px;
        object-fit: cover;
        transform: translate3d(-5%, -0%, 0);
    }
    
    .topBook1__img {
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: center;
        opacity: 0;
        transition: opacity .2s linear;
        
    }
    
    .topBook__item:hover .topBook1__img {
        opacity: 1;
    }
    
    .topBook__content {
        width: 70%;
        justify-content: center;
        align-items: center;
    }


    .topBook__title {
        font-size: 14px;
        line-height: 1.2;
        color: #002e4b;
        font-weight: 600;
        text-transform: uppercase;
        margin: 15px 0 10px 0;
        
    }
    
    .topBook__author, .topBook__page {
        font-size: 12px;
        line-height: 1.2;
        color: #035e97;
        margin-bottom: 5px;
        
    }


  /*=====================================
    main
    ====================================*/
    main {
        margin: 10px 0 0 20px;
        width: 77%;
    }

    /*BTN
    =====================*/

    .btn {
        
        padding: 5px 15px;
        text-align: center;
        color: #000;
    }

    .btn-blue {
        background-color: #035e97;
        color: #FFF;
    }

    .btn-blue2 {
        background-color: #9cd3f5;
        color: #000;
    }

    .btn-kv {
        background-color: #ffffff;
        color: #002E4B;
    }

    /*SERVICE
    =====================*/




    .service {
        
        margin: 20px 0;
    }

    .service__inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: center;
    }

    .service__item{
        display: flex;
        justify-content: center;
        width: 33.3333%;
        border: 1px solid #9cd3f5;
        align-items: center;
        text-align: center;
        margin-left: 10px;
        align-content: center;
        border-radius: 6px;
        background-color: #fafafa;
        padding: 20px;
        text-transform: uppercase;
        text-decoration: none;
    }

    .service__item:first-child {
        margin-left: 0;
        
    }

    .service__title {
        margin-left: 10px;
        color: #000;
        align-items: center;
        
    }

    .service__item:hover {
        .serviceicon__svg{
            fill: #002E4B;
        }
        .service__title{
            color: #002E4B;
            font-weight: 600;
            
        }
        
        
    }
    .service__item:hover {
        box-shadow: 0 0 0 2px rgba(3, 94, 151, 0.5);
    }

    /*SOCIAL
    =====================*/
    

    .social {
        display: block;
        
        position: relative;
        width: 10%;
        cursor: pointer;
    }

    .bi-instagram {
        position: absolute;
        top: 10px;
        left: 0;
    }

    .bi-facebook {
        position: absolute;
        bottom: 10px;
        left: 0;
    }

    .serviceicon {
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 2px solid #9cd3f5;
        padding-right: 10px;
    }

    .serviceicon__svg {
        width: 70px;
        height: 70px;
        fill: #035e97;
    }

    .social__footer {
        display: flex;
        justify-content: center;
    }
    
    .social__item {
        display: flex;
        width: 50px;
        height: 50px;
        border: 1px solid #fff;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        
        transition: background .1s linear;
    }
    
    .social__item:hover {
        background-color: #fff;
    }
    
    .social__item:hover .social__icon {
        fill: #002E4B;
    }
    
    .social--footer .social__item {
        background-color: transparent;
        border-width: 2px;
        border-color: #fff;
        border-radius: 2px;
    }
    
    .social__icon {
        fill: #fff;
        display: block;
        height: 30px;
        transition: fill .1s linear;
    }
    
    .social--footer .social__icon {
        fill: #fff;
    }
    
    .social--footer .social__item:hover {
        background-color: #fff;
    }


    /* TABLE
    =====================*/
    
.content__table {

    width: 100%;
    height: auto;
    border-collapse: collapse;

}

.table__inner {
    width: 100%;
}
.table__title {
    background: #035e97;
    color: #fff;
}
.table__title, .table__item {
    overflow: hidden;
    border: 1px solid #002E4B;
    padding: 10px 10px;
    text-align: center;
    



}


    /* AUDIO PLAYER 
    =====================*/
.audio-player {
    width: 400px;
    margin: 20px;
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: #ccc;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: #4caf50;
}

#current-time, #total-time {
    margin-top: 10px;
}



    /*FOOTER
    =====================*/
    .footer-before {
        width: 100%;
        height: 350px;
        background-color: #F0F0F0;
        position: relative;
    }

    .footer__bgimg{
        width: 100%;
        overflow: hidden;
    }

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

   


    .footer-container {
        width: 100%;
        height: 300px;
        background-color: #035e97;
    }

    .footercopy {
        text-align: center;
        background-color: #002E4B;
        color: #fff;
        padding: 20px 0;
    }


    
/*
=====================*/



.footer__inner {
    display: flex;
    flex-wrap: wrap;
    padding: 35px 50px 70px 50px;
}

.footer__block {
    padding: 0 15px;
    width: 33.33333%;
    text-align: center;
}

.footer__title {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
}

.footer__address {
    color: #fff;
    font-size: 16px;
    font-style: normal;
}

.footer__text {
    color: #fff;
    font-size: 16px;
}

.footer__ul {
    text-align: center;
    font-style: 16px;
    line-height: 1.5;
    color: #fff;
    list-style-type: none;
    padding: 0;
    text-transform: uppercase;
    
}

.footer__ul LI{
    
    text-transform: uppercase;
    margin-top: 10PX;
    
}

.footer__ul a {
    text-decoration: none;
    color: #fff;
}

.footer__ul a:hover {
    text-decoration: underline;
    color: #ffffff;
}

/* poster*/


h2 {
    text-align: left;
    margin-bottom: 20px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.card-content {
    padding: 15px;
    position: relative;
}
.card-date {
    width: 50%;
    color: #888;
    font-size: 14px;
    margin-bottom: 10px;
}
.card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
.card:hover {
    transform: translateY(-5px);
}
.view-all {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}
.view-all a {
    text-decoration: none;
    color: #c00;
    font-weight: bold;
}
.poster__label{
    width: 50%;
    position: absolute;
    top: 15px;
    right: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.2px;
    padding: 5px 10px;
    border-radius: 6px 0 0 6px;
    background-color: #083e57;
    color: #fff;
}

.photo-zhba{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
    /*Media
    =====================*/


    /*========================================= 1260px*/

    /* @media (min-width: 1920px) {
    
        .header-top-inner {
        
            padding: 15px 0 0 200px;
            position: absolute;
        }
    } */

    /*========================================= 1260px*/

    /* @media (min-width: 1200px) {
        .container {
            width: 1170px;
            max-width: 100%;
        }
    } */

    /*========================================= 992px*/

    /* @media (min-width: 1300px){
        .header-top-inner {
        
            padding: 15px 0 0 250px;
            position: absolute;
        }
    } */

    /*========================================= 768px*/

    /* @media (min-width: 768px) {
        .container {
            width: 720px;
            max-width: 100%;
        }
    } */