* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Julius Sans One', Arial, sans-serif;
  font-style: normal;
  color: #143D5B;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header & Nav */
.header {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0;
  height: 7.3w;

}

.nav a {
  color: #10326c;
  text-decoration: none;
  margin: 0 0.5vw;
  position: relative;
  padding-bottom: 0vw;
  font-family: 'Julius Sans One';
  transition: color 0.3s ease;
  font-size: 1.5vw;
}

.t-n:hover {
  color: #143D5B;
  text-decoration: underline;
  text-underline-offset: 10px;
}

.t-n::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 15px;
  background: url('images/logos/mosaic-pattern.png') no-repeat center bottom / contain;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.t-n:hover::after {
  transform: scaleX(1);
}

.logo-nav  {width: 100px;
  
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 1001;
  border-radius: 14px;
  padding: 0.5rem 0;
}

.dropdown-content a {
  display: block;
  padding: 0.5rem 1rem;
  color: #10326c;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-content a:hover {
  color: #2798e9;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.arrow {
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.dropdown:hover .arrow {
  transform: rotate(180deg);
}

.dropdown:hover .dropdown-content {
  display: flex;
  flex-direction: column;
}

.dropdown .arrow {
  margin-left: 6px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.dropdown:hover .arrow {
  transform: rotate(180deg);
}

  /*recompenses*/
  .titre-rec h2 {
    padding-top: 7vw;
    align-items: center;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 1vw;
    font-size: 1.6rem;
    color: #143D5B;
  }

  .recompenses{
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
     background: #143D5B;
     padding-top: 10vw;
     padding-bottom: 15vw;
     padding-left: 2vw;
     padding-right:2vw;
     width: 95%;
    margin: 2.5vw;
    justify-content: center;
    align-content: center;
    height: 530vw;
    
   
  }

  .recompenses img{
    width: 27vw;
    height: 216 px;
    padding: 5px;

  }
  .recompenses img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    cursor: pointer;
  }
  
  .it14 img{
    width: 14vw;
    height: 216px;
  }.it15 img{
    width: 14vw;
    height: 216px;
  }.it16 img{
    width: 14vw;
    height: 216px;
  }.it17 img {
    width: 14vw;
    height: 216px;
  }

  /* Rotate selected images by 90 degrees clockwise */
.recompenses .it18 img,
.recompenses .it19 img,
.recompenses .it20 img,
.recompenses .it21 img,
.recompenses .it22 img,
.recompenses .it23 img,
.recompenses .it24 img,
.recompenses .it25 img,
.recompenses .it26 img,
.recompenses .it27 img,
.recompenses .it28 img,
.recompenses .it32 img,
.recompenses .it33 img,
.recompenses .it34 img,
.recompenses .it35 img,
.recompenses .it36 img,
.recompenses .it37 img,
.recompenses .it38 img,
.recompenses .it39 img,
.recompenses .it40 img,
.recompenses .it41 img,
.recompenses .it42 img,
.recompenses .it43 img,
.recompenses .it44 img,
.recompenses .it46 img,
.recompenses .it47 img,
.recompenses .it49 img,
.recompenses .it52 img,
.recompenses .it53 img,
.recompenses .it54 img,
.recompenses .it55 img,
.recompenses .it59 img {
  transform: rotate(270deg);
  transform-origin: center center;
  transition: transform 0.3s ease;
  display: block;
  justify-self: center;
  max-width: 70%;
}

.recompenses .it18 img:hover,
.recompenses .it19 img:hover,
.recompenses .it20 img:hover,
.recompenses .it21 img:hover,
.recompenses .it22 img:hover,
.recompenses .it23 img:hover,
.recompenses .it24 img:hover,
.recompenses .it25 img:hover,
.recompenses .it26 img:hover,
.recompenses .it27 img:hover,
.recompenses .it28 img:hover,
.recompenses .it29 img:hover,
.recompenses .it32 img:hover,
.recompenses .it33 img:hover,
.recompenses .it34 img:hover,
.recompenses .it35 img:hover,
.recompenses .it36 img:hover,
.recompenses .it37 img:hover,
.recompenses .it38 img:hover,
.recompenses .it39 img:hover,
.recompenses .it40 img:hover,
.recompenses .it41 img:hover,
.recompenses .it42 img:hover,
.recompenses .it43 img:hover,
.recompenses .it44 img:hover,
.recompenses .it46 img:hover,
.recompenses .it47 img:hover,
.recompenses .it49 img:hover,
.recompenses .it52 img:hover,
.recompenses .it53 img:hover,
.recompenses .it54 img:hover,
.recompenses .it55 img:hover,
.recompenses .it59 img:hover {
  transform: rotate(270deg) scale(1.15);
}



 



/*footer*/
.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  justify-content: space-between;
  background-color: #143D5B;
  color: #fff;
  padding: 2vw 1vw;
  position: relative;
  height: 13vw;
}

