:root {
    --primary-color: #1A5276;
    /* Royal Blue */
    --accent-color: #F39C12;
    /* Gold */
    --background-color: #F7F1E3;
    /* Light Beige */
    --text-color: #2C3E50;
    /* Charcoal Gray */
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Open Sans', sans-serif;
}

/* NavBar */
nav {
    backdrop-filter: blur(10px);
}

nav a {
    transition: color 0.3s ease, transform 0.3s ease;
}

nav a:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

section {
    padding: 40px 20px;
}

.nav-link {
    position: relative;
    /* Position for the pseudo-element */
}

.nav-link::after {
    content: '';
    /* Create a pseudo-element */
    position: absolute;
    /* Position it absolutely within the link */
    left: 0;
    /* Align to the left */
    right: 0;
    /* Align to the right */
    bottom: 0;
    /* Position at the bottom */
    height: 2px;
    /* Thickness of the border */
    background-color: white;
    /* Color of the border */
    transform: scaleX(0);
    /* Initially hide the border */
    transition: transform 0.3s ease;
    /* Transition for the border effect */
}

.nav-link:hover::after {
    transform: scaleX(1);
    /* Show the border on hover */
}

/* Home */

#home {
    margin-top: -80px;
    position: relative;
    height: 100vh;
    /* Full height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    /* Default text color */
    background-repeat: no-repeat;
    /* Prevent background image repetition */
    background-size: cover;
    background-position: center;
    /* Cover the entire section */
    transition: background-image 1s ease;
    /* Smooth transition for background */
    overflow: hidden;
    /* Prevents overflow during animations */
}

.content {
    position: relative;
    z-index: 10;
    /* Ensure content is above background */
    text-align: center;
    opacity: 0;
    /* Initial state for animation */
    animation: fadeIn 1s forwards;
    /* Apply fadeIn animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        /* Slide in from below */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* Final position */
    }
}

.button {
    opacity: 0;
    /* Initial state for animation */
    transform: translateY(10px);
    /* Slide in from below */
    animation: buttonFadeIn 1s forwards;
    /* Apply button fadeIn animation */
    animation-delay: 0.5s;
    /* Delay for button animation */
}

@keyframes buttonFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        /* Slide in from below */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* Final position */
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Semi-transparent overlay */
    transition: background 1s ease;
    /* Smooth transition for overlay */
    z-index: 5;
    /* Below content */
}

/* Optional Custom Styles */


/* About */

#about {
    background: linear-gradient(rgb(24, 20, 14), #3d2503);
}

.About-ul {
    padding: 2px;
}

.customer-stats {
    background-color: rgba(0, 0, 0, 0.5);
    /* Dark overlay for better text visibility */
}

.stats-box {
    background-size: cover;
    background-position: center;
}

.stat-item {
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    /* Elevate the item on hover */
}

.number {
    display: inline-block;
    font-size: 2.5rem;
    /* Adjust font size as needed */
    animation: countAnimation 2s ease forwards;
    /* Animation duration and easing */
}

@keyframes countAnimation {
    from {
        transform: scale(0);
        /* Start from a smaller size */
        opacity: 0;
    }

    to {
        transform: scale(1);
        /* End at normal size */
        opacity: 1;
    }
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 1s ease forwards;
}

/* Book */
#book {
    background-image: linear-gradient(rgba(0, 0, 0, 0.747), rgba(0, 0, 0, 0.753)), url('../assest/image/backHome3.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    
}