/*
Theme Name: Khorraman
Author: Anonymous
Version: 1.0
*/

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: bold;
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Bold.eot');
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('fonts/iransans/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('fonts/iransans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/iransans/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot');
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('fonts/iransans/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('fonts/iransans/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/iransans/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 300;
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot');
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('fonts/iransans/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('fonts/iransans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/iransans/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 200;
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot');
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('fonts/iransans/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('fonts/iransans/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/iransans/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: normal;
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum).eot');
  src: url('fonts/iransans/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),
    /* IE6-8 */
    url('fonts/iransans/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),
    /* FF39+,Chrome36+, Opera24+*/
    url('fonts/iransans/woff/IRANSansWeb(FaNum).woff') format('woff'),
    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/iransans/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}



* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

body {
  background-color: #F7F7F7;
  margin: 0;
  padding: 0;
  font-family: 'IRANSans';
  direction:rt;
}

.section {
  width: 95%;
  max-width: 1200px;
  margin: 0px auto;
}

.sectionv {
  height: 100vh;
}

.header {
  background-color: #fff;
  height: 70px;
  border-radius: 11px;
  margin: 0px auto;
  position: absolute;
  z-index: 15;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  display: flex;
  justify-content: space-between;
  padding-inline: 5%;
}

.header .rightSection {
  display: flex;
  gap: 60px;
}

.header .leftSection {
  display: flex;
  gap: 40px;
  align-items: center;
}

.header .leftSection img {
  width: 30px;
}

.menu {
  width: 100%;
  padding-inline: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  height: 100%;
  margin: 0;
}

.menu li {
  position: relative;
}

.sub-menu {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  display: none;
  width: 250px;
  z-index: 100;
  padding: 0;
  margin: 0;
  padding-block: 5px;
}

.menu li:hover .sub-menu {
  display: block;
}

.sub-menu a {
  text-align: right;
  color: black;
  width: 95%;
  display: block;
  padding-block: 10px;
  margin: 0px auto;
  border-radius: 5px;
  transition: all ease-in-out 0.3s;
  padding-inline: 10px;
}

.sub-menu a:hover {
  background-color: white;
}

.menu>li>a {
  color: black;
  font-size: 16px;
  padding: 10px 3px;
  position: relative;
  line-height: 1em;
}

.MenuIcon {
  display: none;
  place-content: center;
}

.MenuIcon img {
  width: 30px;
  cursor: pointer;
}


.logo {
  position: relative;
  right: 20px;
  height: 100%;
}

.logo img {
  height: 100%;
  padding-block: 10px;
}

.hero {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
}

.oneSlider {
  width: 100%;
  height: 100%;
  /* background-position: center;
  background-size: cover; */
  position: relative;
}

.oneSlider picture,
.oneSlider img {
    width: 100%;
    height: 100%;
}

.oneSlider img {
    object-fit: cover;
}


/* ویدیو فول اسکرین */
.bg-video {
  position: absolute;
  inset: 0;
  width: 120%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  object-position: -100px;
}

/* گرادیان برای خوانایی */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: black;
  z-index: 2;
  opacity: 0;
}


.glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.8);
}

/* محتوای Hero */
.hero-content {
  position: absolute;
  z-index: 3;
  width: 680px;
  padding: 15px;
  margin: auto;
  top: calc(50% + 44px);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  left: 50%;
  max-width: 95%;
  text-transform: uppercase;
  opacity: 0;
}

.hero-content h1 {
  font-weight: 900;
  font-family: 'Raleway', sans-serif;
  font-size: 70px;
  margin-block: 20px;
}

.hero-content p {
  letter-spacing: 6;
}

.slideContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transition: all ease-in-out 0.5s;
}

.slideContent img {
  width: 80%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 15px;
	filter:grayscale(1);
	  transition: all ease-in-out 0.5s;
}

.slideContent span {
  color: #434343;
	text-align:center;
}

.slideContent:hover {
  filter: drop-shadow(0px 0px 3px white);
  scale: 1.06;
}

.slideContent:hover img{
	filter:grayscale(0);
}

.Title {
  font-size: max(18px, 1.5vw);
  margin-bottom: 20px;
  color: black;
  border-bottom: 2px solid #006646;
  width: fit-content;
  padding: 5px 10px;
}

