@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=Unbounded:wght@200..900&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/owlcarousel/css/owl.theme.default.min.css');
@import url('../dist/owlcarousel/css/owl.carousel.min.css');
@import url('../dist/animate/animate.min.css');
:root { --primary-font: "Sora", sans-serif, Helvetica, Arial; --secondary-font: "Unbounded", sans-serif; --deep-gray: #101010; --gray: #575757; }
body { background-color: var(--deep-gray); color: var(--bs-white); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; }
a { color: var(--bs-blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-white); font-family: var(--secondary-font); font-weight: 600; }
h1 { font-size: 42px; font-weight: 400; }
h2 { font: 400 35px var(--secondary-font); margin-bottom: 30px; }
p, li { color: var(--bs-white); font: 300 18px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
strong { font-weight: 700; }

.container { max-width: 1275px; }
.fixed-top { position: absolute; }
.navbar .container { justify-content: center; margin-top: 3rem; }
.navbar-brand { margin: 0 auto; position: absolute; }
.navbar-nav .nav-item { margin: 0 34px 0 0; }
.navbar-nav .nav-link { color: var(--bs-white); font-weight: 300; text-transform: capitalize; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link .active { color: var(--bs-blue); }

.lite { clear: both; display: block; width: 100%; }
.lite .glow { display: block; margin-top: 7%; }
.lite .glow img { display: block; margin: 0 auto; }
.over { left: 0; padding: 10% 0 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 1; }
.banner { clear: both; display: block; text-align: center; width:100%; }
.banner h1 span { background: url("../images/line.svg") no-repeat bottom right; display: inline-block; font-size: 50px; padding-bottom: 10px; }
.banner P { padding-block: 20px; }
.banner .info { color: rgba(255, 255, 255, 0.4); font-size: 15px; font-weight: 300; margin: 15px auto 0; max-width: 530px; width: 100%; }

.btn { border-color: var(--bs-white); border-radius: 50rem; color: var(--bs-white); font: 600 18px var(--primary-font); line-height: 40px; padding: 0.375rem 2rem; }
.btn-outline-light { background-color: rgba(255, 255, 255, 0.06); }
.btn-outline-light:hover, .btn-outline-light:focus { background: #BEC6D980; background: linear-gradient(90deg, rgba(190, 198, 217, 0.5) 0%, rgba(255, 255, 255, 0) 100%) !important; color: var(--bs-white); }

.diagram { left: 0; margin: 5% 0 0; position: absolute; top: 0; z-index: 1; }

.solution { clear: both; display: block; padding: 50px 0; text-align: center; width:100%; }

.grad { background: url("../images/grad.png") no-repeat left bottom; clear: both; display: block; width: 100%; }

.feature { clear: both; display: block; padding: 0 0 130px; width:100%; }
.feature .pics { height: 488px; position: relative; }
.feature picture { left: 15px; position: absolute; top: 15px; z-index:1; }
.feature .accordion-item { background-color: inherit; border: inherit; margin-bottom: 20px; }
.feature .accordion-header .accordion-button { background-color: inherit; border-radius: 10px; font-size: 30px; padding: 1rem 2.25rem; }
.feature .accordion-button:not(.collapsed).accordion-button { background-color: rgba(255, 255, 255, 0.09);border: 1px solid rgba(180, 213, 255, 0.6); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: inherit; }
.feature .accordion-body { background-color: rgba(255, 255, 255, 0.09); border: 1px solid rgba(180, 213, 255, 0.6); border-top: inherit; border-radius: 0 0 10px 10px; color: var(--bs-white); font: 300 17px var(--primary-font); padding: 0 35px 20px 35px; }
.feature .accordion-item:first-of-type > .accordion-header .accordion-button { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.feature .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed { border-radius: 10px 10px; }
.feature .accordion-button::after { background-size: 22px 20px; height: 20px; width: 22px; }
.feature .accordion-button.blue-1::after { background-image: url("../images/arw_01.svg"); }
.feature .accordion-button.blue-1:not(.collapsed)::after { background-image: url("../images/arw_01.svg"); }
.feature .accordion-button.blue-2::after { background-image: url("../images/arw_02.svg"); }
.feature .accordion-button.blue-2:not(.collapsed)::after { background-image: url("../images/arw_02.svg"); }
.feature .accordion-button.blue-3::after { background-image: url("../images/arw_03.svg"); }
.feature .accordion-button.blue-3:not(.collapsed)::after { background-image: url("../images/arw_03.svg"); }
.feature .accordion-button.blue-4::after { background-image: url("../images/arw_04.svg"); }
.feature .accordion-button.blue-4:not(.collapsed)::after { background-image: url("../images/arw_04.svg"); }
.feature .accordion-button.blue-1 { color: #B4D5FF; }
.feature .accordion-button.blue-2 { color: #6A9DE1; }
.feature .accordion-button.blue-3 { color: #2875D9; }
.feature .accordion-button.blue-4 { color: #005DD6; }

.pas { background-color: rgba(255, 255, 255, 0.09); border: 1px solid var(--gray); border-radius: 20px; box-shadow: inset 2px 3px 20px rgba(255, 255, 255, 0.2), 0 3px 6px rgba(0, 0, 0, 0.16); padding: 40px 20px; text-align: center; width: 100%; }
.pas h2 { font-size: 30px; margin: 0; }

.parallax { clear: both; width: 100%; }
/* Words animate */
.reveal-text span { opacity:0; transform:translateY(20px); display:inline-block; transition:all .6s ease; }
.reveal-text span.show{ opacity:1; transform:translateY(0); }

.ceque { clear: both; display: block; padding: 70px 0; text-align: center; width:100%; }
.ceque .card { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 17px; margin: 0 0 30px 0; overflow: hidden; position: relative; }
.ceque .card img { transition: all ease-in-out 0.5s; width: 100%; }
.ceque .card:hover img { transform: scale(1.1); transition: all ease-in-out 0.5s; }
.ceque .overlay { align-items: center; display: flex; height: 100%; justify-content: center; left: 0; padding: 5%; position: absolute; top: 0; width: 100%; z-index: 1; }
.ceque .overlay p { font-size: 21px; }

.contient { background: url("../images/grad.png") no-repeat 8% center / contain; clear: both; display: block; padding: 40px 0; text-align: center; width:100%; }
.contient .panel { background-color: #FCFCFC0D; border: 1px solid #FCFCFC; border-radius: 20px; padding: 2rem 0.5rem; width:100%; }
.contient .panel figure { align-items: center; display: flex; height: 90px; justify-content: center; margin: 0 auto 1rem; }
.contient .panel figure img { display: inline-block; width: auto; }
.contient .panel p { font-size: 20px; line-height: normal; margin: 0; }

.formation { clear: both; display: block; padding: 20px 0; width:100%; }
.formation ul { list-style: none; margin: 0; padding: 0; }
.formation ul li { background: url("../images/check.svg") no-repeat left 5px; margin-bottom: 10px; padding-left: 35px; }

footer { background: url("../images/ftr_bg.png") no-repeat center bottom / contain; clear: both; display: block; font-size: 16px; padding: 70px 0 25px; width: 100%;  }
footer hr { opacity: 1; }
.rejoindre { clear: both; display: block; margin-bottom: 4rem; text-align: center; width:100%; }
.rejoindre h2 { font-size: 45px; margin-bottom: 0; }
.rejoindre p { margin: 1rem 0 2rem; }
.rejoindre p.info { color: var(--bs-white); font-size: 15px; margin: 2rem auto 0; }

/* -------------------
    Media Query
--------------------------- */

@media only screen and (max-width: 767px) {
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	p, li { font-size: 16px; }
	.col { flex-basis: auto; }
	.btn { font-size: 16px; }
	.navbar-toggler { border: inherit; filter: brightness(0) invert(1);}
	.navbar .container { justify-content: inherit; margin-top: 0; }
	.navbar-brand { margin: 0; position: relative; max-width: 130px; }
	.navbar-collapse { background-color: var(--gray); }
	.navbar-nav .nav-item { border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin: 0; }
	.over { padding-top: 100px; }
	.lite .glow { margin-top: 85%; }
	.lite .glow img { object-fit: cover; height: 150vh; }
	.banner { padding-bottom: 150px; }
	.banner h1 span { font-size: 42px; }
	.diagram { margin-top: -120px; }
	.feature { padding-bottom: 20px; }
	.feature .accordion-header .accordion-button { font-size: 24px; }
	.feature .accordion-body { font-size: 15px; }
	.feature .pics { height: 350px; }
	.pas h2 { font-size: 26px; }
	.ceque .overlay p, .contient .panel p { font-size: 18px; }
	.container .ps-0 { padding-left: 1rem !important; }
	.rejoindre h2 { font-size: 32px; }
	footer { background-size: auto; font-size: 14px; }
	footer a { display: inline-block; margin: 8px 3px 0;}
	footer, footer .text-end { text-align: center !important; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	h1 { font-size: 30px; }
	h2 { font-size: 26px; }
	p, li { font-size: 16px; }
	.navbar-toggler { border: inherit; filter: brightness(0) invert(1);}
	.navbar .container { justify-content: inherit; margin-top: 0; }
	.navbar-brand { margin: 0; position: relative; max-width: 130px; }
	.navbar-collapse { background-color: var(--gray); }
	.navbar-nav .nav-item { border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin: 0; }
	.over { padding-top: 14%; }
	.lite .glow { margin-top: 35%; }
	.banner { padding-bottom: 80px; }
	.banner h1 span { font-size: 38px; }
	.banner P{ font-size: 18px; }
	.diagram { margin-top: -120px; }
	.feature { padding-bottom: 40px; }
	.feature .pics { height: auto; }
	.feature .accordion-header .accordion-button { font-size: 24px; }
	.feature .accordion-body { font-size: 15px; }
	.pas h2 { font-size: 24px; }
	.ceque .overlay p, .contient .panel p { font-size: 14px; }
	.rejoindre h2 { font-size: 32px; }
	footer { font-size: 14px; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
	h1 { font-size: 35px; }
	h2 { font-size: 29px; }
	p, li { font-size: 16px; }
	.over { padding-top: 18%; }
	.lite .glow { margin-top: 25%; }
	.banner h1 span { font-size: 42px; }
	.diagram { margin: -5% 0 0 -6%; }
	.feature { padding-bottom: 40px; }
	.pas h2 { font-size: 26px; }
	.ceque .overlay p { font-size: 17px; }
	.contient .panel p { font-size: 14px; }
	.rejoindre h2 { font-size: 40px; }
}

@media only screen and (min-width: 1280px) and (max-width: 1440px) {
	.over { padding-top: 14%; }
	.contient { background-position: -10% center; }
}