/* poppins-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v24-latin_latin-ext-regular.woff2') format('woff2');
}
/* poppins-500 - latin_latin-ext */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v24-latin_latin-ext-500.woff2') format('woff2');
}
/* poppins-700 - latin_latin-ext */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v24-latin_latin-ext-700.woff2') format('woff2');
}

:root {
    --light-100: #fdf6f1;
    --bs-primary: #b29263;
    --bs-primary-rgb: 178, 146,99;
}

svg { display: block; width: 24px; aspect-ratio: 1 / 1; }

body { --bs-body-bg: var(--light-100); --bs-body-color: #2c1a00; --bs-body-font-family: 'Poppins', sans-serif; }

.landing-page { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 33rem), var(--light-100); }

.contact-list { display: flex; flex-direction: column; gap: 1rem; font-size: 1.25rem; font-weight: 500;
    width: max-content; margin: 0 auto;
}
.contact-item { display: flex; gap: 1rem; align-items: center;
    text-decoration: none; color: var(--bs-body-color);
    transition: all .15s ease-in-out;
}
.contact-icon { display: flex; justify-content: center; align-items: center; width: 58px; aspect-ratio: 1/1; border-radius: 100vw; border: 1px solid var(--bs-primary); color: var(--bs-primary);
    transition: all .15s ease-in-out;
}
.contact-icon svg { width: 24px; }
.contact-divider { width: 1px; height: 42px; background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0), rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-primary-rgb), 0)); }
a.contact-item:hover { color: var(--bs-primary) }
a.contact-item:hover .contact-icon { background-color: var(--bs-primary); color: #fff; }


.catalog-item { position: relative; display: flex; gap: 1.5rem; align-items: center; padding: 1.5rem; font-size: 1.25rem;
    border-radius: var(--bs-border-radius-xl); border: 1px solid transparent; background-color: transparent; box-shadow: none;
    transition: all .15s ease-in-out;
}
.catalog-image { width: auto; flex: 0 0 auto; }
.catalog-image img {}
.catalog-body { width: 100%; flex: 1 0 0%; }
.catalog-text {}
.catalog-action { margin-top: 1rem; }
.catalog-action .nav-link { --bs-nav-link-font-weight: 700; --bs-nav-link-hover-color: var(--bs-primary); }
.catalog-item:hover { background-color: #fff; border-color: var(--bs-primary); box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), .3); }

.divider { max-width: 1000px; margin: 1.5rem auto; }
.divider.full>span { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0), rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-primary-rgb), 0));}
.divider.decor { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; }
.divider.decor>span { display: block; height: 1px; }
.divider.decor>span:first-of-type { background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0), rgba(var(--bs-primary-rgb), 1));}
.divider.decor>span:last-of-type { background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-primary-rgb), 0));}

@media (min-width: 576px) {
    html { font-size: 14px; }
}
@media (min-width: 768px) {
    html { font-size: 14px; }
}
@media (min-width: 992px) {
    html { font-size: 14px; }
}
@media (min-width: 1200px) {
    html { font-size: 15px; }
}
@media (min-width: 1400px) {
    html { font-size: 16px; }
}
@media (min-width: 1500px) {

}

@media (min-width: 576px) and (max-width: 991.98px) {

}
@media (min-width: 768px) and (max-width: 991.98px) {

}
@media (min-width: 390px) and (max-width: 575.98px) {

}
@media (min-width: 576px) and (max-width: 767.98px) {

}
@media (min-width: 768px) and (max-width: 991.98px) {

}
@media (min-width: 992px) and  (max-width: 1199.98px) {

}

@media (max-width: 575.98px) {
    html { font-size: 13px; }
}
@media (max-width: 767.98px) {

}
@media (max-width: 991.98px) {

}
@media (max-width: 1199.98px) {

}
@media (max-width: 1399.98px) {

}