@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  position: relative;
  font-family: 'Roboto',sans-serif;
  font-size: 14px !important;
  letter-spacing: 0.25px; }

.text-red {
  color: #DB6666; }

.text-green {
  color: #658274; }

.text-blue {
  color: #36C6F5; }

.text-purple {
  color: #9747FF; }

.title {
  font-weight: 700;
  font-size: 30px;
  line-height: 44px;
  color: #434343; }

.heading {
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  color: #434343; }

.content {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #434343;
  text-align: left; }

.description {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #8E8E8E; }

.btn {
  border-radius: 27px; }

.btn-fat {
  height: 48px;
  width: 145px; }

.btn-green {
  background-color: #658274;
  color: #FFFFFF; }
  .btn-green font {
    font-weight: 700;
    font-size: 12px;
    line-height: 18px; }
  .btn-green:hover {
    background-color: rgba(101, 130, 116, 0.9);
    color: white; }

.btn-close-modal {
  background: #658274;
  position: absolute;
  height: 30px;
  width: 30px;
  right: 30px;
  top: 30px;
  border-radius: 50%;
  border: none;
  color: #FFFFFF; }
  .btn-close-modal i {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; }

html input {
  border: solid 1px rgba(142, 142, 142, 0.05) !important; }
html input[type=text], html input[type=password], html input[type=email] {
  height: 35px;
  background-color: #FFFFFF;
  border-radius: 18.5px;
  margin-top: 5px; }
html textarea {
  border: solid 1px rgba(142, 142, 142, 0.05) !important;
  background-color: #FFFFFF;
  border-radius: 22.5px !important;
  margin-top: 5px;
  resize: none; }

body {
  height: 100vh;
  width: 100%;
  font-size: 15px;
  background-image: url(../images/bg2.jpg);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  background-repeat: no-repeat;
  background-size: cover; }
  body button:hover, body a.button:hover {
    opacity: 0.8 !important; }

.hide {
  display: none; }

.container {
  height: 100%;
  width: 100%; }

.required::after {
  content: ' *';
  color: #DB6666; }

.main {
  position: relative;
  height: 832px;
  width: 1280px;
  background-repeat: no-repeat;
  border: none; }

.container-fluid {
  font-size: 15px;
  padding: 100px;
  height: 100vh;
  width: 100vw; }
  .container-fluid .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100vh;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); }
  .container-fluid .logo {
    top: 50px;
    left: 100px; }
  .container-fluid .menu {
    top: 50px;
    right: 14%; }
    @media (max-width: 1280px) {
      .container-fluid .menu {
        right: 8%; } }
    .container-fluid .menu a {
      color: white;
      text-decoration: none; }
      .container-fluid .menu a:hover {
        color: white;
        text-decoration: underline; }
  .container-fluid .col-left p:nth-child(1) {
    margin-top: calc(40vh - 110px);
    font-weight: 700;
    font-size: 30px;
    line-height: 44px;
    color: #FFFFFF; }
  .container-fluid .col-left p:nth-child(2) {
    text-align: justify;
    font-weight: 400;
    font-size: 15px;
    line-height: 174.12%;
    color: #FFFFFF; }
  .container-fluid .col-left #btnDetail {
    background-color: #FFFFFF;
    color: #434343;
    border-radius: 26px;
    height: 50px;
    width: 100px;
    font-weight: 400;
    font-size: 20px;
    border: none; }
  .container-fluid .col-left #btnPlay {
    height: 50px;
    width: 190px;
    border-radius: 26px;
    background: unset;
    color: #FFFFFF;
    border: solid 1px #FFFFFF;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px; }
  .container-fluid .col-left #btnMoreProduct {
    text-decoration: none;
    color: #FFFFFF; }
    .container-fluid .col-left #btnMoreProduct:hover {
      text-decoration: underline; }
  .container-fluid .col-right {
    align-items: center;
    justify-content: center; }
    .container-fluid .col-right .login-form {
      margin-left: 22%;
      height: 540px;
      width: 485px;
      background-color: #F2F2F2;
      margin-top: 12.5%;
      border-radius: 27px; }
      @media (max-width: 1280px) {
        .container-fluid .col-right .login-form {
          margin-left: 10%; } }
      .container-fluid .col-right .login-form form {
        padding: 50px; }
        .container-fluid .col-right .login-form form p:nth-child(1) {
          font-weight: 700;
          font-size: 30px;
          line-height: 44px; }
    .container-fluid .col-right #btnSignIn {
      background: #658274;
      color: #FBFBFB;
      border-radius: 38px;
      border: none;
      height: 50px; }
    .container-fluid .col-right #btnForgotPass {
      color: rgba(67, 67, 67, 0.8); }
    .container-fluid .col-right .form-check-input {
      box-shadow: 0 0 0 0.25rem rgba(101, 130, 116, 0.25); }
      .container-fluid .col-right .form-check-input:checked {
        border-color: #658274;
        background-color: #658274; }
  .container-fluid .footer {
    bottom: 15px;
    right: 100px;
    color: #BEBEBE; }

#modalContact .modal-content {
  border-radius: 33px; }
#modalContact .modal-header {
  border-top-left-radius: 33px;
  border-top-right-radius: 33px;
  background-color: #F2F2F2;
  border-bottom: none; }
  #modalContact .modal-header .btn-close {
    margin-top: 3px;
    margin-right: 3px;
    opacity: 1 !important;
    padding: 0; }
    #modalContact .modal-header .btn-close:hover {
      opacity: 0.5; }
  #modalContact .modal-header button {
    background: none;
    background-color: #658274;
    height: 30px;
    width: 30px;
    right: 30px;
    top: 30px;
    border-radius: 50%;
    border: none; }
    #modalContact .modal-header button i {
      padding-left: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #FFFFFF; }
#modalContact .modal-body {
  border-bottom-left-radius: 33px;
  border-bottom-right-radius: 33px;
  padding: 50px !important;
  background-color: #F2F2F2; }
  #modalContact .modal-body .social a {
    color: #434343;
    font-size: 25px; }