/*
Theme Name: Chroco
Theme URI:
Description:
Author: Pjotrs/Eshan
Author URI:
Version: 1.0.1
License:
License URI:
Tags:
Text Domain: ch
*/


:root {
    --J-Blue: #040066;
    --J-Blue-2: #040AB2;

}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 2rem;
}
.row {
    --bs-gutter-x: 2rem;
}

@charset "utf-8";

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-size: 100%;
    line-height: 1.125em;
    height: 100%;
    overflow-x: hidden;
    max-width: 100vw;
    image-rendering: -webkit-optimize-contrast;
    /* Cross Browser graphic and fonts fixes */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-interpolation-mode: nearest-neighbor;
    top: 0px !important;
}

body.admin-bar .navbar {
    /*top: 32px !important;*/
}

/* GENERAL STYLES */
.p-relative, div.wrapper {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.c-white {
    color: white;
}

.img-like-bck {
    position: absolute;
    max-width: 100%;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
}

.img-like-bck.no-abs {
    position: initial;
    top: 0%;
    left: 0%;
    transform: translate(0%, 0%);
}

.img-like-bck.img-contain {
    object-fit: contain !important;
}

.img-on-top {
    height: 265px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    top: 0% !important;
    left: 0% !important;
    position: initial !important;
    transform: translate(-0%, -0%) !important;
}

.not-visible, .hidden {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    pointer-events: none;
}

.hidden {
    transition: opacity 0.8s, max-height 0.8s ease-out;
}

.visible {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 1000px !important;
    transition: opacity 0.8s, max-height 0.8s ease-in;
    pointer-events: all;
}

.show-text {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease-out, max-height 0.4s ease-out;
}

.f-right {
    float: right;
}

body.admin-bar .header {
    top: 32px !important;
}

.bck-white {
    background-color: white;
}

.font-regular {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}

.font-black {
    font-weight: 900;
}

.primary-bg-color {
    background: #040AB2;
}
.btn-primary-bg-color {
    background: #040066 !important;
}
.btn-primary-bg-color:hover {
    background: #040AB2 !important;
}

.btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.more-action-cta:focus-visible, .select-feature-btn:focus-visible {
    color: #040AB2 !important;
}

.select-feature-btn.selected:focus-visible {
    border: 1px solid var(--J-Blue-2, #040AB2) !important;
    color: #040AB2 !important;
}

.select-feature-btn:focus-visible {
    color: #FFF !important;
}

.primary-dark-bg-color {
    background: #040066 !important;
}

.primary-text-color {
    color: #040066;
}

.primary-dark-text-color {
    color: #040066;
}
.default-bg-color{
    background: #F6F8FE;
}

.btn-primary-custom {
    background-color: #040066;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 30px;
    font-size: 1rem;
    color: white;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.btn-primary-custom:hover {
    background-color: #040AB2;
    color: white;
}

.btn-outline-primary-custom{
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    color: #040066;
    border-color: #040066;
}

.btn-outline-primary-custom:hover {
    color: #040AB2 !important;
    border: 1px solid var(--J-Blue-2, #040AB2) !important;
    background-color: #FFF !important;
}

.form-label,
.frm_form_fields .frm_primary_label{
    font-size: 0.95rem;
    color: #040066;
    font-style: normal;
    font-weight: 700;
    line-height: 20px
}
.frm_form_fields .frm_primary_label span{
    font-weight: 400;
}

.form-note {
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #040066;
}

.custom-checkbox .form-check-input {
    width: 18px;
    height: 18px;
    background-color: #fff;
    margin-right: 0.5rem;
    margin-top: 0;
    box-shadow: none;
    border-radius: 0;
}

.custom-checkbox .form-check-input:checked {
    background-color: #040066;
    border-color: #040066;
}

.form-control-custom,
.frm_form_fields .form-field input,
.frm_form_fields .form-field select{
    border-radius: 10px;
    border: 1px solid #040066;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control-custom:focus {
    border-color: #040066;
    box-shadow: 0 0 0 0.1rem rgba(46, 65, 255, 0.25);
    outline: none;
}

/* ====================== Tag Cloud ======================== */

.tag-cloud {
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    background: #040AB2;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
    color: white;
}

.tag-cloud .title {
    font-size: 24px;
    font-weight: 900;
}

.tag-cloud .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-cloud .tags .tag {
    background-color: white;
    color:  #040AB2;
    padding: 0 8px;
    line-height: 24px;
    border-radius: 20px;
    font-size: 14px;
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    border: 1px solid var(--J-Blue) !important;
    opacity: 1 !important;
    background-color: #fff !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background-color: var(--J-Blue) !important;
}


/* ====================== Tag Cloud end ==================== */

/* ====================== Header Menu ====================== */

.navbar-nav .menu-item a {
    font-size: 18px;
    color: #040066;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
}

.footer-nav .menu-item a{
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
}

.navbar-nav .current-menu-item {
    position: relative;
}

.navbar-nav .current-menu-item::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 50%;
    height: 2px;
    background-color: #040066;
    border-radius: 3px;
}

.custom-mobile-menu {
    position: absolute;
    top: 3.5rem;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Animation setup */
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out;

    will-change: transform, opacity;
    pointer-events: none;
    z-index: 1040;
    overflow-y: auto; /* prevent jerky scroll behavior */
}

.custom-mobile-menu.active {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

.custom-mobile-menu .navbar-nav {
    gap: 2.5rem;
}

/* Style the navbar toggler button */
.navbar-toggler {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.navbar-toggler::after {
    content: '';
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.66663 9.33333C6.66663 8.59695 7.26358 8 7.99996 8L24 8C24.7363 8 25.3333 8.59696 25.3333 9.33334C25.3333 10.0697 24.7363 10.6667 24 10.6667L7.99996 10.6667C7.26358 10.6667 6.66663 10.0697 6.66663 9.33333Z' fill='%23040066'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.66663 16C6.66663 15.2636 7.26358 14.6667 7.99996 14.6667L24 14.6667C24.7363 14.6667 25.3333 15.2636 25.3333 16C25.3333 16.7364 24.7363 17.3333 24 17.3333L7.99996 17.3333C7.26358 17.3333 6.66663 16.7364 6.66663 16Z' fill='%23040066'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.66663 22.6667C6.66663 21.9303 7.26358 21.3333 7.99996 21.3333L24 21.3333C24.7363 21.3333 25.3333 21.9303 25.3333 22.6667C25.3333 23.403 24.7363 24 24 24L7.99996 24C7.26358 24 6.66663 23.403 6.66663 22.6667Z' fill='%23040066'/%3E%3C/svg%3E");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-toggler.active::after {
    content: '';
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 14.1147L8.94266 7.05733C8.69119 6.81446 8.35439 6.68006 8.00479 6.6831C7.6552 6.68614 7.32078 6.82636 7.07357 7.07357C6.82636 7.32079 6.68613 7.6552 6.68309 8.0048C6.68006 8.35439 6.81445 8.6912 7.05733 8.94267L14.1147 16L7.05733 23.0573C6.81445 23.3088 6.68006 23.6456 6.68309 23.9952C6.68613 24.3448 6.82636 24.6792 7.07357 24.9264C7.32078 25.1736 7.6552 25.3139 8.00479 25.3169C8.35439 25.3199 8.69119 25.1855 8.94266 24.9427L16 17.8853L23.0573 24.9427C23.3088 25.1855 23.6456 25.3199 23.9952 25.3169C24.3448 25.3139 24.6792 25.1736 24.9264 24.9264C25.1736 24.6792 25.3139 24.3448 25.3169 23.9952C25.3199 23.6456 25.1855 23.3088 24.9427 23.0573L17.8853 16L24.9427 8.94267C25.07 8.81967 25.1716 8.67254 25.2415 8.50987C25.3113 8.3472 25.3481 8.17224 25.3497 7.9952C25.3512 7.81816 25.3175 7.64259 25.2504 7.47873C25.1834 7.31487 25.0844 7.166 24.9592 7.04081C24.834 6.91562 24.6851 6.81661 24.5213 6.74957C24.3574 6.68253 24.1818 6.64879 24.0048 6.65033C23.8278 6.65187 23.6528 6.68865 23.4901 6.75853C23.3274 6.82841 23.1803 6.92999 23.0573 7.05733L16 14.1147Z' fill='%23040066'/%3E%3C/svg%3E");
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
}

#menuToggle::before,
#menuToggle::after {
    font-size: 32px;
}

@media (max-width: 991.98px) {
    .navbar-nav .current-menu-item > a {
        font-weight: 700 !important;
    }
}


/* ====================== Footer ====================== */
.copyright-text {
    line-height: 1.3rem;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.footer-nav {
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

/* ====================== Footer End ====================== */

/* ====================== BREADCRUMBS ====================== */
.breadcrumbs{
    margin-bottom: 16px;
}
.breadcrumbs, .breadcrumbs a{
    color: #000;
    text-align: center;
    font-family: Raleway;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}
.breadcrumbs span{
    margin: 0 4px;
}
/* ====================== END BREADCRUMB ====================== */

/* Feature blue card style */

 .feature-list-blue-card {
     color: white;
     border-radius: 1rem;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /*width: 368px;*/
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
     background: #040AB2;
 }

.feature-list-blue-card:hover {
    box-shadow: 0 0 20px 0 rgba(4, 10, 178, 0.25);
 }

.feature-list-blue-card .feature-category {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}

.feature-list-blue-card .incluso-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}

.feature-list-blue-card .card-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 30px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    min-height:53px;
    max-height:53px;
}

.feature-list-blue-card .card-action-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
}

.feature-list-blue-card .feature-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 35px;
}

@media (max-width: 767.98px) {
    .feature-list-blue-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: auto;
    }

    .feature-list-blue-card .card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 52px;
        font-size: 20px;
        font-weight: 900;
        line-height: 22px;
    }

    .feature-list-blue-card .card-action-link {
        font-size: 16px;
        font-weight: 700;
        line-height: 120%;
    }

    .feature-list-blue-card .feature-category {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        text-transform: uppercase;
    }

    .feature-list-blue-card .card-title {
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 22px;
    }

    .feature-list-blue-card .feature-description {
        display: none;
    }

    .feature-list-blue-card .mobile-mockup {
        max-height: 140px;
        width: 205px;
    }
}

