body {
    font-family:Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    margin : 0;
    padding: 0;
}

/* top-bar */

.top-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: white;
}
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    padding: 0px 10px;
}

.links{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fa-solid.fa-utensils{
    border: 1px solid hsl(158 64% 32%);
    padding: 7px;
    border-radius: 10px;
    background-color: hsl(158 64% 32%);
    color: white;
}

nav .logo a{
    text-decoration: none;
}

.first{color: black;}
.second{ animation: colorFlow 2s ease-in-out infinite alternate;}
@keyframes colorFlow {
    0% {
        color: hsl(158 64% 32%);
    }
    100% {
        color: hsl(174 72% 40%);
    }
}

nav ul { display: flex; list-style: none; gap: 20px; }
nav ul li a {
  color: hsl(160 15% 45%);
  text-decoration: none;
  padding: 8px 16px;
  display: inline-block;
  border-radius: 6px;
}

nav ul li a:hover {
  color: black;
  background-color: hsl(157 17% 73%);
}

nav ul li a.active {
  color: white;
  background-color: hsl(158 64% 32%);
}

/* used for top-bar, section-1 */
.sign-in{
    padding: 8px 16px;
    text-decoration: none;
    color: black;
    background-color: white;
    border: 0px solid grey;
    font-size: medium;
    border-radius: 6px;
}

/* used for top-bar, section-1 */
.sign-in:hover{
    padding: 8px 16px;
    text-decoration: none;
    color: white;
    background-color: hsl(174 72% 40%);
    border: 0px;
    border-radius: 6px;
}

/* used for top-bar, section-1 */
.get-started{
    padding: 8px 16px;
    text-decoration: none;
    color: white;
    background-color: hsl(158 64% 32%);
    border: 0px;
    border-radius: 6px;
    font-size: medium;
}

/* used for top-bar, section-1 */
.get-started:hover{
    padding: 8px 16px;
    text-decoration: none;
    background-color: hsl(158, 42%, 38%);
    border: 0px;
    border-radius: 6px;
}


/* section 1 index page */
.section-1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color:  hsl(153, 39%, 95%);
    padding: 128px 16px;
    gap:25px;
}

.section-1 .quote{
    border-radius: 999px;
    display: inline-flex;
    padding: 8px 16px;
    margin:100px 0px 3px 24px;
    background-color: #1D86601A;
    color: hsl(158 64% 32%);
    align-items: center;
}

.section-1 .quote i{
    margin-right: 10px;
}

.section-1 h1{
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1s ease-out forwards;
}

.section-1 h3{
    color: #628478;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1.2s ease-out forwards;
}

.section-1 .buttons{
    display: flex;  
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1.3s ease-out forwards;
}

.section-1 .proof{
    display: flex;
    margin: 20px 0px;
    gap: 50px;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1.4s ease-out forwards;
}

.section-1 .proof p{
    color: #628478;
}

@keyframes smoothFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* section-2 */

.section-2 {
    display: flex;
    justify-content: space-around;
    background-color:  #E8EEE84c;
}

.section-2 div{
    text-align: center;
}

.section-2 h1{
    color: hsl(158 64% 32%);
    margin-bottom: 4px; 
}

.section-2 p,.section-3 p{
    color: #628478;
    margin-top: 0; 
}

/* section-3 */

.section-3{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color:  #f1f5f14c;
    padding: 128px 16px;
    gap:25px;
}

.section-3 .section-3-flexbox{
    display: flex;
    justify-content: space-around;
}

.section-3 .section-3-flexbox .section-3-flexbox-each{
    padding: 20px;
    border:1px solid black;
    border-radius: 10px;
    margin:29px;
    gap: 10px;
    box-shadow:  5px 5px rgba(0,0,0,0.1);
    background-color: white;
}

.section-3 .section-3-flexbox .section-3-flexbox-each i{
    margin-left: 15px;
    font-size: 30px;
    padding: 15px;
    transition: transform 0.3s ease;
    border-radius:15px ;
    animation: colorFlow-bg 2s ease-in-out infinite alternate;
}

.section-3-flexbox-each:hover i {
  transform: scale(1.1);
}

.fa-solid.fa-user, .fa-solid.fa-shield, .fa-solid.fa-arrow-trend-down{
    border: 1px solid hsl(158 64% 32%);
    padding: 7px;
    border-radius: 10px;
    background-color: hsl(158 64% 32%);
    color: white;
}


/* section-4 */
.section-4{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color:  #E8EEE84c;
    padding: 18px 16px;
    gap:25px;
}

.section-4 .top h3{
    color: #628478;
    margin-top: 0; 
    font-weight: normal;
}

