body {
    --dark-blue-color: #1F1DAE;
    --light-blue-color: #423FE5;
    --green-color: #0EB629;
    --lighter-green-color: #13fc3a;
    --thin-green-color: #F8FFF4;
    --primary-bg-color: #F7FCFF;
    --secondary-bg-color: #deeef8;
    --light-bg-color: #c0e4fa;
    --base-font-color: #5F5B5B;
    --dark-gray-color: #6B6B6E;
    --light-gray-color: #D8E0EA;
    --red-color: #E52F2F;
    --gray-color: rgb(144, 147, 150);
    --border-color: rgba(1, 13, 9, 0.1);
}

/***************************************/
/***************************************/
/* FONT SIZES */
/***************************************/
/***************************************/
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-19 { font-size: 19px; }
.font-20 { font-size: 20px; }
.font-21 { font-size: 21px; }
.font-22 { font-size: 22px; }
.font-23 { font-size: 23px; }
.font-24 { font-size: 24px; }
.font-25 { font-size: 25px; }
.font-26 { font-size: 26px; }
.font-27 { font-size: 27px; }
.font-28 { font-size: 28px; }
.font-29 { font-size: 29px; }
.font-30 { font-size: 30px; }
.font-31 { font-size: 31px; }
.font-32 { font-size: 32px; }
.font-33 { font-size: 33px; }
.font-34 { font-size: 34px; }
.font-35 { font-size: 35px; }
.font-36 { font-size: 36px; }
.font-37 { font-size: 37px; }
.font-38 { font-size: 38px; }
.font-39 { font-size: 39px; }
.font-40 { font-size: 40px; }
@media only screen and (max-width: 576px) {
    .font-xs-12 { font-size: 12px; }
    .font-xs-13 { font-size: 13px; }
    .font-xs-14 { font-size: 14px; }
    .font-xs-15 { font-size: 15px; }
    .font-xs-16 { font-size: 16px; }
    .font-xs-17 { font-size: 17px; }
    .font-xs-18 { font-size: 18px; }
    .font-xs-19 { font-size: 19px; }
    .font-xs-20 { font-size: 20px; }
    .font-xs-21 { font-size: 21px; }
    .font-xs-22 { font-size: 22px; }
    .font-xs-23 { font-size: 23px; }
    .font-xs-24 { font-size: 24px; }
    .font-xs-25 { font-size: 25px; }
    .font-xs-26 { font-size: 26px; }
    .font-xs-27 { font-size: 27px; }
    .font-xs-28 { font-size: 28px; }
    .font-xs-29 { font-size: 29px; }
    .font-xs-30 { font-size: 30px; }
    .font-xs-31 { font-size: 31px; }
    .font-xs-32 { font-size: 32px; }
    .font-xs-33 { font-size: 33px; }
    .font-xs-34 { font-size: 34px; }
    .font-xs-35 { font-size: 35px; }
    .font-xs-36 { font-size: 36px; }
    .font-xs-37 { font-size: 37px; }
    .font-xs-38 { font-size: 38px; }
    .font-xs-39 { font-size: 39px; }
    .font-xs-40 { font-size: 40px; }
}

/***************************************/
/***************************************/
/* FONT COLORS */
/***************************************/
/***************************************/
.font-black { color: black; }
.font-dark-gray { color: var(--dark-gray-color); }
.font-dark-blue { color: var(--dark-blue-color); }
.font-medium-blue { color: var(--light-blue-color); }
.font-green { color: var(--green-color); }
.font-base-color { color: var(--base-font-color); }

.arrow {
    border: solid var(--green-color);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-right: 3px;
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-left: 3px;
}

/***************************************/
/***************************************/
/* Layout Arounds */
/***************************************/
/***************************************/
.r-0 {
    right: 0;
}
.r-50 {
    right: 50px;
}
.r-40.reverse {
    right: -40px;
}
.b-0 {
    bottom: 0;
}
.b-150 {
    bottom: 150px;
}
.t-50 {
    top: 50px;
}
.border-light-top {
    border-top: 1px solid var(--secondary-bg-color) !important;
}

