@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.heading_section{
  position: fixed;
  top: 0;
  right: 0;
  background-color: #253d55;
  min-width: 250px;
  max-width: 1000px;
  height: 80px;
  border-radius: 0 0 25px 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-inline: 25px;
  gap: 20px;
  z-index: 1000;
}

.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
  z-index: 111;
}
.heading_section img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.heading_section a{
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.heading_section a h1{
  text-shadow: rgb(16, 18, 19) 3px 0px 0px, rgb(16, 18, 19) 2.83487px 0.981584px 0px, rgb(16, 18, 19) 2.35766px 1.85511px 0px, rgb(16, 18, 19) 1.62091px 2.52441px 0px, rgb(16, 18, 19) 0.705713px 2.91581px 0px, rgb(16, 18, 19) -0.287171px 2.98622px 0px, rgb(16, 18, 19) -1.24844px 2.72789px 0px, rgb(16, 18, 19) -2.07227px 2.16926px 0px, rgb(16, 18, 19) -2.66798px 1.37182px 0px, rgb(16, 18, 19) -2.96998px 0.42336px 0px, rgb(16, 18, 19) -2.94502px -0.571704px 0px, rgb(16, 18, 19) -2.59586px -1.50383px 0px, rgb(16, 18, 19) -1.96093px -2.27041px 0px, rgb(16, 18, 19) -1.11013px -2.78704px 0px, rgb(16, 18, 19) -0.137119px -2.99686px 0px, rgb(16, 18, 19) 0.850987px -2.87677px 0px, rgb(16, 18, 19) 1.74541px -2.43999px 0px, rgb(16, 18, 19) 2.44769px -1.73459px 0px, rgb(16, 18, 19) 2.88051px -0.838247px 0px;
  margin-bottom: 0 !important;
  font-family: 'Cairo', sans-serif;
}


.profile_btn{
  color: white;
  text-decoration: none;
  font-size: 24px;
  margin-left: 10px;
}

.offcanvas-title{
  text-decoration: none;
  font-size: 28px;
  color: white;
  text-shadow: rgb(16, 18, 19) 3px 0px 0px, rgb(16, 18, 19) 2.83487px 0.981584px 0px, rgb(16, 18, 19) 2.35766px 1.85511px 0px, rgb(16, 18, 19) 1.62091px 2.52441px 0px, rgb(16, 18, 19) 0.705713px 2.91581px 0px, rgb(16, 18, 19) -0.287171px 2.98622px 0px, rgb(16, 18, 19) -1.24844px 2.72789px 0px, rgb(16, 18, 19) -2.07227px 2.16926px 0px, rgb(16, 18, 19) -2.66798px 1.37182px 0px, rgb(16, 18, 19) -2.96998px 0.42336px 0px, rgb(16, 18, 19) -2.94502px -0.571704px 0px, rgb(16, 18, 19) -2.59586px -1.50383px 0px, rgb(16, 18, 19) -1.96093px -2.27041px 0px, rgb(16, 18, 19) -1.11013px -2.78704px 0px, rgb(16, 18, 19) -0.137119px -2.99686px 0px, rgb(16, 18, 19) 0.850987px -2.87677px 0px, rgb(16, 18, 19) 1.74541px -2.43999px 0px, rgb(16, 18, 19) 2.44769px -1.73459px 0px, rgb(16, 18, 19) 2.88051px -0.838247px 0px;
  cursor: pointer;
}

@media(max-width:500px){
  .heading_section{
    position: fixed;
      justify-content: right;
      background-color: #253d55;
      min-width: 100%;
      max-width: 100%;
      border-radius: 0 0 0 0;
      font-size: 12px;
  }
  .heading_section a h1{
    font-size: 20px !important;
}
}

.modal-backdrop {
  --bs-backdrop-zindex: 0;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

.offcanvas-header .btn-close{
  color: white !important;
  background-color: white !important;
}

.logo_section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cairo', sans-serif;
  width: 90%;
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: white !important;
  visibility: hidden;
  background-color: #253D55 !important;
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}

.menu{
  list-style: none;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 10px;
}

.menu .lists{
  padding: 10px;
  background-color: #253D55;
  border-radius: 25px;
  width: 100%;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
}

.menu .lists:hover{
  background-color: #41A3F9;
}

.nav_btn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}

.menu .btn_login ,
.menu .btn_dalil{
  padding: 10px;
  background-color: #162938;
  border-radius: 25px;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
}

.menu .btn_login:hover ,
.menu .btn_dalil:hover{
  background-color: #0B5ED7;
}

.police_footer{
  position: absolute;
  bottom: 5px;
  text-align: center;
  left: 50px;
  color: #f1f1f1af;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}
.offcanvas-title {
  text-decoration: none;
  font-size: 20px;
  color: white;
  text-shadow: rgb(16, 18, 19) 3px 0px 0px, rgb(16, 18, 19) 2.83487px 0.981584px 0px, rgb(16, 18, 19) 2.35766px 1.85511px 0px, rgb(16, 18, 19) 1.62091px 2.52441px 0px, rgb(16, 18, 19) 0.705713px 2.91581px 0px, rgb(16, 18, 19) -0.287171px 2.98622px 0px, rgb(16, 18, 19) -1.24844px 2.72789px 0px, rgb(16, 18, 19) -2.07227px 2.16926px 0px, rgb(16, 18, 19) -2.66798px 1.37182px 0px, rgb(16, 18, 19) -2.96998px 0.42336px 0px, rgb(16, 18, 19) -2.94502px -0.571704px 0px, rgb(16, 18, 19) -2.59586px -1.50383px 0px, rgb(16, 18, 19) -1.96093px -2.27041px 0px, rgb(16, 18, 19) -1.11013px -2.78704px 0px, rgb(16, 18, 19) -0.137119px -2.99686px 0px, rgb(16, 18, 19) 0.850987px -2.87677px 0px, rgb(16, 18, 19) 1.74541px -2.43999px 0px, rgb(16, 18, 19) 2.44769px -1.73459px 0px, rgb(16, 18, 19) 2.88051px -0.838247px 0px;
  cursor: pointer;
}
@media(max-width:768px){
  .offcanvas.offcanvas-end {
    top: 0;
    right: -30px;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
}
.logo_section img{
  margin-right: 25px;
}
.offcanvas-title {
  font-size: 18px;
}
}