@media (min-width: 576px) {
	#particles-js {
		min-width: 360px;
		min-height: 360px;
	}
}

#particles-js .particles-js-canvas-el {
	min-width: 280px;
	min-height: 280px;
}

@media (min-width: 576px) {
	#particles-js .particles-js-canvas-el {
		min-width: 360px !important;
		min-height: 360px !important;
		width: auto;
	}
}

																	 
 /*                                                    
.bg-img-1 {	    background-image: url(../img/slider/slide03.jpg);	}
.bg-img-2 {	   background-image: url(../img/slider/slide05.jpg);	}
.bg-img-3 {	    background-image: url(../img/slider/slide02.jpg);	}        

.bg-img-4 {	    background-image: url(../img/slider/slide00.jpg);	}
   */
.bg-img-1 {	    background-image: url('../img/slider/slide03.webp');  	}
.bg-img-2 {	    background-image: url('../img/slider/slide05.webp');	}
.bg-img-3 {	    background-image: url('../img/slider/slide02.webp');	}

.bg-img-4 {   background-image: url('../img/slider/slide00.webp'); width:100%; }
	
/*  Begin   Carousel Confiance Clients   */
.caption-content h2,      
.white {color:white;}
.logo-carousel {
  overflow: hidden;
 margin:auto; width: 80%;
  height: 120px;
}



.logo-track {
  display: flex;
  width: max-content;
  animation: scroll 22s linear infinite;
}

.logo-track img {
  height: 100px;
  margin: 0 30px;
  object-fit: contain;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*  End Carousel Confiance Clients  */



.bg-stickey {
    position: absolute;
    left: -200px;
    bottom: -140px;
    z-index: -1;
    animation: swing 2s linear infinite;
}

/* Vos styles pour tablettes petites/moyennes */
@media (min-width: 576px) and (max-width: 767px) {    
	.bg-img-1 { background-image: url(../img/slider/slide03.rep.webp);width:100%;}
	.bg-img-4 {	background-image: url(../img/slider/slide00.rep.webp);width:100%;}
}
/* Version Mobile (< 576px) */
@media (max-width: 576px) {
 /* .bg-img-1, .bg-img-2, .bg-img-3 {   background-position: center;  height:; }*/
 .bg-stickey img {max-height: 146px;display:none;}
 #nav-arrows{display:none;}    #nav-dots{display:none;visibility:Hidden;}
  .bg-img-1 { background-image: url(../img/slider/slide03.rep.webp);width:100%;}
  #bg-sl2 {display:none;} .bg-img-2 { display:none; !important; }
  #bg-sl3 {display:none;} .bg-img-3 { display:none; !important; } 
  .bg-img-4 { background-image: url(../img/slider/slide00.rep.webp); background-size: cover; !important;
								background-position: center;}
}

/* parallax solutions */ 

#solutions {
    background-image: url(../img/parallax/parallax-2.webp);  
    padding: 0;
}
#solutions a { text-decoration: none; outline: none; }
#solutions .overlay {
    background: url("../img/slide_bg.png") repeat scroll 0 0 transparent;
    padding: 100px 0 120px;
}

.solutions-group {	padding-left:6%; padding-right:6%;color:white;	}

/* Version Mobile (< 576px) */
@media (max-width: 576px) { 
#solutions {background-image: url(../img/parallax/parallax-2.rep.webp);background-size: cover;  }
}
rd-navbar-brand
						.navbar-brand img {
	max-width: 170px;
	max-height: 58px;
	width: auto;
	height: auto;
}
						.brand { 
						}




#navigation {
background-color: #084331;
}
.btn-blue {
    background-color: #fa721b;
}
.btn-effect:before { 
    background: #fff; 
	}
	.btn-effect:hover, .btn-effect:focus, .btn-effect:active {
    color: #fa721b;
}

a {	    color: #fa721b;	}
	
#nav-arrows > a:hover {	    background-color: #fa721b;	}
#nav-arrows > a.sl-prev:hover { 	background-color: #fa721b;	}
#nav-arrows > a.sl-next:hover {   background-color: #fa721b; border-color: #fff;	}

#about {    background-color: #39685a;}




/* Change the background color of the dropdown button when the dropdown content is shown 
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}*/ 

/* ====================================
   NAVIGATION – Menu principal & dropdown
   ==================================== */

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}


