desert1.css

/*Global*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
        text-decoration: none;
}
ul {
        list-style: none;
}
body , html {
        overflow-x: hidden;
}
    /*navbar*/
.navbar {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 20px;
        color: whitesmoke;
}
.nav-links {
        display: flex;
        align-items: center;
        color: #90bbe0;
}
    .nav-links li {
        margin:0 30px ;
    }
    /*1st part-the header images*/
header {
        width: 100vw;
        height: 100vh;
        background-image: url(./flora/h.desert.jpg);
        background-position: bottom;
        background-size: cover;
        display: flex;
        align-items: flex-end;
        justify-content: center;
}
.header-content {
        margin-bottom: 200px;
        color: whitesmoke;
        text-align: center;
}
.header-content h2 {
        font-size: 7vmin;
        align-content: center;
}
.line {
        width: 400px;
        height: 4px;
        background: #90bbe0;
        margin: 10px auto;
        border-radius: 5px;
        align-content: center;
}
.header-content h1 {
        font-size: 9vmin;
        margin-top: 50px;
        margin-bottom: 30px;
        align-content: center;
}    
    .ctn {
        padding: 8px 15px;
        background: #90bbe0;
        border-radius: 30px;
        color: black;
    }
    /*the script used button*/
    .menu-btn {
        position: absolute;
        top: 30px;
        right: 30px;
        width: 40px;
        cursor: pointer;
        display: none
    } 
    /*animals*/
    section {
        width: 80%;
        margin: 80px auto; 
    }
    /*title--wildlife*/
    .title {
        text-align: center;
        font-size: 4vmin;
        color: #313157
    }
    .row {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    .row .col img {
       width: 90%;
       display: flex;
       flex-direction: column;
       align-items: center;
    }
    .events .row {
        margin-top: 50px;
    }
    /*the animal name*/
    h4 {
        font-size: 3vmin;
        color: #313157;
        margin: 20px auto;
    }
    p {
        color: #06142b;
        padding: 0px 40px;
    }
    /*explore the strange*/
.nature {
        width: 100%;
        height: 100vh;
        background-image: url(./flora/desetheader.jpg);
        background-position: center;
        background-size: no-repeat;
        display: flex;
        align-items: center;
}
.nature-content {
        width: 60%;
        padding: 50px;
        color: whitesmoke;
        display: flex;
        align-items: center;
        flex-direction: column;
}
.nature-content h1 {
        font-size: 7vmin;
        margin: 50px;
}
.nature-content .line {
        margin-bottom: 50px;
}
.nature-content p {
        color: #ebebeb;
}
    /*let's go button*/
.nature-content .ctn {
        margin-top: 40px;
        align-items: center;
}
    /*flora an fauna content*/
.content-col {
        width: 40%;
}
.image-col {
      width: 60%;
}
.plants .image-gallery{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
}
.image-gallery img {
        max-width: 300px;
        margin: 10px;
}
.content-col h1 {
        font-size: 7vmin;
        color: #313157;
}
.content-col .line{
        margin-left: -1px;
}
.content-col p{
        padding: 0;
        margin: 30px auto;
}
    /*the footer*/
    .footer {
        width: 100% ;
        min-height: 100px;
        padding: 20px 80px;
        margin: 0;
        background: #313157;
        text-align: center;
    }
    .footer p {
        color: whitesmoke;
        margin: 20px auto;
        padding: 20px auto;
    }
    /*mobile device*/
@media only screen and (max-width:850px){
.menu-btn {
            display: block;
}
.navbar {
            padding: 0;
        }
        .logo {
            position: absolute;
            top: 30px;
            left: 30px;
        }
        .nav-links {
            flex-direction: column;
            width: 100%;
            height: 100vh;
            justify-content: center;
            background: #06142b;
            margin-top: -900px;
            transition: all 0.5s ease;
        }
        .mobile-menu {
            margin-top: 0px;
            border-bottom-right-radius: 30%;
        }
        .nav-links li{
            margin: 30px auto;
            }
}
 /*Wildlife-responsive*/
.row {
        flex-direction: column;
}
.col .row {
        margin: 20px auto;
}
.col img {
        max-width: 90%;
}
/*Explore-responsive*/
.nature-content {
        width: 100%;
}
.plants .col {
       width: 100%; 
}
.image-gallery {
        justify-content: center;
        align-items: center;
}
.image-gallery img {
        width: 10px;
}
.footer {
        padding: 10px;
}
/*animations*/ 
img {
    transition: transform .3s ease;
}
img:hover {
    transform:scale(1.1);
}
.ctn:hover {
    background-color: black;
    color: #90bbe0;
    box-shadow: 2px 2px 5px #4b4848;
}