/*
Theme Name: mano off
Theme URI: #
Tags: portfolio, blog, photography, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready
Author: Mohammed RAJI 
Author URI: #
Description: Nanogam is a modern, clean, and responsive WordPress theme designed for creative professionals. It features a sleek design, customizable options, and full support for the block editor, making it perfect for showcasing portfolios, blogs, and photography. The theme is fully compatible with the latest WordPress features and provides an intuitive user experience.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: nanogam
This theme, like WordPress, is licensed under the GPL.
*/

/*@import url('assets/fonts/montserrat-webfont/style.css');*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --vermilion: #FF3C38;
  --bottom: 60px;

  /* Light Theme Colors */
  --bg-color: #ffffff;
  --text-color: #000000;
  --secondary-text: #666666;
  --border-color: #000000;
  --card-bg: #f8f8f8;
  --meta-bg: #f5f5f5;
  --menu-bg: #ffffff;
  --bg-rgb: rgba(255, 255, 255, 0.8);

  /* Glass Tokens - Light */
  --glass-bg: rgba(0, 0, 0, 0.05);
  --glass-text: #000000;
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.05);
  --glass-hover-bg: rgba(0, 0, 0, 0.1);
  --glass-shimmer: rgba(0, 0, 0, 0.1);
  --glass-inner-bg: rgba(255, 255, 255, 0.4);
}

html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

/* Global Language & Direction Support */
.rtl {
  direction: rtl;
  unicode-bidi: embed;
}

.ltr {
  direction: ltr;
  unicode-bidi: embed;
}


@font-face {
  font-family: 'Montserrat Arabic';
  src: url('assets/fonts/Montserrat-Arabic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Arabic';
  /* يجب أن يكون نفس الاسم تماماً */
  src: url('assets/fonts/Montserrat-thin.otf') format('opentype');
  font-weight: 100;
  /* أو 700 */
  font-style: normal;
}



* {
  font-family: "Montserrat", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-image: url('assets/img/bg.webp');
  /* Optimized WebP */
  background-image: url('assets/img/bg.jpg');
  /* Fallback for older browsers */
  background-image: url('assets/img/bg.webp');
  /* Use WebP if supported */
  
 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
   background-position: left center ;
    background-size: calc(100vw - 200px);
    background-color: #fff;
}

body,
body span,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p {
  font-family: "Montserrat", sans-serif;
}

body.rtl,
body.rtl span,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl p,
body.rtl a {
  font-family: 'Montserrat Arabic';
}

/* يمكنك استخدام الوزن 100 للعناوين الكبيرة أو لمسات فنية محددة */
h1 {
  font-weight: 100;
}

p {
  margin: 0;
  padding: 0;
}

/* services section */

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

a[href^="tel:"]{
    direction: ltr !important;
    unicode-bidi: isolate !important;
    display: inline-block;
}

.services {
  margin: auto;
  position: relative;
  z-index: 1;
}

.services h2 {
  font-size: 20px;
  border-bottom: 1px solid #000;
  display: inline-block;
  padding-bottom: 3px;
  margin-bottom: 20px;
}

.services ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  position: relative;
}

/* نص العنصر */
.services li span {
  font-size: 18px;
  font-weight: 600;
  color: #120047;
  white-space: nowrap;
  flex-shrink: 0;
}

/* الخط */
.services li::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* النقطة الوردية */
.services li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-pink, #ffc0cb);
  box-shadow: 0 0 10px rgba(255, 192, 203, 0.6);
  flex-shrink: 0;
  order: 2;
  /* تأكد أن النقطة دائماً في النهاية */
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 192, 203, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 192, 203, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 192, 203, 0);
  }
}

/* زر */
/* iOS Redefined Glass Button */
.btn {
  position: relative;
  display: inline-block;
  padding: 16px 45px;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  color: var(--glass-text) !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px var(--glass-shadow);
  margin-top: 20px;
}

/* Subtle Shimmer/Light Rotation */
.btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent,
      var(--glass-shimmer),
      transparent 15%,
      transparent 50%,
      var(--glass-shimmer),
      transparent 65%);
  animation: rotateLight 5s linear infinite;
  z-index: -2;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--glass-inner-bg);
  border-radius: 11px;
  z-index: -1;
  transition: background 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--glass-hover-bg) !important;
  box-shadow: 0 15px 45px var(--glass-shadow);
}

@keyframes rotateLight {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}



/* أنيميشن النقط */
@keyframes pulse {
  0% {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }

  50% {
    transform: scale(1.3) translateY(-50%);
    opacity: 0.6;
  }

  100% {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }
}




/* footer */
/* ====== Footer Style ====== */
.site-footer {
  position: relative;
  background-color: #f9dfe2;
  /* الوردي الفاتح */
  color: #000;
  z-index: 2;
}

.footer-top {
  padding: 70px 40px;
  display: flex;
  justify-content: center;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  width: 100%;
}

.footer-column h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer-column p {
  font-size: 15px;
  line-height: 1.8;
}

/* ====== Social Icons ====== */
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.footer-social li a svg {
  width: 20px;
  height: 20px;
  fill: #000;
  transition: all 0.3s ease;
}

.footer-social li a:hover svg {
  fill: #ff0000;
  /* أحمر عند hover */
}

.footer-social a:hover {
  color: var(--vermilion)
}

/* ====== Logo + Slogan ====== */
.footer-bottom-bar {
  margin-bottom: 40px !important;
}

.footer-column p.footer-slogan {
  font-size: 50px;
  font-weight: 700;
  color: #ff0000;
  /* نص أحمر */
  margin: 0;
}

/* ====== Footer Bottom ====== */
.footer-bottom {
  border-top: 1px solid #ccc;
  padding: 15px 20px;
  background-color: #fff;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 12px;
  color: #444;
}

.top-bar-container {
  position: relative;
  background-color: #000;
  z-index: 2;
  padding: 25px 0;
}

.top-bar {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  margin: auto;
}

.top-bar p {
  font-size: 30px;
  text-align: center;
  width: 100%;
}

.top-bar .socials_container,
.top-bar .logo {
  display: none;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-bar .footer-logo img {
  width: 250px;
  object-fit: cover;
}

.social-icons svg {
  width: 50px;
  fill: blue;
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-column p.footer-slogan {
    font-size: 40px;
  }
}



/* footer */
.top-bar {
  max-width: 1200px;
}

.logo img {
  width: 125px;
  height: auto;
}


/* footer top */

.footer-column h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.footer-social {
  flex-direction: column;
}

.footer-widgets {
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.rtl .footer-widgets {
  direction: rtl;
}

.footer-widgets .footer-column:nth-child(1) {
  grid-column: span 2;
}

.footer-bottom-bar {
  max-width: 1200px;
  margin: auto;
}

.footer-bottom-bar .logo img {
  width: 180px;
  object-fit: cover;
}


.footer-bottom {

  background-color: #f9dfe2 !important;
  max-width: 1160px;
  margin: 0 auto;
}

.footer-bottom-bar .language img {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}



/* work slider */



.worksSwiper {
  width: 1200px;
  margin: auto;
  padding-top: 80px !important;
  /* space for arrows */
  padding-bottom: 40px !important;
}

.worksSwiper .swiper-wrapper {
  height: auto;
}


.worksSwiper .swiper-slide {
  position: relative;
  height: auto;

}


/* Title text */
.worksSwiper .slide-title {
  position: absolute;
  left: 15px;
  bottom: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  z-index: 2;
}


/* Arabic title style */
.section-title {
  font-size: 20px;
  font-weight: bold;
  /* margin-bottom: 10px; */
  max-width: 1200px;
  margin: auto;
  margin-bottom: 40px;
  /* Centered */
}

.ltr.section-title {
  text-align: right;
}

.section-title span {
  border-bottom: 1px solid #000;
  font-size: 25px;
}

.logo-slider {
  padding: 0 50px !important;
}

.logo-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
}

.logo-slider-wrapper.dual-sliders {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 25px;
}

.logo-slider-top .swiper-slide,
.logo-slider-bottom .swiper-slide {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto;
  /* Allow Swiper to calculate width based on slidesPerView */
}

.logo-slider-top,
.logo-slider-bottom {
  min-height: 120px;
  width: 100%;
}

.logo-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.logo-slider-top img,
.logo-slider-bottom img {
  max-height: 100px;
  max-width: 180px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.logo-slider-top img:hover,
.logo-slider-bottom img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.logo-slider-top img:hover,
.logo-slider-bottom img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-slider-wrapper .swiper-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  /* arrows under slider */
}

/* Example: arrows floating outside left/right */
.logo-slider-wrapper .swiper-button-prev,
.logo-slider-wrapper .swiper-button-next {
  position: absolute;
  cursor: pointer;
  display: block;
}

.logo-slider-wrapper .swiper-button-prev {
  left: 0px;
  /* outside left */
}

.logo-slider-wrapper .swiper-button-next {
  right: 0px;
  /* outside right */
  transform: rotate(180deg);
}


.hamburger {
  z-index: 1 !important;
  position: relative;
  width: 28px;
  height: 40px;
}

.single-works .hamburger {
  position: relative !important;
  left: auto !important;
}

.menu {
  cursor: pointer !important;
}

/* worksSwiperPage */
.mySwiperpage {
  width: 100% !important;
  max-width: 1200px;
  margin: 40px auto;
  height: auto !important;
  padding: 20px 0 60px;
}

.mySwiperpage .swiper-wrapper {
  align-items: center;
}

/* .mySwiperpage .swiper-slide-active {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
} */
.mySwiperpage .swiper-slide {
  height: auto !important;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.slide-image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 20px;
  background: #f4f4f4;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slide-title {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

.intro-section {
  position: relative;
  min-height: 100vh;
  z-index: 2;
  background: none;
  /* نحذف الخلفية من هنا */
}

/* .intro-section::before { */
.main.main--demo-6::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 200px);
  height: 100vh;
  background-image: url('assets/img/bg.webp');
  /* Optimized WebP */
  background-image: url('assets/img/bg.jpg');
  /* Fallback for older browsers */
  background-image: url('assets/img/bg.webp');
  /* Use WebP if supported */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  z-index: 0;
  opacity: 1;
}

@media screen and (max-width: 55em) {
  .main.main--demo-6::before {
    width: 100vw;
    /* Better for mobile scroll performance in some cases */
  }
  body{
            width: 100vw;
        background-size: cover;
    }
 
}

