*{
   box-sizing:border-box;
   text-decoration:none;
   margin:0;
}
@font-face {
    font-family:Ferdosi;
    src: url('../../app/includes/font/Ferdosi.ttf') format('truetype'),
}
body{
    font-family:Ferdosi;
}
.container .msg{
	background:red;
	opacity:.5;
	width:90%;
	height:20px;
	border-radius:8px;
	margin:auto;
	margin-top:5px;
	padding-right:8px;
	color:black;
	opacity:0.5;
	font-size:16px;
}
.container .success {
	background:darkcyan;
	opacity:.5;
	width:90%;
	height:20px;
	border-radius:8px;
	margin:auto;
	margin-top:5px;
	padding-right:8px;
	color:black;
	opacity:0.5;
	font-size:16px;
}
.container .part-two {
	width:90%;
	height:auto;
	margin:0 auto;
	margin-top:20px;
	display:flex;
	position:relative;
}
.container .part-two .div1{
	width:65%;
	height:650px;
	border-radius:8px;
	margin-left:3%;	
}
/* here start the image slider part */
      .mySlides {
        display: none;
      }
      .part-two .div1 .mySlides img {
		border-radius:8px;
        vertical-align: middle;
		height:29rem;
      }
      .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
      }
    

      /* Next & previous buttons */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        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 {
        left: 0;
        border-radius: 3px 0 0 3px;
      }
	  .prev {
		  right:0;  /* this part added by me */
	  }
      /* 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: black;
        font-size: 18px;
        padding: 8px 12px;
        position: absolute;
        bottom: -100px;  /* this part add by me */
        width: 100%;
        text-align: center;
		direction:rtl;
		unicode-bidi:bidi-override;
      }
      /* Number text (1/3 etc) */
      .numbertext {
        color: #ffffff;
        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: #999999;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }
      .active,
      .dot:hover {
        background-color: #111111;
      }
      /* Fading animation */
      .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
      }
/* here start the new */
.container .part-two .div2 {
    width: 30%;
    height: 650px;
    border-radius: 8px;
    direction: rtl;
    unicode-bidi: bidi-override;
    display: flex;
    justify-content: center;
    align-items: center;
}

