* {
    margin: 0px;
    font-family: Arial;
    border: border-box;
}

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track{
    background-color: white;
}

::-webkit-scrollbar-thumb{
    background-color: #c9c9c9;
}
#navbar {
    height: 60px;
    background-color: #001111;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.nav-logo {
    height: 53px;
    width: 110px;
}

.border {
    border: 2px solid transparent;
}

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

.logo {
    background-image:url("logo.webp");
    background-size: cover;
    background-position: center;
    height: 55px;
    width: 100%;
    position: relative;
}

/*  (box-2) now we will create nav address or location div  */ 

#small {
    font-size: 0.8rem;
    color: #cccccc;
    margin-left: 12px;
}

.location {
    font-size: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 15px;
}

.nav-address p {
    margin-top: 3px;
}

#country {
    margin-left: 2px;
}

/* (box-3) now we will create search options */

.nav-search {
    display: flex;
    justify-content: space-evenly;
    height: 40px;
    width: 900px;
    border-radius: 4px;

}

.nav-search:hover {
    border: 2px solid pink;
    background-color: #001111
}

.select {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    background-color: #f3f3f3;
    width: 58px;
    text-align: center;
    border: none;
}

.search {
    width: 100%;
    border: none;
    font-size: 1rem;
}

.searchicon {
    width: 45px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1.5rem;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

/* (box-4) and (box-5) now we will create box 4 */
.login1 {
    font-size: 0.7rem;
}

.login2 {
    font-size: 0.95rem;
    font-weight: 600;
}

/* (box-5) now we will create box 5 */

#cart {
    font-size: 30px;
}

.nav-cart {
    font-size: 0.85rem;
    font-weight: 700;
}

/* now we will create panel */

.panel {
    height: 39px;
    background-color: #007185;
    display: flex;
    color: white;
    align-items: center;
    /* justify-content: space-evenly; */
}

.panel-all i {
    font-size: 0.95rem;
}

.panel-all {
    justify-content: left;
    position: relative;
    left: 15px;
}

.panel-ops {
    display: flex;
    width: 80%;
    font-size: 0.85rem;
    font-weight: 540;
    position: relative;
    left: 14px;
}

.panel-ops div {
    margin-left: 15px;
}

.deals {
    font-size: 0.95rem;
    font-weight: 700;
}

/* hero section */

.hero-section {
    background-image: url("hero.jpg");
    background-size: cover;
    height: 350px;
    width: 1525px;
    display: flex;
    justify-content: center;
    align-items: end;
}

/* her-msg section */

.hero-msg a {
    text-decoration: none;
}

.hero-msg {
    background-color: white;
    color: black;
    height: 40px;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    position: relative;
    bottom: 30px;
}

/* now we will create shop section of our website and 1st item*/

