@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');


body{
    overflow-x: hidden;

}

*{

margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

.slider-number{
    position: relative;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100px;
    transition: transfrom 0.1s;
  }

 




 .phone a:hover{
    color: white;
}
.phone a{
    display: flex;
    text-align: center;
   
    letter-spacing:1px ;
    font-family: Arial, Helvetica, sans-serif;
     text-decoration: none;
     
 
}

.phone{
    border:  solid;
    background-color: rgba(2, 17, 25, 0.862);
  color: white;
  border-radius: 90px;
 width: 130px;

  display: inline-block; 
    transition: 0.7s ease;
    padding: 0.9375em 2.1875em;
    text-decoration: none;
    font-size: 8px;
    letter-spacing:1px ;
    font-weight: 700;
    margin-bottom: 30px;  
    font-weight:100; 
    
  



  
  
}
.phone:hover{
    color: darkviolet;
}
header {
    background-color: rgba(2, 17, 25, 0.862);
width: 100%;
z-index: 1000;


justify-content: space-between;
padding: 10px 20px;
position: fixed;
   display: flex;
    align-items: center;
    justify-content: space-between; /* أو flex-start / flex-end */
    padding: 10px 20px;


}


.logo{
    text-decoration: none;
color:white;
font-size: larger;
 font-weight: 900;


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

}



.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;

display: flex;


}

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

.dd:hover{

color: rgb(44, 90, 117);
}
section{
padding: 10px 30px;
}
.logo-image{
    width: 170px;
    display: flex;
height: 70px;
   padding: 10px;


    position: relative ;
top: -20px;
    
}





.main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
   background: url(./image/Picsart_25-07-17_00-35-00-557.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    direction: rtl;
    text-align: right;

  
}
.main h2 {
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 400;
    height: 130px;
  font-family: 'tajawal' ,sans-serif;
}

.main h4 {
    color: #9cd4e3;
    font-size: 1.4em;
    font-weight: 400;
    height: 130px;
  font-family: 'cairo' ,sans-serif;
  position: relative;
  top: 90px;

}
.maim h2 span{
    display: inline-block;
    margin-top: 10px;
    color: #4e9eff;
    font-size: 3em;
    font-weight: 600;
      font-family: 'tajawal' ,sans-serif;
   

}


.info h3{

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

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



.main h1 {

     font-family: 'tajawal' ,sans-serif;
  position: relative;
  top: -100px;
  right: 10px;
    color: #ffffff;
text-decoration: none;
    font-size: 2.3em;
    font-weight: 900;
  
    margin-bottom: 30px;   
  
    padding: 0.9375em 2.1875em;
    border-radius:40px ;

}

.main h3{

      color: #ffffff;
    font-size: 1.4em;
    font-weight: 500;
    height: 50px;
  font-family: 'cairo' ,sans-serif;
  position: relative;

}

.main-btnn{

    color: mintcream;
  
          font-family: 'cairo' ,sans-serif;
    background-color: rgb(54, 174, 130);
    text-decoration: none;
       font-size: 0.760em;
text-align: right;
direction: rtl;

    font-weight: 600;
    display: inline-block;
    padding: 0.9375em 2.4875em;
    letter-spacing: 2px;
    border-radius: 20px;
    transition: 0.7s ease;
    width: 200px;
    
}

.main-btn{
    color: mintcream;
  
          font-family: 'cairo' ,sans-serif;
    background-color: rgb(74, 71, 163);
    text-decoration: none;
    font-size: 0.7em;
    font-weight: 600;
 width: 150px;
    display: inline-block;
    padding: 0.9375em 2.1875em;
    letter-spacing: 1px;
    border-radius: 40px;
    transition: 0.7s ease;
    
    
}


.main-btnn:hover{
    color: rgb(30, 30, 33);
    transform: scale(1.1);
}


.main-btn:hover{
    color: rgb(166, 165, 206);
    transform: scale(1.1);
}

.social-icons{
  transform: translateX(15px);
}
.social-icons a:hover{

  color: #328efe;
}
.social-icons a{
    color:rgb(255, 255, 255);
    font-size: 1.3em;
    padding-right: 30px;
    
}
.title {
    display: flex;
    justify-content: center;
    color: #e9eaf0df;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;

}
.titlee h2{
    color: rgb(49, 41, 43);
    display: flex;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 30px;
}
.content {
    display: flex;
    justify-content: center;
  
     
    
    
}
 .card:hover{

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

     transform: scale(1.1);
}
.cardd {
    
 
   background-color: #dfddee;
    width: 15.25em;
 
    

    border-radius: 10px;
    padding: 10px;
    margin: 10px; ;
  transition: 0.7s ease;
    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: 15.25em;
     transition: 0.7s ease;
     box-shadow:0 4px 12px rgb(78, 90, 93);
   
    border-radius: 20px;
    padding: 5px;
    margin: 10px; ;


    direction: rtl;
    

  border: 1px ;        /* ← يمنع أي حدود حتى لو جاءت من مكان آخر */

}


.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;
}
.ca{
font-family: 'cairo' ,sans-serif;
color: black;
font-size: 14px;
  
}
.products {
  padding: 50px 20px;
   background-color: #020220;
  direction: rtl;
 
  
  display: flex;
    justify-content: center;
    flex-direction: row;
    
}