.FillText {
  -webkit-text-fill-color: #fff3;
  color: #eee;
  will-change: background-size;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-background-clip: text;
  width: fit-content;
}

.swiper-button-next,
.swiper-button-prev {
  color: #e8e8e8 !important;
  height: 25px !important;
}

.Partner .swiper-button-next,
.Partner .swiper-button-prev {
  top: calc(50% + 11px) !important;
}

.SwiperWrapper {
  position: relative;
  margin: 0px auto;
}

.swiper-button-next {
  right: 0px !important;
}

.swiper-button-prev {
  left: 0px !important;
}

.catsArea {
  margin-block: 100px;
  display: flex;
  gap: 80px;
  justify-content: center;
	position:relative;
}

.catsArea:before{
	content:'';
	position:absolute;
	height:1px;
	background-color:#ADADAD;
	width:120px;
	top:50%;
	transform:translateY(-50%);
	right:0px;
}

.catsArea:after{
	content:'';
	position:absolute;
	height:1px;
	background-color:#ADADAD;
	width:120px;
	top:50%;
	transform:translateY(-50%);
	left:0px;
}

.catItem {
  width: 160px;
}

.AboutArea {
  display: flex;
  margin-block: 100px;
}

.AboutArea .part1 {
  width: 50%;
  display: flex;
  flex-direction: column;
  color: 2C2C2C;
  justify-content: center;
}

.AboutArea .part2 {
  width: 50%;
}

.AboutArea .part1 p {
  text-align: justify;
  margin: 0;
}

.image-stack {
  position: relative;
  width: 100%;
  height: 400px;
  /* transform: translateY(100px); */
}

.card {
  position: absolute;
  width: 260px;
  height: 288px;
  border-radius: 20px;
  object-fit: cover;
/*  background: #333; */
  opacity: 1;
  scale: 1;
}

.card-1 {
  top: 0px;
  left: calc(50% - 130px);
  z-index: 1;
	top:65px;
}

.card-2 {
  top: 75px;
  right: 50%;
  z-index: 3;
	display:none;
}

.card-3 {
  bottom: 0;
  left: 40%;
  z-index: 2;
	display:none;
}



.ActionButton {
  background: linear-gradient(270deg, rgba(0, 78, 52, 1) 0%, rgba(0, 123, 79, 1) 100%);
  color: white;
  font-size: 16px;
  width: fit-content;
  font-weight: 500;
  padding: 10px 30px;
  border-radius: 8px;
  transition: all ease-in-out 0.3s;
}

.ActionButton:hover {
  background: linear-gradient(90deg, rgba(0, 78, 52, 1) 0%, rgba(0, 123, 79, 1) 100%);
}

.AboutArea .ActionButton {
  align-self: end;
  margin-top: 20px;
}

.LatestPost {
  margin-block: 100px;
}

.LatestPost .ActionButton {
  float: left;
  margin-top: 30px;
}

.Articles {
  width: 100%;
  display: flex;
}

.Article {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.Article img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  transition: all ease-in-out 0.3s;
}

.Article h2 {
  color: #1F1F1F;
  font-size: 14px;
  margin: 0px;
	height:45px;
}

.TwoLineTitle {
    display: -webkit-box;       /* ضروری برای line-clamp */
    -webkit-line-clamp: 2;      /* تعداد خطوط محدود */
    -webkit-box-orient: vertical; 
    overflow: hidden;           /* مخفی کردن اضافی */
    text-overflow: ellipsis;    /* اضافه کردن ... */
}

.Article p {
  color: #1F1F1F;
  font-size: 14px;
  height: 95px;
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* تعداد خطوط */
  -webkit-box-orient: vertical;
  margin: 0px;
}


.ArticleMeta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #4D4D4D;
  padding-block: 10px;
  color: #1F1F1F;
  font-size: 12px;
	display:none;
}

.Article:hover img {
  filter: drop-shadow(0px 0px 3px white);
  scale: 1.02;
}

.Footer {
  width: 100%;
  background: linear-gradient(270deg, rgba(0, 78, 52, 1) 0%, rgba(0, 123, 79, 1) 100%);
  margin-top: 200px;
  padding-top: 20px;
}

