* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #fff;
    
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#881319; /* لون رأس الصفحة */
    color: white;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    left: 0;
}

.logo-area {
  text-align: left;
}

.logo {
  width: 120px; /* أو الحجم اللي يناسبك */
  height: auto;
}




nav ul {
    list-style-type: none;
    display: flex;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: rgb(250, 249, 249);
    text-decoration: none;
}
nav :hover {
    color: #9a9197;
  }


.search-container {
    display: flex;
    order: 1;
}

.search-container input {
    padding: 5px;
    border-radius: 5px;
    border: none;
}

.search-container button {
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    background-color: #7c7d7e; /* لون زر البحث */
    color: white;
    cursor: pointer;
}

.icons {
    display: flex;
}

.icons a {
    color: white;
    margin-left: 15px;
    text-decoration: none;
}


#hero {
  background-image: url("img/photo_3.jpg");
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 30px;
  word-spacing: 8px;
  letter-spacing: 1px;
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  position: relative;
  overflow: hidden;
}

/* تدرج فوق الخلفية */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
  z-index: 1;
}

/* محتوى فوق التدرج */
#hero h4,
#hero h2,
#hero h1,
#hero p,
#hero button {
  position: relative;
  z-index: 2;
  animation: fadeInUp 1s ease forwards;
}

/* النصوص */
#hero h4 {
  font-size: 20px;
  font-weight: 500;
  color: #080808;
  margin-bottom: 10px;
}

#hero h2 {
  font-size: 32px;
  font-weight: bold;
  color: #050505;
  margin-bottom: 10px;
}

#hero h1 {
  font-size: 40px;
  font-weight: 700;
  color: #050505;
  margin-bottom: 15px;
}

#hero p {
  font-size: 16px;
  color: #0b0b0b;
  margin-bottom: 25px;
  line-height: 1.8;
}

/* الزر */
#hero button {
  background-color: #881319;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#hero button:hover {
  background-color: #a72c2c;
  transform: scale(1.05);
}

/* حركة دخول */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-badge {
  position: absolute;
  top: 40px;
  right: 80px;
  background-color: #ffbd27;
  color: #1a1a1a;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 30px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  animation: pulseBadge 1.5s infinite ease-in-out;
  z-index: 2;
}

/* حركة نبض خفيفة */
@keyframes pulseBadge {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}


.main {
    padding: 40px 80px;
}

section {
    margin-bottom: 40px;
}
button.normal{
    font-size: 14px;
    font-weight: 600;
    padding: 15px 30px;
    color: #000;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.2s;
}
button.white {
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    color: #000;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #000;
    outline: none;
    transition: 0.2s;
}

.payment-methods {
    padding: 20px;
}

.ai-chatbot {
    text-align: center;
    padding: 20px;
}

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between ;
}
footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}
footer .logo{
    margin-bottom: 30px;
}
footer h4{
    font-size: 14px;
    padding-bottom: 20px;
}
footer p{
    font-size: 13px;
   margin: 0 0 8px 0;
}
footer a{
    font-size: 13px;
    text-decoration: none;
    color: #222;
   margin-bottom: 10px;
}
footer .follow{
    margin-top: 20px;
}
footer .follow i{
   color: #34463d;
   padding-right: 4px;
   cursor: pointer;
}
footer .install .row img{
    border: 1px solid #088178;
    border-radius: 6px;
}
footer .install img{
    margin: 10px 0 15px 0;
}
footer .follow i:hover,
footer a:hover {
    color: #088178;
}
footer .copyright{
    width: 100%;
    text-align: center;
}
#apply-discount {
  background-color: #881319 !important; /* لون خمري فاخر */
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  font-family: 'Cairo', sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

#apply-discount:hover {
  background-color: #a72c2c !important;
  transform: scale(1.03) !important;
}
#checkout-btn {
  background: linear-gradient(to left, #a72c2c, #881319) !important; /* تدرج خمري فاخر */
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  font-family: 'Cairo', sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
  transition: background 0.3s ease, transform 0.2s ease !important;
}

