@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 ;
    --showcase-clr-1: #AF7AC5;
    --showcase-clr-2: #f1c40f;
    --showcase-clr-3: #DAB6AD;
    --text-color-main: #212121;
    --text-color-secondary: #7d7d7d;
    --text-color-third: #d7dbdd;

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

main{
    .body-container{
        .section-2{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            height: 300vh;
            margin-top: 5%;

            .product-showcase1, .product-showcase2, .product-showcase3{
                display: flex;
                height: 100vh;
                width: 100%;
                scroll-snap-align: start;
                font-family: var(--text-regular2);

                .product-image{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50%;
                    img{
                        width: 80%;
                        filter: drop-shadow(15px 45px 15px rgba(0, 0, 0, 0.3));
                    }
                }
                .product-info{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    width: 50%;
                    gap: 50px;
                    text-align: left;
                    h4{
                        padding: 30px 30px;
                        font-size: 20px;
                    }
                    a{
                        display: flex;
                        gap: 6px;
                        padding: 8px 30px;
                        text-decoration: none;
                        font-size: 18px;
                        background: var(--background-color-main);
                        border-radius: 30px;
                        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15);
                        transition: .5s ease-in-out;

                        animation: appear .3s linear;
                        animation-timeline: view();
                        animation-range: entry 0% cover 20%;

                        svg{
                            fill: var(--background-color-main);
                            transition: .3s ease-in-out;
                        }
                    }
                    a:hover{
                        box-shadow: 1px 10px 14px rgba(0, 0, 0, 0.15), -.05px -.05px 3px rgba(0, 0, 0, 0.1);
                    }
                }
            }
            .product-showcase1{
                .product-image{
                    background-color: var(--showcase-clr-1);
                    box-shadow: -220px -0px 0px var(--showcase-clr-1);
                }
                .product-info{
                    a{
                        background: var(--showcase-clr-1);
                        color: var(--background-color-main);
                    }
                    a:hover{
                        background: var(--background-color-main);
                        color: var(--showcase-clr-1);
                        svg{
                            fill: var(--showcase-clr-1)
                        }
                    }
                }   
            }
            .product-showcase2{
                .product-image{
                    background-color: var(--showcase-clr-2);
                    box-shadow: 220px 0px 0px var(--showcase-clr-2);
                }
                .product-info{
                    a{
                        background: var(--showcase-clr-2);
                        color: var(--background-color-main);
                    }
                    a:hover{
                        background: var(--background-color-main);
                        color: var(--showcase-clr-2);
                        svg{
                            fill: var(--showcase-clr-2)
                        }
                    }
                }   
            }
            .product-showcase3{
                .product-image{
                    background-color: var(--showcase-clr-3);
                    box-shadow: -220px -0px 0px var(--showcase-clr-3);
                }
                .product-info{
                    a{
                        background: var(--showcase-clr-3);
                        color: var(--background-color-main);
                    }
                    a:hover{
                        background: var(--background-color-main);
                        color: var(--showcase-clr-3);
                        svg{
                            fill: var(--showcase-clr-3)
                        }
                    }
                }   
            }
        }
    }
}

@keyframes appear{
    from{
        scale: 0.8;
        opacity: 0;
        transform: translateY(50%);
    }
    to{
        scale: 1;
        opacity: 1;
        transform: translateY(-1%);
    }
}

@media(max-width: 900px){
    main{
        .body-container{
            .section-2{
                .product-showcase1, .product-showcase2, .product-showcase3{
                    flex-direction: column;
                    .product-image, .product-info{
                        width: 100%;
                        height: 35%;
                    }
                    .product-image{
                        height: 65%;
                        img{
                            width: 60%;
                            filter: drop-shadow(15px 45px 15px rgba(0, 0, 0, 0.45));
                        }
                    }
                    .product-info{
                        justify-content: start;
                        gap: 0px;
                        text-align: center;
                        h4{
                            padding: 10px 30px;
                            padding-bottom: 40px;
                            font-size: 17px;
                        }
                        a{
                            animation-range: entry 0% cover 10%;
                        }
                    }
                }
                .product-showcase1{
                    .product-image{
                        box-shadow:  165px 0px 0px var(--showcase-clr-1),
                                -180px -0px 0px var(--showcase-clr-1);
                    }
                }
                .product-showcase2{
                    flex-direction: column-reverse;
                    .product-image{
                        box-shadow:  165px 0px 0px var(--showcase-clr-2),
                                -180px -0px 0px var(--showcase-clr-2);
                    }
                }
                .product-showcase3{
                    .product-image{
                        box-shadow:  165px 0px 0px var(--showcase-clr-3),
                                -180px -0px 0px var(--showcase-clr-3);
                    }
                }
            }
        }
    }
}
@media(max-width: 500px){
    main{
        .body-container{
            .section-2{
                .product-showcase1, .product-showcase2, .product-showcase3{
                    .product-image{
                        box-shadow:  0px 0px 0px var(--showcase-clr-1),
                                -0px -0px 0px var(--showcase-clr-1);
                    }
                    .product-info{
                        h4{
                            font-size: 16px;
                        }
                        a{
                            padding: 7px 20px;
                            animation-range: entry 0% cover 8%;
                        }
                    }
                }
            }
        }
    }
}
@media(max-width: 365px){
    main{
        .body-container{
            .section-2{
                .product-showcase1{
                    .product-info{
                        h4{
                            padding-bottom: 10px;
                        }
                    }
                }
            }
        }
    }
}