/* mobiles */
.mobiles {
  width: 100%;
  display: flex;
  background-color: white;
  flex-direction: row;
  padding: 15px 20px;
}
.main-mobile{
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 1285px;
  padding-inline-start: 14px;
  padding-bottom: 14px;
}
.main-mobile hr{
  color: #ddd;
}
.main-mobile1{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 16px;
}
.main-mobile1 .image-lap{
  width: 1270px;
  height: 188px;
  padding-top: 16px;
}
.main-mobile1 h2{
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 5px;
}
.main-mobilee{
  background-color: #eee;
  height: 480px;
  margin-top: 43px;
  padding: 10px 0;
}
.main-mobilee h2{
  font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: right;
}
.main-mobileee{
  background-color: white;
    margin: 0 20px 5px;
    padding: 15px;
}
.main-mobile2{
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(6, 192px);
  gap: 3px;
}
.main-mobile2 img{
  width: 100%; /* تجعل الصورة متجاوبة مع عرض العمود */
    display: block;
    transition: 0.3s;
    cursor: pointer;
}
.mobile-slider{
  display: flex;
  align-items: center;
  margin: 10px 11px;
}
.mobile-slider-container {
    position: relative;
    width: 100%;
    background: white;
    width: 100%;
    padding: 0 25px 10px 25px;
    margin: 15px 0;
}
.mobile-slider-container h2{
  font-weight: bold;
  font-size: 23px;
  font-family: 'Segoe UI';
  margin-bottom: 5px;
}
.mobile-card{
  padding: 5px 0;
  background: white;
}
.mobile-card img{
  height: 283px;
  width: 240px;
}
.mobile-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.mobile-wrapper::-webkit-scrollbar {
    height: 6px;
}
.mobile-wrapper::-webkit-scrollbar-thumb {
    background: #b8b8b8;
    border-radius: 10px;
}
.mobile-slider-container  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    background:white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 20px 20px;
    z-index: 999;
    pointer-events: auto;
}
.mobile-slider-container  button i{
  position: relative;
  font-size: 25px;
  top: -15px;
  color: #8c8b8b;
}
.mobile-slider-container  .prev-bt {
    inset-inline-end: 15px;
}
.mobile-slider-container  .next-bt {
    inset-inline-start: 15px;
}
.mobile-slider2 {
  /* direction: rtl; */ 
  position: relative; 
}
.section-title { 
  font-size: 30px; 
  font-weight: bold; 
  margin-bottom: 20px; 
  text-align: left;
}
.slider-container { 
  padding-inline-start: 25px;
  position: relative; 
  inset-inline-start: 40px;
  display: flex; 
  align-items: center; 
  width: 1200px;
}
.slider2-wrapper {
    width: 1150px;
    display: flex;
    gap: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
    height: 410px;
}
.scroll-btn {
  align-items: center;
  text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 40px;
    background: white;
    border: 1px solid #888;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.prev { inset-inline-end: -23px; }
.next { inset-inline-start: -30px; }
.slider-container .scroll-btn i{
  font-size: 15px;
  color: #565959;
}
.slider2-card {
  text-align: center;
  width: 170px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: 0.3s;
  height: 410px;
  cursor: pointer;
}
.img-box img {
  margin: 0 5px;
  width: 150px;
  height: 100%;
}
.info {
  align-items: center;
  text-align: center;
  padding: 10px 0;
}
.brand {
  color: #555;
  font-size: 14px;
}
.p-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f1111;
  margin: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rating-mob {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}
.ratingmob-stars {
  display: flex;
  gap: 2px;
}
.ratingmob-stars .fa-star {
  color: #f90 !important;
  position: static !important;
}
.price-mob {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.price-mob sup {
  font-size: 12px;
}
.discount {
  color: green;
  font-size: 13px;
}
.offer {
  color: #232f3e;
  font-size: 13px;
  margin-top: 5px;
}
.colors {
  margin-top: 8px;
}
.dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 5px;
  cursor: pointer;
}
.image-mobile{
  width: 1275px;
  margin-bottom: 15px;
}
.container2-mob{
  flex-wrap: nowrap;
  margin: 30px 0;
  width: 1250px;
}
.container2-mob .mobile-wrapper {
  width: 1250px;
  padding: 20px;
}
.container1-mob img{
  width: 314px;
}
.container2-mob img{
  width: 204px;
}
.container1-mob h2,
.container2-mob h2{
  font-size: 27px;
  margin-top: 20px;
  font-weight: bold;
}
.apple-mob img{
  width: 1270px;
}
.cards-apple {
  display: flex;
  justify-content:center;
  gap: 300px;
}
.apple-mob .slider3-card {
  width: 160px; 
  height: 430px;
  margin-top: 30px;
  border: 1px solid #eaeded;
  border-radius: 4px;
  overflow: hidden; 
}
.slider3-card .img-box {
    width: 100%;
    height: 210px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff; /* خلفية بيضاء عشان لو الصورة مقصوصة */
    overflow: hidden;
}
.slider3-card .img-box img {
    max-width: 100%;
    height: 100% !important; 
    width: auto; 
    height: auto;
    object-fit: cover; /* يمنع التمطيط تماماً */
}
.title-mob {
  width: 1250px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 20px;
}
.title-mob p{
  padding: 12px 35px;
}
.title-mob a{
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  color: black;
}
.title-mob span{
  color:rgb(208, 110, 19) ;
  font-weight: bold;
  font-size: 16px;
}
.card-mob{
  display: grid;
  grid-template-columns: repeat(3,1fr);
}
.card-mob .card{
  border: 1px solid #f2f0f0;
  width: 300px;
  height: 620px;
  margin-top: 30px;
  border-radius: 8px;
}
.card .img-card{
  width: 100%;
    height: 320px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
}
.img-card img{
  max-width: 75%;
    height: 320px;
    width: auto;
    height: auto;
    object-fit: cover;
}
.img-card .small{
  width: 50%;
}
.card .info-card{
  padding: 10px;
}
.card .p-name{
  font-size: 17px;
  white-space: normal;
}
.card .price{
  font-size: 20px;
  font-weight: bold;
}
.card .date{
  font-size: 15px;
}
.card .date span{
  font-weight: bold;
}
.res-card{
  margin: 30px 0;
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  background-color: #c1d6f930;
}
.res-card a {
  text-decoration: none;
  color: rgba(19, 71, 116, 0.907);
  font-weight: bold;
  font-size: 18px;
}
.image-phone{
  display: none;
}
.header-for-phone{
  display: none;
}
.footer-mobile, .img-phone{
  display: none;
}
.mobile-slider2 .img-phone{
  display:none;
}
.apple-mob .img-phone{
  display:none;
}
.apple-mob .show{
  display: none;
}



@media (max-width: 768px) {
  .header-for-phone, .footer-mobile{
    display: block;
  }
  .image-phone, .img-phone{
    display: block;
    width: 100%;
  }
  .image-lap, .image-mobile{
    display: none;
  }
  .main-mobile{
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .main-mobile1 h2{
    font-size: 24px;
  }
  .main-mobileee h2{
    font-size: 24px;
  }
  .main-mobile2{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .main-mobile2 img{
    width: 100%;
    height: 110px;
  }
  .main-mobilee{
    background-color: #eee;
    height: auto;
    margin-top: 0;
    padding: 0;
    border-bottom: 2px solid #ddd;
  }
  .main-mobileee{
    background-color: white;
    margin: 0;
    padding: 15px;
  }
  .mobile-slider button {
    display: none;
  }
  .mobile-slider .mobile-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
  }
  .mobile-slider .mobile-wrapper::-webkit-scrollbar {
    display: none;
  }
  .mobile-slider .mobile-wrapper img{
    width:140px ;
    height:165px;
  }
  .main-mobile{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 14px;
  }
  .mobiles {
    width: 100%;
    display: flex;
    background-color: white;
    flex-direction: row;
    padding: 15px 10px;
    margin: 0;
  }
  .mobile-slider-container {
    width: 100%;
    background: white;
    width: 100%;
    padding: 0 ;
    margin: 15px 0;
  }
  .mobile-slider2{
    padding: 0;
    margin: 0;
    border-top: 1px solid #ddd ;
  }
  .mobile-slider2 .section-title{
    font-size: 20px;
  }
  .mobile-slider2 button{
    display: none;
  }
  .mobile-slider2 .img-phone{
    margin: 25px 0;
  }
  .slider2-wrapper {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    height: 410px;
  }
  .slider2-wrapper::-webkit-scrollbar {
    display: none;
  }
  .slider-container { 
    padding-inline-start: 0;
    width: 350px ;
  }
  .container1-mob h2{
    font-size: 24px ;
  }
  .container1-mob div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .container1-mob div img{
    width: 100%;
  }
  .container2-mob h2{
    font-size: 24px ;
  }
  .container2-mob div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .container2-mob div img{
    width: 100%;
  }
  .container2-mob{
    flex-wrap: nowrap;
    margin: 30px 0;
    width: 100%;
  }
  .apple-mob .img-phone{
    margin: 25px 0;
    display: block;
    width: 100%;
  }
  .apple-mob img{
    display:none;
  }
  .apple-mob .cards-apple{
    display: none !important;
  }
  .apple-mob .show{
    display: block ;
  }
  .title-mob {
    width: 390px;
  }
  .card-mob{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .card-mob .card{
    width: 100%;
    display: flex;
    height: auto ;
  }
  .card-mob .card .img-card{
    width: 100% ;
  }
  .card-mob .card .info-card{
    width: 360px ;
  }
  .card-mob .card .info-card .p-name{
    font-size: 15px ;
  }


  


}