@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
   direction: ltr;
    font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
.o{
    text-decoration: none;
}
.o :hover{

    color: white;
}


.dd{
  font-size: 12px;


}

.btn-btn-danger p{

  text-align: center;
  transform: translateY(5px);
  position: relative;
  left: 15px;
}

.btn-btn-danger {

background-color: rgb(183, 169, 169);
border:2px  solid rgb(103, 109, 99);
text-decoration: none;
display: flex;
border-radius: 10px;
width: 175px;
height: 35px;

transform: translateX(-710px);

}
 .dd{
 
  color: rgb(39, 37, 37);
align-items: center;
}
    
    .dd:hover{
    
    color: rgb(44, 90, 117);
    }

.slider-number{
    position: relative;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100px;
    transition: transfrom 0.1s;
}
.ca{
    background-color: #171719;
    width: auto;
    box-shadow: 0 5px 25px rgba(24, 27, 24, 0.2);
    border-radius: 40px;
    border-color: #f3eaea;
    padding: 10px;
    margin: 10px; ;
    transition: 0.7s ease;
    direction: rtl;
  

}
.ca-flex{display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}

.ca-flex img {
    max-width: 300px;
    height: auto;
    border-radius: 10px;
  }
  
  .ca-flex p {
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .phone a{
    display: flex;
    text-align: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
 padding: 1px 2px;
}

.phone{
    border: 2px solid;
    background-color: rgba(2, 17, 25, 0.862);
  color: white;
  border-radius: 100px;
  box-sizing: border-box;
  box-shadow: inset;
  align-self: start;
  
width: 130px;
height: 40px;


  
  
}
.en{
    color: rgb(246, 238, 238);
    direction: rtl;
    text-align: right;
    
    
}
.enetr{
    text-align: right;
   direction: rtl;
   color: rgb(250, 241, 241);
   display: flex;
    flex-direction:row; 
    align-items: center;
  

}
.cc{
    display: flex;
    flex-direction: row-reverse; 
    align-items: center;
}
.po{
    width: 400px;
    height: auto;
    margin-right: 15PX;
    
  
}

.poo{
    width: 400px;
    height: auto;
    margin-left: 15px;
}
header {
      background-color: rgba(2, 17, 25, 0.862);

position: fixed;
z-index: 999;
display: flex;
justify-content: space-between;
padding: 10px 20px;


}



.logo{
    text-decoration: none;
color:white;
font-size: larger;
 font-weight: 90px;
align-self: flex-end;

height: 1px;
position: relative ;
top: 40px;

}


section{
padding: 10px 30px;
}
.logo-image{
    width: 170px;
    display: flex;
height: 70px;
   padding: 10px;
align-self: flex-end;
position: relative ;
top: -20px;
    
}
header {
    background-color: rgba(2, 17, 25, 0.862);
width: 100%;
position: fixed;
z-index: 999;
display: flex;
justify-content: space-between;
padding: 15px 200px;


}


.info h3{

  font-family: 'cairo' ,sans-serif;
}
.info p{

   font-family: 'tajawal' ,sans-serif;
}



.main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
   background: url(./ima/InShot_20250707_003020685.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    text-align: right;
    direction: rtl;
  
}
.main h2 {
    color: #f3eaea;
    font-size: 1.4em;
    font-weight: 500;
}
.maim h2 span{
    display: inline-block;
    margin-top: 10px;
    color: #4e9eff;
    font-size: 3em;
    font-weight: 600;

}
.main h3 {
    color: #7f98fb;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 30px;   
}
.main-btn{
    color: mintcream;
    background-color: #4e9eff;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    display: inline-block;
    padding: 0.9375em 2.1875em;
    letter-spacing: 1px;
    border-radius: 40px;
    transition: 0.7s ease;
}
.main-btn:hover{
    background-color: rgb(78, 75, 169);
    transform: scale(1.1);
}

.social-icons a:hover{

  color: #328efe;
}
.social-icons a{
   color:rgb(255, 255, 255);
    font-size: 1.3em;
    padding-right: 20px;
}
.title {
    display: flex;
    justify-content: center;
    color: #e9eaf0df;
    font-style:inherit;
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
   
   

}
.titlee h2{
    color: rgb(49, 41, 43);
    display: flex;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
    font-style: normal;
}
.content {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    text-align: right;

}

.card{

  direction: rtl;
}

.card:hover{

     transform: scale(1.1);
}
.cardd:hover{

     transform: scale(1.1);
}
.cardd {
    
   background-color: #dfddee;
    width: 15.25em;
     transition: 0.7s ease;
    border-radius: 10px;
    padding: 10px;
    margin: 10px; 
 
    direction: rtl;
      border: none;

 
}
    .button-demo {
      margin-top: 20px;
      padding: 10px;
      background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
      color: white;
      border: none;
      border-radius: 8px;
      text-align: center;
      justify-content: center;
      font-weight: bold;
      cursor: pointer;
    }
.card {
    background-color: #dfddee;
    width: 12.25em;
    background-color: transparent; /* ← أو أي لون تريد */
border: 1px so;
   transition: 0.7s ease;
   border-radius: 100px;
    padding: 10px;
    margin: 10px; ;
    box-shadow: white;
    direction: rtl;
    text-align: right;
     box-shadow:0 4px 12px rgb(78, 90, 93);
}

.icon{
    color: #4e9eff;
    font-size: 8em;
    text-align: center;
}
.info{text-align: center;

}

.info h3{
    color: #4e9eff;
    font-size: 1.2em;
    font-weight: 700;
    margin: 10px;
}
.products{
    background-color: #e6e6ed;

}
.products-card{
    background-color: #dfddee;
    border: 2px solid #dfddee;
    min-height: 14em;
    width: 25em;
    overflow: hidden;
    border-radius: 10px;
    margin: 20px;
    transition: 0.7s ease;
}
.products-card:hover{
    transform: scale(1.1);
}
.products-card:hover .products-image {
    opacity: 0.9;
}
.products-image img {
    width: 100%
}
.products-info {
    padding:1em ;
}
.products-category{
    font-size: 0.8em;
    color: #181212;
}
.products-title {
    display: flex;
  

    
   
}

.more-details {
    text-decoration: none;
    color: #328efe;
    font: weight 800px; ;
}

.more-details:hover{
color: rgb(140, 35, 193);


}
.contact .icon{
    font-size: 4.5em;
}
.contact .info h3{
    color: #181212;
}
.contact .info p{
    font-size: 1em;
}
.footer {
    background-color: #000016;
    color: #dfddee;
    padding: 2em;
    display: flex;
    justify-content: space-between;

}
.footer-title{
    font-size: 1.3em;
    font-weight: 500;

}
.footer-title span{
    color: whitesmoke;
}
.footer .social-icons a{
    font-size: 1.3em;
padding: 0 12px;
}


.gallery {
    width: 300px;
    display: flex;
    overflow-x: hidden; /* اخفاء التمرير */
    scroll-behavior: smooth;
  }

  .gallery .slide-group {
    display: flex;
  }

  .gallery img {
    width: 300px;
    flex-shrink: 0;
    transition: transform 0.3s, filter 0.3s;
  }

  .gallery::-webkit-scrollbar {
      display: none;
  }

  .gallery img:hover {
    filter: grayscale(0);
    transform: scale(1.03);
    cursor: pointer;
  }

  .gallery-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
  }

