*,::before,::after{margin: 0; padding: 0; box-sizing: border-box;}
a{ text-decoration: none; color: inherit;}
canvas,img,video{ vertical-align: bottom;}
ul{ list-style: none; padding: 0;}
button{ cursor: pointer; padding: 0;}
label{ display: inline-block;}
:disabled{ cursor: not-allowed;}


@font-face {
    font-family: roboto;
    src: url(../font/Roboto-Regular.ttf);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: roboto;
    src: url(../font/Roboto-Bold.ttf);
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: roboto;
    src: url(../font/Roboto-Light.ttf);
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: roboto;
    src: url(../font/Roboto-Medium.ttf);
    font-weight: 100;
    font-display: swap;
}
html{ font-size: 15px;     scroll-behavior: smooth; scroll-padding-top: 80px;
    --ff: roboto, sans-serif;
    --green:#95e1d3;
    --grad:linear-gradient(#f38181e6, #fce38ae6);
  }

body{ font:16px/1.3 var(--ff);}
.container{ max-width: 1230px; margin: auto;}

.row{ display: flex; flex-flow: row wrap;}
[class^="col-"]{ flex: 1 0 auto;  }
.col-1{ flex-basis: 8.33%; max-width: 8.33%; }
.col-2{ flex-basis: 16.66%; max-width: 16.66%; }
.col-3{ flex-basis: 25%; max-width: 25%; }
.col-4{ flex-basis: 33.3336%; max-width: 33.3336%;}
.col-5{ flex-basis: 41.66%; max-width: 41.66%;}
.col-6{ flex-basis: 50%; max-width: 50%;}
.col-7{ flex-basis: 58.33%; max-width: 58.33%;}
.col-8{ flex-basis: 66.66%; max-width: 66.66%;}
.col-9{ flex-basis: 75%; max-width: 75%;}
.col-10{ flex-basis: 83.33%; max-width: 83.33%;}
.col-11{ flex-basis: 91.66%; max-width: 91.66%;}
.col-12{ flex-basis: 100%; max-width: 100%;}
.col-auto{ flex-basis: 20%; max-width: 20%;}
.flex{ display: flex;}
.justify-space-between{ justify-content: space-between;}
.justify-right{ justify-content: right;}
.justify-center{ justify-content: center;}
.align-items{ align-items: center;}

::-webkit-scrollbar {
    width: 4px;
    background: #333131;
}
::-webkit-scrollbar-thumb {
  background: #ffd7ad;
  border-radius: 4px;
}

  /* Layout*/

.wrap-1 nav a { font-size: 16px; display: block;}
.wrap-1 nav li { margin: 10px 25px; color: #ffd7ad;}
.wrap-1 ul{justify-content: center;align-items: center; background-color: #4a1831;}
.sticky{position: fixed; top: 0; width: 100%; z-index: 100;}
.m-logo{justify-content: none; }

.banner { background: url(images/banner.webp) no-repeat center/cover;color: #ffd7ad;}
.logo { margin: 20px;}
.edit h1 { font-size: 5rem;}
.banner button { margin-top: 1rem; width: 180px; padding: 8px; font-weight: bold;
    font-size: 16px; border-radius: 15px; color: #4a1831; border: none;
    box-shadow: 0 0 40px 40px #fff inset, 0 0 0 0 #fff;
    transition: all 150ms ease-in-out;
    &:hover {
      box-shadow: 0 0 10px 0 #ffd7ad inset, 0 0 10px 4px #ffd7ad;
    }
}
.edit { margin: 2rem;}
.edit p {margin: 2rem 0; font-size: 1.5rem;}

.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);color: #ffd7ad; 
    background-color: #4a1831; padding: 20px; border: 1px solid #ddd;border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: none;}
.popup ol{ padding: 20px;}
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0); display: none;}


.wrap-2{ text-align: center; color: #4a1831;}
.section{margin: 80px;}
.section{font-size: 2rem;}
.full{ background: #ffd7ad;}
.btn{margin-top: 1rem; width: 150px; padding: 8px; font-weight: 600;
    font-size: 16px; border-radius: 15px; color: #fff; background: #4a1831; border: none;
    box-shadow: 0 0 40px 40px #4a1831 inset, 0 0 0 0 #fff;
    transition: all 150ms ease-in-out;
    &:hover {
        background-color: #fff; color: #4a1831;
        box-shadow: 0 0 10px 0 #4a1831 inset, 0 0 10px 4px #4a1831;
    }
}

.wrap-4{ background: #ffd7ad; color: #4a1831;}
.about-4{margin: 60px 0 0 10px;}
.about { margin: 125px 0px 0 0; padding-left: 30px;}
.about h2 { font-size: 4rem;}
.about p { font-size: 2rem;}
.about button {margin-top: 1rem; width: 180px; padding: 8px; font-weight: 600;
    font-size: 16px; border-radius: 15px; color: #fff; background: #4a1831; border: none; 
    box-shadow: 0 0 40px 40px #4a1831 inset, 0 0 0 0 #fff;
    transition: all 150ms ease-in-out;
    &:hover {
        background-color: #fff; color: #4a1831;
      box-shadow: 0 0 10px 0 #4a1831 inset, 0 0 10px 4px #4a1831;
    }
}
.wrap-4 span{font-size: 5rem; font-weight: bold; padding: 0; color: #4a1831;}  
.discount{margin: 80px 20px; position: relative;}  
.absolute { position: absolute; top: 10px; left: 71px; }
.discount{font-weight: 700;}
 .wrap-4 .red{color: #e63956;}
.wrap-4 .blue{color: #6cc5ac;}
.col-4 ,.col-8{ padding: 0;}
.image img{ width: 95%; height: auto; margin: auto auto;}
.image{ margin: 0 20px auto 150px;}

.wrap-5{ background: #4a1831; color: #ffd7ad;}
.about-1 button {margin-top: 1rem; width: 180px; padding: 8px; font-weight: 600;
    font-size: 16px; border-radius: 15px; color: #4a1831; background: #ffd7ad; border: none;
    box-shadow: 0 0 40px 40px #ffd7ad inset, 0 0 0 0 #fff;
    transition: all 150ms ease-in-out;
    &:hover {
        background-color: #fff; color: #4a1831;
      box-shadow: 0 0 10px 0 #ffd7ad inset, 0 0 10px 4px #ffd7ad;
    }
}
.about-1{margin: 240px 0px; padding: 0 5px 0 30px;}
.about-1 h1 { font-size: 4rem;}
.about-1 p { font-size: 2rem;}
.wrap-5 img{ margin-top: 50px;}


.wrap-6{background: url(images/m-food.png) ;}
.logo-2{text-align: center; justify-content: center;
    background: rgba(17, 12, 20, 0.6); padding: 100px;}
.pedro{color: #ffd7ad; font-size: 2rem; margin-top: 25px;} 
.pedro h3{margin: 30px;}   


.wrap-7{ text-align: center; color: #4a1831;}
.offer{padding: 80px;}
.offer{font-size: 2rem;}
.offer button{ border: none; border-radius: 20px; padding: 10px; color: #ffd7ad; 
    background: #4a1831; margin-left: -35px; width: 100px; margin-top: 80px; font-weight: 600;
    box-shadow: 0 0 40px 40px #4a1831 inset, 0 0 0 0 #fff;
    transition: all 150ms ease-in-out;
    &:hover {
        background-color: #fff; color: #4a1831;
      box-shadow: 0 0 10px 0 #4a1831 inset, 0 0 10px 4px #4a1831;
    }}
.offer form>input{ border: none; border-radius: 20px; padding: 10px; width: 25%;}
.offer form>input:hover{box-shadow: 0px 0px 15px #24242480; }


.footer{ background: #4a1831; color: #ffd7ad; padding: 50px;}
.icon{ font-size: 30px; margin-top: 15px; border-radius: 50%;}
.col-5{padding: 10px;}
.footer-text{font-size: 15px;}
.footer-text h3{ margin-bottom: 15px;}
.fa-brands{border-radius: 50%;}
.fa-solid{margin-top: 25px;}
.arrow{text-align: center;}


/* responsive */

@media screen and (max-width:1220px) {
    html {font-size: 14px;}
    .wrap-1 nav a { font-size: 12px; display: block;}
    .absolute { position: absolute; top: 0px; left: 90px;}
    .image{margin: 20px 0 0 auto;}
    .about-1{margin: 185px 0px; padding: 0 0 0 30px;}
    .about-4 img{width: 95%; height: auto;}
}

@media screen and (min-width:980px) { 
    .about-5 img{width: 100%; height: auto; margin: 110px auto auto 0;}
}

@media screen and (max-width:980px) {
    .col-t-12{ flex-basis: 100%; max-width: 100%;}
    .col-m-12{ flex-basis: 100%; max-width: 100%;}
    .absolute { position: absolute; top: 5px; left: 20px; font-size: 40px;}
    .about {
        margin: 80px 0px 0 0;
        padding-right: 100px;
    }
    .about-4 img{width: 90%; height: auto; margin-left: 175px; }
    .about-4 .image img {margin: auto auto auto 150px;}
    .wrap-4 span{font-size: 4rem; font-weight: bold;}
    .about h2 { font-size: 3rem;}
    .about-1 h1 { font-size: 3rem;}
    .about-1 p { font-size: 1.5rem;}
    .about p { font-size: 1.5rem;}
    .col-t-6{ flex-basis: 50%; max-width: 50%;}
    .col-t-12{ flex-basis: 100%; max-width: 100%;}
    .about-5 img{width: 100%; height: auto; margin: 110px auto auto 0;}
    .image img { width: 87%; height: auto; margin: auto auto; margin-left: 215px;}
}

@media screen and (max-width:769px) {
    html { font-size: 13px;}
    .col-t-6{ flex-basis: 50%; max-width: 50%;}
    .col-t-12{ flex-basis: 100%; max-width: 100%;}
    .col-m-12{ flex-basis: 100%; max-width: 100%;}
    .about-4{margin: 60px 0 0 auto;}
    .about-4 img {margin: auto auto auto 150px;}
    .image img{ width: 135%; height: auto; margin-left: 0;}
    .about h2, .about-1 h1 { font-size: 2rem;}
    .about-1 p, .about p { font-size: 1.25rem; padding: 0 5px 0 0;}
    .about{margin: 70px 0px 0 0px; padding: 0 30px;}
    .image{ margin: 0 20px auto 150px;}
    .wrap-4 span{font-size: 3rem; font-weight: bold;}
    .about button, .about-1 button {margin-top: 0.8rem; width: 150px; padding: 5px; font-weight: 300;font-size: 12px;}
    .section p{font-size: 1.3rem;}
    .section h2{font-size: 1.8rem;}
    .section{margin: 40px;}
    .ftr{padding: 15px 15px 15px 0;}
    .absolute { position: absolute; top: 5px; left: 20px; font-size: 30px;}
    .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
         color: #ffd7ad; background-color: #4a1831; padding: 20px; border: 1px solid #ddd;border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: none; overflow-y: auto; height: 70%; width: 80%; }
    .popup ol{ padding: 20px;}
    /* .popup span{font-size: 24px; font-weight: 600; } */
    .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0); display: none;}
}

@media screen and (max-width:460px) {
    .logo { margin-top: 45px;}
    .wrap-1 nav li { margin: 8px 9px;}
    .edit{margin: auto 1.3rem 1rem;}
    .edit h1 { font-size: 3rem;}
    .edit p { margin: 1rem 8rem 1.5rem auto;}
    .edit p {font-size: 1.15rem; }
    .pedro h3{margin: 15px;}
    .pedro {font-size: 1.3rem;}
    .logo-2{ padding: 40px;}
    .offer{padding: 30px; font-size: 1.25rem;}
    .offer button{ margin-left: -30px; width: 77px; margin-top: 30px;}
    .offer form>input{ border: none; border-radius: 20px; padding: 10px; width: 45%;}  
    .footer{padding: 30px;}
    .col-p-11{flex: none; flex-basis: 100%; max-width: 80%; text-align: center; justify-content: center;}
    .absolute { position: absolute; top: -12px; left: 25px; font-size: 20px;}
    .col-p-12{ flex-basis: 100%; max-width: 100%;}
    .about-5 img {margin: 0px auto 25px 85px; width: 110%; height: auto;}
    .about-1{ margin: 50px 0;}
    .about-4 img{width: 120%; height: auto; }
    .about-4 img {margin: auto auto auto 90px;}
    .wrap-4 span{font-size: 2.3rem; font-weight: bold;}
}

@media screen and (max-width:400px){
    .logo { margin-top: 45px;}
    .wrap-1 nav li { margin: 8px 14px;}
    .col-p-12{ flex-basis: 100%; max-width: 100%;}
    .about-1{margin: 35px 0;}
    .about-4 img {margin-top: -25px;}
    .about-5 img {margin: 0px auto 25px 65px;}
    .image img{ width: 185%; height: auto;}
    .logo-2{ padding: 40px;}
    .pedro h3{margin: 15px;} 
    .offer{padding: 30px;}
    .offer button{ margin-left: -30px; width: 77px; margin-top: 30px;}
    .offer form>input{ border: none; border-radius: 20px; padding: 10px; width: 45%;}  
    .footer{padding: 20px;}
    .col-m-12{ flex-basis: 100%; max-width: 100%;}
    .about{margin: 25px auto 0 0;}
    .absolute { position: absolute; top: -35px; left: 15px; font-size: 20px; }
}

/* @media screen and (max-width:350px){
    .wrap-1 nav li { margin: 10px 9px;}
    .wrap-2{ margin: -10px -44px;}
    .col-p-12{ flex-basis: 100%; max-width: 100%;}
    .about-1{margin: 35px 0;}
    .about{margin: 25px auto auto 60px;}
    .about-5 img {margin: 0px auto 25px 75px;}
    .logo-2{ padding: 100px;}
    .pedro h3{margin: 15px;} 
    .offer{padding: 30px;}
    .offer button{ margin-left: -30px; width: 77px; margin-top: 30px;}
    .offer form>input{ border: none; border-radius: 20px; padding: 10px; width: 35%;}  
    .footer{padding: 30px;}
} */