/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: white;
}

/* Header container */
header {
    position: relative;
    height: 100vh; /* Full viewport height */
    width: 100%;
    overflow: hidden; /* Ensure the video doesn't overflow */
}

/* Background video styling */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the full container */
	z-index: -1; /* Put the video behind everything */
}

/* Top menu styling */
.top-menu {
    position: fixed; /* Make the menu stay at the top when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
	backdrop-filter: blur(6px); /* Apply a blur effect */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px; /* Add some padding */
    z-index: 2; /* Ensure it is above the video */
    box-sizing: border-box;
}


/* Logo styling */
.logo {
    height: 60px; /* Adjust logo height */
    max-height: 100%; /* Ensure it fits within the container */
}

/* Language menu styling */
.language-menu {
    position: absolute;
    top: 20px; /* Distance from the top */
    right: 25px; /* Distance from the right edge */
    z-index: 2; /* Ensure it appears above the video */
    display: flex;
    gap: 1px; /* Space between the links */
}

.language-menu a {
    text-decoration: none; /* Remove underline */
    color: white; /* Default text color */
    font-size: 0.8rem; /* Font size */
    border-bottom: 1px solid transparent; /* Underline effect */
    padding: 2px 4px; /* Padding for clickable area */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.language-menu a.active {
    color: #1e90ff; /* Blue for the active language */
    border-bottom: 1px solid #1e90ff; /* Add a blue underline for active language */
}

.language-menu a:hover {
    color: #7FFFD4; /* Blue text on hover */
    border-bottom: 1px solid #7FFFD4; /* Underline on hover */
}

.header-text {
    position: absolute;
	text-align: center;
    color: white;
    width: 100%; /* Make sure content stays within container */
	padding-top: 400px; 
	z-index: 1; /* Ensure content is on top of the video */
	font-size: 1.4rem; /* Adjust font size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .top-menu {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align content */
    }

    .language-menu {
        margin-top: 10px; /* Add spacing */
    }

    .header-text {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }
}


main {
    padding:20px;
}

/*------------------------------------------------------------Section Stats-----------------------------------------------------------------------*/
/* General grid container for the entire section */
.container-stat_boxes {
	padding-top:40px;
	margin: 0 auto; /* Center the container */
	max-width: 100%;
    position: relative;
	z-index: 0;
}
/* Ensuring boxes inside columns stretch to the full column height */
.container-stat_boxes .box {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
    padding: 30px;
	color: white;
	height: auto;
	box-sizing: border-box;
}
.container-stat_boxes .wrapper {
    display: flex;
    justify-content: center;
	flex-wrap: wrap; 
}

/* Three columns for desktop */
.container-stat_boxes .col-desktop-3 {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    box-sizing: border-box;
	padding: 15px; /* Equal padding */
}

/* Responsive layout for tablets: Adjusting for 2 columns */
.container-stat_boxes .col-tablet-2 {
    flex: 0 0 calc(50% - 20px); /* 50% width for two columns on tablets */
    max-width: calc(50% - 20px);
    box-sizing: border-box;
}

/* Full width for smaller screens */
.container-stat_boxes .col-tablet-1 {
    flex: 0 0 100%; /* 100% width for full-row on smaller screens */
    max-width: 100%;
    box-sizing: border-box;
}

/* Adding default padding for each column */
.container-stat_boxes .col-desktop-3,
.container-stat_boxes .col-tablet-2 {
    padding: 15px; /* Inner padding */
	box-sizing: border-box; /* Ensures padding doesn’t affect column width */
}

/* Text styling inside boxes */
.container-stat_boxes .box .text {
    display: flex;
    flex-direction: column;
}

.container-stat_boxes .box .subheading {
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 19.07px;
    padding-top: 15px;
    margin-bottom: 20px;
    width: 100%;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
	box-sizing: border-box; 
}

.container-stat_boxes .box .stat {
    font-family: Arial, sans-serif;
    font-size: 73.14px;
    line-height: 1;
    margin-bottom: 30px;
}

.container-stat_boxes .box .reference-text {
    margin-bottom: 30px;
	font-size: 16px;
	text-align:justify;
}
.container-stat_boxes h2 {
	line-height: 1.3;
	font-size: 1.2em;
    text-align: justify;
}
.container-stat_boxes h3 {
    margin-bottom: 0;
}

