/*
  [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;
}


/* 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. YouTube video */

.ytplayer-shield {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}

.ytplayer-player {
position: absolute;
}


/* 11. HTML5 video */
#video-bg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
z-index: 0;
}


/* 12. Vimeo video */
#vimeo-video {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
border: none;
}

#vimeo-video iframe,
#vimeo-video object,
#vimeo-video embed {
border: none;
}


/* 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;
}
[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 0 0 30px;
  border-left: 1px solid #555;
}
[data-anchor="leasing"] .leasing-form { padding-right: 30px; }
[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;
  }
}

/* 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);
        transform: scale(0, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: 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;
        transform-origin: left center;
-webkit-transform: scale(1, 1);
   -moz-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);
        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);
        transform: scale(0, 1);
-webkit-transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   -moz-transition: 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;
        transform-origin: left center;
-webkit-transform: scale(1, 1);
   -moz-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-wrapper {
max-height: none; /* Remove height limit - let content expand */
padding: 0 200px;
direction: ltr;
text-align: left;
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;
    direction: ltr;
    text-align: left;
  }  
}

@media only screen and (max-width: 880px) {
  .services-wrapper {
    padding: 0 20px;
    direction: ltr;
    text-align: left;
  }
  
  #section4 .services-accordion ul li span {
    padding: 16px 0;
    text-align: left;
    cursor: pointer;
    font-size: 22px;
  }
  
  #section4 .services-accordion ul li span:after {
    right: 16px;
    top: 18px;
  }
  
  #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;
    direction: ltr;
    text-align: left;
  }
  
  #section4 .services-accordion ul li span {
    font-size: 20px;
  }
}



/* 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: 24px;
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: 14px;
text-decoration: none;
margin-bottom: 5px;
width: auto;
line-height: 1.25;
}

.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;
  }
}

@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;
  left: 10px;
  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 & 2: Mobile container fixes */
  #section1 .about-content,
  #section2 .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,
  #section2 .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,
  #section2 .img-fullwidth-wrapper {
    overflow: hidden;
    background: transparent;
    width: 100%;
  }
  
  #section1 .img-fullwidth,
  #section2 .img-fullwidth {
    width: 100%;
    background-size: cover;
    background-position: center;
  }
  
  /* Slick containers */
  #section1 .slick-left-almutawir,
  #section2 .slick-left-about,
  #section2 .slick-right-about {
    overflow: hidden;
    width: 100%;
  }
  
  #section1 .slick-list,
  #section1 .slick-track,
  #section2 .slick-list,
  #section2 .slick-track {
    overflow: hidden;
  }
  
  #section2 .slick-slide {
    height: 100vh;
  }
  
  /* Height correction container */
  #section1 .height-correction,
  #section2 .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,
  #section2 .text-title {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #section1 .text-title h4,
  #section2 .text-title h4 {
    text-align: center;
    padding: 0 0 15px 0;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  
  #section1 .text-txt,
  #section2 .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,
  #section2 .text-txt p {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  
  #section1 .text-spacer,
  #section2 .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,
  #section2 .text-spacer .c-btn.inverse {
    width: auto;
    margin: 0 auto;
  }
  
  /* Column containers */
  #section1 .col-md-6.nopadding:first-child,
  #section2 .col-md-6.nopadding:first-child {
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Desktop: Section 1 & 2 spacing adjustments */
@media only screen and (min-width: 881px) {
  #section1 .text-title h4,
  #section2 .text-title h4 {
    padding: 0 0 30px 0;
  }
  
  #section1 .text-txt,
  #section2 .text-txt {
    padding: 0 0 25px 0;
  }
  
  #section1 .text-spacer,
  #section2 .text-spacer {
    padding: 10px 0 0 0;
  }
}

.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%;
}

@media only screen and (max-width: 880px) {
  .text-title h4 {
    font-size: 28px;
    text-align: center;
    padding: 0 0 15px 0;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 640px) {
  .text-title h4 {
    font-size: 24px;
  }
}

@media only screen and (max-width: 480px) {
  .text-title h4 {
    font-size: 22px;
  }
}

.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;
}


/* 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;
  }
}

@media only screen and (max-width: 640px) {
  .text-txt p {
    font-size: 15px;
    line-height: 1.6;
  }
}

@media only screen and (max-width: 480px) {
  .text-txt p {
    font-size: 14px;
    line-height: 1.65;
  }
}

.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;
}

/* Mobile: Remove desktop absolute positioning offsets */
@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,
  .text-spacer .c-btn.inverse {
    margin: 0 auto;
    width: 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%;
}

.split-border span:after {
width: 25%;
}

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

.split-border span:after {
margin-left: 20px;
}	
	
	
/* 26. fullPage section */

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

.section {
overflow: hidden;
}

/* Mobile sections need different overflow handling */

.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;
}


.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: 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: 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: 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;
}


.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: 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;
}

.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: 14px;
line-height: 1.5;
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: 13px;
	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: 14px;
line-height: 1.5;
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: 14px;
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;
}


.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: 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: 14px;
line-height: 1.5;
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: 13px;
	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: 14px;
line-height: 1.5;
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) {
  #section2 .about-content-inner .show-skillbar {
    padding: 0;
    margin: 49px 0 0 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 640px) {
  .show-skillbar {
    margin: 49px 0 0 0;
  }
  
  #section2 .about-content-inner .show-skillbar {
    padding: 0;
    margin: 49px 0 0 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.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: 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: 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;
}


/* 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;
        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;
        transition: all 1s ease-out;
  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 */
left: 10px; /* Desktop positioning */
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 */
.custom-sel {
  margin: 0;
  display: inline-block;
  position: fixed; /* Fixed to match logo positioning */
  top: 88px; /* Aligned with logo */
  right: calc(50px + 40px);
  z-index: 99999;
  font-family: 'Raleway', Arial, sans-serif;
}

/* Mobile override for custom-sel - ensure it scrolls with page */
/* REMOVED: Position reset - owned by header-controls-container.css at ≤1024px */

.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-color: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.custom-sel a:hover,
.custom-sel a.selected,
.custom-sel a.selected:hover {
  background-color: transparent;
  text-decoration: none;
  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-color: 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;
    left: max(5px, env(safe-area-inset-left, 0px) + 5px) !important;
    right: 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);
        transform: scale(0.75);
-webkit-transition: all 1s ease;
   -moz-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;
-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;
}

@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 */
.main-menu {
position: absolute; /* Scrolls with page content */
width: 35px;
height: 25px;
top: 88px; /* Adjusted to align with lifted logo */
right: 50px;
cursor: pointer;
z-index: 99998;
}

/* Mobile override for main-menu - ensure it scrolls with page */
/* REMOVED: Position reset - owned by header-controls-container.css at ≤1024px */

/* REMOVED: Hamburger uses same positioning across all screen sizes (desktop: right: 50px, top: 98px) */

.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);
  }
}

.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;
}

/* SECTION 0 MOBILE FIX: Centered text container, responsive width, no HUD overlap */
/* Applied consistently at all mobile breakpoints: 375/430/600/768 */
@media only screen and (max-width: 768px) {
  .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 */
    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 .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;
}

/* REMOVED: Duplicate - pagination already hidden at ≤880px (scaffold-only owner) */

.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;
    visibility: hidden;
  }
}



/* 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: 20px;
    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: 17px;
  }
}

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

/* 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;
}