body {
       background: #fafbfb;
       font-family: 'DM Sans', Arial, sans-serif;
   }

   .faq_category {

       color: green;
   }

   .rules_title {
       color: black;
   }

   .main-container {
       max-width: 1000px;
       margin: 0 auto;
       background: #fff;
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.04);
       border: 1px solid #e9ecef;
       min-height: 100vh;
       padding: 0;
   }

   .btnsuper {
       color: white;
       background-color: red;
   }

   .low-header {
       display: flex;
       align-items: center;
       height: 48px;
       background: #fff;
       border-bottom: 1px solid #e9ecef;
       padding-left: 16px;
       max-width: 100%;
       margin: 0;
   }

   .logo-img {
       height: 48px;
       width: auto;
   }


   .banner-section {
       position: relative;
       background: url(/assets/bg.jpg);
       height: 70vh;
       display: flex;
       align-items: center;
       justify-content: flex-end;
       background-size: cover;
       background-position: 50% 65%;
   }

   .banner-section .banner-text {
       color: #fff;
       text-align: center;
       font-size: 2.5rem;
       font-style: italic;
       font-weight: 400;
       text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.22);
       height: 100%;
       margin-right: 2vw;
   }

   .navbar-light .navbar-nav .nav-link {
       color: #222;
       font-weight: 500;
   }

   .navbar-light .navbar-nav .nav-link:hover {
       color: #237ece;
   }

   .navbar-nav li {
       text-transform: uppercase;
   }

   .box-title {
       background: black;
       color: #fff;
       padding: 6px 12px;
       font-size: 1rem;
       font-weight: bold;
       border-radius: 0.25rem 0.25rem 0 0;
   }

   .left-box,
   .info-box {
       border: 1px solid #c7d1d6;
       margin-bottom: 16px;
       border-radius: 0.25rem;
       background: #f8fafb;
       overflow: hidden;
   }

   .left-box .btn-primary {
       background: #6bacd3;
       border: none;
       font-weight: 700;
   }

   .left-box .btn-primary:hover {
       background: #4686b2;
   }

   .left-box label,
   .info-box label {
       margin-bottom: 0.25rem;
       font-weight: 500;
   }

   .open-account-btn {
       display: flex;
       justify-content: center;
       margin: 12px 0;
   }

   .open-account-img {
       height: 100%;
       width: auto;
       cursor: pointer;
       border-radius: 6px;
       transition: box-shadow 0.2s;
       box-shadow: 0 2px 8px #e5a28938;
   }

   .open-account-img:hover {
       box-shadow: 0 4px 14px rgba(229, 162, 137, 0.22);
       border-color: red;
   }

   .payment-icons-grid {
       display: flex;
       flex-direction: column;
   }

   .payment-icon {
       /* height: 50px; */
       height: 100%;
       width: auto;
       background: #fff;
       border-radius: 7px;
       padding: 3px 8px 3px 8px;
   }

   .info-list {
       padding: 0.5rem 1rem 1rem 1rem;
       font-size: 0.90rem;
   }

   .plan-table {
       border: 1px solid #6bacd3;
       margin-bottom: 1.25rem;
       background: #fafdff;
       border-radius: 0.25rem;
       overflow: hidden;
   }

   .plan-table th,
   .plan-table td {
       border: none !important;
       vertical-align: middle;
       padding: 0.45rem 0.5rem;
   }

   .plan-table thead {
       background: #6bacd3;
       color: #fff;
   }

   .plan-table .plan-title {
       background: green;
       color: white;
       font-weight: 600;
       text-align: center;
       font-size: 1.08rem;
       border-bottom: 1px solid #c7d1d6;
   }

   .notes {
       font-size: 0.95rem;
       margin-bottom: 0.5rem;
       color: #303c41;
   }

   .referral-box {
       border: 1px solid #6bacd3;
       padding: 1rem;
       margin-top: 1.25rem;
       /* margin-bottom: 5vh; */
       margin-bottom: 0px;
       background: #fafdff;
       border-radius: 0.25rem;
   }

   .footer {
       background: #292929;
       color: #fff;
       font-size: 0.92rem;
       padding: 14px 16px 0 16px;
       border-top: 2px solid #e9ecef;
       min-height: 54px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .footer .pay-icons img {
       margin-left: 0.5rem;
       height: 32px;
       vertical-align: middle;
   }

   .more-btn {
       display: flex;
       flex-direction: row;
       justify-content: flex-end;
       margin-bottom: 5px;
   }

   .btn-more {
       /* базовые стили */
       display: inline-block;
       padding: 3px 22px;
       font-size: 1rem;
       font-weight: 500;
       color: #fff;
       background: red;
       border: none;
       box-shadow: 0 1px 8px #e5a28933;
       transition: background 0.18s;
       /* убираем скругления */
       border-radius: 0;
       /* и задаём постоянные «откосы» по диагонали в углах */
       /* здесь 20px — глубина среза, можно менять на своё усмотрение */
       clip-path: polygon(20px 0%,
               /* сдвинули вправо, формируя левый верхний откос */
               100% 0%,
               /* правый верхний угол */
               100% calc(100% - 20px),
               /* сдвинули вверх, формируя правый нижний откос */
               calc(100% - 20px) 100%,
               /* нижняя сторона перед правым откосом */
               0% 100%,
               /* левый нижний угол */
               0% 20px
               /* сдвинули вниз, завершаем левый верхний откос */
           );
   }

   .btn-more:hover {
       background: #a35749;
       color: white;
   }

   @media (max-width: 800px) {
       .main-container {
           max-width: 100vw;
           min-width: 100vw;
           border: none;
       }

       .banner-section {
           height: 200px;
       }

       .low-header {
           padding-left: 8px;
       }
   }