html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Sea/Ocean Theme Color Palette */
:root {
  --sea-primary: #4A90E2;
  --sea-secondary: #5B9BD5;
  --sea-accent: #20B2AA;
  --sea-deep: #2E86AB;
  --sea-light: #87CEEB;
  --sea-teal: #48D1CC;
  --sea-success: #20B2AA;
  --sea-info: #4A90E2;
}

/* Logo styling */
.navbar-brand img {
  max-height: 140px;
  width: auto;
  object-fit: contain;
}

/* Sea-themed buttons */
.btn-primary {
  background: linear-gradient(135deg, #4A90E2 0%, #5B9BD5 100%);
  border-color: #4A90E2;
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2E86AB 0%, #4A90E2 100%);
  border-color: #2E86AB;
  color: white;
}

.btn-success {
  background: linear-gradient(135deg, #20B2AA 0%, #48D1CC 100%);
  border-color: #20B2AA;
  color: white;
}

.btn-success:hover {
  background: linear-gradient(135deg, #17A2B8 0%, #20B2AA 100%);
  border-color: #17A2B8;
  color: white;
}

.btn-info {
  background: linear-gradient(135deg, #87CEEB 0%, #5B9BD5 100%);
  border-color: #87CEEB;
  color: #1a365d;
}

.btn-info:hover {
  background: linear-gradient(135deg, #5B9BD5 0%, #4A90E2 100%);
  border-color: #5B9BD5;
  color: white;
}

.btn-warning {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-color: #FFD700;
  color: #1a365d;
}

.btn-danger {
  background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
  border-color: #FF6B6B;
  color: white;
}

.btn-secondary {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
  border-color: #6c757d;
  color: white;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #4A90E2;
}

/* Sea-themed badges */
.badge.bg-primary {
  background: linear-gradient(135deg, #4A90E2 0%, #5B9BD5 100%) !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, #20B2AA 0%, #48D1CC 100%) !important;
}

.badge.bg-info {
  background: linear-gradient(135deg, #87CEEB 0%, #5B9BD5 100%) !important;
  color: #1a365d !important;
}

.badge.bg-warning {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
  color: #1a365d !important;
}

/* Cards with sea theme */
.card {
  border: 1px solid #E3F2FD;
}

.card-header {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1a365d;
  font-weight: 600;
}

/* Links */
a {
  color: #4A90E2;
}

a:hover {
  color: #2E86AB;
}

/* Navbar links */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.95);
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #E3F2FD;
}

/* Dropdown menu */
.dropdown-menu {
  border: 1px solid #E3F2FD;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  color: #1a365d;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Home page specific styles */
.hero-section {
  position: relative;
  overflow: hidden;
}

.category-card img,
.product-card img {
  transition: transform 0.3s ease;
}

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

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better card shadows */
.card {
  border-radius: 10px;
}

/* Navbar improvements */
.navbar {
  padding: 1rem 0;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}