/* ========== ROOT VARIABLES ========== */
:root {
  /* Primary Colors */
  --primary-color: #28a745;
  --primary-light: #20c997;
  --primary-dark: #1e7e34;

  /* Success Colors */
  --success-color: #28a745;
  --success-light: #d4edda;
  --success-dark: #155724;

  /* Background Colors */
  --bg-light: #f8f9fa;
  --bg-secondary: #e9ecef;
  --bg-white: #ffffff;
  --bg-dark: #343a40;

  /* Text Colors */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #6c757d;
  --text-light: #ffffff;

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #adb5bd;

  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-primary: rgba(40, 167, 69, 0.3);
  --shadow-primary-hover: rgba(40, 167, 69, 0.4);

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-light)
  );
  --gradient-bg: linear-gradient(
    135deg,
    var(--bg-light) 0%,
    var(--bg-secondary) 100%
  );
  --gradient-overlay: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.1),
    rgba(32, 201, 151, 0.1)
  );

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Animation Durations */
  --animation-fast: 0.3s;
  --animation-normal: 0.5s;
  --animation-slow: 1s;
  --animation-very-slow: 2s;

  /* Font Sizes */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-xxl: 1.5rem;
  --font-title: 2.5rem;

  /* Z-Index */
  --z-background: 1;
  --z-content: 2;
  --z-overlay: 3;
  --z-modal: 4;
  --z-tooltip: 5;
}

/* ========== GLOBAL STYLES ========== */
/** {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}*/

/*body {
  font-family: "Cairo", "Tajawal", sans-serif;
  overflow-x: hidden;
  color: var(--text-primary);
  background: var(--gradient-bg);
  line-height: 1.6;
}*/

html {
  scroll-behavior: smooth;
}

/* ========== GRID SYSTEM ========== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

/*.col {
  flex: 1;
  padding: 0 15px;
}

.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-sm-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-sm-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-sm-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-sm-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-sm-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-sm-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-sm-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-sm-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-sm-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-sm-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-sm-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}*/
/*.col-sm-12 {
  flex: 0 0 100%;
  max-width: 100%;
}*/

/*.col-md-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-md-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-md-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-md-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}*/
/*.col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
}*/
/*.col-md-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-md-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-md-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-md-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-md-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-md-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-lg-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-lg-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-lg-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-lg-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-lg-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}*/
/*.col-lg-6 {
  flex: 0 0 50%;
  max-width: 50%;
}*/
/*.col-lg-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-lg-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-lg-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-lg-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-lg-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-lg-12 {
  flex: 0 0 100%;
  max-width: 100%;
}*/

/* Grid Responsive */
@media (max-width: 576px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
/*  .col-sm-12*/ {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
/*  .col-md-6,*/
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ========== UTILITY CLASSES ========== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-grid {
  display: grid;
}

.justify-content-start {
  justify-content: flex-start;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-end {
  justify-content: flex-end;
}
.justify-content-between {
  justify-content: space-between;
}
.justify-content-around {
  justify-content: space-around;
}

.align-items-start {
  align-items: flex-start;
}
.align-items-center {
  align-items: center;
}
.align-items-end {
  align-items: flex-end;
}
.align-items-stretch {
  align-items: stretch;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}

.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 1rem;
}
.gap-4 {
  gap: 1.5rem;
}
.gap-5 {
  gap: 3rem;
}

.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}
.p-4 {
  padding: 1.5rem;
}
.p-5 {
  padding: 3rem;
}

/* ========== REUSABLE ANIMATIONS ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

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

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

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulseBackground {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

/* ========== ANIMATION UTILITY CLASSES ========== */
.animate-fadeInUp {
  animation: fadeInUp var(--animation-slow) ease-out;
}

.animate-fadeIn {
  animation: fadeIn var(--animation-normal) ease-out;
}

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

.animate-heartBeat {
  animation: heartBeat 1s infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* ========== HEADER STYLES ========== */
.docs-header {
  background: var(--gradient-primary);
  padding: 15px 0;
  box-shadow: 0 4px 20px var(--shadow-primary);
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-light);
}

.header-title i {
  font-size: 2rem;
  animation: float 4s ease-in-out infinite;
}

.header-title h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

.version {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.nav {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1001;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left var(--transition-normal);
}

.nav-link:hover::before,
.nav-link.active::before {
  left: 0;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ========== DROPDOWN STYLES ========== */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 1000;
}

.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-arrow {
  transition: transform var(--transition-normal);
  font-size: 0.8rem;
}

.dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 250px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-normal);
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-weight: 500;
}

    .dropdown-item:hover {
        background: #49a760;
        color: var(--text-light) #ffffff;
        text-decoration: none;
        border-radius: 10px;
    }

.dropdown-item i {
  width: 20px;
  text-align: center;
  font-size: 1rem;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.export-btn {
  border-radius: var(--radius-lg);
  width: auto;
  padding: 8px 16px;
  gap: 8px;
}

/* ========== MAIN CONTENT ========== */
.main-content {
  padding-top: 0;
}



.hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: var(--z-content);
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.hero-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========== FLOATING ELEMENTS ========== */


.floating-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-light);
  animation: float 4s ease-in-out infinite;
  box-shadow: 0 10px 25px var(--shadow-primary);
  z-index: var(--z-overlay);
}

.floating-icon.delay-1 {
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.floating-icon.delay-2 {
  top: 70%;
  left: 5%;
  animation-delay: 1s;
}

.floating-icon.delay-3 {
  top: 30%;
  left: 85%;
  animation-delay: 2s;
}

/* ========== FORM SYSTEM ========== */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-white);
  color: var(--text-primary);
  transition: all var(--transition-normal);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow-primary);
}

.form-group input[type="email"]:invalid {
  border-color: #dc3545;
}

.form-group input[type="email"]:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 16px 12px;
  padding-left: 40px;
}

.form-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.checkbox-group {
  margin-bottom: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-white);
  position: relative;
  transition: all var(--transition-normal);
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-label:hover .checkbox-custom {
  border-color: var(--primary-color);
}

.link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.link:hover {
  text-decoration: underline;
}

/* ========== CARD SYSTEM ========== */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px var(--shadow-light);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px var(--shadow-medium);
}

.card-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 600;
}

.card-header i {
  color: var(--primary-color);
  font-size: 20px;
}

.card-content {
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  background: var(--bg-light);
}

/* ========== SECTION SYSTEM ========== */
.section {
  padding: 4rem 0;
}

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

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 1rem;
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

.section-description {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ========== BUTTON SYSTEM ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 25px;
  font-weight: 600;
  font-size: var(--font-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  margin: 5px;
  gap: 8px;
}

.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-normal);
}

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

.btn-hero-primary {
  background: var(--gradient-primary);
  color: var(--text-light);
  box-shadow: 0 8px 25px var(--shadow-primary);
}

.btn-hero-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px var(--shadow-primary-hover);
  color: var(--text-light);
  text-decoration: none;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-hero-secondary:hover {
  background: var(--primary-color);
  color: var(--text-light);
  transform: translateY(-3px) scale(1.05);
  text-decoration: none;
}

.btn-service-primary {
  background: var(--gradient-primary);
  color: var(--text-light);
  padding: 12px 24px;
  border-radius: var(--radius-lg);
}

.btn-service-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--shadow-primary);
  text-decoration: none;
  color: var(--text-light);
}

.btn-preview {
  background: var(--gradient-primary);
  color: var(--text-light);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  pointer-events: none;
}

/* ========== ADDITIONAL BUTTON VARIANTS ========== */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--primary-color)
  );
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover {
  background: var(--primary-color);
  color: white;
}

.btn-success {
  background: #28a745;
  color: white;
  border: none;
}

.btn-success:hover {
  background: #218838;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: none;
}

.btn-danger:hover {
  background: #c82333;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
  border: none;
}

.btn-warning:hover {
  background: #e0a800;
}

.btn-info {
  background: #17a2b8;
  color: white;
  border: none;
}

.btn-info:hover {
  background: #138496;
}

/* Button Sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
}

.btn-xl {
  padding: 20px 40px;
  font-size: 18px;
  font-weight: 700;
}

/* ========== ALERT SYSTEM ========== */
.alert {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  position: relative;
}

.alert-success {
  background: var(--success-light);
  border-color: var(--success-color);
  color: var(--success-dark);
}

.alert-danger {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

.alert-info {
  background: #d1ecf1;
  border-color: #17a2b8;
  color: #0c5460;
}

/* ========== BADGE SYSTEM ========== */
.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius-sm);
}

.badge-primary {
  background: var(--primary-color);
  color: white;
}

.badge-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.badge-success {
  background: var(--success-color);
  color: white;
}

.badge-danger {
  background: #dc3545;
  color: white;
}

.badge-warning {
  background: #ffc107;
  color: #212529;
}

.badge-info {
  background: #17a2b8;
  color: white;
}

.badge-light {
  background: var(--bg-light);
  color: var(--text-primary);
}

.badge-dark {
  background: var(--bg-dark);
  color: white;
}

/* Project specific badges */
.badge-government {
  background: linear-gradient(135deg, #6f42c1, #e83e8c);
  color: white;
}

.badge-commercial {
  background: linear-gradient(135deg, #17a2b8, #20c997);
  color: white;
}

.badge-featured {
  background: linear-gradient(135deg, #fd7e14, #ffc107);
  color: white;
}

.badge-award {
  background: linear-gradient(135deg, #dc3545, #fd7e14);
  color: white;
}

.badge-sustainable {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.badge-innovative {
  background: linear-gradient(135deg, #007bff, #6f42c1);
  color: white;
}

/* ========== STATS SECTION ========== */
.stats-section {
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 50px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.stat-card {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(40, 167, 69, 0.08),
    transparent
  );
  animation: shimmer 4s infinite linear;
  pointer-events: none;
  z-index: var(--z-background);
}

.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-primary);
}

.stat-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
  font-size: 2rem;
  color: var(--text-light);
  transition: all var(--transition-smooth);
  position: relative;
  z-index: var(--z-content);
}

.stat-card:hover .stat-icon {
  transform: scale(1.2) rotate(360deg);
  animation: heartBeat 1s infinite;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
  position: relative;
  z-index: var(--z-content);
}

.stat-label {
  color: var(--text-muted);
  font-weight: 500;
  position: relative;
  z-index: var(--z-content);
}



/* ========== SERVICES SECTION ========== */
.services-section {
  padding: 80px 0;
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.05),
    rgba(32, 201, 151, 0.05)
  );
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.section-description {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.service-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all var(--transition-smooth);
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px var(--shadow-primary);
}

.service-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: 2rem;
  color: var(--text-light);
  transition: all var(--transition-smooth);
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(5deg);
  animation: bounce 1s infinite;
}

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.service-card p {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}

.service-features {
  list-style: none;
  margin-bottom: var(--spacing-lg);
  text-align: right;
}

.service-features li {
  padding: 8px 0;
  color: var(--text-secondary);
  position: relative;
  padding-right: 25px;
}

.service-features li::before {
  content: "✓";
  position: absolute;
  right: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* ========== COMPONENTS SHOWCASE ========== */
.components-showcase {
  padding: 80px 0;
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.component-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--spacing-xl);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.component-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(40, 167, 69, 0.05),
    transparent
  );
  animation: shimmer 6s infinite linear;
  pointer-events: none;
}

.component-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px var(--shadow-primary);
  text-decoration: none;
  color: inherit;
}

.component-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  font-size: 2.5rem;
  color: var(--text-light);
  transition: all var(--transition-smooth);
  position: relative;
  z-index: var(--z-content);
}

.component-card:hover .component-icon {
  transform: scale(1.15) rotate(5deg);
  animation: bounce 1s infinite;
}

.component-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  text-align: center;
  position: relative;
  z-index: var(--z-content);
}

.component-description {
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  position: relative;
  z-index: var(--z-content);
}

.component-preview {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  text-align: center;
  position: relative;
  z-index: var(--z-content);
}

.card-preview {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--primary-color);
}

.input-preview {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--text-primary);
  width: 100%;
  outline: none;
}

.modal-preview {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.animation-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.grid-item {
  background: var(--primary-color);
  height: 20px;
  border-radius: 3px;
}

.events-preview {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--primary-color);
}

/* ========== ANIMATION DELAYS ========== */
.delay-1 {
  animation-delay: 0.2s;
  animation-fill-mode: both;
}
.delay-2 {
  animation-delay: 0.4s;
  animation-fill-mode: both;
}
.delay-3 {
  animation-delay: 0.6s;
  animation-fill-mode: both;
}
.delay-4 {
  animation-delay: 0.8s;
  animation-fill-mode: both;
}
.delay-5 {
  animation-delay: 1s;
  animation-fill-mode: both;
}
.delay-6 {
  animation-delay: 1.2s;
  animation-fill-mode: both;
}
.delay-7 {
  animation-delay: 1.4s;
  animation-fill-mode: both;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
  }

  .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

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


  .services-section,
  .components-showcase {
    padding: 60px 0;
  }

  .components-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .floating-icon {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

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

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

  .component-icon,
  .service-icon,
  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* ========== ABOUT PAGE STYLES ========== */

/* Timeline Styles */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  transform: translateX(-50%);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin: 40px 0;
  display: flex;
  align-items: center;
}

.timeline-item:nth-child(odd) {
  flex-direction: row;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline-marker {
  position: absolute;
  left: 50%;
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transform: translateX(-50%);
  box-shadow: 0 4px 15px var(--shadow-primary);
  z-index: 2;
}

.timeline-content {
  background: var(--bg-white);
  border-radius: 15px;
  padding: 25px;
  width: calc(50% - 40px);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  position: relative;
  transition: all 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px var(--shadow-medium);
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-right: auto;
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: auto;
}

.timeline-content::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  transform: translateY(-50%);
}

.timeline-item:nth-child(odd) .timeline-content::before {
  right: -30px;
  border-left-color: var(--bg-white);
}

.timeline-item:nth-child(even) .timeline-content::before {
  left: -30px;
  border-right-color: var(--bg-white);
}

.timeline-year {
  background: var(--gradient-primary);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.timeline-content h3 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.timeline-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

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

.value-item {
  background: var(--bg-white);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.value-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

.value-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.value-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  box-shadow: 0 8px 25px var(--shadow-primary);
}

.value-item h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
}

.value-item p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.team-member {
  background: var(--bg-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
  transition: all 0.3s ease;
  text-align: center;
}

.team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

.member-photo {
  position: relative;
  overflow: hidden;
  height: 300px;
}

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

.team-member:hover .member-photo img {
  transform: scale(1.1);
}

.member-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 167, 69, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.team-member:hover .member-overlay {
  opacity: 1;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.1);
  background: var(--primary-light);
  color: white;
}

