/* Global Typography */

body {
   font-family: 'Comfortaa'; 
   letter-spacing: 1px;

}

h2, h3, h4 {
   font-family: "bc-alphapipe", sans-serif;
   font-style: normal;
}

h3 {
   font-size: clamp(32px, 3vw, 48px);
   font-weight: 300;
}

header {
   background-image: url(../img/header-image.jpg);
   background-size: cover;
   background-position: center;
   padding-top: 1rem;
}

.field{
   border-radius: clamp(25px, 90%, 50px);
   background: rgba(255,255,255,.9);
   width: clamp(320px, 90%, 1420px);
   height: clamp(40px, 90%, 50px);
   margin: auto;
   padding: 1rem 2rem;
   display: flex;
}

.logo {
   height: clamp(30px, 3vw, 40px);
   margin: auto;
}

.field p {
   font-size: clamp(12px, 2vw, 14px);
}

.menu-button {
   margin-left: auto;
   border-style: none;
   background-color: #FFFFFF;
}

nav {
   display: none;
   width: 100%;
}

nav .open {
   display: block;
}

nav ul {
   display: flex;
   justify-content: space-around;
   list-style: none;
   margin: auto;
}

.hero {
   display: block;
   margin: auto;
   padding-top: 10rem;
   padding-bottom: 15rem;
   width: clamp(320px, 70%, 460px);
}

.body-intro {
   background-color: rgba(247, 217, 119, 1);
}

.body-intro-text h2 {
   font-size: clamp(32px, 4vw, 60px);
   padding: 8rem 3rem 0rem 3rem;
}

.body-intro-text p {
   font-size: clamp(16px, 4vw, 20px);
   padding: 3rem 3rem 0rem 3rem;
}

.body-intro-image {
   padding: 5rem 0rem 10rem 0rem;
   width: clamp(390px, 90%, 626px);
   margin: auto;
}

.body-work {
   padding: 10rem 5rem 0rem 6rem;
   display: grid;
}

.work-examples {
   display: flex;
   padding-top: .5rem;
}

.icons {
   max-width: 120px;
   padding-left: 1.5rem;
}

.body-activities {
   padding: 10rem 0rem 0rem 0rem;
}

.body-activities li {
   display: flex;
   flex-wrap: nowrap;
   padding: 3rem 2rem 3rem 0rem;
}

.body-activities figure {
   display: flex;
   flex-direction: row;
   column-gap: 1rem;
}

.body-activities h4 {
   font-size: 24px;
   font-weight: 300;
   text-align: center;
}

.body-activities figcaption {
   display: none;
   text-align: center;
   font-size: clamp(16px, 3vw, 20px);
}

.blue {
   background-color:#79BDF6;
}

.yellow {
   background-color:#FEE38C;
}

.grey {
   background-color:#DBDBDB;
}

.magenta {
   background-color:#DB7DC3;
}

.body-outro {
   display: flex;
   flex-direction: column;
}

.address {
   display: grid;
   grid-template-columns: 1fr 3fr;
   background-color: #ffffff;
   padding: 7rem 2rem 7rem 2rem;
}

.address p {
   columns: 1/2;
}

.address-info {
   columns: 2/2;
   color: #9D9D9D;
}

.hours {
   display: grid;
   grid-template-columns: 1fr 3fr;
   color: #ffffff;
   background-color: #000000;
   padding: 7rem 2rem 7rem 2rem;
}

.hours p {
   columns: 1/2;
}

.hour-info {
   columns: 2/2;
   color: #9D9D9D;
}

footer {
   background-color: #c4b4a0;
   color: white;
   padding: 10rem 2rem 0rem 2rem;
}

footer p {
   padding-top: 1rem;
   padding-bottom: 6rem;
}

.email-join {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.email {
   border-color: #ffffff;
   border-radius: 25px;
   border-style: solid;
   width: clamp(320px, 90%, 1420px);
   padding: 1rem 2rem 1rem 2rem;
}

.email-join button{
   color: #000000;
   background-color: #ffffff;
   border-style: none;
   border-radius: 25px;
   width: clamp(320px, 90%, 1420px);
   padding: 1rem 2rem 1rem 2rem;
}

.email-join button:hover {
   background-color: #ce4eae;
   color: #ffffff;
   transition: 0.3s;
}

.about-dropdown ul {
   list-style: none;
   padding: 6rem 0rem 0rem 0rem;
   line-height: 40px;
}

.about-dropdown a {
   font-size: clamp(14px, 4vw, 16px);
   text-decoration: none;
   color: #ffffff;
}

.about-dropdown li a:hover {
   color: #ce4eae;
   transition: 0.3s;
}

.social-icons {
   padding: 2rem 0rem;
   width: clamp(150px, 13%, 300px);
   display: flex;
   justify-content: space-between;
   gap: 1rem;
}

.copywright {
   border-top: 1.5px solid #ffffff;
   padding-top: 2rem;
}

@media screen and (min-width:500px) { 
   .body-work {
      padding: 10rem 8rem 0rem 8rem;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 2fr 2fr;
      column-gap: 1.5rem;
      row-gap: 1rem;
   }
}

@media screen and (min-width:800px) {
   nav {
      display: block;
   }
   
   header nav ul {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
      gap: 1rem;
      padding-top: .6rem;
   }

   header nav li a {
      color: #000000;
      text-decoration: none;
   }

   header nav li a:hover {
      color: #ce4eae;
      transition: 0.3s;
   }

   .menu-button {
      display: none;
   }

   .body-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 6rem 6rem 0rem 6rem;
   }

   .body-intro-text {
      columns: 1/2;
   }

   .body-work {
      padding: 10rem 8rem 0rem 8rem;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 2fr 2fr;
      column-gap: 1.5rem;
      row-gap: 1rem;
   }

   .body-activities {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }

   .icons {
      display: block;
      margin: 18%;
   }

   .body-activities figure {
      padding: 6rem 3rem 12rem 5rem;
      display: inline-block;
   }

   .body-activities h4 {
      padding-top: 3rem;
   }

   .body-activities figcaption {
      display: block;
      padding-top: 3rem;
   }

   .body-outro {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }

   .address {
      padding: 15rem 2rem 8rem 8rem;
   }

   .hours {
      padding: 15rem 2rem 8rem 8rem;
   }

   footer {
      padding-left: 8rem;
      padding-right: 8rem;
      padding-top: 15rem;
   }

   .action-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 5rem;
   }

   .email-join {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 2rem;
   }

   .email-join button {
      width: 30%;
   }

   .about-dropdown {
      padding: 7.5rem 4rem 7rem 2rem;
   }

   .about-dropdown ul {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 6rem;
   }

   .social-icons {
      display: flex;
      flex-direction: row;
      gap: 2rem;
   }

}