* {box-sizing : border-box; margin: 0px; padding: 0px;}
		html{ font-family : "Lucida Sans" , sans-serif; direction: rtl;}
@font-face {
  font-family: 'MyFontName';
  src: url('fonts/Vazir/Vazir-Black-FD.eot'); /* IE9 Compat Modes */
  src: url('fonts/Vazir/Vazir-Black-FD.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Vazir/Vazir-Black-FD.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/Vazir/Vazir-Black-FD.woff') format('woff'), /* Pretty Modern Browsers */
         url('fonts/Vazir/Vazir-Black-FD.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/Vazir/Vazir-Black-FD.svg#svgFontName') format('svg'); /* Legacy iOS */}
h1, h2, h3, h4, h5{font-family : "MyFontName";}
.header{background-color : #8f4f25; color : #ffffff; padding : 2px;}
.ContainerOptions {display: flex; justify-content: space-around; background-color: #ffff00; padding: 4px; font-family: 'MyFontName';}
.Options{background-color: #000000; color: white; padding: 3px; margin: 0.1px; border-radius: 4px; font-size: 10pt; width: 22%; display: flex; Justify-content: center;}
.MainOptions{color: white; padding: 3px; margin: 0.1px; border-radius: 4px; font-size: 10pt; width: 22%; display: flex; Justify-content: center;}
.patterns{display: flex;  flex-direction: row; flex-wrap: wrap; padding: 4px;}

		[class*="col-"]{float : left;padding : 15px;}
		[class*="col-"]{width : 100%;}
		@media only screen and (min-width:600px){
			.col-m-1{width:8.33%;}
			.col-m-2{width:16.66%;}
			.col-m-3{width:25%;}
			.col-m-4{width:33.33%;}
			.col-m-5{width:41.66%;}
			.col-m-6{width:50%;}
			.col-m-7{width:58.33%;}
			.col-m-8{width:66.66%;}
			.col-m-9{width:75%;}
			.col-m-10{width:83.33%;}
			.col-m-11{width:91.66%;}
			.col-m-12{width:100%;}}
		@media only screen and (min-width:768px){
			.col-1{width:8.33%;}
			.col-2{width:16.66%;}
			.col-3{width:25%;}
			.col-4{width:33.33%;}
			.col-5{width:41.66%;}
			.col-6{width:50%;}
			.col-7{width:58.33%;}
			.col-8{width:66.66%;}
			.col-9{width:75%;}
			.col-10{width:83.33%;}
			.col-11{width:91.66%;}
			.col-12{width:100%;}}
		.row:after {content : ""; clear : both; display : block; }

/* number of images*/                                                                                /**************  Circular Slider **************/
.gallery {--s: 100px; left: 4px; /* control the size */ --d: 50s; /* animation duration */
  display: grid; width: var(--s); aspect-ratio: 1; overflow: hidden; padding: calc(var(--s)/20); border-radius: 50%; position: relative; clip-path: circle(49.5%);
  /* to avoid a few glitch caused by overflow: hidden */}
.gallery::after {content: ""; position: absolute; inset: 0; padding: inherit; border-radius: inherit;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;}
.gallery > img {grid-area: 1/1; width: 100%; height: 86%; object-fit: cover; border-radius: inherit; transform-origin: 50% 196.1902200082%;}
.gallery::after,
.gallery > img {animation: m var(--d) infinite cubic-bezier(0.5, -0.2, 0.5, 1.2);}
.gallery > img:nth-child(2) {animation-delay: calc(-0.1111111111*var(--d));}
.gallery > img:nth-child(3) {animation-delay: calc(-0.2222222222*var(--d));}
.gallery > img:nth-child(4) {animation-delay: calc(-0.3333333333*var(--d));}
.gallery > img:nth-child(5) {animation-delay: calc(-0.4444444444*var(--d));}
.gallery > img:nth-child(6) {animation-delay: calc(-0.5555555556*var(--d));}
.gallery > img:nth-child(7) {animation-delay: calc(-0.6666666667*var(--d));}
.gallery > img:nth-child(8) {animation-delay: calc(-0.7777777778*var(--d));}
.gallery > img:nth-child(9) {animation-delay: calc(-0.8888888889*var(--d));}
@keyframes m {
  0%, 3% {transform: rotate(0);}
  9.1111111111%, 14.1111111111% {transform: rotate(-40deg);}
  20.2222222222%, 25.2222222222% {transform: rotate(-80deg);}
  31.3333333333%, 36.3333333333% {transform: rotate(-120deg);}
  42.4444444444%, 47.4444444444% {transform: rotate(-160deg);}
  53.5555555556%, 58.5555555556% {transform: rotate(-200deg);}
  64.6666666667%, 69.6666666667% {transform: rotate(-240deg);}
  75.7777777778%, 80.7777777778% {transform: rotate(-280deg);}
  86.8888888889%, 91.8888888889% {transform: rotate(-320deg);}
  98%, 100% {transform: rotate(-360deg);}}                                                        /*-------------- End of Circular Slider --------------*/	
  
                                                            /* *********************************** Rectangle Slider ***********************************/
/* Slideshow container */
.slideshow-container {max-width: 1000px; position: relative; margin: auto; border-radius: 8px;}
/* Hide the images by default */
.mySlides {display: none;}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {right: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {background-color: #717171;}
/* Fading animation */
.fade {animation-name: fade; animation-duration: 1.5s;}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
                                                              /* *********************************** End of Rectangle Slider ***********************************/
/* *********************************** Horizontal Scrolling ***********************************/
.item, .item2, .item3 {display: flex; flex-direction: column; padding: 0.1em; margin: 0.2em; border-radius: 0.25em; scroll-snap-align: start; scroll-margin-inline: 0;} 
.item {min-width: 18%;} 
.item2 {min-width: 60%; background-color: rgba(256, 256, 256, 0.4);} 
.item3 {min-width: 30%; background-color: rgba(256, 256, 256, 0.4);} 



.list, .list2, .list3 {width: 100%; height: auto; display: flex; overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0.5em; border-radius: 0.5em; scroll-snap-type: x mandatory; direction: rtl; gap: 0.15em;} 
.list2, .list3 {background-color: rgba(235, 245, 251, 0.7);} 




/* پروژه های طبیعت و تاریخ (به حالت ایستاده) */
.list2-Proj {width:100%; height: 120%; overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:5px 0;margin:0;background:rgba(235,245,251,0.7);-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;direction:rtl;}
.item2-Proj {display:inline-block;width:260px;height:300px;margin:0 10px;border-radius:12px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#f5f5f5;}
.item2-Proj img {width:100%;height:100%;object-fit:cover;display:block;}
.itemTitle2 {padding:8px;font-size:16px;text-align:center;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.custom-link {text-decoration:none;color:inherit;display:block;}
@media (max-width:768px) {.item2-Proj {width:200px;margin:0 4px;}.item2-Proj img {width:100%;height:100%;border-radius:8px;object-fit:contain;} .list2-Proj {width:100%; height: 140%;}}
/*پایان  پروژه های طبیعت و تاریخ (به حالت ایستاده) */






.itemImage {width: 100%; max-width: 100px; aspect-ratio: 1 / 1; object-fit: contain;} 

.itemVideo {width: 100%; max-width: 600px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.25em; margin-top: 0.1em; margin-bottom: 0.1em;} 
.itemVideo3 {width: 100%; max-width: 600px; max-height: 800px; aspect-ratio: auto; object-fit: cover; border-radius: 0.25em; margin-top: 0.1em; margin-bottom: 0.1em;} 
.itemTitle, .itemTitle2, .itemTitle3 {color: #000000; margin-top: 0.1em; margin-bottom: 0.1em; text-align: center;}

@media (max-width: 800px) {
  .item, .item2, .item3 {padding: 0.2em; margin: 0.3em;} 
  .item {min-width: 30%;} 
  .item2 {min-width: 80%;} 
  .item3 {min-width: 40%;} 
  .itemImage {max-width: 87px;} 
  .itemVideo {max-width: 650px;} 
  .itemVideo3 {max-width: 650px;} 
  .list, .list2, .list3 {gap: 0em;}
}

.itemImage2 {
  width: 100%;
  max-width: 500px; /* عرض بزرگ‌تر */
  aspect-ratio: 3 / 6; /* نسبت طول به عرض، با افزایش ارتفاع */
  object-fit: cover; /* تنظیم تناسب تصویر */
  border-radius: 15px; /* لبه‌های گرد */
  margin: 0.5em; /* فاصله بین عناصر */
}

.itemImageRounded {
  width: 100%; 
  max-width: 400px; /* عرض بزرگ‌تر */
  aspect-ratio: 3 / 4; /* نسبت طول به عرض (یا هر نسبتی که مدنظر دارید) */
  object-fit: cover; /* نمایش مناسب تصویر */
  border-radius: 15px; /* لبه‌های گرد */
  margin: 0.5em; /* فاصله بین عناصر */
}

.listStor {width: 100%; height: auto; display: flex; overflow-x: auto; overflow-y: hidden; margin: 0; padding: 0.5em; border-radius: 0.5em; scroll-snap-type: x mandatory; direction: rtl; gap: 1.7em; white-space: nowrap;} 
.itemStor {display: flex; flex-direction: column; padding: 0.1em; margin: 0.3em; border-radius: 0.25em; scroll-snap-align: start; scroll-margin-inline: 0.5em;} 
.itemImageStor {width: 100%; max-width: 100px; aspect-ratio: 1 / 1; object-fit: contain;} 
.itemTitleStor {color: #000000; margin-top: 0.1em; margin-bottom: 0.1em; text-align: center;}
/* *********************************** End of Horizontal Scrolling ***********************************/