/* 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;
  }
  
  body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto 1fr auto; /* Add additional row for header */
    gap: 10px;
    grid-auto-flow: row; /* Ensure content flows vertically */
  }
  
  /* Header styles */
  .header-top {
    grid-column: 1 / span 6; /* The header spans all 6 columns */
    grid-row: 1 / span 1;
    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 */
    flex-grow: 1; /* Allow the container to grow to fill available space */
  }
  
  /* Styles for left container top header */
  .left-container-hdr, .middle-container-hdr, .right-container-hdr {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    align-items: center;
  }
  
  .left-container-hdr {
    justify-content: flex-start;
  }
  
  .middle-container-hdr {
    justify-content: center;
  }
  
  .right-container-hdr {
    justify-content: flex-end;
  }
  
  /* Logo styles */
  .logo {
    flex: 1;
    display: flex;
    align-items: center;
  }
  
  .logo img {
    max-width: 100%;
    height: auto;
  }
  
  /* Company name styles */
  .company-name a {
    font-family: "Blackadder ITC", cursive;
    font-size: 64px;
    color: #05a792;
    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 {
    color: #131513;
  }
  
  .register-button, .login-button {
    background-color: #38c1aa;
    color: #000000;
    cursor: pointer;
  }
  
  /* Header bottom */
  .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: space-between; /* Center horizontally */
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
    flex-wrap: wrap;
    flex-grow: 1; /* Allow the container to grow to fill available space */
  }
  
  .left-container-menu, .middle-container-menu, .right-container-menu {
    flex: 1; /* Distribute remaining space evenly */
    display: flex;
    align-items: center;
    padding: 20px;
  }
  
  .left-container-menu {
    justify-content: flex-start;
  }
  
  .middle-container-menu {
    justify-content: center;
  }
  
  .right-container-menu {
    justify-content: flex-end;
  }
  
  .create-button-container {
    display: flex;
    border-radius: 10px;
    padding: 10px;
    flex-wrap: wrap; /* Allow items to wrap */
  }
  
  .create-button, .save-button {
    background-color: #79e0ff;
    border-radius: 20px;
    color: rgb(16, 15, 15); /* Button text color */
    font-size: 14px;
    cursor: pointer;
    padding: 10px 20px;
  }
  
  .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 10px;
    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;
    text-align: center;
    padding: 20px 10px;
    background-color: #9ac0ba;
    border-radius: 10px;
  }
  
  .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 */
    background-color: #f1f1f1;
  }
  
  .horizontal-dropdown-menu a:hover {
    background-color: #ddd;
  }
  
  .horizontal-dropdown:hover .horizontal-dropdown-menu {
    display: block;
  }
  
  .welcome-user {
    display: flex;
    align-items: center;
    padding: 5px;
  }
  
  .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 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .sidebar {
    grid-column: 1;
    grid-row: 1;
    background-color: #f0f0f0; /* Background color for the sidebar */
    padding: 10px;
}

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

  .vertical-dropdown-container {
    position: relative;
  }
  
  .table-of-contents {
    background-color: transparent;
    border: none;
    color: #069ff8;
    font-size: 18px;
    cursor: pointer;
  }
  
  .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;
  }
  
  .vertical-dropdown-menu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
  .vertical-dropdown-menu a:hover {
    background-color: #ddd;
  }
  
  /* 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;
}

  .main-content {
    grid-column: 1 / span 6;
    grid-row: 3; /* Main content appears in the third row */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust column sizes for responsiveness */
    grid-gap: 10px; /* Add gap between grid items */
  }
  
  .content {
    grid-row: 4 / span 4;
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    justify-content: center; /* Center boxes */
    
  }
  
  .content-container {
    grid-column: 1 / span 6;
    grid-row: 2; /* Place container in the second row */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
  }
  
  /* Box styles */
  .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;
    background-image: url('path_to_your_image.jpg'); /* Replace 'path_to_your_image.jpg' with the actual path to your image */
    background-size: cover; /* Cover the entire element with the background image */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */
  }
  
  .box-1 img, .box-2 img, .box-3 img, .box-4 img, .box-5 img, .box-6 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
  }
  
  .box-1 p, .box-2 p, .box-3 p, .box-4 p, .box-5 p, .box-6 p {
    margin-top: 10px;
  }
  
  .box-1 p {
    color: green;
    align-items: center;
    padding: 10px;
  }
  
  /* Box styles in About Us section */
  .aboutusbox-1, .aboutusbox-2, .aboutusbox-3 {
    display: flex;
    padding: 40px;
    border-radius: 40px;
  }
  
  .aboutusbox-1 img, .aboutusbox-2 img, .aboutusbox-3 img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
  }
  
  .aboutusbox-1 p, .aboutusbox-2 p, .aboutusbox-3 p {
    color: green;
    align-items: center;
    padding: 20px;
  }
  
  /* Hero Section */
.hero {
  grid-column: 1 / span 6;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}

.carousel {
    display: flex;
    flex-direction: row; /* Items in a row */
    overflow: hidden; /* Hide overflowing items */
    position: relative;
    height: 100%;
    width: 100%;
}

.carousel-item {
    min-width: 100%; /* Each item takes full width of the carousel */
    transition: transform 0.5s ease; /* Smooth transition for slide effect */
    position: relative; /* For positioning link inside carousel item */
}

.carousel-item img {
    width: 100%;
    height: auto;
}

.carousel-item a {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
}

/* Add animation for automatic slideshow */
@keyframes slide {
  0% { transform: translateX(0); }
  33.33% { transform: translateX(0); }
  50% { transform: translateX(-100%); }
  83.33% { transform: translateX(-100%); }
  100% { transform: translateX(-200%); }
}

.carousel {
  animation: slide 9s infinite;
}


  /* Bio Pic Section */
.bio-pic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.bio-pic {
  width: 150px; /* Adjust the size as needed */
  height: 150px;
  border-radius: 50%;
  overflow: hidden; /* Ensure the image fits within the circle */
}

.bio-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the entire circle */
}

/* Family Pic Section */
.family-pic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.family-pic {
  width: 100%;
  max-width: 600px; /* Adjust the max width as needed */
  border-radius: 15px; /* Rounded corners */
  overflow: hidden; /* Ensure the image fits within the rounded rectangle */
}

.family-pic img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensure the image covers the entire rounded rectangle */
}

/* Additional styling for the biography section */
.biography-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}

.biography-text {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin: 20px 0;
  padding: 0 20px;
  max-width: 800px; /* Adjust the max width as needed */
}

.content-container-campaign {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.introduction, .brief-biography, .conclusion {
    margin-bottom: 30px;
}

.introduction h1 {
    font-size: 24px;
    color: #333;
}

.introduction p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.brief-biography h2 {
    font-size: 20px;
    color: #333;
}

.brief-biography p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.conclusion h3 {
    font-size: 18px;
    color: #333;
}

.conclusion p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

  /* Media queries for responsiveness */
  @media screen and (max-width: 768px) {
    .main-content {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    }
  }
  
  @media screen and (max-width: 480px) {
    .main-content {
      grid-template-columns: 1fr; /* 1 column for smaller screens */
    }
  }
  
  /* 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;
}

.container {
  width: 50%;
  margin: auto;
}

form {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="submit"] {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}