@charset "UTF-8";

/*
Theme Name: PluviLabs Theme
Theme URI: http://www.pluvilabs.com/
Author: PluviLabs
Author URI: http://www.pluvilabs.com/
Description: 
Requires at least: 5.3
Tested up to: 6.5
Requires PHP: 6.5
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: PluviLabs
Tags: PluviLabs
PluviLabs Theme, (C) 2024 pluvilabs.com
PluviLabs Theme
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root{
    --red: #BB1D33;
    --white: #FFFFFF;
    --black: #323232;
    --lightred: #F8E8EB;
    --lightblue: #F2F4F7;
    --blue: #2841CD;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body{
    font-family: "Lato", sans-serif;
}

img{
    width: 100%;
    height: auto;
}

.container{
    max-width: 1224px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 21px;
    padding-right: 21px;
}

.cta-group{
    display: flex;
    align-items: center;
}

.cta{
    padding: 11px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.cta span i{
    margin-right: 7px;
    font-size: 18px;
    font-weight: 600;
}

.wa-cta{
    background-color: var(--blue);
    color: var(--white);
    margin-right: 11px;
}

.load-more-button{
    color: var(--white);
    background-color: var(--blue);
    margin: 0 auto;
}

.leads-cta{
    border: 1px solid var(--blue);
    background-color: var(--white);
    color: var(--blue);
}

.more-cta{
    font-size: 16px;
    text-decoration: none;
    color: var(--blue);
}

.more-cta span i{
    margin-left: 7px;
    font-size: 18px;
    font-weight: 600;
}

.no-scroll{
    overflow: hidden;
}

/* Header Section */

.header-group{
    padding-top: 11px;
    padding-bottom: 11px;
    position: sticky;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0px 1px 22.4px 0px rgba(0, 0, 0, .09);
    backdrop-filter: blur(6.099999904632568px);
    min-height: 90px;
    z-index: 3;
    top: 0;
    width: 100%;
}

.header-group .header-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-list .header-logo{
    max-width: 205px;
    overflow: hidden;
}

.header-logo a img{
    max-width: 265px;
}

.header-list .header-menu{

}

.header-menu .nav-group{
    /* position: relative; */
}

.nav-list ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.nav-list ul .nav-item{
    list-style: none;
    padding: 11px;
    /* cursor: pointer; */
    margin-right: 7px;
    font-weight: 600;
    font-size: 16px;
}

.nav-item a{
    text-decoration: none;
    color: var(--black);
}

.nav-item span i{
    margin-left: 7px;
}

.nav-list ul .dropdown{
    /* position: relative; */
}

.nav-list ul .dropdown:hover .dropdown-list{
    display: flex;
}


.dropdown .dropdown-list{
    position: absolute;
    padding: 21px;
    flex-wrap: wrap;
    background-color: var(--white);
    left: 41px;
    box-shadow: 0px 10px 15.4px -5px rgba(0, 0, 0, 0.25);
    max-width: 864px;
    width: 100%;
    /* display: flex; */
    border-radius: 7px;
    top: calc(100% - 0px);
    display: none;
}

.dropdown .dropdown-list:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 21px;
    top: -20px;
    left: 0;
    background: transparent;
}

.dropdown-list .dropdown-item{
    max-width: 284px;
}

.dropdown-list .nav-tab-list{
    max-width: 324px;
    flex-basis: 25%;
}

.dropdown-list .nav-tab-content-group{
    max-width: 582px;
    flex-basis: 75%;
    /* position: relative; */
}

.nav-tab-content .dropdown-item:nth-child(1){
    position: absolute;
    top: 0;
    width: fit-content;
    cursor: default !important;
}

.nav-tab-content .dropdown-item:nth-child(1) a{
    cursor: default !important;
    pointer-events: none;
}

.nav-tab-content .dropdown-item:nth-child(1):hover{
    background-color: var(--white);
}

.nav-tab-content .dropdown-item:nth-child(1) a .nav-icon{
    display: none;
}

.nav-tab-content .dropdown-item:nth-child(1) a .nav-item-detail .nav-item-title{
    color: #8b95a5;
}

.nav-tab-content-group .nav-tab-content{
    display: flex;
    flex-wrap: wrap;
    padding-top: 31px;
}

.nav-tab-content .dropdown-item{
    flex-basis: calc(50% - 21px);
    margin-bottom: 21px;
    margin-right: 21px;
    border-radius: 11px;
    padding: 21px 10px !important;
}

.nav-tab-content .dropdown-item:hover{
    background-color: var(--lightblue);
}

.dropdown-item a{
    display: flex;
    align-items: flex-start;
}

.dropdown-item a .nav-icon{
    padding: 6px;
    margin-right: 11px;
    border-radius: 5px;
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon img{
    max-width: 24px;
    object-fit: contain;
}

.dropdown-item a .nav-item-detail{

}


.nav-item-detail .nav-item-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 7px;
}

.nav-item-detail .nav-item-desc{
    font-size: 16px;
    font-weight: 500;
}

.dropdown-list .nav-tab-list{

}

.nav-tab-list .nav-tab{
    padding: 21px;
    margin-bottom: 11px;
    border-radius: 11px;
    transition: 0.1s ease-in;
    cursor: pointer;
}



.nav-tab-list .nav-tab.active{
    /* border: 1px solid var(--red); */
    font-weight: 600;
    background-color: var(--lightblue);
}

.nav-tab-list .nav-tab:hover{
    font-weight: 600;
    background-color: var(--lightblue);
}

/* Hide desktop header on mobile */
@media (max-width: 991px) {
/* Mobile Version Header */
.mobile-header-group {
    display: none;
    padding: 11px 0;
    position: sticky;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0px 1px 22.4px 0px rgba(0, 0, 0, .09);
    backdrop-filter: blur(6.099999904632568px);
    top: 0;
    width: 100%;
    z-index: 3;
}

.mobile-header-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 31px;
    padding-left: 31px;
}

.mobile-header-logo img {
    max-width: 180px;
}

.hamburger {
    font-size: 24px;
    cursor: pointer;
    width: fit-content; /* Fit content width */
}

.mobile-header-menu {
    /* visibility: hidden; */
    background-color: #fff;
    width: 100%;
    max-height: 100vh; /* Make menu wrapper max-height 100vh */
    overflow-y: auto; /* Make menu scrollable */
    position: fixed;
    /* top: 0; */
    left: -100%; /* Start off-screen to the left */
    z-index: 9999;
    transition: left 0.3s ease; /* Smooth slide-in transition */
    height: 100vh;
    overflow: scroll;
    padding-bottom: 50px;
}

.mobile-header-menu.active {
    left: 0; /* Slide in from the left */
    /* visibility: visible; */
}

.mobile-header-menu .header-cta {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: #fff; /* Background color white */
    padding: 15px; /* Padding to make it thicker */
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1); /* Add some shadow for separation */
    height: 80px;
}

