:root {
  --primary-green: #059669;
  /* Modern Vibrant Emerald */
  --secondary-green: #34d399;
  /* Light Mint Green */
  --accent-gold: #fbbf24;
  /* Bright Gold */
  --text-dark: #1f2937;
  --text-light: #ffffff;
  --bg-light: #f0fdf4;
  /* Very light green tint */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition-speed: 0.3s;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

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

ul {
  list-style: none;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all var(--transition-speed);
}

/* Top Bar */
.header-top {
  background-color: #1e3a8a;
  /* Deep Corporate Blue */
  color: white;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.top-left {
  display: flex;
  gap: 1.5rem;
}

.top-left span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-left i {
  color: var(--secondary-green);
  font-size: 1.1rem;
  /* Slightly larger */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.top-left i:hover {
  transform: scale(1.4) rotate(-10deg);
  /* Dynamic Zoom & Tilt */
  color: var(--accent-gold);
  /* Color shift on hover */
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  /* Glow */
}

.top-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Modern Social Links (Header) */
.social-links {
  display: flex;
  gap: 0.8rem;
}

.social-links a {
  color: white;
  opacity: 0.9;
  font-size: 1.2rem;
  /* Increased size */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  /* Glassy bg */
  backdrop-filter: blur(5px);
}

.social-links a:hover {
  opacity: 1;
  transform: scale(1.15) translateY(-3px);
  background: white;
  box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

/* Brand Colors on Hover */
.social-links a:hover .fa-facebook-f {
  color: #1877F2;
}

.social-links a:hover .fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-links a:hover .fa-linkedin-in {
  color: #0077B5;
}

/* Mobile Menu Socials (Ensure visibility) */
.mobile-socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.mobile-socials a {
  font-size: 1.5rem;
  color: var(--primary-green);
  width: 50px;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Main Header */
.header-main {
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 0.8rem 0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

/* Custom Text Logo */
.logo {
  text-align: left;
  text-decoration: none;
  display: block;
  line-height: 0;
  position: relative;
  /* Anchor for absolute image */
  width: 150px;
  /* Reserve horizontal space */
  height: 50px;
  /* Keep header compact */
}

.logo-desktop {
  position: absolute;
  top: -35px;
  /* Adjust vertical position to align/hang */
  left: -50px;
  /* Shift left as requested */
  height: 130px;
  /* Large size */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.logo-mobile {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: none;
}

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

  .logo-mobile {
    display: block;
  }
}

.logo-top {
  font-size: 2rem;
  /* Slighly larger */
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  display: block;
  font-family: var(--font-heading);

  /* Exotic Fruit Gradient */
  background: linear-gradient(135deg,
      #1e3a8a 0%,
      #059669 40%,
      #fbbf24 70%,
      #ec4899 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Essential for gradient text */

  animation: exoticShine 6s ease infinite;
  /* Dynamic Movement */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Mixin/Utility for Exotic Text */
.exotic-text {
  font-weight: 700;
  display: inline-block;
  background: linear-gradient(135deg,
      #1e3a8a 0%,
      #059669 40%,
      #fbbf24 70%,
      #ec4899 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: exoticShine 6s ease infinite;

  /* Glassy Enhancements */
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.logo-bottom {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;

  /* Matching Gradient but lighter */
  background: linear-gradient(90deg, #059669, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

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

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

/* Modern Contact Button in Header */
.btn-contact-modern {
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
  transition: all 0.3s ease;
  margin-left: auto;
  /* Push to right if in flex container */
}

.btn-contact-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.4);
  color: white;
}

.btn-contact-modern i {
  transition: transform 0.3s;
}

.btn-contact-modern:hover i {
  transform: translateX(4px);
}

/* Navigation Links */
.nav-links {
  display: flex;
  /* Reduced from 3.5rem */
  align-items: center;
  margin-left: auto;
  margin-right: 2rem;
  /* Push button to right */
}

/* Hide mobile nav logo on desktop */
.mobile-nav-header {
  display: none;
}

/* Hide mobile-only elements on desktop */
.mobile-only {
  display: none;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  position: relative;
  transition: color 0.3s;
  overflow: hidden;
  z-index: 1;
  display: block;
  /* Ensure block model for masking */
}

/* Base Hover State */
.nav-links li a:hover,
.nav-links li a.active {
  color: var(--primary-green);
  background: rgba(255, 255, 255, 0.95);
}

/* Animated Exotic Gradient Border */
.nav-links li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 2px;
  /* Border width */
  background: linear-gradient(90deg,
      var(--primary-green),
      var(--accent-gold),
      #ec4899,
      var(--primary-green));
  background-size: 300% 100%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.nav-links li a:hover::before {
  opacity: 1;
  animation: exoticBorderFlow 2s linear infinite;
}

/* Passing Light Shine Effect */
.nav-links li a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent);
  transition: 0.5s;
  pointer-events: none;
}

.nav-links li a:hover::after {
  left: 100%;
  transition: 0.7s ease-in-out;
}

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

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

/* Contact Button */
.btn-contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #1e3a8a;
  color: white;
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.btn-contact:hover {
  background-color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3);
}

/* Contact Map */
#contact-map {
  height: 450px;
  width: 100%;
  z-index: 1;
  border-bottom: 5px solid var(--primary-green);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  color: var(--text-dark);
  cursor: pointer;
}

/* Language Selector (Adjusted for Top Bar) */
.lang-selector {
  position: relative;
  cursor: pointer;
  color: white;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s;
}

.lang-selector:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lang-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.lang-selector:hover .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: white;
  color: var(--text-dark);
  min-width: 140px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s;
  z-index: 1100;
}

.lang-selector:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
}

/* Hero Section */
.hero {
  height: 70vh;
  /* Reduced from 100vh */
  min-height: 600px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  margin-top: 100px;
  /* Offset for fixed header */
}

/* Video Background Container */
.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* 50% opacity as requested */
  z-index: 1;
  /* Ensure on top of video */
}

/* Ensure content stays on top */
.hero-content {
  z-index: 1;
  max-width: 800px;
  padding: 2rem;
  animation: fadeInUs 1.5s ease-out;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.btn-primary {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 600;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  background: var(--text-light);
  color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Section Common */
.section {
  padding: 5rem 5%;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--primary-green);
  margin-bottom: 3rem;
  position: relative;
  display: block;
  width: 100%;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--accent-gold);
  margin: 1rem auto 0;
}

/* Product Portfolio */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;

}

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

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

.product-img {
  height: 250px;
  width: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.5s ease;
}

.product-info {
  padding: 1.5rem;
  text-align: center;
}

.product-info h3 {
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.product-info p {
  font-size: 0.95rem;
  color: #666;
}

/* Brands Section */
.brands-section {
  background-color: #fafafa;
  /* Slightly distinct background */
  padding: 4rem 5%;
}

.brands-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  width: 380px;
  /* 2x bigger container */
  height: 400px;
  /* 2x bigger container */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #9ca3af;
  cursor: pointer;
}

.brand-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  color: var(--primary-green);
}

.brand-icon {
  font-size: 6rem;
  transition: color 0.3s;
}

.brand-img {
  width: 320px;
  /* 2x bigger from 160px */
  height: 320px;
  /* 2x bigger from 160px */
  object-fit: contain;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
  /* Smooth transition for zoom */
}

/* Zoom effect on hover */
.brand-item:hover .brand-img {
  transform: scale(1.1);
}

.brand-name {
  font-weight: 600;
  font-size: 1.1rem;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* Scrolling Text Banner */
.marquee-section {
  background-color: white;
  padding: 3rem 0;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

/* --- ABOUT PAGE MODERN STYLES --- */

/* Hero Modern */
.hero-large {
  height: 60vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-top: 80px;
  /* Header offset */
}

.hero-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

.hero-large .hero-content {
  z-index: 2;
  max-width: 900px;
  padding: 0 20px;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #fff 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Glass Cards */
.card-modern {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.card-modern:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--primary-green);
}

.icon-box-modern {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: white;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 20px rgba(5, 150, 105, 0.3);
  transition: transform 0.3s;
}

.card-modern:hover .icon-box-modern {
  transform: rotate(5deg) scale(1.1);
}

/* Stats Section Modern */
.stats-modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.stat-card {
  text-align: center;
  padding: 2rem;
  border-radius: 20px;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 4px solid var(--accent-gold);
  transition: transform 0.3s;
}

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

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.stat-label {
  font-size: 1.1rem;
  color: var(--text-dark);
  font-weight: 600;
}

/* Timeline / History (Vertical Line) */
.history-section {
  position: relative;
  padding: 4rem 0;
}

.history-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .hero-large {
    height: 50vh;
  }

  .history-section::before {
    left: 20px;
  }
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: scrollLeft 30s linear infinite;
}

.marquee-content span {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #333;
  /* Fallback */
  margin: 0 1rem;
  transition: all 0.3s ease;
  /* Remove outline, go for vibrant filled colors */
  -webkit-text-stroke: 0;
}

/* Exotic Colors loop */
.marquee-content span:nth-of-type(4n+1) {
  color: #ec4899;
  /* Pink (Dragon Fruit) */
}

.marquee-content span:nth-of-type(4n+2) {
  color: #10b981;
  /* Green (Freshness) */
}

.marquee-content span:nth-of-type(4n+3) {
  color: #f59e0b;
  /* Orange/Gold (Mango/Pineapple) */
}

.marquee-content span:nth-of-type(4n+4) {
  color: #84cc16;
  /* Lime (Citrus) */
}

.marquee-content span:hover {
  transform: scale(1.1);
  text-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.marquee-content i {
  font-size: 2rem;
  color: #fbbf24;
  /* secondary/accent color */
  opacity: 0.8;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
    /* Adjust based on content duplication */
  }
}

/* Cold Storage Section */
/* Cold Storage Section (Redesigned) */
.logistics-section {
  background: #ffffff;
  padding: 6rem 5%;
}

.logistics-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.logistics-intro {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.feature-card {
  background: white;
  padding: 1.5rem;
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid #f3f4f6;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-5px) scale(1.03);
}

.feature-icon {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}

.feature-info h4 {
  font-size: 1.15rem;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.feature-info p {
  font-size: 0.9rem;
  color: #6b7280;
}

/* Feature 1: Atmosphere (Ice Blue) */
.feature-card:nth-child(1) .feature-icon {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
}

.feature-card:nth-child(1):hover {
  border-color: #0ea5e9;
  box-shadow: 0 15px 30px rgba(14, 165, 233, 0.15);
}

.feature-card:nth-child(1):hover .feature-icon {
  background: #0ea5e9;
  color: white;
}

/* Feature 2: High Capacity (Orange) */
.feature-card:nth-child(2) .feature-icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.feature-card:nth-child(2):hover {
  border-color: #f59e0b;
  box-shadow: 0 15px 30px rgba(245, 158, 11, 0.15);
}

.feature-card:nth-child(2):hover .feature-icon {
  background: #f59e0b;
  color: white;
}

/* Feature 3: Port Proximity (Indigo) */
.feature-card:nth-child(3) .feature-icon {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.feature-card:nth-child(3):hover {
  border-color: #6366f1;
  box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15);
}

.feature-card:nth-child(3):hover .feature-icon {
  background: #6366f1;
  color: white;
}

/* Feature 4: Real-time Monitor (Pink) */
.feature-card:nth-child(4) .feature-icon {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.1);
}

.feature-card:nth-child(4):hover {
  border-color: #ec4899;
  box-shadow: 0 15px 30px rgba(236, 72, 153, 0.15);
}

.feature-card:nth-child(4):hover .feature-icon {
  background: #ec4899;
  color: white;
}

.logistics-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  height: 100%;
  min-height: 400px;
}

.logistics-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.logistics-image-wrapper:hover .logistics-img {
  transform: scale(1.05);
}

/* Global Operations */
/* Dual Location Grid System (Pro Max) */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  /* More breathing room */
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
}

@media (max-width: 992px) {
  .locations-grid {
    grid-template-columns: 1fr;
    /* Stack clearly on tablets/mobile */
    gap: 2rem;
  }
}

.location-card {
  background: white;
  border-radius: 24px;
  /* Soft, modern corners */
  padding: 2rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 10px 15px rgba(0, 0, 0, 0.03),
    0 20px 25px rgba(0, 0, 0, 0.04);
  /* Triple shadow for depth */
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* Bouncy spring transition */
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.location-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-hq {
  border-top: 6px solid #059669;
}

.card-depot {
  border-top: 6px solid #3b82f6;
}

/* Blue for Depot */

/* Text Styles */
.card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.card-icon {
  font-size: 1.75rem;
  padding: 16px;
  border-radius: 16px;
  color: white;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.card-hq .card-icon {
  background: linear-gradient(135deg, #059669, #34d399);
}

.card-depot .card-icon {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
}

.card-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  /* Larger, bolder */
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  color: #1e293b;
  letter-spacing: -0.5px;
}

.card-info p {
  margin: 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

/* Map Containers */
.mini-map {
  width: 100%;
  height: 350px;
  border-radius: 16px;
  z-index: 1;
  cursor: pointer;
  /* Interaction hint */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  /* Inner border */
  position: relative;
}

/* Overlay Button on Map */
.map-overlay-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #1e293b;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s;
  pointer-events: none;
  /* Let clicks pass through to map container listener */
}

.mini-map:hover .map-overlay-btn {
  transform: translateX(-50%) scale(1.05);
}

/* Pro Max Map Wrapper & Background */
.contact-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 4rem auto;
  padding: 2rem;
  border-radius: 40px;
  /* Dynamic Nebula Background */
  background: radial-gradient(circle at 50% 50%, rgba(5, 150, 105, 0.15), transparent 70%),
    radial-gradient(circle at 0% 0%, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.5) 100%);
  overflow: hidden;
}

/* Animated Background Mesh */
.contact-map-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.1) 0%, transparent 50%),
    radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
  opacity: 0.6;
  animation: nebulaMove 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

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

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