.member-info {
  padding: 25px;
}

.member-info h3 {
  color: var(--primary-color);
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
}

.member-title {
  color: var(--primary-light);
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 16px;
}

.member-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

/* Achievements Grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.achievement-item {
  background: var(--bg-white);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.achievement-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

.achievement-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.achievement-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 25px;
  box-shadow: 0 8px 25px var(--shadow-primary);
}

.achievement-item h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.achievement-item p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

/* CTA Section */
.cta-content {
  padding: 60px 20px;
}

.cta-title {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 20px;
  font-weight: 700;
}

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

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Background Gradient Class */
.bg-gradient {
  background: var(--gradient-primary);
  color: white;
  position: relative;
  overflow: hidden;
}

.bg-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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="20" cy="80" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.6;
  pointer-events: none;
}

/* Section Background Light */
.bg-light {
  background-color: var(--bg-light);
}

/* Mobile Responsive Timeline */
@media (max-width: 768px) {
  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    flex-direction: column !important;
    padding-left: 60px;
  }

  .timeline-marker {
    left: 20px !important;
    transform: translateX(-50%);
  }

  .timeline-content {
    width: 100% !important;
    margin: 0 !important;
  }

  .timeline-content::before {
    display: none;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ========== CLASSIFICATIONS PAGE STYLES ========== */

/* Classifications Grid */
.classifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.classification-card {
  background: var(--bg-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
}

.classification-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.classification-header {
  padding: 30px 25px 20px;
  background: linear-gradient(135deg, var(--bg-light), rgba(40, 167, 69, 0.05));
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.classification-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px var(--shadow-primary);
  transition: transform 0.3s ease;
}

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

.classification-icon.hydroponic {
  background: linear-gradient(135deg, #17a2b8, #20c997);
}

.classification-icon.monitoring {
  background: linear-gradient(135deg, #6f42c1, #e83e8c);
}

.classification-icon.greenhouse {
  background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.classification-icon.solar {
  background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.classification-icon.water {
  background: linear-gradient(135deg, #007bff, #17a2b8);
}

.classification-header h3 {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.classification-badge {
  background: var(--primary-light);
  color: white;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 20px;
  left: 20px;
}

.classification-content {
  padding: 25px;
}

.classification-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 14px;
}

.classification-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-light);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.feature-item i {
  color: var(--primary-color);
  font-size: 14px;
}

.classification-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat {
  text-align: center;
  flex: 1;
}

.stat-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.classification-footer {
  padding: 20px 25px 25px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
}

.classification-footer .btn {
  flex: 1;
  justify-content: center;
  font-size: 14px;
  padding: 10px 15px;
}

/* Features Grid for Classifications Page */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.feature-card {
  background: var(--bg-white);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.feature-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 25px;
  box-shadow: 0 8px 25px var(--shadow-primary);
}

.feature-card h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

/* Button Variants for CTA */
.btn-white {
  background: white;
  color: var(--primary-color);
  border: 2px solid white;
}

.btn-white:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.btn-outline-white:hover {
  background: white;
  color: var(--primary-color);
}

/* Mobile Responsive for Classifications */
@media (max-width: 768px) {
  .classifications-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .classification-header {
    padding: 20px 20px 15px;
  }

  .classification-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .classification-header h3 {
    font-size: 18px;
  }

  .classification-content {
    padding: 20px;
  }

  .classification-features {
    gap: 10px;
  }

  .classification-footer {
    padding: 15px 20px 20px;
    flex-direction: column;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ========== CATALOG PAGE STYLES ========== */

/* 3D Book Preview */
.catalog-preview {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.book-3d {
  position: relative;
  transform-style: preserve-3d;
  width: 250px;
  height: 350px;
  transition: transform 0.3s ease;
}

.book-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 10px;
  box-shadow: 0 20px 40px var(--shadow-dark);
  overflow: hidden;
  transform: rotateY(0deg);
}

.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.8),
    rgba(32, 201, 151, 0.8)
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.cover-overlay h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.book-spine {
  position: absolute;
  width: 20px;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--primary-color)
  );
  transform: rotateY(90deg) translateZ(10px);
  right: -10px;
  border-radius: 0 5px 5px 0;
}

.book-shadow {
  position: absolute;
  width: 120%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3), transparent);
  transform: rotateX(90deg) translateZ(-175px);
  left: -10%;
}

/* Flipbook Container */
.catalog-container {
  background: var(--bg-white);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 40px var(--shadow-light);
  margin-top: 40px;
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-light);
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.control-btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--shadow-primary);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-counter {
  background: var(--bg-light);
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Enhanced Flipbook Pages */
.flipbook-container {
  perspective: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 700px;
  position: relative;
  background:
    radial-gradient(
      circle at 25% 75%,
      rgba(40, 167, 69, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 25%,
      rgba(32, 201, 151, 0.1) 0%,
      transparent 50%
    ),
    linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 20px;
  padding: 60px;
  margin: 30px 0;
  overflow: hidden;
  position: relative;
}

.flipbook-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bookPattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(40,167,69,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23bookPattern)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.page {
  position: absolute;
  width: 520px;
  height: 720px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border-radius: 12px;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.15),
    0 5px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
  transform-style: preserve-3d;
  transition:
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease-out;
  cursor: pointer;
  transform-origin: left center;
  border: 2px solid #e9ecef;
  overflow: hidden;
  position: relative;
}

.page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.page:hover::before {
  transform: translateX(100%);
}

.page.active {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 10px 25px rgba(0, 0, 0, 0.15),
    inset -8px 0 20px rgba(0, 0, 0, 0.05);
}

.page.flipped {
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    inset 5px 0 15px rgba(0, 0, 0, 0.1);
}

.page:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.page-content {
  padding: 40px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-title {
  color: var(--primary-color);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 3px solid var(--primary-light);
  padding-bottom: 15px;
}

/* Cover Page Styles */
.cover-page .page-content {
  background: var(--gradient-primary);
  color: white;
  text-align: center;
  justify-content: space-between;
}

.logo-section {
  margin-top: 40px;
}

.logo-icon {
  font-size: 60px;
  margin-bottom: 20px;
  display: block;
}

.logo-section h1 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 10px;
}

.cover-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}

.cover-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cover-footer {
  margin-bottom: 40px;
}

/* Table of Contents */
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--bg-light);
  border-radius: 10px;
  border-left: 4px solid var(--primary-color);
  transition: all 0.3s ease;
}

.toc-item:hover {
  background: var(--primary-light);
  color: white;
  transform: translateX(-5px);
}

.toc-title {
  font-weight: 500;
}

.toc-page {
  background: var(--primary-color);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
}

/* Product Showcase */
.product-showcase {
  flex: 1;
}

.product-grid {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.product-item {
  background: var(--bg-light);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.product-item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.product-item h4 {
  color: var(--primary-color);
  margin-bottom: 10px;
  font-size: 16px;
}

/* Feature Rows */
.tech-features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-light);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.feature-row:hover {
  background: var(--primary-light);
  color: white;
  transform: translateX(-10px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.feature-text h4 {
  margin-bottom: 8px;
  font-size: 18px;
}

.feature-text p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* Mission Vision Cards */
.mission-vision {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.vision-card,
.mission-card {
  flex: 1;
  background: var(--bg-light);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
}

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

/* Introduction Section */
.intro-section {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 20px;
}

.intro-text {
  flex: 2;
}

.intro-image {
  flex: 1;
}

.intro-image img {
  width: 100%;
  border-radius: 15px;
}

.stats-mini {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.stat-mini {
  text-align: center;
  background: var(--bg-light);
  padding: 15px;
  border-radius: 10px;
  flex: 1;
}

.stat-mini strong {
  display: block;
  font-size: 24px;
  color: var(--primary-color);
  font-weight: 700;
}

/* Catalog Tools */
.catalog-tools {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.tool-btn {
  background: var(--bg-light);
  border: 2px solid var(--border-light);
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.tool-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

/* Download Options */
.download-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.download-card {
  background: var(--bg-white);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.download-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.download-icon {
  width: 100px;
  height: 100px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40px;
  margin: 0 auto 25px;
  box-shadow: 0 10px 30px var(--shadow-primary);
}

.download-card h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
}

.download-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 14px;
}

/* Email Modal */
/*.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--bg-white);
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1);
}

.modal-header {
  padding: 25px 30px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  color: var(--primary-color);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}*/

/*.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}


.modal-close:hover {
  background: var(--bg-light);
  color: var(--primary-color);
}

*/
/*.modal-body {
  padding: 25px 30px 30px;
}
*/
/* Contact Section in Catalog */
.contact-section {
  text-align: center;
  background: var(--gradient-primary);
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 14px;
}

.contact-item i {
  font-size: 18px;
}

.qr-section {
  margin-top: 40px;
}

.qr-code {
  width: 80px;
  height: 80px;
  background: white;
  color: var(--primary-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 15px;
}

/* Mobile Responsive for Catalog */
@media (max-width: 768px) {
  .catalog-preview {
    height: 300px;
  }

  .book-3d {
    width: 200px;
    height: 280px;
  }

  .flipbook-container {
    padding: 20px;
    min-height: 500px;
  }

  .page {
    width: 350px;
    height: 500px;
  }

  .page-content {
    padding: 25px;
  }

  .page-title {
    font-size: 22px;
  }

  .catalog-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .catalog-controls {
    justify-content: center;
  }

  .mission-vision {
    flex-direction: column;
  }

  .intro-section {
    flex-direction: column;
  }

  .stats-mini {
    flex-direction: column;
    gap: 10px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .download-options {
    grid-template-columns: 1fr;
    gap: 20px;
  }

/*  .modal-content {
    width: 95%;
    margin: 20px;
  }*/
}

/* ========== ENHANCED CATALOG ANIMATIONS ========== */

/* Page Numbers */
.page-number {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(40, 167, 69, 0.9);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* Page Shadows */
.page-shadow {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.3), transparent);
  width: 15px;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* Page Flip Animation */
@keyframes pageFlip {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02) rotateY(1deg);
  }
  100% {
    transform: scale(1);
  }
}

/* Enhanced 3D Book Animation */
@keyframes bookFloat {
  0%,
  100% {
    transform: rotateY(-5deg) rotateX(2deg) translateY(0px);
  }
  50% {
    transform: rotateY(5deg) rotateX(-2deg) translateY(-8px);
  }
}

.book-3d {
  animation: bookFloat 6s ease-in-out infinite;
}

.book-3d:hover {
  animation-play-state: paused;
  transform: rotateY(0deg) rotateX(0deg) translateY(-5px) scale(1.05);
}

/* Enhanced Cover Overlay */
.cover-overlay {
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.9) 0%,
    rgba(32, 201, 151, 0.9) 50%,
    rgba(40, 167, 69, 0.9) 100%
  );
  position: relative;
  overflow: hidden;
}

.cover-overlay::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 2px,
    rgba(255, 255, 255, 0.05) 4px
  );
  animation: shimmerCover 3s linear infinite;
}

@keyframes shimmerCover {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

/* Control Button Enhancements */
.control-btn {
  position: relative;
  overflow: hidden;
}

.control-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease;
}

.control-btn:hover::before {
  width: 100%;
  height: 100%;
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.control-btn:disabled:hover::before {
  width: 0;
  height: 0;
}

/* Tool Button Active State */
.tool-btn.active {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-primary);
}

/* Enhanced Page Content Styling */
.page-content {
  position: relative;
  background: linear-gradient(145deg, transparent, rgba(248, 249, 250, 0.5));
}

.page-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 167, 69, 0.3),
    transparent
  );
}

/* Product Grid Enhancements */
.product-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr;
}

.product-item {
  position: relative;
  overflow: hidden;
}

.product-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(40, 167, 69, 0.1) 0%,
    transparent 50%,
    rgba(32, 201, 151, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

/* Tech Features Enhancements */
.feature-row {
  position: relative;
  overflow: hidden;
}

.feature-row::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 167, 69, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.feature-row:hover::before {
  left: 100%;
}

/* Mission Vision Card Enhancements */
.vision-card,
.mission-card {
  position: relative;
  overflow: hidden;
}

.vision-card::after,
.mission-card::after {
  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.6s ease;
}

.vision-card:hover::after,
.mission-card:hover::after {
  left: 100%;
}

/* Contact Section Enhancements */
.contact-grid {
  position: relative;
}

.contact-item {
  position: relative;
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 15px rgba(255, 255, 255, 0.3));
}

/* QR Code Animation */
.qr-code {
  position: relative;
  overflow: hidden;
}

.qr-code::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 167, 69, 0.3),
    transparent
  );
  animation: qrScan 2s ease-in-out infinite;
}

@keyframes qrScan {
  0% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

/* Enhanced Responsive Design */
@media (max-width: 768px) {
  .flipbook-container {
    padding: 30px 20px;
    min-height: 500px;
  }

  .page {
    width: 300px;
    height: 420px;
  }

  .book-3d {
    width: 180px;
    height: 250px;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ========== PROJECT DETAILS PAGE STYLES ========== */

/* Project Hero */
.project-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.8) 0%,
    rgba(32, 201, 151, 0.7) 50%,
    rgba(40, 167, 69, 0.8) 100%
  );
  z-index: 2;
}

.project-hero .container {
  position: relative;
  z-index: 3;
}

/*.hero-content {
  color: white;
  max-width: 800px;
}*/

.project-badges {
  display: flex;
  gap: 10px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.badge-completed {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.project-title {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.project-subtitle {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  opacity: 0.95;
  line-height: 1.6;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.project-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  opacity: 0.9;
}

.meta-item i {
  font-size: 1.1rem;
}

/* Project Overview */
.project-overview {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.project-overview h2 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.overview-highlights {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.highlight-item {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--primary-color);
  transition: all var(--transition-normal);
}

.highlight-item:hover {
  transform: translateX(-5px);
  box-shadow: 0 8px 25px var(--shadow-light);
}

.highlight-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 15px var(--shadow-primary);
}

.highlight-content h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 18px;
  font-weight: 600;
}

.highlight-content p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Project Stats Card */
.project-stats-card {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  position: sticky;
  top: 100px;
}

.project-stats-card h3 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stats-list .stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal);
}

.stats-list .stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-light);
}

.stats-list .stat-icon {
  width: 45px;
  height: 45px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Project Gallery */
.project-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow-medium);
}

.gallery-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}


.image-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.thumbnail {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 3px solid transparent;
}

.thumbnail.active {
  border-color: var(--primary-color);
  box-shadow: 0 4px 15px var(--shadow-primary);
}

.thumbnail:hover {
  transform: scale(1.05);
}

.thumbnail img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.thumbnail-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 8px;
  font-size: 12px;
  text-align: center;
}

