:root {
  /* font faimly */
  --primary-font-family: "Montserrat", sans-serif;
  --secondary-font-family: "Roboto", sans-serif;

  /* font size */
  /* 58px */
  --primary-font: 3.625rem;
  /* 40px */
  --secondary-font: 2.5rem;
  /* 24px */
  --tertiary-font: 1.5rem;
  /* 20px */
  --quaternary-font: 1.25rem;
  /* 16 */
  --penta-font: 1rem;
  /* 14px */
  --hexa-para: 0.875rem;

  /* font weight */
  --bold: 700;
  --semi-bold: 600;
  --medium: 500;
  --normal: 400;

  /* colors */
  --blue: #23a6f0;
  --pink: #d03ce8;
  --dark-grey: #252b42;
  --light-grey: #737373;
  --lightt-grey: #fafafa;
  --white: white;
}

.primary-heading {
  /* 58px */
  font-size: var(--primary-font);
  font-weight: var(--normal);
  font-family: var(--secondary-font-family);
  color: var(--white);
}
.secondary-heading {
  /* 24px */
  font-size: var(--tertiary-font);
  font-weight: var(--normal);
  font-family: var(--secondary-font-family);
  color: var(--dark-grey);
}
.tertiary-heading {
  /* 40px */
  font-size: var(--secondary-font);
  font-weight: var(--normal);
  font-family: var(--secondary-font-family);
  color: var(--dark-grey);
}
.quaternary-heading {
  /* 40px */
  font-size: var(--secondary-font);
  font-weight: var(--normal);
  font-family: var(--secondary-font-family);
  color: var(--white);
}

.primary-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--blue);
}
.secondary-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--white);
}
.tertiary-para {
  /* 16px */
  font-size: var(--penta-font);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--blue);
}
.quaternary-para {
  /* 20px */
  font-size: var(--quaternary-font);
  font-weight: var(--normal);
  font-family: var(--secondary-font-family);
  color: var(--white);
}
.penta-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--pink);
}
.hexa-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--normal);
  font-family: var(--primary-font-family);
  color: var(--light-grey);
}
.hepta-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--normal);
  font-family: var(--primary-font-family);
  color: var(--white);
}
.octa-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--light-grey);
}
.nona-para {
  /* 14px */
  font-size: var(--hexa-para);
  font-weight: var(--bold);
  font-family: var(--primary-font-family);
  color: var(--dark-grey);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
}
a {
  text-decoration: none !important;
}
.page-width {
  max-width: 1440px;
  width: 90%;
  margin: auto;
}

/* hero banner start */
.hero-banner-bg {
  background: #252b42;
}
.primaryBtn {
  background-color: #d03ce8;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 8px 30px;
}
.right-arrow {
  bottom: 6px;

  right: 10px;
}
.secondaryBtn {
  background-color: #d03ce8;
  outline: none;
  border: none;
  border-radius: 5px;
  padding: 10px 25px;
}
.tertiaryBtn {
  background: transparent;
  outline: none;
  border: 1px solid #d03ce8;
  border-radius: 5px;
  padding: 10px 25px;
}
.heroBanner-p1 {
  padding-top: 6rem;
  padding-bottom: 0.5rem;
}
.heroBanner-p2 {
  padding: 1rem 0rem;
}
/* hero banner end */
/* features section start */
.feature-para {
  max-width: 200px;
  margin: 0 auto;
}
.features-container {
  padding: 5rem 0rem;
}
.feature-h1 {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}
.features-container img {
  max-width: 60px;
}
/* features section end */
/* two columns section start */
.two-cols-h1 {
  padding-top: 6rem;
  max-width: 365px;
}
.two-cols-p1 {
  padding: 2rem 0rem;
  max-width: 365px;
}
.two-cols-container {
  padding: 2rem 0rem;
}
/* two columns section end */
/* Take a look Inside our Muzebox section start */
.content-ui-container {
  background: #252b42;
  padding: 3rem 0rem;
  margin-top: 3rem;
}
.content-ui-para {
  max-width: 768px;
  margin: 0 auto;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}
/* Take a look Inside our Muzebox section end */
/* company-ui-3 section start */
.company-ui-container {
  padding: 5rem 0rem;
}
.company-ui-p {
  max-width: 210px;
  padding: 1rem 0rem;
}
/* company-ui-3 section end */
/* What Clients Say start */
.testimonials-container {
  padding-bottom: 4rem;
  background: #fafafa;
}
.testimonials-h1 {
  padding-top: 6rem;
  max-width: 365px;
  margin: 0 auto;
}
.testimonials-p1 {
  padding-top: 2rem;
  padding-bottom: 4rem;
  max-width: 450px;
  margin: 0 auto;
}
.client-box-container {
  padding: 1.5rem;
  border: 1px solid #dedede;
  border-radius: 5px;
}
.client-box-p {
  padding: 1rem 0rem;
}
/* What Clients Say end */
/* Ready to get started? start */
.getStarted-bg {
  background: #252b42;
}
.get-started-container {
  padding: 3rem 0rem;
}
.get-started-p {
  padding: 1rem 0rem;
  max-width: 768px;
  margin: 0 auto;
}
/* Ready to get started? end */
/* footer start */
.footer-bg {
  background-color: #fafafa;
}
.footer-p {
  padding: 1.5rem 0rem;
}
/* footer end */

@media all and (max-width: 768px) {
  /* hero banner mq start */
  .logo {
    max-width: 30px;
  }
  .primaryBtn {
    background-color: #d03ce8;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
  }
  .primary-heading {
    font-size: 2.5rem;
  }
  .heroBanner-p1 {
    padding-top: 3rem;
    padding-bottom: 0.5rem;
  }
  /* hero banner mq end */
  /* features section mq start */
  .features-container img {
    max-width: unset !important;
  }
  .features-container :nth-child(n + 2) {
    margin-top: 1rem;
  }
  .features-container {
    padding: 3rem 0rem;
  }
  /* features section mq end */
  /* two columns section mq start */
  .two-cols-h1 {
    max-width: unset !important;
    padding-top: 1rem;
  }
  .tertiary-heading {
    font-size: 1.5rem;
  }
  .two-cols-p1 {
    padding: 1rem 0rem;
  }
  .two-cols-container {
    padding: 1rem 0rem;
    gap: 4rem;
  }
  .two-cols-container2 {
    padding: 1rem 0rem;
    gap: 4rem;
    flex-wrap: wrap-reverse;
  }
  /* two columns section mq end */
  /* Take a look Inside our Muzebox section mq start */
  .quaternary-heading {
    font-size: 1.5rem;
  }
  /* Take a look Inside our Muzebox section mq end */
  /* company-ui-3 section mq start */
  .company-ui-container {
    padding: 3rem 0rem;
  }
  .company-ui-p {
    max-width: unset;
  }
  .company-ui-container :nth-child(n + 2) {
    margin-top: 0.5rem;
  }
  /* company-ui-3 section mq end */
  /* What Clients Say mq start */
  .testimonials-h1 {
    padding-top: 2rem;
  }
  .testimonials-container {
    padding-bottom: 2rem;
  }
  .testimonials-container :nth-child(n + 2) {
    margin-top: 1rem;
  }
  /* What Clients Say mq end */
  /* Ready to get started? mq start */
  /* Ready to get started? mq end */
}