*, :before, :after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    background: #FFFFFF;
    webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.disable-body {
    overflow: hidden;
}

.container {
    max-width: 1290px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

.hide {
    display: none !important;
}

.btn {
    background: #3C69D7;
    border-radius: 4px;
    font-family: Nunito Sans, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .1s all linear;
}

.btn:hover {
    transform: scale(1.02);
}

.btn-transparent {
    background: transparent;
    border-radius: 4px;
    border: 0.78px solid #FFFFFF;
    font-family: Nunito, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 16.8px;
    text-align: center;
    color: #FFFFFF;
}

.btn-white {
    background: #FFFFFF;
    border-radius: 4px;
    font-family: Nunito Sans, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    border: none;
    color: #01050F;
}

.tel {
    cursor: pointer;
    transition: .1s all linear;
    display: flex;
    column-gap: 12px;
    align-items: center;
}

.tel:hover {
    transform: scale(1.01);
}

.tel .tel-text {
    font-family: Nunito Sans, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
    color: #3C69D7;
}

.sub-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: center;
    color: #072664;
    margin-bottom: 5px;
}

section {
    padding: 64px 0;
}

h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 67.2px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px 0px #7394E5;
}

h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 42px;
    text-align: center;
    color: #01050F;
}

h3 {
    font-size: 48px;
    font-weight: 700;
    line-height: 48px;
    color: #01050F;
}

h5 {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    text-align: center;
    color: #01050F;
}

header {
    text-align: center;
    height: 70px;
    position: absolute;
    width: 100%;
    z-index: 26;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

header .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 70px;
}

header .btns-wrapper {
    display: flex;
    gap: 12px;
}

header .btns-wrapper .btn-transparent {
    width: 88px;
    height: 33px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .1s all linear;
}

header .btns-wrapper .btn-transparent:hover {
    transform: scale(1.05);
}

header .btns-wrapper .btn-white {
    width: 110px;
    height: 33px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .1s all linear;
}

header .btns-wrapper .btn-white:hover {
    transform: scale(1.05);
}

footer {
    background: #FFFFFF;
    padding: 80px 0;
}

footer .footer-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
}

footer .footer-wrapper .company {
    max-width: 285px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    color: #3C69D7;
}

footer .rights {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    color: #3C69D7;
}

footer .rules p {
    font-family: Nunito Sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #878D97;
}

footer nav ul li a {
    font-size: 14px;
    font-weight: 400;
    color: #01050F;
}

footer nav ul li:hover {
    transform: scale(1.02);
}

footer .footer-info {
    max-width: 284px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

footer .footer-info .wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #01050F;
}

footer .footer-info .wrapper span {
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #3C69D7;
}

footer .btns-wrapper {
    align-items: center;
}

section.get-loan-easy {
    background: #ECF2FF;
    padding-bottom: 0;
    position: relative;
}

section.get-loan-easy .content {
    display: flex;
    justify-content: flex-start;
}

section.get-loan-easy .content > .wrapper {
    max-width: 531px;
    padding-top: 80px;
    width: 100%;
}

section.get-loan-easy h3 {
    margin-bottom: 16px;
    font-size: 42px;
}

section.get-loan-easy img.upper-eye {
    position: absolute;
    top: 0;
    right: 10%;
}

section.get-loan-easy img.lower-eye {
    position: absolute;
    bottom: 0;
    left: 10%;
}

section.get-loan-easy .background-img-wrapper
section.get-loan-easy .content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 553px;
    width: 100%;
}

section.get-loan-easy .content .sub-title {
    margin-bottom: 0;
    text-align: left;
}

section.get-loan-easy .content .text {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: left;
    color: #616161;
}

section.get-loan-easy .content .btn {
    margin-top: 16px;
    max-width: 145px;
    width: 100%;
    height: 49px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    color: #FFFFFF;
}

section.calculator-section {
    background: url("../img/bg/calculator-section-bg.png") center center/cover no-repeat;
    padding-top: 134px;
    padding-bottom: 250px;
}

section.calculator-section .calculator-wrapper {

    width: fit-content;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 16px;
    display: flex;
    gap: 32px;
    margin: 64px auto 0 auto;
    padding: 30px;
}

section.calculator-section .calculator-wrapper .calculator, section.calculator-section .calculator-wrapper .loan-details {
    height: auto;
    padding: 24px 24px 48px 24px;
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    /*max-width: 422px;*/
    width: 100%;
}

