/* Website template */

@font-face {
	font-family: 'montserrat';
	src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
	font-family: 'poppins';
	src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

    :root {
      --verdf: #27eb36;
      --negre: #000000;
      --verdc: #FF1673;
      --lletre: #0e8717;
      --lilac: #0e8717;
      --lilaf: #354366;
      --lilaff: #31c13c;
      --blanc: #FFFFFF;
      --navigator: #2e7d32;
      --formatlletre: 'sans-serif';
      --formatlletre1: 'sans-serif';
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      font-family: var(--formatlletre1);
      background-color: var(--blanc);
      padding-top: 60px;
    }

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

    a:hover {
      text-decoration: underline;
      color: var(--lilaf);
    }

    #page {
      width: 100%;
      margin: 0 auto;
    }

    #header {
      background: var(--navigator);
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #header > div {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }

    #navigation {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 20px;
    }

    #navigation li a {
      color: var(--blanc);
      font-family: var(--formatlletre1);
      font-size: 20px;
      font-weight: bold;
      text-transform: uppercase;
      padding: 10px 20px;
      display: block;
      text-align: center;
    }

    .hero {
      background: linear-gradient(to right, #c8e6c9, #a5d6a7);
      text-align: center;
      padding: 1rem;
      width: 100%;
    }

    .container2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      width: 95%;
      margin: 0 auto;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .hero-image {
      max-width: 200px;
      height: auto;
      border-radius: 8px;
    }

    .hero-text {
      max-width: 800px;
      text-align: left;
    }

    .hero-text h1 {
      color: #006644;
      margin-bottom: 1rem;
      font-size: 3rem;
    }


    .hero-text h2 {
      font-size: 2rem;
      color: var(--navigator);
    }

    .container {
      max-width: 1200px;
      width: 95%;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    .mainsection {
      background-color: var(--blanc);
      padding: 2rem 0;
    }

    .mainsection h2 {
      font-size: 32px;
      color: var(--navigator);
      margin-bottom: 1rem;
    }

    .mainsection p {
      color: var(--negre);
      line-height: 1.6;
      margin-bottom: 1rem;
      font-size: 22px;
    }

    .mainsection-list {
      list-style-type: disc;
      padding-left: 2rem;
    }

	.mainsection-list2 {
	  list-style-type: disc;
	  padding-left: 5rem;
	  display: flex;
	  flex-direction: column;
	  gap: 0.1em; /* Reduce spacing between items */
	}

	.mainsection-list2 li {
	  line-height: 1.2;      /* Reduce line height */
	  margin: 0;             /* Remove extra margin */
	  padding: 0;            /* Remove extra padding */
	}

	.mainsection-list2 li p {
	  margin: 0;
	  padding: 0;
	  line-height: 1.2;
	}


    .highlight {
      background-color: #e8f5e9;
      padding: 1rem;
      border-left: 4px solid #4caf50;
      margin: 1.5rem 0;
	  overflow: hidden; /* 👈 Esto evita que el contenedor colapse por el float */
    }

    .mainsection h3 {
      background-color: #e8f5e9;
      padding: 1rem;
      border-left: 4px solid #4caf50;
      margin: 1.5rem 0;
	  overflow: hidden; /* 👈 Esto evita que el contenedor colapse por el float */
      font-size: 28px;
      color: var(--navigator);
      margin-bottom: 1rem;
    }

	.highlight-image {
	  width: 200px;
	  float: right;
	  margin-left: 15px;
	  border-radius: 8px; /* Optional: rounded corners */
	}
	
	
    .footer {
      text-align: center;
      padding: 1rem;
      background-color: var(--navigator);
      color: #fff;
      margin-top: 2rem;
    }

	.reference {
	  display: inline;
	  margin-bottom: 10px;
      font-size: 26px;
 	  color: #003366;
	  text-decoration: none;
	  font-family: var(--formatlletre1);
      color: var(--navigator);
	}

	.referencealter {
	  margin-left: 10px;
      font-size: 26px;
 	  color: #66bb6a; /* Verde claro */
	  font-family: var(--formatlletre1);
      color: var(--verdf);
	}

	.reference-list {
	  list-style-type: disc;
	  padding-left: 1.5em;
	}
	
	/* 👉 Add this to increase space between references */
	.reference-list li {
	  margin-bottom: 1.2em; /* Try 1.5em or more for greater spacing */
	}