body {
            padding: 0;
            margin: 0;
            font-family: 'Roboto', sans-serif;
            
        }

        .geeks {
            padding: 50px;
            text-align: center;
            color: white;
            font-family: Arial, sans-serif;
        }

        section {
            width: 100%;
            min-height: 300px;
            position: relative;
            z-index: 1;
            
            height: 60vw;
        }
        .contact{
            
            min-height: 150px;
            position: relative;
            z-index: 1;
            background-image: url('../assets/images/champ-de-ble-dore-au-coucher-du-soleil.jpg');
            position: relative;
            overflow: auto; 
             filter: blur(0.25px);
            -webkit-filter: blur(0.25px);
            /*animation: float 6s ease-in-out infinite;*/
            /* Full height */
            height: 50%;
            text-align: center;
            font-weight: bold;
            color: #fff;
            padding: 50px;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /* curved edge at the bottom */
            mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);

        }
        .pattern {
            
            position: relative;
            overflow: auto; 
             filter: blur(0.25px);
            -webkit-filter: blur(0.25px);
            /*animation: float 6s ease-in-out infinite;*/
            /* Full height */
            
           

            animation: slideshow 25s ease-in-out infinite;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /* curved edge at the bottom */
            mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
          /* Ensure no overflow from the ::before element */
        }

        .img{
            
            height: 100%;
            position: relative;
            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            
            /* curved edge at the bottom */
            mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
        }
        

   /* .cards-wrapper {
            display: flex;
            justify-content: center;
        }*/
        .card img {
            max-width: 100%;
            max-height: 100%;
        }
        .card {
            margin: 0 0.5em;
            box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
            border: none;
            border-radius: 0;
        }
        .carousel-inner {
            padding: 0.2em;
        }
        .carousel-control-prev, .carousel-control-next {
            background-color: #e1e1e1;
            width: 5vh;
            height: 5vh;
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
        }/*
        @media (min-width: 768px) {
           
        .card img {
            height: 11em;
        }
        }*/

       
        

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
}
        .bg-image{
            background-image: url('../assets/images/IMG_3815.JPG');
            /* Add the blur effect */
            
           
            /* Full height */
            height: 100%;

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            
            mask: radial-gradient(60% 70px at top,#0000 100%,#000);
        }
@-webkit-keyframes fadeIn { 
0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn { 
0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn { 
 0%   { opacity: 0; }
  100% { opacity: 1; } 
}

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay:1.7s;
animation-delay: 1.7s; 
}

.fade-in.three {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
animation-delay: 2.6s;
}

        /* Position text in the middle of the page/image */
        .bg-text {
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */
            color: white;
            font-weight: bold;
            border: 3px solid #f1f1f1;
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 60%;
            padding: 20px;
            text-align: center;
            
        }

@media (max-width: 768px) {
    .bg-text{
        width: 80%;
       top: 40%;
        background-color: rgba(0,0,0, 0.2);
    }
}

        .bg-text h1{
            color:darkgoldenrod;
            font-family: Stencil Std, fantasy;
        }
        .overlay{
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
            position: absolute;
            top: 0;
        }
        .footer{
           margin-top: 150px;padding: 10px;
        }
footer{
position: relative;
padding: 20px;
color: white;
font-weight: bold;
text-align: center;

}
        
.navbar-nav a{
    font-weight: bold;
    font-size: large;
}

.navbar-nav a.active{
    color:goldenrod;
    
    border-bottom: 3px solid goldenrod;
}
.navbar-nav a:hover{
    color:goldenrod;
    border-bottom: 3px solid goldenrod;
}
.navbar-nav a:focus{
    color:goldenrod;
    border-bottom: 3px solid goldenrod;
}
.navbar-nav a.dropdown-toggle{
    
    border-bottom: none;
}
.navbar-nav a.mail{
    
    border-bottom: none;
    
}

.map-container {
            height: 500px;
        }

 
@keyframes slideshow {
0% { background-image: url("../assets/images/champ-de-ble-dore-au-coucher-du-soleil.jpg"); }

20% { background-image: url("../assets/images/IMG_6363.jpg"); }

40% { background-image: url("../assets/images/IMG_6884_4.jpg"); }

60% { background-image: url("../assets/images/IMG_20211214_122504.jpg"); }

80% { background-image: url("../assets/images/IMG_20211214_122730.jpg"); }

100% { background-image: url("../assets/images/IMG_20211214_122730.jpg"); }

}


a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
.tab{ font-family: 'Nunito', sans-serif; }
.tab .nav-tabs{
    background-color: transparent;
    border: none;
}
.tab .nav-tabs li a{
    color: #222;
    background: transparent;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    padding: 15px 15px 10px;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}
.tab .nav-tabs li:last-child a{ margin-right: 0; }
.tab .nav-tabs li a:hover,
.tab .nav-tabs li a.active{
    color: #222;
    background: #fff;
    border: none;
}
.tab .nav-tabs li a.active{ color: goldenrod; }

.tab .nav-tabs li a:before,
.tab .nav-tabs li a:after{
    content: "";
    background-color: #d1d1d1;
    height: 7px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:after{
    background-color: goldenrod;
    height: 100%;
    opacity: 0;
}
.tab .nav-tabs li a.active:before,
.tab .nav-tabs li a:hover:before{
    height: 100%;
    opacity: 0;
}
.tab .nav-tabs li a.active:after,
.tab .nav-tabs li a:hover:after{
    height: 7px;
    opacity: 1;
}
.tab .tab-content{
    color: #555;
    background: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 23px;
    padding: 20px;
}
.tab .tab-content h3{
    color: #222;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 7px 0;
}
@media only screen and (max-width: 768px){
    .tab .nav-tabs li{ width: 100%; }
    .tab .nav-tabs li a{ margin: 0 0 10px; }
    .tab .tab-content h3{ font-size: 18px; }
}

@media only screen and (max-width: 768px){
   
    footer{overflow: scroll;}
}


.stat {
  
  padding: 24px;
  text-align: center;
  
}

 .stat .odometer {
  
  font-weight: bold;
  display: inline-block;
}

.stat .type {
  font-size: 20px;
}

.odometer.plus {
  position: relative;
}

.odometer.plus::after {
  content: "+";
  position: absolute;
  top: 0;
  right: -16px;
  font-size: 20px;
}

.grid-container {
  display: grid;
 
  grid-template-columns: 1fr; 
  gap: 20px; 
}

/* Media query for larger screens (e.g., 768px and above) */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
  }
}

#myCarousel {
    margin-top: 50px;
}

