/*

TemplateMo 574 Mexant

https://templatemo.com/tm-574-mexant

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #212741;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 26px;
  color: #212741;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #ff511a;
  color: #fff;
}

::-moz-selection {
  background: #ff511a;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}
utton a:hover {
  opacity: 0.9;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 30px;
  text-transform: uppercase;
  color: #ff511a;
  font-weight: 700;
  margin-top: -55px;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  color: #212741;
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.header-area {
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

.header-area .logo {
  flex: 0 0 auto; /* Cela empêche le logo de se redimensionner */
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.header-area .logo {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto; /* Pour empêcher l'étirement */
}

/* HEADER PRINCIPAL */
.background-header {
  background-color: #5a95b7;
  height: 85px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(182, 72, 72, 0.15) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;

 
}
/* Logo par défaut */
.header-area .logo img {
  width: auto;
  height: 60px; /* Définis une hauteur fixe, ou ajuste selon la taille de ton logo */
  object-fit: contain; /* Empêche l'étirement du logo */
}

/* Si le header est sticky, garder les dimensions du logo inchangées */
.header-area.sticky .logo img,
.header-area.background-header .logo img {
  height: 60px; /* Assurez-vous que la hauteur reste la même */
  width: auto; /* Assurez-vous que la largeur est ajustée proportionnellement */
  object-fit: contain; /* Empêche l'étirement du logo */
  margin-left: 20px;
}

/* CONTAINER DU HEADER */
.header-area .main-nav  {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  /*margin-left: -140px;*/
  margin-top: 40px;
  margin-bottom: 25px;
  margin-left: 5px;
  margin-right: 150px;
  
}


.header-area {
  
  position: absolute;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 120px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-left: -90px;
  display: flex;
    align-items: center;
    height: 80px;
}

.background-header .main-nav .logo {
  line-height: 80px;
  width: 160px;
  
}

.background-header .nav {
  margin-top: 18px !important;
  margin-bottom: 35px;
  margin-left: 10px;
  margin-right: 50px;
  
}



.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: -70px;
  
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
 
}


.header-area .main-nav .nav li {
  padding-left: 25px;
  padding-right: 25px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 300;
  font-size: 14px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
  
}
.header-area .main-nav .nav li:last-child a {
  font-size: 14px;
  color: #fff;
  background-color: #596771;
  padding: 10px 20px !important;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  height: auto;
  line-height: 25px;
  letter-spacing: 0.5px;
  transition: all .3s;
}


/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {

  #top {
 
    height: 500px;
}
  .slide-inner {
    height: 80vh; /* Réduit la hauteur sur tablette */
    background-size: contain; /* Ajuste l’image pour ne pas être trop coupée */
}
.right-content {
  gap: 30px; /* Réduit l’espace entre les cartes */
}
.card {
  width: 250px; /* Réduit légèrement la taille des cartes */
}
  .header-area .main-nav {
      flex-direction: column;
      align-items: center;
  }

  .header-area .main-nav .nav {
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
  }
  .slide-inner .header-text {
    width: 100vw !important;
    
  }

  .header-area .main-nav .logo {
    color: #1e1e1e;
    max-width: 100%;  /* Empêche le logo de dépasser la largeur du conteneur */
    margin-left: -520px;
    object-fit: contain; /* Assure que l'image garde ses proportions sans être déformée */
   
  }

 

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 15px;
    line-height: 80px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }
  
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    transition: all 0s ease 0s;
    margin-left: 0px;
   
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
   
  }
  .header-area.header-sticky .nav {
    margin-top: 400px !important;
    margin-right: 5px;

  }
  .background-header.header-sticky .nav 
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
    
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ff511a!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
   
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
    
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
    
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
    margin-top: 90px;
  }
}










/* Menu REduit */
.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #666666;
}


/* Correction pour éviter des bugs d'affichage */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Évite les défilements horizontaux */
}

@media (max-width: 767px) {

  #top {
    height: 300px;
}

  .slide-inner .header-text {
    width: 100% !important;
    
  }
  .slide-inner {
    height: 60vh; /* Hauteur réduite sur mobile */
    background-size: contain; /* Évite le recadrage extrême de l’image */
}
  .header-area .main-nav .logo {
    color: #1e1e1e;
    max-width: 100%;  /* Empêche le logo de dépasser la largeur du conteneur */
    margin-left: -220px;
    object-fit: contain; /* Assure que l'image garde ses proportions sans être déformée */
   
  }
  .right-content {
    flex-direction: column; /* Passe les cartes en colonne */
    gap: 20px;
  }
  .card {
    width: 90%; /* Les cartes prennent presque toute la largeur */
  }
 

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 15px;
    line-height: 80px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    transition: all 0s ease 0s;
    margin-left: 0px;
   
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
   
  }
  .header-area.header-sticky .nav {
    margin-top: 400px !important;
    margin-right: 5px;

  }
  .background-header.header-sticky .nav 
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
    
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #ff511a!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
   
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
    
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
    
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
    margin-top: 90px;
  }
}


