.section-area {
  background: linear-gradient(99deg, #215FCB, #7177EB, #56158C);
  font-family: "Instrument Sans", sans-serif;
  color: #01043B;
  padding: clamp(77px, 3.6328125vw, 93px) 2% clamp(76px, 3.671875vw, 94px) 2%;
  background-size: 400% 400%;
  animation: backgroundGradientAnimation 15s ease infinite;
}
.section-area .inner {
  max-width: clamp(1412px, 78.0859375vw, 1999px);
  width: 100%;
  padding: 0;
  position: relative;
}
.section-area .sc-area-content {
  display: flex;
  flex-direction: column;
  row-gap: clamp(21px, 1.71875vw, 44px);
  border-radius: 35px;
  background: #FFF;
  padding: clamp(47px, 4.375vw, 112px) clamp(48px, 8.59375vw, 220px) clamp(68px, 3.4765625vw, 89px) clamp(50px, 8.4765625vw, 217px);
}
.section-area .text-box-content-sc-area {
  position: relative;
}
.section-area .dots-box-sc-area {
  position: absolute;
  width: clamp(115.538px, 8.5308203125vw, 218.389px);
  height: auto;
  right: 0;
  top: -0.8984375vw;
}
.section-area .text-box-sc-area {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  text-align: left;
  direction: ltr;
}
.section-area .subtitle-sc-area {
  font-size: clamp(18px, 0.78125vw, 20px);
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  direction: ltr;
}
.section-area .title-sc-area {
  font-size: clamp(55px, 2.578125vw, 66px);
  font-weight: 600;
  line-height: 106.061%;
}
.section-area .title-sc-area .gradient {
  background: linear-gradient(90deg, #2FA3E1, #A34BB6, #2FA3E1, #A34BB6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 300%;
  animation: textGradientAnimation 10s linear infinite;
}
.section-area .items-sc-area {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(15px, 0.625vw, 16px);
  row-gap: clamp(13px, 0.6640625vw, 17px);
  flex-wrap: wrap;
  direction: ltr;
}
.section-area .item-sc-area {
  position: relative;
  width: calc(50% - clamp(7.5px, 0.3125vw, 8px));
  padding: clamp(77px, 5.546875vw, 142px) 25px 28px 60px;
  border-radius: clamp(16.799px, 0.78125vw, 20px);
  row-gap: clamp(25px, 3.90625vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  direction: ltr;
  text-align: left;
  min-height: clamp(470px, 21.5625vw, 552px);
  transition: all 0.5s ease;
  overflow: hidden;
}
.section-area .item-sc-area.opened, .section-area .item-sc-area:not(.hidden) {
  transition: all 0.5s ease;
}
.section-area .item-sc-area.hidden {
  opacity: 0;
  pointer-events: none;
}
.section-area .item-sc-area.showing {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease;
}
.section-area .items-sc-area {
  position: relative;
}
.section-area .row-item-sc-area {
  display: flex;
  gap: clamp(15px, 0.625vw, 16px);
  flex-wrap: nowrap;
  justify-content: space-between;
  transition: justify-content 0.5s ease;
}
.section-area .row-item-sc-area.align-start {
  justify-content: flex-start;
}
.section-area .row-item-sc-area.align-end {
  justify-content: flex-end;
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(1) {
  background: #F9F9FF;
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
  left: 0;
  width: clamp(210px, 17.890625vw, 458px);
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area.element-box-sc-area-open {
  left: auto;
  right: 0;
  top: 0;
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(2) {
  background: #F1FFF1;
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
  left: -0.625vw;
  width: clamp(200px, 17.3841796875vw, 445.035px);
}
.section-area .row-top-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area.element-box-sc-area-open {
  left: auto;
  right: 0;
  top: 0;
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) {
  background: #E6F3FF;
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
  left: 0;
  width: clamp(180px, 16.5234375vw, 423px);
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area.element-box-sc-area-open {
  left: auto;
  right: 0;
  top: 0;
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) {
  background: #EEEFFF;
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
  left: 1.1328125vw;
  width: clamp(190px, 16.9140625vw, 433px);
}
.section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area.element-box-sc-area-open {
  left: auto;
  right: 0;
  top: 0;
}
.section-area .item-sc-area {
  transition: all 0.5s ease;
  position: relative;
}
.section-area .item-sc-area.opened {
  width: 100%;
  z-index: 2;
}
.section-area .item-sc-area.opened .text-box-item-sc-area {
  margin-bottom: 106px;
}
.section-area .item-sc-area.opened .desc-item-sc-area {
  max-width: 76%;
}
.section-area .item-sc-area.opened .title-item-sc-area {
  max-width: 76%;
}
.section-area .item-sc-area.opened .element-box-sc-area.element-box-sc-area-open {
  top: 0;
  right: 0;
  left: auto;
}
.section-area .item-sc-area.opened .btn-text-open {
  display: none;
}
.section-area .item-sc-area.opened .btn-text-close {
  display: block;
}
.section-area .item-sc-area.opened .btn-icon-open {
  display: none;
}
.section-area .item-sc-area.opened .btn-icon-close {
  display: block;
}
.section-area .item-sc-area.opened .element-box-sc-area.element-box-sc-area-open {
  opacity: 1;
}
.section-area .item-sc-area.opened .element-box-sc-area.element-box-sc-area-close {
  opacity: 0;
}
.section-area .item-sc-area.opened-reverse {
  right: 0;
}
.section-area .item-sc-area.hidden {
  display: none;
}
.section-area .text-box-item-sc-area {
  display: flex;
  flex-direction: column;
  row-gap: clamp(34px, 1.484375vw, 38px);
  overflow: hidden;
  margin-bottom: 206px;
}
.section-area .title-item-sc-area {
  font-size: clamp(40px, 1.953125vw, 50px);
  font-weight: 600;
  line-height: 100%;
}
.section-area .desc-item-sc-area {
  max-width: clamp(510px, 25.46875vw, 652px);
  width: 100%;
  font-size: clamp(20px, 0.9375vw, 24px);
  font-weight: 400;
  line-height: 150%;
  height: auto;
  overflow: hidden;
  transition: height 0.4s ease, max-width 0.4s ease;
  position: relative;
  text-overflow: ellipsis;
}
.section-area .btn-item-sc-area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 30px 56px 30px 56px;
  color: #01043B;
  border-radius: 125px;
  background: #FFF;
  border: none;
  cursor: pointer;
  transition: all 0.5s ease;
  position: absolute;
  bottom: 28px;
  right: 30px;
  align-self: flex-end;
  direction: ltr;
}
.section-area .btn-item-sc-area:hover {
  box-shadow: inset 0 0 0 1px #01043B;
  gap: 15px;
  padding: 30px 51px 30px 56px;
}
.section-area .btn-item-sc-area .btn-text {
  font-size: clamp(18px, 0.859375vw, 22px);
  font-weight: 400;
  line-height: 163.636%;
  font-family: inherit;
}
.section-area .btn-item-sc-area .btn-text-close {
  display: none;
}
.section-area .btn-item-sc-area .btn-icon-close {
  display: none;
}
.section-area .element-box-sc-area {
  position: absolute;
  height: auto;
  mix-blend-mode: luminosity;
  transition: all 0.3s ease;
  opacity: 1;
  z-index: 5;
  transform: translateY(0);
  overflow: visible;
  pointer-events: auto;
}
.section-area .element-box-sc-area.animate-hide-open {
  transform: translateY(-50px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-area .element-box-sc-area.animate-hide-close {
  transform: translateY(50px);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-area .element-box-sc-area.animate-show {
  transform: translateY(0);
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}
.section-area .element-box-sc-area.element-box-sc-area-close {
  bottom: 0;
  left: 0;
  opacity: 1;
}
.section-area .element-box-sc-area.element-box-sc-area-open {
  opacity: 0;
  left: auto;
  right: 0;
}

@keyframes textGradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes backgroundGradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@media all and (max-width: 2160px) {
  .section-area .sc-area-content {
    padding: clamp(47px, 4.375vw, 112px) clamp(48px, 3.90625vw, 100px) clamp(68px, 3.4765625vw, 89px) clamp(50px, 3.90625vw, 100px);
  }
  .section-area .item-sc-area {
    min-height: clamp(500px, 21.5625vw, 552px);
  }
}
@media all and (max-width: 1920px) {
  .section-area .item-sc-area {
    min-height: clamp(450px, 26.0416666667vw, 500px);
  }
}
@media all and (max-width: 1512px) {
  .section-area {
    padding: 5.0925925926vw 2% 5.0264550265vw 2%;
  }
  .section-area .sc-area-content {
    row-gap: clamp(11px, 1.3888888889vw, 21px);
    padding: 3.1084656085vw 3.1746031746vw 4.4973544974vw 3.3068783069vw;
    border-radius: 24.722px;
  }
  .section-area .dots-box-sc-area {
    width: clamp(95.538px, 7.6414021164vw, 115.538px);
    top: 0;
  }
  .section-area .text-box-sc-area {
    row-gap: 0;
  }
  .section-area .subtitle-sc-area {
    font-size: clamp(16px, 1.1904761905vw, 18px);
  }
  .section-area .title-sc-area {
    font-size: clamp(44px, 3.6375661376vw, 55px);
    line-height: 127.273%;
  }
  .section-area .items-sc-area {
    gap: clamp(12px, 0.9920634921vw, 15px);
    row-gap: clamp(11px, 0.8597883598vw, 13px);
  }
  .section-area .row-item-sc-area {
    gap: clamp(12px, 0.9920634921vw, 15px);
  }
  .section-area .item-sc-area {
    width: calc(50% - clamp(6px, 0.496031746vw, 7.5px));
    padding: 5.0925925926vw 2.6455026455vw 2.6455026455vw 4.6957671958vw;
    row-gap: clamp(15px, 1.6534391534vw, 25px);
    min-height: clamp(330px, 26.455026455vw, 400px);
  }
  .section-area .item-sc-area.opened .text-box-sc-area {
    margin-bottom: 124px;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: 17.4603174603vw;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: 16.9312169312vw;
    left: 0;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: 16.8650793651vw;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: 17.1957671958vw;
    left: 0;
  }
  .section-area .item-sc-area.opened .element-box-sc-area.element-box-sc-area-open {
    right: 0;
    left: auto;
  }
  .section-area .text-box-item-sc-area {
    row-gap: clamp(24px, 2.2486772487vw, 34px);
    margin-bottom: 124px;
  }
  .section-area .title-item-sc-area {
    font-size: clamp(30px, 2.6455026455vw, 40px);
  }
  .section-area .desc-item-sc-area {
    font-size: clamp(16px, 1.3227513228vw, 20px);
  }
  .section-area .btn-item-sc-area {
    padding: 20px 38px 20px 48px;
    gap: 5px;
    right: 2.6455026455vw;
    bottom: 2.6455026455vw;
  }
  .section-area .btn-item-sc-area .btn-text {
    font-size: clamp(16px, 1.1904761905vw, 18px);
    line-height: 200%;
  }
  .section-area .btn-item-sc-area:hover {
    gap: 10px;
    padding: 20px 33px 20px 48px;
  }
  .section-area .item-sc-area.opened .text-box-item-sc-area {
    margin-bottom: 124px;
  }
}
@media all and (max-width: 1024px) {
  .section-area .subtitle-sc-area {
    font-size: clamp(14px, 1.5625vw, 16px);
  }
  .section-area .title-sc-area {
    font-size: clamp(33px, 4.296875vw, 44px);
  }
  .section-area .title-item-sc-area {
    font-size: clamp(20px, 2.9296875vw, 30px);
  }
  .section-area .desc-item-sc-area {
    font-size: clamp(14px, 1.5625vw, 16px);
  }
  .section-area .text-box-item-sc-area {
    row-gap: clamp(12px, 2.34375vw, 24px);
    margin-bottom: 104px;
  }
  .section-area .items-sc-area {
    gap: clamp(8px, 1.171875vw, 12px);
    row-gap: clamp(7px, 1.07421875vw, 11px);
  }
  .section-area .row-item-sc-area {
    gap: clamp(8px, 1.171875vw, 12px);
  }
  .section-area .item-sc-area {
    width: calc(50% - clamp(4px, 0.5859375vw, 6px));
    min-height: clamp(280px, 32.2265625vw, 330px);
  }
  .section-area .btn-item-sc-area {
    padding: 12px 28px 12px 38px;
  }
  .section-area .btn-item-sc-area .btn-text {
    font-size: clamp(14px, 1.5625vw, 16px);
  }
  .section-area .btn-item-sc-area:hover {
    padding: 12px 23px 12px 38px;
  }
  .section-area .dots-box-sc-area {
    width: clamp(75.538px, 9.3298828125vw, 95.538px);
  }
  .section-area .item-sc-area.opened .text-box-item-sc-area {
    margin-bottom: 104px;
  }
}
@media all and (max-width: 768px) {
  .section-area {
    padding: 12.3076923077vw 0 10.5128205128vw 0;
    background: linear-gradient(99deg, #215FCB -15.58%, #7177EB 43.28%, #56158C 119.03%);
  }
  .section-area .inner {
    padding: 0 2.8205128205vw;
  }
  .section-area .sc-area-content {
    row-gap: clamp(27px, 4.8177083333vw, 37px);
    padding: clamp(41px, 6.640625vw, 51px) 3.8461538462vw clamp(67px, 10.0260416667vw, 77px) 3.8461538462vw;
    border-radius: 15px;
  }
  .section-area .dots-box-sc-area {
    width: clamp(95.53px, 20.2513020833vw, 155.53px);
    top: -27px;
    right: 1px;
  }
  .section-area .text-box-sc-area {
    row-gap: clamp(8px, 2.34375vw, 18px);
  }
  .section-area .subtitle-sc-area {
    font-size: clamp(16px, 2.6041666667vw, 20px);
  }
  .section-area .title-sc-area {
    font-size: clamp(28px, 4.9479166667vw, 38px);
  }
  .section-area .desc-item-sc-area {
    max-width: 100%;
  }
  .section-area .items-sc-area {
    flex-wrap: nowrap;
    flex-direction: column;
    row-gap: clamp(22px, 4.1666666667vw, 32px);
  }
  .section-area .row-item-sc-area {
    flex-direction: column;
    row-gap: clamp(22px, 4.1666666667vw, 32px);
  }
  .section-area .item-sc-area {
    width: 100%;
    padding: 13.0769230769vw 3.5897435897vw 31.7948717949vw 3.5897435897vw;
    row-gap: clamp(34px, 5.7291666667vw, 44px);
    min-height: clamp(347px, 67.3177083333vw, 517px);
    height: auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .section-area .item-sc-area.opened .title-item-sc-area {
    max-width: 100%;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: clamp(224px, 46.09375vw, 354px);
    left: -13.5897435897vw;
    bottom: -4px;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: clamp(212px, 44.53125vw, 342px);
    left: -9.4871794872vw;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: clamp(180.046px, 40.3705729167vw, 310.046px);
    left: -6.1538461538vw;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: clamp(201px, 43.0989583333vw, 331px);
    left: -5.3846153846vw;
  }
  .section-area .title-item-sc-area {
    font-size: clamp(24px, 3.6458333333vw, 28px);
    line-height: 150%;
  }
  .section-area .desc-item-sc-area {
    font-size: clamp(18px, 2.8645833333vw, 22px);
  }
  .section-area .text-box-item-sc-area {
    row-gap: clamp(14px, 3.125vw, 24px);
    margin-bottom: 0;
  }
  .section-area .btn-item-sc-area {
    padding: 9px 29px 9px 30px;
    gap: 4px;
    margin-right: 5px;
    right: 5.1282051282vw;
    bottom: 8.4615384615vw;
  }
  .section-area .btn-item-sc-area .btn-text {
    font-size: clamp(16px, 2.6041666667vw, 20px);
    line-height: 225%;
  }
  .section-area .btn-item-sc-area:hover {
    gap: 8px;
    padding: 9px 25px 9px 30px;
  }
  .section-area .element-box-sc-area.element-box-sc-area-open {
    display: none;
  }
  .section-area .item-sc-area.opened .text-box-item-sc-area {
    margin-bottom: 0;
  }
}
@media all and (max-width: 390px) {
  .section-area .dots-box-sc-area {
    width: 24.4948717949vw;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: 57.4358974359vw;
  }
  .section-area .row-top-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: 54.358974359vw;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(1) .element-box-sc-area {
    width: 46.1656410256vw;
  }
  .section-area .row-bottom-item-sc-area .item-sc-area:nth-child(2) .element-box-sc-area {
    width: 51.5384615385vw;
  }
  .section-area .subtitle-sc-area {
    font-size: clamp(14px, 4.1025641026vw, 16px);
  }
  .section-area .title-sc-area {
    font-size: clamp(24px, 7.1794871795vw, 28px);
  }
  .section-area .title-item-sc-area {
    font-size: clamp(20px, 6.1538461538vw, 24px);
  }
  .section-area .desc-item-sc-area {
    font-size: clamp(14px, 4.6153846154vw, 18px);
    max-width: 100%;
  }
  .section-area .btn-item-sc-area .btn-text {
    font-size: clamp(14px, 4.1025641026vw, 16px);
  }
}

/*# sourceMappingURL=area-section.css.map */