/* styles.css */

body {
    background-color: #f0f0f0; /* Lighter background color */
    color: #333; /* Dark text color */
    font-family: 'Roboto', sans-serif; /* Modern font family */
    margin: 0;
    padding: 0;
}

.navbar-brand {
    display: flex;
    align-items: center; /* Center vertically */
}

.navbar-brand img {
    margin-right: 10px; /* Adjust margin between icon and text */
}

.navbar-toggler {
    border: none; /* Remove border from toggler button */
}

.navbar-nav .nav-item {
    margin-left: 10px; /* Adjust margin between nav items */
}

.btn-primary {
    background-color: #f57c00; /* Orange button color */
    border-color: #f57c00;
    border-radius: 50px;
    transition: background-color 0.3s ease-in-out;
    color: #fff; /* Button text color */
}

.btn-primary:hover {
    background-color: #e65100; /* Darker shade of orange on hover */
    border-color: #e65100;
}

.btn-secondary {
    background-color: #4caf50; /* Green secondary button color */
    border-color: #4caf50;
    border-radius: 50px;
    transition: background-color 0.3s ease-in-out;
    color: #fff; /* Button text color */
}

.btn-secondary:hover {
    background-color: #388e3c; /* Darker shade of green on hover */
    border-color: #388e3c;
}

.card {
    background-color: #fff; /* White background for cards */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 20px; /* Rounded corners for cards */
    transition: transform 0.3s ease-in-out;
    overflow: hidden; /* Ensure content doesn't overflow rounded corners */
    margin: 20px; /* Margin around cards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add box shadow for depth */
}

.card:hover {
    transform: scale(1.05);
}

.card-title {
    color: #333; /* Dark title color */
}

.modal-content {
    background-color: #fff; /* White modal background */
}

.modal-header {
    background-color: #00bcd4; /* Blue modal header background */
    color: #fff; /* Modal header text color */
}

.modal-body img {
    border: 2px solid #00bcd4; /* Blue border for images */
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}



/* Google Fonts */
        @import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

        .line-1 {
            position: relative;
            top: 50%;
            width: 24em;
            margin: 0 auto;
            border-right: 2px solid rgba(255,255,255,.75);
            font-size: 140%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            transform: translateY(-50%);
        }

        /* Animation */
        .anim-typewriter {
            animation: typewriter 4s steps(44) 1s 1 normal both,
                       blinkTextCursor 500ms steps(44) infinite normal;
        }

        @keyframes typewriter {
            from { width: 0; }
            to { width: 24em; }
        }

        @keyframes blinkTextCursor {
            from { border-right-color: rgba(255,255,255,.75); }
            to { border-right-color: transparent; }
        }

        /* Responsive adjustments */
        @media (max-width: 576px) {
            .line-1 {
                width: 100%;
                font-size: 100%;
                white-space: normal;
                border-right: none; /* Remove cursor effect on mobile */
            }

            .anim-typewriter {
                animation: none; /* Remove animation on mobile */
            }
        }