.mobile-header-menu .header-cta .cta-group {
    justify-content: end;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: fit-content;
    margin-bottom: 100%;
}

.mobile-nav-item {
    border-bottom: 1px solid #ddd;
}

.mobile-nav-item a {
    display: block;
    padding: 25px 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.mobile-nav-list .nav-item{
        border-bottom: 1px solid #ddd;
}

.nav-item a{
    display: flex;
    padding: 25px 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333;

}

.mobile-nav-item .mobile-dropdown-list {
    display: none;
    padding-left: 20px;
}

.mobile-nav-item.active .mobile-dropdown-list {
    display: block;
}

.mobile-nav-item .mobile-dropdown-list .nav-item:first-child {
    display: none; /* Hide the first item for Layanan and Solusi */
}


    .header-group {
        display: none;
    }
    .mobile-header-group {
        display: block;
    }
}

/* Hide mobile header on desktop */
@media (min-width: 992px) {
    .mobile-header-group {
        display: none;
    }
}


/* Header Section */


/* Skeleton Image */

.image-skeleton {
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
}

.image-skeleton::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton Image */

/* Hero Home Section */

.hero-home-group{
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative;
}

.hero-home-group .hero-home-list{
    width: 100%;
}

.hero-home-list .hero-slider-item{
    position: relative;
}

.hero-slider-item .hero-slider-image{
    border-radius: 15px;
    max-width: 881px;
    overflow: hidden;
    height: 532px;
    position: relative;
}

.hero-slider-item .hero-slider-image::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--black);
    position: absolute;
    top: 0;
    opacity: 50%;
}

