:root {
--hb-color-theme:#8a6600;
--hb-color-theme-hover:#e3b06d
}
.bg-theme {
background-color:#000000!important
}


/**************/
/**** FONTS ****/
/**************/

/*
@font-face {
font-family:'Amatic SC';
font-style:normal;
font-weight:300;
src:url(../../assets/fonts/TUZyzwprpvBS1izr_vOECuSf.woff2) format("woff2");
font-display:swap;
}

@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  src: url(../../assets/fonts/TUZ3zwprpvBS1izr_vOMscGKfrUC.woff2) format('woff2')
  font-display:swap;
}
*/
/**************/
/**** FONTS ****/
/**************/
#cc-main {
     /** Change font **/
     --cc-font-family: Roboto;

     /** Change button primary color to black **/
     --cc-btn-primary-bg: var(--hb-color-theme);
     --cc-btn-primary-border-color: var(--hb-color-theme);
     --cc-btn-primary-hover-bg: var(--hb-color-theme-hover);
     --cc-btn-primary-hover-border-color: var(--hb-color-theme-hover);

     /** Also make toggles the same color as the button **/
     --cc-toggle-on-bg: var(--cc-btn-primary-bg);

     /** Make the buttons a bit rounder **/
     --cc-btn-border-radius: 10px;
 }
.navbar-nav {
--bs-nav-link-padding-x:0;
--bs-nav-link-padding-y:.5rem;
--bs-nav-link-font-weight:500;
--bs-nav-link-color:#fff;
--bs-nav-link-hover-color:#fbd871;
--bs-nav-link-disabled-color:#dc3545
}

.btn-primary {
font-size:14px;
font-weight:600;
--bs-btn-color:#fff;
--bs-btn-bg:var(--hb-color-theme);
--bs-btn-border-color:var(--hb-color-theme);
--bs-btn-hover-color:#fff;
--bs-btn-hover-bg:#0b5ed7;
--bs-btn-hover-border-color:#0a58ca;
--bs-btn-focus-shadow-rgb:49,132,253;
--bs-btn-active-color:#fff;
--bs-btn-active-bg:#0a58ca;
--bs-btn-active-border-color:#0a53be;
--bs-btn-active-shadow:inset 0 3px 5px #00000020;
--bs-btn-disabled-color:#fff;
--bs-btn-disabled-bg:var(--hb-color-theme);
--bs-btn-disabled-border-color:var(--hb-color-theme)
}

.btn:hover,.btn:focus,.btn:active {
background-color:var(--hb-color-theme-hover)!important;
border-color:var(--hb-color-theme)!important
}

@media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display:none
}

.navbar .nav-item:hover .dropdown-menu {
display:block
}

.navbar .nav-item .dropdown-menu {
margin-top:0
}
}

.navbar-expand-lg .navbar-nav .nav-link {
padding-right:14px;
padding-left:14px
}

body {
font-family:"Open Sans",sans-serif;
font-size:16px;
color:#444
}

a {
text-decoration:none;
color:#4f92af
}

img {
width:100%;
height:auto
}

.card img {
border-top-left-radius:var(--bs-card-inner-border-radius);
border-top-right-radius:var(--bs-card-inner-border-radius)
}

a:hover {
color:#5eb8df;
text-decoration:none
}

h1,h2,h3,h4,h5,h6 {
/*font-family:'Amatic SC';*/
font-weight:700
}
h1 {
	font-size: calc(1.575rem + 3.9vw);
}
p.display-1 {
/*font-family:'Amatic SC';*/
font-weight:900;
margin-bottom: 30px;
}
p.display-6 {
/*font-family:'Amatic SC';*/
font-weight:700
}

h1 {
font-size:52px;
font-size: calc(1.575rem + 3.9vw);
}

h2 {
font-size:46px;
font-size: calc(1.425rem + 2.1vw);
font-size: calc(1.375rem + 1.5vw);
}

h3 {
/*font-size:32px;*/
font-size: 21px;
}

h4 {
font-size:28px
}

h5 {
font-size:24px
}

h6 {
font-size:18px
}

