/* webfonts */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Light.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraLight.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Thin.woff2') format('woff2'),
        url('../fonts/Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* webfonts end */

:root {
    --primary-color: #960000;
    --secondary-color: #F7F7F7;
    --white: #fff;
    --black: #000;
    --border-color: #E8E8E8;
    --text-color: #282828;
    --heading-color: #000000;
    --border-color: #E7E7E7;
    --gray-color: #9A9A9A;
}

html {
    margin: 0;
}

body {
    font-family: 'Plus Jakarta Sans';
    overflow-x: hidden;
    color: var(--black);
}

main {
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    white-space: normal;
    word-break: break-word;
    font-family: 'Plus Jakarta Sans';
    font-weight: 700;
    line-height: 1.1;
    color: var(--heading-color);
}

h1 {
    font-size: 80px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 16px;
}


a,
p,
button,
span {
    white-space: normal;
    word-break: break-word;
    margin-bottom: 0;
}

a {
    text-decoration: none !important;
    display: inline-block;
    color: var(--black);
}


a:focus-visible {
    outline: transparent;
}

.page-link:focus {
    box-shadow: none;
}

.file>input[type='file'] {
    display: none;
}

.module-msg {
    font-size: 16px;
    margin: 0;
    max-width: 70%;
    text-align: center;
}

/* header {
    position: sticky;
    top: 0;
    z-index: 999;
} */
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

button:focus {
    box-shadow: none !important;
    outline: transparent;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: unset;
}

.form-control:focus,
input {
    outline: 0;
    border-color: #C9C9C9;
}

.formfield {
    position: relative;
    width: 100%;
}

img {
    max-width: 100%;
}


::-webkit-scrollbar {
    width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(255, 255, 255);
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--black);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--black);
}

.button {
    min-height: 54px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    padding: 8px 35px;
    max-width: fit-content;
    width: 100%;
    border: 1px solid transparent;
}

.primary-btn {
    background-color: var(--primary-color);
    box-shadow: 0px 0px 10px 0px #84848426;
    color: var(--white);
    &:hover{
        color: #fff;
    }
}

.outline-btn {
    background-color: #fff;
    color: var(--black);
    border: 1px solid var(--black);
    box-shadow: 0px 0px 10px 0px #84848426;

    &:hover {
        background-color: var(--primary-color);
        color: var(--white);
        border-color: transparent;
    }
}

.full-btn {
    width: 100%;
    max-width: 100%;
}


.container {
    max-width: 1600px;
}

.form-field {
    width: 100%;
    position: relative;
}

.formfield:has(.form-icon) input {
    padding-right: 50px;
}


.formfield {
    position: relative;
    width: 100%;
}

.form-group label {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 3px;
    /* text-transform: uppercase; */
}

.form-group {
    margin-bottom: 10px;
}

.form-icon {
    position: absolute;
    right: 18px;
    top: 20px;
    display: flex;
    align-items: center;
}

.form-control {
    border: 1px solid #C9C9C9;
    border-radius: 4px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: #46474A;
    min-height: 60px;
}

.form-control::placeholder {
    color: #1B1B1B;
}

/* ================== register CSS ===================== */
.navbar {
    padding: 32px 0px;
}

.nav-btn-grp {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.nav-btn-grp .button {
    min-height: 47px;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-toggler span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 6px auto;
    background: var(--primary-color);
    transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

.navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(45deg) translate(4px, 5px);
}

.navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(-45deg) translate(7px, -7px);
}

.custm-navbar .navbar-collapse .navbar-nav li a {
    padding: 0;
    font-size: 18px;
    line-height: 31px;
    font-weight: 500;
    color: #000;
}

.custm-navbar .navbar-collapse .navbar-nav {
    gap: 32px;
}

.login-wrapper {
    display: flex;
}

.login-form-box {
    /* max-width: 807px; */
    width: 100%;
    position: relative;
    background-color: var(--primary-color);
    background-image: url(../images/login-bg.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    padding: 108px 0px 60px;
}

.login-form-card {
    max-width: 530px;
    background-color: #fff;
    margin: 0 auto;
    padding: 35px 60px 45px;
    border-radius: 10px;
    box-shadow: 0px 0px 70.6px 0px #0000001A;
}

.login-form-card>h3 {
    font-size: 28px;
    line-height: 36px;
    text-align: center;
    margin-bottom: 36px;
    font-weight: 700;
    font-family: 'Roboto';
}

.login-form-card {
    font-family: 'Roboto';
}

.custom-check-box {
    width: 22px;
    height: 22px;
    border: 1px solid #1B1B1B;
    border-radius: 5px;
}

.remember-me:has(input[type="checkbox"]:checked) .custom-check-box {
    background-color: #1B1B1B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M5.05469 9.79688C5.28906 10.0312 5.6875 10.0312 5.92188 9.79688L12.8125 2.90625C13.0469 2.67188 13.0469 2.27344 12.8125 2.03906L11.9688 1.19531C11.7344 0.960938 11.3594 0.960938 11.125 1.19531L5.5 6.82031L2.85156 4.19531C2.61719 3.96094 2.24219 3.96094 2.00781 4.19531L1.16406 5.03906C0.929688 5.27344 0.929688 5.67188 1.16406 5.90625L5.05469 9.79688Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.remember-me {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0px 34px;
}

.remember-me label {
    font-size: 15px;
    line-height: 25px;
    color: #000;
    font-weight: 500;
    cursor: pointer;
}

.login-form-card .login-form .primary-btn {
    min-height: 60px;
    margin-bottom: 6px;
}

.login-gallery {
    width: 100%;
}

.login-gallery img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.flex-end-box {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
}

.login-form-card .login-form .flex-end-box {
    padding: 7px 0px 16px;
}

.underline-text {
    text-decoration: underline !important;
}

.login-form-card .login-form .flex-end-box a {
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
}

.divider {
    width: 100%;
    height: 1px;
    border-top: 1px dashed #212121;
    opacity: 0.5;
    margin: 16px 0px 23px;
}

.already-acc-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.already-acc-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
}

.already-acc-text a {
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    color: var(--primary-color);
}

.mini-footer {
    padding: 20px 0 18px;
}

.mini-footer-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-footer-box p {
    font-size: 16px;
    line-height: 27px;
    color: #282828;
}

/* ================== register CSS ===================== */


/*==================== Home Page CSS =================== */

.hero-sec {
    position: relative;
    padding: 140px 0px 143px;
    background-image: url(../images/home_banner_bg.webp);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 50%;
    min-height: 60vh;
}

.hero-sec::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url(../images/hero-design.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 418px;
    height: 565px;
    z-index: 1;
}

.hero-sec::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    max-width: 74%;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, #960000 70.32%, rgba(199, 70, 83, 0) 96.1%);
}

.white-btn {
    background-color: var(--white);
    color: var(--black);
    &:hover{
        color: #000;
    }
}

.white-outline-btn {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.hero-content {
    max-width: 580px;
    position: relative;
    z-index: 2;
}

.hero-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding-right: 60px;
}

.hero-content h4 {
    color: #fff;
    font-size: 26px;
    line-height: 43px;
    font-weight: 500;
    margin: 0 0 8px;
}

.hero-content h1 {
    font-size: 34px;
    font-weight: 800;
    line-height: 44px;
    color: #fff;
    margin: 0px 0 35px;
}


.hero-content p {
    font-size: 23px;
    line-height: 28px;
    color: #fff;
    margin: 0 0 40px;
    text-align: justify;
    line-height: 32px;
    opacity: 0.7;

}

.hero-content.text-center > h3 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 20px;
}

.hero-txt-para{
    text-align: center !important;
    font-style: italic;
}
.hero-txt-para span{
    font-size: 38px;
    font-style: italic;
    opacity: 1;
}

.btn-group {
    display: flex;
    align-items: center;
    gap: 20px;
}
.hero-txt-outer{
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
}
.hero-txt-outer span{
    font-size: 38px;
    line-height: 1;
    font-style: italic;
    opacity: 1;
    color: #fff;
}

.hero-txt-outer .hero-txt-para{
    margin: 0 !important;
}

.hero-content .btn-group .button {
    min-height: 54px;
}

.why-chose-sec {
    padding: 20px 0px 10px;
}

.why-chose-left>h3 {
    font-size: 40px;
    font-weight: 700;
    line-height: 47px;
    margin: 0 0 30px;
}

