/*
  [CSS Index]
  
  ---
  
  Template Name: The H Tower
  Developer: Hostify Codes
  Version: 1.3
  
  🔒 DESKTOP VERSION PERMANENTLY LOCKED 🔒
  ⚠️  DO NOT MODIFY ANY DESKTOP RULES ⚠️
  ⚠️  DO NOT EDIT ANY DESKTOP CSS ⚠️
  ⚠️  DO NOT TOUCH DESKTOP FUNCTIONALITY ⚠️
  
  This file contains desktop-specific rules that are FINALIZED.
  Any modifications to desktop behavior are PROHIBITED.
  
  Desktop-specific rules include:
  - Logo positioning (fixed, top: 10px, left: 10px)
  - Main menu positioning (fixed, top: 98px, right: 50px)
  - Section title vertical positioning
  - Panel animations and positioning
  - All desktop-only media queries
  - Panel background images (Section 5 read more)
*/


/*
  1. TEMPLATE BACKGROUNDS
    1.1. section IMG BACKGROUND
	1.8. works IMG carousel IMG BACKGROUND
	1.9. about IMG BACKGROUND
	1.10. services IMG BACKGROUND
	1.11. news IMG carousel IMG BACKGROUND
	1.12. news panel left bg IMG BACKGROUND
	1.14. swiper timeline IMG BACKGROUND
  2. reset
  3. layout
  4. center container
  5. section
  6. shadow
  7. hero container
    7.1. hero bg
	7.2. hero fullscreen FIX
  8. slick fullscreen, slick fullscreen SPLIT
  10. YouTube video
  11. HTML5 video
  12. Vimeo video
  13. Slick v1.6.0 CUSTOM
	13.1. slick slide flickering FIX
	13.2. slick left, slick right
	13.3. slick left about, slick right about
	13.4. slick navigation
  14. Owl Carousel v2.2.0 CUSTOM
    14.1. Owl Carousel navigation
  15. contact info
  16. link underline
  17. button effect
  18. testimonials
  19. services accordion
  20. newsletter form
      20.1. newsletter placeholders
  21. social icons
  22. fullwidth IMG
  23. preloader
  24. about content
  25. split border
  26. fullPage section
    26.1. section IMG
  27. introduction
  28. section title
  29. home multiple images
  30. news IMG carousel
    30.1. news IMG carousel items
  31. works IMG carousel
    31.1. works IMG carousel items
	  31.2. Magnific Popup v1.0.0 CUSTOM
  32. skills bar
  33. facts counter
  34. news MORE carousel items
    34.1. news panel left
      34.1.1. news panel left bg
    34.2. news panel right
  35. logo
  36. navigation brackets
  37. navigation
    37.1. main menu
  40. swiper timeline
*/


/* 1. TEMPLATE BACKGROUNDS */
/* 1.1. section IMG BACKGROUND */
.section-bg-home {
 background-image: url(../../img/background/section-bg-home.webp);
}

.section-bg-home.light {
 background-image: url(../../img/background/section-bg-home-light.webp);
}

.section-bg-contact {
 background-image: url(../../img/background/section-bg-contact.webp);
}



/* 1.8. works IMG carousel IMG BACKGROUND */
.works-page-img-carousel-item-1 {		
 background-image: url(../../img/works/works-page-img-carousel-item-1.webp);
}

.works-page-img-carousel-item-2 {		
 background-image: url(../../img/works/works-page-img-carousel-item-2.webp);
}

.works-page-img-carousel-item-3 {	
 background-image: url(../../img/works/works-page-img-carousel-item-3.webp);
}

.works-page-img-carousel-item-4 {		
 background-image: url(../../img/works/works-page-img-carousel-item-4.webp);
}

.works-page-img-carousel-item-5 {		
 background-image: url(../../img/works/works-page-img-carousel-item-5.webp);
}

.works-page-img-carousel-item-6 {		
 background-image: url(../../img/works/works-page-img-carousel-item-6.webp);
}

.works-page-img-carousel-item-7 {	
 background-image: url(../../img/works/works-page-img-carousel-item-7.webp);
}

.works-page-img-carousel-item-8 {		
 background-image: url(../../img/works/works-page-img-carousel-item-8.webp);
}

.works-page-img-carousel-item-9 {		
 background-image: url(../../img/works/works-page-img-carousel-item-9.webp);
}

.works-page-img-carousel-item-10 {		
 background-image: url(../../img/works/works-page-img-carousel-item-10.webp);
}

.works-page-img-carousel-item-11 {		
 background-image: url(../../img/works/works-page-img-carousel-item-11.webp);
}

.works-page-img-carousel-item-12 {		
 background-image: url(../../img/works/works-page-img-carousel-item-12.webp);
}


/* 1.9. about IMG BACKGROUND */
.img-fullwidth-about-carousel {
 background-image: url(../../img/about/about-carousel.webp);
}


/* 1.10. services IMG BACKGROUND */
.img-fullwidth-services-carousel-1 {
 background-image: url(../../img/services/services-carousel-1.webp);
}

.img-fullwidth-services-carousel-2 {
 background-image: url(../../img/services/services-carousel-2.webp);
}

.img-fullwidth-services-carousel-3 {
 background-image: url(../../img/services/services-carousel-3.webp);
}

/* Office slider background images */
.img-fullwidth-office-slider-1 {
 background-image: url(../../img/services/services-carousel-1.webp);
}

.img-fullwidth-office-slider-2 {
 background-image: url(../../img/services/services-carousel-2.webp);
}

.img-fullwidth-office-slider-3 {
  background-image: url(../../img/services/services-carousel-3.webp);
}

.img-fullwidth-office-slider-4 {
  background-image: url(../../img/services/services-carousel-1.webp);
}

/* Leasing Inquiries - Office Type + Team Size Combinations */
/* Private Office */
.office-slide.type-private-office.size-1-5 .img-fullwidth { background-image: url(../../img/leasing-inquiries/private-office-1-5.webp); }
.office-slide.type-private-office.size-6-10 .img-fullwidth { background-image: url(../../img/leasing-inquiries/private-office-6-10.webp); }

/* Dedicated Desk */
.office-slide.type-dedicated-desk.size-1-5 .img-fullwidth { background-image: url(../../img/leasing-inquiries/dedicated-desk-1-5.webp); }
.office-slide.type-dedicated-desk.size-6-10 .img-fullwidth { background-image: url(../../img/leasing-inquiries/dedicated-desk-6-10.webp); }
.office-slide.type-dedicated-desk.size-11-20 .img-fullwidth { background-image: url(../../img/leasing-inquiries/dedicated-desk-11-20.webp); }

/* Hot Desk */
.office-slide.type-hot-desk.size-1-5 .img-fullwidth { background-image: url(../../img/leasing-inquiries/hot-desk-1-5.webp); }
.office-slide.type-hot-desk.size-6-10 .img-fullwidth { background-image: url(../../img/leasing-inquiries/hot-desk-6-10.webp); }

/* Coworking Space */
.office-slide.type-coworking-space.size-1-5 .img-fullwidth { background-image: url(../../img/leasing-inquiries/coworking-space-1-5.webp); }
.office-slide.type-coworking-space.size-6-10 .img-fullwidth { background-image: url(../../img/leasing-inquiries/coworking-space-6-10.webp); }
.office-slide.type-coworking-space.size-11-20 .img-fullwidth { background-image: url(../../img/leasing-inquiries/coworking-space-11-20.webp); }

/* Meeting Room */
.office-slide.type-meeting-room.size-6-10 .img-fullwidth { background-image: url(../../img/leasing-inquiries/meeting-room-6-10.webp); }
.office-slide.type-meeting-room.size-11-20 .img-fullwidth { background-image: url(../../img/leasing-inquiries/meeting-room-11-20.webp); }

/* Conference Room */
.office-slide.type-conference-room.size-21-50 .img-fullwidth { background-image: url(../../img/leasing-inquiries/conference-room-21-50.webp); }
.office-slide.type-conference-room.size-50-plus .img-fullwidth { background-image: url(../../img/leasing-inquiries/conference-room-50-plus.webp); }

/* Almutawir Section Styles */
.img-fullwidth-almutawir {
  background-image: url(../../img/about/about-carousel.webp);
}

/* Almutawir Slick Styles - similar to section 1 */
.slick-left-almutawir,
.slick-right-almutawir {
width: 100%;
height: 100vh;
}

/* Ensure almutawir image displays correctly */
.slick-right-almutawir .img-fullwidth {
height: 100vh !important;
}


/* 1.11. news IMG carousel IMG BACKGROUND */
.news-page-img-carousel-item-1 {
 background-image: url(../../img/news/news-page-img-carousel-item-1.webp);
}

.news-page-img-carousel-item-2 {
 background-image: url(../../img/news/news-page-img-carousel-item-2.webp);
}

.news-page-img-carousel-item-3 {
 background-image: url(../../img/news/news-page-img-carousel-item-3.webp);
}

.news-page-img-carousel-item-4 {
 background-image: url(../../img/news/news-page-img-carousel-item-4.webp);
}


/* 1.12. news panel left bg IMG BACKGROUND */



/* 1.14. swiper timeline IMG BACKGROUND */
.swiper-slide-bg-1 {	
 background-image: url(../../img/background/timeline-bg-1.webp);
}

.swiper-slide-bg-2 {	
 background-image: url(../../img/background/timeline-bg-2.webp);
}

.swiper-slide-bg-3 {	
 background-image: url(../../img/background/timeline-bg-3.webp);
}

.swiper-slide-bg-4 {	
 background-image: url(../../img/background/timeline-bg-4.webp);
}

.swiper-slide-bg-5 {	
 background-image: url(../../img/background/timeline-bg-5.webp);
}

/* 2. reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

html, body {
height: 100%;
line-height: 170%;
/* iOS Safari viewport fix */
-webkit-overflow-scrolling: touch;
}

