/* *******************************************متن جدا کننده******************************************* */
    .seprator{
        font-family: Vazir;
        font-size: 20px;
        text-align: center;
        font-weight: 500;
        color: #fff;
        
        
        border-radius: 2rem;
        background-color: rgb(10, 100, 150);

        position: relative;
        top: 1.5rem;
        width: 94%;       
        height: 33px; 
        margin: 0 auto;
        padding-top: 0.75rem;
        
    };

/* *******************************************متن جدا کننده******************************************* */    


/* ************** باکس ها ******************************** */
     
    .Box {
        background: linear-gradient(180deg, #b4acff, rgba(230, 248, 223,0.05));   
    }
    
    .Box-News {
        /* background: linear-gradient(360deg, #ffc7c7, rgba(230, 248, 223,0.05)); */
        border-radius: 1rem;
       
    }

    .Box-Notifications {
        /* background: linear-gradient(360deg, #ffd4ac, rgba(230, 248, 223,0.05)); */
        border-radius: 1rem;          
         
    }

    .Box-Edu {
        /* background: linear-gradient(360deg, #fdff80, rgba(230, 248, 223,0.05)); */
        border-radius: 1rem;        
    }

   
/* ****************** موارد داخل هر باکس ************************** */
    .DataBox,
    .DataBox > html > body    
    {
        /* پرنت موارد داخل هر باکس */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .news {
        /* هر یک از موارد داخل باکس ها */
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: calc(48% - 1.5rem);
        padding: 0.5rem;   
        
        background-color: #fff;
        margin: 0.25rem 0.75rem;       
        border-radius: 1rem;

        transition: box-shadow .3s;
    }

    .news:hover{
        /* استایل هاور هر یک از موارد باکس ها */
         box-shadow: 0 0 15px blue; 
    }

    .news-info{      
        /* باکس ها   */
        width: calc(85% - 0.5rem);  
        margin-right: 0.5rem;
    }

    .news-img {
        /* عکس هریک از موارد باکسها */
        width: 15%;
        height: 75px;
        text-align: center;
    }


    .news-title {
        /* اسم هریک از موارد باکسها */
        font-family: Vazir;
        font-size: 14px;
        color:blue;
        margin-bottom: 1rem;
    }

    .news-date {
        /* تاریخ هری از موارد باکسها */
        font-size: 10px;
        color:grey;
        font-family: Vazir;
        margin-bottom: 1rem;
    }

    .news-body {
        /* توضیحات هریک از موارد باکسها */
        font-family: Vazir;
        font-size: 12px;
        margin-bottom: 1rem;
        padding-right: 0.5rem;
        line-height: 1.5rem;
    }

    .img{
        /* عکس هریک از موارد باکسها */
        width: 100%;
        height: 100%;
    }

    .more {       
        /* دکمه رفتن به آرشیو ها  */       
        text-align: left;
        position: sticky;
        top: 0;        
        z-index: 10;
        padding:1rem 0;       
    }

    .hr-box{
        /* خط افقی زیر دکمه */
        width: 100%;
        margin: 1.2rem auto 0.5rem;

    }

.more a {
    /* متن دکمه */
    font-family: Vazir;
    font-size: 14px;
    color: yellow;
    background-color: rgb(10, 100, 150);
    border-radius: 1rem;
    padding: 0.3rem 1rem;
    margin-left: 3rem;
}
/* ****************** موارد داخل هر باکس ************************** */



/* ********************* بخش معرفی و کلیپ************************** */
    .introduce {
        /* پرنت بخش معرفی */
        width: 100%;
        height: 550px;        
        position: relative;
        top:3rem;
        margin: 0rem auto 0;      
    }

        
    .intro-text {
        /* پرنت تایتل و متن معرفی */
        width: 98%;
        background-color: #29C3BE;
        height: 300px;        
        position: relative;
        margin: 0 auto;
        top:150px;
        border-radius: 1rem;

    }

    .intro-text-body,
    .intro-text-title
     {       
        /* تایتل و متن معرفی */
        width: calc(48% - 4rem); 
        margin:0 2rem 1rem;
    }

    .intro-text-body   
     {  
        /* متن معرفی    */
        padding: 0.5rem 0;                 
        text-align: justify;
        line-height: 1.5rem;
        font-size: 16px;
    }
    
    .intro-text-title{  
        /* تایتل معرفی   */
        padding: 2rem 0 0 ;    
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;
    }

    .intro-clip {  
        /* پرنت ویدیو بخش معرفی */
        position: relative;  
        top: -300px;
        /* top:0; */

        height: 300px;
        width: 50%;
        right: 48%;

        display: flex;
        z-index: 1; 
        
        border-radius: 1rem;
        background-color: rgb(245, 245, 245);
    }

    
    video {
        /* ویدیو بخش معرفی */       
        height: 100%;
        width: 100%;
        border-radius: 1rem;
        border: #29C3BE solid 3px;
    }

     .intro-stat {
        /* پرنت باکس های مربوط به مدرسه، زیر متن */
        background-color:#fff;
        width: 60%;
        height: 160px;
        position:relative;
        top:-220px;       
        right: 20%;
        border-radius: 2rem;
              
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;    
               
        overflow-x: auto;

        z-index: 10;
    }

    .intro-stat-item {
        /* موارد درون باکس */
        margin:1rem 0.5rem 0;             
        height: calc(100% - 2rem);
        width: 185px;          
        text-align: center;

        flex: 0 0 auto;
       }

    .intro-stat-item .Tedad{
        /* عدد موارد درون باکس */
        font-size: 20px;
        font-weight: bold;
        color:chocolate;
    }

    .intro-stat-item .title{
        /* تایتل موارد درون باکس */
        font-size: 14px;
        font-weight: bold;
        color:blue;
        margin-top: 0.5rem;
    }

    .intro-stat-item .icon{
        /* ایکون موارد باکس */
        font-size: 40px;
        color: hsl(258, 67%, 45%);
        margin: 1rem auto;
    }

    /* ********************* باکس های افتحارات ************************ */
    .seprator-award{
        /* تایتل بخش افتخارات */
        font-family: Vazir;
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        color: rgb(10, 100, 150);

        position: relative;
        top: 9rem;
        width: 95%;
        margin: 0 auto;       
    }

    .awards{
        /* پرنت بخش افتخارات */
        position: relative;
        top: 8rem;
        margin: 0 auto;

        height: 300px; 
        width: 95%;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        overflow-y: auto ;

    }

    .award{
        /* هر بخش */
        height: 268px;
        margin: 1rem;
        width: 30%;
        border-radius: 1rem;
        position: relative;

    }

 
    .awards > .award > .img    
    {
        /* عکس هر بخش */
        border-radius: 1rem;
        height: 100%;
        width: 100%;
    }

    .pop-up{ 
        /* متن پاپ آپ روی هر بخش       */
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        background-color: #2873b99d;
        border-radius: 1rem;

        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;     

    }

    .pop-up > .title{
        /* تایتل متن پاپ آپ */
        position: relative;
        top: 30%;
        font-weight: bold;
        color: rgb(255, 255, 255);
        font-size: 18px;
        text-align: center;
    }

    .pop-up > .body{
        /* توضیحات متن پاپ آپ */
        padding: 0 1rem;
        position: relative;        
        top: 35%;
        line-height: 1.5rem;
        text-align: justify;
        color: #ffd900;
        font-size: 16px;
    }

    .see-all > a{
        /* دکمه رفتن به آرشیو */
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-color: red;
        border-radius: 1rem;
        padding: 0.5rem;
    }

    .see-all{
        /* پرنت دکمه */
        position: sticky;       
        top: 90%;
        height: 40px;
        text-align: center;       
    }

    .awards > .award:hover > .pop-up{ 
        /* استایل هاور برای نمایش دادن متن پاپ آپ    */
        visibility: visible;
        opacity: 1;
    }

    /* ********************* باکس های افتحارات ************************ */



    /* ********************* عکس ************************ */   
    .seprator-text{
        /* تایتل عکس */
        position: relative;
        top: 6rem;

        width: 100%;
        height: auto;        

        font-family: Vazir;
        text-align: center;        
        margin: 0 auto;              
    }

    .seprator-text > h2 {     
        /* بخش اول تایتل    */
        font-size: 24px;
        font-weight: bold;
        color: rgb(12, 67, 187);        
    }

    .seprator-text > h3 {
        /* بخش دوم تایتل */
        font-size: 20px;
        font-weight: bold;
        color: #29C3BE;
        margin: 1rem;
    }

    .school-pic{
        /* عکس زیر متن */
        position: relative;
        top: 6rem;    
              
        width: 98%;
        height: auto;
        margin: 0 auto;      
    }

    /* ******************** کارهای دانش آموزان *************************************** */

    .art-work-title{
        /* تایتل بخش کار های دانش آموزان */
        position: relative;
        top: 5rem;

        font-family: Vazir;
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        color: rgb(10, 100, 150);
      
        margin: 0 auto;
        text-align: center;   
        width: 98%;     
    }
    .std-works{
        /* پرنت باکس ها */
        position: relative;
        top:5rem;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: space-between;

        height: 500px;
       
    }
    

    .std-clips{
        /* پرنت باکس ویدیو */
        height: calc(500px - 2rem );
        width: calc(60% - 1rem);
        margin: 0.5rem 0.5rem; 
    }

    .std-clips:hover > .std-pop-up,
    .Std_Sub_1:hover > .std-pop-up,
    .Std_Sub_3:hover > .std-pop-up,
    .Std_Sub_4:hover > .std-pop-up{
        /* استایل هاور برای نمایش متن پاپ آپ */
        visibility: visible ;
        opacity: 1;
    }

    .std-arts{
        /* پرنت سه باکس سمت چپ */
        height: calc(500px - 1rem );
        width: calc(40% - 1rem);
        margin: 0.5rem 0.5rem;  
    }

    .Std_Sub_1 {
        /* باکس بالایی سمت چپ */
        position: relative;        
        width: 100%;
        height: calc(50% - 0.5rem);
        margin-bottom: 0.5em;
        z-index: 3;   
    }
    .Std_Sub_2{
        /* پرنت دو باکس پایین سمت چپ */
        position: relative;        
        width: 100%;
        height:calc(50% - 0.5rem);
        margin-top: 0.5rem;
        z-index: 3;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .Std_Sub_3,
    .Std_Sub_4{
        /* دو باکس پایین سمت چپ */
       width: 49%;
       height: 100%; 
    }


    .Std-img{
        /* عکس هر باکس */
        width: 100%;
        height: 100%;
        border-radius: 1rem;
    }


    .std-pop-up{    
        /* متن پاپ آپ    */
        position: absolute;

        background-color: #2873b99d;

        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;

        text-align: center;
    }

    .std-pop-up-clip{
        /* متن پاپ آپ روی ویدیو */
        height: 300px; /* calc(425px - 7rem ); */
        width: calc(60% - 0.75rem);
        /* border-radius: 2rem; */
        top: 5.5rem;
    }

    .std-pop-up-sub1{
        /* متن پاپ آپ روی باکس بالا سمت چپ */
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 1rem;
    }

    .std-pop-up-sub3,
    .std-pop-up-sub4{
        /* متن پاپ آپ روی دو باکس پایین سمت چپ */
        width: 49%;
        height: 100%;
        top: 0;
        border-radius: 1rem;
    }


    .std-pop-up .Title{
        /* تایتل متن پاپ آپ */
        font-size: 20px;
        font-weight: bold;
        color: #fff;

        margin-top: 30px;  
    }

    .std-pop-up .Artist {
        /* سازنده اثر روی متن پاپ آپ */
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        margin-top: 1rem; 
    }
    
    .std-pop-up .Discription{
        /* توظیحات متن پاپ آپ */
        font-size: 14px;
        
        color: #fff;
        margin-top: 1rem; 
    }
    .std-pop-up .SeeMore{
        position: relative;
        top: 20%;


    }
    
    .std-pop-up > .SeeMore > a{
        /* دکمه رفتن به آرشیو */
        
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        margin-right: 1rem ;
        background-color: red;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
    }

    /* *******************************************فوتر******************************************* */
    .footer {        
        /* کنار هم قرار دادن باکس های درون فوتر */
        position: relative;
        top:5rem; 
        display: flex;
        flex-direction: row;
        flex-wrap:nowrap ;
        font-family: Vazir;       
        margin-bottom: 5rem;
        background-color: rgb(209, 214, 231);
        padding-top: 1rem;
    }

    .footer ul li {
        /* لیست های داخل فوتر */
        padding-top: 0.75rem ;
        padding-right: 2rem;  
    }

    .footer ul li a {
        /* لینک های فوتر */
        color: #000;
    }
    .footer .footer-links  a:hover,
    .footer .footer-contact a:hover {
        /* استایل هاور روی لینک های فوتر */
        color: red;
        font-size: 16px,
        font-style: italic;
        font-weight: bold;
    }

    .footer-links {
        /* بخش لینک های مفید در فوتر */
        width: calc(30% - 2rem);
        margin-right: 2rem;
        position: relative;

    }

    .footer-contact {
        /* بخش تماس با ما در فوتر */
        width: 35%;
        position: relative;
    }

    .footer-location {
        /* بخش نقشه در فوتر */
        height: 250px;
        width: calc(35% - 2rem);
        margin-left: 2rem;
        margin-bottom: 3rem;
        position: relative;
        z-index: 0;
    }

    .footer-location iframe {
        /* ایفریم نقشه در فوتر */
        width: 100%;
        height: 100%;
        border-radius: 1rem;
    }
    
    .footer span {
        /* تایتل هر بخش فوتر */
        font-size: 12px;
        font-weight: bold;
        font-style: italic;
        color: blue;
        padding: 10px;    
    }

 
   
/* ******************************************* پاپ آپ****************************************** */

.PopUp{
    width: 100vw;
    height: 100vh;     

    position: fixed ;
    top: -100%;
    left: 0;  
     
    z-index: 20;

    display: flex;
    justify-content:center;
    flex-wrap: wrap;
               
    transition-property:top;
    transition-duration: 1s;
}

#content,
#content-imgonly
{
  position: relative;
  top:5%; 
  width: 85%;
  height: 85%;         
  border-radius: 1rem;

  color: #ffffff;
  background: #29c3bef5;    
  font-family: Vazir;    

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}

#content{
    width: 85%;
}

#content-imgonly{
    width: 60%;
}

.pop-up-body,
.pop-up-body-imgonly
{ 
    height: 100%;
    overflow-y: auto;
}
.pop-up-body {
    width: 40%;   
}
.pop-up-body-imgonly {
    width: 60px;    
}

.pop-up-text{
  position: relative;
  
  width: 95%;
  margin: 0 auto;
  
  text-align: justify;
  line-height: 1.8rem;
  font-weight: bold;
  font-size: 18px;  
  
}

.PopUp button {
    font-size: 30px;
    color: red;
    padding: 0;
    margin: 0.5rem 1rem 0 0;
    background: #29c3bef5; 
    border-style: none;
    cursor: grab;
    z-index: 21;

    position: sticky;
    position: -webkit-sticky;
    top:0.5rem      
}

.sign ,
.pop-up-title
{
    text-align: center; 
    line-height: 1.5rem;                 
}

.sign
{
    font-size: 13px;                 
    margin-top: 1rem;                
}

.pop-up-title{
    font-size: 17px;
    font-weight: bold;
    color:rgb(162, 0, 0);
    margin-bottom: 1rem;
}

#pop-up-img{
    width: calc(60% - 2rem);
}