@media (max-width: 768px) {
    .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child {
        display: block;
        
    }
    
    
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    
    
    justify-content: center;
    align-items: center; 
}

@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next,
    .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(33%) !important;
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-item-prev:not(.carousel-item-end),
    .active.carousel-item-start,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33%) !important;
    }

    .carousel-item-next.carousel-item-start,
    .active.carousel-item-end {
        transform: translateX(0) !important;
    }

    .carousel-inner .carousel-item-prev,
    .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-33%) !important;
    }
}

@media (min-width: 768px){

    
    .download a{
        display: none;
    }
}
@media (max-width: 768px){

    .download iframe{
        display: none;
    }
    .download a{
        display: block;
        text-align: center;
        padding: 20px;
        
    }
    
}


    .scrolling-container {
        width: 100%; /* Or a specific width */
        overflow: hidden; /* Hides the text outside the container */
        white-space: nowrap; /* Prevents text from wrapping */
        box-sizing: border-box; /* Includes padding and border in the element's total width and height */
        color: red;
        border: 2px dashed green;
        background-color: gold;
        font-size: 25px;
        font-weight: bold;
    }

    .scrolling-text {
        /*display: inline-block; /* Allows transformation */
        padding-left: 100%; /* Starts text off-screen to the right */
        animation: scrollText 15s linear infinite; /* Apply the animation */
    }

    @keyframes scrollText {
        0% {
            transform: translate(0, 0); /* Initial position */
        }
        100% {
            transform: translate(-100%, 0); /* Moves text completely off-screen to the left */
        }
    }