@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
:root {
  --lightBlue: #4f80ff;
  --darkBlue: #001251;
}
body,@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
:root {
  --lightBlue: #4f80ff;
  --darkBlue: #001251;
}
body,
html {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
}

/* products container */
.product-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.medium-heading {
  font-size: 45px;
  max-width: 700px;
  font-weight: 500;
  color: var(--darkBlue);
  margin-top: 30px;
}
.products {
  display: grid;
  margin: 50px 150px;
  grid-template-columns: auto auto auto auto;
}
.product {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: black;
  border: 1.5px solid rgba(37, 37, 37, 0.123);
  height: 400px;
  margin: 0 20px;
  border-radius: 20px;
  text-align: left;
  padding: 20px;
  align-items: center;
  justify-content: flex-start;
  align-content: stretch;
  gap: 20px;
}
.product img {
  width: 100px;
}
.product-title {
  margin-top: 20px;
  color: var(--darkBlue);
  font-size: 22px;
}
.price {
  font-size: 30px;
  font-weight: 600;
  width: 100%;
}
.price-small {
  font-weight: normal;
  font-size: 18px;
}
/* about */
.about-container {
  display: flex;
  margin: 120px 0;
  background-color: rgb(242, 246, 255);
  padding: 100px 0;
}
.about-img {
  display: flex;
  justify-content: center;
  margin-left: 100px;
}
.about-img img {
  width: 37vw;
  object-fit: contain;
  margin-top: 70px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  gap: 20px;
}
.about-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.about-item p {
  font-weight: 500;
}
/* articles */
.articles {
  margin: 120px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.article-items {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.article img {
  width: 27vw;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.186);
  height: 38vh;
}
.article {
  border: 1px solid rgba(0, 0, 0, 0.186);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article p {
  padding: 20px;
  text-align: left;
  max-width: 350px;
}
.article span {
  padding: 20px;
  font-size: 22px;
  font-weight: 400;
  color: var(--darkBlue);
}
.article button {
  margin-left: 20px;
  margin-bottom: 30px;
}

/* News */
.news-container {
  background-color: var(--lightBlue);
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  margin: 100px 100px;
}
.news-container button {
  background-color: white;
  color: var(--lightBlue);
  font-weight: bold;
}
.news-container button:hover {
  border: 2px solid white;
  color: white;
  background-color: var(--lightBlue);
}
.news-container p {
  max-width: 800px;
  text-align: center;
}
/* Media queries */
@media only screen and (min-width: 860px) and (max-width: 1000px) {
  .products {
    margin: 0 !important;
  }
}
@media only screen and (max-width: 860px) {
  /* products Container */
  .products {
    margin: 20px;
    flex-wrap: wrap;
    gap: 30px;
    display: grid;
    grid-template-columns: auto;
  }
  .product-container {
    margin-top: 100px;
    display: grid;
    grid-auto-columns: auto;
  }
  .medium-heading {
    font-size: 30px;
  }
  /* about */
  .about-container {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .about-content {
    margin: 0;
  }
  .about-img img {
    width: 80vw;
  }
  .about-img {
    margin: 0;
  }

  /* articles */
  .articles {
    flex-wrap: wrap;
    margin: 0;
  }
  .article-items {
    flex-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
:root {
  --lightBlue: #4f80ff;
  --darkBlue: #001251;
}
body,@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
:root {
  --lightBlue: #4f80ff;
  --darkBlue: #001251;
}
body,
html {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
}

/* products container */
.product-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.medium-heading {
  font-size: 45px;
  max-width: 700px;
  font-weight: 500;
  color: var(--darkBlue);
  margin-top: 30px;
}
.products {
  display: grid;
  margin: 50px 150px;
  grid-template-columns: auto auto auto auto;
}
.product {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: black;
  border: 1.5px solid rgba(37, 37, 37, 0.123);
  height: 400px;
  margin: 0 20px;
  border-radius: 20px;
  text-align: left;
  padding: 20px;
  align-items: center;
  justify-content: flex-start;
  align-content: stretch;
  gap: 20px;
}
.product img {
  width: 100px;
}
.product-title {
  margin-top: 20px;
  color: var(--darkBlue);
  font-size: 22px;
}
.price {
  font-size: 30px;
  font-weight: 600;
  width: 100%;
}
.price-small {
  font-weight: normal;
  font-size: 18px;
}
/* about */
.about-container {
  display: flex;
  margin: 120px 0;
  background-color: rgb(242, 246, 255);
  padding: 100px 0;
}
.about-img {
  display: flex;
  justify-content: center;
  margin-left: 100px;
}
.about-img img {
  width: 37vw;
  object-fit: contain;
  margin-top: 70px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  gap: 20px;
}
.about-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.about-item p {
  font-weight: 500;
}
/* articles */
.articles {
  margin: 120px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.article-items {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.article img {
  width: 27vw;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.186);
  height: 38vh;
}
.article {
  border: 1px solid rgba(0, 0, 0, 0.186);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article p {
  padding: 20px;
  text-align: left;
  max-width: 350px;
}
.article span {
  padding: 20px;
  font-size: 22px;
  font-weight: 400;
  color: var(--darkBlue);
}
.article button {
  margin-left: 20px;
  margin-bottom: 30px;
}

/* News */
.news-container {
  background-color: var(--lightBlue);
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  margin: 100px 100px;
}
.news-container button {
  background-color: white;
  color: var(--lightBlue);
  font-weight: bold;
}
.news-container button:hover {
  border: 2px solid white;
  color: white;
  background-color: var(--lightBlue);
}
.news-container p {
  max-width: 800px;
  text-align: center;
}
/* Media queries */
@media only screen and (min-width: 860px) and (max-width: 1000px) {
  .products {
    margin: 0 !important;
  }
}
@media only screen and (max-width: 860px) {
  /* products Container */
  .products {
    margin: 20px;
    flex-wrap: wrap;
    gap: 30px;
    display: grid;
    grid-template-columns: auto;
  }
  .product-container {
    margin-top: 100px;
    display: grid;
    grid-auto-columns: auto;
  }
  .medium-heading {
    font-size: 30px;
  }
  /* about */
  .about-container {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .about-content {
    margin: 0;
  }
  .about-img img {
    width: 80vw;
  }
  .about-img {
    margin: 0;
  }

  /* articles */
  .articles {
    flex-wrap: wrap;
    margin: 0;
  }
  .article-items {
    flex-wrap: wrap;
  }
  .article img {
    width: 100%;
  }
  .article-items {
    display: grid;
    grid-template-columns: auto;
  }
  /* news */
  .news-container {
    margin: 10px;
    height: 500px;
  }
}

html {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
}

/* products container */
.product-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.medium-heading {
  font-size: 45px;
  max-width: 700px;
  font-weight: 500;
  color: var(--darkBlue);
  margin-top: 30px;
}
.products {
  display: grid;
  margin: 50px 150px;
  grid-template-columns: auto auto auto auto;
}
.product {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: black;
  border: 1.5px solid rgba(37, 37, 37, 0.123);
  height: 400px;
  margin: 0 20px;
  border-radius: 20px;
  text-align: left;
  padding: 20px;
  align-items: center;
  justify-content: flex-start;
  align-content: stretch;
  gap: 20px;
}
.product img {
  width: 100px;
}
.product-title {
  margin-top: 20px;
  color: var(--darkBlue);
  font-size: 22px;
}
.price {
  font-size: 30px;
  font-weight: 600;
  width: 100%;
}
.price-small {
  font-weight: normal;
  font-size: 18px;
}
/* about */
.about-container {
  display: flex;
  margin: 120px 0;
  background-color: rgb(242, 246, 255);
  padding: 100px 0;
}
.about-img {
  display: flex;
  justify-content: center;
  margin-left: 100px;
}
.about-img img {
  width: 37vw;
  object-fit: contain;
  margin-top: 70px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  gap: 20px;
}
.about-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.about-item p {
  font-weight: 500;
}
/* articles */
.articles {
  margin: 120px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.article-items {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.article img {
  width: 27vw;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.186);
  height: 38vh;
}
.article {
  border: 1px solid rgba(0, 0, 0, 0.186);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article p {
  padding: 20px;
  text-align: left;
}
.article span {
  padding: 20px;
  font-size: 22px;
  font-weight: 400;
  color: var(--darkBlue);
  text-align: left;
}
.article button {
  margin-left: 20px;
  margin-bottom: 30px;
}

/* News */
.news-container {
  background-color: var(--lightBlue);
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  margin: 100px 100px;
}
.news-container button {
  background-color: white;
  color: var(--lightBlue);
  font-weight: bold;
}
.news-container button:hover {
  border: 2px solid white;
  color: white;
  background-color: var(--lightBlue);
}
.news-container p {
  max-width: 800px;
  text-align: center;
}
/* Media queries */
@media only screen and (min-width: 860px) and (max-width: 1000px) {
  .products {
    margin: 0 !important;
  }
}
@media only screen and (max-width: 860px) {
  /* products Container */
  .products {
    margin: 20px;
    flex-wrap: wrap;
    gap: 30px;
    display: grid;
    grid-template-columns: auto;
  }
  .product-container {
    margin-top: 100px;
    display: grid;
    grid-auto-columns: auto;
  }
  .medium-heading {
    font-size: 30px;
  }
  /* about */
  .about-container {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .about-content {
    margin: 0;
  }
  .about-img img {
    width: 80vw;
  }
  .about-img {
    margin: 0;
  }

  /* articles */
  .articles {
    flex-wrap: wrap;
    margin: 0;
  }
  .article-items {
    flex-wrap: wrap;
  }
  .article img {
    width: 100%;
  }
  .article-items {
    display: grid;
    grid-template-columns: auto;
  }
  /* news */
  .news-container {
    margin: 10px;
    height: 500px;
  }
}
wrap: wrap;
  }
  .article img {
    width: 100%;
  }
  .article-items {
    display: grid;
    grid-template-columns: auto;
  }
  /* news */
  .news-container {
    margin: 10px;
    height: 500px;
  }
}

html {
  scroll-behavior: smooth;
  font-family: "Roboto", sans-serif;
}

/* products container */
.product-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.medium-heading {
  font-size: 45px;
  max-width: 700px;
  font-weight: 500;
  color: var(--darkBlue);
  margin-top: 30px;
}
.products {
  display: grid;
  margin: 50px 150px;
  grid-template-columns: auto auto auto auto;
}
.product {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: black;
  border: 1.5px solid rgba(37, 37, 37, 0.123);
  height: 400px;
  margin: 0 20px;
  border-radius: 20px;
  text-align: left;
  padding: 20px;
  align-items: center;
  justify-content: flex-start;
  align-content: stretch;
  gap: 20px;
}
.product img {
  width: 100px;
}
.product-title {
  margin-top: 20px;
  color: var(--darkBlue);
  font-size: 22px;
}
.price {
  font-size: 30px;
  font-weight: 600;
  width: 100%;
}
.price-small {
  font-weight: normal;
  font-size: 18px;
}
/* about */
.about-container {
  display: flex;
  margin: 120px 0;
  background-color: rgb(242, 246, 255);
  padding: 100px 0;
}
.about-img {
  display: flex;
  justify-content: center;
  margin-left: 100px;
}
.about-img img {
  width: 37vw;
  object-fit: contain;
  margin-top: 70px;
}
.about-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 50px;
  margin-left: 100px;
  margin-right: 100px;
  gap: 20px;
}
.about-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.about-item p {
  font-weight: 500;
}
/* articles */
.articles {
  margin: 120px 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
}
.article-items {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
  justify-content: center;
}
.article img {
  width: 27vw;
  margin-bottom: 20px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.186);
  height: 38vh;
}
.article {
  border: 1px solid rgba(0, 0, 0, 0.186);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article p {
  padding: 20px;
  text-align: left;
}
.article span {
  padding: 20px;
  font-size: 22px;
  font-weight: 400;
  color: var(--darkBlue);
}
.article button {
  margin-left: 20px;
  margin-bottom: 30px;
}

/* News */
.news-container {
  background-color: var(--lightBlue);
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  margin: 100px 100px;
}
.news-container button {
  background-color: white;
  color: var(--lightBlue);
  font-weight: bold;
}
.news-container button:hover {
  border: 2px solid white;
  color: white;
  background-color: var(--lightBlue);
}
.news-container p {
  max-width: 800px;
  text-align: center;
}
/* Media queries */
@media only screen and (min-width: 860px) and (max-width: 1000px) {
  .products {
    margin: 0 !important;
  }
}
@media only screen and (max-width: 860px) {
  /* products Container */
  .products {
    margin: 20px;
    flex-wrap: wrap;
    gap: 30px;
    display: grid;
    grid-template-columns: auto;
  }
  .product-container {
    margin-top: 100px;
    display: grid;
    grid-auto-columns: auto;
  }
  .medium-heading {
    font-size: 30px;
  }
  /* about */
  .about-container {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .about-content {
    margin: 0;
  }
  .about-img img {
    width: 80vw;
  }
  .about-img {
    margin: 0;
  }

  /* articles */
  .articles {
    flex-wrap: wrap;
    margin: 0;
  }
  .article-items {
    flex-wrap: wrap;
  }
  .article img {
    width: 100%;
  }
  .article-items {
    display: grid;
    grid-template-columns: auto;
  }
  /* news */
  .news-container {
    margin: 10px;
    height: 500px;
  }
}