@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

*,
:after,
:before {
  padding: 0;

  margin: 0;

  box-sizing: border-box;
}

:root {
  --clr-primary: #2680c0;

  --clr-primary-dark: #003e6b;

  --clr-primary-light: #85c6f4;

  --clr-grey-1: #102a42;

  --clr-grey-5: #617d98;

  --clr-grey-10: #f1f5f8;

  --clr-white: #fff;

  --clr-red-dark: #bb2525;

  --clr-red-light: #e66b6b;

  --transition: all 0.3s linear;

  --spacing: 0.25rem;

  --radius: 0.25rem;

  --large-screen-width: 1170px;

  --small-screen-width: 90vw;

  --fixed-width: 50rem;

  --clr-primary-1: #532004;

  --clr-primary-2: #75300a;

  --clr-primary-3: #86380e;

  --clr-primary-4: #994314;

  --clr-primary-5: #ba5d2c;

  --clr-primary-6: #c86a37;

  --clr-primary-7: #da8252;

  --clr-primary-8: #f2ad88;

  --clr-primary-9: #fdd5bf;

  --clr-primary-10: #ffebe0;

  --clr-grey-1: #102a42;

  --clr-grey-2: #243a52;

  --clr-grey-3: #324d67;

  --clr-grey-4: #48647f;

  --clr-grey-5: #617d98;

  --clr-grey-6: #829ab0;

  --clr-grey-7: #9eb2c7;

  --clr-grey-8: #bcccdc;

  --clr-grey-9: #dae2ec;

  --clr-grey-10: #f1f5f8;

  --clr-white: #fff;

  --clr-red-dark: #bb2525;

  --clr-red-light: #e66b6b;

  --clr-green-dark: #25bb32;

  --clr-green-light: #6be675;

  --clr-black: var(--clr-grey-1);

  --transition: all 0.3s linear;

  --spacing: 0.02rem;

  --radius: 0.25rem;

  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  --max-width: 1170px;

  --fixed-width: 620px;

  --clr-bcg: #fff;

  --clr-font: #282c35;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;

  background-color: #fff;
}

ul {
  list-style: none;
}

button,
input,
textarea,
select {
  font-family: "Montserrat", sans-serif;
}

button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
}

button,
select {
  cursor: pointer;

  border: none;
}

a {
  text-decoration: none;
}

p {
  letter-spacing: 0.04rem;

  line-height: 1.5 !important;
}

#carte {
  height: 100vh;
}

.leaflet-routing-container {
  margin-right: 0px !important;

  margin-top: 0px !important;

  border: 0px solid rgba(0, 0, 0, 0.2) !important;
}

.leaflet-routing-add-waypoint {
  display: none !important;
}

.leaflet-routing-remove-waypoint {
  display: none !important;
}

.leaflet-routing-geocoders {
  background-color: #f1f1f1;

  padding: 20px 10px;
}

.leaflet-routing-geocoders input {
  width: calc(90% - 4px) !important;
}

.ma-position-full {
  float: right;

  padding: 10px 10px 0px 10px !important;
}

.leaflet-popup-content {
  text-align: center;

  line-height: 1.8;
}

.noscroll {
  position: fixed !important;
}

.dark-background {
  width: 100%;

  height: 100%;

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

  position: fixed;

  top: 0;

  left: 0;

  display: none;

  z-index: 999;
}

aside {
  width: 300px;

  height: 100%;

  background-color: #fff;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  position: fixed;

  top: 0;

  left: -310px;

  padding: 2rem 1.1rem;

  overflow-y: auto;

  transition: var(--transition);

  z-index: 9999;
}

aside .remove {
  text-align: right;
}

aside .remove button {
  background-color: transparent;

  border: none;

  font-size: 1rem;
}

aside ul {
  display: block;

  margin-top: 1.2rem;
}

aside ul li a {
  width: 100%;

  display: inline-flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.9rem;

  font-weight: 500;

  color: #33509f;

  padding: 1.2rem 0;

  border-bottom: 1px solid #ddd;

  letter-spacing: var(--spacing);

  text-transform: uppercase;

  transition: var(--transition);
}

aside ul li a:hover {
  color: var(--main-color);
}

aside ul li a.target {
  color: var(--main-color);
}

aside ul li .adition-menu {
  height: 0;

  overflow: hidden;

  background-color: #f9f9f9;

  transition: var(--transition);
}

aside ul li:hover .adition-menu {
  height: 380px;

  overflow-y: scroll;

  border: 1px solid #ddd;

  border-top: none;
}

aside ul li .adition-menu ul {
  display: block;
}

aside ul li .adition-menu ul li {
  display: block;
}

aside ul li .adition-menu ul li a {
  display: inline-flex;

  justify-content: flex-start;

  align-items: center;

  width: 100%;

  min-width: 140px;

  margin: 0;

  padding: 1rem;

  text-transform: capitalize;
}

aside ul li .adition-menu ul li a span {
  display: inline-block;

  margin-right: 4px;

  font-size: 0.6rem;
}

aside ul li .adition-menu ul li:last-child a {
  border-bottom: none;
}

aside ul li a span {
  display: inline-block;

  font-size: 0.7rem;

  margin-right: 5px;
}

aside .logo img {
  width: 100%;

  max-width: 200px;

  object-fit: cover;

  margin-top: 1rem;
}

header {
  background-color: var(--header-bg-color);
  padding: 2.3rem 0;
}

header .container {
  width: 1300px;

  margin: 0 auto;

  padding: 0;

  display: grid;

  grid-template-columns: auto auto;

  justify-content: space-between;

  position: relative;
}

header .second_container {
  width: 1200px;
}

header .dashboard {
  width: 95%;

  grid-template-columns: auto;

  justify-content: flex-end;
}

header .dashboard .logo {
  display: none !important;
}

header .logo {
  display: flex;

  align-items: center;
}

header .logo img {
  max-width: 340px;
}

header .logo_ img {
  max-width: 290px;
}

header .container .wrapper {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

header .container .wrapper .icon__ a {
  color: #fff;

  background-color: var(--main-color);

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  overflow: hidden;

  margin-left: 0.8rem;
}

header .container .wrapper .icon__ a img {
  width: 40px;

  height: 40px;

  border-radius: 50%;

  object-fit: cover;
}

header .container .wrapper .bars {
  background-color: transparent;

  border: none;

  color: #333;

  font-size: 1.4rem;

  margin-left: 2rem;

  display: none;

  padding: 6px 16px;

  background-color: var(--main-color);

  color: #fff;

  text-align: center;

  background-size: 300% 100%;

  border-radius: 10px;
}

header .container .wrapper .bars:hover {
  background-position: 100% 0;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;
}

header .container .wrapper .menu {
  margin-right: 0.3rem;
}

header .container .wrapper .menu ul {
  display: inline-flex;
}

header .container .wrapper .menu ul li a {
  display: inline-flex;

  align-items: center;

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--header-menu-color);

  padding: 0.5rem 1.4rem;

  border-radius: 35px;

  text-transform: uppercase;

  letter-spacing: 0.03rem;

  transition: var(--transition);
}

header .container .wrapper .menu ul li a:hover {
  color: #fff;

  background-color: var(--main-color);
}

header .container .wrapper .menu ul li a.target {
  color: #fff;

  background-color: var(--main-color);
}

header .container .wrapper .menu ul li a span {
  font-size: 0.75rem;

  margin-left: 5px;
}

header .container .wrapper .menu ul li {
  position: relative;

  margin: 0 0.3rem;
}

header .container .wrapper .menu ul li .adition-menu {
  background-color: #fff;

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  /* animation: anim-1 0.3s ease-out; */

  display: none;

  z-index: 99999;

  border-radius: 14px;

  box-shadow: 0 0px 7px rgba(0, 0, 0, 0.1);

  padding: 1.5rem 1rem;
}

header .container .wrapper .menu ul li .adition-menu::before {
  content: "";

  position: absolute;

  top: -20px;

  left: 50%;

  margin: 0 0 0 -6px;

  width: 6px;

  height: 6px;

  transform: translateY(12px) translateX(50%) rotate(45deg);

  border-radius: 3px 0 0 0;

  background-image: linear-gradient(315deg, #fd7a6c -10%, #f5af19 100%);

  z-index: -1;

  display: none;
}

@keyframes anim-1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

header .container .wrapper .menu ul li:hover .adition-menu {
  display: block;

  min-width: 550px;
}

header .container .wrapper .menu ul li .adition-menu h3 {
  margin: 0.5rem 1rem 1.5rem 1rem;

  color: #0c5a9f;

  text-transform: uppercase;

  font-size: 1rem;

  position: relative;

  letter-spacing: 0.03rem;

  display: none;
}

header .container .wrapper .menu ul li:hover .adition-menu h3::before {
  content: "";

  width: 30px;

  height: 3px;

  position: absolute;

  bottom: -10px;

  left: 0;
}

header .container .wrapper .menu ul li .adition-menu ul {
  display: grid;

  grid-template-columns: 24% 24% 24% 24%;

  justify-content: space-between;

  row-gap: 1rem;
}

header .container .wrapper .menu ul li .adition-menu ul li {
  margin: 0;
}

header .container .wrapper .menu ul li .adition-menu ul li a {
  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  width: 100%;

  min-width: 100px;

  margin: 0;

  padding: 0;

  text-transform: capitalize;

  font-size: 0.9rem;

  color: var(--second-color);

  transition: 0.2s ease-out;
}

header .container .wrapper .menu ul li .adition-menu ul li a:hover {
  transform: translateY(2px);

  background-color: transparent;

  color: var(--main-color);
}

header .container .wrapper .menu ul li .adition-menu ul li a span {
  display: inline-block;

  margin-right: 6px;

  font-size: 0.6rem;
}

header .container .wrapper .menu ul li .adition-menu ul li:last-child a {
  border-bottom: none;
}

header .container .wrapper .icons ul {
  display: flex;

  justify-content: space-between;
}

header .container .wrapper .icons ul li .btn {
  background-color: #eee;

  border: none;

  font-size: 0.95rem;

  color: #0c5a9f;

  width: 35px;

  height: 35px;

  display: grid;

  place-content: center;

  border-radius: 50%;

  margin-left: 1.1rem;

  cursor: pointer;
}

header .container .wrapper .icons ul li .search {
  width: 450px;

  position: absolute;

  top: calc(100% + 0.33rem);

  right: 0;

  z-index: 9999;
}

header .container .wrapper .icons ul li form {
  width: 100%;

  background-color: #fff;

  padding-left: 1.2rem;

  grid-template-columns: auto;

  border-top-left-radius: 21px;

  border-top-right-radius: 21px;

  overflow: hidden;

  box-shadow: var(--dark-shadow);
}

header .container .wrapper .icons ul li .search .contain {
  position: relative;
}

header .container .wrapper .icons ul li .search .contain input {
  width: 100%;

  height: 58px;

  font-size: 1rem;

  border: none;
}

header .container .wrapper .icons ul li .search .contain button {
  height: 100%;

  padding: 0 22px;

  position: absolute;

  top: 0;

  right: 0;

  background-color: #7ee8fa;

  background-image: linear-gradient(315deg, #99e7f5 0%, #80ff72 74%);

  background-size: 300% 100%;

  color: #fff;

  border: none;

  font-size: 1.1rem;

  border-top-left-radius: 21px;

  border-bottom-left-radius: 21px;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;
}

header .container .wrapper .icons ul li .search .contain button:hover {
  background-position: 100% 0;
}

header .container .wrapper .icons ul li .show-result {
  width: 100%;

  margin-top: 0.33rem;

  padding: 0.5rem 0;

  background-color: #fff;

  box-shadow: var(--dark-shadow);

  border-bottom-left-radius: 21px;

  border-bottom-right-radius: 21px;

  overflow: hidden;
}

header .container .wrapper .icons ul li .show-result ul {
  display: block;
}

header .container .wrapper .icons ul li .show-result ul li {
  font-size: 0.95rem;

  margin: 0.2rem 0;
}

header .container .wrapper .icons ul li .show-result ul li a {
  display: block;

  text-transform: capitalize !important;

  color: var(--clr-grey-3);

  transition: var(--transition);

  padding: 0.5rem 1.2rem;
}

header .container .wrapper .icons ul li .show-result ul li a:hover {
  color: #0c5a9f;

  background-color: #eee;
}

main {
  background-color: #fff;

  z-index: 10;

  overflow: hidden !important;
}

.banner {
  width: 100%;

  position: relative;

  z-index: 5;
}

.banner .intro {
  width: 100%;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 45% 55%;

  justify-content: space-between;

  align-items: center;

  padding: 60px 0 4rem 0;
}

.banner .intro .map img {
  max-width: 115%;

  object-fit: cover;
}

.banner .intro .detail {
  color: #fff;

  margin-left: 17%;
}

.banner .intro .detail .company {
  text-transform: uppercase;

  letter-spacing: 0.1rem;

  font-weight: 600;

  font-size: 0.9rem;

  color: var(--main-color);

  display: flex;

  align-items: center;
}

.banner .intro .detail .company i {
  margin-right: 10px;

  font-size: 1rem;
}

.banner .intro .detail .h1 {
  font-weight: 800;

  font-size: 3rem;

  margin: 1rem 0 1.8rem 0;

  color: var(--second-color);

  text-transform: capitalize;

  position: relative;
}

.banner .intro .detail .h1 span.sp_1 {
  font-size: 2.1rem;

  font-weight: 500;
}

.banner .intro .detail .h1 span {
  position: relative;
}

.banner .intro .detail .h1 span img {
  position: absolute;

  bottom: 0;

  right: 0;

  width: 245px;

  object-fit: contain;
}

.banner .intro .detail p {
  font-size: 14px;

  max-width: 85%;

  margin-bottom: 4rem;

  text-align: justify;

  color: #7784a7;

  display: none;
}

.banner .intro .detail .search_bar {
  display: block;

  position: relative;

  height: 180px;

  margin-top: 50px;
}

.banner .intro .detail .search_bar img {
  position: absolute;

  top: -60px;

  right: 20%;

  max-width: 80px;

  object-fit: contain;
}

.banner .intro .detail .search_bar .search_ {
  width: 155%;

  height: 70px;

  position: absolute;

  display: grid;

  grid-template-columns: 38% 38% 21%;

  justify-content: space-between;

  padding: 10px 15px;

  gap: 10px;

  align-items: center;

  top: 10px;

  left: 0;

  background-color: #ffff;

  border-radius: 40px;

  box-shadow: rgb(170 170 236 / 20%) 0px 0px 15px 0px;
}

.banner .intro .detail .search_bar .search_ div {
  position: relative;
}

.banner .intro .detail .search_bar .search_ div i {
  position: absolute;

  top: 50%;

  left: 22px;

  font-size: 14px;

  transform: translateY(-50%);

  color: #838484;
}

.banner .intro .detail .search_bar .search_ div i.fa-search {
  position: relative;

  left: auto;

  top: auto;

  transform: none;

  color: #fff;
}

.banner .intro .detail .search_bar .search_ div select {
  width: 100%;

  height: 48px;

  font-weight: 500;

  font-size: 14px;

  padding: 0 0 0 44px;

  border-radius: 30px;

  border: 1px solid #c6c6c7;

  color: #898989;

  text-transform: capitalize;

  cursor: pointer;
}

.banner .intro .detail .search_bar .search_ div button {
  width: 100%;

  height: 48px;

  background-color: var(--main-color);

  color: #fff;

  border-radius: 30px;

  text-transform: uppercase;

  letter-spacing: 0.05rem;

  font-weight: 500;

  font-size: 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: var(--transition);
}

.banner .intro .detail .search_bar .search_ div button:hover {
  background-color: #33509f;
}

.banner .intro .detail .search_bar .search_ div button i {
  margin-left: 12px;

  margin-top: 2px;

  font-size: 14px;
}

.banner-2 {
  min-height: 320px;

  display: flex;

  align-items: center;

  background-size: cover;
}

.banner-2 .img img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  top: 0;

  left: 0;
}

.banner-2 .intro {
  width: 1200px;

  margin: 0 auto;

  padding: 0;

  display: grid;

  grid-template-columns: 100%;

  align-items: center;
}

.banner-2 .intro .detail {
  margin: 0 !important;
}

.banner-2 .intro .detail .company {
  color: var(--main-color);
}

.banner-2 .intro .detail h1 {
  color: #fff;

  text-transform: uppercase;

  font-size: 2rem;

  font-weight: 700;

  letter-spacing: 0.04rem;

  margin: 1.2rem 0 0 0;
}

.holder {
  width: 1200px !important;

  margin: 0 auto;
}

.h_error {
  text-align: center;

  font-size: 1.6rem;

  font-weight: 600;

  color: #717171;

  padding: 0.5rem 0;

  text-transform: capitalize;
}

.places {
  width: 100%;

  margin: 0 auto;

  padding: 9rem 0 3rem;

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

  background-size: cover;

  background-repeat: no-repeat;

  margin-top: 5rem;
}

.places_2 {
  background-image: none;

  margin-top: 0rem;
}

.places .title {
  text-align: center;
}

.places .title p {
  text-transform: uppercase;

  letter-spacing: 0.2rem;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--main-color);
}

