.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Changé pour mieux gérer l'espace */
    padding: 10px 20px;
    background-color: var(--background-color-header);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    direction: rtl;
    min-height: 70px;
    /* Hauteur de base */
    overflow: none;
    /* Permettre au dropdown de s'afficher */
}

.header-logo {
    flex-shrink: 0;
    margin-left: 20px;
    /* Espace à gauche du logo (droite en LTR) */
    z-index: 1002;

    width: 198px;
    height: 59px;
    background: url('https://static.codia.ai/image/2025-03-26/719aa8da-4f71-4a86-a77e-5f91aae5c8f0.png') center/cover no-repeat;
    /* Pour être au-dessus du menu mobile si besoin */
}

.header-logo .logo-image {
    height: 50px;
    /* Ajusté pour une meilleure proportion */
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;

}

/* Styles pour la navigation principale */
.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 25px;
    /* Augmenté pour plus d'espace */
    overflow: hidden;
    white-space: nowrap;
}

.header-nav .nav-link {
    text-decoration: none;
    color: var(--text-color-dark);
    font-family: var(--font-family-main);
    font-size: var(--font-size-nav);
    font-weight: 500;
    line-height: var(--line-height-buttons);
    white-space: nowrap;
    padding: 5px 0;
    /* Ajout de padding pour une meilleure zone cliquable */
    position: relative;
    /* Pour le pseudo-élément de soulignement */
}

.header-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    right: 0;
    /* Commence à droite pour RTL */
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out;
}

.header-nav .nav-link.nav-link-active::after,
.header-nav .nav-link:hover::after {
    width: 100%;
    left: 0;
    /* S'étend vers la gauche pour RTL */
    right: auto;
}

.header-nav .nav-link.nav-link-active,
.header-nav .nav-link:hover {
    color: var(--primary-color);
    font-weight: bold;
}

.nav-item-with-icon {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Styles pour les actions utilisateur */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    margin-right: 20px;
    /* Espace à droite des actions (gauche en LTR) */
}

.auth-buttons {
    display: flex;
    gap: 10px;
    /* Réduit l'écart */
}

.button-container .button-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 20px;
    /* Ajusté */
    min-height: 42px;
    /* Ajusté */
    border-radius: 25px;
    /* Plus arrondi */
    text-decoration: none;
    font-family: var(--font-family-main);
    font-size: clamp(14px, 1.8vw, var(--font-size-buttons));
    /* Responsive font */
    font-weight: 500;
    line-height: var(--line-height-buttons);
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.2s ease;
}

.button-container.button-register .button-link {
    background-color: #3fa7d6;
    color: #fff;
    border: 1px solid #3fa7d6;
}

.button-container.button-login .button-link {
    background-color: var(--background-color-header);
    color: var(--text-color-dark);
    border: 1px solid black;
}

.button-container.button-register .button-link:hover {
    background-color: #2c8ab8;
    border-color: #2c8ab8;
    transform: translateY(-2px);
}

.button-container.button-login .button-link:hover {
    background-color: #f0f0f0;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Menu utilisateur déroulant */
.user-menu-container {
    position: relative;
}

.user-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.profile-icon {
    display: inline-block;
    width: 42px;
    /* Augmenté */
    height: 42px;
    /* Augmenté */
    background-color: #ccc;
    border-radius: 50%;
    background-image: url("../images/profile-placeholder.png");
    /* Placeholder local */
    background-size: cover;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.user-menu-button:hover .profile-icon,
.user-menu-button[aria-expanded="true"] .profile-icon {
    border-color: var(--primary-color);
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    /* Un peu plus d'espace */
    left: 0;
    background-color: var(--background-color-header);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /* Plus arrondi */
    min-width: 220px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.user-dropdown-menu.is-active {
    display: block;
    z-index: 1004;
    background-color: white;
}

.user-dropdown-menu .user-info {
    padding: 12px 18px;
    border-bottom: 1px solid #e0e0e0;
}

.user-dropdown-menu .username {
    font-weight: bold;
    color: var(--text-color-dark);
    font-family: var(--font-family-main);
}

.user-dropdown-menu .dropdown-item {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--text-color-dark);
    font-family: var(--font-family-main);
    font-size: 15px;
    transition: background-color 0.2s, color 0.2s;
}

.user-dropdown-menu .dropdown-item:hover {
    background-color: #f0f0f0;
    color: var(--primary-color);
}

/* Menu Hamburger - Modernisé */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
    width: 35px;
    height: 35px;
    order: -1;
    background-image: url('../images/icons/hamburger_.png');
    background-repeat: no-repeat;
    background-size: contain;
    /* Pour le placer à droite en RTL */
    margin-left: 10px;
    /* Espace par rapport au logo si besoin */
}

.hamburger-box {
    width: 28px;
    /* Ajusté */
    height: 20px;
    /* Ajusté */
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 100%;
    height: 2.5px;
    /* Plus fin */
    background-color: var(--text-color-dark);
    position: absolute;
    border-radius: 3px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55),
        opacity 0.1s linear,
        background-color 0.2s linear;
    right: 0;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -8px;
    /* Ajusté */
}