section.calculator-section .calculator-wrapper .loan-details .loan-details-wrapper {
    background: #F3F4F5;
    padding: 16px;
    border-radius: 4px;
    /*max-width: 374px;*/
    width: 100%;
    margin-bottom: 32px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: left;
    color: #01050F;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

section.calculator-section .calculator-wrapper .loan-details .loan-details-wrapper span {
    font-weight: 700;

}

section.calculator-section .calculator-wrapper .loan-details .btn {
    width: 100%;
    height: 49px;
    font-size: 16px;
    line-height: 19px;
}

input[type=text] {
    height: 50px;
    font-size: 16px;
    max-width: 310px;
    width: 100%;
    border: none;
    border-radius: 8px 8px 0 0;
    background: #F3F4F5;
    padding: 8px 16px 8px 20px;
    border-bottom: 1px solid #878D97
}

section.content {
    padding-top: 134px;
}

.primary-content {
    background: #ecf2ff;
}

.content .container .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.content .container .page-container {
    max-width: 1000px;
}

.h5 {
    font-family: Nunito Sans;
    font-size: 24px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: center;
    color: #072664;
    margin-bottom: 20px;
}

.h4 {
    font-family: Nunito Sans;
    font-size: 28px;
    font-weight: 700;
    line-height: 33.6px;
    text-align: left;
}

.h1 {
    font-family: Nunito Sans;
    font-size: 56px;
    font-weight: 700;
    line-height: 67.2px;
    text-align: center;
    color: #3C69D7;
    margin-bottom: 30px;
}

.h6 {
    font-family: Nunito Sans;
    font-size: 18px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: left;
}

.actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.actions .btn {
    margin-top: 16px;
    max-width: 165px;
    width: 100%;
    height: 49px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    text-align: center;
    color: #FFFFFF;
}

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
}

.disabled {
    opacity: 0.7;
}

.info {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
}

.map {
    min-height: 100%;
    width: 100%;
}

.map iframe {
    border-radius: 8px;
    margin: 0 auto;
    min-height: 100%
}

.amount-option {
    border-radius: 4px;
    opacity: 0.5;
    background: #F3F4F5;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 10px;
}

.subtitle {
    font-family: Nunito Sans, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #072664;
}

.text-center {
    text-align: center;
}

.fw-700 {
    font-weight: 700 !important;
}

h4 {
    font-family: Nunito Sans, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #000000;
}

.slider-content {
    width: 100%;
    margin-bottom: 24px;
}

.slider-value {
    border: none;
    font-family: Nunito Sans, sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 100%;
    max-width: 4ch;
}

.slider-value:focus {
    outline: none;
}

.slider-value::-webkit-inner-spin-button,
.slider-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.slider-value[type=number] {
    -moz-appearance: textfield;
}

.slider-unit {
    font-family: Nunito Sans, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    margin-left: 5px;
    color: #878D97;
}

.slider-track {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 24px;
    border-radius: 5px;
    outline: none;
}

.slider-track::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 24px;
    border-radius: 4px;
    background: #84a0e4;
    border: 0.5px solid #D0E0FF;
    position: relative;
    cursor: pointer;
    background-image:
            radial-gradient(circle, #fff 100%, transparent 0),
            radial-gradient(circle, #fff 100%, transparent 0),
            radial-gradient(circle, #fff 100%, transparent 0);
    background-repeat: no-repeat;
    background-size: 2px 2px;
    background-position:
            center 6px,
            center 10px,
            center 14px;
}

.slider-track::-moz-range-thumb {
    width: 14px;
    height: 26px;
    border-radius: 4px;
    background: #84a0e4;
    border: 0.5px solid #D0E0FF;
    cursor: pointer;
    position: relative;
}


.slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: Nunito Sans, sans-serif;
    font-size: 14px;
    color: #878D97;
}

#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 100px;
    display: none;
    background-color: transparent;
    color: #fff;
    border: none;
    padding: 5px 5px;
    border-radius: 20%;
    cursor: pointer;
    font-size: 16px;
    z-index: 1000;
}

#scrollToTopBtn:hover {
    background-color: #BBCFFF;
}


.cookie-modal {
    position: fixed;
    opacity: .9;
    background: #ECF2FF;
    padding: 60px 100px;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-direction: column;
    bottom: 0;
    z-index: 20;
}

.cookie-modal .text {
    font-family: Nunito Sans, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #01050F;
}

.cookie-modal .btns-wrapper {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.cookie-modal .btn {
    height: 49px;
    max-width: 216px;
    width: 100%;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-family: Nunito Sans, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}

.cookie-modal .btn.white {
    color: #01050F;
    background: #FFFFFF;
}
