@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-main: #faf9f6;
    --background-sec: #F0F2F5;
    --background-third: #F7F6F3;
    --background-fourth: #121212;
    --accent-gold: #CCac00;
    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;
    --text-stylish: Leckerli One;
}

main{
    footer{
        display: flex;
        flex-direction: column;
        height: 95vh;
        width: 100%;
        color: var(--background-third);
        font-family: var(--text-regular1);
        overflow: hidden;

        background-image: url('../../Images/showcase-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;

        .top{
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 50px 100px;
            padding-bottom: 0;
            height: 30%;

            .message-container{
                display: flex;
                flex-direction: column;
                gap: 20px;
                width: 50%;
                height: fit-content;

                .message{
                    font-family: var(--text-regular2);
                    font-size: 1.6rem;
                }
                a{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 3px;
                    width: 150px;
                    height: 50px;
                    color: var(--background-fourth);
                    text-decoration: none;
                    font-size: .8rem;
                    font-weight: bold;
                    background: var(--background-third);
                    border-radius: 20px;
                    transition: all .4s ease-in-out;
                    svg{
                        width: 21px;
                        flex-shrink: 0;
                        fill: var(--background-fourth);
                        transition: all .4s ease-in-out;
                    }
                    &:hover{
                        color: var(--background-third);
                        background: rgba(255, 255, 255, 0.35);
                        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15),
                        -0px -.1px 3px rgba(0, 0, 0, 0.15);
                        svg{
                            fill: var(--background-third);
                        }
                    }
                }
            }

            .links-container{
                display: flex;
                justify-content: center;
                gap: 5%;
                width: 40%;
                height: fit-content;

                .media-links, .page-links, .legal-links{
                    display: flex;
                    flex-direction: column;
                    padding-left: 15px;
                    border-left: 1px solid rgb(37, 37, 37);

                    p{
                        font-size: 14px;
                        margin-bottom: 15px;
                    }

                    a{
                        margin-bottom: 8px;
                        width: 100px;
                        color: var(--background-third);
                        text-decoration: none;
                        font-size: 15px;
                    }
                }
            }
        }

        .bottom{
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
            margin-top: auto;
            padding: 0 170px;

            .business-name{
                line-height: .75;
                font-size: 8.85rem;
                font-family: var(--text-bold);
                white-space: nowrap;
                overflow: hidden;
            }
            .copyright-msg-desktop{
                display: flex;
                align-items: center;
                margin-bottom: 50px;
                font-size: .7rem;
                color: white;
            }
            .copyright-msg-mobile{
                display: none;
            }

            span{
                margin-right: 5px;
            }
            svg{
                fill: var(--background-third);
            }
        }
    }
}

@media(max-width: 1250px){
    main{
        footer{
            height:  90vh;

            .top{
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 90px;
                padding: 50px 50px;
                height: 75%;

                .message-container{
                    width: 100%;
                }

                .links-container{
                    flex-direction: column;
                    gap: 10%;
                    width: 100%;
                    height: 400px;
                    border-left: 1px solid rgb(88, 88, 88);

                    .media-links, .page-links, .legal-links{
                        border: none;
                        p{
                            margin-bottom: 10px;
                            font-size: 15px;
                            color: rgb(146, 146, 146);
                        }
                        a{
                            font-size: 16px;
                        }
                    }
                }
            }

            .bottom{
                padding: 0 50px;
                .business-name{
                    font-size: 6rem;
                }
            }
        }
    }
}
@media(max-height: 845px){
    main{
        footer{
            .top{
                gap: 80px;
                .links-container{
                    gap: 4%;
                }
            }
        }
    }
}
@media(max-width: 500px){
    main{
        footer{
            .top{
                gap: 50px;
                padding: 50px 20px;
                padding-bottom: 0;

                .message-container{
                    gap: 15px;
                    .message{
                        line-height: 1.2;
                    }
                }
            }
            .bottom{
                flex-direction: column-reverse;
                padding: 0 20px;
                height: 15%;

                .business-name{
                    font-size: 4rem;
                }
                .copyright-msg-mobile{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    align-self: flex-end;
                    font-size: 13px;
                    white-space: nowrap;
                    div{
                        display: flex;
                        align-items: center;
                    }
                }
                .copyright-msg-desktop{
                    display: none;
                }
            }
        }
    }
}
@media(max-width: 430px){
    main{
        footer{
            .bottom{
                .business-name{
                    font-size: 3.2rem;
                }
            }
        }
    }
}
@media(max-width: 390px){
    main{
        footer{
            .top{
                padding: 20px 20px;
            }
            .bottom{
                .business-name{
                    font-size: 2.9rem;
                }
            }
        }
    }
}