.border-light-bottom {
    border-bottom: 1px solid var(--secondary-bg-color) !important;
}

.border-light-right {
    border-right: 1px solid var(--secondary-bg-color) !important;
}

.border-light-left {
    border-left: 1px solid var(--secondary-bg-color) !important;
}

.border-top-left-radius {
    border-top-left-radius: 15px;
}

.border-bottom-left-radius {
    border-bottom-left-radius: 15px;
}

.border-top-right-radius {
    border-top-right-radius: 15px;
}

.border-bottom-right-radius {
    border-bottom-right-radius: 15px;
}

.border-none {
    border: none !important;
}

/* Background Color */
.bg-dark-blue {
    background-color: var(--dark-blue-color);
}

.bg-light-blue {
    background-color: var(--light-blue-color);
}

.bg-green {
    background-color: var(--green-color);
}

.bg-thin-blue {
    background-color: var(--primary-bg-color);
}

.bg-lighter-blue {
    background-color: var(--secondary-bg-color) !important;
}

/* Background Rounded */
.rounded-10 {
    border-radius: 10px !important;
}

/* Font Styles */
.font-thin {
    font-weight: 100 !important;
    font-style: normal !important;
}

.font-extralight {
    font-weight: 200 !important;
    font-style: normal !important;
}

.font-light {
    font-weight: 300 !important;
    font-style: normal !important;
}

.font-regular {
    font-weight: 400 !important;
    font-style: normal !important;
}

.font-medium {
    font-weight: 500 !important;
    font-style: normal !important;
}

.font-semibold {
    font-weight: 600 !important;
    font-style: normal !important;
}

.font-bold {
    font-weight: 700 !important;
    font-style: normal !important;
}

.font-extrabold {
    font-weight: 800 !important;
    font-style: normal !important;
}

.font-black {
    font-weight: 900 !important;
    font-style: normal !important;
}

.font-thin-italic {
    font-weight: 100 !important;
    font-style: italic !important;
}

.font-extralight-italic {
    font-weight: 200 !important;
    font-style: italic !important;
}

.font-light-italic {
    font-weight: 300 !important;
    font-style: italic !important;
}

.font-regular-italic {
    font-weight: 400 !important;
    font-style: italic !important;
}

.font-medium-italic {
    font-weight: 500 !important;
    font-style: italic !important;
}

.font-semibold-italic {
    font-weight: 600 !important;
    font-style: italic !important;
}

.font-bold-italic {
    font-weight: 700 !important;
    font-style: italic !important;
}

.font-extrabold-italic {
    font-weight: 800 !important;
    font-style: italic !important;
}

.font-black-italic {
    font-weight: 900 !important;
    font-style: italic !important;
}

/*******************************************************/
/********************  ## Buttons  *******************/
/*******************************************************/
.theme-btn,
a.theme-btn {
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 25px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-transform: capitalize;
  background-color: transparent;
}
  
  .theme-btn.outline,
  a.theme-btn.outline {
    color: var(--light-blue-color);
    border: 1px solid var(--light-blue-color);
    background-color: transparent;
  }

  .theme-btn.outline:hover,
  a.theme-btn.outline:hover {
    background-color: var(--light-blue-color);
    color: white;
  }

  .theme-btn.fill,
  a.theme-btn.fill {
    color: white;
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
  }

  .theme-btn.fill:hover,
  a.theme-btn.fill:hover {
    background-color: white;
    color: var(--light-blue-color) !important;
  }



/*******************************************************/
/********************  ## Main Section Part  *******************/
/*******************************************************/
.main-section .bg-circle {
    position: absolute;
    bottom: 0;
    top: 250px;
    z-index: -1;
}
.main-section .section-title,
.main-section .section-title p {
    color: var(--light-blue-color);
    line-height: 1.2;
}
.main-section .section-title span {
    color: var(--green-color);
}
.main-section .section-note {
    color: var(--base-font-color);
    line-height: 1.5;
}
.main-section .section-note a {
    color: var(--light-blue-color) !important;
    text-decoration: underline !important;
    word-wrap: break-word;
}