#checkout-btn:hover {
  background: linear-gradient(to left, #b83c3c, #9a1f1f) !important;
  transform: scale(1.04) !important;
}
.contact-header {
  background-image: url("img/photo_77.jpg"); /* غيّر المسار حسب الصورة */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 20px;
  text-align: center;
  color: white;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.contact-header::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.4); /* تدرج شفاف فوق الصورة */
  z-index: -1;
  border-radius: 12px;
}


.contact-button {
  margin-top: 15px;
  text-align: center;
}

.contact-button .normal {
  background-color: #881319;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s ease;
}

.contact-button .normal:hover {
  background-color: #a72c2c;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.fa-shopping-cart {
  transition: transform 0.3s ease;
}

.fa-shopping-cart:hover {
  transform: scale(1.2);
}


.main-feature {
  background-color: #fdf8f6;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Cairo', sans-serif;
}

.fe-box {
  display: inline-block;
  width: 280px;
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.fe-box:hover {
  transform: translateY(-5px);
}

.fe-box i {
  font-size: 36px;
  color: #881319;
  margin-bottom: 12px;
  animation: pulse 2s infinite;
}

.fe-box h6 {
  font-size: 18px;
  color: #222;
  margin-bottom: 8px;
}

.fe-box p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* حركة أيقونة ناعمة */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.cart-header {
  background-image: url("img/photo_200.jpg"); /* غيّر المسار حسب الصورة */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 20px;
  text-align: center;
  color: white;
  border-radius: 12px;
  
}


#cart h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #881319;
}

#cart table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

#cart table td {
  padding: 15px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

#cart table img {
  width: 70px;
  border-radius: 10px;
}

#cart input[type="number"] {
  width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.delete-icon {
  color: #881319;
  cursor: pointer;
  font-size: 18px;
  transition: 0.3s ease;
}

.delete-icon:hover {
  color: #a72c2c;
}

#cart-summary {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 40px 80px;
  gap: 20px;
}

.coupon-box, .total-box {
  flex: 1;
  background-color: #f9f9f9;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.coupon-box input {
  width: 70%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.coupon-box button,
.total-box button {
  background-color: #881319;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
}

.coupon-box button:hover,
.total-box button:hover {
  background-color: #a72c2c;
}

.total-box table {
  width: 100%;
  margin-bottom: 20px;
}

.total-box td {
  padding: 10px;
  font-size: 14px;
}
#checkout {
  padding: 40px 80px;
  max-width: 700px;
  margin: auto;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

#checkout h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #881319;
  font-size: 28px;
}

#checkout-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

#checkout button {
  background-color: #881319;
  color: white;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
}

#checkout button:hover {
  background-color: #a72c2c;
}

#product1{
    text-align: center;
    
}
#product1 .pro-container{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;
}
#product1 .pro {
    width: 23%;
    min-width: 250px;
    padding: 10px 12px;
    border: 1px solid #cce7d0;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
    margin: 15px 0;
    transition: 0.2s ease;
    
    
}
#product1 .pro img{
    width: 100%;
    border-radius: 20px;
}
.pro {
  width: 100%;
  max-width: 300px; /* أو حسب التصميم */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
}


.video-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1; /* يحافظ على تناسق الشكل */
  overflow: hidden;
  border-radius: 10px;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#product1 .pro img{
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    height: auto;
}
#product1 .por:hover{
    box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro .des{
    text-align: start;
    padding: 10px 0;
}
#product1 .pro .des span{
    color: #606063;
    font-size: 12px;
}
#product1 .pro .des h5{
    padding-top: 7px;
    color: #1a1a1a ;
    font-size: 14px;
}
#product1 .pro .star{
    font-size: 20px;
    color: gold;
}
#product1 .pro .des h4{
    padding-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #494e4d;
}
#product1 .pro .cart-icon{
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color:#80ca80 ;
    font-weight: 500;
    color: #088178;
    border: 1px solid #cce7d0;
    bottom: 20px;
    right: 10px;
}
.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  
}

.section-title h2 {
  font-size: 24px;
  color: #1a1a1a;
  margin: 0;
}

.badge {
  position: absolute;
  top: -10px;
  right: -60px;
  background-color: #881319;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: bold;
  animation: pulseBadge 1.5s infinite ease-in-out;
}

@keyframes pulseBadge {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}


