*,
html,
body{
    padding: 0;
    margin: 0;
    font-family: poppins;
}

/* Marquee START */

/* Marquee END */

/* Navbar START */
nav{
    width: 100%;
    background-color: #f1f3f5;
    z-index: 1;

    position: fixed;
    top: 0;
}

nav .container{
    padding: 20px;
}

nav .container ul{
    display: flex;
    justify-content: space-evenly;

    flex-wrap: wrap;
    align-items: center;
}

nav .container ul li{
    list-style-type: none;
}

    /* Logo Navbar START */
        nav .container ul li .judul{
            text-decoration: none;
        }nav .container ul li .judul img{
            width: 100px;
        }
    /* Logo Navbar END */


        /* Menu START */
            nav .container ul li a{
                color: black;
                padding: 10px;
                text-decoration: none;
            }nav .container ul li a:hover{
                text-decoration: underline;
                text-underline-offset: 25px;
            }
        /* Menu END */
/* Navbar END */



/* Hero START */
.hero{
    width: 100%;
    background-color: #F1F3F5;
}

.hero .container{
    padding-left: 20px; padding-right: 20px;
}

.hero .container ul{
    display: flex;
    justify-content: center;
    background-color: white;


}.hero .container ul .text{
    position: absolute;
}.hero .container ul .text .container{
    padding: 10px;
    margin-top: 30px;
    text-align: center;
}
    /* H2 dan P START*/
        .hero .container ul .text .container h2{
            font-size: 1.5em;
        }.hero .container ul .text .container p{
            font-size: 1.1em;
        }
    /* H2 dan P END*/


.hero .container ul .text .container .pelajari{
    text-decoration: none;
    color: white;
    background-color: black;
    
    border-radius: 4px;
}.hero .container ul .text .container .pelajari:hover{
    opacity: 0.5;
}


.hero .container ul .text .container .buy{
    text-decoration: none;
    color: black;
    background-color: white;

    border: 1px solid black;
    border-radius: 4px;
}

.hero .container ul a{
    width: 100%; 
    text-align: center;
}

.hero .container ul a img{
    border-radius: 10px;
    min-width: 100px;
    max-width: 100%;

    min-height: 300px;
    max-height: 500px;

    object-fit: cover;
}


.hero .container ul{
    background-color: white;
}

.hero .container ul li{
    list-style-type: none;
}

.hero .container ul li .pelajari{
    color: black;
    font-weight: 500;

    text-decoration: underline;


    padding: 5px;
    margin: 10px;
    font-size: 13.5px;

}.hero .container ul li .pelajari:hover{
    color: black;

    text-decoration: underline;
    text-underline-offset: 5px;
}

.hero .container ul li .buy{
    color: black;
    background-color: white;

    text-decoration: none;
    padding: 3px;

    border: 1px solid black;
    border-radius: 4px;
}.hero .container ul li .buy:hover{
    color: white;
    background-color: black;
}
/* Hero END */





/* Contet START */
.content{
    width: 100%;
    background-color: #F1F3F5;
}

.content .container{
    padding: 10px;
}

/* .content .container h2{
    color: black;
    padding: 20px;
    font-size: 1.7em;

    text-align: center;
} */

.content .container .flex{
    display: flex;
    justify-content: center;

    /* flex-wrap: wrap; */
    
    /* justify-content: center; */

}

.content .container .flex ul{
    margin: 10px;
}

.content .container .flex ul a{
    color: black;

    text-decoration: none;
    transition: all ease-out 220ms;
}.content .container .flex ul a:hover{
    background-color: black;
    border-radius: 10px;

    transition: ease-in-out 129ms;
}

.content .container .flex ul a .text{
    background-color: white;
    text-align: center;

    width: 100%;
} 

.content .container .flex ul a .text h3{
    font-size: 1em;
}

.content .container .flex ul a img{
    min-width: 50%;
    max-width: 100%;

    min-height: 100px;
    max-height: 200px;

    object-fit: cover;
}
/* Contet END */


/* Contet-section START */
.content-section{
    width: 100%;
    background-color: #F1F3F5;
}

.content-section .container{
    padding: 10px;
}

.content-section .container h2{
    font-size: 2em;
    text-align: center;
    padding: 20px;
}

.content-section .container ul{
    display: flex;
    justify-content: center;
}

.content-section .container ul li{
    list-style-type: none;
}

.content-section .container ul li .active{
    color: black;

    text-underline-offset: 15px;
    text-decoration: underline;
}

.content-section .container ul li a{
    color: gray;
    font-weight: 500;
    font-size: 1.2em;
    text-decoration: none;

    padding: 10px;
}.content-section .container ul li a:hover{
    color: black;

}

    /* Flex START */
    .content-section .container .flex{
        display: flex;
        justify-content: center;

        flex-wrap: wrap;
        
    }

    .content-section .container .flex ul{
        margin: 20px;

        display: block;
    }



    .content-section .container .flex ul a{
        color: black;
        text-decoration: none;
    }



    .content-section .container .flex ul a img{
        border-radius: 10px;

        min-width: 50%;
        max-width: 100%;

        min-height: 300px;
        max-height: 500px;
        object-fit: cover;
    }

    .content-section .container .flex ul a h2{
        font-size: 1.2em;
        
    }.content-section .container .flex ul a p{
        font-size: 1.1em;
    }


    .content-section .container .flex ul .link a{
        color: white;
        background-color: black;

        border-radius: 6px;
        padding: 10px;
    }.content-section .container .flex ul .link a:hover{
        background-color: rgb(68, 68, 68);
    }
    /* Flex END */

        /* Flex 2 START */
        .content-section .container .flex .flex-dua{
            display: flex;
            justify-content: center;
            
            flex-wrap: wrap;
        }

        .content-section .container .flex .flex-dua ul{
        }

        .content-section .container .flex .flex-dua ul a{
        }

        .content-section .container .flex .flex-dua ul a img{
            min-width: 50%;
            max-width: 100%;

            min-height: 300px;
            max-height: 400px;

            object-fit: cover;
        }

        /* Flex 2 END */
/* Contet-section END */