﻿
/*panels=============================================*/
.panel-header {
    text-align: right;
	margin-bottom:2rem;
}
.panel-header i {
    font-size: small;
}

.panel-header span {
    font-size: small;
}
/* 
    .panel-header h4 {
        position: relative;
        display: inline;
        color: #0C426F;
        font-size: 1.5em;
       text-align:right;
    }
	  .footer-part .panel-header h4 {
        position: relative;
        display: inline;
        color: #ffff;
        font-size: 1.5em;
       text-align:right;
    }
	 */
 .section-3 .panel-header  a {
      
        color: #fff !important;
        font-size: 1em;
      
    }
	
        .panel-header h4:after {
            content: '';
            width:100%;
            height: 2px;
            background: #86b7fe;
            position: absolute;
            right: 0;
            top: 100%;
            transition: all ease-in .3s;
        }

.panel-header h4:hover:after {
    width: 100%;
    transition: all ease-in .3s;
}





/*carousel-effect====================================*/
.carousel-zoom .carousel-inner {
    position: relative;
}

.carousel-zoom .carousel-item {
    opacity: 0;
    transform: scale(1.2); /* ابتدا کمی بزرگ‌تر */
    transition: opacity 1.2s ease, transform 1.2s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.carousel-zoom .carousel-item.active {
    opacity: 1;
    transform: scale(1); /* هنگام فعال شدن، اندازه واقعی */
    position: relative;
    z-index: 2;
}

.carousel-blur-fade .carousel-inner {
    position: relative;
}

.carousel-blur-fade .carousel-item {
    opacity: 0;
    transition: opacity 1.2s ease, filter 1.2s ease;
    filter: blur(8px);
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.carousel-blur-fade .carousel-item.active {
    opacity: 1;
    filter: blur(0);
    position: relative;
    z-index: 2;
}

.carousel-3d .carousel-inner {
    perspective: 1200px;
    position: relative;
}

.carousel-3d .carousel-item {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    opacity: 0;
    transform: rotateY(90deg);
    transition: transform 1s ease, opacity 1s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.carousel-3d .carousel-item.active {
    opacity: 1;
    transform: rotateY(0deg);
    position: relative;
    z-index: 2;
}


/*login=====================================================*/


#alone-page::before {
    content: "";
    position: absolute;
    background-color: aqua;
    background: url('img/back8.svg') no-repeat center top;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.2;
    right: 0;
}







.card-header {
    text-align:center;
    background-color:#FFF;
    border-bottom:none!important;
}


    .card-header::after {
        content: "";
        position: absolute;
        width: 30%;
        height: 3px;
        background-color: #f9c412;
        top: 2.3rem;
        text-align: center;
        left: 35%;
    }



.form-check-input {
    border: #f9c413 2px solid;
}
    .form-check-input:checked {
        background-color: #f9c413;
        color: black;
        border: #FFF 2px solid;
    }

    .btn-color-2 {
        font-size: 1rem;
        color: #e3af00;
        border: 2px solid #e3af00;
        border-radius: 34px;
        background-color: transparent;
        transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
        overflow: hidden;
    }

.btn-color-2 :hover{
    color: #163247;
    box-shadow: 0 0px 20px #801336;
}



.form-control {
    border-radius: 50px;
}







.input-group-text {
    color: white;
    border-radius: 50%;
    background: rgb(255,237,179);
    background: linear-gradient(90deg, rgba(255,237,179,1) 7%, rgba(249,196,19,1) 83%);
    border: 0;
    
    
}







.card1::after {
    content: "";
    position: absolute;
    background-color: aqua;
    background: url('img/c1.svg') no-repeat center top;
    width: 60%;
    height: 60%;
    top: 4rem;
    opacity:0.3;
    
}





.card1 {
    overflow: hidden;
    border-left:none;
}




.card-msg::after {
    content: "";
    position: absolute;
    width: 130%;
    height: 130%;
    background-color: #f9c413;
    top:-3rem;
    border-radius: 12%;
    transform: rotate(35deg);
    right: -60%;
    padding:;
}



.card-msg::before {
    content: "";
    position: absolute;
    width: 130%;
    height: 130%;
    background-color: #ffde72;
    top:-3rem;
    border-radius: 12%;
    transform: rotate(35deg);
    right: -56%;
}




.cardmg {
    z-index:1050;
    margin-top:5rem;
}










@media (max-width: 1215px) {
    .card-msg::after {
        top: -5rem;
        right: -70%;
    }

    .card-msg::before {
        top: -5rem;
        right: -65%;
    }

    .Msglogin {
        margin-top: 10%;
        width: 60%;
        font-size: 0.5rem;
    }

    .card1::after {
        top: 5rem;
    }
}


@media (max-width: 764px) {
    .card-msg::after {
        right: -100%;
        border-radius: 60px;
        top: -8rem;
    }

    .card-msg::before {
        right: -95%;
        top: -8rem;
        border-radius: 60px;
    }

    .Msglogin {
        margin-top: 50%;
        width: 60%;
        font-size: 0.5rem;
    }

    .card1::after {
        top: 11rem;
    }
}


@media (max-width: 570px) {
    .card-msg::after {
        top: 1rem;
        right: -70%;
    }

    .card-msg::before {
        top: 1rem;
        right: -65%;
    }

    .Msglogin {
        margin-top: 10%;
        width: 60%;
        font-size: 0.5rem;
    }

    .card1::after {
        top: 5rem;
    }
}













/*






.card {
    background: rgba( 255, 255, 255, 0.15 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}




#alone-page::before {
    content: "";
    position: absolute;
    background-color: aqua;
    background: url('img/back8.svg') no-repeat center top;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0.2;
}







@keyframes a1 {
    10% {
        right: 11rem;
    }
    20% {
        right: 11.3rem;
    }

    30% {
        right: 11rem;
    }

    40% {
        right: 11.3rem;
    }

    50% {
        right: 11rem;
    }

    60% {
        right: 11.33rem;
    }

    70% {
        right: 11rem;
    }

    80% {
       
        right: 11.3rem;
    }
    90% {
        right: 11rem;
    }

    100% {
        right: 11.3rem;
    }
}


@keyframes a2 {
    10% {
        right: 14.5rem;
    }
    20% {
        right: 14rem;
    }
    30% {
        right: 14.5rem;
    }

    40% {
        right: 14rem;
    }
    50% {
        right: 14.5rem;
    }

    60% {
        right: 14rem;
    }
    70% {
        right:14.5rem;
    }

    80% {
        right: 14rem;
    }
    90% {
        right: 14.5rem;
    }
    100% {
        right: 14rem;
    }
}




.card1 {
    border: none;
}



    .card-msg::after {
        content: "";
        position: absolute;
        background-color: aqua;
        background: url('img/30.png') no-repeat center top;
        width: 100% !important;
        height: 100%;
        top: 0;
        right: 11rem;
        z-index: 1050;
        animation: a1 10s infinite;
        width:100%;
    }


    .card-msg::before {
        content: "";
        position: absolute;
        background-color: aqua;
        background: url('img/31.png') no-repeat center top;
        width: 100% !important;
        height: 100%;
        top: 0;
        right: 14rem;
        z-index: 1050;
        animation: a2 10s infinite;
       
    }


.cardmg {
    background-color: #f9c413;
}


.Msglogin {
    margin-top:5rem;
}


.card {
    overflow:hidden;
}
*/
/*========================================================*/
/*
   .top-slider .carousel-caption h5 {

		right:-100%;
		top:0;
        font-size: 1rem;
        font-weight: bold;
        color: #00103c;
        margin-right:0;
		padding:1rem;
		padding-top:30vh;
		text-align:right;
		background-color:rgba(135, 183, 255, 0.6);
		position:absolute;
		height:100%;
		transition:all 1s;
		
    }

    .top-slider:hover .carousel-caption h5 {
		right:0;
		top:0;
        font-size: 1rem;
        font-weight: bold;
        color: #00103c;
        margin-right:0;
		padding:1rem;
		padding-top:30vh;
		text-align:right;
		background-color:rgba(135, 183, 255, 0.6);
		position:absolute;
		height:100%;
		transition:all 1s;
    }
    .top-slider .carousel-caption p {
        font-size: 1rem;
        font-weight: bolder;
        color: #0DAABF;
        padding: 10px;
        text-align: right;
    }
*/
/*itemtype==============================================*/
.item-type {
}
.item-type .item{
	margin:1.5em;
	
}
.item-type h3 {
    padding:1em;
	font-size:.9em;
}
    .item-type img {
        width: 50%;
    }
.item-type a{
	text-align:center;
}



/*category==============================================*/
.item-cat .row{
   
    border-radius: 2em;
    background: rgba(255,255,255,.9);
	padding:1em;
}

.item-cat h3 {
    padding:1em;
}

.item-cat img {
    width: 20%;
}

.item-cat a {
    text-align: center;
}
/**/
.item-cat2 #owl-2{
   
    border-radius: 2em;
    background: rgba(255,255,255,.9);
	
}

.item-cat2 #owl-2 h5 {
   
	font-size:1rem !important;
}

