* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html {
  font-size: calc(15px + 0.390625vw);
  scroll-behavior: smooth;
}

/* GLOBAL */
h1 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: min(38px, 1.825rem);
}
h2 {
  color: #fff;
  font-family: "Samsung Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: min(36px, 1.75rem);
  line-height: 62px;
}
h3 {
  color: #fff;
  color: #000;
  font-family: "Samsung Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: min(27px, 1.31rem);
}
h4 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(21px, 1.025rem);
}
h5 {
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: min(18px, 0.875rem);
}
p {
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(18px, 0.875rem);
}

/* MENU HEADER */
header {
  position: fixed;
  width: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 64px 40px;
  height: 100px;
  z-index: 1;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.5);
}

header > a > img {
  height: 100px;
  display: block;
}
#menuHeader {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
#menuHeader a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 24px;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: min(18px, 0.88rem);
  text-decoration: none;
  color: #000;
}
#menuHeader a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #000;
}
#menuHeader img {
  margin-right: 10px;
  height: 20px;
}
#menuMobile {
  display: none;
  flex-direction: column;
  cursor: pointer;
  margin-right: 20px;
  padding: 8px;
}

.bar {
  width: 30px;
  height: 3px;
  background-color: #000;
  margin: 4px 0;
}

/* INTRO SECTION */
#introSection {
  background-image: url("../img/background1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 100px;
}
#introContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 70px;
  margin-inline: auto;
  padding-left: 90px;
  padding-bottom: 90px;
  max-width: 1440px;
}
#introImage > img {
  height: 480px;
  width: 100%;
  object-fit: contain;
}
#introDescription > h1 {
  margin-bottom: 36px;
}
#introDescription > h4 {
  margin-bottom: 28px;
}
#introButton {
  margin-top: 8px;
  display: inline-block;
}
#introButton a {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding-block: 10px;
  border-radius: 95px;
  font-size: min(17px, 0.825rem);
  text-align: center;
  color: #fff;
}

#introButton a:nth-child(1) {
  width: 210px;
  background: rgb(255, 122, 0);
}
#introButton a:nth-child(1):hover {
  background: #fff;
  color: rgb(255, 122, 0);
}
#introButton a:nth-child(2) {
  width: 160px;
  border: solid 2px rgba(0, 0, 0, 0);
}
#introButton a:nth-child(2):hover {
  border-color: rgba(255, 122, 0);
}
#opacityPart {
  background: rgba(255, 255, 255, 0.2);
  /* height: 300px; */
  width: 100%;
}
.buttonAnchor {
  display: block !important;
  margin: auto;
  margin-top: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding-block: 10px;
  border-radius: 95px;
  font-size: min(17px, 0.825rem);
  text-align: center;
  color: #fff;
  width: 160px;
  border: solid 2px rgba(0, 0, 0, 0);
}
.buttonAnchor:hover {
  border-color: rgba(255, 122, 0);
}
#quickDiv {
  max-width: 1440px;
  padding-inline: 64px;
  margin-inline: auto;
  display: flex;
  justify-content: space-around;
  gap: 12px;
}
.quickInfo {
  text-align: center;
  margin-block: 30px;
}
.quickInfo img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
.quickInfo h4 {
  color: rgb(255, 122, 0);
}
#lineOrange {
  width: 100%;
  height: 50px;
  background: #ff7a00;
}

/* SERVICE SECTION */
#serviceSection {
  position: relative;
  top: -300px;
  margin-inline: auto;
  padding-inline: 64px;
  margin-bottom: -200px;
  max-width: 1440px;
}
#serviceSection > h3 {
  margin-bottom: 60px;
  text-align: center;
  color: #fff;
}
#cardServiceDiv {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 30px;
}
.cardServiceContainer {
  background: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
  padding: 30px;
}
.cardServiceContainer img {
  width: 100%;
  margin-bottom: 28px;
}
.cardServiceContainer h5 {
  margin-bottom: 16px;
}
.cardServiceContainer p {
  font-size: min(16px, 0.78rem);
}

