/* Custom Styles for Digital Marketing Portfolio */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Poppins', sans-serif;
}
/* Fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: none;
}
/* Preloader styles (optional) */
#preloader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Scroll-to-top button */
#scrollToTopBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 50;
}
#scrollToTopBtn.show {
    display: flex;
}

/* Active Nav Link Styling */
.nav-link.active {
    color: #1d4ed8; /* blue-700 equivalent */
    font-weight: 600; /* Makes it slightly bolder to stand out */
}

/* Footer Specific Styles */
footer {
    font-family: 'Poppins', sans-serif;
}

.footer-col ul {
    list-style: none; /* Remove default list bullets */
    padding: 0;
}

.footer-col ul li a {
    text-decoration: none; /* Remove underline from links */
}

/* Style for the newsletter input and button */
.footer-col input[type="email"] {
    border: 1px solid #4a4a4a; /* Darker border for input */
}

.footer-col input[type="email"]:focus {
    border-color: #2563eb; /* Blue ring on focus */
}

/* Portfolio Modal Specific Styles */
#portfolioModal .modal-content-area {
    /* Adjust width for mobile, keep max-w-lg for larger screens */
    width: 90%; /* Occupy 90% width on smaller screens */
    max-height: 90vh; /* Limit height to 90% of viewport height */
    overflow: hidden; /* Hide overflow of the main modal container */
    display: flex;
    flex-direction: column;
}

#portfolioModal .modal-body-scroll {
    overflow-y: auto; /* Enable vertical scrolling for the content */
    flex-grow: 1; /* Allow this div to take up available space */
    padding-right: 15px; /* Add padding for scrollbar on Windows */
    box-sizing: border-box; /* Include padding in element's total width and height */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
#portfolioModal .modal-body-scroll::-webkit-scrollbar {
    display: none;
}