:root {
  --primary-color: #0e43c9;
  --secondary-color: #fd4b23;
  --black-color: #212121;
  --bg-light: #e3ebff;
  --accent-color: #ffcdc1;
}

/* desktop */
@media (max-width: 1700px) {
  .btn-continue {
    width: 30% !important;
  }
}

@media (max-width: 1440px) {
  .common_sub_heading {
    font-size: 1.2rem;
  }

  .product-card .card-title {
    font-size: 18px;
  }
  .btn-continue {
    width: 30% !important;
  }

  .product-card .card-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 1399.98px) {

.apply-step-line {
    top: 20%;
}

   .step-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: 40px;
    }

    .step-row > * {
        width: 100%;
        text-align: center;
    }

    /* 6th item */
    .step-row > :nth-child(6) {
        grid-column: 2;
        transform: translateX(50%);
    }

    /* 7th item */
    .step-row > :nth-child(7) {
        grid-column: 3;
        transform: translateX(50%);
    }

  .page-wrapper {
    margin-top: 93px;
}

.custom-hero-img {
    object-fit: 100% 100%!important;
    width: 100%!important;
    height: 100%!important;
}

.custom-apply-section,
.custom-apply-section .row {
    height: 72vh;
}



  .custom-form-box{
    padding: 35px!important;
  }

  .custom-tilt-card img {
    transition: transform 0.4s ease;
    transform: rotate(3deg);
    width: 95%;
  }
  .custom-plane {
    right: 18px;
  }
  .btn-continue {
    width: 30% !important;
  }
}

@media (max-width: 1358.98px) {
  .apart-footer h5 {
    font-size: 0.8rem;
  }

  .apart-footer {
    gap: 10px;
  }

  .btn-continue {
    width: 30% !important;
  }

  .quote-text {
    font-size: 12px;
    line-height: 19px;
  }

  .how-it-work-card .product-img {
    width: 90px !important;
  }
}

@media (max-width: 1337.98px) {
  .how-it-work-card .card-text {
    font-size: 0.8rem !important;
    line-height: 20px !important;
  }

  .how-it-work-card .card-title {
    font-size: 16px !important;
  }

  .how-it-work-card .card {
    height: 250px !important;
  }
}