/* PRODUCT SECTION */
#productSection {
  background: rgba(0, 0, 0, 0.85);
  padding-top: 94px;
  padding-bottom: 80px;
}
#productContainer {
  max-width: 1440px;
  padding-inline: 64px;
  margin-inline: auto;
}
#titleProductContainer {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 84px;
}
#titleProductContainer h2 {
  flex: 1.8;
}
#titleProductContainer p {
  flex: 1.2;
  color: #fff;
}
#filterProduct {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 8px;
  position: relative;
}
.buttonFilter {
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border: 0px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: min(19px, 0.9rem);
  font-weight: 600;
  flex: 0 0 200px;
  cursor: pointer;
}
.buttonFilter:hover {
  background: #fff;
  color: #ff7a00;
}
.buttonFilterPhone {
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border: 0px;
  flex: 0 0 200px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: min(19px, 0.9rem);
  font-weight: 600;
  cursor: pointer;
}
.buttonFilterPhone:hover {
  background: #fff;
  color: #ff7a00;
}
.selectedButtonFilter {
  background: #ff7a00;
}
.selectedButtonFilter:hover {
  background: #ff7a00;
  color: #fff;
}
#brandFilter {
  display: none;
  position: absolute;
  top: 60px;
  flex-wrap: wrap;
  width: 55%;
  max-width: 800px;
  border-radius: 18px;
  background: #fff;
  padding: 28px 20px;
  row-gap: 16px;
  column-gap: 8px;
}
.toggleBrand {
  display: flex !important;
}
.buttonBrand {
  color: #000;
  display: flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 90px;
  background: gainsboro;
  border: 0px;
  font-family: "Poppins", sans-serif;
  font-size: min(17px, 0.825rem);
  font-weight: 600;
  cursor: pointer;
}
.buttonBrand:hover {
  background: #fff;
  color: #ff7a00;
  outline: 1px solid #ff7a00;
}
.selectedBrand {
  background: #ff7a00;
  color: #fff;
}
.selectedBrand:hover {
  background: #ff7a00;
  color: #fff;
  outline: none;
}
#listProduct {
  margin-top: 84px;
  /* margin-bottom: 100px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  row-gap: 30px;
  column-gap: 20px;
}
#listProduct p {
  color: #fff;
  width: 300px;
  text-align: center;
}
#listProduct img {
  border-radius: 12px;
  width: 100%;
  max-width: 300px;
  max-height: 300px;
}
#listProduct h5 {
  color: #fff;
  text-align: center;
  margin-top: 4px;
  max-width: 300px;
}
#welcomeBigContainer {
  display: flex;
  justify-content: center;
}
#welcomeContainer {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 50px;
  padding-block: 38px;
  gap: 50px;
}
#welcomeContainer h3 {
  color: #fff;
}
#welcomeContainer a {
  background: #ff7a00;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-decoration: none;
  padding-block: 10px;
  padding-inline: 30px;
  border-radius: 95px;
  font-size: min(17px, 0.825rem);
}
#welcomeContainer a:hover {
  background: #fff;
  color: rgb(255, 122, 0);
}
/* Style des boutons de pagination */
#pagination {
  margin-top: 20px; /* Espace entre les boutons de pagination et le contenu */
  text-align: center; /* Centrer horizontalement les boutons de pagination */
  margin-bottom: 40px;
}

#pagination button {
  background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond des boutons */
  color: #fff; /* Couleur du texte des boutons */
  border: none; /* Supprimer la bordure des boutons */
  padding: 5px 10px; /* Espacement intérieur des boutons */
  margin: 0 5px; /* Marge entre les boutons */
  cursor: pointer; /* Curseur de type pointeur au survol */
  border-radius: 4px; /* Coins arrondis */
}

#pagination button:hover {
  background-color: #828282; /* Couleur de fond au survol */
}

/* INFO SECTION */
#infoSection {
  background: #fff;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 64px;
}
#lineOrangeSmall {
  width: 100%;
  height: 20px;
  background: #ff7a00;
}
#infoSection h2 {
  color: #000;
  margin-top: 80px;
  margin-bottom: 50px;
}
#infoContainer {
  margin-bottom: 70px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
  justify-content: center;
  align-items: center;
}
#infoContainer > p {
  flex: 0 1 400px;
  font-size: min(17px, 0.825rem);
}
#infoContainer > p > span {
  color: #ff7a00;
  font-weight: 600;
}
.cardInfoContainer {
  flex: 0 1 400px;
  border-radius: 16.579px;
  background: #fff;
  padding: 24px;
  box-shadow: 0px 3.3159px 16.57948px 0px rgba(0, 0, 0, 0.15);
}
.cardInfoContainer img {
  height: 30px;
  display: block;
  margin-bottom: 22px;
}
.cardInfoContainer h5 {
  font-size: min(16px, 0.78rem);
  margin-bottom: 12px;
}
.cardInfoContainer p {
  font-size: min(14px, 0.685rem);
}

