:root {
    --white: #f1f1f1;
    --shadow: 0 0 8px rgb(0 0 0 / 0.3);
    --bg: #1f977c;
    --textcoloer: #157963;
}

body {
    font-size: 1.2rem;
    font-family: 'Work Sans', sans-serif;

}


.home {
    background-color: var(--bg);
    min-height: 23vh;
}

.home img {
    width: 500px;
}

.home h1 {
    font-family: 'Montserrat';
    font-size: 1.8rem;
    font-weight: 600;
    color: #f1f1f1;
    text-transform: capitalize;
}

.home h2 {
    background-color: #ffffff;
    font-family: 'Montserrat';
    font-size: 1.8rem;
    font-weight: 800;
    color: #c0cf1b;
    text-transform: capitalize;
}

.tentang-kami h1,
.fitur-undangan h1 {
    font-family: 'montserrat';
    color: var(--textcoloer);
    font-weight: 600;
}

.tentang-kami p,
.fitur-undangan p {
    font-family: 'montserrat';
    font-weight: 400;
    font-size: 0.9rem;
}

.fitur-undangan img {
    width: 50px;
    margin-bottom: 10px;
}

.tentang-kami img {
    width: 200px;
}

.tentang-kami .kolom1 {
    display: flex;
    justify-content: end;
}

.tentang-kami .kolom2 {
    text-align: start;
}

.tentang-kami .menu {
    font-weight: bold;
    color: var(--textcoloer);
    font-size: 1.2rem;
}

.fitur-undangan h2 {
    font-family: 'montserrat';
    color: var(--textcoloer);
    font-weight: 600;
    font-size: 1.2rem;
}

.service {
    /*    min-height: 100vh;*/
    background-color: #f5f5f5;
}

.service .icon {
    font-size: 40px !important;
    color: var(--textcoloer);
}

.service h1 {
    font-family: 'montserrat';
    color: var(--textcoloer);
    font-weight: 600;
}

.service h2 {
    font-family: 'montserrat';
    color: var(--textcoloer);
    font-weight: 600;
    font-size: 1.7rem;
}

.service p {
    font-family: 'montserrat';
    font-weight: 400;
    font-size: 1rem;
}

.service span {
    font-weight: bold;
    color: var(--textcoloer);
    font-size: 1.2rem;
}

.produk h1 {
    font-family: 'montserrat';
    color: var(--textcoloer);
    font-weight: 800;
}

.produk h3 {
    /* background-color: var(--bg);
    width: 100%; */
    font-size: 2rem;
    font-weight: 400;
    color: var(--textcoloer);
}

.produk h4 {
    font-family: 'Montserrat';
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--textcoloer);
    text-transform: capitalize;
}

.produk a {
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'montserrat';
    font-size: 1rem;
    background-color: var(--bg);
    color: #f1f1f1;
    display: inline-block;
    transition: 0.3s;
}

.produk a:hover {
    background-color: #106351;
    color: #f1f1f1;
    animation: zoom-in 0.3s;
    scale: 110%;
}

.produk .card {
    box-shadow: var(--shadow);
}

.carousel img {
    width: 270px;
}

footer {
    padding: 3rem;
    background-color: #ffffff;
    color: var(--textcoloer);
}

footer a {
    color: var(--textcoloer);
    font-weight: bold;
    text-decoration: none;
}


footer a:hover {
    color: #10a081;
}

footer li {
    list-style: none;
    display: inline;
    margin: 0.5rem;
}

.whatsapp {
    width: 4rem;
    height: 4rem;
    font-size: 4rem;
    position: fixed;
    bottom: 3.5rem;
    left: 2rem;
    cursor: pointer;
    animation: rotating 4s linear infinite;
    transform-origin: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

@keyframes zoom-in {
    0% {
        scale: 100%;
    }

    100% {
        scale: 110%;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 95%;
    }

    .tentang-kami .kolom1 {
        display: flex;
        justify-content: center;
    }

    .tentang-kami img {
        width: 180px;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 93%;
    }

    .home h1 {
        font-size: 1.6rem;
    }

    .tentang-kami .kolom1 {
        display: flex;
        justify-content: center;
    }

    .tentang-kami img {
        width: 180px;
    }
}

@media (max-width: 360px) {
    html {
        font-size: 90%;
    }
}