/* ==============================================================================================
	global.css		This is my global css
=============================================================================================== */

*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

html,
body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: var(--font-3-body);
     color: var(--shade-2);
     font-size: 1rem;
     line-height: 1.6;
     background-color: var(--bg-1);
}

body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

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

a {
     color: var(--color-2);
     text-decoration: none;
     transition: color 0.2s ease;
}

a:hover {
     color: var(--color-3);
     text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     margin: 0 0 0.75rem 0;
}

h1 {
     font-family: var(--font-1-heading);
     font-size: clamp(2.1rem, 3vw, 2.6rem);
     line-height: 1.2;
     color: var(--color-1);
}

h2 {
     font-family: var(--font-2-subheading);
     font-size: clamp(1.4rem, 2.2vw, 1.9rem);
     font-weight: 600;
     line-height: 1.3;
     color: var(--shade-1);
}

h3 {
     font-family: var(--font-2-subheading);
     font-size: clamp(1.1rem, 1.6vw, 1.35rem);
     font-weight: 600;
     line-height: 1.35;
     color: var(--color-2);
}

h4 {
     font-family: var(--font-4-script);
     font-size: 1.4rem;
     font-weight: 600;
     line-height: 1.2;
     color: var(--color-2);
}

p {
     margin: 0 0 1rem 0;
}

hr {
     margin: 1rem 0;
     border: 0;
     border-top: 1px solid var(--color-3);
}

ul {
     margin: 0.2rem 0 1rem 0.5rem;
     padding-left: 1.1rem;
     color: var(--shade-3);
     font-size: 0.96rem;
     line-height: 1.6;
}

ol {
     margin: 0.7rem 0 1rem 1.5rem;
     padding-left: 0.5rem;
}

ol li {
     font-weight: 500;
     line-height: 1.7;
}

ol li a {
     color: inherit;
}

.red {
     color: var(--red-2);
}

.red-2 {
     color: var(--red-3);
}

.bold {
     font-weight: 600;
}

.bold-small {
     font-size: 0.8rem;
     font-weight: 600;
}

.read-on {
     margin-top: 0.75rem;
     font-weight: 600;
     color: var(--color-2);
     text-decoration: none;
}

.read-on:hover {
     color: var(--color-3);
     text-decoration: underline;
}

.highlight,
.highlight a {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--red-1);
     text-decoration: none;
     padding: 0;
}

.highlight:hover,
.highlight a:hover {
     color: var(--color-3);
     text-decoration: none;
}

/* =======================
   TABLET
========================== */

@media (max-width: 960px) {
     h1 {
          font-size: clamp(1.9rem, 3vw, 2.3rem);
     }

     h2 {
          font-size: clamp(1.3rem, 2.4vw, 1.7rem);
     }

     h3 {
          font-size: clamp(1.05rem, 1.8vw, 1.25rem);
     }
}

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

@media (max-width: 768px) {

     html,
     body {
          font-size: 0.98rem;
     }

     h1 {
          font-size: 1.5rem;
          line-height: 1.25;
     }

     h2 {
          font-size: 1.25rem;
          line-height: 1.3;
     }

     h3 {
          font-size: 1.05rem;
          line-height: 1.35;
     }

     h4 {
          font-size: 1.2rem;
     }

     ul,
     ol {
          margin-bottom: 1rem;
     }

     .highlight,
     .highlight a {
          font-size: 1rem;
     }
}


/* ==============================================================================================
	theme.css		This is my theme css
=============================================================================================== */

