/* ====== Base Reset ====== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #0f172a; background:#ffffff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ====== Layout ====== */
footer .container { width: 95%; max-width: 1024px; margin: 0 auto;
	text-shadow: 0.1px 0.1px 0.1px black;
}

.container { width: 95%; max-width: 1100px; margin: 0 auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(to bottom, #023a39, #319495); /* gradient always */
  color: #fff;
}

.nav { display:flex; align-items:center; justify-content:space-between; height:130px; }
.brand {
	
	background: url("images/sep/about/logo2-wh.png") no-repeat center center;
	height: 60px;
	width: 200px;
	position: relative;
	left: 30px
}

/* ====== Desktop Menu (visible on desktop) ====== */
.menu { display:flex; gap: 30px; 
	padding-right: 2.5em;
	font-weight: 700;
	font-size: 1.1em;
}
.menu a { color:#fff; padding: 10px 12px; border-radius: 12px; 
background: rgba(255,255,255,0.2); 
}
.menu a.active { text-shadow: 0.5px 0.5px 1px black; }
.menu a:hover{
	text-shadow: 0.5px 0.5px 1px black;
	color: #DAE9E9;
}
/* ====== Mobile Hamburger (hidden on desktop) ====== */
.hamburger { display:none; position: relative; left: -45px; width: 80px; height: 70px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.4); border-radius: 12px; cursor:pointer; background: transparent; }
.hamburger span, .hamburger::before, .hamburger::after {
  content:""; position:absolute; width:40px; height:3px; background:#fff; transition:transform .25s ease, opacity .25s ease; border-radius:2px;
	
	
}
.hamburger span { transform: translateY(0); }
.hamburger::before { transform: translateY(-15px); }
.hamburger::after  { transform: translateY(15px); }
.hamburger.active span { opacity:0; }
.hamburger.active::before { transform: rotate(45deg); }
.hamburger.active::after  { transform: rotate(-45deg); }



.sheet .active {
	
	background: rgba(100, 184, 184, 0.25)
}

.sheet { position: fixed; right: 0px; top: 0px; width: 100%; background: linear-gradient(to bottom, #319495, #023a39); /* gradient always */ 
	font-size: 1.5em;
	border-bottom-left-radius: 30px;   /* گوشه پایین سمت چپ */
  	border-bottom-right-radius: 30px;  /* گوشه پایین سمت راست */
	

	
	border:1px solid #e5e7eb;  box-shadow: 0 20px 40px rgba(2,6,23,.08); padding: 20px; display:none; 
}

.sheet.open { display:block; }
.sheet a { display:block; padding: 12px 14px; border-radius: 12px; }
.sheet a:hover { background: rgba(2,6,23,.08); }


/* ====== Hero Slideshow (Home only) ====== */
.hero { padding: 16px 0 24px; }
.slider { width: 100%; position: relative; overflow: hidden; }


.slider::before { content:""; display:block; aspect-ratio: 14 / 6; } /* smaller height */
.slides { position:absolute; inset:0; }
.slide { position:absolute; inset:0; opacity:0; transition: opacity 800ms ease; }
.slide.active { opacity:1; }
.slide img { width:100%; height:100%; object-fit: cover; }

/* No dots, no captions */
.caption { display:none; }
.dots { display:none; }

/* Controls (arrows kept) */
.controls { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding: 0 8px; pointer-events:none; }
.btn { pointer-events:auto; width:60px; height:60px; border:none; border-radius: 50%; background: rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: 0 6px 16px rgba(2,6,23,.15); background:#ffffff; 
font-size: 2em;
}
.btn:hover { background:#D3EAE7; }

/* ====== Sections ====== */
section { padding: 10px 0 30px 0 ; }



/* ---- 2col + third is full ---- */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* فقط یک ستون */
  gap: 1.7em; /* فاصله بین آیتم‌ها */
  justify-items: center; /* محتوا در مرکز ستون */
}

.grid > * {
  grid-column: 1 / -1;
  width: 93%;          
}






.card { grid-column: span 4; border:1px solid #dfdfdf; border-radius: 10px; overflow:hidden; box-shadow: 1px 3px 15px rgba(2,6,23,.3); 
		
}


.card-content { padding: 15px; 
	position: relative;
	
}

/*
.content-green {
	display: flex;
	flex-direction: column;  
  height: 100%;            
}
*/


/* ====== Footer ====== */
footer { border-top:1px solid #e5e7eb; padding: 24px 0; font-size: 14px; color:white; 
	background: linear-gradient(to bottom, #319495, #023a39); /* gradient always */
}







.me-title{
	margin:20px 45px;
	font-size: 1.5em;
	letter-spacing: 3px;
	text-shadow: 1px 1px 3px lightgray;
	
}


.me-contact-p-1{
	
	margin: 0em 3em 0em 3em ;
	font-size: 1.3em;
	line-height: 1.6em;
	text-align: justify;

}


.me-title-2{
	margin:20px 45px;
	font-size: 1.5em;
	letter-spacing: 3px;
	text-shadow: 1px 1px 3px black;
	color: white;
}



.me-contact-p-2{
	color: #D3ECE8;
	margin: 1em 3em 1em 3em ;
	font-size: 1.3em;
	line-height: 1.6em;
	text-align: justify;
	text-shadow: 
    -1px -1px 0.0001px black,  
     1px -1px 0.0001px black,
    -1px  1px 0.0001px black,
     1px  1px 0.0001px black; /* چهار طرف */		

}




.card3{
	background: linear-gradient(90deg, #2a786b, #073534); /* gradient always */
}









/*
13c5ff
*/
.button:hover {
	background:#E56D6D;
}


.newspaper-title {
  font-family: 'Special Elite', cursive;
  font-size: 2.5rem;

}





.mailc {
  height: 4em;         /* کوچیک‌تر برای هم‌تراز شدن */
  width: auto;
  display: inline-block; /* به جای block */
  vertical-align: middle; /* وسط‌چین با متن */
  margin-left: 6px;      /* فاصله از متن */
}



/* email
*/
.c{
	position: relative;
}

.c #email-sep{
	height:100px;
	width:160px;
	border-radius: 6px;
	position: absolute;
	top: -200px;
	left: 650px;
	background-color: #439975;
	box-shadow: 7px 7px 10px black, 1px 1px 30px rgba(255,255,255,0.3) inset;
	transform: rotate(10deg);
	transition: all 0.1s ease-out;
}


	.c:hover #email-sep{
		box-shadow: 2px 2px 2px black, 1px 1px 30px rgba(255,255,255,0.3) inset;
}	


/* clip*/
#clip-e{
	height: 50px;
	margin: -30px 0px 0px 70px;
	
}


