@import "fonts.css";
@import "colors.css";
@import 'generals-resets.css';
@import "texts.css";
@import "form-fields.css";
@import "planeRings.css";
@import "drawer.css";
@import "tabs.css";
@import "audioPlayer.css";
@import "footer.css";

@keyframes audioWave {
    0% { height: 20%; }
    10% { height: 60%; }
    20% { height: 30%; }
    30% { height: 80%; }
    40% { height: 40%; }
    50% { height: 100%; }
    60% { height: 30%; }
    70% { height: 70%; }
    80% { height: 40%; }
    90% { height: 60%; }
    100% { height: 20%; }
}

@keyframes rotate {

    to{
        transform: rotate(360deg);
    }

}

nav.c-logoPlusNav{
    padding: 25px;
    position: relative;

    &:after{
        content: '';
        position: absolute;
        width: 776px;
        height: 629px;
        background-image: url(../assets/images/decoratives/floatingMultiColoredDots.svg);
        right: 0;
        left: unset;
        top: 0;
        z-index: -1;
    }

    .c-s-logoPlusNav{
        display: grid;
        /*grid-template-columns: 154px 2fr 25px 227px 25px  46px;*/
        grid-template-columns: 154px 2fr 25px 227px;

        align-items: center;
        width: 100%;



        [class*=c-logoPlusNav-divider]{
            border: 1px solid #D9D9D9;
            height: 50%;
            width: 1px;
            margin: 0 auto;

        }

        ul{
            display: flex;
            justify-self: flex-end;
            align-items: center;
            li{

                margin-left: 20px;
                text-align: center;
                &:not(:last-child){
                    margin-right: 20px;
                }

                &.current-menu-item{
                    a{
                        color: var(--text-accent-primary);
                }}
                a{
                    font-family: "Merriweather", serif;
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--text-primary-on-light);
                    transition: color 0.2s ease-in-out;


                    &:hover, &.current-menu-item{
                        color: var(--text-accent-primary)
                    }
                }
            }
        }

        .c-inputField{
            height: 31px;
        }

        .icon-menu{
            cursor: pointer;
            display: none;
            transition: background-color 0.1s ease-in-out;
            mask-image: url(../assets/images/icons/icon_menu.svg);
            background-color: var(--surface-primary);
            width: 25px;
            height: 23px;
            &:hover{
            background-color: color-mix(in srgb, var(--surface-primary), black 20%);
            }
        }

        .c-select{
            z-index: 2;
        }


        @media (max-width: 900px){
            grid-template-columns: 1fr 46px 25px;

            ul{
                display: none;
            }

            .c-select{
                grid-row-start: 1;
                grid-column-start: 2;
            }

            .c-inputField{
                grid-row: 2;
                grid-column: 1/-1;
                margin-top:16px;
            }

            .c-logoPlusNav-divider2{
                display: none;
            }

            .icon-menu{
                display: block;
            }


        }
    }
}


.sectionContainer{
    padding-left:25px;
    padding-right: 25px;

    .sub-sectionContainer{
        width: 100%;
        max-width: 1077px;
        margin: 0 auto;
    }
}

#c-home{
    width: 100%;
}



