@import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&display=swap');

:root {
  /* COLORS */
  --main-beige: #be5c23;
  --light-beige: #E7E4DC;
  --accent-color: #4C5C93;
  --white: #FAF9FA;
  --black: #0C0B08;
  --border: rgba(12, 11, 8, 0.2);
  
  /* FONT SIZES */
  --h1-size: 80px;
  --h1-mobile-size: 64px;
  --h2-mobile-size: 48px;
  --card-title-size: 24px;
  --paragraph-size: 20px;
  --small-text-size: 16px;

  /* FONT-WEIGHT */
  --regular: 400;
  --medium: 600;
  --bold: 700;
  
  /* SIZES */
  --max-width: 1400px;
  --header-height: 91.5px;

  /* MARGINS */
  --margin-1: 8px;
  --margin-2: 16px;
  --margin-3: 24px;
  --margin-4: 32px;
  --margin-5: 40px;
  --margin-6: 48px;
  --margin-7: 56px;
  --margin-10: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Cabin Condensed", sans-serif;
  font-size: var(--paragraph-size);
  font-weight: var(--regular);
  font-style: normal;
  color: var(--black);
}

body {
  background-color: var(--white);
}

a {
  text-decoration: none;
}

img {
  display: block;
}

li {
  list-style-type: none;
}

li, p, span, a {
  line-height: 1.5;
}

button {
  cursor: pointer;
}

body.fixed {
  overflow: hidden;
}

.text-white {
  color: var(--white);
}

.max-width-section {
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding: var(--margin-5) var(--margin-3);
}

.logo {
  width: 150px;
}

.button {
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  width: fit-content;
  height: fit-content;
}

.primary-button {
  background-color: var(--main-beige);
  color: #fff;
}

.white-button {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.secondary-button {
  background: transparent;
  border: solid 2px var(--accent-color);
  color: var(--black);
  gap: var(--margin-1);
}

.secondary-button span {
  color: var(--accent-color); 
  font-weight: var(--bold);
}

.secondary-button-white {
  background: transparent;
  border: solid 2px var(--white);
  color: var(--white);
  gap: var(--margin-1);
}

.secondary-button-white span {
  color: var(--white); 
}

.beige-section {
  background-color: var(--light-beige);
}

.colored {
  color: var(--accent-color);
}

header, footer {
  background: #fff;
}

h1, h2 {
  font-weight: var(--regular);
}

h1 {
  font-size: var(--h1-mobile-size);
}

h2 {
  font-size: var(--h2-mobile-size);
  margin-bottom: var(--margin-2);
}

/* HEADER */
header {
  border-bottom: solid 1px var(--border);
}

.desktop-header-nav a.active, .menu-nav a.active {
  color: var(--main-beige);
  text-decoration: underline;
  text-underline-offset: 4px;
}

header .max-width-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
}

.desktop-header-nav, .header-cta {
  display: none;
}

/* MOBILE MENU */
.mobile-menu {
  background-color: var(--white);
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: solid 1px var(--black);
  background-color: #fff;
}

.menu-nav, .mobile-menu-header {
  padding: var(--margin-5) var(--margin-3);
}

.menu-header-logo {
  flex: 1 1 0%;
  display: flex;
  justify-content: center;
  margin-right: var(--margin-3);
}

.menu-nav {
  display: flex; 
  flex-direction: column;
  gap: var(--margin-3);
  text-align: center;
}

.menu-nav a {
  text-transform: uppercase;
}

.mobile-menu-button {
  margin: 40px auto;
}


.hero .max-width-section {
  display: flex;
  gap: var(--margin-4);
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.hero h1 {
  text-transform: uppercase;
  line-height: 0.8;
}

.hero h1  span {
  font-size: 32px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--margin-2);
}

/* HERO BANNER */
.hero-banner {
  border-bottom: solid 1px var(--border);
}

.hero-banner h1 {
  line-height: 1;
  margin-bottom: var(--margin-7);
}

.hero-banner .picture-part, .hero-banner .text-part {
  padding: var(--margin-3);
}

.hero-banner .picture-part {
  border-bottom: solid 1px var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner .picture-part img {
  width: 200px;
  max-width: max-content;
  height: 200px;
  max-height: max-content;
  object-fit: contain;
}

/* SERVICES */
.services-grid .max-width-section {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--margin-3);
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--margin-2);
  text-transform: uppercase;
  min-height: 350px;
  color: var(--white);
}

