/* Custom styles for Dubai Start website */

/* News Carousel Custom Styles */
.news-carousel .owl-nav button.owl-prev,
.news-carousel .owl-nav button.owl-next {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1e3c72 !important;
  border-radius: 50% !important;
  width: 45px !important;
  height: 45px !important;
  font-size: 18px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.3s ease !important;
  border: 2px solid #1e3c72 !important;
}

.news-carousel .owl-nav button.owl-prev:hover,
.news-carousel .owl-nav button.owl-next:hover {
  background: #1e3c72 !important;
  color: white !important;
  transform: translateY(-50%) scale(1.1) !important;
}

.news-carousel .owl-nav button.owl-prev {
  left: -25px !important;
}

.news-carousel .owl-nav button.owl-next {
  right: -25px !important;
}

.news-carousel .owl-dots {
  text-align: center !important;
  margin-top: 20px !important;
}

.news-carousel .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.5) !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 5px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.news-carousel .owl-dots .owl-dot.active span {
  background: white !important;
  transform: scale(1.2) !important;
}

.news-card {
  transition: all 0.3s ease !important;
}

.news-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.announcement-item {
  cursor: pointer;
}

@media (max-width: 768px) {
  .news-carousel .owl-nav {
    display: none !important;
  }

  #news-anouncment h2 {
    font-size: 2rem !important;
  }

  .announcements-section {
    margin-bottom: 30px !important;
  }
}

@media (min-width: 992px) {
  #top-bar.transparent-topbar {
    z-index: 399;
    border-bottom: 0;
    margin-top: 0px;
  }

  #top-bar.transparent-topbar {
    background: transparent !important;
  }

  #top-bar + #header.transparent-header.floating-header {
    margin-top: -20px;
  }
  #top-bar + #header.transparent-header.floating-header:not(.sticky-header) img {
    margin-top: -50px;
  }
}

.dark .top-links li > a,
.dark #top-social li a {
  color: #fff;
}

.dark .top-links li:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.dark #top-social li {
  border-left: 0;
}

/* Section background updated to solid */
#news-anouncment {
  background: #091b3d;
  color: #ffffff;
}

/* Headings */
#news-anouncment .section-title {
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff; /* headings white as requested */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* Announcements (left) */
.announcements-card {
  background: transparent; /* remove card background */
  border: none; /* remove borders */
  border-radius: 0;
  padding: 0;
  padding-right: 10px;
  backdrop-filter: none;
}
.announcement-item {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.announcement-item:hover {
  background: transparent;
}
.announcement-item:last-child {
  border-bottom: 0;
}
.date-box {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}
.date-day {
  font-size: 18px;
}
.date-month {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.9;
}
.announcement-content h5 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #ffffff;
}
.announcement-content p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.btn-view-all-container {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}
.btn-view-all-container:hover {
  text-decoration: none;
}
.btn-view-all-container .btn-icon {
  background: #00c8c8;
  color: #091b3d;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.btn-view-all-container span {
  color: #fff;
  font-weight: 600;
}

/* News (right) */
.news-item {
  position: relative;
  margin-bottom: 60px;
}
.news-thumb {
  height: 320px; /* Taller images 3:4 ratio-like */
  background-size: cover;
  background-position: center;
  border-radius: 0;
  overflow: hidden;
}
.news-body {
  position: absolute;
  bottom: -40px;
  height: 100px;
  left: 0px;
  right: 0px;
  padding: 20px;
  padding-top: 40px;
  background: linear-gradient(to top, #091b3d 50%, transparent);
  border-radius: 0px;
}
.news-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.news-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 45px; /* fallback for browsers that don't support -webkit-line-clamp */
}
.news-controls {
  display: flex;
  gap: 10px;
}
.news-controls .nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: 0.2s;
}
.news-controls .nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.owl-dots {
  display: none !important;
}

@media (min-width: 992px) {
  #news-anouncment .row > .col-lg-5 {
    border-right: 1px dashed rgba(255, 255, 255, 0.25);
  }
}

