@media (max-width: 1440px) {
    
    .tsit-inform{
    gap: 1rem 6rem;
    padding:  2rem 3rem;
    }
    
    .page-search-section .search-description,
    .page-search-section .search-items .search-not-found {
    font-size: 1.7rem;
    margin-bottom: 2rem;
    }
    .contact-banner{
        padding: 0;
    }
    .about-banner{
        padding: 0;
    }
    .main{
        padding: 0 12rem !important;
    }
    .nav-top{
    width: calc(100% + 24rem); /* Menambah lebar agar mengimbangi padding */
    margin-left: -12rem; /* Menggeser elemen ke kiri */
    padding-left: 12rem;
    li {
        a{
            font-size: 0.65rem;
        }
    }
    }
    .desc h4{
        font-size: 13px !important;
    }

}

@media (max-width: 1024px) {
    
    .notfound-text{
        width: 100% !important;
    }
    
/* detail  */
.page-search-section .search-description,
.page-search-section .search-items .search-not-found {
    font-size: 0.6rem;
}
.list-container {
    width: 100%;
    top: 0;
    left: 0;
    margin-bottom: 8.5rem;
}
.news-single-img img {
    height: auto;

}
.news-single-container .news-single-content {
    text-align:left;
}
.news-single-container .news-single-img {
    height: auto;
}
.news-container-releated{
    display: flex;
   flex-direction: column;
   gap: 2rem;
}
.main-releated{
    height: auto;
}
.main-related-content h2{
    font-size: 1.2rem;
}
.main-related-content .main-related-tags{
    margin-bottom: 0.3rem;
    height: auto;
}
.img-related{
    max-height: 25rem;
}

.search-banner{
    padding: 3rem 0 0 0 ;
    img{
        border-radius: 1rem;
        margin-top: 3rem;
    }
}
.search-items{
    grid-template-columns: repeat(1, 1fr);
    margin-top: 7rem;
    padding: 0;
    grid-column-gap: 1rem;
    p{
        font-size: 1rem;
    }
}
    
    .search-bar{
        position: absolute;
        width: 73%;
        ::placeholder{
            font-size: 0.7rem;
        }
    }
    .nav-top{
        padding-left: 1.4rem;
        height:3rem;
    }
  
    .home-container-article {
        /* padding: 0 4rem !important; */
        display: block;
        .main-new{
            display:none !important;
        }
    }
    .main-new{
      flex-direction: column;
      margin-top: 4rem;
      padding: 0;
      width: 100%;
      min-height: 20rem;
      .main-new-img{
        order: 1;
      }
      .main-new-content{
        order: 2;
        min-height: 25%;
      }
      .news-tags{
        margin-top: 15%;
        margin-left: 1rem;
      }
    }
    .news-tags-main .tag{
        margin-top: 3.3rem ;
    }
    .main-new .main-new-content h2{
        margin: 0 1rem;
        font-size: 1.1rem;
    }
    .news-container{
        display: flex;
        flex-direction: column;
        /* margin-top: 4rem; */
        gap: 1rem;
    }
    .card-home{
        width: 100%;
        height: 22rem !important;
    }
    .news-container-home{
        display:flex;
        flex-direction: column;
        padding: 0;
        align-items: center;
        gap: 12px;
        .card-content{
            min-height: 5.5rem;
        }
    }
    .image-nav{
        left: 4rem;
    }
 
    .content .about-desc h2 {
        font-size: 2.8rem;
    }
    .content .about-desc h4 {
        font-size: 1.3rem;
    }
   

    .section-box {
        padding: 20px;
        flex-direction: row;
        align-items: flex-start;
    }
    .section-icon img {
        width: 14rem;
    }
    .section-content h2 {
        font-size: 2rem;
    }
    .section-content p,
    .section-content ul {
        font-size: 16px;
    }
    .company-logo .container {
        flex-direction: row;
        gap: 40px;
    }
    /* .logo {
        height: 80px;
    } */
    .authorized {
        font-size: 2.5rem;
    }
    .line {
        width: 80px;
        height: 4px;
    }
    /* product */
    
      .product-desc .container-product {
        width: 100%;
        padding: 10px;
        text-align: center; 
        margin-bottom: 0;
      }
    
      .product-desc .container-product h1 {
        font-size: 24px; 
        margin-bottom: 10px;
      }
    
      .product-desc .container-product p {
        font-size: 0.9rem;
      }
    
      .product-content {
        display: flex;
        flex-direction: column;
        /* padding: 0 30px; */
        gap: 10px;
       
      }
      .content-product:nth-child(1) {
        order: 4;
        padding: 20px !important; 
      }
      .content-product:nth-child(2) {
        order: 3; 
      }
      .content-product:nth-child(3) {
        order: 1;
      }
      .content-product:nth-child(4) {
        order: 2; 
        padding: 20px !important; 
      }
      
      .content-product {
        padding: 0 !important; 
      }
    
      .content-product h2 {
        font-size: 1.5rem; 
      }
    
      .content-product p {
        font-size: 13.4px !important;
      }
    
      .content-product img {
        width: 100%; 
        height: auto; 
        position: relative;
        top: 1rem;
      }
    
      .content-product .product-button {
        display: inline-block;
        padding: .25rem 0.5rem; 
        font-size: 0.8rem;
        margin-top: 1rem;
        width: 56%; 
        text-align: center;
      }
    /* end of product */
    .tsit-inform{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    font-size: 14px;
    line-height: 20px;
    /* text-align: left !important; */
    }
       
       .arrow{
        left: 34rem !important;
       }
       .about-button{
        left: 17rem !important;
       }
       .tsit img {
        width: 73%;
        padding: 0;
       }

       /* about us */
       .about-banner{
        /* padding: 0px 1rem 0 0rem; */
        }
        /* .newsletter-form .form-button button {
            top: 0.10rem !important;
        } */
        .contact-page .form-section .form-panel {
            position:static !important;
        }

       /* end of about us */
       /* home banner */
       
     
      .indicator {
        width: 0.6rem;
        height: 0.2rem;
      }
    
      .indicator.active {
        width: 1.2rem;
      }
      
       /* end of home banner */
      .main-news-home{
        max-width: 26rem;
        max-height: 26rem !important;
     }
     .contact-page {
        /* padding: 2rem 2rem; */
        display: flex; /* Stack sections vertically */
        flex-direction: column;
        margin-top: 3rem;
        gap: 7rem;
     }
}

 