.why-chose-list li {
    padding-left: 80px;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 27 27' fill='none'%3E%3Cpath d='M24.7809 7.44933C23.7187 5.19773 22.0363 3.30699 19.9169 1.98043C16.9689 0.140524 13.4772 -0.443977 10.0922 0.338746C6.70714 1.11639 3.8253 3.16976 1.98539 6.11768C0.140401 9.0656 -0.4441 12.5523 0.338622 15.9424C1.12135 19.3274 3.17472 22.2092 6.11756 24.0492C8.19127 25.3452 10.5699 26.0314 13.0045 26.0314H13.1621C15.5865 26.0009 17.9448 25.2995 19.988 24.0085C20.5827 23.6324 20.7555 22.8497 20.3794 22.255C20.0033 21.6603 19.2205 21.4875 18.6259 21.8636C16.9842 22.9056 15.0833 23.4697 13.1316 23.4951C11.129 23.5206 9.17221 22.9666 7.46445 21.9043C5.09087 20.4202 3.43902 18.1025 2.81386 15.3782C2.1887 12.6539 2.6563 9.84832 4.14042 7.47474C7.20016 2.58018 13.6754 1.08589 18.57 4.14563C20.2777 5.21298 21.6297 6.73268 22.4836 8.54209C23.3171 10.3058 23.6424 12.2626 23.4239 14.194C23.3476 14.8903 23.8457 15.5205 24.5471 15.5968C25.2434 15.673 25.8737 15.1749 25.9499 14.4735C26.2193 12.0694 25.8127 9.63993 24.7809 7.44933Z' fill='%23960000'/%3E%3Cpath d='M17.2179 8.60304L11.0883 14.7327L8.81637 12.4607C8.31828 11.9626 7.51522 11.9626 7.01713 12.4607C6.51903 12.9588 6.51903 13.7619 7.01713 14.26L10.1887 17.4315C10.4377 17.6806 10.763 17.8026 11.0883 17.8026C11.4136 17.8026 11.7389 17.6806 11.9879 17.4315L19.0121 10.4023C19.5102 9.90419 19.5102 9.10113 19.0121 8.60304C18.514 8.11002 17.711 8.11002 17.2179 8.60304Z' fill='%23960000'/%3E%3C/svg%3E"); */
    /* background-image: url("data:image/svg+xml,%3Csvg width='37' height='39' viewBox='0 0 37 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.1539 10.4861C35.9268 6.70909 32.7729 3.75 28.9744 3.75H27.125V2.3125C27.125 1.519 26.481 0.875 25.6875 0.875C24.894 0.875 24.25 1.519 24.25 2.3125V3.75H12.75V2.3125C12.75 1.519 12.106 0.875 11.3125 0.875C10.519 0.875 9.87501 1.519 9.87501 2.3125V3.75H8.02566C4.22635 3.75 1.07248 6.70909 0.846069 10.4861C0.41985 17.5903 0.427756 24.7964 0.869788 31.9042C1.09404 35.5137 3.98557 38.4053 7.59513 38.6295C11.2126 38.8545 14.8559 38.9666 18.4993 38.9666C22.1419 38.9666 25.786 38.8545 29.4034 38.6295C33.013 38.4053 35.9045 35.5137 36.1288 31.9042C36.5715 24.8 36.5794 17.5946 36.1539 10.4861ZM33.2603 31.7259C33.1251 33.8915 31.3908 35.6258 29.2259 35.7603C22.1089 36.2023 14.8912 36.2023 7.7741 35.7603C5.60851 35.6251 3.87416 33.8908 3.73976 31.7259C3.39979 26.2612 3.33007 20.7391 3.51191 15.25H33.4888C33.6699 20.7412 33.6002 26.2634 33.2603 31.7259ZM11.3125 9.5C12.106 9.5 12.75 8.856 12.75 8.0625V6.625H24.25V8.0625C24.25 8.856 24.894 9.5 25.6875 9.5C26.481 9.5 27.125 8.856 27.125 8.0625V6.625H28.9744C31.2549 6.625 33.1481 8.39672 33.284 10.6579C33.3178 11.2286 33.3321 11.8029 33.3602 12.375H3.63985C3.6686 11.8029 3.68226 11.2286 3.71604 10.6579C3.85188 8.39672 5.74435 6.625 8.02566 6.625H9.87501V8.0625C9.87501 8.856 10.519 9.5 11.3125 9.5Z' fill='%23960000'/%3E%3Cpath d='M11.3125 23.875C12.5034 23.875 13.4688 22.9096 13.4688 21.7188C13.4688 20.5279 12.5034 19.5625 11.3125 19.5625C10.1216 19.5625 9.15625 20.5279 9.15625 21.7188C9.15625 22.9096 10.1216 23.875 11.3125 23.875Z' fill='%23960000'/%3E%3Cpath d='M18.5 23.875C19.6909 23.875 20.6562 22.9096 20.6562 21.7188C20.6562 20.5279 19.6909 19.5625 18.5 19.5625C17.3091 19.5625 16.3438 20.5279 16.3438 21.7188C16.3438 22.9096 17.3091 23.875 18.5 23.875Z' fill='%23960000'/%3E%3Cpath d='M11.3125 31.0625C12.5034 31.0625 13.4688 30.0971 13.4688 28.9062C13.4688 27.7154 12.5034 26.75 11.3125 26.75C10.1216 26.75 9.15625 27.7154 9.15625 28.9062C9.15625 30.0971 10.1216 31.0625 11.3125 31.0625Z' fill='%23960000'/%3E%3Cpath d='M25.6875 23.875C26.8784 23.875 27.8438 22.9096 27.8438 21.7188C27.8438 20.5279 26.8784 19.5625 25.6875 19.5625C24.4966 19.5625 23.5312 20.5279 23.5312 21.7188C23.5312 22.9096 24.4966 23.875 25.6875 23.875Z' fill='%23960000'/%3E%3Cpath d='M25.6875 31.0625C26.8784 31.0625 27.8438 30.0971 27.8438 28.9062C27.8438 27.7154 26.8784 26.75 25.6875 26.75C24.4966 26.75 23.5312 27.7154 23.5312 28.9062C23.5312 30.0971 24.4966 31.0625 25.6875 31.0625Z' fill='%23960000'/%3E%3Cpath d='M18.5 31.0625C19.6909 31.0625 20.6562 30.0971 20.6562 28.9062C20.6562 27.7154 19.6909 26.75 18.5 26.75C17.3091 26.75 16.3438 27.7154 16.3438 28.9062C16.3438 30.0971 17.3091 31.0625 18.5 31.0625Z' fill='%23960000'/%3E%3C/svg%3E%0A"); */
    background-image: url(../images/step1.svg);
    background-repeat: no-repeat;
    background-position: -17px -5px;
    background-size: 110px;
}

.why-chose-list li:nth-child(2) {
    /* background-image: url("data:image/svg+xml,%3Csvg width='39' height='41' viewBox='0 0 39 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.1639 5.07905C28.0484 1.80376 23.9061 0 19.5002 0C15.0942 0 10.9518 1.80376 7.83641 5.07905C4.7209 8.35441 3.00513 12.7091 3.00513 17.3409C3.00513 26.711 11.4326 34.5046 15.9602 38.6916C16.5894 39.2734 17.1328 39.7759 17.5656 40.201C18.108 40.7336 18.8041 40.9999 19.5001 40.9999C20.1962 40.9999 20.8922 40.7336 21.4346 40.201C21.8675 39.7758 22.4109 39.2734 23.04 38.6916C27.5676 34.5045 35.9952 26.711 35.9952 17.3409C35.9951 12.7091 34.2794 8.35441 31.1639 5.07905ZM21.5311 36.8884C20.8881 37.483 20.3329 37.9965 19.8751 38.446C19.6648 38.6524 19.3354 38.6524 19.125 38.446C18.6673 37.9963 18.112 37.4829 17.4691 36.8883C13.2126 32.9521 5.28953 25.625 5.28953 17.341C5.28953 9.10346 11.6643 2.40179 19.5 2.40179C27.3357 2.40179 33.7105 9.10346 33.7105 17.341C33.7105 25.625 25.7876 32.9521 21.5311 36.8884Z' fill='%23960000'/%3E%3Cpath d='M19.5001 9.04382C15.4919 9.04382 12.231 12.4719 12.231 16.6857C12.231 20.8995 15.4919 24.3276 19.5001 24.3276C23.5084 24.3276 26.7692 20.8995 26.7692 16.6857C26.7692 12.4719 23.5084 9.04382 19.5001 9.04382ZM19.5001 21.9258C16.7516 21.9258 14.5155 19.575 14.5155 16.6856C14.5155 13.7962 16.7516 11.4455 19.5001 11.4455C22.2486 11.4455 24.4847 13.7962 24.4847 16.6856C24.4847 19.575 22.2486 21.9258 19.5001 21.9258Z' fill='%23960000'/%3E%3C/svg%3E%0A"); */
    background-image: url(../images/step2.svg);
    background-position: -23px -5px;
}