/* باقي السيكسيونات */
.home section {
  position: relative;
  z-index: 3;
  /* تأثير زجاجي نقي بدون لون داكن */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.intro-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  line-height: 2;
  color: #222;
}



.intro-content h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #000;
}

.intro-content p {
  font-size: 20px;
  margin-bottom: 15px;
}

.highlight {
  color: #ff0000;
  font-weight: bold;
  margin-top: 30px;
  display: block;
  text-align: center;
}

.logos {
  margin-top: 10px;
  display: block;
}

.logos img {
  height: 100px;
}


/* Old Contact Form Styles Removed to avoid conflict with new modern redesign */

/*  */
/* ====== Map Section ====== */
#map {
  width: 100%;
  height: 400px;
  margin: 0;
  border: none;
  filter: grayscale(100%);
}

.contact-info {
  max-width: 1200px;
  margin: auto;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 60px;
}

.contact-info .contact-item {
  text-align: center;
}


/* إعداد الصفحة العامة */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.main-bg-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

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

.main-bg-wrap .bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* تراكب خفيف لجعل النص واضحًا فوق الصورة إن وُجد */
.bg-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* قسم البداية (intro-section) */
.intro-section {
  position: relative;
  min-height: 100vh;
  background: white;
  padding: 120px 0;
  z-index: 1;
  display: flex;
  flex-direction: column;

  /*  opacity: 0.8;*/
}

/* محتوى النصوص داخل intro-section */
.intro-section .intro-content {
  max-width: 1200px;
  margin: 0 auto;
  color: #222;
}

.intro-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.intro-section p {
  font-size: clamp(1.125rem, 4vw, 2rem);
  line-height: 1.6;
  margin-bottom: 15px;
}

.intro-section .highlight {
  margin-top: 80px;
  text-align: center;
  color: #ff0000;
  font-size: 30px;
  margin-bottom: 10px;
}

/* إضافة مسافة للأقسام التالية لتظهر فوق الصورة */
.services,
.other-section,
.category-section,
.homepage-works,
.intro-section,
.typing-hero-section {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 100px 0;
}


.typing-hero-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}

h1#typing-hero-text {
  display: flex;
  font-size: 115px;
  flex-direction: column;
}

#typing-hero-text span {
  position: relative;
  display: inline-block;
  width: fit-content;
}

span.line-light {
  font-weight: 100;
}

span.line-bold {
  font-weight: 600;
}

/* Premium Blinking Cursor */
#typing-hero-text span.typing-active::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background-color: #000;
  margin-inline-start: 15px; /* Automatically switches margin based on RTL/LTR */
  vertical-align: text-bottom;
  animation: blink-premium 1s step-end infinite;
  border-radius: 0;
  box-shadow: 0 0 12px rgba(230, 57, 70, 0.4);
}


@keyframes blink-premium {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* === Homepage Works Redesign === */
.homepage-works {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(5px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.works-sidebar-left {
  left: 0;
}

.works-sidebar-right {
  right: 0;
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}

.sidebar-icons {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.works-main-content {
  width: 100%;
  max-width: 1600px;
  padding: 0;
  text-align: center;
  position: relative;
}

/* Top Navigation Positioning */
.works-navigation {
  margin-top: 10px;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  /* Tighter gap as in image */
  pointer-events: auto;
  z-index: 50;
}

.works-navigation .swiper-button-prev,
.works-navigation .swiper-button-next {
  position: static;
  margin: 0;
  width: 60px;
  /* Smaller size for pure triangle */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  color: #ffb8b8;
  /* Pink color from image/svg */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.works-navigation .swiper-button-next {
  transform: rotate(0deg);
}

body.rtl .works-navigation .swiper-button-next {
  transform: rotate(180deg);
}

.works-navigation svg {
  display: block;
  width: 100%;
  height: auto;
}

.works-navigation .swiper-button-prev:hover,
.works-navigation .swiper-button-next:hover {
  color: #ffb8b8;
  /* Slightly darker pink on hover */
  transform: scale(1.1);
}

.works-navigation .swiper-button-prev::after,
.works-navigation .swiper-button-next::after {
  display: none;
  /* Hide default swiper font icons */
}

/* RTL Arrow Fixes */
body.rtl .works-navigation .swiper-button-prev svg {
  transform: rotate(180deg) !important;
}

body.rtl .works-navigation .swiper-button-next svg {
  transform: rotate(0deg) !important;
}

/* Slide Styles */
.mainWorksSwiper {
  padding: 100px 0;
  overflow: visible !important;
}

.mainWorksSwiper .swiper-slide {
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transform: scale(0.8);
  opacity: 0.3;
}

.mainWorksSwiper .swiper-slide-active {
  transform: scale(1.2) translateY(-20px);
  opacity: 1;
  z-index: 10;
}

.slide-inner {
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* Bento Grid Layout */
/* Bento Grid 2.0: Premium Upgrade */
.works-page-main {
  padding-top: 100px;
  padding-bottom: 150px;
  background: #fdfdfd;
}

.container--wide {
  max-width: 1440px !important;
  /* Slightly tighter for focus */
  margin: 0 auto !important;
  padding: 0 40px !important;
}

.works-header {
  margin-bottom: 100px;
  text-align: center;
}

.works-header .page-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -0.05em;
  color: var(--text-color);
  line-height: 0.9;
}

.works-description {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #666;
  font-weight: 400;
}

/* 12-Column Asymmetrical Grid */
.works-grid-content {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  grid-auto-rows: 150px !important;
  /* Smaller units for more control */
  gap: 32px !important;
  margin-bottom: 80px !important;
  width: 100% !important;
}

/* Bento Item Base */
.bento-item {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.bento-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bento-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.03);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.bento-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.bento-media {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.bento-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Grid Variatons (Bento 2.0 Pattern) */
.bento-item--hero {
  grid-column: span 8 !important;
  grid-row: span 4 !important;
}

.bento-item--standard {
  grid-column: span 4 !important;
  grid-row: span 2 !important;
}

.bento-item--wide {
  grid-column: span 8 !important;
  grid-row: span 2 !important;
}

.bento-item--tall {
  grid-column: span 4 !important;
  grid-row: span 4 !important;
}

/* Premium Glassmorphism Overlay */
.bento-overlay {
  position: absolute;
  inset: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 1;
  /* Visible by default/progressive */
  transition: background 0.5s ease;
  z-index: 5;
}

.bento-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
}

.bento-card:hover .bento-img {
  transform: scale(1.05);
}

.bento-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
  width: fit-content;
  transform: translateY(10px);
  opacity: 0.8;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.bento-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  transform: translateY(10px);
  transition: transform 0.5s ease;
}

.bento-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-cta-text {
  font-size: 0.9rem;
  font-weight: 600;
}

.bento-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.4s ease;
}

/* Hover Reveal Details */
.bento-card:hover .bento-badge,
.bento-card:hover .bento-title {
  transform: translateY(0);
  opacity: 1;
}

.bento-card:hover .bento-cta {
  opacity: 1;
  transform: translateY(0);
}

.bento-card:hover .bento-arrow {
  transform: translateX(5px);
}

/* Responsive */
@media (max-width: 1200px) {
  .works-grid-content {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 250px !important;
  }

  .bento-item--hero,
  .bento-item--wide,
  .bento-item--tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

@media (max-width: 768px) {
  .works-grid-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .bento-card {
    border-radius: 20px;
  }

  .bento-overlay {
    padding: 24px;
  }

  .bento-title {
    font-size: 1.5rem;
  }
}


/* Load More Button */
.works-load-more-wrap {
  text-align: center;
}

.mono-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.mono-btn--outline {
  border-color: var(--border-color);
  color: var(--text-color);
  background: transparent;
}

.mono-btn--outline:hover {
  background: #1a1a1a;
  color: #fff;
}

.loader-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.homepage-work-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9/6;
}

/* Project Info Overlay */
.works-header-overlay {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 5;
  opacity: 1;
  visibility: visible;
  transition: all 0.6s ease;
  text-align: left;
}

.swiper-slide-active .works-header-overlay {
  opacity: 1;
  visibility: visible;
}

.work-item-details .work-category {
  display: block;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 10px;
  opacity: 0.9;
  display: none;
}

.work-item-details .work-title {
  display: block;

  font-size: 30px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
  padding: 5px;
  text-transform: uppercase;
  text-align: center;
}

.work-item-details .work-title {
  text-align: center;
}

.expand-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.swiper-slide-active:hover .expand-icon {
  opacity: 1;
  transform: scale(1);
}

con {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s ease;
}

.slide-inner:hover .expand-icon {
  transform: scale(1.1);
}

.works-bottom-badge {
  position: absolute;
  bottom: 40px;
  left: 100px;
  z-index: 20;
}

.envato-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 15px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.buy-on {
  opacity: 0.6;
}

.envato-text {
  font-weight: 700;
  color: #82b440;
}

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

  .works-main-content {
    padding: 0 20px;
  }

  .active-title {
    font-size: 24px;
  }

  .active-category {
    font-size: 14px;
  }

  .works-header {
    bottom: 40px;
  }

  .title-with-lines::before,
  .title-with-lines::after {
    display: none;
  }

  .homepage-works {
    padding: 0;
    min-height: auto;
  }

  .works-bottom-badge {
    left: 20px;
    bottom: 20px;
  }
}

/* Navigation & Pagination Styling */

section.works-section {
  padding: 50px 0;
}

.blog-section {
  background-color: var(--bg-color);
  transition: background-color 0.3s ease;
}



.menu-icon span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: var(--vermilion);
}










/* === Comments Section (Classic Layout) === */
.comments-area {
  margin-top: 50px;
}

.comments-title {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: var(--text-color);
  font-weight: 600;
}

/* Comment list */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* Avatar */
.comment .avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

/* Comment body */
.comment-body {
  flex: 1;
}

/* Meta: author + date */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-author {
  font-weight: 600;
  color: #222;
}

.comment-author a {
  color: inherit;
  text-decoration: none;
}

.comment-metadata {
  font-size: 0.85rem;
  color: var(--secondary-text);
}

/* Comment text */
.comment-content {
  color: #333;
  line-height: 1.6;
  margin-top: 5px;
}

.comment-content p {
  margin-bottom: 10px;
}

/* Reply link */
.comment-reply-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--vermilion);
  text-decoration: none;
  border: 1px solid var(--vermilion);
  padding: 4px 10px;
  background: #fff;
  transition: 0.3s;
}

.comment-reply-link:hover {
  background: var(--vermilion);
  color: #fff;
}