@media (max-width: 1280.98px) {
  .hero-content h1 {
    font-size: 50px !important;
  }

.custom-breadcrumb-section h1 {
  font-size: 42px!important;
}


  .about-affiliate .common_txt {
    font-size: 0.8rem !important;
  }

  .btn-continue {
    width: 30% !important;
  }

  .bottom-card .card-text {
    font-size: 10px;
    letter-spacing: 0px;
  }

  .bottom-card .card-body {
    padding: 6px;
  }

  .contact-card .card-text,
  .contact-card .card-text a {
    font-size: 13px;
  }

  .contact-card .card-title {
    font-size: 16px;
  }

  .contact-card .card-body {
    padding: 18px;
  }

  .otp_img img {
    height: 35px;
  }

  .contact-form .form-label {
    font-size: 14px;
  }

  .contact-form .form-control {
    font-size: 12px;
    line-height: normal;
  }

  .subhead-p {
    font-size: 0.9rem;
  }

  .service-card,
  .service-card .card {
    width: 140px;
  }

  .service-card .card-body {
    padding: 18px 10px;
  }

  .service-card::before {
    width: 90px;
    height: 90px;
  }

  .service-card .card-title {
    font-size: 16px;
  }

  .service-card .card img {
    width: 38px;
  }

  .rate_term_card .card-title {
    font-size: 0.9rem;
    margin-bottom: 18px;
  }

  .rate_term_card .card-text {
    font-size: 0.7rem;
    line-height: 24px;
  }

  .representative .card-title {
    font-size: 0.8rem;
    letter-spacing: 0.4px;
  }

  .checklist p {
    font-size: 0.7rem;
  }

  .representative .card-body {
    padding: 24px 15px 30px 15px;
  }

  .accrediation {
    font-size: 0.7rem;
  }

  .partner-wrapper p {
    font-size: 0.7rem;
    line-height: 24px;
  }

  /* journey responsive */
  .journey-wrapper,
  .right-panel {
    min-height: 87vh;
  }

  .journey-heading {
    font-size: 22px !important;
  }

  .journey-para {
    font-size: 14px !important;
  }

  .custom-form .input-group .form-control,
  .custom-form .input-group .form-select,
  .custom-form .input-group .input-group-text {
    padding: 10px !important;
    font-size: 12px;
  }

  .custom-form .form-select{
      padding: 10px !important;
    font-size: 12px;
}

  .custom-form-select .form-select {
    padding: 10px !important;
    font-size: 12px !important;
  }

  .custom-form label {
    font-size: 14px !important;
  }

  .employment-wrapper .btn-group {
    padding: 4px !important;
  }

  .employment-wrapper .btn-group > .btn {
    padding: 6px 0px;
  }

  .right-panel img {
    width: 200px;
  }

  .dashboard-right-img {
    width: 300px !important;
  }

  .wh-70 {
    width: 50px;
    height: 50px;
  }

  .aadhar-img,
  .digilocker-img {
    width: 100px;
  }

  .success-img {
    width: 230px;
  }

  .status-wrapper {
    margin-top: 82px;
    min-height: 84vh;
  }

  .status-wrapper h2 {
    font-size: 1.5rem;
  }

  .selfie-box {
    width: 220px;
    height: 220px;
  }

  .counting-box {
    width: 25px;
    height: 25px;
    font-size: 12px !important;
  }

  .statement-card h3 {
    font-size: 13px !important;
  }

  .icon-circle {
    width: 50px;
    height: 50px;
  }

  .upload-container {
    padding: 15px 0px;
  }

  .timer {
    width: 180px;
    height: 180px;
  }

  .amounts-tag-loan {
    font-size: 15px !important;
  }

  .intrest,
  .fee {
    width: 30px;
  }

  .summary-card {
    padding: 20px 10px;
  }

  .summary-label {
    font-size: 14px !important;
  }

  .summary-value {
    font-size: 22px !important;
  }

  .esign-wrapper .step-title {
    font-size: 13px;
    line-height: 1.3;
  }

  .esign-step-number {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }

  .esign-step-box i {
    font-size: 22px;
  }

  .esign-step-box {
    width: 60px;
    height: 60px;
  }

  .esign-step-item:not(:last-child)::after {
    top: 30px;
  }

  .esign-wrapper {
    padding: 30px 20px 40px;
  }

  .status-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
  }

  .status-icon i {
    font-size: 20px !important;
  }

  .badge-progress {
    padding: 4px 14px;
    font-size: 12px;
    margin-top: 5px;
  }

  .login-form .form-control {
    padding: 14px;
  }

  .otp-input .form-control {
    width: 65px;
    height: 60px;
  }

  .login-wrapper {
    padding: 50px 0px;
  }

  .p-20 {
    padding: 15px !important;
  }

  /* repeat */
  .repeat h2 {
    font-size: 35px !important;
  }

    .repeat p {
    font-size: 16px !important;
  }

  .repeat-img{
    width: 60px!important;
  }

  .repeat-label{
    font-size: 13px!important;
  }

   .repeat-label div{
    line-height: 20px;
  }


}

@media (max-width: 1240.98px) {
  .faq-accordian .accordion-button {
    font-size: 0.9rem;
    line-height: 22px;
    padding: 18px;
  }

  .eligibility ul li {
    font-size: 13px;
    line-height: 25px;
  }

  .product-card .card-body {
    padding: 30px 20px;
  }

  .product-card .card-text,
  .product-card .card-title {
    margin-bottom: 8px;
  }

  .product-card .card-text {
    font-size: 0.8rem;
    line-height: 25px;
  }

  .product-card .card-title {
    font-size: 16px;
  }

  .product-img {
    width: 80px;
  }

  .product_icon1 {
    width: 100px;
  }

  .how-it-work-card .card {
    height: 230px !important;
  }
}