.hamburger-inner::after {
    bottom: -8px;
    /* Ajusté */
}

.hamburger-menu[aria-expanded="true"] .hamburger-inner {
    transform: rotate(225deg);
}

.hamburger-menu[aria-expanded="true"] .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    opacity: 1;
}

.hamburger-menu[aria-expanded="true"] .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    opacity: 1;
    /* Maintenir visible pour former la croix */
}


/* Styles pour le bouton de fermeture */
.hamburger-menu-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1003;
    order: -1;
    width: 35px;
    height: 35px;
    background-image: url('../images/icons/hamburger-close.png');
    background-repeat: no-repeat;
    background-size: contain;
    /* Pour le placer à droite en RTL */
    margin-left: 10px;
    /* Espace par rapport au logo si besoin */
}

.hamburger-box-close {
    width: 28px;
    height: 28px;
    /* Carré pour une croix typique */
    display: inline-block;
    position: relative;
}

.hamburger-close-inner::before,
.hamburger-close-inner::after {
    content: "";
    width: 100%;
    height: 2.5px;
    background-color: var(--text-color-dark);
    /* Ou une couleur contrastante pour la fermeture */
    position: absolute;
    border-radius: 3px;
    top: 50%;
    left: 0;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger-close-inner::before {
    transform: translateY(-50%) rotate(45deg);
}

.hamburger-close-inner::after {
    transform: translateY(-50%) rotate(-45deg);
}



/* Styles responsives */
@media (max-width: 1100px) {

    /* Breakpoint où le menu hamburger apparaît */
    .header-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        /* margin-top: 30px; */
        /* Les liens prennent toute la largeur */
        position: fixed;
        /* Fixé en haut */
        top: 0;
        /* Hauteur du header, ou 0 si le header est caché/transformé */
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.98);
        /* Fond légèrement transparent */
        backdrop-filter: blur(5px);
        padding: 80px 0 20px;
        /* Padding haut pour laisser place au header fixe */
        z-index: 1000;
        overflow-y: auto;
        /* Scroll si contenu long */
        transform: translateX(100%);
        /* Caché à droite pour RTL */
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .header-nav.is-active {
        display: flex;
        transform: translateX(0%);
        z-index: 1001;
        overflow-y: hidden;
    }

    .header-nav .nav-link,
    .header-nav .nav-item-with-icon .nav-link {
        padding: 15px 25px;
        width: auto;
        /* Ajusté, le parent .header-nav gère la largeur */
        text-align: right;
        border-bottom: 1px solid #e8e8e8;
        white-space: normal;
        font-size: 18px;
        /* Plus grand pour mobile */
    }

    .header-nav .nav-link::after {
        display: none;
    }

    /* Pas de soulignement dans le menu mobile */

    .header-nav .nav-link:last-of-type,
    .header-nav .mobile-auth-placeholder+.nav-link {
        /* Si un lien suit le placeholder */
        border-bottom: none;
    }

    .nav-item-with-icon {
        width: auto;
    }

    .hamburger-menu,

    /* Cacher les boutons d'auth sur desktop dans la zone .user-actions */
    .user-actions .auth-buttons {
        display: none;
    }

    /* Styles pour les boutons d'auth dans le menu mobile */
    .mobile-auth-placeholder {
        padding: 20px 25px 0;
        margin-top: auto;
        /* Pousse les boutons en bas du menu */
    }

    .mobile-auth-placeholder .auth-buttons {
        display: flex;
        /* Rétablir l'affichage flex pour les boutons dans le menu */
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .mobile-auth-placeholder .button-container {
        width: 100%;
    }

    .mobile-auth-placeholder .button-link {
        width: 100%;
        text-align: center;
        padding: 12px 15px;
        font-size: 16px;
    }

    .header-container {
        /* justify-content: space-between; par défaut */
    }
}

@media (max-width: 767px) {
    .header-container {
        padding: 5px 15px;
        min-height: 60px;
    }

    .header-logo .logo-image {
        height: 40px;
    }

    .user-dropdown-menu {
        /* right: 0; */
        min-width: 200px;
        background: white;
        z-index: 1005;
    }

    .header-nav {
        padding-top: 70px;
        /* Ajuster si la hauteur du header change */
    }

    .header-logo {
        margin-left: 10px;
        /* Espace entre hamburger et logo */
        /* Pour éviter le chevauchement, on peut réduire la taille du logo ou le flex-grow de la nav */
        /* Ou s'assurer que le conteneur du logo et des liens ne peut pas dépasser 100% */
    }

    .user-actions {
        margin-right: 10px;
        /* Espace entre logo et actions utilisateur */
    }
}

/* Pour éviter le chevauchement du logo et des liens de navigation sur desktop */
@media (min-width: 1101px) {
    .header-nav {
        /* S'assurer que la nav ne pousse pas les user-actions hors de l'écran */
        /* Une solution est de limiter sa largeur maximale ou d'utiliser flex-shrink sur les éléments */
    }
}




/****** Footer ******/


.footer-container {
    background-color: #ffffff;
    /* Couleur de fond du footer original */
    color: #152e39;
    direction: rtl;
    padding: 40px 20px;
    /* Espacement intérieur général */
    font-family: 'Vazirmatn', 'Poppins', sans-serif;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    /* Permet aux colonnes de passer à la ligne sur mobile */
    justify-content: space-between;
    gap: 30px;
    /* Espace entre les colonnes */
    max-width: 1200px;
    /* Limite la largeur du contenu pour les grands écrans */
    margin: 0 auto;
    /* Centre le contenu */
}

.footer-column {
    flex: 1;
    /* Chaque colonne essaie de prendre une part égale */
    min-width: 250px;
    /* Largeur minimale avant de passer à la ligne */
    margin-bottom: 20px;
}

.footer-logo-about .footer-logo {
    max-width: 198px;
    /* Taille du logo fournie */
    height: auto;
    margin-bottom: 15px;
}

.footer-logo-about .about-text {
    font-size: 16px;
    line-height: 20.96px;
    text-align: justify;
}

.footer-heading {
    font-size: 24px;
    font-weight: 500;
    line-height: 31px;
    color: #fac264;
    margin-bottom: 20px;
    white-space: nowrap;
}

.footer-contact .contact-intro {
    font-size: 16px;
    line-height: 20.96px;
    margin-bottom: 10px;
    text-align: justify;
}

.footer-contact .contact-link {
    display: block;
    color: #3fa7d6;
    font-size: 16px;
    line-height: 20.96px;
    text-decoration: none;
    margin-bottom: 8px;
}

.footer-contact .contact-link:hover {
    text-decoration: underline;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links .footer-link-item {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #152e39;
    text-decoration: none;
    white-space: nowrap;
}

.footer-links .footer-link-item:hover {
    color: #3fa7d6;
}

.footer-social .social-icons {
    display: flex;
    gap: 15px;
    /* Espace entre les icônes sociales */
    flex-wrap: wrap;
    /* Permet aux icônes de passer à la ligne si nécessaire */
}

.footer-social .social-icon img {
    width: 42.65px;
    /* Taille des icônes fournie */
    height: 42.65px;
    object-fit: contain;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #e0e0e0;
    /* Séparateur léger */
    font-size: 14px;
    color: #152e39;
}

/* Styles responsives */
@media (max-width: 992px) {
    .footer-content {
        flex-direction: column;
        /* Empile les colonnes sur les tablettes */
        align-items: flex-start;
        /* Aligne les éléments au début en RTL */
    }

    .footer-column {
        min-width: 100%;
        /* Chaque colonne prend toute la largeur */
        margin-bottom: 30px;
    }

    .footer-logo-about .footer-logo {
        margin-right: auto;
        /* Centre le logo si le texte est centré */
        margin-left: auto;
    }

    .footer-logo-about .about-text,
    .footer-contact .contact-intro {
        text-align: right;
        /* Alignement à droite pour RTL sur mobile */
    }
}

@media (max-width: 767px) {
    .footer-container {
        padding: 30px 15px;
    }

    .footer-heading {
        font-size: 20px;
        /* Taille de titre légèrement réduite pour mobile */
    }

    .footer-links .footer-link-item,
    .footer-contact .contact-link,
    .footer-logo-about .about-text {
        font-size: 15px;
        /* Taille de texte légèrement réduite pour mobile */
    }

    .footer-social .social-icons {
        justify-content: flex-start;
        /* Aligne les icônes au début en RTL */
    }
}


/******* Contact ******/

.invitation-container {
    max-width: 1512px;
    /* Largeur maximale du conteneur original */
    margin: 0 auto;
    /* Centrage horizontal */
    padding: 50px 20px;
    /* Espacement intérieur, haut/bas basé sur le margin-top original du titre */
    margin-bottom: 15px;
    /* Marge inférieure originale */
    text-align: center;
    /* Centrage du texte pour les éléments enfants */
    background-color: #ffffff;
    /* Supposons un fond blanc pour le bloc */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Ombre légère pour la démo */
}

.invitation-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 59px;
    color: #152e39;
    margin-top: 0;
    /* Le padding du conteneur gère l'espace supérieur */
    margin-bottom: 20px;
    /* Espace entre le titre et le sous-titre */
    white-space: normal;
    /* Permettre le retour à la ligne */
}

.invitation-subtitle {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
    color: #152e39;
    margin: 0 auto;
    /* Centrage si la largeur est limitée */
    max-width: 851px;
    /* Largeur maximale du sous-titre original */
    white-space: normal;
    /* Permettre le retour à la ligne */
}

/* Styles responsives */
@media (max-width: 992px) {
    .invitation-title {
        font-size: 36px;
        /* Taille de police réduite pour tablettes */
        line-height: 1.3;
        /* Ajustement de la hauteur de ligne */
    }

    .invitation-subtitle {
        font-size: 20px;
        /* Taille de police réduite pour tablettes */
        line-height: 1.4;
        /* Ajustement de la hauteur de ligne */
    }
}

@media (max-width: 767px) {
    .invitation-container {
        padding: 30px 15px;
    }

    .invitation-title {
        font-size: 28px;
        /* Taille de police réduite pour mobiles */
    }

    .invitation-subtitle {
        font-size: 18px;
        /* Taille de police réduite pour mobiles */
    }
}

@media (max-width: 480px) {
    .invitation-title {
        font-size: 24px;
        /* Taille de police encore réduite pour petits mobiles */
    }

    .invitation-subtitle {
        font-size: 16px;
        /* Taille de police encore réduite pour petits mobiles */
    }
}


/******** Samples *********/


.content-extracts {
    max-width: 1720px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.section-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 59px;
    color: #152e39;
    margin-bottom: 77px;
    white-space: nowrap;
    /* Pour correspondre à l'original, mais peut être ajusté */
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    /* Cache les cartes qui ne sont pas visibles */
    width: 100%;
}

.cards-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    /* Espace entre les cartes */
    padding-bottom: 20px;
    /* Espace pour l'ombre de la carte */
}