/* Location Badge - Floating UI */
.location-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  /* Ultra Glass */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: floatBadge 4s ease-in-out infinite;
}

.location-badge span {
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background-color: #ef4444;
  /* Alert Red/Live Color */
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

@keyframes floatBadge {

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

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

#contact-map {
  width: 100%;
  max-width: 600px;
  height: 600px;
  margin: 4rem auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: #000;
  /* Space background */
  box-shadow:
    inset 20px 20px 50px rgba(0, 0, 0, 0.4),
    /* Inner shadow for depth */
    inset -20px -20px 50px rgba(255, 255, 255, 0.1),
    /* Rim light */
    0 30px 60px rgba(0, 0, 0, 0.3),
    /* Drop shadow */
    0 0 0 10px rgba(255, 255, 255, 0.05);
  /* Outer ring */
  position: relative;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}

#contact-map:hover {
  transform: scale(1.02);
  box-shadow:
    inset 20px 20px 50px rgba(0, 0, 0, 0.4),
    inset -20px -20px 50px rgba(255, 255, 255, 0.15),
    0 40px 80px rgba(0, 0, 0, 0.4),
    0 0 0 15px rgba(5, 150, 105, 0.1);
  /* Green glow on hover */
  border-color: rgba(5, 150, 105, 0.3);
}

