.popular-outcome {
    border: 1px solid lightgray;
}

.popular-outcome:hover {
    background-color: #FFD14580;
}

.popular-outcome.filter-on {
    background-color: #FFD145;
}

.video-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.video-shadow {
    aspect-ratio: 16 / 9;
    box-shadow: 1em 1em 0 0 #50CDC9;
    border-radius: .5rem;
    overflow: hidden;
}

.video-16-9 {
    aspect-ratio: 16 / 9;
    border-radius: .5rem;
    overflow: hidden;
}

.exp-image-sq {
    width: 100%;
    aspect-ratio: 1;
    border-radius: .5rem !important;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in-out;
}

.exp-image-sq .bg-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.exp-image-sq:hover .bg-image,
.exp-image-sq:focus .bg-image {
    cursor: pointer;
    -ms-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.card-exp {
    border: none !important;
    padding: 0;
    margin: 0;
    background: transparent;

    & a:hover {
        color: #50CDC9;
        background: transparent;
        text-decoration: none;
    }

    & a:focus {
        background: transparent;
        text-decoration: none;
    }

    & .card-label {
        font-size: 1.5em;
        font-weight: bold;
        text-align: center;
        color: #0B2639;
        background-color: #FFD145;
        border: 0.5px solid black;
        border-radius: 0.5rem;
        padding: 5px 0;
    }
    
    & .card-body {
        color: #000;
        padding: 0.5rem 0;
    }

    & .card-title {
        width: 100% !important;
        height: 46px;
        font-size: 1.25em;
        font-weight: 700;

        & a {
            font-size: 1em;
            color: #000;
            text-decoration: none;
            text-decoration-color: #fff;
        }

        & a:hover {
            color: #000;
            text-decoration-line: underline;
            text-decoration-color: #F46224;
            text-decoration-thickness: 3px;
        }
    }

    & .card-title-short {
        height: 26px !important;
        font-size: 20px;
        overflow: hidden;
        margin-bottom: 0;
    }

    & .card-sub-title {
        width: 100% !important;
        height: 46px;
        font-size: 14px;
        font-weight: 500;
    }

    & .card-text {
        bottom: 15px;
        position: absolute;
        width: 100%;
        min-height: 52px;
        font-size: 14px;
    }

    & .exp-title {
        font-size: 1em;
        font-weight: 700;
        height: 50px;
        line-height: 25px;
        overflow: hidden;
    }

    & .exp-labels {
        display: inline;
    }

    & .recommendation {
        h5 {font-size: 1em; font-weight: bold; font-family: "DM Sans"; margin: 1em 0;}
        p {padding: 0; margin: 0;}
    }
    
    & label.exp-label {
        padding: 5px 8px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        color: black;
        background-color: #FFD145;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25em;
    }
    
    & .stamp-label-outer {
        position: absolute;
        top: 10px;
        right: 10px;
        border-radius: 50px;
        border: 0.5px solid black;
        overflow: hidden;
    }

    & .stamp-label {
        background: #FFB404;
        color: #FFF;
        font-size: 12px;
        text-align: center;
        padding: 0 15px;
        height: 30px;
        line-height: 30px;
    }

    & .stamp-outer {
        position: absolute;
        top: 10px;
        right: 10px;
        height: 38px;
        border-radius: 20em;
        overflow: hidden;
    }

    & .stamp {
        background: #FFB404;
        color: #FFF;
        font-size: 14.8px;
        text-align: center;
        width: 100%;
        height: 36px;
        line-height: 34px;
        border: 1px solid black;
        border-radius: 20em;
        padding: 0 20px;
    }

    & .stamp-outer-rotate {
        overflow: hidden;
        width: 280px;
        height: 280px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    & .stamp-rotate {
        margin: 180px 0 0 40px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background: #FFB404;
        color: #FFF;
        font-size: 16px;
        text-align: center;
        line-height: 36px;
        height: 36px;
        width: 320px;
    }

    & .stamp-outer-h {
        overflow: hidden;
        width: 100%;
        height: 80px;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    & .stamp-h {
        background: #FFB404;
        color: #FFF;
        font-size: 16px;
        text-align: right;
        width: 80% !important;
        padding-right: 10px;
        line-height: 50px;
        float: right;
        height: 50px;
        width: 320px;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 50%);
    }

    & .exp-holiday-cover {
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    & .exp-holiday-cover-img {
        width: 100%;
        height: 100%;
    }

    & .exp-holiday-cover-img:hover {
        background-image: url('/wp-content/themes/teamraderie2023-child/img/holiday-overlay.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        animation: holiday_animation 1.5s ease-out;
    }

    & .holiday-banner {
        position: absolute;
        right: -120px;
        top: 20px;
        padding: 1px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #F10109;
        color: #FFF;
        font-size: 16px;
        text-align: center;
        line-height: 36px;
        height: 40px;
        width: 320px;
        font-weight: bold;
    }
}

.experiences-slider {
    & .slick-prev,
    & .slick-next {
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: block;
        width: 40px;
        height: 40px;
        margin-top: -60px;
        padding: 0;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: 0;
        background: transparent;
        z-index: 100;
    }

    & .slick-prev:before,
    & .slick-next:before {
        font-family: 'slick';
        font-size: 40px;
        line-height: 40px;
        opacity: .70;
        color: #50CDC9;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    & .slick-prev:before {
        content: "←"
    }

    & .slick-next:before {
        content: "→"
    }

    & [dir='rtl'] .slick-prev:before {
        content: '→';
    }

    & [dir='rtl'] .slick-next:before {
        content: '←';
    }

    & .slick-prev.slick-disabled:before,
    & .slick-next.slick-disabled:before {
        opacity: .25;
    }

    & .slick-prev {
        margin-left: 10px;
    }

    & .slick-next {
        margin-right: 10px;
    }

    & .slick-track {
        margin-left: 0;
    }

    & a.slick-arrow {
        text-decoration: none;
    }

    & a.slick-arrow:hover {
        text-decoration: none;
    }
}

.sign_box_container {
    height: calc(100vh - 118px);
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & .sign_box {
        width: 600px;
    }

    & .signin-form {
        width: 100%;
        padding: 20px 60px;
    }

    & .box-lg-radius {
        border: 1px solid lightgray; 
        border-radius: 20px;
        box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.4);    
    }

    & .signin-head-text {
        text-align: center; 
        font-weight: 600;
        line-height: 1.5;
        text-transform: uppercase;
    }

    & .input-yellow-lg, .input-yellow-lg:focus, .input-yellow-lg:-webkit-autofill:active {
        border: 1.5px solid rgb(255, 209, 69);
        border-radius: 8px;
        background-color: #fffcf1;
        display: block;
        height: 50px;
        width: 100%;
        box-sizing: border-box;
        font-size: 1.0rem;
    }

    & .input-yellow-lg:focus {
        outline: none;
        box-shadow: 0 0 0 .1rem rgb(255, 209, 69);
    }

    & .input-yellow-lg::placeholder {
        color: black;
    }

    & .fa-checkbox + label .checkbox-icon::before{
        font-size: 20px;
        font-family: "Font Awesome 6 Pro";
        font-weight: 400;
        content: "\f111";
        cursor: pointer;
    }

    & .fa-checkbox:checked + label .checkbox-icon::before{
        font-weight: 900;
        content: "\f058";
    }

}

.survey-page {
    /* background-color: rgb(253, 248, 236); */
    width: 100%;
    height: 100%;

    & h1 {
        font-family: inherit;
        font-size: 1.75em;
    }

    & h2 {
        font-family: inherit;
        font-size: 1.5em;
    }

    & h3 {
        font-family: inherit;
        font-size: 1.25em;
    }

    & .btn-survey-yellow {
        background-color: #ffd145;
        border-color: #ffd145;
        color: #0a2639;
        width: 180px;
        font-weight: bold;
        padding: 10px 0;
    }

    & .btn-survey-yellow:hover {
        background-color: #ffd14580;
        text-decoration: none;
    }

    & .survey-page-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 840px;
        min-height: 100%;
    }

    & .survey-form-title {
        width: 100%;
        margin: 20px 0;
        padding: 15px 20px;
    }

    & .survey-form-title:hover {
        border: 1px dotted siver;
        background-color: #efefef;
        cursor: pointer;
    }

    & .survey-form-fields-container {
        position: relative;
        width: 100%;
        overflow: hidden;

        & .survey-form-fields {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        & .survey-form-field {
            display:inline-block;
            width: 100%;
            margin: 0;
            padding: 25px 0;
            border-radius: 5px;

            & input[type=checkbox].myform-field {
                height: 1.5rem;
                aspect-ratio: 1;
                vertical-align: middle;
                accent-color: #af8300;
            }

            & input[type=radio].myform-field {
                height: 1.5rem;
                aspect-ratio: 1;
                vertical-align: middle;
                accent-color: #af8300;
            }
            
            &.statement {
                padding-bottom: 0;
            }

            & h3 {margin: 0;}
            & ul {
                list-style-type: none;
                padding: 0;
                margin: 0;
            }

            & li.col {}
            & li.row {display: inline;}

            & ul.scale {
                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: space-between;

                & li.scale {
                    /*min-width: 60px;*/
                    margin: 10px 0;

                    & input[type="radio"] {
                        display: none;
                        opacity: 0.01;
                    }

                    & input[type="radio"]:checked+label.button, Checked+label.button {
                        color: black;
                        background-color: rgb(251, 206, 55);
                        opacity: 0.5;
                        box-shadow: rgb(251, 206, 55) 0px 0px 0px 2px inset;
                    }

                    & label.button {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 60px;
                        margin: 0;
                        padding: 0;
                        /*border: 1px solid silver;*/
                        /*background-color: #91cbe8;*/
                        color: rgb(175, 130, 0);
                        background-color: rgba(251, 206, 55);
                        box-shadow: rgba(255, 209, 69, 1) 0px 0px 0px 1px inset;
                        border-radius: 5px;
                        font-size: 1.25em;
                        font-weight: bold;
                        opacity: 1;
                        transition: opacity 0.5s ease;
                    }

                    & label.button:hover {
                        /*background: #e2f2f1;*/
                        /*background-color: rgba(251, 206, 55) !important;*/
                        opacity: 0.7;
                        cursor: pointer;
                    }

                    & label.legend {
                        /*word-spacing: 100vw;*/
                        word-break: break-word;
                        color: #0B2639;
                        width: 100%;
                        text-align:center;
                        font-size:0.8em;
                        margin-top:8px;
                    }
                }

                & li.scale:first-child {
                    margin-left: 0px;
                }

                & li.scale:last-child {
                    margin-right: 0px;
                }
            }
            & .scale-measure {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top:0.25em;

                & .measure-bar {
                    position: relative;
                    height: 6px;

                    & .line {
                        position: absolute;
                        top:0;
                        right: 16px;
                        bottom: 0;
                        left: 0;
                        background: linear-gradient(to right, #FCFEF1, #FFD145);
                        border: none;
                    }

                    & .arrow {
                        position: absolute;
                        top: -7.5px;
                        right: 0;
                        width: 16px;
                        height: 20px;
                        border-top: 10px solid transparent;
                        border-bottom: 10px solid transparent;
                        border-left: 16px solid #FFD145;
                    }

                    & .measure {
                        position: absolute;
                        top: -3px;
                        width: 12px;
                        height: 12px;
                        border: 1px solid white;
                        background: #FFD145;
                        border-radius: 50%;
                    }

                    & .measure-text {
                        position: absolute;
                        top: 1em;
                        font-size: 0.75em;
                        overflow: visible;
                        text-wrap: nowrap;
                    }
                }
                & label.legend {
                    /*word-spacing: 100vw;*/
                    word-break: break-word;
                    color: #0B2639;
                    width: 100%;
                    text-align:center;
                    font-size:0.8em;
                }
            }

            & ul.yesno {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                justify-content: center;

                & li.yesno {
                    min-width: 120px;
                    margin: 10px 3px;

                    & input[type="radio"] {
                        display: none;
                        opacity: 0.01;
                    }

                    & input[type="radio"]:checked+label.button, Checked+label {
                        /*background: yellow;*/
                        color: black;
                        background-color: rgb(251, 206, 55);
                        box-shadow: rgb(251, 206, 55) 0px 0px 0px 2px inset;
                    }

                    & label.button {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 60px;
                        margin: 0;
                        padding: 0;
                        /*border: 1px solid silver;*/
                        /*background-color: #91cbe8;*/
                        color: rgb(175, 130, 0);
                        background-color: rgba(251, 206, 55, 0.1);
                        box-shadow: rgba(251, 206, 55, 0.6) 0px 0px 0px 1px inset;
                        border-radius: 5px;
                        font-size: 1.25em;
                        font-weight: bold;
                        opacity: 1;
                        transition: opacity 0.5s ease;

                    }

                    & label.button:hover {
                        /*background: #e2f2f1;*/
                        /*background-color: rgba(251, 206, 55, 0.3);*/
                        opacity: 0.7;
                        cursor: pointer;
                    }

                    & label.legend {
                        /*word-spacing: 100vw;*/
                        word-break: break-word;
                        color: #0B2639;
                        width: 100%;
                        text-align:center;
                        font-size:0.8em;
                        margin-top:8px;
                    }
                }
            }

            & .field-err-msg {
                visibility: hidden;
                color: rgb(175, 4, 4);
                background-color: rgb(247, 230, 230);
                border-radius: 5px;
                padding: 5px 10px;
                margin: 10px 0 0 0;
            }
        }
    }

    & .progress {
        & .bg-miss {
            background-color: #f0f0f0;
        }

        & .bg-completed {
            background-color: #ffd145;
        }
    }
}

.page-experience {
    padding: 0;
    font-family: "DM Sans";

    h1, h2, h3, h4 {font-family: Poppins;}
    h1 {font-size: 2.5em; font-weight: 600;}
    h2 {font-size: 1.5em; font-weight: 600;}
    h3 {font-size: 1.25em; font-weight: 600;}
    h4 {font-size: 1.15em; font-weight: 600;}

    & .exp-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        & .header-text {
            display: flex;
            flex-direction: row;
            align-items: center;

            & .exp-title {
                
            }

            & .exp-outcomes {
                margint-left: 10px;

                & label.outcome {
                    font-size: 0.75em;
                    border: 1px solid lightgray;
                    padding: 5px 10px;
                    border-radius: 20em;
                }
            }
        }

        & .customer-use-case {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
        }
    }
    
    & .cta-icons {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;

        & .cta-icon {            
            font-size: 0.75em;
            border: none;
            background: transparent;
            text-decoration: none;
            display: inline-block;
            white-space: nowrap;
        }
    }

    & .col-l {
        width: 61.8%;
        flex: 0 0 auto;
    }

    & .col-r {
        width: 38.2%;
        flex: 0 0 auto;
    }

    & .bk-navy {
        margin-top: 0;
        color:white;
        background-image:linear-gradient(to bottom right, #023B5E, #041C2B);
    }

    & .slick-track {
        display: block;
    }

    & .slide-button {
        font-size: 1.75em;
    }

    & .slide-button.slick-disabled {
        color: lightgray !important;
    }

    & .exp-text,
    & .exp-text-2 {
        white-space: pre-line;
    }

    & .host-portrait {
        width: 120px;
        height: auto;
        border-radius: 10px;
    }

    & .host-img {
        width: 240px;
        aspect-ratio:1;
        border-radius: 10px;
    }

    & .section-title {
        font-family: Poppins;
        font-size: 2.25em;
        font-weight: 300;
        display: flex;
        flex-direction: row;
        align-items: center;

        & img {
            height: 32px;
        }
        
        & b {
            font-weight: 600;
        }
    }

    & .section-title-lg {
        font-family: Poppins;
        font-size: 3em;
        font-weight: 300;
        display: flex;
        flex-direction: column;
        align-items: center;

        & img.img-rotate-90 {
            width: auto;
            height: 32px;
        }
        
        & b {
            font-weight: 600;
        }
    }
    
    & .kit-list {
        padding-left: 0px;

        & ul {
            margin-block: 0px;

            & li {
                margin: 5px 0;
            }
            
            & li:first-child {
                margin-top: 0;
            }
        }
    }

    & .slick-track {
        display: block;
    }

    & hr.exp-divider {
        border: none;
        height: 2px;
        background-color: #c9c5b5;
    }

    & .review-card {
        background-color: white;
        border: 1px solid black;
        box-shadow: 0 0 5px 5px rgb(0, 0, 0, 0.10);
        border-radius: 20px;
        height: 100%;
        max-width: 550px;
        width: 100%;

        & .review-text {
            font-style: italic;
            /* display: -webkit-box; */
            /* -webkit-line-clamp: 8; */
            /* -webkit-box-orient: vertical; */
            overflow: hidden;
            text-overflow: ellipsis;
            height: 220px;
            max-height: 220px;
            overflow-wrap: break-word;
        }
    }

    & .ctn-gallery {
        position: relative;
        height: 320px;
        overflow: visible;
        z-index: 101;
    }

    &.idea-centric {
        .slick-dots {
            bottom: -45px;
        }

        .slick-dots li {
            display: inline-block;
            width: 20px;
            height: 20px;
        }

        .slick-dots li:only-child {
            display: none;
        }

        .slick-dots li button {
            font-size: 0;
        }

        .slick-dots li button::before {
            font-family: "Font Awesome 6 Pro";
            content: "\f111";
            font-size: 10px;
            line-height: 20px;
            opacity: 0.5;
            color: #fff;
        }

        .slick-dots li.slick-active button:before {
            font-family: "Font Awesome 6 Pro";
            font-size: 12px;
            font-weight: 600;
            content: "\f111";
            opacity: 1;
            color: #fff;
        }

        & .exp-hosts {
            position: relative;
            border: 1px solid #1A5985;
            border-radius: 20px;

            .slider-exp-hosts {
            }

            .card-host {
                display: flex;
                flex-direction: row;
                align-items: start;
            }
        }

        & .host-brief-text {
            height: 64px;
            overflow: hidden;
            font-size: 0.85em;
        }
    }

    &.kit-based {
        .slick-dots {
            bottom: -45px;
        }

        .slick-dots li {
            display: inline-block;
            width: 20px;
            height: 20px;
        }

        .slick-dots li:only-child {
            display: none;
        }

        .slick-dots li button {
            font-size: 0;
        }

        .slick-dots li button::before {
            font-family: "Font Awesome 6 Pro";
            content: "\f111";
            font-size: 10px;
            line-height: 20px;
            opacity: 0.5;
            color: #000;
        }

        .slick-dots li.slick-active button:before {
            font-family: "Font Awesome 6 Pro";
            content: "\f111";
            font-size: 12px;
            font-weight: 600;
            opacity: 1;
            color: #000;
        }

        & .host-tips {
            font-size: 1em;
            & i {
                font-size: 1.75em;
            }
        }
        
        & .exp-hosts {
            position: relative;
            border: 1.5px solid #134669;
            border-radius: 20px;
            overflow: hidden;

            & .card-host {
                color: white;
                padding: 20px;
                display: flex;
                flex-direction: row;
                align-items: start;
            }

            & .slider-exp-hosts {
                width: calc(100% - 280px);

                & .slick-list {
                    overflow: visible;
                }

                & .slick-track {
                    & img {
                        width: 240px;
                        aspect-ratio:1;
                        border-radius: 10px;
                    }
                }
            }

            & .exp-hosts-next {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 280px;
                background-image: linear-gradient(to right, transparent, #041C2B);
            }
        }
    }

    & .exp-gallery {
        width: 772px;
        height: 443px;
        border-radius: 20px;
        padding: 10px;
        border: 1px solid black;
        background-color: #FFFCF1;

        & .slider-exp-images {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            --overflow: hidden;
        }

        & .exp-image {
            height: 423px;
            aspect-ratio:16/9;
            border-radius: 20px;
            background-position: 50% 50%;
        }

        & .video-container {
            border-radius: 20px;
            background: #FFFCF1;

            & .iframe-video {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100%;
                padding-top: 56.25%;
                border-radius: 20px;
                /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
            }

            & iframe {
                width: 100%;
                height: 100%;
                aspect-ratio: 16 / 9;
            }

            & .responsive-iframe {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                width: 100%;
                height: 100%;
            }
        }
    }

    & .custom-section-img-container {
        border-radius: 20px;
        padding: 10px;
        border: 1px solid black;
        background-color: #FFFCF1;
        & img {
            border-radius: 20px;
            width: 100%;
        }
    }

    & .price-box-ic {
        margin-top: -470px;
        z-index: 900;
    }

    & .price-box-kit {
        margin-top: -150px;
        z-index: 900;
    }

    & .price-box-mbl {
        margin-top: -380px;
        max-width: 420px;
        z-index: 900;
    }
    
    & .card-cta {
        --background-color: #0B2639;
        position: -webkit-sticky;
        position: sticky;
        top: 112px;

        & input[type=number],
        & select {
            width: 100%;
            border: 2px solid #ffd145;
            border-radius: 10px;
            padding: 0.25em 0.5em;
        }

        & .top {
            color: white;
            background-image: linear-gradient(to bottom, #023B5E, #041C2B);
            border-top: 1px solid #50cdc9;
            border-left: 1px solid #50cdc9;
            border-right: 1px solid #50cdc9;
            border-bottom: none;
            border-radius: 20px 20px 20px 20px;
            padding: 32px;
            z-index: 99;
        }
        
        & .bottom {
            color: black;
            background-color: white;            
            border-top: none;
            border-left: 1px solid #0B2639;
            border-right: 1px solid #0B2639;
            border-bottom: 1px solid #0B2639;
            border-radius: 0 0 20px 20px;
            margin-top: -20px;
            padding: 40px 15px 15px 15px;
        }

        & .cta-price {
            border: 0.5px solid #50cdc9;
            text-align: center;
            font-weight: 400;
            border-radius: 20em;
            padding: 10px 20px;

            & .price {
                color: #ffd145;
                font-size: 1.5em;
                font-weight: 500;
            }

            & .shipping {
                font-size: .75em;
            }
        }
    }

    & svg.svg-top {
        width: 120%;
        height: 120px;
        transform: translateX(-5%);
    }

    & svg.svg-bottom {
        width: 120%;
        height: 120px;
        transform: translateX(-5%);
    }

    & .about-text {
        min-height: 220px;
        margin-top: 60px;
    }

    & .card-outcome {
        color: black;
        background-color: white;
        border-radius: 10px;
        height: 350px;

        & .card-text {
            font-size: 0.85em;
        }
    }

    & .outcome-title {
        height: 2em;
    }

    & .exp-kit-image {
        width: 150px;
        border-radius: 8px;
        cursor: pointer;
    }

    & .img-rotate-90 {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    & .exp-card {
        border: none;
        padding: 0;
        margin: 0;
        background: transparent;

        & .exp-image-outer {
            width: 100%;
            aspect-ratio: 1;
            border: 1px solid transparent;
            border-radius: 10px;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;

            & .exp-image {
                height: 100%;
                width: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
                border-radius: 10px;
            }
        }

        & .exp-image-outer:hover {
            border: 1px solid #ffd145;

            & .exp-image {
                cursor: pointer;
                -ms-transform: scale(0.95);
                -moz-transform: scale(0.95);
                -webkit-transform: scale(0.95);
                -o-transform: scale(0.95);
                transform: scale(0.95);
            }
        }

        & .exp-title {
            --font-family: Poppins;
            font-size: 20px;
            font-weight: 600;
            line-height: 25px;
            width: 100%;
            padding: 5px 0;
            white-space: nowrap;
            overflow: hidden;

            & a {
                color: #000;
                text-decoration: none;
                text-decoration-color: #fff;
            }

            /*
            & a:hover {
                color: #000;
                text-decoration-line: underline;
                text-decoration-color: #F46224;
                text-decoration-thickness: 3px;
            }*/
        }

        & .exp-brief-text {
            width: 100% !important;
            height: 46px;
            font-size: 14px;
            font-weight: 500;
        }

        & .exp-duration {
            width: 100%;
            margin-top: 5px;
            font-size: 14px;
        }
    }
}

.experience-finder-page {
    & .title {
        font-family: 'Poppins', Sans-serif;
        font-size:4.5em;
        line-height: 1.25em;
        padding: 0.5em 0.5em;
    }

    & .efp-text {
        font-size: 2em;
        font-weight:200;
    } 

    & .btn-exp-filter-holder {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;

        & .btn-exp-filter {
            height: 36px;
            width: 36px;
            background: transparent;
            border: 1px solid black;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .btn-exp-filter:hover {
            height: 38px;
            width: 38px;
            background: #FFD14580;
        }
    }
    
    #cnt-experience-list .card {
        border: none;
        box-shadow: none;
        overflow: hidden;
        /*min-height: 490px;*/
    }

    & input.filter-category,
    & input.filter-host-group {
        height: 1.5rem;
        aspect-ratio: 1;
        vertical-align: middle;
        accent-color: #0B2639; /* #2563eb */
    }

    & .experience-item-parent {
        /*min-height: 490px;*/
        position: relative;
    }

    & .experience-item-parent .card {
        background: #EEFAFA;
        margin: 8px 0;
        border-radius: 8px;
    }

    & .filter-outcome {
        border: 0;
        background-color: transparent;
        font-size: 1.25em;
        font-weight: 700;
        border-bottom: 3px solid transparent !important;
    }

    & .filter-outcome.active { 
        /* color: #FFD145; */
        border-bottom: 3px solid #FFD145 !important;
    }

    & .filter-outcome:hover {
        cursor: pointer;
    }

    & .filter-outcome-sub {
        border: 1px solid lightgray;
    }

    & .filter-outcome-sub:hover {
        background-color: #0b2639;
        color: #fff;
    }

    & .filter-outcome-sub.filter-on {
        background-color: #0b2639;
        color: #fff;
    }

    & .sort-by {
        position: relative;

        & .btn-sort-by {
            border: 0;
            background-color: transparent;
            font-size: 1.25em;
            font-weight: 700;
            border-bottom: 3px solid transparent !important;
        }

        & .btn-sort-by::after {
            margin-left: 0.25em;
            display: inline-block;
            width: 20px;
            font-family: 'FontAwesome';
            content: '\f0da';
            font-size: 0.85em;
            font-weight: normal;
            /*color: #50cdc9;*/
        }

        & .btn-sort-by:hover::after {
            margin-left: 0.25em;
            display: inline-block;
            width: 20px;
            font-family: 'FontAwesome';
            content: '\f0d7';
            font-size: 0.85em;
            font-weight: normal;
            /*color: #FFD145;*/
        }

        & .menu-sort-by {
            display: none;
        }
    }

    & .sort-by:hover {
        & .menu-sort-by {
            position: absolute;
            top: 60px;
            display: flex;
            flex-direction: column;
            width: 200px;
            padding: 10px;
            margin-left: 20px;
            border: 1px solid gray;
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, .075);
            border-radius: 1em;
            background-color: #FFFCF1;
            z-index: 99;

            & .menu-item {
                margin: 10px;
                white-space: nowrap;
                text-decoration: none;

                &.current {
                    font-weight: bold;
                }
            }
        }
    }
}

.page-dashboard {
    background-color: #0B2639;
    font-family: "DM Sans";
    padding: 32px;

    h1, h2, h3, h4, h5 {font-family: Poppins;}
    h1 {font-size: 2em; font-weight: 600;}
    h2 {font-size: 1.5em; font-weight: 600;}
    h3 {font-size: 1.25em; font-weight: 600;}
    h4 {font-size: 1.25em; font-weight: 400;}
    h5 {font-size: 1.15em; font-weight: 300;}

    & .border-1p-teal {
        border: 1px solid #50cdc9;
    }

    & .border-2p-yellow {
        border: 2px solid #ffd145;
    }

    & .f-title {
        font-family: Poppins;
        font-weight: 300;
    }

    & .btn {
        font-family: Poppins;
    }

    & .btn-edit {
        border: 1px solid lightgray;
        font-size: .8em;
    }

    & .btn-delete-file {
    }

    & .btn-delete-file:hover {
        color: #F46224;
    }

    & .btn-team-member {
        background: #efefef;
        font-size: .85em;
    }

    & .btn-edit-manager,
    & .btn-edit-team,
    & .btn-delete-manager,
    & .btn-delete-team,
    & .btn-delete-team-member,
    & .btn-pre-survey-send,
    & .btn-post-survey-send {
        border: 1px solid lightgray;
        padding: 0;
        width: 30px;
        height: 30px;
    }

    & .btn-edit-manager:hover,
    & .btn-edit-team:hover,
    & .btn-pre-survey-send:hover,
    & .btn-post-survey-send:hover {
        color: #50cdc9;
        border: 1px solid #50cdc9;
    }

    & .btn-delete-manager:hover,
    & .btn-delete-team:hover,
    & .btn-delete-team-member:hover {
        color: #F46224;
        border: 1px solid #F46224;
    }

    & nav {
        position: fixed;
        left: 0;
        top: 91px;
        /*bottom: 60px;*/
        margin-bottom: 60px;
        width: 240px;
        padding: 30px 20px;
        color: white;

        & ul {
            -webkit-padding-start: 0;
            -webkit-margin-before: 0;
            -webkit-margin-after: 0;
            padding-left: 0;
            list-style-type: none;
        }

        & li {
            margin: 10px 0;
            padding: 5px 0;
        }

        & li:first-child {
            margin-top: 0;
        }

        & a {
            text-decoration: none;
            color: white;
        }

        & a.active {
            color: #50cdc9;
        }

        & a.mailto {
            text-decoration: none;
            color: #50cdc9;
            font-size: 0.8em;
        }
    }

    & main {
        background: #FFFCEE;
        margin-left: 208px;
        padding: 20px;
        min-height: calc(100vh - 123px);
        border-radius: 20px;
        font-size: 18px;
        font-weight: 400;

        & .section-head {
            font-size: 1.5em;
        }
        
        & .section-text {
            font-size: 1em;
        }

        & a {
            text-decoration: none;
        }

        & a.sample {
            color: #50cdc9;
            font-size: 0.85em;
        }

        & a.back {
            color: black;
            font-size: 1em;
            font-weight: 400;
        }

        & input[type=checkbox] {
            height: 1.5rem;
            -webkit-appearance: none;
            appearance: none;
            aspect-ratio: 1;
            vertical-align: middle;
            accent-color: #ffd145;
            /*accent-color: #af8300;*/
            border: 1.5px solid #ffd145;
            border-radius: 5px;
        }

        & input[type=checkbox]:checked {
            appearance: auto;
            background-color: #ffd145;
            border: 1.5px solid black;
        }

        & input[type=checkbox].core-value {
            height: 1.5em;
        }

        & input[type=text],
        & input[type=date],
        & select {
            width: 100%;
            border: 2px solid #ffd145;
            border-radius: 10px;
            padding: 0.5em;
        }

        & textarea {
            width: 100%;
            border: 2px solid #ffd145;
            border-radius: 10px;
            padding: 0.5em;
        }

        & input[type=text].url {
            width: 100%;
            border: 2px solid #ffd145;
            border-radius: 10px;
            padding: 1em 1em 1em 4em; 
        }

        & .v-seperator {
            height: 100%;
            width: 1px;
            border: none;
            background: lightgray;
        }

        & .video-container {
            position: relative;
            /* padding: 5px; */
            background: #ffd145;
            border-radius: 10px;
            overflow: hidden;
        }

        & .manager-card {
            background: white;
            border: 1px solid lightgray;
            border-radius: 10px;
            padding: 15px;

            & .label {
                background-color: #50cdc9;
                border: none;
                border-radius: 20em;
                font-size: 0.75em;
                padding: 0 10px;
            }
        }

        & .manager-card:hover {
            border: 1px solid darkgray;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
            cursor: pointer;
        }
        
        & .manager-card.new {
            background: white;
            border: 1px dashed lightgray;
            min-height: 100px;
        }

        & .manager-card.new:hover {
            cursor: pointer;
        }

        & .manager-card.selected {
            background-color: #FFFCEE;
            border: 1px solid #ffd145;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
        }

        & .panel-team-members-holder {
            position: relative;
        }
        & .panel-team-members {
            background: white;
            border: 1px solid #ffd145;
            border-radius: 10px;
            padding: 30px 40px;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
        }
        & .btn-team-members {
            border: 1px solid lightgray;
            font-size: .85em;
        }

        & .error-msg {
            display: none;
            font-size: .8em;
            font-weight: 600;
            color: red;
            background: transparent;
            border: none;
            border-radius: 10px;
        }

        & .arrow-up {
            position: absolute;
            top: -15px;
            left: 0;
            width: 0; 
            height: 0; 
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;

            border-bottom: 15px solid #ffd145;
        }

        & .team-card {
            background: white;
            border: 1px solid lightgray;
            border-radius: 10px;
            padding: 15px;

            & .stats {
                font-size: 0.9em;
                margin: 1em 0;
            }
            
            & .label {
                background-color: #ffd145;
                border: none;
                border-radius: 20em;
                font-size: 0.85em;
                padding: 0.25em 1em;
            }
        }

        & .team-card:hover {
            border: 1px solid darkgray;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
            cursor: pointer;
        }
        
        & .team-card.new {
            border: 1px dashed lightgray;
            min-height: 200px;
        }

        & .team-card.new:hover{
            cursor: pointer;
        }

        & .team-card.selected {
            background-color: #FFFCEE;
            border: 1px solid #ffd145;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
        }

        & .experience-card {
            background: white;
            border: 1px solid lightgray;
            border-radius: 10px;
            padding: 15px;
            font-size: 0.85em;
            min-height: 220px;

            & .featured-image {
                width: 108px;
                height: 108px;
                aspect-ratio: 1;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                border-radius: 10px;
            }
        }
        & .experience-card.upcoming {
            min-height: 330px
        }

        & .experience-card.not-booked {
            border: 1px dashed darkgray !important;
            background-color: #FBFBFB;
        }

        & .team-progress-outer {
            width: 55px;
            height: 55px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: conic-gradient(#50cdc9 10%, #F0F0F0 10% 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .team-progress-inner {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: white;
            font-size: .85em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & label.manager,
        & label.team{
            background-color: #ffd145;
        }

        & label.experience {
            background-color: #FFFCEE;
            border: 1px solid #ffd145;
        }
        & label.exp-all-set {
            color: #52b646;
            background-color: #52b64620;
            font-size: 0.85em;
        }
        & label.exp-on-hold {
            color: #f46224;
            background-color: #f4622420;
            font-size: 0.85em;
        }
        & label.numeric {
            width: 60px;
            text-align: center;
        }
        & label.exp-upcoming {
            color: #50cdc9;
            background-color: #50cdc920;
            font-size: 0.85em;
        }
        & label.exp-completed {
            color: #52b646;
            background-color: #52b64620;
            font-size: 0.85em;
        }
        & label.exp-completed-date {
            color: black;
            background-color: #F0F0F0;
            font-size: 0.85em;
        }
        & label.function-area {
            font-size: .85em;
            background-color: #F0F0F0;
            border: 1px solid #F0F0F0;
            border-radius: 5px;
        }
        & label.bk-light-gray {
            color: black;
            background-color: #F0F0F0;
            font-size: 0.85em;
        }
        & label.hpc-program {
            color: white;
            background-color: black;
            font-size: 0.85em;
        }

        & .icon-center {
            diplay: flex;
            align-items: center;
        }
        & .slide-button {
            font-size: 1.5em;
        }
        & .slide-button.slick-disabled {
            color: lightgray;
        }

        & .panel {
            background: white;
            border: 1px solid lightgray;
            border-radius: 20px;
        }
        & .btn-overview-switch {
            font-weight: 600;
            color: black;
            background-color: #f0f0f0;
        }
        & .btn-overview-switch:hover {
            color:black;
            background-color: darkgray;
        }
        & .btn-overview-switch.selected {
            color: white;
            background-color: black;
        }
        & .team-member {
            background-color: white;
            border: 1px solid lightgray;
            border-radius: 10px;
        }
        & .team-member.completed {
            border: 1px solid #52b646;
        }

        & .summary-card {
            background-color: white;
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 210px;
            border: 1px solid lightgray;
            border-radius: 10px;
            padding: 12px;

            & .img-status-completed {
                position: relative;
                width: 60px;
                height: 60px;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: #EDF8EC;
                & .icon {
                    font-size: 28px;
                }
                & .icon-status {
                    color:#52B646;
                    position: absolute;
                    font-size: 16px;
                    top: 2px;
                    right: 2px;
                }
            }
            & .img-status-upcoming {
                position: relative;
                width: 60px;
                height: 60px;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: #EEF9F9;
                & .icon {
                    font-size: 28px;
                }
                & .icon-status {
                    color:#5DC3C3;
                    position: absolute;
                    font-size: 16px;
                    top: 2px;
                    right: 2px;
                }
            }
            & .img-status-onhold {
                position: relative;
                width: 60px;
                height: 60px;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: #FEF4EF;
                & .icon {
                    font-size: 28px;
                }
                & .icon-status {
                    color:#F2875E;
                    position: absolute;
                    font-size: 16px;
                    top: 2px;
                    right: 2px;
                }
            }
            & .img-status-inprogress {
                position: relative;
                width: 60px;
                height: 60px;
                aspect-ratio: 1;
                border-radius: 50%;
                background-color: #F3E8EE;
                & .icon {
                    font-size: 28px;
                }
                & .icon-status {
                    color:#8C1F64;
                    position: absolute;
                    font-size: 16px;
                    top: 2px;
                    right: 2px;
                }
            }
        }
        & a.summary-card:hover {
            border: 1px solid darkgray;
            box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.10);
            cursor: pointer;
        }

        & .slick-track {
            margin-left: 0;
        }


        & .program-card {
            background: white;
            border: 1px solid lightgray;
            border-radius: 10px;
            padding: 15px;
            font-size: 0.85em;
            min-height: 330px;

            & .progress-outer {
                width: 64px;
                height: 64px;
                aspect-ratio: 1;
                border-radius: 50%;
                background: conic-gradient(#50cdc9 10%, #F0F0F0 10% 100%);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            & .progress-inner {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: white;
                font-size: .85em;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            & .stats {
                font-size: .9em;
            }
        }
        
        & .exp-rec-holder {
            display: inline-block;

            & .exp-rec {
                border: 1px solid lightgray;
                padding: 10px;
                margin: 0;
                background-color: white;

                & .exp-info {
                    font-size: .75em;
                    & .exp-title {
                        height: 26px;
                        width: 100%;
                        font-size: 1.25em;
                        font-weight: 700;
                        overflow: hidden;
                        margin-bottom: 0;
                    }
                    & .brief-instruction {
                        width: 100%;
                        height: 36px;
                        font-weight: 500;
                        font-size: 0.85em;
                    }
                    & .duration {
                        min-height: 20px;
                        bottom: 15px;
                        min-height: 20px;
                        font-size: 0.85em;
                    }
                }

                & .btn-book-experience {
                    font-size: 0.8em;
                }
            }

            & .card-text {
                min-height: 20px;
            }
        }

        & .card-exp-info {
            background-color: white;
            border: 1px solid lightgray;
            border-radius: 20px;
            font-size: .85em;

            & .featured-image {
                width: 155px;
                height: 155px;
                aspect-ratio: 1;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                border-radius: 10px;
            }

            & .btn {
                font-size: 1em;
            }
        }

        & .card-exp-attendees {
            background-color: #FBFBFB;
            border: 1px solid lightgray;
            border-radius: 20px;

            & .attendee {
                background: white;
                border: 1px solid lightgray;
                border-radius: 10px;

                & .name {
                    width: 220px;
                }
                & .email {
                    overflow-wrap: anywhere;
                }
                & .address {
                    width: 280px;
                }
                & .calendar-status {
                    width: 160px;
                }
                & .management-btns {
                    width: 100px;
                }
            }

            & .btn-attendee-action {
                height: 36px;
                width: 36px;
                color: #50cdc9;
                background: white;
                border: 1.5px solid #50cdc9;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            & .btn-attendee-action.show {
                color: white;
                background: #50cdc9;
            }

            & .btn-attendee-action:hover {
                color: white;
                background: #50cdc9;
            }

            & .btn-attendee-action:disabled {
                color: lightgray;
                background: #FBFBFB;
                border: 1.5px solid lightgray;
            }
        }

        & .ctn-exp-team-members {
            min-height: 100px;
        }

        & .btn-cancel-circle {
            text-align: center;
            color: #f46224;
            background: #f4622420;
            font-size: 16px;
            height: 24px;
            line-height: 24px;
            aspect-ratio: 1;
            border-radius: 50%;
        }
        & .btn-confirm-circle {
            text-align: center;
            color: #52b646;
            background: #52b64620;
            font-size: 16px;
            height: 24px;
            line-height: 24px;
            aspect-ratio: 1;
            border-radius: 50%;
        }
        & .btn-cancel-circle:hover {
            color: white;
            background-color: #f46224;
        }
        & .btn-confirm-circle:hover {
            color: white;
            background-color: #52b646;
        }
        
        & .nav-tabs {
            border: none;
        }
        & .nav-link{
            &.attendees {
                color: purple;
                border: 1px solid purple;
                border-bottom: none;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &.attendees:hover {
                color: purple;
                border: 1px solid purple;
                border-bottom: none;
            }

            &.attendees.active {
                color: white;
                background-color: purple;
                border: 1px solid purple;
                border-bottom: none;
            }

            &.required-actions {
                color: #F9A54F;
                border: 1px solid #F9A54F;
                border-bottom: none;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &.required-actions:hover {
                color: #F9A54F;
                border: 1px solid #F9A54F;
                border-bottom: none;
            }

            &.required-actions.active {
                color: white;
                background-color: #F9A54F;
                border: 1px solid #F9A54F;
                border-bottom: none;
            }
        }

        & .tab-pane {
            &.pane-attendees {
                font-size: .85em;
                border: 1px solid purple;
                border-radius: 20px;
                min-height: 100px;
                background: white;
                overflow: hidden;

                & .btn {
                    font-size: 1em;
                }
            }

            &.pane-required-actions {
                font-size: .85em;
                border: 1px solid #F9A54F;
                border-radius: 20px;
                min-height: 100px;
                background: white;
                overflow: hidden;

                & .btn {
                    font-size: 1em;
                }
            }
        }
        & .co-host {
            background-color: #F0F0F0;
            color: #0B2639;
            font-size: 1em;
            font-weight: 500;
            border-radius: 5px;
        }
        & .co-host:hover {
            cursor: pointer;
        }
        & .co-host-del {
            color: #0B2639;
            background-color: #eee;
        }
        & .co-host-del:hover {
            color: white;
            background-color: #f46224;
        }
        & .task-pane {
            background-color: #FBFBFB;
            border: 1px solid lightgray;border-radius: 20px;
        }
    }
}

.page-portal {

    & .btn-link {
        font-weight: 700;
        border: none;
        text-decoration: none;
    }

    & .video-shadow {
        aspect-ratio: 16 / 9;
        border-radius: .5rem;
        overflow: hidden;
    }

    & .card-exp a:hover {
        background: transparent;
        text-decoration: none !important;
    }

    & .card-exp label.exp-label {
    }

    & .post-container a:hover {
        text-decoration: none;
    }

    & .filter-exp-category {
        border: 0;
        background-color: transparent;
        font-size: 1.25em;
        font-weight: 700;
        border-bottom: 3px solid transparent !important;
    }

    & .filter-exp-category.active { 
        color: #50cdc9;
        border-bottom: 3px solid #50cdc9 !important;
    }

    & .filter-exp-category:hover {
        cursor: pointer;
    }

    & .filter-exp-sub-category {
        border: 1px solid lightgray;
    }

    & .filter-exp-sub-category:hover {
    }

    & .filter-exp-sub-category.filter-on {
        color: #fff;
    }

    & .filter-toggle-tag {
        font-size: 0.85em;
        font-weight: 700;
        border: 1px solid lightgray;
    }

    & .filter-toggle-tag:hover {
    }

    & .filter-toggle-tag.filter-on {
        color: #fff;
    }

    & .card-nav-page {
        border: none !important;
        padding: 0;
        margin: 0;
        background: transparent;

        & a:hover {
            color: #50CDC9;
            background: transparent;
            text-decoration: none;
        }

        & a:focus {
            background: transparent;
            text-decoration: none;
        }

        .tile {
            position: relative;
            width: 100%;
            aspect-ratio: 0.9;
            border-radius: .5rem !important;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;

            & .bg-image {
                height: 100%;
                width: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: 50% 0;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;
                border-radius: 0.5em;
            }

            & .nav-instruction {
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                color: white;
                background-color: #0A2639D0;
                padding: 2em;
                /*visibility: hidden;*/
                transform: scaleY(0);
                transform-origin: center;
                z-index:20;
                border-radius: 0.5em;
                -webkit-transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;
                transition: all .5s;

                & a {
                    color: white;
                    text-decoration: none;
                }

                & a:hover {
                    color: white;
                    text-decoration: none;
                }
            }
        }

        & .btn-nav-page {
            position: relative;
            margin-top: -1em;
            z-index: 20;
            width: 100%;
            text-align: center;
            padding: 0.75em 0;
            font-weight: bold;
            font-size: 1.25em;
            line-height: 1.25em;
            border-radius: 0.5em;
            border: 1px solid white;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

            & .label {
                display: block;
            }

            & .experience {
                display: none;
            }
        }
    }

    & .card-nav-page:hover {
        & .tile {
            transform: scale(0.85);

            & .nav-instruction {
                transform: scaleY(1);
                transition: transform 0.2s ease;
            }
        }

        & .btn-nav-page {
            -ms-transform: scaleX(0.85);
            -moz-transform: scaleX(0.85);
            -webkit-transform: scaleX(0.85);
            -o-transform: scaleX(0.85);
            transform: scaleX(0.85);

            & .label {
                display: none;
            }

            & .experience {
                display: block;
            }
        }
    }

    & .card-g-step {
        border: 1px solid gray;
        padding: 20px 10px;
        background-color: white;
        border-radius: 0.5em;
    }

    & .col-core-values-prev {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .col-core-values-prev.wl-30 {
        width: 30px;
        margin-left: -30px;
    }
    & .col-core-values {
    }
    & .col-core-values-next {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .col-core-values-next.wr-30 {
        width: 30px;
        margin-right: -30px;
    }
}

.page-order {
    & .payment-option-text {
        font-size: 1.1em;
        font-weight: 400;
    }

    & .icon_question_mark {
        text-align: center;
        font-size: 64px;
        height: 64px;
        line-height: 64px;
        aspect-ratio: 1;
        color: #FFD145
    }

    & .err-msg { color: #FF1E1E; }

    &  input[type=number]::-webkit-inner-spin-button {
        opacity: 1
    }

    & .steps {
        list-style-type: none !important;
        width:100%;
        display: flex;
        flex-direction: row;

        & li {
            display:inline-block !important;
            width:33%;
            height: 80px;

            & .three-steps {
                width:33.33%;
            }
        }

        & .circle-step {
            height: 50px;
            width: 50px;
            background-color: #e8e8e8;
            border-radius: 50%;
            z-index:9;
            position: relative;
            text-align: center;
            line-height:50px;
            display: block;
            margin-right: auto;
            margin-left: auto;
            color: #ffffff;
            font-weight: bold;
            font-size: 1.5em;
            line-height: 2em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .step-bar {
            z-index:0;
            position: relative;
            height:10px;
            background-color: #e8e8e8;
            margin:-30px 0 0 0;
            width:100%;
        }

        & .step-text {
            text-align: center;
            color:#e8e8e8;
            margin-top: 30px;
            font-weight: bold;
        }
    }

    & .ctn-img-exp { width: 298px; }
    & .img-exp { width: 100%; height: 350px; }
    & .img-exp-sq { width: 100%; aspect-ratio: 1;}

    & .input-org {
        color:#f46224;
        font-weight:600;
    }

    & .cnt-mock-calendly {
        display: block;
        flex: 1 1 auto;
        transition: all .22s ease-out;
        padding: 20px 0;
        margin: 20px 0 80px 0;
    }

    & .form-label {
        font-size: 1.15em;
        font-weight: 700;
    }
    
    & .lrg-icon {
        font-size:1.75em;
        text-align:center;
        color: #f46224;
    }

    & .message{
        color:#f46224;
        text-align: left;
        font-weight:400;
        line-height: 1.5em;
    }

    & .addons-items {
        list-style: none;
        border: 1px solid #ececec;
        border-radius: 10px;
        background: white;

        & li {
            list-style: none;
            border: none;
            box-shadow:none;
        }

        & img {
            border-radius: .5em;
            max-width:80px;
        }

        & h5 {
            font-weight: 600;
            font-size: .9em;
            margin: 0 0 0 0;
            line-height: 1.1em;
        }

        & h6 {
            font-size: .8em;
            font-weight: 600;
            color:#F46224;
            margin: 0 0 0 0;
            line-height: 1.1em;
        }

        & p {
            font-size:.7em;
            line-height: 1.1em;
        }
    
        & .rdo-addons {
            width: 1em;
            height: 1em;
            box-shadow: 0 4px 8px 0 rgba(108, 197, 193, 20%), 0 4px 8px 0 rgba(108, 197, 193, 20%);
            border-radius: 100%;
            -webkit-appearance: inherit;
            border:1px solid #d6d7d9;
            position:relative;
            box-sizing:border-box;
            font-size:1em !important;
        }

        & .rdo-addons:checked:before {
            content:"";
            position:absolute;
            border-radius: 100%;
            left:25%;
            top:25%;
            width:50%;
            height:50%;
            background:#F46224;
            font-size:1em !important;
        }
    }

    & .team-alink-blue {
        color:#051826  !important;
    }

    & .team-alink-blue:hover{
        color: #6cc5c1  !important;
        cursor: pointer;
    }
}

.page-order-2025 {
    font-family: 'Poppins';

    --bs-border-color: #f0f0f0;

    & hr {
        margin: 1rem 0;
        color: inherit;
        border: 0;
        border-top: 1px solid #C0C0C0;
        opacity: .25;
    }

    & input[type="radio"] {
        height:1.25em;
        aspect-ratio: 1;
        vertical-align: middle;
    }

    & .step-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        width: 272px;
        height: 48px;

        & img {
            height: 30px;
        }

        & .title {
            font-size: 1.75em;
            font-weight: 300;
        }
    }

    & a.step-question {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
        text-decoration: none;
        width: 172px;
        height: 48px;
    }

    & .order-progress {
        position: relative;
        flex-grow: 0.9;
        height: 48px;

        & .progress {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
        }
        
        & .order-steps {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;            
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            & .order-step {
                font-size: 0.85em;
                color: lightgray;
                background: white;
                display: flex;
                flex-direction:column;
                align-items: center;
                min-width: 96px;

                & .circle {
                    height: 40px;
                    width: 40px;
                    border: 1px solid lightgray;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            & .order-step.active {
                color: black;

                & .circle {
                    border: 1px solid black;
                    background-color: #ffd145;        
                }
            }

            & .dot {
                display: none;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #50cdc9;
            }
        }        
    }

    & .stick-top {
        position: -webkit-sticky;
        position: sticky;
        top: 112px;
    }

    & .lbl-black-white {
        color: white;
        background-color: black;
        font-size: 0.85em;
        border-radius: 20em;
    }

    & .event-summary {
        width: 360px;

        & .card-event-info {
            max-width: 320px;
            border-radius: 20px;
            background-color: white;
            border: 5px solid #0000;
            background: 
                linear-gradient(white,white) padding-box,
                linear-gradient(0deg,#abddd7,#feebb2) border-box;

            & .date-icon {
                font-size: 1.7rem;
            }

            & .exp-card {
                width: 260px;

                & .exp-img {
                    width: 100%;
                    aspect-ratio: 1;
                    border-radius: 20px;
                }

                & .exp-title {
                    width: 100%;
                    font-size: 1.15em;
                    font-weight: 600;
                    overflow: hidden;
                }

                & .exp-text {
                    width: 100%;
                    font-size: .85em;
                    font-weight: 500;
                }
            }
        }
    }
    
    & .panel-order {
        background: white;
        border: 1px solid lightgray;
        border-radius: 20px;
        box-shadow: 0 0 5px 5px rgb(0, 0, 0, 0.10);
    }

    & .price-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    & .price-name {
        font-weight: 500;
    }

    & .price-shipping {
        color: red;
        font-size: 0.85em;
    }

    & .price-sub-total {
        font-weight: 500;
    }

    & .icon-info {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 1px solid black;
        border-radius: 50%;
    }

    & .coupon-outer {
        width:200px;
        border: 1px solid lightgray;
        padding: 5px;
    }

    & .coupon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        width: fit-content;
        font-size: 0.85em;
        font-weight: 500;
        padding: 3px 5px;
        background: #F0F0F0;
    }

    & .btn-icon {
        width: 22px;
        height: 22px;
        aspect-ratio: 1.0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        background: transparent;
    }
    & .btn-icon:hover {
        border: 1px solid gray;
        background: #FF0000A0;
    }

    & .err-msg { color: #FF1E1E; }
    
    & .panel-order-canceled {
        width: 720px;
        background: white;
        border: 1px solid lightgray;
        border-radius: 20px;
        box-shadow: 0 0 5px 5px rgb(0, 0, 0, 0.10);
    }    

    & .panel-order-addon {
        background: white;
        border: 1px solid lightgray;
        border-radius: 20px;

        & .addons-items {
            list-style: none;
            border: 1px solid #ececec;
            border-radius: 10px;
            background: white;

            &.selected {
                border: 1px solid black;
            }
            &:hover {
                border: 1px solid black;
            }

            & li {
                list-style: none;
                border: none;
                box-shadow:none;
            }

            & img {
                border-radius: .5em;
                max-width:80px;
            }

            & h5 {
                font-weight: 600;
                font-size: .9em;
                margin: 0 0 0 0;
                line-height: 1.1em;
            }

            & h6 {
                font-size: .8em;
                font-weight: 600;
                color:#EE1B78;
                margin: 0 0 0 0;
                line-height: 1.1em;
            }

            & p {
                font-size:.7em;
                line-height: 1.1em;
            }

            & .addon {
                width: 1em;
                height: 1em;
                border-radius: 100%;
                -webkit-appearance: inherit;
                border:1px solid #d6d7d9;
                position:relative;
                box-sizing:border-box;
                font-size:1em !important;
            }

            & .addon:checked:before {
                content:"";
                position:absolute;
                border-radius: 100%;
                left:25%;
                top:25%;
                width:50%;
                height:50%;
                background:#F46224;
                font-size:1em !important;
            }
        }
    }

    & .panel-order-summary {
        background: white;
        border: 1px solid lightgray;
        border-radius: 20px;
    }

    & .panel-tasks {
        width: 350px;

        & .circle-icon {
            width: 48px;
            height: 48px;
            aspect-ratio: 1;
            border: 1px solid lightgray;
            border-radius: 50%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 18px;

            &.green {
                border: 1px solid #66BC60;
                color: #66BC60;
            }

            &.yellow {
                border: 1px solid #FFD145;
                color: #FFD145;
            }

            &.teal {
                border: 1px solid #5DC3C3;
                color: #5DC3C3
            }
        }

        & p {
            font-weight: 300;
        }
    }
    
    & .panel-login {
        width: 540px;
        background: #FFFCEE;
        border-radius: 20px;
        color: black;

        & .form-login-label {
            font-weight: 300;
            font-size: 0.85em;
        }    
    }


    & .region-attendees {
        width: 440px;

        & .region-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border: 1px solid transparent;
            border-radius: 5px;
            font-weight: 300;

            &.included {
                font-weight: 600;
                background-color: #F9F9F9;
                border: 1px solid #F0F0F0;
            }

            & .region-name {
            }

            & .region-price {
                width: 80px;
                border-left: 1px solid #F0F0F0;
                border-right: 1px solid #F0F0F0;
                text-align: right;
                padding: 10px 0;
            }

            & .region-sub-total {
                width: 150px;
                border-left: 1px solid #F0F0F0;
                text-align: right;
                padding: 10px 10px;
            }
        }
    }

    & .input-number-group {
        width: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: white;
        border: 1px solid #F0F0F0;
        border-radius: 5px;
        padding: 3px 5px;

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }

        /* Firefox */
        input[type=number] {
          -moz-appearance: textfield;
        }

        & .btn.circle {
            width: 20px;
            height: 20px;
            aspect-ratio: 1;
            padding: 0;
            background: #F0F0F0;
            border: 1px solid #F0F0F0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .attendee-num-up:hover {
            background: #ffd145;
        }

        & .attendee-num-down:hover {
            background: #50cdc9;
        }

        & .attendee-number  {
            width: 36px;
            text-align: center;
            border: none;
        }

        & .credits-number {
            width: 120px;
            text-align: right;
            padding-right: 5px;
            border: none;
        }
    }

    & .region-summary {
        width: 300px;
        border: 1px solid black;
        border-radius: 20px;

        & table.region-table {
            width: 100%;

            & td {
                height: 30px;
            }
        }
    }
}

/* quote generator */
.tooltip-quote-generator .tooltip-inner {
    max-width: 300px !important;
    text-align: left;
    padding: 15px 20px;
    font-size: 0.9em;
}

.panel-quote-generator {
    border: 1px solid lightgray;
    border-radius: 20px;
    background: white;

    & .number-group {
        width: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: white;
        border: 1px solid #F0F0F0;
        border-radius: 5px;
        padding: 3px 5px;

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        & .btn.circle {
            width: 20px;
            height: 20px;
            padding: 0;
            background: #F0F0F0;
            border: 1px solid #F0F0F0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .num-up:hover {
            background: #ffd145;
        }

        & .num-down:hover {
            background: #50cdc9;
        }

        & input[type="number"] {
            text-align: center;
            border: none;
        }
    }

    & .attendee-number-group {

        & .attendee-number  {
            width: 36px;
        }

        & .dropdown-toggle::after {
            display: none;
        }

        & .price-tier {
            cursor: pointer;
            &.selected {
                background-color: #E0E0E0;
                &::after {
                    position: absolute;
                    right: 10px;
                    font-family: "Font Awesome 6 Pro";
                    content: "\f00c";
                }
            }
        }
    }

    & #section_add_attendee_by_region {
        & .region-row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border: 1px solid transparent;
            border-radius: 5px;
            font-weight: 300;

            &.included {
                font-weight: 600;
                background-color: #F9F9F9;
                border: 1px solid #F0F0F0;
            }

            & .region-name {
            }

            & .region-price {
                width: 80px;
                border-left: 1px solid #F0F0F0;
                border-right: 1px solid #F0F0F0;
                text-align: right;
                padding: 10px 0;
            }

            & .region-sub-total {
                width: 150px;
                border-left: 1px solid #F0F0F0;
                text-align: right;
                padding: 10px 10px;
            }
        }

        & .region-summary {
            width: 300px;
            border: 1px solid black;
            border-radius: 20px;

            & table.region-table {
                width: 100%;

                & td {
                    height: 30px;
                }
            }
        }
    }

    & #section_quote_summary {
        & .price-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            & .price-name {
                font-weight: 500;
            }
            & .price-sub-total {
                font-weight: 500;
            }
        }

        & .coupon-outer {
            width:200px;
            border: 1px solid lightgray;
            padding: 5px;

            & .coupon {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: start;
                width: fit-content;
                font-size: 0.85em;
                font-weight: 500;
                padding: 3px 5px;
                background: #F0F0F0;
            }
        }
    }

    & #section_email_quote {
        input {
            border: 1.5px solid rgb(255, 209, 69);
            border-radius: 8px;
            background-color: #fffcf1;
            display: block;
            height: 50px;
            width: 100%;
            box-sizing: border-box;
            font-size: 1.0rem;

            &::placeholder {
                color: gray;
                opacity: 1;
            }
        }
    }
    & .btn-icon {
        width: 22px;
        height: 22px;
        aspect-ratio: 1.0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        background: transparent;
    }

    & .err-msg {
        color: #FF1E1E;
    }

    & .icon-info {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 1px solid black;
        border-radius: 50%;
    }

    & .order-progress {
        position: relative;
        flex-grow: 0.9;
        height: 30px;
        margin-bottom: 20px;

        & .progress {
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
        }
        
        & .order-steps {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;            
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            & .order-step {
                font-size: 0.85em;
                color: lightgray;
                background: white;
                display: flex;
                flex-direction:column;
                align-items: center;
                min-width: 55px;

                & .circle {
                    height: 30px;
                    width: 30px;
                    border: 5px solid #50cdc9;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            & .order-step.active {
                color: black;

                & .circle {
                    background-color: #50cdc9;        
                }
            }

            & .dot {
                display: none;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #50cdc9;
            }
        }
    }

    .loading-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
    }
    
}

@keyframes holiday_animation {
    from {
        transform: scale(6);
    }
    to {
        transform: scale(1);
    }
}

/* xxl */
@media only screen and (min-width: 1400px) {
    .experience-finder-page {
        & .title {
            font-size:4.5em;
            padding: 0.5em 0.5em;
        }
    }
}

/* xl */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .page-experience {

        & .exp-gallery {
            width: 660px;
            height: 380px;
            padding: 10px;

            & .exp-image {
                height: 360px;
            }
        }

        & .col-l {
            width: calc(100% - 440px);
        }

        & .col-r {
            width: 440px;
        }

        & .bk-navy {
            margin-top: -58px;
        }

        & .price-box-ic {
            margin-top: -470px;
            z-index: 900;
        }

        & .price-box-kit {
            margin-top: -140px;
            z-index: 900;
        }
    }

    .experience-finder-page {
        & .title {
            font-size:4em;
            padding: 0.5em 0.5em;
        }
    }    

}

/* lg */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .page-experience {
        
        & .exp-header {
            display: flex;
            flex-direction: row;
            align-items: start;
            justify-content: space-between;

            & .header-text {
                display: flex;
                flex-direction: column;
                align-items: start;

                & .exp-title {

                }

                & .exp-outcomes {
                    margin-left: 0;

                    & label.outcome {
                        font-size: 0.75em;
                        border: 1px solid lightgray;
                        padding: 5px 10px;
                        border-radius: 20em;
                    }
                }
            }

            & .customer-use-case {
                margin-top: 20px;
            }
        }

        & .col-l {
            width: calc(100% - 440px);
        }

        & .col-r {
            width: 440px;
        }

        & .exp-gallery {
            width: 500px;
            height: 290px;
            padding: 10px;

            & .exp-image {
                height: 270px;
                border-radius: 20px;
            }
        }

        & .section-title {
            font-size: 1.75em;
        }

        & .section-title-lg {
            font-size: 2.25em;
        }

        & .bk-navy {
            margin-top: -128px;
        }

        & .host-img {
            width: 180px;
        }

        & .about-text {
            margin-top: 20px;
        }

        & .price-box-ic {
            margin-top: -400px;
            z-index: 900;
        }

        & .price-box-kit {
            margin-top: 0;
            z-index: 900;
        }
    
    }

    .experience-finder-page { 
        & .title {
            font-size:3.5em;
            padding: 0.5em 0;
        }
    }

}

/* md */
@media only screen and (max-width: 991px) {
    .page-experience {
        h1 {font-size: 2em;}

        & .exp-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            & .header-text {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;

                & .exp-title {
                }

                & .exp-outcomes {
                    min-width: 100%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    margin: 1em 0;
                }
            }

            & .customer-use-case {
                flex-direction: row-reverse;
            }
        }

        & .cta-icons {
            display: none;
        }

        & .col-l {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        & .col-r {
            width: 100%;
            margin: 60px 0 20px 0;
            padding: 20px;
        }

        & .section-title {
            font-size: 1.75em;
            align-items: start;

            & img {
                margin: 5px 0;
            }
        }

        & .section-title-lg {
            font-size: 2.25em;
        }

        & .ctn-gallery {
            position: relative;
            height: auto;
            overflow: visible;
            z-index: 101;
        }

        & .exp-gallery {
            aspect-ratio: 16/9;
            width: 100%;
            height: auto;
            padding: 0;
            border: none;

            & .slider-exp-images {
                width: 100%;
                height: 100%;
                margin: 0;
                border-radius: 20px;
                --overflow: hidden;
            }

            & .exp-image {
                height: 100%;
                border-radius: 20px;
            }
        }

        & .host-portrait {
            border: 1px solid #1A5985;
        }
        
        & .host-img {
            width: 100%;
            aspect-ratio:1;
            border-radius: 10px;
            border: 1px solid black;
        }

        &.kit-based {
            .slick-dots li {
                display: inline-block;
                width: 15px;
                height: 20px;
            }

            & .host-tips {
                max-width: 380px;
                font-size: 0.85em;
                overflow: hidden;
                & i {
                    font-size: 1.5em;
                }
            }

            & .exp-hosts {
                position: relative;
                border: 1.5px solid #134669;
                border-radius: 20px;
                overflow: hidden;

                & .card-host {
                    color: white;
                    padding: 20px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                & .slider-exp-hosts {
                    width: 100%;
                    padding: 10px;

                    & .slick-list {
                        overflow: visible;
                    }

                    & .slick-track {
                        & img {
                            width: 100%;
                        }
                    }
                }

                & .exp-hosts-next {
                    display: none;
                }
            }
        }
        
        &.idea-centric {
            .slick-dots li {
                display: inline-block;
                width: 15px;
                height: 20px;
            }

            .slick-dots li button::before {
                color: #000;
            }

            .slick-dots li.slick-active button:before {
                color: #000;
            }

            & .exp-hosts {
                & .card-host {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }

        & hr.exp-divider {
            height: 0;
        }

        & svg.svg-top {
            width: 120%;
            height: 60px;
            transform: translateX(-5%);
        }

        & svg.svg-bottom {
            width: 120%;
            height: 60px;
            transform: translateX(-5%);
        }

        & .about-text {
            margin-top: 20px;
            align-items: start;
            min-height: 520px;
        }

        & .card-cta {
            position: relative;
            top: 0;

            & .top {
                padding: 20px;
            }

            & .bottom {
                padding: 30px 10px 10px 10px;
            }
        }

        & .exp-kit-image {
            width: 100%;
            aspect-ratio: 16/9;
            height: auto;
            border-radius: 8px;
            cursor: pointer;
        }
        & .kit-list {
            & ul {
                padding-left: 1em;
            }
        }
    }

    .experience-finder-page {
        & .title {
            font-size:2.5em;
            padding: 0.5em 0.5em;
        }

        & .efp-text {
            font-size: 1.75em;
        } 

        & .card-exp {
            margin-top: 10px;
        }
    }
}

/* sm */
@media only screen and (max-width: 768px) {
    .page-portal {
        & .col-core-values-prev.wl-30 {
            width: 30px;
            margin-left: 0px;
        }
        & .col-core-values {
            width: calc(100% - 60px);
        }
        & .col-core-values-next.wr-30 {
            width: 30px;
            margin-right: 0px;
        }
    }

    .sign_box_container {
        height: calc(100vh - 148px);

        & .signin-head-text {
            font-size: 2em;
        }

        & .sign_box {
            width: 480px;
        }

        & .signin-form {
            padding: 20px 40px;
        }
    }
}

/* xs */
@media only screen and (max-width: 576px) {
    .experiences-slider {
        & .slick-prev {
            margin-left: 15px;
        }

        & .slick-next {
            margin-right: 15px;
        }
    }

    .experience-finder-page {
        & .title {
            font-size:2.5em;
            padding: 0.5em 0em;
        }

        & h1 {
            font-size: 36px;
        }

        & h5 {
            font-size: 18px;
        }
        
        & .highlighted-card {
            overflow: hidden;
        }
    }

    .sign_box_container {
        height: calc(100vh - 180px);

        & .signin-head-text {
            font-size: 1.5em;
        }

        & .sign_box {
            width: 90%;
        }

        & .signin-form {
            padding: 20px 30px;
        }

        & .text-long {
            font-size: 0.8em;
        }
    }
}


.insight-page {
    &.single-insight {
        font-family: Poppins !important;
        display: flex;
        .post-title h1 {
            font-size: 48px;
            font-weight: 600;
            line-height: 56px;

            @media only screen and (max-width: 991px) {
                font-size: 36px;
                line-height: 44px;
            }

            @media only screen and (max-width: 576px) {
                font-size: 22px;
                line-height: 30px;
            }
        }
        h2::before {
            background-image: url('https://www.teamraderie.com/wp-content/uploads/2025/03/yellow_Logo_arrow_R.png');
            background-size: contain;
            background-repeat: no-repeat;
            margin-right: 0.5em;
            width: 30px;
            height: 30px;
            transform: translateX(-100%);
            content: "";
            display: inline-block;
            position: absolute;

            @media only screen and (max-width: 991px) {
                width: 28px;
                height: 28px;
            }

            @media only screen and (max-width: 576px) {
                width: 25px;
                height: 25px;
            }
        }

        h2 {
            font-family: "Poppins";
            font-weight: 300;
            font-size: 25px;
            padding-left: 30px;

            @media only screen and (max-width: 991px) {
                font-size: 22px;
            }

            @media only screen and (max-width: 576px) {
                font-size: 20px;
            }
        }

        b {
            font-weight: 550;
        }

        & .hide-on-mobile {
            @media only screen and (max-width: 991px) {
                display: none !important;
            }
        }

        & .e-con-inner {
            margin: 0 !important;
            max-width: none !important;
        }

        & .main-section-container {
            max-width: 1200px;
            width: calc(85vw);
            margin: 0 auto;
        }

        & .container-for-wave {
            margin-top: -16.4vw;
            @media only screen and (max-width: 576px) {
                margin-top: -100px;
            }
        }

        & .insight-post-content {
            h2 {
                font-size: 36px !important;
                font-weight: 600 !important;

                @media only screen and (max-width: 991px) {
                    font-size: 28px !important;
                }

                @media only screen and (max-width: 576px) {
                    font-size: 20px !important;
                }
            }
            h2::before {
                width: 36px !important;
                height: 36px !important;

                @media only screen and (max-width: 991px) {
                    width: 30px !important;
                    height: 30px !important;
                }

                @media only screen and (max-width: 576px) {
                    width: 25px !important;
                    height: 25px !important;
                }
            }

            h3 {
                font-size: 26px !important;
                font-weight: 400 !important;

                @media only screen and (max-width: 991px) {
                    font-size: 22px !important;
                }

                @media only screen and (max-width: 576px) {
                    font-size: 18px !important;
                }
            }

            p {
                @media only screen and (max-width: 991px) {
                    font-size: 14px !important;
                }

                @media only screen and (max-width: 768px) {
                    font-size: 12px !important;
                }
            }
        }

        & .review-summary {
            font-size: 16px; font-weight: 300;

            p {
                font-size: 16px;
                @media only screen and (max-width: 991px) {
                    font-size: 14px;
                }
                @media only screen and (max-width: 576px) {
                    font-size: 12px;
                }

                &.text-sm {
                    font-size: 14px;
                    @media only screen and (max-width: 991px) {
                        font-size: 12px;
                    }
                    @media only screen and (max-width: 576px) {
                        font-size: 10px;
                    }
                }
            }

            & .reviewer-host-image {
                height: 60px; width: 60px; min-width: 60px; border-radius: 50%; object-fit: cover;
            }
        }

        & .social-share {
            & .single-insight-social-button {
                width: 30px;
                height: 30px;
                border-radius: 50% !important;
                background: transparent;
                color: black;
                border: 1px solid black;
                font-size: 15px;
                text-align: center;
                align-items: center;
                display: flex;
                justify-content: center;
                text-decoration: none;
            }
        }

        .side-bar-container {
            width: 500px;
            .insight-summary-container {
                border: 1px solid black;
                border-radius: 20px;
                overflow: hidden;

                .insight-quick-summary {
                    color: white;
                    background-color: #0A2639;
                    padding: 30px;
                    border-radius: 20px;
                    margin: -1px;

                    & .quick-summary-content {
                        white-space: normal;
                        overflow-wrap: break-word;
                        word-break: break-word;
                        & .highlight {color: #ffd145;}
                    }
                }
            }

            .insight-action-module-container {
                border-radius: 20px;
                overflow: hidden;
                & img {
                    border: none;
                    border-radius: 0;
                    box-shadow: none;
                    height: auto;
                    max-width: 100%;
                }
            }

            .latest-insights-container {
                .latest-insight-item {
                    font-size: 16px; color: gray; font-weight: 300;
                    @media only screen and (max-width: 991px) {
                        font-size: 14px;
                    }
                    @media only screen and (max-width: 576px) {
                        font-size: 12px;
                    }
                    .post-title {
                        font-weight: 550; font-size: 20px; text-decoration: none;
                        @media only screen and (max-width: 991px) {
                            font-size: 18px;
                        }
                        @media only screen and (max-width: 576px) {
                            font-size: 16px;
                        }
                    }
                    .post-content {
                        overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
                    }
                }
            }

            .related-tags-item {
                padding: 12px 30px;
                border-radius: 999px;
                border: 1px solid black;

                i {
                    font-size: 1.3rem;
                    width: 30px;
                    min-width: 30px;
                    text-align: center;
                }
            }
        }
        .reviewer-host-container {
            padding: 30px;
            border-radius: 20px;
            border: 1px solid black;

            .reviewer-host-image {
                height: 200px; 
                width: 200px; 
                border-radius: 20px; 
                border: 1px solid black; 
                object-fit: cover; 
                max-width: none;
            }

            .reviewer-host-logo {
                width: 100px; max-width: none;
            }

            .reviewer-host-title {
                font-size: 20px;
                @media only screen and (max-width: 576px) {
                    font-size: 18px;
                }
            }

            p {
                font-size: 16px;
                @media only screen and (max-width: 576px) {
                    font-size: 14px;
                }
            }
        }

        .modal-reviewer-host {
            background-color: #FFFCF1; border: 4px solid #FFD145; border-radius: 15px;

            .reviewer-host-image {
                height: 200px; 
                width: 200px; 
                border-radius: 20px; 
                border: 1px solid black; 
                object-fit: cover; 
                max-width: none;
            }

            .reviewer-host-logo {
                width: 100px; max-width: none;
            }

            .reviewer-host-title {
                font-size: 20px;
                @media only screen and (max-width: 576px) {
                    font-size: 18px;
                }
            }

            p {
                font-size: 16px;
                @media only screen and (max-width: 576px) {
                    font-size: 14px;
                }
            }
        }

        .host-experience-recommends-container {
            & .slick-track {
                margin-left: 0 !important;
            }
            & .experience-item-parent {
                width: 100%;
                & .exp-card {
                    border: none;
                    padding: 0;
                    margin: 0;
                    background: transparent;
                    color: white;

                    & .exp-image-outer {
                        width: 100%;
                        aspect-ratio: 1;
                        border: 1px solid transparent;
                        border-radius: 10px;
                        overflow: hidden;
                        -webkit-transition: all 0.3s ease-in-out;

                        & .exp-image {
                            height: 100%;
                            width: 100%;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: 50% 50%;
                            -webkit-transition: all .5s;
                            -moz-transition: all .5s;
                            -o-transition: all .5s;
                            transition: all .5s;
                            border-radius: 10px;
                        }
                    }

                    & .exp-image-outer:hover {
                        border: 1px solid #ffd145;

                        & .exp-image {
                            cursor: pointer;
                            -ms-transform: scale(0.95);
                            -moz-transform: scale(0.95);
                            -webkit-transform: scale(0.95);
                            -o-transform: scale(0.95);
                            transform: scale(0.95);
                        }
                    }

                    & .exp-title {
                        --font-family: Poppins;
                        font-size: 20px;
                        font-weight: 600;
                        line-height: 25px;
                        width: 100%;
                        padding: 5px 0;

                        @media only screen and (max-width: 576px) {
                            font-size: 18px;
                        }

                        & a {
                            color: white;
                            text-decoration: none;
                        }
                    }

                    & .exp-brief-text {
                        width: 100% !important;
                        font-size: 14px;
                        font-weight: 500;

                        @media only screen and (max-width: 576px) {
                            font-size: 12px;
                        }
                    }

                    & .exp-duration {
                        width: 100%;
                        margin-top: 5px;
                        font-size: 14px;

                        @media only screen and (max-width: 576px) {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .outcome-experience-recommends-container {
            & .slick-track {
                margin-left: 0 !important;
            }
            & .experience-item-parent {
                width: 100%;
                & .exp-card {
                    border: none;
                    padding: 0;
                    margin: 0;
                    background: transparent;
                    color: white;

                    & .exp-image-outer {
                        width: 100%;
                        aspect-ratio: 1;
                        border: 1px solid transparent;
                        border-radius: 10px;
                        overflow: hidden;
                        -webkit-transition: all 0.3s ease-in-out;

                        & .exp-image {
                            height: 100%;
                            width: 100%;
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: 50% 50%;
                            -webkit-transition: all .5s;
                            -moz-transition: all .5s;
                            -o-transition: all .5s;
                            transition: all .5s;
                            border-radius: 10px;
                        }
                    }

                    & .exp-image-outer:hover {
                        border: 1px solid #ffd145;

                        & .exp-image {
                            cursor: pointer;
                            -ms-transform: scale(0.95);
                            -moz-transform: scale(0.95);
                            -webkit-transform: scale(0.95);
                            -o-transform: scale(0.95);
                            transform: scale(0.95);
                        }
                    }

                    & .exp-title {
                        --font-family: Poppins;
                        font-size: 20px;
                        font-weight: 600;
                        line-height: 25px;
                        width: 100%;
                        padding: 5px 0;

                        @media only screen and (max-width: 576px) {
                            font-size: 18px;
                        }

                        & a {
                            color: white;
                            text-decoration: none;
                        }
                    }

                    & .exp-brief-text {
                        width: 100% !important;
                        font-size: 14px;
                        font-weight: 500;

                        @media only screen and (max-width: 576px) {
                            font-size: 12px;
                        }
                    }

                    & .exp-duration {
                        width: 100%;
                        margin-top: 5px;
                        font-size: 14px;
                        @media only screen and (max-width: 576px) {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .insights-recommends-container {
            & .slick-track {
                margin-left: 0 !important;
            }

            & .insight-card {
                width: 100%;
                border: none;
                padding: 0;
                margin: 0;
                background: transparent;

                & .insight-item-card-image {
                    width: 100%;
                    aspect-ratio: 1.47;
                    border: 1px solid transparent;
                    border-radius: 10px;
                    overflow: hidden;
                    -webkit-transition: all 0.3s ease-in-out;

                    & .insight-image {
                        height: 100%;
                        width: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: 50% 50%;
                        -webkit-transition: all .5s;
                        -moz-transition: all .5s;
                        -o-transition: all .5s;
                        transition: all .5s;
                        border-radius: 10px;
                    }
                }

                & .insight-item-card-image:hover {
                    border: 1px solid #ffd145;

                    & .insight-image {
                        cursor: pointer;
                        -ms-transform: scale(0.95);
                        -moz-transform: scale(0.95);
                        -webkit-transform: scale(0.95);
                        -o-transform: scale(0.95);
                        transform: scale(0.95);
                    }
                }

                & .card {
                    background-color: transparent;
                }

                & .insight-card-title {
                    --font-family: Poppins;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 25px;
                    width: 100%;
                    padding: 5px 0;

                    @media only screen and (max-width: 576px) {
                        font-size: 18px;
                    }

                    & a {
                        color: white;
                        text-decoration: none;
                    }
                }
            }
        }
    }

    &.archive-insights {
        padding: 30px 0 50px 0;

        & .bck-pic-insight-subscribe-design {
            background-image: url("../img/insights_page_subscribe_design.png");
            background-repeat: no-repeat;
            background-size: auto 260px;
            background-color: #FFFCF1;
            background-position: left bottom;
        }
        & .insight-card-title a {
            text-decoration: none;
        }

        & .insight-card-title a:hover {
            text-decoration: underline;
            text-decoration-color: #F46224;
            text-decoration-thickness: 2px;
        } 

        & .insights-archive-item .thumbnail_figure {
            margin-bottom: 10px;
        }

        & .insights-archive-item .thumbnail_figure img {
            border-radius: 20px;
        }

        & .insights-archive-item .date {
            margin-bottom: 5px;
        }

        & .insights-sort-select {
            min-width: 235px;
        }

        & .underline {
            background-repeat: repeat-x;
        }

        & .underline-orange {
            background-image: url("https://www.teamraderie.com/wp-content/uploads/2023/03/orange_underline-1.png");
            background-position: 0 1.18em;
            background-size: 332px 15px;
            background-repeat: no-repeat !important;
            /* color: #f2f3f8; */
        }

        & .insights-sort-select .sort-text {
            color: #000;
            text-align: center;
            font-family: DM Sans;
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        & .form-select:focus {
            box-shadow: none;
            /* remove Bootstrap's focus box-shadow */
            outline: none;
            /* remove default browser outline */
        }

        & .form-select,
        & .form-select option {
            border: none;
            /* remove all borders */
            border-bottom: 2px solid #0A263933;
            /* add underline */
            border-radius: 0;
            /* remove border rounding, if any */
            color: #000;
            text-align: center;
            font-family: DM Sans;
            font-size: 15px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        & .sort-insights-dropdown {
            margin-left: 20px;
            margin-right: 0;
        }

        & .sort-insights-dropdown .form-select:disabled {
            background-color: transparent;
            opacity: 0.5;
        }

        & .insights-archive-item .cats {
            color: #6FC4C1;
            min-height: 32px
        }

        & .insights-cats {
            width: 100%;
            display: block;
        }

        & .insights-cats ul {
            width: 100%;
            list-style-type: none;
            display: block;
            margin: 20px 0;
        }

        & .no-insights-result {
            font-family: DM Sans;
            font-size: 16px;
            font-weight: 700;
        }

        & ul.pagination {
            list-style-type: none !important;
            padding-left: 0;
        }

        & .pagination .page-link {
            border: none !important;
            outline: none !important;
            color: #000;
            text-align: center;
            font-family: DM Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            padding-left: 24px;
            padding-right: 24px;
            cursor: pointer;
        }

        & .pagination {
            border: none !important;
        }

        & .pagination .disabled {
            opacity: 0.5;
        }

        & .pagination .page-link:hover {
            background-color: transparent !important;
        }

        & .pagination .page-item.active .page-link {
            background-color: transparent !important; /* Background color for active page */
            border: none;
        }

        & .pagination .page-item.active .page-link:after {
            content: "";
            display: block;
            width: 22px;
            height: 4px; /* Adjust the height if you want the underline to be thicker or thinner */
            background-color: #FF621F;
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%); /* This will center the underline */
        }

        & .insights-cats ul li {
            text-align: center;
            display: block;
            float: left;
        }
        & .disabled-link {
            pointer-events: none;
            opacity: 0.5;
        }

        & #subscriptionFormContainer {
            margin: 0 0 60px 0;
        }

        & #subscriptionForm {
            margin: 0;
        }

        & #subscriptionForm h2 {
            font-family: Poppins;
            font-size: 28px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-align: center;
        }

        & #subscriptionForm .col {
            padding-top: 17px;
        }

        & .btn-search-static {
            background-color: white;
            border: 1px solid #0a2639;
            color: #0a2639;
            text-decoration: none;
        }

        & .btn-search-static:hover {
            background-color: #0a263980;
            color: white;
            text-decoration: none;
        }

        & .btn-search-static.active-btn {
            background:  #0a2639;
            color: white;
        }

        & .btn-search-static.active-btn:hover {
            background:  #0a263980;
            color: silver;
        }

        & .insights-cats ul li ul {
            display: none;
        }

        & .insights-cats ul li a {
            line-height: 35px;
            display: table;
            text-align: center;
            margin: 0 auto;
            color: #0A2639;
            -o-transition: 0s;
            -ms-transition: 0s;
            -moz-transition: 0s;
            -webkit-transition: 0s;
            transition: 0s;
        }

        & .insights-cats ul li a:hover {
            color: #54a09d;
        }

        & .insights-cats ul li a.active {
            border-bottom: 2px solid #94B7D1;
            color: #54a09d;
        }

        & article.insights-archive-item {
            border: 1px solid #ddd;
            border-radius: 20px;
            float: left;
            padding: 15px;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        & article.insights-archive-item:last-child {
            margin-right: 0;
        }

        & article.insights-archive-item .post-excerpt {
            display: none;
        }

        & article.insights-archive-item .post-title h2 a {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            line-height: 26px
        }

        & article.insights-archive-item .post-title h2 a:hover {
            color: #f46224
        }

        & .insights-vertical-line {
            width: 60px;
        }

        & .insights-vertical-line::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            bottom: 0;
            left: 50%;
            border-left: 2px solid #0A263933;
            transform: translate(-50%);
        }

        & .insights-left-main-container>*:not(:last-child) {
            border-bottom: 2px solid #0A263933;
            margin-bottom: 24px;
            padding-bottom: 24px;
        }

        & .insights-main-card-details:nth-of-type(2)::before {
            content: "|";
            margin-right: 10px;
            margin-left: 10px;
        }

        & .insight-rightside-card-item .insight-item-card-image {
            width: 164px;
            min-width: 164px;
            height: 120px;
        }

        & .insights-main-list {
            margin-top: 50px;

            & #subscriptionForm {
                & .left-star {
                    height: 60px;
                    width: 60px;
                    position: absolute;
                    bottom: 10px;
                    left: 25px;
                    background-image: url('https://www.teamraderie.com/wp-content/uploads/2023/02/Teal-Star.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                }

                & .right-star {
                    height: 40px;
                    width: 40px;
                    position: absolute;
                    top:0px;
                    right:36px;
                    background-image: url('https://www.teamraderie.com/wp-content/uploads/2023/02/Teal-Star.png');
                    background-size: cover;
                    background-repeat: no-repeat;
                    transform: rotate(30deg);
                }

                & .insight-subscribe-text {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: left !important;
                    margin-right: 48px !important;
                    margin-left: 48px !important;
                    height: 100% !important;
                    vertical-align: middle !important;
                }
            }
        }

        & .row.custom-spacing {
            margin-right: -12.5px;
            margin-left: -12.5px;
            display: flex;
            flex-wrap: wrap;
        }

        & .row.custom-spacing>.col-sm-3 {
            padding-left: 12.5px;
            padding-right: 12.5px;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;
        }

        & .exp-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* limit to 2 lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5em;
            /* or whatever your design specifies */
            max-height: 3em;
            /* 2 lines x line-height */
        }

        & .tr-loading {padding: 0; margin: 0; top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px; border: 3px solid #0A2639;border-radius: 50%;border-top: 3px solid #FFD145;border-right: 3px solid #50CDC9;border-bottom: 3px solid #F46224;-webkit-animation: spin 2s linear infinite; /* Safari */animation: spin 2s linear infinite;}

        & .card-body>* {
            flex-grow: 1;
        }

        & .card-category {
            color: #000;
            font-family: Poppins;
            font-size: 11px;
            font-style: normal;
            font-weight: 800;
            line-height: 16px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        & .insight-rightside-card-item .insight-item-card-content {
            width: 100%;
            padding-left: 20px;
        }

        & h1 {
            font-weight: 600;
            font-family: Poppins;
            font-size: 36px;
            font-style: normal;
            line-height: normal;
        }

        & h2 {
            font-weight: bold;
            color: #0A2639;
            font-size: 2em;
            line-height: 1em;
        }

        & h5 {
            font-weight: 600;
            /*line-height: 42px;*/
            font-size: 1.5em;
            margin-bottom: 2%;
        }

        & hr {
            color: #adadac;
        }

        & ul,
        & ol {
            list-style-type: disc;
            margin-bottom: 30px;
        }

        & .main-image {
            margin-bottom: 50px;
            border-bottom: 1px solid #ddd;
        }

        & .back {
            display: table;
            margin: 0 0 10px 0;
            font-family: 'Khula', sans-serif;
            font-size: 18px;
            line-height: 25px;
            color: #6FC4C1;
        }

        & .back:hover {
            text-decoration: underline;
        }

        & .sidebar {
            max-width: 405px;
        }

        & .sidebar .content-sideber {
            border: 1px solid #d9d6ec;
            padding: 30px 30px 0px 30px;
            border-radius: 3px;
            position: sticky;
            position: -webkit-sticky;
            top: 90px;
        }

        & .sidebar .content-sideber img {
            display: table;
            margin: 0 auto 30px auto;
        }

        & .sidebar .content-sideber .sidebar-image-area {
            padding: 15px;
            margin-bottom: 30px;
        }

        & .sidebar .content-sideber .sidebar-image-area h3 {
            font-size: 14px;
            text-align: center;
            color: #999;
            font-style: italic;
            padding: 0 30px 0 0;
        }

        & .post-body {
            padding: 0 30px 0 0;
            font-family: 'Khula', sans-serif;
            font-size: 18px;
            line-height: 25px;
        }

        & .post-body a {
            color: #000;
            text-decoration: underline;
        }

        & .post-body a:hover {
            color: #000 !important;
            text-decoration-color: #F46224 !important;
            text-decoration-thickness: 3px !important;
        }

        & .highlight {
            font-weight: bolder;
            font-style: italic;
        }

        & .banner_text {
            color: #0A2639;
            font-family: "Poppins", Sans-serif;
            font-size: 2.3em;
            font-weight: 600;
            line-height: 1.3em;
            -webkit-text-stroke-color: #000;
            stroke: #000;
            padding: 5% 0% 0% 1%;
            text-align: center;
        }

        & .about-us-links,
            & .latest-post,
            & .download-guide {
            text-align: center;
        }

        & .about-us-links>*,
        & .download-guide>* {
            margin: 5% 0%;
        }

        & .about-us-links,
        & .latest-post {
            margin: 20% 0;
        }

        & .about-us-links h5 {
            font-size: 1.2em;
            line-height: 1.5em;
        }

        & .about-us-links span {
            color: #f46224
        }

        & .dateandcategory {
            font-size: .9em;
        }

        & .dateandcategory li:first-child {
            border-right: 1px solid rgba(0, 0, 0, .125) !important;
        }

        & .download-guide {
            margin: 20% 0%;
        }

        & .download-guide .btn {
            background-color: #f46224;
            color: #fff;
            text-align: center;
        }

        & .download-guide p {
            text-align: left;
        }

        & .categories {
            margin: 20% 0%;
        }

        & .categories li {
            margin: 5% 0;
            list-style: none;
        }

        & .categories h5 {
            text-align: center;
        }

        & .categories i {
            font-size: 1.5em;
            margin-right: 2%;
        }

        & .cat-yellow {
            color: #f6cb54;
        }

        & .cat-blue {
            color: #0A2639;
        }

        & .cat-orange {
            color: #f46224;
        }

        & .cat-teal {
            color: #6dc5c1;
        }

        & .experience-item-container {
            margin-bottom: 5%;
        }

        & .insights_hero_image {
        text-align: center;
        }

        & .insights_hero_image img {
            border-radius: 20px;
        }

        & #insight_quote {
            border: 1px solid rgba(0, 0, 0, .125) !important;
            margin-bottom: 5%;
        }

        & .insights-lists li {
            padding: 5% 0;
            border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
        }

        & .insights-lists li:last-child {
            border-bottom: none !important;
        }

        & .insights-lists li a {
            font-size: 1em;
            color: #0A2639;
            text-decoration: none;
        }

        & .insights-lists li .date {
            font-size: .8em;
            color: #6dc5c1;
            margin-top: 4%;
        }

        & .list-group-item {
            border: none;
            text-align: left;
        }

        & #might-like h5 {
            font-size: 1.2em;
            margin-bottom: .5%;
        }

        & #might-like h5 a {
            color: #0A2639;
        }

        & .post-wrap {
            margin-bottom: 5%;
        }

        & .quote {
            background-color: #f6f9fc;
            margin: 2%;
            padding: 3%;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: auto;
            text-align: center;
        }

        & .cnt-quote-icon {
            /*text-align:center;display: block;z-index: 999;*/
            position: relative;
            /* margin: 0 auto; */
            font-size: 2em;
            /*left: 0;right: 0;margin-left: auto;margin-right: auto;*/
        }

        & .quote-icon {
            display: block;
            position: absolute;
            margin-left: 47%;
            margin-right: auto;
            top: -25px;
            filter: drop-shadow(5px 5px 6px #d6efee);
        }

        & .img_responsive {
            max-width: 100%;
            height: auto;
        }


        & .insights-filter {
            display: flex;
            justify-content: space-between;
        }

        & .card-insight {
            border: none !important;
            padding: 0;
            margin: 0 !important;
            background: transparent;
        }

        & .card-insight .insight-image {
            width: 100%;
            height: 200px;
            border-radius: .5rem !important;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;
        }

        & .card-insight .insight-image .bg-image {
            height: 100%;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 0;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }

        & .card-insight .insight-image:hover .bg-image,
        & .card-insight .insight-image:focus .bg-image {
            cursor: pointer;
            -ms-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -webkit-transform: scale(1.25);
            -o-transform: scale(1.25);
            transform: scale(1.25);
        }

        & .card-insight .insight-image-lg {
            width: 100%;
            height: 312px;
            border-radius: .5rem !important;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;
        }

        & .card-insight .insight-image-lg .bg-image {
            height: 100%;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }

        & .card-insight .insight-image-lg:hover .bg-image,
        & .card-insight .insight-image-lg:focus .bg-image {
            cursor: pointer;
            -ms-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -webkit-transform: scale(1.25);
            -o-transform: scale(1.25);
            transform: scale(1.25);
        }

        & .insight-rightside-card-item .insight-image-sm {
            height: 120px;
        }

        & .card-insight .insight-image-sm {
            width: 100%;
            border-radius: .5rem !important;
            overflow: hidden;
            -webkit-transition: all 0.3s ease-in-out;
        }

        & .insights-main-title-section {
            margin-top: 0;
        }

        & .insights-main-most-section {
            margin: 57px 0 100px 0;
        }

        & .card-insight .insight-image-sm .bg-image {
            height: 100%;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }

        & .card-insight-main .card-body {
            margin-top: 32px;
        }

        & .card-insight .insight-image-sm:hover .bg-image,
        & .card-insight .insight-image-sm:focus .bg-image {
            cursor: pointer;
            -ms-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -webkit-transform: scale(1.25);
            -o-transform: scale(1.25);
            transform: scale(1.25);
        }

        & .insights-main-most-section .card-body {
            padding: 0px !important;
        }

        & .insight-rightside-card-item .card-insight .card-body {
            padding: 0.5rem 0 !important;
        }

        & .card-insight .card-title {
            width: 100% !important;
        }

        & .card-insight .card-text {
            color: #000;
            font-family: DM Sans;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        & .card-insight .exp-title {
            color: #000;
            font-family: DM Sans;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        & .card-insight .insight-card-body {
            padding: 20px 0;
        }


        & .insight-card {
            min-height: 300px;
        }

        & .insight-card .insight-image-sm {
            height: 208px;
        }

        @media all and (min-width: 1px) {
            .insights-cats ul {
                height: auto;
                min-height: 35px;
            }

            & article.post-wrap {
                margin: 0 0 20px 0;
            }

            & .insights-cats ul li {
                text-align: center;
                margin: 0 3%
            }

            & article.post-wrap:last-child {
                margin-right: auto;
            }

            & article.post-wrap {
                float: none;
                margin: 0 auto 20px auto;
            }

            & article.post-wrap .post-media {
                margin-bottom: 15px;
            }

            & .sidebar {
                max-width: none;
                width: 100%
            }
        }

        @media screen and (max-width: 767px) {
            & .insights-main-title-section h1 {
                font-size: 26px;
            }

            & .insights-main-most-section {
                flex-direction: column;
                margin-top: 0px;
                margin-bottom: 60px;

                & .insights-left-main-container {
                    & .insight-rightside-card-item {
                        flex-direction: column;

                        & .insight-item-card-image {
                            width: 100%;
                            height: 208px;
                            margin-bottom: 15px;

                            & .insight-image-sm {
                                height: 208px;
                            }
                        }

                        & .insight-item-card-content {
                            padding-inline: 0px;
                        }
                    }
                }

                & .insights-vertical-line {
                    display: none;
                }

                & .insight-main {
                    border-bottom: 2px solid #0A263933;
                    margin-bottom: 24px;
                    padding-bottom: 12px;

                    & .card-insight-main {
                        & .card-insight-main-title {
                            margin-bottom: 20px;
                        }
                    }
                }
            }

            & .insights-filter {
                flex-direction: column;

                & .insights-sort-select {
                    margin-top: 20px;
                }
            }

            & .insights-main-list {
                & #subscriptionForm {
                    flex-direction: column;
                    padding-bottom: 0px !important;

                    & .left-star {
                        height: 45px;
                        width: 45px;
                        position: absolute;
                        bottom: 10px;
                        left: 16px;
                    }

                    & .right-star {
                        height: 30px;
                        width: 30px;
                        position: absolute;
                        top: 0px;
                        right: 24px;
                    }

                    & .insight-subscribe-text {
                        margin-left: 32px !important;
                        margin-right: 32px !important;
                        margin-bottom: 20px;
                    }
                }

                & #subscriptionFormContainer {
                    padding-inline: 0px;
                    margin-bottom: 20px;
                }

                & .insight-card {
                    background-color: #EEFAFA;
                    padding-block: 12px;
                    margin-bottom: 15px;
                    border-radius: 8px;
                }

                & .pagination-container {
                    & .pagination {
                        margin-left: 0px;
                    }
                }
            }
        }

        @media all and (min-width: 992px) {
            & .insights-cats ul {
                min-height: 35px;
            }

            & article.post-wrap:last-child {
                margin-right: 0;
            }

            & .posts-wrap {
                width: 933px;
                margin: 0 auto;
            }

            & article.post-wrap {
                margin: 0 20px 30px 0;
                float: left;
            }

            & .sidebar {
                max-width: 405px;
                width: auto
            }

            & .insights-archive-item .thumbnail_figure {
                min-height: 265px;
            }
        }

        @media all and (min-width: 1200px) {
            .posts-wrap {
                width: 100%;
                margin: 0;
            }

            .insights-archive-item .thumbnail_figure {
                min-height: 228px;
            }
        }

        @media all and (min-width: 1px) {
            .insights-cats ul {
                height: auto;
                min-height: 35px;
            }
        }

        @media all and (min-width: 992px) {
            .insights-vertical-line {
                width: 120px;
            }

            .insight-rightside-card-item .insight-item-card-content {
                padding-left: 40px;
            }

            .insights-archive-item .thumbnail_figure {
                min-height: 265px;
            }
        }

        @media all and (min-width: 1200px) {
            .insights-archive-item .thumbnail_figure {
                min-height: 228px;
            }
        }

    }
}