main {
  background-color: #fff;
  isolation: isolate;
}
.cover {
  position: relative;
  min-height: 670px;
  z-index: 1;
}
.color {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 783px;
  background-color: #ebf7fb;
  z-index: -2;
}
@media (min-width: 992px) {
  .cover {
    height: calc(100vh - 115px);
    margin-top: 45px;
  }
  .footer {
    margin-top: 0;
  }
}

@media (max-width: 991px) {
  .cover {
    padding: 0;
  }
}

.cover-slick {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.cover-slick div {
  height: 100%;
  background-size: cover;
  background-position: center;
}

.cover .toggle-slick {
  position: absolute;
  top: 125px;
  right: 15px;
  background: none;
  border: 0;
}

.cover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  text-align: center;

  max-width: 600px;
  margin-top: -60px;
}

.cover .grade {
  width: 60%;
  position: absolute;
  height: 100%;
  background: linear-gradient(
    -90deg,
    rgb(0 119 223) 25%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: multiply;
}

/**/

video {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: 1s opacity;
  object-fit: cover;
  z-index: -1;
  object-position: top;
}

#toggle-video {
  position: absolute;
  top: 125px;
  right: 15px;
  background: none;
  border: 0;
}

/**/
.bg {
  position: absolute;
  top: 100vh;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(./images/bg-water.jpg);
  background-size: cover;
  background-position: top;
  opacity: 0.65;
  z-index: -1;
}
/* Articles */

.articles {
  position: relative;
  padding: 2rem 2rem 5rem;
}

.articles h2 {
  color: var(--prime2);
  font-weight: 900;
  font-size: calc(3.5vw + 16px);
  margin-top: 5rem;
  margin-bottom: 2rem;
}
.articles h2 span {
  display: inline-block;
  margin-inline: -10px;
  color: var(--prime5);
}
.articles .row > div {
  margin-bottom: 20px;
}
.article {
  display: block;
  color: #000;
  position: relative;
  height: 100%;
}
.article img {
  display: block;
  width: 100%;
  border-radius: 20px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.article .info {
  padding: 1rem;
}
.article .info h3 {
  font-size: calc(1vw + 7px);
}
.articles .row > div:first-child {
  background: linear-gradient(
    0deg,
    rgba(232, 246, 251, 0.7) 75%,
    rgba(255, 255, 255, 0) 100%
  );

  padding-bottom: 4.5rem;
  margin-bottom: 0;
}
.articles .row > div:first-child a {
  display: flex;
}
.articles .row > div:first-child a:hover {
  text-decoration: none;
}
.articles .row > div:first-child .pic {
  width: 100%;
  max-width: 50%;
  margin-left: 1rem;
}
.articles .row > div:first-child .info {
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
  padding-top: 6rem;
  margin-left: auto;
}
.articles .row .info p {
  line-height: 1;
  font-size: 0.9rem;
  color: #3b3b3b;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.articles .row .info p em {
  font-style: normal;
  color: var(--prime2);
  margin-inline: -2px;
  font-size: 115%;
}
.articles .row > div:first-child .info h3 {
  margin-bottom: 1.5rem;
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  transition: all 0.2s ease;
}
.articles .row > div:first-child .info h3:hover {
  transform: scale(1.05);
}
.articles .row > div:first-child .info h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 5px;
  background-color: var(--prime5);
  right: 0;
}
.articles .row > div:first-child .info h3 span {
  font-size: calc(2.25vw + 16px);
  color: var(--prime4);
  line-height: 1;
  font-weight: 900;
}

.articles .row > div:first-child .info h3 + div {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgb(84, 84, 84);
}
.articles .all {
  margin-right: auto;
  transition: all 0.2s ease;
  display: block;
  margin-top: 1rem;
  font-size: 1.4rem;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  overflow: hidden;
}
.articles .all.right {
  margin-right: 0;
}
.articles .all a {
  color: var(--text);
}
.articles .all:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
@media (min-width: 992px) {
  .services {
    position: relative;
    padding-block: 0.5rem;
    width: 100%;
    background-image: url(./content/images/backg.png);
    background-size: 100% auto;
    background-position: top;
  }
  .service:hover {
    transform: scale(1.1);
  }
}

