/* Custom styles for Featured Project cards */
.card-style05 .card-img {
    height: 550px !important;
}

/* Experience card: keep title/read-more above the image trigger */
.portfolio-style-01 .portfolio-body {
    z-index: 11;
}
.portfolio-style-01 .content,
.portfolio-style-01 .portfolio-btn {
    position: relative;
    z-index: 12;
}

.card-style05 .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.card-style05:hover .card-body {
    background-color: color-mix(in srgb, var(--primary-color) 80%, transparent) !important;
}

@media screen and (max-width: 1199px) {
}

/* ── FOOTER ACCORDION ── */
.footer-accordion-btn {
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 0 !important;
    font-size: 0.95rem;
    text-decoration: none !important;
}
.footer-accordion-btn:not(.collapsed) i {
    transform: rotate(180deg);
}
.footer-accordion-btn i {
    transition: transform 0.3s ease;
}

@media screen and (max-width: 767px) {
    .card-style05 .card-img {
        height: 450px !important;
    }


    /* News thumbnail di homepage */
    .card-style04 .blog-img {
        height: auto !important;
        aspect-ratio: 16 / 10;
    }

    .card-style04 .blog-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Highlight section images di homepage */
    .service-item > div[style*="height"] {
        height: 140px !important;
    }

    /* About-us photos */
    .about-style-02 .about-image img {
        max-width: 100% !important;
        height: auto !important;
    }
    .about-style-02 .about-image .about-floating-group {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        z-index: 2;
    }
    .about-style-02 .about-image .about-floating-group .about-img-text {
        position: static !important;
        margin-bottom: 8px;
    }
    .about-style-02 .about-image .about-floating-group .about-img-one {
        position: static !important;
        width: 60%;
    }
    .about-style-02 .about-image .about-floating-group .about-img-one img {
        width: 100% !important;
        height: auto !important;
    }
    .about-style-02 .about-img-text p {
        font-size: 42px !important;
        line-height: 42px !important;
    }

    .card-style07 .team-img {
        aspect-ratio: 3/4 !important;
    }

    .card-style07 .team-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Detail project hero: kurangi max-height */
    .project-hero img {
        max-height: 280px !important;
    }

    /* Gallery grid: 2 kolom di mobile */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── FOOTER ── */
    .footer-accordion .text-end {
        text-align: left !important;
    }
    .footer-accordion .justify-content-end {
        justify-content: flex-start !important;
    }
    .footer-accordion {
        margin-bottom: -12px !important;
    }
    .footer-accordion-btn {
        padding: 6px 0 !important;
    }
    .footer-accordion .mt-1-9 {
        margin-top: 0 !important;
    }
    .footer-bottom-bg {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-top: 1rem !important;
    }
    footer.pt-10 {
        padding-top: 1.5rem !important;
    }

    /* ── HEADER STICKY ── */
    header.header-style1 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        background: transparent !important;
        transition: background 0.3s ease !important;
    }
    header.header-style1.scrollHeader {
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    header.header-style1 .attr-nav li.search a i {
        transition: color 0.3s ease;
    }
    header.header-style1.scrollHeader .attr-nav li.search a i {
        color: #333 !important;
    }

    header.header-style1 .mobile-lang-btn {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        color: #fff !important;
        transition: all 0.3s ease !important;
    }

    header.header-style1.scrollHeader .mobile-lang-btn {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: #fff !important;
    }

    /* ── HERO FULLSCREEN ── */
    .top-position1 {
        margin-top: 0 !important;
    }
    .full-screen.banner-style01,
    .slider-fade1,
    .slider-fade1 .owl-stage-outer,
    .slider-fade1 .owl-stage,
    .slider-fade1 .owl-item,
    .slider-fade1 .item {
        height: 100vh !important;
        height: 100dvh !important;
    }
    .slider-fade1 .item .container,
    .slider-fade1 .item .container .row {
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* ── ABOUT US ── */
    .display-5 {
        font-size: 1.5rem !important;
    }
    .pt-20 {
        padding-top: 2rem !important;
    }
    .about-style-02 {
        padding-bottom: 2rem !important;
    }
    .about-style-02 .pe-lg-6 {
        padding-right: 0 !important;
    }
    #about-us .section-title-01 {
        text-align: center !important;
    }
    #about-us .d-flex {
        justify-content: center !important;
        align-items: center !important;
    }
    #about-us .align-self-start {
        align-self: auto !important;
    }
    #corporate-value .d-flex {
        justify-content: flex-start !important;
    }

    /* ── SOLUTIONS ── */
    .pt-10 {
        padding-top: 1.5rem !important;
    }
    .pb-10 {
        padding-bottom: 1.5rem !important;
    }
    .scope-content p {
        text-align: center !important;
    }
    #scopeTabsMobile li a {
        display: block !important;
        width: 100% !important;
    }
    #solMobileContent {
        margin-bottom: 0 !important;
    }
    #solutions .row.mt-n1-9,
    #solutions + section .row.mt-n1-9 {
        margin-top: 0 !important;
    }
    #solutions,
    #solutions + section {
        padding-top: 0 !important;
    }
    #solutions .col-lg-8.mt-1-9,
    #solutions + section .col-lg-8.mt-1-9 {
        margin-top: 0.5rem !important;
    }
    .scope-content > div.mb-1-9 img {
        max-height: 500px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    }
    .scope-content[style*="block"] {
        display: flex !important;
        flex-direction: column;
    }
    .scope-content[style*="block"] > div:nth-child(1) {
        order: -1 !important;
    }
    .scope-content[style*="block"] > div:nth-child(2) {
        order: 0 !important;
    }
    .services-carousel-one .owl-stage-outer {
        overflow: visible !important;
    }
    .sol-carousel-item {
        overflow: visible !important;
    }

    /* ── BUSINESS SECTOR ── */
    .type-content p {
        text-align: center !important;
    }
    #typeTabsMobile li a {
        display: block !important;
        width: 100% !important;
    }
    #bsecMobileContent {
        margin-bottom: 0 !important;
    }
    #business-sector-heading .row.mt-n1-9,
    #business-sector-heading + section .row.mt-n1-9 {
        margin-top: 0 !important;
    }
    #business-sector-heading,
    #business-sector-heading + section {
        padding-top: 0 !important;
    }
    #business-sector-heading .col-lg-8.mt-1-9,
    #business-sector-heading + section .col-lg-8.mt-1-9 {
        margin-top: 0.5rem !important;
    }
    .type-content > div.mb-1-9 img {
        max-height: 500px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    }
    .type-content[style*="block"] {
        display: flex !important;
        flex-direction: column;
    }
    .type-content[style*="block"] > div:nth-child(1) {
        order: -1 !important;
    }
    .type-content[style*="block"] > div:nth-child(2) {
        order: 0 !important;
    }
    .bsec-carousel-item {
        overflow: visible !important;
    }

    /* ── EXPERIENCE ── */
    .exp-filter-bar {
        padding: 8px 0 !important;
        top: 62px !important;
    }
    .exp-filter-bar-inner {
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }
    .exp-filter-row {
        gap: 8px !important;
    }
    .exp-filter-item {
        min-width: 120px !important;
        flex: 1 1 120px !important;
    }
    .exp-search-wrap {
        min-width: 120px !important;
        flex: 1 1 120px !important;
    }

    /* ── PROJECT DETAIL ── */
    .section-title {
        font-size: 1.35rem !important;
    }
    .meta-bar {
        padding: 1rem 0.5rem !important;
        border-radius: 12px !important;
    }
    .meta-label {
        font-size: 0.62rem !important;
    }
    .meta-value {
        font-size: 0.82rem !important;
    }
    section.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .related-item {
        padding: 0.5rem 0.5rem !important;
    }
    .info-card {
        padding: 1rem !important;
    }

    /* ── NEWS LIST ── */
    .drawer-fab[data-bs-target="#newsDrawer"] {
        background: var(--primary-color) !important;
    }
    .news-list-section.pt-6 {
        padding-top: 1rem !important;
    }
    .news-list-section.pb-6 {
        padding-bottom: 1rem !important;
    }
    #news-container .col-md-6.mt-1-9 {
        margin-top: 0.75rem !important;
    }
    #news-container .mt-n1-9 {
        margin-top: -0.75rem !important;
    }
    .card-style04 h4 {
        font-size: 1rem !important;
    }
    .card-style04 .card-body {
        padding: 1.25rem 1rem 1rem !important;
    }
    .card-style04 .post-date {
        right: 16px !important;
        top: -36px !important;
        padding: 10px 12px !important;
    }
    .card-style04 .post-date .display-22 {
        font-size: 0.85rem !important;
    }
    .card-style04 .post-date .display-31 {
        font-size: 0.62rem !important;
    }
    #load-more-btn {
        padding: 0.6rem 2rem !important;
        font-size: 0.85rem !important;
    }

    /* ── NEWS DETAIL ── */
    .news-detail-section.pt-6 {
        padding-top: 1rem !important;
    }
    .news-detail-section.pb-6 {
        padding-bottom: 1rem !important;
    }
    .news-detail-section .glightbox-image {
        max-height: 250px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    .news-detail-section h2 {
        font-size: 1.3rem !important;
    }
    .news-detail-section .list-inline-item {
        display: block !important;
        margin-bottom: 0.3rem !important;
    }
    .news-detail-section .content img {
        max-width: 100% !important;
        height: auto !important;
    }
    .news-detail-section .content table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
    .news-related-section.pt-6 {
        padding-top: 1.5rem !important;
    }
    .news-related-section.pb-6 {
        padding-bottom: 1.5rem !important;
    }
    .news-related-section .section-title-01 {
        margin-bottom: 1.5rem !important;
    }
    .news-related-section .section-title-01 h2 {
        font-size: 1.3rem !important;
    }
    .news-related-section .section-title-01 a {
        font-size: 0.8rem !important;
        padding: 6px 14px !important;
    }

    /* ── CONTACT US ── */
    .contact-info-section.pt-10 {
        padding-top: 1.5rem !important;
    }
    .contact-form-map-section .g-5 {
        --bs-gutter-y: 1.5rem !important;
    }
    .contact-form-map-section .col-lg-6:last-child .rounded {
        height: 250px !important;
    }
    .contact-form-map-section button[type="submit"] {
        width: 100% !important;
    }
    .contact-hours-section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ── FLOATING DRAWER BUTTON ── */
.drawer-fab {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1045;
    width: 40px;
    height: 64px;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(135deg, var(--overlay-color) 0%, #1e4db7 100%);
    border: none;
    box-shadow: 2px 2px 12px color-mix(in srgb, var(--overlay-color) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.drawer-fab:hover {
    box-shadow: 2px 4px 16px color-mix(in srgb, var(--overlay-color) 40%, transparent);
}

.drawer-fab svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── OFFCANVAS DRAWER ── */
.project-drawer.offcanvas {
    max-width: 320px;
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 60vh;
    border-radius: 16px 0 0 16px;
}

.project-drawer .offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e8edf3;
}

.project-drawer .offcanvas-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--overlay-color);
}

.project-drawer .offcanvas-body {
    padding: 1rem 1.25rem;
}

/* ══════════════════════════════════════════════════════════
   YASA PERSADA ENGINEERING — BRAND GUIDELINE THEME STYLING
   ══════════════════════════════════════════════════════════ */

/* ── Typography & Base ── */
body, p, span, li, a, input, textarea {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.main-font, .navbar-nav > li > a, .btn-style1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* ── Navigation Links ── */
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li.current > a {
    color: var(--primary-color, #0D9387) !important;
}

/* ── Footer Styling ── */
.footer-link {
    color: #D8DBDE !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    transition: all 0.25s ease;
}
.footer-link:hover {
    color: var(--primary-color, #0D9387) !important;
    padding-left: 4px;
}

.footer-sublink {
    color: #A0AEC0 !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    transition: color 0.25s ease;
}
.footer-sublink:hover {
    color: var(--primary-color, #0D9387) !important;
}

/* ── Buttons & CTAs ── */
.btn-yasa-primary {
    background-color: var(--primary-color, #0D9387) !important;
    color: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
}
.btn-yasa-primary:hover {
    background-color: var(--secondary-color, #0D2137) !important;
    color: #ffffff !important;
}

.btn-yasa-gold {
    background-color: var(--accent-color, #DCA11C) !important;
    color: #0D2137 !important;
    font-weight: 700;
    border: none;
    transition: all 0.3s ease;
}
.btn-yasa-gold:hover {
    background-color: #c48c12 !important;
    color: #ffffff !important;
}

/* ── Accents & Badges ── */
.badge-yasa {
    background-color: var(--primary-color, #0D9387);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge-yasa-gold {
    background-color: var(--accent-color, #DCA11C);
    color: #0D2137;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.75rem;
}

/* ── Scroll to Top ── */
.scroll-top-percentage {
    background: var(--secondary-color, #0D2137) !important;
    border: 2px solid var(--primary-color, #0D9387);
}
.scroll-top-percentage:before {
    background: var(--primary-color, #0D9387) !important;
}