* {
   scroll-behavior: smooth;
}

.shadow-light {
   box-shadow: 0 0 3px rgb(0, 0, 0, 0.3);
}

.shadow-light:hover {
   transition: .2s;
   box-shadow: 0 0 3px rgb(0, 0, 0, 0.5);
}


header {
   top: 0;
   z-index: 1;
   position: sticky;
   justify-content: space-between;
   align-items: center;
   height: 80px;
   box-shadow: 0 0 5px black;
}

.header-logo {
   width: 60px;
   margin-left: 16px;
}

#toggle-mobile {
   padding: 10px 0px;
   height: 80px;
   width: 60px;
}

#toggle-mobile:hover {
   cursor: pointer;
}

.mobile-nav-logo {
   width: 60px;
}

.menu-icon {
   width: 24px;
   height: 100%;
}

.header-nav {
   margin-right: 16px;
}

/* Main */

main {
   padding: 16px;
}

.hero-section {
   flex-direction: column-reverse;
   gap: 16px;
}

.hero-btn-container {
   margin: 32px 0;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
}

.hero-btn {
   max-width: 200px;
   width: 100%;
}

.hero-check-list {
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
}

.hero-check-list p {
   margin: 0;
}

.hero-left {
   padding: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.hero-content {
   max-width: 600px;
   width: 100%;
}

.hero-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.info-strip {
   width: 100%;
   padding: 16px;
}

.strip-items-container {
   flex-direction: column;
   justify-content: center;
   align-items: center;
   row-gap: 32px;
}

.strip-item {
   justify-content: center;
   align-items: center;
   gap: 8px;
}

.strip-item-icon {
   width: 24px;
}

/* Cards */

.cards-section {
   scroll-margin-top: 96px;
   margin: 64px 0;
   display: grid;
   gap: 16px;
}

.card {
   padding: 16px;
}

.card-icon,
.about-icon,
.rating-icon,
.rating-icon,
.contact-icon,
.faq-icon {
   width: 50px;
   padding: 8px;
}

/* About section */
.about-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.about-section {
   margin: 64px 0;
   flex-direction: column;
   gap: 16px;
}

.about-content-container {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 16px;
}

/* Carousel container */
.carousel-section {
   margin: 64px 0;
   grid-template-rows: 200px 250px auto;
   gap: 16px;
}

.carousel-content-container {
   padding: 16px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* carousel-img */
.carousel-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.carousel-preview {
   padding: 8px;
   gap: 8px;
   grid-template-columns: repeat(3, 1fr);
}

.preview-img {
   width: 100%;
   height: 125px;
   object-fit: cover;
}

.preview-img:hover {
   cursor: pointer;
}

/* Rating section */
.rating-section {
   scroll-margin-top: 96px;
   margin: 64px 0;
}

.rating-cards-container {
   margin: 32px 0;
   gap: 16px;
}

.rating-card {
   padding: 16px;
}

/* Contact */
.contact-section {
   scroll-margin-top: 96px;
   margin: 64px 0;
}

.contact-header {
   padding: 16px;
}

.form-container {
   margin: 32px 0;
}

form {
   margin: auto;
   max-width: 650px;
   width: 100%;
}

.form-message {
   margin-top: 16px;
   padding: 6px;
   width: 100%;
   height: 120px;
}

.btn-form {
   margin: 32px 0;
}

/* FAQ */
.faq-section {
   margin: 64px 0;
}

.faq-header {
   padding: 16px;
}

.faq-container {
   max-width: 650px;
   width: 100%;
   margin: 48px auto;
}

.accordion-header {
   padding: 0 4px;
   display: grid;
   gap: 16px;
   grid-template-columns: auto 36px;
   align-items: center;
}

.accordion-btn {
   width: auto;
   padding: 8px;
   border: none;
}

.accordion-btn:hover {
   cursor: pointer;
}

.accordion-icon {
   width: 20px;
}

/* Footer */
footer {
   box-shadow: 0 0 5px black;
   padding: 16px;
}

.footer-header {
   margin-bottom: 32px;
   gap: 16px;
   align-items: center;
}

.footer-logo {
   width: 48px;
}

.footer-links-container {
   margin: 0 0 16px;
   padding: 0;
   list-style-type: none;
}

.footer-links-container li {
   margin: 4px 0;
}

.footer-link {
   text-decoration: none;
   width: 120px;
}

.footer-link:hover {
   text-decoration: underline;
}

.address-header {
   gap: 4px;
}

.address-content {
   padding: 8px;
}

.address-map {
   width: 100%;
   height: 120px;
}

@media screen and (min-width: 600px) {
   .hero-section {
      flex-direction: row;
      justify-content: center;
   }

   .hero-left,
   .hero-right {
      width: 50%;
   }

   .strip-items-container {
      padding: 30px;
      flex-direction: row;
      justify-content: space-evenly;
      column-gap: 16px;
   }

   .strip-item {
      flex-direction: column;
   }

   .cards-section {
      grid-template-columns: repeat(2, 1fr);
   }

   .about-section {
      flex-direction: row;
   }

   .about-img-container,
   .about-content-container {
      width: 50%;
   }

   .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 32px;
   }

   .address {
      display: flex;
      flex-direction: row;
      gap: 4px;
   }

   .address-map,
   .address-content {
      width: 50%;
   }
}

@media screen and (min-width: 992px) {
   .carousel-section {
      grid-template-columns: 40% calc(60% - 16px);
      grid-template-rows: 500px auto;
   }

   .carousel-preview {
      grid-column: 1/3;
   }

   .preview-img {
      height: 200px;
   }

   .rating-cards-container {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media screen and (min-width: 1200px) {
   .cards-section {
      grid-template-columns: repeat(4, 1fr);
   }
}

.w3-grayscale-off:hover {
   filter: grayscale(1%);
}