.services-slick {
  padding: 0.5rem 1rem;
  margin: 0 1rem;
}

.service {
  text-align: center;
  display: block;
  margin: 1rem;
  padding: 1rem;
  font-size: 1.4rem;
  color: var(--prime4);
}

.service .icon img {
  display: block;
  margin: 0 auto;
  margin-bottom: 0.75rem;
  height: 100px;
}

/**/

/**/
.bgvid {
  position: absolute;
  top: 0px;
  right: 0;
  width: 100%;
  height: 100%;
}
.intro {
  position: absolute;
  color: #fff;
  top: 275px;
  right: 10rem;
  z-index: 9;
  font-size: calc(3vw + 16px);
  line-height: 0.7;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro span {
  display: block;
  z-index: 2;
}
.intro h2 {
  font-size: calc(5vw + 16px);
  font-weight: 700;
  z-index: 2;
}

.intro .shape {
  position: absolute;
  background-image: url("./images/shape_symbol.png?v=1");
  background-size: cover;
  width: 540px;
  height: 454px;
  z-index: 1;
  opacity: 0.25;
}
/* Fast Nav */

.fast-navigation {
  padding: 1rem 0;
  border-radius: 0 0 2rem 2rem;
  color: #fff;
  width: fit-content;
  margin: 0 auto;
}

.fast-navigation:after {
  clear: both;
  display: block;
  content: "";
}

@media (min-width: 992px) {
  .fast-navigation > label,
  .fast-navigation > select,
  .fast-navigation > span {
    float: right;
    display: block;
  }
}

.fast-navigation label {
  background: #0372ac;
  border-radius: 0 2rem 2rem 0;
  padding: 5px 10px;
  border: 0;
  margin: 0;
}

.fast-navigation select {
  background: #fff;
  border: 0;
  border-radius: 0;
  padding: 5px 10px;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

.fast-navigation button {
  background: #0372ac;
  border: 0;
  border-radius: 2rem 0 0 2rem;
  padding: 5px 10px;
  color: #fff;
  font-weight: bold;
}

@media (min-width: 992px) {
  .fast-navigation .smart-nav-sub > label,
  .fast-navigation .smart-nav-sub > select,
  .fast-navigation .smart-nav-sub > button {
    float: right;
    display: block;
  }
}
@media (max-width: 991px) {
  main {
    background-color: #f8fdfe;
  }
  .footer {
    margin-top: 0;
  }
  .cover {
    min-height: 320px;
  }
  .cover .toggle-slick {
    display: none;
  }
  .intro .shape {
    width: 270px;
    height: 230px;
  }
  .intro {
    top: 115px;
    right: 3rem;
  }
  video,
  #toggle-video {
  }
  .cover .grade {
    width: 100%;
  }
  .articles .row > div:first-child a {
    flex-direction: column !important;
  }
  .articles .row > div:first-child .pic {
    max-width: 100%;
  }
  .fast-navigation > label,
  .fast-navigation > select,
  .fast-navigation > span {
    display: block;
    border-radius: 2rem;
    width: 100%;
  }

  .fast-navigation .smart-nav-sub > label,
  .fast-navigation .smart-nav-sub > select,
  .fast-navigation .smart-nav-sub > button {
    display: block;
    border-radius: 2rem;
  }

  .fast-navigation .smart-nav-sub > select {
    width: 100%;
    margin: 0.5rem 0;
  }
  .articles .row > div:first-child {
    background: transparent;
  }
  .smart-nav-submit {
    margin: 0 auto;
  }
  .service figure {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
  .services-slick {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
  }
  .services-slick a {
    position: relative;
  }
  .services-slick a::before {
    content: "";
    position: absolute;
    bottom: -1.2rem;
    height: 2px;
    width: 75px;
    left: 0;
    background-color: #cfecf1;
  }
  .service .icon img {
    height: 55px;
    margin-left: 0;
  }
  .service .icon {
    margin-right: 1.5rem;
  }
  .services-slick > div {
    flex: 1 0 100%;
  }
  .service {
    padding: 1rem 0;
    margin: 1rem 0;
  }
}

/**/

@media (max-width: 767px) {
  .article .info h3 {
    font-size: calc(1vw + 16px);
  }
}