/* قسم البانر */
#banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: url(img/photo_33.jpg);
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
  position: relative;
  animation: fadeInScale 1s ease forwards;
  opacity: 0;
}

/* تدرج فوق الصورة */
#banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  z-index: 1;
  border-radius: 12px;
}

/* محتوى فوق التدرج */
#banner h4,
#banner h2,
#banner button {
  position: relative;
  z-index: 2;
}

/* النصوص */
#banner h4 {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  animation: fadeInUp 1s ease forwards;
}

#banner h2 {
  color: #fff;
  font-size: 22px;
  padding: 10px 0;
  animation: fadeInUp 1.2s ease forwards;
}

#banner h2 span {
  color: #ef3636;
  font-weight: bold;
}

/* الزر */
#banner button {
  background-color: #fff;
  color: #881319;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: fadeInUp 1.4s ease forwards;
}

#banner button:hover {
  background-color: #881319;
  color: #fff;
  transform: scale(1.05);
}

/* حركة دخول */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

#sm-bannar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 60px 20px;
  font-family: 'Cairo', sans-serif;
}

#sm-bannar .banner-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background-image: url('img/photo_111.jpg');
  min-width: 580px;
  height: 50vh;
  background-size: cover;
  background-position: center;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

#sm-bannar .banner-box2 {
  background-image: url('img/photo_44.jpg');
}

#sm-bannar .banner-box:hover {
  transform: translateY(-5px);
}

#sm-bannar h4 {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 10px;
}

#sm-bannar h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
}

#sm-bannar span {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}

#sm-bannar button {
  background-color: #881319;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#sm-bannar .banner-box:hover button {
  background-color: #9f989a;
  border: 1px solid #cce7d0;
}

#newsletter {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background-image: url('img/photo_4.jpg');
  background-repeat: no-repeat;
  background-position: 20% 30%;
  background-color: #041e42;
  padding: 60px 20px;
  border-radius: 12px;
  animation: fadeInUp 1s ease forwards;
  font-family: 'Cairo', sans-serif;
}

#newsletter .newstext {
  flex: 1;
  min-width: 280px;
  text-align: left;
  direction: ltr;
}

#newsletter h4 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

#newsletter p {
  font-size: 14px;
  font-weight: 600;
  color: #f8fafa;
  line-height: 1.6;
}

#newsletter p span {
  color: #ffbd27;
  font-weight: bold;
}

#newsletter .form {
  display: flex;
  width: 40%;
  min-width: 280px;
  margin-top: 20px;
  animation: fadeInRight 1s ease forwards;
}

#newsletter input {
  height: 3.125rem;
  padding: 0 1.25em;
  font-size: 14px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: box-shadow 0.3s ease;
}

#newsletter input:focus {
  border-color: #ffbd27;
  box-shadow: 0 0 8px rgba(255, 189, 39, 0.4);
}

#newsletter button.normal {
  background-color: #3b5a95;
  color: #fff;
  white-space: nowrap;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding: 0 1.5em;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#newsletter button.normal:hover {
  background-color: #2c4475;
  transform: scale(1.05);
}

/* حركة دخول */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

#page-header {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

#changing-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* يحافظ على تناسق الصورة */
  z-index: 0;
  transition: opacity 1s ease-in-out;
}

.header-text {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 12px;
  color: white;
}

#page-header h2,
#page-header p{
    color: #fff;
}


#pagination{
    text-align: center;
}
#pagination a{
    text-decoration: none;
    background-color:  #881319;
    padding: 15px 20px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}
#pagination a i{
    font-size: 16px;
    font-weight: 600;
}
#prodetails{
    display: flex;
    margin-top: 20px;
}
#prodetails .single-pro-image{
    width: 40%;
    margin-right: 50px;
}
.small-img-group{
    display: flex;
    justify-content: space-between;
}
.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}
#prodetails .single-pro-details{
    width: 50%;
    padding-top: 30px;
}
#prodetails .single-pro-details h4{
    padding: 40px 0 20px 0;
}
#prodetails .single-pro-details h2{
    font-size: 26px;
}
#prodetails .single-pro-details select{
    display: block;
    padding: 5px 10px;
    margin-bottom: 10px;
}
#prodetails .single-pro-details input{
    width: 50px;
    height: 47px;
    padding-left: 10px;
    font-size: 16px;
    margin-right: 10px;
}
#prodetails .single-pro-details input:focus{
    outline: none;
}
#prodetails .single-pro-details button{
    background:  #881319;
    color: #fff;
}
#prodetails .single-pro-details span{
    line-height: 25px;
}
#page-header.blog-header{
    background-image: url(img/photo_44.jpg);
}

