@charset "utf-8";

html {
  scroll-behavior: smooth
}
body {
  color: #333;
  font: unset;
  font-family: "GMarketSans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

* {
  margin: 0;
}
:root {}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
li {
  list-style: none;
}
a:link,
a:visited {
  text-decoration: none;
  color: #333;
}
.hr {
  margin: 1rem 0;
}
sub {
  line-height: initial;
}
i, em, address {
  font-style: normal;
}
.form__control:focus {
  box-shadow: unset;
}
input::placeholder {
  color:#A6B0CC;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

.dialog {
  .dialog__contents {
    position: initial;

    .dialog__header {
      justify-content: space-between;

      .dialog__close {
        position: initial;
        background-color: transparent;
        opacity: 0.5;
        transition: 0.3s;

        &::after {
          display: none;
        }

        &:hover {
          opacity: 1;
        }
      }
    }

    .dialog__body {
      .btn-group {
        display: flex;
        gap: 1rem;
        justify-content: center;

        .btn {
          background-color: rgba(29,35,62,1);
          border-radius: var(--border-radius-md);
          width: 50%;
          font-weight: 300;
          border: 1px solid rgba(29,35,62,1);
          transition: 0.3s;
          gap: 0.5rem;

          span {
            display: block;
            transform: rotate(-45deg);
            transition: 0.3s;
          }

          &:hover {
            background-color: #fff;
            color: #000;

            span {
              transform: rotate(0);
            }
          }
        }
      }
    }
  }
}

.main {
  height: 100vh;
  background: linear-gradient(to right, #EDF5F8 , #F8F8DF 40%);
  display: flex;
  align-items: center;
  justify-content: center;

  .main__section-group {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    max-width: 1400px;
    padding: clamp(0.5rem, 4vw, 60px);

    .main__section {
      &.main__section-img {
        .main__container {
          height: 100%;
          position: relative;

          .main__logo {
            position: absolute;
            top: -3rem;

            img {
              width: 90px;
            }
          }

          .main__video {
            height: 100%;
            border-radius: 20px;
            overflow: hidden;

            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }

      &.main__section-info {
        .main__container {
          .main__container-inner {
            color: #1D233E;

            .main__container-header {
              position: relative;

              .main__container-header-btn {
                display: flex;
                justify-content: flex-end;
                gap: 0.5rem;
                position: absolute;
                top: 0;
                right: 0;
                
                .btn {
                  height: unset;
                  min-height: unset;
                  padding: 0;

                  a {
                    display: flex;

                    img {
                      width: clamp(32px, 3vw,45px);
                    }
                  }

                  &.btn-youtube {
                    a {
                      img {
                        width: clamp(32px, 3.2vw, 50px);
                      }
                    }
                  }
                }
              }
            }

            h1 {
              font-size: clamp(30px, 5.5vw, 80px);
              font-weight: 500;
              margin: 0;
              margin-bottom: clamp(16px, 2.5vw, 40px);
            }

            h2 {
              font-size: clamp(14px, 2vw, 34px);
              font-weight: 300;
              margin-bottom: clamp(16px, 4.5vw, 70px);
              line-height: 1.3;
            }
          }

          .main__container-footer {
            display: flex;
            gap: 1rem;
            margin-bottom: clamp(60px, 5vh, 90px);

            .btn {
              padding: 0.5rem 1rem;
              background-color: rgba(29,35,62,1);
              border: 1px solid rgba(29,35,62,1);
              transition: 0.3s;
              border-radius: var(--border-radius-lg);
              height: unset;
              line-height: 2;
              white-space: normal;
              width: 50%;
              gap: 0.5rem;
              font-weight: 300;
              font-size: clamp(14px, 2vw, 20px);

              span {
                display: block;
                transform: rotate(-45deg);
                transition: 0.3s;
              }

              &:hover {
                background-color: #fff;
                color: #000;

                span {
                  transform: rotate(0);
                }
              }
            }
          }
        }

        .main__footer {
          color: #1D233E;
          font-weight: 300;
          text-align: right;
          font-size: clamp(10px, 1vw, 16px);
        }
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  .main {
    .main__section-group {
      .main__section {
        &.main__section-info {
          .main__container {
            .main__container-footer {
              .btn {
                font-size: clamp(14px, 1.5vw, 16px);
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .main {
    height: unset;
    min-height: 100vh;

    .main__section-group {
      display: flex;
      flex-direction: column;
      transform: unset;
      top: unset;
      left: unset;
      padding: clamp(40px, 9vw, 90px);

      .main__section {
        &.main__section-img {
          .main__container {
            .main__logo {
              top: clamp(-50px, -6vh, -4rem);

              img {
                width: clamp(70px, 8vw, 90px);
              }
            }
          }
        }
        &.main__section-info {
          .main__container {
            .main__container-inner {
              h1 {
                font-size: clamp(32px, 7.5vw, 60px);
              }

              h2 {
                font-size: clamp(16px, 3.2vw, 32px);
                margin-bottom: clamp(16px, 3vh, 20px);
              }
            }

            .main__container-footer {
              .btn {
                width: unset;
                font-size: clamp(14px, 2vw, 16px);
              }
            }
          }

          .main__footer {
            font-size: clamp(13px, 2vw, 20px);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .main {
    background: linear-gradient(to bottom, #EDF5F8 , #F8F8DF 50%);

    .main__section-group {
      padding: clamp(40px, 9vw, 90px);

      .main__section {
        &.main__section-info {
          .main__container {
            .main__container-inner {
              h1 {
                font-size: clamp(32px, 9vw, 70px);
              }

              h2 {
                font-size: clamp(16px, 4.5vw, 32px);
                margin-bottom: clamp(16px, 3vh, 20px);
              }
            }

            .main__container-footer {
              flex-direction: column;
              align-items: flex-start;
              gap: 0.5rem;

              .btn {
                width: 200px;
                font-size: clamp(14px, 2vw, 16px);
              }
            }
          }

          .main__footer {
            font-size: clamp(13px, 2vw, 20px);
          }
        }
      }
    }
  }
}