@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  background-color: #021615 !important;
}

body {
  padding-top: 8rem;
}

body.tools {
  padding-top: 0;
}

#compoundInterestForm .form-control:focus {
  background-color: white !important;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 .left-side-col .rating-and-other-headings span.fa {
  font-size: 12px;
}

p {
  color: white !important;
}

.container-fluid.main-container-header-1-section img.img-responsive {
    width: 70% ! IMPORTANT;
}

.how-do-we-rate h2,
.how-do-we-rate h3 {
  color: white;
}

.resources_details_main h2 {
  color: white;
}

.academy-details hr {
  color: antiquewhite;
}

.CalcVAT small {
  color: white;
}

.mt-3.article-details-paragraphs div {
    color: white !important;
}

p.error-msg {
  color: red !important;
}

h2,
h3,
h4,
h5 {
  color: white !important;
}

li {
  color: white;
}

.trading_tools h3,
.trading_tools h3,
h4,
.trading_tools h2 {
  color: white !important;
}

button#reloadEconomic {
  background-color: #03BF4E;
  border-radius: 23px;
  padding: .6em 3rem;
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  border: none;
  position: relative;
}

.container .text-muted {
  --bs-text-opacity: 1;
  color: rgb(148 151 155 / 75%) !important;
}

.card {
  background-color: transparent !important;
}

.new-dropdown-expand-top .dropdown-toggle::after {
  display: none;
}

.terms-condition h2,
.terms-condition h2,
.terms-condition li {
  color: white;
}

.terms-condition a {
  color: #03bf4e;
}

.pass-guidelines {
  color: white;
}

.main_right_side .broker-card-gradient.sidebar .text-black {
  --bs-text-opacity: 1;
  color: white !important;
}


section.new-policies-pags.how-rate-brokers-banner {
    text-align: center;
    background-color: transparent;
    width: 100%;
    background-image: url(../../frontend/Images/Resources/resources-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16rem 0 3rem 0;
    margin-top: -12rem;
    margin-bottom: 30px;
}

section.new-policies-pags.how-rate-brokers-banner .content-new-policy-page h1 {
    text-align: left !important;
}


.HeadNavOuter .dropdowns.shop_new_btn span.badge {
  background-color: #03bf4e;
  color: white;
  padding: inherit;
  height: 18px;
  padding: 5px 7px;
  position: relative;
  top: 0px;
  font-size: 10px;
  right: 10px;
  border-radius: 5px;
  font-weight: 700;
}


.academy-volume .container {
  padding-top: 0rem;
}

.checked {
  color: orange;
}

.checked.green {
  color: #03BF4F;
}

.checked.yellow {
  color: orange;
}


ul.pagination li.page-item a.page-link {
  background-color: #042625;
  color: white;
}

ul.pagination li.page-item.disabled span.page-link {
  background-color: #042625;
  color: white;
}


.input-box.new-login.phone_field .iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}

.input-box.new-login.phone_field .iti.iti--allow-dropdown.iti--separate-dial-code .iti__country-list li {
    font-size: 1em;
    margin-bottom: 8px;
    color: #222222;
    line-height: 22px;
}
/*404*/

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

.error-container .error-code {
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
}

.error-container .error-message {
  font-size: 20px;
  margin-bottom: 20px;
  color: #789A99;
  width: 70%;
  margin: 20px auto 20px;
}

.error-container .home-btn {
  border-radius: 5px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  margin-top: 10px;
  background: rgb(3, 191, 79);
  border-radius: 32px;
  padding: 15px 40px;
  transition: 0.4s;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  display: block;
  width: 30%;
  margin: 0 auto;
}

body.new-404-page {
  background-image: url(../../frontend/Images/404errorbg.jpg) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  padding: 6rem 0px 0rem;
  background-position: center center;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

/*Breadcrumb*/

nav.breadcrumb-wrapper {
  height: 0px;
  position: relative;
}

nav.breadcrumb-wrapper ol.breadcrumb {
  position: absolute;
  top: 0;
  left: 50px;
  width: 100%;
}

body.tools nav.breadcrumb-wrapper ol.breadcrumb {
  top: 8rem;
}

nav.breadcrumb-wrapper a {
  color: #0fd45e;
}

nav.breadcrumb-wrapper .breadcrumb-item+.breadcrumb-item::before {
  color: white;
  content: var(--bs-breadcrumb-divider, ">");
}

nav.breadcrumb-wrapper .breadcrumb-item.active {
  color: white;
}

nav.breadcrumb-wrapper.fixed-header {
  display: none;
}

/* Article details page (/details/{news|analysis}/{slug}) -- the shared
   breadcrumb above relies on the nav sitting at height:0 with its <ol>
   absolutely positioned over whatever comes right after it, which only
   works because every other page's last breadcrumb segment is short
   enough to stay on one line. Here the last segment is the article's own
   title, which can be arbitrarily long (and is user-authored, so there's
   no safe assumption about its length) -- once it wraps to 2-3 lines
   nothing reserves space for the extra lines, and they crash straight
   into the <h1> title below. Let the breadcrumb take its own normal-flow
   space on this page instead of overlaying, so it's correct for a title
   of any length rather than tuned to one. */
body.details nav.breadcrumb-wrapper {
  height: auto;
  padding-top: 1rem;
}

body.details nav.breadcrumb-wrapper ol.breadcrumb {
  position: static;
  width: auto;
  /* the base rule's "left: 50px" only has an effect while position is
     absolute -- replace it with padding so the same visual indent is kept
     now that this ol sits in normal flow. */
  padding-left: 50px;
  margin-bottom: 0;
}

/* Course-details hero (academy-course/{slug}) -- same treatment as the
   Academy landing page's hero above, but scoped via the reliable
   body.academy-course class instead of the breadcrumb component's dynamic
   last-item-title class. On this page that dynamic class is the course's
   own title (e.g. "Basics & Products"), which never matches a fixed
   selector, so the breadcrumb was left at its default top:0 position --
   sitting directly behind the fixed header instead of being pushed down
   onto the hero banner, making it effectively invisible. */
body.academy-course nav.breadcrumb-wrapper ol.breadcrumb {
    background: transparent;
    padding: 3.25rem 0 0 0;
    margin-bottom: 0;
}

body.academy-course nav.breadcrumb-wrapper .breadcrumb-item.active {
  color: #fff;
}

body.academy-course nav.breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {
  color: #9fc2b8;
}

/*Academy mobile banner*/


.banner.mobile-banner-main h3 {
  color: white;
  /* text-transform: uppercase; */
  font-weight: 700;
  padding-top: 20px;
}

.banner.mobile-banner-main {
  padding: 20px 40px 0 !IMPORTANT;
  background-size: cover;
  background-repeat: no-repeat;
  align-self: center;
  background-position: center;
  border-radius: 15px;
  margin-bottom: 1.5rem;
}

.banner.mobile-banner-main p {
  color: white;
  font-size: 16px;
}

.banner.mobile-banner-main .col-md-6.logo-col {
  align-self: center;
}

.banner.mobile-banner-main .col-md-2.btn-col {
  align-self: center;
  padding-top: 10%;
}

.banner.mobile-banner-main img.screen-img {
  width: 100% ! IMPORTANT;
}

.banner.mobile-banner-main img.button-img {
  margin: 7px 0;
}

.banner.mobile-banner-main img.logo-cus {
  width: 35% !important;
}

.banner.mobile-banner-main .col-md-4.img-col {
  align-self: end;
}

/*Hover effects on academy*/

.academy-items img:hover,
.academy-main-section .nav-tabs a.nav-link:hover,
a.academy-btn:hover,
.button.green-btn:hover,
.single-volume-product img.lesson_list_img:hover,
.lesson-view-page a.academy-btn-lesson-page:hover,
.lesson-view-page button.academy-btn-lesson-page:hover,
.banner.mobile-banner-main img.button-img:hover,
.resources-page-content-images .image-item a img:hover,
.sponsor_broker_box:hover,
.animation-zoom-ac:hover,
.news-page-latest-news-all:hover,
.news-page-latest-news-first:hover,
.analysis-card:hover,
.first-col-6-main-pages:hover,
.main_card:hover,
section#MenuAnalysis article:hover,
.resources-main:hover,
.broker-inner a.BrokerMenuBlock:hover,
.broker-inner .cmc-card.ig:hover,
.broker-inner .broker-card.ig:hover,
.main-tool .res-main:hover,
.academy-resource-main .res-main:hover,
.left-box-academy:hover,
.login-main a.btn.border-green-btn:hover,
.row.new-resourc-tool-section ul.new-resourc-tool-list li:hover,
.right-box-academy:hover,
.news-new-card-top-main-image-new-class:hover,
.news-page-cards-three.news-new-card-top-main-image:hover,
.news-page-cards-three:hover,
 .academy-small-card:hover, 
 .academy-small-card a:hover,
 .academy-info-card:hover,
 .academy-topic-card:hover,
 .signed-card:hover,
 .join-card:hover,
 a.academy-green-btn:hover {
  transform: scale(0.95) !important;
}

.academy-items img,
.academy-main-section .nav-tabs a.nav-link,
a.academy-btn,
.button.green-btn,
.single-volume-product img.lesson_list_img,
.lesson-view-page a.academy-btn-lesson-page,
.lesson-view-page button.academy-btn-lesson-page,
.banner.mobile-banner-main img.button-img,
.resources-page-content-images .image-item a img,
.sponsor_broker_box,
.animation-zoom-ac,
.news-page-latest-news-all,
.news-page-latest-news-first,
.analysis-card,
.first-col-6-main-pages,
.main_card,
section#MenuAnalysis article,
.resources-main,
.broker-inner a.BrokerMenuBlock,
.broker-inner .cmc-card.ig,
.broker-inner .broker-card.ig,
.main-tool .res-main,
.academy-resource-main .res-main,
.left-box-academy,
.login-main a.btn.border-green-btn,
.row.new-resourc-tool-section ul.new-resourc-tool-list li,
.right-box-academy,
.news-new-card-top-main-image-new-class,
.news-page-cards-three.news-new-card-top-main-image,
.news-page-cards-three,
.academy-small-card, .academy-small-card a, .academy-info-card,
.academy-topic-card,
.signed-card,
.join-card,
a.academy-green-btn {
  transition: transform 0.3s ease !important;
}

.single-volume-product.view-lesson-img:hover #videoPlaceholder {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/*XTB Academy Popup*/

div#xtbAdModal .modal-dialog.modal-dialog-centered {
  max-width: 45%;
}

div#xtbAdModal .modal-dialog.modal-dialog-centered button.btn-close {
  color: white ! IMPORTANT;
  background-color: white;
  opacity: 1;
  padding: 7px 7px;
  border-radius: 100px;
}

/* Capital.com Snippets Popup -- same sizing/close-button treatment as the
   XTB Academy popup above. */
div#snippetsAdModal .modal-dialog.modal-dialog-centered {
  max-width: 36%;
  margin-top: 4%;
}

div#snippetsAdModal {
    overflow: hidden;
}

div#snippetsAdModal .modal-dialog.modal-dialog-centered button.btn-close {
  color: white ! IMPORTANT;
  background-color: white;
  opacity: 1;
  padding: 7px 7px;
  border-radius: 100px;
}

/*Theme switcher*/


.theme-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  z-index: 9999;
  position: relative;
  right: 0px;
}

/* Hide default checkbox */
#themeToggle {
  display: none;
}

.theme-toggle {
  width: 35px;
  height: 35px;
  background: #ddd;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  padding: 3px;
}

.theme-toggle .toggle-icon {
  width: 30px;
  height: 30px;
  background: #03BF4E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Checked state */
#themeToggle:checked+.theme-toggle {
  background: white;
}

#themeToggle:checked+.theme-toggle .toggle-icon {
  /*transform: translateX(27px);*/
  background: #03BF4E;
}

button#reloadWidget {
  color: rgb(255, 255, 255) !important;
  background: #042625 !important;
  border-radius: 50px !important;
  padding: 5px 15px !important;
  width: max-content !important;
  border: none;
}


/*Cookie page*/

.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 14px;
  background: #0f2f2f;
  border-radius: 8px;
  overflow: hidden;
}

/* Header */
.cookie-table thead {
  background: #0a3a3a;
}

.cookie-table thead th {
  text-align: left;
  padding: 12px 15px;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 1px solid #1f4d4d;
}

/* Body */
.cookie-table tbody td {
  padding: 12px 15px;
  color: #cfe8e8;
  border-bottom: 1px solid #1f4d4d;
}

/* Zebra rows */
.cookie-table tbody tr:nth-child(even) {
  background: #0c2626;
}

/* Hover effect */
.cookie-table tbody tr:hover {
  background: #124040;
  transition: 0.2s ease;
}

/* Modal backdrop */

.broker-custom-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal box */
.broker-custom-modal-backdrop .custom-modal {
  border-radius: 10px;
  padding: 0px;
  width: 90%;
  max-width: 700px;
  position: relative;
  padding-right: 0;
  color: #fff;
  font-family: sans-serif;
}

/* Close Button */
.broker-custom-modal-backdrop .modal-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: #0000009c;
  border: none;
  font-size: 24px;
  color: #fff;
  width: 33px;
  cursor: pointer;
  height: 33px;
  padding: 0px 9px;
  border-radius: 100px;
}

/* Modal Layout */
.broker-custom-modal-backdrop .modal-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Text Area */
.broker-custom-modal-backdrop .modal-text {
  flex: 1 1 50%;
}

.broker-custom-modal-backdrop .broker-title {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 15px;
}

.broker-custom-modal-backdrop .broker-subtitle {
  font-size: 55px;
  margin: 0;
}

.broker-custom-modal-backdrop .broker-subtitle span {
  font-weight: bold;
  font-size: 55px;
  display: block;
}

.broker-custom-modal-backdrop .broker-desc {
  font-size: 25px;
  margin: 10px 0;
  line-height: 1.5;
}

.broker-custom-modal-backdrop img.image {
  width: 120px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.broker-custom-modal-backdrop .start-btn {
  background: #fff;
  color: #f13439;
  padding: 10px 45px;
  border: none;
  border-radius: 120px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 20px;
  margin-top: 20px;
}

.broker-custom-modal-backdrop .start-btn:hover {
  background: #ffe5e5;
}

/* Image Area */
.broker-custom-modal-backdrop .modal-image {
  flex: 1 1 50%;
  text-align: center;
}

.broker-custom-modal-backdrop .modal-image img {
  max-width: 100%;
  border-radius: 6px;
}

.sub-title {
  position: relative;
  text-transform: capitalize;
}

.sub-title:not(.has-partial-underline) {
  padding-bottom: 0.4rem;
  border-bottom: 5px solid rgba(3, 191, 78, 1);
}

.sub-title.has-partial-underline {
  display: inline-block;
}

.sub-title.has-partial-underline .underline {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-bottom: 0.4rem;
  border-bottom: 5px solid rgba(3, 191, 78, 1);
}

.sub-title.has-partial-underline .underline.half-left {
  width: 50%;
}

.sub-title.has-partial-underline .underline.half-right {
  left: unset;
  right: 0;
  width: 50%;
}

.sub-title.has-partial-underline .underline.half-center {
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
}


/*Detail page img model*/

#myorignalImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myorignalImg:hover {
  opacity: 0.7;
}

/* The Modal (background) */

#myModalimgopen {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 99999;
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
#myModalimgopen .modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1000px;
}

/* Caption of Modal Image */
#myModalimgopen #caption-model {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
#myModalimgopen .modal-content,
#myModalimgopen #caption-model {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
#myModalimgopen .close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

#myModalimgopen .close:hover,
#myModalimgopen .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}




/*Top Header new design menu*/


.main-nav.new-dropdown-expand-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav.new-dropdown-expand-top a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  display: inline-block;
}

.main-nav.new-dropdown-expand-top a.snippet-login-link {
    display: block;
    color: #03bf4e;
}

/* DROPDOWN (default closed) */
.main-nav.new-dropdown-expand-top .mega-dropdown {
  display: none;
  background: #000000a8;
  padding: 20px;
  margin-top: 10px;
  border-radius: 10px;
  color: white;
  display: flex;
  gap: 30px;
}

/* When open */
.main-nav.new-dropdown-expand-top .show-dropdown>.mega-dropdown {
  display: flex;
}

/* LEFT MENU */
.main-nav.new-dropdown-expand-top .menu-left {
  width: 200px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav.new-dropdown-expand-top .menu-left a {
  padding: 10px 0;
  display: block;
}

/* RIGHT CONTENT */
.main-nav.new-dropdown-expand-top .menu-right {
  flex: 1;
}


.main-nav.new-dropdown-expand-top .btn-main {
    background: #03BF4E !important;
    color: #fff;
    border-radius: 65px;
    padding: 8px 30px;
    font-size: 15px;
    width: 50%;
    display: inline-block;
    margin: 0 auto;
}


.main-nav.new-dropdown-expand-top .btn-outline {
  border: 1px solid #FFF;
  padding: 10px 14px;
  border-radius: 100px;
  color: #FFF;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 10px !important;
}

.main-nav.new-dropdown-expand-top .mega-dropdown {
  display: none;
}

.main-nav.new-dropdown-expand-top .dropdown-toggle.show .mega-dropdown {
  display: flex;
  border-top: 2px solid #368F8F;
}

.main-nav.new-dropdown-expand-top .dropdown-box.academy-box-col {
  /* black opacity layer over the colour gradient, per approved mockup --
     darkens/unifies the card instead of the flat, fully-opaque colour */
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), linear-gradient(145deg, #014A1D, #012A29);
  border-radius: 12px;
  color: #fff;
  border: 2px solid #03BF4E;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box-col-ig {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), linear-gradient(145deg, #2D302E, #0F2A29);
  border-radius: 12px;
  color: #fff;
  border: 2px solid #8D0B0B !important;
  height: 100%;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box-col-cmc {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), linear-gradient(145deg, #063338, #054C57);
  border-radius: 12px;
  color: #fff;
  border: 2px solid #49A8BD !important;
  height: 100%;
  /* anchors the absolutely-positioned .platinum-partner-badge ribbon to
     this card's own corner instead of the dropdown */
  position: relative;
}

/* All three "Minipip Company" dropdown cards (Academy/IG/Capital.com) are
   h-100, so Bootstrap's row stretches the shorter ones to match the
   tallest -- without this they just sit at the top, leaving a dead gap
   at the bottom. A centering flex column distributes that slack evenly
   instead (same fix used for the Brokers mega menu's featured card). */
.main-nav.new-dropdown-expand-top .dropdown-box {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), linear-gradient(145deg, #002B29, #00443F);
  border-radius: 12px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Capital.com's "Platinum Partner" ribbon -- same visual language as the
   badge on the broker detail page (.broker-page-container ...
   .platinum-partner-badge), just re-scoped to this smaller card. */
.main-nav.new-dropdown-expand-top .dropdown-box.broker-box-col-cmc .platinum-partner-badge {
    top: 0;
    right: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 7px 16px 7px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #e8ecee 35%, #b8c0c4 65%, #f7f8f9 100%);
    color: #173b36;
    border-radius: 4px 19px 4px 19px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    border-left: 3px solid #03bf4e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 2;
}


.main-nav.new-dropdown-expand-top .dropdown-box.academy-box-col img.img-responsive {
  width: 38%;
  display: block;
  margin: 0 auto 8px;
  text-align: center;
}

.main-nav.new-dropdown-expand-top .dropdown-box.academy-box-col p {
  display: block;
  width: 100%;
  text-wrap: auto;
  font-size: 14px;
  margin-bottom: 0.6rem;
}

.main-nav.new-dropdown-expand-top .dropdown-box .label-tag {
  background-color: white;
  color: black;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
  margin-top: -30px;
}

/* Header "Minipip Company" dropdown -- IG/Capital.com broker cards: a
   compact logo + title + badge header row, a short tradable-assets line,
   then two label:value stat rows (Rating/FCA, Min.Deposit/Max Leverage).
   Replaces the old, much taller row-based header + "More Information"
   button layout so the card matches the other two cards' height. */
.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-header img.broker-box-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-assets {
  /* .broker-box (the shared homepage/brokers-menu class this card also
     carries) sets a blanket font-weight: 600 -- override it back to a
     normal weight here so only the stat values below are bold */
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.75rem !important;
  /* the "Minipip Company" trigger is a Bootstrap .dropdown-toggle, whose
     white-space: nowrap otherwise inherits all the way down into this
     paragraph and clips the tradable-assets line instead of wrapping it */
  white-space: normal;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 400;
  font-size: 0.85rem;
  padding: 0.65rem 0;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-stats-row + .broker-box-stats-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-stats-row .stat-value {
  font-weight: 700;
}

.main-nav.new-dropdown-expand-top .dropdown-box.broker-box .broker-box-stats-row span.Rating {
  color: #E9A21E;
  margin-left: 6px;
  font-size: 14px;
  letter-spacing: 3px;
}

/*disclaimer Popup*/

div#disclaimerModal .accept_btn {
  background-color: #03BF4E;
  border-radius: 23px;
  padding: .6em 2rem;
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  border: none;
}

div#disclaimerModal .modal-content {
  border-top: 6px solid #03BF4E;
  background-color: #042625;
}

div#disclaimerModal .modal-header .btn-close {
  background-color: white;
}

div#disclaimerModal .modal-header h5.modal-title.m-0 {
  color: white;
}

div#disclaimerModal button.btn.btn-secondary {
  border-radius: 23px;
  padding: .6em 2rem;
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  border: none;
}

div#disclaimerModal .modal-header .btn-close:hover span {
  display: block ! IMPORTANT;
}

div#disclaimerModal span.custom_tooltip {
  position: absolute;
  right: 60px;
  padding: 5px 10px;
  width: 30%;
  border-radius: 20px;
  background-color: #151515;
  color: #fff;
  margin-top: -20px;
  z-index: 99999;
  font-size: 14px;
  font-weight: 600;
}


.eye-icon-signup-page-section i {
  color: white;
  margin-top: 10px;
}

.form-content .input-box.new-login.phone_field input.phone1.form-control {
  padding-left: 120px ! IMPORTANT;
}

.form-content .input-box.new-login.phone_field input.phone1.form-control::placeholder {
  color: #6b6d6c;
}

.input-box.new-login.phone_field select.form-select.me-2 {
  position: absolute;
  background-color: transparent;
  border: none ! IMPORTANT;
  color: #6b6967;
}

.input-box.new-login.phone_field select.form-select.me-2 {
  position: absolute;
  top: 10px;
}

.input-box.new-login.phone_field {
  position: relative;
}


/*Cookie*/

.js-cookie-consent {
  position: fixed;
  background-color: #042625;
  width: 100%;
  padding: 10px 30px 20px;
  color: white;
  z-index: 9999;
}

.js-cookie-consent .flex-wrap {
  display: flex;
}

.js-cookie-consent .cookie-consent__message {
  color: white !important;
  margin-bottom: 0;
  margin-top: 15px;
  margin-right: 20px;
}

.js-cookie-consent button.js-cookie-consent-agree.cookie-consent__agree.cursor-pointer {
  color: rgb(255, 255, 255) !important;
  background: #03BF4E !important;
  border: none;
  border-radius: 100px;
}

.js-cookie-consent button.cookie-consent__decline.px-4.py-2 {
  color: black;
  background: white !important;
  border: none;
  border-radius: 100px;
}

.article-details-main-img.detail-artical-image a img {
  border-radius: 0 !important;
  width: 100%;
}

.container.earing-calender-top {
  width: 80% !important;
  max-width: 80% !important;
  padding: 40px 0;
}

.BlogImageFoot p {
  background-color: transparent;
  padding: 10px 10px;
  border-radius: 0px 0 15px 15px;
  margin-bottom: 0;
}



.main-nav.new-dropdown-expand-top {
  background: #013532;
      padding: 0.51rem 4rem;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 11111;
  margin-bottom: 0rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  transform: translateY(0px);
  /* default below top bar */
  transition: transform 0.3s ease, background 0.2s ease;
}

/* sticky only */
.main-nav.new-dropdown-expand-top.sticky {
  transform: translateY(0);
     padding: 0.51rem 4rem;
}

.main-container-header-1-section {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100%;
  z-index: 9999;

  transform: translateY(70px);
  /* default below top bar */
  transition: transform 0.3s ease, background 0.2s ease;

  background: transparent;
}

/* sticky only */
.main-container-header-1-section.sticky {
  transform: translateY(70px);

  background: linear-gradient(to right,
      rgb(7 88 39),
      rgba(4, 38, 37, 1));
}


.container-fluid.main-container-header-1-section.sticky .container {
  border-radius: 0px !important;
  background-color: transparent !important;
  border: none;
      border-bottom: 2px solid transparent ! IMPORTANT;
}

.main-container-header-1-section.sticky img.img-responsive {
  display: block;
  width: 70% !important;
}

span.textcolourpink {
  color: pink;
}

span.textcolourred {
  color: red;
}

span.textcolourblue {
  color: blue;
}

span.textcolourgreen {
  color: green;
}

span.textcolourgrey {
  color: grey;
}

span.textcolourpurple {
  color: purple;
}

span.textcolourorange {
  color: orange;
}

span.textcolouryellow {
  color: yellow;
}

span.textcolourwhite {
  color: white;
}

span.textcolourblack {
  color: black;
}

footer.LoginDiscInner p {
  color: black !important;
}

.center-btn {
  margin: auto;
  display: none;
}

.slide-up-menu {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  background-color: #042625;
  transition: bottom 0.3s ease-in-out;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 111;
  padding: 2em;
  height: 300px;
  overflow-y: scroll;
}

.show-menu {
  bottom: 0;
}

a {
  text-decoration: none !important;
}

nav#MainNavigation {
  display: flex;
}

.volume-products i.fa.fa-play-circle.fa-3x {
  font-size: 5rem;
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  border-radius: 200px;
}

.enroll-new {
  background-image: url(../../frontend/Images/sopport-img-side.jpg);
  width: 100%;
  background-position: 30%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  padding: 1em 1em 2em;
  color: white;
  min-height: 30rem;
  align-content: end;
}

.row.main-page-row .enroll-new {
  background-image: url(../../frontend/Images/enroll-new.png);
  min-height: auto;
  padding: 2em;
}

.row.main-page-row .enroll-new.new-cmc {
  background-image: url(../../frontend/Images/academy-banner.jpg);
  background-color: #034645;
  min-height: auto;
  padding: 1.2rem 1.2rem 2rem 1.2rem;
  position: relative;
}

.broker-main-container .row.main-page-row .enroll-new.new-cmc {
  background-image: url(../../frontend/Images/cmc_academy-banner1.jpg);
  padding: 1.2rem 2rem 2rem 2rem;
}

.enroll-new.new-cmc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(136deg, #11CFE3, #022D2C);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.broker-main-container .row.main-page-row .enroll-new.new-cmc .col-xl-5 {
  position: relative;
}

.ac-img {
  width: 9rem;
}

.broker-main-container .row.main-page-row .enroll-new.new-cmc .cmc-ab {
  position: absolute;
  width: 8rem !important;
  right: 0;
  bottom: -40px;
  left: 30%;
}

.button.green-btn {
  background-color: #03BF4E;
  border-radius: 23px;
  padding: .6em 3rem;
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  border: none;
  display: none;
  z-index: 11111;
  position: relative;
}

.main-heading-top-broker button#toggleBrokers {
  z-index: 0;
}

.row.main-page-row .enroll-new a.button.green-btn {
  z-index: 0;
}

.main-post-headings img {
  width: 55%;
}

.main-post-headings {
  background-color: #042625;
  padding: 20px 35px;
  border-radius: 20px;
  height: 37vh;
}

.padding-left {
  padding-left: 2rem !important;
}

.padding-right {
  padding-right: 3rem !important;
}

h4.headingh4 {
  color: white;
  font-weight: 700;
  font-size: 1.4rem;
}

.position-relative.common-heading h1 {
  color: white;
  font-weight: 700;
  font-size: 3rem;
}

.position-relative.common-heading h2 {
  color: white !important;
}

.position-relative.common-heading p {
  font-size: 1.1rem;
  color: #034645;
  font-weight: 400;
}

.row.align-items-center.news-cards-main {
  background-color: #042625;
  border-radius: 25px;
}

p.news-text {
  font-size: 1.1rem;
  color: white;
  line-height: 25.5px;
  font-weight: 400;
}

.news-page-nav .nav-link:focus,
.news-page-nav .nav-link:hover {
  color: #03BF4E !important;
}

.fs-1.fw-bold.text-light.login-text-login-page {
  font-weight: 600 !important;
}

.login-heading h1,
.login-heading h2,
span.green-color {
  font-size: 90px;
  line-height: 110px;
  font-weight: 600 !important;
}


.login-text {
  padding-top: 30px;
  width: 30.33% !important;
}

.login-heading p {
  font-size: 30px;
  line-height: 48px;
  padding: 0 3rem;
}

.form-content .input-box.new-login input {
  font-size: 16px;
  font-weight: 400;
  color: white !important;
  background-color: transparent;
  border-color: #ffffff47;
  margin: 0;
}


.login_main_row .form-content .input-box.new-login input:-webkit-autofill,
.login_main_row .form-content .input-box.new-login input:-webkit-autofill:hover,
.login_main_row .form-content .input-box.new-login input:-webkit-autofill:focus,
.login_main_row .form-content .input-box.new-login input:-webkit-autofill:active {
  /* -webkit-box-shadow: 0 0 0 30px #061c18 inset !important;
    -webkit-text-fill-color: white !important;*/
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #061c18 inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  caret-color: white !important;
}


.signup-form .form-content .input-box input:-webkit-autofill,
.signup-form .form-content .input-box input:-webkit-autofill:hover,
.signup-form .form-content .input-box input:-webkit-autofill:focus,
.signup-form .form-content .input-box input:-webkit-autofill:active {
  /* -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: white !important; */
  transition: background-color 5000s ease-in-out 0s;
}


/*Password Eye*/

.password-container {
  position: relative;
}

.password-container input[type="password"],
.password-container input[type="text"] {
  width: 100%;
  padding: 12px 36px 12px 12px;
  box-sizing: border-box;
  background-color: transparent;
  color: white;
}

.password-container input[type="password"]::placeholder,
.password-container input[type="text"]::placeholder {
  color: white;
}

.reset-pass-page .form-group.row {
  margin-top: 20px;
}

.password-container .fa-eye {
  position: absolute;
  top: 28%;
  right: 5%;
  cursor: pointer;
  color: lightgray;
  font-size: 20px;
  color: white;
}

.pegination-container p.small.text-muted {
  margin-right: 20px;
  color: white !important;
}

.pegination-container .page-item:first-child .page-link {
  border-radius: 15px 0px 0px 15px;
}

.pegination-container .page-item:last-child .page-link {
  border-radius: 0px 15px 15px 0px;
}

.header-navbar-1 .navbar-top {
  /* background-color: #042625; */
  justify-content: center;
}

.header-navbar-1 .navbar {
  height: 50px;
  font-weight: 900;

}

.header-navbar-1 .navbar,
.navbar-item {
  height: 50px;
  font-size: 12px;
  font-weight: 900;
}

/* Chrome, Safari */
input:-webkit-autofill {
  background-color: transparent !important;
  /* Set background color */
  color: white !important;
  /* Set text color */
  transition: background-color 5000s ease-in-out 0s;
  /* Prevent background from changing */
}

/* Firefox */
input:-moz-autofill {
  background-color: transparent !important;
  color: white !important;
}

input:focus {
  background-color: transparent !important;
  /* Keep the same background color on focus */
}

.header-navbar-1 .logo-circle {
    border-radius: 50%;
    transition: background-color 0.3s ease;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    text-align: center;
    color: #ffffff;
    border: none;
    background-color: #ffffff21;
    padding: 0 8px ! IMPORTANT;
}

.header-navbar-1 .social-icons {
  display: flex;
}

.header-navbar-1 .social-icons a {
  margin-right: 10px;
}

.header-navbar-1 .social-icons a:last-child {
  margin-right: 0;
}

.header-navbar-1 .social-icons a span:hover,
.header-navbar-1 .social-icons a svg:hover,
.header-navbar-1 .social_icons svg.p-1.logo-circle:hover {
  background-color: #03BF4F;
  border-radius: 50%;

}

#HeadSearch {
    border: none;
    max-width: 38px;
    position: relative;
    float: right;
    background-color: #ffffff21;
    padding: 5px 3px;
    border-radius: 50px;
    overflow: hidden;
    height: 38px;
    -o-transition: 1s;
    -moz-transition: 1s;
    -khtml-transition: 1s;
    -webkit-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
    margin-left: 10px;
    margin-right: 10px;
}

#HeadSearch .HeadFieldButton {
  width: 0% !important;
  float: left !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  border: 0px !important;
  font-size: 12px;
  line-height: 20px;
  outline: none;
  background-color: transparent;
  color: white;
}

