/* 
 *  This is the default license template.
 *  
 *  File: custom.css
 *  Author: Lordkosi
 *  Copyright (c) 2024 Lordkosi
 *  
 *  To edit this license information: Press Ctrl+Shift+P and press 'Create new License Template...'.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');




   .auth-holder {
       background-color: #101010;
       height: 100vh;
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .forgot_password {
       display: flex;
       justify-content: flex-end;
       margin-top: 20px;
   }


   body {
       max-width: 100vw;
       overflow-x: hidden;
   }


   #particles-js {
       position: absolute;
       top: 0;
       width: 100%;
       height: calc(100vh - 78px);
       z-index: 23;
   }


   /* #Intro {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
} */


   /* body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 15px;
} */

   a {
       text-decoration: none;
   }

   .wrapper {
       width: 95%;
       max-width: 1200px;
       margin: 30px auto;
   }

   .pricing-table h2 {
       font-size: 1.5em;
       padding: 35px 10px;
       margin: 0;
   }

   .description {
       margin-top: 20px;
       font-size: 0.85em;
       padding: 0 40px;
       font-style: italic;
   }

   .description {
       margin-top: 20px;
       font-size: 0.85em;
       padding: 0 40px;
       font-style: italic;
   }

   .price,
   .pricing-box {
       -webkit-transition: all ease-out 0.2s;
       transition: all ease-out 0.2s;
   }

   .price {
       background: #167fd4;
       color: #fff;
       font-size: 2em;
       font-weight: 600;
       position: relative;
       padding: 20px 10px;
       display: block;
   }

   .pricing-box:nth-child(2) .price {
       background: #216f99;
   }

   .pricing-box:nth-child(3) .price {
       background: #02537f;
   }

   .pricing-box:hover .price {
       background: #ff0;
       box-shadow: inset 0 0 100px 0 rgba(0, 0, 0, 0.3);
       color: #000;
   }

   .btn {
       background: #000000;
       border: 1px solid #000000;
       color: #fff;
       -webkit-transition: all ease-out 0.2s;
       transition: all ease-out 0.2s;
       border-radius: 30px;
       padding: 7px 40px;
       display: inline-block;
       margin-top: 20px;
   }

   .btn:hover {
       background: #167fd4;
       border: 1px solid #167fd4;
       color: #fff !important;
   }

   .pricing-table-divider {
       display: block;
       height: 1px;
       background: rgba(0, 0, 0, 0.08);
       max-width: 80%;
       margin: 20px auto 0;
   }

   .pricing-table {
       border-radius: 3px;
       display: -ms-grid;
       display: grid;
       -ms-grid-columns: (1fr)[3];
       grid-template-columns: repeat(3, 1fr);
       grid-column-gap: 20px;
       grid-row-gap: 20px;
       text-align: center;
   }

   .pricing-box-2 {
       overflow: hidden;
       border-radius: 10px;
       box-shadow: 0 0 30px rgba(0, 0, 0, 0.13);
       border: 2px solid rgba(10, 123, 183, 0.14);
   }

   .pricing-box-2:hover {
       -webkit-transform: scale(1.01);
       transform: scale(1.01);
   }

   .pricing-table ul li {
       padding: 3px 0;
       font-size: 0.95em;
   }

   .pricing-table ul {
       color: #000;
       padding: 15px 60px;
       text-align: left;
   }

   @media (max-width: 750px) {
       .pricing-table {
           -ms-grid-columns: 1fr;
           grid-template-columns: 1fr;
       }

       .pricing-table>div:nth-child(3) {
           -ms-grid-row: 1;
           grid-row-start: 1;
       }

       .pricing-table>div:nth-child(2) {
           -ms-grid-row: 2;
           grid-row-start: 2;
       }

       .pricing-table>div {
           -ms-flex-item-align: top;
           -ms-grid-row-align: top;
           align-self: top;
       }
   }

   fieldset div {
       display: flex;
       flex-wrap: wrap;
       margin-top: 0.5rem;
       justify-content: center;
   }

   input[type="radio"] {
       clip: rect(0 0 0 0);
       clip-path: inset(100%);
       height: 1px;
       overflow: hidden;
       position: absolute;
       white-space: nowrap;
       width: 1px;
   }

   input[type="radio"]:checked+span {
       box-shadow: 0 0 0 0.0625em #0043ed;
       background-color: #dee7ff;
       z-index: 1;
       color: #0043ed;
   }

   label span {
       display: block;
       cursor: pointer;
       background-color: #fff;
       padding: 0.375em 0.75em;
       position: relative;
       margin-left: 0.0625em;
       box-shadow: 0 0 0 0.0625em #b5bfd9;
       letter-spacing: 0.05em;
       color: #3e4963;
       text-align: center;
       transition: background-color 0.5s ease;
   }

   label:first-child span {
       border-radius: 0.375em 0 0 0.375em;
   }

   label:last-child span {
       border-radius: 0 0.375em 0.375em 0;
   }

   .my-20 {
       margin-top: 20px;
       margin-bottom: 20px;
   }

   .recent-tranx {
       display: flex;
       margin-top: 50px;
   }

   .recent-tranx>div {
       width: 50%;
       margin: 20px;
   }

   .recent-tranx-table {
       width: 100%;
   }

   .recent-tranx-table>thead>tr,
   .recent-tranx-table>tbody>tr {
       height: 50px;
   }

   .recent-tranx-table>tbody>tr:nth-of-type(odd) {
       background-color: rgba(0, 0, 0, .05);
   }

   .recent-tranx-table>tbody>tr>td {
       padding: 10px;
   }

   .nav-height {
       height: 100vh !important;
   }

   /* Accordion styles */
   .faq-checkbox {
       position: absolute;
       opacity: 0;
       z-index: -1;
   }

   .faq-tabs {
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
   }

   .faq-tab {
       width: 100%;
       color: white;
       overflow: hidden;
   }

   .faq-tab-label {
       display: flex;
       justify-content: space-between;
       padding: 1.5em;
       background: #2c3e50;
       font-weight: bold;
       cursor: pointer;
       /* Icon */
   }

   .faq-tab-label:hover {
       background: #1a252f;
   }

   .faq-tab-label::after {
       content: "\276F";
       width: 1em;
       height: 1em;
       text-align: center;
       transition: all 0.35s;
   }

   .faq-tab-content {
       max-height: 0;
       padding: 0 1em;
       color: #2c3e50;
       background: white;
       transition: all 0.35s;
   }

   .faq-tab-close {
       display: flex;
       justify-content: flex-end;
       padding: 1em;
       font-size: 0.75em;
       background: #2c3e50;
       cursor: pointer;
   }

   .faq-tab-close:hover {
       background: #1a252f;
   }

   input:checked+.faq-tab-label {
       background: #1a252f;
   }

   input:checked+.faq-tab-label::after {
       transform: rotate(90deg);
   }

   input:checked~.faq-tab-content {
       max-height: 100vh;
       padding: 1em;
   }

   /* width */
   ::-webkit-scrollbar {
       width: 7px;
       height: 7px;
   }

   /* Track */
   ::-webkit-scrollbar-track {
       background: #6da5f3;
   }

   /* Handle */
   ::-webkit-scrollbar-thumb {
       background: #242a6d;
   }



   .blank header {
       background-image: linear-gradient(111.4deg, rgba(7, 7, 9, 0.9) 6.5%, rgba(27, 24, 113, 0.9) 93.2%);
       position: fixed;
       width: 100vw;
       top: 0;
       z-index: 12000;
       height: 75px;
   }


   .header__button,
   .header_button {
       background-image: linear-gradient(89.4deg, rgba(194, 0, 39, 1) 0.8%, rgba(10, 35, 104, 1) 99.4%);
       border-radius: 15px;
       padding: 10px 15px 10px 15px;
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
       color: white;
   }

   .header__button:hover,
   .header_button:hover {
       background-image: radial-gradient(circle farthest-corner at 83.7% 4.3%, rgba(173, 0, 171, 1) 0%, rgba(15, 51, 92, 1) 90%);
   }

   .footer {
       background-image: linear-gradient(111.4deg, rgba(7, 7, 9, 1) 6.5%, rgba(27, 24, 113, 1) 93.2%);
   }


   @import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

   * {
       box-sizing: border-box;
   }

   .top {
       width: 100vw;
       margin-top: 75px;
       position: relative;
       background-color: #c394f8;
       background-image: linear-gradient(111.4deg, rgba(7, 7, 9, 1) 6.5%, rgba(27, 24, 113, 1) 93.2%);
       height: calc(100vh - 75px);
   }

   .top video {
       position: absolute;
       width: 100%;
       height: 100%;
       object-fit: cover;
       top: 0;
       left: 0;
       z-index: 20;
   }






   .top .containerx {
       width: 100vw;
       position: absolute;
       z-index: 25;
       left: 0;
   }

   .containerx {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 30px 10px;
       font-family: "DM Sans", sans-serif;
       transition: background 0.4s ease-in;
       background-color: transparent;
       margin: 0;
       height: calc(100vh - 75px);
       width: 100%;
   }

   .containerx body.blue {
       background-color: #428aa6;
   }

   .containerx input[type=radio] {
       display: none;
   }

   .containerx .card {
       position: absolute;
       width: 60%;
       height: 100%;
       left: 0;
       right: 0;
       margin: auto;
       transition: transform 0.4s ease;
       cursor: pointer;
   }

   .containerx .container {
       width: 100%;
       max-width: 800px;
       max-height: 600px;
       height: 100%;
       transform-style: preserve-3d;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
   }

   .containerx .cards {
       position: relative;
       width: 100%;
       height: 100%;
       margin-bottom: 20px;
   }

   .containerx img {
       width: 100%;
       height: 100%;
       border-radius: 10px;
       -o-object-fit: cover;
       object-fit: cover;
   }

   .containerx #item-1:checked~.cards #song-3,
   .containerx #item-2:checked~.cards #song-1,
   .containerx #item-3:checked~.cards #song-2 {
       transform: translatex(-40%) scale(0.8);
       opacity: 0.6;
       z-index: 0;
   }

   .containerx #item-1:checked~.cards #song-2,
   .containerx #item-2:checked~.cards #song-3,
   .containerx #item-3:checked~.cards #song-1 {
       transform: translatex(40%) scale(0.8);
       opacity: 0.6;
       z-index: 0;
   }

   .containerx #item-1:checked~.cards #song-1,
   .containerx #item-2:checked~.cards #song-2,
   .containerx #item-3:checked~.cards #song-3 {
       transform: translatex(0) scale(1);
       opacity: 1;
       z-index: 1;
   }

   .containerx #item-1:checked~.cards #song-1 img,
   .containerx #item-2:checked~.cards #song-2 img,
   .containerx #item-3:checked~.cards #song-3 img {
       box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
   }

   .containerx .player {
       background-color: transparent;
       border-radius: 8px;
       min-width: 320px;
       width: 100%;
       height: fit-content;
       padding: 0;
   }

   .containerx .upper-part {
       position: relative;
       display: flex;
       align-items: center;
       margin-bottom: 20px;
       height: 55px;
       overflow: hidden;
   }

   .containerx .play-icon {
       margin-right: 0;
       display: none;
   }

   .containerx .song-info {
       text-align: center;
       display: block;
   }

   .containerx .song-info p {
       color: #b6e2fa
   }


   .containerx .info-area {
       width: 100%;
       position: absolute;
       top: 0;
       left: 0px;
       transition: transform 0.4s ease-in;
       background-color: #000000c4;
       border-radius: 8px;

   }


   .containerx .sub-line {
       display: flex;
       justify-content: space-between;
       width: 100%;
   }

   .containerx .subtitle,
   .time {
       font-size: 12px;
       line-height: 16px;
       color: #c6c5c6;
   }

   .containerx .time {
       font-size: 12px;
       line-height: 16px;
       color: #a5a5a5;
       font-weight: 500;
       margin-left: auto;
   }

   .containerx .progress-bar {
       height: 3px;
       width: 100%;
       background-color: #e9efff;
       border-radius: 2px;
       overflow: hidden;
       display: none;
   }

   outline .containerx .progress {
       display: block;
       position: relative;
       width: 60%;
       height: 100%;
       background-color: #2992dc;
       border-radius: 6px;
   }

   .container .info-area h3 {
       text-shadow: 2px 2px 3px black;
   }

   .container .info-area p small {
       color: yellow;
       text-shadow: 2px 2px 3px black;
   }


   .containerx #item-2:checked~.player #test {
       transform: translateY(0);
   }

   .containerx #item-2:checked~.player #test {
       transform: translateY(-49px);
   }

   .containerx #item-3:checked~.player #test {
       transform: translateY(-104px);
   }

   .flex-400 {
       width: 100%;
       height: 600px;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   @media (max-width: 870px) {

       .containerx .info-area {}

       .container .info-area h3 {
           margin-top: 10px;
       }

       .container .info-area p small {}

       .containerx #item-2:checked~.player #test {
           transform: translateY(0);
       }

       .containerx #item-2:checked~.player #test {
           transform: translateY(-49px);
       }

       .containerx #item-3:checked~.player #test {
           transform: translateY(-104px);
       }

       .top {
           height: calc(90vh - 75px);
       }

       .containerx {
           height: calc(90vh - 75px);
       }

       .containerx img {
           width: 60vw;
           margin: 0;
           padding: 0;
       }

       .containerx .card {
           margin: 0 12.5vw;
           padding: 0;
       }

       .main__innovation-real {
           font-size: small;
           padding: 0;
           height: fit-content;
       }

       .flex-400 {
           height: fit-content;
           padding: 15px 0;
       }

   }

   @media (min-width: 1450px) {


       .containerx {
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 0;
           font-family: "DM Sans", sans-serif;
           transition: background 0.4s ease-in;
           background-color: transparent;
           margin: 0;
           height: calc(100vh - 75px);
           width: 100%;
       }


       .containerx img {
           width: 100%;
           height: 100%;
           border-radius: 25px;
           -o-object-fit: cover;
           object-fit: cover;
       }

       .containerx .cards {
           position: relative;
           width: 100%;
           height: 100%;
           margin-bottom: 10vh;
       }

       .containerx .card {
           position: absolute;
           width: 50vw;
           height: 100%;
           top: calc(4vh - 75px);
           left: 16.5vw;
           margin: 0;
           transition: transform 0.4s ease;
           cursor: pointer;
       }

       .containerx .container {
           width: 100%;
           max-width: 100vw;
           max-height: 100vh;
           height: 100%;
           transform-style: preserve-3d;
           display: flex;
           justify-content: center;
           flex-direction: column;
           align-items: center;
       }




       .containerx .info-area {}

       .container .info-area h3 {
           margin-top: 5px;
       }

       .container .info-area p small {}

       .containerx #item-2:checked~.player #test {
           transform: translateY(0);
       }

       .containerx #item-2:checked~.player #test {

           transform: translateY(-63px);
       }

       .containerx .player {
           max-width: 50vw;
           border-radius: 20px;
       }

       .containerx #item-3:checked~.player #test {
           transform: translateY(-120px);
       }

       .top {
           height: calc(100vh - 75px);
       }

       .containerx {
           height: calc(100vh - 75px);
       }


       .containerx img {
           height: 60vh;
           margin: 0;
           padding: 0;
       }

   }


   .mode-a {
       background-image: radial-gradient(circle 815px at 23.4% -21.8%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 1) 100.2%);
       text-align: justify;
       width: 100vw;
       max-width: 100vw;
       overflow-x: hidden;
   }

   .mode-a img {
       width: 500px;
   }

   .mode-b {
       /*   background-image: linear-gradient( 109.6deg, rgba(102,51,153,1) 11.2%, rgba(2,0,4,1) 91.1% );*/
       background-image: linear-gradient(85.2deg, rgba(33, 3, 40, 1) 7.5%, rgba(65, 5, 72, 1) 88.7%);
       background-image: linear-gradient(110.1deg, rgba(30, 2, 83, 0.65) 44.2%, rgba(198, 55, 160, 0.65) 138.2%), url('../png/bg1.jpg');
       background-size: cover;
       width: 100vw;
       max-width: 100vw;
       overflow-x: hidden;
   }


   .xxlv{
    background-image:  url('../png/fixes.png');
    background-size:contain ;
    background-repeat:no-repeat;
    background-position-y: bottom;
    position:relative;
    min-height: 60vh;
   
}
.xxlv .main__reviews{
  z-index: 5550;
}
.xxlv #particles-jsb{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
}

   .mode-b .container {
       display: flex;
       min-height: 60vh;
       margin-top: 0;
   }



   .mode-c {
       background-image: radial-gradient(circle 815px at 23.4% -21.8%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 0.95) 100.2%), url('../png/bg2.jpg');
       background-size: cover;
       padding-top: 30px;
       max-width: 100vw !important;
       width: 100vw;
       overflow-x: hidden;
   }

   .mode-c .main__innovation-container {
       padding-bottom: 30px;
       margin-bottom: 0;
   }

   .main__innovation-container img {
       border-radius: 0 15px 0 15px;
       padding: 20px;
   }

   .main__innovation-container {
       max-width: 100vw;
       overflow-x: hidden;
   }

   .img-responsive {
       max-width: 100%;
   }

   .text-center {
       text-align: center;
   }

   .mode-d {
       position: relative;
       background-image: linear-gradient(40deg, #2f2f2fc9 0%, #000000e4 70%), url('../png/c.jpg');
       background-size: cover;
       min-height: 40vh;
       height: fit-content;
       padding-top: 30px;
       width: 100vw;
       max-width: 100vw;
       overflow-x: hidden;
   }

   #myCanvas {
       position: absolute;
       top: 0;
       width: 100%;
       height: 100%;
       z-index: 23;
   }

   @media (max-width: 870px) {


       #myCanvas {
           height: calc(90vh);
       }

       #particles-js {
           height: calc(90vh);
       }

   }

   .mode-d .xls {
       position: relative;
       z-index: 30;
       top: 0;
       left: 0;
       width: 100vw;
   }

   .mode-d .jizz {
       padding: 15px 10px;
       text-align: justify;
       background-image: linear-gradient(to right, #2f2f2f 0%, black 70%);
       border-radius: 20px;
       margin: 80px 0 10px 0;
       width: 100%;
       min-height: 415px;
   }

   .jizz .main__dignity-item__title {
       color: white;
       font-weight: 600;
       text-align: left;
       margin-bottom: 25px;
   }

   .jizz img {
       width: 180px;
       margin-top: -40px;
       margin-left: calc(50% - 90px);
       text-align: center;
       border-radius: 15px;
       padding: 5px;
       background-image: linear-gradient(to right, #2f2f2f 0%, black 70%);
       margin-bottom: 20px;
   }

   .mode-b .main__start-step {
       padding: 20px 10px 40px 10px;
       background-image: linear-gradient(85.2deg, rgba(33, 3, 40, 1) 7.5%, rgba(65, 5, 72, 1) 88.7%);
       border-radius: 25px;
       text-align: center;
   }

   .mode-b .main__start-subtitle {
       color: rgb(211, 78, 226)
   }

   .mode-b .main__start-step a {
       margin: 0;
       position: absolute;
       bottom: 10px;
       left: 5%;
       width: 90%;
       color: rgb(24, 4, 29);
       padding: 10px 7px;
       background-color: rgb(146, 89, 152, 0.83);
       border-radius: 10px;
   }

   .coloured_card {
       padding: 15px 10px;
       background-image: linear-gradient(85.2deg, rgba(33, 3, 40, 1) 7.5%, rgba(65, 5, 72, 1) 88.7%);
       border-radius: 25px;
       min-height: 320px;
       text-align: center;
       margin: 10px 0;
   }

   .coloured_card .main__dignity-item__title {
       color: #faf1ff
   }

   .main__reviews-testimonials .main__reviews-container {
       background-image: linear-gradient(111.4deg, rgba(7, 7, 9, 1) 6.5%, rgba(27, 24, 113, 1) 93.2%);
       background-image: radial-gradient(circle 815px at 23.4% -21.8%, rgba(9, 29, 85, 1) 0.2%, rgba(0, 0, 0, 1) 100.2%);
       border-radius: 30px;
       margin: 10px;
   }

   .coloured_card img {
       max-width: 100%;
       height: 85px;
   }

   .main__dignity {
       background-image: linear-gradient(112.1deg, rgba(32, 38, 57, 1) 11.4%, rgba(63, 76, 119, 1) 70.2%);
       border-radius: 30px;
   }


   .testimonial {
     
       background-repeat: no-repeat;
       background-size: contain;
       background-position: left center;
   }


   .text-black {
       color: black;
   }

   div.horizontal-scroll-wrapper::-webkit-scrollbar {
       width: 5px;
       height: 5px;
   }




   .main__innovation-button a {
       border-radius: 30px;
   }

   .main__innovation-button a:hover {
       border-radius: 30px;


   }


   .about_us__quotex__container {
       padding-top: 75px;
       background-image: linear-gradient(111.4deg, rgba(7, 7, 9, 0.9) 6.5%, rgba(27, 24, 113, 0.7) 93.2%), url('../png/c.jpg');
       background-size: cover;
       padding-left: 30px;
       padding-right: 20px;
       margin: 0;
   }

   .about_us__modern {
       margin: 20px;
   }

   .main__innovation-real {
       background-image: linear-gradient(to right, #16222A 0%, #3A6073 51%, #16222A 100%);
       margin: 10px;
       padding: 15px 45px;
       text-align: center;
       text-transform: uppercase;
       transition: 0.5s;
       background-size: 200% auto;
       color: white;
       border-radius: 10px;
       display: block;
   }

   .main__innovation-real:hover {
       background-position: right center;
       /* change the direction of the change here */
       color: #fff;
       text-decoration: none;
   }


   .main__innovation-demo {
       background-image: linear-gradient(to right, #abbaab 0%, #ffffff 51%, #abbaab 100%);
       margin: 10px;
       height: 65px;
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
       text-transform: uppercase;
       transition: 0.5s;
       background-size: 200% auto;
       color: black;
       border-radius: 10px;
       display: block;
   }

   .main__innovation-demo:hover {
       background-position: right center;
       /* change the direction of the change here */
       color: cornflowerblue;
       text-decoration: none;
   }


   div.horizontal-scroll-wrapper {
       margin: 0;
       padding: 20px;
       /*  background: #abc;*/
       border-radius: 5px;
       width: 100%;
       overflow: auto;
       overflow-y: hidden;
       white-space: nowrap;
   }

   div.horizontal-scroll-wrapper a {
       display: inline-block;
       background: #aab2cc;
       margin: 10px;
       height: 300px;
       width: 300px;
       margin-top: 15px;
       border-radius: 5px;
       box-shadow: #091731 0px 20px 30px -10px;
   }

   div.horizontal-scroll-wrapper a p {
       height: 100px;
       padding: 10px;
       text-align: center;
       width: 100%;
       background-color: white;
       border-radius: 0 0 5px 5px;
       white-space: normal;
   }

   div.horizontal-scroll-wrapper a p span {
       height: 100px;
       color: #414141
   }

   div.horizontal-scroll-wrapper a img {
       height: 200px;
       object-fit: cover;
       width: 300px;
       border-radius: 5px 5px 0 0;
   }

   .main {
       width: 100%;
       overflow-x: hidden;
   }

   .about_us__modern-title {
       margin-top: 64px;
   }

   .about_us__modern-items {
       margin-top: 64px;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem;
   }


   .about_us__modern-item {

       width: 100%;
   }

   .about_us__desires-image {
       width: 80%;
       margin-left: unset;
       margin-top: 30px;
       margin-right: 10px;
   }

   footer {
       width: 100vw;
       overflow-x: hidden;
   }

   .p-home-m-seo-become-a-trader__content {
       display: flex;
       margin-top: 20px;
       height: 250px
   }

   .p-home-m-seo-become-a-trader__item-wrap {
       max-width: 50%;
       width: 50%;
       height: 100%;
   }

   .main__reviews-block {
       min-height: 420px;
   }

   @media (max-width: 768px) {
       .main__reviews-block {
           min-height: fit-content;
       }

       .mode-a .main__reviews {
           padding: 50px 10px;
       }

       .main__graph {
           padding: 50px 10px;
       }

       .mode-b .container {
           padding: 30px 10px;
       }

       .main__innovation-container img {
           border-radius: 0px;
       }

       .about_us__quotex__image {
           display: none;
       }

       .about_us__desires-image {
           display: block;
           width: 100vw;
           margin: 0;
           border-radius: 0;
           margin-bottom: 20px;
       }

       .about_us__quotex {
           margin: 25vh 0 30px 0;
       }

       .about_us__desires-container {
           margin: 30px 0;
       }

       .about_us__modern-items {
           display: inline-block;
           width: 100%;
           margin-left: 0;
           padding-left: 0;
       }

       .about_us__modern-item {
           left: 0;
           margin: 25px 0;
           width: 100%;
       }

       .p-home-m-seo-become-a-trader__content {
           display: block;
           height: auto;
           margin: 10px;

       }

       .p-home-m-seo-become-a-trader__item-wrap {
           max-width: unset;
           display: block;
           width: 100%;
           height: auto;
       }

       .p-home-m-seo-become-a-trader__item-wrap-content {
           width: 100%;

       }

       .comp-img {
           width: 50%;
           padding: 5px;
       }

       .fs-20 {
           padding-top: 35px;
       }
   }


   .about_us__desires-image {
       border-radius: 30px;
   }

   /* Button used to open the chat form - fixed at the bottom of the page */
   .open-button {
       background: linear-gradient(90deg, #0b2070, #2c5ba8);
       color: white;
       padding: 0;
       border: none;
       cursor: pointer;
       opacity: 0.9;
       position: fixed;
       bottom: 23px;
       right: 28px;
       height: 50px;
       width: 50px;
       border-radius: 50%;
       z-index: 4500;
   }

   /* The popup chat - hidden by default */
   .chat-popup {
       display: none;
       position: fixed;
       bottom: 20px;
       right: 15px;
       border-radius: 30px;
       box-shadow: #091731 0px 20px 30px -10px;
       z-index: 5000;
   }


   .chat-popup .btn-outline {
       background-image: linear-gradient(89.4deg, rgba(194, 0, 39, 1) 0.8%, rgba(10, 35, 104, 1) 99.4%);
       border-radius: 15px;
       padding: 7px 5px;
       box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
       color: white;
   }

   .chat-popup .btn-outline:hover {
       background-image: radial-gradient(circle farthest-corner at 83.7% 4.3%, rgba(173, 0, 171, 1) 0%, rgba(15, 51, 92, 1) 90%);
   }

   /* Add styles to the form container */
   .chat-popup .form-container {
       max-width: 300px;
       width: 300px;
       max-height: 450px;
       padding: 10px;
       border-radius: 30px;
       background-color: white;
       position: relative;
       font-size: small;
       background-image: radial-gradient(circle 975px at 2.6% 48.3%, rgba(0, 8, 120, 1) 0%, rgba(95, 184, 224, 1) 99.7%);
   }

   .chat-popup .form-container #opencase {
       margin-top: 10px;
       padding: 10px;
       background: #f7f7f7;
       background-image: linear-gradient(109.6deg, rgba(254, 253, 205, 1) 11.2%, rgba(163, 230, 255, 1) 91.1%);
       border-radius: 15px;
   }

   .chat-popup .form-container #handlecase {
       margin-top: 5px;
       padding: 10px;
       background: #ecfefc;
       border-radius: 15px;
       height: 300px;
   }

   .chat-popup .form-container .form-control-sm {
       width: 100%;
       outline: none;
       border-radius: 15px;
       border: 1px solid #a8a8a8;
       margin: 5px;
       padding: 0 7px;
   }

   /* Full-width textarea */
   .chat-popup .form-container textarea {
       width: 100%;
       padding: 5px;
       border: none;
       resize: none;
       height: 100px;
   }

   /* When the textarea gets focus, do something */
   .chat-popup .form-container textarea:focus,
   .chat-popup .form-container .form-control-sm:focus {
       border-color: #4f82c1;
       outline: none;
   }

   /* Set a style for the submit/send button */
   .chat-popup .form-container .btn {
       background-color: #04AA6D;
       color: white;
       padding: 16px 20px;
       border: none;
       cursor: pointer;
       width: 100%;
       margin-bottom: 10px;
       opacity: 0.8;
   }

   /* Add a red background color to the cancel button */
   .chat-popup .form-container .cancel {
       background-color: #c14962;
       color: white;
       height: 35px;
       width: 35px;
       position: absolute;
       top: 10px;
       right: 10px;
       outline: none;
       border: none;
       border-radius: 50%;
       opacity: 0.8;
       cursor: pointer;
   }

   /* Add some hover effects to buttons */
   .chat-popup .form-container .btn:hover,
   .open-button:hover,
   .cancel:hover {
       opacity: 1;
   }

   .chat-popup input::-webkit-input-placeholder {
       color: #808080 !important;
       font-size: 10px !important
   }

   .chat-popup input::-moz-placeholder {
       color: #808080 !important;
       font-size: 10px !important
   }

   .chat-popup input::placeholder {
       color: #808080 !important;
       font-size: 10px !important
   }

   .chat-popup .form-control-sm {
       color: #808080 !important;
       font-size: 10px !important
   }


   .chatcontainer {
       position: relative;
       width: 100%;
   }

   .chatcontainer .panel {}

   .chatcontainer .panel-body {
       height: 300px;
       padding-bottom: 45px;
       overflow-y: scroll;
   }

   .chatcontainer .panel-body::-webkit-scrollbar {
       display: none;
   }

   .chatcontainer .chat {
       position: absolute;
       bottom: 7px;
       width: 80%;
       margin-left: 10%;
       background-color: #1d66cc;
       border-radius: 30px;
       text-align: center;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .chatcontainer .chat .form-control-sm {
       width: calc(100% - 50px);
       display: inline-block;
       float: left;
   }

   .chat .btn-inverse {
       display: inline-block;
       float: left;
       width: 30px;
       height: 30px;
       margin: 3px;
       border-radius: 50%;
       background-color: #3C908E;
       outline: none;
       border: none;
       color: white;
   }

   .chatreply .QUERY {
       width: 85%;
       display: block;
       padding: 10px 15px;
       border-radius: 10px;
       margin: 15px;
       margin-left: 15%;
       background: linear-gradient(270deg, #5c74a7ff, #4a589aff);
   }

   .chatreply .RESPONSE {
       width: 85%;
       display: block;
       padding: 10px 15px;
       border-radius: 10px;
       margin: 15px;
       margin-right: 15%;
       background: linear-gradient(320deg, #fef555db, #445fc4ef);
   }



   .top .caption {
       position: absolute;
       z-index: 400;
       height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding-left: 5%;

   }

   .caption .bulge {

       color: #bfebff;
       text-shadow: 1px 1px #3c0202;
       border-radius: 10px;
       ;
   }

   .top h1 {
       font-family: "Archivo Black", sans-serif;
       font-weight: 400;
       font-size: 65px;
       font-style: normal;
       color: white;
       text-shadow: 4px 3px black;
   }

   .top h5 {
       color: #f7f7f7;
   }

   .top .header_button{
    background: linear-gradient(320deg, #0c177c, #030d30);
    border: 3px solid white;
   }

   .proxy1 {
       position: absolute;
       z-index: 350;
       bottom: 0;
       width: 480px;
       max-width: 70%;
       max-height: 70vh;
       right: 10px;
   }

   @media (max-width: 870px) {
       .top .caption {
           height: 90vh;
           padding-left: 10px;
       }

       .top h1 {
           text-shadow: 1px 2px black;
           font-size: 43px;
       }
   }