/* ============================================
   AL AKAM - Main Stylesheet (Revised v2)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&display=swap');

:root {
   --color-light-gray : #D9D9D9;
   --color-black      : #000000;
   --color-brown      : #873716;
   --color-dark-brown : #441E01;
   --color-dark-footer : #492002;
   --color-cream      : #FDE7AC;
   --color-white      : #FFFFFF;
   --font-arabic      : 'Noto Sans Arabic', sans-serif;
   --font-arabic-title: 'Reem Kufi', sans-serif;
   --font-english     : Helvetica, Arial, sans-serif;
   --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --transition-fast  : all 0.25s ease;
}

*,
*::before,
*::after {
   margin    : 0;
   padding   : 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   overflow-x     : hidden;
}

body {
   font-family            : var(--font-english);
   color                  : var(--color-white);
   background-color           : var(--color-black);
   overflow-x             : hidden;
   -webkit-font-smoothing : antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-image: url(../images/footer-full-bg.png);
   background-position: bottom center;
   background-size: cover;
}

a {
   text-decoration: none;
   color          : inherit;
   transition     : var(--transition-fast);
}

img {
   max-width: 100%;
   height   : auto;
   display  : block;
}

ul {
   list-style: none;
}

.arabic-text {
   font-family: var(--font-arabic);
   /* direction  : rtl;
   text-align : right; */
}

.arabic-title {
   font-family: var(--font-arabic-title);
   /* direction  : rtl;
   text-align : left; */
}

.container {
   max-width   : 1340px;
   margin-left : auto;
   margin-right: auto;
   width       : 100%;
}

/* Animations */
.reveal {
   opacity   : 0;
   transform : translateY(40px);
   transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
   opacity  : 1;
   transform: translateY(0);
}

.reveal-left {
   opacity   : 0;
   transform : translateX(-60px);
   transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.active {
   opacity  : 1;
   transform: translateX(0);
}

.reveal-right {
   opacity   : 0;
   transform : translateX(60px);
   transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.active {
   opacity  : 1;
   transform: translateX(0);
}

.reveal-scale {
   opacity   : 0;
   transform : scale(0.85);
   transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale.active {
   opacity  : 1;
   transform: scale(1);
}

.delay-1 {
   transition-delay: 0.1s;
}

.delay-2 {
   transition-delay: 0.2s;
}

.delay-3 {
   transition-delay: 0.3s;
}

.delay-4 {
   transition-delay: 0.4s;
}

.delay-5 {
   transition-delay: 0.5s;
}

/* ============================================
   HEADER
   ============================================ */
.header {
   position       : fixed;
   top            : 0;
   left           : 0;
   width          : 100%;
   z-index        : 1000;
   padding        : 20px 50px;
   display        : flex;
   align-items    : center;
   justify-content: space-between;
   transition     : var(--transition-smooth);
}

.header.scrolled {
   background             : rgba(0, 0, 0, 0.88);
   backdrop-filter        : blur(14px);
   -webkit-backdrop-filter: blur(14px);
   padding                : 14px 50px;
   box-shadow             : 0 2px 30px rgba(0, 0, 0, 0.3);
}

.header.scrolled .logo-group img{
max-width: 100px;
transition: var(--transition-smooth);
}

.logo {
   display    : flex;
   align-items: center;
   gap        : 8px;
   z-index    : 1001;
}

.logo-text {
   font-family   : var(--font-english);
   font-size     : 24px;
   font-weight   : 700;
   letter-spacing: 3px;
   color         : var(--color-white);
   line-height   : 1;
}

.logo-arabic {
   font-family: var(--font-arabic-title);
   font-size  : 20px;
   color      : var(--color-white);
   direction  : rtl;
   line-height: 1.1;
}

.logo-group {
   display       : flex;
   flex-direction: column;
   align-items   : flex-start;
}

.logo-group img{
   max-width: 172px;
}

.nav {
   display    : flex;
   align-items: center;
   gap        : 6px;
}

.nav a {
   padding       : 4px 22px;
   border-radius : 25px;
   font-size     : 18px;
   font-weight   : 500;
   letter-spacing: 0.5px;
   color         : var(--color-white);
   transition    : var(--transition-fast);
}

.nav a:hover {
   background: rgba(135, 55, 22, 0.5);
}

.nav a.active {
   background: var(--color-brown);
   color     : var(--color-white);
}

.hamburger {
   display       : none;
   flex-direction: column;
   gap           : 5px;
   cursor        : pointer;
   z-index       : 1001;
   padding       : 5px;
}

.hamburger span {
   display      : block;
   width        : 28px;
   height       : 2px;
   background   : var(--color-white);
   transition   : var(--transition-fast);
   border-radius: 2px;
}

.hamburger.open span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
}

.hamburger.open span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-nav-overlay {
   display                : none;
   position               : fixed;
   top                    : 0;
   left                   : 0;
   width                  : 100%;
   height                 : 100vh;
   background             : rgba(0, 0, 0, 0.95);
   backdrop-filter        : blur(20px);
   -webkit-backdrop-filter: blur(20px);
   z-index                : 999;
   flex-direction         : column;
   align-items            : center;
   justify-content        : center;
   gap                    : 20px;
   opacity                : 0;
   transition             : opacity 0.4s ease;
}

.mobile-nav-overlay.open {
   display: flex;
   opacity: 1;
}

.mobile-nav-overlay a {
   font-size     : 24px;
   padding       : 12px 32px;
   border-radius : 30px;
   font-weight   : 500;
   letter-spacing: 1px;
   transition    : var(--transition-fast);
}

.mobile-nav-overlay a:hover,
.mobile-nav-overlay a.active {
   background: var(--color-brown);
}

/* ============================================
   HERO
   ============================================ */
.hero {
   position   : relative;
   width      : 100%;
   min-height : 100vh;
   display    : flex;
   align-items: flex-end;
   padding    : 0 50px 80px;
   overflow   : hidden;
}

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

.ob-top{
object-position: top;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.05) 30%, rgb(0, 0, 0) 100%);
  z-index: 1;
}

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

