/* ==========================================================
   HERO SECTION
   Cozinha das Manas
========================================================== */

/* ==========================
   SECTION
========================== */

.hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#17361e 0%,#184523 100%);

    padding:46px 0 24px;

}

/* ==========================
   CONTAINER
========================== */

.hero-container{

    width:min(1600px,94%);

    margin:0 auto;

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:stretch;

    gap:64px;

    height:620px;

    min-height:620px;

}

/* ==========================
   LEFT SIDE
========================== */

.hero-left{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    animation:heroFade .8s ease;

}

/* ==========================
   BADGE
========================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(212,175,55,.35);

    color:#F6D36B;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

}

/* ==========================
   TITLE
========================== */

.hero-title{
    white-space: pre-line;

    margin:0 0 28px;

    font-family:Georgia,serif;

    font-size:4.2rem;

    line-height:1.05;

    color:#ffffff;

}

.hero-title span{

    color:#D4AF37;

}

/* Classic CDM hero title treatment */
.hero-title .hero-title-small {
    display: block;
    color: #ffffff;
    font-size: .72em;
    line-height: 1.05;
    font-weight: 700;
}

.hero-title .hero-title-large {
    display: block;
    color: #8f9960;
    font-size: 1em;
    line-height: 1.02;
    font-weight: 700;
}

/* ==========================
   DESCRIPTION
========================== */

.hero-description{
    white-space: pre-line;

    max-width:580px;

    margin-bottom:38px;

    color:rgba(255,255,255,.90);

    font-size:1.1rem;

    line-height:1.8;

}

/* ==========================
   BUTTONS
========================== */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:45px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.hero-btn-primary{

    background:#D4AF37;

    color:#17361e;

}

.hero-btn-primary:hover{

    background:#E6C14D;

    transform:translateY(-3px);

}

.hero-btn-secondary{

    color:#ffffff;

    border:2px solid rgba(255,255,255,.35);

}

.hero-btn-secondary:hover{

    background:rgba(255,255,255,.08);

    border-color:#D4AF37;

}

/* ==========================
   TRUST
========================== */

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.hero-trust-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-weight:600;

}

.hero-trust-item i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(212,175,55,.35);

    font-style:normal;

    color:#D4AF37;

}

.hero-trust-item:hover i{

    background:#D4AF37;

    color:#17361e;

}

/* ==========================
   RIGHT SIDE
========================== */

.hero-right{

    /* Desktop: this visual column is anchored to the hero stage itself,
       never to the height/position of the left text column. */
    position:absolute;

    top:0;

    right:4%;

    display:block;

    width:calc(50% - 32px);

    height:620px;

}

.hero-image-wrapper{

    position:absolute;

    top:0;

    right:0;

    left:auto;

    transform:none;

    width:500px;

    max-width:500px;

    height:500px;

    min-height:500px;

    aspect-ratio:1 / 1;

    border-radius:28px;

    overflow:hidden;

    border:3px solid #D4AF37;

    box-sizing:border-box;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center top;

    display:block;

    transition:none;

}

.hero-image-wrapper:hover .hero-image{

    transform:none;

}

/* ==========================
   HALAL BADGE
========================== */

.hero-halal{

    position:absolute;

    top:22px;

    right:22px;

    background:#ffffff;

    color:#17361e;

    border:2px solid #D4AF37;

    border-radius:999px;

    padding:12px 22px;

    font-weight:700;

    z-index:10;

}

/* ==========================
   HERO DOTS
========================== */

.hero-dots{

    position:absolute;

    top:50%;

    right:15px;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

    z-index:30;

}
.hero-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    cursor:pointer;

    transition:all .35s ease;

}

.hero-dot:hover{

    background:#D4AF37;

    transform:scale(1.15);

}

.hero-dot.active{

    width:12px;

    height:42px;

    border-radius:999px;
    
    background:#D4AF37;
}

/* ==========================
   ANIMATION
========================== */

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   TABLET / SMALL DESKTOP — keep the square artwork intact
========================================================== */

@media (max-width: 1100px) and (min-width: 769px) {
    .hero-container {
        height: 560px;
        min-height: 560px;
    }

    .hero-right {
        top: 0;
        right: 4%;
        width: calc(50% - 20px);
        height: 560px;
    }

    .hero-image-wrapper {
        width: min(500px, 100%);
        max-width: 500px;
        height: 450px;
        min-height: 450px;
    }

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center top;
    }
}

/* ==========================================================
   MOBILE HERO — responsive fix
   Desktop styles above remain unchanged.
========================================================== */

@media (max-width: 768px) {
    .hero {
        padding: 52px 0 58px;
    }

    .hero-container {
        width: min(94%, 680px);
        display: flex;
        flex-direction: column;
        gap: 34px;
        height: auto;
        min-height: 0;
        align-items: stretch;
    }

    .hero-left {
        width: 100%;
        justify-content: flex-start;
    }

    .hero-title {
        font-size: 2.55rem;
        line-height: 1.08;
        margin-bottom: 20px;
    }

    .hero-title .hero-title-small {
        font-size: .72em;
    }

    .hero-title .hero-title-large {
        font-size: 1em;
    }

    .hero-description {
        max-width: none;
        margin-bottom: 28px;
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-buttons {
        gap: 12px;
        margin-bottom: 28px;
    }

    .hero-btn {
        padding: 14px 24px;
    }

    .hero-trust {
        gap: 10px 14px;
    }

    .hero-trust-item {
        gap: 8px;
        font-size: .88rem;
    }

    .hero-trust-item i {
        width: 38px;
        height: 38px;
    }

    .hero-right {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }

    .hero-image-wrapper {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        border-radius: 22px;
    }

    .hero-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        object-position: center center;
    }

    .hero-halal {
        top: 14px;
        right: 14px;
        padding: 9px 14px;
        font-size: .82rem;
    }

    .hero-dots {
        top: auto;
        right: 50%;
        bottom: 18px;
        transform: translateX(50%);
        flex-direction: row;
        gap: 8px;
    }

    .hero-dot,
    .hero-dot.active {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .hero-dot.active {
        width: 28px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 42px 0 52px;
    }

    .hero-container {
        width: 92%;
        gap: 28px;
    }

    .hero-badge {
        padding: 10px 18px;
        margin-bottom: 20px;
        font-size: .78rem;
    }

    .hero-title {
        font-size: 2.15rem;
        line-height: 1.08;
    }

    .hero-description {
        font-size: .98rem;
        line-height: 1.65;
    }

    .hero-buttons {
        margin-bottom: 22px;
    }

    .hero-btn {
        padding: 13px 19px;
        font-size: .92rem;
    }

    .hero-image-wrapper {
        border-radius: 18px;
    }

    .hero-image {
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .hero-halal {
        top: 10px;
        right: 10px;
        padding: 8px 11px;
        font-size: .72rem;
    }

    .hero-dots {
        bottom: 14px;
    }
}