.places .title p i {
  margin-right: 6px;
}

.places .title .h1 {
  font-size: 1.8rem;

  font-weight: 600;

  margin-top: 1.1rem;

  letter-spacing: 0.12rem;

  text-transform: capitalize;

  color: var(--second-color);
}

.places .cities {
  width: 1200px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: auto auto auto auto;

  justify-content: space-between;

  gap: 2rem;

  margin-top: 5rem;
}

.places .cities a {
  min-width: 205px;

  max-width: 330px;

  overflow: hidden;

  display: block;

  border-radius: 12px;

  position: relative;

  transform: translateY(90px);

  opacity: 0;

  transition: all 0.8s ease-out;
}

.places .cities a img {
  width: 100%;

  height: 100%;

  transition: var(--transition);
}

.places .cities a:hover img {
  transform: scale(1.15);
}

.places .cities a.active {
  transform: translateY(0px);

  opacity: 1;
}

.places .cities a p {
  position: absolute;

  left: 16px;

  bottom: 23px;

  color: #fcfeff;

  text-transform: capitalize;

  font-weight: 600;

  letter-spacing: 0.05rem;

  font-size: 1.05rem;
}

.places .cities a p span {
  font-weight: 400;
}

.presentation {
  margin-top: 8rem;

  padding: 1.5rem 0 2.8rem 0;

  display: grid;

  grid-template-columns: 49% 44%;

  justify-content: space-between;

  align-items: center;
}

.presentation {
  margin-top: 4rem;
}

.presentation-4 {
  margin-top: 8rem;
}

.reveal-1 {
  transition: all 0.6s ease-out;

  opacity: 0;
}

.reveal-0 {
  transition: all 0.9s ease-out;

  opacity: 0;
}

.reveal-1-1 {
  transform: translateX(-130px);
}

.reveal-1-2 {
  transform: translateX(130px);
}

.reveal-0.active {
  transform: translateX(0px);

  opacity: 1;
}

.reveal-1.active {
  transform: translateX(0px);

  opacity: 1;
}

.presentation article .company {
  text-transform: uppercase;

  letter-spacing: 0.18rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--main-color);
}

.presentation article .h1 {
  font-size: 1.7rem;

  font-weight: 600;

  margin: 0.9rem 0 1.7rem 0;

  line-height: 1.5;

  letter-spacing: 0.01rem;

  color: var(--second-color);

  text-transform: capitalize;
}

.presentation-3 article .h1 {
  font-size: 2rem;

  text-transform: uppercase;
}

.presentation article p {
  color: #6479b3;

  font-size: 0.9rem;

  font-weight: 400;

  text-align: justify;

  margin-bottom: 1rem;
}

 

.presentation article p a {
  color: #eb8b18;
}

.presentation article p span {
  font-weight: 600;
}

.presentation form {
  margin-top: 2rem;
}

.presentation form .row {
  display: grid;

  grid-template-columns: 48% 48%;

  justify-content: space-between;

  align-items: center;

  row-gap: 1rem;
}

.presentation form .row input,
.presentation form select,
.presentation form label,
.presentation form input {
  width: 100%;

  height: 45px;

  border: 1px solid #ced7f1;

  border-radius: 16px;

  padding-left: 20px;

  font-weight: 500;

  font-size: 0.85rem;
}

.presentation form .col {
  position: relative;

  margin-top: 1rem;

  display: none;
}

.presentation form .col i {
  position: absolute;

  top: 50%;

  right: 12px;

  transform: translateY(-46%);

  color: #748fc3;

  cursor: pointer;
}

.presentation form input::placeholder {
  color: #748fc3;

  text-transform: capitalize;
}

.presentation form input[type="file"] {
  display: none;
}

.presentation form select {
  margin: 1rem 0;

  color: #748fc3;

  text-transform: capitalize;
}

.presentation form label {
  display: block;

  color: #0c5a9f;

  font-weight: 600;

  margin: 1rem 0;

  display: flex;

  align-items: center;

  text-transform: capitalize;

  cursor: pointer;

  transition: var(--transition);
}

.presentation form label i {
  margin-right: 7px;

  font-size: 0.95rem;

  color: var(--main-color);
}

.presentation form label:hover {
  background-color: #0c5a9f;

  color: #fff;
}

.presentation form button {
  width: 100%;

  text-align: center;

  color: #fff;

  font-size: 16px;

  font-weight: 500;

  padding: 14px 30px;

  border-radius: 19px;

  text-transform: uppercase;

  background: var(--main-color);

  transition: var(--transition);

  margin-top: 0.2rem;

  letter-spacing: 0.04rem;
}

.presentation form button:hover {
  background-color: var(--second-color);
}

.presentation form button:active {
  transform: translateY(5px);
}

.presentation form button i {
  margin-left: 6px;

  color: #FFF;

  position: relative;

  top: 1px;

  transition: var(--transition);
}

.presentation form button:hover i {
  color: #fff;
}

p.bold_p {
  font-weight: 600 !important;
}

.presentation .images img {
  width: 100%;
}

.questions {
  width: 100%;

  margin: 0 auto;

  padding: 2rem 0;

  display: grid;

  grid-template-columns: 100%;

  row-gap: 4rem;
}

.questions .question {
  font-family: "poppins";

  background-color: var(--second-color);

  padding: 2.8rem 0 2.3rem 0;

  transform: translateY(100px);

  opacity: 0;

  transition: all 0.6s ease-out;

  position: relative;
}

.questions .question.active {
  transform: translateY(0px);

  opacity: 1;
}

.questions .question .content {
  width: 83%;

  margin: 0 auto;

  color: #fff;

  position: relative;
}

.questions .question .content span {
  width: 38px;

  height: 38px;

  display: grid;

  place-content: center;

  font-size: 0.95rem;

  color: #ffff;

  border: 1px solid #fff;

  background-color: transparent;

  border-radius: 50%;

  position: absolute;

  top: 0;

  left: -60px;
}

.questions .question .line_ {
  position: absolute;

  top: 0;

  left: 0;

  background-color: #fff;

  width: 7px;

  height: 100%;

  border-left: 2px solid #3e6aab;
}

.questions .question .content h2 {
  font-size: 1.2rem;

  font-weight: 500;

  margin-bottom: 1.2rem;

  display: inline-flex;

  align-items: center;
}

.questions .question .content p {
  text-align: justify;

  font-size: 0.9rem;

  font-weight: 300;

  margin-bottom: 1rem;
}

.questions .question .content p:last-of-type {
  margin-bottom: 0;
}

.workers {
  padding: 6rem 0 0 0;

  transform: translateY(100px);

  opacity: 0;

  transition: all 0.6s ease-out;

  position: relative;
}

.workers.active {
  transform: translateY(0px);

  opacity: 1;
}

.workers .title {
  text-align: center;
}

.workers .title .company {
  text-transform: uppercase;

  letter-spacing: 0.18rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--main-color);
}

.workers .title .h1 {
  font-size: 1.8rem;

  font-weight: 600;

  margin-top: 1.1rem;

  letter-spacing: 0.12rem;

  text-transform: capitalize;

  color: var(--second-color);
}

.workers .list_workers {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 0px 60px;
  margin-top: 5rem;
}

.workers .loader {
  height: 100px;
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform: translateY(-80px);
}

.workers .loader img {
  width: 400px;
  object-fit: cover;
}

.workers .list_workers .worker {
  position: relative;
  width: 30%;
}

.workers .list_workers .worker img {
  width: 100%;

  max-height: 240px;

  min-height: 240px;

  border-radius: 6px;

  object-fit: cover;
}

.workers .list_workers .worker article {
  background-color: #fff;

  border-radius: 10px;

  box-shadow: rgb(170 170 236 / 20%) 0px 0px 15px 0px;

  width: 91%;

  transform: translate(17%, -85px);
}

.workers .list_workers .worker article .top {
  padding: 18px 20px 12px 20px;
}

.workers .list_workers .worker article .top .h3 {
  display: flex;

  justify-content: space-between;

  align-items: center;

  color: var(--main-color);

  font-size: 1.05rem;

  font-weight: 700;

  text-transform: capitalize;
}

.workers .list_workers .worker article .top .h3 .fa-user {
  font-size: 0.85rem;

  color: var(--main-color);

  margin-right: 12px;

  position: relative;

  top: -2px;
}

.workers .list_workers .worker article .top .h3 .stars {
  display: grid;

  grid-template-columns: auto auto auto auto auto;

  justify-content: flex-end;

  align-items: center;

  font-size: 0.78rem;

  column-gap: 0.1rem;

  color: #f6a038;
}

.workers .list_workers .worker article .top .h4 {
  margin: 0.8rem 0 0.9rem 0;

  font-size: 0.8rem;

  text-transform: uppercase;

  font-weight: 600;

  color: var(--second-color);

  letter-spacing: 0.01rem;
}

.workers .list_workers .worker article .top p {
  font-size: 13px;

  color: #6679ad;
}

.workers .list_workers .worker article .bottom {
  border-top: 1px solid #efefef;
}