.service-item.glasses {
  background: 
    linear-gradient(rgba(12, 11, 8, 0.3), rgba(12, 11, 8, 0.3)),
    url('assets/images/services/glasses.jpg') center / cover no-repeat;
  grid-row: 1/2;
}

.service-item.visual-health {
  background: 
    linear-gradient(rgba(12, 11, 8, 0.3), rgba(12, 11, 8, 0.3)),
    url('assets/images/services/visual-health.jpg') center / cover no-repeat;
  grid-row: 2/3;
}

.service-item.lenses {
  background: 
    linear-gradient(rgba(12, 11, 8, 0.3), rgba(12, 11, 8, 0.3)),
    url('assets/images/services/lenses.jpg') center / cover no-repeat;
  grid-row: 3/4;
}

.service-item.infos {
  background: 
    linear-gradient(rgba(12, 11, 8, 0.3), rgba(12, 11, 8, 0.3)),
    url('assets/images/services/infos.jpg') center / cover no-repeat;
  grid-row: 4/5;
}

/* ABOUT */
.about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--margin-4);
  text-align: center;
  max-width: 1400px;
  margin: auto;
  padding: var(--margin-5) var(--margin-3);
}

.about .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--margin-4);
}

.about .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--margin-5);
}

.about .member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--margin-1);
  width: 300px;
  text-align: left;
}

.member img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.member-name {
  text-transform: uppercase;
}

.member-role {
  color: var(--accent-color);
  font-size: var(--small-text-size)
}

/* GLASSES BRANDS */
.glasses-brands .max-width-section {
  display: flex;
  gap: var(--margin-4);
  flex-direction: column;
  justify-content: center;
}

.filters {
  display: flex;
  justify-content: flex-start;
  gap: var(--margin-1);
}

.filter {
  padding: var(--margin-1);
  cursor: pointer;
}

.filter.active {
  background-color: var(--main-beige);
  color: var(--white);
}

.brands-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--margin-1);
}

.brands-result-item {
  --img-url: url('assets/images/placeholder.jpg');
  background:
    linear-gradient(rgba(12, 11, 8, 0) 50%, rgba(12, 11, 8, 0.3) 80%, rgba(12, 11, 8, 0.7) 100%),
    var(--img-url) center / contain no-repeat, white;
  aspect-ratio: 1/1;
  display: flex;
  align-items: end;
  padding: var(--margin-1);
  position: relative;
}

.brands-result-item span {
  color: var(--white);
}

.pagination {
  gap: var(--margin-3);
  margin: auto;
}

.pagination svg:not(.disabled), .pagination .pages-item:not(.pagination .pages-item.active) {
  cursor: pointer;
}

.pagination svg.disabled {
  opacity: 0.3
}

.pagination, .pagination .pages {
  display: flex;
  align-items: center;
}

.pagination .pages-item {
  padding: var(--margin-1);
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--small-text-size);
}


.pagination .pages-item.active {
  background-color: var(--main-beige);
  color: var(--white);
}

/* BRANDS */
.brands-section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1400px;
  margin: auto;
  background-color: #fff;
}

.brands-item {
  padding: var(--margin-1);
  aspect-ratio: 1/1;
  border: solid 1px var(--border);
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brands-item img {
  width: 100%;
  max-width: 150px;
  margin: auto;
}

/* GLASSES TIPS */
.glasses-tips {
  max-width: 1400px;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: var(--margin-5) var(--margin-3);
  gap: var(--margin-4);
}

.glasses-tips h2 {
  text-align: center;
}

.glasses-tips .tips, .coords-section .cards {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center; 
  gap: var(--margin-7);
}

.glasses-tips .tip, .coords-section .card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--margin-3);
}

.glasses-tips .tip-header, .coords-section .card-header {
  display: flex;
  gap: var(--margin-3);
  align-items: baseline;
  border-bottom: solid 1px var(--border);
}

.glasses-tips .tip-title, .coords-section .card-title {
  text-transform: uppercase;
  font-weight: var(--bold);
  font-size: var(--card-title-size);
}

.glasses-tips .tip ul {
  padding-left: var(--margin-2);
}

.glasses-tips .tip li, .coords-section li {
  list-style-type: circle;
  margin-bottom: var(--margin-2);
}

/* COORDS */
.coords-section {
  max-width: 1400px;
  margin: auto;
}

.coords-section .max-width-section {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  gap: var(--margin-7);
}

