.intro-top {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.intro-top .left-col {
  width: 40%;
}
.intro-top .left-col .intro-header {
  color: #001c51;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px;
}
.intro-top .left-col .intro-text {
  color: #303030;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin: 12px 0;
}

.intro-top .right-col {
  width: 60%;
}
.intro-top .right-col iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

#blog-bottom {
  margin-bottom: 0;
}

/* ===========================
   Services Wrapper
=========================== */

.services-wrapper {
}

.services-wrapper .services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;

  margin-bottom: 60px;
}

.services-wrapper .services-header h2 {
  color: #001c51;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
}

.services-wrapper .services-header .services-snippet {
  color: #333;
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;

  max-width: 840px;
}
.services-wrapper .services-header .services-snippet p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.services-wrapper .services-header .services-snippet a {
  text-decoration: underline !important;
}

/* ===========================
   Services Container + Items
=========================== */

.services-wrapper .services-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -15px -30px;
}

.services-wrapper .services-container .services-item-wrapper {
  padding: 0 15px 30px;
}
.services-wrapper .services-container .services-item-wrapper.w40 {
  width: 40%;
}
.services-wrapper .services-container .services-item-wrapper.w60 {
  width: 60%;
}

.services-wrapper .services-container .services-item-wrapper .services-item {
  position: relative;
  height: 100%;
  padding: 40px;
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Overlay color classes */
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .overlay.blue {
  background-color: rgba(7, 104, 167, 0.9);
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .overlay.darkblue {
  background-color: rgba(0, 28, 81, 0.9);
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .overlay.dark {
  background-color: rgba(0, 0, 0, 0.5);
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .overlay.black {
  background-color: rgba(0, 0, 0, 0.85);
}

/* Content inside item */
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content {
  position: relative;
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  h3 {
  color: #fff;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 15px;
}

.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  .services-item-snippet {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.8px;
}
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  .services-item-snippet
  p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  .services-item-snippet
  a {
  color: #d4f1fe !important;
  text-decoration: underline !important;
}
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  .services-item-snippet
  ul {
  list-style: disc;
  padding-left: 22px;
}
.services-wrapper
  .services-container
  .services-item-wrapper
  .services-item
  .item-content
  .services-item-snippet
  ol {
  list-style: decimal;
  padding-left: 22px;
}

/* ===========================
   Learn More Section
=========================== */

.learn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;

  padding: 100px 0;
}

.learn-wrapper h2 {
  color: #001c51;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
}

.learn-wrapper .learn-snippet {
  color: #333;
  font-size: 23px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;

  max-width: 840px;
}
.learn-wrapper .learn-snippet p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.learn-wrapper .learn-snippet a {
  text-decoration: underline !important;
}

@media screen and (max-width: 1024px) {
  .intro-top .left-col .intro-header {
    font-size: 32px;
    line-height: 44px;
  }
  .intro-top .left-col .intro-text {
    font-size: 16px;
    line-height: 26px;
  }

  .services-wrapper .services-header h2 {
    font-size: 32px;
    line-height: 44px;
  }

  .services-wrapper .services-header .service-snippet {
    font-size: 20px;
    line-height: 30px;
  }

  .services-wrapper .services-container .services-item-wrapper .services-item {
    padding: 30px;
  }

  .services-wrapper
    .services-container
    .services-item-wrapper
    .services-item
    .item-content
    h3 {
    font-size: 28px;
    line-height: 38px;
  }

  .services-wrapper
    .services-container
    .services-item-wrapper
    .services-item
    .item-content
    .services-item-snippet {
    font-size: 14px;
    line-height: 24px;
  }

  .learn-wrapper h2 {
    font-size: 32px;
    line-height: 44px;
  }

  .learn-wrapper .learn-snippet {
    font-size: 20px;
    line-height: 30px;
  }
}
@media screen and (max-width: 991px) {
  .intro-top {
    flex-direction: column;
    gap: 48px;
  }

  .intro-top .left-col {
    width: 100%;
  }
  .intro-top .right-col {
    width: 100%;
  }

  .services-wrapper .services-container .services-item-wrapper.tb-full {
    width: 100%;
  }

  .services-wrapper
    .services-container
    .services-item-wrapper
    .services-item
    .item-content
    h3 {
    font-size: 24px;
    line-height: 34px;
  }
}
@media screen and (max-width: 767px) {
  .intro-top {
    gap: 25px;
  }

  .intro-top .left-col .intro-header {
    font-size: 24px;
    line-height: 34px;
  }
  .intro-top .left-col .intro-text {
    font-size: 14px;
    line-height: 24px;
  }

  .services-wrapper .services-header .service-snippet {
    font-size: 16px;
    line-height: 26px;
  }

  .services-wrapper .services-container .services-item-wrapper.w40 {
    width: 100%;
  }
  .services-wrapper .services-container .services-item-wrapper.w60 {
    width: 100%;
  }

  .learn-wrapper .learn-snippet {
    font-size: 16px;
    line-height: 26px;
  }
}