.workers .list_workers .worker article .bottom div {
  padding: 14px 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.workers .list_workers .worker article .bottom div a {
  font-size: 0.77rem;

  font-weight: 600;

  color: var(--second-color);

  text-transform: uppercase;

  transition: var(--transition);
}

.workers .list_workers .worker article .bottom div a:hover {
  color: var(--main-color);
}

.workers .list_workers .worker article .bottom div a i {
  color: var(--main-color);

  margin-right: 8px;
}

.responses {
  width: 100%;

  margin: 0 auto;

  padding: 1rem 0;
}

.responses .title {
  text-align: center;
}

.responses .title p {
  text-transform: uppercase;

  letter-spacing: 0.3rem;

  font-size: 1rem;

  font-weight: 500;

  color: #0c5a9f;
}

.responses .title h1 {
  font-family: "poppins";

  font-size: 1.7rem;

  line-height: 1.45;

  font-weight: 600;

  margin-top: 0.8rem;

  letter-spacing: 0.12rem;

  color: #222323;
}

.responses .three-columns {
  padding: 3.8rem 0;
}

.responses .three-columns .column ul li {
  transition: all 0.5s ease-out;

  transform: translateY(100px);

  opacity: 0;

  visibility: hidden;
}

.responses .three-columns .column ul li.active {
  transform: translateY(0px);

  opacity: 1;

  visibility: visible;
}

.responses .three-columns .column ul li .QST {
  padding: 15px;

  border-bottom: 2px solid #efeef1;

  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;
}

.responses .three-columns .column ul li .QST h3 {
  font-size: 1.3rem;

  line-height: 1.5;

  color: #1d6e78;

  transition: var(--transition);

  text-transform: uppercase;
}

.responses .three-columns .column ul li .QST:hover h3 {
  color: #102a42;
}

.responses .three-columns .column ul li .QST span {
  color: #1d6e78;

  display: inline-block;

  transition: var(--transition);
}

.responses .three-columns .column ul li .QST:hover span {
  color: #102a42;
}

.responses .three-columns .column ul li .response {
  padding: 0 15px;

  height: 0;

  max-height: 400px !important;

  overflow: hidden;

  transition: var(--transition);
}

.responses .three-columns .column ul li .response .res {
  padding: 2rem 0;
}

.responses .three-columns .column ul li .response p {
  font-size: 1.1rem;

  color: #6a7983;

  margin-bottom: 1rem;
}

/* .responses .three-columns .column ul li:hover .response {

  display: block;

} */

.avis {
  background-color: #fff;

  padding: 5rem 0;

  transform: translateY(90px);

  opacity: 0;

  transition: all 0.8s ease-out;
}

.avis.active {
  transform: translateY(0px);

  opacity: 1;
}

.avis .avis-container {
  width: 100%;

  margin: 0 auto;
}

.avis .avis-container .title {
  text-align: center;
}

.avis .avis-container .title span {
  text-transform: uppercase;

  letter-spacing: 0.1rem;

  font-weight: 600;

  font-size: 0.9rem;

  color: var(--main-color);

  display: flex;

  align-items: center;

  justify-content: center;
}

.avis .avis-container .title span i {
  color: var(--main-color);

  margin-right: 10px;

  font-size: 1.15rem;
}

.avis .avis-container .title .h1 {
  font-size: 1.8rem;

  font-weight: 600;

  margin-top: 1.1rem;

  letter-spacing: 0.12rem;

  text-transform: uppercase;

  color: #33509f;
}

.avis .avis-list {
  margin: 2rem 0 0 0;
}

.avis .avis-list .avi {
  background-color: transparent;

  height: auto;

  border-radius: 35px;

  padding: 2.5rem 1.7rem 2.3rem 1.7rem;

  transition: var(--transition);

  margin: 0 0.3rem;
}

.slick-list {
  padding: 2rem 0 !important;
}

.avi.slick-slide.slick-current.slick-active.slick-center {
  box-shadow: rgba(131, 131, 228, 0.2) 0px 7px 22px 0px;
}

.avis .avis-list .avi .head {
  display: grid;

  grid-template-columns: auto 65% auto;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1.5rem;
}

.avis .avis-list .avi .head img {
  max-width: 65px;

  margin-right: 1rem;

  border-radius: 50%;
}

.avis .avis-list .avi .head h2 {
  font-size: 1.05rem;

  font-weight: 600;

  margin-bottom: 0.4rem;

  color: #5286bf;

  letter-spacing: 0.05rem;
}

.avis .avis-list .avi .head h2 span {
  text-transform: uppercase;
}

.avis .avis-list .avi .head p {
  font-size: 0.8rem;

  color: #f79014;

  font-family: "Poppins";

  font-weight: 500;

  letter-spacing: 0.04rem;
}

.avis .avis-list .avi .head i {
  font-size: 2.2rem;

  color: #b9d2fa;
}

.avis .avis-list .avi .body p {
  max-width: 90%;

  font-family: "Poppins";

  font-size: 12.5px;

  line-height: 1.6 !important;

  text-align: justify;

  word-spacing: -2px;

  color: #6679ad;

  font-weight: 400;

  margin: 0;
}

.news {
  width: 100%;

  margin: 0 auto;

  padding: 2rem 0 5rem 0;
}

.news .title {
  text-align: center;
}

.news .title p {
  text-transform: uppercase;

  letter-spacing: 0.3rem;

  font-size: 1rem;

  font-weight: 500;

  color: #0c5a9f;
}

.news .title h1 {
  font-family: "Playfair Display";

  font-size: 2.4rem;

  margin-top: 0.8rem;

  letter-spacing: 0.12rem;

  color: #1d6e78;
}

.news .blogs {
  display: grid;

  grid-template-columns: auto auto auto;

  gap: 1.9rem;

  justify-content: space-between;

  margin-top: 3rem;
}

.news .blogs .column {
  transition: all 0.3s ease-out;

  transform: translateY(120px);

  opacity: 0;
}

.news .blogs .column.active {
  transform: translateY(0px);

  opacity: 1;
}

.news .blogs .column .content {
  box-shadow: 0px 0px 24px 0px #e3e3e3;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  background-color: #fff;
}

.news .blogs .column .content img {
  width: 100%;

  max-width: 100%;
}

.news .blogs .column .content .detail {
  padding: 1.4rem 0.8rem;
}

.news .blogs .column .content .detail h3 {
  font-family: "Playfaire Display";

  font-size: 1.3rem;

  color: #1d6e78;

  margin-bottom: 0.8rem;
}

.news .blogs .column .content .detail p {
  text-align: justify;

  font-size: 0.8rem;

  font-weight: 500;

  color: #6a7983;

  margin-bottom: 0.8rem;
}

.news .blogs .column .content .detail a {
  font-size: 0.85rem;

  letter-spacing: 0.04rem;

  font-weight: 600;

  color: #0c5a9f;

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;
}

.news .blogs .column .content .detail a span {
  display: inline-block;

  margin-left: 4px;

  font-size: 0.9rem;
}

/* second page */

.pharmacies {
  display: grid;

  grid-template-columns: auto auto auto;

  justify-content: space-between;

  padding: 7rem 0;
}

.pharmacies .column {
  background-color: #0c5a9f;

  border-top-right-radius: 40px;

  border-bottom-left-radius: 40px;

  padding: 1.5rem 1.7rem;

  text-align: center;

  color: #fff;

  position: relative;
}

.pharmacies .column img {
  max-width: 84px;

  object-fit: cover;

  position: absolute;

  bottom: 0;

  right: 0;

  z-index: 1;
}

.pharmacies .column .content {
  z-index: 2;

  position: relative;
}

.pharmacies .column h3 {
  font-size: 1.3rem;

  font-weight: 600;

  letter-spacing: 0.06rem;
}

.pharmacies .column p {
  margin: 0.7rem 0 1.5rem 0;

  font-size: 1.35rem;

  letter-spacing: 0.06rem;
}

.pharmacies .column .buttons {
  display: grid;

  grid-template-columns: auto auto;

  justify-content: space-between;

  column-gap: 2rem;
}

.pharmacies .column .buttons button {
  border: none;

  background-color: #fff;

  color: #0c5a9f;

  font-size: 0.65rem;

  font-weight: 700;

  padding: 0.55rem 1.4rem;

  border-radius: 7px;

  text-transform: uppercase;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

  transition: var(--transition);
}

.pharmacies .column .buttons button:hover {
  background-color: var(--main-color);

  color: #fff;
}

.pharmacies .column .buttons button span {
  margin-right: 7px;

  font-size: 0.75rem;
}

.quartiers {
  padding: 5rem 0 0rem 0;
}

.quartiers .title {
  text-align: center;

  margin-bottom: 2.5rem;
}

.quartiers .title .sp_2 {
  text-transform: uppercase;

  letter-spacing: 0.18rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--main-color);
}

.quartiers .title .sp_2 i {
  font-size: 0.95rem;
}

.quartiers .title .h1 {
  font-size: 1.9rem;

  font-weight: 600;

  margin: 1.2rem 0 2rem 0;

  letter-spacing: 0.12rem;

  color: var(--second-color);
}

.quartiers .title .h1 span {
  text-transform: capitalize;
}

.quartiers .title p {
  font-size: 14.5px;

  font-weight: 500;

  color: var(--second-color);

  max-width: 800px;

  margin: 0 auto;
}

.workers_ville {
  padding: 0 !important;
}

.quartiers .pharmacie-list .column {
  text-align: left !important;

  padding: 1.92rem 2rem;

  min-width: 100%;

  border-radius: 0;

  border-top-right-radius: 50px;

  border-bottom-left-radius: 50px;

  background-color: #0c5a9f;

  color: #fff;

  position: relative;
}

.quartiers .pharmacie-list img {
  width: 110px;

  max-width: 110px;

  object-fit: cover;

  position: absolute;

  bottom: 0;

  right: 0;

  z-index: 1;
}

.quartiers .rows a {
  display: block;

  transform: translateY(80px);

  opacity: 0;
}

.quartiers .rows a.active {
  transform: translateY(0);

  opacity: 1;
}

.quartiers .rows .column:hover {
  background-color: #d1f5e8;

  transform: translateY(4px);
}

.quartiers .pharmacie-list .column:hover {
  background-color: #2dd894;
}

.quartiers .rows .column h2 {
  font-size: 1.6rem;

  font-weight: 600;

  letter-spacing: 0.06rem;

  text-transform: capitalize;
}

.quartiers .pharmacie-list .column h2 {
  margin-bottom: 1.15rem;

  font-size: 1.3rem;

  letter-spacing: 0.02rem;

  position: relative;

  z-index: 2;
}

.quartiers .rows .column p {
  margin-top: 0.5rem;

  font-size: 0.95rem;

  font-weight: 500;

  text-transform: capitalize;

  color: #0c5a9f;
}

.quartiers .pharmacie-list .column p {
  display: grid;

  grid-template-columns: 30px auto;

  margin-top: 0.6rem;

  font-size: 0.92rem;

  color: #fff;

  line-height: 1.5;

  position: relative;

  z-index: 2;
}

.quartiers .pharmacie-list .column p .icon {
  font-size: 1.2rem;

  color: #fff;

  display: flex;
}

.fa-sun {
  color: #f8f811;

  margin-right: 3px;
}

.fa-moon {
  color: #000;

  margin-right: 3px;
}

.quartiers .pharmacie-list .column p .icon i {
  position: relative;

  top: 3px;
}

.quartiers .rows .column:hover p {
  color: #444;
}

.quartiers .pharmacie-list .column:hover p {
  color: #fff;
}

.quartiers .links {
  display: flex;

  align-items: center;

  margin: 4rem 0 2rem 0;

  padding-bottom: 0.7rem;

  border-bottom: 1px solid #ddd;
}

.quartiers .links a {
  font-size: 0.97rem;

  font-weight: 500;

  color: #4e4e4e;

  text-transform: capitalize;

  transition: all 0.2s ease-out;

  text-align: center;
}

.quartiers .links a:hover {
  color: #0c5a9f;
}

.quartiers .links span {
  display: flex;

  align-items: center;

  font-size: 0.7rem;

  color: #000;

  margin: 0 0.6rem;

  position: relative;

  top: 1px;
}

.quartiers .single-pharmacie {
  padding: 0rem 0 4rem 0;

  display: grid;

  grid-template-columns: 59% 39%;

  row-gap: 1.5rem;

  justify-content: space-between;

  opacity: 0;

  transform: translateY(80px);

  transition: all 0.4s ease-out;
}

.quartiers .single-pharmacie.active {
  transform: translateY(0px);

  opacity: 1;
}

.quartiers .single-pharmacie .column {
  min-height: 450px;
}

.quartiers .single-pharmacie .column .card {
  background-color: #fff;

  min-height: 100%;

  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
}

.quartiers .single-pharmacie .column .card .content {
  width: 90%;

  margin: 0 auto;

  padding: 3rem 0;
}

.quartiers .single-pharmacie .column .card .content h2 {
  color: var(--clr-grey-4);

  margin-bottom: 2.2rem;

  display: grid;

  grid-template-columns: auto auto;

  justify-content: space-between;

  align-items: center;
}

.quartiers .single-pharmacie .column .card .content h2 a {
  display: grid;

  grid-template-columns: 23px auto;

  align-items: center;

  font-size: 0.97rem;

  font-weight: 500;

  color: var(--clr-grey-1);

  transition: var(--transition);
}

.quartiers .single-pharmacie .column .card .content h2 a span {
  color: #0c5a9f;

  font-size: 0.9rem;
}

.quartiers .single-pharmacie .column .card .content h2 a:hover {
  color: #0c5a9f;
}

.quartiers .single-pharmacie .column .card .content p {
  display: grid;

  grid-template-columns: 30px auto;

  margin-bottom: 1.1rem;

  font-size: 0.92rem;

  font-weight: 500;

  line-height: 1.5;

  color: var(--clr-grey-2);
}

.quartiers .single-pharmacie .column .card .content .make-call:hover span {
  transition: var(--transition);
}

.quartiers .single-pharmacie .column .card .content .make-call:hover span {
  transform: rotate(35deg) translateY(2px);
}

.quartiers .single-pharmacie .column .card .content p .icon {
  font-size: 1.2rem;

  color: #0c5a9f;

  display: flex;
}

.quartiers .single-pharmacie .column .card .content p .icon i {
  position: relative;

  top: 3.5px;
}

.quartiers .single-pharmacie .column .card .content .hr-1 {
  border: none;

  border-top: 1px solid #ddd;

  width: 100%;

  margin-bottom: 1rem;
}

.quartiers .single-pharmacie .column .card .content .stars {
  display: flex;

  align-items: center;

  margin-top: 0.5rem;
}

.quartiers .single-pharmacie .column .card .content .stars a i {
  display: inline-block;

  margin: 0;
}

.quartiers .single-pharmacie .column .card .content .stars a {
  display: inline-block;

  margin-right: 0.5rem;

  color: var(--clr-grey-2);

  font-size: 0.92rem;

  font-weight: 500;
}

.quartiers .single-pharmacie .column .card .content .stars a:last-child {
  transition: var(--transition);
}

.quartiers .single-pharmacie .column .card .content .stars a:last-child:hover {
  color: #0c5a9f;
}

.quartiers .single-pharmacie .column .card .content .more {
  margin-top: 2rem;

  display: grid;

  grid-template-columns: auto auto auto;

  gap: 0.8rem;

  justify-content: space-between;
}

.quartiers .single-pharmacie .column .card .content .more a {
  font-size: 0.86rem;

  border: none;

  color: var(--clr-grey-4);

  background-color: #0c5a9f;

  color: #fff;

  border-radius: 9px;

  padding: 9px 12px;

  text-align: center;

  transition: all 0.2s ease-out;
}

.quartiers .single-pharmacie .column .card .content .more button {
  font-size: 0.86rem;

  border: none;

  color: var(--clr-grey-4);

  background-color: #0c5a9f;

  color: #fff;

  border-radius: 9px;

  padding: 9px 12px;

  text-align: center;

  transition: all 0.2s ease-out;
}

.quartiers .single-pharmacie .column .card .content .more a:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.quartiers .single-pharmacie .column .card .content .more button:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.quartiers .single-pharmacie .column .card .content .more a span {
  font-size: 0.8rem;

  margin-right: 4px;
}

.create-avis {
  padding: 2rem 0 7rem 0;
}

.create-avis .title {
  text-align: center;
}

.create-avis .title p {
  text-transform: uppercase;

  letter-spacing: 0.3rem;

  font-size: 1rem;

  font-weight: 500;

  color: #0c5a9f;
}

.create-avis .title h1 {
  font-family: "Playfair Display";

  font-size: 2.4rem;

  margin-top: 0.8rem;

  letter-spacing: 0.12rem;

  color: #1d6e78;

  text-transform: capitalize;
}

.dark-avis {
  width: 100%;

  height: 100vh;

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

  position: fixed;

  top: 0;

  left: 0;

  z-index: 999;
}

.popup-form {
  width: 750px;

  border-radius: 18px;

  background-color: #eff8f4;

  position: fixed;

  top: 15%;

  left: 50%;

  margin-top: 30px;

  transform: translate(-50%, -15%) scale(0);

  box-shadow: var(--light-shadow);

  overflow: hidden !important;

  z-index: -1;

  visibility: hidden;
}