#HeadSearch .HeadSubmitButton {
    background-color: transparent;
    width: 32px !important;
    padding: 0px !important;
    background-position: center center;
    background-size: 20px;
    background-repeat: no-repeat;
    position: absolute;
    top: 7px;
    right: 3px;
    border: 0px !important;
}

#HeadSearch:hover {
  max-width: 320px;
}

#HeadSearch:hover .HeadFieldButton {
  width: 68% !important;
}


#HeadSearch ::-webkit-input-placeholder {
  color: #fff;
}

#HeadSearch :-ms-input-placeholder {
  color: #fff
}

#HeadSearch ::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

#HeadSearch :-moz-placeholder {
  color: #fff;
  opacity: 1;
}


/* STANDARD DROP DOWN MENU */

#MainNavigationMobile .navbar {
  overflow: hidden;
  width: 100%;
  margin: 0 !important;
  z-index: 23;
}

#MainNavigationMobile .navbar a {
  float: left;
  font-size: 0.90em;
  color: #ffffff;
  text-align: center;
  padding: 0 10px !important;
  text-decoration: none;
  line-height: 45px;
  margin: 0 5px !important;
}

.dropdown {
  float: left;
  overflow: hidden;
  z-index: 23;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #ffffff;
  padding: 0 10px !important;
  background-color: inherit;
  font: inherit;
  margin: 0 !important;
  line-height: 45px;
}

.dropdown .dropbtn a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 45px;
  padding: 0 10px !important;
}

#MainNavigationMobile .dropdown .dropbtn a {
  color: #242424;
  font-size: 18px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #054543;
  width: 270px;
  top: 45px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 24;
}

.dropdown-content .header {
  background: #03bf4e;
  padding: 16px;
  color: #ffffff;
  font-size: 1.20em;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.column {
  float: left;
  width: 100%;
  padding: 0 0;
  height: auto;
}

.column a.Tier2 {
  float: none;
  color: #ffffff;
  padding: 15px 0px;
  font-size: 1.3em;
  text-decoration: none;
  display: block;
  text-align: left;
  /* border-bottom: 1px solid #ffffff; */
  margin: 0px !important;
}

.column a.Tier2:hover {
  background-color: transparent;
  color: #03bf4e;
}

.column .res-main a.Tier2:hover {
  color: #ffffff;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* .Menu228 .row {
  display: none;
} */

.Menu228 {
  padding: 10px !important;
}


.Menu131 {
  width: 100% !important;
  left: 0 !important;
}

.Menu131 .row {
  width: 270px !important;
  max-width: 15%;
  float: left !important;
}

.Menu203 {
  width: 100% !important;
  left: 0 !important;
}

.Menu203 .row {
  width: 270px !important;
  max-width: 15%;
  float: left !important;
}

.ArticlesShow {
  float: right;
  width: 85%;
  padding: 0 1.8rem;
  border-left: 1px solid #36908F;
}

.ArticlesShow h2 {
  color: #ffffff;
  /* margin-left: 1%; */
  margin-bottom: 20px;
  position: relative;
}

.ArticlesShow h2::after {
  content: "";
  position: absolute;
  width: 6rem;
  height: .4rem;
  background-color: #03BF4E;
  display: block;
  margin-top: .4rem;
}

/***************/
/*Menu css Start*/
/********************/

/*Exist Menus*/
.news-page-first-heading-news.position-absolute.top-0.start-0.news-page-navbar-section-top-third-navbar.search_page {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.search_head {
  color: white !important;
}

/* TOP STRIP NAVIGATION STYLES */

.HeadNavOuter {
  /*  width:100%;
   height:auto;
    float:left;
     background-color:white;
      height:45px;
       position: -webkit-sticky;

  position: sticky;
  top: 0; z-index:9;*/
}

nav.HeadNavInner {
  margin: 0 auto;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
}

.ArticlesShow .resources-main img.image {
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
}


/* HOME HEADER STYLES */

.HomeHeadOuter {
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  background-color: #054543;
  background-image: url('../../images/mainBG2.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

header.HomeHeadInner {
  width: 95%;
  max-width: 1300px;
  height: auto;
  padding: 60px 0 40px 0;
  margin: 0 auto;
  position: relative;
}

header.HomeHeadInner #HeadDetails {
  width: 95%;
  margin: 0 auto 50px auto;
}

header.HomeHeadInner #HeadDetails h1 {
  text-align: center;
  color: #ffffff;
  font-size: 4em;
}

header.HomeHeadInner #HeadDetails h2 {
  text-align: center;
  color: #ffffff;
}

header.HomeHeadInner #HeadDetails p {
  text-align: center;
  color: #ffffff;
  font-size: 1.20em;
  font-family: DefaultBold;
}



.Top {
  position: absolute;
  top: 30px;
  left: 40px;
  margin-left: auto;
  z-index: 9999;
  width: 60px;
  height: 60px;
  background-color: #03bf4e;
  border-radius: 100%;
  background-image: url(../Images/upwhite.png);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: center center;
  cursor: pointer;
}

.Top:hover {
  background-color: #054543;
}

.Top.fixed {
  position: fixed;
  top: 90%;
}

/* MOBILE SLIDE OUT MENU */


.sidenav a.shop_menu_mobile .NavLink {
  padding-top: 15px;
}

.sidenav a.shop_menu_mobile span.badge {
  background-color: #03bf4e;
  color: white;
  padding: inherit;
  height: 18px;
  padding: 5px 7px;
  font-size: 10px;
  border-radius: 5px;
  font-weight: 700;
  position: relative;
  right: -58px;
  top: -34px;
}

.sidenav {
  height: 100%;
  width: 0;
  display: none;
  position: fixed;
  z-index: 999999;
  top: 0;
  right: 0;
  background-color: #054543;
  overflow-x: hidden;
  padding: 60px 40px;
  transition: 0.5s;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #ffffff;
}

#NavLogo {
  width: 100%;
  max-width: 100px;
  height: auto;
  float: left;
  border: none;
  margin-bottom: 20px;
}

.sidenav a .NavLink {
  color: #ffffff;
  width: 100%;
  float: left;
  padding: 0 0;
  font-size: 1.30em;
}

button.accordion-button {
  padding: 0;
}

.accordion-button.dd::after {
  background-image: url(../../frontend/Images/Down.svg) !important;
}

/* .sidenav a .NavLink:hover {
  color: #03bf4e;
} */

.sidenav a .SubNavLink {
  color: #ffffff;
  width: 100%;
  float: left;
  padding: 0px 0 10px 0;
  font-size: 1rem;
}

.accordion-body {
  padding: 0 !important;
}

.sidenav a .SubNavLink:hover {
  color: #03bf4e;
}

#MenuSocial {
  width: 100%;
  margin: 30px 0 0 0;
  float: left;
}

#MenuSocial .SocialIcon {
  float: left;
  width: 35px;
  margin: 0 10px 0 0;
}

#MenuSocial .SocialIcon img {
  width: 35px;
  filter: invert(1);
}


#MenuSocial .social-icons.ml-auto a.navbar-brand {
  display: inline-block;
}

#MenuSocial .social-icons.ml-auto svg.logo-circle {
  border-radius: 50%;
  transition: background-color 0.3s ease;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  text-align: center;
  color: #ffffff;
  border: 1px solid #ffffff;
  background-color: transparent;
}

#MenuSocial .SocialIcon svg {
  width: 100%;
  height: auto;
  padding: 0;
  float: left;
  display: block;
  position: relative;
}

#MenuSocial .SocialIcon svg path {
  fill: #ffffff !important;
}

#MenuSocial .SocialIcon svg:hover path {
  fill: #03bf4e !important;
}

.dropmenu {
  display: none;
  position: absolute;
  top: 5.5rem;
  z-index: -1;
  align-items: center;
  color: #fff;
  border-radius: 1.4rem;
  /* overflow: hidden; */
  padding: 1.17rem;
  border: 1.08px solid transparent;
  background: linear-gradient(to bottom, rgba(2, 31, 29, 1) 0%, rgba(2, 31, 29, 1) 100%) padding-box, linear-gradient(145deg, rgba(20, 94, 86, 1), rgba(5, 106, 79, 1), rgba(5, 81, 79, 1), rgba(20, 94, 86, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  padding-bottom: 3rem;
}


/* STANDARD DROP DOWN MENU */

.HeadNavOuter .navbars {
  overflow: hidden;
  width: 100%;
  margin: 0 !important;
  z-index: 23;
  padding: 0;
  display: flex;
  justify-content: center;
}

.HeadNavOuter .navbars a {
  float: left;
  font-size: 1.1rem;
  color: #ffffff;
  text-align: center;
  padding: 0 10px !important;
  text-decoration: none;
  line-height: 45px;
  margin: 0 5px !important;
}

.HeadNavOuter .dropdowns {
  display: flex;
  float: left;
  overflow: hidden;
  z-index: 23;
  /* height: 6vh; */
}

.HeadNavOuter .dropdowns .dropbtn {
  border: none;
  outline: none;
  color: #ffffff;
  padding: 0 7px !important;
  background-color: inherit;
  font: inherit;
  margin: 0 !important;
  line-height: 35px;
}

.HeadNavOuter .dropdowns .dropbtn a {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 2rem;
  padding: 0 .5rem !important;
}

.HeadNavOuter .navbars a:hover,
.dropdowns:hover .dropbtn {
  background-color: #03bf4e;
  border-radius: 2rem;
}

.dropdowns:hover .dropbtn a {
  color: white !important;
}

a.btn.btn-secondary.rounded-5.ms-2 {
  padding: .4rem 1.2rem;
}

.HeadNavOuter .dropdowns-content {
  display: none;
  position: absolute;
  background-color: #042625;
  width: 270px;
  top: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 24;
}

.HeadNavOuter .dropdowns-content .header {
  background: #03bf4e;
  padding: 16px;
  color: #ffffff;
  font-size: 1.20em;
}

.HeadNavOuter .dropdowns:hover .dropdowns-content {
  display: block;
}

.HeadNavOuter .column {
  float: left;
  width: 100%;
  padding: 0 0 !important;
  height: auto;
}

.HeadNavOuter .column a.Tier2 {
  float: none;
  color: #ffffff;
  padding: 4px 4px;
  font-size: 1em;
  text-decoration: none;
  display: block;
  text-align: left;
  /* border-bottom: 1px solid #ffffff; */
  margin: 0px !important;
}


.HeadNavOuter .column a.Tier2:hover {
  background-color: transparent;
  color: #03bf4e;
}

.HeadNavOuter .row:after {
  content: "";
  display: table;
  clear: both;
}


.HeadNavOuter .Menu228 .row {
  display: none;
}

.HeadNavOuter .Menu228 {
  padding: 10px !important;
}


.HeadNavOuter .Menu131 {
  width: 100% !important;
  left: 0 !important;
}

.HeadNavOuter .Menu131 .row {
  width: 270px !important;
  max-width: 15%;
  float: left !important;
  margin: 0;
}

.HeadNavOuter .Menu203 {
  width: 100% !important;
  left: 0 !important;
}

.HeadNavOuter .Menu203 .row {
  width: 270px !important;
  max-width: 15%;
  float: left !important;
  margin: 0;
}

.HeadNavOuter .ArticlesShow {
  float: right;
  width: 80%;
  padding: 30px;
  border-left: 1px solid #36908F;
}

.HeadNavOuter .ArticlesShow h2 {
  color: #ffffff;
}

.HeadNavOuter .dropdowns:hover .dropdowns-content .row {
  margin: 0;
}


/* MENU ANALYSIS LISTINGS */

section#MenuAnalysis {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

section#MenuAnalysis article {
  float: left !important;
  border-radius: 18px;
  overflow: hidden;
  width: 100% !important;
  margin: 0% !important;
  background-color: transparent;
  display: flex;
  align-items: start;
  padding: 0.5rem 1rem;
  border: 0.11rem solid transparent;
}

section#MenuAnalysis article:hover {
  border: 0.11rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to right, #022927, #012321) padding-box, linear-gradient(309deg, #0E3A37, #186762) border-box !important;
  color: #fff !important;
  padding: 1rem;
}

section#MenuAnalysis article .Text {
  float: left;
  width: 100%;
  /* height: 270px; */
  overflow: hidden;
  padding: 10px 20px;
  position: relative;
  text-align: left;
}

section#MenuAnalysis article .Text h2 {
  font-size: 1rem;
  color: #fff !important;
  padding-bottom: 6px;
  text-align: left !important;
  line-height: 30px !important;
  /*  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;*/
  margin-bottom: 0;
}

section#MenuAnalysis article .Text h2::after {
  display: none;
}

section#MenuAnalysis article:hover h2 {
  color: #ffffff !important;
}

/*section#MenuAnalysis article:hover h2.HoverNeutral {
  color: #7F7F7F !important;
}

section#MenuAnalysis article:hover h2.HoverBearish {
  color: #860000 !important;
}*/

.Text p small {
  color: #789A99;
}

section#MenuAnalysis article .Text p.text {
  font-size: 1rem;
  text-align: left !important;
  margin-bottom: 0;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff !important;
}

.Text p {
  color: #789A99 !important;
}

section#MenuAnalysis .StatusNeutral {
  text-align: right;
  font-size: 15px;
}

section#MenuAnalysis p.BlogStat {
  font-size: 1rem !important;
  color: #789A99 !important;
  margin-bottom: 0;
}

section#MenuAnalysis article .Image {
  height: 9rem;
  float: left;
  width: 22rem;
  background-color: #1a2229;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
}

/*
.NewsText {
  height: 220px !important;
} */


.main-container-for-second-nav-section-bg {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.1);
  /*    position: fixed;
    top: 90px;
    width: inherit;
    z-index: 1030;
    transition: top 0.4s linear;*/
}

section#MenuAnalysis a {
  width: 49% !important;
  float: left !important;
  clear: none !important;
  padding: 0px 0px !important;
  /* margin: 0 1% !important; */
  position: relative !important;
  overflow: hidden !important;
}

section#MenuAnalysis a:hover {
  display: block;
  padding: 0 !important;
}


/* POP UP */

#SubscribeOverlayOuter {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999999999999999999999999999999999999999;
  background-color: rgba(0, 0, 0, 0.8);
}

#SubscribeOverlay {
  width: 80%;
  background-color: #054543;
  position: fixed;
  border-radius: 18px;
  padding: 30px 30px 10px 30px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  top: 30vh;
  z-index: 99999999999999999999999999999999999999999;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.BlankSection {
  float: left;
  width: 100%;
}

#MegaMenuIcon {
  display: none;
}

nav#MainNavigationMobile {
  display: none;
}




/* CHILD BROKER PAGES */

.HeadNavOuter a.BrokerMenuBlock {
  width: 96% !important;
  background-color: #021615;
  border-radius: 12px;
  border: 0px solid #d6d6d6;
  padding: 5px 20px !important;
  margin: 0 2% 10px 2% !important;
  position: relative;
  float: left;
  overflow: hidden;
}

.HeadNavOuter a.BrokerMenuBlock:hover {
  display: block;
  background-color: #021615 !important;
  padding: 5px 20px !important;
}

.HeadNavOuter .MenuIntroImage,
.brokers-custom .MenuIntroImage {
  width: 25%;
  border: 1px solid #d6d6d6;
  max-width: 50px;
  height: 50px;
  border-radius: 12px;
  float: left;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px;
  background-color: #ffffff;
  margin-right: 1rem;
}

.HeadNavOuter .MenuIntroText {
  width: 70%;
  float: right;
  padding: 0 0 0 0 !important;
  margin: 0px !important;
}

.HeadNavOuter .MenuIntroText h4 {
  color: white;
  text-align: left;
  margin: 0px 0px 5px 0px !important;
  padding: 0px !important;
  font-size: 1em !important;
  line-height: 20px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.HeadNavOuter .MenuIntroText p {
  color: #242424;
  text-align: left;
  margin: 0px !important;
  padding: 0px !important;
  line-height: 0;
}

.HeadNavOuter .MenuIntroText img {
  max-width: 90px;
}

.HeadNavOuter a.CompMenuBlock {
  width: 96% !important;
  background-color: #021615;
  border-radius: 12px;
  border: 0px solid #ffffff;
  padding: 0 0 !important;
  margin: 0 2% 10px 2% !important;
  position: relative;
  float: left;
  overflow: hidden;
  color: wheat !important;
  text-align: center;
  font-size: 0.75em !important;
}

.HeadNavOuter a.CompMenuBlock:hover {
  display: block;
  background-color: #021615 !important;
  padding: 0 0 !important;
  color: white !important;
}

.HeadNavOuter .MenuIntroText span.fa.fa-star.checked {
  color: orange !important;
}

.HeadNavOuter .dropdowns:hover .dropdowns-content .row.rating-row {
  display: block;
  height: 0;
  position: absolute;
  top: 15px;
}

/***************/
/*Menu css End*/
/********************/



/* .header-navbar-1 .search-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
  cursor: pointer;
  background-color: #f2f2f2;
  color: black;
} */
.NavLink,
.SubNavLink {
  padding: 10px;
  text-decoration: none;
  color: black;
}

/* .NavLink:hover,
.SubNavLink:hover {
  background-color: #ddd;
} */

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.accordion-item {
  background-color: transparent !important;
  border: none !important;
}

.accordion-header {
  border-bottom: none !important;
  background-color: transparent !important;
}

.accordion-button:not(.collapsed) {
  color: #ffffff;
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  background-color: transparent !important;
  border: none !important;
}

.accordion-button {
  color: white;
  background-color: transparent !important;
}

.accordion-button:focus {
  border-color: none !important;
  box-shadow: none !important;
}

/* button.accordion-button.collapsed {
  padding: 0 0 20px 0;
} */

.header-navbar-1 .search-icon {
  position: absolute;
  top: 8%;
  right: 10px;
  left: 250px;
  cursor: pointer;
  background-color: #042726;
  color: rgb(255, 255, 255);
}

.header-navbar-1 .input-bg {
  background-color: #042726;
  color: white;
  border: none;
  outline: none;
  border-bottom: none;
  font-size: 16px;
  margin-right: 55px;
  padding: 0px 0px;
  margin-top: 5px;
}

/* .header-navbar-1 .nav-item a {
  font-size: 1rem;
  padding: 5px 22px;
  font-weight: 400;
  background-color: #868887;
} */

.header-navbar-1 .nav-item .signup {
  background-color: #03BF4F;
  color: white;
  padding: .4rem 1.2rem;
}

.header-navbar-1 .search-input {
  opacity: 0;
  width: 0;
  padding-left: 30px;
  transition: opacity 0.3s ease, width 0.3s ease;
  border: none;
  border: 1px solid #ccc;
  outline: none;
}

/* .header-navbar-1 .search-bar:hover .search-icon {
  background-color: #03BF4F;
} */

.header-navbar-1 .search-bar:hover .search-input {
  opacity: 1;
  width: 200px;
  /* Adjust the search input width */
  border-radius: 20px;

}

/* .header-navbar-1 .logo-circle:hover {
  background-color: #03BF4F;
} */

.header-navbar-1 .navbar-item {
  background-color: #03BF4F;
}

/* seccond nav bar top */

.header-navbar-2 .navbar {
  height: auto;
  font-size: 20px;
}

.header-navbar-2 .navbar-nav {
  margin-left: 0px !important;
  margin-right: 10px;
}

.header-navbar-2 .navbar-nav .navbar-item {
  /* margin-left: 15px; */
  margin-right: 5px;
}

.header-navbar-2 .nav-link {
  margin-right: 20px;
  padding: 5px;
  font-size: 16px;
  color: #000000;
}

.header-navbar-2 .navbar-brand {
  margin-left: 10px;
}

.header-navbar-2 .navbar-brand img {
  height: 40px;
  /* Adjust the height as needed */
}

.header-navbar-2 .shadow-bottom {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

.main-container-for-second-nav-section-bg {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.1);
}


.main-container-header-1-section .container {
  width: 85% !important;
  max-width: 85% !important;
  padding: 0;
  background-color: rgba(18, 119, 58, 0.1);
  padding: 0 1rem;
  border-radius: 3rem;
  border: 1px solid rgba(7, 114, 110, 1);
  margin: 1.5rem auto;
}

img.img-responsive {
  display: block;
}

.login-form {
  margin-right: 100px;
  margin-top: 100px;
  margin-left: 60px;
  /*  position: relative;
  top: 16%;*/
  color: white;
}

ul.footer-links li {
  text-decoration: underline;
}

.footer-content.container {
  color: white;
}

/* Login Page css */

.login-container-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0rem;
}

.form-content .input-box input {
  font-size: 14px;
  padding: 15px 0px !important;
}

.row.login_main_row {
  margin-bottom: 5rem;
}

.login-container .login-image {
  margin-left: 1rem !important;
  /* width: 55.66667%; */
  /* width: 40%; */
  width: 55%;
  height: auto;
}

.login_main_row .login-text {
  width: 34% !important;
  padding-top: 0px;
}

.login_main_row .login-text .login-form {
  background-color: #021d1c;
  border: 2px solid #0e433d;
  border-radius: 20px;
  padding: 30px 30px;
  margin-top: 25px;
}

.login-container .bg-image {
  position: relative;
  left: 2%;
}

.login_main_row .bg-image img.img-fluid {
  width: 55% ! IMPORTANT;
  display: block;
  margin: 50px auto 0;
}



ul#loginTabs {
  background: rgba(7, 50, 49, 1);
  border-radius: 3rem;
  border: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: .3rem;
}

ul#loginTabs .nav-link.active {
  color: rgba(3, 191, 78, 1) !important;
  border-radius: 2rem !important;
  width: 100% ! IMPORTANT;
  max-width: 100% !important;
  padding: .5rem 1.7rem;
  background-color: white;
}

ul#loginTabs li.nav-item {
  width: 50%;
}

ul#loginTabs .nav-link {
  color: rgba(77, 175, 173, 1) !important;
  border-radius: 2rem !important;
  background-color: rgba(7, 50, 49, 1);
  width: 100%;
}


.second-login-bg-image {
  position: absolute;
  top: 60%;
  bottom: 0;
  left: 37%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 50%;
}

.second-login-bg-image img {
  width: 160px;
  height: 160px;
  margin-bottom: 20px;
}

.second-login-bg-image h2 {
  /* text-align: center; */
  color: #ccc;
  font-size: 48px;
  font-weight: 900;
}

/* login form */


.container .forms {
  height: 100%;
  width: 100%;
  background: #fff;
  display: flex;
}

.container .form-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* width: 100%; */
}

.container .form-content-section {
  display: block !important;
}


.form-content .login-form,
.form-content .signup-form {
  /* width: calc(100% / 2 - 25px); */
  width: 45%;
}

.forms .form-content .title {
  position: relative;
  font-size: 24px;
  font-weight: 500;
  color: white;
  margin-bottom: 20px;
}

.forms .form-content .title:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 25px;
  background: #ffffff;
}

.forms .signup-form .title:before {
  width: 20px;
}

.forms .form-content .input-boxes {
  margin-top: 30px;
}

.forms .form-content .input-box {
  display: block;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  position: relative;
}

.form-content .input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #4c5d5a;
  transition: all 0.3s ease;
  background-color: transparent;
  color: white !important;
}

.form-content .input-box input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  /* replace #fff with your desired background */
  -webkit-text-fill-color: #000 !important;
  /* set your text color */
  transition: background-color 5000s ease-in-out 0s;
}

.forms .form-content .input-box div.countryCodeWrapper {
  width: 85px;
}

.forms .form-content .input-box select.countryCode {
  border-color: #ffffff47;
  margin: 0;
  width: 100%;
  outline: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #4c5d5a;
  transition: all 0.3s ease;
  background-color: transparent;
  padding: 15px 0px !important;
  border-radius: 0px;
  color: #6b6967;
}

.form-content .input-box.country_code_added input.user_login {
  max-width: 80%;
  width: calc(100% - 110px);
  display: inline-block;
  padding-left: 20px ! IMPORTANT;
}


/* .form-content .input-box input:focus,
.form-content .input-box input:valid {
  border-color: #7d2ae8;
} */
.form-content .input-box i {
  position: absolute;
  /* color: #7d2ae8; */
  font-size: 17px;
}

.forms .form-content .text {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

.forms .form-content .text a {
  text-decoration: none !important;
  color: #03bf4f;
}

.forms .form-content label:hover {
  text-decoration: none;
}

.forms .form-content .button {
  color: #fff;
  /* margin-top: 40px; */
}

.forms .form-content .button input {
  color: #fff;
  background: #03BF4F;
  border-radius: 32px;
  padding: 0;
  cursor: pointer;
  transition: all 0.4s ease;
  border: none;
  margin-top: 10px;
}

.forms .form-content .button input:hover {
  background: #03BF4F;
}

.forms .form-content .button input:focus {
  color: #ffffff;
  background: #03BF4F !important;
}

.forms div#next-signup label {
  color: white;
  cursor: pointer;
  margin-top: 10px;
}

.forms .form-content label:hover {
  text-decoration: none;
}

.forms .form-content .login-text,
.forms .form-content .sign-up-text {
  text-align: center;
  margin-top: 5px;
}

.input-box input::placeholder {
  margin: 0px;
  padding: 0px;
}

.container #flip {
  display: none;
}

.forgot-password {
  text-align: right;
}

.forgot-password a {
  color: #03BF4F;
}


/*Reset*/

.reset-pass-page button.SubmitLoginButton.btn.btn-primary {
  color: #fff;
  background: #03BF4F;
  border-radius: 32px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  border: none;
  margin-top: 20px;
}

/* disclamer login form */

.footer-disclaimer {
  background-color: #031D1C;
  padding: 30px 0px;
  border-radius: 5px;

}

.footer-disclaimer h6,
.footer-disclaimer h3 {
  font-size: 1rem;
  line-height: 1.6rem;
  color: white;
}

.footer-disclaimer h6 a,
.footer-disclaimer h3 a {
  color: white !important;
  text-decoration: underline !important;
}

.footer-disclaimer a:hover,
.disclaimer-broker a:hover {
  color: #03bf4e ! IMPORTANT;
  transition: 0.3s;
}


/*Otp Screen*/


.otp-verification-screen button.btn-primary.ot-verify-btn {
  color: #fff;
  background: #03BF4F;
  border-radius: 32px;
  padding: 10px 5px;
  cursor: pointer;
  transition: all 0.4s ease;
  display: block;
  width: 100%;
  border: none;
}

.otp-verification-screen a.btn.btn-link {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

.otp-verification-screen input.form-control {
  background-color: transparent !important;
  color: white;
}


.otp-verification-screen .login-text {
  padding-top: 60px;
  width: 30.33% !important;
}

/*

/* footer */

.footer {
  background-color: #042626;
  padding: 15px 0 10px;
  position: relative;
  z-index: 99;
}

.footer-logo {
  width: 200px;
  height: 50px;
  margin-bottom: 25px;
  margin-right: 200px;
  margin-top: 25px;
}

.footer-icon {
  font-size: 24px;
  margin: 0 5px;
  /* margin-block-end: 200px; */
  /* filter: grayscale(100%); */
  /* margin-right: 400px; */
  /* text-decoration: none; */
}

.footer-heading {
  color: #03BF4F;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
}


.footer-links {
  margin-bottom: 10px;
  list-style-type: none;
  padding-left: 0;
  color: aliceblue;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
}

.social-icons-footer {
  display: flex;
  margin-right: 0;
  font-size: 24px;
  margin-bottom: 15px;
  width: 100%;
  justify-content: end;
}

.footer-brand-icon {
  text-decoration: none;
  margin-right: 20px;
}

.footer-brand-icon img {
  text-decoration: none;
  margin-right: 20px;
  width: 40px;
  margin-top: 15px;
}

.footer-brand-icon span {
  font-size: 30px;
  color: #4C9492;
  margin: 10px;
}

.footer-brand-icon svg {
  width: 30px;
  height: 33px;
  fill: #4C9492;
  margin-top: 12px;
}

.footer p {
  color: white;
  font-size: 0.80em;
}

.footer p a {
  color: #03BF4F;
  font-size: 1em;
}

.footer h3 {
  color: white;
  font-size: 30px;
  font-weight: 700;
  position: relative;
  margin-bottom: 25px;
}

.footer h3::after {
  content: '';
  display: block;
  width: 80px;
  height: 6px;
  background-color: #03BF4E;
  position: absolute;
  bottom: -10px;
  left: 0;
}

.footer .col-md-6 {
  padding: 0 20px;
}


.container {
  width: 85% !important;
  max-width: 85% !important;
}

.container-fluid .container {
  width: 85% !important;
  max-width: 85% !important;
  padding: 0;
}

/* main page css */
/* .login-main {
  padding-top: 5rem !important;
} */

.col-12.top_main_left_col {
  /* margin-top: 60px; */
  padding: 0;
}

.main-page-row .col-md-3.col-12.main_right_side {
  padding-left: 35px;
  padding-right: 10px;
}


.col-6.main-page-top-section-side-images-two-section.p-0 {
  margin-bottom: 10px;
}

/* .col-md-4.col-12.first-col-6-main-pages.main-page-card-section-middle {
    padding: 0 20px;
} */
.col-md-4.col-12.first-col-6-main-pages.main-page-card-section-middle:nth-child(1),
.col-md-4.col-12.first-col-6-main-pages.main-page-card-section-middle:nth-child(4) {
  padding-left: 0 !important;
}

.col-md-3 .image-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -10px;
}


.image {
  width: 100%;
  height: auto;
}

/*
.image-name {
  margin-top: 5px;
}  */

.common-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  flex-basis: 66.66%;
}

/* .heading-and-view-more .col-9 {
  margin-bottom: -300px;
} */

.col-md-2 .sidebar {
  height: 350px !important;
  min-height: 90%;
  padding: 20px;
  width: 65% !important;
}

.col-md-3 .news-first-sidebar {
  /* height: 350px !important; */
  /* min-height: 90%; */
  /* padding: 20px; */
  width: 100%;
  margin-top: 25%;
}

.three-cards-news-page .card-row {
  margin-top: -50px;
}

.main-page-cards-row-third {
  margin-top: -200px;
}

.article-details-main-container .row {
  margin-left: 1px;
}

.container.container-fluid.article-details-main-container {
  padding-top: 1rem;
}

.sidebar {
  height: auto;
  min-height: 100%;
  /* padding: 20px; */
}

/* .sidebar-second{
  background-color: #ffffff !important;
  height: auto ;
  min-height: 100%;
  padding: 20px;
  margin-top: 100px;
} */

/* heading and view more */

.custom-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: white;
  font-weight: 700;
  font-size: 35px;
  padding: 1em 0 0 0;
}

.view-more {
  color: #03bf4e;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline !important;
}

.custom-line {
  border-top: 1px solid #03BF4F;
}

/* content 2 */

.image-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.col-md-9 .image-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -85px;
}


.col-md-9 .image-item {
  /* flex: 33.33%; */
  flex: 25%;
  /* padding: 5px; */
  box-sizing: border-box;
  text-align: center;
  /* margin: 15px; */
  border: none;
  margin-bottom: 15px;
  margin-left: 4px;
  margin-right: 4px;
}

.news-page .image-item-1 {
  flex: 25%;
  /* padding: 5px; */
  box-sizing: border-box;
  text-align: center;
  /* margin: 15px; */
  border: none;
  margin-bottom: 0px;
  margin-top: 100px !important;
}

.news-page .image-item .card-image-top-news {
  max-width: 80% !important;
  height: auto;
  max-height: 300px;
  align-items: center;
  margin-left: 20px;

}

.news-page .image-item {
  max-width: 80% !important;
  height: auto;
  max-height: 300px;
  align-items: center;
  margin-left: 20px;
  margin-top: -20px;

}

.col-md-3.col-12.top_boxes_small_items {
  padding-right: 20px;
}

.image {
  width: 100%;
  height: auto;
}

/* .image-name {
  margin-top: 5px;
  float: left;
  font-weight: 600;
  font-size: 24px;
} */

.common-image {
  position: relative;
  z-index: 1;
}

.row.main-page-row {
  padding-top: 0rem;
}

.image-title-common-image {
  font-weight: 600;
  font-size: 32px;
  margin-top: 20px;
  text-align: left;
  color: white;
  line-height: 45.5px;
  /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-decoration: none;*/
}

.main-page-top-section-side-images-two-section {
  position: relative;
}

