style.css

@import url('https://fonts.googleapis.com/css?family=Poppins');

body {
  font-family: 'Poppins';
}
header > div {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid lightgray;
  }
  
  nav {
    width: 600px;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  nav a {
    text-decoration: none;
    color: black;
  }
  
  .blackHeart {
    width: 20px;
    margin-right: 1rem;
  }
  .logo{
    width:25px;
    margin-right: 1rem;
  }
 /* Ensure the container stretches across the full width */
.search-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Aligns the Join/Log in links to the right */
    background-color: rgba(0, 0, 0, 0.05); /* Light background for search bar */
    padding: 10px; /* Padding around the search area */
    max-width: 100%;
  }
  
  /* Flex container for the search input and image */
  .search-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Make the search bar grow to fill available space */
    background-color: rgba(0, 0, 0, 0.05); /* Light background inside input */
    padding: 5px;
    border-radius: 5px; /* Slightly rounded corners for input area */
  }
  
  /* Style for the search image */
  .search-container img.search-img {
    width: 20px;
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add space between the image and input */
  }
  
  /* Style for the input field */
  .search-wrapper input[type="text"] {
    flex: 1; /* Take up remaining space in the wrapper */
    border: none;
    outline: none; 
    background-color: transparent; /* Transparent background since wrapper has color */
    padding: 5px; /* Padding for spacing */
    font-size: 14px;
  }
  
  /* Style for the submit button */
  .search-wrapper input[type="submit"] {
    background-color: #fb3e44; 
    color: white;
    padding: 5px 15px; /* Adjust button padding */
    border: none; 
    border-radius: 3px; /* Rounded corners */
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px; /* Space between the input and the button */
  }
  
  /* Style for the Join and Log in links */
  .search-container a {
    margin-left: 15px; /* Space between the Join and Log in links */
    color: #333; /* Dark text color for the links */
    text-decoration: none; /* Remove underline from the links */
    font-size: 14px;
    border: 15px
  }
  
  .search-container a:hover {
    text-decoration: underline; /* Underline links on hover */
  }
  

  #build{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 600px;
    background-color: rgba(232,217,217,.3);
  }
  #build h1{
    font-size: 3em;
    font-weight: 600;
  margin-bottom: 30px;
  
  }
  #build article{
    font-size: 1.2em;
  margin-bottom: 40px;
  }
.button-container{
    display:flex;
    gap:20px; 
    justify-content: center;
}
.plans,.join{
    padding: 15px 50px;
  border: none;
  text-decoration: none;
  font-size: 1em;
  color: white;
}
  .plans{
    background-color: #FB3B49;
    box-shadow: 8px 8px 0 rgba(251,59,73,.2);
  }
  .join{
    color:black;
    background-color: white;
  }
  #hexagon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 600px;
    background-color: white;

  }
.hexagon-cont{
    width: 150px;
    height: auto;

  }
  #hexagon h2{
    background-color: rgba(255,204,53,.4);    
    transform: skew(9deg, 0deg);
    font-style: italic;
    font-size:2em;
  }
  #hexagon article{
    text-justify: center;
    line-height: 1.6;
    width: 90%; /* Adjust the width to make the text narrower */
    max-width: 700px; /* Optional: set a maximum width */
    text-align: justify; /* Aligns text to both left and right edges */
    line-height: 1.6;
    margin: 0 auto; /* Centers the article within the section */
    padding: 0 15px; 
  }
#Columns {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:stretch;
}
  #Columns .col{
     
    text-align:left;
    width:20%;
    max-width:200px;
    margin:0 auto; 
    padding: 0 15px
  }
#Columns img{
    width: 40px;
    height: auto;
}
#Columns h4{
    color:#ED1C24;
}


.button-org{
    display: block; /* Make the button a block-level element */
    width: fit-content; /* Adjust width based on content */
    padding: 15px 50px;
    border: none;
    text-decoration: none;
    font-size: 1em;
    color: white;
    background-color: black;
    box-shadow: 8px 8px 0 rgba(128, 83, 35, .2);
    margin: 20px auto;
}