.products .products-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: 0.7s ease;
  width: 400px;
  margin: 10px;
  height: 500px;
  overflow: hidden;
  z-index: 1;
  
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}


.products-card.expanded {
  transform: scale(1.1);
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.products .products-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    display: flex;
}

.products .products-image img {
  width: 100%;
  height: auto;
  
    display: flex;
}
 .products-info p{
  text-align: right;

  font-family: 'tajawal' ,sans-serif;
}
.products .products-info {
  padding: 18px;
  text-align: right;
    display: flex;
   

}
 .products-title h1{
  font-weight: 900;
font-size: 15px;
 font-family: 'cairo' ,sans-serif;
text-align: center;
 }

 .products .products-title  {

text-align: center;
  margin-top: 10px;
    display: flex;
}

.products .more-details {
  display: inline-block;
  margin-top: 10px;
  color: #1a73e8;
  text-decoration: none;
    display: flex;
}

.products .more-details:hover {
  text-decoration: underline;
}



.contact .icon{
    font-size: 4.5em;
    
}
.contact .info h3{
    color: #181212;

}
.contact .info p{
    font-size: 1em;
    
    

}


.footee h1{
 font-family: 'tajawal' ,sans-serif;
 text-align: center;
 margin: 0 auto;

}

.footee{

  border-radius: 20px;

  margin: 0 auto;

text-align: center;

  width: 50%;
   background-color: #020220;
    color: #dfddee;
    padding: 25px;
    display: flex;
    justify-content: space-between;

}
.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;

}
.products-image {
  height: 250px; /* نصف ارتفاع الكرت تقريبا */
  overflow: hidden;
  border-radius: 8px 8px 0 0; /* حواف مدورة فوق */
}

.products .products-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* تغطية كاملة متناسقة */
  display: block;
}
.products-card.fullscreen {
 
  position: fixed;
  top: 200px;
right: 200px;
  
  background: white;
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  animation: zoomIn 0.3s ease;
  align-items: center;
}

.products-card.fullscreen .fullscreen-close {
  display: block;
}

.fullscreen-close {
  display: none;
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ff4444;
  color: white;
  border: none;
  padding: 8px 14px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10000;
}

