/* === Header style === */

:root {
  --header-height: 0px; /* adapte si ton header est plus haut */
}

@font-face {
  font-family: 'CALMType-Regular';
  src: url('../fonts/CALMType-Regular.woff2') format('woff2'),
       url('../fonts/CALMType-Regular.woff') format('woff'),
       url('../fonts/CALMType-Regular.otf') format('otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  font-family: 'CALMType-Regular', sans-serif;
  font-weight: normal !important;
   margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: opacity 0.3s ease;
}

body.fade-out {
  opacity: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #bcff00;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px; /* 👈 adapte à la hauteur réelle */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

video{
  max-width: 100%;
}

.logo a {
 
  font-family: 'CALMType-Regular', sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: black;
}
/* Par défaut : couleur noire (ou celle que tu veux) */
#logo span {
  color: black;
  
}

#logo span[class^="line-"] {
  background-color: black;
  
}

/* Hover : couleur blanche */
#logo:hover span {
  color: white;
}

#logo:hover span[class^="line-"] {
  background-color: white;
}

.external-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.external-link {
  text-decoration: underline;
  color: #000;
  text-decoration-color: black; /* optionnel : couleur du soulignement */
  position: relative;
}

.external-link::after {
  content: "↗";
  color: #ff2fb6;
  margin-left: 4px;
  font-size: 0.8em;

  /* Supprimer le soulignement de la flèche */
  text-decoration: none;
  display: inline-block;
  position: relative;
  bottom: 0.1em;
}

.intern-link {
  text-decoration: underline;
  color: #000;
  text-decoration-color: black; /* optionnel : couleur du soulignement */
  position: relative;
}

.intern-link::after {
  content: "↘";
  color: #ff2fb6;
  margin-left: 4px;
  font-size: 0.8em;

  /* Supprimer le soulignement de la flèche */
  text-decoration: none;
  display: inline-block;
  position: relative;
  bottom: 0.1em;
}
.external-arrow {
 
  color: #ff0088; /* rose */
  text-decoration: none;
  margin-left: 2px;
}



/* Menu */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 100%;
}

.main-nav .logo {
  
  font-size: 1.2rem;
}

.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li a {
  text-decoration: none;
  color: black;
  font-weight: 500;
}


.main-nav a {
  text-decoration: none;
  color: black;
  font-weight: 500;
}

.main-nav a:hover {
  opacity: 0.7;
}

.main-nav a.active {
  text-decoration: underline;
}
.nav{
  min-width: 0;                   /* évite que le dernier item soit coupé */
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: black;
}
/* Burger */
/* Menu burger */
body.menu-open {
  overflow: hidden;
}



/* Menu mobile caché par défaut */
.mobile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  z-index: 1000;
}

/* Quand on ouvre */
.mobile-menu.show {
  max-height: 100%; /* ajuste si besoin */
  padding: 0rem;
}

/* Mobile menu */
@media screen and (max-width: 768px) {
 
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background-color: #bcff00;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 1000;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li a {
    font-size: 1.8rem;
    color: black;
    text-decoration: none;
  }

  .burger.active::before {
    display: block;
    content: "✕";
    
  }

  .burger::before {
    content: "☰";
    display: block;
  }
}

@media (min-width: 769px) {
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    width: auto;
    padding: 0;
  }

  .burger {
    display: none;
  }
}


/* === hero-carousel === */
:root {
  --vh: 100vh;
  --header-height: 30px; /* 👈 à synchroniser avec le header */
}

.hero-carousel {
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  overflow: hidden;
  margin: 0; /* important */
  padding: 0;
}

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

.hero-button {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  font-size: 1.2rem;
  background: #c0ff00;
  padding: 1.5rem 1.5rem;
  border: 1px solid black;
  text-decoration: none;
  color: black;
  z-index: 10;
}

.hero-button:hover {

  background: #fff;

}

.hero-button .arrow {
  margin-left: 1rem; /* ajuste selon le besoin */
  display: inline-block;
}
.contact-button {
  display: inline-block;
  position: absolute;
   font-size: 1.2rem;
  background: #c0ff00;
  padding: 1.5rem 1.5rem;
  border: 1px solid black;
  text-decoration: none;
  color: black;
  z-index: 10;
  left: 0;
  bottom: 2rem;

}

.contact-button:hover {

  background: #fff;

}

.contact-button .arrow {
 
  display: inline-block;
}
.contact-button-wrapper {
  margin-top: 2rem;
  display: block;
  position: static; /* s'assurer qu’il ne flotte pas ou ne soit pas absolu */
  clear: both; /* utile si d'autres éléments flottent */
}