.hero-slider-item .hero-slider-image img{
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-slider-item .hero-slider-detail{
    position: absolute;
    background-color: var(--white);
    padding: 60px 16px;
    max-width: 569px;
    border-radius: 15px;
    z-index: 1;
    right: 10px;
    top: 50%;
    transform: translate(0%, -50%);
    box-shadow: 0px 4px 13.4px 0px rgba(0, 0, 0, 0.25);
}

.hero-slider-detail .small-title{
    font-size: 14px;
    font-weight: 500;
    color: var(--red);
}

.hero-slider-detail .hero-title{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 11px;

}

.hero-slider-detail .hero-desc{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 21px;
}

.slider-control{
    position: absolute;
    max-width: 101px;
    display: flex;
    align-items: center;
    gap: 11px;
    right: 30px;
    bottom: 64px;
}

.slider-control .next-slider,.slider-control .prev-slider{
    width: 45px;
    height: 45px;
    border-radius: 100%;
    border: 0.5px solid var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
}

.slider-control .next-slider i,.slider-control .prev-slider i{
    color: var(--red);
    font-size: 21px;
    font-weight: 600;
}

/* Hero Home Section */

/* Services Home Section */

.home-service-group {
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    justify-content: space-between;
}

.home-service-group .home-service-detail{
    max-width: 444px;
    margin-right: 21px;
}

.home-service-detail .service-title{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 11px;
    color: var(--black);
}

.home-service-detail .service-desc{
    font-size: 16px;
    color: var(--black);
    margin-bottom: 21px;
}

.home-service-detail .service-cta{
    margin-bottom: 21px;
}

.home-service-detail .service-image{
    max-width: 444px;
    overflow: hidden;
    margin-top: 71px;
}

.home-service-group .services-list{
    max-width: 723px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.services-list .service-item{
    flex-basis: calc(50% - 11px);
    margin-right: 11px;
    margin-bottom: 11px;
    padding: 17px 15px;
    background-color: var(--lightblue);
    border-radius: 15px;
    height: auto;
    max-width: 356px;
    width: 100%;
}

.service-item .service-icon{
    padding: 7px;
    border-radius: 7px;
    background-color: var(--red);
    width: fit-content;
    margin-bottom: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-icon img{
    max-width: 24px;
    object-fit: contain;
}

.service-icon svg{
    max-width: 30px;
    max-height: 30px;
}

.service-item .service-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 11px;
    color: var(--black);
}

.service-item .service-desc{
    font-size: 15px;
    color: var(--black);
}

.service-item .service-cta{
    margin-top: 21px;
}

/* Services Home Section */


/* Client Section */

.client-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.client-group .client-wrapper{
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
}

.client-wrapper .client-list{
    display: flex;
    animation: marquee 40s linear infinite;
    flex-direction: row;
}

.client-group .client-wrapper::before{
    content: '';
    height: 36px;
    position: absolute;
    width: 20px;
    z-index: 2;
    left: 0;
    background: linear-gradient(to right, white, transparent)
}

.client-group .client-wrapper::after{
    content: '';
    height: 36px;
    position: absolute;
    width: 110px;
    right: 0;
    z-index: 2;
    background: linear-gradient(to left, white, transparent);
}

.client-list .client-item{
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(1);
    transition: 0.1s ease-in;
}

.client-list .client-item:hover{
    filter: grayscale(0);
}

.client-list .client-item img{
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.client-group .client-title{
    font-size: 32px;
    font-weight: 600;
    margin: 0 auto;
    margin-bottom: 32px;
    text-align: center;
    max-width: 875px;
}


/* Client Section */

/* Small USP Section */

.small-usp-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.small-usp-group .small-usp-detail{
    max-width: 524px;
}

.small-usp-group .small-usp-image{
    max-width: 602px;
    overflow: hidden;
    border-radius: 15px;
}

.small-usp-group .small-usp-image img{
    max-width: 602px;
}

.small-usp-detail .small-usp-title{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 11px;
}

.small-usp-detail .small-usp-desc{
    margin-bottom: 21px;
    font-size: 16px;
}

.small-usp-point ul li{
    font-size: 16px;
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 11px;
}

.small-usp-point ul li .small-usp-text{
    font-size: 16px;
}

.small-usp-point ul li span{
    margin-right: 11px;
}

.small-usp-point ul li span .small-usp-icon{
    background-color: var(--red);
    padding: 6px;
    border-radius: 7px;
    width: fit-content;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-usp-icon{
    max-width: 34px;
    object-fit: contain;
}

.small-usp-detail .small-usp-cta{
    margin-top: 21px;
}

/* Small USP Section */

/* Testimonial Section */

.testi-group{
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative;
}

.testi-group .slider-control{
    top: 64px;
    right: 0;
    z-index: 2;
    height: fit-content;
}

.testi-group .testi-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    max-width: 475px;
    margin-bottom: 21px;
}

.testi-list .testi-item{
    background-color: var(--lightblue);
    border-radius: 15px;
    max-width: 562px;
    padding: 30px 20px;
    margin-right: 37px;
    box-sizing: border-box;
}

.testi-list .slick-list{
    margin-right: -37px;
    overflow: hidden;
    max-width: 1224px;
    width: 100%;
}

/* .testi-list .slick-track{
    width: 100% !important;
} */

.testi-item .testi-quote{
    margin-bottom: 21px;
}

.testi-item .testi-text{
    max-width: 521px;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 21px;
}

.testi-item .testi-person-group{
    display: flex;
    align-items: center;
}

.testi-person-group .testi-logo{
    max-width: 45px;
    overflow: hidden;
    margin-right: 21px;
}

.testi-logo img{
    object-fit: contain;
}

.testi-person-group .testi-person-detail{
    padding-left: 11px;
    border-left: 3px solid var(--red);
}

.testi-person-detail .person-name{
    font-weight: 600;
    font-size: 18px;
}

.testi-person-detail .person-position{
    font-size: 16px;
}

/* Testimonial Section */

/* Proof Section */

.proof-group{
    margin: 46px 0px;
    padding: 46px 0px;
    background-color: var(--lightblue);
}

.proof-group .proof-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.proof-list .proof-item{
    max-width: 444px;
    flex-basis: calc(33.33% - 21px);
    width: 100%;
    padding-right: 21px;
}

.proof-item .proof-title{
    font-size: 32px;
    color: var(--red);
    font-weight: 600;
}

.proof-item .proof-desc{
    font-size: 16px;
    color: var(--black);
}

/* Proof Section */

/* Home Highlight Blog */

.home-blog-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.home-blog-group .home-blog-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    max-width: 464px;
    margin-bottom: 21px;
}

.home-blog-group .article-highlight-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.article-highlight-group .article-highlight{
    max-width: 464px;
    width: 100%;
}

.article-highlight .article-highlight-list{
    display: flex;
    flex-direction: column;
}

.article-highlight-list .article-highlight-item{
    width: 100%;
    padding: 21px 0px;
    border-bottom: 2px solid #8b95a5;
}

.article-highlight-item .article-highlight-title{
    font-size: 16px;
    font-weight: 600;
    /* margin-bottom: 21px; */
    color: var(--black);
    text-decoration: none;
}

.article-highlight-item .article-highlight-title:hover{
    color: var(--red);
}

.article-highlight-item .article-highlight-info{
    display: flex;
    justify-content: space-between;
    margin-top: 11px;
}

.article-highlight-info .article-highlight-author{
    font-size: 14px;
    font-weight: 600;
    color: #8c9294;
}

.article-highlight-info .article-highlight-date{
    font-size: 14px;
    font-weight: 600;
    color: #8c9294;

}

.article-highlight-group .article-new-list{
    max-width: 683px;
    position: relative;
    padding: 51px 0px;
    width: 100%;
}

.article-new-list .article-list{
    display: flex;
}

.article-new-list .article-list .article-item{
    flex-basis: calc(50% - 51px);
    width: 100%;
    margin-right: 51px;
}



/* Home Highlight Blog */

/* Blog Section */

.article-list .article-item{
    max-width: 304px;
    /* flex-basis: 33.33%; */
}

.article-item .article-thumbnail{
    max-width: 304px;
    width: 100%s;
    max-height: 187px;
    overflow: hidden;
}

.article-thumbnail img{
    max-width: 304px;
    width: 100%;
    max-height: 187px;
    object-fit: cover;
}

.article-item .article-detail{
    padding-top: 11px;
    padding-left: 7px;
    padding-right: 7px;
}

.article-detail .article-date{
    font-size: 14px;
    font-weight: 600;
    color: #8c9294;
    margin-bottom: 11px;
}

.article-detail .article-title a{
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 11px;
    text-decoration: none;
}

.article-detail .article-title a:hover{
    color: var(--red);
}

.article-detail .article-title{
    margin-bottom: 21px;
}


.article-detail .article-author{
    font-size: 14px;
    font-weight: 600;
    color: #8c9294;
}

.article-new-list .article-cta{
    position: absolute;
    bottom: 0;
    left: 0;
}


/* Blog Section */

/* FAQ Section */

.faq-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.faq-group .faq-title {
    font-size: 32px;
    margin-bottom: 21px;
    text-align: center;
    font-weight: 600;
}

.faq-item:nth-child(1){
    border-top: 1px solid var(--black) ;
}

.faq-item {
    padding: 20px;
    border-bottom: 1px solid var(--black) ;
    position: relative;
}

.faq-question {
    width: 90%;
    text-align: left;
    border: none;
    background: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    font-weight: 600;
    max-width: 991px;
}

.faq-question i {
    position: absolute;
    right: 20px;
    top: 30px;
}

.faq-answer {
    padding: 20px;
    overflow: hidden;
    font-size: 16px;
    background-color: white;
    max-height: 0;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    display: none;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust based on the content size */
    display: block;
    padding: 20px;
}

.faq-item .faq-answer {
    transition: max-height 0.3s ease-in-out, padding 0s 0.3s;
}


/* FAQ Section */

/* Bottom CTA Section */

.bottom-cta-group{
    padding-top: 64px;
    padding-bottom: 64px;
    max-width: 588px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.bottom-cta-group .bottom-cta-image{
    text-align: center;
    margin-bottom: 21px;
    overflow: hidden;
}

.bottom-cta-group .bottom-cta-image img{
    max-width: 68px;
}

.bottom-cta-group .bottom-cta-title{
    font-size: 32px;
    text-align: center;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 11px;
}

.bottom-cta-group .bottom-cta-desc{
    text-align: center;
    font-size: 16px;
    color: var(--black);
    margin-bottom: 21px;
}

/* Bottom CTA Section */

/* Banner Top Section */

.banner-top-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.banner-top-group .banner-image{
    max-width: 1224px;
    overflow: hidden;
    border-radius: 15px;
}

.banner-top-group .banner-image img{
    max-width: 1224px;
    width: 100%;
}



/* Banner Top Section */

/* Porto Client Section */

.porto-client-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.porto-client-group .porto-client-title{
    font-size: 32px;
    color: var(--black);
    font-weight: 600;
    text-align: center;
    margin-bottom: 21px;
}

.porto-client-group .porto-client-list{
    display: flex;
    flex-wrap: wrap;
}

.porto-client-list .porto-client-item{
    max-width: 306px;
    flex-basis: 25%;
    filter: grayscale(1);
    transition: 0.1s ease-in;
    overflow: hidden;
    width: 100%;
    padding: 21px;
    border-radius: 15px;
    border: 0.5px solid var(--white);
    background-color: var(--white);
}

.porto-client-list .porto-client-item:hover{
    border: 0.5px solid #8b95a5;
    box-shadow: 0px 1px 22.4px 0px rgba(0, 0, 0, .09);
}

.porto-client-item img{
    height: 82px;
    object-fit: contain;
}

.porto-client-list .porto-client-item:hover{
    filter: grayscale(0);
}

/* Porto Client Section */

/* Footer Section */

.footer-group {
    margin-top: 64px;
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid #8b95a5;
    background-color: var(--white);
}

.footer-group .footer-menu {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
}

.footer-group .footer-menu-list {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    width: 70%;
}

.footer-group .menu-group {
    flex: 1;
}

.footer-group h4 {
    font-size: 16px;
    font-weight: bold;
    color: var(--black);
    margin-bottom: 15px;
    text-decoration: none;
}

.footer-group .footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.footer-group .footer-menu ul li {
    margin-bottom: 10px;
}

.footer-group h4 a{
    text-decoration: none;
    font-weight: 600;
    color: var(--black);
    pointer-events: none;
}

.footer-group .footer-menu ul li a {
    text-decoration: none;
    color: var(--black);
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-group .footer-menu ul li a:hover {
    color: var(--primary-color); /* Use your theme's primary color here */
}

/* Submenu */
.footer-group .sub-menu {
    padding-left: 15px; /* Indent submenu items */
    list-style-type: circle; /* Use a circle as the list item marker */
}

.footer-group .sub-menu li a {
    font-size: 14px;
    color: var(--black);
}

.footer-socials a{
    margin-right: 11px;
}

.footer-socials a i{
    font-size: 18px;
}

.footer-group .footer-info .footer-contacts i{
    margin-right: 7px;
}

.footer-contacts{
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.footer-group .footer-info .footer-contacts span{
    margin-right: 11px;
}

.footer-info .footer-address{
    max-width: 383px;
}

.footer-group .footer-menu ul li a .mark::after{
    content: '*';
    color: var(--red);
    font-size: 16px;
    font-weight: 600;
    margin-left: 3px;
}

/* Footer Info Section */
.footer-group .footer-info {
    padding-top: 30px;
    border-top: 1px solid #8b95a5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--black);
}

.footer-group .footer-info a {
    color: var(--black);
    text-decoration: none;
}

.footer-group .footer-info a:hover {
    color: var(--primary-color);
}

/* Social Icons */
.footer-group .social-icons {
    display: flex;
    gap: 15px;
}

.footer-group .social-icons a {
    color: var(--black);
    font-size: 20px;
    transition: color 0.3s ease;
}

.footer-group .social-icons a:hover {
    color: var(--primary-color);
}

/* Additional Styles */
.footer-group .footer-logo img {
    max-width: 210px;
}

.footer-group .menu-group .menu-list h4 {
    margin-bottom: 10px;
}

.footer-group .cta-group a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

.footer-group .cta-group a:hover {
    color: var(--secondary-color);
}



/* Hero About Detail */

.hero-about-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.hero-about-group .hero-about-detail{

}

.hero-about-detail .hero-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 21px;
    max-width: 682px;
}

.hero-about-detail .hero-about-image{

}

.hero-about-image .hero-image-list{
    display: flex;
}

.hero-image-list .hero-image-col{
    flex-basis: calc(100% - 15px);
    overflow: hidden;
    height: 588px;
    max-width: 612px;
}

.hero-image-col .hero-image-item{
    background-color: var(--lightblue);
    margin-right: 15px;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

.hero-image-col:nth-child(2) .hero-image-item{
    height: 283px;
    margin-right: 0px;
}

.hero-image-col:nth-child(2) .hero-image-item:nth-child(1){
    margin-bottom: 22px;
}

.hero-image-item img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

/* Hero About Detail */

/* About Detail Section */

.about-detail-group {
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-detail-group .about-detail{
    max-width: 571px;
}

.about-detail .about-title{
    font-size: 32px;
    color: var(--black);
    font-weight: 600;
    margin-bottom: 11px;
}

.about-detail .about-desc{
    font-size: 16px;
    color: var(--black);
}

.about-detail-group .about-image{
    max-width: 492px;
    overflow: hidden;
}

/* About Detail Section */

/* Visi & Misi Section */

.vimis-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.vimis-group .vimis-col{
    flex-basis: 50%;
    max-width: 476px;
}

.vimis-col .vimis-head{
    margin-bottom: 21px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

.vimis-col .vimis-head::before{
    content: '';
    height: 3px;
    width: 70%;
    background-color: var(--red);
    position: absolute;
    right: 0;
}

.vimis-col .vimis-head::after{
    content: '';
    height: 20px;
    width: 20px;
    background-color: var(--red);
    position: absolute;
    border-radius: 100%;
    right: 0;
}

.vimis-head .vimis-icon{
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: var(--red);
    max-width: 53px;
    margin-right: 11px;
}

.vimis-head .vimis-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
}

.vimis-col .vimis-detail{
    padding-left: 17px;
}

.vimis-col:nth-child(1) .vimis-detail{
    padding-left: 0px;
}

.vimis-col:nth-child(1) .vimis-detail ul li{
    list-style: none;
}

.vimis-detail ul li{
    margin-bottom: 11px;
}


/* Visi & Misi Section */

/* Benefits Section */

.benefits-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    justify-content: space-between;
}

.benefits-group .benefits-detail{
    max-width: 470px;
}

.benefits-detail .benefits-title{
    margin-bottom: 11px;
    font-size: 32px;
    color: var(--black);
    font-weight: 600;
}

.benefits-detail .benefits-desc{
    font-size: 16px;
    color: var(--black);
}

.benefits-group .benefits-list{
    max-width: 703px;
    display: flex;
    flex-wrap: wrap;
}

.benefits-list .benefits-item{
    padding: 42px 23px;
    background-color: var(--red);
    flex-basis: calc(50% - 11px);
    border-radius: 15px;
    margin-right: 11px;
    margin-bottom: 11px;
    display: flex;
}

.benefits-list .benefits-item:nth-child(even){
margin-right: 0px;
}

.benefits-item .benefits-icon{
    max-width: 34px;
    overflow: hidden;
    margin-right: 11px;
    width: 100%;
}

.benefits-item .benefits-detail{

}

.benefits-item-detail .benefits-item-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 11px;
}

.benefits-item-detail .benefits-item-desc{
    color: var(--white);
    font-size: 16px;
}

/* Benefits Section */

/* Hero Service Section */

.hero-service-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-service-group .hero-service-detail{
    max-width: 571px;
}

.hero-service-detail .hero-service-sub-title{
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

.hero-service-detail .hero-service-title{
    font-size: 32px;
    color: var(--black);
    font-weight: 600;
    margin-bottom: 11px;
}

.hero-service-detail .hero-service-desc{
    font-size: 16px;
    color: var(--black);
}

.hero-service-detail .hero-service-cta{
    margin-top: 21px;
    margin-bottom: 21px;
}

.hero-service-group .hero-service-image{
    max-width: 571px;
    border-radius: 15px;
    background-color: var(--lightblue);
    overflow: hidden;
}


/* Hero Service Section */

/* USP Service Section */

.usp-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.usp-group .usp-title{
    font-size: 32px;
    max-width: 578px;
    margin: 0 auto;
    text-align: center;
    color: var(--black);
    font-weight: 600;
}

.usp-group .usp-list{

}

.usp-list .usp-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 64px;
    padding-bottom: 64px;
}

.usp-list .usp-item:nth-child(even){
    flex-direction: row-reverse;
}

.usp-item .usp-detail{
    max-width: 571px;
}

.usp-detail .usp-title{
    font-size: 32px;
    color: var(--black);
    text-align: start;
    font-weight: 600;
    margin-bottom: 11px;
}

.usp-detail .usp-desc{
    font-size: 16px;
    color: var(--black);
}

.usp-detail .usp-cta{
    margin-top: 21px;
    margin-bottom: 21px;
}

.usp-item .usp-image{
    max-width: 571px;
    border-radius: 15px;
    overflow: hidden;
}

.usp-image img{
    object-fit: cover;
    object-position: center;
    height: 100%;
}

/* USP Service Section */

/* Compare Section */

.compare-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.compare-group .compare-head{
    margin: 0 auto;
    margin-bottom: 21px;
    max-width: 600px;
}

.compare-head .compare-title{
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 21px;
}

.compare-head .compare-tab-group{
    display: flex;
    justify-content: space-between;
    background-color: var(--lightblue);
    border-radius: 50px;
    max-width: 331px;
    margin: 0 auto;
}

.compare-tab-group .compare-tab.active{
    border: 1px solid var(--red);
    color: var(--red);
}

.compare-tab-group .compare-tab{
    font-weight: 600;
    padding: 11px 11px;
    border-radius: 50px;
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0.343);
    cursor: pointer;
    transition: 0.1s ease-in-out;
}

.compare-group .compare-content{
    display: flex;
    justify-content: space-between;
    padding-top: 64px;
    align-items: center;
}

.compare-content .compare-image{
    max-width: 571px;
    border-radius: 15px;
    overflow: hidden;
    margin-right: 21px;
    height: 479px;
    width: 100%;
}

.compare-image img{
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.compare-content .compare-detail{
    max-width: 571px;
    width: 100%;
}

.compare-detail .compare-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 21px;
}

.compare-detail .compare-desc{
    padding-left: 11px;
    margin-bottom: 21px;
}

.compare-desc ul li{
    list-style: none;
    font-size: 16px;
    margin-bottom: 11px;
    display: flex;
}

.compare-desc ul li span{
    margin-right: 7px;
}

.compare-desc ul li span i{
    color: #67cd28;
    font-size: 16px;
}

/* Compare Section */

/* Service Select */

.service-select-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.service-select-group .services-list{
    display: flex;
    flex-wrap: wrap;
    max-width: 1101px;
    margin: 0 auto;
}

.service-select-group .service-select-title{
    max-width: 519px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 21px;
    font-size: 32px;
    font-weight: 600;
}

/* Service Select */

/* Solution Hero Section */

.solution-hero-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.solution-hero-group .solution-hero-detail{
    display: flex;
    align-items: flex-start;
    margin-bottom: 21px;
    justify-content: space-between;
}

.solution-hero-detail .solution-hero-head{
    max-width: 571px;
    margin-right: 21px;
}

.solution-hero-detail .solution-hero-desc{
    max-width: 571px;
}

.solution-hero-head .solution-hero-sub-title{
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
}

.solution-hero-head .solution-hero-title{
    font-size: 32px;
    font-weight: 600;
    color: var(--black);
}

.solution-hero-group .solution-hero-image{
    overflow: hidden;
    width: 100%;
    border-radius: 15px;
    height: 427px;
}

.solution-hero-image img{
    object-fit: cover;
    object-position: center;
    height: 100%;
}

/* Solution Hero Section */

/* Pain Point Section */

.pp-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.pp-group .pp-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 21px;
}

.pp-head .pp-title{
    font-size: 32px;
    color: var(--black);
    font-weight: 600;
    max-width: 612px;
}

.pp-head .pp-cta{
    max-width: 612px;
}

.pp-group .pp-list{
    display: flex;
    flex-wrap: wrap;
}

.pp-list .pp-item{
    flex-basis: calc(50% - 21px);
    max-width: 578px;
    margin-right: 21px;
    margin-bottom: 21px;
    padding-left: 20px;
    border-left: 2px solid var(--red);
    padding-top: 15px;
    padding-bottom: 15px;
}

.pp-item .pp-title{
    font-size: 24px;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 11px;
}

.pp-item .pp-desc{
    font-size: 16px;
    color: var(--black);
}

/* Pain Point Section */

/* Gallery Section */

.gallery-porto-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.gallery-porto-title{
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    color: var(--black);
}

.gallery-porto-group .gallery-porto-list{
    padding-top: 21px;
    padding-bottom: 21px;
    display: flex;
    flex-wrap: wrap;
}

.gallery-porto-list .gallery-porto-item{
    flex-basis: calc(33.33% - 11px);
    border-radius: 15px;
    overflow: hidden;
    height: 389px;
    margin-right: 11px;
    margin-bottom: 11px;
    position: relative;
}



.gallery-porto-item img{
    object-fit: cover;
    object-position: top;
    height: 100%;
}

.gallery-porto-item .gallery-detail{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 30px 21px;
    height: 150px;
}

.gallery-porto-item .gallery-detail:before{
    content: '';
    position: absolute;
    z-index: -999;
    background: linear-gradient(to top, var(--black), transparent);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
}

.gallery-detail .gallery-title{
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 11px;
}

.gallery-detail .gallery-desc{
    color: var(--white);
    font-size: 16px;
}


/* Gallery Section */

/* Structure Org Section */

/* Modal Structure */
.structure-modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.structure-modal.show {
    display: block;
    opacity: 1; /* Make modal visible */
}

.structure-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 471px;
    max-height: 611px;
    overflow-y: auto;
    position: relative;
    border-radius: 15px;
}

.structure-close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}