.hero-content .arabic-text {
   font-size    : 28px;
   opacity      : 0.92;
}

.hero-content .english-text {
   font-size    : 28px;
   margin-bottom: 28px;
}

.hero-buttons {
   display    : flex;
   gap        : 16px;
   flex-wrap  : wrap;
   align-items: center;
}

.btn-outline {
   display       : inline-flex;
   align-items   : center;
   gap           : 8px;
   padding       : 13px 30px;
   border        : 1.5px solid var(--color-white);
   border-radius : 30px;
   font-size     : 14px;
   font-weight   : 500;
   color         : var(--color-white);
   background    : transparent;
   cursor        : pointer;
   transition    : var(--transition-smooth);
   letter-spacing: 0.5px;
}

.btn-outline:hover {
   background: var(--color-white);
   color     : var(--color-black);
}

.btn-primary {
   display       : inline-flex;
   align-items   : center;
   gap           : 10px;
   padding       : 13px 28px;
   background    : var(--color-brown);
   border        : 1.5px solid var(--color-brown);
   border-radius : 30px;
   font-size     : 20px;
   font-weight   : 500;
   color         : var(--color-white);
   cursor        : pointer;
   transition    : var(--transition-smooth);
   letter-spacing: 0.5px;
}

.btn-primary:hover {
   background  : var(--color-dark-brown);
   border-color: var(--color-dark-brown);
}

.btn-primary .arrow {
   display        : inline-flex;
   align-items    : center;
   justify-content: center;
   width          : 30px;
   height         : 30px;
   border-radius  : 50%;
   background     : rgba(255, 255, 255, 0.15);
   transition     : var(--transition-fast);
}

.btn-primary:hover .arrow {
   background: rgba(255, 255, 255, 0.3);
   transform : translateX(3px);
}

/* ============================================
   LOCATION SECTION (Dubai skyline + Jebel Ali info)
   ============================================ */
.location-section {
   padding   : 0px 0px;
   background: var(--color-black);
   color     : var(--color-white);
}

.location-container {
   max-width            : 1340px;
   margin               : 0 auto;
   display              : grid;
   grid-template-columns: 1fr 1fr;
   gap                  : 0px;
   align-items          : center;
   position             : relative;
}

.location-container.gap70{
gap                  : 70px;
}

.timelein-text{
   padding-left: 48px;
}

.location-timeline {
   position  : absolute;
   left      : 50%;
   top       : 0px;
   bottom    : 0px;
   width     : 2px;
   background: var(--color-white);
   transform : translateX(-50%);
}

.location-timeline .dot {
   position     : absolute;
   left         : 50%;
   transform    : translateX(-50%);
   width        : 14px;
   height       : 14px;
   border-radius: 50%;
   background   : var(--color-white);
}

.location-timeline .dot-top {
   top: 0px;
}

.location-timeline .dot-bottom {
   bottom: 30px;
}

.location-image {
   width        : 100%;
   overflow     : hidden;
}