/* Colonne droite en flex column */
aside.right {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%; /* utile si parent n’a pas de hauteur */
}

/* Le haut prend toute la hauteur possible */
.right-top {
  flex-grow: 1;
}

/* Le bas (le bouton) reste collé en bas */
.right-bottom {
  margin-top: 2rem;
}

/* Masquer par défaut */
.mobile-only {
  display: none;
}



.carousel-wrapper {
  width: 100%;
  height: 100%;
}
.carousel {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s ease;
  height: 100%;
}

.slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: -2.5rem; /* Modifie cette valeur selon le besoin */
}
.carousel-dots .dot {
    width: 30px;
    height: 2px;
    border: 0px solid #fff;
    background-color: #fff;
    margin: 0 10px;
position: relative;

  cursor: pointer;
  z-index: 11;
}
/* Zone de clic tactile-friendly */
.carousel-dots .dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: pointer;
  z-index: 0;
}
.carousel-dots .dot.active {
  background: #bcff00;
}
.dot {
  cursor: pointer;
}
/* Conteneur principal */
.current-events {
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid black;
  
}

/* Grille à 3 colonnes responsives */
.events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
    border-top: #000 1px solid;
}

.events-grid a {
  color: #000;
  text-decoration: none;
}
/* Colonne d’un événement */
.event-column {
  width: 100%;
  max-width: calc(100% / 3);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-right: 1px solid black;
}

/* .event-column:last-child{
  
  border-right: none;
}*/

/* Titre du type d’événement (ex: Exhibition) */
.event-type {
  background-color: #bcff00;
  text-align: center;
  font-size: 3rem;
  border-top: #000 1px solid;
  padding: 1rem 0;
  text-transform: capitalize;
}

/* Image d’événement avec ratio fixe */
.event-column img {
  width: 100%;
  height: auto;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.event-column img:hover {
  -webkit-filter: invert(100%) !important;
  width: 100%;
  height: auto;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Wrapper contenant description à gauche et tag à droite */
.event-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  background: white;
  gap: 1rem;
  flex-wrap: nowrap;
  position: relative;
}

/* Conteneur de description et tag */
.event-description-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  background: white;
  flex-wrap: wrap;
}
.event-description-tag {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2rem 1rem 2rem 1rem;
  background: white;
 
}
/* Description à gauche */
.event-description {
  flex-grow: 1;
}

/* Texte de description */
.event-description p {
  margin: 0;
  font-size: 1.2rem;
}

/* Tag toujours en haut à droite */

.event-tag {
    position: relative;
    top: 1rem;
    left: 1rem;
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #111;
    text-transform: uppercase;
    background-color: #fff;
    align-self: flex-start;
    white-space: nowrap;
}
.event-tag:hover {
  background-color:  #bcff00;
}


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


  .event-tag{
    display: none;
  }
}


/* Responsive : une seule colonne sur mobile */
@media (max-width: 1024px) {
  .event-column {
    max-width: 100%;

  }

  .event-description-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .event-tag {
    align-self: flex-end;
    margin-top: 0.5rem;
    font-size: 1rem;
  }


  .hero-button {
        position: absolute;
        margin: 0;
        width:max-content;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
  }
}

 
/* Cacher certains éléments pour podcast en mobile */
@media screen and (max-width: 768px) {
  .podcast-tag {
    display: none;
  }

  .podcast-line audio,
  .podcast-line figcaption,
  .podcast-line .audio-player {
    display: none !important;
  }

  .podcast-line .article-main {
    width: 100%;
  }

  .podcast-line .article-title {
    font-size: 1.8rem;
  }

  .podcast-line .subtitle,
  .podcast-line .article-date {
    font-size: 1rem;
  }
}


.article-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.article-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.article-col-left,
.article-col-center,
.article-col-right {
  font-size: 0.95rem;
  line-height: 1.6;
}

.article-documents ul {
  list-style: none;
  padding: 0;
}

.article-documents li a {
  text-decoration: underline;
}

.site-footer {
  background: #c1c1c1;
  color: white;
  padding: 3rem 1.5rem;
  font-size: 1.5rem;
  
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: 2rem;
  max-width: 100%;
  margin: 0 auto;
  align-items: start;
}

.footer-col p, .footer-col a {
  font-size: 1rem;
  line-height: 1.2;
  color: white;
  text-decoration: none;
  margin: 0;
}

.footer-col a {
 margin-top: 1rem;
  text-decoration: underline;
}

