/* ==========================================
            GOOGLE FONT
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================
            RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#517272;
}

/* ==========================================
            COMMON
========================================== */

a{
    text-decoration:none;
}

.border{
    border:1px solid transparent;
    cursor:pointer;
    transition:.3s;
}

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

/* ==========================================
            NAVBAR
========================================== */

.navbar{

    height:60px;

    background:#131921;

    display:flex;

    justify-content:space-evenly;

    align-items:center;
    

    color:white;

}

/* ==========================================
            AMAZON LOGO
========================================== */

.nav-logo{

    width:120px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.logo{

    width:110px;

    height:50px;

    background:url("images/amazon_logo.png");

    background-size:contain;

    background-repeat:no-repeat;

    background-position:center;

}

/* ==========================================
            ADDRESS
========================================== */

.nav-address{

    padding:8px;

}

.add-first{

    color:#CCCCCC;

    font-size:12px;

    margin-left:18px;

}

.add-icon{

    display:flex;

    align-items:center;

    gap:5px;

}

.add-second{

    font-size:14px;

    font-weight:600;

}

/* ==========================================
            SEARCH BAR
========================================== */

.nav-search{

    width:700px;

    height:40px;

    display:flex;

    border-radius:5px;

    overflow:hidden;

}

.nav-search:hover{

    outline:3px solid #FEBD69;

}

.search-select{
width:60px;
    height:40px;
    border:none;
    background:#f3f3f3;
    text-align:left;
    font-size:14px;
    cursor:pointer;
    outline:none;
    width:60px;

    border:none;

    background:#F3F3F3;

    text-align:center;

    

}

.search-input{

    flex:1;

    border:none;

    outline:none;

    padding-left:15px;

    font-size:15px;

}

.search-icon{

    width:55px;

    background:#FEBD69;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#111;

    font-size:20px;

    cursor:pointer;

}

/* ==========================================
            LANGUAGE
========================================== */

.nav-language{

    display:flex;

    align-items:center;

    gap:5px;

    padding:8px;

}

.nav-language img{

    width:22px;

}

.nav-language span{

    font-size:14px;

    font-weight:600;

}

/* ==========================================
            SIGN IN
========================================== */

.nav-signin{

    padding:8px;

}

.nav-signin span{

    font-size:12px;

}

.nav-second{

    font-size:14px;

    font-weight:600;

}

/* ==========================================
            RETURNS
========================================== */

.nav-return{

    padding:8px;

}

.nav-return span{

    font-size:12px;

}

/* ==========================================
            CART
========================================== */

.nav-cart{

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px;

    font-weight:600;

    font-size:15px;

}

.nav-cart i{

    font-size:28px;

}

/* ==========================================
            SECOND NAVBAR
========================================== */

.panel{

    height:40px;

    background:#232F3E;

    color:white;

    display:flex;

    align-items:center;

}

.panel-all{

    display:flex;

    align-items:center;

    gap:8px;

    margin-left:20px;

    font-weight:600;

    cursor:pointer;

}

.panel-options{

    display:flex;

    gap:30px;

    margin-left:25px;

    font-size:15px;

}

.panel-options p{

    cursor:pointer;

    transition:.3s;

}

.panel-options p:hover{

    color:#FEBD69;

}

/* ==========================================
            HERO SECTION
========================================== */

.hero-section{

    height:380px;

    background:url("images/hero.jpg");

    background-size:cover;

    background-position:center;

    position:relative;

}

/* Hero Buttons */

.hero-btn{

    width: 40px;    

    height:90px;

    position:absolute;

    top:30%;

    background:rgba(255,255,255,.3);

    border:none;

    font-size:35px;

    cursor:pointer;

    transition:.3s;

}

.hero-btn:hover{

    background:white;

}

.hero-left{

    left:0;

}

.hero-right{

    right:0;

}
/* ==========================================
            SHOP SECTION
========================================== */

.shop-section{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:20px;

    margin-top:170px;

    position:relative;

    z-index:2;

}

/* ==========================================
            PRODUCT BOX
========================================== */

.box{

    background:rgb(156, 142, 149);

    min-height:420px;

    padding:20px 15px;

    transition:0.3s;

    cursor:pointer;

    box-shadow:0 2px 6px rgba(0,0,0,0.15);

}

.box:hover{

    transform:translateY(-6px);

    box-shadow:0 8px 20px rgba(0,0,0,0.25);

}

/* ==========================================
            BOX CONTENT
========================================== */

.box-content{

    display:flex;

    flex-direction:column;

    height:100%;

}

.box-content h2{

    font-size:22px;

    margin-bottom:15px;

    color:#0F1111;

    font-weight:600;

}

/* ==========================================
            PRODUCT IMAGE
========================================== */

.box-content img{

    width:100%;

    height:300px;

    object-fit:cover;

    margin-bottom:20px;

    transition:0.3s;

}

.box:hover img{

    transform:scale(1.03);

}

/* ==========================================
            SEE MORE LINK
========================================== */

.box-content a{

    margin-top:auto;

    color:#007185;

    font-size:14px;

    font-weight:500;

    transition:0.3s;

}

.box-content a:hover{

    color:#C7511F;

    text-decoration:underline;

}

/* ==========================================
            IMAGE RADIUS
========================================== */

.box-content img{

    border-radius:4px;

}

/* ==========================================
            PRODUCT TITLE
========================================== */

.box-content h2{

    line-height:30px;

}

/* ==========================================
            PRODUCT CARD ANIMATION
========================================== */

.box{

    border-radius:4px;

}

.box:hover{

    border:1px solid #FEBD69;

}

/* ==========================================
            SECTION SPACING
========================================== */

.shop-section .box{

    overflow:hidden;

}

/* ==========================================
            OPTIONAL LARGE PRODUCT ROW
========================================== */

.product-row{

    width:100%;

    background:white;

    margin:20px;

    padding:20px;

}

.product-row h2{

    margin-bottom:20px;

    font-size:24px;

}

.product-list{

    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-behavior:smooth;

}

.product-list img{

    width:220px;

    height:220px;

    object-fit:contain;

    transition:.3s;

}

.product-list img:hover{

    transform:scale(1.08);

}

/* Hide Scrollbar */

.product-list::-webkit-scrollbar{

    display:none;

}
/* ==========================================
            FOOTER
========================================== */

footer{
    margin-top:30px;
}

/* Back To Top */

.foot-panel1{
    background:#37475A;
    color:#583030;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px;
    cursor:pointer;
    transition:0.3s;
}

.foot-panel1:hover{
    background:#525f6d;
}

/* Footer Links */

.foot-panel2{
    background:#232F3E;
    color:white;
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
    padding:50px 20px;
}

.foot-panel2 ul{
    display:flex;
    flex-direction:column;
    margin:20px;
}

.foot-panel2 h3{
    margin-bottom:15px;
    font-size:16px;
}

.foot-panel2 a{
    color:#DDDDDD;
    text-decoration:none;
    margin:6px 0;
    font-size:14px;
    transition:.3s;
}

.foot-panel2 a:hover{
    text-decoration:underline;
    color:#ffffff;
}

/* Amazon Logo Footer */

.foot-panel3{
    background:#232F3E;
    border-top:1px solid #3a4553;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
}

 .footer-logo{
    width:120px;
    height:50px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
 }

/* Copyright */

.foot-panel4{
    background:#131A22;
    color:white;
    text-align:center;
    padding:25px 10px;
}

.pages{
    margin-bottom:10px;
}

.pages a{
    color:#DDDDDD;
    text-decoration:none;
    margin:0 12px;
    font-size:13px;
}

.pages a:hover{
    text-decoration:underline;
}

.copyright{
    font-size:13px;
    color:#CCCCCC;
}

/* ==========================================
            RESPONSIVE DESIGN
========================================== */

/* Laptop */

@media(max-width:1200px){

    .nav-search{
        width:500px;
    }

    .shop-section{
        grid-template-columns:repeat(3,1fr);
    }

}

/* Tablet */

@media(max-width:992px){

    .navbar{
        flex-wrap:wrap;
        height:auto;
        padding:10px;
    }

    .nav-search{
        order:3;
        width:100%;
        margin-top:10px;
    }

    .panel-options{
        overflow-x:auto;
        white-space:nowrap;
        gap:15px;
        padding-right:20px;
    }

    .shop-section{
        grid-template-columns:repeat(2,1fr);
        margin-top:-120px;
    }

    .hero-section{
        height:300px;
    }

}

/* Mobile */

@media(max-width:768px){

    .shop-section{
        grid-template-columns:1fr;
        padding:10px;
        margin-top:-80px;
    }

    .hero-section{
        height:220px;
    }

    .hero-btn{
        width:45px;
        height:80px;
        font-size:24px;
    }

    .box{
        min-height:auto;
    }

    .box-content img{
        height:220px;
    }

    .foot-panel2{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .pages{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

}

/* Small Mobile */

@media(max-width:480px){

    .logo{
        width:90px;
    }

    .nav-cart{
        font-size:14px;
    }

    .search-select{
        width:50px;
    }

    .search-icon{
        width:45px;
    }

    .box-content h2{
        font-size:18px;
    }

}

/* ==========================================
            SMOOTH EFFECTS
========================================== */

img{
    max-width:100%;
    display:block;
}

button{
    outline:none;
}

input,select{
    font-family:inherit;
}

html{
    scroll-behavior:smooth;
}