@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    color: #555; /* Softer color for subtle text */
}

h2 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 2rem; /* Smaller size for subtler appearance */
    font-weight: normal; /* Lighter font weight for subtler appearance */
    text-align: center;
    color: #333; /* Slightly darker to stand out as a heading */
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333; /* Consistent with headings */
}

.nav-link {
    font-size: 1.2rem;
    font-weight: normal; /* Subtle link appearance */
    color: #555; /* Softer color for links */
}

#about img {
    width: 150px; /* Adjust size as needed */
    height: 150px; /* Ensure the width and height are equal to maintain the circular shape */
    border-radius: 50%;
    object-fit: cover; /* Ensures the image covers the entire area */
    margin: 0 auto; /* Centers the image */
}

#contact {
    display: none;
}
/* Center the button and adjust its style */
#contactForm .btn-primary {
    width: 100%; /* Full width button */
    margin-top: 20px; /* Space between form and button */
    background-color: #ffaa7cde; /* Fallback color */
    border-color: #ffaa7cde; /* Fallback border color */
    background-image: linear-gradient(to right, #ff9a7c, #ffd57c, #9d71ee); /* Gradient background */
    color: #ffffffd5; /* Text color */
}

/* Hover effect for button */
#contactForm .btn-primary:hover {
    background-image: linear-gradient(to right, #ff725c, #ffc175, #9d71ee); /* Gradient background on hover */
    color: #528e5e; /* Text color on hover */
}

.navbar {
    transition: top 0.3s;
}

#about {
    text-align: center;
}

.card {
    margin-top: 20px;
    color: #555; /* Subtle color for card text */
  
}
footer {
    background-color: #f8f9fa;
    color: #555; /* Subtle color for footer text */
}

/* Additional styling for paragraphs and other text elements */
p, li, .card-text {
    font-weight: 300; /* Light font weight for a more subtle appearance */
    color: #666; /* Slightly lighter color for general text */
}