body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Montserrat with fallbacks */
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.3rem;
}

/* Optionally, adjust specific elements if needed */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* Make headings bold */
    font-size: 1.2rem;
}


a {
    color: #999999; /* Blue */
    text-decoration: none;
}

a:visited {
    color: #999999; /* Purple */
}

a:hover {
    color: #999999; /* Red */
    text-decoration: underline;
}

a:active {
    color: #999999; /* Green */
}


/* Style the search form container */
.search {    padding-top: 12px;
padding-left: 5px;
    display: flex; /* Align input and button horizontally */
    align-items: bottom; /* Vertically center the input and button */
}

/* Style the search input */
.search input[type="text"] {
 /* Smaller padding for a smaller input */
    font-size: 12px; /* Adjust font size if needed */
    width: 150px; /* Set a fixed width for the input */
    margin-right: 5px; /* Add spacing between input and button */
    border: 1px solid #ccc; /* Add a border for better appearance */
    border-radius: 4px; /* Optional: Add rounded corners */
}

/* Style the search button */
.search button {
    padding: 5px 10px; /* Smaller padding for a smaller button */
    font-size: 12px; /* Adjust font size to match the input */
    background-color: #000000; /* Primary button color */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 0px; /* Optional: Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover effect for the button */
.search button:hover {
    background-color: #000000; /* Darker shade on hover */
}



.btn-primary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 0px; /* Optional: Add rounded corners */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #000000 !important; /* Slightly darker shade for hover/focus/active states */
    border-color: #000000 !important;
}


    /* Custom CSS for white navbar background */
.navbar-default {
    background-color: #ffffff;
    border-color: #e7e7e7;
    font-size: 11px; /* This sets base font size for the navbar */
}

/* Target the dropdown menu specifically */
.navbar-default .dropdown-menu {
    font-size: 11px;
}

/* Target the dropdown menu items */
.navbar-default .dropdown-menu > li > a {
    font-size: 11px;
    padding: 5px 20px; /* Optional: adjust padding for smaller text */
}

.navbar-default .navbar-nav > li > a {
    color: #333333;
    font-size: 11px; /* This affects the main nav items */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #000000;
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #333333;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #333333;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #f8f8f8;
}
    .hero {
        background-image: url('img/intaglioarts-main-image.png');
        background-size: cover;
        background-position: center;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
    }

    .carousel-inner img {
        width: 100%;
        height: auto;
    }

    .collections-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px; /* Adds space between the collection boxes */
    }

    .collection-box {
        width: calc(33.333% - 20px); /* Three boxes per row with space in between */
        margin-bottom: 20px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        text-align: center;
        box-sizing: border-box; /* Ensures padding and border are included in width */
    }

    .collection-box img {
        max-width: 100%;
        height: auto;
        width: 200px; /* Set image width to 200px */
        border-radius: 8px;
    }

    .collection-box h3 {
    font-size: 1.2rem;
        margin: 15px 0;
    }

    .collection-box p {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .collection-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .collection-price {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
    }

    .carousel-inner .item {
        transition: transform 0.5s ease-in-out;
    }

    .carousel-inner .item .row {
        display: flex;
        justify-content: space-between;
    }

    .carousel-inner .item .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .carousel-control {
        width: 5%;
        background-image: none;
    }

    .carousel-control.left, .carousel-control.right {
        background-image: none;
    }

    /* Footer Styles */
    .footer {
        background-color: #000000; /* Black background */
        color: #ffffff; /* White text */
        padding: 40px 0; /* Add some padding */
        text-align: center; /* Center-align text */
    }

    .footer .copyright {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px; /* Limit width for better readability */
        margin: 0 auto; /* Center the content */
        padding: 0 20px; /* Add some padding */
    }

    .footer .header-social-links {
        display: flex;
        gap: 15px; /* Space between icons */
    }

    .footer .header-social-links a {
        color: #ffffff; /* White icons */
        font-size: 20px; /* Icon size */
        transition: color 0.3s ease; /* Smooth transition for hover effect */
    }

    .footer .header-social-links a:hover {
        color: #cccccc; /* Light gray on hover */
    }

    /* Responsive adjustments */
    @media screen and (max-width: 900px) {
        .collection-box {
            width: calc(50% - 20px); /* Two collections per row on smaller screens */
        }
    }

    @media screen and (max-width: 600px) {
        .collection-box {
            width: 100%; /* Single column on very small screens */
        }
    }



/* Style the product container */
h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: bolder;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}
h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}
h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: .75rem;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.product-container {
    display: flex;
    flex-wrap: wrap; /* Allow the content to wrap in smaller screens */
    gap: 20px; /* Space between image and info */
    margin-bottom: 20px; /* Space below the container */
}

/* Style the product image */
.product-image {
    flex: 1 1 300px; /* Make the image flexible and set a minimum width */
    max-width: 40%;  /* Limit the maximum width */
}

.product-image img {
    width: 100%; /* Make the image fill its container */
    height: auto; /* Maintain aspect ratio */
}

/* Style the product info */
.product-info {
    flex: 1 1 300px; /* Make the product info flexible and set a minimum width */
    max-width: 50%;  /* Limit the maximum width */
}

/* Style the Stripe button */
.pp-button {
    background-color: #C29B0C; /* Stripe's brand color */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 10px; /* Space between PayPal and Stripe buttons */
    border-radius: 5px;
}

.pp-button:hover {
    background-color: #5469D4; /* Darker shade for hover effect */
}


/* Style the Stripe button */
.stripe-button {
    background-color: #4400AA; /* Stripe's brand color */
    color: white;
    border: none;
    padding: 5px 15px;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 10px; /* Space between PayPal and Stripe buttons */
    border-radius: 5px;
}

.stripe-button:hover {
    background-color: #5469D4; /* Darker shade for hover effect */
}

/* Make the layout more compact on smaller screens */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column; /* Stack the image and info vertically */
        align-items: center; /* Center the content */
    }

    .product-image {
        max-width: 100%; /* Allow the image to take full width on smaller screens */
    }

    .product-info {
        max-width: 100%; /* Allow the info to take full width on smaller screens */
    }

    /* Optional: Make the text size smaller for mobile */
    .product-info h1 {
        font-size: 1.5em;
    }

    .product-info p {
        font-size: 1em;
    }
}