/*
 Theme Name:     Divi creative agency
 Theme URI:      https://demo.infomaniak.com/preview?t=divi-creative-agency
 Description:    Votre site sera constitue de plusieurs pages (accueil, blog, contact, etc...) que vous pourrez librement personnaliser selon vos besoins.
 Author:         Infomaniak
 Author URI:     https://www.infomaniak.com
 Template:       Divi
 Version:        1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
@import url("style-custom-libary.css");
@import url("style-font.css");
@import url("style-menu.css");
@import url("style-button.css");

:root {
  --heading-font: "Inter", sans-serif;
  --body-font: "Inter", sans-serif;
  --primary-color: #D1B06B;
  --black-color: #000000;
  --white-color: #ffffff;
  --gradient-color: linear-gradient(143deg, #BE8F48 0%, #E4C78F 121.58%);
}

body {
  font-family: var(--body-font);
  background-color: var(--black-color);
  color: var(--white-color);
  overflow: -moz-scrollbars-none;
  overflow-x: hidden;
  -ms-overflow-style: none;
}
#main-content {
 background-color: var(--black-color);	
}
.d-none {
	display: none;
}
/* home */
.home-vous-des {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
}
.list-number {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.list-number-item {
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(49, 49, 49, 0.52);
	box-shadow: 0px 6px 19.2px 0px rgba(0, 0, 0, 0.20);
	display: flex;
	gap: 10px;
	align-items: center;
}
.list-number-item img {
	width: 57px;
    height: 36px;
	margin: 2px;
}
.list-number-item.animate {
    opacity: 1;
    transform: translateY(0);
}
.list-number-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}
 .home-stats-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    border-radius: 3px;
    background: var(--Color-BG2, linear-gradient(118deg, #CEAE71 6.34%, #B18D56 86.64%));
    box-shadow: 0px 6px 10px 0px rgba(13, 8, 0, 0.30);
}
.home-stat-item {
    text-align: center;
    flex: 1;
	 padding: 0 40px;
}
.home-stat-item h1 {
	font-weight: 900;
	padding-bottom: 8px;
}
.home-stat-item:first-child {
    padding-left: 0;
}

.home-stat-item:last-child {
    padding-right: 0;
}
.home-stat-item:not(:last-child) {
     border-right: 1px solid #E7CE9A;
}
.main-col-desvous {
  display:flex;
  align-items: center;
}

/* testimonial*/
.testimonial-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; 
}
.testimonial-container-services {
	 display: flex;
    flex-wrap: no-wrap;
    justify-content: space-between;
    gap: 50px; 
}
.testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px;
    flex: 1 1 calc(50% - 10px);
    color: #fff;
    border-radius: 5px;
    border: 1px solid #6B6B6B;
    background: rgba(3, 3, 3, 0.95);
	  gap: 26px; 
}
.testimonial p {
	flex-grow: 1; 
}      