.image-title-second-image {
  position: absolute;
  z-index: 5;
  top: 70%;
  right: 10%;
  left: 5%;
  color: #f5f5f5;
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.image-title-common-date {
  color: #4C4C4C;
  font-size: 16px;
  margin-top: 15px !important;
  text-align: left;
}

.image-title-common-date-second {
  position: absolute;
  z-index: 5;
  top: 83%;
  left: 5%;
  color: #ffffff;
  font-size: 15px;
}

/*  */

.card {
  border: none;
  margin: 10px;
}

.card-body {
  padding: 15px 5px 0 !important;
}


.card-title {
  font-weight: 600;
  font-size: 1.5rem !important;
  float: left;
  text-align: left;
  display: block;
  width: 100%;
  color: white !important;
  padding-bottom: .5rem;

  /*    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;*/
}

.card-text {
  font-weight: 500;
  font-size: 15px;
  float: left;
  text-align: left;
  color: white;
  display: block;
  width: 100%;
  /*  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;*/
}

.main-page-latest-news-news-section .card-text,
.news-bottom-section-card-content-section p.card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

.card-date,
.card-date1 {
  text-align: left;
  font-weight: 400;
  display: block;
  width: 100%;
  color: rgba(120, 154, 153, 1) !important;
  font-size: .9rem !important;
}

.card-date {
  color: white;
  font-size: 14px;
}

.card-date1 {
  color: white;
  font-size: 14px;
}

.card-status {
  text-align: right;
  float: right;
  color: grey;
  font-size: 16px;
  font-weight: 400;
}

.card-status-bearish {
  text-align: right;
  float: right;
  color: brown;
  font-size: 20px;
  font-weight: 400;
}



.card-status-bullish {
  text-align: right;
  float: right;
  color: #042625;
  font-size: 20px;
  font-weight: 600;
}

.showmore-btn {
  background-color: #03BF4F;
  width: 20%;
  padding: .7rem 0px !important;
}

.show-advertise {
  width: 100%;
}

.latest-news-card .card {
  /* margin-bottom: -50px; */
  margin-top: -0px;
  margin-bottom: -15px;
}

.col-md-9 .row .col-md-4 .card {
  margin-top: -15px;
}

.news-page-latest-news-first:last-child {
  margin-bottom: 0;
}

.col-md-9 .row .main-page-card-section-middle .card {
  margin-top: -15px;
  margin-bottom: 30px;
  margin-left: 0;
  margin-right: 0 !important;
}

.more-news .col-md-4 {
  width: 27%;
  margin-right: 50px;

}

.more-news .col-md-8 {
  margin-top: -20px;

}

.more-news .image-item {
  margin-top: 20px;
  margin-bottom: 10px;

}

/* latest news*/
/* .image-container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
  }

  .image-container img {
    width: 50%;
    height: auto;
  } */

/* resourses */

.resources-card {
  background-color: rgb(234, 232, 232);
}

.container-fluid.resources_details table {
  width: 100%;
}

.resources_details .ms-0 img.img-fluid {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  border-radius: 15px !important;
}

/* content */

/* .image-item .card-img-top {
  max-width: 100% !important;
  height: auto;
  max-height: 300px;
} */

.card-text-news {
  font-weight: 400;
  font-size: 18px;
  /* float: left; */
  text-align: left;
}

.main-page-card-box-middle-section .card.resources-card.text-center {
  border: none;
  background-color: #042625 !important;
  border-radius: 15px;
  margin: 15px 0px;
}

.main-page-card-box-middle-section .card-body.d-flex.align-items-center {
  padding: 15px 15px !important;
  display: block;
}

/* Article-Details Page */

.main-heading-top h2 {
  font-size: 3rem;
  font-weight: 600;
  color: white;
}

.main-heading-top h1 {
  font-size: 3rem !important;
  font-weight: 600 !important;
  color: white !important;
}

.top-links {
  color: #03BF4F;
  font-size: 24px;
}

.top-links h6.text-dark {
  color: white !important;
}

/* .sidebar {
    width: 25%;
    margin: 20px;
   } */
.sidebar-social-links {
  text-align: end;
  margin-right: 0px !important;
  color: white !important;
}

.sidebar-social-links a {
  font-size: 24px;
  text-decoration: none;
  color: white;
}

.sidebar-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
  color: #ffffff !important;
}

.sidebar-icon.facebook {
  background-color: #3b5998;
  /* Facebook brand color */

}

.sidebar-icon.twitter {
  background-color: #1da1f2;
  /* Twitter brand color */
}

.sidebar-icon.linkedin {
  background-color: #0e76a8;
  /* LinkedIn brand color */
}

.sidebar-icon.google {
  background-color: #db4a39;
  /* Google brand color */
}

.related-article h6 {
  color: #034645;
  font-size: 30px;
  font-weight: bold;
  text-align: center;

}

.news-page-latest-news-all.border.border-0.main-page-latest-news-section-bottom:last-child {
  margin-bottom: 20px;
}

.related-article-hr {
  width: 93%;
}

.article-para {
  font-size: 16px;
  text-align: left;
}

.article-heading {
  font-size: 24px;
  text-align: left;
}

/* News Page CSS */

/* banner-img */

.resources-outer-container {
  position: relative;
  text-align: center;
}

.content-resources-news .news {
  font-size: 36px;
  margin-left: -210px !important;
  margin-top: 15px;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 0;
}



.news-page-first-heading-news .news {
  font-size: 45px;
  color: #042625;
  font-weight: 700;
  text-align: start;
}

.news-page-first-heading-news.position-absolute.top-0.start-0.news-page-navbar-section-top-third-navbar {
  top: 18% !IMPORTANT;
}

/* .news-page-bg-image-top {
  background-image: url("banner-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
} */

.navbar-third {
  font-size: 24px;
  width: 100%;
  height: auto;
  color: #ffffff !important;
  text-decoration: underline;
}

.news-page-nav .nav-link {
  font-size: 20px;
  color: #03BF4E;
}

ul.navbar-nav.topics-nav {
  flex-direction: column;
}

.topics-side div#navbarNavSecond a.nav-link.fw-lighter.topics-list {
  font-weight: 500 !important;
  padding: 5px 0;
  text-decoration: underline !important;
}

.topics-side div#navbarNavSecond a.nav-link.fw-lighter.topics-list:hover {
  color: #042625 !important;
  transition: 0.5s;
}

.news-page-main-container .row {
  margin-left: 0px;
}


.main-img {
  position: absolute;
  top: 34%;
  left: 3%;
  margin-right: 10px;
  margin-left: 80px;
}

/* .news-page-top-main-img {
  position: absolute;
  top: -40px;
} */

/* .news-page-top-main-img:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(../../frontend/Images/feat.png);
  background-position: top left;
  background-size: 150px;
  background-repeat: no-repeat;
  height: 100px;
  width: 150px;
} */


.side-img {
  position: absolute;
  top: 6%;
  right: 5%;
  float: right;
}

.side-img-relative {
  position: absolute;
  top: 0%;
  right: 5%;
  float: right;
}

.related-article h2 {
  color: #034645;
  font-size: 29px;
  font-weight: bold;
  text-align: center;
  margin-left: 1px;
}

.news-page-top-main-img a {
  text-decoration: none;
}

.headlines-news h4 {
  color: white;
  font-size: 2.3rem;
  font-weight: 600;
  margin-top: 20px;
  /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;*/
}


/*  */

.image-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.image {
  width: 100%;
  height: auto;
}

.image-name {
  margin-top: 5px;
  float: left;
  font-weight: 900;
  font-size: 19px;
  text-align: left;
  margin-top: 10px;
  color: white;
}

.image-name-date {
  float: left;
  text-align: left;
  margin-top: 10px;
  color: white;
  font-size: 14px;

}

.image-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  z-index: 1;
  /* Ensure the overlay is above the image */
  border-radius: 25px !important;
}

.sidebar {
  height: auto;
  min-height: 100%;
  padding: 20px;
}


.common-image {
  position: relative;
  z-index: 1;
}

/*  */


/* .card-date {
  text-align: left;
  float: left;
  color: grey;
} */

.card-status {
  text-align: right;
  float: right;
  color: grey;
  font-size: 14px;
  font-weight: 400;
}

.card-status-bearish {
  text-align: right;
  float: right;
  color: brown;
  font-size: 20px;
  font-weight: 400;
}

.card-status-bullish {
  text-align: right;
  float: right;
  color: #042625;
  font-size: 20px;
  font-weight: 600;
}

/* content of news */

.image-item .card-img-top {
  max-width: 100% !important;
  height: auto;
  max-height: 300px;
  align-items: center;
  margin-left: 20px;
}

.image-item .card-img-article-details {
  max-width: 70%;
  height: auto;
  max-height: 300px;
  align-items: center;
  margin-left: 20px;

}

.article-details-latest-news {
  margin-top: -25px;
}

.article-details-latest-news-first {
  margin-top: 5px;
}


.col-md-3.col-12.card-news-images {
  width: 22%;
  padding-left: 0px;
  max-width: 22%;
  padding-right: 20px;
}

.card {
  border: none;
  width: 90%;
  /* margin: 10px; */
  align-items: left;
}

.card-text-news {
  font-weight: 400;
  font-size: 18px;
  float: left;
  text-align: left;
  /* margin-top: 25px; */
}

.share-price {
  color: #03BF4E;
  font-size: 20px;
  text-align: left;
  margin: 15px 0;
}



.card-date-new {
  /* text-align: left; */
  float: left;
  color: #4C4C4C;
  margin-right: 570px;
  font-weight: 300;
}

.news-footer {
  background-color: #042625;
  /* padding: 20px; */
  position: absolute;
  bottom: -1630px;
}

.article-details-main-img img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  /* margin-left: 50px; */
}

.mt-3.article-details-paragraphs p a {
  color: #044543 !important;
}

.mt-3.article-details-paragraphs p a.button.green-btn {
  color: #ffffff !important;
  display: block;
  text-transform: capitalize;
  padding: 5px 20px;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 30%;
  text-align: center;
}

/* Resource page CSS */

/* resources */

.resources-outer-container {
  position: relative;
  text-align: center;
  /* width: 100%; */
}

.article-details-section-brand-name-show {
  color: #03BF4F;
}

/* cards */

.my-card-RE {
  /* margin-bottom: 20px; */
  position: relative;
  overflow: hidden;
  border: none;
}

.card-image-RE {
  position: relative;
}

.card-title-RE {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: rgb(255, 255, 255);
  text-align: center;
  width: 100%;
  padding: 10px;
  font-size: 24px;
  font-weight: 600;
  /* background-color: rgba(0, 0, 0, 0.5); */
}

.card-title-RE h5 {
  color: #ffffff !important;
}


/* Broker Page */

.bg-body-container {
  background-image: url("../Images/academy/Academy-hero-bg.svg");
  /* background: linear-gradient(135deg, #0a1c19, #051a16, #0b2521); */
  /* background-color: ; */
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 90vh; */
  padding: 15rem 0 0rem 0;
  background-position: center;
  margin-top: -12rem;
}

.first-card-broker-page {
  display: flex;
  align-items: center;
}

.main-container-broker .navbar {
  width: 100%;
  text-align: left;
  justify-content: center;
}

.main-container-broker .navbar .nav-item {
  padding: 0px 20px;
}

.main-heading-top-broker {
  text-align: center;
  color: white;
}

.main-heading-top-broker h1 {
  font-size: 80px;
  text-align: center;
  color: white;
  font-weight: 600;
}

/*
  .main-heading-top-broker hr {
    width: 10%;
    height: 12px;
    background-color: #03bf4f !important;
    margin: auto;
    color: #03BF4F !important;
    border-bottom: 10px solid #03BF4F !important;
    opacity: 1;
} */
.main-heading-top-broker h2 {
  color: #03BF4E;
  font-weight: 400;
}

.underline-text {
  text-decoration: underline;
  text-decoration-color: #03BF4F;
}

.main-container-broker .navbar-collapse {
  justify-content: flex-start;
}

.main-container-broker .navbar-nav {
  margin-left: 0px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: center;
}

.logo-title-container {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 15px;
  /* Adjust this value to set the distance between logo and card title */
}

.logos-brokers {
  width: 70px;
  height: 70px !important;
  border-radius: 20px;
  object-fit: cover;
  margin-right: 0;
}

.card-heading-para {
  text-align: start;
}

.card-heading-para p {
  text-align: start;
  margin-left: 16px;
}

.amount-details {
  display: flex;
  justify-content: space-around;
  text-align: left;
  align-items: center;
}

.card-text-broker {
  padding: 5px 10px;
  font-size: 16px;
  text-align: left;
  color: rgb(187, 183, 183);
  display: flex;
  justify-content: flex-start;
  align-items: start;


}


.card-title-broker {
  margin-left: 10px;
  color: white;
}


.card-broker {
  border: 5px solid #042625;


}

.view-more-link {
  text-align: center;
  margin-left: 0px;
  margin-bottom: 10px;

}

.disclaimer-broker {
  padding: 25px;
  border-radius: 5px;

}

.broker-page-top-container {
  width: 97%;
  background: linear-gradient(135deg, #021f1b, #003d33);
  color: white;
  border: 5px solid grey;
}

.broker-card-gradient {
  background: linear-gradient(135deg, #021f1b, #003d33);
  color: white;
  border: 5px solid grey;
  width: 90%;
  /* width: 90%; */
}

/* Capital.com "Platinum Partner" card on the /brokers grid -- a thin
   metallic-silver trim instead of the plain grey border the other cards
   use. border-box background-clip lets the gradient trace the card's
   actual rounded corners as a border, while padding-box keeps the card's
   own dark gradient fill (and content) completely unchanged underneath. */
.broker-card-gradient.platinum-trim {
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #021f1b, #003d33) padding-box,
    linear-gradient(135deg, #f2f2f2 0%, #ffffff 22%, #a8adb2 50%, #ffffff 78%, #d4d7da 100%) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.25);
}


.row.main-page-row.broker-academy-banner {
  padding: 30px 15px 0px !important;
}

/* .broker-card-gradient-top {
    background: linear-gradient(135deg, #003d33, #003d33, #000000 ,#000807 , #043129 ,#043129);
    background-position: top right;
    color: white;
    border: 5px solid grey;

  } */

.container.main-container-broker {
  padding-top: 0rem;
}

.broker-card-gradient .card-body {
  color: white;
  line-height: 1.2;

}

.container.broker-main-container {
  margin-top: 30px;
}

.container.grid-brokers,
.container.broker-main-container {
  width: 80% !important;
  max-width: 80% !important;
}

.card.broker-page-top-container.rounded-4 {
  margin: 0 0px 20px;
  width: 100%;
  padding: 20px 20px;
  border: 4px solid #03bf4f;
}

.top-broker-adv-container-main-page .brand-broker-heading-top:after {
  content: "Featured";
  color: white;
  padding: 8px 20px;
  background-image: linear-gradient(to right, #021716, #015221);
  border-radius: 50px;
  position: absolute;
  top: 20px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

/* "Platinum Partner" badge on the /brokers grid card whose list_title is
   "Capital.com" (see broker.blade.php) -- pinned to the card's top-right
   corner via the card-body's existing position: relative. */
.broker-page-container .position-relative .platinum-partner-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 7px 16px 7px 18px;
    background: linear-gradient(135deg, #ffffff 0%, #e8ecee 35%, #b8c0c4 65%, #f7f8f9 100%);
    color: #173b36;
    border-radius: 4px 10px 4px 19px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    border-left: 3px solid #03bf4e;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    z-index: 2;
}

div#rightSidebar .broker-box img.feature-logo.d-flex.mb-3 {
    border-radius: 10px;
}

#rightSidebar .broker-box.broker-box-v2.mb-4 {
    padding: 1.5rem;
}

.broker-page-rating-text span.fa.fa-star:first-child {
  margin-left: 15px;
}

.amount-details .card-text-broker img.check_icon {
  width: 34%;
}

.broker-page-rating-text span.fa.fa-star {
  margin-top: 4px;
  padding: 0 3px;
}

.broker-page .card .view-more-link {
  margin-top: 10px;
}

.broker-page .card {
  margin: 0px 0;
  width: 100%;
  padding: 20px 15px;
}


.container.grid-brokers .col-md-4.col-12.broker-page.broker-page-container {
  padding: 20px 20px;
}

.col-md-4.col-12.broker-page.broker-page-container:last-child .card.broker-card-gradient.rounded-4 {
  margin-top: 0;
}

.disclaimer-broker h6,
.disclaimer-broker p {
  line-height: 1.6rem;
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
  color: #ffffff !important;
  /* font-size: 20px; */
}

.disclaimer-broker h6 span,
.disclaimer-broker p span {
  line-height: 1.6rem;
  font-weight: bold;
  color: white;
  font-size: 16px;

}

.broker-page .card span.fw-bold.text-secondary {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Broker Details Page CSS*/

.resources-outer-container-broker-details {
  position: relative;
  z-index: 1;

}

.bg-logo {
  /* position: relative; */
  /* z-index: 5; */
  /* top: -100px; */
  left: 0;
  width: 100%;
  margin-top: -80px;
}

.broker-main-title-top {
  display: flex;
}

.tab-container-nav {
  margin-top: 20px;
}

.nav-tabs .nav-item .nav-link {
  color: #00000c;
}


.heading-and-paragraph {
  display: flex;
  align-items: center;
  float: left;
  margin-left: -20px;
}

.heading-and-paragraph h2 {
  margin-right: 10px;
  font-size: 36px;
  font-weight: bold;

}

.heading-and-paragraph p {
  margin-right: 10px;
  font-size: 16px;
  vertical-align: baseline;
  margin-top: 24px;
}

.open-account-btn {
  float: right;
  color: rgb(255, 255, 255) !important;
  background: #03BF4E !important;
  /* margin-left: 150px; */
}

.open-account-btn-broker-page {
  /* float: right; */
  color: rgb(255, 255, 255) !important;
  /* margin-left: 150px; */
  width: 100%;
  margin-top: 1rem;
}

.main-bg-img-broker-details-page-section-top {
  min-height: 4rem !important;
  background-color: transparent !important;
  margin-top: 2rem;
}

.broker-main-title-top .heading-main h5 {
  font-size: 2rem;
  font-weight: 700;
}

.broker-main-title-top .para-main p {
  font-size: 1rem;
  margin-top: 0.8rem;
  margin-left: 0.3rem;
}

.rating-img-broker-page h4 {
  margin-left: 10px;
}

.adv-img-broker-pages {
  margin-left: 6.5rem;
  margin-top: 2rem;
}

.rating {
  /* margin-left: 105px; */
  position: relative;
  right: 500px;
  top: 58px;
}

.rating h2 {
  margin-right: 210px;
  margin-top: -5px;
  /* font-weight: bold; */
  /* right: 250px; */
  float: right;
}

.rating-images {
  margin-left: 400px;
}


.fees .rating-images {
  margin-left: 108px;
}

.platform img {
  margin-left: 55px;
}

.new-navbar {
  /* margin-left: 480px; */
  position: relative;
  margin-top: 50px;
  /* margin-right: 250px; */
  right: 0%;
  font-size: 20px;
}


.nav-content {
  position: relative;
  /* left: 25%; */
  height: auto;
  /* width: 1050px; */
  background-color: #ffffff;
  top: 25px;
  /* left: 430px; */
  box-shadow: 0px 5px 0px rgb(236, 233, 233);
  border: 5px gray;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 0px;
  width: 90%;
}

.amount-details {
  display: flex;
  justify-content: space-around;
  /* text-align: left; */
}


.summery-bg-color {
  background-color: #042625;
  border-radius: 20px !important;
  color: white;
}

div.broker_details_tab h4.fw-bolder {
  color: white;
}

.summary-ratings p.mr-2.me-5 {
  font-size: 15px;
  margin-left: 5px;
}

.summary-ratings span.fa.fa-star {
  font-size: 19px;
}

.summary-ratings .col-md-4.col-12.mt-3 .row {
  margin: 5px 0;
  color: white;
}

.summery-bg-color span.fa.fa-star {
  font-size: 20px;
}

.adv {
  margin-top: 20px;
  margin-left: 85px;
}

/*Broker detail*/

.container.broker-detail-top {
  width: 80% !important;
  max-width: 80% !important;
  margin-top: 70px;
  padding-top: 0rem;
}

div#information .container.rounded-4 {
  max-width: 80% ! IMPORTANT;
  width: 80% !important;
}

.container.brokers_details_tab,
div#summary .container.p-3.rounded-4,
div#proscons .container.rounded-4 {
  max-width: 81% !important;
  width: 81% !important;
}

h3.tool_headings {
  color: white;
  margin: 0;
  font-size: 18px;
}

/* Investing Page */

.investing-container .col-md-9 .image-row {
  margin-top: 65px;
}



/* article details */

.main-heading-top h2 {
  font-size: 3rem;
  font-weight: 600;
  color: white;
}

.top-links {
  color: #03BF4F;
  font-size: 24px;
}

.sidebar-social-links {
  text-align: end;
  margin-right: 250px;
}

.sidebar-social-links a {
  font-size: 24px;
}

.sidebar-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
  color: #f2f2f2;
}

.sidebar-icon.facebook {
  background-color: #3b5998;
  /* Facebook brand color */
}

.sidebar-icon.twitter {
  background-color: #1da1f2;
  /* Twitter brand color */
}

.sidebar-icon.linkedin {
  background-color: #0e76a8;
  /* LinkedIn brand color */
}

.sidebar-icon.google {
  background-color: #db4a39;
  /* Google brand color */
}

.related-article h3 {
  color: #034645;
  font-size: 30px;
  font-weight: bold;
}

.article-card {
  margin-top: 10px;
}


/* main-page css */


.two-images-card .card {
  width: 95%;
  margin-top: 5px;
}

.show-more-button {
  margin-top: -50px;
}

.main-page-cards-row .col-md-4 {
  margin-top: -50px;
}

/* Academy pages */

/*.academy-width #fix-sidebar-academy {
  position: relative;
}

.academy-width .fixed-sidebar {
  position: fixed !important;
  top: -40px !important;
  opacity: 0;
  transform: translateY(20px);
  transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.academy-width .stop-sidebar {
  position: absolute !important;
  bottom: 0 !important;
  top: auto !important;
}

.academy-width .fixed-sidebar.visible {
  opacity: 1;
  transform: translateY(0);
}*/


.academy-top-section-bg {
  background-image: url(../Images/academy/academy-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 30vh;
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.academy-heading-section h5 {
  font-weight: 800;
  font-size: 48px;
  color: rgb(255, 255, 255);
}

.common-heading a {
  font-size: 1.3rem;
  color: #034644;
  font-weight: 500;
}

.academy-content-heading-section h5 {
  color: #003d33;
  font-weight: 700;
  font-size: 24px;
  margin-top: 20px;
}

.academy-content-heading-section {
  border-bottom: 2px solid rgb(215, 215, 215);
}

.academy-cotent-card-button button {
  border: 2px solid #054543;
  border-radius: 80px;
  background-color: #fff;
  text-align: center;
  color: #054543;
  padding: 10px 40px;
  font-weight: 600;
  margin-left: -10px;
}

.col-md-6.academy-section-cards-main-container .card.w-100.border.border-0 {
  margin-top: 25px;
}

.academy-cotent-card-button button:hover {
  border: #054543;
  background-color: #054543;
  color: #ffffff;
}

.top-nav-bar-section .navbar-nav .nav-item .active {
  color: #03BF4F;
  font-weight: 700;
}

.col-xl-3.col-lg-6.col-md-6.col-sm-6.mb-5.academybox:first-child img.academy-icon {
  left: 3rem;
}

.open-account-btn {
  float: left;
}

.row.sponsor_broker_box {
  padding: 20px 20px;
  width: 100%;
  margin-top: -3rem;
  background: linear-gradient(to bottom, rgba(12, 29, 31, 1) 0%, rgba(6, 83, 101, 1) 100%);
  border-radius: 1.2rem !important;
  border: 2px solid transparent;
  background: linear-gradient(to right, rgba(12, 29, 31, 1), rgba(6, 83, 101, 1)) padding-box, linear-gradient(309deg, rgba(28, 81, 79, 1), rgba(96, 210, 242, 1)) border-box;
}

.row.sponsor_broker_box h2.sponsor_title {
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
  padding: .8rem 0;
  border-radius: 1rem;
}

.row.sponsor_broker_box h2.broker_heading {
  font-size: 1.75rem;
  font-weight: 600;
}

.row.sponsor_broker_box .heading-col {
  align-self: center;
}

.row.sponsor_broker_box img.img-fluid.w-100 {
  border-radius: 15px;
  height: 65px;
  width: 65px !important;
  object-fit: cover;
}


.academy-volume-left h2,
.academy-volume-left h2 span {
  color: white !important;
}

.volume-products h2 span {
  color: white !important;
}

.volume-products .col-md-12.mb-5 a {
  color: #03bf4e;
}

/*New*/

.academy-main-section .tab-content>.tab-pane {
  display: block;
}

.academy-main-section .nav-tabs a.nav-link {
  border: none;
  background-color: #E6F8F8;
  color: #034645;
  border-radius: 10px;
  margin: 5px 5px;
}

.academy-main-section .nav-tabs a.nav-link.active {
  background-color: #034645;
  color: white;
}

.academy-main-section ul#topicTabs {
  padding-bottom: 15px;
}


.academy-details .mb-5.acedemy-box h2,
.academy-details .mb-5.acedemy-box p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/*Lessons*/


.lesson-view-page .video-container {
  position: relative;
  width: 100%;
}

.lesson-view-page .video-player {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}


.short_description_related_lesson.mt-3 p,
.short_description_related_lesson.mt-3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  color: white;
}

/*#adContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    position: absolute;
}*/

.lesson-view-page #adVideo {
  pointer-events: none;
  /* Prevent interaction with ad video */
}

.lesson-view-page #skipAd {
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  bottom: 45px !important;
  right: 15px ! IMPORTANT;
  background-color: #03BF4E;
  border: none;
  border-radius: 100px;
}

.lesson-view-page .play-button-overlay {
  cursor: pointer;
  color: white;
}

.lesson-view-page .progress.position-absolute.bottom-0.start-0.w-100 {
  --bs-progress-height: 0.4rem;
}

.lesson-view-page #adProgressBar {
  height: 6px;
  /* Adjust this value to your preferred height */
  border-radius: 3px;
  /* Optional: Rounds the edges for a smoother look */
  transition: width 1s linear;
  /* Ensures smooth progress */
}

.lesson-view-page .bottom_links .col-md-6 {
  border: 1px solid white;
}

.lesson-view-page .lesson-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 25%);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lesson-view-page .lesson-popup-box {
  background: #000000ba;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
}

.lesson-view-page .lesson-popup-box .emoji {
  font-size: 32px;
  margin-bottom: 15px;
}

.lesson-view-page .lesson-popup-box p {
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
}

.lesson-view-page .next-video-btn {
  background-color: #03BF4E;
  border: none;
  color: white;
  padding: 10px 18px;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
}

.lesson-view-page .lesson-popup-box .popup-close-btn {
  position: absolute;
  top: -5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 30px;
  cursor: pointer;
  color: white;
}

/* Earing calender page */

.earing-calender-top-sectio-bg {
  background-image: url(../Images/earning-calender/earning-calendar.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 26rem 0 7rem 0;
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: -12rem;
}

.earing-calender-top-heading h5 {
  font-weight: 800;
  font-size: 48px;
  color: rgb(255, 255, 255);
}

.earing-calender-top-heading h1 {
  font-weight: 800;
  font-size: 48px;
  color: rgb(255, 255, 255);
}

.earning-calender-dates-btn-top-section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.earning-calender-dates-btn-top-section .Ec-buttons-top button {
  padding: 5px 20px;
  border: 2px solid #000000;
  background-color: #042625;
  border-radius: 20px;
  text-align: center;
  color: white;
  display: block;
  width: 100%;
}

.earning-calender-dates-btn-top-section a {
  text-decoration: none;
}

.earning-calender-dates-btn-top-section .Ec-buttons-top.active button {
  padding: 5px 20px;
  border: 2px solid grey;
  background-color: rgb(0, 0, 0);
  border-radius: 20px;
  text-align: center;
  color: rgb(255, 255, 255);
}

.EC-Date-picker-top-and-search form {
  /* padding: 5px; */
  background-color: rgb(218, 217, 217);
  text-align: center;
  border-radius: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  float: right;
  width: 110%;
}

.EC-Date-picker-top-and-search form .EC-Date-picker-top input {
  text-align: left;
  border: none;
  background-color: transparent;
  border-radius: 20px;
  padding: 5px 10px;
  outline: none !important;
}

.EC-Date-picker-top-and-search form .date-search-btn {
  width: 100%;
  text-align: right;
}

/*.EC-Date-picker-top-and-search form .EC-Date-picker-top input:focus {
  border: 1px solid grey;
  margin-right: 5px;
}*/

.EC-Date-picker-top-and-search form .date-search-btn button {

  border-radius: 20px;
  /* float: left; */
  background-color: #03BF4F;
  color: white;
  border: none;
  padding: 5px;
  font-weight: 500;
}

.selected-date-content h2 {
  color: white;
  font-size: 24px;
  font-weight: 800;
  margin-top: 25px;
}

.EC-table-content {
  width: 100%;
  margin-left: 0px;
  margin-top: 20px;
  /* border: 1px solid red; */
  box-shadow: 0px 3px 8px rgb(100, 100, 100);
}

.EC-table-content table.table thead th {
  background-color: rgb(2 22 21) !important;
  padding: 20px 20px;
  color: white;
}

.EC-table-content table.table td {
  color: white;
  background-color: #021615;
}

.EC-hr-line {
  border-bottom: 5px solid #03BF4F;
  width: 20%;

}

/* My account dashboard */
.my-acc-top-heading {
  margin-top: 20px;
}

.my-acc-top-heading h1 {
  color: white;
  font-weight: 700;
  font-size: 30px;
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}

.my-acc-top-heading hr {
  width: 5%;
  height: 12px;
  background-color: #03bf4f !important;
  margin: auto;
  color: #03BF4F !important;
  border-bottom: 10px solid #03BF4F !important;
  opacity: 1;
}

.my-account-details-section {
  /* border: 2px solid red; */
  padding: 20px;
  border-top: 5px solid #034645;
  box-shadow: 0px 5px 10px #c5c5c5;
  border-radius: 15px;
}

.my-account-details-section .username-details {
  color: #034645;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}

.my-account-details-section .username-details h2,
.Edit-profile-text-heading h2 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: capitalize;

}

.my-account-details-section .my-account-nav-tabs.active {
  width: 100%;
  background-color: #03BF4F;
  color: white;
  font-weight: 600;
  border-radius: 10px;
  min-height: 10px;
  margin: 10px 0;
}

.my-account-details-section .my-account-nav-tabs.active a {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

.my-account-details-section .my-account-nav-tabs {
  width: 100%;
  background-color: #042625;
  color: white;
  font-weight: 600;
  padding: 0px;
  border-radius: 10px;
  min-height: 10px;
  margin: 10px 0;
}

.my-account-details-section .my-account-nav-tabs a {
  color: white;
  font-weight: 600;
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 11px 15px;
  margin: 0 !important;
}

.my-account-details-section .my-account-nav-tabs img {
  margin-right: 8px;
  margin-top: -4px;
  width: 7%;
}

.my-account-details-section .my-account-nav-tabs img.dark-icon {
  background-color: white;
  border-radius: 10px;
  width: 28px;
  height: 28px;
  padding: 6px 4px;
  object-fit: contain;
}

.my-account-details-section .my-account-nav-tabs.active img.dark-icon {
  display: none;
}

.my-account-details-section .my-account-nav-tabs.active img.light-icon {
  display: inline-block !important;
  margin-left: 5px;
}

/* .profile-image-login-user img {
    border-radius: 50% !important;
    min-height: 10px !important;
    max-width: 10px !important;
  } */

.first-to-card-my-account .card a img {
  border-radius: 25px;
  height: 27vh;
  width: 100% !important;
}

.first-to-card-my-account .card a {
  text-decoration: none !important;
}

.member_dashboard_bottom_cards_container .card a img {
  border-radius: 25px;
  height: 27vh;
}

.member_dashboard_bottom_cards_container .card a .card-body .card-title {
  color: #242424;
  font-weight: 500;
  font-size: 20px !important;
  text-transform: capitalize;
}

.container.main_account_page .col-md-3.top-right {
    overflow-y: scroll;
    height: 750px;
}

.container.main_account_page .col-md-3.top-right::-webkit-scrollbar {
    width: 4px;
}

.container.main_account_page .col-md-3.top-right::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
}

/* .first-to-card-my-account .card a .card-body .card-title {
  color: #242424;
  font-weight: 500;
  font-size: 16px !important;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: block;
  width: 100%;
} */

.first-to-card-my-account .card a .card-body .share-price {
  color: #03bf4e;
  font-weight: 500;
  font-size: 16px !important;
  text-decoration: none !important;
}

.first-to-card-my-account {
  margin-top: 20px !IMPORTANT;
}

.my-account-cards div .card {
  margin-top: 0px !important;
}

.bg-container-minipip-academy {
  display: flex;
  justify-content: center;
}

.minpip-portal-my-account {
  display: flex;
  background-color: #034645;
  border-radius: 15px;
  width: 98%;
  margin-bottom: 20px;
}

.minipip-logo-my-academy {
  padding: 10px 15px;
  margin-left: 20px;
}

.minipip-academy-portal-heading {
  display: flex;
  justify-content: center;
  align-items: center;

}

.minipip-academy-portal-heading h2 {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin-left: 45px;
}

.account-details-edit-form {
  padding: 20px;
  box-shadow: 0px 2px 5px grey;
  border-radius: 10px;
}

.account-details-edit-form table.table.table-bordered {
  background-color: transparent;
  background: transparent;
  border: none;
}

.account-details-edit-form table.table.table-bordered tbody {
  background-color: transparent;
  border: none;
}

.account-details-edit-form table.table.table-bordered th {
  background: transparent;
  color: white;
  border: none;
}

.account-details-edit-form table.table.table-bordered td {
  background-color: transparent;
  color: white;
  border: none;
}

.account-details-edit-form table.table.table-bordered td a {
  color: #03bf4f;
}

.account-details-edit-form .heading-top {
  border-bottom: 2px solid grey;
}

.account-details-edit-form .heading-top h5 {
  color: white;
  font-size: 20px;
  font-weight: 600;

}

.account-details-edit-form .form-content form .form-group label {
  display: block;
  font-size: 16px;
  /* font-weight: 500; */
  color: white;
}

.account-details-edit-form .form-content form .form-group input {
  display: block;
  border: none;
  border-bottom: 2px solid grey;
  width: 100%;
  padding: 0 0 5px 0;
  font-size: 16px;
  background-color: transparent;
  color: white;
}

/* Chrome (and browsers built on it) renders an autofilled/autocompleted
   field's text via -webkit-text-fill-color, NOT the regular `color`
   property -- setting `color` alone (as the generic `input:-webkit-autofill`
   rule elsewhere in this file does) has no effect here, which is why
   selecting a remembered value for #mem_mobile left the text black and
   unreadable against this page's dark background. */
.account-details-edit-form .form-content form .form-group input:-webkit-autofill,
.account-details-edit-form .form-content form .form-group input:-webkit-autofill:hover,
.account-details-edit-form .form-content form .form-group input:-webkit-autofill:focus,
.account-details-edit-form .form-content form .form-group input:-webkit-autofill:active {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  caret-color: white !important;
}

.account-details-edit-form .form-content form .form-group input.int-checkbox {
  display: inline !important;
  border: none;
  border-bottom: 2px solid grey;
  width: auto !important;

}

.account-details-edit-form .form-content form .form-group label.int-checkbox {
  display: inline;
  font-size: 16px;
  font-weight: 300 !important;

}

/* The "categories"/"asset classes" checkbox options (memberedit.blade.php)
   used to be raw inline checkbox+label pairs relying on ms-md-3 (a
   desktop-only margin class) for spacing and manual <br> tags to force line
   breaks -- below the md breakpoint that spacing vanished and nothing
   wrapped each pair onto its own row, so they ran together edge to edge on
   mobile. Each pair is now its own .checkbox-option, grouped in
   .checkbox-options-group; the gap here gives consistent spacing on every
   screen size, and responsive.css switches this to a single column on
   mobile. */
.account-details-edit-form .form-content form .checkbox-options-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-top: 10px;
}