.structure-modal-name, .structure-modal-position, .structure-modal-desc {
    margin-bottom: 20px;
}

.structure-modal .structure-modal-position, .structure-modal .structure-modal-name{
    font-weight: 600;
    max-width: 379px;
}

.structure-modal .structure-modal-name{
    margin-bottom: 0px;
}

.structure-modal .structure-modal-desc, .structure-modal .structure-modal-desc{
    max-width: 379px;
}


.structure-group{
    padding-top: 64px;
    padding-bottom: 64px;
}

.structure-group .structure-title{
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 21px;
}

.structure-group .top-structure-group{
    padding-bottom: 64px;
}

.structure-group .top-structure-list, .structure-group .member-structure-list{
    display: flex;
    flex-wrap: wrap;
}

.top-structure-list .top-structure-item{
    max-width: 310px;
    flex-basis: calc(50% - 21px);
    padding-right: 21px;
    margin: 0 auto;
    cursor: pointer;
    position: relative;
    width: 100%;
    margin-bottom: 21px;
}

.top-structure-item .top-structure-image{
    margin-bottom: 7px;
    overflow: hidden;
    max-width: 268px;
}

.top-structure-item .top-structure-detail{
    padding-left: 7px;
}

.top-structure-detail .top-structure-name{
    font-size: 18px;
    font-weight: 600;
}

