/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
    /* MOBILE NAVIGATION */
      .main{
          display: grid;
          grid-template-columns:1fr;
      }
      .btn-mobile-nav {
        display: block;
        z-index: 9999;
      }
      .header {
          background:none;
          height:auto;
      }
      .main-nav {
        background-color: rgba(37, 80, 149);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateX(100%);
       
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;
        padding:5rem 0;
        z-index: 2;
    
        /* Hide navigation */
        /* Allows NO transitions at all */
        /* display: none; */
    
        /* 1) Hide it visually */
        opacity: 0;
    
        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;
    
        /* 3) Hide it from screen readers */
        visibility: hidden;
      }
      
      .nav-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);

      }
    
      .nav-open .icon-mobile-nav[name="close-outline"] {
        display: block;
      }
    
      .nav-open .icon-mobile-nav[name="menu-outline"] {
        display: none;
      }
    
      .main-nav-list {
        flex-direction: column;
        gap:2rem;
      }
    
      .main-nav-link:link,
      .main-nav-link:visited {
        font-size:2.4rem;
        color:#fff;
        text-align: center;
      }
    
      .secondScetion{
        padding:1rem; 
      }
      /* input{
        margin-top: 1rem;
      } */
      .secondScetion{
        transform: translateY(-10rem);
  
      }
      .CardContainer{
        padding:1.5rem;
        grid-template-columns: 1fr 1fr;
      }

      
  }