/* Comment form */
.comment-respond {
  margin-top: 50px;
}

.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1rem;
  margin-bottom: 15px;
  transition: 0.3s;
}

.comment-respond textarea:focus,
.comment-respond input:focus {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.1);
  outline: none;
}

.comment-respond ::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Submit button */
.submit-comment-btn {
  background-color: var(--vermilion);
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.submit-comment-btn:hover {
  background-color: #d14400;
}

.comment-author-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


.comment-form-cookies-consent {
  margin-bottom: 25px;
}

/* single work */
.site-main.work-single {
  padding: 0 15px 50px 15px;
}

header.site-header {
  margin: auto;
  padding-top: 80px;
  background-color: var(--bg-rgb);
  backdrop-filter: blur(10px);
}
.site-main.page-standard{
    background-color: var(--bg-rgb);
    backdrop-filter: blur(10px);
}

header.site-header .header-bg {
  font-size: 100px;
  text-align: left;
  padding: 0;
  margin-bottom: 0;
  padding-bottom: 20px;: ;
}

.admin-bar header.site-header {
  margin-top: 32px;
}


.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  /* add horizontal padding for small screens */
  box-sizing: border-box;
  position: relative;
}

/* Large tablets and small desktops */
@media (max-width: 992px) {
  .container {
    max-width: 900px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .container {
    max-width: 700px;
    padding: 0 15px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
}


.worksSwiper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 80px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box;
}

/* Large tablets */
@media (max-width: 992px) {
  .worksSwiper {
    max-width: 900px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .worksSwiper {
    max-width: 700px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .worksSwiper {
    max-width: 100%;
  }

  .top-bar {
    flex-direction: column-reverse;
    gap: 15px;
  }

  .top-bar p {
    font-size: 25px;
    text-align: center;
  }

  .footer-widgets {
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: end;

  }
}

.intro-section .intro-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  color: #222;
  padding: 0 20px;
  /* ensures content doesn’t touch edges */
  box-sizing: border-box;
}

/* Large tablets */
@media (max-width: 992px) {
  .intro-section .intro-content {
    max-width: 900px;
    padding: 0 15px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .intro-section .intro-content {
    max-width: 700px;
    padding: 0 15px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .intro-section .intro-content {
    max-width: 100%;
    padding: 0 15px;
    font-size: 0.95rem;
    /* optional: slightly smaller text on mobile */
    text-align: center;
    /* optional: center align for small screens */
  }

  .intro-section h2 {
    font-size: clamp(1.5rem, 8vw, 2.5rem);
  }

  .intro-section p {
    font-size: clamp(1rem, 5vw, 1.5rem);
  }

  .intro-section .highlight {
    font-size: 20px;
  }

  .b-logo-wrap {
    z-index: 25 !important;
  }



  .language-name .language {
    font-size: 16px !important;
  }

  .language-name .site-name {
    font-size: 14px !important;
    display: none;
  }

  .b-logo-wrap {
    right: 20px !important;
    bottom: 20px !important;
  }

  .b-logo {
    height: 15px !important;
    width: auto !important;
  }

  .hamburger {
    z-index: 100 !important;
  }

  .services,
  .intro-section,
  .works-section {
    z-index: 30;
    position: relative;
  }
}

/* Works Page Swiper Fixes */
.mySwiperpage .swiper-slide {
  width: 30% !important;
  height: 300px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  background-color: #eee;
  /* Fallback color */
}


.header-content-inner {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 40px 20px;
}

.header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #000;
  font-size: 1.2rem;
  margin-top: 10px;
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
  /* Override parent uppercase if needed */
}

.header-meta .meta-separator {
  margin: 0 15px;
}



.work-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.work-content-wrapper {
  position: relative;
  display: flex;
  gap: 40px;
  padding-bottom: 50px;
}

.social-share-sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: fit-content;
  z-index: 10;
  text-align: left;
  max-width: 160px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Each info block */
.sidebar-section {
  margin-bottom: 25px;
}

.sidebar-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}

.sidebar-value {
  display: block;
  font-size: 18px;
  font-weight: 400;
  color: #111;
  line-height: 1.3;
}

/* Avatar */
.sidebar-avatar {
  margin-bottom: 25px;
}

.sidebar-avatar img,
.sidebar-avatar .avatar {
  border-radius: 50%;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover;
  display: block;
  border: 1px solid #ddd;
  transition: filter 0.3s ease;
}

.sidebar-avatar img:hover,
.sidebar-avatar .avatar:hover {
  filter: grayscale(0%);
}

/* Share icons row */
.sidebar-share-icons {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}

.sidebar-share-icons a {
  color: #111;
  transition: opacity 0.2s ease;
  display: flex;
}

.sidebar-share-icons a:hover {
  opacity: 0.5;
}

.work-content {
  flex: 1;
  min-width: 0;
}

/* RTL Specific for Sidebar */
body.rtl .social-share-sidebar {
  order: 2;
  /* Push to the right in flex row */
}

.meta-separator {
  width: 10px;
  height: 10px;
  background: var(--vermilion);
  display: flex;
  opacity: 1;
}

@media (max-width: 991px) {
  .work-content-wrapper {
    flex-direction: column;
    gap: 20px;
  }

  .social-share-sidebar {
    display: contents;
    /* Allows children to be direct flex children of wrapper */
  }

  .sidebar-meta-section {
    order: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--bg-rgb);
    border-radius: 12px;
  }

  .sidebar-author-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .sidebar-meta-section .sidebar-avatar {
    margin-bottom: 0;
  }

  .sidebar-meta-section .sidebar-section {
    margin-bottom: 0;
  }

  .sidebar-meta-section .sidebar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
  }

  .sidebar-meta-section .sidebar-value {
    font-size: 14px;
  }

  .work-content {
    order: 2;
    padding-top: 0;
  }

  .sidebar-share-section {
    order: 3;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    text-align: center;
  }

  .sidebar-share-section .sidebar-share-icons {
    justify-content: center;
    gap: 30px;
    margin-top: 15px;
  }

  .sidebar-share-section .sidebar-share-icons svg {
    width: 28px;
    height: 28px;
  }

  .header-meta {
    justify-content: flex-start;
    font-size: 13px;
    margin-top: 14px;
  }
}

@media (max-width: 768px) {
  .mySwiperpage {
    width: 100% !important;
    height: auto !important;
  }

  .mySwiperpage .swiper-slide {
    width: 90% !important;
    height: 200px !important;
  }

  .work-header {
    height: auto;
  }
}

/* ====== Brand Analysis CTA Section ====== */
/* ====== Brand Analysis CTA Section ====== */
.brand-analysis-cta {
  padding: 60px 20px;
  position: relative;
  z-index: 5;
  overflow: hidden;
  transition: all 0.3s ease;
}

.brand-analysis-cta.has-bg {
  border-radius: 24px;
      backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  /*margin: 40px auto;*/
  /*border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);*/
}


.cta-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.cta-content-inner {
  width: 100%;
  max-width: 800px;
  /* Keep content readable */
  margin: 0 auto;
}

.cta-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  margin-bottom: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.rtl .cta-title,
.rtl strong{
  font-family: "Montserrat Arabic", sans-serif !important;
  text-align: right;
}

.rtl .cta-features li:hover{
        transform: translateX(-5px);
}
.rtl .cta-features li::before {
 
    transform: rotate(180deg);
}
.cta-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cta-features li {
  position: relative;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.85;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cta-features li::before {
  content: "→";
  color: var(--cta-title-color);
  font-weight: 900;
  opacity: 0.8;
}

.cta-features li:hover {
  opacity: 1;
  transform: translateX(5px);
}

.cta-button-wrap {
  margin-top: 20px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 18px 35px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.cta-button .btn-arrow {
  transition: transform 0.3s ease;
}

.cta-button:hover .btn-arrow {
  transform: translateX(5px);
}

/* Alignment logic */
[style*="text-align: center"] .cta-features li {
  justify-content: center;
}

[style*="text-align: center"] .cta-features li::before {
  display: none;
  /* Hide arrow in center for cleaner look if preferred, or keep if user likes */
}

@media (max-width: 768px) {
  .brand-analysis-cta {
    padding: 40px 0px;
  }

  .brand-analysis-cta.has-bg {
    border-radius: 15px;
    margin: 20px 10px;
  }

  .cta-title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .cta-features li {
    font-size: 16px;
    gap: 8px;
  }

  .cta-button {
    width: 100%;
    justify-content: center;
    padding: 15px 25px;
  }
}

/* ====== Standard Page Styles ====== */
.page-standard {
  padding: 0;
  min-height: 60vh;
}

.page-standard .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.entry-header {
  margin-bottom: 40px;
  text-align: center;
}

.entry-title {

  font-size: 42px;
  font-weight: 700;
  color: #000;
}

.entry-content {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.8;
  color: #444;
}

.entry-content p {
  padding-bottom: 1.5em;
}

/* ====== Language Switcher Dropdown ====== */
.language-switcher {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
  vertical-align: middle;
}

.lang-selected {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
  color: inherit;
  transition: all 0.3s ease;
}

.language-switcher:hover .lang-selected {
  color: #ff0000;
  /* Vermilion */
}

.lang-arrow {
  transition: transform 0.3s ease;
}

.language-switcher:hover .lang-arrow {
  transform: rotate(0deg);

}

.language-switcher .lang-arrow {
  width: 20px;
  height: 20px;
}



.lang-list {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  border-radius: 20px;
  min-width: 100px;
  text-align: center;
}

.dark-mode .lang-list {
  background: rgba(0, 0, 0, 0.5) !important;
}

.language-switcher:hover .lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.lang-list li a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2 !important;
  padding: 10px 15px;
  display: block;
  color: inherit !important;
}

/* ====== Premium Unified Language Switcher (Dynamic Ribbon) ====== */
.fixed-controls-bar .language-switcher {
  display: flex !important;
  flex-direction: row !important;
  /* Expansion happens to the left */
  align-items: center !important;
  gap: 0 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 100;
}

.fixed-controls-bar .lang-selected {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, opacity 0.3s ease;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 13px;
}

.fixed-controls-bar .lang-selected:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.fixed-controls-bar .lang-arrow {
  margin-left: 4px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease;
}

/* Arrow shifts left to act as a dynamic divider when open */
.fixed-controls-bar .language-switcher.is-open .lang-arrow {
  transform: rotate(-90deg);
  margin: 0;
}

.fixed-controls-bar .lang-list {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  transform: none !important;

  /* Initial State: Hidden & Liquid */
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;

  /* Premium Glass Pill Background */

  transition: max-width 0.8s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.4s ease,
    visibility 0.4s ease,
    padding 0.4s ease !important;
}

/* Open State for the ribbon */
.fixed-controls-bar .language-switcher.is-open .lang-list {
  max-width: 500px !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 5px !important;
  margin-right: 5px !important;
  gap: 15px
}

/* Staggered Item Animations (Scale + Blur unroll) */
.fixed-controls-bar .lang-list li {
  padding: 0 !important;
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.7) translateX(-15px);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.6s ease,
    filter 0.6s ease;
  pointer-events: none;
}

