/*----------------------------------------------------------------------------*/
/*#region Header */
/*----------------------------------------------------------------------------*/

.logo {
    width: 180px;
    height: auto;
}

.material-icons.header {
    font-size: 100px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    vertical-align: middle;
    width: auto;
}

.fade-in-out {
    animation: fadeInOut 3s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}


/*----------------------------------------------------------------------------*/
/*#endregion Header */
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Campaign Img*/
/*----------------------------------------------------------------------------*/

.header-point {
    width: fit-content;
    gap: 16px;
    color: var(--text-color-tertiary-50);
    margin-bottom: 60px;
}

.header-point>div {
    display: inline-flex;
    align-items: start;
    gap: 8px;
}

.text-reveal-effect {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
    min-width: 260px;
    /* width: max-content; */
    /* text-align: start; */
}

.header-container {
    border-radius: 0 0 0 17vw;
    margin-top: 90px;
}

.container-bg {
    background: var(--bg-body-secondary);
    z-index: -1;

}

.header-h1 {
    max-width: 900px;
}

.campaign-container {
    background: var(--bg-body-secondary);
    height: 600px;
}

.campaign-img {
    top: -18%;
}

.campaign-img img {
    width: 100%;
    display: block;
    margin: auto;
}

/*----------------------------------------------------------------------------*/
/*#endregion Campaign Img*/
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Where*/
/*----------------------------------------------------------------------------*/

.point-block {
    padding: 24px;
    border-radius: var(--border-radius-16);
    box-shadow: var(--box-shadow-card);
    background: var(--white-color);
    /* height: 100%; */
}

.point-block.active {
    background: var(--secondary-color-14);
    border-top: 8px solid var(--secondary-color) !important
}

.point-block.disabled {
    background: var(--white-color);
    border-top: none;
}

.point-block img {
    width: 40px;
}

.point-block-body {
    margin-top: -16px;
    display: grid;
    gap: 8px;
}

.heading-effect {
    position: relative;
    width: fit-content;
    margin: auto;
}

.heading-effect h2 {
    z-index: 9;
    position: relative;
    text-align: center;
}

/* .heading-effect h2::after {
    display: block;
    content: "";
    background: var(--primary-color);
    height: 24px;
    height: max(0.45em, 0.3em);
    left: 0.05em;
    right: 0.05em;
    top: 35px;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 100px;
} */

.heading p {
    max-width: 862px;
    margin: auto;
}

.line-effect {
    position: absolute;
    top: 35px;
    background: var(--primary-color);
    height: 24px;
    /* z-index: -1; */
    border-radius: 100px;
}

.line-effect.where {
    width: 150px;
}

.line-effect.what {
    width: 120px;
}

.line-effect.why,
.line-effect.who {
    width: 105px;
}

.line-effect.how {
    width: 100px;
}

/* .heading-effect .where:after {
    width: 150px;


.heading-effect .what:after {
    width: 120px;
}

.heading-effect .why:after,
.heading-effect .who:after {
    width: 105px;
}

.heading-effect .how:after {
    width: 100px;
}
    } */

.text-color-secondary-50 {
    color: var(--text-color-secondary-50);
}

.where-container {
    border-radius: 0 17vw 0 0;
}

.input-btn {
    margin: auto 8px;
}