#contact-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#contact-details .details{
    width: 40%;
}
#contact-details .details span,
#form-details form span {
    font-size: 12px;
}
#contact-details .details h2,
#form-details form h2 {
    font-size: 26px;
    line-height: 35px;
    padding: 20px 0;
}

#contact-details .details h3{
    font-size: 16px;
    padding-bottom: 15px;
}
#contact-details .details li{
    list-style: none;
    display: flex;
    padding: 10px 0;
}
#contact-details .details li i{
    font-size: 14px;
    padding-right: 22px;
}
#contact-details .details li p{
    margin: 0;
    font-size: 14px;
}
#contact-details .map{
    width: 55%;
    height: 400px;
}
#contact-details .map iframe{
    width: 100%;
    height: 100%;
}
#checkout {
  background-color: #fdfdfd;
  padding: 40px 20px;
  max-width: 600px;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

#checkout h2 {
  color: #881319;
  margin-bottom: 10px;
}

#checkout form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#checkout input,
#checkout textarea,
#checkout select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: 'Cairo', sans-serif;
}

#order-summary {
  margin-top: 30px;
  background-color: #f7f7f7;
  padding: 15px;
  border-radius: 8px;
}

#form-details{
    display: flex;
    justify-content: space-between;
    margin: 30px;
    padding: 80px;
    border: 1px solid #7a7676;
}
#form-details form{
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#form-details form input,
#form-details form textarea {
    width: 100%;
    padding: 12px 15px;
    outline: none;
    margin-bottom: 20px;
    border: 1px solid #7a7676;
}
#form-details form button{
    background-color:#98284c ;
    color: #fff;
}
#form-details .people div{
    padding-bottom: 25px;
    display: flex;
    align-items: flex-start;
}
#form-details .people div img{
    width: 65px;
    height: 65px;
    object-fit: cover;
    margin-right: 15px;
}
#form-details .people div p{
    margin: 0;
    font-size: 13px;
    line-height: 25px;
}
#form-details .people div p span{
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}
#cart table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    white-space: nowrap;
}
#cart table img{
    width: 70px;
}
#cart table td:nth-child(1){
    width: 100px;
    text-align: center;
}
#cart table td:nth-child(2){
    width: 150px;
    text-align: center;
}
#cart table td:nth-child(3){
    width: 250px;
    text-align: center;
}
#cart table td:nth-child(4),
#cart table td:nth-child(5)
#cart table td:nth-child(6){
    width: 150px;
    text-align: center;
}
#cart table td:nth-child(5) input{
    width: 70px;
    padding: 10px 5px 10px 15px;
}
#cart table thead{
    border: 1px solid #7a7676;
    border-left: none;
    border-right: none;
}
#cart table thead td{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 18px 0;
}
#cart table tbody tr td{
    padding-top: 15px;
}
#cart table tbody td{
    font-size: 13px;
}
#cart-add{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#coupon{
    width: 50%;
    margin-bottom: 30px;
}
#coupon h3,
#Subtotal h3 {
    padding-bottom: 15px;
} 
#coupon input{
    padding: 10px 20px;
    outline: none;
    width: 60%;
    margin-right: 10px;
    border: 1px solid #7a7676;
}
#coupon button,
#Subtotal button {
    background-color: #044e49;
    color: #fff;
    padding: 12px 20px;
}
#Subtotal{
    width: 50%;
    margin-bottom: 30px;
    border: 1px solid #7a7676;
    padding: 30px;
}
#Subtotal table{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}
#Subtotal table td{
    width: 50%;
    border: 1px solid #7a7676;
    padding: 10px;
    font-size: 13px;
}
@media (max-width: 768px) {
  #newsletter {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }

  #newsletter .form {
    width: 100%;
    margin-top: 15px;
  }

  #prodetails {
    flex-direction: column;
  }

  #prodetails .single-pro-image,
  #prodetails .single-pro-details {
    width: 100%;
    margin: 0;
  }

  #contact-details {
    flex-direction: column;
  }

  #contact-details .details,
  #contact-details .map {
    width: 100%;
    margin-bottom: 20px;
  }

  #form-details {
    flex-direction: column;
    padding: 30px;
  }

  #form-details form,
  #form-details .people {
    width: 100%;
  }

  #cart-add {
    flex-direction: column;
  }

  #coupon,
  #Subtotal {
    width: 100%;
  }
}
/* =========================================
   📱 RESPONSIVE DESIGN - MOBILE
========================================= */

@media (max-width: 768px) {

  /* =========================
     الإعدادات العامة
  ========================= */

  body {
    width: 100%;
    overflow-x: hidden;
  }

  .main {
    padding: 25px 15px;
  }

  section {
    margin-bottom: 25px;
  }


  /* =========================
     HEADER
  ========================= */

  header {
    padding: 10px 15px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .logo-area {
    width: auto;
  }

  .logo {
    width: 85px;
  }

  nav {
    width: 100%;
    order: 3;
  }

  nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  nav ul li {
    margin: 0 5px;
  }

  nav ul li a {
    font-size: 13px;
  }

  .search-container {
    order: 2;
    width: auto;
  }

  .search-container input {
    width: 120px;
    padding: 7px;
  }

  .search-container button {
    padding: 7px 10px;
  }

  .icons {
    gap: 5px;
  }

  .icons a {
    margin-left: 8px;
    font-size: 14px;
  }


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

  #hero {
    min-height: 650px;
    height: auto;
    padding: 60px 20px;

    align-items: flex-start;
    justify-content: center;

    background-position: center;
  }

  #hero h4 {
    font-size: 16px;
    line-height: 1.6;
  }

  #hero h2 {
    font-size: 25px;
    line-height: 1.5;
  }

  #hero h1 {
    font-size: 32px;
    line-height: 1.4;
  }

  #hero p {
    font-size: 14px;
    line-height: 1.9;
    max-width: 100%;
  }

  #hero button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .hero-badge {
    top: 20px;
    right: 20px;

    font-size: 11px;
    padding: 5px 12px;
  }


  /* =========================
     FEATURE BOXES
  ========================= */

  .main-feature {
    padding: 40px 15px;
  }

  .fe-box {
    display: block;

    width: 100%;
    max-width: 350px;

    margin: 15px auto;
  }


  /* =========================
     PRODUCT SECTION
  ========================= */

  #product1 {
    padding: 30px 15px;
  }

  #product1 .pro-container {
    display: grid;

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

    gap: 12px;

    padding-top: 15px;
  }

  #product1 .pro {
    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 8px;

    border-radius: 15px;
  }

  #product1 .pro img {
    width: 100%;
    height: 170px;
    object-fit: cover;

    border-radius: 10px;
  }

  #product1 .pro .des {
    padding: 8px 0;
  }

  #product1 .pro .des span {
    font-size: 10px;
  }

  #product1 .pro .des h5 {
    font-size: 13px;
    line-height: 1.5;
  }

  #product1 .pro .star {
    font-size: 15px;
  }

  #product1 .pro .des h4 {
    font-size: 14px;
  }


  /* =========================
     SECTION TITLE
  ========================= */

  .section-title {
    margin-bottom: 15px;
  }

  .section-title h2 {
    font-size: 21px;
  }

  .badge {
    top: -8px;
    right: -45px;

    font-size: 9px;
    padding: 3px 8px;
  }


  /* =========================
     BANNER
  ========================= */

  #banner {
    height: 300px;

    padding: 20px;

    border-radius: 8px;
  }

  #banner h4 {
    font-size: 15px;
  }

  #banner h2 {
    font-size: 19px;

    line-height: 1.6;
  }

  #banner button {
    font-size: 14px;

    padding: 9px 18px;
  }


  /* =========================
     SMALL BANNERS
  ========================= */

  #sm-bannar {
    display: flex;

    flex-direction: column;

    padding: 30px 15px;

    gap: 15px;
  }

  #sm-bannar .banner-box,
  #sm-bannar .banner-box2 {

    width: 100%;

    min-width: 0;

    height: 300px;

    padding: 20px;

    align-items: flex-end;

    border-radius: 10px;
  }

  #sm-bannar h4 {
    font-size: 16px;
  }

  #sm-bannar h2 {
    font-size: 20px;
    line-height: 1.5;
  }

  #sm-bannar span {
    font-size: 12px;
  }

  #sm-bannar button {
    font-size: 14px;

    padding: 10px 18px;
  }
  /* =========================
     NEWSLETTER
  ========================= */

  #newsletter {
    display: flex;

    flex-direction: column;

    padding: 35px 15px;

    text-align: center;
  }

  #newsletter .newstext {
    width: 100%;

    min-width: 0;

    text-align: center;

    direction: rtl;
  }

  #newsletter h4 {
    font-size: 19px;
  }

  #newsletter p {
    font-size: 13px;
  }

  #newsletter .form {
    width: 100%;

    min-width: 0;

    margin-top: 20px;
  }

  #newsletter input {
    min-width: 0;

    height: 45px;
  }

  #newsletter button.normal {
    padding: 0 15px;

    font-size: 13px;
  }


  /* =========================
     PAGE HEADER
  ========================= */

  #page-header {
    height: 280px;
  }

  .header-text {
    padding: 15px 20px;

    width: 90%;
  }

  #page-header h2 {
    font-size: 23px;
  }

  #page-header p {
    font-size: 13px;

    line-height: 1.7;
  }


  /* =========================
     PRODUCT DETAILS
  ========================= */

  #prodetails {
    display: flex;

    flex-direction: column;

    padding: 20px 15px;

    margin-top: 0;
  }

  #prodetails .single-pro-image {
    width: 100%;

    margin: 0;
  }

  #prodetails .single-pro-details {
    width: 100%;

    padding-top: 25px;
  }

  #prodetails .single-pro-details h4 {
    padding: 20px 0 10px;
  }

  #prodetails .single-pro-details h2 {
    font-size: 23px;
  }

  #prodetails .single-pro-details span {
    font-size: 14px;

    line-height: 1.8;
  }

  .small-img-group {
    gap: 8px;
  }


  /* =========================
     CONTACT DETAILS
  ========================= */

  #contact-details {
    display: flex;

    flex-direction: column;

    padding: 30px 15px;
  }

  #contact-details .details {
    width: 100%;
  }

  #contact-details .details h2,
  #form-details form h2 {
    font-size: 22px;

    line-height: 1.6;
  }

  #contact-details .map {
    width: 100%;

    height: 300px;

    margin-top: 20px;
  }


  /* =========================
     CONTACT FORM
  ========================= */

  #form-details {
    display: flex;

    flex-direction: column;

    margin: 20px 15px;

    padding: 25px 15px;

    gap: 30px;
  }

  #form-details form {
    width: 100%;
  }

  #form-details .people {
    width: 100%;
  }

  #form-details form input,
  #form-details form textarea {
    width: 100%;

    font-size: 14px;
  }

  #form-details .people div {
    width: 100%;
  }


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

  #cart {
    padding: 20px 15px;

    overflow-x: auto;
  }

  #cart table {
    min-width: 650px;

    white-space: nowrap;
  }

  #cart table td {
    padding: 10px;
  }

  #cart table img {
    width: 55px;
  }


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

  #cart-summary {
    display: flex;

    flex-direction: column;

    padding: 25px 15px;

    gap: 15px;
  }

  .coupon-box,
  .total-box {
    width: 100%;

    padding: 20px;
  }

  .coupon-box input {
    width: 60%;

    margin-right: 5px;
  }

  .coupon-box button {
    padding: 10px 12px;
  }


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

  #cart-add {
    display: flex;

    flex-direction: column;

    padding: 20px 15px;
  }

  #coupon,
  #Subtotal {
    width: 100%;

    margin-bottom: 20px;
  }

  #coupon input {
    width: 60%;

    margin-right: 5px;
  }

  #coupon button {
    padding: 10px 12px;
  }

  #Subtotal {
    padding: 20px;
  }


  /* =========================
     CHECKOUT
  ========================= */

  #checkout {
    width: calc(100% - 30px);

    padding: 25px 15px;

    margin: 20px auto;

    border-radius: 10px;
  }

  #checkout h2 {
    font-size: 23px;
  }

  #checkout input,
  #checkout textarea,
  #checkout select {
    width: 100%;

    font-size: 14px;
  }


  /* =========================
     PAGINATION
  ========================= */

  #pagination {
    padding: 20px 15px;
  }

  #pagination a {
    padding: 10px 14px;

    font-size: 13px;
  }
  /* =========================
     CONTACT HEADER
  ========================= */

  .contact-header {
    padding: 45px 15px;

    border-radius: 8px;
  }

  .contact-header h2 {
    font-size: 24px;
  }


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

  .cart-header {
    padding: 45px 15px;

    border-radius: 8px;
  }

  .cart-header h2 {
    font-size: 24px;
  }


  /* =========================
     PAYMENT
  ========================= */

  .payment-methods {
    padding: 15px;
  }

  .ai-chatbot {
    padding: 15px;
  }


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

  footer {
    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 35px 20px;
  }

  footer .col {
    width: 100%;

    align-items: center;

    margin-bottom: 25px;
  }

  footer .logo {
    width: 100px;

    margin-bottom: 20px;
  }

  footer h4 {
    font-size: 15px;

    padding-bottom: 12px;
  }

  footer p,
  footer a {
    font-size: 13px;
  }

  footer .follow {
    margin-top: 10px;
  }

  footer .copyright {
    width: 100%;

    font-size: 12px;
  }


  /* =========================
     BUTTONS
  ========================= */

  button.normal {
    padding: 11px 20px;

    font-size: 13px;
  }

  button.white {
    padding: 9px 14px;

    font-size: 12px;
  }

  #apply-discount {
    padding: 9px 18px !important;

    font-size: 13px !important;
  }

  #checkout-btn {
    width: 100%;

    padding: 12px 20px !important;

    font-size: 14px !important;
  }

}