.carousel-caption {
    bottom: 28%;
}
.carousel-item { 
  transition: transform 2s ease, opacity .5s ease-out
}
.carousel-control-prev, .carousel-control-next {
    background-color: var(--hb-color-theme);
    height: 68px;
    width: 68px;
    border-radius: 50%;
    position: absolute;
    top: 46%;
}
.carousel-control-prev {
    left: 4%;
}
.carousel-control-next {
    right: 4%;
}
.overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        opacity: .3; 
		}
#header {
height:80px;
padding:20px 0;
position:relative;
z-index:10
}

#header .logo h1 {
margin:0;
padding:0;
line-height:1;
font-weight:300;
letter-spacing:3px
}

#header .logo h1 a,#header .logo h1 a:hover {
color:#fff;
text-decoration:none
}

#header .logo img {
padding:0;
margin:0;
max-height:40px
}

#header .contact-link a {
color:#fff;
padding-right:10px;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase
}

#header .contact-link a:hover {
text-decoration:underline
}

@media (max-width: 768px) {
#header .logo h1 {
font-size:28px;
padding:8px 0
}
}

#hero {
width:100%;
height:100vh;
background:url(../../assets/img/1000_F_630284063_lEOtsnIULyyipmZtRQYL7rNGVzHYaNJ1.webp) top center;
background-size:cover;
position:relative;
margin-top:0;
z-index:1
}

#hero .hero-container {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
display:flex;
background-color:#00000021;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
padding:0 15px
}

#hero h1 {
margin:0 0 10px;
text-transform:uppercase;
letter-spacing:4px;
color:#fff
}

#hero h2 {
color:#fff;
font-weight:700;
margin-bottom:30px;
font-size:24px
}

#hero .countdown {
font-size:48px;
font-weight:600;
color:#fff;
line-height:56px;
margin:30px 0 60px
}

@media (min-width: 1024px) {
#hero {
background-attachment:fixed
}
}

@media (max-width: 768px) {
#hero h1 {
font-size:28px;
line-height:36px
}

#hero h2 {
font-size:18px;
line-height:24px;
margin-bottom:30px
}

#hero .php-email-form input {
margin:0 auto
}
}

@media (max-width: 575px) {
#hero .countdown {
font-size:32px;
line-height:38px
}
}

section {
padding:80px 0
}

.section-bg {
background-color:#f7fafc
}

.section-title {
text-align:center;
padding-bottom:30px
}

.section-title h2 {
margin-bottom:60px
}

.section-title p {
margin-bottom:0
}

.contact .contact-info {
margin-bottom:20px;
text-align:center
}

.contact .contact-info .col-md-4>div {
min-height:267px;
background-color:var(--hb-color-theme)
}

.contact .contact-info i {
font-size:48px;
display:inline-block;
margin-bottom:10px;
color:#fff
}

.contact .contact-info address,.contact .contact-info p {
margin-bottom:0;
color:#fff
}

.contact .contact-info h3 {
font-size:18px;
margin-bottom:15px;
font-weight:800;
color:#fff
}

.contact .contact-info a {
color:#fff
}

.contact .contact-info a:hover {
color:#4f92af
}

.contact .contact-address,.contact .contact-phone,.contact .contact-email {
margin-bottom:20px
}

@media (min-width: 768px) {
.contact .contact-phone {
border-left:1px solid #ddd;
border-right:1px solid #ddd
}

.contact .contact-address,.contact .contact-phone,.contact .contact-email {
padding:20px 0
}
}

.parallax {
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover
}

.parallax-1 {
background-image:url(../../assets/img/1000_F_714521725_fa1PVAId6Wh2anQmtcv9wv0DyzwinNph.webp);
height:500px
}

.footer {
color:#fff;
font-size:14px;
position:relative
}

.footer .footer-top {
padding-top:80px;
padding-bottom:50px
}

.footer .logo {
margin-bottom:39px
}

.footer .f-about {
padding-right:10px
}

.footer .f-about p {
color:#fff;
font-size:14px;
display:block;
line-height:27px;
padding-bottom:20px
}

.footer-social {
margin-top:35px
}

.footer-social ul li {
display:inline-block;
margin-right:6px
}

.footer .f-about .footer-social ul li:last-child {
margin:0
}

.footer-social ul li a {
height:30px;
width:30px;
text-align:center;
font-size:24px;
display:block;
border:1px solid #eee;
line-height:35px;
border:none;
color:var(--secondary-color)
}