/* QUALITY SECTION */
#reviewSection {
  background: rgba(255, 122, 0, 0.05);
  padding-top: 70px;
}
#reviewContainer {
  max-width: 1440px;
  padding-inline: 64px;
  margin-inline: auto;
}
#qualityDiv {
  display: flex;
  justify-content: center;
  gap: 36px;
}
#qualityDiv h4 {
  color: #ff7a00;
  font-size: min(19.5px, 0.9425rem);
}
.verticalLineOrange {
  background: #ff7a00;
  width: 1px;
}
#reviewContainer > h2 {
  color: #000;
  text-align: center;
  margin-top: 34px;
  margin-bottom: 70px;
}
#reviewContainer > picture > img {
  display: block;
  width: 100%;
}
#reviewDiv {
  display: flex;
  gap: 30px;
}
.cardReview {
  flex: 1;
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0px 2.18198px 8.18241px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  top: -180px;
  margin-bottom: -120px;
}
.cardReview img {
  margin-top: 10px;
  margin-bottom: 16px;
  height: 18px;
}
.cardReview p {
  font-size: min(14px, 0.685rem);
  margin-bottom: 14px;
}
.nameUserReview {
  color: #000;
  font-family: "Manrope", sans-serif;
  font-size: min(13px, 0.6325rem);
  font-weight: 800;
}

/* DEVIS SECTION */
#devisContainer {
  display: flex;
  padding: 80px 64px;
  gap: 120px;
  max-width: 1440px;
  margin-inline: auto;
}
#devisLeftContainer {
  flex: 0.85;
}
#devisLeftContainer h2 {
  color: #000;
  margin-bottom: 18px;
}
#devisLeftContainer p {
  margin-bottom: 80px;
}
.inputDevis {
  display: block;
  width: 100%;
  font-size: min(13px, 0.6325rem);
  padding: 10px 18px;
  border: 1px solid #e0e0e0;
  margin-bottom: 18px;
  color: #828282;
  font-family: "Monserrat", sans-serif;
  font-weight: 400;
}
.inputDevis:focus {
  outline-color: #ff7a00;
}
#textInput {
  resize: none;
}
#devisLeftContainer button {
  background: #ff7a00;
  width: 100%;
  padding-block: 14px;
  color: #fff;
  font-family: "Monserrat", sans-serif;
  font-size: min(14.5px, 0.7rem);
  line-height: 0.7rem;
  font-weight: 700;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  margin-bottom: 50px;
}
#contactDevis {
  margin-bottom: 70px;

  column-gap: 10px;
}
#contactDevis > div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 6px;
}

.contactContainer {
  display: flex;
  align-items: center;
}
.contactContainer img {
  height: 26px;
}
.textContact {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  color: #000;
  font-family: "Monserrat", sans-serif;
  font-size: min(16px, 0.8rem);
  line-height: 18px;
}
.textContact span:nth-child(1) {
  font-weight: 600;
}
.textContact span:nth-child(2) {
  font-weight: 400;
}
#devisRightContainer {
  flex: 1.15;
  background: red;
}
#devisRightContainer img {
  height: 100%;
  display: block;
  width: 100%;
  object-fit: cover;
}
#adviceMail {
  color: #ff7a00;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(14px, 0.6rem);
  display: block;
  margin-bottom: 18px;
  font-style: italic;
  padding-inline: 4px;
}

