/* ===================================
   SOBRANDY - MAIN STYLESHEET
   CSS Variables & Reset
   =================================== */

:root {
   --color-primary: #0A192F;
   --color-secondary: #E5D4C0;
   --color-accent: #C5A059;
   --color-bg: #FAF9F6;
   --color-text: #333333;
   --color-text-light: #555555;
   --color-text-lighter: #666666;
   --color-border: #e0e0e0;
   --color-white: #ffffff;

   --font-body: 'Inter', sans-serif;

   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 20px;
   --radius-xl: 60px;

   --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.2);

   --spacing-xs: 8px;
   --spacing-sm: 16px;
   --spacing-md: 24px;
   --spacing-lg: 40px;
   --spacing-xl: 60px;

   --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

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

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
}

body {
   font-family: var(--font-body);
   background-color: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
   overflow-x: hidden;
}

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

/* Sabit boyutlu kapsayıcılardaki görseller için global kural:
   Kare yüklenen görseller, dikdörtgen alanlarda oranını koruyarak kırpılır */
img[src]:not(.logo-img):not(.loader-logo):not(.footer-logo) {
   object-fit: cover;
   object-position: center;
}

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

ul {
   list-style: none;
}

/* ===================================
   BUTTON SYSTEM - Global Components
   =================================== */

.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: var(--spacing-sm) 32px;
   border-radius: var(--radius-xl);
   font-weight: 600;
   font-size: 16px;
   transition: var(--transition);
   text-decoration: none;
   cursor: pointer;
   border: none;
   width: max-content;
}

.btn-primary {
   background: var(--color-primary);
   color: var(--color-white);
}

.btn-secondary {
   background: var(--color-white);
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
}

.btn-outline {
   background: transparent;
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
   padding: 14px 28px;
}

.btn-cta {
   background: var(--color-accent);
   color: var(--color-white);
   padding: 14px 28px;
}

.btn-sm {
   padding: 10px 25px;
   font-size: 14px;
}

.btn-lg {
   padding: 18px 40px;
   font-size: 18px;
}

@media only screen and (min-width: 991px) {
   .btn-primary:hover {
      background: #0d2847;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(10, 25, 47, 0.3);
   }

   .btn-secondary:hover {
      background: var(--color-primary);
      color: var(--color-white);
      transform: translateY(-2px);
   }

   .btn-outline:hover {
      background: var(--color-primary);
      color: var(--color-white);
      transform: translateY(-2px);
   }

   .btn-cta:hover {
      background: #b8934d;
      transform: translateY(-2px);
   }
}

@media only screen and (max-width: 991px) {
   .btn-cta {
      padding: 12px 20px;
      font-size: 14px;
   }
}


/* ===================================
   CARD SYSTEM - Global Components
   =================================== */

.card {
   background: var(--color-white);
   border-radius: var(--radius-md);
   overflow: hidden;
   transition: var(--transition);
}

.card-image {
   position: relative;
   display: block;
   height: 400px;
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
}

.card-image:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
}

.card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}

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

.card-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(10, 25, 47, 0.95), rgba(10, 25, 47, 0.7) 70%, transparent);
   padding: var(--spacing-lg) 30px;
   color: var(--color-white);
   transition: var(--transition);
}

.card-image:hover .card-overlay {
   background: linear-gradient(to top, rgba(10, 25, 47, 0.98), rgba(10, 25, 47, 0.85) 70%, transparent);
}

.card-overlay h3 {
   font-size: 24px;
   margin-bottom: 12px;
   line-height: 1.3;
   color: var(--color-white);
}

.card-overlay p {
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
   margin: 0;
}

.card-badge {
   display: inline-block;
   background: var(--color-accent);
   color: var(--color-white);
   padding: 6px var(--spacing-sm);
   border-radius: var(--radius-lg);
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 15px;
   letter-spacing: 0.5px;
}

.card-sm {
   height: 320px;
}

.card-md {
   height: 400px;
}

.card-lg {
   height: 480px;
}

.card-info {
   background: var(--color-white);
   padding: 30px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
}

.card-info:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

/* ===================================
   CONTAINER & PRELOADER
   =================================== */

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 15px;
}

.preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--color-primary);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.preloader .loader-logo {
   max-width: 330px;
   height: auto;
   animation: pulseText 2s infinite;
}

@keyframes pulseText {
   0% {
      opacity: 0.5;
      transform: scale(0.95);
   }

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

   100% {
      opacity: 0.5;
      transform: scale(0.95);
   }
}

@media only screen and (max-width: 575px) {
   .preloader .loader-logo {
      max-width: 200px;
   }
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(8px);
   z-index: 998;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.overlay.active {
   opacity: 1;
   visibility: visible;
}

header {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   transition: all 0.4s ease;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header.scrolled {
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

header .navbar {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 15px;
   transition: padding 0.4s ease;
}

header.scrolled .navbar .logo::before {
   width: 100%;
}

header .navbar .logo {
   position: relative;
   display: flex;
   align-items: center;
   overflow: hidden;
}

header .navbar .logo .logo-img {
   width: 210px;
   display: block;
   transition: var(--transition);
}

header .navbar .logo::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-image: url('../images/sobrandy-dark.png');
   background-size: 210px;
   background-repeat: no-repeat;
   background-position: left center;
   transition: width 0.5s ease;
   z-index: 1;
}

header .navbar .nav-container {
   display: flex;
   align-items: center;
}

header .navbar .nav-container .mobile-contact-section {
   display: none;
}

header .navbar .nav-container .nav-links {
   display: flex;
   gap: 40px;
   align-items: center;
   height: 100%;
}

header .navbar .nav-container .nav-links .nav-link {
   font-weight: 500;
   color: #fff;
   position: relative;
   font-size: 15px;
   padding: 10px 0;
   cursor: pointer;
   transition: color 0.3s;
}

header.scrolled .navbar .nav-container .nav-links .nav-link {
   color: var(--color-primary);
}

header .navbar .nav-container .nav-links .nav-link::before {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 5px;
   left: 50%;
   transform: translateX(-50%);
   background-color: var(--color-accent);
   transition: var(--transition);
   opacity: 0;
   box-shadow: 0 0 0 transparent;
}

header .navbar .nav-container .nav-links .nav-link.active::before {
   width: 100%;
   opacity: 1;
   box-shadow: 0 0 15px var(--color-accent), 0 0 30px rgba(212, 175, 55, 0.4);
}

header .navbar .nav-container .nav-links .nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 5px;
   left: 0;
   background-color: var(--color-accent);
   transition: var(--transition);
}

header .navbar .nav-container .nav-links .nav-link.active::after {
   width: 100%;
}

header .navbar .nav-container .nav-links .nav-link:not(.active):hover::after {
   width: 100%;
}

header .navbar .nav-container .nav-links .dropdown-wrapper {
   position: relative;
}

header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-icon {
   font-size: 11px;
   position: relative;
   top: -1px;
}

header .navbar .nav-container .nav-links .dropdown-wrapper::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   height: 20px;
   background: transparent;
}

header .navbar .mobile-menu-btn {
   display: none;
   cursor: pointer;
   width: 35px;
   height: 35px;
   position: absolute;
   right: 15px;
   top: 13px;
}