.item-cat2 #owl-2 img {
    width: 30%;
}

.item-cat2 a {
    text-align: center;
}


/*blogs=======================================*/
.blog .card {
    height: 100%;
    max-height: 100%;
}
.blog .item {
    height: 700px;
    max-height: 700px;
}

.hr-blog .card {
    height: 100%;
    max-height: 100%;
	background:#FFF;
}
/*products=======================================*/
.product .card {
    height: 100%;
    max-height: 100%;
}

.product .item {
    height: 450px;
    max-height: 600px;
}

.hr-product .card {
    height: 100%;
    max-height: 100%;
    background: #FFF;
}
/*main-menu=====================================================*/
.main-menu li a {
    color: #12121d;
    font-size: small;
}
.main-menu li a i{
    color: #000;
    font-size:xx-small;
}
/*Vertical SubMenu================================================*/
/*.vertical-nav .dropdown-submenu {
    position: relative;
}


.vertical-nav .nav .nav-link a {
    color: #bababa;
}

.vertical-nav .nav .nav-link {
    color: #bababa;
}*/

/*.vertical-nav .nav .nav-link a:hover {
    color: black;
}*/
/*.drop*/


 .nav-item.active .nav-link, .nav-item:hover .nav-link{
		color:#FFF !important;
}
.drop  .dropdown-menu .nav-item:hover{
	background-color:#FFF !important;
	color:#fff !important;
}
.drop  .dropdown-menu .nav-link:hover{
	
	color:#fff !important;
}
.drop  .dropdown-menu .nav-link{
		font-size:1rem;
	 margin-right: 10px;
	 margin-left: 10px;
}
.drop .nav-link:hover .bi-chevron-down{
	  display: inline-block;
  

  animation: shakeY; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}
