:root{
  --bg:#ffffff;
  --text:#0f0f0f;
  --muted:#6b7280;
  --brand:#13c5ff;
  --brand-2:#aee9c5;
  --btn:#0f0f0f;
  --btn-text:#ffffff;
  --card:#f6f7f9;
  --alt:#f2fbf7;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

img{max-width:100%;height:auto;display:block}

.container-port{max-width:1024px;margin:0 auto;padding:0 1rem}
.muted{color:var(--muted)}



/* Hero slider */
.hero{background:linear-gradient(180deg,#0b1220,#111);color:#fff}
.slider{position:relative;overflow:hidden}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;transition:transform .6s ease;}
.slide{position:relative}
.slide img{width:100%;height:clamp(240px,50vh,520px);object-fit:cover;display:block;filter:contrast(1.02)}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.4);color:#fff;
  padding:.5rem .75rem;cursor:pointer;border-radius:.5rem}
.slider__btn:hover{background:rgba(0,0,0,.6)}
.slider__btn.prev{left:12px}
.slider__btn.next{right:12px}
.slider__dots{position:absolute;inset:auto 0 10px 0;display:flex;gap:.5rem;justify-content:center}
.slider__dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer}
.slider__dots button[aria-current="true"]{background:#fff}

/* --- Fix for fade flicker --- */
.slider[data-effect="fade"] .slide {
  opacity: 0;
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transition: opacity .6s ease;
}
.slider[data-effect="fade"] .slide:first-child {
  opacity: 1;
  position: relative;
}
/* --- End fix --- */

/* Sections */
.section{padding:3rem 0}
.section--alt{background:var(--alt)}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.img-card{border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-block;background:var(--btn);color:var(--btn-text);padding:.75rem 1rem;border-radius:.75rem;text-decoration:none}
.btn:hover{filter:brightness(0.92)}
.btn--ghost{background:transparent;color:var(--btn);border:1px solid var(--btn)}

/* Bullet grid */
.bullet-grid{columns:2;column-gap:2rem;margin:1rem 0 0 0;padding:0}
.bullet-grid li{break-inside:avoid;list-style:"– ";margin:0 0 .4rem 1rem}

/* Skills */
.skills{display:grid;gap:1rem}
.skill{display:grid;grid-template-columns:160px 1fr;gap:1rem;align-items:center}
.skill .bar{position:relative;height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.skill .bar i{position:absolute;inset:0 0 0 0;background:linear-gradient(90deg,var(--brand-2),var(--brand));display:block}
.skill .bar em{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.8rem;color:#000;background:#fff;padding:0 .25rem;border-radius:.25rem;}


/* === Portfolio Lightbox (no HTML changes required) === */
.masonry__item{ position: relative; }
.masonry__item img{ cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.masonry__item::after{
  content:"⤢";
  position:absolute; right:.5rem; bottom:.5rem;
  padding:.2rem .35rem; font-size:.9rem; line-height:1;
  color:#fff; background:rgba(0,0,0,.55); border-radius:.4rem;
  pointer-events:none;
}

/* Overlay */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92); display:none;
  place-items:center; z-index:9999; -webkit-user-select:none; user-select:none; touch-action:none; }
.lightbox.is-open{ display:grid; }
.lightbox__img{ width:min(96vw,1200px); height:min(90vh,90vh); background:#111 no-repeat center/contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5); border-radius:.5rem; }
.lightbox__close{ position:fixed; top:16px; right:16px; border:0; background:rgba(0,0,0,.6); color:#fff;
  width:40px; height:40px; border-radius:999px; cursor:pointer; font-size:22px; }
.lightbox__btn{ position:fixed; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.5); color:#fff;
  width:44px; height:56px; border-radius:.4rem; cursor:pointer; font-size:28px; }
.lightbox__btn:hover, .lightbox__close:hover{ background:rgba(0,0,0,.7); }
.lightbox__btn.prev{ left:16px; } .lightbox__btn.next{ right:16px; }

/* Prevent scrolling the page when lightbox is open */
body.lb-lock{ overflow:hidden; }

/* Masonry-like grid */
.masonry{columns:3;column-gap:0.5em}
.masonry__item{break-inside:avoid;margin:0 0.5em 1em 0.5em; overflow:hidden;border-radius:.75rem;box-shadow:var(--shadow)}

/* Tabs */
.tabs{margin-top:1rem}

.tablist{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;
	margin: 1rem;
}

/* New */







.tab{appearance:none;
	border:1px solid #fd8686;
	background:#fd8686;
	color: #fff;
	padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;
	font-size: 1.1em;
	text-shadow: 
    -1px -1px 1px #e57272,  
     1px -1px 1px #e57272,
    -1px  1px 1px #e57272,
     1px  1px 1px #e57272; /* چهار طرف */
}
.tab:hover{
	background-color: #E56D6D;
	border-color:#d55e5e;
}


.tab.is-active{
	background:#E56D6D;color:#fff;border-color:#d55e5e;
	-1px -1px 1px #d55e5e,  
     1px -1px 1px #d55e5e,
    -1px  1px 1px #d55e5e,
     1px  1px 1px #d55e5e; /* چهار طرف */

}

.panel{display:none}
.panel.is-active{display:block}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:.75rem;box-shadow:var(--shadow)}
.list{margin:0;padding-left:1rem}
.contact-form{display:grid;gap:1rem;max-width:720px}
.contact-form label{display:grid;gap:.25rem}
.contact-form input,.contact-form textarea{width:100%;padding:.75rem;border:1px solid #e5e7eb;border-radius:.5rem}




/* From Main */
.title{
	font-family: 'Special Elite', cursive;
  	color: #fff;
	margin:20px 45px;
	font-size: 2.5em;
	letter-spacing: 3px;
	text-shadow: 
    -1px -1px 5px #933e3e,  
     1px -1px 5px #933e3e,
    -1px  1px 5px #933e3e,
     1px  1px 5px #933e3e; /* چهار طرف */
}






/* Responsive: hamburger only on tablet/mobile */
@media (max-width: 1100px){
	/* Extra breathing room  */

  	.container{ padding:0 1.25rem; }   /* a little more side padding on small screens */
}




/* --- Tabs: horizontal scroll on mobile --- */
@media (max-width: 920px) {
  .tablist {
    display: flex;
    flex-wrap: nowrap;           /* no wrap on mobile */
    overflow-x: auto;            /* enable horizontal scroll */
	  
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
    scroll-snap-type: x mandatory;   /* smooth snap */
    padding-bottom: .7rem;          /* little space for scrollbar */
  }
  .tablist::-webkit-scrollbar { height: 1em }      /* optional: slim scrollbar */
  .tablist::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #ff7b7b, #cf5b5b); 
	  border-radius: 999px; }

  .tab {
    flex: 0 0 auto;                 /* keep width to content */
    scroll-snap-align: start;       /* snap each tab to left edge */
    font-size: .95rem;              /* slightly smaller on mobile */
    padding: .4rem .6rem;           /* tighter padding */
  }
	
}




@media (max-width: 920px){
  .tablist {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* محو شدن لبه‌ها */
    -webkit-mask-image: linear-gradient(to right,
      transparent, #000 20px, #000 calc(100% - 20px), transparent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: destination-in;
            mask-image: linear-gradient(to right,
      transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-repeat: no-repeat;
    mask-composite: intersect;
  }
}









@media (max-width: 900px){
  

  .two-col{grid-template-columns:1fr}
  .masonry{columns:2}
  .contact-grid{grid-template-columns:1fr}
	

}



@media (max-width: 590px){
	.title{
		font-size: 1.9em;
	}
}


@media (max-width: 500px){
	.title{
		font-size: 1.2em;
	}
}



@media (max-width: 479px){
  .masonry{columns:1}
  .bullet-grid{columns:1}
	
}