.sino-logo {
    width: 250px; /* Default untuk desktop */
}

/* Untuk layar dengan lebar maksimum 768px (mobile) */
@media (max-width: 768px) {
    .sino-logo {
        width: 200px; /* Lebar untuk mobile */
    }
}

.swiper-slide {
    width: 100%;
    height: 100vh;
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    background-position: top center;
    /* background-size: cover;
    background-position: center; */
    background-color: rgba(0, 0, 0, 0.2); /* Warna hitam semi-transparan */
    background-blend-mode: multiply; /* Menggelapkan hanya background */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Pastikan teks tetap terlihat */
}

.product-card-title-container {
    padding: 25px !important;
    text-align: center;
}

.product-card-title-container>h3 {
    width: 100%;
    margin: 0px;
    font-size: 30px;
}

.pricing-card-details>p{
    margin-bottom: 2rem !important;
    font-size: 15px;
}

.pricing-card.style2.pricing-card-active, .pricing-card.style2:hover{
    background: var(--smoke-color);
}

.scroll-container {
    max-height: 450px;
    overflow-y: auto;
    padding: 0px;
}
.list-item {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    background: #f9f9f9;
}

.location-title {
    color: black;
    margin: 0px;
}
.location-address {
    font-size: 13px;
    margin-bottom: 5px;
}
.location-type {
    font-size: 13px;
    margin-bottom: 10px;
}
.location-phone, .location-map {
    font-size: 13px;
    color: var(--theme-color);
    margin-bottom: 0px;
}

#map {
    height: 500px;
    width: 100%;
    z-index: 1 !important;
}

.breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span,
.breadcumb-menu li:after {
    color: var(--title-color);
}

.breadcumb-menu li .active, .breadcumb-menu a .active, .breadcumb-menu span .active{
    color: var(--theme-color);
}

.breadcumb-menu {
    margin-top: 20px;
}

.about-feature-title{
    color: var(--title-color);
    font-family: "Roboto", sans-serif;
}

.about-feature-wrap{
    background: #e3e3e3;
}

/* products */
.brand-logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 5rem;
}
.product-card{
    border-bottom: 3px solid white;
    cursor: pointer;
    height: 350px;
}
.product-card:hover, .product-card-detail:hover{
    border-bottom: 3px solid var(--theme-color);
    transition: all ease 0.1s;
}
/* .product-card:hover .service-card_title{
    color: var(--theme-color);
    font-size: 23px;
    transition: color 0.3s ease, font-size 0.3s ease;
} */
.product-card .product-card_img {
    height: 75%;
    padding: 30px;
}
.product-card .service-card_content .service-card_title{
    font-size: 20px;
}

.product-card-detail{
    cursor: pointer;
    border-bottom: 3px solid white;
}
.product-card-detail .product-card-detail_img {
    height: 49%;
    padding: 30px;
}
/* .product-card-detail:hover .service-card_title {
    color: var(--theme-color);
} */
.product-card-detail .service-card_content .service-card_title{
    font-size: 20px;
}

.product-detail-info{
    font-size: 15px;
    margin: 0px;
    font-weight: 500;
}

.brand-img{
    height: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-img>img{
    width: 100%;
    padding: 0px 50px;
}

.brand-img>img:hover{
    scale: 110%;
    transition: width 0.3s ease;
}

.sailun-image > img {
    height: 200px !important;
    object-fit: contain;
}

.sino-menu, .sino-menu-children{
    font-size: 13px !important;
    font-family: 'roboto',Helvetica,Arial,sans-serif !important;
    font-weight: 400 !important;
}

.sino-menu{
    padding: 10px 3px !important;
}

@media (min-width: 1200px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl {
        max-width:1280px
    }
}

.hero-image {
    height: 600px;
    background-size: cover;
    background-position: top;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* Untuk layar dengan lebar maksimum 768px (mobile) */
@media (max-width: 768px) {
    .hero-image {
        height: 300px;
    }
}

.container-full{
    max-width: unset;
}

.header-logo{
    padding: 0px;
}

.space, .space-bottom{
    padding-bottom: 60px;
}

.space, .space-top{
    padding-top: 60px;
}

.widget-area{
    padding: 0px 0 30px;
}

.footer-layout2{
    padding-top: 40px;
}

.footer-widget .wp-block-search__label, .footer-widget .widget_title{
    margin: -0.12em 0 35px 0 !important;
    font-weight: 400 !important;
    font-size: 20px !important;
}

.footer-menu{
    color: white !important;
    font-weight: 200 !important; 
    font-size: 18px !important;
    margin-bottom: 25px !important;
}

.footer-widget{
    margin-bottom: 0px !important
}

.copyright-text{
    font-size: 18px;
}

.main-menu ul.sub-menu{
    padding: 9px 10px 9px 10px;
}

.sec-title{
    font-size: 35px;
}

.sec-text, 
.about-feature-text,
.brand-desc,
.breadcumb-menu>li>a{
    font-size: 16px !important;
    font-family: "Roboto", sans-serif !important;
}

.title-area{
    margin-bottom: 20px;
}

.swiper-wrapper {
  height: 800px !important;
}

.brand-img2{
    position: absolute; 
    width: inherit; 
    padding: 100px; 
    max-width: 800px;
}

@media (max-width: 768px) {
  .swiper-wrapper {
    height: 200px !important;
  }
  .about-thumb2{
    display: block !important;
  }

    .brand-img2{
        position: inherit; 
        width: 100%; 
        padding: 0px; 
    }

    .brand-logo{
        padding: 20px;
    }
}

.swiper-button-next,.swiper-button-prev{
    color: red !important;
}

.swiper-pagination-bullet{
    height: 15px !important;
    width: 15px !important;
    background-color: gray !important;
    opacity: 0.7 !important;
}

.swiper-pagination-bullet-active{
    background-color: red !important;
    opacity: 1 !important;
}

.product-card-detail_img>img{
    height: 200px !important;
}

.sailun-table>tbody>tr>td{
    text-align: center;
}

.grid-service{
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 25px;
}
.grid-service-img{
    max-width: 50px;
}
@media (max-width: 768px) {
    .grid-service{
        display: flex;
        gap: 25px;
        align-items: center;
        flex-direction: column;
        margin-bottom: 25px;
    }
    .grid-service-img{
        max-width: 100px;
    }
}