.banner {
    background-image: url(../image/protfoliobanner.jpg);
}

/* section1 */
.section1 h3 {
    color: var(--primary-red);
}

.artistdiscription {
    width: 100%;
    gap: 35px;
    display: flex;
}

.artistcontent {
    margin-top: 10px;
    width: 70%;
}

.leehomimg {
    width: 30%;
}

.leehomimg img {
    width: 100%;
    border-radius: 20px;
}


.artistname h3,
.artistelement h3,
.artistelement li,
.artistelement p,
.artistcontent h3 {
    color: var(--light);

}

.artistname h3 {
    font-style: italic;
}

.button-red {
    display: flex;
    justify-content: end;
}

.button-dark {
    display: flex;
    justify-content: end;
}

.button-dark .btn-light:hover {
    background: var(--dark);
    color: var(--light);
}



/* section2 */
.section2 h3 {
    color: var(--primary-red);
}

.categorydiscription {
    display: flex;
    width: 100%;
    gap: 30px;
}

.categorycontent {
    width: 60%;
    margin-left: 30px;
    margin-right: 15px;
}

.categoryimg {
    width: 40%;
    align-items: end;
}

.categoryimg img {
    width: 100%;
    border-radius: 20px;
}

.categorycontent h2 {
    color: var(--primary-red);
}

.categorycontent h3,
.categorycontent li {
    color: var(--light);
}

/* section3 */
.section3 h3 {
    color: var(--primary-red);
}

.trendingworksbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.songs-img img {
    border-radius: 20px;
    width: 100%;
}

.songs-img {
    width: 100%;
    margin-bottom: 15px;
}

.box.dark {
    background-color: var(--dark);
}

.songs-name h3 {
    margin: 0px;
}

.songs-name p {
    font-style: italic;
    color: var(--light);
}

.songs-name h3,
.song-type p {
    color: var(--light);
}

.box.dark {
    background-color: var(--dark);
}

.songs-name h3 {
    margin: 0px;
}

.songs-name p {
    font-style: italic;
    color: var(--light);
}

.songs-name h3,
.song-type p {
    color: var(--light);
}

.box.red {
    background-color: var(--primary-red);
}

/* section4 */
.clienttestimonials h3 {
    color: var(--primary-red);
}

.clientimg {
    width: 15%;
}

.clientimg img {
    width: 60%;
}

.clientcontent {
    width: 70%;
}

.clientname h3,
.clientname h2,
.clientname p {
    color: var(--light);
    margin: 3px;
}

.clientname p {
    font-style: bold;
}

.clientdetails {
    display: flex;
    width: 100%;
    gap: 0px;
    align-items: center;
}

.fullwidth-box {
    margin-bottom: 30px;

}

@media (max-width: 1180px) {

    /* section1 */
    .artistdiscription {
        width: 90%;
    }

    .fullwidth-box {
        width: 90%;
        margin-bottom: 20px;
        margin: 0 auto;
    }

    .leehomimg {
        width: 50%;
    }

    .leehomimg img {
        width: 100%;
    }

    .artistcontent {
        width: 60%;
    }

    /* section4 */
    .clientdetails {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .clientimg {
        width: 50%;
        margin-bottom: 10px;
    }

}

@media (max-width: 990px) {

    /* section1 */
    .artistdiscription {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .leehomimg {
        width: 100%;
    }

    .artistcontent {
        width: 100%;
    }

    .button-red {
        justify-content: center;
    }

    .fullwidth-box {
        width: 70%;
        justify-content: center;
        margin-bottom: 20px;
    }

    /* section2 */
    .categorydiscription {
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
    }

    .categoryimg {
        width: 100%;
    }

    .categorycontent {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    /* section3 */
    .trendingworksbox {
        width: 100%;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .box {
        width: 35%;
        margin: 0 auto;
    }

}

@media (max-width: 768px) {

    /* section1 */
    .leehomimg {
        width: 100%;
    }

    .leehomimg img {
        width: 100%;
    }

    .artistdiscription {
        width: 100%;
    }

    /* section3 */
    .trendingworksbox {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 70%;
    }

    .button-dark {
        justify-content: center;
    }
}