@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto+Slab:wght@100..900&display=swap');

:root {
    --primary-blue: #007BFF;
    --dark-blue: #1E3A8A;
    --secondary-teal: #20C997;
    --background-light: #F8F9FA;
    --background-blue-tint: #E3F2FD;
    --text-dark: #333333;
    --text-gray: #6C757D;
    --btn-hover-blue: #0056B3;
    --btn-hover-teal: #1A7F6F;
}

.container {
    width: 86%;
    margin: auto;
}

.roboto-slab{
    /* font-family: "Roboto Slab", serif; */
    font-family: "Roboto Slab",  sans-serif;
  }

.nunito {
    font-family: "Nunito", sans-serif;
}

/* General Styles */
body {
    background-color: var(--background-light);
    color: var(--text-dark);
    font-family: "Nunito", sans-serif;
}

/* Headings */
h1, h2, h3 {
    color: var(--dark-blue);
    font-family: "Roboto Slab",  sans-serif;
}

/* Paragraphs & Normal Description */
p {
    color: var(--text-dark);
}

.description {
    color: var(--text-gray);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 75px;
    transition: 0.3s ease-in-out;
}
.btn-primary:hover {
    background-color: var(--btn-hover-blue);
}

.btn-secondary {
    background-color: var(--secondary-teal);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
}
.btn-secondary:hover {
    background-color: var(--btn-hover-teal);
}

/* Background Styling */
.bg-blue-tint {
    background-color: var(--background-blue-tint);
    padding: 20px;
    border-radius: 10px;
}

.bg-image{
    background-image: url('./images/bg.webp');
    object-fit: cover;
    background-size: cover; /* Ensures the image covers the container without stretching */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
}