/*
Theme Name: Axen Child
Template: axen
Author: AthenaStudio
Author URI: https://themeforest.net/user/athenastudio
Description: Axen is a creative, elegant and responsive resume WordPress theme built with Bootstrap framework.
Version: 2.6
License: GNU General Public License version 3.0
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* === Justification du texte dans les services === */
.service-content {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.6;
}

/* ==== Alignement des colonnes sur desktop ==== */
.align-top-row {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
}

.align-top-row > .wpb_column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ==== Image large générique ==== */
.img-large img {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    display: block;
}

/* ==== Responsive : image au-dessus du texte ==== */
@media (max-width: 768px) {
  .stack-on-mobile {
    display: flex !important;
    flex-direction: column;
  }

  .stack-on-mobile > .wpb_column {
    width: 100% !important;
  }
}

/* ==== Image qui remplit la hauteur de la colonne ==== */
.img-fill img {
    height: 100% !important;
    width: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* ==== Image personnalisée avec dimensions fixes ==== */
.img-custom-size img {
    width: 469px !important;
    height: auto !important;
    object-fit: contain;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* ==== Responsive : redimensionnement automatique de l'image personnalisée ==== */
@media (max-width: 768px) {
  .img-custom-size img {
    width: 100% !important;
    height: auto !important;
  }
}

/* === Masquer le bouton de scroll automatique === */
.scroll-downs.scroll-btn {
    display: none !important;
}

/* === Overlay clair sur l’image de fond === */
#welcome {
    position: relative;
    z-index: 1;
}

#welcome::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;  /* Empêche l’overlay de masquer l’image */
    z-index: 0 !important;  /* Priorité à l’image */
    will-change: opacity, transform;  /* Optimisation pour les animations CSS */
    pointer-events: none;
}

/* === Assure que le contenu texte passe au-dessus de l’overlay === */
#welcome .wpb-content-wrapper {
    position: relative;
    z-index: 10;
}

.custom-service-text .service-description {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 1px 25px rgba(0, 0, 0, 0.8);
    font-weight: 600;
    letter-spacing: 1px;
}

/* Correction supplémentaire pour le comportement de l'image au second rafraîchissement */
#header-image-container img {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 1s ease-out;
}

/* Appliquer un text-shadow sur l'élément typing */
.typing-effect {
    font-weight: 600;
    letter-spacing: 1px;
    z-index: 10 !important; /* Assurer que l'effet de typing passe au-dessus */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important, 0 1px 25px rgba(0, 0, 0, 0.8) !important;
    font-size: 18px !important;  /* Ajuster la taille de la police du texte typing */
}

/* Appliquer le text-shadow pendant l'animation "typing" */
@keyframes typing {
    from {
        width: 0;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 1px 25px rgba(0, 0, 0, 0.8); /* Appliquer l'ombre dès le début de l'animation */
    }
    to {
        width: 100%;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 1px 25px rgba(0, 0, 0, 0.8); /* Assurer que l'ombre est présente tout au long de l'animation */
    }
}

.typing-effect-started {
    animation: typing 3s steps(30) 1 normal both;
}

/* Si nécessaire, rajouter une animation de type "fade in" pour l'image */
#header-image-container img {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.typing-effect-started #header-image-container img {
    opacity: 0.8; /* Légère transparence sur l'image pendant le typing */
}

/* Ajuster la taille de la police du texte typing en mode responsive */
@media only screen and (max-width: 992px) {
    .typing-effect {
        font-size: 16px !important; /* Ajuster la taille pour les petits écrans */
    }
}

/* === Contact Form === */
.contact-right .wpb_wrapper {
    transform: translateY(-60px) !important;
}

.contact-right .wpb_wrapper p:first-child {
    margin-top: 0 !important;
}

.contact-right .wpb_wrapper p {
    margin-bottom: 10px;
}

.contact-right i {
    color: #b4c3c5; /* change si tu veux */
    margin-right: 8px;
    width: 20px;
    display: inline-block;
    text-align: center;
}
.contact-right p {
    margin-bottom: 15px;
}
.contact-right strong {
    font-weight: 600;
}

/* Forcer le texte du footer en minuscule */
footer {
    text-transform: lowercase;
}

/* === Skills Section === */
.skill {
    width: 100px; /* Largeur fixe pour tous les skills */
    height: 100px; /* Hauteur fixe pour tous les skills */
    margin: 10px;  /* Espacement */
    border-radius: 50%; /* Bord arrondi */
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    background-color: #ccc; /* Couleur de fond par défaut */
    color: #333; /* Texte gris foncé */
    font-weight: bold;
    font-size: 16px;
    text-align: center; /* Centrage du texte */
    position: relative; /* Position relative pour permettre de positionner le texte à l'intérieur */
    line-height: normal; /* Pas de ligne de hauteur forcée */
    animation: none !important; /* Désactive les animations natives du thème */
    transition: none !important; /* Désactive les transitions */
}

/* Ajuster le texte à l'intérieur des skills */
section .skills-holder .skill p {
    color: #333 !important;
    font-size: 16px;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    position: absolute; /* Positionner le texte absolument à l'intérieur du skill */
    top: -35px; /* Position du texte par rapport au skill */
    left: 50%;
    transform: translateX(-50%);
}

/* Ajuster la position spécifique des textes selon leur skill */
section .skills-holder .skill.usa p {
    top: -70px; /* USA (ou autre grande valeur) */
}

section .skills-holder .skill.china p {
    top: -50px; /* China (ou autre valeur plus basse) */
}

section .skills-holder .skill.germany p {
    top: -60px; /* Germany (ou valeur intermédiaire) */
}

section .skills-holder .skill.southkorea p {
    top: -60px; /* South Korea (ou valeur intermédiaire) */
}

section .skills-holder .skill.france p {
    top: -60px; /* france (ou valeur intermédiaire) */
}

section .skills-holder .skill.pakistan p {
    top: -60px; /* pakistan (ou valeur intermédiaire) */
}
/* === Skills Colors === */
section .skills-holder .skill.usa {
    background-color: #ff5733 !important; /* USA */
}

section .skills-holder .skill.china {
    background-color: #33ff57 !important; /* China */
}

section .skills-holder .skill.germany {
    background-color: #000000 !important; /* Germany */
}

section .skills-holder .skill.southkorea {
    background-color: #ececec !important; /* South Korea */
}

section .skills-holder .skill.france {
    background-color: #d36dfd !important; /* France */
}

section .skills-holder .skill.pakistan {
    background-color: #6dfdfb !important; /* Pakistan */
}



/* === Centrer les skills dans le conteneur === */
.skills-holder {
    display: flex;
    justify-content: center; /* Centre horizontalement les éléments */
    align-items: flex-start; /* Aligne les skills en haut */
    flex-wrap: wrap;
    gap: 10px; /* Espacement uniforme entre les skills */
    text-align: center;
    margin-top: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Désactiver l'animation native du thème sur les skills */
section .skills-holder .skill {
    animation: none !important;  /* Désactive toute animation */
    transition: none !important; /* Désactive toute transition */
    transform: none !important;  /* Désactive toute transformation */
}


/* Animation fade-in pour les skills */
@keyframes fadeInSkills {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Applique l'animation aux skills */
section .skills-holder .skill {
    animation: fadeInSkills 1s ease-out;  /* Animation fade-in pour chaque skill */
}