/* Additional rule for <sup> inside .stat */
.container-stat_boxes .box .stat sup a {
    color: inherit; /* Ensures the link inherits the surrounding font color */
    text-decoration: none; /* Removes underline if not needed */
}

.container-stat_boxes .box .stat sup {
    color: inherit; /* Matches the <sup> color with the surrounding text */
    font-size: 0.3em; /* Optional: Adjust the font size if necessary */
    vertical-align: top; /* Keeps the <sup> aligned properly */
    position: relative; /* Maintain the current positioning */
    top: -0.4em; /* Fine-tune position if needed */
}
/* Ensure <sup> elements and their links inherit the font color */
.container-stat_boxes .box .reference-text sup a {
    color: inherit; /* Makes the link inherit the text color of its parent */
    text-decoration: none; /* Removes underline if not desired */
}

.container-stat_boxes .box .reference-text sup {
    color: inherit; /* Ensures <sup> itself matches the parent text color */
    font-size: 0.8em; /* Optional: Adjust size if needed */
}
/*------------------------------- General button styles------------------- */
.button.stats {
    display: inline-block; /* Ensures the button's area fits the text */
    padding: 10px 20px; /* Adds space around the text */
    border: 2px solid white; /* White border around the button */
    background-color: transparent; /* Transparent background */
    color: white; /* White text color */
    text-decoration: none; /* Removes underline */
    font-size: 16px; /* Adjust font size */
    font-family: Arial, sans-serif; /* Font family for consistency */
    text-align: center; /* Center the text */
    transition: all 0.3s ease; /* Smooth transition for hover and click effects */
    border-radius: 2px; /* Optional: rounded corners */
}

/* Hover state: Change background color to cyan */
.button.stats:hover {
    background-color: white;
    color: black; /* Ensures text contrast on cyan background */
}

/* Active state (when clicked): Change background color to pink */
.button.stats:active {
    background-color: aquamarine;
    color: black; /* Ensures text contrast on pink background */
}

/* Full width for small screens */
@media (max-width: 768px) {
    .container-stat_boxes .col-desktop-3,
    .container-stat_boxes .col-tablet-2,
    .container-stat_boxes .col-tablet-1 {
        flex: 0 0 100%; /* Full width for smaller screens */
        max-width: 100%;
    }

    /* Reduce box padding and gap for small screens */
    .container-stat_boxes .box {
        padding: 10px;
    }

    .container-stat_boxes .wrapper {
        gap: 10px; /* Reduce gap further for small screens */
    }
}

/* Scale text and padding for smaller screens */
@media (max-width: 480px) {
    .container-stat_boxes .box .stat {
        font-size: 50px; /* Reduce stat font size */
        line-height: 1.2;
    }

    .container-stat_boxes .box .subheading {
        font-size: 14px; /* Reduce subheading font size */
        margin-bottom: 15px;
        padding-top: 10px;
    }

    .container-stat_boxes .box .reference-text {
        font-size: 14px; /* Reduce text size for better fit */
        margin-bottom: 15px;
    }

    .container-stat_boxes h2 {
        font-size: 1rem; /* Scale down H2 font size */
        line-height: 1.2;
    }
}


/*------------------------------------------------le reste de la page---------------------------------------------------*/
.section_top, .section_middle_1, .section_bottom {
    margin: 20px 0;
	margin-top:80px;
}
/*-------------------------------------------------Top----------------------------------------------------------------------*/
.section_top h2 {
    font-size: 2.2rem;
	font-weight:bold;
    color: black;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}
.section_top p {
    font-size: 1rem;
    color: black;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}
.section_top {
    font-size: 1rem; /* Adjust this size for the top section */
}

.video-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.video-container video {
    width: 100%;
    height: auto;
}

/*---------------------------------Middle_1-------------------------------------------------------------*/
.section_middle_1 {
    font-size: 1rem; /* Adjust this size for the middle section */
	color:white;
	padding:20px;
}
.section_middle_1 h2 {
    font-size: 2.2rem;
	font-weight:bold;
    color: white;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}
.section_middle_1 h3 {
    font-size: 1.5rem;
	font-weight:bold;
    color: white;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: left; /* Justify text */
}
.section_middle_1 p{
    font-size: 1rem;
    color: white;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}

.section_middle_1 .icon {
    width: 30px; /* Adjust the size as needed */
    height: 30px;
    margin-right: 10px; /* Space between icon and text */
}

