@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Freeman&family=Poetsen+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&family=Freeman&family=Poetsen+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {

  text-decoration: none;

  list-style: none;

  box-sizing: border-box;

  margin: 0px;

  padding: 0px;

  font-family: "Poppins", sans-serif;

}

html {

  scroll-behavior: smooth;

}



.hidden {

  opacity: 0;

  transform: translateY(30px);

  /* transition: opacity 0.8s ease-out, transform 0.8s ease-out; */

}



.show {

  opacity: 1;

  transform: translateY(0);

  /* transition: opacity 0.7s ease-out, transform 0.7s ease-out; */

  transition: all 0.7s ease-out;



  /* transition-delay: 0.3s; */

}



.recul {

  transform: translatex(-100vw);

}

.avance {

  transform: translatex(0);

  transition: transform 0.7s ease-out;

  /* transition-delay: 0.3s; */

}



header {

  width: 100%;

  height: 100px;

  margin: 0%;

  padding: 0%;

  position: absolute;

  font-family: "freeman", sans-serif;

  font-weight: 400;

  letter-spacing: 2px;

  z-index: 999;

}

body {

  margin: 0px;

  padding: 0%;

  text-decoration: none;

  list-style: none;

  background-image: url("img/motif1.gif");

  backdrop-filter: opacity(10%);

  background-attachment: fixed;

}

.menu_sup {

  position: relative;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  height: 100px;

  background-color: rgb(252, 252, 252);

  align-items: center;

  display: flex;

  /*align-self: center;*/

  justify-content: space-around;

  box-sizing: content-box;

  border-bottom: 3px solid rgb(21, 5, 76);

}

.menu_sup .items ul {

  display: flex;

  height: 20px;

}

.items ul li {

  margin: 0 25px;

}

.items {

  position: relative;

  display: flex;

  justify-content: center;

  margin-right: 50px;

}

.items ul li a {

  color: rgb(185, 156, 97);

  position: relative;

  text-decoration: none;

  padding-bottom: 2px;

}

.items ul li a::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 2px;

  background-color: rgb(14, 8, 75);

  bottom: 0;

  left: 0;

  transform-origin: center;

  transform: scaleX(1);

  transition: transform 0.2s ease-in-out;

}



.items ul li a:hover::before {

  transform-origin: center;

  transform: scaleX(0);

}



.items ul li.active a {

  color: rgb(14, 8, 75);

  box-sizing: content-box;

  /*border-bottom: 3px solid rgb(14, 8, 75);*/

}

.logo {

  position: relative;

  padding-left: 35px;

  height: 100px;

}

.logo img {

  height: 100px;

  width: auto;

}



.section1 {

  width: 100%;

  height: 100vh;

  position: relative;

  max-height: 1000px;

  /* background-image: url("img/nudie_jeans_1_header.jpg"); */

  background-size: cover;

  background-position: center 100px;

  background-repeat: no-repeat;

  overflow: hidden;

}



.filtre {

  position: relative;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    0deg,

    rgba(0, 0, 0, 0.6) 0%,

    rgba(0, 0, 0, 0.225980392156863) 100%

  );

  display: flex;

  align-items: center;

}

.background {

  position: absolute;

  height: 100%;

  width: 100%;

  object-fit: cover;

  object-position: top;

  z-index: -999;

  /* transform: scale(1, 1.15); */

}



.container {

  width: 100%;

  height: clamp(200px, 60vh, 500px);

  position: relative;

  display: flex;

  row-gap: 10px;

  flex-direction: column;

  align-items: center;

  justify-content: space-around;

  transform: translateY(50px);

}



.btn_contact {

  padding: 10px 20px;

  position: relative;

  border: solid 2px #033649;

  color: #033649;

  border-radius: 100px;

  font-size: 20px;

  font-weight: 800;

  letter-spacing: 3px;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  text-decoration: none;

  font-family: "Open Sans Condensed", sans-serif;

  transition: transform 0.3s ease-in-out;

  z-index: 2;

  text-transform: uppercase;

  /* background: rgb(232,221,203); */

  /* background: linear-gradient(90deg, rgba(228,190,87,1) 0%, rgba(217,159,38,1) 32%, rgba(232,138,5,1) 63%, rgba(189,125,15,1) 100%); */

  /* -webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 

    box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); */

  background: linear-gradient(

    90deg,

    rgba(222, 163, 12, 1) 0%,

    rgba(150, 100, 6, 1) 100%

  );

}



