/*
Theme Name: IkameWatergear Landingpage
Theme URI: https://ikamewatergear.id/
Author: A2m Ikame
Author URI: https://ikamewatergear.id/
Description: Peralatan Watersport
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ikamewg
*/


/* HERO IMAGE */
.hero-image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-image-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    /* susun anak-anaknya dari atas ke bawah */
    justify-content: flex-start;
    /* letakkan di atas container */
    align-items: center;
    /* tetap center secara horizontal */
}

.hero-image-img {
    width: 100%;
    height: 65svh;
    /* tinggi penuh layar */
    object-fit: cover;
}

.konten-tombol a {
  width: 100%;
  max-width: 320px;
}


/* Mobile (<=768px) */
@media (max-width: 768px) {

    .hero-image-img {
        height: 45svh;
    }

    .modal-body{
        font-size: 11px!important;
    }

}


.invert-white {
    filter: brightness(0) invert(1);
}

.hero-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 200px;
    background: linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

.hero-image-content {
    position: absolute;
    color: #fff;
}


.btn-outline-dark:hover {
    background-color: #5e5e5e;
    color: #fff;
    /* transform: translateY(-2px); */
}

.btn-hover-grey:hover {
    background-color: #818181 !important;
    color: #fff;
}


.text-danger {
    color: #b12a2a !important;
    /* warna merah lebih elegan */
}

.bg-wg {
    background-color: #0a4461 !important;
}

.fadeInUpSmooth {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUpSmooth 1s ease-out forwards;
}

@keyframes fadeInUpSmooth {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

