/* ================================================================
     Inner pages overrides — IBM Plex Sans Arabic, unified sizes,
     refined nav, hero layout matching reference, shared video.
     ================================================================ */
  @font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Light.ttf') format('truetype');font-weight:300;font-display:swap;}
  @font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
  @font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
  @font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
  @font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}

  html,body,h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,textarea,select,label,div,
  .hero-title,.hero-subtitle,.card-title,.card-text,.tab-btn,.city-banner-name,
  .home-hero-title,.home-hero-subtitle,.btn-primary,.btn-submit,
  .nav-links li a,.nav-logo,.top-bar,.matahen-btn,.section h2,.section h3{
    font-family:'IBM Plex Sans Arabic',Arial,sans-serif !important;
  }

  /* Hide unwanted blocks on inner pages */
  .app-section{display:none !important;}

  /* ===========================================================
     TOP NAV — clean white bar, logo on right, items spread,
     subtle gold underline on active (matches reference image)
     =========================================================== */
  .top-bar{font-size:.85rem;}
  .navbar-wrap{background:#fff;border-bottom:1px solid #efefef;box-shadow:0 1px 4px rgba(0,0,0,.04);height:auto;}
  .navbar-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:65px;display:flex;flex-direction:row;align-items: center;gap:24px;/* ================================================================
     Inner pages overrides — IBM Plex Sans Arabic, unified sizes,
     refined nav, hero layout matching reference, shared video.
     ================================================================ */@font-face{font-family: 'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Light.ttf') format('truetype');font-weight:300;font-display:swap;}@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}html,body,h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,textarea,select,label,div,
  .hero-title,.hero-subtitle,.card-title,.card-text,.tab-btn,.city-banner-name,
  .home-hero-title,.home-hero-subtitle,.btn-primary,.btn-submit,
  .nav-links li a,.nav-logo,.top-bar,.matahen-btn,.section h2,.section h3{
    font-family:'IBM Plex Sans Arabic',Arial,sans-serif !important;
  }

  /* Hide unwanted blocks on inner pages */
  .app-section{display:none !important;}

  /* ===========================================================
     TOP NAV — clean white bar, logo on right, items spread,
     subtle gold underline on active (matches reference image)
     =========================================================== */
  .top-bar{font-size:.85rem;}
  .navbar-wrap{background:#fff;border-bottom:1px solid #efefef;box-shadow:0 1px 4px rgba(0,0,0,.04);height:auto;}
  .navbar-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:65px;display:flex;flex-direction:row;align-items:center;gap:24px;}
  .navbar-inner >a:first-of-type{order:2;margin-right:auto;}  /* logo to the right edge in RTL */
  .nav-logo{height:56px;width:auto;}
  .nav-links{order:1;display:flex;flex-direction:row;align-items:center;gap:4px;list-style:none;margin:0;padding:0;height:auto;}
  .nav-linksli{height:auto;}
  .nav-linksli a{display:inline-flex;align-items:center;height:auto;padding:10px 18px;font-size:.95rem;font-weight:500;color:#222;text-decoration:none;border-bottom:none;position:relative;transition:color .2s;}
  .nav-linksli a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:#a08035;transform:scaleX(0);transform-origin:center;transition:transform .2s;}
  .nav-linksli a:hover{color:#a08035;}
  .nav-linksli a.active{color:#222;}
  .nav-linksli a.active::after{transform:scaleX(1);background:#a08035;}
  .nav-toggle{display:none;background:none;border:0;padding:8px;color:#222;cursor:pointer;}@media (max-width:991px){
    .navbar-inner{padding:0 16px;height:64px;position:relative;}
    .nav-toggle{display:inline-flex;order:1;}
    .navbar-inner > a:first-of-type{order:2;}
    .nav-logo{height:46px;}
    .nav-links{display:none;position:absolute;top:64px;right:0;left:0;background:#fff;flex-direction:column;align-items:stretch;padding:6px 0;box-shadow:0 6px 18px rgba(0,0,0,.08);z-index:999;}
    .nav-links.open{display:flex;}
    .nav-links li a{padding:14px 22px;border-bottom:1px solid #f3f3f3;}
    .nav-links li a::after{display:none;}
    .nav-links li a.active{color:#a08035;}
  }

  /* ===========================================================
     INNER HERO — gold band, paragraph (left) + big title with
     circular icon above (right). Matches attached reference.
     =========================================================== */
  .hero{background:#a08035;max-height:340px;padding:64px 6%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;z-index:0;}
  .hero-overlay{position:absolute;inset:0;background:rgba(160,128,53,.85);z-index:1;}

  .hero-content{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:0;display:flex !important;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;text-align:right;flex-direction: row-reverse;}
.home-hero2{flex-direction: row !important;}
  .hero-text{flex:1 1 0;min-width:0;display:flex;align-items:center;}
  .hero-text .hero-subtitle{font-size: 1.5rem;font-weight:500;line-height:2;color:#fff;max-width:560px;margin:0 0 0 auto;text-align:right;}
  .hero-brand{flex:0 0 auto;display:flex;flex-direction:column;align-items: flex-start;gap:14px;}
  .hero-icon-circle{width:96px;height:96px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;background:transparent;}
  .hero-icon-circlei{font-size:44px;color:#fff;}
  .hero-brand .hero-title{font-family:'IBM Plex Sans Arabic',Arial,sans-serif !important;font-size:6.5rem;font-weight:800;color:#fff;line-height:.95;margin:0;letter-spacing:-1.5px;}@media (max-width:1100px){
    .hero-brand .hero-title{font-size:5rem;}
    .hero-icon-circle{width:84px;height:84px;}
    .hero-icon-circle i{font-size:38px;}
  }@media (max-width:768px){
    .hero{padding:44px 22px;min-height:auto;}
.hero-content{gap:22px;text-align:center;flex-direction: row;min-height:300px;height:300px;}
    .hero-text{justify-content:center;}
    .hero-text .hero-subtitle{margin:0 auto;text-align:center;max-width:100%;max-width:100%;font-size:14px;text-align:right;}
    .hero-brand{align-items:center;order:-1;}
    .hero-brand .hero-title{font-size:3.4rem;}
    .hero-icon-circle{width:72px;height:72px;}
    .hero-icon-circle i{font-size:32px;}
  }


.tawaf-section {
  margin-top: 40px;
}

.tawaf-section .section-title {
  text-align: right;
  font-size: 1.4rem; /* bigger title */
  font-weight: 700;
  margin-bottom: 16px;
}

.tawaf-section .card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tawaf-section .card {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes icon to right */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 14px;
  font-size: 15px; /* bigger text */
  color: #555;
  direction: rtl; /* important for Arabic */
}

.tawaf-section .card span {
  flex: 1;
  text-align: right;
}

.tawaf-section .icon {
  color: #9e7b3a;
  font-size: 26px; /* bigger icon */
  margin-left: 10px; /* space between text and icon */
}
  /* ===========================================================
     Unified inner-page text sizes
     =========================================================== */
  .sectionh2,.city-banner-name{font-size:1.6rem;font-weight:700;line-height:1.3;margin:0 0 16px;}
  .card-title,.sectionh3{font-size:1.05rem;font-weight:600;line-height:1.4;margin:0 0 8px;}
  .card-text,.sectionp{font-size:.95rem;font-weight:400;line-height:1.85;}
  .tab-btn{font-size:.95rem;font-weight:500;}

  /* Cards grid */
  .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:30px 24px;max-width:1200px;margin:0 auto;}
  .card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;}
  .card-img{width:100%;height:200px;object-fit:cover;display:block;}
  .card-body{padding:18px;}

  /* Tabs */
  .tabs-wrapper{border-bottom:1px solid #eee;background:#fff;}
  .tabs-container{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:1200px;margin:0 auto;padding:0 16px;}
  .tab-btn{padding:14px 22px;color:#666;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;}
  .tab-btn.active{color:#1a564c;border-bottom-color:#1a564c;}

  /* ===========================================================
     Shared VIDEO / MEDIA section (same look as home)
     =========================================================== */
  .media-section{padding:60px 20px;background:#fff;}
  .media-inner{max-width:1100px;margin:0 auto;}
  .video-player-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);}
  .video-player-wrapiframe{position:absolute;inset:0;width:100% !important;height:100% !important;border:0;}@media (max-width:600px){
    .section h2,.city-banner-name{font-size:1.3rem;}
    .card-title,.section h3{font-size:1rem;}
    .card-text,.section p{font-size:.9rem;}
    .cards-grid{grid-template-columns:1fr;gap:16px;padding:20px 14px;}
    .card-img{height:180px;}
    .tab-btn{padding:10px 14px;font-size:.88rem;}
    .nav-links li a{font-size:.92rem;}
    .media-section{padding:32px 14px;}
  };}
  .navbar-inner > a:first-of-type{order:1;}  /* logo to the right edge in RTL */
  .nav-logo{height:56px;width:auto;}
  .nav-links{order:1;display:flex;flex-direction:row;align-items:center;gap:4px;list-style:none;margin:0;padding:0;height:auto;}
  .nav-links li{height:auto;}
  .nav-links li a{display:inline-flex;align-items:center;height:auto;padding:10px 18px;font-size:.95rem;font-weight:500;color:#222;text-decoration:none;border-bottom:none;position:relative;transition:color .2s;}
  .nav-links li a::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:#a08035;transform:scaleX(0);transform-origin:center;transition:transform .2s;}
  .nav-links li a:hover{color:#a08035;}
  .nav-links li a.active{color:#222;}
  .nav-links li a.active::after{transform:scaleX(1);background:#a08035;}
  .nav-toggle{display:none;background:none;border:0;padding:8px;color:#222;cursor:pointer;}

  @media (max-width:991px){
    .navbar-inner{padding:0 16px;height:64px;position:relative;}
    .nav-toggle{display:inline-flex;order:1;}
    .navbar-inner > a:first-of-type{order:2;}
    .nav-logo{height:46px;}
    .nav-links{display:none;position:absolute;top:64px;right:0;left:0;background:#fff;flex-direction:column;align-items:stretch;padding:6px 0;box-shadow:0 6px 18px rgba(0,0,0,.08);z-index:999;}
    .nav-links.open{display:flex;}
    .nav-links li a{padding:14px 22px;border-bottom:1px solid #f3f3f3;}
    .nav-links li a::after{display:none;}
    .nav-links li a.active{color:#a08035;}
  }

  /* ===========================================================
     INNER HERO — gold band, paragraph (left) + big title with
     circular icon above (right). Matches attached reference.
     =========================================================== */
  .hero{background:#a08035;max-height:340px;padding:64px 6%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
  
   .home-hero{background:#a08035;min-height:400px;padding:64px 6%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;max-height:560px;}
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;z-index:0;}
  .hero-overlay{position:absolute;inset:0;background:rgba(160,128,53,.85);z-index:1;}
  .hero-content{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:0;display:flex !important;flex-direction:row;align-items:center;justify-content:space-between;gap:40px;text-align:right;  flex-direction: row-reverse;}
  .hero-text{flex:1 1 0;min-width:0;display:flex;align-items:center;}
  .hero-text .hero-subtitle{font-size: 1.5rem;font-weight:500;line-height:2;color:#fff;max-width:560px;margin:0 0 0 auto;text-align:right;}
  .hero-brand{flex:0 0 auto;display:flex;flex-direction:column;align-items: flex-start;gap:14px;}
  .hero-icon-circle{width:96px;height:96px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;background:transparent;}
  .hero-icon-circle i{font-size:44px;color:#fff;}
  .hero-brand .hero-title{font-family:'IBM Plex Sans Arabic',Arial,sans-serif !important;font-size:6.5rem;font-weight:800;color:#fff;line-height:.95;margin:0;letter-spacing:-1.5px;}

  @media (max-width:1100px){
    .hero-brand .hero-title{font-size:5rem;}
    .hero-icon-circle{width:84px;height:84px;}
    .hero-icon-circle i{font-size:38px;}
  }
  @media (max-width:768px){
    .hero{padding:44px 22px;min-height:auto;}
 .hero-content{gap:22px;text-align:center;flex-direction: row;min-height:300px;height:300px;}
    .hero-text{justify-content:center;}
    .hero-text .hero-subtitle{margin:0 auto;text-align:center;max-width:100%;font-size:14px;text-align:right;}
    .hero-brand{align-items:center;order:-1;}
    .hero-brand .hero-title{font-size:3.4rem;}
    .hero-icon-circle{width:72px;height:72px;}
    .hero-icon-circle i{font-size:32px;}
  }

  /* ===========================================================
     Unified inner-page text sizes
     =========================================================== */
  .section h2,.city-banner-name{font-size:1.6rem;font-weight:700;line-height:1.3;margin:0 0 16px;}
  .card-title,.section h3{font-size: 36px;font-weight:600;line-height:1.4;margin:0 0 8px;}
  .card-text,.section p{font-size: 18px;font-weight:400;line-height:1.85;color: #000;}
  .tab-btn{font-size:.95rem;font-weight:500;}

  /* Cards grid */
  .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:30px 24px;max-width:1200px;margin:0 auto;}
  .card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;}
  .card-img{width:100%;height:200px;object-fit:cover;display:block;}
  .card-body{padding:18px;}

  /* Tabs */
  .tabs-wrapper{border-bottom:1px solid #eee;background:#fff;}
  .tabs-container{display:flex;flex-wrap:wrap;justify-content: flex-start;gap:6px;max-width:1200px;margin:0 auto;padding:0 16px;}
  .tab-btn{padding:14px 22px;color:#666;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;}
  .tab-btn.active{color:#1a564c;border-bottom-color:#1a564c;}

  /* ===========================================================
     Shared VIDEO / MEDIA section (same look as home)
     =========================================================== */
  .media-section{padding:60px 20px;background:#fff;}
  .media-inner{max-width:1100px;margin:0 auto;}
  .video-player-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);}
  .video-player-wrap iframe{position:absolute;inset:0;width:100% !important;height:100% !important;border:0;}

  @media (max-width:600px){
    .section h2,.city-banner-name{font-size:1.3rem;}
    .card-title,.section h3{font-size:1rem;}
    .card-text,.section p{font-size:.9rem;}
    .cards-grid{grid-template-columns:1fr;gap:16px;padding:20px 14px;}
    .card-img{height:180px;}
    .tab-btn{padding:10px 14px;font-size:.88rem;}
    .nav-links li a{font-size:.92rem;}
    .media-section{padding:32px 14px;}
  }