header .navbar .mobile-menu-btn span,
header .navbar .mobile-menu-btn::before,
header .navbar .mobile-menu-btn::after {
   content: '';
   display: block;
   width: 27px;
   height: 1px;
   background: #fff;
   transition: all 0.3s ease;
   position: absolute;
   left: 3px;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

header .navbar .mobile-menu-btn span {
   top: 17px;
}

header .navbar .mobile-menu-btn::before {
   top: 8px;
}

header .navbar .mobile-menu-btn::after {
   top: 26px;
}

header .navbar .mobile-menu-btn.active span {
   opacity: 0;
}

header .navbar .mobile-menu-btn.active::before {
   top: 17px;
   transform: rotate(45deg);
   transform-origin: center;
}

header .navbar .mobile-menu-btn.active::after {
   top: 17px;
   transform: rotate(-45deg);
   transform-origin: center;
}

header.scrolled .navbar .mobile-menu-btn span,
header.scrolled .navbar .mobile-menu-btn::before,
header.scrolled .navbar .mobile-menu-btn::after {
   background: var(--color-primary);
}


@media only screen and (min-width: 991px) {
   header.scrolled .navbar {
      padding: 13px 15px;
   }

   /* Dropdown Menu Styles */
   header .navbar .nav-container .nav-links .dropdown-wrapper:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: calc(100% + 20px);
      left: -20px;
      min-width: 200px;
      background: #fff;
      padding: 10px 0;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out;
      border-top: 3px solid var(--color-accent);
      z-index: 1100;
      transform: translateY(-10px);
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu li {
      margin: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu li a {
      display: block;
      padding: 10px 20px;
      color: #555;
      font-size: 14px;
      transition: all 0.2s;
      white-space: nowrap;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu li a:hover {
      background: #f8f8f8;
      color: var(--color-accent);
      padding-left: 25px;
   }

   /* Mega Menu Styles */
   header .navbar .nav-container .nav-links .dropdown-wrapper:hover .mega-menu,
   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu:hover {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(40px);
   }

   header.scrolled .navbar .nav-container .nav-links .dropdown-wrapper:hover .mega-menu,
   header.scrolled .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu:hover {
      transform: translateX(-50%) translateY(25px);
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu {
      opacity: 0;
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 1100px;
      background: #fff;
      padding: 25px 32px;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out;
      border-top: 3px solid var(--color-accent);
      z-index: 1100;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column h4 {
      font-family: var(--font-body);
      color: var(--color-accent);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 16px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column h4.menu-column-spacing {
      margin-top: 32px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li {
      margin-bottom: 10px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a {
      font-size: 14px;
      color: #555;
      transition: 0.2s;
      display: flex;
      align-items: center;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a:hover {
      color: var(--color-primary);
      padding-left: 5px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a i {
      margin-right: 8px;
      font-size: 0.7rem;
      color: #ddd;
      transition: 0.2s;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a:hover i {
      color: var(--color-accent);
   }
}

@media (max-width: 1199px) {
   header .navbar .nav-container .nav-links {
      gap: 20px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu {
      width: 650px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
   }
}

@media (max-width: 991px) {
   header .navbar {
      padding: 20px;
   }

   header .navbar .mobile-menu-btn {
      display: flex;
   }

   header .navbar .nav-container {
      position: fixed;
      top: 80px;
      right: -150%;
      width: 300px;
      max-width: 85%;
      height: calc(100vh - 95px);
      background: #fff;
      box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
      z-index: 999;
      border-radius: 10px;
      transition: all 0.3s ease;
      flex-direction: column;
   }

   header .navbar .nav-container.active {
      right: 10px;
   }

   header .navbar .nav-container .nav-links {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      overflow-y: auto;
      gap: 0;
      width: 100%;
      flex: auto;
      padding: 5px 12px 12px;
   }

   header .navbar .nav-container .nav-links li:has(.btn-cta) {
      display: none;
   }

   header .navbar .nav-container .nav-links .nav-link {
      color: var(--color-primary);
      padding: 13px 10px;
      display: block;
      width: 100%;
      font-size: 14px;
      transition: all 0.3s ease;
   }

   header .navbar .nav-container .nav-links .nav-link::before,
   header .navbar .nav-container .nav-links .nav-link::after {
      display: none;
   }

   header .navbar .nav-container .nav-links .nav-link.active {
      color: var(--color-accent);
   }

   /* Dropdown wrapper mobile */
   header .navbar .nav-container .nav-links .dropdown-wrapper {
      position: relative;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper>.nav-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-icon {
      font-size: 12px;
      transition: transform 0.3s ease;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper.active .dropdown-icon {
      transform: rotate(180deg);
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper::after {
      display: none;
   }

   /* Simple Dropdown menu mobile */
   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu {
      position: static;
      width: 100%;
      transform: none;
      display: none;
      box-shadow: none;
      background: #f0f0f0;
      border-top: none;
      padding: 0;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper.active .dropdown-menu {
      display: block;
      padding: 10px 14px;
      animation: slideDown 0.3s ease;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu li {
      margin: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .dropdown-menu li a {
      padding: 10px 0;
      font-size: 13px;
      color: #666;
      display: block;
   }

   /* Mega menu mobile */
   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu {
      position: static;
      width: 100%;
      transform: none;
      display: none;
      box-shadow: none;
      background: #f0f0f0;
      border-top: none;
      padding: 0;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper.active .mega-menu {
      display: block;
      padding: 14px;
      animation: slideDown 0.3s ease;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area {
      grid-template-columns: 1fr;
      gap: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column {
      margin-bottom: 13px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column:last-child {
      margin: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column h4 {
      margin-bottom: 8px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column h4 a {
      color: #3f3f3f;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column h4 i {
      font-size: 14px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul {
      display: flex;
      flex-direction: column;
      margin-bottom: 17px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column:last-child ul {
      margin-bottom: 0;
      border-bottom: 0;
      padding-bottom: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li {
      margin-bottom: 0;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a {
      padding: 9px 0;
      font-size: 13px;
      color: #666;
      display: block;
   }

   header .navbar .nav-container .nav-links .dropdown-wrapper .mega-menu .menu-links-area .menu-column ul li a i {
      display: none;
   }

   /* Mobile contact section */
   header .navbar .nav-container .mobile-contact-section {
      display: block;
      border-top: 1px solid #f0f0f0;
      margin-top: auto;
      width: 100%;
   }

   header .navbar .nav-container .mobile-contact-header {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--color-primary);
      font-weight: 600;
      font-size: 14px;
      border-bottom: 1px solid #f0f0f0;
      padding: 12px 21px;
   }

   header .navbar .nav-container .mobile-contact-header i {
      color: var(--color-accent);
      font-size: 16px;
   }

   header .navbar .nav-container .mobile-contact-buttons {
      display: flex;
   }

   header .navbar .nav-container .mobile-contact-buttons .mobile-contact-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 45px;
      border-right: 1px solid #f0f0f0;
   }

   header .navbar .nav-container .mobile-contact-buttons .mobile-contact-btn:last-child {
      border-right: none;
   }

   header .navbar .nav-container .mobile-contact-buttons .mobile-contact-btn i {
      font-size: 16px;
      color: var(--color-accent);
   }

   header .navbar .nav-container .mobile-contact-buttons .mobile-contact-btn:hover {
      background: linear-gradient(135deg, var(--color-accent), #d4af37);
      color: #fff;
      border-color: var(--color-accent);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
   }

   header .navbar .nav-container .mobile-contact-buttons .mobile-contact-btn span {
      font-weight: 500;
      line-height: 1.2;
   }

   header .navbar .logo {
      color: var(--color-primary);
   }

   header .navbar .mobile-menu-btn {
      color: var(--color-primary);
   }
}



/* ===================================
   HOME SECTIONS
   =================================== */

/* Hero Slider */
.home-slider {
   position: relative;
   height: 100vh;
   overflow: hidden;
   background-color: var(--color-primary);
}

.home-slider .heroSwiper {
   width: 100%;
   height: 100%;
}

.home-slider .swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;
   position: relative;
}

.home-slider .swiper-slide .hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 120%;
   height: 120%;
   background: url('../images/hero-background.jpg') center/cover no-repeat;
   animation: zoomEffect 20s infinite alternate;
   z-index: -2;
}

.home-slider .swiper-slide .hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 120%;
   height: 120%;
   background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.6) 100%);
   z-index: -1;
}

@keyframes zoomEffect {
   0% {
      transform: scale(1);
   }

   100% {
      transform: scale(1.15);
   }
}

.home-slider .hero-content {
   max-width: 900px;
   padding: 0 50px;
   animation: fadeUp 1.2s ease-out;
   position: relative;
   z-index: 1;
}

.home-slider .hero-content h1 {
   font-size: 64px;
   margin-bottom: 24px;
   line-height: 1.1;
   letter-spacing: -1px;
   text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.home-slider .hero-content p {
   font-size: 21px;
   margin-bottom: 40px;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 300;
}

.home-slider .swiper-button-prev,
.home-slider .swiper-button-next {
   background: none;
   border: none;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease;
}

.home-slider .swiper-button-prev:after,
.home-slider .swiper-button-next:after {
   font-size: 24px;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 300;
}

.home-slider .swiper-button-prev:hover:after,
.home-slider .swiper-button-next:hover:after {
   color: rgba(255, 255, 255, 1);
}

.home-slider .swiper-pagination {
   bottom: 40px !important;
}

.home-slider .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: rgba(255, 255, 255, 0.4);
   opacity: 1;
   transition: all 0.3s ease;
}

.home-slider .swiper-pagination-bullet-active {
   background: #fff;
   width: 40px;
   border-radius: 6px;
}

@media only screen and (max-width: 991px) {
   .home-slider {
      height: auto;
   }

   .home-slider .swiper-slide {
      padding-top: 150px;
      padding-bottom: 170px;
   }

   .home-slider .swiper-pagination {
      bottom: 20px !important;
   }

   .home-slider .hero-content h1 {
      font-size: 40px;
   }

   .home-slider .swiper-button-prev,
   .home-slider .swiper-button-next {
      width: 40px;
      height: 40px;
   }

   .home-slider .swiper-button-prev:after,
   .home-slider .swiper-button-next:after {
      font-size: 16px;
   }
}


@media only screen and (max-width: 768px) {
   .home-slider .hero-content h1 {
      font-size: 32px;
   }

   .home-slider .hero-content p {
      font-size: 16px;
      margin-bottom: 30px;
   }

   .home-slider .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
   }

   .home-slider .swiper-pagination-bullet-active {
      width: 25px;
   }

   .home-slider .hero-content {
      padding: 0 15px;
   }

   .home-slider .swiper-button-prev,
   .home-slider .swiper-button-next {
      display: none !important;
   }
}

/* About */
.home-about {
   padding: 96px 0;
}

.home-about .about-content {
   display: flex;
   gap: 64px;
   align-items: center;
}

.home-about .about-img {
   flex: none;
   width: 100%;
   max-width: 400px;
}

.home-about .about-img img {
   width: 100%;
   border-radius: 20px;
   box-shadow: 20px 20px 0 var(--color-secondary);
}

.home-about .about-text h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 24px;
   line-height: normal;
}

.home-about .about-text p {
   margin-bottom: 16px;
   color: #555;
}

.home-about .about-text .about-story-link {
   color: var(--color-primary);
   font-weight: 600;
   border-bottom: 2px solid var(--color-accent);
}

@media only screen and (max-width: 991px) {
   .home-about {
      padding: 50px 0;
   }

   .home-about .about-img {
      max-width: 300px;
   }

   .home-about .about-text h2 {
      font-size: 26px;
      line-height: 34px;
      margin-bottom: 20px;
   }

}

@media only screen and (max-width: 768px) {
   .home-about {
      padding: 35px 0 45px;
   }

   .home-about .about-img {
      display: none;
   }

   .home-about .about-text {
      text-align: center;
   }
}



/* Stats */
.home-stats {
   padding: 64px 0;
   background-color: var(--color-secondary);
   color: var(--color-primary);
}

.home-stats .stats-content {
   display: flex;
   justify-content: space-around;
   text-align: center;
   flex-wrap: wrap;
   gap: 32px;
}

.home-stats .stats-content .stat-item h3 {
   font-size: 56px;
   font-weight: 700;
   margin-bottom: 8px;
   color: var(--color-primary);
}

.home-stats .stats-content .stat-item p {
   font-weight: 600;
   text-transform: uppercase;
   font-size: 14px;
}

@media only screen and (max-width: 991px) {
   .home-stats {
      padding: 25px 0 35px;
   }

   .home-stats .stats-content .stat-item h3 {
      font-size: 30px;
   }

   .home-stats .stats-content .stat-item p {
      font-size: 12px;
   }

}


/* Logo Slider */
.logo-slider-area {
   padding: 32px 0;
   background: #fff;
   border-bottom: 1px solid #eee;
   overflow: hidden;
   position: relative;
}

.logo-slider-area .logoSwiper {
   width: 100%;
   padding: 10px 0;
   max-width: 1200px;
}

.logo-slider-area .logoSwiper::before,
.logo-slider-area .logoSwiper::after {
   content: '';
   position: absolute;
   top: 0;
   width: 150px;
   height: 100%;
   z-index: 2;
   pointer-events: none;
}

.logo-slider-area .logoSwiper::before {
   left: 0;
   background: linear-gradient(to right, #fff, transparent);
}

.logo-slider-area .logoSwiper::after {
   right: 0;
   background: linear-gradient(to left, #fff, transparent);
}

.logo-slider-area .logoSwiper .swiper-wrapper {
   transition-timing-function: linear;
}

.logo-slider-area .logoSwiper .swiper-slide {
   width: auto;
   display: flex;
   justify-content: center;
   align-items: center;
}

.logo-slider-area .logoSwiper .swiper-slide img {
   height: 35px;
   max-width: 80px;
   opacity: 0.5;
   filter: grayscale(100%);
   transition: 0.3s;
   cursor: pointer;
}

@media only screen and (min-width: 991px) {
   .logo-slider-area .logoSwiper .swiper-slide img:hover {
      filter: grayscale(0%);
      opacity: 1;
      transform: scale(1.1);
   }
}

@media only screen and (max-width: 768px) {
   .logo-slider-area {
      padding: 13px 0;
   }
}

/* Services */
.home-services {
   background-color: #fff;
   padding: 96px 0;
}

.home-services .services-content .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 48px;
   position: relative;
}

.home-services .services-content .section-header .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-services .services-content .section-header h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 16px;
   position: relative;
}

.home-services .services-content .section-header h2::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-accent);
   margin: 16px auto 0;
   border-radius: 2px;
   opacity: 0.7;
}

.home-services .services-content .section-header p {
   color: #555;
}

.home-services .services-content .bento-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
}

.home-services .services-content .bento-grid .service-card {
   background: var(--color-bg);
   padding: 40px;
   border-radius: 16px;
   border: 1px solid rgba(0, 0, 0, 0.03);
   transition: var(--transition);
   cursor: pointer;
}

.home-services .services-content .bento-grid .service-card .service-icon {
   font-size: 32px;
   color: var(--color-primary);
   margin-bottom: 24px;
   transition: var(--transition);
}

.home-services .services-content .bento-grid .service-card h3 {
   font-size: 24px;
   margin-bottom: 16px;
   color: var(--color-primary);
   transition: var(--transition);
}

.home-services .services-content .bento-grid .service-card p {
   color: var(--color-text);
}

@media only screen and (min-width: 991px) {
   .home-services .services-content .bento-grid .service-card:hover {
      transform: translateY(-10px);
      background: var(--color-primary);
      color: #fff !important;
   }

   .home-services .services-content .bento-grid .service-card:hover .service-icon {
      color: var(--color-accent);
   }

   .home-services .services-content .bento-grid .service-card:hover h3 {
      color: #fff;
   }

   .home-services .services-content .bento-grid .service-card:hover p {
      color: rgba(255, 255, 255, 0.8);
   }
}

@media only screen and (max-width: 991px) {
   .home-services {
      padding: 50px 0;
   }

   .home-services .services-content .section-header h2 {
      font-size: 26px;
      line-height: 36px;
   }
}

@media only screen and (max-width: 768px) {
   .home-services {
      padding: 35px 0;
   }

   .home-services .services-content .bento-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .home-services .services-content .bento-grid .service-card {
      padding: 20px;
      text-align: center;
   }

   .home-services .services-content .bento-grid .service-card .service-icon {
      font-size: 22px;
      margin-bottom: 14px;
   }

   .home-services .services-content .bento-grid .service-card h3 {
      font-size: 20px;
      margin-bottom: 5px;
   }

   .home-services .services-content .section-header {
      margin-bottom: 25px;
   }
}



/* Why Us */
.home-why-us {
   padding: 80px 0;
   background-color: var(--color-primary);
   color: #fff;
   text-align: center;
}

.home-why-us .why-us-content .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 48px;
   position: relative;
}

.home-why-us .why-us-content .section-header.why-us-header {
   color: #fff;
}

.home-why-us .why-us-content .section-header .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-why-us .why-us-content .section-header h2 {
   font-size: 40px;
   color: #fff;
   margin-bottom: 16px;
   position: relative;
}

.home-why-us .why-us-content .section-header h2::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-accent);
   margin: 16px auto 0;
   border-radius: 2px;
   opacity: 0.7;
}

.home-why-us .why-us-content .section-header p {
   color: rgba(255, 255, 255, 0.8);
}

.home-why-us .why-us-content .features-grid {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   gap: 32px;
}

.home-why-us .why-us-content .features-grid .feature-item {
   flex: 1;
   min-width: 250px;
}

.home-why-us .why-us-content .features-grid .feature-item .feature-icon-box {
   width: 80px;
   height: 80px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 24px;
   font-size: 32px;
   color: var(--color-accent);
}

.home-why-us .why-us-content .features-grid .feature-item p {
   color: rgba(255, 255, 255, 0.9);
}

@media only screen and (max-width: 991px) {
   .home-why-us {
      padding: 50px 0;
   }

   .home-why-us .why-us-content .section-header h2 {
      font-size: 26px;
      line-height: 36px;
   }
}

@media only screen and (max-width: 768px) {
   .home-why-us {
      padding: 35px 0;
   }

   .home-why-us .why-us-content .section-header {
      margin-bottom: 35px;
   }
}


/* Portfolio */
.home-portfolio {
   padding: 96px 0;
   background-color: #fff;
}

.home-portfolio .portfolio-content .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 48px;
   position: relative;
}

.home-portfolio .portfolio-content .section-header .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-portfolio .portfolio-content .section-header h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 16px;
   position: relative;
}

.home-portfolio .portfolio-content .section-header h2::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-accent);
   margin: 16px auto 0;
   border-radius: 2px;
   opacity: 0.7;
}

.home-portfolio .portfolio-content .section-header p {
   color: #555;
}

.home-portfolio .portfolio-content .portfolio-slider {}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item {
   display: block;
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   height: 350px;
   cursor: pointer;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
   object-position: top;
}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item:hover img {
   transform: scale(1.1);
}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item .portfolio-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(10, 25, 47, 0.95), transparent);
   padding: 50px 20px 20px;
   color: #fff;
   transition: all 0.3s ease;
}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item .portfolio-overlay h3 {
   font-size: 18px;
   margin-bottom: 5px;
}

.home-portfolio .portfolio-content .portfolio-slider .portfolio-item .portfolio-overlay p {
   font-size: 14px;
   color: var(--color-accent);
   text-transform: uppercase;
   font-weight: 600;
}

.home-portfolio .portfolio-content .view-all-link {
   text-align: center;
   margin-top: 10px;
}

.home-portfolio .swiper {
   width: 100%;
   padding-bottom: 40px !important;
   padding-top: 5px;
   position: relative;
   z-index: 2;
}

.home-portfolio .swiper-button-prev,
.home-portfolio .swiper-button-next {
   background: none;
   border: none;
   width: 50px;
   height: 50px;
   transition: all 0.3s ease;
}

.home-portfolio .swiper-button-prev:after,
.home-portfolio .swiper-button-next:after {
   font-size: 24px;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 300;
}

.home-portfolio .swiper-button-prev:hover:after,
.home-portfolio .swiper-button-next:hover:after {
   color: rgba(255, 255, 255, 1);
}

.home-portfolio .swiper .swiper-pagination {
   position: relative;
   bottom: -30px;
}

.home-portfolio .swiper .swiper-pagination .swiper-pagination-bullet {
   width: 12px !important;
   height: 12px !important;
   background: #ccc;
   opacity: 0.6;
   margin: 0 8px !important;
   transition: all 0.3s;
}

.home-portfolio .swiper .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--color-accent) !important;
   opacity: 1;
   transform: scale(1.2);
}


@media only screen and (max-width: 991px) {
   .home-portfolio {
      padding: 50px 0;
   }

   .home-portfolio .portfolio-content .section-header h2 {
      font-size: 26px;
      line-height: 36px;
   }
}

@media only screen and (max-width: 768px) {
   .home-portfolio {
      padding: 35px 0;
   }

   .home-portfolio .portfolio-content .section-header {
      margin-bottom: 25px;
   }

   .home-portfolio .portfolio-content .section-header h2 {
      font-size: 25px;
      line-height: 30px;
   }
}


/* Testimonials */
.home-testimonials {
   padding: 96px 0 64px;
   background: linear-gradient(to right, #f8f9fa, #e9ecef);
   position: relative;
   overflow: hidden;
}

.home-testimonials::before {
   content: 'SoBrandy.';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   font-size: 160px;
   font-weight: 700;
   color: var(--color-primary);
   opacity: 0.02;
   white-space: nowrap;
   z-index: 0;
   pointer-events: none;
   bottom: -90px;
   line-height: normal;
}

.home-testimonials .testimonials-content .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 48px;
   position: relative;
   z-index: 2;
}

.home-testimonials .testimonials-content .section-header .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-testimonials .testimonials-content .section-header h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 16px;
   position: relative;
}

.home-testimonials .testimonials-content .section-header h2::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-accent);
   margin: 16px auto 0;
   border-radius: 2px;
   opacity: 0.7;
}

.home-testimonials .testimonials-content .section-header p {
   color: #555;
}

.home-testimonials .testimonials-content .swiper {
   width: 100%;
   padding-bottom: 70px !important;
   padding-top: 5px;
   position: relative;
   z-index: 2;
}

.home-testimonials .testimonials-content .swiper .swiper-slide {
   height: auto;
}

.home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card {
   height: 100%;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   padding: 25px;
   border-radius: 24px;
   transition: transform 0.3s, border-color 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card .quote-icon {
   font-size: 40px;
   color: var(--color-accent);
   margin-bottom: 24px;
   opacity: 0.5;
}

.home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card .client-info {
   display: flex;
   align-items: center;
   margin-top: 32px;
}

.home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card .client-info .client-avatar {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #ddd;
   margin-right: 16px;
   object-fit: cover;
   border: 2px solid #fff;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.home-testimonials .testimonials-content .swiper .swiper-pagination {
   position: absolute !important;
   bottom: 0 !important;
   width: 100% !important;
}

.home-testimonials .testimonials-content .swiper .swiper-pagination .swiper-pagination-bullet {
   width: 12px !important;
   height: 12px !important;
   background: #ccc;
   opacity: 0.6;
   margin: 0 8px !important;
   transition: all 0.3s;
}

.home-testimonials .testimonials-content .swiper .swiper-pagination .swiper-pagination-bullet-active {
   background-color: var(--color-accent) !important;
   opacity: 1;
   transform: scale(1.2);
}

@media only screen and (min-width: 991px) {
   .home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card:hover {
      border-color: var(--color-accent);
      transform: translateY(-5px);
   }
}

@media only screen and (max-width: 991px) {
   .home-testimonials {
      padding: 50px 0 64px;
   }

   .home-testimonials .testimonials-content .section-header h2 {
      font-size: 26px;
      line-height: 36px;
   }
}

@media only screen and (max-width: 991px) {
   .home-testimonials {
      padding: 35px 0 50px;
   }

   .home-testimonials .testimonials-content .section-header {
      margin-bottom: 25px;
   }

   .home-testimonials::before {
      font-size: 70px;
      bottom: -30px;
   }

   .home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card {
      text-align: center;
   }

   .home-testimonials .testimonials-content .swiper .swiper-slide .testimonial-card .client-info {
      justify-content: center;
      text-align: left;
   }
}


/* Blog */
.home-blog {
   padding: 96px 0;
   background-color: var(--color-bg);
}

.home-blog .blog-content .section-header {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 48px;
   position: relative;
}

.home-blog .blog-content .section-header .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-blog .blog-content .section-header h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 16px;
   position: relative;
}

.home-blog .blog-content .section-header h2::after {
   content: '';
   display: block;
   width: 60px;
   height: 3px;
   background: var(--color-accent);
   margin: 16px auto 0;
   border-radius: 2px;
   opacity: 0.7;
}

.home-blog .blog-content .section-header p {
   color: #555;
}

.home-blog .blog-content .blog-layout {
   display: grid;
   grid-template-columns: 1.3fr 0.7fr;
   gap: 32px;
   min-height: 550px;
}

.home-blog .blog-content .blog-layout .blog-main-card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
   text-decoration: none;
   height: 100%;
}

.home-blog .blog-content .blog-layout .blog-main-card .blog-main-img-element {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
   transition: transform 0.6s ease;
}

.home-blog .blog-content .blog-layout .blog-main-card:hover .blog-main-img-element {
   transform: scale(1.05);
}

.home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay {
   position: relative;
   z-index: 2;
   width: 100%;
   padding: 48px;
   background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.6) 50%, transparent 100%);
   color: #fff;
}

