:root{
    --Dark-purple: #3A28DE;
    --Pure-white: #FAFBFF;
    --Light-white:#E8E9FD;
    --Light-grey:#B5B5B5;
    --Black: #0F0F1E;
    --Yellow: #FFE45E;
}

main{
  background:
  radial-gradient(circle at 0% 0%, rgb(58, 40, 222, 0.3), #0e0f1200 20%),
  radial-gradient(circle at 100% 35%, rgb(58, 40, 222, 0.18), #0e0f1200 20%),
  radial-gradient(circle at 0% 75%, rgb(58, 40, 222, 0.10), #0e0f1200 20%),
  radial-gradient(circle at 100% 0%, rgb(255, 228, 94, 0.3), #0e0f1200 10%),
  url(img/circle-background.png) no-repeat 70vw 30%,
  url(img/circle-background.png) no-repeat -15vw 60%;
}

/*Media screen*/

.img-hero{
  height: auto;
}
.benefit-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    margin: 40px 0px;
    gap: 24px;
}
.benefit-box{
    width: 33%;
    height: 265px;
    background-color: var(--Light-white);
    border-radius: 30px;
    padding: 34px;
    display: flex;
    flex-direction: column;
}


.services-t-row{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    margin-bottom: 44px;
}

.services-sub-t{
    max-width: 900px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0px;
  }
  

  .grid-item {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--Light-white);
    position: relative;
    height: 265px;
    border-radius: 30px;
    padding: 34px;
    text-align: left;
    overflow: hidden; /* Skrytie overflow, aby sa gradienty nezobrazovali mimo kontajnera */
  }
  
  .grid-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(at 92% 12%, hsla(48,100%,68%,0.2) 0px, transparent 50%),
      radial-gradient(at 10% 24%, hsla(235,98%,62%,0.3) 0px, transparent 50%);
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.5s ease; /* Pridaný prechod pre opacity */
  }
  
  .grid-item:hover::before {
    opacity: 1; /* Pri hover sa opacity mení na 1, aby sa zobrazilo pozadie */
  }
  

  .wide {
    grid-column: span 2;
  }
  
  .numbers {
    display: flex;
    width: max-content;
    border: 2px solid var(--Dark-purple);
    color: var(--Dark-purple);
    padding: 5px 19px;
    font-size: 20px;
    border-radius: 50px;
    font-weight: 600;
  }

  .caption{
    font-weight: 600;
    max-width: 100%;
    margin-top: 44px;
  }

.outer-circle{
  width: 1000px;
  height: 1000px;
  border: 2px solid var(--Light-white); /* Light border for the thin circle */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: end;
  padding-bottom: 40px;
  margin: auto;
  margin-bottom: 150px;
}


.cta-container{
    display: flex;
    flex-direction: column;
    width: 840px;
    height: 840px;
    border-radius:50vmax;
    background:radial-gradient(circle at center, rgba(58,40,222,0.1) 0%, rgba(58,40,222,0.1) 70%, rgba(200, 199, 207, 0) 100%),
    linear-gradient(to bottom, rgb(255, 228, 94, 0.5) 0%, rgb(255, 228, 94, 0.2) 50%, rgba(58,40,222,0.1) 100%);;
    justify-content: center;
    align-items: center;
}


.carousel-container {
  width: 100%;
  height: 700px; /* Nastavte podle potřeby */
  display: flex;
  justify-content: center;
  padding-top: 100px;
  overflow: hidden;
  position: relative;
}

.carousel {
  position:absolute;
  left: calc(50% - 150px);
  transform-origin: 150px 2500px;
  will-change: transform;
}

.carousel .wrapper {
  position: absolute;
  height: 100vh;
  transform-origin: 150px 2500px;
}

.carousel .wrapper:active {
  cursor: grabbing;
}



/* Rotace a barvy pro jednotlivé wrappery */
.carousel .wrapper:nth-child(0) { transform: rotate(0deg); }
.carousel .wrapper:nth-child(1) { transform: rotate(10deg); }
.carousel .wrapper:nth-child(2) { transform: rotate(20deg); }
.carousel .wrapper:nth-child(3) { transform: rotate(30deg); }
.carousel .wrapper:nth-child(4) { transform: rotate(40deg); }
.carousel .wrapper:nth-child(5) { transform: rotate(50deg); }
.carousel .wrapper:nth-child(6) { transform: rotate(60deg); }
.carousel .wrapper:nth-child(7) { transform: rotate(70deg); }
.carousel .wrapper:nth-child(8) { transform: rotate(80deg); }
.carousel .wrapper:nth-child(9) { transform: rotate(90deg); }
.carousel .wrapper:nth-child(10) { transform: rotate(100deg); }
.carousel .wrapper:nth-child(11) { transform: rotate(110deg); }
.carousel .wrapper:nth-child(12) { transform: rotate(120deg); }
.carousel .wrapper:nth-child(13) { transform: rotate(130deg); }
.carousel .wrapper:nth-child(14) { transform: rotate(140deg); }
.carousel .wrapper:nth-child(15) { transform: rotate(150deg); }
.carousel .wrapper:nth-child(16) { transform: rotate(160deg); }
.carousel .wrapper:nth-child(17) { transform: rotate(170deg); }
.carousel .wrapper:nth-child(18) { transform: rotate(180deg); }
.carousel .wrapper:nth-child(19) { transform: rotate(190deg); }
.carousel .wrapper:nth-child(20) { transform: rotate(200deg); }
.carousel .wrapper:nth-child(21) { transform: rotate(210deg); }
.carousel .wrapper:nth-child(22) { transform: rotate(220deg); }
.carousel .wrapper:nth-child(23) { transform: rotate(230deg); }
.carousel .wrapper:nth-child(24) { transform: rotate(240deg); }
.carousel .wrapper:nth-child(25) { transform: rotate(250deg); }
.carousel .wrapper:nth-child(26) { transform: rotate(260deg); }
.carousel .wrapper:nth-child(27) { transform: rotate(270deg); }
.carousel .wrapper:nth-child(28) { transform: rotate(280deg); }
.carousel .wrapper:nth-child(29) { transform: rotate(290deg); }
.carousel .wrapper:nth-child(30) { transform: rotate(300deg); }
.carousel .wrapper:nth-child(31) { transform: rotate(310deg); }
.carousel .wrapper:nth-child(32) { transform: rotate(320deg); }
.carousel .wrapper:nth-child(33) { transform: rotate(330deg); }
.carousel .wrapper:nth-child(34) { transform: rotate(340deg); }
.carousel .wrapper:nth-child(35) { transform: rotate(350deg); }
.carousel .wrapper:nth-child(36) { transform: rotate(360deg); }


.wrapper-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 380px;
  border-radius: 30px;
  padding: 30px;
  transition: opacity 0.5s ease;
  background-color: hsla(270,5%,92%,1);
}