@keyframes zoomIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



    
    
    .slider-container {
   
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
        margin: 0;
      }
  
      .gallery {
        display: flex;
        animation: scroll 35s linear infinite;
      }
  
      .gallery img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin-right: 30px;
        border-radius: 10px;
      }
  
      @keyframes scroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      .asks p{
 font-size: 12px;
        font-family: 'tajawal' ,sans-serif;
      }

      .asks h4{
 font-size: 40px;
        position: relative;
        top: -60px;
        transform: translateX(-240px);
         font-family: 'cairo' ,sans-serif;

      }
    
      .asks h1{
        
        position: relative;
transform: translateX(150px);
 font-family: 'cairo' ,sans-serif;

      }
      .asks{

        direction: rtl;

        text-align: center;
      }
      .ask{
        text-align: center;
       align-items: center;
       align-content: center;
    
        background: url(./image/Picsart_25-07-09_20-28-51-359.png) no-repeat;
        background-size: cover;
        
        background-position: center;
        
      }
      .input{
        text-align: center;
      
align-items: center;
      }
      .go{
        width: 140px;
      }
 

      .textt{

        width: 200px;
        height: 100px;
        text-align: center;
      }

      .ee{

        background-color: white;
      }
      


      .accordion-container {
        width: 90%; /* Adjust as needed */
        max-width: 800px; /* Max width for better readability */
        margin: 20px auto; /* Center the accordion */
        border: 1px solid #ddd; /* Light border around the container */
        border-radius: 8px; /* Rounded corners for the container */
        overflow: hidden; /* Important for border-radius on inner elements */
        background-color: #f9f9f9; /* Light background */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
        
      }
      
      .accordion-item {
        border-bottom: 1px solid #eee; /* Separator between items */
      }
      
      .accordion-item:last-child {
        border-bottom: none; /* No border for the last item */
      }
      
      .accordion-header {
        background-color: #fff; /* White background for header */
        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;
        
         /* Smooth hover effect */
      }
      
      .accordion-header:hover {
        background-color: #f0f0f0; /* Slightly darker on hover */
      }
      
      .accordion-header.active {
        background-color: #e0e0e0; /* Background when active */
        color: #000; /* Darker text when active */
      }
      
      .arrow-icon {
        font-size: 1em;
        transition: transform 0.3s ease; /* Smooth rotation */
      }
      
      .accordion-header.active .arrow-icon {
        transform: rotate(180deg); /* Rotate arrow when active */
      }
      
      .accordion-content {
        padding: 0 20px;
        background-color: #fff;
        max-height: 0; /* Initially hidden */
        overflow: hidden; /* Hide overflow content */
        transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Smooth transition */
      }
      
      .accordion-content.show {
        max-height: 500px; /* A large enough value to show content. Adjust if your content is very long. */
        padding: 15px 20px; /* Restore padding when shown */
      }
      
      .accordion-content p {
        margin: 0 0 10px 0; /* Adjust paragraph margins */
        line-height: 1.6;
        color: #555;
      }

      
      
      .accordion-header {
        justify-content: space-between; /* Ensures arrow stays on the left visually */
      }
      
      .accordion-content {
        text-align: right; /* Ensures content aligns to the right */
      }
      .btn.btn-outline-light{
border: none;
        width: 50px;
height: 40px;
border-radius: 30%;
      }
      .dropdown{
        position: relative;
        right: 1200px;

 

 border-radius: 30%;
    background-color: #555;
    
      }


       .send h1{
  direction: rtl;
    font-family: 'cairo' ,sans-serif;
    font-size: 1.9em;
    position: relative;
   
    top: 35px;
    

 }

 .send p{
    font-family: 'tajawal' ,sans-serif;
     font-size: 1.3em;
      position: relative;

 }


      .al{


background: url(./moveing/Picsart_25-07-16_02-02-15-681.jpg) no-repeat;
background-position: center;
  background-size: cover;

      }
    .form-container {

   
     
   background-color: #2b2b65b5;
      padding: 40px 20px;
   border-radius: 8px;
      max-width: 800px;
margin: auto;
      direction: rtl;
     
    
      box-shadow: #007BFF;
   
    }

    .form-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }
 
  .map iframe:hover{
transform: scale(0.9);
    
  }


    .map iframe{

         width: 100%;

           border-radius: 25px;
      

  box-shadow:  rgba(0, 0, 0, 0.2);
   transition: 0.7s ease;
    }
    .map{
      position: relative;
      margin: 50px 0;
      text-align: center;
      size: cover;
      border-radius: 30px;

     width: 100%;
  

    }
    .map h2{
      margin-bottom: 20px;
      color:#333;
      direction: rtl;
        font-family: 'cairo' ,sans-serif;
    }

    .input-fil{
      flex: 1;
      display: flex;
      flex-direction: column;
     
    }
    .form-group > div {
   
      display: flex;
      flex-direction: column;
     
    }

    .form-group textarea {
      width: 100%;
    }
     .line{
      text-decoration: none;
    }

    input, textarea {

      margin-bottom: 15px;
      box-sizing: border-box;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #3b3b3b;
     
      background-color: #e9eaf1;
      color: #000;
    }

    label {
      margin-bottom: 6px;
      font-weight: bold;
      color: #fff6f6;
      font-size: 15px;
      direction: rtl;
      text-align: right;
       font-family: 'tajawal' ,sans-serif;
    }

    .full-width {
      width: 100% !important;
    }

    .btnn {
      background: linear-gradient(to left, #0d9ef5, #2a8af6);
      color: white;
      padding: 12px 25px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      width: 150px;
      direction: rtl;
    }

    .btnn-container {
      text-align: right;
      margin-top: 15px;
    }
  
    
.counter-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  text-align: center;
  direction: rtl;
  font-family: Arial;
}


