/* Disneyland Paris inspired design - Updated with Pattern Border Radius v2.0 */
:root {
  /* Enhanced Color Palette */
  --primary-blue: #1a2b40;
  --primary-blue-dark: #0052CC;
  --primary-blue-light: #3385FF;
  --light-blue: #E6F2FF;
  --dark-grey: #1A2B40;
  --light-grey: #9d542e0f;
  --border-grey: #E0E0E0;
  --white: #FFFFFF;
  --text-muted: #1A2B40;
  
  /* Modern Accent Colors */
  --secondary-gold: #f59e0b;
  --accent-purple: #8b5cf6;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --accent-orange: #f97316;
  
  /* Modern Gradients */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-gold: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-Rug: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  --gradient-dark: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --gradient-persian: linear-gradient(135deg, #172b38 0%, #172b38 50%, #172b38 100%);
  
  /* Modern Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Enhanced Border Radius */
  --border-radius: 20px;
  --border-radius-sm: 12px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --border-radius-full: 9999px;
  
  /* Modern Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Modern Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
}

html, body {
  font-family: 'Roboto', sans-serif;
  color: var(--dark-grey);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--dark-grey);
}

/* Navigation */
.navbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--border-grey);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
  z-index: 1030;
  overflow: visible;
  margin-bottom: 0;
}

/* Removed gradient border after navbar */

/* Desktop Navbar */
@media (min-width: 992px) {
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
  }

  .navbar-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
}

.navbar .brand-logo {
  width: 80px;
  height: auto;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.navbar .brand-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-main {
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--dark-grey);
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-line-1 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #172b38;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}


.brand-line-3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.brand-line-2{
  font-size: 13px;
  letter-spacing: 2px;
}
.brand-line-4{
  font-size: 16px;
  letter-spacing: 4px;
}

/* Responsive brand sizing */
@media (max-width: 768px) {
  .navbar .brand-logo { width: 56px; }
  .brand-line-1 { font-size: 14px; letter-spacing: 0.09em; }
  .brand-line-2 { font-size: 10px; letter-spacing: 0.12em; }
  .navbar .navbar-brand { gap: .5rem; }
}
@media (max-width: 576px) {
  .navbar .brand-logo { width: 44px; }
  .brand-line-1 { font-size: 12px; letter-spacing: 0.08em; }
  .brand-line-2 { font-size: 9px; letter-spacing: 0.12em; }
  .navbar .navbar-brand { gap: .4rem; }
}
@media (max-width: 420px) {
  .navbar .brand-logo { width: 32px; }
  .brand-line-1 { font-size: 11px; letter-spacing: 0.06em; }
  .brand-line-2 { font-size: 8px; letter-spacing: 0.1em; }
  .navbar .navbar-brand { gap: .3rem; }
}
@media (max-width: 360px) {
  .navbar .brand-logo { width: 28px; }
  .brand-line-1 { font-size: 10px; letter-spacing: 0.06em; }
  .brand-line-2 { display: none; }
}

.navbar .nav-link{
  font-size: 16px;
  white-space: nowrap;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  padding: 0.30rem 0.2rem !important;
}
.header-pill{background:var(--light-blue);color:#1a2b40;border:1px solid #cfe6ff;border-radius:999px;padding:.35rem .75rem;font-weight:600}
.header-actions .btn{border-radius:999px;padding:.45rem 1rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-grey);color:var(--dark-grey)}
.icon-btn:hover{color:#fff;background:#1a2b40;border-color:#1a2b40}

.navbar .nav-link {
  color: var(--dark-grey) !important;
  font-weight: 500;
  padding: 0.75rem 1.25rem !important;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
}

.navbar .nav-link:hover {
  background: #172b38;
  color: white !important;
  box-shadow: 
    0 6px 20px rgba(23,43,56,0.3),
    0 2px 8px rgba(23,43,56,0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* Keep top-level nav items on one line */
.navbar .navbar-nav { 
  gap: 0.2rem; 
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: 0;
}

.navbar .navbar-nav::-webkit-scrollbar {
  display: none;
}

.navbar .navbar-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.navbar .cart-dot {
  position: absolute;
  top: -2px;
  right: -6px;
  width: 8px;
  height: 8px;
  background: #172b38;
  border-radius: 50%;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  border: none;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  padding: 1rem 0;
  background: var(--white);
  backdrop-filter: blur(10px);
  z-index: 1060;
  position: fixed;
  display: none;
  min-width: 200px;
  max-width: 300px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

/* Ensure dropdowns appear completely outside the header */
.navbar .dropdown-menu {
  position: fixed;
  top: auto;
  left: auto;
  z-index: 1060;
  display: none;
  flex-direction: column;
  width: auto;
  min-width: 200px;
  max-width: 300px;
  margin-top: 0;
}

/* Ensure navbar container doesn't clip dropdowns */
.navbar .container-fluid {
  overflow: visible;
}

.navbar .navbar-collapse {
  overflow: visible;
}

.dropdown-menu.show {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  flex-direction: column;
}

/* Override any Bootstrap dropdown styles */
.dropdown-menu {
  display: none !important;
}

.dropdown-menu.show {
  display: block !important;
}

.dropdown-item {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: var(--dark-grey);
  border-radius: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

/* Elegant left border hover effect with light background */
.dropdown-item:hover {
  background: rgba(139, 69, 19, 0.08) !important;
  color: #172b38 !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-left: 4px solid #172b38 !important;
  padding-left: calc(1.5rem - 4px) !important;
  transition: all 0.3s ease;
}

.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  background: transparent !important;
  color: var(--dark-grey) !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
}

/* Override any Bootstrap dropdown item styles */
.dropdown-menu .dropdown-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.dropdown-menu .dropdown-item:hover {
  background: rgba(139, 69, 19, 0.08) !important;
  color: #172b38 !important;
  border-left: 4px solid #172b38 !important;
  padding-left: calc(1.5rem - 4px) !important;
}


/* Ensure dropdown list items display properly */
.dropdown-menu li {
  display: block;
  width: 100%;
}

.dropdown-menu li a {
  display: block;
  width: 100%;
}



.dropdown-lg {
  min-width: 720px;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,102,204,0.1);
  padding: 1.5rem 0;
}

/* Hero video */
.hero-full {
  height: 100vh;
  min-height: 720px;
  background: var(--dark-grey);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero-logo-container {
  margin-bottom: 2rem;
  text-align: center;
}

.hero-logo {
  width: 120px;
  height: 120px;
  opacity: 0.95;
  filter: none;
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Section Logo Styles */
.section-logo-container {
  margin-bottom: 1.5rem;
  text-align: center;
}

.section-logo {
  width: 90px;
  height: 90px;
  opacity: 0.9;
  filter: none;
  transition: transform 0.4s ease;
}

.section-logo:hover {
  opacity: 1;
  transform: scale(1.04) rotate(-1.5deg);
}

/* Subtle premium motion for icons only (no box/shadow) */
/* Apply to all logo images across section variants */
.section-logo,
.hero-logo,
.main-logo,
.medallion-logo,
.diagonal-logo,
.luxury-logo,
.framed-logo,
.luxury-main-logo,
.diagonal-main-logo,
.logo-large,
.logo-medium,
.logo-small-1,
.logo-small-2,
.logo-small-3,
.logo-small-4 {
  will-change: transform;
  transform-origin: 50% 55%;
  animation: iconFloat 7s ease-in-out infinite, iconTilt 9s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes iconTilt {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .section-logo,
  .hero-logo,
  .main-logo,
  .medallion-logo,
  .diagonal-logo,
  .luxury-logo,
  .framed-logo,
  .luxury-main-logo,
  .diagonal-main-logo,
  .logo-large,
  .logo-medium,
  .logo-small-1,
  .logo-small-2,
  .logo-small-3,
  .logo-small-4 {
    animation: none;
  }
}

/* Scroll reveal + premium float for icons */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

.section-logo-container.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: iconBob 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes iconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .section-logo-container.is-visible { animation: none; }
}

/* Section Divider */
.section-divider {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a2b40, transparent);
  margin: 1rem auto;
  border-radius: 1px;
  position: relative;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 43, 64, 0.3), transparent);
  border-radius: 1px;
}

/* Logo Watermark */
.logo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

.logo-watermark-large {
  width: 300px;
  height: 300px;
  opacity: 0.02;
}

/* Logo Showcase Section */
.logo-showcase-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.logo-showcase-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23000" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23000" opacity="0.02"/><circle cx="50" cy="10" r="0.5" fill="%23000" opacity="0.03"/><circle cx="10" cy="60" r="0.5" fill="%23000" opacity="0.03"/><circle cx="90" cy="40" r="0.5" fill="%23000" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

/* Design 1: Central Logo with Orbital Elements */
.design-1-central-logo {
  position: relative;
  margin: 3rem 0;
}

.logo-cluster-main {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto 2rem;
}

.main-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  z-index: 3;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
  animation: logoPulse 4s ease-in-out infinite;
}

.logo-orbital {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0.6;
  animation: logoOrbit 20s linear infinite;
}

.logo-1 { top: 20px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.logo-2 { top: 50%; right: 20px; transform: translateY(-50%); animation-delay: -4s; }
.logo-3 { bottom: 20px; left: 50%; transform: translateX(-50%); animation-delay: -8s; }
.logo-4 { top: 50%; left: 20px; transform: translateY(-50%); animation-delay: -12s; }
.logo-5 { top: 30%; right: 30%; animation-delay: -16s; }

@keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes logoOrbit {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

.showcase-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 0.2em;
  color: #172b38;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.showcase-subtitle {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  font-weight: 300;
  text-transform: uppercase;
}

/* Design 2: Elegant Frame Layout */
.design-2-elegant-frame {
  position: relative;
  margin: 3rem 0;
  display: none;
}

.elegant-frame {
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
  position: relative;
  border: 3px solid #1a2b40;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26, 43, 64, 0.05) 0%, rgba(26, 43, 64, 0.1) 100%);
}

.framed-logo {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.elegant-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.15em;
  color: #172b38;
  margin-bottom: 1rem;
}

.elegant-divider {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a2b40, transparent);
  margin: 0 auto 1rem;
}

.elegant-subtitle {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 300;
  text-transform: uppercase;
}

/* Design 3: Minimalist Stack */
.design-3-minimalist {
  position: relative;
  margin: 3rem 0;
  display: none;
}

.minimalist-logo-stack {
  position: relative;
  width: 250px;
  height: 200px;
  margin: 0 auto 2rem;
}

.minimalist-logo-stack .logo-large {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  z-index: 3;
}

.minimalist-logo-stack .logo-medium {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 50px;
  height: 50px;
  opacity: 0.7;
  z-index: 2;
}

.minimalist-logo-stack .logo-small-1,
.minimalist-logo-stack .logo-small-2,
.minimalist-logo-stack .logo-small-3,
.minimalist-logo-stack .logo-small-4 {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  z-index: 1;
}

.minimalist-logo-stack .logo-small-1 { top: 100px; left: 30px; }
.minimalist-logo-stack .logo-small-2 { top: 120px; right: 30px; }
.minimalist-logo-stack .logo-small-3 { top: 140px; left: 50%; transform: translateX(-50%); }
.minimalist-logo-stack .logo-small-4 { top: 80px; right: 20px; }

.minimalist-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: #172b38;
  margin-bottom: 0.5rem;
}

.minimalist-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 300;
  text-transform: uppercase;
}

/* Design 4: Diagonal Composition */
.design-4-diagonal {
  position: relative;
  margin: 3rem 0;
  display: none;
}

.diagonal-logo-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.diagonal-main-logo {
  width: 100px;
  height: 100px;
  transform: rotate(-15deg);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}

.diagonal-text-content {
  text-align: left;
}

.diagonal-main-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.1em;
  color: #172b38;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.diagonal-main-subtitle {
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 300;
  text-transform: uppercase;
}

/* Design 5: Luxury Gold Accent */
.design-5-luxury-accent {
  position: relative;
  margin: 3rem 0;
  display: none;
}

.luxury-logo-frame {
  width: 180px;
  height: 180px;
  margin: 0 auto 2rem;
  position: relative;
  border: 2px solid #172b38;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(23, 43, 56, 0.1) 0%, rgba(23, 43, 56, 0.05) 100%);
  box-shadow: 0 8px 24px rgba(23, 43, 56, 0.2);
}

.luxury-main-logo {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.luxury-main-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: 0.12em;
  color: #172b38;
  margin-bottom: 0.5rem;
}

.luxury-main-subtitle {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.luxury-accent-line {
  width: 80px;
  height: 3px;
  background: #172b38;
  margin: 0 auto;
  border-radius: 2px;
}

.hero-full-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  color: var(--white);
  z-index: 2;
}

.hero-caption h1 {
  color: var(--white);
  font-size: 2.25rem;
  font-weight: 700;
  padding-left: 30px;
  text-shadow: 0 6px 12px rgba(0,0,0,0.4);
  line-height: 1.1;
  letter-spacing: 0.15em;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-caption .lead {
  font-size: 1rem;
  margin-bottom: 0;
  padding: 1rem 2rem;
  opacity: 0.9;
  text-shadow: 0 3px 6px rgba(0,0,0,0.4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08em;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  animation: fadeInUp 1s ease-out 0.6s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero actions removed - cleaner design */

/* Cards - Disneyland Paris style */
.card-disney {
  background: var(--white);
  border: 1px solid var(--border-grey);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.card-disney:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: #172b38;
}

.card-disney .card-image {
  position: relative;
  overflow: hidden;
}

.card-disney .card-image img {
  transition: transform 0.3s ease;
}

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

.card-disney .card-body {
  padding: 1.5rem;
}

.card-disney h5 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--dark-grey);
}

.card-disney p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Buttons */
.btn-primary {
  background: #172b38;
  border: 1px solid #1a2b40;
  border-radius: 8px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #0052A3;
  border-color: #0052A3;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: #172b38;
  border: 1px solid #1a2b40;
  border-radius: 20px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}

.btn-outline-primary:hover {
  background: #172b38;
  border-color: #172b38;
  transform: translateY(-1px);
}

/* Pattern overlays */
.texture-pattern {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 60px;
  opacity: 0.2;
  transition: all 0.3s ease;
}

.card-disney:hover .texture-pattern {
  opacity: 0.4;
  transform: rotate(-5deg) scale(1.1);
}

/* Enhanced decorative hover effects inspired by traditional patterns */
.card-disney {
  position: relative;
  overflow: hidden;
}

.card-disney::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(26, 43, 64, 0.03) 0%, 
    rgba(26, 43, 64, 0.08) 25%, 
    rgba(26, 43, 64, 0.03) 50%, 
    rgba(26, 43, 64, 0.08) 75%, 
    rgba(26, 43, 64, 0.03) 100%);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.card-disney::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(26, 43, 64, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(26, 43, 64, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(26, 43, 64, 0.06) 0%, transparent 50%);
  opacity: 0;
  transform: rotate(0deg) scale(0.8);
  transition: all 0.6s ease;
  z-index: 1;
  pointer-events: none;
}

.card-disney:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, 
    rgba(26, 43, 64, 0.08) 0%, 
    rgba(26, 43, 64, 0.15) 25%, 
    rgba(26, 43, 64, 0.08) 50%, 
    rgba(26, 43, 64, 0.15) 75%, 
    rgba(26, 43, 64, 0.08) 100%);
}

.card-disney:hover::after {
  opacity: 1;
  transform: rotate(180deg) scale(1.2);
}

/* Enhanced button hover effects with shadow and pattern */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  box-shadow: 
    0 8px 25px rgba(26, 43, 64, 0.15),
    0 4px 12px rgba(26, 43, 64, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Special hover effect for service cards */
.card-disney .service-icon {
  position: relative;
  overflow: hidden;
}

.card-disney .service-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(26, 43, 64, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: 1;
}

.card-disney:hover .service-icon::before {
  width: 120px;
  height: 120px;
}

/* Decorative pattern overlay for cards */
.card-disney .card-image {
  position: relative;
}

.card-disney .card-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 20%, rgba(26, 43, 64, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(26, 43, 64, 0.03) 0%, transparent 40%),
    linear-gradient(45deg, transparent 30%, rgba(26, 43, 64, 0.02) 50%, transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

.card-disney:hover .card-image::after {
  opacity: 1;
}

/* Enhanced texture pattern animation */
.texture-pattern {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 60px;
  opacity: 0.2;
  transition: all 0.4s ease;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(26, 43, 64, 0.1));
}

.card-disney:hover .texture-pattern {
  opacity: 0.6;
  transform: rotate(-8deg) scale(1.15);
  filter: drop-shadow(0 4px 8px rgba(26, 43, 64, 0.2));
}

.section-watermark {
  position: absolute;
  left: -80px;
  top: 20px;
  width: 200px;
  opacity: 0.03;
  z-index: 0;
}

/* Service icons */
.service-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: var(--light-blue);
  color: #172b38;
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.card-disney:hover .service-icon {
  background: #172b38;
  color: var(--white);
  transform: scale(1.1);
}

/* Newsletter section */
.newsletter {
  background: var(--light-grey);
  padding: 4rem 0;
}

.newsletter-group {
  max-width: 500px;
  margin: 0 auto;
}

.newsletter-group .form-control {
  padding: 1rem 1.25rem;
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--border-grey);
  font-size: 1rem;
}

.newsletter-group .btn {
  border-radius: 0 8px 8px 0;
  padding: 1rem 2rem;
}

/* Booking form section */
.booking-section {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--border-grey);
  padding: 2rem;
  margin: 2rem 0;
}

.booking-tabs {
  border-bottom: 1px solid var(--border-grey);
  margin-bottom: 2rem;
}

