* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%; /* Assure que le body prend toute la hauteur */
    overflow-y: scroll; /* Autorise le défilement vertical */
    overflow-x: hidden; /* Cache la barre de défilement horizontale */
    scroll-behavior: smooth; /* Ajoute un défilement fluide */
    font-family: 'Barlow Semi Condensed', sans-serif;
}

header, section, footer {
    min-height: 100vh; /* Chaque section prend 100 % de la hauteur de l'écran */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le contenu verticalement */
    align-items: center; /* Centre le contenu horizontalement */
    padding: 20px; /* Ajoute du padding autour du contenu */
    color: #fff; /* Couleur du texte par défaut (modifiable) */
    scroll-snap-align: start; /* Chaque section s'aligne au début du viewport */
}

body::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement */
}

body {
    scrollbar-width: none; /* Masque la barre de défilement */
    scroll-snap-type: y mandatory; /* Active le scroll snap vertical */
}

#header {
    background-color: #004133; /* Couleur de fond pour l'en-tête */
}

#about {
    background-color: #eef3f4; /* Couleur de fond pour la section 'About' */
}

#services {
    background-color: #eef3f4; /* Couleur de fond pour la section 'Services' */
}

#packages {
    background-color: #eef3f4; /* Couleur de fond pour la section 'Packages' */
}

#contact {
    background-color: #eef3f4; /* Couleur de fond pour le footer */
}

.nav-dots {
    position: fixed;
    right: 20px; /* Ajuste selon tes besoins */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espace entre les points */
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #aaa; /* Couleur des points */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #000; /* Couleur active */
}

/* Media Queries pour différentes tailles d'écran */

@media (max-width: 425px) {
    header, section, footer {
        padding: 15px; /* Moins de padding sur petits écrans */
    }
    .dot {
        width: 8px; /* Réduit la taille des points */
        height: 8px;
    }
}

@media (max-width: 768px) {
    header, section, footer {
        padding: 20px; /* Ajuste le padding */
    }
    .dot {
        width: 9px; /* Ajuste légèrement la taille des points */
        height: 9px;
    }
}

@media (max-width: 1024px) {
    header, section, footer {
        padding: 25px; /* Ajuste le padding */
    }
    .dot {
        width: 10px; /* Taille par défaut */
        height: 10px;
    }
}

@media (max-width: 1440px) {
    header, section, footer {
        padding: 30px; /* Ajuste le padding */
    }
    .dot {
        width: 10px; /* Taille par défaut */
        height: 10px;
    }
}

@media (max-width: 2560px) {
    header, section, footer {
        padding: 35px; /* Ajuste le padding pour les grands écrans */
    }
    .dot {
        width: 12px; /* Augmente légèrement la taille des points */
        height: 12px;
    }
}