.drop .nav-link:hover .bi-chevron-left{
	  display: inline-block;
  

  animation: shakeX; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}
.drop .nav-link{
	font-size:0.8rem;
	font-weight:bold;
}
/*---------------------------------------------*/
.vertical-nav .dropdown-submenu:hover > .dropdown-menu {
    display: block;
	
}

.vertical-nav .dropdown-toggle::after {
    display: none !important;
}

.vertical-nav ul.dropdown-menu {
    text-align: right;
    font-size: 12px;
    top: 0;
    right: 50%;
    margin-top: 0px;
    margin-left: 0px;
    background-color: #f3f3f3;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.vertical-nav .dropdown.open .dropdown-menu {
    max-height: 500px;
    opacity: 1;
}

.vertical-nav ul.dropdown-menu > li {
    padding: 8px 0;
}

    .vertical-nav ul.dropdown-menu > li > a {
        color: #000 !important;
    }

        .vertical-nav ul.dropdown-menu > li > a:hover {
            color: #8b0000 !important;
        }

.navbar-nav .dropdown-toggle::after {
    display: none !important;
}


/*stat===============================================*/
.stat {
	 
   
    color: #FFF ;
}
    .stat h3 {
        color: #FFF !important;
    }
.stat i {
    color:#fff;
    font-size: 3em;
	font-weight:bolder;
}
.stat p {
	 color:#fff;
    font-size: 1em;
	font-weight:bolder;
}
.stat .number-count {
	 color:#fff;
    font-size: 2em;
	font-weight:bolder;
}
/*course-type=======================================*/
.course-type .row{
    border-radius: 2em;
    background: #FFF;
    padding: 1em;
}

.course-type h5 {
    font-size: .9em;
}
    .course-type img {
        width: 30%;
    }
.course-type a{
	text-align:center;
}
/*--------------------------------------------------------*/
.course-type-2 .row{
    border-radius: 2em;
   display:flex;
   justify-content:center;
    padding: 1em;
	background-color:#ffff;

}

.course-type-2 h5 {
    font-size: 1em;
	display: flex;
    flex-direction: column;
	 color:#0C426F;
	 margin-top:1rem;
}
  
.course-type-2 a{
	text-align:center;
}
    .course-type-2 h3 {
        color: #0C426F !important;
    }
