/* ===== 1. GLOBAL CSS VARIABLES ===== */
:root {
    --e-global-color-primary: #D9B066;
    --e-global-color-secondary: #1168B3;
    --e-global-color-text: #232323;
    --e-global-color-accent: #F8F8F8;
    --e-global-color-9cceaf9: #FFFFFF;
    --e-global-color-675aabf: #DBB06680;
    --e-global-color-86988cf: #1869B480;
    --e-global-color-b851911: #1D4078;

    /* Background Overlay */
    --overlay-dark-blue: #132E58;

    /* Legacy support */
    --color-primary: #D9B066;
    --color-secondary: #1168B3;
    --color-text: #232323;
    --color-accent: #F8F8F8;
    --color-white-bg: #FFFFFF;
}

/* ===== 2. BASE STYLES ===== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--e-global-color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

section {
    scroll-margin-top: 100px;
}

/* ===== 3. CONTAINER STYLES ===== */
.container {
    max-width: 1140px;
    padding-left: 30px;
    padding-right: 30px;
}


/* ===== 4. TYPOGRAPHY ===== */
h1,
.h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-block-end: 0;
}

h2,
.h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-block-end: 0;
}

h3,
.h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3em;
}

h4,
.h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
}

h5,
.h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
}

h6,
.h6 {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4em;
}

p,
.lead {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--e-global-color-text);
}


/* ===== 5. NAVBAR STYLES (Based on post-10.css) ===== */
.custom-navbar {
    background-color: var(--e-global-color-9cceaf9) !important;
    box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.05);
    z-index: 1030;
    padding: 0;
    border-style: none;
}

.custom-navbar .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Logo Section */
.navbar-brand {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.logo-wrapper {
    display: flex;
    align-items: start;
    gap: 20px;
}

.navbar-brand .logo-img {
    width: 135px;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s;
}

.navbar-brand .second-logo-img {
    width: 135px;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s;
}


/* Navbar Toggler */
.navbar-toggler {
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(217, 176, 102, 0.25);
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 33, 33, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Navigation Menu - 70% width on desktop */
.navbar-menu {
    flex: 1;
    justify-content: center;
}

.custom-navbar .navbar-nav {
    font-family: 'Poppins', sans-serif;
}

.custom-navbar .nav-link {
    color: var(--e-global-color-text) !important;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    padding: 30px 15px !important;
    text-decoration: none;
    transition: color 0.3s, background-color 0.3s;
    border: none;
    position: relative;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active,
.custom-navbar .nav-link:focus {
    color: var(--e-global-color-primary) !important;
    background-color: transparent;
}

/* Dropdown Toggle */
.nav-link .fas {
    margin-left: 7px;
    font-size: 12px;
}

.custom-navbar .nav-link:hover .dropdown-toggle::after,
.custom-navbar .nav-link.active .dropdown-toggle::after {
    border-top-color: var(--e-global-color-primary);
}


/* Phone Button - 15% width on desktop */
.navbar-phone {
    width: 15%;
    padding: 10px 0;
}

.btn-phone {
    background-color: transparent;
    border: 1px solid var(--e-global-color-primary);
    color: var(--e-global-color-text);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    padding: 10px 20px;
    border-radius: 30px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.btn-phone svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: fill 0.3s;
}

.btn-phone:hover,
.btn-phone:focus {
    background-color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
}

.btn-phone:hover svg,
.btn-phone:focus svg {
    fill: var(--e-global-color-9cceaf9);
}

/* Mobile Toggle Button */
.custom-toggler {
    border: none;
    padding: 0;
    width: 50px;
    height: 40px;
    position: relative;
    background: transparent;
    border-width: 0px;
}

.custom-toggler:focus {
    box-shadow: none;
    outline: none;
}

.custom-toggler span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--e-global-color-primary);
    margin-bottom: 6px;
    transition: all 0.3s;
}

.custom-toggler span:last-child {
    margin-bottom: 0;
}

.custom-toggler:hover span {
    background-color: var(--e-global-color-675aabf);
}

/* ===== 7. BUTTON STYLES ===== */
.btn-primary-custom {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
    border: none;
    border-radius: 100px;
    padding: 10px 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background-color: var(--e-global-color-675aabf);
    color: var(--e-global-color-9cceaf9);
}

.btn-outline-primary-custom {
    background-color: transparent;
    border: 1px solid var(--e-global-color-primary);
    color: var(--e-global-color-text);
    border-radius: 30px;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    transition: all 0.3s;
}

.btn-outline-primary-custom:hover,
.btn-outline-primary-custom:focus {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
}

/* Button on dark background */
.btn-outline-primary-custom.btn-white {
    color: var(--e-global-color-9cceaf9);
    border-color: var(--e-global-color-primary);
}

.btn-outline-primary-custom.btn-white:hover,
.btn-outline-primary-custom.btn-white:focus {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
}

/* ===== 8. DIVIDER ===== */
.divider-primary {
    width: 80px;
    height: 3px;
    background-color: var(--e-global-color-primary);
    margin: 0 auto 20px;
    border: none;
}

.divider-primary.left {
    margin: 0 0 20px 0;
}

.divider-primary.center {
    margin: 0 auto 20px;
}

.divider-primary.mb-40 {
    margin-bottom: 40px;
}

/* ===== 9. SECTION SPACING ===== */
.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section-padding-top {
    padding-top: 100px;
}

.section-padding-bottom {
    padding-bottom: 100px;
}


/* ===== 10. HERO SECTION (Based on Elementor slideshow) ===== */
.hero-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 100px 30px;
}

