section:nth-child(1) {
    background-image: linear-gradient(0deg,var(--color-metro),#fcfcff);
}

section:nth-child(2) {
    background-image: linear-gradient(180deg,var(--color-metro),#feeff8);
}

section:nth-child(3) {
    background-image: linear-gradient(0deg,var(--color-metro),#ffeff8);
}

section:nth-child(4) {
    background-image: linear-gradient(180deg,var(--color-metro),#ffeff8);
}

section:nth-child(5) {
    background-image: linear-gradient(0deg,var(--color-metro),#ffeff8);
}

section:nth-child(6) {
    padding-bottom: 10rem;
    background-image: linear-gradient(180deg,var(--color-metro),#fcfcff);
}

section {
    min-height: 50vh;
    padding: 3rem 0;
}

    section > * {
        max-width: 1294px;
        margin: 0 auto;
    }

    section > p {
        font-size: 1.4em;
        margin-bottom: 3rem;
    }

    section.centerd {
        text-align: center;
        padding: 5rem 1rem;
    }

.sec-btn {
    margin-top: 2rem;
}

.cta-button {
  /* make it sticky */
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  padding: 1.5rem;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.cta-button  .btn{
    font-size: 1.2em;
}

h2 {
    font-size: 1.6em;
    text-align: center;
    margin-bottom: 0.05em;
    color: black;
}

.pic-text {
    display: inline-flex;
    justify-content: center;
    gap: 6rem;
    align-items: center;
    margin: 0 auto;
}

    .pic-text .text-center {
        max-width: 35rem;
    }


    .pic-text .image-wrap {
        text-align: center;
        display: inline-flex;
        align-items: flex-end;
        justify-content: center;
        /* flex:1; */
    }

main, .container-fluid {
    padding: 0;
    font-size: 18px;
}

amain > .container-fluid + footer{
    margin:0;
}

.cat-head{
    text-align:center;
    margin-bottom: 4rem;
}
section.category{
    padding-top:3rem ;
}

    section.category nav {
        margin-bottom: 2rem;
        max-width: 1059px;
    }


    .category .pic-text {
        /* margin: 0 auto; */
        /* margin-top:15vh; */
        /* display: flex; */
        /* overflow: hidden; */
        /* justify-content: center; */
    }

    .category > * {
        flex: 1 1 40%;
    }


.category h1 {
    margin-bottom: 0;
    font-weight: bold;
    /* margin-bottom: 3rem; */
    font-size: 2.8em;
    color: var(--color-accent);
}

        .category h1 + h4{
            margin-top:0;
            font-size: 1.3em;
            font-weight: 500;
        }

    .category .pic-text{
        flex-wrap:wrap;
    }

    .category .text-center {
        width: 100%;
        max-width: 25rem;
        /* color: #686881; */
    }

    .category img {
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(3px -5px 5px #22222248);
        max-width: 45vw;
        width: 23rem;
        border-radius: 8px;
        z-index: 0;
    }

.category .btn {
    width: 100%;
    font-size: 24px;
    margin: 1rem 0;
    padding: .25em 1em;
}

.category i{
    /* font-size:2.5rem; */
}

.category .buttons {
    display: flex;
    gap: 1rem;
    white-space: nowrap;
    justify-content:center;
}

    .category .buttons .btn{
        width:unset;
        display: flex;
        gap: 0.2rem;
        align-items: center;
    }
    .category .buttons i {
        font-size: 21px;
    }
    /*#region factorz */
    .factorz > ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem 1rem;
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
    }

    .factorz > ul > li {
        display: flex;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        padding: 1.5rem 1rem;
        gap: 1rem;
        /* width: 10rem; */
        flex: 0 1 10rem;
        flex-grow: 0;
        /* margin: .5rem; */
        background: #ffffff;
        border-radius: 8px;
        font-size: 1.1rem;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        position: relative;
        /* height: 9rem; */
    }



.factorz .score-consd label {
    font-size: 0.8em;
}

.factorz .score-consd {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 0px 0px 10px;
    gap: 5px;
    background: #EDEDFF;
    border-radius: 22px;
}

.factorz + h3 {
    margin-top: 4rem;
}

.factorz + h2 {
    margin-top: 3rem;
}

.diffs.mobile .important,
.factorz .important {
    position: absolute;
    top: -.5em;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
}

.factorz > ul > li.consd-card {
    padding: 0;
}

.consd-card a {
    color: initial;
    display: block;
    width: 100%;
    padding: 1.5rem 1rem;
    text-decoration: none;
}

    .consd-card a > img {
        height: 2.5rem;
    }

.altr-name{
    justify-content:center;
}

.consd-card h4 {
    font-size: inherit;
    flex: 1;
    margin: .5rem 0 0;
    /* color: var(--color-link); */
    text-decoration: none;
}

[data-toconsd]:hover:not(.link),
[data-toconsd].selected:not(.link) {
     background: #e0e0ff; 
     cursor: pointer; 
}


/*#region factor desc */
.consd-card.expand .desc {
    position: fixed;
    top: 0;
    background: white;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 2rem auto;
    max-width: 50rem;
    padding: 0 2rem 2rem;
    text-align: right;
    box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.25);
    overflow: auto;
}

.consd-card:not(.expand) .desc {
    display: none;
}

.desc .post img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.desc .consd-icon {
    max-height: 1.6em;
}

.desc h5 {
    font-size: 1rem;
    color: #8081E5;
}

    .desc h5 + p {
        margin-top: -.5rem;
        font-size: 0.9em;
        margin-bottom: .5rem;
    }

.desc p + h5 {
    margin-top: 1rem;
}

.desc > :first-child {
    margin-bottom: 1.6rem;
    position: sticky;
    top: 0;
    padding: 2rem 0 8px;
    background: white;
}

.desc h3 {
    font-size: 1.4em;
}

.desc .edit-post {
    display: none;
}

.desc .closeInfo {
    font-size: 1.1rem;
}

.desc .legend-list {
    margin-bottom: 1rem;
}

    .desc .legend-list li {
        margin-right: 0.5rem;
        list-style: inside;
    }

        .desc .legend-list li label {
            font-weight: 500;
        }

        .desc .legend-list li > span {
            line-height: 1.1;
            font-size: 0.8em;
            color: gray;
            display: inline-block;
            margin-right: .25rem;
        }

[data-toconsd]:not(:hover) .short-desc {
    margin-top: -130%;
}

.short-desc {
    transition: 0.4s;
    position: absolute;
    right: 0;
    height: 100%;
    opacity: 0.95;
    width: 100%;
    display: flex;
    background: #e0e0ff;
    padding: .5rem;
    align-items: center;
    justify-content: center;
    top: 0;
    margin-top: 0;
    font-size: 0.9em;
    font-weight: 500;
}

/*#endregion */
/*#endregion */


/*#region intent-options */
.intent-options {
    
padding: 1rem 1rem;
    
border-radius: 7px;
    
/* background: white; */
    
text-align: right;
    
/* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); */
}
.intent-options .btn {
    margin: 0;
}

    .intent-options > label {
        /* font-size: 1.1em; */
        font-weight: bold;
        position: relative;
        white-space: nowrap;
        line-height: 1;
        margin-bottom: 0.7rem;
        display: block;
    }

/*#endregion */
/*#region 3 items section */
.icon-bullets {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .icon-bullets h2 {
        margin-bottom: 45px;
    }

    .icon-bullets > ul {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

        .icon-bullets > ul li {
            /* background: #fceef8; */
            border-radius: 8px;
            width: -moz-fit-content;
            width: fit-content;
            padding: 2rem;
            margin-bottom: 1rem;
            max-width: 20rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 19px;
            box-shadow: 0px -10px 13px 3px rgba(0, 0, 0, 0.05);
        }

            .icon-bullets > ul li img {
                font-size: 6rem;
                width: 1em;
                height: 1em;
                -o-object-fit: cover;
                object-fit: cover;
                max-width: 100%;
            }

            .icon-bullets > ul li h4 {
                margin: 0;
            }

            .icon-bullets > ul li p {
                text-align: center;
            }
/*#endregion */

/*#region iframe */
.iframe-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 2rem;
    gap:5rem;
    margin-bottom:2rem;
}
    .iframe-wrap h3 {
        font-size: 1.2em;
    }

    .iframe-wrap .text-center {
        max-width: 20rem;
        font-size: 1.2em;
        margin-bottom: 3rem;
    }
iframe {
    width: 30rem;
    height: 25rem;
    overflow: auto;
    /*box sahdow*/
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
    iframe header {
        display: none !important;
    }


/*#endregion */
/*#region MoreAlter */
#more-alters-sec {
    /* padding-top:3rem; */
}

#moreAlters {
    display: flex;
    justify-content: center;

    overflow: auto;
    padding: 1rem 3px;
}

    #moreAlters .alters {
        display: flex;
        gap: 1rem;
        /* padding: 0 1rem; */
        align-items: stretch;
    }

        #moreAlters .alters .alter {
            box-sizing: border-box;
            display: inline-flex;
            flex-direction: column;
            padding: 1rem 1rem;
            background: #FFFFFF;
            cursor: pointer;
            border: none;
            border-radius: 7px;
            order: 3;
            align-items: center;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
            flex: 1 0 10rem;
            font-size: 16px;
            justify-content: space-between;
            min-width: 10rem;
            max-width: 11rem;
        }

#more-alters-sec .alters > div {
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    /*align-items: center;*/
}

#moreAlters .alter .card-img {
    flex: 0 1 13rem;
    width: unset;
    background: white;
    position: relative;
    display: block;
    text-align: center;
    /* padding: 2rem; */
}

#moreAlters .alter .card-body {
    flex: 1 1 100%;
    padding-bottom: 0;
    padding-top: .5rem;
}

#moreAlters .alter h3 {
    font-size: inherit;
    text-align: center;
    color: black;
    margin: 0;
}