.sepiemail {
	color: #aee9c5;
	text-decoration:none;
	outline:none
}
.sepiemail:hover {
	text-decoration:none;
	color: #DBFAEC;
}



#text-mail{
	font-family: Segoe, "Segoe Print", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 1.5rem;
	color: #000;
	text-align: center;
	font-weight: bold;
	text-shadow:3px 3px 5px #61dda9;	
	margin: 10px 0px 30px 0px;
	transition:all 0.1s eas-out;
}

		
	
.c:hover #text-mail{
	text-shadow:2px 2px 1px #61dda9;	
}




.email-info{
	font-size: 25px;
	color: #34664C;
	padding-left: 25px;
	margin-top: -20px;
	
}





/* subtle entrance animation */
@keyframes grow{
  from{ width:0; }
  to  { width: var(--pct, 0%); }
}

/* responsive: stack to one column on small screens */
@media (max-width: 700px){
  .skills-grid{ grid-template-columns: 1fr; }
}











/* ====== Responsive Breakpoints ====== */


@media (max-width: 1100px) {
  .menu { display:flex; gap: 23px; 
		padding-right: 2.5em;
		font-weight: 600;
		font-size: 1em;
	}
	
	.me-title{
		font-size: 1.4em;
	}
	
	.me-title-2{
		font-size: 1.4em;
	}
	
	.me-contact-p-1{
		font-size: 1.2em;
	}
	
	.me-contact-p-2{
		font-size: 1.2em;
	}
	
	
}



@media (max-width: 1020px) {
	.grid {
	  display: grid !important;
	  grid-template-columns: 1fr 2fr !important; /* ستون چپ نصف راست */
	  gap: 1.5em !important;
	}
	
  
}



@media (max-width: 1000px) {
	.menu { display:flex; gap: 18px; 
		padding-right: 2.5em;
		font-weight: 500;
		font-size: 0.8em;
	}
  
}

@media (max-width: 950px){
	.c #email-sep{

		position: absolute;
		top: -200px;
		left: 550px;

	}
}



@media (max-width: 900px) {
	  .menu { display:none; }          /* hide desktop menu on mobile */
	  .hamburger { display:flex; }     /* show hamburger on mobile */
		.grid { grid-template-columns: 1fr !important; }
	  .grid > * { grid-column: 1 / -1 !important; }
	
	
	.nav { display:flex; align-items:center; justify-content:space-between; height:208px; }
	.brand {
	
		background: url("images/sep/about/logo2-wh.png") no-repeat center center;
			background-size: contain;
		height: 300px;
		width: 400px;
		position: relative;
		left: -20px;
			padding-right: 20px;
	}

}



@media (max-width: 840px){
	.c #email-sep{

		position: absolute;
		top: -200px;
		left: 450px;
	}
}

@media (max-width: 720px){
	.c #email-sep{
		display: none;
	}
	
	.me-contact-p-2{
		font-size: 0.9em;
	}
	
	.me-contact-p-1{
		font-size: 0.9em;
	}
}


@media (max-width: 500px){
	
	.me-contact-p-2{
		font-size: 0.8em;
	}
	
	.me-contact-p-1{
		font-size: 0.8em;
	}
	
	.me-title{
		font-size: 0.8em;
	
	}
	
	.me-title-2{
		font-size: 0.8em;
	}
	
}