.why-chose-list li:last-child {
    /* background-image: url("data:image/svg+xml,%3Csvg width='37' height='36' viewBox='0 0 37 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9766 35.7939C15.9757 35.7939 15.9746 35.7939 15.9736 35.7939C14.8588 35.7931 13.8105 35.3582 13.0225 34.5689L1.9236 23.4541C0.300207 21.8277 0.300207 19.1813 1.9236 17.555L16.8851 2.56489C18.4269 1.02 20.4784 0.168945 22.6615 0.168945H32.1538C34.4555 0.168945 36.3286 2.04152 36.3286 4.34375V13.8069C36.3286 15.9884 35.4784 18.0391 33.935 19.5807L18.927 34.573C18.1386 35.3604 17.0908 35.7939 15.9766 35.7939ZM22.6615 2.95215C21.2229 2.95215 19.8711 3.51292 18.855 4.53096L3.89337 19.5211C3.35216 20.0634 3.35216 20.9453 3.89337 21.4876L14.9923 32.6024C15.2547 32.8653 15.6039 33.0105 15.9757 33.0107H15.9768C16.3482 33.0107 16.6974 32.8661 16.9601 32.6039L31.9681 17.6118C32.9852 16.5959 33.5454 15.2443 33.5454 13.8069V4.34375C33.5454 3.57641 32.9211 2.95215 32.1538 2.95215H22.6615ZM26.2392 14.2937C23.9372 14.2937 22.0644 12.4211 22.0644 10.1189C22.0644 7.81667 23.9372 5.94409 26.2392 5.94409C28.5412 5.94409 30.414 7.81667 30.414 10.1189C30.414 12.4211 28.5412 14.2937 26.2392 14.2937ZM26.2392 8.72729C25.4719 8.72729 24.8476 9.35156 24.8476 10.1189C24.8476 10.8862 25.4719 11.5105 26.2392 11.5105C27.0068 11.5105 27.6308 10.8862 27.6308 10.1189C27.6308 9.35156 27.0068 8.72729 26.2392 8.72729Z' fill='%23960000'/%3E%3C/svg%3E%0A"); */
 background-image: url(../images/step3.svg);
 background-position: -15px 8px;
}


.why-chose-list li+li {
    margin-top: 35px;
}

.why-chose-list li h4 {
    font-size: 26px;
    line-height: 37px;
    margin-bottom: 6px;
}

.why-chose-left {
    max-width: 529px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding-top: 68px;
}

.why-chose-list li p {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 0px;
    font-weight: 600;
}

.why-chose-right {
    display: flex;
    justify-content: flex-end;
    position: relative;
    /* margin-right: 98px; */
}

.why-chose-infography {
    max-width: 726px;
    width: 100%;
    background-image: linear-gradient(98.29deg, #FFFFFF 15.91%, #960000 71.94%);
    padding: 2px;
    border-radius: 15px 70px 135px 15px;
}

.chose-infography-white {
    background-color: #fff;
    padding: 23px 25px;
    border-radius: 15px 70px 135px 15px;
}
.chose-infography-inner {
    padding: 45px 20px;
    background: linear-gradient(217.49deg, #960000 -136.28%, #FFFFFF 32.73%);
    border-radius: 15px 55px 125px 15px;
}

.chose-infography-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    max-width: 358px;
}
.chose-infography-inner > h3 {
    text-align: center;
    margin-bottom: 21px !important;
    font-size: 26px;
}
.chose-infography-list li+li {
    margin-top: 55px;
}

.chose-infography-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.why-chose-wrapper {
    position: relative;
}

.man-reading-book {
    position: absolute;
    bottom: -170px;
    left: 50%;
    transform: translateX(-50%);
    width: 716px;
    /* width: 670px; */
}

/* .chose-infography-list li>img {
    margin-top: 10px;
} */

.chose-infography-list li:first-child {
    margin-right: 13px;
    max-width: 443px;
}

.chose-infography-list li:nth-child(2) {
    margin-right: 20px;
}

.chose-infography-txt h4 {
    font-size: 22px;
    line-height: 26px;
}

.write-will-sec {
    padding: 100px 0px;
    position: relative;
    min-height: 100vh;
}

.write-will-sec::after {
    content: "";
    /* max-width: calc(100% - 955px); */
    max-width: calc(100%/2);
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    background-image: url(../images/write_will2.jpg);
    background-repeat: no-repeat;
    background-position: -190px 0px;
    background-size: 1379px;
    top: 0;
}

.write-will-sec::before {
    content: "";
    /* max-width: 955px; */
    max-width: calc(100% / 2);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #960000 71.61%, rgb(150 0 0) 87.72%);
    z-index: 1;
}

.write-will-wrapper {
    position: relative;
    z-index: 2;
}

.write-will-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.8fr 1fr 0.6fr;
    /* gap: 70px; */
    gap: 50px;
    align-items: center;
}

.write-will-left>img {
    /* margin: 0 0 32px; */
    margin-bottom: 0px !important;
    height: 150px;
}

.write-will-left>h2 {
    color: #Fff;
    font-size: 48px;
    line-height: 50px;
    margin: 0 0 25px;
    padding-left: 20px;
    text-align: justify;
    display: none;
}

.write-will-left>p {
    color: #Fff;
    font-size: 18px;
    line-height: 27px;
    padding-left: 20px;
    text-align: justify;
}

.write-will-card {
    background-color: #Fff;
    border-radius: 15px;
    padding: 48px 33px 56px;
    max-width: 573px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    text-align: center;
}

.write-will-card>h3 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 15px;
}

.write-will-card>p {
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 9px;
}

.write-will-card a.underline-text {
    font-size: 20px;
    line-height: 47px;
    font-weight: 700;
    margin-bottom: 23px;
}

.write-will-card ul li+li {
    margin-top: 10px;
}
.write-will-card ul li a {
    font-size: 22px;
    line-height: 31px;
    font-weight: 600;
    text-align: center;
    display: block;
}

.write-will-card ul li {
    padding-bottom: 10px;
    border-bottom: 1px solid #E7E7E7;
}

.write-will-card ul {
    margin-bottom: 39px;
}

.write-will-design {
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 50%;
    transform: translateX(-87%);
}

.explore-sec {
    padding: 62px 0px 95px;
    position: relative;
}

.explore-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0 0 50px;
}

.explore-head>h2 {
    font-size: 40px;
    line-height: 47px;
}

.explore-card {
    background-color: #D9D9D9;
    border-radius: 15px;
    position: relative;
    max-height: 580px;
    overflow: hidden;
    cursor: pointer;
}

.explore-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-info-box {
    position: absolute;
    background-color: #fff;
    padding: 23px 35px;
    border-radius: 15px;
    bottom: 14px;
    left: 10px;
    right: 10px;
}

.explore-txt-btn {
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 1fr auto;
    gap: 30px;
}

.explore-info-box>h3 {
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 14px;
}

.explore-txt-btn>p {
    font-size: 16px;
    line-height: 24px;
}

.explore-txt-btn .arrow-btn {
    padding: 10px;
    min-height: 45px;
}

.explore-bg-design {
    max-width: 857px;
    width: 100%;
    height: 496px;
    background-color: #D89A9F;
    filter: blur(280.1000061035156px);
    opacity: 0.2;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.explore-card:hover .arrow-btn {
    transform: rotate(45deg);
}

.faq-sec {
    padding: 83px 0px 40px;
    position: relative;
    background-color: #F7F7F7;
}

.faq-img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.faq-main>h2 {
    font-size: 40px;
    line-height: 47px;
    margin: 0 0 33px;
}

.faq-box .accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
    box-shadow: unset;
}

.faq-box .accordion-item {
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
}

.faq-box .accordion-item+.accordion-item {
    margin-top: 9px;
}

.faq-box .accordion-item:has(.collapse.show) {
    border-color: var(--primary-color);
}

.faq-box .accordion-item:has(.collapse.show) .accordion-button {
    padding-bottom: 0;
}

.faq-box .accordion-item .accordion-button,
.faq-box .accordion-item .accordion-body {
    padding: 16px 26px;
}

.faq-box .accordion-item .accordion-body {
    padding-top: 0;
}

.faq-box .accordion-item .accordion-button,
.faq-box .accordion-item .accordion-body {
    transition: all 0.3s;
}

.faq-box .accordion-item .accordion-button p {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}

.accordion-button::after {
    display: none;
}

.accordion-plug {
    width: 28px;
    height: 28px;
    background-color: #000;
    border-radius: 9px;
    position: relative;
}

