@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
:root {
  --page-bg: #f7fdf9;
  --text: #0f172a;
  --muted: #94a3b8;
  --crumb: #64748b;
  --divider: #e6e9f2;}


      html,
      body {
        margin: 0;
        padding: 0;  font-family: "Cairo", sans-serif;
      }

      html {
        scroll-padding-top: 110px; /* adjust if your navbar is taller */
      }

      section {
        margin: 0 !important;
      }

      .no-gap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      .serviceCard {
        cursor: pointer;
      }
.hajj-slider{ width:100%; position:relative; }

/* ====== MAIN SIZE ====== */
#hajjCarousel{
  position:relative;
  overflow:hidden;
  background:#111;

  /* pixel-like values from screenshot */
  height: 650px;
  --footer-h: 120px;
  --title-h: 74px;
  --title-w: 1011px;
}

/* responsive height */
@media (max-width: 992px){
  #hajjCarousel{ height: 70vh; min-height: 520px; }
}
@media (max-width: 576px){
  #hajjCarousel{
    height: 62vh; min-height: 460px;
    --footer-h: 110px;
    --title-h: 60px;
  }
}

#hajjCarousel .carousel-inner,
#hajjCarousel .carousel-item{ height:100%; }
.navbar-nav a:hover{border-bottom:2px solid #15554D;}
/* ====== BACKGROUND + OVERLAY ====== */
.slide-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}

.slide-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

/* ====== LEFT PATTERN ====== */
.decor-left{
  position:absolute; left:0; top:0;
  height:100%; width:auto;
  z-index:3;
  pointer-events:none;
}

/* ====== CENTER LOGO ====== */
.logo-center{
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: 85px;
  width: 380px;
  height:auto;
  z-index:4;
  pointer-events:none;
}
@media (max-width: 992px){ .logo-center{ top:70px; width:280px; } }
@media (max-width: 576px){ .logo-center{ top:60px; width:210px; } }

/* ====== BOTTOM RIGHT LOGOS ====== */
.brand-bottom-right{
  position:absolute;
  right: 55px;
  bottom: calc(var(--footer-h) + 40px);
  display:flex;
  align-items:flex-end;
  gap: 14px;
  z-index:4;
  pointer-events:none;
}
.brand-bottom-right .kaaba{ width:135px; height:auto; }
.brand-bottom-right .calligraphy{ width:260px; height:auto; }

@media (max-width: 992px){
  .brand-bottom-right{ right:20px; bottom: calc(var(--footer-h) + 25px); }
  .brand-bottom-right .kaaba{ width:95px; }
  .brand-bottom-right .calligraphy{ width:190px; }
}
@media (max-width: 576px){
  .brand-bottom-right{ right:12px; bottom: calc(var(--footer-h) + 15px); gap:10px; }
  .brand-bottom-right .kaaba{ width:75px; }
  .brand-bottom-right .calligraphy{ width:155px; }
}

/* ====== DOTS (on dark area) ====== */
.slider-dots{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom: calc(var(--footer-h) + (var(--title-h)/2) + 18px);
  z-index:50;
  margin:0;
  gap:10px;
}

/* dots look like screenshot */
.slider-dots [data-bs-target]{
  width:12px; height:12px;
  border-radius:50%;
  border:0;
  background: rgba(255,255,255,.45);
  opacity:1;
  margin:0 !important;
}
.slider-dots .active{
  background:#fff;
}
/* Main Container */
.hajj-video-wrapper {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust as needed */
  overflow: hidden;
  background-color: #000;
}
.bg_fq{    background: linear-gradient(90deg, rgba(176, 142, 97, 1) 0%, rgba(148, 121, 78, 1) 51%, rgba(124, 98, 63, 1) 100%);
}
.text-warning{    color: rgb(211 156 66) !important ;}
/* Video Stays at the bottom */
.hajj-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

/* Dark Tint Layer */
.hajj-overlay-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(0 0 0), rgba(0, 0, 0, 0.3));
  z-index: 1;
}
.hajj-login-anchor h4{font-size: 1.3rem !Important;
        line-height: 32px !Important;;}
/* Footer Container - Ensure this shows above overlay */
.slider-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none; /* Allows clicks to pass through to the button */
}

