@import url('https://fonts.googleapis.com/css?family=Cairo:400,700=arabic');
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
p {
  font-style: normal;
  line-height: 2.6;
}
:root {
  --font-size: 2.6rem;
  --font-size-mobile: 2rem;
  --transition: all 0.75s ease-in-out
}

body {
  margin: 0;
  box-sizing: border-box;
  font-size: var(--font-size);
  color: #404040;
  text-align: center;
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-family: 'Amiri', serif;
  height: 100vh;
}

.topnav {
  overflow: hidden;
  background-color: #5752ff;
  width: 100%;
  color: white;
  transition: var(--transition);
  cursor: pointer;
}

.header {
  margin: 2rem;
}

.hide {
  position: absolute;
  visibility: hidden;
  transform: scale(0);
  opacity: 0;
/*   transition: var(--transition); */
}

.hide {
  user-select: none;
  pointer-events: none;
}
#more,
#mor {
  display: none;
}
.topnav a {
  float: right;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
  visibility: visible;
  z-index: 2;
  transition: var(--transition);
  transform: scale(1);
}

/* .topnav a {
  font-size: var(--font-size);
} */
.clear {
  clear: both;
}

.left {
  float: right;
}

.active {
  background-color: rgba(4, 115, 241, 0.863);
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
  font-size: var(--font-size);
}

ul li {
  list-style-type: none;
}

.dropbtn a {
  padding: 0px;
}
.dropdown-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 16rem;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 2;
  transition: max-height 0.75s ease, opacity 0.75s ease;
}
.dropdown-content.showDrop {
  max-height: 100%; /* or large enough for your content */
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}
.dropbtn i {
  transition: transform 0.75s ease;
}

.arrowUpp {
  transform: rotate(180deg);
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  visibility: visible;
  z-index: 2;
  transform: scale(1);
  transition: var(--transition);
}

.topnav a:hover:not(.icon),
.dropdown:hover .dropbtn {
  background-color: rgb(0, 119, 255);
  background-color: hsl(212, 100%, 30%);
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* .dropdown:hover .dropdown-content {
   opacity:1;
   height: auto;
   pointer-events: all;
} */
.arrowUpp {
  transform: rotate(180deg);
  transition: var(--transition);
}

.optons,
#myBtn,
#btn {
  user-select: none;
  cursor: pointer;
}

.read-more {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  outline: none;
  margin-bottom: 3.1rem;
  user-select: none;
  cursor: pointer;
}

.read {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
}

.read:hover {
  background-color: #444;
  color: #fff;
}

#myBtn,
.btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
}

#cities:checked ~ #location {
  display: block;
}

.success {
  background-color: #eee;
  margin-top: 30px;
}

.tooltipClass {
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: help;
}

.tooltipClass::before,
.tooltipClass::after {
  --scale: 0;
  --arrow-size: 1.6rem;
  --tooltip-color: rgba(61, 61, 61, 0.7);
  position: absolute;
  top: -0.16rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0))
    scale(var(--scale));
  transition: 200ms transform;
  transform-origin: bottom center;
  /*   border: 1.2rem solid transparent; */
}

.tooltipClass::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  color: white;
  padding: 0.3rem;
  border-radius: 0.3rem;
  text-align: center;
  /*   width: 100%;
width: max-content; */
  width: 140px;
  background-color: var(--tooltip-color);
}

.tooltipClass:hover::before,
.tooltipClass:hover::after {
  --scale: 1;
}

.tooltipClass::after {
  --translate-y: calc(-1 * var(--arrow-size));
  content: '';
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}

[data-tooltip] {
  font-weight: normal;
  color: #3399ff;
}

.tooltipClassTop {
  background-size: cover;
  background-position: center;
  position: relative;
  cursor: help;
  color: #152492;
}

.tooltipClassTop::before,
.tooltipClassTop::after {
  --scale: 0;
  --arrow-size: 16px;
  --tooltip-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: -0.15rem;
  left: 50%;
  transform: translateX(-50%) translateY(var(--translate-y, 0))
    scale(var(--scale));
  transition: 200ms transform;
  transform-origin: bottom center;
}