.popup-form.active {
  transition: all 0.4s ease-out;

  transform: translate(-50%, -15%) scale(1);

  z-index: 9999;

  visibility: visible;
}

.popup-form .head {
  background-color: #5be9b0;

  padding: 1.9rem 2rem;

  border-bottom: 2px solid #0c5a9f;
}

.popup-form .head h3 {
  font-size: 1.1rem;

  text-transform: capitalize;

  color: var(--clr-grey-3);

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.popup-form .head h3 span {
  cursor: pointer;

  display: inline-block;
}

.popup-form form {
  width: 90%;

  margin: 2rem auto;

  max-height: 580px;

  overflow-y: auto;

  overflow-x: hidden;
}

/* width */

.popup-form form::-webkit-scrollbar {
  width: 8px;
}

/* Track */

.popup-form form::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */

.popup-form form::-webkit-scrollbar-thumb {
  background: #888;

  border-radius: 15px;
}

/* Handle on hover */

.popup-form form::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.popup-form form .row {
  display: grid;

  grid-template-columns: 48% 48%;

  justify-content: space-between;

  row-gap: 1rem;

  margin: 1rem 0 0.7rem 0;
}

.popup-form form .last {
  grid-template-columns: 100%;
}

.popup-form form .row .column label {
  display: block;

  font-size: 0.95rem;

  line-height: 1.5;

  color: var(--clr-grey-2);

  margin-bottom: 0.3rem;

  text-transform: capitalize;
}

.popup-form form .row .column input,
textarea {
  width: 100%;

  height: 40px;

  border: none;

  background-color: #fff !important;

  border-radius: 5px;

  display: block;

  padding-left: 12px;
}

.popup-form form .row .column textarea {
  height: 150px;

  min-height: 150px;

  max-height: 150px;

  width: 100%;

  min-width: 100%;

  resize: none;

  padding-top: 12px;

  margin-top: 0.6rem;
}

.popup-form form .row .col-6 {
  display: flex;
}

.popup-form form .row .col-6 input {
  display: inline-block;

  width: 15px;

  min-width: 15px;

  height: 15px;

  min-height: 15px;

  cursor: pointer;
}

.popup-form form .row .col-6 label {
  font-size: 0.8rem;

  display: inline-block;

  margin-left: 8px;

  line-height: 1.5;

  text-align: justify;
}

.popup-form form .row .column input::placeholder,
textarea::placeholder {
  font-size: 0.8rem;
}

.popup-form form .btn {
  text-align: left;

  margin: 1rem 0;
}

.popup-form form .btn button {
  padding: 10px 26px;

  font-size: 0.86rem;

  border: none;

  color: var(--clr-grey-4);

  background-color: #0c5a9f;

  color: #fff;

  border-radius: 9px;

  text-align: center;

  transition: all 0.2s ease-out;
}

.popup-form form #submit {
  background-color: var(--main-color);
}

.popup-form form .mot-passe-oublier {
  text-align: right;
}

.popup-form form .create-account {
  text-align: left;
}

.popup-form form .mot-passe-oublier button {
  background-color: transparent;

  padding: 0;

  margin: 0;

  color: var(--clr-grey-2);
}

.popup-form form .mot-passe-oublier button:hover {
  box-shadow: none;

  color: #0c5a9f;
}

.popup-form .etapes {
  width: 60%;

  margin: 2rem auto 0 auto;

  display: flex;

  justify-content: space-between;

  position: relative;
}

.popup-form .etapes button {
  border-radius: 50%;

  background-color: #eff8f4;

  border: 1px solid #ddd;

  color: var(--clr-grey-1);

  padding: 0;

  margin: 0;

  width: 36px;

  height: 36px;

  display: grid;

  place-content: center;

  position: relative;

  z-index: 5;
}

.popup-form .etapes .line-to {
  width: 50%;

  height: 6.5px;

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  background-color: #eff8f4;

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  z-index: 1;
}

.popup-form .etapes .to-2 {
  left: auto;

  right: 0 !important;
}

.popup-form .etapes .complited {
  background-color: #0c5a9f;

  border-color: #0c5a9f;

  color: #fff;
}

.popup-form .tasks {
  width: 67%;

  margin: 1rem auto 2rem auto;

  display: flex;

  justify-content: space-between;
}

.popup-form .tasks h4 {
  font-size: 0.9rem;

  color: var(--clr-grey-3);

  text-align: center;
}

.popup-form .hide-btn {
  display: none;
}

.create-avis .form-avis {
  margin-top: 4rem;

  background-color: #fff;

  border-radius: 5px;

  box-shadow: var(--light-shadow);

  padding: 1.8rem 1.5rem;

  transform: translateY(100px);

  opacity: 0;

  transition: all 0.6s ease-out;
}

.create-avis .form-avis.active {
  transform: translateY(0px);

  opacity: 1;
}

.create-avis .form-avis .content {
  background-color: #f9f9f9;

  border-radius: 5px;

  display: grid;

  grid-template-columns: 46% 1px 46%;

  justify-content: space-between;

  padding: 2rem;
}

.create-avis .form-avis .content .line {
  background-color: #ddd;
}

.ele_p .avis__ form .rate {
  display: flex;

  align-items: center;

  margin: 1.4rem 0;
}

.ele_p .avis__ form .rate-2 {
  max-width: 350px;

  display: grid;

  grid-template-columns: auto 120px;

  justify-content: space-between;
}

.ele_p .avis__ form .rate p {
  margin-right: 13px;

  font-weight: 500;

  font-size: 0.93rem;

  text-transform: capitalize;
}

.ele_p .avis__ form .rate .stars {
  position: relative;

  top: -1px;
}

.ele_p .avis__ form .rate label {
  cursor: pointer;

  color: var(--main-color);
}

.ele_p .avis__ form .rate .good-bad {
  display: flex;

  align-items: center;

  position: relative;

  top: -7px;
}

.ele_p .avis__ form .rate .good-bad label {
  display: inline-block;

  cursor: pointer;

  font-size: 1.9rem;

  margin-right: 10px;

  color: #aaa;
}

.ele_p .avis__ form .rate .good-bad label:first-child {
  color: #0c5a9f;
}

.ele_p .avis__ form .rate .good-bad label:hover {
  color: #0c5a9f;
}

.ele_p .avis__ form .comment p {
  margin-bottom: 0.5rem;

  font-size: 0.8rem;

  font-weight: 500;
}

.ele_p .avis__ form .comment p a {
  text-decoration: underline;

  color: #000;
}

.ele_p .avis__ form .comment textarea {
  width: 100%;

  max-width: 100%;

  height: 110px;

  min-height: 110px;

  max-height: 110px;

  resize: none;

  background-color: #fff;

  border: 1px solid #ddd;

  padding: 8px;
}

.ele_p .avis__ form .comment textarea::placeholder {
  font-weight: 400;

  font-style: italic;

  text-transform: capitalize;
}

.ele_p .avis__ form button {
  padding: 11px 18px;

  background-color: #0c5a9f;

  border: none;

  border-radius: 8px;

  text-transform: uppercase;

  font-weight: 500;

  color: #fff;

  margin-top: 0.8rem;

  transition: var(--transition);
}

.ele_p .avis__ form button:hover {
  background-color: var(--main-color);
}

.ele_p .avis__ form .btn-2 {
  display: none !important;
}

.ele_p .avis__ form h3 {
  font-size: 1.05rem;

  color: var(--clr-grey-3);

  margin-bottom: 1.3rem;
}

.ele_p .avis__ form .hr-2 {
  border: none;

  border-top: 1px solid #ededed;

  width: 100%;

  margin: 0.5rem 0 0.9rem 0;
}

.ele_p .avis__ form span {
  font-size: 0.85rem;
}

.ele_p .avis__ form ul {
  display: flex;

  margin-top: 1rem;
}

.ele_p .avis__ form ul li {
  margin-right: 12px;

  font-size: 1.55rem;
}

.user_icon {
  position: fixed;

  top: 35px;

  right: 50px;

  width: 80px;

  height: 80px;

  background-color: var(--main-color);

  border-radius: 50%;

  transition: var(--transition);

  z-index: 99;

  display: none !important;
}

.user_icon:hover {
  box-shadow: rgba(255, 161, 73, 0.4) 0px -2px 20px 0px;
}

.user_icon img {
  width: 100%;

  height: 100%;

  padding: 3px;

  border-radius: 50%;

  object-fit: cover;
}

.ele_p {
  margin: 8rem 0 3rem 0;

  display: grid;

  grid-template-columns: 30% 66.5%;

  row-gap: 2rem;

  column-gap: 1rem;

  justify-content: space-between;
}

.ele_p .side .img img {
  width: 100%;

  max-height: 300px;

  border-radius: 6px;

  object-fit: cover;
}

.ele_p .side .img {
  position: relative;
}

.ele_p .side .img .stars {
  display: grid;

  grid-template-columns: auto auto auto auto auto;

  justify-content: flex-end;

  align-items: center;

  font-size: 0.78rem;

  column-gap: 0.1rem;

  color: #f6a038;

  position: absolute;

  top: 10px;

  right: 10px;

  z-index: 3;
}

.ele_p .side .data .h1 {
  font-size: 1.5rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: var(--main-color);

  margin: 0.8rem 0;

  margin-bottom: 1.1rem;
}

.ele_p .side .data .h2 {
  font-size: 1.2rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: #333;

  margin: 2.5rem 0;

  margin-bottom: 1.5rem;
}

.ele_p .side .data p {
  font-size: 14px;

  color: #6679ad;
}

.ele_p .side .data p.h4 {
  margin: 0 0 0.9rem 0;

  font-size: 0.9rem;

  text-transform: uppercase;

  font-weight: 600;

  color: var(--second-color);

  letter-spacing: 0.01rem;
}

.ele_p .side .data .phone {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 1rem;
}

.ele_p .side .data .phone a {
  font-size: 0.85rem;

  font-weight: 600;

  color: var(--second-color);

  text-transform: uppercase;

  transition: var(--transition);
}

.ele_p .side .data .phone a:hover {
  color: var(--main-color);
}

.ele_p .side .data .phone a i {
  color: var(--main-color);

  margin-right: 8px;
}

.ele_p .side .data .authers {
  display: grid;

  grid-template-columns: 100%;

  justify-content: center;

  gap: 1rem;

  margin-top: 1rem;
}

.ele_p .side .data .authers .one {
  display: grid;

  grid-template-columns: 30% 66.5%;

  justify-content: space-between;
}

.ele_p .side .data .authers .one .img img {
  width: 100%;

  object-fit: cover;
}

.ele_p .side .data .authers .one .h3 {
  font-size: 1rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: var(--second-color);

  margin: 0;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;
}

.ele_p .side .data .authers .one .h3 .stars {
  display: grid;

  grid-template-columns: auto auto auto auto auto;

  justify-content: flex-end;

  align-items: center;

  font-size: 0.75rem;

  column-gap: 0.1rem;

  color: #f6a038;

  position: relative;

  top: 3px;
}

.ele_p .side .data .authers .one p {
  font-size: 13px;

  color: #6679ad;

  margin-top: 0.5rem;
}

.ele_p .avis__ {
  display: flex;

  flex-direction: column;

  row-gap: 1.5rem;
}

.ele_p .avis__ .avi__ {
  width: 100%;

  background-color: #fff;

  box-shadow: rgb(149 157 165 / 15%) 0px 0px 14px;

  padding: 0 0 3rem 0;

  border-radius: 10px;

  padding: 1.5rem;
}

