/* Custom CSS overrides for Nairo Creative */

/* Make logo bigger */
.header-area .main-nav .logo img {
  height: 80px !important;
  width: auto;
}

.background-header .main-nav .logo img {
  height: 65px !important;
}

/* Make header sticky to top when scrolling */
.header-area {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Add padding to body to prevent content from hiding under fixed header */
body {
  padding-top: 100px;
}

/* Carousel Slider Styles */

#bannerCarousel {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  display: block;
}

.carousel-inner {
  height: 600px;
  width: 100%;
  position: relative;
}

.carousel-item {
  height: 600px;
  width: 100%;
  position: relative;
  display: block;
}

.carousel-slide-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  width: 100%;
  position: relative;
  display: block;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.carousel-content {
  text-align: center;
  color: white;
  width: 100%;
  padding: 40px;
  opacity: 0.95;
}

.carousel-content h6 {
  font-size: 20px; /* Increased from 18px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.carousel-content h2 {
  font-size: 60px; /* Increased from 48px */
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

.carousel-content h2 em {
  color: #ff6b6b;
  font-style: normal;
}

.carousel-content h2 span {
  color: #ff6b6b;
}

.carousel-content p {
  font-size: 20px; /* Increased from 16px */
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.main-banner {
  padding: 0;
  margin: 0;
  background: none;
  overflow: visible;
}

/* =========================================
   Font Size Increases (New Additions)
   ========================================= */

/* General Body Text */
body, p {
  font-size: 18px !important; /* Increased from default 15px */
  line-height: 1.8;
}

/* Section Headings */
.section-heading h2 {
  font-size: 42px !important; /* Increased from 30px */
  line-height: 1.4;
}

/* Navigation Menu */
.header-area .main-nav .nav li a {
  font-size: 20px !important; /* Increased from 18px */
}



/* Service Item Titles */
.service-item h4 {
  font-size: 24px !important; /* Increased from default usually 20px */
}

.service-item p {
  font-size: 17px !important;
}

/* Work Item Titles */
.work-item .work-content h4 {
  font-size: 26px !important; /* Increased */
}

.work-item .work-content span.category {
  font-size: 16px !important; /* Increased */
}

/* Footer Headings */
.footer-widget h4 {
  font-size: 24px !important; /* Increased */
  margin-bottom: 25px !important;
}

/* Footer Links and Text */
.footer-widget ul li a,
.footer-widget p {
  font-size: 17px !important; /* Increased */
  line-height: 1.8 !important;
}

.last-row p {
  font-size: 16px !important;
}

/* Responsive Overrides for Mobile */
@media (max-width: 768px) {
  .carousel-inner,
  .carousel-item,
  .carousel-slide-bg {
    height: 400px !important;
  }

  .carousel-content h2 {
    font-size: 36px !important; /* Adjusted for mobile but still larger */
  }

  .carousel-content p {
    font-size: 16px !important;
  }

  .carousel-content h6 {
    font-size: 16px !important;
  }
  
  .section-heading h2 {
    font-size: 32px !important;
  }

  /* Reduce title effect size on mobile */
  .our-portfolio .section-heading::before {
    font-size: 50px !important;
  }

  /* Reduce top margin/padding on mobile */
  .section, 
  .our-services, 
  .our-portfolio, 
  .our-work {
    margin-top: 60px !important;
    padding-top: 0 !important; /* Reset padding if that's what's causing space */
  }
  
  /* Specific fix for the user's "150px margin-top" request */
  #services {
    margin-top: 60px !important;
  }
}

/* Background Text Effect for Our Services */
.our-portfolio .section-heading {
  position: relative;
  z-index: 1;
}

.our-portfolio .section-heading::before {
  content: "OUR SERVICES";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  font-weight: 900;
  color: #2a2a2a; /* Same color as text but rely on opacity */
  opacity: 0.1; /* Very faint */
  z-index: -1;
  white-space: nowrap;
  pointer-events: none;
}

/* =========================================
   Works Section Redesign
   ========================================= */

/* Ghost Text for Our Works */
.our-work .section-heading {
  position: relative;
  z-index: 1;
}

.our-work .section-heading::before {
  content: "OUR WORK"; /* Matches user request */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  font-weight: 900;
  color: #2a2a2a;
  opacity: 0.1;
  z-index: -1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .our-work .section-heading::before {
    font-size: 50px !important;
  }
}

/* Enhanced Work Item Design */
.work-item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Premium shadow */
  transition: all 0.4s ease;
  margin-bottom: 30px;
  background: #fff; /* Ensure it has a bg */
}