.btn_contact:hover {

  color: #cdb380;

  border-color: #cdb380;

}

.btn_contact::before {

  content: "";

  position: absolute;

  /* width:100%;

    height: 100%; */

  background-color: #033649;

  z-index: -1;

  transition: transform 0.3s;

  /* transform: translatex(-100%); */

  border-radius: 100px;

  transform: scalex(0);

  transform-origin: bottom left;

  background: linear-gradient(

    90deg,

    rgba(3, 101, 100, 1) 0%,

    rgba(3, 54, 73, 1) 50%,

    rgba(3, 22, 52, 1) 100%

  );

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  inset: 0 0 0 0;

  display: block;



  /* -webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 

    box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 5px 5px 15px 5px rgba(0,0,0,0); */

}

.btn_contact:hover::before {

  transform: scalex(1);

  transform-origin: bottom right;

  /* transform: translatex(0); */

}



.slogan {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.slogan_h {

  /* font-family: "Kaushan Script", cursive; */

  /* font-family: "Fjalla One", sans-serif; */

  font-family: "Poppins", sans-serif;

  /* font-family: "Lora", serif; */

  /* font-family: "Playball", cursive; */

  font-optical-sizing: auto;

  font-style: normal;

  font-weight: 300;

  font-style: normal;

  color: #ffffff;

  text-align: center;

  font-size: clamp(20px, 3vw - 10px, 50px);

  text-shadow: 3px 3px 3px rgba(7, 0, 0, 0.3);

  padding: 0 30px;

  text-transform: uppercase;

}



.menu_hamburger {

  display: none;

  position: relative;

  width: 35px;

  right: 30px;

}

.menu_hamburger img {

  width: 100%;

}



@media screen and (max-width: 800px) {

  .items {

    display: none;

  }

  .menu_sup .menu_hamburger {

    display: flex;

    justify-content: center;

  }



  .menu_sup {

    justify-content: space-between;

  }



  .container {

    flex-direction: column;

    width: 100%;

  }

  .container2 {

    width: 100%;

    flex-direction: column;

  }

}



.section2 {

  position: relative;

  background-color: white;

  width: 100%;

  display: flex;

  transform-style: preserve-3d;

  overflow: hidden;

}

.container2 {

  margin: 50px auto;

  width: 100%;

  display: flex;

  /*gap: 20px,0px;*/

  justify-content: center;

  align-items: center;

  background-color: white;

}



.sec2container {

  width: 80%;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: normal;

  align-items: normal;

  align-content: normal;

  background-color: rgb(255, 255, 255);

  margin-top: 50px;

}

.sec2title {

  width: 100%;

}

h2 {

  margin: 0px;

  padding: 0px;

  font-size: clamp(28px, 5vw + 1rem, 60px);

  font-family: "Poppins", sans-serif;

  display: block;

  z-index: 2;

}

.sec2div:nth-child(2) {

  position: relative;

  display: flex;

  flex-grow: 0;

  flex-shrink: 1;

  flex-basis: auto;

  align-self: auto;

  order: 0;

  /* min-width: 320px; */

  max-width: 50%;

  max-height: 300px;

}



.sec2div:nth-child(2) h3 {

  font-family: "Poppins", sans-serif;

  font-size: 25px;

  color: #344f73;

}



.sec2title h2::before {

  content: "BRAMATEX";

  position: absolute;

  top: 9%;

  left: 0;

  font-size: 17vw;

  color: rgb(153, 158, 158);

  opacity: 0.2;

  font-weight: bold;

  font-family: "Poppins", sans-serif;

  width: 80%;

  margin-left: auto;

  margin-right: auto;

}



@media only screen and (max-width: 767px),

  only screen and (max-device-width: 767px) {

  .sec2title h2 {

    font-size: 32px;

  }

}



p {

  font-size: 20px;

  font-family: "Poppins", sans-serif;

}



.sec2div:nth-child(3) {

  position: relative;

  display: flex;

  order: 0;

  /* min-width: 320px; */

  max-width: 50%;

  text-align: justify;

  text-justify: distribute;

  flex-direction: column;

}

.sec2div2 p {

  font-size: 1.2em;

  min-width: 300px;

  font-family: "Poetsen+One", sans-serif;

}

@media screen and (max-width: 800px) {

  .sec2div:nth-child(2) {

    max-width: 100%;

    /* margin-left: 3px;

        margin-right: 3px; */

  }

  .sec2div:nth-child(3) {

    max-width: 100%;

    /* margin-left: 3px;

        margin-right: 3px; */

  }

}



.secbas {

  width: 100%;

  height: 100px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: left;

}

/* -------------- Custom link Start---------------- */

.custom-link {

  display: block;

  transition: all 1s;

  transition-delay: 0.3s;

}



.custom-link * {

  -webkit-transition: 0.25s ease-in-out;

  -moz-transition: 0.25s ease-in-out;

  -ms-transition: 0.25s ease-in-out;

  -o-transition: 0.25s ease-in-out;

  transition: 0.25s ease-in-out;

}



.custom-link a {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  font-size: 14px;

  color: #0e0e0e;

  font-family: "Poppins", sans-serif;

}



.custom-link a:hover {

  text-decoration: none;

}



.custom-link b {

  font-weight: 600;

  display: inline-block;

  margin-left: 20px;

}



.custom-link .lines {

  width: 42px;

  height: 1px;

  float: left;

  overflow: hidden;

}



.custom-link .lines span:nth-child(1) {

  width: 100%;

  height: 1px;

  float: right;

  background: #0e0e0e;

}



.custom-link .lines span:nth-child(2) {

  width: 0;

  height: 1px;

  float: left;

  background: #0e0e0e;

}



.custom-link:hover .lines {

  width: 62px;

  margin-left: 20px;

}



.custom-link:hover .lines span:nth-child(1) {

  width: 0;

}



.custom-link:hover .lines span:nth-child(2) {

  width: 100%;

  transition-delay: 0.2s;

}

/*----------- Custom Link end -----------*/



.section3 {

  width: 100%;

  position: relative;

  padding-bottom: 100px;

  background-image: url("../img/back_choose.jpg");

  /* background-image: url('../Img/8469.jpg'); */

  /* background-image: url("../Img/wallpaperflare.com_wallpaper.jpg"); */

  background-size: cover;

  backdrop-filter: blur(10px);

}

.container3 {

  width: 80%;

  display: flex;

  flex-direction: row;

  position: relative;

  margin-left: auto;

  margin-right: auto;

  flex-wrap: wrap;

}



.titrepetit {

  width: 100%;

  margin-top: 50px;

}



.titrepetit h6 {

  width: 100%;

  font-family: "Poppins", sans-serif;

  font-size: 18px;

  color: #f4ce56;

  margin-bottom: 20px;

}



.titresec3 {

  width: 100%;

}



.titresec3 h2 {

  color: #f2f2f2;

}



.carte-container {

  width: 100%;

  display: flex;

  flex-direction: row;

  margin-top: 50px;

  align-items: center;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

  /* grid-template-columns: repeat( auto-fit, minmax(230px, 1fr) ); */

}



/* .carte_filter{

    width: 100%;

    height: 400px;

    backdrop-filter: blur(5px);



} */



.carte {

  height: clamp(330px, 50vh, 380px);

  perspective: 2000px;

  flex-basis: clamp(230px, 25%, 260px);

}



@media screen and (max-width: 800px) {

  .carte {

    width: 100%;

    min-width: 180px;

    transition-delay: 0.6s;

  }

}



/* .carteanim{

opacity: 0;

transform:translateY(50px);

  animation-timeline: view(inline 20%);

  animation-range-start: entry 10%;

  animation-range-end:50%; 

  animation-name: fade_in;

  animation-fill-mode: forwards;

  animation-iteration-count: 1;

  animation-duration: 1ms; Firefox requires this to apply the animation 



} */



/* .carteanim{

    opacity: 0;

    transform:translateY(50px);

    animation: fade_in linear forwards;

    animation-timeline: view();

    animation-range: entry 10%;

} */



/* @keyframes fade_in {

    from{opacity:0;transform:translateY(50px) scale(0,0);}

    to{opacity: 1;transform:translateY(0) scale(1,1)}

           

}



@keyframes fade_out {

    to{opacity:0;transform:translateY(50px) scale(0,0);}

    from{opacity: 1;transform:translateY(0) scale(1,1)}

           

} */



.carte_wrapper {

  /* backdrop-filter: blur(5px); */

  position: relative;

  width: 100%;

  height: 100%;

  transition: all 0.5s ease-in-out;

  transform-style: preserve-3d; /*Force the two faces to rotate together*/

}



.carte:hover .carte_wrapper {

  transform: rotate3d(0, 1, 0, 180deg);

  cursor: default;

}



.carte_face,

.carte_dos {

  position: absolute;

  width: 100%;

  height: 100%;

  /* border-radius: 10px; */

  backface-visibility: hidden; /*hide backface*/

  transition: all 0.5s ease-in-out;

  transform-style: preserve-3d; /*to allow 3d on images*/

}



.carte_face {

  background-image: url("../img/Designs_face.png");

  background-position: center;

  background-size: cover;

  border-radius: 20px;

  border: 2px solid #deaf18;

  transform: rotateY(180deg);

}



.carte_dos img {

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 20px;

}



.carte_dos h2 {

  font-size: 60px;

  color: #ffffff;

  transform: translateZ(60px) rotateZ(-60deg);

}



.carte_dos {

  /* background-image: url("../img/carte_back.jpg");

    background-size:cover;

    background-position: center; */

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 20px;

  border: 2px solid #deaf18;

  /* overflow: hidden; */

}



.haut_container {

  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.5));

}



