@import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bayon&display=swap');

.loop-btn {
    border-radius: 6px; /* Adjust the px value to increase or decrease the radius */
   font-size: 4rem; /* Adjusted for responsive font size */
    font-weight: bold; /* Makes the font bold */
}

.loop-h1 {
    font-family: 'Calistoga', serif;
    font-size: 4rem; /* Adjusted for responsive font size */
    font-weight: bold; /* Makes the font bold */
}

@media (max-width: 600px) {
    .loop-h1 {
        font-size: 2.7rem; /* Smaller font size for mobile screens */
        line-height: 1.3; /* Adjust line height for better readability */
    }
}


.loop-btn-outline {
    background-color: white; /* Sets the background color to white */
    /* Include any other styling properties needed for this button */
}
.loop-h2 {
    font-family: 'Calistoga';
    font-size: 2rem; /* Adjusted for responsive font size */
    font-weight: bold; /* Makes the font bold */
}
@media (max-width: 600px) {
    .loop-h2 {
        font-size: 1.6rem; /* Smaller font size for mobile screens */
        line-height: 1.2; /* Adjust line height for better readability on small devices */
    }
}

/* Base styles for .loop-btn */
.loop-btn {
    padding: 12px 24px; /* Default padding */
    font-size: 16px; /* Default font size */
    /* other styles */
}

/* Media query for smaller screens (typically mobile devices) */
@media (max-width: 600px) {
    .loop-btn {
        padding: 8px 16px; /* Smaller padding */
        font-size: 14px; /* Smaller font size */
    }
}
.loop-bundle-image-container {
    display: none; /* This will hide the element */
}
.loop-h1 {
    padding: 2px; /* Applies padding uniformly on all sides */
}
/* Base styling for .loop-bundle-product-container might go here */
.loop-bundle-product-container {
    /* Existing styles */
}

/* Media query for mobile devices */
@media (max-width: 768px) { /* 768px is a common breakpoint for tablets and smaller devices */
    .loop-bundle-product-container {
        padding: 10px; /* Adds 10px of padding on all sides on mobile devices */
    }
}
/* Base styling for .loop-products-align might already be set for larger screens */
.loop-products-align {
    /* Existing styles such as display: flex; or display: grid; and gap: larger-value; */
}

/* Media query for mobile devices */
@media (max-width: 768px) { /* This is a common breakpoint for mobile devices */
    .loop-products-align {
        gap: 1px; /* Sets the gap to 1px for mobile */
    }
}
.loop-bundle-product-card-title {
    font-family: 'Bayon';
    font-size: 1.8rem; /* Adjusted for responsive font size */
    font-weight: bold; /* Makes the font bold */
}
@media (max-width: 600px) {
    .loop-bundle-product-card-title {
        font-size: 1.2rem; /* Smaller font size for mobile screens */
        line-height: 1.2; /* Adjust line height for better readability on small devices */
    }
}
/* Default styling for larger devices */
.loop-discounted-price {
    font-size: 14px;
    font-weight: bold;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .loop-discounted-price {
        font-size: 12px; /* Slightly smaller font size for mobile devices */
    }
}
.loop-product-price {
    font-size: 14px;
    
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .loop-product-price {
        font-size: 12px; /* Slightly smaller font size for mobile devices */
    }
}
.loop .pt-4 {
    padding-top: 0.1rem !important;  /* Adds equivalent of 20px padding at the top, marked as important */
    padding-bottom: 0.01rem !important;  /* Adds equivalent of 20px padding at the bottom, marked as important */
    /* other existing styles */
}
.loop .mt-4 {
    margin-top: 0.2rem !important;  /* Adds equivalent of 20px padding at the top, marked as important */
    margin-bottom: 0.01rem !important;  /* Adds equivalent of 20px padding at the bottom, marked as important */
    /* other existing styles */
}
.loop-text-p2 {
    font-size: 1.4rem !important; /* Adjusted for responsive font size, marked as important */
    padding-top: 10px !important; /* Adds margin above the element, marked as important */
}

@media (max-width: 600px) {
    .loop-text-p2 {
        font-size: 1.0rem !important; /* Smaller font size for mobile screens, marked as important */
        line-height: 1.2 !important; /* Adjust line height for better readability on small devices, marked as important */
        padding-top: 8px !important; /* Smaller margin for mobile screens, marked as important */
    }
}

.loop-image-product-lg img {
    width: 100% !important; /* Ensures the image uses the full width of its container */
    height: 100% !important; /* Maintains the natural aspect ratio */
    display: block !important; /* Removes extra space below the image */
    object-fit: cover !important; /* Ensures the image covers the container properly, might crop it */
}
}