.account-details-edit-form .form-content form .checkbox-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.account-details-edit-form .form-content form .checkbox-option label.int-checkbox {
  margin: 0;
}

.account-details-edit-form .form-content form .form-group select {
  display: block;
  border: none;
  border-bottom: 2px solid grey;
  width: 100%;
}

.account-details-edit-form .form-content form .form-group input:focus {
  border-bottom: 2px solid grey;
  outline: none;

}

.account-details-edit-form .form-group.mt-md-2.mb-3 {
  position: relative;
}

.account-details-edit-form .verify_status_wrapper {
  position: absolute;
  right: 0;
  top: 30%;
}

.account-details-edit-form .verify_status_wrapper .button.green-btn {
  margin-top: -10px !important;
  background-color: #ffcd39 !important;
  color: black;
  display:block;
}

.account-details-edit-form .form-content form .form-group select.country_code {
  position: absolute;
  top: 29px;
  border: none !important;
  padding: 0;
  width: 15% !important;
  outline: none;
  box-shadow: none;
  background-color: transparent;
      color: #929191;
}

/* Searchable country-code select2 on the profile edit page
   (memberedit.blade.php) -- dark theme. See style.css for the light-theme
   version and the reasoning behind reusing the original positioning. */
.account-details-edit-form .form-content form .form-group .select2-container {
  position: absolute;
  top: 29px;
  width: 15% !important;
}

.account-details-edit-form .form-content form .form-group .select2-container .select2-selection--single {
  background-color: transparent !important;
  border: none !important;
  height: auto;
  padding: 0;
}

.account-details-edit-form .form-content form .form-group .select2-container .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  color: #929191 !important;
}

.account-details-edit-form .form-content form .form-group .select2-container .select2-selection__arrow {
  height: 100%;
  top: 0;
}

.account-details-edit-form .form-content form input#mem_mobile {
  padding-left: 90px;
}

button.form-save-btn {
  background-color: #03BF4F;
  color: white;
  padding: 10px 50px;
  text-align: center;
  border-radius: 20px;
  border: none;
}

button.delete-account-btn,
a.delete-account-btn {
  background-color: #EA2525;
  color: white;
  padding: 5px 50px;
  text-align: center;
  border-radius: 20px;
  border: none;
}

a.delete-account-btn.edit-page {
  margin-top: 10px;
  float: right;
  text-decoration: none;
}

.side-bar-tabs-mu-account {
  display: flex;
  justify-content: start;
  align-items: center;
}

.side-bar-tabs-mu-account span img {
  margin-bottom: 0px !important;
  margin-right: 7px;
}

.side-bar-tabs-mu-account a {
  margin-bottom: 7px;
  /* margin-left: 7px; */
  margin-top: 7px;
}

.account-details-edit-form .form-content form .form-group select:focus {

  border-bottom: 2px solid grey;
  outline: none;

}

.form-select {
  border: none !important;
  border-radius: 0px !important;
  border-bottom: 1px solid grey !important;
}

/* change password */

.change-password-text-heading h2 {
  color: white;
  font-weight: 700;
  font-size: 32px;

}

.account-details-edit-form .heading-top-change-password h3 {
  color: white;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid grey;
}

.signup-form {
  margin-top: 25px;
}

.singup-heading {
  color: #034645 !important;
}

.select-interest-main-container {
  margin-top: -95px !important;
}

.login-text .signup-form form div.form-group label {
  color: black;
  display: block;
  width: 100%;
}

.login-text .signup-form form div.form-group label:hover {
  text-decoration: none;

}

.login-text .signup-form form div.form-group select {
  color: black;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid grey;
  padding: 5px 10px;
  border-radius: 5px;
}

.login-text .signup-form form div.form-group input.int-checkbox {
  color: black;
  display: inline;
  /* width: 100%; */
  border: none;
  border-bottom: 2px solid grey;
}

.login-text .signup-form form div.form-group label.int-checkbox {
  color: black;
  display: inline;
  /* width: 100%; */
}

.login-text .signup-form form div.form-group select:focus {
  outline: none;
  border-bottom: 2px solid grey;
}

.login-text .signup-form form .registration input {
  border: none;
  background-color: #03BF4F;
  padding: 5px 20px;
  width: 100%;
  border-radius: 20px;
  font-size: 16px;
  color: white;
  margin-top: 20px;
}

.checkbox-container {
  display: flex;
  justify-content: space-between;
}

.second-left-container-checkbox {
  margin-right: 122px;
}

.second-right-container-checkbox {
  margin-right: 5px;
}

.left-checkbox {
  /* float: left; */
  text-align: left;
}

.right-checkbox {
  /* float: right; */
  text-align: left;
}

/* Economic Calander */