#moreAlters .alter img {
    height: 5rem;
}

#moreAlters .alter .score-box {
    font-size: 16px;
    top: .5rem;
    position: absolute;
    right: 1rem;
}

#moreAlters .alter.more {
    background: none;
    box-shadow: none;
    justify-content: center;
}

#moreAlters .more-alters-cta {
    /* width: 100%; */
    max-width: 10rem;
    margin-top: 2rem;
    justify-content: end;
    align-items: center;
    text-align: center;
    padding: 0.8rem 1rem;
}

#moreAlters .more-alters-link {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 1.1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
}

#moreAlters .more-alters-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

#moreAlters .more-alters-link i {
    font-size: 0.9em;
}

/*#endregion */
@media only screen and (min-width: 667px) {
    .iframe-wrap.rev {
        flex-direction: row-reverse;
    }
    .category {
        display:flex;
        flex-wrap:wrap;
        align-items: center;
    }

        .category nav,
        .category .cat-head {
            flex:1 1 100%;
            max-width: unset;
        }

        .category .image-wrap {
            max-width: 20rem;
            margin-right: 5rem;
        }
        .category .text-center{
            margin:0;
            margin-right:auto;
            flex:1;
            padding:0;
        }
    }

    @media only screen and (max-width: 667px) {
        .category {
            flex-direction: column;
            padding: 1rem 1rem 0;
            margin-top: 0vh;
        }

            .category > * {
                flex: 1 1 100%;
                /* margin-bottom: 2rem; */
            }

            .category img {
                max-width: 100%;
                width: 100%;
            }

        .cta-button {
            padding: 1rem;
        }
        .icon-bullets > ul{
            gap:1rem;
        }
        main p {
            font-size: 20px !important;
        }
        .consd-card a {
            padding: 1rem;
        }
        .consd-card a > img {
            height: 2.2rem;
        }
        .consd-card h4 {
            font-size: 18px;
            margin: 0;
        }

        h2 {
            font-size: 1.5em;
            margin-bottom: 1rem !important;
        }

        [q-start] {
            width: 100%;
            font-size: 20px;
            margin: 1rem 0;
        }

        .category-image {
            text-align: center;
            display: inline-flex;
            align-items: flex-end;
            justify-content: center;
        }

        .pic-text {
            flex-direction: column-reverse;
            gap: 2rem;
        }

        .factorz > ul {
            gap: 1rem 1rem;
        }

            .factorz > ul > li {
                flex: 1 1 calc(50% - .5rem);
            }

        .consd-card.expand .desc {
            max-width: unset;
            margin: 0;
        }

        .icon-bullets > ul li {
            max-width: 100%;
            margin: 1rem 1rem 0;
            padding: 2rem 1rem 0;
        }

        section.centerd {
            padding: 2rem 1rem;
        }

        #moreAlters {
            justify-content: start;
        }

        #moreAlters .more-alters-cta {
            display: none !important;
            width: 100%;
            margin-top: 1.5rem;
            padding: 0 1rem;
        }

        #moreAlters .more-alters-cta.show {
            display: inline-flex !important;
            white-space: nowrap;
        }

        #moreAlters .more-alters-link {
            font-size: 1em;
        }

        .category .buttons {
            flex-direction: column;
            max-width: 15rem;
            margin-bottom: 2rem;
        }

            .category .buttons .btn {
                margin: 0;
                justify-content: center;
            }

        .icon-bullets {
            padding: 1rem 0 2rem;
        }

        .iframe-wrap {
            flex-direction: column;
            padding: 0;
            gap: 1rem;
        }

        /*.iframe-wrap h3 {
            font-size: 1.4em;
        }*/

        iframe {
            width: 100%;
            height: 50vh;
        }

        .iframe-wrap .text-center {
            margin-bottom: 0;
            max-width: 100%;
        }

        .iframe-wrap{
            margin-top:3rem;
        }

        header {
            margin-bottom: 0;
        }

        .category {
            display: flex;
            flex-direction: column;
            padding-top: 0 !important;
            position: relative;
        }




            .category h1 {
                font-size: 36px;
            }

            .category > p {
                margin-bottom: 2rem;
            }


            .category .image-wrap {
                position: relative;
                margin: 0 -1rem;
                z-index: 0;
                max-height: 30vh;
                width: calc(100% + 2rem);
            }

                .category .image-wrap:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    /*background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 80%);*/
                    background: rgba(0, 0, 0, 0.5);
                    z-index: 1;
                    order: 1;
                }

                .category .image-wrap img {
                    border-radius: 0;
                    filter: none;
                    object-fit: cover;
                    max-height: 30vh;
                }

            .category .cat-head {
                position: absolute;
                z-index: 2;
                color: white;
                /* margin-top: 8vh; */
                /* max-width:90vw; */
                padding: 1rem 2rem;
                /* width: 100%; */
                right: 0;
                left: 0;
                height: 30vh;
                display: flex;
                order: 2;
                justify-content: center;
                align-items: center;
            }

          

            .category h1 {
                color: white !important;
                /*font-size: 24px;*/
            }

        .cat-head h4 {
            font-size: 18px !important;
        }

        .category .btn {
            margin-bottom: 0;
            margin-top: .5rem;
        }

        section.category nav {
            order: 3;
            margin: 1rem 0;
        }

        .category .text-center {
            order: 4;
        }
                /*.category .image-wrap {
                    position: absolute;
                    top: 1rem;
                    z-index: 0;
                    box-shadow: none;

                }

               

               


                .category .text-center {
                    z-index: 1;
                    color:white;
                }
       */
    }