.fixed-controls-bar .language-switcher.is-open .lang-list li {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateX(0);
  pointer-events: auto;
}

/* Incremental delays for the "unroll" effect */
.fixed-controls-bar .language-switcher.is-open .lang-list li:nth-child(1) {
  transition-delay: 0.1s;
}

.fixed-controls-bar .language-switcher.is-open .lang-list li:nth-child(2) {
  transition-delay: 0.2s;
}

.fixed-controls-bar .language-switcher.is-open .lang-list li:nth-child(3) {
  transition-delay: 0.3s;
}

.fixed-controls-bar .lang-list li a {
  display: block;
  color: inherit !important;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.05em;
  position: relative;
}

.fixed-controls-bar .lang-list li a:hover {
  opacity: 1;
  letter-spacing: 0.12em;
  transform: scale(1.05);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* Active Dot Indicator */
.fixed-controls-bar .lang-selected::before {
  width: 5px;
  height: 5px;
  background: var(--vermilion, #ff0000);
  border-radius: 50%;
  margin: 0 8px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px var(--vermilion, #ff0000);
}

.fixed-controls-bar .language-switcher.is-open .lang-selected::before {
  opacity: 1;
  transform: scale(1);
  animation: pulse-active 2s infinite;
}

@keyframes pulse-active {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* Hide old separators/after effects */
.fixed-controls-bar .lang-selected::after {
  display: none !important;
}

.lang-list li:not(:last-child) {
  padding-bottom: 5px;
}

.lang-list li:last-child {
  border-bottom: none;
}

/* Responsive Fix */
@media (max-width: 768px) {
  .language-switcher {
    margin-right: 0;
  }
}

/* ====== Category Circular Layout ====== */
.category-section {
  padding: 80px 0;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 180px;
  transition: transform 0.3s ease;
}

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

.category-circle-link {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #f5f5f5;
  /* Light grey circle background */
  padding: 20px;
  margin-bottom: 20px;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.category-card:hover .category-circle-link {
  background-color: #f0f0f0;
}

.category-circle-img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  transition: transform 0.5s ease;
}

.category-card:hover .category-circle-img {
  transform: scale(1.1);
}

.category-info .category-name {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 700;
}

.category-info .category-name a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease;
}

.category-card:hover .category-name a {
  color: #ff0000;
}

.category-count {
  font-size: 13px;
  color: var(--secondary-text);
  font-weight: 500;
}

/* Responsive Grid */
@media (max-width: 768px) {
  .category-grid {
    gap: 30px;
  }

  .category-card {
    width: 140px;
  }

  .category-circle-link {
    width: 120px;
    height: 120px;
    padding: 15px;
  }

  .category-info .category-name {
    font-size: 16px;
  }
}

/* ====== LTR Overrides ====== */
body.ltr {
  direction: ltr;
  text-align: left;
}

body.ltr .intro-section p {
  direction: ltr;
  text-align: left;
}

body.ltr .services {
  text-align: left;
}

body.ltr .services li {
  padding-left: 0;
  padding-right: 0px;
}

body.ltr .services li::before {
  left: auto;
  right: 0;
}

body.ltr .services li::after {
  left: auto;
  right: 20px;
}

body.ltr .services li span {
  margin-left: 0;
  /*margin-right: 70px;*/
  padding-left: 0;
  padding-right: 10px;
}

body.ltr .category-info .category-name {
  text-align: center;
}

body.ltr .category-count {
  text-align: center;
}

/* RTL Specific (Ensuring consistency) */
body.rtl {
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

/* --- Minimal Blog Index Styles --- */
.creative-blog-main {
  background-color: var(--bg-rgb);
  transition: background-color 0.3s ease;
  padding: 0px 0 100px;
  direction: ltr;
      backdrop-filter: blur(10px);
  /* Keeping LTR for English as requested */
}

.creative-blog-container {
  max-width: 1200px;
  /* Slightly narrower for this layout */
  margin: 0 auto;
  padding: 0 20px;
}

.blog-header-section {
  text-align: center;
  margin-bottom: 50px;
}

.blog-page-title {
  /* Tall, condensed font style */
  font-size: 5.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
  letter-spacing: -1px;
  margin: 0 0 30px 0;
  line-height: 1;
}

.blog-title-separator {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0;
  width: 100%;
}

.minimal-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 40px;
  /* larger vertical gap to separate rows */
}

.minimal-blog-card {
  display: flex;
  flex-direction: column;
}

.minimal-blog-image {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  background: #f4f4f4;
}

.minimal-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.minimal-img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--card-bg);
}

.minimal-blog-card:hover .minimal-img {
  transform: scale(1.03);
  /* Subtle zoom on hover */
}

.minimal-blog-content {
  display: flex;
  flex-direction: column;
  /* Aligning left for LTR */
}

.rtl .minimal-blog-title a {
  font-family: 'Montserrat Arabic';
}

.minimal-blog-meta {
  font-size: 0.85rem;
  color: #000;
  /* Dark meta text as in image */
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.minimal-meta-separator {
  margin: 0 8px;
  color: #000;
}

.minimal-category {
  font-weight: 400;
}

.minimal-blog-title {
  font-size: 1.8rem;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}

.minimal-blog-title a {
  color: #000;
  transition: opacity 0.3s ease;
}

.minimal-blog-title a:hover {
  opacity: 0.7;
}

/* Pagination */
.creative-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.creative-pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  color: #000;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 5px 10px;
  transition: opacity 0.3s ease;
}

.creative-pagination .page-numbers.current {
  border-bottom: 2px solid #000;
}

.creative-pagination .page-numbers:not(.current):hover {
  opacity: 0.6;
}

.no-posts-found {
  text-align: center;
  padding: 100px 0;

}

.no-posts-found h2 {
  font-size: clamp(1.25rem, 5vw, 2rem);
  color: #000;
  margin-bottom: 20px;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .minimal-blog-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .blog-page-title {
    font-size: 3.5rem;
  }

  .minimal-blog-title {
    font-size: 1.5rem;
  }
}

/* === Sticky Header Elements (Grouped) === */
.fixed-controls-bar {
  direction: ltr;
  position: fixed !important;
  bottom: var(--bottom) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  padding: 0 40px !important;
  z-index: 9999 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: none !important;
  cursor: default;
  transition: opacity 0.3s ease !important;
}

.menu-open .fixed-controls-bar {
  max-width: 100% !important;
}

.fixed-controls-bar>* {
  pointer-events: auto !important;
  /* Re-enable clicks for items */
}

/* Scoped Logo Switching: Only triggers when body has .over-black-footer OR .dark-mode */
.fixed-controls-bar .logo-light {
  display: none !important;
}

body.over-black-footer .fixed-controls-bar .logo-dark {
  display: none !important;
}

body.over-black-footer .fixed-controls-bar .logo-light {
  display: block !important;
}

/* OVERRIDE for Demo-6: Always show Dark Logo and Hide Light Logo */
body.over-red-section .fixed-controls-bar .logo-dark {
  display: block !important;
}

body.over-red-section .fixed-controls-bar .logo-light {
  display: none !important;
}

body.at-footer .fixed-controls-bar {
  padding: 0 20px !important;
}

.fixed-controls-bar .bar-left,
.fixed-controls-bar .bar-right {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the hamburger and language switcher are side-by-side on exactly the same level */


.hamburger .hamburger__close-svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
  z-index: 11 !important;
}

.hamburger .hamburger__close-svg svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.hamburger .hamburger__close-svg path {
  fill: #fff !important;
}

/* Toggling states handled by native demo6.js and demo.css */

/* Top Level Logo Positioning - Centered */
.top-brand-logo {
  position: fixed !important;
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  display: none !important;
}

/* No RTL mirroring needed if centered */

/* Reset internal line vertical offsets to be truly centered in a 40px box */
.hamburger.hamburger--demo-6 .hamburger__line--01 {
  top: 13px !important;
}

.hamburger.hamburger--demo-6 .hamburger__line--02,
.hamburger.hamburger--demo-6 .hamburger__line--cross01,
.hamburger.hamburger--demo-6 .hamburger__line--cross02 {
  top: 20px !important;
}

.hamburger.hamburger--demo-6 .hamburger__line--03 {
  top: 27px !important;
}

/* Lines are now hidden via body.menu-open / .is-opened-navi rule above */

.fixed-controls-bar .language-name {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
}

/* RTL Adjustments for the grouped bar */

.language-name .site-name {
  margin-left: 10px;
}

/* Language switcher text styling - only for the visible selected label */
.language-name .lang-selected span {
  font-size: 24px;
  font-weight: 100;
  line-height: 0.8 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  letter-spacing: 0.05em;
    font-weight: 500;
}

.language-name .lang-arrow {
  background: transparent !important;
}

/* Top Level Logo Positioning - Centered */
.top-brand-logo {
  position: fixed !important;
  top: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease !important;
}

.top-brand-logo .b-logo {
  height: 22px !important;
  width: auto !important;
  display: block !important;
}

body.menu-open .top-brand-logo {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Legacy scrolled-header and scrolled-bottom rules removed.
   Color is now managed entirely by the luminance-based .controls-dark-mode system. */

/* ====== Smart Dark Mode for Controls ====== */

/* Force ALL language switcher elements to be fully transparent */
.fixed-controls-bar .language-name,
.fixed-controls-bar .language-switcher,
.fixed-controls-bar .lang-selected,
.fixed-controls-bar .lang-selected span,
.fixed-controls-bar .lang-selected svg,
.fixed-controls-bar .language-name>*,
.fixed-controls-bar .language-switcher>* {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Adaptive Control Colors (Hamburger & Language Switcher)
   ========================================================================== */

.hamburger__line-in::before,
.hamburger__line-in::after {

  background-color: #000;
}


body.dark-mode .language-name .lang-selected span,
body.dark-mode .language-name .lang-arrow {
  color: #fff;
}

footer .language-name .lang-selected span,
footer .language-name .lang-arrow {
  color: #fff;
}

.controls-light-mode .fixed-controls-bar .lang-selected span {
  color: #000;
}

.controls-light-mode .fixed-controls-bar .lang-arrow {
  color: #000;
}


/* 1. DEFAULT: Light Controls for Dark Backgrounds (White) */
body:not(.controls-dark-mode) .fixed-controls-bar .lang-arrow {
  color: #000;
}

body.controls-light-mode .fixed-controls-bar .hamburger__line-in::before,
body.controls-light-mode .fixed-controls-bar .hamburger__line-in::after {
  background-color: #000;
}

/* 2. ADAPTIVE: Dark Controls for Light Backgrounds (Black) 
      (Triggered by IntersectionObserver in footer.php) */
body.dark-mode .controls-light-mode .fixed-controls-bar .lang-selected span,
body.dark-mode .controls-light-mode .fixed-controls-bar .lang-arrow {
  color: #fff;
}

body .controls-light-mode .fixed-controls-bar .lang-selected span,
body .controls-light-mode .fixed-controls-bar .lang-arrow {
  color: #000;
}


body.over-black-footer .fixed-controls-bar .lang-arrow,
body.over-black-footer .fixed-controls-bar .lang-selected span {
  color: #fff;
}

body.over-black-footer .fixed-controls-bar .hamburger__line-in::before,
body.over-black-footer .fixed-controls-bar .hamburger__line-in::after {
  background-color: #fff;
}

body.over-red-section .fixed-controls-bar .lang-arrow,
body.over-red-section .fixed-controls-bar .lang-selected span {
  color: #fff;
}

body.over-red-section .fixed-controls-bar .hamburger__line-in::before,
body.over-red-section .fixed-controls-bar .hamburger__line-in::after {
  background-color: #fff;
}

body.over-black-footer .fixed-controls-bar .lang-selected span

/* Global Dark Mode OVERRIDE: Force white controls when site-wide dark mode is active 
   BUT ONLY if we are NOT over a light section (respect adaptive logic) */
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .lang-selected span,
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .lang-arrow,
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .hamburger__line-in::before,
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .hamburger__line-in::after {
  color: #fff !important;
  background-color: #fff !important;
}

/* Fix for background-color being applied to text elements incorrectly in the group above */
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .lang-selected span,
.dark-mode body:not(.controls-light-mode) .fixed-controls-bar .lang-arrow {
  background-color: transparent !important;
}

/* Center Logo: Removed inversion per user request */
.top-brand-logo .b-logo {
  filter: none !important;
}

/* Ensure the dropdown list keeps its white background (only visible on hover) */

.fixed-controls-bar .lang-list li a {
  color: #000 !important;
  background: transparent !important;
  font-size: 22px;
  padding: 0;
}

/* Footer docking is now handled by scroll-driven JS interpolation */

.global-menu.is-opened button.menu.close {
  bottom: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 50px 15px !important;
  border-radius: 0 !important;
}

/* Mobile Glass Dock Style */
@media screen and (max-width: 991px) {
  .fixed-controls-bar {
    bottom: 10px !important;
    width: 90% !important;
    border-radius: 20px !important;
    padding: 0 20px !important;
    height: 60px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: auto !important;

    /* iOS Dock Frosted Glass */
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(5px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) !important;

    /* Specular edge highlights */
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.6),
      0 -2px 16px rgba(0, 0, 0, 0.08) !important;

    border-top: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* Dark mode variant for mobile glass dock
  .dark-mode .fixed-controls-bar {
    background: rgba(0, 0, 0, 0.5) !important;
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
      0 -2px 16px rgba(0, 0, 0, 0.4) !important;
    border-top: 0.5px solid rgba(255, 255, 255, 0.1) !important;
  }
 */
  /* Ensure items are correctly positioned inside the floating dock */
  .fixed-controls-bar .bar-left,
  .fixed-controls-bar .bar-right {
    height: 100% !important;
    gap: 15px !important;
  }

  /* Mobile Adaptive Controls: Inherit global logic but ensure high visibility on floating dock */

  /* Reset mobile specific hardcoded colors to let global adaptive logic work */
  .fixed-controls-bar .lang-selected span,
  .fixed-controls-bar .lang-arrow,
  .fixed-controls-bar .hamburger__line-in::before,
  .fixed-controls-bar .hamburger__line-in::after {
    /* No hardcoded colors here, rely on the global body classes defined above */
  }

  /* Specific mobile font adjustments */
  .fixed-controls-bar .lang-selected span {
    font-size: 22px !important;
    font-weight: 500 !important;
  }

  /* Reset docking style for mobile to maintain floating look even at footer if preferred, 
     or keep docking but with glass. 
     The user explicitly asked for "glass background in mobile", 
     so we'll stick to the floating glass. */
  body.at-footer .fixed-controls-bar {
    bottom: 50px !important;
  }


}


.container.footer-widgets {
  margin-bottom: 60px;
}

.socials_container a {
  color: #fff;
}

/* --- Work Single Page Redesign --- */

.work-single {
  padding-top: 50px;
  background: var(--bg-rgb);
  backdrop-filter: blur(10px);
}

.work-header {
  text-align: left;
  margin-bottom: 60px;
}

.project-title {

  font-size: clamp(30px, 6vw, 120px);
  /* Slightly smaller than previous to avoid massive overflow */
  font-weight: 800;
  text-transform: uppercase;
  color: #000;
  line-height: 1.1;
  margin-bottom: 50px;
  letter-spacing: -1px;
  width: 100%;
}

.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding-top: 30px;
  padding-bottom: 30px;
  align-items: flex-start;
}

.meta-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}

.meta-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 700;
}

