/* ====== 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; 
border-radius: 7px;
}
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 !important;
  grid-template-columns: 1.3fr 2fr !important; /* ستون چپ نصف راست */
  gap: 1.5em !important;
}

/* مطمئن شو کارت‌ها span قبلی ندارن */
.grid > * { grid-column: auto !important; }

/* هر آیتم سوم (3، 6، 9، ...) تمام‌عرض */
.grid > *:nth-child(3n) { grid-column: 1 / -1 !important; }







.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: 14px; 
	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: 7px double black;
	height: auto;
	width: 100%;
	margin: 0 0 2.5em 0 ;
	background-color: lightgray;
	border-radius: 13px;
}


.me-color{
	float: left;
	height: 15em;
	width: auto;
	margin: 0 2em 2.5em 0 ;
	background-color: lightcyan;
	border-radius: 5px;
	border: 2px solid #22281D;
	
}

.me-title{
	margin:20px 15px;
	font-size: 1.5em;
	text-align: center;
}


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





.me-title-p-2{
	margin:20px;
	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, #e4fffb, lightblue); /* 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 14px;
	background:#fd8686;
	border-radius: 5px;
	width: 170px;
	text-align: center;
	margin-top: auto;
	margin-left: 20px;


}

.con-btn{
	
}

.port-btn{
	
}



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





/* ====== 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: 220px;
		height: 34em;
		width: auto;
	}
	
	.me-black{
		float: left;
		border: 12px double black;
		height: auto;
		width: 40%;
		margin: 0 2em 3em 0 ;
		background-color: lightgray;

	}
	
	.me-title-p{
		margin:20px;
		font-size: 0.8em;
		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;
			
	}
	
	.port-btn{ position: relative; z-index: 9999 !important;
	
	
	
}




@media (max-width: 770px){
	.me-green{
		
		left: 340px;
		top: 320px;
		height: 27em;
		width: auto;
	}
	
}


@media (max-width: 650px) {
	
	.me-title-p-2{
		margin:20px;
		font-size: 1.1em;
		line-height: 2.4em;
		color: white; /* رنگ متن */
  text-shadow: 
    -1px -1px 2px black,  
     1px -1px 2px black,
    -1px  1px 2px black,
     1px  1px 2px black; /* چهار طرف */		
	}
	
  .me-green{
		
		left: 150px;
		top: 110px;
		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: 260px;
		height: 39em;
		width: auto;
	}
	
	.me-black{
		float: left;
		border: 5px double black;
		height: auto;
		width: 40%;
		margin: 0 1.2em 0.7em 0 ;
		background-color: lightgray;

	}
	
}


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



@media (max-width: 438px){
	.me-green{
		left: 130px;
		top: 450px;
		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: 320px;
		height: 35em;
		width: 25em;
	}
	
}


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