/* MAP SECTION */
#mapSection {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 64px;
  padding-top: 30px;
  padding-bottom: 140px;
}
#mapSection h2 {
  color: #000;
  margin-bottom: 68px;
}
#mapContainer {
  display: flex;
}
#infoMapContainer {
  background: rgba(0, 0, 0, 0.8);
  display: block;
  flex-shrink: 0;
  padding: 30px;
}
.infoPartContainer {
  display: flex;
  padding: 12px;
}
.infoPartContainer img {
  height: 30px;
}
.textPartMap {
  color: #fff;
  margin-left: 14px;
}
.textPartMap > span {
  display: block;
}
.textPartMap > span:nth-child(1) {
  font-family: "Samsung Sharp Sans", sans-serif;
  font-weight: 700;
  font-size: min(15px, 0.73rem);
  margin-bottom: 12px;
}
.textPartMap > span:nth-child(2) {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(13px, 0.63rem);
}
.lineMap {
  width: 100%;
  height: 1px;
  margin-block: 26px;
  background: rgba(255, 255, 255, 0.2);
}
#horaireMap {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(13px, 0.63rem);
  list-style-type: none;
}
#horaireMap li {
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}
#horaireMap span {
  color: #ff7a00;
  font-weight: 600;
  display: inline-block;
}
#phoneMap {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(16px, 0.8rem);
  margin-left: 14px;
}
#phoneMap li:nth-child(1) {
  margin-bottom: 10px;
}
#linkMapTop {
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 35px;
  border-radius: 95px;
  gap: 10px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(14px, 0.7rem);
  text-decoration: none;
  max-width: 200px;
  margin-inline: auto;
  margin-top: 10px;
}
#linkMapTop img {
  height: 22px;
}
#linkMapBottom {
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 35px;
  border-radius: 95px;
  gap: 10px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: min(14px, 0.7rem);
  text-decoration: none;
  margin-bottom: 10px;
  max-width: 200px;
  margin-inline: auto;
}
#linkMapBottom img {
  height: 22px;
}
#mapGoogle {
  width: 100%;
  border: 0;
}
.hideDesktop {
  display: none;
}

/* FOOTER */
footer {
  background: #000;
  padding-inline: 64px;
  padding-top: 40px;
  padding-bottom: 38px;
}
#logoFooter {
  display: flex;
  align-items: center;
}
#logoFooter img {
  width: 141.5px;
}
#logoFooter h1 {
  font-weight: 700;
  font-size: min(24px, 1.17rem);
  margin-left: 22px;
}
.orangeLine {
  height: 2px;
  background: #ff7a00;
  margin-top: 40px;
  margin-inline: 11px;
}
#creditLine {
  display: flex;
  margin-top: 24px;
  align-items: center;
  justify-content: space-between;
  margin-inline: 11px;
  gap: 20px;
}
#creditLine > h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: min(15px, 0.73rem);
}
#socialLine {
  display: flex;
  align-items: center;
}
#socialLine div {
  display: flex;
}
#socialLine h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: min(18px, 0.873rem);
}
#socialLine a {
  margin-left: 18px;
}
#socialLine img {
  height: 35px;
  display: block;
}
.linkMention {
  font-family: "Poppins", sans-serif;
  font-size: min(15px, 0.73rem);
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0 !important;
  text-decoration: none;
}
.linkMention:hover {
  color: #ff7a00;
}
.linkMention:visited {
  color: rgba(255, 255, 255, 0.8);
}
/* LEGAL SECTION */
#legalSection {
  padding-top: 100px;
  max-width: 1440px;
  margin: auto;
  padding-bottom: 40px;
  padding-inline: 20px;
}
#legalSection h2 {
  color: #000;
  margin-block: 24px 8px;
}
#legalSection h3 {
  color: #000;
  margin-block: 24px 8px;
}

