@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@font-face {
  font-family: var(--secondry-font);
  src: url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap")
    format("woff2");
  font-display: swap;
}
:root,
:root.red {
  --bg-color: #fff;
  --text-color: #ffa500;
}

/*:root.blue {
  --bg-color: #121212;
  --text-color: #45ADFE;
}

:root.pink {
  --bg-color: #cc0066;
  --text-color: #fff;
}*/

/*main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 0;
  height: 100vh;
  box-sizing: border-box;
}*/
#carouselExampleCaptions {
  touch-action: pan-y;
  margin-top: 140px;
}
/* h1 {
  text-align: center;
  font-weight: normal;
} */

.toggle-container {
  position: relative;
}

.theme-btn {
  width: 6em;
  height: 6em;
  padding: 0.5em;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.theme-btn img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.dark .theme-btn.light {
  display: block;
}
.main-banner-caption {
  position: absolute;
  top: 18%;
  z-index: 99;
  left: 5rem;
  width: 42%;

  & h2 {
    font-size: 60px;
    color: #000;
    letter-spacing: -2px;
    font-family: var(--secondry-font);
  }

  & h2 span {
    color: var(--primary-color);
  }

  & p {
    color: #1b1919;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    margin-top: 20px;
  }
}

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 18px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  transition: 0.6s;
  padding: 5px 0 9px;
  background: 0 0;
  border: 1px solid #fff0;
  box-shadow: none;
  border-radius: 106px;
  position: relative;
  opacity: 1;
}
#carouselExampleCaptions .carousel-indicators {
  left: 0;
  bottom: 21%;
  display: inline;
  margin-left: 6%;
}
#carouselExampleCaptions .carousel-indicators button:before {
  content: "";
  position: absolute;
  background: #bebebe;
  width: 7px;
  height: 7px;
  left: 7px;
  border-radius: 100px;
  top: 6px;
}
#carouselExampleCaptions .carousel-indicators [data-bs-target] {
  width: 8px;
}
#carouselExampleCaptions .carousel-indicators .active:before {
  background: var(--primary-color);
  width: 7px;
  height: 7px;
}

.life-at-ummeed button {
  border: 1px solid var(--yellow-color) !important;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  margin: 0 3px;
}
.life-at-ummeed button span {
  font-size: 75px;
  color: var(--white-color);
  line-height: 28px;
}
.life-at-ummeed button.owl-next {
  position: absolute;
  top: 43%;
  right: 0;
}
.life-at-ummeed button.owl-prev {
  position: absolute;
  top: 43%;
  left: 0;
}