.tooltipClassTop::before {
  --translate-y: calc(-100% - var(--arrow-size));
  content: attr(data-tooltip);
  color: white;
  padding: 0.3rem;
  border-radius: 0.3rem;
  text-align: center;
  width: max-content;
  background-color: var(--tooltip-color);
}

.tooltipClassTop:hover::before,
.tooltipClassTop:hover::after {
  --scale: 1;
}

.tooltipClassTop::after {
  --translate-y: calc(-1 * var(--arrow-size));
  content: '';
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--tooltip-color);
  transform-origin: top center;
}

.footers {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
}

/* Footer*/
/* footer { background: rgba(0, 0, 0, .60); color: white; margin:0; padding: 0;}  */
.sdate {
  direction: ltr;
  display: inline-block;
}

.endate {
  display: inline-block;
}

.hdate {
  display: inline-block;
}

footer a {
  color: #3399ff;
}


.disabled {
  cursor: not-allowed;
  user-select: none;
}

.disabled::after {
  cursor: not-allowed;
  user-select: none;
}

.book {
  font-weight: bold;
}

.bold {
  font-weight: bold;
}

.book a {
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #337ab7;
  margin: 10px;
  text-decoration: none;
}

.menu li {
  background-color: #f0f0f0;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #337ab7;
  padding: 10px;
  margin: 10px;
  list-style-type: none;
}

a {
  text-decoration: none;
}

.menu li:hover {
  background-color: #f7f7f7;
}

.showDrop {
  height: auto;
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  z-index: 1;
  transform: scale(1);
  transition: var(--transition);
}
.flex-container {
  min-height: 100px; /* Prevent collapse */
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
}
.flex-container > div {
  margin: 1rem;
  padding: 2rem;
  font-size: var(--font-size);
}
.plus,
.minus {
  position: relative;
  display: inline-block;
  background-color: white;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: rgba(0, 0, 0, 0.7);
  border: none;
  margin-inline-end: 1px;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
}

.plus {
  font-size: 16px;
  font-weight: 700;
}

.minus {
  font-size: 16px;
}

.plus:hover,
.minus:hover {
  background-color: #eeeeee;
}
.modal {
  display: flex;
  position:absolute;
  z-index: 9999;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  font-size: inherit;
  justify-content: center;
  text-align: center;
}
.modal-content {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  font-size: inherit;
  width: 90%;
  max-width: 27rem;
  box-sizing: border-box;
}
  .lang-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
  .lang-btn {
    padding: 0.75rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f9fa;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    width: 100%;
  }
  .lang-btn:hover {
    background: #e9ecef;
  }
.font-control {
  user-select: none;
  pointer-events: none;
}
.fa-home {
  font-weight: bolder;
}
.bookshelf {
  height: 45px;
  display: block;
  overflow: hidden;
  padding: 5px;
  background-color: #fff;
  color: #2080c7;
  word-wrap: break-word;
}

