@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --bg-tienda: #482F42;
    --primary: #482F42;
    --primary-rgb: rgb(72, 47, 66);
    --primary-hover: rgba(72, 47, 66, 0.8);
    --text-primary: rgb(85, 56, 78);
    --bs-primary-rgb: 85, 56, 78;
}

body{
    /* background-color: #f4f0e5; */
    /* background-color: #f1e7c5; */
    background-color: #fbf8f9;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-image {
    animation: scale-fade-out linear forwards;
    animation-timeline: entry;
    animation-duration: 0.5s;
    background-image: url('/images/banner.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 500px;
    width: 100%;
    position: relative;
}

.overlay{
    position:  absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
    opacity: 0.2;
}

.scroller{ 
    width: 100%;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);

}

.scroller .scroller__inner{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scrolling 40s linear infinite;
}


.moving-left {
    animation: move-left 2s ease-in-out;
    animation-timeline: view(block 100% 0%);
}

.moving-right {
    animation: move-right 2s ease-in-out backwards;
    animation-timeline: view(block 100% 0%);
}

.moving-up {
    animation: move-up 2s ease-in-out backwards;
    animation-timeline: view(block 100% 0%);
}

.moving-down {
    animation: move-down 2s ease-in-out backwards;
    animation-timeline: view(block 100% 0%);
}

@keyframes scrolling {
    to { 
        transform: translate(calc(-50% - 0.5rem));
    }
}

@keyframes scale-fade-out{
    from { scale: 0.8; opacity: 0 };
    to { scale: 1; opacity: 1 };
}

@keyframes move-right{
    from { transform: translate(-50%); opacity: 0;}
    to { opacity: 1; }
}

@keyframes move-left{
    from { transform: translate(50%); opacity: 0;}
    to { opacity: 1; }
}

@keyframes move-up{
    from { transform: translateY(50%); opacity: 0;}
    to { opacity: 1; }
}

@keyframes move-down{
    from { transform: translateY(-50%); opacity: 0;}
    to { opacity: 1; }
}

.fade-in{
    opacity: 1;    
}

.fade-in:hover{
    opacity: 0.8;
}

.product-image{
    transform: scale(1);
}

.product-image:hover{
    transform: scale(1.1);
    transition-duration: 0.5s;
}

.footer{
    margin-top: auto;
    background: #6099EF;
}

.copyright{
    background: rgba(61,61,60, 0.2);
}

.nav-link:hover{
    opacity: 0.8;
    background-color: #fbf6d0;
    border-radius: 0.5rem;
    color: rgb(var(--bs-primary-rgb));
}

.navbar-brand:hover {
    background-color: #fbf6d0;
    padding: 0.25rem 1rem;
    border-radius: 0.5rem;
    color: rgb(var(--bs-primary-rgb));
}

.navbar-brand {
    padding: 0.25rem 1rem;
    color: rgb(var(--bs-primary-rgb));
}

.lh-md{
    line-height: 1.3rem;
}

.lh-lg{
    line-height: 1.5rem;
}

.fs-7{
    font-size: 0.75rem;
}

@media (min-width: 768px) { 
    .image-cart{
        background-size: cover;
        background-position: center;
        border-radius: 0.5rem 0 0 0.5rem;
    }
}

@media (max-width: 767.98px) { 
    .image-cart{
        background-size: cover;
        background-position: center;
        height: 250px;
        border-radius: 0.5rem 0.5rem 0 0;
    }
}

.rotate {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bg-tienda{
    background: var(--bg-tienda);
}

.navbar{
    background: var(--bg-tienda);
}

.navbar .nav-link:hover{
    background-color: inherit;
    opacity: 0.7;
}

.montserrat-body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.montserrat-title {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

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

.btn-primary:hover,
.btn-primary:active,
.btn.show {
    background-color: var(--primary-hover) !important;
    border-color: var(--bg-white) !important;
}

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

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}