/* Meteor Button / Navigation Icon Overlay */
.meteor-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s ease;
}

.meteor-icon {
  width: 80px;
  height: 80px;
  background: rgba(5, 150, 105, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.6);
  animation: meteorPulse 2s infinite;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.meteor-label {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  white-space: nowrap;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.meteor-btn:hover .meteor-label {
  opacity: 1;
}

.meteor-btn:hover .meteor-icon {
  transform: scale(1.1);
  background: #059669;
}

@keyframes meteorPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(5, 150, 105, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

@media (max-width: 768px) {
  #contact-map {
    height: 350px;
    width: 350px;
    /* Keep it circular on mobile */
    max-width: 90vw;
    max-height: 90vw;
  }
}

/* Map Tooltip Customization */
.jvm-tooltip {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
}

.map-tooltip-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tooltip-flag {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
  background-color: #eff6ff;
  /* Light blue/lavender tint like Lapis Agro */
  color: #374151;
  padding: 5rem 5% 1rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  /* Custom column widths */
  gap: 3rem;
}

.footer-col h4 {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  color: #1e40af;
  /* Dark Blue */
  font-weight: 700;
}

/* Brand Column */
.footer-logo {
  margin-bottom: 1.5rem;
}

.footer-logo .logo-top {
  /* Ensure gradient works or override with text color if needed */
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-logo .logo-bottom {
  color: #6b7280;
}

.footer-desc {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  max-width: 90%;
}

.footer-social h4 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  width: 36px;
  height: 36px;
  /* display: flex; align-items: center; justify-content: center; */
  color: #374151;
  font-size: 1.2rem;
  transition: all 0.3s;
}

.social-icons a:hover {
  color: var(--primary-green);
  transform: translateY(-3px);
}

/* Links Column */
.footer-links li {
  margin-bottom: 1rem;
}

.footer-links li a {
  color: #4b5563;
  text-decoration: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s;
}

.footer-links li a i {
  font-size: 0.8rem;
  color: #9ca3af;
  transition: all 0.3s;
}

.footer-links li a:hover {
  color: #1e40af;
  padding-left: 5px;
}

.footer-links li a:hover i {
  color: #f97316;
}

/* Contact Column */
.contact-item-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
  cursor: default;
}

.contact-item-modern:hover {
  transform: translateX(5px);
}

.icon-circle {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  /* Vibrant Orange Gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

/* Pulse Animation Wrapper */
.icon-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: -1;
  opacity: 0.5;
  animation: pulse-ring 2s infinite;
}

/* Icon Behavior */
.icon-circle i {
  transition: transform 0.4s ease;
  z-index: 2;
}

/* Hover Effects */
.contact-item-modern:hover .icon-circle {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.6);
}