/*-------------------------------Expertise section--------------------------------------*/
/* General section styling */
.expertise-section {
    margin: 60px 0 40px;
}

.expertise-section h2 {
    text-align: left;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

/* Expertise container */
.expertise-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

/* Text container styling */
.text-container {
    flex: 1;
    max-width: 60%;
}

.text-container ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.text-container ul li {
    margin-bottom: 15px;
}

.text-container .list-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.text-container .list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.text-container .text-group {
    display: flex;
    flex-direction: column; /* Stack the heading and text vertically */
}

.text-container .text-group h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
    white-space: nowrap; /* Keep heading on one line */
}

.text-container .text-group span {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-top: 5px; /* Add space between heading and text */
}

/* Image container styling */
.image-container {
    flex: 1;
    max-width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100%; /* Ensure the container takes up full height */
    box-sizing: border-box; /* Include padding in height calculations */
}

.image-container img {
    max-width: 100%;
    height: auto;
    display: block;
	object-fit: contain; /* Ensure image scales properly within its container */
}

/* Responsive adjustments for larger screens */
@media (min-width: 1200px) {
    .expertise-section .icon-list_1 li {
        max-width: 1000px; /* Adjust for larger screens */
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .expertise-section {
        padding: 15px; /* Reduce padding for smaller screens */
        padding-top: 80px; /* Adjust top padding for smaller screens */
    }

    .expertise-section h2 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    .expertise-section p {
        font-size: 1rem; /* Adjust paragraph size */
    }

    /* Adjust the icon-list for smaller screens */
    .expertise-section .icon-list_1 li {
        flex-direction: column; /* Stack icon and text vertically */
        align-items: flex-start; /* Align items to the start */
    }

    /* Responsive layout for expertise-container */
    .expertise-container {
        flex-direction: column; /* Stack text and image vertically */
        align-items: center; /* Center-align items */
    }

    .text-container,
    .image-container {
        max-width: 100%; /* Allow containers to take full width */
        text-align: center; /* Center-align text for smaller screens */
    }

    .image-container img {
        margin: 20px auto; /* Center image with spacing */
        max-width: 80%; /* Ensure the image scales appropriately */
    }
}



/*-------------------------------Application section--------------------------------------*/
/* Ensure the application-section takes the full viewport height */
.application-section {
    padding: 60px 0px;
    background-color: white;
	box-sizing: border-box; /* Include padding in width/height */
	overflow: hidden; /* Prevent content from spilling outside the section */
}

.header-container {
    background-color: #00AEA2; /* vert menthe */
    color: white; /* Texte en blanc */
    padding: 20px; /* Espacement interne */
    border-radius: 0px; /* Coins arrondis */
    text-align: left; /* Centrer le texte */
    margin-bottom: 20px; /* Espacement avec la grille */
}

.header-container h2 {
    font-size: 2rem;
    margin-bottom: 10px; /* Espace entre le titre et le paragraphe */
}

.header-container p {
    font-size: 1.4rem;
    line-height: 1.5; /* Meilleure lisibilité */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px; /* Space between blocks */
    margin-top: 20px;
}

.grid-block {
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    text-align: center; /* Centrer les éléments horizontalement */
    display: flex;
    align-items: center; /* Aligner verticalement au centre */
    gap: 15px; /* Espace entre l'icône et le texte */
    text-align: left; /* Alignement du texte à gauche */
}

.grid-block img {
    width: 100px;
    height: 100px;
    object-fit: contain; /* Maintenir les proportions de l'image */
    margin-bottom: 10px; /* Espace entre l'image et le texte */
    border-radius: 4px; /* Ajout d'un léger arrondi */
}

.block-content {
    font-size: 1rem;
    line-height: 1.3;
    color: #333;
	text-align: left; /* Alignement du texte à gauche */
	flex-grow: 1; /* Prendre tout l'espace restant pour le texte */
}

.block-content strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: #000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Stack blocks on smaller screens */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}


/*--------------------------------Detection section----------------------------------------*/
.detection-section {
    padding: 40px 0px;
    background-color: white;
	box-sizing: border-box; /* Include padding in width/height */
	overflow: hidden; /* Prevent content from spilling outside the section */
}

.detection-container {
	background-image: url('img/bottom_img.jpg'); 
	background-size: cover; /* Ensure the image covers the entire container */
	background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating of the image */
    color: white; /* Texte en blanc */
    padding: 20px; /* Espacement interne */
    text-align: left; /* Centrer le texte */
    margin-bottom: 20px; /* Espacement avec la grille */
}

.detection-container h2 {
    font-size: 2rem;
    margin-bottom: 10px; /* Espace entre le titre et le paragraphe */
}

.detection-container p {
    font-size: 1.4rem;
    line-height: 1.5; /* Meilleure lisibilité */
}

/*------------------------------MRI---------------------------------------*/
/* Container global */

.header-grid h2 {
    font-size: 2rem;
    margin-bottom: 10px; /* Espace entre le titre et le paragraphe */
}
.rmi-container {
    display: flex; /* Aligner les sous-blocs horizontalement */
    flex-wrap: wrap; /* Permet de passer en ligne suivante si nécessaire */
    gap: 20px; /* Espacement entre les sous-blocs */ 
    border-radius: 4px; /* Coins arrondis pour le conteneur */
}

.rmi-block {
    display: flex; /* Disposer les contenus (image/vidéo et texte) horizontalement */
    flex-direction: row; /* Aligner les éléments verticalement pour une structure propre */
    flex: 1; /* Prendre une part égale de l'espace total */
    min-width: 300px; /* Largeur minimale pour les petits écrans */
    max-width: 48%; /* Limite de largeur pour chaque bloc */
    align-items: center; /* Centrer horizontalement */
    gap: 15px; /* Espacement entre les médias et le texte */
    padding: 15px; /* Marges internes */
    background-color: #fff; /* Fond blanc */
    border: 1px solid #ddd; /* Bordure discrète */
    border-radius: 4px; /* Coins arrondis */   
}

/* Pour le bloc de l'image, on aligne l'image à gauche et le texte à droite */
.rmi-block .img {
    flex-shrink: 0;
    gap: 15px; /* Espacement entre l'image et le texte */
}
.rmi-block .img img {
    width: 100%; /* Image occupe toute la largeur disponible */
    max-width: 200px; /* Largeur maximale fixe pour l'image */
    height: auto; /* Conserve les proportions */
    border-radius: 4px; /* Coins arrondis */
}

/* Pour le bloc contenant le texte */
.rmi-block .img-content {
    font-size: 1rem;
    line-height: 1.5;
    color: #333;
    flex-grow: 1; /* Le texte prend tout l'espace restant */
    text-align: justify; /* Aligner le texte à gauche */
	
}
.rmi-block strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: #000;
}
.rmi-block .video video {
    width: 100%; /* La vidéo occupe toute la largeur disponible */
    max-width: 700px; /* Largeur maximale fixe pour la vidéo */
    height: auto; /* Conserve les proportions */
    border-radius: 4px; /* Coins arrondis */
}

