/* ====================== APARTMENTS GALLERY ====================== */

.data-modal {
    margin: 0 auto;
    width: auto;
    overflow: auto;
    background: rgba(249, 252, 245, 1);
    border: 70px solid rgba(249, 252, 245, 1);
    border-right: 15px solid rgba(249, 252, 245, 1);
    
    .cross-icon {
        display: block;
        position: fixed;
        top: 30px;
        left: 40px;
        padding: 2px;
        cursor: pointer;
        transition: all 300ms ease;
    }

    .cross-icon:hover {
        padding: 2px;
        border-radius: 50%;
        color: white;
        background-color: grey;
    }

    .apt-section {
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .left-panel {
            flex-basis: 10%;

            &.mobile {
                display: none;
            }
        }

        .right-panel {
            flex-basis: 70%;
        }
    }

    .grid-gallery {
        margin-bottom: 50px !important;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 250px;
        grid-auto-flow: dense;
        grid-gap: 30px;

        .grid-item {
            position: relative;
            overflow: hidden;
        }

        img {
            cursor: pointer;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s cubic-bezier(.165, .84, .44, 1);
        }

        .grid-item:hover img {
            transform: scale(1.1);
        }
    }

    .button {
        position: relative;
        
        button {
            font-weight: bolder;
            position: fixed;
            bottom: 0;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-size: 16px;
            border: 3px solid white;
            border-radius: 5px;
            background: white;
            color: #23c5ca;
            margin-bottom: 50px;
            padding: 15px 50px;
            cursor: pointer;
            transition: all 200ms ease;
        }
        
        button:hover {
            color: white;
            background: #23c5ca;
            box-shadow: 0 7px 10px 0 rgb(0 0 0 / 10%);
        }
    }
}


.apartments {
    margin-top: 4rem;

    .container.apartments__container {
        align-items: flex-start;
    }

    h2 {
        margin-bottom: 1.5rem;
    }

    .basic-apt-description {
        margin: 0 15rem;
        text-align: center;
    }

    .apartments__container {
        margin-top: 5rem;
        display: flex;
        justify-content: space-evenly;
        gap: 4rem;
        place-items: center;

        .apt-title, hr {
            display: none;
        }

        .card {
            position: relative;
            width: 100%;
            height: 35rem;
            max-width: 28rem;
            overflow: hidden;
            border-radius: 7px;
            transition: all 300ms ease;
            box-shadow: 0 5px 10px rgb(0 0 0 / 10%);

            .card-overlay {
                visibility: hidden;
                bottom: -100%;
                opacity: 0;
                transition: all 300ms ease;
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                position: absolute;
                align-items: center;
                justify-content: center;
                border-radius: 0 0 7px 10px;
                color: white;
                background: rgba(0, 0, 0, 0.5);
                padding: 120px 0 20px 0;

                .card-title {
                    margin-top: 4rem;
                    margin-bottom: .5rem;
                }

                .hline {
                    width:50%; 
                    height:1px; 
                    background: #fff
                }
    
                .card-button {
                    margin-bottom: 1rem;
                    padding: 10px 20px;
                    border-radius: 5px;
                    border: none;
                    outline: none;
                    width: fit-content;
                    font-weight: 100;
                }
            }

            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                border-radius: 7px;
                position: relative;
            }
        }

        

        .card:hover {
            transform: scale(1.04);
            box-shadow: 0 10px 15px 5px rgb(0 0 0 / 10%);

            .card-overlay  {
                bottom: 0;
                visibility: visible;
                opacity: 1;
                cursor: pointer;
            }
        }

        .apt__description {
            width: 25rem;
            margin-top: 2rem;
            word-break: normal;

            .apt__list {
                margin-top: 1.5rem;
                text-align: left;

                li {
                    list-style: circle;
                    margin-left: 1rem;
                }
            }
        }
    }

    hr {
        border-top: 1px solid #9e9e9e;
        margin-top: 6rem;
        width: 90%;
        margin-left: 5%;
    }
}

.booking {
    padding-top: 1rem;

    .bottom-text {
        text-align: center;
        margin-bottom: 3rem;

        h3 {
            margin-bottom: -15px;
        }
    }

    .booking__container {
        width: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgb(0 0 0 / 15%);

        form {
            display: flex;
            flex-direction: column;
            padding: 2vw 4vw;
            width: 65%;
            max-width: 600px;
            font-family: montserrat;
            
            input, textarea, select{
                border: 0;
                margin: 8px 0;
                padding: 20px;
                outline: none;
                border-radius: 5px;
                max-width: 23vw;
                min-width: 30w;
                box-sizing:border-box;
                background-color: white;
                font-family: montserrat;
            }

            input {
                margin-bottom: 15px;
            }

            textarea {
                resize:vertical;
            }
            
            button {
                margin-top: 10px;
                font-size: 16px;
                padding: 15px;
                background: #23c5ca;
                color: #fff;
                border: 0;
                cursor: pointer;
                border-radius: 5px;
                transition: all 200ms ease;
                font-family: montserrat;
            }
            
            button:hover {
                background: #0fb0b6;
            }
        }
    }
}

#lightbox {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;

    img {
        scale: 70%;
    }
}

#lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .data-modal {
        border-right: 0;
        border-left: 0;

        &::backdrop {
            background-color: rgba(249, 252, 245, 1);
        }

        .grid-gallery {
            grid-template-columns: 1fr 1fr;
            grid-gap: 15px;
        }

        .gallery-modal {
            .apt-section {
                display: block;

                .left-panel {
                    margin: 1.5rem 0 2rem;
                }
            }
        }
    }

    .apartments {
        margin: 4rem 1.5rem 0;

        .basic-apt-description {
            text-align: start;
            margin: 0;
        }

        h2 {
            margin-bottom: 4rem;
        }

        .apartments__container {
            display: block;

            .apartment {
                text-align: -webkit-center;
            }

            .apt-title {
                display: block;
                margin-bottom: 1rem;
                text-align: center;
            }

            .apt__description {
                width: 100%;
                font-size: 14px;
            }

            hr {
                display: block;
                border-top: 1px solid #9e9e9e;
                margin: 2rem 0;
                width: 70%;
                margin-left: 15%;
            }
        }
    }

    .booking {
        margin: 0 2rem;
        
        .booking__container {
            width: 100%;
            padding: 1rem 0;

            form, input, textarea, select {
                width: 100%;
                max-width: 100% !important;
            }
        }
    }
}