.contact-item-modern:hover .icon-circle i {
  transform: scale(1.1) rotate(15deg);
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

.contact-text {
  display: flex;
  flex-direction: column;
}

.contact-text .label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 2px;
  font-weight: 600;
}

.contact-text .value {
  font-size: 1.05rem;
  color: #1e40af;
  font-weight: 700;
  line-height: 1.4;
}

.contact-text a.value:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 4rem;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Animations */
@keyframes fadeInUs {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* =========================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================= */

/* Tablet & Smaller Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
  .section {
    padding: 4rem 3%;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .nav-links {
    gap: 1.5rem;
  }

  .logistics-container {
    gap: 2rem;
  }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {

  /* Top Bar */
  .header-top {
    display: block;
    padding: 0.5rem 0;
  }

  .top-bar-content {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .top-left {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
  }

  .top-right {
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }

  /* Header Main */
  .header-main {
    padding: 1rem 0;
  }

  .mobile-menu-btn {
    display: block;
    /* Show hamburger */
    z-index: 1001;
  }

  .btn-contact-modern {
    display: none;
    /* Hide contact button on mobile header */
  }

  /* Navigation Menu (Mobile Overlay) */
  .nav-links {
    display: flex;
    /* Override previous display:none */
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden by default */
    width: 85%;
    max-width: 320px;
    /* Partial height with Glassmorphism */
    height: auto;
    min-height: 60vh;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;

    /* Tropical Exotic Glassmorphism Background */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: none;
    box-shadow: -10px 0 30px rgba(5, 150, 105, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.3);

    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    padding-top: 2rem;
    transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: 0;
    padding: 2rem;
    z-index: 1000;
  }

  /* Add a vibrant tropical gradient accent inside the menu */
  .nav-links::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(160deg,
        rgba(5, 150, 105, 0.1) 0%,
        rgba(251, 191, 36, 0.1) 50%,
        rgba(236, 72, 153, 0.1) 100%);
    z-index: -1;
    pointer-events: none;
  }

  .mobile-nav-header {
    display: block;
    /* Force visible on mobile */
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(5, 150, 105, 0.1);
    /* Subtle divider if needed */
  }

  .mobile-nav-logo {
    height: 160px;
    /* 2x size as requested (was 80px) */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  }

  /* Hide mobile logo on desktop by default in general styles, but ensure it's hidden there too */
  /* Using standard display:none in desktop media query if not already there, 
     but since this is inside mobile media query, we just style it here.
     We need to make sure the LI is hidden on Desktop. I'll add a rule outside media query. */

  .nav-links.active {
    right: 0;
    /* Slide in */
  }

  /* Overlay backdrop when menu is open */
  .nav-links.active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Dimming overlay */
    z-index: -1;
    pointer-events: auto;
    /* Allow clicking backdrop to close if JS supports */
    backdrop-filter: blur(2px);
    /* Modern blur */
  }

  /* Hero */
  .hero {
    height: auto;
    min-height: 500px;
    padding-top: 100px;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .logo-top {
    font-size: 1.5rem;
  }

  /* Logistics */
  .logistics-container {
    grid-template-columns: 1fr;
    /* Stack vertically */
  }

  .logistics-image-wrapper {
    order: -1;
    height: 300px;
  }

  .logistics-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Scrolling Text */
  .marquee-content span {
    font-size: 3rem;
  }

  /* Brands */
  .brands-grid {
    gap: 1.5rem;
  }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
    /* Single column */
  }

  .footer-content {
    grid-template-columns: 1fr;
    /* Single column footer */
    text-align: center;
    gap: 3rem;
  }

  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align items */
  }

  .footer-desc {
    font-size: 0.9rem;
    max-width: 100%;
  }

  .contact-item-modern {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    /* justify-content: flex-start; */
    /* Keep default */
  }

  .logistics-intro {
    font-size: 1rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
    /* Stack features */
  }

  .marquee-content span {
    font-size: 2rem;
    margin: 0 0.5rem;
    background-color: transparent;
  }
}