.wrapper-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  background-color: hsla(270,5%,92%,1);
  background-image:
    radial-gradient(at 92% 12%, hsla(48,100%,68%,0.2) 0px, transparent 50%),
    radial-gradient(at 10% 24%, hsla(235,98%,62%,0.3) 0px, transparent 50%);
  opacity: 0;
  transition: opacity 1.2s ease;
}

.wrapper-content.special-bg::before {
  opacity: 1;
  background-image:
    radial-gradient(at 92% 12%, hsla(48,100%,68%,0.2) 0px, transparent 50%),
    radial-gradient(at 10% 24%, hsla(235,98%,62%,0.3) 0px, transparent 50%);
}

.wrapper-content > * {
  position: relative;
  z-index: 1;
}
.profile-row{
  display: flex;
  width: 100%;
  gap: 14px;
}
.profile-img{
  height: 45px;
  width: 45px;
}
.bio-container{
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
}
.name{
  line-height: normal;
}
.age{
  font-size: 14px;
  line-height: normal;
}
.ref-title{
  padding: 0px 26px;
}
.quo-container{
  display: flex;
  width: 100%;
  justify-content: end;
}
.reference{
  display: flex;
  flex: 1;
  flex-direction: column;
}
.ref-text{
  font-size: 21px;
  line-height: normal;
  text-align: left;
  margin-bottom: 10px;
}