.main-section .section-image {
    position: relative;
    display: flex;
}
.main-section .section-image > img {
    display: inline-block;
    height: auto;
}

.main-section .section-image img.top-offset {
    position: absolute;
    top: -150px;
    right: 0px;
}
.main-section .section-image img.avatar {
    width: calc(100% / 3.5);
    right: -40px;
}

.theme-green {
    position: absolute;
    width: 300px;
    color: white;
    border-radius: 15px;
    background-color: var(--green-color);
    top: 350px;
    right: 30px;
}

.main-section div.bg-light-blue:has(div.box-content) {
    border-collapse: separate;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.main-section div.bg-lighter-blue:has(div.box-content) {
    border-collapse: separate;
    border-radius: 0;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.main-section div.border-light:has(div.box-content) {
    border: 1px solid var(--secondary-bg-color) !important;
}

.main-section .section-icon {
    width: 70px;
    height: 70px;
    background-color: white;
    border: 1px solid var(--secondary-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-section .section-icon > img {
    width: 32px;
    height: 32px;
}

.main-section .section-icon.rounded {
    border-radius: 50% !important;
}

.main-section .section-icon.rounded.green {
    border: 1px solid var(--green-color);
}

.main-section .diagram-content {
    width: calc(100% / 1.4);
    height: auto;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
}
.main-section .diagram-item {
    height: 100%;
}
.main-section .diagram-item .item-logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid var(--secondary-bg-color);
    background-color: white;
}
.main-section .diagram-item .item-desc {
    width: 150px;
    padding: 20px 0px;
    background-color: white;
    line-height: 2;
}
.main-section .diagram-content .dashed {
    width: 75%;
    height: 53%;
    border: 2px dashed var(--green-color);
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    top: 50px;
    z-index: -1;
}

/* REVIEW PART */
.main-section .review-item .quote-info {
    width: 100%;
    height: 280px;
    padding: 30px;
    background-color: var(--primary-bg-color);
    border-radius: 10px;
    position: relative;
}
.main-section .review-item .quote-info::after,
.main-section .review-item .quote-info::before {
    position: absolute;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    left: 50%;
    top: 100%;
}
.main-section .review-item .quote-info::after {
    border-width: 5px;
    border-color: var(--primary-bg-color) transparent transparent transparent;
    margin-left: -5px;
}
.main-section .review-item .quote-info::before {
    border-width: 10px;
    border-color: var(--primary-bg-color) transparent transparent transparent;
    margin-left: -10px;
}
.main-section .review-item .client-info > img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .1);
}

.main-section ul.payment-status > .fail > span,
.main-section ul.payment-status > .success > span {
    position: relative;
    margin: 10px 0px;
}
.main-section ul.payment-status > .fail > span {
    color: var(--base-font-color);
}
.main-section ul.payment-status > .fail > span::before {
    content: url("../page_images/icon_close_outline.svg");
    position: absolute;
    left: -40px;
}
.main-section ul.payment-status > .success > span {
    color: var(--green-color);
}
.main-section ul.payment-status > .success > span::before {
    content: url("../page_images/icon_check_o.svg");
    position: absolute;
    left: -40px;
}

.main-section .step-line {
    width: auto;
    height: 100%;
    position: absolute;
    left: calc(50% - 20px);
    transform: translateX(-calc(50% + 20px));
}
.main-section .step-line .break-icon {
    width: 40px;
    height: 40px;
    border: 3px solid var(--green-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    position: absolute;
    left: -20px;
}

.main-section .step-line .break-icon.middle {
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
}

.main-section .step-line .vertical-dash {
    width: 1px;
    height: 100%;
    border: 1px dashed #A0AEB7;
    position: absolute;
    z-index: -1;
}

.main-section .step-line.last .break-icon {
    top: 50px;
}
.main-section .step-line.last .vertical-dash {
    height: 50px;
}

/*********************************************/
/*********************************************/
/* Form Part */
/*********************************************/
/*********************************************/
.iframe-form {
    width: calc(100% / 2);
    height: 850px;
    border-radius: 15px;
}

/*******************************************************/
/******************* ## Footer Area  *******************/
/*******************************************************/

.main-footer {
    background-color: var(--dark-blue-color);
    color: white;
}
.main-footer .logo {
    margin-bottom: 30px;
}
.main-footer .widget-about p,
.main-footer .widget-cr p {
    line-height: 1.5;
}
.main-footer .widget-links {
    line-height: 3;
}


/*******************************************************/
/*******************  Loading Style  *******************/
/*******************************************************/
.loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: var(--primary-bg-color);
    background-repeat: no-repeat;
    background-position: center center;
    transition: .3s ease-in-out;
    visibility: hidden;
    opacity: 0;
}
.loading div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-top: 5px solid var(--green-color);
    border-right: 5px solid var(--green-color);
    border-bottom: 5px solid white;
    border-left: 5px solid white;
    -webkit-animation: 2s loader linear infinite;
    animation: 2s loader linear infinite;
}
.loading.show {
    visibility: visible;
    opacity: 1;
}

