@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

p{
    margin: 0;
}



:root {
    --primary: rgb(31, 82, 153);
    --primaryOppacity: rgba(31, 82, 153, 0.5);
    --secondary: #DF242D;
    --white: #ffffff; 
    --boxShadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }

*{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}
/* nav */

nav{
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-sosmed{
    margin-left: auto;
}

.footer-sosmed{
    margin-left: auto;
}

.nav-sosmed i{
    color: #c4c4c4;
    font-size: 40px;
    margin-left: 10px;

}

.nav-sosmed i:hover{
    cursor: pointer;
    color: var(--primary);
}

.vl-nav{
    border-left: 1px solid #c4c4c4;
    height: auto;
    margin: 0 15px;
}


.cartnewsletter-wrapper{
    position: relative;
    background-color: #fff;
    padding: 10px 20%;
    align-items: center;
}

.cartnewsletter-item, .cartnewsletter-wrapper{
    display: flex;
}

.cart, .newsletter{
    color: #c4c4c4;
    align-items: center;

    display: flex;
}

.cart:hover, .newsletter:hover{
    cursor: pointer;
}

.cart i, .newsletter i{
    margin-right: 5px;
}

.logo img{
    height: auto;
    width: auto;
    margin-right: 15px;
}

.navigasi{
    margin-left: auto;
}

.navigasi ul{
    list-style: none;
    display: flex;
}

.navigasi ul li a{
    text-decoration: none;
    color: #fff;
}

.navigasi ul li.active{
    border-bottom: 2px solid var(--secondary);
    color: var(--secondary);
}

.navigasi ul li.active a{
    color: var(--secondary);
}

.navigasi ul a 

.navigasi ul li a:hover{
    color: var(--secondary);
}

.navigasi ul li:hover{
    cursor: pointer;
    border-bottom: 2px solid var(--secondary);
}

.navigasi ul li{
    padding: 15px;
}

.navbar{
    background-color: var(--primary);
    color: #fff;
    padding: 20px 10%;
    display: flex;
}


.logo{
    display: flex;
}

.checkbtn{
    float: right;
    font-size: 30px;
    display: none;
    margin-left: auto;
}



@media (max-width: 1180px){
    .checkbtn{
        display: block;
    }

    .logo-title{
        display: block;
    }
    
    .navbar{
        display: block;
    }

    .navigasi{
        display: none;
        transition: all .5s;
    }

    .navigasi ul{
        display: block;
        text-align: end;
    }

    .navigasi.show{
        display: block;
    }

  
}



@media (max-width: 760px){
    .cartnewsletter-wrapper{
        flex-direction: column;
        justify-content: center;
    }

    .nav-sosmed{
        margin: 15px 0 10px 0;

    }
    
}

@media (max-width: 486px){
    .logo-title{
        display: none;
    }
    .nav-sosmed i{
        font-size: 25px;
    }

    .cart p, .newsletter p{
        display: inline;
    }
}