button,
a {
    color: white;
    /* Couleur du texte par défaut */
    text-decoration: none;
    /* Supprime le soulignement des liens */
}

button:hover,
a:hover {
    color: white;
    /* Couleur du texte au survol */
}

.aumsoft-btn {
    border: none;
    /* Bordure contrastante */
    padding: 5px 20px;
    /* Padding pour la forme du bouton */
    background: #ffffff;
    /* Couleur de fond */
    color: #a31a04;
    /* Couleur du texte en blanc */
    font-size: 16px;
    /* Taille de police légèrement plus grande */
    cursor: pointer;
    /* Curseur pointeur au survol */
    position: relative;
    /* Pour le positionnement des pseudo-éléments */
    overflow: hidden;
    /* Assure que le pseudo-élément reste dans le bouton */
    z-index: 1;
    /* Assure qu'il est au-dessus du pseudo-élément */
    transition: color 0.3s ease;
    /* Transition douce pour le changement de couleur */
}

.aumsoft-btn:hover {
    color: white;
    border: white solid 1px;
    /* Couleur du texte au survol */
    text-decoration: none;
    /* Supprime le soulignement au survol */
}

.aumsoft-btn::before {
    content: "";
    /* Contenu vide pour le pseudo-élément */
    position: absolute;
    /* Positionnement absolu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, hsl(220, 100%, 19%) 0%, #a31a04 100%);
    /* Dégradé de fond */
    transition: all 0.8s ease;
    /* Transition pour l'animation */
    z-index: -1;
    /* Assure qu'il est derrière le bouton */
    transform: scaleX(0);
    /* Échelle initiale */
    transform-origin: left;
    /* Origine de transformation */
}

.aumsoft-btn:hover::before {
    transform: scaleX(1);
    /* Échelle à 1 au survol */
}

.aumsoft-btn-subscription {
    border-radius: 0% 3px 3px 0%;
    border: none;
    /* Bordure contrastante */
    padding: 7px 50px 7px 25px;
    /* Padding pour la forme du bouton */
    background: #ffffff;
    /* Couleur de fond */
    color: #a31a04;
    /* Couleur du texte en blanc */
    font-size: 16px;
    /* Taille de police légèrement plus grande */
    cursor: pointer;
    /* Curseur pointeur au survol */
    position: relative;
    /* Pour le positionnement des pseudo-éléments */
    overflow: hidden;
    /* Assure que le pseudo-élément reste dans le bouton */
    z-index: 1;
    /* Assure qu'il est au-dessus du pseudo-élément */
    transition: color 0.3s ease;
    /* Transition douce pour le changement de couleur */  
}

.aumsoft-btn-subscription:hover {
    color: white;
    /* Couleur du texte au survol */
    text-decoration: none;
    /* Supprime le soulignement au survol */
}

.aumsoft-btn-subscription::before {
    content: "";
    /* Contenu vide pour le pseudo-élément */
    position: absolute;
    /* Positionnement absolu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, hsl(220, 100%, 19%) 0%, #a31a04 100%);
    /* Dégradé de fond */
    transition: all 0.8s ease;
    /* Transition pour l'animation */
    z-index: -1;
    /* Assure qu'il est derrière le bouton */
    transform: scaleX(0);
    /* Échelle initiale */
    transform-origin: left;
    /* Origine de transformation */
}

.aumsoft-btn-subscription:hover::before {
    transform: scaleX(1);
    /* Échelle à 1 au survol */
}

* General variables */ $bdrds: 3px $white: #fff $black: #000 $gray: #ccc $salmon: #e8716d $smoky-black: rgba(#222222, .85) $ff: 'Montserrat',
sans-serif $ff-body: 12px $ff-light: 300 $ff-regular: 400 $ff-medium: 500
/**
* General configs
*/

* box-sizing: border-box body font-family: $ff font-size: $ff-body line-height: 1em button background-color: transparent padding: 0 border: 0 outline: 0 cursor: pointer input background-color: transparent padding: 0 border: 0 outline: 0 &[type="submit"] cursor: pointer &::placeholder font-size: .85rem font-family: $ff font-weight: $ff-light letter-spacing: .1rem color: $gray
/**
* Bounce to the left side
*/

@keyframes bounceLeft 0% transform: translate3d(100%, -50%, 0) 50% transform: translate3d(-30px, -50%, 0) 100% transform: translate3d(0, -50%, 0)
/**
* Bounce to the left side
*/

@keyframes bounceRight 0% transform: translate3d(0, -50%, 0) 50% transform: translate3d(calc(100% + 30px), -50%, 0) 100% transform: translate3d(100%, -50%, 0)
/**
* Show Sign Up form
*/

@keyframes showSignUp 100% opacity: 1 visibility: visible transform: translate3d(0, 0, 0)
/**
* Page background
*/