/* start setting */
.css-modal-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#css-modal-checkbox {
  display: none;
}
.css-modal-checkbox {
  display: inline-flex;
  margin: 10px;
  text-decoration: none;
  position: relative;
  line-height: 20px;
  padding: 12px 30px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'cairo', serif;
  background: #337ab7;
  background: #5752ff;
  cursor: pointer;
  border: 2px solid #bfe2ff;
  overflow: hidden;
  z-index: 0;
}
.css-modal-checkbox:hover,
.css-modal-checkbox:active,
.css-modal-checkbox:focus {
  color: #fff;
}
.css-modal-checkbox:before {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  bottom: 0;
  left: 0;
  border-right: 50px solid transparent;
  border-top: 50px solid #2d6b9f;
  transition: transform 0.5s;
  transform: translateX(-100%);
  z-index: -1;
}
.css-modal-checkbox:hover:before,
.css-modal-checkbox:active:before,
.css-modal-checkbox:focus:before {
  transform: translateX(0);
}
#css-modal-checkbox + .cmc {
  display: none;
}
#css-modal-checkbox:checked + .cmc {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: bg 0.5s ease;
  background: rgba(51, 122, 183, 0.7);
}
#css-modal-checkbox:checked + .cmc .cmt {
  font-family: 'cairo', serif;
  font-size: 16px;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  max-height: 70%;
  transition: 0.5s;
  border: 6px solid #bfe2ff;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  overflow: auto;
  animation: scale 0.5s ease;
}
.css-modal-close {
  content: '';
  width: 50px;
  height: 50px;
  border: 6px solid #bfe2ff;
  border-radius: 12px;
  /*   position: absolute; */
  z-index: 10;
  top: 20px;
  right: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 16px 20px rgba(0, 0, 0, 0.2);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
  background-color: #fff;
  background-size: cover;
  animation: move 0.5s ease;
  cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: rgb(90, 9, 219);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* arabic */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/amiri/v27/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/amiri/v27/J7aRnpd8CGxBHpUgtLMA7w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/amiri/v27/J7aRnpd8CGxBHpUutLM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@keyframes scale {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes move {
  0% {
    right: -80px;
  }
  100% {
    right: 20px;
  }
}
@keyframes bg {
  0% {
    background: rgba(51, 122, 183, 0);
  }
  100% {
    background: rgba(51, 122, 183, 0.7);
  }
}

/* end setting */

@media screen and (max-width: 700px) {
  /*  .topnav a:not(:first-child), */
  .dropdown .dropbtn {
    /*   display: none; */
    position: absolute;
    visibility: hidden;
    transform: scale(0);
    opacity: 0;
    transition: var(--transition);
  }
}
@media screen and (min-device-width: 320px) and (max-device-width: 800px) {
    body {
      font-size: var(--font-size-mobile);
    }
    .topnav a.icon {
      width: 1px;
      padding: 1.1rem;
      color: white;
      float: left;
      margin-top: 0.5rem;
      display: block;
      cursor: pointer;
      position: relative;
    }

    .hamburger {
      width: 5rem;
      height: 0.4rem;
      background-color: white;
      float: left;
      opacity: 1;
      cursor: pointer;
      transition: all 0.5s ease;
    }

    .hamburger:first-child {
      margin-top: 0;
    }

    .hamburger:nth-child(2),
    .hamburger:last-child {
      margin-top: 0.7rem;
    }

    .hamburger:last-child {
      margin-bottom: 0.7rem;
    }

    .cursor {
      cursor: pointer;
    }

    .topnav.responsive {
      position: relative;
      transition: var(--transition);
    }

    .topnav.responsive .icon {
      position: absolute;
      left: 0;
      top: 0;
      background: none;
    }

    .topnav.responsive a {
      float: none;
      display: block;
      visibility: visible;
      z-index: 2;
      transform: scale(1);
      font-size: var(--font-size);
      transition: var(--transition);
    }

    .topnav.responsive a:first-child {
      margin-bottom: 1rem;
    }

    .topnav.responsive .dropdown {
      float: none;
    }

    .topnav.responsive .dropdown-content {
      position: relative;
      transition: var(--transition);
    }

    .topnav.responsive .dropdown .dropbtn {
      /*   display: block; */
      font-size: var(--font-size);
      position: relative;
      left: 0;
      width: 100%;
      opacity: 1;
      visibility: visible;
      z-index: 2;
      transform: scale(1);
      transition: var(--transition);
    }

    /* css tabs */
    .tabs-css {
      display: flex;
      margin: auto;
      flex-wrap: wrap;
      max-width: 80%;
    }

    .tabs-label {
      margin: auto;
      padding: 1% 5%;
      cursor: pointer;
      background-color: #dddddd;
      border-radius: 5px;
    }

    .tabs-radio {
      display: none;
    }

    .tabs-content {
      order: 1;
      width: 100%;
      border-bottom: 3px solid #dddddd;
      line-height: 1.5;
      font-size: 1em;
      position: absolute;
      left: 6000px;
      transition: left 0.9s ease-in-out;
    }

    .tabs-radio:checked + .tabs-label {
      font-weight: bold;
      color: #009578;
      border-bottom: 2px solid #009578;
      background-color: #b8acac;
      color: #eeeeee;
    }

    .tabs-radio:checked + .tabs-label + .tabs-content {
      position: relative;
      left: 0;
    }
        .font-group {
  top:0;
}
  }
  .trans {
    transform: translateY(10px) rotateZ(45deg);
    transform-origin: 45%;
  }
@media screen and (max-device-width: 800px) {
  .footers {
    display: none;
  }
}