*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body{
    width: 100%;
    background-color: #E3E6E6;
}

/* NAVBAR */

nav{
    width: 100%;
    background-color: #131921;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

/* box1 */

.border{
    border: 1px solid transparent;
    border-radius: 1px;
}

.border:hover{
    border: 1px solid white;
    cursor: pointer;
}

.nav-logo{
    height: 50px;
    width: 100px;
    background-size: cover;
}

.logo{
    height: 50px;
    width: 100%;
}

/* box2 */

.nav-addr{
    height: 50px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

.addr1{
    font-weight: 200;
    color: gray;
    margin-left: 13px;
    font-size: 0.85rem;
}

.addr2{
    font-weight: bold;
}

/* box3 */

.nav-search{
    background-color: #F3A847;
    display: flex;
    justify-content: space-evenly;
    width: 1000px;
    height: 50px;
    border-radius: 3px;
}

.serach-select{
    width: 50px;
    text-align: center;
    background-color: #E6E6E6;
    border: none;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.search-input{
    width: 100%;
    font-size: 1rem;
    border: none;
    padding-left: 10px;
    outline: none;
}

.search-icon{
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: large;
    cursor: pointer;
}

/* box4 */

.nav-lang{
    color: white;
    height: 50px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang{
    font-size: 0.95rem;
    font-weight: 300;
    height: 50px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/* box4 */

.nav-accounts{
    width: 140px;
    height: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}

.acc1{
    font-size: 0.85rem;
    font-weight: 300;
}

.acc2{
    font-size: .94rem;
    font-weight: bold;
}

/* box5 */

.nav-cart{
    width: 100px;
    height: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.nav-cart i{
    font-size: 30px;
}

/* NAVBAR END */

/* NAVIGATION */

.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232F3E;
    width: 100%;
    height: 30px;
    padding: 7px 10px;
}

.navigation1 ul li,.navigation2ul li{
    color: white;
    list-style: none;
    padding:  3px 12px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 1px;
}

.navigation1 ul{
    color: white;
    list-style: none;
    display: flex;
}

/* NAVIGATION END */

/* HERO SECTION */

.hero-section{
    width: 80%;
    height: 600px;
    margin: auto;
    background: linear-gradient(to bottom,rgba(255, 255, 0,  0) 40%,#E3E6E6), url("img/hero_image.jpg") no-repeat center center/cover;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.hero-section i{
    font-size: 3rem;
    padding: 70px 30px;
    font-weight: 600;
    position: relative;
    top: 80px;
    cursor: pointer;
    margin: 0 10px;
}

.hero-section i:hover{
    border: 1.5px solid white;
}

/* HERO SECTION END */

/* SHOPPING SECTION */

/* Shop Cards */

.shop-section{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 34px;
    position: relative;
    top: -280px;
}

.cards{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 80%;
}

.card{
    height: 400px;
    width: 23%;
    padding: 20px;
    margin-bottom: 12px;
    background-color: white;
    cursor: pointer;
}

.card .card-content{
    width: 100%;
}

.card img{
    height: 300px;
    width: 100%;
    object-fit: cover;
    padding-bottom: 10px;
}

.card h2{
    font-size: 23px;
}

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

.card:hover a{
    color: #D2734B;
    transition: all ease .3s;
}

/* Shop Cards */

/* Horizon Products */

.horizon-products{
    display: flex;
    background-color: white;
    height: 350px;
    width: 77.5%;
    align-items: center;
    overflow: scroll;
    overflow-y: hidden;
    margin-bottom: 25px;
}

.product{
    margin: 0 15px;
}

/* Horizon Products */

/* SHOPPING SECTION END */

/* SIGN IN SECTION */

.signin-section{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 60px 0;
    position: relative;
    top: -260px;
}

.signin-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 40px 0;
    width: 100%;
}

.signin-content h1{
    margin-bottom: 12px;
    font-size: 25px;
}

.signin-content .signin-btn{
    margin-bottom: 12px;
    color: black;
    padding: 5px 110px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #ffc32aa1;
    border: 1px solid #E6A400;
}

.signin-content p{
    font-size: 13px;
}

.signin-content a{
    color: #3C92A2;
    text-decoration: none;
}

.signin-content a:hover{
    color: #D2734B;
    text-decoration: none;
}

/* SIGN IN SECTION END */

/* FOOTER */

/* Row 1 */

.footer{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: column;
    background-color: #232F3E;
    position: relative;
    top: -200px;
}

.footer-row1{
    height: 50px;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #37475A;
}

.footer-row1:hover{
    background-color: #485769;
}

.fr1-a{
    text-decoration: none;
    font-size: 16px;
}

/* Row 1 End */

/* Row 2 */

.footer-row2{
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: .1px solid gray;
}

.columns{
    display: flex;
    justify-content: space-evenly;
    height: 400px;
    width: 70%;
    margin-top: 50px;
}

.footer-row2 .col{
    color: white;
    width: 12%;
}

.footer-row2 .col a{
    color: rgb(190, 190, 190);
    text-decoration: none;
    display: block;
    padding: 7px 0;
    font-size: 14px;
}

.footer-row2 .col a:hover{
    color: white;
    trasition: all ease .5s;
}

.footer-row2 .col h3{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Row 2 End */

/* Row 3 */

.footer-row3{
    width: 100%; 
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.foot-row3-div{
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foot-logo img{
    height: 35px;
    cursor: pointer;
}

.foot-row3-div button img{
    height: 13px; 
}

.foot-btns{
    display: flex;
}

.foot-row3-div button {
    padding: 6px 18px;
    color: white;
    background-color: transparent;
    outline: none;
    border: .5px solid rgba(155, 155, 155, 0.795);
    border-radius: 2px;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.foot-row3-div button:hover{
    border: .5px solid white;
    transition: all ease .5s;
}

/* Row 3 End */

/* FOOTER END */