.hero .contact,
.hero .review {
   display: flex;
   justify-content: space-around;
   position: relative;
}

.hero .contact .col-left,
.hero .review .col-left {
   width: 47%;
   height: fit-content;
   box-shadow: var(--img-box-shadow);
   border-radius: 10px;
   padding: calc(var(--spacing) * 5) calc(var(--spacing) * 5) 0
      calc(var(--spacing) * 5);
   box-sizing: border-box;
   margin: 0;
}

.hero .contact .col-left h3,
.hero .review .col-left h3 {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--black-75);
   margin: 0;
}

.hero .contact .col-left .inp,
.hero .review .col-left .inp {
   width: 100%;
   height: calc(var(--spacing) * 5);
   border-radius: 10px;
   border: none;
   background-color: var(--blue-green-1);
   opacity: 0.4;
   margin: calc(var(--spacing) * 2) 0 0 0;
   padding: 0 calc(var(--spacing) * 2);
   font-size: 0.94rem;
   color: var(--black);
   line-height: var(--body-height);
   letter-spacing: 0.225px;
   box-sizing: border-box;
}

.hero .contact .col-left .inp#msg,
.hero .review .col-left .inp#msg {
   height: calc(var(--spacing) * 21);
   padding: var(--spacing) calc(var(--spacing) * 2);
   box-sizing: border-box;
   resize: none;
   color: var(--black);
}

.hero .contact .col-left .inp::placeholder,
.hero .review .col-left::placeholder {
   font-size: 0.94rem;
   color: var(--black-50);
   line-height: var(--body-height);
   letter-spacing: 0.225px;
   /* padding: 0 16px; */
   box-sizing: border-box;
   vertical-align: center;
}

.hero .contact .col-left .inp#msg::placeholder,
.hero .review .col-left .inp#msg::placeholder {
   vertical-align: top;
}

.hero .contact .form-container.col-left .form-control,
.hero .review .form-container.col-left .form-control {
   outline: 0;
}

.hero .contact .col-left .btn,
.hero .review .col-left .btn {
   width: 100%;
   height: calc(var(--spacing) * 6.5);
   border-radius: 10px;
   border: 2px solid var(--black-75);
   margin: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4) 0;
   box-sizing: border-box;
   background-color: white;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.hero .contact .col-left .btn span,
.hero .review .col-left .btn span {
   font-size: 1.25rem;
   color: var(--black-75);
   line-height: var(--body-height);
   letter-spacing: 0.225px;
   position: relative;
   z-index: 2;
   transition: 1s;
}

.hero .contact .col-left .btn .wave,
.hero .review .col-left .btn .wave {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--blue-green-1);
   transition: 1s;
   opacity: 0.4;
}

.hero .contact .col-left .btn:hover .wave,
.hero .review .col-left .btn::hover .wave {
   top: 0;
}

.hero .contact .col-left .btn .wave::before,
.hero .review .col-left .btn .wave::before {
   content: "";
   position: absolute;
   top: -95%;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("../images/golf8.svg");
   background-size: 500%;
   background-position: 0px;
   background-repeat: no-repeat;
   animation: animate 15s linear infinite;
}
@keyframes animate {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: 100%;
   }
}
/* popup styles */

.swal2-title {
   width: 100%;
   text-align: center;
   box-sizing: border-box;
   font-family: var(--body-font);
}

.swal2-title:after {
   display: none;
}

.swal2-icon {
   margin: calc(var(--spacing) * -9);
   justify-self: center;
}

.swal2-icon::before {
   content: "";
   width: 100%;
   height: 100%;
   background-color: white;
   border-radius: 50%;
}

.swal2-success-circular-line-right,
.swal2-success-circular-line-left,
.swal2-success-fix {
   display: none;
}

#bd .swal2-x-mark .swal2-x-mark-line-left {
   left: -4em;
}

button.swal2-confirm.swal2-styled {
   padding: 10px 28%;
   border-radius: 10px;
}

h2#swal2-title {
   font-size: 1.25rem;
   color: var(--black);
}

div#swal2-html-container {
   margin: calc(var(--spacing) * 2) 1.6em 0;
   line-height: 130%;
   overflow: hidden;
}

