.card.shadow.border-0.h-100{
    border-radius:20px !important;
    transition:all .35s ease;
    overflow:hidden;
    min-height:220px;
    background:#ffffff;
    box-shadow:0 8px 25px rgba(0,0,0,.08)!important;
}

.card.shadow.border-0.h-100:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.18)!important;
}

.card.shadow.border-0.h-100 .card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.card.shadow.border-0.h-100 h3{
    font-size:42px;
    margin-bottom:15px;
}

.card.shadow.border-0.h-100 h5{
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
}

.card.shadow.border-0.h-100 p{
    color:#475569;
    margin-bottom:0;
}

.card.shadow.border-0.h-100 a{
    text-decoration:none;
    font-weight:600;
}

.card.shadow.border-0.h-100:nth-child(1){
    border-top:5px solid #2563eb!important;
}

.card.shadow.border-0.h-100:nth-child(2){
    border-top:5px solid #059669!important;
}

.card.shadow.border-0.h-100:nth-child(3){
    border-top:5px solid #22c55e!important;
}

.card.shadow.border-0.h-100:nth-child(4){
    border-top:5px solid #3b82f6!important;
}

.card.shadow.border-0.h-100:nth-child(5){
    border-top:5px solid #f59e0b!important;
}

.card.shadow.border-0.h-100:nth-child(6){
    border-top:5px solid #8b5cf6!important;
}

/* PERBESAR ICON KONTAK */
.card.shadow.border-0.h-100 h3 img{
    width:110px !important;
    height:110px !important;
    object-fit:contain;
    margin-bottom:12px;
}

/* JUDUL DALAM KOTAK */
.card.shadow.border-0.h-100 h5{
    font-size:24px !important;
    font-weight:800 !important;
    margin-top:10px;
    margin-bottom:15px;
}

/* ISI DALAM KOTAK */
.card.shadow.border-0.h-100 p,
.card.shadow.border-0.h-100 a{
    font-size:18px !important;
    line-height:1.8 !important;
    font-weight:500;
}

/* TINGGI CARD */
.card.shadow.border-0.h-100{
    min-height:320px !important;
}


/* ===== GOOGLE MAPS MODERN ===== */

.card.border-0.shadow.mb-5{
    border-radius:30px !important;
    overflow:hidden;
    background:linear-gradient(
    135deg,
    #ffffff,
    #f8fafc
    ) !important;

    box-shadow:
    0 20px 50px rgba(15,23,42,.10)!important;
}

.card.border-0.shadow.mb-5 .card-body{
    padding:35px !important;
}

.card.border-0.shadow.mb-5 h2{
    font-size:34px !important;
    font-weight:800 !important;
    color:#0f172a;
    margin-bottom:25px !important;
}

.card.border-0.shadow.mb-5 iframe{
    border:none !important;
    border-radius:25px !important;
    overflow:hidden;
    box-shadow:
    0 15px 35px rgba(37,99,235,.15);
    transition:all .4s ease;
}

.card.border-0.shadow.mb-5 iframe:hover{
    transform:scale(1.01);
}


/* ===== MAP PREMIUM ===== */

.card.border-0.shadow.mb-5 iframe{
    height:700px !important;
    width:100% !important;
    border-radius:30px !important;
    transition:all .5s ease !important;
    transform:scale(1);
}

.card.border-0.shadow.mb-5{
    overflow:hidden;
}

.card.border-0.shadow.mb-5:hover iframe{
    transform:scale(1.05);
}

.card.border-0.shadow.mb-5{
    box-shadow:
    0 30px 80px rgba(37,99,235,.15)!important;
}


/* ===== FORM SARAN LEBIH BESAR ===== */

textarea.form-control{
    min-height:220px !important;
    font-size:18px !important;
    padding:20px !important;
    border-radius:15px !important;
}

input.form-control{
    height:60px !important;
    font-size:17px !important;
    border-radius:15px !important;
}

.card.border-0.shadow .card-body.p-5{
    padding:45px !important;
}


/* ===== HERO HUBUNGI KAMI ===== */

.hero-kontak{
    max-width:1100px;
    margin:0 auto 70px auto;
    padding:50px;
    border-radius:30px;

    background:linear-gradient(
    135deg,
    #0f172a,
    #1e40af,
    #2563eb
    );

    text-align:center;

    box-shadow:
    0 25px 60px rgba(37,99,235,.25);
}

.hero-kontak h1{
    color:#ffffff !important;
    font-size:60px !important;
    font-weight:800 !important;
    margin-bottom:20px !important;
}

.hero-kontak p{
    color:#e2e8f0 !important;
    font-size:20px !important;
    line-height:1.9 !important;
    max-width:900px;
    margin:auto;
}


/* PERBESAR DESKRIPSI HERO KONTAK */

.hero-kontak p{
    font-size:24px !important;
    font-weight:600 !important;
    line-height:2 !important;
    color:#f1f5f9 !important;
    max-width:950px !important;
    margin:auto !important;
}


/* ===== HERO ANIMATION PREMIUM ===== */

.hero-kontak{
    background:linear-gradient(
    -45deg,
    #0f172a,
    #1e40af,
    #2563eb,
    #3b82f6
    );

    background-size:400% 400%;

    animation:
    gradientMove 12s ease infinite,
    fadeHero 1.2s ease;
}

.hero-kontak h1{
    animation:
    slideDown 1s ease;
}

.hero-kontak h1 i{
    animation:
    floating 3s ease-in-out infinite;
}

.hero-kontak p{
    animation:
    fadeUp 1.8s ease;
}

/* ===== KEYFRAMES ===== */

@keyframes gradientMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes floating{
    0%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
    100%{transform:translateY(0);}
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-50px);
    }

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

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }

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

@keyframes fadeHero{
    from{
        opacity:0;
        transform:scale(.95);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}


/* ===== SCROLL REVEAL ===== */

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:all 1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:0;
    transform:translateX(-80px);
    transition:all 1s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

.reveal-right{
    opacity:0;
    transform:translateX(80px);
    transition:all 1s ease;
}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}


/* RESPONSIVE FIX */
@media(max-width:992px){
    .row > [class*="col-lg"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}