* {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   height: 100%;
   font-size: 16px; /* Base font size for rem calculations */
   font-weight: 900; /* Black вага */
}
/* a blue color as a generic focus style */
button:focus-visible {
   outline: 2px solid #4a90e2;
   outline-offset: 2px;
}

a {
   text-decoration: none;
   color: inherit;
}

body {
   background-color: #000;
   color: #fff;
   font-family: "Arial", sans-serif;
   text-align: center;
   padding: 1.5rem;
   overflow-x: hidden;
}

.header-section h3 {
   font-weight: 300;
   font-size: clamp(2rem, 5vw, 3.125rem);
   letter-spacing: 0.0625rem;
   margin: 0;
   color: #ccc;
}

.header-section h2 {
   font-weight: 700;
   font-size: clamp(3rem, 8vw, 5.3125rem);
   color: #fff;
   letter-spacing: 0.0625rem;
   text-transform: uppercase;
   text-shadow: 0 0 0.9375rem rgba(255, 255, 255, 1);
   margin: 0;
}

.need-section {
   background-color: #fff400;
   border-radius: 6.25rem;
   padding: 1.875rem 0.625rem;
   margin: 7.5rem auto;
   max-width: 75%;
}

.need-section ul {
   list-style: none;
   padding: 2.5rem 0;
   margin: 0;
}

.need-section li {
   font-size: clamp(2.5rem, 6vw, 5rem);
   font-weight: 900;
   text-transform: uppercase;
   margin: 0.625rem 0;
}

.need-section li:nth-child(odd) {
   font-weight: 700;
   color: #000;
}
.need-section li:nth-child(even) {
   font-weight: 700;
   -webkit-text-stroke: 2px #000;
   color: transparent;
}

.buttons-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1.25rem;
}
.buttons-section a {
   background-color: transparent;
   border: 1px solid #fff;
   color: #fff;
   padding: 0.625rem 1.25rem;
   border-radius: 3.125rem;
   font-weight: bold;
   text-transform: uppercase;
   cursor: pointer;
   font-size: 2.4rem;
   transition: background-color 0.3s ease;
}

.buttons-section a:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.ysabeau {
   font-family: "Ysabeau Infant", sans-serif;
}

main {
   min-height: 100vh;
}

.main-section {
   margin-top: 10rem;
}

.main-section h1 {
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 900;
   text-transform: uppercase;
   margin: 2.5rem 0 1.25rem;
}

h1.prosto_title {
   font-size: clamp(5rem, 10vw, 9.375rem);
   text-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
}

.dialog-descr {
   background: rgba(255, 255, 255, 0.8);
   color: #000;
   padding: 3.125rem;
   border-radius: 2.5rem;
   max-width: 40%;
   margin: 5rem auto 1.875rem;
   font-size: clamp(1.25rem, 2.5vw, 1.75rem);
   text-align: left;
   position: relative;
   z-index: -4;
}