@media (max-width: 1199.98px) {

  .journey-wrapper h1{
    font-size: 45px!important;
  }
  .custom-apply-section, .custom-apply-section .row {
        height: 65vh;
    }

    .custom-form-box {
      max-width: 450px;
      padding: 24px!important;
    }

    .custom-step-line {
      top: 35%;
    }



  .status-wrapper,
  .journey-wrapper {
    margin-top: 66px;
  }
  .custom-plane {
    right: -29px;
  }

  .custom-app-coin {
    right: 473px;
    position: relative;
    top: 84px;
  }

  .employment-wrapper .btn-group .btn {
    font-size: 12px !important;
  }

  .affiliate-brand .apart-carousel .owl-nav button.owl-next {
    right: 0% !important;
  }

  .affiliate-brand .apart-carousel .owl-nav button.owl-prev {
    left: 0% !important;
  }

  .how-it-work-card .card-title {
    font-size: 14px !important;
  }

  .icon-box {
    width: 40px;
    height: 40px;
  }

  .common_txt {
    color: var(--black-color);
    font-size: 0.8rem;
  }

  .count-list p {
    font-size: 0.8rem;
  }

  .count-box {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
  }

  .count-list {
    margin-top: 12px;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .logo-img {
    /* height: 30px; */
    width: 95%;
  }

  .nav-link-custom {
    font-size: 13px;
    padding: 0 10px !important;
  }

  .page-wrapper {
    margin-top: 69px;
  }
}

@media (max-width: 1181.98px) {
  .blog-post span {
    font-size: 10px;
  }

  .hero-content h1 {
    font-size: 45px !important;
  }
}

@media (max-width: 1177.98px) {
  .how-it-work-card .product-img {
    width: 75px !important;
  }

  .how-it-work-card .card-body {
    padding: 16px !important;
  }

  .common_sub_heading {
    font-size: 1rem;
  }

  .blog-img {
    width: 180px;
    height: 180px;
  }

  .blog-content .card-title {
    color: var(--secondary-color);
    font-size: 12px;
    height: 40px;
  }

  .blog-content .card-text {
    font-size: 10px;
  }

  .common_sub_heading {
    font-size: 1rem;
  }
}

@media (max-width: 1128.98px) {
  .about-affiliate .common_txt {
    font-size: 0.7rem !important;
    line-height: 21px !important;
  }
}

@media (max-width: 1052.98px) {
  .blog-img {
    width: 160px;
    height: 160px;
  }

  .blog-content .card-title {
    height: 35px;
    margin-bottom: 5px;
  }

  .blog-card .btn-outline-secondary {
    font-size: 12px;
    padding: 8px 14px;
  }

  .blog-content .card-text {
    margin: 8px 0px;
  }

  .blog-post span {
    font-size: 9px;
  }
}

@media (max-width: 1038.98px) {
  .how-it-work-card .card-text {
    font-size: 0.7rem !important;
    line-height: 18px !important;
  }

  .how-it-work-card .card-title {
    font-size: 13px !important;
  }

  .how-it-work-card .card {
    height: 220px !important;
  }

  .hero-content h1 {
    font-size: 40px !important;
  }

  .loan-img {
    width: 160px;
  }
}

@media (max-width: 1024px) {
  .hero-content h1 {
    font-size: 47px !important;
  }
  .custom-app-coin {
    right: 498px;
    position: relative;
    top: 84px;
  }

  .custombtn img {
    width: 130px;
  }

  .affiliate-brand .apart-carousel .owl-nav button.owl-next {
    right: -3% !important;
  }

  .repay-wrapper {
    padding: 50px 0px !important;
  }

  .repayment-process .accordion-body {
    padding: 0px 12px;
    font-size: 12px !important;
  }

  .repayment-process .accordion-button:not(.collapsed),
  .repayment-process .accordion-button {
    padding: 12px;
    font-size: 14px;
  }

  .p-20 {
    padding: 14px !important;
  }

  .faq-accordian .accordion-button {
    font-size: 0.8rem;
    line-height: normal;
    padding: 15px;
    letter-spacing: 0;
  }

  .faq-accordian .accordion-body {
    font-size: 12px;
  }

  .nav-link-custom {
    padding: 0 8px !important;
  }

  .section-title {
    font-size: 2rem;
  }

  .common_heading {
    font-size: 1.6rem;
  }

  .login-form .form-control {
    padding: 12px;
  }

  .login-form .form-check-label {
    font-size: 10px;
  }

  .diamond {
    width: 350px;
    height: 350px;
  }

  .slider-section {
    min-height: 100vh;
  }

  .slider-banner {
    height: 123vh;
  }
}



/* tablet */




@media (max-width: 992px) {


    
      .journey-wrapper h1 {
        font-size: 35px !important;
    }

        .journey-wrapper {
        min-height: auto;
    }


  .blog-body-wrapper {
    flex-direction: column;
  }
  .custom-apply-img {
    min-height: 250px;
  }

  .custom-apply-card {
    margin-top: 20px;
  }
  .blog-sidebar {
    position: static !important;
    top: auto;
  }

  .blog-content {
    width: 100%;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }

  .blog-img {
    width: 100%;
    height: 200px;
  }

  .diamond {
    width: 400px;
    height: 400px;
  }

  .stage {
    position: relative;
    width: 450px;
    height: 390px;
  }

  .slide-card .card-text {
    font-size: 0.8rem;
    line-height: normal;
  }

  
}

@media (max-width: 991.98px) {

   .step-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 0px;
    }

    .step-row > * {
        width: 100%;
        text-align: center;
    }

    /* 6th item */
    .step-row > :nth-child(6) {
        grid-column: 2;
        transform: none;
    }

    /* 7th item */
    .step-row > :nth-child(7) {
        grid-column: 3;
        transform: none;
    }

        .custom-step-line {
        display: none !important;
    }

  .esign-step-item:not(:last-child)::after {
    display: none;
  }

   .custom-apply-section, .custom-apply-section .row {
        height: auto;
                padding: 20px 0px;
    }

  .custom-app-coin {
    right: 700px;
    position: relative;
    top: 84px;
  }

  .supportSec .d-grid {
    display: flex !important;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }

  .homeBanner h6 {
    font-size: 13px;
  }

  .hero-content h1 {
    font-size: 36px !important;
  }

  .loan-img {
    width: 140px;
  }

  .work-img {
    width: 40%;
  }

  .common_txt {
    line-height: normal;
  }

  .copy-box {
    display: block !important;
    text-align: center;
  }

  .nav-link-custom {
    margin-bottom: 20px;
    text-align: left;
  }

  .nav-link-custom.active {
    border-bottom: 2px solid var(--primary-color);
  }

  li.nav-item.desktop-apply-btn {
    display: none;
  }

  .navbar-light .navbar-nav .nav-link {
    text-align: left;
  }

  .navbar-collapse {
    position: absolute;
    top: 73px;
    left: 0;
    text-align: center;
    width: 100%;
    background: var(--bg-light);
    padding: 24px 24px 0 24px;
  }

  .about-affiliate .common_txt {
    margin-bottom: 10px !important;
    line-height: normal !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 815.98px) {
  .about-affiliate .common_heading {
    font-size: 1.4rem !important;
  }

  .about-affiliate .common_txt {
    font-size: 0.7rem !important;
  }

  .eligibility ul li {
    line-height: normal;
  }
}

@media (min-width: 768px) {
  .badge-top {
    top: -15px !important;
    font-size: 0.85rem;
  }
 
  .card-content {
    max-width: 100%;
  }

  .loan-wrapper > div,
  .loan-wrapper > div:hover {
    flex: 1 1 47%;
    transform: none;
  }

  .card-illustration {
    width: 120px;
    opacity: 0.6;
  }


  .summary-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: #cfd6df;
  }
 

  
}

