@import url('https://fonts.googleapis.com/css?family=Mulish:200,300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Neometric Regular', 'Poppins', consolas, sans-serif;
}



.toggle
{
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #FFC4AB url(./img/menu.png) no-repeat center;
    background-size: 30px;
    cursor: pointer;
    z-index: 1000;
    border-radius: 3px;
    
}

.toggle.active
{
    background: #FFC4AB url(./img/close.png) no-repeat center;
    background-size: 25px;
}

section
{
    padding: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.content{
    max-width: 800px;
}
.banner
{
    position: relative;
    width: 100%;
    min-height: 100vh;
}
.banner .imgSidebar
{
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
}

.banner .imgSidebar img
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner .contentBx,
.sidebar
{
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    /* width: calc(100% - 600px); */
    height: 100%;
    display: flex;
    justify-content: flex-start ;
    align-items: center;
    padding: 100px;
}
.banner .contentBx .avatar{
    display: none;
    width: 300px;
    height: 300px;
    
}
.banner .contentBx .avatar img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.banner .contentBx .logoText
{
    position: absolute;
    top: 40px;
    left: 100px; 
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #FFC4AB;
    color: #fff;
    padding: 4px 5px 2px;
}
.banner .contentBx h2
{
    font-family: 'Neometric Bold';
    font-size: 3em;
    font-weight: 800;
    color: #585858;
    line-height: 1em;
    margin-bottom: 30px;
    
}

.banner .contentBx h4
{
    color: #585858;
    font-family: 'Neometric Light';
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 40px;
}

.btn
{
    background: #FFC4AB;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 2px;
    border-radius: 3px;
}
.sidebar
{
    position: fixed;
    background: #FFC4AB;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    padding: 40px;
    z-index: 100;
    right: -100%;
}
.sidebar.active
{
    right: 0;
}
.sidebar ul
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.sidebar ul li
{
    list-style: none;
    margin-bottom: 50px;
}
.sidebar ul li a
{
    color: #fff;
    text-decoration: none;
    font-size: 2em;
    margin: 10px 0;
    font-weight: 600;
    letter-spacing: 2px;
    /* text-transform: uppercase; */
}
.sidebar ul li a:hover
{
    color: #F46132;
}
.sci
{
    position: absolute;
    left: 100px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sci li
{
    margin-right: 30px;
    list-style: none;
}
.sci li img
{
    width: 25px;
    opacity: 0.7;
}
.sci li img:hover
{
    opacity: 1;
}
.title
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
}
.title.white h2{
    color: #fff;
}
.title h2
{
    position: relative;
    font-family: 'Neometric Bold';
    font-size: 2em;
    margin-bottom: 5px;
    color: #585858;
    font-weight: 700;
}
.title h2::before
{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 100px;
    height: 5px;
    background: #585858;
    border-radius: 3px;
}
.title.white h2::before{
    background: #fff;
}
.about
{
    background: #2B2C64;
    min-height: 600px;
}
.about .content
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.about .content ul
{
    max-width: 860px;
    color: #fff;
}

.about .content li
{
    color: #fff;
    font-size: 1.4em;
    line-height: 1.8;
}
.skills 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
  
}
.skills.skills_section{
        background: #FEE5DB;
}
.skills .content{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 670px;
}
.skills .content ul{
    text-decoration: none;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  
}
.skills .content li{
    padding: 2px 18px ;
    background: #FFFFFF;
    border: 2px solid #FFC4AB;
    border-radius: 20px;
    margin-bottom: 40px;
    cursor: pointer;
    
}
.skills .content li p{
    font-family: "Neometric Light";
    font-weight: 300;
    font-size: 1.5em;
}

.skills .content li:hover:nth-child(4n + 1){
    color:#fff;
    background: #FFC4AB;
}
.skills .content li:hover:nth-child(4n + 2){
    color:#fff;
    background: #69CEBC;
}
.skills .content li:hover:nth-child(4n + 3){
    color:#fff;
    background: #E997F6;
}
.skills .content li:hover:nth-child(4n + 4){
    color:#fff;
    background: #ADEB87;
}
.cases .title{
    margin-bottom: 80px;
}
.cases .content{
    max-width: 1000px;
    width: 100%;
}
.cases .c_row{
    display: flex;
    
}
.cases .c_row.right{
    flex-direction: row-reverse
}