.footerMain {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  padding-block: 30px;
}

.column1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

.column2 {
  padding-right: 40px;
}

.column1 img {
  max-width: 128px;
  max-height: 128px;
}

.socials {
  display: flex;
  gap: 10px;

}

.social img {
  width: 100%;
  transition: all ease-in-out 0.4s;
}

.social {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: grid;
  place-content: center;
  transition: all ease-in-out 0.4s;
}

.social:hover {
  border-color: white;
  transform: translateY(-5px) rotateZ(10deg);
}

.listArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.listTitle {
  color: white;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 20px;
}

.listItems ul {
  display: flex;
  flex-direction: column;
}

.listItems a {
  color: white;
  font-size: 15px;
  transition: all ease-in-out 0.3s;
  display: block;
  padding: 5px 10px;
  transform-origin: left center;
  position: relative;
  padding-right: 15px;
  ;
}

.listItems a:before {
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 20px;
  background-color: #BED62F;
  right: 0;
  top: 16px;
}

/* .listItems a:hover {
  color: white;
  transform: translateY(-5px) rotateZ(7deg);
} */

.listItems ul {
  padding: 0;
  margin: 0;
}

.footerMain p {
  color: white;
  font-size: 15px;
  line-height: 1.5;
  text-align: justify;
}

#logoCanvas {
  width: 128px;
  height: 128px;
  display: block;
  margin: auto;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.Copyright {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #7B7B7B;
  padding-top: 9px;
  color: white;
  font-size: 13px;
  font-weight: 300;
		text-align:center;
}


#loader {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #0f172a, #020617);
  /* background-color: #f05900; */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


.loader-inner {
  text-align: center;
  color: #fff;
}


.loaderLogo {
  font-size: 42px;
  letter-spacing: 4px;
  font-weight: bold;
  margin-bottom: 30px;
}


.progress-wrap {
  width: 260px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  overflow: hidden;
  margin: auto;
}


.progress-bar {
  width: 0%;
  height: 100%;
  /* background: linear-gradient(90deg, #38bdf8, #22c55e, #eab308); */
  background-color: #f05900;
  border-radius: 10px;
}


.percent {
  margin-top: 16px;
  font-size: 14px;
  opacity: 0.7;
}


/* SITE CONTENT */
#site {
  display: none;
}

:root {
  --glow-sens: 30;
  --card-bg: linear-gradient(8deg, var(--dark) 75%, color-mix(in hsl, var(--dark), white 2.5%) 75.5%);
  --blend: soft-light;
  --glow-blend: plus-lighter;
  --glow-color: 40deg 80% 80%;
  --glow-boost: 0%;
  --dark: hsl(222, 20%, 20%)
}

.cardSlider {
  --pads: 40px;
  --color-sens: calc(var(--glow-sens) + 20);
  --pointer-°: 45deg;
  position: absolute;
  width: clamp(320px, calc(100svw - calc(var(--pads) * 2)), 600px);
  /* height: 340px; */
  border-radius: 1.768em;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 25%);
  background: var(--card-bg);
  background-repeat: no-repeat;
  overflow: hidden;
  left: 10%;
  width: 400px;
  top: 50%;
  transform: translateY(calc(-50% + 45px));
}

/* pseudo elements + glow */
.cardSlider::before,
.cardSlider::after,
.cardSlider>.glow {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

/* hover state */
.cardSlider:not(:hover):not(.animating)::before,
.cardSlider:not(:hover):not(.animating)::after,
.cardSlider:not(:hover):not(.animating)>.glow {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* before */
.cardSlider::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) border-box,
    radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) border-box,
    linear-gradient(#c299ff 0 100%) border-box;

  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));

  mask-image: conic-gradient(from var(--pointer-°) at center,
      black 25%,
      transparent 40%,
      transparent 60%,
      black 75%);
}

/* after */
.cardSlider::after {
  border: 1px solid transparent;
  background:
    radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%) padding-box,
    radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%) padding-box,
    linear-gradient(#c299ff 0 100%) padding-box;

  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--pointer-°) at center,
      transparent 5%,
      black 15%,
      black 85%,
      transparent 95%);

  mask-composite: subtract, add, add, add, add, add;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mix-blend-mode: var(--blend);
}

