main {
    position: relative;
    display: flex;
    margin-top: 75px;

    .main {
        width: 100%;
        position: relative;
    }
}

.hero {
    /* border: 1px solid red; */
    height: 75vw;
    width: 100%;

    overflow: hidden;
    position: relative;
    z-index: 1;

    .hero_content {
        width: 90%;
        height: 100%;
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        

        & h6 {
            color: #e1d169;
            font-family: oswald;
            font-size: 1rem;
        }

        & h2 {
            color: white;
            font-family: oswald;
            font-size: 1.6rem;
        }

        & h4 {
            color: white;
            font-family: oswald;
            font-size: 1.2rem;
            text-align: center;
        }
    }

    & img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);

        object-fit: cover;
        height: 100%;

        z-index: -2;
    }

    &::before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;

        background-color: #1111115a;

        z-index: -1;
    }
}


/*** INTRO ******************/
.intro {
    padding: 2rem 0 2rem 0;
    overflow: hidden;

    .intro-wrap {
        width: 95%;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 55% 45%;
    }

    .intro-wrap {
        .textCont {
            padding: 2rem 0 2rem 0;
            & p {
                font-size: clamp(0.75rem, -0.012rem + 3.81vw, 1rem);
                
                & span {
                    display: none;
                }
            }

            .icons {
                height: 65px;

                display: flex;
                gap: 10px;

                & img {
                    aspect-ratio: 1/1;
                    height: 100%;
                }
            }
        }
    }

    .intro-wrap .imgModel {

        & img {
            aspect-ratio: 1/2.2;
            border-radius: 1rem;
            height: 100%;
            width: 125%;
        }
    }
}

@media(min-width: 425px){
    .intro {
    
        .intro-wrap {
            width: 90%;
            margin: 0 auto;
    
            display: grid;
            grid-template-columns: 55% 45%;
            align-items: center;
        }
    
        .intro-wrap {
            .textCont {
                & h5 {
                    font-size: 1.6rem;
                    font-weight: 600;
                }
                & p {
                    font-size: clamp(1rem, 0.916rem + 0.315vw, 1.2rem);
                    & span {
                        display: none;
                    }
                }
    
                .icons {
                    height: 65px;
    
                    display: flex;
                    gap: 10px;
    
                    & img {
                        aspect-ratio: 1/1;
                        height: 100%;
                    }
                }
            }
        }
    
        .intro-wrap .imgModel {
            display: flex;
            justify-content: center;

            & img {
                aspect-ratio: 1/2.2;
                width: 80%;
                height: auto;
            }
        }
    }
}

@media(min-width: 768px){
    .intro {
    
        .intro-wrap {
            width: 90%;
            margin: 0 auto;

            grid-template-columns: 50% 50%;
        }
    
        .intro-wrap {
            .textCont {
                & p {
                    font-size: clamp(0.75rem, -0.012rem + 3.81vw, 1rem);
                    
                    & span {
                        display: none;
                    }
                }
    
                .icons {
                    height: 65px;
    
                    display: flex;
                    gap: 10px;
    
                    & img {
                        aspect-ratio: 1/1;
                        height: 100%;
                    }
                }
            }
        }
    
        .intro-wrap .imgModel {
            & img {
                aspect-ratio: 1/2;
                width: 70%;
                height: auto;
                max-height: 550px;
            }
        }
    }
}

@media(min-width: 1024px){
    .intro {
        .intro-wrap {
            width: 80%;
            margin: 0 auto;

            grid-template-columns: 50% 50%;
        }
    
        .intro-wrap {
            .textCont {
                & p {
                    font-size: 1.2rem;
                    
                    & span {
                        display: none;
                    }
                }
    
                .icons {
                    height: 65px;
    
                    display: flex;
                    gap: 10px;
    
                    & img {
                        aspect-ratio: 1/1;
                        height: 100%;
                    }
                }
            }
        }
    
        .intro-wrap .imgModel {
            & img {
                aspect-ratio: 1/2;
                width: 65%;
                height: auto;
                max-height: 450px;
            }
        }
    }
}

@media(min-width: 1440px){
    .intro {
        padding: 4rem 0 4rem 0;
        .intro-wrap {
            width: 60%;
        }
    
        .intro-wrap {
            .textCont {
                & h5 {
                    font-size: 2rem;
                }
                & p {
                    font-size: 1.2rem;
                    
                    & span {
                        display: inline;
                    }
                }
    
                .icons {
                    height: 65px;
    
                    display: flex;
                    gap: 10px;
    
                    & img {
                        aspect-ratio: 1/1;
                        height: 100%;
                    }
                }
            }
        }

        .intro-wrap .imgModel {
            & img {
                aspect-ratio: 1/1.8;
                max-height: 650px;
            }
        }
    }
}