@media (max-width: 768px) {
    .contain-logo{
        width: 100%;
        height: 3.5rem;
        padding: 0 1rem;
        img{
            object-fit: contain;
            width: 100%;
            height: 100%;
        }
    }

    .main-new .main-new-img img{
        height: 10rem;
    }
    .pagination-search{
        margin-left: 0;
    }
    .form-container {
        /* flex-direction: column;  */
        align-items: flex-start;
        margin-bottom: 1rem;
        .form-input{
            width: 100%;
        }
    }

    /* .form-label, .form-input {
        flex: none;
        width: 100%;
    } */
   
    .contact-page .form-section .form-panel .form-submit a {
        padding: 10px 20px; /* Adjust button padding for better fit */
        font-size: 14px;
        border-radius: 0;
    }

    .contact-page .contact-info-header h3,
    .address-section .contact-info h3 {
        font-size: 2rem; 
    }

    .address-section .address-info h5 {
        font-size: 1.1rem;
    }


    .address-section .address-info {
        margin-bottom: 2rem; 
    }
    .contact-info{
        margin-bottom: 2rem;

    }
    .section-line{
        height: 3px !important;
    }

    .g-recaptcha {
        transform: scale(0.75); /* Smaller reCAPTCHA scaling */
    }
    .about-banner img{
        border-radius : 1rem;
    }
    .carousel-indicator{
        left: 0;
        bottom: 0.5rem;
    }
    .container-carousel-control{
        left: 53%;
        width: 60%;
        gap: 0;
        bottom: 6%;
    }
    .container-banner{
        display: block;
    }
    .card-banner{
        position: relative;
        .card-banner-accent-mobile{
            position: absolute;
            width: 35%;
            height: 25%;
            background-color: #ffffff;
            bottom: 0;
            right: 0;
            border-top-left-radius: 11%;
            &::before{
                content: '';
                display: block;
                position: absolute;
                background-color: #ffffff;
                bottom: 100%;
                right: 0;
                width: 10%;
                height: 12%;
                background: radial-gradient(at 0% 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
            }
            &::after{
                content: '';
                display: block;
                position: absolute;
                background-color: #ffffff;
                bottom: 0;
                right: 100%;
                width: 10%;
                height: 20%;
                background: radial-gradient(at 0% 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
            }
        }
        img{
            border-radius: 1rem;
        }
    }
    .list-item{
        height: 3rem;
    }
    #newsletter-send-text{
        font-size: 0.6rem;
    }
    /* .newsletter-form .form-button button{
        position: absolute !important;
        right: 1.5rem !important;
        top: 27px !important;
        height: 1.6rem !important;
    } */
    .desc h4 p{
        font-size: 0.85rem;
    }  
    .container-about .text-about{
        margin-bottom: 1rem;
    }
    .news-container .card-home:nth-child(1),
    .news-container .card-home:nth-child(2){
        /* height: auto; */
        .card-footer-news{
            bottom: 0;
        }
    }
    .content-product:nth-child(4) h2, 
    .content-product:nth-child(1) h2{
        font-size: 1.3rem;
        /* margin-top: 0.4rem; */
        /* margin-bottom: -1rem; */
    }
    .address-text{
        font-size: 0.9rem;
    }
    .banner{
        padding: 0;
        margin-bottom: 2rem;
        margin-top: 4rem;
    }
    .card-tag{
        font-size: 1.1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
    .tag{
        font-size: 11.5px;
    }
    .card-content{
        margin-bottom: 0;
        min-height: 25%;
    }
    .line-home{
        margin-bottom: 1.7rem;
        width: 58px;
        height: 3px;
        margin-top: 0;
    }
    .search-bar{
        margin-top: 1rem;
    }
    .image-container{
        padding: 0;
    }
    .dropdown-toggles, .dropdown-menus {
        font-size: 0.7rem;
        width: 100%;
    }
    .search-description{
        display: flex;
        flex-wrap: wrap;
    }
    .desc > h4 > p {
            margin-top: 0;
    }
    .media-link >  ul {
            line-height: 1.5rem;
    }
    .contact-banner {
        margin-top: 4.5rem;
        img{
            border-radius: 1rem;
        }
    }
    .search-items p {
        font-size: 1.1rem;
    }
    .search-items .not-found{
        width: 17rem !important;
        text-align: center;
        margin: auto;
    }
  
   
    .page-search-section .search-description,
    .page-search-section .search-items .search-not-found {
    font-size: 1.2rem;
    }
    .container-about .about-button {
        padding: 0.5rem .7rem;
        font-size: 1rem;
    }
    .contact-page .contact-info-header{
        display: block;
        margin-top: -1rem;
    }
    .contact-info{
        display: none;
    }
    /* .section-icon{
        position: relative;
        left: 18%;
    }
    */
    .image-container{
        justify-content: center;
    }
    .main{
        padding: 0 3rem !important;
    }
    .nav-top{
        width:  calc(100% + 6rem);
        margin-left: -3rem; 
        padding-left: 3rem;
        top: 3.4rem;
        /* margin-top: -3rem; */
        /* margin-bottom: 3rem; */
    }
    .nav-top a {
        font-size: 100% !important;
    }
    .news-section{
        margin-top:6rem;
    }
    .share-container{
        margin-top: 1rem;
    }
    .share-container .icon-social img {
        width: 23px;
    }
    .content-product .line-product{
        /* width: 3rem; */
        height: 2.5px;
    }
    .news-single-section .related-news h2{
        font-size: 1.3rem;
    }
    
    .line-related{
        width: 64px;
    }
    .tags-detail .tags,
    .share-container .title{
        margin-right: 1rem;
        font-size: 0.8rem;
    }
    .title{
        position: relative;
        top: -8px;
    }
   
    .address-section .contact-info p,
    .address-section .address-info p {
        width: 100%;
        font-size: 0.9rem;
    }
    .contact-section ul li{
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;
        gap: 0.5rem;
    }
    .line-demo{
        margin: -3px 0 25px 0;
        height: 3px;
        width: 6rem;
    }
    /* .lang-btn{
        gap: 0.4rem;
        padding: 5px 6px 3px 8px;
        margin-right: 2.8rem;
        /* margin-bottom: 0.5rem; */

    /* } */ */
    /* .lang-btn span{
        font-size: 0.8rem;
    } */
    #langImg{
        width: 1rem !important;
    }
 
    
    .tsit{
        border-radius: 15px;
        gap: 5.2rem;
        .blnk-text{
            padding: 1em 1em !important;
            line-height: 0 !important;
            margin: 0;
            border-top-left-radius: 1.3rem;
            border-top-right-radius: 1.3rem;
        }
    }
    .demo-desc p{
        font-size : 16px;
    }
    .image-nav {
        width: 18rem;
        left: 1px !important;
        top: 4.5rem;
    }
  
    
    .news{
        left: 0 !important;
    }    
    .tsit-inform  {
      display: flex !important;
      flex-direction: column;
      gap: 0;
      text-align: left !important;
      width: 100%;
      margin: 0;
      border-radius: 1.5rem  0 1.5rem 1.5rem!important;
      .tsit-desc{
        p{
            font-size: 15px;
            line-height: 1rem;
        }
      }
      .media-link{
        padding-top: 0;
        h2{
            font-size: 1rem;
            margin-top: 1rem;
        }
        h3{
            font-size: 16px;
        }
        ul{
            line-height: 1.4rem;
        }
        ul a {
            font-size: 0.85rem;
        }
       
      }  
      h2{
         font-size: 18px;
     }
     .one{
        order: 1;
     }
     .two{
        order: 3;
     }
     .three{
        order: 5;
        display: flex;
     }
     .four{
        order: 2;
        margin-top: 10px;
     }
     .five{
        order: 4;
     }
     .news{
        order: 6;
     }
     .footer{
        order: 9;
     }
     .line-footer{
        order: 8;
     }
        
    }
    
    
    .media-link.two {
        right: auto !important;
    }
    .tsit-newsletter {
        padding: 0;
    }
    .tsit-newsletter .newsletter{
        h2{
            font-size: 1rem !important;
        }
    }
    .text-sub{
        /* position: relative; */
        bottom: 1rem;
        margin-top: 0;
        font-size: 10px;
    }
    .footer{
        font-size: 0.9rem;
        width: 88%;
        margin:1.5rem 0.8rem 0 0.6rem;
    }
    .container-about img{
        width: 115%;
        height: 100%;
    }
    .content-about .text-about p {
        text-align: center;
        width: 100%;
        margin: 0 auto; /* Elemen tetap di tengah */
        white-space: pre-line; /* Memastikan line break dikenali */
        max-width: 99%;
        p::before {
            content: ""; 
        }
    }
  
    .content-about {
        max-width: 100%;
        display: flex;
        flex-direction: column;

        margin: 1px 0;
    }
    .container-blue-element{
        padding: 0;
    }
    .blue-element {
        width: 151px;
        height: 57px;
        left: -20px;
    }
    .container-about {
        flex-direction: column;
        /* padding: 0 3rem; */
        margin: 0 0 3rem 0;
    }
    .container-about .text-about .card-wrap {
        grid-template-columns: 1fr;
    }
    .container-about h2{
        text-align: center;
        font-size: 20px;
        margin-top: 1rem;
    }
    .title-home-article{
        h2{
            font-size:1.4rem;
        }
    }
    
    .tsit img {
        width: 56%;
        padding: 0;
        position: relative;
        left: 3.5rem;
       }
    /* .home-container-article{
        grid-template-columns: 1fr;
        grid-template-rows: auto;   
        padding: 0;
    } */
    .home-container-demo {
        margin: 20% 0;
        .demo {
            /* padding: 2rem 10.5px; */
            width: 100%;
            margin: 0;
            border-radius: 6px;
            h1 {
                font-size: 20px; 
            }
            hr{
                width: 30%;
            }
        }
    }
    
    .home-container-demo .demo-button {
        font-size: 0.85rem; 
        /* padding: .4rem .75rem;  */
    }
    .demo-desc{
        width: 80%;
        text-align: center;
     }
    .content .about-desc h2 {
        font-size: 23px !important;
        margin-top: 1rem;
    }
    .content .about-desc h4 {
        font-size: 0.9rem;
        white-space: normal;
    }
    .content .vision-mission {
    
        margin-bottom: -2rem;
    }
  
    .section-box {
        flex-direction: column;
        padding: 10px;
        border-radius: 1px;
        align-items: center;
        box-shadow: none;
    }
   
    .shadow-content{
        box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        width: calc(100% + 2rem);
    }
    .section-icon img {
        margin: 0 auto 10px auto;
    }
    .section-content{
        text-align: left;
    }
    /* .section-content h2 {
        font-size: 1.4rem;
        font-weight: 600;
        position: relative;
        display: inline-block;
        margin-bottom: 1.5rem;
        &::after {
            position: absolute;
            display: block;
            width: calc(100% + 1rem);
            content: '';
            height: 15%;
            bottom: -0.8em;
            background-color: #ffa500;
        }
        
    } */
    .section-line-top {
        width: 80px;
        margin: 5px auto;
        
    }
    .section-line-top {
        left: auto;
        width:50px;
    }
    .section-content p,
    .section-content ul {
        font-size: 16.5px;
        margin-top: 2rem;
    }
    .company-logo .container {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
        gap: 20px;
        /* .logo {
            height: 3.5rem;
            width: auto;
        } */
        /* .logo:nth-child(2){
            width: 9rem;
        } */
    }
   
    .authorized {
        font-size: 1.5rem;
    }
    .line {
        width: 50px;
        height: 2px;
    }
    /* .newsletter-form .form-input input{
        width: 85% !important;
        height: 1.6rem !important;
    } */
   

}
    

@media (min-width: 1250px) and (max-width: 1450px) {
    
    .blnk-text {
        padding: 0em 1em;
    }
    .contact-page .contact-info-header h3,
    .address-section .contact-info h3 {
    /* width: 68%; */
    line-height: 2.5rem;
    bottom: 1rem;
    position: relative;
}
    .contact-page .form-section .form-panel{
      padding: 0rem 7rem 2rem 2rem;
      right: 2rem;
    }
  
   

    .image-container img {
        width: 20rem;
        height: auto;
    }
    .image-nav{
       left: 12rem;

    }
}

@media  (max-width: 375px){
   
    .contact-info{
        h3{
            width: 100%;
        }
        p{
            font-size: 0.7rem !important;
        }
    }
    .arrow{
        left: 12rem !important;
        padding: 0.5rem 0;
        border-radius: 21px 0 15px 0;
    }
    .about-button{
        left: 20% !important;
    }
    .image-nav{
        left: -4rem;
 
     }
     .media-link{
        font-size: 13px;
     }
    
    /* .newsletter-form .form-input input{
        width: 11rem !important;
    } */
    /* .form-input {
        width: 9rem !important;
    } */
    /* about us */
    .content .about-desc h2 {
        font-size: 19px !important;
    }
    .content .about-desc h4 {
        font-size: 13px;
    }
   
 

    .section-icon img {
        width: 8rem;
        margin: 0 auto 10px auto;
    }
    .section-content{
        text-align: left;
    }
    .section-content h2 {
        font-size: 1.2rem;
    }
    .section-line-top {
        width: 80px;
        margin: 5px auto;
        
    }
    .section-line-top {
        left: auto;
        width:50px;
    }
    .section-content p,
    .section-content ul {
        font-size: 14px;
    }
    .company-logo .container {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
        gap: 20px;
        .logo {
            height: auto;
            width: 150px;
        }
    }
   
    .authorized {
        font-size: 1.5rem;
    }
    .line {
        width: 50px;
        height: 2px;
    }
   
    /* end of about us */
   /* contact us */
   
   /* end of contact us */
}
@media (min-width: 375px) and (max-width: 375px) {
    .arrow{
        left: 14.5rem; 
        padding: 0.5rem 0;
        border-radius: 21px 0 15px 0;
    }
    .about-button{
        left: 47px;
    }
    .image-nav{
        left: -4rem;
 
     }
     .media-link{
        font-size: 13px;
     }

 
    .content .about-desc h2 {
        font-size: 19px !important;
    }
    .content .about-desc h4 {
        font-size: 13px;
    }
    

    .section-icon img {
        width: 8rem;
        margin: 0 auto 10px auto;
    }
    .section-content{
        text-align: left;
    }
    .section-content h2 {
        font-size: 1.2rem;
    }
    .section-line-top {
        width: 80px;
        margin: 5px auto;
        
    }
    .section-line-top {
        left: auto;
        width:50px;
    }
    .section-content p,
    .section-content ul {
        font-size: 14px;
    }
    .company-logo .container {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
        gap: 20px;
        .logo {
            height: auto;
            width: 150px;
        }
    }
   
    .authorized {
        font-size: 1.5rem;
    }
    .line {
        width: 50px;
        height: 2px;
    }
}
@media (min-width: 360px) and (max-width: 390px) {
    
    .arrow{
        left: 15rem;
        padding: 0.5rem 1rem;
        border-radius: 21px 0 15px 0;
    }
    .about-button{
        left: 70px;
    }
    .image-nav{
        left: -4rem;
 
     }
     .media-link{
        font-size: 13px;
     }
    
  
    .demo-desc p{
        font-size : 16px;
    }
   
}
@media (max-width: 576px) {
   
   
    .contact-page {
        /* padding: 1.5rem 1.5rem; */
        display: flex;
        flex-direction: column;
        margin-top: 3rem;
        gap: 2rem
    }
    
     
   
      
    .contact-page .form-section .form-panel .form-input input,
    .contact-page .form-section .form-panel .form-input select,
    .contact-page .form-section .form-panel .form-input textarea {
        padding: 8px; 
        font-size: 16px !important;
        width: 100%;
    }
    .address-section .contact-info,
    .address-section .address-info{
        margin-bottom: 2rem;
    }
    .contact-page .form-section .form-panel .form-label {
        font-size: 16px;
    }
    .contact-page .form-section .form-panel {
        padding: 1rem;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        /* margin-top: 7rem; */
        margin-bottom: 2rem;
    }

    
    .address-section .contact-info h3 {
        font-size: 1.3rem;
    }
    .address-section .contact-info{
        max-width: 80%;
        margin-bottom: 1rem;
    }
    .contact-page .contact-info-header h3{
        font-size: 1.4rem;
        margin-top: 1rem;
        line-height: 1.4;
    }
    .contact-page .contact-info-header p{
        font-size: 0.7rem;
    }
    .address-section .address-info h5 {
        font-size: 1rem;
    }
    .form-input > .floating-label {
        font-size: 16px;
        top: 0.7rem;
    }
    .form-container {
        margin-bottom: 0.75rem; /* Tighter spacing */
    }

    .contact-page .form-section .form-panel .form-submit a {
        padding: 8px 15px;
        font-size: 13px;
        border-radius: 0;
    }


    .g-recaptcha {
        transform: scale(0.7); /* Even smaller reCAPTCHA for very small screens */
    }
}