/* Global Styles */
:root {
    --primary-color: #2cbfdc;
    --primary-light: #4ebaaa;
    --primary-dark: #27d2e2;
    --secondary-color: #81c3c7;
    --secondary-light: #b2f5fa;
    --secondary-dark: #1cdce6;
    --background-light: #e8f5f5;
    --text-dark: #2e3440;
    --text-light: #ffffff;
    --text-muted: #666666;
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-light);
    color: var(--text-dark);
}

/* Hero Section */
.hero-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F7FF 100%);
    min-height: calc(100vh - 76px);
    display: flex;
    align-items: center;
}

.hero-section h1 {
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-section .lead {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Badge */
.badge {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 500;
}

/* Features List */
.features-list {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-item i {
    font-size: 1.2rem;
}

/* Calculator Card */
.calculator-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
}

.calculator-card .card-title {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
}

.form-label {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

.form-control {
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    font-size: 1rem;
}

.form-control:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.2rem rgba(0, 137, 123, 0.25);
}

/* Result Box */
.result-box {
    background-color: var(--text-light);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.result-section {
    background: linear-gradient(115deg, #ace0f2, #eff6f7);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-section:hover {
    transform: translateY(-3px);
}

.result-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.result-header i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.result-header span {
    font-size: 1rem;
    font-weight: 600;
}

.result-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0.25rem 0;
}

.result-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.result-grid {
    display: flex;
    /* grid-template-columns: repeat(3, 1fr); */
    /* flex-wrap: wrap; */
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(115deg, #ace0f2, #eff6f7);
    border-radius: 8px;
    width: 100%;
    /* flex-wrap: wrap; */
}

.result-item {
    padding: 0.75rem;
    background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.result-label {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.result-label i {
    margin-right: 0.5rem;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.result-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.rates-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--background-light);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.rate-item {
    display: flex;
    align-items: center;
    /* padding: 0.4rem; */
    border-radius: 6px;
    transition: background-color 0.2s ease;
    font-size: 0.85rem;
}

.rate-item:hover {
    background-color: #abe5e6;
}

.rate-item i {
    color: var(--primary-color);
    margin-right: 0.5rem;
    font-size: 0.9rem;
}

.rate-item span {
    color: var(--text-muted);
    margin-right: 0.5rem;
}

.rate-item strong {
    color: var(--text-dark);
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

/* Navigation */
.navbar {
    padding: 1rem 0;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--primary-color) !important;
}

.nav-button {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    color: var(--text-dark) !important;
}

.nav-button:hover {
    background-color: #52f3f3;
    color: var(--text-light) !important;
}

.nav-button i {
    opacity: 0.8;
}

/* Content Wrapper (to account for fixed navbar) */
.content-wrapper {
    padding-top: 80px;
}

/* Responsive Navigation */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 1rem 0;
    }

    .nav-button {
        margin: 0.25rem 0;
    }

    .navbar-nav.ms-auto {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--light-blue);
    }
}

/* Company Section */
.company-section {
    /* background-color: white; */
    padding: 5rem 0;
}

.company-section .container {
    /* center everything inside */
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
    justify-items: center;
}

.feature-box {
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    transition: transform 0.3s ease;
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.4), -8px -8px 16px white;
}

.feature-box:hover {
    transform: translateY(-5px);
}

.feature-box i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.feature-box h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-box p {
    color: var(--secondary-color);
    margin-bottom: 0;
}

.stats-container {
    display: flex;
    /* grid-template-columns: 1fr; */
    gap: 2rem;
    padding: 2rem;
    background: white;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.4), -8px -8px 16px white;
    justify-items: center;
    transition: transform 0.3s ease;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 2rem auto;
}

.stats-container:hover {
    transform: translateY(-5px);
}

.stat-item {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow:
        8px 8px 16px rgba(174, 174, 192, 0.4),
        -8px -8px 16px white;
    transition: transform 0.3s ease;
    text-align: center;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-item:nth-child(3) {
    grid-column: span 2;
}

.stat-item h3 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.stat-item p {
    margin-bottom: 0;
    color: var(--secondary-color);
}

@media (min-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .stats-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Team Section */
.team-section {
    /* background-color: var(--light-blue); */
    padding: 5rem 0;
    align-items: stretch;
}

.team-section-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
    /* overflow-x: auto; */
    /* allows horizontal scroll on small screens */
    padding-bottom: 1rem;
    /* gives space for scroll bar */
    margin-top: 2rem;
    align-items: stretch;
    /* ensures all items stretch to equal height */

}

.team-card {
    flex: 0 0 23%;
    /* four cards take ~23% each; adjust as needed */
    background: var(--neumorph-light);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 8px 8px 16px var(--neumorph-shadow), -8px -8px 16px white;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp var(--animation-speed) ease forwards;
    min-height: 300px;
}



.team-card:hover {
    transform: translateY(-5px);
}

.team-image-placeholder {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.4), inset -4px -4px 8px white;
}

.team-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.team-card .text-primary {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.team-bio {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 0;
}

@media (max-width: 990px) {
    #navbarNav {
        /* translucent white background */
        background-color: rgba(255, 255, 255, 0.4);

        /* frosted‑glass blur */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        /* optional border or shadow to define the edge */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        border-radius: 15px;
    }

    .nav-small-screen {
        flex-direction: column;
    }

    #navbarNav .nav-link {
        color: #000 !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }

}

/* Responsive Adjustments */
@media (max-width: 768px) {



    .hero-section {
        padding: 2rem 0;
        min-height: auto;
    }

    .team-section-container {
        flex-direction: column;
    }

    .features-list {
        flex-direction: column;
        gap: 1rem;
    }

    .calculator-card {
        margin-top: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }



    .stat-item:nth-child(3) {
        grid-column: auto;
    }

    .stat-item:nth-child(3) {
        flex-direction: column;
        gap: 1rem;
    }

    .team-card {
        margin-bottom: 2rem;
    }

    /* .result-grid {
        grid-template-columns: 1fr;
    } */

    .result-amount {
        font-size: 2rem;
    }

    .result-section {
        padding: 1rem;
    }
}

@media (max-width: 1100px) {
    .result-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .rates-info {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Portfolio Page */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--text-light);
    margin-bottom: 1.5rem;
}

.card-title {
    color: var(--primary-color);
    font-weight: 600;
}

.risk-profile-section .progress {
    height: 8px;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.asset-item {
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--light-blue);
    transition: transform 0.3s ease;
}

.asset-item:hover {
    transform: translateY(-2px);
}

.badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 500;
}

