@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@1;100;200;300;400;500;600;700;800;900;1000&display=swap');

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none !important;
}

body {
  font-family: 'Sofia Sans', sans-serif;
}

button:focus {
  outline: none;
}
input,
textarea,
button {
  font-family: inherit;
}
a,
button {
  color: inherit;
  text-decoration: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  line-height: auto;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  background: #272b34;
}

.head {
  display: flex;
  justify-content: space-between;
  height: 180px;
  /* border: 1px solid red; */
  padding: 0 5vw;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 200;
  transition: all 300ms;
}
.logo {
  width: 147px;
  height: 160px;
}
.logo img {
  object-fit: cover;
  width: 100%;
  height: 100%;

  /* width: 147px;
  height: 159px;
  flex-shrink: 0; */
}
.head-contact {
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
  color: #fff;
}

.head-contact h3 {
  font-family: Sofia Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 114.286% */
}
.head-contact h3 a {
}

.filler {
  min-height: 120px;
}

.about {
  display: flex;
  justify-content: end;
}
.about-contain {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 5vw;
}
.home-slider .owl-dots {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.home-slider {
  width: 85%;
  position: relative;
}
.home-slider.owl-theme .owl-dots .owl-dot.active span,
.home-slider.owl-theme .owl-dots .owl-dot:hover span {
  background: #272b34;
}
.home-slider.owl-theme .owl-dots .owl-dot span {
  background: #ffffff;
}

.about-contain img {
  border-radius: 20px;
  height: 100%;
  width: 100%;
}
.home-slider img {
  max-height: 350px;
  object-fit: cover;
}

.about-contain h1 {
  color: #ccd8f0;
  font-family: Sofia Sans;
  font-size: 70px;
  font-style: normal;
  font-weight: 900;
  line-height: 70px; /* 100% */
}
.about-contain p {
  color: #fff;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
}

.products {
  padding: 10rem 5vw;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.products h3 {
  color: #ccd8f0;
  font-family: Sofia Sans;
  font-size: 35px;
  font-style: normal;
  font-weight: 900;
  line-height: 40px; /* 114.286% */
  width: 50%;
}
.products-contain {
  display: flex;
  gap: 50px;
}
.pc-left {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: left;
  gap: 1rem;
  /* width: 50%; */
}
.pc-left img {
  width: 195px;
  height: 195px;
  flex-shrink: 0;
  border-radius: 20px;
}
.pc-right {
  display: flex;
  align-items: center;
  width: 50%;
}
.pc-right ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pc-right ul li {
  color: #fff;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  display: flex;
  /* align-items: center; */
  /* gap: 1rem; */
}
.pc-right ul li::before {
  content: url('https://api.iconify.design/material-symbols/circle-outline.svg?color=white');
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}

/* footer */
footer {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 3rem 5vw;
  align-items: center;
  gap: 1rem;
}
.foot-contain {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.foot-logo img {
  width: 59px;
  height: 58px;
}
.foot-det {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.foot-det h3 {
  color: #272b34;
  font-family: Sofia Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 80% */
}
.foot-det h6 {
  color: #272b34;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  max-width: 300px;
}

.foot-contact {
}
.foot-contact h3 {
  color: #272b34;
  font-family: Sofia Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 118.75% */
}
.foot-contact a {
}

.foot-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.foot-links .iconify {
  color: #272b34;
}

.foot-links a:nth-last-child(2) {
  height: 18px;
}
.foot-links a {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.copyright h6 {
  color: #272b34;
  font-family: Sofia Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 114.286% */
}
/* footer end */

/* responsive */

@media only screen and (max-width: 1440px) {
}
@media only screen and (max-width: 1280px) {
  .products-contain {
    gap: 5%;
  }
  footer {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 3rem;
  }
  footer .copyright {
    width: 100%;
    text-align: center;
  }
}
@media only screen and (max-width: 1024px) {

  .about-contain {
    width: 65%;
  }
  .products h3 {
    width: 70%;
  }
  .products-contain {
    flex-direction: column;
    gap: 3rem;
    align-items: center;
  }
  .pc-left{
    width: fit-content;
  }
  .pc-right {
    width: 100%;
  }
}
@media only screen and (max-width: 968px) {
  .foot-links {
    width: 100%;
    justify-content: center;
  }
}
@media only screen and (max-width: 764px) {
  .filler{
    /* display: none; */
    height: 110px;
  }
  .foot-contain{
    width: 100%;
    justify-content: center;
  }
  .foot-contact{
    text-align: center;
  }
  footer{
    row-gap: 1rem;
    padding: 2rem 5vw;
  }
  .logo {
    width: 110px;
    height: 100px;
  }
  footer {
    justify-content: center;
  }
  .head-contact {
    padding-bottom: 0;
  }
  .head {
    height: 110px;
  }
  .about-contain h1 {
    font-size: 50px;
    line-height: 60px;
  }
  .about-contain {
    width: 100%;
    padding: 5vw;
  }
  /* .filler {
    height: 150px;
  } */
  .products h3 {
    width: 100%;
  }
  .home-slider {
    width: 100%;
  }
  .pc-left {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .products {
    padding: 6rem 5vw;
  }
}
@media only screen and (max-width: 568px) {
  .head-contact {
    flex-direction: column;
  }
  .logo {
    width: 110px;
    height: 100px;
    background: transparent;
    /* flex-shrink: 0; */
  }
  .about-contain h1 {
    font-size: 40px;
    line-height: 45px;
  }
  .products h3 {
    font-size: 30px;
  }
  .products {
    padding: 2rem 5vw;
    gap: 1.5rem;
  }
  .about-contain {
    gap: 1.5rem;
  }
}
@media only screen and (max-width: 468px) {
  .foot-contain {
    flex-direction: column;
    align-items: center;
  }
  .foot-det {
    text-align: center;
  }
  .pc-left img {
    width: 140px;
    height: 140px;
  }
}
/* responsive end */