.top-structure-detail .top-structure-position{
    font-size: 16px;
}

.top-structure-name span i{
    position: absolute;
    right: 10px;
    top: 0;
    color: var(--red);
}

.member-structure-list .member-structure-item{
    max-width: 289px;
    flex-basis: calc(25% - 21px);
    margin: 0 auto;
    padding-right: 21px;
    width: 100%;
    background-color: var(--black);
    border-radius: 15px;
    padding: 105px 88px;
    position: relative;
    overflow: hidden;
    margin-bottom: 21px;
}

.member-structure-item .member-structure-icon{
    max-width: 114px;
    margin: 0 auto;
    width: 100%;
}

.member-structure-item .member-structure-position{
    background-color: var(--red);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    min-height: 60px;
    color: var(--white);
    padding: 10px;
}


/* Structure Org Section */

/* Headline Article Section */

.headline-article-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
}

.headline-article-group .newest-article-group{
    max-width: 571px;
    width: 100%;
    margin-right: 21px;
}

.newest-article-group .article-head-title, .selected-article-group .article-head-title{
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--red);
    font-weight: 600;
    margin-bottom: 11px;
}

.article-new-item .article-new-image{
    height: 293px;
    overflow: hidden;
    margin-bottom: 11px;
}

.article-new-image img{
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-new-item .article-new-detail{

}

.article-new-detail .article-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 11px;
    text-decoration: none;
}

