* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.paginationjs {
    user-select: none;
}

a {
    color: #169B4A;
    text-decoration: none!important;
    font-size: 14px;
}



div.ng-dirty.ng-invalid,
div.ng-touched.ng-invalid,
input.ng-dirty.ng-invalid,
input.ng-touched.ng-invalid,
select.ng-dirty.ng-invalid,
select.ng-touched.ng-invalid,
textarea.ng-dirty.ng-invalid,
textarea.ng-touched.ng-invalid {
border-color: #d60000;
/* background-color: #fde7e7 !important; */
border-width: 1px;
}

.list-shape {
    content: '';
    width: 88%;
    height: .09rem;
    background-color: #808285;
    display: block;
    margin: 0 auto;
    text-align: center;
}
#snackbar,
#snackbar-exist,
#snackbar-contact,
#snackbar-career {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    color: white;
    z-index: 9999;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}
#snackbar.show,
#snackbar-exist.show,
#snackbar-contact.show,
#snackbar-career.show {
    visibility: visible;
    opacity: 1;
}

#snackbar img,
#snackbar-exist img,
#snackbar-contact img,
#snackbar-career img {
    width: 300px;
    margin-bottom: 30px;
}

#snackbar h2,
#snackbar-exist h2,
#snackbar-contact h2,
#snackbar-career h2 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #ffffff;
    font-weight: 700;
}

#snackbar p,
#snackbar-contact p,
#snackbar-career p {
    font-size: 16px;
    margin-bottom: 0;
}

#snackbar small,
#snackbar-exist small,
#snackbar-contact small,
#snackbar-career small {
    margin-top: 30px;
    font-style: italic;
    font-size: 14px;
}

body.modal-active {
    overflow: hidden;
}

