@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {

    /* Colors */

    --color-primary: hsl(202, 100%, 50%);      
    --color-secondary: hsl(202, 100%, 60%);  
    --color-background: hsl(0, 0%, 100%);   
    --color-background-light: hsl(0, 0%, 100%); 
    --color-text: hsl(0, 0%, 0%);      
    --color-text-light: hsl(0, 0%, 18%);     


    /* Typography */

    --font-family: "Open Sans", sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;

    --line-height-xs: 1.2;
    --line-height-sm: 1.4;
    --line-height-md: 1.5;
    --line-height-lg: 1.6;

    /* Spacing */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shades */

    --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.12);
    --shadow-md: 0 4px 6px hsla(0, 0%, 0%, 0.15);
    --shadow-lg: 0 10px 20px hsla(0, 0%, 0%, 0.2);
}

/* Hamburger Start */

.hamburger {
    display: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
    margin-left: 1rem;
}

/* Hamburger End */

/* Media Screen Start */

@media screen and (max-width: 1200px) {
    .navbar-left {
        margin-left: 8rem;
    }

    .navbar-right {
        margin-right: 8rem;
    }

    .navbar-links a {
        margin-left: 2rem;
        font-size: var(--font-size-md);
    }
}

@media screen and (max-width: 992px) {
    .navbar-left {
        margin-left: 3rem;
    }

    .navbar-right {
        margin-right: 3rem;
    }

    .navbar-links a {
        margin-left: 2rem;
        font-size: var(--font-size-md);
    }

    .navbar-icons a {
        font-size: var(--font-size-lg); 
        margin-left: 1rem;
    }

    .home {
    padding: 4rem 3rem;
  }

  .home-container {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
  }

  .home-text h1 {
    font-size: 2.2rem;
  }

  .home-text p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .home-image img {
    max-width: 340px;
  }
}

@media screen and (max-width: 768px) {
    .navbar-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 8vh;
        left: 0;
        width: 100%;
        height: auto;
        background-color: var(--color-background);
        margin: 0;
        padding: 0; 
        z-index: 1000;
        opacity: 0;
        overflow: hidden;
    }

    .navbar-links.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .navbar-links a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 20px 0;
        margin-left: 0;
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-lg);
        color: var(--color-text);
        text-decoration: none;
        border-bottom: 1px solid #dedede; 
        transition: background-color 0.3s ease-in-out;
    }

    .navbar-links a::after {
        content: none;
    }

    .navbar-links a:first-child {
        border-top: 1px solid #dedede;
    }

    .navbar-links a:not(:last-child) {
        border-bottom: 1px solid #dedede;
    }

    .navbar-links a:last-child {
        border-bottom: 1px solid #dedede;
    }

    .navbar-links a:hover {
        background-color: #f4f4f4;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        font-size: 24px;
    }

    .navbar-icons a {
        font-size: 20px; 
        margin-left: 1rem;
    }

}

@media screen and (max-width: 480px) {
    .navbar-left {
        margin-left: 1rem;
    }

    .navbar-right {
        margin-right: 1rem;
    }

    .home {
    padding: 3rem 1.5rem;
  }

  .home-text h1 {
    font-size: 1.8rem;
  }

  .home-text p {
    font-size: 0.95rem;
  }

  .btn-primary {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
  }

  .home-image img {
    max-width: 280px;
  }
}

/* Media Screen End */