/* New Login Content - Positioned Bottom Right (start-0 in RTL) */
.hajj-login-anchor {
  position: absolute;
  bottom: 60px; /* Sits above the footer lines */
  start: 40px;  /* 'start' is Right side in RTL */
  z-index: 10;   /* High z-index to stay on very top */
}

/* Button Styling */
.login-custom-btn {
border-radius: 0;
  padding: 15px 25px;
  border-width: 0px;
  transition: all 0.3s ease;
  pointer-events: auto; /* Makes button clickable */
  background: linear-gradient(90deg, rgba(176, 142, 97, 1) 0%, rgba(148, 121, 78, 1) 51%, rgba(124, 98, 63, 1) 100%);
  border-radius:6px;
  font-size: 20px;
  font-weight: bold;

}

.login-custom-btn:hover {
  background-color: #ffffff;
  color: #fff !important;
}
/* ====== WHITE STRIP ====== */
/*.slider-footer{*/
/*  position:absolute;*/
/*  left:0; right:0; bottom:0;*/
/*  height: var(--footer-h);*/
/*  background:#fff;*/
/*  z-index:20;*/
/*  overflow:hidden;*/
/*}*/

/* subtle white pattern (center/left) */
.footer-pattern{
  position:absolute; inset:0;
  background-image: url("assets/images/slider/footer-pattern.png");
  background-size: cover;
  background-position: center;
  opacity: .7;
}

/* gold lines on right */
.footer-lines{
  position:absolute;
  right:0; bottom:0;
  width:55%;
  height:100%;
  background-image: url("assets/images/slider/footer-lines.png");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
}

/* ====== TITLE BAR (overlaps footer) ====== */
.slider-title{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom: calc(var(--footer-h) - (var(--title-h)/2));
  width: var(--title-w);
  height: var(--title-h);
  background:#ad8445;
  z-index:60;
padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* small depth like screenshot */
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.slider-title span{
  color:#fff;
  font-size: 25px;
  font-weight: 500;
  line-height:1;
  margin-top: 30px;
}

/* responsive title width + font */
@media (max-width: 1200px){
  .slider-title{ width: calc(100% - 40px); }
  .slider-title span{ font-size: 36px; }
}
@media (max-width: 576px){
  .slider-title span{ font-size: 28px; }
}
/* full screen background section */
.full-bg{
  position: relative;
  min-height: 100vh;     /* fit screen */
  overflow: hidden;
}

/* background image covers the whole section */
.full-bg > .bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* keep content above background */
.full-bg > .content{
  position: relative;
  z-index: 2;
}
.flight-dots{
  gap: 10px;
  margin: 0;
}

.flight-dots [data-bs-target]{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.35);  /* black */
  opacity: 1;
  margin: 0 !important;
}

.flight-dots .active{
  background: #000;             /* active = solid black */
}
.full-bg,
.services-section-bg {
  position: relative;
  height: auto !important;
  min-height: 0 !important; /* kills 100vh gaps */
}

.full-bg .bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.full-bg .content {
  position: relative;
  z-index: 2;
}


/* ✅ Make ALL sliders (inside tabsContentSection) black: arrows + dots */
#tabsContentSection .carousel-control-prev-icon,
#tabsContentSection .carousel-control-next-icon {
  filter: invert(1) grayscale(1) brightness(0); /* makes Bootstrap white icon -> black */
  width: 3rem;
  height: 3rem;
}

#tabsContentSection .carousel-control-prev,
#tabsContentSection .carousel-control-next {
  opacity: 1; /* keep fully visible */
}

/* ✅ indicators (dots) black */
#tabsContentSection .carousel-indicators [data-bs-target] {
  background-color: #000 !important;
  opacity: 0.5;
}