.card {
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.18);
    overflow: hidden;
    /* Pour que le border-radius s'applique à l'image */
    display: flex;
    flex-direction: column;
    min-width: calc(33.333% - (40px / 3));
    /* 3 cartes sur desktop, ajuste pour le gap */
    flex-shrink: 0;
    /* Empêche les cartes de rétrécir */
}

.card-image-container {
    width: 100%;
    height: 262px;
    /* Hauteur fixe de l'image comme dans l'original */
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 24px 16px;
    text-align: right;
    /* Texte aligné à droite pour RTL */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Permet au contenu de prendre l'espace restant */
    justify-content: space-between;
    /* Pousse le bouton vers le bas */
}

.card-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26.2px;
    color: #152e39;
    margin: 0 0 10px 0;
}

.card-title .card-subtitle-inline {
    font-weight: 400;
}

.card-description {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 19.65px;
    color: #152e39;
    margin: 0 0 15px 0;
}

.card-button {
    display: inline-block;
    background-color: #3fa7d6;
    color: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    padding: 10px 20px;
    border-radius: 43px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 4px 0 rgba(74, 121, 143, 0.25);
    align-self: flex-start;
    /* Aligne le bouton à droite en RTL */
    margin-top: auto;
    /* Pousse le bouton vers le bas s'il y a de l'espace */
    min-width: 122px;
    /* Basé sur la largeur du bouton "سجل الآن" */
}

