body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

/* Navigation */
.navbar, .footer {
    background-color: #0d2420;
}

.navbar .container-fluid {
    margin-right: 50px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.navbar ul a, .footer ul a {
    color: white;
    text-decoration: none;
}

.navbar ul a:hover, .footer ul a:hover {
    color: #3ed42a;
    border-bottom: 2px solid #ff6a00;
}

.navbar-brand img {
    width: 120px;
    margin-left: 50px;
}

/* Carousel */
.carousel {
    margin-top: 10px;
}

/* Margin of Section */
.quote, .destination, .videoquote, .grid {
    margin-top: 30vh;
}

/* First Text Quote */
.quote {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 40px;
    color: #0d2420;
}

.quote img {
    width: 400px;
}

/* Destinations Card */
h3, p {
    text-transform: uppercase;
}        

.destination .card {
    width: 24rem;
}

.card-body {
    background-color: #0d2420;
    padding-top: 10px;
}

.card:hover {
    box-shadow: 2px 2px 4px rgba(34, 34, 34, 0.5);
}

.card a {
    color: #f4f0f4;
    text-decoration: none;
}

.card a:hover h3{
    color: #3ed42a;
}

.card a:hover p{
    color: #ff6a00;
}

.card img {
    filter: brightness(60%);
}

.card:hover img {
    filter: brightness(100%);
    cursor: pointer;
}


/* Video with Quotes */
.videoquote {
    position: relative;
}

video {
    width: 200%;
}

.videotextblock {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 40px;
    text-align: center;
    text-shadow: 2px 2px 4px #000;
}

/* Inspirations Grid */
.grid {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    height: 60vh;
    width: 50vw;
    position: relative;
}

.grid img {
    border-radius: 10px;
    display: block;
}

.imgtext {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: bolder;
}

.imgtext a {
    text-decoration: none;
    color: white;
}

.imgtext a:hover  {
    text-decoration: none;
    color: #ff6a00;
    text-shadow: 1px 1px 4px rgba(25, 25, 25, 0.5)
}

.culture {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

.culture > .imgtext {
    top: 4%;
    left: 33%;
    font-size: 60px;
}

.culture:hover img {
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.5);
    filter: brightness(60%);
}

.culture:hover .imgtext {
    opacity: 1;
}

.nature {
    grid-row: 1 / 3;
    grid-column: 3 / 4;   
}

.nature > .imgtext {
    bottom: 55%;
    left: 84%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -20px;
    font-size: 45px;
}

.nature:hover img {
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.5);
    filter: brightness(60%);
}

.nature:hover .imgtext {
    opacity: 1;
}

.adventure {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}

.adventure > .imgtext {
    top: 17%;
    left: 15%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: -20px;
    font-size: 45px;
}

.adventure:hover img {
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.5);
    filter: brightness(60%);
}

.adventure:hover .imgtext {
    opacity: 1;
}

.sea {
    grid-row: 3 / 4;
    grid-column: 2 / 4;
}

.sea > .imgtext {
    top: 108%;
    left: 68%;
    font-size: 60px;
}

.sea:hover img {
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.5);
    filter: brightness(60%);
}

.sea:hover .imgtext {
    opacity: 1;
}

.food {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

.food > .imgtext {
    top: 60%;
    left: 50%;
    font-size: 45px;
}

.food:hover img {
    box-shadow: 2px 2px 4px rgba(25, 25, 25, 0.5);
    filter: brightness(60%);
}

.food:hover .imgtext {
    opacity: 1;
}

/* Contact us */
.contacts {
    margin-top: 50vh;
    padding-top: 100px;
}

.maps {
    position: relative; 
}

.formcontainer {
    background-color: #f4f0f4;
    border-radius: 5px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 30rem;
    height: 25rem;
}

form .form-control {
    border: none;
    border-bottom: 2px solid #0d2420;
    border-radius: 0;
    margin-bottom: 10px; 
    background-color: #f4f0f4;
}

form textarea {
    resize: none;
    height: 150px;
}

form .btn {
    background-color: #111c1a;
    color: #f4f0f4;
}


/* Footer Start */
.footer {
    padding: 30px 0;
    margin-top: 10vh;
}

.footer ul, .social {
    text-align: center;
}

.footer li {
    padding: 0 12px;
}

.social i {
    font-size: 30px;
    margin: 0 10px;
    color: #f4f0f4;
}

.social .bi-facebook:hover {
    color: #1887f2;
}

.social .bi-instagram:hover {
    color: #c32aa3;
}

.social .bi-twitter:hover {
    color: #1da1f2;
}

.social .bi-github:hover {
    color: #ff2052;
}

.social .bi-google:hover {
    color: #4285f4;
}

.madeby {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    margin-bottom: 0;
    color: #f4f0f4;
}

/* Media Query */

@media screen and (max-width: 420px) {
    .navbar .container-fluid {
        margin-right: 0;
        justify-content: center;
    }

    .navbar-brand img {
        width: 120px;
        margin-left: 70%;
    }

    .quote, .destination, .videoquote, .grid {
        margin-top: 10vh;
    }

    .quote {
        font-size: 30px;
        margin-left: 10vw;
    }

    .quote img {
        width: 300px;
    }

    .destination .card {
        width: 20rem;
        margin-left: 0;
    }

    video {
        width: 100%;
    }

    .videotextblock {
        font-size: 15px;
    }

    .grid {
        grid-template-rows: repeat(4,1fr);
        grid-template-columns: repeat(2,1fr);
        grid-gap: 10px;
    }

    .grid img {
        width: 100%;
    }

    .culture {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }

    .nature {
        grid-row: 2 / 3;
        grid-column: 2 / 3;   
    }

    .adventure {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }

    .food {
        grid-row: 3 / 4;
        grid-column: 1 / 3;
    }

    .sea {
        grid-row: 4 / 5;
        grid-column: 1 / 3;
    }

    .contacts {
        margin-top: 15vh;
    }

    .formcontainer {
        width: 15rem;
        left: 50%;
    }

}