:root {
    --primary-color: #5AE98B;
    /* --primary-color: rgb(0,255,0); */
    --secondary-color:rgba(90, 233, 139, .8);
    --highlight-color: #518B66;
    --dark-color: #222222;
    --light-color: white;
    --link-font: 14px;
    --main-background: #white;
    --dark-background: #222222;
    --nav-background: rgba(253,253,253,0.98);
    --secondary-background: #F2F2F2;
  }

  ::selection {
    background: var(--primary-color); /* Background color of the selection */
    color: var(--light-color); /* Color of the text during selection */
  }
  
  /* For Mozilla Firefox */
  ::-moz-selection {
    background: var(--primary-color);
    color: var(--light-color);
  }
 
 /* Basic Reset */
 body, h1, h2, h3, p, ul, li, nav, div, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Styling the body */
  body {
    font-family: "Inter", sans-serif;
    background-color: #ffffff; /* Adjust the background color as needed */
    /* color: white; */
    font-size: 16px; /* Base font size */
  }

  h1 {
    font-weight: 700; /* Bold weight for h1 headers */
    }

    strong {
        font-weight: 700; /* Bold weight for strong tags */
    }

    p {
        font-weight: 400; /* Regular weight for paragraphs */
        margin: 15px 0;
        line-height: 1.6;
        color: #8D8D8D;
        font-size: 16px;
    }

    .medium-text {
        font-weight: 500; /* Medium weight for text you want to stand out a bit */
    }

    img {
        width: 100%;
        height: auto;
        display: block;
        user-select: none;
    }

    a {
        text-decoration: none;
        color: var(--dark-color)
    }

    /*  */

    .selected {
        color: var(--primary-color);
    }

    .highlight {
        color: var(--primary-color);
    }

    /* animations */

    .fade-in-viewport {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease-out, transform 0.6s ease-out;
      visibility: hidden;
    }
    
    .fade-in-visible {
      opacity: 1;
      transform: translateY(0);
      visibility: visible;
    }
    

  /* Main Container */
  .container {
    width: 100%;
    max-width: 1512px; /* This is the maximum width your content will stretch to. Adjust as needed. */
    margin: 0 auto; /* This centers your container in the middle of the viewport. */
    padding: 0 25px; /* This adds some padding on the sides. */
    overflow: hidden;
  }
  
  /* buttons */

  .nav-button {
    display: block;
    background: var(--primary-color);
    border: 0;
    font-weight: 700;
    color: var(--light-color);
    padding: 8px 12px;
    border-radius: 10px;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for transform and background color */
    
    cursor: pointer; /* Change cursor to pointer to indicate button is clickable */
    outline: none; /* Remove outline to keep the design clean */
  }

  .primary-button {
    display: inline-block;
    background: var(--primary-color);
    border: 0;
    font-weight: 700;
    color: var(--light-color);
    padding: 15px 20px;
    border-radius: 2px;
    margin: 2px 0;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for transform and background color */
    cursor: pointer; /* Change cursor to pointer to indicate button is clickable */
    outline: none; /* Remove outline to keep the design clean */
  }

  .primary-button:hover, .nav-button:hover {
    transform: scale(1.05); /* Slightly enlarge the button */
    background-color: var(--secondary-color); /* Shift to a secondary color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for depth */
    cursor: pointer;

  }


  /* sections */
section {
    margin: 100px 0;
}

section:first-child {
    margin: 0;
}
  .section-title {
    padding: 75px 0;
    font-weight: 400;
    font-size: 48px;
    text-align: center;
    text-transform: capitalize;

  }

  .section-para {
    text-align: center;
    max-width: 550px;
    margin: 0 auto;
    font-size: 1.3em;
    margin-bottom: 50px;
  }


  @media (max-width: 800px) {
    .section-title {
        padding: 35px 0;
    }

    .section-para {
      padding: 0 25px;
  }
  }