@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;
    --hearder-bg-clr-: #f8b5d3;
    --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-3{
           height: 100vh;

            .carousel-top-wrapper, .carousel-bottom-wrapper{
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                height: 10%;
                background: var(--hearder-bg-clr-);
                cursor: pointer;
                box-shadow: 260px 0px 1px var(--hearder-bg-clr-),
                        -280px -0px 1px var(--hearder-bg-clr-);

                .carousel-top, .carousel-bottom{
                    display: flex;
                    gap: 7%;
                    animation: scroll 7s linear infinite;
                    transition: .7s ease-in-out;

                    .carousel-item{
                        text-wrap: nowrap;
                        font-family: var(--text-regular1);

                        .style-1{
                            font-family: var(--text-stylish1);
                        }
                        .style-2{
                            font-family: var(--text-stylish2);
                        }
                        .style-3{
                            font-family: var(--text-stylish1);
                        }
                        .style-4{
                            font-family: var(--text-regular1);
                            font-style: italic;
                        }
                        .style-5{
                            font-family: var(--text-stylish1);
                        }
                    }
                }
            }
            .carousel-top-wrapper::before,
            .carousel-top-wrapper::after, .carousel-bottom-wrapper::before,
            .carousel-bottom-wrapper::after {
                content: '';
                position: absolute;
                top: 0;
                width: 80px;
                height: 100%;
                z-index: 2;
                pointer-events: none;
            }
            .carousel-top-wrapper::before, .carousel-bottom-wrapper::after{
                left: 0;
                background: linear-gradient(to right, var(--hearder-bg-clr-), transparent);
            }

            .carousel-top-wrapper::after, .carousel-bottom-wrapper::before{
                right: 0;
                background: linear-gradient(to left,  var(--hearder-bg-clr-), transparent);
            }


            .section3-middle{
                position: relative;
                height: 80%;

                .sec-3-mid-top{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 20%;
                    text-align: left;
                    p{
                        text-wrap: nowrap;
                        padding: 5px 20px;
                        font-family: var(--text-regular2);
                        font-size: 30px;
                        span{
                            color: var(--text-color-secondary);
                            font-style: italic;
                        }
                    }
                    .mobile-p{
                        display: none
                    }
                    svg{
                        flex-shrink: 0;
                        fill: var(--text-color-secondary);
                    }
                    .Sign-in{
                        position: relative;
                        --_start: #d055e7;
                        --_end: #d693e4;
                        margin-right: 20px;
                        height: 40px;
                        padding: 5px 18px;
                        border-radius: 7px;
                        font-family: var(--text-regular1);
                        font-size: 14px;
                        color: var(--text-color-main);
                        text-wrap: nowrap;
                        border: none;
                        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.29);
                        background:linear-gradient(to right, var(--_start) 20%, var(--_end));
                        cursor: pointer;
                        z-index: 1;
                    }
                    .Sign-in::before{
                        content: '';
                        position: absolute;
                        inset: 0;
                        background:linear-gradient(to right, var(--_end) 10%, var(--_start));
                        border-radius: 7px;
                        transition: all .3s ease-in-out;
                        opacity: 0;
                        z-index: -1;
                    }
                    .Sign-in:hover::before{
                        opacity: 1
                    }
                }

                .sec-3-mid-bottom{
                    display: flex;
                    height: 80%;   

                    .sec-3-mid-bottom-left{
                        width: 60%;

                        .stat-cards-container{
                            position: relative;
                            height: 100%;
                            font-family: var(--text-regular1);

                            .cards{
                                position: absolute;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 50%;
                                height: 30%;
                                border-radius: 20px;
                                text-align: center;
                                background: var(--background-color);
                                box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.29);
                                cursor: pointer;
                                transition: all .7s ease-in-out;


                            }
                            .cards:hover{
                                transform: scale(1.02);
                            }
                            .stat-card1{
                                left: 15%;
                                transform: rotate(15deg);
                                background:linear-gradient(to left, var(--accent-color), #d693e4);
                                z-index: 15;

                                animation: appear .3s linear;
                                animation-timeline: view();
                                animation-range: entry 0% cover 35%;
                            }
                            .stat-card2{
                                top: 30%;
                                left: 15%;
                                background:linear-gradient(to right, white 60%, #f2e4f5);
                                transform: rotate(-15deg);
                                z-index: 15;

                                animation: appear .3s linear;
                                animation-timeline: view();
                                animation-range: entry 0% cover 30%;
                            }
                            .stat-card3{
                                top: 60%;
                                left: 25%;
                                background: var(--hearder-bg-clr-);
                                transform: rotate(15deg);
                                z-index: 5;

                                animation: appear 0.3s linear;
                                animation-timeline: view();
                                animation-range: entry 0% cover 30%;
                            }
                        }
                    }

                    .sec-3-mid-bottom-right{
                        display: flex;
                        justify-content: start;
                        width: 60%;
                        overflow: hidden;
                
                        img{
                            height: 120%;
                            width: 120%;
                            transform: translate(-16%, -3%);
                            filter: drop-shadow(3px 10px 5px rgba(0, 0, 0, 0.1));
                            z-index: 10;
                        }
                    }
                }
            }
            .section3-middle::before{
                content: '';
                position: absolute;
                inset: 0;
                
               
                z-index: -1;
            }
        }
    }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-101%);
  }
}

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

@media(max-width: 1100px){
    main{
        .body-container{
            .section-3{
                .carousel-top-wrapper, .carousel-bottom-wrapper{
                    box-shadow: 210px 0px 1px var(--hearder-bg-clr-),
                        -230px -0px 1px var(--hearder-bg-clr-);
                }
            }
        }
    }
}
@media(max-width: 900px){
    main{
        .body-container{
            .section-3{
                margin-top: 100px;
                .carousel-top-wrapper, .carousel-bottom-wrapper{
                    box-shadow: 165px 0px 1px var(--hearder-bg-clr-),
                        -180px -0px 1px var(--hearder-bg-clr-);
                }
                .section3-middle{
                    .sec-3-mid-top{
                        p{
                            font-size: 20px;
                            padding: 5px 10px;
                        }
                        .Sign-in{
                            margin-right: 10px;
                        }
                    }
                    .sec-3-mid-bottom{
                        .sec-3-mid-bottom-left{
                            .stat-cards-container{
                                .cards{
                                    width: 80%
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media(max-width: 500px){
    main{
        .body-container{
            .section-3{
                .carousel-top-wrapper, .carousel-bottom-wrapper{
                    box-shadow: 0px 0px 0px var(--hearder-bg-clr-),
                        -0px -0px 0px var(--hearder-bg-clr-);
                }
                .section3-middle{
                    .sec-3-mid-top{
                        .mobile-p{
                            display: block;
                            padding-left: 0px;
                            font-size: 15px;
                        }
                        .desktop-p{
                            display: none
                        }
                        .Sign-in{
                            margin-right: 0px;
                            padding: 0px 5px;
                        }
                        svg{
                            width: 15px;
                        }
                    }
                    .sec-3-mid-bottom{
                        .sec-3-mid-bottom-left{
                            .stat-cards-container{
                                .cards{
                                    width: 75%;
                                    height: 25%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}