.ele_p .avis__ .avi__ .h3 {
  font-size: 1.1rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: #33509f;

  margin: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.ele_p .avis__ .avi__ .h3 .stars {
  display: grid;

  grid-template-columns: auto auto auto auto auto;

  justify-content: flex-end;

  align-items: center;

  font-size: 0.78rem;

  column-gap: 0.1rem;

  color: #f6a038;

  position: relative;

  top: 3px;
}

.ele_p .avis__ .avi__ p {
  font-size: 14px;

  color: #6679ad;

  margin-top: 1rem;
}

.ele_p .avis__ .avi__ p.h4 {
  font-size: 0.8rem;

  font-weight: 600;

  color: #445da1;

  letter-spacing: 0.01rem;

  margin-top: 0.5rem;

  float: right;
}

.ele_p .avis__ .h2 {
  font-size: 1.4rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: #333;
}

.ele_p .avis__ .h2 span {
  color: var(--main-color);
}

.ele_p .avis__ form .row {
  display: grid;

  grid-template-columns: 48% 48%;

  row-gap: 1rem;

  justify-content: space-between;

  align-items: center;

  margin: 1rem 0;
}

.ele_p .avis__ form input,
.ele_p .avis__ form textarea {
  width: 100%;

  height: 45px;

  border: 1px solid #ced7f1;

  border-radius: 16px;

  padding-left: 20px;

  font-weight: 500;

  font-size: 0.85rem;
}

.ele_p .avis__ form input::placeholder,
.ele_p .avis__ form textarea::placeholder {
  color: #9aa1c8;

  font-weight: 500;

  letter-spacing: 0.03rem;

  font-size: 13px;
}

.ele_p .avis__ form textarea {
  height: 200px;

  max-height: 300px;

  min-height: 200px;

  resize: vertical;

  padding-top: 10px;
}

.ele_p .avis__ form .btn {
  display: flex;

  justify-content: center;

  margin: 1rem 0;
}

.ele_p .avis__ form .btn button {
  width: 100%;

  text-align: center;

  color: #fff;

  font-size: 16px;

  font-weight: 500;

  padding: 14px 30px;

  border-radius: 19px;

  text-transform: uppercase;

  background: var(--main-color);

  transition: var(--transition);

  margin-top: 0.2rem;

  letter-spacing: 0.04rem;
}

.ele_p .avis__ form .btn button:hover {
  background-color: var(--second-color);
}

.ele_p .avis__ form .btn button i {
  margin-left: 6px;

  color: #FFF;

  position: relative;

  top: 1px;

  transition: var(--transition);
}

.ele_p .avis__ form .btn button:hover i {
  transform: translateX(5px);

  color: #fff;
}

footer {
  background-color: var(--dark-second-color);

  padding: 6rem 0 0 0;

  margin-top: 5rem;
}

footer .footer-container {
  width: 1200px;

  margin: 0 auto;
}

footer .foot {
  width: 100%;

  display: grid;

  grid-template-columns: 29% 28.5% 28.5%;

  justify-content: space-between;
}

footer .foot .column {
  display: flex;

  flex-direction: column;

  align-items: center;
}

footer .foot .column img {
  max-width: 95%;
}

footer .foot .logo p {
  font-size: 0.78rem;

  font-weight: 400;

  margin-top: 2rem;

  color: #e8f0fc;

  text-align: justify;

  word-spacing: -1px;

  opacity: 0;

  visibility: hidden;
}

footer .foot .column .h3 {
  font-size: 1.41rem;

  letter-spacing: 0.05rem;

  font-weight: 700;

  color: #fff;

  text-transform: uppercase;

  margin: 1.1rem 0 2.8rem 0;

  position: relative;
}

footer .foot .column .h3::before {
  content: "";

  width: 20px;

  height: 3px;

  background-color: var(--main-color);

  position: absolute;

  bottom: -10px;

  left: 0;
}

footer .foot .column ul {
  color: #fff;
}

footer .foot .column ul li {
  margin-bottom: 1.4rem;

  font-size: 0.88rem;

  line-height: 1.51;

  display: flex;

  align-items: center;
}

footer .foot .column .ul-2 li {
  align-items: flex-start !important;
}

footer .foot .column .ul-2 li:first-child {
  padding-bottom: 20px;
}

footer .foot .column ul li a {
  color: #fff7ed;

  transition: var(--transition);
}

footer .foot .column ul li a:hover {
  color: var(--main-color);
}

footer .foot .column ul li span {
  display: inline-block;

  font-size: 0.5rem;

  margin-right: 8px;
}

footer .foot .column .ul-2 li span {
  color: #fff;

  font-size: 1.05rem !important;

  margin-right: 15px !important;
}

footer .development {
  width: 100%;

  padding: 2.1rem 0;

  margin-top: 3rem;

  border-top: 1px solid #a1a1a1;

  display: grid;

  grid-template-columns: auto auto;

  justify-content: space-between;

  align-items: center;

  color: #fff;
}

footer .development p {
  font-size: 0.85rem;

  letter-spacing: 0.04rem;

  text-transform: capitalize;

  font-weight: 500;

  display: inline-flex;

  color: #fff8f0;
}

footer .development p span {
  text-transform: none;

  margin-right: 4px;
}

footer .development p a {
  color: #fff8f0;

  transition: var(--transition);
}

footer .development p a:hover {
  color: var(--main-color);
}

.holder .contact .icons {
  padding: 6rem 0;

  display: grid;

  grid-template-columns: 29% 29% 29%;

  justify-content: space-between;
}

.holder .contact .icons .icon {
  font-family: "poppins";

  text-align: center;

  background-color: #3362a7;

  border-radius: 25px;

  padding: 1.5rem 0;

  color: #fff;

  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px;

  position: relative;

  overflow: hidden;

  transition: var(--transition);
}

.holder .contact .icons .icon:hover {
  transform: scale(1.04);
}

.holder .contact .icons .icon::before {
  content: "";

  width: 100%;

  height: 200%;

  background-color: #fff;

  opacity: 0.15;

  position: absolute;

  top: -50%;

  left: -150%;

  transition: all 0.3s ease-out;

  transform: rotate(20deg);
}

.holder .contact .icons .icon:hover::before {
  left: 150%;
}

.holder .contact .icons .icon.phone {
  background-color: #f7941d;
}

.holder .contact .icons .icon span {
  font-size: 1.5rem;

  width: 60px;

  height: 60px;

  background-color: #fff;

  color: #ffae4c;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0 auto;
}

.holder .contact .icons .icon.phone span {
  color: #33509f;
}

.holder .contact .icons .icon span i {
  position: relative;

  top: 1px;
}

.holder .contact .icons .icon .h3 {
  margin: 1rem 0 0.5rem 0;

  font-size: 1rem;

  font-weight: 500;

  letter-spacing: 0.04rem;
}

.holder .contact .icons .icon p {
  font-size: 0.9rem;
}

.holder .contact .icons .icon.social p {
  display: grid;

  grid-template-columns: auto auto auto;

  column-gap: 1rem;

  justify-content: center;

  align-items: center;

  margin-top: 0.6rem;
}

.holder .contact .icons .icon p a {
  color: #fff;
}

.holder .contact .icons .icon.social p a {
  pointer-events: none;
  cursor: default;
}

.holder .contact form {
  background-color: #fff;

  padding: 4rem;

  box-shadow: rgb(170 170 236 / 20%) 0px 0px 15px 0px;

  border-radius: 20px;

  margin-bottom: 1rem;

  transform: translateY(90px);

  opacity: 0;

  transition: all 0.8s ease-out;
}

.holder .contact form.active {
  transform: translate(0);

  opacity: 1;
}

.holder .contact form .title {
  text-align: center;

  margin-bottom: 2.5rem;
}

.holder .contact form .title .sp_2 {
  text-transform: uppercase;

  letter-spacing: 0.18rem;

  font-size: 0.9rem;

  font-weight: 600;

  color: var(--main-color);
}

.holder .contact form .title .sp_2 i {
  font-size: 0.95rem;
}

.holder .contact form .title .h1 {
  font-size: 1.8rem;

  font-weight: 600;

  margin: 1.2rem 0 2rem 0;

  letter-spacing: 0.05rem;

  color: var(--second-color);
}

.holder .contact form .inputs {
  margin-top: 3.5rem;

  display: grid;

  grid-template-columns: 50% 50%;

  column-gap: 0.8rem;

  justify-content: space-between;
}

.holder .contact form .inputs .column input,
.holder .contact form .inputs .column textarea {
  display: block;

  width: 100%;

  height: 50px;

  border: 1px solid #e4e6f2;

  padding-left: 17px;

  margin-bottom: 0.6rem;

  border-radius: 0;
}

.holder .contact form .inputs .column input[type="tel"] {
  margin-bottom: 0;
}

.holder .contact form .inputs .column textarea {
  height: 100%;

  min-height: 100%;

  max-height: 100%;

  resize: none;

  padding-top: 15px;
}

.holder .contact form .inputs .column input::placeholder,
.holder .contact form .inputs .column textarea::placeholder {
  color: #9aa1c8;

  font-weight: 500;

  letter-spacing: 0.03rem;

  font-size: 13px;
}

.holder .contact form .btn {
  display: flex;

  justify-content: center;

  padding: 2.5rem 0 0 0;
}

.holder .contact form .btn button {
  color: #fff;

  font-size: 14.5px;

  font-weight: 600;

  padding: 18px 38px;

  border-radius: 10px;

  text-transform: uppercase;

  background: var(--main-color);

  transition: var(--transition);

  letter-spacing: 0.05rem;
}

.holder .contact form .btn button:hover {
  background-color: var(--second-color);
}

.holder .contact form .btn button:active {
  transform: translateY(5px);
}

.holder .contact form .btn button i {
  margin-left: 6px;

  position: relative;

  top: 0.5px;
}

.admin-login {
  padding: 7rem 0;
}

.admin-login .row {
  max-width: 767px;
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.admin-login .row .flexed {
  width: 100%;
  display: grid;
  grid-template-columns: 48% 48%;
  justify-content: space-between;
}

.admin-login .row .column {
  text-align: center;
  overflow: hidden;
}

.admin-login .row .column img {
  max-width: 100%;

  height: 100%;

  object-fit: cover;
}

.admin-login .row .line {
  width: 2px;

  background-color: #efefef;
}

.admin-login .row form {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.admin-login .row form h2 {
  font-size: 2rem;

  color: #555;

  margin-bottom: 3rem;

  position: relative;

  text-transform: capitalize;
}

.admin-login .row form h2::before {
  content: "";

  width: 50px;

  height: 4px;

  background-color: var(--main-color);

  position: absolute;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);
}

.admin-login .row form input,
.admin-login .row form select {
  width: 100%;

  display: block;

  height: 48px;

  border: none;

  border-bottom: 2px solid var(--main-color);

  background-color: transparent;

  padding-left: 14px;

  font-size: 1rem;

  margin-bottom: 2.5rem;
}
.admin-login .row form label {
  display: block;
  color: #fff;
  background-color: #263238;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
  width: 100%;
  border-radius: 16px;
  padding: 15px 20px;
  font-size: 0.85rem;
  border: 1px solid #ced7f1;
}
.admin-login .row form label:hover {
  color: #0c5a9f;
  background-color: #fff;
}
.admin-login .row form label i {
  margin-right: 7px;
  font-size: 0.95rem;
  color: var(--main-color);
}
.admin-login .row form input[type="file"] {
  display: none;
}
.admin-login .row form button {
  padding: 0.85rem 3.7rem;

  font-size: 1.15rem;

  font-weight: 500;

  border: none;

  text-transform: uppercase;

  letter-spacing: 0.06rem;

  margin-top: 1.5rem;

  background-color: var(--main-color);

  box-shadow: 0 4px 15px 0 var(--main-color);

  color: #fff;

  text-align: center;

  background-size: 300% 100%;

  border-radius: 50px;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;
}

.admin-login .row form button:hover {
  background-color: #0c5a9f;
}

.dash-holder {
  display: grid;

  grid-template-columns: calc(100% - 280px);

  min-height: 90vh;

  justify-content: flex-end;

  background-color: #f9f9f9;
}

.menu-dash {
  font-size: 1.2rem;

  background-color: transparent;

  color: #212121;

  font-weight: 600;

  border: none;
}

.dash-holder nav {
  padding: 1rem;

  width: 280px;

  min-height: 100%;

  background-color: #7ee8fa;

  background-image: linear-gradient(315deg, #f5af19 0%, #ffecc3 74%);

  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.12) !important;

  position: fixed;

  top: 0;

  left: 0;

  transition: var(--transition);
}

.dash-holder nav.show {
  left: 0 !important;
}

.dash-holder nav .dash-close {
  background-color: transparent;

  color: #444;

  border: none;

  font-size: 1rem;

  float: right;

  margin-bottom: 2rem;

  display: none;
}

.dash-holder nav .logo {
  margin-bottom: 2rem;

  text-align: center;
}

.dash-holder nav .logo img {
  max-width: 93%;
}

.dash-holder nav ul {
  display: block;
}

.dash-holder nav ul li {
  cursor: pointer;

  position: relative;

  color: #33509f;

  transition: var(--transition);
}

.dash-holder nav ul li a {
  color: #0c5a9f;
}

.dash-holder nav ul li {
  width: 100%;

  color: #0c5a9f;

  text-transform: capitalize;

  letter-spacing: 0.06rem;

  font-size: 1.3rem;
}

.dash-holder nav ul li p {
  padding: 1.1rem 0.9rem;

  font-weight: 600;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.dash-holder nav ul li p span i {
  font-size: 0.9rem;
}

.dash-holder nav ul li p:hover {
  background-color: #e9faf4;
}

.dash-holder nav ul li a {
  width: 100%;

  font-size: 1rem;

  display: inline-block;
}

.dash-holder nav ul li a .fal {
  margin-right: 13px;
}

.dash-holder nav ul li .crud {
  width: 100%;

  position: relative;

  top: 100%;

  left: 0;

  border: 1px solid #e9faf4;

  height: 0;

  border: none;

  overflow: hidden;

  transition: var(--transition);
}

.dash-holder nav ul li .active-crud {
  border: 1px solid #fff;

  height: 96px;
}

.dash-holder nav ul li .active-crud_2 {
  max-height: 49px;
}

.dash-holder nav ul li .active-manage i {
  transform: rotate(-90deg);
}

.dash-holder nav ul li .crud li {
  padding: 0;
}

.dash-holder nav ul li .crud li a {
  display: block;

  width: 100%;

  height: 100%;

  font-size: 0.9rem;

  font-weight: 600;

  color: #0c5a9f;

  transition: var(--transition);

  padding: 0.9rem;

  padding-left: 30px;
}

.dash-holder nav ul li .crud li a .fal {
  margin: 0;
}

.dash-holder nav ul li .crud li a.active {
  background-color: #fff;

  color: #0c5a9f;
}

.dash-holder nav ul li.active {
  background-color: #fff;

  color: #0c5a9f;
}

.dash-holder nav ul li .crud li a:hover {
  color: #0c5a9f;
}

.dash-holder nav ul li .crud li a span {
  font-size: 0.7rem;

  margin-right: 3px;
}

.dash-holder .pays-holder {
  width: 97%;

  margin: 0 auto;

  padding: 2.5rem 0;
}

.dash-holder .pays-holder h2 {
  font-size: 1.3rem;
  letter-spacing: 0.03rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
  color: #313131;
}

.dash-holder .pays-holder table {
  width: 100%;

  display: table;

  border-collapse: collapse;

  background-color: #fff;

  border-radius: 5px;

  overflow: hidden;

  text-align: center;

  border: 1px solid #ddd;
}

.dash-holder .pays-holder table thead {
  background-color: #414141;

  color: #fff;
}

.dash-holder .pays-holder table thead th {
  padding: 9px 20px;

  font-size: 1rem;

  border: 1px solid #ddd;

  text-transform: capitalize;
}

.dash-holder .pays-holder table td {
  padding: 16px 20px;

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.05rem;

  border: 1px solid #ddd;
}

.dash-holder .pays-holder table td a {
  background-color: red;

  padding: 6px 12px;

  color: #fff;

  border-radius: 5px;

  text-transform: capitalize;

  font-weight: 500;
}

.dash-holder .forms {
  width: 100%;

  display: flex;

  justify-content: center;
}

.dash-holder .forms form {
  width: 700px;

  padding: 3rem 0;
}

.dash-holder .forms form h3 {
  font-size: 1.3rem;

  font-weight: 600;

  margin-bottom: 1rem;

  padding-bottom: 1rem;

  border-bottom: 1px solid #ddd;

  text-transform: capitalize;
}

.dash-holder .forms form .row-form {
  width: 100%;

  background-color: #fff;

  border-top: 4px solid #0c5a9f;

  border-radius: 0.25rem;

  padding: 3rem 2.5rem;

  box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%),
    0 2px 6px 0 rgb(206 206 238 / 54%);
}

.dash-holder .forms form .row-form select {
  width: 100%;

  height: 35px;

  border-radius: 5px;

  border: 1px solid #ddd;

  text-transform: capitalize;

  cursor: pointer;
}

.dash-holder .forms form .row-form h2 {
  font-size: 1.35rem;

  text-transform: capitalize;

  font-weight: 600;

  color: #0c5a9f;

  margin-bottom: 1.3rem;

  padding-bottom: 1.3rem;

  border-bottom: 1px solid #ddd;
}

.dash-holder .forms form .row-form .row {
  display: grid;

  grid-template-columns: 100%;

  row-gap: 1rem;
}

.dash-holder .forms form .row-form .row .column-2 {
  display: grid;

  grid-template-columns: 47% 47%;

  row-gap: 1rem;

  justify-content: space-between;
}

.dash-holder .forms form .row-form p {
  font-size: 0.82rem;

  font-weight: 500;

  letter-spacing: 0.04rem;

  text-transform: capitalize;

  margin-bottom: 0.6rem;
}

.dash-holder .forms form .row-form .photo-label {
  min-width: 100%;

  max-width: 100%;

  font-size: 0.9rem;

  text-align: center;

  height: 35px;

  border-radius: 5px;

  display: flex !important;

  justify-content: center;

  align-items: center;

  background-color: #ddd;

  color: #000;

  transition: var(--transition);

  cursor: pointer;
}

.dash-holder .forms form .row-form .photo-label:hover {
  background-color: #eee;
}

.dash-holder .forms form .row-form .photo-label span {
  margin-right: 6px;
}

.dash-holder
  .forms
  form
  .row-form
  .row
  .column
  input:not(input[type="checkbox"]) {
  width: 100%;

  height: 35px;

  border-radius: 5px;

  border: 1px solid #ddd;

  padding-left: 12px;
}

.dash-holder .forms form .row-form .row .checkbox-col {
  display: flex;

  align-items: center;
}

.dash-holder .forms form .row-form .row .checkbox-col label {
  font-size: 14px;
}

.all-pays {
  overflow-x: auto;
}

.dash-holder .forms form .row-form .row .checkbox-col input {
  height: 20px;

  margin-right: 10px;

  height: 20px;

  width: 20px;
}

.dash-holder .forms form .row-form .row .column input[type="file"] {
  display: none;

  visibility: hidden;
}

.dash-holder .forms form .row-form .row .column textarea {
  width: 100%;

  height: 200px;

  min-height: 200px;

  max-height: 1000px;

  resize: vertical;

  border-radius: 5px;

  border: 1px solid #ddd;

  padding: 6px 0 0 12px;
}

.dash-holder .forms form .row-form .rows {
  display: grid;

  grid-template-columns: 48% 48%;

  justify-content: space-between;

  gap: 1rem;
}

.dash-holder .forms form .row-form .rows .col-3 {
  grid-column: 1 / 3;
}

.dash-holder .forms form .row-form .rows .col label {
  display: block;

  font-size: 0.9rem;

  margin-bottom: 0.4rem;
}

.dash-holder .forms form .row-form .rows input {
  width: 100%;

  height: 35px;

  border-radius: 5px;

  border: 1px solid #ddd;

  padding-left: 12px;
}

.dash-holder .forms form .row-form .rows p {
  display: block;

  font-size: 0.83rem;

  font-weight: 400;

  margin-bottom: 0rem;
}

.dash-holder .forms form .row-form .rows input[type="file"] {
  display: none;

  visibility: hidden;
}

.dash-holder .forms form .row-form .btn {
  margin-top: 2.5rem;

  text-align: center;
}

.dash-holder .forms form .btn button {
  padding: 9px 20px;

  font-size: 0.9rem;

  font-weight: 600;

  letter-spacing: 0.04rem;

  text-transform: capitalize;

  color: #fff;

  background-color: #0c5a9f;

  border-radius: 5px;

  border: none;

  transition: var(--transition);
}

.dash-holder .forms form .row-form .btn button:hover {
  background-color: var(--main-color);
}

.msg_accept {
  font-weight: 500;

  padding: 1.5rem 2rem;

  font-size: 14px;

  text-transform: capitalize;

  margin: 2rem 0 0 0;

  border-radius: 10px;

  position: relative;
}

.msg_accept span {
  position: absolute;

  top: 0.5rem;

  right: 1rem;

  font-size: 0.9rem;

  color: #666;

  cursor: pointer;
}

.msg_accept.orange {
  border: 1px solid rgb(255, 166, 0);

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

  color: rgb(255, 166, 0);
}

.msg_accept.green {
  border: 1px solid green;

  background-color: rgb(206, 245, 206);

  color: green;
}

.setting {
  width: 100%;

  background-color: #fff;

  display: block;
}

.setting .account {
  width: 100%;

  margin: 0 auto;

  padding: 5rem 0;
}

.setting .account .logout {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  column-gap: 1.2rem;
}

.setting .account .logout a {
  color: #0c5a9f;

  font-size: 0.95rem;

  text-transform: capitalize;

  font-weight: 500;

  transition: var(--transition);
}

.setting .account .logout a:hover {
  color: var(--main-color);
}

.setting .account .logout a i {
  color: var(--main-color);

  margin-right: 4px;
}

.setting .account .detail {
  width: 100%;

  background-color: #fff;

  box-shadow: var(--light-shadow);

  padding: 2rem 0 3rem 0;

  border-radius: 10px;

  margin-top: 1rem;
}

.setting .account .detail .intro {
  width: 85%;

  margin: 0 auto;

  display: grid;

  grid-template-columns: auto 63%;

  column-gap: 1.5rem;

  justify-content: flex-start;
}

.setting .account .detail .intro .img {
  max-height: 350px;

  position: relative;

  transform: translateY(-50px);

  border-radius: 10px;

  overflow: hidden;
}

.setting .account .detail .intro .img img {
  max-width: 350px;

  max-height: 350px;

  width: 350px;

  height: 100%;

  object-fit: cover;
}

.setting .account .detail .intro .img .img_BTN {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  z-index: -1;

  transition: all 0.2s ease-out;
}

.setting .account .detail .intro .img .img_BTN label {
  width: 100%;

  height: 100%;

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

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;
}

.setting .account .detail .intro .img .img_BTN label i {
  color: #eee;

  font-size: 1.8rem;

  transform: translateY(30px);

  transition: var(--transition);
}

.setting .account .detail .intro .img:hover .img_BTN {
  opacity: 1;

  visibility: visible;

  z-index: 1;
}

.setting .account .detail .intro .img:hover .img_BTN label i {
  transform: translateY(0);
}

.setting .account .detail .intro .data {
  padding-top: 1rem;
}

.setting .account .detail .intro .data div {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 1rem;
}

.setting .account .detail .intro .data div a {
  font-size: 0.85rem;

  font-weight: 600;

  color: #33509f;

  text-transform: uppercase;
}

.setting .account .detail .intro .data div a i {
  color: var(--main-color);

  margin-right: 8px;
}

.setting .account .detail .intro .data .h3 {
  font-size: 1.5rem;

  font-weight: 700;

  text-transform: capitalize;

  letter-spacing: 0.03rem;

  color: #33509f;

  margin: 0;

  margin-bottom: 1.1rem;

  display: flex;

  justify-content: space-between;
}

.setting .account .detail .intro .data .h3 .stars {
  display: grid;

  grid-template-columns: auto auto auto auto auto;

  justify-content: flex-end;

  align-items: center;

  font-size: 0.78rem;

  column-gap: 0.1rem;

  color: #f6a038;
}

.setting .account .detail .intro .data p {
  font-size: 14px;

  color: #6679ad;
}

.setting .account .detail .intro .data p.h4 {
  margin: 0 0 0.9rem 0;

  font-size: 0.9rem;

  text-transform: uppercase;

  font-weight: 600;

  color: #445da1;

  letter-spacing: 0.01rem;
}

.setting .account .detail form {
  width: 85%;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 100%;

  justify-content: center;
}

.setting .account .detail form input#photo {
  display: none;
}

.setting .account .detail form .column .col {
  margin-bottom: 1.2rem;
}

.setting .account .detail form .column .col-2-2 {
  display: grid;

  grid-template-columns: 48% 48%;

  justify-content: space-between;
}

.setting .account .detail form .column .col label {
  display: block;

  font-size: 0.85rem;

  font-weight: 500;

  text-transform: capitalize;

  color: #313131;

  margin-bottom: 0.2rem;
}

.setting .account .detail form .column .col input,
.setting .account .detail form .column .col select,
.setting .account .detail form .column .col textarea {
  width: 100%;

  height: 37px;

  border: 1px solid #ddd;

  padding-left: 12px;

  border-radius: var(--radius);
}

.setting .account .detail form .column .col textarea {
  height: 200px;

  resize: none;

  max-height: 200px;

  min-height: 200px;

  padding-top: 12px;
}

.setting .account .detail form .column .col .btn {
  text-align: right;
}

.setting .account .detail form .column .col .btn button {
  background-color: transparent;

  color: green;

  transition: color 0.2s ease-out;
}

.setting .account .detail form .column .col .btn button:hover {
  color: #fda523;
}

.setting .account .detail form .column .col-2 {
  margin-top: 2.5rem;
}

.setting .account .detail form .column .col-2 a {
  font-size: 1.1rem;

  font-weight: 500;

  color: rgb(245, 94, 94);

  display: inline-block;

  margin-bottom: 0.4rem;

  transition: var(--transition);
}

.setting .account .detail form .column .col-2 a:hover {
  color: rgb(247, 25, 25);
}

.setting .account .detail form .column .col-2 a i {
  font-size: 0.95rem;

  margin-right: 0.15rem;

  position: relative;

  top: -1px;
}

.setting .account .detail form .column .col-2 p {
  font-size: 0.85rem;

  color: #616161;

  line-height: 1.5;
}

.setting .account .detail form .column .btns {
  margin-top: 3rem;

  display: grid;

  grid-template-columns: 100%;

  justify-content: space-between;

  align-items: center;
}

.setting .account .detail form .column .btns button {
  background-color: #0c5a9f;

  color: #fff;

  border-radius: var(--radius);

  padding: 11px 0;

  font-size: 0.83rem;

  font-weight: 500;

  letter-spacing: 0.04rem;

  text-transform: capitalize;

  box-shadow: var(--dark-shadow);

  transition: var(--transition);
}

.setting .account .detail form .column .btns button:hover {
  background-color: var(--main-color);
}

.setting .account .detail form .column .btns .annuler {
  background-color: #ddd;

  color: #444;

  box-shadow: none;
}

.setting .account .detail form .column .col input[type="file"] {
  display: none;
}

.setting .account .detail form .column img {
  width: 150px;

  height: 150px;

  max-height: 150px;

  max-width: 150px;

  margin: 0 auto;

  object-fit: cover;

  border-radius: 18px;
}

.setting .account .detail form .column .col .avatar {
  width: 100%;

  background-color: #451a9b;

  color: #fff;

  border-radius: var(--radius);

  padding: 11px 8px;

  font-size: 0.83rem;

  font-weight: 500;

  letter-spacing: 0.04rem;

  text-transform: capitalize;

  transition: var(--transition);

  margin-top: 0.8rem;

  cursor: pointer;
}

.setting .account .detail form .column .col .avatar:hover {
  box-shadow: var(--dark-shadow);
}
.message_success {
  min-height: 70vh;
  position: relative;
}
.message_success .holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--main-color);
  color: #fff;
  border-radius: 10px;
  padding: 30px;
  max-width: 90%;
}
.message_success .holder h1 {
  color: #0c5a9f;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  text-transform: capitalize;
}
.message_success .holder p {
  font-size: 15px;
}
.message_success .holder a {
  text-transform: capitalize;
  color: #fff;
  text-decoration: underline;
  display: block;
  margin-top: 1.5rem;
  transition: var(--transition);
}
.message_success .holder a:hover {
  color: #0c5a9f;
}
.r_holder {
  width: 95%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px calc(100% - 250px);
  justify-content: space-between;
  /* align-items: flex-start; */
  row-gap: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  /* border-radius: 40px; */
  /* padding: 25px; */
}
.r_holder .r_menu {
  border: 1px solid var(--main-color);
  background-color: #ffa130;
}
.r_holder .r_menu ul {
  display: block;
}
.r_holder .r_menu ul li a {
  display: block;
  font-size: 14px;
  background-color: #ffa130;
  color: #fff;
  padding: 0.8rem;
  text-transform: capitalize;
  border: 1px solid var(--main-color);
  border-top: none;
  cursor: pointer;
  transition: var(--transition);
}
.r_holder .r_menu ul li.active a {
  background-color: #fff;
  color: var(--main-color);
}
.r_holder .r_menu ul li:hover a {
  background-color: #fff;
  color: var(--main-color);
}
.r_holder .r_menu ul li i {
  margin-right: 0.3rem;
}
.r_holder .r_workspace #table_id_wrapper {
  width: 95%;
  margin: 1rem auto;
}
.r_holder .r_workspace table {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #ddd;
}
.r_holder .r_workspace th {
  padding: 10px 0;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}