.booking-tab {
  padding: 1rem 2rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.booking-tab.active {
  color: #172b38;
  border-bottom-color: #1a2b40;
}

.booking-form .form-control {
  border: 1px solid var(--border-grey);
  border-radius: 20px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

.booking-form .form-control:focus {
  border-color: #172b38;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.1);
}

/* ========================================
   MINIMAL FLAT FOOTER DESIGN
   ======================================== */

.footer {
  background: #172b38;
  color: #ffffff;
  padding: 3rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 20%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.3) 80%, 
    transparent 100%);
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Brand Section */
.footer-brand {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.brand-logo:hover {
  transform: translateY(-2px);
}

.logo {
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
}

/* Footer logo with white background */
.footer .logo {
  background: white;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* White background div for footer logo */
.logo-white-bg {
  background: white;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin-right: 0.5rem;
}

/* Mobile responsiveness for footer */
@media (max-width: 768px) {
  .logo-white-bg {
    padding: 6px;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
  }
  
  .ocean-text {
    font-size: 1rem;
  }
  
  .gallery-text {
    font-size: 0.7rem;
  }
  
  .logo-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0.75rem;
  }
  
  .ocean-logo {
    text-align: center;
  }
  
  .footer-nav-section {
    margin-bottom: 0.5rem;
  }
  
  /* Show titles on mobile */
  .nav-title {
    display: block;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: left;
  }
  
  .nav-links {
    gap: 0.4rem;
  }
  
  .nav-links a {
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }
  
  /* Mobile layout for column-based footer */
  .nav-links {
    gap: 0.2rem;
  }
  
  .nav-links .nav-link {
    font-size: 0.9rem;
    padding: 0.2rem 0;
  }
  
  .footer-nav-section {
    margin-bottom: 1rem;
  }
  
  .footer-nav-section {
    text-align: left;
  }
  
  .nav-title {
    text-align: left;
    margin-bottom: 0.5rem;
  }
  
  .contact-card {
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.75rem;
  }
  
  .contact-item {
    margin-bottom: 0.25rem;
    padding: 0.25rem 0;
  }
  
  .contact-item i {
    display: inline-block;
  }
  
  .contact-item {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    display: flex !important;
  }
  
  .footer::before {
    display: none;
  }
  
  .footer .col-6 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 200px;
  }
  

  
  .social-title {
    display: flex;
  }
  
  .social-icons {
    justify-content: center;
    gap: 0.75rem;
  }
  
  .social-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  /* Reduce all margins and padding */
  .footer-main {
    padding: 0.5rem 0;
  }
  
  .footer-brand-section {
    margin-bottom: 0.5rem;
  }
  
  .footer-nav-section {
    padding: 0;
    margin-bottom: 0.5rem;
  }
  
  .modern-footer {
    padding: 1.5rem 0 1rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 576px) {
  .logo-white-bg {
    padding: 6px;
    margin-right: 0.5rem;
    margin-bottom: 0.75rem;
  }
  
  .ocean-text {
    font-size: 1rem;
  }
  
  .gallery-text {
    font-size: 0.75rem;
  }
  
  .footer-main {
    padding: 2rem 0;
  }
  
  .footer-brand-section {
    margin-bottom: 2rem;
  }
  
  .nav-title {
    font-size: 1rem !important;
    margin-bottom: 0.75rem;
    text-align: left;
  }
  
   {
    font-size: 0.85rem;
    padding: 0.4rem 0;
  }
  
  .contact-card {
    padding: 1rem 0.75rem;
  }
  
  .contact-item {
    margin-bottom: 0.4rem;
    padding: 0.4rem 0;
  }
  
  .contact-item i {
    font-size: 0.9rem;
    width: 16px;
  }
  
  .contact-item span {
    font-size: 0.85rem;
  }
  
  .social-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
  
  .social-icons {
    gap: 0.5rem;
  }
}

.brand-logo:hover .logo {
  transform: rotate(5deg) scale(1.1);
}

.brand-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.brand-tagline {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
  opacity: 0.8;
}

/* Icon Navigation */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.nav-section {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.nav-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: #172b38;
}

.nav-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #1a2b40, #003D99);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.nav-section:hover .nav-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.nav-content {
  flex-grow: 1;
}

.nav-content h6 {
  color: #333333;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 15px;
  padding: 0.3rem 0;
  transition: all 0.3s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links a:hover {
  color: #ffffff;
  transform: translateX(8px);
}

.nav-links a::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: #172b38;
  transition: width 0.3s ease;
}

.nav-links a:hover::before {
  width: 10px;
}

/* Social Links */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem 0;
  border-top: 1px solid #e0e0e0;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  color: #666666;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  min-width: 80px;
}

.social-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: #172b38;
}

.social-item i {
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.social-item span {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.social-item:hover i {
  transform: scale(1.2);
}

.social-item:nth-child(1):hover {
  color: #e4405f;
  border-color: #e4405f;
}

.social-item:nth-child(2):hover {
  color: #1877f2;
  border-color: #1877f2;
}

.social-item:nth-child(3):hover {
  color: #e60023;
  border-color: #e60023;
}

.social-item:nth-child(4):hover {
  color: #ff0000;
  border-color: #ff0000;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer {
    padding: 2rem 0 1.5rem;
  }
  
  .footer-content {
    padding: 0 1rem;
  }
  
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .nav-section {
    padding: 1rem;
  }
  
  .footer-social {
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .social-item {
    min-width: 70px;
    padding: 0.8rem;
  }
}

@media (max-width: 576px) {
  .footer {
    padding: 1.5rem 0 1rem;
  }
  
  .brand-text {
    font-size: 1.5rem;
  }
  
  .brand-tagline {
    font-size: 0.8rem;
  }
  
  .nav-section {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .nav-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin: 0 auto;
  }
  
  .footer-social {
    gap: 0.5rem;
  }
  
  .social-item {
    min-width: 60px;
    padding: 0.6rem;
  }
  
  .social-item i {
    font-size: 1.2rem;
  }
  
  .social-item span {
    font-size: 0.7rem;
  }
}

/* Section Divider 2 */
.section-divider2 {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 20%, 
    rgba(255, 255, 255, 0.1) 50%, 
    rgba(255, 255, 255, 0.3) 80%, 
    transparent 100%);
}

/* Premium CTA Section */
.premium-cta-section {
  background: linear-gradient(135deg, #172b38 0%, #2a4a5c 50%, #172b38 100%);
  border-radius: 25px;
  padding: 4rem 3rem;
  margin: 3rem 0;
  box-shadow: 0 20px 60px rgba(23, 43, 56, 0.3);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
  pointer-events: none;
}

.cta-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-badge i {
  color: #ffd700;
  font-size: 1rem;
}

.cta-title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  font-family: 'Roboto', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}

.feature-item i {
  color: #fff;
  font-size: 1.1rem;
}

.cta-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-cta-primary {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  color: #172b38;
  border: none;
  padding: 1.2rem 2.5rem;
  border-radius: 15px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.btn-cta-primary:hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #172b38;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-cta-secondary {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 1.2rem 2.5rem;
  border-radius: 15px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
}

.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.3), 
    transparent);
  transition: left 0.6s ease;
}

.btn-cta-primary:hover .btn-shine,
.btn-cta-secondary:hover .btn-shine {
  left: 100%;
}

.btn-cta-primary i,
.btn-cta-secondary i {
  font-size: 1.2rem;
}

.cta-trust {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
}

.cta-trust i {
  color: #fff;
  margin-right: 0.5rem;
}

/* Responsive Premium CTA */
@media (max-width: 768px) {
  .premium-cta-section {
    padding: 2.5rem 1.5rem;
    margin: 2rem 0;
  }
  
  .cta-title {
    font-size: 2rem;
    margin-bottom: 1.2rem;
  }
  
  .cta-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }
  
  .cta-features {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  
  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100%;
    justify-content: center;
    padding: 1.3rem 1rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .premium-cta-section {
    padding: 2rem 1rem;
  }
  
  .cta-title {
    font-size: 1.8rem;
  }
  
  .cta-description {
    font-size: 1rem;
  }
}

/* Footer Bottom */
.footer-bottom {
  border-top: none;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0;
  padding-top: 2rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
}

.footer-link {
  color:#c0c7cd;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-link:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: -1rem;
  color: #dee2e6;
  font-weight: 300;
}

/* Responsive Footer Bottom */
@media (max-width: 768px) {
  .footer-bottom-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .footer-links {
    gap: 1.5rem;
  }
  
  .footer-link:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .footer-link {
    font-size: 0.8rem;
  }
}

.copyright-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.copyright {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.certifications {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cert-badge {
  background: var(--light-grey);
  color: var(--dark-grey);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-legal {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.legal-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
  position: relative;
  padding: 0.5rem 0;
}

.legal-link:hover {
  color: #172b38;
}

.legal-link:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: -1rem;
  color: #dee2e6;
  font-weight: 300;
}

/* Animations */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer {
    padding: 3rem 0 1.5rem;
  }

  
  .brand-container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-description {
    max-width: 100%;
    text-align: center;
  }
  
  .footer-stats {
    justify-content: center;
    gap: 1.5rem;
  }
  
  .footer-social {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
  
  .footer-section {
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .section-header {
    justify-content: center;
  }
  
  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .showcase-item {
    padding: 1.5rem 1rem;
  }
  
  .contact-item {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-legal {
    justify-content: center;
    gap: 1rem;
  }
  
  .legal-link:not(:last-child)::after {
    display: none;
  }
  
  .copyright-section {
    text-align: center;
  }
  
  .certifications {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .footer {
    padding: 2rem 0 1rem;
  }
  
  .brand-name {
    font-size: 1.5rem;
  }
  
  .footer-description {
    font-size: 1rem;
  }
  
  .footer-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stat-number {
    font-size: 1.5rem;
  }
  
  .social-link {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .showcase-title {
    font-size: 1.8rem;
  }
  
  .showcase-subtitle {
    font-size: 1rem;
  }
  
  .showcase-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .contact-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .copyright {
    font-size: 0.8rem;
  }
  
  .cert-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
}

/* Utility classes */
.py-6 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.object-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius-sm);
}


/* Force border radius on all elements */
* {
  border-radius: inherit;
}

/* Specific overrides for common elements */
.btn, .card, .dropdown-menu, .nav-link, .form-control, .service-icon {
  border-radius: var(--border-radius) !important;
}

/* Override Bootstrap default border radius */
.card, .btn, .dropdown-menu, .nav-link, .form-control {
  border-radius: var(--border-radius) !important;
}

/* Additional Bootstrap overrides */
.rounded, .rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5 {
  border-radius: var(--border-radius) !important;
}

/* Override any existing border radius values */
[class*="rounded"], [class*="border-radius"] {
  border-radius: var(--border-radius) !important;
}

/* Force border radius on all interactive elements */
a, button, input, select, textarea, .btn, .card, .dropdown, .nav-item, .navbar-brand {
  border-radius: var(--border-radius) !important;
}

/* Container tweaks */
.container, .container-fluid {max-width: 1440px}
.container-fluid {padding-left: 1.5rem; padding-right: 1.5rem}
.row {--bs-gutter-x: 1.5rem}

/* ========================================
   MOBILE MENU - FIXED IMPLEMENTATION
   ======================================== */

/* Mobile Toggle Button */
.navbar-toggler {
  display: none;
  border: none;
  background: transparent;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid #172b38;
  outline-offset: 2px;
}

.navbar-toggler:hover {
  background: rgba(23, 43, 56, 0.1);
  transform: scale(1.05);
}

.navbar-toggler-icon {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 43, 64, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  display: block;
  transition: all 0.3s ease;
}

/* Show on mobile only */
@media (max-width: 991.98px) {
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .navbar-collapse.show {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
  }
  
  /* Ensure Bootstrap collapse works */
  .navbar-collapse.collapse {
    display: none !important;
  }
  
  .navbar-collapse.collapse.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Override custom styles when Bootstrap shows the menu */
  .navbar-collapse.collapse.show {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(15px) !important;
  }
  
  .navbar-collapse .navbar-nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: linear-gradient(135deg, var(--white) 0%, rgba(230, 242, 255, 0.8) 100%);
    flex-direction: column;
    padding: 3rem 0 2rem;
    margin: 0;
    box-shadow: -20px 0 60px rgba(0,0,0,0.25);
    transform: translateX(100%) scale(0.8);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    border-left: 1px solid rgba(26, 43, 64, 0.1);
  }
  
  .navbar-collapse.show .navbar-nav {
    transform: translateX(0) scale(1);
  }
  
  .navbar-nav .nav-item {
    margin: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .navbar-collapse.show .navbar-nav .nav-item {
    opacity: 1;
    transform: translateX(0);
  }
  
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(1) { transition-delay: 0.1s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(2) { transition-delay: 0.15s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(3) { transition-delay: 0.2s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(4) { transition-delay: 0.25s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(5) { transition-delay: 0.3s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(6) { transition-delay: 0.35s; }
  
  .navbar-nav .nav-link {
    padding: 1.5rem 2.5rem !important;
    border-radius: 0;
    margin: 0.25rem 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(26, 43, 64, 0.05);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    border-radius: var(--border-radius-sm);
  }
  
  .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2b40, rgba(26, 43, 64, 0.8));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }
  
  .navbar-nav .nav-link::after {
    display: none !important;
  }
  
  .navbar-nav .nav-link:hover::before {
    left: 0;
  }
  
  .navbar-nav .nav-link:hover {
    background: transparent;
    color: #172b38 !important;
    padding-left: 3rem;
    box-shadow: 0 8px 25px rgba(23, 43, 56, 0.2);
  }
  
  /* Mobile close button - only visible when menu is open */
  .mobile-close-btn {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(26, 43, 64, 0.9);
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  
  .navbar-collapse.show .mobile-close-btn {
    display: flex;
    opacity: 1;
    transform: scale(1);
  }
  
  .mobile-close-btn:hover {
    background: #172b38;
    color: var(--white);
    transform: scale(1.1) rotate(90deg);
  }
}

/* Hide mobile close button on desktop */
@media (min-width: 992px) {
  .mobile-close-btn {
    display: none !important;
  }
}

/* Ensure only one close button is visible */
.navbar-collapse .btn-close,
.navbar-collapse .close,
.navbar-collapse [data-bs-dismiss] {
  display: none !important;
}

/* Mobile dropdown positioning */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: static !important;
    display: none;
    width: 100%;
    margin: 0 1.5rem;
    border: none;
    box-shadow: 0 2px 8px rgba(26, 43, 64, 0.08);
    background: rgba(23, 43, 56, 0.02);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #1a2b40;
    transform: translateY(-5px);
  }
  
  .navbar .dropdown-menu.show {
    display: block !important;
    opacity: 1;
    max-height: 400px;
    transform: translateY(0) scale(1);
  }
  
  .navbar .dropdown-item {
    padding: 0.8rem 1rem;
    margin: 0.1rem 0;
    border-radius: var(--border-radius-sm);
    background: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(26, 43, 64, 0.03);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: 'Roboto', sans-serif;
    opacity: 0;
    transform: translateX(20px);
    color: #172b38;
  }
  
  .navbar .dropdown-menu.show .dropdown-item {
    opacity: 1;
    transform: translateX(0);
  }
  
  .navbar .dropdown-menu.show .dropdown-item:nth-child(1) { transition-delay: 0.1s; }
  .navbar .dropdown-menu.show .dropdown-item:nth-child(2) { transition-delay: 0.15s; }
  .navbar .dropdown-menu.show .dropdown-item:nth-child(3) { transition-delay: 0.2s; }
  .navbar .dropdown-menu.show .dropdown-item:nth-child(4) { transition-delay: 0.25s; }
  
  .navbar .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: rgba(26, 43, 64, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: var(--border-radius-sm);
  }
  
  .navbar .dropdown-item:hover {
    background: rgba(26, 43, 64, 0.05) !important;
    color: #1a2b40 !important;
    transform: translateX(8px);
    padding-left: 1.5rem;
  }
  
  .navbar .dropdown-item:hover::before {
    width: 100%;
  }
  
  .navbar .dropdown-item.active {
    background: rgba(26, 43, 64, 0.08) !important;
    color: #1a2b40 !important;
    font-weight: 600;
  }
  
  .navbar .dropdown-item:focus {
    background: rgba(26, 43, 64, 0.08) !important;
    color: #1a2b40 !important;
    font-weight: 600;
  }
  
  .navbar .dropdown-toggle::after {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0.5rem;
    font-size: 0.8rem;
    display: inline-block !important;
    content: "▼" !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
  }
  
  .navbar .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
    content: "▲" !important;
  }
  
  .navbar .dropdown.show .dropdown-toggle {
    background: rgba(26, 43, 64, 0.08);
    color: #1a2b40 !important;
    transform: scale(1.02);
    font-weight: 700;
  }
  
  .navbar .dropdown.show .dropdown-toggle::before {
    width: 100%;
  }
  
  /* Hide any minus icons in mobile menu */
  .navbar-collapse .nav-link::after {
    display: none !important;
  }
  
  .navbar-collapse .dropdown-toggle::after {
    display: inline-block !important;
  }
}

/* ========================================
   FAMILY BUSINESS SECTION
   ======================================== */

.family-business-section {
  background: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.Rug-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  border-left: 4px solid #002841;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: #f1f3f4;
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(23, 43, 56, 0.1);
}

.feature-icon {
  background: #002841;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.feature-text h6 {
  color: #002841;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.feature-text p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

/* ========================================
   RUG SPECIALISTS SECTION
   ======================================== */
.Rug-specialists-section {
  background: #fafafa;
  position: relative;
}

.Rug-specialists-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 40, 65, 0.02) 1px,
    rgba(0, 40, 65, 0.02) 2px
  );
  pointer-events: none;
}

.specialist-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  border: 1px solid rgba(0, 40, 65, 0.05);
}

.specialist-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 40, 65, 0.15);
  border-color: rgba(0, 40, 65, 0.1);
}

.specialist-icon {
  background: #002841;
  color: white;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.specialist-card:hover .specialist-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 40, 65, 0.3);
}

.specialist-content h5 {
  color: #002841;
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.specialist-content p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ========================================
   VIDEO SHOWCASE SECTION
   ======================================== */
.video-showcase-section {
  position: relative;
  width: 100vw;
  height: 60vh;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.showcase-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-content {
  text-align: center;
  color: white;
  max-width: 900px;
  padding: 3rem 2rem;
}

.video-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: 3px;
  line-height: 1.1;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
}

.video-subtitle {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 4rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.5px;
  color: #f0f0f0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

.video-stats {
  display: flex;
  justify-content: center;
  gap: 5rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem 1.5rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.stat-number {
  display: block;
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.8rem;
  font-family: 'Roboto', sans-serif;
}

.stat-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Roboto', sans-serif;
}

@media (max-width: 768px) {
  .video-title {
    font-size: 2.8rem;
    letter-spacing: 2px;
  }
  
  .video-subtitle {
    font-size: 1.2rem;
    margin-bottom: 3rem;
  }
  
  .video-stats {
    gap: 2rem;
  }
  
  .stat-item {
    padding: 1.5rem 1rem;
  }
  
  .stat-number {
    font-size: 2.2rem;
  }
  
  .stat-label {
    font-size: 0.9rem;
  }
}

.Rug-showcase {
  position: relative;
  height: 500px;
}

.Rug-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  height: 100%;
  padding: 1rem;
}

.Rug-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.Rug-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.Rug-large {
  grid-column: 1 / 3;
  grid-row: 1;
}

.Rug-medium {
  grid-column: 1;
  grid-row: 2;
}

.Rug-small {
  grid-column: 2;
  grid-row: 2;
}

.Rug-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.Rug-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1rem 0.75rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.Rug-item:hover .Rug-label {
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .Rug-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
  }
  
  .Rug-large,
  .Rug-medium,
  .Rug-small {
    grid-column: 1;
    height: 200px;
  }
  
  .Rug-large {
    grid-row: 1;
  }
  
  .Rug-medium {
    grid-row: 2;
  }
  
  .Rug-small {
    grid-row: 3;
  }
  
  .Rug-showcase {
    height: auto;
  }
}