/*------------------------Media Queries for Responsiveness-----------------------*/
@media (max-width: 768px) {
    .detection-container h2 {
        font-size: 1.8rem; /* Smaller font size for medium screens */
    }

    .detection-container p {
        font-size: 1.1rem;
    }

    .rmi-block {
        flex-direction: column; /* Stack items vertically on smaller screens */
        max-width: 100%; /* Allow blocks to take full width */
    }

    .rmi-block .img img {
        max-width: 100%; /* Image adjusts to fit full width */
    }

    .rmi-block .video video {
        max-width: 100%; /* Video adjusts to fit full width */
    }
}

@media (max-width: 480px) {
    .detection-container h2 {
        font-size: 1.5rem; /* Smaller font size for small screens */
    }

    .detection-container p {
        font-size: 1rem;
    }

    .rmi-container {
        gap: 15px; /* Reduce spacing between sub-blocks */
    }

    .rmi-block {
        padding: 10px; /* Reduce padding for small screens */
    }

    .rmi-block strong {
        font-size: 1rem; /* Adjust font size for small screens */
    }
}
/*------------------------------------------------------Benefits-------------------------------------------------*/
.benefice-container {
	margin-top:60px;
    display: flex; /* Disposer les sous-blocs horizontalement */
    flex-wrap: wrap; /* Permettre l'affichage en colonne sur petits écrans */
    gap: 20px; /* Espacement entre les blocs */
    width: 100%; /* Occupe toute la largeur disponible */
	background-color: #061b3d; 
    box-sizing: border-box; /* Inclut les bordures et le padding */
}