/* Technical Specifications */
.tech-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.tech-spec-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.tech-spec-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.spec-header {
  padding: 1.5rem;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.spec-header i {
  font-size: 24px;
}

.spec-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.spec-content {
  padding: 1.5rem;
}

.spec-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.spec-content li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  position: relative;
  padding-left: 20px;
}

.spec-content li:last-child {
  border-bottom: none;
}

.spec-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-color);
  font-weight: bold;
}

/* Project Timeline */
.project-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.project-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  transform: translateX(-50%);
  border-radius: 2px;
}

.project-timeline .timeline-item {
  position: relative;
  margin: 3rem 0;
  display: flex;
  align-items: center;
}

.project-timeline .timeline-item:nth-child(odd) {
  flex-direction: row;
}

.project-timeline .timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.project-timeline .timeline-marker {
  position: absolute;
  left: 50%;
  width: 70px;
  height: 70px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transform: translateX(-50%);
  box-shadow: 0 8px 25px var(--shadow-primary);
  z-index: 2;
}

.project-timeline .timeline-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: calc(50% - 50px);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  position: relative;
  transition: all var(--transition-normal);
}

.project-timeline .timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

.timeline-date {
  background: var(--primary-light);
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

.project-timeline .timeline-content h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 600;
}

.timeline-progress {
  margin-top: 1rem;
  height: 8px;
  background: var(--bg-light);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease;
}

/* Results Grid */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.result-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.result-card.environmental::before {
  background: linear-gradient(90deg, #28a745, #20c997);
}

.result-card.economic::before {
  background: linear-gradient(90deg, #007bff, #6f42c1);
}

.result-card.social::before {
  background: linear-gradient(90deg, #fd7e14, #ffc107);
}

.result-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 30px;
  margin: 0 auto 1.5rem;
  box-shadow: 0 8px 25px var(--shadow-primary);
}

.result-card.environmental .result-icon {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.result-card.economic .result-icon {
  background: linear-gradient(135deg, #007bff, #6f42c1);
}

.result-card.social .result-icon {
  background: linear-gradient(135deg, #fd7e14, #ffc107);
}

.result-card h3 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 20px;
  font-weight: 600;
}

.result-metrics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--radius-lg);
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
}

.metric-label {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Related Projects */
.related-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.related-project {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.related-project:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

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

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

.related-project:hover .project-image img {
  transform: scale(1.1);
}

.related-project .project-info {
  padding: 1.5rem;
}

.related-project h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 600;
}

.related-project p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-size: 14px;
  line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .project-title {
    font-size: 2rem;
  }

  .project-subtitle {
    font-size: 1.1rem;
  }

  .project-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .highlight-item {
    flex-direction: column;
    text-align: center;
  }

  .project-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-thumbnails {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    gap: 0.5rem;
  }

  .thumbnail {
    min-width: 120px;
  }

  .tech-specs-grid {
    grid-template-columns: 1fr;
  }

  .project-timeline::before {
    left: 20px;
  }

  .project-timeline .timeline-item {
    flex-direction: column !important;
    padding-left: 60px;
  }

  .project-timeline .timeline-marker {
    left: 20px !important;
    transform: translateX(-50%);
  }

  .project-timeline .timeline-content {
    width: 100% !important;
    margin: 0 !important;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .related-projects-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== PRODUCTS PAGE STYLES ========== */

/* Breadcrumb */
.breadcrumb-section {
  background: var(--bg-light);
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
}

.breadcrumb a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.breadcrumb a:hover {
  color: var(--primary-dark);
}

.breadcrumb .separator {
  color: var(--text-secondary);
  font-size: 12px;
}

.breadcrumb .current {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Product Details Grid */
.product-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

/* Product Images */
.product-images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-image-container {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: 0 12px 40px var(--shadow-medium);
}

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

.main-image-container:hover img {
  transform: scale(1.05);
}

.image-badges {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.image-zoom {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  cursor: pointer;
  transition: all var(--transition-normal);
  z-index: 2;
}

.image-zoom:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

.product-thumbnails {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 10px;
}

.product-thumbnails .thumbnail {
  min-width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.product-thumbnails .thumbnail.active {
  border-color: var(--primary-color);
  box-shadow: 0 4px 15px var(--shadow-primary);
}

.product-thumbnails .thumbnail:hover {
  transform: scale(1.1);
}

.product-thumbnails .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Product Info */
.product-info {
  padding: 2rem;
}

.product-category {
  color: var(--primary-light);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.product-title {
  color: var(--text-primary);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.product-rating .stars {
  display: flex;
  gap: 3px;
  color: #ffc107;
  font-size: 18px;
}

.rating-text {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.reviews-link {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.reviews-link:hover {
  text-decoration: underline;
}

.product-price {
  margin-bottom: 2rem;
}

.current-price {
  color: var(--primary-color);
  font-size: 3rem;
  font-weight: 900;
  margin-left: 1rem;
}

.original-price {
  color: var(--text-secondary);
  font-size: 1.5rem;
  text-decoration: line-through;
  margin-left: 1rem;
}

.discount-percentage {
  background: #dc3545;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-left: 1rem;
}

.savings {
  color: #28a745;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0.5rem;
}

.product-description {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.product-description p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 16px;
}

/* Product Features */
.product-features {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.product-features h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 600;
}

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

.features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.features-list li i {
  color: var(--primary-color);
  font-size: 16px;
}

/* Product Options */
.product-options {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.option-group {
  margin-bottom: 1.5rem;
}

.option-group label {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 16px;
}

.option-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.option-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow-primary);
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 150px;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-light);
  background: var(--bg-white);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: 18px;
  font-weight: 600;
}

.quantity-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.quantity-selector input {
  width: 60px;
  padding: 8px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

/* Product Actions */
.product-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.wishlist-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Product Meta */
.product-meta {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}

.meta-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.meta-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.meta-value {
  color: var(--text-primary);
  font-weight: 600;
}

.meta-value.in-stock {
  color: var(--success-color);
}

/* Product Guarantee */
.product-guarantee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.guarantee-item i {
  color: var(--primary-color);
  font-size: 16px;
}

/* Product Tabs */
.product-tabs {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.tabs-nav {
  display: flex;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}

.tab-btn {
  flex: 1;
  padding: 1.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
}

.tab-btn.active {
  color: var(--primary-color);
  background: var(--bg-white);
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
}

.tab-btn:hover {
  color: var(--primary-color);
}

.tabs-content {
  padding: 2rem;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Specifications */
.specifications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.spec-section h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 600;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.spec-table td:first-child {
  color: var(--text-secondary);
  font-weight: 500;
  width: 50%;
}

.spec-table td:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

/* Installation Guide */
.installation-guide {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.installation-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 15px var(--shadow-primary);
}

.step-content {
  flex: 1;
}

.step-content h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 18px;
  font-weight: 600;
}

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

.step-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 15px var(--shadow-light);
}

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

/* Reviews Section */
.reviews-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.reviews-summary {
  background: var(--bg-light);
  padding: 2rem;
  border-radius: var(--radius-lg);
}

.rating-overview {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.overall-rating {
  text-align: center;
  min-width: 150px;
}

.rating-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary-color);
  display: block;
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  color: #ffc107;
  font-size: 20px;
  margin: 0.5rem 0;
}

.rating-count {
  color: var(--text-secondary);
  font-size: 14px;
}

.rating-breakdown {
  flex: 1;
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.rating-bar span:first-child {
  width: 80px;
  color: var(--text-secondary);
}

.rating-bar .bar {
  flex: 1;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
}

.rating-bar .fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transition: width 1s ease;
}

.rating-bar span:last-child {
  width: 40px;
  text-align: left;
  color: var(--text-secondary);
}

/* Reviews List */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-item {
  background: var(--bg-white);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reviewer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.reviewer-details {
  flex: 1;
}

.reviewer-details h5 {
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 16px;
  font-weight: 600;
}

.review-date {
  color: var(--text-secondary);
  font-size: 12px;
}

.review-rating {
  display: flex;
  gap: 2px;
  color: #ffc107;
}

.review-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Q&A Section */
.qa-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.qa-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.qa-item:hover {
  box-shadow: 0 4px 15px var(--shadow-light);
}

.question {
  padding: 1.5rem;
  background: var(--bg-light);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-normal);
}

.question:hover {
  background: var(--primary-light);
  color: white;
}

.question h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.question i {
  transition: transform var(--transition-normal);
}

.qa-item.active .question i {
  transform: rotate(180deg);
}

.answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  background: var(--bg-white);
  transition: all var(--transition-normal);
}

.qa-item.active .answer {
  padding: 1.5rem;
  max-height: 200px;
}

.answer p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========== GALLERY PAGE STYLES ========== */

/* Gallery Filters */
.gallery-filters {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.filters-header h3 {
  color: var(--primary-color);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.gallery-filters .view-controls {
  display: flex;
  gap: 8px;
  background: var(--bg-light);
  padding: 6px;
  border-radius: var(--radius-lg);
}

.gallery-filters .view-btn {
  padding: 10px 15px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery-filters .view-btn.active,
.gallery-filters .view-btn:hover {
  background: var(--primary-color);
  color: white;
}

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

.filter-btn {
  padding: 10px 20px;
  border: 2px solid var(--border-light);
  background: var(--bg-white);
  color: var(--text-secondary);
  border-radius: 25px;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: 14px;
  font-weight: 500;
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

/* Featured Media Grid */
.featured-media-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  height: 600px;
  margin-top: 2rem;
}

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

.featured-item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.featured-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.media-container {
  position: relative;
  width: 100%;
  height: 100%;
}

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

.featured-item:hover .media-container img {
  transform: scale(1.1);
}

.media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(40, 167, 69, 0.8) 0%,
    rgba(32, 201, 151, 0.8) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  opacity: 0;
  transition: opacity var(--transition-normal);
  color: white;
}

.featured-item:hover .media-overlay {
  opacity: 1;
}

.play-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 30px;
  margin: 0 auto;
  transition: all var(--transition-normal);
}

.play-button.small {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.featured-item:hover .play-button {
  transform: scale(1.1);
}

.media-info {
  text-align: center;
}

.media-info h3,
.media-info h4,
.media-info h5 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.media-info p {
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.media-duration {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.media-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.action-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: white;
  color: var(--primary-color);
  transform: scale(1.1);
}

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

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--bg-white);
  box-shadow: 0 4px 15px var(--shadow-light);
}

.gallery-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

.gallery-image {
  position: relative;
  overflow: hidden;
}

.gallery-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image img {
  transform: scale(1.1);
}

.video-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(40, 167, 69, 0.9) 0%,
    rgba(32, 201, 151, 0.9) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity var(--transition-normal);
  color: white;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.gallery-action-btn {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-action-btn:hover {
  background: white;
  color: var(--primary-color);
  transform: scale(1.1);
}

.gallery-info {
  text-align: center;
}

.gallery-info h4 {
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 600;
}

.gallery-info p {
  opacity: 0.9;
  font-size: 14px;
  margin: 0;
}

/* Video Spotlight */
.video-spotlight {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.main-video {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow-medium);
}

.video-container {
  position: relative;
  height: 400px;
}

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

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(40, 167, 69, 0.6) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: white;
  text-align: center;
}

.play-button.large {
  width: 100px;
  height: 100px;
  font-size: 40px;
  margin-bottom: 2rem;
}

.video-info h3 {
  font-size: 24px;
  margin-bottom: 1rem;
  font-weight: 700;
}

.video-info p {
  opacity: 0.9;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 500px;
}

.video-meta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: 14px;
  opacity: 0.8;
}

/* Video Playlist */
.video-playlist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.playlist-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.playlist-item.active {
  border-color: var(--primary-color);
  box-shadow: 0 4px 15px var(--shadow-primary);
}

.playlist-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-light);
}

.playlist-item img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.playlist-info {
  flex: 1;
}

.playlist-info h5 {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.playlist-info .duration {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Fullscreen Modal */
/*.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.fullscreen-modal.active {
  opacity: 1;
  visibility: visible;
}*/

/*.modal-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 2;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}*/

/*.modal-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.modal-content img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-info {
  text-align: center;
  color: white;
  max-width: 600px;
}

.modal-info h3 {
  font-size: 24px;
  margin-bottom: 1rem;
  font-weight: 600;
}

.modal-info p {
  opacity: 0.9;
  line-height: 1.6;
}

.modal-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  transform: translateY(-50%);
  pointer-events: none;
}

.modal-nav-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  pointer-events: all;
}

.modal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}*/

/* Mobile Responsive */
@media (max-width: 768px) {
  .product-details-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

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

  .current-price {
    font-size: 2rem;
  }

  .specifications-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .installation-step {
    flex-direction: column;
    text-align: center;
  }

  .rating-overview {
    flex-direction: column;
    gap: 1rem;
  }

  .featured-media-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .large-item {
    grid-row: auto;
  }

  .video-spotlight {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .category-filters {
    justify-content: center;
  }
/*
  .modal-content {
    padding: 2rem 1rem;
  }

  .modal-navigation {
    padding: 0 15px;
  }

  .modal-nav-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }*/
}

/* ========== FAQ SYSTEM ========== */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px var(--shadow-light);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.faq-item:hover {
  box-shadow: 0 8px 25px var(--shadow-medium);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-white);
  transition: all var(--transition-normal);
}

.faq-question:hover {
  background: var(--bg-light);
}

.faq-question h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
}

.faq-question i {
  color: var(--primary-color);
  transition: transform var(--transition-normal);
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-normal);
  background: var(--bg-light);
}

.faq-item.active .faq-answer {
  padding: 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ========== TESTIMONIALS SYSTEM ========== */
.testimonials-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-card {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.6s ease;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

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

.testimonial-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: italic;
  position: relative;
}

.testimonial-content p::before {
  content: '"';
  font-size: 3rem;
  color: var(--primary-color);
  position: absolute;
  top: -10px;
  left: -20px;
  font-family: serif;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-light);
}

.author-info h5 {
  margin: 0 0 5px 0;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
}

.author-info span {
  color: var(--text-secondary);
  font-size: 14px;
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.nav-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: var(--border-color);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.nav-btn.active {
  background: var(--primary-color);
  transform: scale(1.2);
}

.nav-btn:hover {
  background: var(--primary-light);
}

/* ========== CONTACT FORM ENHANCEMENTS ========== */
.contact-form-wrapper {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact-card {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px var(--shadow-medium);
}

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

.contact-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: 600;
}

.contact-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.contact-card a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

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

/* ========== SIDEBAR COMPONENTS ========== */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar-card {
  background: var(--bg-white);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.sidebar-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-normal);
}

.contact-method:hover {
  background: var(--primary-color);
  color: white;
  transform: translateX(-5px);
}

.contact-method i {
  width: 20px;
  text-align: center;
}

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

.download-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-normal);
  font-size: 14px;
}

.download-link:hover {
  background: var(--primary-light);
  color: white;
  transform: translateX(-5px);
}

.social-links {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.social-link {
  width: 40px;
  height: 40px;
  background: var(--bg-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.social-link:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-3px);
}

/* ========== MAP CONTAINER ========== */
.map-container {
  margin-top: 2rem;
}

.map-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
}

.map-placeholder iframe {
  width: 100%;
  height: 400px;
  border: none;
}

.map-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.location-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px var(--shadow-light);
  min-width: 250px;
}

.location-card h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 16px;
  font-weight: 600;
}

.location-card p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-actions {
  display: flex;
  gap: 0.5rem;
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .contact-form-wrapper {
    padding: 1.5rem;
  }

  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-actions {
    flex-direction: column;
  }

  .testimonials-carousel {
    padding: 0 1rem;
  }

  .map-overlay {
    position: static;
    margin-top: 1rem;
  }

  .location-card {
    min-width: auto;
  }
}

/* ========== CATEGORIES PAGE STYLES ========== */

/* Filters Container */
.filters-container {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  margin-bottom: 2rem;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
}

.filters-header h3 {
  color: var(--primary-color);
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.filters-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.filter-reset-btn {
  background: var(--bg-light);
  color: var(--text-secondary);
  border: 2px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: 14px;
  font-weight: 500;
}

.filter-reset-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.results-count {
  background: var(--gradient-primary);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
}

/* Filters Grid */
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.filter-group {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.filter-group h4 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group h4::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* Filter Options */
.filter-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  font-size: 14px;
}

.filter-option:hover {
  background: var(--bg-white);
}

.filter-option input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-white);
  position: relative;
  transition: all var(--transition-normal);
  flex-shrink: 0;
}

.filter-option input[type="checkbox"]:checked + .checkmark {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.filter-option input[type="checkbox"]:checked + .checkmark::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.filter-option .count {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  background: var(--bg-white);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Price Range Filter */
.price-range {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.price-inputs input {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: center;
}

.price-inputs span {
  color: var(--text-secondary);
  font-weight: 500;
}

.price-range-slider input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  outline: none;
  -webkit-appearance: none;
}

.price-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shadow-primary);
}

.price-range-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px var(--shadow-primary);
}