/* ========================================
   RUG HERITAGE SECTION
   ======================================== */
.Rug-heritage-section {
  background: linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.Rug-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.heritage-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #172b38;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.heritage-visual {
  position: relative;
}

.heritage-image {
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.heritage-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
   RUG QUALITY SECTION
   ======================================== */
.Rug-quality-section {
  background: var(--white);
}

.quality-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.quality-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

.quality-item i {
  color: #172b38;
  font-size: 1.1rem;
}

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: 400px;
}

.quality-item-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.quality-item-img:hover {
  transform: translateY(-5px);
}

.quality-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quality-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1rem;
  font-weight: 600;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.quality-item-img:hover .quality-overlay {
  transform: translateY(0);
}

/* ========================================
   SERVICES SHOWCASE SECTION
   ======================================== */
.services-showcase-section {
  background: white;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-logo {
  width: 90px;
  height: 90px;
  margin-bottom: 1rem;
  opacity: 0.8;
  transition: all 0.3s ease;
  animation: logoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 40, 65, 0.15));
}

.section-logo:hover {
  opacity: 1;
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 40, 65, 0.25));
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.services-content {
  padding-right: 2rem;
}

.services-list {
  margin-top: 2rem;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: white;
  border-radius: 20px;
  border-left: 4px solid #002841;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 40, 65, 0.08);
  position: relative;
  overflow: hidden;
}