.work-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.work-item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.work-item:hover img {
  transform: scale(1.05);
}

.work-item .work-content {
  padding: 25px;
  background: white; /* Changed from overlay to card style for better readability if preferred, or keep overlay */
  /* Let's keep the user's overlay preference but make it nicer? */
  /* Re-reading request: "make it eye catcher... like portfolio" */
  /* Let's stick to a clean card design or a premium overlay. */
  /* The original CSS had a gradient overlay. Let's make it more distinct. */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  z-index: 2;
  transition: all 0.3s;
  text-align: center; /* Center align like services */
}

.work-item h4 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.work-item .category {
  font-size: 16px !important;
  color: #52d7fc;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* =========================================
   Service Item Redesign (Huge Images & Titles & Spacing)
   ========================================= */

/* Ensure columns have space between them vertically */
#portfolio .col-lg-4,
#portfolio .col-sm-6 {
  margin-bottom: 30px; /* Vertical spacing between rows */
}

/* Make the anchor tag filling the height of the column for equal height cards */
#portfolio a {
  display: block;
  height: 100%;
  text-decoration: none;
}

.service-item {
  text-align: center; /* Ensure centering */
  padding: 40px 30px; /* More padding for larger items */
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
  height: 100%; /* Uniform height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 30px rgba(0,0,0,0.15);
}

/* Override existing .icon styles to remove the small circle */
.service-item .icon {
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  line-height: normal !important;
  margin-bottom: 25px !important;
  display: block;
}

/* Make image huge and responsive */
.service-item .icon img {
  width: 100%;
  max-width: 220px; /* Control max size so it's not absurdly huge but definitely "huge" compared to icon */
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

.service-item:hover .icon img {
  transform: scale(1.05); /* Subtle pop effect */
}

/* Make Title Bigger and Bold */
.service-item h4 {
  font-size: 28px !important;
  font-weight: 800 !important;
  margin-top: 15px !important;
  margin-bottom: 10px !important;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  color: #2a2a2a;
}

/* =========================================
   Our Clients Section
   ========================================= */

.our-clients {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  overflow: hidden;
  margin-top: 80px;
}

/* Ghost Text for Our Clients */
.our-clients .section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.our-clients .section-heading::before {
  content: "OUR CLIENTS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  font-weight: 900;
  color: #2a2a2a;
  opacity: 0.1;
  z-index: -1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .our-clients .section-heading::before {
    font-size: 50px !important;
  }
  
  .our-clients {
    padding: 60px 0;
    margin-top: 40px;
  }
}

/* Clients Carousel Styles */
.clients-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

/* Gradient fade effect on edges */
.clients-carousel-wrapper::before,
.clients-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.clients-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa 0%, transparent 100%);
}

.clients-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #e9ecef 0%, transparent 100%);
}

.clients-carousel {
  width: 100%;
  overflow: hidden;
}

.clients-track {
  display: flex;
  gap: 60px;
  animation: scroll-clients 30s linear infinite;
  width: max-content;
}

.clients-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-clients {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.client-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  min-height: 120px;
}

.client-logo:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.client-logo img {
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.4s ease;
}

.client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .clients-track {
    gap: 30px;
    animation-duration: 20s;
  }
  
  .client-logo {
    padding: 15px 20px;
    min-height: 80px;
  }
  
  .client-logo img {
    max-width: 120px;
    max-height: 60px;
  }
  
  .clients-carousel-wrapper::before,
  .clients-carousel-wrapper::after {
    width: 50px;
  }
}