@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@300;400;500;700&display=swap");

/* 
COLOR PALETTE (OPTION B – NAVY + GOLD)
--------------------------------------
Primary Navy:       #0B1D33
Secondary Blue:     #1E3A8A
Accent Gold:        #D4A657
Soft Gray Text:     #707070
Section Gray BG:    #F5F7FA
White:              #FFFFFF
*/

/* RESET / BASE --------------------------------------------------- */

html, body, header, main, footer, h1, h2, h3, h4, h5, h6,
nav, section, ul, li, p, a, form, div, label, input, textarea, button {
  margin: 0;
  padding: 0;
  font-size: 100%;
  text-decoration: none;
  font-weight: normal;
  list-style: none;
  border: none;
  background: none;
  background-color: transparent;
  outline: none;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font: 400 1.8rem/1.5 "Yantramanav", sans-serif;
  color: #0B1D33;
  background-color: #FAFBFC;
}

/* GLOBAL LINKS --------------------------------------------------- */

a {
  color: #0B1D33;
}

a:hover {
  color: #D4A657;
}

/* HEADER & FOOTER ------------------------------------------------ */

/* HEADER: Transparent with backdrop blur */
header {
  background: rgba(11, 29, 51, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/* FOOTER: keep navy */
footer {
  background: #0B1D33;
  color: #FFFFFF;
}

header a,
footer a {
  color: #FFFFFF;
}

header a:hover,
footer a:hover {
  color: #D4A657;
}

/* default padding (footer only; header uses .site-header) */
@media (min-width: 300px) {
  footer {
    padding: 3rem 4rem;
  }
}

@media (min-width: 400px) {
  footer {
    padding: 3rem 8rem;
  }
}

/* thin sticky header */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0; /* no big padding on header, only inside .site-header */
}

header li {
  margin: 0 1rem;
}

@media (max-width: 1400px) {
  header li {
    padding-top: 1rem;
  }
}

header li a {
  font-weight: 300;
}

/* TITLES --------------------------------------------------------- */

h1 a,
h2 a {
  white-space: nowrap;
}

@media (min-width: 300px) {
  h1 a,
  h2 a {
    font: italic 700 3rem "Playfair Display", serif;
  }
}

@media (min-width: 400px) {
  h1 a,
  h2 a {
    font: italic 700 4rem "Playfair Display", serif;
  }
}

h2 {
  font-weight: 700;
}

@media (min-width: 300px) {
  h2 {
    font-size: 3.2rem;
  }
}

@media (min-width: 400px) {
  h2 {
    font-size: 4rem;
  }
}

h3 {
  font-weight: 500;
}

@media (min-width: 300px) {
  h3 {
    font-size: 2.4rem;
  }
}

@media (min-width: 400px) {
  h3 {
    font-size: 2.6rem;
  }
}

/* FOOTER --------------------------------------------------------- */

footer h4,
footer h3 {
  font-size: 2.4rem;
  font-weight: 400;
}

footer a,
footer p,
footer input {
  font-weight: 300;
}

footer p {
  max-width: 50rem;
}

footer .errorLabel {
  padding: 1rem 0 0 0;
}

#footerNav {
  margin-right: 3.8rem;
}

/* BRAND / MISC --------------------------------------------------- */

.copyright {
  font-size: 1.5rem;
}

.copy {
  font-family: "Playfair Display", serif;
  font-style: italic;
}

#thankYouMessage {
  color: #D4A657;
}

/* QUOTE BUTTON --------------------------------------------------- */

.quoteBtn {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid #D4A657;
  background-color: #D4A657;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: all 0.25s ease-in-out;
}

.quoteBtn a {
  color: #0B1D33;
}

@media (min-width: 300px) {
  .quoteBtn {
    padding: 0.8rem 1.4rem;
  }
}

@media (min-width: 400px) {
  .quoteBtn {
    padding: 1.2rem 3rem;
  }
}

@media (any-hover: hover) {
  .quoteBtn:hover {
    background-color: #0B1D33;
    color: #D4A657;
    border-color: #D4A657;
    transform: translateY(-1px);
  }
  .quoteBtn:hover a {
    color: #D4A657;
  }
}

.quoteBtn:active {
  transform: scale(0.97);
}

/* SOCIAL ICONS --------------------------------------------------- */

.socials li {
  transition: transform 0.1s ease-in-out;
}

.socials li:active {
  transform: scale(0.93);
}

.socials a {
  font-size: 0;
  margin-right: 3rem;
  transition: color 0.1s ease-in-out;
}