/* Rating Filters */
.rating-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rating-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  font-size: 14px;
}

.rating-option:hover {
  background: var(--bg-white);
}

.rating-option input[type="checkbox"] {
  display: none;
}

.rating-option .stars {
  display: flex;
  gap: 2px;
  color: #ffc107;
}

.rating-option .count {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 12px;
  background: var(--bg-white);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Products Header */
.products-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.products-info h2 {
  color: var(--primary-color);
  margin: 0 0 0.5rem 0;
  font-size: 24px;
  font-weight: 600;
}

.products-info p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
}

.products-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sort-dropdown select {
  padding: 8px 16px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.sort-dropdown select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--shadow-primary);
}

.view-controls {
  display: flex;
  gap: 5px;
  background: var(--bg-light);
  padding: 4px;
  border-radius: var(--radius-md);
}

.view-btn {
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.view-btn.active,
.view-btn:hover {
  background: var(--primary-color);
  color: white;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.products-list .product-card {
  display: flex;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 15px var(--shadow-light);
  border: 1px solid var(--border-light);
}

.products-list .product-image {
  width: 200px;
  flex-shrink: 0;
}

.products-list .product-info {
  flex: 1;
  padding: 1.5rem;
}

/* Product Card */
.product-card {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  position: relative;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

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

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

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

.product-badges {
  position: absolute;
  top: 15px;
  left: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}

.badge-new {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.badge-bestseller {
  background: linear-gradient(135deg, #ffc107, #fd7e14);
  color: #212529;
}

.badge-premium {
  background: linear-gradient(135deg, #6f42c1, #e83e8c);
  color: white;
}

.badge-professional {
  background: linear-gradient(135deg, #343a40, #6c757d);
  color: white;
}

.badge-eco {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
}

.badge-smart {
  background: linear-gradient(135deg, #007bff, #6f42c1);
  color: white;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(40, 167, 69, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.overlay-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: var(--primary-color);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 15px var(--shadow-medium);
}

/* Product Info */
.product-info {
  padding: 1.5rem;
}

.product-category {
  color: var(--primary-light);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.product-title {
  margin-bottom: 1rem;
}

.product-title a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  transition: color var(--transition-normal);
}

.product-title a:hover {
  color: var(--primary-color);
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.feature {
  background: var(--bg-light);
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.product-rating .stars {
  display: flex;
  gap: 2px;
  color: #ffc107;
}

.rating-text {
  color: var(--text-secondary);
  font-size: 12px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.current-price {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
}

.original-price {
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: line-through;
}

.discount {
  background: #dc3545;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
}

.product-actions .btn {
  flex: 1;
  font-size: 14px;
  padding: 10px 15px;
}

/* Load More Section */
.load-more-section {
  text-align: center;
  margin-top: 3rem;
}

.load-info {
  color: var(--text-secondary);
  margin-top: 1rem;
  font-size: 14px;
}

/* Featured Categories */
.featured-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.featured-category {
  background: var(--bg-white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: 0 8px 25px var(--shadow-light);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.featured-category:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--shadow-medium);
}

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

.featured-category h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
  font-size: 20px;
  font-weight: 600;
}

.featured-category p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 14px;
}

.category-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 1.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .filters-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .filters-controls {
    justify-content: space-between;
  }

  .products-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .products-controls {
    justify-content: space-between;
  }

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

  .price-inputs {
    flex-direction: column;
    align-items: stretch;
  }

  .featured-categories-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .product-actions {
    flex-direction: column;
  }

  .overlay-actions {
    flex-wrap: wrap;
  }
}

/* ========== 3D VIDEO CARDS ========== */
.cards-3d-video-section {
  padding: 80px 0;
  background: var(--gradient-bg);
  position: relative;
  overflow: hidden;
}

.cards-3d-video-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(40, 167, 69, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(32, 201, 151, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.cards-3d-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  padding: 40px 20px;
  perspective: 1000px;
}

.card-3d-video {
  position: relative;
  height: 450px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-3d-video:hover {
  transform: translateY(-20px) rotateX(10deg) rotateY(5deg);
}

.card-3d-video:nth-child(even):hover {
  transform: translateY(-20px) rotateX(10deg) rotateY(-5deg);
}

.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(40, 167, 69, 0.15);
  transition: all 0.4s ease;
}

.card-3d-video:hover .card-3d-inner {
  box-shadow: 0 35px 80px rgba(40, 167, 69, 0.25);
}

.card-thumbnail {
  position: relative;
  height: 70%;
  overflow: hidden;
}

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

.card-3d-video:hover .card-thumbnail img {
  transform: scale(1.1);
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--primary-color);
  transition: all 0.3s ease;
  opacity: 0.8;
}

.card-3d-video:hover .play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(255, 255, 255, 1);
}

.card-content {
  padding: 20px;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.card-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 12px;
}

.card-stats {
  display: flex;
  gap: 15px;
  align-items: center;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card-stats i {
  font-size: 0.9rem;
  color: var(--primary-color);
}

/* Video Modal - Reel Style */
/*.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.video-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn 0.3s ease;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
*/
/*.modal-content-reel {
  position: relative;
  width: 90%;
  max-width: 500px;
  height: 85vh;
  background: var(--bg-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  animation: reelSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
}
*/
/*.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.reel-container {
  display: flex;
  width: 100%;
  height: 100%;
}

.reel-container video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}

.reel-sidebar {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 250px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(15px);
  padding: 20px;
  border-radius: var(--radius-lg);
  color: white;
  transform: translateX(100%);
  transition: transform 0.4s ease;
}

.video-modal.active .reel-sidebar {
  transform: translateX(0);
}

.reel-info h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
}

.reel-info p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 20px;
}

.reel-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-5px);
}

.action-btn i {
  font-size: 1.1rem;
}*/

/* Animations */
/*@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes reelSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}*/

/* Responsive Design */
@media (max-width: 768px) {
  .cards-3d-container {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px 10px;
  }

  .card-3d-video {
    height: 400px;
  }

/*  .modal-content-reel {
    width: 95%;
    height: 90vh;
  }*/

  .reel-sidebar {
    position: static;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    margin-top: auto;
    transform: translateY(100%);
  }

/*  .video-modal.active .reel-sidebar
    {
    transform: translateY(0);
  }*/

  .reel-container {
    flex-direction: column;
  }

  .reel-container video {
    flex: 1;
    height: 70%;
  }
}

/* Additional Enhanced Effects */
.card-3d-video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(40, 167, 69, 0.1),
    rgba(32, 201, 151, 0.1)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: var(--radius-xl);
  z-index: 1;
}

.card-3d-video:hover::before {
  opacity: 1;
}

.card-3d-inner {
  position: relative;
  z-index: 2;
}

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

.card-3d-video:nth-child(1) {
  animation: float 6s ease-in-out infinite;
  animation-delay: 0s;
}

.card-3d-video:nth-child(2) {
  animation: float 6s ease-in-out infinite;
  animation-delay: 1.5s;
}

.card-3d-video:nth-child(3) {
  animation: float 6s ease-in-out infinite;
  animation-delay: 3s;
}

.card-3d-video:nth-child(4) {
  animation: float 6s ease-in-out infinite;
  animation-delay: 4.5s;
}

/* Action Button Liked State */
.action-btn.liked {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
}

.action-btn.liked i {
  color: #ff6b6b;
}

/* Video Progress Indicator */
.video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.video-progress-bar {
  height: 100%;
  background: var(--primary-color);
  width: 0%;
  transition: width 0.1s ease;
}

/* Pulse Effect for Play Button */
.play-overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(40, 167, 69, 0.3);
  animation: pulse 2s ease-in-out infinite;
  z-index: -1;
}

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



      /* ========== COMPACT ISO CERTIFICATIONS SECTION ========== */
      .iso-certifications-section {
        padding: 80px 0;
        background: linear-gradient(
          135deg,
          #0a0f1c 0%,
          #1a1f2e 50%,
          #0a0f1c 100%
        );
        position: relative;
        overflow: hidden;
      }

      .iso-certifications-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          radial-gradient(
            circle at 20% 30%,
            rgba(34, 139, 34, 0.15) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 80% 70%,
            rgba(40, 167, 69, 0.18) 0%,
            transparent 60%
          ),
          radial-gradient(
            circle at 50% 20%,
            rgba(32, 201, 151, 0.12) 0%,
            transparent 70%
          ),
          radial-gradient(
            circle at 30% 80%,
            rgba(0, 128, 0, 0.08) 0%,
            transparent 65%
          ),
          linear-gradient(
            135deg,
            rgba(34, 139, 34, 0.05) 0%,
            rgba(40, 167, 69, 0.08) 50%,
            rgba(32, 201, 151, 0.06) 100%
          );
        pointer-events: none;
        animation: green-shift 20s ease-in-out infinite;
      }

      .certificates-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        padding: 0 20px;
        max-width: 1000px;
        margin: 0 auto;
      }

      /* ========== CERTIFICATE CARDS BASE ========== */
      .cert-card {
        position: relative;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px 25px;
        height: 320px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .cert-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      }

      /* ========== CRYSTAL CARD ========== */
      .crystal-card {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 215, 0, 0.05),
          rgba(255, 255, 255, 0.1)
        );
        border: 1px solid rgba(255, 215, 0, 0.3);
      }

      .crystal-card:hover {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15),
          rgba(255, 215, 0, 0.1),
          rgba(255, 255, 255, 0.15)
        );
        box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
      }

      .crystal-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }

      .crystal-facets {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .facet {
        position: absolute;
        background: linear-gradient(
          45deg,
          rgba(255, 215, 0, 0.1),
          rgba(255, 255, 255, 0.05)
        );
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }

      .facet-1 {
        top: 10%;
        left: 10%;
        width: 30%;
        height: 30%;
        animation: crystal-rotate 8s ease-in-out infinite;
      }

      .facet-2 {
        top: 40%;
        right: 15%;
        width: 25%;
        height: 25%;
        animation: crystal-rotate 10s ease-in-out infinite reverse;
      }

      .facet-3 {
        bottom: 20%;
        left: 20%;
        width: 20%;
        height: 20%;
        animation: crystal-rotate 12s ease-in-out infinite;
      }

      .light-beam {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
          from 0deg,
          transparent,
          rgba(255, 215, 0, 0.2),
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        animation: beam-rotation 6s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .crystal-card:hover .light-beam {
        opacity: 1;
      }

      /* ========== NEON CARD ========== */
      .neon-card {
        background: linear-gradient(
          135deg,
          rgba(0, 255, 127, 0.05),
          rgba(34, 139, 34, 0.08),
          rgba(0, 255, 127, 0.05)
        );
        border: 1px solid rgba(0, 255, 127, 0.3);
      }

      .neon-card:hover {
        background: linear-gradient(
          135deg,
          rgba(0, 255, 127, 0.1),
          rgba(34, 139, 34, 0.12),
          rgba(0, 255, 127, 0.1)
        );
        box-shadow: 0 20px 40px rgba(0, 255, 127, 0.2);
      }

      .neon-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .neon-grid {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
          linear-gradient(rgba(0, 255, 127, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 255, 127, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        animation: grid-glow 4s ease-in-out infinite;
      }

      .neon-pulse {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: radial-gradient(
          circle,
          rgba(0, 255, 127, 0.3),
          rgba(0, 255, 127, 0.1),
          transparent
        );
        border-radius: 50%;
        animation: neon-pulse 3s ease-in-out infinite;
      }

      .neon-border {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent;
        border-radius: 20px;
        background: linear-gradient(
            45deg,
            rgba(0, 255, 127, 0.5),
            transparent,
            rgba(0, 255, 127, 0.5)
          )
          border-box;
        mask:
          linear-gradient(#fff 0 0) padding-box,
          linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: border-flow 4s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .neon-card:hover .neon-border {
        opacity: 1;
      }

      /* ========== GEOMETRIC CARD ========== */
      .geometric-card {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.05),
          rgba(75, 0, 130, 0.08),
          rgba(138, 43, 226, 0.05)
        );
        border: 1px solid rgba(138, 43, 226, 0.3);
      }

      .geometric-card:hover {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.1),
          rgba(75, 0, 130, 0.12),
          rgba(138, 43, 226, 0.1)
        );
        box-shadow: 0 20px 40px rgba(138, 43, 226, 0.2);
      }

      .geometric-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .geo-shape {
        position: absolute;
        animation: geo-float 6s ease-in-out infinite;
      }

      .triangle-1 {
        top: 15%;
        left: 15%;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 25px solid rgba(138, 43, 226, 0.2);
        animation-delay: 0s;
      }

      .triangle-2 {
        top: 60%;
        right: 20%;
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 20px solid rgba(147, 0, 211, 0.2);
        animation-delay: 2s;
      }

      .circle-1 {
        bottom: 25%;
        left: 20%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: rgba(75, 0, 130, 0.3);
        animation-delay: 4s;
      }

      .square-1 {
        top: 40%;
        right: 15%;
        width: 15px;
        height: 15px;
        background: rgba(138, 43, 226, 0.2);
        transform: rotate(45deg);
        animation-delay: 1s;
      }

      .geometric-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .pattern-line {
        position: absolute;
        background: linear-gradient(
          45deg,
          rgba(138, 43, 226, 0.2),
          transparent
        );
        animation: line-draw 4s ease-in-out infinite;
      }

      .line-1 {
        top: 30%;
        left: 0;
        width: 100%;
        height: 1px;
        animation-delay: 0s;
      }

      .line-2 {
        top: 0;
        left: 30%;
        width: 1px;
        height: 100%;
        animation-delay: 1s;
      }

      .line-3 {
        top: 70%;
        left: 0;
        width: 100%;
        height: 1px;
        animation-delay: 2s;
      }

      /* ========== CARD CONTENT ========== */
      .cert-icon {
        position: relative;
        z-index: 2;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15),
          rgba(255, 255, 255, 0.05)
        );
        backdrop-filter: blur(15px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      .icon-stack {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-overlay {
        position: absolute;
        font-size: 0.9rem;
        top: -8px;
        right: -8px;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.7)
        );
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: icon-pulse 2s ease-in-out infinite;
      }

      .crystal-card .cert-icon {
        color: #32c997;
        border-color: rgba(50, 201, 151, 0.5);
        box-shadow: 0 0 25px rgba(50, 201, 151, 0.4);
        background: linear-gradient(
          135deg,
          rgba(50, 201, 151, 0.2),
          rgba(40, 167, 69, 0.1)
        );
      }

      .neon-card .cert-icon {
        color: #28a745;
        border-color: rgba(40, 167, 69, 0.5);
        box-shadow: 0 0 25px rgba(40, 167, 69, 0.4);
        background: linear-gradient(
          135deg,
          rgba(40, 167, 69, 0.2),
          rgba(34, 139, 34, 0.1)
        );
      }

      .geometric-card .cert-icon {
        color: #20c997;
        border-color: rgba(32, 201, 151, 0.5);
        box-shadow: 0 0 25px rgba(32, 201, 151, 0.4);
        background: linear-gradient(
          135deg,
          rgba(32, 201, 151, 0.2),
          rgba(0, 128, 0, 0.1)
        );
      }

      .cert-card:hover .cert-icon {
        transform: scale(1.1);
      }

      .cert-info {
        position: relative;
        z-index: 2;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .cert-number {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 8px;
        padding: 6px 12px;
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .crystal-card .cert-number {
        color: #32c997;
        background: rgba(50, 201, 151, 0.15);
        border-color: rgba(50, 201, 151, 0.4);
      }

      .neon-card .cert-number {
        color: #28a745;
        background: rgba(40, 167, 69, 0.15);
        border-color: rgba(40, 167, 69, 0.4);
      }

      .geometric-card .cert-number {
        color: #20c997;
        background: rgba(32, 201, 151, 0.15);
        border-color: rgba(32, 201, 151, 0.4);
      }

      .cert-name {
        font-size: 1.3rem;
        font-weight: 700;
        color: white;
        margin-bottom: 10px;
        line-height: 1.2;
      }

      .cert-desc {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.4;
        margin-bottom: 20px;
      }

      .cert-status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #28a745;
        animation: status-blink 2s ease-in-out infinite;
      }

      .cert-metrics {
        margin-top: 15px;
      }

      .metric {
        text-align: center;
      }

      .metric-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        color: #00ff7f;
        line-height: 1;
      }

      .metric-label {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 4px;
      }

      .safety-score {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
      }

      .score-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 3px solid rgba(138, 43, 226, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        background: rgba(138, 43, 226, 0.1);
      }

      .score {
        font-size: 0.9rem;
        font-weight: 800;
        color: #da70d6;
      }

      .score-label {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
      }

      /* ========== DECORATIVE ELEMENTS ========== */
      .cert-sparkles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }

      .sparkle {
        position: absolute;
        font-size: 1.2rem;
        color: rgba(255, 215, 0, 0.6);
        animation: sparkle-twinkle 3s ease-in-out infinite;
      }

      .sparkle-1 {
        top: 20%;
        right: 20%;
        animation-delay: 0s;
      }

      .sparkle-2 {
        bottom: 30%;
        left: 15%;
        animation-delay: 1s;
      }

      .sparkle-3 {
        top: 60%;
        right: 15%;
        animation-delay: 2s;
      }

      /* ========== FLOATING BADGES ========== */
      /* ========== SPECIALIZED FLOATING ICONS ========== */
      .eco-icons {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }

      .eco-icon-1,
      .eco-icon-2,
      .eco-icon-3,
      .eco-icon-4 {
        position: absolute;
        font-size: 1rem;
        color: rgba(0, 255, 127, 0.4);
        animation: eco-float 6s ease-in-out infinite;
      }

      .eco-icon-1 {
        top: 15%;
        left: 12%;
        animation-delay: 0s;
      }

      .eco-icon-2 {
        top: 25%;
        right: 15%;
        animation-delay: 1.5s;
      }

      .eco-icon-3 {
        bottom: 30%;
        left: 18%;
        animation-delay: 3s;
      }

      .eco-icon-4 {
        bottom: 20%;
        right: 12%;
        animation-delay: 4.5s;
      }

      .safety-icons {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }

      .safety-icon-1,
      .safety-icon-2,
      .safety-icon-3 {
        position: absolute;
        font-size: 1rem;
        color: rgba(138, 43, 226, 0.4);
        animation: safety-float 7s ease-in-out infinite;
      }

      .safety-icon-1 {
        top: 18%;
        right: 18%;
        animation-delay: 0s;
      }

      .safety-icon-2 {
        bottom: 35%;
        left: 15%;
        animation-delay: 2.3s;
      }

      .safety-icon-3 {
        top: 45%;
        right: 12%;
        animation-delay: 4.6s;
      }

      .floating-badges {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
      }

      .floating-badge {
        position: absolute;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          rgba(40, 167, 69, 0.2),
          rgba(34, 139, 34, 0.15)
        );
        backdrop-filter: blur(15px);
        border: 2px solid rgba(40, 167, 69, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: rgba(40, 167, 69, 0.8);
        animation: enhanced-float 10s ease-in-out infinite;
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
      }

      .badge-1 {
        top: 12%;
        left: 8%;
        animation-delay: 0s;
      }

      .badge-2 {
        top: 55%;
        right: 6%;
        animation-delay: 3.3s;
      }

      .badge-3 {
        bottom: 15%;
        left: 12%;
        animation-delay: 6.6s;
      }

      /* Add more floating icons around the section */
      .floating-badges::after {
        content: "";
        position: absolute;
        top: 35%;
        right: 25%;
        width: 8px;
        height: 8px;
        background: radial-gradient(
          circle,
          rgba(40, 167, 69, 0.8),
          rgba(32, 201, 151, 0.4)
        );
        border-radius: 50%;
        animation: particle-drift 8s ease-in-out infinite;
      }

      .floating-badges::before {
        content: "";
        position: absolute;
        bottom: 40%;
        right: 35%;
        width: 6px;
        height: 6px;
        background: radial-gradient(
          circle,
          rgba(34, 139, 34, 0.8),
          rgba(0, 128, 0, 0.4)
        );
        border-radius: 50%;
        animation: particle-drift 12s ease-in-out infinite reverse;
      }

      /* ========== ANIMATIONS ========== */
      @keyframes green-shift {
        0%,
        100% {
          background:
            radial-gradient(
              circle at 20% 30%,
              rgba(34, 139, 34, 0.15) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 80% 70%,
              rgba(40, 167, 69, 0.18) 0%,
              transparent 60%
            ),
            radial-gradient(
              circle at 50% 20%,
              rgba(32, 201, 151, 0.12) 0%,
              transparent 70%
            ),
            radial-gradient(
              circle at 30% 80%,
              rgba(0, 128, 0, 0.08) 0%,
              transparent 65%
            ),
            linear-gradient(
              135deg,
              rgba(34, 139, 34, 0.05) 0%,
              rgba(40, 167, 69, 0.08) 50%,
              rgba(32, 201, 151, 0.06) 100%
            );
        }
        25% {
          background:
            radial-gradient(
              circle at 70% 20%,
              rgba(34, 139, 34, 0.18) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 30% 80%,
              rgba(40, 167, 69, 0.2) 0%,
              transparent 60%
            ),
            radial-gradient(
              circle at 80% 50%,
              rgba(32, 201, 151, 0.15) 0%,
              transparent 70%
            ),
            radial-gradient(
              circle at 20% 60%,
              rgba(0, 128, 0, 0.1) 0%,
              transparent 65%
            ),
            linear-gradient(
              225deg,
              rgba(34, 139, 34, 0.07) 0%,
              rgba(40, 167, 69, 0.1) 50%,
              rgba(32, 201, 151, 0.08) 100%
            );
        }
        50% {
          background:
            radial-gradient(
              circle at 50% 70%,
              rgba(34, 139, 34, 0.16) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 70% 30%,
              rgba(40, 167, 69, 0.22) 0%,
              transparent 60%
            ),
            radial-gradient(
              circle at 30% 40%,
              rgba(32, 201, 151, 0.14) 0%,
              transparent 70%
            ),
            radial-gradient(
              circle at 80% 20%,
              rgba(0, 128, 0, 0.09) 0%,
              transparent 65%
            ),
            linear-gradient(
              315deg,
              rgba(34, 139, 34, 0.06) 0%,
              rgba(40, 167, 69, 0.09) 50%,
              rgba(32, 201, 151, 0.07) 100%
            );
        }
        75% {
          background:
            radial-gradient(
              circle at 30% 40%,
              rgba(34, 139, 34, 0.17) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 60% 80%,
              rgba(40, 167, 69, 0.19) 0%,
              transparent 60%
            ),
            radial-gradient(
              circle at 70% 30%,
              rgba(32, 201, 151, 0.13) 0%,
              transparent 70%
            ),
            radial-gradient(
              circle at 40% 70%,
              rgba(0, 128, 0, 0.11) 0%,
              transparent 65%
            ),
            linear-gradient(
              45deg,
              rgba(34, 139, 34, 0.08) 0%,
              rgba(40, 167, 69, 0.11) 50%,
              rgba(32, 201, 151, 0.09) 100%
            );
        }
      }

      @keyframes icon-pulse {
        0%,
        100% {
          transform: scale(1) rotate(0deg);
          opacity: 0.8;
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.7)
          );
        }
        50% {
          transform: scale(1.2) rotate(180deg);
          opacity: 1;
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 1),
            rgba(255, 255, 255, 0.9)
          );
        }
      }

      @keyframes eco-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.4;
          color: rgba(0, 255, 127, 0.4);
        }
        33% {
          transform: translateY(-12px) rotate(10deg) scale(1.1);
          opacity: 0.8;
          color: rgba(34, 139, 34, 0.7);
        }
        66% {
          transform: translateY(-6px) rotate(-5deg) scale(0.9);
          opacity: 0.6;
          color: rgba(40, 167, 69, 0.6);
        }
      }

      @keyframes safety-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.4;
          color: rgba(138, 43, 226, 0.4);
        }
        50% {
          transform: translateY(-15px) rotate(15deg) scale(1.2);
          opacity: 0.9;
          color: rgba(75, 0, 130, 0.7);
        }
      }

      @keyframes enhanced-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.8;
          box-shadow: 0 8px 25px rgba(40, 167, 69, 0.2);
        }
        25% {
          transform: translateY(-8px) rotate(5deg) scale(1.05);
          opacity: 0.9;
          box-shadow: 0 12px 35px rgba(40, 167, 69, 0.3);
        }
        50% {
          transform: translateY(-15px) rotate(-3deg) scale(1.1);
          opacity: 1;
          box-shadow: 0 15px 40px rgba(34, 139, 34, 0.4);
        }
        75% {
          transform: translateY(-10px) rotate(8deg) scale(1.08);
          opacity: 0.95;
          box-shadow: 0 10px 30px rgba(32, 201, 151, 0.3);
        }
      }

      @keyframes particle-drift {
        0%,
        100% {
          transform: translateX(0px) translateY(0px) scale(1);
          opacity: 0.6;
        }
        25% {
          transform: translateX(15px) translateY(-10px) scale(1.2);
          opacity: 0.8;
        }
        50% {
          transform: translateX(25px) translateY(-20px) scale(0.8);
          opacity: 1;
        }
        75% {
          transform: translateX(10px) translateY(-15px) scale(1.1);
          opacity: 0.7;
        }
      }

      @keyframes crystal-rotate {
        0%,
        100% {
          transform: rotate(0deg) scale(1);
          opacity: 0.3;
        }
        50% {
          transform: rotate(180deg) scale(1.1);
          opacity: 0.6;
        }
      }

      @keyframes beam-rotation {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes grid-glow {
        0%,
        100% {
          opacity: 0.1;
        }
        50% {
          opacity: 0.3;
        }
      }

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

      @keyframes border-flow {
        0% {
          background-position: 0% 0%;
        }
        100% {
          background-position: 100% 100%;
        }
      }

      @keyframes geo-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.4;
        }
        50% {
          transform: translateY(-10px) rotate(5deg);
          opacity: 0.8;
        }
      }

      @keyframes line-draw {
        0%,
        100% {
          opacity: 0.2;
          transform: scaleX(0);
        }
        50% {
          opacity: 0.6;
          transform: scaleX(1);
        }
      }

      @keyframes sparkle-twinkle {
        0%,
        100% {
          opacity: 0.6;
          transform: scale(1) rotate(0deg);
        }
        50% {
          opacity: 1;
          transform: scale(1.2) rotate(180deg);
        }
      }

      @keyframes status-blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }

      @keyframes float-badge {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.6;
        }
        50% {
          transform: translateY(-15px) rotate(10deg);
          opacity: 1;
        }
      }

      /* ========== RESPONSIVE DESIGN ========== */
      @media (max-width: 768px) {
        .iso-certifications-section {
          padding: 60px 0;
        }

        .certificates-grid {
          grid-template-columns: 1fr;
          gap: 25px;
          padding: 0 15px;
        }

        .cert-card {
          height: 280px;
          padding: 25px 20px;
        }

        .cert-icon {
          width: 50px;
          height: 50px;
          font-size: 1.5rem;
          margin-bottom: 15px;
        }

        .cert-name {
          font-size: 1.1rem;
        }

        .cert-desc {
          font-size: 0.85rem;
        }

        .floating-badges {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .cert-card {
          height: 260px;
          padding: 20px 15px;
        }

        .cert-icon {
          width: 45px;
          height: 45px;
          font-size: 1.3rem;
        }

        .cert-name {
          font-size: 1rem;
        }

        .cert-number {
          font-size: 1rem;
        }
      }

      .certificate-card:hover {
        transform: translateY(-20px) scale(1.02);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
      }

      /* ========== GLASS PREMIUM CARD ========== */
      .glass-premium {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.05) 50%,
          rgba(255, 255, 255, 0.1) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 25px 50px rgba(40, 167, 69, 0.2);
      }

      .glass-premium:hover {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15) 0%,
          rgba(255, 255, 255, 0.08) 50%,
          rgba(255, 255, 255, 0.15) 100%
        );
        box-shadow: 0 40px 80px rgba(40, 167, 69, 0.4);
      }

      .glass-layers {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .glass-layer {
        position: absolute;
        border-radius: 25px;
        backdrop-filter: blur(10px);
      }

      .layer-1 {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: rgba(255, 255, 255, 0.03);
        animation: glass-float-1 8s ease-in-out infinite;
      }

      .layer-2 {
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        background: rgba(40, 167, 69, 0.05);
        animation: glass-float-2 10s ease-in-out infinite;
      }

      .layer-3 {
        top: 30px;
        left: 30px;
        right: 30px;
        bottom: 30px;
        background: rgba(32, 201, 151, 0.03);
        animation: glass-float-3 12s ease-in-out infinite;
      }

      .cert-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.1;
      }

      .pattern-dots {
        width: 100%;
        height: 100%;
        background-image: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.2) 1px,
          transparent 1px
        );
        background-size: 20px 20px;
        animation: pattern-move 15s linear infinite;
      }

      .glow-effect {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
          from 0deg,
          transparent,
          rgba(40, 167, 69, 0.3),
          transparent,
          rgba(32, 201, 151, 0.3),
          transparent
        );
        animation: rotate-glow 8s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }

      .glass-premium:hover .glow-effect {
        opacity: 1;
      }

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

      .glass-premium:hover .shimmer-effect {
        left: 100%;
        opacity: 1;
      }

      /* ========== ECO MORPHISM CARD ========== */
      .eco-morphism {
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.2) 0%,
          rgba(0, 128, 0, 0.15) 50%,
          rgba(34, 139, 34, 0.2) 100%
        );
        border: 1px solid rgba(34, 139, 34, 0.3);
        box-shadow: 0 25px 50px rgba(34, 139, 34, 0.2);
      }

      .eco-morphism:hover {
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.3) 0%,
          rgba(0, 128, 0, 0.2) 50%,
          rgba(34, 139, 34, 0.3) 100%
        );
        box-shadow: 0 40px 80px rgba(34, 139, 34, 0.4);
      }

      .leaf-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .leaf-1,
      .leaf-2,
      .leaf-3 {
        position: absolute;
        font-size: 2rem;
        color: rgba(34, 139, 34, 0.3);
        animation: leaf-float 10s ease-in-out infinite;
      }

      .leaf-1 {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
      }
      .leaf-2 {
        top: 60%;
        right: 15%;
        animation-delay: 3s;
      }
      .leaf-3 {
        bottom: 20%;
        left: 70%;
        animation-delay: 6s;
      }

      .nature-gradient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          45deg,
          rgba(34, 139, 34, 0.1),
          rgba(0, 128, 0, 0.1)
        );
        animation: nature-pulse 8s ease-in-out infinite;
      }

      /* ========== SAFETY SHIELD CARD ========== */
      .safety-shield {
        background: linear-gradient(
          135deg,
          rgba(220, 53, 69, 0.2) 0%,
          rgba(255, 69, 0, 0.15) 50%,
          rgba(220, 53, 69, 0.2) 100%
        );
        border: 1px solid rgba(220, 53, 69, 0.3);
        box-shadow: 0 25px 50px rgba(220, 53, 69, 0.2);
      }

      .safety-shield:hover {
        background: linear-gradient(
          135deg,
          rgba(220, 53, 69, 0.3) 0%,
          rgba(255, 69, 0, 0.2) 50%,
          rgba(220, 53, 69, 0.3) 100%
        );
        box-shadow: 0 40px 80px rgba(220, 53, 69, 0.4);
      }

      .shield-pattern {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
      }

      .shield-layers {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .shield-layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid rgba(220, 53, 69, 0.4);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        animation: shield-pulse 4s ease-in-out infinite;
      }

      .shield-core {
        position: absolute;
        top: 20%;
        left: 20%;
        right: 20%;
        bottom: 20%;
        border: 1px solid rgba(220, 53, 69, 0.6);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        animation: shield-pulse 4s ease-in-out infinite reverse;
      }

      .safety-grid {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
          linear-gradient(rgba(220, 53, 69, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(220, 53, 69, 0.1) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.3;
        animation: grid-slide 20s linear infinite;
      }

      /* ========== AGRICULTURAL HEXAGON CARD ========== */
      .agri-hexagon {
        background: linear-gradient(
          135deg,
          rgba(154, 205, 50, 0.2) 0%,
          rgba(124, 252, 0, 0.15) 50%,
          rgba(154, 205, 50, 0.2) 100%
        );
        border: 1px solid rgba(154, 205, 50, 0.3);
        box-shadow: 0 25px 50px rgba(154, 205, 50, 0.2);
        clip-path: polygon(
          50% 0%,
          100% 25%,
          100% 75%,
          50% 100%,
          0% 75%,
          0% 25%
        );
        margin: 30px;
      }

      .agri-hexagon:hover {
        background: linear-gradient(
          135deg,
          rgba(154, 205, 50, 0.3) 0%,
          rgba(124, 252, 0, 0.2) 50%,
          rgba(154, 205, 50, 0.3) 100%
        );
        box-shadow: 0 40px 80px rgba(154, 205, 50, 0.4);
      }

      .hexagon-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .hexagon-bg {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .hex-pattern {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(
          circle,
          rgba(154, 205, 50, 0.2) 2px,
          transparent 2px
        );
        background-size: 40px 40px;
        animation: hex-rotate 15s linear infinite;
      }

      .crop-icons {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .crop-icon-1,
      .crop-icon-2,
      .crop-icon-3 {
        position: absolute;
        font-size: 1.5rem;
        color: rgba(154, 205, 50, 0.4);
        animation: crop-float 12s ease-in-out infinite;
      }

      .crop-icon-1 {
        top: 30%;
        left: 20%;
        animation-delay: 0s;
      }
      .crop-icon-2 {
        top: 50%;
        right: 25%;
        animation-delay: 4s;
      }
      .crop-icon-3 {
        bottom: 30%;
        left: 60%;
        animation-delay: 8s;
      }

      /* ========== WATER FLUID CARD ========== */
      .water-fluid {
        background: linear-gradient(
          135deg,
          rgba(0, 119, 190, 0.2) 0%,
          rgba(32, 201, 151, 0.15) 50%,
          rgba(0, 119, 190, 0.2) 100%
        );
        border: 1px solid rgba(0, 119, 190, 0.3);
        box-shadow: 0 25px 50px rgba(0, 119, 190, 0.2);
      }

      .water-fluid:hover {
        background: linear-gradient(
          135deg,
          rgba(0, 119, 190, 0.3) 0%,
          rgba(32, 201, 151, 0.2) 50%,
          rgba(0, 119, 190, 0.3) 100%
        );
        box-shadow: 0 40px 80px rgba(0, 119, 190, 0.4);
      }

      .water-waves {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        opacity: 0.6;
      }

      .wave-svg {
        width: 100%;
        height: 100%;
        animation: wave-flow 8s ease-in-out infinite;
      }

      .water-drops {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .drop {
        position: absolute;
        width: 8px;
        height: 8px;
        background: radial-gradient(
          circle,
          rgba(32, 201, 151, 0.8),
          rgba(0, 119, 190, 0.4)
        );
        border-radius: 50% 50% 50% 0;
        animation: drop-fall 6s ease-in-out infinite;
      }

      .drop-1 {
        top: 10%;
        left: 20%;
        animation-delay: 0s;
      }
      .drop-2 {
        top: 20%;
        left: 70%;
        animation-delay: 2s;
      }
      .drop-3 {
        top: 30%;
        left: 45%;
        animation-delay: 4s;
      }

      /* ========== INNOVATION HOLOGRAPHIC CARD ========== */
      .innovation-holo {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.2) 0%,
          rgba(147, 0, 211, 0.15) 50%,
          rgba(138, 43, 226, 0.2) 100%
        );
        border: 1px solid rgba(138, 43, 226, 0.3);
        box-shadow: 0 25px 50px rgba(138, 43, 226, 0.2);
      }

      .innovation-holo:hover {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.3) 0%,
          rgba(147, 0, 211, 0.2) 50%,
          rgba(138, 43, 226, 0.3) 100%
        );
        box-shadow: 0 40px 80px rgba(138, 43, 226, 0.4);
      }

      .holo-gradient {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          45deg,
          rgba(138, 43, 226, 0.1),
          rgba(147, 0, 211, 0.1),
          rgba(75, 0, 130, 0.1)
        );
        animation: holo-shift 10s ease-in-out infinite;
      }

      .tech-mesh {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .mesh-layer {
        width: 100%;
        height: 100%;
        background-image:
          linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px);
        background-size: 25px 25px;
        animation: mesh-move 15s linear infinite;
      }

      .floating-icons {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .icon-1,
      .icon-2,
      .icon-3,
      .icon-4 {
        position: absolute;
        font-size: 1.2rem;
        color: rgba(138, 43, 226, 0.4);
        animation: icon-float 8s ease-in-out infinite;
      }

      .icon-1 {
        top: 20%;
        left: 15%;
        animation-delay: 0s;
      }
      .icon-2 {
        top: 40%;
        right: 20%;
        animation-delay: 2s;
      }
      .icon-3 {
        bottom: 30%;
        left: 70%;
        animation-delay: 4s;
      }
      .icon-4 {
        top: 70%;
        left: 30%;
        animation-delay: 6s;
      }

      /* ========== CERTIFICATE CONTENT STYLES ========== */
      .cert-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }

      .cert-header {
        position: relative;
        z-index: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
      }

      .cert-logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        backdrop-filter: blur(15px);
        border: 2px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
      }

      .cert-logo i {
        color: rgba(255, 255, 255, 0.9);
        filter: drop-shadow(0 0 10px rgba(40, 167, 69, 0.5));
      }

      .cert-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        border-radius: 25px;
        font-size: 0.9rem;
        font-weight: 700;
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
      }

      .premium-badge {
        background: linear-gradient(
          135deg,
          rgba(255, 215, 0, 0.3),
          rgba(255, 193, 7, 0.4)
        );
        color: #ffd700;
        border-color: rgba(255, 215, 0, 0.5);
      }

      .eco-badge {
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.3),
          rgba(0, 128, 0, 0.4)
        );
        color: #90ee90;
        border-color: rgba(34, 139, 34, 0.5);
      }

      .safety-badge {
        background: linear-gradient(
          135deg,
          rgba(220, 53, 69, 0.3),
          rgba(255, 69, 0, 0.4)
        );
        color: #ff6b6b;
        border-color: rgba(220, 53, 69, 0.5);
      }

      .agri-badge {
        background: linear-gradient(
          135deg,
          rgba(154, 205, 50, 0.3),
          rgba(124, 252, 0, 0.4)
        );
        color: #adff2f;
        border-color: rgba(154, 205, 50, 0.5);
      }

      .water-badge {
        background: linear-gradient(
          135deg,
          rgba(0, 119, 190, 0.3),
          rgba(32, 201, 151, 0.4)
        );
        color: #87ceeb;
        border-color: rgba(0, 119, 190, 0.5);
      }

      .innovation-badge {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.3),
          rgba(147, 0, 211, 0.4)
        );
        color: #da70d6;
        border-color: rgba(138, 43, 226, 0.5);
      }

      .cert-content {
        position: relative;
        z-index: 3;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        color: white;
      }

      .cert-title {
        font-size: 1.8rem;
        font-weight: 800;
        margin-bottom: 15px;
        color: white;
        text-align: center;
        line-height: 1.2;
      }

      .cert-description {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 30px;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
      }

      .cert-details {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 25px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
      }

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

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

      .detail-value {
        font-size: 1rem;
        font-weight: 700;
        color: #28a745;
      }

      .cert-status {
        text-align: center;
        margin-bottom: 20px;
      }

      .status-indicator {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: rgba(40, 167, 69, 0.2);
        border: 1px solid rgba(40, 167, 69, 0.4);
        border-radius: 20px;
        color: #28a745;
        font-size: 0.9rem;
        font-weight: 600;
      }

      .status-indicator.active i {
        animation: status-pulse 2s ease-in-out infinite;
      }

      /* ========== SPECIALIZED CONTENT SECTIONS ========== */
      .eco-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 25px;
      }

      .metric-item {
        text-align: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 15px 10px;
        backdrop-filter: blur(10px);
      }

      .metric-icon {
        font-size: 1.5rem;
        color: #90ee90;
        margin-bottom: 8px;
      }

      .metric-value {
        font-size: 1.3rem;
        font-weight: 800;
        color: #28a745;
        margin-bottom: 5px;
      }

      .metric-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
      }

      .eco-achievements {
        text-align: center;
      }

      .achievement-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.3),
          rgba(0, 128, 0, 0.2)
        );
        border: 1px solid rgba(34, 139, 34, 0.4);
        border-radius: 20px;
        color: #90ee90;
        font-size: 0.9rem;
        font-weight: 600;
      }

      .safety-dashboard {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

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

      .stat-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid rgba(220, 53, 69, 0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
      }

      .zero-accidents {
        border-color: #28a745;
        background: rgba(40, 167, 69, 0.1);
      }

      .stat-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: #28a745;
        line-height: 1;
      }

      .stat-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 5px;
      }

      .safety-indicators {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .indicator-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        backdrop-filter: blur(10px);
      }

      .indicator-item i {
        color: #ff6b6b;
        font-size: 1.1rem;
      }

      .agri-features {
        margin-bottom: 25px;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        backdrop-filter: blur(10px);
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.85);
      }

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

      .agri-awards {
        text-align: center;
      }

      .award-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: linear-gradient(
          135deg,
          rgba(154, 205, 50, 0.3),
          rgba(124, 252, 0, 0.2)
        );
        border: 1px solid rgba(154, 205, 50, 0.4);
        border-radius: 20px;
        color: #adff2f;
        font-size: 0.9rem;
        font-weight: 600;
      }

      .water-efficiency-dashboard {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
      }

      .efficiency-gauge {
        position: relative;
        width: 150px;
        height: 150px;
      }

      .gauge-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }

      .gauge-fill {
        stroke-dasharray: 450;
        stroke-dashoffset: 45;
        transition: stroke-dashoffset 2s ease;
        filter: drop-shadow(0 0 8px rgba(32, 201, 151, 0.6));
      }

      .gauge-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }

      .gauge-value {
        font-size: 1.8rem;
        font-weight: 900;
        color: #20c997;
        line-height: 1;
      }

      .gauge-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 5px;
      }

      .water-stats {
        display: flex;
        gap: 30px;
      }

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

      .water-stats .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #20c997;
        margin-bottom: 5px;
      }

      .water-stats .stat-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.7);
      }

      .innovation-showcase {
        display: flex;
        flex-direction: column;
        gap: 25px;
      }

      .tech-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
      }

      .tech-tag {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: rgba(138, 43, 226, 0.2);
        border: 1px solid rgba(138, 43, 226, 0.4);
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #da70d6;
        transition: all 0.3s ease;
      }

      .tech-tag:hover {
        background: rgba(138, 43, 226, 0.3);
        transform: translateY(-2px);
      }

      .innovation-metrics {
        display: flex;
        gap: 20px;
        justify-content: center;
      }

      .metric-card {
        text-align: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 20px 15px;
        backdrop-filter: blur(10px);
        min-width: 120px;
      }

      .metric-number {
        font-size: 1.8rem;
        font-weight: 900;
        color: #da70d6;
        line-height: 1;
        margin-bottom: 8px;
      }

      .metric-label {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.7);
      }

      /* ========== CERTIFICATE ACTIONS ========== */
      .cert-actions {
        position: relative;
        z-index: 3;
        display: flex;
        gap: 15px;
        margin-top: auto;
        padding-top: 20px;
      }

      .action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 20px;
        border: none;
        border-radius: 15px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(15px);
        position: relative;
        overflow: hidden;
      }

      .view-cert {
        background: rgba(40, 167, 69, 0.3);
        border: 1px solid rgba(40, 167, 69, 0.5);
        color: #28a745;
      }

      .download-cert {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
      }

      .action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }

      .view-cert:hover {
        background: rgba(40, 167, 69, 0.5);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
      }

      .download-cert:hover {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
      }

      .eco-btn {
        background: rgba(34, 139, 34, 0.3);
        border-color: rgba(34, 139, 34, 0.5);
        color: #90ee90;
      }

      .eco-btn:hover {
        background: rgba(34, 139, 34, 0.5);
        box-shadow: 0 8px 25px rgba(34, 139, 34, 0.3);
      }

      .safety-btn {
        background: rgba(220, 53, 69, 0.3);
        border-color: rgba(220, 53, 69, 0.5);
        color: #ff6b6b;
      }

      .safety-btn:hover {
        background: rgba(220, 53, 69, 0.5);
        box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
      }

      .agri-btn {
        background: rgba(154, 205, 50, 0.3);
        border-color: rgba(154, 205, 50, 0.5);
        color: #adff2f;
      }

      .agri-btn:hover {
        background: rgba(154, 205, 50, 0.5);
        box-shadow: 0 8px 25px rgba(154, 205, 50, 0.3);
      }

      .water-btn {
        background: rgba(0, 119, 190, 0.3);
        border-color: rgba(0, 119, 190, 0.5);
        color: #87ceeb;
      }

      .water-btn:hover {
        background: rgba(0, 119, 190, 0.5);
        box-shadow: 0 8px 25px rgba(0, 119, 190, 0.3);
      }

      .innovation-btn {
        background: rgba(138, 43, 226, 0.3);
        border-color: rgba(138, 43, 226, 0.5);
        color: #da70d6;
      }

      .innovation-btn:hover {
        background: rgba(138, 43, 226, 0.5);
        box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);
      }

      /* ========== INTERACTIVE ELEMENTS ========== */
      .interactive-elements {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
      }

      .floating-particles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .particle {
        position: absolute;
        width: 6px;
        height: 6px;
        background: radial-gradient(
          circle,
          rgba(40, 167, 69, 0.8),
          rgba(32, 201, 151, 0.4)
        );
        border-radius: 50%;
        animation: particle-float 12s ease-in-out infinite;
        top: var(--y);
        left: var(--x);
        animation-delay: var(--delay);
      }

      .certification-counter {
        position: absolute;
        top: 50px;
        right: 50px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        padding: 20px;
        text-align: center;
        animation: counter-pulse 4s ease-in-out infinite;
      }

      .counter-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: #28a745;
        line-height: 1;
        display: block;
      }

      .counter-label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 5px;
      }

      /* ========== ADVANCED ANIMATIONS ========== */
      @keyframes background-shift {
        0%,
        100% {
          background:
            radial-gradient(
              circle at 20% 30%,
              rgba(40, 167, 69, 0.15) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 80% 70%,
              rgba(32, 201, 151, 0.15) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 50% 50%,
              rgba(138, 43, 226, 0.05) 0%,
              transparent 70%
            );
        }
        25% {
          background:
            radial-gradient(
              circle at 80% 20%,
              rgba(40, 167, 69, 0.2) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 20% 80%,
              rgba(32, 201, 151, 0.2) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 70% 30%,
              rgba(138, 43, 226, 0.08) 0%,
              transparent 70%
            );
        }
        50% {
          background:
            radial-gradient(
              circle at 70% 80%,
              rgba(40, 167, 69, 0.18) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 30% 20%,
              rgba(32, 201, 151, 0.18) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 40% 70%,
              rgba(138, 43, 226, 0.06) 0%,
              transparent 70%
            );
        }
        75% {
          background:
            radial-gradient(
              circle at 30% 70%,
              rgba(40, 167, 69, 0.12) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 70% 30%,
              rgba(32, 201, 151, 0.12) 0%,
              transparent 50%
            ),
            radial-gradient(
              circle at 60% 60%,
              rgba(138, 43, 226, 0.07) 0%,
              transparent 70%
            );
        }
      }

      @keyframes glass-float-1 {
        0%,
        100% {
          transform: translateY(0px) translateX(0px);
          opacity: 0.3;
        }
        50% {
          transform: translateY(-10px) translateX(5px);
          opacity: 0.5;
        }
      }

      @keyframes glass-float-2 {
        0%,
        100% {
          transform: translateY(0px) translateX(0px);
          opacity: 0.4;
        }
        50% {
          transform: translateY(-8px) translateX(-3px);
          opacity: 0.6;
        }
      }

      @keyframes glass-float-3 {
        0%,
        100% {
          transform: translateY(0px) translateX(0px);
          opacity: 0.2;
        }
        50% {
          transform: translateY(-12px) translateX(2px);
          opacity: 0.4;
        }
      }

      @keyframes pattern-move {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(20px, 20px);
        }
      }

      @keyframes rotate-glow {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes leaf-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.3;
        }
        50% {
          transform: translateY(-20px) rotate(10deg);
          opacity: 0.6;
        }
      }

      @keyframes nature-pulse {
        0%,
        100% {
          opacity: 0.1;
          transform: scale(1);
        }
        50% {
          opacity: 0.3;
          transform: scale(1.05);
        }
      }

      @keyframes shield-pulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.4;
        }
        50% {
          transform: scale(1.1);
          opacity: 0.8;
        }
      }

      @keyframes grid-slide {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(30px, 30px);
        }
      }

      @keyframes hex-rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes crop-float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.4;
        }
        33% {
          transform: translateY(-15px) rotate(5deg);
          opacity: 0.7;
        }
        66% {
          transform: translateY(-8px) rotate(-3deg);
          opacity: 0.5;
        }
      }

      @keyframes wave-flow {
        0%,
        100% {
          transform: translateX(0%);
        }
        50% {
          transform: translateX(-10%);
        }
      }

      @keyframes drop-fall {
        0% {
          transform: translateY(-20px) scale(0.8);
          opacity: 0;
        }
        50% {
          transform: translateY(10px) scale(1.2);
          opacity: 1;
        }
        100% {
          transform: translateY(40px) scale(0.6);
          opacity: 0;
        }
      }

      @keyframes holo-shift {
        0%,
        100% {
          background: linear-gradient(
            45deg,
            rgba(138, 43, 226, 0.1),
            rgba(147, 0, 211, 0.1),
            rgba(75, 0, 130, 0.1)
          );
        }
        25% {
          background: linear-gradient(
            135deg,
            rgba(147, 0, 211, 0.1),
            rgba(75, 0, 130, 0.1),
            rgba(138, 43, 226, 0.1)
          );
        }
        50% {
          background: linear-gradient(
            225deg,
            rgba(75, 0, 130, 0.1),
            rgba(138, 43, 226, 0.1),
            rgba(147, 0, 211, 0.1)
          );
        }
        75% {
          background: linear-gradient(
            315deg,
            rgba(138, 43, 226, 0.1),
            rgba(147, 0, 211, 0.1),
            rgba(75, 0, 130, 0.1)
          );
        }
      }

      @keyframes mesh-move {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(25px, 25px);
        }
      }

      @keyframes icon-float {
        0%,
        100% {
          transform: translateY(0px) scale(1);
          opacity: 0.4;
        }
        50% {
          transform: translateY(-15px) scale(1.1);
          opacity: 0.8;
        }
      }

      @keyframes particle-float {
        0% {
          transform: translateY(0px) scale(1);
          opacity: 0.6;
        }
        50% {
          transform: translateY(-30px) scale(1.3);
          opacity: 1;
        }
        100% {
          transform: translateY(-60px) scale(0.8);
          opacity: 0;
        }
      }

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

      @keyframes status-pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }

      /* ========== RESPONSIVE DESIGN ========== */
      @media (max-width: 1200px) {
        .certificates-showcase {
          grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
          gap: 30px;
        }

        .certificate-card {
          min-height: 450px;
          padding: 35px;
        }
      }

      @media (max-width: 768px) {
        .iso-certifications-section {
          padding: 80px 0;
        }

        .certificates-showcase {
          grid-template-columns: 1fr;
          gap: 25px;
          padding: 0 15px;
        }

        .certificate-card {
          padding: 30px 20px;
          min-height: 400px;
        }

        .agri-hexagon {
          clip-path: none;
          border-radius: 25px;
          margin: 0;
        }

        .cert-title {
          font-size: 1.5rem;
        }

        .cert-description {
          font-size: 1rem;
        }

        .cert-header {
          flex-direction: column;
          gap: 15px;
          text-align: center;
        }

        .cert-actions {
          flex-direction: column;
          gap: 12px;
        }

        .eco-metrics {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        .feature-grid {
          grid-template-columns: 1fr;
        }

        .water-stats {
          flex-direction: column;
          gap: 15px;
        }

        .innovation-metrics {
          flex-direction: column;
          gap: 15px;
        }

        .certification-counter {
          position: relative;
          top: auto;
          right: auto;
          margin: 30px auto 0;
          width: fit-content;
        }

        .interactive-elements {
          display: none;
        }
      }

      @media (max-width: 480px) {
        .certificate-card {
          padding: 25px 15px;
          min-height: 350px;
        }

        .cert-title {
          font-size: 1.3rem;
        }

        .cert-description {
          font-size: 0.9rem;
        }

        .tech-tags {
          gap: 8px;
        }

        .tech-tag {
          font-size: 0.75rem;
          padding: 6px 12px;
        }
      }

  


      .iso-glow {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(
          from 0deg,
          transparent,
          rgba(40, 167, 69, 0.3),
          transparent,
          rgba(32, 201, 151, 0.3),
          transparent
        );
        animation: rotate 8s linear infinite;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }

  

      /* Hexagon Card */
      .hexagon-card {
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.2),
          rgba(0, 100, 0, 0.3)
        );
        backdrop-filter: blur(15px);
        border: 2px solid rgba(34, 139, 34, 0.3);
        clip-path: polygon(
          50% 0%,
          100% 25%,
          100% 75%,
          50% 100%,
          0% 75%,
          0% 25%
        );
        margin: 20px;
      }

      .hexagon-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          45deg,
          rgba(40, 167, 69, 0.1),
          rgba(32, 201, 151, 0.1)
        );
        clip-path: polygon(
          50% 0%,
          100% 25%,
          100% 75%,
          50% 100%,
          0% 75%,
          0% 25%
        );
        animation: pulse-hex 3s ease-in-out infinite;
      }

      /* Circular Card */
      .circular-card {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(25px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        padding: 50px 30px;
        text-align: center;
        aspect-ratio: 1;
      }

      .circular-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120%;
        height: 120%;
      }

      .circle-1,
      .circle-2,
      .circle-3 {
        position: absolute;
        border-radius: 50%;
        border: 1px solid;
        animation: spin 15s linear infinite;
      }

      .circle-1 {
        width: 100%;
        height: 100%;
        border-color: rgba(40, 167, 69, 0.3);
        animation-duration: 10s;
      }

      .circle-2 {
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        border-color: rgba(32, 201, 151, 0.4);
        animation-duration: 15s;
        animation-direction: reverse;
      }

      .circle-3 {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 20%;
        border-color: rgba(255, 255, 255, 0.2);
        animation-duration: 20s;
      }

      /* Diamond Card */
      .diamond-card {
        background: linear-gradient(
          135deg,
          rgba(255, 215, 0, 0.1),
          rgba(255, 193, 7, 0.2)
        );
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 215, 0, 0.3);
        transform: rotate(45deg);
        margin: 40px;
      }

      .diamond-card .iso-content {
        transform: rotate(-45deg);
      }

      .diamond-shape {
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        border: 2px solid rgba(255, 215, 0, 0.4);
        transform: rotate(45deg);
        animation: diamond-spin 12s linear infinite;
      }

      .diamond-inner {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        animation: diamond-spin 8s linear infinite reverse;
      }

      /* Wave Card */
      .wave-card {
        background: linear-gradient(
          135deg,
          rgba(0, 119, 190, 0.2),
          rgba(32, 201, 151, 0.2)
        );
        backdrop-filter: blur(15px);
        border: 1px solid rgba(32, 201, 151, 0.3);
        overflow: hidden;
      }

      .wave-background {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60%;
        opacity: 0.6;
      }

      .wave-svg {
        width: 100%;
        height: 100%;
        animation: wave-flow 6s ease-in-out infinite;
      }

      /* Futuristic Card */
      .futuristic-card {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.2),
          rgba(75, 0, 130, 0.3)
        );
        backdrop-filter: blur(20px);
        border: 1px solid rgba(138, 43, 226, 0.4);
        position: relative;
      }

      .tech-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }

      .tech-grid {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
          linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
        animation: grid-move 10s linear infinite;
      }

      .tech-particles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(138, 43, 226, 0.6);
        border-radius: 50%;
        animation: particle-float 8s ease-in-out infinite;
      }

      .particle:nth-child(1) {
        top: 20%;
        left: 20%;
        animation-delay: 0s;
      }
      .particle:nth-child(2) {
        top: 60%;
        left: 80%;
        animation-delay: 2s;
      }
      .particle:nth-child(3) {
        top: 80%;
        left: 30%;
        animation-delay: 4s;
      }
      .particle:nth-child(4) {
        top: 40%;
        left: 70%;
        animation-delay: 6s;
      }

      /* ISO Card Content */
      .iso-content {
        position: relative;
        z-index: 2;
        color: white;
      }

      .iso-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 20px;
        backdrop-filter: blur(10px);
      }

      .iso-badge.premium {
        background: linear-gradient(
          135deg,
          rgba(255, 215, 0, 0.3),
          rgba(255, 193, 7, 0.4)
        );
        border: 1px solid rgba(255, 215, 0, 0.5);
        color: #ffd700;
      }

      .iso-badge.environmental {
        background: linear-gradient(
          135deg,
          rgba(34, 139, 34, 0.3),
          rgba(0, 128, 0, 0.4)
        );
        border: 1px solid rgba(34, 139, 34, 0.5);
        color: #90ee90;
      }

      .iso-badge.safety {
        background: linear-gradient(
          135deg,
          rgba(220, 20, 60, 0.3),
          rgba(255, 69, 0, 0.4)
        );
        border: 1px solid rgba(220, 20, 60, 0.5);
        color: #ff6b6b;
      }

      .iso-badge.agriculture {
        background: linear-gradient(
          135deg,
          rgba(154, 205, 50, 0.3),
          rgba(124, 252, 0, 0.4)
        );
        border: 1px solid rgba(154, 205, 50, 0.5);
        color: #adff2f;
      }

      .iso-badge.water {
        background: linear-gradient(
          135deg,
          rgba(0, 191, 255, 0.3),
          rgba(32, 201, 151, 0.4)
        );
        border: 1px solid rgba(0, 191, 255, 0.5);
        color: #87ceeb;
      }

      .iso-badge.innovation {
        background: linear-gradient(
          135deg,
          rgba(138, 43, 226, 0.3),
          rgba(147, 0, 211, 0.4)
        );
        border: 1px solid rgba(138, 43, 226, 0.5);
        color: #da70d6;
      }

      .iso-icon {
        font-size: 3rem;
        margin: 20px 0;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        filter: drop-shadow(0 0 10px rgba(40, 167, 69, 0.5));
      }

      .iso-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: white;
        text-align: center;
      }

      .iso-description {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 25px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
      }

      /* Specific Content for Different Cards */
      .iso-details {
        display: flex;
        justify-content: space-between;
        gap: 20px;
      }

      .detail-item {
        text-align: center;
        flex: 1;
      }

      .detail-label {
        display: block;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 5px;
      }

      .detail-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: #28a745;
      }

      .eco-indicators,
      .safety-stats,
      .agriculture-features {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
      }

      .indicator,
      .stat,
      .feature {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
      }

      .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #28a745;
      }

      .stat-label {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
      }

      .water-efficiency {
        margin-top: 20px;
      }

      .efficiency-bar {
        position: relative;
        height: 8px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        overflow: hidden;
      }

      .efficiency-fill {
        height: 100%;
        background: linear-gradient(90deg, #28a745, #20c997);
        border-radius: 4px;
        animation: fill-bar 2s ease-in-out;
      }

      .efficiency-text {
        position: absolute;
        top: -25px;
        right: 0;
        font-size: 0.9rem;
        font-weight: 600;
        color: #20c997;
      }

      .innovation-badges {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .innovation-badges .badge {
        padding: 5px 12px;
        background: rgba(138, 43, 226, 0.3);
        border: 1px solid rgba(138, 43, 226, 0.5);
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 600;
        color: #da70d6;
      }

      /* Floating Certification Elements */
      .floating-certifications {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        overflow: hidden;
      }

      .floating-cert {
        position: absolute;
        font-size: 2rem;
        color: rgba(40, 167, 69, 0.2);
        animation: float-cert 8s ease-in-out infinite;
      }

      .cert-1 {
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }

      .cert-2 {
        top: 30%;
        right: 15%;
        animation-delay: 3s;
      }

      .cert-3 {
        bottom: 20%;
        left: 20%;
        animation-delay: 6s;
      }

      /* Animations */
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes pulse-hex {
        0%,
        100% {
          opacity: 0.3;
          transform: scale(1);
        }
        50% {
          opacity: 0.6;
          transform: scale(1.05);
        }
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes diamond-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes wave-flow {
        0%,
        100% {
          transform: translateX(0%);
        }
        50% {
          transform: translateX(-20%);
        }
      }

      @keyframes grid-move {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(20px, 20px);
        }
      }

      @keyframes particle-float {
        0%,
        100% {
          transform: translateY(0px) scale(1);
          opacity: 0.6;
        }
        50% {
          transform: translateY(-20px) scale(1.2);
          opacity: 1;
        }
      }

      @keyframes float-cert {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
          opacity: 0.2;
        }
        50% {
          transform: translateY(-30px) rotate(10deg);
          opacity: 0.4;
        }
      }

      @keyframes fill-bar {
        0% {
          width: 0%;
        }
        100% {
          width: 90%;
        }
      }

      @keyframes animate-float-up {
        from {
          opacity: 0;
          transform: translateY(50px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .animate-float-up {
        animation: animate-float-up 0.8s ease-out forwards;
        opacity: 0;
      }

      .delay-1 {
        animation-delay: 0.1s;
      }
      .delay-2 {
        animation-delay: 0.2s;
      }
      .delay-3 {
        animation-delay: 0.3s;
      }
      .delay-4 {
        animation-delay: 0.4s;
      }
      .delay-5 {
        animation-delay: 0.5s;
      }
      .delay-6 {
        animation-delay: 0.6s;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .iso-certifications-section {
          padding: 80px 0;
        }

        .iso-grid {
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 0 15px;
        }

        .iso-card {
          padding: 30px 20px;
          min-height: 300px;
        }

        .hexagon-card,
        .diamond-card {
          margin: 15px;
          clip-path: none;
          transform: none;
          border-radius: 20px;
        }

        .hexagon-card .iso-content,
        .diamond-card .iso-content {
          transform: none;
        }

        .circular-card {
          border-radius: 20px;
          aspect-ratio: auto;
          padding: 30px 20px;
        }

        .iso-icon {
          font-size: 2.5rem;
          margin: 15px 0;
        }

        .iso-title {
          font-size: 1.3rem;
        }

        .iso-description {
          font-size: 0.9rem;
        }
      }

      /* 3D Video Cards Section */
      .cards-3d-video-section {
        padding: 80px 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        position: relative;
        overflow: hidden;
      }

      .cards-3d-video-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          radial-gradient(
            circle at 30% 20%,
            rgba(40, 167, 69, 0.1) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 70% 80%,
            rgba(32, 201, 151, 0.1) 0%,
            transparent 50%
          );
        pointer-events: none;
      }

      .cards-3d-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 40px;
        padding: 40px 20px;
        perspective: 1000px;
      }

      .card-3d-video {
        position: relative;
        height: 450px;
        cursor: pointer;
        transform-style: preserve-3d;
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .card-3d-video:hover {
        transform: translateY(-20px) rotateX(10deg) rotateY(5deg);
      }

      .card-3d-video:nth-child(even):hover {
        transform: translateY(-20px) rotateX(10deg) rotateY(-5deg);
      }

      .card-3d-inner {
        position: relative;
        width: 100%;
        height: 100%;
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(40, 167, 69, 0.15);
        transition: all 0.4s ease;
      }

      .card-3d-video:hover .card-3d-inner {
        box-shadow: 0 35px 80px rgba(40, 167, 69, 0.25);
      }

      .card-thumbnail {
        position: relative;
        height: 70%;
        overflow: hidden;
      }

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

      .card-3d-video:hover .card-thumbnail img {
        transform: scale(1.1);
      }

      .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #28a745;
        transition: all 0.3s ease;
        opacity: 0.8;
      }

      .card-3d-video:hover .play-overlay {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
        background: rgba(255, 255, 255, 1);
      }

      .card-content {
        padding: 20px;
        height: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .card-content h3 {
        font-size: 1.4rem;
        font-weight: 700;
        color: #212529;
        margin-bottom: 8px;
        line-height: 1.3;
      }

      .card-content p {
        font-size: 0.9rem;
        color: #6c757d;
        line-height: 1.4;
        margin-bottom: 12px;
      }

      .card-stats {
        display: flex;
        gap: 15px;
        align-items: center;
      }

      .card-stats span {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.85rem;
        color: #6c757d;
      }

      .card-stats i {
        font-size: 0.9rem;
        color: #28a745;
      }

      /* Video Modal */
      /*.video-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        display: none;
        z-index: 10000;
        backdrop-filter: blur(10px);
      }*/
/*
      .video-modal.active {

        display: flex;
        align-items: center;
        justify-content: center;
        animation: modalFadeIn 0.3s ease;
      }*/

/*      .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      .modal-content-reel {
        position: relative;
        width: 90%;
        max-width: 500px;
        height: 85vh;
        background: #343a40;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        animation: reelSlideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
*/
      /*.modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 50%;
        color: white;
        font-size: 18px;
        cursor: pointer;
        z-index: 10001;
        transition: all 0.3s ease;
      }

      .modal-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
      }

      .reel-container {
        display: flex;
        width: 100%;
        height: 100%;
      }

      .reel-container video {
        flex: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: black;
      }

      .reel-sidebar {
        position: absolute;
        right: 20px;
        bottom: 20px;
        width: 250px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(15px);
        padding: 20px;
        border-radius: 15px;
        color: white;
        transform: translateX(100%);
        transition: transform 0.4s ease;
      }*/
/*
      .video-modal.active .reel-sidebar {
        transform: translateX(0);
      }*/

      /*.reel-info h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: white;
      }

      .reel-info p {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.5;
        margin-bottom: 20px;
      }

      .reel-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .action-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px 16px;
        border-radius: 10px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
      }

      .action-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateX(-5px);
      }*/

      /* Animations */
      /*@keyframes modalFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes reelSlideUp {
        from {
          transform: translateY(100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }*/

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

      .card-3d-video:nth-child(1) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 0s;
      }

      .card-3d-video:nth-child(2) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 1.5s;
      }

      .card-3d-video:nth-child(3) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 3s;
      }

      .card-3d-video:nth-child(4) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 4.5s;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .cards-3d-container {
          grid-template-columns: 1fr;
          gap: 30px;
          padding: 20px 10px;
        }

        .card-3d-video {
          height: 400px;
        }

   /*     .modal-content-reel {
          width: 95%;
          height: 90vh;
        }*/

        .reel-sidebar {
          position: static;
          width: 100%;
          background: rgba(0, 0, 0, 0.9);
          margin-top: auto;
          transform: translateY(100%);
        }

     /*   .video-modal.active .reel-sidebar {
          transform: translateY(0);
        }*/

        .reel-container {
          flex-direction: column;
        }

        .reel-container video {
          flex: 1;
          height: 70%;
        }
      }