.home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay .blog-date-badge {
   background-color: var(--color-accent);
   color: #fff;
   padding: 5px 12px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 600;
   display: inline-block;
   margin-bottom: 16px;
}

.home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay h3 {
   font-size: 32px;
   margin-bottom: 16px;
   line-height: 1.2;
}

.home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay p {
   font-size: 16px;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.home-blog .blog-layout .blog-side-column {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.home-blog .blog-layout .blog-side-column .blog-side-card {
   background: #fff;
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   flex: 1;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
   border: 1px solid rgba(0, 0, 0, 0.02);
   transition: var(--transition);
   text-decoration: none;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-img-wrapper {
   height: 160px;
   overflow: hidden;
   position: relative;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-img-wrapper .blog-side-bg {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   transition: transform 0.6s ease;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card:hover .blog-side-bg {
   transform: scale(1.1);
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-content {
   padding: 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-content .blog-category-small {
   color: var(--color-accent);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-content h4 {
   font-size: 18px;
   color: var(--color-primary);
   line-height: 1.3;
   margin-bottom: 8px;
}

.home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-content .blog-read-link {
   font-size: 14px;
   font-weight: 600;
   color: #666;
   margin-top: auto;
}

.home-blog .blog-content .blog-footer {
   text-align: center;
   margin-top: 48px;
}


@media only screen and (max-width: 991px) {
   .home-blog {
      padding: 50px 0;
   }

   .home-blog .blog-content .section-header h2 {
      font-size: 26px;
      line-height: 36px;
   }

   .home-blog .blog-content .blog-layout {
      grid-template-columns: 1fr;
   }

   .home-blog .blog-content .blog-layout .blog-side-column {
      height: auto;
   }

   .home-blog .blog-content .blog-layout .blog-side-column .blog-side-card {
      height: auto;
   }

   .home-blog .blog-content .blog-layout .blog-main-card {
      height: 410px;
   }

   .home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay {
      padding: 40px 20px 20px;
   }

   .home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay h3 {
      font-size: 18px;
      margin-bottom: 8px;
   }

   .home-blog .blog-content .blog-layout .blog-main-card .blog-main-overlay p {
      font-size: 14px;
      line-height: normal;
   }

   .home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-img-wrapper {
      height: 270px;
   }

   .home-blog .blog-layout .blog-side-column {
      flex-direction: row;
   }

}

@media only screen and (max-width: 768px) {
   .home-blog {
      padding: 35px 0;
   }

   .home-blog .blog-content .section-header {
      margin-bottom: 25px;
   }

   .home-blog .blog-content .blog-layout {
      gap: 20px;
   }

   .home-blog .blog-content .blog-layout .blog-main-card {
      height: 300px;
   }

   .home-blog .blog-content .blog-layout .blog-side-column {
      flex-direction: column;
      gap: 20px;
   }

   .home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-img-wrapper {
      height: 250px;
   }

   .home-blog .blog-content .blog-layout .blog-side-column .blog-side-card .blog-side-content {
      padding: 14px;
   }

   .home-blog .blog-content .blog-footer {
      margin-top: 25px;
   }
}



/* References Page */
.references-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 32px;
}

.reference-box {
   background: #fff;
   border-radius: 16px;
   padding: 30px 15px;
   text-align: center;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
   transition: all 0.3s ease;
   cursor: pointer;
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
}

.reference-box .reference-logo {
   height: 40px;
   margin: 0 auto 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 20px;
}

.reference-box .reference-logo img {
   max-height: 40px;
   max-width: 100px;
   object-fit: contain;
   filter: grayscale(100%);
   opacity: 0.6;
   transition: all 0.3s ease;
}

.reference-box h3 {
   font-size: 20px;
   color: var(--color-primary);
   margin-bottom: 12px;
   font-weight: 600;
}

.reference-box .reference-category {
   color: #888;
   font-size: 13px;
   margin-bottom: 20px;
   text-transform: uppercase;
   font-weight: 500;
}

.reference-box .reference-details-link {
   color: var(--color-accent);
   font-size: 14px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: gap 0.3s ease;
}

.reference-box .reference-details-link i {
   font-size: 11px;
}


@media only screen and (min-width: 991px) {
   .reference-box:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
   }

   .reference-box:hover .reference-logo img {
      filter: grayscale(0%);
      opacity: 1;
      transform: scale(1.05);
   }

   .reference-box:hover .reference-details-link {
      gap: 12px;
   }
}

@media only screen and (max-width: 991px) {
   .references-grid {
      gap: 25px;
   }
}


/* Reference Modal */
.reference-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0);
   z-index: 1000;
   overflow-y: auto;
   padding: 20px;
   visibility: hidden;
   opacity: 0;
   transition: all 0.3s ease;
}

.reference-modal.active {
   visibility: visible;
   opacity: 1;
   background: rgb(0 0 0 / 78%);
}

.reference-modal .modal-content {
   background: #fff;
   max-width: 1400px;
   max-height: calc(100vh - 40px);
   margin: 0 auto;
   border-radius: 20px;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transform: scale(0.7);
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reference-modal.active .modal-content {
   transform: scale(1);
   opacity: 1;
}

.reference-modal .modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 50px;
   height: 50px;
   background: rgba(255, 255, 255, 0.9);
   border: none;
   border-radius: 50%;
   font-size: 32px;
   color: var(--color-primary);
   cursor: pointer;
   z-index: 10;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

.reference-modal .modal-header {
   display: flex;
   gap: 24px;
   align-items: center;
   padding: 25px 75px 25px 25px;
   border-bottom: 2px solid #f0f0f0;
   background: linear-gradient(135deg, #f8f9fa, #ffffff);
   flex-shrink: 0;
}

.reference-modal .modal-body {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   flex: 1;
   padding: 25px;
}

.reference-modal .modal-title-section h2 {
   font-size: 32px;
   color: var(--color-primary);
   margin-bottom: 0;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 16px;
}

.reference-modal .modal-title-section h2 .title-logo {
   height: 40px;
   width: auto;
   object-fit: contain;
   filter: grayscale(0);
   max-width: 100px;
}

.reference-modal .modal-category {
   color: var(--color-accent);
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-weight: 600;
}

.reference-modal .modal-slider {
   flex: none;
   background: #000;
   position: relative;
   overflow: hidden;
   height: 435px;
   max-height: 435px;
   border-radius: 20px;
   margin-bottom: 20px;
}

.reference-modal .modal-slider .referenceSwiper {
   width: 100%;
   height: 100%;
}

.reference-modal .modal-slider .swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}

.reference-modal .modal-slider .swiper-slide .lightbox-link {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   text-decoration: none;
   cursor: zoom-in;
   overflow: hidden;
}

.reference-modal .modal-slider .swiper-slide .lightbox-link::before {
   content: '';
   position: absolute;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   background-image: inherit;
   background-size: cover;
   background-position: center;
   filter: blur(6px) brightness(.3);
   opacity: 1;
   z-index: 0;
   transform: scale(1.1);
}

.reference-modal .modal-slider .swiper-slide .lightbox-link img {
   position: relative;
   z-index: 1;
   height: 100%;
   object-fit: contain;
}

.reference-modal .modal-slider .swiper-button-prev,
.reference-modal .modal-slider .swiper-button-next {
   background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.6);
   width: 40px;
   height: 40px;
   border-radius: 8px;
   transition: all 0.3s ease;
   z-index: 2;
}

.reference-modal .modal-slider .swiper-button-prev::after,
.reference-modal .modal-slider .swiper-button-next::after {
   font-size: 16px;
}

.reference-modal .modal-slider .swiper-pagination {
   bottom: 16px;
   right: 20px;
   left: auto;
   width: auto;
   text-align: right;
}

.reference-modal .modal-slider .swiper-pagination-bullet {
   background: rgba(255, 255, 255, 0.4);
   width: 6px;
   height: 6px;
   margin: 0 4px;
}

.reference-modal .modal-slider .swiper-pagination-bullet-active {
   background: #fff;
   width: 20px;
   border-radius: 3px;
}

.reference-modal .modal-description {
   flex-shrink: 0;
}

.reference-modal .modal-info {
   line-height: 1.8;
   color: #555;
}

.reference-modal .modal-info h3 {
   font-size: 22px;
   color: var(--color-primary);
   margin: 32px 0 16px;
   font-weight: 600;
   padding-bottom: 12px;
   border-bottom: 2px solid #f0f0f0;
}

.reference-modal .modal-info h3:first-child {
   margin-top: 0;
}

.reference-modal .modal-info p {
   margin-bottom: 20px;
   font-size: 16px;
   line-height: 1.9;
}

.reference-modal .modal-info ul {
   margin: 20px 0 20px 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
}

.reference-modal .modal-info ul li {
   margin-bottom: 0;
   color: #666;
   background: #f8f9fa;
   padding: 12px 16px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.reference-modal .modal-info ul li::before {
   content: "?";
   color: var(--color-accent);
   font-weight: bold;
   font-size: 18px;
}


@media only screen and (min-width: 991px) {
   .reference-modal .modal-close:hover {
      background: var(--color-accent);
      color: #fff;
      transform: rotate(90deg);
   }

   .reference-modal .modal-slider .swiper-button-prev:hover,
   .reference-modal .modal-slider .swiper-button-next:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
   }
}

@media only screen and (max-width: 991px) {
   .reference-modal {
      padding: 0;
   }

   .reference-modal .modal-content {
      max-height: 100vh;
      border-radius: 0;
   }

   .reference-modal .modal-body {
      padding: 15px;
   }

   .reference-modal .modal-info ul {
      grid-template-columns: 1fr;
   }

   .reference-modal .modal-header {
      padding: 15px 75px 15px 15px;
   }

   .reference-modal .modal-close {
      top: 10px;
      right: 5px;
   }

   .reference-modal .modal-info h3 {
      font-size: 18px;
      margin: 22px 0 11px;
   }

   .reference-modal .modal-info ul li {
      font-size: 14px;
   }
}

/* Ready CTA */
.home-ready-cta {
   padding: 96px 0;
   background: linear-gradient(135deg, #0A192F, #112240, #0A192F, #1D3A5F);
   background-size: 400% 400%;
   animation: gradientMove 15s ease infinite;
   text-align: center;
   color: #fff;
   position: relative;
   overflow: hidden;
}

@keyframes gradientMove {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.home-ready-cta::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('../images/cta-background.jpg') center/cover no-repeat;
   opacity: 0.15;
   mix-blend-mode: overlay;
   pointer-events: none;
   z-index: 0;
}

.home-ready-cta::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -20%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, transparent 70%);
   border-radius: 50%;
   animation: floatGlow 10s infinite ease-in-out alternate;
   pointer-events: none;
   z-index: 0;
}

.home-ready-cta .glow-shape-2 {
   position: absolute;
   bottom: -30%;
   right: -10%;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 70%);
   border-radius: 50%;
   animation: floatGlow 12s infinite ease-in-out alternate-reverse;
   pointer-events: none;
   z-index: 0;
}

@keyframes floatGlow {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(50px, 50px);
   }
}

.home-ready-cta .cta-content h2 {
   font-size: 56px;
   margin-bottom: 24px;
   color: #fff;
   position: relative;
   z-index: 1;
}

.home-ready-cta .container .cta-content p {
   font-size: 19px;
   margin-bottom: 48px;
   color: rgba(255, 255, 255, 0.9);
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   z-index: 1;
}

.home-ready-cta .container .cta-content .big-cta-btn {
   background-color: var(--color-accent);
   color: #fff;
   padding: 19px 64px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 18px;
   transition: var(--transition);
   display: inline-block;
   box-shadow: 0 10px 40px rgba(197, 160, 89, 0.4);
   position: relative;
   z-index: 1;
   overflow: hidden;
}

.home-ready-cta .container .cta-content .big-cta-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   transform: skewX(-20deg);
   animation: btnShine 3s infinite;
}

