/* framework css would be the stylesheets that would control the structure of the webpage, it would start with the header and footer sections first and then other structural forms in the website content sections */

/* header styles */
#nav-buttons {	float: left; }
#lit, #mry, #biz {
	display: inline-block;
	padding: 0px 5px;
	border-bottom: 2px solid transparent;
}
#lit:hover, #mry:hover, #biz:hover {
	border-bottom: 2px solid #F5F3A7;
	text-decoration: none;
	opacity: 0.9;
}
.icon-desc {color: white;}
.icon>img {
	height: 30px;
	width: auto;
}
@media (max-width: 576px) {
	.icon-desc {
		display: none;
	}
}
@media (min-width: 577px) and (max-width: 992px) {
	.icon {
		display: none;
	}
}
header a {display: block
}
.scroll-right {
 height: auto;
 overflow-x: auto; 
 overflow-y: hidden;
 margin-bottom:20px; 
}
        /* 1. The Horizontal Scroll Container */
        .scroll-wrapper {
            display: flex;
            gap: 7px;
            overflow-x: auto; /* Enables horizontal scroll */
            padding-bottom: 15px; /* Space for the scrollbar */
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
        }

        /* 2. Style the scrollbar to make it look cleaner */
        .scroll-wrapper::-webkit-scrollbar {
            height: 8px;
        }
        .scroll-wrapper::-webkit-scrollbar-track {
            background: #e0e0e0;
            border-radius: 10px;
        }
        .scroll-wrapper::-webkit-scrollbar-thumb {
            background: #bbb;
            border-radius: 10px;
        }

        /* 3. The Card: flex-shrink: 0 is vital here */
        .product-card {
            flex: 0 0 175px; /* Card won't shrink and stays 250px wide */
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 5px;
            border: 1px solid #ddd;
            overflow: hidden;
        }

        .product-image {
            padding: 15px;
            text-align: center;
			height:auto;
        }

        .product-image img {
            max-width: 100%;
            object-fit: contain;
        }

        /* 4. The Info & Button Alignment */
        .product-info {
            padding: 15px;
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Fills the vertical space */
        }

        .product-title {
            font-size: 15px;
            margin: 0 0 15px 0;
            color: #333; line-height:1.2;
            min-height: 2.8em; /* Optional: adds a bit more stability */
        }

        .product-button {
            margin-top: auto; /* The "Anchor" that balances the tabs */
            background-color: #8db53f;
            color: white;
            text-align: center;
            padding: 5px;
            text-decoration: none;
            border-radius: 3px;
            font-weight: bold;
        }
        .product-button:hover {
            background-color: #ddd;
            text-decoration: none;
            color: black;
         }

/*-- sections --*/
section:nth-child(even){
  background-color: #fafcd7;
  }
 
 
/* footer styles */
footer, footer a, .places {color: #e5e5e5;}
footer a {opacity: 0.8; display: block}
footer a:hover {opacity: 1; color: #F5F3A7; text-decoration: none; }

.places {
   display: inline-block;
   border-bottom: 1px solid transparent;
   padding-left: 5px;
   padding-right: 5px;
   opacity: 0.8; 
   }
.places:hover {
   border-bottom: 1px solid #F5F3A7;
   cursor: pointer;
   }