/********************************************************************************
Events Section
********************************************************************************/
#events .section-title {
  font-weight: 800;
  letter-spacing: 2px;
  color: #091b3d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.event-item {
  position: relative;
  height: 360px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
}
.event-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(9, 27, 61, 0.9) 20%, rgba(9, 27, 61, 0.5) 60%, transparent 100%);
  z-index: 1;
}
.event-item > * {
  z-index: 2;
}
.event-title {
  font-size: 18px;
  font-weight: 700;
}
.event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.event-date {
  background: #00c8c8;
  color: #091b3d;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.1;
}
.event-date .day {
  font-size: 20px;
  font-weight: 700;
}
.event-date .month {
  font-size: 12px;
  font-weight: 600;
}
.event-detail a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
#events .news-controls .nav-btn {
  background: #091b3d;
  color: #fff;
  border: 1px solid #091b3d;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 0px;
  transition: all 0.3s;
}
#events .news-controls .nav-btn:hover {
  background: #fff;
  color: #091b3d;
}

.dubai-footer {
  background-color: #162747 !important;
  color: #ffffff !important;
  padding-top: 10px !important;
  padding-bottom: 0px !important;
  margin-top: 0 !important;
}

.dubai-footer .logo-links-section {
  align-items: center;
}

.dubai-footer .footer-logo {
  max-width: 200px;
  height: auto;
}

/* White Separator Line */
.dubai-footer .footer-separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 30px 0;
}

/* Contact Boxes */
.dubai-footer .contact-boxes {
  margin-bottom: 50px;
}

.dubai-footer .contact-box {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 5px;
  height: 100%;
}

.dubai-footer .contact-title {
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.dubai-footer .contact-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dubai-footer .contact-content i {
  color: #ffffff;
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 16px;
}

.dubai-footer .contact-content span {
  font-size: 14px;
  line-height: 1.5;
}

/* Footer Links Section */
.dubai-footer .footer-links-section .footer-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: 1px;
}

/* Footer Bottom Links */
.dubai-footer .footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: end;
  margin-bottom: 30px;
}

.dubai-footer .footer-bottom-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s ease;
}

.dubai-footer .footer-bottom-links a:hover {
  color: #ccc;
}

