/****************************************/
/*  HEADER  */
/***************************************/
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #d2ba91;
    /*Sticky header*/
    height: 9.6rem;
    padding: 0 4.8rem;
    position: relative;
    margin-bottom: 0;
    border-bottom: none !important;
}

.logo {
    height: 2.8rem;
    margin-left: 11.8rem;
}

/****************************************/
/*  NAVIGATION  */
/***************************************/
.main-nav-list {
    list-style: none; /*get rid of the bullet points */
    display: flex; /* display elements side by side */
    align-items: center;
    gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
    display: inline-block;
    text-decoration: none; /*remove default text style */
    color: #333;
    font-weight: 500;
    font-size: 1.8rem;
    transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
    color: #866d45;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited{
    padding: 1.2rem 2.4rem;
    border-radius: 9px;
    color: #fff;
    background-color: #997d4e;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active{
    background-color: #866d45;
}

/*========== Mobile ==========*/

.btn-mobile-nav {
    border: none;
    background: none;
    cursor: pointer;

    display: none;
}

.icon-mobile-nav {
    height: 4.8rem;
    width: 4.8rem;
    color:#333;
}

.icon-mobile-nav[name="close-outline"] {
    display: none;
}

/*========== Button Dark/Light ==========*/
/*.change-theme{
    font-size: 1.25rem;
    color:var(--title-color);
    margin-right: var(--mb-1);
    cursor: pointer;
}

.change-theme:hover{
    color: var(--first-color);
}
*/

/****************************************/
/*  HERO SECTION  */
/***************************************/
.section-hero {
    background-color: #d2ba91;
    padding: 4.8 0 9.6rem 0; /*when a html elem has a background color, we always use padding!; resized the bottom and sides of the html element */
}

.hero { /*the hero class helps us adjust the two boxes equally on a css grid with two columns*/
    max-width: 130rem; /*we use max-width to adjust the 2 boxes fully on the two columns from the css grid*/
    margin: 0 auto;
    padding: 0 3.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9.6rem; /*gap between the two boxes (columns) */
    align-items: center; /*because we have a box (or 2 boxes in this case) and we use a grid container, we can just align items in the center */
}

.hero-description {
    font-size: 2.7rem;
    line-height: 1.5;
    margin-bottom: 4.8rem;
}

.hero-img {
    width: 100%; /*we use this width to adjust the image to the page, so when the page shrinks the images shrinks aswell equally */
    border-radius: 50%;/*make the img round */ 
    height: 58.1rem; /*make a the img a square */
    width: 60.1rem; /*make a the img a square */
    margin-bottom: 4.8rem;
}

.people-visited {
    display: flex;  /*side by side with the paragraph */
    margin-top: 8rem;
    align-items: center;
    gap: 1.6rem;
    margin-top: 8rem;
}

.people-imgs {
    display: flex;
}

.people-imgs img {
    height: 4.8rem; /*make a the img a square */
    width: 4.8rem; /*make a the img a square */
    border-radius: 50%;/*make the img round */ 
    margin-right: -1.6rem;
    border: 3px solid #ccb081;
}

.people-imgs img:last-child { /*last-child is a pseudo class */
    margin: 0;
}

.people-visited-text {
    font-size: 1.8rem;
    font-weight: 500;
}

.people-visited-text span {
    color:#604e31;
    font-weight: 600;
}

/****************************************/
/*  COLLABORATIONS  */
/***************************************/

.section-collaborations {
    padding: 4.8rem 0 3.2rem 0;
}

.heading-collaborations-in {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 2.4rem;
    color: #999;
}

.logos {
    display: flex;
    justify-content: space-around; /*put space around the images*/

}

.logos img {
    height: 5rem;
    opacity: 50%;
}

/****************************************/
/*  ABOUT US SECTION  */
/***************************************/

.section-about-us {
    padding: 9.6rem 0;
}

.step-description {
    font-size: 1.8rem;
    line-height: 1.8;
}

.step-img-box{
    position: relative; /*part 1 centering technique*/
    display: flex; /*the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space*/
    align-items: center; /*Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins:  */
    justify-content: center; /*used to align elements at the center of a page */
} 

.step-img-box::before,
.step-img-box::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute; /*part 2 centering technique*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step-img-box::before{
    width: 95%;
    /*height: 80%; */
    /*93% of parent's width */
    padding-bottom: 93%;
    background-color:#f9f5ef ;
    z-index: -2; /*puts the circle behind the actual image from the parent element step img box */
}

.step-img-box::after {
    width: 80%;
    padding-bottom: 83%;
    background-color: #ece1d0;
    z-index: -1;
}

.step-img{
    width: 70%;
    z-index: 10;
}

.step-number {
    font-size: 8.6rem;
    font-weight: 500;
    color:#ddd;
    margin-bottom: 1.2rem;
}