.cases .case{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    min-width: 500px;
    min-height: 310px;
    padding: 30px;
    margin-bottom: 10px;
    z-index: 100;
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.cases .case.ftkz{
    background: linear-gradient(rgba(254,229,219,0.8), rgba(254,229,219,0.8)), url(./img/cases/forteens/ft-img-6.JPG);
    background-size: cover;
    background-position: center; 

}
.cases .case.leyan{
    background: linear-gradient(rgba(254,229,219,0.8), rgba(254,229,219,0.8)), url(./img/cases/leyan/leyan-img5.JPG);
    background-size: cover;
    background-position: center; 
}
.cases .case.esg{
    background: linear-gradient(rgba(254,229,219,0.8), rgba(254,229,219,0.8)), url(./img/cases/esg/fon.png);
    background-size: cover;
    background-position: center; 
}
.cases .case.ltg{
    background: linear-gradient(rgba(254,229,219,0.8), rgba(254,229,219,0.8)), url(./img/cases/ltg/fon.png);
    background-size: cover;
    background-position: center; 
}
.cases .case .c_title{
    display: flex;
    flex-direction: column;
    align-items: center;

    
}
.cases .title h2{
    color: #FFC4AB;
}
.cases .title h2::before{
    background: #FFC4AB;
}
.cases .case .c_title h3{
    font-family: 'Neometric Light';
    font-size: 32px;
    font-weight: 300;
    margin-top: 10px;
    color: #000;
}
.cases .case .c_title h4{
    font-family: 'Neometric Light';
    font-size: 20px;
    font-weight: 300;
    margin-top: 10px;
    color: #000;
    
}
.cases .case .c_logo{
    height: 125px;
    width: 125px;
    background-color: #69CEBC;
    border-radius: 50%;
}
.cases .ftkz .c_logo{
    background: url(./img/logo_forteens.png) no-repeat;
    background-size: contain; 
}
.cases .leyan .c_logo{
    background: url(./img/logo-Leyan.png) no-repeat;
    background-size: cover;  
    background-position: center;
}
.cases .esg .c_logo{
    background: url(./img/logo_esg.png) rgba(255,255,255,1) no-repeat;
    background-size: contain;  
    background-position: center;
}
.cases .ltg .c_logo{
    background: url(./img/cases/ltg/logo_ltg.png) rgba(255,255,255,1) no-repeat;
    background-size: contain;  
    background-position: center;
}
.cases .case .c_text{
    display: none;
    padding-top: 30px;
    transition: all 1s ease;
}
.cases .case p{
    font-family: 'Neometric Light';
    font-weight: 200;
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff;
}

.cases .case:hover {
    justify-content: flex-start;
    background: linear-gradient(rgba(220,136,103,0.9), rgba(220,136,103,0.9));
    
}
.cases .case.ftkz:hover{
    background: linear-gradient(rgba(220,136,103,0.9), rgba(220,136,103,0.9)), url(./img/cases/forteens/ft-img-6.JPG);
    background-size: cover;
    background-position: center; 

}
.cases .case.leyan:hover{
    background: linear-gradient(rgba(220,136,103,0.9), rgba(220,136,103,0.9)), url(./img/cases/leyan/leyan-img5.JPG);
    background-size: cover;
    background-position: center; 
}
.cases .case.esg:hover{
    background: linear-gradient(rgba(220,136,103,0.9), rgba(220,136,103,0.9)), url(./img/cases/esg/fon.png);
    background-size: cover;
    background-position: center; 
}
.cases .case.ltg:hover{
    background: linear-gradient(rgba(220,136,103,0.9), rgba(220,136,103,0.9)), url(./img/cases/ltg/fon.png);
    background-size: cover;
    background-position: center; 
}
.cases .case:hover .c_text{
    display: flex;
    flex-direction: column;
}
.cases .case:hover .c_logo{
    position: absolute;
    top:30px;
    left: 30px;
    height: 62px;
    width: 62px;
}
.cases .case:hover .c_title h3, .cases .case:hover .c_title h4{
    color: #fff;
}

.contact{
    background: #FFC4AB;
    min-height: 450px;
}
.contact .title {
    margin-bottom: -30px;
}
.contact .title h2::before{
    top: 180px;
}
.contact .social_m{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact .contact_boll{
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
}
.contact .contact_boll a{
    display: block;
    width: 100%;
    height: 100%;
}
.contact .sm_telegram{
    background: url(img/icons/telegram.png) #fff no-repeat center center;
    background-size: 40px;   
    
}
.contact .sm_telegram:hover{
    background: url(img/icons/telegram_hover.png) #fff no-repeat center center;
    background-size: 40px;  
    border: 3px solid #039BE5;
}
.contact .sm_instagram{
    background: url(img/icons/instagram.png) #fff no-repeat 13px center;
    background-size: 45px; 

}

.contact .sm_instagram:hover{
    background: url(img/icons/instagram_hover.png) #fff no-repeat 10px center;
    background-size: 45px; 
    border: 3px solid #FF4700;
}
.contact .sm_cat{
    height: 180px;
    width: 180px;
    background: url(img/icons/cat.webp) no-repeat center center;
    background-size: cover;
}
.contact .sm_cat:hover{
    height: 180px;
    width: 180px;
    background: url(img/icons/cat-dance.webp) no-repeat 5px 25px;
    background-size: 150px;
}
.contact .sm_cat img{
    height: 180px;
}
.contact .sm_bye {
    padding-top: 20px;
    max-width: 300px;
}
.contact .sm_bye h4{
    color: #fff;
    font-family: 'Neometric Light';
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    
}


/*CASES PAGES*/


.case-header {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.case-header .title{
    margin: 40px 0 90px;
}
.case-header .title h2{
    font-size: 2.5em;
}
.case-header .logoImg {
    position: absolute;
    left: 0;
    top: 0px;
    border-radius: 50%;
    height: 125px;
    width: 125px;
    background: #FFC4AB;
}
.case-header .logoImg img{
    height: 125px;
    border-radius: 50%;

}
.case-back{
    position: fixed;
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 1000;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.case-back span{
    font-size: 28px;
    line-height: 1;
}
.case-back:hover{
    background: rgba(0,0,0,0.08);
}
.case-back.leyan_color{
    color: #00B5AF;
}
.case-back.ft_color{
    color: #0B79B4;
}
.case-back.esg_color{
    color: #6B9937;
}
.case-back.ltg_color{
    color: #008ACE;
}

.case-title{
    text-align: center;
    margin: 90px 0 50px;
}
.case-title h2{
    font-size: 2em;
}

.skills-case .content, .skills-case-leyan .content
{
    max-width: 980px;
}
.skills-case .content, .skills-case-leyan{
    background: transparent;
}
.case_content .screen_img_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}
.case_content .screen_img{
    margin: 0 20px;

}
.case_content .screen_img_list img{
    max-width: 380px;
}
.case_about{
    max-width: 900px;
}
.case_about p{
    font-size: 1.3em;
    line-height: 1.4em;
    font-weight: 500;
}
.carousel{
    max-width: 900px;
}
#certCarousel{
    max-width: 100%;
}

.carousel .carousel__slide{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.carousel img{
    height: 630px;
}
.carousel video{
    height: 630px;
}

/*Leyan*/
.case_content_L {
    background: #FFF5F0;
}
.toggleLeyan{
    background: #00B5AF url(./img/menu.png) no-repeat center;
    background-size: 30px;
}
.toggleLeyan.active{
    background: #00B5AF url(./img/close.png) no-repeat center;
    background-size: 25px;
}
.sidebarLeyan {
    background: #00B5AF;
}
.case-header .logoLeyan{
    background: url(img/logo-Leyan.png) no-repeat center center;
    background-size: cover;
}
.case-header .title h2{
    color: #00B5AF;
}
.case-header .title h2:before{
    background: #00B5AF;
}
.lGallery .carousel__button {
    background: rgba(255,255,255,0.5);
}
.lGallery .carousel__dots .carousel__dot:after{
    background-color: #00B5AF;
}
.lGallery .carousel__button svg{
    stroke-width: var(--carousel-button-svg-stroke-width, 2.5px);
    color: #00B5AF;
}


/*ForTeens*/
.case_content_FT {
    background: #EDFEFF;
}
.toggleFt{
    background: #0B79B4 url(./img/menu.png) no-repeat center;
    background-size: 30px;
}
.toggleFt.active{
    background: #0B79B4 url(./img/close.png) no-repeat center;
    background-size: 25px;
}
.sidebarFt {
    background: #0B79B4;
}
.case-header .logoFT{
    background: url(img/logo_forteens.png) no-repeat center center;
    background-size: cover;
}
.case_content_FT .case-header .title h2{
    color: #0B79B4;
}
.case_content_FT .case-header .title h2:before{
    background: #CC1932;
}
.case_content_FT .skills .content li{
    border-color: #0B79B4;
}
.lGallery .carousel__button {
    background: rgba(255,255,255,0.5);
}
.lGallery .carousel__dots .carousel__dot:after{
    background-color: #0B79B4;
}
.lGallery .carousel__button svg{
    stroke-width: var(--carousel-button-svg-stroke-width, 2.5px);
    color: #0B79B4;
}


/*ESG*/
.case_content_ESG {
    background: #f2fbe9;
}
.toggleEsg{
    background: #638E3C url(./img/menu.png) no-repeat center;
    background-size: 30px;
}
.toggleEsg.active{
    background: #638E3C url(./img/close.png) no-repeat center;
    background-size: 25px;
}
.sidebarESG {
    background: #638E3C;
}
.case-header .logoESG{
    background: url(img/logo_esg.png) no-repeat center center, rgba(255,255,255,1);
    background-size: contain;
}
.case-header .title.esg_color h2{
    color: #6B9937;
}
.case-header .title.esg_color h2:before{
    background: #6B9937;
}
.case_content_ESG .skills .content li{
    border-color: #6B9937;
}
.esgGallery .carousel__button {
    background: rgba(255,255,255,0.5);
}
.esgGallery .carousel__dots .carousel__dot:after{
    background-color: #638E3C;
}
.esgGallery .carousel__button svg{
    stroke-width: var(--carousel-button-svg-stroke-width, 2.5px);
    color: #638E3C;
}


/*LTG*/
.case_content_LTG {
    background: #edfffb;
}
.toggleLTG{
    background: #008ACE url(./img/menu.png) no-repeat center;
    background-size: 30px;
}
.toggleLTG.active{
    background: #008ACE url(./img/close.png) no-repeat center;
    background-size: 25px;
}
.sidebarLTG {
    background: #008ACE;
}
.case-header .logoLTG{
    background: url(img/cases/ltg/logo_ltg.png) no-repeat center center, rgba(255,255,255,1);
    background-size: contain;
}
.case-header .title.ltg_color h2{
    color: #008ACE;
}
.case-header .title.ltg_color h2:before{
    background: #008ACE;
}
.case_content_LTG .skills .content li{
    border-color: #008ACE;
}
.ltgGallery .carousel__button {
    background: rgba(255,255,255,0.5);
}
.ltgGallery .carousel__dots .carousel__dot:after{
    background-color: #008ACE;
}
.ltgGallery .carousel__button svg{
    stroke-width: var(--carousel-button-svg-stroke-width, 2.5px);
    color: #008ACE;
}


@media (max-width:980px){
    .case-back{
        display: none;
    }

    section{
        padding: 50px;
    }

    .banner {
        min-height: 80vh;
    }
    .banner .contentBx .logoText{
        font-size: 2em;
    }
    .banner .imgSidebar
    {
        display: none;
        top: 10%;
        right: 0;
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .banner .contentBx .avatar{
        display: block;
        margin: 0 auto 30px;
    }
    .banner .imgSidebar img{
        border-radius: 50%;
    }
    .banner .contentBx, .sidebar {
        width: 100%;
    }
    .banner .contentBx h2 {
        font-size: 5em;
    }
    .banner .contentBx h4 {
        font-size: 3em;
    }
    .btn{
        font-size: 2em;
    }
    .toggle{
        width: 80px;
        height: 80px;
        background-size:60px;
    }
    .toggle.active{
        background-size:40px;

    }
    .sidebar ul li a{
        font-size: 4em;
    }
    .title h2{
        font-size: 2.5em;
    }
    .title h2::before{
        bottom: -15px;
    }
    .cases .case {
        min-width: 80%;
        min-height: 400px;
        margin-bottom: 30px;
    }
    .cases .c_row {
        justify-content: center;
    }
        .case_content .screen_img_list{
        justify-content: center;
    }
    .case_content .screen_img_list img{
        max-width: 100%;
    }
    .case_content .screen_img{
        max-width: 100%;
        margin-bottom: 20px;
    }
    
}