@keyframes btnShine {
   0% {
      left: -100%;
   }

   20% {
      left: 200%;
   }

   100% {
      left: 200%;
   }
}

.home-ready-cta .container .cta-content .big-cta-btn:hover {
   transform: translateY(-5px) scale(1.05);
   background-color: #fff;
   color: var(--color-primary);
   box-shadow: 0 15px 50px rgba(197, 160, 89, 0.6);
}

@media only screen and (max-width: 991px) {
   .home-ready-cta .container .cta-content h2 {
      font-size: 40px;
   }

   .home-ready-cta {
      padding: 50px 15px;
   }
}

@media only screen and (max-width: 991px) {
   .home-ready-cta {
      padding: 35px 15px;
   }

   .home-ready-cta .container .cta-content h2 {
      font-size: 30px;
      margin-bottom: 10px;
   }

   .home-ready-cta .container .cta-content p {
      font-size: 15px;
      margin-bottom: 28px;
   }

   .home-ready-cta .container .cta-content .big-cta-btn {
      padding: 12px 45px;
      font-size: 14px;
   }
}

/* Contact Form */
.home-contact-form-section {
   padding: 96px 0;
   background: #fff;
   position: relative;
   z-index: 5;
}

.home-contact-form-section .container .contact-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
}

.home-contact-form-section .container .contact-wrapper .contact-text {
   padding-top: 16px;
}

.home-contact-form-section .container .contact-wrapper .contact-text .section-tag {
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
   text-transform: uppercase;
   color: var(--color-accent);
   letter-spacing: 5px;
   margin-bottom: 10px;
}

.home-contact-form-section .container .contact-wrapper .contact-text h2 {
   font-size: 40px;
   color: var(--color-primary);
   margin-bottom: 16px;
   line-height: 50px;
}

.home-contact-form-section .container .contact-wrapper .contact-text .contact-info-box {
   margin-top: 32px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.home-contact-form-section .container .contact-wrapper .contact-text .contact-info-box .c-item {
   display: flex;
   align-items: center;
   gap: 15px;
   color: #555;
   font-weight: 500;
   font-size: 17px;
}

.home-contact-form-section .container .contact-wrapper .contact-text .contact-info-box .c-item i {
   color: var(--color-accent);
   width: 25px;
   font-size: 19px;
   text-align: center;
}

.home-contact-form-section .contact-wrapper .simple-form {
   background: #ffffff;
   padding: 40px;
   border-radius: 16px;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(0, 0, 0, 0.04);
}

.home-contact-form-section .container .contact-wrapper .simple-form .form-header {
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid #f0f0f0;
}

.home-contact-form-section .container .contact-wrapper .simple-form .form-header h3 {
   color: var(--color-primary);
   font-size: 24px;
   margin: 0;
}

.home-contact-form-section .container .contact-wrapper .simple-form .form-group {
   margin-bottom: 19px;
}

.home-contact-form-section .container .contact-wrapper .simple-form .form-group input,
.home-contact-form-section .container .contact-wrapper .simple-form .form-group select,
.home-contact-form-section .container .contact-wrapper .simple-form .form-group textarea {
   width: 100%;
   padding: 16px 19px;
   border: 1px solid #e9ecef;
   background-color: #f8f9fa;
   border-radius: 8px;
   font-family: var(--font-body);
   transition: all 0.3s ease;
   outline: none;
   font-size: 15px;
   color: #333;
}

.home-contact-form-section .container .contact-wrapper .simple-form .form-group input:focus,
.home-contact-form-section .container .contact-wrapper .simple-form .form-group select:focus,
.home-contact-form-section .container .contact-wrapper .simple-form .form-group textarea:focus {
   background-color: #fff;
   border-color: var(--color-accent);
   box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.1);
}

.home-contact-form-section .container .contact-wrapper .simple-form .submit-btn {
   width: 100%;
   padding: 16px;
   background: var(--color-primary);
   color: #fff;
   border: none;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-size: 16px;
   margin-top: 10px;
}

.home-contact-form-section .container .contact-wrapper .simple-form .submit-btn:hover {
   background: var(--color-accent);
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3);
}

@media only screen and (max-width: 991px) {
   .home-contact-form-section {
      padding: 35px 0;
   }

   .home-contact-form-section .container .contact-wrapper {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .home-contact-form-section .container .contact-wrapper .simple-form {
      padding: 20px;
   }

   .home-contact-form-section .container .contact-wrapper .contact-text {
      padding-top: 0;
   }

   .home-contact-form-section .container .contact-wrapper .contact-text .section-tag {
      margin-bottom: 0;
   }

   .home-contact-form-section .container .contact-wrapper .contact-text h2 {
      font-size: 30px;
      line-height: 40px;
      margin-top: 9px;
   }

   .home-contact-form-section .container .contact-wrapper .contact-text .contact-info-box {
      margin-top: 20px;
   }

   .home-contact-form-section .container .contact-wrapper .contact-text .contact-info-box .c-item {
      gap: 10px;
      font-size: 15px;
   }
}


/* ===================================
   FOOTER
   =================================== */

footer {
   background-color: #050d18;
   color: #aaa;
   padding: 64px 32px 16px;
   font-size: 14px;
}

footer .footer-content {
   display: flex;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto 48px;
   flex-wrap: wrap;
   gap: 32px;
}

footer .footer-content .footer-col {
   flex: 1;
}

footer .footer-content .footer-col.footer-col-brand {
   flex: 2;
   min-width: 250px;
}

footer .footer-content .footer-col .footer-logo {
   max-width: 300px;
   height: auto;
   margin-bottom: 10px;
}

footer .footer-content .footer-col .social-links {
   margin-top: 24px;
   display: flex;
   gap: 16px;
}

footer .footer-content .footer-col .social-links a {
   color: #fff;
   font-size: 18px;
   transition: var(--transition);
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
}

footer .footer-content .footer-col .social-links a:hover {
   background: var(--color-accent);
   color: #fff;
   transform: translateY(-3px);
}

footer .footer-content .footer-col.footer-links h4 {
   color: #fff;
   margin-bottom: 16px;
   font-size: 16px;
   font-weight: bold;
}

footer .footer-content .footer-col.footer-links a {
   display: block;
   margin-bottom: 8px;
}

footer .footer-content .footer-col.footer-links a:hover {
   color: var(--color-accent);
}

footer .copyright {
   text-align: center;
   padding-top: 17px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 991px) {
   footer .footer-content {
      flex-wrap: wrap;
      margin-bottom: 30px;
   }

   footer .footer-content .footer-col.footer-col-brand {
      width: 100%;
      flex: none;
      text-align: center;
   }

   footer .footer-content .footer-col .social-links {
      justify-content: center;
   }

   footer .footer-content .footer-col {
      text-align: center;
   }
}

@media only screen and (max-width: 768px) {
   footer {
      padding: 50px 12px 16px;
   }

   footer .footer-content .footer-col .footer-logo {
      max-width: 250px;
   }

   footer .footer-content {
      flex-direction: column;
      gap: 20px;
   }
}


/* ===================================
   FLOATING WHATSAPP BUTTON & ANIMATIONS
   =================================== */

.floating-btn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   background-color: #25D366;
   color: white;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   z-index: 999;
   transition: transform 0.3s;
   animation: shadowPulse 2s infinite ease-in-out;
}