.course-type-2 i {
    color:#0C426F;
    font-size: 3em;
	font-weight:bolder;
}
.course-type-2 p {
	 color:#0C426F;
    font-size: 1em;
	font-weight:bolder;
}
/*----------------------------------------*/
.course-type-3 #owl-2{
    border-radius: 2em;
   display:flex;
   justify-content:center;
    padding: 1em;
	background-color:#ffff;

}

.course-type-3 h5 {
    font-size: 1em;
	display: flex;
    flex-direction: column;
	 color:#0C426F;
	 margin-top:1rem;
}
  
.course-type-3 a{
	text-align:center;
}
    .course-type-3 h3 {
        color: #0C426F !important;
    }
.course-type-3 i {
    color:#0C426F;
    font-size: 3em;
	font-weight:bolder;
}
.course-type-3 p {
	 color:#0C426F;
    font-size: 1em;
	font-weight:bolder;
}
/*news*/
@font-face{
    font-family: "bootstrap";
    src: url("../../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff");
}

.news .card{
	position:relative;
	display: inline-block;
	animation:fadeInDown; /* referring directly to the animation's @keyframe declaration */
	animation-duration:1s;
	

}
.news h3{
	color:white;
	margin-bottom:2rem;
	
}
.news .card:after{
	 font-family: "bootstrap";
	position:absolute;
	content:"\F199";
	top:-11px;
	color:#86b7fe;
	z-index:10;
	left:1%;
	font-size:2rem;
}

.news .card a:after{
	content:" \F285";
	font-family: "bootstrap";
	font-size:25px;
	text-align:center;
	color:#fff;
	position:absolute;
	width:40px;
	height:40px;
	background-color:#86b7fe;
	left:10px;
	bottom:-10px;
	transition:all 1s;
	z-index:1050;
	animation-duration: 1s;
}
.news .card:hover a:after{
	display: inline-block;
	animation:shakeX; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 2s;
}


/*gallery*/

.heder .panel-header h3 {
    position: relative;
     display: block; 
    color: #0C426F;
    font-size: 1em;
    text-align: right;
    top: 60px;
    z-index: 10;
    background-color: #fff;
    width: 100%;
    text-align: center;
    padding: 20px;
	

}


.gallery .item {
	position:relative;
	overflow:hidden;
	padding:0!important;
  		
}
.gallery h5{
	font-size: 1em;
	width:100%;
	position:absolute;
	bottom:-10px;
	left:-50vh;
	padding:15px;
	color:#fff;
	text-align:center;
	background-color:#0C426F;
	transition:all 1s;
}

.gallery .item:hover h5{

	transition:all 1s;
	left:0vh;
	
}


/*content*/
/*
.content {
overflow:visible !important;
}
.content .card a:after{
	content:" \F285";
	font-family: "bootstrap";
	font-size:25px;
	text-align:center;
	color:black;
	position:absolute;
	width:50px;
	height:40px;
	background-color:#86b7fe;
	left:30px;
	bottom:0px;
	transition:all 1s;
	z-index:1050;
}
.content .card:hover a:after{
	background-color:#86b7fe;
	bottom:-15px;
	transition:all 1s;
	
	
}

.hr-content .card {
    height: 100%;
    max-height: 100%;
	background:#FFF;
}


.content .card {
    height: 100%;
    max-height: 100%;
	overflow:visible !important;
}
.content .item {
   position:relative;
}

.content .card:after {
   position:absolute;
   content:"";
   width:10%;
   height:8%;
   border-left:3px solid #86b7fe;
   border-top:3px solid #86b7fe;
   top:-1px;
   left:-1px;
   transition:all .5s ease-in-out;
	   
}

.content .card:before {
   position:absolute;
   content:"";
   width:10%;
   height:8%;
   border-right:3px solid #86b7fe;
   border-bottom:3px solid #86b7fe;
   bottom:-1px;
   right:-1px;
   transition:all .5s ease-in-out;
}
.content .card:hover:after {
   width:30%;
   height:15%;
   transition:all .5s ease-in-out;
}

.content .card:hover:before {
   width:30%;
   height:15%;
   transition:all .5s ease-in-out;
}
*/
/*----------------------------------------*/