/* Copyright Section */
.dubai-footer .footer-copyright-section {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.baloon {
  margin-top: -150px;
}

@media (max-width: 1200px) {
  .baloon {
    margin-top: 0px;
  }
}

/* 2-Row Roadmap Styles */
.roadmap-container-2row {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.roadmap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: nowrap;
}

.roadmap-row.reverse {
  flex-direction: row;
}

.roadmap-step {
  background: linear-gradient(135deg, #081b3d 0%, #0b2047 100%);
  border-radius: 999px;
  border: 0 10px 10px 0 solid #081b3d;
  padding: 20px 15px;
  text-align: center;
  color: #081b3d;
  width: 160px;
  height: 120px;
  box-shadow: 0 8px 25px #081b3d20;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.roadmap-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px #081b3d;
}

.step-number {
  background: #fff;
  color: #081b3d;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.step-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}

.roadmap-arrow {
  color: #081b3d;
  font-size: 20px;
  font-weight: bold;
  margin: 0 5px;
  flex-shrink: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.roadmap-down-arrow {
  color: #081b3d;
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0;
  align-self: flex-end;
  margin-right: 60px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile 2-Column Vertical Roadmap */
.roadmap-container-2row-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Desktop versiyonu gizle, mobile'i göster */
  .roadmap-container-2row {
    display: none;
  }

  .roadmap-container-2row-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0;
    align-items: start;
  }

  /* Her sütunun kendi dikey akışı */
  .roadmap-row-mobile {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    gap: 24px;
  }

  /* İlk grup sol sütun, ikinci grup sağ sütun */
  .roadmap-row-mobile:nth-child(1) {
    grid-column: 1;
  }
  .roadmap-row-mobile:nth-child(2) {
    grid-column: 2;
    margin-top: 72px;
  }

  /* Kart stilleri (desktop ile tutarlı, biraz kompakt) */
  .roadmap-step-mobile {
    background: linear-gradient(135deg, #081b3d 0%, #0b2047 100%);
    border-radius: 999px;
    padding: 6px 12px;
    color: #081b3d;
    width: 100%;
    min-height: 120px;
    box-shadow: 0 8px 25px #081b3d20;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .roadmap-step-mobile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px #081b3d20;
  }

  /* Mevcut .step-number ve .step-title mobile'a da uygulanıyor; biraz küçültelim */
  .roadmap-step-mobile .step-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-bottom: 14px;
  }

  .roadmap-step-mobile .step-title {
    font-size: 12px;
    line-height: 1.25;
  }
}

/* Daha dar cihazlar için sıkılaştırma */
@media (max-width: 420px) {
  .roadmap-container-2row-mobile {
    gap: 12px 10px;
  }
  .roadmap-row-mobile:nth-child(2) {
    margin-top: 60px;
  }
  .roadmap-row-mobile {
    gap: 20px;
  }
  .roadmap-step-mobile {
    min-height: 88px;
    padding: 14px 10px;
  }
  .roadmap-step-mobile .step-title {
    font-size: 11px;
  }
}

.dubai-footer .social-icons {
  display: flex;
  gap: 10px;
}

.dubai-footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.dubai-footer .social-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.dubai-footer .footer-copyright {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .dubai-footer .footer-bottom-links {
    justify-content: center;
    margin-bottom: 20px;
  }

  .dubai-footer .footer-copyright {
    text-align: center !important;
  }

  .dubai-footer .social-icons {
    justify-content: center;
    margin-bottom: 15px;
  }

  .dubai-footer .contact-boxes {
    margin-bottom: 30px;
  }
}

/* Sectors section solid blue background with white dots */
#sectors {
  background-color: #091b3d;
  position: relative;
  overflow: hidden;
}

/* Add white dots pattern overlay */
#sectors::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  /* Smooth Scrolling Offset */
  #sectors,
  #setting-up,
  #news-anouncment,
  #events,
  #footer {
    scroll-margin-top: 100px;
  }
  bottom: 0;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 30px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 50px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 70px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 90px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 110px 10px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 10px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 30px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 50px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 70px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 90px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 110px 30px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 10px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 30px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 50px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 70px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 90px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
    radial-gradient(circle at 110px 50px, rgba(255, 255, 255, 0.03) 2px, transparent 2px);
  background-size: 120px 60px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
}

/* Ensure content stays above the overlay */
#sectors .content-wrap {
  position: relative;
  z-index: 2;
}

/* Adjust text colors for better contrast on dark background */
#sectors h2 {
  color: #ffffff;
}

#sectors p {
  color: #e8e8e8;
}

/* Style the tab navigation for better visibility on dark background */
#sectors .nav-link {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#sectors .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

#sectors .nav-link.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* Adjust tab content background for better readability */

/* Additional lines extending from the left dot - using separate container approach */

/* SECTORS title styling with dot and line */
#sectors .heading-block {
  text-align: left !important;
  position: relative;
  display: block;
  width: 100%;
}
@media (max-width: 768px) {
  #sectors .heading-block {
    transform: translateX(40px);
    z-index: 99;
    margin-bottom: 0 !important;
  }
}

#sectors .heading-block h2 {
  font-size: 4rem !important;
  font-weight: bold !important;
  margin-bottom: 0 !important;
  position: relative;
  display: inline-block;
  z-index: 3;
}

/* Dot after SECTORS title */
#sectors .heading-block h2::after {
  content: '';
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 3px solid rgba(0, 188, 212, 0.3);
  border-radius: 50%;
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

#sectors .heading-block h2::before {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #00bcd4;
  border-radius: 50%;
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

#sectors .heading-block:after {
  content: '';
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 3px solid rgba(0, 188, 212, 0.3);
  border-radius: 50%;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