.main-heading-top-EC h1 {
  color: white;
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.economic-calendar hr {
  width: 8%;
  height: 12px;
  background-color: #03bf4f !important;
  margin: auto;
  margin-bottom: 5px;
  color: #03BF4F !important;
  border-bottom: 10px solid #03BF4F !important;
  opacity: 1;
}

.Ec-main-top-section {
  border-radius: 15px;
  color: white;
  background: linear-gradient(135deg, #09332d, #04211c);
  padding: 20px
}

.Ec-main-top-section p {
  color: white;
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  text-decoration: none;
}

.Eco-calandar-bottom-link {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  color: white;
  font-weight: 300;
}

.my-account-btn {
  padding: 5px 5px;
  color: #ffffff !important;
  background-color: #054543;
  border-radius: 20px;
}

.my-account-btn:hover {
  padding: 5px 5px;
  color: #054543 !important;
  background-color: #ffffff;
  border-radius: 20px;
}

.my-account-btn a {
  padding: 0px 30px;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 400;
}

.my-account-btn a:hover {
  color: #054543 !important;
  text-decoration: none;
  font-weight: 400;
}


.login-container img.reset_pass_icon {
  width: 25%;
  margin-bottom: 30px;
}

.reset-with-otp .input-box.new-login.d-flex.phone_field select.form-select.me-2 {
  position: absolute;
  border: none ! IMPORTANT;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  color: #6b6d6c;
}

.reset-with-otp .input-box.new-login.d-flex.phone_field input.phone1.form-control {
  padding-left: 90px !important;
  color: white !important;
  border-bottom: 2px solid #b8b7b7;
  outline: none;
  box-shadow: none;
}

.login-container-outer img.verify_icon {
  width: 25%;
  margin-bottom: 50px;
}

.reset-with-otp button#sendOtpBtn {
  color: #fff;
  background: #03BF4F;
  border-radius: 32px;
  padding: 15px 40px;
  cursor: pointer;
  transition: all 0.4s ease;
  width: 95%;
  margin: 0 auto;
}

.reset-with-otp .input-box.new-login.d-flex.phone_field select.form-select.me-2 {
  position: absolute;
  border: none ! IMPORTANT;
  outline: none;
  box-shadow: none;
}


/* news page */
.news-page-cards-three .card a {
  text-decoration: none !important;
}


.news-page-broker-side .card.resources-card.text-center {
  margin: 8px 0;
  width: 100%;
  background-color: #042625 ! IMPORTANT;
}

.news-page-broker-side .card-body.d-flex.align-items-center {
  padding: 10px 10px !important;
}

.news-page-broker-side .card-body.d-flex.align-items-center p {
  font-size: 12px;
  text-align: left;
  margin-top: 10px;
  padding: 0 10px;
  margin-bottom: 0;
  color: white;
  font-weight: 500;
}

.news-page-broker-side .card-body.d-flex.align-items-center .col-md-9 {
  align-self: center;
}

.news-page-broker-side .open-account-btn {
  float: right;
  color: #042625 !important;
  background: white !important;
  border-radius: 50px !important;
  padding: 5px 15px !important;
  width: max-content !important;
}

.news-page-cards-three .card a img {
  text-decoration: none !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 28vh !important;
  max-height: 28vh !important;
  border-radius: 25px !important;
  /* border: 3px solid #054543; */
}

.first_new_articles {
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 28vh !important;
  max-height: 28vh !important;
  border-radius: 25px !important;
}

.news-page-bottom-news-section .card .card-news-images a img {
  min-height: 19vh !important;
  max-height: 19vh !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 25px !important;
  object-fit: cover;
  /* border: 3px solid #054543; */

}

.news-page-top-main-img a img {
  border-radius: 25px !important;
  /* max-height: 85vh;
  width: 100%;
  border: 3px solid #054543; */
}

.news-page-bottom-news-section .card-body {
  padding-top: 0 !important;
}

/* main page */

.main-page-top-image-first-section .first-image-right-side a img {
  border-radius: 25px !important;
  min-width: 100%;
  height: 56vh;
  object-fit: cover;
}

.main-page-top-section-side-images-two-section .main-page-1-2-images-first a img {
  border-radius: 15px !important;
  min-height: 27vh;
  max-height: 27vh;
  min-width: 100%;
  max-width: 100%;
  margin-bottom: 15px;
  margin-left: 0px;
}

.main-page-top-section-side-images-two-section .main-page-1-2-images-first a .image-title-common-date-second {
  color: white;
  font-size: 14px;
  margin-bottom: 10px !important;

}


.main-page-top-section-side-images-two-section {
  padding: 0;
}

.main-page-top-section-tio-two-images-second-img {
  height: 37vh;
  border-radius: 25px !important;
  position: relative;
  padding: 0 !important;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 {
  padding: 0 15px;
}

.main-page-card-section-middle .card-body.main-page-card-text {
  padding: 15px 5px 0;
}


.top_main_left_col .col-md-9.col-12.main-page-top-image-first-section {
  width: 67%;
  max-width: 67%;
}

.top_main_left_col .col-md-3.col-12.top_boxes_small_items {
  padding-right: 20px;
  width: 33%;
  max-width: 33%;
}

.main-page-card-section-middle .card a img {
  border-radius: 25px !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 25vh !important;
  /* border: 3px solid #054543; */
}

.main-page-top-image-first-section .first-image-right-side a .mage-title-common-image {
  font-size: 20px !important;
  text-align: left !important;
}

.main-page-bottom-two-cards-section .card a img {
  text-decoration: none !important;
  min-height: 36vh !important;
  max-height: 36vh !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 25px !important;
  /* border: 3px solid #054543; */
}


.main-page-card-box-middle-section .card .card-body img {
  border-radius: 10px !important;
}

.main-page-card-box-middle-section a {
  text-decoration: none;
}

.main-page-card-box-middle-section a h5 {
  text-decoration: none !important;
  color: white !important;
  border: none !important;
  font-weight: 500;
  font-size: 18px !important;
}

.news-page-latest-news-all .col-md-3.col-12.img-section {
  width: 22%;
  padding-left: 0px;
  max-width: 22%;
  padding-right: 10px;
}

.main-page-latest-news-section-bottom .img-section a img {
  text-decoration: none !important;
  min-height: 19vh !important;
  max-height: 19vh !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 25px !important;
  object-fit: cover;
  /* border: 3px solid #054543; */
}

.main-page-latest-news-news-section .card-body a p.card-text-news {
  text-decoration: none !important;
  color: grey;
  font-size: 16px !important;
  margin-top: -10px;
  text-align: left !important;
}

.news-page-latest-news-all hr.news-latest-news-hr,
.article-details-news-section hr.news-latest-news-hr,
.news-page-main-container hr.news-latest-news-hr {
  opacity: 0;
}


.main_right_side .video_cus iframe {
  border-radius: 20px;
}



.main-page-top-section-tio-two-images-second-img .main-page-1-2-images-second .brand-logo-icon img {
  border-radius: 15px !important;
  object-fit: contain;
  margin-top: 0px;
  background-color: white;
  padding: 5px 5px;
  margin-left: 0;
  height: 90px;
  width: 100%;
}

.top-broker-adv-container-main-page .brand-broker-heading-top {
  vertical-align: bottom;
  padding-top: 0px;
  padding-left: 0;
  width: 60%;
  display: inline-block;
}

.top-broker-adv-container-main-page .container-for-broker-details {
  border-radius: 20px 20px 0 0;
  padding: 10px 10px;
  display: inline-block;
  width: 100%;
}

.top-broker-adv-container-main-page .container-for-broker-details .brand-logo-icon {
  width: 38%;
  padding: 0 10px;
  display: inline-block;
  vertical-align: top;
}

.col-md-6.rating-section {
  padding: 0;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 {
  position: relative;
  padding: 0 15px !important;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0.rating-inside {
  position: relative;
  padding: 0 5px !important;
}

.top-broker-adv-container-main-page .container-for-broker-details .brand-broker-heading-top h3 {
  color: white;
  font-size: 22px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  word-break: break-all;
  margin-bottom: 10px;
  margin-top: 5px;
}

.top-broker-adv-container-main-page .container-for-broker-details .brand-broker-heading-top p {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 .right-side-col {
  align-self: center;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 .right-side-col .rating-and-other-headings {
  /* display: flex;*/
  line-height: 0;
  margin-top: 10px;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 .left-side-col .rating-and-other-headings {
  line-height: 0;
  margin-top: 0px;
  display: block;
  margin-bottom: 20px;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_last_row.m-0 {
  padding-top: 20px;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_last_row.m-0 .right_side {
  align-self: center;
}

.top-broker-adv-container-main-page .row.second-gredient-row a.visit_link_cus {
  color: #008290;
  display: block;
  width: 85%;
  text-align: center;
  background-color: white;
  padding: 10px 4px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 12px;
}

.top-broker-adv-container-main-page .row.second-gredient-row .left-side-col .rating-and-other-headings p.fca-image-right {
  margin: 0;
  margin-top: -3px ! IMPORTANT;
}

.top-broker-adv-container-main-page .row.second-gredient-row .row.inside_values_row.m-0 .rating-and-other-headings p {
  /*margin-top: -3px;*/
  /* margin-left: 15px;*/
  color: white;
}

.rating-and-other-headings-btn.more-information-btns-top-main-page {
  width: 95%;
  margin: 10px auto 0;
}

.more-information-btns-top-main-page a.button-more-info {
  border-radius: 45px;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  padding: 9px 9px;
  font-size: 12px;
  font-weight: 500;
  display: block;
  width: 85%;
  margin: 10px 0 0;
}

.container-for-broker-details.pl-0 {
  padding-left: 0 !important;
}

.top-broker-adv-container-main-page .rating-and-other-headings h6 {
  color: #FFF;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  margin-bottom: 10px;
}

.broker-details-rating-section-card .rating-and-other-headings p {
  color: white;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  word-break: break-all;
}


.broker-details-rating-section-card-more-details .rating-and-other-headings h6 {
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  word-break: break-all;
}

.broker-details-rating-section-card-more-details .rating-and-other-headings-btn button {
  background-color: white;
  padding: 11px;
  border-radius: 18px;
  text-decoration: none;
  border: none;
  color: rgb(86, 153, 170);
  font-size: 13px;
  font-weight: 500;
}

.broker-details-rating-section-card-more-details .rating-and-other-headings img.img-fluid {
  width: 75%;
}

.rating-section-and-other-details-broker-adv .col-md-3.main-details-container img {
  width: 10%;
}


.contact-us.second-sec form#my_captcha_form label {
  margin-top: 15px;
  color: white;
}

.contact-us .content-resources {
  margin-bottom: 80px;
}

.contact-us .image-resources {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: none;
  padding-top: 0;
  padding-bottom: 80px;
}


/* vertivcal advertisement of brokers */

.broker-details-adv-main-page-vertical-section {
  border-radius: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #042625;
  position: relative;
  border-radius: 20px;
}

.broker-details-adv-main-page-vertical-section .color-shape {
  content: "";
  display: block;
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 56% 100%, 0% 100%);
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 15%;
  border-radius: 20px 0 0 20px;
  display: none;
}

.broker-avd-brand-icons.text-center {
  position: relative;
}

.broker-avd-brand-icons img {
  width: 110px;
  object-fit: cover;
  border-radius: 20px;
  margin: 35px 0px 0px 20px;
  /* border: 4px solid white; */
  background-color: transparent;
}

.broker-adv-other-details-section .broker-details-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px 0px 0px;
}

.broker-adv-other-details-section .broker-details-section .brand-details-and-assets-info {
  padding: 15px 0px 0;
}

.broker-adv-other-details-section .broker-details-section .brand-details-and-assets-info h3 {
  color: rgb(0 100 250);
  font-size: 23px;
  font-weight: 600;
  text-align: left;
}

.broker-adv-other-details-section .broker-details-section .brand-details-and-assets-info p {
  color: white;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  word-break: break-all;
  margin-bottom: 0;
}

.broker-adv-other-details-section .broker-details-section .broker-adv-open-account-btn button {
  background-color: rgb(0 100 250);
  color: white;
  font-size: 15px;
  font-weight: 500;
  vertical-align: middle;
  border: none;
  border-radius: 20px;
  padding: 8px 30px;
  text-transform: capitalize;
}

.rating-section-and-other-details-broker-adv .main-details-container span.heading {
  color: white;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  word-break: break-all;
}

.rating-section-and-other-details-broker-adv .main-details-container span.content {
  color: white;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  word-break: break-all;
}

.main-article-section-adv-bottom p {
  text-align: left;
  color: white;
  font-size: 12px;
  font-weight: 300;
}

.main-article-section-adv-bottom {
  margin-top: 20px;
  padding: 0px 20px 0px 0px;
  font-size: 14px;
  margin-bottom: 10px;
  color: white;
}

/* Resources poge */

.resporces-page-all-images .container-section .my-card-RE .card-image-RE a img {
  border-radius: 25px !important;
  max-width: 100% !important;
  min-height: 220px !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

/* article details page */

.article-details-top-main-img-section .article-details-main-img img {
  border-radius: 15px 15px 15px 15px !important;
}



.article-details-news-section .article-details-latest-news-first .row .img-section div a img {
  text-decoration: none !important;
  min-height: 19vh !important;
  max-height: 19vh !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 15px !important;
  object-fit: cover;
}

.broker-page-container .broker-card-gradient .card-body span.text-white {
  text-align: left !important;
  /* float: left !important; */
  /* margin-left: 80px !important; */
  color: rgb(255, 255, 255) !important;
}

.row.g-0.related_Articles {
  margin-bottom: 20px;
}

.article-details-news-section .col-md-3.img-section {
  width: 22%;
  padding-left: 0px;
  max-width: 22%;
  padding-right: 10px;
}

.related_Articles .col-md-9.news-section {
  padding-left: 10px;
}

.related_Articles img.card-img-article-details {
  text-decoration: none !important;
  min-height: 5rem;
  max-height: 5rem;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: 15px !important;
  object-fit: cover;
}

.related_Articles h3.card-title.d-block.w-100 {
  text-decoration: none;
  color: white !important;
  font-size: 1rem !important;
  margin-bottom: 5px;
  font-weight: 500;
  min-height: calc(1.5em * 3);
  line-height: 1.5em;
  padding: 0;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

.related_Articles .card-body.card-body-news-page {
  padding: 0 !IMPORTANT;
}


.main_right_side .broker-card-gradient.sidebar {
  width: 100%;
  padding: 15px 15px;
  background-color: #042625 !important;
  background: #f2f2f2;
  margin-bottom: 25px;
  border: none;
}

.main_right_side .broker-card-gradient.sidebar span.fa.fa-star.checked {
  color: orange;
}

.main_right_side .broker-card-gradient.sidebar span.fw-bold.text-secondary {
  font-size: 14px;
  line-height: 1.5;
}

.main_right_side .broker-card-gradient.sidebar p.text-secondary {
  font-size: 14px;
  text-align: left;
  color: white !important;
}

.main_right_side .broker-card-gradient.sidebar span.fw-bold.text-white {
  color: #6c757d !important;
  font-size: 15px;
}

.main_right_side .broker-card-gradient.sidebar a.btn.btn-outline-success {
  background-color: white;
  border-color: white;
  color: #042625 ! IMPORTANT;
  font-size: 13px;
}

.main_right_side .broker-card-gradient.sidebar .card-title-broker {
  margin-left: 10px;
  color: white;
  font-size: 18px;
  text-align: left;
  line-height: 1.5;
}

.nav-item.dropdowns>a::after {
  display: none !important;
}

.news-page-broker-side img.img-fluid {
  width: 50% !important;
  margin-left: 10px;
}

.news-page-first-heading-news nav.navbar.navbar-expand-lg.navbar-dark {
  margin-top: 20px;
}

/*
   .top-navbar :hover {
    background-color: #03BF4F;
    color: white !important;
    border-radius: 5px;
    padding: 10px;
  } */


.dropdowns-menu {
  background-color: #021f1b !important;
  width: 250px !important;
}

.dropdowns-menu .dropdowns-item {
  color: white;
  border-bottom: 1px solid grey;
  /* padding: 10px; */
  font-size: 16px;
  font-weight: 500;
}

.dropdowns-menu .dropdowns-item:last-child {
  border-bottom: none;
  /* Remove the border for the last LI */
}

.dropdowns-menu .dropdowns-item>.first {
  color: white;
  border-bottom: none !important;
  /* padding: 10px; */
  font-size: 16px;
  font-weight: 500;
}

.btn-outline-success {
  -bs-btn-color: #03BF4F !important;
  --bs-btn-border-color: #03BF4F !important;
  --bs-btn-hover-color: #ffffff !important;
  --bs-btn-hover-bg: #03BF4F !important;
  --bs-btn-hover-border-color: #03BF4F !important;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #03BF4F !important;
  --bs-btn-active-border-color: #03BF4F !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #03BF4F !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #03BF4F !important;
  --bs-gradient: none;
  color: #03BF4F !important;
}

.btn-outline-success:hover {
  color: #ffffff !important;
}

.brokers-page-second-navbar-top ul.navbar-nav li.nav-item .active {
  border-bottom: 5px solid #03BF4F;
  border-width: 50%;
  color: #fff !important;
  font-weight: 700;
}

/*.brokers-page-second-navbar-top ul.navbar-nav li.nav-item .active:after {
    content: "";
    display: block;
    height: 7px;
    width: 50px;
    background-color: #03bf4f;
    position: absolute;
}*/

.main-container-broker .navbar .navbar-nav .nav-item .nav-link {
  color: #7E9E9B;
  font-family: Poppins;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*  resources*/

.container.resources_details {
  color: white;
}

.resources_info .resources-page-content-images {
  background-color: rgba(2, 31, 29, 0.8);
  padding: 10px 10px;
  border: 1.6px solid rgba(20, 94, 86, 1);
  padding: 1.3rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  height: 100%;
}

.resources_info .sidebar {
  padding-top: 10px;
}

.resources-page-content-images .image-item a img {
  border-radius: 1rem !important;
  min-height: 10rem !important;
  max-height: 10rem !important;
  object-fit: cover;
  /* border: 3px solid #054543; */
}

.broker-cards-db-data-dynamic {
  margin-top: 25px !important;
}

.broker-cards-db-data-dynamic span.data {
  margin-top: 50px !important;
}

.text-left-broker-card {
  text-align: left !important;
}

.divider {
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: #7d7d7d;
  margin: 2px 5px;
}

.signup-now-login-page-section label a {
  color: #03BF4F !important;
}

/*.login-text-login-page,
.register-now-heading-section,
.select-your-interest-section {
  color:
    #034645 !important;
}*/

.select-your-interest-form-section label {
  color: #242424;
}

a.main-page-anchor-tag-section {
  text-decoration: none !important;
}

/* login css changed */

li.login-btn-top-section a:hover {
  background-color: #03BF4F;
}

li.signup-btn-top-section a:hover {
  background-color: white !important;
  color: #03BF4F !important;
}


/* search bar transition */

/* Hide dropdowns menus by default */
.nav-item.dropdowns .dropdowns-menu {
  display: none;
}

/* Show the dropdowns on hover */
.nav-item.dropdowns:hover .dropdowns-menu {
  display: block;
}

/* Style the dropdowns menus */
.dropdowns-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.menu-brokers-dropdowns-section-container {
  height: auto;
  padding: 5px;
}

.menu-brokers-dropdowns-section-container .dropdowns-menu-icons-broker {
  display: flex;
  justify-content: start;
  margin-top: 10px;
  background-color: white;
  border-radius: 10px;
  padding: 0 10px;

}

.menu-brokers-dropdowns-section-container .dropdowns-menu-icons-broker .img img {
  width: 40px;

}

.menu-brokers-dropdowns-section-container .dropdowns-menu-icons-broker .text-heading-and-rating h3 {
  color: #003d33;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}

.text-heading-and-rating-compare {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-brokers-dropdowns-section-container .dropdowns-menu-icons-broker .text-heading-and-rating img {
  width: 80px;
  margin-top: -10px;
}

.dropdowns-menu {
  --bs-dropdowns-zindex: 1000;
  --bs-dropdowns-min-width: 10rem;
  --bs-dropdowns-padding-x: 0;
  --bs-dropdowns-padding-y: 0.5rem;
  --bs-dropdowns-spacer: 0.125rem;
  --bs-dropdowns-font-size: 1rem;
  --bs-dropdowns-color: var(--bs-body-color);
  --bs-dropdowns-bg: var(--bs-body-bg);
  --bs-dropdowns-border-color: var(--bs-border-color-translucent);
  --bs-dropdowns-border-radius: var(--bs-border-radius);
  --bs-dropdowns-border-width: var(--bs-border-width);
  --bs-dropdowns-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdowns-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdowns-divider-margin-y: 0.5rem;
  --bs-dropdowns-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-dropdowns-link-color: var(--bs-body-color);
  --bs-dropdowns-link-hover-color: #242424 !important;
  --bs-dropdowns-link-hover-bg: #bf4b03 !important;
  --bs-dropdowns-link-active-color: #242424 !important;
  --bs-dropdowns-link-active-bg: #0d6efd;
  --bs-dropdowns-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdowns-item-padding-x: 1rem;
  --bs-dropdowns-item-padding-y: 0.25rem;
  --bs-dropdowns-header-color: #6c757d;
  --bs-dropdowns-header-padding-x: 1rem;
  --bs-dropdowns-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdowns-zindex);
  display: none;
  min-width: var(--bs-dropdowns-min-width);
  padding: var(--bs-dropdowns-padding-y) var(--bs-dropdowns-padding-x);
  margin: 0;
  font-size: var(--bs-dropdowns-font-size);
  color: var(--bs-dropdowns-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdowns-bg);
  background-clip: padding-box;
  border: var(--bs-dropdowns-border-width) solid var(--bs-dropdowns-border-color);
  border-radius: var(--bs-dropdowns-border-radius);
}




/* Active nav-item */
.top-navbar:hover {
  /* background-color: #03BF4F; */
  border-radius: 5px;
  min-height: 30px !important;
  width: fit-content !important;
}

.top-navbar.active {
  /* background-color: #03BF4F !important; */
  color: #03BF4F !important;
  padding: 0px !important;
  border-radius: 10px !important;
  width: auto !important;
}

.top-navbar.dropdowns:hover {
  background-color: transparent !important;
  color: #03BF4F;
}

.pegination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.top-navbar a.nav-link-second-nav {
  text-align: center;
  margin-left: 16px;
}

.top-navbar.dropdowns .dropdowns-menu {
  display: none;
  background-color: #03BF4F;
}

.top-navbar.dropdowns:hover .dropdowns-menu {
  display: block;
}

.top-navbar.dropdowns:hover a {
  color: #03BF4F !important;
}

.top-navbar.dropdowns .dropdowns-item {
  color: rgb(255, 255, 255);
}

.top-navbar.dropdowns .dropdowns-item.active {
  background-color: transparent;
  color: white;

}

.top-navbar.dropdowns .dropdowns-item.active a {
  color: #03BF4F !important;
}

.top-navbar.dropdowns .dropdowns-item.active,
.top-navbar.dropdowns .dropdowns-item:hover {
  background-color: transparent;
  color: white;
}

.news-new-image-top-section .card img {
  border-radius: 15px;
  width: 100%;
}

.profile-image-account-details img {
  border-radius: 50%;

}

.profile-edit-icon {
  display: flex;
  justify-content: center;
  margin-top: -30px;
  margin-right: -85px;

}

.profile-edit-icon i {
  font-size: 20px;
  color: #034645;
  margin-top: -18px;
  background-color: white;
  border-radius: 100px;
  padding: 3px 3px;
  height: 40px;
  width: 40px;
  box-shadow: 0px 0px 16px -5px rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.card-price-tag {
  color: #25cb6a !important;
  font-weight: 600;
  font-size: 1.3rem;
  display: block;
  text-align: left;
  line-height: 0;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

.card-price-tag-new {
  margin-left: -10px;
}

.card-body-news-page a {
  text-decoration: none !important;
}

/* .news-page-navbar-section-top-third-navbar {
  margin-left: 120px;
} */

.news-new-card-top-main-image {
  margin-top: 30px !important;
}

.news-new-card-top-main-image-new-class a img {
  max-width: 100% !important;
  min-width: 100% !important;
  max-height: 50vh !important;
  min-height: 50vh !important;
  object-fit: cover;
}

.news-page-main-container hr.news-latest-news-hr {
  margin: 8px 0;
}

.neutral {
  color: #868887;
  background-color: transparent;
  border: none;
}

.bearish {
  background-color: transparent;
  border: none;
  color: #860000;
}

.bullish {
  color: #054543;
  background-color: transparent;
  border: none;
}

.eye-icon-signup-page-section {
  margin-left: 0;
  margin-bottom: 0;
  position: absolute;
  right: 25px;
  top: 0;
  cursor: pointer;
}

.eye-icon-signup-page-section i {
  color: white;
  margin-top: 10px;
}

.article-details-news-section-new-class {
  min-height: 180px;
  max-height: 180px;
}

.mt-3.article-details-paragraphs h2 {
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
}

.mt-3.article-details-paragraphs,
.mt-3.article-details-paragraphs p,
.mt-3.article-details-paragraphs p span,
.mt-3.article-details-paragraphs .zw-paragraph {
  font-size: 16px !important;
  color: white !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mt-3.article-details-paragraphs img {
  width: 100%;
}

.article-details-section-social-media-icons {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.article-details-section-social-media-icons a span img.facebook-icon,
.article-details-section-social-media-icons a span img.twitter-icon,
.article-details-section-social-media-icons a span img.linkedin-icon,
.article-details-section-social-media-icons a span img.google-plus-icon {
  width: 2vw;
  margin-right: 5px;
}

/* .article-details-section-social-media-icons a span img.twitter-icon {
    width: 3vw;
    margin-right: 5px;
}
.article-details-section-social-media-icons a span img.linkedin-icon {
width: 3vw;
margin-right: 5px;
}
.article-details-section-social-media-icons a span img.google-plus-icon {
width: 3vw;
margin-right: 5px;
} */

.profile-image-account-details img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.divider-for-details-page {
  width: 2px;
  height: 15px;
  background-color: #ccc;
  margin: 0 10px;
  margin-top: 3px;
}

.note-for-user-details p {
  color: rgb(152, 152, 152);
}

.passcheck-sign-up .pass-guidelines b {
  font-size: 12px !important;
  /* display: list-item; */
}

.pass-guidelines {
  color: lightgray;
}

.passcheck-sign-up .list-view-descriptions p {
  font-size: 12px !important;
  color: lightgray;
  display: list-item;
  line-height: 0.5;
  margin-left: 23px;
}

.email-verification-text-sing-up b {
  font-size: 14px !important;
  color: red !important;
  font-weight: 300;
}

.academy-section-cards-main-container .container-card .card img {
  border-radius: 25px;
  width: 100%;
  height: 36vh;
  object-fit: cover;
  /* border: 3px solid #054543; */
}

.row.Technical.analysis .academy-section-cards-main-container .container-card .card img {
  height: 27vh;
  object-fit: cover;
}

.main-page-top-main-image a {
  width: 100% !important;
  padding: 0px !important;
  margin-left: 0px !important;
  text-decoration: none;
}


.main-page-1-2-images-first {
  padding: 20px 10px 0;
  height: 26vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  position: relative;
  margin-bottom: 22px;
  border: 3px solid #054543;
}

.main-page-1-2-images-first .row.acedmy-area {
  position: absolute;
  width: 100%;
  top: 25%;
}

.main-page-1-2-images-first .row.acedmy-area .col-md-5 img.image {
  margin-top: 15px;
  margin-left: 10px;
}

.main-page-1-2-images-first .row.acedmy-area h3.light-weight {
  font-size: 16px;
}

.main-page-1-2-images-first .row.acedmy-area h2.bold-weight {
  font-size: 16px;
  font-weight: 600;
}

.main-page-1-2-images-first .row.acedmy-area a.button {
  background-color: #054543;
  color: white;
  text-decoration: none;
  padding: 5px 5px;
  border-radius: 100px;
  display: block;
  width: 80%;
  margin: 15px auto 15px;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
}

.main-page-1-2-images-first .row.acedmy-area a.button:after {
  content: "";
  position: absolute;
  left: 3px;
  right: 0;
  top: -45px;
  bottom: 0;
  height: 25vh;
  width: 100%;
}

.main-page-1-2-images-first .row.acedmy-area .col-md-7 {
  text-align: center;
}

.row.Technical.analysis .col-md-6.academy-section-cards-main-container {
  max-width: 33.33333333%;
  flex: 33.33333333%;
}


.active>.page-link,
.page-link.active {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: #4fe412;
  border-color: var(--bs-pagination-active-border-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: ##034645 !important;
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #03BF4F !important;
  --bs-pagination-active-border-color: #03BF4F !important;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

.broker_details_tab .info-page-card .card.border.border-0 {
  margin-top: 10px;
  padding: 0 10px;
}

.broker-deatils-blade-client-icon img {
  width: 180px;
  height: 180px;
  border: 10px solid white;
  background-color: white;
  padding: 0px 15px;
  border-radius: 20px;
  object-fit: contain;
}

.brokers_details .adv-img-broker-pages img.img-fluid {
  width: 85%;
  margin: 0 auto;
  display: block;
}

.broker-main-title-top {
  padding-top: 10px;
}

.broker-details-page-cards-image-all img {
  width: 20% !important;
  height: auto;
  border-radius: 15px;
  object-fit: contain;
  margin-bottom: 10px;
  padding: 10px 10px;
}

.main-bg-img-broker-details-page-section-top img {
  width: 100%;
  height: 20vh;
  object-fit: cover;
}

.brokers_details_tab .nav-tabs .nav-item .nav-link {
  color: white;
  border: none;
  background-color: transparent;
}

.brokers_details_tab .nav-tabs .nav-link.active:after {
  content: "";
  display: block;
  height: 6px;
  width: 35px;
  background: #03BF4F;
  margin-top: 8px;
  position: absolute;
}

.broker_details_tab .info-page-card {
  margin-top: 0;
}

div#information .container.rounded-4 {
  padding: 20px 10px !important;
  border: none !important;
}

div#overview .container.border {
  padding: 20px 20px !important;
}

div#proscons .container.rounded-4 {
  padding: 20px 20px !important;
}

div#summary .container.p-3.rounded-4 {
  padding: 20px 20px !important;
}

div#summary .summery-container img {
  margin-top: -10px;
}

.information-new-section {
  margin-top: 30px;
}

.card.broker-detail-page-top-container.rounded-4 {
  width: 100%;
  padding: 20px 20px;
  box-shadow: 0px 0px 27px -13px rgba(0, 0, 0, 0.75);
  border: none;
  margin: -50px 0 0 0;
  background-color: #042625 !important;
}

/* Animation */

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 60px, 0)
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 60px, 0)
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.information-new-section .col-md-4 {
  background-color: #042625;
  padding: 55px 40px;
  border-radius: 10px;
  margin-right: 40px !important;
  width: 31%;
  animation-delay: 0.1s;
  animation-name: fadeInUp;
}

.information-new-section .col-md-4 .card-text {
  overflow: unset;
  text-overflow: unset;
  display: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.information-new-section .col-md-4:last-child {
  margin-right: 0 !important;
}

.navbar.container-fluid.resources-outer-container {
  padding-bottom: 35px;
  padding-top: 0;
}

.container.resources_details {
  padding-top: 15px;
}


.image-item-investing-page .image-name.fw-bold {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}


.image-item-investing-page .image-name-date {
  float: left;
  text-align: left;
  margin-top: 10px;
  color: white;
  font-size: 14px;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.card.broker-detail-page-top-container.rounded-4 .logos-brokers {
  width: 120px;
  height: 120px !important;
  border-radius: 20px;
  object-fit: cover;
  margin-right: 0;
}

.card.broker-detail-page-top-container.rounded-4 img.check_icon {
  width: 7%;
}

.card.broker-detail-page-top-container.rounded-4 .col-md-2 {
  max-width: 11%;
  width: 11%;
}

.card.broker-detail-page-top-container.rounded-4 .col-md-10 {
  max-width: 89%;
  width: 89%;
}

.card.broker-detail-page-top-container.rounded-4 h2.card-title-broker-main {
  font-size: 35px;
  font-weight: 600;
  color: white;
}

.card.broker-detail-page-top-container.rounded-4 h2.card-title-broker-main span {
  font-weight: 300;
  font-size: 14px;
  margin-left: 10px;
  position: relative;
  top: -7px;
}

.card.broker-detail-page-top-container.rounded-4 .open-account p {
  font-size: 11px;
  text-align: right;
  margin-top: 10px;
}

.card.broker-detail-page-top-container.rounded-4 .broker-page-rating-text {
  margin-top: 20px;
}

.card.broker-detail-page-top-container.rounded-4 .broker-page-rating-text span.fa.fa-star {
  margin-left: 0 !important;
  font-size: 20px;
}

.information-new-section .col-md-4 h3.mb-2.mt-2.fw-bold {
  font-size: 18px !important;
  margin-bottom: 15px !important;
  margin-top: 10px ! IMPORTANT;
  color: white !important;
}

/*About us*/

.container.about-us.second-sec.gx-0 {
  padding: 50px 0;
}

.container.about-us .col-md-6.content-col {
  align-self: center;
  padding-left: 40px;
}

.container.about-us .col-md-6.content-col h2 {
  font-size: 28px;
  font-weight: bold;
  color: #034645;
}

.container.about-us .col-md-6.img-col {
  padding: 30px 40px;
}

.container.about-us .col-md-6.content-col hr {
  width: 10%;
  height: 10px;
  background-color: #03bf4f !important;
  color: #03BF4F !important;
  border-bottom: 10px solid #03BF4F !important;
  opacity: 1;
}


.contact-us.second-sec {
  margin-bottom: 50px;
}

.contact-us.second-sec .row.form-row {
  margin: 20px 0;
}

.contact-us .col-md-12.form-box-row {
  width: 80%;
  margin: 0 auto;
  margin-top: -50px;
  z-index: 9;
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0px 0px 17px -6px rgba(0, 0, 0, 0.75);
  background-color: #042625;
}

.contact-us .col-md-12.form-box-row input.form-control {
  border: none;
  border-bottom: 1px solid white;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  color: white;
}

.contact-us .col-md-12.form-box-row input.form-control::placeholder {
  color: white;
}

.contact-us button.contact_btn {
  background-color: #03BF4F;
  border: none;
  color: white;
  padding: 10px 50px;
  border-radius: 100px;
  margin-top: 15px;
  outline: none;
}


/*Lead form*/

.lead-blade-file .input-box.new-login.phone_field select.form-select.me-2 {
  position: absolute;
  bottom: 2px;
  line-height: 1.5;
  height: auto;
  top: unset;
  --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e) !important;
}

.lead-blade-file .col-md-12.form-box-row input.form-control::placeholder {
  color: white !important;
}

.lead-blade-file .row.form-row .lead-col {
  margin: 10px 0;
}

.lead-blade-file .input-box.new-login.phone_field .phone1.form-control {
  padding: 7px 0px 7px !important;
}


.container.terms-condition.second-sec.gx-0 {
  padding: 50px 40px;
}

.container.terms-condition.second-sec .col-md-6.link-box-cus {
  margin: 13px 0px;
}

.container.terms-condition .col-md-6.link-box-cus a.link_terms {
  padding: 20px 20px;
  display: block;
  box-shadow: 0px 0px 18px -10px rgba(0, 0, 0, 0.75);
  border-radius: 15px;
  text-decoration: none;
  border-left: 7px solid #03BF4F;
  background-color: #042625;
  color: white ! IMPORTANT;
}

.container.terms-condition .col-md-6.link-box-cus a.link_terms h2 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}

.container.terms-condition .col-md-6.link-box-cus i.fa.fa-angle-right {
  font-size: 25px;
  float: right;
  color: #7a7a7a;
}



/*.more-information-btns-top-main-page a:after {
  content: "";
  position: absolute;
  left: -5px;
  right: 0;
  bottom: 0;
  top: -3px;
  height: 27vh;
  border-radius: 20px;
}*/

.show-more-btn-main-page-section {
  margin-top: 50px;
}

.vist-site-first-container-broker a {
  margin-bottom: -50px !important;
}

.star-icon-rating {
  font-size: 12px !important;
  margin-top: -5px !important;
  color: orange !important;
}

.star-icon-rating-black {
  font-size: 12px !important;
  margin-top: -5px !important;
  margin-left: 2px !important;
  color: black !important;
}

/*Trading Tool*/

.trading_tools .col-md-3.container-section {
  padding: 11px 5px;
  align-self: center;
}

.trading_tools .col-md-3.container-section .my-card-RE .col-md-9 {
  align-self: center;
}

.trading_tools .col-md-3.container-section .my-card-RE {
  padding: 11px 15px;
  align-self: center;
  background-color: #042625;
  border-radius: 10px;
}

.trading_tools .col-md-3.container-section a {
  text-decoration: none;
}

/*Calculator VAT*/


/* CALCULATOR STYLES */

#CalculatorFrame {
  width: 80%;
  margin: 0px auto;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

#Calculator {
  width: 48%;
  margin: 20px 1% 30px 1%;
  padding: 40px;
  border: none;
  float: left;
  border-radius: 30px;
  background-color: #042626;
}

.CalcVAT input,
.CalcVAT select {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  padding: 13px 10px;
  background-color: #dedede;
  border-radius: 10px;
}

.CalcVAT textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

.CalcVAT input.tick {
  float: left;
}

.CalcVAT input.circle {
  float: left;
}

.CalcVAT .SubmitButtonAdd {
  width: 49%;
  float: left;
  background-color: #03bf4e !important;
  color: #ffffff !important;
  border-radius: 100px;
}

.CalcVAT .SubmitButtonRemove {
  width: 49%;
  float: right;
  background-color: #474747 !important;
  color: var(--bs-body-color);
  border-radius: 100px;
}

#CalcResult {
  width: 48%;
  margin: 0px 1% 30px 1%;
  padding: 40px;
  border: 1px solid #d6d6d6;
  float: left;
  border-radius: 30px;
  color: white;
}

.CalcResultTop {
  float: left;
  width: 100%;
  margin-bottom: 30px;
  border-bottom: 1px solid #d6d6d6;
  font-size: 1.50em;
}

.CalcRow {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  border-bottom: 1px solid #d6d6d6;
}

.CalcRowLeft {
  float: left;
  width: 49%;
}

.CalcRowRight {
  float: right;
  width: 49%;
  text-align: right;
}

.calculator.mb-4 {
  color: white;
}


.CalcVAT div#advancedShort .col-md-6 select,
.CalcVAT div#advancedShort .col-md-6 input {
  width: 100% ! IMPORTANT;
  margin-left: 0 !important;
}

.CalcVAT div#advancedShort label {
  color: white;
  font-size: 14px;
}

/*Hidden analysis*/

.blur {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999999;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.6);
}

.BlurLoginBox {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 18px;
  padding: 30px;
  width: 90%;
  max-width: 800px;
}

.BlurLoginBox h1 {
  text-align: center;
}

.BlurLoginBox p {
  text-align: center;
}

.BlurLoginBox a {
  color: #000000;
  text-decoration: none;
}

.BlurLoginButton {
  background-color: #03bf4e;
  color: #ffffff;
  text-align: center;
  border-radius: 100px;
  margin: 10px auto 15px auto;
  padding: 12px 30px;
  width: 200px;
  -o-transition: 1s;
  -moz-transition: 1s;
  -khtml-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
  transition: 1s;
}

.BlurLoginButton:hover {
  background-color: #080808;
}

.LoginDiscOuter {
  width: 100%;
  height: auto;
  position: relative;
  float: left;
  background-color: #fef28f;
  border-radius: 18px;
}

footer.LoginDiscInner {
  width: 95%;
  max-width: 1300px;
  padding: 30px 20px 10px;
  margin: 0 auto;
  position: relative;
}

footer.LoginDiscInner p {
  text-align: center;
}

footer.LoginDiscInner a {
  color: #000000;
}

.Feat {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url(../Images/feat.png);
  background-position: top left;
  background-size: 150px;
  background-repeat: no-repeat;
  height: 100px;
  width: 150px;
}

.top_main_left_col .col-md-9.col-12.main-page-top-image-first-section .Feat {
  z-index: 9;
  top: 0;
  left: 0px;
}

footer.footer.p-2 p.text-white {
  font-size: 13px;
}

footer.footer .d-flex.justify-content-center.mt-2 {
  float: left;
}

footer.footer.p-2 p.text-white a {
  color: #03BF4F;
}

/* academy start */

.main-academy {
  text-align: center;
  color: white;
}

.academy-heading h1 {
  color: white;
  font-size: 6rem;
  font-weight: 600;
  line-height: 9.125rem;
}

h2.white-p,
h2.green-p {
  line-height: 2.3rem;
  font-size: 2rem;
}

p.white-p {
  font-weight: 400;
}

h2.green-p {
  font-weight: 700;
  color: rgba(3, 191, 78, 1) !important;
}

.academy-data-inner {
  text-align: left;
  position: relative;
  background: linear-gradient(to bottom, rgb(0 75 30 / 80%) 0%, rgb(0 43 42 / 55%) 100%);
  /* border: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(5, 81, 79, 1), rgba(3, 191, 78, 1)) 1; */
  padding: 1.5rem;
  width: 75%;
  border-radius: 1.2rem !important;
  border: 2px solid transparent;
  background: linear-gradient(to right, rgb(7 88 39), rgba(4, 38, 37, 1)) padding-box, linear-gradient(309deg, rgba(7, 114, 110, 1), rgba(3, 191, 78, 1)) border-box;
}

.academy-data-inner {
  margin-left: auto;
}

.academy-data-inner.right {
  margin-left: 0;
}

.academy-data-inner h2 {
  font-size: 3.125rem;
  font-weight: 600;
  z-index: 111;
  position: relative;
}

img.academy-icon {
  position: absolute;
  top: .5rem;
  left: auto;
  width: 4.5rem;
  right: 0;
  bottom: 1rem;
}

.academy-data-inner p {
  font-size: 1.3rem;
  z-index: 11;
  position: relative;
}

.academy-heading {
  padding: 0rem 0 0 0;
  margin-bottom: 6rem;
}

.academy-content-heading-section-new p {
  font-size: 1.3rem;
  color: #034645;
}

.academy-content-heading-section-new h3 {
  color: white;
  font-weight: 700;
  font-size: 2rem;
}

.academy-items {
  color: white;
}

.academy-items img {
  border-radius: 1.5rem;
}

.academy-items h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #034645;
  margin: 0;
}

.academy-items p {
  font-size: 1rem;
  color: #4C4C4C;
  margin: 0;
  padding: 0;
}

.volume-products a.academy-btn {
  padding: .7rem 1.4rem;
  border-radius: 2rem;
  margin-top: 20px !important;
  display: block;
  width: max-content;
  text-align: center;
  background-color: white;
  color: #042525;
}

a.academy-btn {
  background-color: rgba(3, 191, 78, 1);
  padding: .7rem 1.4rem;
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  display: block;
  width: max-content;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1rem !important;
}

.academy-items img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
}

.academy-hr {
  margin: 2.3rem 0;
  color: white !important;
  opacity: unset !important;
}

.academy-volume .col-md-9.mb-5 {
  align-self: center;
  margin: 0 !important;
  padding: 0 !important;
}

.academy-topics li {
  list-style: none;
}

.academy-topics li a {
  color: #03BF4E;
  font-size: 1.1rem;
}

.academy-volume-left h2 {
  font-size: 1.8rem;
  color: #03BF4E !important;
  font-weight: 700;
}

.academy-volume-left h3 {
  color: #fff;
  font-weight: 700;
  font-size: 2.3rem;
}

.academy-volume-left p {
  font-size: 1.5rem;
  color: #034645;
}

.academy-volume-right h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #03bf4e !important;
  text-align: end;
}

.academy-volume-right img {
  width: 14rem;
}

.single-volume-product p.pb-3 {
  color: #034645;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding-bottom: 0 !important;
  margin-bottom: 0;
}


.academy-main-section p.read_more {
  color: #03bf4e !important;
  text-decoration: underline !important;
}

.academy-main-section p span.fw-bold,
.academy-main-section p {
  font-size: 1rem;
  margin-top: 5px;
  margin-bottom: 1.5rem;
}

/*Force color update for dark*/

.academy-main-section p span {
  min-height: calc(1.5em * 1);
  line-height: 1.5em;
  padding: 0;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow-wrap: break-word;
  word-break: break-word;
  color: #fff !important;
  margin-bottom: .5rem;
}

.mb-5.acedemy-box h2 span {
  color: white !important;
}

.volume-products .lesson-col.mb-5 p span {
  color: white !important;
}

.volume-products .col-md-12.mb-5 span {
  color: white !important;
}


.academy-reverse-rows .academy-items p.pb-3 {
  color: #034645;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding-bottom: 0 !important;
  margin-bottom: 0;
}

.academy-main-section p.read-more-target.mt-3 {
  font-size: 16px;
  color: #034645;
}

.academy-main-section .read-more-trigger_opened,
.academy-main-section .read-more-trigger_closed {
  cursor: pointer;
}


/*New*/

.academy-main-section .accordion-header p {
  width: 85%;
  font-weight: 300;
}

.academy-main-section .accordion-button::after {
  display: none;
  /* Remove default Bootstrap arrow */
}

.academy-main-section .accordion-button:not(.collapsed) {
  box-shadow: none !important;
  align-items: start ! IMPORTANT;
}

.academy-main-section .plus-icon {
  font-size: 24px;
  font-weight: bold;
  user-select: none;
  margin-left: auto;
  color: #fff;
  background-color: rgba(3, 191, 78, 1);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 0.3s ease;
  padding: 0 10px;
}

.academy-main-section button.accordion-button.collapsed {
  padding: 0;
  display: flex !important;
  align-items: start !important;
}

/* Show + when collapsed */
.academy-main-section .accordion-button.collapsed .plus-icon::before {
  content: '+';
}

/* Show − when expanded */
.academy-main-section .accordion-button:not(.collapsed) .plus-icon::before {
  content: '−';
  /* Unicode minus */
}


/* Hide "Read Less" and additional content by default */
.academy-main-section .read-more-target,
.academy-main-section .read-more-trigger_opened {
  display: none;
}

/* When checkbox is checked, show expanded content and "Read Less"; hide "Read More" */
.academy-main-section .read-more-state:checked~.read-more-wrap .read-more-target,
.academy-main-section .read-more-state:checked~.read-more-wrap .read-more-trigger_opened {
  display: block;
  word-wrap: break-word;
}

.academy-main-section .read-more-state:checked~.read-more-wrap .read-more-trigger_closed {
  display: none;
}

/*Lessons*/

.single-volume-product p.read_more {
  color: #03bf4e;
  text-decoration: underline !important;
}

.single-volume-product p span.fw-bold,
.single-volume-product p {
  font-size: 20px;
}

.single-volume-product p.read-more-target.mt-3 {
  color: #034645;
}


.single-volume-product img.watched_batch {
  position: absolute;
  width: 15%;
  right: 0s%;
  top: 1%;

}

.single-volume-product {
  position: relative;
}

.single-volume-product img.lesson_list_img {
  width: 100%;
  height: 35vh;
  object-fit: cover;
  border-radius: 20px;
}

video.volume-video {
  width: 95%;
  aspect-ratio: 16 / 10;
  border-radius: 1.1rem;
  object-fit: cover;
}

.mini-footer {
  background-color: #03BF4E;
  padding: 0.5rem 0;
  text-align: center;
  color: white;
}

.mini-footer p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

/* academy-end */

/*Lesson view*/


.lesson-view-page h5 {
  color: white;
  font-weight: 700;
  font-size: 2rem;
}

.volume-products .col-md-12.mb-5 {
  color: white;
}

.lesson-view-page a.academy-btn-lesson-page,
.lesson-view-page button.academy-btn-lesson-page {
  background-color: gray;
  background-color: #03BF4E;
  padding: .7rem 1.4rem;
  border-radius: 2rem;
  color: white;
  text-align: center;
  cursor: pointer;
  display: block;
}

.lesson-view-page a.academy-btn-lesson-page.back {
  background-color: #e6e6e6;
  color: #101010;
}

.lesson-view-page video#lessonVideo {
  width: 100%;
  border-radius: 1.1rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.lesson-view-page video#adVideo {
  width: 100%;
  border-radius: 1.1rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.lesson-view-page .single-volume-product p {
  color: #034645;
  margin-top: 15px;
}

.lesson-view-page .single-volume-product img.watched_batch {
  position: absolute;
  width: 9%;
  right: 0%;
  top: 0%;
  z-index: 99;
}

.lesson-view-page a.academy-btn-lesson-page.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.lesson-view-page .video-container {
  position: relative;
  width: 100%;
  height: auto;
}

.lesson-view-page .play-button-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.lesson-view-page .play-button-overlay i {
  font-size: 5rem;
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  color: #042625;
  border-radius: 200px;
}

.lesson-view-page .placeholder-image {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 2;
  border-radius: 1.1rem;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.lesson-view-page .play-button-overlay i:hover {
  opacity: 1;
}

.single-volume-product.view-lesson-img img#videoPlaceholder {
  border-radius: 20px;
  height: 70vh;
  object-fit: cover;
}

.lesson-view-page .container {
  width: 85% !important;
  max-width: 85% !important;
}

.related-lessons .row.g-0.related_Lessons {
  margin-bottom: 20px !important;
  background-color: #042625;
  padding: 15px 15px 15px;
  border-radius: 10px;
}

.related-lessons .row.g-0.related_Lessons .news-section h5 {
  font-size: 15px !important;
  line-height: 1.5;
  display: -webkit-box ! IMPORTANT;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
}

.related-lessons .row.g-0.related_Lessons .news-section {
  padding: 16px 10px;
}

.related-lessons .row.g-0.related_Lessons .img-section {
  align-self: center;
}

.related-lessons .row.g-0.related_Lessons .img-section .lesson_list_img {
  border-radius: 10px;
  height: 10vh;
  object-fit: cover;
  margin-bottom: 0 !important;
}

.academy-v-text {
  font-size: 20px !important;
}

span.mt-3.academy-v-text {
  font-weight: 400 !important;
  color: white;
}

.mb-5.acedemy-box {
  margin-bottom: 2rem !important;
}

.academy-icon.digit {
  left: 1rem !important;
}

.top-broker-adv-container-main-page .container-for-broker-details .brand-logo-icon .mainfatured-img {
  padding: 52px 10px !important;
}

.brand-logo-icon .mainfatured-img img {
  border-radius: 15px !important;
  object-fit: contain;
}

.col-xl-3.col-lg-6.col-md-6.col-sm-6.mb-5.academybox {
  margin-bottom: 3rem !important;
}

.top-broker-adv-container-main-page .brand-broker-heading-top.right-box:after {
  content: "Featured";
  color: black !important;
  padding: 8px 20px;
  background: white !important;
  /* background-image: linear-gradient(to right, #021716, #015221); */
  border-radius: 50px;
  position: absolute;
  top: 20px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

.top-broker-adv-container-main-page .container-for-broker-details .brand-logo-icon.img-left {
  width: 100% !important;
  padding: 5rem 1rem !important;
}

.main-page-top-section-tio-two-images-second-img .main-page-1-2-images-second .brand-logo-icon.img-left img {
  border-radius: 15px !important;
  object-fit: contain;
  margin-top: 20px;
  background: none !important;
  padding: unset !important;
  margin-left: 0;
  height: 115px !important;
  width: 100%;
  /*background-color: white !important;*/
}


/*.col-md-6.more-information-btns-top-main-page.p-0 {
    width: 100%;
}*/


/*.top-broker-adv-container-main-page .row.second-gredient-row.right-box-content{
    position:unset;
}*/


.volume-video.thumbnail-img {
  width: 100% !important;
}

.translate-middle a i.fa.fa-play-circle.fa-3x {
  color: #e1d9d4 !important;
}

.top-50.iconvideo {
  top: 47% !important;
}

.read-more-wrap a {
  color: green;
}

.volume-products .lesson-col.mb-5 {
  position: relative;
  color: white;
}

.volume-products .lesson-col.mb-5 img.watched_batch {
  position: absolute;
  top: 5px;
  right: 15px;
  width: 15%;
}

.single-volume-product.view-lesson-img div,
.single-volume-product.view-lesson-img p {
  word-break: unset;
  white-space: normal !important;
  overflow-wrap: break-word;
}

/*.main-container-header-1-section {
    position: relative;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(-10px);  Add subtle movement for smoothness
}

.main-container-header-1-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
*/

/* Academy page new  */
.academy-details #myAccordion .accordion-item {
  /* background: linear-gradient(340deg, rgba(2, 94, 92, 0.1) 0%, rgba(4, 45, 43, 1) 100%); */
  /* border-image: linear-gradient(to bottom, rgba(14, 58, 55, 1), rgba(24, 103, 98, 1)) 1 !important; */
  border-radius: 1.2rem ! IMPORTANT;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin-bottom: 1.5rem;
  border: 2px solid transparent !important;
  margin: 1.5rem auto;
  position: relative;
  background: linear-gradient(to right, rgb(3 60 57), rgb(4 45 43)) padding-box, linear-gradient(309deg, rgba(14, 58, 55, 1), rgba(24, 103, 98, 1)) border-box;
}

.academy-main-section {
  max-width: 90%;
}

.container-fluid.main-container-header-1-section .container.header-menu {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem;
    background-color: rgba(18, 119, 58, 0.1);
    border-radius: 0rem !important;
    margin: 0rem auto;
    position: relative;
    background: linear-gradient(to right, rgb(7 88 39), rgba(4, 38, 37, 1)) padding-box, linear-gradient(309deg, rgba(7, 114, 110, 1), rgba(3, 191, 78, 1)) border-box;
    border: none;
}

.container-fluid.main-container-header-1-section .container.header-menu {
border-bottom: 2px solid transparent ! IMPORTANT;
}

.newbroker_col {
  width: 75%;
}

/* Resources new start */
.tabs-main li.nav-item {
  width: 16.1%;
  text-align: center;
}

.image-resources {
  width: 100%;
  background-image: url(../../frontend/Images/Resources/resources-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rem 0 8rem 0;
  margin-top: -12rem;
}

.content-resources h1,
.content-resources-inner h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-weight: 600;
  background: linear-gradient(to right, rgba(3, 191, 78, 1), rgba(38, 255, 125, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  text-transform: capitalize;
}

.content-resources h2 {
  font-size: 2.8rem;
  margin-bottom: .5rem;
  color: #ffffff;
  font-weight: 500;
  background: linear-gradient(to right, rgba(172, 212, 211, 1), rgba(78, 184, 122, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  max-width: 70%;
  margin: auto;
}

.content-resources-news .news {
  font-size: 48px;
  margin-left: -450px;
  margin-top: 5px;
  color: #ffffff;
  font-weight: 900;
}

.green-card {
  background: linear-gradient(
    135deg,
    rgba(3, 191, 78, 0.20) 0%,
    rgba(2, 34, 33, 0.95) 50%,
    #02201F 100%
);
  border-radius: 1.35rem;
  padding: 1.8rem;
  position: relative;
  border: 2.16px solid transparent;
  height: 100%;
}

.green-card:hover {
  text-align: left;
  border: 2.16px solid transparent;
  background: linear-gradient(to bottom, rgba(0, 75, 30, 0.8) 0%, rgba(0, 43, 42, 0.55) 100%) padding-box, linear-gradient(145deg, rgba(4, 137, 78, 1), rgba(2, 34, 33, 1), rgba(3, 191, 78, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.green-card h3 {
  color: rgba(255, 255, 255, 1);
  font-size: 1.75rem;
  margin-bottom: 1.2rem;
}

.resources-topics .green-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 70%;
}

.mini-p,
.big-p {
  color: rgba(120, 154, 153, 1) !important;
  font-size: 1.25rem;
  width: 50%;
  line-height: 2.1rem;
}

.big-p {
  width: 50%;
}

.mini-p {
  width: 80%;
}

img.icon-images {
  text-align: end;
  display: flex;
  justify-content: end;
  margin-left: auto;
  margin-bottom: -1.7rem;
  width: 8rem;
}

.blue-card {
  text-align: left;
  position: relative;
  padding: 1.5rem;
  border-radius: 1.2rem;
  border: 1px solid transparent;
  background: linear-gradient(165deg, rgba(6, 84, 93, 1), rgba(0, 34, 43, 1), rgba(6, 84, 93, 1)) padding-box, linear-gradient(145deg, rgba(88, 142, 161, 1), rgba(28, 81, 79, 1), rgba(147, 201, 240, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  height: 100%;
}

.blue-card h3,
.blue-card-p {
  font-size: 3.5rem;
  font-weight: 600;
}

.blue-card h5 {
  font-size: 1.8rem;
  font-weight: 600;
  max-width: 70%;
  line-height: 2.7rem;
}

.image-resources-inner {
  width: 100%;
  background-image: url(../../frontend/Images/Resources/resource-category-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 14rem 0 4rem 0;
  margin-top: -12rem;
}

.content-resources-inner {
  margin-bottom: .5rem;
  color: #ffffff;
  font-weight: 500;
  background: linear-gradient(to right, rgba(172, 212, 211, 1), rgba(78, 184, 122, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  margin: auto;
}

.resources-topics {
  width: 100%;
  background-image: url(../../frontend/Images/Resources/r-plain.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 0rem;
  /* display: flex;
  align-items: center;
  justify-content: left; */
}

.tabs-main .nav-pills .nav-link {
  border-radius: 4rem;
  padding: 0.6rem 1rem;
  color: #ffffff;
  border: 1px solid rgba(0, 255, 128, 0.3);
  background: transparent;
  transition: all 0.3s ease;
  width: 100%;
  font-size: 1rem;
}

.tabs-main .nav-pills .nav-link:not(.active) {
  color: #a9b7b7;
}

.tabs-main .nav-pills .nav-link.active {
  background: #00c853;
  color: #fff;
  border: 1px solid #00c853;
}

/* Home page new */
.hero-section {
  padding: 8rem 0 0rem 0;
  width: 100%;
  background-image: url(../../frontend/Images/Resources/hero-bg.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  margin-top: -7rem;
}

section.main-home-sec {
  position: relative;
  z-index: 10;
}

h2.hero-title {
  color: rgba(3, 191, 78, 1);
  font-weight: 600;
  background: linear-gradient(to right, rgba(3, 191, 78, 1), rgba(38, 255, 125, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
}

h3.hero-title {
  color: rgba(3, 191, 78, 1);
  font-weight: 500;
  background: linear-gradient(to right, rgba(172, 212, 211, 1), rgba(78, 184, 122, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 2.6rem;
}


.m-ai .chat-btns-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #03bf4e transparent;
}

.m-ai .chat-btn-col {
  display: flex;
  flex-direction: row;
  width: auto;
}

.chat-btns-wrapper {
  margin-top: 1rem;
  overflow: auto;
}

.chat-btns-scroll {
  display: flex;
  gap: 0.2rem;
  overflow: auto;
  scroll-behavior: smooth;
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #03bf4e transparent;
}

.chat-btns-scroll::-webkit-scrollbar {
  height: 6px;
}

.chat-btns-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chat-btns-scroll::-webkit-scrollbar-thumb {
  background-color: #03bf4e;
  /* green */
  border-radius: 10px;
}

.chat-btns-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #16a463;
}

.chat-btn-col {
  flex: 0 0 auto;
  min-width: 280px;
}

.chat-filter-group input::placeholder {
  color: #ffffff;
  opacity: 1;
  /* ensures full visibility */
}

/* For better browser compatibility */
.chat-filter-group input::-webkit-input-placeholder {
  color: #ffffff;
}

.chat-filter-group input:-ms-input-placeholder {
  color: #ffffff;
}

.chat-filter-group input::-ms-input-placeholder {
  color: #ffffff;
}

.m-ai-main {
  margin-top: 2rem;
  padding-top: 0rem;
}

.m-ai .chat-container {
  min-height: 70vh;
}

.m-ai .start-new-chat {
  display: inline-block;
  width: 100%;
  min-height: 3rem;
  border: 2px solid #052B29;
  border-radius: 0.78rem;
  padding: 0.7rem 0;
  text-align: center;
  color: #ffffff;
}

.m-ai .chat-history-container {
  border: 2px solid #052B29;
  border-radius: 0.78rem;
  padding: 1.5rem;
  margin-top: 2rem;
  text-align: center;
  min-height: 56vh;
  max-height: 56vh;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* Firefox */
  transition: 0.5s all;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #03bf4e transparent;
}

.m-ai .chat-history-container:hover {
  overflow-y: auto;
}


.chatbot-message-container.overflow-y-auto {
  scrollbar-width: thin;
  transition: 0.5s all;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #03bf4e transparent;
}

.m-ai .chat-history-container .sub-header {
  text-align: left;
  font-size: 1.2rem;
  color: #62B1AD !important;
}

.m-ai .chat-history-item {
  display: inline-block;
  width: 100%;
  padding: 0.7rem 0;
  color: #62B1AD;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-ai .chat-history-item.active {
  color: #ffffff;
}

.m-ai .chat-area {
  color: #fff !important;
  font-weight: 600;
  padding: .8rem;
  cursor: pointer;
  font-size: .9rem;
  transition: all 0.3s ease;
  width: 100%;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.m-ai .user-chat-message {
  border: 0.01rem solid #FFFFFF;
  border-radius: 2rem;
  padding: 1rem;
  max-width: 50%;
  text-align: left;
  display: inline-block;
  margin: 1.5rem 0 1.5rem auto
}

.assistant-reply p, .assistant-reply li, .m-ai .user-chat-message {
    font-weight: 400;
}

.assistant-reply li a {
    color: #03bf4e;
}

.m-ai .chat-area .text-end a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.chat-filter-group .form-control,
.chat-filter-group .input-group-text {
  border: 0 !important;
  background: none !important;
  border-bottom: 0.01rem solid #26605D !important;
  border-radius: 0 !important;
  color: #ffffff;
}

.chat-filter-group .form-control:active,
.chat-filter-group .form-control:focus {
  border: 0 !important;
  background: none !important;
  border-bottom: 0.01rem solid #26605D !important;
  border-radius: 0 !important;
  color: #ffffff;
  outline: 0 !important;
  box-shadow: unset !important;
}

.chat-filter-group .input-group-text {
  color: #ffffff;
}

.chat-btn {
  background: #012f20;
  border: 0.0625rem solid #2dd06e;
  border-radius: 3.125rem;
  padding: 0.5rem 1rem;
  color: #fff;
  margin: 0.375rem 0.3125rem;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}

.chat-btn:hover {
  background: #2dd06e;
  color: #000;
}

.chat-box {
  border: 0.125rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to left, rgb(2 20 19), rgb(9 55 48)) padding-box, linear-gradient(309deg, rgba(7, 114, 110, 1), rgba(93, 218, 143, 1)) border-box;
  color: #fff !important;
  font-weight: 600;
  padding: .8rem;
  cursor: pointer;
  font-size: .9rem;
  box-shadow: 4px 18px 42px rgba(0, 0, 0, 0.5), inset -3px -4px 7px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); */
  width: 100%;
  height: 39rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cta-box .btn {
  border-radius: 3.125rem;
  background: linear-gradient(90deg, #29d26f, #14a44d);
  border: none;
  color: #fff;
  font-weight: 600;
}

.store-btns img {
  width: 8rem;
  margin-right: 0.625rem;
}

.main-home-sec .container-fluid {
  max-width: 95%;
}

.green-gradient-btn {
  border: 0.125rem solid transparent !important;
  border-radius: 3rem !important;
  background: linear-gradient(to left, rgba(21, 177, 83, 1), rgba(18, 119, 58, 1)) padding-box, linear-gradient(309deg, rgba(7, 114, 110, 1), rgba(3, 191, 78, 1)) border-box;
  color: #fff !important;
  font-weight: 600;
  padding: .7rem 2rem;
  cursor: pointer;
  font-size: .9rem;
  box-shadow: 4px 18px 42px rgba(0, 0, 0, 0.5), inset -3px -4px 7px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  width: 100%;
}

.chat-box h5,
.chat-box span {
  font-size: 2.2rem;
  text-align: center;
  padding-top: 1.5rem;
  flex: 1;
}

.chat-box span {
  color: rgba(3, 191, 78, 1);
  font-weight: 600;
  background: linear-gradient(to right, rgba(3, 191, 78, 1), rgba(38, 255, 125, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: "Montserrat", sans-serif;
}

.chat-field {
  background-color: rgba(0, 58, 56, 1) !important;
  border: 0 !important;
  padding: 0rem 0 1rem 0 !important;
  color: #fff !important;
  border-radius: .7rem !important;
  flex: 1;
  font-size: 1rem;
  outline: none;
  margin-bottom: .8rem;
  width: 100%;
  resize: none;
}

.chat-field::placeholder {
  color: rgba(192, 192, 192, 1) !important;
}

.auto-height-textarea {
  box-sizing: border-box;
  overflow: hidden;
  resize: none;
  max-height: 20vh;
}

.cta-box {
  border: 0.125rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to bottom, rgba(0, 75, 30, 1), rgba(0, 43, 42, 1)) padding-box, linear-gradient(309deg, rgba(5, 81, 79, 1), rgba(3, 191, 78, 1)) border-box;
  color: #fff !important;
  font-weight: 600;
  padding: 1.5rem;
  cursor: pointer;
  font-size: .9rem;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

.chat-history-item {
    display: block;
    padding: 8px 0 10px;
    margin: 0;
    text-decoration: none;
}

.chat-history-title {
    font-size: 16px;
    line-height: 1.4;
}

.chat-history-date {
    color: #999;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    margin-top: 4px;
    padding-right: 2px;
}

.chat-history-item:hover .chat-history-title {
    color: #fff;
}

/* Alert popup */

/* Modal size control */
.alert-modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

div#alertModal {
    z-index: 9999;
}

div#alertModal .modal-dialog.modal-dialog-centered {
    margin-top: 50px;
}

div#alertModal .modal-dialog.modal-dialog-centered .accordion-body strong {
    font-weight: 600;
}

/* THIS is the key fix */
.alert-modal-body {
    overflow-y: auto;
    max-height: 65vh;
    padding-right: 10px;
    transition: 0.5s all;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #03bf4e transparent;
}

.theme-modal .modal-content {
  border: 0.125rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(145deg, #062f2a 0%, #052622 35%, #041f1c 65%, #031715 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff !important;
  border: 1px solid rgba(80, 255, 180, 0.18) !important;
  font-weight: 600;
  padding: 1.5rem;
  cursor: pointer;
  font-size: .9rem;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
}

/* --- Gradient highlight layer --- */
.theme-modal .modal-content::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(120% 140% at 95% 0%, rgba(0, 255, 170, 0.25) 0%, rgba(0, 255, 170, 0.12) 25%, rgba(0, 255, 170, 0.05) 40%, transparent 60%);
  pointer-events: none;
}

/* --- Very subtle inner shading for depth --- */
.theme-modal .modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), transparent 30%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}

.theme-modal .modal-content .link {
  color: rgba(3, 191, 78, 1);
}

.broker-box {
  border: 0.125rem solid transparent !important;
  border-radius: 1rem !important;
  background:
    linear-gradient(to right, rgba(51, 6, 6), rgba(51, 6, 6)) padding-box,
    linear-gradient(309deg, rgba(40, 3, 3, 1), rgba(183, 14, 15, 1)) border-box;
  color: #fff !important;
  font-weight: 600;
  padding: 1.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  width: 100%;
  position: relative;
}

.broker-box img.icon_check {
  margin-left: 10px;
  width: 10%;
}

.mini-logo {
  width: 9rem;
}

.bagde-feature {
  background-color: #fff;
  color: rgba(2, 22, 21, 1);
  text-shadow: none;
  font-weight: 400;
  text-align: center;
  display: inline-flex;
  padding: .2rem .4rem;
  border-radius: .5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: .9rem !important;
}

/* ==========================================================================
   Homepage sidebar broker card v2 (main-home.blade.php) -- redesigned stat
   layout (icon + label/value tiles) matching the new Figma card. Scoped via
   the ".broker-box-v2" modifier, not the bare ".broker-box" class, since
   that class is shared with the header mega-menu and a few other pages
   (new-academy/news/resourcesdetails) that still use the older layout --
   restyling ".broker-box" itself would change those too.
   ========================================================================== */

/* Glossy sheen + bottom depth overlay -- layered as background-image (not
   background-color, which stays the per-broker dynamic colour set inline
   via list_stat26 in the Blade file) so this works on top of ANY broker's
   colour, not just red. A lighter diagonal glow top-right plus a darkened
   base is what gives the card its dimension in the Figma design, instead
   of a flat solid fill.
   Selector is ".broker-box.broker-box-v2" (not just ".broker-box-v2") on
   purpose -- ".broker-box" bare-class rules are scattered across this file
   for unrelated pages (e.g. the new-academy broker section further down
   sets its own background-image), all at the same specificity, so without
   the extra class here whichever one happens to sit later in the file
   wins and silently replaces this gradient. */
.broker-box.broker-box-v2 {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 60%);
  background-repeat: no-repeat;
}

.broker-box-v2-identity {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .9rem;
}

.broker-box-v2-logo.feature-logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .6rem;
  background: #fff;
  object-fit: contain;
  padding: .3rem;
  flex: none;
}

.broker-box-v2-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.broker-box-v2-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.broker-box-v2-stars .fa-star {
  color: rgba(255, 255, 255, .3);
  font-size: .85rem;
}

.broker-box-v2-stars .fa-star.checked {
  color: #f5a51c;
}

.broker-box-v2-rating-value {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
}

.broker-box-v2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1rem;
  margin-bottom: 1.1rem;
}

.broker-box-v2-stat {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.broker-box-v2-stat-wide {
  grid-column: 1 / -1;
}

.broker-box-v2-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .9rem;
}

.broker-box-v2-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.broker-box-v2-stat-label {
  font-size: .7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .7);
  line-height: 1.3;
}

.broker-box-v2-stat-value {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.broker-box-v2-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .6rem .5rem;
  border: .125rem solid #fff;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all .2s ease;
}

.broker-box-v2-cta:hover {
  background: #fff;
  color: rgba(2, 22, 21, 1);
}

.btn-light {
  color: rgba(3, 70, 69, 1) !important;
}

.black-box {
  background: linear-gradient(0deg, rgba(2, 22, 21, 1), rgba(2, 22, 21, 0));
  height: 6rem;
  margin-top: -4rem;
}

img.analysis-img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.swiper-slide.analysis-card {
  border: 0.1rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to right, rgb(2 44 19), rgba(0, 43, 42, 1)) padding-box, linear-gradient(309deg, rgba(5, 81, 79, 1), rgba(3, 191, 78, 1)) border-box;
  color: #fff !important;
  font-weight: 600;
  padding: 1rem;
  cursor: pointer;
  font-size: .9rem;
  transition: all 0.3s ease;
  width: 100%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  color: rgba(3, 191, 78, 1);
  font-size: 1.5rem !important;
}

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(3, 45, 43, 1);
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 50% !important;
}

.swiper-button-prev {
  top: 1.9rem !important;
  left: auto !important;
  right: 4rem !important;
}

.swiper-button-next {
  top: 1.9rem !important;
  left: auto !important;
  right: 0rem !important;
}

.hero-analysis {
  margin-bottom: -3rem;
}

.our-analysis-slider {
  padding-top: 4.5rem !important;
}

span.analysis-value {
  color: rgba(3, 191, 78, 1);
  font-size: 1.6rem;
  font-weight: 500;
}

span.analysis-status {
  color: rgba(96, 142, 141, 1);
  font-weight: 500;
  font-size: 1.18rem;
}

.analysis-content h4 {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 1);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.analysis-content p {
  color: rgba(120, 154, 153, 1) !important;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: .5rem;
}

span.analysis-date {
  color: rgba(120, 154, 153, 1);
  font-weight: 400;
  font-size: .9rem;
}

.green-outline-btn {
  border: .1rem solid transparent;
  background: linear-gradient(to bottom, rgba(3, 45, 43, 1) 0%, rgba(3, 45, 43, 1)) padding-box, linear-gradient(145deg, rgba(88, 142, 161, 1), rgba(28, 81, 79, 1), rgba(147, 201, 240, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border-radius: 3rem;
  padding: .6rem 2rem;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.gray-outline-btn {
  border: .1rem solid transparent;
  background: linear-gradient(to bottom, rgba(74, 109, 113, 0.7) 0%, rgba(74, 109, 113, 0.7)) padding-box, linear-gradient(145deg, rgba(88, 142, 161, 1), rgba(28, 81, 79, 1), rgba(147, 201, 240, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border-radius: 3rem;
  padding: .6rem 2rem;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  max-width: 20%;
}

.home-resources {
  background-color: rgb(0 255 249 / 10%);
  padding: 2rem;
  border-radius: 1.5rem;
  background-image: url(../../frontend/Images/Resources/r-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-resources .big-p,
.home-resources .mini-p {
  width: 100%;
  font-size: 1.16rem;
  line-height: 1.9rem;
}

.home-resources img.icon-images {
  width: 6rem;
  margin-bottom: -1.9rem;
}

/* .news-card {
  display: flex;
  align-items: center;
  background: #072d2d;
  color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  padding: 1.1rem;
  gap: 1.1rem;
} */

.news-card .news-image {
  flex: 0 0 40%;
}

.news-card .news-image img {
  width: 100%;
  border-radius: 1rem;
  height: 18rem;
  object-fit: cover;
}

.news-card .news-content {
  flex: 1;
}

.news-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.news-card p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 1);
}

.news-card .news-date {
  font-size: 0.8rem;
  color: rgba(120, 154, 153, 1);
}

.myNewsSwiper .swiper-pagination {
  bottom: .5rem !important;
}

.myNewsSwiper .swiper-pagination-bullet {
  width: .9rem;
  height: .4rem;
  border-radius: .4rem;
  background: #4b5563;
  opacity: 1;
  transition: all 0.3s ease;
}

.myNewsSwiper .swiper-pagination-bullet-active {
  width: 2rem;
  background: #fff;
}

.news-card {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 1.4rem;
  overflow: hidden;
  padding: 1.17rem;
  gap: 1.17rem;
  border: 1.08px solid transparent;
  background: linear-gradient(to bottom, rgba(2, 31, 29, 1) 0%, rgba(2, 31, 29, 1) 100%) padding-box, linear-gradient(145deg, rgba(20, 94, 86, 1), rgba(5, 106, 79, 1), rgba(5, 81, 79, 1), rgba(20, 94, 86, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  padding-bottom: 3rem;
}

.news-content h3 {
  font-size: 2rem;
  font-weight: 500;
  line-height: 3rem;
}

.news-main-inner {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 1.4rem;
  overflow: hidden;
  padding: 1.17rem;
  gap: 1.17rem;
  border: 1.08px solid transparent;
  background: linear-gradient(to bottom, rgba(2, 31, 29, 1) 0%, rgba(2, 31, 29, 1) 100%) padding-box, linear-gradient(145deg, rgba(20, 94, 86, 1), rgba(5, 106, 79, 1), rgba(5, 81, 79, 1), rgba(20, 94, 86, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

img.news-img-inner {
  width: 95%;
  border-radius: 1rem;
  height: 8rem;
  object-fit: cover;
}

.news-right-content p {
  color: rgba(120, 154, 153, 1) !important;
  font-size: 1.1rem;
}

.news-right-content span {
  color: rgba(120, 154, 153, 1);
  font-size: 1rem;
}

.news-main {
  height: 78vh;
  overflow-y: scroll;
  position: relative;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #03bf4e transparent;
}

.black-foot {
  position: relative;
  z-index: 111;
  background: linear-gradient(to top, rgb(0, 14, 13) 40%, rgba(2, 22, 21, 0) 100%);
  margin-top: -10rem;
  height: 10rem;
}

.feature-logo {
  width: 4.5rem;
}

.footr-top {
  background-image: url(../../frontend/Images/Main-page/footer-top.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: .1rem solid rgba(76, 162, 110, 1);
  border-bottom: .1rem solid rgba(76, 162, 110, 1);
  position: relative;
  z-index: 99;
}

.our-analysis-slider {
  margin: 0 0rem 0 1rem !important;
}

.mobile-img {
  width: 100%;
}

/* End Home */
/* Resource Detail */
.resources_details {
  padding: 10rem 0 6rem 0 !important;
  width: 95%;
  max-width: 95%;
}

.resources_details_main {
  background-image: url(../../frontend/Images/Resources/r-detail-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -12rem;
  padding: 6rem 0 4rem 0;
}

.resources_details u {
  color: #fff;
}

.resources_details p,
.resources_details ul,
.resources_details ul li,
.resources_details ul li span,
.resources_details ul li strong,
.resources_details ol,
.resources_details h3,
.resources_details td,
.resources_details td strong,
.resources_details p strong,
.resources_details p span {
  font-weight: 300;
  color: #fff !important;
  margin: 0;
  margin-bottom: 1rem;
}

.resources_details h1,
.resources_details h1 strong,
.resources_details p strong {
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
}

/*.resources_details img {
    background-color: white;
}*/

.resources_details ol li {
  color: white;
}

.resources_details a {
  color: #03BF4F;
}

hr.green-line {
  color: rgb(54 144 143 / 39%);
  opacity: 0;
  margin: 2rem 0;
}

.related_Articles {
  color: #fff;
  border-radius: 1.1rem;
  overflow: hidden;
  padding: 1rem;
  border: 1.08px solid transparent;
  background: linear-gradient(to right, rgb(2 94 92) 0%, rgba(4, 45, 43, 1) 100%) padding-box, linear-gradient(170deg, rgba(14, 58, 55, 1), rgba(5, 106, 79, 1), rgba(5, 81, 79, 1), rgba(24, 103, 98, 1)) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.resources_details article {
  border-right: 1px solid rgb(54 144 143 / 39%);
  padding: 0 1.5rem 0 0;
}

.chat-btns-wrapper {
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}

.chat-btns-wrapper::-webkit-scrollbar {
  display: none;
}

.chat-input {
  position: relative;
  background-color: rgba(0, 58, 56, 1);
  border-radius: 1rem;
  padding: 1rem;
}

.send-btn {
  right: .6rem;
  background: #2dd06e;
  border: none;
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  color: #fff;
  cursor: pointer;
}

.send-btn i {
  font-size: 1.1rem;
}

.plus-btn {
  background: transparent;
  border: none;
  color: #fff;
}

.plus-btn .fa-solid.fa-plus {
  font-size: 1.2rem;
  color: rgba(156, 156, 156, 1);
}

.chat-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-result {
  background-color: #404040;
  color: #000000;
  padding: 10px;
  margin-top: 10px;
}

.cursor-auto {
  cursor: auto !important;
}

.cursor-default {
  cursor: default !important;
}

.mobile-img {
  margin-bottom: -7rem;
  margin-top: 3rem;
}

.left-side {
  width: 80.333333% !important;
}

.right-side {
  width: 19.666667% !important;
}

.broker-box .fa-star {
  color: rgba(233, 162, 30, 1);
}

.animate-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

.animate-up.active {
  opacity: 1;
  transform: translateY(0);
}

.text-share,
.text-date,
.text-articles {
  color: #fff;
  font-weight: 600;
}

.content-resources-inner p {
  font-family: 'Montserrat';
}

.animation-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animation-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Resource Detail End */

.centered-container {
  padding-top: 1rem;
}

.news-page-main-container {
  padding-top: 7rem;
}

.container.main_account_page {
  padding-top: 0rem;
}

.fill-container {
  width: 95%;
  max-width: 95%;
}

.image-terms {
  width: 100%;
  background-image: url(../../frontend/Images/Terms/term-condition.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 12rem 0 6rem 0;
  margin: auto;
  margin-top: -7rem;
}

.login-main {
  padding-top: 7rem !important;
  margin-top: -7rem;
}

.login-main a.btn.border-green-btn {
  color: #fff;
  border-radius: 32px;
  padding: 8px 25px;
  cursor: pointer;
  transition: all 0.4s ease;
  border: none;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 45%;
  background: transparent;
  border: 2px solid #03BF4F;
  color: #03BF4F;
}

.login-main a.btn.border-green-btn:hover {
  background-color: #03BF4F;
  color: white;
}

.row.new-resourc-tool-section {
  background-color: #021F1DCC;
  padding: 22px 20px;
  border-radius: 10px;
  border: 1px solid #056A4F;
  margin: 0 30px 50px;
}


.row.new-resourc-tool-section .col-md-5 {
  border-right: 1px solid #056A4F;
}

.row.new-resourc-tool-section .col-md-7 {
  padding-left: 30px;
}

.row.new-resourc-tool-section ul.new-resourc-tool-list {
  padding-left: 0;
}

.row.new-resourc-tool-section ul.new-resourc-tool-list li {
  display: inline-block;
  width: auto;
  margin: 5px 0px;
  padding: 10px 5px;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
}

.row.new-resourc-tool-section ul.new-resourc-tool-list li a {
  border: 1px solid #073A37;
  padding: 10px 13px;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  color: white;
}

.row.new-resourc-tool-section ul.new-resourc-tool-list li a:hover {
  background-color: rgb(3, 191, 79);
  color: white;
}

.row.new-resourc-tool-section h3.new-heading {
  font-size: 22px;
  margin-bottom: 20px;
}

/* Subscription plan pages */
.subscription {
  padding: 13rem 0 1rem 0;
  margin-top: -7rem;
}

/* Card */
.premium-plan {
  background: url('../Images/subscriptions/subscription-plan-bg.svg'), linear-gradient(75deg, #036f2e, #08351a, #052d25);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  border-radius: 1rem;
  padding: 2.5rem;
  border: 0.01rem solid #61F99E;
  box-shadow: 0 0 2.5rem rgba(0, 255, 150, 0.1);
  overflow: hidden;
}

.thin-border {
  border: 1px solid;
  border-image-source: linear-gradient(180deg, #021615 0%, #36908F 21.63%, #36908F 72.6%, #021615 100%);
}

/* Price Badge */
.plan-price-badge {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1.1rem;
  border-radius: 0.8rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(0.4rem);
}

/* Title */
.plan-title {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
}

/* Description */
.plan-description {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.5rem;
}

/* Features */
.plan-features li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1fff8a;
  font-weight: bold;
}

.plan-details-container {
  color: #ffffff;
  padding: 1.5rem 1rem;
  border: 0.01rem solid #61F99E;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  border-radius: 1rem;
}

.plan-details-container .dots {
  flex: 1;
  border-bottom: 0.01rem dotted #bbb;
  margin: 0.6rem 0 0;
}

.plan-details {
  background: url('../Images/subscriptions/subscription-plan-bg.svg'), linear-gradient(75deg, #036f2e, #08351a, #052d25);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 1.5rem;
  border: 0.01rem solid #61F99E;
  box-shadow: 0 0 2.5rem rgba(0, 255, 150, 0.1);
  overflow: hidden;
}

.subscription-main input.form-control:focus {
  background-color: #ffffff !important;
}

#card-element {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
}

#payment-form label {
  color: #ffffff;
}

.StripeElement {
  box-sizing: border-box;
  height: 45px;
  padding: 13px 12px ! IMPORTANT;
  border: 1px solid #ccd0d2;
  border-radius: 4px;
  background-color: transparent;
  border-radius: 10px;
  font-size: 1rem;
}

.StripeElement::placeholder {
  color: white !important;
}

.StripeElement--focus {
  border-color: #6c63ff;
}


/*Checkout page*/

form#payment-form .border.rounded {
  border-color: #05514F !important;
  border-radius: 20px !important;
  background-color: #021E1C;
}

form#payment-form .form-control,
div#card-expiry {
  background-color: transparent !important;
  color: white !important;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 16px;
}

form#payment-form .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

form#payment-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
}
form#payment-form .form-control::placeholder {
  color: white !important;
}

form#payment-form .form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

form#payment-form .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
}

form#payment-form .form-control::placeholder {
  color: white !important;
}

.analysis-main {
  background-image: url("../Images/News/analysis-hero-bg.svg");
  padding: 14rem 0 1rem 0;
  margin-top: -12rem;
}

.analysis-other {
  background-image: url("../Images/News/analysis-bg.svg");
}

.analysis-main,
.analysis-other {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.analysis-main .tabs-main li.nav-item {
  width: 15%;
}

.analysis-main .tabs-main .nav-pills .nav-link {
  border: 1px solid rgba(26, 141, 138, 1);
  background: rgba(14, 50, 49, 0.5);
  color: #fff;
}

.analysis-main .tabs-main .nav-pills .nav-link.active {
  background: #00c853;
  color: #fff;
  border: 1px solid #00c853;
}

.news-card.analysis-card {
  border: 0.1rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to bottom, rgb(2 44 19), rgba(0, 43, 42, 1)) padding-box, linear-gradient(309deg, rgba(5, 81, 79, 1), rgba(3, 191, 78, 1)) border-box;
  color: #fff !important;
  padding-bottom: 1.17rem;
}

.news-card.analysis-card .news-image img {
  height: 23rem;
}

.news-full {
  border: 0.1rem solid transparent !important;
  border-radius: 1rem !important;
  background: linear-gradient(to right, rgb(1 47 46), rgb(1 18 17)) padding-box, linear-gradient(309deg, rgba(14, 58, 55, 1), rgba(24, 103, 98, 1)) border-box !important;
  color: #fff !important;
  padding: 1rem;
}

.HeadNavOuter .column a.Tier2:hover {
  border-radius: 0 !important;
}

.share-to-top {
  display: none;
}

.share-to {
  display: block;
}

.dropmenu {
  display: none;
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 0;
  z-index: 999;
}

#dropbutton:hover+#dropmenu,
#dropmenu:hover {
  display: block;
}

/*#dropbutton::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1rem;
  background: transparent;
}*/

.menu-top::before {
  background-color: transparent;
  display: block;
  height: 3rem;
  z-index: 111111111111111111111;
  position: absolute;
  content: '';
  top: -2rem;
  width: 100%;
}

#Calculator input,
#Calculator select {
  margin-bottom: 20px;
  padding: 13px 10px;
  background-color: #dedede !important;
  border-radius: 10px;
  border: none;
}

#CalculatorFrame #Calculator .SubmitButtonAdd {
  background-color: #03bf4e !important;
}

.dropdown-toggle.show .menu-btn span i {
  transform: rotate(180deg);
}

.menu-btn .arrow {
  display: inline-block;
  transition: transform 0.4s ease;
}

.dropdown-toggle.open .arrow {
  transform: rotate(180deg);
}

.our-analysis-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.swiper-slide {
  height: auto !important;
}

.analysis-card {
  display: flex;
  flex-direction: column;
}

.analysis-img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.analysis-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.analysis-content p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.6em;
}

.analysis-date {
  margin-top: auto;
}

.side-resources {
  width: 15%;
  padding: 0 2rem;
}

.resources-main {
  padding: 1rem;
  border: 0.11rem solid transparent !important;
  border-radius: 1rem !important;
}

.resources-main:hover {
  border: 0.11rem solid transparent !important;
  background: linear-gradient(to right, #022927, #012321) padding-box, linear-gradient(309deg, #0E3A37, #186762) border-box !important;
  color: #fff !important;
}

.resources-title p {
  color: #789A99 !important;
  font-weight: 200;
  font-size: 1rem;
}

.resources-img {
  width: 100%;
  max-width: 22rem;
  height: 6rem;
  border-radius: 0.7rem;
  object-fit: cover;
}

img.svg-tools {
  width: 2.4rem;
}

.res-main,
.BrokerMenuBlock {
  background: linear-gradient(135deg, rgba(2, 94, 92, 0.10),
      /* #025E5C at 10% */
      #042D2B);
  backdrop-filter: blur(58.8px);
  -webkit-backdrop-filter: blur(58.8px);
  border: 2.1px solid transparent;
  background-clip: padding-box;
  position: relative;
  border-radius: .8rem;
  padding: .5rem .8rem;
  margin-bottom: 0.5rem;
}

.res-main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.1px;
  background: linear-gradient(135deg,
      #0E3A37,
      #186762);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.BrokerMenuBlock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2.1px;
  background: linear-gradient(136deg, #0E3A37, #032926);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Capital.com "Platinum" card in the header Brokers mega menu -- same
   metallic-silver gradient used for its border on /brokers and in the
   Minipip Company dropdown, just overriding this card's existing
   masked-border gradient color instead of the accent teal. */
.BrokerMenuBlock.platinum-trim::before {
  background: linear-gradient(135deg, #f2f2f2 0%, #ffffff 22%, #a8adb2 50%, #ffffff 78%, #d4d7da 100%);
}

/* Same "Platinum Partner" ribbon as /brokers and the Minipip Company
   dropdown, sized down for this smaller card. .BrokerMenuBlock already
   has position: relative for the ::before border above. */
.BrokerMenuBlock.platinum-trim .platinum-partner-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 6px 14px 6px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #e8ecee 35%, #b8c0c4 65%, #f7f8f9 100%);
  color: #173b36;
  border-radius: 4px 15px 4px 15px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  border-left: 3px solid #03bf4e;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: 2;
}


.tools-mega-menu {
  padding: 2rem 2.5rem !important;
}

.brokers-custom.tools-mega-menu {
  padding: 1rem 2.5rem !important;
}

.compare-broker-btn {
  background-color: #003A38;
  color: #fff;
  padding: .5rem 2rem;
  border-radius: 2rem;
  margin-right: .8rem;
  font-size: 1rem;
}

.row.rating-row {
  margin-left: .1rem;
}

/* "Rating: [5 stars] 4.6" plus the label routinely runs a few px wider
   than its 50%-width column at the default 16px icon size -- harmless
   when it quietly wraps, but visually breaks (overlapping the next
   column) if anything upstream forces it onto one line. Shrinking just
   the star icons a little closes that gap without changing the number/
   label text size. Measured against every current broker card's actual
   content width before picking 14px. */
.BrokerMenuBlock .row.rating-row .fa-star {
  font-size: 14px;
}

.broker-card {
  position: relative;
  max-width: 52rem;
  padding: 1rem;
  border-radius: 1.2rem;
  backdrop-filter: blur(3.7rem);
  -webkit-backdrop-filter: blur(3.7rem);
  background: linear-gradient(135deg, #3a1c1a, #020b0b);
  overflow: hidden;
}

/* Header Brokers mega menu only (#dropmenu2): the featured card is now
   stretched/sized to match the height of the broker grid on the right (see
   responsive.css for the <=1250px case), but its own content is much
   shorter than that box -- without this it just sits at the top, leaving a
   large empty gap below. Turn the card into a centering flex column so its
   content sits in the middle of whatever height it ends up being instead. */
#dropmenu2 .broker-card.ig {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Featured broker card content -- logo/title row, tradable assets line,
   then a 2x2 grid of icon stat-cards (Rating, FCA, Min.Deposit, Max
   Leverage) instead of the plain two-column text list this replaced. */
.broker-card-featured-inner {
  width: 100%;
}

/* Bigger logo for the featured card specifically -- it's the only broker
   on the page getting this much space, so a larger, bolder logo suits it
   better than the compact 50px one used for the regular grid cards. */
#dropmenu2 .broker-card.ig .MenuIntroImage {
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
  background-size: 2.6rem;
}

.broker-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 2rem;
}

.broker-stat-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.7rem;
  padding: 0.9rem 0.8rem;
}

.broker-stat-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
}

.broker-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.broker-stat-label {
  font-size: 0.78rem;
  color: #b8b8b8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.broker-stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.broker-stat-value .fa-star {
  font-size: 0.75rem;
  margin-right: 1px;
}

.broker-card .border {
  position: absolute;
  inset: 0;
  padding: 0.1rem;
  border-radius: inherit;
  background: linear-gradient(135deg, #d83a2f, #7a1e18);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-color: transparent !important;
}

.brokers-custom .cmc-card {
  position: relative;
  max-width: 100%;
  padding: 1.5rem;
  border-radius: 1.2rem;
  backdrop-filter: blur(3.7rem);
  -webkit-backdrop-filter: blur(3.7rem);
  background: linear-gradient(135deg, #065365, #0C1D1F);
  overflow: hidden;
}

.cmc-middle-col .row.ps-2 {
  width: 80% ! IMPORTANT;
}

.cmc-middle-col .row.ps-2 .col-md-6 {
  max-width: 25%;
}

.cmc-middle-col {
  width: 100%;
}

.cmc-card .border {
  position: absolute;
  inset: 0;
  padding: 0.1rem;
  border-radius: inherit;
  background: linear-gradient(135deg, #60D2F2, #1C514F);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  border-color: transparent !important;
}

.logo-lg-new {
  width: 9.5rem;
  height: 4.5rem;
  background: #d83a2f;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
}

.badge-ig {
  margin-left: auto;
  padding: 0.3rem 1.2rem;
  background: #fff;
  color: #000;
  border-radius: .6rem;
  font-size: 0.8rem;
  font-weight: 500;
  position: absolute;
  right: 0.8rem;
  top: .8rem;
}

/* Header brokers mega menu: the single left-hand featured broker (IG) now
   carries both the "Featured" and "Academy Sponsor" labels (previously the
   second one belonged to XTB's own card, which has moved into the regular
   brokers grid on the right) -- shown side by side on one line (rather than
   stacked) so they don't eat into the card's left-side content space. */
.badge-ig-stack {
  position: absolute;
  right: 0.8rem;
  top: .8rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.badge-ig-stack .badge-ig {
  position: static;
  margin-left: 0;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.brokers-custom .assets {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.stars {
  color: #f5c451;
  letter-spacing: 0.15rem;
}

.check {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  font-size: 1rem;
}

.academy-resource-main .res-main {
  border: 0 !IMPORTANT;
  padding: 1rem 1.3rem;
  background-color: #022725;
}

.academy-resource-main .res-main::before {
  padding: 0;
}

.border-left-academy {
  border-left: 1px solid #00413d
}

.academymenu {
  padding: 0rem 1.8rem !important;
}

.broker-inner p.assets {
  min-height: calc(1.1em * 2);
}

.left-box-academy {
  background: linear-gradient(135deg, #004B1E, #002B2A);
  border-radius: 1.25rem;
  position: relative;
}

.right-box-academy {
  background: linear-gradient(135deg, rgb(0, 43, 42), rgb(0, 75, 30));
  border-radius: 1.25rem;
  padding: 1.5rem;
  height: 100%;
  position: relative;
}

.text-green {
  color: #03BF4E;
}

.signup-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 13rem;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  background-color: #03827e3d;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 65%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 65%,
      rgba(0, 0, 0, 0) 100%);
}

.btn-academy-green {
  background-color: #03BF4E !important;
  border-radius: 3rem !important;
  font-size: 1rem;
  color: #fff !important;
  padding: .6rem 5rem !important;
}

.inner-academy {
  z-index: 1111;
  position: relative;
}

img.login-img {
  position: absolute;
  bottom: 0;
  right: 0;
}

/*New Filter UI*/

.article-main-filter select.form-select,
.article-main-filter input.form-control {
  border: 1px solid rgba(26, 141, 138, 1) ! IMPORTANT;
  background: rgba(14, 50, 49, 0.5);
  color: #fff !important;
  /* This field's own background is always dark (above), regardless of the
     site's light/dark theme toggle, but this was set to "light" -- telling
     Safari/iOS to render native control chrome (the date input's text and
     calendar icon) in colors meant for a LIGHT field. That's what made the
     date value render in black against this dark background: effectively
     invisible, with only the border still showing. */
  color-scheme: dark;
  border-radius: 3.125rem !important;
}

.article-main-filter select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 32px;
}

.article-main-filter input.form-control::placeholder {
  color: #fff !important;
}

.article-main-filter input[type="date"] {
  color: #fff !important;
  background-color: transparent !important;
  border: 1px solid #fff;
  -webkit-appearance: none;
  appearance: none;
}

.article-main-filter button.btn.btn-success {
  border-radius: 3.125rem;
  background: linear-gradient(90deg, #29d26f, #14a44d);
  border: none;
  color: #fff;
  font-weight: 600;
}

.article-main-filter a.btn.btn-secondary {
  border-radius: 3.125rem;
  border: none;
  color: #fff;
  font-weight: 600;
}

.article-main-filter input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/*Policies Pages*/

section.new-policies-pags {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 16rem 0 3rem 0;
  margin: auto;
  margin-top: -10rem;
  background-color: #042625;
  text-align: left;
}


section.new-policies-pags .content-new-policy-page h1 {
  color: white ! IMPORTANT;
  font-weight: 600;
  text-align: left;
}

.new-policies-content {
  padding: 50px 10px;
}

.new-policies-content h3.new-policy-page-heading {
  color: white;
  font-weight: 600;
  padding-top: 10px;
  padding-bottom: 30px;
}

.new-policies-content h3.new-policy-page-heading:after {
  content: "";
  display: block;
  height: 3px;
  width: 100px;
  background-color: #03BF4E;
  position: relative;
  top: 15px;
}

.new-policies-content li {
  color: white;
}

.resource-detail-inner table {
  width: 100%;
}

.footer-disclaimer a {
  color: #fff ! IMPORTANT;
}

#HeadSearch .HeadFieldButton {
  color: #fff;
}

#HeadSearch .HeadFieldButton:-webkit-autofill,
#HeadSearch .HeadFieldButton:-webkit-autofill:hover,
#HeadSearch .HeadFieldButton:-webkit-autofill:focus,
#HeadSearch .HeadFieldButton:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

#HeadSearch .HeadFieldButton:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  box-shadow: 0 0 0px 1000px transparent inset !important;
}

.search-main {
  width: 100%;
  background-image: url(../../frontend/Images/News/banner-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rem 0 12rem 0;
  margin-top: -12rem;
}

.search.page-1 .news-page-main-container {
  padding-top: 2rem;
}



section.academy-main {
  margin-top: -7rem;
}

.academy-hero {
  background: url('../Images/new-academy/main-bg.jpg') center/cover no-repeat;
  border-radius: 0;
  padding: 9rem 4rem 4rem 4rem;
}

.academy-subtitle {
  font-size: 1.3rem;
  color: #17d86a;
  font-weight: 400;
}

.academy-title {
  font-size: 4.8rem;
  line-height: 1.2;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(19, 164, 77, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.academy-title span {
  color: #17d86a;
}

.academy-desc {
  font-size: 2.3rem;
  line-height: 1.5;
  color: #d9d9d9;
  background: linear-gradient(90deg, rgba(172, 212, 211, 1) 0%, rgba(78, 184, 122, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 92%;
  font-family: "Montserrat", sans-serif;
}



/* .academy-info-card{
    padding: 1.4rem;
    border:0.1rem solid #17d86a;
    border-radius:1.6rem;
    background:rgba(0,0,0,0.2);
    height:100%;
    display: flex;
} */
.academy-info-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  padding: 1.4rem;
  border-radius: 1.6rem;
  background: linear-gradient(135deg,
      rgba(3, 191, 78, 0.2) 0%,
      rgba(2, 32, 31, 0) 50%,
      rgba(3, 191, 78, 0.2) 100%);
  overflow: hidden;
  justify-content: end;
  background: linear-gradient(135deg, rgb(6, 83, 101), rgb(12, 29, 31));
  position: absolute;
  top: 3rem;
}

.academy-info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.12rem;
  border-radius: 1.8rem;
  background: linear-gradient(135deg, #49A8BD 0%, rgba(15, 71, 69, 1) 35%, rgba(15, 71, 69, 1) 70%, #49A8BD 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.capital-logo {
  width: 9.5rem;
  flex-shrink: 0;
}

.academy-info-card h6 {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 600;
}

.academy-info-card p {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #d4d4d4;
}

.academy-hero .capital-logo {
  width: 5rem;
  margin-bottom: 10px !important;
  border-radius: 10px;
}

.academy-topic-card {
  background: #fff;
  border-radius: 1.6rem;
  padding: 1rem 1.3rem;
}

.academy-topic-card h3 {
  font-size: 3.8rem;
  color: #082f2c !important;
  font-weight: 600;
}

.academy-topic-card p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #222 !important;
}

.academy-icon {
  width: 4.8rem;
}

.academy-main-img {
  border-radius: 2rem;
}

.signed-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.1rem;
  padding: 1.8rem 2.4rem;
  background: linear-gradient(135deg, rgba(3, 191, 78, 0.2) 0%, rgba(2, 32, 31, 0) 50%, rgba(3, 191, 78, 0.2) 100%);
  border-radius: 1.4rem;
  overflow: hidden;
  backdrop-filter: blur(.4rem);
  -webkit-backdrop-filter: blur(1.9rem);
}

.signed-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.1rem;
  border-radius: 1.4rem;
  background: linear-gradient(135deg, rgba(4, 137, 78, 1) 0%, rgba(15, 71, 69, 1) 35%, rgba(15, 71, 69, 1) 70%, rgba(3, 191, 78, 1) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.signed-card p {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0;
}

.signed-users {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.signed-up-img {
  width: 9rem;
}

.academy-card-row {
  margin-top: 3rem;
}

.academy-small-card {
  padding: 1.8rem 1.8rem 2.4rem 1.8rem;
  border-radius: 2rem;
  background-size: cover;
  background-position: center;
  height: 100%;
}

.course-card {
  background-image: url('../Images/new-academy/new-bg-mobile.png');
}

.free-account-card {
  background-image: url('../Images/new-academy/new-bg-rocket.png');
}

.mentor-card {
  background-image: url('../Images/new-academy/new-bg-session1.png');
  background-color: #ecf9e4;
}

.academy-small-card span {
    color: #0ea855;
    font-size: 1rem;
    font-weight: 500;
    display: block;
    margin-bottom: .4rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.academy-small-card h4 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 1rem;
  font-weight: 600;
  color: #082f2c;
}

.academy-small-card.mentor-card h4 {
  margin-bottom: 2rem;
}

.academy-small-card p {
  color: #2b2b2b;
  max-width: 70%;
}

.dark-card h4,
.dark-card p {
  color: #fff;
}

a.academy-btnnew {
  background-color: rgba(8, 57, 57, 1);
  padding: 0.7rem 2rem;
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  width: max-content;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.1rem;
  height: auto;
  max-width: min-content;
}

.white-btn {
  background: #fff;
  color: #000;
}

.solution-img {
  border-radius: 2rem;
}

.solution-title {
  color: #082f2c;
  font-weight: 600;
}

.solution-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

.solution-section {
  padding: 4rem 0 5rem 0;
}

.solution-section .row {
  align-items: stretch !important;
}

.solution-section .col-lg-5 {
  display: flex;
}

.solution-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2rem;
}

.broker-section {
  padding: 0 4rem 4rem 4rem;
}

.broker-box {
  background: #dff2d2;
  border-radius: 1.7rem !important;
  padding: 2.5rem;
  background: url('../Images/new-academy/brokers-bg-light.jpg') center/cover no-repeat;
}

.broker-title {
  font-size: 2.1rem;
  color: #082f2c !important;
  font-weight: 600;
}

.broker-icon {
  height: 2rem;
}

.join-section {
  background: url('../Images/new-academy/what-you-get.jpg') center/cover no-repeat;
  border-radius: 1.8rem;
  padding: 5rem 4rem;
  margin: 0;
  margin-top: 4rem;
}

.join-title {
  font-size: 2.1rem;
  color: #fff;
  font-weight: 700;
}

.join-card {
  background: rgba(2, 31, 29, 0.49);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  padding: 1.8rem;
}

.join-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.1rem;
  border-radius: 2rem;
  background: linear-gradient(135deg,
      rgba(20, 94, 86, 1) 0%,
      rgba(5, 106, 79, 1) 35%,
      rgba(5, 81, 79, 1) 70%,
      rgba(20, 94, 86, 1) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.join-icon {
  width: 2.4rem;
  margin-bottom: 1.5rem;
}

.join-card h5 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: .7rem;
}

.join-card p {
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

.second-sec {
  padding: 4rem;
}

a.white-academy-btn {
  color: #000;
  background-color: #fff;
  padding: .5rem 1.5rem;
  border-radius: 3rem;
}

a.academy-green-btn {
  background-color: rgba(3, 191, 78, 1);
  padding: .7rem 1.6rem;
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  display: block;
  width: max-content;
  margin-top: 15px;
  font-weight: 400;
  font-size: 16px !important;
}

.broker-item {
  padding: .5rem 1rem .5rem 0.6rem;
  border-radius: 3.75rem;
  position: relative;
  backdrop-filter: blur(1.375rem);
  -webkit-backdrop-filter: blur(1.375rem);
  transition: all 0.3s ease;
  background: linear-gradient(135deg,
      rgba(189, 217, 221, 1) 0%,
      rgba(181, 227, 182, 1) 50%,
      rgba(189, 217, 221, 1) 100%);
  border: 0.0625rem solid transparent;
  background-clip: padding-box;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.broker-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3.75rem;
  padding: 0.0625rem;
  background: linear-gradient(135deg,
      rgba(172, 218, 214, 1),
      rgba(82, 167, 164, 1),
      rgba(172, 218, 214, 1));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.broker-icon {
  height: 2.375rem;
  object-fit: contain;
  border-radius: 100px;
}

.broker-item.text-center.highlited-xtb-broker .broker-icon {
    border-radius: 10px;
    height: 3.375rem;
}

.broker-item p {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.625rem;
  color: rgba(8, 57, 57, 1) !important;
}

.broker-item:hover {
  transform: translateY(-0.3125rem);
  box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.08);
}

.capital-newacademy img {
    height: auto;
    border-radius: 20px;
}

.academy-small-card:not(.dark-card) h4 {
  color: #082f2c !important;
}

.academy-small-card:not(.dark-card) p {
  color: #2b2b2b !important;
}

.dark-card h4,
.dark-card p {
  color: #fff !important;
}


.academy-hero .row {
  display: flex;
  align-items: stretch !important;
}

.academy-hero .col-lg-5>div {
  height: 100%;
  width: 100%;
}

.academy-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.custom-badge {
    color: #212529;
    position: absolute;
}

.academy-hero .col-lg-5 {
    padding-left: 135px !important;
}

.broker-item.text-center.highlited-xtb-broker {
    width: 80%;
    border-radius: 15px;
    margin: 0 auto;
}

.broker-item.text-center.highlited-xtb-broker .content-block {
    width: 90%;
    padding-left: 20px;
}

.broker-item.text-center.highlited-xtb-broker .p-0.fs-6.text-white {
    font-size: 1rem;
    color: #082f2c !important;
    font-weight: 400;
}

.broker-item.text-center.highlited-xtb-broker p {
    text-align: left;
}

.broker-item.text-center.highlited-xtb-broker p.text {
    font-size: 13px !important;
}

.broker-item.text-center.highlited-xtb-broker::before {
    content: "";
    border-radius: 15px;
}

.broker-item.text-center.highlited-xtb-broker p.m-0.title {
    font-size: 17px;
    font-weight: 600;
    padding-top: 5px;
}

.broker-item.text-center.highlited-xtb-broker .row.ps-3 p, .broker-item.text-center.highlited-xtb-broker .row.ps-3 p b {
    font-size: 13px !important;
}


/* =========================
   Snippets Page Layout
========================= */

body.snippets {
    background: #001f1a !important;
}

.snippet-design-page {
    min-height: calc(100vh - 170px);
    height: calc(100vh - 170px);
    color: #ffffff;
    font-family: Poppins, Arial, sans-serif;
    padding: 40px 0 40px;
    box-sizing: border-box;
    overflow: hidden;
}

.snippet-shell {
    width: calc(100% - 80px);
    max-width: 1500px;
    height: 100%;
    margin: 0 auto;
}

/* Main 3-column layout */
.snippet-main-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 42px;
    width: 90%;
    height: 105%;
    margin: 0 auto;
    overflow: hidden;
}

/* Sidebars */
.snippet-rail {
    position: relative;
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.snippet-rail::-webkit-scrollbar {
    width: 4px;
}

.snippet-rail::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
}

/* Main feed */
.snippet-feed-column {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.snippet-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 5px 0 25px;
}


.snippet-feed-list {
    height: calc(100% - 82px);
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.snippet-feed-list::-webkit-scrollbar {
    width: 4px;
}

.snippet-feed-list::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
}


/* .snippet-rail {
    display: flex;
    flex-direction: column;
    gap: 24px;
} */

.snippet-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 4px 0 21px;
}

.snippet-feed-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.snippet-feed-list {
    height: calc(100% - 76px);
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.snippet-feed-list::-webkit-scrollbar {
    width: 4px;
}

.snippet-feed-list::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
}

.snippet-feed-header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 10px;
}

.snippet-avatar {
    width: 48px;
    height: 48px;
}

.snippet-name {
    font-size: 15px;
}

.snippet-role {
    font-size: 11px;
}

.snippet-time {
    font-size: 11px;
}

.snippet-feed-body {
    padding: 0 20px 14px 82px;
    font-size: 13px;
    line-height: 1.5;
}

.snippet-feed-image {
    width: 100%;
    aspect-ratio: 1.78 / 1;
    object-fit: cover;
}

.snippet-feed-footer {
    height: 48px;
    padding: 0 20px;
    gap: 28px;
    font-size: 12px;
}

.snippet-main-head h1 {
    margin: 0;
    color: #03ff73;
    font-size: 46px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.snippet-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 145px;
    height: 34px;
    padding: 0 17px;
    border: 1px solid #03BF4E;
    border-radius: 999px;
    background: transparent;
    color: #03ff73;
    font-size: 13px;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}

.snippet-create-btn:hover {
    background: #03BF4E;
    color: #ffffff;
}

.snippet-card {
    overflow: hidden;
    background: #002d25;
    border: 1px solid rgba(3, 191, 78, .32);
    border-radius: 13px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}

.snippet-broker-card {
    position: relative;
    background:
        linear-gradient(145deg, rgba(180, 30, 22, .76), transparent 42%),
        linear-gradient(145deg, #421917, #111713 64%, #0b120f);
}

.snippet-broker-card {
    min-height: 300px;
    padding: 22px 16px 18px;
}

.snippet-support-card {
    min-height: 260px;
}

.snippet-academy-card {
    min-height: 300px;
    padding: 26px 24px 22px;
}

/* .snippet-capital-card {
    min-height: 205px;
} */

.snippet-badge {
    position: absolute;
    top: 15px;
    right: 14px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffffff;
    color: #001f1a;
    font-size: 11px;
    font-weight: 600;
}

.snippet-ig-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 34px;
}

.snippet-side-copy {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 12px;
}

.snippet-side-copy strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 2px;
}

.snippet-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    margin-bottom: 7px;
}

.snippet-rating .fa-star {
    color: #f9b233;
    font-size: 13px;
}

.snippet-rating .fa-check-circle-o {
    color: #ffffff;
    font-size: 14px;
}

.snippet-outline-btn,
.snippet-green-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 35px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
}

.snippet-outline-btn {
    border: 1px solid #ffffff;
    color: #ffffff;
    margin-top: 5px;
}

.snippet-green-btn {
    background: #03BF4E;
    color: #ffffff;
}

.snippet-support-card {
    padding: 0;
    background-image: url(../../frontend/Images/sopport-img-side.jpg);
    width: 100%;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 1em 1em 1em;
    color: white;
    min-height: 23rem;
    align-content: end;
}

.snippet-support-card img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.snippet-support-body {
    padding: 17px 18px 0px;
    text-align: center;
}

.snippet-support-body h3,
.snippet-academy-card h3 {
    margin: 0 0 13px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
}

.snippet-support-body p,
.snippet-academy-card p,
.snippet-capital-card p {
    margin: 0 0 17px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.55;
}

.snippet-support-body p strong,
.snippet-academy-card strong {
    color: #ffffff;
}

.snippet-academy-card {
    min-height: 300px;
    padding: 26px 24px 22px;
    text-align: center;
    background: #006a3d;
}

.snippet-academy-card img {
    width: 112px;
    height: auto;
    margin: 0 auto 23px;
    display: block;
}

.snippet-academy-card h3 {
    font-size: 21px;
    margin-bottom: 18px;
}

.snippet-capital-card {
    position: relative;
    min-height: 275px;
    padding: 18px 16px 16px;
    background:
        linear-gradient(135deg, rgba(0, 51, 43, .9), rgba(86, 55, 27, .8)),
        #29251a;
}

.snippet-capital-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.snippet-capital-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;
    background: #ffffff;
    padding: 4px;
}

.snippet-capital-card h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.snippet-feed-card {
    overflow: hidden;
    background: #002d25;
    border: 1px solid rgba(3, 191, 78, .35);
    border-radius: 13px;
    margin-bottom: 22px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

.snippet-feed-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 18px 18px 9px;
}

.snippet-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .18);
}

.snippet-name {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.snippet-role {
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    line-height: 1.2;
}

.snippet-time {
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    white-space: nowrap;
}

.snippet-feed-body {
    padding: 0 18px 12px 75px;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
}

.snippet-feed-body p {
    margin: 0 0 4px;
}

.snippet-feed-body a,
.snippet-feed-body .snippet-tag {
    color: #00aaff;
    text-decoration: none !important;
}

.snippet-feed-image {
    display: block;
    width: 100%;
    aspect-ratio: 1.96 / 1;
    object-fit: cover;
    background: #001f1a;
}

.snippet-feed-footer {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 45px;
    padding: 0 18px;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
}

.snippet-feed-footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.snippet-like-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: icon;
    cursor: pointer;
}

.snippet-like-button:hover {
    color: #03ff73;
}

.snippet-feed-footer .liked {
    color: #ff3232;
}

.snippet-feed-footer .snippet-like-button.liked:hover {
    color: #ff3232;
}

.snippet-empty-card {
    padding: 34px 22px;
    text-align: center;
    background: #002d25;
    border: 1px solid rgba(3, 191, 78, .35);
    border-radius: 13px;
    color: rgba(255, 255, 255, .85);
}

.snippet-pagination .pagination {
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.snippet-pagination .page-link {
    background: #002d25;
    border-color: rgba(3, 191, 78, .45);
    color: #ffffff;
}

.snippet-pagination .active .page-link,
.snippet-pagination .page-link:hover {
    background: #03BF4E;
    border-color: #03BF4E;
    color: #ffffff;
}

.snippet-comment-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: icon;
    cursor: pointer;
}

.snippet-comment-trigger:hover {
    color: #03ff73;
}

.snippet-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(3px);
}

.snippet-modal-backdrop.is-open {
    display: flex;
}

.snippet-modal {
    position: relative;
    width: min(540px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    background: #002d25;
    border: 1px solid rgba(3, 191, 78, .45);
    border-radius: 13px;
    color: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.snippet-modal.wide {
    width: min(660px, 100%);
}

.snippet-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
}

.snippet-modal-close:hover {
    background: #03BF4E;
    color: #ffffff;
}

.snippet-modal-title {
    margin: 0;
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(3, 191, 78, .25);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.my-snippet-delete-body {
    padding: 20px 24px;
}

.my-snippet-delete-body p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    line-height: 1.6;
}

.my-snippet-delete-actions {
    padding: 0 24px 24px;
}

.snippet-modal-author {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 18px 24px;
}

.snippet-modal-author img,
.snippet-modal-comment img,
.snippet-comment-compose img,
.snippet-create-author img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .18);
}

.snippet-modal-author strong,
.snippet-create-author strong {
    display: block;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
}

.snippet-modal-author span {
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    white-space: nowrap;
}

.snippet-modal-author small,
.snippet-create-author small {
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
}

.snippet-comments-panel {
    padding: 0 24px 20px;
}

.snippet-comments-panel h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

.snippet-comments-list {
    max-height: 300px;
    min-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}

.snippet-comments-list::-webkit-scrollbar {
    width: 4px;
}

.snippet-comments-list::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
}

.snippet-modal-comment {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 11px;
    margin-bottom: 18px;
}

.snippet-modal-comment img {
    width: 38px;
    height: 38px;
}

.snippet-modal-comment strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.2;
}

.snippet-modal-comment p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    line-height: 1.45;
}

.snippet-modal-comment span {
    color: rgba(255, 255, 255, .45);
    font-size: 9px;
    white-space: nowrap;
}

.snippet-comment-compose {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 24px 14px;
    border-top: 1px solid rgba(3, 191, 78, .25);
}

.snippet-comment-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 10px 9px 16px;
    background: rgba(0, 66, 56, .9);
    border: 1px solid rgba(3, 191, 78, .2);
    border-radius: 11px;
}

.snippet-comment-box input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 12px;
}

.snippet-comment-box input::placeholder {
    color: rgba(255, 255, 255, .48);
}

.snippet-comment-box button,
.snippet-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.snippet-comment-box button {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #03BF4E;
    color: #ffffff;
    flex: 0 0 31px;
}

.snippet-create-body {
    padding: 24px;
}

.snippet-create-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.snippet-create-textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    padding: 17px;
    border: 1px solid rgba(3, 191, 78, .25);
    border-radius: 11px;
    outline: 0;
    background: rgba(0, 66, 56, .9);
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
}

.snippet-create-textarea::placeholder {
    color: rgba(255, 255, 255, .48);
}

.snippet-create-limit {
    display: block;
    margin: 8px 0 22px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
}

.snippet-create-limit span {
  font-size: 11px;
}

.snippet-upload-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    border: 1px dashed rgba(3, 191, 78, .4);
    border-radius: 11px;
    background: rgba(0, 66, 56, .82);
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    margin-bottom: 24px;
}

.snippet-upload-box input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.snippet-upload-box i {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .66);
    font-size: 18px;
}

.snippet-post-button {
    width: 100%;
    min-height: 47px;
    border: 0;
    border-radius: 999px;
    background: rgba(3, 191, 78, .2);
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 800;
}

.snippet-post-button.is-ready,
.snippet-post-button:hover {
    background: #03BF4E;
    color: #ffffff;
}

.mobile-load-more-btn {
    display: none;
    width: 100%;
    margin-top: 15px;
}

/* MY snippets */

 .my-snippets-panel {
    margin-top: 28px;
  }

  .my-snippets-head {
    margin-bottom: 18px;
  }

  .my-snippets-head h1 {
    color: #ffffff;
    font-size: 28px;
  }

  .my-snippets-list {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }

  .my-snippet-card .snippet-feed-image {
    max-height: 320px;
  }

  .my-snippet-edit-btn {
    margin-left: auto;
  }

  .my-snippet-edit-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .my-snippet-edit-actions button {
    min-height: 43px;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
  }

  .my-snippet-cancel {
    background: rgba(255, 255, 255, .12);
  }

  .my-snippet-save {
    background: #03BF4E;
  }

  .my-snippet-delete-confirm {
    background: #e5484d;
  }

  .my-snippet-delete-confirm:hover {
    background: #c93a3e;
  }

  .my-snippet-preview {
    position: relative;
    display: none;
    overflow: hidden;
    margin: 18px 0;
    border-radius: 11px;
    border: 1px solid rgba(3, 191, 78, .25);
    background: rgba(0, 66, 56, .9);
  }

  .my-snippet-preview.is-visible {
    display: block;
  }

  .my-snippet-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
  }

  .my-snippet-remove-image {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #26322f;
    cursor: pointer;
  }

  .my-snippets-list {
    height: calc(100vh - 260px);
    min-height: 650px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Modal backdrop */

.my-snippet-account-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;

    padding: 20px;

    overflow-y: auto;
}