.animation .item {
	
  

  animation: shakeY; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

.headline span{
	font-size:0.6rem;
}
.headline small{
	font-size:0.7rem;
}



.tab h5{
	font-size:0.8rem;
}


.tab .nav-link{
	background-color:#78C1FD;
	color:white!important;
	text-align:center;
	border:1px white solid;
}


.tab .nav-tabs .nav-link.active {
	background-color:white;
	color:#0C426F !important;
}



.tab .nav-link:hover{
	color:white!important;
	
}

.tab .nav{
	display:flex;
	justify-content: center
}





.tab .bi-mortarboard-fill{
	font-size:1.3rem;
}





.animate__backInUp p{
  display: inline-block;


  animation:backInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}


.animate__backInUp h5{
  display: inline-block;


  animation:backInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}



.top-slider  {
    position: relative;
}

.top-slider .carousel-caption {
    position: absolute;
    text-align: right;
    padding: 5px;
    top: auto;
    bottom: 10%;
}
/*
.carousel-inner::before{
    position:absolute;
    content:"";
	width:100%;
	height:100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0) 1%, rgba(0,0,0,0.47942927170868344) 52%, rgba(0,0,0,0.8211659663865546) 100%);
	z-index:1!important;
	top:0;
}
*/
@media (min-width: 768px) {
    .d-md-block {
        display: block !important;
    }
}

.top-slider .carousel-caption {
    position: absolute;
    text-align: right;
    padding: 5px;
    top: auto;
    bottom: 10%;
	z-index:10;
}

.top-slider .carousel-caption h5 {
    font-size: 2.5rem;
    font-weight: bolder;
    color: #FFF;
    margin: .2em 0 1em 0;
    font-family: AnjomanMax;
    animation: fadeInUp;
    animation-duration: 2s;
}


.top-slider .carousel-caption p {
    font-size: 1rem;
    text-align: justify !important;
	direction:rtl !important;
    font-weight: bold;
    color: #FFF;
    padding: 10px;
    text-align: right;
    animation: fadeInUp;
    animation-duration: 3s;
    width: 50%;
}


.top-slider .btn-slidshow {
    margin-top: 20px;
    animation: fadeInUp;
    animation-duration: 4s;
	background-color:#0345BF;
	color:white;
	padding:1%;
	width:30%;
	border:#0345BF 1px solid;
}


.owl-prev span{
	font-size:2rem;
}
.owl-next span{
		font-size:2rem;
}

/*====================================================*/


@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}
 .about{
    background-color: rgb(210, 214, 216);
    width: 100%;
    margin-top:100px;
    
   
}

@media screen and (max-width:768px) {
    .about {
        background-color: rgb(210, 214, 216);
       
       
    }
}


.about img {
    margin-right: 0px !important;
    margin-top: -90px !important;
    margin-bottom: -15px !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
	
}
.cont1{
	position:absolute;
	z-index:1050;
	top:400px;

}

@media (min-width: 768px) {
    .cont1{
        display: block !important;
    }
}

.cont1 .item{
	background-color:white;
	margin-bottom:100px;
	padding:20px!important;
	/*box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
	/*box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;*/
/*	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;*/
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	transition:all 1s;
	


}
.cont1  div{
	margin:0!important;
	padding:25px;
	
}

.cont1 .item h5{

	text-align:center;
	margin-top:8%;

}


.margin-top{
	margin-top:17%;
}

.cont1 .item:hover h5{

	color:#86B7FE;

}
.cont1 .item img{

	transition:all 1s;

}



.cont1 .item:hover img{

	transform: scale(1.1);
	transition:all 1s;

}
.zoom{
	
	transition:all 1s;
}


.zoom:hover{
	transform: scale(1.1);
	transition:all 1s;
}



.cont2 {
    height: 100%;
    position: relative;
	margin-top:60px;
	transition: all 1s;
}
.cont2 .card{
   
    background-color: white;
    box-shadow: -5px 10px 10px -5px rgba(26, 80, 69, 1), 0 6px 20px 0 rgba(0, 0, 0, 0.1) !important;
    border-radius: 10px;
    position: relative;
	transition: all 1s;
}

.cont2 .card::after{
    position: absolute;
    content: "";
    width:20px ;
    height:50px ;
    top: 0 !important;
	right:2px;
    border-radius: 0 0 20px 20px;
    background-color: rgba(26, 80, 69, 1);
	transition: all 1s;
  
}

.cont2 .card-body{
    margin-right: 20px;
    
}
.cont2 .card-body p{
	width:85% !important;
}

.cont2 .card a::before{
    position: absolute;
    content: "جزئیات";
    padding-top: 3px;
    text-align: center;
    width:100px ;
    color: #FFF;
    height:29px ;
    bottom:2px !important;
    left: 2px;
    border-radius:7px;
    background-color:rgba(26, 80, 69, 1);
	font-size:15px;
	transition: all 1s;
	
  
}
.cont2 .card:hover{
    box-shadow: -5px 10px 15px -5px #86B7FE, 0 6px 20px 0 rgba(0, 0, 0, 0.2) !important ;
    transition: all 1s;
}
/* .cont2 .card .text-color-1 {
	color:#C65D3A!important;
}
 */

