*, *::before, *::after {
    box-sizing: border-box;
  }
 html * {
    margin: 0;
    direction: inherit;
    font-family: 'Almarai', sans-serif;

  }
  html{
    scroll-behavior: smooth;
    scroll-padding-top: 0px;
    font-size: 14px;
    background-color: #fff;
   }
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(239, 243, 255, 1);
    color: #1644C2;
    min-height: 100vh;
    max-width: 450px;
    margin: 0 auto;
  }
  section{
    flex: 1;

  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  a{
    text-decoration: none;
    font-size: inherit;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    font-family: inherit;
  }
  ul,
  ul li{
     margin:0;
     padding: 0;
     text-indent: 0;
     list-style-type: none;
     font-family: inherit;
     width: 100%;
     font-size: inherit;
  }
  button{
    cursor: pointer;
  }
  input, button, textarea, select {
    font: inherit;
  }
  button{
      outline: none;
      border: none;
      background: transparent
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    color: inherit;
    z-index: 99;

  }

  #root, #__next {
    isolation: isolate;
  }
  .df{
    display: flex;
  }
  .flex-g{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jc-c{
    justify-content: center;
  }
  .jc-sb{
    justify-content: space-between;
  }
  .ai-c{
    align-items: center;
  }
  .ai-e{
    align-items: end;
  }
  .f-st{
    align-items: start;
  }
  .jc-st{
    justify-content: start;
  }
  .g1{
    gap: 1rem;
  }
  .g0{
    gap: 8px;
  }
  .g2{
    gap: 2rem;
  }

  .f-c{
    flex-direction: column;
  }
  .f1{
    flex: 1;
  }
  .wrap {
    margin-right: auto;
    margin-left:  auto;

    max-width: auto;

    padding-inline: 1rem;

  }
  .t-c{
    text-align: center;
  }
  .mc{
    margin: 0 auto;
  }
  .min-h{
    min-height: 624px;
  }
  .rtl{
      direction: rtl;
  }
  .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    overflow: hidden;
  }
/*////////////////////////////////*/
.btn{
    background: #18355e;
   outline: none;
   border: none;
   border-radius: 50px;
   padding: 8px 80px;
    color: #fff;
}
header{
    font-size: 12px;
    padding: 10px 0;
    position: relative;
}
  #profile_name{
    font-weight: bold;
    font-size: 16px;
  }
  .container{
    backdrop-filter: blur(34.6px);
    background: transparent;
    border-radius: 32px 32px 0 0;
    margin-top: -30px;
    padding: 1rem 2rem;
    color: white;
  }
  /* .btn_accept{
    background: rgba(38, 90, 232, 0.31);
    border-radius: 50px;
    /* padding: .5rem 1rem;
  } */
  #timePlace{
    color:#1e1e1e ;
    font-weight: 300;
    font-size: 12px;
    margin-top: 1rem;
  }
  .content_text{
    color:#1E1E1E;
    margin-top: 4rem;
  }

/* footer nav*/
    .back_image{
          width: 100%;
    }
    nav{
        background: #fff;
        position: relative;
        bottom: 0;
    }
    .main_nav ,.sub_nav{
        display: flex;
        justify-content: space-around;

    }
    .main_nav div ,.sub_nav div{
        padding: 1rem;
        cursor: pointer;
    }
    .sub_nav div{
        flex: 1;
    }
    .home{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -20px;
        background: #265AE8;
        border-radius: 50%;
        color: #fff;
        padding: 1rem;
        border: 1px solid #fff;
        width: 86px;height: 86px;
    }
    .border{
        border-left: rgba(38, 90, 232, 0.26) solid 1px;
        border-right: rgba(38, 90, 232, 0.26) solid 1px;
    }

    /*download page */
    .containerr{
        color: white;
        overflow: hidden;
        background: url(assets/back.webp);
        background-position-y: center;

    }
    .containerr  h2{
        backdrop-filter: blur(34.6px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
    }
    .card{
            border-bottom: 1px solid #E9E9E9;
            padding: 1rem;
        }
    .card p{
        color: #3F3F3F;
    }
    .card h2 span{
        font-weight: 300;
        font-size: 12px;
        margin-right: 10px;
    }
    .btn_download{
        padding: .5rem 1rem;
        border-radius: 50px;
        border: solid 1px #1644C2;
    }
    .end{
        color: #3F3F3F;
        margin-top: 1rem;
        text-align: center;
    }
    /***/
    .sociel_media{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        gap: 8px;
    }
    .para{
        color: #575757;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    /*drop down menu */
    #open_menu{
      cursor: pointer;
    }
    .close{
      margin-bottom: 1rem;
      left: 0;
      display: flex;
      justify-content: end;
      cursor: pointer;
  }
  .one{
      display: flex;
      align-items: center;
      gap: 8px;

  }
  .drop_down{
      background: #EFF3FF ;
      border: 1px solid #fff;
      border-radius: 15px;
      position: absolute;
      z-index: 9999;
      left: 0;
      top: 50px;
      right: auto;
      padding: 20px;
      display: none;
  }
  .drop_down.active{
      display: block;
  }
  .drop_down_content{
      display: flex;
      flex-direction: column;

  }
  .line{
      height: 32px;
      width: 2px;
      background-color: #1644C2;
      margin-right: 12.5px;
  }
  .one span{
      border-radius: 50%;
      border: 1px solid #1644C2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size:1.5rem;
      height: 28px;width: 28px;

  }