/* variable css */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
:root {
  --primary: #111111;
  --secondary: #555555;
  --border: rgba(17, 17, 17, 0.1);
  --bg: #111111;
  --theme: #FA814D;
  --black: #111111;
  --white: #FFFFFF;
  --action: #FA814D;
}

.dark {
  --primary: #FFFFFF;
  --secondary: #999999;
  --border: rgba(255, 255, 255, 0.1);
  --bg: #171717;
}

/* typography css */
/* dm sans  */
/* bdo grotesk  */


.impact-area .impact-inner {
 /* padding-top: 177px; */
}
@media only screen and (max-width: 1919px) {
  .impact-area .impact-inner {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 1399px) {
  .impact-area .impact-inner {
    padding-top: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .impact-area .impact-inner {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .impact-area .impact-inner {
    padding-top: 60px;
  }
}
.impact-area .impact-inner .impact-media {
  position: relative;
}
.impact-area .impact-inner .small-image {
  position: absolute;
  left: 50px;
  top: -177px;
}
@media only screen and (max-width: 767px) {
  .impact-area .impact-inner .small-image {
    position: inherit;
    margin-top: 30px;
  }
}
.impact-area .impact-inner .impact-content .designation {
  top: 70px;
  right: 50px;
  font-size: 14px;
  color: #F8F2EF;
  max-width: 257px;
  font-weight: 400;
  line-height: 16px;
  position: absolute;
  letter-spacing: -0.7px;
  text-transform: uppercase;
  font-family: var(--font_bdogrotesk);
}
.dark .impact-area .impact-inner .impact-content .designation {
  color: #FFFFFF;
}
@media only screen and (max-width: 767px) {
  .impact-area .impact-inner .impact-content .designation {
    top: 180px;
    left: 30px;
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .impact-area .impact-inner .impact-content .designation {
    top: 136px;
    left: 20px;
  }
}
.impact-area .impact-inner .impact-content .title {
  left: 50px;
  bottom: 20px;
  color: #F8F2EF;
  font-size: 180px;
  font-weight: 200;
  line-height: 170px;
  position: absolute;
  text-transform: uppercase;
  font-family: var(--font_ppeditor);
}
@media only screen and (max-width: 1399px) {
  .impact-area .impact-inner .impact-content .title {
    font-size: 120px;
    line-height: 130px;
  }
}
@media only screen and (max-width: 1199px) {
  .impact-area .impact-inner .impact-content .title {
    font-size: 100px;
    line-height: 110px;
  }
}
@media only screen and (max-width: 991px) {
  .impact-area .impact-inner .impact-content .title {
    font-size: 70px;
    line-height: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .impact-area .impact-inner .impact-content .title {
    font-size: 50px;
    line-height: 60px;
    top: 30px;
    left: 30px;
  }
}
@media (max-width: 575px) {
  .impact-area .impact-inner .impact-content .title {
    font-size: 28px;
    line-height: 40px;
    top: 30px;
    left: 20px;
  }
}