/* ======================================================
Parsons Paint and Print
MASTER STYLESHEET
Last Updated: 16-06-2026
====================================================== */
/* ======================================================
GLOBAL ELEMENTS
====================================================== */

html {
  scroll-behavior: smooth;
}

/* ======================================================
GLOBAL ELEMENTS - FONTS
====================================================== */

body {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  background: #ffffff;
  color: #222222;
  line-height: 1.6;
}
h1 {
  font-family: Poppins, sans-serif;
  font-size: 36px;
}
h2 {
  font-family: Poppins, sans-serif;
  font-size: 20px;
}
.hero-text {
  display: block;
  margin: auto;
  padding: 6px 6px;
  border: 0;
  border-radius: 6px;
  text-align: center;
  color: #ffffff;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: bold;
}
.hero-h1 {
  display: block;
  margin: auto;
  padding: 6px 6px;
  border: 0;
  border-radius: 6px;
  text-align: center;
  color: #ffffff;
  font-family: Poppins, sans-serif;
  font-size: 36px;
}

/* ======================================================
GLOBAL ELEMENTS - IMAGES
====================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ======================================================
GLOBAL ELEMENTS - CONTAINERS
====================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}
section {
  width: 100%;
}

/* ======================================================
GLOBAL ELEMENTS - TABLES
====================================================== */

.table {
  border-collapse: collapse;
  font-family: sans-serif;
  display: inline-block;
  max-width: 1160px;
  margin: 0px 0px;
  padding: 10px 10px;
  border: 1px solid #047189;
  border-radius: 6px;
  position: flex;
  font-size: 16px;
}
th, td {
  border: 1px solid #047189;
  padding: 10px;
  text-align: middle;
}
th {
  background-color: #fbfdff;
  vertical-align: bottom;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #f1f1f1;
}

/* ======================================================
GLOBAL ELEMENTS - SPACERS
====================================================== */

.spacer-lg {
  height: 20px;
}
.spacer {
  height: 10px;
}
.spacer-sm {
  height: 3px;
}

/* ======================================================
ACCESSIBILITY
Standard #adc4cb = rgba(173, 196, 203, 100) 
Hover #b5ddff = rgba(181, 221, 255, 100)
====================================================== */

a:focus, button:focus, input:focus, textarea:focus, #go2Top:focus {
  outline: 2px solid rgba(0, 175, 201, .9);
  box-shadow: 0 0 24px rgba(0, 175, 201, .6);
  outline-offset: 6px;
  transition: outline 0.1s, transform .36s ease;
}

/* ======================================================
HEADER
====================================================== */

header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 9999;
  height:45px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  gap: 20px;
}

/* ======================================================
HEADER LOGO
====================================================== */
.logo {
  max-height: 250px;
  padding: 20px 20px;
  transition: transform .36s ease;
  position: center;
  cursor: pointer;
}
.logo:hover {
transform: scale(1.1);
}

/* ======================================================
NAVIGATION
====================================================== */

.menu-toggle {
  display: none;
  font-size: 30px;
  color: #047189;
  cursor: pointer;
  background: none;
  border: none;
}
nav {
  display: flex;
  gap: 20px;
}
nav a {
  background: none;
  cursor: pointer;
  color: #047189;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}
nav a:hover, a.active {
  color: #047189;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #047189;
  transition: transform .36s ease;
}
nav a:hover::after, nav a.active::after {
  width: 100%;
}

/* ======================================================
NAVIGATION - TOP OF PAGE
====================================================== */

#go2Top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 100px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 2px solid #ffffff;
  outline: none; /* Remove outline */
  background-color: #00afc9; /* Set a background color */
  color: #ffffff; /* Text color */
  font-size: 16px; /* Increase font size */
  font-weight: bold;
  text-decoration: none;
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 6px; /* Rounded corners */
  transition: transform .36s ease;
}
#go2Top:hover {
  background: #00afc9;
  box-shadow: 0 22px 22px rgba(0, 175, 201, .6);
  border: 2px solid #ffffff;
  border-radius: 6px;
  transform: scale(1.1);
}

