/*///////////////////////////////////////////////*/
/*/////////////// Section top   /////////////////*/
/*///////////////////////////////////////////////*/

/*.container {
    display: grid;
    grid-template-rows: 980px 1080px 525px 800px 600px 200px;
    grid-template-columns: auto;
    grid-template-areas: "top" "our_solution" "why_chose" "how_it_works" "our_trusted_partners" "footer";
}*/

.container .top {
    grid-area: top;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 300px 75px 575px;
    grid-template-areas: "top_banner" "top_text" "bottom_text";
}

    .container .top .top_banner {
        grid-area: top_banner;
        display: grid;
        grid-template-rows: 125px 75px 100px;
        grid-template-columns:1fr;
        grid-template-areas:"logo" "mini_nav" "navMobile"
    }
        .container .top .top_banner .NavMobile {
            grid-area: navMobile;
            display: grid;
            grid-template-rows: 1fr;
            grid-template-columns: repeat(4, 1fr);
            color: white !important;
            font-size: 0.9rem;
            text-decoration:none;
        }       

    .container .top .top_banner .dropdownMenu {
        display:none;      
    }

        .container .top .top_banner .dropdownMenu .dropdown {
            grid-area: dropdown;
            display: grid;
            text-align: center;
            display: none;
        }

            .container .top .top_banner .dropdownMenu .dropdown a {
                color: white;
                padding: 10px;
            }

                .container .top .top_banner .dropdownMenu .dropdown a:hover {
                    color: #159dd7;
                    border-bottom: 1px solid #159dd7;
                }

    .container .top .top_banner .logo {
        grid-area: logo;
        background-image: url("../../Images/logo_cargovision.png");
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    .container .top .top_banner .mini_nav {
        grid-area: mini_nav;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: "connexion call_us";
        color: white;
        font-size: 0.9rem;
    }

        .container .top .top_banner .mini_nav .connexion {
            grid-area: connexion;
            border-right: 1px solid #159dd7;
        }

        .container .top .top_banner .mini_nav .call_us {
            grid-area: call_us;
        }

    .container .top .top_banner .nav {
        display:none;
    }

        .container .top .top_banner .nav .nav-container {
            grid-area: nav-container;
        }


.container .top .top_text {
    grid-area: top_text;
    font-size: 1.5rem;
    color: white;
}

.container .top .try_it {
    grid-area: 3/2/7/3;
    background-color: #ddddde;
    display: grid;
    grid-template-rows: 80px repeat(6, 70px) auto 100px;
    grid-template-columns: 1fr;
    z-index: 3;
}

.try_it .hidden_Placeholder {
    grid-area: 7/1/1/1;
    z-index: 2;
}

.container .top .bottom_text {
    grid-area: bottom_text;
    display: grid;
    grid-template-rows: 1fr 8fr 1fr;
    grid-template-columns: 1fr 7fr 1fr;
    grid-template-areas: ". . ." ". allyourneedsText ." ". . .";
    text-align: center;
}

    .container .top .bottom_text .allyourneedsText {
        grid-area: allyourneedsText;
        display: grid;
        grid-template-rows: 7fr 2fr;
        grid-template-areas:  "text" ".";
    }

        .container .top .bottom_text .allyourneedsText .text {
            grid-area: text;
            color: white;
            font-size: 1.0em;
        }


.container .top .top_bg {
    grid-area: 1/1/6/4;
    background-image: url("../../Images/top_background.png");
    z-index: -3;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container .top .filter_bg {
    grid-area: 1/1/6/4;
    background-color: rgba(0, 18, 20, 0.40);
    z-index: -2;
}

.container .top .top_bg_triangle {
    grid-area: 1/1/5/4;
    background-image: url("../../Images/top_background_triangle.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    z-index: -2;
}

nav {
    display: grid;
    grid-template-rows: minmax(min-content, 100px) min-content;
}

    nav .content {
        background-color: var(--greyapple);
        display: grid;
        place-items: end;
        grid-auto-flow: column;
        align-content: space-evenly;       
    }

        nav .content .menu {
            display: none;
        }

            nav .content .menu:hover {
                filter: opacity(50%);
                cursor: pointer;
                user-select: none;
                -webkit-user-select: none;
            }

        nav .content .links {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 25px;
            place-items: center;
        }

            nav .content .links a {
                color: white;
            }

                nav .content .links a:hover {
                    color: #159dd7;
                    border-bottom: 1px solid #159dd7;
                }


@media only screen and (max-width:770px) {

    nav {
        display: grid;
        grid-template-rows: minmax(min-content, 70px) min-content;
    }

    .container .top .try_it {
        grid-template-rows: 50px 50px repeat(4, 95px) 120px;
    }
}


@media only screen and (max-width:1350px) {
    nav .content .menu {
        display: initial;
    }

    nav .content .links {
        display: none;
    }

    nav .content {
        place-items: center;
    }
}

@media only screen and (max-width:1025px) {
    .container .top .allyourneeds {
        display: none;
    }

    .container .top .top_banner .dropdownMenu .dropdown {
        grid-auto-flow: column;
    }
}

@media only screen and (max-width:770px) {
    nav .content .menu {
        display: none;
    }

    nav .content .links {
        display: initial;
    }

}

@media (min-width: 750px) {
    .container .top .top_banner .NavMobile {
        font-size: 20px;
    }

    .container .top .top_banner .mini_nav {
        font-size: 20px;
    }

    .container .top .bottom_text .allyourneedsText {
        grid-template-rows: 1fr 7fr 2fr;
        grid-template-areas: "." "text" ".";
    }

    .container .top {
        grid-template-rows: 300px 100px 550px;
    }

    .container .top .top_text {
        font-size: 1.8rem;
    }
}

@media (min-width: 1200px) {

    .container .top {
        grid-template-columns: auto 450px;
        grid-template-areas: "top_banner top_banner" "top_text top_text" "bottom_text bottom_text" "bottom_text bottom_text" "bottom_text bottom_text";
    }

        .container .top .top_banner {
            grid-template-columns: minmax(350px, 500px) auto;
            grid-template-rows: 2fr 5fr 3fr;
            grid-template-areas: "logo mini_nav" "logo navMobile" ". dropdownMenu";
        }

            .container .top .top_banner .dropdownMenu {
                grid-area: dropdownMenu;
                display: grid;
                grid-template-columns: auto 180px;
                grid-template-rows: 1fr;
                grid-template-areas: "dropdown .";
                z-index: 5;
            }

            .container .top .top_banner .mini_nav {
                grid-template-columns: auto 160px 170px !important;
                grid-template-areas: ". connexion call_us" !important;
                font-size: 12px !important;
            }

    nav .content {
        margin-right: 10px;
    }

   /* .container .top .top_banner .nav {
        grid-area: nav;
        color: white;
        display: grid !important;
        grid-template-columns: auto;
        grid-template-rows: 1fr;
        grid-template-areas: "nav-container"
    }*/

        .container .top .top_banner .nav .nav-container {
            grid-area: nav-container;
        }

    /*.container .top .top_banner .NavMobile {
        display: none ;
    }*/

    .container .top .bottom_text {
        grid-template-columns: 1fr 2fr 1fr;
    }

        .container .top .bottom_text .allyourneedsText .text {
            font-size: 18px ;
        }
}