#fb::before {
  content: "";
  font: 400 3.2rem "Font Awesome 5 Brands";
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

#twitter::before {
  content: "";
  font: 400 3.2rem "Font Awesome 5 Brands";
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

#insta::before {
  content: "";
  font: 400 3.2rem "Font Awesome 5 Brands";
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

#linked::before {
  content: "";
  font: 400 3.2rem "Font Awesome 5 Brands";
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

/* SUBSCRIBE SECTION ---------------------------------------------- */

.subscribeSection {
  font-size: 0;
}

.subscribeSection p,
.subscribeSection button,
.subscribeSection input {
  font-size: 2rem;
}

.subscribeSection input {
  height: 5.2rem;
  border: 2px solid #1E3A8A;
  color: #0B1D33;
  background-color: #FFFFFF;
  text-indent: 1rem;
  border-radius: 999px 0 0 999px;
}

@media (min-width: 300px) {
  .subscribeSection input {
    min-width: 65%;
  }
}

@media (min-width: 550px) {
  .subscribeSection input {
    min-width: 75%;
  }
}

.subscribeSection button {
  height: 5.2rem;
  padding: 0 2.4rem;
  background-color: #D4A657;
  border-radius: 0 999px 999px 0;
  color: #0B1D33;
  border: 2px solid #D4A657;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.2s ease-in-out;
}

@media (any-hover: hover) {
  .subscribeSection button:hover {
    background-color: #0B1D33;
    color: #D4A657;
    border-color: #0B1D33;
  }
}

.subscribeSection button:active {
  transform: scale(0.97);
}

/* SCROLL TARGET OFFSET ------------------------------------------- */

@media (min-width: 300px) {
  :target {
    scroll-margin-top: 25rem;
  }
}

@media (min-width: 977px) {
  :target {
    scroll-margin-top: 10rem;
  }
}

/* NAV ACTIVE LINK ------------------------------------------------ */

.currentScroll,
.currentAlways {
  color: #D4A657;
  font-weight: 500;
  border-bottom: 2px solid #D4A657;
  padding-bottom: .2rem;
}

nav a {
  transition: color 0.2s ease-in-out;
}

/* GENERIC BUTTON / CTA STYLES ------------------------------------ */

form button,
#careerspage button,
#finalCTA p {
  border-radius: 999px;
  border: 1px solid #D4A657;
  background-color: #D4A657;
  color: #0B1D33;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

form button a,
#careerspage button a,
#finalCTA p a {
  color: inherit;
}

@media (any-hover: hover) {
  form button:hover,
  #careerspage button:hover,
  #finalCTA p:hover {
    background-color: #0B1D33;
    color: #D4A657;
    border-color: #0B1D33;
  }
}

form button:active,
#careerspage button:active,
#finalCTA p:active {
  transform: scale(0.98);
}

/* NAV TOGGLER ---------------------------------------------------- */

.navbar-toggler {
  margin-top: .5rem;
}

@media (max-width: 992px) {
  .navbar-toggler {
    margin: 3.5rem 0 0rem 1rem;
  }
}

.navbar-toggler-icon {
  width: 3rem;
  height: 3rem;
}

/* CONTACT PAGE --------------------------------------------------- */

#contactpage a {
  color: #1E3A8A;
}

#contactpage a:hover {
  color: #D4A657;
}

#contactpage section {
  margin: 0 5rem 5rem 0;
}

@media (min-width: 300px) {
  #contactpage {
    padding: 3rem 4rem;
  }
}

@media (min-width: 400px) {
  #contactpage {
    padding: 8rem 8rem;
  }
}

#contactpage h2 {
  color: #0B1D33;
  margin-bottom: 2rem;
}

#contactpage h3 {
  color: #D4A657;
  margin-bottom: .5rem;
}

#contactpage p {
  min-width: 35rem;
  max-width: 50rem;
}

#contactpage ul {
  margin-top: 3rem;
}

#contactpage li {
  margin-bottom: 2rem;
  color: #0B1D33;
  font-size: 2rem;
}

dl {
  margin-top: 2rem;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  min-width: 38rem;
  max-width: 50rem;
}

dt {
  margin-top: 2rem;
  color: #D4A657;
  font-weight: inherit;
  flex: 0 0 37%;
}

@media (min-width: 1300px) {
  dt {
    flex: 0 0 30%;
  }
}

dd {
  color: #0B1D33;
  margin-top: 2.9rem;
  flex: 0 0 63%;
}