:root {
	--font-1-heading: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-2-subheading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-3-body: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--font-4-script: 'Courgette', cursive;
	--font-5-script: 'Dancing Script', cursive;

	--color-1: #0050C1;
	--color-2: #0875E1;
	--color-3: #169AF5;
	--color-4: #63B8F7;
	--color-5: #D4EBFD;

	--accent-1: #FF5000;
	--accent-2: #FF6B00;
	--accent-3: #FEBB02;
	--accent-4: #FFEF00;
	--accent-5: #fffeaa;

	--shade-1: #060d30;
	--shade-2: #2e3651;
	--shade-3: #5b6475;
	--shade-4: #cccccc;

	--light-1: #ffffff;
	--light-2: #f6fafd;

	--red-1: #bf0000;
	--red-2: #ff0000;
	--red-3: #ff3300;

	--bg-1: #f5f7fb;
	--bg-2: #f6f8fa;
	--bg-3: #edf4fa;
	--bg-footer: #00408c;

/* --------------------------------------------------
	GRADIENT 1		Clean horizontal brand gradient
	Best for:		buttons, headers, navbars, CTA strips
-------------------------------------------------- */

	--gradient-1: linear-gradient(
		90deg,
		var(--color-1) 0%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
	GRADIENT 2		Smooth premium blend
	Best for:		hero sections, cards, feature panels
-------------------------------------------------- */

	--gradient-2: linear-gradient(
		135deg,
		var(--color-1) 0%,
		color-mix(in srgb, var(--color-1), var(--color-2) 50%) 45%,
		var(--color-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 3		Soft atmospheric gradient
   Best for:		page backgrounds, large sections, footer areas
-------------------------------------------------- */

	--gradient-3:
		radial-gradient(
			circle at top left,
			color-mix(in srgb, var(--color-3), white 35%) 0%,
			transparent 40%
		),

		radial-gradient(
			circle at bottom right,
			color-mix(in srgb, var(--color-1), black 10%) 0%,
			transparent 45%
		),

		linear-gradient(
			180deg,
			var(--bg-1) 0%,
			var(--bg-2) 100%
		);

/* --------------------------------------------------
   GRADIENT 4      Warm accent glow gradient
   Best for:       hero sections, call-to-action areas,
                   feature blocks, landing page headers
-------------------------------------------------- */

--gradient-4:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-2), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at bottom center,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--bg-1) 0%,
		var(--bg-2) 100%
	);

/* --------------------------------------------------
   GRADIENT 5      Brand + Accent Fusion
   Best for:       Hero sections, featured content,
                   premium call-to-action areas
-------------------------------------------------- */

--gradient-5:
	radial-gradient(
		circle at top left,
		color-mix(in srgb, var(--color-3), white 20%) 0%,
		transparent 40%
	),

	radial-gradient(
		circle at top right,
		color-mix(in srgb, var(--accent-1), white 25%) 0%,
		transparent 35%
	),

	radial-gradient(
		circle at bottom left,
		color-mix(in srgb, var(--accent-3), white 15%) 0%,
		transparent 45%
	),

	linear-gradient(
		135deg,
		var(--color-1) 0%,
		var(--color-2) 45%,
		var(--color-3) 100%
	);

/* --------------------------------------------------
   GRADIENT		END
-------------------------------------------------- */

	--radius:    0.625rem;
	--radius-sm: 0.375rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;

	--radius-pill: 999rem;

	--shadow:
		0 3px 10px rgba(9, 37, 77, 0.12),
		0 8px 20px rgba(9, 37, 77, 0.07);

	--shadow-btn: 0 6px 14px rgba(0, 0, 0, 0.18);

	--shadow-btn-hover: 0 12px 24px rgba(0, 0, 0, 0.22);

	--shadow-btn-xl:
		0 4px 8px rgba(0, 0, 0, 0.18),
		0 10px 25px rgba(0, 0, 0, 0.20);

	--shadow-btn-xl-hover:
		0 6px 12px rgba(0, 0, 0, 0.20),
		0 14px 32px rgba(0, 0, 0, 0.22);
}

/* ==============================================================================================
	main.css		This is my main css
=============================================================================================== */

.wrapper-below-header {
     display: grid;
     grid-template-rows: 1fr auto;
     min-height: 100vh;
     padding-top: 7rem;
}

.container {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 1rem;
}

main {
     width: 100%;
}

section {
     background: var(--light-1);
     padding: 1rem;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
}

section .no-bg {
     background: none;
     padding: 0;
     box-shadow: none;
}

h1.no-bg {
     justify-self: start;
     margin-left: 2rem;
}
.row-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
	 grid-column: 1 / span 12;
     gap: 1.5rem;
}

.row-1 {
     margin: 0.5rem 0;
     padding: 1.5rem 1rem;
     background-color: var(--light-1);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
}

.mid {
     grid-column: 4 / span 6;
}

.span-3 {
     grid-column: span 3;
}

.span-4 {
     grid-column: span 4;
}

.span-4-left {
     grid-column: 1 / span 4;
}

.span-4-right {
     grid-column: 9 / span 4;
}

.span-5-left {
     grid-column: 1 / span 5;
}

.span-5-right {
     grid-column: 8 / span 5;
}

.span-6-left {
     grid-column: 1 / span 6;
}

.span-6-right {
     grid-column: 7 / span 6;
}

.span-7-left {
     grid-column: 1 / span 7;
}

.span-7-right {
     grid-column: 6 / span 7;
}

.span-8-left {
     grid-column: 1 / span 8;
}

.span-8-right {
     grid-column: 5 / span 8;
}

.span-12 {
     grid-column: 1 / span 12;
}

