/*========================================================================================================================================================*/
/*ALL SCREEN RESOLUTIONS (DEFAULT LAYOUT)*/
/*========================================================================================================================================================*/

.parkingsection1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: fadeInAnimation ease 3s;
    transition: ease 1s;
}

.parkingsection1container {
    overflow: hidden;
    height: 650px;
    width: 100%;
}

.parkingsection1shape {
    position: relative;
    top: 5px;
    left: 350px;
    width: 900px;
    height: 500px;
    border-radius: 20px;
    background-color: #b9c1cc;
    animation: parkingsection1shape;
    animation-duration: 2s;
}

@keyframes parkingsection1shape {
    from {
        left: 1500px;
    }

    to {
        left: 350px;
    }
}

.parkingsection1container img {
    position: relative;
    top: -440px;
    left: 40px;
    border-radius: 20px;
    object-fit: cover;
    width: 880px;
    animation: parkingsection1img;
    animation-duration: 2s;
}

@keyframes parkingsection1img {
    from {
        top: -1020px;
    }

    to {
        top: -440px;
    }
}

.parkingsection1message {
    position: relative;
    top: -870px;
    left: 660px;
    width: 550px;
    background-color: white;
    border-radius: 20px;
    padding: 20px 40px 20px 40px;
    box-shadow: 5px 10px 18px #888888;
    animation: parkingsection1message;
    animation-duration: 2s;
}

    .parkingsection1message h1 {
        font-weight: bold;
        font-size: 18px;
        color: #fc4444;
    }

    .parkingsection1message p {
        font-size: 12px;
    }

@keyframes parkingsection1message {
    from {
        top: 0px;
    }

    to {
        top: -870px;
    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.parkingsection2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.parkingsection2container h1 {
    font-size: 25px;
    color: #fc4444;
    border: solid;
    border-color: black;
    border-width: 1px;
    border-radius: 20px;
    padding: 20px;
    margin: 40px;
    text-align: center;
}

#parkingsection2carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    /*=========================================================================================================================*/
    /*==========override bootstrap css==========*/
    #parkingsection2carousel .carousel-inner {
        width: 1120px;
        height: 600px;
        display: flex;
        align-items: center;
        /*border:solid;*/
    }

.parkingsection3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid;
    border-radius: 20px;
    padding: 30px;
    margin: 20px;
}

    .parkingsection3 p {
        font-size: 20px;
    }

/*========================================================================================================================================================*/
/*iPAD AND LANDSCAPE*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 1180px) {
    .parkingsection1message {
        left: 560px;
        width: 550px;
        padding: 20px 40px 20px 40px;
    }
}

/*========================================================================================================================================================*/
/*iPAD AND PORTRAIT*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 820px) {
    .parkingsection1message {
        left: 260px;
        width: 550px;
        padding: 20px 40px 20px 40px;
    }
}


    /*========================================================================================================================================================*/
    /*TABLET AND PORTRAIT*/
    /*========================================================================================================================================================*/
    @media only screen and (max-width: 800px) {
        .parkingsection1container {
            height: 70vh;
        }

        .parkingsection1shape {
            left: 130px;
            width: 650px;
        }

        @keyframes parkingsection1shape {
            from {
                left: 1500px;
            }

            to {
                left: 130px;
            }
        }

        .parkingsection1container img {
            top: -400px;
            left: 10px;
            width: 750px;
        }

        @keyframes parkingsection1img {
            from {
                top: -1020px;
            }

            to {
                top: -400px;
            }
        }

        .parkingsection1message {
            top: -500px;
            left: 150px;
        }


        @keyframes parkingsection1message {
            from {
                top: 0px;
            }

            to {
                top: -500px;
            }
        }

        #parkingsection2carousel .carousel-inner {
            width: 100%;
            height: unset;
        }

        .parkingsection3 {
            margin: 10px;
            padding: 15px;
            text-align: center;
        }

            .parkingsection3 p {
                font-size: 16px;
            }
    }


    /*========================================================================================================================================================*/
    /*PHONE AND PORTRAIT*/
    /*========================================================================================================================================================*/
    @media only screen and (max-width: 480px) {
        .parkingsection1container {
            height: 110vh;
        }

        .parkingsection1shape {
            top: 5px;
            left: 100px;
            width: 260px;
            height: 200px;
        }

        .parkingsection1container img {
            top: -180px;
            width: 300px;
        }

        @keyframes parkingsection1img {
            from {
                top: -1020px;
            }

            to {
                top: -180px;
            }
        }

        .parkingsection1message {
            top: -220px;
            left: 5px;
            width: 350px;
            padding: 20px 20px 20px 20px;
        }

            .parkingsection1message h1 {
                font-size: 18px;
            }

            .parkingsection1message p {
                font-size: 12px;
            }

        @keyframes parkingsection1message {
            from {
                top: 0px;
            }

            to {
                top: -200px;
            }
        }

        .parkingsection2container h1 {
            font-size: 26px;
            margin: 20px;
        }

        #parkingsection2carousel .carousel-inner {
            width: 380px;
            height: 300px;
        }

        .parkingsection3 p {
            font-size: 16px;
        }
    }