.main {
    padding: 0 20rem;
    margin-top: -1.8rem;
}
/* banner */
.banner{
    padding: 0;
    margin-top: 4.5rem;
    position: relative;
}
.about-banner{
    img{
        border-radius: 1rem;
    }
}
.contact-banner{
    img{
        border-radius: 1rem;
    }
}
.container-banner{
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100%;
    gap: 3%;
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
    }
  }
 
  .card-banner:nth-child(1){
    position: relative;
    opacity: 1; 
    flex: 0 1 80%; 
    display: flex;
    justify-content: center;
    align-items: center;
    .card-banner-accent{
        position: absolute;
        width: 4%;
        height: 6%;
        background-color: #ffffff;
        bottom: 0;
        right: 0;
        border-top-left-radius: 50%;
        &::before{
            content: '';
            display: block;
            position: absolute;
            background-color: #ffffff;
            bottom: 100%;
            right: 0;
            width: 50%;
            height: 50%;
            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: 50%;
            height: 50%;
            background: radial-gradient(at 0% 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
        }
    }
  }
  .card-banner:nth-child(2){
    flex: 0 1 20%;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
    .card-banner-accent{
        position: absolute;
        width: 18%;
        height: 6%;
        background-color: #ffffff;
        bottom: 0;
        left: 0;
        border-top-right-radius: 50%;
        &::before{
            content: '';
            display: block;
            position: absolute;
            background-color: #ffffff;
            bottom: 100%;
            left: 0;
            width: 50%;
            height: 50%;
            background: radial-gradient(at 100% 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
        }
        &::after{
            content: '';
            display: block;
            position: absolute;
            background-color: #ffffff;
            bottom: 0;
            left: 100%;
            width: 50%;
            height:50%;
            background: radial-gradient(at 100% 0%, transparent 70%, #ffffff 70%, #ffffff 100%);
        }
    }
  }

  
  
  
  .carousel-control {
    background-color: transparent;
    border: none;
    width: 20%;
    height: 30%;
    font-size: 1.2rem;
    color: #828282;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .container-carousel-control{
    display: flex;
    /* transform: translateY(-73%); */
    position: absolute;
    left: 74%;
    bottom: 0;
    background-color: transparent;
    width: 11%;
    justify-content: center;
    align-items: center;
    gap: 0 15%;
    span:hover{
        background-color: #ffa022;
    color: white;
    }
  }
  .carousel-control:hover {
    background-color: transparent;
  }
  .section-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    /* margin-top: 2rem; */
    &::after {
        position: absolute;
        display: block;
        width: calc(100% + 1rem);
        content: '';
        height: 8%;
        bottom: -0.8em;
        background-color: #ffa500;
    }
    
}
  .carousel-indicator {
    position: absolute;
    right: 0;
    left: 35%;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0 1rem;
    bottom: 1%;
  }

  .indicator {
    width: 3%;
    height: 0.3rem;
    border-radius: 15%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .indicator.active {
    background-color: #ffa022;
    height: 0.3rem;
    width: 5%;
  }
/* about us */
.main .banner .banner-img {
 
    margin-right: -16px;
    width: 100%;
    height: 100%;
    /* height: calc(100vh - 310px); */
    object-fit: cover;
}


.content .about-desc {
    /* padding: 5rem 18rem 2rem 14rem; */
    text-align: center;
    color: #808285;
    align-items: center;
    display: flex;
    flex-direction: column;
    h2{
        font-size: 1.75rem !important;
        font-weight: 700;
        color: #292a75;
        margin-top: 2rem;
    }
    h4{
        color: #808285;
        font-weight: 100;
        font-size: 93%;
        line-height: 1.8;
        text-align: center; /* Teks rata tengah */
        margin: 0 auto; /* Elemen tetap di tengah */
        white-space: pre-line; /* Memastikan line break dikenali */
    }
    h4::before {
        content: ""; 
    }    
    
}
.vision-mission{
    margin-top: 1.5rem;
}
.vision-mission-container {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    max-width: 1200px;
    margin: auto auto 3rem auto;
}


.section-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 20px 20px 20px 45px;
    /* border-radius: 10px; */
    box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.1);
}

.section-icon img {
    width: 12rem;
    height: auto;
    margin-right: 20px;
}


/* .section-content h2 {
    font-size: 25px;
    font-weight: 700;
    color: #2c2c77;
    margin: 0;
} */

.section-line {
    width: 14%;
    height: 2px;
    background-color: #ffa500;
    margin: 4% 0;
}
.section-line-top{
    width: 70px;
    height: 2px;
    background-color: #ffa500;
    margin: 10px 0 15px 0;
  
}
.line-home{
    width: 68px;
    height: 2px;
    background-color: #ffa500;
    /* margin: 5px 0 60px 0; */
    margin-top: 0.8rem;
}
.section-content .hidden-text{
    display : none;
}
.section-content p,
.section-content ul {
    font-size: 13.5px;
    color: #777777;
    line-height: 1.5;
    word-wrap: break-word; 
    word-break: break-word;
    margin-top: 1.5rem;
    /* margin: 0; */
}

.section-content ul {
    padding-left: 16px;
    list-style-type: disc;
}

.section-content ul li {
    word-wrap: break-word; 
    word-break: break-word;
    /* overflow-wrap: anywhere;  */
    margin-bottom: 10px; 
}

.card-content p {
    color: #292A75;
}
.company-logo{
    text-align: center;
    .container {
        display: flex;
        justify-content: center;
        margin-top: 70px;
        gap: 40px;
        .logo{
            height: 3.5rem;
        }
      }
}
  
  
  .authorized h2 {
    /* font-size: 100%; */
    font-weight: 800;
    color: navy;
    margin: 10px 0;
  }
  
  .line {
    width: 70px;
    height: 2px;
    background-color: orange;
    margin: auto;
  }
/* end of about us */
.main .content {
    /* margin: auto; */
    margin-bottom: 1rem;
}

.no-scroll {
    overflow: hidden;
}

.carousel .carousel-indicators {
    justify-content: center !important;
}

.carousel .carousel-indicators button {
    background-color: #ffa022 !important;
}



.content-about {
    max-width: 50%;
    flex: 1 1 50%;
    padding: 0;
    margin: 10px
}



.container {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    grid-template-areas: 
        "item1 item1"
        "item2 item3";
}

.global-mas-sub-title {
    width: 38rem;
    font-size: 20px;
    font-weight: 400;
    padding: 1rem 6rem;
}

.card-wrap-img {
    align-content: center;
    padding: 0 4rem;
}

.card-img {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: max-content;
    gap: .5rem;

    .card {
        width: 264.85px;
        text-align: center;
        align-items: center;
        border: none !important;
        cursor: pointer;

        img {
            width: 264.85px;
            height: 165px;
            object-fit: cover;
            justify-self: center;
        }
    
        img:hover {
            box-shadow: 5px 5px #0090D6;
            transition: all 0.3s;
        }
    
    }
}
.container-contact{
    /* padding:0rem 20rem; */
    margin-bottom: 2rem;
    margin-top: 5rem;
}
.footer{
    text-align: center;
    color: #FFFFFF;
    bottom: 10rem;
    grid-area: 4 / 1 / 5 / 4;
    font-size: 0.8rem;
    margin-top: 1rem;
}
.tsit{
    /* border-radius: 50px;
    background-color: #292a75; */
    display: flex;
    gap: 3rem;
    width: 100%;
    img{
        width: 32%;
        align-self: center;
        padding: 0.5rem 2rem;
        margin: 0 0 0 -2rem
    }
    .blnk-text {
        flex-grow: 1;
        color: rgb(255 255 255);
        position: relative;
        margin: 0 -2rem;
        width: 70%;
        line-height: 4.5rem;
        padding: 0.05em 1em;
        text-align: center;
        background-color: #292a75;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        &::before {
          content: '';
          position: absolute;
          right: 100%;
          bottom: 0;
          width: 1.5rem;
          height: 1.5rem;
          background: radial-gradient(at 0% 0%, transparent 70%, #292a75 70%, #292a75 100%);
        }
      }
}

.tsit-inform {
    /* border-radius: 10px;  */
    background-color: #292a75;
    border-radius: 2rem;
    border-top-right-radius: 0;
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    justify-content: center;
    gap: 1rem;
    padding:  2.5rem 3rem 4rem 3rem ;
    font-size: 14px;
    line-height: 20px;
    /* text-align: justify; */
    color: #ffffff;
    margin: 0 -2rem;
    .tsit-desc {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        img {
            width: 5rem;
            position: relative;
            bottom: 100px;
            right: 40px;
        }

        p {
            margin-bottom: 0;
        }
    }

    .desc h2 {
        color: #ffffff;
        font-size: 100%;
        font-weight: 700;
        margin-bottom: .3rem;
    }

    .desc h4 {
        font-size: 16px;
        font-weight: 400;
        margin-top: 11px;
        p{
            margin-top: 6px;
            font-size: 0.75rem;
        }
    }
    /* .five{
        margin-right: 2.2rem;
    } */
    .menu-link {
        justify-self: center;
        padding-top: 1rem;

        h2 {
            /* font-size: 20px; */
            font-weight: 700;
            color: #ffffff;
            margin-bottom: .5rem;
        }

        ul {
            list-style: none;
            padding: 0;
            line-height: 1rem;

            li {
                padding: .2rem 0;
            }

            a {
                /* font-size: 14px; */
                color: #ffffff;
            }
        }
    }

    .media-link {
        

        h2 {
            font-size:  100%;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: .5rem;
        }

        ul {
            list-style: none;
            padding: 0;
            line-height: 1.5rem;

           
            a {
                font-size: 12px;
                color: #ffffff;
            }
        }
        .two{
            position: relative;
            right: 10rem;
        }
    }
    
    .tsit-newsletter {
        justify-self: left;
        .newsletter {
            /* margin-bottom: 1.5rem; */
            position: relative;
            bottom: 10%;

            h2 {
                font-size: 13.5px;
                color: #ffffff;
                font-weight: 800;
            }
        }
    }
    #newsletter-send-text{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        right: 0;
        text-align: center;
        line-height: 1,3rem;
    }
    .text-sub{
        margin-top: 5px;
        margin-bottom: 1rem;
        font-size: 8px;
    }
    .newsletter-form ul {
        padding: 0;
        margin: 0;
    }
    .newsletter-form ul li {
        display: inline-block;
    }
    #subscribeForm{
        display: flex;
    }
    .newsletter-form .form-input input {
        /* margin-right: -4px; */
        /* position: relative; */
        /* top: 0; */
        padding: 8px;
        font-size: 8px;
        /* background-color: #D9D9D9; */
        border: none;
        color: #808285;
        height: 1.3rem;
        width: 100%;
        border-radius: 0;
        ::placeholder{
            color:#292a75;
            opacity: 1;
        }
    }
    .newsletter-form .form-input{
        flex-grow: 1;
        display: flex;
    }
    .newsletter-form .form-button{
        /* padding: ; */
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .newsletter-form .form-input input::placeholder {
        color: #808285;
    }
    .newsletter-form .form-input input:focus {
        outline-width: 0;
    }
    .newsletter-form .form-button button {
        position: relative; 
        /* top: 1.2px; */
        background-color: #ffa022;
        border: none;
        outline-width: 0;
        color: #fff;
        padding-left: 25px;
        padding-right: 12px;
        /* transition: 0.2s all; */
        height: 1.3rem;
        line-height: 1.3rem;
    }
    #newsletter-send-text{
        font-size: 0.5rem;
    }
    .newsletter-form .form-button button:hover {
        background-color: #dd5510;
    }

    .contact-section {
        text-align: left;
        
    }

    .contact-section ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .contact-section ul li span{
        margin-right: 5px;
    }
    .contact-section .icon-social {
       /* margin: 0 0 0 5px; */
    }
    .contact-section .icon-social img {
        width: 1.5rem;
        margin-bottom: 1rem;
        background-color: #ffffff;
     
    }
    .contact-section .icon-social:hover img {
        background-color: #ffa022;
    }   
}

