*{
  font-family: Montserrat, Ubuntu, Verdana, Trebuchet, Arial, Helvetica, sans-serif, brahmi,"Source Sans Pro", "Roboto", Arial, sans-serif;
}


/* home page  
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Raleway);
HP-body {
  background-color: #eee;
  min-height: 100%;
  color: #fff;

  background-image: url('http://isaacsuttell.com/img/justine.jpg');
  background-size: cover;
  background-position: center;
  font-family: Raleway, sans-serif;
}



html {
	background-color: #0093E9;
	background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
 
body {
	margin: auto;
	
	color: navajowhite;
	font-family: Ubuntu, Verdana, Trebuchet, Arial, Helvetica, sans-serif, brahmi; 

	background-color: #0093E9;
	background-image: linear-gradient(22deg, #0093E9 0%, #80D0C7 100%);
	
}*/

.HP-body {
--bs-gutter-x: none;
--bs-gutter-x: inherit;
--bs-gutter-x: 0;
}
html {
	background-color: #1584b8;
	background-image: linear-gradient(99deg, #1584b8 0%, #75c8c4 100%);

	color: navajowhite;
	font-family: Montserrat, Montserrat-Black, Ubuntu, Verdana, Trebuchet, Arial, Helvetica, sans-serif, brahmi; 
}

body {
	margin: auto;
	
	background-color: #1584b8;
	background-image: linear-gradient(99deg, #1584b8 0%, #75c8c4 100%);


	
}


.navbar-logo {

    width: 45px;
	padding-right: 9px;
}

.navbar-ag {
	font-family: Montserrat;
	font-weight: 999;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 22px;
	color: aliceblue;
    width: 255px;

}
.navbar-ag-s{&:after {
  content: "";
  position: absolute;
  width: calc(22% - 3em);
  top: 55%;
  border-bottom: 0.5px solid antiquewhite;
}}


.navbar .navbar-nav .nav-link.active, .navbar-nav .nav-link.show .navbar .dropdown-toggle .nav-item{
  color: aliceblue;
}

.navbar .dropdown-toggle{
  color: aliceblue;
}

link {
  color: white;
}

h1 {
  position: relative;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;

}
.h1-s {
  &:after {
    content: "";
    position: absolute;
    width: calc(22% - 3em);
    top: 55%;
    border-bottom: 0.5px solid antiquewhite;
  }
}
h2 {
  position: relative;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 22px;
}
.h2-s{
  &:after {
    content: "";
    position: absolute;
    width: calc(22% - 3em);
    top: 55%;
    border-bottom: 0.5px solid goldenrod;
  }
}

.h5-s{
  &:after {
    content: "";
    position: absolute;
    width: calc(22% - 3em);
    top: 13%;
    border-bottom: 0.5px solid goldenrod;
  }
}

.h5-nav {
	color: #363c3d;
}	
.sous-titre{
	font-size: 14px;
	font-weight: 500;
	padding: 0;
	line-height: 1px;
	margin: 2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: color-mix(in srgb,antiquewhite , transparent 50%);
	&:after {
	  content: "";
	  position: absolute;
	  width: calc(22% - 3em);
	  top: 55%;
	  border-bottom: 0.5px solid goldenrod;
	}
}
.dropdown-menu{
    &.show{
        -webkit-animation: fadeIn 0.3s alternate; /* Safari 4.0 - 8.0 */
         animation: fadeIn 0.3s alternate;
    }
}


.nav-item.dropdown.dropdown-mega{
    position: static;
    .dropdown-menu{
        width: 90%;
        top: auto;
        left: 5%;
    }
}


.navbar-toggler{
    border: none;
    padding: 0;
    outline: none;
    &:focus{
        box-shadow: none;
    }
    .hamburger-toggle{
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 11;
        float: right;
        .hamburger {
            position: absolute;
            transform: translate(-50%, -50%) rotate(0deg);
            left: 50%;
            top: 50%;
            width: 50%;
            height: 50%;
            pointer-events: none;
            span {
                width: 100%;
                height: 4px;
                position: absolute;
                background: aliceblue;
                border-radius: 2px;
                z-index: 1;
                transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0), background 0.2s cubic-bezier(0.77,0.2,0.05,1.0), all 0.2s ease-in-out;
                left: 0px;
                &:first-child{
                    top: 10%;
                    transform-origin: 50% 50%;
                    transform: translate(0% -50%) !important;
                }
                &:nth-child(2){
                    top: 50%;
                    transform: translate(0,-50%);
                }
                &:last-child{
                    left: 0px;
                    top: auto;
                    bottom: 10%;
                    transform-origin: 50% 50%;
                }
            }
            &.active{
                span {
                    position: absolute;
                    margin: 0;
                    &:first-child{
                        top: 45%;
                        transform: rotate(45deg);
                    }
                    &:nth-child(2){
                        left: 50%;
                        width: 0px;
                    }
                    &:last-child{
                        top: 45%;
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}


/* home page  */

.fade-in {
    opacity: 0;
    transition: opacity 4s ease-in;
    animation: fadeIn 2s forwards;
    animation-delay: 0.5s; /* Adjust delay here for effect */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/*GrayScale*/
.column#grayscale img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(50%) sepia(22%) ;
	-webkit-transition: .3s ease-in-out;
	transition: .9s ease-in-out;
	
}
.column#grayscale:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0)sepia(0%);
}

.home_chartres {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  min-height: 77vh;
  transform-style: preserve-3d;
}

.img {
  max-width: 999px;
  width: 100%;
  position: absolute;
  padding-top: 33%;
  &.-base {
    
  }
  
  &.-clip {
    clip-path: url(#clip-path);
    pointer-events: none;
    transition: opacity 0.9s;
    opacity: 0;
  }
}

@media (min-width: 768px) {
	/* img chartres change le padding pour le Écran GRands*/
  	.img {
	  max-width: 999px;
	  width: 100%;
	  position: absolute;
	  padding-top: 2px;
	  &.-base {
	    
	  }
	  
	  &.-clip {
	    clip-path: url(#clip-path);
	    pointer-events: none;
	    transition: opacity 0.9s;
	    opacity: 0;
	  }
	}
}

.home1{
	min-width: inherit;
	max-width: inherit;

	padding-top: 20px;
	position: relative;
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-bottom: 80px;
}

.home2{
	min-width: inherit;
	max-width: inherit;
	background-color:#1584b8;
	padding-top: 20px;
	position: relative;
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-bottom: 80px;
}

.home3{
	min-width: inherit;
	max-width: inherit;
	background-color:#0f3b59;
	padding-top: 20px;
	position: relative;
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-bottom: 80px;
}

.text-just{
	text-align: justify; 
	
}
.section-title {
  padding-bottom: 60px;
  padding-top: 122px;
  position: relative;
}
.section-title h1 {
  font-size: 29px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h1::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: green;
  margin: 4px 10px;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: green;
  margin: 4px 10px;
}

.section-title div {
  color: var(--heading-color);
  margin: 0;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--heading-font);
}


/* expertises counter */

@property --num {
  syntax: '<integer>';
  inherits: true;
  initial-value: 2026;
}
.depuis::after {
	letter-spacing: 1.5px;
	text-transform: lowercase;
	text-decoration: wavy;
	color: goldenrod;
	font-weight: 700;
  counter-reset: my-counter var(--num);
  content: counter(my-counter);
  animation: count 2s ease-in-out forwards; /* forwards ensures the animation retains the --num: 100 value after the animation finishes */
}

@keyframes count {
  to { --num: 2012; }
}


/* expertises carte de prez */

		.service-card {
            perspective: 1000px;
            height: 700px;
        }
		


        .service-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .service-card:hover .service-card-inner {
            transform: rotateY(180deg);
        }

        .service-card-front,
        .service-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .service-card-front-1 {
            background: linear-gradient(45deg, #eee140, #eee140);
            color: black;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 2rem;
        }

        .service-card-back-1 {
            background: white;
            color: #1f2937;
			border-color: #eee140;
			border-style: double;
            transform: rotateY(180deg);
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
			align-items: center;
        }
		.service-card-back-1>h4{
			color:#eee140;
		}
		
		.service-card-front-2 {
		    background:  #78c2d2;
		    color: black;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-2 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
		}
		.service-card-back-2>h4{
			color:#78c2d2;
		}		

		.service-card-front-3 {
		    background:  #3a3e3f;
		    color: white;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-3 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
			border-color: #3a3e3f;
			border-style: double;
		}
		.service-card-back-3>h4{
			color:#3a3e3f;
		}	

		.service-card-front-4 {
		    background:  #d73b35;
		    color: white;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-4 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
			border-color: #d73b35;
			border-style: double;
		}
		.service-card-back-4>h4{
			color:#d73b35;
		}			
		.service-card-front-5 {
		    background:  #65b32f;
		    color: white;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-5 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
			border-color: #65b32f;
			border-style: double;
		}
		.service-card-back-5>h4{
			color:#65b32f;
		}	
		.service-card-front-6 {
		    background:  #f7b121;
		    color: white;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-6 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
			border-color: #f7b121;
			border-style: double;
		}
		.service-card-back-6>h4{
			color:#f7b121;
		}	
		.service-card-front-7 {
		    background:  #fefefe;
		    color: black;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    padding: 2rem;
		}
		.service-card-back-7 {
		    background: white;
		    color: #1f2937;
		    transform: rotateY(180deg);
		    padding: 2rem;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			align-items: center;
			border-color: #363c3d;
			border-style: double;
		}
		.service-card-back-7>h4{
			color:#363c3d;
		}	
        .icon-wrapper {
            width: 122px;
            height: 122px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .hover-lift {
            transition: transform 0.2s;
        }

        .hover-lift:hover {
            transform: translateY(-5px);
        }
		
		.pop-up {
		  padding: 1.25rem;
		  background-color: var(--surface-color);
		  border-radius: 8px;
		  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		  height: 100%;
		  transition: all 0.3s ease;
		}

		.pop-up-exp-1 {
			padding: 1.25rem;
			border-radius: 8px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			height: 100%;
			transition: all 0.3s ease;
			background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)), 
			                url('../img/ag-exp-2.png');

		   background-position: right bottom; /*Positioning*/
		   background-repeat: no-repeat; /*Prevent showing multiple background images*/
		   
		   color: #1f2937;
		}
		
		.pop-up-exp-2 {
			padding: 1.25rem;
			border-radius: 8px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			height: 100%;
			transition: all 0.3s ease;
			background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)), 
			                url('../img/06.png');

		   background-position: right bottom; /*Positioning*/
		   background-repeat: no-repeat; /*Prevent showing multiple background images*/
		   
		   color: #1f2937;
		}
		
		
		.pop-up-soin {
					padding: 1.25rem;
					border-radius: 8px;
					box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
					height: 100%;
					transition: all 0.3s ease;
					background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));



				   
				   color: #1f2937;
				}
		
				.pop-up-ChristROI {
									padding: 1.25rem;
									border-radius: 8px;
									box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
									height: 100%;
									transition: all 0.3s ease;
									background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5))									, 
												                url('../img/christROI.png');

											   background-position: right bottom; /*Positioning*/
											   background-repeat: no-repeat; /*Prevent showing multiple background images*/
											   
											   color: #1f2937;



								   
								   color: #1f2937;
								}
		/* contact */
		img.signal {
		  overflow: hidden; /* Prevents overflow */
		  width: 45px;
		  padding-right: 9px;
		}





		img.signal:hover,
		img.signal:focus {
		  width: 199px;
		  
		}
		
		
		/* expertises la tbale des services prix plan */

		.bd-placeholder-img {
		        font-size: 1.125rem;
		        text-anchor: middle;
		        -webkit-user-select: none;
		        -moz-user-select: none;
		        user-select: none;
		      }

		      @media (min-width: 768px) {
		        .bd-placeholder-img-lg {
		          font-size: 3.5rem;
		        }
		      }

			  .pricing-header {
			    max-width: 700px;
			  }	  


			/*   .table-dark>tbody>tr:nth-of-type(odd)>* {
			      --bs-table-bg-type: #001835;
			  }
			  */


			  .exp-geologie{
				background-color: #eee140;
				background-image: url(../img/exp-geo-1-min.png) ;
				background-repeat: no-repeat;
				background-position: right;
				background-size: contain;
			  }
			  .exp-tellursim{
			  background-image: url(../img/exp-tellurique-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: right;
			  background-size: contain;
			  }
			  .exp-subtil{
			  background-image: url(../img/exp-subtil-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: right;
			  background-size: contain;
			  }
			  .exp-smog{
			  background-image: url(../img/exp-smog-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: right;
			  background-size: contain;
			  }
			  .exp-soul{
			  background-image: url(../img/exp-ame-lieu-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: left;
			  background-size: contain;
			  }
			  .exp-soul2{
			  background-image: url(../img/exp-ame-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: left;
			  background-size: contain;
			  }
			  .exp-evo{
			  background-image: url(../img/exp-evo-1-min.png) ;
			  background-repeat: no-repeat;
			  background-position: left;
			  background-size: contain;
			  }










.logo-small{
	width: 22px;
}


.icons{
  display: inline-flex;
  margin-left: auto;
  a{
    transition: all 0.2s ease-in-out;
    padding: 0.2rem 0.4rem;
    color: #ccc !important;
    text-decoration: none;
    &:hover{
      color: white;
      text-shadow: 0 0 30px white;
    }
  }
}


.curve { 
  width: 55%; height: auto;
  min-width: 150px;
  float: left;
  margin-right:2rem; 
  border-radius: 50%;
  -webkit-shape-outside:circle();
  shape-outside:circle();
}

.curve-oval { 
  width: 55%; height: auto;
  min-width: 150px;
  float: left;
  margin-right:2rem; 
  border-radius: 50%;
  shape-outside: ellipse();
}


.footer-1{
	font-style: normal;
	font-weight: 200;

}

.img-footer{
	opacity:77%;
}

.img-size{
	width: auto;
	
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: normal;
	src: local('Montserrat'), url('../fonts/Montserrat-Regular.woff2') format('woff');
}
@font-face {
	font-family: 'Montserrat-Black';
	font-style: normal;
	font-weight: normal;
	src: local('Montserrat-Black'), url('../fonts/Montserrat-Black.woff2') format('woff');
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Regular'), url('../fonts/Ubuntu-R.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Italic'), url('../fonts/Ubuntu-RI.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Light';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Light'), url('../fonts/Ubuntu-L.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Light Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Light Italic'), url('../fonts/Ubuntu-LI.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Medium';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Medium'), url('../fonts/Ubuntu-M.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Medium Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Medium Italic'), url('../fonts/Ubuntu-MI.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Bold'), url('../fonts/Ubuntu-B.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Bold Italic'), url('../fonts/Ubuntu-BI.woff') format('woff');
}


@font-face {
	font-family: 'Ubuntu Condensed Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Ubuntu Condensed Regular'), url('../fonts/Ubuntu-C.woff') format('woff');
}

@font-face {
	font-family: 'brahmi';
	src: url('../fonts/brahmi.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}