.service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 40, 65, 0.02), rgba(255, 107, 53, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-item:hover::before {
  opacity: 1;
}

.service-item:hover {
  background: white;
  transform: translateX(10px) translateY(-5px);
  box-shadow: 0 15px 40px rgba(23, 43, 56, 0.15);
  border-left-color: #172b38;
}

.service-number {
  background: #002841;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 40, 65, 0.2);
}

.service-number i {
  font-size: 1.2rem;
  margin-bottom: 2px;
  opacity: 0.8;
}

.service-number span {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.service-item:hover .service-number {
  background: #172b38;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.3);
}

.service-details h5 {
  color: #002841;
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}

.service-item:hover .service-details h5 {
  color: #172b38;
}

.service-details p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.service-item:hover .service-details p {
  color: #666;
}

.services-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-cards {
  position: relative;
  width: 100%;
  height: 100%;
}

.service-card {
  position: absolute;
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 15px 40px rgba(23, 43, 56, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 40, 65, 0.05);
}

.service-card-1 {
  top: 20%;
  left: 10%;
  width: 120px;
  height: 120px;
}

.service-card-2 {
  top: 50%;
  right: 20%;
  width: 140px;
  height: 140px;
  transform: translateY(-50%);
}

.service-card-3 {
  bottom: 20%;
  left: 30%;
  width: 130px;
  height: 130px;
}

.service-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 25px 60px rgba(23, 43, 56, 0.15);
}

.card-icon {
  background: linear-gradient(135deg, #002841, #172b38);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.service-card h6 {
  color: #002841;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
   MODERN FOOTER
   ======================================== */
.modern-footer {
  background: linear-gradient(135deg, #172b38 0%, #2a4a5c 50%, #172b38 100%);
  padding: 4rem 0 2rem;
  color: #ffffff;
}


/* Brand Section */
.footer-brand-section {
  padding-right: 2rem;
}

.brand-header {
  margin-bottom: 1.5rem;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.decorative-logo {
  width: 60px;
  height: 60px;
  transition: all 0.3s ease;
  animation: logoFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(26, 43, 64, 0.2));
}

.decorative-logo:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 8px 16px rgba(26, 43, 64, 0.3));
}

.logo-svg {
  width: 100%;
  height: 100%;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.ocean-logo {
  text-align: left;
}

.ocean-text {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.4rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1;
  letter-spacing: 0.5px;
  margin: 0;
}

.gallery-text {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.brand-description {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Contact Card */
.contact-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(23, 43, 56, 0.08);
  border: 1px solid rgba(23, 43, 56, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1a2b40, #172b38);
}

.contact-card:hover {
  box-shadow: 0 12px 35px rgba(23, 43, 56, 0.12);
  transform: translateY(-3px);
}

.contact-section,
.social-section {
  text-align: center;
}

.section-title {
  color: #172b38;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.75rem;
  position: relative;
}

.white-section {
  background: white !important;
}

/* ===========================================
   COLLECTION CARDS WITH TEXT OVERLAY
   =========================================== */

.collection-card-new {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.collection-card-new:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.collection-image-new {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.collection-image-new img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.collection-card-new:hover .collection-image-new img {
  transform: scale(1.05);
}

/* Title - Always visible at bottom */
.collection-title-new {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #172b38;
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 0.75rem 1rem;
  margin: 0;
  line-height: 1.3;
  text-align: center;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Hover overlay for description and button */
.collection-content-new {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.collection-card-new:hover .collection-content-new {
  opacity: 1;
}

/* Hide title on hover, show in overlay */
.collection-card-new:hover .collection-title-new {
  opacity: 0;
}

/* Description styling */
.collection-description-new {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Title in overlay (appears on hover) */
.collection-content-new .collection-title-new {
  position: static;
  background: transparent;
  padding: 0;
  margin-bottom: 0.75rem;
  opacity: 1;
}

/* Button styling */
.btn-collection-new {
  display: inline-block;
  background: #34495e;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-align: center;
  border: none;
}

.btn-collection-new:hover {
  background: #2c3e50;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(52, 73, 94, 0.3);
}

/* Responsive Design for Collections */
@media (max-width: 992px) {
  .collection-image-new {
    height: 200px;
  }
  
  .collection-content-new {
    padding: 1.25rem;
  }
  
  .collection-title-new {
    font-size: 1.3rem;
  }
  
  .collection-description-new {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .collection-image-new {
    height: 180px;
  }
  
  .collection-content-new {
    padding: 1rem;
  }
  
  .collection-title-new {
    font-size: 1.2rem;
  }
  
  .collection-description-new {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  
  .btn-collection-new {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
}


.social-title {
  color: #172b38;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.75rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.social-title i {
  font-size: 10px;
  color: #172b38;
  transition: color 0.3s ease;
}

.social-title:hover i {
  color: #172b38;
}

.social-title::after {
  content: '';
  position: absolute;
  bottom: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 1.5px;
  background: #172b38;
  border-radius: 1px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  width: 100%;
}

.contact-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #d1d5db;
}

.contact-item i {
  color: #6b7280;
  font-size: 16px;
  width: 32px;
  height: 32px;
  background: #f3f4f6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item span {
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
}

.contact-item span a {
  color: #374151;
  text-decoration: none;
}

.contact-item span a:hover {
  color: #111827;
}

/* Navigation Sections */
.footer-nav-section {
  margin-bottom: 2rem;
  text-align: left;
}

.nav-title {
  color: #ffffff;
  font-weight: 700;
  font-size:16px;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  margin-bottom: 0.5rem;
}

.nav-link {
  color: #666;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.nav-link:hover {
  color: #172b38;
  transform: translateX(3px);
}

/* Social Section */
.social-icons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon:hover::before {
  opacity: 1;
}

.social-icon.instagram {
  background: #172b38;
  color: white;
  box-shadow: 0 4px 12px rgba(23, 43, 56, 0.2);
}

.social-icon.youtube {
  background: #172b38;
  color: white;
  box-shadow: 0 4px 12px rgba(23, 43, 56, 0.2);
}

.social-icon.facebook {
  background: #1877f2;
  color: white;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2);
}

.social-icon.twitter {
  background: #1da1f2;
  color: white;
  box-shadow: 0 4px 12px rgba(29, 161, 242, 0.2);
}

.social-icon.linkedin {
  background: #0077b5;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.2);
}

.social-icon.pinterest {
  background: #e60023;
  color: white;
  box-shadow: 0 4px 12px rgba(230, 0, 35, 0.2);
}

.social-icon:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.social-icon:hover i {
  animation: rotate 0.6s ease-in-out;
}



.copyright {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}

.footer-link {
  color: #c0c7cd;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-footer {
    padding: 3rem 0 2rem;
  }
  
  .footer-brand-section {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  .brand-header {
    justify-content: center;
    text-align: center;
  }
  
  .footer-links {
    justify-content: flex-start;
    margin-top: 1rem;
  }
  
  .social-icons {
    justify-content: center;
  }
}

/* ========================================
   RUG COLLECTIONS SECTION
   ======================================== */
.Rug-collections-section {
  background: var(--white);
}

.collection-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

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

.collection-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.collection-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.collection-card:hover img {
  transform: scale(1.05);
}

.collection-info {
  padding: 1.5rem;
  background: white;
}

.collection-info h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.collection-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========================================
   DECORATION SECTION
   ======================================== */
.decoration-section {
  background: var(--light-grey);
  position: relative;
}

.decoration-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.decoration-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
  background: white;
}

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

.decoration-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.decoration-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.decoration-card:hover img {
  transform: scale(1.05);
}

.decoration-info {
  padding: 1.5rem;
  background: white;
}

.decoration-info h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.decoration-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ========================================
   CUSTOM BUTTON STYLE
   ======================================== */
.btn-custom {
  background: #002841;
  border: 2px solid #002841;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-custom:hover {
  background: #001a2e;
  border-color: #001a2e;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 43, 56, 0.3);
}

.btn-custom:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 43, 56, 0.25);
  outline: none;
}

/* ========================================
   RUG CARE SECTION
   ======================================== */
.Rug-care-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  position: relative;
}

.care-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.care-services {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.service-item i {
  color: #172b38;
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.service-item h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.service-item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

.care-visual {
  position: relative;
}

.care-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
   RUG SIZING SECTION
   ======================================== */
.Rug-sizing-section {
  background: var(--light-grey);
}

.size-guide-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  height: 100%;
}

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

.size-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.size-guide-card h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.size-guide-card p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ========================================
   RUG INVESTMENT SECTION
   ======================================== */
.Rug-investment-section {
  background: linear-gradient(135deg, #f8f6f0 0%, #f0ede5 100%);
  position: relative;
}

.investment-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(160, 82, 45, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.investment-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

.benefit-item i {
  color: #172b38;
  font-size: 1.1rem;
}

.value-chart {
  display: flex;
  align-items: end;
  gap: 1rem;
  height: 200px;
  padding: 1rem;
}

.chart-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.chart-bar {
  width: 100%;
  background: linear-gradient(to top, #1a2b40, #4a90e2);
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  min-height: 20px;
}

.chart-item:hover .chart-bar {
  background: linear-gradient(to top, #003D99, #1a2b40);
}

.chart-item span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ========================================
   RUG STORIES SECTION
   ======================================== */
.Rug-stories-section {
  background: var(--white);
}

.story-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  height: 100%;
}

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

.story-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.story-content {
  padding: 1.5rem;
}

.story-content h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.story-content p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.9rem;
}

/* ========================================
   RUG GUARANTEE SECTION
   ======================================== */
.Rug-guarantee-section {
  background: linear-gradient(135deg, #2c1810 0%, #3d2817 100%);
  color: white;
  position: relative;
}

.guarantee-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.guarantee-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.guarantee-item i {
  color: #172b38;
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.guarantee-item h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.guarantee-item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

.certificate-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.certificate {
  background: white;
  color: var(--dark-grey);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  max-width: 300px;
  text-align: center;
}

.certificate h5 {
  color: #172b38;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.cert-details {
  margin-bottom: 1.5rem;
}

.cert-details p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.cert-signature {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

/* ========================================
   RUG TESTIMONIALS SECTION
   ======================================== */
.Rug-testimonials-section {
  background: var(--light-grey);
}

.testimonial-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  height: 100%;
}

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

.testimonial-content {
  margin-bottom: 1.5rem;
}

.testimonial-content p {
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
  font-size: 0.95rem;
}

.testimonial-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info h6 {
  color: var(--dark-grey);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.author-info span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Contact Buttons Container */
.contact-buttons-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Contact Button */
.contact-btn {
  flex: 1;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
}

.contact-btn:hover {
  background: var(--dark-grey);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.3);
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #20B2AA, #48CAE4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(32, 178, 170, 0.3);
}

.contact-btn:hover .contact-icon {
  background: white;
}

.contact-icon i {
  font-size: 1.5rem;
  color: white;
}

.contact-btn:hover .contact-icon i {
  color: var(--dark-grey);
}

.contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.contact-title {
  font-size: 1rem;
  color: var(--dark-grey);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.contact-btn:hover .contact-title {
  color: white;
}

.contact-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.2;
}

.contact-btn:hover .contact-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* WhatsApp Button */
.whatsapp-btn {
  flex: 1;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
  border-color: #25d366;
}

.whatsapp-icon {
  width: 50px;
  height: 50px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.whatsapp-icon i {
  font-size: 1.5rem;
  color: white;
}

.whatsapp-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.whatsapp-title {
  font-size: 1rem;
  color: var(--dark-grey);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.whatsapp-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.2;
}

/* Social Section Footer */
.social-section-footer {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.social-section-footer .social-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-grey);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-section-footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-section-footer .social-icon {
  width: 45px;
  height: 45px;
  background: var(--dark-grey);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(23, 43, 56, 0.2);
}

.social-section-footer .social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.4);
}

.social-section-footer .social-icon i {
  font-size: 1.2rem;
}

/* Responsive Design for Contact Buttons */
@media (max-width: 768px) {
  .contact-buttons-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-btn,
  .whatsapp-btn {
    padding: 0.875rem 1.25rem;
  }
  
  .contact-icon,
  .whatsapp-icon {
    width: 45px;
    height: 45px;
  }
  
  .contact-icon i,
  .whatsapp-icon i {
    font-size: 1.25rem;
  }
}

.rating {
  color: #ffc107;
  font-size: 1.2rem;
}

/* ========================================
   RUG CONTACT SECTION
   ======================================== */
.Rug-contact-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  position: relative;
}

.contact-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.contact-item i {
  color: #172b38;
  font-size: 1rem;
  margin-top: 0.25rem;
}

.contact-item h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contact-item p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-visual {
  position: relative;
}

.contact-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive adjustments for all Rug sections */
@media (max-width: 768px) {
  .heritage-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .quality-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .quality-item-img {
    height: 200px;
  }
  
  .value-chart {
    height: 150px;
  }
  
  .guarantee-features,
  .care-services,
  .contact-info {
    gap: 1rem;
  }
}

/* ========================================
   2025 RUG MODELS SECTION
   ======================================== */
.Rug-models-2025-section {
  background: linear-gradient(135deg, #f8f6f0 0%, #f0ede5 100%);
  position: relative;
  overflow: hidden;
}

.Rug-models-2025-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(160, 82, 45, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(205, 133, 63, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* Model Category Cards */
.model-category-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  border: 2px solid transparent;
}

.model-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-color: #172b38;
}

.category-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.model-category-card h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.model-category-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Model Cards */
.model-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
}

.model-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.model-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.model-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.model-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: white;
  z-index: 2;
}

.model-badge.new-2025 {
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  animation: pulse 2s infinite;
}

.model-badge.tech {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
}

.model-badge.luxury {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #333;
}

.model-badge.sustainable {
  background: linear-gradient(45deg, #2ecc71, #27ae60);
}

.model-badge.artistic {
  background: linear-gradient(45deg, #9b59b6, #8e44ad);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.model-info {
  padding: 1.5rem;
}

.model-info h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.model-category {
  color: #172b38;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
  display: block;
}

.model-info p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.model-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.spec {
  background: var(--light-grey);
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Special Effects for Different Categories */
.model-card[data-category="sustainable"] {
  border-left: 4px solid #2ecc71;
}

.model-card[data-category="tech"] {
  border-left: 4px solid #4ecdc4;
}

.model-card[data-category="luxury"] {
  border-left: 4px solid #ffd700;
}

.model-card[data-category="artistic"] {
  border-left: 4px solid #9b59b6;
}

/* Hover Effects for Model Cards */
.model-card:hover .model-badge {
  transform: scale(1.1);
}

.model-card:hover .spec {
  background: #172b38;
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  .model-category-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .category-icon {
    font-size: 2.5rem;
  }
  
  .model-image {
    height: 200px;
  }
  
  .model-info {
    padding: 1rem;
  }
  
  .model-specs {
    gap: 0.25rem;
  }
  
  .spec {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

@media (max-width: 576px) {
  .model-category-card {
    padding: 1rem;
  }
  
  .category-icon {
    font-size: 2rem;
  }
  
  .model-category-card h5 {
    font-size: 1rem;
  }
  
  .model-category-card p {
    font-size: 0.8rem;
  }
  
  .model-info h5 {
    font-size: 1rem;
  }
  
  .model-info p {
    font-size: 0.85rem;
  }
}

/* Animation for Model Cards */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.model-card {
  animation: fadeInUp 0.6s ease-out;
}

.model-card:nth-child(1) { animation-delay: 0.1s; }
.model-card:nth-child(2) { animation-delay: 0.2s; }
.model-card:nth-child(3) { animation-delay: 0.3s; }
.model-card:nth-child(4) { animation-delay: 0.4s; }
.model-card:nth-child(5) { animation-delay: 0.5s; }
.model-card:nth-child(6) { animation-delay: 0.6s; }

/* ========================================
   MODERN ANIMATIONS & INTERACTIONS
   ======================================== */

/* Enhanced Hover Effects */
.hover-lift {
  transition: all var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-2xl);
}

.hover-glow {
  transition: all var(--transition-normal);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(23, 43, 56, 0.3);
}

.hover-rotate {
  transition: transform var(--transition-normal);
}

.hover-rotate:hover {
  transform: rotate(2deg);
}

/* Modern Button Animations */
.btn {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-slow);
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Modern Card Animations */
.card-modern {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-modern:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: #172b38;
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.floating {
  animation: float 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
  40%, 43% { transform: translateY(-10px); }
  70% { transform: translateY(-5px); }
  90% { transform: translateY(-2px); }
}

.bounce {
  animation: bounce 1s ease-in-out;
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Wobble Animation */
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.wobble {
  animation: wobble 1s ease-in-out;
}

/* Glow Animation */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px #172b38; }
  50% { box-shadow: 0 0 20px #172b38, 0 0 30px #172b38; }
}

.glow {
  animation: glow 2s ease-in-out infinite;
}

/* Modern Loading Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Slide In Left Animation */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

/* Slide In Right Animation */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

/* Scale Animation */
@keyframes scale {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}

.scale {
  animation: scale 0.3s ease-out;
}

/* Modern Gradient Text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern Neumorphism */
.neumorphism {
  background: var(--light-grey);
  box-shadow: 
    20px 20px 60px #d1d9e6,
    -20px -20px 60px #ffffff;
}

.neumorphism-inset {
  background: var(--light-grey);
  box-shadow: 
    inset 20px 20px 60px #d1d9e6,
    inset -20px -20px 60px #ffffff;
}

/* Modern Responsive Enhancements */
@media (max-width: 1200px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px) {
  .hover-lift:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .card-modern:hover {
    transform: translateY(-2px);
  }
  
  .btn:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 576px) {
  .floating {
    animation-duration: 4s;
  }
  
  .pulse {
    animation-duration: 3s;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .floating,
  .pulse,
  .bounce,
  .shake,
  .wobble,
  .glow {
    animation: none;
  }
}

/* ========================================
   10 NEW INNOVATIVE RUG SECTIONS
   ======================================== */

/* Innovation Lab Section */
.Rug-innovation-lab {
  background: var(--gradient-dark);
  color: white;
  position: relative;
}

.innovation-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.innovation-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  position: relative;
  height: 100%;
}

.innovation-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
}

.innovation-card h5 {
  color: white;
  margin-bottom: 1rem;
  font-weight: 600;
}

.innovation-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.innovation-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--accent-emerald);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Art Gallery Section */
.Rug-art-gallery {
  background: var(--white);
}

.art-piece {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

.art-piece img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.art-piece:hover img {
  transform: scale(1.05);
}

.art-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  color: white;
  padding: 2rem;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.art-piece:hover .art-overlay {
  transform: translateY(0);
}

.art-overlay h5 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.art-overlay p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.art-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-gold);
}

/* Wellness Section */
.Rug-wellness {
  background: var(--gradient-Rug);
  position: relative;
}

.wellness-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(160, 82, 45, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.wellness-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}

.wellness-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.wellness-item i {
  color: var(--accent-emerald);
  font-size: 1.5rem;
  margin-top: 0.25rem;
}

.wellness-item h6 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.wellness-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Customization Studio Section */
.Rug-customization-studio {
  background: var(--light-grey);
}

.customization-step {
  text-align: center;
  padding: 2rem;
  height: 100%;
  position: relative;
}

.step-number {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.customization-step h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.customization-step p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* Heritage Museum Section */
.Rug-heritage-museum {
  background: var(--gradient-persian);
  color: white;
  position: relative;
}

.museum-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.museum-exhibit {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 100%;
}

.museum-exhibit img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.exhibit-info {
  padding: 1.5rem;
}

.exhibit-info h5 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.exhibit-info p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.exhibit-era {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* VR Section */
.Rug-vr {
  background: var(--white);
}

.vr-features {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}

.vr-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.vr-feature i {
  color: var(--accent-purple);
  font-size: 2rem;
}

.vr-feature span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-grey);
}

.vr-visual {
  position: relative;
}

.vr-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--accent-purple);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Sustainability Section */
.Rug-sustainability {
  background: var(--gradient-Rug);
  position: relative;
}

.sustainability-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.sustainability-metric {
  text-align: center;
  padding: 2rem;
  height: 100%;
}

.metric-icon {
  width: 80px;
  height: 80px;
  background: var(--accent-emerald);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

.metric-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
}

.metric-label {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Masterclass Section */
.Rug-masterclass {
  background: var(--white);
}

.masterclass-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.masterclass-visual {
  position: relative;
}

.masterclass-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Community Section */
.Rug-community {
  background: var(--gradient-primary);
  color: white;
  position: relative;
}

.community-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.community-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  height: 100%;
}

.community-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
}

.community-card h5 {
  color: white;
  margin-bottom: 1rem;
  font-weight: 600;
}

.community-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.community-stats {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Future Vision Section */
.Rug-future-vision {
  background: var(--light-grey);
}

.future-concept {
  height: 100%;
}

.concept-image {
  height: 250px;
  overflow: hidden;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

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

.future-concept:hover .concept-image img {
  transform: scale(1.05);
}

.concept-content {
  padding: 1.5rem;
}

.concept-content h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.concept-content p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.concept-timeline {
  background: var(--accent-orange);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

/* Responsive Design for New Sections */
@media (max-width: 768px) {
  .innovation-card,
  .community-card,
  .sustainability-metric {
    padding: 1.5rem;
  }
  
  .art-piece img {
    height: 300px;
  }
  
  .museum-exhibit img {
    height: 200px;
  }
  
  .vr-features {
    flex-direction: column;
    gap: 1rem;
  }
  
  .wellness-features {
    gap: 1rem;
  }
  
  .masterclass-features {
    gap: 0.75rem;
  }
}

@media (max-width: 576px) {
  .innovation-icon,
  .community-icon,
  .metric-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .metric-number {
    font-size: 2rem;
  }
  
  .art-overlay {
    padding: 1rem;
  }
  
  .art-price {
    font-size: 1.2rem;
  }
}

/* ========================================
   10 NEW PERSIAN RUG SECTIONS
   ======================================== */








/* Persian Investment Section */
.persian-investment {
  background: var(--light-grey);
}

.investment-card {
  text-align: center;
  padding: 2rem;
  height: 100%;
}

.investment-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

.investment-card h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.investment-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.investment-metric {
  background: var(--accent-emerald);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

/* Persian Stories Section */
.persian-stories {
  background: var(--gradient-persian);
  color: white;
  position: relative;
}

.stories-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.story-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  height: 100%;
}

.story-image {
  height: 200px;
  overflow: hidden;
}

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

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

.story-content {
  padding: 1.5rem;
}

.story-content h5 {
  color: white;
  margin-bottom: 1rem;
  font-weight: 600;
}

.story-text {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.story-details {
  display: flex;
  gap: 1rem;
}

.story-year,
.story-origin {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Persian Masters Section */
.persian-masters {
  background: var(--white);
}

.master-card {
  height: 100%;
}

.master-image {
  height: 200px;
  overflow: hidden;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

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

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

.master-info {
  padding: 1.5rem;
}

.master-info h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.master-title {
  color: #172b38;
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.master-description {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.master-achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.achievement {
  background: var(--light-grey);
  color: var(--text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Responsive Design for Persian Sections */
@media (max-width: 768px) {
  .pattern-card,
  .symbol-card,
  .investment-card {
    padding: 1.5rem;
  }
  
  .pattern-image,
  .region-image,
  .story-image,
  .master-image {
    height: 180px;
  }
  
  .weaving-methods,
  .care-tips {
    gap: 1rem;
  }
  
  .method-item,
  .tip-item {
    gap: 0.75rem;
  }
  
  .method-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .region-features,
  .master-achievements {
    gap: 0.25rem;
  }
  
  .feature,
  .achievement {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
}

@media (max-width: 576px) {
  .color-swatch {
    height: 100px;
  }
  
  .size-visual {
    height: 100px;
  }
  
  .size-rectangle.small {
    width: 50px;
    height: 35px;
  }
  
  .size-rectangle.medium {
    width: 75px;
    height: 50px;
  }
  
  .size-rectangle.large {
    width: 100px;
    height: 65px;
  }
  
  .investment-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .story-details {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========================================
   INTERLOCKING PUZZLE ABOUT US SECTION
   ======================================== */

.puzzle-about-section {
  background: var(--gradient-Rug);
  position: relative;
  overflow: hidden;
}

.puzzle-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(160, 82, 45, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Puzzle Container */
.puzzle-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.puzzle-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.puzzle-row:last-child {
  margin-bottom: 0;
}

/* Puzzle Pieces */
.puzzle-piece {
  position: relative;
  flex: 1;
  height: 300px;
  cursor: pointer;
  transition: all var(--transition-normal);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.puzzle-piece:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: var(--shadow-2xl);
}

/* Top Left Piece - Has right tab, bottom tab */
.puzzle-top-left {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, calc(100% - 20px) 100%, 0 calc(100% - 20px));
  background: var(--gradient-primary);
}

/* Top Right Piece - Has left tab, bottom tab */
.puzzle-top-right {
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  background: var(--gradient-gold);
}

/* Bottom Left Piece - Has right tab, top tab */
.puzzle-bottom-left {
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  background: var(--gradient-persian);
}

/* Bottom Right Piece - Has left tab, top tab */
.puzzle-bottom-right {
  clip-path: polygon(20px 0, 100% 0, 100% 100%, calc(100% - 20px) 100%, 0 calc(100% - 20px), 0 20px);
  background: var(--gradient-dark);
}

/* Puzzle Images */
.puzzle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.puzzle-piece:hover .puzzle-image {
  transform: scale(1.1);
}

/* Puzzle Content Overlay */
.puzzle-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.puzzle-piece:hover .puzzle-content {
  transform: translateY(0);
}

.puzzle-content h5 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.puzzle-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin: 0;
}

/* Puzzle Details */
.puzzle-details {
  margin-top: 3rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.detail-content h4 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1.5rem;
}

.detail-content p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Story Stats */
.story-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.stat {
  text-align: center;
  padding: 1rem;
  background: var(--light-grey);
  border-radius: var(--border-radius-lg);
  min-width: 100px;
}

.stat .number {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #172b38;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat .label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Mission Points */
.mission-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.point {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--light-grey);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-normal);
}

.point:hover {
  background: #172b38;
  color: white;
  transform: translateX(10px);
}

.point i {
  color: var(--secondary-gold);
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

.point span {
  font-weight: 600;
}

/* Values Grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.value {
  text-align: center;
  padding: 1.5rem;
  background: var(--light-grey);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-normal);
}

.value:hover {
  background: #172b38;
  color: white;
  transform: translateY(-5px);
}

.value i {
  color: var(--secondary-gold);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.value h6 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.value p {
  font-size: 0.9rem;
  margin: 0;
}

/* Team Stats */
.team-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.team-stat {
  text-align: center;
  padding: 1.5rem;
  background: var(--light-grey);
  border-radius: var(--border-radius-lg);
  min-width: 120px;
}

.team-stat .number {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  color: #172b38;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.team-stat .label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Active State */
.puzzle-piece.active {
  transform: scale(1.1);
  z-index: 20;
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
  .puzzle-piece {
    height: 250px;
  }
  
  .puzzle-content {
    padding: 1rem;
  }
  
  .puzzle-content h5 {
    font-size: 1rem;
  }
  
  .puzzle-content p {
    font-size: 0.8rem;
  }
  
  .puzzle-details {
    padding: 1.5rem;
  }
  
  .story-stats,
  .team-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .mission-points {
    gap: 0.75rem;
  }
  
  .point {
    padding: 0.75rem;
  }
}

@media (max-width: 576px) {
  .puzzle-piece {
    height: 200px;
  }
  
  .puzzle-row {
    flex-direction: column;
    gap: 5px;
  }
  
  .puzzle-piece {
    clip-path: none;
    border-radius: var(--border-radius-lg);
  }
  
  .puzzle-details {
    padding: 1rem;
  }
  
  .detail-content h4 {
    font-size: 1.3rem;
  }
  
  .stat .number,
  .team-stat .number {
    font-size: 1.8rem;
  }
  
  .value {
    padding: 1rem;
  }
  
  .value i {
    font-size: 1.5rem;
  }
}

.family-business-content {
  padding-right: 2rem;
}

/* ========================================
   10 PERSIAN RUG SECTIONS
   ======================================== */

/* Persian Rug Backgrounds */
.persian-rug-bg-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #172b38;
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #DC143C 0%, #8B0000 50%, #B22222 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(225deg, #4B0082 0%, #6A0DAD 50%, #8A2BE2 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(315deg, #228B22 0%, #32CD32 50%, #90EE90 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-6 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #2F4F4F 0%, #708090 50%, #A9A9A9 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-7 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(270deg, #172b38 0%, #172b38 50%, #172b38 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-8 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #B8860B 0%, #DAA520 50%, #F0E68C 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-9 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #800080 0%, #9932CC 50%, #DA70D6 100%);
  opacity: 0.1;
  pointer-events: none;
}

.persian-rug-bg-10 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(225deg, #8B0000 0%, #DC143C 50%, #FF6347 100%);
  opacity: 0.1;
  pointer-events: none;
}

/* 1. Persian Patterns Collection */
.persian-patterns-collection {
  background: var(--gradient-Rug);
  position: relative;
  overflow: hidden;
}

.pattern-showcase-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.pattern-showcase-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.pattern-preview {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.pattern-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.pattern-showcase-card:hover .pattern-preview img {
  transform: scale(1.1);
}

.pattern-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform var(--transition-normal);
}

.pattern-showcase-card:hover .pattern-overlay {
  transform: translateY(0);
}

.pattern-overlay h5 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.pattern-overlay p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin: 0;
}

.pattern-info {
  padding: 1.5rem;
}

.pattern-info h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.pattern-info p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.pattern-origin {
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* 2. Persian Colors & Dyes */
.persian-colors-dyes {
  background: var(--gradient-persian);
  position: relative;
  overflow: hidden;
}

.colors-content {
  color: white;
}

.dye-sources {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.dye-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.dye-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

.dye-color {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.dye-info h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.dye-info p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.9rem;
}

/* 3. Persian Regions Showcase */
.persian-regions-showcase {
  background: var(--gradient-dark);
  position: relative;
  overflow: hidden;
}

.region-showcase-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.region-showcase-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.region-image {
  height: 200px;
  overflow: hidden;
}

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

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

.region-content {
  padding: 1.5rem;
}

.region-content h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.region-description {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.region-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature {
  background: #172b38;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 4. Persian Weaving Process */
.persian-weaving-process {
  background: var(--gradient-gold);
  position: relative;
  overflow: hidden;
}

.weaving-content {
  color: white;
}

.weaving-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.step-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--secondary-gold);
  color: var(--dark-grey);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.step-content h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.step-content p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.9rem;
}

/* 5. Persian Symbols & Meanings */
.persian-symbols-meanings {
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}

.symbol-meaning-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.symbol-meaning-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.symbol-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.symbol-meaning-card h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.symbol-meaning-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.symbol-meaning {
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* 6. Persian Sizes & Dimensions */
.persian-sizes-dimensions {
  background: var(--gradient-Rug);
  position: relative;
  overflow: hidden;
}

.size-dimension-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.size-dimension-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.size-visual {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.size-rectangle {
  border: 3px solid #1a2b40;
  background: var(--light-grey);
  border-radius: var(--border-radius-lg);
  position: relative;
}

.size-rectangle.small {
  width: 80px;
  height: 120px;
}

.size-rectangle.medium {
  width: 120px;
  height: 180px;
}

.size-rectangle.large {
  width: 160px;
  height: 240px;
}

.size-rectangle.runner {
  width: 80px;
  height: 240px;
}

.size-rectangle.square {
  width: 120px;
  height: 120px;
}

.size-rectangle.oversize {
  width: 200px;
  height: 280px;
}

.size-dimension-card h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.size-dimensions {
  color: #172b38;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.size-dimension-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.size-usage {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* 7. Persian Care & Maintenance */
.persian-care-maintenance {
  background: var(--gradient-persian);
  position: relative;
  overflow: hidden;
}

.care-content {
  color: white;
}

.care-tips {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.tip-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

.tip-item i {
  color: var(--secondary-gold);
  font-size: 1.5rem;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.tip-item h6 {
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.tip-item p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 0.9rem;
}

/* 8. Persian Investment Value */
.persian-investment-value {
  background: var(--gradient-gold);
  position: relative;
  overflow: hidden;
}

.investment-value-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.investment-value-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.investment-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  transition: all var(--transition-normal);
}

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

.investment-value-card h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.investment-value-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.investment-metric {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
}

/* 9. Persian Stories & History */
.persian-stories-history {
  background: var(--gradient-dark);
  position: relative;
  overflow: hidden;
}

.story-history-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.story-history-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.story-image {
  height: 250px;
  overflow: hidden;
}

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

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

.story-content {
  padding: 2rem;
}

.story-content h5 {
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-weight: 600;
}

.story-text {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.story-details {
  display: flex;
  gap: 1rem;
}

.story-year,
.story-origin {
  background: #172b38;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 10. Persian Master Weavers */
.persian-master-weavers {
  background: var(--gradient-persian);
  position: relative;
  overflow: hidden;
}

.master-weaver-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  height: 100%;
}

.master-weaver-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
}

.master-image {
  height: 250px;
  overflow: hidden;
}

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

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

.master-info {
  padding: 2rem;
}

.master-info h5 {
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.master-title {
  color: #172b38;
  font-weight: 600;
  margin-bottom: 1rem;
  font-style: italic;
}

.master-description {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.master-achievements {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.achievement {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Floating Animation */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Responsive Design for Persian Rug Sections */
@media (max-width: 768px) {
  .dye-sources,
  .weaving-steps,
  .care-tips {
    gap: 1rem;
  }
  
  .dye-item,
  .step-item,
  .tip-item {
    padding: 1rem;
    gap: 1rem;
  }
  
  .pattern-preview,
  .region-image,
  .story-image,
  .master-image {
    height: 200px;
  }
  
  .pattern-info,
  .region-content,
  .story-content,
  .master-info {
    padding: 1rem;
  }
  
  .symbol-meaning-card,
  .size-dimension-card,
  .investment-value-card {
    padding: 1.5rem;
  }
  
  .dye-color {
    width: 50px;
    height: 50px;
  }
  
  .step-number {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .investment-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .dye-item,
  .step-item,
  .tip-item {
    flex-direction: column;
    text-align: center;
  }
  
  .pattern-preview,
  .region-image,
  .story-image,
  .master-image {
    height: 150px;
  }
  
  .pattern-info,
  .region-content,
  .story-content,
  .master-info {
    padding: 0.75rem;
  }
  
  .symbol-meaning-card,
  .size-dimension-card,
  .investment-value-card {
    padding: 1rem;
  }
  
  .dye-color {
    width: 40px;
    height: 40px;
  }
  
  .step-number {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .investment-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .story-details {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ========================================
   BACKGROUND VIDEO SECTION
   ======================================== */

/* Background Video Section */
.background-video-section {
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.background-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

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

.video-overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 2;
}

.video-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 2rem 0;
}

.video-content-overlay .section-subtitle {
  color: var(--secondary-gold);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.video-content-overlay .section-title {
  color: white;
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.video-content-overlay .section-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 3rem;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Video Features Grid */
.video-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-card {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-10px);
}

.feature-card i {
  color: var(--secondary-gold);
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}

.feature-card h6 {
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin: 0;
}

/* Video CTA Buttons */
.video-cta {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.video-cta .btn {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: var(--border-radius-full);
  transition: all var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.video-cta .btn-primary {
  background: #172b38;
  border: 2px solid #1a2b40;
  color: white;
}

.video-cta .btn-primary:hover {
  background: transparent;
  color: #172b38;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 102, 255, 0.3);
}

.video-cta .btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: white;
  background: transparent;
}

.video-cta .btn-outline-light:hover {
  background: white;
  color: var(--dark-grey);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .background-video-section {
    height: 80vh;
    min-height: 500px;
  }
  
  .video-content-overlay .section-title {
    font-size: 2.5rem;
  }
  
  .video-content-overlay .section-description {
    font-size: 1.1rem;
  }
  
  .video-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .feature-card {
    padding: 1.5rem 1rem;
  }
  
  .feature-card i {
    font-size: 2.5rem;
  }
  
  .video-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .video-cta .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  .background-video-section {
    height: 70vh;
    min-height: 400px;
  }
  
  .video-content-overlay {
    padding: 1rem 0;
  }
  
  .video-content-overlay .section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
  
  .video-content-overlay .section-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  
  .video-features-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .feature-card {
    padding: 1rem;
  }
  
  .feature-card i {
    font-size: 2rem;
  }
  
  .feature-card h6 {
    font-size: 1rem;
  }
  
  .feature-card p {
    font-size: 0.8rem;
  }
  
  .video-cta .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

/* Mobile Video Optimization */
@media (max-width: 480px) {
  .background-video {
    /* Ensure video covers properly on very small screens */
    min-width: 120%;
    min-height: 120%;
  }
  
  .video-content-overlay .section-title {
    font-size: 1.8rem;
  }
  
  .video-content-overlay .section-subtitle {
    font-size: 0.9rem;
  }
}

/* ========================================
   INNOVATIVE BLOG SECTIONS
   ======================================== */

/* Blog Section 1: Magazine Style */
.blog-magazine-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  overflow: hidden;
}

.magazine-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  z-index: 1;
}

.magazine-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 2;
}

.magazine-cover {
  position: relative;
  transform: rotate(-2deg);
  transition: all var(--transition-normal);
}

.magazine-cover:hover {
  transform: rotate(0deg) scale(1.02);
}

.cover-image {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  height: 500px;
}

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

.magazine-cover:hover .cover-image img {
  transform: scale(1.05);
}

.cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2rem;
  color: white;
}

.cover-badge {
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 1rem;
}

.cover-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.cover-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.magazine-articles {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.featured-article {
  display: flex;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-normal);
}

.featured-article:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
}

.article-image {
  position: relative;
  width: 200px;
  height: 150px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

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

.featured-article:hover .article-image img {
  transform: scale(1.05);
}

.article-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: #172b38;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--border-radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.article-content {
  flex-grow: 1;
}

.article-content h4 {
  color: white;
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.article-content p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.article-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.article-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.article-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.article-thumb {
  position: relative;
  height: 100px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-normal);
}

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

.article-category {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--secondary-gold);
  color: var(--dark-grey);
  padding: 0.2rem 0.6rem;
  border-radius: var(--border-radius-full);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.article-item h5 {
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.article-item p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

/* Blog Section 2: Timeline Style */
.blog-timeline-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
}

.timeline-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #1a2b40, var(--secondary-gold));
  transform: translateX(-50%);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 4rem;
  width: 100%;
}

.timeline-item.left .timeline-content {
  flex-direction: row;
  margin-right: 50%;
  padding-right: 3rem;
}

.timeline-item.right .timeline-content {
  flex-direction: row-reverse;
  margin-left: 50%;
  padding-left: 3rem;
}

.timeline-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: white;
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  position: relative;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 15px solid transparent;
}

.timeline-item.left .timeline-content::before {
  right: -30px;
  border-left-color: white;
}

.timeline-item.right .timeline-content::before {
  left: -30px;
  border-right-color: white;
}

.timeline-image {
  width: 200px;
  height: 150px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

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

.timeline-content:hover .timeline-image img {
  transform: scale(1.05);
}

.timeline-text {
  flex-grow: 1;
}

.timeline-year {
  display: inline-block;
  background: #172b38;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.timeline-text h4 {
  color: var(--dark-grey);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.timeline-text p {
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.timeline-link {
  color: #172b38;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-normal);
}

.timeline-link:hover {
  color: var(--secondary-gold);
  transform: translateX(5px);
}

.timeline-link::after {
  content: '→';
  transition: transform var(--transition-normal);
}

.timeline-link:hover::after {
  transform: translateX(3px);
}

/* Timeline Dot */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  background: var(--secondary-gold);
  border: 4px solid white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .magazine-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .magazine-cover {
    transform: rotate(0deg);
  }
  
  .cover-image {
    height: 400px;
  }
  
  .cover-title {
    font-size: 2rem;
  }
  
  .featured-article {
    flex-direction: column;
  }
  
  .article-image {
    width: 100%;
    height: 200px;
  }
  
  .article-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-line {
    left: 2rem;
  }
  
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    margin-left: 3rem;
    margin-right: 0;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .timeline-content::before {
    left: -15px;
    right: auto;
    border-right-color: white;
    border-left-color: transparent;
  }
  
  .timeline-item::before {
    left: 2rem;
  }
  
  .timeline-content {
    flex-direction: column;
    text-align: center;
  }
  
  .timeline-image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 576px) {
  .cover-image {
    height: 300px;
  }
  
  .cover-title {
    font-size: 1.5rem;
  }
  
  .cover-subtitle {
    font-size: 1rem;
  }
  
  .featured-article {
    padding: 1rem;
  }
  
  .article-content h4 {
    font-size: 1.1rem;
  }
  
  .timeline-item.left .timeline-content,
  .timeline-item.right .timeline-content {
    margin-left: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .timeline-line {
    left: 1rem;
  }
  
  .timeline-item::before {
    left: 1rem;
  }
  
  .timeline-text h4 {
    font-size: 1.2rem;
  }
  
  .timeline-text p {
    font-size: 0.9rem;
  }
}

.section-subtitle {
  color: #172b38;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
    margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
}

.section-title {
  color: var(--dark-grey);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
}

.section-description {
  color: var(--text-grey);
    font-size: 1.1rem;
  line-height: 1.7;
    margin-bottom: 2rem;
  font-weight: 400;
}

.learn-more-btn {
  background: var(--light-grey);
  color: var(--dark-grey);
  border: 1px solid var(--border-grey);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 25px;
  transition: all 0.3s ease;
  font-family: 'Roboto', sans-serif;
}

.learn-more-btn:hover {
  background: #172b38;
  color: var(--white);
  border-color: #172b38;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 43, 56, 0.2);
}

.family-business-images {
  position: relative;
  height: 500px;
}

.image-stack {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.top-image {
  flex: 1;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

.bottom-image {
  flex: 1.2;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

.top-image img,
.bottom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.top-image:hover img,
.bottom-image:hover img {
  transform: scale(1.05);
}

/* ========================================
   PRODUCT CATEGORIES SECTION
   ======================================== */

.product-categories-section {
  background: linear-gradient(135deg, var(--light-grey) 0%, rgba(230, 242, 255, 0.3) 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.product-categories-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23E6F2FF" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23E6F2FF" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23E6F2FF" opacity="0.05"/><circle cx="10" cy="50" r="0.5" fill="%23E6F2FF" opacity="0.05"/><circle cx="90" cy="30" r="0.5" fill="%23E6F2FF" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
}

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

.categories-header {
  position: relative;
  z-index: 2;
}

/* DESIGN 1: Ultra Minimal */
.design-1-ultra-minimal {
  text-align: center;
  margin: 4rem 0;
  padding: 0;
}

.ultra-title {
  font-size: 3.5rem;
  font-weight: 300;
  margin: 0 0 0.5rem 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  line-height: 1;
}

.ultra-subtitle {
  font-size: 0.9rem;
  font-weight: 300;
  color: #999;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
}

/* DESIGN 2: Persian Medallion */
.design-2-persian-medallion {
  text-align: center;
  margin: 4rem 0;
  padding: 2rem;
  background: linear-gradient(135deg, #F5F5DC 0%, #F0E68C 100%);
  border-radius: 20px;
  border: 3px solid #172b38;
}

.medallion-frame {
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
}

.medallion-logo {
  width: 60px;
  height: 60px;
  filter: brightness(0) invert(1);
}

.medallion-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  font-family: 'Roboto', sans-serif;
  color: #172b38;
  text-transform: uppercase;
}

.medallion-divider {
  width: 80px;
  height: 3px;
  background: #172b38;
  margin: 0 auto 1rem;
  border-radius: 2px;
}

.medallion-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: #172b38;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* DESIGN 3: Logo Cluster */
.design-3-logo-cluster {
  text-align: center;
  margin: 4rem 0;
  padding: 0;
  position: relative;
}

.logo-cluster {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
}

.logo-large {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  z-index: 3;
}

.logo-medium {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  opacity: 0.7;
  z-index: 2;
}

.logo-small-1 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
  z-index: 1;
}

.logo-small-2 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
  z-index: 1;
}

.logo-small-3 {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
  z-index: 1;
}

.logo-small-4 {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.4;
  z-index: 1;
}

.cluster-title {
  font-size: 2.8rem;
  font-weight: 400;
  margin: 0 0 0.5rem 0;
  font-family: 'Roboto', sans-serif;
  color: #2C2C2C;
  text-transform: uppercase;
}

.cluster-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* DESIGN 4: Diagonal Layout */
.design-4-diagonal {
  margin: 4rem 0;
  padding: 0;
}

.diagonal-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  transform: rotate(-2deg);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.diagonal-logo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.diagonal-text {
  flex: 1;
}

.diagonal-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  font-family: 'Roboto', sans-serif;
  color: #2C2C2C;
  text-transform: uppercase;
}

.diagonal-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* DESIGN 5: Luxury Gold */
.design-5-luxury-gold {
  text-align: center;
  margin: 4rem 0;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.luxury-frame {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 40px rgba(184, 134, 11, 0.4);
  border: 4px solid #fff;
}

.luxury-logo {
  width: 70px;
  height: 70px;
  filter: brightness(0) invert(1);
}

.luxury-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  font-family: 'Roboto', sans-serif;
  color: #B8860B;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.luxury-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #B8860B;
  margin: 0 0 1.5rem 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.luxury-accent {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #B8860B 0%, #DAA520 50%, #B8860B 100%);
  margin: 0 auto;
  border-radius: 2px;
}

/* Clean Rug Business Design - No Floating Logos */

/* Responsive Design for Rug Store Header */
@media (max-width: 768px) {
  .Rug-header {
    margin: 2.5rem 0;
    padding: 2rem 1.5rem;
  }
  
  .header-content {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .Rug-text-section {
    text-align: center;
  }
  
  .Rug-logo-frame {
    width: 100px;
    height: 100px;
  }
  
  .Rug-logo {
    width: 60px;
    height: 60px;
  }
  
  .Rug-title {
    font-size: 2.8rem;
    letter-spacing: 0.15em;
  }
  
  .Rug-subtitle {
    font-size: 1rem;
    letter-spacing: 0.25em;
  }
  
  .Rug-pattern-line {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .Rug-header {
    padding: 1.5rem 1rem;
  }
  
  .Rug-logo-frame {
    width: 80px;
    height: 80px;
  }
  
  .Rug-logo {
    width: 50px;
    height: 50px;
  }
  
  .Rug-title {
    font-size: 2.2rem;
    letter-spacing: 0.1em;
  }
  
  .Rug-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
  }
  
  .Rug-badge {
    padding: 8px 18px;
    font-size: 0.75rem;
  }
}

.center-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(139, 69, 19, 0.3);
  border-radius: 50%;
  animation: pulseExpand 4s ease-in-out infinite;
}

.pulse-ring.ring-2 {
  animation-delay: 1.3s;
  border-color: rgba(160, 82, 45, 0.2);
}

.pulse-ring.ring-3 {
  animation-delay: 2.6s;
  border-color: rgba(139, 69, 19, 0.1);
}

.main-content {
  position: relative;
  z-index: 5;
  padding: 40px 60px;
  transition: all 0.3s ease;
  max-width: 500px;
  margin: 0 auto;
}

.modern-title {
  font-size: 5rem;
  font-weight: 700;
  margin: 0 0 25px 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(135deg, 
    #1a1a1a 0%, 
    #2c2c2c 25%, 
    #172b38 60%, 
    #172b38 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  line-height: 0.95;
  position: relative;
}

.modern-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #172b38 20%, 
    #172b38 50%, 
    #172b38 80%, 
    transparent 100%);
  border-radius: 1px;
}

.modern-subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  color: #172b38;
  margin: 0 0 40px 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  opacity: 0.85;
  position: relative;
}

.modern-subtitle::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #172b38 50%, 
    transparent 100%);
}

.year-badge {
  display: inline-block;
  background: #172b38;
  color: white;
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-family: 'Roboto', sans-serif;
  box-shadow: 
    0 4px 15px rgba(139, 69, 19, 0.3),
    0 2px 6px rgba(139, 69, 19, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
    display: block;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.year-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
    width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  transition: left 0.6s ease;
}

.year-badge:hover {
  background: linear-gradient(135deg, 
    #172b38 0%, 
    #172b38 50%, 
    #172b38 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(139, 69, 19, 0.4),
    0 3px 8px rgba(139, 69, 19, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.year-badge:hover::before {
  left: 100%;
}

@keyframes floatAroundBig {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: var(--opacity);
  }
  10% { 
    transform: translate(60px, -30px) rotate(36deg) scale(1.2);
    opacity: calc(var(--opacity) * 1.2);
  }
  20% { 
    transform: translate(40px, -60px) rotate(72deg) scale(0.8);
    opacity: calc(var(--opacity) * 0.8);
  }
  30% { 
    transform: translate(-20px, -50px) rotate(108deg) scale(1.1);
    opacity: calc(var(--opacity) * 1.1);
  }
  40% { 
    transform: translate(-60px, -20px) rotate(144deg) scale(0.9);
    opacity: calc(var(--opacity) * 0.9);
  }
  50% { 
    transform: translate(-50px, 20px) rotate(180deg) scale(1.15);
    opacity: calc(var(--opacity) * 1.15);
  }
  60% { 
    transform: translate(-30px, 50px) rotate(216deg) scale(0.85);
    opacity: calc(var(--opacity) * 0.85);
  }
  70% { 
    transform: translate(10px, 40px) rotate(252deg) scale(1.05);
    opacity: calc(var(--opacity) * 1.05);
  }
  80% { 
    transform: translate(50px, 10px) rotate(288deg) scale(0.95);
    opacity: calc(var(--opacity) * 0.95);
  }
  90% { 
    transform: translate(30px, -10px) rotate(324deg) scale(1.1);
    opacity: calc(var(--opacity) * 1.1);
  }
  100% { 
    transform: translate(0, 0) rotate(360deg) scale(1);
    opacity: var(--opacity);
  }
}

@keyframes floatAroundSmall {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: var(--opacity);
  }
  15% { 
    transform: translate(45px, -35px) rotate(54deg) scale(1.3);
    opacity: calc(var(--opacity) * 1.3);
  }
  30% { 
    transform: translate(25px, -55px) rotate(108deg) scale(0.7);
    opacity: calc(var(--opacity) * 0.7);
  }
  45% { 
    transform: translate(-35px, -40px) rotate(162deg) scale(1.2);
    opacity: calc(var(--opacity) * 1.2);
  }
  60% { 
    transform: translate(-55px, -10px) rotate(216deg) scale(0.8);
    opacity: calc(var(--opacity) * 0.8);
  }
  75% { 
    transform: translate(-40px, 30px) rotate(270deg) scale(1.1);
    opacity: calc(var(--opacity) * 1.1);
  }
  90% { 
    transform: translate(20px, 35px) rotate(324deg) scale(0.9);
    opacity: calc(var(--opacity) * 0.9);
  }
  100% { 
    transform: translate(0, 0) rotate(360deg) scale(1);
    opacity: var(--opacity);
  }
}

@keyframes floatAroundTiny {
  0% { 
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: var(--opacity);
  }
  20% { 
    transform: translate(35px, -20px) rotate(72deg) scale(1.4);
    opacity: calc(var(--opacity) * 1.4);
  }
  40% { 
    transform: translate(15px, -35px) rotate(144deg) scale(0.6);
    opacity: calc(var(--opacity) * 0.6);
  }
  60% { 
    transform: translate(-25px, -25px) rotate(216deg) scale(1.2);
    opacity: calc(var(--opacity) * 1.2);
  }
  80% { 
    transform: translate(-35px, 10px) rotate(288deg) scale(0.8);
    opacity: calc(var(--opacity) * 0.8);
  }
  100% { 
    transform: translate(0, 0) rotate(360deg) scale(1);
    opacity: var(--opacity);
  }
}

@keyframes pulseExpand {
  0% { 
    width: 200px;
    height: 200px;
    opacity: 1;
  }
  100% { 
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}

/* Clean Product Category Cards - No Background Logos */


.categories-title {
  color: var(--dark-grey);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
    margin-bottom: 1rem;
  position: relative;
  animation: titleFadeIn 1s ease-out;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title-underline {
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #1a2b40, rgba(26, 43, 64, 0.3));
  margin: 0 auto;
  border-radius: 2px;
  animation: underlineExpand 1.5s ease-out 0.5s both;
}

@keyframes underlineExpand {
  from {
    width: 0;
  }
  to {
    width: 100px;
  }
}

/* Modern Product Category Cards - Clean & Elegant */
.product-category-card {
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  background: var(--white);
  border: 1px solid rgba(139, 69, 19, 0.08);
}

.product-category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.02) 0%, rgba(160, 82, 45, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.product-category-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border-color: rgba(139, 69, 19, 0.2);
}

.product-category-card:hover::before {
  opacity: 1;
}

.category-image {
  position: relative;
  width: 100%;
  height: 70%;
  overflow: hidden;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-category-card:hover .category-image img {
  transform: scale(1.08);
}

.category-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 2rem;
  transition: all 0.5s ease;
}

.product-category-card:hover .category-overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.category-title {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 1rem;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-category-card:hover .category-title {
  opacity: 1;
  transform: translateY(0);
}

.catalog-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 2rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(20px);
}

.product-category-card:hover .catalog-btn {
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.catalog-btn:hover {
  background: var(--white);
  color: var(--dark-grey);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
  border-color: var(--white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
 
  .hero-caption h1 {
    font-size: 1.4rem;
    padding: 1rem 1.5rem;
    padding-left: 1.5rem;
    line-height: 1.1;
    letter-spacing: 0.1em;
    white-space: normal;
    text-align: center;
  }
  
  .hero-caption .lead {
    font-size: 0.8rem;
    margin-bottom: 0;
    padding: 0.75rem 1.5rem;
    letter-spacing: 0.06em;
    text-align: center;
  }
}

@media (max-width: 480px) {

  
  .hero-caption h1 {
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
    padding-left: 1rem;
    letter-spacing: 0.08em;
    white-space: normal;
    text-align: center;
  }
  
  .hero-caption .lead {
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    letter-spacing: 0.05em;
    text-align: center;
  }
  
  .brand-main {
    font-size: 1rem;
    letter-spacing: 0.15em;
  }
  
  .brand-line-1 {
    font-size: 17px
  }
  
  .brand-line-2 {
    font-size: 12.5px;
  }
}

.brand-wordmark{display:flex;flex-direction:column;line-height:1;font-family:'Roboto'}

/* ========================================
   NATURE-THEMED FOOTER WITH FLOWER & BUSH BACKGROUND
   ======================================== */

.footer-nature {
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 50%, #f0f8f0 100%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><pattern id="parchment" width="400" height="400" patternUnits="userSpaceOnUse"><rect width="400" height="400" fill="%23f5f1e8"/><path d="M0,50 Q100,30 200,60 Q300,40 400,55 L400,70 Q300,65 200,75 Q100,70 0,80 Z" fill="%238B4513" opacity="0.3"/><path d="M0,120 Q150,100 300,130 Q350,125 400,135 L400,150 Q350,145 300,150 Q150,140 0,160 Z" fill="%23A0522D" opacity="0.25"/><path d="M0,200 Q80,180 160,210 Q240,190 320,220 Q360,215 400,225 L400,240 Q360,235 320,240 Q240,220 160,240 Q80,220 0,250 Z" fill="%238B4513" opacity="0.2"/><path d="M0,300 Q120,280 240,310 Q320,295 400,305 L400,320 Q320,315 240,330 Q120,300 0,330 Z" fill="%23A0522D" opacity="0.3"/><circle cx="50" cy="100" r="2" fill="%238B4513" opacity="0.4"/><circle cx="150" cy="180" r="1.5" fill="%23A0522D" opacity="0.5"/><circle cx="250" cy="120" r="1" fill="%238B4513" opacity="0.6"/><circle cx="350" cy="200" r="2.5" fill="%23A0522D" opacity="0.3"/><circle cx="100" cy="280" r="1.8" fill="%238B4513" opacity="0.4"/><circle cx="300" cy="350" r="1.2" fill="%23A0522D" opacity="0.5"/></pattern></defs><rect width="400" height="400" fill="url(%23parchment)"/></svg>');
  background-size: 400px 400px;
  background-repeat: repeat;
  color: #FFFFFF;
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
}

/* Flower & Bush Pattern Background */
.footer-nature-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/flower-bush-pattern.svg');
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.08;
  z-index: 1;
}

.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(245, 241, 232, 0.7) 0%, 
    rgba(240, 235, 220, 0.5) 50%, 
    rgba(245, 241, 232, 0.7) 100%);
  z-index: 2;
}

/* Main Footer Content */
.footer-main {
  position: relative;
  z-index: 3;
}

/* Brand Section Nature Theme */
.footer-brand-nature {
  text-align: left;
}

.brand-container-nature {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.logo-nature-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-nature {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 4px 8px rgba(45, 80, 22, 0.2));
  transition: all 0.3s ease;
}

.footer-logo-nature:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 12px rgba(45, 80, 22, 0.3));
}

.nature-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.logo-nature-wrapper:hover .nature-glow {
  opacity: 1;
  animation: naturePulse 2s ease-in-out infinite;
}

@keyframes naturePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.4; }
}

.brand-text-nature {
  flex: 1;
}

.brand-name-nature {
  font-size: 2.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  text-shadow: 0 2px 4px rgba(45, 80, 22, 0.1);
  font-family: 'Roboto', sans-serif;
}

.brand-tagline-nature {
  font-size: 1.1rem;
  color: #FFFFFF;
  font-style: italic;
  margin: 0.5rem 0 0 0;
  font-weight: 500;
}

.footer-description-nature {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #3d6b1f;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

/* Nature-themed Stats */
.footer-stats-nature {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.stat-item-nature {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.7);
  padding: 1.5rem 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(45, 80, 22, 0.1);
  border: 1px solid rgba(74, 124, 40, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.stat-item-nature:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(45, 80, 22, 0.15);
  background: rgba(255, 255, 255, 0.9);
}

.stat-icon {
  font-size: 2rem;
  animation: float 3s ease-in-out infinite;
}

.stat-item-nature:nth-child(2) .stat-icon {
  animation-delay: 0.5s;
}

.stat-item-nature:nth-child(3) .stat-icon {
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.stat-content {
  text-align: left;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: #FFFFFF;
  margin: 0.25rem 0 0 0;
  font-weight: 500;
}

/* Social Media Nature Theme */
.footer-social-nature {
  margin-bottom: 2rem;
}

.social-title-nature {
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  text-align: left;
}

.social-links-nature {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-link-nature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid rgba(74, 124, 40, 0.2);
  backdrop-filter: blur(10px);
}

.social-link-nature:hover {
  transform: translateY(-3px) scale(1.1);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(45, 80, 22, 0.2);
  color: #FFFFFF;
}

.social-link-nature.instagram:hover {
  background: linear-gradient(45deg, #ff6b9d, #ff8fab);
  color: white;
}

.social-link-nature.facebook:hover {
  background: #1877f2;
  color: white;
}

.social-link-nature.pinterest:hover {
  background: #e60023;
  color: white;
}

.social-link-nature.youtube:hover {
  background: #ff0000;
  color: white;
}

.social-tooltip {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(45, 80, 22, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
}

.social-link-nature:hover .social-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Navigation Sections Nature Theme */
.footer-section-nature {
  background: rgba(255, 255, 255, 0.6);
  padding: 2rem 1.5rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(45, 80, 22, 0.08);
  border: 1px solid rgba(74, 124, 40, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  height: 100%;
}

.footer-section-nature:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(45, 80, 22, 0.12);
  background: rgba(255, 255, 255, 0.8);
}

.section-header-nature {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.1), rgba(255, 237, 78, 0.1));
  border-radius: 50%;
  border: 2px solid rgba(74, 124, 40, 0.2);
}

.section-icon-nature {
  font-size: 1.5rem;
  color: #FFFFFF;
  z-index: 2;
}

.icon-decoration {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 1.2rem;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.footer-title-nature {
  font-size: 1.3rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.footer-links-nature {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-nature li {
  margin-bottom: 0.75rem;
}

.link-item-nature {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 1.5rem;
  display: block;
}

.link-item-nature::before {
  content: '🌿';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.link-item-nature:hover {
  color: #fff;
  padding-left: 2rem;
  font-weight: 500;
}

.link-item-nature:hover::before {
  content: '🌸';
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}

/* Footer Bottom Nature Theme */
.footer-bottom-nature {
  border-top: 2px solid rgba(74, 124, 40, 0.2);
  position: relative;
  z-index: 3;
}

.footer-bottom-content-nature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright-section-nature {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.copyright-nature {
  color: #FFFFFF;
  font-size: 0.95rem;
  margin: 0;
  font-weight: 500;
}

.nature-decoration {
  font-size: 1.2rem;
  animation: natureFloat 4s ease-in-out infinite;
}

@keyframes natureFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(1deg); }
  50% { transform: translateY(0px) rotate(0deg); }
  75% { transform: translateY(2px) rotate(-1deg); }
}

.footer-links-nature {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-link-nature {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
  font-weight: 500;
}

.footer-link-nature::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6b9d, #ffd93d);
  transition: width 0.3s ease;
}

.footer-link-nature:hover {
  color: #FFFFFF;
}

.footer-link-nature:hover::after {
  width: 100%;
}

/* Responsive Design for Nature Footer */
@media (max-width: 768px) {
  .footer-nature {
    padding: 3rem 0 1.5rem;
  }
  
  .brand-container-nature {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .footer-description-nature {
    text-align: center;
    max-width: 100%;
  }
  
  .footer-stats-nature {
    justify-content: center;
    gap: 1rem;
  }
  
  .stat-item-nature {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  
  .footer-social-nature {
    text-align: center;
  }
  
  .social-links-nature {
    justify-content: center;
  }
  
  .footer-section-nature {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .section-header-nature {
    justify-content: center;
  }
  
  .footer-bottom-content-nature {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .copyright-section-nature {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .footer-links-nature {
    justify-content: center;
    gap: 1.5rem;
  }
}

@media (max-width: 576px) {
  .footer-nature {
    padding: 2rem 0 1rem;
  }
  
  .brand-name-nature {
    font-size: 2rem;
  }
  
  .footer-description-nature {
    font-size: 1rem;
  }
  
  .footer-stats-nature {
    flex-direction: column;
    gap: 1rem;
  }
  
  .stat-item-nature {
    flex-direction: row;
    text-align: left;
  }
  
  .social-link-nature {
    width: 45px;
    height: 45px;
  }
  
  .footer-section-nature {
    padding: 1.5rem 1rem;
  }
  
  .section-icon-wrapper {
    width: 40px;
    height: 40px;
  }
  
  .section-icon-nature {
    font-size: 1.2rem;
  }
  
  .footer-title-nature {
    font-size: 1.1rem;
  }
  
  .link-item-nature {
    font-size: 0.9rem;
  }
  
  .footer-links-nature {
    gap: 1rem;
  }
  
  .footer-link-nature {
    font-size: 0.9rem;
  }
}

/* ========================================
   ELEGANT RUG CATEGORIES SHOWCASE
   ======================================== */

.elegant-categories-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.elegant-categories-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23000" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23000" opacity="0.02"/><circle cx="50" cy="10" r="0.5" fill="%23000" opacity="0.03"/><circle cx="10" cy="60" r="0.5" fill="%23000" opacity="0.03"/><circle cx="90" cy="40" r="0.5" fill="%23000" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
  z-index: 1;
}

.elegant-categories-section .container {
  position: relative;
  z-index: 2;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 400;
}

/* Elegant Categories Grid */
.elegant-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

/* Common Styles */
.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.category-type {
  display: inline-block;
  background: #172b38;
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* 1. Round Rugs - Hero Style */
.category-hero {
  grid-column: span 2;
  grid-row: span 2;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-hero:hover {
  transform: scale(1.02);
}

.hero-content {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero-image {
  position: relative;
  height: 100%;
  min-height: 400px;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 2rem;
  transform: translateY(100%);
  transition: all 0.4s ease;
}

.category-hero:hover .image-overlay {
  transform: translateY(0);
}

.overlay-content h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.overlay-content p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* 2. Classic Rugs - Split Style */
.category-split {
  grid-column: span 1;
  grid-row: span 2;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-split:hover {
  transform: translateY(-5px);
}

.split-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.split-text {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.split-text h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.split-text p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.split-image {
  height: 200px;
  overflow: hidden;
}

/* 3. Digital Design - Card Style */
.category-card-elegant {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-card-elegant:hover {
  transform: translateY(-8px);
}

.card-image {
  position: relative;
  height: 250px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.9), rgba(0, 51, 153, 0.95));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: all 0.4s ease;
}

.category-card-elegant:hover .card-overlay {
  opacity: 1;
}

.card-overlay h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.card-overlay p {
  font-size: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* 4. Handmade Rugs - Minimalist Style */
.category-minimal {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-minimal:hover {
  transform: scale(1.05);
}

.minimal-content {
  display: flex;
  height: 100%;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.minimal-image {
  flex: 1;
  height: 250px;
  overflow: hidden;
}

.minimal-text {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f8f9fa;
}

.minimal-text h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.minimal-text p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* 5. Machine Made - Gallery Style */
.category-gallery {
  grid-column: span 2;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-gallery:hover {
  transform: translateY(-5px);
}

.gallery-header {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-header h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.gallery-header p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.gallery-images {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.gallery-main {
  flex: 2;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery-thumbs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gallery-thumb {
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.gallery-thumb:hover {
  transform: scale(1.05);
}

/* 6. Pictorial Rugs - Artistic Style */
.category-artistic {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-artistic:hover {
  transform: rotate(2deg) scale(1.05);
}

.artistic-content {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.artistic-image {
  position: relative;
  height: 250px;
}

.artistic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 102, 255, 0.8), rgba(255, 0, 150, 0.8));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: all 0.4s ease;
}

.category-artistic:hover .artistic-overlay {
  opacity: 1;
}

.overlay-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.overlay-text p {
  font-size: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Animations */
.category-hero { animation: fadeInLeft 0.8s ease-out; }
.category-split { animation: fadeInRight 1s ease-out; }
.category-card-elegant { animation: fadeInUp 1.2s ease-out; }
.category-minimal { animation: fadeInLeft 1.4s ease-out; }
.category-gallery { animation: fadeInRight 1.6s ease-out; }
.category-artistic { animation: fadeInUp 1.8s ease-out; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .elegant-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .category-hero {
    grid-column: span 2;
    grid-row: span 1;
  }
  
  .category-split {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .category-gallery {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.2rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
  }
  
  .elegant-categories-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .category-hero,
  .category-split,
  .category-gallery {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .hero-image {
    min-height: 300px;
  }
  
  .overlay-content h3 {
    font-size: 2rem;
  }
  
  .split-content {
    flex-direction: column;
  }
  
  .split-image {
    height: 150px;
  }
  
  .minimal-content {
    flex-direction: column;
  }
  
  .minimal-image {
    height: 150px;
  }
  
  .gallery-images {
    flex-direction: column;
  }
  
  .gallery-main {
    height: 120px;
  }
  
  .gallery-thumbs {
    flex-direction: row;
  }
  
  .gallery-thumb {
    height: 50px;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 1.8rem;
  }
  
  .overlay-content h3 {
    font-size: 1.5rem;
  }
  
  .overlay-content p {
    font-size: 1rem;
  }
  
  .split-text h3 {
    font-size: 1.5rem;
  }
  
  .card-overlay h3 {
    font-size: 1.5rem;
  }
  
  .minimal-text h3 {
    font-size: 1.3rem;
  }
  
  .gallery-header h3 {
    font-size: 1.5rem;
  }
  
  .overlay-text h3 {
    font-size: 1.5rem;
  }
}

/* ========================================
   CREATIVE RUG CATEGORIES - 10 FRESH IDEAS
   ======================================== */

.creative-categories-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
  position: relative;
  overflow: hidden;
}

.creative-categories-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="paper" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="20" height="20" fill="%23ffffff" opacity="0.1"/><path d="M0,20 L20,0 M20,20 L0,0" stroke="%23000" stroke-width="0.5" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23paper)"/></svg>');
  pointer-events: none;
  z-index: 1;
}

.creative-categories-section .container {
  position: relative;
  z-index: 2;
}

.creative-categories-section .section-title {
  color: var(--dark-grey);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.creative-categories-section .section-subtitle {
  color: var(--text-muted);
}

.creative-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

/* 1. Story Rugs - Book Style */
.category-story {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-story:hover {
  transform: scale(1.05) rotateY(5deg);
}

.story-book {
  position: relative;
  height: 300px;
  background: #172b38;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  perspective: 1000px;
}

.book-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #172b38, #172b38);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.book-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #f4f4f4;
  padding: 1rem;
  text-align: center;
}

.book-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.book-title p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.story-badge {
  display: inline-block;
  background: #f4f4f4;
  color: #172b38;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

.book-pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.page {
  position: absolute;
  background: #f9f9f9;
  border: 1px solid #ddd;
  animation: pageFlip 3s ease-in-out infinite;
}

.page-1 {
  top: 10px;
  left: 10px;
  right: 10px;
  height: 180px;
  animation-delay: 0s;
}

.page-2 {
  top: 15px;
  left: 15px;
  right: 15px;
  height: 170px;
  animation-delay: 1s;
}

.page-3 {
  top: 20px;
  left: 20px;
  right: 20px;
  height: 160px;
  animation-delay: 2s;
}

@keyframes pageFlip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(-5deg); }
}

/* 2. Music Rugs - Vinyl Style */
.category-music {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-music:hover {
  transform: scale(1.05) rotate(360deg);
}

.vinyl-record {
  position: relative;
  height: 300px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  animation: recordSpin 10s linear infinite;
}

.record-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #333;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

.record-grooves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.groove {
  position: absolute;
  border: 1px solid #333;
  border-radius: 50%;
  animation: groovePulse 2s ease-in-out infinite;
}

.groove-1 {
  top: 20%;
  left: 20%;
  right: 20%;
  bottom: 20%;
  animation-delay: 0s;
}

.groove-2 {
  top: 30%;
  left: 30%;
  right: 30%;
  bottom: 30%;
  animation-delay: 0.5s;
}

.groove-3 {
  top: 40%;
  left: 40%;
  right: 40%;
  bottom: 40%;
  animation-delay: 1s;
}

.groove-4 {
  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 50%;
  animation-delay: 1.5s;
}

.music-info {
  position: absolute;
  bottom: -50px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
  border-radius: 10px;
}

.music-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.music-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.music-badge {
  display: inline-block;
  background: #ffffff;
  color: #000;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

@keyframes recordSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes groovePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 3. Recipe Rugs - Cookbook Style */
.category-recipe {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-recipe:hover {
  transform: scale(1.05);
}

.cookbook {
  position: relative;
  height: 300px;
  background: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.recipe-header {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: white;
  padding: 1rem;
  text-align: center;
}

.recipe-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.recipe-header p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.recipe-badge {
  display: inline-block;
  background: white;
  color: #ff6b6b;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

.ingredients-list {
  padding: 1rem;
  background: white;
}

.ingredient {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  border-radius: 5px;
  font-size: 0.9rem;
  color: var(--dark-grey);
}

.recipe-image {
  height: 100px;
  overflow: hidden;
}

/* 4. Map Rugs - Atlas Style */
.category-map {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-map:hover {
  transform: scale(1.05);
}

.atlas-book {
  position: relative;
  height: 300px;
  background: #2c3e50;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.map-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #34495e, #2c3e50);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.compass {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: #ecf0f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-needle {
  width: 20px;
  height: 2px;
  background: #e74c3c;
  transform: rotate(45deg);
  animation: compassSpin 4s linear infinite;
}

.map-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #ecf0f1;
  padding: 1rem;
  text-align: center;
}

.map-legend h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.map-legend p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #bdc3c7;
}

.map-badge {
  display: inline-block;
  background: #ecf0f1;
  color: #2c3e50;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

@keyframes compassSpin {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}

/* 5. Calendar Rugs - Planner Style */
.category-calendar {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-calendar:hover {
  transform: scale(1.05);
}

.planner {
  position: relative;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.calendar-header {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 1rem;
  text-align: center;
}

.calendar-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.calendar-header p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.calendar-badge {
  display: inline-block;
  background: white;
  color: #3498db;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  background: #f8f9fa;
}

.month {
  background: white;
  padding: 0.5rem;
  text-align: center;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark-grey);
  border: 1px solid #e9ecef;
}

.calendar-image {
  height: 100px;
  overflow: hidden;
}

/* 6. Diary Rugs - Journal Style */
.category-diary {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-diary:hover {
  transform: scale(1.05);
}

.journal {
  position: relative;
  height: 300px;
  background: #172b38;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.diary-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #172b38, #172b38);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.diary-lock {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: #f4f4f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-shackle {
  width: 15px;
  height: 15px;
  border: 2px solid #172b38;
  border-radius: 50%;
  border-top: none;
}

.diary-pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.page-line {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #f9f9f9;
  opacity: 0.5;
}

.page-line:nth-child(1) { top: 30px; }
.page-line:nth-child(2) { top: 50px; }
.page-line:nth-child(3) { top: 70px; }
.page-line:nth-child(4) { top: 90px; }

.diary-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #f4f4f4;
  padding: 1rem;
  text-align: center;
}

.diary-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.diary-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.diary-badge {
  display: inline-block;
  background: #f4f4f4;
  color: #172b38;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* 7. Recipe Card Rugs - Index Style */
.category-recipe-card {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-recipe-card:hover {
  transform: scale(1.05);
}

.recipe-card {
  position: relative;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(135deg, #e67e22, #f39c12);
  color: white;
  padding: 1rem;
  text-align: center;
}

.card-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.card-header p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.card-badge {
  display: inline-block;
  background: white;
  color: #e67e22;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

.card-image {
  height: 120px;
  overflow: hidden;
}

.card-instructions {
  padding: 1rem;
  background: #f8f9fa;
}

.step {
  padding: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--dark-grey);
  border-bottom: 1px solid #e9ecef;
}

.step:last-child {
  border-bottom: none;
}

/* 8. Photo Album Rugs - Memory Style */
.category-photo-album {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-photo-album:hover {
  transform: scale(1.05);
}

.photo-album {
  position: relative;
  height: 300px;
  background: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.album-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.album-corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ecf0f1;
  border-radius: 50%;
}

.corner-1 { top: 10px; left: 10px; }
.corner-2 { top: 10px; right: 10px; }
.corner-3 { bottom: 10px; left: 10px; }
.corner-4 { bottom: 10px; right: 10px; }

.album-pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.photo-slot {
  position: absolute;
  background: white;
  border: 2px solid #bdc3c7;
  border-radius: 5px;
}

.photo-slot:nth-child(1) {
  top: 20px;
  left: 20px;
  width: 60px;
  height: 40px;
}

.photo-slot:nth-child(2) {
  top: 20px;
  right: 20px;
  width: 60px;
  height: 40px;
}

.photo-slot:nth-child(3) {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
}

.album-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #ecf0f1;
  padding: 1rem;
  text-align: center;
}

.album-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.album-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #bdc3c7;
}

.album-badge {
  display: inline-block;
  background: #ecf0f1;
  color: #7f8c8d;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* 9. Notebook Rugs - Study Style */
.category-notebook {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-notebook:hover {
  transform: scale(1.05);
}

.notebook {
  position: relative;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.notebook-spiral {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.spiral-ring {
  width: 8px;
  height: 8px;
  background: #bdc3c7;
  border-radius: 50%;
  margin-bottom: 5px;
}

.notebook-pages {
  position: relative;
  margin-left: 20px;
  height: 100%;
}

.page {
  position: absolute;
  background: #f9f9f9;
  border: 1px solid #e9ecef;
  border-radius: 0 5px 5px 0;
}

.page-1 {
  top: 10px;
  left: 0;
  right: 10px;
  height: 200px;
  z-index: 3;
}

.page-2 {
  top: 15px;
  left: 5px;
  right: 15px;
  height: 190px;
  z-index: 2;
}

.page-3 {
  top: 20px;
  left: 10px;
  right: 20px;
  height: 180px;
  z-index: 1;
}

.notebook-info {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
}

.notebook-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.notebook-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.notebook-badge {
  display: inline-block;
  background: #ffffff;
  color: #000;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* 10. Magazine Rugs - Editorial Style */
.category-magazine {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-magazine:hover {
  transform: scale(1.05);
}

.magazine {
  position: relative;
  height: 300px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.magazine-cover {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.magazine-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
}

.magazine-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.magazine-title p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.magazine-badge {
  display: inline-block;
  background: #ffffff;
  color: #e74c3c;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
}

.magazine-pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.page {
  position: absolute;
  background: #f9f9f9;
  border: 1px solid #e9ecef;
  border-radius: 0 5px 5px 0;
}

.page-1 {
  top: 10px;
  left: 10px;
  right: 20px;
  height: 180px;
  z-index: 3;
}

.page-2 {
  top: 15px;
  left: 15px;
  right: 25px;
  height: 170px;
  z-index: 2;
}

.page-3 {
  top: 20px;
  left: 20px;
  right: 30px;
  height: 160px;
  z-index: 1;
}

/* 7. Matrix Rugs - Binary Style */
.category-matrix {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-matrix:hover {
  transform: scale(1.1);
}

.matrix-container {
  position: relative;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

.matrix-code {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, #000, #001100);
  color: #00ff00;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.2;
  overflow: hidden;
}

.code-line {
  animation: matrixScroll 10s linear infinite;
  margin-bottom: 0.5rem;
}

.matrix-image {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  height: 100px;
  overflow: hidden;
}

.matrix-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #00ff00;
  padding: 1rem;
  text-align: center;
}

.matrix-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px #00ff00;
  font-family: 'Courier New', monospace;
}

.matrix-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

.matrix-badge {
  display: inline-block;
  background: #00ff00;
  color: #000;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 700;
  text-shadow: none;
}

@keyframes matrixScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100px); }
}

/* 8. Crystal Rugs - Gem Style */
.category-crystal {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-crystal:hover {
  transform: scale(1.1) rotateZ(5deg);
}

.crystal-container {
  position: relative;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

.crystal-structure {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: crystalShine 3s ease-in-out infinite;
}

.crystal-facets {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.facet {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  animation: facetGlow 2s ease-in-out infinite;
}

.f1 {
  top: 20%;
  left: 20%;
  width: 20px;
  height: 2px;
  transform: rotate(45deg);
  animation-delay: 0s;
}

.f2 {
  top: 30%;
  right: 25%;
  width: 15px;
  height: 2px;
  transform: rotate(-30deg);
  animation-delay: 0.5s;
}

.f3 {
  bottom: 40%;
  left: 30%;
  width: 25px;
  height: 2px;
  transform: rotate(60deg);
  animation-delay: 1s;
}

.f4 {
  bottom: 20%;
  right: 20%;
  width: 18px;
  height: 2px;
  transform: rotate(-45deg);
  animation-delay: 1.5s;
}

.f5 {
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  transform: rotate(90deg);
  animation-delay: 2s;
}

.f6 {
  bottom: 30%;
  left: 50%;
  width: 16px;
  height: 2px;
  transform: rotate(-60deg);
  animation-delay: 2.5s;
}

.crystal-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 1rem;
  text-align: center;
}

.crystal-info h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px #ffffff;
}

.crystal-info p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: #cccccc;
}

@keyframes crystalShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes facetGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 9. Luxury Rugs - Diamond Style */
.category-diamond {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-diamond:hover {
  transform: scale(1.05) rotate(5deg);
}

.diamond-content {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  position: relative;
}

.diamond-shape {
  position: relative;
  height: 200px;
  overflow: hidden;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.diamond-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  font-size: 1.5rem;
  animation: sparkle 2s ease-in-out infinite;
}

.sparkle-1 {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.sparkle-2 {
  top: 30%;
  right: 20%;
  animation-delay: 0.5s;
}

.sparkle-3 {
  bottom: 30%;
  left: 30%;
  animation-delay: 1s;
}

.sparkle-4 {
  bottom: 20%;
  right: 30%;
  animation-delay: 1.5s;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}

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

.diamond-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.diamond-info p {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.luxury-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffd700;
  margin-top: 0.5rem;
}

/* 10. Travel Rugs - Passport Style */
.category-passport {
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
  transition: all 0.4s ease;
}

.category-passport:hover {
  transform: translateY(-8px);
}

.passport-content {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.passport-cover {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  padding: 1.5rem;
  text-align: center;
  position: relative;
}

.passport-stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
}

.passport-cover h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
}

.passport-cover p {
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.passport-pages {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8f9fa;
}

.page {
  flex: 1;
  position: relative;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.page:hover {
  transform: scale(1.05);
}

.page-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-stamp {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.2rem;
  border-radius: 4px;
}

/* Responsive Design for Extended Categories */
@media (max-width: 1400px) {
  .extended-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1000px) {
  .extended-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .extended-categories-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .mandala-pattern {
    width: 150px;
    height: 150px;
  }
  
  .ring-1 {
    width: 150px;
    height: 150px;
  }
  
  .ring-2 {
    width: 110px;
    height: 110px;
    top: 20px;
    left: 20px;
  }
  
  .ring-3 {
    width: 70px;
    height: 70px;
    top: 40px;
    left: 40px;
  }
  
  .mandala-center {
    width: 60px;
    height: 60px;
  }
  
  .puzzle-container {
    height: 200px;
  }
  
  .calendar-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .passport-pages {
    flex-direction: column;
  }
  
  .page {
    height: 60px;
  }
}

@media (max-width: 576px) {
  .mandala-info h3,
  .garden-info h3,
  .art-info h3,
  .playground-header h3,
  .corporate-header h3,
  .calendar-header h3,
  .eco-info h3,
  .diamond-info h3,
  .passport-cover h3 {
    font-size: 1.3rem;
  }
  
  .puzzle-overlay h3 {
    font-size: 1.5rem;
  }
  
  .corporate-features {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .feature-icon {
    margin-bottom: 0;
  }
}

/* ===========================================
   INTERACTIVE BLOG SECTION
   =========================================== */

.interactive-blog-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
  position: relative;
  overflow: hidden;
}

.blog-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(26, 43, 60, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(224, 201, 166, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(196, 158, 108, 0.1) 0%, transparent 50%);
  animation: blogPatternFloat 20s ease-in-out infinite;
}

@keyframes blogPatternFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

/* Blog Header Animations */
.blog-header-animated {
  position: relative;
}

.floating-logo {
  animation: logoFloat 3s ease-in-out infinite;
  margin-bottom: 1rem;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
}

.fade-in-up.delay-1 {
  animation-delay: 0.3s;
}

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

.typewriter {
  overflow: hidden;
  border-right: 3px solid #172b38;
  white-space: nowrap;
  animation: typewriter 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #172b38; }
}

.animated-divider {
  position: relative;
  overflow: hidden;
}

.animated-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #172b38, transparent);
  animation: dividerSlide 2s ease-out 1s forwards;
}

@keyframes dividerSlide {
  to { left: 100%; }
}

/* Interactive Blog Cards */
.interactive-blog-card {
  position: relative;
  height: 100%;
  perspective: 1000px;
  cursor: pointer;
}

.blog-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.interactive-blog-card:hover .blog-card-inner {
  transform: rotateY(5deg) rotateX(5deg) translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.blog-image-container {
  position: relative;
  height: 250px;
  overflow: hidden;
}

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

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

.blog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.8) 0%, rgba(120, 119, 198, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.interactive-blog-card:hover .blog-overlay {
  opacity: 1;
}

.blog-icon {
  font-size: 3rem;
  color: white;
  transform: scale(0);
  transition: transform 0.3s ease 0.1s;
}

.interactive-blog-card:hover .blog-icon {
  transform: scale(1);
}

.blog-category-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #172b38;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transform: translateY(-10px);
  opacity: 0;
  transition: all 0.3s ease;
}

.interactive-blog-card:hover .blog-category-badge {
  transform: translateY(0);
  opacity: 1;
}

.blog-content {
  padding: 25px;
  position: relative;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 0.85rem;
  color: #6c757d;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-meta i {
  color: #172b38;
}

.blog-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.interactive-blog-card:hover .blog-title {
  color: #172b38;
}

.blog-excerpt {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.blog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.blog-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #172b38;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.blog-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.5s ease;
}

.interactive-blog-card:hover .blog-link::before {
  left: 100%;
}

.interactive-blog-card:hover .blog-link {
  color: #6B4423;
  transform: translateX(5px);
}

.blog-link i {
  transition: transform 0.3s ease;
}

.interactive-blog-card:hover .blog-link i {
  transform: translateX(5px);
}

.blog-stats {
  display: flex;
  gap: 15px;
}

.blog-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: #6c757d;
  transition: color 0.3s ease;
}

.interactive-blog-card:hover .blog-stats span {
  color: #172b38;
}

.blog-stats i {
  font-size: 0.8rem;
}

/* View All Button */
.btn-blog-view-all {
  position: relative;
  background: #172b38;
  color: white;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.btn-blog-view-all:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.4);
  color: white;
}

.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-blog-view-all:hover .btn-ripple {
  width: 300px;
  height: 300px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .interactive-blog-card:hover .blog-card-inner {
    transform: translateY(-5px);
  }
  
  .blog-image-container {
    height: 200px;
  }
  
  .blog-content {
    padding: 20px;
  }
  
  .blog-title {
    font-size: 1.1rem;
  }
  
  .typewriter {
    white-space: normal;
    border-right: none;
    animation: none;
  }
  
  .btn-blog-view-all {
    padding: 12px 30px;
    font-size: 0.9rem;
  }
}

/* AOS Animation Override */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   ABOUT US SECTION
   =========================================== */

.about-us-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
  position: relative;
  overflow: hidden;
}

.about-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(26, 43, 60, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(224, 201, 166, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(196, 158, 108, 0.1) 0%, transparent 50%);
  animation: blogPatternFloat 20s ease-in-out infinite;
}

/* About Content */
.about-content {
  padding-right: 2rem;
}

.about-text h3 {
  color: #2c3e50;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.about-text p {
  color: #6c757d;
  font-size: 1.1rem;
  line-height: 2.1;
  margin-bottom: 1.5rem;
}

.about-features {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-features .feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.about-features .feature-item:hover {
  transform: translateX(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.about-features .feature-icon {
  width: 50px;
  height: 50px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.about-features .feature-text h6 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.about-features .feature-text p {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0;
}

/* About Visual */
.about-visual {
  position: relative;
}

.about-image-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  height: 500px;
}

.image-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.image-card:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.image-large {
  grid-row: 1 / 3;
}

.image-medium {
  grid-column: 2;
  grid-row: 1;
}

.image-small {
  grid-column: 2;
  grid-row: 2;
}

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

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(141, 91, 47, 0.8) 0%, rgba(160, 82, 45, 0.8) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-card:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
}

.overlay-content h5 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.overlay-content p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
}

/* ===========================================
   WHY CHOOSE US SECTION
   =========================================== */

.why-choose-us-section {
  background: white;
  position: relative;
  overflow: hidden;
}

.why-us-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(26, 43, 60, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(224, 201, 166, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(196, 158, 108, 0.05) 0%, transparent 50%);
  animation: blogPatternFloat 20s ease-in-out infinite;
}

/* Header Styles */
.why-us-header {
  text-align: center;
  margin-bottom: 3rem;
}

/* Service Cards */
.service-card-why {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-card-why:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-card-why::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #172b38;
}

.service-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: white;
  font-size: 2rem;
}

.service-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-content h4 {
  color: #2c3e50;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.service-content p {
  color: #6c757d;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.service-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #6c757d;
  font-size: 0.95rem;
}

.detail-item i {
  color: #172b38;
  font-size: 0.9rem;
}

/* CTA Section */
.why-us-cta {
  background: linear-gradient(135deg, #172b38 0%, #2a4a5c 100%);
  border-radius: 25px;
  padding: 4rem 2rem;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(23, 43, 56, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.why-us-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-content h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.cta-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary-cta,
.btn-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.2rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary-cta {
  background: white;
  color: #172b38;
  border-color: white;
}

.btn-primary-cta:hover {
  background: transparent;
  color: white;
  border-color: white;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.btn-primary-cta:hover i {
  animation: bounce 0.6s ease-in-out;
}

.btn-secondary-cta:hover i {
  animation: pulse 0.6s ease-in-out;
}

.btn-secondary-cta {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-secondary-cta:hover {
  background: white;
  color: #172b38;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Icon Animations */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

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

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Responsive Design */
@media (max-width: 992px) {
  .about-content {
    padding-right: 0;
    margin-bottom: 3rem;
  }
  
  .about-image-grid {
    height: 400px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary-cta,
  .btn-secondary-cta {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .about-text h3 {
    font-size: 1.5rem;
  }
  
  .about-text p {
    font-size: 1rem;
  }
  
  .about-features .feature-item {
    padding: 0.75rem;
  }
  
  .about-features .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .about-image-grid {
    height: 300px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  
  .image-large,
  .image-medium,
  .image-small {
    grid-column: 1;
  }
  
  .image-large {
    grid-row: 1;
  }
  
  .image-medium {
    grid-row: 2;
  }
  
  .image-small {
    grid-row: 3;
  }
  
  .service-card-why {
    padding: 1.5rem;
  }
  
  .service-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .service-content h4 {
    font-size: 1.3rem;
  }
  
  .why-us-cta {
    padding: 2rem 1.5rem;
  }
  
  .cta-content h3 {
    font-size: 1.5rem;
  }
  
  .cta-content p {
    font-size: 1rem;
  }
}

/* Compact Video Sections for Internal Pages */
.hero-video-compact {
  height: 900px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.hero-video-compact:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2xl);
}

.hero-video-300 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.hero-video-compact:hover .hero-video-300 {
  transform: scale(1.05);
}

.hero-overlay-compact {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal);
}



.hero-logo-compact {
  height: 50px;
  width: auto;
  margin-bottom: 1rem;
  filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  opacity: 0.9;
  transition: all var(--transition-normal);
}

.hero-video-compact:hover .hero-logo-compact {
  transform: scale(1.05);
  opacity: 1;
  filter: brightness(1.3) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.hero-subtitle-compact {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  opacity: 0.8;
  transition: all var(--transition-normal);
}

.hero-video-compact:hover .hero-subtitle-compact {
  opacity: 1;
  transform: translateY(-2px);
}

.hero-title-compact {
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all var(--transition-normal);
}

.hero-video-compact:hover .hero-title-compact {
  transform: translateY(-2px);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

.hero-divider-compact {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--white) 0%, rgba(255, 255, 255, 0.6) 100%);
  margin: 0 auto;
  border-radius: var(--border-radius-full);
  transition: all var(--transition-normal);
}

.hero-video-compact:hover .hero-divider-compact {
  width: 80px;
  transform: scaleY(1.2);
}

/* Responsive adjustments for compact videos */
@media (max-width: 768px) {
  .hero-video-compact {
    height: 400px;
    
  }
  
  .hero-title-compact {
    font-size: 1.8rem;
  }
  
  .hero-logo-compact {
    height: 60px;
  }
}

@media (max-width: 576px) {
  .hero-video-compact {
    height: 300px;
  }
  
  .hero-title-compact {
    font-size: 1.5rem;
  }
  
  .hero-subtitle-compact {
    font-size: 0.9rem;
  }
  
  .hero-logo-compact {
    height: 50px;
  }
}

/* Cream Background Sections */
.welcome-section {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  position: relative;
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.welcome-content {
  position: relative;
  z-index: 2;
}

.welcome-stats .stat-item {
  text-align: center;
  padding: 1rem;
}

.welcome-stats .stat-item h4 {
  color: var(--primary-gold);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.welcome-stats .stat-item p {
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.welcome-image {
  position: relative;
  z-index: 2;
}

.welcome-image img {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-normal);
}

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

/* Vision & Mission Minimal Styles */
.vision-mission-section {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  position: relative;
}

.vision-mission-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.vision-minimal, .mission-minimal {
  position: relative;
  z-index: 2;
}


.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-blue);
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(26, 43, 64, 0.1);
  border-radius: 20px;
}

.vision-title, .mission-title {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.vision-divider, .mission-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-blue), var(--secondary-gold));
  margin: 0 auto 2rem;
  border-radius: 2px;
}

.vision-text, .mission-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 10px;
  font-weight: 400;
}

.vision-points, .mission-goals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vision-point, .goal-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(26, 43, 64, 0.1);
  transition: all var(--transition-normal);
}

.vision-point:hover, .goal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.point-icon {
  width: 40px;
  height: 40px;
  background: #172b38;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.goal-number {
  width: 40px;
  height: 40px;
  background: #172b38;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.point-content, .goal-text {
  flex: 1;
}

.point-content h6, .goal-text h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.point-content p, .goal-text p {
  font-size: 0.9rem;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.6;
}

.vision-image-minimal, .mission-image-minimal,
.vision-video-minimal, .mission-video-minimal {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-normal);
}

.vision-image-minimal:hover, .mission-image-minimal:hover,
.vision-video-minimal:hover, .mission-video-minimal:hover {
  transform: translateY(-2px);
}

.vision-image-minimal img, .mission-image-minimal img,
.vision-video-minimal video, .mission-video-minimal video {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.vision-image-minimal:hover img, .mission-image-minimal:hover img,
.vision-video-minimal:hover video, .mission-video-minimal:hover video {
  transform: scale(1.02);
}

.image-overlay-minimal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}

.overlay-text {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .vision-title, .mission-title {
    font-size: 2rem;
  }
  
  .vision-text, .mission-text {
    font-size: 1rem;
  }
  
  .vision-point, .goal-item {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .point-icon, .goal-number {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .vision-image-minimal img, .mission-image-minimal img,
  .vision-video-minimal video, .mission-video-minimal video {
    height: 300px;
  }
}

/* Values Modern Section Styles */
.values-modern-section {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  position: relative;
}

.values-modern-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.values-header {
  position: relative;
  z-index: 2;
}

.values-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #172b38;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(23, 43, 56, 0.1);
  border-radius: 20px;
}

.values-title {
  font-family: 'Roboto', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.values-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #172b38, var(--secondary-gold));
  margin: 0 auto 2rem;
  border-radius: 2px;
}

.values-subtitle {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin: 0;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

.value-card-modern {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  border: 1px solid rgba(23, 43, 56, 0.1);
  height: 100%;
}

.value-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

.value-image-container {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.value-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.value-card-modern:hover .value-image {
  transform: scale(1.05);
}

.value-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(23, 43, 56, 0.8), rgba(23, 43, 56, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.value-card-modern:hover .value-overlay {
  opacity: 1;
}

.value-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #172b38, var(--secondary-gold));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  transform: scale(0.8);
  transition: transform var(--transition-normal);
}

.value-card-modern:hover .value-icon {
  transform: scale(1);
}

.value-content {
  padding: 2rem;
}

.value-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
}

.value-description {
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.value-features {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.feature-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(23, 43, 56, 0.1);
  color: #172b38;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(23, 43, 56, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .values-title {
    font-size: 2rem;
  }
  
  .values-subtitle {
    font-size: 1rem;
  }
  
  .value-content {
    padding: 1.5rem;
  }
  
  .value-image-container {
    height: 200px;
  }
  
  .value-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}

/* Achievements Section Styles */
.achievements-section {
  background: #fff;
  position: relative;
}

.achievements-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.achievement-card {
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  background: #f8f1ef;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.achievement-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.achievement-card h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
}

.achievement-card p {
  font-size: 1rem;
  color: var(--text-dark);
  margin: 0;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .achievement-card {
    padding: 1.5rem;
  }
  
  .achievement-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .achievement-card h5 {
    font-size: 1.1rem;
  }
  
  .achievement-card p {
    font-size: 0.9rem;
  }
}

/* FAQ Accordion Section Styles */
.faq-accordion-section {
  background: #fff;
  position: relative;
}

.faq-accordion-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.faq-accordion-section .container {
  position: relative;
  z-index: 2;
}

.accordion {
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden;
}

.accordion-item {
  border: none;
  border-bottom: 1px solid rgba(23, 43, 56, 0.1);
  background: rgba(255, 255, 255, 0.95);
  transition: all var(--transition-normal);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.accordion-button {
  background: transparent;
  border: none;
  padding: 2rem;
  font-weight: 600;
  color: #172b38;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: none;
  position: relative;
}

.accordion-button:not(.collapsed) {
  background: rgba(23, 43, 56, 0.05);
  color: #172b38;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border: none;
}

.accordion-button::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  background: none;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 1.2rem;
  color: #172b38;
  transition: transform var(--transition-normal);
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.faq-icon {
  width: 50px;
  height: 50px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.faq-question {
  font-size: 1.1rem;
  font-weight: 600;
  color: #172b38;
  flex: 1;
}

.accordion-body {
  padding: 0 2rem 2rem 2rem;
  background: rgba(23, 43, 56, 0.02);
  border-top: 1px solid rgba(23, 43, 56, 0.1);
}

.accordion-body p {
  color: var(--text-dark);
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .accordion-button {
    padding: 1.5rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  
  .faq-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    flex-shrink: 0;
  }
  
  .faq-question {
    font-size: 0.9rem;
    line-height: 1.3;
    flex: 1;
  }
  
  .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
  
  .accordion-body p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .accordion-button {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .faq-icon {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .faq-question {
    font-size: 0.85rem;
    line-height: 1.2;
  }
  
  .accordion-body {
    padding: 0 1rem 1rem 1rem;
  }
  
  .accordion-body p {
    font-size: 0.85rem;
  }
}

/* Legal Pages Styles (Privacy Policy, Cookie Policy & Terms of Service) */
.privacy-policy-section, .cookie-policy-section, .terms-of-service-section {
  background: #fff;
  position: relative;
}

.privacy-policy-section .container, .cookie-policy-section .container, .terms-of-service-section .container {
  position: relative;
  z-index: 2;
}

.privacy-content, .cookie-content, .terms-content {
  background: #fff;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(23, 43, 56, 0.1);
}

.privacy-section, .cookie-section, .terms-section {
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(23, 43, 56, 0.08);
  transition: all var(--transition-normal);
}

.privacy-section:hover, .cookie-section:hover, .terms-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.privacy-section:last-child, .cookie-section:last-child, .terms-section:last-child {
  margin-bottom: 0;
}

.privacy-heading, .cookie-heading, .terms-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Roboto', sans-serif;
}

.privacy-heading i, .cookie-heading i, .terms-heading i {
  width: 60px;
  height: 60px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(23, 43, 56, 0.2);
}

.privacy-content h4, .cookie-content h4, .terms-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #172b38;
  margin: 1.5rem 0 1rem 0;
  font-family: 'Roboto', sans-serif;
}

.privacy-content p, .cookie-content p, .terms-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.privacy-content ul, .cookie-content ul, .terms-content ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.privacy-content li, .cookie-content li, .terms-content li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.privacy-link, .cookie-link, .terms-link {
  color: #172b38;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-normal);
}

.privacy-link:hover, .cookie-link:hover, .terms-link:hover {
  color: var(--secondary-gold);
  text-decoration: underline;
}

.contact-info {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(23, 43, 56, 0.08);
}

.contact-info p {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.cookie-type {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  border-left: 4px solid #172b38;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(23, 43, 56, 0.08);
}

.cookie-type h4 {
  color: #172b38;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cookie-type h4 i {
  color: #172b38;
  font-size: 1rem;
}

/* Responsive Design for Legal Pages */
@media (max-width: 768px) {
  .privacy-content, .cookie-content, .terms-content {
    padding: 2rem;
  }
  
  .privacy-heading, .cookie-heading, .terms-heading {
    font-size: 1.25rem;
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  
  .privacy-heading i, .cookie-heading i, .terms-heading i {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .privacy-content h4, .cookie-content h4, .terms-content h4 {
    font-size: 1.1rem;
  }
  
  .privacy-content p, .cookie-content p, .terms-content p {
    font-size: 0.9rem;
  }
  
  .privacy-content li, .cookie-content li, .terms-content li {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .privacy-content, .cookie-content, .terms-content {
    padding: 1.5rem;
  }
  
  .privacy-heading, .cookie-heading, .terms-heading {
    font-size: 1.1rem;
  }
  
  .privacy-heading i, .cookie-heading i, .terms-heading i {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }
  
  .privacy-content h4, .cookie-content h4, .terms-content h4 {
    font-size: 1rem;
  }
  
  .privacy-content p, .cookie-content p, .terms-content p {
    font-size: 0.85rem;
  }
  
  .privacy-content li, .cookie-content li, .terms-content li {
    font-size: 0.85rem;
  }
}

/* Contact Page Styles */
.contact-info-section {
  background: #fff;
  position: relative;
}

/* Why Choose Us Section */
.why-choose-section {
  background: #fff;
  position: relative;
}

.why-choose-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.why-choose-section .container {
  position: relative;
  z-index: 2;
}

.why-choose-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(23, 43, 56, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.why-choose-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

.why-choose-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.why-choose-card h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
}

.why-choose-card p {
  font-size: 1rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
}

.contact-info-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.contact-info-section .container {
  position: relative;
  z-index: 2;
}

.contact-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(23, 43, 56, 0.1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

.contact-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.contact-card h5 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #172b38;
  margin-bottom: 1rem;
  font-family: 'Roboto', sans-serif;
}

.contact-card p {
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.contact-link {
  color: #172b38;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color var(--transition-normal);
}

.contact-link:hover {
  color: var(--secondary-gold);
}

.contact-text {
  color: #172b38;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}

/* Contact Form Styles */
.contact-form-section {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  position: relative;
}

.contact-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="75" cy="75" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="50" cy="10" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="10" cy="60" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="90" cy="40" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.contact-form-section .container {
  position: relative;
  z-index: 2;
}

.contact-form-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(23, 43, 56, 0.1);
  max-width: 600px;
  margin: 0 auto;
}


.form-label {
  font-weight: 600;
  color: #172b38;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-control {
  border: 2px solid rgba(23, 43, 56, 0.1);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all var(--transition-normal);
  background: rgba(255, 255, 255, 0.9);
}

.form-control:focus {
  border-color: #172b38;
  box-shadow: 0 0 0 0.2rem rgba(23, 43, 56, 0.1);
  background: rgba(255, 255, 255, 1);
}

.form-control::placeholder {
  color: rgba(23, 43, 56, 0.5);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-check {
  margin-top: 1rem;
}

.form-check-input {
  border: 2px solid rgba(23, 43, 56, 0.2);
  border-radius: 4px;
}

.form-check-input:checked {
  background-color: #172b38;
  border-color: #172b38;
}

.form-check-label {
  color: var(--text-dark);
  font-size: 0.9rem;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.form-check-label i {
  color: #172b38;
  font-size: 1rem;
}

.btn-contact-submit {
  background: #172b38;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.3);
  color: white;
}

.btn-contact-submit:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 43, 56, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-card {
    padding: 1.5rem;
  }
  
  .contact-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .contact-card h5 {
    font-size: 1.1rem;
  }
  
  .contact-card p {
    font-size: 0.9rem;
  }
  
  .contact-form-container {
    padding: 1.5rem;
  }
  
  .btn-contact-submit {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
  
  .why-choose-card {
    padding: 1.5rem;
  }
  
  .why-choose-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .why-choose-card h5 {
    font-size: 1.1rem;
  }
  
  .why-choose-card p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .contact-form-container {
    padding: 1.25rem;
  }
  
  .form-control {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
  }
  
  .btn-contact-submit {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
  }
  
  .why-choose-card {
    padding: 1.25rem;
  }
  
  .why-choose-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .why-choose-card h5 {
    font-size: 1rem;
  }
  
  .why-choose-card p {
    font-size: 0.85rem;
  }
}

.heritage-section {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  position: relative;
}

.heritage-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="heritage-grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23f0ede7" opacity="0.3"/><circle cx="80" cy="80" r="1" fill="%23f0ede7" opacity="0.2"/><circle cx="40" cy="60" r="0.5" fill="%23f0ede7" opacity="0.4"/><circle cx="60" cy="20" r="0.5" fill="%23f0ede7" opacity="0.3"/><circle cx="10" cy="50" r="0.5" fill="%23f0ede7" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23heritage-grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

.heritage-card {
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  z-index: 2;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.heritage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.heritage-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all var(--transition-normal);
}

.heritage-card:hover .heritage-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

.heritage-icon i {
  font-size: 2rem;
  color: var(--white);
}

.heritage-card h5 {
  color: var(--text-dark);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.heritage-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Privacy Policy Specific Styles */
.privacy-right-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
}

.privacy-right-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.privacy-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all var(--transition-normal);
}

.privacy-right-card:hover .privacy-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

.privacy-icon i {
  font-size: 1.5rem;
  color: var(--white);
}

.privacy-right-card h5 {
  color: var(--text-dark);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.privacy-right-card p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
}

/* Contact Form Styles */
.contact-form-container {
  background: rgba(255, 255, 255, 0.95);
  padding: 3rem;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-form-element .form-label {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.contact-form-element .form-control,
.contact-form-element .form-select {
  border: 2px solid #e9ecef;
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  transition: all var(--transition-normal);
}

.contact-form-element .form-control:focus,
.contact-form-element .form-select:focus {
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

.contact-form-element .btn-primary {
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all var(--transition-normal);
}

.contact-form-element .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

/* FAQ Accordion Styles */
.accordion-item {
  border: 1px solid #e9ecef;
  border-radius: var(--border-radius) !important;
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordion-button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  font-weight: 600;
  color: var(--text-dark);
  padding: 1.5rem;
  transition: all var(--transition-normal);
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  color: var(--white);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25);
}

.accordion-body {
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Process Steps Styles */
.process-step {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-normal);
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
}

.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.step-icon {
  width: 80px;
  height: 80px;
  background: #172b38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  margin: 0 auto 1rem;
  box-shadow: 0 8px 20px rgba(23, 43, 56, 0.2);
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}


.process-step h5 {
  color: var(--text-dark);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.process-step p {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
}

/* Award Cards Styles */
.award-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
}

.award-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.award-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all var(--transition-normal);
}

.award-card:hover .award-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

.award-icon i {
  font-size: 2rem;
  color: var(--white);
}

.award-card h5 {
  color: var(--text-dark);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.award-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.award-year {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary-gold), var(--accent-orange));
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Testimonial Cards Styles */
.testimonial-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-normal);
  position: relative;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  height: 100%;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.testimonial-content {
  margin-bottom: 1.5rem;
}

.testimonial-content p {
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
  position: relative;
}

.testimonial-content p::before {
  content: '"';
  font-size: 3rem;
  color: var(--primary-gold);
  position: absolute;
  top: -10px;
  left: -10px;
  font-family: 'Roboto', sans-serif;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-gold);
}

.author-info h6 {
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
}

.author-info span {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Contact Buttons Container */
.contact-buttons-container {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Contact Button */
.contact-btn {
  flex: 1;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
}

.contact-btn:hover {
  background: var(--dark-grey);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.3);
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #20B2AA, #48CAE4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(32, 178, 170, 0.3);
}

.contact-btn:hover .contact-icon {
  background: white;
}

.contact-icon i {
  font-size: 1.5rem;
  color: white;
}

.contact-btn:hover .contact-icon i {
  color: var(--dark-grey);
}

.contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.contact-title {
  font-size: 1rem;
  color: var(--dark-grey);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.contact-btn:hover .contact-title {
  color: white;
}

.contact-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.2;
}

.contact-btn:hover .contact-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* WhatsApp Button */
.whatsapp-btn {
  flex: 1;
  padding: 1rem 1.5rem;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.whatsapp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
  border-color: #25d366;
}

.whatsapp-icon {
  width: 50px;
  height: 50px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.whatsapp-icon i {
  font-size: 1.5rem;
  color: white;
}

.whatsapp-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.whatsapp-title {
  font-size: 1rem;
  color: var(--dark-grey);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.whatsapp-subtitle {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
  line-height: 1.2;
}

/* Social Section Footer */
.social-section-footer {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.social-section-footer .social-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-grey);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-section-footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-section-footer .social-icon {
  width: 45px;
  height: 45px;
  background: var(--dark-grey);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(23, 43, 56, 0.2);
}

.social-section-footer .social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(23, 43, 56, 0.4);
}

.social-section-footer .social-icon i {
  font-size: 1.2rem;
}

/* Responsive Design for Contact Buttons */
@media (max-width: 768px) {
  .contact-buttons-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-btn,
  .whatsapp-btn {
    padding: 0.875rem 1.25rem;
  }
  
  .contact-icon,
  .whatsapp-icon {
    width: 45px;
    height: 45px;
  }
  
  .contact-icon i,
  .whatsapp-icon i {
    font-size: 1.25rem;
  }
}