@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Montserrat:wght@400;700&family=Pacifico&display=swap");

:root {
  --eleis-red: #ff0000;
  --font-primary: "Roboto", sans-serif;
  --font-secondary: "Montserrat", sans-serif;
  --font-accent: "Pacifico", cursive;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-secondary);
}

/* Navigation */
.uk-navbar-container {
  background: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.uk-navbar-nav > li > a {
  font-family: var(--font-primary);
  transition: color 0.2s ease-in-out;
}

.uk-navbar-nav > li:hover > a {
  color: var(--eleis-red);
}

/* Colors */
.eleis-red {
  color: var(--eleis-red);
}

/* Buttons */
.uk-button {
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.uk-button-primary {
  background-color: var(--eleis-red);
}

.uk-button-primary:hover {
  background-color: #dd0000;
  transform: translateY(-2px);
}

/* Cards */
.uk-card {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Selection */
::selection {
  background-color: rgba(255, 0, 0, 0.2);
  color: #333;
}

/* Forms */
.uk-form-icon {
  color: var(--eleis-red);
}

.uk-input,
.uk-textarea {
  transition: border-color 0.3s ease;
}

.uk-input:focus,
.uk-textarea:focus {
  border-color: var(--eleis-red);
}

/* Map */
#map {
  height: 300px;
  width: 100%;
  border-radius: 8px;
}

/* Slideshow */
.uk-slideshow {
  background: #f8f8f8;
}

.uk-slideshow-items {
  max-height: 80vh !important;
}

.uk-slideshow-items img {
  object-fit: contain !important;
  padding: 0rem;
  background: rgba(0, 0, 0, 0.02);
}

.uk-dotnav {
  bottom: 25px !important; /* Adjust this value to move dots higher */
}

.uk-dotnav > * > * {
  border-color: var(--eleis-red);
  transition: all 0.3s ease;
}

.uk-dotnav > .uk-active > * {
  background-color: var(--eleis-red);
  transform: scale(1.2);
}

/* Section Transitions */
.uk-section {
  position: relative;
  overflow: hidden;
}

/* Animation Classes */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 960px) {
  .uk-slideshow-items {
    min-height: 80vh !important;
  }

  .uk-card-body {
    padding: 20px;
  }

  .uk-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 640px) {
  .uk-slideshow-items {
    min-height: 80vh !important;
  }

  .uk-grid {
    margin-left: -15px;
  }

  .uk-grid > * {
    padding-left: 15px;
  }
}

/* Hero Content */
#accueil .uk-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

#accueil .uk-heading-medium {
  color: var(--eleis-red);
  margin-bottom: 20px;
}

#accueil .uk-text-lead {
  margin-bottom: 30px;
}

/* Error message */
#form-error {
  background-color: #f0506e;
  color: #fff;
  padding: 15px;
  border-radius: 4px;
}