:root{
    --blue: rgb(5, 5, 53);
    --pistache: rgb(19, 173, 109);
    --banafsaji:rgb(46, 8, 56);
  }
  
  *{
    font-family: fustat;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    border:none ;
    text-decoration: none;
  }
  html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
  
  /****************************************************************************************************************/
  
  
  
.header{
  position:fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 10rem;
  background:  #212121;;
  z-index: 1000;
  padding:2vmin 3vmin;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.hawi-chiar{

  display: block;
  width: auto;
  height: auto;
  padding: 0.5vmin;
  margin-top: 3vmin;
  margin-right: 3vmin;

  
}

.hawi-chiar h1{
  text-align: center;   
}


.hawi-chiar a{ 
    
  text-align: center; 
  text-decoration: none;
  background: linear-gradient(217deg, rgba(0,0,250,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(46, 8, 56, 0.8), rgba(109, 5, 207, 0) 70.71%);
  padding: 2rem;  
  border-radius: 100% 0% 100% 0% / 72% 0% 100% 28%;
  transform: rotate(25deg);
  
}

.hawi-chiar .chiar{
  font-size: 3vmin; 
  color: rgb(54, 168, 98);
}

.hawi-chiar h2{

  text-align: center;
  font-size: 1.5vmin;
  color: rgb(54, 168, 98);
  padding: 0.75vmin;
}
/***********************************************************************************************************************/

/*************************************************************************/
nav{
  display: inline-block;
  position: relative;
  
}

.marahil{
  display: flex;
  flex-direction: row;
  

}

.mainmenubtn { 
  
  padding: 1vmin;
  margin: 1vmin;
  
  color: white;
  cursor: pointer;
  font-size: 4vmin;
}

.mainmenubtn:hover {
color:rgb(43, 255, 0);
opacity: 0.7;
}
.dropdown {
padding: 0.5vmin;
margin: 2vmin;
display: flex;
flex-direction: column;
align-items: center;

}


.dropdown-child {
background-color: rgb(27, 0, 88, 0.25);
padding: 1vmin;
display: none;
margin-top: 2vmin;
}
.dropdown-child a {
  color: white;
  font-size: 3vmin;
  font-weight: bolder;
  text-decoration: none;
  display: block;
  padding: 0.5vmin;
  margin: 0.4vmin;
  cursor: pointer;
  background-color: rgba(27, 0, 88, 0.5);
  text-align: center;
  z-index: 10;
  
}

.dropdown-child a:hover{
  color: var(--pistache);
  background-color: var(--banafsaji);

}
.dropdown:hover .dropdown-child {
  display: block;
  position: absolute;
  top:68%;
  
}

/*********************************************************************************************************************/
.ounwan a{
color: white;
font-size: 3vmin;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 900;


}

.iqouna i{

  color: white;
  font-size: 3vmin;
  margin-right: 1vmin;
  margin-left:1.5vmin;
}

  
  /*********************************************************************************************************************/
  
  .Tasjil{
      display: none;
  }
  /***********************************************************************************************************************/
  
  
  main{
      position: relative;
      top:10.5rem;
      right:0;
      left: 0; 
      height:70rem ;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap:2rem;
      justify-content: center;
      padding: 0.5rem;
      align-items: center;
      
      
  
  }
  
  /***************************************************************************************************************************/
  .dars{
      flex: 1 1 40rem;
      height: 68rem;
      
      background-color: rgba(0, 0, 255, 0.205);
      
          border-radius: 30px;
          background: #212121;
          box-shadow: 15px 15px 30px rgb(25, 25, 25),
                      -15px -15px 30px rgb(60, 60, 60);
      
  
  }
  
  
  .dars-sabaa{
    flex: 1 1 40rem;
      height: 68rem;
      width: 100%;
      
      background-color: rgba(0, 0, 255, 0.205);
      
          border-radius: 30% 40% 25%  45% ;
          background: #212121;
          box-shadow: 15px 15px 30px rgba(113, 36, 136, 0.856),
                      -15px -15px 30px rgb(54, 168, 98);
  
  }
  
  .rousoum{
    
      flex: 1 1 40rem;
      height: 34rem;
     
      /*background-color: rgba(255, 0, 149, 0.247);*/
  
  }
  
  .charit{
    
      flex: 1 1 40rem;
      height: 34rem;
      width: 100%;
      
      background-color: rgba(255, 187, 0, 0.377);
      text-align: center;
  
  }
  
  
  
  /********************************************************************************************************************/
  /************************************************maths-7-------------------------------------------------*/
  
  .maths-7{
  
      padding: 0.2rem;
  }
  
  .dourous-sabaa-maths{
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      padding: 0.1rem;
  }
  
  .dourous-sabaa-maths .dourous-7-maths{
      
      gap: 0.5rem;
      display: flex;
      justify-content: center;
      max-height: 67rem;
      width: 100%;
      padding: 0.5rem;
      flex-wrap: wrap; 
  }
  .dourous-sabaa-maths .dourous-7-maths a{
      flex: 1 1 12.5rem;
      padding: 0.5rem;
      background: linear-gradient(217deg, rgba(50,0,0,.8), rgba(25,0,0,0) 70.71%),
              linear-gradient(127deg, rgba(0,300,0,.8), rgba(0,100,0,0) 70.71%),
              linear-gradient(336deg, rgba(0,200,255,.8), rgba(0,0,0,0) 70.71%);
      border-radius: 0.5rem;
      text-align: center;
      height: 3rem;
      
      
      
  }
  
  .dourous-sabaa-maths .dourous-7-maths .qrs{
      
      color: white;
      font-size: 2.2vmin;
      font-weight: bolder;
      
  
  }
  
  
  .mouhtawa-dourous{
  
      margin: 1rem;
      width: 95%;
      max-height: 65rem;
      background-color: white;
      border-radius: 0.25rem;
      overflow-y: scroll;
      text-wrap: wrap;
      
      border: 3px solid gray;
  }
  
  .mouhtawa-dourous #dars-1, #dars-2, #dars-3, #dars-4, #dars-5, #dars-6, #dars-7, #dars-8, #dars-9, #dars-10{
      
      margin: 1rem;
      width: 95%;
      max-height: 60rem;
      background-color: white;
      border-radius: 0.25rem;
     
  }
  
  
  /****************************************************درس رياضيات سنة سابعة***********************************************/
  /*************************************************************************************************************/
  
  .dars h2{
  
      text-align: center;
      font-size: 2rem;
      font-weight: 800;
      color: blue;
      margin: 0.5rem;
      padding: 0.5rem;
  }
  .dars h3{
  
      margin: 1rem;
      font-size: 1.7rem;
      font-weight: 600;
      color: rgb(1, 1, 80);
  
  }
  
  
  .charit .video-container video{
      position: relative;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: -1;
  }
  
  
  
  .charit{
      text-align: center;
      padding: 2.5rem 0;
      border-radius: 1rem;
   
    box-shadow: rgba(0, 0, 5, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  
    background: linear-gradient(217deg, rgba(0,0,250,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(46, 8, 56, 0.8), rgba(109, 5, 207, 0) 70.71%);
  
  }
  .charit span{
      font-size: 3.5rem;
      background: var(--blue);
      color: #fff;
      border-radius: .5rem;
      padding: .2rem 1rem;
      
  }
  
                          /******************************************************************************************/
                          /*******************************************************************************************/
  
                          .card {
                              position: relative;
                              width: 100%;
                              height: 100%;
                              border-radius: 14px;
                              z-index: 800;
                              overflow: hidden;
                              display: flex;
                              flex-direction: column;
                              align-items: center;
                              justify-content: center;
                              box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
                              ;
                            }
                            
                            .bg {
                              position: absolute;
                              top: 1.1%;
                              left: 0.75%;
                              width: 98%;
                              height: 98%;
                              z-index: 2;
                              background: rgba(255, 255, 255, .95);
                              backdrop-filter: blur(24px);
                              border-radius: 10px;
                              overflow: hidden;
                              outline: 2px solid white;
                            }
                            
                            .blob {
                              position: absolute;
                              z-index: 1;
                              top: 50%;
                              left: 50%;
                              width: 80%;
                              height: 80%;
                              border-radius: 50%;
                              background-color: var(--banafsaji);
                              opacity: 1;
                              filter: blur(12px);
                              animation: blob-bounce 5s infinite ease;
                            }
                            
                            @keyframes blob-bounce {
                              0% {
                                transform: translate(-100%, -100%) translate3d(0, 0, 0);
                              }
                            
                              25% {
                                transform: translate(-100%, -100%) translate3d(100%, 0, 0);
                              }
                            
                              50% {
                                transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
                              }
                            
                              75% {
                                transform: translate(-100%, -100%) translate3d(0, 100%, 0);
                              }
                            
                              100% {
                                transform: translate(-100%, -100%) translate3d(0, 0, 0);
                              }
                            }
                            
                  /******************************************************************************/
                  /*****************************************************************************/
                  /*****************************************************************************/
                  .mawad-sabaa{
  
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    padding: 0.1rem 4rem;
                    gap: 0.5rem;
                
                  }
  
                  .mawad-sabaa button{
                    flex: 1 1 30;
                    
  
                  }
                  
                  .mawad {
                    font-size: 2.5rem;
                    padding: 1rem 2.7rem;
                    font-weight: 800;
                    background: #1f2937;
                    color: white;
                    border: none;
                    position: relative;
                    overflow: hidden;
                    border-radius: 0.6rem;
                    cursor: pointer;
                   
                    
                  }
                  
                  .mawad .gradient {                  
                    width: 100%;
                    height: 100%;
                    border-radius: 0.6em;
                    margin-top: -0.25em;
                    background-image: linear-gradient(
                      rgba(0, 0, 0, 0),
                      rgba(0, 0, 0, 0),
                      rgba(0, 0, 0, 0.3)
                    );
                  }
                  
                  .mawad .label {
                    position: relative;
                    top: -1px;
                  }
                  
                  .mawad .transition {
                    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
                    transition-duration: 500ms;
                    background-color: rgba(16, 185, 129, 0.6);
                    border-radius: 9999px;
                    width: 0;
                    height: 0;
                     position: absolute;
                  /* left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);*/
                  }
                  
                  .mawad:hover .transition {
                    width: 14rem;
                    height: 14rem;
                  }
                  
                  .mawad:active {
                    transform: scale(0.97);
  
                  }
  
                  
  
                     /*******************************************************************************************/
                     /*******************************************************************************************/
                     /********************************************************************************************/
  
                     /* From Uiverse.io by TemRevil */ 
  .rousoum .loading {
      width: 40rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rousoum .loading .loading-box {
      width: 38rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      position: relative;
    }
    .rousoum .loading .loading-box .grid .color {
      background-color: #eee;
      border-radius: 5px;
    }
    .rousoum .loading .loading-box .grid {
      width: 100%;
      display: grid;
      grid-template-rows: 120px 120px 120px;
      grid-template-areas:
        "l1 l2 l3"
        "l1 l2 l4"
        "l6 l6 l5";
      gap: 10px;
    }
    
    .rousoum .loading .loading-box .grid .color.l1 {
      grid-area: l1;
      animation: Loading 6s 0s infinite linear;
    }
    .l2 {
      grid-area: l2;
      animation: Loading 5s 1s infinite linear;
    }
    .l3 {
      grid-area: l3;
      animation: Loading 4s 2s infinite linear;
    }
    .l4 {
      grid-area: l4;
      animation: Loading 3s 3s infinite linear;
    }
    .l5 {
      grid-area: l5;
      animation: Loading 2s 4s infinite linear;
    }
    .l6 {
      grid-area: l6;
      animation: Loading 1s 5s infinite linear;
    }
    
    @keyframes Loading {
      0% {
        background-color: #eee;
      }
      50% {
        background-color: #333;
      }
      100% {
        background-color: #eee;
      }
    }
    
    @media (max-width: 500px) {
      .loading-box {
        width: 90%;
      }
    }
    @media (max-width: 400px) {
      .grid {
        grid-template-rows: 80px 80px 80px;
      }
    }
    
  
    /***************************************************************************************/
    /***************************************************************************************/
  
    button {
      position: relative;
      margin: 0;
      padding: 0.8em 1em;
      outline: none;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: none;
      text-transform: uppercase;
      background-color: #1b0058;
      border-radius: 10px;
      color: #fff;
      font-weight: 300;
      font-size: 18px;
      font-family: inherit;
      z-index: 0;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
    
    button:hover {
      animation: sh0 0.5s ease-in-out both;
    }
    
    @keyframes sh0 {
      0% {
        transform: rotate(0deg) translate3d(0, 0, 0);
      }
    
      25% {
        transform: rotate(7deg) translate3d(0, 0, 0);
      }
    
      50% {
        transform: rotate(-7deg) translate3d(0, 0, 0);
      }
    
      75% {
        transform: rotate(1deg) translate3d(0, 0, 0);
      }
    
      100% {
        transform: rotate(0deg) translate3d(0, 0, 0);
      }
    }
    
    button:hover span {
      animation: storm 0.7s ease-in-out both;
      animation-delay: 0.06s;
    }
    
    button::before,
    button::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #fff;
      opacity: 0;
      transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
      z-index: -1;
      transform: translate(100%, -25%) translate3d(0, 0, 0);
    }
    
    button:hover::before,
    button:hover::after {
      opacity: 0.15;
      transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
    }
    
    button:hover::before {
      transform: translate3d(50%, 0, 0) scale(0.9);
    }
    
    button:hover::after {
      transform: translate(50%, 0) scale(1.1);
    }
    
  
    /***************************************************************************************************/
    /****************************************************************************************************/
    /*****************************************************************************************************/
    /*****************************************************************************************************/
  
   
  .footer{
    height: 15rem;
    /*width: 50rem;*/
    background:  #212121;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    box-shadow: 15px 15px 30px rgb(25, 25, 25),
    -15px -15px 30px rgb(60, 60, 60);
    flex: 1 1 40rem;

}
.cardfooter {
  position: relative;
  width: 80vmin;
  height: 14rem;
  background: lightgrey;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: all 1s ease-in-out;
  border: 2px solid rgb(255, 255, 255);
}

.background {
  position: absolute;
  inset: 0;
  background-color: #4158D0;
  /*background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);*/
  background-image: linear-gradient(217deg, rgba(0,0,250,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(46, 8, 56, 0.8), rgba(109, 5, 207, 0) 70.71%);
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 3px;
}



.icon {
  display: inline-block;
  width: 100%;
  height: 1.3rem;
  object-fit: cover;
}

.icon .img {
  fill: rgba(255, 255, 255, 0.797);
  width: 6vmin;
  height: 3vmin;
  position: absolute;
  top: 0.2rem;
  right: 1rem;
  transition: all 0.5s ease-in-out;
  z-index: 300;

}
.icon p{
  color: white;
  font-size: 1.5rem;
  z-index: 300;
  display: inline-block;
  text-transform: none;
}

.icon .imagelogo-youtube{
  position: relative;
  right: 2.5rem;
  width:3rem ;
  height: 3rem;

}

.imagelogo{

  width:0.9rem ;
  height: 0.9rem;
}

.box {
  position: absolute;
  padding: .67rem;
  text-align: right;
  background: linear-gradient(217deg, rgba(0,0,250,.8), rgba(255,0,0,0) 70.71%),
   linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
   linear-gradient(336deg, rgba(46, 8, 56, 0.8), rgba(109, 5, 207, 0) 70.71%);
  border-top: 2px solid rgb(255, 255, 255);
  border-right: 1px solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}



.box1 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
}

.box1::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon img, p {
  filter: drop-shadow(0 0 5px white);
}

.box2 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon img, p {
  filter: drop-shadow(0 0 5px white);
}

.box3 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon img, p {
  filter: drop-shadow(0 0 5px white);
}

.box4 {
  width: 10%;
  height: 10%;
  bottom: -10%;
  left: -10%;
  transition-delay: 0.6s;
}

.cardfooter:hover {
  transform: scale(1.1);
}

.cardfooter:hover .box {
  bottom: -1px;
  left: -1px;
}

.cardfooter:hover .logo {
  transform: translate(4.3rem, -3.4rem);
  letter-spacing: 0px;
}