/* Hero Background Slideshow */
.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slideshow .swiper {
    width: 100%;
    height: 100%;
}

.hero-slideshow .swiper-slide {
    width: 100%;
    height: 100%;
}

.hero-slideshow__slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slideshow__slide__image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-dark-blue);
    opacity: 0.8;
    z-index: 1;
}

.econ-inner {
    max-width: 1140px;
    margin: 50px auto;
    text-align: center;
    padding: 100px 0;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-section .econ-inner {
    width: 100%;
    max-width: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

/* Hero Content */
.hero-content {
    height: 100%;
    column-gap: 20px;
    row-gap: 20px;
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    width: 53%;
    padding-top: 68.81px;


}

/* Hero Content Typography */

.hero-content h1 {
    font-family: 'Poppins', Sans-serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 20px;
}

.hero-content h2 {
    font-family: 'Poppins', Sans-serif;
    color: var(--e-global-color-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

.hero-content p {
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 54px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4em;
    font-size: 15px;
    font-weight: 400;
    font-family: "Roboto",
        sans-serif;
    margin-block-end: 14.4px;
}

.hero-button {
    display: inline-block;
    padding: 10px 50px;
    background-color: transparent;
    border: 1px solid var(--e-global-color-primary);
    color: white;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    transition: all 0.3s ease;
    line-height: 1.4em;
}

.hero-button:hover {
    background-color: var(--e-global-color-primary);
    color: white;
    text-decoration: none;
}

.stats-section {
    padding: 10px;
    background-color: transparent;
    background-image: linear-gradient(173deg, var(--e-global-color-86988cf) 0%, var(--e-global-color-675aabf) 100%);
    color: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.stats-container {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    text-align: center;
}

.stat-item h2 {
    font-family: "Poppins", Sans-serif;
    color: var(--e-global-color-primary);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
}

.stat-item p {
    font-family: "Roboto", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 0;
}

.stat-item small {
    font-family: "Roboto", Sans-serif;
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
}

/* Animation */
.stat-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
    padding: 10px;
    border-right: 1px solid #FFFFFF33;
    display: flex;
    flex-direction: column;
}

.stat-item:last-child {
    border-right: none;
    position: absolute;
    right: 0;
    width: 20%;
}

.stat-item:nth-child(1) {
    animation-delay: 0.1s;
}

.stat-item:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-item:nth-child(3) {
    animation-delay: 0.3s;
}

.stat-item:nth-child(4) {
    animation-delay: 0.4s;
}

.stat-item:nth-child(5) {
    animation-delay: 0.5s;
}


/* Fade In Up Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scroll-triggered Animation Base Styles */
.animated {
    opacity: 0;
    animation-duration: 1.25s;
    animation-fill-mode: both;
}

/* Initial states for different animation types */
.animated.fadeIn {
    opacity: 0;
}

.animated.fadeInUp {
    transform: translateY(60px);
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -o-transform: translateY(60px);
}

.animated.fadeInLeft {
    transform: translateX(-30px);
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
}

.animated.fadeInRight {
    transform: translateX(30px);
}

/* Animation trigger class - applied when element is in viewport */
.animated.animate-in {
    opacity: 1;
}

.animated.animate-in.fadeIn {
    animation-name: fadeIn;
}

.animated.animate-in.fadeInUp {
    animation-name: fadeInUp;
    transform: translateY(0);
}

.animated.animate-in.fadeInLeft {
    animation-name: fadeInLeft;
    transform: translateX(0);
}

.animated.animate-in.fadeInRight {
    animation-name: fadeInRight;
    transform: translateX(0);
}

.animation-delay-100 {
    animation-delay: 0.2s;
}

.animation-delay-200 {
    animation-delay: 0.4s;
}

.animation-delay-400 {
    animation-delay: 0.6s;
}

.animation-delay-600 {
    animation-delay: 0.8s;
}

.animation-delay-800 {
    animation-delay: 1s;
}

.animation-delay-1000 {
    animation-delay: 1.2s;
}


/* ===== 11. ABOUT SECTION ===== */
.about-section {
    background-color: var(--e-global-color-9cceaf9);
    padding: 0 30px;
}

#about .econ-inner {
    margin-top: 0;
}

#about .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    margin: 0;

}

#about .col {
    padding: 0;
    height: 100%;
}

.about-content {

    gap: 20px 20px;
    height: 100%;
    margin: 0 auto;
    max-width: 1140px;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;

}

.about-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

.about-divider {
    margin-bottom: 20px;
}

.elementor-divider {
    display: flex;
    align-items: center;
    width: 100%;
}

.elementor-divider-separator {
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--e-global-color-primary);
    border: none;
}