.icon-contact {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.5rem;
}



/* page home about  */


.container-about {
    display: flex;
    align-items: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2%;
    gap: 4%;
}
.container-about h2 {
    font-size: 30px;
    font-weight: 700;
    color: #292a75;
    margin-bottom : 30px;
}

.container-about .text-about {
   
    color: #808285;
    text-align: left;
}

.container-about .about-button {
    margin-top: .5rem;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid #989a9c;
    padding: .375rem .75rem;
    font-size: 11px;
    color: #989a9c;
    border-radius: 5px;
   
}

.container-about .about-button:hover {
    background-color: #ffa022;
    border-color: #ffa022;
    color : #fff;
}   
.image-container {
    flex: 1 1 50%;
    max-width: 45%;
    padding: 3rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-container img {
    width: 20rem;
    height: 25rem;
    object-fit: cover;
}

.content-about {
    max-width: 50%;
    flex: 1 1 50%;
    padding: 0;
    align-items: center;
    margin: 20px
}
/* scroll top up button */
.home-container-article  img:hover{
    transform: scale(1.01);
}
.news-section img:hover{
    transform: scale(1.01);
}
.scroll-to-top {
    position: fixed;
    z-index: 10000;
    right: 1rem;
    bottom: 1rem;
    display: none;
}
.scroll-to-top a {
font-size: 0.5rem;
width: 100%;
height: 100%;
border-radius: 50%;
color: #FFFFFF;
line-height: 3.1rem;
text-align: center;
font-size: 40px;
}

.fas {
    color: #000000 !important;
}

.content .about-company-leader {
    background-color: #F2F2F2;
    padding: 3rem 12rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 55px;
    border-radius: 0 5rem 0 5rem;
    -webkit-border-radius: 0 5rem 0 5rem;
    -moz-border-radius: 0 5rem 0 5rem;
    -ms-border-radius: 0 5rem 0 5rem;
    -o-border-radius: 0 5rem 0 5rem;
}

.about-company-leader .founder-container,
.about-company-leader .director-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.founder-container .founder-img-container,
.director-container .director-img-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.director-img-wrapper,
.founder-img-wrapper {
    width: 270px;
    height: 300px;
    position: relative;
    background-color: transparent;
    overflow: hidden;
    display: flex;
    justify-content: center;
}


.content .core-value {
    padding: 3rem 8rem;
    background-color: #F2F2F2;
    border-radius: 0 6rem 0 6rem;
    -webkit-border-radius: 0 6rem 0 6rem;
    -moz-border-radius: 0 6rem 0 6rem;
    -ms-border-radius: 0 6rem 0 6rem;
    -o-border-radius: 0 6rem 0 6rem;
}

.core-value h2 {
    color: #0090D6;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

.core-value .core-value-header-desc {
    color: #808285;
    text-align: left;
    margin-bottom: 2rem;
}

.core-value .core-value-content {
    display: flex;
    gap: 20px;
    margin-bottom: 1rem;
}

.core-value-content .core-value-acronym {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    border-radius: 1rem 0 1rem 0;
    -webkit-border-radius: 1rem 0 1rem 0;
    -moz-border-radius: 1rem 0 1rem 0;
    -ms-border-radius: 1rem 0 1rem 0;
    -o-border-radius: 1rem 0 1rem 0;
}

.core-value-acronym .acronym-container {
    background-color: #67C042;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.core-value-acronym .acronym-container h1 {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 65px;
    margin: 0;
}

.core-value-content .core-value-desc {
    width: 90%;
    background-color: #0090D6;
    border-radius: 0 1rem 0 1rem;
    padding: 1rem;
    color: #FFFFFF;
    -webkit-border-radius: 0 1rem 0 1rem;
    -moz-border-radius: 0 1rem 0 1rem;
    -ms-border-radius: 0 1rem 0 1rem;
    -o-border-radius: 0 1rem 0 1rem;
}

.core-value-content .core-value-desc h6 {
    font-weight: 700;
}

.core-value-content .core-value-desc p {
    font-size: 14px;
    text-align: left;
}

.title-home-article{
    display : flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;    
    h2{
        color: #292a75;
        font-weight: 700;
        font-size: 1.7rem;
    }
    hr {
        width: 6%;             
        height: 10px;           
        background-color: #ffa022; 
        border: none;           
      }  
}


/*  Demo Section */

.home-container-demo{
    /* padding: 0 20rem; */
    margin : 3.3rem 0 4.5rem 0;
    .demo{
        padding: 1rem 0;
        border-radius: 2rem;
        background-color: #ffa022;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 -2rem;
        h1{
            margin-top: 2rem;
            font-weight: 650;
            font-size: 1.7rem;
        }
    }
}
.line-demo{
    width: 4.5rem;
    height: 2px;
    background-color: #ffffff;
    margin: 10px 0 20px 0;
}
.demo-desc{
   width: 63%;
   text-align: center;
}
.demo-desc p{
    font-size : 0.8rem;
}

.home-container-demo .demo-button {
    margin-bottom: 2rem;
    display: inline-block;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid #fff;
    padding: .375rem .75rem;
    font-size: 0.8rem;
    color: #fff;
    border-radius: 4px;
   
}

.home-container-demo .demo-button:hover {
    background-color: #fff;
    border-color: #fff;
    color : #ffa022;
}   

.gallery-page {
    padding: 3rem 14rem 0 14rem;
}

  
.gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.img-content {
    border: 1px solid #ccc;
    border-radius: 0 2rem 0 2rem;
}

.img-content .img-file{
    width: 100%;
    overflow: hidden;
    border-radius: 0 2rem 0 2rem;
    -webkit-border-radius: 0 2rem 0 2rem;
    -moz-border-radius: 0 2rem 0 2rem;
    -ms-border-radius: 0 2rem 0 2rem;
    -o-border-radius: 0 2rem 0 2rem;
}

.img-content .img-file img {
    width: 100%;
    height: 280px;
    /* transition: transform 0.3s ease-in-out; */
}

.img-content .img-file img:hover {
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
}

.img-content .img-name {
    padding: 1rem 2rem;
    color: #808285;
    text-align: justify;
    hyphens: auto;
}

.search-description {
    color: #808285;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* News and Article */


/* Article Single */

.news-single-section {
    margin-top: 2rem;
    /* padding:0 12rem 3rem 12rem; */
}

.news-single-section, .news-single-container {
    margin-bottom: 2rem;
}
.line-article-detail{
    width: 3.8rem;
    height: 2px;
    background-color: #ffa500;
    margin: 5px 0 15px 0;
}

.news-single-container h3 {
    font-weight: 700;
    color: #292a75;
    margin-bottom: .3rem;
}

.news-single-container .news-single-date,
.news-single-container .news-single-content {
    color: #808285;
}

.news-single-container .news-single-content {
    text-align: justify;
    margin-bottom: 4rem;
}

.news-single-container .news-single-img {
    margin: 1rem 0 1.5rem 0;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.tags-detail{
    margin-top: 2rem;
}
.tags-detail .tags{
    font-style: italic;
    color: #ffa630;
    margin-right: 1.5rem;
    font-size: 0.8rem;
}
.tags-detail .tag{
    padding: 3px 6px;
    font-size: 10px;
}
.share-container{
    margin-top: 1.1rem;
}
.share-container ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.share-container .title{
    font-style: italic;
    color: #ffa630;
    margin-right: 1.25rem;
    font-size: 0.8rem;
}
.share-container .icon-social{
    padding-right: 5px;
    padding-left: 5px;
}

.share-container .icon-social img{
    width: 23px;
    margin-bottom: 1rem;
    background-color: #f2f2f2;
}
.share-container .icon-social:hover img{
    background-color: #ffa022;
    fill: white;
}
.news-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news-single-section .news-back-button {
    color: #808285 !important;
    font-size: 13px;
}


.news-back-button i {
    /* background-color: #808285; */
    font-size: 13px;
    color: #808285;
    padding: .250rem 1.3rem;
    border-radius: 0 .2rem 0 .2rem;
    -webkit-border-radius: 0 .2rem 0 .2rem;
    -moz-border-radius: 0 .2rem 0 .2rem;
    -ms-border-radius: 0 .2rem 0 .2rem;
    -o-border-radius: 0 .2rem 0 .2rem;
}
.line-related{
    width: 70px;
    height: 2px;
    background-color: #ffa500;
    margin: 5px 0 17.5px 0;
}


.news-single-section .related-news h2 {
    color: #292a75;
    font-weight: 700;
    font-size: 1.7rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.news-container-releated{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
}
.img-related{
    width:100%;
    max-height: 12rem;
    min-height: 12rem;
}
.main-releated{
    background-color: #f2f2f2;
    height: 22.3rem;
}
.main-related-content h2{
    font-size: 1rem;
    color: #808285 !important;
    font-weight: 100 !important;
    margin-top: 0.5rem !important;
    margin-left: 0.5rem;
}
.main-related-content .main-related-tags{
    max-height: 9.8rem;
    display: flex;
    height: 12rem;
    padding: 0 0.8rem;
    align-items: center;
    span{
        text-transform: capitalize;
    }
}
.main-related-content .main-related-tags .tag-related{
    background-color: #e0e8ff;
    color: #2b2b5f;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 10px;
    margin-right: 5px;
    display: inline-block;
}
/* Contact Page */

.contact-page {
    /* padding: 3rem 20rem; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-content: center;
    gap: 6rem;
    margin-top: 6.1rem;
}

.contact-page .form-section .form-panel {
    width: 100%;
    margin: 0;
    box-shadow: 1px 3px 2.5px -1px rgba(0, 0, 0, 0.1);
    /* -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.12); */
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    padding: 2rem 7rem 3rem 4rem;
    right: 6rem;
}

.contact-page .form-section .form-panel .form-label {
    font-size: 0.8rem;
}

.contact-page .form-section .form-panel .form-input input {
    padding: 5px;
    padding-left: 0px;
    border: solid #808285 0px;
    border-bottom: solid #D9D9D9 2px;
    width: 113%;
    color: #808285;
}

.contact-page .form-section .form-panel .form-input input:hover {
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-input input:focus {
    outline: none;
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-input select {
    padding: 10px;
    padding-left: 0px;
    background-color: #FFFFFF;
    border: solid #808285 0px;
    border-bottom: solid #D9D9D9 2px;
    width: 100%;
    color: #808285;
}

.contact-page .form-section .form-panel .form-input select:hover {
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-input select:focus {
    outline: none;
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-input textarea {
    padding: 10px;
    padding-left: 0px;
    border: solid #808285 0px;
    border-bottom: solid #D9D9D9 2px;
    width: 100%;
    color: #808285;
}

.contact-page .form-section .form-panel .form-input textarea:hover {
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-input textarea:focus {
    outline: none;
    border-bottom: solid #ffa022 2px;
}

.contact-page .form-section .form-panel .form-submit a {
    background-color: #ffa022;
    color: #FFFFFF;
    font-size: 12px;
    padding: 7px 20px;
    border-radius: 5px;
}

.contact-page .form-section .form-panel .form-submit a:hover {
    background-color: #e05713;
}

.form-container {
    display: flex;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.form-message {
    align-items: center;
}

.form-label {
    flex: 1;
    margin-bottom: 0 !important;
    color: #808285;
}

.form-input {
    position: relative;
    flex: 2;
}
.form-input > .floating-label{
  position: absolute;
  pointer-events: none;
  left: 0;
  color: #828282;
  transition: 0.2s ease all;
  font-size: 0.8rem;
  top: 1rem;
}
.form-input input:focus ~ .floating-label{
   display: none;
  }
  .floating-label.hidden {
    display: none; /* Hide label when input has a value */
}
.contact-page .contact-info-header
{
    display: none;
}

.contact-page .contact-info-header h3,
.address-section .contact-info h3 {
    color: #292a75;
    font-weight: 800;
    font-size: 1.7rem;
}
.address-section .contact-info,
.address-section .address-info {
    margin-bottom: 1.3rem;
}

.contact-page .contact-info-header p,
.address-section .contact-info p,
.address-section .address-info p {
    color: #808285;
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
}

.address-section .address-info h5 {
    color: #ffa022;
    font-weight: 700;
    font-size: 0.8rem;
}
.address-text{
    font-size: 0.85rem;
}
.address-info .phone-section {
    margin-bottom: 7px;
    align-items: center;
}

.address-info .phone-section span,
.address-info .email-section span {
    color: #808285;
}

.address-info .phone-section img,
.address-info .email-section img {
    background-color: #808285;
}

/* .recaptcha-wrapper {
    width: 100%;
    display: flex;
    justify-content: start;
} */

.recaptcha-wrapper {
    display: flex;
    justify-content: start;
}

.g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
}

/*  Career Section */


/* product */
.product-desc {
    margin-top: 50px;
    /* padding: 0 15rem; */
  }
  
  .product-desc .container-product {
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .product-desc .container-product h1 {
    color: #292a75;
    font-size: 1.65rem;
    margin-bottom: 20px;
    font-weight: 800;
  }
  
  .product-desc .container-product p {
    color: #8f8f8f;
    font-size: 13px;
    text-align: center;
    margin-bottom: 0;
}
        
  
  .product-desc .container-product .line {
    width: 65px;
    height: 2.5px;
    background-color: #ff9900;
    margin: 0 auto 20px;
  }

  
  .product-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 25px;
    align-items: stretch;
  }
  .content-product:nth-child(1) { 
    grid-area: 1 / 1 / 2 / 3; 
    background-color: #f2f2f2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    /* max-height: 17rem; */
    p{
        font-size: 13px;
        color: #808285;
        max-width: 22rem;
    }
    h2{
        font-weight: 750;
        color: #292a75;
        /* margin-top: 2rem; */
        font-size: 1.8rem;
    }
} 
  .content-product:nth-child(2) { grid-area: 1 / 3 / 2 / 5; } 
  .content-product:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } 
  .content-product:nth-child(4) {
     grid-area: 2 / 3 / 3 / 5; 
     background-color: #f2f2f2;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start;
     /* max-height: 17rem; */
     p{
        font-size: 13px;
        color: #808285;
        max-width: 22rem;
    }
    h2{
        font-weight: 750;
        color: #292a75;
        /* margin-top: 2rem; */
        font-size: 1.8rem;
    }
} 
  
   
  .content-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* max-height: 96%; */
  }
  .content-product .line-product{
    width: 69px;
    height: 2px;
    background-color: #ff9900;
    margin: 13px 0;
  }
  .content-product .product-button {
    /* margin-top: 1.5rem; */
    display: inline-block;
    font-weight: 200;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid #808285;
    padding: .375rem .75rem;
    font-size: 0.8rem;
    color: #808285;
    border-radius: 4px;
   
}
.content-product .product-button:hover {
    background-color: #ffa022;
    border-color: #ffa022;
    font-weight: 200;
    color : #fff;
}   

/* end of product */

/* Search Page */

.content .page-search-section {
    margin-top: 2rem;
    /* padding: 0 6rem 0 6rem; */
}

.page-search-section .search-title {
    text-align: center;
}

.page-search-section .search-title h2 {
    color: #0090D6;
    font-weight: 700;
}

.page-search-section .search-description,
.page-search-section .search-items .search-not-found {
    color: #808285;
    font-size: 2rem;
}
.nav-hidden{
    display: none !important;
}
.page-search-section .search-items .search-not-found {
    font-size: 1em;
}
.search-items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    grid-template-rows: auto;
    grid-row-gap: 2rem;
    gap: 1.5rem;
    padding: 1rem 0rem 0 14.5rem;
    position: relative;
    bottom: 6rem;
}

.img-search{
    width: 100%;
    max-height: 7rem;
    object-fit: cover;
    min-height: 7rem;
}
.page-btn.active {
    background-color: #e7efff;
    color: black;
    font-weight: normal;
}
.pagination-search{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 5rem;
    margin-left: 13rem;
    a{
        color: black;
    }
    #nextBtn{
        color:black !important;
        padding: -1rem 0 !important;
        
    }
    a:hover{
        background-color: #e7efff;
        color: black;
        padding: 0 3px;
    }
    .number-pagination a,
    .arrow-page a{
        margin: 0 5px;
        padding: 2px 6px;
        border-radius: 1px;
        font-size: 0.5rem;
    }
}


.search-banner{
   /* padding : 0 6rem; */
   margin-bottom: 3rem;
   img{
        width: 100%;
        height: auto;
        border-radius: 1rem;
   }
}
.search-file img{
    width: 100%;

}
.title{
    position: relative;
    bottom: 0.5rem;
}
.list-container {
    width: 12rem;
    font-weight: 500;
    overflow: hidden;
    position: relative;
    top: -0.65rem;
    z-index: 2;
  
}

.list-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    align-items: center;
    background-color: #FFF;
    color: #9E9E9E;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 0.3rem;
    height: 2rem;
    /* font-size: 9.8px; */
    box-shadow: 0 4px 6px  rgba(0,0,0,0.1)
}
.article{
    margin-top: 3%;
}
.list-item:hover{
    cursor: pointer;
    background-color: #FFA726; /* Orange background */
    color: #FFFFFF;
}
.list-item .item-title {
    font-size: 13px;
    font-weight: 100;
}

.list-item .item-count {
    font-size: 12px;
    /* font-weight: bold; */
}

/* Active state styling */
.list-item.active {
    background-color: #FFA726; /* Orange background */
    color: #FFFFFF; /* White text */
}

/* Roadshow & Artcile */

.main-new{
    display: flex;
    margin: 20px auto;
    background-color: #f5f5f5;
    /* border-radius: 8px; */
    overflow: hidden;       
    /* padding: 0px 0 24px 0; */
    height: 16rem;
}
.main-new .main-new-content{
    padding: 20px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .tag{
        padding: 4px 6px;
        font-size: 9.8px;
    }
}
.main-new .main-new-content h2{
    color: #2b2b5f;
    font-size: 1.5rem;
    margin: 0 2rem;
    font-weight: 100;
}

.main-new .main-new-img {
    flex: 1;
    img{
        width: 100%;
        object-fit: cover;
        height: 16rem;
    }
}
.search{
    /* padding: 0 12rem; */
    margin-top: 1rem;
}
.search-result{
    /* padding: 0 6rem; */
    margin-top: 1rem;
}
.search-bar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px 15px;
    border-radius: 7px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* border: 1px solid #e0e0e0; */
    margin-bottom: 2rem;
    /* margin-bottom: 2.5rem; */
    margin-top: 2rem;
}
.news-tags {
    margin-top: 20px;
    margin-left: 2rem;
}

.tag {
    background-color: #e0e8ff;
    color: #2b2b5f;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 8.5px;
    margin-right: 5px;
    display: inline-block;
    text-transform: capitalize;
}

.nav-top{
    position: sticky;
    /* top: 0;  */
    left: 0; 
    width: calc(100% + 40rem); /* Menambah lebar agar mengimbangi padding */
    margin-left: -20rem; /* Menggeser elemen ke kiri */
    top: 3.5rem;
    z-index: 1000;
    height: 1.5rem;
    background-color: #292a75;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 20rem;
    margin-top: 1.9rem;
    li{
        list-style: none;
        margin-right: 1rem;
        a{
            color: #f2f2f2;
            font-size: 0.75rem;
        }
    }
}

.news-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 1.8rem;
    grid-row-gap: 15px;
    margin-top: 2.4rem;
}
/* .news-container .card-home:nth-child(1){
  
    display: flex;
    margin: 20px auto;
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;       
    .card-content{
        padding: 20px;
        flex: 1;
        flex-direction: column;
        justify-content: space-between;
        h2{
            color: #2b2b5f;
            font-size: 1.8rem;
            margin: 0;
        }
    }
} */
/* .news-container .card-home:nth-child(1) {
    grid-area: 1 / 1 / 2 / 5; 
   
} */
/* 
.news-container .card-home:nth-child(1) .card-content {
   
} */

/* .news-container .card-home:nth-child(1) .card-content h2 {
   
} */

.news-container .card-home:nth-child(1){
    grid-area: 1 / 1 / 3 / 3;
    height : 18rem;
    .main-news-img img{
        max-height: 19rem;
        min-height: 19rem;
    }
    .card-footer-news{
        position: relative;
        bottom: 4rem;
    }
}
.news-container .card-home:nth-child(2){
    grid-area: 1 / 3 / 3 / 5;
    height: 18rem;
    .main-news-img img{
        max-height: 19rem;
        min-height: 19rem;
    }
    .card-footer-news{
        position: relative;
        bottom: 4rem;
    }
}
.main-news{
    background-color:#f5f5f5;
    width: 100%;
    margin-bottom: 2rem;
    height: auto;
}


.news-container-home{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 1.5rem;
    grid-row-gap: 0px;
 }
 
.main-news-img img{
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}

 .main-news-content{
    padding-left: 1rem;
    margin-bottom:0.5rem;
    h2{
        font-size: 1rem;
        margin-top:1rem;    
        margin-bottom:2rem;
        color:#2b2b5f;
    }
}

.news-tags-main{
    height: auto;
}
.news-tags-main .tag{
    background-color: #e0e8ff;
    color: #2b2b5f;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.7rem;
    margin-right: 5px;
    display: inline-block;
    /* position: relative;
    top: 4rem; */
}
/* Styling for the search icon */
.search-icon {
    width: 16px;
    height: 26px;
    margin-right: 10px;
    opacity: 0.6;
}

/* Styling for the search input field */
.search-input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #555;
    width: 100%;
}

.search-input::placeholder {
    color: #b0b0b0;
    opacity: 1;
}

/* .main-news-home .main-news-img img{
    width: 100%;
    max-height: 15rem;
    overflow: hidden;
    min-height: 15rem;
    object-fit: cover;
}
.main-news-home .main-news-img img{
    width: 100%;
    max-height: 9rem; 
    overflow: hidden; 
}
.main-news-home .card-content  h2{
    font-size: 1rem;
    margin-top:1rem;    
    margin-bottom:2rem;
    color:#2b2b5f;
}
.main-news-home .card-content {
flex-grow: 1;
}
.main-news-home .main-news-content .news-tags-main{
display: flex;
align-items: center;
}
.main-news-home{
    background-color:#f5f5f5;
    width: 100%;
    margin-bottom: 2rem;
    height: auto;
    display: flex;
    flex-direction: column;
    
} */

/* .nav-top{
    margin-top: 10px;
} */
/* end of Roadshow & Article */
.card-home{
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pastikan footer selalu di bawah */
    width: 100%;
    background-color: #f2f2f2;
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
    min-height: 20rem;
}

/* Gambar */
.card-image {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    /* transform: scale(1.01); */
}
.card-image:hover {
    transform: scale(1.01);
}

/* Konten card */
.card-content {
    flex-grow: 1;
    min-height: 60px; /* Sesuaikan dengan kebutuhan */
    margin-bottom: 4rem;
    padding: 0  1rem;
    margin-top: 1rem;
}


.card-title {
    font-size: 1.2em;
    margin-bottom: 8px;
    color: #333;
}

.card-tag {
    font-size: 0.85rem;
    color: #666;
}

/* Footer */
.card-footer-news {
    text-align: left; 
    font-size: 0.9em;
    padding: 0 0 0 1rem;
}
/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-label {
    font-size: 16px;
    color: #333;
  }
  
  .required {
    color: red;
  }
  
  /* Dropdown Container Styling */
  .dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .dropdown-toggles {
    width: 70%;
    padding: 2% 4%;
    font-size: 0.7rem;
    color: #808285;
    border: none;
    border-radius: 8px;
    background-color: #ffffff;
     border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: left;
    transition: border 0.3s ease;
  }
  
  .dropdown-toggles:focus,
  .dropdown-toggles:hover {
    border-color: #007BFF;
    outline: none;
  }
  
  /* Dropdown Menu */
  .dropdown-menus {
    position: absolute;
   
    top: 100%;
    left: -0.5rem;
    width: 75%;
    font-size: 1rem;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  .dropdown-container.open .dropdown-menus {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; 
  }
  .dropdown-container.open{
    bottom: 3rem;
  }
  .dropdown-card {
    color: #808285;
    background-color: #ffffff;
    margin: 10px;
    padding: 2% 4%;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 0.7rem;
    opacity: 0;
    transform: translateY(50px);
  }
  
  .dropdown-container.open .dropdown-card {
    animation: slideUp 0.5s ease forwards;
  }
  
  .dropdown-card:nth-child(1) {
    animation-delay: 0.1s;
  }
  .dropdown-card:nth-child(2) {
    animation-delay: 0.2s;
  }
  .dropdown-card:nth-child(3) {
    animation-delay: 0.3s;
  }
  
  .dropdown-card:hover {
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
.show .dropdown-menus {
    display: block;
}


#dropdown-icon {
    transition: transform 0.3s ease;
    
    font-size: 0.6rem;
    
}
.icon-id{
    margin-left: 2.8rem;
}
.icon-eng{
    margin-left: 1.8rem;
}