/* styles.css */

body {
    margin: 0;
    padding: 0;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 20px;
    background-color: #ffffff; 
}

header {
    background-color: #057c34;
    color: #ffffff;
    padding: 0.3% 0;
    position: sticky;
    top: 0;
    z-index: 1000; /* Set a high z-index to ensure the header stays on top of other elements */
}


nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    padding-left: 10px; /* Adjust the value as needed */
}


.logo img {
    max-width: 8%;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin: 0 20px;
}

nav a {
    text-decoration: none;
    color: #ffffff;
}

@media (max-width: 1024px) {
    nav ul li {
        font-size: 0.8rem; /* Reduce font size */
    }
}



.hero {
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    color: #057c34;
    text-align: center;
    padding: 0px 0;
}

.hero-content {
    max-width: 80%;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .hero-content {
        font-size: 2rem; /* Reduce font size */
    }
}

@media (max-width: 768px) {
    .hero-content {
        font-size: 1.5rem; /* Reduce font size */
    }
}



.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2A8000;
    color: #ffffff;
    text-decoration: none;
    border-radius: 10px; /* Add rounded corners to the frame */
}

.portfolio {
    background-color: #ffffff;
    color: #000000;
    padding: 3% 0; /* Adjust padding as needed */
    text-align: justify;
    overflow: hidden;
}


.column {
    flex: 1;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 90%;
}

@media (max-width: 1024px) {
    .column {
        max-width: 100%;
        font-size: 1rem; /* Reduce font size */
        padding: 2vh 1%; /* Adjust padding as needed */
    }
}

@media (max-width: 768px) {
    .column {
        max-width: 100%;
        font-size: 1rem; /* Reduce font size */
        padding: 2vh 0; /* Adjust padding as needed */
    }
    .column img{
      margin-left: 0;
    }
}

.custom-table {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  max-width: 2048px;
  border-collapse: collapse;
  border: none;
  table-layout: fixed;
}

.custom-table td {
  border: none;
  vertical-align: center;
  padding: 10px;
  word-wrap: break-word;
}

.text-column {
  width: 30%;
  text-align: justify;
}

.image-column {
  width: 20%;
}

.image-column img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* Responsive layout for screens smaller than 768px */
@media (max-width: 768px) {
  .custom-table,
  .custom-table tr,
  .custom-table td {
    display: block;
    width: 100%;
  }

  .custom-table td {
    padding: 10px 0;
  }

  .image-column img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}


.st {
    position: relative;
    background-image: url('hero-background.jpg'); /* Replace with your image */
    background-size: cover;
    background-position: center;
    color: #000000;
    text-align: center;
    padding: 3% 3% 0%;
    max-height: 100vh; /* Ensures it stretches to the full viewport */
    height: auto; /* Adapts to content height */
    overflow-y: auto; /* Allows scrolling if content grows */
}

.st-content {
    text-align: justify;
    width: 85%;
    max-width: 2048px; /* Prevents excessive width */
    background-color: rgba(0, 0, 0, 0); /* Background with opacity */
    padding: 2% 2%;
    border-radius: 10px;
    position: relative; /* Changed from absolute to relative */
    margin: 0 auto; /* Center the content horizontally */
    box-sizing: border-box;
    height: auto; /* Adapts to content height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1024px) {
    .st-content {
        width: 95%;
        padding: 2%;
        font-size: 1rem; /* Reduce font size */
    }

    .st {
        padding: 10% 0; /* Adjust vertical padding */
    }
}

.st-content p {
    margin: 0;
}

h1{
    padding: 1% 1%;
    color: #057c34;
    text-align: center;
    margin: 0;
    font-size: 42px;
}


footer {
    background-color: #057c34;
    color: #ffffff;
    text-align: center;
    padding: 2px 0;
    border-top: none;
    border-bottom: none;
  }

@media (max-width: 1024px) {
    h1 {
        font-size: 2rem; /* Reduce font size */
    }
  }
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem; /* Reduce font size */
    }
  }


.anchor-target {
    position: relative;
    top: -75px; /* Adjust the value based on your header height */
    visibility: hidden;
    }

#video-container {
    max-width:1024px; /* Set your desired maximum width */
    width: 100%;
    }

a {
    color: #000000; /* Use your desired color code or name */
    text-decoration: none; /* Remove the default underline */
}