@import "general.css";

body{
    main{
        display: flex;
        flex-direction: column;
        align-items: center;
        div{
            .gradient{
                position: absolute;
                z-index: 5;
                height: 100%;
                aspect-ratio: 1 / 2;
            }
            .mobileGradient{
                display: none;
                position: absolute;
                z-index: 5;
                height: 50vw;
                width: 100vw;
                background: linear-gradient(to top, white, transparent);
                transform: translateY(calc(+100% + 1px));
            }
            .heading{
                text-align: center;
                color: black;
                font-family: "KyivTypeBold", serif;
                font-size: min(7.5vw, 50px);
                margin: clamp(10px, 3vw, 25px) 0;
                max-width: 95vw;
                position: relative;
                padding-right: 1px;
            }
            .button{
                text-decoration: none;
                background-color: var(--pink);
                border: solid clamp(1px, 0.25vw, 2px) black;
                border-radius: clamp(5px, 1.6vw, 12px);
                font-size: min(4vw, 30px);
                padding: clamp(2px, 1.5vw, 8px) clamp(3px, 2vw, 12px);
                transition: transform 0.25s ease;
                font-family: "KyivTypeBold", serif;
                color: white;
                user-select: none;
                -webkit-user-select: none;
                margin: clamp(10px, 3vw, 25px) 0;
            }
        }
        #welcome{
            height: var(--containrHeight);
            width: 100%;
            display: flex;
            position: relative;
            flex-direction: row-reverse;
            .first{
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    height: 100%;
                }
                h1{
                    color: white;
                    filter: drop-shadow(2px 2px 5px var(--gray3));
                    font-family: "Kurale", serif;
                    font-size: max(8vh, 44px);
                    text-align: center;
                    position: absolute;
                    z-index: 6;
                    line-height: max(24vh, 132px);
                    span{
                        font-family: 'Lavishly Yours', cursive;
                        font-size: 4em;
                    }
                }
            }
            .second{
                height: 100%;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: max(3vw, 30px);
                position: relative;
                h1{
                    font-family: "KyivType", serif;
                    font-size: 1em;
                    text-align: left;
                    color: black;
                    margin-bottom: 0.5em;
                    align-self: flex-start;
                    width: 75%;
                    margin-left: max(3vw, 10px);
                    #span1{
                        font-family: "KyivTypeBolder", serif;
                    }
                    #span2{
                        font-family: "KyivTypeBold", serif;
                    }
                }
                p{
                    font-family: "Kurale", serif;
                    font-size: 0.4em;
                    text-align: left;
                    color: black;
                    align-self: flex-end;
                    width: 75%;
                    margin-right: 3vw;
                }
            }
            #oneGradient{
                background: linear-gradient(to right, white, transparent);
                transform: translateX(calc(-100% - 1px));
            }
        }
        #services{
            display: flex;
            flex-direction: column;
            align-items: center;
            #sWrapper{
                width: 90vw;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                row-gap: 25px;
                justify-items: center;
                .sCard{
                    position: relative;
                    width: 90%;
                    aspect-ratio: 7 / 5;
                    transition: transform 0.25s ease;
                    .sGradient{
                        background-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 20%);
                        position: absolute;
                        width: 100%;
                        height: 100%;
                    }
                    img{
                        position: absolute;
                        width: 100%;
                    }
                    .sCardDescription{
                        position: absolute;
                        bottom: 0.25vw;
                        left: 0.5vw;
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        h1{
                            font-family: "Kurale", serif;
                            font-weight: 100;
                            font-size: 1.5vw;
                            text-align: center;
                            color: white;
                            text-shadow: 0 0 10px rgba(0,0,0,0.4);
                        }
                        svg{
                            height: 1.2vw;
                            transform: translateY(15%);
                            filter: drop-shadow(0 0 10px rgba(0,0,0,0.4));
                        }
                    }
                }
            }
        }
        #ceo{
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
            align-items: stretch;
            .first{
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 35vw;
                    filter: drop-shadow(6px 6px 6px var(--shadow));
                    padding: 0 1.5em;
                }
            }
            .second{
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: max(3vw, 30px);
                position: relative;
                h1{
                    font-family: "KyivTypeBold", serif;
                    font-size: 0.75em;
                    text-align: left;
                    color: black;
                    margin-bottom: 0.5em;
                    margin-right: 3vw;
                    width: 75%;
                }
                h2{
                    font-family: "KyivType", serif;
                    font-size: 0.6em;
                    text-align: right;
                    color: black;
                    margin-left: 3vw;
                    width: 75%;
                    #span3{
                        font-family: "KyivTypeBold", serif;
                    }
                    #span4{
                        font-family: "KyivTypeBolder", serif;
                    }
                }
                svg{
                    position: absolute;
                    width: 6vw;
                    opacity: 0.5;
                }
                #comb{
                    right: 1.5em;
                    top: 1.25em;
                    path{
                        stroke: black;
                    }
                }
                #scissors{
                    left: 1.5em;
                    bottom: 1.25em;
                    path{
                        fill: black;
                    }
                }
            }
        }
        #reviews{
            display: flex;
            flex-direction: column;
            align-items: center;
            .wrapper{
                width: 95%;
                display: grid;
                justify-items: center;
                gap: 20px;
                grid-template-columns: repeat(4, 1fr);
                .card{
                    background-color: white;
                    display: flex;
                    flex-direction: column;
                    gap: min(7px, 1vw);
                    padding: min(15px, 2vw);
                    border: solid clamp(2px, 0.3vw, 3px) var(--gray3);
                    transition: transform 0.25s ease;
                    font-size: clamp(7px, 3vw, 22px);
                    width: 85%;
                    .user{
                        display: flex;
                        align-items: center;
                        gap: 3.5%;
                        width: 100%;
                        .avatar{
                            width: 22.5%;
                            min-width: 22.5%;
                            aspect-ratio: 1 / 1;
                            overflow: hidden;
                            border-radius: 50%;
                            border: solid clamp(1px, 0.2vw, 2px) var(--gray3);
                        }
                        .userInfo{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            height: 100%;
                            flex-grow: 1;
                            h1{
                                font-size: 1em;
                                font-family: "KyivTypeBold", serif;
                                color: black;
                            }
                            h2{
                                font-size: 0.8em;
                                font-family: "KyivType", serif;
                                color: black;
                            }
                        }
                    }
                    .stars{
                        display: flex;
                        width: 100%;
                        gap: 1.2%;
                        svg{
                            width: 7.5%;
                            height: auto;
                            aspect-ratio: 1 / 1;
                        }
                        .yellow path{
                            fill: var(--yellow);
                        }
                    }
                    p{
                        font-family: "Kurale", serif;
                        color: var(--gray3);
                        font-size: 0.7em;
                        margin-bottom: auto;
                        overflow: hidden;
                    }
                    h3{
                        font-family: "Kurale", serif;
                        color: var(--gray3);
                        opacity: 0.5;
                        font-size: 0.7em;
                        cursor: pointer;
                        margin-bottom: auto;
                        display: none;
                        width: min-content;
                    }
                    a{
                        width: 30%;
                        .google{
                            display: block;
                            width: 100%;
                            height: auto;
                            overflow: visible;
                        }
                    }
                }
            }
        }
    }
}