.coords-section .cards {
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--margin-6);
  width: 100%;
}

.coords-section .card {
  max-width: 350px;
}

.coords-section li {
  list-style-type: none;
  display: flex;
  gap: var(--margin-2);
  align-items: baseline;
}

.card .colored {
  font-weight: var(--bold);
  font-size: var(--small-text-size);
}

/*  COLUMN SECTION */
.column-section .picture-part img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-height: 500px;
}

.column-section.column-section-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.column-section .text-part {
  padding: var(--margin-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--margin-3);
}

.column-section.reverse-mobile {
  @media(max-width: 768px) {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* CONTACT */
.contact {
  background: var(--main-beige);
}

/* LENSES SECTIONS */
.center-section {
  max-width: 1400px;
  margin: auto;
}

.center-section .max-width-section {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--margin-4);
  text-align: center;
}

/* FAQ */
.questions {
  display: flex;
  flex-direction: column;
  gap: var(--margin-2);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.questions-dropdown {
  display: flex;
  flex-direction: column;
  padding: var(--margin-3);
  border-radius: 16px;
}

.questions-dropdown.opened {
  background-color: var(--light-beige);
}

.questions-dropdown.opened > .dropdown-response {
  display: block;
}

.questions-dropdown.opened .add-path {
  display: none;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.question {
  font-weight: var(--bold);
  text-align: left;
}

.dropdown-response {
  display: none;
  margin-top: var(--margin-2);
  text-align: left; 
}

/* PARTNER MUTUALS */
.mutuals {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center; 
  gap: var(--margin-7);
}

.mutuals-item {
  background-color: var(--main-beige);
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--margin-2);
  align-items: center;
  padding: 24px;
}

.mutuals-item img {
  width: 100%;
  height: auto;
  max-width: 100px;
  max-height: max-content;
}

.mutuals-item span {
  font-weight: var(--bold);
}

/* MAP */
.map {
  border-radius: 16px;
  width: 100%;
  height: 300px;
}

/* FOOTER */
footer .max-width-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--margin-4);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--margin-2);
}

.footer-nav a {
  font-size: var(--small-text-size);
  text-transform: uppercase;
  text-align: center;
}

footer .cookie-button {
  border: none;
  background: none;
  font-size: var(--small-text-size);
  cursor: pointer;
}

footer .socials {
  display: flex;
  gap: var(--margin-1);
}