/*



---------------------------------------------
banner
--------------------------------------------- 
*/








/*
---------------------------------------------
services
---------------------------------------------
*/ 

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #525260;
  margin-bottom: 30px;
  margin-right: 30px;
}

/*section.about-us .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

section.about-us .section-heading {
  width: 100%; /* S'assure que le titre occupe toute la largeur disponible 
  text-align: center;
}

section.about-us .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
}

section.about-us .right-content {
  text-align: center;
  font-size: xx-large;
}
*/


/* 
---------------------------------------------
partners
--------------------------------------------- 
*/

section.partners {
  background-color: #212741;
  padding: 80px 0px;
}

section.partners .item {
  margin: 0px 15px;
  cursor: pointer;
  transition: all .3s;
}

section.partners .item:hover {
  opacity: 0.75;
}



/* 
---------------------------------------------
footer 
--------------------------------------------- 
*/

footer {
  background-color: #181d30;
  text-align: center;
  padding: 25px 0px;
}

footer p {
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #ff511a;
}


/* 
---------------------------------------------
services page
--------------------------------------------- 
*/

.main-services .service-item {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ecf8f2;
}

.main-services .last-service {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.main-services  .left-image {
  margin-right: 15px;
}

.main-services  .left-image img {
  border-radius: 5px;
}

.main-services  .right-image {
  margin-left: 15px;
}

.main-services  .right-image img {
  border-radius: 5px;
}

.main-services .right-text-content {
  margin-left: 15px;
}

.main-services .left-text-content {
  margin-right: 15px;
}

.main-services .right-text-content i,
.main-services .left-text-content i {
  font-size: 64px;
  color: #43ba7f;
  background-color: #ecf8f2;
  width: 120px;
  height: 120px;
  text-align: center;
  display: inline-block;
  line-height: 120px;
  border-radius: 5px;
}

.main-services .right-text-content h4,
.main-services .left-text-content h4 {
  font-size: 36px;
  font-weight: 700;
  color: #212741;
  margin-top: 40px;
  margin-bottom: 30px;
}

section.service-details .naccs {
  position: relative;
}

section.service-details .naccs .menu {
  text-align: center;
}

section.service-details .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.service-details .naccs .menu div.active {
  color: #ff511a;
}

section.service-details ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.service-details ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.service-details ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.service-details ul.nacc li .right-content {
  padding: 50px 50px 50px 0px;
  margin-left: 470px;
}

section.service-details ul.nacc li .right-content h4 {
  font-size: 24px;
  color: #212741;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 120px;
}

section.service-details ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.service-details ul.nacc li .right-content span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #212741;
  font-style: italic;
  margin-bottom: 12px;
}

section.service-details ul.nacc li .right-content .last-span {
  margin-bottom: 0px;
}

section.service-details ul.nacc li .right-content p {
  margin-bottom: 30px;
}

section.service-details ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}



/* 
---------------------------------------------
contact us page
--------------------------------------------- 
*/

section.map .info-item {
  text-align: center;
  padding: 40px 30px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.map .info-item:hover {
  margin-top: -70px;
}

section.map .info-item i {
  font-size: 36px;
  color: #525260;
  margin-bottom: 25px;
}

section.map .info-item h4 {
  font-size: 18px;
  color: #212741;
  font-weight: 600;
  margin-bottom: 12px;
}

section.map .info-item a {
  font-size: 15px;
  font-weight: 600;
  color: #525260;
  transition: all 0.3s;
}

section.map .info-item a:hover {
  color: #ff511a;
}

.texte{
 text-align: center;
 color: #05be62 !important; 
 font-size: 30px;
 margin-bottom: 5px;
 margin-top: -30px;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 50px;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: #212741;
}
#contact button.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #ff511a;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: #43ba7f;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/
.slide-inner {
  
  width: 100%;
  height: 100vh; /* Prend toute la hauteur de l'écran */
  background-size: cover; /* Couvre tout l’espace sans déformation */
  background-repeat: no-repeat;
  margin-top: -60px;
  
  
} 

body {
  overflow-x: hidden;
}
@media (max-width: 600px) {
  #top{
    height: 230px !important;
    background-position: center;
    margin-top: 70px !important;
    background-size: cover; /* Couvre tout l’espace sans déformation */
  }
  }
@media (max-width: 800px) {
  #top{
    height: 300px;
  }
  }
