/* =========================================================
   GLOBAL / ROOT VARIABLES
   ========================================================= */
:root{
    --navy-dark:      #1B3A6B;
    --navy-darker:    #142E56;
    --navy-banner:    #1B3B6E;
    --orange:         #F5821F;
    --orange-light:   #F7941D;
    --bg-light-blue:  #EAF4FC;
    --text-gray:      #4A4A4A;
    --divider-gray:   #D9E2EC;

    --primary: #1B3A6B;
    --secondary: #4A90E2;
    --soft: #EAF4FC;
    --gray: #6B7280;
    --text: #444444;
}

*{
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    color: var(--text-gray);
    margin: 0;
    padding: 0;
    padding-top: 78px; /* offset agar konten tidak tertutup navbar fixed */
    overflow-x: hidden;
}

img{
    max-width: 100%;
    display: block;
}

/* =========================================================
   NAVBAR 
   ========================================================= */
.andowa-navbar{
    background-color: #FFFFFF;
    box-shadow: 0 2px 14px rgba(20,46,86,0.08);
    padding-top: 14px;
    padding-bottom: 14px;
}

.andowa-navbar-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.andowa-navbar-logo{
    width: auto;
    height: 38px;
    object-fit: contain;
}

.andowa-navbar-brand span{
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--navy-dark);
}

.andowa-navbar-nav{
    align-items: center;
    gap: 4px;
}

.andowa-navbar-nav .nav-link{
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy-dark);
    padding: 8px 14px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.andowa-navbar-nav .nav-link:hover,
.andowa-navbar-nav .nav-link.active{
    background-color: var(--bg-light-blue);
    color: var(--navy-dark);
}

.andowa-navbar-cta{
    background-color: var(--orange) !important;
    color: #FFFFFF !important;
    padding: 8px 22px !important;
    margin-left: 8px;
}

.andowa-navbar-cta:hover{
    background-color: #E06F10 !important;
    color: #FFFFFF !important;
}

/* Offset supaya section tidak tertutup navbar saat anchor scroll */
section[id]{
    scroll-margin-top: 78px;
}

html{
    scroll-behavior: smooth;
}

/* =========================================================
   SECTION 1 : HERO / COVER
   ========================================================= */
