@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

html{
    font-size: 62.5%;
 }

 :root{
    --size-display: 5.49rem;
    --size-h1: 4.39rem;
    --size-h2: 2.81rem;
    --size-p:1.8rem;

    --main-green: #2D6431;
    --light-green: #ABC9BE;
    --main-white:#FFF;
    --page-background:#F7F8F8;
    --main-grey: #0F0D0D;
 }


/* Margins & Paddings*/
 .mb-16{
   margin-bottom: 1.6rem;
 }

 .mb-24{
   margin-bottom: 2.4rem;
 }

 .mb-32{
   margin-bottom: 3.2rem;
 }

 .mb-88{
   margin-bottom: 8.8rem;
 }

 .pd-box{
   padding: 4.8rem;
 }



 .fonts-loaded body{
    font-family: 'Roboto', sans-serif;
    font-size: var(--size-p);
    font-weight:400;
    line-height: 150%;
    color: var(--main-grey);
    background: var(--page-background);
 }

 .fonts-loaded .title-display{
    font-family: 'Roboto Slab', serif;
    font-size: var(--size-display);
    font-weight: 800;
    line-height: 120%;
 }

 .fonts-loaded .primary-title{
    font-family: 'Roboto Slab', serif;
    font-size: var(--size-h1);
    font-weight: 700;
    line-height: 120%;
 }

 .fonts-loaded .secondary-title{
    font-family: 'Roboto Slab', serif;
    font-size: var(--size-h2);
    font-weight: 700;
    line-height: 120%;
 }

 /* Header */
 .upper-header{
    padding: .8rem;
 }

 .upper-header a{
   color: var(--main-grey);
}


.fonts-loaded .logo span{
    font-family:'Roboto Slab', serif; 
    font-size: var(--size-p);
    line-height: 150%;
    text-transform: uppercase;
    padding-left: 1.6rem;
 }

 .menu{
    background-color: var(--main-green);
    text-transform: uppercase;
 }

 .menu .navbar li a{
    color: var(--main-white);
 }

 .menu .nav-item{
    margin-left: 2.4rem;
 }

 .menu .nav-item .active{
   color: white;
   border-bottom: 3px solid var(--light-green);
 }

 .navbar .nabar-toggler span{
   color: var(--main-white);
 }

.navbar .dropdown-menu a{
   color: var(--main-grey) !important;
   padding: .8rem;
   font-size: var(--size-p)
}

.navbar .dropdown-menu a:hover{
   color: var(--main-green) !important;
   
}

.navbar-toggler{
   border: 1px solid var(--main-white);
   color: var(--main-white);
}

.offcanvas{
   background-color: rgba(135, 136, 138, 0.2);
   width: 100%;
   padding: 1.5rem 1rem;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(35px);
   animation: fadeInUp 0.3s;
 
 }
 
 .offcanvas-body input{
    max-width: 60rem;
    height: 6rem;
    margin: 0;
 }
 
 .offcanvas-body .btn{
    height: 6rem;
    margin: 0;
    padding: 1.6rem 1.6rem;
 }
 

 /* Slider */
 #carousel-home a{
    text-decoration: none;
 }
 .carousel-item::after {
     content: "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, .15);
     z-index: 1;
 } 
 
 .carhome-img{
     height: 650px;
     width: 100%;
     object-fit: cover;
     object-position: center;
     z-index: -1;
 }
 
 .carhome-caption{
     position: absolute;
     color: var(--white);
     top: 10%;
     left: 7%;
     width: 100%;
     z-index: 2; 
 }
 .carhome-cptn-in{
     max-width: 650px;
     position: relative;
     padding: 4rem 3.2rem;
     color: var(--white-text);
     border-radius: .8rem;
     text-align: left;
     color: var(--main-white)
 }

 .dark::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  .btn-primary{
    background-color: var(--main-green);
    border:none;
    padding: 1.6rem 4.8rem;
    border-radius: .8rem;
    max-height: 5.5rem;
    margin-top: 1.6rem;
    font-size: var(--size-p);
    text-transform: uppercase;
    transition: background-color 0.5s ease;
  }

  .btn-primary:hover{
   background-color: var(--main-white); 
   color: var(--main-green);  
 }

  .btn-outlined{
   border:1px solid var(--main-green);
   padding: 1.6rem 4.8rem;
   border-radius: .8rem;
   max-height: 5.5rem;
   margin-top: 1.6rem;
   font-size: var(--size-p);
   text-transform: uppercase;
   transition: background-color 0.5s ease;
 }

 .btn-outlined:hover{
   background-color: var(--main-green);
   color: var(--main-white);
 }

 /*  Our products */

 #our-products{
   background: rgba(171, 201, 190, 0.15);
   
 }
 .custom-list li{
   list-style:none;
   padding-left: 0;
 }

 .intro{
   max-width: 75rem;
 }

 .custom-list li::before{
   content: "\e876";
   font-family: 'Material Symbols Outlined';
   font-size: var(--size-h2);
   margin-right: .8rem;
   color: var(--main-green);
   vertical-align: middle;
 }

