/*==================================================
    Local Fonts
==================================================*/

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/vazirmatn-arabic-400-normal.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/vazirmatn-arabic-500-normal.woff2") format("woff2");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/vazirmatn-arabic-600-normal.woff2") format("woff2");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

:root {
  --bg: #fafafa;
  --text: #111;
  --muted: #777;
  --accent: #e46f1f;
  --border: #ddd;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text); 

line-height: 1.7; padding-bottom: 70px; } 
  body {
  max-width: 480px;
  margin: 0 auto;
}
.container { padding: 16px; }
header { margin-bottom:10px; text-align:center; }
.logo { width: 80px; max-width: 100%; margin-bottom:6px; }
header h1 { font-size:1rem; font-weight:400; letter-spacing:-0.3px; }
header h1 span{
    display:block;
    margin-top:6px;
    font-family:'tahoma', tahoma;
    font-size:.65rem;
    color:#8a8a8a;
    letter-spacing:1px;
    font-weight:400;
    direction:ltr;
    text-align:center;
}
header p { max-width: 320px; margin: 3px auto 0; font-size:0.65rem; color: var(--

muted); }
.gallery{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.gallery-item{

    border-radius:16px;
    overflow:hidden;
    transition:.35s;
}

.gallery-item:active{

    transform:scale(.985);

}    
    
.image-box{

box-shadow:
0 10px 28px rgba(0,0,0,.10);

}
    .hero-image-box{

width:100%;
aspect-ratio:2.2/1;
position:relative;
overflow:hidden;
border-radius:12px;

box-shadow:
0 10px 28px rgba(0,0,0,.10);

	}



.hero-image-box img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
	}



.gallery-item:active img{

transform:scale(1.02);

	}
	
.fade { opacity:0; transform:translateY(14px); transition: opacity 0.8s ease-out, 

transform 0.8s ease-out; }
.fade.show { opacity:1; transform:translateY(0); }
.card-link{

display:block;

text-decoration:none;

color:inherit;

}


.image-title h2{

font-size:1.4rem;

margin:0;

}

.image-title p{

font-size:.9rem;

opacity:.9;

margin-top:4px;

}

/* ===== Bottom Navigation ===== */

.bottom-nav{

position:fixed;

bottom:0;

left:0;

right:0;

height:56px;

background:white;

border-top:1px solid #ddd;

display:flex;

justify-content:space-around;

align-items:center;

z-index:1000;

}

.bottom-nav a{

text-decoration:none;

color:#555;

font-size:.80rem;
font-weight:400;

display:flex;

flex-direction:column;

align-items:center;
gap:4px;

transition:.25s;

}



.icon{

width:23px;

height:23px;

stroke:var(--accent);
 stroke-width:1;
fill:none;

}


.footer { margin-top:8px; padding:12px 8px 4px; text-align:center; color:#888; 

font-size:0.7rem; }
.footer .brand { font-size:0.8rem; font-weight:500; color:#666; margin-bottom:4px; 

}
.footer .desc { font-size:0.7rem; line-height:1.6; color:#999; max-width:280px; 

margin:0 auto 6px; }
.footer .copy { font-size:0.65rem; color:#aaa; }