.haut {

  display: block;

  align-content: center;

  text-align: center;

  /* clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 53% 90%, 50% 100%, 47% 90%, 0% 90%); */

  /* clip-path: polygon(100% 0, 100% 78%, 66% 78%, 50% 100%, 33% 78%, 0 78%, 0 0); */

  /* background-color: #9e9d9b; */

  /* background-color: #b8b6b3; */

  /* margin-bottom: -60px;

    padding-bottom: 20px; */

  /* border-radius: 10px 10px 0 0; */

  /* box-shadow: 1px 8px 19px -6px rgba(0,0,0,0.75); 

    -webkit-box-shadow: 1px 8px 19px -6px rgba(0,0,0,0.75);

    -moz-box-shadow: 1px 8px 19px -6px rgba(0,0,0,0.75); */

  /* border-radius: 50%; */

  /* border-top: 2px solid rgb(248 248 248 / 50%);

    border-bottom: 2px solid rgb(255 255 255 /50%); */

  /* margin: 20px; */

  display: flex;

  align-items: center;

  justify-content: center;

  /* background: rgba(255,255,255,0.2); */

  width: 100%;

  /* backdrop-filter: blur(5px); */

  transform-style: preserve-3d;

  height: 30%;

  padding-top: 10px;

}

.haut img {

  width: 80px;

  image-rendering: optimizeQuality;

  transform: translateZ(60px);

}



