* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: 'Varela Round', "poppins", sans-serif;
  font-weight: 500;
  /* background-color: antiquewhite; */
}

img {
  max-width: 90%;
}

section {
  margin-bottom: -3px;
}

body {
  width: 100%;
  margin: 0px;
}

/* ----header tag styling---- */
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2vh 3vw;
  background-color: white;

}

img {
  background: transparent;
}

.logo {
  width: clamp(9rem, 12vw, 30rem);
}

.heading .btn-1 {
  font-size: clamp(0.8rem, 1.3vw, 4rem);

}

.btn-1 {
  text-decoration: none;
  color: hsl(321, 100%, 78%);
  border: 2px solid;
  padding: 5px 15px;
  border-radius: 27px;
  font-size: 1rem;
  transition: 0.25s;
}

.btn-1:hover {
  cursor: pointer;
  background-color: hsl(322, 100%, 66%);
  color: white;
  border-color: hsl(321, 100%, 78%);
}

/* ---section 1 styling--- */
.sec1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 5rem 0rem;
  text-align: center;

  margin-bottom: 0px;
  color: hsl(192, 100%, 9%);
  background-image: url("images/bg-section-top-mobile-1.svg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;

}

.sec1 h1 {
  font-size: clamp(1.4rem, 2.7vw, 5rem);
  font-weight: 600;
  margin: 1rem 9vw;
}

.data {
  font-size: clamp(0.74rem, 1.1vw, 4rem);
  font-weight: 550;
  padding: 0rem 4rem;
  color: hsla(192, 100%, 9%, 0.829);
}

.btn-2 {
  text-decoration: none;
  color: white;
  font-weight: 550;
  background-color: hsl(322, 100%, 66%);
  padding: 1.3rem 3.7rem;
  border-radius: 34px;
  font-size: clamp(0.9rem, 1.5vw, 3rem);
  border: none;
  transition: 0.3s;
  color: hsl(0, 0%, 93%);
}

.btn-2:hover {
  background-color: hsl(321, 98%, 76%);
}

.sec1 img {
  margin: 5rem 2rem;
  width: clamp(20rem, 90vh, 70%);
}

.stat-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 6rem 4rem;

}

.container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin: 1.4rem 1rem;
  color: hsl(192, 100%, 9%);
  margin-bottom: 5rem;
}

.container .img1 {
  width: clamp(45px, 6vw, 80px);
  margin: 0;
  align-self: flex-start;
}

.container h2 {
  font-weight: 600;
  font-size: clamp(4rem, 5vw, 7rem);
  display: flex;
  flex-direction: column;
}

.container p {
  text-align: center;
  font-size: clamp(0.8rem, 1.5vw, 4rem);
  color: hsl(192, 100%, 9%);
}

/* ---section 2 styling--- */

.sec2 {
  background-color: hsl(207, 100%, 98%);
  align-items: center;
  padding: 2rem 0rem;
  position: static;

}

.c2 {
  gap: 1rem;
  position: relative;
  margin: 4rem;
}

.data-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.c2 img {
  width: 75%;
  background-color: hsl(207, 100%, 98%);
  margin: 2rem 0rem;
}

.c2 h2 {
  color: hsl(192, 100%, 9%);
  font-size: clamp(1.4rem, 2vw, 3rem);
  font-weight: 600;
}

.c2 p {
  color: hsl(192, 100%, 9%);
  font-size: clamp(0.8rem, 1vw, 2rem);

}

/* section 3 styling */
.sec3 {
  padding: 4rem 1rem;
  padding-bottom: 9rem;
  background-image: url('images/bg-section-bottom-mobile-1.svg'), url('images/bg-section-top-mobile-2.svg');
  background-position: top, bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% auto;
}


.c3 img {
  width: 75%;
  background-color: white;
  margin: 4rem 0rem;
}

.c3 {
  margin: 4rem 2rem;
  gap: 1rem;
  padding-bottom: 2rem;
}

.c3 h2 {
  font-size: clamp(1.4rem, 2vw, 3rem);
  font-weight: 600;
}

.c3 p {
  font-size: clamp(0.8rem, 1.1vw, 4rem);
}

/* section 4 styling */

.sec4 {
  background-color: hsl(207, 100%, 98%);
  padding: 5rem 0rem;
  position: static;
}


.c4 img {
  width: 75%;
  background-color: none;
  margin: 4rem 2rem;
  margin-top: 2rem;
  position: relative;
}

.c4 {
  margin: 2rem;
  gap: 1rem;
  padding-bottom: 2rem;
}

.c4 h2 {

  font-size: clamp(1.4rem, 2vw, 3rem);
  font-weight: 600;
}

.c4 p {
  font-size: clamp(0.8rem, 1.1vw, 4rem); margin: 0rem 2rem;
}