.r_holder .r_workspace td {
  padding: 10px 0;
  font-size: 14px;
  border: 1px solid #ddd;
}
.r_holder .r_workspace #table_id_length {
  font-size: 14px;
  margin-bottom: 1rem;
}
.r_holder .r_workspace #table_id_filter {
  font-size: 14px;
  margin-bottom: 1rem;
}
.r_holder .r_workspace .dataTables_info {
  padding: 0;
  padding-top: 0.755em;
  font-size: 14px;
}
.r_holder .r_workspace #table_id_paginate {
  font-size: 14px;
  display: flex;
  align-items: center;
}
.r_holder .r_workspace #table_id_paginate span a {
  padding: 0;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r_holder .r_workspace form.step {
  width: 95%;
  margin: 1.6rem auto;
}
.r_holder .r_workspace form.step .photo_label {
  width: 100%;
  background: #ddd;
  text-align: center;
  padding: 12px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: var(--transition);
}
.r_holder .r_workspace form.step .photo_label:hover {
  background-color: #ccc;
  border-color: #ddd;
}
.r_holder .r_workspace form.step .btns {
  margin-top: 2rem !important;
}
.realisations {
  margin-bottom: 5rem;
  display: none;
}
.realisations .title {
  text-align: center;
}
.realisations .title .h2 {
  font-size: 23px;
  font-weight: 600;
  color: #3764a7;
  letter-spacing: 0.5px;
  position: relative;
  margin-bottom: 3rem;
}
.realisations .title .h2::before {
  content: "";
  width: 80px;
  height: 5px;
  border-radius: 10px;
  background-color: #6ba6fd;
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.realisations .title p {
  width: 100%;
  margin: 0 auto 3rem auto;
  font-size: 14px;
}
.realisations .listed {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  row-gap: 1rem;
  justify-content: space-between;
}
.realisations .listed .tap__ {
  position: relative;
  overflow: hidden;
}
.realisations .listed .tap__ img {
  width: 100%;
  min-height: 300px;
  object-fit: cover;
}
.realisations .listed .tap__ span {
  max-width: 80%;
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 15px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}
.realisations .listed .tap__ span i {
  margin-right: 5px;
  color: #ffa83f;
}

@media screen and (max-width: 1330px) {
  header .container {
    width: 95%;
  }
}

@media screen and (max-width: 1230px) {
  .holder {
    width: 95% !important;
  }
  .admin-login .row {
    width: 95%;
  }
  .places .cities {
    width: 95%;
  }

  .banner .intro {
    width: 95%;
  }

  .banner .intro .detail {
    margin-left: 0%;
  }

  .places .cities {
    grid-template-columns: auto auto auto auto;

    gap: 1.5rem;
  }

  footer .footer-container {
    width: 95%;
  }

  .quartiers .rows .column {
    padding: 1.8rem 5rem;
  }

  .quartiers .rows .column h2 {
    font-size: 1.4rem;
  }

  .quartiers .pharmacie-list .column {
    padding: 1.92rem 2rem;
  }

  .quartiers .pharmacie-list .column h2 {
    font-size: 1.3rem;
  }

  .quartiers .pharmacie-list {
    grid-template-columns: 360px 360px;
  }
}

@media screen and (max-width: 1150px) {
  .banner .intro .map {
    text-align: center;

    z-index: 1;
  }

  header .dashboard {
    grid-template-columns: auto auto;

    justify-content: space-between;
  }

  header .dashboard .logo {
    display: flex !important;
  }

  .banner .intro .detail {
    z-index: 2;
  }

  .places .cities {
    grid-template-columns: auto auto auto;

    gap: 1rem;
  }

  .pharmacies .column {
    padding: 1.5rem;
  }

  .pharmacies .column h3 {
    font-size: 1.1rem;
  }

  .pharmacies .column p {
    font-size: 1.15rem;
  }

  .pharmacies .column .buttons button {
    font-size: 0.6rem;

    padding: 0.45rem 1.3rem;
  }

  .dash-holder nav .dash-close {
    display: block;
  }

  .dash-holder nav {
    left: -100%;
  }

  .dash-holder {
    grid-template-columns: 100%;

    justify-content: center;
  }

  .dash-holder nav .logo {
    margin-top: 1rem;
  }
}

@media screen and (min-width: 1050px) {
  aside {
    display: none !important;
  }

  .dark-background {
    display: none !important;
  }
}

@media screen and (max-width: 1150px) {
  header .container .wrapper .menu {
    display: none;
  }

  header .container .wrapper .bars {
    display: inline-block;
  }

  .ele_p {
    grid-template-columns: 70%;

    justify-content: center;
  }
}

@media screen and (max-width: 1050px) {
  header .container {
    padding: 0.9rem;
  }

  header .logo img {
    max-width: 300px;
  }

  .presentation .images .imgs {
    grid-template-columns: auto !important;

    justify-content: center;

    align-items: center;

    row-gap: 1rem;
  }

  .presentation .images .imgs .column {
    display: inline-flex;

    align-items: flex-start;
  }

  .presentation .images .imgs .column img {
    max-width: 100%;
  }

  .presentation .images .imgs .column .medical-1 {
    margin: 0 !important;
  }

  .presentation .images .imgs .column .medical-2 {
    margin: 0 !important;

    margin-left: 1rem !important;
  }

  .questions .question .content span {
    left: 0;

    top: 0;

    position: relative;

    margin-bottom: 1rem;
  }

  .pharmacies {
    grid-template-columns: auto auto;

    justify-content: center;

    gap: 2rem;
  }

  .pharmacies .col {
    display: flex;

    justify-content: center;
  }

  .pharmacies .col-3 {
    grid-column: 1 / 3;
  }

  .quartiers .rows .column {
    padding: 1.5rem 3rem;
  }

  .quartiers .rows .column h2 {
    font-size: 1.2rem;
  }

  .quartiers .pharmacie-list .column {
    padding: 1.92rem 2rem;
  }

  .admin-login .row {
    width: 95%;
  }

  .dash-holder .pays-holder table thead th {
    padding: 9px 14px;

    font-size: 0.8rem;
  }

  .dash-holder .pays-holder table td {
    padding: 16px 15px;

    font-size: 0.9rem;
  }

  .dash-holder .pays-holder table td a {
    font-size: 0.8rem;

    padding: 6px 8px;
  }

  .quartiers .single-pharmacie .column .card .content .more {
    grid-template-columns: auto auto;
  }

  .banner .intro {
    grid-template-columns: 100%;
  }

  .banner .intro .detail {
    grid-row: 2;

    margin-top: 2rem;
  }

  .banner .intro .detail .search_bar .search_ {
    width: 100%;
  }

  .banner .intro .map img {
    width: 100%;
  }

  .workers .list_workers {
    grid-gap: 0px 38px;
  }

  .workers .list_workers .worker article {
    width: 90%;

    transform: translate(5%, -85px);
  }

  .setting .account .detail .intro {
    grid-template-columns: 100%;

    justify-content: center;

    margin-bottom: 1.5rem;

    padding-top: 2rem;
  }

  .setting .account .detail .intro .data {
    padding-top: 0;
  }

  .setting .account .detail .intro .img {
    text-align: center;
  }

  .setting .account .detail .intro .img {
    transform: none;
  }

  .setting .account .detail .intro .img img {
    max-width: 100%;

    width: 100%;
  }
}
@media screen and (max-width: 990px) {
  .realisations .listed {
    grid-template-columns: 48% 48%;
  }
}
@media screen and (max-width: 850px) {
  .news .blogs {
    grid-template-columns: 70%;

    justify-content: center;
  }

  footer .foot {
    grid-template-columns: 45% 45%;

    row-gap: 1.3rem;
  }

  footer .foot .column {
    align-items: flex-start;
  }

  footer .foot .logo {
    margin-bottom: 1rem;
  }

  footer .development {
    grid-template-columns: auto;

    justify-content: center;

    row-gap: 1rem;
  }

  footer .development p {
    justify-content: center;

    text-align: center;
  }

  .pharmacie-contact form .row {
    grid-template-columns: 48% 48%;
  }

  .pharmacie-contact form .row #tel {
    grid-column: 1 / 3;
  }

  .dash-holder .forms form {
    width: 95%;

    margin: 0 auto;
  }

  .dash-holder .forms form .row-form .row .column-2 {
    grid-template-columns: 100%;

    row-gap: 1rem;
  }

  .quartiers .pharmacie-list {
    grid-template-columns: 65%;
  }

  .quartiers .single-pharmacie {
    grid-template-columns: auto;

    justify-content: center;
  }

  .create-avis .form-avis .content {
    grid-template-columns: 100%;

    justify-content: center;

    row-gap: 1rem;
  }

  .ele_p .avis__ form .btn-1 {
    display: none !important;
  }

  .ele_p .avis__ form .btn-2 {
    display: block !important;
  }

  .popup-form {
    width: 97%;
  }

  .avis .wrap .btns {
    display: none;
  }

  .avis .wrap .carousel {
    width: 100%;
  }

  .banner .intro {
    padding-top: 30px;
  }

  .banner .intro .detail .search_bar .search_ {
    height: auto;

    grid-template-columns: 100%;
  }

  .presentation {
    grid-template-columns: 90% !important;

    row-gap: 2rem;

    justify-content: center;
  }

  .presentation article {
    grid-row: 2;
  }

  .holder .contact .icons {
    grid-template-columns: 48% 48%;

    row-gap: 1.5rem;
  }

  .ele_p {
    grid-template-columns: 80%;
  }
}

