/*GENERAL*/
@font-face {
 font-family: 'century-gothic';
 font-style: normal;
 font-weight: 400;
 src: local('century-gothic'),
  url('https://cdn.githubraw.com/thek1d21/font/main/century-gothic-reg.woff')
   format('woff');
}
@font-face {
 font-family: 'century-gothic-bold';
 font-style: normal;
 font-weight: 700;
 src: local('century-gothic-bold'),
  url('https://cdn.githubraw.com/thek1d21/font/main/century-gothic-bold.woff')
   format('woff');
}

body {
 margin: 0;
 padding-top: 101px;
}
p {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-weight: 400;
 font-size: 16px;
 line-height: 20px;
 letter-spacing: -0.01em;
 text-align: center;
 margin: 0 0 14px 0;
}
p span {
 background-color: #fee1d7;
 border-radius: 50px;
 padding: 0 10px;
}
h1 {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 31px;
 font-weight: 700;
 line-height: 30px;
 text-align: center;
 color: #307fe2;
}

.btn-purple {
 background: #bb16a3;
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 20px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.01em;
 text-align: center;
 padding: 10px 60px;
 border-radius: 3px;
 width: 100%;
 max-width: 350px;
 border: 0;
 outline: 0;
 transition: all 0.2s ease-in-out;
 color: #fff;
 cursor: pointer;
 margin: 0 auto;
 display: block;
}
.btn-purple:hover {
 opacity: 0.8;
}
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
.container-large {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

.container-fluid {
 width: 100%;
}
header {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10;
 height: auto !important;
 box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
}
header.sticky {
 height: auto !important;
}
.block-header__container {
 padding: 22px 30px;
 background: #fff;
}
.block-header__container p {
 text-align: left;
 margin: 0;
}
.block-header__container img {
 width: auto;
 height: auto;
}
/*HERO*/
.block-hero {
 position: relative;
 overflow: hidden;
}
.block-hero__text {
 font-family: 'Century Gothic', Arial, sans-serif;
 text-align: left;
 position: relative;
 font-size: 18px;
 line-height: 28px;
 color: #201547;
 margin: 0 0 36px 0;
}

.block-hero__text img {
 max-width: 100%;
}
.form-gradient {
 text-align: center;
 padding: 16px;
 margin: 32px 0;
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 29px;
 font-weight: 700;
 color: #fff;
 background: rgb(187, 22, 163);
 background: linear-gradient(
  180deg,
  rgba(187, 22, 163, 1) 0%,
  rgba(255, 106, 57, 1) 100%
 );
}
.block-form__form {
 background: #f5f3ed;
 border-radius: 6px;
 padding: 30px 50px 40px;
 margin-bottom: 30px;
}
form p,
form label {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 20px;
 font-weight: 400;
 line-height: 24px;
 letter-spacing: -0.01em;
 text-align: left;
 color: #2e008b;
 margin-top: 20px;
 margin-bottom: 36px;
 padding: 0;
}
.block-form__form p {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 14px;
 font-weight: 400;
 line-height: 15px;
 letter-spacing: -0.01em;
 text-align: center;
 color: #2e008b;
}
.block-form__form-input {
 position: relative;
 padding-top: 25px;
 margin: 0;
}
.block-form__form-input input[type='text'],
.block-form__form-input select {
 border: 1px solid #3180e3;
 border-radius: 6px;
 background: #fff;
 padding: 10px 30px;
 width: 100%;
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 16px;
 font-weight: 400;
 line-height: 18px;
 letter-spacing: -0.01em;
 text-align: left;
 color: #2e008b;
}
.block-form__form-input label {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 16px;
 font-weight: 400;
 line-height: 18px;
 letter-spacing: -0.01em;
 text-align: left;
 color: #2e008b;
 position: absolute;
 left: 31px;
 top: 37px;
 transition: all 0.2s ease-in-out;
 margin: 0;
}
.block-form__form-input span {
 position: absolute;
 top: 32px;
 left: 8px;
 color: #e0436b;
 background: transparent;
 padding: 0;
}

.block-form__form-input select ~ label {
 opacity: 0;
}
.block-form__form-input select {
 appearance: none;
 background-image: linear-gradient(45deg, transparent 50%, #2e008b 50%),
  linear-gradient(135deg, #2e008b 50%, transparent 50%),
  linear-gradient(to right, #2e008b, #2e008b);
 background-position: calc(100% - 20px) calc(1em + 2px),
  calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
 background-size: 5px 5px, 5px 5px, 1px 1.5em;
 background-repeat: no-repeat;
}

.block-form__form-input select:focus {
 background-image: linear-gradient(45deg, #2e008b 50%, transparent 50%),
  linear-gradient(135deg, transparent 50%, #2e008b 50%),
  linear-gradient(to right, #2e008b, #2e008b);
 background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
  calc(100% - 2.5em) 0.5em;
 background-size: 5px 5px, 5px 5px, 1px 1.5em;
 background-repeat: no-repeat;
 outline: 0;
}
.block-form__form-input select:focus ~ label,
select:valid ~ label {
 opacity: 1;
 top: 5px;
 left: 0;
}
.block-form__form-input input:focus + label {
 top: 5px;
 left: 0;
}
.marketing-control {
 font-size: 16px;
}
.block-table {
 margin-bottom: 46px;
}
.block-table__text {
 margin-bottom: 38px;
}
.block-table__text h1 {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 34px;
 font-weight: 700;
 line-height: 43px;
 text-align: center;
 color: #201547;
}
.block-table__text h2 {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 24px;
 font-weight: 500;
 line-height: 36px;
 text-align: center;
 color: #201547;
}
.block-table__text h3 {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 24px;
 font-weight: 500;
 line-height: 36px;
 letter-spacing: -0.01em;
 text-align: center;
 color: #201547;
}
.block-table__link {
 color: #307fe2;
 text-decoration: none;
}

.block-footer {
 background: #201547;
}
.block-footer__container {
 border-bottom: 1px solid #fff;
 padding: 33px 30px;
 display: flex;
 gap: 30px;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
}
.block-footer__container ul {
 display: flex;
 align-items: center;
 gap: 15px;
 list-style: none;
 padding: 0;
 margin: 0;
}
.block-footer__container ul li {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 12px;
 font-weight: 700;
 line-height: 15px;
 text-align: left;
 color: #fff;
 position: relative;
}
.block-footer__container-links ul li:before {
 content: '';
 border-right: 1px solid #fff;
 position: absolute;
 right: -7px;
 width: 1px;
 height: 100%;
}
.block-footer__container-links ul li:last-child:before {
 content: none;
}
.block-footer__container ul li a {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 12px;
 font-weight: 700;
 line-height: 15px;
 text-align: left;
 color: #fff;
}
.block-footer__container p {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 12px;
 font-weight: 400;
 line-height: 15px;
 text-align: center;
 color: #fff;
 width: 100%;
 margin: 0;
}
.block-footer__container p a {
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 12px;
 font-weight: 400;
 line-height: 15px;
 text-align: center;
 color: #fff;
 width: 100%;
 margin: 0;
 padding: 0;
 display: block;
}

/* Video */
.block-video {
 margin-top: 64px;
 margin-bottom: 64px;
}

.video-container {
 position: relative;
 width: 100%;
 max-width: 800px;
 margin: 0 auto;
 overflow: hidden;
}

/* Block Swiper */
.block-swiper {
 background: linear-gradient(
  180deg,
  rgba(39, 13, 129, 1) 0%,
  rgba(48, 127, 226, 1) 100%
 );

 margin-top: 32px;
}
.slide {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100%;
}

/* Each section takes up 50% of the width */
.slide-image,
.slide-text {
 width: 100%;
 margin: 16px;
}

.slide-image img {
 max-width: 100%;
 height: auto;
}

.slide-text {
 color: #fff;
 font-family: 'Century Gothic', Arial, sans-serif;
 font-weight: 400;
 font-size: 20px;
 text-align: left;
 padding: 20px;
 text-align: center;
}

.slide-text__title {
 font-size: 28px;
 font-weight: 700;
 margin-bottom: 10px;
}
swiper-container {
 width: 100%;
 height: fit-content;
}

swiper-slide {
 text-align: center;
 font-size: 18px;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Popup container */
.popup {
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(8px);
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 padding: 25px;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Popup content */
.popup-content {
 align-self: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 background-color: #f1f1f1;
 padding: 20px;
 width: 850px;
 height: auto;
 margin: 15% auto; /* Center the popup */
 position: relative;
 border-radius: 10px;
 text-align: center;
 gap: 24px;
 border-radius: 24px;
 border: 8px solid white;
}
.popup-content p {
 color: #2e008b;
 font-size: 18px;
 font-weight: 700;
 border-radius: 10px;
 text-align: center;
}
.popup-logo {
 margin: 12px 12px 0 0;
}
.popup-logo img {
 margin: 12px 12px 0 0;
 width: 50%;
}

.close-button {
 position: absolute;
 top: 12px;
 right: 20px;
 font-size: 24px;
 cursor: pointer;
}
.popup-buttons {
 display: flex;
 flex-direction: column;
 gap: 24px;
 width: 100%;
}
.popup-btn {
 background: #bb16a3;
 font-family: 'Century Gothic', Arial, sans-serif;
 font-size: 16px;
 font-weight: 700;
 line-height: 24px;
 letter-spacing: -0.01em;
 text-align: center;
 padding: 10px 20px;
 border-radius: 8px;
 border: 0;
 outline: 0;
 transition: all 0.2s ease-in-out;
 color: #fff;
 cursor: pointer;
 margin: 0 auto;
 display: block;
 width: 100%;
}

@media (min-width: 450px) {
 .block-swiper {
  padding: 22px 30px;
 }
 .slide-text {
  padding: 20px;
 }
}
@media (min-width: 768px) {
 .container {
  width: 750px;
 }

 .block-header__container {
  padding: 22px 80px;
 }
 .block-footer__container {
  padding: 33px 80px;
 }
 .block-hero__text {
  font-family: 'Century Gothic', Arial, sans-serif;
  text-align: center;
  position: relative;
  font-size: 22px;
  line-height: 30px;
  color: #201547;
  margin: 0 0 36px 0;
 }
 .marketing-control {
  font-size: 20px;
 }
 .popup-logo img {
  max-width: 30%;
 }
}
@media (min-width: 992px) {
 .container {
  width: 930px;
 }
 .container-large {
  width: 1020px;
  padding-right: 30px;
  padding-left: 30px;
 }

 .block-hero__text {
  margin: 24px 0 24px 0;
 }
 .block-form__form-columns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
 }
 .block-form__form-columns p {
  width: 100%;
 }
 .block-footer__container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
 }
 .slide {
  flex-direction: row;
  justify-content: space-between;
 }
 swiper-container {
  width: 100%;
  height: 500px;
 }
 .slide-image,
 .slide-text {
  width: 50%;
 }

 .slide-text {
  text-align: left;
 }
 .popup-buttons {
  flex-direction: row;
  gap: 24px;
 }
 .popup-btn {
  width: 100%;
 }
 .popup-content {
  padding: 40px;
  margin: 15% auto; /* Center the popup */
  gap: 48px;
  border-radius: 24px;
 }
}
@media (min-width: 1160px) {
 .container-large {
  width: 1120px;
 }
}