@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@400..700&family=Darumadrop+One&family=Funnel+Display:wght@300..800&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Reem+Kufi+Ink&family=Reem+Kufi:wght@400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 

body,li,ul,h1,p{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
    text-align: center;
 }
 body {
    /* width: 100%; */
    background: linear-gradient(135deg, #fdf2e9, #f4c95d, #d77a61);
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
    color: #3e3e3e;
    font-family: "Reem Kufi", serif;
    font-size: 1.175rem;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal; 
    
    display: flex;
    flex-wrap: wrap; 

    }
    
    html {
    scroll-behavior: smooth;
    }
    
     header {
        position: fixed;
        width: 100%;
        background-color: #291305;
        color: white;
        padding: 1.2em 0;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
     }
     nav {
        top: 6em;
        /* position: sticky; */
        width: 100%;
        background: rgb(255, 239, 239);
        padding: 1em;
        position: fixed;
  }
  
  nav ul {
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2rem;
  }
  
  nav ul li a {
      color: rgb(26, 24, 24);
      text-decoration: none;
      font-size: 1.3em;
      transition: all 0.3s linear;
  }
  
  nav ul li a:hover {
      background-color: #7B6B43;
      color: white;
      padding: 0.5em;
      border-radius: 5px;
  } 
  .myfont{
    font-family: "Reem Kufi", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal; 
  }
 /* h1 {
    font-size: 2.5em;
    margin: 1em 0;
 } */
 .tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip .tooltiptext {
   visibility: hidden;
   opacity: 0;
   width: 120px;
   background-color: #fff;
   color: #333;
   text-align: center;
   padding: 5px 8px;
   border-radius: 6px;
   
  
   position: absolute;
   top: 50%; 
   right: 10px;
   transform: translateX(-50%);
   z-index: 1;
   
  
   transition: opacity 0.3s;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
 }
 .container {
    z-index: -1;
    position:absolute ;
    transform: translate(-50%, 0);
    top: 11rem;
    margin: auto;
    left: 50%;
    transform: translate(-50%, 0);
    max-height:30rem ;

    /* display: flex;
    flex-flow: column;
    align-items: center;
     */
    width: 70%;
    max-width: 70rem;
    margin: 20px auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* overflow: scroll; */
}

.scroll-table {
    
    max-height:22rem ; /* ارتفاع ثابت مع التمرير */
    overflow: auto;
    border: 2px solid #f4c95d;
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
}

th {
    background: #f4c95d;
    color: #333;
}

tr:nth-child(even) {
    background: #fdf2e9;
}

 .background-video {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -1;
}



.checkbtn {
    font-size: 22px;
    color: black;
    float: right;
    line-height: 80px;
    margin-right: 30px;
    cursor: pointer;
    display: none;
  }
  #check {
    display: none;
  }
  @media (max-width: 1050px) {
    /* label.logo { */
       /* padding-left: 30px; */
    /* } */
    /* nav ul li a { */
      /* font-size: 16px; */
    /* } */
  }
  
  /* Responsive media query code for small screen */
  @media (max-width: 890px) {
 
    .checkbtn {
      display: flex;
    }
    nav{
       display: flex;
       
       /* justify-content: right; */
    }
    /* label.logo { */
      /* font-size: 22px; */
    /* } */
    ul {
     display: flex;
     flex-flow: column;
     top: 9em;
      position: fixed;
      width: 100%;
      height: 80vh;
      background: rgb(255, 239, 239);
      left: -100%;
      text-align: center;
      transition: all .5s;
    }
    nav ul li {
      display: block;
      margin: 0.1rem 0;
      line-height: 30px;
    }
    nav ul li a {
      font-size: 25px;
    }
    a:hover,
    a.active {
      /* background: none; */
      /* color: #0082e6; */
    }
    #check:checked~ul {
      left: 0;
    }
  }
  section {
    background: url("bg.jpg") no-repeat;
    background-size: cover;
    height: calc(100vh - 80px);
  }
  ul,li{
    text-decoration: none;
  }