.signup_page .shop-btn {
    font-size: 22px;
    background-color: transparent;
    border: none;
    font-weight: 500;
    display: flex;
    gap: 0px;
    align-items: center;
}

.signup_page .navbar-section {
    background-color: var(--white-100);
}

.signup_page .shop {
    background-color: var(--white-100);
}

.signup_page .shop-btn i {
    color: var(--black-100);
    font-size: 24px;
}

.signup_page .menu-item {
    background-color: var(--white-100);
}

.signup_page .menu-item-phone {
    background-color: var(--white-100);
}

@media screen and (max-width: 1080px) {
    .signup_page .shoping-cart {
        display: inline-block;
    }

    .signup_page .right-items {
        justify-content: flex-start;
        width: auto;
    }

    .signup_page .shop-btn {
        display: none;
    }
}

/* todo ============= HERO-IMG-SECTION ============= */

.hero-img-section {
    width: 100%;
    margin-top: 40px;
}

    .hero-img-section img {
        width: 100%;
    }

/* todo ============= TITLE-SECTION ============= */

.title-section {
    padding: 60px 0px;
}

    .title-section h1 {
        font-size: 60px;
        font-weight: bold;
        line-height: 1;
        color: var(--black-100);
    }

    .title-section p {
        max-width: 45%;
        font-size: 20px;
        color: var(--text-gray);
    }

    .title-section .title-desc {
        color: var(--gray-100);
        width: 60%;
        font-size: 18px;
    }

    .title-section .title-desc-green {
        width: 75%;
        color: var(--green-color);
        font-size: 18px;
        font-weight: 450;
    }

    .title-section .title-desc li {
        list-style: none;
    }

@media screen and (max-width: 1200px) {
    .title-section h1 {
        font-size: 45px;
    }

    .title-section p {
        max-width: 50%;
    }
}

@media screen and (max-width: 991px) {
    .title-section h1 {
        font-size: 36px;
    }

    .title-section p {
        max-width: 80%;
    }

    .title-section .title-desc,
    .title-section .title-desc-green {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .title-section h1 {
        font-size: 24px;
    }

    .title-section p {
        max-width: 100%;
        font-size: 16px;
    }

    .signup-btn {
        padding: 8px 25px;
        font-size: 16px;
    }

    .title-section .title-desc,
    .title-section .title-desc-green {
        width: 100%;
        font-size: 16px;
    }
}

/* todo ============= CARD-SECTION ============= */

.card-section {
    padding: 60px 0px;
}

.all-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

    .all-cards .card {
        background-color: var(--black-100);
        padding: 20px 40px;
        border-radius: 20px;
        overflow: hidden;
    }

        .all-cards .card h1 {
            font-size: 38px;
            font-weight: bold;
            color: var(--white-100);
            margin-top: 50px;
        }

@media screen and (max-width: 1200px) {
    .all-cards .card {
        background-color: var(--black-100);
        padding: 20px 20px;
    }

        .all-cards .card h1 {
            font-size: 28px;
            margin-top: 30px;
        }

        .all-cards .card .img {
            width: 50px;
            height: 50px;
        }

            .all-cards .card .img img {
                height: 100%;
                width: 100%;
                object-fit: contain;
            }
}

@media screen and (max-width: 991px) {
    .all-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media screen and (max-width: 576px) {
    .card-section {
        padding: 30px 0px;
    }

    .all-cards {
        grid-template-columns: 1fr;
    }

        .all-cards .card h1 {
            font-size: 24px;
        }
}

/* todo ============= SIGNUP-INPUT-SECTION ============= */

.signup-input-section {
    padding: 40px 20px;
    position: relative;
}

    .signup-input-section .container .signup-input-section h2 {
        font-size: 40px;
        font-weight: bold;
        color: var(--black-100);
    }

    .signup-input-section .country span {
        font-size: 20px;
        color: var(--gray-60);
    }

    .signup-input-section .country .img {
        height: 35px;
        width: 35px;
        overflow: hidden;
        border-radius: 50%;
    }

        .signup-input-section .country .img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    .signup-input-section p {
        font-size: 20px;
        color: var(--green-color);
        cursor: pointer;
    }

/* ? Input-section */

.input-section {
    max-width: 100%;
}

    .input-section form .input-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 25px;
    }

        .input-section form .input-wrapper input {
            padding: 12px;
            border: 1px solid var(--gray-40);
            border-radius: 8px;
            transition: 0.2s ease;
            outline: 1px solid transparent;
            font-size: 18px;
            width: 100%;
        }

    .input-section form input::placeholder {
        color: var(--text-gray);
    }

    .input-section form input:focus {
        border-color: var(--green-color);
        transition: 0.2s ease;
        outline: 1px solid var(--green-color);
    }

.radio-input {
    height: 15px;
    width: 15px;
    outline-offset: 4px;
    outline: 2px solid var(--gray-40);
    background-color: #dadada;
    border-radius: 50%;
    cursor: pointer;
}

.agree-title label {
    font-size: 18px;
    color: var(--gray-100);
    cursor: pointer;
}

.activeLabelInput {
    background-color: var(--green-color) !important;
    transition: 0.2s ease;
    outline-color: var(--green-color) !important;
}

.input-section .btn-wrap span {
    font-size: 20px;
    color: var(--gray-40);
    margin-left: 8px;
}

.input-section .btn-wrap a {
    text-decoration: none;
    color: var(--green-color);
    font-size: 20px;
    font-weight: 400;
}

#selectMarket {
    display: inline-block;
}

#selectMarketModal {
    position: fixed;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    background-color: var(--white-100);
    border-radius: 15px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    padding: 20px;
    display: none;
    z-index: 9999;
    max-width: 1000px;
    max-height: 700px;
}

.selectMarketModalTwo {
    width: 50% !important;
}

.close-modal-btn {
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-100);
    right: 20px;
    top: 20px;
    cursor: pointer;
    z-index: 55;
}

#selectMarketModal .header h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--black-100);
}

#selectMarketModal .close-btn {
    position: absolute;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-gray);
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.countrylist-section {
    max-height: 85%;
    overflow-y: auto;
    margin-top: 30px;
}

    .countrylist-section input {
        width: 100%;
        border: 1px solid var(--gray-60);
        border-radius: 8px;
        padding: 10px;
        font-size: 18px;
        outline: none;
    }

        .countrylist-section input:focus {
            border-color: var(--green-color);
        }

.language-selector {
    margin-top: 20px;
    border-radius: 6px;
}

    .language-selector h3 {
        font-size: 22px;
        font-weight: 500;
        color: var(--black-100);
        border-bottom: 1px solid var(--gray-40);
        padding-bottom: 8px;
        margin-top: 8px;
    }

.countries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 10px;
    padding: 10px;
    background-color: var(--bg-gray);
}

    .countries .country {
        font-size: 18px;
        color: #0956b7;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        cursor: pointer;
    }

        .countries .country .flag {
            width: 25px;
            height: 22px;
            overflow: hidden;
        }

            .countries .country .flag img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

.selectMarketModalTwo {
    position: fixed !important;
    top: 350px !important;
    height: 85% !important;
}

@media screen and (max-width: 1200px) {
    #selectMarketModal {
        width: 60% !important;
    }
}

@media screen and (max-width: 991px) {
    .input-section form .input-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px 25px;
    }

    .countries {
        grid-template-columns: 1fr;
    }

        .countries .country {
            font-size: 15px;
        }

    #selectMarketModal .header h2 {
        font-size: 24px;
    }

    #selectMarketModal .close-btn {
        font-size: 20px;
        right: 15px;
        top: 15px;
    }

    .countrylist-section input {
        padding: 6px 10px;
        border-radius: 4px;
    }

    .language-selector h3 {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .signup-input-section {
        padding: 40px 0px;
    }

        .signup-input-section h2 {
            font-size: 28px;
        }

        .signup-input-section .country span {
            font-size: 18px;
        }

        .signup-input-section .country .img {
            height: 30px;
            width: 30px;
        }

        .signup-input-section p {
            font-size: 18px;
        }

    .input-section form .input-wrapper {
        gap: 20px;
    }

        .input-section form .input-wrapper input {
            font-size: 16px;
        }

    .input-section .agree-title label {
        font-size: 16px;
    }

    .input-section .radio-input {
        height: 12px;
        width: 12px;
    }

    .input-section .btn-wrap span {
        font-size: 17px;
    }

    .input-section .btn-wrap a {
        font-size: 18px;
    }

    .selectMarketModalTwo {
        width: 70% !important;
    }
}

@media screen and (max-width: 576px) {
    .signup-input-section {
        padding: 40px 0px;
    }

    .input-section form .input-wrapper {
        grid-template-columns: 1fr;
    }

        .input-section form .input-wrapper input {
            font-size: 16px;
        }

    .signup-input-section h2 {
        font-size: 24px;
    }

    .signup-input-section .country span {
        font-size: 16px;
    }

    .signup-input-section .country .img {
        height: 30px;
        width: 30px;
    }

    .signup-input-section p {
        font-size: 16px;
    }

    .input-section .agree-title label {
        width: calc(100% - 15px);
        font-size: 14px;
    }

    .input-section .btn-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

        .input-section .btn-wrap .signup-btn {
            margin-top: 20px !important;
            width: 100%;
        }

        .input-section .btn-wrap span {
            font-size: 16px;
        }

        .input-section .btn-wrap a {
            font-size: 17px;
        }

    #selectMarketModal {
        width: 90% !important;
    }


        #selectMarketModal .header h2 {
            font-size: 18px;
        }

    .countries .country {
        font-size: 14px;
    }

    .countrylist-section input {
        font-size: 14px;
    }

    .selectMarketModalTwo {
        width: 90% !important;
    }
}

/*!~~~~~~~~~~~~ signup_page__inf ~~~~~~~~~~~~~~ */