.blur_filtre {

  backdrop-filter: blur(5px);

}



.bas ul {

  padding: 10px;

}

.bas {

  /* background-color: white; */

  padding-top: 70px;

  text-align: center;

  padding-bottom: 30px;

  padding-right: 10px;

  padding-left: 10px;

  /* border-radius: 10px; */

  /* background: rgba(9, 9, 9, 0.4); */

  height: 70%;

  padding: 15px;

  /* backdrop-filter: blur(5px); */

  transform-style: preserve-3d;

}



.bas > * {

  color: rgb(200, 203, 38);

  text-shadow: 3px 3px 3px rgba(7, 0, 0, 0.3);

  transform: translateZ(60px);

}



/* .left{

    width:20%;

    display: flex;

    color: #F2F2F2;

    

}

.right{

    width: 80%;

} */

.left small {

  font-size: 15px;

  padding-left: 10px;

  padding-top: 5px;

}



.left span {

  font-size: clamp(40px, 7vw, 80px);

  letter-spacing: 0.2;

  margin-left: auto;

  margin-right: auto;

}



/* .left span {

    width: 50px;

    height: 1px;

    background: #f2f2f2;

    display: inline-block;

    margin: 5px 5px;

} */



.right h4 {

  color: #f2f2f2;

  font-size: clamp(20px, 1vw + 1rem, 25px);

  margin-bottom: 30px;

}