.card-button:hover {
    background-color: #2c8ab8;
}

/* Boutons de navigation */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-button:hover {
    background-color: #fff;
}

.nav-button svg {
    width: 20px;
    height: 20px;
    color: #333;
}

.prev-button {
    right: -20px;
    /* Ajustez pour RTL */
}

.next-button {
    left: -20px;
    /* Ajustez pour RTL */
}

/* Styles responsives */
@media (max-width: 1200px) {

    /* Tablette - 2 cartes */
    .card {
        min-width: calc(50% - (20px / 2));
    }

    .section-title {
        font-size: 40px;
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {

    /* Mobile - 1 carte */
    .card {
        min-width: 100%;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 40px;
        white-space: normal;
    }

    .nav-button {
        width: 35px;
        height: 35px;
    }

    .prev-button {
        right: 5px;
    }

    .next-button {
        left: 5px;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-description {
        font-size: 14px;
    }

    .card-button {
        font-size: 16px;
        padding: 8px 15px;
    }
}


/****** Our services *******/

.services-block {
    background-image: url(https://static.codia.ai/image/2025-03-23/883b0191-c6b5-4b5e-a74c-07fa377fc82b.png);
    background-size: 100% 100%;
    /* Comme dans l'original, peut étirer l'image */
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 20px;
    text-align: center;
    position: relative;
    /* Pour s'assurer que le contenu est au-dessus du fond si nécessaire */
}

.services-content-wrapper {
    max-width: 1050px;
    /* Basé sur la largeur du texte descriptif */
    margin: 0 auto;
    position: relative;
    /* Pour s'assurer que le contenu est au-dessus du fond */
    z-index: 1;
    /* Pour être au-dessus du pseudo-élément de fond si on en utilisait un */
}

.services-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    /* 62.88px / 48px */
    color: #152e39;
    margin-top: 0;
    /* Le padding du .services-block gère l'espace */
    margin-bottom: 28px;
}

.services-description {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.31;
    /* 41.92px / 32px */
    color: #152e39;
    margin-bottom: 29px;
    white-space: normal;
    /* Permettre le retour à la ligne */
}

.services-button {
    display: inline-block;
    background-color: #3fa7d6;
    color: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    padding: 16px 35px;
    /* Ajusté pour correspondre à la hauteur de 60px et largeur de 170px approx. */
    border-radius: 43px;
    text-decoration: none;
    box-shadow: 0 4px 4px 0 rgba(74, 121, 143, 0.25);
    transition: background-color 0.3s ease;
}

.services-button:hover {
    background-color: #2c8ab8;
}

/* Styles responsives */
@media (max-width: 1200px) {
    .services-title {
        font-size: 40px;
    }

    .services-description {
        font-size: 28px;
    }
}

@media (max-width: 992px) {
    .services-block {
        padding: 30px 15px;
        background-size: cover;
        /* Plus flexible pour les arrières-plans sur mobile */
    }

    .services-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .services-description {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .services-button {
        font-size: 17px;
        padding: 14px 30px;
    }
}

@media (max-width: 767px) {
    .services-title {
        font-size: 28px;
    }

    .services-description {
        font-size: 18px;
        line-height: 1.5;
    }

    .services-button {
        font-size: 16px;
        padding: 12px 25px;
    }
}

@media (max-width: 480px) {
    .services-title {
        font-size: 24px;
    }

    .services-description {
        font-size: 16px;
    }

    .services-button {
        width: 100%;
        /* Bouton pleine largeur sur très petits écrans */
        max-width: 280px;
        /* Limite la largeur maximale du bouton */
        padding: 12px 20px;
    }
}

/**** Education ****/
.importance-education {
    max-width: 1419px;
    /* Largeur du conteneur original */
    margin: 0 auto;
    padding: 40px 20px;
    overflow: hidden;
    /* Pour gérer les flottants ou les marges */
}

.importance-education-grid {
    display: flex;
    align-items: center;
    /* Centre verticalement les éléments de la grille */
    gap: 30px;
    /* Espace entre le texte et l'image */
}

.text-content {
    flex: 1;
    /* Prend l'espace disponible */
    max-width: 566px;
    /* Largeur du texte original */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Aligne le contenu à droite en RTL */
}

.section-heading {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 54.76px;
    font-weight: 500;
    line-height: 1.24;
    /* 68px / 54.76px */
    color: #152e39;
    margin-top: 0;
    margin-bottom: 30px;
    /* Espace entre titre et paragraphe */
    text-align: right;
}

.section-paragraph {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.31;
    /* 26.2px / 20px */
    color: #152e39;
    text-align: justify;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #3fa7d6;
    color: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    padding: 16px 40px;
    /* Ajusté pour correspondre à la hauteur de 60px et largeur de 170px approx. */
    border-radius: 43px;
    text-decoration: none;
    box-shadow: 0 4px 4px 0 rgba(74, 121, 143, 0.25);
    transition: background-color 0.3s ease;
    align-self: flex-start;
    /* Aligne le bouton à droite en RTL */
}

.cta-button:hover {
    background-color: #2c8ab8;
}

.image-content {
    flex: 1;
    /* Prend l'espace disponible */
    max-width: 781px;
    /* Largeur de l'image originale */
    display: flex;
    justify-content: center;
    /* Centre l'image si elle est plus petite que le conteneur */
}

.image-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    /* Optionnel: pour adoucir les bords de l'image */
}

/* Styles responsives */
@media (max-width: 1200px) {
    .importance-education-grid {
        flex-direction: column-reverse;
        /* Image en haut, texte en bas */
        text-align: center;
        /* Centre le texte quand il est en colonne */
    }

    .text-content {
        max-width: 100%;
        align-items: center;
        /* Centre le contenu texte */
    }

    .section-heading,
    .section-paragraph {
        text-align: center;
    }

    .cta-button {
        align-self: center;
        /* Centre le bouton */
    }

    .image-content {
        margin-bottom: 30px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .importance-education {
        padding: 30px 15px;
    }

    .section-heading {
        font-size: 40px;
        line-height: 1.3;
    }

    .section-paragraph {
        font-size: 18px;
        line-height: 1.5;
    }

    .cta-button {
        font-size: 17px;
        padding: 14px 35px;
    }
}

@media (max-width: 480px) {
    .section-heading {
        font-size: 32px;
    }

    .section-paragraph {
        font-size: 16px;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
    }
}


/**** Simple steps **********/

.steps-section {
    background-image: url(https://static.codia.ai/image/2025-03-23/0af09558-7800-4fe3-aa7e-980f5728de10.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 20px;
    text-align: center;
}

.section-main-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.31;
    color: #000000;
    margin-top: 0;
    margin-bottom: 70px;
}

.carousel-wrapper {
    position: relative;
    /* 3 cartes de 255.396px + 2 gaps de 20px = 766.188 + 40 = 806.188px */
    max-width: 1610px;
    margin: 0 auto;
    overflow: hidden;
}

.steps-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
    /* Espace entre les cartes */
}

.step-card {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 19.896px;
    box-shadow: 0 4.775px 10.664px 0 rgba(68, 80, 104, 0.26);
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 255.396px;
    /* Taille originale */
    height: 312.611px;
    /* Taille originale */
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 10px;
}

.step-icon-container {
    margin-bottom: 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon {
    max-width: 90px;
    max-height: 70px;
    object-fit: contain;
}

.step-title {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 19.1px;
    font-weight: 700;
    line-height: 1.3;
    color: #3fa7d6;
    margin-top: 0;
    margin-bottom: 10px;
}

.step-description {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 12.73px;
    font-weight: 400;
    line-height: 1.31;
    color: #152e39;
    margin-bottom: 15px;
    flex-grow: 1;
}

.step-button {
    display: inline-block;
    background-color: #3fa7d6;
    color: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14.32px;
    font-weight: 500;
    line-height: 1.5;
    padding: 8px 15px;
    border-radius: 34.221px;
    text-decoration: none;
    box-shadow: 0 3.183px 3.183px 0 rgba(74, 121, 143, 0.25);
    margin-top: auto;
    transition: background-color 0.3s ease;
}

.step-button:hover {
    background-color: #2c8ab8;
}

/* Boutons de navigation */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    display: none;
}

.nav-button:hover {
    background-color: #fff;
}

.nav-button svg {
    width: 22px;
    height: 22px;
    color: #333;
}

/* Boutons inversés pour RTL: prev (flèche vers la droite) à gauche, next (flèche vers la gauche) à droite */
.prev-button {
    /* Flèche vers la droite (diminue l'index) */
    left: -22px;
    right: auto;
}

.next-button {
    /* Flèche vers la gauche (augmente l'index) */
    right: -22px;
    left: auto;
}

/* Styles responsives */
@media (max-width: 1200px) {

    /* Tablette - 2 cartes */
    .carousel-wrapper {
        /* 2 cartes de 255.396px + 1 gap de 20px = 510.792 + 20 = 530.792px */
        max-width: 531px;
    }

    /* La taille des cartes .step-card reste fixe à 255.396px x 312.611px */
    .section-main-title {
        font-size: 40px;
        margin-bottom: 50px;
    }

    .nav-button {
        display: flex;
    }
}

@media (max-width: 767px) {

    /* Mobile - 1 carte */
    .carousel-wrapper {
        /* 1 carte de 255.396px, on peut laisser un peu de marge */
        max-width: 280px;
        padding: 0 10px;
    }

    .step-card {
        width: 100%;
        /* Prend la largeur du wrapper */
        height: auto;
        /* Hauteur auto pour s'adapter au contenu */
        min-height: 312.611px;
        /* Conserve une hauteur minimale si possible */
        padding: 20px 15px;
    }

    .section-main-title {
        font-size: 32px;
        margin-bottom: 40px;
        white-space: normal;
    }

    .nav-button {
        display: flex;
        width: 40px;
        height: 40px;
    }

    .prev-button {
        left: 0px;
    }

    .next-button {
        right: 0px;
    }
}

@media (max-width: 480px) {
    .carousel-wrapper {
        max-width: calc(100% - 20px);
    }

    .section-main-title {
        font-size: 28px;
    }

    .step-title {
        font-size: 18px;
    }

    .step-description {
        font-size: 12px;
    }

    .step-button {
        font-size: 13px;
        padding: 7px 12px;
    }

    .nav-button {
        display: flex;
    }
}


/*** Who are we ? ******/


.sd-academy-about {
    max-width: 1046px;
    /* Largeur du conteneur original */
    margin: 60px auto;
    /* Marge en haut/bas et centrage horizontal */
    padding: 20px;
    overflow: hidden;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.main-heading {
    font-size: 54.76px;
    /* Taille de base pour le titre */
    font-weight: 500;
    color: #000000;
    line-height: 1.3;
    /* Ajustement */
    display: inline;
    /* Pour aligner les spans correctement */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Permet le retour à la ligne si nécessaire */
}

.main-heading .brand-question {
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 500;
    margin-left: 10px;
    /* Espace entre "ما هي" et "SD ACADEMY" */
}

.main-heading .brand-name {
    font-family: 'Poppins', sans-serif;
    /* Police spécifique pour SD ACADEMY */
    line-height: 1;
    /* Pour un meilleur alignement vertical des parties de la marque */
}

.main-heading .brand-sd {
    font-weight: 600;
    color: #fac264;
}

.main-heading .brand-academy {
    font-weight: 400;
    color: #3fa7d6;
}

.main-heading .question-mark {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 61.48px;
    /* Taille spécifique du point d'interrogation */
    font-weight: 500;
    color: #000000;
    margin-right: 10px;
    /* Espace entre "SD ACADEMY" et "؟" */
}

.content-container {
    display: flex;
    flex-direction: column;
    /* Par défaut, empilé pour mobile-first approach */
    align-items: center;
    /* Centre les éléments quand ils sont empilés */
    gap: 30px;
}

.image-decoration {
    width: 100%;
    max-width: 924px;
    /* Largeur max de l'image originale */
    margin-bottom: 30px;
    /* Espace si empilé */
}

.image-decoration iframe {
    height: 399px;
    width: 100%;
}

.image-decoration img {
    width: 100%;
    height: auto;
    border-radius: 29px;
    /* Bordure arrondie de l'image originale */
    display: block;
}

.text-description {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    /* 26.2px / 20px, ajusté pour lisibilité */
    color: #152e39;
    text-align: center;
    /* Centré par défaut, sera ajusté pour desktop */
    max-width: 100%;
    /* Prend toute la largeur disponible */
}

.text-description p {
    margin-top: 0;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #3fa7d6;
    color: #ffffff;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    padding: 16px 40px;
    /* Ajusté pour hauteur de 76px et largeur de 230px approx. */
    border-radius: 43px;
    text-decoration: none;
    box-shadow: 0 4px 4px 0 rgba(74, 121, 143, 0.25);
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #2c8ab8;
}

/* Styles responsives */

@media (min-width: 992px) {

    /* Desktop view */
    .content-container {
        flex-direction: row-reverse;
        /* Image à gauche, texte à droite en RTL */
        align-items: flex-start;
        /* Aligne en haut */
        text-align: right;
        /* Aligne le texte à droite pour desktop */
    }

    .image-decoration {
        flex: 1.5;
        /* Donne plus d'espace à l'image si souhaité */
        /* max-width: 50%; */
        /* Limite la largeur de l'image */
        margin-bottom: 0;
    }

    .text-description {
        flex: 1;
        text-align: right;
        padding-right: 30px;
        /* Espace entre texte et image */
    }

    .main-heading {
        justify-content: flex-start;
        /* Aligne le titre à droite */
    }

    .image-decoration iframe {
        height: 305px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .main-heading {
        font-size: 40px;
    }

    .main-heading .question-mark {
        font-size: 44px;
    }

    .text-description {
        font-size: 18px;
    }

    .cta-button {
        font-size: 17px;
        padding: 14px 35px;
    }

    .image-decoration iframe {
        height: 396px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .sd-academy-about {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .main-heading {
        font-size: 32px;
        flex-direction: column;
        /* Empile les parties du titre sur très petits écrans */
        gap: 5px;
    }

    .main-heading .brand-question,
    .main-heading .question-mark {
        margin: 0;
    }

    .text-description {
        font-size: 16px;
    }

    .cta-button {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 16px;
    }

    .image-decoration iframe {
        height: 183px;
        width: 100%;
    }
}


/****** Banner *****/
.main-hero-container {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/main_bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Hero Section */
.hero-section {
    display: flex;
    margin: 10px 20px;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    background: url(../images/figma/c0c95583-556f-4741-ab8a-d6c1d165ea1f.png) no-repeat center;
    background-size: 100% 100%;
    /* background-color: rgba(255, 255, 255, 0.8); */
    background-position: center;
    border-radius: 15px;
    padding: 40px;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
    /* max-width: 1400px; */
    /* width: 100%; */
    box-sizing: border-box;
}

.hero-content {
    flex: 1;
    padding-right: 40px;
    /* Space between text and illustration */
    text-align: right;
    /* max-width: 50%; */
    /* Ensure text content doesn't get too wide */
    box-sizing: border-box;
}

/* Logo */
.logo {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    /* Responsive font size */
    font-weight: 700;
    margin-bottom: 30px;
}

.logo-sd {
    color: #fac264;
    font-weight: 600;
}

.logo-academy {
    color: #3fa7d6;
    font-weight: 400;
}

/* Main Heading */
.main-heading {
    font-family: Vazirmatn, var(--default-font-family);
    font-size: 51.76057052612305px;
    font-weight: 700;
    line-height: 71.736px;
    color: #152e39;
    margin-bottom: 20px;
}

/* Description */
.description {
    font-family: Vazirmatn, var(--default-font-family);
    font-size: 24px;
    font-weight: 400;
    line-height: 31.44px;
    color: #152e39;
    margin-bottom: 30px;
    max-width: 100%;
}

/* CTA Button */
.cta-button {
    font-family: 'Vazirmatn', sans-serif;
    font-size: clamp(14px, 1.8vw, 18px);
    /* Responsive font size */
    font-weight: 500;
    color: #ffffff;
    background-color: #3fa7d6;
    padding: clamp(8px, 1.5vw, 12px) clamp(20px, 3vw, 30px);
    /* Responsive padding */
    border: none;
    border-radius: 43px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 4px 0 rgba(74, 121, 143, 0.25);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #2a8bb8;
    transform: translateY(-2px);
}

/* Hero Illustration */
.hero-illustration {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    box-sizing: border-box;
    min-height: 600px;
}

/* Divs for background images */
.illustration-bg-div,
.illustration-main-div,
.illustration-detail1-div,
.icon-detail1-div,
.icon-detail2-div,
.illustration-shadow-div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    /* Or specific percentages/cover */
    background-position: center center;
    background-repeat: no-repeat;
}

.illustration-bg-div {
    background-image: url('../images/left_panel_bg.png');
    width: 90%;
    z-index: 1;
    /* This was the main illustration background, so it should probably cover the .hero-illustration area */
    /* If it's a specific shape, width/height might need to be relative to its own aspect ratio */
}

.illustration-main-div {
    background-image: url('../images/illustration_main.png');
    width: 65%;
    /* Relative to .hero-illustration */
    height: auto;
    /* Maintain aspect ratio, but needs a way to set height or use padding-bottom trick */
    padding-bottom: 65%;
    /* Example: if square, height is 65% of width. Adjust based on image aspect ratio */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.illustration-detail1-div {
    background-image: url('../images/illustration_detail1.png');
    width: 15%;
    height: auto;
    padding-bottom: 15%;
    /* Adjust based on image aspect ratio */
    top: 20%;
    right: 10%;
    z-index: 3;
}

.icon-detail1-div {
    background-image: url('../images/icon_detail1.png');
    width: 10%;
    height: auto;
    padding-bottom: 10%;
    /* Adjust based on image aspect ratio */
    top: 45%;
    left: 10%;
    z-index: 4;
}

.icon-detail2-div {
    background-image: url('../images/icon_detail2.png');
    width: 8%;
    height: auto;
    padding-bottom: 8%;
    /* Adjust based on image aspect ratio */
    bottom: 20%;
    right: 15%;
    z-index: 5;
}

.illustration-shadow-div {
    background-image: url('../images/left_panel_shadow.png');
    width: 70%;
    height: 20%;
    /* Shadow might have a different aspect ratio */
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    filter: blur(5px);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-section {
        padding: 30px;
    }

    .hero-content {
        padding-right: 20px;
    }
}

@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .hero-content {
        padding-right: 0;
        padding-bottom: 30px;
        text-align: center;
        order: 2;
        max-width: 100%;
    }

    .hero-illustration {
        background-image: url('../images/left_panel_bg.png');
        max-width: 70%;
        margin-bottom: 30px;
        order: 1;
        min-height: 300px;
        /* Adjust height for stacked layout */
    }

    /* Main Heading */
    .main-heading {
        font-size: clamp(24px, 3.5vw, 42px);
        /* Responsive font size */
        font-weight: 700;
        line-height: 1.4;
    }


    .description {
        font-size: clamp(14px, 2vw, 18px);
        /* Responsive font size */
        font-weight: 400;
        line-height: 1.8;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .main-container {
        padding: 15px;
    }

    .hero-section {
        padding: 15px;
    }

    .hero-illustration {
        background-image: url('../images/left_panel_bg.png');
        max-width: 85%;
        min-height: 250px;
        /* Adjust height */
    }

    .illustration-main-div {
        width: 70%;
        padding-bottom: 70%;
    }
}

@media (max-width: 576px) {
    .main-container {
        padding: 10px;
    }

    .hero-section {
        padding: 10px;
    }

    .hero-content {
        padding-bottom: 20px;
    }

    .hero-illustration {
        background-image: url('../images/left_panel_bg.png');
        max-width: 95%;
        width: 75%;
        min-height: 200px;
        /* Adjust height */
        margin-bottom: 20px;
    }

    .illustration-main-div {
        width: 75%;
        padding-bottom: 75%;
    }

    .illustration-detail1-div,
    .icon-detail1-div,
    .icon-detail2-div {
        width: clamp(10px, 12vw, 35px);
        padding-bottom: clamp(10px, 5vw, 21px);
    }

    .illustration-detail1-div {
        top: 15%;
        right: 5%;
    }

    .icon-detail1-div {
        top: 50%;
        left: 5%;
    }

    .icon-detail2-div {
        bottom: 15%;
        right: 10%;
    }
}


/****** Bonde passante ****/
.header-banner {
    width: 100%;
    height: 45px;
    background-color: #3fa7d6;
    position: relative;
    overflow: hidden;
    margin: 28px 0 0 0;
    z-index: 15;
}

.banner-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: scroll 20s linear infinite;
    /* Right-to-left scrolling */
    position: absolute;
    top: 7px;
}

.icon {
    width: 29px;
    height: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin: 0 1rem;
    animation: rotate 4s linear infinite;
    /* Individual icon rotation */
}

.icon-1 {
    background-image: url('https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-05-12/rtbx5RQuLs.png');
}

.icon-2 {
    background-image: url('https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-05-12/z8mC7DgUqb.png');
}

.icon-3 {
    background-image: url('https://codia-f2c.s3.us-west-1.amazonaws.com/image/2025-05-12/JZPcVC6Cez.png');
}

.banner-text {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #ffffff;
    flex-shrink: 0;
    margin: 0 1rem;
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .banner-text {
        font-size: 16px;
        margin: 0 0.5rem;
    }

    .icon {
        width: 24px;
        height: 25px;
        margin: 0 0.5rem;
    }

    .banner-content {
        animation-duration: 15s;
        /* Faster scroll on smaller screens */
    }
}

@media (max-width: 480px) {
    .banner-text {
        font-size: 14px;
    }

    .icon {
        width: 20px;
        height: 20px;
    }

    .header-banner {
        height: 40px;
    }
}