/* 
1.navbar
2.hero container
3.bottom container
 */

:root{
    --darkyellow:#a48a07;
    --darkbrown:#2B2922;
    --lightsilver: #adadad;
    --darksiler:#5c5849;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap');

* {
    margin: 0;
    padding: 0;
    /* outline: 2px solid red; */
}

body {
    min-height: 100vh;
    height: 100%;
    background-color: var(--darkbrown);
    font-family: "Montserrat";
}
.container {position: relative;}

/* ----------------- */
/* ------navbar----- */
/* ----------------- */
nav {
    width: 90%;
    line-height: 10vh;
    margin: 0 auto;
}

nav>* {
    display: inline-block;
    line-height: 6;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 500;
}

.list-item {
    display: inline-block;
    margin: 0 1rem;
    color: var(--lightsilver);
    cursor:pointer;
}

.list-item.active, .list-item:hover {
    color: #fff;
    font-weight: 700;
}

.list {
    width: 70%;
}

.list ul {
    float: right;
}

.logo {
    width: 10%;
}

.logo img {
    width: 100%;
}

.navbar div:last-of-type {
    width: 10%;
    float: right;
}

.button-small {
    color: var(--darkyellow);
    padding: 10px 20px;
    border: 1px solid var(--darkyellow);
    background-color: transparent;
    border-radius: 10px;
    cursor:pointer;
}
.button-small:hover{
    transition: 0.25s ease-in-out;
    background-color:var(--darksiler) ;
    color: var(--lightsilver);
    border:1px solid var(--lightsilver);
}

@media(max-width:780px) {
    .list {
        display: none;
    }
    
    .logo {
        width: 25%;
    }
    
    .navbar div:last-of-type {
        width: 25%;
    }
}

/* ----------------- */
/* -hero container- */
/* ----------------- */
.hero {
    clear: both;
}

.div-left {
    color: #fff;
    margin: clamp(1rem, 2rem, 3rem);
    font-size: clamp(1rem, 1.5vw + 1rem, 3rem);
}

.div-right {
    color: var(--lightsilver);
    margin: clamp(1rem, 2rem, 3rem);
    line-height: 2;
}

.img {
    width: 100%;
    height: 40vh;
    overflow: hidden;
}

.img img {
    width: 100%;
    object-fit: cover;
}

@media (min-width:1224px) {
    .div-left {
        width: 40%;
        float: left;
        margin-left: 5rem;
    }
    
    .div-right {
        float: right;
        width: 40%;
        margin-right: 5rem;
    }
    
}

/* ----------------- */
/* ------bottom container----- */
/* ----------------- */

.left-arrow {
    float: right;
    margin-left: auto;
    background-color:var(--darkyellow);
    display: inline-block;
}

.right-arrow {
    float: right;
    background-color: var(--darksiler);
    display: inline-block;
}

.icons {
    cursor:pointer;
    font-size: 2rem;
    margin: 1rem;
    color: #fff;
}