/* ============================================================
   Product Gradient Bottom Banner
   Scoped to #section-products only
   ============================================================ */

/* --- Overlay: gradient instead of flat tint --- */#section-products .hovereffect .overlay { background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%) !important; transition: all 0.4s ease !important; } #section-products .hovereffect:hover .overlay { background: linear-gradient(to top, rgba(0,133,62,0.92) 0%, rgba(0,133,62,0.35) 55%, rgba(0,133,62,0) 100%) !important; } /* --- H2: positioned at bottom, no dark box --- */#section-products .hovereffect h2 { text-transform: uppercase; color: #fff; text-align: left !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; font-weight: 700; padding: 14px 16px !important; background: none !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); transform: translateY(0) !important; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transition: all 0.4s ease !important; -webkit-transition: all 0.4s ease !important; z-index: 10; letter-spacing: 0.5px; margin-top: 0 !important; } #section-products .hovereffect:hover h2 { bottom: 38px !important; transform: translateY(0) !important; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; } /* --- Sublabel link: slide-in from bottom, left-aligned, fixed position --- */#section-products .hovereffect a.info, #section-products .hovereffect a.info2, #section-products .hovereffect a.info3, #section-products .hovereffect a.info4 { display: block !important; text-decoration: none; text-transform: none !important; color: #fff; background-color: transparent !important; opacity: 0; transform: translateY(10px) !important; -webkit-transform: translateY(10px) !important; -ms-transform: translateY(10px) !important; transition: all 0.3s ease 0.1s !important; -webkit-transition: all 0.3s ease 0.1s !important; font-weight: normal; font-size: 13px; position: absolute !important; bottom: auto !important; top: calc(100% - 50px) !important; left: 16px !important; right: 16px !important; text-align: left !important; margin: 0 !important; padding: 0 !important; } #section-products .hovereffect:hover a.info, #section-products .hovereffect:hover a.info2, #section-products .hovereffect:hover a.info3, #section-products .hovereffect:hover a.info4 { opacity: 1 !important; transform: translateY(0) !important; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; filter: alpha(opacity=100) !important; } /* --- Responsive font adjustments --- */@media (min-width: 992px) and (max-width: 1199px) { #section-products .hovereffect h2 {  font-size: 13px !important; }  #section-products .hovereffect a.info, #section-products .hovereffect a.info2, #section-products .hovereffect a.info3, #section-products .hovereffect a.info4 {  font-size: 11px !important; } } @media (min-width: 768px) and (max-width: 991px) { #section-products .hovereffect h2 {  font-size: 15px !important; }  #section-products .hovereffect a.info, #section-products .hovereffect a.info2, #section-products .hovereffect a.info3, #section-products .hovereffect a.info4 {  font-size: 12px !important; } } @media (min-width: 575px) and (max-width: 767px) { #section-products .hovereffect h2 {  font-size: 12px !important;  padding: 10px 12px !important; }  #section-products .hovereffect:hover h2 {  bottom: 32px !important;  transform: translateY(0) !important;  -webkit-transform: translateY(0) !important; }  #section-products .hovereffect a.info, #section-products .hovereffect a.info2, #section-products .hovereffect a.info3, #section-products .hovereffect a.info4 {  font-size: 10px !important;  bottom: 8px !important;  left: 12px !important;  right: 12px !important; } } @media (max-width: 575px) { #section-products .hovereffect h2 {  font-size: 12px !important;  padding: 10px 12px !important; }  #section-products .hovereffect:hover h2 {  bottom: 32px !important;  transform: translateY(0) !important;  -webkit-transform: translateY(0) !important; }  #section-products .hovereffect a.info, #section-products .hovereffect a.info2, #section-products .hovereffect a.info3, #section-products .hovereffect a.info4 {  font-size: 10px !important;  bottom: 8px !important;  left: 12px !important;  right: 12px !important; } }