.about-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding: 11px 0;
}

.about-section p {
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4em;
    font-size: 15px;
    font-weight: 400;
    font-family: "Roboto",
        sans-serif;

    margin-block-end: .9rem;
    margin-block-start: 0;

}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: transparent;
    border: 1px solid var(--e-global-color-primary);
    color: var(--e-global-color-primary);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.about-button:hover {
    background-color: var(--e-global-color-primary);
    color: white;
    text-decoration: none;
}

.about-logos {
    flex-wrap: wrap;
    gap: 20px;
}

.about-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo-item img {
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* About Logo Container with Background */
.about-logo-container {
    min-height: 350px;
    border-radius: 10px;
    background-image: url('../images/Industropolis-Batang-Background-Hero-01.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.about-logo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #12204B 0%, #F2295B00 100%);
    opacity: 0.5;
    z-index: 1;
}

.about-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 30px;
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 350px;
}

.about-logo-grid .about-logo-item {
    display: flex;
    align-items: start;
    justify-content: center;
}

.about-logo-grid .about-logo-item img {
    max-width: 100%;
    height: auto;
    filter: brightness(1.1);
}


/* ===== 12. WHY INVEST SECTION ===== */
.why-invest-section {
    background-color: #F8F8F8;
    padding: 100px 30px;
}

.why-invest-section .econ-inner {
    row-gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.why-invest-header {
    margin-bottom: 20px;
}

.why-invest-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 20px;
}

.why-invest-divider {
    margin-bottom: 40px;
}

.why-invest-section p {
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-text);
    max-width: 800px;
    margin: 0 auto;
    margin-block-end: 14.4px;
}

.why-tab {
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-content {
    width: 100%;
}

.why-tab .nav-link {
    background: white;
    border-style: none;
    color: #232323;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 100px;
    padding: 10px 15px;
}

.why-tab .nav-link span {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6em;
    font-family: "Poppins", Sans-serif;
}

.why-tab .nav-link svg {
    width: 15px;
    height: 15px;
    fill: #0F68B2;
}

.why-tab .nav-link.active {
    background: #DAB065;
    border-style: none;
    color: white;
}

.why-tab .nav-link.active svg {
    fill: white;
}

.tab-content-item {
    padding: 30px;
    background-color: white;
    border-radius: 10px;
}

.certificate .d-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.certificate img {
    margin: auto;
}

.status h2 {
    font-family: "Poppins", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.3em;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.card-status-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.card-status {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background-color: #F8F8F8;
    border-radius: 10px;
}

.card-status h2 {
    font-family: "Poppins", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3em;
    color: #232323;
    margin-bottom: 0;
}

.card-status img {
    border-radius: 10px;
}

.card-status h3 {
    font-family: "Poppins", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.3em;
    color: var(--color-primary);
    margin-bottom: 0;
}




/* Benefit Cards */
.benefit-card {

    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    background-color: var(--e-global-color-accent);
    transform: translateY(-15px);
    cursor: pointer;
}

.benefit-icon {
    text-align: center;
    margin-bottom: 20px;
}

.benefit-icon img {
    max-width: 70px;
    height: auto;
    width: 100%;
    object-fit: contain;
}

.benefit-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 20px;
    text-align: center;
}

.benefit-description {
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-text);
    text-align: center;
    margin: 0;
}

#mengapa .econ-inner {
    padding: 0;
}

#mengapa .row {
    display: grid;
    align-content: start;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-content: start;
    gap: 20px;
    padding: 0;
    margin: 0;
}

#mengapa .col-lg-4 {
    flex: 0 0 auto;
    width: 31.5%;

}


/* ===== 12. PRODUCTS SECTION (Flip Box) ===== */

#produk .econ-inner {
    padding: 0;
}

.products-section {
    padding: 100px 30px;
    overflow: hidden;
}