#tabsContentSection .carousel-indicators .active {
  opacity: 1;
}
  
      section {
        margin: 0 !important;
      }

      .no-gap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      .about-hero {
        min-height: 70vh;
      }

      /* ✅ WHITE BLANK ON RIGHT */
      .right-blank {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 28%;
        background: rgba(255, 255, 255, 0.92);
        z-index: 1;
        pointer-events: none;
      }

      /* ✅ RIGHT DECOR IMAGE (BG-elmnt2.png) FITTED ON RIGHT EDGE */
      .right-decor {
        position: absolute;
        top: 0;
        right: 0;                 /* ✅ always touch right edge */
        height: 100%;             /* ✅ full section height */
        width: 50%;               /* ✅ your width */
        background-image: url("assets/images/bg/BG-elmnt2.png");
        background-repeat: no-repeat;
        background-position: right top; /* ✅ lock to right */
        background-size: cover;         /* ✅ fit/cover */
        z-index: 2;               /* ✅ above blank strip */
        pointer-events: none;
      }

      /* keep on small screens too (if you want hide on mobile, tell me) */
      @media (max-width: 991px) {
        .right-blank {
          display: none;
        }
        .right-decor {
          width: 35%; /* optional: make it visible on small screens */
          opacity: 0.9;
        }
      }

      .about-card {
        background: black;
        border-radius: 24px;
      }

      .gold {
        color: #ae8746;
      }
/* =======================
   Waseem Font (TTF)
   ======================= */
/*@font-face {*/
/*  font-family: "Waseem";*/
/*  src: url("../fonts/Waseem.ttc") format("truetype");*/
/*  font-weight: 300;*/
/*  font-style: normal;*/
/*  font-display: swap;*/
/*}*/

/*@font-face {*/
/*  font-family: "Waseem";*/
/*  src: url("../fonts/Waseem.ttc") format("truetype");*/
/*  font-weight: 400;*/
/*  font-style: normal;*/
/*  font-display: swap;*/
/*}*/


/*.font-waseem {*/
/*  font-family: "Waseem", sans-serif;*/
/*}*/

/*.waseem-light {*/
/*  font-family: "Waseem", sans-serif;*/
/*  font-weight: 300;*/
/*}*/

/*.waseem-regular {*/
/*  font-family: "Waseem", sans-serif;*/
/*  font-weight: 400;*/
/*}*/
.hajj-slider {
  position: relative;
  width: 100%;
}
.hajj-video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* Adjust height as needed */
  overflow: hidden;
}

.hajj-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hajj-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(211 156 79 / 90%);
  z-index: 1;
}

/* Ensure content is above the overlay */
.z-3 {
  z-index: 3;
}

.login-btn:hover {
  background-color: #245d3c; /* Matches your footer green */
  border-color: #245d3c;
  color: white;
}
.hajj-slider .carousel-item {
  position: relative;
  height: 100vh; /* full screen height */
  min-height: 500px; /* fallback */
  overflow: hidden;
}

.slide-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes video cover like bg image */
}

.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.35); /* adjust overlay */
}



.hajj-video-section{
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
}

.hajj-bg-video{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}



.top-menu .fs-5{font-size:17px !important;}

.custom-footer {
background: linear-gradient(90deg, rgba(176, 142, 97, 1) 0%, rgba(148, 121, 78, 1) 51%, rgba(124, 98, 63, 1) 100%);
  
}


.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: white;
  text-decoration: none;
  transition: background 0.3s ease;
}

.icon-box:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}


hr {
    height: 1px;
    background-color: white;
    border: none;
}

