*{
    margin: 0;
    font-family: arial;
    box-sizing: border-box;
}
body {
    overflow-x: hidden; /* Prevents horizontal scrolling on mobile */
    padding-top: 60px; /* This creates a 60px "cushion" at the top of the whole page */
}
.navbar{
    position: fixed;
    top: 0;
    width: 100%;
    position:fixed;
    z-index: 999;
    height: 60px;
    background-color: #131d1d;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
/**Box 1:LOGO**/
.navlogo{

    height: 50px;
    width: 113px;
    cursor: pointer;      /* Makes the mouse turn into a hand ☝️ */
}
.logo{
    background-image: url("Images/Amazon-logo.png");
    background-size: cover;
    width: 100%;
    height: 50px;
}
.border{
    border: 1px solid transparent;
}
.border:hover{
    border: 1px solid white;
}
/**BOX 2: Address**/
.address{
    padding: 9px;
     cursor: pointer; 
}
.add-first{
    color: #cccccc;
    font-size: 0.79rem;
    margin-left: 22px;
}
.add-icon{
    display: flex;
    align-items: center;
    padding-bottom: 5px;
}

.add-sec{
    font-size: 0.95rem;
    margin-left: 2px;
}
 /**Box 3: Search Bar **/
 .nav-search{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: transparent;
    width: auto;
    flex-grow: 1;
    margin: 0 10px;
    height: 40px;
    border-radius: 4px;
    border: 3px solid transparent;
    color: #0f1111;
    overflow: hidden;
 }
 
 /* When the user clicks the select OR the input, the whole bar turns border into orange*/
 .search-border:focus-within{
    border: 2px solid orange;
 }

 .search-select{
    margin-left: 10px;
    padding: 0px 4px 0px 9px;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 52px;
    /* text-align: center; */
    background-color: #f3f3f3;
    font-size: 0.79rem;
    border: none;
    outline: none;
     cursor: pointer; 
 }

 .search-input{
    height: 100%;
    /* width: 100%; */
    flex-grow: 1;
    border: none;
    outline: none;
    padding-left: 10px;
    font-size: 0.95rem;
 }
 .search-icon{
    font-size: 1.2rem;
    color: #333;
    background-color: orange;
    height: 100%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0;
    border: none;
    cursor: pointer;      
 }

 /*Box 4: Language*/
 .nav-language{
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 13px 9px 13px 9px;
 }
 .lang-select{
    background-color: transparent;
    color: white;
    font-weight: 800;
    border: none;
    outline: none;
 }
 .lang-select option{
    color: black;
 }

 /*BOX 4: NAV SIGN IN*/
 .nav-signin{
    color: white;
    padding: 9px;
    cursor: pointer;
 }
 .sign{
    font-size: 12px;
 }
 .acc{
    font-size: 14px;
    font-weight: 800;
 }
  /*BOX 4: NAV Returns and orders*/
 .nav-orders{
    color: white;
    padding: 9px;
    cursor: pointer;
 }
 .return{
    font-size: 12px;
 }
 .order{
    font-size: 14px;
    font-weight: 800;
 }
 /*BOX: 5 Carts*/
 .nav-cart{
    padding: 9px;
    display: flex;
    flex-direction: row;
    font-size: 30px;
    align-items:end;
 }
 .cart{
    font-size: 13px;
    font-weight: 800;
 }
  /*Panel*/
.panel{
    color: white;
    width: 100%;
    height: 40px;
    background-color: #222f3d;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
        font-size: 14px;
  }
.all{
    display: flex;
    font-weight: 650;
    justify-content: center;
    align-items: center;
    padding: 9px;
    cursor: pointer;
}
.all i{
    font-weight: 550;
    font-size: 20px;
}
.menu{
        width: 80%;
}
.menu p{
    display: inline;
    margin-left: 8px;
    padding: 9px;
    cursor: pointer;
}
.offer{
    display: flex;
    font-weight: 650;
    padding: 9px;
    cursor: pointer;
}

/*Main section*/
.main-section{
    background-image: url("Images/Cover\ photo.jpg");
    height: 300px;
    background-size: cover;
}

/*Content-Section*/
.content-section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #ffbbee;
}
.box{
    height: 360px;
    width: 23%;
    background-color: white;
    padding: 20px 0px 15px;
    margin-bottom: 25px;
    position: relative;
}
@media (max-width: 768px) {
    .box, .box2 {
        width: 90%; /* One big box per row on mobile */
        margin: 10px auto;
    }
}
.box-in{
  
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.box-img{
    margin-top: 15px;
    margin-bottom: 15px;
    height: 230px;
    background-size: contain;
}
.box-img-p{
      margin-top: 15px;
    margin-bottom: 15px;
    height: 230px;
    background-size: cover;
}
.box p{
     position: absolute;
    bottom: 15px;
    z-index: 10;
    font-size: 14px;
    color: rgb(36, 93, 179);
}
.box2{
    position: relative;
     height: 480px;
    width: 23%;
    background-color: white;
    padding: 20px 0px 15px;
    margin-bottom: 25px;
}
.box-img-f{
      margin-top: 15px;
    margin-bottom: 15px;
    height: 340px;
    background-size: cover;
}
.box h2{
    font-size: 22px;
}
.content-section2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #f7d2ed;
}
.content-section3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #f1d1e9;
}