/* glow */
.cardSlider>.glow {
  --outset: var(--pads);
  inset: calc(var(--outset) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image: conic-gradient(from var(--pointer-°) at center,
      black 2.5%,
      transparent 10%,
      transparent 90%,
      black 97.5%);

  opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
  mix-blend-mode: var(--glow-blend);
}

.cardSlider>.glow::before {
  content: "";
  position: absolute;
  inset: var(--outset);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-color) / 100%),
    inset 0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
    inset 0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
    inset 0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
    inset 0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
    inset 0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
    inset 0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%)),
    0 0 1px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 60%)),
    0 0 3px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 50%)),
    0 0 6px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 40%)),
    0 0 15px 0 hsl(var(--glow-color) / calc(var(--glow-boost) + 30%)),
    0 0 25px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 20%)),
    0 0 50px 2px hsl(var(--glow-color) / calc(var(--glow-boost) + 10%));
}

/* shadow */
.cardSlider {
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

/* inner */
.cardInner {
  text-align: right;
}

.cardInner h2 {
  color: inherit;
  font-weight: 500;
  font-size: 17px;
  margin-block: 0;
  text-align: justify;
}

.cardInner .cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: right;
  padding: 0em 1em 0.5em 1em;
}

/* card inner */
.cardSlider .cardInner {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  position: relative;
  overflow: auto;
  z-index: 1;
  color: white;
  padding: 25px 10px;
}

/* content */
.cardSlider .cardFooter {
  padding: 0 1em;
  font-weight: 300;
  text-align: justify;
  line-height: 1.6;
  color: #e8e8e8;
  overflow: auto;
  scrollbar-width: none;
  /* mask-image: linear-gradient(to top, transparent 5px, black 2em); */
  font-size: 15px;
}

.cardSlider .cardFooter em,
.cardSlider .cardFooter strong {
  color: color-mix(var(--fg), transparent 40%);
}

.cardSlider .cardFooter p {
  opacity: 0;
  animation: fadeContent 1.5s ease-in-out 2s both;
  margin: 0;
}

.cardSlider .cardFooter p:nth-child(2) {
  animation-delay: 2.25s;
}

.cardSlider .cardFooter p:nth-child(3) {
  animation-delay: 2.5s;
}

.cardSlider .cardFooter p:nth-child(4) {
  animation-delay: 2.75s;
}

@keyframes fadeContent {
  to {
    opacity: 1;
  }
}

.Slogan {
  width: 100%;
  margin-block: 160px;
}

.Slogan img {
  width: 90%;
  margin: 0px auto;
  max-width: 500px;
  display: block;
}

.ServiceSwiper {
  border: 2px solid #006646;
  border-radius: 25px;
  margin-top: 20px;
  background-image: url('assets/ServiceBack.jpg');
  background-position: center;
  background-size: cover;
}

.serviceSlide {
  width: 100%;
  display: flex;
  padding-block: 40px;
}

.serviceSlide .rightPart {
  width: 400px;
  display: grid;
  place-content: center;
}