.metric-item h3 {
    margin: 0.5rem 0;
    font-weight: 600;
}

.metric-item h5 {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

#assetAllocationChart {
    height: 300px;
    margin-bottom: 1rem;
}

/* Responsive adjustments for portfolio */
@media (max-width: 768px) {
    .asset-allocation-list {
        margin-top: 2rem;
    }

    #assetAllocationChart {
        height: 250px;
    }
}

/* Pricing Page Specific Styles */
.pricing-card-title {
    color: var(--primary-color);
}

.card.border-primary {
    border: 2px solid var(--primary-color) !important;
}

.text-bg-primary {
    background-color: var(--primary-color) !important;
}

.text-success {
    color: var(--secondary-color) !important;
}

/* Alert Styles */
.alert-info {
    background-color: var(--secondary-light);
    border-color: var(--secondary-color);
    color: var(--primary-dark);
}

/* Progress Bar Styles */
.progress-bar {
    background-color: var(--primary-color);
}

/* Dashboard Cards */
.dashboard-card {
    border-left: 4px solid var(--primary-color);
    transition: transform 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
}

/* Portfolio Section */
.portfolio-chart {
    background-color: var(--text-light);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-light);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Animation for Cards */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Calculator Section */
.calculator-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    background-color: var(--text-light);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Form Controls */
.calculator-section .form-control {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    height: 32px;
    min-height: unset;
    border-radius: 12px;
    border: none;
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.4), inset -4px -4px 8px white;
    font-size: 1rem;
    color: #263238;
    ;
}

.calculator-section .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
    color: var(--text-muted);
}

.calculator-section .input-group {
    height: 32px;
}

.calculator-section .input-group-text {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    height: 32px;
}

