/* 1. BRAND COLORS */
:root {
  --navy: #0a2342; /* Deep Corporate Blue */
  --red: #b22222; /* Brick/Industrial Red */
  --gold: #ffc107; /* Accent Gold */
  --light-gray: #f8f9fa;
}

/* 2. TYPOGRAPHY */
body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand {
  font-family: 'Montserrat', sans-serif;
}

.fw-extra-bold {
  font-weight: 800;
}
.text-navy {
  color: var(--navy) !important;
}
.text-red {
  color: var(--red) !important;
}

/* 3. CUSTOM BUTTONS */
.btn-red {
  background-color: var(--red);
  border: 2px solid var(--red);
  transition: 0.3s;
}
.btn-red:hover {
  background-color: transparent;
  color: var(--red);
  border: 2px solid var(--red);
}

/* 4. NAVBAR STYLES */
.top-bar {
  background-color: var(--navy);
  font-size: 0.85rem;
}

.navbar-nav .nav-link {
  color: var(--navy);
  margin-right: 15px;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--red);
}

/* 5. HERO SECTION */
.hero-section {
  height: 90vh; /* 90% of screen height */
  /* REPLACE 'assets/images/hero-bg.jpg' WITH A REAL IMAGE PATH */
  background: url('/assets/images/hero-bg.jpg') no-repeat center center/cover;
  position: relative;
}

.hero-section h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Dark overlay so white text pops */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(10, 35, 66, 0.7), rgba(10, 35, 66, 0.4));
}

/* INFINITE CAROUSEL ANIMATION */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 6));
  } /* 250px width * 6 logos */
}

.logos-slider {
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logos-slide-track {
  animation: scroll 20s linear infinite;
  display: flex;
  width: calc(
    250px * 12
  ); /* Width needs to fit all logos (original + duplicate) */
}

.slide {
  height: 100px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.slide img {
  max-width: 100%;
  filter: grayscale(100%); /* Makes them look professional/uniform */
  opacity: 0.6;
  transition: all 0.3s;
}

.slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* SERVICES SECTION */
.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(178, 34, 34, 0.1); /* Light Red */
  transition: 0.3s;
}

.service-card {
  transition: transform 0.3s, box-shadow 0.3s;
  background: white;
}

.service-card:hover {
  transform: translateY(-10px); /* Moves up when hovered */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--red) !important;
}

.service-card:hover .icon-circle {
  background-color: var(--red);
}

.service-card:hover .icon-circle i {
  color: white !important;
}

/* WHATSAPP BUTTON */
.whatsapp-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #25d366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: 0.3s;
  text-decoration: none;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  background-color: #1ebe57;
  color: white;
}

/* BACK TO TOP BUTTON (Redesigned) */
#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 30px; /* Sits exactly ABOVE the WhatsApp button */
  right: 30px; /* Aligned with WhatsApp */
  z-index: 99;
  border: none;
  outline: none;

  /* Make it a circle to match WhatsApp */
  width: 50px;
  height: 50px;
  border-radius: 50%;

  /* Coloring */
  background-color: var(--navy);
  color: white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

  cursor: pointer;
  font-size: 18px;
  transition: 0.3s;

  /* Center the arrow icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

#backToTopBtn:hover {
  background-color: var(--red);
  transform: translateY(-5px);
}

/* FOOTER STYLES */
.footer-link {
  color: rgba(255, 255, 255, 0.7); /* Light gray */
  text-decoration: none;
  transition: 0.3s;
  font-size: 0.9rem;
}

.footer-link:hover {
  color: var(--gold); /* Turns Gold/Yellow on hover */
  padding-left: 5px; /* Slight movement effect */
}

/* Ensure the logo in footer looks clean on dark background */
footer img {
  background: white; /* Adds a small white box behind logo if it's transparent */
  border-radius: 4px;
}

/* STICKY SOCIAL SIDEBAR (CLEAN VERSION) */
.social-sidebar {
  position: fixed;
  top: 50%;
  right: 20px; /* Moved away from the edge */
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px; /* Space between icons */
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* Fixed square size */
  height: 50px;
  color: white;
  font-size: 22px;
  text-decoration: none;
  border-radius: 50%; /* Perfect Circles */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Soft shadow */
  transition: all 0.3s ease; /* Smooth animation */
}

/* Brand Colors */
.social-link.whatsapp {
  background-color: #25d366;
}
.social-link.linkedin {
  background-color: #0077b5;
}
.social-link.email {
  background-color: #dd4b39;
}

/* CLEAN HOVER EFFECT */
.social-link:hover {
  color: white;
  transform: scale(1.15) translateX(-5px); /* Grows and moves slightly left */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}