.products-header {
    margin-bottom: 60px;
}

.products-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 20px;
}

.products-divider {
    margin: 20px 0;
}

/* Products Row - 5 Columns Layout */
.products-row {
    display: flex;
    flex-wrap: nowrap;
}

.col-product {
    flex: 0 0 20%;
    width: 20%;
    max-width: 20%;
}

/* Flip Box Container */
.product-flip-box {
    height: 100%;
    min-height: 400px;
}

.flip-box-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flip-box-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.5s ease;
    -webkit-transition: transform 0.5s ease;
}

.flip-box-container:hover .flip-box-card {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 400px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: flex-start;
    text-align: left;
    border-radius: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.flip-box-front {
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.flip-box-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
}

.product-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000004D;
    z-index: 1;
}

.product-card-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    padding-top: 59px;
    width: 100%;

}

.product-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: #FFFFFF;
    text-align: center;
    padding-bottom: 5px;
}

.flip-box-back .product-card-content {
    padding: 0 30px 5px 30px;
}

.flip-box-back .product-title {
    padding-bottom: 0;
}

.product-description {
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    margin-block-end: .9rem;
}

/* Product 1: Industrial Land - Solid Blue Background */
.product-flip-box:not(.product-flip-box-2):not(.product-flip-box-3):not(.product-flip-box-4):not(.product-flip-box-5) .flip-box-front,
.product-flip-box:not(.product-flip-box-2):not(.product-flip-box-3):not(.product-flip-box-4):not(.product-flip-box-5) .flip-box-back {
    background-color: #0F68B2;
    background-image: none;
}

.product-flip-box:not(.product-flip-box-2):not(.product-flip-box-3):not(.product-flip-box-4):not(.product-flip-box-5) .product-card-overlay {
    display: none;
}

/* Product 5: Residential */

.flip-box-back {
    background-color: #0F68B2;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
}

.utility-section {
    padding: 0 30px;
}

.utility-items-row {
    gap: 0 !important;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
}

.utility-heading {
    margin-bottom: 20px;
}

.utility-item {
    min-height: 300px;
    padding: 30px 20px;
    position: relative;
    display: flex;
    align-items: start;
    overflow: hidden;
    cursor: pointer;
}

.utility-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}

.utility-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0000004D;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}

.utility-item-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
}

.utility-item-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: #ffffff;
    text-align: start;
}

.utility-item:hover .utility-overlay {
    opacity: 0;
}

.utility-item:hover .utility-background {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.utility-item:hover .utility-item-content {
    opacity: 0;
}

.utility-content p {
    width: 60%;
    margin: 0 auto;
    margin-top: 50px;
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    text-align: center;
}

.location-section {
    margin-top: 40px;
}

.location-container {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.location-item img {
    width: 36px;
    height: auto;
}

.location-item-content {
    display: flex;
    flex-direction: column;
}

.location-item h3 {
    font-size: 14px;
    text-align: start;
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.3em;
    margin-bottom: 0;
}

.location-item span {
    font-size: 13px;
    text-align: start;
}


.testimonials-section {
    padding: 100px 30px;
}

.testimonials-section .container {
    padding: 0;
}

.testimonials-divider {
    margin-top: 20px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

/* Testimonials Swiper */
.testimonials-swiper {
    padding: 40px 0 60px;
    position: relative;
}

.testimonial-item {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Triangle Indicator - removed as it's not needed with current design */

.testimonial-content-wrap {
    flex: 1;
    margin-bottom: 30px;
    position: relative;
}

.testimonial-content-inner {
    background-color: #F8F8F8;
    padding: 30px 30px 15px 30px;
    border-style: none;
    border-radius: 10px 10px 10px 10px;
}

.testimonial-content-inner:before {
    border-top-color: #F8F8F8;
}

.testimonial-content-inner:before {
    right: calc(50% - 15px);
}

.testimonial-content-inner:before {
    bottom: -15px;
}

.testimonial-content-inner:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top-style: solid;
    border-top-width: 15px;
}


.testimonial-icon {
    color: var(--e-global-color-primary);
    font-size: 35px;
    text-align: center;
}

.testimonial-content {
    color: var(--e-global-color-text);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6em;
    text-align: center;
    margin: 0;
}

.testimonial-content p {
    margin: 0;
}

.testimonial-meta {
    margin-top: auto;
}

.testimonial-meta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial-image {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-bottom: 15px;
    overflow: hidden;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-meta-content-wrap {
    text-align: center;
}

.testimonial-name {
    color: var(--e-global-color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
}

.testimonial-job {
    font-size: 13px;
    font-weight: 400;
    line-height: 18.2px;
    color: var(--e-global-color-text);
}

/* Swiper Navigation */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
    color: var(--e-global-color-primary);
    width: 50px;
    height: 50px;
    background-color: var(--e-global-color-9cceaf9);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonials-swiper .swiper-button-next:hover,
.testimonials-swiper .swiper-button-prev:hover {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
    transform: scale(1.1);
}

.testimonials-swiper .swiper-button-next::after,
.testimonials-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 700;
}

/* Swiper Pagination */
.testimonials-swiper .swiper-pagination {
    position: relative;
    margin-top: 30px;
    bottom: 0;
}

.testimonials-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--e-global-color-675aabf);
    opacity: 1;
    transition: all 0.3s ease;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: var(--e-global-color-primary);
    transform: scale(1.2);
}


/* ===== 13. TENANTS SECTION ===== */
.tenants-section {
    background-color: var(--e-global-color-9cceaf9);
    padding: 100px 30px;
}

.tenants-content {

    gap: 20px 20px;
    height: 100%;
    margin: 0 auto;
    max-width: 1140px;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;

}

.tenants-header {
    margin-bottom: 60px;
}

.tenants-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 20px;
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.tenants-divider {
    margin: 20px 0;
}

.tenants-divider .elementor-divider-separator {
    width: 80px;
    height: 3px;
    background-color: var(--e-global-color-primary);
    margin: 0 auto;
}

/* Tenant Card */
.tenant-card {
    background-color: var(--e-global-color-accent);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;

}

.tenant-card:hover .tenant-content {
    box-shadow: inset 0 -5px 0 #D9B066;
}

.tenant-image {
    width: 100%;
    height: 230px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.tenant-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

}

.tenant-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-primary);
    margin-top: 5px;
    margin-bottom: 0;
}