/* section 5 styling */
.sec5 {
  /* padding: 5rem 1rem; */
  /* height: 100vh; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    url("images/bg-section-bottom-mobile-2.svg"),
    url("images/bg-footer-top-mobile.svg");
  background-position: top, bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 13%, 100% 10%;
}

@media(min-width:600px) {
  .sec5 {
    background-image:
      url("images/bg-section-bottom-mobile-2.svg"),
      url("images/bg-footer-top-desktop.svg");

    background-size: 100% auto, 100% auto;
  }
}

.c5 {
  margin: 10rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.c5 h2 {
  font-size: clamp(1.6rem, 2vw, 6rem);
  text-align: center;
  font-weight: 700;
}

.c5 a {
  font-size: clamp(1rem, 1.1vw, 3rem);
}

/* footer styling */

.footer {
  padding: 2rem 0rem;
  background-color: hsl(192, 100%, 9%);
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: none;

}

.footer-cont {
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  margin: auto;
}

.footer-art-1 {
  display: flex;
  flex-direction: column;
  position: static;
  gap: 1rem;
}

.footer-art-1 h2 {
  font-size: clamp(1rem, 1.5vw, 3rem);
  font-weight: 600;

}

.footer-art-1 p {
  font-size: clamp(0.71rem, 1vw, 3rem);
  font-weight: 500;
}

.frm {
  display: flex;
  flex-direction: column;
}

.frm input {
  width: 100%;
  height: clamp(50px, 4vh, 100px);
  padding: 1.2rem;
  margin: 1rem 0rem;
  border-radius: 5px;
  font-size: clamp(0.7rem, 1vw, 3rem);
  font-weight: 500;
}

.frm .btn-2 {
  border-radius: 6px;
  font-size: clamp(0.7rem, 1.5vw, 5rem);
  text-align: center;
  margin: 1rem 0rem;
  width: 50%;
  align-self: flex-end;

}

/* footer article 2 style */
.footer-art-2 {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.footer-art-2 p {
  font-size: clamp(0.7rem, 1vw, 3rem);
}

.logo-bg {
  display: flex;
  align-items: center;
  gap: 6px;

}

.logo-bg span {

  font-size: clamp(2.1rem, 1.7vw, 5rem);
  font-weight: 600;
}

.logo-bg img {
  width: clamp(29px, 2vw, 100px);
  height: auto;

}

.footer-art-2 .logo {
  width: clamp(180px, 11vw, 300px);
}

.contact-details {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-details p {
  font-size: clamp(0.8rem, 1vw, 2rem);

}

.contact-details img {
  width: clamp(15px, 2vw, 50px);
  height: auto;
}

/* social media icons  */

.sci-icons-cont {
  display: flex;
  align-items: center;
}

.icon {
  width: clamp(15px, 5vw, 40px);
  height: auto;
  object-fit: contain;
  cursor: pointer;
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: scale(1.1);
}

/* 
media query
. */

@media (min-width:768px) {
  .icon {
    width: 39px;
    height: auto;

  }

  .heading {
    padding: 1rem 1rem;
  }

  .sec1 {
    padding: 7rem 0rem;
  }


  .data {
    margin: 0rem 10vw;
    margin-bottom: 1rem;
  }


  .stat-container {
    flex-direction: row;
    gap: 2rem;

  }

  /* section 2 */
  .c2 img {
    width: 50%;
  }

  .c2 h2 {
    /* dfl */
  }

  .c2 p {
    padding: 0rem 20vw;
  }

  /* section 3 */

  .c3 {
    margin: 20rem 2rem;
  }

  .c3 img {
    width: 50%;
  }

  /* .c3 h2 {

  } */

  .c3 p {
    padding: 0rem 20vw;

  }

  /* section-4 */

  .c4 {
    margin: 10rem 2rem;
  }

  .c4 img {
    width: 50%;
  }

  .c4 h2 {
    /* dfl */
  }

  .c4 p {
    padding: 0rem 20vw;

  }

  /* section 5 */

  .c5 {
    margin: 30rem 0rem;
  }

  /* footer  */
  .footer {
    padding: 1rem 6rem;

  }


}

@media (min-width:1440px) {
  .sec1 {
    background-size: 100% 20%;
  }

  .data {
    padding: 0rem 15vw;
  }

  .btn-2 {
    margin: 2rem 0rem;
  }

  .stat-container {
    padding: 6rem 1rem;
    gap: 14rem;
  }

  .container {
    margin: 1.4rem, 3rem;
  }

  /* section 2 */
  .sec2 {
    background-size: 100% 20%;
  }

  .c2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* two equal columns */
    gap: 5rem;
    align-items: center;
    margin-bottom: 40rem;
    top: 20rem;

  }

  .data-container {
    order: 1;
  }

  .c2 img {
    order: 2;
    width: 85%;
  }

  .c2 p {
    padding: 0rem 16%;
  }

  .sec5 {
    background-size: 100% 20%, 150% 20%;
  }

  /* ::selection3 */
  .sec3 {
    background-size: 100% 20%;
  }

  .c3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* two equal columns */
    gap: 5rem;
    align-items: center;
  }

  .data-container {
    order: 2;
  }

  .c3 img {
    order: 1;
    width: 85%;
  }

  .c3 p {
    padding: 0rem 16%;
  }

  /* section 4 */
  .sec4 {
    background-size: 100% 20%;
  }

  .c4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* two equal columns */
    gap: 5rem;

    align-items: center;
  }

  .data-container {
    order: 1;
  }

  .c4 img {
    order: 2;
    width: 85%;
  }

  .c4 p {
    padding: 0rem 16%;
  }

  /* footer */

  .footer-cont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 10rem;
  }

  .footer-art-1 {
    order: 2;

  }

  .footer-art-2 {
    order: 1;

  }

  .sci-icons {
    order: 3;
    margin-bottom: 4rem;
  }
}