/*media=======================================================*/


@media only screen and (max-width: 1400px) {
.cont1 .item{
	display:black;
	
}
.cont1{
	position:relative!important;
	top:0px;

}
.margin-top{
	margin-top:5%;
}
}






.utility-sidebar {
	position: fixed;
	right: 0;
	top: 35rem;
	width: 40px;
	background: #FFF;
	border: 2px solid black;
	z-index: 99;
	transition: all 0.5s ease;
	border-radius: 20px;
}

	.utility-sidebar:hover {
		background: linear-gradient(to top, #AB0F0F 50%, #FFF 50%);
		background-size: 100% 200%; /* ارتفاع 200% */
		background-position: bottom; /* شروع از پایین */
		transition: background-position 0.5s ease, all 0.8s;
	}


		.utility-sidebar:hover i::before {
			color: #FFF;
			transition: all 1s;
		}

	.utility-sidebar .utility-btn {
		position: relative;
		left: 2rem;
	}

		.utility-sidebar .utility-btn p {
			top: 0rem;
			font-size: 0.8rem;
			display: none;
			width: 100%;
			position: absolute;
			right: 3rem;
			padding: 0.1rem;
			transition: all 0.5s ease;
			color: #FFF;
		}



	.utility-sidebar li:hover p {
		display: inline;
		width: 100px;
		transition: all 0.5s ease;
	}


	.utility-sidebar i:hover::before {
		transform: rotateY(360deg);
		transition: all 0.5s;
		color: #FFF;
	}



	.utility-sidebar li {
		list-style-type: none;
		padding-top: 0.5rem;
	}



	.utility-sidebar .utility-btn {
		width: 100%;
		background-color: transparent;
		border: none !important;
	}




		.utility-sidebar .utility-btn p {
			position: absolute;
			background-color: #FFF;
			padding: 8px 15px;
			border-radius: 3px;
			opacity: 0;
			visibility: hidden;
			font-size: 13px;
			letter-spacing: .5px;
		}


			.utility-sidebar .utility-btn p::before {
				content: '';
				display: block;
				position: absolute;
				right: -4px;
				top: 10px;
				transform: rotate(-45deg);
				width: 10px;
				height: 10px;
				background-color: inherit;
			}


		.utility-sidebar .utility-btn:hover p {
			background-color: black;
			visibility: visible;
			opacity: 1;
		}



	.utility-sidebar .img-fluid1 {
		width: 25px;
	}
/*********************panel-header h4***************************/








.panel-header h4{
    position: relative;
    padding-bottom: 15px;
    color: #174A3D; /* سبز یشمی تیره */
    font-weight: bold;
    display: inline-block;
}

.panel-header h4::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 1px;
    width: 60px;
    height: 1px;
    background-color: #C65D3A; /* خط آجری ظریف */
}

/* المان مربعی کوچک (الماس) در ابتدای خط */
.panel-header h4::before {
    content: "";
    position: absolute;
    bottom: -3px; /* تنظیم دقیق روی خط */
    right: 0;
    width: 7px;
    height: 7px;
    background-color: #C65D3A;
    transform: rotate(45deg); /* تبدیل به لوزی */
}




/**************************************************/


        .trapezoid-container {
            perspective: 1000px;
            width: 2000px;
            height: 500px;
        }
        
        .trapezoid {
            width: 100%;
            height: 10%;
            background-color: rgba(26, 80, 69, 1);
            background-image: url("https://www.transparenttextures.com/patterns/triangles.png");
           /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
            position: relative;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
			margin-top:-5rem;
			-webkit-box-shadow: 3px -3px 61px 16px rgba(66, 68, 90, 1);
-moz-box-shadow: 3px -3px 61px 16px rgba(66, 68, 90, 1);
box-shadow: 3px -3px 61px 16px rgba(66, 68, 90, 1);
          
			
        }
		
		
        
        
@media (max-width: 570px) {
.trapezoid{
	margin-top:1rem;
}
}

  



.show .item{
	background-color:transparent;
	padding:13px!important;
	border-radius:10% 10% 10% 10%;
	z-index:7;
	text-align:center;
	position:relative;
	/*border:solid 2px #FFF;*/
	margin-top:-4rem;
	

}

