:root {
    --primary: #800080;
    --bg: #f5f5dc;
    

}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
}
body {
    font-family: 'Poppins',  sans-serif;
    background-color: var(--bg);
    color: #fff;
    
    
    
    
    

    }

    /* Navbar */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.4rem 7%;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid var(--primary);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        


    }

    .navbar .navbar-logo {
        font-size: 0.5rem;
        font-weight: 700;
        font-style: italic;
        color: var(--primary);
    }

    .navbar .navbar-nav a {
        color: rgba(108, 122, 137);, 1;
        display: inline-block;
        font-size: 1.3rem;
        margin: 0 1rem;


    }

    .navbar .navbar-nav a:hover {
        color: var(--primary);
    }

    .navbar .navbar-nav a::after {
        content: '';
        display: block;
        padding-bottom: 0.5rem;
        border-bottom: 0.1rem solid var(--primary);
        transform: scaleX(0);
        transition: 0.2s linear;

    }

    .navbar .navbar-nav a:hover::after {
        transform: scaleX(0.5);
    }

    .navbar .navbar-extra a {
        color: rgba(108, 122, 137);, 1;
        margin: 0 0.5rem;
    }

    .navbar .navbar-extra a:hover {
        color: var(--primary);
    }

    #hamburger-menu {
        display: none;
    }

    /* Hero Section */
    .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background-image: url('../img/header-bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;

    }



    .hero::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 30%;
        bottom: 0;
        
    }

    .hero .content {
        padding: 1.4rem 7%;
        max-width: 60rem;

    }

    .hero .content h1 {
        font-size: 4em;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(211, 211, 211, 1, 0.5);
        line-height: 1.2;
        font-weight: 800;
    }

    .hero .content p {
        color: #fff;
        font-size: 1.5rem;
        margin-top: 0.5rem;
        line-height: 1.4;
        font-weight: 2500;
        text-shadow: 1px 1px 3px rgba(211, 211, 211, 1, 0.5);
        



    }

    .hero .content .cta {
        margin-top: 1rem;
        display: inline-block;
        padding: 1rem 3rem;
        font-size: 1.4rem;
        color: #fff;
        background-color: var(--primary);
        border-radius: 0.5rem;
        box-shadow: 1px 1px 3px rgba(211, 211, 211, 1, 0.5);
    }


    /* About Section */
    .about {
        padding: 1rem 7% 1.4rem;
    }

    .about h2, .produk h2 {
        text-align: center;
        font-size: 2.6rem;
        margin-bottom: 3rem;
        margin: 0px;

    }

    .first-word {
        color: var(--primary); /* Change the color of the first span */
    }
    
    .second-word {
        color: rgba(108, 122, 137);, 1; /* Change the color of the second span */
    }
    

    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--bg);
        flex-wrap: wrap;
      }
      
      .image {
        position: relative;
        margin: 5px;
        width: 350px;
        height: 350px;
      }
      
      .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color: white;
        font-size: 23px;
        font-weight: bold;
        text-align: center;
        text-shadow: black;
        padding: 10px;
      }

      footer {
        background-color: #d3d3d3;
        position: inherit;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 1rem 0 2rem;
        margin-top: 3rem;
      }
      footer .social{
        padding: 1rem 0;


      }
      footer .social a{
        color: #fff;

      }

      footer .social a:hover, 
      footer .links a:hover {
        color: var(--primary);
      }

      footer .links{
        margin-bottom: 1.4rem;
      }

      footer .links a{
        color: #fff;
        padding: 0.7rem 1rem;
      }

    

      

      
      
    
      
  
      



    


    




      


    /* Media Queries */

    /* Laptop */
    @media (max-width: 1366px) {
        html {
            font-size: 75%;
        }
    }

    /* Tablet */
    @media (max-width: 768px) {
        html {
            font-size: 62.5%;
        }

    

        #hamburger-menu {
            display: inline-block;
        }

        .navbar .navbar-nav {
            position: absolute;
            top: 100%;
            right: -100%;
            background-color: #fff;
            width: 30rem;
            height: 100vh;
            transition: 0.3s;

        }

        .navbar .navbar-nav.active {
            right: 0;
        }

        .navbar .navbar-nav a {
            color: rgba(108, 122, 137);, 1;
            display: block;
            margin: 1.5rem;
            padding: 0.5rem;
            font-size: 2rem;

        }

        .navbar .navbar-nav a:hover::after {
            transform: scaleX(0.2);

        }

        .navbar .navbar-nav a::after {
            transform-origin: 0 0;
    }

    /* Mobile Phone */
    @media (max-width: 450px) {
            font-size: 55%;
        }
    }