html, body{
    background-color: bisque;
    width:100%;
    overflow-x:hidden;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 60px; 
}
nav ul{
    display: flex;
    list-style: none;
    gap: 30px;
}
 nav a {
 text-decoration: none;
 text-transform: capitalize;
 color:maroon;
 background-color:bisque;
 border-radius: 20px;
 padding:7px;

}
nav a:hover{
    background-color:maroon;
    color:bisque;
}
nav button{
    background-color:maroon;
    color:bisque;
    border-radius: 20px;
    padding:7px;
}
nav button:hover{
    background-color:bisque;
    color:maroon;
}
.logo{
    width: 100px;
    color:orangered;
    font-size: 30px;
}
#home {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    padding:70px;
}
.text{
    width: 45%;
}
.image{
    width: 45%;
    height: auto;
}
.image img{
    width: 100%;
    display: block;
}
#home h1{
    color:maroon;
}
#home p{
    color:brown;
    text-transform: capitalize;
    font-size:x-large
}
#home button{
    font-size:x-large;
    background-color:maroon;
    color:bisque;
    border-radius: 20px;
    padding:7px;
}
#home button:hover{
    background-color:bisque;
    color:maroon;
}
#collection{
    margin-top: 120px;
    padding: 50px;
    background-color:moccasin;
    width:100%;
}
#collection h2{
    text-align: center;
    color:maroon;
    font-size:xx-large;
}


.bags{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 30px;
}
.card{
    width: 250px;
    text-align: center;
}
.card img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}
#about{
    padding: 50px 5%;
    display: flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
#about imd{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 50px;
}
.imd img{
    width: 250px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
}
#about p{
 max-width:700px;
 font-size:1.2rem;
 line-height: 1.6;
    color:brown;
    text-align:center;
}
#about h2{
    text-align: center;
    color:maroon;
    font-size:xx-large;
}
#about p{
    text-align: center;
    color:brown;
    font-size:xx-large;
}

#reviews{
    margin: 50px;
    padding: 50px;
}
#reviews h2{
    text-align: center;
    color:maroon;
    font-size:xx-large;
}
#reviews p{
    color:chocolate;
    font-size:xx-large;+
}
#review-container{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 30px;
}
.review h4{ 
    color:maroon;
    font-size:large;
}

#contact{
    margin: 50px;
    padding: 50px;
}
#contact h2{
    text-align: center;
    color:maroon; 
    font-size:xx-large;
}
#contact p{
    color:chocolate;
    font-size:xx-large;
}
#contact button{
    background-color:maroon;
    color:bisque;
    border-radius: 20px;
    padding:7px;
}
#contact button:hover{
    background-color:bisque;
    color:maroon;
}
footer{
    font-size: xx-large;
    background-color:maroon;
    color:bisque;
    text-align: center;
    padding: 20px;
}
@media(max-width: 992px){
    nav{
        flex-direction: column;
        align-items: flex-start;
    }
    nav ul{
        flex-direction: column;
        gap: 10px;
    }
    #home{
        flex-direction: column;
        text-align: center;
    }
    .text, .image{
        width: 100%;
    }
/* ==========================================
   تنسيقات شاشات الموبايل (Mobile Responsive)
   ========================================== */
@media (max-width: 768px) {

  /* 1. ضبط شريط التنقل (Navbar) */
  nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 15px 10px;
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
  }

  nav ul li a {
    font-size: 1rem;
  }

  /* 2. القسم الرئيسي (Home Section) */
  #home {
    flex-direction: column-reverse; /* الصورة فوق والنص تحتها */
    text-align: center;
    padding: 30px 15px;
    gap: 20px;
  }

  #home .text, 
  #home .image {
    width: 100%;
  }

  #home .image img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
  }

  #home h1 {
    font-size: 1.8rem; /* تصغير العنوان الكبير ليناسب الموبايل */
    line-height: 1.3;
  }

  #home p {
    font-size: 0.95rem;
  }

  /* 3. قسم المنتجات (Collection Section) */
  #collection {
    padding: 30px 15px;
    text-align: center;
  }

  .bags {
    flex-direction: column; /* جعل الكروت ينزلوا تحت بعض بروقان */
    align-items: center;
    gap: 20px;
  }

  .card {
    width: 90%; /* إعطاء مساحة متناسقة للكرت */
    max-width: 320px;
    margin: 0 auto;
  }

  .card img {
    width: 100%;
    height: 260px;
    object-fit: cover; 
    border-radius: 8px;
  }

  /* 4. بقية الأقسام (About, Reviews, Contact) */
  #about, #reviews, #contact {
    padding: 30px 20px;
    text-align: center;
  }

  #reviews blockquote, #reviews p {
    font-size: 0.95rem;
  }
}
@media(max-width: 576px){
    nav{
        padding: 10px;
    }
    #home{
        padding: 10px;
    }
    #collection{
        padding: 10px;
    }
    #about{
        padding: 10px;
    }
    #reviews{
        padding: 10px;
    }
    #contact{
        padding: 10px;
    }
}