@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

:root { --font-body:  "Mulish", sans-serif; 
        --bg-black: hsl(27,19%,11%);
      --card-b: 30 30% 95%;
    }

*,
:before,
:after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}
*,
:before,
:after {
  box-sizing:border-box;
  border-width:0;
  border-style:solid;
  border-color:#e5e7eb
}
:before,
:after {
  --tw-content: ""
}
html,
:host {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  font-family:DM Sans,system-ui,sans-serif;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent
}
body {
  margin:0;
  line-height:inherit
}
hr {
  height:0;
  color:inherit;
  border-top-width:1px
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:inherit;
  font-weight: 500;
  font-family:"Roboto Serif", serif;
}

.font-serif {
    font-family: "Roboto Serif", serif;
}

.text-white\/70 {
    color: #ffffffb3;
}
.hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.bg-card {
    background-color: hsl(var(--card-b));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
    color: hsl(var(--primary-foreground));
}
.data-\[state\=checked\]\:bg-primary[data-state=checked] {
    background-color: hsl(var(--primary));
}
input,textarea,select{font-family:'Mulish',sans-serif;font-size:14px;padding:10px 14px;border:1px solid hsl(30,12%,86%);border-radius:10px;background:hsl(30,20%,96%);color:hsl(27,19%,11%);outline:none;transition:border-color .2s}
input:focus,textarea:focus,select:focus{border-color:hsl(352,73%,48%)}
textarea{resize:vertical}

.check-box{width:18px;height:18px;border:2px solid hsl(30,12%,86%);border-radius:4px;appearance:none;cursor:pointer;transition:all .2s;flex-shrink:0}
.check-box:checked{background:hsl(352,73%,48%);border-color:hsl(352,73%,48%);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3 4.3a1 1 0 010 1.4l-6 6a1 1 0 01-1.4 0l-3-3a1 1 0 111.4-1.4L6.5 9.6l5.3-5.3a1 1 0 011.4 0z'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.bg-primary\/30
 {
    background-color: hsl(var(--primary) / .3);
}
.bg-border {
    background-color: hsl(var(--border));
}
.left-\[60\%\] {
    left: 60%;
}
.left-\[30\%\] {
    left: 30%;
}
.text-muted-foreground\/60 {
    color: hsl(var(--muted-foreground) / .6);
}
.text-\[10px\] {
    font-size: 10px;
}
.text-border {
    color: hsl(var(--border));
}
.-top-2\.5 {
    top: -.625rem;
}
.hover\:opacity-90:hover {
    opacity: .9;
}
.text-white\/40 {
    color: #fff6;
}
.text-white\/85 {
    color: #ffffffd9;
}
.hover\:bg-white\/10:hover {
    background-color: #ffffff1a;
}
.-right-3
 {
    right: -.75rem;
}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.bg-secondary\/30
 {
    background-color: hsl(var(--secondary) / .3);
}
.hover\:bg-accent:hover {
    background-color: hsl(var(--accent));
}
.bg-\[hsl\(27\,19\%\,11\%\)\] {
    --tw-bg-opacity: 1;
    background-color: hsl(27 19% 11% / var(--tw-bg-opacity, 1));
}
.top-24 {
    top: 6rem;
}
.bg-background\/95 {
    background-color: hsl(var(--background) / .95);
}
.text-white\/60 {
    color: #fff9;
}
.text-\[52px\] {
    font-size: 52px;
}
.bg-accent-bej {
    background-color: hsl(30 40% 88%);
}
.hover\:bg-accent-bej:hover {
    background-color: hsl(30 40% 88%);
}
.text-accent-foreground-bl {
    color: hsl(27 19% 11%);
}
.to-primary\/5 {
    --tw-gradient-to: hsl(var(--primary) / .05) var(--tw-gradient-to-position);
}
.via-accent {
    --tw-gradient-to: hsl(var(--accent) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--accent)) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.from-primary\/10 {
    --tw-gradient-from: hsl(var(--primary) / .1) var(--tw-gradient-from-position);
    --tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.text-background {
    color: hsl(var(--background));
}

.custom-swiper .swiper-pagination-bullet-active {
    border-radius: 5px;
    background: var(--primary, var(--primary));
    background-color:hsl(var(--primary)); /* ваш основной цвет */
    opacity: 1;
}

.custom-swiper .swiper-pagination-bullet:hover {
    opacity: 1;
    background-color:hsl(var(--primary));
}
@media (max-width: 640px) {
.number {position: absolute;
  margin: 0;
  right: 1rem;
  top: 0.5rem;}
}

@media (min-width: 640px) {
    .sm\:inline {
        display: inline;
    }
}

@media (min-width: 768px) {
    .md\:h-\[500px\] {
        height: 500px;
    }
        .md\:h-96
 {
        height: 24rem;
    }
        .md\:text-\[60px\]
 {
        font-size: 60px;
    }
}