@charset "utf-8";
 
header{
	align-items: center;
	justify-content: center;
	display: flex;
	margin: 0;
	height: 10vh;
width: 100%}
a{text-decoration: none;
}
.he{
	width:50%;
	justify-content: center;
	text-align:center;}





.vasatimg{
	border-radius: 10px;
	width:15%; 
	height: 300px;
	box-shadow: 0px 0px 5px 0.2px black;
	margin: 40px 45px 0px 0px}
 ul{
    list-style-type: none}

@font-face{ 
	font-family: semi;
	src: url("Yekan.ttf")}



.all-picture {
    touch-action: pan-y; /* اجازه می‌دهد صفحه فقط عمودی اسکرول شود و با سوییپ افقی تداخل نکند */
}
body{font-family: semi;}

.apartment{justify-content: center;
	text-align: center; width: auto;
	height: auto}
.apartment div{float: right}

main{ width: 100%;
height: 33vh}
/* استایل‌های مربوط به بخش Products */

.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
padding:15px;
max-width:1200px;
margin:10px auto;
font-family:semi;
}

.product{
background:#DD4103;
border-radius:10px;
box-shadow:0 1px 8px 1px #DD4103;
overflow:hidden;
text-align:center;
padding-bottom:10px;
font-family: semi;
transition:all .3s ease;
}
	



.product:hover{
background:#001216;
}

.product h3{
margin:6px 0;
font-size:1em;
color:white;
text-shadow: 1px 1px 5px #001216;
}

.image-slider{
position:relative;
width:100%;
height:260px;
overflow:hidden;
}

.image-slider img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity .4s ease;
}

.image-slider img.active{
opacity:1;
}

.buttons{
display:flex;
justify-content:center;
gap:10px;
}

.btnc{
background:#fff;
box-shadow: 1px 1px 5px #001216;
color:#001216;
border:none;
padding:3px 12px;
border-radius:5px;
cursor:pointer;
}

.btnc:hover{
background:#DD4103;
color:white;
}

.mobile-products{
display:none;
}

 
.all-picture {
  position: relative;
  width: 100%;
  height: 33vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicators div {
  width: 10px;
  height: 10px;
  border-radius: 90%;
  background: rgba(5,5,5,0.5);
  cursor: pointer;
  transition: 0.3s;
}

.indicators div.active {
  background: #001612;
  transform: scale(0.9);
  width: 30px;
  height: 10px;
  box-shadow: 0px 0px 1px 1px #DD4105;
  border-radius: 20%;
}

.mobile-slider {
    overflow: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.mobile-slider-track {
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
}

.mobile-slider-track img {
    width: 100%;
    flex: 0 0 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}



@media screen and (max-width:768px){
	
header{
	height:5%;
	}
	
.products{
display:none;
}

.mobile-products{font-family: semi;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
padding:8px;
text-decoration: none;
}

a {text-decoration: none;
color:#FFFFFF;}

.mobile-product{
background:#001216;
border:2px solid #DD4103;
border-radius:14px;
overflow:hidden;
height: 250px;
font-size: 10px;
font-family: semi;
}

.mobile-slider{
width:100%;
height:168px;
overflow:hidden;
direction:ltr;
}

.mobile-slider-track{
display:flex;
height:100%;
transition:transform .4s ease;
}

.mobile-slider-track img{
flex:0 0 100%;
width:100%;
height:100%;
object-fit:cover;
}

.slider-indicators{
display:flex;
justify-content:center;
gap:5px;
margin:6px 0;
}

.dot{
width:7px;
height:7px;
background:#777;
border-radius:50%;
}

.dot.active{
background:#DD4103;
}

.mobile-buttons{
display: flex;
        justify-content: center; /* وسط‌چین کردن محتوا */
        gap: 10px;
        margin: 5px auto; /* بالا و پایین 10 پیکسل، چپ و راست خودکار (وسط‌چین) */
        height: 30px;
        width: 50%; /* عرض را کمی بیشتر کنید تا دکمه‌ها در موبایل جای کافی داشته باشند */
}

.mobile-buttons button{
 flex: 1;
        background: #DD4103;
        color: white;
        border: none;
        padding: 4px;
        border-radius: 6px;
        font-family: semi; /* حتماً فونت را اینجا هم صدا بزنید */
}

.indicators div {
  width: 8px;
  height: 8px;
  border-radius: 90%;
  background: rgba(5,5,5,0.5);
  cursor: pointer;
  transition: 0.3s;
}

.indicators div.active {
  background: #001612;
  transform: scale(1);
  width: 20px;
  height: 8px;
  box-shadow: 0px 0px 1px 1px #DD4105;
border-radius: 30%
}
	
}



/* فقط لینک اسلاید فعال قابل کلیک باشد */
.all-picture > a {
    pointer-events: none;
}

.all-picture > a.active {
    pointer-events: auto;
}

/* تصویرهای غیرفعال کلیک دریافت نکنند */
.all-picture .slide {
    pointer-events: none;
}

.all-picture .slide.active {
    pointer-events: auto;
}