.tenant-description {
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-top: 10px;
    margin-bottom: 15px;
}



.tenant-content .col-6 {
    padding: 0 10px;
}

.tenant-info-label {
    font-family: "Roboto",
        sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4em;
    color: var(--e-global-color-text);
    margin-bottom: 5px;
}

.tenant-info-value {
    font-family: "Roboto",
        sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-text);
    display: block;
}

/* Tenants Swiper Navigation */
.tenants-swiper {
    position: relative;
}

.tenants-swiper .swiper-slide {
    height: auto !important;
}

.tenants-carousel-wrapper {
    position: relative;
    overflow: visible;
}

.tenants-section .row {
    overflow: visible;
}

.tenants-section .col-12 {
    overflow: visible;
}

.tenants-prev,
.tenants-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(35, 35, 35, 0.1);
    color: #000000;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.tenants-prev i,
.tenants-next i {
    font-size: 14px;
    line-height: 1;
}

.tenants-prev {
    left: -60px;
}

.tenants-next {
    right: -60px;
}

.tenants-prev:hover,
.tenants-next:hover {
    background-color: var(--e-global-color-primary);
    color: #ffffff;
}

.tenants-prev:disabled,
.tenants-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tenants Pagination */
.tenants-pagination {
    margin-top: 20px;
    text-align: center;
}

.tenants-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(35, 35, 35, 0.1);
    margin: 0 5px;
    opacity: 1;
}

.tenants-pagination .swiper-pagination-bullet-active {
    background-color: var(--e-global-color-primary);
}


/* ===== 14. CONTACT SECTION ===== */
.contact-section {
    background-color: var(--e-global-color-secondary);
    background-image: url('../images/Industropolis-Batang-Background-Hero-10.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    padding: 100px 30px;
    position: relative;
    overflow: hidden;
}

.contact-content {
    gap: 20px 20px;
    height: 100%;
    margin: 0 auto;
    max-width: 1140px;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--e-global-color-9bf00c6);
    opacity: 0.85;
    z-index: 1;
}

.contact-section>.container-fullwidth {
    position: relative;
    z-index: 2;
}

.contact-header {
    margin-bottom: 54px;
}

.contact-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 20px;
}

.contact-divider {
    margin: 20px 0;
}

.contact-divider .elementor-divider-separator {
    width: 80px;
    height: 3px;
    background-color: var(--e-global-color-primary);
    margin: 0 auto;
}

.contact-header p {
    font-family: var(--e-global-typography-text-font-family), 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    margin-top: 40px;
}

/* Contact Form Container */
.contact-form-container {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0;
    padding: 40px 30px 30px 30px;
    position: relative;
    width: 400px;
    max-width: 100%;
}

.contact-form-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 40px;
    text-align: center;
}