#sectors .heading-block:before {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #00bcd4;
  border-radius: 50%;
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* Line block styling */
#sectors .line-block {
  position: relative;
  height: 100px;
}

/* Horizontal dashed line - full width of the block */
#sectors .line-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 48%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #464646 0%, rgb(61, 61, 61) 50%, transparent 50%, transparent 100%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  transform: translateY(-50%);
  z-index: 2;
}

/* Vertical dashed line going up from right edge */
#sectors .line-block::after {
  content: '';
  position: absolute;
  right: 0;
  top: -50px;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, #464646 0%, rgb(61, 61, 61) 50%, transparent 50%, transparent 100%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  z-index: 2;
}
/* Container for the extended lines */
#sectors .extended-lines {
  position: absolute;
  left: -72px; /* 50px to the left of the dot */
  top: 48px;
  transform: translateY(-50%);
  z-index: 1;
}

/* Horizontal line extending 50px to the left from the left dot */
#sectors .extended-lines::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, #464646 0%, rgb(61, 61, 61) 50%, transparent 50%, transparent 100%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  z-index: 1;
}

/* Vertical line going down from the end of horizontal line to section bottom */
#sectors .extended-lines::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100000px; /* Adjust this value based on section height */
  background: linear-gradient(to bottom, #464646 0%, rgb(61, 61, 61) 50%, transparent 50%, transparent 100%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  z-index: 1;
}

/* SECTORS title styling with dot and line */
#setting-up .heading-block {
  text-align: left !important;
  position: relative;
  display: block;
}

#setting-up .heading-block h2 {
  font-size: 4rem !important;
  font-weight: bold !important;
  margin-bottom: 0 !important;
  position: relative;
  display: inline-block;
  z-index: 3;
}
@media (max-width: 768px) {
  #setting-up .heading-block {
    width: 300%;
    transform: translateX(40px);
    z-index: 99;
  }
  #setting-up .heading-block h2 {
    font-size: 3rem !important;
  }
}

/* Dot after SECTORS title */
#setting-up .heading-block h2::after {
  content: '';
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 3px solid rgba(0, 188, 212, 0.3);
  border-radius: 50%;
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

#setting-up .heading-block h2::before {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #00bcd4;
  border-radius: 50%;
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

#setting-up .heading-block:after {
  content: '';
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: 3px solid rgba(0, 188, 212, 0.3);
  border-radius: 50%;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

#setting-up .heading-block:before {
  content: '';
  width: 16px;
  height: 16px;
  background-color: #00bcd4;
  border-radius: 50%;
  position: absolute;
  left: -32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* Line block styling */
#setting-up .line-block {
  position: relative;
  height: 100px;
}

/* Horizontal dashed line - full width of the block */
#setting-up .line-block::before {
  content: '';
  position: absolute;
  left: -70px;
  top: 48%;
  width: 210px;
  height: 2px;
  background: linear-gradient(to right, #b3b3b3 0%, #b3b3b3 50%, transparent 50%, transparent 100%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  transform: translateY(-50%);
  z-index: 2;
}

/* Vertical dashed line going up from right edge */
#setting-up .line-block::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50px;
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, #b3b3b3 0%, #b3b3b3 50%, transparent 50%, transparent 100%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  z-index: 2;
}

/* Container for the extended lines */
#setting-up .extended-lines {
  position: absolute;
  left: -72px;
  /* 50px to the left of the dot */
  top: 48px;
  transform: translateY(-50%);
  z-index: 1;
}

@media (max-width: 768px) {
  .mobille-hidden {
    display: none !important;
  }
}

/* Horizontal line extending 50px to the left from the left dot */
#setting-up .extended-lines::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, #b3b3b3 0%, #b3b3b3 50%, transparent 50%, transparent 100%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  z-index: 1;
}

/* Vertical line going down from the end of horizontal line to section bottom */
#setting-up .extended-lines::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100px;
  width: 2px;
  height: 100px;
  /* Adjust this value based on section height */
  background: linear-gradient(to bottom, #b3b3b3 0%, #b3b3b3 50%, transparent 50%, transparent 100%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  z-index: 1;
}

