@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-color-main: white;
    --background-color: #f8f9f9;
    --secondary-background-color: #e5e7e9 ;
    --accent-color: #d055e7 ;
    --text-color-main: #212121;
    --text-color-secondary: #7d7d7d;
    --text-color-third: #d7dbdd;
    interpolate-size: allow-keywords;

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;                           
    --text-stylish1: Leckerli One;
    --text-stylish2: Send Flowers;
}

main{
    .body-container{
        footer{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 95%;
            font-family: var(--text-regular2);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 255px 0px 1px black,
                        -270px -0px 1px black;
            background: black;

            .footer-padding{
                display: flex;
                flex-direction: column;
                width: 97%;
                height: 95%;

                .intro{
                    display: flex;
                    width: 100%;
                    height: 40%;
                    margin-top: 2%;
                    color: var(--text-color-third);

                    .intro-image{
                        position: relative;
                        width: 60%;
                        height: 100%;
                        border-radius: 20px;
                        z-index: 1;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 20px;
                            object-fit: cover;
                            z-index: 1;
                        }
                    }
                    .intro-image::after{
                        content: '';
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(to right, rgba(255, 0, 0, 0.0) 20%, rgb(0, 0, 0));
                        z-index: 10;
                    }

                    .intro-message{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 40%;
                        height: 100%;
                        p{
                            font-size: 17px;
                            text-align: center;
                            text-wrap: nowrap;

                            span{
                                margin-top: 10px;
                                font-family: var(--text-stylish2);
                                font-size: 30px;
                            }
                        }
                    }
                }

                .links{
                    display: flex;
                    width: 100%;
                    height: 65%;
                    margin-top: 15px;
                    color: var(--text-color-third);
                    border-top: .3px solid var(--text-color-secondary);

                    .left{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: 100%;
                        width: 50%;

                        p{
                            margin-left: 10%;
                            margin-bottom: 5px;
                            font-family: var(--text-stylish2);
                            font-size: 35px;
                            color: var(--accent-color);
                            text-wrap: nowrap;
                            transform: rotate(-5deg);
                        }

                        div{
                            display: flex;
                            gap: 5px;
                            margin-left: 20%;
                            cursor: pointer;
                            svg{
                                fill: var(--text-color-secondary)
                            }
                            a{
                                text-decoration: none;
                                color: var(--text-color-third);
                                cursor: pointer;
                            }
                        }
                    }
                    .right{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        height: 100%;
                        width: 50%;
                        gap: 10px;

                        div{
                            margin-left: 20%;
                            a{
                                text-decoration: none;
                                color: var(--text-color-third);
                                cursor: pointer;
                            }

                            .Sign-in{
                                padding: 5px 18px;
                                border-radius: 7px;
                                font-family: var(--text-regular1);
                                font-size: 14px;
                                color: white;
                                border: none;
                                box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.29);
                                background:linear-gradient(to right, var(--accent-color) 20%, #d693e4);
                                cursor: pointer;
                                transition: .3s ease-in-out;
                            }

                            .contact-us{
                                margin-left: 15px;
                                padding: 5px 5px;
                                border-radius: 7px;
                                font-family: var(--text-regular1);
                                font-size: 14px;
                                color: var(--text-color-main);
                                border: none;
                                box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.29);
                                background-color: var(--background-color-main);
                                cursor: pointer;
                                transition: .3s ease-in-out;
                            }
                        }
                    }
                }

                .footer-bottom{
                    display: flex;
                    flex-direction: column; 
                    width: 100%;
                    height: 10%;
                    color: var(--text-color-third);
                    
                    .socials{
                        display: flex;
                        justify-content: center;
                        gap: 5px;
                        height: 70%;
                        width: 100%;;
                        border-bottom: .3px solid var(--text-color-secondary);

                        a{
                            display: flex;
                            margin-bottom: 3px;
                            text-decoration: none;
                    
                            svg{
                                margin-right: 3px;
                                transition: .4s ease-in-out;
                            }
                            svg path{
                                transition: .4s ease-in-out;
                            }
                        }
                        .socials-name{
                            font-size: 13px;
                            color: var(--text-color-secondary);
                            transition: .4s ease-in-out;
                        }
                        p{
                            display: flex;
                            font-size: 13px;
                            color: var(--text-color-secondary);
                            transition: .4s ease-in-out;
                            cursor: pointer;
                            svg{
                                margin-right: 2px;
                                margin-bottom: 2px;
                                transition: .4s ease-in-out;
                            }
                        }
                        p:hover{
                            color: var(--text-color-third);
                                svg{
                                
                                fill: var(--text-color-third);
                            }
                        }
                        a:hover{
                            .socials-name{
                                color: var(--text-color-third);
                            }
                            strong,
                            svg path{
                                color: var(--text-color-third);
                                fill: var(--text-color-third);
                            }
                            strong,
                            .tiktok-svg path{
                                fill: transparent;
                            }
                        }
                    }
                    .copyright-disclaimer{
                        display: flex;
                        justify-content: center;
                        width: 100%;
                        height: 30%;
                        margin-top: 7px;

                        svg{
                            fill: var(--text-color-secondary);
                        }
                        p{
                            display: flex;
                            font-size: 13px;
                            color: var(--text-color-secondary);
                        }

                    }
                }
            }
        }
    }
}

@media(max-width: 1130px){
    main{
        .body-container{
            footer{
                .footer-padding{
                    .intro{
                        .intro-image{
                            width: 55%;
                            margin-right: 5%;
                        }
                        .intro-message{
                            p{
                                font-size: 15px;
                                span{
                                    font-size: 25px;
                                }
                            }
                        }
                    }
                   
                }
            }
        }
    }

}
@media(max-width: 900px){
    main{
        .body-container{
            footer{
                width: 100vw;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                box-shadow: 165px 0px 0px black,
                            -180px -0px 0px black;
                .footer-padding{
                    .intro{
                        .intro-image{
                            width: 55%;
                            margin-right: 5%;
                        }
                    }
                    .links{
                        .right{
                            .buttons{
                                display: flex;
                                flex-direction: column;
                                gap: 20px;
                                .contact-us{
                                    margin-left: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(max-width: 800px){
    main{
        .body-container{
            footer{
                box-shadow: 165px 0px 1px black,
                            -180px -0px 1px black;
                .footer-padding{
                    .intro{
                        .intro-image{
                            margin-right: 7.5%;
                        }
                        .intro-message{
                            p{
                                font-size: 12px;
                                span{
                                    font-size: 21px;
                                }
                            }
                        }
                    }
                    .links{
                        .left{
                            margin-right: 2%;
                            p{
                                font-size: 29px;
                            }
                            div{
                                text-wrap: nowrap;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(max-width: 500px){
    .body-container{
        footer{
            box-shadow: 0px 0px 0px black,
                        -0px -0px 0px black;
            .footer-padding{
                width: 100%;
                .intro{
                    .intro-image{
                        margin-right: 0;
                    }
                }
            }
        }
    }
}