.btn-primary{background: linear-gradient(90deg, rgba(176, 142, 97, 1) 0%, rgba(148, 121, 78, 1) 51%, rgba(124, 98, 63, 1) 100%);border:0px;}
.text-primary{color:#8c7048 !important;}

.rtl{direction:rtl;}
.service-card {
            background-color: #ffffff;
            border-radius: 1.5rem; /* Large rounded corners */
            transition: transform 0.2s ease, shadow 0.2s ease;
            aspect-ratio: 1 / 1; /* Makes the cards square */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            text-decoration: none;
            color: #333;direction:rtl;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            color: #000;
        }

        .service-icon {
            width: 100px; /* Adjust size as needed */
            height: 100px;
            margin-bottom: 15px;
            object-fit: contain;float:right;
        }

        .service-label {
            font-size: 1.5rem;
            font-weight: 500;
            color: #666;
        }

        /* Ensuring 5 items per row on desktop */
        @media (min-width: 992px) {
            .col-five {
                flex: 0 0 auto;
                width: 20%;
            }
        }
        
        .main-title {
            color: #006747; /* Nusuk Green */
            font-weight: 700;
            border-left: 5px solid #c5a059; /* Nusuk Gold */
            padding-left: 15px;
            margin-bottom: 30px;
        }
        .section-header {
            color: #006747;
            font-weight: 600;
            margin-top: 60px;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 15px;
        }
  .container-content {
            max-width: 1140px;
            margin: 50px auto;
            padding: 0 15px;
        }

        .main-header {
            color: var(--nusuk-green);
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 25px;
        }

        .intro-paragraph {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 50px;
        }

        /* Ritual Section Styling */
        .ritual-section-title {
            font-weight: 700;
            color: var(--nusuk-green);
            margin-bottom: 40px;
            text-align: center;
        }

        .ritual-card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            height: 100%;
            overflow: hidden;
            background: #fff;
        }

        .ritual-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .ritual-card-content {
            padding: 25px;
        }

        .ritual-card-content h4 {
            color: var(--nusuk-gold);
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 15px;
        }

        /* Ihram Section Styling */
        .ihram-title {
            color: var(--nusuk-green);
            border-left: 5px solid var(--nusuk-gold);
            padding-left: 15px;
            margin: 60px 0 20px;
            font-weight: 700;
        }

        .mode-box {
            background: var(--nusuk-light);
            border-radius: 10px;
            padding: 20px;
            height: 100%;
            border: 1px solid #eee;
        }

        .mode-box h5 {
            color: var(--nusuk-green);
            font-weight: 600;
        }

        /* Lists Styling */
        .list-header {
            background-color: var(--nusuk-green);
            color: white;
            padding: 12px 20px;
            border-radius: 8px 8px 0 0;
            margin-bottom: 0;
            font-weight: 600;
        }

        .custom-list {
            list-style: none;
            padding: 0;
            border: 1px solid #eee;
            border-radius: 0 0 8px 8px;
            background: #fff;
        }

        .custom-list li {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: flex-start;
        }

        .custom-list li:last-child {
            border-bottom: none;
        }
        
        
        .hajj-card {
            border: none;
            border-radius:12px; /* Large rounded corners from image */
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .hajj-card:hover {
            transform: translateY(-5px);
        }

        .hajj-card img {
            height: 250px;
            object-fit: cover;
        }

        .hajj-card .card-footer {
            background-color: #1a564b; /* The specific dark green in the image */
            color: white;
            text-align: center;
            padding: 20px;
            border: none;
            font-size: 1.5rem;
        }
.hajj-card {}
        .icon-check { color: var(--nusuk-green); margin-right: 12px; font-weight: bold; }
        .icon-cross { color: #dc3545; margin-right: 12px; font-weight: bold; }
        
.tile-img {
        height: 220px;
        width: 100%;
        object-fit: cover;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .tile-img:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    }
    .section-title {
        font-size: 26px;
        color: #ae8746;
        margin-bottom: 30px;
        font-weight: bold;
    }
/* Optional: styling the lightbox background */
.glightbox-container .gslide-description {
    background: #ae8746 !important;
}

.page-hero {
  background: var(--page-bg);
  border-bottom: 1px solid var(--divider);
}

.breadcrumb {
  --bs-breadcrumb-divider: ">";
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.2;
}

.breadcrumb-item a {
  color: var(--crumb);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--muted);
  padding: 0 0.65rem;
}

.breadcrumb-item.active {
  color: var(--muted);
}

.page-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: 3.25rem;
  line-height: 1.05;
}

.page-body {
  background: #fff;
  min-height: 60vh;
}

.content-wrap {
  padding-right: 1rem;
}

@media (max-width: 992px) {
  .page-title {
    font-size: 2.6rem;
  }
}

@media (max-width: 576px) {
  .breadcrumb {
    font-size: 0.9rem;
  }
  .page-title {
    font-size: 2.05rem;
  }
  .content-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lead-paragraph {
    font-size: 1.02rem;
    line-height: 1.85;
  }
  
  .timebar .me-4{margin-right:0.5rem!important}
  .timebar.p-3{padding:3px !important;}
  .page-hero{padding-right:2em;}
}

 .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 18px;
            margin-bottom: 20px;
        }
        .signature {
            margin-top: 30px;
            font-weight: bold;
        }