/* ===== CUSTOM TAB DESIGN STYLES ===== */

/* Carousel Tabs Dark - Override Owl Carousel Styles */
#carousel-tabs-dark.nav-tabs {
  border-bottom: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

#carousel-tabs-dark .nav-item {
  padding: 0 !important;
  margin: 0 !important;
}

#carousel-tabs-dark .nav-link:hover {
  background: linear-gradient(135deg, #5a6a82 0%, #1a2d4f 100%) !important;
  color: white !important;
}

#carousel-tabs-dark .nav-link.active {
  background: #00bcd4 !important;
  color: white !important;
  position: relative !important;
}

#carousel-tabs-dark .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bcd4;
  z-index: 10;
}

/* Owl Carousel specific overrides */
#carousel-tabs-dark.owl-carousel .owl-item {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 185.2px !important;
}

#carousel-tabs-dark.owl-carousel .owl-stage {
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 10px !important;
}

#carousel-tabs-dark.owl-carousel .owl-stage-outer {
  padding: 0 !important;
  margin: 0 !important;
}

/* Passive tab solid colors - progression from #536078 to #162747 */
/* Owl Carousel wraps each nav-item in owl-item, so we target that structure */
#carousel-tabs-dark .owl-item:nth-child(1) .nav-link:not(.active) {
  background-color: #536078 !important;
}

#carousel-tabs-dark .owl-item:nth-child(2) .nav-link:not(.active) {
  background-color: #4a5670 !important;
}

#carousel-tabs-dark .owl-item:nth-child(3) .nav-link:not(.active) {
  background-color: #414c68 !important;
}

#carousel-tabs-dark .owl-item:nth-child(4) .nav-link:not(.active) {
  background-color: #384260 !important;
}

#carousel-tabs-dark .owl-item:nth-child(5) .nav-link:not(.active) {
  background-color: #2f3858 !important;
}

#carousel-tabs-dark .owl-item:nth-child(6) .nav-link:not(.active) {
  background-color: #262e50 !important;
}

#carousel-tabs-dark .owl-item:nth-child(7) .nav-link:not(.active) {
  background-color: #162747 !important;
}

/* Tab navigation container */
#carousel-tabs-dark {
  background: transparent !important;
  border: none !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  position: relative !important;
  padding: 0 !important;
}

/* Individual tab items - no gaps */
#carousel-tabs-dark .nav-item {
  margin: 0 !important;
  border: none !important;
  flex: 1 !important;
  padding: 0 !important;
}

/* Tab buttons styling - seamless connection */
#carousel-tabs-dark .nav-link {
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 30px 30px !important;
  margin: 0 !important;
  position: relative !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
}

/* Active tab styling - current turkuaz color */
#carousel-tabs-dark .nav-link.active {
  background-color: #00bcd4 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* Triangle arrow indicator for active tab */
#carousel-tabs-dark .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #00bcd4;
  z-index: 11;
}

/* Hover effect for inactive tabs */
#carousel-tabs-dark .nav-link:not(.active):hover {
  opacity: 0.8 !important;
  color: #ffffff !important;
}

/* Tab content area */
#canvas-TabContent {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 3rem !important;
}

/* Tab pane styling */
#canvas-TabContent .tab-pane {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Statistics boxes styling */

/* Stats collage layout for finance section */
.stats-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'img1 img1 stat3 stat3 mainimg mainimg mainimg mainimg'
    'stat1 stat1 stat3 stat3 mainimg mainimg mainimg mainimg'
    'stat1 stat1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'stat6 stat6 stat2 stat2 mainimg mainimg mainimg mainimg'
    'img2 img2 img2 img2 stat5 stat5 stat4 stat4'
    'img2 img2 img2 img2 stat5 stat5 stat4 stat4';
  gap: 10px;
  position: relative;
}