.button-column {
  margin-left: auto;
  /* Push button to the right */
  align-self: center;
}

.visit-site-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border: 1px solid var(--vermilion);
  border-radius: 15px;
  color: var(--vermilion) !important;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.visit-site-btn:hover {
  background: var(--vermilion);
  color: #fff !important;
}

/* Project Display Section */
.project-display-section {
  background-color: transparent;
  /* Removed yellow */
  padding: 40px 0;
  /* Reduced padding since bg is gone */
  margin-bottom: 60px;
}

.project-featured-img {
  width: 100%;
  height: auto;
  display: block;
}

.work-content {
  margin-bottom: 80px;
  font-size: 17px;
  line-height: 1.7;
}

/* Fix double images: Hide the first image or figure if it appears at the very start of the content */
.no-duplicate-img>img:first-child,
.no-duplicate-img>figure:first-child,
.no-duplicate-img>p:first-child img {
  display: none !important;
}

@media (max-width: 991px) {
  .project-meta-row {
    gap: 20px;
  }

  .meta-column {
    gap: 20px;
  }

  .project-title {
    font-size: 45px;
  }

  .button-column {
    margin-left: 0;
    width: 100%;
  }
}

/* Project Navigation */
.project-navigation {
  margin-top: 80px;
  border-top: 1px solid #f0f0f0;
  padding: 60px 0;
}

.project-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.nav-link-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.nav-previous {
  text-align: left;
}

.nav-next {
  text-align: right;
}

.nav-direction {
  font-size: 11px;
  font-weight: 800;
  color: #999;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.nav-title {

  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.nav-link-item:hover .nav-title {
  color: #666;
}

/* Professional CTA Section */
/* Professional CTA Section Redesign */
.project-cta-section {
  position: relative;
  background: #0a0a0a; /* Dark base */
  color: #fff;
  padding: 160px 0;
  text-align: center;
  margin-top: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dynamic Mesh Glow Orbs */
.cta-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
}

.orb-1 {
  top: -10%;
  left: 10%;
  width: 40%;
  height: 40%;
  background: var(--vermilion);
  animation: float-orb 20s infinite alternate ease-in-out;
}

.orb-2 {
  bottom: -15%;
  right: 5%;
  width: 45%;
  height: 45%;
  background: #2a2a2a;
  animation: float-orb 25s infinite alternate-reverse ease-in-out;
}

@keyframes float-orb {
  0% { transform: translate(0, 0) scale(1.0); }
  100% { transform: translate(15%, 10%) scale(1.1); }
}

.cta-content {
  position: relative;
  z-index: 2;
  /* Reveal Animation */
  opacity: 0;
  transform: translateY(30px);
  animation: cta-reveal 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes cta-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.cta-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 900;
  margin-bottom: 25px;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1.0;
}

.cta-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Enhanced CTA Premium Button */
.cta-premium-btn {
  min-width: 200px;
  height: 60px;
  padding: 0 40px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.cta-premium-btn:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important;
}

.cta-premium-btn .span-text {
  color: #fff !important;
}

@media (max-width: 768px) {
  .project-navigation .nav-links {
    flex-direction: column;
    gap: 50px;
  }

  .nav-next {
    text-align: left;
    margin-left: 0;
  }

  .project-cta-section {
    padding: 80px 20px;
  }
}



@media (max-width: 768px) {
  .section-title span {
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
  }

  .mainWorksSwiper {
    padding: 25px 0 !important;
  }

  .works-header-overlay {
    bottom: 15px;
    left: 15px;
  }

  .active-title {
    font-size: 10px !important;
  }

  .works-navigation .swiper-button-prev,
  .works-navigation .swiper-button-next {
    height: 20px;
  }

  .footer-widgets {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .work-item-details .work-title {
    display: none;
  }

  .swiper-slide.swiper-slide-active .work-item-details .work-title {
    display: block;
    font-size: 23px;
  }

}

/* ====== Custom Gutenberg Block Alignments ====== */

.full-width-bg {
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  padding-top: 40px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

/* Premium Glass Button (User Requested Style) */
.mono-glass-btn-premium {
  /*position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 45px;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  */

  color: var(--text-color);
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);


}



.mono-glass-btn-premium:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.mono-glass-btn-premium:active {
  transform: translateY(0);
}

.mono-glass-btn-premium .layer1 {
  position: absolute;
  inset: 0;
  filter: url(#glass-distortion);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  z-index: -2;
  pointer-events: none;
}

.mono-glass-btn-premium:hover .layer1 {
  opacity: 0.9;
}

.mono-glass-btn-premium .layer2 {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3),
    inset -3px 0px 10px 0 rgba(192, 228, 233, 0.2),
    inset 3px 2px 3px 0 rgba(192, 228, 233, 0.2),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3),
    inset -1px -5px 10px -1px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.3s ease;
  z-index: -1;
  pointer-events: none;
}

.mono-glass-btn-premium:hover .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.6),
    inset -3px 0px 12px 0 rgba(192, 228, 233, 0.5),
    inset 4px 3px 4px 0 rgba(192, 228, 233, 0.5),
    inset -1px -2px 4px 1px rgba(255, 255, 255, 0.5),
    inset -2px -7px 12px -1px rgba(255, 255, 255, 0.5);
}