/* ======================================================
HERO
====================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #222222;
  font-weight: bold;
  text-align: center;
  padding: 10px 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.hero .container {
  z-index: 9999;
}

/* ======================================================
CONTENT BLOCKS
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.block {
  background: url("../img/cpa-background.webp");
  background-position: top center;
  background-size: cover no-repeat;
  position: relative; 
  border: 2px solid rgba(6, 115, 142, .6);

  border-radius: 12px;    
  padding: 44px 54px;
}

.block-whitebg {
  border-radius: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 100);
  border: 2px solid rgba(6, 115, 142, .6);
  box-shadow: 0 10px 20px rgba(4, 113, 137, .3);
}
.block-footer {
  position: sticky;
  bottom: 0;

  height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 10px;
  background: rgba(255, 255, 255, 100);
}

/* ======================================================
LINKS
====================================================== */


/* ======================================================
FORMS
====================================================== */

form {
  max-width: 700px;
  margin: 30px auto;
}
form input, form textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #047189;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 16px;
}
form textarea {
  min-height: 140px;
}
.hp-field{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* ======================================================
FORM SELECT TAG
====================================================== */ 

:root {
  --select-border-color: #047189;
  --select-checked-color: #00afc9;
  --select-hover-color: #00afc9;
  --select-disabled-bg-color: #d9d9d9;
}
select {
  box-sizing: border-box;
  width: 100px; /* Adjust as needed */
  height: 50px; /* Slightly taller than radio for text */
  margin: 0px;
  padding: 12px;
  border: 2px solid var(--select-border-color);
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234169E1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  outline: none;
  transition: transform .36s ease;
  font-family: inherit;
  font-size: inherit;
  color: #222222;
  cursor: pointer;
}
select:not(:disabled):hover, select:not(:disabled):focus-visible {
  border-color: var(--select-hover-color);
  box-shadow: 0 20px 40px rgba(35, 88, 246, .6);
  transform: scale(1.0);
}
select:disabled {
  background-color: var(--select-disabled-bg-color);
  border-color: #cccccc;
  cursor: not-allowed;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-reduced-motion: reduce) {
  select {
	transition: none;
  }
  select:not(:disabled):hover, select:not(:disabled):focus-visible {
	transform: scale(1.0);
  }
}

/* ======================================================
FORM CHECK BOXES
====================================================== */ 

:root {
  --checkbox-border-color: #047189;
  --checkbox-checked-color: #00afc9;
  --checkbox-hover-color: #00afc9;
  --checkbox-disabled-bg-color: #d9d9d9;
}
input[type="checkbox"] {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0px;
  padding: 12px;
  border: 2px solid var(--checkbox-border-color);
  appearance: none;
  background-color: #ffffff;
}
input[type="checkbox"]:checked {
  border-color: 0 20px 20px rgba(137, 193, 132, .6);
  background-size: cover;
  background-color: #89c184;
}
input[type="checkbox"]:not(:disabled):checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
  transform: scale(1.1);
  border-color: 0 20px 20px rgba(137, 193, 132, .6);
  background-color: #89c184;
}
input[type="checkbox"]:disabled {
  background-color: var(--checkbox-disabled-bg-color);
}
input[type="checkbox"]:disabled:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %238b8c89" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}
@media (hover: hover) {
  input[type="checkbox"]:not(:disabled):hover {
	background-color: #89c184;
	padding: 12px;
	box-shadow: 0 20px 40px rgba(137, 193, 132, .6);
	transform: scale(1.1);
  }
}
input[type="checkbox"]:focus-visible {
  padding: 12px;
  background-color: #89c184;
  box-shadow: 0 20px 40px rgba(137, 193, 132, .6);
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"] {
	transition: none;
  }
}