@media (max-width: 768.98px) {
  .affiliate-brand .apart-carousel .owl-nav button.owl-prev {
    left: -1% !important;
  }

    .application-status {
    display: block !important;
  }

  .repay-wrapper .card-title {
    font-size: 42px !important;
  }
  
}

@media (max-width: 714px){
  .apply-step-line{
    display: none;
  }
}

@media (max-width: 769px) {
  .slider-dots {
    display: flex;
  }
  .img-steps {
    width: 60%;
  }
  .custom-service-wrapper::before {
    display: none;
  }
  .step-items {
    margin-bottom: 25px;
  }

  .custom-plane {
    display: none;
  }
  .margin-top {
    margin-top: 3rem !important;
  }

  .line-1 {
    display: none;
  }
  .line-3 {
    display: none;
  }

  .custom-app-coin {
    right: 600px;
    position: relative;
    top: 84px;
  }
  /* Optional: control sizes */
  .card-photo2,
  .card-blue {
    width: 90%;
  }
}

@media (max-width: 767.98px) {
  .progress-line,
  .progress-line-active {
    display: none;
  }

  .loan-wrapper > div,
  .loan-wrapper > div:hover {
    flex: 1 1 49%;
    transform: none;
  }

  .step-col {
    margin-bottom: 25px;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }

  .status-wrapper {
    background-image: none !important;
    background-color: #ffffff;
  }

 

  .thank-you-wrapper {
    background-color: #fffaf4 !important;
  }

  .repaymentBanner {
    width: 50%;
  }

  .repayment-process .step-number {
    top: 6px;
  }

  .login-wrapper {
    background-image: none;
  }

  .about-affiliate-img {
    width: 40%;
  }

  .service-card,
  .service-card .card {
    width: 180px;
  }

  .diamond {
    width: 350px;
    height: 350px;
  }

  .stage {
    width: 420px;
    height: 360px;
  }

  .slideImg {
    width: 200px;
  }

  .slide-card .card-text {
    font-size: 12px;
  }

  .footer .col-lg-4.col-md-4 {
    max-width: 50%;
  }

  .copy-box {
    font-size: 12px;
  }

  .gap-4.bottomFooter {
    gap: 8px !important;
  }

  .supportSec .d-grid {
    display: block !important;
  }

  .homeRightimg {
    width: 70%;
  }

  .custombtn img {
    width: 120px;
  }

  .position-absolute.start-0.bounce2 {
    left: 5% !important;
  }

  .bounce2 img {
    width: 150px;
  }

  .hero-content h1 {
    font-size: 35px !important;
  }

  .footer .col-lg-8.col-md-12 .col-lg-3.my-2.col-md-6 {
    width: 50%;
  }

  .btn.btn-primary .accept-offer {
    padding: 6px 9px;
    font-size: 13px !important;
    border-radius: 7px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
    font-weight: 500;
    border-color: var(--primary-color);
  }

  .btn-block {
    margin-left: 4px !important;
  }

  .container-fluid,
  .container {
    width: 100%;
    max-width: 100%;
  }
}