.part-two .div2 .download-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.part-two .div2 .download-section .box {
    width: 100%;
    height: 120px;
    margin: 5px;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center; /* Centering content vertically */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Adjust the image and text layout */
.part-two .div2 .download-section .box img {
    width: 30%; /* Adjust as needed */
    height: 100%;
    border-radius: 8px;
    object-fit: cover; /* Ensures the image fits well */
}

.part-two .div2 .download-section .box h3 {
    width: 70%; /* Adjust as needed */
    padding: 18px; /* Adjust padding as needed */
    margin: 0; /* Remove default margin */
    text-align: right; /* Align text to the right */
}

.heading {
	width:90%;
	margin:auto;
	margin-top:30px;
	padding-right:8px;
	border-right:5px solid darkcyan;
}
.container .part-three {
  max-width: 90%;
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.container .part-three .main {
  width: 16rem; /* Default size for larger screens */
  height: 20rem;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 5px 5px 15px lightblue;
}

.container .part-three .main .image {
  width: 100%;
  height: 60%;
  border-radius: 8px;
}

.container .part-three .main .text-main {
  width: 100%;
  height: 40%;
}

.container .part-three .main .title {
  width: 100%;
  height: 80%;
  padding-top: 5px;
  text-align: center;
}

.container .part-three .main .title a {
  padding-top: 5px;
  color: white;
}

.container .part-three .main .title a:hover {
  color: darkcyan;
}

.container .part-three .main .date {
  width: 100%;
  height: 20%;
  //padding: 5px;
  color: white;
  text-align: center;
}

.container .part-three .main .image img {
  border-radius: 8px;
  filter: grayscale(1);
}

.container .part-three .main:hover .image img {
  filter: grayscale(0);
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  .container .part-three {
    flex-direction: column; /* Stack items vertically */
    align-items: center;
  }

  .container .part-three .main {
    width: 90%; /* Make items take full width on smaller screens */
    margin: 10px auto;
  }
}

.container .part-four {
	max-width:100%;
	background:url('../images/image_enlight/2.jpg') no-repeat top center ;
	background-size: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
	
}
.container .part-four .box  {
	width:90%;
	margin:auto;
	Position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.container .part-four .box .one {
	background:#eee;
	width:80%;
	height:400px;
	border-radius:8px;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
	direction:rtl;
	unicode-bidi:bidi-override;
	box-shadow:5px 5px 5px #fff;
}
.container .part-four .box .one img {
	width:50%;
	height:400px;
	border-radius:8px;
	float:right;
}
.container .part-four .box .one .one-text {
	width:50%;
	height:400px;
	padding:20px;
	color:black;
	font-size:15px;
	float:left;
	
}
.container .part-four .box .one .one-text .title {
	text-align:center;
}
.container .part-four .box .one .one-text .content {
	text-align:center;
	padding-top:12px;
}
.container .part-four .box .two {
	width:80%;
	height:auto;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;	
}
.container .part-four .box .two .main-sp {
	width:250px;
	height:350px;
	//border:2px solid red;
	border-radius:8px;
	margin:10px;
	box-shadow:5px 5px 15px lightblue;
}
.container .part-four .box .two .main-sp img {
	width:100%;
	height:200px;
	border-radius:8px;
}
.container .part-four .box .two .main-sp .text-sp{
	width:100%;
	height:150px;
	//border:2px solid pink;
	text-align:center;
	font-size:15px;
	direction:rtl;
	unicode-bidi:bidi-override;	
	background:#fff;
	border-radius:0 0 8px 8px;
}
.container .part-four .box .two .main-sp .text-sp .title {
	height:80%;
	padding:12px;
}
.container .part-four .box .two .main-sp .text-sp .title a {
	color:black;
}
.container .part-four .box .two .main-sp .text-sp .title a:hover{
	color:darkcyan;
}
.container .part-four .box .two .main-sp .text-sp .date{
	height:20%;
	padding:2px;
}
/*       slide card              */	
.part-five {
	width:90%;
	//border:2px solid black;
	margin:auto;
	margin-top:10px;
}  
.wrapper {
	max-width: 1100px;
	width:100%;
	position:relative;
	direction:ltr;
	unicode-bidi:bidi-override;
}
.wrapper i{
	height:50px;
	width:50px;
	background:#fff;
	text-align:center;
	line-height:50px;
	border-radius:50%;
	cursor:pointer;
	position:absolute;
	top:50%;
	font-size:1.25rem;
	transform:translateY(-50%);
	box-shadow:0 3px 6px rgba(0,0,0,0.23)
}
.wrapper i:first-child{
	left:-22px;
}
.wrapper i:last-child{
	right:-22px;
}
.wrapper .carousel {
	display:grid;
	grid-auto-flow: column;
	grid-auto-columns:calc((100% / 3) - 12px);
	gap:16px;
	//overflow:hidden;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	Scrollbar-width:0;
}
.carousel .no-transition {
	scroll-behavior:auto;
}
.carousel::-webkit-scrollbar {
	display:none;
}
.carousel .dragging {
	scroll-snap-type:none;
	scroll-behavior:auto;
}
.carousel .dragging .card {
	cursor:grab;
	user-select:none;
}
.carousel :where(.card, .img) {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.carousel .card {
	scroll-snap-align:start;
	height:342px;
	list-style:none;
	background:darkcyan;
	border-radius:8px;
	display:flex;
	cursor:pointer;
	padding-bottom:15px;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.card .img {
	background:#8B53FF;
	width:148px;
	height:148px;
	border-radius:50%;
}
.card .img img{
	width:140px;
	height:140px;
	object-fit:cover;
	border-radius:50%;
	border:4px solid #fff;
}
.card h2 {
	font-weight:500;
	font-size:1.56rem;
	margin:30px 0 5px;
}
.card span{
	color:#6a6d78;
	font-size:1.3rem;
}
.part-six {
	max-width:100%;
	height:auto;
	//border:2px solid black;
	margin-top:10px;
    background:url('../images/image_enlight/2.jpg') no-repeat top center ;
	background-size: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.part-six .video-panal {
	max-width:90%;
	//border:2px solid pink;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	//align-items:center;
	//justify-content:center;
	gap:40px;
}
.part-six .video-panal .sub-box {
    max-width:360px;
	margin:20px;
	//border:2px solid purple;
}
.part-six .video-panal .sub-box .bg-vdo {
	width:100%;
	height:300px;
    border:none;
}
.part-six .video-panal .sub-box .bg-vdo iframe {
	width:100%;
	height:100%;
	border:none;
	border-radius:8px;
}
.part-six .video-panal .sub-box .lte-vdo {
	width:100%;
	height:250px;
	//border:2px solid yellow;
}
.part-six .video-panal .sub-box .lte-vdo .one-text p,
.part-six .video-panal .sub-box .lte-vdo .two-text p {
	color:black;
}
.part-six .video-panal .sub-box .lte-vdo > div {
	margin-top:5px;
	margin-bottom:5px;
}
.part-six .video-panal .sub-box .lte-vdo .lte-one, 
.part-six .video-panal .sub-box .lte-vdo .lte-two {
	width:100%;
	height:125px;
	//border:2px solid darkcyan;
}
.part-six .video-panal .sub-box .lte-vdo .lte-one .one-video {
	width:50%;
	height:100%;
	float:right;
}
.part-six .video-panal .sub-box .lte-vdo .lte-one .one-text {
	width:50%;
	height:100%;
	//border:2px solid red;
	padding:2px;
	color:violet;
	text-align:center;
	float:left;
}
.part-six .video-panal .sub-box .lte-vdo .lte-one .one-video iframe,
.part-six .video-panal .sub-box .lte-vdo .lte-two .two-video  iframe{
	width:100%;
	height:100%;
	border:none;
	border-radius:8px;
}
.part-six .video-panal .sub-box .lte-vdo .lte-two .two-video {
	width:50%;
	height:100%;
	float:right;
} 
.part-six .video-panal .sub-box .lte-vdo .lte-two .two-text {
	width:50%;
	height:100%;
	//border:2px solid red;
	padding:2px;
	color:violet;
	text-align:center;
	float:left;
}
.part-six .pad-cast{
	max-width:90%;
	margin:auto;
	margin-top:10px;
	//border:2px solid green;
	display:flex;
	flex-wrap:wrap;
	justify-content:start;
}
.part-six .pad-cast .cast-one, .cast-two {
	width:48.5%;
	height:180px;
	margin:2px;
	//border:2px solid green;
}
.part-six .pad-cast .cast-one p, .cast-two p{
	text-align:center;
	font-size:25px;
	padding-right:2px;
}
.part-six .pad-cast .cast-one audio , .cast-two audio{
	width:100%;
}
.part-seven {
	width:90%;
	margin:auto;
	margin-top:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:start;
}
.part-seven .seven-three {
    background:black url('../images/image_enlight/texture2.jpg') no-repeat top center;
	background-size:100% 100%;
	color:#fff;
	padding-top:220px;
	unicode-bidi:bidi-override;
	text-align:center;
}
.part-seven .seven-one, .part-seven .seven-two, .part-seven .seven-three {
	width:100%;
	margin:5px;
}

.part-seven .seven-one p a , .seven-two p a {
	color:white;
}
.part-seven .seven-one p, 
.part-seven .seven-two p{
	height:40px;
	padding-right:10px;
	border-bottom:1px solid #efefef;
}
.part-seven .seven-one p:last-child, 
.part-seven .seven-two p:last-child {
	border:none;
}
.part-seven .seven-one p a:hover, 
.part-seven .seven-two p a:hover {
	color:darkcyan;
	cursor:pointer;
	word-spacing:2px;
	letter-spacing:5px;
}

.part-eight {
    padding: 20px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(44%2c 66%2c 61%2c 1)'%3e%3c/rect%3e%3cpath d='M749.46 608.24C869.22 585.26 885.21 312.17 1111.38 281.25 1337.56 250.33 1366.57 61.06 1473.31 51.65' stroke='rgba(230%2c 231%2c 232%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M210.83 590.98C380.68 585.56 496.54 336.42 836.56 325.39 1176.57 314.36 1292.12 62.2 1462.28 56.59' stroke='rgba(230%2c 231%2c 232%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M693.73 661.68C844.79 643.43 937.39 304.09 1185.97 303.74 1434.56 303.39 1543.68 517.31 1678.22 522.14' stroke='rgba(230%2c 231%2c 232%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M201.57 620.65C362.57 567.26 389.93 110.83 633.41 97.33 876.9 83.83 849.33 167.33 1065.26 167.33 1281.18 167.33 1387.73 97.56 1497.1 97.33' stroke='rgba(230%2c 231%2c 232%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3cpath d='M421.86 578.69C528.21 571.38 496.81 373.05 791.98 366.92 1087.15 360.79 1341.13 178.04 1532.21 176.52' stroke='rgba(230%2c 231%2c 232%2c 0.58)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.part-eight .main {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-between; /* Space between items */
}

.part-eight .main .container {
    flex: 1 1 1 18%; /* Flex-grow, flex-shrink, and basis */
    margin: 10px; /* Space between items */
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center text */
    padding: 10px; /* Padding inside the box */
    
}

.part-eight .main .container img {
    border-radius:50%;
    width:100px; /* Responsive image */
    height: 100px; /* Maintain aspect ratio */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border:4px solid #fff;
}

.part-eight .main .container p {
    margin-top: 10px; /* Space between image and text */
    font-size: 18px; /* Font size for text */
    color: black; /* Dark text color */
}

.container .part-nine {
  max-width: 90%;
  margin: auto;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.container .part-nine .main {
  width: 16rem; /* Default size for larger screens */
  height: 20rem;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 5px 5px 15px lightblue;
}

.container .part-nine .main .image {
  width: 100%;
  height: 60%;
  border-radius: 8px;
}

.container .part-nine .main .text-main {
  width: 100%;
  height: 40%;
}

.container .part-nine .main .title {
  width: 100%;
  height: 80%;
  padding-top: 5px;
  text-align: center;
}

.container .part-nine .main .title a {
  padding-top: 5px;
  color: white;
}

.container .part-nine .main .title a:hover {
  color: darkcyan;
}

.container .part-nine .main .date {
  width: 100%;
  height: 20%;
  //padding: 5px;
  color: white;
  text-align: center;
}

.container .part-nine .main .image img {
  border-radius: 8px;
}



/* Media Query for smaller screens */
@media (max-width: 768px) {
  .container .part-nine {
    flex-direction: column; /* Stack items vertically */
    align-items: center;
  }

  .container .part-nine .main {
    width: 90%; /* Make items take full width on smaller screens */
    margin: 10px auto;
  }
}
/* Responsive styles */
@media (max-width: 768px) {
    .part-eight .main .container {
        flex: 1 1 100%; /* Full width on small devices */
    }
}

/*media q*/
@media (max-width:878px){
	.container .part-two {
		display:block;
	}
	.container .part-two .div1 {
		width:100%;
		margin-bottom:15px;
	}
	.container .part-two .div1 .mySlides img {
		height:18rem;
	}
	.container .part-two .div2 {
		width:100%;
	}
	.container .part-two .div2 .button-class {
		margin:auto;
		text-align:center;
	}
	
}
/* now star image slider */
      @-webkit-keyframes fade {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
      @keyframes fade {
        from {
          opacity: .4
        }
        to {
          opacity: 1
        }
      }
      
 @media only screen and (max-width: 300px) {
        .prev,
        .next,
        .text {
          font-size: 8px;
        }
      }
@media (max-width: 768px) {
    .container .part-three {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }

    .container .part-three .main {
        width: 90%; /* Make the main items take up more width */
        max-width: 16rem; /* Keep the max width for larger screens */
    }
    .container .part-nine {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }

    .container .part-nine .main {
        width: 90%; /* Make the main items take up more width */
        max-width: 16rem; /* Keep the max width for larger screens */
    }
}

@media (max-width:878px){
	.container .part-four .box .one {
		height:auto;
	}
	
	.container .part-four .box .one img {
		width:100%;
		clear:both;
	}
	.container .part-four .box .one .one-text {
		width:100%;
		height:250px;
		font-size:8px;
		clear:both;
	}
		.container .part-four .box .one .one-text .title {
		    font-size:13px;
		}
	.container .part-four .box .two .main-sp {
		width:100%;
		height:20rem;
		font-size:15px;
	}
	.container .part-four .box .two .main-sp .img-sp {
		width:50%;
		float:right;
	}
	.container .part-four .box .two .main-sp .img-sp img {
		width:100%;
		height:100%;
	}
	.container .part-four .box .two .main-sp .text-sp {
		width:50%;
		float:left;
	}
	.container .part-four .box .two .main-sp .text-sp .title{
		width:100%;
		height:80%;
		//border:2px solid red;
	}
	.container .part-four .box .two .main-sp .text-sp .date {
		width:100%;
		height:20%;
		//border:2px solid blue;
	}
}
@media (max-width: 480px) {
    .container .part-four .box .one {
        height: auto;
    }

    .container .part-four .box .one img {
        width: 100%;
        clear: both;
    }

    .container .part-four .box .one .one-text {
        width: 100%;
        height: auto; /* Adjust height for smaller screens */
        font-size: 10px; /* Smaller font size */
        clear: both;
    }

    .container .part-four .box .one .one-text .title {
        font-size: 15px; 
    }

    .container .part-four .box .two .main-sp {
        width: 100%;
        height: auto; 
        font-size: 12px; 
    }

    .container .part-four .box .two .main-sp .img-sp {
        width: 100%; 
        float: none; 
    }

    .container .part-four .box .two .main-sp .img-sp img {
        width: 100%;
        height: auto; 
    }

    .container .part-four .box .two .main-sp .text-sp {
        width: 100%; 
        float: none; 
    }

    .container .part-four .box .two .main-sp .text-sp .title {
        width: 100%;
        height: auto; 
    }

    .container .part-four .box .two .main-sp .text-sp .date {
        width: 100%;
        height: auto; 
    }
}
.carousel.dragging {
  cursor: grabbing;
  scroll-behavior: auto !important;
}

.no-transition {
  scroll-behavior: auto !important;
}

