@import url('general.css');

/* SOLUTION SECTION */
.solution-section {
  padding: 12.6rem 0 21.4rem 0;
}

.container__solution {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 17.8rem;
}

.heading-primary.solution__heading {
  text-transform: uppercase;
}

.heading-primary.solution__heading,
.heading-primary.who-we-are__heading {
  color: #182081;
}

.solution-box {
  position: relative;
}

.solutions-list-left {
  position: absolute;
  top: -7.5rem;
  left: -1rem;
}

.solutions-list-right {
  position: absolute;
  top: -7.5rem;
  right: 25rem;
}

.solution-list {
  position: absolute;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.solutions-list-left .solution-list.col-1 {
  left: 32rem;
}

.solutions-list-left .solution-list.col-2 {
  top: 7rem;
  left: 14rem;
}

.solutions-list-left .solution-list.col-3 {
  top: 14rem;
  left: 5rem;
}

.solutions-list-left .solution-list.col-4 {
  top: 21rem;
  left: 0rem;
}

.solutions-list-left .solution-list.col-5 {
  top: 28rem;
  left: 4rem;
}

.solutions-list-left .solution-list.col-6 {
  top: 35rem;
  left: 5.7rem;
}

.solutions-list-left .solution-list.col-7 {
  top: 42rem;
  left: 19rem;
}

.solutions-list-left .solution-list.col-8 {
  top: 49rem;
  left: 31rem;
}

.solutions-list-right .solution-list.col-1 {
  right: 5rem;
}

.solutions-list-right .solution-list.col-2 {
  top: 7rem;
  right: -9rem;
}

.solutions-list-right .solution-list.col-3 {
  top: 16rem;
  right: -25rem;
}

.solutions-list-right .solution-list.col-4 {
  top: 28rem;
  right: -27rem;
}

.solutions-list-right .solution-list.col-5 {
  top: 35rem;
  right: -10rem;
}

.solutions-list-right .solution-list.col-6 {
  top: 42rem;
  right: 6rem;
}

.solution-list__text {
  font-size: 1.8rem;
  line-height: 2.459rem;
  letter-spacing: -0.05rem;
}

.solutions-list-left .solution-list__text {
  color: #34b899;
}

.solutions-list-right .solution-list__text {
  color: #0590b5;
}

.solution-list__image {
  width: 6.1rem;
  height: 6.1rem;
}

.solution-list__image img {
  width: 100%;
  height: 100%;
}

/* ABOUT US SECTION */
.who-we-are-section {
  padding: 18.4rem 0 21.3rem 0;
}

.container__who-we-are {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto;
  text-align: justify;

  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 9rem;
}

.heading-secondary.who-we-are__heading {
  letter-spacing: -0.2rem;
  color: #696969;
}

.who-we-are__paragraph {
  font-size: 2rem;
  line-height: 2.732rem;
  color: #696969;
  margin-top: 2.7rem;
}

.who-we-are__image-box {
  display: grid;
  grid-template-columns: 11.635rem 1fr;
  grid-template-rows: 26.685rem 1fr;
  column-gap: 0.837rem;
  row-gap: 0.933rem;
}

.who-we-are__col-1 {
  grid-column: 1;
  grid-row: 1/3;
  height: 41.8rem;
  border-radius: 0.5rem;
}

.who-we-are__col-2 {
  height: 26.685rem;
}

.who-we-are__col-3 {
  height: 14.182rem;
}

.who-we-are-img {
  width: 100%;
  height: 100%;
}

/* WHY US SECTION */
.why-us-section {
  padding: 15rem 0 31rem 0;
}

.container__why-us {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9.2rem;
}

.why-us__heading-box {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.why-us__heading {
  color: #1e357b;
  line-height: 4.5rem;
  text-align: center;
}

.why-us__paragraph {
  font-size: 2rem;
  line-height: 2.732rem;
  text-align: center;
  color: #696969;
  max-width: 87.5rem;
  letter-spacing: -0.05rem;
}

.why-us__detail-box {
  display: flex;
  gap: 9.2rem;
}

.detail-box__list-box {
  display: flex;
  flex-direction: column;
  max-width: 33.4rem;
  gap: 2.1rem;
}

.list-box__header {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.header-image {
  position: relative;
  display: flex;
}

.header-image::after {
  content: '';
  position: absolute;
  bottom: -1rem;
  height: 0.3rem;
  width: 100%;
  background: linear-gradient(103.22deg, #ae67fa -13.86%, #f49867 99.55%),
    #000000;
}

.header-text {
  font-size: 1.8rem;
  line-height: 2.4rem;
  letter-spacing: -0.04rem;
  color: #1a6053;
}

.list-box__paragraph {
  font-size: 1.4rem;
  line-height: 2.4rem;
  text-align: justify;
}

/* PRODUCT SECTION */
.product-section {
  padding: 13.9rem 0 23.7rem 0;
  background: linear-gradient(82.61deg, #1a3380 20.64%, #153d89 86.25%);
}

.container__product {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4.2rem;
}

.product__heading-box {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.product__heading {
  font-size: 4.8rem;
  line-height: 6.557rem;
  text-align: center;
  text-transform: uppercase;
  color: #fff200;
}

.product__paragraph {
  font-size: 2.4rem;
  line-height: 3.278rem;
  text-align: center;
  color: #ffffff;
  max-width: 113.9rem;
}

.product__detail-box {
  display: flex;
  flex-direction: column;
  gap: 9.8rem;
}

.main-nav__menu-lists {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.9rem;
}

.menu-list-link:link,
.menu-list-link:visited {
  text-decoration: none;
  font-size: 2rem;
  line-height: 2.732rem;
  color: #ffffff;
  text-transform: uppercase;
  transition: all 0.1s;
}

.menu-list-link:hover,
.menu-list-link:active {
  font-weight: 700;
}

.menu-list-link.link__selected {
  cursor: default;
  font-weight: 700;
}

.product__list-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.list-box__card {
  display: flex;
  flex-direction: column;
}

.single--list {
  grid-column: 1/3;
  width: 100%;
}

.single--list .card-header {
  height: 55rem;
}

.card-header {
  background-color: #ffffff;
  height: 43.9rem;
  padding: 8.1rem 1.9rem 5.9rem;
}

.card-header img {
  width: 100%;
  height: 100%;
}

.card-body {
  background-color: #6ac544;
  padding: 3.6rem 2.6rem 3.2rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;

  display: flex;
  flex-direction: column;
  gap: 3.9rem;
}

.body-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.body-text__header {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.278rem;
  letter-spacing: 0.005rem;
  color: #ffffff;
}

.body-text__paragraph {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2.186rem;
  color: #ffffff;
  width: 100%;
  max-width: 67rem;
}

.more-btn:link,
.more-btn:visited {
  align-self: flex-start;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.186rem;
  color: #ffffff;
  text-transform: uppercase;

  background-color: #1e357b;
  padding: 1.3rem 1.6rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
}

.more-btn:hover,
.more-btn:active {
  background-color: #22419e;
}

/* ACHIEVEMENT SECTION */
.achievement-section {
  display: grid;
  grid-template-columns: 55fr 35fr;
}

.achievement__text-box {
  padding: 13.8rem 8.5rem 20.5rem 12.8rem;
}

.text-box__header {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 6.557rem;
  color: #1e357b;
  margin-bottom: 2.3rem;
}

.text-box__paragraph {
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.732rem;
  text-align: justify;
  color: #1e357b;
  margin-bottom: 1.1rem;
}

.text-box__list {
  padding-left: 2rem;
  margin-bottom: 4.3rem;
}

.list-text {
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.732rem;
  text-align: justify;
  color: #1e357b;
}

.achievement__text-box .more-btn {
  margin-left: 2rem;
}

.achievement__img-box img {
  width: 100%;
}

/* NEWS SECTION */
.news-section {
  position: relative;
  padding: 15.8rem 0 9.71rem;
}

.news-section::after {
  content: '';
  position: absolute;

  width: 100%;
  height: 26.5rem;
  background: url('../images/banner-cta.png');
  background-position: center;
  background-size: cover;
}

.container__news {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto 10rem;

  display: flex;
  flex-direction: column;
  gap: 5.4rem;
}

.news__heading {
  line-height: 7.5rem;
  letter-spacing: 0.004rem;
  color: #1e357b;
}

.news-list {
  display: grid;
  grid-template-columns: 41.7rem 1fr 1fr;
  gap: 4.9rem;
}

.news-card.news-newest {
  grid-row: 1/3;
}

.news-card.news-newest .news-card__header {
  height: 28.9rem;
}

.news-card.news-newest .news-card__header img {
  width: 100%;
  height: 100%;
}

.news-card.news-newest .news-card__body {
  background: linear-gradient(180deg, #032796 0%, #032796 100%);
  padding: 3.2rem 2.549rem 2.695rem;

  display: flex;
  flex-direction: column;
  gap: 18.689rem;
}

.news-card.news-newest .text-title {
  font-size: 2.511rem;
  font-weight: 800;
  line-height: 3.029rem;
  color: #ffffff;
}

.news-card.news-normal .news-card__header {
  height: 15rem;
}

.news-card.news-normal .news-card__header img {
  width: 100%;
  height: 100%;
}

.news-card.news-normal .news-card__body {
  background: linear-gradient(180deg, #032796 0%, #032796 100%);
  padding: 0.7rem 2.039rem 1.337rem 2.195rem;

  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.text-date {
  font-size: 1.165rem;
  font-weight: 700;
  line-height: 3.495rem;
  color: #ffffff;
  margin-bottom: 0.025rem;
}

.news-card.news-normal .text-title {
  font-size: 1.932rem;
  font-weight: 800;
  line-height: 3.029rem;
  color: #ffffff;
  width: 28.5rem;
}

.full-article:link,
.full-article:visited {
  align-self: flex-start;
  text-decoration: none;
  font-size: 1.165rem;
  font-weight: 700;
  line-height: 3.495rem;
  color: #ffffff;
  margin-bottom: 0.025rem;
  transition: all 0.3s;
}

.full-article:hover,
.full-article:active {
  box-shadow: 0 0.2rem 0 0 #ffffff;
}

/* CTA SECTION */
.cta-section {
  position: relative;
  padding: 5.1rem 0;
  margin-top: 16.7rem;
  background: linear-gradient(180deg, #1e357b 0%, #022696 96.35%);
}

.container__cta {
  max-width: 135rem;
  padding: 0 4rem;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.4rem;
}

.cta__header {
  font-size: 6rem;
  line-height: 7.5rem;
  letter-spacing: -0.004rem;
  text-align: center;
  color: #ffffff;
  max-width: 82.1rem;
}

.cta-link:link,
.cta-link:visited {
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 400;
  padding: 2.3rem 4rem;
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: all 0.3s;
}

.cta-link:hover,
.cta-link:active {
  background-color: #ffffff;
  color: #000000;
}

/* RESPONSIVE */

/***************************/
/* BELOW 1344px */
/***************************/
@media (max-width: 84em) {
  .solution-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-box img {
    grid-column: 1/3;
    justify-self: center;
  }

  .solutions-list-left {
    position: static;
    justify-self: center;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .solutions-list-left > .solution-list.col-1,
  .solutions-list-left > .solution-list.col-2,
  .solutions-list-left > .solution-list.col-3,
  .solutions-list-left > .solution-list.col-4,
  .solutions-list-left > .solution-list.col-5,
  .solutions-list-left > .solution-list.col-6,
  .solutions-list-left > .solution-list.col-7,
  .solutions-list-left > .solution-list.col-8 {
    position: static;
  }

  .solutions-list-right {
    position: static;
    justify-self: center;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .solutions-list-right > .solution-list.col-1,
  .solutions-list-right > .solution-list.col-2,
  .solutions-list-right > .solution-list.col-3,
  .solutions-list-right > .solution-list.col-4,
  .solutions-list-right > .solution-list.col-5,
  .solutions-list-right > .solution-list.col-6,
  .solutions-list-right > .solution-list.col-7,
  .solutions-list-right > .solution-list.col-8 {
    position: static;
  }

  .news-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .news-card.news-newest {
    grid-column: 1/4;
    grid-row: 1;

    display: flex;
  }

  .news-card.news-newest .news-card__header {
    height: 100%;
  }

  .news-card.news-normal .news-card__header {
    height: 25rem;
  }
}

/***************************/
/* BELOW 1100px */
/***************************/
@media (max-width: 68.75rem) {
  .achievement__text-box {
    padding-top: 7rem;
  }

  .news-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-card.news-newest {
    grid-column: 1/3;
    grid-row: 1;

    display: flex;
  }
}

/***************************/
/* BELOW 1050px */
/***************************/
@media (max-width: 65.625em) {
  .solutions-list-left {
    grid-column: 1/3;
    margin-bottom: 7rem;

    grid-template-columns: repeat(3, 1fr);
    column-gap: 10rem;
  }

  .solutions-list-right {
    grid-column: 1/3;

    grid-template-columns: repeat(3, 1fr);
    column-gap: 7rem;
  }
}

/***************************/
/* BELOW 900px */
/***************************/
@media (max-width: 56.25em) {
  .solution-img {
    width: 85%;
  }

  .why-us__detail-box {
    width: 100%;
    flex-direction: column;
  }

  .detail-box__list-box {
    max-width: 100%;
    gap: 5rem;
  }

  .list-box__header {
    justify-content: center;
    gap: 5rem;
  }

  .header-text {
    font-size: 2rem;
  }

  .list-box__paragraph {
    text-align: center;
    font-size: 1.75rem;
  }
}

/***************************/
/* BELOW 750px */
/***************************/
@media (max-width: 46.875em) {
  .header__slider-container {
    height: 95rem;
  }

  .hero__container {
    text-align: center;
    align-items: center;
  }

  .solution-img {
    width: 100%;
  }

  .solutions-list-left {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15rem;
  }

  .solutions-list-right {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15rem;
  }

  .container__who-we-are {
    grid-template-columns: 1fr;
  }

  h1.who-we-are__heading {
    text-align: center;
    margin-bottom: 5rem;
  }

  .product__list-box {
    grid-template-columns: 1fr;
  }

  .achievement-section {
    grid-template-columns: 1fr;
  }

  .achievement__text-box {
    padding: 10rem;
  }

  .news-list {
    grid-template-columns: 1fr;
  }

  .news-card.news-newest {
    grid-column: 1/2;
  }

  .news-card.news-normal {
    display: flex;
  }
}

/***************************/
/* BELOW 615px */
/***************************/
@media (max-width: 38.4375em) {
  .hero__container {
    gap: 5rem;
  }
}

/***************************/
/* BELOW 550px */
/***************************/
@media (max-width: 34.375em) {
  .container__solution {
    gap: 10rem;
  }

  .solution-img {
    padding-bottom: 2rem;
  }

  .solutions-list-left {
    column-gap: 8rem;
  }

  .solutions-list-right {
    column-gap: 9rem;
    padding-left: 1.5rem;
  }

  .text-box__header {
    text-align: center;
  }

  .list-box__header {
    justify-content: flex-start;
  }

  .list-box__paragraph {
    text-align: justify;
  }

  .news__heading {
    text-align: center;
  }
}

/***************************/
/* BELOW 530px */
/***************************/
@media (max-width: 33.125em) {
  .news-card.news-newest,
  .news-card.news-normal {
    flex-direction: column;
  }
}

/***************************/
/* BELOW 500px */
/***************************/
@media (max-width: 31.25rem) {
  .heading-secondary.who-we-are__heading {
    text-align: center;
  }

  .solutions-list-left {
    column-gap: 5rem;
  }

  .solutions-list-right {
    column-gap: 7rem;
    padding-left: 2rem;
  }
}

/***************************/
/* BELOW 450px */
/***************************/
@media (max-width: 28.125em) {
  .hero__container {
    padding-top: 10rem;
  }

  .heading-primary {
    font-size: 5rem;
  }

  .heading-secondary {
    font-size: 4rem;
  }

  .solutions-list-right {
    padding-left: 0;
    column-gap: 5rem;
  }

  .solution-list__text {
    font-size: 1.45rem;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
  }

  .achievement__text-box {
    padding: auto 5rem;
  }

  .text-box__header {
    font-size: 3.5rem;
  }

  .text-box__paragraph,
  .list-text {
    font-size: 1.75rem;
  }
}

/***************************/
/* BELOW 400px */
/***************************/
@media (max-width: 25em) {
  .solution-list__image {
    width: 5rem;
    height: 5rem;
  }

  .solution-list__text {
    font-size: 1.25rem;
  }

  .who-we-are-section {
    padding-top: 0;
  }

  .achievement__text-box {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/***************************/
/* BELOW 370px */
/***************************/
@media (max-width: 23.125em) {
  .header__slider-container {
    height: 135rem;
  }
}

/***************************/
/* BELOW 370px */
/***************************/
@media (max-width: 19.0625em) {
  .header__slider-container {
    height: 175rem;
  }
}