/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown 
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}*/
.dropdown-content a:hover {	    color: #fff;	    background-color: #fa721b;	}
/*		.dropdown-content h3 a:hover {	    color: #fff;	    background-color: #fa721b;	}
/* ====================================
   Responsive – Mobile (max-width: 767px)
   ==================================== */
@media (max-width: 768px) {
  /* Empêche le dropdown de se chevaucher */
  .dropdown-content {
    position: static;
    display: none;
    background-color: #f9f9f9;
    box-shadow: none;
    padding: 0;
    min-width: 100%;
  }

  .dropdown-content a {
    padding: 12px;
    border-bottom: 1px solid #ddd;
  }

  /* Active dropdown menu when .open class is added (via JS) */
  .dropdown.open .dropdown-content {
    display: block;
  }

  /* Corrige les chevrons/dropbtn sur mobile */
  .dropbtn {
    float: right;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
  }

  .dropdown.open .dropbtn {
    transform: rotate(-90deg);
  }
 }
/* ====================================
   FIN Menu Navigation
   ==================================== */
   

.btn-blue {	background-color: #fa721b;	}
.bg-blue {	    background-color: #fa721b;	}  /*  ou ça  :  #39685a  (green)  */


 h&, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: ' ', sans-serif;    
    color: #084331;
}
	.breadcrumbs-custom-main.custom-title h1 { color: #084331;}
		  ul.banner-path li { font-size: 26px;
							margin: 0 0 10px;
							padding-bottom: 6px;
	  position: relative;    }
	ul.banner-path li a { color: #084331;} 
	ul.banner-path li a:hover { color: white;}

		.sec-title h2 { 	text-transform:  ;	}
		.sec-title h2:after {    border-bottom: 2px solid #084331;	}
		
 
 
 ul.external li a {
    background-color: rgba(250, 114, 27, 0.9);
    color: #fff;  
}
 ul.external li a:hover, a:focus, .btn:focus {	 color: #fa721b;   background-color: rgba(255, 255, 255, 0.9);  text-decoration: none;	}
 
 

#submit:before {	    background-color: #084331;	color: #fff;	}

.contact-details h3 {  color: #fa721b;	text-transform: capitalize;   border-bottom: 2px solid #fa721b;	}


.owl-wrapper {font-size: px;}


#testimonials .overlay {	background-color: rgba(8,67,49, 0.78);	}	/*	vert * /
#testimonials .overlay {	background-color: rgba(250,114,27, 0.78);	}	/*	orange */

.price-table.featured ul li:last-child, .price-table ul li:last-child:hover {
							background-color: #fa721b;	}
.price-table.featured .value {	background-color: #fa721b;	}
.price-table ul li:last-child:hover {	    background-color: #fa721b;	}

.contact-details h3 a:hover {	    color: #fff;	    background-color: #fa721b;	}
.contact-details  .fa { color:#fa721b;	}


 .card-body p {line-height:20px; font-size:16px;}


/* Version Mobile (< 576px) */
@media (max-width: 576px) { 
#testimonials { background-image: url(./img/parallax/testimonial.webp); }
#social {background-image: url(./img/slider/slide00.rep.webp); background-size: cover;  }
}

#social .social-button i a:hover {	    color: #fa721b;	    border: 2px solid #fa721b;	}
.footer-social ul li a:hover { 	 color: #fa721b;	    text-decoration: none;    outline: none;}

.contact-details  .fa { color:#fa721b;	}

	.submit {
    background-color: #C6C6C6;
    border: 0 none;
    border-radius: 0;
    right: 0;
    top: 0; height: 50px; width: 100%;
	color:black;
}	.submit:hover {	color: #fa721b;	}

  
	/*    BG banner CTA   * /
.banner-cta {padding-left:40%;}
*/
.cta-caption { 
    color: #fff;
    display: table;
    height:auto;
    left: 0;
    min-height: 50%;
    position: absolute; padding-top: 3%;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 11;
	
} 	
#cta-banner {
    position: relative;
    padding: 0; 
}


/* Version Desktop (par défaut) */
.bg-banner, .bg-banner-496 {
  background-image: url(../img/slider/slider-bg-001.webp);
  background-size: cover;       /* Couvre tout l'espace sans déformation */
 /* Centre l'image */
  width: 100%;
}

.bg-banner {
  height: 400px; /* Hauteur par défaut */
}

.bg-banner-496 {
  height: 496px; /* Hauteur alternative */
}

/* Version Mobile (< 576px) */
@media (max-width: 576px) {
  .bg-banner {   background-position: center;  height: 300px; /* Hauteur par défaut */}
}


 .card-group-corporate { line-height:44px; font-size:1.76em;}
 .card-header { }
.card-title {
    font-size: 26px;
    line-height: 1.5;
    letter-spacing: .03em;
    padding-bottom: 12px;
}
.service-item:hover .service-icon {
    border: 3px solid #fa721b;
    margin-bottom: 20px;
    color: #fa721b;
}

  .white { color:#fff;	}		
 .orange { color:#fa721b;	}
 .dk-green { color:#084331;	}
 .green-lgt { color:#39695a;	} 
 .t-capz { text-transform:capitalize;	}
  h3 	{    font-size: 34px;}
  .Num-210{color: rgba(250,114,27, 0.98);font-size:210%;}
  .Avis-156{color: rgba(250,114,27, 0.86);font-size:156%;}
 .EtrRapp {font-size:22px;color:#fa721b;text-transform:uppercase;}
 
 
 ul.external li a {
    background-color: rgba(250, 114, 27, 0.9);
    color: #fff;  
}
 ul.external li a:hover, a:focus, .btn:focus {	 color: #fa721b;   background-color: rgba(255, 255, 255, 0.9);  text-decoration: none;	}
 
 .card-title {font-size:26px; line-height: 1.5; letter-spacing: .03em; padding-bottom: 12px;} 
 .card-title a:hover {  background-color: #fa721b; color: #fff;  }
 .card-body { padding-bottom:16px;	} .card-body a:hover {color:white;background-color: #ff5f08;}

#submit:before {	    background-color: #084331;	color: #fff;     border-bottom: 1px solid #f5f6fa;	}

.contact-details h3 {  color: #fa721b;	text-transform: capitalize;   border-bottom: 2px solid #fa721b;	}


.owl-wrapper {width: max-content;font-size: px;}



#methodology .overlay {	background-color: rgba(8,67,49, 0.78);	}	/*	vert * /
#methodology .overlay {	background-color: rgba(250,114,27, 0.78);	}	/*	orange */

.price-table.featured ul li:last-child, .price-table ul li:last-child:hover {
							background-color: #fa721b;	}
.price-table.featured .value {	background-color: #fa721b;	}
.price-table ul li:last-child:hover {	    background-color: #fa721b;	}

.price-table .texte ul li a {    text-transform: none;  }


.contact-details h3 a:hover {	    color: #fff;	    background-color: #fa721b;	}



img[Attributes Style] {
    width: auto;
    aspect-ratio: auto;
    height: auto;
}

swing animation {
    transform: rotate3d(0, 0, 1, 3.20247deg);
}
element.style {
}


#testimonials .overlay {	background-color: rgba(8,67,49, 0.78);	}	/*	vert * /
#testimonials .overlay {	background-color: rgba(250,114,27, 0.78);	}	/*	orange */

#social {  background-image: url(../img/slider/slide00.webp); padding: 0;	}

#social.overlay {  background-image: url('../img/slider/slide00.webp'); padding: 0;	}

#footer p.sne a:hover {color: #f1f1f1;}



#MailBtn { 
  position: fixed; /* Fixed/sticky position */
  top: 74%; /* Place the button at the bottom of the page */
   /*right: 30px; Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(248,248,248, 0.86); /* Set a background color */
  color: #39685a; /* Text color */
   color: rgba(57,104,90, 0.86); 
  box-shadow: 0 6px 12px rgb(0 0 0 / 25%);
  cursor: pointer; /* Add a mouse pointer on hover */
  padding:6px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 26px; /* Increase font size */
}
#MailBtn:hover {
  background-color: rgba(250,114,27, 0.99); /* Add a dark-grey background on hover */
}
		/*	Back to Top  button	*/
#CallBtn { 
  position: fixed; /* Fixed/sticky position */
  top: 83%; /* Place the button at the bottom of the page */
   /*right: 30px; Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(248,248,248, 0.86); /* Set a background color */
  color: #39685a; /* Text color */
   color: rgba(57,104,90, 0.86); 
       box-shadow: 0 6px 12px rgb(0 0 0 / 25%);
  cursor: pointer; /* Add a mouse pointer on hover */
  padding:6px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 26px; /* Increase font size */
}
#CallBtn:hover {
  background-color: rgba(250,114,27, 0.99); /* Add a dark-grey background on hover */
}
		
		
		/*	Back to Top  button	*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(250,114,27, 0.26); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 6px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 26px; /* Increase font size */
}

#myBtn:hover {
  background-color: rgba(250,114,27, 0.99); /* Add a dark-grey background on hover */
}
		
		
.service-item h3 {	/*  border-bottom: 1px solid #008ecc;  */
	color:#fa721b;
    border-bottom: 1px solid #fa721b;
   /* font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 15px;
    text-transform: uppercase;	*/
}
.gg-icon {	font-weight: 500;    font-size: -webkit-xxx-large;	}








/*=================================================================
	Fixed  Phone   and    Call    buttons     ---      Begin
==================================================================*/

.sticky {
  position: sticky;
  width:46px;
  top: 80%;
 
  padding: 0px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

/*  TOP  button   */

.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}
.btn {
    font-weight: 500;
    transition: .5s;
}
.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}
.pt-2 {
    padding-top: 0.5rem !important;
}
.btn-lg, .btn-group-lg>.btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 10px;
}
.btn-primary {
    color: #fff;
    background-color: #1363c6;
    border-color: #1363c6;
	}
  #MailBtn a { text-decoration: none; outline: none;padding-right:12px; }
  #CallBtn a { text-decoration: none; outline: none;padding-right:14px; }
/* =================================================================
	Background   
================================================================== */
	
#ag-intro { padding:16px;	}	
#ag-intro .container {
						background-color:#fccdb375;	/*	#fffbf8 border-color:  background-color: rgba(250, 114, 27, 0.9);  	*/
						
					border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #fa721b;	/*	  #FA721B30;		#fccdb3  */
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
   /* margin: 0px 15px 0px 0px; */
    --e-column-margin-right: 15px;
    --e-column-margin-left: 0px;
    padding: 30px 20px 30px 20px;
						    border-radius: 10px 10px 10px 10px;
					}
#pave-square { padding:16px;	}
#pave-square .pv-square {
						background-color:#fccdb375;	/*	#fffbf8 border-color:  background-color: rgba(250, 114, 27, 0.9);  	*/
						
					border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #fa721b;	/*	  #FA721B30;		#fccdb3  */
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
   /* margin: 0px 15px 0px 0px; */
    --e-column-margin-right: 15px;
    --e-column-margin-left: 0px;
    padding: 30px 20px 30px 20px;
						    border-radius: 10px 10px 10px 10px;
					}	



.custom-select-2 {
    z-index: 88;
}
.custom-select {
    z-index: 9;
}
.box_m_ic .contact img {
    width: 16px;
    padding: 2px;
}
.degra-or h1{
  background-image: linear-gradient(to left, #f8d666, #F7B069, #F19775);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*=================================================================
	Swing BG img on Telemarketing page
==================================================================*/
.sw-bg  { position: absolute;left: -60px;bottom: 120px;z-index: -1;
			animation: swing 2s linear infinite;	
}
@media (max-width: 600px) {
		.sw-bg  { display:none; }
} 
}
/*=================================================================
	BG Swing img on contactform end
==================================================================*/

 /*  =================================================================
	Encart Phone Begin
================================================================== */

#display-tel .info_fixed {
} 
	img.phone-image {
    max-width: 80%;
    margin-top: -27%;
    margin-left: -9%;
}
/*img.phone-image:hover { tel-hover.png }  */
	
	.info_fixed {
  position: fixed;
  right: 25px;
  z-index: 999;
  bottom: 10%;
  padding-bottom: 0;
}

.besoins-fixed {
    background: #2d3335;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 25px 25px 0px 0;
}
a.phone-fixed { text-decoration: none; outline: none; }
a.phone-fixed:hover {
      color: white;
      opacity:0.8;
}
.besoins-fixed img {
float: left;
    margin-right: 17px;
    margin-left: 14px;
    border: 3px solid #fff;
    border-radius: 50%;
}

.txt-fixed {
  color: white;
  flex: 1;
  display: block;
}

.ic_tel_f {
  font-weight: 300;
  display: block;
  width:100%;
    font-family: "Montserrat", Sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 18px;
}

.phone-fixed {
  color: white;
  font-weight: bold;
  font-size: 18px;
  display: block;
  width:100%;
}

.hour-fixed {
  background: #fa721b;
  padding: 7px 10px 7px 10px;
  border-radius: 0px 0 25px 25px;
  display: block;
}

.hour-fixed p {
  text-align: center;
  font-family: "Montserrat", Sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  padding-bottom: 0;
  color: #000;
  margin-bottom: 0;
}

.besoins-fixed {
  order: -1;
}
.custom-select-2 {
    z-index: 88;
}
.custom-select {
    z-index: 9;
}
.box_m_ic .contact img {
    width: 16px;
    padding: 2px;
}
.degra-or h1{
  background-image: linear-gradient(to left, #f8d666, #F7B069, #F19775);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 576px) {
	#display-tel .info_fixed { display:none; !important; }
	.info_fixed { display: none; !important;	}
}
/*=================================================================
	Encart Phone end
==================================================================*/


/*
*
* Progress Bars
*/
.progress-linear {
	position: relative;
	text-align: left;
}

.progress-linear .progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transform: translate3d(0, -10px, 0);
	margin-bottom: -10px;
	margin-left: -5px;
	margin-right: -5px;
}

.progress-linear .progress-header > * {
	margin-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.progress-linear .progress-bar-linear-wrap {
	height: 2px;
	background: #f5f6fa;  /*  error red color  =    */
}

.progress-linear .progress-bar-linear {
	width: 0;
	height: inherit;
	background: #fa721b;	/*  error red color  =  #c30734; #f5f6fa   */
	transition: .5s all ease-in-out;
}

.progress-linear .progress-value::after {
	content: '\0025';
}

* + .progress-linear {
	margin-top: 25px;
}

* + .progress-linear-outer {
	margin-top: 25px;
}

* + .progress-bar-linear-wrap {
	margin-top: 8px;
}

.progress-linear + .progress-linear {
	margin-top: 20px;
}

.progress-linear-outer + .progress-linear-outer {
	margin-top: 20px;
}

@media (min-width: 768px) {
	* + .progress-linear {
		margin-top: 40px;
	}
	* + .progress-linear-outer {
		margin-top: 40px;
	}
}

@media (min-width: 1200px) {
	.progress-linear + .progress-linear {
		margin-top: 34px;
	}
	.progress-linear-outer + .progress-linear-outer {
		margin-top: 34px;
	}
}


																					}
	@media (max-width: 576px) {
	.display-none img {		display:none;	}
}


		/*
		@media all and (min-width: 1001px)
@media all and (min-width: 1367px)
@media all and (max-width: 1000px)
@media all and (min-width: 481px)
@media all and (min-width: 769px)

Being set up this way, there is overlap where multiple queries can be in play at a given screen width.

What if you were to set them up similar to this way (below), where there is a clear starting and stopping point for every query? Is this okay and is it better or worse and for what reasons?

@media screen and (max-width: 940px) and (min-width: 769px)
@media screen and (max-width: 768px) and (min-width: 481px)
@media screen and (max-width: 480px) and (min-width: 360px)
@media screen and (max-width: 359px)
		*/