@use "../../../plugins/bootstrap-5.1.3/scss/functions";
@use "../../../plugins/bootstrap-5.1.3/scss/variables";
@use "../../../plugins/bootstrap-5.1.3/scss/mixins";
@use "../../../plugins/bootstrap-5.1.3/scss/utilities";
@use "../../../plugins/bootstrap-5.1.3/scss/reboot";
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto !important;
  }
}

:root {
  --primary: #CD0511;
  --consumed-by-js: $primary;
  --bs-primary: #CD0511;
  --bs-primary-rgb: 205, 5, 17;
  --success: #179149;
  --consumed-by-js: $success;
  --bs-success: #179149;
  --bs-success-rgb: 23, 145, 73;
  --bs-dark: #161616;
  --bs-dark-rgb: 22, 22, 22;
  --bs-font-open-sans:'Open Sans', sans-serif;
  --bs-body-font-family: var(--bs-font-open-sans);
  --bs-body-color: #161616;
  --bs-link-color: $primary;
}

@use "../../../plugins/bootstrap-5.1.3/scss/bootstrap";
@use "../../../plugins/bootstrap-5.1.3/scss/bootstrap";
section:first-of-type {
  background: #f4f4f4;
}

.platforms {
  background: #f4f4f4;
}

.platforms .platform-header {
  font-size: 18px;
  font-weight: 500;
}

.platforms .bg-white {
  position: relative;
  max-width: 90%;
}

.platforms .bg-white .hfm-logo {
  background-image: url(/assets/hfappnew/websites/main/images/homepage/redesign/platforms/hfm-platform.svg);
  width: 80px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.platforms .bg-white .mt5-logo {
  background-image: url(/assets/hfappnew/websites/main/images/homepage/redesign/platforms/mt5.svg);
  width: 45px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.platforms .bg-white .mt4-logo {
  background-image: url(/assets/hfappnew/websites/main/images/homepage/redesign/platforms/mt4.svg);
  width: 45px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.platforms .bg-white ul li {
  padding: 15px 0;
}

.platforms .bg-white .btn {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translate(-50%, -50%);
}

.negative-margin-top {
  margin-top: -10px;
}

.how-to-trade-cards {
  background-color: #f4f4f4;
  padding: 40px 60px;
  height: 100%;
}

.section-background {
  background-color: #f4f4f4;
}

.affects-price-cards {
  background-color: #ffffff;
  border-radius: 12px;
}

.how-to-invest-cards {
  padding: 25px 42px 26px 42px;
  background-color: #f4f4f4;
  border-radius: 12px;
  height: 100%;
}

.arrow-offset {
  position: absolute;
  top: 9px;
  left: -29px;
}

.top-margin {
  margin-top: 75px;
}

.top-margin-sm {
  margin-top: 40px;
}

.product-details-table {
  background-color: #f4f4f4;
  padding: 20px 50px 40px 50px;
  border-radius: 12px;
}

.app-image {
  position: relative;
  top: -109px;
}

.margin-130 {
  margin-top: 130px;
}

.price-cards {
  padding: 25px 42px 0px 42px;
  height: 250px;
}

.section-scroll-margin {
  scroll-margin-top: 120px;
}

table {
  border-collapse: collapse;
}

tbody tr {
  border-bottom: 1px solid #DEDEDE;
}

td, th {
  padding: 12px 0px;
}

.nav-buttons {
  color: black !important;
}

.nav-buttons:hover {
  background-color: #e7e7e7 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-color:hover {
  background-color: #E7E7E7 !important;
}

@media (min-width: 992px) {
  .platforms .bg-white:hover {
    background: #EEE !important;
    transition: 0.8s;
  }
  .platforms .bg-white:hover .ptf-1 {
    display: none !important;
  }
  .platforms .bg-white:hover .ptf-2 {
    display: block !important;
  }
  .platforms .bg-white:hover .ptf-2 .list-group-item {
    background: transparent;
  }
}

@media (max-width: 991.98px) {
  .platforms .bg-white {
    max-width: 100%;
  }
  .platforms .bg-white:hover {
    /*pointer-events: none;*/
  }
}

@media (max-width: 1199px) {
  .price-cards {
    height: 277px;
  }
}

@media (max-width: 991px) {
  .app-image {
    position: relative;
    top: 0px;
  }
  .price-cards {
    height: 350px;
  }
}

@media (max-width: 767px) {
  .video-modal .modal-xl {
    margin-top: 50%;
  }
  .top-margin {
    margin-top: 35px;
  }
  .top-margin-sm {
    margin-top: 20px;
  }
  .price-cards {
    height: 100%;
  }
  .image-mobile {
    width: 230px;
  }
  .margin-130 {
    margin-top: 80px;
  }
}

@media (max-width: 991.98px) {
  .btn-text {
    margin: auto;
  }
}

html#hf-app {
  scroll-behavior: smooth !important;
}