@charset "utf-8";

/*
Theme Name: Qiblah - Mosque & Islamic Centre HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Responsive Stylesheet %%%%%%%
Desktop-first max-width cascade: 1399 / 1199 / 991 / 767 / 575
*/

/*======================
Max Width 1399px
========================*/
@media (max-width: 1399.98px) {
  /* Header */
  .qb-header .header-inner {
    gap: 16px;
  }
  .qb-logo img {
    height: 46px;
  }
  .qb-header .header-right {
    gap: 10px;
  }
  /* Header */
  .qb-nav > ul > li > a {
    gap: 5px;
    padding: 12px 7px;
    font-size: 14px;
  }
  /* Everyday Tools */
  .qb-tool .tool-value {
    font-size: 26px;
  }
  /* News Cards */
  .qb-news-card.is-wide .news-media {
    height: 380px;
  }
}

/*======================
Max Width 1199px
========================*/
@media (max-width: 1199.98px) {
  /* General */
  .sec-pt-120 { padding-top: 110px; }
  .sec-pb-120 { padding-bottom: 110px; }
  .sec-pb-90 { padding-bottom: 80px; }
  /* Header */
  .qb-topbar .topbar-social {
    display: none;
  }
  .qb-topbar .topbar-next {
    padding-right: 0;
    border-right: 0;
  }
  /* Header */
  .qb-menu-toggle {
    display: inline-flex;
  }
  .qb-nav {
    display: none;
  }
  /* Hero */
  .qb-hero-arrow.is-prev {
    left: 18px;
  }
  .qb-hero-arrow.is-next {
    right: 18px;
  }
  /* Hero */
  .qb-prayer-bar {
    grid-template-columns: repeat(6, 1fr);
  }
  .qb-prayer-bar .bar-head {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 22px;
    padding: 16px 22px;
  }
  .qb-prayer-bar .bar-head .qb-eyebrow {
    margin: 0;
  }
  .qb-prayer-bar .bar-head b {
    font-size: 18px;
  }
  .qb-prayer-bar .bar-head .hijri-year {
    display: inline;
    margin: 0;
  }
  /* Welcome */
  .welcome-figure {
    padding-right: 60px;
  }
  .welcome-seal {
    width: 124px;
    height: 124px;
  }
  .welcome-seal b {
    font-size: 34px;
  }
  /* Everyday Tools */
  .qb-tool-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* News Cards */
  .qb-news-card .news-media {
    height: 270px;
  }
  .qb-news-card.is-wide .news-media {
    height: 330px;
  }
  /* Inner Page Components */
  .qb-board {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Tool Pages */
  .cal-list {
    grid-template-columns: 1fr;
  }
  /* Content Pages */
  .qb-khutbah-list.is-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Content Pages */
  .qb-event-card {
    grid-template-columns: 100px 300px 1fr;
    gap: 24px;
  }
  /* Shop Blog And Account */
  .product-add {
    opacity: 1;
    transform: none;
  }
  /* Footer */
  .qb-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/*======================
Max Width 991px
========================*/
@media (max-width: 991.98px) {
  /* General */
  .sec-pt-120 { padding-top: 92px; }
  .sec-pb-120 { padding-bottom: 92px; }
  .sec-pb-90 { padding-bottom: 70px; }
  /* General */
  .qb-section-head {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Header */
  .qb-topbar .topbar-left {
    display: none;
  }
  .qb-topbar .topbar-inner {
    justify-content: center;
  }
  /* Page Banner */
  .qb-page-banner {
    padding: 210px 0 90px;
  }
  /* Hero */
  .qb-hero {
    min-height: 780px;
  }
  .qb-hero-arrow {
    top: auto;
    bottom: 136px;
    margin-top: 0;
    width: 48px;
    height: 48px;
  }
  .qb-hero .hero-count,
  .qb-hero .hero-count.swiper-pagination-horizontal {
    bottom: 158px;
  }
  /* Welcome */
  .welcome-figure {
    margin: 0 auto;
  }
  .qb-prayer-bar-wrap + .qb-welcome {
    padding-top: 110px;
  }
  /* Counters And Goal */
  .qb-counter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .qb-counter:nth-child(3) {
    border-left: 0;
  }
  .qb-counter:nth-child(n+3) {
    border-top: 1px solid var(--qb-color-line);
  }
  /* Counters And Goal */
  .sadaqah-card {
    grid-template-columns: 1fr;
  }
  .sadaqah-film {
    min-height: 300px;
  }
  /* Qibla Line */
  .qb-qibla-line .col-lg-7 {
    margin-top: 50px;
  }
  /* Gallery */
  .qb-mosaic {
    grid-template-rows: 220px 220px;
  }
  /* News Cards */
  .qb-news-card.is-wide .news-media {
    height: 280px;
  }
  /* Home Two */
  .qb-hero.is-video .qb-hero-arrow {
    bottom: 50px;
  }
  .qb-hero .hero-count.is-low,
  .qb-hero .hero-count.is-low.swiper-pagination-horizontal {
    bottom: 72px;
  }
  /* Home Two */
  .imam-figure {
    margin: 0 auto;
  }
  /* Home Two */
  .five-intro {
    position: static;
  }
  .five-card {
    top: 100px;
  }
  .five-card:nth-child(2) { top: 116px; }
  .five-card:nth-child(3) { top: 132px; }
  .five-card:nth-child(4) { top: 148px; }
  .five-card:nth-child(5) { top: 164px; }
  /* Home Two */
  .qb-upcoming,
  .qb-schedule {
    grid-template-columns: 1fr;
  }
  .upcoming-photo,
  .schedule-photo {
    min-height: 340px;
  }
  .schedule-photo {
    order: -1;
  }
  .upcoming-panel,
  .schedule-panel {
    padding: 70px 30px;
  }
  /* Inner Page Components */
  .qb-sticky {
    position: static;
  }
  /* Inner Page Components */
  .qb-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Inner Page Components */
  .qb-table .is-col-md {
    display: none;
  }
  /* Inner Page Components */
  .qb-steps {
    grid-template-columns: 1fr;
  }
  /* Tool Pages */
  .rt-today {
    grid-template-columns: 1fr 1fr;
  }
  .rt-today > div:nth-child(3) {
    border-left: 0;
  }
  .rt-today > div:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* Content Pages */
  .qb-event-card {
    grid-template-columns: 90px 1fr;
  }
  .ec-media {
    grid-column: 2;
    grid-row: 1;
    height: 220px;
  }
  .ec-body {
    grid-column: 1 / -1;
    padding: 0 6px 6px;
  }
  /* Community Pages */
  .qb-timeline {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0 0 0 34px;
  }
  .qb-timeline::before {
    left: 7px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
    background: var(--qb-color-gold);
  }
  .tl-item::before {
    left: -34px;
    top: 8px;
  }
  /* Community Pages */
  .pray-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  /* Community Pages */
  .madrasa-figure {
    margin: 0 auto;
  }
  /* Community Pages */
  .contact-split {
    grid-template-columns: 1fr;
  }
  .contact-map iframe {
    height: 320px;
  }
  /* Footer */
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 36px;
  }
}

/*======================
Max Width 767px
========================*/
@media (max-width: 767.98px) {
  /* General */
  .sec-pt-120 { padding-top: 78px; }
  .sec-pb-120 { padding-bottom: 78px; }
  .sec-pt-60 { padding-top: 48px; }
  .sec-pb-60 { padding-bottom: 48px; }
  /* General */
  .qb-section-title,
  .qb-section-head {
    margin-bottom: 42px;
  }
  .qb-eyebrow {
    font-size: 12px;
    letter-spacing: 0.16em;
  }
  .qb-eyebrow::after,
  .text-center .qb-eyebrow::before {
    width: 26px;
  }
  .qb-lead {
    font-size: 17px;
  }
  /* Hero */
  .qb-hero {
    height: auto;
    min-height: 0;
  }
  .qb-hero .hero-slide {
    min-height: 760px;
  }
  .qb-hero .hero-calligraphy {
    width: 220px;
  }
  .qb-hero .hero-content p {
    font-size: 17px;
  }
  /* Hero */
  .qb-prayer-bar-wrap {
    margin-top: -80px;
  }
  .qb-prayer-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .qb-prayer-bar .bar-cell.is-next {
    transform: none;
  }
  .qb-prayer-bar .qb-time {
    font-size: 22px;
  }
  /* Everyday Tools */
  .qb-tool-grid {
    grid-template-columns: 1fr 1fr;
  }
  .qb-tool {
    min-height: 260px;
  }
  /* Video Band */
  .qb-video-band {
    padding: 110px 0;
  }
  .qb-play {
    width: 80px;
    height: 80px;
  }
  /* Gallery */
  .qb-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 320px;
  }
  .qb-mosaic .mosaic-item.is-tall {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  /* Home Two */
  .strip-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 34px;
  }
  .strip-item:nth-child(3) {
    border-left: 0;
  }
  /* Inner Page Components */
  .qb-table .is-col-sm {
    display: none;
  }
  .qb-table th,
  .qb-table td {
    padding: 12px 8px;
    font-size: 14px;
  }
  /* Inner Page Components */
  .qb-toolbar .qb-search,
  .qb-toolbar .qb-select {
    width: 100%;
  }
  .qb-toolbar .toolbar-group {
    width: 100%;
  }
  /* Tool Pages */
  .cal-cell {
    min-height: 70px;
    padding: 6px;
  }
  .cal-cell b {
    font-size: 17px;
  }
  .cal-cell em {
    display: none;
  }
  .cal-cell small {
    font-size: 10.5px;
  }
  .cal-week,
  .cal-grid {
    gap: 4px;
  }
  /* Content Pages */
  .donate-funds {
    grid-template-columns: 1fr 1fr;
  }
  /* Content Pages */
  .qb-khutbah-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kh-body {
    padding: 0 4px 4px;
  }
  .qb-khutbah-list.is-grid {
    grid-template-columns: 1fr;
  }
  /* Shop Blog And Account */
  .shop-filterbar .qb-search {
    width: 100%;
  }
  /* Shop Blog And Account */
  .cart-head {
    display: none;
  }
  .cart-line {
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
  }
  .cl-product {
    grid-column: 1 / -1;
  }
  .cl-price {
    display: none;
  }
  .cart-actions > .qb-btn {
    margin-left: 0;
  }
  /* Shop Blog And Account */
  .post-media,
  .bd-figure {
    height: 280px;
  }
  .post-body {
    padding: 26px 22px 28px;
  }
  .post-quote {
    padding: 36px 26px;
  }
  .bd-photos a {
    height: 160px;
  }
  /* Footer */
  .qb-footer .footer-bottom-inner {
    justify-content: center;
    text-align: center;
  }
  .qb-footer .footer-bottom-inner .qb-star {
    display: none;
  }
}

/*======================
Max Width 575px
========================*/
@media (max-width: 575.98px) {
  /* General */
  /* a full-width container has 12px of padding: wider gutters would hang past the screen */
  .row.g-5,
  .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
  /* General */
  .sec-pt-120 { padding-top: 66px; }
  .sec-pb-120 { padding-bottom: 66px; }
  .sec-pb-90 { padding-bottom: 56px; }
  /* Header */
  .qb-topbar {
    font-size: 12.5px;
  }
  .qb-topbar .topbar-inner {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 0;
  }
  .qb-topbar .topbar-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
  }
  .qb-theme-toggle .theme-label {
    display: none;
  }
  /* Header */
  .qb-header {
    top: 74px;
  }
  .qb-header .header-inner {
    height: 78px;
  }
  .qb-logo img {
    height: 42px;
  }
  .qb-header .header-donate {
    display: none;
  }
  .qb-header.is-scrolled .header-inner {
    height: 68px;
  }
  .qb-header.is-scrolled .qb-logo img {
    height: 38px;
  }
  /* Offcanvas And Bag Drawer */
  .qb-offcanvas .oc-group ul {
    grid-template-columns: 1fr;
  }
  .qb-offcanvas .offcanvas-head,
  .qb-bag-drawer .bag-head,
  .qb-offcanvas .offcanvas-nav,
  .qb-offcanvas .offcanvas-foot,
  .qb-offcanvas .oc-prayer {
    padding-left: 22px;
    padding-right: 22px;
  }
  /* Page Banner */
  .qb-page-banner {
    padding: 200px 0 70px;
  }
  .qb-page-banner p {
    font-size: 16.5px;
  }
  /* Hero */
  .qb-hero .hero-slide {
    min-height: 720px;
  }
  .qb-hero .hero-title {
    font-size: clamp(34px, 10.5vw, 46px);
  }
  .qb-hero .hero-content {
    padding-top: 170px;
    padding-bottom: 170px;
  }
  /* Welcome */
  .welcome-figure {
    padding: 0 34px 60px 0;
  }
  .welcome-seal {
    left: -10px;
    bottom: 70px;
    width: 104px;
    height: 104px;
  }
  .welcome-seal .seal-star {
    inset: 10px;
  }
  .welcome-seal b {
    font-size: 28px;
  }
  .welcome-seal > span:last-child {
    font-size: 9.5px;
  }
  .welcome-facts {
    gap: 12px;
  }
  .welcome-facts b {
    font-size: 34px;
  }
  /* Counters And Goal */
  .qb-counter {
    padding: 28px 20px 26px;
  }
  .qb-counter .counter-ic {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
  }
  /* Counters And Goal */
  .qb-goal {
    padding: 24px 20px;
  }
  .qb-goal .goal-foot .qb-btn {
    margin-left: 0;
    width: 100%;
  }
  /* Counters And Goal */
  .sadaqah-head {
    flex-wrap: wrap;
  }
  .sadaqah-film {
    min-height: 240px;
  }
  /* Everyday Tools */
  .qb-tool-grid {
    grid-template-columns: 1fr;
  }
  /* Events And Khutbah */
  .qb-event-row {
    grid-template-columns: 68px 1fr;
    column-gap: 14px;
    padding: 14px;
  }
  .qb-event-row .event-date {
    height: 92px;
  }
  .qb-event-row .event-date b {
    font-size: 30px;
  }
  .qb-event-row .event-title {
    font-size: 16.5px;
  }
  /* Events And Khutbah */
  .qb-player {
    flex-wrap: wrap;
    border-radius: var(--qb-radius);
  }
  .qb-player .player-track {
    flex-basis: calc(100% - 62px);
  }
  .qb-player .player-time {
    margin-left: 60px;
    margin-right: auto;
  }
  /* Qibla Line */
  .qibla-others {
    grid-template-columns: 1fr 1fr;
  }
  .qibla-compass {
    width: 112px;
    height: 112px;
    bottom: -18%;
  }
  .compass-needle {
    height: 70px;
    margin-top: -35px;
  }
  .compass-needle::before {
    top: 12px;
    bottom: 35px;
  }
  .qibla-readout b {
    font-size: 25px;
  }
  /* Gallery */
  .qb-mosaic {
    grid-template-rows: 150px 150px 260px;
    gap: 8px;
  }
  /* News Cards */
  .qb-news-card .news-media,
  .qb-news-card.is-wide .news-media {
    height: 250px;
  }
  .qb-news-card .news-tags {
    gap: 6px;
  }
  .qb-news-card .news-tags a {
    height: 30px;
    padding: 0 11px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .qb-news-card .news-body {
    margin: -40px 10px 0;
    padding: 24px 20px 26px;
  }
  /* Home Two */
  .imam-figure {
    padding: 22px 0 0 22px;
  }
  .imam-badge {
    right: -6px;
    padding: 14px 16px;
  }
  .imam-badge b {
    font-size: 34px;
  }
  /* Home Two */
  .five-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 26px;
  }
  .five-card .five-side {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* Home Two */
  .qb-countdown {
    gap: 8px;
  }
  .qb-countdown > div {
    padding: 14px 4px 12px;
  }
  .qb-countdown span {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .qb-schedule-table th,
  .qb-schedule-table td {
    padding: 12px 14px;
  }
  /* Home Two */
  .qb-fitrah {
    padding: 32px 24px;
  }
  .fitrah-row {
    flex-wrap: wrap;
  }
  /* Inner Page Components */
  .qb-card,
  .qb-panel-night {
    padding: 24px 20px;
  }
  /* Inner Page Components */
  .qb-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Inner Page Components */
  .qb-table .is-col-xs {
    display: none;
  }
  .qb-table th,
  .qb-table td {
    padding: 10px 5px;
    font-size: 13px;
  }
  .qb-table thead th {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  /* Inner Page Components */
  .qb-board {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .qb-board .board-tile.is-next {
    transform: none;
  }
  /* Tool Pages */
  .pt-next {
    align-items: flex-start;
    width: 100%;
    text-align: start;
  }
  /* Tool Pages */
  .qibla-stage {
    min-height: 380px;
  }
  .qibla-dial > span:not(.compass-needle):not(.dial-ring) {
    font-size: 16px;
  }
  .compass-needle.is-large i {
    font-size: 22px;
  }
  /* Tool Pages */
  .rt-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .rt-today > div {
    padding: 20px 18px;
  }
  /* Tool Pages */
  .cal-day {
    grid-template-columns: 64px 1fr;
    gap: 14px;
  }
  .cal-day-date {
    height: 70px;
  }
  .cal-day-left {
    grid-column: 2;
    flex-direction: row;
    gap: 8px;
  }
  .cal-day-left b {
    font-size: 22px;
  }
  .cv-hijri {
    grid-template-columns: 70px 1fr 84px;
  }
  /* Content Pages */
  .amount-chip {
    min-width: 0;
    flex: 1 1 28%;
  }
  /* Content Pages */
  .kd-figure {
    height: 280px;
  }
  .kd-tabs {
    grid-template-columns: 1fr 1fr;
    margin: -24px 10px 0;
  }
  /* Content Pages */
  .qb-quote {
    padding: 70px 22px 24px;
  }
  .qb-author {
    flex-direction: column;
    padding: 24px;
  }
  .qb-post-nav {
    grid-template-columns: 1fr;
  }
  /* Content Pages */
  .comment-children {
    margin-left: 30px;
  }
  .comment-list .comment > img {
    width: 48px;
    height: 48px;
  }
  .comment-body {
    margin-left: 64px;
  }
  /* Content Pages */
  .qb-event-card {
    grid-template-columns: 1fr;
  }
  .ec-date {
    flex-direction: row;
    gap: 10px;
    padding: 12px;
  }
  .ec-date b {
    font-size: 34px;
  }
  .ec-media {
    grid-column: 1;
    grid-row: auto;
  }
  /* Content Pages */
  .ed-photo {
    height: 260px;
  }
  .ed-strip {
    grid-template-columns: 1fr;
  }
  .ed-date {
    flex-direction: row;
    gap: 10px;
    padding: 10px;
  }
  .ed-date b {
    font-size: 30px;
  }
  /* Community Pages */
  .pray-stage {
    padding: 18px;
  }
  .pray-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .pray-text {
    flex-direction: column;
    gap: 4px;
  }
  /* Community Pages */
  .qb-person {
    padding: 10px 10px 18px;
    border-radius: 18px;
  }
  .qb-person h3 {
    font-size: 17px;
  }
  .person-role {
    margin-bottom: 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .qb-person .qb-social {
    gap: 6px;
  }
  /* Community Pages */
  .madrasa-stats {
    grid-template-columns: 1fr 1fr;
  }
  .madrasa-note {
    left: 10px;
  }
  /* Community Pages */
  .sd-photo {
    height: 280px;
  }
  .sd-gallery a {
    height: 150px;
  }
  /* Community Pages */
  .contact-panel,
  .contact-form {
    padding: 34px 22px;
  }
  /* Shop Blog And Account */
  .pd-tabs {
    padding: 24px 18px;
  }
  /* Shop Blog And Account */
  .account-form,
  .account-panel {
    padding: 36px 22px;
  }
  .account-row {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Footer */
  .footer-cta {
    margin-top: 80px;
    padding: 36px 24px;
    border-radius: 20px;
  }
  /* Footer */
  .qb-footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .qb-footer .footer-widgets {
    padding: 70px 0 50px;
  }
}