.dropdown-item{

 font-family: 'tajawal' ,sans-serif;
}




.btn.btn-outline-light{
  width: 50px;
height: 40px;
border-radius: 30%;
border: none;
    transform: translateX(-1320px);
    background-color: #555;
    
}


.accordion-container {
  width: 90%;
  max-width: 800px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  direction: rtl; /* مهم لدعم العربية */

    max-height: 1000px !important;
  overflow: visible;
  padding: 20px;
  background-color: lightyellow;
}

.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  background-color: #fff;
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s ease;
  flex-direction: row-reverse; /* يعكس ترتيب السهم والنص */
  text-align: right;
}

.accordion-header:hover {
  background-color: #f0f0f0;
}

.accordion-header.active {
  background-color: #e0e0e0;
  color: #000;
}

 .line{
      text-decoration: none;
    }
.arrow-icon {
  font-size: 0.3em;
  transition: transform 0.3s ease;
  margin-left: 10px; /* مسافة بين السهم والنص */
}

.accordion-header.active .arrow-icon {
  transform: rotate(180deg);
}

    .accordion-header {
        justify-content: space-between; /* Ensures arrow stays on the left visually */
      }
      

.accordion-content {
  padding: 0 20px;
  background-color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  text-align: right;
}

.accordion-content.show {
  max-height: 500px;
  padding: 15px 20px;
  display: block;
}

.accordion-content p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: #555;
}

     


@media (max-width: 767px) {
  header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

  .logo-image {
    transform: none;
    padding: 0;
    width: 90px;
    height: auto;

    transform: translateX(310px);
  }


   .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
    transform: translateX(-320px);

}
  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
    transform: translateX(220px);
    position: relative;
    top: 20px;
  }

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

  .btn-btn-danger {
 


    transform: translateX(-100px);
  }
  .dd{
 font-size: 12px;
  }

 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.4rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

   .main-btn{
font-size: 0.6em;
  width: 150px;
  height: auto;
 }
  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
    .under{overflow-x: hidden;}


}