.counter-box p{

   font-family: 'tajawal' ,sans-serif;
}
.counter-box {
  width: 150px;
 
}

.iicon {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.counter {
  font-size: 19px;
  font-weight: bold;
  color: #007BFF;

}
.integration-section {
  text-align: center;
  padding: 50px 20px;
  background-color: #fff;
  direction: rtl;
}



.integration-section h2 {
  font-size: 24px;
  color: #000;
  margin-bottom: 30px;
 font-family: 'cairo' ,sans-serif;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.logos img {
  width: 100;
  height:60px;
  max-width: 120px;
  object-fit: contain;
}


@media (max-width: 399.98px) and (min-width: 330px) {

    .slider-container{
 
      overflow-x: hidden;

}
  body{
    overflow-x: hidden;
  }


    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: -1px;
 left: 250px;
   
  }


  .main h1{
    font-size: 1.3em;
    position: relative;
    left: 20px;
  }
   
  .logo{
      transform: none;
    padding: 0;
    width: 100px;
    height: auto;
    font-weight: 900;
   font-size: 0.6rem;
left: 170px;
    position: relative;
    top: 33px;

  }


    .logos{
        width: 100%;
        gap: 10px;
      }
 

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

      .btn {
        width: 100%;
      }

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

     

  .btn-btn-danger {
  width: 140px;
  height: 25px;
right: 100px;
    top: 2px;
    position: relative;
  }
  
  
  .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
  right: 280px;
    position: relative;
    top: -5px;
  }
 .main h2{
 position: relative;
 top: -50px;

 }

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

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

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

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

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

  .dd{
    font-size: 10px;
  }

   .footee h1{

    font-size: 0.7em;
  }
.footee{


  width: 70%;
}

  .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;
  }

  .products-card.fullscreen{
    position: relative;
    right: 40px;
    top: 5px;
  }

  .main {
   
    
    direction: rtl;
    gap: 40px;
  }
   .content {
        display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    direction: rtl;
    text-align: right;
  };

    .cardd{

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

  }


  
}

/* الهواتف الصغيرة - 360px إلى 575px */
@media (min-width: 400px) and (max-width: 575px) {
  /* CSS للهواتف العادية والصغيرة */

  
  body{
    overflow-x: hidden;
  }


    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;
    left: 285px;
  }


  .products-card.fullscreen{
    position: relative;
    right: 30px;
    top: 5px;
  }

   

  .dd{
    font-size: 12px;
  }
  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
left: 195px;
    position: relative;
    top: 28px;
  }


    .logos{
        width: 100%;
        gap: 10px;
      }
 

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

      .btn {
        width: 100%;
      }

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


       .main h1{
    font-size: 1.3em;
    position: relative;
    left:  20px;
  }
     

  .btn-btn-danger {
  width: 140px;
  height: 30px;
right: 100px;
    top: 2px;
    position: relative;
  }
  
  
  .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
  right: 300px;
    position: relative;
    top: -5px;
  }
 .main h2{
 position: relative;
 top: -50px;

 }

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

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


  .footee h1{

    font-size: 0.9em;
  }
.footee{


  width: 80%;
}
.content{

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

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

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

  .dd{
    font-size: 12px;
  }

  .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;
  }
   .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap

  };


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



/* الشاشات الصغيرة جدًا (موبايل أقل من 576px) */

/* 📱 الهواتف الصغيرة جدًا – أقل من 576px */

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

  
  .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: 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: 30px;
  }


    .btn-btn-danger {
 
   
width: 140px;
height: 30px;
    transform: translateX(-120px);
    position: relative;
    top: 5px;
  }
   .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
    transform: translateX(-320px);
  }
      .form-group > div {
        width: 100%;
      }

      .btn {
        width: 100%;
      }

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


  .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;
  }

  .content {
    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;
  }
}

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

  
  .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: 90px;
    height: auto;
