.navbar {
    padding: 0.5rem 5%;
    background: black; 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out;
}

        .brand-logo {
            height: 50px;
            width: auto; 
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            justify-content: center;   
            align-items: center;
        }

        .nav-link {
            color: white; 
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            position: relative;
            /* justify-content: center; */
            padding: 0.5rem;
            transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        .nav-link:hover {
            color: yellow; 
            transform: translateY(-2px); /* Slight lift effect */
        }

        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            position: absolute;
            background: black;
            padding: 10px;
            border-radius: 5px;
            list-style: none;
            min-width: 150px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* Matchhing navbar shadow */
        }
        
        .dropdown-menu li {
            padding: 5px;
        }
        
        .dropdown-menu a {
            color: white;
            text-decoration: none;
        }

        .nav-item:hover .dropdown-menu {
            display: block;
        }
        
        /* Ko-fi Button Fix */
        .kofi-container {
            display: inline-block;
        }
        
        /* hamburger */
        @media (max-width: 768px) {
            .nav-links {
                display: block; /* mobile nav*/
            }
        }

        .menu-toggle {
            display: block;
            position: absolute;
            right: 20px; /* Adjust placement */
            top: 15px;
            font-size: 24px;
            z-index: 1001;
        }

        /*BuyMeACoffee Nav Button Styling*/

        .kofi-container {
            display: flex; 
            justify-content: center;
            align-items: center;
        }
        
        .kofi-button-nav {
            background-color: #ffdd00; /* Ko-fi yellow */
            color: #000;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.05rem;
            padding: 0.45rem 1rem;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease-in-out;
            position: relative;
            z-index: 1000; /* Ensures it doesn't overlap other elements */
        }
        
        /* Hover Effect */
        .kofi-button-nav:hover {
            background-color: #ffe85a;
            transform: translateY(-2px);
        }
        
        /* Ko-fi Icon Styling */
        .kofi-icon {
            height: 18px; 
            width: 18px;
            object-fit: contain;
            margin-bottom: 1px;
        }
        
        /* Fixing the Hamburger Menu Conflict */
        @media (max-width: 768px) {
            .nav-links {
                display: flex; 
                flex-direction: column;
            }
        
            .kofi-container {
                margin-top: 10px; 
                text-align: center;
            }
        
            .kofi-button-nav {
                width: fit-content;
                padding: 0.5rem 1.2rem;
            }
        }
    



        /* Mobile Styles */
        .menu-toggle {
            display: block;
            cursor: pointer; 
            color: white;
            font-size: 1.5rem; /*icon*/
        }

        /* Media Queries */
        @media (max-width: 768px) {
            .nav-links {
                display: none; /* Hide links by default */
                flex-direction: column; 
                position: absolute; 
                top: 60px;
                right: 0; 
                background: black; 
                width: 100%; 
                padding: 1rem 0; 
                z-index: 999; /* Ensure it appears above other content */
                opacity: 0; /* Start hidden */
                transform: translateY(-20px); 
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .nav-links.active {
                display: flex; 
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes rollDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes rollUp {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }


.blog-card {
    position: relative;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 4px 10px rgb(245 12 12);
    border-radius: 10px;
    text-align: center;
    width: 480px;  /* Fixed width */
    height: 320px; /* 3:2 aspect ratio */
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Updated title size */
.blog-title {
    font-size: 1.5rem; 
    font-weight: bold;
    font-family: 'Zeyada', cursive;
    color: #19056e;
    letter-spacing: 1px;
    margin: 25px ;
    margin-top: 39px;
    max-height: 240px; /* Allows multi-line titles */
    overflow:visible;
    display: -webkit-box;
    -webkit-line-clamp: 8; /* Limits to 2 lines */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}


/* Keep the date at the top */
.date {
    font-size: 0.9rem;
    font-weight: bold;
    color: #8597ce;
    margin-bottom: 3466px;
    text-align:center;
    position:fixed;
    

}


/* Read More Bar */
.read-more-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--primary-blue);
    padding: 5.5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
}

.read-more {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

/* Navigation Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-blue);
    color: #f3f0f0;
    border: none;
    padding: 10px 6px;
    cursor: pointer;
    font-size: 1.5rem;
    border-radius: 5px;
    transition: 0.3s;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}


/*subscription*/

.newsletter-subscribe {
    background: #f0e3e3c4;
    margin: 90px auto 0;
    padding: 15px 20px;
    width: 365px;
    box-shadow: 0px 4px 10px rgb(92 87 87);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-title {
    font-family: 'Zeyada';
    font-size: 2rem;
    color: #222;
    margin-bottom: 38px;
}

.newsletter-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

.subscribe-button {
    padding: 10px 20px;
    background-color: var(--primary-blue);
    color: #ebe5e5;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.subscribe-button:hover { 
    text-decoration: underline;
    background-color: var(--primary-blue);
}