.ft-part1 {
  position: relative;
  width: 13vw;
}

.ft-part1 img {
  position: absolute;
  width: 100%;
  right: 7.5vw;
  top: -2vw;
  pointer-events: none;
}

.ft-part2 {
  padding-left: 0vw;
  flex: 2 1 24vw;
  text-align: left;
  font-size: 1.4vw;
  
}

.ft-adress {
  padding-bottom: 1.4vw;
  text-align: left;
  left: 10vw;
}

.ft-tel {
  padding-bottom: 2vw;
  text-align: left;
}

.footer-contact .logo-footer {
  position: absolute;
  top: 1vw;
  right: 3vw;
  width: 11vw;
}

.logo-footer {
  flex: 2;
  width: 11vw;
  margin-top: 1vw;
  pointer-events: none;
}

     /* Images zoomables */
img.zoomable {
  cursor: pointer;
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
  border-radius: 0px;
}

/* Lightbox zoom */
.zoom-container {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.zoom-container img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.zoom-container.active {
  display: flex;
}

#zoomedImage.rotated {
  transform: rotate(270deg);
}



/*zelij*/
.zelij{
  position: sticky;
}

.zj{position: absolute;
  
  height: auto;
  z-index: 0;
  opacity: 1;
pointer-events: none;}


  .z1 { top: 2.4vw;left:-1vw ; width: 90%; }
.z2 { top: 7vw; right: 2.5vw;width: 4.7%; }
.z3 { top: 7vw; left: 2.5vw; width: 4.7%;}
.z5 { top: 117.5vw; right: 2.5vw;width: 4.7%; }
.z6 { top: 117.5vw; left: 2.5vw; width: 4.7%;}
.z7 { top: 227.5vw; right: 2.5vw;width: 4.7%; }
.z8 { top: 227.5vw; left: 2.5vw; width: 4.7%;}
.z9 { top: 337.5vw; right: 2.5vw;width: 4.7%; }
.z10 { top: 337.5vw; left: 2.5vw; width: 4.7%;}
.z11 { top: 415.29vw; right: 2.5vw;width: 4.7%; }
.z12 { top: 415.29vw; left: 2.5vw; width: 4.7%;}
.z4 { top: 527.5vw; left: 8vw; width: 97%; }
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

  



  .header .nav {
    display: none;
  }

  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .mobile-logo img {
    height: 45px;
  }

  .menu-toggle {
    cursor: pointer;
  }

  .menu-toggle svg {
    height: 30px;
    width: 30px;
  }

  .mobile-nav {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
  position: fixed;
  top: 55px;
  left: 0;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  padding: 1rem;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;

}

.mobile-nav a {
  padding: 0.75rem 1rem;
  color: #143D5B;
  text-decoration: none;
  font-family: 'Julius Sans One';
  font-size: 1rem;
  font-weight: normal;
  border-bottom: 1px solid #eee;
}

.mobile-nav a:last-child {
  border-bottom: none;
  
}
.mobile-nav a:hover {
  color: #2798e9;
}


  .mobile-nav.open {
    transform: translateX(0%);
  }

  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    transition: opacity 0.3s ease;
  }

  .menu-overlay.active {
    display: block;
  }
}
@media (min-width: 769px) {
  .mobile-header,
  .mobile-nav,
  .menu-overlay {
    display: none !important;
  }
}


.scale-wrapper {
  width: 100%; /* Matches your full design */
  margin: 0 auto;
  transform-origin: top center;
  position: relative;
}

@media (max-width: 1280px) {
  .scale-wrapper {
    transform: scale(calc(100vw / 1280));
  }
}

body {
  overflow-x: hidden;
}