/* mobile */

@media (max-width: 600px) {
  .affiliate-brand .apart-carousel .owl-nav button.owl-next {
    right: -5% !important;
  }

  .custom-app-coin {
    right: 523px;
    position: relative;
    top: 84px;
  }
}

@media (min-width: 576px) {
  #exampleModal .modal-dialog {
    max-width: 300px !important;
  }
  .custom-captcha-input {
    flex-basis: 100%;
  }
  .process-line {
    left: 18px;
    height: 85% !important;
  }
  .badge-top {
    top: -12px !important;
    font-size: 0.65rem;
  }

  .repay-wrapper {
    padding: 40px 0px !important;
  }

  .repay-wrapper .card-title {
    font-size: 35px !important;
    margin-bottom: 5px;
  }

  .stage {
    height: 337px;
  }

  .slideImg {
    width: 170px;
  }

  .slide-card .card-text {
    font-size: 0.9rem;
  }

  .wh-70 {
    width: 50px;
    height: 50px;
  }

  .process-badge {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .loan-summary {
    padding: 20px;
  }

  .btn-apply {
    /* width: 100%; */
    text-align: center;
  }
  .step-label {
      font-size: 10px;
      line-height: 1.2;
    }

    .step-circless {
      width: 40px;
      height: 40px;
      font-size: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .progress-line,
    .progress-line-active {
      top: 18px;
    }

    .status-icon {
      width: 55px;
      height: 55px;
      font-size: 22px;
    }
}
@media (min-width: 445px) {

  .process-line {
    left: 18px;
    height: 83% ;
  }


}



@media (max-width: 575.98px) {
  .affiliate-brand .apart-carousel .owl-nav button.owl-next,
  .affiliate-brand .apart-carousel .owl-nav button.owl-prev {
    position: inherit !important;
    transform: translate(0px, 0px) !important;
  }

  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }

  .repay-wrapper p {
    font-size: 12px;
    letter-spacing: 0;
  }

  .repay-wrapper .form-label {
    font-size: 13px !important;
    letter-spacing: 0px !important;
  }

  .repaymentBanner {
    width: 85%;
  }

  .about-affiliate-img {
    width: 50%;
  }

  .res-w100 {
    width: 100% !important;
  }

  .work-img {
    width: 60%;
  }
}

