@font-face {
    font-family: 'Custom';
    src: url('/fonts/AveriaLibre-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Custom2';
    src: url('/fonts/Quicksand-Regular.ttf') format('truetype');
}

html {
    font-size: 20px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: Custom2;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Style the close button */
.btn-close {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* White color for the close icon */
}

.btn-close:hover {
    background-color: rgba(255, 255, 255, 0.7); /* Highlight effect on hover */
    color: black; /* Dark icon on hover */
}

.btn-primary, .btn-primary:disabled, .btn-secondary:hover {
    background-color: #8F0B43;
}

.btn-secondary, .btn-primary:hover {
    background-color: #D6A75C;
}

/* Ensure cards are taller */
.card {
    height: auto; /* Adjust height for taller cards */
    position: relative;
    overflow: hidden; /* Prevent overflow for hover effects */
}

/* Container for the image */
.card-img-container {
    height: 100%; /* Top part of the card height for the image */
    width: 100%;
    overflow: hidden; /* Ensures no overflow */
}

/* Image styling */
.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio and fill space */
}

/* Overlay (hidden by default) */
.card-body.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%; /* Remaining part of the card */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition */
}

/* Show overlay on hover */
.card:hover .card-body.overlay {
    opacity: 1; /* Fully visible on hover */
}

/* Ensure proper alignment and centering */
.card-body.overlay h5,
.card-body.overlay p {
    margin: 0;
    padding: 0;
}

/* Style for the card images */
.clickable-card {
    cursor: pointer; /* Change the cursor to a pointer */
    transition: transform 0.2s ease, border 0.2s ease, opacity 0.2s ease; /* Add smooth transition */
}

/* When hovering over the card */
.clickable-card:hover {
    transform: scale(1.1); /* Slightly enlarge the card */
    opacity: 0.8; /* Make the card slightly transparent */
}

/* Style for the thumbnail images */
.clickable-thumbnail {
    cursor: pointer; /* Change the cursor to a pointer */
    transition: transform 0.2s ease, border 0.2s ease, opacity 0.2s ease; /* Add smooth transition */
}

/* When hovering over the thumbnail */
.clickable-thumbnail:hover {
    transform: scale(1.1); /* Slightly enlarge the thumbnail */
    opacity: 0.8; /* Make the thumbnail slightly transparent */
}

.container{
    padding-top: 3%
}

/* Fullscreen image */
.fullscreen-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensure the image scales appropriately */
    display: block;
}

.full-size-watermarked-image {
    background-size: cover;
    background-position: center;
    opacity: 0.3; /* Watermark effect */
    width: 100%; /* Ensure the image fits the container */
    height: 100%; /* Use an explicit height if the image is known, or let the content decide */
}

.gallery-thumbnail {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-thumbnail:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.home-index-container {
    display: flex;
    flex-direction: column;
}

/* Style the image */
.home-index-image {
    width: 100%;
    max-width: 50%; /* Limit max width for larger screens */
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: 10px; /* Optional for rounded corners */
    margin: 0 auto; /* Center the image */
}

/* Text styling */
.home-index-text {
    padding-top: 5%;
    text-align: left;
    width: 50%;
    margin: 0 auto; /* Center the image */
}

/* Video Styling - Same as Image */
.home-index-video {
    width: 100%;
    max-width: 50%; /* Limit max width for larger screens */
    height: auto; /* Maintain aspect ratio */
    display: block;
    border-radius: 10px; /* Optional for rounded corners */
    margin: 0 auto; /* Center the video */
    object-fit: cover; /* Ensures the video scales properly */
}

/* Main image with zoom effect */
.main-image {
    transition: transform .6s ease; /* Smooth zoom effect */
    width: 100%; /* Ensure the image fits the container */
    height: auto;
}

/* Masonry Container */
.masonry-container {
    column-count: 3; /* Number of columns */
    column-gap: 0; /* No gaps between columns */
}

/* Masonry Items */
.masonry-item {
    break-inside: avoid; /* Prevent items from breaking across columns */
    margin: 0; /* Remove any default margin */
    padding: 3px; /* Remove padding between items */
}

/* Images */
.masonry-item img {
    width: 100%; /* Ensure images fit their container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
}

/* Smooth fade-in effect for the modal */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Modal overlay customization */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important; /* Dark semi-transparent background */
}

/* Remove unwanted padding */
.modal-body {
    padding: 0 !important;
    overflow: hidden; /* Prevent scrollbars unless necessary */
    position: relative;
}

/* Remove padding and background from the modal */
.modal-content {
    background-color: transparent !important; /* Transparent background */
    border: none !important; /* Remove borders */
    box-shadow: none !important; /* Remove any shadow */
}

.navbar-logo {
    width: 75px;
    height: auto
}

.nav-link.active {
    color: #ffffff !important; /*#D6A75C*/ /*#8F0B43*/
    background-color: #8F0B43; /* Highlight background */
    border-radius: 10px; /* Optional for better aesthetics */
}

.price-container {
    text-align: left; /* Align the entire line (Price label and value) to the right */
}

.product-edit-image-container {
    position: relative; /* Ensures that the text is positioned relative to this container */
    width: auto; /* Image will determine the width */
    max-width: 100%; /* Make sure the image doesn't exceed container's width */
    height: 100%; /* Height is based on the image's height */
    display: inline-block; /* Allows the container to shrink to fit the image */
}

.product-name {
    font-size: 3.5vh; /* Adjust this value to change the size */
    font-weight: bold; /* Optional: Make it bold for emphasis */
}

/* Style for the price */
.product-price {
    font-size: 3vh; /* Adjust this value to change the size */
    font-weight: bold; /* Optional: Make it bold for emphasis */
}

.products-customer-container{
    padding-top: 2%;
}

/* Container for the main image */
.products-customerdetails-image-container {
    position: relative;
    overflow: hidden; /* Ensure the zoomed image doesn't overflow */
    width: 100%;
    height: auto;
}

/* Make sold products appear grayed out */
.sold-out {
    filter: grayscale(100%) brightness(80%); /* Gray out the image */
    pointer-events: none; /* Prevent clicking on sold-out items (optional) */
}

/* "Sold Out" overlay */
.sold-overlay {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Dark transparent background */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 10;
    text-align: center;
}


@media (max-width: 480px) {

    .home-index-text {
        font-size: 9vw; /* Further adjust for small mobile screens */
    }

    .masonry-container {
        column-count: 1; /* Single column for small screens */
    }
}

@media (max-width: 768px) {
    .home-index-image {
        max-width: 100%; /* Enable max width for smaller screens */
    }

    .home-index-text {
        font-size: 7vw; /* Further adjust for small mobile screens */
        width: 100%; /* Allow text to take up full width */
        text-align: center; /* Optional: Center-align text on smaller screens */
    }

    .home-index-video {
        max-width: 100%; /* Enable max width for smaller screens */
    }

    .masonry-container {
        column-count: 1; /* Single column for small screens */
    }
    
    html {
        font-size: 16px;
    }
}


@media (min-width: 769px) and (max-width: 1200px) {
    .masonry-container {
        column-count: 2; /* Two columns for tablets */
    }
}