.my-snippet-account-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-snippet-edit-modal {
    width: min(700px, 100%);

    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.my-snippet-edit-modal .snippet-create-body {
    min-height: 0;

    overflow-y: auto;

    padding-right: 8px;
}

.my-snippet-edit-modal .snippet-create-body::-webkit-scrollbar {
    width: 6px;
}

.my-snippet-edit-modal .snippet-create-body::-webkit-scrollbar-track {
    background: rgba(0, 70, 55, 0.35);
    border-radius: 10px;
}

.my-snippet-edit-modal .snippet-create-body::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        #00d084,
        #03bf4e
    );
    border-radius: 10px;
}

.my-snippet-edit-modal .snippet-create-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #03bf4e,
        #00e676
    );
}


    #snippetLoadTrigger {
    height: 1px;
}

.snippet-loading {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 18px 0;
}

.snippet-loading.is-visible {
    display: flex;
}

.snippet-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00d084;
    animation: snippetLoadingDot 1.4s infinite ease-in-out both;
}

.snippet-loading span:nth-child(1) {
    animation-delay: -0.32s;
}

.snippet-loading span:nth-child(2) {
    animation-delay: -0.16s;
}

.snippet-feed-image{
    cursor:pointer;
}

.snippet-image-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    opacity:0;
    visibility:hidden;
    transition:.25s;
}