.testimonial::before {
    content: "";
    position: absolute;
    top: -15px;
    right: 20px;
    width: 46px;
    height: 39px;
    background-image: url('https://bc-booster.projets-becreative.ch/wp-content/uploads/2025/04/Quote-Symbol-2-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
        

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
     padding-top: 26px;
    margin-top: auto;
}

.testimonial-footer img {
     border-radius: 50%;
}

/* services */
.card-services {
	 display: flex;
	gap:60px;
}
.ctn-card {
	flex: 1; 
    display: flex;
    flex-direction: column;
    border: 1px solid #3C3C3C;
    border-radius: 10px;
    padding: 26px;
	gap: 24px;
  }
.ctn-card-item-1, .ctn-card-item-2 {
  flex-grow: 1;
}

.ctn-card-item-1 {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.ctn-card-item-2 {
	display: flex;
    flex-direction: column;
    gap: 16px;
}
/* desgin */
.propos-row {
  display:flex;
	align-items:center;
  justify-content: center;
}
.card-txt-dg {
	display: flex;
	flex-direction: column;
	gap: 28px;
	justify-content: center;
}
.card-txt-dg ul li {
	padding-bottom: 28px;
}
.card-txt-dg ul li:last-child {padding-bottom: 0;}
.process-container {
   display: flex;
   align-items: center;
   justify-content: center;       
}
.step-card {
   background-color: #151515;
   padding: 25px 55px;
   border-radius: 8px;
   width: 320px;
   min-height: 200px;
   text-align: center;
}
.step-icon {
   font-size: 40px;
   color: #D1B06B;
   padding-bottom: 25px
}
.step-title {
   font-size: 16px;
   font-weight: 700;
}
.card-des {
	  display: flex;
	  gap: 20px;
	  align-items: stretch;
}
.card-des-inf {
	display: flex;
    flex-direction: column;
  	justify-content: space-between;
    border-radius: 6px;
    border: 1px solid var(--Color-Button-default, #BE8F48);
    background: rgba(21, 21, 21, 0.50);
    padding: 26px;
	gap: 24px;
	flex: 1;
	max-width: 450px;
}
.card-des-inf .btn {
  width: auto;
  display: inline-block;
  align-self: center;
}

.card-des-inf ul li {
	padding-bottom: 16px;
}
.card-des-inf ul li:last-child {padding-bottom: 0;}

/* support */
.form-card-btn {
    display: flex; 
    flex-direction: column;
    gap: 35px;
    align-items:flex-start;
    justify-content:flex-start;
    text-align: left;
  }
/* a-propos-de-nous */

 .stats-container {
   display: flex;
    justify-content: space-around;
    padding: 80px 0;
    border-radius: 10px;
}

.stat-item {
    text-align: center;
    flex: 1;
}
.stat-item h1 {
	font-size: 60px !important;
}
.stat-item .p-m {
	font-weight: 600;
}
.stat-item:not(:last-child) {
     border-right: 2px solid #373737;
}
/* contact */ 
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
  text-align: left;
}

.info-group {
  display: flex;
  background-color: #111;
  justify-content: space-between;
	  gap: 10px;
  padding: 40px 26px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item-icon svg {
    width: 62px;
    height: 62px;
}

.info-item-text {
    display: flex;
    flex-direction: column;
}

.social-icons {
  display: flex;
  justify-content: start;
  gap: 27px;
}

.social-icons a {
  padding: 16px;
  color: #EFBD4C;
  border: 1px solid #333;
  border-radius: 10px;
  background: #1f1f1f;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-icons a:hover {
  border: 1px solid var(--Color-primary, #D1B06B);
  background: linear-gradient(180deg, #242424 0%, rgba(36, 36, 36, 0.00) 100%);
}
.social-icons a:active {
	border: 1px solid #2E2E2E;
    background: var(--BG-dark, linear-gradient(180deg, #E7B66E 0%, #1D1D1D 100%));
}
/* support */
.bg-sections-color-2 {
	height: 59px;
	border-radius: 100px;
}
.bg-sections-color {
	height: 190px;
	border-radius: 400px;
}
/* blog */
.blog-notre {
	display: flex;
	align-items: center;
}
/* ==============Reponsive css================*/
@media screen and (max-width: 980px) {
	.card-services {
		flex-direction: column;
	}
	.main-col-desvous {
  		flex-direction: column;
	}
	.blog-notre {
		flex-direction: column;
	}
	 .social-icons {
     padding-left: 20px;
    }
	.image-left-1 {
		display: none;
	}
	.image-left-2 {
		display: none;
	}
	.card-des {
		flex-direction: column;
		align-items: center;
	}
	.process-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.arrow {
		display: none;
	}
	.propos-row {
		 flex-direction: column;
	}
	.stats-container {
		flex-direction: column;
		text-align: center;
		padding: 0;
	}

   .stat-item:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid #373737;
		padding-bottom: 15px;
        margin-bottom: 15px;
    }
	.home-stat-item {
		padding: 0;
	}
	.testimonial-container-services {
		flex-wrap: wrap;
		gap: 30px; 
	}
	.testimonial {
		flex: 1 1 100%;
		max-width: 100%;
		padding: 20px;
	}
	.testimonial-container {
		gap: 30px;
	}
}

@media (max-width: 478px) {
	.card-services {
		gap: 20px;
	}
	.info-group {
		flex-wrap: wrap;  
		padding: 24px;
	}
    .social-icons {
      justify-content: center;
      padding-left: 0;
    }
	.form-card-btn {
		gap: 20px; 
  	}
	.process-container {
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	}
	.home-stats-container {
	   flex-direction: column;
	   text-align: center;
	}

	.home-stat-item:not(:last-child) {
		 border-right: none;
		 border-bottom: 2px solid rgba(255, 255, 255, 0.2);
		 padding-bottom: 15px;
		 margin-bottom: 15px;
	} 
	.contact-info {
		gap: 20px;
		margin-bottom: 20px;
	}
}