@font-face {
    font-family: 'Horizon';
    src: url('../fonts/Horizon.otf') format('opentype'); /* Link to the main .otf file */
}

/* Montserrat Font Face Declarations */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    
    font-weight: 400; /* Normal weight */
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold weight */
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Thin';
    src: url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 700; /* Bold weight */
    font-style: normal;
}

/* Use Montserrat for navigation links */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Ensure full height */
    font-family: Arial, sans-serif;
    scroll-behavior: smooth;
    background-color: #000; /* Set to match your design */
    touch-action: manipulation; /* Prevents pinch zoom */
    overscroll-behavior: contain; /* Prevents unintended scrolling */
    /* Background Image Styles */
    background-image: url('../img/bg.png'); /* Path to your background image */
    background-size: cover; /* Cover the entire body */
    background-position: center; /* Center the image */
    background-repeat: repeat; /* Repeat the image to cover the entire page */
}

/* For Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Adjust thickness */
  }
  
  ::-webkit-scrollbar-track {
    background: #1a1a1a; /* Dark background for modern look */
    border-radius: 10px; /* Smooth edges */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #ffcc00; /* Stylish purple scrollbar */
    border-radius: 10px; /* Rounded corners */
    transition: all 0.3s ease-in-out;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #ffcc00; /* Darker shade when hovered */
  }
  
  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #ffcc00 #1a1a1a; /* Thumb color and track color */
  }
  

.section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in effect */
}

.section.active {
    display: block;
    opacity: 1;
}

        
/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* Adjust padding */
    background-color: rgba(0, 0, 0, 0.8); /* Optional: Add a background color to improve visibility */
    position: sticky; /* Make the header sticky */
    top: 0; /* Stick to the top of the viewport */
    z-index: 1000; /* Ensure it stays above other content */
}

/* Header Logo */
.header-logo {
    font-family: 'Horizon', sans-serif;
    font-size: 40px; /* Adjust font size for mobile */
    color: #fff;
    flex: 1; /* Allow logo to take space */
    text-align: left; /* Align logo to the left */
}
        
/* Navigation */
.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-family: 'Montserrat', sans-serif; /* Use Montserrat font */
    font-size: 18px;
    font-weight: 400; /* Normal weight */
}

 /* Add active class style */
 .nav-links a.active {
    border-bottom: 2px solid #8c52ff;
}

/* Highlight active link on hover */
.nav-links a:hover {
    border-bottom: 2px solid #8c52ff;
}

/* Mobile Menu Icon */
.menu-icon {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;

}

/* Responsive Styles */
@media (max-width: 768px) {

    .header {
        flex-direction: row; /* Stack logo and menu icon */
    }
    /* Ensure logo and menu icon align properly */
    .header-logo {
        font-size: 20px; /* Smaller font size for logo on mobile */
        flex: 1; /* Push the logo to the left */
    }

    /* Navigation Links */
    .nav-links {
        display: none; /* Hide links initially */
        flex-direction: column; /* Stack links vertically for mobile */
        position: fixed;
        top: 70px; /* Below the header */
        left: 0;
        width: 100%; /* Full width */
        background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent background */
        padding: 20px;
        box-sizing: border-box;
        transform: translateY(-100%); /* Hide menu initially */
        transition: transform 0.3s ease; /* Smooth slide-in effect */
    }

    .nav-links.active {
        display: flex; /* Show links when active */
        transform: translateY(0); /* Slide menu into view */
    }

    .nav-links a {
        text-decoration: none;
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-size: 18px;
        font-weight: 400;
        padding: 10px 15px; /* Add padding for better touch usability */
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Divider between links */
    }

    .nav-links a.active {
        border-bottom: 2px solid #8c52ff; /* Highlight active link */
    }

    .nav-links a:hover {
        border-bottom: 2px solid #8c52ff; /* Highlight on hover */
    }

    /* Menu Icon */
    .menu-icon {
            display: block; /* Show menu icon on mobile */
            font-size: 28px;
            cursor: pointer;
            z-index: 1100; /* Ensure it stays above the menu */
            color: white;

        }
}