/* Contact Form */
.contact-form {
    width: 100%;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-control {
    width: 100%;
    padding: 8px 16px;
    font-family: "Roboto",
        sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    background-color: transparent;
    border: 1px solid var(--e-global-color-9cceaf9);
    border-radius: 0;
    transition: all 0.3s ease;
}

.contact-form .form-control::placeholder {
    color: var(--e-global-color-9cceaf9);
    opacity: 0.8;
}

.contact-form .form-control:focus {
    outline: none;
    border-color: var(--e-global-color-primary);
    background-color: rgba(255, 255, 255, 0.1);
}

.contact-form select.form-control {
    cursor: pointer;
}

.contact-form select.form-control option {
    background-color: #fff;
    color: black;
}

.contact-submit-btn {
    font-family: 'Poppins',
        sans-serif;
    width: fit-content;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 100px;

}

.contact-submit-btn:hover {
    background-color: var(--e-global-color-675aabf);
    color: var(--e-global-color-9cceaf9);
}

.contact-submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 176, 102, 0.3);
}

.g80 {
    gap: 80px;
}

.contact-section::before {
    background-color: #132E58;
    --background-overlay: '';
}

.contact-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="4 6 16 12"%3E%3Cpolyline points="6 9 12 15 18 9" fill="none" stroke="%23FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /%3E%3C/svg%3E');

    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 0.65em auto;
    border-radius: 0;
}



.mini-footer-section {
    background-color: #12204B;
    z-index: 1;
    text-align: center;
    padding: 30px 0;
}

.mini-footer-section p {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-family: "Roboto",
        sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    color: #FFFFFF;
}



/* ===== 13. STATISTICS SECTION (Image Accordion) ===== */
.statistics-section {
    background-color: var(--e-global-color-accent);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.statistics-divider {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

/* Image Accordion Styles (Based on eael-7.css) */
.eael-img-accordion {

    display: flex;
    height: 400px;
    overflow: hidden;
}

.eael-img-accordion.accordion-direction-horizontal {
    flex-direction: row;
}

.eael-image-accordion-hover {
    position: relative;
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: flex 0.4s ease;
    overflow: hidden;
    cursor: pointer;
}

.eael-img-accordion .eael-image-accordion-hover:hover {
    flex: 3 !important;
}

.eael-img-accordion .overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: background-color 0.4s;
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0);
}

.eael-img-accordion-horizontal-align-center .overlay {
    justify-content: center;
    text-align: center;
}

.eael-img-accordion-vertical-align-center .overlay {
    align-items: center;
}

.eael-img-accordion .overlay .overlay-inner {
    z-index: 1;
}

.eael-img-accordion .eael-image-accordion-hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.3);
}

.eael-img-accordion .eael-image-accordion-hover:hover::before {
    background-color: #132E58D9;
}

.eael-img-accordion .overlay-inner * {
    visibility: hidden;
    opacity: 0;
    transform-style: preserve-3d;
}

.eael-img-accordion .overlay h2 {
    color: var(--e-global-color-primary);
    transform: translate3d(0, -60px, 0);
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2em;
    margin-bottom: 10px;
}

.eael-img-accordion .overlay p {
    color: #fff;
    margin-bottom: 0;
    transform: translate3d(0, 60px, 0);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
}

.eael-img-accordion .eael-image-accordion-hover:hover .overlay-inner * {
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition: all 0.3s 0.3s;
}

/* Legacy statistics styles (kept for backward compatibility) */
.statistics-item {
    text-align: center;
}

.statistics-icon {
    width: 120px;
    height: auto;
    margin: 0 auto;
}

.statistics-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4em;
    margin: -16px 0 0 0;
    color: var(--e-global-color-text);
}

.statistics-description {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-text);
}


/* ===== 12. AWARDS SECTION (5 Columns) ===== */
.awards-section {
    background-color: var(--e-global-color-accent);
    padding: 100px 30px;
}

.awards-divider {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

/* 5 Columns Grid Layout */
.awards-grid-5 {
    display: flex;
    flex-wrap: wrap;
}

.awards-grid-5 .award-col {
    flex: 0 0 20%;
    max-width: 20%;

}

.award-item {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.award-image {
    margin-bottom: 20px;
    width: 60%;
    max-width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.award-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}



.award-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--e-global-color-primary);
    margin-bottom: 10px;
}

.award-description {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    color: #666;
    margin: 0;
}


/* ===== 13. STATISTICS SECTION (5 Kolom Grid) ===== */

/* ===== 13. TESTIMONIALS SECTION ===== */
.testimonials-section {
    padding: 100px 30px;
    background-color: var(--e-global-color-accent);
}