/* 📱 الهواتف الصغيرة جدًا – أقل من 576px */
@media (max-width: 575.98px) {


    header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }
 .logo-image {
    transform: none;
    padding: 0;
    width: 90px;
    height: auto;

    transform: translateX(280px);
    position: relative;
    top: -5px;
  }

  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
    transform: translateX(190px);
    position: relative;
    top: 25px;
  }
  .btn-btn-danger {
 
      position: relative;
  top: 7px;
width: 130px;
height: 25px;
    transform: translateX(-120px);
        position: relative;
    top: 7px;
  }

  .dd{

    font-size: 12px;
  }
 .btn.btn-outline-light{

        transform: translateX(-320px);
        width: 50px;
        height: 40px;

 }

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

 
 
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.8rem;
    height: auto;
  }

    .cardd{
  
       display: flex;
   width: 100% !important;
 padding: 10px;
    margin: 10px; ;

  }


  .card, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

   .main-btn{
font-size: 0.6em;
  width: 150px;
  height: auto;
 }

  .counter-box {
    width: 100px;
  }


   .under{overflow-x: hidden;}




  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
  /* التعديلات الخاصة بالموبايلات الصغيرة جداً */
}

/* 📱 الهواتف المتوسطة – من 576px إلى 767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* التعديلات الخاصة بالموبايلات العادية */

    header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

  .logo-image {
    transform: none;
    padding: 0;
    width: 90px;
    height: auto;

    transform: translateX(310px);
  }

  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
    transform: translateX(220px);
    position: relative;
    top: 20px;
  }

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

  .btn-btn-danger {
 


    transform: translateX(-100px);
  }
  .dd{
 font-size: 12px;
  }
   .dropdown {
  display: block;
  
  text-align: center;
}

 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.4rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }
    .under{overflow-x: hidden;}



  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
}

/* 💊 التابلت – من 768px إلى 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* التعديلات الخاصة بالأجهزة اللوحية (Tablet) */

  header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

    .btn-btn-danger {
    position: relative;
    top: 12px;
  width: 130px;
  height: 30px;
    transform: translateX(-170px);
  }

  .btn.btn-outline-light{
position: relative;
top: 10px;
        transform: translateX(-670px);
        width: 50px;
        height: 40px;

 }
  .logo-image {
    transform: none;
    padding: 0;
    width: 90px;
    height: auto;

    transform: translateX(630px);
    position: relative;
    top: -5px;
  }


  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
    transform: translateX(430px);
    position: relative;
    top: 25px;
  }

   .main-btn{
font-size: 0.6em;
  width: 150px;
  height: auto;
 }
 

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

  .btn-btn-danger {
 


    transform: translateX(-370px);
  }
  .dd{
 font-size: 12px;
  }
  .dropdown {
   
  }
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
   .under{overflow-x: hidden;}


  .main h2, .main h4 {
    font-size: 0.8rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
  }



   
      @media (min-width :1000px) and (max-width: 1199px) {

 body{
     overflow-x: hidden;
 }
  
.slider-container{
 
      overflow-x: hidden;

}


  header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

   .logo-image {
    transform: none;
    padding: 0;
    width: 130px;
    height: auto;

    position: relative;
    top: -5px;
    transform: translateX(810px);
  }

    .logo{
      transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    font-weight: 900;
   font-size: 1.0em;
    transform: translateX(525px);
    position: relative;
    top: 30px;
        overflow-x: hidden;
  }


   .btn-btn-danger {
 font-weight: 400;
  position: relative;
  top: 19px;

    transform: translateX(-460px);
  }

    .btn.btn-outline-light{
    position: relative;
  top: 6px;
    position: relative;
    right: 0;
    margin-top: 10px;
    transform: translateX(-850px);
  }
   .main-btn{
font-size: 1.1em;
  width: 220px;
  height: auto;
 }
 

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .products-card{

        width: 40%;
      }

      .btn-container {
        text-align: center;
      }
.btn-btn-danger p{

  font-weight: 700;
  font-size: 0.9em;
}

  .dd{
 font-size: 12px;
  }
 
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 1.9rem;
    height: auto;
  }

  .card, .card, .products-card {
    width: 300px !important;
    margin: 10px 0;
   
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

    .info h3{
    font-size: 1.3=4em;
  }
  .info p{
    font-size: 1.1em;
    font-weight: 600;
  }
  .counter-box {
    width: 100px;
  }
  .content{
     gap: 30px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
    .under{overflow-x: hidden;}


  }



/* 🖥️ الشاشات الكبيرة – من 1200px فما فوق */
@media (min-width: 1440px) {

   .under{overflow-x: hidden;}


  
.slider-container{
 
      overflow-x: hidden;

}


  header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

  .logo-image {
    transform: none;
    padding: 0;
    width: 150px;
    height: auto;

    transform: translateX(1200px);
       top: -10px;
  }

 
  .logo{
      transform: none;
    padding: 0;
    width: 200px;
    height: auto;
    font-weight: 900;
   font-size: 1.1rem;
    transform: translateX(787px);
    position: relative;
    top: 29px;
  }

  .btn-btn-danger{

    transform: translateX(-825px);
    position: relative;
    top: 24px;
  }
   .btn.btn-outline-light{
     transform: translateX(-1310px);
        width: 50px;
        height: 40px;
        position: relative;
        top: 22px;


 }
  


      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .products-card{

        width: 40%;
      }

      .btn-container {
        text-align: center;
      }
.btn-btn-danger p{

  font-weight: 400;
  font-size: 0.9em;
}
 
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 1.9rem;
    height: auto;
  }

    .info h3{
    font-size: 1.6em;
  }
  .info p{
    font-size: 1.3em;
    font-weight: 600;
  }

  .card, .card, .products-card {
    width: 380px !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

   .content{

   gap: 30px;
        display: flex;
    justify-content: center;
  
     flex-wrap: wrap;

    }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
  }


/* 📱 الهواتف الصغيرة جدًا – 320px إلى 359px */
@media (max-width: 359.98px) {

    header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

  .logo-image {
    transform: none;
    padding: 0;
    width: 90px;
    height: auto;
position: relative;
top: -5px;
    transform: translateX(310px);
  }

    .cardd{
  
       display: flex;
   width: 100% !important;
 padding: 10px;
    margin: 10px; ;

  }

  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
    transform: translateX(220px);
    position: relative;
    top: 40px;
  }

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

  .btn-btn-danger {
 


    transform: translateX(-100px);
  }
    .under{overflow-x: hidden;}


  .dd{
 font-size: 12px;
  }
 .dropdown {
    position: relative;
    left: 60px;

  

    top: -5px;
  }
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.4rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
  /* تنسيق خاص لأصغر الأجهزة */
}

