@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{
        .section-4{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            height: fit-content;
            min-height: 80%;
            margin-top: 150px;
            margin-bottom: 100px;
       
            .section-4-top{
                width: 100%;
                height: 10%;
                text-align: center;
                font-family: var(--text-regular1);
                font-size: 30px;

                h3{
                    text-wrap: nowrap;
                    span{
                        font-family: var(--text-stylish1);
                        color: var(--accent-color);
                    }
                }
            }

            .section-4-middle{
                width: 500px;
                height: fit-content;
                min-height: 80%;
                margin-top: 50px;
                font-family: var(--text-regular2);

                .faq{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    width: 100%;
                    height: fit-content;
                    margin-bottom: 10px;
                    cursor: pointer;

                    details{
                        width: 100%;
                        height: fit-content;
                        border-radius: 15px;
                        font-size: 17px;
                        box-shadow: .5px .5px 4px rgba(0, 0, 0, 0.15);
                        overflow: hidden;
                        z-index: 5;
                        transition: height 1s ease-in-out;
                        
                        .question{
                            position: relative;
                            display: flex;
                            align-items: center;
                            min-height: 44px;
                            max-height: 44px;
                            padding: 5px 15px;
                            margin-right: 35px;
                            font-size: 16px;
                            list-style-position: outside;
                            z-index: 5;

                            svg{
                                position: absolute;
                                right: -15px;
                                padding: 2px 2px;
                                background: inherit;
                                border-radius: 100%;
                                transition: all .3s ease-in-out;
                            }
                            svg:hover{
                                fill: var(--text-color-secondary);
                                background: #f3f7f7;
                            }
                        }
                        summary::marker{
                           color: white;
                        }
                        .answer{
                            width: 94%;
                            padding: 15px 10px;
                            border-radius: 15px;
                            margin-left: 4.9px;
                            margin-bottom: 5px;
                            background: #f3f7f7;
                            font-size: 15px;
                            text-wrap: wrap;
                            transition: height 1s ease-in-out;
                            z-index: 1;
                        }
                    }
                    details::details-content{
                        block-size: 0;
                        transition: all .5s ease-in-out;
                        transition-behavior: allow-discrete;
                    }
                    details[open]::details-content{
                        block-size: auto;
                    }
                    details[open]{
                        .question{
                            svg{
                                rotate: 45deg;
                            }
                        }
                    }
                }
            }

            .section-4-bottom{
                display: flex;
                align-items: center;
                position: relative;
                width: 34%;
                height: 10%;
                margin-top: 80px;
                border-radius: 30px;
                text-align: center;
                font-family: var(--text-regular2);
                font-size: 17px;
                box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.07), -.05px -.05px 3px rgba(0, 0, 0, 0.1);

                input{
                    height: 31px;
                    width: 85%;
                    border-radius: 30px;
                    border: none;
                    background-color: var(--background-color-main);
                    text-align: center;
                    font-family: var(--text-regular1);
                    font-size: 17px;
                }
                input:focus{
                    border: none;
                    outline: none;
                    background-color: var(--background-color-main);
                }
                input::placeholder{
                    font-style: italic;
                    margin-left: 10px;
                    color: var(--text-color-secondary);
                }
                input:focus::placeholder {
                    opacity: 0;
                    transition: opacity 0.3s;
                }
                input:-webkit-autofill {
                    -webkit-text-fill-color: #000 !important;
                    transition: background-color 5000s ease-in-out 0s;
                }

                button{
                    height: 20px;
                    width: 20px;
                    background: none;
                    border: none;
                    border-left: .3px solid var(--secondary-background-color);
                    cursor: pointer;

                    svg{
                        width: 21px;
                        height: 21px;
                        margin-left: 30%;
                        fill: var(--text-color-secondary);
                    }
                }
            }
        }
    }
}

@media(max-width: 1100px){
    main{
        .body-container{
            .section-4{
                .section-4-bottom{
                    input::placeholder{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
@media(max-width: 900px){
    main{
        .body-container{
            .section-4{
                .section-4-top{
                    h3{
                        font-size: 30px;
                    }
                }
                .section-4-middle{
                    width: 480px;
                    .faq{
                        details{
                            .question{
                                font-size: 15px;
                                svg{
                                    fill: #cecbcb;
                                }
                            }
                            .answer{
                                font-size: 14px;
                            }
                        }
                    }
                }
                .section-4-bottom{
                   display: none;
                }
            }
        }
    }
}
@media(max-width: 500px){
    main{
        .body-container{
            .section-4{
                .section-4-top{
                    h3{
                        font-size: 25px;
                    }
                }
                .section-4-middle{
                    width: 90%;
                    .faq{
                        details{
                            .question{
                                font-size: 13px;
                            }
                            .answer{
                                margin-left: 3px;
                                padding: 15px 7px;
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
    }
}