@media screen and (max-width: 750px) {
  .banner .intro .detail p {
    font-size: 1rem;
  }

  .places .cities {
    grid-template-columns: auto auto;
  }

  .news .blogs {
    grid-template-columns: 70%;

    justify-content: center;
  }

  .quartiers .rows .column {
    padding: 1.3rem 2rem;
  }

  .quartiers .rows .column h2 {
    font-size: 1.1rem;
  }

  .pharmacie-contact form {
    padding: 2.5rem 2rem;
  }

  .pharmacie-contact form .row input {
    font-size: 0.8rem;
  }

  .admin-login .row {
    grid-template-columns: 100%;

    row-gap: 3rem;
  }

  .admin-login .row .line {
    width: 100%;

    height: 2px;
  }

  .dash-holder .forms form .row-form .rows {
    grid-template-columns: 100%;
  }

  .dash-holder .forms form .row-form .rows .col-3 {
    grid-column: 1 / 2;
  }

  .dash-holder .pays-holder table thead th {
    padding: 7px 10px;
  }

  .dash-holder .pays-holder table td {
    padding: 16px 12px;

    font-size: 0.6rem;
  }

  .quartiers .pharmacie-list {
    grid-template-columns: 85%;
  }

  .popup-form form {
    max-height: 350px;
  }

  .popup-form form .row .column label {
    font-size: 0.85rem;

    line-height: 1.5;
  }

  .banner .intro .detail .h1 {
    font-size: 2.5rem;
  }

  .banner .intro .detail .h1 span.sp_1 {
    font-size: 1.8rem;
  }

  .banner .intro .detail .h1 span img {
    width: 210px;
  }

  .workers .list_workers {
    justify-content: center;

    grid-template-columns: 80%;
  }

  .holder .contact form .inputs {
    grid-template-columns: 100%;

    row-gap: 0.6rem;
  }

  .holder .contact form .inputs .column textarea {
    height: 150px;

    min-height: 150px;

    max-height: 150px;
  }

  .ele_p {
    grid-template-columns: 90%;
  }
}

@media screen and (max-width: 600px) {
  header .logo img {
    max-width: 230px;
  }

  .banner .toggles {
    display: none;
  }

  .banner:hover .toggles {
    display: flex;
  }

  .presentation {
    grid-template-columns: 100% !important;
  }

  .news .blogs {
    grid-template-columns: 100%;
  }

  footer .foot {
    grid-template-columns: 90%;

    justify-content: center;
  }

  .pharmacies {
    grid-template-columns: 100%;
  }

  .pharmacies .col-3 {
    grid-column: 1 / 2;
  }

  .quartiers .rows {
    grid-template-columns: auto auto;

    gap: 3rem;
  }

  .quartiers .pharmacie-list {
    grid-template-columns: 97%;
  }

  .quartiers .rows .column {
    padding: 1.5rem 3rem;
  }

  .quartiers .rows .column h2 {
    font-size: 1.3rem;
  }

  .quartiers .pharmacie-list .column {
    padding: 1.5rem 2rem;
  }

  .quartiers .pharmacie-list .column h2 {
    font-size: 1.2rem;
  }

  .admin-login .row {
    padding: 3.5rem 1rem;
  }

  .dash-holder nav {
    width: 270px;
  }

  .dash-holder .pays-holder table thead th {
    padding: 7px 0;

    font-size: 0.7rem;
  }

  .dash-holder .pays-holder table td {
    padding: 13px 4px;

    font-size: 0.75rem;
  }

  .quartiers .single-pharmacie {
    grid-template-columns: 100%;
  }

  .quartiers .links a {
    font-size: 0.8rem;
  }

  .create-avis .form-avis {
    padding: 1rem;
  }

  .create-avis .form-avis .content {
    padding: 1rem;
  }

  .ele_p .avis__ form .rate p {
    font-size: 0.83rem;
  }

  .popup-form form .row {
    grid-template-columns: 100%;
  }

  .popup-form form {
    padding-right: 0.5rem;
  }

  .banner .intro .detail p {
    max-width: 100%;
  }

  .banner .intro .detail .h1 {
    font-size: 2rem;
  }

  .banner .intro .detail .h1 span.sp_1 {
    font-size: 1.4rem;
  }

  .banner .intro .detail .h1 span img {
    width: 165px;
  }

  .workers .list_workers {
    grid-template-columns: 100%;
  }

  .h1 {
    font-size: 1.5rem !important;
  }

  p {
    font-size: 0.8rem !important;
  }

  footer {
    padding-top: 5rem;
  }

  .holder .contact .icons {
    grid-template-columns: 100%;
  }

  .holder .contact form {
    padding: 4rem 2rem;
  }

  .presentation form .row {
    grid-template-columns: 100%;
  }

  .setting .account .detail form .column .col-2-2 {
    grid-template-columns: 100%;

    row-gap: 1rem;
  }

  .ele_p {
    grid-template-columns: 100%;
  }

  .realisations .listed {
    grid-template-columns: 100%;
  }
}

@media screen and (max-width: 460px) {
  header .logo img {
    max-width: 180px;
  }

  header .container .wrapper .icons ul li .btn {
    font-size: 0.7rem;

    width: 25px;

    height: 25px;

    margin-left: 0.5rem;
  }

  header .container .wrapper .bars {
    margin-left: 1rem;

    font-size: 1.3rem;
  }

  aside {
    width: 270px;
  }

  .banner .intro .detail a {
    font-size: 0.8rem;

    padding: 12px;
  }

  .banner .intro .detail .company {
    font-size: 0.75rem;

    line-height: 1.5;
  }

  .places .cities {
    grid-template-columns: auto;

    justify-content: center;
  }

  .banner .intro .detail p {
    font-size: 0.9rem;
  }

  .presentation article p {
    font-size: 0.9rem;
  }

  .responses .three-columns .column ul li .response p {
    font-size: 0.95rem;
  }

  .avis .wrap .carousel li .column .content {
    grid-template-columns: auto;

    row-gap: 1rem;
  }

  header .container .wrapper .icons ul li .search {
    width: 100%;
  }

  .quartiers .rows {
    grid-template-columns: auto auto;

    gap: 2rem;
  }

  .quartiers .rows .column {
    padding: 1.3rem 2.5rem;
  }

  .quartiers .rows .column h2 {
    font-size: 1rem;
  }

  .quartiers .pharmacie-list {
    grid-template-columns: 97%;
  }

  .quartiers .pharmacie-list .column {
    padding: 1.3rem 2rem;
  }

  .quartiers .links a {
    font-size: 0.6rem;
  }

  .quartiers .links span {
    margin: 0 0.3rem;

    font-size: 0.5rem;
  }

  .quartiers .single-pharmacie .column .card .content h2 {
    grid-template-columns: auto;

    row-gap: 1rem;
  }

  .quartiers .single-pharmacie .column .card .content .more {
    grid-template-columns: auto;

    justify-content: center;
  }

  .quartiers .single-pharmacie .column .card .content .more a {
    font-size: 0.75rem;

    padding: 8px 14px;
  }

  .quartiers .single-pharmacie .column .card .content .stars {
    flex-direction: column;
  }

  .quartiers .single-pharmacie .column .card .content .stars a {
    margin-top: 0.5rem;
  }

  .ele_p .avis__ form .rate {
    flex-direction: column;

    justify-content: center;
  }

  .ele_p .avis__ form .rate-2 {
    grid-template-columns: 100%;
  }

  .banner .intro .detail .h1 {
    font-size: 1.7rem;
  }

  .workers .list_workers .worker article .top .h3 .stars {
    font-size: 0.7rem;
  }

  .avis .avis-list .avi .head i {
    display: none;
  }

  .avis .avis-list .avi .body p {
    max-width: 100%;

    font-size: 12px;
  }
}