.footer-col p:last-child a[href*="instagram"] {
  display: inline-block;
  margin-top: 1rem;
}


.footer-logo img {
  max-width: 80%;
  height: auto;
  float: right;
}
.footer-hours {
  display: flex;
  flex-direction: column;
  
  font-size: 1rem;
}

.footer-hour-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-block-end:0;
}

.footer-hour-line .day {
  flex: 1;
  font-weight: 500;
}

.footer-hour-line .time {
  flex: 1;
  text-align: left;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .footer-col {
    text-align: left;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-col {
    margin-bottom: 1.5rem;
  }
}

/* Section title */
/* Section Past Events */
.articles-preview {
  
  background-color: #f2f2f2;
}

.articles-preview .section-title {
  background-color: #bcff00; /* Vert fluo */
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.2rem;
  padding: 1rem;
  margin: 0;
 
}


/* Liste des articles */
.articles-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.article-main{
  max-width: 80%;
}
/* Ligne d'article */
.article-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid #000;
  padding: 2rem 1rem;
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  
}

.article-line:hover {
  background-color: #bcff00; /* vert clair, tu peux ajuster */
}

.article-line h3 {
  margin: 0;
}



.article-main h3 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 0rem;
  text-align: left;
}

.article-main h3 a {
  color: inherit;
  text-decoration: none;
}

.subtitle {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 0rem;
}

.article-date {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #000000;
  
}

/* Colonne droite */
.article-tag {
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #111;
  text-transform: uppercase;
  background-color: #f2f2f2;
  align-self: flex-start;
  white-space: nowrap;
}




:root {
  --header-height: 60px; /* ajuste à la hauteur réelle de ton header */
}

/* Magazine hero */
.magazine-hero {
  height: calc(100svh - var(--header-height)); /* comme le hero-carousel */
  overflow: hidden;
}

.magazine-hero .carousel-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.magazine-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Boutons */
.magazine-buttons {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  z-index: 2;
  display: flex;
  gap: 1rem;
}



.magazine-button .arrow {
  margin-left: 1rem; /* ajuste selon le besoin */
  display: inline-block;
}

.magazine-buttons a {
  background-color: #bcff00;
  color: black;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid black;
  font-weight: 500;
}

.magazine-buttons a:hover {
  background-color: #fff;
  color: black;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid black;
  font-weight: 500;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .magazine-buttons {
    flex-direction: column;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
        display: flex;
        justify-content: center;
        margin-bottom: 10%;
  }

  .magazine-buttons a {
    width:max-content;
    text-align: center;
  }
}



/* Structure des colonnes d'about */
.article-content {
  position: relative;
  z-index: 1;
  background: white;
  padding: 4rem 2rem;
  margin-top: 10vh; /* pour ne pas recouvrir l'image */
}
.columns {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
  max-width: 1800px;
  margin: 2rem auto;
}

.left,
.center,
.right {
  animation: fadeInContent 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive : colonne centrale en 1er */
@media (max-width: 768px) {
  .columns {
    grid-template-columns: 1fr;
  }

  .center {
    order: 1;
  }
  .left {
    order: 2;
  }
  .right {
    order: 3;
  }

  .columns > * {
    padding: 1rem 0;
  }

  .banner {
    background-attachment: scroll;
    height: 40vh;
  }

  .article-main h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  text-align: left;
}
}

.columns aside h3 {
  font-size: 1rem;

  margin-bottom: 0.5rem;
  color: #ff3ec9;
  text-transform: uppercase;

}

.columns aside {
  font-size: 0.95rem;
  line-height: 1.6;
}


#logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  font-size: 1.3rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  z-index: 1;
  text-decoration: none;
  color: inherit;
}



#logo .letter {
  font-weight: normal;
  font-size: 1rem;
  display: inline-block;
}

#logo .line {
  display: inline-block;
  height: 1px;
  background-color: black;
  transition: width 0.2s ease;
  vertical-align: middle;
  margin: 0 0.3rem;
}



.logo div {
  height: 2px;
  background: black;
  transition: width 0.2s ease;
}



.logo .line-1,
.logo .line-2,
.logo .line-3 {
  height: 2px;
  background-color: black;
  display: inline-block;
  transition: width 0.1s ease-out;
}



.logo .char {
 
  font-size: 1.5rem;
  margin-right: 0.3rem;
}

.logo .line {
  height: 2px;
  background: black;
  display: inline-block;
  transform-origin: left center;
  transition: width 0.2s ease;
}

