/*--page--*/
html {
    scroll-behavior: smooth;
}
* {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 !important;
    color: #070707;
}
body {
    background-color: #F4EFE4;
    margin: 0 !important;
}
/*menu*/
.menu-body {
padding: 2% 25% 29px 25%;
background-color: #070707;
border-top: white solid .1px;
display: flex;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 4%;
flex-wrap: wrap;
gap: 10px 40px;
}
.menu-body h2,
.menu-body h3,
.menu-body p {
  grid-column: 1 / span 12;
  color: white;
}

.menu-body p {
font-size: 17px;
line-height: 25px;
}
.menu-column1 {
    grid-column: 1/ span 6;
}
.menu-column2 {
    grid-column: 7/ span 6;
}

.menu-h3{
    grid-column: 1/ span 12;
    padding: 30px 0 5px 0;
    border-bottom: white solid 2px;
    font-size: 24px;
    font-weight: 700;
    line-height: 200%;
}
.menu-body strong {
    display: block;
    padding: 20px 0 5px 0;
    line-height: 20px;
    font-size: 20px;
    font-weight: 900;
    color: white;
}

/*menu-navigation*/
.navigation {
  display: flex;
  justify-content: center;
  gap: 40px;                   
  list-style: none;       
  padding: 20px 0;
  margin: 0;
  background-color: #070707;
}
.navigation li {
  list-style: none;
}
.navigation a {
  font-size: 1.4em;
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  transition: .2s ease-in-out;
}
.navigation a:hover,
.navigation a:focus {
  color: #F082AC;
}

/*--fonts--*/
h2 {
    font-size: 4em;
    color: #070707;
}
h4 {
    font-size: 24px;
    color: #070707;
}
p {
    font-family: "Nunito Sans", sans-serif;
    font-weight: 300;
    font-size: 20px;
    font-style: normal;
    line-height: 40px;
    color: #070707;
}

/*header*/
header {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-gap: 7%;
  padding: 2% 2%;
  overflow: hidden;
  background-color: #FDD94B;
  border-bottom: solid #FA66A8 9px;
}

header a img {
    grid-column: 8/ span 2;
    grid-row: 1/span 1;
}
header nav{
    grid-column: 1/span 6;
    grid-row: 1/span 1;
}
.socials {
    grid-column: 12/span 2;
    grid-row: 1/span 1;
    display: flex;
    justify-content: flex-end;
    padding: 2%;
}
.socials a {
    padding-left: 18%;
}
header nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: auto;
}
header nav li a:link, header nav li a:visited {
    font-size: 1.4em;
    color: #070707;
    text-decoration: none;
    padding: 2em 10px;
    justify-content: flex-start;
    transition: .2s ease-in-out
}
header a img:hover,
header a img:focus {
    color:#F082AC
}
header nav li a:hover,
header nav li a:focus {
  color: #F082AC;
}

/*footer*/
.footer {
    text-align: center;
    padding: 2%;
    background-color: #FDD94B;
    border-top: solid #FA66A8 9px;
    font-size: 10px !important;
    height: 50px;
    padding-bottom: 4%;
    overflow: hidden;
}
.footer h5 {
    font-size: 17px;
    line-height: 45px;
}

/*hero*/
.hero {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 7em);
display: grid;
background-image: url(images/headercover.png);
background-size: cover;
padding: 6% 15%;
}
.hero h1 {
color: white;
text-align: right;
grid-row: 4/span 2;
grid-column: 5/span 9;
font-size: 11em;
line-height: 190px;
}

.menu {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 7em);
display: grid;
background-image: url(images/banner-el-diablo.png);
background-size: cover;
padding: 6% 15%;
background-repeat: no-repeat;
background-position: center;
}
.menu h1 {
color: white;
text-align: right;
grid-row: 4/span 2;
grid-column: 5/span 9;
font-size: 11em;
line-height: 190px;
}
.menu p {
color: white !important;
text-align: left;
grid-row: 5/span 1;
grid-column: 1/4;
}

/*--first row--*/
.our-treat {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 50px;
}
.text-section {
grid-column: 1/span 6;
padding: 10% 0;
padding-left: 38%;
}
.text-section h2 {
color: #070707 !important;
padding-bottom: 4%;
}
.image-section {
grid-column: 7/span 6;
}
.image-section img {
max-height: 100%;
max-width: 100%;
}

/*second-row*/
.the-menu {
background-image: url(images/collumcovercakeandwater.png);
background-size: cover;
text-align: center;
padding: 60px 18% 90px 18%;
background-color: #070707;
grid-template-rows: repeat(5, 1fr);
grid-gap: 4%;
}
.the-menu h2 {
    color: white;
    grid-row: 1/span 1;
    padding-bottom: 2%;
    padding-top: 2%;
}
.the-menu p {
    color: white;
    grid-row: 2/span 2;
    padding-bottom: 2%;
}
button {
  grid-row: 4/span 1;
  background-color: #EA4C89;
  font-family: "Kosugi Maru";
  color: white;
  font-size: 20px;
  transition: .3s ease-in-out;
  padding: 2% 4% 2% 4% !important;
  border: none;
  outline: none;

} 
button:hover,
button:focus {
  background-color: #F082AC;
}

/*third-row*/
.fufilling-your-cravings {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 4%;
    box-sizing: border-box;
    padding: 95px 18% 4% 18%;
    color: #070707;
}
.title {
    grid-column: 1/span 12;
    grid-row: 1/span 1;
}
.fufilling-your-cravings h2{
    grid-column: 1/span 12;
}
.column-1{
    grid-column: 1/span 9;
    grid-row: 2/span 2;

}
.column-2{
    grid-column: 10/span 12;
    grid-row: 2/span 2;
}

/*forth-row*/
.circles {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 4%;
    padding: 0 18%;
    padding-bottom: 95px;
}
.circles img {
max-width: 100%;
}
.circles h4 {
    text-align: center;
    padding: 4% 0;
}
.colorful-drinks {
    grid-column: 1/span 4;
}
.sweet-treats {
    grid-column: 5/span 4;
}
.tasteful-memories {
    grid-column: 9/span 4;
}

/*fifth-row*/
.call-to-action {
background-image: url(images/calltoactionbanner.png);
background-size: cover;
background-color: #070707;
padding: 60px 18% 90px 18%;
grid-template-rows: repeat(3, .1fr);
grid-template-columns: repeat(12, 1fr);
display: grid;
grid-gap: 4%;
text-align: left;
}
.call-to-action h2 {
    color: white;
    grid-row: 1/span 1;
    padding-bottom: 2%;
    padding-top: 2%;
    grid-column: 1/span 5;
}
.call-to-action p {
    color: white;
    grid-row: 2/span 1;
    grid-column: 1/span 6;
}
.call-to-action button {
    grid-row: 3/span 1;
    grid-column: 1/ span 4;
  padding: 2% 4% 2% 4% !important;
}
.call-to-action strong {
    color: white;
}
.map {
    grid-column: 7/span 6;
    grid-row: 2/span 1;
}