@import "../font/montserrat.css";
@import "../icon/bootstrap.css";
@import "./bootstrap/bootstrap.css";

/*
 * Identity
 * © 2025 ByteStore®
 */
:root {
    --emphasis: #00232B;
    --emphasis-rgb: 0, 35, 43;
    --dark: #00235D;
    --dark-rgb: 0, 35, 93;
    --dark-md: #002F7D;
    --dark-md-rgb: 0, 47, 125;
    --primary: #003C9E;
    --primary-rgb: 0, 60, 158;
    --light-md: #245BB2;
    --light-md-rgb: 36, 91, 178;
    --light: #4D7BC3;
    --light-rgb: 77, 123, 195;
    --subtle: #F2F4F7;
    --subtle-rgb: 242, 244, 247;
    --white: #FFFFFF;
    --font-family: "Montserrat", "Segoe UI", "Roboto", sans-serif;
    --gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
    --gradient-white: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/*
 * Based in Bootstrap v5.3.1
 */
:root,
[data-bs-theme=light] {
    --bs-body-font-family: var(--font-family);
    --bs-body-bg: var(--subtle);
    --bs-body-bg-rgb: var(--subtle-rgb);
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-primary-text-emphasis: var(--emphasis);
    --bs-primary-text-emphasis-rgb: var(--emphasis-rgb);
    --bs-primary-bg-subtle: var(--subtle);
    --bs-primary-border-subtle: var(--light);
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary-text-emphasis);
    --bs-link-hover-color-rgb: var(--bs-primary-text-emphasis-rgb);
    --bs-code-color: var(--bs-primary-text-emphasis);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-bg: var(--emphasis);
    --bs-body-bg-rgb: var(--emphasis-rgb);
    --bs-primary-text-emphasis: #9cdefc;
    --bs-primary-text-emphasis-rgb: 156, 222, 252;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary-text-emphasis);
    --bs-link-hover-color-rgb: var(--bs-primary-text-emphasis-rgb);
    --bs-code-color: var(--bs-primary-text-emphasis);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);
}

a {
    text-decoration: none !important;
}

i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-gradient-black {
    background-image: var(--gradient-black);
}

.bg-gradient-white {
    background-image: var(--gradient-white);
}

.btn {
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-primary {
    --bs-btn-bg: var(--dark-md);
    --bs-btn-border-color: var(--dark-md);
    --bs-btn-hover-bg: var(--dark);
    --bs-btn-hover-border-color: var(--dark);
    --bs-btn-focus-shadow-rgb: var(--dark-md-rgb);
    --bs-btn-active-bg: var(--emphasis);
    --bs-btn-active-border-color: var(--emphasis);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.banner {
    position: relative;
    overflow: hidden;
}

.banner:before {
    content: "";
    position: absolute;
    right: 0rem;
    bottom: 0rem;
    width: 0;
    height: 0;
    border-right: 25rem solid transparent;
    border-bottom: 25rem solid #FFFFFF;
    opacity: 0.06;
}

.banner:after {
    content: "";
    position: absolute;
    right: -38rem;
    bottom: 0rem;
    width: 100rem;
    height: 10rem;
    background-color: #FFFFFF;
    transform: rotate(45deg);
    opacity: 0.03;
}

.banner-body {
    position: relative;
    z-index: 1;
}

.item {
    display: flex;
    height: 100%;
    color: var(--bs-gray-dark);
    background-color: var(--white);
    border-width: var(--bs-border-width);
    border-style: var(--bs-border-style);
    border-color: rgba(var(--light-rgb), 0.15);
    border-radius: var(--bs-border-radius-xl);
    transition: box-shadow 0.15s ease-in-out;
}

.item:hover {
    color: var(--primary);
    box-shadow: 0 0.25rem 0.5rem rgba(var(--light-rgb), 0.15) !important;
}

.item-img {
    --img-size: 18rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rem;
    background-color: var(--white);
    mix-blend-mode: multiply;
}

.item-img img {
    mix-blend-mode: multiply;
    width: var(--img-size);
    max-height: var(--img-size);
    max-width: 100%;
}

.item-img-sm {
    --img-size: 4rem;
}

.item-img-md {
    --img-size: 6rem;
}

.item-img-lg {
    --img-size: 12rem;
}

.item-img-xl {
    --img-size: 18rem;
}

.item-img-xxl {
    --img-size: 24rem;
}