/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #FDFEFF;
  /* Background color for the entire website, including individual sections */
  --default-color: #3E4746;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #191919;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #BA005D;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #3E4746;
  /* The default color of the main navmenu links */
  --nav-hover-color: #BA005D;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #BA005D;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}

.container_writing h1 {
  color: #fff;
  font-size: 35px;
}

.container_writing span {
  color: #BA005D;
  font-size: 30px;
  font-weight: bold;
}

body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  user-select:none;

}

.color_i_m{

  font-size: 15px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

}


.color_i_m:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

*{
  list-style: none;
  margin: 0;
  padding: 0;
  user-select:none;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

.color_espace_icon {
  color: var(--accent-color);
  padding-right: 5px;

}

.color_espace_icon i{
margin-left: 0!important;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.f_h2 {
  font-size: 32px !important;
  color: #BA005D;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #242424;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);

}

.header::after {
  content: '';
  display: block;
border-top: 1px solid #efecec;

}

.header .topbar {
  background-color: var(--background-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--accent-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .branding {
  background-color: #fff;
  min-height: 50px;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 52px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading-color);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 20px 15px;
    margin-left: 2px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 14px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: #3E4746;
    border-bottom: 2px solid var(--nav-hover-color);
  }


  .navmenu .dropdown ul {
    margin: 0;
    padding: 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 2px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    margin: 0;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--contrast-color);
    background-color: var(--nav-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 15px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

  .navmenu .listing-dropdown ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown ul li a:hover,
  .navmenu .listing-dropdown ul li .active,
  .navmenu .listing-dropdown ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .listing-dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .listing-dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
}

.selec {
  background: transparent;
  width: 100%;
  height: 40px;
  outline: none;
  border: 1px solid #c4c4c4;
  margin: 15px 0;
}

.foire_content {
  margin: 50px 100px;
}



.foire_content .accordion-item {
  margin: 20px 0;
}

.foire_content .accordion-button {
  color: #79796C;
  background-color: #fff;
}

@media(max-width: 768px)  {
  .foire_content {
    margin: 50px 10px;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #0c0c0c;
  --default-color: #ffffff;
  --heading-color: #f9f9f9;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border-top: 4px solid var(--accent-color);
  padding: 30px 20px;
}

.footer .footer-about .logo {
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 25px;
  padding: 0;
  font-weight: 700;
}

.footer .footer-about p {
  font-size: 14px;
  text-align: center;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  color: #BA005D;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer h4::after{
 content: '';
 background-color: #fff;
 width: 50px;
 height: 2px;
 display: block;
 margin: 5px 0;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -8px -9px -8px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}


.item_pied_footer {
    display: flex;
}

.item_pied_footer li {
    margin: 0 10px;
}

.item_pied_footer li a {
    color: #fff;
    font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #0c0c0c;
  --default-color: var(--contrast-color);
  --heading-color: var(--contrast-color);
  --accent-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 28px;
  color: var(--accent-color);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 4px;
  color: color-mix(in srgb, var(--heading-color), transparent 98%);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 35px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --background-color: #000000;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 160px 0 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 20px;
  color: var(--heading-color);
}

.hero .btn-get-started {
  color: var(--default-color);
  font-weight: 400;
  font-size: 15px;
  display: inline-block;
  padding: 8px 30px;
  margin: 30px 0 0 0;
  transition: 0.5s;
  text-transform: uppercase;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about img {
  object-fit: cover;
width: 100%;
}


.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p {
  line-height: 30px;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 30px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 25px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

/*--------------------------------------------------------------
# Cards Section
--------------------------------------------------------------*/
.cards .card {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px;
  margin: -1px;
  border-radius: 0;
}

.cards .card span {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-color);
}

.cards .card h4 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.cards .card p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 15px;
  margin: 0;
  padding: 0;
}

.content_nos_valeurs .top_valeur_title {
  font-weight: 700;
  margin: 50px 0;
  font-size: 30px;
  color: #BA005D;
}

.content_nos_valeurs .card_nos_valeur {
  border: 1px solid #79796C;
  margin: 10px;
  padding: 10px;

}

.content_nos_valeurs .card_nos_valeurs .bg_nos_valeurs {
  background-color: #000;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  margin: auto;
}

.content_nos_valeurs .card_nos_valeurs .text_valeurs label {
  color: #79796C;
  font-size: 17px;
  margin: 10px;
}

.content_nos_valeurs .card_nos_valeurs .text_valeurs label::after {
  content: '';
  background-color: #BA005D;
  width: 100px;
  height: 2px;
  display: block;
  border: none;
  margin: 2px auto;
}

.content_nos_valeurs .card_nos_valeurs .text_valeurs {
  text-align: center;
  margin-top: 10px;
  padding: 10px;
}

.content_nos_valeurs .card_nos_valeurs .bg_nos_valeurs span {
  color: #fff;
  font-size: 30px;
  display: block;
  text-align: center;
  padding: 10px 0;
}

.chiffre {
  margin: 100px;
}

.chiffre .title_chiffre h1 {
  text-align: center;
  font-size: 30px;
  color: #BA005D;
  font-weight: 700;
}

.chiffre .title_chiffre p {
  text-align: justify;
  font-weight: 400;
  padding: 40px;
}

.chiffre .chiffre_containt {
  display: flex;
  justify-content: center;
}

.chiffre .chiffre_containt .chiffre_bg {
  background-color: #fff;
  box-shadow: 2px 1px 2px 1px rgba(212, 210, 210, .13);
  width: 800px;
  height: 200px;
  text-align: center;
}

.chiffre .chiffre_containt .chiffre_bg::before {
  content: '';
  background-color: #BA005D;
  width: 820px;
  height: 1px;
  display: block;
  margin-left: -10px;
}

.chiffre .chiffre_containt .chiffre_bg .top_border_span {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.chiffre .chiffre_containt .chiffre_bg .content_items .title_stat {
  margin: 15px 20px;
}

.chiffre .chiffre_containt .chiffre_bg .content_items .title_stat span {
  border: 2px solid #BA005D;
  border-radius: 25px;
  padding: 5px 10px;
}

.chiffre .chiffre_containt .chiffre_bg .content_items .col {
  border-left: 1px solid #79796C;
}

.chiffre .chiffre_containt .chiffre_bg .content_items .col:first-child {
  border-left: none;
}

.chiffre .chiffre_containt .chiffre_bg .content_items .col label {
  color: #79796C;
  font-size: 16px;
}

.chiffre .chiffre_containt .chiffre_bg .top_border_span .span_border {
  background-color: #BA005D;
  width: 55px;
  height: 25px;
  color: #fdfeff;
  border-radius: 5px;
  text-align: center;
  padding-top: 2px;
}

.chiffre .chiffre_containt .chiffre_bg .p_text_chiffre {
  margin: auto;
  width: 150px;

}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 15px 0;
  
}

.clients .swiper {
  padding: 10px 0;

}

.clients .swiper-wrapper {

  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-weight: bolder;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

.center_div {
  margin: 40px 150px;

}

.sp_col {
  display: flex;
  justify-content: center;
  padding: 40px 0;

}

.card_content_service .card_bg {
  background-color: #fff;
  width: 300px;
  height: 350px;
  color: #BA005D;
  box-shadow: 4px 2px 8px 0px #3e474631;
  text-align: center;
  padding: 5px 10px;
  font-size: 25px;
  user-select: none;
}

.sp_col::after {
  content: '';
  background-color: #3E4746;
  width: 1px;
  height: 350px;
  display: block;

}

.card_content_service .card_bg .card_img {
  background-color: #fdfeff;
  box-shadow: 4px 10px 4px 4px rgba(212, 210, 210, .13);
  border: 1px solid gray;
  width: 80px;
  height: 80px;
  margin: auto;
  display: block;
  border-radius: 50px;
}

.card_content_service .card_bg .card_img img {
  margin-top: 15px;
  width: 50px;

}

.card_content_service .card_title {
  font-size: 18px;
  margin: 0;
  margin-top: 10px;
}

.card_content_service .card_bg_title a {
  border: 1px solid black;
  padding: 10px;
  font-size: 16px;
  margin: 0;
}


.card_content_service .card_bg_conts {
  margin-top: 5px;
}

.card_content_service .card_bg_conts p{
  font-size: 16px!important;
  color: #3E4746!important;
}


/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 500px;
  margin: 10px;
}

.portfolio .portfolio-item img{
  width: 100%;
  height: 510px;
  object-fit: contain;
}


.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  width: 100%;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background-color: #BA005D;
  padding: 15px;
}

.filter-app{
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.filter-product{
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .filter-app{
    display: flex;
    flex-direction: column;

  }

 
}

.portfolio .portfolio-item .portfolio-info h4 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #fff;
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.team .member .img_teams {
  border-radius: 50%;
  object-fit: cover;
  width: 150px;
height: 150px;
  margin: 30px 0;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .member .social {
  margin-top: 15px;
}

.team .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
}

.team .member .social a:hover {
  color: var(--accent-color);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .form_bakg {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .form_bakg {
    padding: 20px;
  }
}

.error-message {
  display: block;
  background: #df1529;
  color: #ffffff;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.sent-message {
  display: block;
  color: #ffffff;
  background: #059652;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}





.contact .form_bakg input[type=text],
.contact .form_bakg input[type=email],
.contact .form_bakgtextarea {
  outline: none;
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .pform_bakg input[type=text]:focus,
.contact .form_bakg input[type=email]:focus,
.contact .form_bakg textarea:focus {
  border-color: var(--accent-color);
}

.contact .form_bakg input[type=text]::placeholder,
.contact .form_bakg input[type=email]::placeholder,
.contact .form_bakg textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .form_bakg button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 8px 30px 10px 30px;
  transition: 0.4s;
  border-radius: 0;
  display: block;
}

.contact .form_bakg button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}



/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/



/*=========== confidentialite ==========*/
.img_ct img{
  object-fit: cover;
  width: 100%;
  height: auto;
}
.body_pagess {
  margin: 150px 0;
}

.content_confid {
  margin: 40px;
}

.content_confid h3 {
  color: var(--accent-color);

}

.content_confid h3::after {
  content: '';
  width: 100px;
  height: 2px;
  background-color: #2C2E30;
  color: var(--accent-color);
  display: block;
  border: none;
  margin: 8px 0;
}

.content_conf_text {
  padding: 20px 40px;
}

.top_h2_c {
  color: var(--accent-color);
  font-size: 23px;
  margin: 20px 0;
}

.check_c {
  color: var(--accent-color);
  font-size: 20px;
}


/*=========== confidentialite ==========*/

/*=========== mention-legal ==========*/
.content_legal_text {
  margin: 20px 40px;
}

@media (max-width: 768px) {
    .content_legal_text {
  margin: 20px 10px;
}

.content_confid {
  margin: 40px 10px;
}
}

.col_mention_leg {
  color: var(--accent-color);
}

.div_lws span {
  display: block;
}
/*=========== mention-legal ==========*/


/*=========== application ==========*/
.container_application {
  margin-top: 100px;
}



.bg_img_app img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: left;
}

.text_apps {
  position: relative;
top: 120px;
margin: 0 40px;
  overflow: hidden;

}

.text_apps h1{
color: #f9f9f9;
font-weight: bolder;
}

.bg_img_app2{
  background-color: var(--accent-color);
  width: 100%;
  height: 50px;
}

.bg_img_app2 nav{
 padding: 10px 40px;
}

.bg_img_app2 nav li{
  color: #fff;
 }

 .bg_img_app2 nav li a{
  color: #fff;
 }

.bg_img_app2 nav i{
  color: #fff;
 }



.title_pages {
  margin: 0 150px;
  margin-top: 100px;
}

.title_pages h1 {
  background-color: #000;
  width: 200px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  font-size: 20px;
}

.sp_title {
  background-color: #c4c4c4;
  width: 100%;
  height: 1px;
}

.body_pages .text_content_developpement {
  margin: 0 150px;
}

.body_pages .text_content_developpement p {
  line-height: 35px;
}

.body_pages .text_content_developpement .link_developpement_block {
  color: gray;
}

.body_pages .text_content_developpement .link_developpement_block:hover {
  text-decoration: underline;
}

.body_pages .title_app_h {
  margin: 80px 0;
}

.body_pages .title_app_h h1 {
  color: var(--accent-color);
  font-size: 28px;
  text-align: center;
}

.body_pages .partie_1 {
  margin-top: 0px;
  padding: 0;
}

.tp_herb{
  margin-top: 80px!important;
}

.body_pages .partie_1 .bg_partie_1 .img_partie_1 img {
  width: 500px;
  height: 300px;
  object-fit: contain;
}

.body_pages .partie_1 .bg_partie_1 .text_partie_1 p {
  width: 500px;
  line-height: 35px;
  text-align: justify;
  padding: 8px;
}

.body_pages .text_partie_1 h1 {
  font-size: 25px;
  color: var(--accent-color);
}

.body_pages .partie_1 .col_sp_app {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.titre-dev {
  color: var(--accent-color);
  text-align: center;
  font-size: 28px;
  margin: 80px 0;
  padding: 0;
}

.body_pages .section_2 .text-top-dev {
  background-color: transparent;
  width: 850px;
  display: block;
  margin: auto;
}

.body_pages .section_2 .text-top-dev p {
  color: #2C2E30;
  text-align: justify;
  line-height: 30px;
  display: inline;
}

.body_pages .text-top-dev span {
  font-family: 'Montserrat', sans-serif;
  color: #5D002F;
  font-size: 30px;
  font-weight: 400;
}

.top-tech {
  margin: 80px 0;
}

.card-container-tech {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  grid-template-areas: "card-tech1 card-tech2 card-tech3" "card-tech4 card-tech5 card-tech6" "card-tech7 card-tech8 0";
  margin: 0 30px;
}

.card-container-tech .card-tech1 {
  grid-area: card-tech1;
}

.card-container-tech .card-tech2 {
  grid-area: card-tech2;
}

.card-container-tech .card-tech3 {
  grid-area: card-tech3;
}

.card-container-tech .card-tech4 {
  grid-area: card-tech4;
}

.card-container-tech .card-tech5 {
  grid-area: card-tech5;
}

.card-container-tech .card-tech6 {
  grid-area: card-tech6;
}

.card-container-tech .card-tech7 {
  grid-area: card-tech7;
}

.card-container-tech .card-tech8 {
  grid-area: card-tech8;
}

.card-container-tech .card-content-tech {
  background-color: #fff;
  width: 230px;
  height: 300px;
  border-radius: 5px;
  margin: 20px 40px;
}

.card-container-tech .card-content-tech .card-icon-tech {
  padding-top: 30px;
  text-align: center;
  height: 100px;
}

.card-container-tech .card-content-tech .card-icon-tech img {
  width: 50px;
  height: 50px;
}

.card-container-tech .card-content-tech .card-title-tech {
  text-align: center;
}

.card-container-tech .card-content-tech .card-title-tech h4 {
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  color: #2C2E30;
  font-size: 14px;
}

.card-container-tech .card-content-tech .card-text-tech {
  text-align: center;
}

.card-container-tech .card-content-tech .card-text-tech p {
  color: #000;
  font-size: 13px;
  line-height: 30px;
  padding: 10px 20px;
}

.text-top-dev {
  background-color: transparent;
  width: 850px;
  display: block;
  margin: auto;
}

.text-top-dev p {
  color: #2C2E30;
  text-align: justify;
  line-height: 30px;
  display: inline;
}

.text-top-dev span {
  font-family: 'Montserrat', sans-serif;
  color: #5D002F;
  font-size: 30px;
  font-weight: 400;
}


@media only screen and (max-width: 950px) {
  .card-dev-container {
      margin: 0;
  }

  .card-container-tech .card-content-tech {
      margin: 20px 0;
  }

  .text-top-dev {
      width: 100%;
      padding: 0 10px;
  }

  .body_pages .section_2 .text-top-dev {
      width: 100%;
  }

}

@media only screen and (max-width: 850px) {
  .titre-dev {
      margin: 0 10px;
  }

  .top-dev {
      margin: 0 10px;
  }

}

@media only screen and (max-width: 800px) {
  .card-dev-container {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      grid-template-areas: "card-dev1 card-dev2" "card-dev3 0";
  }

  .titre-dev {
      margin: 40px 10px;
  }

  .card-container-tech {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      justify-items: center;
      align-items: center;
      grid-template-areas: "card-tech1 card-tech2" "card-tech3 card-tech4" "card-tech5 card-tech6" "card-tech7 card-tech8 ";
  }

}

@media(max-width: 768px) {
  .title_pages {
      margin: 0 20px;
      margin-top: 100px;
  }

  .body_pages .text_content_developpement {
      margin: 0 20px;
  }


  .body_pages .partie_1 {
      margin: 0 15px;
  }

  .body_pages .partie_1 .bg_partie_1 .img_partie_1 img {
      width: 100%;
  }

  .body_pages .partie_1 .bg_partie_1 .text_partie_1 p {
      width: 100%;
      line-height: 35px;
      text-align: justify;
      padding: 5px;

  }

  .body_pages .section_2 .text-top-dev {
      margin: auto 0px;
  }


}


@media only screen and (max-width: 550px) {
  .card-dev-container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: "card-dev1" "card-dev2" "card-dev3" "0";
  }

  .card-container-tech {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas: "card-tech1" "card-tech2" "card-tech3" "card-tech4" "card-tech5" "card-tech6" "card-tech7" "card-tech8 ";
  }

  .body_pages .partie_1 .bg_partie_1 .img_partie_1 img {
      width: 100%;
      object-fit: cover;
      height: auto;
  }
}

.div_img_v {
  display: flex;
}

.div_img_v img {
  width: 20px;
  height: 20px;
  margin:   5px;
  overflow: hidden;
}

.ul_list_maint i {
  color: #BA005D;
  font-size: 20px;
}
/*=========== application ==========*/


/*=========== hébergement ==========*/
.center_flex_price{
  display: flex;
justify-content: center;
}

.card_body {
  border: 1px solid #BA005D;
  border-radius: 10px;
  background-color: #3E4746;
  width: 300px;
  height: 580px;
}

.cta_btn{
  background-color: var(--accent-color);
  color: #fff;
  padding: 10px;
}

.contnt_btn{
display: flex;
justify-content: end;
margin: 0 150px;
}

.cta_btn:hover{
  color: #fff;

}

.col_heb {
  padding: 40px;
  display: flex;
  justify-content: center;
}

.title_center {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.titre_1 {
  font-size: 25px;
  color: #fff;
  background-color: #BA005D;
  width: 80%;
  text-align: center;
}

.text_premium {
  color: #fff;
  text-align: center;
  padding-top: 30px;
}

.border_circle {
  display: flex;
  justify-content: center;
  margin-top: 4px;

}

.border_circle_card {
  background-color: #f5f5f5;
  border: 1px solid #BA005D;
  width: 130px;
  height: 130px;
  border-radius: 100px;

}

.text_card_cicle {
  display: flex;
  justify-content: center;
  padding: 35%;
  color: #BA005D;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 26px;
}

.botom_span {
  color: #BA005D;
  display: block;
  margin-top: -50%;
  margin-left: 40%;
  font-size: 18px;
}

.container_p_description ul {
  margin-top: 25px;
}

.container_p_description ul li {
  color: #fff;
}

.check_green {
  color: green;
  padding: 0 8px;
}

.ul_list_maint i {
  color: #BA005D;
  font-size: 20px;
}

/*=========== hébergement ==========*/


/*=========== maitenance ==========*/
.maintenance_center_content{
  margin: 0 120px;
}

.content_maint {
    margin: 40px 20px;
}

.div_img_v label {
    font-size: 18px;
}

.div_img_v img {
    width: 20px;
}

.img_preventive img {
    width: 360px;
}

/*=========== maitenance ==========*/


/*=========== devis ==========*/
.top_select_dev{
  margin-top: 0px;
}
.top_select_dev {
  position: relative;
  height: 100vh; /* Hauteur de la section */
}

.bg_content_formationd {
  position: relative;
  height: 100vh;
  width: 100%;
}

.image-container {
  position: relative; /* Assure que le pseudo-élément est positionné relativement à ce conteneur */
  width: 100%;
  height: 100vh;
}

.img_fluid {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Couvre toute la section */
  display: block; /* Assure que l'image prend toute la largeur du conteneur */
}


.image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
  pointer-events: none; /* Permet de cliquer sur l'image */
  z-index: 1; /* Assure que le pseudo-élément est au-dessus de l'image */
}

.img_fluid {
  position: relative;
  z-index: 0; /* Assure que l'image est en dessous du pseudo-élément */
}


.content_overlay {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  z-index: 2;
}

.content_overlay h2{
color: var( --heading-color);
font-weight: bolder;
}

.content_overlay p{
color: #fff;
padding: 50px 0;
font-weight: bold;
  }

  .content_border_r{
    display: flex;
  }

  .border_dbox  {
  margin: 30px 10px;
  }

  .border_dbox .card_img2 {
    background-color: #fdfeff;
    box-shadow: 4px 10px 4px 4px rgba(212, 210, 210, .13);
    border: 1px solid gray;
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
    font-weight: bold;
    border-radius: 100px;
  }
  
  .border_dbox .card_img2 img {
    margin: 25px;
    width: 50px;
  
  }

  .border_dbox .card_img3 {
    background-color: #fdfeff;
    box-shadow: 4px 10px 4px 4px rgba(212, 210, 210, .13);
    border: 1px solid gray;
    width: 100px;
    height: 100px;
    margin: auto;
    display: block;
    font-weight: bold;
    border-radius: 100px;
 
  }
  
  .border_dbox .card_img3 img {
    margin: 25px 33px;
    width: 30px;
  
  }

  .text_choice{
    font-weight: bolder;
    font-size: 16px;
    color: #fff;
  }

 

  @media(max-width: 768px) {
    .top_select_dev {
      position: relative;
      height: 1300px; /* Hauteur de la section */
    }

    .img_fluid {
      height: 1300px;
    }
    
    
    .image-container::before {
      height: 1300px;
    }
    
    .bg_content_formationd {
      position: relative;
      height: auto;
      width: 100%;
    }

    .content_overlay {
     
      padding: 0 15px;
    }

    .text_devs p  {
      padding: 0;
      }
    
  }
  


/*=========== devis ==========*/

/*=========== devis app-web ==========*/

.containers_d {
  margin-top: 50px;
}

.containers_d .text_desc span {
  color: #c4c4c4;
  font-size: 18px;
}

.containers_d .text_titled h1 {
  font-size: 25px;
  font-weight: 400;
  text-align: center;
  padding-top: 50px;
  letter-spacing: 5px;
}

.containers_d .text_titled span {
  color: #BA005D;
  font-size: 20px;
}

.containers_d .text_titled p {
  text-align: center;
  color: var(--accent-color);
  letter-spacing: 2px;
  padding: 10px;
}

.containers_d .selec {
  background: transparent;
  width: 450px;
  height: 35px;
  outline: none;
  border: 1px solid #000;
  margin: 15px 0;
}

.checkbox {
  margin: 15px 0;
}

.containers_d .lab {
  color: #2C2E30;
  font-size: 12px;
}

.date-limit {
  color: #000;
  margin: 15px 0;
  width: 100%;
  height: 35px;
  outline: none;
  border: 1px solid #000;
}

.line_tr {
  display: flex;
  width: 100%;
}

.containers_d .colon_td p {
  background: var(--nav-dropdown-color);
  border: 1px solid #2C2E30;
  opacity: 0.8;
  font-size: 13px;
  font-style: italic;
  color: var(--contrast-color);
  padding: 7px 8px;
 
}

.colon_td {
  padding: 0 5px;
  width: 50%;
}

.containers_d .content-inp-r {
  color: #2C2E30;
  margin: 10px;
}

.containers_d .content-inp-r .label-inp-r {
  color: #2C2E30;
  font-weight: 400;
  font-size: 12px;
}

.containers_d .content-inp-r .inp-items {
  margin-top: 10px;
}

.containers_d .content-inp-r .inp-items {
  display: flex;
}

.containers_d .content-inp-r .inp-items .inp-item {
  padding-right: 10px;
}

.containers_d .content-inp-r .inp-items .inp-item span {
  color: #2C2E30;
  font-size: 12px;
  padding: 0 5px;
}

.form {
  width: 920px;
  margin: auto;
  margin-top: 50px;
}

.inf-center {
  background: #2C2E30;
  color: white;
  height: 100px;
  margin-top: 100px;
  font-weight: 400;
  letter-spacing: 4px;
  font-family: 'Cardo', serif;
  font-size: 20px;
  text-align: center;
  padding-top: 30px;
}

.line_tr2 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "colon_1 colon_2" "colon_3 colon_4" "colon_5 colon_5" "colon_6 0";
  height: 700px;
}

.line_tr2 .colon_1 {
  grid-area: colon_1;
}

.line_tr2 .colon_2 {
  grid-area: colon_2;
}

.line_tr2 .colon_3 {
  grid-area: colon_3;
}

.line_tr2 .colon_4 {
  grid-area: colon_4;
}

.line_tr2 .colon_5 {
  grid-area: colon_5;
}

.line_tr2 .colon_6 {
  grid-area: colon_6;
}

.line_tr2 .colon_td2 .text-p2 {
  margin-top: 25px;
  color: #2C2E30;
  opacity: 0.6px;
  font-size: 14px;
}

.line_tr2 .colon_td2 .inptxt {
  font-size: 13px;
  border-radius: 5px;
  width: 450px;
  height: 40px;
  padding: 15px;
  margin: 15px 0;
  outline: none;
  border: 1px solid #000;
}

.line_tr2 .colon_td2 .area-text {
  width: 910px;
  height: 200px;
  padding: 15px;
  border-radius: 5px;
  font-size: 13px;
  outline: none;
  resize: none;
  border: 1px solid #000;
  margin-top: 15px;
}

.inptxt::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #BA005D;
  font-size: 12px;
  font-style: italic;

}

.area-text::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #BA005D;
  font-size: 12px;
  font-style: italic;
}

.btttn {
  margin-top: 40px;
}

.btttn {
  width: 150px;
  border: none;
  padding: 7px 35px;
  cursor: pointer;
  outline: none;
  background: #2C2E30;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: white;
  font-size: 16px;
  border-radius: 2px;
}

.btttn:hover {
  background-color: #c4c4c4;
  transition: 0.3s;
}

.btttn:hover {
  color: #fff;
}


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

  .containers_dv {
      margin: 70px 15px;
  }

  .form {
      width: 100%;
      padding: 15px;
  }

  .line_tr {
      display: flex;
      width: 100%;
      flex-direction: column;
  }

  .containers_d .selec {
      width: 100%;
  }


  .colon_td {
      width: 100%;
  }

  .line_tr2 {
      grid-template-areas: "colon_1 colon_2" "colon_3 colon_4" "colon_5 colon_5" "colon_6 colon_6";
      justify-items: normal;
      align-items: normal;
  }

  .line_tr2 .colon_td2 .area-text {
      width: 100%;

  }

  .line_tr2 .colon_td2 .inptxt {
      width: 100%;
  }

  .line_tr2 .colon_td2 {
      margin: 0 5px;
  }

}

