.banner {
        display: flex;
        align-items: center;
        background-image: url('../images/trendbanner.jpeg');
        background-size: cover;
        background-position: center;
        justify-content: center;
        height: 50vw;
        width: 100%;
        overflow: hidden;
    }

    .banner-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        position: absolute;
        left: 200px;
        z-index: 1;
    }

    .banner-text h5 {
        font-size: 3vw;
        color: #A50100;
        margin: 0;
        margin-right: 300px;
        font-family: "josefin sans", sans-serif;
    }

    .banner-text h1 {
        font-size: 6.5vw;
        text-transform: uppercase;
        color: #fff;
        margin: 0;
    }

    .banner-image {
        width: 40%;
        border: 2px solid #A50100;
        position: absolute;
        right: 260px;
    }

    .banner-image img {
        max-width: 100%;
        height: auto;
    }

    .content {
        display: flex;
        flex-direction: column;
        margin: 60px 50px;
        gap: 30px;
        overflow: hidden
    }

    .trending {
        display: flex;
        flex-direction: column;
        gap: 50px;

    }

    h3 {
        text-transform: uppercase;
        margin: 5px 0;
        margin-left: 20px;
        font-size: 4vw;
        font-weight: 500;
        font-family: "josefin sans", sans-serif;
        color: #A50100;
    }

    .clothing {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 2vw;
    }

    .clothing1 {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 60%;
    }

    .clothing1-top {
        display: flex;
        flex-direction: column;
        position: relative;
        height: 30%;
        padding-top: 30px;
    }

    .clothing-title {
        padding: 0 50px;
        margin: 30px 60px;
    }

    h2 {
        font-size: 2.7vw;
        font-weight: 500;
        text-transform: uppercase;
    }

    .clothing-title h2 {
        text-align: right;
    }

    .border-line {
        width: 80%;
        border-bottom: 2px solid #A50100;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .border-line-2 {
        height: 130%;
        border-right: 2px solid #A50100;
        position: absolute;
        top: 60px;
        right: 50px;
    }

    .clothing1-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .clothing1-image {
        width: 55%;
    }

    .clothing1-text {
        width: 45%;
        position: relative;
    }

    h4 {
        font-size: 1vw;
        font-weight: 500;
    }

    .clothing1-text h4 {
        padding-left: 5px;
        padding-bottom: 5px;
        position: absolute;
        bottom: 0;
    }

    .clothing1-text h4::after {
        content: '';
        display: block;
        width: 180%;
        height: 1px;
        background-color: #A50100;
        margin-top: 5px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .clothing2 {
        display: flex;
        flex-direction: column;
        width: 38%;
    }

    .clothing img {
        max-width: 100%;
        height: auto;
        margin-bottom: 1em;
    }

    .clothing2-text {
        display: flex;
        justify-content: right;
        width: 80%;

    }

    .clothing2-text h4 {
        font-size: 1vw;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }

    .clothing2-text h4::after {
        content: '';
        display: block;
        width: 160%;
        height: 1px;
        background-color: #A50100;
        margin-top: 5px;
    }

    .clothing1-mobile-text {
        display: none;
    }

    .accessories {
        display: flex;
        flex-direction: row;
        border-top: 2px solid #A50100;
    }

    .accessories1 {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

    .accessories img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .accessories2 {
        display: flex;
        flex-direction: column;
        width: 50%;
        position: relative;
    }

    .accessories-title {
        margin: 30px 0px;
    }

    .accessories-title h2 {
        text-align: right;
        margin: 10px 0px;
    }

    .acc2 {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 35%;
        left: 40%;
    }

    .clothing2-text h4 {
        font-size: 1vw;
        font-weight: 500;
    }

    .acc2 h4::after {
        content: '';
        display: block;
        width: 75%;
        height: 1px;
        background-color: #A50100;
        margin-top: 5px;
    }

    .accessories2-image img {
        width: 50%;
        max-width: 100%;
        height: auto;
    }

    .accessories2-text2 {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 20px;
    }

    .accessories1-mobile-text {
        display: none;
    }

    .accessories1-mobile-text h4 {
        margin: 10px 0;
        padding: 0;
    }

    .accessories1-mobile-text h4::after {
        content: '';
        display: block;
        width: 55%;
        height: 1px;
        background-color: #A50100;
        margin-top: 5px;

    }

    .accessories2-text2 h4 {
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
    }

    .accessories2-text2 h4::after {
        content: '';
        display: block;
        width: 160%;
        height: 1px;
        background-color: #A50100;
        margin-top: 5px;
        position: absolute;
        left: -20px;
        bottom: 0;
    }

    .colors-and-patterns {
        display: flex;
        height: 32.3vw;
        position: relative;
    }

    .cnp-title {
        position: absolute;
        bottom: 0;
        text-align: left;
        width: 35.2%;
    }

    .cnp-title h2 {
        border-bottom: 2px solid #A50100;
    }

    .cnp-layout {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
        height: 30vw;
        position: absolute;
        top: 0;
        right: 0;
    }

    .cnp-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }


    .cnp-item .img1 {
        grid-column: 1;
        grid-row: 1;
        background-color: #800000;
    }

    .cnp-item .img2 {
        grid-column: 3;
        grid-row: 1;
        background-color: #FCF1B8;
    }

    .cnp-item .img3 {
        grid-column: 5;
        grid-row: 1;
        background-color: #5B7C99;
    }

    .cnp-item .img4 {
        grid-column: 2;
        grid-row: 2;
        background-image: url('../images/plaid.jpeg');
        background-size: cover;
        background-position: center;
    }

    .cnp-item .img5 {
        grid-column: 4;
        grid-row: 2;
        background-image: url('../images/floral.jpeg');
        background-size: cover;
        background-position: center;
    }

    .cnp-item .img1,
    .cnp-item .img2,
    .cnp-item .img3,
    .cnp-item .img4,
    .cnp-item .img5 {
        width: 15vw;
        height: 15vw;
    }

    .cnp-item p {
        margin: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        margin-right: 25px;
        text-align: right;
        width: 100%;
        position: relative;
    }

    .cnp-item:nth-child(2),
    .cnp-item:nth-child(4) {
        align-self: flex-end;
        justify-self: flex-end;
    }

    .mobile-runway-flip {
        display: none;
    }

    .runway {
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .runway h3 {
        text-align: center;
        margin: 70px;
    }

    .runway-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    .runway-side,
    .reallife-side {
        width: 45%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .runways,
    .reallifes {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
    }

    .runways {
        justify-content: right;
    }

    .reallifes {
        justify-content: left;
        flex-direction: row-reverse;
    }

    .flip {
        display: none;
    }

    .runway-image,
    .reallife-image {
        text-align: center;
        width: 65%
    }

    .runway-image img,
    .reallife-image img {
        max-width: 100%;
        height: auto;
    }

    .runway-text,
    .reallife-text {
        transform: rotate(180deg);
        writing-mode: vertical-rl;
        height: 60%;
    }

    .runway-text h4,
    .reallife-text h4 {
        font-size: 1.1vw;
        font-weight: 500;
    }

    .divider {
        background-color: #A50100;
        width: 1.6px;
        height: auto;
        align-self: stretch;
    }

    .trending-revivals {
        margin-top: 100px;
        overflow: hidden;
    }

    .trending-revivals-content {
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin: 50px 0 10px;
    }

    .trending-revivals h3 {
        text-align: left;
        margin-left: 20px;
    }

    .y2k,
    ._90s,
    ._80s,
    .grunge {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }

    .y2k,
    ._80s {
        padding-left: 15vw;
    }

    ._90s,
    .grunge {
        padding-right: 15vw;
    }

    ._90s-image .text {
        margin-bottom: 30px;
    }

    .one {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2vw;
        width: 50%;
    }

    .two {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 30%;
    }

    .text {
        margin-bottom: 35px;
    }

    .text h4 {
        font-size: 2vw;
        margin: 0;
        margin-bottom: 20px;
    }

    .text p {
        font-size: 1.1vw;
        line-height: 25px;
        word-spacing: 4px;
        text-align: justify;
    }

    .images {
        display: flex;
        flex-direction: row;
        gap: 70px;
        width: 40%;
    }

    .images img {
        max-width: 100%;
        height: auto;
    }

    .back-next {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
    }

    .back {
        width: 50%;
        display: flex;
        justify-content: start;
    }

    .back a {
        display: flex;
        justify-content: start;
        flex-direction: row-reverse;
        align-items: center;
        text-decoration: none;
        gap: 5px;
        padding-left: 40px;
        margin: 10px 0;
    }

    .back img {
        width: 35%;
        rotate: 180deg;
    }

    .back p {
        font-size: 15px;
        font-family: "lexend";
        text-transform: uppercase;
        color: black;
    }

    .next {
        width: 50%;
        display: flex;
        justify-content: end;
    }

    .next a {
        display: flex;
        justify-content: end;
        align-items: center;
        text-decoration: none;
        gap: 5px;
        padding-right: 40px;
        margin: 10px 0;
    }

    .next img {
        width: 35%;
    }

    .next p {
        font-size: 15px;
        font-family: "lexend";
        text-transform: uppercase;
        color: black;
    }

    @media (max-width: 1200px) {
        h4 {
            font-size: 1.3vw;
        }

        .clothing2-text h4 {
            font-size: 1.3vw;
        }

        .clothing2-text h4::after {
            width: 145%;
        }

        .runway-text h4,
        .reallife-text h4 {
            font-size: 1.3vw;
        }

        .text p {
            line-height: 20px;
            word-spacing: 3px;
        }

        .text {
            margin-bottom: 15px;
        }

    }

    @media (max-width: 1100px) {
        .text p {
            font-size: 1.3vw;
        }

        .text {
            margin-bottom: 0px;
        }

        .one {
            gap: 0.5vw;
        }

    }

    @media (max-width: 768px) {
        .banner-text {
            width: 90%;
            left: 30px;
        }

        .banner-text h5 {
            font-size: 5vw;
            margin-right: 200px;
        }

        .banner-text h1 {
            font-size: 10vw;
        }

        .banner-image {
            right: 60px;
        }

        .content {
            display: flex;
            flex-direction: column;
            margin: 30px 20px;
            gap: 30px;
        }

        .trending {
            gap: 30px;
        }

        h3 {
            font-size: 5vw;
            margin-left: 10px;
        }

        h2 {
            font-size: 4.5vw;
        }

        .clothing2-text h4 {
            font-size: 2.5vw;
        }

        h4 {
            font-size: 2.5vw;
        }

        .clothing1 {
            width: 50%;
            gap: 50px;
        }

        .clothing-title {
            margin: 10px;
            margin-top: 100px;
            margin-bottom: 0;
            padding: 0 40px;
        }

        .clothing1-top h2 {
            margin: 0;
        }

        .clothing1-image {
            width: 80%;
        }

        .clothing1-text {
            display: none;
        }

        .clothing2 {
            width: 50%;
            position: relative;
        }

        .clothing2-image {
            width: 110%;
            position: absolute;
            left: -10%;
        }

        .clothing2-text {
            width: 100%;
            position: absolute;
            top: 50%;
        }

        .clothing2-text h4::after {
            width: 100%;
        }

        .clothing1-mobile-text {
            display: block;
            position: absolute;
            bottom: 10px;
            left: -17%;
        }

        .clothing1-mobile-text h4::after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            margin-top: 5px;
            background-color: #A50100;
            position: absolute;
            left: -10px;
            bottom: 20;
        }

        .border-line {
            width: 80%;
            border-bottom: 2px solid #A50100;
            position: absolute;
            right: 0;
            bottom: -45px;
        }

        .border-line-2 {
            height: 100%;
            border-right: 2px solid #A50100;
            position: absolute;
            top: 120px;
            right: 50px;
        }

        .accessories {
            height: 60vw;
        }

        .acc2 {
            position: absolute;
            bottom: 0;
            right: 0;
            flex-direction: column-reverse;
        }

        .acc2 h4::after {
            width: 100%;
        }

        .accessories2-image img {
            width: 90%;
        }

        .accessories2-text2 {
            display: none;
        }

        .accessories1-mobile-text {
            display: block;
        }


        .colors-and-patterns {
            flex-direction: column;
            height: 400px;
            margin-top: 30px;
        }

        .cnp-title {
            width: 60%;
            border-top: 2px solid #A50100;
        }

        .cnp-title h2 {
            border-bottom: none;
            margin: 0;
            margin-top: 10px;
        }

        .cnp-layout {
            width: 100%;
            height: 290px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .cnp-item .img1,
        .cnp-item .img2,
        .cnp-item .img3,
        .cnp-item .img4,
        .cnp-item .img5 {
            width: 18vw;
            height: 18vw;
        }

        .runway-side {
            width: 55%;
            justify-content: center;
            gap: 50px
        }

        .reallife-side {
            display: none;
        }

        .runway h3 {
            margin: 40px;
        }

        .runways {
            flex-direction: column-reverse;
            align-items: center;
            gap: 5px;
        }

        .flip {
            display: flex;
            position: absolute;
            bottom: 2px;
            right: -1px;
            width: 60px;
        }

        .runway-image {
            width: 100%;
            position: relative;
        }

        .runway-text {
            transform: rotate(0);
            writing-mode: horizontal-tb;
            height: auto;
            text-align: center;
            width: auto;
        }

        .runway-text h4 {
            font-size: 2.5vw;
            text-align: justify;
        }

        .divider {
            display: none;
        }

        .trending-revivals-content {
            gap: 80px;
            margin: 60px 50px;
        }

        .y2k,
        ._90s,
        ._80s,
        .grunge {
            flex-direction: column-reverse;
            padding-left: 0px !important;
            padding-right: 0px !important;
            align-items: center;
        }

        .one {
            width: 100%;
            gap: 10px;
        }

        .two {
            width: 60%;
        }

        .text h4 {
            font-size: 4vw;
            margin-bottom: 10px;
            text-align: left;
        }

        .text p {
            font-size: 2.5vw;
            line-height: 1.5;
            word-spacing: 1px;
            text-align: justify;
        }

        .images {
            display: none;
        }

        .runway-content {
            display: none;
        }

        .mobile-runway-flip {
            display: block;
        }

        .flip-card {
            width: 50vw;
            height: 100vw;
            perspective: 1000px;
            cursor: pointer;
            position: relative;
            margin: auto;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        .flip-card.flipped .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .flip-card-back {
            transform: rotateY(180deg);
        }

        .flip-card img {
            width: 100%;
        }

        .caption {
            font-family: "Josefin Sans", sans-serif;
            font-size: 1rem;
            margin-top: 10px;
        }

    }

    @media (max-width: 550px) {
        h4 {
            font-size: 3vw;
        }

        .border-line {
            width: 80%;
            border-bottom: 2px solid #A50100;
            position: absolute;
            right: 0;
            bottom: -35px;
        }

        .border-line-2 {
            height: 100%;
            border-right: 2px solid #A50100;
            position: absolute;
            top: 120px;
            right: 30px;
        }

        .clothing2-text {
            width: 100%;
            position: absolute;
            top: 43%;
        }

        .clothing1-mobile-text {
            display: block;
            position: absolute;
            bottom: 30px;
            left: -17%;
        }

        .cnp-item p {
            margin-right: 0;
            text-align: center;

        }

        .text h4 {
            font-size: 5vw;
        }

        .text p {
            font-size: 3vw;
            line-height: 1.5;
            word-spacing: 1px;
            text-align: justify;
        }
    }