left: 600px;
    position: relative;
    top: -5px;
  }

 
  .logo{
      transform: none;
    padding: 0;
    width: 90px;
    height: auto;
    font-weight: 900;
   font-size: 0.7rem;
left: 400px;
    position: relative;
    top: 28px;
  }


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

 h4{
    position: relative;
    top: 900px;
  }

  
  .products-card.fullscreen{
    position: relative;
    right: 30px;
    top: 5px;
  }

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

      .btn {
        width: 100%;
      }

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

  .btn-btn-danger {
 
width: 130px;
height: 30px;
top: 5px;
position: relative;
right: 300px;

  }
  .dd{
 font-size: 12px;
  }
  .dropdown {
    position: relative;
   
    margin-top: 10px;
right: 630px; 
 }
 .main h2{
 position: relative;
 top: -50px;

 }


 .main h4{
 position: relative;
 top: 1px;

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

 

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

  .content {
    display: flex
;
    justify-content: center;
    flex-wrap: wrap;

  }

  .counter-container{
    gap: 10px;
  }

  .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: 992px) and (max-width: 1199px) {

 
  
.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;
   left: 830px;
  }

    .logo{
      transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    font-weight: 900;
   font-size: 1.0em;
   left: 550px;
    position: relative;
    top: 40px;
        overflow-x: hidden;
  }

    .btn-btn-danger {
 font-weight: 400;

position: relative;
top: 5px;
  right: 500px;
  }


   .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
right: 900px;
  }

   .main-btn{
font-size: 1.1em;
  width: 220px;
  height: auto;
 }


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

      .btn {
        width: 100%;
      }

      .products-card{

        width: 40%;
      }

      .asks p{

        font-size: 1.1em;
      }

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

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

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

 }

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

 }
 .content{
 gap: 20px;
        display: flex;
    justify-content: center;
  
     flex-wrap: wrap;

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

  .card, .card {
   
height: 50px;

      width: 300px;

 margin: 10px 0;

  }


  

.footee{

  width: 70%;
}
.social-icons{

transform: translateX(-25px);
  }

  
  .products {
   
    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.2em;
  }
  .info p{
    font-size: 0.9em;
    font-weight: 600;
  }
  .counter-box {
    width: 100px;
  }

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

  /* CSS للشاشات الكبيرة */
}





  @media (min-width: 1200px) and (max-width: 1439px) {

.slider-container{
 
      overflow-x: hidden;

}


.products .products-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* تغطية كاملة متناسقة */
  display: block;
}

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

  .logo-image {
    transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    top: -10px;
    left: 410px;
   margin-left: auto;
  }

   .main-btn{
font-size: 1.1em;
  width: 220px;
  height: auto;
 }
  .logo{
      transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    font-weight: 900;
   font-size: 1.1rem;
   
    position: relative;
    top: 35px;
    left: 270px;
        overflow-x: hidden;
  }
 .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
    
right: 1200px;
  
  }

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

  
      .asks p{

        font-size: 1.1em;
      }

    .btn-btn-danger {
 font-weight: 400;

position: relative;
top: 5px;
 right: 900px;
  }
   .main-btn{
font-size: 0.9em;
  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;
}
 
  .social-icons{

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

 }

 .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{

     width: 370px !important;
    margin: 10px 0;
        transition: 0.7s ease;
      

  }




  .content{

   gap: 10px;
        display: flex;
    justify-content: center;
  
    

    }
  
  .products-card {

    display: flex;
  

      width: 700px;
 
  height: 500px;
   
  }

  .products {

    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;
  }
  }

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

 
  
.slider-container{
 
      overflow-x: hidden;

}


.products .products-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* تغطية كاملة متناسقة */
  display: block;
}

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

  .logo-image {
    transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    top: -10px;
    left: 430px;
   margin-left: auto;
  }

   .main-btn{
font-size: 0.9em;
  width: 180px;
  height: auto;
 }
  .logo{
      transform: none;
    padding: 0;
    width: 150px;
    height: auto;
    font-weight: 900;
   font-size: 1.1rem;
   
    position: relative;
    top: 40px;
    left: 278px;
        overflow-x: hidden;
  }
 .dropdown {
    position: relative;
    right: 0;
    margin-top: 10px;
 right: 1300px;
  }

    .btn-btn-danger {
 font-weight: 400;
 right: 1050px;
position: relative;
top: 5px;
   
  }

  
      .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;
}
 
  .social-icons{

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

 }

 .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{

     width: 370px !important;
    margin: 10px 0;
        transition: 0.7s ease;
      

  }
  
      .asks p{

        font-size: 1.1em;
      }




  .content{

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

    }
  
  .products-card {

    display: flex;
  

      width: 700px;
 
  height: 500px;
   
  }

  .products {

    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;
  }
  }


  /* التعديلات الخاصة بالشاشات الكبيرة والديسكتوب */



/* 📱 الهواتف الصغيرة جدًا – 320px إلى 359px */


/* 📱 شاشات 360px مثل بعض هواتف Android */