@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

*{
  box-sizing: border-box;
}
body{
  direction: ltr;
  font-family: 'Hind Madurai', sans-serif !important;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
:root {
  --white-light: #fff;
  --dark-gray: #000;

  --backgroundMain-1: #3b8a8a;
  --backgroundMain-2: #543573;
  --backgroundMain-3: #0e220f;
  --backgroundMain-4: #2A003F;
  --backgroundMain-5: #302b63;

  --colorMain-1: #00FFFF;
  --colorMain-2: #C084FC;
  --colorMain-3: #a7bf90;
  --colorMain-4: #9e409e;
  --colorMain-5: #E0E0E0;

  --background: var(--backgroundMain-1);
  --color: var(--colorMain-1);
}
.wrapperMain {
  width: auto;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 480px) {
  .wrapperMain{
  max-width: 450px;
  }
}
@media screen and (min-width: 575px){
  .wrapperMain{
    max-width: 540px;
  }
}
@media screen and (min-width: 768px) {
  .wrapperMain{
  max-width: 730px;
  }
}
@media screen and (min-width: 992px) {
  .wrapperMain{
    max-width: 960px;
  }
}
@media screen and (min-width: 1200px){
  .wrapperMain{
    max-width: 1170px;
    }
}
@media (min-width: 1400px){
  .wrapperMain{
    max-width: 1274px;
  }
}
a {
  cursor: pointer;
  text-decoration: none;
}
button {
  cursor: pointer;
}
.flexColumn {
  display: flex;
  flex-direction: column-reverse;
}
.flexRow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 27px;
}
.paddingMain {
  position: relative;
  padding: 93px 0;
}
.titleMain {
  color: var(--white-light);
  position: relative;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 27px 0;
}
.opacityBgMain1 {
  background: url(galleryarchive/back/opacity_bg-069cd2f4e1b642.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.opacityBgMain2 {
  background: url(galleryarchive/back/opacity_bg-169cd2f4e1b654.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bgMainGlobal1 {
  background: var(--background);
}
.bgMainGlobal2 {
  background: linear-gradient(135deg, #00FFFF 0%, #C084FC 20%, #a7bf90 50%, #9e409e 75%, #339b6b 100%);
}
.overlay {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); 
  pointer-events: none;
}
.hero {
  direction: initial;
  width: 100%;
  height: 100vh;
  text-align: center;
  color: #CCC;
  position: relative;
  text-transform: uppercase;
  font-family: 'Amatic SC', sans-serif;
  letter-spacing: 17.5px;
}
.hero-one {
  top: 0;
  position: absolute;
  width: 60%;
  background-image: url(galleryarchive/back/bg-dark-069cd2f4e1b5ab.jpg);
  height: 100vh;
  clip-path: polygon(0 0, 60vw 0, 40vw 100vh, 0 100vh);
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-two {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  background-image: url(galleryarchive/back/bg-dark-169cd2f4e1b5c4.jpg);
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.header-title {
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-primary {
  color: var(--white-light);
  padding:25px 0;
  font-size: 33px;
  display: block;
  font-weight: 800;
}
.header-sub {
  font-size: 26px;
}
.headerSvg svg:hover {
  fill: var(--color) !important;
}
.header-primary:hover {
  color: var(--color);
}
.benefitMain-img {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0.8;
  height: 266px;
  object-fit: contain;
}
.benefitMain-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 27px;
  padding: 53px;
  max-width: 1400px;
  margin: auto;
  position: relative;
}
.benefitMain-card {
  height: fit-content;
  background: linear-gradient(135deg, 
  #00FFFF 0%, 
  #C084FC 20%, 
  #a7bf90 50%, 
  #9e409e 75%, 
  #339b6b 100%);
  border: 2px solid #ddd;
  border-radius: 15px;
  padding: 25px;
  gap:25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  justify-content: space-around;
}
.benefitMain-icon img {
  height:71px;
  width: 100%;
  object-fit: contain;
}
.benefitMain-card1 {
  grid-column: 1 / span 4;
  grid-row: 1;
}
.benefitMain-card2 {
  grid-column: 5 / span 5;
  grid-row: 1;
  margin-top: 53px;
}
.benefitMain-card3 {
  grid-column: 3 / span 5;
  grid-row: 2;
  margin-top: 53px;
}
.benefitMain-card4 {
  grid-column: 9 / span 4;
  grid-row: 2;
  margin-top: 15px;
}
.benefitMain-text {
  color: var(--dark-gray);
  text-align: start;
}
@media (max-width: 991px) {
  .benefitMain-grid {
   display: flex;
   flex-direction: column;
  }
  .benefitMain-card { 
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .benefitMain-card {
    margin-top: 15px !important;
    padding: 15px;
  }
}
.content-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 9px;
}
.news-card {
  margin: 9px;
  position: relative;
  height: 266px;
  overflow: hidden;
  border-radius: 15px;
  flex: 1;
  min-width: 290px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);
  z-index: 0;
}
.news-card__card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.news-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  z-index: -1;
}
.news-card__text-wrapper {
  position: absolute;
  color: var(--white-light);
  bottom: 0rem;
  padding: 14px;
  transition: background-color 1.5s ease;
}
.news-card__title {
  transition: color 1s ease;
  margin-bottom: .5rem;
}
.news-card__details-wrapper {
  max-height: 0;
  opacity: 0;
  transition: max-height 1.5s ease, opacity 1s ease;
}
.news-card__excerpt {
  font-weight: 400;
  -webkit-line-clamp: 2;
	line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden
}
@media (min-width: 900px) {
  .news-card {
    height: 20rem;
  }
  .news-card:hover .news-card__details-wrapper {
    max-height: 20rem;
    opacity: 1;
  }
  .news-card:hover .news-card__text-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .news-card:hover .news-card__title {
    color: var(--color);
  }
  .news-card:hover .news-card__image {
    transform: scale(1.2);
    z-index: -1;
  }
}
.abMain {
  flex-direction: row;
  min-height: 40vh;
  display: flex;
  flex-wrap: wrap;
  }
.imgMainBg {
  flex: 1;
  background: url(galleryarchive/back/bg-dark-269cd2f4e1b5d9.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 40vh;
}
.black-bgMain {
  flex: 1;
  background: linear-gradient(to right, 
  #00FFFF, 
  #a7bf90, 
  #339b6b);
  color: var(--white-light);
  display: flex;
  align-items: center;
  justify-content: center;
} 
.abMainBlok {
  position: relative;
  padding: 34px;
}
.abMainBlok-text {
  color: var(--dark-gray);
}
@media (max-width: 768px) {
  .abMain {
    flex-direction: column;
  }
  .imgMainBg1,
  .black-bgMain {
    flex: none;
    width: 100%;
  } 
}
.formaMain {
  flex-direction: row-reverse;
  min-height: 40vh;
  display: flex;
  flex-wrap: wrap;
  }
.formaMainBg {
  flex: 1;
  background: url(galleryarchive/back/bg-dark-369cd2f4e1b5ed.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 40vh;
}
.forma-bgMain {
  flex: 1;
  background: linear-gradient(to left, 
  #00FFFF, 
  #a7bf90, 
  #339b6b);
  color: var(--white-light);
  display: flex;
  align-items: center;
  justify-content: center;
} 
.forma-Blok {
  padding: 34px;
}
@media (max-width: 768px) {
  .formaMain {
    flex-direction: column;
  }
  .formaMainBg,
  .forma-bgMain {
    flex: none;
    width: 100%;
  } 
}
.formaMainBlok-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.formaMainBlok-chek {
  display: flex;
  flex-direction: column;
  color: var(--white-light);
  gap: 15px;
}
.formaMainBlok-chek-row {
  display: flex;
  flex-direction: row;
  gap: 14px;
}
.formaMainBlok-chek-row a {
  color: var(--white-light);
}
.formaMainBlok-box .input-control_component--item {
 background: var(--background);
 color: var(--white-light);
 padding: 15px;
 border: 2px solid #ddd;
 border-radius: 15px;
}
.formaMainBlok-box .textarea-control_component--item {
  background: var(--background);
  color: var(--white-light);
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 15px;
}
.formaMainBlok-box .input-control_component--item::placeholder {
  color: var(--white-light);
}
.formaMainBlok-box .textarea-control_component--item::placeholder {
  color: var(--white-light);
}
.gridBlokMain {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
      "one two four"
      "one two five"
      "one three six";
  height: 80vh; 
  gap: 0;
}
.gridBlok-block {
  border: 1px solid var(--color);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.gridBlok-block-1 {
  grid-area: one;
}
.gridBlok-block-2 {
  grid-area: two;
}
.gridBlok-block-3 {
  grid-area: three;
}
.gridBlok-block-4 {
  grid-area: four;
}
.gridBlok-block-5 {
  grid-area: five;
}
.gridBlok-block-6 {
  grid-area: six;
}
.gridBlok-block-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gridBlok-block-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35); 
}
.gridBlok-block-title {
  z-index: 3;
  color: var(--white-light);
  position: relative;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 26px;
  padding: 27px;
}
.gridBlok-block:hover .gridBlok-block-title {
  color: var(--color);
}
@media (max-width: 767px) {
  .gridBlokMain {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, auto);
      grid-template-areas: 
          "one"
          "two"
          "three"
          "four"
          "five"
          "six";
      height: auto;
  }
  .gridBlok-block {
      min-height: 250px;
  }
}
.stepMain { 
  display: flex; 
  color: var(--white-light);
  gap: 15px;
  padding: 25px 9px;
}
.stepMainBlok {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column-reverse;
  gap: 80px;
}
.stepMainBlok:nth-child(2) {
  flex-direction:column;
}
.stepMainBlok:nth-child(4) {
  flex-direction:column;
}
.stepMainBlok-img {
  object-fit: contain;
  width:133px;
  height: 133px;
}
.stepMainBlok-text {
  text-align: start;
}
.videoMain {
  flex: 1;
  width: 100%;
}
.videoMain video {
  height: 540px;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.tabelMain {
  flex: 1;
  width: 100%;
  position: relative;
}
.tabelMain-box {
  height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: var(--background);
  padding: 27px;
  gap: 14px;
  border-radius: 15px;
}
.tabelMainBlok {
  flex: 1;
  display: flex;
  color: var(--white-light);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0px solid var(--white-light);
  padding: 9px;
}
.tabelMainBlok2 {
  border: none;
}
.tabelMainBlok3 {
  display: flex;
}
.tabelMainBlok-img img {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  object-fit: cover;
}
.footerMain {
  gap: 27px;
}
.footerBlok {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--white-light);
  align-items: center;
  gap: 15px;
}
.footerBlok-title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 14px;
}
.footerBlok-title img {
  height:79px;
  width: 100%;
  object-fit: contain;
}
.footerBlok-title span {
  color: var(--white-light);
}
.footerBlok-slog {
  display: block;
}
.footerBlok a {
  color: var(--white-light);
}
.footerBlok a:hover {
  opacity: 0.8;
}
.disclaimMaim {
  border: 2px solid #ddd;
  padding: 24px;
}
.disclaimMaimBlok {
  flex: 2;
  width: 100%;
}
.disclaimMaimBlok-img {
  width: 100%;
  flex: 1;
}
.disclaimMaimBlok-img img {
  height:79px;
  width: 100%;
  object-fit: contain;
}
.copyrightMain {
  margin-top:34px;
  text-align: center;
  color: var(--white-light);
}
.copyrightMain a {
  color: var(--white-light);
}
.privacytiMain {
  color: var(--white-light);
}
.privacytiMain li {
  list-style: disc;
  padding: 9px 0;
}
.privacytiMain a {
  color: var(--white-light);
}
.pageMain {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.pageMain-blok {
  gap: 25px;
}
.pageMain-img {
  height:368px;
  width: 100%;
  object-fit: contain;
}
.pageMain-text {
  color: var(--white-light);
}
.pageMain-text li {
  list-style: disc;
  padding: 9px 0;
}
.pageMain-ifram {
  width: 100%;
}
.pageMain-ifram iframe {
  width: 100%;
  height: 100vh;
}


.formaMainBlok2-input {
  background: var(--background);
  color: var(--white-light);
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 15px;
 }
 .formaMainBlok2-input::placeholder {
   color: var(--white-light);
 }
 .formaMainBlok2 {
  width: 320px;
 }
.contaktMain {
  gap: 15px;
}
.contaktMain-blok {
  background: var(--background);
  color: var(--white-light);
  padding: 15px;
  border: 2px solid #ddd;
  border-radius: 15px;
}
.contaktMain-blok-info {
  word-break: break-all;
  color: var(--white-light);
}
.abMainBlok2 {
  padding: 0;
  min-width: 320px;
}
.gridBlokMainBlok {
  display: block;
}
.cardBlok {
  display: none;
}
.submit-4 {
  display: inline-block;
  padding: 15px;
  font-weight: 700;
  color: var(--dark-gray);
  border: 2px solid var(--background);
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}
.submit-4:hover {
  color: var(--white-light);
}
.submit-4::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: var(--background);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}
.submit-4:hover::before {
 transform: translateX(0);
}
.zoom-animation {
  animation: zoomInOut 2s ease-in-out infinite;
}
@keyframes zoomInOut {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);  
  }
  100% {
    transform: scale(1);  
  }
}
.wobble-animation {
  animation: wobble 0.8s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@media(max-width: 1200px) {
  .gridBlok-block-title {
    font-size: 21px;
  }
}
@media(max-width: 992px) {
  .gridBlok-block-title {
    font-size:  18px;
  }
  .stepMain {
    flex-direction: column;
  }
  .stepMainBlok {
    flex-direction: row;
  }
  .stepMainBlok:nth-child(2) {
    flex-direction: row-reverse;
  }
  .stepMainBlok:nth-child(4) {
    flex-direction: row-reverse;
  }
}
@media(max-width: 767px) {
  .tabelMain-box {
    height: auto;
  }
  .stepMain {
    gap: 25px;
  }
  .flexRow {
    flex-direction: column;
  }
  .benefitMain-img {
    display: none;
  }
  .formaMainBg {
    min-height: 20vh;
  }
  .imgMainBg {
    min-height: 20vh;
  }
  .gridBlok-block {
    justify-content: start;
  }
  .footerBlok {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footerBlok-slog {
    display: none;
  }
}
@media(max-width: 575px) {
  .titleMain {
    font-size: 20px;
  }
  .pageMain-img {
    height: auto;
  }
  .news-card__title {
    font-size: 20px;
  }
  .hero {
    letter-spacing: 10px;
  }
  .header-primary {
    font-size: 20px;
    letter-spacing: 0;
  }
  .header-sub {
    font-size: 18px;
    letter-spacing: 0;
  }
  .abMainBlok {
    padding: 0;
  }
  .stepMainBlok {
    flex-direction: column;
    gap:22px;
  }
  .stepMainBlok:nth-child(2) {
    flex-direction: column;
  }
  .stepMainBlok:nth-child(4) {
    flex-direction: column;
  }
  .benefitMain-grid {
    padding: 0;
  }
  .tabelMainBlok {
    flex-direction: column;
    gap: 9px;
  }
  .formaMainBlok2 {
    width: 100%;
  }
  .abMainBlok2 {
    width: 100%;
    min-width: 100%;
  }
}


.footer-logos {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 20px;
  padding: 20px;
  flex-direction: row;
  flex-wrap: wrap;

  a img {
    max-height: 50px;
    width: 100%;
    display: block;
    max-width: none;
    transition: 0.3s linear;
    
    &:hover,
    &:hover{
      transform: scale(0.96);
      opacity: 0.8;
    }
  }
}


#hero-1{
  display: none;
  background-color: #000;
  height: auto;
  padding: 10px 20px;

   span{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
   }
}