.article-new-detail .article-title:hover{
    color: var(--red);
}

.article-new-detail .article-desc{
    font-size: 16px;
    color: var(--black);
    margin-bottom: 21px;
    margin-top: 11px;
}

.article-new-detail .article-new-info{
    display: flex;
    justify-content: space-between;
}

.article-new-info .article-author, .article-new-info .article-date{
    font-size: 14px;
    font-weight: 600;
    color: #8c9294;
}

.newest-article-group .article-new-item{
    width: 95%;
}

.headline-article-group .selected-article-group{
    max-width: 571px;
    width: 100%;
}


/* Headline Article Section */

/* Taxonomy Group Section */

.article-main-content {
    display: flex;
    padding-bottom: 64px;
}

.tax-blog .article-main-content{
    padding-top: 64px;
}

.search-results .article-main-content{
    padding-top: 64px;
}

.article-main-content .article-category-list{
    max-width: 954px;
    width: 100%;
    margin-right: 21px;
}

.article-main-content .article-sidebar{
    max-width: 250px;
    width: 100%;
}

.article-category-list .article-category{
    padding-top: 32px;
    padding-bottom: 32px;
}

.article-category-list .article-pagination{
    width: 100%;
    display: flex;
    gap: 7px;
    align-items: center;
}

.article-pagination .page-numbers{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    border-radius: 100%;
    color: var(--white);
    text-decoration: none;
}

.article-pagination .next, .article-pagination .prev{
    width: 60px;
    height: fit-content;
    padding: 7px;
    background-color: var(--white);
    color: var(--black);
    text-decoration: none;
}

.article-category .article-category-head{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 21px;
}

.article-category-head .article-category-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
    width: 100%;
    max-width: 841px;
    display: flex;
    align-items: flex-end;
}

.article-category-head .article-category-title:after{
    content: '';
    border-top: 3px solid var(--red);
    width: 100%;
    margin: 0 30px;
    height: 5px;
}

.search-results .article-category-head .article-category-title:after{
    display: none;
}

.article-category-head .article-category-link{
    max-width: 100px;
    width: 100%;
}

.article-category-link a{
    color: var(--red);
    font-weight: 600;
}

.article-category .article-list{
    display: flex;
    flex-wrap: wrap;
}

.article-list .article-item{
    max-width: 304px;
    width: 100%;
    flex-basis: calc(33.33% - 21px);
    padding-right: 21px;
    margin-bottom: 21px;
}

.article-item .article-thumbnail{
    height: 187px;
    overflow: hidden;
    width: 100%;
}

.article-thumbnail img{
    object-fit: cover;
}

.article-sidebar .article-sidebar-list{
    position: sticky;
    top: 15%;
}

.article-search form {
    position: relative;  /* Ensures that the button can be absolutely positioned relative to the form */
    display: flex;       /* Aligns children (input and button) in a row */
    align-items: center; /* Centers items vertically */
    width: 100%;         /* Ensures form takes full width of container */
}

.form-field {
    width: calc(100% - 40px); /* Adjust width to make space for button, adjust 40px as needed */
    border-radius: 6px 0 0 6px; /* Rounded corners on the left side */
    border: 1px solid #8b95a5;
    height: 36px;
    padding: 4px 16px;
    border-right: none; /* Removes the border between the input and the button */
}

.article-search .search-submit {
    position: absolute;
    right: 0;
    top: 0; /* Align with top of the form */
    width: 40px; /* Set width of the button, adjust as needed */
    height: 36px; /* Match input field height */
    border: 1px solid #8b95a5;
    border-radius: 0 6px 6px 0; /* Rounded corners on the right side */
    background-color: #fff; /* Match input field background */
    cursor: pointer;
}

.search-submit i {
    color: #333; /* Color of the icon */
    font-size: 16px; /* Size of the icon */
}

.article-taxonomy-list{
    height: 303px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--red) transparent;
}

.article-taxonomy-list::-webkit-scrollbar {
    width: 8px;
}

.article-taxonomy-list::-webkit-scrollbar-track {
    background: transparent;
}

.article-taxonomy-list::-webkit-scrollbar-thumb {
    background-color: var(--red);
    border-radius: 4px;
    border: 2px solid transparent;
}

.article-taxonomy-list::-webkit-scrollbar-thumb:hover {
    background-color: darken(var(--red), 10%);
}

.article-taxonomy-list .article-taxonomy-item{
    border-left: 3px solid var(--lightred);
}

.article-taxonomy-list .article-taxonomy-item:hover{
    border-left: 3px solid var(--red);
    background-color: var(--lightblue);
}

.article-taxonomy-list .article-taxonomy-item.active{
    border-left: 3px solid var(--red);
    background-color: var(--lightblue);
}

.article-taxonomy-list-group .article-taxonomy-title{
    font-size: 16px;
    font-weight: 600;
    padding-top: 16px;
    padding-bottom: 16px;
}

.article-taxonomy-item a{
    text-decoration: none;
    font-size: 14px;
    color: var(--black);
    width: 100%;
    display: flex;
    padding: 10px 15px;
    position: relative;
}

.article-taxonomy-item:hover a{
    font-weight: 600;
    color: var(--red);
}

.article-taxonomy-item.active a{
    font-weight: 600;
    color: var(--red);
}

.article-taxonomy-item.active a::after{
    content: 'Current';
    position: absolute;
    right: 10px;
    color: var(--black);
    font-weight: 500;
    font-size: 12px;
}

/* Taxonomy Group Section */

/* Taxonomy Header Section */

.header-taxonomy-group{
    padding-top: 64px;
}

