@import url('https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap');

   body{
    background: #080137;
     font-family: "Signika", sans-serif;

   }


   .carousel-caption {
    bottom: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 2%;
    padding-right: 2%;
    color: white;
    text-shadow: 1px 1px 4px #000;
    z-index: 999;
}


.boxboreder{
    background:#1F173F;
    border-radius:16px;
   
 
    position: relative;
    z-index:1;

}

.boxboreder:before{


    content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* épaisseur du border */
  background: linear-gradient(100deg, #D4AE4D, #090238); /* dégradé */
  border-radius: inherit;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

h3{
  font-size:20px;
  margin-top:16px;
}

.boxboreder p{
  font-weight:300;
}

.bgchariot{


  border-radius:16px;
  background:#1F173F;
   position: relative;
    z-index:1;
}

.bgchariot:before{
  
    content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* épaisseur du border */
  background: linear-gradient(100deg, #D4AE4D, #090238); /* dégradé */
  border-radius: inherit;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}


.bghalo{

  background:url('images/bgleft.svg');
  background-repeat:no-repeat;
  background-position: left center;
  background-size: contain;
}


.yellowcolor{
 background: linear-gradient(to right, #D4AE4D, #E5CD84);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}


.btnchariot{
  color:#fff;
  font-size:20px;
  font-weight:500;
  background:#D0AA49;
  border-radius:40px;
  padding:8px 24px;
  border:0px;
}

.bgchariot p{
  font-size:20px;
  line-height:160%;
  color:#fff;
}

.bgchariot{
  padding:4% 0px 4% 4%;
}


.chario img{
  position:relative;
  top:-110px;
}


.btn-group {
  border-radius:40px !important;
}



#btn-mensuel{
  border-radius:40px 0px 0px 40px;

  border:1px solid #D0AA49;
}

#btn-annuel{
   border-radius:0px 40px 40px 0px;
   border:1px solid #D0AA49;
 

   
}


.pricingdiv .btn.active{

  
  background:#D0AA49;
  color:#fff;
}

.pricingdiv .btn:hover{
  background:#D0AA49;
   color:#fff;
}

.pricingdiv .btn{
  color:#D0AA49;
}


.pricingdiv .card {
  background:#1F173F;
  color:#fff;
  text-align:left;
  padding:30px;
}

.jbtn{
  width:100%;
  background:#FFF4D7;
  border-radius:40px;
  color:#000 !important;
  border:0px;
}


.goldbtn{
width:100%;
  background:#D0AA49;
  border-radius:40px;
  color:#000 !important;
  border:0px;


}

.bxform{
background:#1F173F;
border-radius:16px;
position: relative;
z-index:1;
padding:4%;

}


.bxform input{
  background: #332E5A;
  border:1px solid #332E5A;
}

.bxform textarea{
  background: #332E5A;
  border:1px solid #332E5A;
}

.bxform label{
  color:#fff;
}

.bxform button{
background:#D0AA49;
color:#fff;
border-radius:40px;
border:none;
padding:8px 24px;

}

.bxform input::placeholder{
  color:#fff;
  font-weight:300;
}

.bxform textarea::placeholder{
  color:#fff;
  font-weight:300;
}


.bxform:before{


    content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* épaisseur du border */
  background: linear-gradient(100deg, #D4AE4D, #090238); /* dégradé */
  border-radius: inherit;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}


.bigtexte{
 
background-image:url('images/txtstroke.svg');
height:200px;
background-position:center center;
background-repeat:no-repeat;
background-size:inherit;
  
}


.bxjaune{
  background-color:#E6CC82;
  background-image:url('images/bgjaune.svg');
  background-repeat:no-repeat;
  background-size:cover;
}

.highlightwhite{
  color:#fff;
}

.bxjaune h1{
  color:#090238;
}


.btnbgjaune{
  border-radius:40px;
  color:#D0AA49;
  background:#fff;
  width:150px;

}

.text-contact{font-weight: 100;}
.txtjaune{
  color:#D0AA49;
}

.card-title{
  font-size:32px;
}

.price-mensuel{
  color:#D0AA49;
  font-size:24px;
}


.bxshadow{
  box-shadow: 0 4px 30px rgba(208, 170, 73, 0.3);
  z-index:9999;
  position:relative;
  border-radius:16px;
}


.carousel-caption h1{
background: linear-gradient(to right, #D4AE4D, #E5CD84);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:none;
}


.carousel-caption a{
  background-color:#D0AA49 !important;
  border-radius:40px;
  color:#fff !important;
  text-shadow:none;
  padding:8px 32px;
}


.bgtrait{
  
  position: relative;
  display: inline-block;

}

.bgtrait:before{
  content: "";
  position: absolute;
  bottom: -10px; /* distance sous le mot */
  left: 50%;
  transform: translateX(-50%);
  width: 190px; /* largeur de l'image */
  height: 16px;  /* hauteur de l'image */
  background-image: url('images/trait.svg'); /* ton image ici */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


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


.traittwo:before{
 content: "";
 position: absolute;
    bottom: 16px;
    left: 100%;
    transform: translateX(-50%);
    width: 190px;
    height: 66px;
    background-image: url('images/traittwo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.king{

   position: relative;
  display: inline-block;
  background: linear-gradient(to right, #D4AE4D, #E5CD84);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    font-weight:700;
}

.king:before{
 content: "";
 position: absolute;
    bottom: 55px;
    left: 44%;
    transform: translateX(-50%);
    width: 190px;
    height: 66px;
    background-image: url('images/roi.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

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



.highlightwhite:before{
 content: "";
 position: absolute;
       bottom: -40px;
    left: 57%;
    transform: translateX(-50%);
    width: 200px;
    height: 130px;
    background-image: url(images/circle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btnheadertwo{
  border-radius:40px;
  background:#D0AA49;
  border:none;
}

.btnheader{
    border-radius:40px;
    margin-right:16px;
}

.logo-box{
  background:#fff;
  border-radius:16px;
  height:200px;
  border:1px solid #D0AA49;

    padding: 10px;
    margin: 10px auto;
   
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.card-body li{
  padding:8px 0px;
}


.bxshadow:before{
  content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(180deg, #D4AE4D, #090238);
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.bxshadow{
position: relative;
    z-index: 1;

}
    

.btndevis{
  color:#D0AA49;
  font-size:20px;
  border-radius:40px;
  border:1px solid #D0AA49;
  padding:8px 24px;
  cursor:pointer;
  text-decoration:none;
}



.bghaloright{
background: url(images/bg.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size:15%;

}


.btnfooterform{
  background:#D0AA49;
  border-radius:40px;
  border:none;
}

.btnfooterform:hover{
 background:#D0AA49;
}



footer li a {
position: relative;
  display: inline-block;
}


footer li a::after {
 content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: #D0AA49;
  transition: width 0.3s ease;
}


footer li a:hover::after {
  width: 100%;
}

footer li a{padding:8px 0px}



@media (max-width: 575.98px) {
.bgchariot h1{font-size:24px;}
.carousel-caption a{
  padding: 8px 16px;
    font-size: 16px;
    margin-top:0px !important;
}


.bgtrait:before{
  width:130px;
}


}




@media (max-width: 767.98px) {
 .bgchariot img{
   width:100%;
   top:0px;
 }

.highlightwhite:before{
  display:none;
}


.btnchariot{
  margin-bottom:32px;
}

.bgchariot p{
  font-size:16px;
}


.carousel-caption h1{
  font-size:18px;
  
}

.bigtexte{
background-size:contain;

}


}

/* .hero_area1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #080137;  
      background: linear-gradient(180deg, rgba(9, 2, 56, 0) 6.09%, #090238 50%); 
    background: linear-gradient(180deg, rgba(243, 104, 24, 0) 6.09%, #090238 50%);
    opacity: 0.5;
} */
.hero_area1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        180deg,
        rgb(9 2 56 / 38%),
        rgba(9, 2, 56, 0.7) 85%,
        #090238 100%
    );
    opacity: 0.9; /* un peu plus fort pour bien marquer le fondu */
    z-index: 1;
}
/* back to top */
#back-to-top {
	position: fixed;
	bottom: 85px;
	right: 20px;
	z-index: 10;
	height: 40px;
	width: 40px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #D4AE4D;
	transition: all 0.5s ease;
	opacity: 100;
}

#back-to-top:hover {
	transform: scale(1.05);
	box-shadow: 0 0 10px #00000050;
}
.back-to-top-hide {
	display: none;
	opacity: 0;
}

.sticky-bar.stick {
	-webkit-animation: 700ms ease-in-out 0s normal none 1 running fadeInDown;
			animation: 700ms ease-in-out 0s normal none 1 running fadeInDown;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	left: 0;
	background-color: #090238;
	-webkit-transition: all .3s ease 0s;
	-o-transition: all .3s ease 0s;
	transition: all .3s ease 0s;
  } 
.fonction li {  
  list-style-image: url('images/icoon.png');
  color: #fff !important;}