.floating-btn:hover {
   animation: none;
   transform: scale(1.1);
}

@keyframes shadowPulse {
   0% {
      box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
   }

   50% {
      box-shadow: 0 4px 30px rgba(37, 211, 102, 0.9);
   }

   100% {
      box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
   }
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.fade-in-section {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
   opacity: 1;
   transform: none;
}

@media only screen and (max-width: 768px) {
   .floating-btn {
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      font-size: 24px;
   }
}


/* ===================================
   PAGE CONTENT STYLES
   =================================== */

.page-content {
   min-height: 70vh;
   padding: 64px 0;
   margin: 0 auto;
}

.page-title-section {
   position: relative;
   height: 350px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 93px;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.page-title-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(10, 25, 47, 0.75) 0%, rgba(10, 25, 47, 0.85) 100%);
   z-index: 0;
}

.page-title-section .container .page-title-content {
   position: relative;
   z-index: 2;
   text-align: center;
   color: #fff;
}

.page-title-section .container .page-title-content .page-breadcrumb {
   font-size: 14px;
   margin-bottom: 5px;
   color: rgba(255, 255, 255, 0.8);
   display: flex;
   align-items: center;
   white-space: nowrap;
   overflow: hidden;
   justify-content: center;
}

.page-title-section .container .page-title-content .page-breadcrumb>* {
   flex-shrink: 0;
}

.page-title-section .container .page-title-content .page-breadcrumb>span:last-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 1;
   min-width: 0;
}

.page-title-section .container .page-title-content .page-breadcrumb a {
   color: var(--color-accent);
   transition: var(--transition);
}

.page-title-section .container .page-title-content .page-breadcrumb a:hover {
   color: #fff;
}

.page-title-section .container .page-title-content .page-breadcrumb .breadcrumb-separator {
   margin: 0 13px;
   color: rgba(255, 255, 255, 0.5);
}

.page-title-section .container .page-title-content h1 {
   font-size: 36px;
   font-weight: 700;
   margin: 0;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 991px) {
   .page-title-section {
      height: auto;
      min-height: 300px;
      padding-top: 70px;
   }

   .page-title-section .container .page-title-content h1 {
      font-size: 40px;
   }

   .page-title-section .container .page-title-content .page-breadcrumb {
      font-size: 14px;
      margin-bottom: 10px;
   }

   .page-content {
      padding: 25px 0;
   }
}

@media only screen and (max-width: 768px) {
   .page-title-section {
      min-height: 250px;
   }

   .page-title-section .container .page-title-content h1 {
      font-size: 28px;
      line-height: 34px;
   }

   .page-title-section .container .page-title-content p {
      font-size: 14px;
      margin-top: 5px;
   }
}



/* Services Page */
.services-list {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.services-list .service-item {
   display: grid;
   grid-template-columns: 450px 1fr;
   gap: 48px;
   align-items: center;
   background: #fff;
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   transition: all 0.4s ease;
}

.services-list .service-item .service-item-visual {
   display: block;
   width: 100%;
   height: 550px;
   overflow: hidden;
   border-radius: 16px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
   text-decoration: none;
}

.services-list .service-item .service-item-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
   object-position: top;
}

.services-list .service-item .service-item-content {
   padding: 0;
}

.services-list .service-item .service-item-content h2 {
   font-size: 30px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 20px;
   line-height: 1.2;
}

.services-list .service-item .service-item-content h2 a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color 0.3s ease;
}

.services-list .service-item .service-item-content p {
   font-size: 17px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 28px;
}

.services-list .service-item .service-detail-link {
   color: var(--color-primary);
   font-weight: 600;
   border-bottom: 2px solid var(--color-accent);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: all 0.3s ease;
}

.services-list .service-item .service-detail-link i {
   font-size: 14px;
   transition: transform 0.3s ease;
}

.category-navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-top: 60px;
}

.category-navigation .category-nav-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 18px;
   font-weight: 600;
   color: var(--color-primary);
   text-decoration: none;
   padding: 16px 32px;
   border: 2px solid var(--color-primary);
   border-radius: 50px;
   transition: all 0.3s ease;
}

.category-navigation .category-nav-btn i {
   font-size: 16px;
   transition: transform 0.3s ease;
}



@media only screen and (min-width: 991px) {
   .services-list .service-item:nth-child(even) {
      grid-template-columns: 1fr 450px;
   }

   .services-list .service-item:nth-child(even) .service-item-visual {
      order: 2;
   }

   .services-list .service-item:nth-child(even) .service-item-content {
      order: 1;
   }

   .services-list .service-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
   }

   .services-list .service-item:hover .service-item-visual {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   }

   .services-list .service-item .service-item-visual:hover img {
      transform: scale(1.08);
   }

   .services-list .service-item .service-item-content h2 a:hover {
      color: var(--color-accent);
   }

   .services-list .service-item .service-detail-link:hover {
      color: var(--color-accent);
   }

   .services-list .service-item .service-detail-link:hover i {
      transform: translateX(4px);
   }

   .category-navigation .category-nav-btn:hover {
      background: var(--color-primary);
      color: #fff;
   }

   .category-navigation .category-nav-prev:hover i {
      transform: translateX(-4px);
   }

   .category-navigation .category-nav-next:hover i {
      transform: translateX(4px);
   }
}

@media only screen and (max-width: 991px) {
   .services-list {
      gap: 20px
   }

   .services-list .service-item {
      grid-template-columns: 1fr;
      padding: 20px;
      gap: 15px;
   }

   .services-list .service-item .service-item-content h2 {
      font-size: 22px;
      margin-bottom: 15px;
   }

   .services-list .service-item .service-item-content p {
      font-size: 15px;
      margin-bottom: 12px;
      line-height: 22px;
   }

   .category-navigation {
      margin-top: 45px;
      margin-bottom: 20px;
   }

   .category-navigation .category-nav-btn {
      font-size: 16px;
      padding: 12px 24px;
   }
}

@media only screen and (max-width: 768px) {
   .category-navigation {
      margin-top: 30px;
      margin-bottom: 5px;
   }

   .category-navigation .category-nav-btn {
      font-size: 13px;
      padding: 7px 10px;
      grid-gap: 5px;
   }

}

/* Service Detail Page */
.service-detail-container .service-detail-hero {
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
   margin-bottom: var(--spacing-md);
}

.service-detail-container .service-detail-hero img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 20% !important;
}

.service-detail-container .service-details-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   background: var(--color-primary);
   padding: 40px;
   border-radius: 16px;
   margin-top: 20px;
   margin-bottom: 40px;
}

.service-detail-container .service-details-box .detail-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 12px;
}

.service-detail-container .service-details-box .detail-item i {
   font-size: 32px;
   color: var(--color-accent);
}

.service-detail-container .service-details-box .detail-item strong {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   display: block;
}

.service-detail-container .service-details-box .detail-item p {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.85);
   margin: 0;
}

