/* ===================================
   Company Profile Custom Styles
   =================================== */

/* Header Logo - Smaller size and centered */
.main-menu-three__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-menu-three__logo img {
    max-width: 80px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Footer Logo */
.footer-widget-two__logo a {
    display: inline-block;
    background-color: #ffffff;
    padding: 8px;
    border-radius: 4px;
}

.footer-widget-two__logo img {
    max-width: 110px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Mobile Navigation Logo - Match header size and centered */
.mobile-nav__content .logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav__content .logo-box img {
    max-width: 80px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* About Section Images - RESPONSIVE */
.about-three__img-box .about-three__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* About Section - Director Photo - RESPONSIVE */
.about-three__img-box .about-three__img-2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* About Section - Vertical Center Alignment */
.about-three .row {
    display: flex;
    align-items: center;
}

/* Service Section Images - RESPONSIVE width, FIXED height */
.services-four__img img {
    width: 100%;
    height: 296px;
    object-fit: cover;
    object-position: center;
}

/* Project Section Images - RESPONSIVE width, FIXED height */
.project-three__img img {
    width: 100%;
    height: 503px;
    object-fit: cover;
    object-position: center;
}

/* Banner Image List - Force horizontal layout on all screen sizes */
.banner-two__img-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    flex-wrap: nowrap !important;
}

.banner-two__img-list li {
    flex: 1;
    min-width: 0;
}

/* Banner Project Images - RESPONSIVE with border radius */
.banner-two__img-single {
    border-radius: 24px;
    overflow: hidden;
}

/* Radius lebih besar untuk banner tengah */
.banner-two__img-list li:nth-child(2) .banner-two__img-single {
    border-radius: 30px;
}

/* Banner images - RESPONSIVE width, FIXED height, keep object-position for cropping */
.banner-two__img-list li:nth-child(1) img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 15% center;
}

.banner-two__img-list li:nth-child(2) img {
    width: 100%;
    height: 530px;
    object-fit: cover;
    object-position: 50% center;
}

.banner-two__img-list li:nth-child(3) img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 85% center;
}

/* About Section - Background Image Blur */
.about-three__img--blurred img {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

/* About Section - Director Photo - RESPONSIVE */
.about-three__img-2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Banner Services Cards - Same color as header */
.banner-one__single {
    background-color: #FFF4F3;
}

.banner-one__content h5,
.banner-one__content h5 a {
    color: #000000 !important;
}

.banner-one__content p {
    color: #2c2c2c !important;
}

/* Brand/Client Logo - RESPONSIVE but maintain aspect ratio */
.brand-one__single {
    padding: 0 20px;
}

.brand-one__img {
    max-width: 171px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.brand-one__img img {
    width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    object-position: center;
}

/* Banner Client Logos - Circular Style - Keep fixed for consistency */
.banner-two__trusted-clients-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid #e9ecef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-two__trusted-clients-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* About Section - Director Photo - RESPONSIVE */
.about-two__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Project Title - White Background for better readability */
.project-three__title {
    background-color: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    display: block;
}

/* Contact Section - Reduce title size */
.contact-two .section-title__title {
    font-size: 36px !important;
}

/* Sticky Header - Reduce height when scrolling */
.stricky-header .main-menu__wrapper-inner {
    padding: 10px 0 !important;
}

.stricky-header .main-menu-three__logo img {
    max-width: 60px !important;
    max-height: 24px !important;
}

/* Sticky Header - Same background color as footer */
.stricky-header.main-menu,
.stricky-header.main-menu-three {
    background-color: #141422 !important;
}

/* Preloader - Use company logo instead of default loader */
.preloader__image {
    background-image: url(../../build/assets/images/brand-logos/logo-no-bg.png) !important;
    background-size: 120px auto !important;
}

/* Documentation Gallery - Lightbox */
.documentation-gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}

.documentation-gallery-item::after {
    content: '\f00e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.documentation-gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.documentation-gallery-item:hover::before,
.documentation-gallery-item:hover::after {
    opacity: 1;
}

.documentation-gallery-item img {
    transition: transform 0.3s ease;
}

.documentation-gallery-item:hover img {
    transform: scale(1.05);
}

/* ===================================
   RESPONSIVE MOBILE STYLES
   =================================== */

/* Tablet and below (768px and smaller) */
@media (max-width: 768px) {
    /* Header - Black background on mobile */
    .main-menu-three {
        background-color: #000000 !important;
    }

    .main-menu-three.mobile-nav-active {
        background-color: #000000 !important;
    }

    /* Mobile Navigation Language Button */
    .mobile-nav__language a,
    .mobile-nav__language .thm-btn {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: #ffffff !important;
    }

    /* Logo container - Adjust padding on mobile */
    .main-menu-three__logo {
        padding: 10px 0;
    }

    /* Keep language button visible on mobile - next to hamburger */
    .main-menu-three__btn-box {
        display: flex !important;
        align-items: center;
        margin-left: 8px;
    }

    .main-menu-three__right {
        display: flex !important;
        align-items: center;
        flex-direction: row-reverse;
    }

    .main-menu-three__call-and-btn-box {
        display: flex !important;
        align-items: center;
    }

    /* Mobile Navigation Logo - White card background */
    .mobile-nav__content .logo-box {
        background-color: #ffffff;
        padding: 12px 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin: 20px;
        width: fit-content;
    }

    /* Service images - Reduce height on mobile */
    .services-four__img img {
        height: 220px;
    }

    /* Project images - Reduce height on mobile */
    .project-three__img img {
        height: 380px;
    }

    /* Banner images - Reduce height on mobile */
    .banner-two__img-list li:nth-child(1) img {
        height: 300px;
    }

    .banner-two__img-list li:nth-child(2) img {
        height: 400px;
    }

    .banner-two__img-list li:nth-child(3) img {
        height: 300px;
    }
}

/* Mobile phones (576px and smaller) */
@media (max-width: 576px) {
    /* Logo - Slightly smaller on very small screens */
    .main-menu-three__logo img {
        max-width: 70px;
        max-height: 28px;
    }

    /* Service images - Further reduce on mobile */
    .services-four__img img {
        height: 180px;
    }

    /* Project images - Further reduce on mobile */
    .project-three__img img {
        height: 280px;
    }

    /* Banner images - Further reduce on mobile */
    .banner-two__img-list li:nth-child(1) img {
        height: 220px;
    }

    .banner-two__img-list li:nth-child(2) img {
        height: 300px;
    }

    .banner-two__img-list li:nth-child(3) img {
        height: 220px;
    }

    /* Brand logos - Smaller on mobile */
    .brand-one__img {
        max-width: 140px;
    }

    .brand-one__img img {
        max-height: 50px;
    }
}