/* 1240 */
@media (max-width:77.5em) {
    /* section about us */
    /* .aboutContentgridBox{
        display: grid;
        grid-template-columns: 3fr 1fr;
        justify-items:center;
    } */
    .aboutContentBox{
        height: 100%;
    }
    .aboutbackground{
        width:30%;
        right:0;
        bottom:-20rem;
    }
    .titleBox{
        width:30%;
    }
    /*///////////
     *achievement* 
     ////////////  */
     .productContainer{
        justify-items: center;
     }
     .productBox{
        width:20rem;
        height:20rem;
     }
     .popupProductImg{
        width:50%;
    }
    .Closeicon{
        top:0rem;
        right:15%;
    }
    .lefticonBox{
        top:25rem;
        left:15%;
    }
    .righticonBox{
        top:25rem;
        right:14%;
    }
}
/* 1024 */
@media (max-width:64em) {
    .aboutus,
    .sectionNews{
        padding:3rem 4rem;
    }
    .aboutContentBox{
        width: 100%;
    }
    .fixedfooter{
        position: fixed;
        bottom: 0;
        width:100vw;
    }
    /*///////////
     *achievement* 
     ////////////  */
     .productContainer{
        grid-template-columns:repeat(3,1fr);
     }
     .popupProductImg{
        width:60%;
    }
    .Closeicon{
        top:0rem;
        right:12%;
    }
    .lefticonBox{
        top:22rem;
        left:12%;
    }
    .righticonBox{
        top:22rem;
        right:12%;
    }
    /*///////////
     *product* 
     ////////////  */
     .productBox::before{
        width:25%;
        height:20%;
        top:15%;
        left: 15%;
     }
    /*///////////    
     *product detail* 
     ////////////  */
     .DetailContnetBox{
        height:80%;
     }
     .detailtitle{
        font-size:2rem;
        margin-bottom: 1rem;
     }
    /*///////////
    *contact* 
     ////////////  */
     .sectionContact{
        padding:3rem 4rem;
    }
    /*///////////
    *About* 
     ////////////  */
     .AboutContentBox{
        width:85%;
     }
     .sectionabout{
        padding:3rem 4rem;
     }
    
}
/* 820 */
@media (max-width:52em){
    .popupProductImg{
        width:70%;
    }.Closeicon{
        top:0rem;
        right:2rem;
    }
    .lefticonBox{
        top:22rem;
        left:2rem;
    }
    .righticonBox{
        top:22rem;
        right:2rem;
    }

    /*///////////
     *product detail* 
     ////////////  */
     .sectionProductDetail{
        padding:3rem 5rem;
     }
    .DetailImg{
        width:70%;
        transform: translateX(7rem);
    }
    .productDetailBox{
        grid-template-columns: 1fr;
    }
    .sectionProductDetail{
        padding:3rem 10rem 3rem 10rem;
    }
    .DetailContnetBox{
        border-top: 1px solid #666;
        border-left: none;
    }
    /*///////////
    *news* 
     ////////////  */
    .sectionNewsSpace{
        padding-bottom: 20rem;
    }
    /*///////////
    *contact* 
     ////////////  */
     .contactContainer{
        grid-template-columns:1fr;
        justify-items: center;
        gap:2rem;
    }
    
}
/* 770 */
@media (max-width:48.2em){
    .titleChinese{
        font-size:2rem
    }
    .titleEnglish{
        font-size:1.6rem;
        transform: translateX(9rem);
    }
    .titleBox{
        width:60%;
    }
    /*///////////
     *achievement* 
     ////////////  */
     .productContainer{
        grid-template-columns:repeat(2,1fr);
     }
     .popupProductImg{
        width:80%;
    }
    .PopUpBox{
        width:90%;
    }
    .Closeicon{
        top:0rem;
        right:0%;
    }
    .lefticonBox{
        top:22rem;
        left:0%;
    }
    .righticonBox{
        top:22rem;
        right:0%;
    }
}
/* 600 */
@media (max-width:37.5em){
    .aboutus,
    .sectionNews{
        padding:3rem 2rem;
    }
    .titleBox{
        width:70%;
    }
    .aboutbackground{
        width:50%;
        right:0;
        bottom:-3rem;
    }
    /*///////////
     *achievement* 
     ////////////  */
     .sectionAchievements{
        padding:3rem;
     }
     .productBox{
        width:15rem;
        height:15rem;
     }
     .AboutContentBackground{
        padding:3rem 4rem;
     }
         /*///////////
     *product* 
     ////////////  */
     .productBox::before{
        width:30%;
        height:25%;
        top:10%;
        left: 10%;
        padding:3.5rem;
        font-size:1.8rem;
     }
     /*///////////
        *news* 
     ////////////  */
     .sectionNews{
        margin-bottom: 16rem;
    }
    
     .newsContent{
        padding:0 2rem;
     }
    /*///////////
    *contact* 
     ////////////  */
     .mapBox iframe{
        width:95%;
     }
     /*///////////
    *About* 
     ////////////  */
     .AboutContentBox{
        width:80%;
     }
     .sectionabout{
        padding:3rem 4rem;
     }

}
/* 460 */
@media (max-width:28.75em){
    .aboutContentBox{
        padding:2rem;
        font-size:1.8rem;
    }
    .newslist{
        gap:1rem;
    }
    .newsdate{
        font: size 1.6rem;
    }
    .newslink:link, 
    .newslink:visited{
        font-size:1.8rem;
    }
    .logoimg{
        width:25rem;
    }
    .icon-mobile-nav{
        width:4rem;
        height:4rem;
    }
    .main-nav-link:link, 
    .main-nav-link:visited{
        font-size:1.8rem;
    }
        /*///////////
     *achievement* 
     ////////////  */
     .sectionAchievements{
        margin-bottom:5rem;
     }
     .productBox{
        width:13rem;
        height:13rem;
     }
     .headtitle{
        padding:3rem 2rem 4rem 2rem;
        color:#1C3B7A;
        font-weight: 400;
        font-size:2rem;
    }
    .popupProductImg{
        width:90%;
    }
    .PopUpBox{
        width:85%;
    }
    .Closeicon{
        top:0;
        right:-3rem;
    }
    .lefticonBox{
        top:15rem;
        left:0;
    }
    .righticonBox{
        top:15rem;
        right:0;
    }
    /*///////////
     *product detail* 
     ////////////  */
     .sectionProductDetail{
        padding:3rem;
     }
     .DetailContnetBox{
        padding:2rem;
     }
    .DetailImg{
        width:80%;
        transform: translateX(3rem);
    }
    .detailContent{
        font-size:1.6rem;
    }
    .sectionProductDetail2{
        padding:3rem;
        height:100%;
    }
    .DetailContnetBox2{
        margin-bottom: 2rem;
    }
    /*///////////
    *contact* 
     ////////////  */
     .sectionContact{
        padding:3rem 2rem;
    }
    .mapBox{
        padding:1rem;
    }
    .mapBox iframe{
        width:100%;
    }
    /*///////////
    *About* 
     ////////////  */
     .AboutContentBox{
        width:95%;
     }
     .sectionabout{
        padding:3rem 2rem;
     }
     .AboutContentBackground{
        padding:10rem 2rem ;
     }
}
/* 380 */
@media (max-width:23.75em){
    .diaone{
        left:52%; 
    }
    .popupProductImg{
        width:85%;
    }
    .PopUpBox{
        width:90%;
    }
    .lefticonBox{
        top:12rem;
        left:-1rem;
    }
    .righticonBox{
        top:12rem;
        right:-1rem;
    }
}