/* =====================================================
FORM RADIO BUTTONS
====================================================== */

 :root {
  --radio-border-color: #047189;
  --radio-checked-color: #00afc9;
  --radio-hover-color: #00afc9;
  --radio-disabled-bg-color: #d9d9d9;
}
input[type="radio"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 6px;
  padding: 0;
  border: 2px solid var(--radio-border-color);
  border-radius: 50%;
  appearance: none;
  background-color: #ffffff;
  outline: none;
  transition: outline 0.1s, transform .36s ease;
}
input[type="radio"]:not(:disabled):checked {
  border-color: var(--radio-checked-color);
  background-color: var(--radio-checked-color);
  background-clip: content-box;
  padding: 2px;
  background-image: radial-gradient(circle, var(--radio-checked-color) 0%, var(--radio-checked-color) 50%, transparent 60%, transparent 100%);
}
input[type="radio"]:disabled {
  background-color: var(--radio-disabled-bg-color);
}
input[type="radio"]:disabled:checked {
  background-image: radial-gradient(circle, var(--radio-border-color) 0%, var(--radio-border-color) 50%, transparent 50%, transparent 100%);
}
@media (hover: hover) {
  input[type="radio"]:not(:disabled):hover {
	background-color: var(--radio-hover-color);
	outline: 6px solid var(--radio-hover-color);
	transform: scale(1.1);
  }
}
input[type="radio"]:focus-visible {
  background-color: var(--radio-hover-color);
  outline: 6px solid var(--radio-hover-color);
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  input[type="radio"] {
	transition: none;
  }
  input[type="radio"]:focus-visible {
	transform: scale(1.0);
  }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  input[type="radio"]:not(:disabled):hover {
	transform: scale(1.0);
  }
}

/* ======================================================
BUTTONS
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.button {
  display: inline-block;
  background: #047189;
  color: #ffffff;
  padding: 12px 20px;
  border: 2px solid #047189;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: outline 0.1s, transform .36s ease;
}
.button:hover {
  background: #00afc9;
  color: #ffffff;
  padding: 12px 20px;
  border: 2px solid #00afc9;
  outline: 2px solid rgba(0, 175, 201, 100);
  outline-offset: 6px;
  border-radius: 6px;
  box-shadow: 0 20px 20px rgba(0, 175, 201, .3);
  text-decoration: none;
  font-weight: bold;
  transform: scale(1.1);
}
.button-green {
  background: #0c7d00;
}
.button-green:hover {
  background: #13a803;
  box-shadow: 0 20px 20px rgba(19, 168, 3, .6);
}
.button-red {
  background: #dd0505;
}
.button-red:hover {
  background: #cd0404;
  box-shadow: 0 20px 20px rgba(205, 4, 4, .6);
}
.button-blue {
  background: #4169e1;
}
.button-blue:hover {
  background: #2358f6;
  box-shadow: 0 20px 20px rgba(35, 88, 246, .6);
}

/* ======================================================
GRID SYSTEM
====================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* ======================================================
CARDS
====================================================== */

.card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  position: center;
  gap: 20px;
  padding: 40px 0;
  background: #ffffff;
  border: 2px solid #047189; 
  border-radius: 6px;
  padding: 6px 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.card:hover {
  /*   transform: scale(1.1); */
}
.card img {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform .36s ease;
}
.card:hover img {
  transform: scale(1.1);
}

/* ======================================================
GALLERY
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 40px 0;
}
.gallery-item {
  position: relative;
  border: 2px solid #047189;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
  padding: 6px 6px;
  transition: transform .36s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
}
.gallery-item:hover {
  transform: scale(1.1);
  }
.gallery-item img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  cursor: pointer;
  transition: transform .36s ease;
}
.gallery-item:hover img {
  transform: scale(1.1);
}

/* ======================================================
GALLERY THUMBS
====================================================== */

.gallery-thumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.gallery-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(255, 255, 255, .1);
  outline: 2px solid rgba(255, 255, 255, .1);
  outline-offset: 6px;
  transition: outline 0.1s, transform .36s ease;
  opacity: .6;
  flex-shrink: 0;
}
.gallery-thumb:hover {
  transform: scale(1.1);
  opacity: 1;
  border: 2px solid rgba(173, 196, 203, .5);
  outline: 2px solid rgba(173, 196, 203, 100);
  box-shadow: 0 0 30px rgba(173, 196, 203, 100);
  outline-offset: 9px;
}
.active-thumb {
  opacity: 1;
  border: 2px solid rgba(27, 134, 157, .5);
  outline: 2px solid rgba(27, 134, 157, 100);
  box-shadow: 0 0 30px rgba(27, 134, 157, 100);
  outline-offset: 3px;
}
.gallery-thumb-block {
  margin-top: 20px;
  background: #ffffff;
  border: 2px solid #047189;
  border-radius: 6px;
  padding: 20px;
}

/* ======================================================
GALLERY VIEWER
====================================================== */

.gallery-viewer {
  width: 100%;
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
  align-items: center;
  padding: 30px;
}
#main-gallery-image {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  padding: 0px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
  object-fit: cover;
  transition: transform .36s ease;
}
#main-gallery-image:hover {
  transform: scale(1.1);
}

