/*
 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
*/

:root {
  --barbier-primary: #57CB86;
  --barbier-secondary: #3E526A;
}

h1 {
	line-height: 1.1em;
}

.mb-0 {
	margin-bottom: 0!important;
}
 

/*
 * Menu
 * */

.menu-btn a {
	padding: 27px 24px!important;
}

.menu-btn.bg-primary a, .menu-btn.bg-secondary a {
	color: #fff;
}

.bg-primary {
	background-color: var(--barbier-primary);
}

.bg-secondary {
	background-color: var(--barbier-secondary);
}

.menu-barbier.et_pb_menu .et-menu {
    margin-left: initial;
    margin-right: initial;
}

.menu-barbier .sub-menu {
	padding: 0!important;
}

.menu-barbier .sub-menu .menu-item {
	padding: 0;
    width: 100%;
}

.menu-barbier .sub-menu .menu-item.menu-item-has-children a:after {
	top: 16px;
    font-size: 20px;
    transform: rotate(270deg);
}

.menu-barbier .sub-menu .menu-item a {
    width: 100%;
	padding: 15px !important;
}

.menu-barbier .sub-menu .menu-item a:hover {
    background-color: var(--barbier-primary)
}

/* Formulaires */

.button-form {
	background-color: var(--barbier-primary)!important;
	border-radius: 10px !important;
    color: #fff !important;
    padding: 0px 30px !important;
    min-height: 60px !important;
    font-weight: 800 !important;
}
.wpforms-form input[type=submit]:hover, 
.wpforms-form input[type=submit]:active, 
.wpforms-form button[type=submit]:hover, 
.wpforms-form button[type=submit]:active, 
.wpforms-form .wpforms-page-button:hover, 
.wpforms-form .wpforms-page-button:active {
	background: #37B369!important;
}
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
 background-color: #37B369 !important;
}
.wpforms-submit-container {
	float: right!important;
}


/*
 * OFFICE
 * */

.office-container {
	display: flex;
	align-items: center;
	gap: 25px;
	background-color: white;
    border-radius: 15px;
    padding: 15px 20px;
	margin-bottom: 15px;
}

.office-image {
	width: 100px;
}

.office-title {
	font-size: 18px;
	font-weight: 800;
	padding-bottom: 0;
}

.office-content {
	font-size: 17px;
    font-weight: 400;
    margin-top: 5px;
}

.office-infos-container {
	display: flex;
	gap: 25px;
	font-size: 16px;
	margin-top: 5px;
}

.office-infos {
	display: flex;
	align-items: center;
	gap: 10px;
}

.office-infos-content {
	font-size: 14px;
	color: var(--barbier-secondary);
}

@media screen and (max-width: 1024px) {
	.office-container, .office-infos-container {
		flex-direction: column;
	}
	
	.office-infos-container {
		gap: 0px;
	}
}

/*
 * Specialities
 * 
 * */

