@font-face {
    font-family: 'akipertoFont';
    src: url('../assets/fonts/Nexa-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'akipertoFont2';
    src: url('../assets/fonts/Nexa-Light.otf')format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root{
    --primary:#2E7D32;
    --primary-dark:#1B5E20;
    --accent:#FFC107;
    --light:#F8F9FA;
    --dark:#333;
    --max-width:1200px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:var(--dark);
    line-height:1.6;
}

.container{
    width:90%;
    max-width:var(--max-width);
    margin:auto;
}

.container-wide{
    width:95%;
    max-width:1600px;
    margin:auto;
}

a{
    text-decoration:none;
}

img{
    width:100%;
    height: 250px;
    object-fit: contain;
    display:block;
}

.announcement-bar{
    background: #a3d45d;
    color: #32511b;
    text-align: center;
    padding: 10px 20px;
    font-family: 'akipertoFont', sans-serif;
    font-size: 0.9rem;
}

/* HEADER */

header{
    background:#32511b;
    box-shadow:0 2px 4px rgba(0,0,0,.25),
               0 24px 64px rgba(0,0,0,.50);
    position:sticky;
    top:0;
    z-index:1000;
}

.header-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 50px;
    width: 100%;
}

.logo{
    font-size:1.8rem;
    font-weight:bold;
    color:var(--primary);
}

nav ul{
    list-style:none;
    display:flex;
    gap:40px;
}

nav a{
    font-family:'akipertoFont', sans-serif;
    color:#ffffff;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
}

nav a:hover{
    color:#a3d45d
}

.logo img{
    height:35px;
    width:auto;
    display:block;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* HERO */

.hero{
    background: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("/assets/imagens/fundos/hero1.webp");
    background-size:cover;
    background-position:center;
    min-height:70vh;
    display:flex;
    justify-content: center;
    align-items:center;
    color:white;
    margin-bottom: 40px;
    animation: fadeHero 1.2s ease-out;
}

.hero-content{
    max-width:700px;
    text-align: center;
}

.hero h1{
    font-size:4.5rem;
    font-family: 'akipertoFont', sans-serif;
    color:#a3d45d;
    margin-bottom: 15px;
    text-transform:lowercase;
}

.hero p{
    font-size:1.2rem;
    font-family: 'akipertoFont', sans-serif;
    margin-bottom:30px;
    color:#ffffff;
}

.btn{
    display:inline-block;
    background:#a3d45d;
    color:#32511b;
    padding:16px 36px;
    border-radius:8px;
    font-family: 'akipertoFont', sans-serif;
    font-size: 1rem;
    transition: 0.3s ease;
}

.btn:hover{
    background: #b8e36d;
    transform: translateY(-2px);
}

@keyframes fadeHero{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/* SECTIONS */

section{
    padding:80px 0;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    color: #000;;
    font-size:2.2rem;
    margin-bottom:10px;
    text-align: left;
    font-family: 'akipertoFont', sans-serif;
}

/* PROMOTIONS */

.promotions-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.card-content{
    padding:30px;
    font-family: 'akipertoFont', sans-serif;
}

.card-content h3{
    font-family: 'akipertoFont', sans-serif;
    margin: 0 0 5px;
}

.product-name{
    font-family: 'akipertoFont2', sans-serif;
    font-size: 1rem;
    margin:0;
}

.product-size{
    font-family: 'akipertoFont2', sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-top: 2px;
}

.current-price{
    font-family: 'akipertoFont', sans-serif;
    font-size: 2rem;
    color: #000000;
    margin-top: 15px;
    margin-bottom: 2px;
    line-height:1;
}

.old-price{
    font-family: 'akipertoFont2', sans-serif;
    font-size: 1rem;
    color:#666;
    text-decoration: line-through;
}
.card h3{
    margin-bottom:0px;
}

.product-info{
    font-family: 'akipertoFont2', sans-serif;
    padding: 30px;
}

.section-title p{
    font-family: 'akipertoFont2', sans-serif;
    text-align: left;
    font-size: 1.5rem;

}

/* STORES */

.stores{
    background:var(--light);
}

.stores-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.store-card{
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

/* BRANDS */

.brands-grid{
    display:flex;
    grid-template-columns:repeat(8,1fr);
    background:white;
    width:max-content;
    animation: scrollBrands 60s linear infinite;
}

.brand{
    background:white;
    border:1px solid #eee;
    padding:20px;
    text-align:center;
    border-radius:10px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 200px;
    margin-right: 20px;
}

.section-title-center h2{
    text-align:center;
    margin-bottom:50px;
}

.brands-wrapper{
    overflow: hidden;
    width: 100%;
}

.brand img{
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

@keyframes scrollBrands {

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50%));
    }
}

/* FOOTER */

footer{
    background:#222;
    color:white;
    text-align:center;
    padding:40px 20px;
}

.footer-container{
    width:95%;
    max-width: auto;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border-top:1px solid rgba(255,255,255,0.40);
    padding-top: 20px;
}

.footer-container p{
    font-family: 'akipertoFont2', sans-serif;
    font-size:0.9rem;
    margin: 0;
}

.social-links{
    display: flex;
    align-items: center;
    gap: 15px;
}

.social-links img{
    height: 24px;
    width: auto;
    fill:white;
    transition: opacity 0.2s ease transform 0.2s ease;
}

.social-links a:hover img{
    fill: #0866FF;
    opacity:0.8;
    transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:768px){

    .header-container{
        flex-direction:column;
        gap:20px;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero h1{
        font-size:2rem;
    }
}


    

        /* =====================================================
           SOBRE NÓS
        ====================================================== */

        @font-face {

            font-family: 'akipertoFont';

            src: url('../assets/fonts/Nexa-Bold.otf') format('opentype');

            font-weight: 700;

            font-style: normal;

        }


        @font-face {

            font-family: 'akipertoFont2';

            src: url('../assets/fonts/Nexa-Light.otf') format('truetype');

            font-weight: normal;

            font-style: normal;

        }


        /* =====================================================
           VARIABLES
        ====================================================== */

        :root {

            --primary: #2E7D32;

            --primary-dark: #1B5E20;

            --akiperto-green: #32511b;

            --akiperto-light: #a3d45d;

            --accent: #FFC107;

            --light: #F8F9FA;

            --dark: #333;

            --max-width: 1200px;

        }


        /* =====================================================
           RESET
        ====================================================== */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        body {

            font-family: Arial, Helvetica, sans-serif;

            color: var(--dark);

            line-height: 1.6;

        }


        .container {

            width: 90%;

            max-width: var(--max-width);

            margin: auto;

        }


        a {

            text-decoration: none;

        }


        img {

            max-width: 100%;

            display: block;

        }


        /* =====================================================
           ANNOUNCEMENT BAR
        ====================================================== */

        .announcement-bar {

            background: #a3d45d;

            color: #32511b;

            text-align: center;

            padding: 10px 20px;

            font-family: 'akipertoFont', sans-serif;

            font-size: 0.9rem;

        }


        /* =====================================================
           HEADER
        ====================================================== */

        header {

            background: #32511b;

            box-shadow:
                0 2px 4px rgba(0,0,0,.25),
                0 24px 64px rgba(0,0,0,.50);

            position: sticky;

            top: 0;

            z-index: 1000;

        }


        .header-container {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 10px 50px;

            width: 100%;

        }


        .logo img {

            height: 35px;

            width: auto;

            display: block;

            margin-top: 10px;

            margin-bottom: 10px;

        }


        nav ul {

            list-style: none;

            display: flex;

            gap: 40px;

        }


        nav a {

            font-family: 'akipertoFont', sans-serif;

            color: #ffffff;

            font-size: 1rem;

            letter-spacing: 0.05rem;

            font-weight: 700;

            text-transform: uppercase;

            line-height: 1.1;

        }


        nav a:hover {

            color: #a3d45d;

        }


        /* =====================================================
           PAGE HERO
        ====================================================== */

        .about-hero {

            min-height: 42vh;

            background:
                linear-gradient(
                    rgba(50,81,27,.72),
                    rgba(50,81,27,.72)
                ),
                url("../assets/imagens/fundos/hero1.webp");

            background-size: cover;

            background-position: center;

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            color: #ffffff;

            animation: fadeHero 1.2s ease-out;

        }


        .about-hero-content {

            max-width: 800px;

            padding: 60px 20px;

        }


        .about-hero h1 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 4rem;

            color: #a3d45d;

            text-transform: uppercase;

            margin-bottom: 15px;

        }


        .about-hero p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1.5rem;

            color: #ffffff;

        }


        @keyframes fadeHero {

            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }

        }


        /* =====================================================
           INTRODUCTION
        ====================================================== */

        .about-intro {

            padding: 90px 0 70px;

        }


        .about-intro-inner {

            max-width: 900px;

            margin: auto;

            text-align: center;

        }


        .about-label {

            font-family: 'akipertoFont', sans-serif;

            color: #32511b;

            font-size: 0.9rem;

            letter-spacing: 0.12rem;

            text-transform: uppercase;

            margin-bottom: 12px;

        }


        .about-intro h2 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2.4rem;

            color: #000000;

            margin-bottom: 25px;

        }


        .about-intro p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1.25rem;

            line-height: 1.8;

        }


        /* =====================================================
           HISTORY
        ====================================================== */

        .about-history {

            background: #f8f9fa;

            padding: 90px 0;

        }


        .about-section-title {

            margin-bottom: 60px;

        }


        .about-section-title h2 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2.2rem;

            color: #000000;

            margin-bottom: 10px;

        }


        .about-section-title p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1.15rem;

        }


        /* TIMELINE */

        .timeline {

            position: relative;

            max-width: 1000px;

            margin: auto;

        }


        .timeline::before {

            content: '';

            position: absolute;

            left: 50%;

            top: 0;

            bottom: 0;

            width: 2px;

            background: #a3d45d;

            transform: translateX(-50%);

        }


        .timeline-item {

            position: relative;

            width: 50%;

            padding: 20px 50px;

        }


        .timeline-item:nth-child(odd) {

            left: 0;

            text-align: right;

        }


        .timeline-item:nth-child(even) {

            left: 50%;

            text-align: left;

        }


        .timeline-item::after {

            content: '';

            position: absolute;

            top: 30px;

            width: 14px;

            height: 14px;

            background: #32511b;

            border: 4px solid #a3d45d;

            border-radius: 50%;

        }


        .timeline-item:nth-child(odd)::after {

            right: -7px;

        }


        .timeline-item:nth-child(even)::after {

            left: -7px;

        }


        .timeline-year {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2rem;

            color: #32511b;

            margin-bottom: 5px;

        }


        .timeline-item h3 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 1.2rem;

            margin-bottom: 8px;

        }


        .timeline-item p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1rem;

        }


        /* =====================================================
           RECOGNITION
        ====================================================== */

        .about-recognition {

            padding: 90px 0;

        }


        .recognition-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 25px;

        }


        .recognition-card {

            padding: 35px 25px;

            text-align: center;

            background: #ffffff;

            border-radius: 10px;

            box-shadow: 0 4px 15px rgba(0,0,0,.08);

        }


        .recognition-year {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2.3rem;

            color: #32511b;

            margin-bottom: 12px;

        }


        .recognition-card h3 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 1.1rem;

            margin-bottom: 10px;

        }


        .recognition-card p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 0.95rem;

        }


        /* =====================================================
           MISSION
        ====================================================== */

        .about-mission {

            background: #32511b;

            color: #ffffff;

            padding: 100px 0;

        }


        .mission-inner {

            max-width: 950px;

            margin: auto;

            text-align: center;

        }


        .mission-label {

            font-family: 'akipertoFont', sans-serif;

            color: #a3d45d;

            font-size: 0.9rem;

            letter-spacing: 0.12rem;

            text-transform: uppercase;

            margin-bottom: 15px;

        }


        .mission-inner h2 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2.5rem;

            margin-bottom: 25px;

        }


        .mission-inner p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1.35rem;

            line-height: 1.8;

        }


        /* =====================================================
           FINAL STATEMENT
        ====================================================== */

        .about-statement {

            padding: 90px 20px;

            text-align: center;

        }


        .about-statement h2 {

            font-family: 'akipertoFont', sans-serif;

            font-size: 2.6rem;

            color: #32511b;

            margin-bottom: 10px;

        }


        .about-statement p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 1.3rem;

        }


        /* =====================================================
           FOOTER
        ====================================================== */

        footer {

            background: #222;

            color: white;

            text-align: center;

            padding: 40px 20px;

        }


        .footer-container {

            width: 95%;

            margin: auto;

            display: flex;

            justify-content: space-between;

            align-items: center;

            text-align: left;

            border-top: 1px solid rgba(255,255,255,0.40);

            padding-top: 20px;

        }


        .footer-container p {

            font-family: 'akipertoFont2', sans-serif;

            font-size: 0.9rem;

            margin: 0;

        }


        .social-links {

            display: flex;

            align-items: center;

            gap: 15px;

        }


        .social-links img {

            height: 24px;

            width: auto;

            transition:
                opacity 0.2s ease,
                transform 0.2s ease;

        }


        .social-links a:hover img {

            opacity: 0.8;

            transform: translateY(-2px);

        }


        /* =====================================================
           MOBILE
        ====================================================== */

        @media(max-width: 768px) {

            .header-container {

                flex-direction: column;

                gap: 20px;

            }


            nav ul {

                flex-wrap: wrap;

                justify-content: center;

                gap: 20px;

            }


            .about-hero {

                min-height: 35vh;

            }


            .about-hero h1 {

                font-size: 2.5rem;

            }


            .about-hero p {

                font-size: 1.1rem;

            }


            .about-intro {

                padding: 60px 0;

            }


            .about-intro h2 {

                font-size: 1.9rem;

            }


            .about-intro p {

                font-size: 1.1rem;

            }


            /* MOBILE TIMELINE */

            .timeline::before {

                left: 10px;

            }


            .timeline-item,
            .timeline-item:nth-child(even),
            .timeline-item:nth-child(odd) {

                width: 100%;

                left: 0;

                text-align: left;

                padding:
                    20px
                    20px
                    30px
                    45px;

            }


            .timeline-item:nth-child(odd)::after,
            .timeline-item:nth-child(even)::after {

                left: 3px;

                right: auto;

            }


            .recognition-grid {

                grid-template-columns: 1fr 1fr;

            }


            .about-mission {

                padding: 70px 20px;

            }


            .mission-inner h2 {

                font-size: 2rem;

            }


            .mission-inner p {

                font-size: 1.15rem;

            }


            .about-statement h2 {

                font-size: 2rem;

            }


            .footer-container {

                flex-direction: column;

                gap: 20px;

                text-align: center;

            }

        }


        @media(max-width: 480px) {

            .recognition-grid {

                grid-template-columns: 1fr;

            }

        }