/*
Theme Name: IWV// Digitalagentur
Text Domain: IWV_Digitalagentur
Version: 2.2
Description: IWV// Digitalagentur
Author: Jimmie
*/

body {
	margin: 0;
}
a {
	text-decoration: none;
}
h4 {
	color: black;
}
.header-menu-item.active {
    border-bottom: #F3978A solid 3px;
}
.shopware-plugin-popup-background {
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.5s;
}
.showPopup {
  display: flex;
  opacity: 1;
  transition: 0.5s;
}
.shopware-plugin-popup {
  background-color: white;
  max-width: 80vw;
  max-height: 80vh;
  padding: 2vmax;
  border-radius: 24px;
}
.shopware-plugin-popup-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.shopware-plugin-popup-header {
  display: flex;
  align-items: center;
}
.shopware-plugin-popup-image {
  min-width: 100px;
  width: 20vw;
  max-width: 300px;
}
.shopware-plugin-popup-image img {
  width: 100%;
}
.shopware-plugin-popup-selection {
  display: flex;
  justify-items: center;
  justify-content: space-around;
  column-gap: 40px;
  flex-wrap: wrap;
  flex-direction: row;
}
.shopware-plugin-popup-option {
  width: 70%;
}
.shopware-plugin-popup-title {
  width: 100%;
  text-align: center;
}
.shopware-plugin-popup-title h3 {
  font-size: 2vmax;
  color: black;
  margin-block: 1rem;
}
.shopware-plugin-item-contaier h3 {
  font-size: 2vmax;
  color: black;
  margin-block: 1rem;
}
.shopware-plugin-popup-description {
  text-align: center;
}
.shopware-plugin-popup-description p {
  color: #008ccb;
  font-size: 1.75vmax;
  font-weight: 600;
}
.shopware-plugin-item-contaier {
  padding-top: 5%;
  padding-bottom: 10%;
}
.shopware-plugin-item {
  height: 100%;
  margin-inline: 10%;
}
.shopware-plugin-item div img {
  width: 100%;
}
.shopware-6-plugin-items div img {
  width: 100%;
}
.shopware-5-plugin-items div img {
  width: 100%;
}
.shopware-plugin-tag-s5 ,.shopware-plugin-tag-s6, .shopware-plugin-tag-app, .shopware-plugin-tag-cloud {
  color: black;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}