/* Sous-blocs */
.block {
    flex: 1; /* Prendre une part égale de l'espace total */
    min-width: 300px; /* Largeur minimale pour les petits écrans */
    height: 300px; /* Hauteur fixe pour chaque bloc */
    border-radius: 4px; /* Coins arrondis */
    overflow: hidden; /* Contenir les débordements */
}

.video video {
    width: auto; /* La vidéo occupe toute la largeur disponible */
    max-width: 700px; /* Largeur maximale fixe pour la vidéo */
    height: 400px; /* Conserve les proportions */
    border-radius: 4px; /* Coins arrondis */
}

/* Bloc de texte */
.text-block {
    display: flex; /* Aligner le contenu */
    flex-direction: column; /* Empiler les éléments verticalement */
    justify-content: center; /* Centrer verticalement */
    align-items: flex-start; /* Aligner les éléments à gauche */
    padding: 20px; /* Marges internes */
    text-align: justify; /* Alignement du texte */
}

.image-text {
    display: flex; /* Aligner l'image et le texte horizontalement */
    align-items: center; /* Centrer verticalement */
    gap: 15px; /* Espacement entre l'image et le texte */
}

.arrow-icon {
    width: 30px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto; /* Conserve les proportions de l'image */
	display: inline-block; /* Ensure proper alignment */
}

.text-block h1 {
    font-size: 3.8rem; /* Taille du titre */
    margin-bottom: 10px; /* Espacement sous le titre */
    color: Orange; /* Couleur du titre */
}
.text-block h2 {
    font-size: 1.8rem; /* Taille du titre */
    margin-bottom: 20px; /* Espacement sous le titre */
    color: white; /* Couleur du titre */
	line-height: 1.2; /* Adjust line height for better centering */
}

/* Styling for the team page link */
.team-link {
    color: #FFA500; /* Blue text */
    /* text-decoration: none; Remove underline */
    font-size: 1rem; /* Adjust size as needed */
    font-weight: bold; /* Make it stand out */
    transition: color 0.3s ease; /* Smooth hover transition */
}

.team-link:hover {
    color: #7FFFD4; /* Change color on hover */
    text-decoration: underline; /* Add underline on hover */
}

.benefice-title {
    font-size: 1rem; /* Adjust this size for the bottom section */
}
.benefice-title h2 {
    font-size: 2.2rem;
	font-weight:bold;
    color: black;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}


.benefice-container_1 {
	margin-top:20px;
    display: flex; /* Disposer les sous-blocs horizontalement */
    flex-wrap: wrap; /* Permettre l'affichage en colonne sur petits écrans */
    gap: 20px; /* Espacement entre les blocs */
    width: 100%; /* Occupe toute la largeur disponible */
	background-color: #003292;
    box-sizing: border-box; /* Inclut les bordures et le padding */
	justify-content: space-between; /* Ensure equal spacing between items */
	align-items: center;
}
.benefice-container_1 .block, 
.benefice-container_1 .text-block_1 {
    flex: 1; /* Allow the blocks to grow and fill available space */
    min-width: 280px; /* Prevent blocks from becoming too small */
    height: auto; /* Allow height to adjust based on content */
    box-sizing: border-box; /* Ensure padding/border doesn't overflow */
}

/* Bloc de texte */
.text-block_1 {
    display: flex; /* Aligner le contenu */
    flex-direction: column; /* Empiler les éléments verticalement */
    align-items: flex-start; /* Aligner les éléments à gauche */
    padding: 30px; /* Marges internes */
    text-align: left; /* Alignement du texte */
	color:white;
	width: 100%; /* Ensure it takes up the full width */
	box-sizing: border-box; /* Include padding in width calculations */
    flex-grow: 1; /* Allow the element to grow and take available space */
}
.text-block_1 h2 {
    font-size: 1.8rem; /* Taille du titre */
    margin-bottom: 5px; /* Espacement sous le titre */
    color: white; /* Couleur du titre */
}
.text-block_1 h3 {
    font-size: 1.5rem; /* Taille du titre */
    margin-bottom: 5px; /* Espacement sous le titre */
    color: white; /* Couleur du titre */
	text-align: left; /* Force left alignment for h3 */
    width: 100%; /* Ensure it takes full width */
}

