header {
  margin: 0; }

.main {
  max-width: 960px; }

p + p, p + .gallery {
  margin-top: 1.62em; }

* + hr {
  margin-top: var(--featured-mrg-top); }

.catbar + *,
header + * {
  margin-top: var(--featured-mrg-top); }

.bubble {
  background: rgba(128, 128, 128, 0.1);
  border-radius: 5px;
  padding: 0.38em 0.81em;
  padding: 1em 1em;
  margin-top: 0.38em;
  margin-inline-end: 0.38em;
  line-height: 1.5 !important; }

.get {
  background: #2d7bf6;
  padding: 0em 1em;
  color: white;
  font-size: 13.3px;
  width: auto;
  max-width: max-content;
  line-height: 27px !important;
  max-height: 27px;
  margin-inline-end: 0; }

.dark-light-cut {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 50vh;
  left: 0;
  overflow: hidden; }

.gallery > img {
  border-radius: 0.62em;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center center;
  background: rgba(128, 128, 128, 0.17); }

.app-hero {
  border-radius: 0.62em; }

iframe {
  border-radius: 0.62em; }

.mini-gallery {
  grid-auto-rows: 1fr; }

.extra-gap {
  grid-gap: calc(var(--featured-gap) * 1.2); }

.sub-sticky {
  position: sticky;
  top: var(--catbar-height);
  padding: 0.81em 0;
  border-bottom: 1px solid var(--bg-sep-light); }
  .sub-sticky:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10px;
    left: -10px;
    background: var(--bg);
    z-index: -1; }

.pre-sub-sticky {
  position: sticky;
  top: calc(var(--catbar-height) + var(--pre-sub-sticky-height) + 1px);
  height: 1px; }

.after-gallery {
  height: calc(var(--featured-mrg-btm) + 0.19em);
  min-height: calc(var(--featured-mrg-btm) + 1.19em); }

.app-icon-shadow {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.17); }

.app-icon-inner-shadow {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.17); }

.ended {
  background: rgba(145, 145, 145, 0.18);
  color: #939393; }

.my-hero-2 {
  aspect-ratio: 700 / 855;
  background: url(images/bandar-photo-2.png);
  background-size: cover;
  position: relative; }
  .my-hero-2:before {
    content: "";
    position: absolute;
    height: 102%;
    width: 268.5%;
    aspect-ratio: 1897 / 863;
    background: url(images/bandar-2022.png);
    background-size: cover;
    z-index: 0;
    /* opacity: 0.5; */
    left: -58%;
    top: -2%; }

.caramella-hero {
  background: #bbe2e4; }

.app-wrapper {
  position: relative; }

.app-wrapper-before {
  content: "";
  position: absolute;
  width: 100%;
  top: calc( (var(--catbar-height)) * -1);
  height: var(--catbar-height);
  z-index: 3; }

.app-icon {
  background: url(images/other-apps.jpg);
  min-width: 50px;
  background-size: auto 50px; }
  .app-icon.qr {
    background-position: 0 0; }
  .app-icon.iquran {
    background-position: calc(-50px * 7) 0; }
  .app-icon.ipray {
    background-position: calc(-50px * 9) 0; }
  .app-icon.isubha {
    background-position: calc(-50px * 8) 0; }
  .app-icon.t2do {
    background-position: calc(-50px * 5) 0; }
  .app-icon.groups {
    background-position: calc(-50px * 4) 0; }
  .app-icon.faces {
    background-position: calc(-50px * 3) 0; }
  .app-icon.rakaat {
    background-position: calc(-50px * 1) 0; }
  .app-icon.qd {
    background-position: calc(-50px * 2) 0; }
  .app-icon.coronamap {
    background-position: calc(-50px * 6) 0; }
  .app-icon.old-icon {
    border-radius: 9px; }

.sep-btm-450 {
  padding-bottom: 1em; }

.eyes {
  fill: #f9f9f9; }
  @media (prefers-color-scheme: dark) {
    .eyes {
      fill: #222126; } }

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; }
  .video-wrapper .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #000), color-stop(1, #000));
    mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #000), color-stop(1, #000)); }

#lang-wrapper {
  align-self: flex-end;
  font-size: 0.9em;
  direction: rtl;
  max-height: 24px;
  min-width: 60px; }
  #lang-wrapper p {
    line-height: 24px;
    height: 24px;
    max-height: 24px; }

.arabic #lang-wrapper {
  align-self: flex-start; }

#lang {
  max-height: 27px; }

[lang="ar"] {
  direction: rtl;
  display: none; }

body:not(.arabic) {
  direction: ltr; }

body.arabic {
  direction: rtl; }
  body.arabic [lang="ar"] {
    display: flex; }
  body.arabic [lang="en"] {
    display: none; }
  body.arabic header > div {
    direction: ltr; }
    body.arabic header > div .twitter-header {
      direction: ltr;
      justify-content: flex-end; }

.three-perso {
  background: rgba(128, 128, 128, 0.17);
  border-radius: 0.62em;
  padding: 1em 1em 0;
  box-sizing: border-box; }
  .three-perso img {
    height: calc(100% - 1em) !important; }

.style {
  background: rgba(128, 128, 128, 0.17);
  border-radius: 0.62em;
  padding: 0 2em;
  box-sizing: border-box; }
  .style img {
    height: calc(100% - 4em) !important; }

.beautiful {
  background: rgba(128, 128, 128, 0.17);
  border-radius: 0.62em;
  padding: 0.7em;
  box-sizing: border-box; }
  .beautiful img {
    height: calc(100% - 1.4em) !important; }

.not-found {
  background: rgba(128, 128, 128, 0.1); }

.pre-header {
  max-height: 24px; }

@media screen and (max-width: 550px) {
  header {
    flex-direction: column-reverse !important; }
    header .my-hero {
      left: -16%;
      position: relative;
      width: 80%;
      max-width: 230px; } }
@media screen and (max-width: 450px) {
  .get {
    margin-inline-start: auto; }

  .sep-btm-450 {
    border-bottom: 1px solid var(--lite-line);
    padding-bottom: 1.19em; }
    .sep-btm-450 small {
      padding: 0;
      padding-inline-end: 1em; } }
em {
  font-style: normal;
  color: #5b5313;
  background: rgba(228, 242, 0, 0.74);
  font-weight: 500;
  padding: 0 0.27em; }

.award-row {
  padding: 32px 0 26px;
  box-sizing: border-box;
  border-top: 1px solid rgba(125, 124, 130, 0.14); }
  .award-row img {
    margin-bottom: 15px; }
  .award-row small {
    font-style: italic; }
  .award-row .bae {
    margin-bottom: 6px; }
  .award-row:first-of-type {
    border: none; }

@media (prefers-color-scheme: dark) {
  em {
    color: yellow;
    background: #453e00;
    font-weight: 400;
    color: #222126;
    background: #e2e1e6;
    color: #222126;
    background: rgba(226, 225, 229, 0.82); } }
body {
  background-image: url(images/bandar-logo.svg);
  background-repeat: no-repeat;
  background-size: 1700px;
  background-position-x: center;
  background-position-y: 66px; }
  body .main {
    background: transparent; }

@media screen and (max-width: 900px) {
  body {
    background-size: 1500px;
    background-position-y: 16px; } }
@media screen and (max-width: 660px) {
  body {
    background-size: 1250px;
    background-position-y: 6px; } }
@media screen and (max-width: 550px) {
  body {
    background-size: 1120px;
    background-position-y: 27px; } }
@media screen and (max-width: 430px) {
  body {
    background-size: 820px;
    background-position-y: 104px; } }

/*# sourceMappingURL=bandar.css.map */