.accordion-plug::after {
    content: "";
    width: 12px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.accordion-plug::before {
    content: "";
    width: 1px;
    height: 12px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: all .6s;
}

.faq-box .accordion-item .accordion-button {
    justify-content: space-between;
}

.faq-box .accordion-item:has(.collapse.show) .accordion-button .accordion-plug::before {
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.faq-box .accordion-item:has(.collapse.show) .accordion-button .accordion-plug {
    background-color: var(--primary-color);
}

.faq-box .accordion-item .accordion-body p {
    font-size: 16px;
    line-height: 26px;
}

.testimonial-sec {
    padding: 30px 0px 100px;
    position: relative;
    background-color: #F7F7F7;
}

.testimonial-wrapper>h2 {
    text-align: center;
    font-size: 40px;
    line-height: 47px;
    margin: 0 0 33px;
}

.testimonial-card {
    padding: 48px 50px 40px;
    background-color: #ffffff73;
    border: 2px solid #fff;
    border-radius: 20px;
    height: auto !important;
}

.testimonial-review {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0 0 20px;
}

.testimonial-review a {
    color: #ffffff;
    font-size: 20px;
    width: 30px;
    background-color: #960000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
}

.testimonial-card>h3 {
    font-size: 24px;
    line-height: 32px;
    margin: 0 0 13px;
}

.testimonial-card>p {
    font-size: 18px;
    line-height: 29px;
    margin: 0 0 10px;
}

.testimonial-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial-profile>img {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-profile>h4 {
    font-size: 16px;
    line-height: 32px;
    opacity: 0.8;
}

.testimonial-profile>h4 span {
    font-size: 14px;
    margin-left: 10px;
    font-weight: 500;
}

.testimonial-slider {
    position: relative;
}

.swiper-button-next,
.swiper-button-prev {
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    border-radius: 50px;
    background-image: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -54px;
    top: auto;
    right: 0;
    left: auto;
}

.swiper-button-prev {
    right: 60px;
    transform: rotate(180deg);
}

.swiper-button-disabled {
    background-color: var(--white);
    opacity: 1 !important;
}

.swiper-button-disabled svg path {
    fill: #000;
}

.tri-info-sec {
    padding: 76px 0px 76px;
    position: relative;
}

.tri-info-wrapper {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 91px;
}

.tri-info-box img {
    margin: 0 0 24px;
}

.tri-info-box>h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    margin: 0 0 15px;
}

.tri-info-box>p {
    font-size: 18px;
    line-height: 26px;
}

.footer {
    background-color: #000;
    color: #fff;
    padding: 47px 0 0;
}

.footer-left .footer-logo {
    margin: 0 0 31px;
}

.footer-left>p {
    font-size: 18px;
    line-height: 27px;
    color: #9A9A9A;
    max-width: 383px;
    margin: 0 0 18px;
}

.footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 106px;
}

.footer-menu>h3 {
    color: #fff;
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    margin: 0 0 35px;
}

.footer-menu-list li a {
    color: #9A9A9A;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    transition: all 0.3s;

    &:hover {
        color: #fff;
    }
}

.footer-menu-list li+li {
    margin-top: 23px;
}

.social-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links li+li {
    margin-top: 0;
}

.main-footer {
    margin-bottom: 83px;
}

.sub-footer {
    padding: 20px 0px 18px;
    text-align: center;
    border-top: 1px solid #e7e7e721;
}

.sub-footer p {
    font-size: 16px;
    line-height: 27px;
    color: #9A9A9A;
    opacity: 0.5;
}



/* ============================ Dashboard CSS ============================== */
.dashboard-wrapper {
    display: flex;
}

.db-sidebar {
    flex: 0 0 327px;
    border-right: 1px solid #E7E7E7;
}

.db-main {
    width: 100%;
}

.db-sidebabr-haed {
    min-height: 113px;
    border-bottom: 1px solid #E7E7E7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-logo a img {
    max-width: 230px;
}

.db-sidebabr-body {
    height: calc(100vh - 113px);
    padding: 30px 44px;
    overflow: auto;
}

.sidebabr-menu-list li+li {
    margin-top: 36px;
}

.sidebabr-menu-list li .sidebabr-menu-link {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in;
    white-space: nowrap;
}

.sidebabr-menu-link.active,
.sidebabr-menu-link:hover {
    color: var(--primary-color);
}

.sidebabr-menu-link span {
    flex: 0 0 45px;
}

.db-nav:has(.db-nav-search) {
    justify-content: space-between;
}

.db-nav {
    min-height: 113px;
    border-bottom: 1px solid #E7E7E7;
    padding: 35px 150px 30px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.db-nav-search {
    position: relative;
    display: inline-block;
}

.db-nav-search span {
    position: absolute;
    left: 2px;
    top: -1px;
}

.db-nav-search input {
    padding-left: 32px;
    border: 0;
}

.db-nav-profile .btn-group .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    line-height: 21px;
    font-weight: 500;
}

.db-nav-profile .dropdown-toggle::after {
    display: none;
}

.db-nav-right {
    display: flex;
    align-items: center;
    gap: 50px;
}

.db-nav-profile {
    position: relative;
}

.db-nav-profile::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 33px;
    left: -25px;
    top: 4px;
    background-color: #E7E7E7;
}

.db-content-head {
    padding: 25px 35px;
}

.db-content-head>h2 {
    font-size: 30px;
    line-height: 47px;
    font-weight: 700;
}

.db-content-head>h2 span {
    color: var(--primary-color);
}

.db-content-head>p {
    font-size: 16px;
    line-height: 37px;
    font-weight: 700;
}

.db-content-body {
    padding: 35px;
    background-color: #F7F7F7;
}

/* .db-content {
    height: calc(100vh - 113px);
    overflow: auto;
} */
.custum-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.custum-card.statics-card {
    padding: 13px 41px 77px;
    position: relative;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    background-image: url(../images/statics-bg.png);
    background-repeat: no-repeat;
    background-position: 134px 66px;
    background-size: 283px;
    display: flex;

    &:hover {
        border-color: var(--primary-color);
    }
}

.custum-card.statics-card>.statics-img {
    flex: 0 0 50px;
    margin-top: 14px;
}

.statics-data>p {
    line-height: 41px;
    font-size: 18px;
    font-weight: 500;
}

.statics-data>h3 {
    font-size: 28px;
    line-height: 47px;
    color: var(--primary-color);
}

.custum-card.create-doc-card a {
    position: relative;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 62px 0px;
}

.custum-card.create-doc-card a>h3 {
    color: #Fff;
    font-size: 24px;
    line-height: 47px;
}

.new-doc-bg1 {
    position: absolute;
    left: 0;
    top: 0;
}

.new-doc-bg2 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.custum-card.doc-info-card {
    padding: 21px 33px;
}

.custum-card.doc-info-card>h3 {
    font-size: 24px;
    line-height: 47px;
    margin-bottom: 9px;
}

.will-card-head {
    padding: 17px 21px 30px;
    border-bottom: 1px solid #E7E7E7;
}

.will-card {
    border: 1px solid #E7E7E7;
    border-radius: 10px;
}

.will-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.will-card-txt>p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin: 0 0 5px;
    display: inline-block;
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.will-card-txt>span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #9A9A9A;
    display: block;
}

.will-doc-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.will-doc-status>span {
    display: inline-flex;
}

.will-doc-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 0;
}

.will-doc-status.completed {
    color: #3A9B60;
}

.will-doc-status.Incomplete {
    color: var(--primary-color);
}

.will-doc-status>p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

.will-card-body {
    padding: 28px 0px 44px;
    position: relative;
}

