@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Leckerli+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
button {
  cursor: pointer;
}
img {
  transition: 0.3s ease all;
}
img:hover {
  transform: scale(1.1);
}
body {
  background-color: #fffffa;
  overflow-x: hidden;
}
/* NAVBAR */
nav {
  /* border: 1px solid red; */
  padding-inline: 36px;
  padding-block: 15px;
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.logo img {
  height: 32px;
  width: 132px;
}
.menu-items ul {
  display: flex;
  list-style-type: none;
  gap: 1rem;
  color: #596463;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.menu-items li {
  padding-inline: 6px;
  padding-block: 4px;
  transition: 0.2s ease;
  border-radius: 16px;
}
.menu-items li:hover {
  background-color: #cacaca;
  border-radius: 16px;
}
.login button {
  border: none;
  background: none;
  font-size: 16px;
  padding-block: 10px;
  padding-inline: 22px;
  border-radius: 24px;
  border: 1px solid black;
  color: #596463;
}
#color {
  background-color: #b0ec9c;
}

/* NAVBAR  */
.container {
  display: flex;
  margin-inline: 2.5rem;
  /* border: 1px solid red; */
  justify-content: space-around;
  background-color: #f2f2e8;
  border-radius: 8px;
  height: 600px;
}
.left-items .first-img {
  width: 287px;
  aspect-ratio: auto 287 / 148;
  height: 148px;
}
.left-items .second-img {
  width: 291px;
  aspect-ratio: auto 291 / 234;
  height: 234px;
}
.center-items .third-img {
  width: 304px;
  aspect-ratio: auto 304 / 74;
  height: 74px;
}

.right-items .fourth-img {
  width: 260px;
  aspect-ratio: auto 260 / 212;
  height: 212px;
}
.right-items .fifth-img {
  width: 212px;
  aspect-ratio: auto 212 / 212;
  height: 212px;
}
.left-items,
.center-items,
.right-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.left-items {
  gap: 6rem;
  align-items: start;
  position: relative;
  right: 20px;
}
.center-items {
  justify-content: start;
  gap: 2.5rem;
  margin-top: 1rem;
  font-family: Figtree;
  color: #213130;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.center-items h1 {
  font-size: 101px;
  text-align: center;
  letter-spacing: -2.02px;
  /* border: 1px dashed red; */
  line-height: 111.1px;
}
.p1 {
  font-size: 18px;
}
.p2 {
  color: #7a8585;
}
.input-wrap {
  display: flex;
  gap: 0.5rem;
  /* border: 1px solid red; */
  width: 100%;
  justify-content: center;
}
.input-wrap input {
  width: 40%;
  height: auto;
}
.input-wrap input,
button {
  padding-inline: 15px;
  padding-block: 18px;
  border-radius: 30px;
}
.input-wrap button {
  padding-inline: 30px;
  font-size: 1.2rem;
  background: none;
  background-color: #b0ec9c;
}
::placeholder {
  font-size: 1.1rem;
}

.fourth-img {
  position: relative;
  left: 50px;
}
.fifth-img {
  position: relative;
  top: 95px;
}

/* Count Section */

