.button-style, .form-control, .form-select {min-height: 40px;}
.bg-color-1 {background-color: rgba(0, 0, 0, 0.16);}
.lh-1 {line-height: 1 !important;}
.color-red-200 {color: #ff8787 !important}
.invalid-feedback{line-height:1.2;}
/*form step*/
.check-mark {width: 180px;}
.navbar-expand-lg .logo {width: 190px;padding-top: 0;}
.offer-area {
  border: 2px solid rgb(255, 255, 255, 0.15);
  background-color: rgb(255, 255, 255, 0.2);
   box-shadow: 0 15px 15px rgba(0, 0, 0, 0.08);
}
.cashback-form-step p {
  margin-top:6px;
  font-size: 11px;
  font-weight: bold;
}
.cashback-form {
  display: table;
  width: 100%;
  position: relative;
  margin-bottom:15px;
}
.cashback-form .btn.disabled, .cashback-form .btn[disabled], .cashback-form fieldset[disabled] .btn {
  opacity:1 !important;
  color: #000;
  box-shadow: none;
}
.cashback-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width:37%;
  height:2px;
  background-color: var(--color-blue-600);
  z-index: 0;
    opacity: 0.8;
}
.cashback-form-step{
  display: table-cell;
  position: relative;
}
.cashback-form-step{text-align: center;}
.text-underline{text-decoration: underline;}
.btn-pink:hover{color: var(--color-white);text-decoration:none;outline:none;}
.btn-pink:focus{color: var(--color-white);text-decoration:none;outline:none;box-shadow: 0 0 0 0.2rem rgb(238 72 103/ 25%);}
.btn-circle{
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btns-success:not(:disabled):not(.disabled).active:focus, .btns-success:not(:disabled):not(.disabled):active:focus, .show>.btns-success.dropdown-toggle:focus{box-shadow:none;}
.setup-content .invalid-feedback{color: var(--color-white);}
.setup-content .form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label{
  color: var(--color-second);
}
.cashback-form-step .btn-default{
  color: var(--color-blue-700);
  background-color: var(--color-blue-700);
}
.cashback-form-step .btns-success{background-color: var(--color-blue-100)}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-check-label {cursor: pointer;}
.offer-form .form-check-input{
    cursor: pointer;
    min-width: 18px;
    width: 18px;
    min-height: 18px;
    height: 18px;
    margin-top: 0.2rem;
    background-color: rgba(225, 225, 225, 0.16);
    border: 2px solid var(--bg-light3) !important;
}
.offer-form .form-check-input:checked{
    background-color: var(--color-black);
}
.offer-form input.invalid {background-color: var(--bg-light3);}
.text-underline:hover{text-decoration:underline;}
.offer-form{
    margin: 0 auto;
    padding:15px 40px;
    width: 100%;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.22);
}
.offer-form:after{
    left: 0;
    top: 72px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-left-color: #4640fb;
    border-width: 30px;
    z-index: 4;
}
.offer-form:before{
    left: 0;
    top: 70px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-left-color: rgb(0, 0, 0, 0.16);
    border-width: 34px;
    z-index: 4;
}
.offer-form .form-control.input-rounded-0 {border-radius: 0 !important;}
.offer-form .form-control.rounded-end-0 {border-radius: 4px 0 0 4px !important;}
.offer-form .form-control.rounded-start-0 {border-radius: 0 4px 4px 0 !important;}
.form-text-area, .form-text-area p, .form-text-area a, .form-text-area strong,
.form-text-area span, .form-text-area u, .form-text-area ul li {color: var(--bg-light3) !important;}
/*form step end*/

/*trading card*/
.trading-img {height: 400px;object-fit: cover;object-position: center;}
.trading-card1 {
    position: absolute;
    top: 30%;
    left: 0;
    right: auto;
    animation: floatUpDown1 2s ease-in-out infinite;
}
.trading-card2 {
    position: absolute;
    top: 60%;
    right: 0;
    left: auto;
    animation: floatUpDown2 2s ease-in-out infinite;
}
@keyframes floatUpDown1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px); /* move up slightly */}
    100% {transform: translateY(0);}
}
@keyframes floatUpDown2 {
    0% {transform: translateY(0);}
    50% {transform: translateY(10px); /* move up slightly */}
    100% {transform: translateY(0);}
}
/*trading card end*/

@media screen and (max-width: 1200px) {
    .text-xxxl {font-size: 3.5rem !important;}
}
@media screen and (max-width: 991px) {
    .trading-img {height: 360px;}
}
@media screen and (max-width: 767px) {
    .text-xxxl {font-size: 2.5rem !important;}
    .offer-form {padding: 15px 24px;}
    .offer-form:before {border-width: 20px;}
    .offer-form:after {border-width: 16px;}
    .btn-circle {width: 20px;height: 20px;}
    .cashback-row:before {top: 9px;height: 1px;}
    .offer-form .form-control, .offer-form .form-control.input-rounded-0, .offer-form .form-control.rounded-end-0,
    .offer-form .form-control.rounded-start-0 {border-radius: 4px !important;}
    .trading-img {height: 260px;}
    .w-sm-50 {width: 46%;}
}