.items {
    background-color: pink;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.box {
    background-color: white;
    height: 400px;
    border: 1px solid black;
    width: 23%;
    padding: 20px 0px 15px;
}

.box-image1 {
    background-image: url("toyimage.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

a{
    text-decoration: none;
    color: #007185;
}

.box {
    border: none;
    display: flex;
    justify-content: center;
}

.box-content a {
    position: relative;
    top: 8px;
    font-size: 0.8rem;
}

.box-content div {
    margin-top: 15px;
    margin-bottom: 10px;
}

/* now we will create 2 nd box of our shop section */

.box-image2 {
    background-image: url("cpu.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

/* now we will create box 3 rd box of our shop section */

.box-image3 {
    background-image: url("decoration.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

/* now we will create our box 4 items */

.box-contents a {
    position: relative;
    font-size: 0.8rem;
    margin-left: 20px;
}

.box-contents h2 {
    margin-left: 20px;
}

.box-contents p {
    position: relative;
    bottom: 10px;
}

.box-image4 span {
    font-size: 0.8rem;
    position: relative;
    bottom: 1px;
}

.box-image4 div {
    margin-top: 20px;
    bottom: 2px;
}

.box-image4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    bottom: 30px;
}

.image4-1 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.dress1 {
    background-image: url("dress1.jpg");
    background-position: center;
    background-size: cover;
}

.image4-2 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.dress2 {
    background-image: url("dress2.jpg");
    background-position: center;
    background-size: cover;
}

.image4-3 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.dress3 {
    background-image: url("dress3.jpg");
    background-position: center;
    background-size: cover;
}

.image4-4 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.dress4 {
    background-image: url("dress4.jpg");
    background-position: center;
    background-size: cover;
}

.box-image4 p {
    font-size: 0.8rem;
    position: relative;
    bottom: 7px;
}

/* now  we will create our 5th box or we can say next row full of items */

.nextrow {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 25px;
}

.box-image5 {
    background-image: url("shoes.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

.box-image6 {
    background-image: url("officefurniture.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

.box-image7 {
    background-image: url("combo.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

.box-image8 {
    background-image: url("trimmercombo.jpg");
    height: 320px;
    width: 300px;
    background-size: cover;
    background-position: right;
    /* background-size: cover; */
}

/* now we will create another row full of items */

.box-image9 {
    background-image: url("laptop.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

.box-image10 {
    background-image: url("hotwheels.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: contain;
}

.box-image11 {
    background-image: url("Bussiness.jpg");
    height: 320px;
    width: 300px;
    background-position: center;
    background-size: cover;
}

/* now we will create our 4th box of 3rd row */

.box-contents a {
    position: relative;
    font-size: 0.8rem;
    margin-left: 20px;
}

.box-contents h2 {
    margin-left: 20px;
}

.box-contents p {
    position: relative;
    bottom: 10px;
}

.box-image12 span {
    font-size: 0.8rem;
    position: relative;
    bottom: 1px;
}

.box-image12 div {
    margin-top: 20px;
    bottom: 2px;
}

.box-image12 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    bottom: 30px;
}

.image12-1 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.accesory1 {
    background-image: url("chair.jpg");
    background-position: center;
    background-size: cover;
}

.image12-2 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.accesory2 {
    background-image: url("headset.jpg");
    background-position: center;
    background-size: cover;
}

.image12-3 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.accesory3 {
    background-image: url("keyboard.jpg");
    background-position: center;
    background-size: cover;
}

.image12-4 div {
    border: 2px solid black;
    height: 120px;
    width: 140px;
    border: none;
}

.accesory4 {
    background-image: url("mouse.jpg");
    background-position: center;
    background-size: cover;
}

.box-image12 p {
    font-size: 0.8rem;
    position: relative;
    bottom: 7px;
}

/* now we will design the footer section of the website to complete our website design */

footer {
    margin-top: 40px;
}

.foot-panel1 {
    color: white;
    font-size: 0.8rem;
    background-color: #37475a;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.foot-panel2 {
    display: flex;
    background-color: #222f3d;
    height: 430px;
    justify-content: space-evenly;
}

.foot-panel2 p {
    color: #FFFFFF;
    margin-top: 40px;
}

.foot-panel2 a {
    display: block;
    color: #dddddd;
    font-size: 0.85rem;
    margin-top: 15px;
}

/* now we will panel 3 opf our footer */

.foot-panel3 {
    background-color: #222f3d;
    color: #cccccc;
    height: 90px;
    display: flex;
    align-items: center;
}

.foot-logo {
    height: 65px;
    width: 120px;
    background-image: url("Amazon-Symbol.jpg");
    background-position: center;
    background-size: cover;
}

.foot-logo {
    margin-left: 400px;
}
.foot-cntrycrc {
    display: flex;
    width: 430px;
    justify-content: space-between;
    margin-left: 150px;
}

.foot-cntrycrc div {
    font-size: 0.8rem;
    border-radius: 2px;
    display: flex;
    border: 1px solid #cccccc;
    height:35px;
}

.cntrycrc1 {
    width: 117px;
}
.cntrycrc2 {
    width: 152px;
}
.cntrycrc3 {
    width: 141px;
}

.foot-cntrycrc i, img,p {
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
}

.foot-cntrycrc i {
    color: #FFFFFF;
}

/* now we will create our panel four which is last secttion of our website */

.foot-panel4 {
    height: 150px;
    background-color: #131a22;
    color: #dddddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pages a {
    color: #dddddd;
    font-size: 0.82rem;
    margin-left: 10px;
}

.copyrights p {
    font-size: 0.85rem;
}

/* ───────────────────────────────────────────────
   1. Base helper classes (optional, additive)
   ─────────────────────────────────────────────── */
.responsive-flex   { display:flex; flex-wrap:wrap; }
.responsive-center { justify-content:center; align-items:center; }

/* ───────────────────────────────────────────────
   2. Desktop-first breakpoints
   ─────────────────────────────────────────────── */

/*  XL ≥1200 px  (default styles already cover this range)  */

/*  LG 992-1199 px  */
@media (max-width:1199.98px){
    /* Navbar */
    .nav-search        { width:680px; }
    .panel-ops         { width:90%; }

    /* Hero */
    .hero-section      { width:100%; background-position:center; }

    /* Card grid */
    .items .box,
    .nextrow .box      { width:31%; margin-bottom:25px; }

    /* Multi-image boxes (#4 & #12) */
    .box-image4, .box-image12 { gap:14px; }
    .box-image4 div,
    .box-image12 div          { width:120px; height:100px; }
}

/*  MD 768-991 px  */
@media (max-width:991.98px){
    /* Navbar stack */
    #navbar             { flex-wrap:wrap; height:auto; padding:8px 0; }
    .nav-logo           { margin-bottom:8px; }
    .nav-search         { width:100%; order:3; margin:8px 0; }
    .panel-ops          { width:100%; overflow-x:auto; }

    /* Hero */
    .hero-section       { height:260px; }

    /* Products: two-per-row */
    .items .box,
    .nextrow .box       { width:47%; }

    /* Footer columns */
    .foot-panel2        { flex-wrap:wrap; height:auto; padding:24px 0; }
    .foot-panel2 > div  { width:45%; margin-bottom:24px; }

    /* Footer logo row */
    .foot-panel3        { flex-direction:column; height:auto; padding:20px 0; }
    .foot-logo          { margin:0 0 20px 0; }
    .foot-cntrycrc      { margin:0; flex-wrap:wrap; width:100%; justify-content:center; gap:12px; }
}

/*  SM 576-767 px  */
@media (max-width:767.98px){
    /* Typography tweaks */
    #small, .location, .nav-cart, .deals { font-size:0.8rem; }
    .login1, .login2                      { font-size:0.7rem; }

    /* Navbar icons shrink */
    #cart                 { font-size:24px; }
    .searchicon           { font-size:1.2rem; }

    /* Product cards full-width */
    .items .box,
    .nextrow .box         { width:98%; }

    /* Multi-image grids wrap to two columns */
    .box-image4 div,
    .box-image12 div      { width:45%; height:100px; }

    /* Footer links center */
    .foot-panel2 p        { margin-top:20px; }
    .foot-panel2 a        { margin-top:10px; }
}

/*  XS ≤575 px  */
@media (max-width:575.98px){
    /* Remove custom scrollbar width for very small screens */
    ::-webkit-scrollbar  { width:8px; }

    /* Center logo and collapse nav items */
    #navbar              { justify-content:space-between; padding:0 12px; }
    .nav-address, .panel { display:none; }

    /* Hero image shorter */
    .hero-section        { height:200px; }

    /* Product images scaled down */
    .box-image1, .box-image2, .box-image3,
    .box-image5, .box-image6, .box-image7,
    .box-image8, .box-image9, .box-image10,
    .box-image11          { height:220px; width:90%; }

    /* Button-like links easier to tap */
    .box-content a,
    .box-contents a       { font-size:0.9rem; }

    /* Footer text stack */
    .foot-panel1          { text-align:center; padding:12px; }
    .pages, .copyrights   { text-align:center; }
}

@media (max-width:480px) {
    /* Navbar tweaks */
    #navbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 10px;
    }

    .nav-logo, .nav-address, .nav-login, .nav-returnorders, .nav-cart {
        width: 100%;
        margin: 5px 0;
    }

    .nav-search {
        width: 100%;
        margin: 10px 0;
        order: 2;
        flex-direction: row;
    }

    .select {
        width: 70px;
    }

    .searchicon {
        width: 40px;
        font-size: 1.2rem;
    }

    /* Hide non-critical navbar elements for phones */
    .panel, .panel-ops, .deals {
        display: none;
    }

    /* Hero section */
    .hero-section {
        height: 160px;
        background-size: cover;
        background-position: center;
    }

    .hero-msg {
        font-size: 0.75rem;
        padding: 5px;
        flex-wrap: wrap;
        text-align: center;
    }

    /* Product boxes - 1 per row */
    .items,
    .nextrow {
        flex-direction: column;
        align-items: center;
    }

    .items .box,
    .nextrow .box {
        width: 95%;
        margin-bottom: 20px;
    }

    .box-image1, .box-image2, .box-image3, .box-image5,
    .box-image6, .box-image7, .box-image8, .box-image9,
    .box-image10, .box-image11 {
        height: 200px;
        width: 100%;
    }

    .box-image4, .box-image12 {
        flex-direction: column;
        align-items: center;
    }

    .box-image4 div,
    .box-image12 div {
        width: 90%;
        height: 100px;
        margin-bottom: 10px;
    }

    /* Footer */
    .foot-panel2 {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }

    .foot-panel2 ul {
        width: 90%;
        text-align: center;
    }

    .foot-panel3 {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    .foot-logo {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .foot-cntrycrc {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: auto;
        margin-left: 0;
    }

    .cntrycrc1, .cntrycrc2, .cntrycrc3 {
        width: 90%;
        justify-content: center;
    }

    .foot-panel4 .pages {
        text-align: center;
        padding: 10px 0;
    }

    .copyrights p {
        font-size: 0.75rem;
        text-align: center;
    }
}