.location-image img {
   width     : 100%;
   height    : 400px;
   object-fit: cover;
   transition: var(--transition-smooth);
}

.location-image:hover img {
   transform: scale(1.03);
}

.location-info .arabic-text {
   font-size    : 24px;
   
   color        : var(--color-white);
   margin-bottom: 24px;
}

.location-info .english-text {
   font-size  : 24px;
   
   color      : rgba(255,255,255,0.78);
}

.location-info .english-text strong {
   font-weight: 700;
   color      : var(--color-white);
}

/* ============================================
   VALUES
   ============================================ */
.values-section {
   padding   : 70px 50px;
   
   color     : var(--color-white);
}

.values-grid {
   max-width            : 1340px;
   margin               : 0 auto;
   display              : grid;
   grid-template-columns: repeat(3, 1fr);
   gap                  : 40px;
}

.value-card {
   display    : flex;
   align-items: flex-start;
   gap        : 20px;
}

.value-icon {
   flex-shrink    : 0;
   width          : 70px;
   height         : 70px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   overflow       : hidden;
}

.value-icon img {
   width : 70px;
   height: 70px;
   filter: brightness(0) invert(1);
}

.value-card h3 {
   font-size    : 24px;
   font-weight  : 700;
   margin-bottom: 8px;
   color        : var(--color-white);
}

.value-card p {
   font-size  : 16px;
   line-height: 1.6;
   color      : var(--color-light-gray);
}

/* ============================================
   PARTNERS (Home - Diamond Layout)
   ============================================ */
.partners-section {
   padding   : 90px 50px 100px;
   
   text-align: center;
   position  : relative;
   overflow  : hidden;
}

.partners-heading {
   margin-bottom  : 10px;
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 20px;
   flex-wrap      : wrap;
}

.partners-heading h2 {
   font-size     : 50px;
   font-weight   : 300;
   letter-spacing: 8px;
   text-transform: uppercase;
   color         : var(--color-white);
}

.partners-heading .arabic-title {
   font-size : 60px;
   color     : var(--color-white);
   text-align: center;
}

.partners-diamond {
   margin        : 50px auto 40px;
   display       : flex;
   flex-direction: column;
   align-items   : center;
   gap           : 16px;
}

.partner-logos-row{
   padding: 80px 0px;
}

.partners-diamond-row {
   display        : flex;
   justify-content: center;
   gap            : 24px;
}

.partner-circle {
   width          : 110px;
   height         : 110px;
   border-radius  : 50%;
   border         : 1.5px solid rgba(255, 255, 255, 0.4);
   display        : flex;
   align-items    : center;
   justify-content: center;
   background     : var(--color-black);
   transition     : var(--transition-smooth);
   overflow       : hidden;
   flex-shrink    : 0;
}

.partner-circle.center-logo {
   width : 140px;
   height: 140px;
   border: 2px solid var(--color-white);
}

.partner-circle:hover {
   border-color: var(--color-brown);
   transform   : scale(1.08);
   box-shadow  : 0 0 30px rgba(135, 55, 22, 0.3);
}

.partner-circle img {
   width     : 65%;
   height    : auto;
   object-fit: contain;
   filter    : brightness(0) invert(1);
}

.partner-circle.center-logo img {
   width : 80%;
   filter: none;
}

.btn-learn-more {
   display       : inline-flex;
   align-items   : center;
   gap           : 8px;
   padding       : 14px 40px;
   background    : var(--color-brown);
   border        : none;
   border-radius : 30px;
   font-size     : 20px;
   font-weight   : 500;
   color         : var(--color-white);
   cursor        : pointer;
   transition    : var(--transition-smooth);
   letter-spacing: 0.5px;
   margin-top    : 10px;
}

.btn-learn-more:hover {
   background: var(--color-dark-brown);
   transform : translateY(-2px);
   box-shadow: 0 8px 25px rgba(135, 55, 22, 0.4);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
   position       : relative;
   padding        : 120px 50px 150px;
   min-height     : 736px;
   display        : flex;
   flex-direction : column;
   justify-content: flex-end;
   overflow       : hidden;
   /* background: #000000;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(73, 32, 2, 1) 40%); */
}

.footer-bg {
   position  : absolute;
   bottom: 0px;
   left      : 0;
   width     : 100%;
   height    : 100%;
   object-fit: cover;
   z-index   : 0;
   background-image: url(../images/footer-bg.webp);
   background-repeat: no-repeat;
   background-position: left bottom;
  width: 500px;
  height: 500px;
  background-size: contain;
}

