@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* variables css */

:root{
    --header-height: 3rem;
    /*---------- colors---------- */
    --first-color: #069c54;
    --first-color-alt: #048654;
    --title-color: #393939;
    --text-color: #707070;
    --text-color-light: #a6a6a6;
    --body-color: #fbfefd;
    --container-color: #ffffff;

    /* -----font and typogrophy----- */
    --body-font: 'poppins', sans-serif;
    --biggest-font-size: 2.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* ---font weight--- */
    --font-medium: 500;
    --font-semi-bold: 600;

    /* ----margins---- */
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;

    /* -----z index----- */
    --z-tooltip:10 ;
    --z-fixed: 100;
}

@media  screen and (min-width: 768px) {
    :root{
        --biggest-font-size: 4rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem; 
    }
}

/* ---------Base---------- */
*,::before,::after{
    box-sizing: border-box;
} 

html{
    scroll-behavior: smooth;
}

/* --------variables dark theme---------- */
body.dark-theme{
    --title-color: #f1f3f2;
    --text-color: #c7d1cc;
    --body-color: #1d2521;
    --container-color: #27302c; 
}

/* ---------button dark/light-------- */
.change-theme{
    position: absolute;
    right: 1rem;
    top: 1.8rem;
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
}


body{
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
    line-height: 1.6;
}

h1,h2,h3,p,ul{
    margin: 0;
}

ul{
   padding: 0;
   list-style: none; 
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

/* ---------class css--------- */
.section{
    padding: 4rem 0 2rem;
}

.section-title, .section-subtitle{
    text-align: center;
}

.section-title{
    font-size: var(--h1-font-size);
    color: var(--title-color);
    margin-bottom: var(--mb-3);
}

.section-subtitle{
    display: block;
    color: var(--first-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-1);
}

/* ---------layout---------- */
.bd-container{
    max-width: 960px;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
}

.bd-grid{
    display: grid;
    gap: 1.5rem;
}

.l-header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
}

/* -----nav------ */
.nav{
    max-width: 1024px;
    height: var(--header-height);
    display:flex;
    justify-content: space-between;
   align-items: center;
}

@media  screen and (max-width: 768px) {
    .nav_menu{
        position: fixed;
        width: 100%;
        left: 0;
        background-color:var(--body-color);
        top: -100%;
        padding: 1.5rem 0 1rem;
        text-align: center;
        transition: .4s;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
        border-radius: 0 0 1rem 1rem;
        z-index: var(--z-fixed);
    }
    
}

.nav_item{
    margin-bottom: var(--mb-2);
}

.nav_link, .nav_logo, .nav_toggle{
    color: var(--text-color);
    font-weight: var(--font-medium);
}

.nav_logo:hover{
    color: var(--first-color);
}

.nav_link{
    transition: .3s;
}

.nav_link:hover{
    color: var(--first-color);
}

.nav_toggle{
    font-size: 1.3rem;
    cursor: pointer;
}

/* ---------show mwnu--------- */
.show-menu{
    top: var(--header-height);
 }

/* -------active menu------- */
.active-link{
    color: var(--first-color);
}

/* ------change bg header------- */
.scroll-header{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

/* -----scroll top------ */
.scrolltop{
    position: fixed;
    right: 1rem;
    bottom: -20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    background: rgba(6, 156, 84, .5);
    border-radius: .4rem;
    z-index: var(--z-tooltip);
    transition: .4s;
    visibility: hidden;
}

.scrolltop:hover{
   background-color: var(--first-color-alt); 
}

.scrolltop_icon{
    font-size: 1.8rem;
    color: var(--body-color);
}

/* -----show scroll top------ */

.scroll-top{
    visibility: visible;
    bottom: 1.5rem;
}

/* --------HOME---------- */

.home_container{
    height: calc(100vh - var(--header-height));
    align-content: center;
}

.home_title{
    font-size: var(--biggest-font-size);
    color: var(--first-color);
    margin-bottom: var(--mb-1);
}

.home_subtitle{
   font-size: var(--h1-font-size);
   color: var(--title-color);
   margin-bottom: var(--mb-4); 
}

.home_img{
    width: 300px;
    justify-self: center;
}

/* --------Buttons-------- */

.button{
    display: inline-block;
    background-color: var(--first-color);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: .5rem;
    transition: .3s;
}

.button:hover{
   background-color: var(--first-color-alt); 
}

/* --------About-------- */

.about_data{
    text-align: center;
}

.about_description{
    margin-bottom: var(--mb-3);
}

.about_img{
    width: 280px;
    border-radius: .5rem;
    justify-self: center;
}

/* --------Services-------- */

.services_container{
   row-gap: 2.5rem;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
}

.services_content{
  text-align: center;  
}

.services_img{
    width: 64px;
    height: 64px;
    fill: var(--first-color);
    margin-bottom: var(--mb-2);
}

.services_title{
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: var(--mb-1);
}

.services_description{
    padding: 0 1.5rem;
}

/* --------Menu-------- */

.menu_container{
   grid-template-columns: repeat(2, 1fr);
   justify-content: center; 
}

.menu_content{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--container-color);
    border-radius: .5rem;
    box-shadow: 0 2px 4px rgba(3, 74, 40, .15);
    padding: .75rem;
}