.right li {

  list-style: none;

  color: #f2f2f2;

}



.section4 {

  position: relative;

  width: 100%;

  background: none;

  display: flex;

  background-color: #ffffff;

  align-items: center;

  justify-content: center;

}

.sec4container {

  width: 80%;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: normal;

  align-items: normal;

  align-content: normal;

  background-color: rgb(255, 255, 255);

  margin-top: 50px;

}

.sec4title {

  padding-top: 80px;

  width: 100%;

}



.sec4title h2::before {

  content: "BRAMATEX";

  position: absolute;

  top: 25%;

  left: 0;

  font-size: 17vw;

  color: rgb(153, 158, 158);

  opacity: 0.2;

  font-weight: bold;

  font-family: "Poppins", sans-serif;

  width: 80%;

  margin-left: auto;

  margin-right: auto;

}



.scroller {

  max-width: 100%;

  margin-bottom: 60px;

  margin-top: 150px;

}



.scroller__inner {

  padding-block: 1rem;

  display: flex;

  flex-wrap: wrap;

  gap: 1.4rem;

}



.scroller[data-animated="true"] {

  overflow: hidden;

  -webkit-mask: linear-gradient(

    90deg,

    transparent,

    white 20%,

    white 80%,

    transparent

  );

  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);

}



.scroller[data-animated="true"] .scroller__inner {

  width: max-content;

  flex-wrap: nowrap;

  animation: scroll var(--_animation-duration, 40s)

    var(--_animation-direction, forwards) linear infinite;

}



.scroller[data-direction="right"] {

  --_animation-direction: reverse;

}



.scroller[data-direction="left"] {

  --_animation-direction: forwards;

}



.scroller[data-speed="fast"] {

  --_animation-duration: 20s;

}



.scroller[data-speed="slow"] {

  --_animation-duration: 60s;

}



@keyframes scroll {

  to {

    transform: translate(calc(-50% - 0.7rem));

  }

}



.scroller__inner img {

  height: 120px;

  /* width:120px; */

  background: transparent;

  /* margin:10px 10px; */

}



.section_sep {

  position: relative;

  width: 100%;

  padding: 80px 0 80px 0;

  background: linear-gradient(

    0deg,

    rgba(255, 255, 255, 0.85) 0%,

    rgba(255, 255, 255, 1) 100%

  );

}



.section5 {

  position: relative;

  display: flex;

  padding-top: 30px;

  width: 100%;

  background: rgb(255, 255, 255, 0.85);

  align-items: center;

  justify-content: center;

  padding-bottom: 80px;

}

.sec5container {

  display: flex;

  flex-direction: row;

  width: 80%;

  flex-wrap: wrap;

}



.sec5left {

  width: 45%;

  background-color: none;

  /* min-width: 300px; */

  padding-right: 20px;

}



.sec5left h6 {

  width: 100%;

  font-family: "Poppins", sans-serif;

  font-size: 18px;

  color: #9e9d9b;

  margin-bottom: 20px;

}

.sec5right {

  width: 55%;

  background-color: none;

  display: flex;

  flex-direction: column;

  /* min-width: 350px; */



  /* flex-wrap: wrap; */

}



@media screen and (max-width: 800px) {

  .sec5right {

    width: 100%;

  }

  .sec5left {

    width: 100%;

    padding-right: 0px;

  }



  .sec4container {

    width: 95%;

  }

  .sec5container {

    width: 90%;

  }

}



.empty-space {

  width: 100%;

  height: 50px;

}

.text-box {

  width: 100%;

}



.text-box h4 {

  color: #000000;

  font-size: clamp(20px, 1vw + 1rem, 25px);

  margin-bottom: 30px;

  text-transform: uppercase;

}



.box {

  width: 100%;

  display: grid;

  align-items: center;

  justify-items: center;

  min-width: 100px;

}



@media screen and (max-width: 800px) {

  .box {

    width: 100%;

  }

  .empty-space {

    width: 100%;

    height: 20px;

  }

}

@media screen and (max-width: 420px) {

  .box {

    width: 100%;

  }

}



.box-inner {

  position: relative;

  display: block;

  align-items: center;

  width: 100%;

  height: 100%;

  padding: 8%;

  margin: auto;

}