/* Stability: Prevent layout shifts and flickering */
* {
-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Ensure images load properly */
img {
max-width: 100%;
height: auto;
display: block;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

*:focus {  
outline: none;
}

/* remove dotted outline from links,
button and input element */
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}


/* 3. layout */
body {
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.6;
font-style: normal;
font-weight: 400;
background: #111;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
outline: none;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

a:hover,
a:visited,
a:active,
a:focus {
text-decoration: none;
outline: none;
}

p {
font-size: 16px;
line-height: 1.7;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

p a {
text-decoration: none;
font-style: italic;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

p a:hover {
text-decoration: none;
outline: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

strong {
font-weight: bold;
}

/* Fix yellow text issue - disable tap highlights */
* {
  -webkit-tap-highlight-color: transparent;
}


/* 4. center container */
.center-container {
position: absolute;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
background: none;
}

.center-block {
display: table-cell;
vertical-align: middle;
}

.center-container-menu {
position: relative;
display: table;
width: 100%;
height: 100%;
}

.center-block-menu {
display: table-cell;
vertical-align: middle;
}


/* 5. section */
.sections {
position: relative;
z-index: 5;
}

.nopadding {
padding: 0;
margin: 0;
}


/* 6. shadow */
.overlay:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-pointer-events: none;
   -moz-pointer-events: none;
        pointer-events: none;
z-index: 1;
}

.overlay-video:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
-webkit-pointer-events: auto;
   -moz-pointer-events: auto;
        pointer-events: auto;
z-index: 1;
}

.overlay-dark-35:before {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
}

.overlay-inverse-dark-35:before {
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
}

.overlay-dark-70:before {
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
}

.overlay-light-70:before {
background: -moz-linear-gradient(bottom, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
background: linear-gradient(to top, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

.overlay-dark-90:before {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
}


/* 7. hero container */ 
.hero-fullscreen {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}


/* 7.1. hero bg */
.hero-bg {
position: relative;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}


/* 7.2. hero fullscreen FIX */ 
.hero-fullscreen-FIX {
width: 100%;
height: 100%;
}


/* 8. slick fullscreen, slick fullscreen SPLIT */
.slick-fullscreen-img-fill {
position: relative;
display: block;
width: 100%;
overflow: hidden;
text-align: center;
}

.slick-fullscreen-img-fill img {
position: relative;
display: inline-block;
min-width: 100%;
max-width: none;
min-height: 100%;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill,
.slick-fullscreen-split .slick-fullscreen-item .slick-fullscreen-img-fill {
height: 100vh;
background: none;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .slick-fullscreen-info,
.slick-fullscreen-split .slick-fullscreen-item .slick-fullscreen-img-fill .slick-fullscreen-info {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 100vh;
text-align: center;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img,
.slick-fullscreen-split .slick-fullscreen-item .slick-fullscreen-img-fill .bg-img {
position: relative;
width: auto;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.slick-fullscreen .slick-fullscreen-item .slick-fullscreen-info > div,
.slick-fullscreen-split .slick-fullscreen-item .slick-fullscreen-info > div {
display: inline-block!important;
vertical-align: middle;
}


.slick-fullscreen:hover .slick-prev,
.slick-fullscreen:hover .slick-next,
.slick-fullscreen-split:hover .slick-prev,
.slick-fullscreen-split:hover .slick-next {
  opacity: 1;
}

.slick-fullscreen:hover .slick-prev,
.slick-fullscreen-split:hover .slick-prev {
left: -35px;
}

.slick-fullscreen:hover .slick-next,
.slick-fullscreen-split:hover .slick-next {
right: -35px;
}


.slick-fullscreen .slick-dots,
.slick-fullscreen-split .slick-dots {
position: absolute;
width: 100%;
height: 5px;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
background: rgba(255, 255, 255, .25);
list-style-type: none;
}

.slick-fullscreen .slick-dots li button,
.slick-fullscreen-split .slick-dots li button {
display: none;
}

.slick-fullscreen .slick-dots li,
.slick-fullscreen-split .slick-dots li {
position: absolute;
float: left;
width: 0;
height: 5px;
left: -5px;
bottom: 0;
background: #fff;
}

.slick-fullscreen .slick-dots li.slick-active,
.slick-fullscreen-split .slick-dots li.slick-active {
width: 100%;
-webkit-animation: progressDots 4s both;
   -moz-animation: progressDots 4s both;
    -ms-animation: progressDots 4s both;
     -o-animation: progressDots 4s both;
        animation: progressDots 4s both;
}

@-webkit-keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progressDots {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.slick-fullscreen,
.slick-fullscreen-split {
background: none;
}

.slick-fullscreen .slick-slide,
.slick-fullscreen-split .slick-slide {
display: none;
float: left;
height: 100%;
}

.slick-initialized .slick-slide {
display: block;
}


/* 10-12. Video (YouTube/HTML5/Vimeo) removed - not used */


/* 13. Slick v1.6.0 CUSTOM */
.slick-slide {
height: 100vh;
background: #fff;
}
		
.slick-slider {
margin-bottom: 0;
margin-top: 0;
cursor: default;
}


/* 13.1. slick slide flickering FIX */
.slick-track,
.slick-list {
-webkit-perspective: 2000;
        perspective: 2000;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

/* Accessibility: Prevent focus on hidden slides */
.slick-slide[aria-hidden="true"] {
pointer-events: none;
}

.slick-slide[aria-hidden="true"] * {
pointer-events: none;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

/* Re-enable on active slide */
.slick-slide[aria-hidden="false"],
.slick-slide:not([aria-hidden]) {
pointer-events: auto;
}

.slick-slide[aria-hidden="false"] *,
.slick-slide:not([aria-hidden]) * {
pointer-events: auto;
}


/* 13.2. slick left, slick right */
.slick-left,
.slick-right {
width: 100%;
height: auto;
}


/* 13.3. slick left about, slick right about */
.slick-left-about,
.slick-right-about {
width: 100%;
height: auto;
}


/* 13.4. slick navigation */
.slick-prev,
.slick-next {
position: absolute;
display: block;
top: 50%;
width: 56px;
height: 56px;
line-height: 56px;
text-align: center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
   -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  opacity: 0;
z-index: 1;
visibility: visible;
}

.slick-prev:hover,
.slick-next:hover {
-webkit-transition: 0 none;
   -moz-transition: 0 none;
        transition: 0 none;
  opacity: 1;
}

.slick-prev:before,
.slick-next:before {
font-size: 14px;
color: #fff;
padding-top: 10px;
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
display: block;
width: 66%;
height: 66%;
position: absolute;
background: rgba(0, 0, 0, 1);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
   -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  opacity: 1;
}

@media only screen and (max-width: 1200px) {
  .slick-prev,
  .slick-next {
    top: auto;
    bottom: 0;
    margin-top: -29px;
  }
}

.slick-services .slick-prev,
.slick-services .slick-next {
top: 50%;
}

.slick-prev {
left: -50px;
}

.slick-next {
right: -50px;
}

.slick-prev:before {
left: 45px;
top: 9px;
}

.slick-next:before {
right: 45px;
top: 9px;
}

.slick-prev:hover,
.slick-next:hover {
-webkit-transition: 0 none;
   -moz-transition: 0 none;
        transition: 0 none;
  opacity: 1;
}

.slick-left-about,
.slick-right-about,
.slick-services {
cursor: auto;
}

.slick-prev:hover:before,
.slick-next:hover:before,
.slick-prev:active:before,
.slick-next:active:before,
.slick-left-about:hover .slick-prev,
.slick-left-about:hover .slick-next,
.slick-right-about:hover .slick-prev,
.slick-right-about:hover .slick-next,
.slick-services:hover .slick-prev,
.slick-services:hover .slick-next,
.slick-left-almutawir:hover .slick-prev,
.slick-left-almutawir:hover .slick-next,
.slick-right-almutawir:hover .slick-prev,
.slick-right-almutawir:hover .slick-next {
  opacity: 1;
}

.slick-left-about:hover .slick-prev,
.slick-right-about:hover .slick-prev,
.slick-services:hover .slick-prev,
.slick-left-almutawir:hover .slick-prev,
.slick-right-almutawir:hover .slick-prev {
left: -35px;
}

.slick-left-about:hover .slick-next,
.slick-right-about:hover .slick-next,
.slick-services:hover .slick-next,
.slick-left-almutawir:hover .slick-next,
.slick-right-almutawir:hover .slick-next {
right: -35px;
}


/* 14. Owl Carousel v2.2.0 CUSTOM */
.owl-buttons {
position: static;
}


/* 14.1. Owl Carousel navigation */
.owl-prev,
.owl-next {
position: absolute;
display: block;
top: 50%;
margin-top: -29px;
width: 56px;
height: 56px;
line-height: 56px;
font-size: 14px;
color: #fff;
text-align: center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
   -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  opacity: 0;
visibility: visible;
}

@media (min-width: 992px) {
  /* exact half split */
  [data-anchor="leasing"] .row > .col-md-6 { width: 50% !important; }
}

/* Ensure full-height visual balance */
[data-anchor="leasing"] .leasing-inquiry-form,
[data-anchor="leasing"] .office-slider { min-height: 100vh; }
[data-anchor="leasing"] .office-slider .img-fullwidth { height: 100vh !important; }
[data-anchor="leasing"] .center-container { height: auto; }
[data-anchor="leasing"] .center-block { transform: none; }
[data-anchor="leasing"] .blockquote { padding-top: 6vh; }

/* Modern form styling for leasing */
[data-anchor="leasing"] .leasing-inquiry-form {
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
}

[data-anchor="leasing"] .leasing-form {
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* The actual grid items are inside the <form>. Apply grid to the form itself */
[data-anchor="leasing"] #leasing-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Extra safety spacing if grid is overridden */
[data-anchor="leasing"] #leasing-form .form-group + .form-group {
  margin-top: 4px;
}
[data-anchor="leasing"] .leasing-form .form-group,
[data-anchor="leasing"] .leasing-form .form-group.full,
[data-anchor="leasing"] .leasing-form .form-group.half { grid-column: 1 / -1; }

[data-anchor="leasing"] .form-group { margin: 0; }

[data-anchor="leasing"] .form-control {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  direction: rtl;
  text-align: right;
}
[data-anchor="leasing"] select.form-control,
[data-anchor="leasing"] input.form-control {
  height: 35px !important;
  line-height: 1.1;
  padding-right: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-anchor="leasing"] .text-txt,
[data-anchor="leasing"] .leasing-inquiry-form { overflow: visible; }
[data-anchor="leasing"] .form-group { position: relative; z-index: 0; }
[data-anchor="leasing"] select.form-control { position: relative; z-index: 1; }
[data-anchor="leasing"] .form-control:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
[data-anchor="leasing"] .form-control::placeholder { color: #888; }
[data-anchor="leasing"] textarea.form-control { resize: vertical; min-height: 96px; border-radius: 10px; }

[data-anchor="leasing"] .text-title h4 {
  letter-spacing: .2px;
  color: #fff;
  padding: 0 0 35px 0;
}
[data-anchor="leasing"] .text-txt {
  padding: 0 30px 0 0;
  border-right: 1px solid #555;
}
[data-anchor="leasing"] .leasing-form { padding: 0; }
[data-anchor="leasing"] .text-txt p { color: #ddd; }

[data-anchor="leasing"] .c-btn.inverse {
  padding: 15px 25px;
  border-radius: 0;
  width: auto;
}

[data-anchor="leasing"] .leasing-form .text-spacer {
  position: static; /* override global absolute */
  left: auto;
  display: flex;
  justify-content: center;
  padding-top: 0;
  margin-top: 6px;
}

/* align button with same left padding as inputs/paragraph */
[data-anchor="leasing"] .leasing-form .text-spacer .c-btn {
  margin-left: 0;
  margin-right: 0;
  margin: 0 auto;
}

/* Center the submit button */
[data-anchor="leasing"] .leasing-form .text-spacer button[type="submit"],
[data-anchor="leasing"] .leasing-form .text-spacer button[type="submit"].c-btn {
  margin: 0 auto !important;
  display: block;
}

/* vertically nudge content up a bit and center the form block in the left half */
@media (min-width: 992px) {
  [data-anchor="leasing"] .leasing-inquiry-form { display: flex; align-items: flex-start; }
  [data-anchor="leasing"] .leasing-wrapper { margin-top: 4vh; }
}

@media (min-width: 1200px) {
  [data-anchor="leasing"] .leasing-wrapper { max-width: 340px; }
}

/* Make leasing image fill its half-column like Almutawir section */
@media (min-width: 992px) {
  [data-anchor="leasing"] .office-slider { position: relative; }
  [data-anchor="leasing"] .office-slider .img-fullwidth-wrapper { height: 100vh; }
  [data-anchor="leasing"] .office-slider .img-fullwidth {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50vw; /* mirror almutawir half-width image */
  }
  [data-anchor="leasing"] .office-slider .slick-list,
  [data-anchor="leasing"] .office-slider .slick-track { height: 100vh; }
}

/* Tighter form width for leasing section on desktop */
@media (min-width: 992px) {
  [data-anchor="leasing"] .leasing-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 880px) {
  .owl-prev,
  .owl-next {
    top: 50%;
    margin-top: -29px;
  }
  
  /* Section 0 timeline text - consistent with Section 1 sizing */
  #section0 .timeline-text {
    font-size: 18px !important; /* Consistent with mobile paragraph size */
    line-height: 1.8 !important; /* Match Section 1 line-height */
  }
  
  #section0 .timeline-title {
    font-size: 22px !important; /* Match Section 1 title size */
    line-height: 1.3 !important;
  }
}

/* Testimonials carousel removed */

.owl-prev {
left: -50px;
}

.owl-next {
right: -50px;
}

.owl-prev:before,
.owl-next:before {
-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
        border-radius: 3px;
content: "";
display: block;
width: 66%;
height: 66%;
position: absolute;
background: rgba(0, 0, 0, 1);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
   -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
        transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.owl-prev:before {
left: 45px;
top: 9px;
}

.owl-next:before {
right: 45px;
top: 9px;
}

.owl-prev .owl-custom,
.owl-next .owl-custom {
position: relative;
}

.owl-prev .owl-custom {
position: relative;
left: 34px;
}

.owl-next .owl-custom {
position: relative;
right: 34px;
}

.owl-prev:hover,
.owl-next:hover {
-webkit-transition: 0 none;
   -moz-transition: 0 none;
        transition: 0 none;
}

.owl-prev:hover:before,
.owl-next:hover:before,
.owl-prev:active:before,
.owl-next:active:before,
.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
  opacity: 1;
}

.owl-carousel:hover .owl-prev {
left: -35px;
}

.owl-carousel:hover .owl-next {
right: -35px;
}


/* 15. contact info */
.contact-info-wrapper {
padding: 0;
}

.contact-info-description {
color: #fff;
text-align: center;
text-transform: uppercase;
}

/* Email and phone links should not be uppercase or break */
.contact-info-description a,
.contact-info-description a[href^="mailto:"],
.contact-info-description a[href^="tel:"],
.contact-info-description a.contact,
.contact-info-description .link-underline.contact {
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
word-break: keep-all;
transition: color 0.3s ease;
}

/* Hover effect for email and phone links - gold color */
.contact-info-description a:hover,
.contact-info-description a[href^="mailto:"]:hover,
.contact-info-description a[href^="tel:"]:hover,
.contact-info-description a.contact:hover,
.contact-info-description .link-underline.contact:hover {
color: #A89B7E;
}

.contact-info-description-img {
display: block;
font-size: 25px;
text-align: center;
color: #fff;
margin: 15px 0 15px 0;
}

@media only screen and (max-width: 880px) {
  .contact-info-description-img {
    font-size: 20px;
	margin: 10px 0 10px 0;
  }
}

.contact-info-description-img.large {
font-size: 40px;
}

@media only screen and (max-width: 880px) {
  .contact-info-description-img.large {
    font-size: 20px;
	margin: 10px 0 10px 0;
  }
}

.contact-info-text {
font-size: 13px;
letter-spacing: 0.05em;
color: #fff;
}

@media only screen and (max-width: 880px) {
  .contact-info-text {
    font-size: 14px;
  }
}

.contact-info-text.large {
font-size: 14px;
}

.contact-info-text.large a,
.contact-info-text.large a.contact {
letter-spacing: 0;
white-space: nowrap;
word-break: keep-all;
text-transform: none;
transition: color 0.3s ease;
}

/* Hover effect for email links - gold color */
.contact-info-text.large a:hover,
.contact-info-text.large a.contact:hover {
color: #A89B7E;
}

@media only screen and (max-width: 880px) {
  .contact-info-text.large {
    font-size: 14px;
  }
  
  .contact-info-text.large a,
  .contact-info-text.large a.contact {
    letter-spacing: 0;
    white-space: nowrap;
    word-break: keep-all;
    text-transform: none;
    transition: color 0.3s ease;
  }
  
  /* Hover effect for email links - gold color */
  .contact-info-text.large a:hover,
  .contact-info-text.large a.contact:hover {
    color: #A89B7E;
  }
  
  /* Fix text breaking for other text elements in mobile */
  .contact-info-text,
  .contact-info-description,
  .text-title,
  .text-title-secondary,
  .text-txt {
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: normal;
  }
}


/* 16. link underline */
.link-underline {
position: relative;
display: inline-block;
}

.link-underline::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #111;
-webkit-transform-origin: right center;
   -moz-transform-origin: right center;
    -ms-transform-origin: right center;
        transform-origin: right center;
-webkit-transform: scale(0, 1);
   -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
     -o-transform: scale(0, 1);
        transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-underline.link-underline-light::before,
.link-underline.contact::before {
background: #fff;
transition: background-color 0.3s ease;
}

.link-underline.contact::before {
bottom: -5px;
}

.link-underline.contact:hover::before {
background: #A89B7E;
}

a.contact,
a:hover.contact {
color: #fff;
letter-spacing: 0;
white-space: nowrap;
word-break: keep-all;
transition: color 0.3s ease;
}

/* Hover effect for email and phone links - gold color */
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover,
a.contact:hover,
.link-underline.contact:hover {
color: #A89B7E;
}

.link-underline:hover::before {
-webkit-transform-origin: left center;
   -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
-webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
        transform: scale(1, 1);
}


/* 17. button effect */
.c-btn {
position: relative;
display: inline-block;
border: none;
background: #fff;
letter-spacing: 0.25em;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #111;
margin: 20px 0 0 0;
padding: 15px 25px;
cursor: pointer;
-webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: Remove uppercase and adjust letter-spacing for Arabic safety */
@media only screen and (max-width: 1024px) {
  .c-btn {
    text-transform: none !important; /* Prevent uppercase on Arabic */
    letter-spacing: normal !important; /* Neutral letter-spacing for Arabic */
    line-height: 1.5 !important; /* Ensure adequate line-height */
  }
}

.c-btn.inverse {
color: #111;
background: #fff;
}

.c-btn.inverse-dark {
color: #fff;
background: #111;
}

.c-btn.fullwidth {
width: 225px;
}

.c-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #A89B7E;
-webkit-transform-origin: right center;
   -moz-transform-origin: right center;
    -ms-transform-origin: right center;
        transform-origin: right center;
-webkit-transform: scale(0, 1);
   -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
     -o-transform: scale(0, 1);
        transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

     -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-btn.inverse::before {
background: #A89B7E;
}

.c-btn.inverse-dark::before {
background: #A89B7E;
}

.c-btn:hover::before,
a:hover .c-btn::before {
-webkit-transform-origin: left center;
   -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
-webkit-transform: scale(1, 1);
   -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
     -o-transform: scale(1, 1);
        transform: scale(1, 1);
}

.c-btn span {
display: inline-block;
position: relative;
z-index: 2;
}

.c-btn:hover,
a:hover .c-btn {
color: #fff;
}

.c-btn.inverse:hover {
color: #fff;
}

.c-btn.inverse-dark:hover {
color: #fff;
}


/* 18. testimonials (removed) */


/* 19. services accordion */
.services-container {
position: relative;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: #fff;
}

/* Services container with dark-logo - increase font size at all breakpoints */
.services-container.dark-logo {
font-size: 22px !important; /* Increased base font size */
}

.services-container.dark-logo * {
font-size: inherit; /* Inherit from container */
}

.services-container.dark-logo .services-accordion ul li span {
font-size: 24px;
}

.services-container.dark-logo .services-accordion ul ul li,
.services-container.dark-logo .services-accordion ul ul li a {
font-size: 20px !important; /* Increased from 17px */
}

.services-wrapper {
max-height: none; /* Remove height limit - let content expand */
padding: 0 200px;
margin-top: -18px;
overflow-y: visible; /* Remove scroll - show all content */
overflow-x: hidden;
}

@media only screen and (max-width: 1200px) {
  .services-wrapper {
    padding: 0 40px;
  }
  
  /* Services container with dark-logo tablet - increase font size */
  .services-container.dark-logo {
    font-size: 21px !important; /* Slightly smaller than desktop */
  }
  
  .services-container.dark-logo .services-accordion ul li span {
    font-size: 23px;
  }
  
  .services-container.dark-logo .services-accordion ul ul li,
  .services-container.dark-logo .services-accordion ul ul li a {
    font-size: 19px !important; /* Slightly smaller than desktop */
  }
}

@media only screen and (max-width: 1024px) {
  /* Arabic RTL override - Services accordion - MUST override base CSS */
  html[lang="ar"] .services-accordion,
  html[lang="ar"] .services-accordion *,
  html[lang="ar"] .services-accordion ul,
  html[lang="ar"] .services-accordion ul li,
  html[lang="ar"] .services-accordion ul li span,
  html[lang="ar"] .services-accordion ul ul,
  html[lang="ar"] .services-accordion ul ul li,
  html[lang="ar"] .services-accordion ul ul li a,
  html[lang="ar"] #section4 .services-accordion,
  html[lang="ar"] #section4 .services-accordion *,
  html[lang="ar"] #section4 .services-accordion ul,
  html[lang="ar"] #section4 .services-accordion ul li,
  html[lang="ar"] #section4 .services-accordion ul li span,
  html[lang="ar"] #section4 .services-accordion ul ul,
  html[lang="ar"] #section4 .services-accordion ul ul li,
  html[lang="ar"] #section4 .services-accordion ul ul li a,
  html[lang="ar"] .services-container.dark-logo .services-accordion,
  html[lang="ar"] .services-container.dark-logo .services-accordion *,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul li,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul li span,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul ul,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul ul li,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul ul li a {
    direction: rtl !important;
    text-align: right !important;
  }
  
  /* Override margin-left: 15px from base CSS */
  html[lang="ar"] .services-accordion ul ul,
  html[lang="ar"] #section4 .services-accordion ul ul,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul ul {
    margin-left: 0 !important;
    margin-right: 15px !important;
  }
  
  /* Override right: 20px for icon positioning */
  html[lang="ar"] .services-accordion ul li span:after,
  html[lang="ar"] #section4 .services-accordion ul li span:after {
    right: auto !important;
    left: 20px !important;
  }
  
  /* Ensure links are RTL */
  html[lang="ar"] .services-accordion ul ul li a,
  html[lang="ar"] #section4 .services-accordion ul ul li a,
  html[lang="ar"] .services-container.dark-logo .services-accordion ul ul li a {
    text-align: right !important;
    direction: rtl !important;
  }
  
  @media only screen and (max-width: 880px) {
    html[lang="ar"] .services-accordion ul li span:after,
    html[lang="ar"] #section4 .services-accordion ul li span:after {
      left: 16px !important;
      top: 18px !important;
    }
  }
  
  @media only screen and (max-width: 640px) {
    html[lang="ar"] .services-accordion ul li span:after,
    html[lang="ar"] #section4 .services-accordion ul li span:after {
      left: 16px !important;
    }
  }
}

@media only screen and (max-width: 880px) {
  
  #section4 .services-accordion ul li span {
    padding: 16px 0;
    cursor: pointer;
    font-size: 20px;
  }
  
  /* Services accordion sub-items mobile sizing */
  #section4 .services-accordion ul ul li,
  #section4 .services-accordion ul ul li a {
    font-size: 16px !important; /* Increased from 14px for better mobile Arabic readability */
    line-height: 1.6 !important;
  }
  
  /* Services container with dark-logo mobile - increase font size */
  .services-container.dark-logo {
    font-size: 20px !important; /* Increased for mobile */
  }
  
  .services-container.dark-logo .services-accordion ul li span {
    font-size: 22px;
  }
  
  .services-container.dark-logo .services-accordion ul ul li,
  .services-container.dark-logo .services-accordion ul ul li a {
    font-size: 18px !important; /* Increased from 16px for mobile */
  }
  
  
  #section4 .services-accordion ul li ul {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
  
  #section4 .services-accordion ul li.toggled ul {
    display: block !important;
    max-height: 1000px !important;
    opacity: 1 !important;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  }
}

@media only screen and (max-width: 640px) {
  .services-wrapper {
    padding: 0 20px;
	height: auto;
  }
  
  #section4 .services-accordion ul li span {
    font-size: 19px;
  }
  
  /* Services container with dark-logo small mobile - increase font size */
  .services-container.dark-logo {
    font-size: 20px !important; /* Maintain increased size for small mobile */
  }
  
  .services-container.dark-logo .services-accordion ul li span {
    font-size: 21px;
  }
  
  .services-container.dark-logo .services-accordion ul ul li,
  .services-container.dark-logo .services-accordion ul ul li a {
    font-size: 18px !important; /* Maintain increased size for small mobile */
  }
}



/* Services section mobile visibility - prevent content cutoff */

.services-accordion {
background: none;
width: auto;
}

.services-accordion > ul > li {
list-style: none;
border-bottom: 1px solid #ccc;
}

.services-accordion ul li span {
position: relative;
display: block;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 22px;
text-transform: uppercase;
color: #111;
letter-spacing: 0.05em;
line-height: 1.3;
padding: 10px 0;
cursor: pointer;
}

.services-accordion ul li span:after {
position: absolute;
display: block;
content: "+";
font-family: "Ionicons";					
right: 20px;
top: 20px;
font-size: 16px;
line-height: 16px;
width: 15px;
height: 15px;
text-align: center;
color: #111;
font-weight: bold;
}

.services-accordion ul li.toggled span:after {
content: "–";
color: #5f5f5f;
font-size: 16px;
line-height: 16px;
}

.services-accordion ul ul {
margin-left: 15px;
margin-bottom: 8px;
display: none;
}

.services-accordion ul ul li,
.services-accordion ul ul li a {
display: block;
color: #111;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
text-decoration: none;
margin-bottom: 5px;
width: auto;
line-height: 1.6; /* Increased from 1.25 for better Arabic readability */
}

.services-accordion ul ul li a:hover {
color: #111;
}


/* 20. newsletter form */
h2.section-heading.newsletter {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
color: #fff;
line-height: 1.25;
padding: 0 0 28px 0;
text-shadow: 1px 1px 2px #111;
}

#subscribe-wrapper {
position: relative;
width: 300px;
height: 160px;
margin: 120px auto 0 auto;
background: none;
text-align: center;
}

@media only screen and (max-width: 480px) {
  #subscribe-wrapper {
    width: 260px;
	margin: 37px auto 0 auto;
  }
}

.newsletter {
position: relative;
clear: both;
border: none;
background: none;
padding: 0;
overflow: hidden;
}

#subscribe input {
position: relative;
width: 225px;
height: 40px;
text-align: center;
color: #fff;
border: none;
border-bottom: 1px solid #fff;
background: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#subscribe input:focus, #subscribe textarea:focus {
color: #fff;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

#subscribe input:hover {
border-color: rgba(119, 119, 119, .5);
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

.subscribe-success {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-align: center;
color: #fff;
margin: 0 auto;
padding: 40px 0 0 0;
line-height: 1;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

#subscribe .subscribe-error {
font-size: 14px;
text-transform: uppercase;
text-align: center;
color: #fff;
display: block;
margin: 8px auto 0 auto;
padding: 0;
letter-spacing: 0.15em;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* 20.1. newsletter placeholders */
input[type="text"].subscribe-email::-webkit-input-placeholder {
color: #fff;
}

input[type="text"].subscribe-email:-ms-input-placeholder{
color: #fff;
}

input[type="text"].subscribe-email::-moz-placeholder {
color: #fff;
}

input:focus.subscribe-email::-webkit-input-placeholder { color: transparent; }
     input:focus.subscribe-email:-ms-input-placeholder { color: transparent; }
         input:focus.subscribe-email::-moz-placeholder { color: transparent; }
          input:focus.subscribe-email:-moz-placeholder { color: transparent; }


/* 21. social icons */
.social-icons-wrapper {
position: relative;
margin: 45px auto 0 auto;
text-align: center;
}

@media only screen and (max-width: 640px) {
  .social-icons-wrapper {
    margin: 38px auto 0 auto;
  }
}

.social-icons-wrapper ul {
margin: 0 auto;
padding: 0;
list-style-type: none;
}

.social-icons-wrapper ul li {
display: inline-block;
margin: 0 auto;
padding: 0 0 0 5px;
}

ul.social-icons {
font-size: 20px;
line-height: 1;
margin: 0;
padding: 0;
position: relative;
}

ul.social-icons a {
padding: 0;
color: #fff;
text-decoration: none;
  opacity: 1;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

ul.social-icons a:hover {
padding: 0;
color: #fff;
text-decoration: none;
  opacity: 0.5;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}


/* 22. fullwidth IMG */
.img-fullwidth-wrapper {
position: relative;
background: #111;
}

.img-fullwidth {
height: 100vh;
}

@media (min-width: 992px) {
  .img-fullwidth {
    position: absolute;
	width: 50vw;
    height: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
  }
}

@media only screen and (max-width: 640px) {
  .img-fullwidth {
    min-height: 350px;
  }
}

.img-fullwidth-all {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}


/* 23. preloader */
.preloader-bg {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader {
position: fixed;
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
z-index: 999999;
}

#preloader-status {
display: table-cell;
vertical-align: middle;
}

.preloader-position {
position: relative;
margin: 0 auto;
text-align: center;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
}

.loader {
position: relative;
width: 45px;
height: 45px;
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: 2px;
-webkit-animation: rotate 1s infinite linear;
   -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
     -o-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
border: 3px solid rgba(17, 17, 17, .15);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

.loader span {
position: absolute;
width: 45px;
height: 45px;
top: -3px;
left: -3px;
border: 3px solid transparent;
border-top: 3px solid rgba(17, 17, 17, .75);
-webkit-border-radius: 50%;
   -moz-border-radius: 50%;
    -ms-border-radius: 50%;
     -o-border-radius: 50%;
        border-radius: 50%;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Preloader logo - 100px when preloader is visible */
/* ============================================================================ */
/* PRELOADER LOGO - Independent rules for preloader state only */
/* All breakpoints: 100px × 100px */
/* ============================================================================ */

/* Preloader logo - all breakpoints: 100px × 100px */
#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"]) ~ .logo,
body:has(#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"])) .logo,
body:not(.is-loaded) .logo {
  position: fixed;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 99999;
}
#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"]) ~ .logo .logo-img,
#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"]) ~ .logo .logo-img-dark,
body:has(#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"])) .logo .logo-img,
body:has(#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"])) .logo .logo-img-dark,
body:not(.is-loaded) .logo .logo-img,
body:not(.is-loaded) .logo .logo-img-dark,
#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"]) ~ .logo .logo-img:before,
#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"]) ~ .logo .logo-img-dark:before,
body:has(#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"])) .logo .logo-img:before,
body:has(#preloader:not([aria-hidden="true"]):not(.preloader--hidden):not([style*="display: none"])) .logo .logo-img-dark:before,
body:not(.is-loaded) .logo .logo-img:before,
body:not(.is-loaded) .logo .logo-img-dark:before {
  width: 100px !important;
  height: 100px !important;
}


/* 24. about content */
.about-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
   -ms-flex-align: center;
      align-items: center;
-webkit-box-pack: center;
   -ms-flex-pack: center;
-webkit-justify-content: center;
        justify-content: center;
background: #000;
}

.about-content .about-content-inner {
position: relative;
width: 100%;
padding: 0 200px;
text-align: left;
}

@media only screen and (max-width: 1200px) {
  .about-content .about-content-inner {
    padding: 0 40px;
  }  
}

@media only screen and (max-width: 880px) {
  /* Section 1: Mobile container fixes */
  #section1 .about-content {
    width: 100%;
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #section1 .about-content .about-content-inner {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-sizing: border-box;
  }
  
  /* Image containers - prevent black corners */
  #section1 .img-fullwidth-wrapper {
    overflow: hidden;
    background: transparent;
    width: 100%;
  }
  
  #section1 .img-fullwidth {
    width: 100%;
    background-size: cover;
    background-position: center;
  }
  
  /* Slick containers */
  #section1 .slick-left-almutawir {
    overflow: hidden;
    width: 100%;
  }
  
  #section1 .slick-list,
  #section1 .slick-track {
    overflow: hidden;
  }
  
  /* Height correction container */
  #section1 .height-correction {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Text elements */
  #section1 .text-title {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #section1 .text-title h4 {
    text-align: center;
    padding: 0 0 15px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  
  #section1 .text-txt {
    padding: 0;
    text-align: center;
    border-left: none;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  #section1 .text-txt p {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  
  #section1 .text-spacer {
    padding: 20px 0 0 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #section1 .text-spacer .c-btn.inverse {
    width: auto;
    margin: 0 auto;
  }
  
  /* Column containers */
  #section1 .col-md-6.nopadding:first-child {
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.about-content-inner h3 {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
color: #fff;
}

@media only screen and (max-width: 880px) {
  .about-content-inner h3 {
    font-size: 18px;
	padding: 0 10px;
  }
}

/* Testimonials content removed */

.height-correction {
position: relative;
width: 100%;
height: auto;
margin-top: 0;
}

.text-title h4 {
font-family: 'Poppins', sans-serif;
font-size: 35px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
color: #fff;
line-height: 1.25;
padding: 0 0 20px 0;
width: 100%;
}

.text-title.text-title-dark h4 {
color: #111;
}

.text-title-secondary h4 {
font-family: 'Poppins', sans-serif;
font-size: 23px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
color: #fff;
line-height: 1.25;
padding: 0 0 35px 0;
}

@media only screen and (max-width: 880px) {
  .text-title-secondary h4 {
    font-size: 20px; /* Increased from 18px for better mobile hierarchy and Arabic readability */
  }
}

/* Testimonials title styles removed */

.text-title-secondary.text-title-secondary-contact h4 {
padding: 0 0 27px 0;
}

.text-txt { 
line-height: 150%;
padding: 0;
text-align: center;
border-left: none;
width: 100%;
}

@media only screen and (max-width: 880px) {
  .text-txt {
    padding: 0;
    text-align: center;
    border-left: none;
    margin: 0 auto;
    max-width: 90%;
  }
  
  .text-txt p {
    line-height: 1.6;
  }
}

.text-txt p {  
line-height: 1.4;
color: #fff;
}

.text-txt.text-txt-dark p {  
color: #111;
}

.text-spacer {
position: relative;
padding: 5px 0 0 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.text-spacer .c-btn.inverse {
width: auto;
margin: 0 auto;
}

@media only screen and (max-width: 880px) {
  .text-spacer {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    text-align: center;
    padding: 20px 0 0 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .text-spacer .c-btn {
    margin: 0 auto;
  }
}


/* 25. split border */	
.split-border {
position: relative;
margin: 0 auto 33px 16px;
line-height: 1;
}

@media only screen and (max-width: 880px) {
  .split-border {
    margin: 0 auto 30px auto;
  }
}

.split-border span {
position: relative;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.10em;
color: #fff;
line-height: 1;
z-index: 10;
}

.split-border.dark span {
color: #111;
}

.split-border span:before,
.split-border span:after {
content: "";
position: absolute;
border-top: 1px solid #fff;
margin-top: 6px;
}

.split-border.dark span:before,
.split-border.dark span:after {
border-top: 1px solid #111;
}

.split-border span:before {
width: 25%;
margin-right: 20px;
right: 100%;
}

.split-border span:after {
width: 25%;
margin-left: 20px;
}	
	
	
/* 26. fullPage section */
@media only screen and (max-width: 880px) {
  #fullpage {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#fp-nav.right,
#fp-nav.left {
z-index: 1000;
display: none;
visibility: hidden;
}

.section {
overflow: hidden;
}

/* Mobile sections need different overflow handling */
@media only screen and (max-width: 880px) {
  .section {
    overflow-x: hidden;
    overflow-y: visible;
  }
}

.section.section-contact {
height: 100vh;
}


/* 26.1. section IMG */
.section-bg-home,
.section-bg-home-carousel,
.section-bg-contact {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

@media only screen and (max-width: 880px) {
  /* SAFETY: ensure slick slides render on mobile - SCAFFOLD ONLY (display/visibility/opacity) */
  #section1 .slick-slide,
  #section2 .slick-slide,
  #section3 .slick-slide,
  #section4 .slick-slide,
  #section5 .slick-slide,
  #section6 .slick-slide,
  #section7 .slick-slide { 
    display:block !important; 
    opacity:1 !important; 
    visibility:visible !important; 
  }

  /* SAFETY: prevent clipping of slide content - SCAFFOLD ONLY (overflow) */
  #section1 .slick-list,
  #section2 .slick-list,
  #section3 .slick-list,
  #section4 .slick-list,
  #section5 .slick-list,
  #section6 .slick-list,
  #section7 .slick-list { 
    overflow:visible !important; 
  }

  /* REMOVED: Layout properties (position, max-height, -webkit-overflow-scrolling) moved to ≤880 breakpoint */
  /* Services wrapper layout rules moved to ≤880 to maintain scaffold purity at 900 */
}

.section-bg-home-carousel {
background: #fff;
}

#section0 {
background: none;
}

#section1,
#section2,
#section3,
#section5 {
background: #111;
}


/* 27. introduction */
.introduction {
position: absolute;
width: 100%;
height: auto;
left: auto;
bottom: 14px;
text-align: center;
text-shadow: 1px 1px 2px #111;
overflow: hidden;
}

.introduction.light {
text-shadow: 1px 1px 2px #fff;
}

@media only screen and (max-width: 880px) {
  .introduction {
    bottom: 8px;
  }
}

@media only screen and (max-width: 640px) {
  .introduction {
    bottom: 3px;
  }
}

h1.home-page-main-title {
position: relative;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 105px;
text-align: center;
text-transform: uppercase;
letter-spacing: normal;
color: #fff;
margin: 35px auto 43px -2px;
width: 100%;
line-height: 100%;
z-index: 1;
}

h1.home-page-main-title.dark {
color: #111;
}

@media only screen and (max-width: 880px) {
  h1.home-page-main-title {
    font-size: 85px;
	margin: 33px auto 38px 7px;
  }
}

@media only screen and (max-width: 640px) {
  h1.home-page-main-title {
    font-size: 65px;
	margin: 25px auto 30px 7px;
  }
}

@media only screen and (max-width: 480px) {
  h1.home-page-main-title {
    font-size: 65px;
	margin: 20px auto 30px 7px;
  }
}

h2.home-page-main-title {
position: relative;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
margin: 0 auto;
width: 100%;
line-height: 100%;
z-index: 1;
}

h2.home-page-main-title.dark {
color: #111;
}

@media only screen and (max-width: 880px) {
  h2.home-page-main-title {
    font-size: 17px;
	margin-left: 9px;
  }
}

@media only screen and (max-width: 640px) {
  h2.home-page-main-title {
    font-size: 15px;
  }
}

.home-page-subtitle-carousel {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
z-index: 1;
}


/* 28. section title */
.section-title-vertical {
position: absolute;
left: 35px;
bottom: 0;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 17px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
text-shadow: 1px 1px 2px #111;
z-index: 10;
}

.section-title-vertical.dark {
color: #111;
text-shadow: none;
}

@media only screen and (max-width: 880px) {
  .section-title-vertical,
  .section-title-vertical.dark {
    display: none;
	visibility: hidden;
  }
}

@media only screen and (min-width: 881px) and (max-width: 1024px) {
  .section-title-vertical,
  .section-title-vertical.dark {
    display: none;
	visibility: hidden;
  }
}

.section-title-vertical.right-side {
left: auto;
right: 45px;
}

.section-title-vertical span {
writing-mode: vertical-rl;
white-space: nowrap;
}

.section-title-vertical:after {
content: "";
display: block;
width: 2px;
height: 70px;
background-color: #fff;
margin: 20px 0 0 12px;
}

.section-title-vertical.dark:after {
background-color: #111;
}


/* 29. home multiple images */
.home-img-top-left {
position: absolute;
width: 33%;
height: 50%;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.home-img-top-center {
position: absolute;
width: 33%;
height: 50%;
left: 33%;
top: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.home-img-top-right {
position: absolute;
width: 33%;
height: 50%;
left: 67%;
top: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.home-img-bottom-left {
position: absolute;
width: 33%;
height: 50%;
left: 0;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.home-img-bottom-center {
position: absolute;
width: 33%;
height: 50%;
left: 33%;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.home-img-bottom-right {
position: absolute;
width: 33%;
height: 50%;
left: 67%;
bottom: 0;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}


/* 30. news IMG carousel */
.news-page-img-wrapper {
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: visible;
}

/* Ensure carousel items and buttons are clickable */
#news-page-img-carousel .owl-item,
#news-page-img-carousel .owl-stage-outer,
#news-page-img-carousel .owl-stage {
overflow: visible !important;
pointer-events: auto !important;
}

#news-page-img-carousel .news-page-img-carousel-item {
overflow: visible !important;
z-index: 50 !important;
pointer-events: auto !important;
}

#news-page-img-carousel .news-page-img-carousel-wrapper {
overflow: visible !important;
z-index: 100 !important;
pointer-events: auto !important;
}

@media only screen and (max-width: 880px) {
  .news-page-img-wrapper {
    width: 100%;
  }
}

.news-page-img-carousel-item-1,
.news-page-img-carousel-item-2,
.news-page-img-carousel-item-3,
.news-page-img-carousel-item-4 {
position: relative;
width: 100%;
height: 100vh;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
z-index: 1;
pointer-events: auto;
}


/* 30.1. news IMG carousel items */
.news-page-img-carousel-title h4 {
font-family: 'Poppins', sans-serif;
font-size: 35px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
color: #fff;
line-height: 1.25;
padding: 0;
text-shadow: 1px 1px 2px #111;
}

@media only screen and (max-width: 880px) {
  .news-page-img-carousel-title h4 {
    font-size: 18px;
	text-align: center;
  }
}

@media only screen and (max-width: 640px) {
  .news-page-img-carousel-title h4 {
	padding: 0 0 22px 0;
  }
}

.news-page-img-carousel-spacer-top {
margin-top: 42px;
}

@media only screen and (max-width: 640px) {
  .news-page-img-carousel-spacer-top {
	margin-top: 0;
  }
}

.news-page-img-carousel-spacer-bottom {
margin-top: 24px;
}

@media only screen and (max-width: 640px) {
  .news-page-img-carousel-spacer-bottom {
	margin-top: 8px;
  }
}

.news-page-img-carousel-wrapper {
position: relative;
background: none;
height: 100vh;
z-index: 50;
pointer-events: auto;
}

.news-page-img-carousel-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
  opacity: 0;
-webkit-transition: all 1s ease 0s;
   -moz-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
background-color: rgba(0, 0, 0, .7);
}

/* Ensure buttons are above overlay in section 5 */
.news-page-img-carousel-item.overlay {
position: relative;
pointer-events: none;
}

.news-page-img-carousel-item.overlay .news-page-img-carousel-wrapper {
pointer-events: auto;
position: relative;
z-index: 10;
}

.news-page-img-carousel-item.overlay .news-page-img-carousel-text {
pointer-events: auto;
position: relative;
z-index: 100;
}

.news-page-img-carousel-wrapper .news-page-img-carousel-text {
position: absolute;
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
line-height: 1.7; /* Increased from 1.5 for better Arabic readability */
font-style: normal;
font-weight: 400;
color: #fff;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
left: 0;
bottom: 60px;
padding: 0 60px;
z-index: 100;
pointer-events: auto;
}

@media only screen and (max-width: 880px) {
  .news-page-img-carousel-wrapper .news-page-img-carousel-text {
    font-size: 16px !important; /* Increased from 13px for better Arabic readability */
	text-align: center;
	bottom: 30px;
	padding: 0 30px;
  }
  
  /* Ensure buttons are visible and clickable on mobile */
  .news-page-img-carousel-wrapper .news-page-img-carousel-text .news-page-img-carousel-content {
    max-height: 600px;
    opacity: 1;
    overflow: visible;
  }
}

@media only screen and (max-width: 640px) {
  .news-page-img-carousel-wrapper .news-page-img-carousel-text {
	padding: 0 15px;
  }
}

.news-page-img-carousel-text .news-page-img-carousel-heading {
font-family: 'Poppins', sans-serif;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
line-height: 1.7; /* Increased from 1.5 for better Arabic readability */
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-shadow: 1px 1px 2px #111;
letter-spacing: 0.05em;
}

.news-page-img-carousel-heading.news-page-img-carousel-heading-dark {
text-align: left;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
text-transform: uppercase;
padding-bottom: 20px;
}

@media only screen and (max-width: 880px) {
  .news-page-img-carousel-heading.news-page-img-carousel-heading-dark {
    text-align: center;
  }
}

.news-page-img-carousel-heading.news-page-img-carousel-heading-dark span {
display: block;
font-style: italic;
font-weight: 700;
}

.news-page-img-carousel-wrapper .news-page-img-carousel-text .news-page-img-carousel-content {
max-height: 0;
opacity: 0;
overflow: visible;
-webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
}

.news-page-img-carousel-wrapper .news-page-img-carousel-text .news-page-img-carousel-content .c-btn {
position: relative;
z-index: 200;
pointer-events: auto;
}

.news-page-img-carousel-wrapper:hover::after {
  opacity: 1;
}

.news-page-img-carousel-wrapper:hover .news-page-img-carousel-content {
max-height: 600px;
opacity: 1;
-webkit-transition: all 1s ease-in;
   -moz-transition: all 1s ease-in;
        transition: all 1s ease-in;
}


/* 31. works IMG carousel */
.works-page-img-wrapper {
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}

.works-page-img-wrapper a,
.works-page-img-wrapper a:hover {
color: #fff;
}

@media only screen and (max-width: 880px) {
  .works-page-img-wrapper {
    width: 100%;
  }
}

.works-page-img-carousel-item-1,
.works-page-img-carousel-item-2,
.works-page-img-carousel-item-3,
.works-page-img-carousel-item-4,
.works-page-img-carousel-item-5,
.works-page-img-carousel-item-6,
.works-page-img-carousel-item-7,
.works-page-img-carousel-item-8,
.works-page-img-carousel-item-9,
.works-page-img-carousel-item-10,
.works-page-img-carousel-item-11,
.works-page-img-carousel-item-12 {
position: relative;
width: 100%;
height: 50vh;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}


/* 31.1. works IMG carousel items */
.works-page-img-carousel-title h4 {
font-family: 'Poppins', sans-serif;
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
color: #fff;
line-height: 1.25;
padding: 0;
text-shadow: 1px 1px 2px #111;
}

@media only screen and (max-width: 880px) {
  .works-page-img-carousel-title h4 {
    font-size: 18px;
	text-align: center;
  }
}

@media only screen and (max-width: 640px) {
  .works-page-img-carousel-title h4 {
	padding: 0 0 22px 0;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .works-page-img-carousel-title h4 {
	padding: 0;
  }
}

@media only screen and (max-width: 480px) {
  .works-page-img-carousel-title h4 {
	padding: 0 0 22px 0;
  }
}

.works-page-img-carousel-spacer-top {
margin-top: 21px;
}

@media only screen and (max-width: 640px) {
  .works-page-img-carousel-spacer-top {
	margin-top: 0;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .works-page-img-carousel-spacer-top {
	margin-top: -13px;
  }
}

@media only screen and (max-width: 480px) {
  .works-page-img-carousel-spacer-top {
	margin-top: 0;
  }
}

.works-page-img-carousel-wrapper {
position: relative;
background: none;
height: 50vh;
}

.works-page-img-carousel-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
  opacity: 0;
-webkit-transition: all 1s ease 0s;
   -moz-transition: all 1s ease 0s;
        transition: all 1s ease 0s;
        transition: all 1s ease 0s;
background-color: rgba(0, 0, 0, .7);
}

.works-page-img-carousel-text {
position: absolute;
width: 100%;
font-family: 'Poppins', sans-serif;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
line-height: 1.7; /* Increased from 1.5 for better Arabic readability */
font-style: normal;
font-weight: 400;
color: #fff;
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
left: 0;
bottom: 30px;
padding: 0 30px;
z-index: 10;
}

@media only screen and (max-width: 880px) {
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
    font-size: 16px !important; /* Increased from 13px for better Arabic readability */
	text-align: center;
  }
}

@media only screen and (max-width: 640px) {
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
	padding: 0 15px;
  }
}

@media only screen and (max-width: 640px) and (orientation: landscape) {
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
	bottom: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .works-page-img-carousel-wrapper .works-page-img-carousel-text {
	bottom: 30px;
  }
}

.works-page-img-carousel-text .works-page-img-carousel-heading {
font-family: 'Poppins', sans-serif;
font-size: 17px !important; /* Increased from 14px for better Arabic readability */
line-height: 1.7; /* Increased from 1.5 for better Arabic readability */
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-shadow: 1px 1px 2px #111;
letter-spacing: 0.05em;
}

.works-page-img-carousel-wrapper .works-page-img-carousel-text .works-page-img-carousel-content {
max-height: 0;
  opacity: 0;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
}

.works-page-img-carousel-wrapper:hover::after {
  opacity: 1;
}

.works-page-img-carousel-wrapper:hover .works-page-img-carousel-content {
max-height: 600px;
  opacity: 1;
-webkit-transition: all 1s ease-in;
   -moz-transition: all 1s ease-in;
        transition: all 1s ease-in;
        transition: all 1s ease-in;
}


/* 31.2. Magnific Popup v1.1.0 CUSTOM */
.mfp-arrow-left:after {
font-family: "Ionicons";
content: "\f124";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-arrow-right:after {
font-family: "Ionicons";
content: "\f125";
font-size: 18px;
color: #fff;
margin-top: 22px;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: crosshair;
}

.mfp-arrow-left:after,
.mfp-arrow-left:before {
border-right: none;
}

.mfp-arrow-right:after,
.mfp-arrow-right:before {
border-left: none;
}

.mfp-title {
font-family: 'Poppins', sans-serif;
font-size: 13px;
line-height: 1.5;
font-style: normal;
font-weight: 400;
letter-spacing: 0.05em;
}


/* 32. skills bar */
.show-skillbar {
position: relative;
padding: 0;
margin: 73px 5px 0 5px;
text-align: left;
}

@media only screen and (max-width: 880px) {
  .show-skillbar {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 640px) {
  .show-skillbar {
    margin: 49px 0 0 0;
  }
}

.skillbar {
position: relative;
display: inline-block;
width: 100%;
height: 21px;
margin: 0 0 30px 0;
background: none;
}

.skillbar-title {
position: absolute;
width: auto;
height: 21px;
line-height: 21px;
top: -21px;
left: 0;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
color: #fff;
background: none;
padding: 0;
}

.skillbar-bar {
display: inline-block;
width: 0px;
height: 3px;
background: #fff;
margin: 0 0 3px 0;
}

.skill-bar-percent {
position: absolute;
height: auto;
line-height: 1;
top: -21px;
right: 0;
color: #fff;
font-size: 13px;
}


/* 33. facts counter */
.facts-counter-wrapper {
padding: 0;
margin: 52px -15px 0 -15px;
}

@media only screen and (max-width: 880px) {
  .facts-counter-wrapper {
    margin: 33px -15px 0 -15px;
  }
}

@media only screen and (max-width: 640px) {
  .facts-counter-wrapper {
    margin: 9px 0 0 0;
  }
}

.facts-counter-number {
font-family: 'Poppins', sans-serif;
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.04em;
font-style: normal;
line-height: 1.3;
text-align: center;
color: #fff;
}

@media only screen and (max-width: 880px) {
  .facts-counter-number {
	margin: 20px 0 0 0;
  }
}

@media only screen and (max-width: 640px) {
  .facts-counter-number {
    font-size: 20px;
  }
}

.facts-counter-number.large {
font-size: 35px;
}

@media only screen and (max-width: 880px) {
  .facts-counter-number.large {
    font-size: 25px;
  }
}

@media only screen and (max-width: 640px) {
 .facts-counter-number.large {
    font-size: 20px;
  }
}

.facts-counter-description {
color: #fff;
text-align: center;
text-transform: uppercase;
}

.facts-counter-description-img {
display: block;
font-size: 25px;
text-align: center;
color: #fff;
margin: 15px 0 15px 0;
}

@media only screen and (max-width: 880px) {
  .facts-counter-description-img {
    font-size: 20px;
	margin: 10px 0 10px 0;
  }
}

.facts-counter-description-img.large {
font-size: 35px;
}

@media only screen and (max-width: 880px) {
  .facts-counter-description-img.large {
    font-size: 20px;
	margin: 10px 0 10px 0;
  }
}

.facts-counter-title {
font-size: 13px;
letter-spacing: 0.05em;
}

@media only screen and (max-width: 880px) {
  .facts-counter-title {
    font-size: 14px;
  }
}

.facts-counter-title.large {
font-size: 14px;
  }

@media only screen and (max-width: 880px) {
.facts-counter-title.large {
font-size: 14px;
}
}


/* 34. news MORE carousel items */
/* 34.1. news panel left */
.panel-left-1,
.panel-left-2,
.panel-left-3,
.panel-left-4 {
position: absolute;
width: 50%;
height: 100vh;
overflow: hidden;
top: 0;
left: -100%;
background: #111;
-webkit-transition: all .8s ease-out;
   -moz-transition: all .8s ease-out;
        transition: all .8s ease-out;
        transition: all .8s ease-out;
  opacity: 1;
z-index: 99;
}

@media only screen and (max-width: 640px) {
  .panel-left-1,
  .panel-left-2,
  .panel-left-3,
  .panel-left-4 {
    display: none;
	visibility: hidden;
  }
}

.panel-left-1.open,
.panel-left-2.open,
.panel-left-3.open,
.panel-left-4.open {
left: 0;
}

.panel-left-1.close,
.panel-left-2.close,
.panel-left-3.close,
.panel-left-4.close {
left: -100%;
-webkit-transition: all 1s ease-out;
   -moz-transition: all 1s ease-out;
        transition: all 1s ease-out;
        transition: all 1s ease-out;
        opacity: 0.7;
   -moz-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
}


/* 34.1.1. news panel left bg */
.panel-left-bg-1,
.panel-left-bg-2,
.panel-left-bg-3,
.panel-left-bg-4 {
position: absolute;
height: 100%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

/* Panel background images */
.panel-left-bg-1 {
background-image: url(../../img/news/news-page-img-carousel-item-1.webp);
}

.panel-left-bg-2 {
background-image: url(../../img/news/news-page-img-carousel-item-2.webp);
}

.panel-left-bg-3 {
background-image: url(../../img/news/news-page-img-carousel-item-3.webp);
}

.panel-left-bg-4 {
background-image: url(../../img/news/news-page-img-carousel-item-4.webp);
}

.toggle-news-content-1,
.toggle-news-content-2,
.toggle-news-content-3,
.toggle-news-content-4 {
cursor: pointer;
position: relative;
z-index: 100;
pointer-events: auto;
}

.toggle-news-content-1 span,
.toggle-news-content-2 span,
.toggle-news-content-3 span,
.toggle-news-content-4 span {
position: relative;
z-index: 101;
pointer-events: auto;
}


/* 34.2. news panel right */
.panel-right {
position: absolute;
width: 50%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
top: 0;
right: -100%;
background: #fff;
-webkit-transition: all .8s ease-out;
   -moz-transition: all .8s ease-out;
        transition: all .8s ease-out;
  opacity: 1;
z-index: 99;
}

@media only screen and (max-width: 640px) {
  .panel-right {
    width: 100%;
  }
}

.panel-right.open {
right: 0;
}

.panel-right.close {
right: -100%;
-webkit-transition: all 1s ease-out;
   -moz-transition: all 1s ease-out;
        transition: all 1s ease-out;
   -moz-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
}


/* ============================================================================ */
/* WEBSITE LOGO - Independent rules for website state only (body.is-loaded) */
/* Desktop: 150px × 150px | Mobile: 100px × 100px */
/* ============================================================================ */

/* 35. logo - Website logo (excludes preloader state) */
body.is-loaded .logo,
body.is-loaded .logo.logo-light {
position: fixed; /* Fixed positioning to avoid interfering with fullPage.js */
display: block; /* Changed from inline-block to prevent baseline spacing */
top: 10px; /* Desktop positioning */
right: 10px; /* RTL: Right side for Arabic */
left: auto; /* RTL: Reset left */
width: 150px; /* Logo width - square */
height: 150px; /* Logo height - square */
line-height: 0; /* Eliminate baseline spacing */
margin: 0; /* No margins */
padding: 0; /* No padding */
font-size: 0; /* Eliminate text baseline spacing */
box-sizing: border-box; /* Include borders in dimensions if any */
  opacity: 1;
-webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
cursor: pointer;
z-index: 99999;
}

/* Website logo - Mobile: 100px × 100px */
@media only screen and (max-width: 1024px) {
  body.is-loaded .logo,
  body.is-loaded .logo .logo-img,
  body.is-loaded .logo .logo-img-dark,
  body.is-loaded .logo .logo-img:before,
  body.is-loaded .logo .logo-img-dark:before {
    width: 100px;
    height: 100px;
  }
}

/* Custom Language Dropdown - ENG/AR */
/* Note: Desktop positioning handled by arabic-rtl.css for Arabic */
.custom-sel {
  margin: 0;
  display: inline-block;
  position: absolute; /* Scrolls with page content */
  top: 88px; /* Adjusted to align with lifted logo */
  /* Note: left/right positioning handled by arabic-rtl.css for Arabic desktop */
  z-index: 99999;
  font-family: 'Raleway', Arial, sans-serif;
}

.custom-sel a {
  text-decoration: none;
  text-transform: uppercase;
  margin: 0;
  padding: 10px;
  text-align: left;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transform: none;
}

.custom-sel a:hover {
  text-decoration: none;
  background: transparent;
  color: #fff;
}

.custom-sel a.selected {
  background: transparent;
}

.custom-sel a.selected:hover {
  background: transparent;
  color: #fff;
}

.custom-sel a.hidden {
  display: none !important;
}

.custom-sel.show-sel a.hidden {
  display: block !important;
}

/* Mobile: Language dropdown opens downward (vertical) */
@media only screen and (max-width: 1024px) {
  .custom-sel {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* When dropdown is open, expand to show items vertically */
  .custom-sel.show-sel {
    flex-direction: column !important; /* Stack items vertically */
    width: auto !important; /* Allow expansion beyond button size */
    min-width: 35px !important; /* Maintain minimum button width */
    height: auto !important; /* Allow expansion for multiple items */
    min-height: 25px !important; /* Maintain minimum button height */
    align-items: stretch !important; /* Stretch items to full width */
  }
  
  /* Stack dropdown items vertically when open */
  .custom-sel.show-sel a {
    display: block !important; /* Stack items vertically */
    width: 100% !important; /* Full width of container */
  }
}

.lightblue {
  color: #fff;
  margin-left: -4px;
}

.custom-sel.show-sel {
  background: transparent;
  box-shadow: none;
}

/* ============================================================================ */
/* HUD COLORING - Services Container Dark Logo Section */
/* ============================================================================ */
/* HUD turns black only when services-container dark-logo is visible */
body.white-background .custom-sel a {
  color: #000 !important;
}

body.white-background .custom-sel a .lightblue {
  color: #000 !important;
}

body.white-background .main-menu:before,
body.white-background .main-menu:after,
body.white-background .main-menu span:before,
body.white-background .main-menu span:after {
  background: #000 !important;
}

/* Logo dark only on services-container dark-logo sections */
.services-container.dark-logo .logo-img:before {
  background-image: url(../img/logo-dark.png) !important;
}

/* ============================================================================ */
/* MOBILE HUD REWORK: Logo Container = Logo Size Exactly (No Phantom Padding) */
/* ============================================================================ */
/* Website logo - Mobile breakpoint positioning and styling */
@media only screen and (max-width: 1024px) {
  body.is-loaded .logo {
    position: fixed !important;
    top: max(5px, env(safe-area-inset-top, 0px) + 5px) !important;
    right: max(5px, env(safe-area-inset-right, 0px) + 5px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 99999 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100px !important;
    height: 100px !important;
  }
  
  body.is-loaded .logo .logo-img,
  body.is-loaded .logo .logo-img-dark {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100px !important;
    height: 100px !important;
  }
  
  body.is-loaded .logo .logo-img:before,
  body.is-loaded .logo .logo-img-dark:before {
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100px !important;
    height: 100px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* Website logo images - Desktop base (150px × 150px) */
body.is-loaded .logo-img,
body.is-loaded .logo-img-dark {
z-index: 99999;
position: relative;
display: block !important;
width: 150px;
height: 150px;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 0;
font-size: 0;
opacity: 1;
visibility: visible;
}

body.is-loaded .logo-img:before,
body.is-loaded .logo-img-dark:before {
content: "";
display: block !important;
width: 150px;
height: 150px;
line-height: 0;
margin: 0;
padding: 0;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 99999;
opacity: 1;
visibility: visible;
-webkit-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
   -moz-transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
        transition: color 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

body.is-loaded .logo-img:before {
background-image: url(../img/logo-light.png);
}

body.is-loaded .logo-img-dark:before {
background-image: url(../img/logo-dark.png);
}


/* 36. navigation brackets */
.brackets a::before,
.brackets a::after {
display: inline-block;
  opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
   -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    -ms-transition: -ms-transform 0.3s, opacity 0.2s;
     -o-transition: -o-transform 0.3s, opacity 0.2s;
        transition: transform 0.3s, opacity 0.2s;
}

.brackets a::before {
content: '\00b7';
margin-right: 10px;
-webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
     -o-transform: translateX(20px);
        transform: translateX(20px);
}

.brackets a::after {
content: '\00b7';
margin-left: 10px;
-webkit-transform: translateX(-20px);
   -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
     -o-transform: translateX(-20px);
        transform: translateX(-20px);
}

.brackets a:hover::before,
.brackets a:hover::after,
.brackets a:focus::before,
.brackets a:focus::after {
  opacity: 1;
-webkit-transform: translateX(0px);	
   -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
     -o-transform: translateX(0px);
        transform: translateX(0px);
}

.brackets ul, li {
list-style: none;
}

.brackets a {
text-decoration: none;
}

.brackets a:hover {
text-decoration: none;
}

.brackets a:visited {
text-decoration: none;
}


/* 37. navigation */
nav.navigation-menu {
position: fixed;
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
top: 25px;
left: 25px;
bottom: 25px;
right: 25px;
text-align: center;
visibility: hidden;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
  opacity: 0;
-webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
     -o-transform: scale(0.75);
        transform: scale(0.75);
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
        transition: all 1s ease;
        transition: all 1s ease;
z-index: 1001;
}

@media only screen and (max-width: 880px) {
  nav.navigation-menu {
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
  }
}

@media only screen and (max-width: 640px) {
  nav.navigation-menu {
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
  }
}

nav.navigation-menu.show {
width: -webkit-calc(100% - 50px);
width: -moz-calc(100% - 50px);
width: calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
top: 25px;
left: 25px;
bottom: 25px;
right: 25px;
background: #000;
visibility: visible;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
        opacity: 0.95;
   -moz-opacity: 0.95;
-webkit-opacity: 0.95;
filter: alpha(opacity=95);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
-webkit-transform: scale(1);
   -moz-transform: scale(1);
        transform: scale(1);
-webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
        transition: all 1s ease;
        transition: all 1s ease;
}

@media only screen and (max-width: 880px) {
  nav.navigation-menu.show {
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height: calc(100% - 30px);
    top: 15px;
    left: 15px;
    bottom: 15px;
    right: 15px;
  }
}

@media only screen and (max-width: 640px) {
  nav.navigation-menu.show {
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    width: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
  }
}

nav.navigation-menu a {
text-decoration: none;
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

nav.navigation-menu a:hover {
-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

nav.navigation-menu a:link,
nav.navigation-menu a:visited,
nav.navigation-menu a:active {
color: #fff;
}

nav.navigation-menu li a.active {
color: #777;
}

nav.navigation-menu li {
margin: 0 0 18px 0; /* Ideal spacing between menu items */
}

nav.navigation-menu li.last {
margin: 0;
}

nav.navigation-menu a {
font-family: 'Poppins', sans-serif;
font-size: 26px; /* Enlarged from 20px for desktop */
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1;
letter-spacing: 0.05em;
text-decoration: none;
}

@media only screen and (max-width: 880px) {
  nav.navigation-menu a {
    font-size: 17px;
  }
}

@media only screen and (max-width: 640px) {
  nav.navigation-menu a {
    font-size: 15px;
  }
}


/* 37.1. main menu */
/* Note: Desktop positioning handled by arabic-rtl.css for Arabic */
.main-menu {
position: absolute; /* Scrolls with page content */
width: 35px;
height: 25px;
top: 88px; /* Adjusted to align with lifted logo */
/* Note: left/right positioning handled by arabic-rtl.css for Arabic desktop */
cursor: pointer;
z-index: 99998;
}

.main-menu:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
  opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.4s  0.4s, opacity 0.4s  0.4s;
   -moz-transition: -moz-transform 0.4s  0.4s, opacity 0.4s  0.4s;
    -ms-transition: -ms-transform 0.4s  0.4s, opacity 0.4s  0.4s;
     -o-transition: -o-transform 0.4s  0.4s, opacity 0.4s  0.4s;
        transition: transform 0.4s  0.4s, opacity 0.4s  0.4s;
}

.main-menu:after {
content: "";
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
  opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.4s  0.4s, opacity 0.4s  0.4s;
   -moz-transition: -moz-transform 0.4s  0.4s, opacity 0.4s  0.4s;
    -ms-transition: -ms-transform 0.4s  0.4s, opacity 0.4s  0.4s;
     -o-transition: -o-transform 0.4s  0.4s, opacity 0.4s  0.4s;
        transition: transform 0.4s  0.4s, opacity 0.4s  0.4s;
}

.main-menu span {
position: relative;
display: block;
width: 100%;
height: 3px;
-webkit-transform: translate3d(0, 11px, 0);
   -moz-transform: translate3d(0, 11px, 0);
    -ms-transform: translate3d(0, 11px, 0);
     -o-transform: translate3d(0, 11px, 0);
        transform: translate3d(0, 11px, 0);
}

.main-menu span:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
-webkit-transform: rotate(0);
   -moz-transform: rotate(0);
    -ms-transform: rotate(0);
     -o-transform: rotate(0);
        transform: rotate(0);
-webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
    -ms-transition: -ms-transform 0.4s;
     -o-transition: -o-transform 0.4s;
        transition: transform 0.4s;
}

.main-menu span:after {
content: "";
position: absolute;
display: block;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
-webkit-transform: rotate(0);
   -moz-transform: rotate(0);
    -ms-transform: rotate(0);
     -o-transform: rotate(0);
        transform: rotate(0);
-webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
    -ms-transition: -ms-transform 0.4s;
     -o-transition: -o-transform 0.4s;
        transition: transform 0.4s;
}

.main-menu.main-menu-light:before,
.main-menu.main-menu-light:after,
.main-menu.main-menu-light span:before,
.main-menu.main-menu-light span:after {
background: #fff;
}

.main-menu.main-menu-dark:before,
.main-menu.main-menu-dark:after,
.main-menu.main-menu-dark span:before,
.main-menu.main-menu-dark span:after {
background: #444;
}

.main-menu.active:before {
  opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
   -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
     -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
-webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
        transition: all 0.4s;
        transition: all 0.4s;
}

.main-menu.active:after {
  opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
   -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
     -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
-webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
        transition: all 0.4s;
        transition: all 0.4s;
}

.main-menu.active span:after {
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
-webkit-transition: -webkit-transform 0.4s 0.4s;
   -moz-transition: -moz-transform 0.4s 0.4s;
    -ms-transition: -ms-transform 0.4s 0.4s;
     -o-transition: -o-transform 0.4s 0.4s;
        transition: transform 0.4s 0.4s;
}

.main-menu.active span:before {
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
-webkit-transition: -webkit-transform 0.4s 0.4s;
   -moz-transition: -moz-transform 0.4s 0.4s;
    -ms-transition: -ms-transform 0.4s 0.4s;
     -o-transition: -o-transform 0.4s 0.4s;
        transition: transform 0.4s 0.4s;
}



/* 40. swiper timeline */
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
display: block;
visibility: visible;
}

.timeline-container a,
.timeline-container a:hover {
color: #fff;
}

.timeline-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;  			
        box-pack: center;
-webkit-justify-content: center;
        justify-content: center;
-webkit-box-align: center;
   -ms-flex-align: center;
      align-items: center;
-webkit-box-orient: vertical;
        box-orient: vertical;
-webkit-box-direction: normal;
   -ms-flex-direction: column;
       flex-direction: column;
height: 100%;
background-color: #000;
}

.timeline {
width: 100%;
background-color: #000;
}

.timeline .swiper-container {
position: relative;
width: 100%;
height: 100vh;
}

.timeline .swiper-wrapper {
-webkit-transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
   -moz-transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
    -ms-transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
     -o-transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
        transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}

.timeline .swiper-slide {
position: relative;
color: #fff;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
   -moz-background-size: cover;
    -ms-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

.timeline .swiper-slide::after {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: -moz-linear-gradient(right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 50%);
background: -webkit-linear-gradient(right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 50%);
background: linear-gradient(to left, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
z-index: 1;
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-slide::after {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 75%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 75%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .1) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
  }
  
  /* SECTION 0 MOBILE FIX: Centered text container, responsive width, no HUD overlap */
  .timeline .swiper-slide-content {
    position: absolute !important; /* Override desktop absolute positioning */
    max-width: calc(90vw - (max(8px, env(safe-area-inset-right, 0px) + 8px) + max(8px, env(safe-area-inset-left, 0px) + 8px))) !important; /* Responsive width, avoids HUD */
    width: 100% !important;
    top: 50% !important; /* Vertical center start */
    margin-top: 0 !important; /* No extra offset */
    left: auto !important; /* Reset AR desktop left positioning */
    right: auto !important; /* Reset desktop right positioning */
    left: 50% !important; /* Horizontal center start */
    margin-left: 0 !important; /* No extra offset */
    text-align: center !important; /* Centered text */
    -webkit-transform: translate(-50%, -50%) !important; /* Perfect center using transform */
       -moz-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
         -o-transform: translate(-50%, -50%) !important;
            transform: translate(-50%, -50%) !important;
    padding: 30px 20px !important; /* Responsive padding, extra side padding for small screens */
    line-height: 1.5 !important; /* Original desktop line-height */
    z-index: 2 !important; /* Above media, below HUD (99999) */
    box-sizing: border-box !important;
  }
}

.timeline .swiper-slide-content {
position: absolute;
width: 400px;
top: 50%;
right: 23%;
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 1.5;
font-style: normal;
font-weight: 400;
text-align: right;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.2);
padding: 30px;
border-radius: 8px;
backdrop-filter: blur(5px);
 -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
-webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
        transform: translateY(-50%);
z-index: 2;
}

.timeline .swiper-slide .timeline-year {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 20px; /* Enlarged from 16px for desktop */
line-height: 1;
font-style: normal;
text-transform: uppercase;
font-weight: 400;
letter-spacing: normal;
color: #fff;
margin: 0 0 15px 0;
-webkit-transform: translate3d(20px, 0, 0);
   -moz-transform: translate3d(20px, 0, 0);
    -ms-transform: translate3d(20px, 0, 0);
     -o-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
-webkit-transition: .2s ease .4s;
   -moz-transition: .2s ease .4s;
    -ms-transition: .2s ease .4s;
     -o-transition: .2s ease .4s;
        transition: .2s ease .4s;	
  opacity: 0;
}

@media only screen and (max-width: 880px) {
  .timeline .swiper-slide .timeline-year {
	font-size: 16px; /* Increased from 14px for better mobile readability */
  }
}

.timeline .swiper-slide .timeline-title {
font-family: 'Poppins', sans-serif;
font-size: 40px; /* Enlarged from 32px for desktop */
line-height: 1.2;
font-style: normal;
text-transform: uppercase;
font-weight: 700;
letter-spacing: -0.05em;
color: #fff;
margin: 0 0 20px 0;
-webkit-transform: translate3d(20px, 0, 0);
   -moz-transform: translate3d(20px, 0, 0);
    -ms-transform: translate3d(20px, 0, 0);
     -o-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
-webkit-transition: .2s ease .5s;
   -moz-transition: .2s ease .5s;
    -ms-transition: .2s ease .5s;
     -o-transition: .2s ease .5s;
        transition: .2s ease .5s;
  opacity: 0;
}

@media only screen and (max-width: 880px) {
  .timeline .swiper-slide .timeline-title {
	font-size: 32px; /* Increased from 28px for better readability */
	margin: 0 0 15px 0;
  }
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-slide .timeline-title {
	font-size: 28px; /* Increased from 24px for better readability */
	margin: 0 0 15px 0;
  }
}

.timeline .swiper-slide .timeline-text {
color: #fff;
font-size: 16px; /* Enlarged from 13px for desktop */
line-height: 1.6;
-webkit-transform: translate3d(20px, 0, 0);
   -moz-transform: translate3d(20px, 0, 0);
    -ms-transform: translate3d(20px, 0, 0);
     -o-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
-webkit-transition: .2s ease .6s;
   -moz-transition: .2s ease .6s;
    -ms-transition: .2s ease .6s;
     -o-transition: .2s ease .6s;
        transition: .2s ease .6s;
  opacity: 0;
}

.timeline .swiper-slide-active .timeline-year { 
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
-webkit-transition: .4s ease 1.6s;
   -moz-transition: .4s ease 1.6s;
    -ms-transition: .4s ease 1.6s;
     -o-transition: .4s ease 1.6s;
        transition: .4s ease 1.6s;
  opacity: 1;
color: #fff;
}

.timeline .swiper-slide-active .timeline-title {
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
-webkit-transition: .4s ease 1.7s;
   -moz-transition: .4s ease 1.7s;
    -ms-transition: .4s ease 1.7s;
     -o-transition: .4s ease 1.7s;
        transition: .4s ease 1.7s;
  opacity: 1;
color: #fff;
}

.timeline .swiper-slide-active .timeline-text {
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
-webkit-transition: .4s ease 1.8s;
   -moz-transition: .4s ease 1.8s;
    -ms-transition: .4s ease 1.8s;
     -o-transition: .4s ease 1.8s;
        transition: .4s ease 1.8s;
  opacity: 1;
color: #fff;
}

/* Override plugins.css with higher specificity */
.timeline .swiper-container .swiper-pagination,
.timeline .swiper-pagination {
font-family: 'Poppins', sans-serif;
font-size: 15px;
line-height: normal;
font-style: italic;
text-transform: uppercase;
font-weight: 400;
letter-spacing: normal;
color: #fff;
text-shadow: 1px 1px 2px #111;
display: flex !important;
height: 100% !important;
right: 15% !important;
margin-right: 5px;
flex-direction: column;
justify-content: center !important;
align-items: center;
z-index: 1;
/* Override plugins.css transform */
top: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-pagination {
    display: none;
	visibility: hidden;
  }
}

.timeline .swiper-container .swiper-pagination::before,
.timeline .swiper-pagination::before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: -30px !important;
background-color: rgba(255, 255, 255, .4);
}

.timeline .swiper-container .swiper-pagination-bullet,
.timeline .swiper-pagination-bullet {
position: relative !important;
width: auto !important;
height: auto !important;
text-align: center !important;
background: transparent !important;
color: #fff !important;
margin: 15px 0 !important;
/* Override plugins.css default styles */
border-radius: 0 !important;
}

.timeline .swiper-container .swiper-pagination-bullet::before,
.timeline .swiper-pagination-bullet::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
top: 8px;
left: -31px !important;
background-color: #fff;
border-radius: 0;
transform: scale(0);
transition: .2s;
}

.timeline .swiper-container .swiper-pagination-bullet-active,
.timeline .swiper-pagination-bullet-active {
color: #fff !important;
background: transparent !important;
}

.timeline .swiper-container .swiper-pagination-bullet-active::before,
.timeline .swiper-pagination-bullet-active::before {
transform: scale(1) !important;
}

.timeline .swiper-button-next,
.timeline .swiper-button-prev {
width: 20px;
height: 20px;
background-size: 20px 20px;
top: 15%;
margin-top: 0; 
-webkit-transition: .2s;
   -moz-transition: .2s;
    -ms-transition: .2s;
     -o-transition: .2s;
        transition: .2s;
z-index: 2;
}

.timeline .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.timeline .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.timeline .swiper-button-prev {
top: 15%;
left: auto;
right: 15%;
-webkit-transform: rotate(90deg) translate(0, 10px);
   -moz-transform: rotate(90deg) translate(0, 10px);
    -ms-transform: rotate(90deg) translate(0, 10px);
     -o-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-button-prev {
	top: 50%;
	left: 6px;
	-webkit-transform: rotate(0deg) translate(0);
       -moz-transform: rotate(0deg) translate(0);
        -ms-transform: rotate(0deg) translate(0);
         -o-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0);
  }
}

.timeline .swiper-button-prev:hover {
-webkit-transform: rotate(90deg) translate(-3px, 10px);
   -moz-transform: rotate(90deg) translate(-3px, 10px);
    -ms-transform: rotate(90deg) translate(-3px, 10px);
     -o-transform: rotate(90deg) translate(-3px, 10px);
        transform: rotate(90deg) translate(-3px, 10px);
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-button-prev:hover {
    -webkit-transform: translateX(-3px);
       -moz-transform: translateX(-3px);
        -ms-transform: translateX(-3px);
         -o-transform: translateX(-3px);
            transform: translateX(-3px);
  }
}

.timeline .swiper-button-next {
top: auto;
bottom: 15%;
right: 15%;
-webkit-transform: rotate(90deg) translate(0, 10px);
   -moz-transform: rotate(90deg) translate(0, 10px);
    -ms-transform: rotate(90deg) translate(0, 10px);
     -o-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-button-next {
	top: 50%;
	right: 6px;
	-webkit-transform: rotate(0deg) translate(0);
       -moz-transform: rotate(0deg) translate(0);
        -ms-transform: rotate(0deg) translate(0);
         -o-transform: rotate(0deg) translate(0);
            transform: rotate(0deg) translate(0);
  }
}

.timeline .swiper-button-next:hover {
-webkit-transform: rotate(90deg) translate(3px, 10px);
   -moz-transform: rotate(90deg) translate(3px, 10px);
    -ms-transform: rotate(90deg) translate(3px, 10px);
     -o-transform: rotate(90deg) translate(3px, 10px);
        transform: rotate(90deg) translate(3px, 10px);
}

@media only screen and (max-width: 768px) {
  .timeline .swiper-button-next:hover {
    -webkit-transform: translateX(3px);
       -moz-transform: translateX(3px);
        -ms-transform: translateX(3px);
         -o-transform: translateX(3px);
            transform: translateX(3px);
  }
}

/* Hide ALL navigation arrows and pagination on mobile/tablet */
@media only screen and (max-width: 880px) {
  /* Swiper arrows and pagination */
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination,
  .swiper-pagination-bullet,
  .swiper-pagination-bullet-active,
  .timeline .swiper-button-next,
  .timeline .swiper-button-prev,
  .timeline .swiper-pagination,
  .timeline .swiper-container .swiper-pagination,
  .timeline .swiper-pagination-bullet,
  .timeline .swiper-pagination-bullet-active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Slick arrows */
  .slick-prev,
  .slick-next,
  .slick-arrow,
  .slick-dots {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Owl arrows and dots */
  .owl-nav,
  .owl-prev,
  .owl-next,
  .owl-dots,
  .owl-dot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}


/* MOBILE: Hide Section 1 (Almutawir) right column image - Consolidated to ≤880px */
@media only screen and (max-width: 880px) {
  #section1 .col-md-6.nopadding:last-child,
  #section1 .slick-right-almutawir {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Make text column full width on mobile */
  #section1 .col-md-6.nopadding:first-child {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}



/* Mobile Responsiveness - Hide menu elements on mobile (NOT accordion) */
@media only screen and (max-width: 640px) {
  /* Hide social icons wrapper on mobile */
  .social-icons-wrapper {
    display: none !important;
    visibility: hidden !important;
  }
  
  .social-icons-wrapper ul {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* IMPORTANT: Do NOT hide .brackets, .center-block-menu, .center-container-menu 
     when they are inside nav.navigation-menu - the menu needs these to display content! */
}

/* Menu State Styling - Clean, no boxes */
.menu-state {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.menu-state:hover {
    color: #fff;
    opacity: 0.7;
}

.menu-state.active {
    color: #777;
}

/* Remove brackets pseudo-elements for cleaner look */
.brackets .menu-state::before,
.brackets .menu-state::after {
    display: none;
}

/* Responsive adjustments for menu-state */
@media only screen and (max-width: 880px) {
  .menu-state {
    font-size: 20px;
  }
}

@media only screen and (max-width: 640px) {
  .menu-state {
    font-size: 18px;
  }
}

/* Hide fullPage.js navigation dots completely */
#fp-nav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Accessibility: Visually hidden but screen-reader accessible */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}