/*** CORPORATE WEAR ***********************/
.men-women-cont {
    position: relative;
    z-index: 1;
    overflow: hidden;

    .womenBg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
}

.mens {
    width: 95%;
    margin: 0 auto;
    padding: 2rem 0 1rem 0;

    & h2 {
        color: white;
    }

    .mens-wrap {
        #mens-ls {
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;

            & li {
                background-color: #dddddda1;
                width: 48%;

                & img {
                    width: 100%;
                }
            }
        }

        .mens-top {
            & li {
                border-top-left-radius: 1rem;
                border-top-right-radius: 1rem;
            }

            #tabView {
                display: none;
            }
        }

        .mens-bot {
            & li {
                overflow: hidden;
                border-bottom-left-radius: 1rem;
                border-bottom-right-radius: 1rem;
            }

            #tabView {
                display: none;
            }
        }
    }
}

.womens {
    width: 95%;
    margin: 0 auto;
    padding: 1rem 0 2rem 0;

    & h2 {
        color:rgb(0, 1, 77);
    }

    .womens-wrap {
        #womens-ls {
            display: flex;
            justify-content: space-between;
            list-style: none;
            padding: 0;

            & li {
                background-color: #dddddda1;
                width: 48%;

                & img {
                    width: 100%;
                }
            }
        }

        .lady-top {
            & li {
                border-top-left-radius: 1rem;
                border-top-right-radius: 1rem;
            }

            #tabView {
                display: none;
            }
        }

        .lady-bot {
            & li {
                overflow: hidden;
                border-bottom-left-radius: 1rem;
                border-bottom-right-radius: 1rem;
            }

            #tabView {
                display: none;
            }
        }
    }
}

.corp-cont {
    display: grid;
    grid-template-columns: 65% 35%;

    .corpImg {
        & img {
            aspect-ratio: 1/2;
            width: 100%;
        }
    }
}

@media(min-width: 768px){
    .mens {
        width: 90%;

        .mens-wrap {
            #mens-ls {    
                & li {
                    background-color: #dddddda1;
                    width: 30%;
    
                    & img {
                        width: 100%;
                    }
                }
            }

            .mens-top, .mens-bot {
                #tabView {
                    display: inline-block;
                }
            }
        }
    }

    .womens {
        width: 90%;

        .womens-wrap {
            #womens-ls {
                display: flex;
                justify-content: space-between;
                list-style: none;
                padding: 0;
    
                & li {
                    background-color: #dddddda1;
                    width: 30%;
    
                    & img {
                        width: 100%;
                    }
                }
            }

            .lady-top, .lady-bot {
                #tabView {
                    display: inline-block;
                }
            }
        }
    }
    
    .corp-cont {
        gap: 2rem;
        grid-template-columns: 65% 35%;

        .corpImg {
            & img {
                aspect-ratio: 1/2;
                width: 65%;
            }
        }
    }
}

@media(min-width: 1024px){
    .mens {
        width: 80%;
        padding: 5rem 0 3rem 0;
    }

    .womens {
        width: 80%;
        padding: 3rem 0 5rem 0;
    }
}

@media(min-width: 1440px){

    .corp-cont {
        grid-template-columns: 65% 35%;

        .corpImg {

            & img {
                aspect-ratio: 1/2;
                width: 65%;
            }
        }
    }
}


/*** CORPORATE SHOP  *********/
#cs_prods {
    padding: 3rem 0 3rem 0;

    .getPrds {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

.female_corporate {
    display: none;
    height: 35vw;
    
    background: linear-gradient(90deg, rgba(2,0,36,0.5298494397759104) 0%, rgba(0,73,98,0.7567401960784313) 49%, rgba(0,93,115,1) 62%);
    
    overflow: hidden;
    position: relative;
    z-index: 1;

    .cw_content {
        width: 50%;
        height: 100%;
        padding-right: 10rem;

        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: center;

        & h4 {
            color: #fded88;
            font-size: 2rem;
            font-weight: 600;
        }

        & h2 {
            color: snow;
            font-family: oswald;
            font-size: 3.4rem;
            font-weight: 600;
        }

        & h3 {
            font-weight: 500;
        }
    }

    #cw_img-apparels {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 25%;
        height: 90%;

        z-index: -1;
    }

    #cw_img-model {
        position: absolute;
        top: 5%;
        right: 10%;
        height: 120%;

        z-index: -1;
    }

    #cw_img-bg {
        position: absolute;
        top: 5%;
        right: 10%;
        height: 90%;

        z-index: -2;
    }
}