.closepopup {
  position: absolute;
  top: 0;
  font-size: 80px;
  color: #5d5d5d;
  right: 40px;
}
.closepopup:after{
  content: "\00d7"; /* This will render the 'X' */

}
/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.top-1\/2 {
  top: calc(1/2 * 100%);
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.container {
  width: 100%;
}
.m-\[2\%\] {
  margin: 2%;
}
.m-\[3\%\] {
  margin: 3%;
}
.m-\[5\%\] {
  margin: 5%;
}
.m-\[80px\] {
  margin: 80px;
}
.mx-auto {
  margin-inline: auto;
}
.mt-\[4\%\] {
  margin-top: 4%;
}
.mt-\[5\%\] {
  margin-top: 5%;
}
.mt-\[7\%\] {
  margin-top: 7%;
}
.mt-\[15\%\] {
  margin-top: 15%;
}
.mt-\[15px\] {
  margin-top: 15px;
}
.mt-\[20px\] {
  margin-top: 20px;
}
.mt-\[24px\] {
  margin-top: 24px;
}
.mt-\[25\%\] {
  margin-top: 25%;
}
.mt-\[32px\] {
  margin-top: 32px;
}
.mt-\[50px\] {
  margin-top: 50px;
}
.mt-\[64px\] {
  margin-top: 64px;
}
.mt-\[80px\] {
  margin-top: 80px;
}
.mt-\[150\%\] {
  margin-top: 150%;
}
.mr-\[5\%\] {
  margin-right: 5%;
}
.mr-\[10\%\] {
  margin-right: 10%;
}
.mr-\[15\%\] {
  margin-right: 15%;
}
.mr-\[40px\] {
  margin-right: 40px;
}
.mb-\[-18px\] {
  margin-bottom: -18px;
}
.mb-\[-150\%\] {
  margin-bottom: -150%;
}
.mb-\[5\%\] {
  margin-bottom: 5%;
}
.mb-\[8px\] {
  margin-bottom: 8px;
}
.mb-\[10\%\] {
  margin-bottom: 10%;
}
.mb-\[10px\] {
  margin-bottom: 10px;
}
.mb-\[12px\] {
  margin-bottom: 12px;
}
.mb-\[15px\] {
  margin-bottom: 15px;
}
.mb-\[20px\] {
  margin-bottom: 20px;
}
.mb-\[24px\] {
  margin-bottom: 24px;
}
.mb-\[30px\] {
  margin-bottom: 30px;
}
.mb-\[32px\] {
  margin-bottom: 32px;
}
.mb-\[40px\] {
  margin-bottom: 40px;
}
.mb-\[80px\] {
  margin-bottom: 80px;
}
.mb-\[100px\] {
  margin-bottom: 100px;
}
.ml-\[5\%\] {
  margin-left: 5%;
}
.ml-\[10\%\] {
  margin-left: 10%;
}
.ml-\[15\%\] {
  margin-left: 15%;
}
.ml-\[20px\] {
  margin-left: 20px;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.size-min {
  width: min-content;
  height: min-content;
}
.h-\[4px\] {
  height: 4px;
}
.h-\[20vh\] {
  height: 20vh;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[100\%\] {
  height: 100%;
}
.h-fit {
  height: fit-content;
}
.h-min {
  height: min-content;
}
.h-screen {
  height: 100vh;
}
.min-h-\[66px\] {
  min-height: 66px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[351px\] {
  min-height: 351px;
}
.w-\[33\.333\%\] {
  width: 33.333%;
}
.w-\[40\%\] {
  width: 40%;
}
.w-\[50\%\] {
  width: 50%;
}
.w-\[50vw\] {
  width: 50vw;
}
.w-\[60vw\] {
  width: 60vw;
}
.w-\[70vw\] {
  width: 70vw;
}
.w-\[75vw\] {
  width: 75vw;
}
.w-\[85vw\] {
  width: 85vw;
}
.w-\[90vw\] {
  width: 90vw;
}
.w-\[100vw\] {
  width: 100vw;
}
.w-\[121px\] {
  width: 121px;
}
.w-full {
  width: 100%;
}
.w-min {
  width: min-content;
}
.w-screen {
  width: 100vw;
}
.max-w-\[70\%\] {
  max-width: 70%;
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[125px\] {
  max-width: 125px;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[1100px\] {
  max-width: 1100px;
}
.min-w-\[50\%\] {
  min-width: 50%;
}
.min-w-\[80vw\] {
  min-width: 80vw;
}
.min-w-\[276px\] {
  min-width: 276px;
}
.min-w-\[300px\] {
  min-width: 300px;
}
.min-w-\[674px\] {
  min-width: 674px;
}
.flex-shrink {
  flex-shrink: 1;
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.resize-none {
  resize: none;
}
.list-\[circle\] {
  list-style-type: circle;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.content-center {
  align-content: center;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.justify-around {
  justify-content: space-around;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-evenly {
  justify-content: space-evenly;
}
.gap-\[10px\] {
  gap: 10px;
}
.gap-\[20px\] {
  gap: 20px;
}
.gap-\[30px\] {
  gap: 30px;
}
.gap-x-\[20px\] {
  column-gap: 20px;
}
.self-center {
  align-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[25px\] {
  border-radius: 25px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.bg-\[\#2E9EF5\] {
  background-color: #2E9EF5;
}
.bg-\[\#00000080\] {
  background-color: #00000080;
}
.bg-\[\#69727d\] {
  background-color: #69727d;
}
.bg-\[\#FE0F0F\] {
  background-color: #FE0F0F;
}
.bg-\[\#f5f5f5\] {
  background-color: #f5f5f5;
}
.bg-transparent {
  background-color: transparent;
}
.bg-black {
	background-color: black;
}
.bg-white {
	background-color: white;
}
.bg-cover {
  background-size: cover;
}
.p-\[25px\] {
  padding: 25px;
}
.px-\[5\%\] {
  padding-inline: 5%;
}
.pt-\[2\%\] {
  padding-top: 2%;
}
.pt-\[5\%\] {
  padding-top: 5%;
}
.pt-\[10\%\] {
  padding-top: 10%;
}
.pt-\[10px\] {
  padding-top: 10px;
}
.pt-\[40px\] {
  padding-top: 40px;
}
.pb-\[10\%\] {
  padding-bottom: 10%;
}
.pb-\[40px\] {
  padding-bottom: 40px;
}
.pb-\[100px\] {
  padding-bottom: 100px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.align-middle {
  vertical-align: middle;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[36px\] {
  font-size: 36px;
}
.text-4xl {
  font-size: 36px;
}
.text-\[45px\] {
  font-size: 45px;
}
.text-\[55px\] {
  font-size: 55px;
}
.text-\[60px\] {
  font-size: 60px;
}
.text-\[80px\] {
  font-size: 80px;
}
.text-\[1vw\] {
  font-size: 1vw;
}
.text-\[1\.5vw\] {
  font-size: 1.5vw;
}
.text-\[2vw\] {
  font-size: 2vw;
}
.font-light {
  font-weight: 300;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.leading-\[30px\] {
  --tw-leading: 30px;
  line-height: 30px;
}
.leading-\[34px\] {
  --tw-leading: 34px;
  line-height: 34px;
}
.leading-\[40px\] {
  --tw-leading: 40px;
  line-height: 40px;
}
.leading-\[53px\] {
  --tw-leading: 53px;
  line-height: 53px;
}
.leading-\[63px\] {
  --tw-leading: 63px;
  line-height: 63px;
}
.text-\[\#2B5CFD\] {
  color: #2B5CFD;
}
.text-\[\#2b5cfd\] {
  color: #2b5cfd;
}
.text-\[\#5b5b5b\] {
  color: #5b5b5b;
}
.text-\[\#6EAF10\] {
  color: #6EAF10;
}
.text-\[\#7a7a7a\] {
  color: #7a7a7a;
}
.text-\[\#008ccb\] {
  color: #008ccb;
}
.text-\[\#64728f\] {
  color: #64728f;
}
.text-\[\#CEC1C1\] {
  color: #CEC1C1;
}
.text-white {
	color: white;
}
.text-black {
	color: black;
}
.underline {
  text-decoration-line: underline;
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.duration-200 {
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.focus\:ring-0 {
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
.focus\:outline-none {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
* {
  font-family: 'Overpass', sans-serif;
}
h1, h2, h3, h4 p {
  transition: 0.5s;
}
.header-menu-item {
  border-bottom: transparent solid 3px;
  transition: 0.5s;
}
.header-menu-item:hover {
  border-bottom: #F3978A solid 3px;
  transition: 0.5s;
}
.header-menu-item.active {
  border-bottom: #F3978A solid 3px;
}
.footer .contact-button {
  min-width: 142px;
}
.footer .contact-info {
  width: fit-content;
}
.plugin-slides .plugin-slide {
  max-width: 240px;
  min-height: 550px;
}
.plugin-slider {
  position: relative;
}
.plugin-slides {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.plugin-track {
  display: flex;
}
.plugin-slider .plugin-slide {
  min-width: 240px;
  min-height: 300px;
  flex-shrink: 0;
  margin-right: 12px;
  margin-left: 12px;
}
.plugin-slider .plugin-slide .clone {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.plugin-slider button {
  position: absolute;
  top: 50%;
  z-index: 10;
  color: white;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}
.prev {
  left: -40px;
  transform: translateY(-50%) rotate(180deg);
}
.next {
  right: -40px;
  transform: translateY(-50%) rotate(0deg);
}
.iwv-nl-optin-wrap>[for="iwv-nl-subscribe"] {
	color: #fff;
}
@media (max-width: 1024px) {
  .plugin-slider .plugin-slide {
    margin-left: 8px;
    margin-right: 8px;
  }
}
@media (max-width: 768px) {
  .plugin-slider .plugin-slide {
    margin-left: 6px;
    margin-right: 6px;
  }
}
.review-slider .review-slide {
  position: absolute;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
#slider-nav>button:hover {
  border-color: #FF7F7F;
}
.review-slider-button-inside {
  background-color: #FF7F7F;
  width: 8px;
  height: 8px;
  border-radius: 999999px;
}
.burger a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.burger a span {
  display: block;
  height: 5px;
  width: 40px;
  background-color: #F3978A;
}
.burger-menu {
  position: absolute;
  top: 0;
}
.burger-background {
  position: fixed;
  height: 100vh;
  width: 0vw;
  background-color: rgba(0, 0, 0, 0.25);
  transition: 2s;
}
.burger-menu.active .burger-background {
  width: 100vw;
}
.burger-container {
  position: fixed;
  width: 30vw;
  height: 100vh;
  min-width: 240px;
  max-width: 360px;
  background-color: white;
  transform: translatex(-100vw);
  transition: 1.5s;
}
.burger-menu.active .burger-container {
  transform: translatex(0vw);
}
.burger-container > a {
  position: relative;
  top: 24px;
  margin: 8px 10%;
}
@media (max-width:900px) {
  .ecommerce section, .ki-loesungen section, .datenschutz section , .impressum section , .ueber-uns section {
    width: 90vw;
    transition: 0.5s;
  }
}
.ecommerce section, .ki-loesungen section, .datenschutz section , .impressum section , .ueber-uns section {
  transition: 0.5s;
}
@media (max-width:850px) {
  h1 {
    font-size: 60px !important;
  }
  h2 {
    font-size: 40px !important;
    line-height: 66px !important;
  }
  .text-6xl {
    font-size: 23px !important;
    line-height: 50px !important;
  }
  .ecommerce h1 , .ki-loesungen h1 , .datenschutz h1 , .impressum h1 , .ueber-uns h1 {
    font-size: 45px !important;
  }
  .ecommerce h2 , .ki-loesungen h2 , .datenschutz h2 , .impressum h2 , .ueber-uns h2 {
    font-size: 35px !important;
  }
  .review-slide h3 {
    font-size: 25px !important;
  }
}
@media (max-width:750px) {
  .premium-plugins-div h4 {
    font-size: 17px !important;
    transition: 0.5s;
  }
}
.premium-plugins-div h4 {
  transition: 0.5s;
}
@media (max-width:650px) {
  h1 {
    font-size: 40px !important;
  }
  .ecommerce h1 , .ki-loesungen h1 , .datenschutz h1 , .impressum h1 , .ueber-uns h1 {
    font-size: 35px !important;
  }
  .ecommerce h2 , .ki-loesungen h2 , .datenschutz h2 , .impressum h2 , .ueber-uns h2 {
    font-size: 25px !important;
    line-height: 50px !important;
  }
  .review-slide h3 {
    font-size: 20px !important;
  }
}
@media (max-width: 1000px) {
  .card {
    flex-direction: column !important;
    align-items: center !important;
  }
  .card > div {
    width: 80% !important;
    max-width: 500px;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .review-slide {
    padding: 1rem;
  }
  .review-slide h3 {
    font-size: 24px !important;
  }
  .review-slide p {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  .premium-plugins-div {
    flex-direction: column !important;
    align-items: center;
    gap: 20px;
    width: 70vw !important;
  }
  .premium-plugins-div > a {
    width: 100%;
    max-width: 400px;
  }
  .premium-plugins-div > a > div {
    justify-content: center !important;
    text-align: center;
    gap: 15px;
  }
  .premium-plugins-div h4 {
    width: auto !important;
    font-size: 18px !important;
  }
  .premium-plugins-div img {
    max-width: 120px !important;
  }
}
@media (min-width:900px) {
  .header .menu-items {
    display: flex;
  }
  .header .burger {
    display: none;
  }
}
@media (max-width:899px) {
  .header .menu-items {
    display: none;
  }
  .header .burger {
    display: flex;
  }
}
.contact-input, .contact-select, .contact-textarea {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.contact-input::placeholder, .contact-textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.contact-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.contact-select:focus {
  color: white;
}
.contact-select option {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 2px 0;
}
.contact-select option:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.contact-select option:checked, .contact-select option:selected {
  background-color: rgba(255, 255, 255, 0.25);
}
.dropdown-options {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.dropdown-options .option:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.contact-select::-webkit-scrollbar {
  width: 8px;
}
.contact-select::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.contact-select::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}
.contact-input:focus, .contact-select:focus, .contact-textarea:focus {
  border-color: white;
  box-shadow: 0 0 0 1px white;
}
input[type="checkbox"] {
  appearance: none;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-color: white;
  border-color: white;
}
input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-weight: bold;
  font-size: 14px;
}
.error-message {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.error-message.show {
  opacity: 1;
}
.card {
  overflow-wrap: break-word;
}
.card > div > div {
  overflow-wrap: break-word;
}
.card h3, .card p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.review-slider-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}
.review-slider-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
}
.review-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s ease-in-out;
}
.review-slide.active {
  opacity: 1;
  transform: translateX(0);
}
.review-slide.prev {
  transform: translateX(-100%);
}
.review-slide h3 {
  margin-top: 1rem;
  max-width: 700px;
  line-height: 1.4;
}
.review-dot {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-dot.active {
  border-color: #FF7F7F;
  background-color: #FF7F7F;
}
.review-dot:hover {
  border-color: #FF7F7F;
  background-color: rgba(255, 127, 127, 0.3);
}
.dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF7F7F;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.review-dot.active .dot-inner {
  opacity: 0;
}
.review-dot:not(.active) .dot-inner {
  opacity: 0;
}
.review-dot:hover:not(.active) .dot-inner {
  opacity: 0.7;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}