/* Global Font */
* {
    font-family: 'Playfair Display', serif;
}


:root {
    --primary-color: #115139;
    --secondary-color: #61ce70;
}


/* Ensure the image container is set up correctly */
.product-image-container {
    /* We keep overflow: hidden; to maintain the clean shape */
    overflow: hidden;
}

/* Base style for the image */
.custom-shape-image {
    /* 1. Set the transition for a smooth animation */
    transition: transform 0.3s ease-out;

    /* 2. Set the initial scale to normal (100%) */
    transform: scale(1);

    /* Keep all your other custom shape styles (clip-path, etc.) here */
    /* ... */
}

/* HOVER EFFECT: Shrink the image */
.product-image-container:hover .custom-shape-image {
    /* Scale the image down to 95% of its original size */
    transform: scale(0.95);
}


.btn-whatsapp {
    /* Set the background and border to your specific green color */
    background-color: #61ce70;
    border-color: #61ce70;

    /* Ensure the text and icon color is white for contrast */
    color: white;

    /* Optional: Add a subtle hover effect to confirm interaction */
    transition: all 0.2s ease-in-out;
}

/* Optional: Make the button darken slightly on hover */
.btn-whatsapp:hover {
    background-color: #4aae59;
    /* A slightly darker shade of green */
    border-color: #4aae59;
    color: white;
}




/* Minimal Custom CSS for Small Icons */

.icon-container {
    /* Set a very small, fixed size for the container */
    width: 50px;
    height: 50px;

    /* Center the container itself (already handled by mx-auto, but good practice) */
    margin: 0 auto;

    /* Ensure any part of the image that might overflow is hidden */
    overflow: hidden;

    /* If you want the icon area to look like a small circle */
    /* border-radius: 50%; */
}

.custom-icon {
    /* Ensure the image is constrained to fit the container */
    max-width: 45px;
    height: auto;

    /* Optional: Ensure the image is block level for better alignment */
    display: block;
}




/* SINGLE PAGE IMAGE ZOOM CONTAINER */
.zoom-container {
    overflow: hidden;
}

.zoom-container img {
    transition: transform 0.2s ease;
}









.page-item.active .page-link {
    background: var(--primary-color) !important;
    color: white !important;
}

.pagination .page-item.disabled .page-link {
    background: #ddd !important;
    color: #888 !important;
    pointer-events: none;
}

.pagination .page-item.active .page-link {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

.pagination .page-item .page-link {
    background: white !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}



/* Footer hover effect */
.footer-item {
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-item i,
.footer-item a {
    transition: color 0.3s ease;
}

/* Hover effect */
.footer-item:hover i,
.footer-item:hover a {
    color: var(--bs-info) !important;
}