@media(min-width: 425px){
    .hero {
        height: 65vw;
    }

    /*** CORPORATE SHOP  */
    #cs_prods {
        padding: 3rem 0 3rem 0;
    
        .getPrds {
            width: 90%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
    }
}

@media(min-width: 768px){
    .hero {
        .hero_content {
            height: 90%;
        
            & h6 {
                font-size: 1.2rem;
            }
    
            & h2 {
                font-size: 1.8rem;
            }
    
            & h4 {
                font-size: 1.4rem;
            }
        }
    }

    /*** CORPORATE SHOP  */
    #cs_prods {
        .getPrds {
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }
    }
}

@media(min-width: 1024px){
    .hero {
        /* border: 1px solid red; */
        width: 100%;
        height: clamp(450px, 40vw, 750px);

        .hero_content {
            & h6 {
                font-size: 1.4rem;
            }
    
            & h2 {
                font-size: 2rem;
            }
    
            & h4 {
                font-size: 1.6rem;
            }
        }

        & img {
            object-fit: 150%;
            object-position: top;
            width: 100%;
            height: 100%;
        }
    }

    /*** CORPORATE SHOP  */
    #cs_prods {
        .getPrds {
            grid-template-columns: repeat(5, 1fr);
            gap: 1rem;
        }
    }

    .female_corporate {
        display:block;
        height: 35vw;
        
        background: linear-gradient(90deg, rgba(2,0,36,0.5298494397759104) 0%, rgba(0,73,98,0.7567401960784313) 49%, rgba(0,93,115,1) 62%);
        
        overflow: hidden;
        position: relative;
        z-index: 1;
    
        .cw_content {
            width: 50%;
            height: 100%;
            padding-right: 1rem;
    
            display: flex;
            flex-direction: column;
            align-items: end;
            justify-content: center;
    
            & h4 {
                color: #fded88;
                font-size: 2rem;
                font-weight: 600;
            }
    
            & h2 {
                color: snow;
                font-family: oswald;
                font-size: 3.4rem;
                font-weight: 600;
            }
    
            & h3 {
                font-weight: 500;
            }
        }
    
        #cw_img-apparels {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 25%;
            height: 90%;
    
            z-index: -1;
        }
    
        #cw_img-model {
            position: absolute;
            top: 5%;
            right: 10%;
            height: 120%;
    
            z-index: -1;
        }
    
        #cw_img-bg {
            position: absolute;
            top: 5%;
            right: 10%;
            height: 90%;
    
            z-index: -2;
        }
    }
}

@media(min-width: 1440px){
    .hero {
        .hero_content {
            & h6 {
                font-size: 1.8rem;
            }
    
            & h2 {
                font-size: 4rem;
            }
    
            & h4 {
                font-size: 2rem;
            }
        }
    }

    /*** CORPORATE SHOP  */
    #cs_prods {
        padding: 5rem 0 5rem 0;
    
        .getPrds {
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
        }
    }

    .female_corporate {
        height: 35vw;
        
        background: linear-gradient(90deg, rgba(2,0,36,0.5298494397759104) 0%, rgba(0,73,98,0.7567401960784313) 49%, rgba(0,93,115,1) 62%);
        
        overflow: hidden;
        position: relative;
        z-index: 1;
    
        .cw_content {
            width: 50%;
            height: 100%;
            padding-right: 10rem;
    
            display: flex;
            flex-direction: column;
            align-items: end;
            justify-content: center;
    
            & h4 {
                color: #fded88;
                font-size: 2rem;
                font-weight: 600;
            }
    
            & h2 {
                color: snow;
                font-family: oswald;
                font-size: 3.4rem;
                font-weight: 600;
            }
    
            & h3 {
                font-weight: 500;
            }
        }
    
        #cw_img-apparels {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 25%;
            height: 90%;
    
            z-index: -1;
        }
    
        #cw_img-model {
            position: absolute;
            top: 5%;
            right: 10%;
            height: 120%;
    
            z-index: -1;
        }
    
        #cw_img-bg {
            position: absolute;
            top: 5%;
            right: 10%;
            height: 90%;
    
            z-index: -2;
        }
    }
}