.footer-social ul li a:hover {
color:color-mix(in srgb,var(--secondary-color),#000)
}

.footer .footer-middle {
padding-bottom:10px;
padding-top:44px
}

.footer .single-footer {
margin-top:30px
}

.single-footer .h3 {
color:#fff;
font-size:21px;
font-weight:600;
position:relative;
text-transform:capitalize;
margin-bottom:30px
}

.footer .f-link ul,.footer ul.list {
list-style-type:none;
padding-left:0
}

.footer .f-link ul li {
margin-bottom:18px;
position:relative
}

.footer .f-link ul li:last-child {
margin:0
}

.footer .f-link ul li:hover:before {
background:#333
}

.footer.index2 .f-link ul li:hover:before {
background:#333
}

.footer .f-link ul li:last-child {
margin-bottom:0
}

.footer .f-link ul li a {
font-size:14px;
color:#fff
}

.footer .bi-caret-right-fill,.footer .bi-phone {
padding-right:8px;
font-weight:600;
font-size:16px
}

.footer .f-link ul li a:hover {
color:var(--hb-color-theme-hover)
}

.footer p a {
color:#fff;
margin-bottom:20px
}

.footer .f-contact p {
color:#fff;
margin-bottom:20px;
line-height:30px
}

.footer .f-contact ul li {
display:inline-block;
color:#fff;
font-size:14px;
font-weight:400
}

.footer .f-contact ul li a {
display:inline-block;
color:#fff;
font-size:14px;
font-weight:500;
font-weight:400
}

.footer .f-contact ul li a:hover {
padding:0
}

.footer .f-contact ul li i {
display:inline-block;
margin-right:7px;
font-size:17px;
color:var(--secondary-color)
}

.footer .custom-flex {
margin-right:-15px
}

.footer .custom-flex li {
width:calc(33.33% - 15px);
margin-bottom:15px;
margin-right:15px
}

.footer .gallery ul {
margin-left:-10px;
overflow:hidden
}

.footer .gallery ul li {
float:left;
margin:10px 0 0 10px;
padding:0
}

.footer .gallery ul li a {
position:relative;
display:block
}

.footer .gallery ul li a:before {
position:absolute;
content:"";
left:0;
top:0;
height:100%;
width:100%;
background:#d63384;
opacity:0;
visibility:hidden;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
transition:all .4s ease
}

.footer .gallery ul li a:hover:before {
opacity:.8;
visibility:visible
}

.footer .gallery ul li a i {
height:30px;
width:30px;
line-height:30px;
font-size:24px;
color:#fff;
display:block;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
margin-left:-15px;
margin-top:-15px;
text-align:center;
opacity:0;
visibility:hidden;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
transition:all .4s ease;
-webkit-transform:scale(0);
-moz-transform:scale(0);
transform:scale(0)
}

.footer .gallery ul li a:hover i {
-webkit-transform:scale(1);
-moz-transform:scale(1);
transform:scale(1);
opacity:1;
visibility:visible
}

.footer .gallery ul li img {
width:100%;
height:auto;
max-width:90px
}

.footer .footer-bottom {
background-color:#000;
color:#fff
}

.footer .footer-bottom a {
color:#fff;
margin:0 8px
}

.footer .footer-bottom span {
color:#fff;
margin:0 8px
}

.footer .footer-bottom .inner {
padding:15px 0
}

.footer .footer-bottom p a {
font-weight:400;
display:inline-block;
margin-left:6px
}

.footer .footer-bottom p a:hover {
color:var(--secondary-color)
}

.footer .footer-bottom .right {
text-align:right
}

.footer .copyright {
padding-top:0;
padding-bottom:25px
}

.footer .copyright p {
margin-bottom:0;
color:#fff
}

.footer .copyright p span {
color:#fff
}

.footer .credits {
color:#fff;
margin-top:6px;
font-size:13px
}

.social-share {
padding-bottom:.5rem;
margin-top:auto
}

.social-icon {
margin-top:39px
}

.social-icon-item {
list-style:none;
display:inline-block;
vertical-align:top
}

.social-icon-link {
background:var(--hb-color-theme);
border-radius:50%;
color:#fff;
font-size:24px;
display:block;
margin-right:20px;
text-align:center;
width:44px;
height:44px;
line-height:44px;
transition:background 0.2s,color .2s
}

.social-icon-link:hover {
background-color:var(--hb-color-theme-hover)
}

.social-icon-link i.bi:hover {
display:block;
animation:spinAround 2s linear infinite
}

@keyframes spinAround {
from {
transform:rotate(0deg)
}

to {
transform:rotate(360deg)
}
}

.scrolltotop {
display:block;
position:fixed;
bottom:10px;
right:10px;
line-height:48px;
height:48px;
width:48px;
color:#fff;
background-color:var(--hb-color-theme);
border:1px solid var(--hb-color-theme);
text-align:center;
filter:alpha(opacity=0);
opacity:0;
z-index:95
}

.scrolltotop i.bi {
font-size:24px;
font-weight:800
}

.scrolltotop.show {
bottom:10px;
filter:alpha(opacity=100);
opacity:1
}

.scrolltotop:hover,.scrolltotop:active,.scrolltotop:focus {
background-color:var(--hb-color-theme-hover);
color:#fff
}

.swiper {
width:100%;
padding-top:80px;
padding-bottom:50px
}

.swiper-button-next,.swiper-button-prev {
top:var(--swiper-navigation-top-offset,8%);
height:38px;
width:38px;
line-height:38px;
background-color:var(--hb-color-theme)
}

.swiper-button-next {
left:unset;
right:0
}

.swiper-button-prev {
left:unset;
right:60px
}

.swiper-button-next:after,.swiper-button-prev:after {
font-size:12px;
color:#fff;
font-weight:700
}

.swiper-pagination-bullet-active {
background:var(--hb-color-theme)
}

.swiper-slide {
text-align:center;
font-size:18px
}

.swiper-slide img {
display:block;
width:100%;
height:auto;
object-fit:cover
}

.formation {
background:#ece7e7
}

.formation .card {
-moz-box-shadow:6px 9px 5px #ced4da;
-webkit-box-shadow:6px 9px 5px #ced4da;
box-shadow:6px 9px 5px #ced4da
}

.formation .card-title {
color:var(--hb-color-theme);
font-weight:600;
text-align:center;
margin-bottom:0
}

.formation .card-header,.formation .card-footer {
display:flex;
    min-height: 94px;
align-items:center;
justify-content:center;
background-color:#fff;
border:none
}

.formation .card-body {
display:block;
padding:10px 20px;
min-height:220px
}

.formation .card p {
/*font-family:'Amatic SC';*/
/*font-weight:700;*/
/*letter-spacing:2px*/
}

.formation a.btn,.intro a.btn,.situer a.btn {
padding:12px 30px;
border-radius:29px;
text-transform:uppercase;
/*font-family:'Amatic SC';*/
letter-spacing:1px;
-moz-box-shadow:0 9px 5px #ced4da;
-webkit-box-shadow:0 9px 5px #ced4da;
box-shadow:0 9px 5px #ced4da
}

.finance .card {
-moz-box-shadow:6px 9px 5px #ced4da;
-webkit-box-shadow:6px 9px 5px #ced4da;
box-shadow:6px 9px 5px #ced4da
}

.finance .card-title {
    color: var(--hb-color-theme);
    font-weight: 600;
    margin-bottom: 0;
    text-align: center;
}

.finance .card-header {
    display: flex;
    min-height: 94px;
    align-items: center;
    justify-content: center;
    background-color: #f1f8ff;
    border: none;
}
.partenaire, .situer {
    background: #ece7e7;
}
.partenaire {
background:#ece7e7
}

.partenaire .card {
-moz-box-shadow:6px 9px 5px #ced4da;
-webkit-box-shadow:6px 9px 5px #ced4da;
box-shadow:6px 9px 5px #ced4da
}

.card {
position:relative;
display:block
}

.finance .card:before,.formation .card:before {
position:absolute;
content:"M'AUTOECOLE";
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
left:0;
top:0;
height:100%;
width:100%;
font-size:20px;
font-weight:700;
color:#fff;
color:#000;
background:var(--hb-color-theme);
background:#fff;
opacity:0;
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
transition:all .4s ease
}

.finance .card:hover:before, .formation .card:hover:before {
opacity:.80;
}
.formation .card-footer a {
z-index:1;
}