@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
    height: 100%;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    background-color: #f0f0f0;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s ease;
}

a:hover {
    color: #0056b3;
}

::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.card-text {
    text-justify: inter-word;
    text-align: justify;
}

.instagram-media {
    max-width: 540px;
    width: calc(100% - 2px);
}

.card {
    background: #f0f0f0;
    box-shadow: 6px 6px 12px #d8d8d8,
        -6px -6px 12px #ffffff;
    border: none;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23333' class='bi bi-chevron-double-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708'/%3E%3Cpath fill-rule='evenodd' d='M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.breadcrumb-button {
    padding: 12px 18px;
    font-size: 14px;
    color: #333;
    background-color: #e0e0e0;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 5px 5px 15px #bebebe, -5px -5px 15px #ffffff;
}

.breadcrumb-button:hover {
    box-shadow: inset 5px 5px 15px #bebebe, inset -5px -5px 15px #ffffff;
    color: #007bff;
}

.breadcrumb-button:active,
.breadcrumb-button.active {
    box-shadow: inset 5px 5px 15px #bebebe, inset -5px -5px 15px #ffffff;
    color: #007bff;
}

.breadcrumb-button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

@media (max-width: 768px) {
    .breadcrumb-button {
        font-size: 12px;
    }

    .instagram-media {
        width: 100%;
    }

    .card {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .breadcrumb-button {
        font-size: 10px;
    }
}