.testimonials-divider {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

/* Testimonials Swiper */
.testimonials-swiper {
    padding: 40px 0 60px;
    position: relative;
}

.testimonial-item {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Triangle Indicator - removed as it's not needed with current design */

.testimonial-content-wrap {
    flex: 1;
    margin-bottom: 30px;
    position: relative;
}

.testimonial-content-inner {
    background-color: white;
    padding: 30px 30px 30px 30px;
    border-style: none;
    border-radius: 10px 10px 10px 10px;
}

.testimonial-content-inner:before {
    border-top-color: #F8F8F8;
}

.testimonial-content-inner:before {
    right: calc(50% - 15px);
}

.testimonial-content-inner:before {
    bottom: -15px;
}

.testimonial-content-inner:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top-style: solid;
    border-top-width: 15px;
}


.testimonial-icon {
    color: var(--e-global-color-primary);
    font-size: 30px;
    margin-bottom: 20px;
    text-align: center;
}

.testimonial-content {}

.testimonial-content p {
    color: #444444;
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
}

.testimonial-meta {
    margin-top: auto;
}

.testimonial-meta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.testimonial-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
    overflow: hidden;
    border: 3px solid var(--e-global-color-primary);
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-meta-content-wrap {
    text-align: center;
}

.testimonial-name {
    color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4em;
}

.testimonial-job {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
    margin: 0;
}

/* Swiper Navigation */
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
    color: var(--e-global-color-primary);
    width: 50px;
    height: 50px;
    background-color: var(--e-global-color-9cceaf9);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonials-swiper .swiper-button-next:hover,
.testimonials-swiper .swiper-button-prev:hover {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
    transform: scale(1.1);
}

.testimonials-swiper .swiper-button-next::after,
.testimonials-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 700;
}

/* Swiper Pagination */
.testimonials-swiper .swiper-pagination {
    position: relative;
    margin-top: 30px;
    bottom: 0;
}

.testimonials-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--e-global-color-675aabf);
    opacity: 1;
    transition: all 0.3s ease;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background-color: var(--e-global-color-primary);
    transform: scale(1.2);
}


/* ===== 14. ADVANTAGES SECTION (4 Kolom Grid) ===== */
.advantages-section {
    background-color: var(--e-global-color-accent);
    padding: 0;
    position: relative;
    background-image: url('../images/Industropolis-Batang-Background-Kawasan-Industri-01.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}

.advantage-item {
    padding: 40px 30px;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #E0E0E0;
}



.advantage-image {
    margin-bottom: 25px;
    width: 100%;
    max-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advantage-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.advantage-item:hover .advantage-image img {
    transform: scale(1.05);
}

.advantage-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 15px;
}

.advantage-description {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: #666;
    margin: 0;
}

.advantage-icon {
    max-width: 70px;
    height: auto;
    margin-bottom: 15px;
}


/* ===== 15. MASTER PLAN SECTION ===== */
.masterplan-section {
    background-color: var(--e-global-color-accent);
    padding: 100px 30px;
}

.masterplan-divider {
    margin: 30px 0;
}

.masterplan-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

.masterplan-section p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--e-global-color-text);
    margin-bottom: 30px;
}

.masterplan-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: transparent;
    border: 1px solid var(--e-global-color-primary);
    color: var(--e-global-color-primary);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.masterplan-button:hover {
    background-color: var(--e-global-color-primary);
    color: white;
    text-decoration: none;
}

.button-content-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-icon {
    display: flex;
    align-items: center;
}

.button-icon i {
    font-size: 16px;
}

.masterplan-video-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.masterplan-video-wrapper .ratio {
    border-radius: 10px;
    overflow: hidden;
}

.masterplan-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

.masterplan-video-border {
    position: absolute;

    right: 15px;
    bottom: -15px;
    border: 2px solid var(--e-global-color-primary);
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
}


/* ===== 16. WELCOME VIDEO BACKGROUND SECTION ===== */
.welcome-video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #132E58;

}

.welcome-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.welcome-video-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


}

.welcome-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    /* 16:9 aspect ratio */
    min-height: 100%;
    min-width: 177.77vh;
    /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    z-index: 1;
}

.welcome-video-overlay {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 80px 30px;
    background-color: #132E58;
    opacity: 0.8;
    padding: 0 30px;
}

.welcome-video-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: #ffffff;
    margin-bottom: 40px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.welcome-video-play-icon {
    margin: 30px 0;
}

.welcome-play-button {
    display: inline-block;
    width: 100px;
    height: 100px;
    color: var(--e-global-color-primary);
    transition: all 0.3s ease;
    text-decoration: none;
}



.play-icon-svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.welcome-video-text {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: #ffffff;
    margin-top: 30px;
    text-align: right;
    margin: 0;
}


/* ===== 17. NEWS SECTION (Grid) ===== */
.news-section {
    background-color: var(--e-global-color-accent);
    padding: 100px 30px;
}