.spectiality__header {
	display: flex;
	align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

@media screen and (max-width: 1024px) {
	.spectiality__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

.spectiality__block--right {
	display: flex;
    align-items: center;
    gap: 35px;
}

.spectiality__progress {
  position: relative;
  width: 192px;
  height: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: #57cb86;
  width: 0;
  transition: width .4s ease-in-out;
}

.segment {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.speciality__arrows {
	display: flex;
	gap: 15px;
}

.speciality__arrow {
	width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	border-radius: 32px;
	background-color: #57cb86;
	color: #fff;
	cursor: pointer;
}

.speciality__slider .slick-track {
	display: flex;
}

.speciality__slider .slick-list {
	margin: 0 -10px;
}

.speciality__slider .slick-slide {
    margin: 0 10px;
	display: flex !important;
    height: inherit;
    align-items: stretch;
}

.speciality__title {
	font-weight: 800;
    font-size: 20px;
}

.speciality__card {
	background-color: #F5F8F8;
    padding: 25px 20px;
    border-radius: 15px;
	height: 100%;
}

.speciality__question {
	font-weight: 800;
	margin-bottom: 25px;
	line-height: 1.4em;
}

.speciality__answer {
	font-size: 14px;
    line-height: 1.4em;
}

.speciality__arrow.prev.slick-disabled, .speciality__arrow.next.slick-disabled {
	color: #3E526A4D;
	border: 2px solid;
	background-color: initial;
}


/*
 * TEAMS
 * */

.teams-container {
	display: flex;
	align-items: center;
	gap: 25px;
    padding: 20px;
	border-bottom: 1px solid var(--barbier-primary);
}

.teams-image {
	width: 105px;
}

.teams-block-right {
	color: #fff;
}

.teams-title {
	font-size: 17px;
	font-weight: 800;
	padding-bottom: 0;
	color: #fff;
}

.teams-content {
	font-size: 14px;
    font-weight: 400;
}

.teams-infos-container {
	display: flex;
	gap: 25px;
	font-size: 16px;
}

.teams-infos {
	display: flex;
	align-items: center;
	gap: 10px;
}

.teams-infos-content {
	font-size: 14px;
	color: #fff;
}

@media screen and (max-width: 1024px) {
	.teams-container, .teams-infos-container {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.teams-infos-container {
		gap: 0px;
	}
}

@media screen and (max-width: 768px) {
	.teams-container, .teams-infos-container {
		flex-direction: row;
	}
	
	.teams-infos-container {
		gap: 25px;
	}
}

@media screen and (max-width: 500px) {
	.teams-container, .teams-infos-container {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.teams-infos-container {
		gap: 0px;
	}
}


/*
 * FAQ
 * */

.faq__category {
	display: flex;
	gap: 30px;
	align-items: flex-start;
    padding: 35px 0px;
    border-bottom: 1px solid var(--barbier-secondary);
}

.faq__icon__container {
    font-size: 15px;
    background-color: var(--barbier-primary);
    border-radius: 46px;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.faq__icon__container.rotate {
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.faq__category__title {
	font-size: 18px;
	font-weight: 700;
	margin-top: 12px;
}

.faq__category__block__container {
	margin-top: 15px;
}

.faq__category__block--question {
	display: flex;
	align-items: center;
	margin-bottom: 17px;
    gap: 15px;
}

.faq__category__content__icon {
    min-width: 32px;
    min-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F8F8;
    border-radius: 10px;
    cursor: pointer;
	transition: transform 0.3s ease;
}

.faq__category__content__icon.rotate {
	transform: rotate(90deg);
	transition: transform 0.3s ease;
}

.faq__category__content__question {
	font-size: 17px;
	font-weight: 800;
    padding-bottom: 0;
	line-height: 1.4em;
}

.faq__category__block--answer {
	font-size: 14px;
	line-height: 1.4em;
}

.faq__category__block--answer, .faq__category__block__container {
	display: none; 
}

@media screen and (max-width: 500px) {
	.faq__category {
		gap: 15px;
	}
	
	.faq__category__block--answer {
		margin-top: 10px;
	}
}

/**
 * FORMS
 **/

.contact-form .wpforms-field-container input[type='text'], 
.contact-form .wpforms-field-container input[type='tel'],
.contact-form .wpforms-field-container input[type='email'],
.contact-form .wpforms-field-container input[type='url'],
.contact-form .wpforms-field-container textarea {
	border: 1px solid #3E526A!important;
    border-radius: 10px!important;
    padding: 25px 20px!important;
	position: relative;
}

.contact-form .wpforms-field-container .choices__inner {
    border: 1px solid #3E526A!important;
	border-radius: 10px!important;
}

.contact-form .wpforms-field-container .choices__list.choices__list--single {
    padding: 15px 12px!important;
}

.contact-form .wpforms-field-container input::placeholder {
	color: var(--barbier-secondary)!important;
	opacity: 1!important;
}

.contact-form .wpforms-field-container input[type=checkbox]:checked:before {
	background: var(--barbier-secondary)!important;
	border-color: var(--barbier-secondary)!important;
}

.contact-form .wpforms-field-container input[type=checkbox]:checked:after {
	border-color: #fff!important;
}