.conversion {
       padding: 50px 0;
       background: #1d1d1d;
       margin-bottom: -42px;
   }

   .conversion input {
       outline: none;
   }

   .conversion .container {
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .conversion_title {
       color: #f2bb00;
       font-weight: 700;
       font-size: calc(20px + 6 * ((100vw - 320px) / (1920 - 320)));

   }

   .conversion_description {
       color: white;
       font-size: 18px;
       font-size: calc(16px + 2 * ((100vw - 320px) / (1920 - 320)));
       font-weight: 500;
   }

   .email-form {
       display: flex;
       flex-direction: column;
       gap: 15px;
       margin-top: 20px;
       color: white;
   }

   .conversion_input_wrap {
       display: flex;
       flex-direction: column;
       gap: 5px;
       width: 50%;
   }

   .conversion_input_wrap label {
       font-size: calc(14px + 2 * ((100vw - 320px) / (1920 - 320)));
   }

   .conversion_checkbox_wrap label {
       font-size: calc(14px + 2 * ((100vw - 320px) / (1920 - 320)));
   }

   .conversion_checkbox_wrap {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .form_wrap {
       display: flex;
       gap: 20px;
       width: 100%;
   }

   .conversion_checkbox_wrap input {
       outline: none;
       border-radius: 4px;
   }

   .conversion_input_wrap input {
       outline: none;
       border-radius: 4px;
       color: #1d1d1d;
   }

   .conversion_checkbox_wrap:has(input.error) label {
       color: red;
   }

   .conversion_input_wrap:has(input.error) label {
       color: red;
   }


   .conversion_checkbox_wrap input.error {
       -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
       animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
       border-color: red;
       color: red;
   }

   .conversion_input_wrap input.error {
       -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
       animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
       color: red;
       border-color: red;
   }

   .email-form button {
       background: #44be4c;
       border-radius: 5px;
       box-shadow: 0 12px 30px rgba(127, 191, 133, .3);
       color: #fff;
       display: block;
       font-size: 16px;
       font-weight: 600;
       height: 50px;
       padding: 0 50px;
       width: 300px;
       margin: 0 auto;
       margin-top: 20px;
   }

   .email-form button[type="submit"] {
       background-color: #4CAF50;
       color: white;
       border: none;
       padding: 10px 20px;
       cursor: pointer;
       transition: background-color 0.3s ease;
   }

   .email-form button[type="submit"].loading {
       background-color: #3e8e41;
       /* Змінюємо фон для класу loading */
   }

   .email-form button[type="submit"].success {
       background-color: #28a745;
       /* Зелений фон для успішної відправки */
       animation: success-pulse 0.6s ease;
   }

   .popup {
       width: 100%;
       height: 100%;
       display: none;
       justify-content: center;
       align-items: center;
       position: fixed;
       left: 0px;
       top: 0px;
       z-index: 1000;
       background: rgba(34, 34, 34, 0.7);
       padding: 10px;
       color: white;
   }

   .popup.active {
       display: flex;
   }

   .popup_body {
       width: 100%;
       max-width: 700px;
       display: flex;
       flex-direction: column;
       gap: 15px;
       background-color: #1d1d1d;
       padding: 30px 20px;
       border-radius: 10px;
       position: relative;
   }

   .popup_body .email-form {
       margin-top: 0px;
   }

   .popup_close {
       position: absolute;
       right: 5px;
       top: 5px;
       cursor: pointer;
   }

   .popup_close path {
       fill: white;
   }

   @keyframes success-pulse {
       0% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }

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

   @-webkit-keyframes shake-horizontal {

       0%,
       100% {
           -webkit-transform: translateX(0);
           transform: translateX(0);
       }

       10%,
       30%,
       50%,
       70% {
           -webkit-transform: translateX(-10px);
           transform: translateX(-10px);
       }

       20%,
       40%,
       60% {
           -webkit-transform: translateX(10px);
           transform: translateX(10px);
       }

       80% {
           -webkit-transform: translateX(8px);
           transform: translateX(8px);
       }

       90% {
           -webkit-transform: translateX(-8px);
           transform: translateX(-8px);
       }
   }

   @keyframes shake-horizontal {

       0%,
       100% {
           -webkit-transform: translateX(0);
           transform: translateX(0);
       }

       10%,
       30%,
       50%,
       70% {
           -webkit-transform: translateX(-10px);
           transform: translateX(-10px);
       }

       20%,
       40%,
       60% {
           -webkit-transform: translateX(10px);
           transform: translateX(10px);
       }

       80% {
           -webkit-transform: translateX(8px);
           transform: translateX(8px);
       }

       90% {
           -webkit-transform: translateX(-8px);
           transform: translateX(-8px);
       }
   }

   @media screen and (max-width: 700px) {
       .conversion {
           padding: 30px 0;
       }

       .conversion .container {
           gap: 10px;
       }

       .popup_body {
           gap: 10px;
       }

       .form_wrap {
           flex-direction: column;
           gap: 10px;
       }

       .conversion_input_wrap {
           width: 100%;
       }

       .email-form {
           margin-top: 10px;
       }

       .conversion button[type="submit"] {
           margin-top: 10px;
       }

       .popup_body .email-form {
           margin-top: 0px;
       }
   }