/* =========================================
   📱 موبايلات صغيرة جداً
   أقل من 480px
========================================= */

@media (max-width: 480px) {

  /* HEADER */

  header {
    padding: 8px 10px;
  }

  .logo {
    width: 75px;
  }

  nav ul {
    gap: 5px;
  }

  nav ul li {
    margin: 0 3px;
  }

  nav ul li a {
    font-size: 11px;
  }

  .search-container input {
    width: 100px;

    font-size: 11px;
  }


  /* HERO */

  #hero {
    min-height: 600px;

    padding: 50px 15px;
  }

  #hero h4 {
    font-size: 14px;
  }

  #hero h2 {
    font-size: 22px;
  }

  #hero h1 {
    font-size: 28px;
  }

  #hero p {
    font-size: 13px;
  }


  /* PRODUCTS */

  #product1 .pro-container {
    grid-template-columns: repeat(2, 1fr);

    gap: 8px;
  }

  #product1 .pro {
    padding: 7px;
  }

  #product1 .pro img {
    height: 145px;
  }

  #product1 .pro .des h5 {
    font-size: 12px;
  }

  #product1 .pro .des h4 {
    font-size: 13px;
  }

  #product1 .pro .star {
    font-size: 13px;
  }


  /* SMALL BANNERS */

  #sm-bannar .banner-box,
  #sm-bannar .banner-box2 {
    height: 250px;

    padding: 15px;
  }


  /* NEWSLETTER */

  #newsletter .form {
    flex-direction: column;

    gap: 10px;
  }

  #newsletter input {
    width: 100%;

    border-radius: 5px;
  }

  #newsletter button.normal {
    width: 100%;

    height: 45px;

    border-radius: 5px;
  }


  /* CART */

  #cart table {
    min-width: 600px;
  }


  /* COUPON */

  #coupon input {
    width: 100%;

    margin: 0 0 10px 0;
  }

  #coupon button {
    width: 100%;
  }


  /* CONTACT */

  #contact-details .details h2,
  #form-details form h2 {
    font-size: 20px;
  }

  #contact-details .map {
    height: 250px;
  }


  /* CHECKOUT */

  #checkout {
    width: calc(100% - 20px);

    padding: 20px 12px;
  }


  /* BADGE */

  .badge {
    right: -35px;

    font-size: 8px;
  }

}