@import url("utilities.css");

* {
    transition: all 0.4s linear;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    width: 100%;
    height: 100vh;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        max-width: 350px;
    }
}

/* Navigation */
#top_bar {
    height: 50px;
    background-color: var(--blue);
}
nav {
    height: 80px;
    background-color: white;

    .container {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    ul {
        display: flex;
        list-style: none;
        padding-left: 0;
        margin: 0;

        li {
            height: 100%;

            a {
                display: block;
                text-decoration: none;
                padding: 8px 16px;
                color: var(--blue);
                font-weight: 500;

                &:hover {
                    color: var(--blue);
                }
            }
        }
    }

    img {
        height: 50px;
    }
}

/* Header */
#header {
    height: 50vh;
    background-color: var(--blue);
    background-image: linear-gradient(to right, #003760, #003660e7, #0036607f), url("../img/header_bg.jpg");

    .container,
    .row,
    .col-md-6 {
        height: 100%;
    }

    .col-md-6 {
        display: flex;
        align-items: center;

        h1 {
            font-weight: 700;
            font-size: 3.8em;
            color: aliceblue;
        }

        .header_text {
            display: none;

            &.active {
                display: block;
            }
        }
    }

    &.africa {
        background-image: linear-gradient(to right, #003760, #003660e7, #0036607f), url("../img/headers/africa.jpg");
    }

    &.europe {
        background-image: linear-gradient(to right, #003760, #003660e7, #0036607f), url("../img/headers/europe.jpg");
    }

    &.america {
        background-image: linear-gradient(to right, #003760, #003660e7, #0036607f), url("../img/headers/america.jpg");
        background-position: bottom;
    }

    &.australia {
        background-image: linear-gradient(to right, #003760, #003660e7, #0036607f), url("../img/headers/australia.jpg");
    }
}

/* Services */
#services {
    .col-md-4 {
        padding-left: 7px;
        padding-right: 7px;
    }

    .service {
        height: 250px;
        margin-bottom: 1em;

        .card-body {
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;

            .holder {
                background-color: var(--ocean);
                width: 80px;
                height: 80px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 250px;
                margin: 0 auto;
                margin-bottom: 1.5em;
            }

            img {
                width: 45px;
                height: 45px;
            }
        }
    }
}

/* Countries */
#countries {
    .col-md-3 {
        min-height: 350px;
        cursor: pointer;
        color: aliceblue;
        background-size: cover;
        padding: 0;

        &:hover {
            .inner {
                opacity: 1;
            }
        }

        .inner {
            background-image: linear-gradient(to right, #003660e9, #003660b9);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: calc(100% - 3em);
            width: calc(100% - 3em);
            padding: 1.5em;
            margin: 1.5em;
            opacity: 0;

            .bold {
                color: aliceblue !important;
            }
        }

        &#europe {
            background-image: url("../img/countries/europe.jpg");
        }

        &#africa {
            background-image: url("../img/countries/africa.jpg");
        }

        &#usa {
            background-image: url("../img/countries/usa.jpg");
        }

        &#australia {
            background-image: url("../img/countries/australia.jpg");
        }
    }
}

#tabs {
    .col-12 {
        display: flex;
    }

    .item {
        padding: 1em 2em;
        cursor: pointer;

        &:hover {
            background-color: var(--red);
            color: aliceblue;
        }

        &.active {
            background-color: var(--blue);
            color: aliceblue;

            &:hover {
                background-color: var(--blue);
            }
        }
    }
}

/* Each tab item */
.tab-item {
    display: none;

    &.active {
        display: block;
    }

    .service_title {
        display: flex;
        margin-bottom: 1em;
        align-items: center;

        h6 {
            margin: 0;
        }

        img {
            width: 30px;
            height: 30px;
            margin-right: 1em;
        }
    }
}

/* Footer */
footer {
    background-color: var(--blue);
    text-align: center;
    color: white;
    padding: 1em;
}

/* Booking page  */
#booking_page {
    background-color: var(--blue);
    min-height: 100vh;
    display: flex;
    align-items: center;

    .step {
        transition: all 4s linear;
        display: none;

        &.active {
            display: block;
        }
    }

    .booking_item {
        display: flex;
        font-size: 0.95em;

        img {
            width: 22px;
            height: 22px;
            margin-right: 1em;
        }

        a {
            color: var(--text);
        }
    }

    #booking_confirmed {
        img {
            width: 85px;
            margin-bottom: 2em;
        }
    }
}

/* ready to move ? */
#ready {
    background-color: aliceblue;
}

.mobile_menu_toggler {
    width: 50px;
    height: 50px;
}

#mobile_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s linear;
    transform: translateX(100%);

    &.open {
        transform: translate(0);
    }

    img {
        position: absolute;
        top: 50px;
        width: 35px;
        height: 35px;
    }

    ul {
        padding-left: 0;
        list-style: none;
        text-align: center;

        a {
            color: var(--blue);
            text-decoration: none;
            display: block;
            padding: 12px 42px;
        }
    }
}

#menu_opener {
    display: none;
}

/* Responsive  */

/* Small devices */
@media only screen and (max-width: 768px) {
    #menu_opener {
        display: block;
    }

    #main_nav {
        display: none;
    }

    #header {
        h1 {
            font-size: 3.2em !important;
        }
    }

    .image {
        margin-bottom: 2em;
    }
}