body {
    background-color: var(--white);
}


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

.firstcontent-middle {
    width: 100%;
}

.firstcontent-middle h3 {
    color: var(--primary-red);
    margin-bottom: 15px;
}

.firstcontent-middle h2,
p {
    color: var(--dark);
}

.contentbox-middle {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
    justify-content: center;
    width: 100%;
}

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

.recordingmix {
    background-image: url(../image/recording.jpg);
}

.musicvideoproduction {
    background-image: url(../image/musicvideo.jpg);
}

.artistdevo {
    background-image: url(../image/artistdeve.jpg);
}

.songwrite {
    background-image: url(../image/songwriting.jpg);
}

.livesession {
    background-image: url(../image/livesessionrecording.jpg);
}

.musicproduction,
.recordingmix,
.musicvideoproduction,
.artistdevo,
.songwrite,
.livesession {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px;
    width: 27%;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.musicproduction h3,
.recordingmix h3,
.musicvideoproduction h3,
.artistdevo h3,
.songwrite h3,
.livesession h3 {
    color: var(--light);
    width: 75%;

}

.content-middle {
    width: 60%;
    padding-right: 60px;
}

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

.halfround-image {
    width: 40%;
}

.halfround-image img {
    width: 85%;
}

.round-image {
    display: none;
}

.section2 {
    display: flex;
    justify-content: space-between;

}

.pointcontent {
    display: flex;
}


.pointcontent1,
.pointcontent2 {
    font-weight: bold;
    font-size: 25px;
    gap: 50px;
    justify-content: space-between;
}

.pointcontent1 li,
.pointcontent2 li {
    width: 70%;
    margin-top: 20px;
}


.section3content h3 {
    color: var(--primary-red);
}

.section3 {
    justify-content: space-between;
    margin-top: 30px;
}

.section3box {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;

}

.section3 .box {
    width: 27%;
    padding: 30px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.box.dark h3 {
    border-bottom: 3px solid var(--light);
    width: 100%;
    padding-bottom: 55px;

}

.box.red h3 {
    color: var(--light);
    border-bottom: 3px solid var(--light);
    width: 100%;
    padding-bottom: 23px;
}


.box {
    background-color: var(--primary-red);
    text-align: center;
    height: 450px;
    text-align: left;

}

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

.box.red p {
    color: var(--light);
    padding-bottom: 80px;
}

.box.dark p {
    color: var(--light);
    padding-bottom: 55px;
}

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

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

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

.card {
    /* animation */
    animation: reveal 1s ease-out both;
    animation-timeline: view();
    animation-range: entry 20% cover 30%;
}

@keyframes reveal {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(80px);
    }

    30% {
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@media screen and (max-width: 1180px) {

    .contentbox-middle {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .musicproduction,
    .recordingmix,
    .musicvideoproduction,
    .artistdevo,
    .songwrite,
    .livesession {
        width: 40%;
    }

    .musicproduction h3,
    .recordingmix h3,
    .musicvideoproduction h3,
    .artistdevo h3,
    .songwrite h3,
    .livesession h3 {
        text-align: center;
        width: 100%;
        margin: 0;
    }

    .section2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;

    }

    .content-middle {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .content-middle p {
        padding-left: 60px;
        padding-right: 60px;
    }

    .pointcontent {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pointcontent1,
    .pointcontent2 {
        align-items: center;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .pointcontent1 ul,
    .pointcontent2 ul {
        margin: 0;
    }

    .pointcontent1 li,
    .pointcontent2 li {
        width: auto;
        font-size: 17px;
    }

    .round-image {
        display: block;
        width: 100%;
        justify-content: center;
    }

    .round-image img {
        width: 50%;
    }

    .halfround-image {
        display: none;
    }

    .section3box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .section3 .box {
        width: 45%;
        height: auto;
    }

}

@media (max-width: 990px) {

    .contentbox-middle {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
    }

    .musicproduction,
    .recordingmix,
    .musicvideoproduction,
    .artistdevo,
    .songwrite,
    .livesession {
        width: 60%;
    }
}

@media (max-width: 768px) {
    .firstcontent-middle {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .contentbox-middle {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .musicproduction,
    .recordingmix,
    .musicvideoproduction,
    .artistdevo,
    .songwrite,
    .livesession {
        width: 75%;
        align-items: center;
    }

    .section3 .box {
        width: 70%;
        min-height: auto;
    }

    .btn {
        align-items: center;
    }

    .round-image {
        width: 100%
    }

    .round-image img {
        width: 60%;
    }
}

@media (max-width: 438px) {

    .musicproduction,
    .recordingmix,
    .musicvideoproduction,
    .artistdevo,
    .songwrite,
    .livesession {
        display: flex;
        flex-direction: column;
        width: 75%;
        align-items: center;
    }

    .section3 .box {
        width: 70%;
        min-height: auto;
    }


}