.snippet-image-modal.is-open{
    opacity:1;
    visibility:visible;
}

.snippet-image-modal img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
}

.snippet-image-close{
    position:absolute;
    top:20px;
    right:25px;
    border:none;
    background:none;
    color:#fff;
    font-size:40px;
    cursor:pointer;
    line-height:1;
}

@keyframes snippetLoadingDot {
    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.snippet-login-link {
    display: inline-block;
    margin-top: 5px;
    color: #03bf4e;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: .2s ease;
}

.snippet-login-link:hover {
    text-decoration: underline;
}

.snippet-login-modal {
    width: min(480px, 100%);
    padding: 30px;
    text-align: center;
    background: linear-gradient(135deg, #013532, #042625);
    border: 1px solid rgba(3, 191, 78, .35);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.snippet-login-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(180deg, #03BF4E, #02a543);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(3, 191, 78, .35);
}

.snippet-login-icon i {
    color: #ffffff;
    font-size: 38px;
}

.snippet-login-title {
    margin: 0 0 14px;
    color: #03BF4E;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.snippet-login-description {
    max-width: 480px;
    margin: 0 auto 26px;
    color: #e6e6e6;
    font-size: 16px;
    line-height: 1.65;
}

.snippet-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.snippet-login-field {
    display: flex;
    align-items: center;
    min-height: 56px;
    background: #083c38;
    border: 1px solid rgba(3, 191, 78, .25);
    border-radius: 45px;
    padding: 6px 14px;
}

.snippet-login-field input {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
}

.snippet-login-field input::placeholder {
    color: #9ebdb5;
}

/* Chrome/Edge paint autofilled inputs with their own opaque background,
   which overrides the transparent background above and briefly flashes
   white behind the dark field. Force it back to the field's own color. */
.snippet-login-field input:-webkit-autofill,
.snippet-login-field input:-webkit-autofill:hover,
.snippet-login-field input:-webkit-autofill:focus,
.snippet-login-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #083c38 inset;
    box-shadow: 0 0 0px 1000px #083c38 inset;
    transition: background-color 9999s ease-in-out 0s;
}

.snippet-login-country-code {
    display: none;
    flex: 0 0 auto;
    margin-right: 10px;
}

.snippet-login-country-code.is-visible {
    display: block;
}

.snippet-login-country-code select {
    height: 34px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .16);
    outline: 0;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    padding-right: 8px;
}

.snippet-login-country-code option {
    color: #062f2b;
}

.snippet-login-password-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
    cursor: pointer;
}

.snippet-login-password-toggle:hover {
    background: rgba(3, 191, 78, .25);
    color: #ffffff;
}

.snippet-login-error {
    min-height: 0px;
    color: #ff7d7d;
    font-size: 14px;
    font-weight: 500;
}

.snippet-login-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 40px;
    background: #03BF4E;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.snippet-login-submit:hover {
    background: #02a543;
}

.snippet-login-submit:disabled {
    background: #66766f;
    color: #d9d9d9;
    cursor: not-allowed;
}

.snippet-login-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 0;
}