.serviceSlide .leftPart {
  width: calc(100% - 400px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-inline-end: 40px;
}

.serviceImg {
  transform: skew(-10deg);
  width: 200px;
  padding-top: 120%;
  background-position: -23px;
  background-size: cover;
  border-radius: 2rem;
}

.serviceImg2{
	width:300px;
	
}

.serviceImg2 img{
	width:100%;
}

.serviceSlide .leftPart p {
  margin: 0px;
  text-align: justify;
}

.serviceSlide .leftPart .ActionButton {
  align-self: end;
}

.ServiceSwiper .swiper-pagination {
  bottom: 25px !important;
}

.swiper-pagination-bullet {
  width: 17px !important;
  height: 17px !important;
  background-color: #008CA5 !important;
}

.StatisticArea {
  margin-block: 100px;
  padding-block: 30px;
  background-image: url('assets/statisticBack.jpg');
}

.Statistic {
  display: flex;
  gap: 50px;
}

.StatisticArea .rightPart,
.StatisticArea .leftPart {
  width: 50%;
}

.StatisticArea .rightPart {
  color: #2C2C2C;
  font-weight: 15px;
  text-align: justify;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.stats .circle {
  position: relative;
  width: 167px;
  height: 167px;
}

.stats svg {
  transform: rotate(-90deg);
}

.stats circle {
  fill: none;
  stroke-width: 20px;
}

.stats circle.bg {
  stroke: #e6e6e6;
}

.stats circle.progress {
  stroke: #0a8f5a;
  stroke-linecap: round;
  stroke-dasharray: 471;
  stroke-dashoffset: 471;
}

.stateContent {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #2C2C2C;
  text-align: center;
  padding-inline: 20%;
}

.percent-text {
  font-size: 22px;
}

.sectionv {
  height: 100vh;
}

.ContactLine {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.ContactLine .icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ContactLine img {
  height: 100%;
  display: block;
}

.ContactLine span {
  color: white;
  width: calc(100% - 20px);
}

.greenHeader,
body.single .header,
body.page-template-blog .header
/* ,body.page .header */ {
  background-color: #006646;
  transform: unset;
  position: unset;
  margin-top: 20px;
}

.greenHeader .menu>li>a,
body.single .header .menu>li>a,
body.page-template-blog .header .menu>li>a
/*,body.page .header .menu>li>a*/ {
  color: white;
}

.greenHeader img,
body.single .header img,
body.page-template-blog .header img
/*,body.page .header img*/ {
  filter: brightness(0) invert(100);
}

.MainSingle {
  display: flex;
  margin-top: 40px;
  gap: 40px;
}

.MainDetails {
  width: 40%;
  display: flex;
  flex-direction: column;
}

.Gallery {
  width: 60%;
  padding-top: 95px;
}

.MainDetails h1 {
  font-weight: normal;
}

.Specs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.spec {
  width: 100%;
  height: 52px;
  display: flex;
  justify-content: space-between;
  padding-inline: 30px;
  align-items: center;
  background-color: #BED62F;
  border-radius: 6px;
  color: #333333;
  gap:10px;
}

.spec:nth-child(2n+1) {
  background-color: #F9A85F;
}

.GalleryContainer {
  width: 100%;
  aspect-ratio: 2;
  display: flex;
  gap: 8px;
  flex-direction: row;
}

/* card */
.flexcard {
  flex: 1;
  /* min-width: 5rem; */
  height: 100%;
  padding: 2rem 0rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  box-shadow: inset 0 -10rem 5rem rgba(0, 0, 0, 0.35);
}

/* content */
.flexcard-content {
  height: 6rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 2rem 1fr;
  column-gap: 2rem;
  overflow: hidden;
}

/* icon */
.flexcard-icon {
  display: none !important;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
  align-self: flex-end;
  transition: width 0.5s ease, height 0.5s ease;
}

/* colors */
.emerald {
  color: #10b981;
}

.amber {
  color: #f59e0b;
}

.indigo {
  color: #6366f1;
}

.rose {
  color: #f43f5e;
}

/* text */
.flexcard-header {
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}

.flexcard-text {
  font-size: 1.25rem;
  line-height: 1.8rem;
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
}

/* active card */
input:checked+.flexcard {
  flex: 4;
}

input:checked+.flexcard .flexcard-header,
input:checked+.flexcard .flexcard-text {
  opacity: 1;
  transform: translateX(0);
}

.TabArea {
  margin-block: 100px 50px;
}

.TabTitles {
  width: calc(100% - 40px);
  display: flex;
  gap: 40px;
  padding-inline: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0px auto;
}

.TabTitles::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.TabTitles {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

.TabTitle {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #363636;
  font-size: 15px;
  background-color: #F9A85F;
  padding: 5px 20px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
  flex: 0 0 auto;
  /* عرض ثابت بر اساس محتوا */
  white-space: nowrap;
}

.TabTitle:hover,
.TabTitle.active {
  background-color: #BED62F;
}

.TabContent {
  width: 100%;
  padding: 30px 50px;
  text-align: justify;
  color: black;
  font-size: 15px;
  background-color: white;
  background: linear-gradient(203deg, rgba(190, 214, 47, 1) 0%, rgba(255, 255, 255, 1) 20%);
  border-radius: 25px;
  font-weight: 300;
  line-height: 2.5;
  display: none;
}

.TabContent.active {
  display: block;
}

.TabContent ul{
  list-style: disc;
}


.LatestPostInSingle {
  margin-block: 50px;
}

.PageHero {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
}

.MainArchive {
  margin-block: 100px;
}

.ProductList {
  margin-block: 30px;
  display: flex;
  gap: 20px;
}

.ProductCard {
  position: relative;
  width: 320px;
  height: 480px;
  background: #006646;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.ProductCard::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #BED62F;
  transform: skewY(345deg);
  transition: 0.5s;
}

.ProductCard:hover::before {
  top: -70%;
  transform: skewY(390deg);
}

.ProductCard::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 600;
  font-size: 6em;
  color: rgba(0, 0, 0, 0.1);
}

.ProductCard .imgBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  z-index: 1;
}

/*
.card .imgBox img {
    max-width: 100%;
    
    transition: .5s;
}

.card:hover .imgBox img {
    max-width: 50%;
      
}
*/
.ProductCard .contentBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}

.ProductCard .contentBox h3 {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0px;
}

.ProductCard .contentBox .price {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
  display: none;
}

.ProductCard .contentBox .buy {
  position: relative;
  top: 100px;
  opacity: 0;
  padding: 10px 30px;
  margin-top: 15px;
  color: #000000;
  text-decoration: none;
  background: #BED62F;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.5s;
}

.ProductCard:hover .contentBox .buy {
  top: 0;
  opacity: 1;
}

.mouse {
  height: 300px;
  width: auto;
}
.BlogSwiper {
	width:100%;
}
.BlogSlider {
  position: relative;
  width: 1200px;
  margin: 0px auto;
  z-index: -1;
}

.sliderContainer {
  height: 555px;

}

.sliderContainer .sliderItem {
  width: 70%;
  left: 15%;
  top: 70px;
  margin: 0px auto;
  padding-top: 36%;
  background-position: center !important;
  background-size: cover !important;
  position: absolute;
  z-index: 9;
  transition: all 500ms ease;
  color: white;
  text-decoration: none;
  border-radius: 15px;
	overflow:hidden;
}

.sliderContainer #c_1 {
  transform: translateX(0) scale(1.2);
  z-index: 99;
}