.box-content {

  display: block;

  position: relative;

  width: 100%;

  height: 100%;

  isolation: isolate;

  background: #ffffff;

  border: 1px solid rgb(100, 100, 100, 0.2);

  overflow: hidden;

  perspective: 700px;

  perspective-origin: 40% 40%;

  /* transition: all 0.5s; */

}



.box-content:hover {

  cursor: default;

}

.box-inner * {

  transition: all 0.2s ease-in-out;

}



.box-content:hover small {

  opacity: 1;

  margin-top: -30%;

}

.box-content:hover img {

  opacity: 0.2;

  transform: rotatex(75deg) translatey(40px);

  transform-origin: 70% 70%;

}



.box-content small {

  display: grid;

  align-items: center;

  width: 100%;

  height: 50%;

  line-height: 30px;

  position: absolute;

  left: 0;

  top: 70%;

  opacity: 0;

  font-family: "Fjalla One", sans-serif;

  font-size: clamp(20px, 4vw - 2rem, 25px);

  text-align: center;

}



.box-inner img {

  padding: 10px;

  max-width: 100%;

  vertical-align: middle;

}



.sec5right-inner {

  width: 100%;

  /* gap:20px; */

  display: grid;

  flex-direction: row;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  /* grid-template-columns: 33% 33% 33%; */

  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));

}



@media screen and (max-width: 420px) {

  .container2 {

    width: 100%;

  }

  .sec2container {

    flex-direction: column;

    width: 90%;

  }

  .sec5right-inner {

    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));

  }

  .box-inner {

    padding: 3px;

  }

}



/* Debut loading page */

.preloader {

  width: 100%;

  height: 100vh;

  background-color: #f2f2f2;

  display: flex;

  flex-wrap: wrap;

  flex-direction: column;

  justify-content: center;

  text-align: center;

  align-items: center;

  position: fixed;

  left: 0;

  top: 0;

  z-index: 1000;

  overflow: hidden;

  transition: all 0.5s linear;

}

.lds-dual-ring {

  /* change color here */

  color: #0a042e;

  margin-top: 50px;

  /* position: absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

 */

}

.lds-dual-ring,

.lds-dual-ring:after {

  box-sizing: border-box;

}

.lds-dual-ring {

  display: inline-block;

  width: 80px;

  height: 80px;

}

.lds-dual-ring:after {

  content: "";

  display: block;

  width: 64px;

  height: 64px;

  margin: 8px;

  border-radius: 50%;

  border: 6.4px solid currentColor;

  border-color: currentColor transparent currentColor transparent;

  animation: lds-dual-ring 1.2s linear infinite;

}