.footer-watermark {
   position      : absolute;
   right         : 0%;
   bottom        : 0%;
   /* transform     : translateY(-50%); */
   width         : 490px;
   height        : auto;
   opacity       : 1;
   z-index       : 1;
   pointer-events: none;
}

.footer-content {
   position    : relative;
   z-index     : 2;
   max-width   : 1340px;
   margin-left : auto;
   margin-right: auto;
}

.footer-social {
   display      : flex;
   gap          : 20px;
   margin-bottom: 24px;
}

.footer-social a {
   width          : 50px;
   height         : 50px;
   border-radius  : 50%;
   border         : 1.5px solid var(--color-white);
   display        : flex;
   align-items    : center;
   justify-content: center;
   transition     : var(--transition-smooth);
}

.footer-social a:hover {
   background  : var(--color-brown);
   border-color: var(--color-brown);
   transform   : translateY(-3px);
}

.footer-social svg {
  width: 28px;
  height: 28px;
   fill  : var(--color-white);
}

.footer-links {
   display: flex;
   gap    : 32px;
}

.footer-links a {
   font-size  : 20px;
   font-weight: 500;
   color      : var(--color-white);
   
   transition : var(--transition-fast);
}

.footer-links a:hover {
   opacity: 1;
   color  : var(--color-cream);
}

/* ============================================
   OUR STORY - HERO
   ============================================ */
.story-hero {
   position       : relative;
   width          : 100%;
   min-height     : 60vh;
   display        : flex;
   flex-direction : column;
   align-items    : center;
   justify-content: center;
   text-align     : center;
   padding        : 220px 50px 60px;
   overflow       : hidden;
}

.story-hero-logo {
   margin-bottom: 30px;
   position     : relative;
   z-index      : 2;
}

.story-hero-logo .logo-arabic-large {
   font-family: var(--font-arabic-title);
   font-size  : 90px;
   color      : var(--color-white);
   direction  : rtl;
   line-height: 1;
}

.story-hero-logo .logo-english-large {
   font-family   : var(--font-english);
   font-size     : 80px;
   font-weight   : 700;
   letter-spacing: 8px;
   color         : var(--color-white);
   text-transform: uppercase;
   line-height   : 1;
}

.story-hero-text {
   max-width: 600px;
   position : relative;
   z-index  : 2;
}

.story-hero-text .arabic-text {
   font-size    : 28px;
   text-align   : center;
}

.story-hero-text .english-text {
   font-size  : 27px;
   text-align : center;
}

/* Philosophy */
.philosophy-section {
   padding   : 0px 50px;
   
   color     : var(--color-white);
}

.philosophy-container {
   max-width            : 1340px;
   margin               : 0 auto;
   display              : grid;
   grid-template-columns: 1fr 1fr;
   gap                  : 0px;
   align-items          : start;
   position             : relative;
}

.philosophy-timeline {
   position  : absolute;
   left      : 50%;
   top       : 0px;
   bottom    : 0px;
   width     : 2px;
   background: var(--color-white);
   transform : translateX(-50%);
}

.philosophy-timeline .dot {
   position     : absolute;
   left         : 50%;
   transform    : translateX(-50%);
   width        : 14px;
   height       : 14px;
   border-radius: 50%;
   background   : var(--color-brown);
}

.philosophy-timeline .dot-top {
   top: 20px;
}

.philosophy-timeline .dot-bottom {
   bottom: 0px;
}

.philosophy-image img, .location-image img{
  transform: translateX(-1px);
}

.philosophy-left {
   display       : flex;
   flex-direction: column;
   gap           : 24px;
}

.philosophy-left h2 {
   font-size  : 46px;
   font-weight: 300;
   line-height: 1.15;
   color      : var(--color-white);
}

.philosophy-image {
   width        : 100%;
   
   overflow     : hidden;
}

.philosophy-image img {
   width     : 100%;
   height    : 340px;
   object-fit: cover;
   transition: var(--transition-smooth);
}

.philosophy-image:hover img {
   transform: scale(1.03);
}

.philosophy-right {
   display       : flex;
   flex-direction: column;
   gap           : 20px;
}

.philosophy-right .arabic-title {
   font-size: 80px;
   color    : var(--color-white);
}

.philosophy-right .arabic-text {
   font-size  : 24px;
   
   color      : var(--color-white)
}

.philosophy-right .english-text {
   font-size  : 24px;
   
   color      : var(--color-white)
}

.philosophy-right .english-text strong {
   font-weight: 700;
   color      : var(--color-white);
}

.timelein-text-left h2{
   font-size: 80px;
}

