/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 a {color:#177078}
 #header .header-top {background-color:#f3e1da; padding: 0.5rem 0}
 #header .header-top a[data-depth="0"] {color:#177078; text-transform:none; font-family:"Rochester", sans-serif; font-size:1.6rem}
 #header .header-nav .cart-preview.active {background-color:#177078 }
 .btn {border-radius:50px}
 .btn-primary {background-color:#177078}
 .product-miniature .product-title{text-transform:none}
 .product-miniature .product-title a {font-size: 1.1rem}
 .product-features > dl.data-sheet dd.value{text-transform:none}
 body, html{font-family : "Mukta", sans-serif;}
 .h1 {font-family: "Rochester", sans-serif; text-transform: none; color: #177078; font-size: 2rem}
 #custom-text h2 {color: #177078; font-family: "Rochester", sans-serif; text-transform:none; font-size:2rem}
 .h2 {color: #177078; font-family:"Rochester", sans-serif; font-size:2rem; text-transform: none}
 p, .page-content.page-cms ul {font-size:1.1rem;margin-top:0.9375rem;color:#232323}
 .product-price {color: #177078}
 .tabs .nav-tabs .nav-link.active {color: #177078; border-bottom-color: #177078}
 .product-images > li.thumb-container > .thumb.selected {border-color: #177078}
 .product-images > li.thumb-container > .thumb:hover {border: #177078 1px solid}
 .tabs .nav-tabs .nav-link:hover{border-bottom:#177078 1px solid}
 .product-prices .tax-shipping-delivery-label{display:inline-block;margin-right:10px;}
 .ui-widget{font-family:"Mukta", sans-serif;}
.image-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .image-card {
            text-align: center;
        }

        .image-card img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .image-card h2 {
            margin-top: 10px;
            font-size: 1.2em;
            color: #232323;
        }

        @media screen and (max-width: 600px) {
            .image-container {
                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
            }
        }

#product-modal .modal-content .modal-body .image-caption{display:none;}
#product-modal .modal-content .modal-body {display: block;}