header.c-hero{
    padding: 0 25px 100px;
    position: relative;

    @media (max-width: 728px){
        padding-bottom: 25px;
    }

    .c-s-hero{
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;


        @media (max-width: 950px){
            /*flex-direction: column-reverse;*/
            grid-template-columns: 1fr;
            .c-hero-collage{
                grid-row: 1;
            }
        }

        .c-hero-content{
            /*max-width: 555px;*/
            width: 100%;
            /*margin-top: 128px;*/
            margin-top: 18%;
            @media (max-width: 445px){
                margin-top: 80px;

            }

            h3{
                font-size: 17px;
                color: var(--text-accent-primary);
                text-transform: uppercase;
            }

            h1{
                font-family: 'Merriweather', serif;
                font-size: 55px;
                color: var(--text-primary-on-light);

                @media (max-width: 728px){
                    font-size: 45px;
                }

                span{
                    font-family: inherit;
                }

                .bold{
                    font-weight: 700;
                }
                .green{
                    color: var(--text-accent-primary);
                }
            }

            p{
                margin-top: 20px;
            }

            a + span{
                font-size: 14px;
                color: var(--text-secondary-on-dark);
                margin-top: 8px;
                display: block;
            }
        }
        .c-hero-collage{
            position: relative;
            width: 100%;


            .c-s-hero-collage{
                position: absolute;
                top: 0;
                left: 160px;
                display: grid;
                grid-template-columns: repeat(13, 1fr);
                grid-auto-rows: 100px;
                grid-template-rows: repeat(20, 1fr);
                width: 126%;

                height: 529px;
                flex-shrink: 0;
                gap: 16px;

                @media (max-width: 728px){
                    height: 439px;
                    margin-top: -52px;
                }

                >div{
                    /*opacity: 0.5;*/
                    transition: transform 0.2s ease-in-out;
                    /*opacity: 0;*/
                    overflow: hidden;

                    video{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 5px;
                        z-index: 1;
                        position: relative;
                    }

                    &:hover{
                        transform: scale(1.1);
                    }
                }

                .round-15{
                    border-radius: 15px;
                }
                .round-10{
                    border-radius: 10px;
                }
                .round-5{
                    border-radius: 5px;
                }

                .green{
                    &:after{
                        background-color: var(--surface-primary);
                    }

                }

                .gold{
                    &:after{
                        background-color: var(--surface-secondary);
                    }

                }

                .grey{
                    &:after{
                        background-color: var(--grey-600);
                    }

                }

                .opacity-80{
                    opacity: 0.8;
                    /*&:after{*/
                    /*    opacity: 0.8;*/
                    /*}*/

                }
                .opacity-60{
                    opacity: 0.6;
                    /*&:after{*/
                    /*   */
                    /*}*/

                }

                .opacity-40{
                    opacity: 0.4;
                    /*&:after{*/
                    /*    opacity: 0.4;*/
                    /*}*/

                }
                .opacity-20{
                    opacity: 0.2;

                    /*&:after{*/
                    /*    opacity: 0.2;*/
                    /*}*/

                }


                div{
                    width: 100%;
                    height: 100%;
                    /*background-color: red;*/
                    background-position: center;
                    background-size: cover;
                    position: relative;
                    /*font-size: 0;*/
                    color: transparent;

                    &:after{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        display: block;
                        background-size: cover;

                    }



                    &:nth-child(1){
                        grid-column: 1/3;
                        /*grid-column-end: 3;*/

                        grid-row: 7/ span 7;

                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-1.png");*/
                        }


                    }
                    &:nth-child(2){
                        grid-column-end: span 2;
                        grid-row: 5/ span 6;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-2.png");*/
                        }

                    }
                    &:nth-child(3){
                        grid-column-end: span 2;
                        grid-row: 11/ span 6;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-3.png");*/

                        }

                    }
                    &:nth-child(4){
                        grid-column-end: span 2;
                        grid-row: 3/ span 9;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-4.png");*/

                        }


                    }
                    &:nth-child(5){
                        grid-column-end: span 2;
                        grid-row: 12/ span 8;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-1.png");*/

                        }

                    }
                    &:nth-child(6){
                        grid-column-end: span 2;
                        grid-row: 5/ span 6;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-6.png");*/

                        }

                    }
                    &:nth-child(7){
                        grid-column-end: span 2;
                        grid-row: 11/span 5;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-7.png");*/

                        }

                    }
                    &:nth-child(8){
                        grid-column-end: 8;
                        grid-row: 16/ span 3;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-8.png");*/

                        }

                    }
                    &:nth-child(9){
                        grid-column-end: 11;
                        grid-row: 4/span 3;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-9.png");*/

                        }

                    }
                    &:nth-child(10){
                        grid-column-end: span 2;
                        grid-row: 7/span 7;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-10.png");*/

                        }

                    }
                    &:nth-child(11){

                        grid-column-end: 10;
                        grid-row: 14/span 3;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-11.png");*/

                        }

                    }
                    &:nth-child(12){
                        grid-column-end: 11;
                        grid-row: 14/span 4;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-12.png");*/

                        }

                    }
                    &:nth-child(13){

                        grid-column-end: 10;
                        grid-row: 19/span 2;

                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-13.png");*/

                        }

                    }
                    &:nth-child(14){

                        grid-column-end: 11;

                        grid-row: 18/span 2;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-14.png");*/

                        }

                    }
                    &:nth-child(15){
                        grid-column-end: 12;
                        grid-row: 3/span 4;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-15.png");*/

                        }

                    }
                    &:nth-child(16){

                        grid-column-end: 12;
                        grid-row: 7/span 4;

                        /*background-image: url("../assets/images/bitmaps/hero-face-16.png");*/
                        &:after{

                        }

                    }
                    &:nth-child(17){
                        grid-column-end: 12;
                        grid-row: 17/span 4;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-1.png");*/

                        }

                    }

                    &:nth-child(18){
                        grid-column-end: 12;
                        grid-row: 11/span 6;
                    }
                    &:nth-child(19){

                        grid-column-end: 13;
                        grid-row: 4/span 3;
                    }
                    &:nth-child(20){
                        grid-column-end: 13;
                        grid-row: 7;
                    }
                    &:nth-child(21){
                        grid-column-end: 13;
                        grid-row: 8/span 3;
                    }
                    &:nth-child(22){
                        grid-column-end: 13;
                        grid-row: 11/span 2;
                    }
                    &:nth-child(23){
                        grid-column-end: 13;
                        grid-row: 13/span 5;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-16.png");*/

                        }

                    }
                    &:nth-child(24){
                        grid-column-end: 14;
                        grid-row: 6/span 2;
                    }
                    &:nth-child(25){
                        grid-column-end: 14;
                        grid-row: 9/span 3;
                        &:after{
                            /*background-image: url("../assets/images/bitmaps/hero-face-17.png");*/

                        }
                    }
                }

                .passportImage{
                    position: absolute;
                    left: -158px;
                    /*width: 490px;*/
                    grid-column: 1 / span 3;
                    grid-row: -9 / span 3;
                    z-index: 2;

                }

                @media (max-width: 1700px){
                    grid-template-columns: repeat(12, 1fr);
                    left: 90px;

                    div{
                        &:nth-child(24),&:nth-child(25){
                            display: none;
                        }
                    }

                    .passportImage{
                        left:unset;
                        grid-row-start: -6;
                        width: 400px;
                    }

                }

                @media (max-width: 1560px){
                    grid-template-columns: repeat(11, 1fr);
                    width: 111%;
                    div{
                        &:nth-child(19),&:nth-child(20),&:nth-child(21),&:nth-child(22),&:nth-child(23){
                            display: none;
                        }
                    }
                }
                @media (max-width: 1400px){
                    grid-template-columns: repeat(10, 1fr);
                    width: 100%;
                    div{
                        &:nth-child(15),&:nth-child(16),&:nth-child(17),&:nth-child(18){
                            display: none;
                        }
                    }
                }

                @media (max-width: 1290px){
                    width: 100%;
                    left: 0;
                    position: relative;
                    padding-left: 50px;



                }

                @media (max-width: 1050px){
                    grid-template-columns: repeat(8, 1fr);
                    div{
                        &:nth-child(9),&:nth-child(10),&:nth-child(11),&:nth-child(12), &:nth-child(13),&:nth-child(14){
                            display: none;
                        }
                    }


                }

                @media (max-width: 950px){
                    flex-direction: column-reverse;
                    padding-left: unset;
                    grid-template-columns: repeat(13, 1fr);
                    div{
                        &:nth-child(9),&:nth-child(10),&:nth-child(11),&:nth-child(12), &:nth-child(13),&:nth-child(14),&:nth-child(15),&:nth-child(16),&:nth-child(17),&:nth-child(18),&:nth-child(19),&:nth-child(20),&:nth-child(21),&:nth-child(22),&:nth-child(23), &:nth-child(24),&:nth-child(25){
                            display: block;
                        }
                    }
                    .passportImage{
                        width: 350px;

                    }

                    @media (max-width: 780px){
                        flex-direction: column-reverse;
                        padding-left: unset;
                        grid-template-columns: repeat(12, 1fr);
                        div{
                            &:nth-child(24),&:nth-child(25){
                                display: none;
                            }
                        }
                    }
                    @media (max-width: 728px){
                        .passportImage{
                            width: 50vw;
                            grid-row-start: -7;
                            margin-left:-5px;
                        }
                    }
                    @media (max-width: 695px){
                        grid-template-columns: repeat(11, 1fr);
                        div{
                            &:nth-child(19),&:nth-child(20),&:nth-child(21),&:nth-child(22),&:nth-child(23){
                                display: none;
                            }
                        }
                    }
                    @media (max-width: 550px){
                        grid-template-columns: repeat(10, 1fr);
                        div{
                            &:nth-child(15),&:nth-child(16),&:nth-child(17),&:nth-child(18){
                                display: none;
                            }
                        }
                    }
                    @media (max-width: 480px){
                        grid-template-columns: repeat(8, 1fr);
                        div{
                            &:nth-child(9),&:nth-child(10),&:nth-child(11),&:nth-child(12), &:nth-child(13),&:nth-child(14){
                                display: none;
                            }
                        }
                    }
                    @media (max-width: 445px){
                        grid-template-columns: repeat(6, 1fr);
                        div{
                            &:nth-child(6), &:nth-child(7), &:nth-child(8){
                                display: none;
                            }
                        }
                        .passportImage{
                            width: 80vw;
                            grid-column: unset;
                            grid-row: unset;
                            bottom: -73px;
                            grid-row-start: -7;
                            left: -30px;

                        }
                    }

                }
            }
        }
        /*.c-hero-search{*/
        /*    grid-column: 1/-1;*/
        /*    !*background-color: red;*!*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    flex-direction: column;*/
        /*    align-items: center;*/
        /*    margin-top: 50px;*/

        /*    .c-inputField{*/

        /*        width: 100%;*/
        /*        max-width: 748px;*/
        /*        height: 66px;*/

        /*        @media (max-width: 728px){*/
        /*            height: 50px;*/
        /*        }*/


        /*        &.margin-top-32{*/
        /*            margin-top: 32px;*/
        /*        }*/

        /*        input[type="search"]{*/
        /*            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);*/
        /*            font-size: 16px;*/
        /*            background-size: 22px 22px;*/
        /*            background-position: left 24px center;*/
        /*            padding: 0 42px 0 59px;*/
        /*        }*/

        /*        .clearInputField{*/
        /*            width: 15px;*/
        /*            height: 15px;*/
        /*            right: 24px;*/

        /*        }*/


        /*    }*/
        /*}*/

        .c-section-title, .c-section-subtitle{
            text-align: center;
        }

        .c-section-subtitle{
            margin-top:13px;
        }

    }

}
main{



    section {

        &.firstPageSection{
            margin-top: 100px;

            @media (max-width: 728px){
                margin-top: 0;
            }
        }

        &.c-testimonials{
            padding: 50px 25px 70px;

            @media (max-width: 728px){
               padding: 25px;
            }
            h2,h5{
                text-align: center;
            }
            .c-s-testimonials{
                .c-testimonials-items{
                    display: flex;
                    margin-top: 80px;
                    column-gap: 25px;
                    row-gap: 50px;

                    @media (max-width: 728px){
                        flex-direction: column;
                        align-items: center;
                        margin-top: 50px;
                    }
                    .c-testimonial-item{
                        &:before{
                            content: "";
                            mask-image: url('../assets/images/icons/icon_startExclamationMark.svg');
                            mask-size: 100%;
                            width: 30px;
                            height: 23px;
                            background-color: var(--surface-secondary);
                            display: block;
                        }

                        p{
                            margin-top: 10px;
                        }
                        .c-testimonial-author{
                            font-size: 16px;
                            font-weight: bold;
                            margin-top: 15px;
                            display: block;

                        }
                        .c-testimonial-country{
                            font-size: 16px;
                            margin-top: 6px;
                            display: block;
                        }

                        .c-rating{
                            margin-top: 10px;
                        }
                    }
                }

            }
        }
        &.c-mostSearched{
            width: 100%;
            padding: 55px 25px;
            background-color: var(--surface-quartery);


            @media (max-width: 728px){
                padding: 25px;
            }

            .c-s-mostSearched{
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                row-gap: 25px;
                @media (max-width: 728px){
                    grid-template-columns: 2fr 1fr;
                }

                h2{
                    color: var(--text-primary-on-dark);
                    grid-column: 1/4;
                    display: flex;
                    align-items: center;
                    @media (max-width: 728px){
                        grid-column: 1;
                    }
                }

                h5{
                    color: var(--text-secondary-on-dark);
                    grid-column: 1/4;
                    margin-top: -11px;

                }

                button{
                    grid-column: 4;
                    grid-row: 1/3;
                    align-self: center;
                    justify-self: end;

                    @media (max-width: 728px){
                        grid-column:2;
                        grid-row: 1;

                    }
                }

                hr{
                    grid-column: 1/-1;
                    /*width: 100%;*/
                    height: 1px;
                    background-color: var(--surface-secondary);
                    color: red;
                    border-color: var(--surface-secondary);
                }

                .c-tabs{
                    grid-column: 1/-1;

                }

                .c-mostSearched-articles{
                    /*margin-top: 25px;*/
                    grid-column: 1/-1;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    column-gap: 25px;
                    row-gap: 30px;

                    @media (max-width: 728px){
                        grid-template-columns: repeat(2, 1fr);
                        column-gap: 20px;
                    }



                    article{

                        cursor: pointer;


                        img{
                            width: 100%;
                            border-radius: 10px;
                            border: 0px solid transparent;
                            /*height: 100%;*/
                            transition: 0.2s ease-in-out;
                            max-height: 264px;
                            object-fit: cover;
                            margin-top: 7px;

                            @media (max-width: 728px){
                                max-height: 180px;


                            }

                        }

                        h4{
                            font-size: 14px;
                            font-family: "merriweather", serif;
                            letter-spacing: 1px;
                            line-height: 23px;
                            color: white;
                            transition: 0.2s ease-in-out;
                            margin-top: 5px;
                        }

                        button{

                            font-family: "roboto", sans-serif;
                            font-weight: 700;
                            justify-self: start;
                            text-transform: capitalize;
                            background-color: transparent;
                            transition: 0.2s ease-in-out;
                            padding: 0;
                            /*margin-top: 5px;*/



                            &:before{
                                content: "";
                                mask-image: url('../assets/images/icons/icon_CircledArrowRight.svg');
                                mask-repeat: no-repeat;
                                mask-size: 16px 16px;
                                width: 16px;
                                height: 16px;
                                background-color: white;
                                margin-right: 10px;
                                transition: 0.2s ease-in-out;



                            }

                            @media (max-width: 728px){

                                &:before{
                                    mask-size: 20px 20px;
                                    width: 20px;
                                    height: 20px;
                                }

                            }

                        }



                        &:hover{

                            h4{
                                color: var(--text-accent-secondary);
                            }
                            button{
                                color: var(--surface-secondary);

                                &:before{
                                    background-color: var(--surface-secondary);
                                }
                            }

                            img{
                                /*filter: grayscale(100%);*/

                                border: 4px solid var(--surface-secondary);
                            }

                        }

                    }
                }


            }


        }
        &.c-featuredArticle{
            padding: 65px 25px;

            @media (max-width: 728px){
                padding: 25px;
            }
            .c-s-featuredArticle{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-auto-rows: auto;
                grid-column-gap: 25px;
                grid-row-gap: 30px;

                &:hover{


                    img{
                        filter: grayscale(100%);
                        transform: scale(1.05);

                    }

                    h5{
                        color: var(--text-accent-primary);
                    }

                }

                .c-featuredArticle-content{
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: center;

                    h2{
                        display: flex;
                        align-items: center;
                        @media (max-width: 728px){
                            flex-direction: column;
                            align-items: flex-start;

                            &:after{
                                margin-left: unset!important;
                                margin-top: 10px;
                            }
                        }


                        &:after{
                            content: "";
                            width: 100px;
                            height: 1px;
                            background-color: var(--line-on-light);
                            display: block;
                            margin-left: 30px;

                        }
                    }

                    a.c-articleCategoryTag{
                        margin-top: 44px;

                        @media (max-width: 728px){
                            margin-top: 15px;
                        }
                    }

                    h5{
                        margin-top: 12px;
                        transition: 0.2s ease-in-out;
                    }

                    p{
                        margin-top: 37px;

                        @media (max-width: 728px){
                            margin-top: 20px;
                        }
                    }

                }
                .c-featuredArticle-image{
                    position: relative;
                    /*min-height: 560px;*/
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    /*background-color: red;*/
                    width: 534px;
                    /*height: 555px;*/
                    padding: 25px 0;

                    @media (max-width: 964px){
                        width: 50%;
                        height: 100%;
                        justify-self: center;

                    }
                    @media (max-width: 530px){
                        width: 100%;
                    }

                    a{
                        width: 100%;
                        max-width:  100%;
                        /*height: 100%;*/
                        /*max-height: 78%;*/
                        height: 314px;
                        overflow: hidden;
                        border-radius: 10px;

                        @media (max-width: 964px){
                           height: 200px;
                        }
                    }
                    img{
                        width: 100%;
                        /*max-width: 377px;*/
                        /*max-width:  71.67%;*/
                        height: 100%;
                        /*max-height: 414px;*/
                        /*max-height: 66.67%;*/

                        object-fit: cover;
                        position: relative;
                        z-index: 2;
                        transition: 0.2s ease-in-out;
                    }

                    &:before{
                        content: "";
                        position: absolute;
                        top: 0;
                        bottom:0;
                        left: 0;
                        right: 0;
                        margin: auto;
                        width: 100%;
                        max-width:87%;

                        height:  90%;

                        background-color: var(--surface-primary);
                    }

                    &:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        bottom:0;
                        left: 10px;
                        /*right: 0;*/
                        margin: auto;
                        width: 95%;
                        /*max-width: 433px;*/
                        height: 119%;
                        background-image: url("../assets/images/bitmaps/travelVisaComposition.png");
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        display: none;
                    }
                }

                @media (max-width: 964px){
                    grid-template-columns: 1fr;

                    h1,h5, span, p, button, .c-featuredArticle-image{
                        grid-column: auto;
                        grid-row: auto;
                    }
                    .c-featuredArticle-image{
                        grid-row:1;

                    }
                }
            }
        }
        &.c-topOfTheSeason{
            background-color: var(--surface-quartery);
            padding: 56px 25px;

            @media (max-width: 728px){
                padding: 25px;
            }
            .c-s-topOfTheSeason{
                max-width: 763px;


                h2{
                    color: var(--text-primary-on-dark);
                    display: flex;
                    align-items: center;
                    &:before{
                        content: "";
                        width: 11px;
                        height: 33px;
                        display: block;
                        background-color: var(--surface-secondary);
                        margin-right: 15px;
                    }

                }
                h5{
                    color: var(--text-secondary-on-dark);
                    margin-top: 15px;

                }

                .c-topOfTheSeason-articles{
                    display: grid;
                    grid-gap: 10px;
                    margin-top: 29px;

                    article{
                        /*height: 96px;*/
                        background-color: var(--surface-tertiary);
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        padding: 15px 43px 15px 28px;
                        transition: background-color 0.2s ease-in-out;

                        &:hover{
                            background-color: var(--surface-secondary);
                        }

                        &:before{
                            content: "";
                            width: 4px;
                            height: 33px;
                            background-color: var(--surface-secondary);
                            display: block;
                            margin-right: 18px;
                            flex-shrink: 0;
                        }

                        &:after{
                            content: "";
                            width: 18px;
                            height: 10px;
                            mask-image: url("../assets/images/icons/icon_arrowDown.svg");
                            mask-size: 18px 10px;
                            mask-repeat: no-repeat;
                            flex-shrink: 0;
                            display: block;
                            background-color: white;
                            margin-left: auto;
                            transform: rotate(-90deg);

                        }

                        h4{
                            color: var(--text-primary-on-dark);
                            font-size: 18px;
                            line-height: 31px;
                            font-family: "Merriweather", serif;
                            margin-right: 20px;
                        }
                    }
                }
            }

        }
        &.c-theMostNew{
            padding: 60px 25px;

            @media (max-width: 728px){padding: 25px;}
            .c-s-theMostNew{
                display: grid;
                grid-template-columns: 2fr 1fr;


                h2{
                    display: flex;
                    align-items: center;
                    /*grid-column: 1/span 3;*/
                    @media (max-width: 728px){
                        flex-direction: column;
                        align-items: flex-start;

                        &:after{
                            margin-left: unset!important;
                            margin-top: 10px;

                        }
                    }


                    &:after{
                        content: "";
                        /*width: 100px;*/
                        width: 28%;
                        height: 1px;
                        background-color: var(--line-on-light);
                        display: block;
                        margin-left: 30px;

                    }
                }



                h5.c-section-subtitle{
                    grid-column: 1;
                    margin-top: 17px;
                    @media (max-width: 940px){
                        grid-column: 1/-1;
                    }

                }




                button{
                    grid-column: 2;
                    grid-row: 1/3;
                    align-self: center;
                    justify-self: end;

                    @media (max-width: 940px){
                        grid-row: 1/2;
                    }
                }

                .c-theMostNew-articles{
                    margin-top: 25px;
                    grid-column: 1/-1;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    /*grid-template-rows:  repeat(3, minmax(151px, auto));*/
                    grid-gap: 20px;

                    @media (max-width: 940px){
                        grid-template-columns: 1fr 1fr;
                    }


                    a.c-article-link{
                        grid-column: 3/5;

                        &:hover{
                            h4{
                                color: var(--text-accent-primary);
                            }

                            .c-article-image{
                                /*border-color: var(--text-accent-primary);*/
                                /*border-width: 4px;*/
                                filter: grayscale(100%);
                                /*position: relative;*/
                                /*background-size: 105%;*/
                                transform: scale(1.05);

                                &::after {
                                    opacity: 1;
                                }

                            }
                        }
                        article{

                            display: grid;
                            grid-template-columns: 215px 1fr;
                            grid-column-gap: 16px;
                            grid-row-gap: 10px;

                            .c-articleCategoryTag, h4, p{
                                grid-column: 2;
                            }

                            .c-articleCategoryTag{
                                display: inline-block;
                            }

                            .c-article-content{
                                /*align-self: center;*/

                                h4{
                                    margin-top: 8px;
                                    font-family: "Merriweather", serif;
                                    transition: color 0.2s ease-in-out;
                                }

                                p{
                                    width: 100%;
                                    margin-top: 8px;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3; /* Cambia el número de líneas */
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                }
                            }

                            .c-article-image-wrapper{
                                width: 100%;
                                height: 100%;
                                border-radius: 5px;
                                overflow: hidden;
                                .c-article-image{
                                    width: 100%;
                                    height: 100%;
                                    background-repeat: no-repeat;
                                    background-size: cover;
                                    background-position: center;
                                    border: 0px solid transparent;
                                    /*transition: border-color, border-width .2s ease-in-out;*/
                                    transition: 0.2s ease-in-out;
                                    position: relative;

                                    /*&::after {*/
                                    /*    content: "";*/
                                    /*    position: absolute;*/
                                    /*    inset: 0;*/
                                    /*    background:color-mix(in srgb, var(--text-accent-primary) 40%, transparent);*/
                                    /*    mix-blend-mode: multiply; !* or overlay, color, etc. *!*/
                                    /*    pointer-events: none;*/
                                    /*    opacity: 0;*/
                                    /*    transition: opacity 0.2s ease-in-out;*/
                                    /*}*/






                                }
                            }





                        }

                        &:nth-child(1){
                            grid-column: 1/3;
                            grid-row: 1/4;
                            display: grid;
                            grid-template-rows: subgrid;

                            article{
                                grid-row: 1/4;
                                display: grid;
                                grid-template-rows: subgrid;
                            }

                            .c-article-content{
                                grid-column: 1/-1;


                            }

                            .c-article-image-wrapper{
                                grid-column: 1/-1;
                                grid-row: 1/3;
                            }
                        }

                        @media (max-width: 940px){
                            grid-column: auto/span 1!important;
                            grid-row: unset!important;

                            article{
                                grid-template-columns: 1fr;
                                grid-template-rows: unset!important;
                            }


                            .c-article-image-wrapper, .c-article-content{
                                grid-column: unset!important;
                                grid-row: unset!important;
                            }

                            .c-article-image-wrapper{
                                min-height: 180px;
                                height: 100%;
                            }
                        }

                        @media (max-width: 500px){
                            grid-column: 1/-1!important;
                        }
                    }


                }
            }
        }

        &.c-search-results{
            .c-s-search-results{


                h2, h5{
                    text-align: center;
                }
                h5{
                    margin-top: 13px;
                }

                form{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    grid-gap: 15px;
                    max-width: 790px;
                    width: 100%;
                    margin: 40px auto;


                    @media (max-width: 645px){
                        grid-template-columns: 1fr;
                    }

                    input[type="search"], .c-select{
                        width: 100%;
                        background-color: var(--Formfields-surface-field);
                        border: 1px solid var(--Formfields-border-field);
                        border-radius: 5px;
                        height: 57px;
                        outline: none;
                        color: var(--text-secondary-on-light);
                    }

                    /*input[type="search"]{*/
                    /*    padding: 10px 15px;*/

                    /*}*/

                    .c-select-selected{
                        height: 100%;
                        /*background-color:red;*/
                    }

                    .c-field{
                        span.c-field-label{
                            margin-bottom: 5px;
                            display: block;
                        }

                        .c-inputField{
                            .clearInputField{
                                width: 11px;
                                height: 11px;
                            }


                        }

                    }
                }

                .visualLoader {
                    width: 30px;
                    height:30px;
                    background-color:transparent;
                    border-radius: 100%;
                    border-left: 5px solid lightGrey;
                    border-top: 5px solid #00B762;
                    border-right: 5px solid lightGrey;
                    border-bottom: 5px solid lightGrey;
                    animation: rotate 1s linear infinite;
                }
                .c-search-results-list{
                    .c-search-results-item{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-bottom: 1px solid var(--line-on-light);
                        padding: 18px 0;
                        max-width: 790px;
                        margin: 0 auto;

                        @media (max-width: 645px){
                            flex-direction: column;
                            max-width: 100%;
                            position: relative;
                            row-gap: 16px;
                            .c-search-results-item-number{
                                position: absolute;
                                top: 18px;
                                left: 16%!important;

                                font-size: 32px!important;
                                z-index: 1;
                            }

                            .c-search-results-item-image{
                                width: 70% !important;
                                margin: unset!important;
                            }
                            .c-search-results-item-content{
                                max-width: 100% !important;
                            }

                        }

                        @media (max-width: 472px){

                            .c-search-results-item-number{
                                left: 7px!important;
                            }
                            .c-search-results-item-image{
                                width: 100% !important;
                            }
                        }

                        &:hover{

                            .c-search-results-item-number{
                                color: var(--text-accent-primary);
                            }

                            .c-search-results-item-image{
                                filter: grayscale(100%);
                                /*background-size: 105%;*/
                                transform: scale(1.05);
                            }

                            h4{
                                color: var(--text-accent-primary);
                            }
                        }

                        .c-search-results-item-number{
                            font-size: 50px;
                            font-weight: 900;
                            color: var(--text-bg);
                            transition: color 0.2s ease-in-out;
                        }

                        .c-search-results-item-image-wrapper{
                            width: 100%;
                            .c-search-results-item-image{
                                width: 296px;
                                height: 151px;
                                border-radius: 5px;
                                margin: 0 33px 0 18px;
                                flex-shrink: 0;
                                background-size: cover;
                                background-position: center;
                                transition: filter, transform .3s;
                            }
                        }


                        .c-search-results-item-content{
                            h4, p{
                                margin-top: 8px;
                            }

                            h4{
                                font-family: "Merriweather", serif;
                                font-size: 17px;
                                transition: color 0.2s ease-in-out;
                            }
                            max-width: 476px;
                        }
                    }

                }
            }
        }
        &.c-contact{

            margin-bottom: 50px;

            @media (max-width: 728px){
                margin-bottom: 25px;
            }

            h2, h5.c-section-subtitle{
                text-align: center;
            }

            h5.c-section-subtitle{
                margin-top: 13px;
            }
            .c-s-contact{

                max-width: 526px;

                form{
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-gap: 15px;
                    margin-top: 15px;

                    @media (max-width: 728px){
                        grid-template-columns: 1fr;
                    }

                    &.invalid, &.spam{
                        .wpcf7-response-output{
                            background-color: var(--surface-error);
                        }

                        row-gap: 28px;
                        }

                    &.sent{
                        .wpcf7-response-output{
                            background-color: #06A159;
                        }
                    }


                    input[type="text"], input[type="email"], textarea{
                        width: 100%;
                        background-color: var(--Formfields-surface-field);
                        border: 1px solid var(--Formfields-border-field);
                        border-radius: 5px;
                        min-height: 57px;
                        padding: 10px 15px;
                        outline: none;
                        color: var(--text-secondary-on-light);
                        /*outline: 1px solid red;*/

                        /*&:focus:not(.wpcf7-not-valid){*/
                        /*    outline: 1px solid var(--surface-primary);*/
                        /*}*/

                        &.wpcf7-not-valid{
                            border: 1px solid  var(--surface-error);
                        }

                        &::placeholder{
                            color: var(--Formfields-text-field-label);
                        }
                    }

                    .wpcf7-not-valid-tip{
                        font-size: 12px;
                    }


                    .wpcf7-not-valid-tip{
                        position: absolute;
                    }



                    .wpcf7-not-valid-tip{
                        color:  var(--surface-error);
                    }

                    #subject-field, #description-field, #field-submitBtn, .wpcf7-response-output{
                        grid-column: 1/-1;
                    }

                    /*#email-field{*/
                    /*  input[type="email"]{*/
                    /*      !*mask-image: url('../assets/images/icons/icon_envelope.svg');*!*/
                    /*      !*background-color: var(--Formfields-surface-field);*!*/
                    /*  }*/

                    /*}*/

                    .c-inputField{
                        .clearInputField{
                            width: 11px;
                            height: 11px;
                        }
                    }

                    #field-submitBtn{
                        justify-self: flex-end;

                        p{
                            display: flex;
                            align-items: center;
                            flex-direction: row-reverse;
                            .input[type="submit"] {
                                grid-column: 1/-1;
                                margin-top: 20px;
                            }
                        }

                    }



                    .wpcf7-response-output{
                        /*display: none;*/
                        border: none!important;
                        padding: 10px 15px;
                        font-size: 15px;
                        color: white;
                        margin: 0;
                        font-weight: 500;
                        line-height: 22px;
                    }
                 }





                }


                .c-chatWithUs{
                    border-top: 1px solid var(--line-on-light);
                    border-bottom: 1px solid var(--line-on-light);
                    padding: 25px 0;
                    margin-bottom: 30px;
                    margin-top: 30px;

                    h5{
                        text-align: left;
                    }

                    a.button{
                        margin-top: 10px;
                    }

                    a.button+span{
                        font-size: 14px;
                        color: var(--text-secondary-on-dark);
                        margin-top: 10px;
                        display: block;
                    }

                }

            }
        &.c-article-detail{

            .c-tableOfContents{
                background-color: var(--surface-quartery);
                display: flex;
                flex-direction: column;
                height: 365px;
                overflow: hidden;

                &:before{
                    content: "";
                    position: absolute;
                    bottom:0;
                    left: 58px;
                    width: 2px;
                    height: calc(100% - 43px);
                    background-color: var(--text-secondary-on-dark);

                        @media (max-width: 900px){
                            left:0;
                        }

                        @media (max-width: 768px){

                            left: 58px;
                        }
                }

                @media (min-width: 768px){
                    position: sticky;
                    /*top: 50%;*/
                    /*height: 90vh;*/
                    /*transform: translateY(-50%);*/

                    top: 5%;
                    height: 60vh;
                    border-radius: 10px;
                }


                @media (max-width: 768px){
                    position: fixed;
                    transition: bottom 0.2s ease-in-out;
                    left:0;
                    width: 100%;
                    border-radius: 20px 20px 0 0;
                    bottom: 0;
                    z-index: 4;

                    &.hideOnMobile{
                        bottom: -365px;
                    }

                }





                h6{
                    font-family: "Merriweather", serif;
                    font-size: 14px;
                    color: var(--text-primary-on-dark);
                    text-transform: uppercase;
                    border-bottom: 1px solid #A6ADCE;
                    height: 43px;
                    display: flex;
                    align-items: center;
                    padding: 0 25px;
                    flex-shrink: 0;
                    justify-content: space-between;


                    img{
                        filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(175deg);
                        display: none;
                        @media (max-width: 768px){
                            display: block;
                        }
                    }


                }

                ul::-webkit-scrollbar-button {
                    display: none !important;              /* hide scrollbar buttons */
                }

                .c-scrollBar{
                    height: 100%;
                    overflow-y: auto;

                    .simplebar-scrollbar::before {
                        background-color: var(--text-primary-on-dark);
                        opacity: 1!important;
                        width: 4px;
                    }

                }

                ul{
                    height: 100%;
                    flex: 100% 1 1;

                    display: grid;
                    grid-template-columns: 58px 1fr 10px 20px;
                    grid-auto-rows: minmax(40px, auto);

                    overflow-y: auto;
                    position: relative;
                    padding-top: 12px;

                    @media (max-width: 900px){
                        grid-template-columns: 1fr 10px 20px;
                    }

                    @media (max-width: 768px){

                        grid-template-columns: 58px 1fr 10px 20px;
                    }


                    /*&:before{*/
                    /*    content: "";*/
                    /*    width: 2px;*/
                    /*    height: 100%;*/
                    /*    display: block;*/
                    /*    flex-shrink: 0;*/
                    /*    background-color: var(--text-secondary-on-dark);*/
                    /*    position: absolute;*/
                    /*    grid-column: 2;*/

                    /*    @media (max-width: 900px){*/
                    /*        grid-column: 1;*/
                    /*    }*/

                    /*    @media (max-width: 768px){*/

                    /*        grid-column: 2;*/
                    /*    }*/

                    /*}*/

                    li{
                        font-size: 14px;
                        font-weight: 500;
                        color: var(--text-secondary-on-dark);
                        display: grid;
                        grid-template-columns: subgrid;
                        grid-auto-rows: minmax(40px, auto);
                        z-index: 1;


                        grid-column: 1/-1;

                        @media (max-width: 768px){
                            font-size: 15px;
                        }


                        a{
                            align-items: center;
                            padding: 0 19px 0 27px;
                            display: grid;
                            grid-template-columns: subgrid;
                            grid-auto-rows: minmax(40px, auto);
                            grid-column: 1/-1;

                            @media (max-width: 900px){
                                padding-left:0;
                            }

                            @media (max-width: 768px){

                                padding: 0 19px 0 27px;
                            }

                            &:hover, &.active{

                                color: var(--text-primary-on-dark);

                                span:nth-child(2){
                                    border-left-color: var(--text-primary-on-dark);
                                }

                                &:after{
                                    background-color: var(--text-primary-on-dark);
                                }
                            }

                            &.active{
                                /*background-color: var(--text-secondary-on-dark);*/
                                background-color: var(--surface-secondary);

                            }

                            &:after{
                                content: "";
                                mask-image: url('../assets/images/icons/icon_arrowDown.svg');
                                mask-size: 100%;
                                width: 12px;
                                height: 6px;
                                flex-shrink: 0;
                                background-color: var(--text-secondary-on-dark);
                                /*display: block;*/
                                transform: rotate(-90deg);
                                margin-left: auto;
                                transition:  0.2s ease-in-out;
                            }

                            span{
                                padding: 10px 0;
                                /*display: block;*/
                                transition:  0.2s ease-in-out;
                                height: 100%;
                                display: flex;
                                align-items: center;


                                &:nth-child(1){
                                    padding-right:13px;

                                    @media (max-width: 900px){
                                        display: none;
                                    }

                                    @media (max-width: 768px){

                                        display: block;
                                    }


                                }

                                &:nth-child(2){
                                    border-left: 2px solid var(--text-secondary-on-dark);
                                    padding-left:13px;
                                    margin-right: 5px;

                                }
                            }
                        }



                    }
                }


            }
            .c-s-article-detail{
                .c-publishedInfo{
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    color : var(--text-complemantary);
                    margin-top: 17px;
                    .c-publishedInfo-date{
                        display: flex;
                        align-items: center;
                        &:after{
                            content:"/";
                            display: block;
                            margin: 0 8px;
                        }
                    }
                    .c-publishedInfo-author{
                        display: flex;
                        align-items: center;
                        /*margin-left: 5px;*/

                        &:before{
                            content: "";
                            mask-image: url('../assets/images/icons/icon_calendar.svg');
                            width: 17px;
                            height: 16px;
                            mask-size: 100%;
                            background-color: var(--text-complemantary);
                            margin-right: 8px;
                        }
                        /*margin-left: 10px;*/
                    }
                }

                .c-article-content-header{
                    position: relative;
                    /*padding-right: calc(258px + 35px);*/
                    padding-left: 88px;

                    @media (max-width: 900px){
                        padding-left: 0;
                    }


                    .c-articleCategoryTag{
                        margin-top: 50px;
                    }
                    h1{
                        font-size: 50px;
                        font-family: "Merriweather", serif;
                        color: var(--text-primary-on-light);
                    }
                    .c-audioWave{
                        display: flex;
                        align-items: center;
                        column-gap: 2px;
                        height: 21px;
                        /*@keyframes audioWave {*/
                        /*    0% { height: 20%; }*/
                        /*    10% { height: 60%; }*/
                        /*    20% { height: 30%; }*/
                        /*    30% { height: 80%; }*/
                        /*    40% { height: 40%; }*/
                        /*    50% { height: 100%; }*/
                        /*    60% { height: 30%; }*/
                        /*    70% { height: 70%; }*/
                        /*    80% { height: 40%; }*/
                        /*    90% { height: 60%; }*/
                        /*    100% { height: 20%; }*/
                        /*}*/




                        &.playAudio{

                            .audioWave-bar{

                                animation: audioWave 1.2s infinite linear;
                                &:nth-child(1) { animation-delay: 0s; }
                                &:nth-child(2) { animation-delay: 0.15s; }
                                &:nth-child(3) { animation-delay: 0.3s; }
                                &:nth-child(4) { animation-delay: 0.45s; }
                                &:nth-child(5) { animation-delay: 0.6s; }
                                &:nth-child(6) { animation-delay: 0.75s; }
                                &:nth-child(7) { animation-delay: 0.9s; }
                            }
                        }
                        .audioWave-bar{
                            width: 3px;
                            height: 3px;
                            background-color: var(--surface-eleventh);
                            border-radius: 10px;
                            flex-shrink: 0;
                            transition: height 0.2s ease-in-out;

                            &:nth-child(1) {height: 50% }
                            &:nth-child(2) {height: 80%  }
                            &:nth-child(3) {height: 50% }
                            &:nth-child(4) {height: 80%  }
                            &:nth-child(5) {height: 50% }
                            &:nth-child(6) {height: 80%  }
                            &:nth-child(7) {height: 50% }
                        }
                    }

                    .c-button-audio{

                        background-color: var(--surface-secondary);
                        color: white;
                        font-size: 15px;
                        font-weight: 600;
                        display: inline-flex;
                        padding: 9px 13px;
                        border-radius: 5px;
                        cursor: pointer;
                        align-items: center;
                        height: 44px;
                        transition: background-color 0.2s ease-in-out;
                        margin-top: 15px;

                        &:hover{
                            background-color: var(--surface-eleventh);

                            .c-audioWave .audioWave-bar{
                                background-color: white;
                            }
                        }

                        &:before{
                            content: "";
                            mask-image: url('../assets/images/icons/icon_headphones.svg');
                            width: 19px;
                            height: 19px;
                            background-color: white;
                            margin-right: 12px;
                            mask-size: 100%;
                            mask-repeat: no-repeat;
                        }


                        .c-audioWave{
                            margin-left: 19px;
                        }


                    }

                    .c-readingTime{
                        display: flex;
                        align-items: center;
                        color: var(--text-complemantary);
                        font-size: 13px;
                        margin-top: 15px;

                        &:before{
                            content: "";
                            mask-image: url('../assets/images/icons/icon_watch.svg');
                            width: 19px;
                            height: 19px;
                            mask-size: 100%;
                            background-color: var(--text-complemantary);
                            margin-right: 6px;
                        }

                        .bold{
                            font-weight: 700;
                        }
                    }

                    .c-header-social-icons{

                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        /*justify-content: center;*/
                        position: absolute;
                        top: 66px;
                        left:0px;
                        /*background: red;*/
                        height: 100%;
                        /*align-items: center;*/
                        /*justify-content: flex-end;*/
                        /*margin-top: 14px;*/
                        /*row-gap: 25px;*/
                        /*column-gap: 10px;*/
                        /*flex-wrap: wrap;*/

                        @media (max-width: 900px){
                            position: static!important;
                            flex-direction: row!important;
                            margin-top: 14px!important;

                        }




                        .c-header-social-icon {
                            width: 32px;
                            height: 32px;
                            background-color: var(--surface-denary);
                            transition: background-color 0.2s ease-in-out;
                            /*margin-left: 10px;*/
                            mask-repeat: no-repeat;
                            mask-size: 100%;

                            &:hover {
                                background-color: var(--surface-primary);
                            }
                        }

                        .c-header-social-whatsapp{
                            mask-image: url("../assets/images/icons/icon_whatsappRoundedBg.svg");

                        }

                        .c-header-social-facebook {
                            mask-image: url("../assets/images/icons/icon_facebook.svg");
                        }

                        .c-header-social-instagram {
                            mask-image: url("../assets/images/icons/icon_instagram.svg");
                        }

                        .c-header-social-twitter {
                            mask-image: url("../assets/images/icons/icon_twitter.svg");
                        }

                        .c-header-social-tiktok {
                            mask-image: url("../assets/images/icons/icon_tiktok.svg");
                        }

                        .c-header-social-copy {
                            mask-image: url("../assets/images/icons/icon_RentangledCopy.svg");
                        }
                    }
                }

                .c-article-content{
                    margin-top: 39px;
                    display: flex;
                    column-gap: 35px;
                    @media (max-width: 900px){

                        column-gap: 25px;
                    }

                    @media (max-width: 768px){

                        flex-direction: column;
                    }



                    .c-article-left-column-content{
                        padding-left: 88px;

                        @media (max-width: 900px){
                            padding-left: 0px;
                        }


                        figure{
                            position: relative;
                            img.articleHeroImg{
                                border-radius: 10px;
                                height: 100%;
                                aspect-ratio: 2/1;
                                object-fit: cover;
                                width: 100%;

                            }
                            figcaption{
                                font-size: 12px;
                                color: var(--text-complemantary);
                            }
                        }
                        .c-article-summary{
                            font-size: 20px;
                            font-family: "merriweather", serif;
                            line-height: 29px;
                            color: var(--text-primary-on-light);
                            display: flex;
                            align-items: center;
                            column-gap: 20px;
                            text-align: right;
                            margin-top: 50px;
                            margin-bottom: 47px;
                            padding-bottom: 48px;
                            border-bottom: 1px solid var(--line-on-light);

                            &:before{
                                content: "";
                                mask-image: url('../assets/images/icons/icon_startExclamationMark.svg');
                                mask-size: 100%;
                                width: 71px;
                                height: 57px;
                                flex-shrink: 0;
                                background-color: var(--surface-secondary);
                                display: block;

                                @media (max-width: 580px) {
                                    width: 38px;
                                    height: 30px;
                                    align-self: flex-start;
                                }

                            }
                        }

                        .c-article-body{
                            h3, h3 strong, h2, h2 strong{
                                margin-top: 25px;
                                clear: both;
                                font-size: 23px;
                                font-family: "merriweather", serif;
                                line-height: 29px;

                            }

                            h2 strong, h3 strong{
                                font-weight: inherit;
                            }

                            p, h4, table{
                                margin-top: 18px;

                                .bold, strong{
                                    font-weight: 700;
                                    color: inherit;
                                }
                            }

                            ul, ol{
                                display: flex;
                                flex-direction: column;
                                row-gap: 15px;
                                margin-top: 18px;
                                padding-left: 25px;

                                li{
                                    &::marker{
                                        /*content:"* ";*/
                                    }
                                }
                            }

                            ul{
                                list-style: disc;
                            }
                            ol{
                                /*list-style: ;*/
                            }

                            hr{
                                margin: 25px 0;
                                color: var(--line-on-light);
                                border-width: 1px;
                            }

                            img{
                                object-fit: cover;
                                width: 100%;
                                @media (max-width: 580px) {
                                    float: none!important;
                                    margin:15px 0 0 0!important;
                                    width: 100% !important;
                                    max-width: 100% !important;
                                    height: auto!important;
                                    max-height: 200px;

                                }

                                &.float-left, &.float-right{
                                    width: 70%;
                                    max-width: 50%;
                                }

                                &.float-left{
                                    float: left;
                                    margin-top: 20px;
                                    margin-right: 20px;

                                }
                                &.float-right{
                                    float: right;
                                    margin-top: 20px;
                                    margin-left: 20px;
                                }

                            }
                        }



                        .c-bottom-article-buttons{
                            display: flex;
                            align-items: center;
                            justify-content: right;
                            column-gap: 10px;
                            margin-top: 82px;
                            border-bottom: 1px solid var(--line-on-light);
                            padding-bottom: 34px;

                            @media (max-width: 580px) {
                                margin-top: 25px;
                            }

                            button{

                            }
                        }
                        .c-questionsAboutArticle{
                            width: 100%;
                            background-image: url('../assets/images/bitmaps/whiteHouse.jpg');
                            background-size: cover;
                            padding: 57px 47px  76px;
                            border-radius: 10px;
                            overflow: hidden;
                            margin: 25px 0;

                            @media (max-width: 580px) {
                                padding: 25px;
                                border-radius: 0;

                                .c-questionsAboutArticle-content{
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    text-align: center;
                                    max-width: 100% !important;
                                    padding:25px 10px!important;
                                }
                            }

                            .c-questionsAboutArticle-content{
                                width: 100%;
                                max-width: 380px;
                                background: white;
                                border-radius: 5px;
                                padding:25px 36px;
                                border: 1px solid var(--line-on-light);
                                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.32);

                                h4{
                                    color: #17214D;
                                    font-family: "Merriweather", serif;
                                    font-size: 23px;
                                    line-height: 30px;
                                }

                                h5{
                                    margin-top: 5px;
                                    font-size: 18px;
                                    font-family: "Merriweather", serif;
                                    /*color: #17214D;*/
                                    color: #50638B;
                                }

                                a.button{
                                    margin-top: 20px;

                                }

                            }

                        }
                    }

                    .c-article-right-column-content{
                        width: 100%;
                        /*max-width: 263px;*/
                        min-width: 263px;
                        padding-bottom: 25px;

                        @media (max-width: 900px) {
                            min-width: 200px;
                            width: 200px;

                        }

                        @media (max-width: 768px){

                            min-width: 100%;
                            width: 100%;
                        }



                        .c-articleSuggestions{
                            display: flex;
                            flex-direction: column;
                            row-gap: 10px;
                            /*margin-top: 25px;*/

                            h6{
                                font-family: "Merriweather", serif;
                                font-size: 14px;
                                text-transform: uppercase;
                                color: var(--text-tertiary-on-light);
                                /*border-top : 1px solid var(--line-on-light);*/
                                border-bottom : 1px solid var(--line-on-light);
                                padding-bottom: 13px;

                            }
                            a.c-articleSuggestions-item{
                                display: flex;
                                align-items: center;
                                border-bottom: 1px solid var(--line-on-light);
                                padding-bottom: 10px;

                                &:hover{
                                    img{
                                        filter: grayscale(100%);
                                    }

                                    span{
                                        color: var(--text-accent-primary);
                                    }

                                }


                                img{
                                    width: 45px;
                                    height: 45px;
                                    object-fit:cover;
                                    border-radius: 10px;
                                    flex-shrink: 0;
                                    transition: 0.2s ease-in-out;

                                    @media (max-width: 900px){
                                        display: none;
                                    }

                                    @media (max-width: 768px){
                                        display: inherit;
                                        width: 65px;
                                        height: 65px;
                                    }


                                }

                                span{
                                    font-family: "Merriweather", serif;
                                    font-size: 13px;
                                    color: var(--text-tertiary-on-light);
                                    margin-left: 10px;
                                    line-height: 20px;
                                    font-weight: 600;
                                    transition: 0.2s ease-in-out;

                                    @media (max-width: 900px){
                                        margin-left: 0;
                                    }

                                    @media (max-width: 768px){
                                        margin-left: 10px;
                                        font-size: 15px;
                                        line-height: 25px;
                                    }
                                }
                            }


                        }

                        .c-articleTags{

                            background-color: var(--surface-senary);
                            margin-top: 25px;
                            margin-bottom: 25px;
                            h6{
                                font-family: "Merriweather", serif;
                                font-size: 14px;
                                text-transform: uppercase;
                                border-bottom : 1px solid var(--line-on-light);
                                color: var(--text-tertiary-on-light);
                                padding: 13px 25px;
                            }

                            ul{
                                display: flex;
                                flex-direction: column;
                                align-items: stretch;
                                row-gap: 15px;
                                padding: 13px 25px 25px;

                                @media (max-width: 768px){
                                    gap: 20px!important;
                                }
                                li{
                                    &:hover{
                                        color: var(--text-accent-primary);
                                    }
                                    a{
                                        font-size: 15px;
                                        font-weight: 500;
                                        transition: color 0.2s ease-in-out;
                                        /*width: 100%;*/
                                        display: block;
                                        text-decoration: underline;

                                        @media (max-width: 768px){
                                            font-size: 15px;
                                            gap: 10px;
                                        }

                                    }
                                }
                            }
                        }
                    }




                }
            }

        }
        }


}