@keyframes lds-dual-ring {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



/* fin loading page */



/* debut departements*/

.section1-dep {

  width: 100%;

  display: block;

  position: relative;

}



.sec1-container {

  padding-bottom: 60px;

  position: relative;

  background-color: #ffffff;

  /* background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(240, 0%, 100%, 1)'/><path d='M40 10v20M0 10v20M10 0h20M10 40h20m10 10L30 40l10-10 10 10zM0 50l-10-10L0 30l10 10zm40-40L30 0l10-10L50 0zM0 10L-10 0 0-10 10 0z'  stroke-width='0.5' stroke='hsla(47, 14.449579246960239%, 83.18563679076762%, 1)' fill='none'/><path d='M20-10v20m0 20v20m-30-30h20m20 0h20M20 30L10 20l10-10 10 10z'  stroke-width='0.5' stroke='hsla(59.56272262922795, 89.60000000000002%, 58.400000000000006%, 1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>"); */

  /* height: 500px; */

  width: 100%;

}



.sec1-wraper {

  display: grid;

  gap: 20px;

  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  width: 80%;

  margin-left: auto;

  margin-right: auto;

  flex-wrap: wrap;

  /* height: 500px; */

}



@media screen and (max-width: 420px) {

  .sec1-wraper {

    width: 90%;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  }

}



.h2-dep {

  margin: 0px;

  padding: 0 0 30px 0;

  font-size: clamp(16px, 5vw + 1rem, 60px);

  font-family: "Poppins", sans-serif;

  display: block;

  line-height: 1;

}



.h3-dep {

  padding-top: 120px;

  font-size: 34px;

  font-weight: 800;

  color: rgb(185, 156, 97);

}



.h2-container {

  width: 80%;

  margin-left: auto;

  margin-right: auto;

}



.dep-box {

  position: relative;

  width: 100%;

  height: 60vh;

  max-height: 400px;

  margin: auto;

}

.dep-container {

  position: relative;

  width: 100%;

  height: 100%;



  background-size: cover;

  background-position: 20% 50%;

  transition: 0.35s;

}



.dep-wraper {

  width: 100%;

  height: 100%;

  overflow: hidden;

  background-position: 50% 50%;

  background-size: cover;

}



.dep-box:hover .dep-wraper {

  background-color: rgba(0, 0, 0, 0.65);

}



figcaption {

  position: absolute;

  bottom: 0;

  left: 0;

  padding: 30px 3em;

  width: 100%;

  /* height: 30%; */

  overflow: hidden;

}



figcaption::before {

  position: absolute;

  top: 30px;

  right: 30px;

  bottom: 30px;

  left: 100%;

  border-left: 4px solid rgba(255, 255, 255, 0.8);

  content: "";

  opacity: 0;

  background-color: rgba(255, 255, 255, 0.5);

  -webkit-transition: all 0.5s;

  transition: all 0.5s;

  -webkit-transition-delay: 0.6s;

  transition-delay: 0.6s;

}



figcaption h2 {

  color: #ffffff;

  margin: 0 0 5px;

  opacity: 0;

  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

  transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s,

    -o-transform 0.35s, transform 0.35s;

  /* word-spacing: -0.15em; */

  font-weight: 400;

  font-size: clamp(1rem, 120% + 1px, 1.5rem);

  text-transform: uppercase;

  -webkit-transform: translate3d(30%, 0%, 0);

  transform: translate3d(30%, 0%, 0);

  -webkit-transition-delay: 0.3s;

  transition-delay: 0.3s;

}



.dep-box:hover h2 {

  opacity: 1;

  -webkit-transform: translate3d(0%, 0%, 0);

  transform: translate3d(0%, 0%, 0);

  -webkit-transition-delay: 0.4s;

  transition-delay: 0.4s;

}



.dep-box:hover figcaption::before {

  background: rgba(255, 255, 255, 0);

  left: 30px;

  opacity: 1;

  -webkit-transition-delay: 0s;

  transition-delay: 0s;

}

.dep-box:hover .dep-wraper::after {

  transform: scale(1);

}



.dep-box:hover .dep-container {

  background-position: 40% 50%;

  /* z-index: 0;

  transform: scale(1.05); */

}



.foot {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  /* height: 300px; */

  background-color: black;

  box-shadow: -1px -9px 28px -12px rgba(0, 0, 0, 0.75);

  -webkit-box-shadow: -1px -9px 28px -12px rgba(0, 0, 0, 0.75);

  -moz-box-shadow: -1px -9px 28px -12px rgba(0, 0, 0, 0.75);

  flex-wrap: wrap;

}

/*fin departements*/

.footlogo {

  position: relative;

  width: 80%;

  display: flex;

  /* flex-wrap: nowrap; */

  margin-top: 30px;

  margin-bottom: 30px;

}

.footlogo img {

  width: 70px;

  height: auto;

}

.footslogan {

  width: 80%;

  position: relative;

  display: flex;

}

.h2_foot {

  font-size: clamp(24px, 4vw, 32px);

  color: #ffffff;

}

.foot * {

  color: #ffffff;

}

.foottel {

  display: flex;

  width: 80%;

  flex-direction: column;

}

.addr {

  display: flex;

  align-items: center;

  flex: 0 0 33.3333333%;

  margin: 10px 10px 30px 0;

}

.addr p {

  font-size: clamp(12px, 2vw, 17px);

}

.tel {

  flex: 0 0 33.3333333%;

  margin: 10px 10px 10px 0;

  font-size: clamp(12px, 2vw, 17px);

}

.email {

  display: flex;

  align-items: center;

  flex: 0 0 33.3333333%;

  margin: 10px 10px 10px 0;

  font-size: clamp(12px, 2vw, 17px);

}

.card_p{

  font-size: 15px;

  padding-top: 10px;

  color: white;

  text-transform: uppercase;

}