@media (min-width: 1300px) {
  dd {
    flex: 0 0 70%;
  }
}

#call::before,
#fax::before,
#webmail::before,
#postal::before {
  font-family: 'Material Icons';
  font-size: 3.5rem;
  color: #1E3A8A;
  vertical-align: middle;
  padding-right: 2rem;
}

#call::before { content: "call"; }
#fax::before { content: "fax"; }
#webmail::before { content: "email"; }
#postal::before { content: "place"; }

/* FORMS ---------------------------------------------------------- */

form {
  max-width: 65rem;
  border: solid 1px #E2E8F0;
  background-color: #FFFFFF;
  border-radius: 1.6rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

form h3,
form input,
form textarea,
form button {
  width: calc(100% - 4rem);
  margin: 2rem 2rem;
}

form input,
form textarea {
  background-color: #F5F7FA;
  padding: 1.5rem 2rem;
  border-radius: 0.8rem;
  border: 1px solid #E2E8F0;
}

form input:focus,
form textarea:focus {
  border: solid 2px #1E3A8A;
}

form textarea {
  height: 22rem;
}

form button {
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* ERROR STYLES --------------------------------------------------- */

label:not(.errorLabel) {
  display: none;
}

.errorLabel {
  color: red;
  font-size: 1.8rem;
  padding: 0 0 2rem 2rem;
  margin-right: 1rem;
  display: inherit;
}

.errorLabel::before {
  content: "▸ ";
}

.error {
  border: solid 2px red !important;
}

/* HERO (CTA SECTION) --------------------------------------------- */

#cta {
  background: linear-gradient(135deg, #0B1D33 0%, #1E3A8A 45%, #F5F7FA 100%);
  overflow: hidden;
}

@media (min-width: 300px) {
  #cta {
    padding: 6rem 4rem 5rem;
  }
}

@media (min-width: 400px) {
  #cta {
    padding: 8rem 8rem 6rem;
  }
}

#cta h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  max-width: 55rem;
}

#cta p {
  color: #F5F7FA;
  max-width: 52rem;
  margin: 2rem 0 3rem 0;
}

#cta p:nth-of-type(2) {
  margin-bottom: 2rem;
}

/* "Services" Button in Hero -------------------------------------- */

.goToServices {
  background-color: #D4A657;
  border: solid 1px #D4A657;
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.goToServices a {
  color: #0B1D33;
}

@media (min-width: 300px) {
  .goToServices {
    padding: 1rem 4rem;
    max-width: 26rem;
  }
}

@media (min-width: 650px) {
  .goToServices {
    padding: 1.2rem 5rem;
  }
}

/* ABOUT SECTION -------------------------------------------------- */

#about {
  background-color: #F5F7FA;
}

#about h2 {
  text-align: center;
  color: #0B1D33;
  padding-top: 5rem;
}

#about h3 {
  color: #D4A657;
  margin-bottom: .5rem;
}

@media (min-width: 300px) {
  #about ul {
    padding: 3rem 4rem;
  }
}

@media (min-width: 400px) {
  #about ul {
    padding: 3rem 8rem;
  }
}

@media (min-width: 1216px) {
  #about ul {
    padding: 5rem 20rem;
  }
}

#about li {
  margin-bottom: 5rem;
}

@media (min-width: 850px) {
  #about li {
    max-width: 25rem;
    margin-right: 5rem;
  }
}

@media (min-width: 992px) {
  #about li {
    max-width: 35rem;
  }
}

@media (min-width: 1550px) {
  #about li {
    max-width: 45rem;
  }
}

/* SERVICES SECTION ----------------------------------------------- */

#services {
  margin-bottom: 10rem;
}

@media (min-width: 300px) {
  #services {
    padding: 3rem 4rem;
  }
}

@media (min-width: 400px) {
  #services {
    padding: 3rem 8rem;
  }
}

#services h2 {
  width: 100%;
  color: #0B1D33;
  margin-bottom: 5rem;
  padding-top: 5rem;
}

#services h3 {
  color: #D4A657;
  margin-bottom: .5rem;
}

#services .formSubmitted {
  color: #0B1D33;
}

#services li {
  margin-bottom: 5rem;
}

#services p {
  min-width: 30rem;
}

@media (min-width: 400px) {
  #services p {
    max-width: 35rem;
  }
}

@media (min-width: 750px) {
  #services p {
    max-width: 55rem;
    margin-right: 5rem;
  }
}

@media (min-width: 900px) {
  #services form {
    margin-top: 20%;
  }
}

@media (min-width: 1110px) {
  #services form {
    margin-top: 7%;
  }
}

@media (min-width: 1400px) {
  #services form {
    margin-top: 5%;
  }
}

/* CAREERS PAGE --------------------------------------------------- */

#careerspage {
  background-color: #F5F7FA;
  overflow: hidden;
}

#careerspage p {
  min-height: 8rem;
  max-width: 115rem;
  margin: 0 auto;
}

#careerspage #mainpar {
  text-align: justify;
  margin-top: 2rem;
}

@media (min-width: 300px) {
  #careerspage section {
    padding: 0rem 4rem;
  }
}

@media (min-width: 400px) {
  #careerspage section {
    padding: 0rem 8rem;
  }
}

@media (min-width: 1000px) {
  #careerspage section:nth-of-type(2),
  #careerspage section:nth-of-type(3) {
    width: 50%;
  }
}

#careerspage h2 {
  color: #D4A657;
  text-align: center;
}

#careerspage #mainh2 {
  color: #0B1D33;
  padding-top: 8rem;
}

#careerspage h3 {
  color: #D4A657;
  text-align: center;
}

#careerspage ul {
  color: #0B1D33;
}

@media (min-width: 768px) and (max-width: 992px) {
  #careerspage .col-md-4 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  #positions {
    margin-left: 8rem;
  }
}

#positions li {
  color: #707070;
  margin: 5rem 0 2rem 0;
  text-align: center;
}

@media (min-width: 1000px) {
  #positions li {
    margin: 8rem 5rem 8rem 0;
  }
}

/* APPLY SECTION -------------------------------------------------- */

#apply {
  background-color: #F5F7FA;
  margin: unset;
}

#apply button {
  color: #0B1D33;
  border-radius: 999px;
  background-color: #D4A657;
  border: 1px solid #D4A657;
  padding: 0rem 6rem;
  height: 5rem;
  margin: 2rem 0;
}

@media (min-width: 550px) {
  #apply button {
    padding: 0 10rem;
  }
}

@media (min-width: 800px) {
  #apply button {
    padding: 0 15rem;
  }
}

@media (min-width: 1500px) {
  #apply button {
    padding: 0 22rem;
  }
}

@media (min-width: 400px) {
  #apply button:first-of-type {
    margin-left: 2rem;
  }
}

/* BENEFITS LISTS ------------------------------------------------- */

.benefits li {
  list-style-type: "▸ ";
}

#drvRequirements,
#drvBenefits,
#wrkBenefits {
  margin: 2rem 0 5rem 25%;
}

@media (min-width: 550px) {
  #drvRequirements,
  #drvBenefits,
  #wrkBenefits {
    margin-left: 35%;
  }
}

@media (min-width: 830px) {
  #drvRequirements {
    margin-left: 15%;
  }
}

@media (min-width: 830px) {
  #drvBenefits {
    margin-left: 0%;
  }
}

@media (min-width: 830px) {
  #wrkBenefits {
    margin-left: 40%;
  }
}

/* REVIEWS SECTION ------------------------------------------------ */

#reviews {
  background-color: #F5F7FA;
  padding: 6rem 4rem;
}

#reviews h2 {
  color: #0B1D33;
  text-align: center;
  padding-bottom: 3rem;
}

#reviews h5,
#reviews h6,
#reviews .reviewRating {
  background-color: #F5F7FA;
}

#reviews h5 {
  padding-top: 1rem;
  font-size: 2.5rem;
  color: #D4A657;
}

#reviews h6 {
  color: #707070;
}

#reviews img {
  float: left;
  margin: 2rem;
  border-radius: 35px;
  width: 60px;
  height: 60px;
}

.reviewCard {
  background-color: #FFFFFF;
  color: #0B1D33;
  max-width: 75rem;
  margin: 0 auto;
  border: solid 1.2px #D4A657;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  border-radius: 1.6rem;
}

.reviewCard p:nth-of-type(1) {
  padding: 4rem 6rem;
  background-repeat: no-repeat;
  background-position: left 20px top 20px, right 20px bottom 20px;
  background-size: 30px;
  background-origin: padding-box;
}

.reviewRating {
  padding-bottom: 1rem;
  font-size: 0;
  color: #D4A657;
}

.reviewRating::before {
  content: "star star star star star";
  font-family: "Material Icons";
  font-size: 2rem;
}

.carousel,
.carousel-item {
  position: inherit;
  float: none;
}

/* FINAL CTA ------------------------------------------------------ */

