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

/* --- General & Typography --- */
body {
    font-family: 'Nunito', sans-serif;
    background-color: #FFFFFF; /* White */
    color: #23767c; /* Dark Turquoise */
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title {
    font-family: 'Nunito', sans-serif;
	font-weight: 700;
}

/* --- Navigation Bar --- */
.navbar {
    background-color: #c2e6e6 !important; /* Lightest Turquoise */
    border-bottom: 2px solid #1ba1a2; /* Medium Turquoise accent border */
}

.navbar-brand, .nav-link {
    color: #23767c !important; /* Dark text on light navbar */
}

.navbar-brand {
    font-weight: 700;
}

.nav-link.active {
    font-weight: 700;
    color: #1ba1a2 !important; /* Medium Turquoise for active link */
}

.nav-link:hover {
    color: #1ba1a2 !important;
}

/* --- Hero Section --- */
.hero {
    /* Subtle diagonal stripes using gradients */
    background-color: #c2e6e6;
    background-image: linear-gradient(45deg, #e6fafa 25%, transparent 25%, transparent 50%, #e6fafa 50%, #e6fafa 75%, transparent 75%, transparent 100%);
    background-size: 56px 56px;
    color: #23767c;
    padding: 60px 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #91d6d3;
}

.hero h1 {
    font-weight: 700;
}

/* --- Cards for Products --- */
.card {
    background-color: #FFFFFF;
    border: 1px solid #91d6d3;
    border-top: 5px solid #54c1c4; /* Medium-Light Turquoise accent */
    border-radius: 8px;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.card-title {
    color: #23767c;
}

/* --- Buttons --- */
.btn-primary {
    background-color: #1ba1a2; /* Vibrant Turquoise */
    border-color: #1ba1a2;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 50px;
    transition: all .3s;
    box-shadow: 0 4px 10px rgba(27, 161, 162, 0.3);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: #2d8e95;
    border-color: #2d8e95;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(27, 161, 162, 0.4);
}

/* --- Footer --- */
footer {
    background-color: #c2e6e6 !important; /* Match the navbar */
    color: #23767c;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 4rem;
    border-top: 1px solid #91d6d3;
}