/* Loading Animation */
@-webkit-keyframes loader {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/**************************************************/
/**************************************************/
/**********      Responsive Styles      ***********/
/**************************************************/
/**************************************************/

@media only screen and (max-width: 1199px) {
    .main-section .section-image img.avatar {
        right: -20px;
    }
    .section-form {
        width: calc(100% / 2);
    }
}
@media only screen and (max-width: 991px) {
    .main-section .section-content .section-note {
        padding-right: 0px;
    }
    .main-section .section-image img.top-offset {
        top: 0px !important;
        right: 0px !important;
    }
    .main-section .section-image img.scale-off {
        width: 50%;
        height: 400px;
        object-fit: contain;
    }
    .main-section .section-image img.avatar {
        right: 20px;
    }
    .main-section .step-line {
        display: none;
    }
    .main-section .box-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .main-section div.bg-light-blue:has(div.box-content) {
        border-collapse: separate;
        border-radius: 0;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .main-section div.bg-lighter-blue:has(div.box-content) {
        border-collapse: separate;
        border-radius: 0;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
    .main-section .diagram-content {
        width: 100%;
    }
    .main-section .diagram-content .dashed {
        width: 50%;
        height: 75%;
    }
    .section-form {
        width: calc(100% / 1.5);
    }
}
@media only screen and (max-width: 767px) {
    .main-section .section-content .section-title,
    .main-section .section-content .section-title p,
    .main-section .section-content .section-note {
        text-align: center;
    }
    .main-section .btn-group {
        display: flex;
        justify-content: center;
    }
    .main-section.pb-100 {
        padding-bottom: 50px !important;
    }
    .main-section .section-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main-section .section-image img.avatar {
        right: -40px;
    }
    .main-section .section-image img.scale-off {
        width: 100%;
        object-fit: contain;
    }
    .main-section .section-image img.top-offset {
        position: relative !important;
        margin-top: 20px;
    }
    .theme-green {
        position: relative;
        top: 30px;
        left: 50%;
        right: 50%;
        transform: translate(-50%) !important;
    }
    .section-form {
        width: 100%;
    }
}
@media only screen and (max-width: 576px) {
    .main-section .section-title,
    .main-section .section-title > p {
        line-height: 1;
    }
    .theme-green {
        text-align: center;
    }
    .main-section .section-image img.avatar {
        right: 0px;
    }
    .main-section .diagram-item .item-logo {
        width: 70px;
        height: 70px;
        margin-top: 10%;
    }
    .form-status .status-ok {
        display: flex;
        justify-content: center;
        gap: 20px;
        text-align: center;
    }
    .main-footer .logo {
        margin-left: 50%;
        margin-right: 50%;
        transform: translateX(-50%);
    }
    .main-footer .widget-about p,
    .main-footer .widget-cr p {
        text-align: center;
    }
}