/* End feature blue card */

/* Start feature white card */
.feature-list-white-card {
    color: white;
    border-radius: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #D9DBE9;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
}

.feature-list-white-card:hover {
    box-shadow: 0 0 20px 0 rgba(4, 10, 178, 0.25) !important;
}

.feature-list-white-card.is-selected {
    border-color: var(--feature-color);
}

.feature-list-white-card .feature-category {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}
.feature-list-white-card .feature-category a{
    text-decoration: none;
    text-transform: uppercase;
}

.feature-list-white-card .incluso-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}

.feature-list-white-card .card-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 60px;
    max-height: 60px;
}
.feature-list-white-card .card-title a{
    font-size: 24px;
    font-weight: 900;
    line-height: 30px;
    text-decoration: none;
}

.feature-list-white-card .card-action-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 120%;
}

.feature-list-white-card .feature-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 35px;
}

.feature-list-white-card-wrapper .add-to-list-btn {
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

@media (max-width: 767.98px) {
    .feature-list-white-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .feature-list-white-card .card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 52px;
        font-size: 20px;
        font-weight: 900;
        line-height: 22px;
    }

    .feature-list-white-card .card-action-link {
        font-size: 16px;
        font-weight: 700;
        line-height: 120%;
    }

    .feature-list-white-card .feature-category {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        text-transform: uppercase;
    }

    .feature-list-white-card .card-title a{
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 20px;
    }

    .feature-list-white-card .mobile-mockup {
        max-height: 140px;
        width: 205px;
    }

    .feature-list-white-card-wrapper .add-to-list-btn {
        height: 42px;
    }
}
/* End feature white card */