/* About Us Section */
.about-section {
  background-color: #f9fafb;
  padding: 4rem 0;
}

.about-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.about-text p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4b5563;
}

.about-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.about-image img:hover {
  transform: translateY(-5px);
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   SOCIAL MEDIA ICONS (Footer & Contact)
   ========================================= */

/* Footer & General Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
  /* Center by default for footer */
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  /* Default utility color, overridden later */
  font-size: 1.4rem;
  /* 1x Bigger */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Footer specific styling overrides */
.footer-social .social-icons a {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
}

.social-icons a:hover {
  transform: translateY(-5px) scale(1.1);
  background: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.social-icons a:hover .fa-facebook-f {
  color: #1877F2;
}

.social-icons a:hover .fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-icons a:hover .fa-linkedin-in {
  color: #0077B5;
}

/* Contact Page Social Row */
.social-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.social-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--primary-green);
  transition: all 0.3s ease;
}

.social-btn:hover {
  transform: translateY(-5px) rotate(10deg);
  box-shadow: 0 15px 35px rgba(5, 150, 105, 0.2);
}

.social-btn:hover .fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Kartın genel geçiş ayarı */
.product-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

/* Üstüne gelince kartın hafifçe yükselmesi */
.product-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Görselin büyüme efekti */
.product-img {
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Bilgi kısmının (yazıların) hafifçe yukarı süzülmesi */
.product-info {
  transition: transform 0.5s ease;
}

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