footer#custom-footer {
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 4rem;

    .wrapper {
        width: 80%;
        padding: 5rem 0 2rem;
        display: flex;
        flex-direction: column;

        .top {
            display: flex;
            flex-direction: row;
            gap: 4rem;

            .logo {
                width: 33.33%;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 2rem;

                a p.website-text-logo {
                    color: white;
                    font-size: 4rem;
                    margin: unset;
                    line-height: 100%;
                }

                img.footer-logo-website {
                    width: 150px;
                    object-fit: contain;
                    margin-bottom: 3rem;
                }

                img.contact-img-white {
                    width: 170px;
                }
            }

            .menu-footer {
                width: 33.33%;

                h6 {
                    font-size: 1.325rem;
                    color: white;
                    margin: unset;
                    padding: unset;
                }

                .separator {
                    width: 100%;
                    height: 1px;
                    background-color: rgba(255, 255, 255, 0.25);
                    margin: 1rem 0 1.45rem;
                }

                ul {
                    list-style: none;
                    margin: unset;
                    margin-block-end: unset;
                    padding-inline-start: unset;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    li a {
                        color: white;
                        text-decoration: none;
                    }
                }
            }

            .categories-list-footer {
                width: 33.33%;

                h6 {
                    font-size: 1.325rem;
                    color: white;
                    margin: unset;
                    padding: unset;
                }

                .separator {
                    width: 100%;
                    height: 1px;
                    background-color: rgba(255, 255, 255, 0.25);
                    margin: 1rem 0 1.45rem;
                }

                ul {
                    list-style: none;
                    margin: unset;
                    margin-block-end: unset;
                    padding-inline-start: unset;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    li a {
                        color: white;
                        text-decoration: none;
                    }
                }
            }
        }

        .separator {
            width: 100%;
            height: 1px;
            background-color: rgba(255, 255, 255, 0.25);
            margin: 2.5rem 0 1rem;
        }

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

            .contact-image-custom-footer {
                display: flex;
                flex-direction: row;
                gap: 1rem;

                img.infocons-img {
                    width: 100px;
                }

                img.trafic-ro-img {
                    width: 100px;
                }
            }

            .copyright-custom-footer p {
                color: rgba(255, 255, 255, 0.75);
                font-weight: 400;
                font-size: 14px;
                margin: unset;
                padding: unset;
            }
        }
    }
}

@media only screen and (max-width:48em) { 
	footer#custom-footer {
        padding: 0 1rem;

        .wrapper {
            width: 100%;
            flex-direction: column;

            .top {
                flex-direction: column;
                gap: 2rem;

                .logo, .menu-footer, .categories-list-footer {
                    width: 100%;
                }

                
                .logo {

                    img.footer-logo-website {
                        margin-bottom: 1.5rem;
                    }
                }
            }

            .separator {
                margin: 3.5rem 0 1.5rem;
            }

            .bottom {
                flex-direction: column;
                align-items: center;
                gap: 1rem;

                .copyright-custom-footer p {
                    text-align: center;
                }
            }
        }
    }
}