.show .item img{
	border-radius:50%;
	
	width:70%;
	height:70%;
	position:relative;
}

.show .item a{
	
    width: 100% !important;
   
    top: -50%;
    display: block;
	position:relative;
		
}

.show .item h5{
	text-align:center;
	font-size:13px;
	top:0.5rem;
	position:relative;
	transition:all 0.5s;
	color:white;
	font-weight:bold;
	padding:3px;
}


.show .item:hover h5{
	transition:all 1s;
	
	
	z-index:10;
}

@font-face{
    font-family: "bootstrap";
    src: url("../../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff");
}


.show .item  i{
	position:relative;
	font-size:2rem;
	z-index:10;
	transition: all 0.8s;
	z-index:10!important;
}

.show .item i::before{
	transition: all 0.8s;
	position:relative;
	z-index:10;
	color:#FFF;
}

.show .item:hover i::before{
	transition: all 0.8s;
	z-index:10!important;
	transform: translateY(-30px) rotateY(360deg);
	
}


.show .item i::after{
	    content:"";
	position:absolute;
	top:-0.6rem;
	right:-1.2rem;
	background-color:#41bfac;
	width:100%;
	height:100%;
	border:solid 2px #FFF;
	border-radius:150px; 
	transition: all 0.8s;
	padding:2rem;
}

.show .item:hover i::after{
	background: linear-gradient(to left, #007f6c 50%, #41bfac 50%);
background-size: 200% 100%; /* عرض 200% (به جای ارتفاع) */
background-position: right; /* شروع از راست */
transition: background-position 0.5s ease, all 0.8s;
transform: translateY(-35px);
  
}






.show .item p{
	margin-top:2rem;
	font-size:1.4rem;
	text-align:center;
	color:#FFF;
}





.show .item:hover:after{
	content:"";
	transition: all 0.8s;
	background:white;
	width:100%;
	height:100%;
	border-radius: 0 0 46% 46%;
	top:0;
	left:0;
	transition: all 0.8s;

}



.show span{
	display:none;
}


@media (max-width: 425px) {
	.show .item{
		margin-top:0.3rem;
	}
	

}

.stat p {
    color: #fff;
    font-size: 1em;
    font-weight: bolder;
}

/**********************************************/


.itemnew .item img{
	width:65%;

}

.itemnew .item a{
	text-align:center;

}

.itemnew .item h3{
	font-size:1rem;
	text-align:center;
	background-color:#FFF;
	padding:0.5rem;
	border-radius:1rem;
	width:85%;
	color:#000;
	 margin-top: -2.5rem;
    z-index: 10;
    position: relative;
	right:1rem;
	    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 165, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18)

}

/*******************************/

.content2 .card::after{
  content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    background-color: #00a682;
    transition: all 1s;
    right: -64px;
    top: -72px;
    border-radius: 50%;
    transform: rotate(45deg);
}

.content2 .card{
	overflow:hidden;
}

.content2 .card::before{
	content:"\F287";
	font-family:"bootstrap";
	
	position:absolute;
	top:0.1rem;
	z-index:10;
	right:0.5rem;
	color:#eff4f5;
}

.content2 .card a::before{
    position: absolute;
    content: "جزئیات";
    padding-top: 3px;
    text-align: center;
    width:100px ;
    color: #FFF;
    height:29px ;
    bottom:2px !important;
    left: 2px;
    border-radius:7px;
    background-color:#00a682;
	font-size:15px;
	transition: all 1s;
	
  
}




/*news*/
@font-face{
    font-family: "bootstrap";
    src: url("../../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff");
}

.news .card{
	position:relative;
	display: inline-block;
	animation:fadeInDown; /* referring directly to the animation's @keyframe declaration */
	animation-duration:1s;
	

}
.news h3{
	color:white;
	margin-bottom:2rem;
	
}
.news .card:after{
	 font-family: "bootstrap";
	position:absolute;
	content:"\F199";
	top:-11px;
	color:#86b7fe;
	z-index:10;
	left:1%;
	font-size:2rem;
}

.news .card a:after{
	content:" \F285";
	font-family: "bootstrap";
	font-size:25px;
	text-align:center;
	color:#fff;
	position:absolute;
	width:40px;
	height:40px;
	background-color:#86b7fe;
	left:10px;
	bottom:-10px;
	transition:all 1s;
	z-index:1050;
	animation-duration: 1s;
}
.news .card:hover a:after{
	display: inline-block;
	animation:shakeX; /* referring directly to the animation's @keyframe declaration */
	animation-duration: 2s;
}