.mono-glass-btn-premium .span-text {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* --- ADAPTIVE COLORS FOR LIGHT BACKGROUNDS --- */

/* 1. Global Light Mode (default if no dark-mode on html) */
body:not(.dark-mode) .mono-glass-btn-premium {
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* 2. Over specifically marked light sections */
[data-theme="light"] .mono-glass-btn-premium,
.light-section .mono-glass-btn-premium {
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* 3. Adjust shadows for visibility on light sections */
[data-theme="light"] .mono-glass-btn-premium .layer2,
.light-section .mono-glass-btn-premium .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(0, 0, 0, 0.05),
    inset -3px 0px 10px 0 rgba(0, 0, 0, 0.05),
    inset 3px 2px 3px 0 rgba(0, 0, 0, 0.05),
    inset -1px -1px 3px 1px rgba(0, 0, 0, 0.1),
    inset -1px -5px 10px -1px rgba(0, 0, 0, 0.1);
}

/* 4. HOVER for light backgrounds */
body:not(.dark-mode) .mono-glass-btn-premium:hover,
[data-theme="light"] .mono-glass-btn-premium:hover,
.light-section .mono-glass-btn-premium:hover {
  border-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* 5. FORCE WHITE for dark sections (high specificity) */
/* [data-theme="dark"] .mono-glass-btn-premium,
.dark-mode body:not(.controls-dark-mode) .mono-glass-btn-premium {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
} */
[data-theme="dark"] .mono-glass-btn-premium,
.dark-mode body .mono-glass-btn-premium {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .mono-glass-btn-premium .layer2,
.dark-mode body:not(.controls-dark-mode) .mono-glass-btn-premium .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3),
    inset -3px 0px 10px 0 rgba(192, 228, 233, 0.2),
    inset 3px 2px 3px 0 rgba(192, 228, 233, 0.2),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3),
    inset -1px -5px 10px -1px rgba(255, 255, 255, 0.2);
}


/*glass-button*/

/* ==========================================================================
   Nanogram Article Footer Banner
   ========================================================================== */
.nanogram-footer-banner {
  width: 100%;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 60px;
  font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);


  padding: 48px 56px;
}


.nanogram-banner-content {
  position: relative;
  z-index: 1;
}

.nanogram-banner-headline {
  font-size: 1.35rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .nanogram-footer-banner {
    padding: 32px 24px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .nanogram-banner-headline {
    font-size: 1.2rem;
  }
}

.nanogram-banner-subtext {
  font-size: 1rem;
  font-weight: 400;
  color: inherit;
  margin-bottom: 6px;
  line-height: 1.6;
}

.nanogram-banner-subtext strong {
  font-weight: 700;
}

.nanogram-banner-cta-label {
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: 28px;
}

.nanogram-banner-glass-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.nanogram-banner-glass-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.nanogram-banner-glass-btn:hover::before {
  left: 130%;
}

.nanogram-banner-glass-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: #fff;
}

.nanogram-banner-glass-btn:active {
  transform: translateY(0px);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nanogram-banner-btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.nanogram-banner-glass-btn:hover .nanogram-banner-btn-arrow {
  transform: translateX(4px);
}












/* التأكد من أن الحاوية تأخذ عرض الشاشة بالكامل */
.works-main-content {
  width: 100%;
  overflow: hidden;
}

.mainWorksSwiper {
  width: 100%;
  padding: 50px 0;
  /* مساحة علوية وسفلية للظل إن وجد */
}

/* لجعل الصور الجانبية تبدو أصغر وأكثر احترافية كما في طلبك */
.mainWorksSwiper .swiper-slide {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(0.85);
  /* تصغير الصور الجانبية */
  opacity: 0.5;
  /* جعل الصور الجانبية باهتة */
}

.mainWorksSwiper .swiper-slide-active {
  transform: scale(1);
  /* الصورة الوسطى بحجمها الكامل */
  opacity: 1;
  /* الصورة الوسطى واضحة */
}













/* Navbar */

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  border-bottom: 1px solid var(--border-color);
  max-width: 1200px;
  margin: auto;
  position: relative;
}

#dark-mode-toggle {
  background: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
  margin-right: 15px;
  border: none !important;
}

#dark-mode-toggle:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.dark-mode #dark-mode-toggle .moon-icon {
  display: none;
}

.dark-mode #dark-mode-toggle .sun-icon {
  display: flex;
}

#dark-mode-toggle .sun-icon {
  display: none;
}

#dark-mode-toggle svg {
  width: 20px;
  height: 20px;
}

.logo {
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: bold;
}

.menu-icon {
  display: inline-block;
  cursor: pointer;
}

.header-bg {
  padding: 50px 0;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 80px auto 50px;
}

/* Standardized Hamburger for all pages */
.hamburger--demo-6 {
  cursor: pointer;
  z-index: 1000;
}

@media (max-width: 768px) {


  header.site-header {
    margin: auto;
    padding: 90px 15px 15px 20px;
  }

  .work-content-wrapper {
    gap: 0;
  }

  header.site-header .header-bg {
    width: 100%;
    font-size: clamp(45px, 6vw, 60px);
    padding: 0;
    margin: 60px 0 30px;
    text-align: left;

  }


}



.services .mono-glass-btn-premium {
  width: 100%;
}

/* Dark Mode Toggle Glass Style */
#dark-mode-toggle .layer1,
.hero-scroll-arrow .layer1{
  position: absolute;
  inset: 0;
  filter: url(#glass-distortion);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px !important;
}

#dark-mode-toggle .layer2,
.hero-scroll-arrow .layer2{
  position: absolute;
  inset: 0;
  border-radius: 20px !important;
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3),
    inset -2px 0px 8px 0 rgba(192, 228, 233, 0.2),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3);
  z-index: 0;
  pointer-events: none;
}

#dark-mode-toggle:hover .layer1 {
  opacity: 0.9;
}

/* Premium Social Toggle Styles */
.social-toggle-container {
  position: relative;
  display: flex;
  align-items: center;
}

.social-tray {
  position: absolute;
  right: calc(100% + 15px);
  display: flex;
  gap: 15px;
  padding: 10px 11px;
  border-radius: 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  z-index: 10;
  flex-direction: column;
}

.social-toggle-container.is-active .social-tray {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.social-tray .layer1 {
  position: absolute;
  inset: 0;
  filter: url(#glass-distortion);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  opacity: 0.6;
  z-index: -2;
}

.social-tray .layer2 {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  box-shadow:
    inset 1px 1px 0px 0 rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

.social-tray a {
  color: var(--text-color);
  transition: transform 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.social-tray a:hover {
  transform: scale(1.2);
  color: #fff;
}

#social-toggle .layer1 {
  position: absolute;
  inset: 0;
  filter: url(#glass-distortion);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px !important;
}

#social-toggle .layer2 {
  position: absolute;
  inset: 0;
  border-radius: 20px !important;
  box-shadow:
    inset 1px 1px 0px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.1);
  z-index: 0;
  pointer-events: none;
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
  .social-tray {
    left: auto;
    right: 0;
    top: calc(100% + 15px);
    transform: translateY(-10px);
  }

  .social-toggle-container.is-active .social-tray {
    transform: translateY(0);
  }
}

/* Enhanced Glass for Social Toggle on White Background */
.social-toggle-container .social-tray {
  border-radius: 10px;
}

.social-toggle-container .social-tray .layer2 {
  border-radius: 10px;
}

/* Light background visibility for Social Toggle */
body:not(.dark-mode) .social-toggle-container .social-tray .layer1,
body:not(.dark-mode) #social-toggle .layer1 {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.8;
}

body:not(.dark-mode) .social-toggle-container .social-tray .layer2,
body:not(.dark-mode) #social-toggle .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(0, 0, 0, 0.05),
    inset -3px 0px 10px 0 rgba(0, 0, 0, 0.05),
    inset 3px 2px 3px 0 rgba(0, 0, 0, 0.05),
    inset -1px -1px 3px 1px rgba(0, 0, 0, 0.1),
    inset -1px -5px 10px -1px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.05);


  box-shadow: inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3), inset -3px 0px 10px 0 rgba(192, 228, 233, 0.2), inset 3px 2px 3px 0 rgba(192, 228, 233, 0.2), inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3), inset -1px -5px 10px -1px rgba(255, 255, 255, 0.2) !important;
  /* Outer shadow for depth on white */
}

/* Ensure icons are dark on white for the toggle */
body:not(.dark-mode) .social-toggle-container button,
body:not(.dark-mode) .social-toggle-container .social-tray a {
  color: #333 !important;
}

body:not(.dark-mode) .social-toggle-container .social-tray a:hover {
  color: #000 !important;
}

/* Enhanced Glass for Dark Mode Toggle on White Background */
#dark-mode-toggle .layer1,
#dark-mode-toggle .layer2 {
  border-radius: 20px;
}

body:not(.dark-mode) #dark-mode-toggle .layer1 {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.8;
}

body:not(.dark-mode) #dark-mode-toggle .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(0, 0, 0, 0.05),
    inset -3px 0px 10px 0 rgba(0, 0, 0, 0.05),
    inset 3px 2px 3px 0 rgba(0, 0, 0, 0.05),
    inset -1px -1px 3px 1px rgba(0, 0, 0, 0.1),
    inset -1px -5px 10px -1px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ====== Header Controls Refactoring ====== */

.top-controls-container {
  position: fixed;
  top: 40px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.top-left-controls {
  left: 40px;
}

.top-right-controls {
  right: 40px;
}

.header-glass-btn {
  color: var(--text-color);
  cursor: pointer;
  padding: 10px;
  border-radius: 20px;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px) saturate(180%) !important;
}

.header-glass-btn:hover {
  transform: scale(1.05);
}

.header-glass-btn .layer1 {
  position: absolute;
  inset: 0;
  filter: url(#glass-distortion);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  border-radius: 20px;
}

.header-glass-btn .layer2 {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  z-index: 0;
  pointer-events: none;
}

/* Light Mode specific shadows for Header Buttons */
body:not(.dark-mode) .header-glass-btn .layer1 {
  background: rgba(0, 0, 0, 0.02);
}

body:not(.dark-mode) .header-glass-btn .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(0, 0, 0, 0.05),
    inset -1px -1px 3px 1px rgba(0, 0, 0, 0.1);
}

