/* ========================================================================== 

   ========================================================================== */
/* ===== 

   ===== */
/* Project Global Colors List */
/* 
    Primary Colors:
        - Light for Light colors
        - Dark for Dark colors
        - Highlighted for Animated Colors
*/
/* 
    Secondary Colors:
        - Soft for light colors
        - Strong for dark colors
        - Focused for Animated Colors
*/
/* 
    for text colors:
        - color
        - label
    for backgrounds colors:
        - bg
*/
/* These variables are defining different colors for *Typography, like paragraph, blogs, normal text* elements in the project. */
/* These variables are defining different *Sections Background Colors* for various elements in the project. */
/* These variables are defining different colors for *Title* elements in the project. */
/* These variables are defining different colors for *Sub Title* elements in the project. */
/* These variables are defining different colors for *Links* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Container, Cards or Blocks* elements in the project. */
/* These variables are defining different colors for *Inputs* elements in the project. */
/* These variables are defining different colors for *Labels* elements in the project. */
/* These variables are defining different colors for *Error or Warning Text Color* elements in the project. */
/* These variables are defining different colors for *Disabled or Inactive Text Color* elements in the project. */
/* These variables are defining different colors for *Ignoreable Fade & Dimmed texts* elements in the project. */
/* These variables are defining different colors for *Box Shadows* in the project. */
/* Project Global Colors List */
/* 
    Primary Colors:
        - Light for Light colors
        - Dark for Dark colors
        - Highlighted for Animated Colors
*/
/* 
    Secondary Colors:
        - Soft for light colors
        - Strong for dark colors
        - Focused for Animated Colors
*/
/* 
    for text colors:
        - color
        - label
    for backgrounds colors:
        - bg
*/
/* These variables are defining different colors for *Typography, like paragraph, blogs, normal text* elements in the project. */
/* These variables are defining different *Sections Background Colors* for various elements in the project. */
/* These variables are defining different colors for *Title* elements in the project. */
/* These variables are defining different colors for *Sub Title* elements in the project. */
/* These variables are defining different colors for *Links* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Container, Cards or Blocks* elements in the project. */
/* These variables are defining different colors for *Inputs* elements in the project. */
/* These variables are defining different colors for *Labels* elements in the project. */
/* These variables are defining different colors for *Error or Warning Text Color* elements in the project. */
/* These variables are defining different colors for *Disabled or Inactive Text Color* elements in the project. */
/* These variables are defining different colors for *Ignoreable Fade & Dimmed texts* elements in the project. */
/* These variables are defining different colors for *Box Shadows* in the project. */
/* Project Global Colors List */
/* 
    Primary Colors:
        - Light for Light colors
        - Dark for Dark colors
        - Highlighted for Animated Colors
*/
/* 
    Secondary Colors:
        - Soft for light colors
        - Strong for dark colors
        - Focused for Animated Colors
*/
/* 
    for text colors:
        - color
        - label
    for backgrounds colors:
        - bg
*/
/* These variables are defining different colors for *Typography, like paragraph, blogs, normal text* elements in the project. */
/* These variables are defining different *Sections Background Colors* for various elements in the project. */
/* These variables are defining different colors for *Title* elements in the project. */
/* These variables are defining different colors for *Sub Title* elements in the project. */
/* These variables are defining different colors for *Links* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Button* elements in the project. */
/* These variables are defining different colors for *Container, Cards or Blocks* elements in the project. */
/* These variables are defining different colors for *Inputs* elements in the project. */
/* These variables are defining different colors for *Labels* elements in the project. */
/* These variables are defining different colors for *Error or Warning Text Color* elements in the project. */
/* These variables are defining different colors for *Disabled or Inactive Text Color* elements in the project. */
/* These variables are defining different colors for *Ignoreable Fade & Dimmed texts* elements in the project. */
/* These variables are defining different colors for *Box Shadows* in the project. */
/* Headings */
/* Headings */
/* Text */
/* Text */
/* Button Sizes */
/* Spacing */
/* The code snippet is defining variables in SCSS (Sass) for different screen sizes. Each variable
represents a specific screen width in pixels. These variables can be used throughout the SCSS file
to create responsive styles based on the screen size. For example, you can use these variables in
media queries to apply different styles for different screen sizes. */
/* Primary Font Family */
/* Secondary Font Family */
/* Tertiary Font Family */
/* Quaternary Font Family */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&display=swap");
/* Project Base CSS */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  font-family: Poppins;
  font-size: 2.2rem;
  font-feature-settings: "lnum", "pnum";
  background: rgb(0, 0, 0);
}

