@media only screen and (max-width: 767px) {
    .main-nav nav .navbar-nav .nav-item.agent-register a {
        display: inline;
    }

    .content-wrapper {
        padding-top: 40px;
    }

    /* WELCOME PAGE DESIGN   WELCOME PAGE DESIGN  WELCOME PAGE DESIGN  WELCOME PAGE DESIGN  WELCOME PAGE DESIGN  WELCOME PAGE DESIGN  WELCOME PAGE DESIGN  WELCOME PAGE DESIGN */

    .banner .hero-content {
        width: 100%;
        max-width: 100%;
        padding-top: 70px;
    }

    .banner .hero-content .headline {
        padding-inline: 5px;
    }

    .banner .hero-content .headline h1 {
        font-size: 24px;
        line-height: 36px;
    }

    .banner .hero-content .headline p {
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        width: 100%;
        color: #010c22;
        margin-top: 30px;
    }

    .banner .hero-content .headline .cta-button {
        padding: 8px 16px;
        margin-top: 20px;
        font-size: 14px;
    }

    .banner .hero-content .hero-cert-bg {
        margin-top: 140px;
    }

    .banner .decorations .button-left {
        display: none;
    }

    .banner .decorations .icon-left1 {
        top: 250px;
        left: 40px;
    }

    .banner .decorations .icon-left2 {
        top: 370px;
        left: 120px;
    }

    .banner .decorations .arrow {
        top: 40%;
        left: 10%;
    }

    .banner .decorations .icon-right1 {
        top: 60px;
        right: 220px;
    }

    .banner .decorations .icon-right3 {
        top: 290px;
        right: 40px;
    }

    .banner .decorations .button-right {
        position: absolute;
        content: "";
        bottom: 220px;
        right: 120px;
    }

    /* General animation timing */
    .banner .decorations img {
        animation-duration: 4.2s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    /* Animation for icon-left1: Rotate continuously */
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .banner .decorations .icon-left1 img {
        animation-name: rotate;
    }

    .banner .decorations .arrow img {
        display: block;
        animation: moveLeftRight 4s ease-in-out infinite;
    }

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

        50% {
            transform: translateX(40px);
        }

        100% {
            transform: translateX(0);
        }
    }

    /* Animation for icon-left2: Bounce up and down */
    @keyframes bounce {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    .banner .decorations .icon-left2 img {
        animation-name: bounce;
    }

    @keyframes hexagonalMotion {
        0% {
            transform: translate(0, 0);
        }

        16.6% {
            transform: translate(20px, -40px);
        }

        33.2% {
            transform: translate(60px, -40px);
        }

        49.8% {
            transform: translate(80px, 0);
        }

        66.4% {
            transform: translate(60px, 40px);
        }

        83% {
            transform: translate(20px, 40px);
        }

        100% {
            transform: translate(0, 0);
        }
    }

    .banner .decorations .icon-right1 img {
        display: inline-block;
        animation: hexagonalMotion 15s ease-in-out infinite;
    }

    @keyframes scaleAnimation {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(0.3);
        }
    }

    .banner .decorations .icon-right3 img {
        display: inline-block;
        animation: scaleAnimation 6s ease-in-out infinite;
    }

    /* BRAND  */
    .brand-section {
        padding-top: 30px;
        padding-bottom: 90px;
    }

    .brand-section.brand-section-for-price-plan {
        padding-bottom: 0px;
        position: relative;
    }

    .brand-section .brand-logo-area {
        background-color: #001e14;
        padding: 10px 0;
    }

    .brand-section .brand-logo-area .brand-logo-item h2 {
        color: #99a5a1;
        font-size: 22px;
    }

    .brand-section .brand-logo-area .owl-carousel .owl-item {
        width: 200px !important;
    }

    .brand-logo-slider .brand-logo-item {
        justify-content: center !important;
        align-items: center;
        gap: 40px;
    }

    .brand-section .main-content {
        margin-top: 30px;
    }

    .brand-section .main-content .left h2 {
        font-size: 26px;
        line-height: 42px;
        width: 100%;
        max-width: 406px;
    }

    .brand-section .main-content .right {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        width: 100%;
        max-width: 345px;
        margin-top: 30px;
    }

    .brand-section .main-content .right p {
        font-size: 16px;
    }

    .brand-section .main-content .right .pay-plan {
        display: flex;
        justify-content: start;
        align-items: start;
    }

    .brand-section .main-content .right .cta-button {
        padding: 8px 16px;
        z-index: 1;
        font-size: 14px;
    }

    /* TESTIMONIAL  */
    .deco1 {
        display: inline-block;
        animation: rotateImage 4s linear infinite;
    }

    @keyframes rotateImage {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .testimonial-decoration .deco2 {
        position: absolute;
        content: "";
        top: 100px;
        left: 350px;
    }

    .testimonial-decoration .deco3 {
        position: absolute;
        content: "";
        top: 119px;
        left: 338px;
    }

    .testimonial-area {
        padding-top: 70px;
    }

    .testimonial-image .main-img {
        width: 300px;
    }

    /* PRICING  */
    .pricing-section {
        padding: 70px 0px;
        padding-bottom: 100px;
    }

    .pricing-section .rect-shape img {
        position: absolute;
        width: 100%;
        bottom: 0;
        content: "";
    }

    .pricing-section .section-title {
        font-size: 22px;
        line-height: 25px;
    }

    .pricing-section .sub-title {
        font-size: 13px;
    }

    .pricing-section .pricing-cards {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
        margin-top: 40px;
        max-width: 100%;
    }

    .pricing-section .pricing-cards .option {
        border-radius: 8px;
        border: 1px solid #aebbb6;
        padding: 40px 16px 16px 16px;
        border-radius: 8px;
        z-index: 1;
    }

    .pricing-section .pricing-cards .option .option-badge {
        font-size: 12px;
    }

    .pricing-section .pricing-cards .option .type {
        font-size: 13px;
        line-height: 18px;
        font-weight: 500;
    }

    .pricing-section .pricing-cards .option .price {
        font-size: 24px;
        line-height: 24px;
        margin-top: 10px;
    }

    .pricing-section .pricing-cards .option .price .duration {
        font-size: 14px;
        line-height: 24px;
    }

    .pricing-section .pricing-cards .option .price .currency {
        font-size: 14px;
    }

    .pricing-section .pricing-cards .option .payment-info {
        font-family: var(--poppins-font);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        text-align: left;
        color: #010c22;
        margin-top: 20px;
    }

    /* .pricing-section .pricing-cards .option:hover .payment-info {
    color: #fff;
} */

    .pricing-section .pricing-cards .option ul {
        padding-left: 0px !important;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 20px;
    }

    .pricing-section .pricing-cards .option ul li {
        font-size: 12px;
        line-height: 18px;
    }

    .pricing-section .pricing-cards .option .choose-plan {
        padding: 8px 16px;
        font-size: 14px;
    }

    .footer-widget .footer-img h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
    }

    .footer-widget p {
        max-width: 258px;
        margin-bottom: 20px;
        color: #d9d9d9;
        font-size: 12px;
    }

    .footer-widget .footer-social-icon .footer-register {
        font-size: 14px;
        padding: 8px 16px;
    }

    .footer-widget .image1 {
        position: relative;
        z-index: 5;

    }

    .footer-widget .image1 img {
        width: 160px;
        position: absolute;
        right: 20px;
        bottom: -80px;
    }

    .footer-widget .holder {
        margin-top: -10px;
        z-index: 1;
        position: relative;
    }

    .footer-widget .holder img {
        height: 85px;
    }

    /* SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE  SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE SIGNUP PAGE SINGUP PAGE */
    .sign-in-area {
        padding-top: 50px !important;
        padding-bottom: 40px;
    }

    .sign-in-area .side-image {
        display: flex;
        justify-content: center !important;
    }

    .user-all-img {
        margin-bottom: 0px;
        width: 180px;
    }

    .contact-form {
        padding: 30px 20px 25px 20px;
        width: 100%;
    }

    .contact-form .section-title h2 {
        font-size: 20px;
        line-height: 25px;
    }

    .contact-form .section-title span {
        font-size: 13px;
        line-height: 18px;
    }

    .user-all-form .contact-form .account-desc {
        font-size: 14px;
    }

    /* PLAN PAYMENT METHOD PLAN PAYMENT METHOD PLAN PAYMENT METHOD PLAN PAYMENT METHOD PLAN PAYMENT METHOD PLAN PAYMENT METHOD PLAN PAYMENT METHODPLAN PAYMENT METHOD PLAN PAYMENT METHOD  PLAN PAYMENT METHOD */

    .CAC-content .content .payment-card {
        max-width: 460px;
    }

    .CAC-content .content .payment-card .form-content {
        padding: 16px;
        border-radius: 8px;
        margin-top: 25px;
    }

    .CAC-content .content .payment-card .form-content .type {
        font-family: var(--poppins-font);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        text-align: left;
        color: #010c22;
    }

    .CAC-content .content .payment-card .form-content .price {
        font-size: 24px;
        line-height: 40px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .CAC-content .content .payment-card .form-content .price .currency {
        font-size: 14px;
    }

    .payment-card .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .payment-card .form-group .bank-logo {
        position: absolute;
        top: 42px;
        right: 20px;
    }

    .payment-card .after-payment {
        padding: 8px 16px;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        margin-top: 20px;
    }

    .payment-card .timer {
        margin-bottom: 60px;
        margin-top: 10px;
    }

    .payment-card .timer span {
        font-weight: 500;
    }

    /* SUCCESSFUL PAYMENT MODAL  */
    .successful-payment-modal .body-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 20px;
    }

    .successful-payment-modal .body-content img {
        width: 300px;
    }

    .successful-payment-modal .body-content h2 {
        font-size: 18px;
        line-height: 22px;
    }

    .successful-payment-modal .body-content p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 30px;
    }

    /* LIABILITY PLAN PAGE  */
    .liability-plan {
        max-width: 100%;
        margin-top: 30px;
    }

    .liability-plan .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .liability-plan .info-section h2 {
        font-size: 14px;
    }

    .liability-plan .info-section p {
        font-size: 12px;
    }

    .liability-plan .info-section .payment-plans {
        background: #e6f9f2;
        border: 1.5px solid #007a4f;
        padding: 16px;
        border-radius: 8px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .liability-plan .continue-btn {
        margin-bottom: 60px !important;
    }

    /* CAC PLAN REGIGRATION  CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION CAC PLAN REGIGRATION */
    .CAC-content .content:not(.two-column-layout) {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* Two-column layout stacks on mobile */
    .CAC-content .content.two-column-layout {
        grid-template-columns: 1fr;
    }

    .CAC-content .content .right {
        background: #f4fffb;
        padding: 40px 30px;
    }

    .faq-accordion .accordion .accordion-title {
        font-size: 14px;
    }

    .faq-accordion .accordion .accordion-content p {
        line-height: 22px;
        font-size: 13px !important;
    }

    .CAC-content .content .right .section-title span {
        font-family: var(--cabinet-font);
        font-size: 20px;
        font-weight: 700;
        line-height: 24.8px;
        text-align: left;
    }

    .CAC-content .content .right .faq-content {
        margin-top: 30px;
    }

    .CAC-content .content .left {
        padding-inline: 15px;
        padding-top: 55px;
    }

    .CAC-content .content .left .left-title h2 {
        font-family: var(--cabinet-font);
        font-size: 20px;
        line-height: 25px;
    }

    .CAC-content .content .left .left-title .sub-title {
        font-size: 13px;
        line-height: 18px;
    }

    .CAC-content .steps-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 25px;
    }

    .CAC-content .steps-container .step {
        display: flex;
        align-items: center;
        gap: 3px;
        color: #99a5a1;
    }

    .CAC-content .steps-container .step.active {
        color: #010307;
    }

    .CAC-content .steps-container .step-number {
        width: 15px;
        height: 15px;
        font-size: 9px;
    }

    .CAC-content .steps-container .step.active .step-label {
        color: #010307;
    }

    .CAC-content .steps-container .step.active .step-number {
        background-color: #00be7c;
        color: #fff;
    }

    .CAC-content .steps-container .step-label {
        font-size: 11px;
    }

    .CAC-content .plan-card {
        width: 100%;
        max-width: 600px;
        background: #fbfbfb;
        border-radius: 8px;
        padding: 20px;
        font-family: "Poppins", serif;
        margin-top: 30px;
    }

    .CAC-content .plan-card .plan-header h2 {
        font-size: 24px;
        font-weight: 600;
        text-align: left;
        margin-bottom: 0px;
    }

    p {
        margin-bottom: 0px;
    }

    .CAC-content .plan-card .plan-subheader {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .CAC-content .plan-card .plan-subheader .plan-type {
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 0px !important;
    }

    .CAC-content .plan-card .plan-subheader .next-pay-btn {
        border-radius: 25px;
        padding: 8px 14px;
        font-size: 12px;
        cursor: pointer;
    }

    .CAC-content .plan-card .progress-container {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 290px;
        margin-block: 35px;
    }

    .CAC-content .plan-card .progress-container .progress-bar {
        width: 100%;
        height: 6px;
        margin-right: 10px;
    }

    .CAC-content .plan-card .progress-container .progress-text {
        font-size: 10px;
        font-weight: 500;
        text-align: left;
    }

    .CAC-content .plan-card .amount-details {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .CAC-content .plan-card .amount-details:last-child {
        padding-right: 10px;
    }

    .CAC-content .plan-card .amount-details .amount-item p:first-child {
        font-size: 10px;
        font-weight: 500;
    }

    .CAC-content .plan-card .amount-details .amount-item p:last-child {
        font-size: 14px;
    }

    .CAC-content .payment-breakdown-card {
        width: 100%;
        max-width: 100%;
        padding-block: 24px;
        padding-bottom: 0px;
        padding-inline: 3px;
    }

    .CAC-content .payment-title {
        font-size: 12px;
        font-weight: 500;
    }

    .CAC-content .payment-breakdown-card .payment-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .CAC-content .payment-table th {
        text-align: left;
        color: #2d3130;
        padding-bottom: 10px;
        font-size: 12px;
        padding-right: 0px;
        padding-inline-start: 10px;
    }

    .CAC-content .payment-table td {
        padding: 20px 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 24px;
    }

    .CAC-content .payment-table td.active {
        color: #010307;
    }

    .CAC-content .payment-table td .circle {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        color: #fff;
        border-radius: 50%;
        font-size: 10px;
        margin-right: 12px;
        background: #99a5a1;
    }

    .CAC-content .payment-table td .paid.circle {
        background: #00be7c !important;
    }

    .CAC-content .payment-table td .status-paid {
        color: #00be7c;
    }

    .CAC-content .continue-btn {
        padding: 8px 16px;
        margin-top: 30px;
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* SELECT PLAN  */
    .pricing-container {
        margin-top: 40px;
    }

    .pricing-container .pricing-header {
        font-family: var(--poppins-font);
        font-size: 18px;
        font-weight: 500;
        line-height: 27px;
        text-align: left;
        color: #1e1e1e;
        margin-bottom: 30px;
        display: none;
    }

    .pricing-container .pricing-options {
        display: grid;
        /* minmax(0, 1fr), not a bare 1fr: a bare 1fr track has an implicit
           auto (content-based) minimum, so the pricing-option cards inside
           were stopping this track from ever shrinking below their own
           content width, overflowing the viewport. */
        grid-template-columns: minmax(0, 1fr);
        row-gap: 30px;
        width: 100%;
        max-width: 500px;
    }

    .pricing-container .pricing-options .pricing-option {
        width: 100%;
        display: flex;
        gap: 15px;
    }

    .pricing-container .pricing-options .pricing-option .pricing-content {
        padding: 40px 16px 16px 16px;
    }

    .pricing-container .pricing-options .pricing-content .tag {
        padding: 2px 8px;
        font-size: 12px;
    }

    .pricing-container .pricing-options .pricing-content .type {
        font-size: 12px;
    }

    .pricing-container .pricing-options .pricing-content .price {
        font-size: 24px;
    }

    .pricing-container .pricing-options .pricing-content .price .currency {
        font-size: 14px;
    }

    .pricing-container .pricing-options .pricing-content .price .duration {
        font-size: 14px;
    }

    .pricing-container .pricing-options .pricing-content .payment-info {
        font-size: 14px;
        line-height: 21px;
    }

    .pricing-container .pricing-options .pricing-content hr {
        margin: 0.5rem 0;
    }

    .pricing-container .pricing-options .pricing-content ul {
        padding-left: 15px !important;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 0px;
    }

    .pricing-container .pricing-options .pricing-content ul li {
        font-size: 12px;
        line-height: 18px;
    }

    .pricing-container .pricing-option .radio-btn {
        margin-top: 25px;
    }

    .pricing-container .pricing-option .radio-btn {
        margin-top: 25px;
    }

    .pricing-container .pricing-option .radio-btn input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    /* PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILSPERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS PERSONAL DETAILS */

    .personal-details {
        width: 100%;
        margin-top: 55px;
        padding-bottom: 60px;
    }

    .personal-details .title h2 {
        font-size: 20px;
        line-height: 25px;
    }

    .steps-container {
        display: flex;
        flex-wrap: wrap;
    }

    .personal-details .steps-container {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 25px;
        position: relative;
        flex-wrap: wrap;
    }

    .personal-details .steps-container .step {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #99a5a1;
    }

    .personal-details .steps-container .step.active {
        color: #010307;
    }

    .personal-details .steps-container .step.active .step-number {
        background-color: #00be7c;
        color: #fff;
    }

    .personal-details .steps-container .step-number {
        width: 15px;
        height: 15px;
        display: flex;
        font-size: 10px;
        font-weight: 500;
    }

    .personal-details .steps-container .step.active .step-label {
        color: #010307;
    }

    .personal-details .steps-container .step-label {
        font-size: 10px;
        font-weight: 500;
        text-align: left;
    }

    .personal-details .save-to-continue-later {
        padding: 8px 16px;
        font-size: 14px;
        margin-left: 0px;
        position: absolute;
        right: 10px;
        top: 45px;
    }

    .personal-details .form-details {
        margin-top: 100px;
        display: flex;
        gap: 40px;
        flex-direction: column;
        max-width: 930px;
    }

    .personal-details .form-details .information h5 {
        font-family: var(--poppins-font);
        font-size: 14px;
    }

    .personal-details .form-details .information .content {
        padding: 15px;
        border-radius: 12px;
        background: #fbfbfb;
    }

    .personal-details .form-details .information .content .form-group label {
        font-family: var(--poppins-font);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        text-align: left;
        color: #1e1e1e;
    }

    .personal-details .form-details .information .content .form-group .form-control {
        height: 50px;
        color: #1e1e1e;
        background-color: #ffffff;
        border-radius: 0;
        font-size: 14px;
        padding: 10px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #aebbb6;
    }

    .custom-file-label {
        padding: 10px 15px;
        border: 1px solid #aebbb6;
        height: 50px;
    }

    .personal-details .btn-continue {
        padding: 8px 16px;
        font-size: 14px;
        width: 100%;
    }





    /* SERVICES PAGE CSS  */
    .service-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 25px;
        row-gap: 15px;
        padding-inline: 20px;
    }

    .section-title span {
        font-size: 14px;
    }



    /* my services  */
    .my-services {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 30px;
        row-gap: 30px;
    }

    .price-width {
        margin-top: 35px;
        max-width: 100%;
        padding: 50px 5px 20px 5px;
    }


    .pricing-card .pricing-card-into {
        padding: 0 15px 20px;
    }

    .pricing-card .pricing-card-into h3 {
        font-size: 14px;
        padding: 7px 3px;
    }

    .pricing-card .price-rate span {
        font-size: 12px;
    }

    .pricing-card .view-info-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .register-agent-button a {
        display: none !important;
    }
}