:where([class^="ri-"])::before {
     content: "\f3c2";
 }


 html,
 body {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     position: relative;
 }

 .performance-deferred {
     content-visibility: auto;
     contain-intrinsic-size: auto 800px;
 }

 dialog:not([open]) {
     display: none;
 }

 @media (max-width: 1279px) {
     .w-full.mx-5 {
         width: calc(100% - 2.5rem);
     }
 }

 .hero-section,
 .region-advantages,
 .region-advantages-slider > .relative,
 .region-advantages-slider .categories-slider {
     max-width: 100%;
     overflow-x: hidden;
 }

 .region-advantages-slider {
     max-width: 80rem;
     overflow-x: hidden;
 }

 @media (min-width: 1376px) {
     .region-advantages-slider {
         overflow-x: visible;
     }
 }

 @media (min-width: 1280px) and (max-width: 1375.98px) {
     .region-advantages-slider .categories-prev {
         left: 0.5rem;
     }

     .region-advantages-slider .categories-next {
         right: 0.5rem;
     }
 }

 .region-advantages {
     width: 100%;
     max-width: 100vw;
     contain: paint;
 }

 .region-advantages-slider .categories-slider {
     contain: paint;
 }

 .form-input:focus {
     outline: none;
     border-color: #3B82F6;
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }

 .form-card {
     backdrop-filter: blur(8px);
     background-color: rgba(255, 255, 255, 0.9);
 }

 .custom-table th,
 .custom-table td {
     padding: 1rem;
     text-align: left;
 }

 .custom-table tr {
     border-bottom: 1px solid #e5e7eb;
 }

 .custom-table tr:last-child {
     border-bottom: none;
 }

 .custom-switch {
     position: relative;
     display: inline-block;
     width: 48px;
     height: 24px;
 }

 .custom-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 24px;
 }

 .slider:before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 3px;
     bottom: 3px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked+.slider {
     background-color: #3b82f6;
 }

 input:checked+.slider:before {
     transform: translateX(24px);
 }

 .testimonial-slider {
     overflow: hidden;
     position: relative;
 }

 .testimonial-track {
     display: flex;
     transition: transform 0.5s ease;
 }

 .testimonial-slide {
     flex: 0 0 100%;
 }

 .testimonial-dots {
     display: flex;
     justify-content: center;
     margin-top: 1rem;
 }

 .testimonial-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: #d1d5db;
     margin: 0 5px;
     cursor: pointer;
 }

 .testimonial-dot.active {
     background-color: #3b82f6;
 }

 .star-rating {
     color: #fbbf24;
 }

 /* Дополнительные стили для крестика (Tailwind не включает кросс-иконки) */
 .close-button::before,
 .close-button::after {
     content: '';
     position: absolute;
     width: 2px;
     height: 14px;
     background-color: #94a3b8;
     border-radius: 2px;
 }

 .close-button::before {
     transform: rotate(45deg);
 }

 .close-button::after {
     transform: rotate(-45deg);
 }

 .blinking-cursor {
     font-weight: 300;
     font-size: inherit;
     animation: blink 1s step-start infinite;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 .typewriter-result {
     /* opacity:0 is set initially in HTML, animation handles it */
     animation: typewriter-result-animation 5s ease-in forwards;
     animation-delay: 150ms;
     /* This delay means it starts after its class is added */
 }

 @keyframes typewriter-result-animation {
     0% {
         transform: scale(0);
         opacity: 0;
     }

     20% {
         transform: scale(1);
         opacity: 1;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }


 @keyframes changeColor {
     0% {
         background-position: 0% 0%;
     }

     25% {
         background-position: 50% 25%;
     }

     50% {
         background-position: 100% 50%;
     }

     75% {
         background-position: 50% 25%;
     }

     100% {
         background-position: 0% 0%;
     }

 }

 @keyframes text-color-change {
     0% {
         color: #f09400;
     }

     50% {
         color: #5de3ff;
     }

     100% {
         color: #f09400;
     }
 }