.english-text .f-32{
   font-size: 32px !important;
}

/* ============================================
   PARTNERS PAGE
   ============================================ */
.partners-page-hero {
   position  : relative;
   padding   : 400px 50px 60px;
   text-align: center;
   overflow  : hidden;
}

.partners-page-hero-bg {
   position        : absolute;
   top             : 0;
   left            : 0;
   width           : 100%;
   height          : 100%;
   object-fit      : cover;
   object-position : top;
   z-index         : 0;
}

.partners-page-hero-overlay {
   position  : absolute;
   top       : 0;
   left      : 0;
   width     : 100%;
   height    : 100%;
   background: rgba(0, 0, 0, 0.7);
   z-index   : 1;
}

.partners-page-hero-content {
   position: relative;
   z-index : 2;
}

.partners-page-title {
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 24px;
   flex-wrap      : wrap;
   margin-bottom  : 24px;
}

.partners-page-title h1 {
   font-size     : 80px;
   font-weight   : 300;
   letter-spacing: 4px;
}

.partners-page-title .arabic-title {
   font-size : 48px;
   text-align: center;
}

.partners-page-subtitle {
   max-width: 650px;
   margin   : 0 auto;
}

.partners-page-subtitle .arabic-text {
   font-size    : 24px;
   line-height  : 1.9;
   margin-bottom: 14px;
   text-align   : center;
}

.partners-page-subtitle .english-text {
   font-size  : 24px;
   line-height: 1.7;
   opacity    : 0.85;
   text-align : center;
}

/* Partners Logo Flat Row */
.partners-logo-row {
   display        : flex;
   align-items    : center;
   justify-content: center;
   gap            : 40px;
   padding        : 50px 50px;
   background     : var(--color-black);
   flex-wrap      : wrap;
}

.partner-logo-item {
   display        : flex;
   align-items    : center;
   justify-content: center;
   height         : 50px;
   opacity        : 0.85;
   transition     : var(--transition-fast);
}

.partner-logo-item:hover {
   opacity: 1;
}

.partner-logo-item img {
   height    : 40px;
   width     : auto;
   object-fit: contain;
   filter    : brightness(0) invert(1);
}

/* Partner Detail */
.partner-detail {
   padding   : 40px 50px;
}

.partner-detail-container {
   max-width            : 1340px;
   margin               : 0 auto;
   display              : grid;
   grid-template-columns: 1fr 1fr;
   gap                  : 0;
   align-items          : stretch;
   border-radius        : 16px;
   overflow             : hidden;
}

.partner-detail-container.reverse .partner-detail-image {
   order: 2;
}

.partner-detail-container.reverse .partner-detail-info {
   order: 1;
}

.partner-detail-image {
   position: relative;
   overflow: hidden;
}

.partner-detail-image img {
   width     : 100%;
   height    : 100%;
   min-height: 460px;
   object-fit: cover;
   display   : block;
   transition: var(--transition-smooth);
}

.partner-detail-image:hover img {
   transform: scale(1.03);
}

.partner-detail-info {
   background: var(--color-dark-footer);
   padding   : 48px 44px;
   display   : flex;
   flex-direction: column;
   justify-content: center;
   gap: 0;
}

.normal .partner-detail-info {
   background: transparent;
}

.content-flex{
   display: flex;
   flex-direction: column;
   gap: 24px;
   justify-content: space-between;
}

.partner-detail-info h3 {
   font-size     : 38px;
   font-weight   : 700;
   letter-spacing: 0.5px;
   margin-bottom : 20px;
   text-transform: uppercase;
   color         : var(--color-white);
   line-height   : 1.3;
}

.partner-detail-info .arabic-title {
   font-size    : 40px;
   color        : var(--color-white);
   margin-bottom: 14px;
   line-height  : 1.4;
}

.partner-detail-info .arabic-text {
   font-size    : 24px;
   
   margin-bottom: 24px;
   opacity      : 0.88;
   color        : var(--color-white);
}

.partner-detail-info h4 {
   font-size    : 24px;
   font-weight  : 700;
   color        : var(--color-white);
   margin-bottom: 10px;
}

.partner-detail-info .english-text {
   font-size  : 24px;
   
   color      : var(--color-white);
}

/* Partnership Approach */
.partnership-approach-bg { 
   background-image: url(../images/grid-bg.webp);
   background-repeat: no-repeat;
  background-size: cover; 
   background-position: center;
}

.partnership-approach {
   padding   : 100px 50px;
}

.partnership-approach .arabic-title {
   font-size    : 40px;
   margin-bottom: 8px;
}

