@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* line 3, app/assets/stylesheets/home.scss */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* line 11, app/assets/stylesheets/home.scss */
body {
  font-family: "Heebo", sans-serif;
  width: 100%;
}

/* line 16, app/assets/stylesheets/home.scss */
html,
body {
  scroll-behavior: smooth;
}

/* line 22, app/assets/stylesheets/home.scss */
#header .animated-link {
  position: relative;
}

/* line 26, app/assets/stylesheets/home.scss */
#header .animated-link:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  border-radius: 50px;
  left: 0;
  background-color: #0d521b;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

/* line 40, app/assets/stylesheets/home.scss */
#header a:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* line 46, app/assets/stylesheets/home.scss */
.banner-background {
  background-image: url(/assets/banner-20-6b7c11c56c6c54887b7a17d298b3a76cb17d691b05ade53963398887705cb8bb.jpg);
  height: 640px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

/* line 54, app/assets/stylesheets/home.scss */
.poster-1 {
  background-image: url(/assets/zakaat-appeal-919c2379ea213e20f5c28f412e36a52816bf4b5e182cde0744abc04f458cb324.jpg);
  height: 630px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* line 62, app/assets/stylesheets/home.scss */
.poster-2 {
  background-image: url(/assets/poster-2-ab6ca265ad59b5db0ec5ffbcb6160af5eeda454e80e17277d9b7094c7acd3511.jpg);
  height: 630px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* line 70, app/assets/stylesheets/home.scss */
.poster-3 {
  background-image: url(/assets/poster-3-2c6bcd31ac4ea01666c1cf455a1050fb8a12f7b4ef001f83d8b6c90dd7596794.jpg);
  height: 630px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* line 78, app/assets/stylesheets/home.scss */
.poster-4 {
  background-image: url(/assets/poster-4-2f210c90ec95e926e228bdab999916811aac78e234c6c3b32a9dc8caeb25121d.jpg);
  height: 630px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* line 86, app/assets/stylesheets/home.scss */
.slick-dots {
  position: absolute;
  bottom: -35px;
}

/* line 91, app/assets/stylesheets/home.scss */
.slick-dots li button:before {
  font-size: 16px;
}

/* line 95, app/assets/stylesheets/home.scss */
.slick-dots li:hover button:before {
  color: #222;
}

/* line 99, app/assets/stylesheets/home.scss */
.slick-dots li.slick-active button:before {
  color: #222;
  opacity: 100% !important;
}

/* line 104, app/assets/stylesheets/home.scss */
.slick-slide {
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

/* line 110, app/assets/stylesheets/home.scss */
.fa-clock {
  color: #0d521b;
}

/* line 114, app/assets/stylesheets/home.scss */
.salah-calander-row:hover {
  background-color: #0d521b;
  color: #fff;
  transition: 0.3s ease-in-out;
}

/* line 120, app/assets/stylesheets/home.scss */
.salah-calander-row:hover p {
  color: #fff !important;
}

/* line 124, app/assets/stylesheets/home.scss */
.salah-calander-row:hover .fa-clock {
  color: #fff;
}

/* line 128, app/assets/stylesheets/home.scss */
.hamburger-menu {
  transition: all 0.3s ease-in-out !important;
}

/* line 132, app/assets/stylesheets/home.scss */
.tab-button {
  transition: all 0.3s ease-in-out !important;
}

/* line 136, app/assets/stylesheets/home.scss */
.tab-panel {
  display: none;
  transition: 0.3s ease-in-out;
}

/* line 141, app/assets/stylesheets/home.scss */
.tab-panel.active {
  display: block;
}

/* line 145, app/assets/stylesheets/home.scss */
.tab-button.active {
  transition: all 0.3s ease-in-out !important;
}

/* line 149, app/assets/stylesheets/home.scss */
.tab-button.active {
  transition: 0.3s ease-in-out !important;
}

/* line 153, app/assets/stylesheets/home.scss */
.tab-button.active {
  background-color: #0d521b;
  transition: 0.3s ease-in-out;
}

/* line 158, app/assets/stylesheets/home.scss */
.tab-button.active h4 {
  color: #fff;
}

/* line 162, app/assets/stylesheets/home.scss */
.tab-button.active p {
  color: #fff;
}

/* line 166, app/assets/stylesheets/home.scss */
.tab-button.active span {
  color: #fff;
}

/* line 170, app/assets/stylesheets/home.scss */
.tab-button.active .date-time {
  background-color: #5b8c2f;
}

/* line 174, app/assets/stylesheets/home.scss */
#tab-button-1 {
  margin-top: 0 !important;
}

/* line 178, app/assets/stylesheets/home.scss */
#tab-button-2,
#tab-button-3 {
  margin-top: 24px;
}

/* line 183, app/assets/stylesheets/home.scss */
#contact-page,
#our-centers-page {
  background-image: url(/assets/vec-image-ba7dc6c9d597d584ba0e1adb5d66761825ffb7788b557d9830d6fa8fe1ea5d86.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

/* line 191, app/assets/stylesheets/home.scss */
.prev-arrow {
  position: absolute;
  top: 48%;
  z-index: 30;
  left: 12px;
  font-size: 30px;
  color: #fff;
}

/* line 200, app/assets/stylesheets/home.scss */
.next-arrow {
  position: absolute;
  top: 48%;
  z-index: 30;
  right: 12px;
  font-size: 30px;
  color: #fff;
}

/* line 209, app/assets/stylesheets/home.scss */
.namaz {
  display: none;
}

/* line 213, app/assets/stylesheets/home.scss */
.poster-1-desktop {
  background-image: url(/assets/lindley-banner-desktop-1-b2fb5f4655c1cd618e8050e65775ed42aac9381315a2c68e793cca9146f90bf7.jpg);
  height: 400px;
  background-repeat: no-repeat;
}

/* line 220, app/assets/stylesheets/home.scss */
.poster-2-desktop {
  background-image: url(/assets/zakaat-banner-desktop-2-fbf27996603f748d6da0cddf92b33c480465adf711d7a304dc953267723331c4.jpg);
  height: 400px;
  background-repeat: no-repeat;
}

/* line 227, app/assets/stylesheets/home.scss */
.poster-3-desktop {
  background-image: url(/assets/highfield-banner-desktop-3-c60bebaff9ae031d0d8aafecaba5cba7b0515723bb5058e4bbeef3f297437250.jpg);
  height: 400px;
  background-repeat: no-repeat;
}

/* line 234, app/assets/stylesheets/home.scss */
.poster-4-desktop {
  background-image: url(/assets/sadaqat-banner-desktop-4-f50a5e7a8f911f925499756c3992998f044399cac24cd5a46294a36c810b3399.jpg);
  height: 400px;
  background-repeat: no-repeat;
}

/* line 241, app/assets/stylesheets/home.scss */
.poster-5-desktop {
  background-image: url(/assets/Honeybee-115676751bd1608aa3b5736ffe39a30ac222a0e79650cca94031719714a5a3af.jpg);
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* line 249, app/assets/stylesheets/home.scss */
.poster-6-desktop {
  background-image: url(/assets/clever-aef18e57bc103b65e02cd65d3a19a6f209e791e6d24a269ec19647232eeabbc2.jpg);
  height: 400px;
  background-repeat: no-repeat;
}

@media (max-width: 525px) {
  /* line 257, app/assets/stylesheets/home.scss */
  html,
body {
    overflow-x: hidden;
  }
  /* line 262, app/assets/stylesheets/home.scss */
  .slick-posters-desktop {
    display: none;
  }
  /* line 266, app/assets/stylesheets/home.scss */
  #contact-page,
#our-centers-page {
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* line 275, app/assets/stylesheets/home.scss */
  #header .nav-elements {
    background-color: #fff;
    right: 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding-bottom: 1.5rem;
    transition: 0.4s ease-in-out;
    transform: translateX(100%);
  }
  /* line 284, app/assets/stylesheets/home.scss */
  #header .nav-elements ul li {
    padding: 1rem;
  }
  /* line 288, app/assets/stylesheets/home.scss */
  #header .nav-elements ul a {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
  }
  /* line 294, app/assets/stylesheets/home.scss */
  #header .nav-elements .donate-btn {
    margin-left: 1rem;
    margin-top: 1rem;
  }
  /* line 300, app/assets/stylesheets/home.scss */
  #header .nav-show {
    transform: translate(0%) !important;
  }
  /* line 304, app/assets/stylesheets/home.scss */
  #header .toggle .bar-1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  /* line 308, app/assets/stylesheets/home.scss */
  #header .toggle .bar-2 {
    opacity: 0;
  }
  /* line 312, app/assets/stylesheets/home.scss */
  #header .toggle .bar-3 {
    transform: rotate(45deg) translate(-4px, -5px);
  }
  /* line 317, app/assets/stylesheets/home.scss */
  .banner-background {
    height: 550px;
    background-size: cover;
    background-position: center right;
    background-color: rgba(0, 0, 0, 0.1);
    background-blend-mode: multiply;
  }
  /* line 324, app/assets/stylesheets/home.scss */
  .banner-background .banner-text {
    text-align: center;
  }
  /* line 328, app/assets/stylesheets/home.scss */
  .banner-background .banner-text-highlight {
    width: max-content;
    margin-inline: auto;
  }
  /* line 334, app/assets/stylesheets/home.scss */
  .poster-1 {
    height: 518px;
    background-position: bottom;
  }
  /* line 339, app/assets/stylesheets/home.scss */
  .poster-2 {
    height: 518px;
    background-position: bottom;
  }
  /* line 344, app/assets/stylesheets/home.scss */
  .poster-3 {
    height: 518px;
    background-position: bottom;
  }
  /* line 349, app/assets/stylesheets/home.scss */
  .poster-4 {
    height: 518px;
    background-position: bottom;
  }
}

@media (min-width: 525px) {
  /* line 356, app/assets/stylesheets/home.scss */
  .slick-wrapper-mobile {
    display: none;
  }
}

@media (min-width: 768px) {
  /* line 362, app/assets/stylesheets/home.scss */
  .symbol-card:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  /* line 366, app/assets/stylesheets/home.scss */
  .symbol-card:hover {
    color: #fff !important;
    transition: 0.3s ease-in-out;
  }
  /* line 371, app/assets/stylesheets/home.scss */
  .symbol-card:hover p {
    color: #fff !important;
  }
  /* line 375, app/assets/stylesheets/home.scss */
  .symbol-card:hover h4 {
    color: #fff !important;
  }
  /* line 379, app/assets/stylesheets/home.scss */
  .symbol-card:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
}

@media (min-width: 821px) {
  /* line 385, app/assets/stylesheets/home.scss */
  .symbols-mobile-section {
    display: none;
  }
}

@media (max-width: 821px) {
  /* line 391, app/assets/stylesheets/home.scss */
  .symbols-desktop-section {
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */