@charset "utf-8";

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

html {
  box-sizing: border-box;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
  margin: 0;
  background-color: coral;
}

.wrapper {
  /* position: absolute; */
  padding: 0 15px;
  border-radius: 8px;
  background-color: azure;
  max-width: 1280px;
  margin: 0 auto;
  /* flex-wrap: wrap; */
  display: grid;
  /* min-height: 100%; */
  /* justify-items: center; */
  /* width: 100%; */
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
  opacity: 1;
  transform: translateZ(0) scale(1);
  border: black 2px solid;
}
.c-all {
  grid-column: 1 / -1;
}

img,
video {
  width: 100%;
}

li {
  list-style-type: none;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Bungee Spice", sans-serif;
  font-weight: 400;
  font-style: normal;
}

header {
  color: var(--color-blue-you-proud);
  background-color: rgb(11, 246, 242);
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  background-color: aqua;
}

.icon-books {
  width: 1.125em;
}

.nav-main {
  position: static;
  background-color: rgb(0, 42, 255);
  align-content: center;
  margin-right: 1007px;
  border: none;
  background: none;
}

.nav-main-menu {
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: hidden;
  border-radius: 10px;
  margin-bottom: -3px;
  margin-top: 7px;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.nav-main-menu-toggle svg * {
  transform-box: fill-box;
}

.nav-main-menu-toggle rect:nth-child(1) {
  transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(2) {
  transition: all .25s linear;
  transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(3) {
  transition: all .25s cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transform-origin: center;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(1) {
  rotate: 0.15turn;
  translate: 0 15px;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(2) {
  scale: 0;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(3) {
  rotate: -0.15turn;
  translate: 0 -5px;
}

#nav-main-menu {
  transform: translate3d(-120%);
  transition: all 0.5s ease-in-out;
  position: absolute;
  width: fit-content;
  color: black;
  background: rgba(255, 255, 255, 0.312);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  margin: 0;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  display: flex;
  visibility: hidden;
  flex-wrap: nowrap;
  flex-direction: column;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  font-variant-caps: small-caps;
  border: hidden;
  border-radius: 15px;
}

#nav-main-menu:not([hidden]) {
  visibility: visible;
  transform: translateX(15px);
  transition: all 1.2 ease-in-out;
}

#nav-main-menu li a {
  color: inherit;
  display: flex;
  line-height: 2;
  padding: 0 1.25em;
  transition: all .25s ease-in-out;
  text-decoration: none;
  border: hidden;
  border-radius: 15px;
}

#nav-main-menu li a:hover,
#nav-main-menu li a:focus {
  background: whitesmoke;
}

.grid-section {
  display: block;
}

main {
  /* display: block; */
  /* width: fit-content; */
  /* height: fit-content; */
}

.card a {
  justify-self: center;
  align-self: center;
  margin: 1rem;
  display: flex;
  line-height: 3;
  padding: 0 1rem;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  color: #011f1e;
  background: #0bf6f3;
  text-decoration: none;
  transition: all .2s ease-in-out;
}
 

 ｝
   .card a:hover{
    scale: 1.125;
    box-shadow: 0 5px 10px;
  }
    
    icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-right: .25em;
      stroke-width: 0;
      stroke: currentColor;
      fill: currentColor;
      /* background-color: aqua;*/
    }

    .cards {
      display: grid;
      gap: 15px;
    }

    .cards-main-heading {
      color: rgb(0, 0, 0);
      text-align: center;
      font-family: Cambria, serif;
      font-weight: bold;
      font-variant-caps: small-caps;
      width: 100%;
      height: auto;
    }

    .cards-item,
    .cards-item-double .cards-item-fullwidth {
      margin-top: 10px;
      margin-bottom: 10px;
      width: fit-content;
      height: fit-content;
      margin-left: auto;
      margin-right: auto;
      justify-items: center;
    }

    .cards-item-image {
      width: 100%;
      height: auto;
      align-self: center;
      background-color: var(--color-primary-1);
      border: hidden;
      border-radius: 6.25px;
      align-items: center;
    }

    .cards-item-heading {
      text-align: center;
      font-family: Cambria, serif;
      font-weight: bold;
      width: 100%;
      color: rgb(0, 0, 0);
    }

    a.cards-item-link {
      color: rgb(0, 0, 0);
      text-decoration: none;
    }

    a.cards-item-link:hover,
    a.cards-item-link:focus,
    a.cards-item-link:active {
      text-decoration: underline;
    }

    .cards-item-paragraph {
      color: rgb(0, 0, 0);
      font-family: Verdana, sans-serif;
      font-weight: normal;
    }

    .cards-item-paragraph::first-letter {
      initial-letter: 2 2;
      font-weight: bold;
      padding-right: 5px;
    }

    .form-directions {
      display: block;
    }

    .form-directions-label {
      color: rgb(0, 0, 0);
      font-family: Verdana, sans-serif;
      text-align: center;
    }

    .form-directions-input-text {
      border: hidden;
      border-radius: 6px;
      color: rgb(255, 255, 255);
      background-color: #545454;
      font-family: Verdana, sans-serif;
      text-align: left;
      padding: 2px;
      border: black solid 1px;
    }

    .form-directions-input-submit {
      border: 2px solid var(--color-secondary-2);
      border-radius: 6px;
      background-color: rgb(255, 230, 0);
      color: var(--color-secondary-1);
      font-family: Verdana, sans-serif;
      font-weight: bold;
      padding: 2px;
      text-align: center;
    }

    #map {
      grid-column-start: auto;
      grid-column-end: span 2;
      grid-row-start: auto;
      grid-row-end: span 1;
      margin: 20px 0;
      height: 580px;
      width: 375px;
      overflow: hidden;
      background: url(../css/images/map.webp) no-repeat center / cover;
      /*border: hidden;
  border-radius: 6px;
  margin-top: 147px;*/
    }

    #map h4 {
      font-size: 1.4em;
      margin: 0;
    }

    #map span {
      display: block;
      font-size: 0.8em;
    }

    #map ul {
      list-style: disc;
      padding: 5px 20px;
      font-size: 1.2em;
    }

    .form-contact {
      display: block;
    }

    .form-contact-grid {
      list-style: none;
      padding: 0;
      text-align: left;
      color: white;
    }

    form ol {
      list-style: none;
      padding-left: 0;
    }

    form ol li {
      transition: all 0.2s ease-in;
      position: relative;
    }

    form label {
      display: block;
      line-height: 1.5;
    }

    form input+label,
    form textarea+label {
      transform: translateY(-100%);
      transition: all 0.2s ease-in;
      z-index: 1;
      position: relative;
    }

    form input:valid+label,
    form textarea:valid+label {
      transform: translateY(0);
      background: rgb(0, 0, 0);
    }

    form:valid input[type="submit"] {
      border: 5px solid rgb(0, 0, 0);
    }

    form:valid input[type="submit"] {
      border: 5px solid rgb(0, 0, 0);
    }

    form li:last-child::before {
      content: "✅";
      position: absolute;
      left: 40px;
      line-height: 2;
      border: hidden;
      border-radius: 6px;
    }

    form li:last-child::after {
      content: "⛔️";
      position: absolute;
      top: 0;
      right: 40px;
      line-height: 2;
      border: hidden;
      border-radius: 6px;
    }

    form:invalid li:last-child {
      background: lightcoral;
      padding: 0 100px 0px 00px;
    }

    form:valid li:last-child {
      background: lightgreen;
      padding: 0 0px 0px 100px;
    }

    form :is(input, select, textarea) {
      font-family: inherit;
      font-size: inherit;
      color: inherit;
    }

    .form-contact-grid-item-halfwidth>*,
    .form-contact-grid-item-fullwidth>* {
      font-family: Verdana, sans-serif;
      width: 100%;
    }

    .form-contact-grid-item-halfwidth>label,
    .form-contact-grid-item-fullwidth>label {
      color: #545454;
    }

    .form-contact-input-text {
      text-align: left;
      padding: 2px;
      border: hidden;
      border-radius: 6px;
      line-height: 2;
      z-index: 2;
      position: relative;
      background-color: #545454;
      color: white;
    }

    .form-contact-input-submit {
      border: 2px solid var(--color-secondary-2);
      border-radius: 6px;
      background-color: rgb(0, 234, 255);
      color: var(--color-secondary-1);
      font-weight: bold;
      text-align: center;
      padding: 2px;
      position: relative;
      z-index: 2;
      transition: all 0.2s ease-in;
      display: block;
    }

    .form-contact label {
      display: block;
      line-height: 1.5;
    }

    .form-contact input+label,
    .form-contact textarea+label {
      transform: translateY(-100%);
      transition: all 0.2s ease-in;
      z-index: 1;
      position: relative;
      padding-left: 2.5%;
      padding-bottom: 0.5%;
      color: rgb(254, 254, 254);
    }

    .form-contact input:valid+label,
    .form-contact textarea:valid+label {
      transform: translateY(0);
      background: springgreen;
    }

    form>ol>li {
      position: relative;
      transition: all 0.2s ease-in;
    }

    form li:last-child::before {
      content: "🟢";
      position: absolute;
      left: 40px;
      line-height: 2;
      border: hidden;
      border-radius: 6px;
    }

    form li:last-child::after {
      content: "🔴";
      position: absolute;
      top: 0;
      right: 40px;
      line-height: 2;
      border: hidden;
      border-radius: 6px;
    }

    form:invalid li:last-child {
      background: crimson;
      padding: 0 100px 0 0;
    }

    form:valid li:last-child {
      background: springgreen;
      padding: 0 0 0 100px;
    }

    .cta-more-link:hover {
      box-shadow: none;
    }

    .cta-more-link:active {
      box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 1);
    }

    .cta-more-link {
      font-size: 1.2em;
      line-height: 2;
      margin: 10px;
      padding: 0 1em;
      text-decoration: none;
      border-radius: .5em;
      border: 1px solid hsl(0, 0%, 0%);
      font-weight: bold;
      transition: all .5s ease-in-out;
    }

    .cta-more-link-large {
      font-size: 1.4em;
    }

    .cta-more-link-primary {
      color: hsl(0, 0%, 100%);
      box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.8);
      background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.8) 0px, hsl(204, 97%, 49%) 2px, hsl(218, 82%, 47%));
    }

    .cta-more-link-secondary {
      color: black;
      background: hsl(0, 79%, 72%);
      background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.8) 0px, hsl(199, 67%, 76%) 2px, hsl(184, 79%, 42%));
      box-shadow: 0 0em 1em currentColor;
    }

    .cta-more-link-success {
      color: black;
      background: #96d5f7;
      box-shadow: 0 0em 1em currentColor;
    }

    aside {
      background-color: var(--color-secondary-2);
      color: black;
      border: hidden;
      border-radius: 12.5px;
      padding: 2.5%;
      width: 100%;
      height: fit-content;
    }

    .aside-heading {
      font-family: Cambria, serif;
      font-weight: bold;
      font-variant-caps: small-caps;
      text-align: center;
      margin-left: 0;
      margin-right: 0;
    }

    .first-heading {
      margin-top: 0;
    }

    .aside-paragraph {
      font-family: Verdana, sans-serif;
      font-weight: normal;
      text-align: center;
      margin-left: 0;
      margin-right: 0
    }

    .last-paragraph {
      margin-bottom: 0;
    }

    .callout {
      font-family: Cambria, serif;
      font-weight: bold;
      font-size: 2.5em;
      font-variant-caps: small-caps;
      text-align: center;
      background-color: rgb(0, 255, 247);
      color: var(--color-secondary-1);
      border: hidden;
      border-radius: 6.25px;
      padding: 10%;
    }

    footer {
      width: 100%;
      height: fit-content;
      padding: 10px;
      background-color: var(--color-primary-1);
      float: right;
    }

    footer>p {
      font-family: Verdana, sans-serif;
      font-weight: bold;
      text-align: end;
      color: rgb(0, 0, 0);

    }

    footer>p>a {
      font-family: Verdana, sans-serif;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: rgb(0, 0, 0);
      margin: 0;
    }

    footer>p>a:hover,
    footer>p>a:focus,
    footer>p>a:active {
      text-decoration: underline;
    }

    .card {
      /*border: 4px solid black;*/
      display: grid;
      text-align: center;
      border-radius: 15px;
      margin: auto;

    }

    @media screen and (min-width: 768px) {
      .wrapper {
        /* width: 87.5%; */
        /* margin-left: auto; */
        /* margin-right: auto; */
        margin-top: 25px;
        margin-bottom: 25px;
        border: hidden;
        border-radius: 25px;
      }

      header {
        border: hidden;
        border-radius: 12.5px;
      }

      header>img {
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
      }

      .grid-section {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;
        /* width: 100%; */
      }

      .c-span-2 {
        grid-column: span 2;
      }

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

      aside {
        grid-column-start: 9;
        grid-column-end: -1;
        background-color: var(--color-secondary-2);
        color: black;
        border: hidden;
        border-radius: 12.5px;
        padding: 25px;
      }

      .nav-main {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        background: none;
        border: none;
        margin-top: 25px;
        margin-bottom: 25px;
      }

      .nav-main-menu-toggle {
        display: none;
      }

      #nav-main-menu {
        position: relative;
        visibility: visible;
        transform: translateX(0);
        transition: none;
        background-color: var(--color-primary-2);
        display: flex;
        flex-direction: row;
        font-variant-caps: small-caps;
        justify-content: space-evenly;
        justify-self: center;
        margin: 0;
        border: 5px solid rgb(0, 81, 255);
        border-radius: 10px;
      }

      #nav-main-menu li a {
        color: rgb(0, 149, 255);
        border: 5px hidden;
        border-radius: 2.5px;
      }

      #nav-main-menu li a:hover,
      #nav-main-menu li a:focus {
        background-color: white;
        color: black;
      }



      main {
        grid-column-start: 1;
        grid-column-end: 9;
        display: grid;
        grid-template-columns: subgrid;
        /* gap: 25px; */
        /* height: fit-content; */
      }

      main>div:nth-child(even)>img {
        justify-self: left;
      }

      main>div:nth-child(odd)>img {
        justify-self: right;
      }

      img,
      video {
        width: auto;
      }

      .cards-main-heading {
        color: rgb(0, 0, 0);
        grid-column-start: 1;
        grid-column-end: span 2;
        text-align: center;
        font-family: Cambria, serif;
        font-weight: bold;
        font-variant-caps: small-caps;
        text-align: center;
      }

      .cards-item {
        grid-column-start: auto;
        grid-column-end: span 1;
        grid-row-start: auto;
        grid-row-end: span 1;
        text-align: center;
        align-items: center;
      }

      .cards-item-double {
        grid-column-start: auto;
        grid-column-end: span 1;
        grid-row-start: auto;
        grid-row-end: span 2;
      }

      .cards-item-image {
        background-color: var(--color-primary-1);
        border: hidden;
        border-radius: 6.25px;
        width: 100%;
        height: auto;
        align-items: center;
      }



      footer {
        color: black;
      }
    }

    @media screen and (min-width: 1024px) {}