/**************************************************/

.star div .item{
	border:solid 1px #C65D3A;
	padding:0!important;
	border-radius:1rem;
}
.star .item img{
	border-radius:1rem;
}

.star .item h3{
	padding:1rem 0.5rem;
	text-align:center;
	color:#000;
}


.star .item p{
	padding:0rem 1rem;
	color:#000;
}
/*******************gallery********************/


.gal .row.g-1 > div:nth-child(1),
.gal .row.g-1 > div:nth-child(3) {
    transform: translateY(150px);
	z-index:15;
	
}
.gal .row.g-1 > div:nth-child(2),
.gal .row.g-1 > div:nth-child(4) {
    transform: translateY(90px);
	z-index:15;
	
}

.gal .item img{
	border-radius:1rem;
}


@media (max-width: 425px) {
	
	
.gal .row.g-1 > div:nth-child(1),
.gal .row.g-1 > div:nth-child(3){
	transform: translateY(5px)
}

.gal .row.g-1 > div:nth-child(2),
.gal .row.g-1 > div:nth-child(4) {
    transform: translateY(5px);
	z-index:15;
	
}

}
/**********************************************/
.m{
	position:relative;
}

.m .item{
	background-color:#FFF;
	padding: 40px 5px!important;
	border-radius: 20px !important;
	width:90%;

}


.m .item  i{
	position:relative;
	font-size:2rem;
	z-index:10;
	transition: all 0.8s;
	z-index:10!important;
}

.m .item i::before{
	transition: all 0.8s;
	position:relative;
	z-index:10;
	color:#FFF;
}

.m .item:hover i::before{
	transition: all 0.8s;
	z-index:10!important;
	transform: translateY(-5px) rotateY(360deg);
	
}


.m .item i::after{
	    content:"";
	position:absolute;
	top:-0.6rem;
	right:-1.2rem;
	background-color:#f1c50e;
	width:100%;
	height:100%;
	border:solid 2px #FFF;
	border-radius:150px; 
	transition: all 0.8s;
	padding:2.1rem;
	    box-shadow: 5px -5px 0px 0 rgb(245 242 84 / 40%);
}
.m .item a {
    width: 100% !important;
    top: -50%;
    display: block;
    position: relative;
	text-align:center;
}


.m .item p {
    margin-top: 2rem;
    font-size: 0.8rem;
    text-align: center;
    color: #000;
}

.m .item h2{
	font-size:1.5rem;
	color:#000!important;
}





.m{
	position:relative;
}

.m2 .item{
	background-color:#FFF;
	padding: 40px 5px!important;
	border-radius: 20px !important;
	width:90%;

}


.m2 .item  i{
	position:relative;
	font-size:2rem;
	z-index:10;
	transition: all 0.8s;
	z-index:10!important;
}



.m2 .item a {
    width: 100% !important;
    top: -50%;
    display: block;
    position: relative;
	text-align:center;
}


.m2 .item p {
    margin-top: 2rem;
    font-size: 0.8rem;
    text-align: center;
    color: #000;
}

.m2 .item h2{
	font-size:1.5rem;
	color:#000!important;
}


.m2 .item img{
	padding:1rem;
	width:60%;
}


.m2 .item h2::after {
  content: "";
  position: absolute;
  left: 50%;
  top:-1.5rem;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: #0b7a48!important;
  border-radius: 4px;
}

/* برای کارت مدیر گروه (سبز تیره) */
.m2 .item h2::after {
  background-color: #ffffff;
}



.panel-tab h5 {
	font-size: 0.8rem;
}


.panel-tab .nav-link {
	background-color: #FFF;
	color: #485b10 !important;
	text-align: center;
	border: 1px #485b10 solid;
}




	.panel-tab .nav-link:hover {
		color: black !important;
		border: #1595BD;
	}

.panel-tab .nav {
	display: flex;
	justify-content: center
}


.panel-tab .bi-mortarboard-fill {
	font-size: 1.3rem;
}

.panel-tab .accordion-button:not(.collapsed) {
	background-color: #bacb89 !important;
	color: #000000 !important;
	border: rgb(232, 255, 226);
}



.panel-tab .accordion-button {
	background-color: #87a922;
	color: white;
	border: black;
}

.panel-tab .nav-tabs .nav-link.active {
	background-color:#0a5348;
	color: #FFF !important;
}


.panel-tab .panel-header{
	text-align:center;
}

.panel-tab p{
	text-align:center;
}
