/* ======================================================
BADGES
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  z-index: 5;
}

/* ======================================================
NEW PRODUCT BADGE
====================================================== */

.new {
  background: #0c7d00;
  border: 2px solid #0c7d00;
}

/* ======================================================
BEST SELLER BADGE
====================================================== */

.best {
  background: #7a0099;
  border: 2px solid #7a0099;
}

/* ======================================================
SIZE BADGE
====================================================== */

.size {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #112222;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid #112222;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  z-index: 5;
}

/* ======================================================
PRICE AND SOLD BADGE
====================================================== */

.price, .sold {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  z-index: 5;
}
.price {
  background: #000000;
  border: 2px solid #000000;
}
.sold {
  background: #8b0000;
  border: 2px solid #8b0000;
}

/* ======================================================
ETSY BADGE
====================================================== */

.etsy-link {
  position: absolute;
  bottom: 10px;
  left: 70px;
  background: #adc4cb;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid #fff;
  font-size: 11px;
  text-decoration: none;
  font-weight: bold;
  z-index: 5;
}
.etsy-link:hover {
  background: #b5ddff;
  transform: scale(1.1);
}

/* ======================================================
SOCIALS
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.social-section {
  text-align: center;
  padding: 20px 20px;
}
.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.footer-socials img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  display: block;
  transition: transform .36s ease;
  opacity: .6;
  flex-shrink: 0;
}
.footer-socials img:hover {
  transform: translateY(-15px);
  opacity: 1;
}

/* ======================================================
FOOTER
====================================================== */

footer{
  background: #ffffff;
  color: #047189;
  text-align: center;
  padding: 20px 20px;
  margin-top: 20px;
}
.site-footer footer {
  background: #ffffff;
  color: #047189;
  text-align: center;
  padding: 20px 20px;
  margin-top: 20px;
}

/* ======================================================
FOOTER NAVIGATION
====================================================== */
/* ======================================================
Standard #adc4cb = rgba(173, 196, 203,100) 
Hover #b5ddff = rgba(181, 221, 255,100)
====================================================== */

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}
.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  position: relative;
}
.footer-nav a:hover, .footer-nav a.active {
  color: #ffffff;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #ffffff;
  transition: transform .36s ease;;
}
.footer-nav a:hover::after, .footer-nav a.active::after {
  width: 100%;
}

/* ======================================================
LIGHTBOX
====================================================== */

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  inset: 0;
  background: rgba(0, 0, 0, .96);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 60px;
  cursor: pointer;
}
#lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border: 18px solid #ffffff;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 0 90px rgba(27, 134, 157, .75);
}
.close {
  position: absolute;
  top: 20px;
  right: 400px;
  font-size: 60px;
  color: #047189;
  cursor: pointer;
}

/* ======================================================
REDUCED MOTION
====================================================== */

@media(prefers-reduced-motion:reduce) {
  * {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
  }
}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px) {
  .menu-toggle {
	display: block;
  }
  nav {
	flex-direction: column;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	background: #ffffff;
	transition: transform .36s ease;
  }
  nav.active {
	max-height: 800px;
  }
  nav a {
	padding: 12px 0;
	text-align: center;
  }
  .hero h1 {
	font-size: 32px;
  }
  .hero p, .hero-text {
	font-size: 20px;
  }
  .footer-nav {
	flex-direction: column;
	gap: 12px;
  }
  .footer-nav {
	padding: 0 10px;
  }
  .header-inner {
	flex-direction: column;
	gap: 20px;
  }
  .social-icons {
	margin-top: 15px;
	margin-left: 0;
  }
  .social-icons {
	width: 100%;
	justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
  }
  .logo {
	max-width: 90%;
	max-height: 90%;
  }
  .lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	inset: 0;
	background: rgba(0, 0, 0, .96);
	justify-content: center;
	align-items: center;
	z-index: 9999;
	padding: 60px;
	cursor: pointer;
  }
  .lightbox-img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 6px;
  }
  .close {
	position: absolute;
	top: 40px;
	right: 60px;
	font-size: 40px;
	color: #047189;
	cursor: pointer;
  }
  .information-grid {
	grid-template-columns: 1fr;
  }
}