.margin-bottom-md {
    margin-bottom: 9.8rem !important;
}

.all-gallery {
    text-align: center;
    font-size: 3.8rem;
}

/****************************************/
/*  MEALS SECTION  */
/***************************************/

.section-meals {
    padding: 2.4rem 0;
}

.meal {
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
    border-radius: 11px;
    overflow: hidden;
    transition: all 0.4s;
}

.meal:hover {
    transform: translateY(-1.2rem);
    box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

.meal-content {
    padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}

.meal-tags {
    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.4rem;
}

.tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    background-color: #51cf66;
    color: #333;
    border-radius: 100px;
    font-weight: 600;
}

.tag--romania {
    background-color: #51cf66;
}

.tag--valeaIadului {
    background-color: #d2ba91;
}

.meal-title {
    font-size: 2.4rem;
    color: #333;
    font-weight: 600;
    margin-bottom: 3.2rem;
}

.meal-attributes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.meal-attribute {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap:1.6rem;
}

.meal-img {
    width: 100%;
}

.meal-icon {
    height: 2.4rem;
    width: 2.4rem;
    color: #bf9c62;
}

.all-recipes {
    text-align: center;
    font-size: 1.8rem;
}

/****************************************/
/*  GALLERY&TESTIMONIALS SECTION  */
/***************************************/

.section-testimonials {
    background-color: #f2ebe0; 
    grid-template-columns: 55fr 45fr;
    align-items: center;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem; /*add spacing between images */
    padding: 5.6rem;
}

.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    display: block; /*get rid of the space between photos*/
    width: 100%;
    transition: all 0.3s;
}

.gallery-item img:hover {
    transform: scale(1.1);
}

/****************************************/
/*  PRICING SECTION  */
/***************************************/

.section-pricing {
    padding: 3.2rem 0; 
}

.plan-header {
    text-align: center;
    margin-bottom: 4.8rem;
}

.plan-name {
    color:#cf711f;
    font-weight: 600;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.75;

}

.pricing-plan {
    border-radius: 11px;
    width: 35%;
    margin-right: auto;
    margin-left: auto;
}

.pricing-plan--starter {
    justify-self: end;
    border-radius: 2px solid #fdf2e9;
    padding: 4.6rem;
}

.pricing-plan--complete {
    background-color: #f2ebe0;
    padding: 4.8rem;
    position: relative;
}

.pricing-plan--complete::after {
    position:absolute;
}

.plan-price {
    font-size: 7.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.6rem;
}

.plan-price span {
    font-size: 3rem;
    font-weight: 500;
    margin-right: 0.8rem;
}

.plan-text {
    font-size: 1.6rem;
    line-height: 1.6;
    color: #6f6f6f;
}

.patron-img {
    width: 9.2rem;
    border-radius: 50%;
    margin-bottom: 1.2rem;
}

.support-our-business {
    text-align: center;
    margin-top: 4.8rem;
}

/****************************************/
/*  FEATURE SECTION  */
/***************************************/

.plan-details {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
}

.feature-icon{
    color:#e67e22;
    height: 3.2rem;
    width: 3.2rem;
    background-color: #fdf2e9;
    margin-bottom: 3.2rem;
    padding: 1.6rem;
    border-radius: 50%;
}

.feature-title {
    font-size: 2.4rem;
    color: #333;
    font-weight: 700;
    margin-bottom: 1.6rem;
}
.feature-text {
    font-size: 1.8rem;
    line-height: 1.8;
}

/****************************************/
/*  FOOTER SECTION  */
/***************************************/
.social-links {
    list-style: none;
    display: flex;
    gap: 2.4rem;
    margin-left: 16.8rem;
}

.logo-col {
    display: flex;
    flex-direction: column;
}

.social-links {
    height: 2.4rem;
    width: 2.4rem;
}

.copyright {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #767676;
    margin-top:auto;
    margin-left: 16.8rem;
}

.footer-logo {
    display: block;
    margin-bottom: 3.2rem;
}

.footer{
    background-color: #d2ba91;
    padding: 12.8rem 0;
    border-top: 1px solid #eee;
}

.grid--footer {
    grid-template-columns: 1.5fr 1.5fr;
}

.address {
    margin-bottom: 2.4rem;
}
.footer-heading {
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 3.2rem;
    margin-left: 16.8rem;
}

.contacts {
    font-style: normal;
    font-size: 1.6rem;
    line-height: 1.6;
}

.footer-link:link,
.footer-link:visited {
    text-decoration: none;
    font-size: 1.6rem;
    color: #767676;
    transition: all 0.3s;
}
.footer-link:hover,
.footer-link:active {
    color: #555;
}

/****************************************/
/*  POP-UP IMAGE  */
/***************************************/

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(226, 219, 203, 0.9);
  }
  
  .modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
  }
  
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #555;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }