/* Custom Cursor Styles */
:root {
  --cursor-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="%23000" stroke-width="1.5"/></svg>') 12 12, auto;
  --cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF7A00" d="M13 3v17.5l-5-5-3.5 3.5L13 24l8.5-5.5-3.5-3.5-5 5V3z"/></svg>') 12 12, pointer;
  --cursor-zoom: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="%23FF7A00" stroke-width="1.5"/><path stroke="%23FF7A00" stroke-width="1.5" stroke-linecap="round" d="M12 8v8M8 12h8"/></svg>') 12 12, zoom-in;
  --cursor-text: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%231a1a1a" d="M5 4v3h5.5v12h3V7H19V4z"/></svg>') 12 12, text;
  --cursor-grab: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23000" d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>') 12 12, grab;
  --cursor-progress: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF7A00" d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2zm0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8zm0-14a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V7a1 1 0 0 0-1-1z"/></svg>') 12 12, progress;
  --cursor-color: rgba(255, 122, 0, 0.3);
  --cursor-active-color: rgba(255, 122, 0, 0.2);
  --cursor-size: 20px;
  --cursor-active-size: 40px;
  --cursor-transition: all 0.2s ease;
}

body {
  cursor: var(--cursor-default);
  overflow-x: hidden; /* Prevent horizontal scroll issues with cursor follower */
}

/* Interactive Elements */
a, button, .about-tag, .play-btn, .circle-box, .info-box, .feature, .stat-item, .social-link, .form-submit, .quote-button, .hamburger {
  cursor: var(--cursor-pointer);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

a:hover, button:hover, .about-tag:hover, .play-btn:hover, .circle-box:hover, .info-box:hover, .feature:hover, .stat-item:hover, .social-link:hover, .form-submit:hover, .quote-button:hover, .hamburger:hover {
  opacity: 0.9;
}

/* Zoomable Elements */
.img-left, .img-right, .worker-image {
  cursor: var(--cursor-zoom);
  
}

/* Text Input Elements */
input, textarea, select {
  cursor: var(--cursor-text);
}

/* Draggable Elements */
.draggable, .sortable-item {
  cursor: var(--cursor-grab);
}

/* Loading States */
.loading, [data-loading="true"] {
  cursor: var(--cursor-progress);
}

/* Cursor Follower */
.cursor-follower {
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background-color: var(--cursor-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: var(--cursor-transition);
  mix-blend-mode: multiply;
  will-change: transform, width, height; /* Optimize performance */
}

/* Active State for Cursor Follower */
.cursor-active {
  width: var(--cursor-active-size);
  height: var(--cursor-active-size);
  background-color: var(--cursor-active-color);
  transform: translate(-50%, -50%) scale(1.2);
}

/* Hover Effects for Cursor Follower */
a:hover ~ .cursor-follower,
button:hover ~ .cursor-follower,
.about-tag:hover ~ .cursor-follower,
.play-btn:hover ~ .cursor-follower,
.circle-box:hover ~ .cursor-follower,
.info-box:hover ~ .cursor-follower,
.feature:hover ~ .cursor-follower,
.stat-item:hover ~ .cursor-follower,
.social-link:hover ~ .cursor-follower,
.form-submit:hover ~ .cursor-follower,
.quote-button:hover ~ .cursor-follower,
.hamburger:hover ~ .cursor-follower {
  background-color: rgba(255, 122, 0, 0.5);
  transform: translate(-50%, -50%) scale(1.5);
}

/* Zoom Cursor Follower Effect */
.img-left:hover ~ .cursor-follower,
.img-right:hover ~ .cursor-follower,
.worker-image:hover ~ .cursor-follower {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 122, 0, 0.4);
  border: 2px solid #FF7A00;
}

/* Text Cursor Follower Effect */
input:focus ~ .cursor-follower,
textarea:focus ~ .cursor-follower,
select:focus ~ .cursor-follower {
  width: 30px;
  height: 30px;
  background-color: rgba(26, 26, 26, 0.3);
  border-radius: 10%;
}

/* Animation for Cursor Follower */
@keyframes cursorPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
}

.cursor-follower {
  animation: cursorPulse 2s infinite ease-in-out;
}

/* Disabled State */
:disabled, [disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

:disabled ~ .cursor-follower,
[disabled] ~ .cursor-follower {
  background-color: rgba(100, 100, 100, 0.3);
  width: 25px;
  height: 25px;
  animation: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .cursor-follower {
    display: none; /* Hide cursor follower on mobile devices */
  }

  body, a, button, .about-tag, .play-btn, .circle-box, .info-box, .feature, .stat-item, .social-link, .form-submit, .quote-button, .hamburger, .img-left, .img-right, .worker-image, input, textarea, select {
    cursor: auto; /* Revert to default cursor on mobile */
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .cursor-follower {
    background-color: #000;
    border: 2px solid #FFF;
  }

  .cursor-active {
    background-color: #FFF;
    border-color: #000;
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .cursor-follower {
    transition: none;
    animation: none;
  }
}


 /* Construction Gallery Section */
        .construction-gallery {
            background-color: #ffffff; /* White background */
            padding: 4rem 0;
        }

        .construction-gallery-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .construction-gallery-header .section-title {
            color: #800020; /* Burgundy */
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .construction-gallery-header .section-title span {
            color: #36454F; /* Charcoal */
        }

        .construction-gallery-header p {
            color: #36454F; /* Charcoal */
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }

        .construction-gallery-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 3rem;
        }

        .construction-filter-btn {
            padding: 0.6rem 1.5rem;
            background-color: transparent;
            border: 1px solid #36454F; /* Charcoal border */
            border-radius: 50px;
            font-family: inherit;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #36454F; /* Charcoal text */
            position: relative;
            overflow: hidden;
        }

        .construction-filter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(128, 0, 32, 0.3), transparent); /* Burgundy shimmer */
            transition: left 0.5s ease;
        }

        .construction-filter-btn:hover::before {
            left: 100%;
        }

        .construction-filter-btn:hover,
        .construction-filter-btn.active {
            background-color: #800020; /* Burgundy */
            color: #ffffff; /* White text */
            border-color: #800020; /* Burgundy */
            transform: scale(1.05);
        }

        .construction-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .construction-gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            height: 250px;
            cursor: pointer;
            background-color: #f5f5f5; /* Light gray background for items */
            box-shadow: 0 4px 8px rgba(54, 69, 79, 0.1); /* Charcoal shadow */
        }

        .construction-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .construction-gallery-item:hover img {
            transform: scale(1.1) rotate(2deg);
        }

        .construction-gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem;
            background: linear-gradient(to top, rgba(128, 0, 32, 0.8), transparent); /* Burgundy gradient */
            color: #ffffff; /* White text */
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .construction-gallery-item:hover .construction-gallery-overlay {
            transform: translateY(0);
        }

        .construction-gallery-overlay h3 {
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            color: #ffffff; /* White */
        }

        .construction-gallery-overlay p {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
        }

        .construction-gallery-cta {
            text-align: center;
            margin-top: 4rem;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: #800020; /* Burgundy */
            color: #ffffff; /* White */
            border: 2px solid #800020; /* Burgundy */
        }

        .btn-primary:hover {
            background-color: #6a001b; /* Darker burgundy */
            border-color: #6a001b; /* Darker burgundy */
        }