.service-detail-container .service-detail-content {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.service-detail-container .service-detail-content .service-intro h2 {
   font-size: 34px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 24px;
   line-height: 1.2;
}

.service-detail-container .service-detail-content .service-intro .service-lead {
   font-size: 20px;
   line-height: 1.8;
}

.service-detail-container .service-detail-content .service-outcomes h3,
.service-detail-container .service-detail-content .service-audience h3 {
   font-size: 28px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 22px;
}

.service-detail-container .service-detail-content .service-outcomes .outcomes-list {
   list-style: none;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.service-detail-container .service-detail-content .service-outcomes .outcomes-list li {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   font-size: 18px;
   line-height: 1.7;
}

.service-detail-container .service-detail-content .service-outcomes .outcomes-list li i {
   color: var(--color-accent);
   font-size: 20px;
   margin-top: 4px;
   min-width: 20px;
}

.service-detail-container .service-detail-content .service-audience {
   background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
   padding: 48px;
   border-radius: 20px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   margin-top: 30px;
}

.service-detail-container .service-detail-content .service-audience .audience-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

.service-detail-container .service-detail-content .service-audience .audience-tags .audience-tag {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 24px;
   background: #f8f9fa;
   border: 2px solid #e5e5e5;
   border-radius: 50px;
   font-size: 16px;
   font-weight: 600;
   color: var(--color-primary);
   transition: all 0.3s ease;
}

.service-detail-container .service-detail-content .service-audience .audience-tags .audience-tag i {
   color: var(--color-accent);
   font-size: 18px;
}

.service-detail-container .service-detail-content .service-audience .audience-tags .audience-tag:hover {
   background: var(--color-accent);
   color: #fff;
   border-color: var(--color-accent);
}

.service-detail-container .service-detail-content .service-audience .audience-tags .audience-tag:hover i {
   color: #fff;
}

.service-detail-container .service-detail-content .service-cta {
   background: linear-gradient(135deg, var(--color-primary) 0%, #0d2644 100%);
   padding: 60px;
   border-radius: 20px;
   text-align: center;
   color: #fff;
}

.service-detail-container .service-detail-content .service-cta h3 {
   font-size: 36px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 16px;
}

.service-detail-container .service-detail-content .service-cta p {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 32px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.service-detail-container .service-detail-content .service-cta .cta-buttons {
   display: flex;
   gap: 20px;
   justify-content: center;
   flex-wrap: wrap;
}

.service-detail-container .service-detail-content .service-cta .btn-outline {
   color: #fff;
   border-color: #fff;
}

.service-detail-container .service-detail-content .service-cta .btn-outline:hover {
   background: #fff;
   color: var(--color-primary);
}

.service-detail-container .related-services {
   margin-top: 40px;
   padding-top: 20px;
}

.service-detail-container .related-services h3 {
   font-size: 32px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 17px;
}

.service-detail-container .related-services .relatedServicesSwiper {
   padding-bottom: 50px;
   padding-top: 10px;
}

.service-detail-container .related-services .relatedServicesSwiper .swiper-slide {
   height: auto;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   border: 1px solid rgba(0, 0, 0, 0.08);
   transition: transform 0.3s, border-color 0.3s;
   text-decoration: none;
   height: 100%;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card:hover {
   border-color: var(--color-accent);
   transform: translateY(-5px);
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content {
   padding: 24px;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content h4 {
   font-size: 20px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 12px;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content p {
   font-size: 15px;
   color: #666;
   line-height: 1.6;
   margin-bottom: 16px;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content .related-service-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--color-accent);
   font-weight: 600;
   font-size: 15px;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content .related-service-link i {
   font-size: 12px;
   transition: transform 0.3s ease;
}

.service-detail-container .related-services .relatedServicesSwiper .related-service-card:hover .related-service-content .related-service-link i {
   transform: translateX(4px);
}

.service-detail-container .related-services .relatedServicesSwiper .swiper-pagination {
   bottom: 0;
}

.service-detail-container .related-services .relatedServicesSwiper .swiper-pagination-bullet {
   background: var(--color-primary);
   opacity: 0.3;
}

.service-detail-container .related-services .relatedServicesSwiper .swiper-pagination-bullet-active {
   background: var(--color-accent);
   opacity: 1;
}


@media only screen and (max-width: 991px) {
   .service-detail-container .service-detail-content {
      gap: 20px;
   }

   .service-detail-container .service-detail-content .service-intro h2 {
      font-size: 20px;
      margin-bottom: 15px;
   }

   .service-detail-container .service-details-box {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 15px;
      margin-bottom: 20px;
   }

   .service-detail-container .service-details-box .detail-item {
      flex-direction: row;
   }

   .service-detail-container .service-details-box .detail-item i {
      font-size: 20px;
      flex: none;
      width: 25px;
   }

   .service-detail-container .service-details-box .detail-item>div {
      flex: auto;
      display: flex;
      justify-content: space-between;
   }

   .service-detail-container .service-detail-hero {
      margin-bottom: 15px;
   }

   .service-detail-container .service-detail-content .service-outcomes h3,
   .service-detail-container .service-detail-content .service-audience h3 {
      font-size: 22px;
      margin-bottom: 15px;
   }

   .service-detail-container .service-detail-content .service-intro .service-lead {
      font-size: 15px;
   }

   .service-detail-container .service-detail-content .service-outcomes .outcomes-list li {
      font-size: 15px;
      gap: 12px;
   }

   .service-detail-container .service-detail-content .service-audience {
      margin-top: 10px;
      padding: 22px;
   }

   .service-detail-container .service-detail-content .service-audience .audience-tags .audience-tag {
      padding: 10px 15px;
      font-size: 14px;
   }

   .service-detail-container .service-detail-content .service-cta {
      padding: 30px 15px;
   }

   .service-detail-container .service-detail-content .service-cta h3 {
      font-size: 26px;
   }

   .service-detail-container .service-detail-content .service-cta p {
      margin-bottom: 22px;
   }

   .service-detail-container .service-detail-content .service-cta .cta-buttons {
      gap: 15px;
   }

   .service-detail-container .related-services {
      margin-top: 0;
   }

   .service-detail-container .related-services h3 {
      font-size: 24px;
      margin-bottom: 7px;
   }

   .service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content {
      padding: 16px;
   }

   .service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content h4 {
      font-size: 18px;
      margin-bottom: 5px;
   }

   .service-detail-container .related-services .relatedServicesSwiper .related-service-card .related-service-content p {
      margin-bottom: 10px;
   }
}

@media only screen and (max-width: 768px) {
   .service-detail-container .service-detail-hero {
      height: 300px;
   }

   .service-detail-container .service-detail-content .service-cta h3 {
      font-size: 20px;
      margin-bottom: 5px;
   }

   .service-detail-container .service-detail-content .service-cta p {
      font-size: 16px;
   }
}


/* ===================================
   BLOG PAGE STYLES
   =================================== */

.blog-page-content {
   padding: 60px 0;
   background-color: var(--color-bg);
}

.blog-page-content .featured-blog-post {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 48px;
   background: #fff;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   margin-bottom: 64px;
}

.blog-page-content .featured-blog-post .featured-blog-image {
   position: relative;
   height: 100%;
   min-height: 450px;
   display: block;
   overflow: hidden;
}

.blog-page-content .featured-blog-post .featured-blog-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.blog-page-content .featured-blog-post .featured-blog-image:hover img {
   transform: scale(1.05);
}

.blog-page-content .featured-blog-post .featured-blog-image .featured-badge {
   position: absolute;
   top: 24px;
   left: 24px;
   background: var(--color-accent);
   color: #fff;
   padding: 8px 16px;
   border-radius: 50px;
   font-size: 12px;
   font-weight: 700;
}

.blog-page-content .featured-blog-post .featured-blog-content {
   padding: 48px 48px 48px 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.blog-page-content .featured-blog-post .featured-blog-content .blog-meta {
   display: flex;
   gap: 16px;
   margin-bottom: 24px;
   flex-wrap: wrap;
}

.blog-page-content .featured-blog-post .featured-blog-content .blog-meta span {
   font-size: 13px;
   color: #666;
}

.blog-page-content .featured-blog-post .featured-blog-content .blog-meta span i {
   margin-right: 6px;
   color: var(--color-accent);
}

.blog-page-content .featured-blog-post .featured-blog-content .blog-meta .blog-category {
   padding: 6px 16px;
   border-radius: 50px;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 11px;
}

.blog-page-content .featured-blog-post .featured-blog-content .blog-meta .blog-category.leadership {
   background: rgba(197, 160, 89, 0.1);
   color: var(--color-accent);
}

.blog-page-content .featured-blog-post .featured-blog-content h2 {
   font-size: 32px;
   color: var(--color-primary);
   margin-bottom: 16px;
   line-height: 1.3;
}

.blog-page-content .featured-blog-post .featured-blog-content h2 a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color 0.3s ease;
}

.blog-page-content .featured-blog-post .featured-blog-content h2 a:hover {
   color: var(--color-accent);
}

.blog-page-content .featured-blog-post .featured-blog-content p {
   color: #555;
   line-height: 1.7;
   margin-bottom: 32px;
}

.blog-page-content .blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
   gap: 32px;
}

.blog-page-content .blog-grid .blog-card {
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
   transition: var(--transition);
   display: flex;
   flex-direction: column;
}

.blog-page-content .blog-grid .blog-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.blog-page-content .blog-grid .blog-card .blog-card-image {
   position: relative;
   height: 240px;
   overflow: hidden;
   display: block;
}

.blog-page-content .blog-grid .blog-card .blog-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.blog-page-content .blog-grid .blog-card .blog-card-image:hover img {
   transform: scale(1.1);
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 6px 14px;
   border-radius: 50px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge.wellbeing {
   background: rgba(76, 175, 80, 0.9);
   color: #fff;
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge.healthcare {
   background: rgba(33, 150, 243, 0.9);
   color: #fff;
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge.leadership {
   background: rgba(197, 160, 89, 0.9);
   color: #fff;
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge.education {
   background: rgba(156, 39, 176, 0.9);
   color: #fff;
}

.blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge.branding {
   background: rgba(255, 87, 34, 0.9);
   color: #fff;
}

.blog-page-content .blog-grid .blog-card .blog-card-content {
   padding: 24px;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.blog-page-content .blog-grid .blog-card .blog-card-content .blog-meta-small {
   display: flex;
   gap: 16px;
   margin-bottom: 16px;
}

.blog-page-content .blog-grid .blog-card .blog-card-content .blog-meta-small span {
   font-size: 13px;
   color: #888;
}

.blog-page-content .blog-grid .blog-card .blog-card-content .blog-meta-small span i {
   margin-right: 5px;
   color: var(--color-accent);
}

.blog-page-content .blog-grid .blog-card .blog-card-content h3 {
   font-size: 21px;
   color: var(--color-primary);
   margin-bottom: 12px;
   line-height: 1.4;
}

.blog-page-content .blog-grid .blog-card .blog-card-content h3 a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color 0.3s ease;
}

.blog-page-content .blog-grid .blog-card .blog-card-content h3 a:hover {
   color: var(--color-accent);
}

.blog-page-content .blog-grid .blog-card .blog-card-content p {
   color: #666;
   line-height: 1.6;
   margin-bottom: 20px;
   flex: 1;
}

.blog-page-content .blog-grid .blog-card .blog-card-content .blog-read-more {
   color: var(--color-primary);
   font-weight: 600;
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: var(--transition);
}

.blog-page-content .blog-grid .blog-card .blog-card-content .blog-read-more:hover {
   color: var(--color-accent);
   gap: 12px;
}

.blog-page-content .blog-newsletter-cta {
   background: linear-gradient(135deg, var(--color-primary), #112240);
   border-radius: 20px;
   padding: 64px 32px;
   text-align: center;
}

.blog-page-content .blog-newsletter-cta .newsletter-content .newsletter-icon {
   font-size: 48px;
   color: var(--color-accent);
   margin-bottom: 24px;
}

.blog-page-content .blog-newsletter-cta .newsletter-content h3 {
   font-size: 32px;
   color: #fff;
   margin-bottom: 16px;
}

.blog-page-content .blog-newsletter-cta .newsletter-content p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 17px;
   margin-bottom: 32px;
}

.blog-page-content .blog-newsletter-cta .newsletter-form {
   display: flex;
   max-width: 550px;
   margin: 0 auto;
   gap: 16px;
}

.blog-page-content .blog-newsletter-cta .newsletter-form input {
   flex: 1;
   padding: 16px 24px;
   border: none;
   border-radius: 50px;
   font-family: var(--font-body);
   font-size: 15px;
   outline: none;
}

@media only screen and (max-width: 991px) {
   .blog-page-content {
      padding: 35px 0;
   }

   .blog-page-content .blog-grid {
      grid-template-columns: 1fr;
   }

   .blog-page-content .featured-blog-post {
      grid-template-columns: 1fr;
      gap: 0;
      margin-bottom: 32px;
   }

   .blog-page-content .featured-blog-post .featured-blog-image {
      min-height: 300px;
   }

   .blog-page-content .featured-blog-post .featured-blog-content {
      padding: 15px;
   }

   .blog-page-content .featured-blog-post .featured-blog-content .blog-meta {
      margin-bottom: 10px;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-content h3 {
      margin-bottom: 5px;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-content p,
   .blog-page-content .featured-blog-post .featured-blog-content p {
      font-size: 15px;
      line-height: 24px;
      margin-bottom: 8px;
   }

   .blog-page-content .featured-blog-post .featured-blog-content h2 {
      font-size: 24px;
   }

   .blog-page-content .featured-blog-post .featured-blog-content .btn {
      display: none;
   }

   .blog-page-content .blog-newsletter-cta .newsletter-form input {
      width: 100%;
      text-align: center;
   }

   .blog-page-content .blog-newsletter-cta .newsletter-form {
      flex-direction: column;
      align-items: center;
   }

   .blog-page-content .blog-newsletter-cta .newsletter-content h3 {
      font-size: 24px;
      line-height: 30px;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-image {
      height: auto;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-image img {
      height: initial;
      display: block;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-content {
      padding: 15px;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-content .blog-meta-small {
      margin-bottom: 10px;
   }
}

@media only screen and (max-width: 991px) {
   .blog-page-content {
      padding: 25px 0;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-image .blog-category-badge,
   .blog-page-content .featured-blog-post .featured-blog-image .featured-badge {
      top: 14px;
      left: 14px;
      padding: 4px 10px;
   }

   .blog-page-content .featured-blog-post .featured-blog-content h2 {
      margin-bottom: 10px;
      font-size: 20px;
   }

   .blog-page-content .blog-grid .blog-card .blog-card-content h3 a {
      font-size: 20px;
      line-height: 1.3;
   }
}


/* Blog Detail Page */
.blog-detail-page {
   background-color: var(--color-bg);
}

.blog-detail-header {
   position: relative;
   background-image: url('../images/blog-main.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   padding: 140px 0 64px;
   color: #fff;
   overflow: hidden;
}

.blog-detail-header::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(10, 25, 47, 0.85) 0%, rgba(17, 34, 64, 0.9) 100%);
   z-index: 0;
}

.blog-detail-header .container .blog-detail-header-content {
   position: relative;
   z-index: 1;
}

.blog-detail-header h1 {
   font-size: 48px;
   line-height: 1.2;
   margin-bottom: 24px;
}

.blog-detail-header .container .blog-detail-meta {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 32px;
   font-size: 14px;
}

.blog-detail-header .container .blog-detail-meta .blog-category {
   padding: 6px 16px;
   border-radius: 50px;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 11px;
   line-height: normal;
}

.blog-detail-header .container .blog-detail-meta .blog-category.leadership {
   background: var(--color-accent);
   color: #fff;
}

.blog-detail-header .container .blog-detail-meta .meta-separator {
   color: rgba(255, 255, 255, 0.3);
}

.blog-detail-header .container .blog-detail-meta time,
.blog-detail-header .container .blog-detail-meta .blog-author {
   color: rgba(255, 255, 255, 0.9);
}

.blog-detail-header .container .blog-detail-meta i {
   margin-right: 6px;
   color: var(--color-accent);
}

.blog-detail-header .container .blog-social-share {
   display: flex;
   align-items: center;
   gap: 12px;
}

.blog-detail-header .container .blog-social-share .share-label {
   font-weight: 600;
   margin-right: 8px;
}

.blog-detail-header .container .blog-social-share .share-btn {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   transition: var(--transition);
}

.blog-detail-header .container .blog-social-share .share-btn:hover {
   background: var(--color-accent);
   transform: translateY(-3px);
}

.container.blog-detail-layout {
   padding: 64px 15px;
   display: grid;
   grid-template-columns: 1fr 350px;
   gap: 40px;
}

.blog-detail-content {
   background: #fff;
   border-radius: 20px;
   padding: 48px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.blog-detail-content .blog-featured-image {
   margin: -48px -48px 40px -48px;
   border-radius: 20px 20px 0 0;
   overflow: hidden;
   height: 450px;
}

.blog-detail-content .blog-featured-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.blog-body {
   color: #333;
   line-height: 1.8;
}

.blog-body .lead-paragraph {
   font-size: 19px;
   color: #555;
   line-height: 1.7;
   margin-bottom: 32px;
   font-weight: 400;
}

.blog-body h2 {
   font-size: 32px;
   color: var(--color-primary);
   margin-top: 48px;
   margin-bottom: 24px;
   line-height: 1.3;
}

.blog-body h2:first-of-type {
   margin-top: 0;
}

.blog-body p {
   margin-bottom: 24px;
   font-size: 17px;
   color: #444;
}

.blog-body blockquote {
   margin: 40px 0;
   padding: 24px 32px;
   background: var(--color-bg);
   border-left: 4px solid var(--color-accent);
   border-radius: 8px;
}

.blog-body blockquote p {
   font-size: 21px;
   color: var(--color-primary);
   font-style: italic;
   margin-bottom: 16px;
}

.blog-body blockquote cite {
   color: var(--color-accent);
   font-style: normal;
   font-size: 15px;
   font-weight: 600;
}

.blog-body ol,
.blog-body ul {
   margin: 24px 0;
   padding-left: 32px;
}

.blog-body ol li,
.blog-body ul li {
   margin-bottom: 16px;
   font-size: 17px;
   color: #444;
   line-height: 1.7;
}

.blog-body ul li {
   list-style-type: disc;
}

.blog-body ol li {
   list-style-type: decimal;
}

.blog-body strong {
   color: var(--color-primary);
   font-weight: 600;
}

.blog-tags {
   margin-top: 48px;
   padding-top: 32px;
   border-top: 1px solid #eee;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.blog-tags .tags-label {
   font-weight: 600;
   color: var(--color-primary);
}

.blog-tags .tags-label i {
   margin-right: 6px;
   color: var(--color-accent);
}

.blog-tags .tag {
   padding: 6px 16px;
   background: var(--color-bg);
   color: var(--color-text);
   border-radius: 50px;
   font-size: 13px;
   font-weight: 500;
   transition: var(--transition);
}

.blog-tags .tag:hover {
   background: var(--color-primary);
   color: #fff;
}

.blog-author-box {
   margin-top: 48px;
   padding: 32px;
   background: var(--color-bg);
   border-radius: 16px;
   display: flex;
   gap: 24px;
}

.blog-author-box .author-avatar {
   flex-shrink: 0;
}

.blog-author-box .author-avatar i {
   font-size: 80px;
   color: var(--color-accent);
}

.blog-author-box .author-info h4 {
   font-size: 21px;
   color: var(--color-primary);
   margin-bottom: 12px;
}

.blog-author-box .author-info p {
   color: #666;
   font-size: 15px;
   line-height: 1.6;
   margin-bottom: 16px;
}

.blog-author-box .author-social {
   display: flex;
   gap: 12px;
}

.blog-author-box .author-social a {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   border-radius: 50%;
   color: var(--color-primary);
   transition: var(--transition);
}

.blog-author-box .author-social a:hover {
   background: var(--color-accent);
   color: #fff;
}

.blog-sidebar {
   position: sticky;
   top: 100px;
   height: fit-content;
}

.blog-sidebar .sidebar-widget {
   background: #fff;
   border-radius: 16px;
   padding: 32px;
   margin-bottom: 32px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.blog-sidebar .sidebar-widget .widget-title {
   font-size: 21px;
   color: var(--color-primary);
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 2px solid var(--color-secondary);
}

.blog-sidebar .related-posts .related-post-item {
   display: flex;
   gap: 16px;
   margin-bottom: 24px;
   padding-bottom: 24px;
   border-bottom: 1px solid #f0f0f0;
}

.blog-sidebar .related-posts .related-post-item:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
}

.blog-sidebar .related-posts .related-post-image {
   width: 80px;
   height: 80px;
   flex-shrink: 0;
   border-radius: 8px;
   overflow: hidden;
}

.blog-sidebar .related-posts .related-post-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.blog-sidebar .related-posts .related-post-content {
   flex: 1;
}

.blog-sidebar .related-posts .related-post-category {
   display: inline-block;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--color-accent);
   margin-bottom: 6px;
}

.blog-sidebar .related-posts .related-post-content h4 {
   font-size: 15px;
   line-height: 1.4;
   margin-bottom: 8px;
}

.blog-sidebar .related-posts .related-post-content h4 a {
   color: var(--color-primary);
   transition: var(--transition);
}

.blog-sidebar .related-posts .related-post-content h4 a:hover {
   color: var(--color-accent);
}

.blog-sidebar .related-posts .related-post-date {
   font-size: 12px;
   color: #999;
}

.blog-sidebar .related-posts .related-post-date i {
   margin-right: 4px;
   color: var(--color-accent);
}

.blog-sidebar .category-list {
   list-style: none;
   padding: 0;
}

.blog-sidebar .category-list li {
   margin-bottom: 12px;
}

.blog-sidebar .category-list li a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
   background: var(--color-bg);
   border-radius: 8px;
   color: var(--color-text);
   transition: var(--transition);
}

.blog-sidebar .category-list li a:hover {
   background: var(--color-primary);
   color: #fff;
}

.blog-sidebar .category-list li a i {
   margin-right: 10px;
   color: var(--color-accent);
}

.blog-sidebar .category-list li a .count {
   font-size: 13px;
   color: #999;
}

.blog-sidebar .category-list li a:hover .count {
   color: rgba(255, 255, 255, 0.7);
}

.blog-sidebar .sidebar-cta {
   background: linear-gradient(135deg, var(--color-primary), #112240);
   color: #fff;
   text-align: center;
}

.blog-sidebar .sidebar-cta .cta-icon {
   font-size: 48px;
   color: var(--color-accent);
   margin-bottom: 16px;
}

.blog-sidebar .sidebar-cta h3 {
   font-size: 21px;
   color: #fff;
   margin-bottom: 12px;
   border: none;
   padding: 0;
}

.blog-sidebar .sidebar-cta p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 14px;
   margin-bottom: 24px;
}

.back-to-blog {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 32px 64px;
}

@media only screen and (max-width: 991px) {
   .blog-detail-header {
      padding: 120px 0 48px;
   }

   .blog-detail-header .container .blog-detail-meta {
      gap: 8px;
      margin-bottom: 15px;
   }

   .blog-detail-header .container .blog-detail-meta .blog-category {
      padding: 5px 10px;
   }

   .blog-detail-header .container h1 {
      font-size: 24px;
      margin-bottom: 18px;
   }

   .container.blog-detail-layout {
      grid-template-columns: 1fr;
      padding: 35px 15px 0;
      gap: 30px;
   }

   .blog-detail-content {
      padding: 32px 20px;
   }

   .blog-detail-content .blog-featured-image {
      margin: -45px -20px 12px -20px;
      height: initial;
   }

   .blog-body .lead-paragraph {
      font-size: 17px;
   }

   .blog-body h2 {
      font-size: 24px;
      margin-top: 32px;
   }

   .blog-body p {
      font-size: 16px;
   }

   .blog-body blockquote p {
      font-size: 18px;
   }

   .blog-author-box {
      flex-direction: column;
      text-align: center;
      padding: 24px;
   }

   .blog-sidebar {
      position: static;
   }

   .blog-author-box .author-social {
      justify-content: center;
   }

   .back-to-blog {
      padding: 0 15px 35px;
      text-align: center;
   }

   .blog-detail-header .container .blog-social-share .share-label {
      font-size: 14px;
   }

   .blog-detail-header .container .blog-social-share {
      gap: 6px;
      margin-right: 5px;
   }

   .blog-detail-header .container .blog-social-share .share-btn {
      width: 36px;
      height: 36px;
   }
}

@media only screen and (max-width: 768px) {
   .blog-detail-content {
      padding-bottom: 20px;
   }

   .blog-detail-header {
      padding: 95px 0 30px;
   }

   .blog-author-box {
      margin-top: 28px;
   }

   .blog-sidebar .sidebar-widget {
      padding: 20px;
   }
}

/* ===================================
   PROJECTS PAGE
   =================================== */

.projects-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
   gap: 35px;
   margin: 0 0 50px;
}

.projects-grid .project-main-card {
   position: relative;
   display: block;
   height: 440px;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
   transition: var(--transition);
}

.projects-grid .project-main-card .project-main-img-element {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.projects-grid .project-main-card .project-main-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(10, 25, 47, 0.95), rgba(10, 25, 47, 0.7) 70%, transparent);
   padding: 40px 30px;
   color: #fff;
   transition: var(--transition);
}

.projects-grid .project-main-card .project-main-overlay .project-date-badge {
   display: inline-block;
   background: var(--color-accent);
   color: #fff;
   padding: 6px 16px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 15px;
   letter-spacing: 0.5px;
}

.projects-grid .project-main-card .project-main-overlay h3 {
   font-size: 20px;
   margin-bottom: 5px;
   line-height: 23px;
   color: #fff;
}

.projects-grid .project-main-card .project-main-overlay p {
   font-size: 15px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 50px 0;
}

.pagination .pagination-btn,
.pagination .pagination-number {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   height: 44px;
   padding: 0 16px;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 500;
   transition: var(--transition);
   text-decoration: none;
}

.pagination .pagination-number {
   background: #fff;
   color: var(--color-primary);
   border: 1px solid #e0e0e0;
}

.pagination .pagination-number.active {
   background: var(--color-primary);
   color: #fff;
   border-color: var(--color-primary);
}

.pagination .pagination-btn {
   background: #fff;
   color: var(--color-primary);
   border: 1px solid #e0e0e0;
}

.pagination .pagination-btn.disabled {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
}

.project-cta-section {
   background: #fff;
   padding: 60px 50px;
   border-radius: 16px;
   text-align: center;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
   margin-top: 50px;
}

.project-cta-section h3 {
   font-size: 32px;
   color: var(--color-primary);
   margin-bottom: 15px;
}

.project-cta-section p {
   font-size: 17px;
   color: #555;
   margin-bottom: 30px;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
}

.project-cta-section .cta-buttons {
   display: flex;
   gap: 20px;
   justify-content: center;
   flex-wrap: wrap;
}

@media only screen and (min-width: 991px) {
   .projects-grid .project-main-card:hover {
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
   }

   .projects-grid .project-main-card:hover .project-main-overlay {
      background: linear-gradient(to top, rgba(10, 25, 47, 0.98), rgba(10, 25, 47, 0.85) 70%, transparent);
   }

   .pagination .pagination-number:hover {
      background: var(--color-secondary);
      border-color: var(--color-accent);
   }

   .pagination .pagination-btn:hover:not(.disabled) {
      background: var(--color-primary);
      color: #fff;
   }
}

@media only screen and (max-width: 991px) {
   .projects-grid {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 30px;
   }

   .projects-grid .project-main-card {
      height: 380px;
   }
}

@media only screen and (max-width: 768px) {
   .projects-grid {
      grid-template-columns: 1fr;
      gap: 25px;
   }

   .projects-grid .project-main-card {
      height: initial;
      height: initial;
      display: flex;
      flex-direction: column;
   }

   .projects-grid .project-main-card .project-main-img-element {
      height: initial;
   }

   .projects-grid .project-main-card .project-main-overlay {
      position: initial;
      background: none;
      padding: 15px;
   }

   .projects-grid .project-main-card .project-main-overlay h3 {
      color: var(--color-text);
      font-size: 18px;
      line-height: 21px;
   }

   .projects-grid .project-main-card .project-main-overlay p {
      font-size: 14px;
      color: var(--color-text);
   }

   .projects-grid .project-main-card .project-main-overlay .project-date-badge {
      font-size: 11px;
      padding: 2px 9px;
      margin-bottom: 10px;
      position: absolute;
      top: 10px;
      left: 10px;
      font-weight: 500;
   }

   .pagination {
      margin: 40px 0 20px;
      gap: 8px;
   }

   .pagination .pagination-btn,
   .pagination .pagination-number {
      min-width: 40px;
      height: 40px;
      padding: 0 12px;
      font-size: 14px;
   }

   .project-cta-section {
      padding: 40px 25px;
      margin-top: 40px;
   }

   .project-cta-section h3 {
      font-size: 26px;
   }

   .project-cta-section p {
      font-size: 15px;
   }

   .project-cta-section .cta-buttons {
      flex-direction: column;
      gap: 15px;
   }

   .project-cta-section .cta-buttons .btn {
      width: 100%;
      justify-content: center;
   }
}

/* ===================================
   PROJECT DETAIL PAGE
   =================================== */

.project-detail-container {
   max-width: 1200px;
   margin: 0 auto;
}

.project-detail-container .project-detail-hero {
   width: 100%;
   height: 600px;
   border-radius: var(--radius-lg);
   overflow: hidden;
   margin-bottom: var(--spacing-xl);
   box-shadow: var(--shadow-lg);
}

.project-detail-container .project-detail-hero img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.project-detail-container .project-info-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-xl);
}

.project-detail-container .project-info-grid .project-info-item {
   flex: 1;
   background: var(--color-white);
   padding: 20px;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   transition: var(--transition);
}

.project-detail-container .project-info-grid .project-info-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

.project-detail-container .project-info-grid .project-info-icon {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, var(--color-accent), #b8934d);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.project-detail-container .project-info-grid .project-info-icon i {
   font-size: 24px;
   color: var(--color-white);
}

.project-detail-container .project-info-grid .project-info-content {
   display: flex;
   flex-direction: column;
}

.project-detail-container .project-info-grid .project-info-label {
   font-size: 13px;
   color: var(--color-text-light);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 5px;
}

.project-detail-container .project-info-grid .project-info-value {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-primary);
}

.project-detail-container .project-detail-content {
   background: var(--color-white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   margin-bottom: var(--spacing-xl);
}

.project-detail-container .project-detail-content .project-section {
   margin-bottom: var(--spacing-xl);
   padding-bottom: var(--spacing-xl);
   border-bottom: 1px solid var(--color-border);
}

.project-detail-container .project-detail-content .project-section:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
}

.project-detail-container .project-detail-content .project-section h2 {
   font-size: 32px;
   color: var(--color-primary);
   margin-bottom: var(--spacing-md);
}

.project-detail-container .project-detail-content .project-section p {
   font-size: 17px;
   line-height: 1.8;
   color: var(--color-text-light);
   margin-bottom: var(--spacing-sm);
}

.project-detail-container .project-detail-content .project-list {
   list-style: none;
   padding: 0;
   margin: var(--spacing-md) 0;
}

.project-detail-container .project-detail-content .project-list li {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) 0;
   font-size: 16px;
   color: var(--color-text);
}

.project-detail-container .project-detail-content .project-list li i {
   color: var(--color-accent);
   margin-top: 4px;
   flex-shrink: 0;
}

.project-detail-container .project-detail-content .project-approach-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--spacing-md);
   margin-top: var(--spacing-lg);
}

.project-detail-container .project-detail-content .approach-card {
   background: var(--color-bg);
   padding: var(--spacing-lg);
   border-radius: var(--radius-md);
   transition: var(--transition);
}

.project-detail-container .project-detail-content .approach-card .approach-icon {
   width: 70px;
   height: 70px;
   background: linear-gradient(135deg, var(--color-primary), #0d2847);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--spacing-md);
}

.project-detail-container .project-detail-content .approach-card .approach-icon i {
   font-size: 28px;
   color: var(--color-white);
}

.project-detail-container .project-detail-content .approach-card h3 {
   font-size: 20px;
   color: var(--color-primary);
   margin-bottom: var(--spacing-sm);
}

.project-detail-container .project-detail-content .approach-card p {
   font-size: 15px;
   color: var(--color-text-light);
   margin: 0;
}

.project-detail-container .project-testimonial-section {
   background: linear-gradient(135deg, var(--color-primary), #0d2847);
   padding: var(--spacing-xl);
   border-radius: var(--radius-lg);
}

.project-detail-container .project-testimonial {
   text-align: center;
   max-width: 800px;
   margin: 0 auto;
}

.project-detail-container .project-testimonial .testimonial-icon {
   width: 80px;
   height: 80px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto var(--spacing-lg);
}

.project-detail-container .project-testimonial .testimonial-icon i {
   font-size: 36px;
   color: var(--color-accent);
}

.project-detail-container .project-testimonial .testimonial-text {
   font-size: 24px;
   font-style: italic;
   color: var(--color-white);
   line-height: 1.6;
   margin-bottom: var(--spacing-lg);
}

.project-detail-container .project-testimonial .testimonial-author {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.project-detail-container .project-testimonial .testimonial-author strong {
   font-size: 18px;
   font-weight: 600;
   color: var(--color-white);
}

.project-detail-container .project-testimonial .testimonial-author span {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.8);
}

/* Responsive - Project Detail */
@media only screen and (max-width: 992px) {
   .project-detail-container .project-info-grid {
      margin-bottom: 30px;
   }

   .project-detail-container .project-detail-content {
      padding: 20px;
      margin-bottom: 25px;
   }

   .project-detail-container .project-detail-content .project-approach-grid {
      grid-template-columns: 1fr;
   }

   .project-detail-container .project-detail-content .project-section {
      margin-bottom: 20px;
      padding-bottom: 20px;
   }

   .project-detail-container .project-detail-content .project-section h2 {
      font-size: 20px;
      margin-bottom: 10px;
   }

   .project-detail-container .project-detail-hero {
      height: 400px;
      margin-bottom: 30px;
      box-shadow: none;
   }

   .project-detail-container .project-detail-content .project-list li {
      padding: 4px 0;
   }

   .project-detail-container .project-info-grid .project-info-item {
      flex-direction: column;
      padding: 15px;
      gap: 10px;
      text-align: center;
   }

   .project-detail-container .project-info-grid .project-info-icon {
      width: 50px;
      height: 50px;
   }

   .project-detail-container .project-info-grid .project-info-icon i {
      font-size: 19px;
   }

   .project-detail-container .project-info-grid .project-info-label {
      margin-bottom: 0;
   }

   .project-detail-container .project-info-grid .project-info-value {
      font-size: 16px;
   }
}

@media only screen and (max-width: 768px) {
   .project-detail-container .project-info-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px
   }

   .project-detail-container .project-testimonial .testimonial-text {
      font-size: 20px;
   }

   .project-detail-container .project-testimonial-section {
      padding: var(--spacing-lg);
   }

   .project-detail-container .project-detail-hero {
      height: 300px;
   }

   .project-detail-container .project-detail-content .approach-card {
      padding: var(--spacing-md);
   }
}

/* ============================================
   404 PAGE STYLES
   ============================================ */

.page-404 {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 120px;
   padding-bottom: 80px;
   background: var(--color-primary);
}

.page-404 .error-content {
   text-align: center;
   max-width: 600px;
   margin: 0 auto;
}

.page-404 .error-number {
   font-size: 180px;
   font-weight: 700;
   background: linear-gradient(135deg, var(--color-accent), #8b7545);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   line-height: 1;
   margin-bottom: 24px;
   letter-spacing: -28px;
}

.page-404 h1 {
   font-size: 42px;
   color: white;
   margin-bottom: 16px;
}

.page-404 p {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.8;
   margin-bottom: 40px;
}

.page-404 .error-actions {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
}

.page-404 .btn-primary {
   background: var(--color-accent);
   color: white;
   border: 2px solid var(--color-accent);
}

.page-404 .btn-primary:hover {
   background: transparent;
   color: var(--color-accent);
}

.page-404 .btn-outline {
   background: transparent;
   color: white;
   border: 2px solid rgba(255, 255, 255, 0.3);
}

.page-404 .btn-outline:hover {
   background: white;
   color: var(--color-primary);
   border-color: white;
}

@media only screen and (max-width: 768px) {
   .page-404 {
      padding-top: 100px;
   }

   .page-404 .error-number {
      font-size: 120px;
   }

   .page-404 h1 {
      font-size: 32px;
   }

   .page-404 p {
      font-size: 16px;
   }

   .btn-outline {
      padding: 9px 22px;
      font-size: 14px;
   }
}

/* ============================================
   ABOUT PAGE ENHANCEMENTS
   ============================================ */

.about-detail-content .about-intro {
   margin-bottom: 40px;
}

.about-detail-content .about-intro h2 {

   font-size: 34px;
   font-weight: 700;
   color: var(--color-primary);
   margin-bottom: 24px;
   line-height: 1.2;
}

.about-detail-content .intro-paragraph {
   font-size: 16px;
   line-height: 1.9;
   color: var(--color-text);
   margin-bottom: 24px;
}

.about-detail-content .intro-paragraph strong {
   color: var(--color-accent);
}

.about-detail-content .features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}

.about-detail-content .features-grid .feature-item {
   text-align: center;
   padding: 40px 30px;
   background: white;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-detail-content .features-grid .feature-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--color-accent), #8b7545);
   border-radius: 50%;
   color: white;
}

.about-detail-content .features-grid .feature-icon i {
   font-size: 36px;
}

.about-detail-content .features-grid .feature-item h3 {
   font-size: 22px;
   color: var(--color-primary);
   margin-bottom: 16px;
   font-weight: 600;
}

.about-detail-content .features-grid .feature-item p {
   font-size: 15px;
   line-height: 1.8;
   color: #666;
   margin: 0;
}

.about-detail-content .about-quote {
   text-align: center;
   padding: 40px 20px;
   position: relative;
   background: linear-gradient(135deg, var(--color-primary), #0d2a4d);
   border-radius: 12px;
   margin-top: 50px;
}

.about-detail-content .about-quote i {
   font-size: 32px;
   color: rgba(255, 255, 255, 0.4);
   margin-bottom: 16px;
}

.about-detail-content .about-quote p {
   font-size: 24px;
   color: white;
   font-style: italic;
   line-height: 1.6;
   margin: 0;
   font-weight: 500;
}

@media only screen and (max-width: 992px) {
   .about-detail-content .features-grid {
      gap: 25px;
   }

   .about-detail-content .features-grid .feature-item {
      padding: 25px 20px;
   }

   .about-detail-content .about-intro h2 {
      font-size: 28px;
      margin-bottom: 15px;
   }

   .about-detail-content .about-quote {
      margin-top: 30px;
   }
}

@media only screen and (max-width: 768px) {
   .about-detail-content .about-quote p {
      font-size: 20px;
   }

   .about-detail-content .intro-paragraph {
      font-size: 15px;
      margin-bottom: 14px;
   }

   .about-detail-content .features-grid {
      grid-template-columns: 1fr;
      gap: 30px;
      margin: 30px 0;
   }

   .about-detail-content .features-grid .feature-item {
      padding: 30px 20px;
   }

   .about-detail-content .features-grid .feature-icon {
      width: 70px;
      height: 70px;
   }

   .about-detail-content .features-grid .feature-icon i {
      font-size: 32px;
   }

   .about-detail-content .features-grid .feature-item h3 {
      font-size: 20px;
   }
}


/* ============================================
   CONTRACT PAGE STYLES
   ============================================ */

.contract-content h2 {
   font-size: 28px;
   color: #1a1a1a;
   margin-bottom: 24px;
   font-weight: 600;
}

.contract-content h3 {
   font-size: 20px;
   color: #1a1a1a;
   margin-top: 36px;
   margin-bottom: 16px;
   font-weight: 600;
}

.contract-content h4 {
   font-size: 16px;
   color: #1a1a1a;
   margin-top: 20px;
   margin-bottom: 10px;
   font-weight: 600;
}

.contract-content p {
   font-size: 15px;
   line-height: 1.8;
   color: #333;
   margin-bottom: 16px;
   text-align: justify;
}

.contract-content ul,
.contract-content ol {
   margin: 16px 0;
   padding-left: 30px;
}

.contract-content ul li,
.contract-content ol li {
   font-size: 15px;
   line-height: 1.8;
   color: #333;
   margin-bottom: 8px;
}

.contract-content ul li {
   list-style-type: disc;
}

.contract-content ol li {
   list-style-type: decimal;
}

.contract-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 24px 0;
   border: 1px solid #ddd;
}

.contract-content table thead {
   background: #f5f5f5;
}

.contract-content table thead th {
   color: #1a1a1a;
   font-weight: 600;
   padding: 12px;
   text-align: left;
   font-size: 14px;
   border: 1px solid #ddd;
}

.contract-content table tbody tr {
   border-bottom: 1px solid #ddd;
}

.contract-content table tbody td {
   padding: 10px 12px;
   font-size: 14px;
   color: #333;
   border: 1px solid #ddd;
}

.contract-content strong {
   color: #1a1a1a;
   font-weight: 600;
}

@media only screen and (max-width: 768px) {
   .contract-content h2 {
      font-size: 24px;
   }

   .contract-content h3 {
      font-size: 18px;
      margin-top: 30px;
   }

   .contract-content h4 {
      font-size: 15px;
   }

   .contract-content p,
   .contract-content ul li,
   .contract-content ol li {
      font-size: 14px;
   }

   .contract-content table thead th,
   .contract-content table tbody td {
      padding: 10px;
      font-size: 13px;
   }
}


/* ============================================
   TEAMS PAGE STYLES
   ============================================ */
.teams-page .teams-modern-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
   gap: 40px;
}

.teams-page .team-modern-card {
   background: #fff;
   border-radius: 16px;
   padding: 30px 15px;
   text-align: center;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
   transition: all 0.3s ease;
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.teams-page .team-modern-card .team-modern-photo {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: 15px;
   box-shadow: 0 4px 24px 0 rgba(197, 160, 89, 0.13);
   border: 5px solid #232e44;
   background: #fff;
   transition: .3s;
}

.teams-page .team-modern-card .team-modern-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.teams-page .team-modern-card .team-modern-info h3 {
   font-size: 18px;
}

.teams-page .team-modern-card .team-modern-title {
   color: var(--color-accent);
   font-size: 15px;
   margin-bottom: 20px;
   font-weight: 500;
   letter-spacing: 0.1px;
}

.teams-page .team-modern-card .team-modern-socials {
   display: flex;
   justify-content: center;
   gap: 18px;
}

.teams-page .team-modern-card .team-modern-socials a {
   color: var(--color-accent);
   background: #fff;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   transition: var(--transition);
   box-shadow: 0 2px 10px 0 rgba(197, 160, 89, 0.13);
   opacity: 0.92;
   border: 1px solid #c5a0591f;
}

@media only screen and (min-width: 991px) {
   .teams-page .team-modern-card:hover {
      transform: translateY(-10px);
   }

   .teams-page .team-modern-card:hover .team-modern-photo img {
      box-shadow: 0 0 0 6px rgba(197, 160, 89, 0.18), 0 8px 32px 0 rgba(10, 25, 47, 0.18);
      transition: box-shadow 0.3s;
   }

   .teams-page .team-modern-card .team-modern-socials a:hover {
      background: var(--color-accent);
      color: #fff;
      transform: translateY(-2px) scale(1.11);
      opacity: 1;
   }

   .teams-page .team-modern-card:hover .team-modern-photo {
      border-color: var(--color-accent);
      box-shadow: 0 -20px 20px 0 rgb(197 160 89 / 34%);
   }
}

@media only screen and (max-width: 991px) {
   .teams-page .teams-modern-grid {
      gap: 22px;
   }

   .teams-page .team-modern-card {
      padding: 28px 10px 18px 10px;
   }

   .teams-page .team-modern-card .team-modern-photo {
      width: 90px;
      height: 90px;
      margin-bottom: 14px;
   }

   .teams-page .team-modern-card .team-modern-info h3 {
      font-size: 17px;
   }

   .teams-page .team-modern-card .team-modern-title {
      font-size: 13px;
      margin-bottom: 10px;
   }

   .teams-page .team-modern-card .team-modern-socials a {
      width: 32px;
      height: 32px;
      font-size: 15px;
   }
}

.hero-bg-mobile {
   display: none;
}

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

   .hero-bg-mobile {
      display: block;
   }
}