/* Individual grid areas */
.stat-box[style*='stat1'] {
  grid-area: stat1;
}
.stat-box[style*='stat2'] {
  grid-area: stat2;
}
.stat-box[style*='stat3'] {
  grid-area: stat3;
}
.stat-box[style*='stat4'] {
  grid-area: stat4;
}
.stat-box[style*='stat5'] {
  grid-area: stat5;
}
.stat-box[style*='stat6'] {
  grid-area: stat6;
}
img[style*='mainimg'] {
  grid-area: mainimg;
}
img[style*='img1'] {
  grid-area: img1;
}
img[style*='img2'] {
  grid-area: img2;
}
img[style*='img3'] {
  grid-area: img3;
}
img[style*='img4'] {
  grid-area: img4;
}

/* Stat box base style */
.stat-box {
  padding: 0.75rem;
  text-align: center;
  color: white !important;
  overflow: hidden;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 65px;
  font-size: 0.8rem;
  line-height: 1.3;
  word-wrap: break-word;
  hyphens: auto;
}
.stat-box h6 {
  color: #ffffff !important;
  font-size: 0.75rem !important;
  margin: 0 0 0.3rem 0 !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.stat-box h5 {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  margin: 0.3rem 0 0 0 !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

/* Color variants */
.stat-box.turquoise {
  background: rgba(0, 188, 212, 0.6);
}

.stat-box.dark-turquoise {
  background: rgba(0, 96, 100, 0.6);
}

/* Images in collage */

/* Stat box text styling */
.stats-box h3 {
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

.stats-box p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Content layout improvements */

/* Image styling in tabs */
.tab-image {
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  max-height: 400px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Detail button styling */
.detail-button {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.detail-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ===== NEW SECTOR GRID LAYOUTS ===== */

/* Tourism Grid Layout */
.tourism-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'img1 img1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'img1 img1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'img1 img1 stat4 stat4 mainimg mainimg mainimg mainimg'
    'stat3 stat3 stat4 stat4 mainimg mainimg mainimg mainimg'
    'stat1 stat1 img2 img2 stat5 stat5 stat5 stat5'
    'stat1 stat1 img2 img2 stat5 stat5 stat5 stat5';
  gap: 10px;
  position: relative;
}

/* Real Estate Grid Layout */
.realestate-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'stat2 stat2 stat1 stat1 mainimg mainimg mainimg mainimg'
    'img1 img1 stat1 stat1 mainimg mainimg mainimg mainimg'
    'img1 img1 stat3 stat3 mainimg mainimg mainimg mainimg'
    'img1 img1 stat3 stat3 mainimg mainimg mainimg mainimg'
    ' img2 img2 img2 img2 stat4 stat4 stat4 stat4'
    ' img2 img2 img2 img2 stat4 stat4 stat4 stat4';
  gap: 10px;
  position: relative;
}

/* Logistics Grid Layout */
.logistics-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'stat3 stat3 stat5 stat5 img1 img1 img1 img1'
    'stat1 stat1 stat5 stat5 img1 img1 img1 img1'
    'mainimg mainimg mainimg mainimg stat4 stat4 stat4 stat4'
    'mainimg mainimg mainimg mainimg stat4 stat4 stat4 stat4'
    'mainimg mainimg mainimg mainimg stat2 stat2 img2 img2'
    'mainimg mainimg mainimg mainimg stat2 stat2 img2 img2';
  gap: 10px;
  position: relative;
}

/* Technology Grid Layout */
.technology-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'mainimg mainimg mainimg mainimg stat2 stat2 img1 img1 '
    'mainimg mainimg mainimg mainimg stat1 stat1 img1 img1 '
    ' mainimg mainimg mainimg mainimg stat1 stat1 img1 img1'
    ' mainimg mainimg mainimg mainimg stat1 stat1 stat3 stat3'
    'stat5 stat5 stat4 stat4 img2 img2 img2 img2'
    'stat5 stat5 stat4 stat4 img2 img2 img2 img2';
  gap: 10px;
  position: relative;
}

/* Retail Grid Layout */
.retail-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'stat1 stat1 stat1 stat1 mainimg mainimg mainimg mainimg'
    'img1 img1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'img1 img1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'img1 img1 stat2 stat2 mainimg mainimg mainimg mainimg'
    'stat5 stat5 img2 img2 stat4 stat4 stat4 stat3'
    'stat5 stat5 img2 img2 stat4 stat4 stat4 stat3';
  gap: 10px;
  position: relative;
}