.mid,
.span-3,
.span-4,
.span-4-left,
.span-4-right,
.span-5-left,
.span-5-right,
.span-6,
.span-6-left,
.span-6-right,
.span-7-left,
.span-7-right,
.span-8-left,
.span-8-right,
.span-12 {
     margin: 0.5rem 0;
     padding: 1.5rem 3rem;
     background-color: var(--light-1);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
}

/* --------------------------------
	ERROR 404
----------------------------------- */

.error-404-side h2 {
     margin-bottom: 1rem;
}

.error-404-side p:last-child {
     margin-bottom: 0;
}

/* .row-btn {
   display: grid;
   grid-template-columns: 1fr 1fr;
     justify-content: center;
     gap: 1rem;
     margin-top: 1rem;
} */
/* --------------------------------
	BUTTON   GROUP CONTAINER
----------------------------------- */

.row-btn {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
   gap: 1rem;
   margin-top: 1rem;
   align-items: center;
}

.col-btn {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0.1rem;
   margin-top: 10rem;
}


/* =======================
   TABLET
========================== */

@media (max-width: 960px) {

	.row-1 .span-5-right {
		order: 1;
	}

	.row-1 .span-7-left {
		order: 2;
	}

	.mid {
		grid-column: 2 / span 10;
		padding: 1.5rem 1.25rem;
		margin-block: 2rem;
	}

}

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

@media (max-width: 768px) {
     .wrapper-below-header {
          padding-top: 5rem;
     }

     .container {
          gap: 1rem;
          padding: 0 0.75rem;
          max-width: 100%;
     }

.mid,
.span-3,
.span-4,
.span-4-left,
.span-4-right,
.span-5-left,
.span-5-right,
.span-6,
.span-6-left,
.span-6-right,
.span-7-left,
.span-7-right,
.span-8-left,
.span-8-right,
     .span-12 {
          grid-column: span 12;
          padding: 1.25rem 1rem;
          margin: 0.5rem 0;
     }

   .row-btn {
      grid-template-columns: 1fr;
   }

}

/* ==============================================================================================
	btn.css		This is my buttons css
=============================================================================================== */

