:root {
    --surface-surface-100: #ffffff;
    --gradients-blue-teal: linear-gradient(
        90deg,
        rgba(0, 217, 165, 1) 0%,
        rgba(24, 168, 249, 1) 100%
    );
    --cards-small-box-shadow: 0px 12px 42px -4px rgba(24, 39, 75, 0.12),
        0px 8px 18px -6px rgba(24, 39, 75, 0.12);
}
.bullet{
    font-style: Medium;
    font: 700 "Poppins", sans-serif;
    line-height: 20px;
font-weight: 600;
    text-align: Left;
    vertical-align: Top;
    letter-spacing: -1%	;
    font-size: .9rem;
}

.cards_ {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0.8;
    position: relative;
}
.bonus-card {
    background: linear-gradient(
        150.45deg,
        rgba(40, 11, 123, 1) 0%,
        rgba(17, 15, 131, 1) 100%
    );
    border-radius: 24px;
    padding: 40px 16px 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 22.67px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0.8;
    width: 20rem;
    position: relative;
    overflow: hidden;
}
.content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0.8;
    position: relative;
}
.bonus-offer {
    padding: 5.67px;
    flex-shrink: 0.8;
    width: 96.33px;
    height: 90.67px;
    position: relative;
    box-shadow: 0px 24px 40px 0px rgba(51, 96, 187, 1);
}
.icon {
    position: absolute;
    left: 5.67px;
    top: 5.67px;
    overflow: visible;
}
.text {
    display: flex;
    flex-direction: column;
    gap: 12.04px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0.8;
    position: relative;
}
._100-sharing-bonus {
    color: #ffffff;
    text-align: center;
    font: 700 18px/17px "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
}
.take-advantage-of-our-sharing-bonus-offer-to-double-your-first-deposit-as-you-step-confidently-into-the-trading-world-bonuses-cannot-be-withdrawn {
    color: var(--text-text-light, #ffffff);
    text-align: center;
    font: 500 14px/20px "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
}
.secondary_bonous {
    border-radius: 4px;
    border-style: solid;
    border-color:  #dc3545;
    border-width: 2px;
    padding: 12px 16px 14px 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0.8;
    width: 192px;
    height: 48px;
    position: relative;
    overflow: hidden;
}

.primary_bonous {
    background: linear-gradient(
        87.67deg,
        rgb(255, 0, 0) 0%,
        rgb(255, 0, 0) 100%
    );
    border-radius: 4px;

    color: #ffffff;

    font-size: 12px;
    line-height: 24px;
    padding: 10px 26px;
    font-weight: 500;
    text-align: center;
    min-width: 120px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
}
.master_text {
    text-align: left;
    position: relative;
    align-self: stretch;
}
.font_section_h5 {
    color: #000000;
    font: 700 "Poppins", sans-serif;
    font-size: 1.7rem;
}
.font_section_p {
    color: #47475a;
    text-align: left;
    font: 700 "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: left;
    justify-content: left;
}

.highlight_text {
    /* color: #ff3131; */
}

.card_circel {
    border-radius: 100000px;
    /* padding: 12px; */
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.outer-circle {
    background: transparent;
    padding: 16px;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: flex-start;
    justify-content: flex-start;
    background-image: linear-gradient(
            90deg,
            rgb(255, 255, 255) 0%,
            rgb(255, 255, 255) 100%
        ),
        linear-gradient(
            90deg,
            #29307e 0%,
            rgb(61, 41, 41) 100%
        );

    background-clip: padding-box, border-box;
    background-origin: border-box;
    border: 5px solid transparent;
    border-radius: 100000px;
    box-shadow: 0px 12px 42px -4px rgba(24, 39, 75, 0.12),
        0px 8px 18px -6px rgba(24, 39, 75, 0.12);
}

.card_content {
    border-radius: 100000px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    position: relative;
}

.card_title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.forex_heading {
    color: #000000;
    text-align: center;
    font: 700 24px/28px "Poppins", sans-serif;
    position: relative;
}

.card_heading {
    color: #000000;
    text-align: center;
    font: 700 14px/18px "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.markets-card {
    background: var(--surface-surface-100, #ffffff);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    /* width: 256px; */
    width: 100%;
    position: relative;
    box-shadow: 0px 18px 88px -4px rgba(24, 39, 75, 0.14),
        0px 8px 28px -6px rgba(24, 39, 75, 0.12);
    overflow: hidden;
}
.market_content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}
.markets-forex {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    position: relative;
    overflow: hidden;
}
.icon {
    position: absolute;
    left: 5.82px;
    top: 5.82px;
    overflow: visible;
}
.market_title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.market_heading {
    color: #000000;
    text-align: center;
    font: 700 20px/24px "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
}

.market_product_title {
    color: #47475a;
    text-align: center;
    font: 700 14px/18px "Poppins", sans-serif;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.request-demo-button {
    background:#dc3545;
    border-color:#dc3545;
    border-radius: 4px;
    padding: 12px 20px 14px 20px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 200px;
    height: 40px;
    position: relative;
    box-shadow: var(
        --cards-medium-box-shadow,
        0px 14px 64px -4px rgba(24, 39, 75, 0.12),
        0px 8px 22px -6px rgba(24, 39, 75, 0.12)
    );
    overflow: hidden;
}
.master_primary {
    color: #ffffff;
    text-align: left;
    font: 700 16px/20px "Poppins", sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.master_primary:hover {
    color: #2a0647;
    text-align: left;
    font: 700 16px/20px "Poppins", sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn_container {
    /* padding: 104px 156px 136px 156px; */
    display: flex;
    flex-direction: column;
    gap: 56px;
    /* align-items: flex-start;
    justify-content: center; */
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.btn_content {
    /* padding: 0px 192px 0px 192px; */
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* align-items: center;
    justify-content: flex-start; */
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.account_market_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.account_type_heading {
    color: #000000;
    text-align: center;
    position: relative;
    align-self: stretch;
    font-size: 1.1rem;
}



.background-full-width {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
}

.gradient {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.24) 0%,
        rgba(6, 10, 51, 1) 99.53253269195557%
    );
    width: 200rem;
    height: 100%;
    position: absolute;
}

.ellipse-2 {
    background: #ff50d4;
    border-radius: 50%;
    opacity: 0.3199999928474426;
    width: 367px;
    height: 176.5px;
    position: absolute;
    filter: blur(56.25px);
    top: 500px;
    left: 200px;
}

.vector-2 {
    opacity: 0.699999988079071;
    position: absolute;
    overflow: visible;
    width: 567px;
    height: 376.5px;
}

.video {
    /* width: 100%; */
    /* height: 100%;*/
    /* position: absolute; */
    left: -0.43px;
    top: -296.11px;
}
.cpn-head .cpn-text .cpn-btns .msa_hero_btn {
    margin-left: 56px;
}

.overlay2 {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.24) 5%,
        rgba(0,166, 37, 1) 100%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    left: 2px;
    top: 0px;
}

.hero_title {
    font: 800 44px/52px "Poppins", sans-serif;
}

.hero_subtitle {
    font: 700 20px/28px "Poppins", sans-serif;
}

.hero_desktop {
    padding-left: 27px;
    padding-right: 78px;
    width: 623.9px;
    height: 644.88px;
    position: relative;
    margin-bottom: -220px;
    overflow: hidden;
}
.hero_mobile {
    margin-bottom: 0px;
    display: none;
}

.background-full-width video::before {
    width: 100%;
    height: 920px;
    position: absolute;
    left: 2px;
    top: 0px;
}

.vector-3 {
    position: absolute;
    overflow: visible;
    width: 567px;
    height: 376.5px;
}

.vector-1 {
    position: absolute;
    overflow: visible;
    width: 567px;
    height: 376.5px;
}

.header_banner {
    background: linear-gradient(98.3deg, rgb(0, 0, 0) 10.6%, rgb(0, 5, 55) 97.7%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
  }

  /* Large tablets and small laptops */
  @media (max-width: 1024px) {
    .header_banner {
      height: auto;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .header_banner {
      height: auto;
    }    .cpn-head .title{
        font-size: 1rem;
    }
  }

  /* Large phones and phablets */
  @media (min-width:690px) and (max-width:767px) {
    .header_banner {
      height: auto;
      padding: 10px;
    }
    .request-demo-button{
        height: 40px;
    }
  }
  @media (max-width: 576px) {
    .header_banner {
      height: auto;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .header_banner {
      height: auto; /* Ensure padding to avoid content touching edges */
    }


    .title-lg-s3{
        font-size: 1rem;
    }
    .products_p{
        font-size: .7rem;
    }
    .request-demo-button{

        width:160px;
        height: 40px;
    }
    .master_primary{
        font-size: 1rem;
    }
    .is-transparent .banner{
        padding-top: 10px;
    }
    .banner-inner{
        min-height: 0px;
    }
  }
  @media (max-width: 320px) {

    .header_banner {
      height: auto;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }


    .title-lg-s3{
        font-size: 1rem;
    }
    .products_p{
        font-size: .7rem;
    }
    .request-demo-button{

        width: 220px;
        height: 20px;
    }
    .master_primary{
        font-size: 1rem;
    }
    .is-transparent .banner{
        padding-top: 10px;
    }
    .banner-inner{
        min-height: 0px;
    }
  }



.banner_accounts {
    background-image: url('/hero/account.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  /* Large tablets and small laptops */
  @media (max-width: 1024px) {
    .banner_accounts {
      height: 47vh;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .banner_accounts {
      height: 58vh;
    }
    .cpn-head .title{
        font-size: 1.8rem;
    }
  }

  /* Large phones and phablets */
  @media (max-width: 576px) {
    .banner_accounts {
      height: 50vh;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .banner_accounts {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
    .cpn-head{
        margin-top: 200px;
    }
    .cpn-head .title{
        font-size: 1.6rem;
    }
  }
  @media (max-width: 320px) {

    .banner_accounts {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
    .cpn-head{
        margin-top: 200px;
    }
    .cpn-head .title{
        font-size: 1.2rem;
    }
  }




.education_accounts {
    background-image: url('/hero/research.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  /* Large tablets and small laptops */
  @media (max-width: 1024px) {
    .education_accounts {
        height: 47vh;

    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .education_accounts {
      height: 58vh;
    }
  }

  @media (max-width: 448px) {

    .education_accounts {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
  }
  @media (max-width: 320px) {

    .education_accounts {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
  }



  .partnership {
    background-image: url('/hero/partnership.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  @media (max-width: 1024px) {
    .partnership {
      height: 47vh;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .partnership {
      height: 58vh;
    }
  }

  /* Large phones and phablets */
  @media (max-width: 576px) {
    .partnership {
      height: 50vh;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .partnership {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
  }
  @media (max-width: 320px) {

    .partnership {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
  }



  .platform  {
    background-image: url('/hero/platform.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  @media (max-width: 1024px) {
    .platform {
      height: 47vh;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .platform {
      height: 58vh;
    }
  }

  /* Large phones and phablets */
  @media (max-width: 576px) {
    .platform {
      height: 50vh;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .platform {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
  }
  @media (max-width: 320px) {

    .platform {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
  }

  .promotion  {
    background-image: url('/hero/promotion.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  @media (max-width: 1024px) {
    .promotion {
      height: 47vh;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .promotion {
      height: 58vh;
    }
  }

  /* Large phones and phablets */
  @media (max-width: 576px) {
    .promotion {
      height: 50vh;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .promotion {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
  }
  @media (max-width: 320px) {

    .promotion {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
  }





  .about_us  {
    background: linear-gradient(98.3deg, rgb(0, 0, 0) 10.6%, rgb(0, 5, 55) 97.7%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 58vh;
  }

  @media (max-width: 1024px) {
    .about_us {
      height: 47vh;
    }
  }

  /* Tablets */
  @media (max-width: 768px) {
    .about_us {
      height: 58vh;
    }
  }

  /* Large phones and phablets */
  @media (max-width: 576px) {
    .about_us {
      height: 50vh;
      padding: 10px;
    }
  }

  /* Small phones */
  @media (max-width: 448px) {

    .about_us {
      height: 62vh; /* Ensure padding to avoid content touching edges */
    }
    .cpn-head{
        margin-top: 200px;
    }
  }
  @media (max-width: 320px) {

    .about_us {
      height: 85vh;
      padding: 10px; /* Ensure padding to avoid content touching edges */
    }
    .cpn-head{
        margin-top: 180px;
    }
  }





  .ccm {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .btn-outline-dangers {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
  }

  .btn-outline-dangers:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .sign_up_background_btn{
    border: none!important;
    border-radius: 4px;
    padding: 8px 12px 10px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 28px;
    position: relative;
    overflow: hidden;
}


@media (min-width:991px) {
    .menu_sign_up_mobile {
        display: none;
    }
}


@media (min-width:991px) and (max-width:1132px) {
    .header-navbar nav ul li a {
        font-size: 11px!important;
    }
    }

@media (max-width: 991px) {
    .header-wrap {
        width:100%;
    }

}
.citizen_group_p{
    font-size: .7rem;color:black;font-weight: bold;text-align: left; margin-left: -30%
}
.citizen_group{
    margin-top: 9%;
}






@media (max-width:984px) {
    .citizen_group{
        width: 20%!important;
        margin-top:9%!important; ;

    }
    .brand-logo{
        margin-left: -15%!important;
        margin-top: 9%!important;
    }
    .citizen_group_p{
        margin-left: -80%!important;
    }
  }
  .citizen_group_span{
    font-size: 0.3rem
  }
@media (max-width:445px) {
    .tukki {
        display: none!important;
    }
    .citizen_group{
        width: 20%!important;
        margin-top:9%!important; ;

    }
    .brand-logo{
        margin-left: -15%!important;
        margin-top: 9%!important;
    }
    .citizen_group_p{
        margin-left: -80%!important;
    }
  }
  .citizen_group_span{
    font-size: 0.3rem
  }


@media (max-width:368px) {

.brand-logo{
    margin-left: -5%!important;
    margin-top: 10%!important;
}
.brand-logo a img{
    width: 90%!important;
}

.citizen_group_p{
    font-size: 9px;

}
.content3{
margin-left: -20%;
}
.citizen_group{
margin-top: 9%!important;

}
  }


@media (max-width:340px) {
.content3{
display:none;
}
.brand-logo{
    margin-left: -10%!important;
}
  }
@media (max-width:448px) {
.banner-gfx{
    margin-top: 12%!important;
}
  }







  .btn-icon-shadow {
    background-color: #ffffff; /* White background */
    color: #333333; /* Dark text color */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Animation for shadow */
  }

  .btn-icon-shadow i {
    margin-right: 8px; /* Space between icon and text */
  }

  .btn-icon-shadow:hover {
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    transform: translateY(-2px); /* Slight lift on hover */
  }

  .btn-icon-shadow:active {
    transform: translateY(0); /* Remove lift on click */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Original shadow on click */
  }
  .gradient-icon {
    background: linear-gradient(45deg, #ff4b2b, #ff416c); /* Gradient colors */
    -webkit-background-clip: text; /* Clipping background to text */
    -webkit-text-fill-color: transparent; /* Making text fill color transparent */
    margin-right: 8px;
  }


.msa_hero_btn {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

/* Button wrapper */
.store-btn {
    background: white;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

/* Image inside */
.store-btn img {
    height: 100%;
    width: auto;
    display: block;
}

/* RESPONSIVE SIZE ADJUSTMENTS */
@media (max-width: 639px) {
    .store-btn {
        height: 30px;
        padding: 4px 8px;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .store-btn {
        height: 35px;
    }
}

@media (min-width: 768px) {
    .store-btn {
        height: 35px;
    }
}