/* Define the grid */
.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(10, auto); /* Adjust row height as needed */
    grid-column-gap: 10px;
    grid-row-gap: 10px; /* Add gap between rows */
}

/* Reset default browser styles */
body, h1, h2, h3, p, ul, ol {
    margin: 0;
    padding: 0;
}

/* Header styles */
.header-top {
    grid-column: 1 / span 6; /* The header spans all 6 columns */
    grid-row: 1 / span 2;
    background-color: #b5c4b5;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.top-container-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px; 
    flex-wrap: wrap; /* Allow items to wrap */
}

/* Styles for left container top header */
.left-container-hdr {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Styles for middle container top header */
.middle-container-hdr {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styles for right container top header */
.right-container-hdr {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Logo styles */
.logo {
    flex: 1;
    display: flex;
    align-items: center;
}

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

/* Company name styles */
.company-name a {
    font-size: 64px;
    color: teal;
    text-decoration: none;
}

/* member and log in buttons */
.sign-in-buttons button {
    background-color: #79e0ff;
    border-radius: 20px;
    padding: 10px 20px; /* Adjust padding as needed */
    cursor: pointer;
}


.sign-in-buttons:hover {
    color:#131513;

}

.register-button:hover, .login-button:hover {
    background-color: #4dc143;
    color:#000000
}
  
.header-bottom {
    grid-column: 1 / span 6;
    grid-row: 2 / span 1;
    background-color: #b5c4b5;
    text-align: justify;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px; /* Adjust padding */
}

/* Adjust bottom header container to center horizontally */
.bottom-container-hdr {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    flex-grow: 1; /* Allow the container to grow to fill available space */
}


.left-container-menu {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
}

.middle-container-menu {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.right-container-menu {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
}

.create-button-container {
    display: flex;
    border-radius: 10px;
    padding: 10px;
    flex-wrap: wrap; /* Allow items to wrap */
}
      
.create-button {
    display: flex;
    background-color: aquamarine;
    border: underline;
    border-radius: 20px;
    color: rgb(16, 15, 15); /* Button text color */
    font-size: 14px;
    cursor: pointer;
    padding: 10px 20px;
}

.save-button {
    display: flex;
    background-color: aquamarine;
    border: underline;
    border-radius: 20px;
    color: rgb(16, 15, 15);
    cursor: pointer;
    padding: 10px 20px;
    align-items: center;
}

.horizontal-menu {
    grid-column: 1 / span 6; /* The navigation bar spans all 6 columns */
    grid-row: 2 / span 2;
    display: flex;
    background-color: #bfbfbf;
    color: #1f4d1b;
    text-align: center;
    padding: 20px 10;
    justify-content: space-between;
    align-items: center;
}

.horizontal-menu ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute items evenly */
}

.horizontal-menu ul li {
    margin: 0 5px; /* Adjust margin */
    white-space: nowrap;
}

.horizontal-menu ul li a {
    display: flex;
    color: #422c0b;
    text-decoration: none;
    font-size: 18px; /* Adjust font size */
    align-items: center;
}

/* Dropdown menu styles */
.horizontal-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.horizontal-dropdown-menu a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    font-size: 16px; /* Reduce font size */
}

.horizontal-dropdown-menu a:hover {
    background-color: #f1f1f1;
}

.horizontal-dropdown:hover .horizontal-dropdown-menu {
    display: block;
}

/* Adjustments for the dropdown links */
.horizontal-dropdown-link {
    position: relative;
    display: block;
}

.welcome-user {
    display: flex;
    align-items: center;
    padding: 5px;
}

.username, .profile-image {
    margin-right: 0; /* Remove margin to stack vertically */
    margin-bottom: 5px; /* Add margin between elements */
}

.username {
    margin-right: 5px; /* Adjust margin */
    font-size: 14px;
    padding: 5px;
}

.profile-image {
    width: 30px; /* Adjust width */
    height: 30px; /* Adjust height */
    border-radius: 50%;
}

/* Main content styles */
.main-content {
    grid-column: 1 / span 6;
    grid-row: 3 / span 6;
    display: grid;
}

.sidebar {
    display: grid;
    grid-template-columns: 1 / span 1; /* Sidebar occupies one column */
    grid-template-rows: 1 / span 2; /* Sidebar initially takes up one row */
    background-color: #f9f9f9;
}

.vertical-dropdown-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

/* Define styles for the vertical dropdown container */
.vertical-dropdown-container {
    position: relative;
}

/* Styles for the navigation button */
.table-of-contents {
    background-color: transparent;
    border: none;
    color: #069ff8;
    font-size: 18px;
    cursor: pointer;
}

/* Dropdown menu styles */
.vertical-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.vertical-dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.vertical-dropdown-menu a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu */
.vertical-dropdown-container:hover .vertical-dropdown-menu {
    display: block;
}

/* Change color of dropdown button when dropdown content is shown */
.vertical-dropdown-container:hover .table-of-contents {
    color: #4dc143;
}

/* Table of contents button hover styles */
.table-of-contents:hover {
    color: #4dc143;
}

/* Dropdown button */
.table-of-contents {
    background-color: transparent;
    border: none;
    color: #069ff8;
    font-size: 18px;
    cursor: pointer;
}

/* Dropdown container (hidden by default) */
.vertical-dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.vertical-dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.vertical-dropdown-menu a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.table-of-contents:hover .vertical-dropdown-menu {
    display: block;
}

/* Change color of dropdown button when dropdown content is shown */
.table-of-contents:hover .vertical-dropdown-menu {
    color: #4dc143;
}

/* Show the dropdown menu on click */
.table-of-contents:focus-within .vertical-dropdown-menu {
    display: block;
}

.hero {
    display: flex;
    grid-row: 2 / span 2;
    grid-column: 1 / span 6;
    align-items: top;
    align-text: center;
    color: green;

}

.content {
    grid-row: 4 / span 4;
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust column sizes */
    grid-gap: 10px;
    justify-content: center; /* Center boxes */
}

/* Box styles */
/* Adjust box sizes */
.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6 {
    flex: 1;
    background-color: #f9f9f9;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.box-1 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-1 p {
    color: green;
    align-items: center;
}

.box-2 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-2 p {
    margin-top: 10px;
}

.box-3 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-3 p {
    margin-top: 10px;

}

.box-4 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-4 p {
    margin-top: 10px;
}

.box-5 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-5 p {
    margin-top: 10px;
}

.box-6 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.box-6 p {
    margin-top: 10px;
}

.sub-content {
    display: grid;
    grid-row: 8 / span 1;
    grid-column: 1 / span 6;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust column sizes for responsiveness */
    grid-gap: 10px; /* Add gap between grid items */
    justify-items: center; /* Center grid items horizontally */
}

.box.ad-space-1 {
    display: flex;
    background-color: #fafafa;
    text-align: center;
    color: #999;
}

.box.ad-space-1 p {
    align-items: center;
}

.ad-space-2 {
    display: flex;
    background-color: #fafafa;
    text-align: center;
    color: #999;
    flex-basis: 100%; /* Occupy full width */
    margin-top: 10px; /* Add margin to separate from other content */
}

.call-to-action {
    display: flex;
    grid-column: 1 / span 6;
    grid-row: 9 / span 1;
    align-items: center;
}

/* Footer styles */
footer {
    display: flex;
    grid-column: 1 / span 6; /* The footer spans all 6 columns */
    grid-row: 10 / span 1;
    align-items: center;
    background-color: #322923;
    color: #349e45;
    text-align: center;
    padding: 20px 0;
}