.user display: flex justify-content: center align-items: center width: 100% height: 100vh background: #ccc background-size: cover &_options-container position: relative width: 80% &_options-text display: flex justify-content: space-between width: 100% background-color: $smoky-black border-radius: $bdrds
/**
* Registered and Unregistered user box and text
*/

.user_options-registered,
.user_options-unregistered width: 50% padding: 75px 45px color: $white font-weight: $ff-light .user_registered-title,
.user_unregistered-title margin-bottom: 15px font-size: 1.66rem line-height: 1em .user_unregistered-text,
.user_registered-text font-size: .83rem line-height: 1.4em .user_registered-login,
.user_unregistered-signup margin-top: 30px border: 1px solid $gray border-radius: $bdrds padding: 10px 30px color: $white text-transform: uppercase line-height: 1em letter-spacing: .2rem transition: background-color .2s ease-in-out,
color .2s ease-in-out &:hover color: $smoky-black background-color: $gray
/**
* Login and signup forms
*/

.user_options-forms position: relative top: 50% left: 30px width: calc(50% - 30px) min-height: 420px background-color: $white border-radius: $bdrds box-shadow: 2px 0 15px rgba($black, .25) overflow: hidden transform: translate3d(100%, -50%, 0) transition: transform .4s ease-in-out .user_forms-login transition: opacity .4s ease-in-out,
visibility .4s ease-in-out .forms &_title margin-bottom: 45px font-size: 1.5rem font-weight: $ff-medium line-height: 1em text-transform: uppercase color: $salmon letter-spacing: .1rem &_field &:not(:last-of-type) margin-bottom: 20px &_field-input width: 100% border-bottom: 1px solid $gray padding: 6px 20px 6px 6px font-family: $ff font-size: 1rem font-weight: $ff-light color: darken($gray, 30%) letter-spacing: .1rem transition: border-color .2s ease-in-out &:focus border-color: darken($gray, 30%) &_buttons display: flex justify-content: space-between align-items: center margin-top: 35px &-forgot font-family: $ff letter-spacing: .1rem color: $gray text-decoration: underline transition: color .2s ease-in-out &:hover color: darken($gray, 10%) &-action background-color: $salmon border-radius: $bdrds padding: 10px 35px font-size: 1rem font-family: $ff font-weight: $ff-light color: $white text-transform: uppercase letter-spacing: .1rem transition: background-color .2s ease-in-out &:hover background-color: darken($salmon, 10%) .user_forms-signup,
.user_forms-login position: relative top: 70px left: 40px width: calc(100% - 80px) opacity: 0 visibility: hidden transition: opacity .4s ease-in-out,
visibility .4s ease-in-out,
transform .5s ease-in-out .user_forms-signup transform: translate3d(120px, 0, 0) .forms_buttons justify-content: flex-end .user_forms-login transform: translate3d(0, 0, 0) opacity: 1 visibility: visible
/**
* Triggers
*/

.user_options-forms &.bounceLeft animation: bounceLeft 1s forwards .user_forms-signup animation: showSignUp 1s forwards .user_forms-login opacity: 0 visibility: hidden transform: translate3d(-120px, 0, 0) &.bounceRight animation: bounceRight 1s forwards
/**
* Responsive 990px
*/

@media screen and (max-width: 990px) .user_options-forms min-height: 350px .forms_buttons flex-direction: column .user_forms-login .forms_buttons-action margin-top: 30px .user_forms-signup,
.user_forms-login top: 40px .user_options-registered,
.user_options-unregistered padding: 50px 45px body {
    font-family: "Artifika", serif;
    /* font-weight: 400; */
    font-style: normal;
}

.bleu-rouge-fonce {
    background: linear-gradient(to right, hsl(220, 100%, 19%) 0%, #a31a04 100%);
    color: white;
    text-align: center;
}

.rouge-fonce-bleu {
    background: linear-gradient(to right, #100000 0%, #002161 100%);
    color: white;
    margin-top: -30px;
    margin-bottom: -50px;
}

.special-font {
    font-family: 'Artifika';
    font-weight: bold;
}

.btn-dt-debut {
    background-color: #900b09;
}

.btn-dt-fin {
    background-color: #002161;
}

.btn-cost {
    background-color: #006103;
}

.btn-text {
    background: -webkit-linear-gradient(#002161, #A31A04);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: color 0.3s ease;
    /* Ajoute une transition douce pour le changement de couleur */
}

.btn-text:hover {
    -webkit-background-clip: unset;
    /* Désactive le clip de fond */
    -webkit-text-fill-color: white;
    /* Change la couleur du texte en blanc */
    background: none;
    /* Supprime le fond dégradé */
}

.vr {
    margin-top: 10px;
}

p {
    font-size: 18px;
    text-align: justify;
}

.card-title {
    font-weight: bolder;
    font-size: 28px;
}

.gradient-text {
    /* Taille de la police */
    background-image: linear-gradient(20deg, #002161, #fd3e21);
    /* Dégradé */
    background-size: 100%;
    /* Taille de l'arrière-plan */
    -webkit-background-clip: text;
    /* Clip du fond sur le texte */
    -moz-background-clip: text;
    /* Pour Firefox */
    color: transparent;
    /* Rendre le texte transparent pour voir le dégradé */
}

.gradient-text2 {
    /* Taille de la police */
    background-image: linear-gradient(to right, #002161, #A31A04);
    /* Dégradé */
    background-size: 100%;
    /* Taille de l'arrière-plan */
    -webkit-background-clip: text;
    /* Clip du fond sur le texte */
    -moz-background-clip: text;
    /* Pour Firefox */
    color: transparent;
    /* Rendre le texte transparent pour voir le dégradé */
}

.img-fluid {
    width: 100%;
    height: auto;
    padding: -5px;
}

.bg-grey {
    background-color: #F4F4F4;
}

*/ .team-text {
    /* Taille de la police */
    background-image: linear-gradient(20deg, #002161, #711101);
    /* Dégradé */
    background-size: 100%;
    /* Taille de l'arrière-plan */
    -webkit-background-clip: text;
    /* Clip du fond sur le texte */
    -moz-background-clip: text;
    /* Pour Firefox */
    color: transparent;
    /* Rendre le texte transparent pour voir le dégradé */
    font-size: smaller;
}

.team-image {
    position: relative;
    bottom: 0px;
}

#footer {
    font-size: 1px;
}

#footer-line {
    position: relative;
}


/* #logo-footer {
width: 100%;
position: relative;
} */

#footer-info {
    font-size: 1px;
}

.parag p {
    font-size: 18px;
}


/* .navbar-collapse {
height: 19px;
color: #002161;
} */

p {
    font-size: 19px;
}

.fa,
.fas,
.fab {
    color: #ffffff;
    background-color: transparent;
    /* Utilise la couleur bleue de votre thème */
    font-size: 20px;
    /* Ajustez la taille selon vos besoins */
}


/* .card-body .blog-card-body{
opacity: 0;
} */

.btn-grey {
    background-color: #D9D9D9
}

#blog {
    background-image: url("../images/blue technology dynamic lines.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.blog-card {
    background: transparent;
}

.blog-card-body {
    background: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
    .sub-menu {
        background-color: rgba(255, 255, 255, 0.8);
    }
}

@media (min-width: 992px) {
    .image-adaptative {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 991.98px) {
    .image-adaptative {
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #f8f9fa;
        padding: 1rem;
        z-index: 1000;
    }
}

.blur {
    filter: blur(4px);
}


/* Media Queries pour les petits écrans */

@media (max-width: 768px) {
    /* Pour les écrans jusqu'à 768px */
    h1 {
        font-size: 1.5em;
        /* Réduction de la taille pour h1 */
    }
    h2 {
        font-size: 1.2em;
        /* Réduction de la taille pour h2 */
    }
    h3 {
        font-size: 0.75em;
        /* Réduction de la taille pour h3 */
    }
    .btn-change6 {
        height: 50px;
        width: 100px;
        background: lightseagreen;
        margin: 20px;
        float: left;
        border: 0px;
        color: #fff;
        box-shadow: 0 0 1px #ccc;
        -webkit-transition-duration: 0.2s;
        -webkit-transition-timing-function: linear;
        box-shadow: 0px 0 0 #31708f inset;
    }
    .btn-change6:hover {
        box-shadow: 0 0 0 25px #31708f inset;
        -webkit-transform: scale(1);
    }
    .btn-grey {
        background-color: #D9D9D9
    }
    #blog {
        background-image: url("../images/blue technology dynamic lines.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .blog-card {
        background: transparent;
    }
    .blog-card-body {
        background: rgba(255, 255, 255, 0.6);
    }
    @media (min-width: 768px) {
        .sub-menu {
            background-color: rgba(255, 255, 255, 0.8);
        }
    }
    @media (min-width: 992px) {
        .image-adaptative {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    @media (max-width: 991.98px) {
        .image-adaptative {
            bottom: 0;
            right: 0;
        }
    }
    @media (max-width: 991.98px) {
        .navbar-collapse {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #f8f9fa;
            padding: 1rem;
            z-index: 1000;
        }
    }
    .blur {
        filter: blur(4px);
    }
    /* Media Queries pour les petits écrans */
    @media (max-width: 768px) {
        /* Pour les écrans jusqu'à 768px */
        h1 {
            font-size: 1.5em;
            /* Réduction de la taille pour h1 */
        }
        h2 {
            font-size: 1.2em;
            /* Réduction de la taille pour h2 */
        }
        h3 {
            font-size: 0.75em;
            /* Réduction de la taille pour h3 */
        }
        /* Ajoutez d'autres titres si nécessaire */
        .nav-link.active {
            background-color: #0d6efd;
            /* Couleur Bootstrap pour bg-primary */
            color: white;
            /* Couleur du texte */
        }