.showTableOfContents{
    background-color: var(--surface-tertiary);
    color: white;
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
    width: 110px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    height: 33px;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color, bottom 0.2s ease-in-out;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    z-index: 3;
    display: none;
    /*padding: 0 15px;*/

    @media (max-width: 728px){
        display: flex;
    }



    &.hide{
        bottom: -33px;
    }
    &:after{
        content: '';
        /*position: absolute;*/
        mask-image: url("../assets/images/icons/icon_arrowDown.svg");
        width: 15px;
        height: 8px;
        background-color: white;
        mask-size: 100%;
        mask-repeat: no-repeat;
        display: block;
        margin-left: 5px;
        transform: rotate(180deg);

    }
}
.c-tableOfContents-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 3;

    display: none;

    @media (max-width: 728px){
        display: flex;
    }


    &.hide{
        display: none;
    }
}

section.c-plans-tables{

    padding: 0 50px 50px 50px;

    @media (max-width: 728px){
        padding: 0 25px 25px;
    }

    h2, h5{
        text-align: center;
    }


    .c-s-plans-tables{
        display: flex;
        justify-content: center;
        column-gap: 25px;
        row-gap: 25px;
        margin-top: 50px;
        /*flex-wrap: wrap;*/

        @media (max-width: 728px){
            flex-direction: column;
            align-items: center;
        }

        .c-plan-table{
            background-color: var(--surface-quartery);
            border-radius: 20px;
            padding-top: 45px;
            width: 100%;
            max-width: 393px;
            display: flex;
            flex-direction: column;

            @media (max-width: 728px){
                padding-top: 40px;
            }

            &.c-plan-table-1{
                .c-price, li:before{
                    background-color: var(--surface-secondary);
                }

                .c-old-price {
                    color: var(--text-accent-secondary-dark);
                }
            }


            &.c-plan-table-2{
                .c-price, li:before{
                    background-color: var(--surface-primary);
                }

                .c-old-price {
                    color: var(--text-accent-primary-dark);
                }
            }

            h3{
                font-size: 23px;
                font-family: "Merriweather", serif;
                color: var(--text-primary-on-dark);
                padding: 0 38px;
                letter-spacing: 1px;
                font-weight: 900;
                /*text-align: center;*/

                @media (max-width: 728px){
                    padding: 0 25px!important;
                }
            }

            .c-price{
                margin-top: 14px;
                padding: 10px 38px;
                background-color: var(--surface-secondary);
                display: flex;
                align-items: center;
                column-gap: 20px;
                row-gap: 5px;
                flex-wrap: wrap;
                justify-content: center;



                @media (max-width: 728px){
                    padding: 10px 25px!important;
                }

                @media (max-width: 400px){
                    flex-direction: column;
                }

                .c-old-price{

                    .old-price{
                        font-family: "Merriweather", serif!Important;
                        font-size: 20px;
                        font-weight: bold;
                        text-decoration: line-through;
                        display: block;
                    }

                    .c-old-price-comment{
                        font-family: "Merriweather", serif!Important;
                        font-weight: bold;
                        font-size: 11px;
                        text-decoration: none!important;
                        display: block;
                        margin-top: -20px;
                    }

                }



                .c-current-price{

                    color: white;
                    font-family: "Merriweather", serif;
                    font-size: 37px;
                    font-weight: bold;

                    .c-price-currency{
                        font-family: "Merriweather", serif;
                        font-size: 21px;

                    }

                }


            }

            ul{
                display: flex;
                flex-direction: column;
                row-gap: 30px;
                padding: 35px 44px;

                @media (max-width: 728px){
                    padding: 25px!important;
                }
                li{
                    font-size: 16px;
                    color: #EAEEFF;
                    font-weight: 500;
                    display: flex;

                    /*align-items: center;*/

                    &:before{
                        content: "";
                        mask-image: url('../assets/images/icons/icon_checkmark_rounded.svg');
                        mask-size: 100%;
                        width: 22px;
                        height: 22px;
                        background-color: var(--surface-secondary);
                        margin-right: 18px;
                        flex-shrink: 0;
                        margin-top: -1px;
                    }

                    &.featured{
                        &:before{
                            mask-image: url('../assets/images/icons/icon_checkmark_curvyRounded.svg');

                        }
                    }
                }
            }

            .c-plan-cta-section{
                border-top: 1px solid #26336C;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20px 44px;
                row-gap: 10px;
                margin-top: auto;

                @media (max-width: 728px){
                    padding: 25px!important;
                }

                span{
                    font-size: 14px;
                    color: var(--text-secondary-on-dark);
                }

                a {
                    width: 100%;
                    button{
                        width: 100%;
                    }
                }
            }
        }
    }

}