.header-taxonomy-group .header-taxonomy-detail{
    border-radius: 15px;
    width: 100%;
    background-color: var(--lightblue);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-category-info .header-category-name{
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 7px;
}

.haeder-category-info .header-category-page{
    font-size: 16px;
    color: var(--black);
}

.header-taxonomy-detail .header-category-back{
    font-size: 16px;
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
}

.header-category-back span{
    margin-right: 7px;
}

/* Taxonomy Header Section */

/* Single Article Head Section */

.single-blog-head-group{
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-blog-head-group .single-blog-head-detail{
    max-width: 589px;
    width: 100%;
}


.single-blog-head-group .single-blog-head-image{
    max-width: 566px;
    overflow: hidden;
    height: 349px;
    width: 100%;
}

.single-blog-head-image img{
    height: 100%;
    object-fit: cover;
}

.single-blog-head-detail .single-blog-breadcrumb{
    margin-bottom: 11px;
}

.single-blog-breadcrumb span a{
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
}

.single-blog-head-detail .single-blog-title{
    font-size: 24px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 11px;
}

.single-blog-head-detail .single-blog-info{
    font-size: 14px;
    color: #8c9294;
}

/* Single Article Head Section */

/* Single Main Content Section */

.single-blog-main-content{
    display: flex;
    justify-content: space-between;
    padding-top: 64px;
    padding-bottom: 64px;
}

.single-blog-main-content .table-of-content{
    max-width: 285px;
    width: 100%;
    margin-right: 11px;
}

.single-blog-main-content .main-content{
    max-width: 535px;
    width: 100%;
}

.single-blog-main-content .selected-article-group{
    max-width: 297px;
    width: 100%;
    margin-left: 11px;
}

.main-content .selected-article-group{
    max-width: 100%;
    padding-top: 21px;
    padding-bottom: 21px;
    margin-left: 0px;
}

.main-content .single-taxonomy-group{
    padding-top: 21px;
    padding-bottom: 21px;
}

.single-taxonomy-group .single-taxonomy-title{
    font-size: 16px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 7px;
}

.single-taxonomy-group .single-taxonomy-list{
    display: flex;
    flex-wrap: wrap;
}

.single-taxonomy-list .single-taxonomy-item{
    padding: 6px;
    border-radius: 3px;
    border: 1px solid var(--black);
    margin-right: 7px;
}

.single-taxonomy-list .single-taxonomy-item:hover{
    background-color: var(--black);
}

.single-taxonomy-item:hover a{
    color: var(--white);
}

.single-taxonomy-item a{
    color: var(--black);
    text-decoration: none;
    font-weight: 600;
}

.table-of-content .table-of-content-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 7px;
}

.table-of-content .table-of-content-list{
    padding-left: 7px;
}

.table-of-content-list .table-of-content-item{
    border-left: 3px solid var(--lightred);
    transition: 0.1s ease-in-out;
}

.table-of-content-list .table-of-content-item.active{
    border-left: 3px solid var(--red);
    background-color: var(--lightblue);
}

.table-of-content-list .table-of-content-item:hover{
    border-left: 3px solid var(--red);
    background-color: var(--lightblue);
}

.table-of-content-list .table-of-content-item a{
    text-decoration: none;
    font-size: 14px;
    color: var(--black);
    transition: 0.1s ease-in-out;
    display: flex;
    width: 100%;
    padding: 8px 12px;
}

.table-of-content-list .table-of-content-item.active a{
    color: var(--red);
    font-weight: 600;
}

.main-content h2,.main-content h3, .main-content h4,.main-content h5{
    font-weight: 600;
    color: var(--black);
}

.main-content h2{
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 48px;
}

.main-content p{
    font-size: 16px;
    line-height: 28px;
    letter-spacing: .008em;
    color: var(--black);
    margin: 0 0 24px;
}

.main-content h3{
    font-size: 20px;
    line-height: 28px;
}

.main-content ul, .main-content ol{
    margin: 0 0 24px;
    padding-left: 24px;
}

.main-content ul{
    list-style-type: "- ";
}

.main-content ul li{
    margin-bottom: 0;
}

.table-of-content .sharing-list{
    margin-top: 21px;
}

.sharing-list .sharing-title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 11px;
}

.sharing-list .sharing-item{
    font-size: 21px;
    text-decoration: none;
    color: var(--black);
    margin-right: 11px;
    font-weight: 600;
    transition: 0.2s ease-in-out;
}

.sharing-list .sharing-item:hover{
    color: var(--red);
}

.single-post .bottom-cta-group{
    display: none;
}

.page-template-blog-template .bottom-cta-group{
    display: none;
}

.tax-blog .bottom-cta-group{
    display: none;
}

.search-results .bottom-cta-group{
    display: none;
}



/* Single Main Content Section */


/* Karir Table Section */

.job-positions {
    max-width: 991px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 128px;
    z-index: 1;
    margin-top: -50px;
    position: relative;
}

.job-positions h2 {
    font-size: 24px;
    color: var(--black);
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    color: var(--red);
    font-weight: bold;
    text-align: left;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

tbody tr {
    border-bottom: 1px solid #eee;
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    padding: 15px 0;
}

.job-title strong {
    display: block;
    color: #333;
    font-size: 16px;
}

.job-title p {
    color: #777;
    margin: 5px 0 0;
    font-size: 14px;
}

.details-link {
    color: var(--red);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.details-link:hover {
    text-decoration: underline;
}

.fa-map-marker-alt {
    color: var(--red);
    margin-right: 5px;
}

.page-template-karir-template .solution-hero-group {
    padding-bottom: 0px;
}

.page-template-karir-template .bottom-cta-group{
    display: none;
}


/* Karir Table Section */

/* Modal Form Leads */

/* Modal Container */
.modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 371px;
    border-radius: 7px;
    padding: 7px;
}

/* Close Button */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Button to open modal */
.open-modal-btn {
    background-color: var(--blue);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.open-modal-btn:hover {
    background-color: darken(var(--blue), 10%);
}

/* Modal Form Styles (as previously provided) */
.modal-form-leads {
    max-width: 371px;
    padding: 10px;
    border-radius: 7px;
    background-color: #fff;
    margin: 0 auto;
}

.modal-form-head {
    margin-bottom: 15px;
}

.modal-form-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--black);
}

.modal-form-desc {
    font-size: 14px;
    color: var(--black);
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    font-size: 14px;
    color: var(--black);
    display: block;
    margin-bottom: 5px;
}

/* Remove space caused by <br> tag */
.input-group p br {
    display: none;
}

/* Optionally adjust the label and input alignment */
.input-group p label {
    display: block;
    margin-bottom: 5px;
}

textarea {
    resize: none;
}



.text-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: var(--black);
    box-sizing: border-box;
}

.text-input::placeholder {
    color: #ccc;
}

.select-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    color: var(--black);
    box-sizing: border-box;
}

.submit-group {
    text-align: center;
}

.submit-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--blue);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