@media (max-aspect-ratio: 7 / 5){
    body{
        main{
            #welcome{
                height: auto;
                .first{
                    height: auto;
                    img{
                        height: auto;
                        width: 55vw;
                    }
                    h1{
                        font-size: 5vw;
                        line-height: 15vw;
                    }
                }
                .second{
                    height: auto;
                }
            }
        }
    }
}

@media (max-width: 1000px){
    body{
        main{
            div{
                .gradient{
                    display: none;
                }
                .mobileGradient{
                    display: block;
                }
            }
            #welcome{
                height: auto;
                flex-direction: column;
                align-items: center;
                .first{
                    width: 100vw;
                    height: auto;
                    aspect-ratio: auto;
                    img{
                        width: 100%;
                    }
                    h1{
                        font-size: 8vw;
                        line-height: 25vw;
                    }
                }
                .second{
                    width: 85vw;
                    margin-top: max(2vh, 10px);
                    flex-grow: 0;
                    h1{
                        width: 87.5%;
                        font-size: 7vw;
                        margin-left: 0;
                    }
                    p{
                        width: 87.5%;
                        font-size: 2.75vw;
                        margin-right: 0;
                    }
                }
            }
            #services{
                #sWrapper{
                    grid-template-columns: repeat(2, 1fr);
                    row-gap: 15px;
                    .sCard{
                        .sCardDescription{
                            bottom: 0.5vw;
                            left: 1vw;
                            h1{
                                font-size: 3vw;
                            }
                            svg{
                                height: 2.25vw;
                            }
                        }
                    }
                }
            }
            #ceo{
                flex-direction: column;
                .first{
                    width: 100vw;
                    height: auto;
                    aspect-ratio: auto;
                    img{
                        width: 75%;
                        height: auto;
                        padding: 0 0;
                        filter: drop-shadow(3px 3px 3px var(--shadow));
                    }
                }
                .second{
                    width: 100vw;
                    margin: 2vh 0;
                    h1{
                        width: 80%;
                        font-size: 5vw;
                    }
                    h2{
                        width: 80%;
                        font-size: 3vw;
                    }
                    svg{
                        display: none;
                    }
                }
            }
            #reviews{
                .wrapper{
                    grid-template-columns: repeat(3, 1fr);
                }
            }
        }
    }
}

@media (max-width: 700px){
    body{
        main{
            #reviews{
                width: 95vw;
                .wrapper{
                    grid-template-columns: repeat(2, 1fr);
                    .card{
                        width: 90%;
                    }
                }
            }
        }
    }
}

@media (hover: hover) and (pointer: fine){
    .button:hover{
        transform: scale(1.05);
    }
    .sCard:hover{
        transform: scale(1.025);
    }
    .card:hover{
        transform: scale(1.025);
    }
}