.box-text-image {
  position: relative;

  & h2 {
  }

  & .box-caption {
    position: absolute;
    width: 60%;
    left: 5%;
    top: 8%;
    color: var(--white-color);
  }
}
.banner-boxes {
  margin-top: -5rem;
}
section.our-journey {
  padding: 50px 0;
}
.our-journey h1 {
  color: var(--black-color);
  font-size: var(--font-size-45);
  margin-bottom: 30px;
}
.our-journey h1 span {
  color: var(--primary-color);
}
.journey-video {
  position: relative;
  & .learn-more {
    position: absolute;
    top: 12%;
    left: 10%;
    z-index: 9;
  }
  & .learn-more h4 {
    color: var(--white-color);
    font-weight: var(--font-weight-500);
  }

  & .founder-text {
    position: absolute;
    bottom: 12%;
    left: 12%;
  }

  & .founder-text p span {
    font-size: var(--font-size-14);
  }

  & .founder-text p {
    color: var(--white-color);
  }
  & a {
    display: block;
    border-radius: 15px;
    overflow: hidden;
  }
  & .founder-text img {
    width: 40px;
    margin-bottom: 1rem;
  }
  & picture img {
    transition: 1.5s cubic-bezier(0, 0, 0.2, 1);
  }
  & picture {
    position: relative;
    overflow: hidden;
  }
  &:hover picture img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.count-number {
  color: var(--primary-color);
  font-family: var(--secondry-font);
  font-size: 40px;
}

.journey-text p {
  color: #000;
}
@media screen and (max-width: 1366px) {
  .children-and-familys .family-children-caption {
    top: 6%;
  }
}

/* .children-and-familys {
  position: relative;
  .family-children-caption {
    position: absolute;
    top: 15%;
    left: 6%;
    width: 39%;
  } */
/* date 13-8-24 */
.children-and-familys {
  position: relative;
  .family-children-caption {
    position: absolute;
    top: 7%;
    left: 6%;
    width: 39%;
  }
  & h2 {
    font-size: 45px;
    color: #fff;
  }
  & p {
    color: #fff;
    font-size: 20px;
  }
}

.training-box {
  position: relative;
  & .training-box-caption {
    position: absolute;
    bottom: 10%;
    left: 10%;
  }
  & .training-box-caption h3 {
    color: var(--white-color);
    font-size: var(--font-size-31);
  }
  & a {
    display: block;
    border-radius: 13px;
    overflow: hidden;
  }
  & picture img {
    transition: 1.5s cubic-bezier(0, 0, 0.2, 1);
  }
  & picture {
    position: relative;
    overflow: hidden;
  }
  &:hover picture img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.training-section {
  padding: 50px 0;
  position: relative;
  & h2 {
    color: var(--black-color);
    font-family: var(--secondry-font);
    font-size: var(--font-size-45);
    margin-bottom: 30px;
  }
  & h2 span {
    color: var(--primary-color);
  }
}
.awareness {
  & h2 {
    color: var(--black-color);
    font-size: var(--font-size-45);
    margin-bottom: 20px;
  }
  & picture {
    margin-bottom: 10px;
    display: block;
  }
  & span {
    color: var(--primary-color);
    font-size: var(--font-size-14);
  }
  & p {
    color: var(--black-color);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-500);
  }
  & a span {
    color: var(--white-color);
  }
}
.latest-updates {
  & h2 {
    color: var(--black-color);
    font-size: var(--font-size-45);
    margin-bottom: 20px;
  }
  & h2 span {
    color: var(--primary-color);
  }
}
.latest-update-list a {
  display: flex;
  margin-bottom: 25px;
  text-decoration: none;
  align-items: center;
}
.latest-updates-list-image {
  width: 170px;
}
.latest-updates a.primary-cta-btn {
  margin-top: 1.7rem;
}
.latest-updates-list-text {
  margin-left: 30px;
  width: 100%;
  & span {
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
  }
  & p {
    color: var(--black-color);
    font-size: var(--font-size-16);
  }
}
section.work-section {
  position: relative;
  padding: 50px 0;
}
.work-image-caption {
  position: relative;
  & .work-caption {
    position: absolute;
    bottom: 10%;
    left: 12%;
  }
  & .work-caption h3 {
    color: var(--white-color);
    margin-top: 20px;
    font-size: var(--font-size-24);
  }
  & p {
    color: var(--white-color);
  }
  & a {
    display: block;
    border-radius: 13px;
    overflow: hidden;
  }
  & picture img {
    transition: 1.5s cubic-bezier(0, 0, 0.2, 1);
  }
  & picture {
    position: relative;
    overflow: hidden;
  }
  &:hover picture img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.work-head-text {
  & h2 {
    color: var(--black-color);
    font-size: var(--font-size-45);
    margin-bottom: 20px;
  }
  & h2 span {
    color: var(--primary-color);
  }
  & p {
    font-weight: var(--font-weight-300);
    color: var(--black-color);
  }
}
.bg-animte {
  position: absolute;
  left: -25%;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 10s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: -10%;
  }
  100% {
    left: 0;
  }
}

.icon-ummeedLife {
  position: absolute;
  background: var(--primary-color);
  width: 40px;
  height: 40px;
  border-radius: 100px;
  left: 7%;
  top: 8%;
  z-index: 9;
  & img {
    width: auto !important;
    margin: 12px auto;
  }
}
.life-at-ummeed {
  & h2 {
    color: var(--black-color);
    font-size: var(--font-size-45);
    margin-bottom: 20px;
    text-align: center;
  }
  & h2 span {
    color: var(--primary-color);
  }
}
.ummeed-life-box {
  & a {
    display: block;
    overflow: hidden;
  }
  & picture img {
    transition: 1.5s cubic-bezier(0, 0, 0.2, 1);
  }
  & picture {
    position: relative;
    overflow: hidden;
  }
  &:hover picture img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.career-with-us {
  padding: 50px 0;
}
.resource-bg-animte {
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: runs;
  -webkit-animation-duration: 10s;
}
@-webkit-keyframes runs {
  0% {
    right: 0;
  }
  50% {
    right: 0;
  }
  100% {
    right: 0;
  }
}

.large-font {
  font-size: 20px;
}

.small-font {
  font-size: 12px;
}
.main-banner-item {
  background: #e9dfde;
  padding-bottom: 150px;
}
.banner-image {
  margin-top: 60px;
  position: relative;
}

img.right-triangle {
  position: absolute;
  left: -33%;
  top: 50%;
  animation: rotate 5s linear infinite;
}
img.right-triangle-2 {
  position: absolute;
  right: 6%;
  top: 0%;
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
span.top-grey {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #cbbbbb;
  left: 36%;
  top: 5%;
  animation: nudge 2s linear infinite alternate;
}
span.left-grey {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #cbbbbb;
  left: -15%;
  top: 35%;
}
span.bottom-red {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #d31f25;
  left: -12%;
  bottom: 15%;
  animation: MoveUpDown 4s linear infinite;
}
span.right-red {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: #d31f2573;
  right: 10%;
  bottom: 2%;
}

@keyframes nudge {
  0%,
  100% {
    transform: translate(-10px, 0);
  }

  50% {
    transform: translate(10px, 0);
  }

  80% {
    transform: translate(-10px, 0);
  }
}
@keyframes MoveUpDown {
  0%,
  100% {
    bottom: 0;
  }
  50% {
    bottom: 60px;
  }
}

.reach-us-text {
  & h3 {
    font-size: var(--font-size-32);
    color: var(--black-color);
    margin-bottom: 20px;
  }
  & h3 span {
    color: var(--primary-color);
  }
  & p a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
  }
  & p a img {
    margin-right: 10px;
  }
}

.reachusform-section form input[type="text"] {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--black-color);
  font-size: var(--font-size-13);
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}
.reachusform-section form textarea {
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--black-color);
  font-size: var(--font-size-13);
  width: 100%;
  margin-bottom: 20px;
}
.reachusform-section form label {
  font-size: var(--font-size-14);
  color: var(--black-color);
}
.errormsg {
  position: absolute;
  bottom: -4px;
  left: -5px;
  padding: 1px 5px;
  display: none;
  font-size: 13px;
  color: var(--primary-color);
}
.reachusform-section form .form-group {
  position: relative;
}
.reachusform-section form input:focus-visible {
  box-shadow: none;
  outline: none;
}
input#countrycode {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 12%;
}
input#contact {
  position: relative;
  width: 88%;
  margin-left: 12%;
}
.reachusform-section button.primary-cta-btn {
  border: none;
  /* margin-top: 0; */
}

section.reach-us {
  padding-bottom: 50px;
}


/*New css Hindi 17-2-25*/
.main-banner-item.main-banner-item-hindi h2 {
    font-weight: 700;
    line-height: 80px;
}
.count-number.hindi-count span {
    font-weight: 700;
}