/*  Our news */

.news-item{
   background: var(--main-white);
   padding: 1.6rem;
   border-radius: .8rem;
   display: flex;
   flex-direction: column;
   margin-bottom: 2.4rem;
   transition: background-color 0.5s ease;
}

.news-item a{
   color: var(--main-grey);
   text-decoration: none;
}

.news-item:hover{
   background: var(--light-green);
}

.news-item img{
   border-radius: .8rem;
}

.date::before{
   content: "\ebcc";
   font-family: 'Material Symbols Outlined';
   font-size: var(--size-h2);
   margin-right: .8rem;
  fill: var(--main-grey);
  opacity: .45;
   vertical-align: middle;
}
.pagination{
   border-radius: 1.6rem;
}
.page-item .page-link, .page-item:first-child .page-link, 
.page-item:last-child .page-link {
  font-size: var(--size-p);
  color: var(--main-grey);
  padding: .8rem 1.6rem;
}
.page-link.active, .active > .page-link{
   background-color: var(--main-green);
   color: var(--main-white);
}

#content img{
   max-width: 85.2rem;
}

#content .main-content{
   max-width: 75rem;
}

#content img{
   border-radius: .8rem;
}

.blockquote{
   font-size: 2.25rem;
   font-weight: 700;
   line-height: 150%;
}

.fonts-loaded .blockquote::before{
   content:'<<';
   font-family: 'Roboto Slab', serif;
   font-size: var(--size-display);
   color: var(--main-green);
}

.histoire img{
   border-radius: 1.6rem;
}

.missions img{
   border-radius: 1.6rem;
}

footer{
   background-color: var(--main-green);
   color: var(--main-white);
}

.light{
   font-weight: 200;
}

.footer-links a{
   margin-right: 2.4rem;
   color: var(--main-white);
}

#title{
   background: var(--light-green);
}

#title p, h1{
   max-width: 610px;
}
.text-width{
   max-width: 75rem;
}

.missions-item::before{
   content: "\e876";
   font-family: 'Material Symbols Outlined';
   font-size: var(--size-h2);
   margin-right: .8rem;
   color: var(--main-green);
}

.fonction{
   background: var(--main-white);
   padding: 4.8rem 1.6rem ;
   position: relative;
   margin-top: -2rem;
   z-index:1;
   border-radius: .8rem;
}

.portrait{
   position: relative;
   z-index: 2;
}

.filter .form-select{
   max-width: 90%;
}

.categorie::before{
   content: "\f05b";
   font-family: 'Material Symbols Outlined';
   font-size: var(--size-h2);
   margin-right: .8rem;
  fill: var(--main-grey);
  opacity: .45;
   vertical-align: middle;
}

.contact input{
   height: 5.5rem;
   border-radius: 1.6rem;
}

.contact textarea{
   min-height: 25rem;
}

.results .result-item{
   border-bottom: .5px solid var(--main-grey);
}

.results .result-item:last-child{
   border-bottom:none !important;
}

.result-item a{
   color: var(--main-green);
   text-decoration: none;
}
/* Media queries */

@media screen and (max-width:764px) {
   :root{
      --size-display: 3.52rem;
      --size-h1: 3.52rem;
      --size-h2:2.81rem;
   }

   .carhome-caption{
      position: absolute;
      color: var(--white);
      top: 9%;
      left: 0;
      width: 100%;
      z-index: 999;
}
}

/* Key numbers*/
.key-numbers{
   margin-bottom: 8.8rem;
}
.number-title{
   margin-bottom:5.4rem !important;
   line-height: 100%;
}

.number-item{
   border:1px solid var(--light-green) ;
   padding:3.2rem ;
}

.number-item:hover{
   background-color: var(--light-green);
}

.number-title{
   margin-top:5.4rem ;
   margin-bottom: 1.6rem;
}

.number-icon{
   height: 6.4rem;
}

.video-item {
   max-width: 600px;
   margin: 20px auto;
   padding: 16px;
   border: 1px solid #ccc;
   border-radius: 12px;
   background: #f9f9f9;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }