@keyframes jump {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px); /* Move up 30px */
    }
    100% {
        transform: translateY(0); /* Return to original position */
    }
}
body {
            zoom: 70%;
        }
        .transition-text {
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: bold;
            font-size: 2.5rem;
            margin: 20px 0;
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .arrow-icon {
            color: #f7931e;
            font-size: 2rem;
            margin: 0 15px;
            animation: bounce 1s ease-in-out infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(10px); }
        }
        
        .brand-evolution {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin: 30px 0;
            padding: 20px;
            background: linear-gradient(to right, rgba(255,107,53,0.1), rgba(247,147,30,0.1));
            border-radius: 15px;
        }
        
        .old-brand, .new-brand, .beg{
            font-size: 1.8rem;
            font-weight: bold;
        }
        
        .old-brand {
            color: #555;
            text-decoration: line-through;
        }
        
        .new-brand {
            color: #f7931e;
        }

        .beg {
           color: green;
         }

.btn-orange {
    background-color: #f7931e; /* Couleur orange */
    border-color: #f7931e; /* Bordure orange */
    color: white; /* Texte blanc */
}

.btn-orange:hover {
    background-color: #e68a1e; /* Couleur orange plus foncée au survol */
    border-color: #e68a1e;
    color: white;
}

.jump-animation {
    animation: jump 5s ease-in-out infinite; /* Duration of 5 seconds and repeat infinitely */
    margin-top: 20px; /* Ajoute une marge de 10 pixels au-dessus du texte */
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Full height */
    overflow-y: auto; /* Allow vertical scrolling if needed */
}

.container {
    display: flex;
    height: 90%; /* Full height */
}

.location {
    flex: 1; /* Take up space on the left */
    background-color: #f0f0f0; /* Light background for visibility */
    padding: 20px; /* Some padding */
}

.text {
    flex: 2; /* Take up more space on the right */
    padding: 20px; /* Some padding */
}

.center-title {
    font-size: 28px; /* Taille de police de 26 pixels */
    font-weight: bold; /* Met le texte en gras */
}

#countdown {
    font-weight: bold; /* Met le texte en gras */
    font-size: 24px; /* Taille de police de 24 pixels */
    color: red; /* Couleur du texte en rouge */
    margin-top: 10px; /* Marge au-dessus de l'élément */
}

/* Nouvelle classe pour le texte de bienvenue */
.lead-text {
    color: blue; /* Couleur du texte en bleu */
    margin-bottom: 10px; /* Marge de 10 pixels en bas */
    font-weight: bold; /* Met le texte en gras */
}

/* Nouvelle classe pour le texte en gras */
.bold-text {
    font-weight: bold; /* Met le texte en gras */
}

/* Classe pour le texte en noir */
.text-black {
    color: black; /* Couleur du texte en noir */
}

/* Classe pour la police Pinyon Script */
.pinyon-script {
    font-family: 'Pinyon Script', cursive; /* Appliquer la police Pinyon Script */
    font-size: 26px; /* Taille de police de 24 pixels */
}

/* Styles pour le footer */
.footer {
    text-align: center; /* Centre le texte dans le footer */
    padding: 20px; /* Ajoute un peu de padding */
    background-color: #fff; /* Couleur de fond pour le footer */
    position: relative; /* Position relative pour le footer */
    bottom: 0; /* Positionne le footer en bas */
    width: 100%; /* Prend toute la largeur */
}

/* Styles pour la sidebar */
.sidebar {
    background-color: #f8f9fa; /* Couleur de fond légère */
    border-right: 1px solid #dee2e6; /* Bordure droite */
    min-height: 100vh; /* Hauteur minimale pleine écran */
    padding: 20px; /* Padding interne */
}

/* Styles pour la réactivité */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Empile les colonnes sur les petits écrans */
    }
    .location, .text {
        width: 100%; /* Prend toute la largeur */
        padding: 10px; /* Réduit le padding */
    }
    .sidebar {
        min-height: auto; /* Ajuste la hauteur sur mobile */
        border-right: none; /* Supprime la bordure sur mobile */
        border-bottom: 1px solid #dee2e6; /* Bordure inférieure sur mobile */
    }
}