@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat-VariableFont_wght.woff2") format("woff2"),
  url("../font/Montserrat-VariableFont_wght.woff") format("woff");
}

h1, h2, h3, h4, h5, h6, body, p, a {
  font-family: "Montserrat";
}

html, body {
  overflow-x: hidden;
  overflow-y: visible;
}

h1 {
  font-size: 38px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

p{
    font-size: 15px;
}

.navbar {
    background-color: #000000;
}

#nav-logo {
    width: 150px;
}

#nav-logo-text {
    position: absolute;
    left: 75px;
    top: 50%;
    font-size: 22px;
    transform: translateY(-50%);
    font-weight: 800;
    color: #FEF200;
}

#nav-logo-text:hover {
    color: #CBC200 !important;
}

.hero-banner {
    background-image: url('../img/ridsect-resetjelah-hero-banner-desktop.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 15vw 0;
}

.text-responsive {
    background-color: #990609;
}

.punca-kitaran-container {
    background: #FEF200;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.punca-kitaran {
    background-image: linear-gradient(to bottom, #980206, #a90a0e, #ba1215, #cc191d, #de2025);
    width: 100%;
    height: auto;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    transform: translateY(-25px);
    padding: 0 0 10px 0;
}

.red-text {
    color: #DA291C;
}

.yellow-text {
    color: #FEF200;
}

.navbar-nav .nav-link.active {
    color: #FEF200 !important;
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M6 6L24 24M24 6L6 24'/%3E%3C/svg%3E");
}

#fakta-penting {
    background-color: #000000;
    border-radius: 10px;
}

.gambar-fakta {
    width: 100%;
    max-width: 200px;
    height: auto;
    position: absolute;
    top: -80px;
    right: 20px;
}

.text-kitaran {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gambar-kitaran {
    width: 100%;
    max-width: 750px;
    height: auto;
}

.button-pencegahan {
    padding: 20px 80px !important;
}

.button-beli {
    padding: 10px 50px !important;
    border-radius: 0 !important;
}

.owl-carousel {
    position: relative;
}

.owl-next, .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.owl-next {
    display: flex;
    position: absolute;
    top: 40%;
    left: 101%;
    background: transparent;
}

.owl-prev {
    display: flex;
    position: absolute;
    top: 40%;
    right: 101%;
    background: transparent;
}

span[aria-label="Previous"],
span[aria-label="Next"] {
    font-size: 50px;
}

.owl-carousel .owl-item a:after {
    display: block;
    content: '';
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzAuMDUxIDMwLjA1MSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0ibTE5Ljk4MiAxNC40MzgtNi4yNC00LjUzNmEuNzUyLjc1MiAwIDAgMC0xLjE5NS42MDd2OS4wNjlhLjc1Ljc1IDAgMCAwIDEuMTk1LjYwNmw2LjI0LTQuNTMyYS43NDcuNzQ3IDAgMCAwIDAtMS4yMTR6IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0iTTE1LjAyNi4wMDJDNi43MjYuMDAyIDAgNi43MjggMCAxNS4wMjhjMCA4LjI5NyA2LjcyNiAxNS4wMjEgMTUuMDI2IDE1LjAyMSA4LjI5OCAwIDE1LjAyNS02LjcyNSAxNS4wMjUtMTUuMDIxLjAwMS04LjMtNi43MjctMTUuMDI2LTE1LjAyNS0xNS4wMjZ6bTAgMjcuNTRjLTYuOTEyIDAtMTIuNTE2LTUuNjAxLTEyLjUxNi0xMi41MTQgMC02LjkxIDUuNjA0LTEyLjUxOCAxMi41MTYtMTIuNTE4IDYuOTExIDAgMTIuNTE0IDUuNjA3IDEyLjUxNCAxMi41MTguMDAxIDYuOTEzLTUuNjAzIDEyLjUxNC0xMi41MTQgMTIuNTE0eiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iMSIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9wYXRoPjwvZz48L3N2Zz4=);
    background-size: 110px;
    background-position: center;
    position: absolute;
    width: 110px;
    height: 110px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
    transition: all 0.3s ease;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
    color: #000000;
}

.footer {
    background-image: linear-gradient(to bottom, #990609, #a90d10, #b91317, #ca191f, #db1f26);
    border-bottom: 80px solid #F5ED26; 
    position: relative;
}

.yellow-line {
    background-color: #F5ED26;
}

.product-cta {
    position: relative;
    max-width: 500px;
    top: 80px;
}

.model-cta {
    position: relative;
    max-width: 350px;
    top: 48px; 
}

.banner-cta {
    position: relative;
    top: -50px;
}

@media (min-width: 1599.98px) {
    .hero-banner {
        padding: 18vw 0; 
    } 

    .hero-banner .container-xxl{
        max-width: 100% !important;
    }
}

@media (max-width: 1399.98px) {
    .hero-banner {
        padding: 12vw 0; 
    } 
}

@media (max-width: 1199px) {
    .owl-next {
        display: flex;
        position: absolute;
        top: 40%;
        left: 94%;
        background: transparent;
    }
    .owl-prev{
        display: flex;
        position: absolute;
        top: 40%;
        right: 94%;
        background: transparent;
    }
}

@media (max-width: 991.98px) {
    h2 {
        font-size: 28px;
    }  

    .hero-banner {
        padding: 0;
        background-image: none;
        background-color: #910006;
    }

    .product-cta {
        max-width: 400px;
        top: 84px
    }

    .model-cta {
        position: relative;
        max-width: 300px;
        top: 48px;
    }

    .center-mobile {
        text-align: center;
    }

    .gambar-fakta {
        position: relative;
        transform: none;
        top: 0;
        left: 0;
    }
}

@media (max-width: 991.98px) {
    .punca-kitaran {
       clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); 
    }

    .punca-kitaran-container {
        clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); 
    }
}

@media (max-width: 767.98px) {
    .footer {
        border-bottom: 40px solid #F5ED26;
    }

    .product-cta {
        max-width: 300px;
    }

    .model-cta {
        position: relative;
        max-width: 250px;
        top: 48px;
    }

    .fakta-desc {
        padding: 0 50px 0 0;
    }

    .text-kitaran {
        font-size: 13px;
    }

    .owl-next {
        display: flex;
        position: absolute;
        top: 35%;
        left: 92%;
        background: transparent;
    }
    .owl-prev{
        display: flex;
        position: absolute;
        top: 35%;
        right: 92%;
        background: transparent;
    }
}

@media (max-width: 575.98px) {
    .footer {
        border-bottom: 30px solid #F5ED26;
    }

    .product-cta {
        max-width: 205px;
        top: 55px
    }

    .model-cta {
        position: relative;
        max-width: 150px;
        top: 48px;
    }

    .punca-kitaran {
       clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); 
    }
    
    .punca-kitaran-container {
        clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); 
    }
}