@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,800&family=Roboto:wght@400;700&display=swap');
    :root{
        --bs-primary: #4a60ef;
        --bs-white: #FFFFFF;
        --bs-black: #0F172A;
        --bs-gray-50: #f8fafc;
        --bs-gray-100: #F1F5F9;
        --bs-gray-300: #CBD5E1;
        --bs-gray-400: #94a3b8;
        --bs-gray-600: #475569;
    }
    .bg-primary{
        background-color: var(--bs-primary)!important;
    }
    .gray-50{
        color: var(--bs-gray-50)!important;
    }
    .gray-100{
        color: var(--bs-gray-100)!important;
    }
    .gray-300{
        color: var(--bs-gray-300)!important;
    }
     .gray-400{
        color: var(--bs-gray-400)!important;
    }
    .gray-600{
        color: var(--bs-gray-600)!important;
    }


    .text-gray-300{
        color: var(--bs-gray-300)!important;
    }
    .text-gray-600{
        color: var(--bs-gray-600)!important;
    }
    .bg-gray-50{
        background-color: var(--bs-gray-50)!important;
    }
    .bg-gray-100{
            background-color: var(--bs-gray-100)!important;
    }
    .bg-gray-300{
            background-color: var(--bs-gray-300)!important;
    }
    .bg-gray-400{
            background-color: var(--bs-gray-400)!important;
    }
    .bg-gray-600{
            background-color: var(--bs-gray-600)!important;
    }


    .text-primary{
        color: var(--bs-primary)!important;
    }

    .primary{
        color: var(--bs-primary)!important;
    }
    .border-primary{
        border-color: var(--bs-primary)!important;
    }

    a{
        color: var(--bs-primary)!important;
        text-decoration: none;
    }
    section{
        margin-bottom: 150px;
    }




    h1{
        font-family: Roboto;
        font-size: 64px;
        font-style: normal;
        font-weight: 800;
        line-height: 72px;
    }

    h2{
        text-align: center;
        font-family: Roboto;
        font-size: 56px;
        font-style: normal;
        font-weight: 800;
        line-height: 68px;
    }
    h3{
        font-size: 24px!important;
    }
    h4{
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 110%;
    }
    h6{
        font-family: DM Sans;
        font-size: 54px;
        font-style: normal;
        font-weight: 700;
        line-height: 66px;
    }


    .mvb-form, .mvb-faq{
        border-radius: 24px;
        background: var(--bs-white);
        box-shadow: 0px 2px 12px 0px rgba(20, 20, 43, 0.08);

    }

    .mvb-eye:hover {
        transform: scale(1.2) rotate(5deg);
    }

    #inputMessage{
        display: flex;
        width: 97%;
        height: auto;
        padding: 14px 16px;
        align-items: flex-start;
        gap: 8px;
        flex-shrink: 0;
    }


    .navbar{
        display: flex;
        padding: 24px 80px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border-bottom: 1px solid var(--bs-gray-100);
    }
    .navbar-brand{
        width: 160.2px;
        height: 55.94px;
    }
    .zoom-in {
        transition: transform 0.3s;
    }

    .zoom-in:hover {
        transform: scale(1.1);
        background: #4a60d0!important;
        border: #4a60d0!important;
    }
    .zoom-in-2 {
        transition: transform 0.3s;
    }

    .zoom-in-2:hover {
        transform: scale(1.1);
        background: #fafafa!important;
    }

    .button {
        display: block;
        width: max-content;
        justify-content: center;
        padding: 12px 20px;
        text-decoration: none;
        border-radius: 10px;
        border: 2px solid var(--bs-primary);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0.5px;
        transition: all 0.2s linear 0s;
        position: relative;
    }


    .logo-footer{
        max-width: 100% !important;
        height: fit-content !important;
    }

    .button-2{
        display: block;
        width: max-content;
        justify-content: center;
        padding: 12px 20px;
        text-decoration: none;
        border-radius: 10px;
        border: 2px solid var(--bs-primary);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        letter-spacing: 0.5px;
        transition: all 0.2s linear 0s;
        position: relative;
    }



    .effect {
      text-align: center;
      background-color: #4a60ef;
      font: {
        family: 'Roboto', sans-serif;
        size: 18px;
      }
      padding: 20px 0px;
      width: 190px;
      border-radius: $border-radius;
      overflow: hidden;
    }


    ul{
        display: inline-flex;
        flex-direction: column;
        gap: 20px;
    }

    .accordion-button{
        font-feature-settings: 'clig' off, 'liga' off;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
    }


    .accordion-flush .accordion-item::after {
        width: 50%;
    }

    .form-control{
        width: 95%;
        height: 56px;
        flex-shrink: 0;
        border-radius: 8px;
    }
    .card {
        border-radius: 24px;
        border: 1px solid var(--bs-gray-50);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
    }


    ul.mvb-checklist-white li, ul.mvb-checklist li{
        display: flex;
    }

    .button-2:hover:not(.mvb-selected){
        background: #f5f5f5!important;
    }


    body{
        font-size: 16px;
        line-height: 28px;
        font-feature-settings: 'clig' off, 'liga' off;
        font-style: normal;
        font-weight: 400;
        font-family: Roboto;
    }

    .period {
        color: var(--bs-gray-400);
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        font-family: Roboto;
    }

    .row .card:nth-child(2) , ul.mvb-checklist-white li::before, ul.mvb-checklist li::before{
        margin-right: 15px;

    }
    .row .card:nth-child(2) , ul.mvb-checklist-white li, ul.mvb-checklist li{
        display: flex;
    }
    .card:nth-child(2) .period{
        color: var(--bs-white)!important;
    }

    .package_card .row .d-flex:nth-child(2) .card-body .period{
        color: var(--bs-white)!important;
    }
    .package_card .row .d-flex:nth-child(2) .card-body .button{
         background: var(--bs-white)!important;
         color: var(--bs-primary)!important;
    }

    .package_card .row .d-flex {
        display: flex;
        align-items: stretch;
    }

    .package_card .row .d-flex .card-body {
        flex-grow: 1;
    }

    .package_card .row .d-flex:nth-child(1) .card-body,
    .package_card .row .d-flex:nth-child(3) .card-body {
        flex-direction: column;
    }


    .package_card .row .d-flex:nth-child(2) .item_heading {
        display: block;
    }

    .package_card .row .d-flex:not(:nth-child(2)) .item_heading {
        display: none;
    }

    .accordion-button:focus {
        z-index: none!important;
        border-color: none!important;
        outline: none;
        box-shadow: none;
        color: var(--bs-accordion-btn-color);
        text-align: left;
        background-color: var(--bs-accordion-btn-bg);
        border: 0;
    }
        .mvb-check img{
        margin-right: 10px;
    }
    ul.mvb-check li {
        display: flex;
        align-items: start;
        margin-right: 10px;
    }
    .package_card .row > .d-flex:nth-child(1),
    .package_card .row > .d-flex:nth-child(3) {

        min-height: 90%;
    }

    .package_card .row .d-flex:nth-child(2) .card-body {
        height: 100%!important;
        background: var(--bs-primary)!important;
        color: var(--bs-white)!important;
        border-radius: 24px;
        border: 1px solid var(--bs-primary);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

    }



    /*start now button*/
    .effect.effect-1{
      transition: all 0.2s linear 0s;


      &:before {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        top: 3px;
        opacity: 0;
        height: 100%;
        width: 40px;
        transition: all 0.2s linear 0s;
      }

      &:hover {
        text-indent: -20px;
        background: #4a60d0!important;
        border-color: #4a60d0!important;


        &:before {
          opacity: 1;
          text-indent: 0px;
        }
      }
    }
    /*See demo arrow right*/
    .effect.effect-3{
      transition: all 0.2s linear 0s;


      &:before {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 75px;
        top: 5px;
        opacity: 0;
        height: 100%;
        width: 40px;
        transition: all 0.2s linear 0s;
      }

      &:hover {
        text-indent: -20px;
        background: #27272a!important;
        border-color: #f5f5f5!important;

        &:before {
          opacity: 1;
          text-indent: 0px;
        }
      }
    }


    .accordion-button::after {
        width: 14px;
        height: 14px;
        display: flex;
        background-image: none;
        padding: 0px;
    }
    .accordion-button:not(.collapsed)::after {
        background-image: none;
    }

     ul.mvb-checklist li::before, ul.mvb-checklist li::before{
        margin-right: 15px;
     }
      ul.mvb-checklist-white li, ul.mvb-checklist li{
        display: flex;
    }
     .period {
        color: var(--bs-gray-400);
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        font-family: Roboto;
    }
    .card-price {
        font-family: DM Sans;
    }
    .item_heading  {
        font-size: .8752rem;
        padding: 13px 15px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.20);
        width: auto;
        height: auto;
        float: right;
    }
    .package_card .row .d-flex:nth-child(2) .card-body {
        height: 100%!important;
        background: var(--bs-primary)!important;
        color: var(--bs-white)!important;
        border-radius: 24px;
        border: 1px solid var(--bs-primary);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07), 0px 25px 50px -12px rgba(0, 0, 0, 0.25);

    }


    .accordion-button::after {
         width: 14px;
        height: 14px;
        display: flex;
        background-image: none;
        padding: 0px;

    }
    .mvb-check img{
        margin-right: 10px;
    }
    ul.mvb-check li {
        display: flex;
        align-items: start;
        margin-right: 10px;
    }
    .package_card .row > .d-flex:nth-child(1),
    .package_card .row > .d-flex:nth-child(3) {

        min-height: 90%;
    }

    .radio-group {
        display: flex;
        justify-content: space-between;
        @media (max-width: 1000px) {
            flex-direction: column;
        }
    }

    
    .radio-group input[type="radio"] {
        display: none;
    }
    
    .radio-group label {
        display: inline-block;
        padding: 15px;
        border: 2px solid #4a60ef;
        background-color: white;
        color: #4a60ef;
        cursor: pointer;
        border-radius: 5px;
        width: 300px;
        margin: 10px;
        text-align: center;
        font-size: 19px;
    }
    @media (max-width: 1000px) {
        .radio-group label {
            width: 360px;
        }
    }