.notify-container .input-group {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.notify-container.active .input-group {
    max-height: 100px;
    opacity: 1;
    margin-bottom: 8px;
}

/*----------------------------------------------------------------------------*/
/*#endregion Where*/
/*----------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------*/
/*#region What*/
/*----------------------------------------------------------------------------*/

.tag-cat {
    background: var(--primary-color-14);
    width: fit-content;
    border-radius: 100px;
}

.points-features {
    display: flex;
    gap: var(--gap-8);
}

.icon {
    background: var(--secondary-color-14);
    color: var(--secondary-color);
    min-width: 36px;
    height: 36px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.points-features .tag.secondary {
    display: inline-block;
}

.tag-sub-cat {
    border-radius: 100px;
    font-weight: var(--fw-700);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: var(--gap-8);
}

.tag-sub-cat {
    color: var(--primary-color);
}

.tag-sub-cat.active {
    background: var(--secondary-color);
    color: var(--white-color);
}

.what-container {
    border-radius: 17vw 0 0 17vw;
    background: var(--bg-body-secondary);
}

.what-img img {
    display: block;
    margin: auto;
    box-shadow: var(--box-shadow-card);
    /* border: var(--border-secondary); */
    border-radius: var(--border-radius-24);
    width: 145%;
    height: -webkit-fill-available;
    object-fit: cover;
    object-position: right;
}

/*----------------------------------------------------------------------------*/
/*#endregion What*/
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Why*/
/*----------------------------------------------------------------------------*/

.point-block.why-block {
    text-align: center;
    height: 250px;
    margin: auto;
    display: flex;
}

.why-container .row .col-xxl:first-child .point-block {
    border-top: 8px solid var(--sub-color3) !important;
}

.why-container .row .col-xxl:nth-child(2) .point-block {
    border-top: 8px solid var(--sub-color5) !important;
}

.why-container .row .col-xxl:nth-child(3) .point-block {
    border-top: 8px solid var(--sub-color4) !important;
}

.why-container .row .col-xxl:nth-child(4) .point-block {
    border-top: 8px solid var(--sub-color6) !important;
}

.why-container .row .col-xxl:nth-child(5) .point-block {
    border-top: 8px solid var(--sub-color8) !important;
}

.why-block .point-block-body {
    height: fit-content;
    display: inline-block;
    margin: auto;
    text-align: center;
}

/*----------------------------------------------------------------------------*/
/*#endregion Why*/
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region How*/
/*----------------------------------------------------------------------------*/

.icon-numbered.initial {
    font-size: 18px;
    font-weight: var(--fw-500);
}

.testimonials-title {
    display: flex;
    align-items: center;
    gap: var(--gap-16);
}

.testimonials-title p:first-child {
    font-weight: var(--fw-600);
    color: var(--text-color-secondary);
}

.slick-current {
    transition: all .3s;
    background: var(--secondary-color-14) !important;
    border-top: 8px solid var(--secondary-color) !important;
}

.slick-current .icon-numbered.initial {
    font-size: 18px;
    font-weight: var(--fw-500);
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.arrow {
    width: 60px;
    height: 60px;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--primary-color-14);
    transition: background-color .3s;
    border-radius: var(--border-radius-16);
}

.arrow-prev:hover,
.arrow-next:hover {
    background: var(--secondary-color-14);
}

.how-container {
    background: var(--bg-body-secondary);
    border-radius: 0 17vw 0 0;
}

.quote-img {
    height: 86px;
    margin-bottom: 60px;
}

.point-block-body.how {
    text-align: left;
}

/*----------------------------------------------------------------------------*/
/*#endregion How*/
/*----------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------*/
/*#region Who*/
/*----------------------------------------------------------------------------*/

.icon-numbered {
    width: 40px;
    height: 40px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}

.who-block {
    margin: auto;
    border-radius: var(--border-radius-16);
    box-shadow: var(--box-shadow-card);
    background: var(--white-color);
    padding: 40px;
    border-top: 8px solid transparent;
    height: 100%;
}

.who-block-body {
    height: fit-content;
    display: inline-block;
    margin: auto;
    gap: 8px;
    display: grid;
}

.who-block-1 {
    background: var(--primary-color);

}

.who-block.who-block-1 .who-block-body h3 {
    font-weight: var(--fw-700);
    color: var(--white-color);
}

.who-block.who-block-1 .who-block-body {
    gap: var(--gap-8);
}

.who-block.who-block-1 .who-block-body p {
    color: #ffffff80;
}

.who-container {
    border-radius: 17vw 0 0 17vw;
}

.cta-link {
    font-size: var(--fs-h6);
    text-decoration: underline;
}

/*----------------------------------------------------------------------------*/
/*#endregion Who*/
/*----------------------------------------------------------------------------*/



@media (max-width: 1400px) {
    .campaign-container {
        height: 420px;
    }
}

@media (max-width: 1200px) {
    .campaign-container {
        height: 320px;
    }
}

@media screen and (min-width: 992px) {

    .slick-current {
        margin-left: -65px !important;
    }

    .slick-track {
        margin-left: 100px;
    }

    .how-block {
        width: 560px !important;
        max-width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .arrow-prev {
        transform: rotate(-90deg);
    }

    .arrow-next {
        transform: rotate(-90deg);
    }

    .heading-effect h2 {
        text-align: left !important;
    }

    .testimonials-slider .slick-list {
        overflow: visible;
    }

    .how-block {
        width: auto;
        max-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .campaign-container {
        height: 60vw;
    }
}