.snippet-login-links a {
    color: #03BF4E;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.snippet-login-links a:hover {
    color: #35d96f;
    text-decoration: underline !important;
}


.snippet-login-links {
    width: 100%;
    text-align: right;
    margin-top: -5px;
    margin-bottom: 0px;
}

.snippet-login-links a {
    color: #03bf4e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
}

.snippet-login-links a:hover {
    text-decoration: underline;
}


/* Login + Sign Up button container */
.snippet-login-actions {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
}


/* Both buttons */
.snippet-login-actions .snippet-login-submit,
.snippet-login-actions .snippet-signup-submit {
    flex: 1;
    width: 50%;
    height: 52px;
    min-height: 52px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    border-radius: 28px;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;

    cursor: pointer;
    transition: all 0.2s ease;
}


/* Login button */
.snippet-login-actions .snippet-login-submit {
    border: 1px solid #03bf4e;
    background: #03bf4e;
    color: #fff;
}


/* Login hover */
.snippet-login-actions .snippet-login-submit:hover {
    background: #02aa45;
    border-color: #02aa45;
}


/* Sign Up outlined button */
.snippet-login-actions .snippet-signup-submit {
    border: 1px solid #03bf4e;
    background: transparent;
    color: #03bf4e;

    text-decoration: none;
}


/* Sign Up hover */
.snippet-login-actions .snippet-signup-submit:hover {
    background: #03bf4e;
    color: #fff;
}

/* ===========================
   Academy Workshop Popup
=========================== */

#workshopAccessModal .modal-dialog{
    max-width:650px;
    margin-top:60px;
}

#workshopAccessModal .modal-content.workshop-modal{
    background:linear-gradient(135deg,#013532,#042625);
    border:1px solid rgba(3,191,78,.35);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

#workshopAccessModal .modal-body{
    padding:25px 30px;
    text-align:center;
}

/* Hide default header if keeping it */
#workshopAccessModal .modal-header{
    display:none;
}

/* Lock Icon */

#workshopAccessModal .workshop-icon{
    width:90px;
    height:90px;
    margin:0 auto 25px;
    border-radius:50%;
    background:linear-gradient(180deg,#03BF4E,#02a543);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 30px rgba(3,191,78,.35);
}

#workshopAccessModal .workshop-icon i{
    font-size:42px;
    color:#fff;
}

/* Heading */

#workshopAccessModal .workshop-title {
    color: #03BF4E !important;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* Description */

#workshopAccessModal .workshop-description{
    color:#e6e6e6;
    font-size:16px;
    line-height:1.7;
    max-width:560px;
    margin:0 auto 35px;
}

/* Input + Button */

#workshopAccessModal .workshop-input-group{
    display:flex;
    align-items:center;
    background:#083c38;
    border:1px solid rgba(3,191,78,.25);
    border-radius:45px;
    padding:6px;
    margin-bottom:18px;
}

#workshopAccessModal .workshop-input{
    flex:1;
    height:48px;
    background:transparent !important;
    border:none !important;
    color:#fff !important;
    box-shadow:none !important;
    padding:0 20px;
    font-size:17px;
}

#workshopAccessModal .workshop-input:focus{
    background:transparent !important;
    color:#fff !important;
    box-shadow:none !important;
}

#workshopAccessModal .workshop-input::placeholder{
    color:#9ebdb5;
}

/* Button */

#workshopAccessModal .workshop-btn{
    min-width:190px;
    height:48px;
    border:none;
    border-radius:40px;
    background:#03BF4E !important;
    color:#fff !important;
    font-weight:700;
    font-size:17px;
    transition:.3s;
}

#workshopAccessModal .workshop-btn:hover{
    background:#02a543 !important;
}

#workshopAccessModal .workshop-btn:disabled{
    background:#66766f !important;
    color:#d9d9d9 !important;
    cursor:not-allowed;
    opacity:1;
}

/* Error */

#workshopAccessModal .code-error {
    color: #ff7d7d;
    font-size: 15px;
    font-weight: 500;
    min-height: 0;
    margin-bottom: 12px;
}

/* Footer */

#workshopAccessModal .workshop-footer{
    display:block;
    color:#90a9a1;
    font-size:16px;
    margin-top:10px;
}

.code-error {
    color: #ff6b6b;
    font-size: 14px;
    font-weight: 500;
    min-height: 20px;
}
.workshop-secondary-btn {
   // background: transparent;
    color: #fff;
    border: 1px solid #fff;
    margin-top: 10px;
}


.workshop-link-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: #03BF4E;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
}

.workshop-link-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #03BF4E;
    transition: width .25s ease;
}

.workshop-link-btn:hover {
    color: #35d96f;
}

.workshop-link-btn:hover::after {
    width: 100%;
}

.workshop-link-btn:focus {
    outline: none;
}

.workshop-link-btn:last-child {
    text-align: right;
}

.workshop-links{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}


.analysis .news-image,
.analysis .card-news-images {
    position: relative;
}

.insight-type-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-block;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 20px;
    background-color: #03bf4e;
    color: #ffffff;
}

.article-scroll-container {
    max-height: 750px;
    overflow-y: auto;
    padding-right: 12px;
    
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #14a44d transparent;
}

/* Chrome, Edge, Safari */
.article-scroll-container::-webkit-scrollbar {
    width: 7px;
}

.article-scroll-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.article-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #29d26f, #14a44d);
    border-radius: 10px;
}

.article-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #35e77d, #18b957);
}

/* ==== Discovery Call page (Academy - Book 1:1 Session) ==== */
.discovery-hero {
  background: linear-gradient(135deg, #04231f 0%, #021615 100%);
  border-radius: 0;
  padding: 9rem 2rem 4rem 2rem;
}

.discovery-title {
  font-size: 3.2rem;
  line-height: 1.25;
  color: #fff;
  font-weight: 700;
}

.discovery-subtext {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #d9d9d9;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.discovery-badges .discovery-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2rem;
  color: #fff;
  font-size: 0.95rem;
}

.discovery-badges .discovery-badge i {
  color: #03bf4e;
}

.discovery-video-wrap {
  position: relative;
  max-width: 900px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.discovery-video {
  width: 100%;
  display: block;
  background: #000;
}

/* The Vimeo embed has controls=0 (no way to hide just its seek bar, only
   all-or-nothing), so these two buttons are the *only* playback control a
   viewer has -- there is deliberately no seek/scrub control anywhere here. */
.discovery-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(3, 191, 78, 0.9);
  color: #fff;
  border: none;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 3;
}

.discovery-video-play-overlay i {
  margin-left: 4px;
  /* optical centering for the play triangle */
}

.discovery-video-play-overlay:hover {
  background: #03bf4e;
  transform: translate(-50%, -50%) scale(1.08);
}

.discovery-video-toggle {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 3;
}

.discovery-video-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
}

a.discovery-video-cta {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a.discovery-video-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* The shared a.academy-green-btn:hover rule (transform: scale(0.95) !important)
   strips this button's centering translateX(-50%) on hover, making it visibly
   slide/jump to the right instead of shrinking in place. Re-apply the
   centering alongside a simple hover scale. */
a.discovery-video-cta.is-visible:hover {
  transform: translateX(-50%) scale(0.97) !important;
}

.discovery-features {
  padding: 4rem 0;
}

.discovery-reviews,
.discovery-booking {
  padding: 3rem 0;
}

.discovery-stars i {
  color: #f5b400;
  font-size: 1.3rem;
  margin: 0 0.1rem;
}

.discovery-placeholder-box {
  position: relative;
  max-width: 900px;
  border: 1px dashed rgba(3, 191, 78, 0.5);
  border-radius: 1rem;
  overflow: hidden;
}

.discovery-placeholder-box img {
  width: 100%;
  display: block;
  opacity: 0.5;
}

.discovery-placeholder-box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(2, 22, 21, 0.85);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  text-align: center;
  max-width: 90%;
}

/* Static Google Reviews slider (discovery-call.blade.php) -- static content
   (the client's actual reviews, typed in) until the client's real Google
   Reviews embed/API is wired in; see the comment above the slider markup in
   that file. Two-column layout: a fixed "Excellent / stars / count / Google"
   panel on the left, review cards sliding on the right -- matches the
   reference design the client shared. */
.discovery-google-reviews-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  text-align: left;
}

.discovery-google-reviews-meta .academy-subtitle {
  font-size: 2rem;
  font-weight: 600;
}

.discovery-google-reviews-meta .discovery-stars i {
  font-size: 1.7rem;
}

.discovery-google-reviews-meta .discovery-subtext {
  font-size: 1.2rem;
  font-weight: 600;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.discovery-google-reviews-meta .discovery-google-badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.discovery-google-reviews-meta .discovery-google-badge span {
  font-size: 1.05rem;
}

.discovery-google-reviews-meta {
  flex-shrink: 0;
  width: 230px;
}

.discovery-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.discovery-google-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

.discovery-google-badge span {
  font-weight: 600;
  color: #b8c4c2;
}

.discovery-google-reviews-slider-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.discovery-google-reviews-nav {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.discovery-google-reviews-nav .swiper-button-prev,
.discovery-google-reviews-nav .swiper-button-next {
  position: static !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  margin: 0 !important;
  background-color: #14413d !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.discovery-google-reviews-nav .swiper-button-prev:after,
.discovery-google-reviews-nav .swiper-button-next:after {
  color: #fff !important;
  font-size: 0.9rem !important;
}

.discovery-google-reviews-slider {
  /* !important needed: swiper's own base CSS (.swiper { padding: 0 }) loads
     after this stylesheet (the swiper <link> sits in the page body, after
     <head>'s stylesheets) and wins on equal specificity + later source
     order -- same fix already used for .our-analysis-slider elsewhere. */
  padding: 0.25rem !important;
  margin: -0.25rem !important;
}

.discovery-google-review {
  position: relative;
  background: #04231f;
  border: 1px solid #14413d;
  border-radius: 1rem;
  padding: 1.5rem 1.4rem;
  text-align: left;
  height: 100%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.discovery-google-review-badge {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 1.6rem;
  height: 1.6rem;
}

.discovery-google-review-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.discovery-google-review-avatar {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}

.discovery-google-review-name-wrap {
  display: flex;
  flex-direction: column;
}

.discovery-google-review-name {
  font-weight: 600;
  color: #fff;
}

.discovery-google-review-time {
  font-size: 0.8rem;
  color: #8a9a98;
}

.discovery-google-review-stars {
  margin-bottom: 0.7rem;
}

.discovery-google-review-stars i {
  color: #f5b400;
  font-size: 0.95rem;
  margin-right: 0.15rem;
}

.discovery-google-review-text {
  color: #b8c4c2;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.discovery-google-review-text.is-truncated {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.discovery-google-review-toggle {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: #03bf4f;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.discovery-google-review-toggle:hover {
  text-decoration: underline;
}

.discovery-google-review-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

.discovery-google-review-footer svg {
  width: 0.9rem;
  height: 0.9rem;
}

.discovery-google-review-footer span {
  font-size: 0.78rem;
  color: #8a9a98;
}

@media (max-width: 767px) {
  .discovery-google-reviews-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .discovery-google-reviews-meta {
    width: 100%;
  }

  .discovery-google-reviews-slider-wrap {
    width: 100%;
  }

  .discovery-google-reviews-nav {
    justify-content: center;
  }
}

/* discovery-call: iframe sizing + locked booking box (added after Vimeo integration) */
.discovery-video {
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.discovery-booking-locked {
  max-width: 900px;
  border: 1px dashed rgba(3, 191, 78, 0.5);
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  color: #fff;
}

.discovery-booking-locked i.fa-lock {
  font-size: 1.8rem;
  color: #03bf4e;
  display: block;
}

/* Searchable country-code select2 on the login page (login-v2.blade.php).
   Keeps the same narrow, transparent, underline look as the plain <select>
   it replaces -- select2 just adds a search box to the same field. */
.forms .form-content .input-box .select2-container--default .select2-selection--single {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #4c5d5a;
  border-radius: 0;
  height: auto;
  padding: 15px 0px;
}

.forms .form-content .input-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #6b6967;
  padding: 0;
  line-height: normal;
  font-size: 16px;
  font-weight: 500;
}

.forms .form-content .input-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
}

/* Searchable country-code select2 on the signup page (signup.blade.php).
   Reuses the same absolute positioning already defined above for
   ".phone_field select.form-select.me-2" -- select2 hides the original
   <select> and inserts its own container in its place, so that same
   positioning is re-applied to the select2 container instead. */
.input-box.new-login.phone_field .select2-container {
  position: absolute;
  top: 1px;
  left: 0;
}

.form-content .input-box.new-login.phone_field input.phone1.form-control {
  padding-left: 90px !important;
}

.input-box.new-login.phone_field .select2-container .select2-selection--single {
  background-color: transparent;
  border: none !important;
  color: #6b6967;
  height: auto;
}

.input-box.new-login.phone_field .select2-container .select2-selection__rendered {
  color: #6b6967;
  padding-left: 0;
}

/* The closed box stays narrow (85-100px, matching the original design), but
   the OPEN dropdown panel needs to be wide enough to actually read country
   names/search in -- without this it inherits the closed box's width and
   renders as a tiny, cramped, unstyled-looking list (login + signup pages). */
.select2-dropdown {
  min-width: 280px;
  background-color: #04231f !important;
  border-color: #4c5d5a !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0a2e2a !important;
  border-color: #4c5d5a !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option {
  color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #03bf4e !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #0a2e2a !important;
  color: #fff !important;
}

/* Tighter top spacing on the login OTP verification screen only
   (login_otp_verification.blade.php) to make room for the added
   "try email instead" note without pushing the OTP input down. */
.login-container-outer img.verify_icon.verify_icon_login {
  margin-bottom: 25px;
}


/* ==========================================================================
   Member "My Account" pages — Dashboard, My Snippets, Edit Profile,
   Change Password, Transactions, Subscribe.
   Moved out of each page's own inline <style> block so all six pages share
   one copy instead of six duplicated ones.
   ========================================================================== */

body.memberdashboard,
body.mysnippets,
body.memberedit,
body.changepassword,
body.transactions,
body.newsletter {
  background-color: #021615 !important;
  background-image: url("/images/my-account-dashboard.png") !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 274px !important;
}

body.memberdashboard nav.breadcrumb-wrapper,
body.mysnippets nav.breadcrumb-wrapper,
body.memberedit nav.breadcrumb-wrapper,
body.changepassword nav.breadcrumb-wrapper,
body.transactions nav.breadcrumb-wrapper,
body.newsletter nav.breadcrumb-wrapper {
  display: none !important;
}

/* Edit Profile page loader/spinner + read-only field styling. */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.member-dashboard-page input:read-only,
.member-sidebar-embed input:read-only,
.select-greyout {
  color: #474545;
  cursor: not-allowed;
  opacity: 0.7;
}

  .member-dashboard-page {
    --panel: rgba(0, 46, 41, .88);
    --panel-deep: rgba(0, 31, 29, .94);
    --panel-bright: rgba(0, 82, 58, .92);
    --border: rgba(8, 125, 113, .64);
    --green: #03bf4e;
    --teal: #078b80;
    --muted: #89aaa6;
    width: 100%;
    min-height: 660px;
    padding: 24px 30px 78px;
    color: #fff;
    background: transparent;
    font-family: "Poppins", sans-serif;
  }

  .member-dashboard-page,
  .member-dashboard-page * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .member-dashboard-page a {
    text-decoration: none;
  }

  .member-dashboard-shell {
    width: min(91%, 1380px);
    margin: 0 auto;
  }

  .member-dashboard-title {
    margin: 0 0 28px;
    text-align: center;
  }

  .member-dashboard-title h1 {
    margin: 0;
    color: #fff;
    font-size: 2.15rem;
    line-height: 1.05;
    font-weight: 700;
  }

  .member-dashboard-title p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .78rem;
  }

  .member-dashboard-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr) 250px;
    gap: 28px;
    align-items: start;
  }

  .member-account-rail {
    min-height: 470px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #021F1D;
  }

  .member-profile-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 34px;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(3, 191, 78, .16), rgba(7, 139, 128, .04));
  }

  .member-profile-card img {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
  }

  .member-profile-card strong,
  .member-profile-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-profile-card strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .member-profile-card small {
    color: var(--muted);
    font-size: .74rem;
  }

  .member-profile-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #9ce8c4;
    background: rgba(255, 255, 255, .08);
    font-size: 1rem;
  }

  .member-rail-links {
    display: grid;
    gap: 12px;
  }

  /* Each tab is its own bordered box (dark by default, solid green on
     hover/active) -- not one shared box wrapping the whole list. */
  .member-rail-links:not(.member-rail-secondary) a {
    /* border: 1px solid var(--border); */
    background: #082A27;
  }

  .member-rail-links a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 10px;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 10px;
    color: #cfe6e2;
    background: transparent;
    font-size: .8rem;
    line-height: 1.2;
  }

  .member-rail-links a i {
    font-size: 1.05rem;
  }

  .member-rail-links:not(.member-rail-secondary) a span:last-child {
    text-align: right;
  }

  .member-rail-links a:hover,
  .member-rail-links a.active {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
  }

  .member-alert-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #1f250d;
    background: #ffd54d;
    font-size: .62rem;
    font-weight: 700;
  }

  .member-rail-secondary {
    margin-top: 22px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(0, 35, 32, .5);
  }

  .member-rail-secondary a {
    min-height: 20px;
    padding: 3px 0;
    background: transparent;
    color: #fff;
    text-decoration: underline !important;
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .member-rail-secondary a:hover {
    background: transparent;
    color: #fff;
  }

  .member-dashboard-main h2 {
    margin: 8px 0 14px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
  }


  /* Transactions/Subscribe embed their sidebar inside the page's existing
     Bootstrap grid instead of the full .member-dashboard-page shell, so
     this scoped variant carries only what the sidebar itself needs. */
  .member-sidebar-embed.member-dashboard-page {
    --border: rgba(8, 125, 113, .64);
    --green: #03bf4e;
    --teal: #078b80;
    --muted: #89aaa6;
    width: 100%;
    min-height: auto;
    padding: 0;
    color: #fff;
    background: transparent;
    font-family: "Poppins", sans-serif;
  }

  .member-sidebar-embed.member-dashboard-page,
  .member-sidebar-embed.member-dashboard-page * {
    box-sizing: border-box;
    letter-spacing: 0;
  }

  .member-sidebar-embed.member-dashboard-page a {
    text-decoration: none;
  }


  .member-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 146px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--teal);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
  }

  .member-pill-button:hover {
    color: #fff;
    background: #069b8e;
  }

  .member-broker-logo {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    object-fit: contain;
    background: transparent;
  }

  .member-broker-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 18px;
    border-radius: 6px;
    color: #263230;
    background: #fff;
    font-size: .6rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .member-stars {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    color: #f5a51c;
    font-size: .74rem;
    vertical-align: middle;
  }

  .member-broker-column {
    padding-top: 42px;
  }

  .member-side-broker {
    display: block;
    min-height: 278px;
    padding: 20px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(107, 91, 49, .82);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(59, 50, 31, .96), rgba(30, 28, 24, .98));
  }

  .member-side-broker:hover {
    color: #fff;
  }

  .member-side-broker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
  }

  .member-side-broker .member-broker-logo {
    width: 58px;
    height: 58px;
  }

  .member-side-broker .member-broker-badge {
    margin: -20px -20px 0 0;
    border-radius: 0 16px 0 15px;
    padding: 5px 10px;
    font-size: .5rem;
    text-transform: uppercase;
  }

  .member-side-broker h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
  }

  .member-side-broker p {
    margin: 0;
    color: #ece8dc;
    font-size: .72rem;
    line-height: 1.55;
  }

  .member-side-stats {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    color: #fff;
    font-size: .66rem;
  }

  .member-broker-offers {
    display: grid;
    gap: 10px;
    margin-top: 14px;
  }

  .member-broker-offer {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 40px;
    padding: 7px;
    border-radius: 12px;
    background: rgba(0, 69, 64, .94);
  }

  .member-broker-offer img {
    width: 50px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
    background: transparent;
  }

  .member-broker-offer .member-pill-button {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 6px 12px;
    color: #073c39;
    background: #f4f8f5;
    font-size: .66rem;
  }

  .member-broker-offer .member-pill-button:hover {
    color: #073c39;
    background: #fff;
  }





  /* -- Change Password page only ------------------------------------- */

  .member-change-password-main > .row {
    margin: 0 !important;
  }

  .member-change-password-main > .col-md-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .member-change-password-main > .col-md-8 > .row {
    margin: 0 !important;
  }

  .member-change-password-main > .row > .col-md-12 {
    width: 100%;
    padding: 0;
  }

  /* -- Edit Profile page only ------------------------------------------ */

  /* memberedit renders the sidebar's edit-photo control as a <button>,
     needing the extra reset the anchor version elsewhere doesn't. */
  body.memberedit .member-profile-edit {
    padding: 0;
    border: 0;
    cursor: pointer;
  }

  /* Edit Profile form -- Figma-aligned avatar + boxed fields.
     Scoped to .member-edit-main so it never touches the shared
     .account-details-edit-form styling used by changepassword/other pages. */
  .member-edit-avatar-row {
    margin-bottom: 20px;
  }

  .member-edit-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
  }

  .member-edit-avatar-wrap img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
  }

  .member-edit-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #04211d;
    border-radius: 50%;
    color: #fff;
    background: var(--green);
    font-size: .8rem;
    cursor: pointer;
  }

  .member-edit-main .account-details-edit-form,
  .member-change-password-main .account-details-edit-form {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(0, 56, 50, .35);
    box-shadow: none;
  }

  /* Edit Profile's form (Account Details + Interest + Save) is tall --
     scroll it internally instead of stretching the whole page, same idea
     as My Snippets' internally-scrolling feed list. */
  .member-edit-main .account-details-edit-form {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    padding-right: 18px;
  }

  .member-edit-main .account-details-edit-form::-webkit-scrollbar {
    width: 4px;
  }

  .member-edit-main .account-details-edit-form::-webkit-scrollbar-thumb {
    background: rgba(3, 191, 78, .5);
    border-radius: 10px;
  }

  .member-edit-main .account-details-edit-form .heading-top {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
  }

  .member-edit-main .account-details-edit-form .heading-top h5 {
    color: #fff;
  }

  .member-edit-main .account-details-edit-form .form-content form > .mt-md-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group label,
  .member-edit-main .account-details-edit-form .form-content form .form-group label.int-checkbox {
    color: #fff;
    font-size: 1rem;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group label.int-checkbox {
    font-weight: 400 !important;
    cursor: pointer;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group input.int-checkbox {
    width: 18px !important;
    height: 18px;
    accent-color: var(--green);
    cursor: pointer;
  }

  /* Interest selects (memq1/memq2/memq3) have no wrapping box -- style the
     select itself directly. First two pair up 50/50, the third (level of
     experience) falls onto its own row, matching the design. */
  .member-edit-main .account-details-edit-form .form-content form .member-edit-interest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 6px 24px;
  }

  /* que2/que3 still carry Bootstrap's mt-md-3 (leftover from the old
     single-column stacked layout) -- inside the 2-col grid that extra
     top margin just pushes them down relative to their row partner. The
     grid's own gap already handles spacing, so cancel it here. */
  .member-edit-main .account-details-edit-form .form-content form .member-edit-interest-grid > .form-group {
    margin-top: 0 !important;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group select {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    padding: 10px 14px;
    font-size: .85rem;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group select:focus {
    border-color: var(--green);
    outline: none;
  }

  /* The closed <select> box uses the white text above so it matches the
     dark theme, but the browser's native dropdown list only respects
     colors set on <option> itself -- without this, the open list renders
     white-on-white and the options are unreadable. */
  .member-edit-main .account-details-edit-form .form-content form .form-group select option {
    color: #1c1c1c;
    background: #fff;
  }

  /* Name / Telephone / Email / Date of birth -- the whole row (country
     code + input + verify badge) sits inside ONE bordered box, so the
     select2/verify overlays never draw outside or split the border.
     Change Password's plain New/Confirm Password fields reuse the same
     boxed-field look, so this rule is shared across both pages. */
  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field,
  .member-change-password-main .account-details-edit-form .form-content form .form-group .member-edit-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    padding: 0 14px;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field:focus-within,
  .member-change-password-main .account-details-edit-form .form-content form .form-group .member-edit-field:focus-within {
    border-color: var(--green);
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field input,
  .member-change-password-main .account-details-edit-form .form-content form .form-group .member-edit-field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    color: #fff;
    padding: 10px 0 !important;
    font-size: .85rem;
    outline: none;
  }

  /* select2 replaces this <select> visually with .select2-container below,
     but this site's select2 build doesn't add its usual "visually hidden"
     CSS -- without forcing it off, the raw select still occupies its own
     flex slot and squeezes every field after it. */
  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field select.country_code {
    display: none !important;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .select2-container {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100px;
    margin-right: 10px;
    padding-right: 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff;
  }

  /* This site's select2 build zeroes out .select2-selection__rendered's
     padding entirely, so with nothing reserved for the arrow, the "+91"
     text runs underneath it. Reserve space equal to the arrow's width. */
  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .select2-selection__rendered {
    color: #fff !important;
    padding-right: 18px !important;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .select2-selection__arrow {
    right: 0 !important;
  }

  /* Once the phone number is verified, the country code is locked
     (select is disabled) -- there's nothing to open, so the dropdown
     caret is just visual clutter overlapping the divider. Hide it and
     reclaim its reserved space. */
  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .select2-container--disabled .select2-selection__arrow {
    display: none;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .select2-container--disabled .select2-selection__rendered {
    padding-right: 0 !important;
  }

  .member-edit-main .account-details-edit-form .form-content form input#mem_mobile {
    padding-left: 0 !important;
  }

  .member-edit-main .account-details-edit-form .form-content form .form-group .member-edit-field .verify_status_wrapper {
    position: static;
    flex: 0 0 auto;
    margin-left: 10px;
  }

  .member-edit-main .account-details-edit-form .verify_status_wrapper .text-success {
    font-size: .74rem;
    font-weight: 600;
  }

  .member-edit-main .account-details-edit-form .verify_status_wrapper .button.green-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 5px 14px !important;
    border: 0;
    border-radius: 999px;
    background: #ffcd39 !important;
    color: #1f250d !important;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* -- Dashboard page only ---------------------------------------------- */

  .member-dashboard-cards {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr);
    gap: 18px;
  }

  .member-panel,
  .member-feature-broker {
    border-radius: 16px;
    overflow: hidden;
  }

  .member-panel {
    display: flex;
    flex-direction: column;
    min-height: 166px;
    padding: 21px 24px;
    border: 1px solid var(--border);
    background: var(--panel-deep);
  }

  .member-panel > .member-pill-button,
  .member-panel > form {
    margin-top: auto;
  }

  .member-panel h3,
  .member-feature-broker h3 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 700;
  }

  .member-panel p,
  .member-feature-broker p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.55;
  }

  .member-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .member-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    color: #ddfff1;
    background: rgba(7, 139, 128, .78);
    font-size: .8rem;
  }

  .academy-progress-value {
    display: block;
    margin-top: 20px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .academy-progress-track {
    height: 6px;
    margin: 8px 0 20px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(27, 129, 119, .82);
  }

  .academy-progress-track span {
    display: block;
    width: var(--progress-width);
    height: 100%;
    border-radius: inherit;
    background: var(--green);
  }

  .member-feature-broker {
    display: block;
    grid-column: 1 / -1;
    min-height: 126px;
    padding: 18px 22px;
    color: #fff;
    border: 1px solid rgba(239, 44, 47, .78);
    background: linear-gradient(135deg, #3a1c1a, #020b0b);
  }

  .member-feature-broker-top {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }

  .member-feature-broker p {
    margin-top: 5px;
    color: #e3e8e4;
  }

  .member-broker-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin-top: 15px;
    color: #f2f6f4;
    font-size: .66rem;
  }

  .member-subscribe-panel {
    background: linear-gradient(135deg, rgba(0, 60, 54, .96), rgba(0, 90, 48, .9));
    border-color: rgba(3, 191, 78, .68);
  }

  .member-subscribe-panel p {
    color: #ecfff6;
    margin: 13px 0 20px;
    font-size: .8rem;
  }

  .member-subscribe-panel .member-pill-button {
    width: 100%;
    background: var(--green);
  }

  .member-snippet-panel {
    position: relative;
    grid-column: 1 / -1;
    min-height: 126px;
    background: linear-gradient(110deg, rgba(0, 61, 55, .98), rgba(0, 74, 49, .92));
    border-color: rgba(3, 191, 78, .56);
  }

  .member-snippet-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
  }

  .member-snippet-count {
    display: inline-block;
    margin-right: 10px;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
  }

  .member-snippet-total {
    color: var(--muted);
    font-size: .68rem;
  }

  .member-snippet-ghost {
    position: absolute;
    right: 22px;
    bottom: 10px;
    width: 58px;
    height: 53px;
    transform: rotate(8deg);
    border: 5px solid rgba(3, 191, 78, .42);
    border-radius: 8px;
    opacity: .9;
  }

  .member-snippet-ghost::before,
  .member-snippet-ghost::after {
    content: "";
    position: absolute;
    left: 13px;
    height: 5px;
    border-radius: 999px;
    background: rgba(3, 191, 78, .72);
  }

  .member-snippet-ghost::before {
    top: 15px;
    right: 12px;
  }

  .member-snippet-ghost::after {
    top: 29px;
    right: 22px;
  }




/* -- Transactions / Subscribe: fix light-theme-only gaps -----------------
   These two pages never migrated their top heading (.my-acc-top-heading,
   .change-password-text-heading) to .member-dashboard-title, and the
   payment table is plain Bootstrap markup. dark-style.css already had a
   readable (white-on-dark) version of both; style.css never got the same
   treatment, so under the light stylesheet the heading text and table
   rendered dark-on-dark/white-on-white. Scoped to these two pages only,
   so the shared .my-acc-top-heading/.change-password-text-heading rules
   used by memberdelete.blade.php/changeemail.blade.php (still genuinely
   light-themed pages) are left untouched. */
body.transactions .my-acc-top-heading h1,
body.newsletter .my-acc-top-heading h1,
body.transactions .change-password-text-heading h2,
body.newsletter .change-password-text-heading h2 {
  color: #fff;
}

body.transactions .account-details-edit-form table.table.table-bordered {
  background-color: transparent;
  background: transparent;
  border: none;
}

body.transactions .account-details-edit-form table.table.table-bordered tbody {
  background-color: transparent;
  border: none;
}

body.transactions .account-details-edit-form table.table.table-bordered th {
  background: transparent;
  color: #fff;
  border: none;
}

body.transactions .account-details-edit-form table.table.table-bordered td {
  background-color: transparent;
  color: #fff;
  border: none;
}

body.transactions .account-details-edit-form table.table.table-bordered td a {
  color: #03bf4f;
}

/* Searchable country-code select2 on the login page (login-v2.blade.php).
   Keeps the same narrow, transparent, underline look as the plain <select>
   it replaces -- select2 just adds a search box to the same field. */
.forms .form-content .input-box .select2-container--default .select2-selection--single {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #4c5d5a;
  border-radius: 0;
  height: auto;
  padding: 15px 0px;
}

.forms .form-content .input-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #6b6967;
  padding: 0;
  line-height: normal;
  font-size: 16px;
  font-weight: 500;
}

.forms .form-content .input-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
}

/* Searchable country-code select2 on the signup page (signup.blade.php).
   Reuses the same absolute positioning already defined above for
   ".phone_field select.form-select.me-2" -- select2 hides the original
   <select> and inserts its own container in its place, so that same
   positioning is re-applied to the select2 container instead. */
.input-box.new-login.phone_field .select2-container {
  position: absolute;
  top: 1px;
  left: 0;
}

.form-content .input-box.new-login.phone_field input.phone1.form-control {
  padding-left: 90px !important;
}

.input-box.new-login.phone_field .select2-container .select2-selection--single {
  background-color: transparent;
  border: none !important;
  color: #6b6967;
  height: auto;
}

.input-box.new-login.phone_field .select2-container .select2-selection__rendered {
  color: #6b6967;
  padding-left: 0;
}

/* The closed box stays narrow (85-100px, matching the original design), but
   the OPEN dropdown panel needs to be wide enough to actually read country
   names/search in -- without this it inherits the closed box's width and
   renders as a tiny, cramped, unstyled-looking list (login + signup pages). */
.select2-dropdown {
  min-width: 280px;
  background-color: #04231f !important;
  border-color: #4c5d5a !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0a2e2a !important;
  border-color: #4c5d5a !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option {
  color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #03bf4e !important;
  color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #0a2e2a !important;
  color: #fff !important;
}

/* Tighter top spacing on the login OTP verification screen only
   (login_otp_verification.blade.php) to make room for the added
   "try email instead" note without pushing the OTP input down. */
.login-container-outer img.verify_icon.verify_icon_login {
  margin-bottom: 25px;
}