@media screen and (max-width: 330px) {
  header .container {
    justify-content: center;
  }

  /* header .logo img {

    margin: 0 auto 1rem auto;

  } */

  header .container .wrapper {
    justify-content: space-between;
  }

  header .container .wrapper .bars {
    margin-left: 2.5rem;
  }

  header .logo img {
    max-width: 100%;
  }

  header .container .wrapper .icons ul li .btn {
    font-size: 0.75rem;

    width: 27px;

    height: 27px;

    margin-left: 0.7rem;
  }

  aside {
    width: 240px;
  }

  .quartiers .links a {
    font-size: 0.55rem;
  }

  .quartiers .links span {
    font-size: 0.5rem;
  }
}


.stars, .aucune{
  display: none !important
}

.rate .stars{
   display: block !important
}

.more_profiles {
  padding: 0.85rem 10px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  text-transform: uppercase;
  margin-top: 1.5rem;
  background-color: var(--main-color);
  color: #fff;
  text-align: center;
  background-size: 300% 100%;
  border-radius: 50px;
  font-family: 'Montserrat';
  transition: .3s;
}

.more_profiles:hover {
  background-color: var(--second-color);
}


/* ==========START Cookies Pop up=========== */
.cookies-popup-holder {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
.over-lay-first {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000000b5;
  z-index: 100;
  left: 0;
  top: 0;
}
.over-lay-first-second {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000000b5;
  z-index: 200;
  left: 0;
  top: 0;
}
.block-one-cockies {
  position: absolute;
  max-width: 750px;
  width: 80%;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  padding: 35px 25px;
  z-index: 101;
}
.block-one-cockies p {
  text-align: justify;
  font-weight: 300;
  margin-bottom: 20px;
  color: #000;
}
.contunuer-sans-ac {
  cursor: pointer;
  margin-bottom: 15px;
  color: #000;
}
.retour-pop-one {
  cursor: pointer;
  color: #000;
}
.retour-pop-one i {
  font-size: 14px;
  margin-right: 3px;
}
.contunuer-sans-ac:hover,
.retour-pop-one:hover {
  color: #00aed9;
}
button.personnaliser-choix {
  background: #fff;
  color: #240f1f;
  border: solid 0.5px #240f1f;
  width: 250px;
  display: inline-block;
  text-align: center;
  padding: 16px 0;
  border-radius: 3px;
  margin-right: 14px;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}
button.tout-accepter-a {
  background: #240f1f;
  color: #fff;
  font-size: 16px;
  width: 240px;
  display: inline-block;
  text-align: center;
  padding: 16px 0;
  border-radius: 3px;
  margin-right: 14px;
  outline: none;
  border: none;
  cursor: pointer;
}
button.tout-accepter {
  background: #240f1f;
  color: #fff;
  font-size: 16px;
  width: 212px;
  display: inline-block !important; 
  text-align: center;
  padding: 16px 0;
  border-radius: 3px;
  margin-right: 14px;
  outline: none;
  border: none;
  cursor: pointer;
}
.block-two-cockies {
  position: absolute;
  max-width: 800px;
  width: 80%;
  top: 50%;
  left: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  padding: 35px 25px;
  z-index: 201;
}
.top-title-coockie {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 25px;
}
span.title-popup-cookies {
  color: #c59418;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.block-two-cockies p {
  text-align: justify;
}
button.Interdire-choix {
  background: #fff;
  color: #00aed9;
  border: solid 0.5px #00aed9;
  width: 212px;
  display: inline-block;
  text-align: center;
  padding: 16px 0;
  border-radius: 3px;
  margin-right: 14px;
  outline: none;
  margin-bottom: 10px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .btns-cookies-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button.tout-accepter {
    order: 0;
    margin-bottom: 10px;
  }
  button.personnaliser-choix {
    order: 1;
    margin-bottom: 0;
  }
}
@media (max-width: 600px) {
  .block-one-cockies {
    width: 95%;
  }
  .block-one-cockies {
    display: grid;
    padding: 35px 15px;
  }
  .btns-cookies-holder {
    order: 3;
  }
  button.personnaliser-choix {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
  .contunuer-sans-ac {
    order: 1;
  }
  .block-one-cockies > p {
    order: 2;
  }
  .contunuer-sans-ac {
    text-align: right;
  }
}
/* --------second pop---------- */
.change-icon i::before {
  content: "\f068";
}
.second-btns-cookies-holder {
  display: flex;
  justify-content: flex-end;
}
.accept-multichoix-holder-cookies {
  margin-bottom: 30px;
}
.accept-multichoix-holder-cookies span.title-c {
  font-weight: 600;
  color: #000;
  font-size: 16px;
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
}
.info-bloc-cookies-holdera {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.info-bloc-cookies-holderb {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.info-bloc-cookies-holderc {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.propos-cokie-hol-info {
  display: none;
  order: 3;
  width: 100%;
}
.propos-cokies-buttons button {
  color: #808899;
  border: solid 0.5px #808899;
  background: #fff;
  outline: none;
  min-width: 100px;
  cursor: pointer;
}
.propos-cokie-hol-title {
  font-weight: 500;
  color: #000;
  cursor: pointer;
}
.propos-cokie-hol-title i {
  font-size: 12px;
  position: relative;
  top: -1px;
  margin-right: 6px;
}
.propos-block-acc {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border: solid 1px #ccc;
  background: #cccccc69;
  color: #000;
  flex-wrap: wrap;
}
.partnet-cookies-holdre {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  flex-wrap: wrap;
  align-items: center;
}
.partnet-cookies-holdre p {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}
.partnet-cookies-holdre button {
  border: solid 1px #ccc;
  background: #cccccc69;
  padding: 15px;
  font-weight: 500;
  color: #000;
  outline: none;
}
.tout-regester {
  display: none;
  border: 1px solid #240f1f !important;
  color: #240f1f;
  background: #FFF !important;
  font-size: 16px;
  text-align: center;
  padding: 16px 20px;
  border-radius: 3px;
  outline: none;
  border: none;
  cursor: pointer;
  margin-right: 15px;
}
.tout-regester-c {
  background: #00aed9;
  color: #fff;
  font-size: 15px;
  width: 212px;
  text-align: center;
  padding: 16px 0;
  border-radius: 3px;
  outline: none;
  border: none;
}
button.interd-btn.checked-btn {
  background: #e70002 !important;
  border-color: #e70002 !important ;
  color: #fff;
}
/* Bouton "interdiction" avec icône fa-xmark (ex fa-times) */
button.interd-btn.checked-btn::before {
  content: "\f00d"; /* Code Unicode pour l'icône fa-xmark */
  font-family: "Font Awesome 6 Free"; /* Utilisez FontAwesome 6 Free */
  font-weight: 900; /* Font-weight nécessaire pour les icônes solid */
  margin-right: 2px;
}

/* Styles pour le bouton "acceptation" */
button.accept-btn.checked-btn {
  background: #3de35a !important; /* Couleur du bouton */
  border-color: #3de35a !important; /* Couleur de la bordure */
  color: #000; /* Couleur du texte */
}

/* Bouton "acceptation" avec icône fa-check */
button.accept-btn.checked-btn::before {
  content: "\f00c"; /* Code Unicode pour l'icône fa-check */
  font-family: "Font Awesome 6 Free"; /* Utilisez FontAwesome 6 Free */
  font-weight: 900; /* Font-weight nécessaire pour les icônes solid */
  margin-right: 2px;
}

/* Cacher le bloc partner-two-holder */
.partner-two-holder {
  display: none;
}

/* Icône dans span.bntn-return-two */
span.bntn-return-two i {
  font-family: "Font Awesome 6 Free"; /* Utilisez FontAwesome 6 Free */
  font-weight: 900; /* Font-weight nécessaire pour les icônes solid */
}

.all-partner-holdre {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0px;
  padding: 15px 4px;
  background: rgba(0, 0, 0, 0.05);
}
.all-partner-holdre p {
  margin: 0;
  font-size: 14px;
}
.partners-details-holder {
  padding: 15px 4px;
  border: solid 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.partner-info-global {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
/* --------display--------- */
.display-block {
  display: block !important;
  transition-duration: 1.7s;
}
.display-none {
  display: none !important;
  transition-duration: 1.7s;
}
.disabeld-blo {
  position: none;
  pointer-events: none !important;
  opacity: 0.5;
}
.btn-no-realis-holder{
  text-align: center;
  margin-bottom: 25px;
}
.btn-no-realis-holder .show-nos-realis-btn{
    width: auto;
    padding: 16px 25px;
    background: #00aed9;
    font-size: 15px;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
    transition: 0.3s;
    border: 0;
}
.tout-regester.display-block {
    display: inline-block !important;
}

.propos-cokies-buttons.require button {
    border-color: #f10101;
    box-shadow: 0 0 2px 2px rgb(241 0 2 /20%);
}
@media (max-width: 767px) {

    .block-two-cockies {
        width: 95%;
        padding: 25px 15px 30px;
    }

    .propos-cokies-buttons.outils_pub {
        margin-top: 15px;
        display: block;
        width: 100%;
        text-align: right;
    }

    .second-btns-cookies-holder {
        float: unset;
    }

    .tout-regester {
        width: 100%;
    }

    button.personnaliser-choix {
        order: 1;
    }

    button.tout-accepter-a {
        order: 2;
        margin-right: 0;
        margin-left: 0;
        width: 100%;
    }

}

.accept-multichoix-holder-cookies .tab-detail {
  display: none;
  height: 240px;
  overflow: auto;
}

.accept-multichoix-holder-cookies .tab-detail.show {
  display: block;
}

.accept-multichoix-holder-cookies .columns {
  display: grid;
  grid-template-columns: 30% 70%;
  justify-content: space-between;
}

.accept-multichoix-holder-cookies .tabs {
  margin-right: 20px;
}

.accept-multichoix-holder-cookies .tabs a {
  width: 100%;
  display: block;
  padding: 15px 5px;
  border-top: 1px solid #CCC;
  cursor: pointer;
  font-weight: 600;
  transition: .4s;
}

.accept-multichoix-holder-cookies .tabs a.active,
.accept-multichoix-holder-cookies .tabs a:hover {
  color: #c59418;
}

.accept-multichoix-holder-cookies .tab-title {
  font-weight: 600;
  margin-bottom: 10px;
}

.accept-multichoix-holder-cookies .tab-detail p {
  font-size: 14px;
  color: #838080;
  font-weight: 300;
  margin-bottom: 8px;
  text-align: left;
}

.accept-multichoix-holder-cookies .tab-detail p:last-of-type {
  margin-bottom: 0;
}

.accept-multichoix-holder-cookies ul {
  margin-top: 10px;
}

.accept-multichoix-holder-cookies ul li {
  font-size: 14px;
  color: #838080;
  font-weight: 300;
  margin-bottom: 8px;
}

.accept-multichoix-holder-cookies ul li:last-child {
  margin-bottom: 0;
}

.accept-multichoix-holder-cookies .tab-detail .propos-cokies-buttons {
  margin-bottom: 10px;
}

@media (max-width: 767px) {

  .accept-multichoix-holder-cookies .columns {
    grid-template-columns: 100%;
  }

  .second-btns-cookies-holder {
    flex-direction: column;
  }

  .tout-regester.display-block {
    margin-bottom: 15px;
  }

  button.tout-accepter {
    width: 100%;
  }

  .block-two-cockies,
  .block-one-cockies {
    max-height: 95%;
    overflow: auto;
  }

  .block-one-cockies p {
    font-size: 14px;
  }

  span.title-popup-cookies {
    font-size: 18px;
  }

  .accept-multichoix-holder-cookies .tabs a {
    font-size: 15px;
    padding: 15px 0;
  }

  .accept-multichoix-holder-cookies .tab-title {
    font-size: 14px;
  }

}

.prevent_sc {
  overflow: hidden;
}

/* ==========END Cookies Pop up=========== */

.list_workers .presentation {
  margin-top: 0;
  padding-top: 0;
}

.list_workers .questions {
  margin-bottom: 50px;
}

@media (max-width: 767px) {

  .workers .list_workers .worker {
    width: 100%;
  }

}

.content {
  margin-bottom: 60px;
}

.content .row {
  display: flex;
  flex-wrap: wrap;
}

.content .row .col-md-6 {
  width: 50%;
  padding: 0 15px;
}

.content .row .col-md-6 img {
    width: 90%;
    height: 100%;
    object-fit: cover;
    margin-left: 0;
    border-radius: 25px;
}

.content h1 {
  color: var(--second-color);
  font-weight: 600;
  margin-bottom: 20px;
}

.content .row .col-md-6 p {
  color: #6479b3;
}

.content .col-md-12 {
    background-color: var(--second-color);
    padding-top: 2.8rem;
    padding-bottom: 2.3rem;
    padding-left: 5rem;
    padding-right: 4rem;
    opacity: 1;
    transition: all 0.6s ease-out;
    position: relative;
    margin-top: 60px;
}

.content .col-md-12 h2 {
  font-size: 20px;
  color: #FFF;
  font-weight: 600;
  margin-bottom: 15px;
}

.content .col-md-12 p {
  color: #FFF;
}

.upload-status {
  font-size: 10px;
  color: #e80505;
}

.presentation > .images {
  height: 100%;
}

.presentation > .images > img {
  height: 100%;
  object-fit: cover;
  border-radius: 50px;
}

.grecaptcha-badge {
  display: none !important;
}

@media (max-width: 767px) {

  .content .row .col-md-6 {
    width: 100%;
  }

  .content .col-md-12 {
    padding-left: 15px;
    padding-right: 15px;
  }

}