/* Healthcare Grid Layout */
.healthcare-collage {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 65px);
  grid-template-areas:
    'stat1 stat1 stat3 stat3 mainimg mainimg mainimg mainimg'
    'img2 img2 stat3 stat3 mainimg mainimg mainimg mainimg'
    'img2 img2 stat2 stat2 mainimg mainimg mainimg mainimg'
    'stat5 stat5 stat2 stat2 mainimg mainimg mainimg mainimg'
    'stat5 stat5 stat4 stat4 mainimg mainimg mainimg mainimg'
    'img1 img1 stat4 stat4 mainimg mainimg mainimg mainimg';
  gap: 10px;
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #carousel-tabs-dark .nav-link {
    font-size: 0.8rem !important;
    padding: 10px 16px !important;
  }

  .stats-box h3 {
    font-size: 1.5rem !important;
  }

  .stats-box p {
    font-size: 0.75rem !important;
  }
}

/* Floating Gallery Design */
.floating-gallery {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.main-circle {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 188, 212, 0.3);
  z-index: 2;
}

.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.satellite-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.satellite-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  animation: float 6s ease-in-out infinite;
}

.satellite-circle:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(0, 188, 212, 0.4);
}

.satellite-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background circle for main image */
.main-circle::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  background: linear-gradient(
    135deg,
    rgba(30, 144, 255, 0.8) 0%,
    rgba(65, 105, 225, 0.6) 25%,
    rgba(135, 206, 235, 0.4) 50%,
    rgba(173, 216, 230, 0.2) 75%,
    transparent 100%
  );
  border-radius: 50%;
  z-index: -1;
  border: 2px solid rgba(30, 144, 255, 0.3);
  backdrop-filter: blur(2px);
}
@media (max-width: 768px) {
  .satellite-1 {
    top: 5%;
    left: 45%;
    width: 55px;
    height: 55px;
    transform: translateX(-50%) rotate(15deg);
    animation-delay: -0.5s;
  }

  .satellite-2 {
    top: 15%;
    right: 8%;
    width: 35px;
    height: 35px;
    transform: rotate(-20deg);
    animation-delay: -1s;
  }

  .satellite-3 {
    top: 45%;
    right: 2%;
    width: 45px;
    height: 45px;
    transform: translateY(-50%) rotate(30deg);
    animation-delay: -1.5s;
  }

  .satellite-4 {
    bottom: 20%;
    right: 12%;
    width: 95px;
    height: 95px;
    transform: rotate(-45deg);
    animation-delay: -2s;
  }

  .satellite-5 {
    bottom: 8%;
    left: 48%;
    width: 40px;
    height: 40px;
    transform: translateX(-50%) rotate(60deg);
    animation-delay: -2.5s;
  }

  .satellite-6 {
    bottom: 18%;
    left: 10%;
    width: 50px;
    height: 50px;
    transform: rotate(-30deg);
    animation-delay: -3s;
  }

  .satellite-7 {
    top: 40%;
    left: 1%;
    width: 42px;
    height: 42px;
    transform: translateY(-50%) rotate(45deg);
    animation-delay: -3.5s;
  }

  .satellite-8 {
    top: 20%;
    left: 12%;
    width: 65px;
    height: 65px;
    transform: rotate(-60deg);
    animation-delay: -4s;
  }
}

/* Positioning satellites around the main circle with different sizes */
.satellite-1 {
  top: 8%;
  left: 45%;
  width: 100px;
  height: 100px;
  transform: translateX(-50%) rotate(15deg);
  animation-delay: -0.5s;
}