.swal2-actions {
   margin: 10px 0 0 0;
}

.swal2-popup .swal2-styled:focus {
   box-shadow: none !important;
}

.hero .section-container .swal2-confirm.swal2-styled.swal2-default-outline {
   background-color: white;
}

div.swal2-popup.swal2-modal.swal2-icon-success.swal2-show {
   padding: 0 calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5)
      calc(var(--spacing) * 2.5);
   box-sizing: border-box;
}

div:where(.swal2-icon).swal2-error [class^="swal2-x-mark-line"][class$="left"] {
   left: -3.8em;
}
/* form-validation styles */

.form-control {
   position: relative;
}

.form-control .check,
.form-control .exclamation {
   position: absolute;
   right: calc(var(--spacing) * 2.5);
   top: 35%;
}

.form-control > #msg ~ .check,
.form-control > #msg ~ .exclamation {
   top: 42%;
}

.form-control small.error-text {
   position: relative;
   color: #e74c3c;
   margin: 0 0 0 var(--spacing);
   font-family: var(--body-font);
   visibility: hidden;
   display: flex;
}

.form-control.error small.error-text {
   visibility: visible;
}

.hero .section-container .form-container .form-control .check {
   color: #2ecc71;
   visibility: hidden;
}

.hero .section-container .form-container .form-control.success .check {
   visibility: visible;
}

.hero .section-container .form-container .form-control .exclamation {
   color: #e74c3c;
   visibility: hidden;
}

.hero .section-container .form-container .form-control.error .exclamation {
   visibility: visible;
}

.hero .section-container .form-container .form-control.success .inp {
   border: 2px solid #2ecc71;
}
.hero .section-container .form-container .form-control.error .inp {
   border: 2px solid #e74c3c;
}
/* line */
.hero .line {
   width: 2px;
   height: calc(var(--spacing) * 53);
   background-color: var(--black-75);
   margin: auto 0;
}

.main-dec .dec-cirkel:nth-of-type(1) {
   top: 500px;
   left: -140px;
}

.main-dec .dec-cirkel:nth-of-type(2) {
   bottom: 320px;
   right: -140px;
}

/* col-right */
main .hero .contact .col-right {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 168.188px 168.188px;
   gap: calc(var(--spacing) * 3);
   margin: calc(var(--spacing) * 4) 0 0 0;
   height: 336.408px;
}

main .hero .contact .col-right a {
   height: fit-content;
}

.card-3 {
   padding: var(--spacing);
   box-sizing: border-box;
   width: 100%;
   height: 168.188px;
   justify-content: center;
}

.card-3:nth-last-of-type(1) .wave-2 {
   bottom: -29px;
}

@media only screen and (max-width: 1100px) {
   .hero .contact .col-left .btn .wave::before,
   .hero .review .col-left .btn .wave::before {
      top: -90%;
   }
}
@media only screen and (max-width: 880px) {
   .hero .contact .col-left .btn .wave::before,
   .hero .review .col-left .btn .wave::before {
      top: -85%;
   }
}

@media only screen and (max-width: 836px) {
   .hero .contact .col-left,
   .hero .review .col-left {
      width: 60%;
   }
}
@media only screen and (max-width: 836px) {
   main .hero .section-container .contact,
   main .hero .section-container .review {
      height: calc(950px + 52.094px + calc(var(--spacing) * 6));
   }

   .hero .contact,
   .hero .review {
      display: block;
   }

   .hero .contact .col-left,
   .hero .review .col-left {
      width: 100%;
   }

   .hero .line {
      display: none;
   }
}

@media only screen and (max-width: 500px) {
   main .hero .section-container .contact,
   main .hero .section-container .review {
      height: fit-content;
   }

   .hero .contact .col-left .btn .wave::before,
   .hero .review .col-left .btn .wave::before {
      top: -40px;
   }
}
@media only screen and (max-width: 500px) {
   .hero .contact .col-left,
   .hero .review .col-left {
      padding: calc(var(--spacing) * 3);
   }
}
@media only screen and (max-width: 368px) {
   .hero .contact .col-left .btn .wave::before,
   .hero .review .col-left .btn .wave::before {
      top: -30px;
   }
}