@media (max-width: 768px) {
  header {
    padding-inline: 10px;
    height: auto;
  }
  #introSection {
    padding-top: 80px;
  }
  #introContainer {
    margin-top: 60px;
    padding-inline: 64px;
    padding-bottom: 0px;
    flex-wrap: wrap;
    justify-content: center;
  }
  #introImage > img {
    height: 320px;
    margin-bottom: 20px;
  }
  #cardServiceDiv {
    display: flex;
    flex-wrap: wrap;
  }
  .cardServiceContainer {
    flex: 1 0 200px;
    padding: 25px;
  }
  #serviceSection {
    margin-bottom: -250px;
  }
  #titleProductContainer {
    gap: 40px;
    flex-wrap: wrap;
  }
  #titleProductContainer h2 {
    flex: 1 0 250px;
  }
  #titleProductContainer p {
    flex: 1 0 200px;
  }
  #productSection {
    padding-top: 64px;
  }

  #welcomeContainer {
    flex-wrap: wrap;
    gap: 24px;
  }

  #infoSection h2 {
    margin-top: 50px;
    margin-bottom: 30px;
  }
  #reviewSection {
    padding-top: 50px;
  }
  #reviewContainer > h2 {
    margin-top: 20px;
    margin-bottom: 50px;
  }
  #reviewDiv {
    flex-direction: column;
    gap: 60px;
  }
  .cardReview {
    padding: 30px;
    top: -100px;
    margin-bottom: -40px;
  }
  #devisContainer {
    gap: 40px;
    padding-block: 60px;
  }

  #mapSection {
    padding-top: 20px;
    padding-bottom: 100px;
  }
  #mapSection h2 {
    margin-bottom: 28px;
  }
  #mapContainer {
    flex-wrap: wrap-reverse;
  }
  #mapGoogle {
    flex: 1 0 300px;
    min-height: 400px;
  }
  #infoMapContainer {
    padding: 20px;
    flex-grow: 1;
  }
  .infoPartContainer {
    justify-content: center;
  }
  footer {
    padding-top: 20px;
    padding-inline: 20px;
    padding-bottom: 28px;
  }
}

@media (max-width: 600px) {
  header > a > img {
    height: 80px;
  }
  h2 {
    font-size: 1.3rem;
    line-height: 35px;
  }
  #menuHeader {
    display: none;
    position: absolute;
    flex-direction: column;
    background: #fff;
    align-items: normal;
    height: auto;
    justify-content: flex-start;
    border-radius: 7px;
    padding-inline: 12px;
    width: 280px;
    top: 120px;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.5);
  }
  #menuHeader a {
    padding-block: 30px;
    background: #fff;
  }
  #menuHeader a:hover {
    background: #fff;
  }
  #menuMobile {
    display: flex;
  }
  .barMenu {
    display: block;
    height: 1px;
    background: #ff7a00;
  }
  #introContainer {
    padding-inline: 30px;
  }
  #introDescription {
    text-align: center;
  }
  #serviceSection {
    padding-inline: 30px;
  }
  #quickDiv {
    flex-direction: column;
    gap: 0;
  }
  #productContainer {
    padding-inline: 30px;
  }
  #titleProductContainer {
    flex-direction: column;
    text-align: center;
    flex-wrap: nowrap;
    margin-bottom: 40px;
  }
  #titleProductContainer h2 {
    flex: auto;
    line-height: 35px;
  }
  #titleProductContainer p {
    flex: auto;
  }
  #brandFilter {
    width: 75%;
    top: 110px;
  }
  #listProduct {
    margin-top: 40px;
    /* margin-bottom: 60px; */
  }
  #infoSection {
    padding-inline: 30px;
  }
  #infoSection h2 {
    text-align: center;
  }
  #infoContainer > p {
    text-align: center;
  }
  #qualityDiv {
    gap: 18px;
  }
  #qualityDiv h4 {
    font-size: 0.85rem;
  }
  #reviewContainer {
    padding-inline: 30px;
  }
  #reviewDiv {
    gap: 140px;
  }
  .cardReview {
    top: -180px;
    margin-inline: 16px;
    margin-bottom: -120px;
  }
  .cardReview img {
    height: 12px;
    margin-bottom: 10px;
  }
  #devisContainer {
    padding-inline: 30px;
    flex-direction: column;
  }
  #devisLeftContainer p {
    margin-bottom: 40px;
  }
  #devisLeftContainer button {
    margin-bottom: 30px;
  }
  #contactDevis {
    margin-bottom: 0px;
    margin-left: 0px;
    justify-content: center;
    display: flex;
  }
  #contactDevis > div {
    display: block;
  }

  #mapSection {
    padding-inline: 30px;
  }
  #mapGoogle {
    flex: auto;
  }
  #logoFooter {
    justify-content: center;
    margin-top: 20px;
  }
  #creditLine {
    flex-direction: column-reverse;
  }
  #socialLine {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  #creditLine > h4 {
    text-align: center;
  }
  #logoFooter h1 {
    margin-left: 10px;
  }
  .hideMobile {
    display: none;
  }
  .hideDesktop {
    display: block;
  }
  #socialLine a {
    margin-left: 0px;
  }
}