/* Blog Styles - تصميم جديد ومختلف */
.blog-page {
    background: var(--gradient-bg);
    min-height: 100vh;
}

.blog-hero {
    padding: 100px 0 60px;
    background: linear-gradient( 135deg, rgba(40, 167, 69, 0.1), rgba(32, 201, 151, 0.05) );
    position: relative;
    overflow: hidden;
}

    .blog-hero::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient( circle, rgba(40, 167, 69, 0.15) 0%, transparent 70% );
        border-radius: 50%;
        animation: float 8s ease-in-out infinite;
    }

    .blog-hero::after {
        content: "";
        position: absolute;
        bottom: -30%;
        left: -5%;
        width: 200px;
        height: 200px;
        background: radial-gradient( circle, rgba(32, 201, 151, 0.1) 0%, transparent 70% );
        border-radius: 50%;
        animation: float 6s ease-in-out infinite reverse;
    }


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    line-height: 1.2;
}



.hero-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 20px 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* Categories Filter */
.blog-filters {
    padding: 40px 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 25px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .filter-tab:hover,
    .filter-tab.active {
        background: var(--gradient-primary);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    }

/* Blog Content */
.blog-content {
    padding: 80px 0;
}

.blog-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Featured Post */
.featured-post {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 80px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

    .featured-post::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
    }

.featured-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 0;
    min-height: 400px;
}

