.top-section-text {
  height: 112px;

}

.text-24 {
  font-size: 24px;
  font-weight: 300;
}
.text-32 {
  font-size: 32px;
  font-weight: 300;
}
@media (max-width: 992px) {
  .text-32 {
    font-size: 26px!important;
    font-weight: 300;
  }
}

@media (max-width: 992px) {
  .gallery {
    --s: 110px!important; /* control the size */

  }
}

@media (max-width: 576px) {
  .header-logo{
    width: 380px;
  }
    .header{
    height: 420px;
  }
}
@media (max-width: 400px) {
  .header{
    height: 330px;
  }
  .header-logo{
    width: 280px;
  }
}
.main-cards{
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 50%, rgba(255,255,255,1) 100%);
}
.main-cards div p{
  color: #17385a;
}
.gallery {
  --s: 150px; /* co|trol the size */
  display: grid;
  grid: auto-flow var(--s) / repeat(2,var(--s));
  gap: 10px;
  place-items: center;
  overflow: hidden;
  transform: rotate(45deg);
}
.gallery > img {
  width: 143%; /* sqrt(2)*100% */
  aspect-ratio: 1;
  transform: scale(var(--_t,1)) rotate(-45deg);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);

  transition: .2s linear;
}
/* .gallery > img:hover {
  filter: grayscale(0);
  --_t: 1.15;
} */

.banner-title h1{
  color: #17385a;
  font-size: 3.1rem!important;
  font-weight: bold!important;
  line-height: 1.5;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

rd-title {
  font-family: "Open Sans", sans-serif;
  color: #324b4f;
  font-size: 34px;
  font-weight: normal;
}

.button {
  margin: 12px auto;
  color: #fff !important;
  font-size: 17px;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 0 20px;
  background: #1aa6aa;
}
.button:hover {
  color: #ffffff !important;
  background: #137b7e;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.card-main {
  animation: 1s ease-out 0s 1 slideInFromBottom;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-container {
  text-align: center;
  padding: 10px 0;
  min-height: 380px;
  transition: all 0.3s ease-in-out;
}

/**---------------------------------------------------*/

@keyframes text1 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }
  5%,
  10% {
    width: 100%;
  }
}
@keyframes text2 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }

  21%,
  27% {
    width: 100%;
  }
}
@keyframes text3 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }
  37%,
  44% {
    width: 100%;
  }
}
@keyframes text4 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }
  54%,
  61% {
    width: 100%;
  }
}
@keyframes text5 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }

  70%,
  78% {
    width: 100%;
  }
}
@keyframes text6 {
  0%,
  16%,
  32%,
  49%,
  66%,
  83%,
  100% {
    width: 0;
  }
  88%,
  95% {
    width: 100%;
  }
}

.text_1 {
  animation: text1;
}
.text_2 {
  animation: text2;
}
.text_3 {
  animation: text3;
}
.text_4 {
  animation: text4;
}
.text_5 {
  animation: text5;
}
.text_6 {
  animation: text6;
}
.text_1,
.text_2,
.text_3,
.text_4,
.text_5,
.text_6 {
  overflow: hidden;
  font-size: 19px;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after,
.text_2::after,
.text_3::after,
.text_4::after,
.text_5::after,
.text_6::after {
  content: "|";
  position: absolute;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(1, end);
}
@keyframes caret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.typer {
  max-width: 930px;
  opacity: 85%;
}
.products-section {
  background-color: #f0f0f0;
  min-height: 800px;
}
.products-section ul {
  padding: 0;
}
.products-section li {
  list-style: none;
}
.products-button {
  margin: 12px auto;
  color: #fff !important;
  border-radius: 16px 16px 0 0;
  font-size: 17px;
  text-decoration: none;
  padding: 10px 15px;
  background: #1aa6aa;
}
.products-buttons {
  height: 45.5px;
}
.products-button:hover,
.view-more-button:hover {
  color: #ffffff !important;
  cursor: pointer;
  background: #137b7e;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.products-button-active {
  color: #ffffff !important;
  background: #137b7e;
}
.hide {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.3);
  height: 0px;
}
.show {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.products-container {
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: visibility 0s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out;
}
.view-more-button {
  margin-top: auto;
  border-radius: 0 16px;
  width: fit-content;
  color: #fff !important;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 15px;
  background: #1aa6aa;
}
.products-container div div h3 {
  color: #17385a;
}
@media (min-width: 400px) {
 .products-container div div ul li {
 font-size: 18px;
} 
}

.play-video {
  height: 118px;
  background-color: #83cafc;
  font-size: 21px;
}
.play-btn {
  background-color: #0881c7;
  color: #ffffff;
  text-decoration: none;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  border-top-color: #0881c7;
  border-top-width: 1px;
  border-top-style: solid;
  border-right-color: #0881c7;
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-color: #0881c7;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-color: #0881c7;
  border-left-width: 1px;
  border-left-style: solid;
}
.play-btn:hover {
  color: #ffffff !important;
  cursor: pointer;
  background: #1099e8;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.about-section {
  position: relative;
  background-attachment: fixed;
  background-image: url(../../Assets/images/waterbg.jpg);
  background-size: cover;
}
.bg-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-in-out;
}
.about-section:hover .bg-shade {
  background-color: rgba(23, 56, 90, 0.5);
}
.center-content {
  background-color: rgb(26 166 170 / 90%);
  color: #fff;
  font-size: 16px;
}
.center-content p {
  line-height: 27.7px;
  letter-spacing: 0.9px;
}
.flags a {
  color: white;
  text-decoration: none;
}
.bottom-section h3 {
  padding-bottom: 10px;
  color: #00699a;
  font-weight: 400;
  font-size: 23px;
}
.bottom-section p {
  color: #1f1f1f;
  line-height: 27.75px;
  font-weight: normal;
  font-size: 15px;
}
.bottom-section {
  background-color: #f0f0f0;
}