body, html{
    background-color: #fff;
    font-family: sans-serif;
    margin: 0;
    overflow:  hidden;
}

.main_wrapper{
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 0;
    left: 0;
    margin: 0;
    background-color: #192E44;
}

/*top_navbar*/
.top_navbar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    width: 100vw;
    background-color: #192E44;
    z-index: 50;
}

.top_navbar a{
    text-decoration: none;
    color: aliceblue;
}

.top_navbar ul{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95vw;
}

.top_navbar a:hover{
    color:#E5B640;
}

.logo{
    width: 200px;
}

.mobile_navbar{
    display: none;
}

.show_mobile{
    display: none;
}

.hide_mobile{
    display: flex;
}
/*hero_div*/
.hero_div{
    position: relative;
    top: 100px;
    width: 100vw;
    height: calc(100vh - 150px);
}

.hero_carousel_item{
    width: 100vw;
    height: calc(100vh - 150px);
    object-fit: cover;
}

.overlay_div{
    position: absolute;
    width: 100vw;
    height: calc(100vh - 100px);
    background: linear-gradient(#192E44, #192e446f, #192e4417, #00000000);
    z-index: 40;
}


.hero_content{
    padding: 20px;
    position: relative;
    top: -85vh;
    width: 80vw;
    z-index: 40;
}

.hero_content h1{
    color: aliceblue;
    font-size: 4rem;
    font-family:'Times New Roman', Times, serif;
}

.hero_content h3{
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: 500;
}


.yellow_btn{
    background-color: #E5B640;
    outline: none;
    border: none;
    padding: 15px 40px;
    border-radius: 5px;
    font-size: medium;
    color: aliceblue;
    cursor:  pointer;
}


.yellow_btn:hover{
    transform: scale(1.1);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    transition: 100ms;
}

.yellow_btn:active{
    transform: scale(0.9);
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    transition: 100ms;
}

/*insights_div*/
.insights_div{
    position: relative;
    z-index: 40;
    width: 70vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    top: 0vh;
    grid-gap: 5vw;
}

.insights_item{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    color: #192E44;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

.insights_item i{
    font-size: 50px
}

/*about_us_div*/
.about_us_div{
    padding: 20px;
    background-color: aliceblue;
    margin-top: 200px;
    color: #192E44;
}

.subheading{
    color: #192E44;
    margin-top: 5vh;
}

/*why us list*/
.why_us_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2vw;
    list-style: none;
}

.why_us_list li{
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    cursor: pointer;
}

.why_us_list li i{
    font-size: 40px;
    /* color: #02e075; */
    color: #192E44;
}

.why_us_list li:hover{
    transform: translateY(-20px);
    transition: 300ms;
}


/*contact_div*/
.contact_div{
    background-color: #1f3954;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact_form_div{
    padding: 50px;
}
.contact_form{
    width: 50vw;
}

.contact_form input{
    width: 20vw;
    font-size: medium;
    padding: 10px 5px;
    border-radius: 5px;
    outline: none;
    border: 1px solid aliceblue;
}

.contact_form textarea{
    width: 41vw;
    font-size: medium;
    outline: none;
    border: 1px solid aliceblue;
    padding: 10px 5px;
    border-radius: 5px;
    height: 100px;
    resize: none;
    font-family: sans-serif;
}


/*footer_div*/
.footer_div{
    position: relative;
    top: 0;
    background-color: #192E44;
    color: aliceblue;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer_div ul{
    list-style: none;
    text-decoration: none;
}

.footer_div a{
    color: aliceblue;
    text-decoration: none;
    font-size: medium;
}

.footer_item h2{
    margin-left: 40px;
}

.footer_item h3{
    font-weight: 500;
}

.footer_item i{
    font-size: 30px;
}

.social_media_list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 15vw;
}


/*Gallery.html*/
.gallery_div{
    top: 90px;
    height: calc(100vh - 100px);
    width: 100vw;
    display: block;
}

.preview_div{
    height: calc(100vh - 100px);
    width: 100vw;
    z-index: 30;
    position: relative;
    top: 0;
}
.preview_div img{
    width: 100vw;
    height: calc(100vh - 100px);
    object-fit: cover;
    background-color: #000;
    z-index: 40;
}
.preview_div p{
    padding: 10px;
    background-color: #00000094;
    color: #ffffffa1;
    position: relative;
    top: -50px;
    left: 80%;
    z-index: 30;
    font-size: small;
}
.gallery_list_div{
    width: 100vw;
    height: 20vh;
    background-color: #000000a4;
    position: relative;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gallery_item img{
    width: 200px;
    height: 19vh;
    object-fit: cover;
    cursor: pointer;
    padding: 5px;
}

.gallery_item img:hover{
    border-radius: 20px;
    transform: rotate(5deg);
    transition: 300ms;
}


/*Language Translation*/
.french{
    display: none;
}


/*#########################################################################*/
/*MOBILE RESPONSIVENESS*/
@media screen and (max-width: 767px){
    /*top_navbar*/
    .hide_mobile{
        display: none;
    }

    .show_mobile{
        display: block;
    }


    .top_navbar ul{
        margin-left: -30px;
    }

    .top_navbar i{
        color: aliceblue;
        cursor: pointer;
        font-size: 30px;
    }

    .logo{
        width: 180px;
    }

    /*mobile_navbar*/
    .mobile_navbar{
        position: fixed;
        top: 97px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        display: none;  /*toggle: 'none'*/

    }
    
    .mobile_navbar ul{
        display: block;
        align-items: center;
    }

    .hero_content h1{
        color: aliceblue;
        font-size: 3rem;
        font-family:'Times New Roman', Times, serif;
    }
    /*insights_div*/
    .insights_div{
        position: relative;
        z-index: 40;
        width: 80vw;
        display: grid;
        grid-template-columns: 1fr;
        top: 0vh;
        grid-gap: 5vw;
    }

    /*about us*/
    .why_us_list{
        display: grid;
        grid-template-columns: 1fr;
        list-style: none;
        margin-left: -40px;
        grid-gap: 20px;
    }

    .contact_form{
        width: 70vw;
    }

    .contact_form input{
        width: 70vw;
        font-size: medium;
        padding: 10px 5px;
        border-radius: 5px;
        outline: none;
        border: 1px solid aliceblue;
        margin-bottom: 10px;
    }

    .contact_form textarea{
        width: 70vw;
        font-size: medium;
        outline: none;
        border: 1px solid aliceblue;
        padding: 10px 5px;
        border-radius: 5px;
        height: 100px;
        resize: none;
        font-family: sans-serif;
    }
    /*footer_div*/
    .footer_div{
        position: relative;
        top: 0;
        background-color: #192E44;
        color: aliceblue;
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr;
    }

    .footer_div ul{
        list-style: none;
        text-decoration: none;
    }

    .footer_div a{
        color: aliceblue;
        text-decoration: none;
        font-size: medium;
    }

    .footer_item h2{
        margin-left: 40px;
    }

    .footer_item h3{
        font-weight: 500;
    }

    .footer_item i{
        font-size: 1.5rem;
    }

    .social_media_list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 50vw;
    }

    /*gallery.html*/
    .preview_div p{
        left: 50vw;
    }

    .gallery_item img{
        border-radius: 10px;
    }
}