._section_container {
  width: 100%;
  margin: 0 auto;
  max-width: 117rem;
}
@media only screen and (max-width: 1440px) {
  ._section_container {
    padding: 0 6rem;
    max-width: 129rem;
  }
}
@media only screen and (max-width: 1024px) {
  ._section_container {
    padding: 0 2rem;
  }
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

._divider {
  display: block;
}

/* ===== 
    Heder CSS Start
   ===== */
._app_header {
  padding-left: 5.4rem;
  position: relative;
  z-index: 3;
}
._app_header_main-logo_media {
  height: auto;
  max-width: 206px;
}
._app_header_wrapper {
  padding-top: 54px;
}

@media only screen and (max-width: 1024px) {
  ._app_header {
    padding-left: 2rem;
  }
  ._app_header_main-logo_media {
    height: auto;
    max-width: 185px;
  }
  ._app_header_wrapper {
    padding-top: 4.4rem;
  }
}
/* ===== 
    Heder CSS End
   ===== */
._slider {
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}
._slider_items {
  gap: 13rem;
  width: 100%;
  display: flex;
  position: absolute;
  align-self: center;
  justify-content: center;
  z-index: 2;
}
._slider_info {
  display: flex;
  width: 55.5rem;
  height: 47.1rem;
  position: relative;
}
._slider_info_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  max-height: 47.1rem;
}
._slider_info_content {
  width: 100%;
  margin: 0 auto;
  font-size: 38px;
  font-weight: 600;
  line-height: 52px;
  text-align: center;
  align-self: center;
  z-index: 2;
  justify-content: center;
  color: #fff;
}
._slider_info svg {
  width: 100%;
}
._slider_info svg path {
  stroke-dasharray: 2618;
  stroke-dashoffset: 2618;
  animation: dash 1.2s ease-in forwards;
}
._slider_card {
  gap: 2.5rem;
  display: flex;
  width: 53.5rem;
  padding: 8rem 5rem;
  align-self: center;
  height: fit-content;
  border-radius: 6px;
  background: #fff;
  align-items: center;
  min-height: 35.5rem;
  flex-direction: column;
  justify-content: center;
}
._slider_card-title {
  color: #040404;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%; /* 35.2px */
}
._slider_card-description {
  color: #333;
  text-align: center;
  font-family: Arial;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px; /* 135% */
}
._slider_card-social {
  gap: 2rem;
  display: flex;
}
._slider_card-social span {
  cursor: pointer;
  max-width: 56.5px;
}