.sliderContainer #c_2 {
  transform: translateX(-22%) scale(1);
}

.sliderContainer #c_3 {
  transform: translateX(22%) scale(1);
}

.prev,
.next {
  position: absolute;
  color: gray;
  width: 30px;
  height: 30px;
  text-align: center;
  cursor: pointer;
  top: 50%;
}

.prev {
  left: -40px;
}

.next {
  right: -40px;
}

.sliderContent {
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 2;
  padding: 30px;
  box-sizing: border-box;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.53) 60%);
}

.sliderContent h3 {
  font-size: 18px;
  margin: 10px 0px;
  color: white;
}

.sliderContent p {
  color: white;
  font-size: 15px;
  margin: 10px 0px;
}

.BlogArticlesArea {
  display: flex;
  gap: 1.33%;
  flex-wrap: wrap;
  margin-block: 80px;
}

.BlogArticlesArea .Article {
  width: 24%;
  margin-bottom: 30px;
}

.SingleMain {
  margin-block: 60px;
}

.SingleMain h1 {
  color: #3F3F3F;
  font-size: 18px;
}

.SingleImg {
  width: 100%;
  padding-top: 33%;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  ;
}

.SingleContentText {
  font-weight: 300;
  text-align: justify;
  line-height: 2.5;
}

.SingleContentText ul{
	list-style:disc;
}

.search {
  display: none;
}

