* {
    padding: 0;
    margin: 0;

}

body {
    font-family: "Gabarito", sans-serif;
}

.navbar {
    padding: 10px;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    cursor: pointer;
}

.navbar__title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar__title img {
    display: flex;
    margin-right: 10px;
    width: 50px;
}

.navbar__links {
    padding: 10px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
}

.navbar__links p {
    padding: 10px;
    border-radius: 100px;
    color: black;
}

.navbar__links p:hover {
    background-color: grey;
    transition: 1s;
    color: black;

}

.navbar__signin {
    padding: 10px;
    background-color: black;
    color: white;
    border-radius: 100px;
    border: none;
    font-size: 20px;
}

.navbar__signin:hover {
    background-color: #00D352;
    transition: 1s;
    color: black;

}
.navbar__menubar{
    display: none;
}

.body__title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    font-size: 25px;
}

.categories {
    padding: 10px;
    margin: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 20px;
    cursor: pointer;
}

.categories p:hover {
    border-bottom: solid black 2px;
}

.search {
    border: solid grey 0.5px;
    width: 60%;
    border-radius: 30px;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: transparent;
    margin-left: 250px;
}

.search input {
    width: 100%;
    border: none;
}

.search button {
    background-color: #00D352;
    color: black;
    border: solid grey 1px;
    padding: 10px;
    border-radius: 100px;
    font-size: 15px;
    cursor: pointer;
}

.search button:hover {
    background-color: black;
    transition: 1s;
    color: white;

}

.search input:focus {
    outline: none;
}

.container{
    display: flex;
    justify-content: center;
    margin-top: 50px;
    
}

.image_container{
    background-color: limegreen;
    width: 1100px;
    height: 400px;
    border-radius: 10px;
    display: flex;
}
.image_container__hero{
    margin: 20px;
    width: 1100px;
    border-radius: 10px;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    animation: bgChange 8s infinite;
    position: relative;
    cursor: pointer;

}
@keyframes bgChange{
    0%{
        background-image: url(./images/b1.jpg);
    }
    25%{
        background-image: url(./images/b2.jpg);
    }
    50%{
        background-image: url(./images/b3.jpg);
    }
    75%{
        background-image: url(./images/b4.jpg);
    }
    100%{
        background-image: url(./images/b5.jpg);
    }
}
.container__content{
    padding: 100px;
    border-left: solid black 2px;

}

.container__content p{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.container__content button{
    border: none;
    margin-top: 20px;
    margin-left: 80px;
    font-size: 15px;
    background-color: black;
    color: #F7F7F7;
    padding: 10px;
    border-radius: 100px;
    cursor: pointer;
}

.container__content button:hover{
    background-color: white;
    color: black;
    transition: 1s;

}

.recommended {
    margin-top: 50px;
    padding: 20px;

}


.recommended__title {
    font-size: 30px;
    margin-bottom: 10px;
}


.recommended__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
}

.trip__card {
    flex-grow: 1;
    flex-basis: 20%;
    margin: 5px;
}

.trip__card img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    cursor: pointer;
}

.trip__card:hover {
    transform: scale(1.05);
    transition: 0.5s;
    filter: brightness(110%);
}

.trip__card p {
    padding: 10px;
    position: absolute;
    font-size: 30px;
    bottom: 10px;
    color: #FFFFFF;
    text-shadow: black 1px 1px 2px, black 0 0 25px, black 0 0 5px;
}

.paragraph {
    padding: 20px;
    margin: 10px;
    background-color: #F7F7F7
}

.paragraph__container {

    gap: 20px;
    align-items: center;
    padding: 10px;
}

.paragraph__container__s1 {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px;
}

.paragraph__container__s3 {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 10px;
}

.paragraph__container__s2,
.paragraph__container__s4 {
    padding: 20px;

}

.paragraph__container__s2 p,
.paragraph__container__s4 p {

    margin-top: 20px;

}

.paragraph__container__s1 img,
.paragraph__container__s3 img {
    border: solid grey 0.5px;
    border-radius: 10px;
    transform: rotate(-3deg);
    cursor: pointer;
}

.paragraph__container__s1 img:hover,
.paragraph__container__s3 img:hover {
    transform: rotate(0deg) scale(1.05);
    transition: 0.5s;
    filter: brightness(110%);
}

.explores {
    margin-top: 50px;
    padding: 20px;
}

.explores__title {
    font-size: 30px;
    margin-bottom: 10px;
}

.explores__cbe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
}

.cbe__card {
    flex-grow: 1;
    flex-basis: 20%;
    margin: 5px;
}

.cbe__card img {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    cursor: pointer;

}

.cbe__card img:hover {
    transform: scale(1.05);
    transition: 0.5s;
    filter: brightness(110%);

}

.explores2 {
    margin-top: 50px;
    padding: 20px;
}

.explores2__title {
    font-size: 30px;
    margin-bottom: 10px;
}

.explores2__whale {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
}

.whale__card {
    flex-grow: 1;
    flex-basis: 20%;
    margin: 5px;
}

.whale__card img {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    cursor: pointer;
}

.whale__card img:hover {
    transform: scale(1.05);
    transition: 0.5s;
    filter: brightness(110%);
}

.nexttrip {
    margin-top: 50px;
    padding: 20px;
}

.nexttrip__title {
    font-size: 30px;
    margin-bottom: 10px;
}

.nexttrip__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    position: relative;
}


.nexttrip__card {
    flex-grow: 1;
    flex-basis: 20%;
    margin: 5px;
}

.nexttrip__card img {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    cursor: pointer;


}

.nexttrip__card p {
    padding: 10px;
    position: absolute;
    font-size: 30px;
    bottom: 10px;
    color: #FFFFFF;
    text-shadow: black 1px 1px 2px, black 0 0 25px, black 0 0 5px;

}

.nexttrip__card img:hover {
    transform: scale(1.05);
    transition: 0.5s;
    filter: brightness(110%);
}

.saleimage {
    margin-top: 50px;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.footer {
    background-color: #F7F7F7;
    color: black;
    padding: 30px;
}

.footer__one {
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.footer__one p {
    margin: 10px;
}

.footer__two {
    margin-left: 50px;
    margin-top: 30px;
    display: flex;
    align-items: center;
}

.footer__two img {
    width: 30px;
    margin-right: 10px;
}

.footer__three {

    margin-top: 20px;
}

.footer_three__s1,
.footer_three__s2,
.footer_three__s3 {
    padding: 20px;


}

.footer__four {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    align-items: center;
}

/* Media Queries*/
@media screen and (max-width:800px) {
    body {
        font-size: 10px;

    }
}
@media screen and (max-width:600px) {
    .navbar__links, .navbar__signin {
        display: none;
    }
    .body__title{
        font-size: 15px
    }
    .categories{
        display: flex;
        justify-content: center;
    }
    .search{
        display: none;

    }
    .container{
        display: none;
    }
    .trip__card{
        flex-basis: 40%;
    }
    .cbe__card{
        flex-basis: 40%;
    }
    .whale__card{
        flex-basis: 40%;
    }
    .nexttrip__card{
        flex-basis: 40%;
    }
    .saleimage{
        display: none;
    }
    
}