@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  overflow-x: hidden;
}
@font-face {
            font-family: 'Anastasiia_en_bold-Regular';
            src: url(fonts/Anastasiia_en_bold-Regular.ttf);
            font-weight: normal;
            font-style: normal;
        }
@font-face {
            font-family: 'Anastasiia_ua_bold-Regular';
            src: url(fonts/_Anastasiia_ua_bold\ Regular.ttf);
            font-weight: normal;
            font-style: normal;
        }
        h1{
            font-family: Anastasiia_en_bold-Regular;
            color: black;
        }
        .accent-font {
    /* По умолчанию (для En) используем авторский */
    font-family: 'Anastasiia_en_bold-Regular';
    }

/* Когда у body появляется класс lang-ua, акцентные места меняют шрифт */
body.lang-ua .accent-font {
    font-family: 'Anastasiia_ua_bold-Regular'; 
    letter-spacing: 3px;
   
}
        
/* Main page */
        
        .navbar {
    position: fixed;
    z-index: 1000;
    background-color: white;
    height: 65px;
    width: 60%;
    border-radius: 40px;
    font-family: Inter;
    font-size: 20px;
    padding-right: 40px;
    padding-left: 20px;
    margin-top: 20px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important; 
     align-items: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

       .navdiv {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    padding-top: 5px;
}
.navdiv > p {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.menu_list {
    display: flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 40px; 
}
    
        a:link {
            color: black;
            text-decoration: none;
        }

        a:visited {
            color: black;
        }

        a:hover {
            color: #c90a0a;
            font-size: 22px;
            transition: 0.2s;
        }

        .logo-container {
            position: relative;          
            width: 75px;
            height: 75px;
            overflow: hidden;
            bottom: 5px;
        }

        .logo-container video {
            position: absolute;          
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.4s ease;
        }

        .logo-container video.hover-logo {
            opacity: 0;                  
            pointer-events: none;        
        }

        .logo-container:hover video.hover-logo {
            opacity: 1;              
        }

        .logo-container:hover video.default-logo {
            opacity: 0;             
        }

        .banner {
            display: flex;
            flex-direction: column;
            align-items: center;    
            justify-content: center;
            width: 100%;
            min-height: 80vh;       
            margin: 0;
            padding: 0;
            position: relative;
        }

        .MankeyNGirl {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-top: 120px;
        }


        .MankeyNGirl img {
            width: 100%;
            max-width: 900px;       
            height: auto;
            display: block;
        }

        .banner_text {
            display: flex;
            flex-direction: column;
            align-items: center;    
            width: 100%;
            margin-top: -7%; 
            position: relative;
            z-index: 10;
            padding-bottom: 60px; 
        }

        .banner_text h1 {
            font-size: clamp(3rem, 10vw, 6rem);
            margin: 0;
            line-height: 0.8; 
            text-align: center;
        }
        body.lang-ua .banner_text h1 {
             font-size: clamp(5rem, 18vw, 9rem);
             margin-top: -40px;
        }

        .line-portfolio-container {
            display: flex;
            flex-direction: row; 
            justify-content: space-between; 
            align-items: center; 
            width: 650px; 
            max-width: 90%;
            margin-top: 10px; 
        }

        .line-portfolio-container .line-img {
            width: 80%; 
            height: auto;
            margin: 0;
        }

        .line-portfolio-container p {
            font-size: 2rem; 
            font-family: 'Inter', sans-serif;
            margin: 0;
            color: #333;
        }

        .video-container {
            position: absolute;     
            z-index: 10;           
            width: 40%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
            overflow: hidden;
            left: 25%;
            bottom: 30%;
        }

        .video-container video {
            position: absolute;          
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.4s ease;
         }

        .video-container video.hover {
            opacity: 0;                  
            pointer-events: none;        
        }

        .video-container:hover video.hover {
            opacity: 1;              
        }

        .video-container:hover video.default {
            opacity: 0;             
        }

        
        
        .Projects{
          display: block;  
          position: relative;
          justify-self: center;
          top: -20px;
        }

         .navbar2 {
            position: relative;
            justify-self: center; 
            margin: 30px auto; 
            background-color: white;
            min-height: 55px;
            height: auto;
            width: 90%; 
            max-width: 500px;
            border-radius: 40px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .filter-menu {
            display: flex;
            justify-content: center; 
            gap: 15px; 
            padding: 10px; 
            width: 100%;
        }

        .filter-btn {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s ease;
            color: #333;
            font-family: Inter;
            font-size: 20px;
        }

        .dot {
            width: 8px;
            height: 8px;
            background-color: #c90a0a;
            border-radius: 50%;
            margin-right: 8px; 
            transition: background 0.3s;
        }

        .filter-btn.active {
            background-color: #c90a0a;
            color: white;
        }

        .filter-btn.active .dot {
            background-color: white;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            gap: 15px; 
            padding: 15px;
            max-width: 1000px; 
            margin: 0 auto;    
        }

        .project-card {
            color: black;      
            transition: transform 0.3s ease;
        }

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

        .project-image img{
            width: 100%;
            aspect-ratio: 16 / 9;  
            background-color: #ccc;  
            margin-bottom: 12px;
            object-fit: cover;      
        }

        .project-title {
            margin: 0;
            text-align: center;  
            font-family: Inter;
            font-size: 18px; 
            line-height: 1.2;
            padding-top: 10px;
            padding-bottom: 20px; 
        }
        
        footer{
            background-color: #F2F2F2;
            padding-top: 30px;
            margin-top: 50px;

        }
        .container{
            width: auto;
            margin: auto;
            display: flex;
            justify-content: center;
            height: 265px;
            padding-left: 100px;

        }
        .footer-content{
            width: 33.3%;
            align-items: center;
            position: relative;
            height: auto;
        }

        .footer-container p{
            width: 150px;
            margin: auto;
            padding: 7px;
            text-align: left;
        }
        .footer-container ul{
            position: relative;
            text-align: center;
            justify-content: center;
            padding-right: 60px;
        }

         body.lang-ua .footer-content h1{
            font-size: 36px;
         }
        
        .social-icons li{
            display: flex;
            text-align: center;
            padding: 15px;
        }
        .social-icons i{
            font-size: 30px;
        }
        .social-icons i:hover{
            color: #c90a0a;
        }
        .location{
            display: flex;
            align-items: center;
            margin-top: 80px;
        }

        .video-container-footer {
            position: relative;          
            width: 500px;
            height: 385px;
            overflow: hidden;
            z-index: 10;
            bottom: 121px;
        }

        .video-container-footer video {
            position: absolute;          
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.4s ease;
         }

        .video-container-footer video.hover-footer {
            opacity: 0;                  
            pointer-events: none;        
        }

        .video-container-footer:hover video.hover-footer {
            opacity: 1;              
        }

        .video-container-footer:hover video.default-footer {
            opacity: 0;             
        }




/* Project page */
        .project-video {
            width: 90%;
            max-width: 1100px;
            margin-top: 40px;
        }
        .project-video video {
            width: 100%;
            aspect-ratio: 16 / 9;
        }
        .video-container-yt {
            width: 100%;
            max-width: 1100px; /* Ограничь ширину, чтобы видео не было на весь экран */
            margin: 20px auto;
            overflow: hidden; /* Чтобы скругление углов работало и на само видео */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            background-color: #000; /* Черный фон, если видео другого формата */
        }

        .video-container-yt video {
            display: block;
            outline: none;
        }


        .project_container{
            position: relative;
            justify-items: center;
            padding-top: 100px;
            align-items: center;
        }
        .project_container ul{
            display: flex; 
            list-style: none; 
            align-content: center;
            justify-content: space-between;
            font-family: inter;
            font-size: 20px;
            margin-left: 0;
        }

       .css-slider-wrapper {
            position: relative;
            width: 100%;
            height: auto;
            padding: 80px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .Projects_page{
            margin-top: 50px;
        }

        .Projects_page p{
            font-family: inter;
            font-size: 20px;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            margin-top: 100px;
        }

        input[type="radio"] { display: none; } 

        .cards {
            position: relative;
            width: 100%;
            height: 500px;
            perspective: 1000px; 
        }

        .card {
            position: absolute;
            width: 50%; 
            left: 0; right: 0; margin: auto;
            transition: transform 0.5s ease, opacity 0.5s ease;
            cursor: pointer;
        }

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

        #s1:checked ~ .cards #slide1 { transform: translate3d(0, 0, 100px) scale(1.1); opacity: 1; z-index: 3; }
        #s1:checked ~ .cards #slide2 { transform: translate3d(35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }
        #s1:checked ~ .cards #slide3 { transform: translate3d(-35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }

        #s2:checked ~ .cards #slide2 { transform: translate3d(0, 0, 100px) scale(1.1); opacity: 1; z-index: 3; }
        #s2:checked ~ .cards #slide3 { transform: translate3d(35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }
        #s2:checked ~ .cards #slide1 { transform: translate3d(-35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }

        #s3:checked ~ .cards #slide3 { transform: translate3d(0, 0, 100px) scale(1.1); opacity: 1; z-index: 3; }
        #s3:checked ~ .cards #slide1 { transform: translate3d(35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }
        #s3:checked ~ .cards #slide2 { transform: translate3d(-35%, 0, 0) scale(0.8); opacity: 0.6; z-index: 2; }

        .dots2 {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 10px; 
            position: relative; 
            z-index: 20; 
            background-color: white;
            align-items: center;
            height: 55px;
            width: 100px;
            border-radius: 40px;
            padding-right: 20px;
            padding-left: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .dots2 label {
            width: 12px;
            height: 12px;
            background: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.3s;
        
        }

        #s1:checked ~ .dots2 label[for="s1"],
        #s2:checked ~ .dots2 label[for="s2"],
        #s3:checked ~ .dots2 label[for="s3"] {
            background: #c90a0a;
            transform: scale(1.3);
        }

        .btns_projects_container{
            display: flex;
            justify-content: space-between;
            width: 90%;
            max-width: 1100px;
        }

        .btns_projects {
            font-family: inter;
            font-size: 20px;
            border: none;
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px; 
            position: relative; 
            z-index: 20; 
            background-color: white;
            align-items: center;
            height: 55px;
            width: 15%;
            min-width: 130px;
            border-radius: 40px;
            padding-right: 20px;
            padding-left: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btns_projects:hover{
            color: #c90a0a;
            cursor: pointer;
            font-size: 22px;
        }

        
/* About Me page */
        .body_am{
            background-image: url(anim/AboutMe_pictures.webp); 
            background-repeat: no-repeat;
        }

        .AboutMe_baner{
            margin-top: 150px;
            display: block;
            justify-items: center;
            font-family: Inter;
            font-size: 20px;
            height: 980px;
            z-index: 5;
            
        }
        

        .AboutMe_baner h1{
            color: black;
            font-size: clamp(80px, 15vw, 200px);
        }

        h2{
            color: black;
        }

        .about_me_text{
            display: flex;
            flex-direction: column;
            position: relative;
            width: 25%;
            text-align: center;
            justify-content: right;
            margin-top: 50px;
          
        }
       
        .resume-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; 
            max-width: 100%; 
            align-items: center;
            justify-items: center;
            margin-left: 330px;

        }
        .column{
            width: 77%;
            
        }
        .video-column{
            display: flex;
        }
        .video-column video {
            width: 100%;
            height: auto;
        }

        .handwritten {
            font-family: Anastasiia_en_bold-Regular; 
            font-size: 36px;
            margin-bottom: 20px;
        }

        .section {
            margin-bottom: 40px;
        }


        .item {
            position: relative;
            margin-bottom: 20px;
            border-left: 5px  solid #c90a0a;
            margin-left: 10px;
            padding-left: 25px;
        }

        .dot-list {
            list-style: none;
            padding: 0;
        }

        .dot-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 15px;
        }

        .dot-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 6px;
            height: 6px;
            background-color: #c90a0a;
            border-radius: 6px;
        }

        .main-text {
            font-family: inter;
            display: block;
            font-weight: 600;
            font-size: 20px;
            line-height: 1.2;
        }

        .sub-text {
            font-family: Inter;
            display: block;
            font-size: 20px;
            color: #9b9b9b;
            margin-top: 2px;
        }


@media (max-width: 1800px) {
      .video-container {
            position: absolute;     
             z-index: 10;           
            width: 40%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
             overflow: hidden;
            left: 20%;
            bottom: 30%;
      }
    }

    @media (max-width: 1500px) {
      .video-container {
            position: absolute;     
             z-index: 10;           
            width: 45%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
             overflow: hidden;
            left: 15%;
            bottom: 30%;
      }
    }

     @media (max-width: 1300px) {
      .video-container {
            position: absolute;     
            z-index: 10;           
            width: 50%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
             overflow: hidden;
            left: 10%;
            bottom: 30%;
      }
    }

     @media (max-width: 1100px) {
      .video-container {
            position: absolute;     
            z-index: 10;           
            width: 50%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
             overflow: hidden;
            left: 4%;
            bottom: 30%;
      }
      .body_am{
        background-image: none;
      }

       .AboutMe_baner{
            height: 600px;
            margin-top: 150px;
            display: block;
            justify-items: center;
            font-family: Inter;
            font-size: 20px;
        }

     .about_me_text{
            display: flex;
            flex-direction: column;
            position: relative;
            width: 80%;
            text-align: center;
            justify-content: right;
            margin-top: 50px;
          
        }

        .resume-grid {
            display: grid;
            grid-template-columns: 1fr; 
            max-width: 100%; 
            align-items: center;
            justify-items: center;
            margin-left: 0px;

        }
    }


@media (max-width: 910px) {
  
        .navbar{
            position: fixed;
            z-index: 1000;
            background-color: white;
            height: 65px;
            width: 100%;
            border-radius: 40px;
            font-family: Inter;
            font-size: 18px;
            padding-right: 20px;
            padding-left: 10px;
            margin-top: 20px;
            justify-self: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
         .menu_list{
            display: flex; list-style: none; gap: 15px;
        
        }
        .banner {
            display: flex;
            flex-direction: column;
            align-items: center;    
            justify-content: center;
            width: 100%;
            min-height: 30vh;       
            margin: 0;
            padding: 0;
            position: relative;
        }
        .video-container {
            position: absolute;     
             z-index: 10;           
            width: 50%;             
            max-width: 500px;      
            aspect-ratio: 1 / 1;   
             overflow: hidden;
            left: 0%;
            bottom: 30%;
        }
        .banner_text {
            display: flex;
            flex-direction: column;
            align-items: center;    
            width: 100%;
            margin-top: -10%; 
            position: relative;
            z-index: 10;
            padding-bottom: 60px; 
        }
        .line-portfolio-container {
            display: flex;
            flex-direction: row; 
            justify-content: space-between; 
            align-items: center; 
            width: 650px; 
            max-width: 80%;
            margin-top: 10px; 
        }
        .line-portfolio-container .line-img {
            width: 65%; 
            height: auto;
            margin: 0;
        }
       
        .navbar2{
            position:static;
            z-index: 30;
            background-color: white;
            width: 90%;
            height: 65px;
            border-radius: 40px;
            justify-self: center;
            align-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .portfolio-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .footer-container ul{
            position: relative;
            text-align: center;
            justify-content: center;
            padding-right: 0px;
        }
        .footer-container{
            font-size: 16px;
        }
        body.lang-ua .footer-content h1{
            font-size: 25px;
         }
        .social-icons i{
            font-size: 20px;
        }
        .container h1{
            font-size: 16px;
        }
    
        .container{
            width: auto;
            margin: auto;
            display: flex;
            justify-content: center;
            height: 230px;
            padding-left: 10px;
        }
        
        .video-container-footer {
            position: relative;          
            width: 50%;
           height: auto;
            overflow: hidden;
            z-index: 10;
            bottom: 0;
        }
        
    .project_container h1 {
        font-size: 1.8rem;
        text-align: center;
        padding: 0 20px;
    }

    .project_container p {
        font-size: 16px;
        margin-top: 40px;
        padding: 0 20px;
    }
    .cards {
            position: relative;
            width: 100%;
            height: 230px;
            perspective: 1000px; 
    }

    .card {
        width: 80%; 
    }

    #s1:checked ~ .cards #slide2, #s2:checked ~ .cards #slide3, #s3:checked ~ .cards #slide1 { 
        transform: translate3d(20%, 0, -100px) scale(0.8); 
    }
    #s1:checked ~ .cards #slide3, #s2:checked ~ .cards #slide1, #s3:checked ~ .cards #slide2 { 
        transform: translate3d(-20%, 0, -100px) scale(0.8); 
    }

    .project_container ul {
        flex-direction: flex;
        justify-content: space-between;
        gap: 10px;
        font-size: 16px;
        padding: 0;
    }

     .btns_projects{
        font-size: 16px;
     }
     .btns_projects:hover{
        font-size: 18px;
     }

     
}