/* .submit-btn:hover {
    background-color: darken(var(--blue), 10%);
} */

.wpcf7-spinner {
    display: none;
}

@media (max-width: 400px) {
    .modal-form-leads {
        max-width: 100%;
        padding: 5px;
    }
}


/* Modal Form Leads */

/* 404 Section */

.error-404 {
    text-align: center;
    padding: 100px 20px;
    height: 100vh;
    position: relative;
}

.error-404 .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
        position: absolute;
    transform: translate(-50%, 50%);
    left: 50%;
    top: 15%;
}

.error-404 .page-title {
    font-size: 48px;
    color: #333;
    margin-bottom: 20px;
}

.error-404 .error-message {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.error-404 .back-home-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #0073aa;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.error-404 .back-home-btn:hover {
    background-color: #005c8a;
}

/* 404 Section */


@media (max-width:991px){

    .container{
        max-width: 575px;
    }

    .hero-slider-item .hero-slider-detail{
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        width: 90%;
        padding: 40px 16px;
    }

    .hero-home-group .slider-control{
        transform: translate(-50%, 50%);
        bottom: 15%;
        right: 0;
    }

    .home-service-detail .service-image{
        display: none;
    }

    .small-usp-group .small-usp-detail{
        margin-bottom: 21px;
    }

    .testi-group .slider-control{
        position: unset;
        margin-bottom: 21px;
        float: right;
    }

    .testi-list .testi-item{
        padding: 30px 10px;
        margin-right: 15px;
    }

    .proof-group .proof-list{
        flex-direction: column;
    }

    .proof-list .proof-item{
        width: 100%;
        max-width: none;
        margin: 0 auto;
        margin-bottom: 31px;
    }

    .proof-item .proof-title{
        text-align: center;
    }

    .proof-item .proof-desc{
        text-align: center;
    }

    .home-blog-group .article-highlight-group{
        flex-direction: column;
    }

    .faq-question{
        font-size: 16px;
    }

    .faq-question i{
        /* transform: translate(-50%, 50%); */
        /* bottom: 50%; */
        right: 0;
        top: 40px;
    }

    .cta{
        padding: 9px;
        font-size: 14px;
    }

    .cta span i{
        font-size: 16px;
    }

    .hero-image-list .hero-image-col{
        height: 218px;
    }

    .hero-image-list .hero-image-col:nth-child(2){
        display: none;
    }

    .about-detail-group .about-image{
        max-width: 292px;
        margin: 0 auto;
    }

    .about-detail-group .about-detail{
        margin-bottom: 21px;
    }

    .vimis-group{
        flex-direction: column;
    }

    .vimis-col .vimis-head::before{
        width: 55%;
    }

    .vimis-group .vimis-col{
        margin-bottom: 21px;
    }

    .about-detail-group{
        flex-direction: column;
    }

    .benefits-group{
        flex-direction: column;
    }

    .benefits-group .benefits-detail{
        margin-bottom: 21px;
    }

    .gallery-porto-list .gallery-porto-item{
        flex-basis: calc(50% - 11px);
        height: 289px;
    }

    .hero-service-group{
        flex-direction: column;
    }

    .hero-service-group .hero-service-image{
        height: 328px;
    }

    .usp-list .usp-item{
        flex-direction: column;
    }

    .usp-list .usp-item:nth-child(even){
        flex-direction: column;
    }

    .compare-group .compare-content{
        flex-direction: column;
    }

    .compare-content .compare-image{
        margin-bottom: 21px;
        height: 238px;
    }

    .pp-group .pp-list{
        flex-direction: column;
    }

    .pp-head .pp-title{
        margin-bottom: 21px;
    }

    .member-structure-list .member-structure-item{
    flex-basis: calc(50% - 21px);
    padding: 75px 88px;
    }

    .single-blog-main-content .table-of-content{
        max-width: 100%;
        margin-bottom: 21px;
    }

    .single-blog-main-content .main-content{
        max-width: 100%;
        margin-bottom: 21px;
    }

    .single-blog-main-content .selected-article-group{
        max-width: 100%;
        margin-left: 0px;
    }

    .single-blog-main-content{
        flex-direction: column;
    }

    .table-of-content-list .table-of-content-item a{
        font-size: 16px;
    }

    .single-blog-head-group{
        flex-direction: column;
        padding-bottom: 0px;
    }

    .single-blog-head-group .single-blog-head-detail{
        margin-bottom: 21px;
    }

    .headline-article-group{
        flex-direction: column;
    }

    .headline-article-group .newest-article-group{
        max-width: 100%;
    }

    .newest-article-group .article-new-item{
        width: 100%;
    }

    .headline-article-group .selected-article-group{
        max-width: 100%;
        margin-top: 32px;
    }

    .article-main-content{
        flex-direction: column-reverse;
    }

    .article-main-content .article-sidebar{
        max-width: 100%;
    }

    .article-taxonomy-list{
        height: 123px;
    }

    .home-service-group {
        flex-direction: column;
    }

    .footer-group .footer-menu{
        flex-direction: column;
    }

    .footer-group .footer-menu-list{
        margin-top: 21px;
        flex-wrap: wrap;
    }

    .footer-group .footer-info{
        flex-direction: column;
        align-items: flex-start;
        gap: 21px;
    }
}



@media (max-width: 1119px){
    .article-highlight-group .article-highlight{
        margin-right: 31px;
    }

    .article-new-list .article-list .article-item{
        flex-basis: calc(50% - 11px);
        margin-right: 11px;
    }

    .article-list .article-item{
        flex-basis: calc(50% - 21px);
    }

    .solution-hero-group .solution-hero-detail{
        flex-direction: column;
    }

    .solution-hero-detail .solution-hero-head{
        margin-bottom: 11px;
    }

    .porto-client-list .porto-client-item{
        flex-basis: 33.33%;
        padding: 11px;
    }
    
}

@media (max-width: 575px){
    .article-new-list .article-list{
        flex-wrap: wrap;
    }

    .benefits-group .benefits-list{
        flex-direction: column;
    }

    .benefits-list .benefits-item{
        margin-right: 0;
    }

    .member-structure-list .member-structure-item{
        flex-basis: calc(100% - 21px);
    }

    .top-structure-list .top-structure-item{
        flex-basis: calc(100% - 21px);
    }

    .structure-modal .structure-modal-desc, .structure-modal .structure-modal-desc{
        max-width: 279px;
    }

    .structure-modal .structure-modal-position, .structure-modal .structure-modal-name{
        max-width: 279px;
    }

    .structure-modal-content{
        margin: 30% auto;
    }

    .cta{
        padding: 7px;
        font-size: 12px;
    }

    .cta span i{
        font-size: 14px;
    }

    .porto-client-list .porto-client-item{
        flex-basis: 50%;
    }

}

@media (max-width: 375px){
    .services-list .service-item{
        flex-basis: 100%;
        margin-right: 0px;
        max-width: 100%;
    }
}