.partnership-approach h2 {
   font-size    : 40px;
   font-weight  : 300;
   margin-bottom: 8px;
}

.partnership-approach-text {
   max-width: 650px;
   margin   : 20px auto 0;
}

.partnership-approach-text .arabic-text {
   font-size    : 24px;
  
   margin-bottom: 16px;
}

.partnership-approach-text .english-text {
   font-size  : 24px;
}

/* Values Dark */
.values-section-dark {
   padding   : 70px 50px;
   margin-top: 100px;
}

.values-section-dark .value-card h3 {
   color: var(--color-white);
}

.values-section-dark .value-card p {
   color: var(--color-light-gray);
}

.values-section-dark .value-icon img {
   filter: brightness(0) invert(1);
}

/* Section Divider */
.section-divider {
   width     : 100%;
   height    : 1px;
   background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-hero {
   position   : relative;
   width      : 100%;
   min-height : 85vh;
   display    : flex;
   align-items: center;
   padding    : 120px 0px 10px;
   overflow   : hidden;
}

.contact-hero-content {
   position       : relative;
   z-index        : 2;
   display        : flex;
   justify-content: space-between;
   width          : 100%;
   max-width      : 1340px;
   margin         : 0 auto;
   flex-wrap      : wrap;
   gap            : 40px;
}

.contact-hero-left h1 {
   font-size     : 72px;
   
   line-height   : 1.05;
   
   margin-bottom : 20px;
}

.contact-hero-left .english-text {
   font-size  : 24px;
}

.contact-hero-right {
   text-align: right;
   margin-right: 150px;
}

.contact-hero-right .arabic-title {
   font-size    : 72px;
   margin-bottom: 14px;
}

.contact-hero-right .arabic-text {
   font-size  : 30px;
}

.contact-info-section {
   padding   : 60px 50px 80px;
}

.contact-info-container {
   max-width: 700px;
}

.contact-item {
   display      : flex;
   align-items  : center;
   gap          : 16px;
   margin-bottom: 20px;
}

.contact-item svg {
   width       : 24px;
   height      : 24px;
   fill        : none;
   stroke      : var(--color-white);
   stroke-width: 2;
   flex-shrink : 0;
}

.contact-item .contact-label {
   display    : flex;
   gap        : 16px;
   align-items: center;
   flex-wrap  : wrap;
}

.contact-item .english-text {
   font-size: 24px;
}

.contact-item .arabic-text {
   font-size: 24px;
}

.contact-divider {
   width     : 100%;
   max-width : 500px;
   height    : 1px;
   background: rgba(255, 255, 255, 0.2);
   margin    : 24px 0;
}

.contact-address {
   margin-top: 24px;
}

.contact-address .arabic-text {
   font-size    : 24px;
   line-height  : 1.8;
   margin-bottom: 8px;
}

.contact-address .english-text {
   font-size: 24px;
}

.contact-logo-section {
   padding   : 20px 50px;
   
   text-align: center;
}

.contact-logo-large .logo-arabic-large {
   font-family: var(--font-arabic-title);
   font-size  : 110px;
   color      : var(--color-white);
   direction  : rtl;
   line-height: 1;
}

.contact-logo-large .logo-english-large {
   font-family   : var(--font-english);
   font-size     : 100px;
   font-weight   : 700;
   letter-spacing: 10px;
   color         : var(--color-white);
   text-transform: uppercase;
   line-height   : 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */
  @media(max-width:1499px) {
   .hero {
  position: relative;
  width: 100%;
  min-height: 1036px;
 }
}
 
   @media(max-width:1439px) {
      .hero-content .arabic-text {
  font-size: 24px;
  opacity: 1;
}

.hero-content .english-text {
  font-size: 24px;
  margin-bottom: 28px;
}

.contact-hero-content {
  padding: 0px 50px;
}
   }

      @media(max-width:1199px) {
      .hero-content .arabic-text {
  font-size: 20px;
  opacity: 1;
}

.hero-content .english-text {
  font-size: 20px;
  margin-bottom: 28px;
}

.nav a {
  padding: 8px 10px;
}
      }

@media(max-width:1024px) {
   .header,
   .header.scrolled {
      padding: 16px 30px;
   }

   .hero {
      padding: 0 30px 60px;
   }

   .values-grid {
      gap: 30px;
   }

   .partners-heading h2 {
      font-size     : 36px;
      letter-spacing: 4px;
   }

   .partner-circle {
      width : 95px;
      height: 95px;
   }

   .partner-circle.center-logo {
      width : 120px;
      height: 120px;
   }

   .philosophy-left h2 {
      font-size: 38px;
   }

   .partner-detail-container {
      gap: 0;
   }

   .contact-hero-left h1 {
      font-size: 48px;
   }

   .contact-hero-right .arabic-title {
      font-size: 42px;
   }

   .location-container {
      gap: 40px;
   }

   .location-section,
   .values-section,
   .philosophy-section,
   .partner-detail,
   .partnership-approach,
   .values-section-dark,
   .contact-info-section,
   .contact-logo-section,
   .partners-section {
      padding-left : 30px;
      padding-right: 30px;
   }

   .hero {
    position: relative;
    width: 100%;
    min-height: 736px;
  }
}

@media(max-width:768px) {
   .nav {
      display: none;
   }

   .hamburger {
      display: flex;
   }

   .header {
      padding: 16px 20px;
   }

   .header.scrolled {
      padding: 12px 20px;
   }

   .hero {
      min-height: 92vh;
      padding   : 0 20px 50px;
   }

   .hero-content .arabic-text {
      font-size: 24px;
   }

   .hero-content .english-text {
      font-size: 24px;
   }

   .footer-links a {
  font-size: 14px;
   }

   .footer-social a {
  width: 32px;
  height: 32px;
   }

   .footer-social svg {
  width: 18px;
  height: 18px;
   }

   .location-section {
      padding: 60px 20px;
   }

   .location-container {
      grid-template-columns: 1fr;
      gap                  : 30px;
   }

   .location-timeline {
      display: none;
   }

   .values-section {
      padding: 50px 20px;
   }

   .values-grid {
      grid-template-columns: 1fr;
      gap                  : 30px;
   }

   .partners-section {
      padding: 60px 20px;
   }

   .partners-heading h2 {
      font-size     : 26px;
      letter-spacing: 3px;
   }

   .partners-heading .arabic-title {
      font-size: 30px;
   }

   .partner-circle {
      width : 80px;
      height: 80px;
   }

   .partner-circle.center-logo {
      width : 100px;
      height: 100px;
   }

   .partners-diamond-row {
      gap: 14px;
   }

   .partners-diamond {
      gap: 12px;
   }

   .footer {
      padding   : 60px 20px 30px;
      min-height: 400px;
   }

   .footer-links {
      flex-wrap: wrap;
      gap      : 16px;
   }

   .story-hero {
      padding   : 120px 20px 50px;
      min-height: 50vh;
   }

   .story-hero-logo .logo-arabic-large {
      font-size: 55px;
   }

   .story-hero-logo .logo-english-large {
      font-size     : 48px;
      letter-spacing: 4px;
   }

   .philosophy-section {
      padding: 60px 20px;
   }

   .philosophy-container {
      grid-template-columns: 1fr;
      gap                  : 36px;
   }

   .philosophy-timeline {
      display: none;
   }

   .philosophy-left h2 {
      font-size: 34px;
   }

   .philosophy-right .arabic-title {
      font-size: 32px;
   }

   .partners-page-hero {
      padding: 120px 20px 60px;
   }

   .partners-page-title h1 {
      font-size: 36px;
   }

   .partners-page-title .arabic-title {
      font-size: 32px;
   }

   .partners-logo-row {
      padding: 40px 20px;
      gap    : 20px;
   }

   .partner-detail {
      padding: 20px;
   }

   .partner-detail-container {
      grid-template-columns: 1fr;
      gap                  : 0;
      border-radius        : 12px;
   }

   .partner-detail-container.reverse .partner-detail-image {
      order: 1;
   }

   .partner-detail-container.reverse .partner-detail-info {
      order: 2;
   }

   .partner-detail-image img {
      height    : auto;
      min-height: auto;
   }

   .partner-detail-info {
      padding: 32px 28px;
   }

   .partnership-approach {
      padding: 60px 20px;
   }

   .partner-detail-info h3 {
  font-size: 24px;
   }

   .partner-detail-info .arabic-title {
  font-size: 30px;
   }

   .partner-detail-info .arabic-text {
  font-size: 20px;
   }

   .partner-detail-info .english-text {
  font-size: 20px;
   }

   .partnership-approach-text .english-text {
  font-size: 20px;
}

.partnership-approach-text .arabic-text {
  font-size: 20px;
}

   .partnership-approach h2 {
      font-size: 32px;
   }

   .values-section-dark {
      padding: 50px 20px;
   }

   .contact-hero {
      padding   : 120px 20px 50px;
      min-height: auto;
   }

   .contact-hero-content {
      flex-direction: column;
      gap           : 24px;
   }

   .contact-hero-left h1 {
      font-size: 38px;
   }

   .contact-hero-right .arabic-title {
      font-size: 36px;
   }

   .contact-info-section {
      padding: 40px 20px 60px;
   }

   .contact-logo-section {
      padding: 50px 20px;
   }

   .contact-logo-large .logo-arabic-large {
      font-size: 65px;
   }

   .contact-logo-large .logo-english-large {
      font-size     : 55px;
      letter-spacing: 6px;
   }

    .footer-watermark {
  width: 250px;
   }

   .logo-group img {
  max-width: 100px;
}

  .hero {
    position: relative;
    width: 100%;
    min-height: 90vh;
  }

   .btn-outline,
   .btn-primary {
      padding  : 11px 22px;
      font-size: 13px;
   }

   .btn-primary .arrow {
  width: 20px;
  height: 20px;
   }

   .location-image img {
  height: auto;
   }

.philosophy-image img {
  height: auto;
}

   .timelein-text {
  padding-left: 0px;
}

 .location-section {
    padding: 20px 20px;
  }

  .location-info .arabic-text {
  font-size: 20px;
  }

  .location-info .english-text {
  font-size: 20px;
  }

  .philosophy-right .arabic-text {
  font-size: 20px;
  }.philosophy-right .english-text {
  font-size: 20px;
  }

  .english-text .f-32 {
  font-size: 24px !important;
}

.philosophy-section {
    padding: 20px 20px;
  }

  .philosophy-right.mt-5{
   margin-top: 0px !important;
  }

  .philosophy-left.my-5 {
   margin: 0px !important;
  }

  .footer-bg {
  width: 500px;
  height: 330px;
  }

  .location-section.mt-5, .location-section.pt-5{
   margin-top: 0px !important;
   padding-top: 0px !important;
  }

  .partner-logos-row img {
  margin-left: auto;
  margin-right: auto;
}

.story-hero-text .english-text {
  font-size: 24px;
}.story-hero-text .arabic-text {
  font-size: 24px;
}

.partner-logos-row {
  padding: 0px 0px;
  background-color: #000000;
}

.contact-hero-left {
   text-align: center;
}

.contact-hero-right {
  text-align: center;
  margin-right: 0px;
}
}

@media(max-width:480px) {
   .footer-bg {
    width: 422px;
    height: 237px;
  }

  .story-hero-text .arabic-text {
  font-size: 18px;
  }

  .story-hero-text .english-text {
  font-size: 18px;
  text-align: center;
}

.partners-page-subtitle .english-text {
  font-size: 18px;
}.partners-page-subtitle .arabic-text {
  font-size: 18px;
}

   .hero {
      min-height: 88vh;
      padding   : 0 16px 40px;
   }

   .hero-content .arabic-text {
      font-size: 18px;
   }

   .hero-content .english-text {
      font-size: 18px;
   }

   .values-section {
      padding: 40px 16px;
   }

   .value-icon {
      width : 55px;
      height: 55px;
   }

   .value-icon img {
      width : 55px;
      height: 55px;
   }

   .value-card h3 {
      font-size: 17px;
   }

   .partners-heading h2 {
      font-size     : 20px;
      letter-spacing: 2px;
   }

   .partners-heading .arabic-title {
      font-size: 24px;
   }

   .partner-circle {
      width : 65px;
      height: 65px;
   }

   .partner-circle.center-logo {
      width : 85px;
      height: 85px;
   }

   .story-hero-logo .logo-arabic-large {
      font-size: 40px;
   }

   .story-hero-logo .logo-english-large {
      font-size     : 34px;
      letter-spacing: 3px;
   }

   .philosophy-left h2 {
      font-size: 28px;
   }

   .partners-page-title h1 {
      font-size: 28px;
   }

   .partners-page-title .arabic-title {
      font-size: 26px;
   }

   .contact-hero-left h1 {
      font-size: 30px;
   }

   .contact-hero-right .arabic-title {
      font-size: 28px;
   }

   .contact-logo-large .logo-arabic-large {
      font-size: 48px;
   }

   .contact-logo-large .logo-english-large {
      font-size     : 40px;
      letter-spacing: 4px;
   }

   .footer {
      padding   : 50px 16px 24px;
      min-height: 350px;
      height: auto;
   }

   .footer-social a {
      width : 36px;
      height: 36px;
   }

   .footer-links {
      gap: 12px;
   }

   .footer-links a {
      font-size: 13px;
   }
}