h1.prosto_title {
   font-size: 150px;
   text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.dialog-window {
   border: 1px solid #fff;
   border-radius: 2.5rem;
   width: min(90%, 50rem);
   margin: 3.75rem auto 3.125rem;
   font-size: clamp(1rem, 2vw, 1.125rem);
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 0.0625rem;
}

.dialog-text,
.dialog-bottom-text {
   margin: 0.625rem;
   font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.dialog-bottom-text {
   text-shadow: 0 0 0.9375rem rgba(255, 255, 255, 1);
}
.dialog-window p:first-child {
   color: #ccc;
   font-weight: 400;
   margin-bottom: 0.3125rem;
}

.dialog-window p:last-child {
   font-weight: 700;
}

.reviews-section {
   margin-top: 3.75rem;
   position: relative;
}

.reviews-section h2 {
   font-size: clamp(3rem, 6vw, 4.75rem);
   font-weight: 900;
   text-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
   display: inline-block;
}

.reviews-arrows {
   position: absolute;
   top: 16%;
   width: 18%;
   z-index: -1;
   left: 50%;
   transform: translateY(-50%);
   transform: translateX(-50%);
}
.reviews-infinity {
   position: absolute;
   top: 35%;
   width: 40%;
   z-index: -1;
   left: 50%;
   transform: translateY(-50%);
   transform: translateX(-50%);
}

.testimonial {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 3.125rem;
   margin-top: 10rem;
}

.reviews-testimonial {
   background: rgba(0, 0, 0, 0.9);
   border: 2px solid #ffeb00;
   border-radius: 2.5rem;
   padding: 0.625rem;
   width: min(90%, 21.875rem);
   text-align: left;
   position: relative;
   color: #fff;
}

.testimonial-box {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.testimonial-image {
   width: 30%;
   border-radius: 50%;
}

.testimonial-name {
   font-size: clamp(1rem, 2vw, 1.25rem);
   font-weight: 700;
   margin: 0.3125rem 0;
}

.testimonial-title {
   color: #fff;
   font-weight: bold;
   margin: 0.3125rem 0;
   font-size: clamp(1.125rem, 2.5vw, 1.625rem);
}

.testimonial-text {
   font-size: clamp(0.875rem, 2vw, 1.125rem);
   line-height: 1.6;
   margin: 1.25rem 0 0;
}

.statement-section {
   background: linear-gradient(to right, #fffde7, #fff300);
   color: #000;
   padding: 5.625rem 3.75rem;
   border-radius: 3.125rem;
   max-width: min(90%, 50rem);
   margin: 18.75rem auto 0;
   font-size: clamp(1.5rem, 3vw, 2rem);
   font-weight: 400;
   text-align: left;
}

.bottom-window {
   font-size: 65px !important;
   max-width: 90% !important;
   padding: 3.125rem !important;
   border-radius: 4.375rem !important;
   width: 70% !important;
   text-shadow: 0 0 1.875rem rgba(255, 255, 255, 1);
   margin: 6.25rem auto !important;
}

.dialog-section .dialog-window {
   border: 1px solid #fff;
   border-radius: 1.5625rem;
   padding: 0.9375rem 1.875rem;
   max-width: min(90%, 25rem);
   margin: 1.875rem auto;
   font-weight: 700;
   font-size: clamp(0.875rem, 2vw, 1.125rem);
   text-transform: uppercase;
   text-align: center;
   color: #fff;
}

form {
   background: linear-gradient(to right, #f5f5f5, #ffe600);
   border-radius: 1.875rem;
   max-width: min(90%, 43.75rem);
   margin: 3.125rem auto 6.25rem;
   padding: 3.75rem;
   text-align: center;
   color: #000;
   font-size: clamp(1rem, 2vw, 1.375rem);
}

.form-title {
   font-family: "Ysabeau Infant", sans-serif;
   font-weight: 700;
   font-size: clamp(0.875rem, 2vw, 1rem);
   margin-bottom: 1.25rem;
   text-transform: uppercase;
   text-align: center;
   color: #000;
}

form label {
   display: block;
   text-align: left;
   margin-bottom: 0.3125rem;
   font-weight: 500;
   font-family: "Ysabeau Infantlamiento", sans-serif;
}

input {
   font-family: "Ysabeau Infant", sans-serif;
   width: 100%;
   padding: 1.5625rem;
   margin: 1.25rem 0;
   border: 1px solid #000;
   border-radius: 3.125rem;
   background: transparent;
   font-size: clamp(1.25rem, 2.5vw, 1.875rem);
   box-sizing: border-box;
   color: #000;
   outline: 2px solid #000;
}

input::placeholder {
   color: #000;
   font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}

form button {
   font-family: "Ysabeau Infant", sans-serif;
   width: min(100%, 25rem);
   padding: 1.25rem;
   border: none;
   border-radius: 3.125rem;
   background: #212010;
   color: #fff;
   font-size: clamp(0.875rem, 2vw, 1.2rem);
   cursor: pointer;
   margin-top: 0.9375rem;
   transition: background-color 0.3s ease;
   margin-bottom: 50px;   
}

form button:hover {
   background: #333;
}


.form-btn__tg{
   font-family: "Ysabeau Infant", sans-serif;
   width: 100%;
   padding: 1.25rem  1.25rem;
   border: none;
   border-radius: 3.125rem;
   color: #212010;
   background: #fff;
   font-size: clamp(0.875rem, 2vw, 1.2rem);
   cursor: pointer;
   margin-top: 150px;
   transition: background-color 0.3s ease;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}
.form-btn__tg:hover {
   background: #333;
   color: #fff;
}
.form-btn__tg img{
   width: 28px;
   height: 28px;
   margin-right: 10px;

}
/* Photo Composition */
.photo-composition {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 12.5rem auto 3.125rem;
   height: clamp(20rem, 50vw, 37.5rem);
}

.center-stack {
   position: relative;
   
}
.center-stack .back,
.center-stack .front {
   width: 100%;
   border-radius: 1.25rem;
}

.center-stack .back {
   z-index: 1;
}

.center-stack .front {
   position: absolute;
   top: -8.75rem;
   left: 1.25rem;
   z-index: 2;
}

.photo.side {
   position: absolute;
   top: 50%;
   width: min(30%, 11.25rem);
   border-radius: 1.25rem;
   transform: translateY(-50%);
   z-index: 3;
}

.photoimg {
   position: absolute;
   width: 90%;
}

.slime.left {
   left: 0;
   transform: translate(-35%, -20%);
   z-index: -5;
}

.slime.right {
   left: 0;
   transform: translate(50%, -15%);
   z-index: -1;
}

.photo.left {
   left: 0;
   transform: translate(-50%, -30%);
   width: min(50%, 25rem);
}

.photo.right {
   right: 0;
   transform: translate(38%, -60%);
   width: min(50%, 25rem);
}

.form-title {
   font-family: "Ysabeau", sans-serif;
   text-align: center;
   color: #000;
   font-size: 1.5em;
   margin: 0;
}

label {
   font-family: "Ysabeau", sans-serif;
   display: block;
   margin-bottom: 5px;
   color: #000;
}

button {
   font-family: "Ysabeau", sans-serif;
   width: 100%;
   padding: 10px;
   border: none;
   border-radius: 25px;
   background: #000;
   color: #fff;
   font-size: 1.2em;
   cursor: pointer;
}

button:hover {
   background: #333;
}

.form-top {
   display: flex;
   gap: 0.625rem;
   margin-top: 2.5rem;
}
form {
   max-width: 60%;
   font-size: 22px;
   padding: 60px !important;
   margin-bottom: 100px;
}

form button {
   border-radius: 50px;
   max-width: 40%;
   padding: 20px;
   background: #212010;
}

.footer {
   height: 0.625rem;
}

.leftcircle {
   width: 50% !important;
}
.rightcircle {
   width: 50% !important;
}

@media (max-width: 768px) {
   body {
      padding: 1rem;
   }

   .header-section h3 {
      font-size: clamp(1.5rem, 4vw, 2rem);
   }

   .header-section h2 {
      font-size: clamp(2rem, 6vw, 3.5rem);
   }

   .need-section {
      max-width: 90%;
      border-radius: 3rem;
      padding: 1.25rem 0.5rem;
      margin: 5rem auto;
   }

   .need-section li {
      font-size: clamp(1.5rem, 5vw, 3rem);
   }

   .main-section {
      margin-top: 2rem;
   }

   .main-section h1 {
      font-size: clamp(1.5rem, 4vw, 2rem);
   }

   h1.prosto_title {
      font-size: clamp(3rem, 8vw, 5rem);
   }

   .dialog-descr {
      max-width: 95%;
      padding: 1.5rem;
      font-size: clamp(1rem, 2vw, 1.25rem);
   }

   .dialog-window {
      width: 95%;
      margin: 2rem auto;
   }

   .reviews-section h2 {
      font-size: clamp(2rem, 5vw, 3rem);
   }

   .reviews-arrows {
      width: min(30%, 15rem);
   }

   .reviews-infinity {
      width: min(50%, 20rem);
   }

   .testimonial {
      gap: 1.5rem;
      margin-top: 5rem;
   }

   .reviews-testimonial {
      width: min(95%, 18.75rem);
   }

   .statement-section {
      max-width: 95%;
      padding: 2.5rem 1.5rem;
      margin: 10rem auto 0;
      font-size: clamp(1rem, 2.5vw, 1.5rem);
   }

   .bottom-window {
      font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
      padding: 1.5rem !important;
      border-radius: 2.5rem !important;
   }

   form {
      max-width: 95%;
      padding: 2rem;
   }

   form button {
      max-width: 100%;
   }

   .photo-composition {
      height: clamp(15rem, 40vw, 25rem);
      margin: 7.5rem auto 2rem;
   }

   .center-stack {
      width: min(95%, 30rem);
      margin-top: 30px;
   }

   .photo.side {
      width: min(40%, 8.75rem);
   }
}

@media (max-width: 480px) {
   .header-section h3 {
      font-size: clamp(1.25rem, 3.5vw, 1.5rem);
   }

   .header-section h2 {
      font-size: clamp(1.5rem, 5vw, 2.5rem);
   }

   .need-section li {
      font-size: clamp(1.25rem, 4vw, 2rem);
   }

   .buttons-section a {
      font-size: clamp(0.875rem, 2.5vw, 1rem);
      padding: 0.5rem 1rem;
   }

   .main-section h1 {
      font-size: clamp(1.25rem, 3.5vw, 1.5rem);
   }

   h1.prosto_title {
      font-size: clamp(2rem, 6vw, 3.5rem);
   }

   .dialog-descr {
      font-size: clamp(0.875rem, 1.8vw, 1rem);
   }

   .dialog-text,
   .dialog-bottom-text {
      font-size: clamp(0.875rem, 1.8vw, 1.125rem);
   }

   .reviews-section h2 {
      font-size: clamp(1.5rem, 4vw, 2rem);
   }

   .form-title {
      font-size: clamp(0.75rem, 1.8vw, 0.875rem);
   }

   input,
   input::placeholder {
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      padding: 1rem;
   }

   form button {
      font-size: clamp(0.75rem, 1.8vw, 1rem);
      padding: 0.75rem;
   }
}

@media (max-width: 500px) {
   .need-section li:nth-child(even) {
      -webkit-text-stroke: 1px #000;
   }

   .photo.front {
      left: 0;
      top: -50px;
   }
   .photo.side.left {
      display: none;
   }
   .photo-composition {
      margin-top: 20px;
      margin-bottom: 0px;
   }
   .header-section h3 {
      font-size: 17px;
   }
   .need-section {
      min-width: 600px;
      margin-left: 20px;
      margin-top: 40px;
      margin-bottom: 40px;
   }
   .need-section ul {
      text-align: left;
      padding: 0 0 0 20px;
   }
   .need-section ul li {
      font-size: 20px;
   }
   .buttons-section {
      gap: 5px;
   }
   .buttons-section a{
      font-size: 12px;
   }

   .buttons-section a:nth-child(odd) {
      display: none;
   }
   h1.prosto_title {
      font-size: 50px;
   }
   .photoimg.slime.left {
      width: 150%;
      left: -30%;
   }
   .photoimg.slime.right {
      width: 150%;
      left: -30%;
   }
   .dialog-descr.ysabeau {
      min-width: 400px;
      font-size: 18px;
      margin-left: -50px;
      padding-left: 60px;
   }
   .reviews-section {
      margin-top: 0;
   }
   .testimonial {
      margin-top: 30px;
   }
   .reviews-testimonial {
      padding-bottom: 30px;
   }
   .reviews-arrows {
      top: 3%;
   }
   .reviews-infinity {
      top: 20%;
      width: 200%;
   }
   .statement-section {
      text-align: center;
      margin-top: 60px;
      font-size: 18px;
   }
   .bottom-window {
      min-width: 100% !important;
      margin: 50px auto !important;
   }
   .form-title {
      font-size: 16px;
   }
   .form-top {
      flex-direction: column;
      gap: 0;
      margin-top: 20px;
   }
   form br {
      display: none;
   }
   form input {
      margin: 0.6rem 0 !important;
   }
   form {
      padding: 25px !important;
   }
   form button {
      font-size: 18px;
   }

   .photo-composition {
      position: relative;
      overflow-x: hidden;
      width: 108%;
      margin-left: -15px;
   }
   .main-section {
      position: relative;
      overflow: hidden;
      width: 108%;
      margin-left: -15px;
   }
   .reviews-section {
      position: relative;
      overflow-x: hidden;
      width: 108%;
      margin-left: -15px;
   }
   .need-wrapper {
      position: relative;
      overflow-x: hidden;
      width: 108%;
      margin-left: -15px;
   }
   .slime.left {
      transform: translate(-35%, -12%);
   }
   .slime.right {
   transform: translate(50%, 10%);
}
}




 #scroll-btn {
   font-family: "Ysabeau", sans-serif;
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   padding: 15px 20px;
   font-size: 18px;
   background-color: #fff400;
   color: #000;
   font-weight: bold;
   border: none;
   border-radius: 30px;
   cursor: pointer;
   box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
   transition: opacity 0.3s ease;
   z-index: 1000;
   width: 300px;
   height: 50px;
   padding: 5px;
     box-shadow: 0px 8px 18px rgba(0,0,0,0.8);
}

    #scroll-btn.hidden {
        opacity: 0;
        pointer-events: none;
    }