.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(126 125 125 / 50%); /* Semi-transparent white */
  mix-blend-mode: screen; /* Blend mode to create mist effect */
}

.overlay-text {
  position: absolute;
  top: 1rem;
  left: 1rem;

  padding: 1rem;
  color: #ffffff;
}

.overlay-text h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.overlay-text p {
  font-size: 2.5rem;
}

@media (max-width: 767px) {
  .video-wrapper {
    padding-bottom: 75%; /* 4:3 aspect ratio for small screens */
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .video-wrapper {
    padding-bottom: 56.25%; /* 16:9 aspect ratio for medium screens */
  }
}

@media (min-width: 992px) {
  .video-wrapper {
    padding-bottom: 35%;
  }
}


.overlay-text-photo {
  position: absolute;
  bottom: 1rem;
  left: 1rem;

  padding: 1rem;
  color: #ffffff;
}

.overlay-text-photo h1 {
  margin-bottom: 1rem;
}

.overlay-text-photo p {
  font-size: 2rem;
}



.container-value {
	padding: 20px;
	display: flex;
	justify-content: center; /* center the boxes horizontally */
	align-items: center; /* center the boxes vertically */
	flex-wrap: wrap;
}

.value-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #13adb5;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 10px !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.value-box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}


/* Small screens */
@media only screen and (max-width: 600px) {
  .value-box {
    width: 90%;
    height: 345px;
  }
}

/* Medium screens */
@media only screen and (min-width: 600px) and (max-width: 992px) {
  .value-box {
    width: 45%;
    height: 360px;
  }
}

/* Large screens */
@media only screen and (min-width: 992px) {
  .value-box {
    width: 30%;
    height: 350px;
  }
}

.job-openings {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.job-opening {
  width: 100%;
  max-width: 600px;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #13adb5;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  color: #ffffff;
}

.job-opening:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.job-opening h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 23px;
}

.job-details {
  display: flex;
  flex-wrap: wrap;
}

.location, .job-type {
  display: inline-block;
  margin-right: 20px;
  font-size: 17px;
}
  
.box-border {
  border: 1px solid #ccc;
  border-radius: 10px !important;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}


.container-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin: 0 auto;
}

.box-contact {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 5px;
  text-align: center;
  flex-basis: calc(3.33%);
  flex-grow: 1;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid #bfbcbc;
  box-sizing: border-box;
  position: relative;
}

.box-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 12px;
  width: 100%;
  background-color: #00b3a4;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.box-contact h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
}

.box-contact p {
  margin-bottom: 10px;
  line-height: 1.5;
  flex-grow: 1;
}

.box-contact button {
  background-color: #13adb5;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px !important;
  font-size: 16px;
  cursor: pointer;
  margin-top: auto;
}

.box-contact:nth-child(2)::before {
  background-color: #ffc300;
}

.box-contact:last-child::before {
  background-color: #ff8a5b;
}

@media screen and (max-width: 767px) {
  .box-contact {
    flex-basis: 100%;
  }
}

.support-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.support-method {
  flex-basis: 100%;
  max-width: 300px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 10px !important;
}

.support-icon {
  max-width: 100%;
  height: auto;
  margin-bottom: -15%;
}


@media screen and (min-width: 768px) {
  .support-method {
    flex-basis: calc(33.33% - 20px);
  }
}

.partners-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partner {
  margin: 20px;
  width: 300px;
  height: 160px;
  overflow: hidden;
  text-align: center;
flex-direction: column;
}

.partner img {
  max-width: 100%;
  max-height: 100%;
}

.partner-name {
  margin-top: 10px;
  color: #2d2d2d;
    font-weight: bold;
  text-align: center;
}