@media only screen and (max-width: 1440px) {
  ._slider_items {
    gap: 10rem;
  }
  ._slider_card {
    width: 53.5rem;
  }
}
@media only screen and (max-width: 1280px) {
  ._slider_items {
    gap: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  ._slider_info {
    height: 36vw;
    justify-content: center;
  }
  ._slider_info_content {
    margin: unset;
    font-size: 3.2rem;
    max-width: 40rem;
    line-height: 4.5rem;
  }
  ._slider_info svg {
    height: 100%;
  }
  ._slider_card {
    height: 32vw;
    min-height: unset;
  }
}
@media only screen and (max-width: 1024px) {
  body {
    height: 120vh;
  }
  ._flex_slide_collection {
    height: 120vh;
  }
  ._slider_items {
    top: 15rem;
    gap: 6rem;
    flex-direction: column;
    align-items: center;
  }
  ._slider_info {
    height: 33rem;
  }
  ._slider_info_content {
    font-size: 3rem;
  }
  ._slider_card {
    width: 50rem;
    padding: 7rem 4rem;
    height: 30vw;
    min-height: 35.5rem;
  }
  ._slider_card-title {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 580px) {
  ._slider_items {
    overflow: hidden;
  }
  ._slider_info_content {
    font-size: 2.8rem;
    line-height: 3.8rem;
  }
  ._slider_card {
    width: 33rem;
    padding: 5rem 2rem;
    height: unset;
    min-height: unset;
  }
  ._slider_card-title {
    font-size: 2.5rem;
  }
  ._slider_card-social {
    gap: 1rem;
  }
  ._slider_card-social span {
    max-width: 4rem;
  }
  ._slider_card-social span svg {
    width: 100%;
    height: auto;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
._footer {
  z-index: 3;
  width: 100%;
  bottom: 5.3rem;
  position: absolute;
}
._footer_wrapper {
  padding-left: 5.4rem;
}
._footer_copyright {
  color: #fff;
  text-align: left;
  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 214.286% */
}

@media only screen and (max-width: 1024px) {
  ._footer {
    bottom: -15rem;
  }
  ._footer_wrapper {
    padding-left: 2rem;
  }
  ._footer_copyright {
    text-align: center;
  }
}
._bg_circle_rotate {
  z-index: 0;
  position: absolute;
  animation: rotate 5s linear infinite;
}
._bg_circle_rotate_wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

._bg_circle_rotate_wrapper.contact-us {
  top: -45%;
  right: 65%;
}
._bg_circle_rotate_wrapper.contact-us ._bg_circle_rotate_01 {
  left: -20%;
}
._bg_circle_rotate_wrapper.contact-us ._bg_circle_rotate_02 {
  left: -40%;
}
._bg_circle_rotate_wrapper.contact-us ._bg_circle_rotate_03 {
  top: -35%;
  left: -40%;
}
@media only screen and (max-width: 1440px) {
  ._bg_circle_rotate_wrapper.contact-us {
    top: -45%;
    right: 45%;
  }
}
@media only screen and (max-width: 1024px) {
  ._bg_circle_rotate_wrapper.contact-us {
    top: -45%;
    left: -60rem;
    right: unset;
  }
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.contact-us {
    top: -10%;
    left: -60rem;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.contact-us {
    top: 0%;
    left: -60rem;
  }
}

._bg_circle_rotate_wrapper.leader-slider {
  top: 86%;
  right: 15%;
}
._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_01 {
  left: -20%;
}
._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_02 {
  left: -40%;
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_02 {
    top: -75%;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_02 {
    top: -75%;
    left: -50%;
  }
}
._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_03 {
  top: -35%;
  left: -40%;
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate_03 {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  ._bg_circle_rotate_wrapper.leader-slider ._bg_circle_rotate {
    width: unset;
    height: unset;
  }
}
@media only screen and (max-width: 1440px) {
  ._bg_circle_rotate_wrapper.leader-slider {
    top: 80%;
    right: 15%;
  }
}
@media only screen and (max-width: 1280px) {
  ._bg_circle_rotate_wrapper.leader-slider {
    top: 74%;
    right: 9%;
  }
}
@media only screen and (max-width: 1024px) {
  ._bg_circle_rotate_wrapper.leader-slider {
    top: 20%;
    left: -25rem;
    right: unset;
  }
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.leader-slider {
    top: 20%;
    left: -25rem;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.leader-slider {
    top: 37%;
    left: -60rem;
  }
}

._bg_circle_rotate_wrapper.we-work {
  right: -43vw;
}
._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate {
  object-fit: cover;
}
._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_01 {
  left: -20%;
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_01 {
    top: 80%;
    left: -12%;
  }
}
._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_02 {
  display: none;
}
._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_03 {
  top: -15%;
  left: -45%;
}
@media only screen and (max-width: 1440px) {
  ._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_03 {
    top: 22%;
    left: -12%;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate_03 {
    top: 40%;
    left: 8%;
  }
}
@media only screen and (max-width: 1024px) {
  ._bg_circle_rotate_wrapper.we-work ._bg_circle_rotate {
    width: unset;
    height: unset;
  }
}
@media only screen and (max-width: 1280px) {
  ._bg_circle_rotate_wrapper.we-work {
    top: 0;
    right: -24vw;
  }
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.we-work {
    top: 20%;
    left: -25rem;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.we-work {
    top: -40%;
    left: -40rem;
  }
}

._bg_circle_rotate_wrapper.hero {
  top: -10rem;
  right: -25vw;
  text-align: center;
}
._bg_circle_rotate_wrapper.hero ._bg_circle_rotate {
  width: 82rem;
}
@media only screen and (max-width: 1024px) {
  ._bg_circle_rotate_wrapper.hero ._bg_circle_rotate {
    width: unset;
    height: unset;
  }
}
@media only screen and (max-width: 1440px) {
  ._bg_circle_rotate_wrapper.hero {
    top: 1rem;
    right: -15vw;
  }
}
@media only screen and (max-width: 1280px) {
  ._bg_circle_rotate_wrapper.hero {
    top: -26rem;
    right: 33rem;
  }
}
@media only screen and (max-width: 768px) {
  ._bg_circle_rotate_wrapper.hero {
    top: -30rem;
    right: 33rem;
  }
}
@media only screen and (max-width: 580px) {
  ._bg_circle_rotate_wrapper.hero {
    top: -30rem;
    right: 33rem;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
fill .path-to-animate path:nth-child(2) {
  animation: translateAnimation 1s linear infinite;
}

._cloud_service_svg {
  left: 57%;
  width: 58.5rem;
  height: 32rem;
  position: absolute;
}
._cloud_service_svg svg {
  top: 0;
  left: 0;
  width: fit-content;
  height: fit-content;
  position: absolute;
}
._cloud_service_svg svg.line-01 {
  left: -2.2rem;
  top: -10.9rem;
}
._cloud_service_svg svg.line-02 {
  left: -4.5rem;
  top: -4rem;
}
._cloud_service_svg svg.line-03 {
  left: 22rem;
  top: 14.5rem;
}
._cloud_service_svg svg.cloud-heavy {
  left: 17.5rem;
}
._cloud_service_svg svg.cloud-light {
  top: 4.8rem;
  left: 40.8rem;
}

@media only screen and (max-width: 1280px) {
  ._cloud_service_svg {
    width: 45rem;
    height: 25rem;
  }
  ._cloud_service_svg svg.line-01 {
    width: 42.7rem;
    left: -2.2rem;
    top: -8.9rem;
  }
  ._cloud_service_svg svg.line-02 {
    width: 42.7rem;
    left: -4.5rem;
    top: -3rem;
  }
  ._cloud_service_svg svg.line-03 {
    width: 42.7rem;
    left: 18rem;
    top: 5rem;
  }
  ._cloud_service_svg svg.sheet {
    width: 50.9rem;
    top: -2rem;
  }
  ._cloud_service_svg svg.cloud-heavy {
    width: 22rem;
    left: 15.5rem;
  }
  ._cloud_service_svg svg.cloud-light {
    width: 11rem;
    top: 4.2rem;
    left: 33rem;
  }
}
@media only screen and (max-width: 768px) {
  ._cloud_service_svg {
    height: 18rem;
  }
  ._cloud_service_svg svg.line-01 {
    width: 26.1rem;
    left: 6rem;
    top: -6.5rem;
  }
  ._cloud_service_svg svg.line-02 {
    width: 26.1rem;
    left: 4.5rem;
    top: -3rem;
  }
  ._cloud_service_svg svg.line-03 {
    width: 22rem;
    left: 20rem;
    top: 3.4rem;
  }
  ._cloud_service_svg svg.sheet {
    width: 31rem;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
  }
  ._cloud_service_svg svg.cloud-heavy {
    width: 13.5rem;
    left: 17.5rem;
    top: -1rem;
  }
  ._cloud_service_svg svg.cloud-light {
    width: 6.6rem;
    top: 1.2rem;
    left: 28.5rem;
  }
}

/*# sourceMappingURL=styles.css.map */