.service-collection-list {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;

}

/* services_1 */

.single-service-text-container-1 {

    height: 100%;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding-bottom: 16px;
    padding-left: 16px;
    transition: padding-bottom .5s ease-in-out, transform-origin .5s ease-in-out, transform .5s ease-in-out;

}

.single-service-item-1:hover .single-service-text-container-1 {

    padding-bottom: 42px;
    transform: scale(1.02);
    transform-origin: -80% 120%;
}

.single-service-text-subtitle-1 {

    opacity: 0;
    transition: opacity .3s ease-in-out;

}

.single-service-item-1:hover .single-service-text-subtitle-1 {
    opacity: 1;
}


.single-service-text-title-1 {
    letter-spacing: 1.25px;
    color: white;
}

.single-service-item-1 {

    width: 400px;
    height: 500px;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom, transparent 10%, black 100%), url('../../images/weddings/wedding-7.jpg');
    background-size: 110% 140%;
    background-position: top;
    background-repeat: no-repeat;
    transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

}

.single-service-item-1:hover {

    background-size: 115% 145%;
    background-image: linear-gradient(to bottom, transparent 0%, black 100%), url('../../images/weddings/wedding-7.jpg');

}



/* services_2 */

.single-service-text-container-2 {

    height: 100%;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding-bottom: 16px;
    padding-left: 16px;
    transition: padding-bottom .5s ease-in-out, transform-origin .5s ease-in-out, transform .5s ease-in-out;

}

.single-service-item-2:hover .single-service-text-container-2 {

    padding-bottom: 42px;
    transform: scale(1.02);
    transform-origin: -80% 120%;

}

.single-service-text-subtitle-2 {

    opacity: 0;
    transition: opacity .3s ease-in-out;

}

.single-service-item-2:hover .single-service-text-subtitle-2 {
    opacity: 1;
}


.single-service-text-title-2 {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1.25px;
    color: white;
}

.single-service-item-2 {

    width: 400px;
    height: 500px;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom, transparent 50%, black 100%), url('../../images/service_2.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

}

.single-service-item-2:hover {

    background-size: 105% 105%;
    background-image: linear-gradient(to bottom, transparent 10%, black 100%), url('../../images/service_2.jpg');

}

/* services_3 */

.single-service-text-container-3 {

    height: 100%;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding-bottom: 16px;
    padding-left: 16px;
    transition: padding-bottom .5s ease-in-out, transform-origin .5s ease-in-out, transform .5s ease-in-out;

}

.single-service-item-3:hover .single-service-text-container-3 {

    padding-bottom: 42px;
    transform: scale(1.02);
    transform-origin: -80% 120%;

}

.single-service-text-subtitle-3 {

    opacity: 0;
    transition: opacity .3s ease-in-out;

}

.single-service-item-3:hover .single-service-text-subtitle-3 {

    opacity: 1;

}


.single-service-text-title-3 {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1.25px;
    color: white;
}

.single-service-item-3 {

    width: 400px;
    height: 500px;
    cursor: pointer;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(to bottom, transparent 50%, black 100%), url('../../images/service_3.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

}

.single-service-item-3:hover {

    background-size: 105% 105%;
    background-image: linear-gradient(to bottom, transparent 10%, black 100%), url('../../images/service_3.jpg');

}



.services-card-main-title {

    font-family: 'Dantina', sans-serif;
    letter-spacing: 0px;
    font-size: 24px;
    font-weight: 400;
    color: white;
}


.services-card-main-title:hover {

    font-family: 'Dantina', sans-serif;
    letter-spacing: 0px;
    font-size: 24px;
    font-weight: 400;
    color: #E3DED9;
}


.services-card-main-subtitle {

    font-family: 'Didact Gothic';
    font-size: 12px;
    font-weight: 400;
    color: white;
    margin-top: 18px;
    letter-spacing: 1.8px;
}


.home-service-section {

    padding-top: 125px;
    background-color: #F8F7F6;
    padding-bottom: 138px;
}

.main-title-glam-fest {

    font-family: 'Dantina', sans-serif;
    letter-spacing: 0px;
    font-size: 42px;
    color: black;

}

.main-content-glam-fest {

    font-family: 'Didact Gothic';
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    color: black;
    letter-spacing: 1.0px;
    line-height: 1.8em;
    margin-bottom: 0;
}

.main-subtitle-wrap-glam-fest {
    padding-bottom: 32px;
    text-align: center;
    justify-content: center;
    width: 75%;
}


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

    .service-collection-list {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;
    }

}


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

    .service-collection-list {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;
    }

}

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

    .service-collection-list {

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;

    }

}

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


    .main-title-glam-fest {

        font-family: 'Dantina', sans-serif;
        letter-spacing: 0px;
        font-size: 1.7em;
        color: black;

    }

    .main-subtitle-glam-fest {

        font-family: 'Playfair Display';
        font-size: 1.2em;
        font-weight: 300;
        color: black;
        letter-spacing: 0.2em;
    }

    .main-subtitle-wrap-glam-fest {
        padding-bottom: 32px;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .main-content-glam-fest {  

        font-family: 'Didact Gothic';
        font-size: 0.9em;
        font-weight: 400;
        text-align: center;
        color: black;
        letter-spacing: 0.1em;
        line-height: 1.8em;
        margin-bottom: 0;
        padding-bottom: 32px;

    }

    .service-collection-list {

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;
    }

    .service-collection-item {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

    }




    .single-service-item-1 {

        width: 300px;
        height: 400px;
        cursor: pointer;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to bottom, transparent 10%, black 100%), url('../../images/weddings/wedding-7.jpg');
        background-size: 100% 120%;
        background-position: top;
        background-repeat: no-repeat;
        transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

    }


    .single-service-item-1:hover {

        background-size: 105% 125%;
        background-image: linear-gradient(to bottom, transparent 0%, black 100%), url('../../images/weddings/wedding-7.jpg');

    }


    .single-service-item-2 {

        width: 300px;
        height: 400px;
        cursor: pointer;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to bottom, transparent 50%, black 100%), url('../../images/service_2.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

    }


    .single-service-item-3 {

        width: 300px;
        height: 400px;
        cursor: pointer;
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to bottom, transparent 50%, black 100%), url('../../images/service_3.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transition: background-size .5s ease-in-out, background-image .5s ease-in-out;

    }

}