/* General Styles */
  body {
    font-family: 'Arial', sans-serif;
    background-color: #e9ecef;
    margin: 0;
    padding: 0;
    color: #495057;
}

/* Navbar Styles */
.custom-bg {
background-color: #1a2b1b; /* Green background color */
}

.custom-bg .navbar-brand,
.custom-bg .nav-link {
font-family: 'Playfair Display', serif; /* Elegant font */
font-weight: 700; /* Bold text */
color: #fff !important; /* White text color for brand and links */
}

.custom-bg .nav-link:hover {
color: #FFD700 !important; /* Golden color on hover */
}

.navbar-toggler .bi {
font-size: 1.5rem; /* Adjust icon size */
color: white; /* Change icon color */
}

.navbar-toggler {
border: none; /* Remove default border */
padding: 5px; /* Add padding for better click area */
}

.hero {
    display: none;  /* Hide the hero section by default */
}
/* Hero Section */
.hero {
    background-image: url('https://ik.imagekit.io/dae4tuoyb/DataMart/Banner.png?updatedAt=1735290842837');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 100px 20px;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero .btn-primary {
    background-color: #ff9100;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.hero .btn-primary:hover {
    background-color: #ff922c;
}




/* Catalog Section */
#catalogs {
padding: 60px 20px;
background-color: #f4f4f4 !important; /* Soft neutral background for contrast */
}

#catalogs h2 {
font-size: 2.5rem;
margin-bottom: 40px;
color: #8B0000; /* Rich dark red for headers */
text-align: center;
font-family: 'Playfair Display', serif; /* Elegant font for the title */
}

.card {
border: none;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #ffffff; /* Bright background for cards */
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* Richer shadow on hover */
}

.card-img-top {
height: 350px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: 3px solid #8B0000; /* Add a bold bottom border for richness */
}

.card-body {
padding: 20px;
background-color: #FDF5E6; /* Warm ivory tone */
border-radius: 0 0 10px 10px;
}

.card-title {
font-size: 1.5rem;
font-weight: 700; /* Bolder font weight for emphasis */
color: #2F4F4F; /* Rich dark slate gray */
}

.card-text {
font-size: 1rem;
color: #696969; /* Warm medium gray */
font-family: 'Lora', serif; /* Elegant serif font for content */
}

.card .btn-primary {
background-color: #8B0000; /* Rich dark red for buttons */
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
color: #fff; /* White text for contrast */
transition: background-color 0.3s ease, transform 0.2s ease;
}

.card .btn-primary:hover {
background-color: #A52A2A; /* Slightly lighter tone on hover */
transform: scale(1.05); /* Subtle hover scale effect */
}

/* Badge Styles */
.custom-badge {
position: absolute;
top: 15px;
right: 15px;
padding: 8px 15px;
font-size: 1rem;
border-radius: 5px;
z-index: 1;
background-color: #014ddbd0; /* Vibrant gold for badges */
color: #fff; /* Black text for contrast */
font-weight: 600;
}

/* Media Queries */
@media (max-width: 768px) {
.card-img-top {
height: 260px; /* Adjust height for smaller screens */
}

.card-body {
        padding: 15px;
    }

.card-title {
font-size: 1.25rem;
}

.card-text {
font-size: 0.9rem;
}

.card .btn-primary {
padding: 8px 16px;
font-size: 0.9rem;
}
}



/* About Section */
#about {
background-color: #f7fafc; /* Light grayish background for a calm and refined appearance */
padding: 60px 20px;
}

#about h2 {
font-family: 'Merriweather', serif; /* Elegant serif font for a trustworthy feel */
font-size: 2.8rem;
margin-bottom: 40px;
color: #1a2b1b; /* Dark green to evoke loyalty and trust */
font-weight: 700; /* Bold for prominence */
text-align: center;
}

#about p {
font-family: 'Lora', serif; /* Clean and readable serif font */
font-size: 1.2rem;
color: #6c757d; /* Muted text color for a more refined look */
text-align: center;
max-width: 800px;
margin: 0 auto;
}

#about .about-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
}

#about .stat {
text-align: center;
font-size: 1.5rem;
}

#about .stat h3 {
font-size: 2.5rem;
color: #2a9d8f; /* Elegant teal to represent growth and trust */
font-weight: 700;
}

#about .stat p {
font-size: 1rem;
color: #495057; /* Dark gray for balance and sophistication */
}

/* Adding hover effect for stats to create a sense of dynamism */
#about .stat:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}

/* Footer Styles */
footer {
background-color: #1a2b1b; /* Dark green for a loyal feel */
color: #fff;
padding: 30px 0;
font-family: 'Lora', serif; /* Elegant font */
}

footer p {
margin-bottom: 20px;
font-size: 1.2rem;
}

footer .social-links a {
color: #fff;
font-size: 1.5rem;
margin: 0 15px;
transition: color 0.3s ease, transform 0.3s ease;
}

footer .social-links a:hover {
color: #FFD700; /* Golden color on hover */
transform: scale(1.1);
}

/* Added some padding and alignment for the social links */
footer .social-links {
margin-top: 20px;
}

footer .social-links i {
transition: transform 0.3s ease;
}

footer .social-links i:hover {
transform: rotate(15deg);
}



/* Responsiveness */
@media (max-width: 769px) {
    .hero {
        background-image: none; 
        display: none;  /* Hide the hero section on mobile */
    }

    #catalogs h2 {
        font-size: 1.8rem; /* Smaller font size for mobile */
    }
    
    #about .about-stats {
        flex-direction: column;
        gap: 20px;
    }

    #about .stat h3 {
        font-size: 2rem;
    }
}