@media (max-width: 425.98px) {
    .repeat h2 {
        font-size: 30px !important;
    }

  .flex-block {
    display: block !important;
  }

  .process-line {
    left: 18px;
    height: 83% ;
  }
   .step-wrapper{
    gap: 0 !important;
  }

  .step-item{
    flex: 1;
  }

  .step-icon{
    width: 46px;
    height: 46px;
    margin: auto;
  }

  .step-icon i{
    font-size: 16px !important;
  }

  .step-line{
    top: 22px;
    left: 40px;
    width: calc(100% - 80px) !important;
  }

  .step-content h2{
    font-size: 28px;
  }

  .step-content p{
    font-size: 16px !important;
  }

  .step-image{
    max-width: 220px;
  }

  .loan-recommended-badge {
    font-size: 9px;
  }

  .card-white {
    display: none;
  }

  .card-red {
    display: none;
  }

  .card-photo2 {
    top: 207px;
    left: 40px;
  }

  .custom-app-coin {
    right: 400px;
    position: relative;
    top: 50px;
  }

  .timer {
    width: 150px;
    height: 150px;
  }
  .navbar-toggler {
    padding: 0;
  }

  .navbar-collapse {
    top: 59px;
  }
  .success-img {
    width: 200px;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }

  .timeout-bg {
    background-image: none !important;
  }

  .selfie-box {
    width: 100%;
    height: 250px;
  }

  .employment-wrapper .btn-group .btn {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  .slider-banner {
    height: 100vh;
  }

  .login-wrapper {
    padding: 20px 0px;
  }

  .work-img {
    width: 80%;
  }

  .otp-input .form-control {
    width: 55px;
    height: 55px;
  }

  .logo-img {
    /* height: 24px; */
    width: 86%;
  }

  .step-number-count {
    width: 50px;
    height: 50px;
    border: 5px solid var(--primary-color);
    outline-offset: 10px;
    font-size: 28px;
  }

  .steps-wrapper::before {
    left: 25px;
  }

  .step {
    gap: 30px;
  }

  .otp-wrapper {
    display: block;
  }

  .w-res-100 {
    width: 100%;
  }

  .top_banner h2 {
    font-size: 1.7rem;
  }

  .products-wrapper h2 {
    font-size: 30px;
  }

  .diamond {
    width: 260px;
    height: 260px;
  }

  .stage {
    height: 290px;
    width: 290px;
  }

  .slideImg {
    width: 150px;
  }

  .slide-card .card-text {
    font-size: 0.8rem;
  }

  .common-heading {
    font-size: 25px;
  }

  .slider-section {
    min-height: 60vh;
  }

  .slide-card .small p {
    font-size: 0.6rem;
    line-height: normal;
  }

  .file-preview {
    padding: 6px;
  }
}

@media (max-width: 375.98px) {

  
  .custom-form .input-group .form-control,
  .custom-form .input-group .input-group-text {
    padding: 10px !important;
    font-size: 14px;
  }

  .custom-app-coin {
    right: 300px;
    position: relative;
    top: 31px;
  }

  .journey-heading {
    font-size: 18px !important;
  }

  .journey-para {
    font-size: 13px !important;
  }

  .employment-wrapper .btn-group {
    flex-direction: column !important;
    display: flex !important;
  }

  .employment-wrapper .btn-group .btn {
    width: 100% !important;
    text-align: center;
  }

  .employment-wrapper .btn-group .btn-check {
    width: 100%;
  }

  .step-title {
    font-size: 13px;
  }

  .step-content p {
    font-size: 11px;
  }

  .step {
    gap: 20px;
    margin-bottom: 20px;
  }

  .about-affiliate-img {
    width: 65%;
  }

  .fs-15 {
    font-size: 15px;
  }

  .steps .card-title {
    font-size: 14px;
  }

  

  .custom-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    height: 100%;
  }
}

@media (max-width: 350.98px) {
  .bottom-card-wrapper {
    display: block !important;
  }

  .bottom-card {
    width: 100%;
  }

  .diamond {
    width: 230px;
    height: 230px;
  }

  .slide-card .card-text {
    font-size: 0.7rem;
  }

  /* .stage {
        height: 190px;
        width: 230px;
    } */

  .contact-card .gap-3 {
    gap: 8px !important;
  }

  .contact-card .card-body {
    padding: 10px;
  }
  h1 {
    font-size: 32px !important;
  }
  h2 {
    font-size: 28px !important;
  }
  h3 {
    font-size: 24px !important;
  }
  h4 {
    font-size: 20px !important;
  }
  h5 {
    font-size: 18px !important;
  }
  h6 {
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  p {
    font-size: 12px;
  }

    .btn.btn-primary {
    font-size: 12px;
    padding: 8px 11px !important;
  }

  .accept-offer{
    padding: 8px 11px !important;
    font-size: 12px;
  }

  
}

@media (max-width: 360.98px) {
       .status-wrapper, .journey-wrapper {
        margin-top: 56px;
    }
}


@media (max-width: 320px) {
  .btn.btn-primary .accept-offer {
    font-size: 12px;
    padding: 8px 11px !important;
  }
}