.count-container {
  padding: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-block: 36px;
}
.children {
  border: 1px solid #3a3a3a;
  /* padding: 36px; */
  width: 402px;
  height: 160px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.children p {
  font-size: 15.5px;
  font-family: Figtree;
  text-transform: uppercase;
  color: #213130;
  font-weight: 500;
}
.children p:first-child {
  font-size: 42.6px;
  font-family: Figtree;
  text-transform: uppercase;
  color: #213130;
}

/* end count */

/* Publish Container */

.publish-container {
  margin-inline: 45px;
  justify-content: space-between;
  display: flex;
  padding-block: 55px;
  padding-inline: 15px;
  background-color: #cfc2ff;
  border-radius: 16px;
}
.publish-content,
.analyze-content {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
  padding-inline: 35px;
  gap: 1.8rem;
}

.publish-img img {
  width: 670px;
  height: 444px;
}
.content {
  width: 568px;
  margin-right: 30px;
  color: #213130;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.content p,
h3 {
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
}
.features p {
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  /* padding: 0.5rem; */
}
.content h3 {
  font-size: 34px;
  line-height: 35px;
  word-spacing: 8px;
}

.publish {
  text-transform: uppercase;
  font-size: 15.5px;
  justify-self: start;
}
.btn button {
  background: none;
  border: 1px solid black;
  width: 160px;
  padding-block: 12px;
  background-color: #213130;
  color: #e0e0e0;
  font-size: 18px;
}
.content-text {
  font-size: 18px;
}
.features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.features span {
  margin-right: 0.5rem;
}
.features span i {
  font-size: 1.3rem;
}

/* perfect section */
.perfect-container {
  margin-top: 1.5rem;
  margin-inline: 45px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-block: 55px;
  padding-inline: 15px;
  background-color: #ffc4bd;
  border-radius: 16px;
}
/* end perfect section */

/* Colab & Engage */
.colab-engage {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
  width: 100%;
}

.colab,
.engage {
  display: flex;
  flex-direction: column;
  background-color: #ffe2a8;
  border-radius: 16px;
  gap: 6rem;
  justify-content: center;
  align-items: center;
  /* margin-left: 10rem; */
  padding-top: 80px;
}
.engage {
  background: #b0ec9c;
}
.colab button,
.engage button {
  background: none;
  border: 1px solid black;
  width: 160px;
  padding-block: 12px;
  background-color: #213130;
  color: #e0e0e0;
  font-size: 16px;
}
.colab .content h3,
.engage .content h3 {
  font-size: 38px;
  line-height: 35.5px;
  font-weight: 400;
  width: 540px;
}
.colab .content p,
.engage .content p {
  font-size: 18px;
  line-height: 26px;
}

.colab img,
.engage img {
  width: 705px;
  aspect-ratio: auto 712 / 345;
  height: 345px;
}

.colab .content p,
h3,
.engage .content p,
h3 {
  width: 555px;
  /* border: 1px solid red; */
  font-family: Roboto;
  color: #3a3a3a;
}
.colab .content,
.engage .content {
  display: flex;
  gap: 2rem;
}

/* Colab & Engage end */

/* ANALYZE SECTION */
.analyze-background {
  background-color: #c2e2ff;
  height: auto;
  padding-inline: 40px;
  padding-block: 80px;
}
.analyze-background img {
  width: 670px;
  aspect-ratio: auto 670 / 440;
  height: 440px;
}
/* END */

/* SOCIAL CONTAINER */
.social-container {
  display: flex;
  /* flex-direction: column; */
  border: 1px solid #213130;
  font-family: Figtree;
  padding: 70px;
  margin-inline: 45px;
  margin-top: 1.5rem;
  border-radius: 16px;
  /* justify-content: center; */
  align-items: center;
  gap: 2rem;
  padding-inline: 75px;
  margin-bottom: 1rem;
}
.social-icon {
  display: flex;
  gap: 0.8rem;
  border-radius: 16px;
}
.child{
  border: 1px solid black;
  padding: 5px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s ease all;
}
.child:hover{
  transform: scale(1.06);
  box-shadow: 0px 3px 0px 0px #000;
}
.child img{
  width: 60px;
  transform: scale(1);

}
.social-heading{
  width: 150px;
}
.social-heading h4{
  font-size: 18px;
}
.blue-fly:hover{
  background-color: #1083fe;
}
.blue-fb:hover{
  background-color: #1876f2;
}
.blue-gb:hover{
  background-color: #4b7de2;
}
.red-insta:hover{
  background-color: #ed0274;
}
.violet:hover{
  background-color: #6161ff;
}
.blue-linkedin:hover{
  background-color: #2967b3;
}
.red-pin{
  background-color: #e60022;
}
.red-default:hover{
  background-color: #fb8e8e;
}