@font-face {
    font-family: 'Inter';
    src: url('../fonts/lato-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'regular-blod';
    src: url('../fonts/lato-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'inter-bold';
    src: url('../fonts/Inter_ExtraBold.ttf') format('truetype');
}
.interbold {
    font-family: 'inter-bold' !important;
}

body {
    font-family: 'Inter' !important;
}
.step-navbar {
    display: flex;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    background-color: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    text-align: center;
    justify-content: space-between;
}

.step-tab {
    flex: 1;
    min-width: 120px; /* Prevents too narrow buttons */
    padding: 12px 0;
    color: #000;
    background-color: #f5f5f5;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .step-tab.active {
        background-color: #e49019; /* orange */
        color: white;
    }

/* Responsive behavior for small screens */
@media (max-width: 576px) {
    .step-navbar {
        flex-direction: column;
    }

    .step-tab {
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

        .step-tab:last-child {
            border-bottom: none;
        }
}


.section-heading {
    color: #333333; /* blue */
    font-weight: 800;
    font-size: 31.25px;
}
dotimage img {
    width: 100% !important; /* force responsive scaling */
    max-width: 177px  !important; /* upper limit */
    height: auto !important; /* keep ratio */
    position: relative;
}

/* Hide on mobile */
@media (max-width: 764px)  {
    .vector-img {
        display: none !important;
    }

    .dotimage img {
        display: none !important;
    }

    .black-dot {
        display: none !important;
    }
}

/* Medium screens (tablet/laptop) */
@media (min-width: 767px) and (max-width: 768px) {
    .dotimage img {
        max-width: 177px !important;
        margin-top: 20px !important;
    }
}
@media (min-width: 768px) and (max-width: 800px) {

    .dotimage img {
        max-width: 151px !important;
        margin-top: 20px !important;
    }
    .black-dot img {
        max-width: 99px !important;
    }

}
@media (min-width: 800px) and (max-width: 850px) {

    .dotimage img {
        max-width: 163px !important;
        margin-top: 20px !important;
    }
    .black-dot img {
        max-width: 99px !important;
    }
}
@media (min-width: 850px) and (max-width: 900px) {

    .dotimage img {
        max-width: 196px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 99px !important;
    }
}
@media (min-width: 900px) and (max-width: 950px) {

    .dotimage img {
        max-width: 210px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 99px !important;
    }
}
@media (min-width: 950px) and (max-width: 1000px) {

    .dotimage img {
        max-width: 221px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 99px !important;
    }
}
@media (min-width: 1000px) and (max-width: 1050px) {

    .dotimage img {
        max-width: 178px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 99px !important;
    }
    .card-fields {
        padding-left: 22px !important;
        padding-right: 0px !important;
        margin-left: 48px;
    }
}
@media (min-width: 1050px) and (max-width: 1100px) {

    .dotimage img {
        max-width: 206px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 99px !important;
    }
    .card-fields {
        padding-left: 22px !important;
        padding-right: 0px !important;
        margin-left: 48px;
    }
}
@media (min-width: 1100px) and (max-width: 1150px) {

    .dotimage img {
        max-width: 228px !important;
        margin-top: 20px !important;
    }
    .card-fields {
        padding-left: 22px !important;
        padding-right: 0px !important;
        margin-left: 48px;
    }
    .black-dot img {
        max-width: 140px !important;
    }
}
@media (min-width: 1150px) and (max-width: 1200px) {

    .dotimage img {
        max-width: 254px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 141px !important;
    }
}
@media (min-width: 1200px) and (max-width: 1250px) {

    .dotimage img {
        max-width: 221px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 141px !important;
    }
}
@media (min-width: 1250px) and (max-width: 1300px) {

    .dotimage img {
        max-width: 252px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 140px !important;
    }
}
@media (min-width: 1250px) and (max-width: 1300px) {

    .dotimage img {
        max-width: 230px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 140px !important;
    }
}
@media (min-width: 1300px) and (max-width: 1350px) {

    .dotimage img {
        max-width: 273px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 140px !important;
    }
}
@media (min-width: 1350px) and (max-width: 1400px) {

    .dotimage img {
        max-width: 289px !important;
        margin-top: 20px !important;
    }

    .black-dot img {
        max-width: 140px !important;
    }
}
@media (min-width: 1400px) and (max-width: 1500px) {

    .dotimage img {
        max-width: 248px !important;
        margin-top: 20px !important;
    }


    .black-dot img {
        max-width: 140px !important;
    }
}

@media (min-width: 759) and (max-width: 790px) {
    .dotimage1 img {
    display:none!important
    }
}
    @media (min-width: 761px) and (max-width: 767px) {
        .vector-img {
            display: none !important;
        }

        .dotimage img {
            display: none !important;
        }

        .black-dot {
            display: none !important;
        }
    }

    @media (max-width: 387px) {
        .clender-img img {
            margin-right: 14px !important;
        }

        .clender-img label {
            font-size: 12px !important;
        }
    }


    @media(min-width:992px) {
        .jp-card {
            min-height: 225px !important;
        }

        .card-content {
            display: flex;
            justify-content: start
        }
    }

    .font-weight-bold {
        font-weight: 700;
        font-size: 14.38px;
        color: #484F56;
    }

    .font-weight-semi-bold {
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .captcha {
            overflow-x: scroll
        }
    }

    .btn {
        min-width: 150px !important;
    }

    #plainBtn {
        color: #000;
        background-color: #fff;
        border: 1px solid black;
    }

    .jp-card-invalid {
        border: 1px solid red !important;
    }

    .input-validation-error {
        border: 1px solid red !important;
    }

    @media (max-width: 991.98px) {
        .footer-container {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer-info,
        .footer-copy {
            flex: unset;
            margin-top: 25px;
        }
    }


    @media (min-width: 767px) and (max-width: 991.98px) {
        #rightBtn {
            margin-left: 50px;
        }
    }



    @media (max-width: 515px) {
        .response-status {
            padding-left: 28px;
        }

        .heading-line {
            display: none
        }
    }

    @media (max-width: 576px) {
        #cvv-container {
            padding-left: 25px;
            padding-right: 25px;
        }
    }

    @media (max-width: 767px) {
        .section-heading {
            font-size: 1.3rem;
        }

        #cardDetails {
            padding-top: 0px !important;
        }

        .card-fields {
            margin-top: 20px !important;
        }
    }

    @media (max-width: 610px) {
        .card-fields {
            padding-left: 40px;
            padding-right: 30px;
        }
    }

    @media (max-width: 1400px) {
        .card-fields {
            padding-left: 48px !important;
            padding-right: 0px !important;
            margin-left: 37px;
        }
    }

    .card-info {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    @media (max-width: 550px) {
        .responsive-padding {
            padding-left: 3rem !important;
            padding-right: 3rem !important;
        }
    }

    @media (min-width: 276) and (max-width: 360px) {
        .jp-card .jp-card-front, .jp-card .jp-card-back {
            width: 91% !important
        }
    }

    .bold-input {
        font-weight: bold;
    }

        .bold-input::placeholder {
            font-weight: normal;
            color: #999;
        }


    .blod-text {
        font-family: 'regular-blod' !important;
        font-weight:700;
        font-size:15px;
    }
.font-lite {
    overflow-wrap: break-word !important;
}