@media(max-width:1400px){
    .container{
        padding: 3% 6%;
    }
}
@media(max-width:1120px){
    .container{
        padding: 2% 3%;
    }
    #subject-container, 
    .award-feature-container,
    .service-body-container
    {
        
        grid-template-columns: repeat(2, 1fr);
       
    }
    .contactHtml-container
    {
        grid-template-columns: 1fr;
       
    }
    .faq-container{
        flex-direction: column;
        height: auto;
        gap: 0;
    }
    .portfolio-all-image,
    .portfolio-img-card{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width:920px){
    :root{
        --font-h1-40: 36px;
    ---font-h2-32:30px;
    ---font-h3-26:24px;
    ---font-h4-24:22px;
    ---font-h5-20:18px;
    --font-15: 14px;
    ---font-13:13px;
    ---font-text-16: 15px;  
    }
    .comment-quota{
        width: 90%;
        margin-left: 20px;
        padding: 0 20px;
    }
    .logo{
        display: flex;
        justify-content: space-between;
        padding: 2%;
    }
    .logo img{
        margin-left: 20px;
    }
    #menu{
        display: block;
        transition: 0.5s ease-in-out;
    }
    #menu:hover{
        transform: scale(1.1);
    }
    #open-btn{
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        margin-top: -20px;
       margin-left: -60px;
       overflow: hidden;
    }
    #close-btn{
        margin-top: 10px;
        padding: 5px;
        border-radius: 50%;
        cursor: pointer;
        

    }
    #close-btn:hover{
        background-color: black;
        box-shadow: none;
    }
    #close-btn i:hover, #open-btn i:hover{
        color: #fff;
        transform:  scale(1.1);
        
    }
    #open-btn i, #close-btn i{
        color: rgba(245, 242, 242, 0.842);
        width: 20px;
        height: 20px;
        font-size: 30px;
    }
    #nav{
        display: none;
    }
    #mobile-nav{
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: #000000c0;
        top: -100%;
        left: 0;
        right: 0;
        padding: 20px;
        width: 100%;
        height: 60vh;
        text-align: center;
        backdrop-filter: blur(10px);
        overflow: hidden;
        z-index: 1;
        transition: 0.s;
        
    }
    #mobile-nav-logo{
        display: flex;
        justify-content: space-between;
        padding: 15px;
    }
    #close-btn{
        display: block;
    }
    #nav-link{
        margin-top: 10px;
    }
    /* ----------animation-----------  */
     .animeone ul li{
        position: absolute;
        border: 3px solid rgba(26, 6, 6, 0.253);
        width: 40px;
        height: 30px;
        border-radius: 20%;
    } 
    .animeone li{
        top: 10vh;
        left: 20vh;
        background-color: rgba(94, 98, 104, 0.192);
        animation: square 5s linear infinite;
        background:center  url(image/3\ \(1\).png);

    }

    .animeone li:nth-child(2){
        top: 5vh;
        left: 80vh;
        animation-delay: 0.2s;
        background:center  url(image/service-4.jpg);

        
    }
    .animeone li:nth-child(3){
        top: 35vh;
        left: 5vh;
        animation-delay: 0.4s;
        background:center  url(image/10.png);
        
    }
    .animeone li:nth-child(4){
        top: 30vh;
        left: 90vh;
        animation-delay: 0.6s;
        background:center  url(image/p-9.jpg);
        
    }
    @keyframes square {
        0%{
            transform: scale(0) rotateY(0);
            opacity: 1;

        }
        100%{
            transform: scale(5) rotateY(1000deg);
            opacity: 0;

        }
        
    }
    .animetwo ul li{
        position: absolute;
        border: 1px solid rgba(95, 182, 28, 0.137);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        animation: round 10s linear infinite;

    }
    .animetwo li{
        bottom: 0;
        left: 20vh;
        background-color: rgba(11, 23, 43, 0.062);
        
    }
    .animetwo li:nth-child(2){
        bottom: 0;
        left: 30vh;
       animation-delay: 2s;
       
       
        
    }
    .animetwo li:nth-child(3){
        bottom: 0;
        left: 80vh;
        background-color: rgba(7, 18, 36, 0.062);
        animation-delay: 0s;
        
        
    }
    .animetwo li:nth-child(4){
        bottom: 0;
        left: 80vh;
        animation-delay: 4s;
       
        
        
    }
    @keyframes round {
        0%{
            transform: scale(0);
            opacity: 1;
            bottom: 0;
        }
        100%{
            transform: scale(3
            );
            opacity: 0;
            bottom: 50vh;
        }
        
    }
    /* --------------------------  */
    #nav-link a{
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        color: #fff;
        font-size: var(---font-h5-20);
        font-family: "Fahkwang", sans-serif;
        font-weight: 500;
        cursor: pointer;
        padding: 10px 0;
        z-index: 2;
        
    }
    #nav-link a::after{
        position: absolute;
        content: '';
        width: 2px;
        text-align: center;
        margin: 0 auto;
        margin-top: 26px;
        margin-left: 0px;
        height: 2px;
        background-color: var( ---underline-text-color);
        transition: 0.2s ease-in-out;
    }
    #nav-link a:hover::after{
        width: 10%;
    }
    .service-container{
        grid-template-columns: 1fr;
        margin-top: 20px;
        text-align: center;
        gap: 15px;
        justify-content: center;
    }
    .service-card .service-card-content{
        margin: 3% 0;
        padding: 2%;
        border: 1px solid rgba(179, 136, 136, 0.144);
    }
    .aboutHtml-container, 
    .section-hero-card, 
    .contactHtml-container,
    .number-container
    {
        grid-template-columns: 1fr;
        margin: 0 auto;
        text-align: center;

    }
    .work-experience-container{
        flex-direction: column;
       
    }
    .aboutHtml-container img, 
    .section-hero-card img{
    width: 100%;
    
    }
    .aboutHtml-container-card, 
    .section-hero-card,
    .section-hero-card:nth-child(even){
        flex-direction: column;
    
    }
    .aboutHtml-container-card p, 
    .section-hero-card p{
    width: 100%;
   
    }
    .contact-card:first-child{
        text-align: center;
    }
    


    
}
@media(max-width:760px){
    :root{
        --font-h1-40: 28px;
    ---font-h2-32:24px;
    ---font-h3-26:22px;
    ---font-h4-24:20px;
    ---font-h5-20:16px;
    --font-15: 13px;
    ---font-13:12px;
    ---font-text-16: 13px; 
    }
    .logo img, .footer-logo img{
        width: 150px;

    }
    #subject-container{
        grid-template-columns: 1fr;
        margin: 0 auto;
    } 
    #hero-container{
        height: auto;
    }
    .award-feature-container,
    .service-body-container
    {
        grid-template-columns: 1fr;  
    }
    .portfolio-all-image,
    .portfolio-img-card{
        grid-template-columns: repeat(2, 1fr);
    }
    .portfolio-header, #hero-container{
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #subject-container, 
    .award-feature-container,
    .service-body-container,
    .portfolio-all-image,
    .portfolio-img-card{
        grid-template-columns: 1fr;
    }
    .social-icon{
        flex-direction: row;
    }
    .portfolio-Html-head{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .portfolio-Html-head p{
        width: 100%;
    }
    #faq, .faq-container{
        margin-top: 10px;

    }
    .hero-container-card{
        
        margin-top: 30px;
    }

   
    .anime-background li:nth-child(8), 
    .anime-background li:nth-child(9), 
    .anime-background li:nth-child(10), 
    .anime-background li:nth-child(11),
    .anime-background li:nth-child(12){
        display: none;
    }
    .bg{
        width: 100%;
        margin: 0 auto;
    }
    .bg h1{
        width: 100%;
        top: 80%;
        left: 50%;
        margin: 0 auto;
    }
}
@media (max-width:620px){
    .hero-container-card:nth-child(2){
        width: 100%;
        margin-top: -50px;
    }

    .anime-background li:nth-child(4),
    .anime-background li:nth-child(5),
    .anime-background li:nth-child(6), 
    .anime-background li:nth-child(7),
    .anime-background li:nth-child(8), 
    .anime-background li:nth-child(9), 
    .anime-background li:nth-child(10), 
    .anime-background li:nth-child(11),
    .anime-background li:nth-child(12){
        display: none;
    }
   
    

}