.btn {
	display: inline-block;
	color: var(--light-1);
	font-size: 0.96rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	padding: 0.7rem 1.45rem;
	border: 2px solid transparent;
	border-radius: 999px;
	box-shadow: var(--shadow-btn);
	cursor: pointer;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

/* -----------------------------
     BTN-1
-------------------------------- */

.btn-1 {
	color: var(--light-1);
	font-size: 1.1rem;
	background: var(--color-1);
	margin: 1.5rem 0 0 0;
	padding: 1rem 1.5rem;
	border: 2px solid var(--color-1);
}

.btn-1-outline {
	color: var(--color-1);
	font-size: 1.1rem;
	background: var(--light-1);
	margin: 1.5rem 0 0 0;
	padding: 1rem 1.5rem;
	border: 2px solid var(--color-1);
}

.btn-1-outline-2 {
	color: var(--light-1);
	font-size: 1.1rem;
	background: var(--color-1);
	margin: 1.5rem 0 0 0;
	padding: 1rem 1.5rem;
	border: 2px solid var(--light-1);
}

.btn-1-accent {
	color: var(--color-1);
	font-size: 1.1rem;
	background: var(--accent-2);
	margin: 1.5rem 0 0 0;
	padding: 1rem 1.5rem;
	border: 2px solid var(--accent-2);
}

.btn-1:hover,
.btn-1-accent:hover,
.btn-1-outline:hover,
.btn-1-outline-2:hover {
	text-decoration: none;
	color: var(--light-1);
	background-color: var(--color-2);
	border-color: var(--color-2);
	transform: translateY(-2px);
	box-shadow: var(--shadow-btn-hover);
}

/* -----------------------------
     BTN-2
-------------------------------- */

.btn-2 {
     width: 100%;
     color: var(--light-1);
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2-outline {
     width: 100%;
     color: var(--color-1);
     background: transparent;
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2:hover,
.btn-2-outline:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     color: var(--light-1);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-3
-------------------------------- */

.btn-3 {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--accent-4);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-3:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-STATE
-------------------------------- */

.btn-state {
     width: 100%;
     font-size: 1rem;
     text-align: left;
     background: var(--color-1);
     margin: 1rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-state:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

.states {
     padding: 1rem 1rem;
}

.states h1 {
     font-size: 1.7rem;
     margin: 0 0 1rem 0;
}

/* -----------------------------
     BTN-NAME
-------------------------------- */

.btn-name {
     background: var(--gradient-1);
     padding: 1rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-name h1 {
     color: var(--light-1);
     margin: 0;
     line-height: 1;
}
/* -----------------------------
     BTN-XL
-------------------------------- */

.btn-xl {
     background-color: var(--color-1);
     padding: 1rem 3rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-xl:hover {
     background-color: var(--color-2);
     box-shadow: var(--shadow-btn-xl-hover);
     transform: translateY(-1px);
}

.btn-xl h1 {
     color: var(--light-1);
}

/* -----------------------------
     BTN-SHADOW
-------------------------------- */

.btn-shadow {
	color: var(--color-1);
	font-size: 1.2rem;
	background: var(--light-1);
	padding: 1rem;
	border: 0;
	box-shadow: var(--shadow-btn);
}

.btn-shadow:hover {
	color: var(--shade-3);
	text-decoration: none;
	border: solid 0.05rem var(--shade-3);
	transform: translateY(-1px);
}

/* =============================
   TABLET
========================= */

@media (max-width: 960px) {}
	.btn-tbl {
		width: 4rem;
  }

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

@media (max-width: 768px) {

	.btn {
		display: block;
		width: 100%;
		grid-column: 1 / span 12;
	}

	.btn-1,
	.btn-1-outline,
	.btn-1-outline-2,
	.btn-1-accent,
	.btn-2,
	.btn-2-outline,
	.btn-3,
	.btn-state,
	.btn-name,
	.btn-xl {
		width: 100%;
		grid-column: 1 / span 12;
	}


/*
     .btn-1,
     .btn-1-outline,
     .btn-1-outline-2,
     .btn-1-accent,
	 .btn-2,
	 .btn-2-outline,
     .btn-3 {
          font-size: 1rem;
		  padding: 1rem;

     }
 */
	.btn-name {
		width: 100%;
		grid-column: 1 / span 12;
	}

	.btn-tbl {
		width: 4rem;
		height: 1.25rem;
	}

}
.site-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 3.2rem;
     background: linear-gradient(135deg,
               var(--color-1) 0%,
               var(--color-3) 55%,
               var(--color-1) 100%);
     z-index: 1000;
}

.logo-wrapper {
     grid-column: span 2;
     /* align-self: center; */
     padding: 0.5rem 0;
}

.logo {
     width: 7rem;
     align-self: center;
}

.icon-wrapper {
     grid-column: span 2;
     justify-self: end;
     align-self: center;
}

.icon {
     width: 5rem;
}

.icon:hover {
     opacity: 0.7;
}



/* =======================
   TABLET
========================== */

@media (max-width: 960px) {
     .site-header .logo-wrapper {
          grid-column: span 4;
     }

     .site-header .logo {
          width: 8rem;
          height: auto;
     }

     .site-header .icon-wrapper {
          grid-column: span 4;
          justify-self: end;
     }

     .site-header .icon {
          width: 2.5rem;
          height: auto;
     }

}



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

@media (max-width: 768px) {
     .site-header .logo {
          width: 7rem;
          height: auto;
     }

     .site-header .icon {
          width: 5rem;
          height: auto;
     }
}/* =========================================
   DESKTOP NAVIGATION
========================================= */

header nav {
     grid-column: 3 / span 8;

     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;

     justify-content: center;
     align-items: center;

     gap: 1rem;
}


header nav a {
     color: var(--light-1);

     font-size: 0.9rem;
     font-weight: 500;
     text-decoration: none;

     background: transparent;

     padding: 0.3rem 1rem;

     border: 1px solid var(--light-1);
     border-radius: 999px;

     transition:
          background-color 0.3s ease,
          color 0.3s ease,
          transform 0.2s ease;
}


header nav a:hover {
     background-color: var(--color-2);
     color: var(--light-1);

     transform: translateY(-1px);
}


/* PAY FEE BUTTON */

header nav a:last-child {
     color: var(--accent-3);
     border-color: var(--accent-3);
}


header nav a:last-child:hover {
     background-color: var(--color-2);
}



/* =========================================
   MENU BUTTON
========================================= */

#menu-icon {
     grid-column: span 1;

     display: none;

     font-size: 40px;
     line-height: 1;

     color: var(--light-1);
     background: transparent;

     padding: 0.25rem;

     border: 0;
     border-radius: 8px;

     cursor: pointer;

     z-index: 10001;

     transition:
          background-color 0.25s ease,
          transform 0.25s ease;
}


#menu-icon:hover {
     background: rgba(255, 255, 255, 0.1);
}


#menu-icon:focus-visible {
     outline: 2px solid var(--light-1);
     outline-offset: 4px;
}



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

@media (max-width: 960px) {

     header {
          position: relative;
     }


     /* HAMBURGER */

     #menu-icon {
          display: block;

          grid-column: span 4;

          justify-self: center;
          align-self: center;
     }


     /* DROPDOWN MENU */

     header nav {
          position: absolute;

          top: 100%;
          left: 50%;

          width: min(560px, calc(100% - 2rem));

          display: grid;
          grid-auto-flow: row;
          grid-template-columns: 1fr;

          gap: 0.5rem;

          margin-top: 0.75rem;
          padding: 1rem;

          background: var(--color-2);

          border: 1px solid var(--light-1);
          border-radius: 12px;

          box-shadow:
               0 12px 30px rgba(0, 0, 0, 0.18);

          z-index: 10000;


          /* CLOSED STATE */

          opacity: 0;
          visibility: hidden;
          pointer-events: none;

          transform:
               translate(-50%, -18px);

          transition:
               opacity 0.3s ease,
               transform 0.35s ease,
               visibility 0.35s;
     }


     /* OPEN STATE */

     header nav.open {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;

          transform:
               translate(-50%, 0);
     }


     /* MOBILE LINKS */

     header nav a {
          display: block;

          width: 100%;
          box-sizing: border-box;

          margin: 0;

          padding: 0.65rem 1.25rem;

          font-size: 0.95rem;
          font-weight: 600;

          text-align: center;

          color: var(--light-1);
          background: var(--color-1);

          border: 1px solid var(--light-1);
          border-radius: 10px;

          transform: none;
     }


     header nav a:hover {
          background: var(--color-3);

          transform: translateX(3px);
     }


     header nav a:last-child:hover {
          background: var(--color-3);
     }
}



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

@media (max-width: 768px) {

     #menu-icon {
          grid-column: 5 / span 4;

          justify-self: center;

          font-size: 36px;
     }


     header nav {
          width: calc(100% - 2rem);

          padding: 0.75rem;

          gap: 0.4rem;
     }


     header nav a {
          padding: 0.6rem 1rem;

          font-size: 0.9rem;

          border-radius: 9px;
     }
}



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

