/* ====== IMPORTS ====== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap');

/* Fontes locais */
@font-face {
    font-family: 'Riga';
    src: url('../font/Riga.ttf') format('truetype');
}

@font-face {
    font-family: 'Riga Light';
    src: url('../font/Riga-Light.ttf') format('truetype');
}


/* Animação opcional */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-100px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes floatLogo {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(-10deg);
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }

}


/* =============================
ANIMAÇÃO CENTRO
============================= */

@keyframes zoomIn {

    from {

        opacity: 0;
        transform: scale(0.85);

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}



.favicon-float {
    position: absolute;
    background-image: url('../img/criativo.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
    animation: float 20s infinite ease-in-out;
}

.favicon1 {
    top: 10%;
    left: 15%;
    width: 60px;
    height: 60px;
    animation-duration: 22s;
}

.favicon2 {
    top: 40%;
    left: 70%;
    width: 40px;
    height: 40px;
    animation-duration: 18s;
}

.favicon3 {
    top: 70%;
    left: 30%;
    width: 50px;
    height: 50px;
    animation-duration: 24s;
}

.favicon4 {
    top: 20%;
    left: 50%;
    width: 45px;
    height: 45px;
    animation-duration: 20s;
}

.favicon5 {
    top: 60%;
    left: 80%;
    width: 35px;
    height: 35px;
    animation-duration: 26s;
}

.favicon6 {
    top: 80%;
    left: 10%;
    width: 55px;
    height: 55px;
    animation-duration: 23s;
}

.favicon6 {
    top: 80%;
    left: 10%;
    width: 55px;
    height: 55px;
    animation-duration: 23s;
}

.favicon7 {
    top: 50%;
    left: 10%;
    width: 55px;
    height: 55px;
    animation-duration: 13s;
}

.favicon8 {
    top: 80%;
    left: 50%;
    width: 55px;
    height: 55px;
    animation-duration: 7s;
}


.favicon9 {
    top: 80%;
    left: 90%;
    width: 55px;
    height: 55px;
    animation-duration: 25s;
}

.favicon10 {
    top: 80%;
    left: 10%;
    width: 55px;
    height: 55px;
    animation-duration: 23s;
}

/* ==============================
   Global Styles - LogiSmart
   ============================== */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

html {
    scroll-behavior: smooth;
}


/* ==============================
   CSS Variables
   ============================== */

:root {
    --primary-color: #277f9d;
    --primary-plus: #0d2b3527;
    --secondary-color: #fbae2f;
    --background-light: #ffffff;
    --text-color: #fffdfd;
    --text-dark: #1e293ba8;
    --text-light: #e2e8f0;
    --text-muted: #64748b;
    --white: #ffffff;

    /* BACKGROUNDS */
    --background-primary: linear-gradient(135deg, #277f9d, rgb(35, 122, 151));
    --background-dark-soft: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --background-gold: linear-gradient(135deg, #b8860b, #daa520);

    /* RADIAL */
    --radial-dark: radial-gradient(circle at center, #1e293b 0%, #0f172a 70%);
    --radial-glow-gold: radial-gradient(circle at center, rgba(218, 165, 32, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    --radial-spotlight: radial-gradient(circle at top, rgba(255, 255, 255, 0.1), transparent 60%);


    /* SHADOWS */
    --shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* UI */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: all 0.3s ease;
}


.gradient {
    background: var(--background-primary);
    background-size: contain;
    background-repeat: no-repeat;
}


/* ==============================
   Typography
   ============================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: var(--text-dark);
}


/* ==============================
   Buttons
   ============================== */

.open-modal {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #1e90ff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}


.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    text-decoration: none;
}


.btn-primary {
    background: var(--primary-color);
    color: var(--white);
    border-radius: 10px;
    padding: 4px;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

.main-dashboard {
    display: flex;
    background-color: var(--background-light);
    height: 100%;
}

.main-dashboard-container{
    display: flex;
    justify-content: center;
    width: 100%;
}


/* ==============================
   Utilities
   ============================== */

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}


/* ==============================
   Responsive
   ============================== */

@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }
}



/* ====== SLIDESHOW BACKGROUNDS ====== */
.slide-1 {
    /* background-image: url('../img/1366x768.JPG'); */
    background-image: url('https://garagem360.com.br/wp-content/uploads/2023/12/files2F2Fimage_4732f52d-250d-49fd-b6ab-fd0c92705613.jpg');
    background-position: bottom;
}

.slide-2 {
    /* background-image: url('../img/1366x768-2.JPG'); */
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnsRB6dK0XIeel1ZfmNxNfybtJo7e8xQ4mjg&s');
}

.slide-3 {
    background-image: url('https://fatoregional.com.br/wp-content/uploads/2020/09/carros-1024x893.jpeg');
}

/* Celulares */
@media (max-width: 800px) {
    .slide-1 {
        /* background-image: url('../img/320x460.JPG'); */
        background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSsL-i0L2WmM0yrMYCNXrE4xgKPtmABrg_M1w&s');
    }

    .slide-2 {
        /* background-image: url('../img/320x460-2.JPG'); */
        background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQ6VTzuW0C20f6Xe8BMPTzguyJFmIVKMlRNA&s');
    }

    .slide-3 {
        background-image: url('https://image1.mobiauto.com.br/images/api/images/v1.0/594238977/transform/fl_progressive,f_webp,q_70,w_750');
    }
}