/* General Layout and Font Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #333;
    scroll-behavior: smooth;
}

/* Custom Animations for PageNotCreated */
@keyframes car-drive {
    0% {
        left: 6%;
        transform: translateX(0) scale(1);
    }
    45% {
        left: 45%;
        transform: translateX(0) scale(1);
    }
    50% {
        left: 50%;
        transform: translateX(0) scale(-1, 1); /* Flip car horizontally */
    }
    95% {
        left: 10%;
        transform: translateX(0) scale(-1, 1);
    }
    100% {
        left: 6%;
        transform: translateX(0) scale(1); /* Flip back */
    }
}

.animate-car-drive {
    animation: car-drive 8s infinite;
}

/* Tailwind doesn't have built-in animation delay classes, so we add them */
.delay-200 {
    animation-delay: 200ms;
}

.delay-500 {
    animation-delay: 500ms;
}

/* Form-specific Styles */
.form-field {
    margin-bottom: 1.2em;
}

input, textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

button {
    padding: 12px 20px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:disabled {
    background-color: #a0cffc;
    cursor: not-allowed;
}

/* Validation and Status Styles */
.form-field.is-invalid input,
.form-field.is-invalid textarea {
    border-color: #d9534f; /* Red for errors */
    border-width: 2px;
}

.error-message {
    color: #d9534f;
    font-size: 0.9em;
    margin-top: 5px;
}

.status {
    margin-top: 1em;
    padding: 1em;
    border-radius: 4px;
}

.status.submitting {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
}

.status.success {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
}

.status.error {
    background-color: #fff1f0;
    border: 1px solid #ffa39e;
}

select.custom-select {
    box-sizing: border-box;
      font-family: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  font-size: 1rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

#mobile-menu,
      #mobile-dropdown-priser,
      #mobile-dropdown-info {
        transition: all 0.3s ease-in-out;
      }
      .hero-video-container {
        height: 75vh;
      }
      .hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: -1;
      }