/* Reset */
@import 'reset.css';

/* Imports */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Components */
@import './components/header.css';
@import './components/footer.css';
@import './components/login.css';
@import './components/profile.css';

/* Pages */
@import './pages/home.css';
@import './pages/content-general.css';
@import './pages/home/home-banner.css';
@import './pages/catalog/catalog.css';
@import './pages/nosotros/nosotros.css';




:root {
    --primary-color: #e8650e;
    --secondary-color: #142d40;
    --accent-color: #f2a149;

    /* Color Forward */
    --forward-100: #F5F5F5;
    --forward-200: #E5E5E5;
    --forward-300: #CFCFCF;
    --forward-400: #999999;
    --forward-500: #666666;
    --forward-600: #444444;
    --forward-700: #333333;
    --forward-800: #222222;
    --forward-900: #111111;


    /* Widths */
    --width-xs: 20rem;
    /* 320px */
    --width-sm: 40rem;
    /* 640px */
    --width-md: 48rem;
    /* 768px */
    --width-lg: 64rem;
    /* 1024px */
    --width-xl: 75rem;
    /* 1200px */
    --width-2xl: 90rem;
    /* 1440px */

    --fs-xs: 0.75rem;
    /* 12px */
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-base: 1rem;
    /* 16px */
    --fs-lg: 1.125rem;
    /* 18px */
    --fs-xl: 1.25rem;
    /* 20px */
    --fs-2xl: 1.5rem;
    /* 24px */
    --fs-3xl: 1.875rem;
    /* 30px */
    --fs-4xl: 2.25rem;
    /* 36px */
    --fs-5xl: 3rem;
    /* 48px */
    --fs-6xl: 3.75rem;
    /* 60px */
    --fs-7xl: 4.5rem;
    /* 72px */
    --fs-8xl: 6rem;
    /* 96px */
    --fs-9xl: 8rem;
    /* 128px */

    /* FONT WEIGHT */
    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    --container-max-width: 100%;
    --container-padding: 0rem;
}

body {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    background-color: #f5f5f5;
    scroll-behavior: smooth;
}

.container {
    width: 100%;
    padding: 0 5%;
    margin-inline: auto;
}

/* Title Generals */

.title {
    color: var(--secondary-color);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-5xl);
    text-transform: uppercase;
}

.subtitle {
    font-style: italic;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: var(--fw-medium);
    font-size: var(--fs-5xl)
}

@media (max-width: 600px ) {
    .title {
        font-size: var(--fs-4xl)
    }

    .subtitle {
        font-size: var(--fs-4xl);
    }
}