/* Icons inside header buttons */
.header-glass-btn svg {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
}


.social-tray.is-over-dark svg {

  color: #000 !important;
}

/* ====== DARK MODE PREMIUM GLASS ====== */

html.dark-mode .header-glass-btn .layer1,
html.dark-mode .social-tray .layer1 {
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.9;
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
}

html.dark-mode .header-glass-btn .layer2,
html.dark-mode .social-tray .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.5),
    /* Cyan highlight */
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.2),
    /* Silver highlight */
    0 10px 40px rgba(0, 0, 0, 0.4);
}

html.dark-mode .header-glass-btn:hover .layer2 {
  box-shadow:
    inset 1px 1px 1px 0 rgba(192, 228, 233, 0.8),
    inset -2px -2px 5px 1px rgba(255, 255, 255, 0.4);
}

/* Tray position correction (since it's now Right-aligned) */
.top-right-controls .social-tray {
  right: calc(100% + 15px);
  left: auto;

  left: auto;
  right: 0;
  top: 50px;
}

/* Responsive Fix */
@media screen and (max-width: 768px) {
  .top-controls-container {
    top: 20px;
  }

  .top-left-controls {
    left: 20px;
  }

  .top-right-controls {
    right: 20px;
  }
}

/* ====== Perfected DARK MODE Premium Glass (Vibrant Refractions) ====== */

html.dark-mode .header-glass-btn .layer1,
html.dark-mode .social-tray .layer1 {
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.95;
  backdrop-filter: blur(25px) saturate(220%);
  -webkit-backdrop-filter: blur(25px) saturate(220%);
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  /* Edge definition */
}

html.dark-mode .header-glass-btn .layer2,
html.dark-mode .social-tray .layer2 {
  box-shadow:
    /* Vibrant Cyan Refractions */
    inset 2px 2px 4px 0 rgba(76, 226, 255, 0.6),
    inset 0px 0px 12px 0 rgba(76, 219, 255, 0.3),
    /* Silver/Chrome Edge highlights */
    inset -1px -1px 2px 1px rgba(255, 255, 255, 0.4),
    /* Volumetric depth */
    inset -8px -8px 20px -5px rgba(255, 255, 255, 0.1),
    /* Outer Glow/Definition */
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 1px 0.5px rgba(255, 255, 255, 0.2);
}

html.dark-mode .header-glass-btn:hover .layer2 {
  box-shadow:
    inset 2px 2px 8px 0 rgba(76, 226, 255, 0.9),
    inset -2px -2px 6px 1px rgba(255, 255, 255, 0.6),
    0 0 15px rgba(76, 219, 255, 0.2);
  /* Subtle glow on hover */
  transform: scale(1.02);
  transition: all 0.4s ease;
}

/* Ensure the icons look premium on dark glass */
html.dark-mode .header-glass-btn svg {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  color: #fff !important;
}

/* Adjusted tray icons: Default Black for White Hero Area */
.social-tray a {
  color: #000 !important;
  transition: all 0.3s ease;
}

/* Inheritance fix for <use> and complex SVGs */
.social-tray svg,
.social-tray svg *,
.social-tray use {
  fill: currentColor !important;
  color: inherit !important;
}

html.dark-mode .social-tray a:hover {
  color: #fff !important;
  transform: translateY(-2px) scale(1.1);
}

/* ====== Perfect Symmetry with Premium Buttons ====== */

.header-glass-btn {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.header-glass-btn .layer1 {
  opacity: 0.6;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}

.header-glass-btn .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3),
    inset -3px 0px 10px 0 rgba(192, 228, 233, 0.2),
    inset 3px 2px 3px 0 rgba(192, 228, 233, 0.2),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3),
    inset -1px -5px 10px -1px rgba(255, 255, 255, 0.2) !important;
}

/* Dark Mode Intensity Match */
html.dark-mode .header-glass-btn {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .header-glass-btn .layer1 {
  opacity: 0.8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .header-glass-btn:hover {
  border-color: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) scale(1.05);
}

/* Correct the Social Tray to match as well */
.social-tray {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
}

html.dark-mode .social-tray .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.4),
    inset -3px 0px 15px 0 rgba(192, 228, 233, 0.3),
    inset -1px -5px 12px -1px rgba(255, 255, 255, 0.3) !important;
}


/* ====== Dynamic Visibility & Premium Styling Rules (Final Unified Version) ====== */

/* 1. Default State: High-contrast Dark Icons (for light backgrounds) */
.header-glass-btn svg,
#social-toggle svg,
#dark-mode-toggle svg {
  color: #000 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Over-Dark State: Vibrant White Icons (Only when JS detects dark scroll or Dark Mode is ON) */
html.dark-mode #social-toggle.is-over-dark svg,
html.dark-mode #dark-mode-toggle.is-over-dark svg,
html.dark-mode .social-tray.is-over-dark a,
html.dark-mode .social-tray.is-over-dark svg {
  color: #fff !important;
  stroke: #fff !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}


/* 3. Handle SVG inheritance to ensure colors apply to paths/circles */
.header-glass-btn svg *,
#social-toggle svg *,
#dark-mode-toggle svg * {
  stroke: currentColor;
}

/* 4. Radius Enforcement (Ensuring consistent 20px premium rounded squares) */
#dark-mode-toggle,
#dark-mode-toggle .layer1,
#dark-mode-toggle .layer2,
#social-toggle,
#social-toggle .layer1,
#social-toggle .layer2,
.header-glass-btn,
.header-glass-btn .layer1,
.header-glass-btn .layer2 {
  border-radius: 20px !important;
}

/* Force Black for Toggles at the very top (Safety Override for Desktop Light Mode) */
#social-toggle:not(.is-over-dark) svg,
#social-toggle:not(.is-over-dark) svg *,
#dark-mode-toggle:not(.is-over-dark) svg,
#dark-mode-toggle:not(.is-over-dark) svg * {
  color: #000 !important;
  stroke: #000 !important;
}