@media only screen and (max-width:768px) {
  .form {
    padding: 5px;
}
}

@media only screen and (max-width:850px) {
  .containers_d .descriptif_content {
      margin: 50px 10px;

  }
}

@media only screen and (max-width:500px) {
  .line_tr2 {
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr;
      grid-template-areas: "colon_1" "colon_2" "colon_3" "colon_4" "colon_5" "colon_6";
      height: 1000px;
  }

  .btttn {
      width: 100%;
  }

  .bg_img_app img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      object-position: left;
  }

}
/*=========== devis app-web ==========*/


/*=========== devis app-mobile ==========*/
.divmob {
  text-align: center;
  padding: 20px 0;

}

.form2_container {
  display: grid;
  place-items: center;
  width: 100%;
  height: auto; /* 100% de la hauteur de la fenêtre */
}

.form2_content {
  width: 750px;
  height: auto;
  overflow: hidden;
  /* Ajoutez d'autres styles ici */
}

.col_form2 {
  padding: 0 10px;
  margin-top: 5px;
}

.div_item label {
  background: var(--nav-dropdown-color);
  width: 100%;
  border: 1px solid #2C2E30;
  opacity: 0.8;
  font-size: 13px;
  font-style: italic;
  color: var(--contrast-color);
  padding: 7px 8px;
 margin: 15px 0;
}



