/* styles.css */

/* Root variables for light and dark themes */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --primary-color: #0066ff;
    --secondary-color: #f8f9fa;
    /* Fixed overlay color to prevent image changes */
    --overlay-color: rgba(0, 0, 0, 0.6);
}

body.dark-mode {
    --background-color: #000000;
    --text-color: #ffffff;
    --primary-color: #0066ff;
    --secondary-color: #1e1e1e;
    /* Overlay color remains the same */
    --overlay-color: rgba(0, 0, 0, 0.6);
}

.footer{
    background-color: #1e1e1e;
}
header {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Tajawal', sans-serif, Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Rubik', sans-serif, Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
}

.header, .footer {
    background-color: var(--secondary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0056d4;
    border-color: #0056d4;
}

.btn-outline-light {
    color: var(--text-color);
    border-color: var(--text-color);
}

.btn-outline-light:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

.form-container, .working-hours, .location-container {
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: 20px;
}

iframe {
    border: none;
    border-radius: 8px;
    width: 100%;
    height: 300px;
}

.carousel-img {
    object-fit: cover;
    height: 75vh;
}

#logo {
    object-fit: cover;
    height: 75vh;
}

.overlay {
    /* Overlay color is fixed to prevent changes in images */
    /*background-color: var(--overlay-color);*/
}

#theme-toggle {
    border: none;
    background: none;
    color: var(--text-color);
}

#theme-toggle:hover {
    color: var(--primary-color);
}

a {
    color: var(--text-color);
    text-decoration: none;
}

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

.navbar, .footer {
    background-color: var(--secondary-color);
}

.navbar a, .footer a {
    color: var(--text-color);
}

.navbar a:hover, .footer a:hover {
    color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
}

p, li {
    color: var(--text-color);
}

.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.zoom:hover {
    transform: scale(1.02);    
    transition: transform .5s; /* Animation */

}

.zoom {
    transform: scale(1.0);    
    transition: transform .5s; /* Animation */

}