.news-card {
    border: none;
    border-radius: 0;
    overflow: hidden;
    height: 100%;
}

.news-card-img {
    height: 250px;
    object-fit: cover;
    width: 100%;
}

.news-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2em;
    color: #333333;
    margin: 15px 0 10px;
}

.news-card-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s;
}

.news-card-title a:hover {
    color: #54595f;
}

.news-card-date {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: #8F8F8F;
    margin: 0 0 15px;
}

.news-card-content {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--e-global-color-text);
}

.news-read-more {
    border-bottom: 2px solid var(--e-global-color-primary);
    color: var(--e-global-color-text);
    text-decoration: none;
    padding: 0;
    margin-top: 40px;
    display: inline-block;
    transition: color 0.1s;
}

.news-read-more:hover {
    color: var(--e-global-color-primary);
}

.news-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s;
}

.news-card:hover .news-card-overlay {
    opacity: 1;
}

/* ===== 17. CTA SECTION ===== */
.cta-section {
    background-color: var(--e-global-color-secondary);
    background-image: url('../images/kitb-background-cta.jpg');
    background-size: cover;
    background-position: center;
    padding: 60px 30px;
    position: relative;
    color: var(--e-global-color-9cceaf9);
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-dark-blue);
    opacity: 0.85;
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    color: var(--e-global-color-9cceaf9);
}

.cta-section p {
    color: var(--e-global-color-9cceaf9);
}


/* ===== 18. FOOTER STYLES (Based on post-409.css) ===== */
.footer-section {
    background-color: var(--e-global-color-text);
    padding: 100px 30px;
    overflow: hidden;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-primary);
    margin: 0 0 20px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-menu a {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    text-decoration: none;
    transition: color 0.3s;
    padding: 0 0 10px 0;
    display: block;
}

.footer-menu a:hover {
    color: var(--e-global-color-primary);
}

.footer-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-icon-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-icon-list-icon {
    color: var(--e-global-color-primary);
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

.footer-icon-list-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    transition: color 0.3s;
}

.footer-icon-list-text:hover {
    color: var(--e-global-color-primary);
}

.footer-social-icons {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.footer-social-icon {
    color: var(--e-global-color-text);
    font-size: 16px;
    transition: color 0.3s;
}

.footer-social-icon:hover {
    color: var(--e-global-color-primary);
}

.footer-copyright {
    border-top: 1px solid #444444;
    padding: 30px;
    margin-top: 30px;
    text-align: center;
}

.footer-copyright p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-675aabf);
    margin: 0;
}

/* ===== 19. ANIMATIONS ===== */
/* Legacy animation classes - kept for backward compatibility */
.fade-in {
    animation: fadeInUp 0.3s ease-in;
    -webkit-animation: fadeInUp 0.3s ease-in;
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-in;
}

.fade-in-left {
    animation: fadeInLeft 0.3s ease-in;
}

.fade-in-right {
    animation: fadeInRight 0.3s ease-in;
}

/* ===== 20. RESPONSIVE BREAKPOINTS ===== */
/* All responsive styles have been moved to responsive.css */

/* ===== 21. UTILITY CLASSES ===== */
.bg-accent {
    background-color: var(--e-global-color-accent) !important;
}

.bg-primary {
    background-color: var(--e-global-color-primary) !important;
}

.bg-secondary {
    background-color: var(--e-global-color-secondary) !important;
}

.text-primary {
    color: var(--e-global-color-primary) !important;
}

.text-secondary {
    color: var(--e-global-color-secondary) !important;
}

.text-accent {
    color: var(--e-global-color-accent) !important;
}

/* Image Box Styles (Based on post-741.css) */
.image-box {
    text-align: center;
}

.image-box-img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s;
    margin-bottom: 15px;
}

.image-box:hover .image-box-img {
    transform: scale(1.05);
}

.image-box-title {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--e-global-color-text);
    transition: color 0.3s;
}

.image-box:hover .image-box-title {
    color: var(--e-global-color-primary);
}

.image-box-description {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--e-global-color-text);
}

/* ===== END OF CSS ===== */

.thankspage-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(https://adtech-id.com/wp-content/uploads/2025/11/Industropolis-Batang-Background-Hero-01.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;

}

.thankspage-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-dark-blue);
    opacity: 0.85;
    z-index: 1;
}

.thankspage-section h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--e-global-color-9cceaf9);
    margin-bottom: 20px;
    z-index: 2;
}

.btn-outline-main {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4em;
    color: var(--e-global-color-9cceaf9);
    border: 1px solid var(--e-global-color-675aabf);
    padding: 10px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 2;
}

.btn-outline-main:hover {
    background-color: var(--e-global-color-primary);
    color: var(--e-global-color-9cceaf9);
}