styles.css

/* Custom styles if necessary */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .line-clamp-3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, and Opera */
  }

  html, body {
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    scroll-behavior: smooth;
  }

  section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .custom-margin {
  margin-left: 10%;
  margin-right: 10%;
}

.header-container {
    margin-left: 10%;
    margin-right: 10%;
    /* Optional: You can add max-width if you want to limit the width */
    max-width: 1200px;
    background-color: #f5f5f5; /* For visibility */
}

/* Styling the header */
header {
    padding: 80px;
    text-align: center; /* Center the text in the header */
}