style.css

/* Playfair Display */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap");

/* Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");

/*reset*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --main-color: #239b7e;
  --main-font: "Playfair Display SC", serif;
  --primary-font: "Roboto", sans-serif;
}
body {
  background-color: #d0f0c0a4;
}
/*navigation starts*/
nav {
  font-family: var(--primary-font);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 2rem;
  margin-bottom: 4rem;
}
.logo {
  margin-left: 4rem;
  font-size: large;
  font-weight: bold;
}
.icons {
  font-size: 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--main-color);
  cursor: pointer;
}
.fa-house {
  margin-left: 0.8rem;
}
.fa-house:hover {
  color: #064334;
}
.fa-cart-shopping:hover {
  color: #064334;
}
.fa-phone:hover {
  color: #064334;
}
.fa-magnifying-glass:hover {
  color: #064334;
}
i {
  margin-left: 3.9rem;
}
.menu {
  margin-right: 4rem;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu span {
  border: 3px solid #239b7e;
  width: 40px;
  height: 2px;
  margin: 3px;
}
/*navigantion end*/

/*head starts*/
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 90vh;
  margin-left: 5rem;
  padding: 20px;
}
header .heading {
  font-size: 1.6rem;
  font-style: var(--main-font);
  color: black;
}

.heading span {
  color: rgb(90, 88, 88);
}
.intro p {
  font-family: var(--primary-font);
  margin-top: 1rem;
  max-width: 500px;
  font-size: 1.2rem;
  color: rgba(83, 55, 55, 0.851);
}
.button {
  margin-top: 1.1rem;
}
.b1 {
  border: 1px solid var(--main-color);
  height: 50px;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  background-color: #239b7e;
  border-radius: 10px;
  color: white;
  font-weight: bolder;
  cursor: pointer;
}
.b2 {
  margin-left: 1.3rem;
  border: 1px solid var(--main-color);
  height: 50px;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: var(--main-color);
  font-weight: bolder;
  cursor: pointer;
}
.b1:hover {
  border: 1px solid var(--main-color);
  height: 50px;
  background-color: white;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: var(--main-color);
  font-weight: bolder;
  cursor: pointer;
  transition: ease-out;
  transition-duration: 0.5s;
}
.b2:hover {
  border: 1px solid var(--main-color);
  height: 50px;
  background-color: var(--main-color);
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  transition: ease-out;
  transition-duration: 0.5s;
}

div.headimg {
  box-shadow: 4px 7px 5px 2px #4f2910ed;
  border-radius: 100%;
  background-image: url(img1.jpg);
  background-position: top;
  background-size: cover;
  height: 400px;
  width: 400px;
  margin-top: -30px;
}
div.headimg:hover {
  background-image: url(img1mirror.jpg);
  background-position: top;
  background-size: cover;
  transition: ease-in;
  transition-duration: 0.3s;
}

@keyframes ani1 {
  0% {
    background-image: url(main22.webp);
    background-position: center;
    background-size: cover;
    height: 400px;
    width: 400px;
    border-radius: 100%;
  }
  5% {
    background-image: url(main22.webp);
    background-position: center;
    background-size: cover;
    height: 400px;
    width: 400px;
    border-radius: 100%;
  }
  20% {
    background-image: url(main5.webp);
    background-position: center;
    background-size: cover;
  }
  40% {
    background-image: url(main6.webp);
    background-position: top;
    background-size: cover;
  }
  60% {
    background-image: url(main3.webp);
    background-position: bottom;
    background-size: cover;
  }
  80% {
    background-image: url(main4.webp);
    background-position: top;
    background-size: cover;
  }
  95% {
    background-image: url(main22.webp);
    background-position: center;
    background-size: cover;
    height: 400px;
    width: 400px;
    border-radius: 100%;
  }
  100% {
    background-image: url(main22.webp);
    background-position: center;
    background-size: cover;
    height: 400px;
    width: 400px;
    border-radius: 100%;
  }
}
/*header ends*/
/*main section starts*/
main {
  margin: 4rem;
  display: flex;
  justify-content: space-around;
  height: 80vh;
}
main .mnimg {
  animation: ani1 8s infinite;
}
main .hdg {
  font-size: 1.6rem;
  font-style: var(--main-font);
  color: black;
}
main .hdg span {
  color: rgb(90, 88, 88);
}
main .import {
  margin-top: 1.2rem;
}
div .detail {
  font-family: var(--primary-font);
  margin-top: 1rem;
  max-width: 500px;
  font-size: 1.2rem;
  color: rgba(83, 55, 55, 0.851);
}
.check {
  margin-top: 1.1rem;
  border: 2px solid var(--main-color);
  height: 50px;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  background-color: #239b7e;
  border-radius: 10px;
  color: white;
  font-weight: bolder;
  cursor: pointer;
}
.check:hover {
  border: 1px solid var(--main-color);
  height: 50px;
  background-color: white;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: var(--main-color);
  font-weight: bolder;
  cursor: pointer;
  transition: ease-out;
  transition-duration: 0.5s;
}