#pop-up-imgonly{
    width: calc(100% - 60px - 3rem);   
}

#pop-up-img,
#pop-up-imgonly
{
    height: calc(100% - 2rem);
    margin: 1rem;
    border-radius: 1rem;
}

/* .std-pop-up > .Title > button {
    border: #000 solid 1px;
} */

/* ****************************************************************************************** */

    /* برای رسپانسیو کردن صفحه */

    @media (max-width: 1300px) {
        .introduce {
            height: 580px;
        }

        .intro-text {
            height: 330px;
        }
        .intro-text-body, 
        .intro-text-title
        {
            width: calc(45% - 2rem);       
        }

    }

    @media (max-width: 1024px) {
        .introduce {
            height: 650px;
        }

        .intro-text {
            height: 400px;
        }
        .intro-text-body, 
        .intro-text-title
        {
            width: calc(45% - 2rem);       
        }
        .intro-clip{
            top:-400px;
        }
    }


    @media (max-width: 768px) {

        .seprator{
            top:1rem;
            font-size: 14px;
        }
        .footer{
            display: block;
            top:8rem;
        }
        .footer-links{
            width: 100%;
            margin: 0.5rem 0 1rem;
            padding: 0; 
            top:0;       
           
        }
        .footer-contact{
            width: 100%;
            margin: 0.5rem 0 1rem;
            padding: 0;
            top:0;
            
        }
        .footer-location{
            width: 100%;
            margin: 0.5rem 0 1rem;
            padding: 0;
            top:0;           
        }

        .news{
            width: 100%;
        }

        .introduce {
            top:1rem;
            height: auto;
        }

        .intro-clip,
        .std-clips        
        {              
            display: block;
            top:1rem;        
       
            right: 0;
            max-height: 400px;
            height: 100% ;
            width: 96%;  
            margin: 0 auto;                  
        }
        .std-pop-up-clip{
            max-height: 250px;
            width: 93%;
            right: 1rem;
            top: 50px;
            border-radius: 1rem;
        }
        .std-pop-up .Title{      
            font-size: 16px; 
            font-weight: bold;    
            }
        
        .std-pop-up .Artist ,
        .std-pop-up .Discription,
        .std-pop-up .SeeMore > a
        {       
            font-size: 14px;     
        }  
    

        video {
            /* ویدیو بخش معرفی */                  
            width: 96%;   
            max-height: 390px;       
            height: 100%;
        }

        .intro-text {
            position: relative;
            top: 0.5rem;
            height: auto;           
        }

         .intro-text-body        
         {
            width: calc(100% - 1rem);
            margin: 0.5rem;   
            font-size: 14px;                  
        }
        
        .intro-text-title
        {
           width: calc(100% - 1rem);
           margin: 0.5rem; 
           font-size: 16px;                    
       }

        .intro-stat {
            width: calc(100% - 2rem);
            position: relative;
            top:2.5rem;
            right: 0;  
            margin: 0 auto;   
            border-radius: 1rem;          
                       
        }

        .intro-stat-item {
            width: 150px;
        }

        .awards{
            top:6.5rem;
            height: 830px;
        }

        .award{
            width: 100%;
            margin: 0;            
        }

        .seprator-text     
        {
            top: 5rem;
            margin: 0 auto;   
            width: 96%;        
        }
      
        .school-pic        
        {
            top: 5rem;
            margin: 0 auto;   
            width: 96%;        
        }

        .seprator-text > h2{
            font-size: 16px;
        }

        .seprator-text > h3{
            font-size: 14px;
        }

               
        .seprator-award{
            top: 6rem;
            margin: 0 auto;  
            font-size: 16px; 
            width: 90%; 
        }

        .art-work-title{
            top:7.5rem; 
            font-size: 16px; 
        }
        .std-works{
            top:8rem;
            width:96% ;
            margin: 0 auto;
            height: 900px;
        }
              
        .std-arts
        {        
            position: relative;   
            width: 98%;             
        }
    
        .pop-up-text,
        .pop-up-title
        {
            font-size: 15px;
            line-height: 1rem;
            font-weight:100;
            font-size: 14px; 
        }

    
      #content,
      #content-imgonly
      {
        width: 95%;
        height: 40%;
      }

     .more a{
            margin-left:0;
        }

      
      
    }

    @media (max-width: 400px){
       .Std_Sub_3,
       .Std_Sub_4{
        width:100%;
        margin-bottom: 0.5rem;
       }

       .std-arts{
            top:-5rem;
       }
       .std-pop-up-clip{
        width: 95%;
        top: 0;
        right: 6px;
        max-height: 140px;
       }

  

       .std-clips{
         max-height: 200px;
       }
       .std-pop-up-sub3{
        width: 100%;
       }

       .std-pop-up-sub4{
        width: 100%;
        top: 240px;
        border-radius: 1rem;
       }

       .footer{
        top: 12rem;
       }

       .intro-stat-item {
        width: 120px;
        }

        .more a{
            margin-left:0;
        }
    }