.satellite-2 {
  top: 25%;
  right: 8%;
  width: 55px;
  height: 55px;
  transform: rotate(-20deg);
  animation-delay: -1s;
}

.satellite-3 {
  top: 45%;
  right: -4%;
  width: 65px;
  height: 65px;
  transform: translateY(-50%) rotate(30deg);
  animation-delay: -1.5s;
}

.satellite-4 {
  bottom: 10%;
  right: 2%;
  width: 115px;
  height: 115px;
  transform: rotate(-45deg);
  animation-delay: -2s;
}

.satellite-5 {
  bottom: 8%;
  left: 48%;
  width: 60px;
  height: 60px;
  transform: translateX(-50%) rotate(60deg);
  animation-delay: -2.5s;
}

.satellite-6 {
  bottom: 18%;
  left: 10%;
  width: 70px;
  height: 70px;
  transform: rotate(-30deg);
  animation-delay: -3s;
}

.satellite-7 {
  top: 40%;
  left: -3%;
  width: 62px;
  height: 62px;
  transform: translateY(-50%) rotate(45deg);
  animation-delay: -3.5s;
}

.satellite-8 {
  top: 20%;
  left: 6%;
  width: 85px;
  height: 85px;
  transform: rotate(-60deg);
  animation-delay: -4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

/* Responsive adjustments for floating gallery */
@media (max-width: 768px) {
  .floating-gallery {
    height: 450px;
    padding: 30px;
  }

  .main-circle {
    width: 200px;
    height: 200px;
  }

  .main-circle::before {
    top: -45px;
    left: -45px;
    width: calc(100% + 90px);
    height: calc(100% + 90px);
  }

  .satellite-1 {
    width: 45px;
    height: 45px;
  }
  .satellite-2 {
    width: 28px;
    height: 28px;
  }
  .satellite-3 {
    width: 38px;
    height: 38px;
  }
  .satellite-4 {
    width: 52px;
    height: 52px;
  }
  .satellite-5 {
    width: 32px;
    height: 32px;
  }
  .satellite-6 {
    width: 42px;
    height: 42px;
  }
  .satellite-7 {
    width: 35px;
    height: 35px;
  }
  .satellite-8 {
    width: 75px;
    height: 75px;
  }
}

@media (max-width: 480px) {
  .floating-gallery {
    height: 350px;
    padding: 20px;
  }

  .main-circle {
    width: 160px;
    height: 160px;
  }

  .main-circle::before {
    top: -35px;
    left: -35px;
    width: calc(100% + 70px);
    height: calc(100% + 70px);
  }

  .satellite-1 {
    width: 38px;
    height: 38px;
  }
  .satellite-2 {
    width: 25px;
    height: 25px;
  }
  .satellite-3 {
    width: 32px;
    height: 32px;
  }
  .satellite-4 {
    width: 45px;
    height: 45px;
  }
  .satellite-5 {
    width: 28px;
    height: 28px;
  }
  .satellite-6 {
    width: 35px;
    height: 35px;
  }
  .satellite-7 {
    width: 30px;
    height: 30px;
  }
  .satellite-8 {
    width: 65px;
    height: 65px;
  }
}
/* Mobile: scroll button küçültme */
@media (max-width: 576px) {
  /* Revolution Slider scroll button */
  #slide-18-layer-13 {
    width: 20px !important;
    height: 32px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    max-height: 32px !important;
    min-height: 32px !important;
    border-width: 2px !important;
    top: 12px !important;
  }

  /* İçteki dot (span) biraz küçülsün */
  #slide-18-layer-13 > span {
    margin: 0 -2px;
    width: 4px !important;
    height: 4px !important;
    display: inline-block;
  }

  #slide-151-layer-3 {
    transform: translateY(14px) !important;
  }

  /* Eğer wrapper kullanıyorsan (L405'te var): herhangi bir sabit boyutu resetle */
  .scroll-btn {
    width: auto !important;
    height: auto !important;
    top: 120px !important;
  }
}