/* Page Title Section */
.breadcrumb-item + .breadcrumb-item::before {
    content: "|";
    color: #aaa;
    padding: 0 0.5rem;
}

.page-title-section .page-title {
    font-size: 60px;
    font-weight: 900;
    line-height: normal;
    margin-bottom: 32px;
}

.page-title-section .page-sub-title {
    font-size: 32px;
    font-weight: 900;
    line-height: normal;
}

.page-title-section .page-sub-title p {
    margin: 0 !important;
}

.page-title-section .page-description {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
}

.page-title-section .page-description p {
    margin: 0;
}

.page-title-section .breadcrumb-sm {
    font-size: 12px;
}



@media (max-width: 767.98px) {
    .page-title-section .page-title {
        font-size: 32px;
        line-height: 36px;
    }

    .page-title-section .page-sub-title {
        font-size: 24px;
        font-style: normal;
        font-weight: 900;
        line-height: 28px;
    }

    .page-title-section .page-description {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .page-title-section .page-description p {
        margin: 0;
    }
}
@media (min-width: 992px) {
    .breadcrumbs{
        margin-bottom: 32px;
    }
    .page-title-section .page-title{
        margin-bottom: 56px;
    }
}

/* End Page Title Section */

/* Feature Highlight Section*/

.feature-highlight-section .title {
    font-size: 28px;
}

.feature-highlight-section .description {
    font-size: 16px;
    line-height: 24px;
}
.feature-categories{
    margin-bottom: 24px;
}

@media (max-width: 767px) {
    .feature-highlight-section .title {
        font-size: 24px;
        font-weight: 900;
        line-height: 28px;
    }
}
@media (min-width: 992px) {
    .feature-highlight-section .mobile-toggle-target {
        display: flex !important;
    }

    .feature-highlight-section #benefitSection {
        display: flex !important;
    }
    .feature-categories{
        margin-bottom: 24px;
    }
}

/* End Feature Highlight Section*/

/* Block title section extra padding right*/
@media (min-width: 768px) {
    .block-text-col {
        padding-right: 5rem; /* much more space than pe-md-5 */
    }
}

/* Benefit card - single item styles*/

.benefit-card {
    border: 1px solid #040AB2;
    border-radius: 1rem;
    cursor: pointer;
}

.benefit-card:hover {
    box-shadow: 0 0 8px 0 rgba(4, 10, 178, 0.20) !important;
}

.benefit-card .benefit-title {
    font-weight: 900;
    line-height: 26px;
    font-size: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.benefit-card .benefit-icon {
    width: 40px;
    height: 40px;
    background-color: #040AB2;
    color: #fff;
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.benefit-card .benefit-icon:hover {
    background-color: #040066;
    color: #fff;
}

.benefit-card .benefit-description {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bg-silver {
    background-color: #F6F8FE !important;
}

@media (max-width: 767px) {
    .benefit-card .benefit-title {
        font-size: 20px;
        font-style: normal;
        font-weight: 900;
        line-height: 24px;
        min-height: 72px;
    }

    .benefit-card .benefit-description {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        -webkit-line-clamp: 2;
    }
}

/* End benefit card  - single item styles*/