.signup_page__inf .input-section {
    width: 70%;
}

.signup_page__inf .signup-input-section {
    padding-top: 0;
}

.selectMarketModalTwo .countrylist-section {
    height: 90%;
}

.input-section .single-input,
.input-section .address-box {
    grid-column: 1 / span 1;
}

.input-section .add-address {
    color: var(--text-gray);
    font-size: 18px;
    cursor: pointer;
}

    .input-section .add-address span {
        color: var(--green-color);
        font-weight: 600;
    }

.input-section .zone-details-container {
    width: 70%;
    grid-column: 1 / span 2;
}

/* ? ~~~~~~ Only for product_cart Page ~~~~~~~~ */
.product_checkout .input-section .zone-details-container {
    width: 100%;
}

.product_checkout .input-section .address-box {
    grid-column: 1 / span 2;
}

/* ? ~~~~~~~~~~~~~~~~~~ END HERE ~~~~~~~~~~~~ */

.input-section .zone-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

select {
    padding: 12px;
    border: 1px solid var(--gray-40);
    border-radius: 8px;
    transition: 0.2s ease;
    outline: 1px solid transparent;
    font-size: 18px;
    width: 100%;
    appearance: none;
    background-color: transparent;
    position: relative;
    background-image: url(/assets/down-Icon.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    color: var(--text-gray);
}

.signup_page__inf .agree-title {
    grid-column: 1 / span 2;
}

.signup_page__inf .security {
    grid-column: 1 / span 2;
    width: 80%;
}

    .signup_page__inf .security h5 {
        color: var(--text-gray);
    }

    .signup_page__inf .security .input-bullet {
        height: 10px;
        width: 10px;
        outline-offset: 4px;
        outline: 2px solid var(--gray-40);
        background-color: #dadada;
        border-radius: 50%;
        cursor: pointer;
    }

    .signup_page__inf .security label {
        font-size: 18px;
        color: var(--text-gray);
        cursor: pointer;
        width: calc(100% - 20px);
        font-weight: 400;
    }

        .signup_page__inf .security label a {
            text-decoration: none;
            color: var(--green-color);
        }

.activeLabelInput {
    background-color: var(--green-color) !important;
    transition: 0.2s ease;
    outline-color: var(--green-color) !important;
}

@media screen and (max-width: 991px) {
    /*!~~~~~~~~~~~~ signup_page__inf ~~~~~~~~~~~~~~ */

    .signup_page__inf .input-section {
        width: 100%;
    }

        .signup_page__inf .input-section .input-wrapper {
            grid-template-columns: 1fr 1fr !important;
        }

    .signup_page__inf .security {
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .exs-acc {
        font-size: 16px;
    }

    .signup_page__inf .input-section .input-wrapper {
        grid-template-columns: 1fr !important;
    }

    .signup_page__inf .security {
        width: 100%;
    }

    .signup_page__inf .input-section input,
    .signup_page__inf .input-section .intl-tel-input {
        grid-column: 1 / span 2;
    }

    .signup_page__inf .input-section .single-input,
    .signup_page__inf .input-section .address-box {
        grid-column: 1 / span 2;
    }

    .signup_page__inf .input-section .zone-details input,
    .signup_page__inf .input-section .zone-details select {
        grid-column: 1 / span 2;
        font-size: 16px;
    }

    .signup_page__inf .input-section .zone-details-container {
        width: 100%;
    }

    .input-section .add-address {
        font-size: 16px;
    }

    .signup_page__inf .security h5 {
        font-size: 18px;
        font-weight: 400;
    }

    .signup_page__inf .security label {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    .signup_page__inf .security label {
        font-size: 14px;
    }

    .selectMarketModalTwo,
    .selectMarketModal {
        position: fixed !important;
        height: 85% !important;
        width: 90% !important;
        top: 50% !important;
    }

        .selectMarketModalTwo .countrylist-section {
            height: 100%;
        }

    select {
        background-size: 12px;
        font-size: 16px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~~~~ signup_page_iba ~~~~~~~~~~~~~~~~~~~~~~ */

.signup_page_iba {
}

    .signup_page_iba .id-box .input-wrapper {
        height: 40px;
        font-size: 18px;
        border-radius: 6px;
        outline: none;
        border: 1px solid var(--gray-60);
        width: 150px;
        overflow: hidden;
    }

        .signup_page_iba .id-box .input-wrapper:focus-within {
            border-color: var(--green-color);
        }

        .signup_page_iba .id-box .input-wrapper input {
            width: 100%;
            height: 100%;
            outline: none;
            border: none;
            padding: 8px;
        }

    .signup_page_iba .id-box span {
        font-size: 18px;
        color: var(--gray-100);
    }

    .signup_page_iba .id-box .bc .input-wrapper {
        position: relative;
        width: 80px;
        display: inline-block;
    }

        .signup_page_iba .id-box .bc .input-wrapper input {
            width: calc(100% - 28px);
            padding-right: 2px;
        }

        .signup_page_iba .id-box .bc .input-wrapper i {
            font-size: 26px;
            color: var(--black-100);
            width: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .signup_page_iba .id-box .green-btn {
        padding: 6px 20px;
        font-size: 16px;
    }

@media screen and (max-width: 400px) {
    .signup_page_iba .id-box .input-wrapper {
        font-size: 16px;
        width: 140px;
    }

    .signup_page_iba .id-box span {
        font-size: 16px;
    }

    .signup_page_iba .id-box .bc .input-wrapper {
        width: 75px;
    }

        .signup_page_iba .id-box .bc .input-wrapper i {
            font-size: 24px;
        }

    .signup_page_iba .id-box .green-btn {
        padding: 5px 15px;
        font-size: 14px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~~ sign-up-IBA-shop ~~~~~~~~~~~~~~~~~~~~~ */

.sign-up-IBA-shop .marking-slider {
    position: relative;
}

.stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 80px;
}

.step {
    text-align: center;
    flex: 1;
    position: relative;
}

    .step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -50%;
        width: 100%;
        height: 2px;
        background-color: #c7c7c7;
        z-index: -1;
    }

    .step .circle {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #c7c7c7;
        margin: 0 auto 10px;
        position: relative;
        top: -15px;
        border: 5px solid var(--white-100);
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));
    }

    .step.active .circle {
        background-color: var(--green-color);
    }

    .step span {
        font-size: 20px;
        color: var(--gray-40);
        font-weight: 400;
        position: relative;
        top: -50px;
        display: inline-block;
        height: 40px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .step.active span {
        color: var(--green-color);
    }

.sign-up-IBA-shop .title-section {
    padding: 20px 0px;
}

    .sign-up-IBA-shop .title-section .container,
    .sign-up-IBA-shop .signup-input-section .container {
        width: 70%;
        margin: 0 auto;
    }

.sign-up-IBA-shop .signup-input-section {
    position: relative;
}

.lb-in label {
    font-size: 18px;
    color: var(--gray-100);
}

.lb-in input,
.lb-in select {
    height: 40px;
    width: 300px;
    border: 1px solid var(--gray-40);
    border-radius: 6px;
    color: var(--gray-100);
    font-size: 18px;
    padding: 0px 8px;
    outline: none;
}

.input-item-pass input {
    width: 200px;
}

.tt-txt {
    font-size: 18px;
    font-weight: 450;
    color: var(--green-color);
}

.tt-txt-gr {
    color: var(--gray-100);
    font-weight: 400;
    width: 70%;
    font-size: 16px;
}

.input-name {
    width: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}

    .input-name input {
        width: auto;
    }

.input-gender {
    width: 50%;
    display: grid;
    grid-template-columns: auto auto;
}

    .input-gender select {
        width: 140px;
    }

    .input-gender img {
        cursor: pointer;
        width: 25px;
        object-fit: contain;
    }

.pr-pl {
    font-size: 18px;
    color: var(--gray-100);
}

    .pr-pl a {
        text-decoration: none;
        color: var(--green-color);
    }

.date-im input {
    width: calc(100% - 50px);
    background-color: transparent;
    appearance: none;
}

@media screen and (max-width: 991px) {
    .sign-up-IBA-shop .title-section .container,
    .sign-up-IBA-shop .signup-input-section .container {
        width: 100%;
    }

    .tt-txt-gr {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .title-section .title-desc,
    .title-section .title-desc-green,
    .sign-up-IBA-shop input,
    .sign-up-IBA-shop label,
    .sign-up-IBA-shop select,
    .tt-txt {
        font-size: 16px;
    }

    .step span {
        font-size: 14px;
    }

    .tt-txt-gr {
        font-size: 13px;
    }

    .sign-up-IBA-shop input {
        width: 100%;
    }

    .lb-in {
        width: 100%;
    }

    .sign-up-IBA-shop .intl-tel-input {
        width: 100%;
    }

    .input-name {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .input-gender {
        width: 100%;
        display: grid;
        gap: 15px;
        grid-template-columns: auto;
    }

    .lb-in input,
    .lb-in select {
        width: 100%;
    }

    .pr-pl {
        font-size: 16px;
    }

    .step .circle {
        width: 24px;
        height: 24px;
        border: 3px solid var(--white-100);
        top: -14px;
    }

    .step span {
        top: -30px;
    }
}

@media screen and (max-width: 576px) {
    .step span {
        display: none;
    }

    .stepper {
        margin-top: 50px;
    }

    .step .circle {
        top: 5px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~~ VERIFACTION-PAGE ~~~~~~~~~~~~~~~~~~~ */

.verifaction-page .title-section {
    padding: 20px 0px;
}

    .verifaction-page .title-section .container {
        width: 60%;
    }

    .verifaction-page .title-section .title-desc {
        width: 80%;
    }

.verifaction-page .verify-desc {
    font-weight: 600;
    cursor: pointer;
    display: flex;
    gap: 5px;
    align-items: center;
    font-style: italic;
}

    .verifaction-page .verify-desc .checkmark {
        font-size: 26px;
        font-weight: 600;
        color: var(--green-color);
        display: none;
        transition: 0.5s ease;
    }

.disabled {
    color: var(--gray-100) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
    transition: 0.5s ease;
}

.disabledBtn {
    background-color: var(--gray-100) !important;
    pointer-events: none !important;
    opacity: 0.5;
}

.update-text {
    display: none;
}

.verifaction-modal .modal-body {
    padding: 100px 50px;
}

.md-head-tl {
    font-size: 50px;
    font-weight: 700;
    color: var(--black-100);
}

.md-dsc {
    font-size: 18px;
    color: var(--gray-100);
}

.md-email {
    font-size: 18px;
    color: var(--gray-100);
}

.changeEmailAddress,
.changePhone {
    text-decoration: none;
    color: var(--green-color);
    font-weight: 450;
    overflow: hidden;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .changeEmailAddress .arw i,
    .changePhone .arw i {
        font-size: 24px;
        display: inline-block;
    }

.md-btn-sec {
    width: 230px;
    text-align: center;
}

    .md-btn-sec button {
        font-size: 16px;
        width: 230px;
    }

    .md-btn-sec .upd-btn {
        background-color: var(--white-100);
        color: var(--black-100);
        border-color: var(--gray-60);
    }

    .md-btn-sec a {
        text-decoration: none;
        color: var(--green-color);
        font-size: 18px;
    }

.verifaction-modal input {
    height: 42px;
    outline: none;
    border: 1px solid var(--gray-60);
    border-radius: 6px;
    font-size: 18px;
}

.verifaction-modal .in-cd input {
    width: 150px;
    padding: 8px;
}

.verifaction-modal .input-bullet {
    height: 10px;
    width: 10px;
    outline-offset: 4px;
    outline: 2px solid var(--gray-40);
    background-color: #dadada;
    border-radius: 50%;
    cursor: pointer;
}

.verifaction-modal label {
    font-size: 18px;
    color: var(--gray-100);
    cursor: pointer;
    width: calc(100% - 20px);
    font-weight: 400;
}

.alert-txt {
    font-size: 18px;
}

/* ? CHANGE EMAIL ADDRESS */

.changeItemModal {
    position: absolute;
    left: 0;
    z-index: 99;
    background-color: var(--white-100);
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    padding: 40px;
    border-radius: 12px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    display: none;
    animation: fadeAnime 0.3s ease;
}

@keyframes fadeAnime {
    0% {
        opacity: 0;
    }
}

.close-modal {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 22px;
    font-weight: 600;
    color: var(--gray-100);
    cursor: pointer;
    z-index: 999;
}

.changeItemModal input {
    padding: 12px;
}

.changeItemModal .input-section i {
    display: inline-block;
    font-size: 18px;
    color: var(--green-color);
}

/* ? Payment Modal */

.payment-modal .modal-body {
    padding-bottom: 40px;
}

.payment-static .modal-body {
    padding-bottom: 10px;
}

.payment-modal h5 {
    color: var(--green-color);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--gray-40);
}

.payment-modal .card-details input {
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 0;
    width: 100%;
    border-bottom: 1px solid var(--gray-40);
}

.payment-modal .yy-sc {
    display: grid;
    grid-template-columns: auto auto;
    gap: 50px;
}

    .payment-modal .yy-sc .ex-dt {
        width: 130px;
    }

.payment-modal .more-options .option {
    cursor: pointer;
}

    .payment-modal .more-options .option .img {
        height: 45px;
        width: 65px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 5px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .payment-modal .more-options .option .img img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

    .payment-modal .more-options .option span {
        font-size: 16px;
        color: var(--gray-100);
        font-weight: 450;
    }

    .payment-modal .more-options .option .right i {
        font-size: 26px;
        color: var(--text-gray);
    }

@media screen and (max-width: 991px) {
    .verifaction-page .title-section .container {
        width: 80%;
    }

    .md-head-tl {
        font-size: 34px;
    }

    .md-email,
    .md-dsc,
    .verifaction-modal label,
    .md-btn-sec a,
    .alert-txt {
        font-size: 16px;
    }

    .changeEmailAddress,
    .changePhone {
        font-size: 15px;
    }

    .md-btn-sec {
        width: 200px;
    }

        .md-btn-sec button {
            font-size: 15px;
            width: 200px;
            padding: 8px 10px;
        }

    .verifaction-modal .modal-body {
        padding: 100px 40px;
    }

    .payment-modal .card-details input {
        font-size: 16px;
    }

    .payment-modal .modal-body {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 768px) {
    .verifaction-page .title-section .container {
        width: 100%;
    }

    .verifaction-page .title-section .title-desc {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .md-head-tl {
        font-size: 24px;
    }

    .md-btn-sec button {
        font-size: 14px;
    }

    .verifaction-modal .modal-body {
        padding: 80px 20px;
        padding-bottom: 40px;
    }

    .payment-modal .card-details input {
        font-size: 16px;
    }

    .payment-modal .modal-body {
        padding-bottom: 40px;
    }

    .intl-tel-input input {
        width: 100%;
    }

    .payment-modal .yy-sc {
        gap: 20px;
    }

        .payment-modal .yy-sc .ex-dt {
            width: 110px;
        }

    .payment-modal h5 {
        font-size: 20px;
    }

    .payment-modal .more-options .option span {
        font-weight: 400;
    }

    .changeItemModal {
        padding: 40px 20px;
        width: 85%;
    }

        .changeItemModal input {
            font-size: 16px;
        }

        .changeItemModal .input-section i {
            font-size: 16px;
        }
}

/* ! ~~~~~~~~~~~~~~~~~~~ CREATE PROFILE PAGE ~~~~~~~~~~~~~~~~~ */

.create-profile .title-section {
    padding: 0;
}

    .create-profile .title-section .container,
    .create-profile .add-address-sec .container {
        width: 70%;
        margin: 0 auto;
    }

.create-profile .add-address-sec {
    padding: 0;
}

    .create-profile .add-address-sec h5 {
        color: var(--gray-100);
        border-bottom: 1px solid var(--gray-40);
        display: inline-block;
        width: 50%;
        padding-bottom: 8px;
    }

    .create-profile .add-address-sec .address-box {
        width: 50%;
    }

        .create-profile .add-address-sec .address-box .lb-in {
            font-size: 18px;
            color: var(--gray-100);
        }

        .create-profile .add-address-sec .address-box input {
            width: 100%;
            display: block;
            padding: 12px;
            border-radius: 6px;
            border: 1px solid var(--gray-40);
            font-size: 18px;
            outline: none;
        }

    .create-profile .add-address-sec .zone-details {
        width: 50%;
        display: grid;
        gap: 15px;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .create-profile .add-address-sec .add-address {
        font-size: 18px;
        color: var(--gray-100);
        cursor: pointer;
    }

        .create-profile .add-address-sec .add-address span {
            color: var(--green-color) !important;
            display: inline-block;
        }

    .create-profile .add-address-sec .zone-details input,
    .create-profile .add-address-sec .zone-details select {
        width: 100%;
        padding: 12px;
        border-radius: 6px;
        border: 1px solid var(--gray-40);
        font-size: 18px;
        outline: none;
    }

/* ! Very Importatnt */
.create-profile .step.active:not(:last-child)::after {
    background-color: var(--green-color);
}

.create-profile .step.active:not(:nth-child(1))::after {
    background-color: #c7c7c7;
}

/* ! Very Importatnt */

@media screen and (max-width: 1200px) {
    .create-profile .add-address-sec .zone-details {
        width: 80%;
    }
}

@media screen and (max-width: 991px) {
    .create-profile .add-address-sec h5 {
        width: 100%;
    }

    .create-profile .add-address-sec .address-box {
        width: 100%;
    }

    .create-profile .add-address-sec .zone-details {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .create-profile .title-section .container,
    .create-profile .add-address-sec .container {
        width: 100%;
        margin: 0 auto;
    }

    .create-profile .add-address-sec .zone-details {
        width: 100%;
    }

    .create-profile .add-address-sec .address-box .lb-in {
        font-size: 16px;
    }

    .create-profile .add-address-sec .zone-details input,
    .create-profile .add-address-sec .zone-details select {
        font-size: 16px;
    }

    .create-profile .add-address-sec .address-box input {
        font-size: 16px;
    }

    .create-profile .add-address-sec .add-address {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    .create-profile .marking-slider .stepper .step:nth-child(3),
    .create-profile .marking-slider .stepper .step:nth-child(4) {
        display: none;
    }

    .create-profile .title-section .container,
    .create-profile .add-address-sec .container {
        width: 100%;
    }

    .create-profile .add-address-sec h5 {
        width: 100%;
        font-size: 18px;
    }

    .create-profile .add-address-sec .zone-details {
        width: 100%;
        gap: 8px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~ SUBSCRIPTION PAGE ~~~~~~~~~~~~~~~~~~ */

.subscription-page .title-section .container {
    width: 70%;
    margin: 0 auto;
}

/* ! Very Importatnt */

.subscription-page .step.active:not(:nth-child(3))::after {
    background-color: var(--green-color);
}

.welcome-package {
    padding: 100px 0px;
}

    .welcome-package .container {
        width: 70%;
        margin: 0 auto;
    }

    .welcome-package .all-packages {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 60px;
    }

        .welcome-package .all-packages .package {
            cursor: pointer;
            transition: 0.2s ease;
        }

.dropShadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.welcome-package .package .header-img {
    height: 320px;
}

    .welcome-package .package .header-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.welcome-package .package .pack-details {
    font-size: 20px;
    padding: 20px;
    padding-top: 0px;
}

    .welcome-package .package .pack-details .pack-name {
        font-size: 22px;
        color: var(--black-100);
        font-weight: 420;
    }

    .welcome-package .package .pack-details .price,
    .welcome-package .package .pack-details .volume,
    .welcome-package .package .pack-details .item-n {
        color: var(--gray-100);
    }

.welcome-package .package .bullet-mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #c7c7c7;
    border: 5px solid var(--white-100);
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));
    cursor: pointer;
}

    .welcome-package .package .bullet-mark.active-bullet {
        background-color: var(--green-color) !important;
    }

@media screen and (max-width: 1340px) {
    .subscription-page .title-section .container {
        width: 80%;
    }

    .welcome-package .container {
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    .subscription-page .title-section .container {
        width: 100%;
    }

    .welcome-package .container {
        width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .welcome-package .all-packages {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    .welcome-package .all-packages {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .welcome-package .package .pack-details {
        font-size: 16px;
    }

        .welcome-package .package .pack-details .pack-name {
            font-size: 18px;
        }

    .welcome-package .package .header-img {
        height: 280px;
    }

    .welcome-package .package .bullet-mark {
        width: 25px;
        height: 25px;
        border: 4px solid var(--white-100);
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~ SUBSCRIPTION PACKAGE PAGE ~~~~~~~~~~~~~~~~~~ */

.subscription-package .title-desc {
    width: 80%;
}

.subscription-package .plan-package {
    padding: 50px 80px;
    background-color: var(--bg-gray);
}

.subscription-package .plan-items {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

    .subscription-package .plan-items .pl-item {
        border-radius: 15px 15px 0px 0px;
        overflow: hidden;
        cursor: pointer;
    }

        .subscription-package .plan-items .pl-item .pl-nm {
            background-color: var(--white-100);
            font-size: 26px;
            font-weight: 500;
            color: var(--green-color);
            line-height: 1.2;
            padding: 20px 0px;
        }

            .subscription-package .plan-items .pl-item .pl-nm .pv {
                font-size: 40px;
                font-weight: 600;
            }

        .subscription-package .plan-items .pl-item .pl-body {
            padding: 30px 10px;
            min-height: 300px;
            background: #d9d9d9;
            background: radial-gradient( farthest-corner at 53% 50%, #d9d9d9 0%, #d9d9d8 0%, #d8d9d8 1%, #d8d9d7 1%, #d8d9d7 2%, #d7d8d6 2%, #d7d8d5 2%, #d7d8d5 3%, #d7d8d4 3%, #d6d8d4 4%, #d6d8d3 4%, #d6d8d3 4%, #d6d8d2 5%, #d5d8d1 5%, #d5d8d1 5%, #d5d7d0 6%, #d4d7d0 6%, #d4d7cf 7%, #d4d7cf 7%, #d4d7ce 7%, #d3d7ce 8%, #d3d7cd 8%, #d3d7cc 9%, #d3d7cc 9%, #d2d6cb 9%, #d2d6cb 10%, #d2d6ca 10%, #d1d6ca 11%, #d1d6c9 11%, #d1d6c8 11%, #d1d6c8 12%, #d0d6c7 12%, #d0d6c7 13%, #d0d6c6 13%, #cfd5c6 13%, #cfd5c5 14%, #cfd5c5 14%, #cfd5c4 14%, #ced5c3 15%, #ced5c3 15%, #ced5c2 16%, #ced5c2 16%, #cdd5c1 16%, #cdd5c1 17%, #cdd4c0 17%, #ccd4c0 18%, #ccd4bf 18%, #ccd4be 18%, #ccd4be 19%, #cbd4bd 19%, #cbd4bd 20%, #cbd4bc 20%, #cad4bc 20%, #cad3bb 21%, #cad3ba 21%, #cad3ba 21%, #c9d3b9 22%, #c9d3b9 22%, #c9d3b8 23%, #c9d3b8 23%, #c8d3b7 23%, #c8d3b7 24%, #c8d3b6 24%, #c7d2b5 25%, #c7d2b5 25%, #c7d2b4 25%, #c7d2b4 26%, #c6d2b3 26%, #c6d2b3 27%, #c6d2b2 27%, #c5d2b1 27%, #c5d2b1 28%, #c5d2b0 28%, #c5d1b0 29%, #c4d1af 29%, #c4d1af 29%, #c4d1ae 30%, #c4d1ae 30%, #c3d1ad 30%, #c3d1ac 31%, #c3d1ac 31%, #c2d1ab 32%, #c2d0ab 32%, #c2d0aa 32%, #c2d0aa 33%, #c1d0a9 33%, #c1d0a9 34%, #c1d0a8 34%, #c0d0a7 34%, #c0d0a7 35%, #c0d0a6 35%, #c0d0a6 36%, #bfcfa5 36%, #bfcfa5 36%, #bfcfa4 37%, #bfcfa3 37%, #becfa3 38%, #becfa2 38%, #becfa2 38%, #bdcfa1 39%, #bdcfa1 39%, #bdcfa0 39%, #bdcea0 40%, #bcce9f 40%, #bcce9e 41%, #bcce9e 41%, #bcce9d 41%, #bbce9d 42%, #bbce9c 42%, #bbce9c 43%, #bace9b 43%, #bace9a 43%, #bacd9a 44%, #bacd99 44%, #b9cd99 45%, #b9cd98 45%, #b9cd98 45%, #b8cd97 46%, #b8cd97 46%, #b8cd96 46%, #b8cd95 47%, #b7cc95 47%, #b7cc94 48%, #b7cc94 48%, #b7cc93 48%, #b6cc93 49%, #b6cc92 49%, #b6cc92 50%, #b5cc91 50%, #b5cc90 50%, #b5cc90 51%, #b5cb8f 51%, #b4cb8f 52%, #b4cb8e 52%, #b4cb8e 52%, #b3cb8d 53%, #b3cb8c 53%, #b3cb8c 54%, #b3cb8b 54%, #b2cb8b 54%, #b2cb8a 55%, #b2ca8a 55%, #b2ca89 55%, #b1ca89 56%, #b1ca88 56%, #b1ca87 57%, #b0ca87 57%, #b0ca86 57%, #b0ca86 58%, #b0ca85 58%, #afc985 59%, #afc984 59%, #afc984 59%, #afc983 60%, #aec982 60%, #aec982 61%, #aec981 61%, #adc981 61%, #adc980 62%, #adc980 62%, #adc87f 63%, #acc87e 63%, #acc87e 63%, #acc87d 64%, #abc87d 64%, #abc87c 64%, #abc87c 65%, #abc87b 65%, #aac87b 66%, #aac87a 66%, #aac779 66%, #aac779 67%, #a9c778 67%, #a9c778 68%, #a9c777 68%, #a8c777 68%, #a8c776 69%, #a8c775 69%, #a8c775 70%, #a7c674 70%, #a7c674 70%, #a7c673 71%, #a6c673 71%, #a6c672 71%, #a6c672 72%, #a6c671 72%, #a5c670 73%, #a5c670 73%, #a5c66f 73%, #a5c56f 74%, #a4c56e 74%, #a4c56e 75%, #a4c56d 75%, #a3c56d 75%, #a3c56c 76%, #a3c56b 76%, #a3c56b 77%, #a2c56a 77%, #a2c56a 77%, #a2c469 78%, #a2c469 78%, #a1c468 79%, #a1c467 79%, #a1c467 79%, #a0c466 80%, #a0c466 80%, #a0c465 80%, #a0c465 81%, #9fc464 81%, #9fc364 82%, #9fc363 82%, #9ec362 82%, #9ec362 83%, #9ec361 83%, #9ec361 84%, #9dc360 84%, #9dc360 84%, #9dc35f 85%, #9dc25e 85%, #9cc25e 86%, #9cc25d 86%, #9cc25d 86%, #9bc25c 87%, #9bc25c 87%, #9bc25b 88%, #9bc25b 88%, #9ac25a 88%, #9ac259 89%, #9ac159 89%, #99c158 89%, #99c158 90%, #99c157 90%, #99c157 91%, #98c156 91%, #98c156 91%, #98c155 92%, #98c154 92%, #97c054 93%, #97c053 93%, #97c053 93%, #96c052 94%, #96c052 94%, #96c051 95%, #96c050 95%, #95c050 95%, #95c04f 96%, #95c04f 96%, #95bf4e 96%, #94bf4e 97%, #94bf4d 97%, #94bf4d 98%, #93bf4c 98%, #93bf4b 98%, #93bf4b 99%, #93bf4a 99%, #92bf4a 100%, #92bf49 100% );
        }

        .subscription-package .plan-items .pl-item:nth-child(2) .pl-nm {
            color: #8a8a8a;
        }

        .subscription-package .plan-items .pl-item:nth-child(2) .pl-footer button {
            color: #8a8a8a;
        }

        .subscription-package .plan-items .pl-item:nth-child(2) .pl-body {
            background: radial-gradient( farthest-corner at 50% 50%, #d9d9d9 0%, #d9d9d9 2%, #d8d8d8 3%, #d7d7d7 5%, #d6d6d6 6%, #d6d6d6 8%, #d5d5d5 9%, #d4d4d4 11%, #d3d3d3 13%, #d3d3d3 14%, #d2d2d2 16%, #d1d1d1 17%, #d1d1d1 19%, #d0d0d0 20%, #cfcfcf 22%, #cecece 23%, #cecece 25%, #cdcdcd 27%, #cccccc 28%, #cccccc 30%, #cbcbcb 31%, #cacaca 33%, #c9c9c9 34%, #c9c9c9 36%, #c8c8c8 38%, #c7c7c7 39%, #c6c6c6 41%, #c6c6c6 42%, #c5c5c5 44%, #c4c4c4 45%, #c4c4c4 47%, #c3c3c3 48%, #c2c2c2 50%, #c1c1c1 52%, #c1c1c1 53%, #c0c0c0 55%, #bfbfbf 56%, #bfbfbf 58%, #bebebe 59%, #bdbdbd 61%, #bcbcbc 63%, #bcbcbc 64%, #bbbbbb 66%, #bababa 67%, #b9b9b9 69%, #b9b9b9 70%, #b8b8b8 72%, #b7b7b7 73%, #b7b7b7 75%, #b6b6b6 77%, #b5b5b5 78%, #b4b4b4 80%, #b4b4b4 81%, #b3b3b3 83%, #b2b2b2 84%, #b1b1b1 86%, #b1b1b1 88%, #b0b0b0 89%, #afafaf 91%, #afafaf 92%, #aeaeae 94%, #adadad 95%, #acacac 97%, #acacac 98%, #ababab 100% );
        }

        .subscription-package .plan-items .pl-item:nth-child(4) .pl-nm {
            color: #545454;
        }

        .subscription-package .plan-items .pl-item:nth-child(4) .pl-footer button {
            color: #545454;
        }

        .subscription-package .plan-items .pl-item:nth-child(4) .pl-body {
            background: radial-gradient( farthest-corner at 50% 50%, #a6a6a6 0%, #a5a5a5 0%, #a5a5a5 1%, #a4a4a4 1%, #a3a3a3 2%, #a3a3a3 2%, #a2a2a2 2%, #a2a2a2 3%, #a1a1a1 3%, #a0a0a0 4%, #a0a0a0 4%, #9f9f9f 4%, #9f9f9f 5%, #9e9e9e 5%, #9d9d9d 5%, #9d9d9d 6%, #9c9c9c 6%, #9c9c9c 7%, #9b9b9b 7%, #9b9b9b 7%, #9a9a9a 8%, #999999 8%, #999999 9%, #989898 9%, #989898 9%, #979797 10%, #969696 10%, #969696 11%, #959595 11%, #959595 11%, #949494 12%, #939393 12%, #939393 13%, #929292 13%, #929292 13%, #919191 14%, #919191 14%, #909090 14%, #8f8f8f 15%, #8f8f8f 15%, #8e8e8e 16%, #8e8e8e 16%, #8d8d8d 16%, #8c8c8c 17%, #8c8c8c 17%, #8b8b8b 18%, #8b8b8b 18%, #8a8a8a 18%, #898989 19%, #898989 19%, #888888 20%, #888888 20%, #878787 20%, #878787 21%, #868686 21%, #858585 21%, #858585 22%, #848484 22%, #848484 23%, #838383 23%, #828282 23%, #828282 24%, #818181 24%, #818181 25%, #808080 25%, #7f7f7f 25%, #7f7f7f 26%, #7e7e7e 26%, #7e7e7e 27%, #7d7d7d 27%, #7d7d7d 27%, #7c7c7c 28%, #7b7b7b 28%, #7b7b7b 29%, #7a7a7a 29%, #7a7a7a 29%, #797979 30%, #787878 30%, #787878 30%, #777777 31%, #777777 31%, #767676 32%, #757575 32%, #757575 32%, #747474 33%, #747474 33%, #737373 34%, #727272 34%, #727272 34%, #717171 35%, #717171 35%, #707070 36%, #707070 36%, #6f6f6f 36%, #6e6e6e 37%, #6e6e6e 37%, #6d6d6d 38%, #6d6d6d 38%, #6c6c6c 38%, #6b6b6b 39%, #6b6b6b 39%, #6a6a6a 39%, #6a6a6a 40%, #696969 40%, #686868 41%, #686868 41%, #676767 41%, #676767 42%, #666666 42%, #666666 43%, #656565 43%, #646464 43%, #646464 44%, #636363 44%, #636363 45%, #626262 45%, #616161 45%, #616161 46%, #606060 46%, #606060 46%, #5f5f5f 47%, #5e5e5e 47%, #5e5e5e 48%, #5d5d5d 48%, #5d5d5d 48%, #5c5c5c 49%, #5c5c5c 49%, #5b5b5b 50%, #5a5a5a 50%, #5a5a5a 50%, #595959 51%, #595959 51%, #585858 52%, #575757 52%, #575757 52%, #565656 53%, #565656 53%, #555555 54%, #545454 54%, #545454 54%, #535353 55%, #535353 55%, #525252 55%, #525252 56%, #515151 56%, #505050 57%, #505050 57%, #4f4f4f 57%, #4f4f4f 58%, #4e4e4e 58%, #4d4d4d 59%, #4d4d4d 59%, #4c4c4c 59%, #4c4c4c 60%, #4b4b4b 60%, #4a4a4a 61%, #4a4a4a 61%, #494949 61%, #494949 62%, #484848 62%, #484848 63%, #474747 63%, #464646 63%, #464646 64%, #454545 64%, #454545 64%, #444444 65%, #434343 65%, #434343 66%, #424242 66%, #424242 66%, #414141 67%, #404040 67%, #404040 68%, #3f3f3f 68%, #3f3f3f 68%, #3e3e3e 69%, #3e3e3e 69%, #3d3d3d 70%, #3c3c3c 70%, #3c3c3c 70%, #3b3b3b 71%, #3b3b3b 71%, #3a3a3a 71%, #393939 72%, #393939 72%, #383838 73%, #383838 73%, #373737 73%, #363636 74%, #363636 74%, #353535 75%, #353535 75%, #343434 75%, #333333 76%, #333333 76%, #323232 77%, #323232 77%, #313131 77%, #313131 78%, #303030 78%, #2f2f2f 79%, #2f2f2f 79%, #2e2e2e 79%, #2e2e2e 80%, #2d2d2d 80%, #2c2c2c 80%, #2c2c2c 81%, #2b2b2b 81%, #2b2b2b 82%, #2a2a2a 82%, #292929 82%, #292929 83%, #282828 83%, #282828 84%, #272727 84%, #272727 84%, #262626 85%, #252525 85%, #252525 86%, #242424 86%, #242424 86%, #232323 87%, #222222 87%, #222222 88%, #212121 88%, #212121 88%, #202020 89%, #1f1f1f 89%, #1f1f1f 89%, #1e1e1e 90%, #1e1e1e 90%, #1d1d1d 91%, #1d1d1d 91%, #1c1c1c 91%, #1b1b1b 92%, #1b1b1b 92%, #1a1a1a 93%, #1a1a1a 93%, #191919 93%, #181818 94%, #181818 94%, #171717 95%, #171717 95%, #161616 95%, #151515 96%, #151515 96%, #141414 96%, #141414 97%, #131313 97%, #131313 98%, #121212 98%, #111111 98%, #111111 99%, #101010 99%, #101010 100%, #0f0f0f 100% );
        }

        .subscription-package .plan-items .pl-item:nth-child(5) .pl-nm {
            color: #004aad;
        }

        .subscription-package .plan-items .pl-item:nth-child(5) .pl-footer button {
            color: #004aad;
        }

        .subscription-package .plan-items .pl-item:nth-child(5) .pl-body {
            background: radial-gradient( farthest-corner at 50% 50%, #004aad 0%, #004aac 1%, #014aab 2%, #0149ab 2%, #0149aa 3%, #0249a9 4%, #0249a8 5%, #0249a7 5%, #0349a6 6%, #0349a5 7%, #0348a4 8%, #0448a4 9%, #0448a3 9%, #0548a2 10%, #0548a1 11%, #0548a0 12%, #06479f 13%, #06479e 13%, #06479e 14%, #07479d 15%, #07479c 16%, #07479b 16%, #08469a 17%, #084699 18%, #094698 19%, #094697 20%, #094697 20%, #0a4696 21%, #0a4595 22%, #0a4594 23%, #0b4593 23%, #0b4592 24%, #0b4591 25%, #0c4591 26%, #0c4490 27%, #0d448f 27%, #0d448e 28%, #0d448d 29%, #0e448c 30%, #0e448b 30%, #0e438b 31%, #0f438a 32%, #0f4389 33%, #0f4388 34%, #104387 34%, #104386 35%, #114385 36%, #114284 37%, #114284 38%, #124283 38%, #124282 39%, #124281 40%, #134280 41%, #13417f 41%, #13417e 42%, #14417e 43%, #14417d 44%, #15417c 45%, #15417b 45%, #15407a 46%, #164079 47%, #164078 48%, #164077 48%, #174077 49%, #174076 50%, #173f75 51%, #183f74 52%, #183f73 52%, #183f72 53%, #193f71 54%, #193f71 55%, #1a3e70 55%, #1a3e6f 56%, #1a3e6e 57%, #1b3e6d 58%, #1b3e6c 59%, #1b3e6b 59%, #1c3d6b 60%, #1c3d6a 61%, #1c3d69 62%, #1d3d68 63%, #1d3d67 63%, #1e3d66 64%, #1e3c65 65%, #1e3c64 66%, #1f3c64 66%, #1f3c63 67%, #1f3c62 68%, #203c61 69%, #203b60 70%, #203b5f 70%, #213b5e 71%, #213b5e 72%, #223b5d 73%, #223b5c 73%, #223b5b 74%, #233a5a 75%, #233a59 76%, #233a58 77%, #243a58 77%, #243a57 78%, #243a56 79%, #253955 80%, #253954 80%, #263953 81%, #263952 82%, #263951 83%, #273951 84%, #273850 84%, #27384f 85%, #28384e 86%, #28384d 87%, #28384c 88%, #29384b 88%, #29374b 89%, #29374a 90%, #2a3749 91%, #2a3748 91%, #2b3747 92%, #2b3746 93%, #2b3645 94%, #2c3644 95%, #2c3644 95%, #2c3643 96%, #2d3642 97%, #2d3641 98%, #2d3540 98%, #2e353f 99%, #2e353e 100% );
        }

        .subscription-package .plan-items .pl-item:nth-child(3) .pl-nm {
            color: #d1c36a;
        }

        .subscription-package .plan-items .pl-item:nth-child(3) .pl-footer button {
            color: #d1c36a;
        }

        .subscription-package .plan-items .pl-item:nth-child(3) .pl-body {
            background: #004aad;
            background: radial-gradient( farthest-corner at 50% 50%, #a6a6a6 0%, #a6a6a5 2%, #a7a7a5 3%, #a8a7a4 5%, #a8a7a3 6%, #a9a8a2 8%, #a9a8a1 9%, #aaa9a0 11%, #aba9a0 13%, #abaa9f 14%, #acaa9e 16%, #acaa9d 17%, #adab9c 19%, #aeab9b 20%, #aeac9a 22%, #afac9a 23%, #b0ac99 25%, #b0ad98 27%, #b1ad97 28%, #b1ae96 30%, #b2ae95 31%, #b3ae94 33%, #b3af94 34%, #b4af93 36%, #b4b092 38%, #b5b091 39%, #b6b190 41%, #b6b18f 42%, #b7b18f 44%, #b7b28e 45%, #b8b28d 47%, #b9b38c 48%, #b9b38b 50%, #bab38a 52%, #bbb489 53%, #bbb489 55%, #bcb588 56%, #bcb587 58%, #bdb686 59%, #beb685 61%, #beb684 63%, #bfb783 64%, #bfb783 66%, #c0b882 67%, #c1b881 69%, #c1b880 70%, #c2b97f 72%, #c2b97e 73%, #c3ba7e 75%, #c4ba7d 77%, #c4ba7c 78%, #c5bb7b 80%, #c6bb7a 81%, #c6bc79 83%, #c7bc78 84%, #c7bd78 86%, #c8bd77 88%, #c9bd76 89%, #c9be75 91%, #cabe74 92%, #cabf73 94%, #cbbf72 95%, #ccbf72 97%, #ccc071 98%, #cdc070 100% );
        }

        .subscription-package .plan-items .pl-item .pl-footer {
            position: relative;
            top: -25px;
        }

            .subscription-package .plan-items .pl-item .pl-footer button {
                padding: 10px 25px;
                text-transform: uppercase;
                background-color: var(--white-100);
                border-radius: 30px;
                border: none;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                color: var(--green-color);
                font-size: 20px;
                font-weight: 500;
            }

        .subscription-package .plan-items .pl-item .pl-body .pl-tx {
            font-size: 20px;
            text-transform: uppercase;
            color: var(--white-100);
        }

@media screen and (max-width: 1280px) {
    .subscription-package .plan-package {
        padding: 50px 0px;
        background-color: var(--bg-gray);
    }

        .subscription-package .plan-package .plan-items {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
}

@media screen and (max-width: 991px) {
    .subscription-package .title-desc {
        width: 100%;
    }

    .subscription-package .plan-package .plan-items {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 768px) {
    .subscription-package .plan-package .plan-items {
        grid-template-columns: 1fr 1fr;
    }

        .subscription-package .plan-package .plan-items .pl-nm {
            font-size: 18px;
            padding: 12px 0px;
        }

            .subscription-package .plan-package .plan-items .pl-nm .pv {
                font-size: 26px;
            }

    .subscription-package .plan-items .pl-item .pl-body {
        min-height: 240px;
        padding: 20px 0px;
    }

        .subscription-package .plan-items .pl-item .pl-body .pl-tx {
            font-size: 14px;
        }

    .subscription-package .plan-items .pl-item .pl-footer {
        top: -20px;
    }

        .subscription-package .plan-items .pl-item .pl-footer button {
            padding: 8px 15px;
            font-size: 14px;
        }
}

@media screen and (max-width: 440px) {
    .subscription-package .plan-items .pl-item .pl-body {
        min-height: 220px;
    }
}

/* ! ~~~~~~~~~~~~~ SUBSCRIPTION-SECTION ~~~~~~~~~~~~ */

.subscription h3 {
    color: var(--green-color);
    width: 40%;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray-40);
}

.subscription .tt-ds {
    font-size: 18px;
    color: var(--gray-100);
}

.subscription li {
    font-size: 18px;
    color: var(--gray-100);
}

.experiential-subs,
.silver-subs,
.gold-subs,
.platinum-subs,
.diamond-subs {
    display: none;
}

.activeSubs {
    display: block;
    animation: zoomin 0.3s linear;
}

@keyframes zoomin {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@media screen and (max-width: 576px) {
    .subscription h3 {
        width: 90%;
        font-size: 20px;
    }

    .subscription .tt-ds {
        font-size: 16px;
    }

    .subscription li {
        font-size: 16px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~~~~~~~ CHECKOUT-PAGE ~~~~~~~~~~~~~~~~~~~~~~~ */

/* ! ~~~~~~~~~~~~~~~~~~~~~~~~~ PRODUCT_CART PAGE ~~~~~~~~~~~~~~~~~~~~~~~ */

/* ! Very Importatnt */

.order-cart-section {
    padding-top: 60px;
}

.review-txt {
    color: var(--green-color);
    font-weight: 450;
    font-size: 38px;
}

.checkout-page .step.active:not(:nth-child(4))::after {
    background-color: var(--green-color);
}

.user-card {
    padding: 15px 20px;
    border-radius: 12px;
    background-color: #f3f3f3;
}

    .user-card .u-img {
        height: 85px;
        width: 85px;
        border-radius: 50%;
        overflow: hidden;
    }

        .user-card .u-img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    .user-card .u-details {
        font-size: 16px;
    }

        .user-card .u-details .tt {
            text-transform: uppercase;
        }

.cart-container h3 {
    color: var(--gray-100);
    font-size: 24px;
}

.all-cart-items {
    border-top: 3px solid var(--gray-40);
    border-bottom: 3px solid var(--gray-40);
}

    .all-cart-items .cart-item {
        padding: 5px 20px;
        border-bottom: 1px solid #ddd;
    }

.cart-item .savelistCircle {
    height: 30px;
    width: 30px;
    padding: 0;
    border-radius: 50%;
    font-size: 22px;
    overflow: hidden;
    border: 1px solid var(--gray-40);
    color: var(--gray-40);
    margin-right: 20px;
    background-color: transparent;
}

.all-cart-items .cart-item:last-child {
    border: none;
}

.all-cart-items .cart-item .p-img {
    height: 90px;
    width: 70px;
    overflow: hidden;
}

    .all-cart-items .cart-item .p-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.cart-item .cp-details {
    line-height: 1.3;
}

    .cart-item .cp-details .cp-nm {
        font-size: 20px;
        color: var(--text-gray);
    }

    .cart-item .cp-details .cp-pr {
        font-weight: 600;
        color: var(--black-100);
        font-size: 20px;
    }

    .cart-item .cp-details p {
        font-size: 16px;
        color: var(--gray-100);
    }

.cart-item .right {
    gap: 30px;
    align-items: center;
}

.cart-item .pen-tool {
    cursor: pointer;
}

.cart-item .savelist {
    border: 2px solid var(--green-color);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
}

    .cart-item .savelist i .cart-item .quantity-container {
        color: var(--text-gray);
        font-size: 20px;
        display: flex;
        gap: 5px;
        align-items: center;
    }

.cart-item .quantity-container input {
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 450;
    width: 65px;
    border: 1px solid #ddd;
    padding: 6px;
    height: 30px;
    text-align: center;
}

.cart-item .quantity-container .arrow-sec {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 900;
    line-height: 12px;
}

.cart-item .quantity-container button {
    width: 20px;
    font-size: 26px;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    background-color: transparent;
    border: none;
}

.cart-item .quantity-container .arrow-sec i {
    cursor: pointer;
    color: var(--black-100);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.cart-item .cross-item {
    cursor: pointer;
}

    .cart-item .cross-item svg polygon {
        fill: var(--gray-100);
    }

.summary {
    margin-top: 30px;
}

    .summary .title {
        padding: 8px 20px;
        background-color: var(--black-100);
        color: var(--white-100);
        font-weight: 500;
        font-size: 18px;
        border-radius: 6px;
    }

    .summary .sm-desc .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        color: var(--text-gray);
        padding: 5px 10px;
    }

    .summary .sm-desc .total-item {
        border-top: 7px solid var(--black-100);
        margin-top: 8px;
        font-weight: 600;
        color: var(--black-100);
    }

/* ! ~~~~~~~~~~~~~~ PRODUCT_CART_Modal (PopUp) ~~~~~~~~~~~~~ */

.product_cart_modal .modal-content {
    width: 600px;
    margin: 0 auto;
}

.product_cart_modal .modal-body {
    padding: 80px 40px;
    padding-bottom: 40px;
}

.product_cart_modal .product-details h1 {
    font-size: 36px;
}

.product_cart_modal .product-details .buy-details strong {
    font-size: 18px;
}

.product_cart_modal .product-details .item-number {
    font-size: 22px;
}

@media screen and (max-width: 768px) {
    .product_cart_modal .product-details h1 {
        font-size: 30px;
    }

    .product_cart_modal .modal-body {
        padding: 60px 30px;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .review-txt {
        font-size: 26px;
    }

    .cart-container h3 {
        font-size: 20px;
    }

    .all-cart-items .cart-item {
        padding: 5px 0px;
        gap: 10px;
    }

        .all-cart-items .cart-item .p-img {
            height: 60px;
            width: 50px;
        }

    .cart-item .cp-details .cp-nm {
        font-size: 16px;
        color: var(--text-gray);
    }

    .cart-item .cp-details .cp-pr {
        font-size: 16px;
    }

    .cart-item .cp-details p {
        font-size: 12px;
        color: var(--gray-100);
    }

    .cart-item .right {
        gap: 20px;
    }

    .cart-item .quantity-container {
        gap: 2px;
    }

    .cart-item .cross-item svg {
        height: 20px;
        width: 20px;
    }

    .cart-item .quantity-container input {
        font-size: 16px;
        width: 50px;
    }

    .summary .title {
        padding: 5px 15px;
        font-size: 16px;
    }

    .summary .sm-desc .item {
        font-size: 16px;
    }

    .summary .total-amount {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    .checkout-page .marking-slider .stepper .step:nth-child(2),
    .checkout-page .marking-slider .stepper .step:nth-child(3) {
        display: none;
    }

    .checkout-page .order-cart-section .user-card {
        display: none !important;
    }
}

@media screen and (max-width: 450px) {
    .tt-dsc {
        font-size: 14px;
    }

    .myPv {
        font-size: 14px;
    }

    .user-card .u-img {
        height: 70px;
        width: 70px;
    }

    .slider-container {
        width: 100%;
    }

    .range-slider {
        height: 12px;
    }

    .cart-item .right {
        gap: 10px;
        width: 45%;
    }

    .all-cart-items .cart-item svg {
        width: 18px;
        height: 18px;
    }

    .cart-item .savelistCircle {
        height: 25px;
        width: 25px;
        margin-right: 10px;
        line-height: 25px;
        font-size: 20px;
    }

    .cart-item .quantity {
        gap: 0px !important;
    }

        .cart-item .quantity .quantity-num {
            font-size: 14px;
            width: 20px;
        }

        .cart-item .quantity .remove,
        .cart-item .quantity .add {
            height: 16px;
            width: 16px;
            font-size: 16px;
            border-width: 1px;
        }

    .cart-item .right {
        justify-content: space-between;
    }

    .summary .cart-item .right {
        width: auto;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~~~~ CUSTOMER-SIGN-IN ~~~~~~~~~~~~~~~~~~ */

.customerSignIn {
    padding: 50px 0px;
}

    .customerSignIn .content {
        width: 500px;
        margin: 0 auto;
    }

        .customerSignIn .content .tt-desc {
            padding: 100px 20px;
            background-color: var(--bg-gray);
            font-size: 20px;
            color: var(--gray-100);
        }

        .customerSignIn .content .btn-sec {
            width: 230px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 18px;
            gap: 15px;
            margin: 0 auto;
            margin-top: 100px;
        }

            .customerSignIn .content .btn-sec a {
                font-size: 18px;
                border: none;
                background-color: transparent;
                padding: 8px;
                border-radius: 40px;
                text-align: center;
                text-decoration: none;
                color: var(--black-100);
            }

                .customerSignIn .content .btn-sec a.sign-up {
                    background-color: var(--green-color);
                    color: var(--white-100);
                    transition: 0.3s ease;
                    border: 1px solid transparent;
                    transition: 0.3s ease;
                }

                    .customerSignIn .content .btn-sec a.sign-up:hover {
                        background-color: var(--white-100);
                        color: var(--green-color);
                        transition: 0.3s ease;
                        border: 1px solid var(--green-color);
                    }

                .customerSignIn .content .btn-sec a.login {
                    background-color: var(--black-100);
                    color: var(--white-100);
                    border: 1px solid var(--black-100);
                    transition: 0.3s ease;
                }

                    .customerSignIn .content .btn-sec a.login:hover {
                        background-color: var(--white-100);
                        color: var(--black-100);
                        transition: 0.3s ease;
                    }

                .customerSignIn .content .btn-sec a.guest {
                    transition: 0.3s ease;
                }

                    .customerSignIn .content .btn-sec a.guest:hover {
                        color: var(--green-color);
                        transition: 0.3s ease;
                    }

@media screen and (max-width: 576px) {
    .customerSignIn .content .tt-desc {
        padding: 70px 15px;
        font-size: 18px;
    }

    .customerSignIn .content {
        width: 100%;
    }

        .customerSignIn .content .btn-sec {
            width: 80%;
        }
}

/* ! ~~~~~~~~~~~~~~~~~~~~~ PRODUCT_CHECKOUT (CHEKCOUT TWO ) ~~~~~~~~~~~~~~~~~~ */

.exs-acc {
    font-size: 20px;
    color: var(--gray-100);
    font-weight: 400;
}

    .exs-acc a {
        text-decoration: none;
        color: var(--green-color);
        position: relative;
    }

        .exs-acc a::after {
            content: "";
            height: 1px;
            top: 28px;
            width: 0%;
            position: absolute;
            left: 0;
            background-color: var(--green-color);
            transition: 0.2s ease;
        }

        .exs-acc a:hover::after {
            width: 100%;
            transition: 0.2s ease;
        }

.product_checkout header .logo {
    left: 0;
}

.product_checkout header {
    position: relative;
}

.contact-in .input-container .input-item-email {
    grid-column: 1 / span 2;
    display: flex;
    gap: 10px;
    align-items: start;
}

.contact-in .input-container .input-item-phone {
    grid-column: 1 / span 2;
}

    .contact-in .input-container .input-item-phone .dem-txt {
        font-size: 16px;
        color: var(--gray-100);
    }

    .contact-in .input-container .input-item-phone span,
    .contact-in .input-container .input-item-email span {
        font-weight: 500;
        color: var(--green-color);
        font-style: italic;
    }

    .contact-in .input-container .input-item-phone .intl-tel-input {
        width: 100%;
    }

.contact-in .input-container .input-item-email input {
    width: 50% !important;
}

.contact-in .input-container .inp-mb span {
    color: var(--gray-100);
    font-size: 18px;
}

.order-w-details .contact-in .input-container input {
    height: 45px;
    width: 100%;
    border: 1px solid var(--gray-40);
    font-size: 18px;
    padding: 10px;
    border-radius: 6px;
    outline: none;
}

.order-w-details .input-container input::placeholder,
.address-modal .input-container input::placeholder {
    color: var(--gray-100);
}

.order-w-details .ck-tt {
    font-size: 22px;
    color: var(--green-color);
    font-weight: 500;
    padding-bottom: 12px;
    border-bottom: 3px solid #ddd;
    text-transform: capitalize;
    cursor: pointer;
}

.ck-body {
    padding: 0px 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

    .ck-body.ck-bodyActive {
        max-height: 700px;
        transition: max-height 0.3s ease-in-out;
    }

.inputAlert {
    border-color: #b82132 !important;
    color: #b82132 !important;
}

.inputAlertAgree label {
    color: #b82132 !important;
}

.edit.enabled {
    color: var(--green-color) !important;
    pointer-events: all !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    transition: 0.2s ease;
}

.error {
    border: 1px solid red;
    background-color: #ffe6e6;
    transition: 0.2s ease;
}

.placeOrder {
    opacity: 0.2;
    pointer-events: none;
    transition: 0.2s ease;
}

    .placeOrder.activePlaceorder {
        opacity: 1;
        pointer-events: all;
        transition: 0.2s ease;
    }

.order-w-details .add-payment-txt {
    font-size: 18px;
    color: var(--green-color);
    font-weight: 450;
}

.order-w-details .ck-tt .edit {
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    color: #aaa;
    pointer-events: none;
    opacity: 0.7;
    position: relative;
    top: 5px;
    transition: 0.2s ease;
}

    .order-w-details .ck-tt .edit.activeHeaders {
        color: var(--green-color) !important;
    }

.order-w-details .ck-tt .av-bl {
    font-size: 16px;
    color: var(--gray-100);
}

.order-w-details .ck-ct {
    font-size: 18px;
    color: var(--gray-100);
}

    .order-w-details .ck-ct li {
        font-size: 18px;
        color: var(--gray-100);
    }

    .order-w-details .ck-ct strong {
        font-size: 18px;
        font-weight: 700;
        color: var(--gray-100);
    }

    .order-w-details .ck-ct i {
        color: var(--green-color);
        font-weight: 450;
    }

.checkmark-opt label {
    width: calc(100% - 25px);
    font-size: 18px;
    font-weight: 400;
}

.checkmark-opt .bullet-input {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #c7c7c7;
    border: 4px solid var(--white-100);
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));
    cursor: pointer;
}

    .checkmark-opt .bullet-input.active-bullet {
        background-color: var(--green-color) !important;
    }

.billing-address .label {
    width: 80%;
}

.order-w-details .gf-ct {
    border-bottom: 3px solid #ddd;
}

    .order-w-details .gf-ct .img {
        width: 250px;
        height: 150px;
    }

        .order-w-details .gf-ct .img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

.order-w-details .ck-ct-dt {
    font-size: 18px;
    color: var(--gray-100);
}

    .order-w-details .ck-ct-dt .card-type {
        width: 50%;
    }

    .order-w-details .ck-ct-dt .card-name {
        width: 25%;
        text-align: left;
    }

    .order-w-details .ck-ct-dt .card-exp {
        width: 25%;
        text-align: right;
    }

    .order-w-details .ck-ct-dt .company {
        font-style: italic;
        font-weight: 420;
    }

/* RIGHT */

.promo-cd {
    background-color: #f3f3f3;
    padding: 12px 25px;
    border-radius: 8px;
}

    .promo-cd .promo-header {
        cursor: pointer;
        user-select: none;
    }

    .promo-cd .pr-tt {
        color: #707070;
        font-size: 18px;
    }

    .promo-cd .arrow {
        font-size: 26px;
        transition: 0.2s ease-in-out;
    }

    .promo-cd .promo-body input {
        width: 50%;
        background-color: var(--white-100);
        outline: none;
        border: 2px solid var(--gray-40);
        height: 40px;
        border-radius: 8px;
        padding: 8px;
    }

    .promo-cd #promoBody {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease-in-out;
    }

        .promo-cd #promoBody.activePromoBody {
            max-height: 60px;
        }

    .promo-cd .arrow.rotate {
        transform: rotate(90deg);
        transition: 0.2s ease-in-out;
    }

.add-credit {
    font-size: 18px;
    color: var(--gray-100);
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

.order-w-details .ck-ct a {
    text-decoration: none;
    color: var(--green-color);
}

.order-w-details .ck-ct .ck-vlm {
    text-decoration: underline;
    cursor: pointer;
}

.volumesModal {
    background-color: var(--white-100);
    padding: 50px;
    font-size: 18px;
    color: var(--gray-100);
    border-radius: 12px;
}

.address-modal .modal-body {
    padding: 50px 30px;
    padding-top: 60px;
    padding-bottom: 20px;
}

.address-modal .input-section form .input-wrapper {
    display: block;
}

    .address-modal .input-section form .input-wrapper input,
    .address-modal .input-section form .input-wrapper select {
        font-size: 16px;
    }

.address-modal .input-section .add-address {
    font-size: 16px;
}

.address-modal .input-section .zone-details-container {
    width: 100%;
}

@media screen and (max-width: 991px) {
    .contact-in .input-container {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media screen and (max-width: 768px) {
    .contact-in .input-container {
        display: grid !important;
        grid-template-columns: 1fr;
    }

        .contact-in .input-container .input-item {
            grid-column: 1 / span 2;
        }

            .contact-in .input-container .input-item input {
                font-size: 16px;
            }

        .contact-in .input-container .input-item-phone {
            flex-direction: column;
            display: flex;
            gap: 5px;
        }

            .contact-in .input-container .input-item-phone .dem-txt {
                font-size: 14px;
            }

        .contact-in .input-container .input-item-email {
            flex-direction: column;
        }

        .contact-in .input-container .input-item-phone .intl-tel-input {
            width: 100%;
        }

        .contact-in .input-container .input-item-phone span {
            order: 1;
        }

        .contact-in .input-container .input-item-phone .phone-int-cnt {
            order: 2;
        }

        .contact-in .input-container .input-item-email span {
            order: 1;
        }

        .contact-in .input-container .input-item-email input {
            order: 2;
        }

    .exs-acc {
        font-size: 16px;
    }

    .order-w-details .ck-tt {
        font-size: 18px;
    }

    .order-w-details .gf-ct .img {
        width: 140px;
        height: 80px;
    }

    .order-w-details .ck-tt .edit,
    .order-w-details .gf-ct,
    .add-credit,
    .order-w-details .ck-ct,
    .order-w-details .ck-ct li,
    .order-w-details .ck-ct strong,
    .order-w-details .ck-ct-dt,
    .checkmark-opt label {
        font-size: 16px;
    }

    .order-w-details .ck-tt .av-bl {
        font-size: 14px;
    }

    /* RIGHT */

    .promo-cd {
        padding: 12px 15px;
    }

        .promo-cd .pr-tt {
            font-size: 14px;
        }

        .promo-cd .arrow {
            font-size: 22px;
            display: inline-block;
        }

    .volumesModal {
        font-size: 16px;
        padding: 50px 20px;
        padding-bottom: 20px;
    }

    .contact-in .input-container .input-item-email input {
        width: 100% !important;
    }
}

@media screen and (max-width: 450px) {
    .address-modal .modal-body {
        padding: 50px 20px;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .input-section .zone-details input {
        font-size: 14px !important;
        padding: 8px 5px !important;
    }

    .input-section .zone-details select {
        font-size: 14px !important;
    }

    .order-w-details .ck-ct {
        padding: 0 !important;
    }

    .order-w-details .ck-ct-dt {
        padding: 0 !important;
    }

    .order-w-details .gf-ct {
        flex-direction: column;
        align-items: flex-start !important;
    }

        .order-w-details .gf-ct .img {
            width: 135px;
            height: 80px;
        }
}

/*! ~~~~~~~~~~~~~~~~~~~ CONGRATULATIONS-PAGE ~~~~~~~~~~~~~~~~~~~~~ */

.congratulations-page header {
    position: relative;
}

.congratulations-page .order-confirmation .container {
    width: 60%;
    margin: 0 auto;
}

.congratulations-page .order-cart-section .container {
    width: 60%;
    margin: 0 auto;
}

.congratulations-page .congratulations .img img {
    width: 120px;
}

.congratulations-page .congratulations h1 {
    font-size: 60px;
    font-weight: 700;
    font-family: "Roboto", serif;
}

.congratulations-page .congratulations p {
    font-size: 20px;
    color: var(--gray-100);
}

.congratulations-page .congratulations li {
    font-size: 20px;
    color: var(--gray-100);
}

.congratulations-page .congratulations strong {
    font-size: 20px;
}

.order-w-details p {
    font-size: 20px;
    color: var(--gray-100);
}

.congratulations-page .summary {
    width: 65%;
    margin: 0 auto;
}

@media screen and (max-width: 1200px) {
    .congratulations-page .order-confirmation .container {
        width: 80%;
    }

    .congratulations-page .summary {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .congratulations-page .order-confirmation .container {
        width: 100%;
    }

    .congratulations-page .congratulations li {
        font-size: 16px;
        color: var(--gray-100);
    }

    .congratulations-page .summary {
        width: 100%;
    }

    .congratulations-page .congratulations .img img {
        width: 70px;
    }

    .congratulations-page .congratulations h1 {
        font-size: 34px;
    }

    .congratulations-page .congratulations p,
    .congratulations-page .congratulations strong,
    .order-w-details p {
        font-size: 16px;
    }
}

/* ! ~~~~~~~~~~~~~~~~~~ SHOP PAGE NEW ~~~~~~~~~~~~~~~~~ */

.shoppage-new .shopby-section {
    background-color: var(--white-100);
    padding: 50px 0px;
}

.head-title {
    color: var(--gray-100);
}

.shoppage-new .product-grid {
    position: relative;
    top: 0;
    padding: 80px 0px;
    box-shadow: none;
    border-radius: 0;
}

    .shoppage-new .product-grid .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 50px 20px;
    }

/* @media screen and (max-width: 876px) {
  .shoppage-new  .grid-item {
      flex-direction: row;
      justify-content: center;
      align-items: center;
  }
  .shoppage-new .product-grid .grid-item .grid-details{
    text-align: left;
    align-items: flex-start;

  }
} */

/* todo ~~~~~~~~~~ DISCOUNT-CHECKOUT-SECTION ~~~~~~~~~~ */

.checkout-discount {
    padding: 60px 0px;
    background-color: var(--white-100);
}

    .checkout-discount .discount-cards {
        display: grid;
        grid-template-columns: repeat(3, 300px);
        gap: 40px;
        justify-content: center;
    }

        .checkout-discount .discount-cards .item {
            width: 100%;
            height: 400px;
            background-image: url("/assets/card-img.png");
            background-size: cover;
            padding: 20px;
            font-size: 18px;
            color: var(--white-100);
        }

/* todo ~~~~~~~~~~ LOGOS-SLIDER-SECTION ~~~~~~~~~~ */

.logos-slider {
    padding: 50px 0px;
    background-color: var(--bg-gray);
}

    .logos-slider .container {
        position: relative;
    }

    .logos-slider .pause-icon button {
        height: 40px;
        width: 40px;
        background-color: transparent;
        border: none;
        border-radius: 50%;
        border: 1px solid var(--gray-40);
        font-size: 22px;
        color: var(--black-100);
    }

#playPauseBtn {
    cursor: pointer;
    position: absolute;
    top: -70px;
    right: 10px;
    color: var(--black-100);
}

    #playPauseBtn i {
        color: var(--black-100);
    }

#pauseIcon {
    display: block;
}

#playIcon {
    display: none;
}

.paused #pauseIcon {
    display: none;
}

.paused #playIcon {
    display: block;
}

.logos {
    overflow: hidden;
    position: relative;
    display: flex;
}

.logos-slide {
    display: flex;
    animation: scroll 15s linear infinite;
    -webkit-animation: scroll 15s linear infinite;
}

    .logos-slide .slide-item {
        height: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-direction: column;
        padding: 0px 30px;
        text-align: center;
    }

        .logos-slide .slide-item img {
            height: auto;
            object-fit: cover;
        }

        .logos-slide .slide-item .dsc {
            font-size: 16px;
            color: var(--gray-100);
        }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50%));
    }
}

/* todo ~~~~~~~~~~ ACHIEVING-SECTION ~~~~~~~~~~ */

.benefits-section {
    padding: 50px 0px;
}

    .benefits-section .ach-tt {
        font-size: 24px;
        color: var(--gray-100);
        font-family: "Roboto", serif;
    }

    .benefits-section .benefits-slider .product-img {
        height: 120px;
        width: 120px;
        border-radius: 50%;
        overflow: hidden;
    }

        .benefits-section .benefits-slider .product-img img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

/* ! RESPONSIVE */

@media screen and (max-width: 991px) {
    .shopby-section .category-items {
        width: 90%;
    }

    .checkout-discount .discount-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

        .checkout-discount .discount-cards .item {
            height: 450px;
        }
}

@media screen and (max-width: 768px) {
    .shopby-section .category-items {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px;
    }

        .shopby-section .category-items .ctg-item .icon {
            height: 50px;
            width: 50px;
        }

        .shopby-section .category-items .ctg-item .ctg-nm {
            font-size: 16px;
        }

    .checkout-discount .discount-cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
    }

        .checkout-discount .discount-cards .item {
            height: 350px;
        }

    .logos-slider {
        padding: 50px 0px;
        background-color: var(--bg-gray);
    }

    .logos-slide .slide-item {
        padding: 0px 20px;
    }

        .logos-slide .slide-item .dsc {
            font-size: 14px;
        }

    /* ? */
    .benefits-section .ach-tt {
        font-size: 18px;
    }

    .benefits-section .benefits-slider .product-img {
        height: 75px;
        width: 75px;
    }

    .benefits-section .benefits-slider .product-details h5 {
        font-size: 18px;
    }
}

@media screen and (max-width: 576px) {
    .benefits-section .benefits-slider .product-item .product-details {
        padding: 8px 5px;
    }

    .logos-slide .slide-item img {
        height: 50px;
    }

    .logos-slide .slide-item {
        padding: 0px 20px;
    }

    #playPauseBtn {
        top: -50px;
    }
}