.calculator-section .mb-3 {
    margin-bottom: 0.5rem !important;
}

.calculator-section .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    height: 32px;
}

/* Result Box in Calculator */
.calculator-section .result-box {
    padding: 0.75rem;
}

.calculator-section .result-section {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.calculator-section .result-header {
    margin-bottom: 0.25rem;
}

.calculator-section .result-header i {
    font-size: 0.9rem;
    margin-right: 0.25rem;
}

.calculator-section .result-header span {
    font-size: 0.85rem;
}

.calculator-section .result-amount {
    font-size: 1.2rem;
    margin: 0.15rem 0;
    line-height: 1.2;
}

.calculator-section .result-subtitle {
    font-size: 0.75rem;
    margin-top: 0.1rem;
}

.calculator-section .result-grid {
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.5rem;
}

.calculator-section .result-item {
    padding: 0.4rem;
}

.calculator-section .result-label {
    font-size: 0.75rem;
    margin-bottom: 0.15rem;
}

.calculator-section .result-label i {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

.calculator-section .result-value {
    font-size: 0.9rem;
    line-height: 1.2;
}

.calculator-section .rates-info {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    gap: 0.35rem;
}

.calculator-section .rate-item {
    padding: 0.25rem;
    font-size: 0.75rem;
}

.calculator-section .rate-item i {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

/* Support Section */
.support-card {
    background-color: var(--background-light);
    border-radius: 12px;
    padding: 2rem;
    margin: 1rem 0;
    border-left: 4px solid var(--primary-color);
}

/* Animation for results */
.result-section,
.result-item {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Investment Growth Section */
.investment-growth-section {
    background-color: var(--background-light);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 2rem 0;
    margin-top: 1rem;
}

.section-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.section-title i {
    font-size: 1rem;
    margin-right: 0.5rem;
    opacity: 0.8;
}

.chart-container {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.chart-wrapper {
    position: relative;
    height: 350px;
    width: 100%;
}

.detailed-results {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.result-box.detailed {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .calculator-section {
        padding: 0.75rem;
    }

    .chart-wrapper {
        height: 250px;
    }

    .detailed-results {
        margin-bottom: 1.5rem;
    }

    .investment-growth-section {
        padding: 1.5rem 0;
    }
}

:root {
    --bg-start: #e0f7fa;
    --bg-mid: #ffffff;
    --neumorph-light: #ffffff;
    --neumorph-shadow: rgba(174, 174, 192, 0.4);
    --accent: #42a5f5;
    --text-dark: #263238;
    --text-muted: #455a64;
    --shadow: rgba(0, 0, 0, 0.1);
    --animation-speed: 0.6s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--bg-start), var(--bg-mid));
    animation: bgPulse 15s ease-in-out infinite;
    color: var(--text-dark);
    overflow-x: hidden;
}

@keyframes bgPulse {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }
}

nav {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

nav .logo {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--text-dark);
    opacity: 0;
    animation: fadeIn var(--animation-speed) ease forwards;
    animation-delay: 0.3s;
}

nav ul {
    display: flex;
    gap: 2rem;
    list-style: none;
    opacity: 0;
    animation: fadeIn var(--animation-speed) ease forwards;
    animation-delay: 0.5s;
}

nav ul a {
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.3s;
}

nav ul a:hover {
    color: var(--accent);
}

nav .cta {
    background: var(--accent);
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    color: var(--neumorph-light);
    box-shadow: inset 6px 6px 16px var(--neumorph-shadow), inset -6px -6px 16px white;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    animation: popIn var(--animation-speed) ease forwards;
    animation-delay: 0.7s;
}

nav .cta:hover {
    box-shadow: inset 2px 2px 6px var(--neumorph-shadow), inset -2px -2px 6px white;
}

.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.hero img {
    width: clamp(250px, 25vw, 500px);
    /* Adjust width between 120px and 300px depending on screen size */
    height: auto;
    opacity: 0;
    transform: scale(0.8);
    animation: zoomIn var(--animation-speed) ease forwards;
    animation-delay: 1s;
}

.hero p {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 1.1rem;
    opacity: 0;
    animation: fadeIn var(--animation-speed) ease forwards;
    animation-delay: 1.3s;
}

.hero a {
    margin-top: 2rem;
    background: var(--accent);
    color: var(--neumorph-light);
    padding: 0.8rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    /* box-shadow: 8px 8px 16px var(--neumorph-shadow), -8px -8px 16px white; */
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUp var(--animation-speed) ease forwards;
    animation-delay: 1.6s;
}

.hero a:hover {
    box-shadow: 4px 4px 8px var(--neumorph-shadow), -4px -4px 8px rgb(206, 205, 205);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

:root {
    --accent: #42a5f5;
    --neumorph-light: #ffffff;
    --neumorph-shadow: rgba(174, 174, 192, 0.4);
    --text-dark: #263238;
    --text-muted: #455a64;
    --animation-speed: 0.6s;

}

body {
    background: linear-gradient(115deg, #c0e0eb, #48d2ed)
}

/* override fixed-top + bg-white */
.navbar {
    box-shadow: none !important;
}

.navbar.fixed-top {
    position: absolute;
    /* match your original absolute nav */
    top: 0;
    width: 100%;
    padding: 1rem 0rem !important;
    background: transparent !important;
    z-index: 100;
    display: flex;
    justify-content: space-between;
}

/* logo */
.navbar-brand {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--text-dark) !important;
    animation: fadeIn var(--animation-speed) ease forwards;
    opacity: 0;
    animation-delay: 0.3s;
    margin-right: 8rem;
}

/* nav links */
.nav-link.nav-button {
    font-weight: 500;
    color: var(--text-muted) !important;
    transition: color 0.3s;
}

.nav-link.nav-button:hover {
    color: var(--accent) !important;
}

/* CTA button (Start Investing) */
.btn-primary {
    background: var(--accent) !important;
    color: var(--neumorph-light) !important;
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    /* box-shadow:
        inset 6px 6px 16px var(--neumorph-shadow),
        inset -6px -6px 16px white; */
    font-weight: 600;
    border: none;
    cursor: pointer;
    animation: popIn var(--animation-speed) ease forwards;
    opacity: 0;
    animation-delay: 0.7s;
}

.btn-primary:hover {
    box-shadow:
        inset 2px 2px 6px var(--neumorph-shadow),
        inset -2px -2px 6px white;
}

@media (min-width: 992px) {
    .navbar-nav-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.navbar-nav .nav-link {
    padding: 0.25rem 0.5rem;
    /* top/bottom 0.25rem, left/right 0.5rem */
}

/* Footer */
.footer-section {
    /* background: linear-gradient(135deg, #2e7d32, #1b5e20); */
    position: relative;
    backdrop-filter: blur(10px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.footer-section .footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-section .footer-link:hover {
    color: #fff;
}

.footer-section .footer-social {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.2s, color 0.2s;
}

.footer-section .footer-social:hover {
    color: #fff;
    transform: translateY(-2px);
}

/* ensure spacing on small screens */
@media (max-width: 576px) {
    .footer-section .row>[class*='col-'] {
        text-align: center;
    }

    .footer-section .text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
}

/* custom btn */
.custom-btn {

    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;

}

.custom-btn:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.custom-btn:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.custom-btn:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}


/* CSS */
.button-80 {
    background: #fff;
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: .125rem;
    box-sizing: border-box;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-family: Circular, Helvetica, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    padding: .875rem 1.125rem;
    position: relative;
    text-align: left;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-80:not(:disabled):hover {
    transform: scale(1.05);
}

.button-80:not(:disabled):hover:active {
    transform: scale(1.05) translateY(.125rem);
}

.button-80:focus {
    outline: 0 solid transparent;
}

.button-80:focus:before {
    content: "";
    left: calc(-1*.375rem);
    pointer-events: none;
    position: absolute;
    top: calc(-1*.375rem);
    transition: border-radius;
    user-select: none;
}

.button-80:focus:not(:focus-visible) {
    outline: 0 solid transparent;
}

.button-80:focus:not(:focus-visible):before {
    border-width: 0;
}

.button-80:not(:disabled):active {
    transform: translateY(.125rem);
}