.section-4 .circles{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.section-4 .circle{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: white;
    animation: colorFlow-bg 2s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px rgba(0,0,0,0.1);
    z-index: 1;
}

@keyframes colorFlow-bg {
    0% {
        background-color: hsl(158 64% 32%);
    }
    100% {
        background-color: hsl(174 72% 40%);
    }
}

.section-4 .circles .line {
    flex-grow: 0.2 ;           
    height: 4px;     
    background-color: #cfcfcf; 
    margin: 0 10px;     
    z-index: 0;  
}

.section-4-flexbox{
    display: flex;
    margin: 0px 250px;
}

.section-4-flexbox-each{
    padding: 20px;
    margin:0px;
    text-align: center;
}

.section-4-flexbox-each h4{
    color: #628478;
    margin-top: 0; 
    font-weight: normal;
}

/* section-5 */

.section-5{
    animation: colorFlow-bg-s5 2s ease-in-out infinite alternate;
    margin:70px;
    border-radius: 20px;
    text-align: center;
    color: white;
    padding:30px;
}

@keyframes colorFlow-bg-s5 {
    0% {
        background-color: hsl(158 64% 32%);
    }
    100% {
        background-color: hsl(174, 88%, 31%);
    }
}

.section-5 h3{
    font-weight:normal;
}

.section-5 .s5-btns{
    margin-top: 70px;
    display: flex;
    justify-content: center;
    gap:200px;
}

.section-5 .s5-btns .rest{
    background-color: white;
    color: black;
    padding: 15px 25px;
    border-radius: 10px;
    font-size:medium;
    border: none;
}

.section-5 .s5-btns .rest:hover{
    background-color: #d5f1e7;
}

.section-5 .s5-btns .food{
    padding: 15px 25px;
    border-radius: 10px;
    color: white;
    font-size:medium;
    border: white;
    animation: colorFlow-bg-s5 2s ease-in-out infinite alternate;
    border:1px solid white;
}

.section-5 .s5-btns .food:hover{
    background-color: white;
    animation: none;
    color:hsl(158 64% 32%);
}

.section-5 i{
    margin-left: 10px;
}

/* footer */
.footer{
    background-color: hsl(160 30% 15%);
    color: white;
    padding: 40px 60px;
}

.footer1{
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    gap:60px;
}

.logo{
    max-width: 420px;
}

.footer .logo .first,
.footer .logo .s{
    color: white;
}

.logo p{
    margin-top: 10px;
    line-height: 1.6;
    opacity: 0.9;
}

/* QUICK LINKS */
.qlinks ul{
    list-style: none;
    padding: 0;
}

.qlinks li{
    margin: 8px 0;
}

.qlinks a{
    text-decoration: none;
    color: rgb(228, 254, 236);
}

.qlinks a:hover{
    color: white;
}

.involved a{
    display: block;
    margin: 6px 0;
    color: rgb(228, 254, 236);
    text-decoration: none;
}

.involved a:hover{
    color: white;
}

.contact i{
    margin-right: 8px;
}




/* about page */
/* section1 - about */

.about-section-1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color:  hsl(153, 39%, 95%);
    padding: 128px 16px 50px 16px;
    gap:25px;
}

.about-section-1 h1{
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1s ease-out forwards;
}

.about-section-1 h3{
    color: #628478;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: smoothFade 1.2s ease-out forwards;
}

@keyframes smoothFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* section 2 - about */

.about-section-2{
    display: flex;
    justify-content: center;
    margin: 20px 150px;
    gap: 50px;
}

.about-section-2 .prob, .soln{
    width: 100%;
}

.about-section-2 .capsule{
    border-radius: 999px;
    display: inline-flex;
    padding: 8px 16px;
    margin:100px 0px 3px 24px;
    background-color: #DC28281A;
    color: #DC2828;
    align-items: center;
}

.about-section-2 .capsule-s{
    border-radius: 999px;
    display: inline-flex;
    padding: 8px 16px;
    margin:100px 0px 3px 24px;
    background-color: #1D86601A;
    color: hsl(158 64% 32%);
    align-items: center;
}

.about-section-2 i{
    margin-right: 10px;
}

.about-section-2 p{
    color: #628478;
}

/* section-3 */

.about-section-3 {
    display: flex;
    justify-content: space-around;
    background-color:  hsl(153, 39%, 95%);
    padding: 30px 180px;
    gap:60px;
}

.about-section-3 .section-3-flexbox-each{
    padding: 20px;
    border:1px solid black;
    border-radius: 10px;
    margin:29px;
    gap: 10px;
    box-shadow:  5px 5px rgba(0,0,0,0.1);
    background-color: white;
}

.about-section-3 .section-3-flexbox-each i{
    margin-left: 15px;
    font-size: 30px;
    padding: 15px;
    transition: transform 0.3s ease;
    border-radius:15px ;
    background-color: hsl(174, 88%, 31%);
    color: white;
}