.will-card-body {
    padding: 28px 0px 44px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-btn {
    width: 42px;
    height: 42px;
    box-shadow: 3px 6px 14px 0px #00000026;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.will-card-body.Incomplete .download-btn {
    display: none;
}

.will-card-action {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pay-to-create-modal .modal-content {
    border-radius: 10px;
    outline: 0;
}

.pay-to-create-modal .modal-dialog {
    max-width: 448px;
}

.pay-to-create-modal .modal-body {
    padding: 43px 30px 30px;
}

.pay-to-create-modal .btn-close {
    position: absolute;
    right: 13px;
    top: 24px;
}

.pay-content {
    display: flex;
    gap: 12px;
}

.pay-content-para h4 {
    font-size: 22px;
    margin-bottom: 15px;
}

.pay-content-para>p {
    font-size: 14px;
    margin-bottom: 0px;
}

.pay-content-para>h3 {
    font-size: 26px;
    line-height: 47px;
    margin-bottom: 26px;
    color: var(--primary-color);
}

.pay-info-list {
    padding: 27px 29px;
    background-color: #F7F7F7;
    border-radius: 10px;
}

.pay-info-list-box {
    padding-top: 24px;
    margin-top: 27px;
    border-top: 1px dashed #9A9A9A;
}

.pay-info-list ul li {
    padding-left: 30px;
}

.pay-info-list ul li+li {
    margin-top: 22px;
}

.pay-info-list ul li {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M19.9916 6.01C19.1347 4.19356 17.7775 2.66823 16.0676 1.59805C13.6894 0.113732 10.8725 -0.357806 8.14171 0.273644C5.41089 0.900994 3.086 2.55753 1.60168 4.93572C0.113266 7.3139 -0.358272 10.1267 0.273179 12.8616C0.904629 15.5925 2.56116 17.9173 4.93525 19.4017C6.60818 20.4472 8.52714 21.0008 10.4912 21.0008H10.6183C12.5742 20.9762 14.4767 20.4103 16.125 19.3689C16.6048 19.0654 16.7442 18.434 16.4408 17.9542C16.1373 17.4745 15.5059 17.3351 15.0262 17.6385C13.7017 18.4791 12.1682 18.9342 10.5937 18.9547C8.97817 18.9752 7.39955 18.5283 6.02184 17.6713C4.10698 16.474 2.77438 14.6043 2.27004 12.4065C1.7657 10.2087 2.14293 7.94535 3.34022 6.0305C5.80862 2.08189 11.0324 0.876392 14.981 3.34479C16.3588 4.20586 17.4494 5.43185 18.1383 6.89157C18.8108 8.31438 19.0732 9.89301 18.8969 11.4511C18.8354 12.0129 19.2372 12.5213 19.803 12.5828C20.3648 12.6443 20.8732 12.2425 20.9347 11.6767C21.152 9.7372 20.824 7.77724 19.9916 6.01Z' fill='%23960000'/%3E%3Cpath d='M13.8901 6.94075L8.94511 11.8857L7.11226 10.0529C6.71043 9.65107 6.06258 9.65107 5.66075 10.0529C5.25892 10.4547 5.25892 11.1026 5.66075 11.5044L8.21935 14.063C8.42027 14.2639 8.68269 14.3623 8.94511 14.3623C9.20753 14.3623 9.46995 14.2639 9.67087 14.063L15.3375 8.39227C15.7394 7.99044 15.7394 7.34259 15.3375 6.94075C14.9357 6.54302 14.2878 6.54302 13.8901 6.94075Z' fill='%23960000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 2px 2px;
}

.pay-info-list ul li {
    font-weight: 500;
}

/* ============================ Dashboard CSS ============================== */

/* ============== account Setting CSS ===================== */

.account-card {
    max-width: 556px;
    width: 100%;
    background-color: #fff;
    padding: 28px 40px 50px;
    border-radius: 10px;
}

.account-profile-box img {
    width: 107px;
    min-width: 107px;
    height: 107px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #Ffff;
    box-shadow: 0px 3px 7.1px 0px #00000024;
}

.account-profile-box {
    display: inline-flex;
    position: relative;
    margin-bottom: 20px;
}

.upload-profile {
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: absolute;
    right: 2px;
    bottom: 3px;
    cursor: pointer;
}

.upload-profile i {
    font-size: 10px;
}

.account-card>h2 {
    font-size: 20px;
    line-height: 30px;
    margin: 12px 0 18px;
    font-weight: 600;
}

.account-card .form-group label {
    font-weight: 500;
    margin-bottom: 7px;
}

.account-card .form-group .form-control {
    min-height: 55px;
    border-color: #DDD9D9;
}

.account-card .form-group {
    margin-bottom: 20px;
}

.form-control:focus {
    box-shadow: unset;
    border-color: #C9C9C9;
}

.contact-box {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.custum-card.contact-medium-list {
    padding: 35px 40px 50px;
    max-width: 389px;
    width: 100%;
}

.custum-card.contact-medium-list ul li {
    display: flex;
}

.custum-card.contact-medium-list ul li .conatct-md-list-icon {
    flex: 0 0 45px;
}

.custum-card.contact-medium-list ul li+li {
    margin-top: 45px;
}

.conatct-md-list-para>h3 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #141718;
}

.conatct-md-list-para>p {
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 10px;
    color: #282828;
}

.conatct-md-list-para>span {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #141718;
}

.conatact-us-card>h2 {
    margin: 0 0 10px;
}

.conatact-us-card>p {
    margin: 0 0 30px;
}

/* ============== account Setting CSS ===================== */






.db-content-body {
    min-height: calc(100vh - 113px);
}

.db-content:has(.db-content-head) .db-content-body {
    min-height: calc(100vh - 247px);
}

.custum-card.no-data-card {
    max-width: 390px;
    width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.db-content-body:has(.no-data-card) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custum-card.no-data-card>p {
    font-size: 22px;
    line-height: 47px;
    font-weight: 600;
}

/* =================== payment-info CSS ========================= */

.payment-info-sec {
    padding: 48px 0px 170px;
    position: relative;
    background-color: #F7F7F7;
}

.payment-info-box {
    max-width: 1365px;
    margin: 0 auto;
}

.payment-info-wrapper>h2 {
    font-size: 24px;
    line-height: 47px;
    text-align: center;
    margin: 0 0 10px;
}

.custum-card.payment-summary-box {
    padding: 26px 34px 40px;
    max-width: 307px;
    width: 100%;
}

.payment-info-box {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pay-form-cards {
    width: 100%;
}

.custum-card.pay-card-box {
    padding: 15px;
    padding-right: 65px;
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;

    &:hover,
    &.active {
        border-color: var(--primary-color);
    }

    border-color: var(--primary-color);
    min-height: 112px;

}

.check-red {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    /* display: none; */
    transition: all 0.3s ease;
}

.custum-card.pay-card-box:hover .check-red,
.custum-card.pay-card-box.active .check-red {
    display: block;
}

.pay-card-img {
    height: 80px;
    min-width: 80px;
    background-color: #F7F7F7;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-expire-default {
    display: flex;
    max-width: 218px;
    justify-content: space-between;
    align-items: center;
}

.pay-card-expire {
    display: flex;
    gap: 30px;
    align-items: center;
}

.pay-card-info>h3 {
    font-size: 18px;
    line-height: 32px;
}

.custum-card.pay-card-form {
    padding: 32px 35px;
}

.form-field-card .form-group label {
    margin-bottom: 20px;
    line-height: 24px;
    font-size: 16px;
    color: #141718;
}

.form-field-card .form-group .form-control {
    min-height: 55px;
}

.form-field-card .form-group {
    margin-bottom: 24px;
}

.sqaure-block-relative {
    position: relative;
}

.sqaure-block-relative::after {
    content: "";
    position: absolute;
    left: -59px;
    bottom: 0;
    background-image: url(../images/square-block-left.png);
    background-repeat: no-repeat;
    width: 663px;
    height: 662px;
    transform: rotate(350deg);
    /* opacity: 0.4; */
    mix-blend-mode: color-burn;
}

.sqaure-block-relative::before {
    content: "";
    position: absolute;
    right: -235px;
    bottom: 0;
    background-image: url(../images/square-block-right.png);
    background-repeat: no-repeat;
    width: 663px;
    height: 662px;
    /* transform: rotate(350deg); */
    /* opacity: 0.4; */
    mix-blend-mode: color-burn;
}

/* =================== payment-info CSS ========================= */

/* =================== payment-History CSS ========================= */
.payment-history-box {
    /* max-width: 493px; */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 27px;
    background: #fff;
    padding: 16px 23px;
    height: fit-content;
    border-radius: 10px;
}

.payment-history-box .custum-card.payment-summary-box {
    padding: 26px 34px 40px;
    max-width: 100%;
    width: 100%;
    border: 1px solid var(--primary-color);
    position: relative;
    overflow: visible;
}

.success-msg {
    font-size: 16px;
    line-height: 24px;
    color: #4DB663;
    font-weight: 500;
}

/* =================== payment-History CSS ========================= */

/* =================== Your History CSS ========================== */

.db-content-head:has(.db-nav-search) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 150px;
}

.db-content-head:has(.db-nav-search) .content-head-left>h2 {
    font-size: 30px;
    line-height: 47px;
    font-weight: 700;
}

.db-content-head:has(.db-nav-search) .content-head-left>p {
    font-size: 16px;
    line-height: 37px;
    font-weight: 700;
}

.your-history-box table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 00px 13px;
    /* border: 1px solid; */
}

.his-doc {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.your-history-box table tr td {
    background-color: #Fff;
    padding: 18px 8px;
}

.your-history-box table tr th {
    padding: 18px 8px 38px 8px;
}

.your-history-box table tr td:first-child {
    border-radius: 10px 0px 0px 10px;
    padding-left: 21px;
}

.your-history-box table tr th:first-child {
    padding-left: 21px;
}

.your-history-box table tr td:last-child {
    /* border-radius: 10px 10px; */
    border-radius: 0 10px 10px 0px;
}

.badge {
    color: #000;
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid;
    font-weight: 500;
}

.badge.complete {
    color: #4DB663;
}

.badge.incomplete {
    color: #960000;
}

.his-doc>p {
    font-weight: 500;
}

.table-acton-box a,
.table-acton-box button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.table-acton-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.download-primary-btn {
    background-color: var(--primary-color);
}

.edit-btn {
    background-color: #E7E7E7;
}

.db-content-body:has(.your-history-box) {
    position: relative;
    padding-top: 0;
}

.db-content-body:has(.your-history-box)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 75px;
    background-color: #fff;
}

.your-history-box {
    position: relative;
    z-index: 1;
}

/* =================== Your History CSS ========================== */


/* ================== will form CSS =========================== */

.will-steps-box {
    max-width: 1418px;
    /* margin: 0 auto; */
    margin: 30px auto;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.steps-level-card {
    max-width: 489px;
    width: 100%;
    padding: 35px;
}

.custum-card.steps-form-card {
    width: 100%;
    padding: 30px 55px;
    height: 456px;
    overflow-y: auto;
}

.steps-form-card>h2 {
    font-size: 24px;
    line-height: 47px;
}

.steps-form-card>p {
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 25px;
}

.custom-check {
    width: 22px;
    height: 22px;
    border: 1px solid #1B1B1B;
    border-radius: 5px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-checkbox label {
    margin-bottom: 0 !important;
    cursor: pointer;
}

.custom-checkbox:has(input[type="checkbox"]:checked) .custom-check {
    background-color: #1B1B1B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M5.05469 9.79688C5.28906 10.0312 5.6875 10.0312 5.92188 9.79688L12.8125 2.90625C13.0469 2.67188 13.0469 2.27344 12.8125 2.03906L11.9688 1.19531C11.7344 0.960938 11.3594 0.960938 11.125 1.19531L5.5 6.82031L2.85156 4.19531C2.61719 3.96094 2.24219 3.96094 2.00781 4.19531L1.16406 5.03906C0.929688 5.27344 0.929688 5.67188 1.16406 5.90625L5.05469 9.79688Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.flex-formfield {
    width: unset;
}

.flex-formfield-box {
    display: flex;
    gap: 20px;
    align-items: center;
}

.custom-rdaio {
    width: 22px;
    height: 22px;
    border: 1px solid #1B1B1B;
    border-radius: 50px;
}

.custom-checkbox:has(input[type="radio"]:checked) .custom-rdaio {
    background-color: #1B1B1B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M5.05469 9.79688C5.28906 10.0312 5.6875 10.0312 5.92188 9.79688L12.8125 2.90625C13.0469 2.67188 13.0469 2.27344 12.8125 2.03906L11.9688 1.19531C11.7344 0.960938 11.3594 0.960938 11.125 1.19531L5.5 6.82031L2.85156 4.19531C2.61719 3.96094 2.24219 3.96094 2.00781 4.19531L1.16406 5.03906C0.929688 5.27344 0.929688 5.67188 1.16406 5.90625L5.05469 9.79688Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.steps-form-box .flex-end-box button {
    min-height: 47px;
}

.steps-level-list li+li {
    margin-top: 48px;
}

.steps-level-list li a {
    font-size: 17px;
    color: #656565;
    font-weight: 700;
}

.steps-level-list li {
    padding-left: 30px;
    position: relative;
}

.steps-level-list li::after {
    width: 1px;
    height: 72px;
    background-color: #E0E0E0;
    content: "";
    position: absolute;
    left: 9px;
    top: -49px;
    z-index: 0;
}

.steps-level-list li:first-child::after {
    display: none;
}

.steps-level-list li::before {
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    left: 0px;
    top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M10 0.219727C8.02219 0.219727 6.08879 0.806216 4.4443 1.90503C2.79981 3.00384 1.51809 4.56563 0.761209 6.39289C0.0043328 8.22015 -0.1937 10.2308 0.192152 12.1706C0.578004 14.1104 1.53041 15.8923 2.92894 17.2908C4.32746 18.6893 6.10929 19.6417 8.0491 20.0276C9.98891 20.4134 11.9996 20.2154 13.8268 19.4585C15.6541 18.7016 17.2159 17.4199 18.3147 15.7754C19.4135 14.1309 20 12.1975 20 10.2197C19.9973 7.56839 18.9428 5.02643 17.0681 3.15166C15.1933 1.27688 12.6513 0.222442 10 0.219727ZM13.6205 13.8402C13.4763 13.9843 13.2808 14.0652 13.0769 14.0652C12.8731 14.0652 12.6776 13.9843 12.5333 13.8402L9.45641 10.7633C9.31211 10.6192 9.23095 10.4237 9.23077 10.2197V4.06588C9.23077 3.86187 9.31182 3.66621 9.45608 3.52195C9.60033 3.37769 9.79599 3.29665 10 3.29665C10.204 3.29665 10.3997 3.37769 10.5439 3.52195C10.6882 3.66621 10.7692 3.86187 10.7692 4.06588V9.90178L13.6205 12.7531C13.7646 12.8973 13.8455 13.0928 13.8455 13.2966C13.8455 13.5005 13.7646 13.696 13.6205 13.8402Z' fill='%23E0E0E0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #fff;
    z-index: 1;
}

.steps-completed::after {
    background-color: var(--primary-color) !important;
}

.steps-completed::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.7746 8.69972L9.48599 12.9904C9.33753 13.1388 9.13642 13.222 8.92689 13.222C8.71736 13.222 8.51625 13.1388 8.36884 12.9904L6.28726 10.9056C5.97982 10.596 5.97982 10.0959 6.28833 9.78739C6.59789 9.47993 7.09696 9.48099 7.40547 9.78844L8.92794 11.3141L12.6574 7.58254C12.9659 7.27403 13.4661 7.27403 13.7746 7.58254C14.0831 7.89105 14.0831 8.39121 13.7746 8.69972ZM19.1655 8.20274L18.4295 7.46672C18.0937 7.12979 17.9094 6.68124 17.9094 6.20637V5.15345C17.9094 3.58566 16.6333 2.31057 15.0665 2.31057H14.0115C13.5345 2.31057 13.087 2.12631 12.7522 1.79148L12.0036 1.04391C10.8906 -0.0595483 9.08799 -0.0542838 7.98347 1.05549L7.24963 1.79148C6.91164 2.12736 6.46416 2.31162 5.98824 2.31162H4.93427C3.38543 2.31268 2.12192 3.55933 2.09349 5.10291C2.09243 5.11976 2.09139 5.13661 2.09139 5.15451V6.20427C2.09139 6.68019 1.90713 7.12768 1.57125 7.46356L0.825783 8.21011C0.824731 8.21327 0.821572 8.21432 0.819466 8.21643C-0.280834 9.33042 -0.271358 11.133 0.837366 12.2312L1.57335 12.9693C1.90818 13.3052 2.09349 13.7516 2.09349 14.2276V15.2857C2.09349 16.8525 3.36753 18.1276 4.93427 18.1276H5.98614C6.46311 18.1286 6.9106 18.3129 7.24543 18.6467L7.99611 19.3953C8.53099 19.927 9.24066 20.2197 9.9956 20.2197H10.0082C10.7674 20.2166 11.4792 19.9175 12.012 19.3816L12.7501 18.6446C13.0818 18.3139 13.5408 18.1244 14.0094 18.1244H15.0686C16.6322 18.1244 17.9073 16.8514 17.9104 15.2857V14.2297C17.9104 13.7548 18.0947 13.3073 18.4285 12.9714L19.1771 12.2228C20.2827 11.1109 20.2764 9.30726 19.1655 8.20274Z' fill='%23960000'/%3E%3C/svg%3E") !important;
}

.steps-completed a {
    color: #000 !important;
}



/* ================== will form CSS =========================== */


.will-label {
    font-size: 24px;
    line-height: 47px;
    font-weight: 700;
}

.form-field-card .form-group>p {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 22px;
    margin: 0 0 25px;
}

div#question-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.steps-form-box {
    height: 100%;
}

form#willForm {
    height: 100%;
}

.iziToast>.iziToast-body .iziToast-message {
    line-height: 16px !important;
    font-size: 14px !important;
}

.iziToast>.iziToast-body .iziToast-title {
    line-height: 16px !important;
    font-size: 14px !important;
}

.is-invalid {
    font-size: .875em;
    color: #dc3545;

}



.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: unset;
}



