@charset "utf-8";
/* CSS Document */
*{margin:0;}

/*NAVIGATION*/
.topmenu {background-color:#657D8C; overflow:hidden; height:100px; justify-content: space-between; padding: 0px 50px; align-items:center; display:flex; flex-wrap:wrap;}
.topmenu a {color: #0F1926; text-align: right; padding: 37px 25px; text-decoration: none; font-size: 20px; font-family: "Lexend Zetta", sans-serif;}
.topmenu input {border: 1px solid #0F1926; border-radius:5px;font-size: 15px; font-family: "Lexend Zetta", sans-serif; padding: 5px; width:500px; max-width:100%;} 
.search-container {display:flex; flex-grow: 1; margin-left: -400px; justify-content:center;}
.menu-link {margin-left: auto; display: flex; gap: 20px;}

/*HERO IMAGE*/
#Hero {margin:0; width:100%; height:650px; align-items:center; display:flex; justify-content: center; text-align: center; background-image: url("../images/hands.png"); background-size: cover; background-position: center; background-repeat: no-repeat;}
#Hero img {width:80%; height:auto;}

/*CATEGORIES MENU*/
#MWKG {background-color:#F5F6F6; font-family: "Lexend Zetta", sans-serif; color:#0f1926;}
#MWKG ul {padding:30px; margin:0px; align-items:center; display:flex; justify-content: center; text-align: center;}
#MWKG li {list-style: none; display:flex; align-items:center; padding:0px 20px; position:relative; margin-right:30px;}
#MWKG li:hover {color: #657D8C;}

/*IMAGES WITH BUTTONS*/
.annualandnear {background-color:#657D8C; width:100%; height: auto; gap:10px; display:flex; flex-wrap:wrap; padding:50px 0px 50px 0px; align-content:center; justify-content: center;}/*MAYBE BACKGROUND ROCK TEXTURE*/
.image-container {text-align: center; display:flex; flex-direction: column; align-items: center; margin:0px 50px;}
.image-container img {width: 100%; max-width: 300px; height: auto; border-radius: 5px; justify-content:center;}
.image-container a {text-decoration: none; color:#0F1926;}
.image-container h1 {font-family: "Lexend Zetta", sans-serif; color: #0F1926; font-size: 18px; margin-top: 15px; border: 2px solid #0F1926; border-radius: 7px; display: inline-block; padding:5px 10px;}

/*EMAIL SECTION*/
#Email {background-color:#263640; padding: 45px 0px 45px 0px; text-align:center; color:#F5F6F6; font-family: "Lexend Zetta", sans-serif;}
#Email h1 {font-size:20px;}
#Email h2 {font-size:13px;}
#Email h3 {font-size:10px; padding:0px 0px 10px 0px;}
#Email h3:hover {color:#657D8C;}
#Email input {font-family: "Lexend Zetta", sans-serif; font-size: 13px; padding: 4px; width: 250px; border: 2px solid #F5F6F6; background-color: transparent; color: #F5F6F6; border-radius: 5px; margin-right:10px}
#Email button {font-family: "Lexend Zetta", sans-serif; font-size: 15px; color: #263640; background-color: #F5F6F6; border: 2px solid #F5F6F6; padding: 2px 2px; cursor: pointer; text-transform: uppercase; border-radius: 5px;}
#Email a {text-decoration: none; color:#F5F6F6; font-size:15px; padding:30px 0px 30px 0px;} 

/*BOTTOM NAV*/
.bottomnav {background-image:url("../images/lowopacitylowres.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color:#0F1926; padding:45px 0px 45px 0px; text-align:center; font-family: "Lexend Zetta", sans-serif; display:flex; justify-content: center;}
.nav-container {display:flex; justify-content: space-around; width:80%;}
.nav-column {flex:1; text-align:center;}
.nav-column input {margin-bottom:7px; font-family: "Lexend Zetta", sans-serif; font-size:13px; color:#263640; background-color:#F5F6F6; padding:4px; width:150px; border:1px solid #263640; border-radius:5px;}
.bottomnav h1 {font-size:20px; color:#263640; margin-bottom:10px;}
.bottomnav h2 {font-size:13px; color:#0F1926; margin-bottom:7px;}
.bottomnav h3 {font-size:13px; color:#0F1926; margin-bottom:7px;}
.bottomnav h3:hover {color:#4F6573;}

/*FOOTER*/
footer {background-color: #263640; text-align:center; color: #657D8C; padding: 25px 0px 25px 0px;}
footer h1 {font-size: 14px;}
footer h2 {font-size:12px;}
footer h2:hover {color:#F5F6F6;}

/*SECOND PAGE*/
.productlogo {display: inline-block;}
.productlogo img {width: 100px; height:auto; padding: 0px 60px 0px 0px; text-decoration: none; pointer-events: none;}
.productlogo a {height:100%; width:100%; display:block; background-color: transparent;color: inherit;text-decoration: none;pointer-events: auto;}
.productlogo a:hover {background-color: transparent;color: inherit;cursor:pointer;text-decoration: none;}
.menu-link a:hover {background-color: #0F1926; color: #657D8C;}

.hardware {background-image:url("../images/lowopacitylowres.png"); background-size: cover; background-position: center; background-repeat: no-repeat; color:#0F1926; width:100%; height:auto; font-family: "Lexend Zetta", sans-serif;}
.hardware h2 {font-size: 15px; padding:15px 0px 0px 50px;}
.hardware-heading {display: flex;align-items: center;gap: 5px; color:#0F1926;}
.hardware-heading h1 {font-size: 35px; padding:10px 0px 10px 50px;}
.hardware-heading h4 {font-size: 8px; padding:29px 0px 15px 5px;}

/*PRODUCTS*/
.product-section {display: flex;padding: 30px;background-color: #f5f5f5; font-family: "Lexend Zetta", sans-serif;}
.product-section h3 {font-size:25px; padding: 0px 0px 15px 0px;}
.filter-sidebar {font-family: "Lexend Zetta", sans-serif; width: 250px;padding-right: 20px;border-right: 1px solid #ccc;}
.filter-group {font-family: "Lexend Zetta", sans-serif; margin-bottom: 30px;}
.filter-group p {font-size: 15px;}
.filter-group label {font-size:12px;}
.product-main {font-family: "Lexend Zetta", sans-serif; flex: 1;padding-left: 30px; min-width:0;}
.sort-bar {font-family: "Lexend Zetta", sans-serif; margin-bottom: 20px;}
.product-grid {font-family: "Lexend Zetta", sans-serif; display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); width:100%;}
.product-card {font-family: "Lexend Zetta", sans-serif; background-color: white;padding: 10px;border: 1px solid #ddd;text-align: center;}
.product-img {font-family: "Lexend Zetta", sans-serif; width: 100%;aspect-ratio: 1 / 1;background-color: #eee;border: 1px solid #bbb;margin-bottom: 10px;}
.product-img img {width: 100%;height: auto;border-radius: 5px;}

/* RESPONSIVE */
@media (max-width: 600px) {.topmenu {flex-direction: column;height: auto;padding: 20px;} .topmenu input {width: 100%;} #Hero {height: 400px;} .image-container {margin: 20px;width: 100%;} .product-grid {grid-template-columns: repeat(2, 1fr);} .filter-sidebar {width: 100%;padding-right: 10px;} .product-section {flex-direction: column;} .bottomnav .nav-container {flex-direction: column;gap: 20px;} .product-logo img {width: 80px;}}

/* Medium screens (Tablets) */
@media (min-width: 601px) and (max-width: 1024px) {.product-grid {grid-template-columns: repeat(3, 1fr);} .product-logo img {width: 90px;} .topmenu {flex-direction: row; padding: 20px 30px; height: auto;} .topmenu a {padding: 20px 15px; font-size: 18px;} .topmenu input {width: 300px; margin-right: 20px;} .search-container {margin-left: 0; justify-content: flex-start;} .menu-link {flex-direction: row;}}

/* Large screens (Laptops and desktops) */
@media (min-width: 1025px) {.product-grid {grid-template-columns: repeat(4, 1fr);}}