/* style.css */
:root {
    --orange: #e26c2e;
}

h1, h2, h3, span, p {
    font-family: 'Teko', sans-serif;
}
body {
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    font-weight: 500;
}

.text-custom-orange {
    color: var(--orange);
}

/* Custom scroll-margin-top for header offset */
.scroll-mt-header {
    scroll-margin-top: 6rem; /* Adjust this value based on your header height */
}

#carousel {
    cursor: grab; /* Indicates it's draggable */
}

#carousel.active-drag {
    cursor: grabbing; /* Changes when actively dragging */
    user-select: none; /* Prevents text selection during drag */
}

/* Custom Scrollbar for Webkit Browsers (Chrome, Safari, Edge, Opera) */
#carousel::-webkit-scrollbar {
    height: 8px; /* For horizontal scrollbar */
    width: 8px;  /* For vertical scrollbar (though not needed here) */
}

#carousel::-webkit-scrollbar-track {
    background: #2D3748; /* Darker neutral background for the track */
    border-radius: 10px;
}

#carousel::-webkit-scrollbar-thumb {
    background-color: #e26c2e; /* Your orange brand color */
    border-radius: 10px;
    border: 2px solid #2D3748; /* Darker neutral border to make thumb appear smaller */
}

/* Optional: Hover state for the thumb */
#carousel::-webkit-scrollbar-thumb:hover {
    background-color: #f08c4e; /* Slightly lighter orange on hover */
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #666;
    margin: 1em 0;
    padding: 0;
}

.partial-orange-line {
    width: 50%; /* The container for our line */
    height: 3px;
    /* Orange for the middle 20% (from 40% to 60%), fading out on either side */
    background: linear-gradient(to right, transparent 0%, var(--orange) 40%, var(--orange) 60%, transparent 100%);
    margin: 10px auto; /* Keeps the line container centered */
}

/* Custom CSS for the "CONTACTA-NOS" heading with the pseudo-element line */
.partial-orange-line-heading {
    position: relative; /* Essential for positioning the ::after pseudo-element */
    display: inline-block; /* Makes the h3's width fit its content */
    padding-bottom: 8px; /* Space between text and the line */
    /* text-neutral-200 will handle the grayish text color */
}

.partial-orange-line-heading::after {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Position relative to .partial-orange-line-heading */
    left: 50%; /* Start from the middle horizontally */
    bottom: 0; /* Position at the very bottom of the h3 */
    transform: translateX(-50%); /* Pull it back by half its own width to center it */

    width: 100%; /* Make the pseudo-element span the full width of the h3's text content */
    max-width: 150px; /* Adjust this to control the maximum visible length of the line */
    height: 3px;
    background: linear-gradient(to right, transparent 0%, var(--orange) 40%, var(--orange) 60%, transparent 100%);
    /* Adjust 20% and 80% to control the solid portion vs. fade */
}

.arrow {
    border: solid var(--orange);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-right: 20px;
    margin-top: 15px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* Custom styles for carousel arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.75rem; /* p-3 */
    background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800 bg-opacity-50 */
    color: white;
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    transition: all 300ms ease-in-out; /* transition-all duration-300 */
}

.carousel-arrow:hover {
    background-color: rgba(31, 41, 55, 0.75); /* hover:bg-opacity-75 */
}

.carousel-arrow.left-4 {
    left: 1rem; /* left-4 */
}

.carousel-arrow.right-4 {
    right: 1rem; /* right-4 */
}

/* Hide scrollbar for gallery, but allow scrolling */
.gallery-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.gallery-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Style for reCAPTCHA badge */
.grecaptcha-badge {
    bottom: 20px !important; /* Adjust as needed */
    right: 20px !important; /* Adjust as needed */
}

.grecaptcha-badge {
    visibility: hidden;
}