.div_item select {
  outline: none;
  width: 100%;
  height: 35px;

}


.div_inptg {
  margin: 40px 0;
}

.div_inptg label {
  color: #3E4746;
  padding: 8px 0;
}

.div_inptg input {
  font-size: 13px;
  border-radius: 5px;
  width: 100%;
  height: 45px;
  padding: 15px;
  outline: none;
  border: 1px solid #000;
}

.div_inptg textarea {
  outline: none;
  resize: none;
  width: 100%;
  height: 300px;
  padding: 10px;
}

.div_inptg textarea::-webkit-input-placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #BA005D;
  font-size: 12px;
  font-style: italic;
}

.btn_envoi2 input:hover {
  color: #BA005D;
}

.btn_close_form {
  display: flex;
  justify-content: end;
  margin: 40px;
}

.btn_close_form {
  color: #BA005D;
  font-size: 30px;
  cursor: pointer;
}




.div_inptc p {
  color: #c4c4c4;
}

@media (max-width:768px) {
  .form2_content {
    width: 100%;    
}

.mdv2{
  margin: 0 10px;
}

.div_inptg {
  margin: 40px 10px;
}


}

/*=========== devis app-mobile ==========*/



.starter-section {
  /* Add your styles here */
}

@media(max-width: 1130px) {
  .center_div {
    margin: 40px 100px;

  }

}

@media(max-width: 1000px) {
  .center_div {
    margin: 40px 50px;

  }

}

@media(max-width: 930px) {
  .center_div {
    margin: 40px 0px;
  }

}

@media(max-width: 842px) {
  .chiffre .chiffre_containt .chiffre_bg::before {
    width: 100%;
    margin-left: 0px;
  }
}

@media(max-width: 768px) {
  .chiffre {
    margin: 100px 0;
  }

  .chiffre .title_chiffre p {
    padding: 40px 10px;
  }

  .chiffre .chiffre_containt .chiffre_bg {
    width: 100%;
    height: auto;
  }

  .chiffre .chiffre_containt .chiffre_bg .content_items .col {
    border-left: none;
    margin: 30px 0;
  }
}