.featured-text {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-badge {
    background: var(--gradient-primary);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 20px;
}

.featured-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
    line-height: 1.3;
}

.featured-excerpt {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

    .featured-meta i {
        color: var(--primary-color);
    }

.featured-btn {
    background: var(--gradient-primary);
    color: white;
    padding: 15px 30px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .featured-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
        text-decoration: none;
        color: white;
    }

.featured-image {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

    .featured-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient( 45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50% );
    }

/* Posts Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(366px, 1fr));
    gap: 30px;
}

.post-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

    .post-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(40, 167, 69, 0.15);
        border-color: rgba(40, 167, 69, 0.3);
    }

.post-image {
    height: 200px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    position: relative;
    overflow: hidden;
}

.post-content {
    padding: 25px;
}

.post-category {
    background: rgba(40, 167, 69, 0.1);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    width: fit-content;
    margin-bottom: 15px;
}

.post-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.post-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
}

.post-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.read-time {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Load More Section */
.load-more-section {
    text-align: center;
    margin-top: 60px;
    padding: 40px;
}

.load-more-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 15px 40px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .load-more-btn:hover {
        background: var(--primary-color);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    }

/* Back Button */
.back-btn {
    background: var(--gradient-primary);
    color: var(--text-light);
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    transition: all var(--transition-smooth);
    font-weight: 600;
}

    .back-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px var(--shadow-primary);
        text-decoration: none;
        color: var(--text-light);
    }

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .featured-content {
        grid-template-columns: 1fr;
    }

    .featured-image {
        height: 200px;
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }

    .filter-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .filter-tab {
        white-space: nowrap;
    }
}





.product-3d-indicator {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}

    .product-3d-indicator i {
        color: #20c997;
        animation: iconSpin 3s linear infinite;
    }

@keyframes iconSpin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}