body {
    margin: 0;
    padding: 0;
  }

  h1, h2, h3, h4, h5 {
    font-family: 'Raleway'; 
  }

  h1 {
    font-size: 75px;
    margin: 20px 0px;
  }

  h2 {
    font-size: 60px;
    margin: 20px 0px;
  }

  p {
    font-family: 'Roboto'; /* Use Roboto font */
    font-size: 16px;
    margin: 20px 0px;
  }


.text {
    flex: 1; /* Take up remaining space */
}

.image img {
    width: 100%; /* Default width for smaller screens */
    height: auto; /* Maintain aspect ratio */
}

.above-fold {
    background-color: #363636;
    color: white;
    padding: 75px 120px; /* Adjust padding as needed */
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.content {
  display: flex;
  align-items: center; /* Align items vertically */
  gap: 50px;
}

.hero-image>img {
  width:40vw;
  max-width: 600px;
  height: 100%;
  border-radius: 30px;
}

.features {
    background-color: #F7F7F7;
    padding: 75px; /* Adjust padding as needed */
    box-sizing: border-box;
    width: 100%;
    
}

.features h2 {
    text-align: center;
}

.features-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items horizontally */
}

.feature {
    width: calc(33.33% - 20px); /* Adjust width for three columns with spacing */
    padding: 20px;
    margin: 10px; /* Add some margin between features */
    background-color: white; /* Add a white background to each feature */
    border-radius: 20px;
    box-sizing: border-box;
}

.join {
    background-color: #387FF8;
    color: white;
    padding: 75px; /* Adjust padding as needed */
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* BUTTONS */
.blue-button {
    font-family: 'Roboto'; 
    background-color: #387ff8;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none; /* Remove default underline on hover */
    margin: 20px 0px;
    padding: 15px 25px;
    display: inline-block; /* Ensure button behaves as a block element */
  }

.blue-button:hover {
    background-color: #2e6fd9; /* darker shade on hover */
  }

.off-white-button {
    font-family: 'Roboto'; 
    background-color: #F7F7F7;
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none; /* Remove default underline on hover */
    margin: 20px 10px 20px 0px;
    padding: 15px 25px;
    display: inline-block; /* Ensure button behaves as a block element */
  }

.off-white-button:hover {
    background-color: #e0e0e0; /* darker shade on hover */
  }
  
.obsidian-space-button {
    font-family: 'Roboto'; /* Use Roboto font */
    background-color: #363636; /* Background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding */
    border: none; /* Remove border */
    border-radius: 5px; /* Border radius */
    cursor: pointer; /* Cursor style */
    font-size: 16px; /* Font size */
    text-decoration: none; /* Remove default underline */
    margin: 20px 0px; /* Margin */
    padding: 15px 25px;
    display: inline-block; /* Ensure button behaves as a block element */
  }

.obsidian-space-button:hover {
    background-color: #2e2e2e; /* Darker shade on hover */
  }

@media (max-width: 768px) {
    .join {
        padding: 20px;
    }
    
    .features {
        padding: 20px;
    }
    
    .feature {
      width: calc(100% - 20px); /* Full width on smaller screens */
  }
  
  .content {
      flex-direction: column; /* Stack items vertically on smaller screens */
      text-align: center; /* Center text content */
  }

  .image img {
          width: 40%; /* 50% width on screens wider than 768px */
      }
  }

@media (min-width: 1024px) {
  .text {
      width: 50%; /* Set width to 50% on screens wider than 1024px */
  }

  .image {
      width: 50%; /* Set width to 50% on screens wider than 1024px */
      margin-left: 40px; /* Adjust margin for better spacing */
  }
}

@media (min-width: 1200px) {
  .image img {
      width: 25%; /* 25% width on screens wider than 1200px */
  }
}