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

:root{
  --primary-color:#033b4a;
  --second-color:#107a5a;
  --gray:#4a4a4d;
  --bg-primary:#ecf0f3;


}



*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
                     font-family: 'Poppins', sans-serif;
                     background-color: var(--bg-primary);




}



ul{
  list-style: none;
}

a{
  text-decoration: none;
}

                                            /*Header start*/
header{
  background-color: var(--bg-primary);
  height: 100vh;

}

header .navbar{
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  position: relative;
  width: 100%;
  padding: 1.5rem 2rem;

}
header .navbar nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: auto;
}

#home #logo{
  color: var(--primary-color);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

header .navbar nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header .navbar nav ul  a{
  margin: 0 30px ;
  color: var(--primary-color);
  font-size: 24;
  font-weight: 700;
}

header .navbar nav ul li  :hover{
  color: #b81414;
  font-size: 1.5em;
  z-index: 2;
  letter-spacing: 0.024em;
  transition: 300ms;
  letter-spacing: 0.125px;

}
header .header-content img{
  background-color: #000000;
  width:1400px;
  height: 800px;
  margin-top: 3px;
  margin-left: 60px;
  box-sizing: border-box;
}

.text-primary {
  color: var(--second-color);



}
header .header-content p span{
  font-weight: 900;
  font-size: 50px;
  position: relative;
  bottom: 8px;
  margin-left:55px ;

}
header .header-content .title {
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:60px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;

}
.text-second {
  color: var(--second-color);


}


header .content-functions p span{
  background-color: var(--bg-primary);
  font-weight: 600;
  font-size: 30px;
  padding: 30px;
  position: relative;
  bottom:1px;
  margin-left:60px ;
  word-spacing: 5px;
}

.fffff{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;

}
                                          /*part one*/
header .content1 img{
  width:250px;
  height: 200px;
  position: relative;
  margin-top: -290px;
  margin-left: 1150px;
  border-radius: 5px;

}

.text-third {
  color: var(--second-color);
  position: relative;
  bottom:1px;
  margin-left:60px ;

}

header .content1 p {
  position: relative;
  bottom: 80%;


}
header .content1 p span{
  font-weight: 600;
  font-size: 30px;
  padding: 30px;


}
.lack{
  color: var(--primary-color);
  font-weight: 900;
  font-size: 24px;
  position: relative;
  bottom:1px;
  margin-left:80px ;


}

.title1{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;

}
                                                  /*part 2*/
header .content2 img{

  width:250px;
  height: 200px;
  position: relative;
  margin-top: -500px;
  margin-left: 1150px;
  border-radius: 5px;

}

header .content2 p {
  position: relative;
  bottom: 80%;

}

header .content2 p span {
  font-weight: 600;
  font-size: 30px;
  position: relative;
  bottom:1px;
  margin-left:60px ;

}
.smoking{
  color: var(--primary-color);
  font-weight: 700;
  font-size: 24px;
  position: relative;
  bottom:1px;
  margin-left:80px ;


}

.title2{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;
}

                                                    /*part 3*/
header .content3 img{

  width:250px;
  height: 200px;
  position: relative;
  margin-top: -150px;
  margin-left: 1150px;
  border-radius: 5px;

}

header .content3 p {
  position: relative;
  bottom: 80%;

}

header .content3 p span {
  font-weight: 600;
  font-size: 30px;
  position: relative;
  bottom:1px;
  margin-left:60px ;

}
.nutrition{
  color: var(--primary-color);
  font-weight: 700;
  font-size: 24px;
  position: relative;
  bottom:1px;
  margin-left:80px ;


}

.title3{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;
}
                                          /*part 4*/
header .content4 img{

  width:250px;
  height: 200px;
  position: relative;
  margin-top: -200px;
  margin-left: 1150px;
  border-radius: 5px;

}

header .content4 p {
  position: relative;
  bottom: 80%;

}

header .content4 p span {
  font-weight: 600;
  font-size: 30px;
  position: relative;
  bottom:1px;
  margin-left:60px ;

}
.vitamin{
  color: var(--primary-color);
  font-weight: 700;
  font-size: 24px;
  position: relative;
  bottom:1px;
  margin-left:80px ;


}

.title4{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;
}
                                          /*part 5*/

header .content5 p {
  position: relative;
  bottom: 80%;

}

header .content5 p span {
  font-weight: 600;
  font-size: 30px;
  position: relative;
  bottom:1px;
  margin-left:60px ;

}
.ways{
  color: var(--primary-color);
  font-weight: 700;
  font-size: 24px;
  position: relative;
  bottom:1px;
  margin-left:80px ;


}

.title5{
  background-color: var(--bg-primary);
  position: relative;
  bottom:1px;
  margin-left:80px ;
  color: var(--gray);
  font-weight: 700;
  font-size: 20px;
  word-spacing: 5px;
}
                                            /*Header end*/
                                            .footer {
                                                        background-color: #fff;
                                                        color: #198754;
                                                        padding: 10px;
                                                        text-align: center;
                                                        display: flex;
                                                        justify-content: space-between;
                                                        align-items: center;
                                                    }

                                                    .footer-left,
                                                    .footer-center,
                                                    .footer-right {
                                                        flex: 1;
                                                    }

                                                    .footer-left {
                                                        text-align: left;
                                                    }

                                                    .footer-center {
                                                        text-align: center;
                                                    }

                                                    .footer-right {
                                                        text-align: right;
                                                        color: #198754;
                                                    }

                                                    .footer-icons a {
                                                        color: #198754;
                                                        margin: 0 10px;
                                                        text-decoration: none;
                                                        font-size: 18px;
                                                    }