@media only screen and (min-width: 1200px) and (max-width: 1440px) {
  .services-sub-t{
    max-width: 62vw;
  }

}

@media only screen and (min-width: 780px) and (max-width: 1200px) {
  .img-hero{
    height: 45vw;
  }
  .benefit-box{
    width: 33%;
    height: 250px;
}
.benefit-row{
  gap: 24px;
}
.services-sub-t{
  max-width: 60vw;
}
.outer-circle{
  width: 85vw;
  height: 85vw;
  border: 2px solid var(--Light-white); /* Light border for the thin circle */
  border-radius:50vmax;
  padding: 20px 20px;
  margin: auto;
  margin-bottom: 150px;
}
.cta-container{
  display: flex;
  flex-direction: column;
  width: 75vw;
  height: 75vw;
  aspect-ratio: 1/1;
  border-radius:50vmax;
  padding: 18px;
}
.grid-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 205px;
  padding: 24px;
  word-break: break-word;

}

}


@media only screen and (min-width: 480px) and (max-width: 780px) {
  .img-hero{
    height: 80vw;
  }
  .benefit-row{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
  .benefit-box{
    width: 100%;
    height: 190px;
}

  .services-t-row{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 100px;
}
.grid-container {
  display: grid;
  gap: 20px;
  padding: 0px;
  grid-template-columns: repeat(1,1fr);
}
.grid-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 205px;
  padding: 24px;
  word-break: break-word;

}
.wide {
  grid-column: unset;
}
.outer-circle{
  width: 100%;
  height: 800px;
  border: 2px solid var(--Light-white); /* Light border for the thin circle */
  border-radius:50vmax;
  padding: 20px 20px;
  margin: auto;
  margin-bottom: 150px;
}
.cta-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 700px;
  aspect-ratio: 1/1;
  border-radius:50vmax;
  padding: 18px;
}

}

@media only screen and (min-width: 300px) and (max-width: 480px) {

  main{
    background-image:
    radial-gradient(circle at 0% 0%, rgb(58, 40, 222, 0.3), #0e0f1200 10%),
    radial-gradient(circle at 100% 35%, rgb(58, 40, 222, 0.18), #0e0f1200 10%),
    radial-gradient(circle at 0% 75%, rgb(58, 40, 222, 0.10), #0e0f1200 20%),
    radial-gradient(circle at 100% 10%, rgb(255, 228, 94, 0.3), #0e0f1200 10%);
  }
  
  .img-hero{
    height: 80vw;
    margin-top: 30px;
  }

  .benefit-row{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}
  .benefit-box{
    width: 100%;
    height: 190px;
}

  .services-t-row{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 100px;
}
.grid-container {
  display: grid;
  gap: 20px;
  padding: 0px;
  grid-template-columns: repeat(1,1fr);
}
.grid-item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 205px;
  padding: 24px;
  word-break: break-word;

}

.wide {
  grid-column: unset;
}
.carousel {

  left: calc(52% - 150px);

}
.wrapper-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 290px;
  height: 360px;
  border-radius: 30px;
  padding: 30px;
  transition: opacity 0.5s ease;
  background-color: hsla(270,5%,92%,1);
}
.profile-img{
  height: 40px;
  width: 40px;
}
.age{
  font-size: 16px;
}.ref-text{
  font-size: 20px;

}
.outer-circle{
  width: 100%;
  height: 780px;
  border: 2px solid var(--Light-white); /* Light border for the thin circle */
  border-radius:50vmax;
 
  padding-bottom: 40px;
  margin: auto;
  margin-bottom: 150px;
}


.cta-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 700px;
    aspect-ratio: 1/1;
    border-radius:50vmax;
    padding: 18px;
}
.carousel-container {
  width: 100%;
  height: 500px; 

}
}