/* ====== Comprehensive Mobile Adaptation for Header Controls ====== */
@media screen and (max-width: 768px) {

  /* 1. Spacing from edges */
  .top-left-controls {
    left: 15px !important;
    top: 15px !important;
  }

  .top-right-controls {
    right: 15px !important;
    top: 15px !important;
  }

  /* 2. Larger touch targets */
  .header-glass-btn {
    width: 48px !important;
    height: 48px !important;
  }

  .header-glass-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* 3. Social Tray Mobile Refinement */
  .social-tray {
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    padding: 12px 11px !important;
    gap: 20px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: translateY(10px) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    flex-direction: column;
  }

  .social-toggle-container.is-active .social-tray {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .social-tray a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .social-tray svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Force White Icons on Mobile Top (Hero), but Black on Scroll (Content) */
@media screen and (max-width: 768px) {

  /* 1. At the Top (Hero): White 
  #social-toggle:not(.is-over-dark) svg,
  #social-toggle:not(.is-over-dark) svg *,
  #dark-mode-toggle:not(.is-over-dark) svg,
  #dark-mode-toggle:not(.is-over-dark) svg *,
  .header-glass-btn:not(.is-over-dark) svg,
  .header-glass-btn:not(.is-over-dark) svg *,
  .social-tray:not(.is-over-dark) a,
  .social-tray:not(.is-over-dark) svg {
    color: #fff !important;
    stroke: #fff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
  }
  */
  
.wp-singular #social-toggle svg,
.wp-singular #dark-mode-toggle svg,
.wp-singular .header-glass-btn svg,
.wp-singular .social-tray a,
.wp-singular .social-tray svg {
  color: #000 !important;
  stroke: #000 !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
}

 .wp-singular #social-toggle.is-over-dark svg,
 .wp-singular #social-toggle.is-over-dark svg *,
 .wp-singular #dark-mode-toggle.is-over-dark svg,
 .wp-singular #dark-mode-toggle.is-over-dark svg *,
 .wp-singular .header-glass-btn.is-over-dark svg,
 .wp-singular .header-glass-btn.is-over-dark svg *,
 .wp-singular .social-tray.is-over-dark a,
 .wp-singular .social-tray.is-over-dark svg,
  .error404 #social-toggle.is-over-dark svg,
 .error404 #social-toggle.is-over-dark svg *,
 .error404 #dark-mode-toggle.is-over-dark svg,
 .error404r #dark-mode-toggle.is-over-dark svg *,
 .error404 .header-glass-btn.is-over-dark svg,
 .error404 .header-glass-btn.is-over-dark svg *,
 .error404 .social-tray.is-over-dark a,
 .error404 .social-tray.is-over-dark svg{
    color: #000 !important;
    stroke: #000 !important;
    filter: none !important;
  }
  html.dark-mode .error404 #social-toggle.is-over-dark svg,
 html.dark-mode .error404 #social-toggle.is-over-dark svg *,
 html.dark-mode .error404 #dark-mode-toggle.is-over-dark svg,
 html.dark-mode .error404 #dark-mode-toggle.is-over-dark svg *,
 html.dark-mode .error404 .header-glass-btn.is-over-dark svg,
 html.dark-mode .error404 .header-glass-btn.is-over-dark svg *,
html.dark-mode .error404 .social-tray.is-over-dark a,
 html.dark-mode .error404 .social-tray.is-over-dark svg{
    color: #fff !important;
    stroke: #fff !important;
    filter: none !important;
  }

 html.dark-mode .wp-singular #social-toggle svg,
 html.dark-mode .wp-singular #social-toggle svg *,
 html.dark-mode .wp-singular #dark-mode-toggle  svg,
 html.dark-mode .wp-singular #dark-mode-toggle svg *,
  html.dark-mode .wp-singular .header-glass-btn  svg,
 html.dark-mode .wp-singular .header-glass-btn svg *,
  html.dark-mode .wp-singular .social-tray a,
  html.dark-mode .wp-singular .social-tray svg {
    color: #fff !important;
    stroke: #fff !important;
    filter: none !important;
  }


  /* 2. On Scroll (Content): Black */
  #social-toggle.is-over-dark svg,
  #social-toggle.is-over-dark svg *,
  #dark-mode-toggle.is-over-dark svg,
  #dark-mode-toggle.is-over-dark svg *,
  .header-glass-btn.is-over-dark svg,
  .header-glass-btn.is-over-dark svg *,
  .social-tray.is-over-dark a,
  .social-tray.is-over-dark svg {
    color: #000 !important;
    stroke: #000 !important;
    filter: none !important;
  }


  html.dark-mode #social-toggle.is-over-dark svg,
  html.dark-mode #social-toggle.is-over-dark svg *,
  html.dark-mode #dark-mode-toggle.is-over-dark svg,
  html.dark-mode #dark-mode-toggle.is-over-dark svg *,
  html.dark-mode .header-glass-btn.is-over-dark svg,
  html.dark-mode .header-glass-btn.is-over-dark svg *,
  .social-tray.is-over-dark a,
  .social-tray.is-over-dark svg {
    color: #fff !important;
    stroke: #fff !important;
    filter: none !important;
  }
  
  html.dark-mode #social-toggle.is-over-dark.over-light svg,
   html.dark-mode #social-toggle.is-over-dark.over-light svg *,
    html.dark-mode #dark-mode-toggle.is-over-dark.over-light svg,
   html.dark-mode #dark-mode-toggle.is-over-dark.over-light svg *,
     .social-tray.is-over-dark.over-light a,
  .social-tray.is-over-dark.over-light svg{
        color: #000 !important;
    stroke: #000 !important;
    filter: none !important;
  }
  html.dark-mode #social-toggle.over-back svg,
  html.dark-mode #social-toggle.over-back svg *,
  html.dark-mode #dark-mode-toggle.over-back svg,
  html.dark-mode #dark-mode-toggle.over-back svg *,
  html.dark-mode .header-glass-btn.over-back svg,
  html.dark-mode .header-glass-btn.over-back svg *,
  .social-tray.is-over-dark a,
  .social-tray.is-over-dark svg {
    color: #fff !important;
    stroke: #fff !important;
    filter: none !important;
  }
  .fixed-controls-bar .lang-selected span,
  .fixed-controls-bar .lang-selected svg,
  .controls-bar .hamburger__line-in::after,
  .controls-bar .hamburger__line-in::before {
    color: #000 !important;
  }

  html.dark-mode .fixed-controls-bar .lang-selected span,
  html.dark-mode .fixed-controls-bar .lang-selected svg,
  html.dark-mode .controls-bar .hamburger__line-in::after,
  html.dark-mode .controls-bar .hamburger__line-in::before {
    color: #fff !important;
  }

  body.over-black-footer .fixed-controls-bar .hamburger__line-in::before,
  body.over-black-footer .fixed-controls-bar .hamburger__line-in::after {
    background-color: #000 !important;
  }

  .global-menu.is-opened {
    margin-left: 40px;

  }
}



.single.single-post .header-glass-btn:not(.is-over-dark) svg *,
.single.single-post .social-tray:not(.is-over-dark) a,
.single.single-post .social-tray:not(.is-over-dark) svg {
  stroke: #fff !important;
  color: #fff !important;
}
/*.single.single-post .header-glass-btn:not(.is-over-dark) svg,
.single.single-post #social-toggle:not(.is-over-dark) svg,
.single.single-post #social-toggle:not(.is-over-dark) svg *,
.single.single-post #dark-mode-toggle:not(.is-over-dark) svg,
.single.single-post #dark-mode-toggle:not(.is-over-dark) svg *,

*/

html.dark-mode .single.single-post #social-toggle:not(.is-over-dark) svg,
html.dark-mode .single.single-post #social-toggle:not(.is-over-dark) svg *,
html.dark-mode .single.single-post #dark-mode-toggle:not(.is-over-dark) svg,
html.dark-mode .single.single-post #dark-mode-toggle:not(.is-over-dark) svg *,
html.dark-mode .single.single-post .header-glass-btn:not(.is-over-dark) svg,
html.dark-mode .single.single-post .header-glass-btn:not(.is-over-dark) svg *,
html.dark-mode .single.single-post .social-tray:not(.is-over-dark) a,
html.dark-mode .single.single-post .social-tray:not(.is-over-dark) svg {
  stroke: #fff !important;
  color: #fff !important;
}

html.dark-mode .controls-light-mode .fixed-controls-bar .logo-dark {
  display: block !important;

}

html.dark-mode .controls-light-mode .fixed-controls-bar .logo-light {
  display: none !important;
}






/* Hero Scroll Arrow */
.main.main--demo-6 {
  position: relative;
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.hero-scroll-arrow {
  width: 50px;
  height: 50px;
  display: flex;
  position: absolute;
  bottom: var(--bottom) !important;
  right: 50%;
  transform: translateX(50%);
  /* For centering when using right: 50% */
  z-index: 1;
  color: #fff;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
  border-radius: 20px;
  text-decoration: none;
      background: transparent !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    justify-content: center;
    align-items: center;
}

.hero-scroll-arrow:hover {
  transform: translateX(-50%) scale(1.1);
  color: #c0191b;
  /* Theme Red */
}

.hero-scroll-arrow svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(50%) translateY(0);
  }

  40% {
    transform: translateX(50%) translateY(-10px);
  }

  60% {
    transform: translateX(50%) translateY(-5px);
  }
}

@media (max-width: 768px) {
  .hero-scroll-arrow {
    bottom: calc(100vh - 80vh) !important;
    color: #000;
  }

  .hero-scroll-arrow svg {
    width: 38px;
    height: 38px;
  }

  h1#typing-hero-text {
    font-size: 56px;
  }

  .blog-btn {
    width: 70% !important;
  }

  body.over-red-section .fixed-controls-bar .hamburger__line-in::before,
  body.over-red-section .fixed-controls-bar .hamburger__line-in::after {
    background-color: #000 !important;
  }
}






.works-navigation .swiper-button-prev,
.works-navigation .swiper-button-next {
  position: relative;
  margin: 0;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  overflow: hidden;
  z-index: 10;
}

.works-navigation .premium-glass-nav .layer1 {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  opacity: 0.6;
  z-index: -2;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.works-navigation .premium-glass-nav .layer2 {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.3),
    inset -3px 0px 10px 0 rgba(192, 228, 233, 0.2),
    inset 3px 2px 3px 0 rgba(192, 228, 233, 0.2),
    inset -1px -1px 3px 1px rgba(255, 255, 255, 0.3),
    inset -1px -5px 10px -1px rgba(255, 255, 255, 0.2);
  z-index: -1;
  transition: all 0.3s ease;
  pointer-events: none;
}

.works-navigation .premium-glass-nav:hover .layer1 {
  opacity: 0.9;
}

.works-navigation .premium-glass-nav:hover .layer2 {
  box-shadow:
    inset 1px 1px 0px 0 rgba(192, 228, 233, 0.6),
    inset -3px 0px 12px 0 rgba(192, 228, 233, 0.5),
    inset 4px 3px 4px 0 rgba(192, 228, 233, 0.5),
    inset -1px -2px 4px 1px rgba(255, 255, 255, 0.5),
    inset -2px -7px 12px -1px rgba(255, 255, 255, 0.5);
}

.works-navigation .swiper-button-next {
  transform: rotate(0deg);
}

body.rtl .works-navigation .swiper-button-next {
  transform: rotate(180deg);
}

.works-navigation svg {
  display: block;
  height: auto;
  position: relative;
  z-index: 2;
}

.works-navigation .swiper-button-prev:hover,
.works-navigation .swiper-button-next:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.over-red-section .fixed-controls-bar .lang-list li a,
.over-black-footer .fixed-controls-bar .lang-list li a{
    color: #fff !important;
    background: transparent !important;
    font-size: 23px;
    padding: 0;
}

.services{
    border:none !important;
}
@media  (max-width: 480px) {
  
  /* CSS */
  

.over-red-section .fixed-controls-bar .lang-list li a{
    color: #000 !important;
    background: transparent !important;
    font-size: 18px;
    padding: 0;
}
.fixed-controls-bar .lang-selected{
    padding: 6px 0;
}
.fixed-controls-bar .lang-list li a {
    color: #000 !important;
    background: transparent !important;
    font-size: 22px;
    
    font-weight: 500;
    padding: 0;
}
.over-black-footer .fixed-controls-bar .lang-list li a{
    font-size: 22px !important;
}
.contact-details{
        grid-template-columns: 1fr !important;
}
    .services{
        padding-top: 40px !important ;
    }
    .category-section{
        padding: 40px 0 !important;
    }
    .hamburger.hamburger--demo-6 .hamburger__line--01{
        top: 11px !important;
    }
    .hamburger.hamburger--demo-6 .hamburger__line--03{
    top: 25px !important;
}
.hamburger.hamburger--demo-6 .hamburger__line--02, .hamburger.hamburger--demo-6 .hamburger__line--cross01, .hamburger.hamburger--demo-6 .hamburger__line--cross02
 {
    top: 18px !important;
}
.page-template-page-contact .site-header{
    display: none;
}
body{
        background-size: cover !important;
}
.contact-grid{
    margin-top: 100px;
}

.language-switcher.is-open {
    width: 40px;
}
}

#social-toggle.header-glass-btn.over-black svg,
#social-toggle.header-glass-btn.over-black svg *,
#dark-mode-toggle.header-glass-btn.over-black svg,
#dark-mode-toggle.header-glass-btn.over-black svg *{
    
    color: #ffffff !important;
        stroke: #ffffff !important;
        filter: none !important;
}
html.dark-mode .controls-light-mode .lang-selected svg{
    color: #000 !important;
}
  .work-header{
    text-align: left;
    margin-bottom: 60px;
    background: none !important;
    backdrop-filter: none !important;
}
.cta-button-wrap .mono-glass-btn-premium {
        display: flex !important;
}
  
      html.dark-mode .controls-light-mode .fixed-controls-bar .lang-selected span{
          color: #000 !important;
      }
      
          html.dark-mode .wp-singular #social-toggle svg, html.dark-mode .wp-singular #social-toggle svg *, html.dark-mode .wp-singular #dark-mode-toggle svg, html.dark-mode .wp-singular #dark-mode-toggle svg *, html.dark-mode .wp-singular .header-glass-btn svg, html.dark-mode .wp-singular .header-glass-btn svg *, html.dark-mode .wp-singular .social-tray a, html.dark-mode .wp-singular .social-tray svg
 {
        color: #fff !important;
        stroke: #fff !important;
        filter: none !important;
    }
    
    .page-template-page-consulting .site-header{
        display: none;
    }
    .contact-hero{
            backdrop-filter: blur(10px) !important; 
    }