/*lower section*/
.low-section{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: white;
}
hr{
    width: 100%;
    border: none;
    border-top: 1px solid #d4cfcf;
    margin: 0;
}

.low-txt{
    margin-top: 20px;
    margin-bottom: 5px;
    padding-bottom: 4px;
    font-size: 17px;
}
.low-button{
    width: 220px;
    height: 30px;
    padding: 5px 11px;
    background-color: rgb(255, 208, 0);
    border: none;
    border-radius: 16px;
    cursor: pointer;
}
.low-link{
    margin-top: 5px;
    display: flex;
    font-size: 13px;
}
.low-link a{
    color: #2162A1;
    cursor: pointer;
    margin-left: 3px;
}

/* Footer */
.footpanel{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #37475a;
}
.footpanel a{
    margin-top: 15px;
    margin-bottom: 15px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}
.foot-mid{
    cursor: pointer;
    background-color: #222f3d;
    color: white;
    height: 400px;
    display: flex;
    justify-content: space-evenly;
}
ul p{
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 60px;
    font-weight: 800;
}
ul a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: 12px;
    margin-bottom: 12px;
    display: block;
    font-size: 0.88rem;
}

.foot-mid2{
    cursor: pointer;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #222f3d;
    border-top: 0.5px solid #464646;
}
.logoo{
    background-image: url("Images/Amazon-logo.png");
    background-size: cover;
    width: 110px;
    height: 60px;
    margin-left: 200px;
    margin-right: 1%;
}
.foot-select{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.85rem;
    display: flex;
    justify-content: left;
    align-items: center;
    color: rgb(230, 222, 222);
    width: 170px;
    height: 30px;
    background-color: transparent;
    border: 1px solid rgb(182, 178, 178);
    position: relative;
    flex-wrap: wrap;
}
.s1{
    display: flex;
    justify-content: center;
    margin-right: 200px;
}
.foot-select p{
    margin-left: 10px;
}
.foot-select i{
      margin-left: 4px;
}
.s2 {
    position: absolute;
    right: 10px;
}
.s3{
    margin-left: 10px;
}
.s3 h4{
    margin-left: 4px;
}
.s3 p{
    margin-left: 12px;
}

.last{
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    background-color: #222f3d;
    border-top: 1px solid #464646;
    color: white;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.95rem;
}
.line1{
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.line1 a{
    margin-left: 10px;
    color: white;
    text-decoration: none;
}
.line2{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.line3{
    display: flex;
    justify-content: center;
    width: 100%;
}
.line3 a{
        color: white;
        margin-left: 5px;
}
.alert{
    display: flex;
    justify-content: center;
    margin-bottom:  40px;
     color: white;
}
/* --- Final Mobile & Tablet Responsive Fixes --- */
@media (max-width: 850px) {
    /* 1. Hide unwanted items to keep it clean */
    .address, 
    .nav-language, 
    .nav-orders, 
    .nav-cart,
    .menu p { 
        display: none !important; 
    }

    /* 2. Navbar: Logo, Search, and Sign-in only */
    .navbar {
        justify-content: space-between;
        padding: 0 10px;
        width: 100%;
    }

    .navlogo {
        width: 80px;
    }

    .nav-search {
        flex-grow: 1; /* Takes up all middle space */
        margin: 0 10px;
        min-width: 120px;
    }

    /* 3. Panel Fix (Stop the half-side glitch) */
    .panel {
        justify-content: flex-start;
        padding-left: 10px;
    }
    .menu {
        width: auto;
    }

    /* 4. Content Boxes: 2 per row for tablets */
    .box, .box2 {
        width: 45%; 
        height: auto; /* Let them grow with content */
        margin-bottom: 15px;
    }

    /* 5. Footer: Stack columns vertically */
    .foot-mid {
        flex-wrap: wrap;
        height: auto;
        padding: 20px;
        justify-content: flex-start;
    }
    
    .foot-mid ul {
        width: 50%; /* Each list takes half the width */
        margin-bottom: 20px;
    }

    /* 6. Stop Horizontal Scroll */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    .main-section {
    height: 250px;  
    background-image: url("Images/Cover\ photo.jpg");          /* Shorter height for mobile screens */
    background-repeat: no-repeat;
    background-position: center top; /* Keeps the middle of your Amazon banner visible */
    background-size: 100% 100%;    /* Ensures the image fills the area without stretching */
    width: 100%;
    /* margin-top: 60px;          Matches your navbar height so nothing is hidden */
}

.content-section {
    margin-top: -50px;         /* This "Killer" trick overlaps the boxes onto the banner slightly, just like the real Amazon! */
    padding-top: 10px;
}
}

/* Extra Small Screen (Phones) */
@media (max-width: 480px) {
    .box, .box2 {
        width: 95%; /* 1 big box per row */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* On very small phones, search bar might be too tight. 
       If you want it to stay, keep this as is. */
    .nav-search {
        min-width: 100px;
    }
    
    .logoo {
        margin-left: 0; /* Center footer logo */
        margin-right: 0;
    }
}