.section-3-flexbox-each:hover i {
  transform: scale(1.1);
}


/* section-5 */

.about-section-5{
    background-color: hsl(153, 39%, 95%);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 128px 16px;
    gap:25px;
}

.about-section-5 .section-3-flexbox{
display: flex;
}

.about-section-5 .section-3-flexbox-each{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:250px;
    height: 170px;
     padding: 20px;
    border:1px solid black;
    border-radius: 10px;
    margin:29px;
    gap: 10px;
    box-shadow:  5px 5px rgba(0,0,0,0.1);
    background-color: white;
}  

.about-section-5 .section-3-flexbox-each h1{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: hsl(174, 88%, 31%);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-section-5 .section-3-flexbox-each h1,
.section-3-flexbox-each h3,
.section-3-flexbox-each p{
    margin: 4px 0;
}

/* available food */

.available-section-2{
    background-color:  hsl(153, 39%, 95%);
    margin: 60px;
    border-radius: 10px;
    padding: 30px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.available-section-2 p{
    color:#628478;
}

.available-section-2 .foods-available i{
    width: 50px;
    height: 50px;
    color: #628478;
    font-size: 50px;
}


/* contact page */

.contact-section2{
    background-color:hsl(40 33% 98%);
    display: flex;
    justify-content: space-around;
}

.contact-section2 p{
    color: #628478;
}

.contact-section2 .contact-info{
    width: 50%;
    margin-left: 180px;
}

.contact-section2 .infos{
    display: flex;
    justify-content: left;
    gap:20px;
    margin: 20px;
}

.contact-section2 .infos i{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color:#628478;
    background-color:  #1D86601A;
    padding: 20px;
    border-radius: 20px;
    height: 15px;
    width: 15px;
    margin-top: 15px;
}

.contact-section2 .infos h4,h3,p{
    margin: 3px;
    padding: 0;
    font-weight: normal;
}

.contact-section2 .message{
    display: flex; 
    flex-direction: column;
    width:50%;
    background-color: white;
}

.contact-section2 .message .ip1{
    display: flex;
    
}

.contact-section2 .message p{
    color: black;
    margin: 15px 0px;
}

.contact-section2 .message {
    border: 1px solid black;
    border-radius: 20px;
    margin: 30px;
    padding: 30px;
    box-shadow:  2px 2px 2px 2px rgba(0, 0, 0, 0.1);
    margin-right: 160px;
}

.contact-section2 .message .ip1{
    display: flex;
    justify-content: space-between;
}
.contact-section2 .message .ip1,.ip2,.ip3{
    margin:20px;
    margin-bottom: 20px;
}

.contact-section2 .message input{
    border:1px solid black;
    border-radius: 8px;
    width:100%;
    padding: 10px;
    background-color:hsl(40 33% 98%);
}

.contact-section2 .message input:focus{
    border:1px solid black;
    border-radius: 8px;
    width:100%;
    padding: 10px;
    outline: hsl(158 64% 32%);
}

.contact-section2 textarea{
    background-color:hsl(40 33% 98%);
    width: 100%; 
    height: 100px;
}

.contact-section2 .message .submit{
    background-color:  hsl(158 64% 32%);
    color: white;
    font-size: medium;
}


/* sign in page */
.s-body{
    display: flex;
    align-items: stretch;
}

.section-1-signin{
    background-color:hsl(158 64% 32%); ;
    width: 50%;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.section-1-signin .logo-signin{
    margin-left: 40px;
}

.section-1-signin .welcome{
    justify-content: left;
    margin-left: 40px;
    margin-top: -20px;
}

.section-1-signin .s-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    margin-left: -60px;
}

.section-2-signin{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.section-2-signin .sign-in-input{
    margin:20px;
}

.section-2-signin .sign-in-input input{
    border:1px solid black;
    border-radius: 10px;
    width:70vh;
    padding: 10px;
    background-color:hsl(40 33% 98%);
}

.section-2-signin .sign-in-input input:focus{
    border-color: hsl(158 64% 32%);
    outline: none;
}


.section-2-signin .submit{
    background-color:  hsl(158 64% 32%);
    color: white;
    font-size: medium;
    width: 100%;
    padding: 10px 5px;
    border-radius: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.section-2-signin a{
    color: hsl(158 64% 32%);
    text-decoration: none;
    line-height: 64px;
}

.section-2-signin a:hover{
    text-decoration: underline;
}

.section-2-signin button{
    margin:20px;
    padding: 20px 50px;
    background-color: white;
    border-radius: 10px;
}

.section-2-signin button i{
    color: hsl(158 64% 32%);
    font-size: x-large;
    margin-bottom: 10px;
}

.section-2-signin .active{
    background-color: hsl(153, 39%, 95%);
    border:3px solid hsl(158 64% 32%);
}