/* Image container styling */
.image-container {
    flex: 1;
    max-width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100%; /* Ensure the container takes up full height */
    box-sizing: border-box; /* Include padding in height calculations */
}

.image-container img {
	max-width: 100%;
    height: auto;
    display: block;
	object-fit: contain; /* Ensure image scales properly within its container */
}



/*---------------------------------------- Responsiveness ---------------------------------------------- */
/* Media query adjustments for medium-sized screens */
@media (max-width: 1024px) {
    .text-block_1 {
        padding: 15px; /* Reduce padding for medium-sized screens */
    }

    .text-block_1 h2, .text-block_1 h3 {
        font-size: 1.4rem; /* Adjust font size for medium screens */
    }

    /* If needed, adjust line-height for better text spacing */
    .text-block_1 h2, .text-block_1 h3 {
        line-height: 1.4; /* Improved spacing for readability */
    }
}

/* For devices with width ≤ 768px */
@media (max-width: 768px) {
    .benefice-container {
        display: flex;
        flex-direction: column; /* Stack blocks vertically */
        gap: 20px; /* Add consistent spacing */
        align-items: center; /* Center-align content for consistency */
    }

    .block, .block_1 {
        width: 100%; /* Use full width of the container */
        min-height: auto; /* Allow height to adjust dynamically */
        height: auto; /* Avoid fixed height */
        padding: 15px; /* Add padding for better spacing */
        box-sizing: border-box; /* Include padding in width/height calculations */
    }

    .video video {
        max-width: 100%; /* Ensure video scales with the container */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 10px; /* Add spacing below video */
    }

    .text-block, .text-block_1 {
        padding: 15px; /* Add padding for readability */
        text-align: center; /* Center-align text for better presentation */
    }

    .text-block h1, .text-block_1 h2 {
        font-size: 1.4rem; /* Scale font size */
        margin-bottom: 15px; /* Add spacing below titles */
    }

    .text-block h2, .text-block_1 h3 {
        font-size: 1.1rem; /* Adjust subtitle font size */
        margin-bottom: 10px; /* Add spacing below subtitles */
    }

    .arrow-icon {
        width: 25px; /* Scale down icon size */
    }

    .image-text {
        display: flex;
        flex-direction: column; /* Stack image and text vertically */
        align-items: center; /* Center align elements */
        gap: 10px; /* Add spacing between image and text */
    }

    .benefice-container_1 {
        flex-direction: column; /* Stack elements vertically */
        gap: 20px; /* Add spacing between sections */
        align-items: center; /* Center content for better layout */
    }
	.benefice-container_1 .block, 
    .benefice-container_1 .text-block_1 {
        min-width: 100%; /* Blocks take full width */
        height: auto; /* Let the height adjust automatically */
    }
	
	.text-block_1 {
        padding: 15px; /* Smaller padding for smaller screens */
    }

    .image-container {
        max-width: 100%; /* Full-width image container */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px; /* Add spacing below the image */
    }

    .image-container img {
        max-width: 100%; /* Prevent image overflow */
        height: auto; /* Maintain aspect ratio */
    }

    .text-block_1 img {
        max-width: 90%; /* Scale images within block */
        margin: 0 auto 15px; /* Center image and add spacing below */
        height: auto; /* Maintain aspect ratio */
    }

    .text-block_1 h3 {
        margin: 10px 0; /* Add spacing above and below each benefit */
        text-align: justify; /* Align text for readability */
    }
}

/* For devices with width ≤ 480px */
@media (max-width: 480px) {
    .benefice-container {
        gap: 15px; /* Adjust gap for smaller screens */
        padding: 10px; /* Add padding around the container */
    }

    .block, .block_1 {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .text-block h1, .text-block_1 h2 {
        font-size: 1.2rem; /* Further scale down title font size */
    }

    .text-block h2, .text-block_1 h3 {
        font-size: 1rem; /* Adjust subtitle font size */
    }

    .arrow-icon {
        width: 20px; /* Reduce icon size further */
    }

    .video video {
        max-width: 100%; /* Ensure video fits smaller screens */
    }

    .image-container img {
        max-width: 100%; /* Allow full-width images for smaller screens */
    }
	
	 .benefice-container_1 {
        flex-direction: column; /* Stack blocks vertically */
        gap: 10px; /* Reduce gap between blocks */
    }

    .benefice-container_1 .block, 
    .benefice-container_1 .text-block_1 {
        min-width: 100%; /* Take up full width */
        height: auto; /* Let height adjust automatically */
    }

    .text-block_1 {
        padding: 10px; /* Adjust padding for smaller screens */
        max-width: 100%; /* Ensure full-width images in blocks */
    }
}

/*---------------------------------Bottom-------------------------------------------------------------*/
.section_bottom {
    font-size: 1rem; /* Adjust this size for the bottom section */
}
.section_bottom h2 {
    font-size: 2.2rem;
	font-weight:bold;
    color: black;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}

.section_bottom p {
    font-size: 1rem;
    color: black;
	font-family: "Arial", sans-serif; /* Change font family */
    text-align: justify; /* Justify text */
}

.section_image {
    text-align: center; /* Centers the image */
    margin-top: 20px;   /* Adds spacing from the previous section */
}

.section_image img {
    width: 100%;        /* Ensures the image scales with the page width */
    max-width: 600px;   /* Limits maximum image size for readability */
    border-radius: 10px; /* Optional: Rounds the corners for a softer look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow for depth */
}

footer {
    text-align: center;
    padding: 20px 10px;
    background: #061b3d;
    color: white;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.footer-left {
    margin-left: 20px;
}

.footer-right {
    text-align: right;
    margin-right: 20px;
}

.footer-logo {
    width: 180px;
    height: auto;
	
}

.footer-link, .email-link {
    color: #1e90ff;
    text-decoration: none;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.footer-link:hover, .email-link:hover{
    color: #7FFFD4;
    text-decoration: underline;
}

.footer-divider {
    border-top: 1px solid #ffffff;
    margin: 15px 20px;
}



/* Responsive adjustments */

@media (max-device-width: 768px) {
    header {
        height: 60vh; /* Adjust height for smaller screens */
		padding: 30px;
    }
    
    /* Adjust the background video for small screens */
    .background-video {
        height: auto;
        width: 100%;
        object-position: center; /* Ensures the video is centered */
    }

    header img {
        height: 40px; /* Resize logo for smaller screens */
    }

    header h1 {
        font-size: 1.4rem; /* Adjust font size for smaller screens */
    }

    footer {
        font-size: 14px;
    }
    
    /* Adjust padding inside statistic boxes */
    .container-stat_boxes .box {
        padding: 20px; /* Reduced padding for smaller screens */
    }

    /* Adjust font sizes for headings in section top, middle, and bottom */
    .section_top h2, .section_middle_1 h2, .section_bottom h2 {
        font-size: 1.5rem;
    }

    .section_top p, .section_middle_1 p, .section_bottom p {
        font-size: 0.9rem;
    }

    .expertise-section ul {
        padding-left: 20px;
    }

    /* Responsive grid layout for .section-stat_boxes */
    .container-stat_boxes .wrapper {
		flex-wrap: wrap;
        flex-direction: row; /* Stacks columns vertically on small screens */
        gap: 10px; /* Smaller gap for compact layout */
    }

    .container-stat_boxes .col-tablet-2,
    .container-stat_boxes .col-tablet-1 {
        flex: 0 0 100%; /* Full width for all columns on small screens */
        max-width: 100%;
    }

    /* Adjust font size for statistic text */
    .container-stat_boxes .box .stat {
        font-size: 50px; /* Smaller text for statistics */
    }

    /* Adjust subheading font size */
    .container-stat_boxes .box .subheading {
        font-size: 14px; /* Reduce subheading font size */
        line-height: 18px; /* Adjust line height for better readability */
    }

    /* Adjust reference text margin */
    .container-stat_boxes .box .reference-text {
        margin-bottom: 20px; /* Reduce margin for compact layout */
    }

    /* Adjust button size in statistic boxes */
    .container-stat_boxes .box a.button {
        font-size: 0.9rem; /* Smaller button text */
        padding: 10px 15px; /* Adjust padding for buttons */
    }
}

@media (max-device-width: 768px) and (min-device-width: 480px) {
    .container-stat_boxes .wrapper {
        flex-wrap: wrap; /* Enable wrapping */
        flex-direction: row; /* Maintain row layout */
        gap: 10px;
    }

    .container-stat_boxes .col-tablet-2 {
        flex: 0 0 calc(50% - 10px); /* Each item takes up 50% of the width */
        max-width: calc(50% - 10px);
    }
}