.MobileMenu {
  position: fixed;
  height: 100vh;
  width: 280px;
  right: 0px;
  top: 0px;
  background-color: rgba(0, 78, 52, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.MobileMenu.active {
  transform: translateX(0);
  /* داخل صفحه */
}

.LogoMenu {
  align-self: center;
}

.LogoMenu img {
  filter: brightness(0) invert(1);
  height: 70px;
}

.MobileMenu ul {
  padding: 0px;
}

.MobileMenu>ul>li>a {
  color: white;
  text-align: right;
  display: block;
  padding-block: 10px;
  margin-inline: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.MobileMenu .menu-item-has-children>a {
  position: relative;
}

.MobileMenu .menu-item-has-children>a::after {
  content: "∨";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  background-color: white;
  color: rgba(0, 78, 52, 1);
  width: 20px;
  height: 20px;
  border-radius: 100px;
  display: grid;
  place-content: center;
  font-weight: bold;
  padding-top: 3px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.MobileMenu .menu-item-has-children.active>a::after {
  transform: translateY(-50%) rotate(180deg);
}

.MobileMenu .sub-menu {
  position: unset;
  transform: translateX(-15px);
  padding-block: 5px;
}

.MobileMenu .sub-menu li a:hover {
  background-color: rgba(122, 118, 118, 0.14);

}

.MobileMenuBackdrop {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 50;
  display: none;
}

.MobileMenuBackdrop.active {
  display: block;
}

.ImagePage {
    width: 100%;
    padding-top: 36%;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    margin-block: 30px;
}

.ContactFormAndText {
    width: 100%;
    display: flex;
    padding-bottom: 50px;
}

.ContactFormAndText .rightPart {
    width: 350px;
    margin-left: 20px;
}

.ContactFormAndText .ContactLine span{
	color:black;
}

.ContactFormAndText .leftPart {
    width: calc(100% - 370px);
    padding-inline: 5%;
}

.ContactFormAndText .leftPart input,
.ContactFormAndText .leftPart textarea {
    font-family: IRANSans;
    resize: none;
}

.ContactFormAndText .rightPart p {
    text-align: justify;
    font-weight: 300;
}

.ContactFormAndText .socials {
    justify-content: end;
    margin-top: 40px;
}

.PageContent{
  text-align: justify;
  font-weight: 300;
}

.ff-btn.ActionButton{
  font-family: 'IRANSans';
  border:none;
}

.AboutSwiper{
	margin-top:50px;
}
.AboutSwiper img{
	width:100%;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:10px;
}
.lang{
	position:relative;
}
.lang-toggle{
	cursor:pointer;
}

.lang-wrapper {
position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  display: none;
  min-width: 100px;
  z-index: 9999;
  transform: translateX(-50%);
	border-radius:10px;
	overflow:hidden;
}

.lang-wrapper li {
    list-style:none;
}

.lang-wrapper li a {
display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 14px;
	color:black;
}

.lang-wrapper.open {
    display: block;
}

.lang-wrapper .current-lang {
	background:rgba(0,0,0,0.3);
}

.lang-wrapper .current-lang a{
	color:white;
}

.lang-wrapper img{
filter:unset !important;	
}

.NewYearSection{
    position: relative;
    padding:120px 20px;
    text-align:center;
    overflow:hidden;
    background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    color:white;
}

.newyear-content{
    position:relative;
    z-index:2;
    max-width:800px;
    margin:auto;
}

.ny-title{
    font-size:48px;
    font-weight:700;
    margin-bottom:20px;
    letter-spacing:1px;
}

.ny-text{
    font-size:18px;
    opacity:.9;
    margin-bottom:40px;
    line-height:1.8;
}

.ny-button{
    display:inline-block;
    padding:14px 34px;
    border-radius:40px;
    background:#ffd700;
    color:#000;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
}

.ny-button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,0,0,.3);
}

.newyear-bg{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.15),transparent 40%),
               radial-gradient(circle at 80% 70%,rgba(255,255,255,.1),transparent 40%);
}

.newyear-decor span{
    position:absolute;
    width:10px;
    height:10px;
    background:#ffd700;
    border-radius:50%;
    animation:nyFloat 6s infinite ease-in-out;
}

.newyear-decor span:nth-child(1){
    left:15%;
    bottom:10%;
}

.newyear-decor span:nth-child(2){
    right:20%;
    bottom:20%;
    animation-delay:2s;
}

.newyear-decor span:nth-child(3){
    left:50%;
    bottom:5%;
    animation-delay:4s;
}

@keyframes nyFloat{
    0%{transform:translateY(0);opacity:.6}
    50%{transform:translateY(-40px);opacity:1}
    100%{transform:translateY(0);opacity:.6}
}

@media(max-width:768px){
    .ny-title{
        font-size:32px;
    }

    .ny-text{
        font-size:16px;
    }
}