/* Custom CSS for El-Mat Website */

/* Color variables */
:root {
  --el-mat-blue: #0d6efd;  /* Primary blue color */
  --el-mat-yellow: #ffc107;  /* Warning yellow color */
  --el-mat-dark: #212529;  /* Dark color */
  --el-mat-light: #f8f9fa;  /* Light color */
}

/* General styling */
body {
  font-family: 'Roboto', sans-serif;
  color: var(--el-mat-dark);
}

/* Hero section background styling */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
              url('https://images.unsplash.com/photo-1555963966-b7ae5404b6ed?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center;
  background-size: cover;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* Minimum heights for different sections */
.min-vh-50 {
  min-height: 50vh;
}

/* Navbar styling */
.navbar-brand img {
  filter: brightness(0) invert(1);
}

/* Cards hover effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Testimonial cards */
.card.h-100 {
  height: 100%;
}

/* Button styling */
.btn-primary {
  background-color: var(--el-mat-blue);
  border-color: var(--el-mat-blue);
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

.btn-warning {
  background-color: var(--el-mat-yellow);
  border-color: var(--el-mat-yellow);
}

.btn-warning:hover {
  background-color: #ffca2c;
  border-color: #ffc720;
}

/* Gallery filter buttons */
.gallery-filter {
  cursor: pointer;
}

.gallery-filter.active {
  background-color: var(--el-mat-blue);
  color: white;
}

/* Footer styling */
footer {
  background-color: var(--el-mat-dark);
}

footer a:hover {
  opacity: 0.8;
}

/* Contact form */
.form-control:focus {
  border-color: var(--el-mat-blue);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section {
    min-height: 50vh;
  }
  
  h1.display-4 {
    font-size: 2.5rem;
  }
  
  h2.display-5 {
    font-size: 2rem;
  }
  
  .lead {
    font-size: 1rem;
  }
}