#finalCTA {
  background-color: #FFFFFF;
}

@media (min-width: 300px) {
  #finalCTA {
    padding: 3rem 4rem;
  }
}

@media (min-width: 400px) {
  #finalCTA {
    padding: 3rem 8rem;
  }
}

#finalCTA p {
  width: fit-content;
  margin: 0 auto;
  padding: 1.5rem 6rem;
}

@media (min-width: 550px) {
  #finalCTA p {
    padding: 1.5rem 10rem;
  }
}

@media (min-width: 800px) {
  #finalCTA p {
    padding: 1.5rem 15rem;
  }
}

@media (min-width: 1500px) {
  #finalCTA p {
    padding: 1.5rem 22rem;
  }
}

/* ===================== NAV + MEGA MENU (ABOUT / CAREERS) ===================== */

/* thinner, organized header bar */
.site-header {
  padding: 0.3rem 3rem; /* smaller for shorter header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
}

@media (min-width: 400px) {
  .site-header {
    padding: 0.4rem 6rem; /* still thin, scales with width */
  }
}

/* logo + text */
.site-brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* smaller logo text so header height is reduced */
.site-logo a {
  font-size: 2.2rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .site-logo a {
    font-size: 2.6rem;
  }
}

.brand-logo {
  display: block;
  max-height: 32px;  /* keeps header thin */
  width: auto;
  border-radius: 8px;
  object-fit: contain;
  background-color: #111827; /* dark backing like logo bg */
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.25),
    0 0 14px rgba(0,0,0,0.6); /* soft ring so it pops */
}

@media (min-width: 768px) {
  .brand-logo {
    max-height: 36px;
  }
}

/* quote button on right */
.header-quote {
  margin-left: 1.6rem;
  white-space: nowrap;
}

/* main nav row */
.main-nav {
  flex: 1 1 auto;
  align-self: stretch;
}

/* let Bootstrap handle display; just style spacing */
.main-menu {
  align-items: center;
  justify-content: flex-end;
  gap: 2.5rem;
}

/* top-level links */
.main-nav .nav-item {
  position: relative; /* anchor for mega dropdowns */
}

.main-nav .nav-link {
  font-family: "Yantramanav", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #FFFFFF;         /* white text on gradient bar */
  padding: 0.4rem 0;      /* small vertical padding = thin header */
  border-bottom: 2px solid transparent;
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus {
  border-bottom-color: #D4A657; /* gold underline */
  color: #D4A657;
  text-decoration: none;
}

/* MEGA MENU BASE ------------------------------------------------- */

.has-mega .mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  background: #FFFFFF;
  min-width: 420px;
  padding: 1.75rem 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);

  display: grid;
  grid-template-columns: 1.2fr 2fr;
  column-gap: 2.5rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    visibility 0.18s ease-out;
  z-index: 50;
}

/* show mega on hover / focus (desktop) */
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* keep right-most mega (Careers / Contact) inside the screen */
.main-nav .nav-item.has-mega:last-child .mega-menu,
.mega-align-right {
  right: 0;
  left: auto;
}

/* left descriptive panel */
.mega-left {
  border-right: 1px solid #E2E8F0;
  padding-right: 2rem;
}

.mega-left h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.9rem;
  margin-bottom: 0.8rem;
  color: #0B1D33;
}

.mega-left p {
  font-size: 1.5rem;
  color: #707070;
  margin-bottom: 0.75rem;
}

.mega-cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
  background-color: #D4A657;
  border: 1px solid #D4A657;
  color: #0B1D33;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.mega-cta:hover {
  background-color: #0B1D33;
  color: #D4A657;
  border-color: #0B1D33;
}

/* right link columns */
.mega-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.5rem;
}

.mega-col {
  display: flex;
  flex-direction: column;
}

.mega-link {
  font-size: 1.5rem;
  color: #0B1D33;
  padding: 0.35rem 0;
}

.mega-link:hover,
.mega-link:focus {
  color: #1E3A8A;
  text-decoration: none;
}

/* CAREERS IMAGE COLUMN ------------------------------------------- */

.mega-careers-right {
  align-items: stretch;
}

.mega-careers-image-wrap {
  justify-content: center;
}

.mega-careers-image {
  width: 100%;
  max-width: 220px;
  border-radius: 0.75rem;
  object-fit: cover;
}

/* RESPONSIVE: desktop vs mobile ---------------------------------- */

@media (min-width: 992px) {
  .main-menu {
    gap: 3rem;
  }
}