* {
    margin: 0px;
    font-family: "Poppins",sans-serif;
    color: #414141;
}

.grey-text{
    color: #414141;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

body{
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main{
    width: 1250px;
    /* background-color: orange; */
}

.text-white{
    color: white;
}

.hola-yellow-text{
    color: #F6C700;
}

.hola-red-text{
    color: #810000;
}

.hola-blue{
    background-color: #0E90A9;
}

.hola-red{
    background-color: #810000;
}

.hola-yellow{
    background-color: #F6C700;
}

.hola-green{
    background-color: #81AF0F;
}


.nav-logo{
    /* width: 200px; */
    height: 60px;
}

.navbar{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100px; */
    padding: 1rem;
    width: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.nav-field{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1250px;
    /* background-color: #81AF0F; */
}

.text-welcome{
    font-size: 44px;
    line-height: 1;
}

.about-desc{
    text-align: justify;
}

.nav-field{
    display: flex;
}

.nav-field ul{
    font-size: 20px;
    font-weight: 500;
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    width: 400px;
    /* background-color: rebeccapurple; */
}

.nav-field ul li{
    color: #810000;
}

.about{
    /* background-color: gray; */
    margin: 2rem 0rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* width: 100%; */
}

.left-about{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 600px;
    /* background-color: #0E90A9; */
    height: 290px;
}

.left-about-image{
    height: 25rem;
}

.button-selengkapnya{
    /* padding: 1rem; */
    padding: 10px;
    height: 40px;
    width: 150px;
    border-radius: 20px;
    border: none;
}

.head-activity-container{
    /* background-color: #0E90A9; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.head-activity-container p{
    margin: 0px;
}
.head-activity-container h1{
    margin: 0px;
}

.activity{
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 380px;
}

.activity-title{
    font-size: 20px;
    width: 200px;
    font-weight: 600;
    text-align: center;
}

.field-activity-container{
    display: flex;
    justify-content: space-between;
}

.card-activity{
    /* width: 5rem; */
    padding: 1rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.image-activity{
    height: 170px;
    margin-bottom: 1rem;
}

.head-product-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-product{
    width: 8rem;
}

.field-product-container{
    display: flex;
    justify-content: space-evenly;
    align-items: top;
}

.product{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background-color: cyan; */
    margin-top: 20px;
    width: 1250px;
    height: 360px;
}

.product p{
    text-align: center;
}

.product-title{
    font-size: 20px;
    font-weight: 600;
}

.card-product{
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    /* background-color: #0E90A9; */
    width: 200px;
}

.comment{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comment-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.head-comment{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.field-comment{
    display: flex;
    /* background-color: #0E90A9; */
    gap: 2rem;
}

.image_reviewer{
    width: 500px;
}

.card-comment{
    display: flex;
    gap: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 20px;
    background-color: white;
    padding: 1.5rem;
    margin-right: 2rem;
}

.reviewer-name{
    font-size: 20px;
    font-weight: 500;
}

.avatar-comment{
    height: 80px;
}

.rate{
    height: 20px;
}

.contact{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-head-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-field-container{
    display: flex;
    background-color: #810000;
    border-radius: 20px;
    padding: 2rem;
}

.embed-maps{
    border-radius: 15px;
}

.contact-access-container{
    /* background-color: white; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: auto;
    margin-right: auto;
    
}

.card-contact{
    background-color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem;
    border-radius: 20px;
}

.contact-logo{
    height: 60px;
}

.contact-name{
    font-size: 20px;
    font-weight: 600;
}

footer{
    margin-top: 20px;
    background-color: #810000;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-contact{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact a{
    text-decoration: none;
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-contact a p{
    color: white;
}

.footer-logo{
    height: 200px;
}

.footer-field-container{
    margin: 20px 0px;
    justify-content: space-around;
    width: 1250px;
    display: flex;
    align-items: center;
}

.horizontal-line{
    background-color: white;
    width: 100%;
    height: 2px;
}

.copyright{
    margin: 20px 0px;
    color: white;
}

.footer-contact-logo{
    height: 50px;
}