section.products {
  text-align: center;
  font-family: var(--primary-font);
  height: 150vh;
  font-size: 1.35rem;
  margin-bottom: 2rem;
}
section.products button {
  margin-top: 2rem;
  margin-left: 30px;
  border: 1px solid var(--main-color);
  height: 50px;
  background-color: white;
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: var(--main-color);
  font-weight: bolder;
  cursor: pointer;
  transition: ease-out;
  transition-duration: 0.5s;
}
section.products button:hover {
  border: 1px solid var(--main-color);
  height: 50px;
  background-color: var(--main-color);
  font-family: var(--primary-font);
  font-size: 1.02rem;
  width: 140px;
  border-radius: 10px;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  transition: ease-out;
  transition-duration: 0.5s;
}
.productcontainer {
  margin-top: 80px;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: 15rem;
  max-width: 1050px;
}
.productcontainer img {
  width: 175px;
  height: 200px;
  margin: 50px;
}

.productcontainer img:hover {
  scale: 1.1;
  filter: opacity(75%);
}
.productcontainer a {
  color: var(--main-color);
}
div h4 {
  text-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.maincontainer1 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
.maincontainer2 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
.maincontainer3 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
.maincontainer4 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
.maincontainer5 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
.maincontainer6 {
  background-color: rgba(127, 255, 212, 0.119);
  margin: 20px;
  border-radius: 20px;
}
section.customers {
  height: 120vh;
  font-family: var(--primary-font);
  margin-top: 5rem;
  text-align: center;
  font-size: 1.35rem;
}
.cusmain {
  padding: 80px;
  margin-top: 6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cusmain img {
  height: 200px;
  width: 200px;
  background-position: top;
  background-size: cover;
  border-radius: 100%;
}
.cusmain h1 {
  padding-top: 1.9rem;
  font-family: var(--main-font);
  font-size: 1.8rem;
}

.cusmain p {
  font-family: var(--primary-font);
  max-width: 250px;
  font-size: 20px;
}
footer {
  color: white;
  background-color: #239b7e;
  background-image: linear-gradient(315deg, #239b7e 0%, #000000b0 74%);
}
footer .footm {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: white;
  background-color: #239b7e;
  background-image: linear-gradient(315deg, #239b7e 0%, #000000b0 74%);
  height: 60vh;
  background-attachment: fixed;
}
footer h1 {
  font-size: 2.4rem;
  padding-bottom: 20px;
}
footer .workin p {
  text-align: center;
}
div.copyright {
  text-align: center;
}
hr {
  color: #239b7e;
}
.copyright span {
  font-weight: bolder;
}

@media only screen and (max-width: 900px) {
  header {
    height: 120vh;
    text-align: center;
  }
  .main-hding {
    height: 70vh;
  }
  .headimg {
    height: 200px;
    width: 200px;
    text-align: center;
  }
  main {
    height: 100vh;
  }
  .mnimg {
    margin-top: 45rem;
    text-align: center;
    height: 200px;
    width: 200px;
  }
  .import {
    margin-right: 3.4rem;
    text-align: center;
  }
  section.products {
    margin-top: 30rem;
  }
}