/* ====== 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%;          /* عرض 80 درصد */
}






.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-green{
	position: absolute;
	left: 250px;
	top: 250px;
	height: 28em;
	width: auto;
}


.me-black{
	float: left;
	border: 5px solid black;
	height: auto;
	width: 24%;
	margin: 0 0  2.5em 0 ;
	background-color: lightgray;
	border-radius: 10px;
	margin-right: 3em;
	
	
}


.me-color{
	float: left;
	height: 15em;
	width: auto;
	margin: 0 2em 2.5em 0 ;
	background-color: lightcyan;
	
}

.me-title{
	margin:20px 45px;
	letter-spacing: 3px;
	text-shadow: 1px 1px 3px lightgray;
	font-size: 2.5rem;
  	color: #222;
	
}


.me-title-p{
	margin: 0 3em 3em 0 ;
	font-size: 1.1em;
	line-height: 1.6em;
	text-align: justify;

}





.me-title-p-2{
	margin:0 3em 1.5em 3em ;
	font-size: 1.1em;
	line-height: 2em;
	text-align: justify;	
}



.me-title-p-3{
	margin:20px;
	font-size: 1.1em;
	line-height: 1.3em;
	text-align: justify;	
	
}


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



.text-heart {
  display: inline-block;   /* یا inline */
  vertical-align: middle;  /* وسط چین نسبت به متن */
  margin-left: 6px;        /* فاصله از متن */
	height: 30px;
}


.list1 li {
	padding-bottom:0px;
	padding-left:10px;
	list-style-image: url(images/marker_1.gif);
		
}



.button {
	display:inline-block;
	color:#fff;
	line-height:28px;
	text-decoration:none;
	padding: 5px 0;
	background:#fd8686;
	border-radius: 5px;
	width: 200px;
	text-align: center;
	margin-top: auto;
	margin-left: 20px;


}

.con-btn{
	margin: 0 0 1em 0 ;
}

.port-btn{
	margin: 0 0 1em 3.1em ;
}



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


.newspaper-title {
  font-family: 'Special Elite', cursive;
  
}





/* Base (no padding on body per your preference) */
:root{
  --bg: #2b7268;         /* teal background like screenshot */
  --bar-bg: #cfd9d7;     /* light grey line */
  --bar-fill: #ff6b6b;   /* coral/red progress */
  --text: #e8f3f1;
}


.skills{
  width:95%;
  max-width:1024px;
  margin:4rem auto;
}

.skills h2{
  font-weight:300;
  font-size: clamp(1.6rem, 3.8vw, 3rem);
  letter-spacing: .5px;
  color: #e7f1ef;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
  margin:0 0 2rem;
}

/* two-column grid like the image */
.skills-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}

.skill .label{
  font-size:1.05rem;
  margin-bottom:.5rem;
	color: white;
}

/* thin progress line */
.bar{
  position:relative;
  height:6px;
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.06)), var(--bar-bg);
  border-radius: 999px;
  overflow:hidden;
}

/* the red fill; width set by --pct on each item */
.fill{
  position:absolute;
  inset:0 auto 0 0;
  width: var(--pct, 0%);
  background: var(--bar-fill);
  border-radius: 999px;
  transform: translateZ(0);
  animation: grow .9s ease-out both;
}


.mailc{
	height: 45px;
	padding-bottom: 15px;
}


/* 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{
		margin:20px 10px;
		font-size: 1.4em;
	}
}



@media (max-width: 1020px) {
	.grid {
	  display: grid !important;
	  grid-template-columns: 1fr 2fr !important; /* ستون چپ نصف راست */
	  gap: 1.5em !important;
	}
	
	.me-green{
		
		left: 250px;
		top: 230px;
		height: 26em;
		width: auto;
	}
	
	
	.me-title{
		margin:20px 10px;
		font-size: 1.3em;
	}
	
	
	
	.me-title-p{
		margin:20px;
		font-size: 1em;
		line-height: 1.4em;
		text-align: justify;

	}
  
}



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




@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;
}
	
	
	.me-title-p-2{
		margin:20px;
		font-size: 1.3em;
		line-height: 2.4em;
			
	}
	
	
	.me-green{
		
		left: 350px;
		top: 210px;
		height: 28em;
		width: auto;
	}
	
	.me-black{
		float: left;
		
		height: auto;
		width: 40%;
		margin: 0 2em 3em 0 ;
		background-color: lightgray;

	}
	
	.me-title-p{
		margin:20px;
		font-size: 1em;
		line-height: 1.4em;
		text-align: justify;
		margin-bottom: 2em;

	}
	
	
	
	.me-color{
		float: left;
		height: 12.5em;
		width: auto;
		margin: 0 2em 2.5em 0 ;
		background-color: lightcyan;

	}
	
	.me-title-p-3{
		margin:20px;
		font-size: 1em;
		line-height: 1.3em;
		text-align: justify;	

	}
	
	.me-title{
		text-align: left;
		padding: 10px 33px;
			
	}
	

}



@media (max-width: 680px){
	.me-black{
		width: 35%;
		margin-bottom: 1em;

	}
	
	.me-title-p{
		font-size: 1.2em;
	}
	
	.con-btn{
		margin-left: 3em;
	}
}



@media (max-width: 650px) {
	
	.me-title-p-2{
		margin:20px;
		font-size: 1.1em;
		line-height: 2.4em;
	}

	
  .me-green{
		
		left: 150px;
		top: 60px;
		height: 36em;
		width: auto;
	  opacity: 0.3;
	}
	
	.me-title-p-3{
		margin:20px;
		font-size: 0.8em;
		line-height: 1.2em;
		text-align: justify;	

	}
	
	.text-heart {
		height: 20px;
	}

}



@media (max-width: 580px) {
	
  .me-green{
		left: 80px;
		top: 170px;
		height: 36em;
		width: auto;
	}
	
	
	.me-color{
		float: left;
		height: 8em;
		width: auto;
		margin: 0 2em 2.5em 0 ;

	}
	
	.me-title-p-3{
		margin:20px;
		font-size: 0.7em;
		line-height: 1.2em;
		text-align: justify;	

	}

}





@media (max-width: 535px) {
  .me-color{
		float: left;
		height: 7em;
		width: auto;
		margin: 0 1em 3em 0 ;

	}
	
	.me-title-p-3{
		margin:20px;
		font-size: 0.7em;
		line-height: 1.2em;
		text-align: justify;	
	}
	
	.me-green{
		left: 60px;
		top: 150px;
		height: 33em;
		width: auto;
	}
	
	.me-black{
		float: none;
		
		height: auto;
		width: 100%;
		margin: 0 1.2em 0.7em 0 ;
		background-color: lightgray;

	}
	
}


@media (max-width: 468px){
	.me-green{
		left: 50px;
		top: 150px;
		height: 33em;
		width: auto;
	}
}



@media (max-width: 438px){
	.me-green{
		left: 130px;
		top: 350px;
		height: 22em;
		width: auto;
	}
}

@media (max-width: 410px){
	.me-color{
		float: none;
		height: 100%;
		width: auto;
		margin: 0 1em 0.5em 0 ;

	}
	
	.me-title-p-3{
		margin:20px;
		font-size: 1em;
		line-height: 1.3em;
		text-align: justify;	
	}
	
}



@media (max-width: 390px){
	.me-green{
		left: 10px;
		top: 200px;
		height: 35em;
		width: 25em;
	}
	
}


@media (max-width: 370px){
	.me-black{
		
		height: auto;
		width: 100%;
		margin: 0 1.2em 0.7em 0 ;
		background-color: lightgray;
	}
}