/*Main components*/
main { 
    display: grid;
    gap: 20px;
    padding: 20px;
}

section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

body {
    background-color: #F7F5F6; 
    font-family: Arvo, Arial, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

/*Nav Bar*/
nav {
    display: flex;
    justify-content: center; /* Center Navigation Areas */
    padding: 10px 0;
    /* font-family: Staatliches, Arial, sans-serif; */
}

nav ul {
    list-style-type: none;
    display: flex;
    gap: 20px; /* Adjust gap between items */
}

nav a {
    text-decoration: none;
    color: #000000;
}

nav .button {
    background-color: #0478cc;
    gap: 0px;
    padding: 10px;
    border-radius: 10px;
}

nav .button h3, nav .button p {
    color: #F7F5F6;
    margin: 0px;
}

/*General Style*/
h1 {
    font-family: Arvo, Arial, sans-serif;
}

div {
    background-color: #fdfdfd47;
}

img {
    align-items: center;
}

a {
    color: #0478cc;
}

/* Hamburger Menu Style */
.hamburger {
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .hamburger {
        display: block; /* Show Hamburger Menu */
    }

    nav ul {
        flex-direction: column;
        display: none; /* Intially hide navigation items */
    }

    nav ul.active {
        display: flex; /* Display Navigation items in a column */
    }
}

/*Logo Section*/
.logo img {
    max-width: 50%;
    max-height: auto;
}

.logo {
    width: 25%;
    max-height: auto;
}

/*Button*/
.button {
    text-align: center;
    background-color: #f7f5f6c0;
    padding: 5px;
    border-radius: 32px;
}

/*Card*/
.card {
    max-width: 400px;
    max-height: auto;
    padding: 20px;
    border-radius: 10px;
}

.card img {
    width: 100%;
    height: auto;
}

/*Section Colors*/
.red {
    background-color: #ffccc3;
}

.blue {
    background-color: #c3ddff;
}

.yellow {
    background-color: #fff5c3;
}

.green {
    background-color: #c6ffc3;
}

.orange {
    background-color: #ffdac3;
}

.purple {
    background-color: #f5c3ff;
}

.color-change {
    background-color: #d1d1d1;
    padding: 20px;
    gap: 20px;
    margin: 20px;
    border-radius: 48px;
}

/*Fonts*/
.arvo-regular {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: normal;
}

.arvo-bold {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: normal;
}

.arvo-regular-italic {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: italic;
}

.arvo-bold-italic {
  font-family: "Arvo", serif;
  font-weight: 700;
  font-style: italic;
}

.lobster-two-regular {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lobster-two-bold {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lobster-two-regular-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lobster-two-bold-italic {
  font-family: "Lobster Two", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.atma-light {
  font-family: "Atma", system-ui;
  font-weight: 300;
  font-style: normal;
}

.atma-regular {
  font-family: "Atma", system-ui;
  font-weight: 400;
  font-style: normal;
}

.atma-medium {
  font-family: "Atma", system-ui;
  font-weight: 500;
  font-style: normal;
}

.atma-semibold {
  font-family: "Atma", system-ui;
  font-weight: 600;
  font-style: normal;
}

.atma-bold {
  font-family: "Atma", system-ui;
  font-weight: 700;
  font-style: normal;
}

.chakra-petch-light {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.chakra-petch-regular {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.chakra-petch-medium {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.chakra-petch-semibold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.chakra-petch-bold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.chakra-petch-light-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.chakra-petch-regular-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.chakra-petch-medium-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.chakra-petch-semibold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.chakra-petch-bold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: italic;
}