/* 📱 شاشات 360px مثل بعض هواتف Android */
@media (max-width: 399.98px) and (min-width: 360px) {


    header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }

 .logo-image {
    transform: none;
    padding: 0;
    width: 80px;
    height: auto;
position: relative;
top: -6.50px;
    transform: translateX(260px);
  }

   
  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.6rem;
    transform: translateX(183px);
    position: relative;
    top: 23px;
  }

    .btn.btn-outline-light{

          position: relative;
    right: 0;
    margin-top: 10px;
    transform: translateX(-260px);
    position: relative;
    top: -5px;

 }
     

 .btn-btn-danger {
   width: 130px;
  height: 25px;
    transform: translateX(-90px);
    top: 15px;
    position: relative;
  }

     .btn-btn-danger p{  
            font-size: 0.6rem;
}

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

    .cardd{
  
   display: flex;
   width: 100% !important;
 padding: 10px;
    margin: 10px; ;

  }

   
 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.7rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
    .under{overflow-x: hidden;}


  /* تنسيق خاص لهواتف 360px */
}

@media (max-width: 320px) {

    header {
    flex-direction: column;
    padding: 15px 20px;
    align-items: center;
    text-align: center;
  }
    .under{overflow-x: hidden;}



  .logo-image {
    transform: none;
    padding: 0;
    width: 60px;
    height: auto;

    transform: translateX(220px);
  }

  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.5rem;
    transform: translateX(160px);
    position: relative;
    top: 25px;
  }

      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

      .btn-container {
        text-align: center;
      }

     

    .btn-btn-danger {
  width: 120px;
  height: 20px;
    transform: translateX(-100px);
  }


   .btn.btn-outline-light{

        transform: translateX(-240px);
        width: 45px;
        height: 30px;

 }
  .dd{

   position: relative;
    right: 2000px;
 font-size: 7px;
 
 
  }

 .main h2{
 position: relative;
 top: -50px;

 }

 .main h4{
 position: relative;
 top: -50px;

 }
  .main h2, .main h4 {
    font-size: 0.9rem;
    height: auto;
  }

  .card, .cardd, .products-card {
    width: 100% !important;
    margin: 10px 0;
  }

  .products {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    flex-direction: column;
    text-align: center;
  }

  .ask input,
  .ask textarea,
  .ask button {
    width: 90%;
    max-width: 300px;
  }

  .asks h1, .asks h4 {
    transform: none;
    position: relative;
    top: 0;
    text-align: center;
  }

  .counter-box {
    width: 100px;
  }
 .main-btn{
font-size: 0.6em;
  width: 150px;
  height: auto;
 }
  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
  /* تنسيق خاص لهواتف 360px */
}