.event-tag {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  background-color: #dc3545;
  color: #fff;
  font-weight: bold;
  border-radius: 0.25rem !important;
  margin-left: 0.5rem;
  }
  
  
  .event {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .event img {
    width: 400px !important;
    height: auto;
    object-fit: cover;
    margin-right: 20px;
  }
  
  .event-description {
    flex: 1;
  }
  
  .event-description h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  
  .news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
  }
  
  .news-item img {
    width: 400px !important;
    height: auto;
    object-fit: cover;
    margin-right: 20px;
  }
  
  .news-description {
    flex: 1;
  }
  
  .news-description h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  @media (max-width: 768px) {
    .event, .news-item {
    flex-direction: column;
    }
    
    .event img, .news-item img {
    max-width: 100%;
    margin-bottom: 20px;
    margin-right: 0;
    }
    }

    .container_index {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

		}
		
		.text_index {
			flex-basis: 50%;
			padding: 20px;
			box-sizing: border-box;
		}
		
		.image_index {
			flex-basis: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.image_index img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
		
		@media screen and (max-width: 600px) {
			.container_index {
				flex-direction: column;
			}
			
			.text_index {
				flex-basis: 100%;
			}
			
			.image_index {
				flex-basis: 100%;
			}
		}

    .container_index_alt {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    
    .text_index_alt {
      flex-basis: 70%;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .image_index_alt {
      flex-basis: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      border-radius: 20px !important;
      overflow: hidden;
    }
    
    .image_index_alt img {
      max-width: 70%;
      max-height: 70%;
      object-fit: contain;
      width: auto;
      height: auto;
      border-radius: 20px !important;
    }
    
    @media screen and (max-width: 600px) {
      .container_index_alt {
        flex-direction: column;
      }
    
      .text_index_alt {
        flex-basis: 100%;
      }
    
      .image_index_alt {
        display: none;
      }
    }
    
    .header_alt {
      text-align: center;
      padding: 10px;
      color: #13adb5;
    }
    
    .header-text_alt {
      margin: 0;
      border-bottom: 10px solid #13adb5;
      display: inline-block;
      padding-bottom: 5px;
    }
    
    

.grid-container-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 0;
  border-collapse: collapse;
}

.box-index {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 250px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;
  transition: box-shadow 0.3s ease-in-out;
}


.box-index img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.keyword-index {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.box-index:hover .keyword-index {
  opacity: 0;
}

.info-index {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.box-index:hover .info-index {
  opacity: 1;
}

@media screen and (max-width: 992px) {
  .grid-container-index {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media screen and (max-width: 598px) {
  .grid-container-index {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(3, 1fr);
  }
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  background-color: #13adb5 ;
  color: #ffffff;
font-size: 18px;
}

th:first-child, td:first-child {
  width: 30%;
  padding-left: 16px;
}


td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
    font-size: 15px;
}

a:hover {
  text-decoration: underline;
}



.pricing {
  text-align: center;
}

table.my-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}


table.my-table th {
  background-color: #ffffff ;
    text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
  border: 1px solid #ddd;
}

table.my-table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}

table.my-table td[colspan="4"] {
    background-color: #13adb5;
    font-weight: bold;
    color:#ffffff;
    font-size: 18px;
  }

table.my-table td[colspan="3"] {
  background-color: #13adb5;
  font-weight: bold;
  color:#ffffff;
  font-size: 18px;
}

.button {
  display: inline-block;
  background-color: #13adb5;
  color: #fff;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 5px !important;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #13adb573;
  text-decoration:none;
}

.plan-description {
  font-size: 14px;
  color: #666666bd;
  margin-bottom: 0px;
}

.contact p {
  font-size: 14px;
  color: #666;
}

.contact a {
  color: #13adb5;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

table.my-table tr:hover {
  background-color: #e3e3e39e;
}

@media only screen and (max-width: 480px) {
  table.my-table th, table.my-table td {
      font-size: 9px;
      padding: 3px;
  }

  table.my-table th {
      padding: 3px;
      font-size: 7px;
  }

  table.my-table td[colspan="4"], table.my-table td[colspan="3"] {
      padding: 5px;
      font-size: 9px;
  }

  table.my-table h3 {
      font-size: 10px;
  }

  table.my-table p {
      font-size: 7px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 620px) {
  table.my-table th, table.my-table td {
      font-size: 12px;
      padding: 5px;
  }

  table.my-table th {
      padding: 8px;
      font-size: 10px;
  }

  table.my-table td[colspan="4"], table.my-table td[colspan="3"] {
      padding: 8px;
      font-size: 12px;
  }

  table.my-table h3 {
      font-size: 12px;
  }

  table.my-table p {
      font-size: 10px;
  }
}

@media only screen and (min-width: 620px) and (max-width: 768px) {
  table.my-table th, table.my-table td {
      font-size: 16px;
      padding: 10px;
  }

  table.my-table th {
      padding: 15px;
  }

  table.my-table td[colspan="4"], table.my-table td[colspan="3"] {
      padding: 15px;
      font-size: 15px;
  }
}

.hero {
	
	padding: 1px 80px;
	text-align: center;
}

form {
  border: 2px solid #cccccc7a;
  border-radius: 5px !important;
  padding: 10px;
  box-shadow: 0px 0px 5px #cccccc6b;
}

.photo-wrapper2 img {
  width: 50%;
  height: auto;
}

.jumbotron {
  background-color: #13adb5;
}