.section-hero{
    width: 100%;
    background: linear-gradient(180deg, #EAF4FC 0%, #F7FBFE 40%, #FFFFFF 100%);
    position: relative;
}

/* ---------- Header / Logo ---------- */
.page-header-image-wrap{
    width: 100%;
    line-height: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

.page-header-img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.hero-header{
    padding-top: 45px;
    padding-bottom: 10px;
}

.logo-wrap{
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img{
    width: auto;
    height: 55px;
    object-fit: contain;
}

.logo-text{
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--navy-dark);
}

/* ---------- Hero Main (Title + Image) ---------- */
.hero-main{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 620px;
    position: relative;
}

.hero-left{
    width: 48%;
    padding: 60px 0 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-title{
    font-size: 46px;
    font-weight: 800;
    line-height: 1.18;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
    margin: 0 0 30px 0;
}

.orange-divider{
    width: 90px;
    height: 5px;
    background-color: var(--orange);
    border-radius: 3px;
    margin-bottom: 28px;
}

.hero-subtitle{
    font-size: 22px;
    font-weight: 500;
    color: #1E1E1E;
    margin: 0;
}

.hero-right{
    width: 52%;
    position: relative;
    overflow: hidden;
}

.hero-image-clip{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* diagonal cut like in the PDF - top-left corner cut diagonally */
    clip-path: polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 62%);
    /* background-color: var(--navy-darker); */
}

.hero-city-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Icon Row ---------- */
.hero-icon-row{
    background-color: #FFFFFF;
    padding: 40px 0;
    border-top: 1px solid #EEF2F6;
}

.icon-row-inner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.icon-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    padding: 0 10px;
}

.icon-circle{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    /* background-color: var(--navy-dark); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.icon-circle i{
    font-size: 28px;
    color: #FFFFFF;
}

.icon-label{
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-dark);
    line-height: 1.35;
}

.icon-divider{
    width: 1px;
    align-self: stretch;
    background-color: var(--divider-gray);
    margin: 8px 0;
}

/* ---------- Bottom Dark Banner ---------- */
.hero-bottom-banner{
    background-color: var(--navy-banner);
    position: relative;
    padding: 45px 0 70px 0;
    margin-top: 10px;
}

.bottom-banner-inner{
    display: flex;
    align-items: center;
    gap: 40px;
}

.bottom-banner-image{
    width: 22%;
    border-radius: 16px;
    overflow: hidden;
}

.bottom-img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
}

.bottom-banner-text{
    width: 40%;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1.7;
}

.bottom-banner-text p{
    margin: 0;
}

.bottom-banner-contact{
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item{
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 14px;
}

.contact-item:last-child{
    border-bottom: none;
}

.contact-icon{
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background-color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon i{
    color: #FFFFFF;
    font-size: 16px;
}

.contact-text{
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
}

/* Orange curve strip at the very bottom of hero section */
.orange-curve-bottom{
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 26px;
    background-color: var(--orange);
    border-top-left-radius: 60% 100%;
}

/* =========================================================
   SHARED : PAGE HEADER
   ========================================================= */
.page-header{
    padding-top: 40px;
    padding-bottom: 30px;
}

.page-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-img-sm{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-text-sm{
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--navy-dark);
    margin-left: 10px;
}

.page-header-inner .logo-wrap{
    display: flex;
    align-items: center;
}

.page-tag{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--navy-dark);
    text-transform: uppercase;
}

/* =========================================================
   SECTION 2 : TABLE OF CONTENTS
   ========================================================= */
.section-toc{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 60px;
    position: relative;
}

.toc-main-row{
    align-items: flex-start;
    padding-top: 10px;
}

.toc-left{
    padding-right: 40px;
}

.toc-title{
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.5px;
    margin-bottom: 22px;
}

.text-navy{
    color: var(--navy-dark);
}

.text-orange{
    color: var(--orange);
}

.toc-desc{
    font-size: 15px;
    line-height: 1.7;
    color: #333333;
    max-width: 480px;
    margin-bottom: 24px;
}

.orange-divider.small{
    width: 60px;
    height: 4px;
    margin: 0;
}

.toc-list{
    list-style: none;
    margin: 30px 0 0 0;
    padding: 0;
}

.toc-item{
    display: flex;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--divider-gray);
}

.toc-item:first-child{
    padding-top: 0;
}

.toc-num{
    font-size: 30px;
    font-weight: 800;
    color: var(--navy-dark);
    min-width: 60px;
}

.toc-sep{
    width: 1px;
    height: 26px;
    background-color: var(--divider-gray);
    margin-right: 20px;
}

.toc-label{
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #222222;
}

.toc-page{
    font-size: 18px;
    font-weight: 800;
    color: var(--orange);
    min-width: 40px;
    text-align: right;
}

.toc-footer-note{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
}

.toc-footer-icon{
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background-color: var(--bg-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.toc-footer-icon img{
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.toc-footer-note p{
    font-size: 13.5px;
    line-height: 1.6;
    color: #333333;
    margin: 0;
}

.toc-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
}

.toc-image-wrap{
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 24px;
}

.toc-building-img{
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.toc-platform-box{
    width: 100%;
    background-color: var(--bg-light-blue);
    border-radius: 16px;
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.toc-platform-icon{
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.toc-platform-icon i{
    font-size: 26px;
    color: #FFFFFF;
}

.toc-platform-text{
    font-size: 19px;
    font-weight: 700;
    color: var(--navy-dark);
    margin: 14px 0 0 0;
    line-height: 1.4;
}

/* =========================================================
   SECTION 3 : COMPANY OVERVIEW
   ========================================================= */
.section-overview{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 20px;
}

.text-navy-dk{
    color: var(--navy-dark);
}

/* ---- Banner biru gelap ---- */
.overview-banner{
    background-color: var(--navy-dark); /* fallback warna jika gambar gagal dimuat */
    background-image: url('../images/overview-laptop-truck.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 22px;
    margin: 0 15px 50px 15px;
    padding: 120px 45px;
    position: relative;
    overflow: hidden;
}

.overview-banner-row{
    position: relative;
    z-index: 2;
}

.overview-title{
    font-size: 60px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 22px;
}

.overview-banner .overview-title .text-navy-dk{
    color: #FFFFFF;
}

.overview-desc{
    color: var(--navy-dark);
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 16px;
}

.overview-banner-image-wrap{
    position: relative;
}

.overview-image-frame{
    position: relative;
    width: 100%;
}

.overview-main-img{
    width: 100%;
    border-radius: 14px;
    display: block;
}

.overview-badge{
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 14px 16px;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 130px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.badge-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.badge-icon i{
    color: #FFFFFF;
    font-size: 18px;
}

.badge-title{
    font-size: 11px;
    font-weight: 800;
    color: var(--orange);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.badge-caption{
    font-size: 10.5px;
    color: #333333;
    line-height: 1.35;
}

.badge-enterprise{ top: -6%; left: 6%; }
.badge-retail{ top: -12%; left: 40%; }
.badge-community{ top: -6%; right: 2%; }
.badge-sme{ top: 22%; right: -4%; }

/* ---- Feature Cards ---- */
.overview-feature-box{
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 6px 30px rgba(20,46,86,0.10);
    padding: 40px 20px;
    margin: 0 15px 50px 15px;
}

.overview-feature-item{
    text-align: center;
    padding: 0 18px;
    border-right: 1px solid var(--divider-gray);
}

.overview-feature-item:last-child{
    border-right: none;
}

.feature-icon{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    /* border: 2px solid var(--orange); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.feature-icon i{
    font-size: 22px;
    color: var(--orange);
}

.feature-title{
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.feature-desc{
    font-size: 13px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* ---- Bottom : Tentang Kami / Visi Misi ---- */
.overview-bottom-row{
    padding: 0 15px;
}

.overview-subheading{
    font-size: 19px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.overview-about{
    padding-right: 30px;
    border-right: 1px solid var(--divider-gray);
}

.overview-about-desc{
    font-size: 13.5px;
    line-height: 1.75;
    color: #444444;
    margin: 18px 0 24px 0;
}

.overview-detail-list{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
}

.detail-icon{
    color: var(--navy-dark);
    width: 20px;
    display: inline-flex;
    justify-content: center;
    margin-top: 2px;
}

.detail-label{
    min-width: 140px;
    font-weight: 700;
    color: var(--navy-dark);
}

.detail-colon{
    margin: 0 4px;
    color: var(--navy-dark);
}

.detail-value{
    color: #444444;
    flex: 1;
}

.overview-vision{
    padding-left: 30px;
    position: relative;
}

.overview-vision-desc{
    font-size: 13.5px;
    line-height: 1.75;
    color: #444444;
    margin: 18px 0 0 0;
}

.overview-misi-list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.misi-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.misi-icon{
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background-color: var(--bg-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.misi-icon i{
    color: var(--navy-dark);
    font-size: 14px;
}

.misi-text{
    font-size: 13px;
    line-height: 1.6;
    color: #444444;
}

.overview-vision{
    padding-left: 30px;
    padding-right: 120px; /* reserved space untuk map di kanan */
    position: relative;
}

.overview-map-graphic{
    position: absolute;
    top: 0;
    right: -210px;
    width: 400px;
    opacity: 0.9;
    pointer-events: none;
}

.overview-map-graphic img{
    width: 100%;
    height: auto;
}

/* =========================================================
   SECTION 4 : MARKET CHALLENGES
   ========================================================= */
.section-challenges{
    width: 100%;
    background-color: #FFFFFF;
    padding: 10px 0 0px 0;
}

.challenges-intro-row{
    padding: 10px 15px 40px 15px;
}

.challenges-title{
    font-size: 65px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
}

.challenges-desc{
    font-size: 18px;
    line-height: 1.75;
    color: #444444;
    max-width: 460px;
}

.challenges-img{
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

/* ---- 3 Category Cards ---- */
.challenges-cards-row{
    padding: 0 15px 40px 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.challenges-cards-row > .challenges-card{
    flex: 1 1 calc(33.333% - 22px);
    max-width: calc(33.333% - 22px);
}

@media (max-width: 767px){
    .challenges-cards-row > .challenges-card{
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.challenges-card{
    background-color: #FFFFFF;
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    padding: 30px 24px;
    margin-bottom: 20px;
}

.challenges-card-icon{
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.challenges-card-icon i{
    font-size: 24px;
    color: var(--navy-dark);
}

.challenges-card-title{
    font-size: 14px;
    font-weight: 800;
    color: var(--orange);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.challenges-card-subtitle{
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.challenges-card-list{
    list-style: none;
    padding: 0;
    margin: 16px 0 20px 0;
}

.challenges-card-list li{
    font-size: 13px;
    color: #444444;
    line-height: 1.8;
    padding-left: 16px;
    position: relative;
}

.challenges-card-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--orange);
}

.challenges-stat{
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--divider-gray);
    padding-top: 18px;
}

.stat-number{
    font-size: 32px;
    font-weight: 800;
    color: var(--navy-dark);
    min-width: 80px;
}

.stat-desc{
    font-size: 12px;
    line-height: 1.5;
    color: #555555;
}

/* ---- Dampak Utama ---- */
.challenges-impact-section{
    padding: 10px 15px 40px 15px;
}

.impact-heading-row{
    display: flex;
    align-items: center;
    gap: 24px;
}

.impact-heading-title{
    font-size: 32px;
    font-weight: 800;
    color: var(--navy-dark);
    white-space: nowrap;
    margin: 0;
}

.impact-heading-line{
    flex: 1;
    height: 1px;
    background-color: var(--divider-gray);
}

.challenges-impact-row{
    margin-top: 40px;
}

.impact-item{
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid var(--divider-gray);
}

.impact-item:last-child{
    border-right: none;
}

.impact-icon{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

.impact-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.impact-title{
    font-size: 16px;
    font-weight: 800;
    color: #1E1E2E;
    line-height: 1.4;
    margin-bottom: 16px;
}

.impact-desc{
    font-size: 13.5px;
    line-height: 1.6;
    color: #6B7280;
    margin: 0;
}

/* ---- Butuh Solusi Terintegrasi ---- */
.challenges-solution-box{
    background-color: var(--bg-light-blue);
    border-radius: 18px;
    padding: 28px 30px;
    margin: 0 15px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.solution-icon-wrap{
    width: 140px;
    min-width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-icon-wrap img{
    max-width: 200%;
    max-height: 200%;
    object-fit: contain;
}

.solution-text{
    flex: 1;
}

.solution-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 8px;
    margin-left: 80px;
}

.solution-desc{
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
    margin: 0;
    margin-left: 80px;
}

.solution-arrow{
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-arrow i{
    color: #FFFFFF;
    font-size: 20px;
}

/* =========================================================
   SECTION 5 : THE ANDOWA ECOSYSTEM
   ========================================================= */
.ecosystem-section{
    padding: 20px 0 10px 0;
    background:#fff;
}

.ecosystem-header{
    text-align:center;
    max-width:780px;
    margin:0 auto 70px;
}

.ecosystem-header .market-title{
    text-align:center;
}

.text-orange{
    color:var(--orange);
}

.container-custom{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

.market-title{
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--primary);
    margin: 0;
}

.section-line{
    width: 60px;
    height: 4px;
    background-color: var(--orange);
    border-radius: 3px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.market-description{
    font-size: 18px;
    line-height: 1.7;
    color: var(--text);
    margin: 0;
}

.ecosystem-description{
    text-align:center;
}

.ecosystem-diagram{
    position:relative;
    margin-top: -40px;
}

.ecosystem-grid{
    display:grid;
    grid-template-columns: 1fr 400px 1fr;
    align-items:stretch;
    column-gap:40px;
}

.ecosystem-col{
    position:relative;
}

.ecosystem-col-services{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    align-self:stretch;
}
 
.ecosystem-col-services .ecosystem-tag{
    align-self:flex-end;
}
 
.ecosystem-list.list-right{
    flex:1;
    justify-content:space-between;
}

.ecosystem-col-center{
    display:flex;
    justify-content:center;
    align-self:center;
    position: relative;
    margin-left: 60px;
    z-index: 5;
}

.ecosystem-tag{
    display:inline-block;
    color:#fff;
    font-weight:700;
    font-size:18px;
    padding:12px 32px;
    margin-bottom:30px;
}

.tag-products{
    background:var(--primary);
    border-radius:0 30px 30px 0;
}

.tag-services{
    background:var(--orange);
    border-radius:30px 0 0 30px;
}

.ecosystem-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}

.ecosystem-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    width:100%;
    background:#fff;
    border:2px solid #dfe4ea;
    border-radius:18px;
    padding:16px 22px;
    transition:.35s;
    box-sizing:border-box;
}

.item-right{
    justify-content:flex-end;
    max-width: 85%;
    margin-left: auto;
}

.ecosystem-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.item-software,
.item-secure,
.item-solution,
.item-learning{
    justify-content:flex-end;
}

.item-software .ecosystem-text,
.item-secure .ecosystem-text,
.item-solution .ecosystem-text,
.item-learning .ecosystem-text{
    flex: 1;
}

.item-icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  /* color: #fff; */
}

.ecosystem-icon{
    flex-shrink:0;
    width:54px;
    height:54px;
    border-radius:14px;
    /* background:var(--soft); */
    display:flex;
    align-items:center;
    justify-content:center;
}

.ecosystem-icon img{
    width:50px;
    height:auto;
}

.ecosystem-text h5{
    font-size:18px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:2px;
}

.ecosystem-text p{
    font-size:14px;
    color:var(--gray);
    margin:0;
    line-height:1.4;
}

.text-secondary-blue{
    color:var(--secondary);
}

/* connector lines between cards and center circle */
.ecosystem-col-products .ecosystem-item::after,
.ecosystem-col-services .ecosystem-item::after{
    content:"";
    position:absolute;
    top:50%;
    width:60px;
    height:1px;
    background:#d8d8d8;
    z-index:0;
}

.ecosystem-col-products .ecosystem-item::after{
    right:-60px;
}

.ecosystem-col-services .ecosystem-item::after{
    left:-60px;
}

.ecosystem-col-products .ecosystem-item::before,
.ecosystem-col-services .ecosystem-item::before{
    content:"";
    position:absolute;
    top:50%;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--orange);
    z-index:1;
}

.ecosystem-col-products .ecosystem-item::before{
    right:-64px;
}

.ecosystem-col-services .ecosystem-item::before{
    left:-64px;
}

/* ---- Garis connector miring mengarah ke lingkaran tengah ---- */
/* ---- PRODUCTS: atur satu-satu ---- */
.ecosystem-item.item-hcms::after{
    transform: rotate(27deg);
    width: 160px;
    right: -150px;
    top: 85px;
}
.ecosystem-item.item-hcms::before{
    right: -6px;
}

.ecosystem-item.item-fams::after{
    transform: rotate(24deg);
    width: 160px;
    right: -150px;
    top: 81px;
}
.ecosystem-item.item-fams::before{
    right: -6px;
}

.ecosystem-item.item-oms::after{
    transform: rotate(-15deg);
    width: 160px;
    right: -160px;
    top: 26px;
}
.ecosystem-item.item-oms::before{
    right: -6px;
}

.ecosystem-item.item-crms::after{
    transform: rotate(-25deg);
    width: 160px;
    right: -150px;
    top: 19px;
}
.ecosystem-item.item-crms::before{
    right: -6px;
}

.ecosystem-item.item-poins::after{
    transform: rotate(-40deg);
    width: 235px;
    right: -210px;
    top: -28px;
}
.ecosystem-item.item-poins::before{
    right: -6px;
}

.ecosystem-item.item-coms::after{
    transform: rotate(-45deg);
    width: 290px;
    right: -250px;
    top: -55px;
}
.ecosystem-item.item-coms::before{
    right: -6px;
}

/* ---- SERVICES: atur satu-satu ---- */
.ecosystem-item.item-software::after{
    transform: rotate(-22deg);
    width: 180px;
    left: -180px;
    top: 87px;
}
.ecosystem-item.item-software::before{
    left: -6px;
}

.ecosystem-item.item-secure::after{
    transform: rotate(-0deg);
    width:104px;
    left: -104px;
    top: 52px;
}
.ecosystem-item.item-secure::before{
    left: -6px;
}

.ecosystem-item.item-solution::after{
    transform: rotate(30deg);
    width: 200px;
    left: -190px;
    top: 0px;
}
.ecosystem-item.item-solution::before{
    left: -6px;
}

.ecosystem-item.item-learning::after{
    transform: rotate(45deg);
    width: 280px;
    left: -240px;
    top: -45px;
}
.ecosystem-item.item-learning::before{
    left: -6px;
}

.ecosystem-center{
    text-align:center;
    padding:20px 0;
    margin-top: 50px;
}

.ecosystem-orbit{
    position:relative;
    width:350px;
    height:350px;
    margin:0 auto;
    border-radius:50%;
    background:var(--soft);
    border:1px solid #e3e9f4;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index: 5;
}

.orbit-label{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    writing-mode:vertical-rl;
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:3px;
    padding:18px 6px;
    border-radius:30px;
}

.orbit-label-left{
    left:-16px;
    background:var(--primary);
}

.orbit-label-right{
    right:-16px;
    background:var(--orange);
}

.ecosystem-core{
    width:250px;
    height:250px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.ecosystem-core img{
    width:65%;
    height:auto;
}

.ecosystem-arrow-mobile{
    display: none;
    text-align: center;
    margin-bottom: 24px;
}

.ecosystem-arrow{
    display: block;
    width: 3px;
    height: 70px;
    background-color: #b7c5e6;
    margin: 20px auto 0 auto;
    position: relative;
    text-decoration: none;
    transition: .3s;
}

.ecosystem-arrow::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid #b7c5e6;
}

.ecosystem-arrow:hover{
    background-color: var(--orange);
}

.ecosystem-arrow:hover::after{
    border-top-color: var(--orange);
}

.ecosystem-vas-label{
    display:block;
    margin-top:30px;
    font-size:18px;
    font-weight:800;
    letter-spacing:1.5px;
    color: var(--primary);
}

.value-added-box{
    margin-top:40px;
    background:#fff;
    border:2px solid #dfe4ea;
    border-radius:24px;
    padding:35px 20px 15px;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
}

.vas-item{
    text-align:center;
    padding:0 15px 25px;
}

.vas-item img{
    width:46px;
    height:auto;
    margin-bottom:14px;
}

.vas-item p{
    font-size:14px;
    color:var(--gray);
    line-height:1.5;
    margin:0;
}

.connected-banner{
    margin-top:50px;
    background: linear-gradient(135deg, #EAF4FC 0%, #F7FBFE 100%);
    border-radius:28px;
    padding:55px 30px;
    overflow: hidden;
}

.connected-illustration{
    width:100%;
    max-width:280px;
}

.connected-title{
    font-size:30px;
    font-weight:800;
    margin-bottom:0;
}

.text-primary-blue{
    color:var(--primary);
}

.connected-description{
    font-size:17px;
    line-height:1.8;
    color:var(--text);
    margin-top:18px;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
}

.ecosystem-features{
    margin-top:0px;
}

.ecosystem-feature-item{
    text-align:center;
    padding: 0 20px;
    border-right: 1px solid var(--divider-gray);
}

.ecosystem-feature-item:last-child{
    border-right: none;
}

.ecosystem-feature-icon{
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--soft);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 24px;
    transition:.35s;
}

.ecosystem-feature-icon img{
    width:46px;
    height:auto;
}

.ecosystem-feature-item:hover .ecosystem-feature-icon{
    background:var(--primary);
}

.ecosystem-feature-item:hover .ecosystem-feature-icon img{
    filter:brightness(0) invert(1);
}

.ecosystem-feature-item h6{
    font-size:16px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:10px;
}

.ecosystem-feature-item p{
    font-size:14px;
    color:var(--gray);
    line-height:1.6;
    max-width:190px;
    margin:0 auto;
}

/* =========================================================
   SECTION 6 : DIGITAL ENTERPRISE
   ========================================================= */
.br-desktop{
    display: inline;
}

.section-digital-enterprise{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 0px;
}

.de-top-row{
    margin-bottom: 45px;
}

.de-title-bar{
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 60px 0 60px;
    margin-bottom: 30px;
}

.de-title{
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0;
    padding: 0;
    white-space: nowrap;
}

.de-title-line{
    flex: 1;
    height: 1px;
    background-color: #C7CDD6;
}

.de-desc{
    font-size: 18px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 28px;
    max-width: 460px;
    padding: 0 0 0 60px;
}

.de-feature-list{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 0 60px;
}

.de-feature-row{
    display: flex;
    align-items: center;
    gap: 14px;
}

.de-feature-icon{
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: var(--bg-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-feature-icon i{
    color: var(--navy-dark);
    font-size: 19px;
}

.de-feature-text{
    display: flex;
    flex-direction: column;
}

.de-feature-title{
    font-size: 15px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
}

.de-feature-desc{
    font-size: 14px;
    color: #555555;
    line-height: 1.4;
}

/* ---- Phone mockup w/ badges ---- */
.de-phone-wrap{
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 640 / 520;
    margin: 30px auto;
}

.de-phone-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 550px;
    width: 100%;
    height: auto;
    z-index: 2;
}

.de-badge{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 100px;
    background-color: #FFFFFF;
    border: 1px solid var(--divider-gray);
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 6px 16px rgba(20,46,86,0.10);
    font-size: 12px;
    font-weight: 700;
    color: var(--navy-dark);
    z-index: 3;
}

.de-badge-icon{
    width: 36px;
    height: 36px;
    min-width: 36px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-badge-icon img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.de-badge-icon.icon-orange{
    background-color: transparent;
}

.de-badge-icon i{
    color: var(--navy-dark);
    font-size: 40px;
}

.de-badge span{
    font-size: 11px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.2;
    margin-top: 2px;
}

.de-badge-desc{
    font-size: 8px;
    font-weight: 400;
    color: #6B7280;
    line-height: 1.45;
    margin: 0;
}

.de-badge{
    transform: translate(0, -50%);
}

.badge-hcms{ top: 0%; left: 42%; }
.badge-fams{ top: 7%; left: 17%; }
.badge-oms{ top: 32%; left: 2%; }
.badge-crm{ top: 64%; left: 3%; }
.badge-poin{ top: 93%; left: 17%; }
.badge-coms{ top: 100%; left: 42%; }

.badge-software{ top: 7%; right: 17%; }
.badge-secure{ top: 32%; right: 2%; }
.badge-solution{ top: 64%; right: 3%; }
.badge-learning{ top: 93%; right: 17%; }

/* ---- Solusi Terintegrasi Section ---- */
.de-solutions-section{
    margin-top: 40px;
    margin-bottom: 40px;
}

.de-solution-icon i{
    font-size: 22px;
    color: var(--navy-dark);
}

.de-solution-title{
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 8px;
}

.de-solution-desc{
    font-size: 12.5px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* ---- Nilai Untuk Organisasi Anda ---- */
.de-value-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.de-value-desc{
    font-size: 15px;
    line-height: 1.75;
    color: #444444;
    margin: 14px 0 0 0;
}

/* ---- Bottom Banner ---- */
.de-bottom-banner{
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    overflow: hidden;
}

.de-bottom-img-wrap{
    height: 100%;
}

.de-bottom-img{
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.de-bottom-text-wrap{
    padding: 20px 30px;
}

.de-bottom-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.35;
    margin-bottom: 10px;
}

.de-bottom-desc{
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

.de-bottom-icons-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px 30px;
}

.de-bottom-icon-item i{
    font-size: 16px;
    color: var(--orange);
}

/* ---- Heading dengan garis kedua sisi ---- */
.de-solutions-heading-row{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.de-heading-line{
    flex: 1;
    height: 1px;
    background-color: var(--divider-gray);
}

.de-solutions-heading{
    font-size: 18px;
    font-weight: 800;
    color: var(--orange);
    text-align: center;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin: 0;
}

/* ---- Solution Cards ---- */
.de-solutions-row{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.de-solutions-row .de-solution-card{
    flex: 0 0 calc(25% - 12px);
    max-width: calc(25% - 12px);
    margin: 0 6px;
    text-align: center;
    padding: 24px 16px;
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    height: 100%;
}

.de-solution-icon{
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
}

.de-solution-icon img{
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.icon-lightblue{
    background-color: #A9CDEE;
}

.icon-navy{
    background-color: var(--navy-dark);
}

.icon-orange{
    background-color: var(--orange);
}

.de-solution-title{
    font-size: 15px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.de-solution-desc{
    font-size: 12.5px;
    line-height: 1.55;
    color: #555555;
    margin: 0;
}

/* ---- Nilai Untuk Organisasi Anda ---- */
.de-value-box{
    background-color: #F5F8FC;
    border: 1px solid var(--divider-gray);
    border-radius: 18px;
    padding: 30px 34px;
    margin-bottom: 40px;
}

/* ---- Bottom Banner Icons (grid 3x2, outline circle) ---- */
.de-bottom-icons-wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
    padding: 20px 30px;
}

.de-bottom-icon-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-dark);
}

.de-bottom-icon-circle{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    /* border: 1.5px solid var(--navy-dark); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-bottom-icon-circle i{
    font-size: 20px;
    color: var(--navy-dark);
}

/* =========================================================
   SECTION 7 : IT INFRASTRUCTURE MANAGEMENT
   ========================================================= */
.section-it-infra{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 0px;
}

.it-infra-top-row{
    margin-bottom: 40px;
}

.it-infra-title{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
}

.it-infra-desc{
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 22px;
}

.it-infra-note-box{
    background-color: var(--bg-light-blue);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 18px;
}

.it-infra-note-title{
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.it-infra-note-list{
    margin: 0;
    padding-left: 18px;
}

.it-infra-note-list li{
    font-size: 14px;
    line-height: 1.8;
    color: #444444;
}

.it-infra-role-box{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--divider-gray);
    border-radius: 14px;
    padding: 18px 20px;
}

.role-box-icon{
    color: var(--orange);
    font-size: 20px;
    margin-top: 2px;
}

.role-box-text{
    font-size: 12.5px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

/* ---- How It Works Flow ---- */
.it-infra-flow-heading{
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.it-flow-box{
    position: relative;
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    padding: 20px 22px;
    background-color: #FFFFFF;
}

.it-flow-title{
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 4px;
}

.it-flow-subtitle{
    font-size: 12px;
    color: #666666;
    margin-bottom: 0;
}

.it-flow-icons-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.flow-arrow-sm{
    margin-bottom: 26px;
}

.flow-icon-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.flow-icon-item span{
    font-size: 10.5px;
    color: #777777;
    white-space: nowrap;
    text-align: center;
}

.flow-mini-icon{
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Ilustrasi Cloud + Devices (pengganti icon cloud tunggal) ---- */
.cloud-devices-diagram{
    display: flex;
    align-items: center;
}

.cloud-diagram-img{
    width: 180px;
    height: auto;
    object-fit: contain;
}

.it-flow-inner-box{
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 18px 14px;
    margin-top: 14px;
}

.manage-icon-item img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px auto;
}

.flow-mini-icon img{
    height: 40px;
    width: auto;
    object-fit: contain;
}

.flow-arrow-sm{
    color: #AAB4C2;
    font-size: 13px;
}

.it-flow-arrow-down{
    text-align: center;
    color: var(--navy-dark);
    font-size: 18px;
    margin: 8px 0;
}

.flow-box-manage{
    background-color: var(--bg-light-blue);
    padding-top: 30px;
}

.it-flow-manage-icons{
    margin-top: 10px;
}

.it-flow-header-row{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.it-flow-header-text{
    flex: 1;
}

.it-flow-badge{
    position: static;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(20,46,86,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.it-flow-badge img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.manage-icon-item{
    text-align: center;
    padding: 0 10px;
    border-right: 1px solid var(--divider-gray);
}

.manage-icon-item:last-child{
    border-right: none;
}

.manage-icon-item i{
    font-size: 18px;
    color: var(--navy-dark);
    display: block;
    margin-bottom: 8px;
}

.manage-icon-item span{
    font-size: 10.5px;
    color: #444444;
    line-height: 1.35;
    display: block;
}

.flow-box-customer{
    /* background-color: var(--bg-light-blue); */
    padding: 24px 22px;
}

.flow-box-customer .it-flow-title,
.flow-box-customer .it-flow-subtitle{
    color: var(--navy-dark);
}

.flow-box-customer .it-flow-subtitle{
    color: #444444;
}

.customer-box-icon{
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 18px;
}

/* ---- Layanan Kami ---- */
.it-infra-services-section{
    margin-bottom: 40px;
}

.it-services-row{
    margin-top: 22px;
}

.it-service-card{
    border: 1px solid var(--divider-gray);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
    margin: 0 4px;
}

.it-service-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    /* background-color: var(--bg-light-blue); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px auto;
}

.it-service-icon i{
    font-size: 19px;
    color: var(--navy-dark);
}

.it-service-title{
    font-size: 13px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 8px;
}

.it-service-desc{
    font-size: 11.5px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* ---- Manfaat Untuk Bisnis Anda ---- */
.it-benefit-section{
    margin-bottom: 40px;
}

.it-benefit-row{
    margin-top: 20px;
    gap: 12px 0;
}

.it-benefit-item{
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-light-blue);
    border-radius: 30px;
    padding: 10px 18px;
    margin: 4px 8px 4px 0;
}

.it-benefit-item i{
    color: var(--orange);
    font-size: 16px;
}

.it-benefit-item span{
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-dark);
}

/* ---- Cloud Provider Partners ---- */
.it-partners-section{
    margin-bottom: 40px;
}

.it-partners-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    border: 1px solid var(--divider-gray);
    border-radius: 14px;
    padding: 22px 24px;
}

.it-partner-logo{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-dark);
}

.it-partner-logo i{
    font-size: 18px;
    color: var(--orange);
}

/* ---- Bottom Illustration ---- */
.it-infra-illustration{
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.it-infra-illustration img{
    width: 100%;
    object-fit: cover;
}

/* =========================================================
   SECTION 8 : WHY CHOOSE ANDOWA
   ========================================================= */
.section-why-choose{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 0px;
}

.wc-title-wrap{
    text-align: center;
    max-width: 700px;
    margin: 0 auto 8px auto;
}

.wc-title{
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.wc-desc{
    font-size: 20px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

.wc-lead-text{
    text-align: left;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-dark);
    margin: 24px 0 30px 0;
}

/* ---- 5 Reason Cards ---- */
.wc-cards-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 25px;
}

.wc-cards-row .wc-card{
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
}

.wc-cards-row .wc-card-offset{
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

.wc-card{
    background-color: var(--bg-light-blue);
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    padding: 36px 28px;
    margin-bottom: 10px;
    text-align: center;
}

.wc-card-icon{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.wc-card-icon img{
    max-width: 80px;
    max-height: 80px;
}

.wc-card-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.wc-card-title-divider{
    width: 40px;
    height: 3px;
    background-color: var(--orange);
    border-radius: 2px;
    margin: 0 auto 16px auto;
}

.wc-card-desc{
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

/* ---- Bottom : Image + Numbers ---- */
.wc-bottom-row{
    align-items: stretch;
}

.wc-bottom-image-wrap{
    border-radius: 18px;
    overflow: hidden;
}

.wc-bottom-img{
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.wc-numbers-box{
    background-color: var(--bg-light-blue);
    border-radius: 18px;
    padding: 30px 28px;
}

.wc-numbers-title{
    font-size: 20px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.wc-number-row{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #DCE7F2;
}

.wc-number-row:last-child{
    border-bottom: none;
}

.wc-number-icon{
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-number-icon img{
    max-width: 60px;
    max-height: 60px;
}

.wc-number-text{
    display: flex;
    align-items: center;
    gap: 12px;
}

.wc-number-value{
    font-size: 35px;
    font-weight: 800;
    color: var(--navy-dark);
}

.wc-number-label{
    font-size: 20px;
    color: #444444;
    line-height: 1.35;
}

.wc-number-label-only{
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-dark);
}

/* =========================================================
   SECTION 9 : ANDOWA SERVICE PORTFOLIO
   ========================================================= */
.section-portfolio{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 0px;
}

.portfolio-title-wrap{
    text-align: center;
    max-width: 750px;
    margin: 0 auto 40px auto;
}

.portfolio-title{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.portfolio-desc{
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

/* ---- Service Cards ---- */
.portfolio-cards-row{
    margin-bottom: 40px;
}

.portfolio-card-col{
    margin-bottom: 24px;
}

.portfolio-card{
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    padding: 24px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.portfolio-badge{
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    color: #FFFFFF;
    padding: 4px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.badge-software-tag{ background-color: var(--navy-dark); }
.badge-secure-tag{ background-color: var(--navy-dark); }
.badge-solution-tag{ background-color: var(--navy-dark); }
.badge-learning-tag{ background-color: var(--navy-dark); }

.portfolio-card-body{
    display: flex;
    gap: 18px;
    margin-bottom: 20px;
}

/* .portfolio-card-icon{
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 14px;
    background-color: var(--bg-light-blue);
    display: flex;
    align-items: center;
    justify-content: center;
} */

.portfolio-card-icon img{
    max-width: 150px;
    max-height: 150px;
}

.portfolio-card-title{
    font-size: 17px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.3;
    margin-bottom: 10px;
}

.portfolio-card-desc{
    font-size: 12.5px;
    line-height: 1.65;
    color: #555555;
    margin: 0;
}

.portfolio-tags-row{
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--divider-gray);
    padding-top: 18px;
    margin-top: auto;
}

.portfolio-tag-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 8px;
}

.portfolio-tag-item img{
    max-width: 40px;
    max-height: 40px;
}

.portfolio-tag-item span{
    font-size: 11px;
    color: #555555;
    line-height: 1.4;
}

/* ---- Beyond Technology ---- */
.portfolio-beyond-row{
    align-items: stretch;
}

.beyond-item{
    text-align: left;
    padding: 20px 20px 20px 20px;
    border-right: 1px solid var(--divider-gray);
    display: flex;
    flex-direction: column;
}

.beyond-item:last-child{
    border-right: none;
    padding-right: 0;
}

.beyond-icon-img{
    width: 100%;
    max-width: 160px;
    height: 130px;
    object-fit: contain;
    position: relative;
    align-items: center;
    margin-bottom: 16px;
    display: block;
}

.beyond-title{
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-dark);
    line-height: 1.4;
    margin-bottom: 8px;
    min-height: 40px;
}

.beyond-desc{
    font-size: 11.5px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* =========================================================
   SECTION 10 : INDUSTRIES WE SERVE
   ========================================================= */
.section-industries{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 0px;
}

.industries-intro-row{
    margin-bottom: 40px;
}

.industries-title{
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
}

.industries-desc{
    font-size: 20px;
    line-height: 1.75;
    color: #444444;
    max-width: 460px;
    margin: 0;
}

.industries-devices-img{
    width: 90%;
    border-radius: 16px;
    object-fit: cover;
}

/* ---- 6 Industry Cards ---- */
.industries-cards-row{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.industries-cards-row .industries-card{
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    margin-bottom: 0;
}

.industries-card{
    margin-bottom: 24px;
    border: 1px solid var(--divider-gray);
    border-radius: 16px;
    background-color: #FFFFFF;
    padding-bottom: 24px;
    overflow: hidden;
}

.industries-card-img-wrap{
    position: relative;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 30px;
}

.industries-card-img-wrap img{
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 16px 16px 0 0;
}

.industries-card-icon{
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(20,46,86,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.industries-card-title{
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 1.35;
    margin: 8px 20px 10px 20px;
}

.industries-card-desc{
    text-align: center;
    font-size: 12.5px;
    line-height: 1.65;
    color: #555555;
    max-width: 100%;
    padding: 0 20px;
    margin: 0;
}

.industries-card-icon i{
    font-size: 50px;
    color: var(--navy-dark);
}

/* =========================================================
   SECTION 11 : TRUSTED BY OUR CLIENTS
   ========================================================= */
.section-clients{
    width: 100%;
    background-color: #FFFFFF;
    padding-bottom: 60px;
}

.clients-title-wrap{
    text-align: center;
    max-width: 750px;
    margin: 0 auto 40px auto;
}

.clients-title{
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 16px;
}

.clients-desc{
    font-size: 20px;
    line-height: 1.7;
    color: #444444;
    margin: 0;
}

.clients-subheading{
    text-align: center;
    font-size: 25px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 10px;
}

.clients-testimonials-section .orange-divider{
    margin: 0 auto 30px auto;
}

.clients-subdesc{
    text-align: center;
    font-size: 15px;
    color: #555555;
    max-width: 560px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

/* ---- Client Logos ---- */
.clients-logos-section{
    margin-bottom: 50px;
}

.clients-logo-row{
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
}

.clients-logo-row-second{
    margin-top: 4px;
}

.clients-logo-row .client-logo-card{
    flex: 1 1 calc(25% - 15px);
    max-width: calc(25% - 15px);
    margin-bottom: 0;
}

.client-logo-card{
    border: 1px solid var(--divider-gray);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.client-logo-name{
    font-size: 17px;
    font-weight: 800;
    color: var(--navy-dark);
    margin-bottom: 0;
    line-height: 1.3;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo-name img{
    max-width: 170px;
    width: 100%;
    height: 90px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.client-logo-divider{
    width: 40px;
    height: 3px;
    background-color: var(--orange);
    border-radius: 2px;
    margin: 16px 0;
}

.client-logo-sub{
    font-size: 11px;
    font-weight: 500;
    color: #777777;
    display: block;
}

.client-logo-script{
    font-family: 'Brush Script MT', cursive;
    font-size: 22px;
    color: #4C8C4A;
}

.client-logo-desc{
    font-size: 15px;
    line-height: 1.55;
    color: #666666;
    margin: 0;
}

/* ---- Testimonials ---- */
.clients-testimonial-row{
    margin-top: 24px;
    margin-left: 0;
    margin-right: 0;
    gap: 20px;
}

.testimonial-card{
    background-color: #FFFFFF;
    border: 1px solid var(--divider-gray);
    border-radius: 14px;
    padding: 24px 22px;
    margin-bottom: 0;
    position: relative;
}

.clients-testimonial-row .testimonial-card{
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

.testimonial-quote-icon{
    font-size: 26px;
    color: var(--orange);
    display: block;
    margin-bottom: 10px;
}

.testimonial-text{
    font-size: 18px;
    line-height: 1.65;
    color: #333333;
    font-style: italic;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--divider-gray);
    min-height: 90px;
}

.testimonial-text .fw-bold{
    color: var(--navy-dark);
    font-style: normal;
}

.testimonial-author{
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar{
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author-info{
    display: flex;
    flex-direction: column;
}

.testimonial-name{
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-dark);
}

.testimonial-position{
    font-size: 16px;
    color: #555555;
}

.testimonial-company{
    font-size: 14px;
    color: #555555;
}

/* =========================================================
   SECTION 12 : LET'S GROW TOGETHER (CLOSING)
   ========================================================= */
.section-closing{
    width: 100%;
    min-height: 550px;
    background: linear-gradient(180deg, #F7FBFE 0%, #FFFFFF 60%);
    position: relative;
    overflow: hidden;
    padding-top: 70px;
}

.closing-shape-navy{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 55%;
    height: 480px;
    background-color: var(--navy-dark);
    clip-path: polygon(0% 100%, 0% 20%, 55% 100%);
    z-index: 1;
}

.closing-shape-orange{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65%;
    height: 340px;
    background-color: var(--orange);
    clip-path: polygon(0% 100%, 0% 55%, 40% 100%);
    z-index: 2;
}

.closing-content{
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.closing-logo-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.closing-logo-img{
    width: 500px;
    height: auto;
    object-fit: contain;
}

.closing-logo-text{
    font-size: 26px;
    font-weight: 800;
    color: var(--navy-dark);
    letter-spacing: 1px;
}

.closing-title{
    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.closing-desc{
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 40px;
}

.closing-qr-wrap{
    width: 160px;
    height: 160px;
    margin: 0 auto 16px auto;
    border: 2px solid var(--navy-dark);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.closing-qr-img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.closing-scan-text{
    display: inline-block;
    background-color: var(--navy-dark);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    margin-bottom: 40px;
}

.closing-contact-list{
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: center;
}

.closing-contact-item{
    display: flex;
    align-items: center;
    gap: 14px;
}

.closing-contact-icon{
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: var(--navy-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.closing-contact-icon i{
    color: #FFFFFF;
    font-size: 16px;
}

.closing-contact-text{
    display: flex;
    flex-direction: column;
    text-align: left;
}

.closing-contact-label{
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-dark);
}

.closing-contact-value{
    font-size: 13px;
    color: #555555;
}

.closing-skyline-wrap{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 480px;
    z-index: 2;
    clip-path: polygon(0% 100%, 0% 25%, 50% 100%);
    background-image: url('../images/closing-city-skyline.png');
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
    .hero-main{
        flex-direction: column;
        min-height: auto;
    }
    .hero-left, .hero-right{
        width: 100%;
    }
    .hero-left{
        padding: 40px 30px;
        text-align: center;
        align-items: center;
    }
    .hero-title{
        font-size: 34px;
    }
    .hero-right{
        height: 350px;
    }
    .hero-image-clip{
        clip-path: none;
    }
    .icon-row-inner{
        flex-wrap: wrap;
        gap: 20px;
    }
    .icon-item{
        flex: 0 0 30%;
    }
    .icon-divider{
        display: none;
    }
    .bottom-banner-inner{
        flex-direction: column;
    }
    .bottom-banner-image,
    .bottom-banner-text,
    .bottom-banner-contact{
        width: 100%;
    }
    .bottom-banner-text{
        text-align: center;
    }
}

@media (max-width: 576px){
    .hero-title{
        font-size: 26px;
    }
    .hero-subtitle{
        font-size: 17px;
    }
    .icon-item{
        flex: 0 0 45%;
    }
}

/* ---- Section 2 : Table of Contents responsive ---- */
@media (max-width: 991px){
    .toc-title{
        font-size: 34px;
        text-align: center;
    }
    .toc-desc{
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .toc-left{
        padding-right: 15px;
        margin-bottom: 40px;
    }
    .toc-left .orange-divider{
        margin-left: auto;
        margin-right: auto;
    }
    .toc-right{
        padding-left: 0;
    }
    .toc-building-img{
        height: 300px;
    }
    .page-header-inner{
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 576px){
    .toc-title{
        font-size: 26px;
    }
    .toc-num{
        font-size: 22px;
        min-width: 40px;
    }
    .toc-label{
        font-size: 14px;
    }
    .toc-page{
        font-size: 15px;
    }
    .toc-platform-text{
        font-size: 16px;
    }
}

/* ---- Section 3 : Company Overview responsive ---- */
@media (max-width: 991px){
    .overview-banner{
        padding: 35px 25px;
        background-image: linear-gradient(rgba(27,58,107,0.78), rgba(27,58,107,0.78)), url('../images/overview-bg.jpg');
        background-position: center top;
        background-attachment: scroll;
    }
    .overview-title{
        font-size: 30px;
        text-align: center;
    }
    .overview-banner .overview-title .text-navy{
        color: #FFFFFF;
    }
    .overview-banner-text{
        text-align: center;
        margin-bottom: 12px;
    }
    .overview-banner-image-wrap{
        margin-top: 0px;
    }
    .overview-badge{
        position: static;
        width: calc(50% - 12px);
        flex: 0 0 calc(50% - 12px);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        margin: 6px;
        padding: 18px 14px;
    }
    .badge-icon{
        margin-bottom: 8px;
    }
    .overview-image-frame{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    .overview-main-img{
        flex: 0 0 100%;
        margin-bottom: 16px;
    }
    .overview-feature-item{
        display: flex;
        align-items: center;
        text-align: left;
        gap: 16px;
        border: none;
        border-bottom: 1px solid var(--divider-gray);
        padding: 16px 4px;
    }
    .overview-feature-item:last-child{
        border-bottom: none;
    }
    .feature-icon{
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 50%;
        border: 2px solid var(--navy-dark);
        margin: 0;
    }
    .feature-title{
        margin-bottom: 4px;
        text-align: left;
    }
    .feature-desc{
        text-align: left;
    }
    .overview-about{
        border-right: none;
        border-bottom: 1px solid var(--divider-gray);
        padding-right: 0;
        padding-bottom: 30px;
        margin-bottom: 30px;
        text-align: center;
    }
    .overview-about-desc{
        text-align: justify;
    }
    .overview-about .orange-divider.small{
        margin-left: auto;
        margin-right: auto;
    }
    .overview-detail-list{
        align-items: flex-start;
        text-align: left;
    }
    .overview-vision{
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
    .overview-vision-desc{
        text-align: justify;
    }
    .overview-detail-list{
        align-items: flex-start;
    }
    .detail-row{
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 6px;
        width: 100%;
        flex-wrap: wrap;
    }
    .detail-label{
        min-width: 108px;
        flex-shrink: 0;
        font-size: 12.5px;
    }
    .detail-colon{
        display: inline;
    }
    .detail-value{
        text-align: left;
        font-size: 12.5px;
    }
    .misi-row{
        text-align: left;
    }
    .overview-map-graphic{
        display: none;
    }
}

@media (max-width: 576px){
    .overview-title{
        font-size: 24px;
    }
    .overview-desc{
        font-size: 13px;
        color: #FFFFFF;
    }
    .overview-banner{
        padding: 28px 18px;
        background-image: linear-gradient(rgba(27,58,107,0.78), rgba(27,58,107,0.78)), url('../images/overview-laptop-truck.png');
        background-size: cover;
        background-position: center top;
        border-radius: 16px;
    }
}

/* ---- Section 4 : Market Challenges responsive ---- */
@media (max-width: 991px){
    .challenges-title{
        font-size: 30px;
        text-align: center;
    }
    .challenges-intro-text{
        text-align: center;
        margin-bottom: 30px;
    }
    .challenges-desc{
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        /* text-align: justify; */
    }
    .challenges-impact-row{
        flex-wrap: wrap;
    }
    .impact-item{
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        text-align: left;
        gap: 16px;
        border-right: none;
        border-bottom: 1px solid var(--divider-gray);
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .impact-item:last-child{
        border-bottom: none;
    }
    .impact-icon{
        width: 56px;
        height: 56px;
        min-width: 56px;
        margin: 0;
    }
    .impact-text{
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    .impact-title{
        text-align: left;
        margin-bottom: 4px;
    }
    .impact-desc{
        text-align: left;
    }
    .challenges-solution-box{
        flex-direction: column;
        text-align: center;
    }
    .solution-icon-wrap{
        width: 160px;
        min-width: 160px;
        height: 160px;
        margin-bottom: 16px;
    }
    .solution-text{
        width: 100%;
    }
    .solution-title{
        font-size: 25px;
        margin-top: 20px;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .solution-desc{
        font-size: 15px;
        margin-left: 0px;
    }
    .solution-arrow{
        margin-top: 12px;
    }
}

@media (max-width: 576px){
    .challenges-title{
        font-size: 24px;
    }
    .stat-number{
        font-size: 26px;
        min-width: 60px;
    }
}

/* ---- Section 5 : The Andowa Ecosystem responsive ---- */
@media (max-width: 991px){
    .ecosystem-grid{
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
    .ecosystem-col-center{
        margin-left: 0;
    }
    .ecosystem-center{
        margin-top: 0;
        padding: 0;
    }
    .ecosystem-center .ecosystem-arrow,
    .ecosystem-center .ecosystem-vas-label{
        display: none;
    }
    .ecosystem-arrow-mobile{
        display: block;
    }
    .ecosystem-col-products .ecosystem-item::after,
    .ecosystem-col-products .ecosystem-item::before,
    .ecosystem-col-services .ecosystem-item::after,
    .ecosystem-col-services .ecosystem-item::before{
        display: none;
    }
    .ecosystem-col-services{
        align-items: stretch;
    }
    .ecosystem-col-services .ecosystem-tag{
        align-self: flex-end;
    }
    .ecosystem-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
    }
    .ecosystem-item.item-right{
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .ecosystem-item.item-right .ecosystem-text{
        text-align: left !important;
    }
    .tag-products{
        border-radius: 0 20px 20px 0;
    }
    .tag-services{
        border-radius: 20px 0 0 20px;
    }
    .ecosystem-orbit{
        width: 200px;
        height: 200px;
        margin-top: 24px;
    }
    .ecosystem-core{
        width: 130px;
        height: 130px;
    }
    .orbit-label{
        font-size: 11px;
        padding: 6px 18px;
        letter-spacing: 2px;
        writing-mode: horizontal-tb;
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .orbit-label-left{
        top: -16px;
        left: 50%;
        right: auto;
    }
    .orbit-label-right{
        bottom: -16px;
        top: auto;
        left: 50%;
        right: auto;
    }
    .value-added-box{
        padding: 30px 15px 10px;
    }
    .connected-banner{
        padding: 35px 20px;
    }
    .connected-title{
        font-size: 24px;
    }
    .connected-description{
        font-size: 14px;
    }
    .market-title{
        font-size: 28px;
    }
    .ecosystem-feature-item{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        align-items: center;
        text-align: left;
        gap: 16px;
        border: 1px solid var(--divider-gray);
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 0px;
    }
    .ecosystem-feature-icon{
        width: 60px;
        height: 60px;
        min-width: 60px;
        margin: 0;
    }
    .ecosystem-feature-icon img{
        width: 30px;
    }
    .ecosystem-feature-text{
        display: flex;
        flex-direction: column;
    }
    .ecosystem-feature-item h6{
        text-align: left;
        margin-bottom: 4px;
    }
    .ecosystem-feature-item p{
        text-align: left;
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 576px){
    .market-title{
        font-size: 24px;
    }
    .vas-item{
        padding: 0 10px 20px;
    }
}

/* ---- Section 6 : Digital Enterprise responsive ---- */
@media (max-width: 991px){
    .br-desktop{
        display: none;
    }
    .page-header-image-wrap{
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .de-title-bar{
        flex-direction: column;
        padding: 20px 20px 0 20px;
    }
    .de-title{
        font-size: 28px;
        text-align: center;
        padding-left: 0;
        white-space: normal;
    }
    .de-title-line{
        display: none;
    }
    .de-left-col{
        text-align: center;
        margin-bottom: 40px;
    }
    .de-desc{
        max-width: 100%;
        padding-left: 0;
    }
    .de-feature-list{
        padding-left: 0;
        max-width: 320px;
        margin: 0 auto;
    }
    .de-feature-row{
        text-align: left;
        justify-content: center;
    }
    .de-phone-wrap{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        aspect-ratio: unset;
        max-width: 100%;
        margin-top: 60px;
        margin-bottom: 0px;
    }
    .de-top-row{
        margin-bottom: 0;
    }
    .de-solutions-section{
        margin-top: 0;
    }
    .de-phone-img{
        display: none;
    }
    .de-badge{
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        width: calc(50% - 6px);
        max-width: calc(50% - 6px);
        margin-bottom: 0;
        padding: 16px 10px;
    }
    .de-badge-icon{
        width: 50px;
        height: 50px;
        min-width: 50px;
    }
    .de-badge-icon img{
        width: 50px;
        height: 50px;
    }
    .de-badge span{
        text-align: center;
    }
    .de-solutions-heading-row{
        flex-direction: column;
        gap: 10px;
    }
    .de-heading-line{
        width: 100%;
    }
    .de-solutions-heading{
        white-space: normal;
        font-size: 15px;
        text-align: center;
        line-height: 1.4;
    }
    .de-solutions-row .de-solution-card{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        margin-bottom: 12px;
    }
    .de-solution-icon{
        margin: 0;
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .de-solution-text{
        display: flex;
        flex-direction: column;
    }
    .de-solution-title{
        text-align: left;
        margin-bottom: 4px;
    }
    .de-solution-desc{
        text-align: left;
    }
    .de-bottom-banner .row{
        text-align: center;
    }
    .de-bottom-icons-wrap{
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: 20px 8px;
    }
}

@media (max-width: 576px){
    .de-title{
        font-size: 24px;
    }
    .de-solutions-heading{
        font-size: 15px;
    }
}

/* ---- Section 7 : IT Infrastructure Management responsive ---- */
@media (max-width: 991px){
    .it-infra-title{
        font-size: 26px;
        text-align: center;
    }
    .it-infra-left{
        text-align: center;
        margin-bottom: 40px;
    }
    .it-infra-note-list,
    .it-infra-role-box{
        text-align: left;
    }
    .it-infra-right{
        margin-top: 10px;
    }
    .it-flow-icons-row{
        justify-content: center;
    }
    .it-flow-manage-icons{
        flex-wrap: wrap;
    }
    .manage-icon-item{
        flex: 0 0 33%;
        margin-bottom: 16px;
    }
    .it-services-row{
        flex-wrap: wrap;
    }
    .it-service-card{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        margin: 0 4px 12px 4px;
        padding: 16px;
    }
    .it-service-icon{
        margin: 0;
        width: 50px;
        height: 50px;
        min-width: 50px;
    }
    .it-service-icon img,
    .it-service-icon i{
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    .it-service-text{
        flex: 1;
    }
    .it-service-title{
        text-align: left;
    }
    .it-service-desc{
        text-align: left;
    }
    .it-partners-row{
        justify-content: center;
    }
}

@media (max-width: 576px){
    .it-infra-title{
        font-size: 22px;
    }
    .manage-icon-item{
        flex: 0 0 50%;
    }
    .it-benefit-item{
        width: 100%;
    }
}

/* ---- Section 8 : Why Choose Andowa responsive ---- */
@media (max-width: 991px){
    .section-why-choose{
        margin-top: 40px;
    }
    .wc-cards-row .wc-card{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 16px;
        padding: 20px;
    }
    .wc-card-icon{
        margin: 0;
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
    .wc-card-icon i,
    .wc-card-icon img{
        font-size: 26px;
        width: 32px;
        height: 32px;
    }
    .wc-card-text{
        flex: 1;
    }
    .wc-card-title{
        text-align: left;
    }
    .wc-card-title-divider{
        margin: 0 0 10px 0;
    }
    .wc-card-desc{
        text-align: left;
        max-width: 100%;
    }
    .wc-title{
        font-size: 28px;
    }
    .wc-card-offset{
        max-width: 100%;
    }
    .wc-bottom-img{
        min-height: 220px;
    }
    .wc-numbers-box{
        margin-top: 24px;
    }
}

@media (max-width: 576px){
    .wc-title{
        font-size: 24px;
    }
    .wc-number-text{
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ---- Section 9 : Service Portfolio responsive ---- */
@media (max-width: 991px){
    .section-portfolio{
        margin-top: 40px;
    }
    .portfolio-title{
        font-size: 26px;
    }
    .portfolio-card-body{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .portfolio-card-icon img{
        max-width: 100px;
        max-height: 100px;
    }
    .portfolio-tags-row{
        flex-direction: column;
        gap: 14px;
    }
    .portfolio-tag-item{
        flex-direction: row;
        text-align: left;
    }
    .portfolio-beyond-row{
        flex-wrap: wrap;
    }
    .beyond-item{
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        border-right: none;
        border-bottom: 1px solid var(--divider-gray);
        padding: 16px 0;
        margin-bottom: 0;
    }
    .beyond-item:last-child{
        border-bottom: none;
    }
    .beyond-icon-img{
        width: 70px;
        height: 70px;
        max-width: 70px;
        margin-bottom: 0;
    }
    .beyond-text{
        flex: 1;
    }
    .beyond-title{
        text-align: left;
        min-height: auto;
    }
    .beyond-desc{
        text-align: left;
    }
}

@media (max-width: 576px){
    .portfolio-title{
        font-size: 20px;
    }
}

/* ---- Section 10 : Industries We Serve responsive ---- */
@media (max-width: 991px){
    .section-industries{
        margin-top: 40px;
    }
    .industries-title{
        font-size: 28px;
        text-align: center;
    }
    .industries-intro-text{
        text-align: center;
        margin-bottom: 30px;
    }
    .industries-desc{
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .industries-cards-row .industries-card{
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 576px){
    .industries-title{
        font-size: 24px;
    }
    .industries-card-img-wrap img{
        height: 300px;
    }
    .industries-cards-row{
        gap: 20px;
    }
    .industries-cards-row .industries-card{
        flex: 1 1 100%;
        max-width: 100%;
    }
    .industries-card-title{
        font-size: 17px;
        margin: 8px 16px 8px 16px;
    }
    .industries-card-desc{
        font-size: 13px;
        padding: 0 16px;
    }
}

/* ---- Section 11 : Trusted by Our Clients responsive ---- */
@media (max-width: 991px){
    .section-clients{
        margin-top: 40px;
    }
    .clients-title{
        font-size: 26px;
    }
    .clients-subheading{
        font-size: 19px;
    }
    .clients-logo-row .client-logo-card{
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

@media (min-width: 768px){
    .clients-testimonial-row .testimonial-card{
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 576px){
    .clients-title{
        font-size: 22px;
    }
    .testimonial-text{
        min-height: auto;
    }
    .clients-logo-row{
        gap: 16px;
    }
    .clients-logo-row .client-logo-card{
        flex: 1 1 100%;
        max-width: 100%;
    }
    .clients-testimonial-row .testimonial-card{
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ---- Section 12 : Let's Grow Together (Closing) responsive ---- */
@media (max-width: 991px){
    .closing-title{
        font-size: 34px;
    }
    .section-closing{
        min-height: 700px;
    }
    .closing-shape-navy,
    .closing-shape-orange,
    .closing-skyline-wrap{
        width: 70%;
    }
}

@media (max-width: 576px){
    .closing-title{
        font-size: 26px;
    }
    .closing-desc br{
        display: none;
    }
    .closing-contact-item{
        flex-direction: column;
        text-align: center;
    }
    .closing-contact-text{
        text-align: center;
    }
    .closing-shape-navy,
    .closing-shape-orange{
        width: 90%;
    }
    .closing-shape-navy{
        height: 320px;
    }
    .closing-shape-orange{
        height: 220px;
    }
    .closing-skyline-wrap{
        width: 60%;
        height: 300px;
    }
    .closing-skyline-img{
        height: 300px;
    }
}

/* ---- Navbar responsive ---- */
@media (max-width: 991px){
    .andowa-navbar-nav{
        align-items: flex-start;
        padding-top: 14px;
        gap: 4px;
    }
    .andowa-navbar-nav .nav-link{
        width: 100%;
        padding: 10px 14px;
    }
    .andowa-navbar-cta{
        margin-left: 0;
        margin-top: 6px;
        display: inline-block;
        width: fit-content;
    }
    body{
        padding-top: 70px;
    }
    section[id]{
        scroll-margin-top: 70px;
    }
}