@media (prefers-reduced-motion: reduce) {

     header nav,
     header nav a,
     #menu-icon {
          transition: none;
     }
}footer {
     width: 100%;
     color: var(--light-1);
     font-size: 0.8rem;
     background-color: var(--color-1);
     margin-top: 2rem;
     padding: 1rem 0 2rem 0;
}

.copyright-row-wrapper>* {
     grid-column: span 3;
     padding: 1rem;
}

.copyright-row-wrapper div {
     text-align: center;
     color: var(--accent-4);
}

/* =========================
   SOCIAL MEDIA PANEL
========================= */

.footer-social {
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
   align-items: center;
   gap: 0.75rem;
}

.footer-social a {
   display: grid;
   place-items: center;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.5rem;
   background: rgba(255,255,255,0.08);
   transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
   opacity: 0.75;
   transform: translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media (max-width: 960px) {}

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

@media (max-width: 768px) {
     footer {
          font-size: 0.7rem;
     }

     .copyright-row-wrapper>* {
          grid-column: span 12;
          padding: 0.5rem 0 0 0;
     }

     .sectigo {
          max-width: 5rem;
     }
}

.links-row-wrapper {
     gap: 0.5rem;
}

/* ... */

.links-row-wrapper > * {
	grid-column: span 3;
	display: grid;
	align-content: start;
	background-color: var(--bg-footer);
	padding: 1rem;
	border: 0.07rem solid var(--bg-footer);
	border-radius: var(--radius);
}

.links-row-wrapper h3 {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--accent-4);
     margin-bottom: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05rem;
}

.links-row-wrapper>*>div:last-of-type {
     display: grid;
     gap: 0.5rem;
     align-content: start;
     padding: 0 0 0 1rem;
}

.links-row-wrapper>*>div:last-of-type a {
     display: inline-block;
     font-size: 0.9rem;
     text-decoration: none;
     color: var(--shade-6);
}

.links-row-wrapper>*>div:last-of-type a:hover {
     color: var(--accent-5);
     text-decoration: underline;
}

/* =========================
   TABLET
========================= */

@media (max-width: 960px) {}

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

@media (max-width: 768px) {

     .links-row-wrapper {
          gap: 0.2rem;
     }

     .links-row-wrapper>* {
          grid-column: span 6;
          padding: 0.5rem 0 0.5rem 0.2rem;
     }

     .links-row-wrapper>*>div:last-of-type {
          /* display: grid; */
          gap: 0.2rem;
          /* align-content: start; */
          padding: 0 0 0 0.3rem;
     }

     .links-row-wrapper>*>div:last-of-type a {
          font-size: 0.8rem;
     }
}