footer .socials a {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: var(--accent-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .legal {
  margin-top: var(--margin-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--margin-6);
  width: 100%;
  text-align: center;
}

.legal span, .legal a {
  font-size: var(--small-text-size);
}

.legal-nav {
  display: flex;
  flex-direction: column;
  gap: var(--margin-2);
}

.separator {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background-color: var(--main-beige);
}

.title-with-margin {
  margin-top: var(--margin-3);
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(12, 11, 8, 0.4);
  padding: var(--margin-2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cookie-banner {
  width: 100%;
  max-width: 380px;
  background-color: #fff;
  border: solid 1px var(--border);
  padding: var(--margin-2);
  display: flex;
  flex-direction: column;
  gap: var(--margin-2);
  border-radius: 16px;
}

.cookie-banner div {
  display: flex;
  align-items: center;
}

.cookie-banner p, .cookie-banner button {
  font-size: var(--small-text-size);
}

.cookie-banner .buttons-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--margin-2);
}

.cookie-banner button {
  width: 45%;
}

.cookie-banner .primary-button {
  border: none;
}

.hidden {
  display: none;
}

.break-word {
  word-break: break-word;
}

.bold {
  font-weight: var(--bold);
}

.center {
  text-align: center;
}

.title-with-margin {
  margin-top: var(--margin-3);
}

@media(min-width: 425px) {
  .logo {
    width: 200px;
  }

  /* HERO BANNER */
  .hero-banner .picture-part, .hero-banner .text-part,
  .column-section .text-part {
    padding: var(--margin-5);
  }

  /* BRANDS */
  .brands-item {
    width: 20%;
  }

  /* COORDS */
  .coords-section .cards {
    align-items: flex-start;
  }
}

@media(min-width: 768px) {
  /* SERVICES */
  .services-grid .max-width-section {
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr 1fr;
    padding: var(--margin-2);
    gap: var(--margin-2);
  }

  .service-item.glasses, .service-item.visual-health {
    grid-column: 1/3;
  }

  .service-item.lenses {
    grid-column: 1/2;
  }

  .service-item.infos {
    grid-row: 3/4;
    grid-column: 2/3;
  }

  /* ABOUT */
  .about {
    padding: var(--margin-2);
  }

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

  /* GLASSES BRANDS */
  .brands-results {
    gap: var(--margin-2);
  }

  .brands-result-item {
    padding: var(--margin-3);
  }

  /* BRANDS */
  .brands-item {
    padding: var(--margin-3);
  }

  /* PARTNER MUTUALS */
  .mutuals {
    flex-direction: row;
  }

  /* FOOTER */
  footer .legal {
    margin-top: var(--margin-10);
    flex-direction: row-reverse;
  }

  .legal-nav {
    flex-direction: row;
  }

  /* MAP */
  .map {
    height: 350px;
  }
}

/* HERO */
  .hero {
    height: calc(80vh - var(--header-height));
    background-image: url('assets/images/hero1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    /* background: var(--main-beige); */
  }

@media(max-width: 1400px) {
  .hero {
    margin: var(--margin-2);
  }
  
}

@media(min-width: 1024px) {
  h1, h2 {
    font-size: var(--h1-size);
  }

  .max-width-section {
    padding: var(--margin-7) var(--margin-3);
  }

  .center-section .max-width-section {
    min-height: 500px;
  }

  /* HEADER */
  header .max-width-section {
    padding-top: var(--margin-3);
    padding-bottom: var(--margin-3);
  }

  .desktop-header-nav, .header-cta {
    display: flex;
  }

  .desktop-header-nav {
    gap: var(--margin-2);
  }

  .desktop-header-nav a {
    text-transform: uppercase;
    font-size: var(--small-text-size);
  }

  .menu-icon, .calendar-icon {
    display: none;
  }

  /* MOBILE MENU */
  .mobile-menu {
    display: none;
  }

  /* HERO BANNER */
  .hero-banner, .column-section {
    display: flex;
    min-height: 40vh;
    align-items: center;
  }

  .column-section.column-section-reverse {
    flex-direction: row;
  }

  .hero-banner .picture-part, .hero-banner .text-part,
  .column-section .picture-part, .column-section .text-part {
    width: 50%;
  }

  .hero-banner .picture-part {
    border-right: solid 1px var(--border);
    border-bottom: none;
  }

  /*  COLUMN SECTION */
  .column-section .text-part {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .column-section .picture-part img {
    max-height: none;
  }

  .column-section.contact .picture-part img {
    aspect-ratio: 1 / 1;
    max-height: none;
  }

  /* SERVICES */
  .services-grid .max-width-section {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
  }

  .service-item.glasses {
    grid-row: 1/3;
    grid-column: 1/3;
  }

  .service-item.visual-health {
    grid-row: 1/2;
    grid-column: 3/5;
  }

  .service-item.lenses {
    grid-row: 2/2;
    grid-column: 3/4;
  }

  .service-item.infos {
    grid-row: 2/2;
    grid-column: 4/5;
  }

  /* ABOUT */
  .about {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--margin-5);
    padding: var(--margin-7) var(--margin-3);
  }

  .about .text {
    text-align: left;
  }

  .about .team {
    width: 50%;
  }

  /* GLASSES BRANDS */
  .brands-results {
    grid-template-columns: repeat(3, 1fr);
  }

  /* BRANDS */
  .brands-item {
    padding: var(--margin-5);
  }

  /* GLASSES TIPS */
  .glasses-tips {
    padding: var(--margin-7) var(--margin-3);
  }

  .glasses-tips .tips {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--margin-7);
  }

  .glasses-tips .tip {
    width: 33%;
  }

  /* COORDS */
  .coords-section .cards {
    flex-direction: row;
    align-items: start;
  }

  /* FOOTER */
  footer .legal {
    flex-direction: row-reverse;
  }

  .legal-nav {
    flex-direction: row;
  }
}

@media(min-width: 1200px) {
  /* GLASSES TIPS */
  .glasses-tips .tips {
    gap: 100px;
  }

  /* COORDS */
  .coords-section .cards {
    justify-content: space-between;
  }
} 

@media(min-width: 1400px) {
  .max-width-section, .services-grid .max-width-section {
    padding-left: 0;
    padding-right: 0;
  }
}

@media(max-width: 768px) {
  .small-image-mobile img {
    width: 300px !important;
    height: 300px !important;
    margin: auto;
  }
}