@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }
  .header-area {
    background-color: #212741;
  }
  .slide-inner .header-text {
    width: 100
  
  }
  #top{
    height: 500px;
    height: 350px ;
    background-position: center;
    margin-top: 45px;
    background-size: cover; /* Couvre tout l’espace sans déformation */
  }
  .right-content {
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */
    justify-content: center; /* Centre les cartes */
    gap: 25px;
  }
  .card {
    width: 230px; /* Ajuste la largeur pour bien s’adapter */
  }
  .simple-cta {
    text-align: center;
  }
  section.simple-cta .buttons {
    justify-content: center;
  }
  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 15px;
    font-size: 15px;
    padding: 15px 20px;
  }
  section.about-us .right-content {
    margin-left: 0px;
    margin-top: 60px;
  }
  section.calculator .left-image {
    display: none;
  }
  .testimonials .item img {
    max-width: 200px;
    right: 50px;
  }
  section.partners .item {
    margin: 15px;
  }
  section.top-section .accordions {
    margin-left: 0px;
    margin-top: 45px;
  }
  .what-we-do .left-content {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .main-services .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-services .right-text-content {
    margin-left: 0px;
  }
  .main-services .right-image {
    margin-left: 0px;
    margin-top: 30px;
  }
  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0px;
    transform: translateY(0px);
  }
  section.service-details ul.nacc li .left-image img {
    border-radius: 15px;
  }
  section.service-details ul.nacc li .right-content {
    padding: 50px;
    margin-left: 0px;
  }
  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0px;
  }
  section.service-details ul.nacc li.active {
    display: inline-block;
  }
  section.service-details ul.nacc li {
    display: none;
  }
  section.map .info-item {
    margin-top: 30px;
  }

  /* Ajout pour rendre le menu navigation responsive */
  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .nav li {
    list-style: none;
    margin: 10px 0;
  }

  .nav li a {
    padding: 10px 15px;
  }

  .support-hours {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .support-hours .hours, 
  .support-hours .separator, 
  .support-hours .sup {
    margin: 5px 0;
  }
}


.lightbox-img:hover {
  transform: scale(1.05);
  margin-bottom: 20px;
}

/* Container pour les horaires de support */
header .support-hours {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #212741; /* Couleur de texte par défaut */
  margin-left: 40px;
  margin-right: -5px;
}

.sup {
margin-left: -25px;
}



header .support-hours .hours {
  padding: 5px 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

header .support-hours .separator {
  margin: 0 10px;
  color: #ccc;
}

header .support-hours .hours:hover {
  background-color: #666666;  /* Changement de couleur au survol */
  color: white; /* Texte en blanc lorsqu'il est survolé */
}

/* Container pour le support */
header .support-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #212741; /* Couleur de texte par défaut */
}

/* Style pour le lien Support */
header .support-item a {
  display: flex; /* Utilisation de flexbox */
  align-items: center;  /* Centrage vertical */
  justify-content: center;  /* Centrage horizontal */
  padding: 5px 10px;
  background-color: #f5f5f5; /* Fond clair par défaut */
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  font-size: 16px;
  color: #212741; /* Couleur de texte par défaut */
  text-decoration: none;
  margin-bottom: 20px;
  margin-left: 80px;
  margin-right: 50px;
}

header .support-item a i {
  margin-left: 5px; /* Espacement pour l'icône */
}

/* Changer la couleur au survol */
header .support-item a:hover {
  background-color: #666666;  /* Changement de couleur au survol */
  color: white; /* Texte blanc au survol */
}


button, a {
  padding: 10px 20px;
  font-size: 16px;
}
img {
  max-width: 100%;
  height: auto;
}



/* CARDS BOITE */
/* From Uiverse.io by alexmaracinaru */ 

.right-content {
  display: flex;
  justify-content: center; /* Centre les cartes horizontalement */
  align-items: center; /* Centre verticalement si nécessaire */
  gap: 80px; /* Espace entre les cartes */
  flex-wrap: nowrap; /* Empêche le passage à la ligne */
  width: 100%; /* Assure que le conteneur prend toute la largeur */
  max-width: 1200px; /* Limite la largeur pour éviter trop d'étalement */
  margin: 0 auto; /* Centre le conteneur dans la page */
 }
.card {
  width: 280px; /* Taille fixe */
  background: white;
  padding: 1em;
  border-radius: 6px;
  text-align: left;
  
}


.card-image {
  background-color: rgb(236, 236, 236);
  width: 100%;
  height: 220px;
  border-radius: 6px 6px 0 0;
}



.category {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  color: rgb(63, 121, 230);
  padding: 10px 7px 0;
  text-align: center;
}

.category:hover {
  cursor: pointer;
}

.heading {
  font-weight: 600;
  color: rgb(88, 87, 87);
  padding: 7px;
}

.heading:hover {
  cursor: pointer;
}

.author {
  color: gray;
  font-weight: 400;
  font-size: 11px;
  padding-top: 20px;
}

.name {
  font-weight: 600;
}

.name:hover {
  cursor: pointer;
}