.menu_img{
    width: 100px;
    align-self: center;
    margin-bottom: var(--mb-2);
}

.menu_name, .menu_preci{
    font-size: var(--font-semi-bold);
    color: var(--title-color);
}

.menu_name{
   font-size: var(--normal-font-size); 
}

.menu_detail, .menu_preci{
    font-size: var(--small-font-size);
}

.menu_detail{
    margin-bottom: var(--mb-1);
}

.menu_button{
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    padding: .625rem .813rem;
    border-radius: .5rem 0 .5rem 0;
}
/* --------App-------- */

.app_data{
   text-align: center; 
}

.app_description{
    margin-bottom: var(--mb-5);
}

.app_stores{
    margin-bottom: var(--mb-4);
}

.app_store{
    width: 120px;
    margin: 0 var(--mb-1);
}

.app_img{
   width: 230px;
   justify-self: center; 
}

/* --------Contact-------- */

.contact_container{
    text-align: center;
}

.contact_description{
    margin-bottom: var(--mb-3);
}

/* --------footer--------- */

.footer_container{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    row-gap: 2rem;
}

.footer_logo{
    font-size: var(--h3-font-size);
    color: var(--first-color);
    font-weight: var(--font-semi-bold);
}

.footer_description{
    display: block;
    font-size: var(--small-font-size);
    margin: .25rem 0 var(--mb-3);
}


.footer_social{
    font-size: 1.5rem;
    color: var(--title-color);
    margin-right: var(--mb-2);
}

.footer_title{
   font-size: var(--h2-font-size);
   color: var(--title-color);
   margin-bottom: var(--mb-2); 
}

.footer_link{
    display: inline-block;
    color: var(--text-color);
    margin-bottom: var(--mb-1);
}

.footer_link:hover{
    color: var(--first-color);
}

.footer_copy{
    text-align: center;
    font-size: var(--small-font-size);
    color: var(--text-color);
    margin-top: 3.5rem;
}
/* --------Media queries--------- */

@media screen and (min-width: 576px) {
    .home_container,
    .about_container,
    .app_container{
        grid-template-columns: repeat(2,1fr);
        align-items: center;
    }

   .about_data, .about_initial,
   .app_data, .app_initial,
   .contact_conatiner, .contact_initial{
       text-align: initial;
   }
   
   .about_img, .app_img{
       width: 380px;
       order: -1;
   }

   .contact_container{
       grid-template-columns: 1.75fr 1fr;
       align-items: center;
   }
   .conatct_button{
      justify-self: center; 
   }
}

@media screen and (min-width: 768px) {
    body{
        margin: 0;
    }

    .section{
        padding-top: 8rem;
    }

    .nav{
        height: calc(var(--header-height) + 1.5rem);
    }
    .nav_list{
        display: flex;
    }

    .nav_item{
       margin-left: var(--mb-5);
       margin-bottom: 0; 
    }
    .nav_toggle{
       display: none;
    }

    .change-theme{
       position: initial;
       margin-left: var(--mb-2); 
    }

    .home_container{
       height: 100vh;
       justify-items: center; 
    }

    .services_container,
    .menu_container{
        margin-top: var(--mb-4);
    }

    .menu_container{
        grid-template-columns: repeat(3, 210px);
        column-gap: 4rem;
    }
    .menu_content{
        padding: 1.5rem;
    }
    .menu_img{
        width: 130px;
    }

    .app_store{
        margin: 0 var(--mb-1) 0 0;
    }
}

@media screen and (min-width: 960px) {
    .bd-container{
        margin-left: auto;
        margin-right: auto;
    }

    .home_img{
        width: 500px;
    }

    .about_container,
    .app_container{
        column-gap: 7rem;
    }
}