/* Contact Page Custom Style - Seeds Stars Montessori (Orange Theme) */
:root {
    --ms-orange: #ff7a00;
    --ms-orange-hover: #e66a00;
    --ms-orange-light: #fff4eb;
}

/* Hero Banner Layout (Sama dengan Halaman Program) */

/* Pemisah Komponen Grid */
.contact-image-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border: none;
}
.contact-image-card .carousel-inner img {
    height: 480px;
    object-fit: cover;
}

.contact-info-box {
    background: #ffffff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid #f2f2f2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.contact-info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(255, 122, 0, 0.12);
    border-color: var(--ms-orange-light);
}

/* Mengatasi Tembus/Overflow Teks Email & WA di HP */
.contact-info-box a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: inline-block;
    max-width: 100%;
}

/* Desain Ikon Kontak */
.contact-icon-wrapper {
    width: 65px;
    height: 65px;
    background-color: var(--ms-orange-light);
    color: var(--ms-orange);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 22px;
}

/* Tombol Orange Khas SSM */
.btn-contact-orange {
    background-color: var(--ms-orange);
    color: #ffffff;
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    display: inline-block;
}
.btn-contact-orange:hover {
    background-color: var(--ms-orange-hover);
    color: #ffffff;
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);
}

/* =========================================
   RESPONSIVE (MOBILE & TABLET)
========================================= */

/* Untuk layar Tablet ke bawah (max-width: 991px) */
@media (max-width: 991px) {
    .contact-image-card .carousel-inner img {
        height: 350px;
    }
    .contact-info-box {
        padding: 25px;
    }
}

/* Untuk layar HP / Smartphone (max-width: 575px) */
@media (max-width: 575px) {
    .contact-image-card .carousel-inner img {
        height: 250px;
    }
    .contact-info-box {
        padding: 20px;
    }
    /* Buat tombol selebar layar HP agar mudah di-tap */
    .btn-contact-orange,
    .btn-success.rounded-pill,
    .contact-info-box .btn {
        width: 100% !important;
        text-align: center;
        display: block;
        padding: 14px 20px;
    }
}