.line-1 { width: 20px; margin-left: 0.2rem; }
.line-2 { width: 40px; margin-left: 0.2rem; }
.line-3 { width: 80px; margin-left: 0.2rem; }

/* === PATCH MINIMAL : EN/FR à la suite du menu, aligné à droite, sans puces === */

/* le bloc nav se cale à droite du logo */
/* === FIX : empêcher le débordement horizontal du menu + forcer le bouton EN/FR à rester visible === */

/* === FIX FINAL : FR/EN collé au menu, jamais hors-écran === */

/* 1) Le conteneur de nav (enfant direct du header) doit pouvoir SHRINK */
.site-header { /* on garde ton style, on empêche le clipping horizontal */
  box-sizing: border-box;
  overflow-x: visible;
  height: 60px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2rem;             /* garde ton espacement */
    font-size: 1.3rem;
}

/* Le menu doit être centré aussi */
.main-menu {
    display: flex;
    align-items: center;   /* ✅ alignement vertical du texte */
   
}

/* 3) Chaque item accepte de se compacter (sans sauter de ligne) */
.main-menu > li{
  list-style: none;
  min-width: 0;
  flex: 0 0 auto;            /* items à largeur auto, pas étirés */
}

/* 4) Liens : pas de retour à la ligne, pas de dépassement visuel */
.main-menu > li > a,
.main-menu > li > .lang-link{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-decoration: none;
  color: black;
  font-weight: normal;
  padding: 5px 15px 5px 15px;
}
.main-menu > li > a:hover,
.main-menu > li > .lang-link:hover{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-decoration: none;
  color: white;
  font-weight: normal;
  padding: 5px 15px 5px 15px;
}
/* 5) Bouton FR/EN : même style que le menu, toujours visible */

.lang-link.is-active{
  opacity: .5;
  pointer-events: none;
}

/* 6) Sécurité : si l’espace manque un peu, on réduit le gap (sans toucher au design) */
@media (max-width: 1280px){
  .main-menu{ gap: clamp(1rem, 1.5vw, 2rem); }
}


/* Mobile */
.burger {
  display: none;
  background: none;
  font-size: 2rem;
  border: none;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #bcff00;
  z-index: 9999;
  padding: 4rem 2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-menu ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.mobile-menu a {
  font-size: 2rem;
  text-decoration: none;
  color: black;
  display: block;
  margin: 1rem 0;
}

@media screen and (max-width: 768px) {
  .main-menu {
    display: none;
  }

  .burger {
    display: block;
    position: fixed;
    top: 0.3rem;
    right: 1rem;
    z-index: 10001;
  }
  .burger:active{
     right: 1rem;
  }
 .burger:active::before{
     right: 2rem;
  }
  .mobile-menu.show {
    display: flex;
  }
}

.audio-player {
  margin: 2rem 0;
}

.audio-player audio {
  width: 100%;
  max-width: 600px;
}
.podcast-audios {
  padding-bottom: 0rem ;
 
  margin-top: 0rem;
}

.podcast-audios h2 {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.podcast-audio-item {
  margin-top: 0rem;
  margin-bottom: 2rem;
}

.podcast-audio-item audio {
  width: 100%;
  max-width: 700px;
  
  margin-bottom: 0.5rem;
}

.podcast-audio-item figcaption {
  font-style: italic;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.25rem;
}

.podcast-audio-item .audio-credits {
  font-size: 0.85rem;
  color: #777;
}

.contact-page .banner-image img {
  width: 100%;
  height: auto;
  display: block;
}

.three-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 3rem 2rem;
}

.column section {
  margin-bottom: 2rem;
}
/* === TAG EN HAUT DES ÉLÉMENTS === */

/* Tag mobile — visible uniquement en mobile */
.event-tag-mobile,
.article-tag-mobile {
  display: none;
  font-size: 1rem;
  text-transform: uppercase;
  
  border: 1px solid #000;
  background: white;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}

/* Active seulement en mobile */
@media (max-width: 1024px) {
  .event-tag-mobile,
  .article-tag-mobile {
    display: inline-block;
  }

  .event-tag,
  .article-tag {
    display: none;
  }
}

/* En mobile (max 768px), on inverse */
@media screen and (max-width: 768px) {
 
  .mobile-only {
    display: inline-block;
    margin-top: 1rem;
  }

  /* Masquer version desktop en mobile */
  .right .contact-button {
    display: none;
  }
  .columns{
    gap: 0;
  }
  .footer-hours {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    
}
.footer-logo img {
    max-width: 80%;
    height: auto;
    float:left;
}
}