.change-password-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.profile-logo-pic {
    width: 43px;
    height: 43px;
    object-fit: cover;
    border-radius: 100px;
}

.db-nav-profile .dropdown-menu {
    min-width: 205px;
}

.db-nav-profile .dropdown-menu .button {
    width: 100%;
    padding: 8px 23px;
    min-height: unset;
    display: block;
    max-width: 100%;
}

.empty-div-bx {
    border: 1px solid #E7E7E7;
    border-radius: 10px;
    padding: 40px 30px;
}

.empty-div-bx {
    border: 1px solid #E7E7E7;
    border-radius: 10px;
    padding: 44px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.empty-div-bx p {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
}

.empty-div-bx img {
    height: 100%;
    max-height: 150px;
}

.choice-type-question {
    min-height: 0px;
    padding: 0;
    border: 0;
    margin-bottom: 10px;
}

.multi-ans-wrapper .form-control {
    padding: 7px 0;
    min-height: unset !important;
}

.multi-btn-bx {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0px;
}

.multi-ans-wrapper {
    margin-top: 10px;
    /* border-bottom: 1px solid #C9C9C9; */
    border-bottom: 1px solid #960000;
}

.multi-btn-bx a {
    white-space: nowrap;
    border-radius: 1000px;
    padding: 4px 15px;
}

.add-another-btn {
    background-color: var(--primary-color);
    box-shadow: 0px 0px 10px 0px #84848426;
    color: var(--white);
    border: unset;
    border-radius: 100px;
    padding: 3px 12px;
}

/* WHEN CHANGE ADD ANOTHER TO REMOVE THAT TIME  */
.remove-another-btn {
    background-color: var(--primary-color);
    box-shadow: 0px 0px 10px 0px #84848426;
    color: var(--white);
    border: unset;
    border-radius: 100px;
    padding: 3px 12px;
}

.formfield .error {
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
    display: block;
}

.choice-question-error {
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
}

.custom-checkbox.choice-type-question label {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* PAYMENT CHECKOUT CSSSS
*/

/* .payment-info-sec:has(.checkout-wrapper){
    background-color: #E4E2DE;
    padding: 40px 0;
 } */
.checkout-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 928px;
}

.checkout-wrapper {
    max-width: 1414px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.checkout-heading>h2 {
    font-size: 22px;
    line-height: 47px;
}

.checkout-heading>p a {
    font-weight: 700;
}

.checkoutinfo-card {
    padding: 40px 50px 40px 40px;
    border-radius: 20px;
}

.checkoutinfo-inner>h3 {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: #141718;
    margin: 0 0 13px;
    font-family: 'poppins';
}

.checkoutinfo-card .checkoutinfo-inner:first-child {
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #C9C9C9;
}

.checkoutinfo-card .checkoutinfo-inner .form-group label {
    font-size: 14px;
    line-height: 23px;
    font-weight: 500;
    font-family: 'Roboto';
}

.checkoutinfo-inner>p {
    margin: 10px 0 30px;
    color: #1B1B1B;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-family: 'Roboto';
}

.summary-card {
    padding: 38px 35px;
    border-radius: 20px;
}

.summary-card>h3 {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    margin: 0 0 30px;
    color: #141718;
    font-family: 'poppins';
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #C9C9C9;
    padding: 21px 0;
}

.summary-list li:first-child {
    border-top: 1px solid #C9C9C9;
}

.summary-list {
    margin: 0 0 15px;
}

.grand-total {
    background-color: #F1EFEA;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
}

.grand-total>p {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 23px;
    font-family: 'Roboto';
}

.grand-total>h4 {
    font-size: 26px;
    font-weight: 600;
    line-height: 39px;
    font-family: 'poppins';
    color: #141718;
}

.summary-list li h4 {
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;

}

.summary-list li p {
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    font-family: 'poppins';
}

.custum-card.summary-card {
    border: 1px solid #960000;
    border-right-width: 4px;
    border-bottom-width: 4px;
}


/* ====================== Checkout CSS ============================ */




/* ============================= Appy coupon code csss ==============*/
.apply-remove-btn {
    margin: 0px 0px 15px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.coupon-code-box {
    display: inline-block;
    padding: 8px 0px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    color: rgb(0, 0, 0);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-radius: 60px 60px;
}

.personalize-will {
    background-color: white;
    color: black;
}

/* =============================CMS Page CSS =======================*/
/* .cheapwill-cms-main {
    text-align: center;
} */

.cheapwill-text-heading h2 {
    text-align: center;
    margin-bottom: 20px;
}

.cheapwill-cms-content {
    /* max-width: 800px;  */
    margin: 0 auto;
    /* text-align: center; */
}

.cheapwill-top-texts {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

/*=======================BLUR THE PAYMENT PAGE =================*/
.blur {
    filter: blur(5px);
    pointer-events: none;
}

/* =================  Congratulations Next Module ============*/


.next-module-box {
    background-color: white;
    color: black;
}

.module-container {
    max-width: 600px;
    background-color: #fff;

    padding: 30px;
    border-radius: 10px;
}

.congratulation-btn {
    display: flex;
    justify-content: space-between;
}

section.single-text {
    padding: 10px 0;
    background-color: #ff00000d;
}

section.single-text p {
    text-transform: capitalize;
    font-weight: 500;
    transition: all 0.5s ease;
}

.swiper-button-prev,
.swiper-button-next {
    background-image: unset !important;
    left: 10px;
    right: auto;
}

.swiper-button-next,
.swiper-button-prev {
    width: 45px !important;
    height: 45px !important;
}

.testimonial-wrapper {
    overflow: hidden;
}

.why-chose-heading {
    margin: 0 0 58px;
}

.too_small {
    font-size: 14px;
}


/* Remove the cursor from question category*/
a.question-category-bx {
    cursor: default;
}

/*=================*/

/* Calender css*/
select.ui-datepicker-month {
    border: none;
}

select.ui-datepicker-year {
    border: none;
}

/* ======== */

.question-error {
    font-size: 12px;
    color: #dc3545;
}

/* MODULE FINISH QUESTION CSSSSSSSSSSSSS ====================*/
.form-complete-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    /* background: url(../images/party-popper-gif.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

.steps-form-complete {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px;
    height: 100%;
}

.form-complete-body>h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 56px;
}

.form-complete-body::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: 0px;
    bottom: -90px;
    background: url(../images/party-popper-gif.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.form-complete-body::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    bottom: -90px;
    background: url(../images/party-popper-gif.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: rotateY(180deg);
    z-index: 0;
}

.form-complete-body.stop::after,
.form-complete-body.stop::before {
    display: none;
}

.account-card h2 {
    font-size: 20px;
    color: #141718;
    line-height: 30px;
    margin: 0 0 18px;
}

/* HERE IS THE NEW CSS FOR DESIGN */
.formfield.add-question-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.date-input-icon .form-icon {
    top: 6px;
}

.date-input-icon input {
    padding-right: 25px !important;
    width: 100% !important;
}

.multi-ans-wrapperss {
    margin-top: 10px;
    /* border-bottom: 1px solid #C9C9C9; */
    border-bottom: 1px solid #960000;
}

.select-field-input select {
    padding-left: 0;
}

.select-field-input select:focus {
    border: 0;
    outline: 0;
    box-shadow: unset;
}

.document-viewer {
    max-width: 700px;
    margin: 50px auto 0;
    width: 100%;
    position: relative;
}

.custum-card.steps-form-card:has(.document-viewer) {
    height: 100%;
    overflow-y: auto;
}

.will-steps-box:has(.document-viewer) {
    width: 100%;
    justify-content: center;
}

.down-pdf-btn {
    width: fit-content;
    height: 42px;

    box-shadow: 3px 6px 14px 0px #00000026;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px 8px 0 0;
    position: absolute;
    background-color: #960000;
    border: 0;
    gap: 6px;
    top: -42px;
    bottom: auto;
    padding: 5px 10px;
    color: #fff;
    left: 0;

    &:hover {
        background-color: #960000;
        color: #fff;
    }

    &:active {
        background-color: #960000;
    }

    &:focus {
        background-color: #960000;
        box-shadow: unset;
        border: 0;
    }
}

iframe {
    border-radius: 10px !important;
    cursor: pointer !important;
}

embed {
    overflow: hidden;
    /* Fallback for older browsers */
    overflow: clip;
    overflow-clip-margin: content-box;
}

.cover_scroller {
    position: absolute;
    top: 0;
    right: 0;
    width: 6%;
    height: 99%;
    background-color: white;
    z-index: 2;
    border-radius: 8px;
}

.completed-will-doc.processing {
    opacity: 0.7;
    cursor: not-allowed;
}

.download-will-doc.processing {
    opacity: 0.7;
    cursor: not-allowed;
}

.first-question-is-multiple {
    background-color: var(--primary-color);
    box-shadow: 0px 0px 10px 0px #84848426;
    color: var(--white);
    border: unset;
    border-radius: 100px;
    padding: 3px 12px;
}


/* gurjit  */
#popup {
    /* display: flex; */
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1000;
    height: 40%;
    text-align: center;
    width: 30%;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    border-radius: 10px;
    max-height: 240px;
}

#popup p {
    font-size: 16px;
    font-weight: 600;
    margin: 6%;
}

#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.db-content-body:has(.payment-history-box) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

div.left-align p {
    font-size: 16px;
    margin-top: -20px;
    cursor: pointer;
}

.pay-card-expire>p {
    margin-bottom: 0;
}

.promo-availed {
    position: absolute;
    right: -20px;
    top: 15px;
}




.select-pay-option label,
.add-card-field {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 15px;
    border: 1px solid #960000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 12px;

    &:hover {
        background-color: #F7F7F7;
    }
}

.card-name-input {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-name-details h4 {
    font-size: 18px;
    line-height: 32px;
    text-transform: capitalize;
}

.card-name-details p {
    font-weight: 500;
}

.select-pay-option label input,
.add-card-field input {
    float: unset !important;
    margin-left: 0 !important;
    accent-color: #960000;
    width: 20px;
    height: 20px;
    margin-top: 0 !important;
}

.select-pay-option label .form-check-input:checked,
.add-card-field .form-check-input:checked {
    background-color: #960000;
    border-color: #960000;
}

.select-pay-option label .form-check-input:focus,
.add-card-field .form-check-input:focus {
    border-color: #960000;
    outline: 0;
    box-shadow: unset;
}

.select-pay-option label:has(input:checked) h4,
.add-card-field:has(input:checked) h4,
.add-card-field:has(input:checked) i {
    color: #960000;
}

.add-card-field p {
    margin-bottom: 0;
}

.add-card-field input {
    display: none;
}

.add-card-wrapper:has(input:checked) {
    border: 1px dashed #ddd;
    border-radius: 10px;
    padding: 0 15px;
}

.form-field-card .form-group label span {
    height: 80px;
    min-width: 80px;
    background-color: #F7F7F7;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: #fff; */
    font-size: 12px;
}

.add-card-wrapper>label {
    min-height: 112px;
}

.select-pay-option label:hover>span,
.add-card-field:hover span {
    border: 1px solid #787676;
}

.add-card-wrapper label span {
    height: 80px;
    min-width: 80px;
    background-color: #F7F7F7;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-info-wrapper .custum-card.payment-summary-box {
    position: sticky;
    top: 2px;
}






.is-multiple-error {
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
}

.fake-placeholder {
    display: flex;
    align-items: center;
}

.fake-placeholder p {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #46474A;
    white-space: nowrap;
    opacity: 0.8;
}

.account-profile-box span {
    position: absolute;
    white-space: nowrap;
    bottom: -24px;
}

.payment-method-error {
    margin-left: 10px;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
}

.apply-promo-complete-body::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    right: -15px;
    bottom: 50px;
    background: url(../images/party-popper-gif.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.apply-promo-complete-body::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    left: -21px;
    bottom: 46px;
    background: url(../images/party-popper-gif.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: rotateY(180deg);
    z-index: 0;
}

.apply-promo-complete-body.stop::after,
.apply-promo-complete-body.stop::before {
    display: none;
}

.suggested-answer {
    background-color: #F7F7F7;
    border-radius: 10px;
    margin: 5px 10px;
    padding: 5px 10px;
    cursor: pointer;
}

.suggestion-container {
    display: flex;
    flex-direction: row;
}



/* custom date picker design */

/* Customize the Datepicker */
.ui-datepicker {
    background-color: #f0f0f0;
    border-radius: 8px;
    border: 2px solid #ddd;
}


.ui-datepicker td a:hover {
    background-color: #ddd;
    border-radius: 50%;
}

/* Style the input field */
#datepicker {
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

#ui-datepicker-div {
    border: 0;
    box-shadow: 1px 1px 16px -3px #ddd;
    padding: 15px !important;
    border-radius: 15px !important;
    width: fit-content;
}

.ui-datepicker .ui-datepicker-prev {
    right: 21px !important;
    left: auto !important;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 !important;
    line-height: 1.8em !important;
    text-align: center !important;
    max-width: 136px !important;
}

/* .ui-datepicker .ui-datepicker-title  select{
    appearance: none !important;
} */
.ui-datepicker th {
    color: #960000;
}


.ui-widget-header {
    border: 0 !important;
    background: #ffffff00 !important;
}

a.ui-datepicker-prev.ui-corner-all span {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24' width='15' height='15'%3E%3Cpath d='M16.752,23.994,6.879,14.121a3,3,0,0,1,0-4.242L16.746.012,18.16,1.426,8.293,11.293a1,1,0,0,0,0,1.414l9.873,9.873Z' fill='%23960000' /%3E%3C/svg%3E%0A") !important;
    background-repeat: no-repeat;
    background-position: center;
}

.ui-datepicker .ui-datepicker-next span {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24' width='15' height='15'%3E%3Cpath d='M7.412,24,6,22.588l9.881-9.881a1,1,0,0,0,0-1.414L6.017,1.431,7.431.017l9.862,9.862a3,3,0,0,1,0,4.242Z' fill='%23960000'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.ui-datepicker td span,
.ui-datepicker td a {
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 35px;
    min-width: 35px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50px !important;
}

.ui-datepicker td a:hover {
    border: 1px solid #960000 !important;
}

.ui-state-default.ui-state-active {
    background-color: #960000 !important;
    color: #fff !important;
    border-radius: 50px !important;
}

.ui-datepicker .ui-datepicker-title select {
    font-weight: 700 !important;
}


ul.dropdown-menu>li.active {
    background-color: #960000;
    color: white;
}

ul.dropdown-menu>li.active>a {
    color: white !important;
}

ul.dropdown-menu>li:hover {
    background-color: #960000;
    color: white;
}

/* progress bar  */

.progress-container {
    width: 100%;
    max-width: 1418px;
    background-color: #ddd;
    border-radius: 10px;
    height: 3px;
    margin: 20px auto;
    overflow: hidden;
    display: flex;
    align-content: left;
    align-items: left;
    grid-column: span 2;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #960000;
    transition: width 0.5s ease-in-out;
    align-items: left;
}
.outer-container-progress {
    display: grid;
    width: 100%;
    margin: 0 auto;
    max-width: 1418px;
    grid-template-columns: max-content auto;
}
.btn-outline-danger:hover {
    color: black !important;
    background-color: #960000 !important;
    border-color: #960000 !important;
}
.btn-check:active+.btn-outline-danger, .btn-check:checked+.btn-outline-danger, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show, .btn-outline-danger:active {
    color: #fff;
    background-color: #960000;
    border-color: #960000;
}

.shadow-efect{
        text-shadow: 0.5px 0.5px 0.5px grey;
}
.will-steps-box-inner {
    display: flex;
    gap: 30px;
    width: 100%;
}
.will-steps-box-inner:has(.outer-container-progress.d-none) .steps-form-card{
    margin-top: 65px;
}
.steps-level-card {
    margin-top: 65px;
}

span.next-module {
    font-size: 17px !important;
    font-weight: bold;
}
input , select {
    font-size: 17px !important;
}
.multi-ans-wrapper > p {
    font-size: 17px !important;
}
.fake-placeholder > p {
    font-size: 17px !important;
}

.suggestion-container-new {
    display: flex;
    flex-direction: column;
}

.suggestion-container-new:before {
    content: 'suggestions ';
}
.suggestion-container-new:hover > p {
    display: inline-block;
}
.suggested-answer-new {
    background-color: #F7F7F7;
    border-radius: 10px;
    margin: 5px 10px;
    padding: 5px 10px;
    cursor: pointer;
}


.suggestions-wrapper{
    position: relative;
    max-width: 200px;
    margin-left: auto;
}



.suggestions-wrapper:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Fix alignment issue */
    --bs-position: end;
    right: 0;
}

 .suggestions-wrapper-inner{
    display: flex;
    flex-wrap: wrap;
}

/*.suggestions-wrapper .down-arrow:hover + .suggestions-wrapper-inner{
    display: flex !important;
    visibility: visible !important;
  opacity: 1 !important;
} */

.suggestions-wrapper .dropdown-menu{
    padding: 0px !important;
    border-radius: 10px !important;
    overflow: hidden;

}

.suggestions-wrapper-inner{
    max-height: 180px;
    overflow: auto;
}

.suggestions-wrapper-inner p {
    width: 100%;
    display: block;
    background: transparent!important;
    margin: 0px !important;
    border-radius: 0px !important;
    padding: 10px 10px;
}

.suggestions-wrapper-inner p:hover{
    color: #fff;
    background-color: var(--primary-color) !important;
}

.down-arrow {
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    position: relative;
    width: 120px;
    margin-right: 10px;
    text-transform: capitalize;
    height: 40px;
    margin-left: auto;
        /* border-radius: 23%; */
    background-color: #fff;
    color: #000;
    border: 1px solid #960000;
    box-shadow: 0px 0px 10px 0px #84848426;
    border-radius: 20px;
    max-height: 31px;
    padding: 2px;
}

.down-arrow:after {
    content: "";
    display: flex;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: #666;
    margin-top: 4px;
}
.explore-head h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 47px;
}
.chose-infography-txt p {
    font-size: 18px;
    font-weight: 600;
}
.db-nav-profile ul.dropdown-menu > li:hover a {
color: #fff;
}

/* This CSS for toast*/
.toast-msg-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.db-content-body > .toast-msg-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 11.5%;
}


/* THis css code for multiple answer csss*/

/* Style for the info icon container */

.info-wrapper {
    display: flex;
    gap: 5px;
    border-left: 1px solid #ddd;
    padding-left: 8px;
    margin-left: 8px;
}

.info-wrapper i{
    font-size: 14px;
}

.response-item{
    border: 1px solid #000 !important;
    border-radius: 20px !important;
}

.faq-img img {
    border-radius: 20px;
    height: calc(100% - 85px);
    width: 100%;
    object-fit: cover;
    margin-top: 85px;
}

.tri-info-box img {
    margin: 0 0 10px;
    height: 90px;
}

.arrow-vector{
    height: 120px;
}

.arrow-vector {
    height: 100px;
    rotate: 176deg;
    margin-left: 12px;
    max-width: 100px;
    margin-top: -15px;
    transform: rotateY(180deg);
}

.hero-btn-group {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    align-items: flex-start;
    margin: 45px 0 0;
}


.chose-infography-list li>img {
    height: 65px;
}


html {
  scroll-behavior: smooth;
}

.custm-navbar .navbar-collapse{
    flex-grow: inherit !important;
    display: flex !important;
}

.custm-navbar .container{
    display: flex;
    flex-wrap: nowrap;
}

nav.custm-navbar .collapse:not(.show) {
    display: none !important;
}





/* .write-will-left{
    text-align: center;
} */
.custum-card.steps-form-card input, .custum-card.steps-form-card select{
    border-color: #960000;
}
.custom-suggestion-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-block: 5px;
    border: 1px solid #960000;
}
.custom-suggestion-wrap input{
    border: 0 !important;
    /* padding-inline: 0 !important; */
    padding-block: 5px;
    min-height: 30px !important;
}


.new-heder-menu-list {
    display: flex;
    vertical-align: baseline;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: space-around;
    flex-wrap: wrap;
    min-height: 50px;
    align-content: space-around;
}

.new-heder-menu-list li {
    margin: 0 70px;
    font-weight: 600;
    font-size: 16px;
}

.new-heder-menu-list li:hover {
    color: var(--primary-color);
}
.new-heder-menu-list li a:hover {
    color: var(--primary-color);
}