/* You can add global styles to this file, and also import other style files */
  body {
      overflow-x: hidden;
      padding: 0;
      margin: 0;
      height: auto;
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
      height: 100%;
      /* overflow-x: hidden; */
      /* scroll-behavior: smooth; */

  }

  .gsap-marker-start,
  .gsap-marker-end {
      z-index: 9999 !important;
  }


  html {
      /* overflow-x: hidden; */
      height: 100%;
      overflow-x: hidden;
      /* scroll-behavior: auto; */
      /* height: auto; */
  }

  :root {
      --main-gradient: radial-gradient(circle, rgba(67, 106, 104, 1) -75%, rgba(0, 0, 0, 1) 100%);
      --bg-white: #fff;
      --text-white: #fff;
      --bg-black: #000;
      --text-black: #000;
      --base-color: #40F0CE;
      --grey-color: #F4F4F4;
      --border-white: #fff;
      --border-black: #000;
      --light-grey: #A9A9AA;
  }

  nav {
      position: fixed !important;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1111;
      transition: 0.5s;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: "Roboto Serif", serif;
  }

  p,
  button,
  a,
  span {
      font-family: "DM Sans", sans-serif;
  }

  h1 {
      font-size: 64px;
  }

  h2 {
      font-size: 45px;
  }

  h3 {
      font-size: 32px;
  }

  h4 {
      font-size: 30px;
  }

  h5 {
      font-size: 25px;
  }

  h6 {
      font-size: 22px;
  }

  p {
      font-size: 18px;
  }

  a,
  a:hover {
      text-decoration: none;
  }

  button,
  .main-menu li a {
      font-size: 18px;
  }

  .main-menu li a {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-white);
      transition: 1s;
      padding: 10px 50px;
      margin-right: 5px;
      text-transform: uppercase;
      letter-spacing: 2px;
  }

  .global_section#technologies ,
  .global_section#team,
  footer.global_section{
      background: var(--main-gradient) !important;
  }

  .main-menu li a:hover {
      color: var(--text-white);
      transition: 1s;
      background-color: var(--base-color);
      border-radius: 10px;
  }

  .main-menu li.active a {
      color: var(--text-black);
      transition: 1s;
      background-color: var(--base-color);
      border-radius: 10px;
      font-weight: bold;
  }

  .navbar {
      background-color: var(--bg-black);
      padding-top: 15px;
      padding-bottom: 15px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
  }

  .navbar-collapse.collapse.show {
      padding: 100px 0;
  }

  .header_get_in_touch {
      background-color: var(--bg-white);
      color: var(--text-black);
      border-radius: 100px;
      padding: 15px;
  }

  .start_free_trial_btn {
      background-color: var(--base-color);
      color: var(--text-black);
      text-transform: uppercase;
      border-radius: 100px;
      font-weight: bold;
  }
  .start_free_trial_btn span i{
    color: var(--text-black);
    font-weight: bold;
    font-size: 18px;

  }

  .start_free_trial_btn:hover {
      background-color: var(--base-color);
      color: var(--text-black);
      text-transform: uppercase;
      border-radius: 100px;
  }

  /* .start_free_trial_btn span {
      border-radius: 100px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-black);
      text-align: center;
  } */

  .top_banner_content h3 {
      color: var(--text-white);

  }

  .top_banner_content h3.highlight small {
      color: var(--base-color);
  }
  .highlight {
      color: var(--base-color);
  }
.fa-square-check{
    color: var(--base-color);
    font-size: 22px;
}
  .top_banner_content p,
  .top_banner_content h6,
  .top_banner_content ul li {
      color: var(--text-white);
  }
  .top_section {
      /* background-color: var(--bg-black); */
      background: var(--main-gradient);
      padding: 100px 0 45px 0;
      /* height: 100vh; */
      overflow: hidden;
      position: relative;
  }

  .top_section.tech_top_section {
      padding: 200px 0 50px 0 !important;
  }

  .first_circle {
      border-radius: 100%;
      box-sizing: border-box;
      border: 1px solid var(--base-color);
      will-change: transform;
      margin-top: 60px;
      /* width: 500px; */
  }

  .second_circle {
      border-radius: 100%;
      box-sizing: border-box;
      border: 1px solid var(--base-color);
      will-change: transform;
      width: 100%;
  }

  .text-align-justify {
      text-align: justify;
  }

  .brands_list img {
      width: 147px;
      height: 53px;
  }

  .brands_head {
      color: var(--base-color);
  }

  .slider-container {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
  }

  .slider-track {
      display: inline-flex;
      will-change: transform;
      align-items: center;
  }

  .brands_head span {
      font-family: "Roboto Serif", serif;
  }

  .shape_star_1,
  .shape_star_2 {
      position: absolute;
      width: 183px;
      height: 192px;
  }

  .shape_star_1 {
      top: 300px;
      left: 0;

  }

  .shape_star_2 {
      bottom: 70px;
      right: 0;
  }

  .our_services_head h4 {
      color: var(--base-color);
  }

  .our_services_head h1 {
      color: var(--text-white);
      position: relative;
      z-index: 111;
  }

  .global_section {
      background-color: var(--bg-black);
      padding: 100px 0 30px 0;
      position: relative;
  }

  .service_card {
      background-color: var(--bg-white);
      border-radius: 20px;
      padding: 45px;
      height: 100%;
      position: relative;
  }

  .service_card .icon_box {
      width: 80px;
      height: 80px;
      background-color: var(--base-color);
      border-radius: 100px;
      transition: 0.5s;

  }

  .service_card .icon_box span i {
      font-size: 32px;
  }

  .service_card h5,
  .service_card p {
      color: var(--text-black);
  }

  .service_card:hover {
      background-color: var(--base-color);
      transition: 0.5s;
  }

  .service_card:hover .icon_box {
      background-color: var(--bg-white);
      transition: 0.5s;
  }

  .shape_circle_1,
  .shape_circle_2 {
      position: absolute;
  }

  .shape_circle_1 {
      bottom: 0;
      left: 0;
  }

  .shape_circle_2 {
      top: 0;
      right: 0px;
  }

  .image-wrapper {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      height: 100%;
  }

  /* .image-wrapper img {
  width: 100%;
  display: block;
} */

  .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* background: #ffffff;
    z-index: 2;
    transform: translateX(0%); */
  }


  .color-scroll-section {
      min-height: 100vh;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .scroll-color-text {
      font-size: 2.5rem;
      font-weight: bold;
      color: var(--base-color);
      letter-spacing: 2px;
  }

  .letter {
      display: inline-block;
      color: var(--base-color);


  }

  .tech_check {
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      min-width: 24px;
      min-height: 24px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--base-color);
  }

  .tech_check i {
      color: var(--text-black);
  }

  .tech_list {
      color: var(--text-white);
  }

  .tech_left_top_content h5 {
      color: var(--base-color);
  }

  .tech_left_top_content h1,
  .tech_left_top_content p {
      color: var(--text-white);
  }

  .project_delivered_content h2 {
      color: var(--text-white);
  }

  .project_delivered_content p {
      color: var(--text-white);
  }

  .delivered_proj {
      border-right: 1px solid #fff;
      height: max-content;
  }

  .pricing_card_pkg h3 {
      color: var(--text-black);
  }

  .pricing_card_pkg h6 {
      color: var(--light-grey);
      font-weight: normal;
  }

  .pricing_card_pkg {
      background-color: var(--bg-white);
      border-radius: 20px;
      padding: 20px;
      overflow: visible;
      min-height: 635px;
  }

  .price {
      color: var(--text-black);
      font-weight: bold;
  }

  .pricing_card_pkg ul {
      border-bottom: 1px dashed var(--light-grey);
  }

  .pricing_card_pkg ul li {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-black);
  }

  /* .swordcontainer {
  height: 100vh;
  display: flex;
  background: lightgray;
}

.sword {
  width: 100px;
  height: 100px;
  font-size: 3rem;
}

.target {
  height: 100vh;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
} */

  .pricing_card_head,
  .pricing_card_head + p {
      color: var(--text-white);
  }
  .fade-loop {
    opacity: 0;
    animation: fadeInOut 4s ease-in-out infinite;
  }
  
  @keyframes fadeInOut {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .move-vertically {
    animation: upDown 4s ease-in-out infinite;
  }
  
  @keyframes upDown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(100px); }
    100% { transform: translateY(0); }
  }
  .animate-triangle {
    animation: rotatePulse 5s ease-in-out infinite;
  }
  
  @keyframes rotatePulse {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
  }
  .animated-border {
    animation: borderColorLoop 3s linear infinite;
  }
  @keyframes borderColorLoop {
    0%   { border-color: var(--base-color); }
    25%  { border-color: var(--border-black); }
    50%  { border-color: var(--border-white); }
    75%  { border-color: var(--grey-color); }
    100% { border-color: var(--light-grey); }
  }
  .pixel-img {
    animation: pixelEffect 3s steps(5) infinite alternate,
               glitchColor 1s linear infinite;
  }
  
  @keyframes glitchColor {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(90deg); }
    100% { filter: hue-rotate(0deg); }
  }
  
  .pricing_card {
      background-color: var(--base-color);
      border-radius: 20px;
      padding: 20px 20px 0 20px;
      overflow: hidden;
      min-height: 635px !important;
  }

  .pricing_card h3,
  .pricing_card p {
      color: var(--text-black);
  }

  .pricing_card_pkg {
      background-color: var(--bg-white);
  }

  .plan_Choose_btn {
      background-color: var(--base-color);
      color: var(--text-black);
      padding: 15px 5px;
      font-weight: bold;
      border-radius: 12px;
      text-transform: uppercase;
  }

  .plan_Choose_btn:hover {
      color: var(--text-black);
      font-weight: bold;
  }

  .price small {
      font-size: 18px;
      font-weight: normal;
  }

  .our_prd_head {
      color: var(--text-white);
      z-index: 111;
      position: relative;
  }

  .prod_Card h4,
  .prod_Card p {
      color: var(--text-white);
  }

  .smart_pos_col {
      margin-top: 120px;
  }

  .our_team_card {
      position: relative;
  }

  .our_team_card .img_card {
      border-radius: 20px;
      /* padding: 20px; */
      position: relative;
  }

  .our_team_card .img_card img {
      min-height: 470px;
      max-height: 470px;
      height: 470px;
      border-radius: 20px;
  }

  .our_team_card h6 {
      color: var(--text-white);
      font-size: 25px;
  }

  .our_team_card p {
      color: var(--text-white);
      font-size: 16px;
  }

  .overflow-hidden {
      overflow: hidden;
  }

  .social_icon_circle {
      width: 35px;
      height: 35px;
      border-radius: 100px;
      background-color: var(--bg-white);
  }

  .social_icon_circle i {
      color: var(--text-black);
  }

  .icons_list {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
  }

  .slider_card {
      background-color: var(--bg-white);
      border-radius: 20px;
      padding: 20px;
  }

  .slider_card img {
      width: 150px;
      height: 150px;
  }

  .talk_content h1,
  .talk_content p {
      color: var(--text-white);
  }

  .talk_content p.we_collaborate,
  .talk_content ul {
      border-bottom: 1px solid var(--border-white);
  }

  .talk_icon_circle {
      width: 50px;
      height: 50px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-white);
  }

  .talk_content ul li a,
  .talk_content ul li a:hover {
      text-decoration: none;
  }

  .talk_content ul li h6 {
      color: var(--text-white);
  }
  .talk_content ul li p a,
  .talk_content ul li p a:hover{
    color: var(--text-white);
    text-decoration: none;
  }
  .contact_form {
      background-color: var(--bg-white);
      border-radius: 20px;
  }

  .contact_form label {
      font-size: 18px;
      color: var(--text-black);
  }

  .contact_form input,
  .contact_form textarea {
      border-bottom: 1px solid var(--border-black) !important;
      border-left: 0;
      border-right: 0;
      border-top: 0;
  }

  .contact_form input:focus,
  .contact_form textarea:focus {
      outline: none;
      box-shadow: none;
  }

  .contact_form textarea {
      height: 80px !important;
      resize: none;
  }

  .footer_logo_col p {
      color: var(--text-white);
  }



  .link_col h6,
  .min_footer h6,
  .min_footer p {
      color: var(--text-white);
  }

  .link_col li a,
  .min_footer a {
      font-size: 16px;
      color: var(--text-white);
  }

  .min_footer {
      border-top: 1px solid var(--border-white);
  }

  footer .input-group {
      background-color: var(--bg-white);
      border-radius: 100px;
      height: 70px;
  }

  footer input::placeholder {
      color: var(--text-black);
  }

  .submit_btn {
      border-radius: 100px;
  }

  nav .fa-whatsapp {
      font-size: 44px;
      color: var(--base-color);
  }



  /* col animted css start */
  /* .container_my {
    display: flex;
} */

  .column {
      flex: 1;
      overflow: hidden;
      /* height: 400px; */
      position: relative;
      /* background: #111; */
  }

  .inner-column {
      display: flex;
      flex-direction: column;
      animation: scrollUpLoop 10s linear infinite;
  }

  .column-2 .inner-column {
      animation: scrollDownLoop 10s linear infinite;
  }

  .column-3 .inner-column {
      animation: scrollUpLoop 12s linear infinite;
  }

  .box {
      /* background: #444; */
      /* height: 350px; */
      /* margin-bottom: 10px;
border-radius: 8px; */
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.2rem;
  }

  .wrap-original-transform {
      perspective: 2000px;
      transform-style: preserve-3d;
  }

  @keyframes scrollUpLoop {
      0% {
          transform: translateY(0%);
      }

      100% {
          transform: translateY(-50%);
      }
  }

  /* Infinite scroll down */
  @keyframes scrollDownLoop {
      0% {
          transform: translateY(-50%);
      }

      100% {
          transform: translateY(0%);
      }
  }

  .wrapper {
      position: relative;
      overflow: hidden;
  }

  .section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      font-weight: bold;
      transition: all 0.5s ease;
  }

  .section1 {
      background: #e91e63;
      z-index: 3;
  }

  .section2 {
      background: #212121;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transform: scale(0.8);
      z-index: 2;
  }

  .section3 {
      background: #03a9f4;
      z-index: 1;
  }

  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
      background-color: var(--base-color);
      color: var(--text-black);
      text-transform: capitalize;
      border-radius: 100px;
      transition: 0.5s;
      font-weight: bold;

  }

  .nav-pills .nav-link {
      color: var(--text-white);
      transition: 0.5s;
      margin-right: 10px;
      min-width: 100px;

  }

  .nav-pills .nav-link:hover {
      background-color: var(--base-color);
      color: var(--text-black);
      border-radius: 100px;
      transition: 0.5s;
  }

  .carousel-control-prev,
  .carousel-control-next {
      position: inherit;
      width: 30px;
      font-size: 32px;
      color: var(--base-color);
  }
  .offcanvas.show {
    transform: none;
    z-index: 1111;
    background: var(--main-gradient);
}
.offcanvas .main-menu li a{
    font-size: 16px;
    font-weight: bold;
    color: var(--text-white);
    transition: 1s;
    padding: 5px;
    text-transform: uppercase;
}
.btn-close{
    background: none;
}
.fa-xmark{
    color: var(--text-white);
    font-size: 32px;
    z-index: 111;
    position: relative;
}
.tab-pane img{
    position: relative;
    z-index: 111;
}
#loader {
    position: fixed;
    z-index: 9999;
    background: var(--main-gradient);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid var(--base-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  .btn_close{
    background-color: var(--base-color);
  }
  .modal-header{
    border-bottom: 1px solid var(--base-color);
  }
  .modal-footer{
    border-top: 1px solid var(--base-color);

  }
  .modal-header,
    .modal-footer{
    background: var(--bg-black);
  }
  .modal-body{
    background: var(--main-gradient);
  }
  .terms_and_condition_section{
    color: var(--text-white);
  }
  /* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--main-gradient); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--main-gradient); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--main-gradient); 
  }
  .pkg_badge{
    margin-top: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--base-color);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px 0;
    position: relative;

  }
  .pkg_badge h3{
    color: var(--text-white);
  }
  .popular_pkg{
    /* position: absolute;
    top: -10px;
    right: -10px; */
    font-size: 32px;
    color: #ffde02;
    /* transform: rotate(45deg); */
  }
  .popular_pkg_text{
    color: var(--base-color) !important;
    font-weight: 900;
  }
.blog_head{
    color: var(--base-color) !important;
}
.blog_para{
    color: var(--text-white);
}
.blog_section{
    padding: 150px 0;
    background:var(--main-gradient);
}
.blog_section_detail{
    padding: 150px 0;
    background:var(--bg-black);
}
.blog_img{
    height: 350px;
    min-height: 350px;
    max-height: 350px;
}
.consultancy_list li{
    color: var(--text-white);
}
.fa-chevron-right{
    color: var(--text-black);
}
  /* media query css start here */

  @media screen and (max-width: 1200px) {

      .tech_images {
          width: 40px;
          height: 40px;
      }

      br {
          display: none;
      }

      .tech_list strong,
      .tech_list span {
          font-size: 14px;
      }

      .navbar-collapse {
          height: 100vh;
          transition: 0.5s;
      }

      .navbar-collapse ul {
          /* max-height: 400px; */
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
      }

      h1 {
          font-size: 44px;
      }

      h2 {
          font-size: 35px;
      }

      h3 {
          font-size: 32px;
      }

      h4 {
          font-size: 25px;
      }

      h5 {
          font-size: 25px;
      }

      h6 {
          font-size: 20px;
      }

      .shape_circle_2,
      .shape_circle_1 {
          width: 100px;
      }
  }

  @media screen and (max-width: 992px) {
   
      .smart_pos_col {
          margin-top: 0;
      }

      .delivered_proj+div,
      .delivered_proj {
          width: 50%;
      }

      .tech_images {
          width: 40px;
          height: 40px;
      }

      .first_circle {
          margin-left: auto;
          margin-right: auto;
          margin-top: 100px;
      }

      .navbar-collapse {
          height: 100vh;
          transition: 0.5s;
      }

      h1 {
          font-size: 44px;
      }

      h2 {
          font-size: 35px;
      }

      h3 {
          font-size: 32px;
      }

      h4 {
          font-size: 25px;
      }

      h5 {
          font-size: 25px;
      }

      h6 {
          font-size: 20px;
      }

      .top_section {
          padding: 150px 0 45px 0;
      }

      .shape_circle_2,
      .shape_circle_1 {
          width: 80px;
      }
  }

  @media screen and (max-width: 767px) {
    .slider_card {
        background-color: var(--bg-white);
        border-radius: 20px;
        padding: 5px;
    }
      .smart_pos_col {
          margin-top: 0;
      }
      
      .nav-pills .nav-link{
        margin-right: 0;
        margin-bottom: 20px;
      }
      .delivered_proj {
          border-right: 0;
          border-bottom: 1px solid var(--border-white);
      }

      .tech_images {
          width: 40px;
          height: 40px;
      }

      .navbar-collapse {
          height: 100vh;
          transition: 0.5s;
      }

      h1 {
          font-size: 44px;
      }

      h2 {
          font-size: 35px;
      }

      h3 {
          font-size: 32px;
      }

      h4 {
          font-size: 25px;
      }

      h5 {
          font-size: 25px;
      }

      h6 {
          font-size: 20px;
      }

      .top_section {
          padding: 150px 0 45px 0;
      }

      .shape_circle_2,
      .shape_circle_1 {
          width: 80px;
      }
  }


  @media screen and (max-width: 575px) {
    .slider_card {
        background-color: var(--bg-white);
        border-radius: 20px;
        padding: 5px;
    }
    .nav-pills .nav-link{
        margin-right: 0;
        margin-bottom: 20px;
      }
      .first_circle {
          width: 100%;
      }

      .navbar-brand img {
          width: 60px;
      }

      .header_get_in_touch {
          padding: 5px;
          font-size: 12px;
      }

      .fa-whatsapp {
          font-size: 22px;
      }

      .smart_pos_col {
          margin-top: 0;
      }

      .tech_images {
          width: 40px;
          height: 40px;
      }

      .top_section {
          padding: 150px 0 45px 0;
      }

      .navbar-collapse {
          height: 100vh;
          transition: 0.5s;
      }

      h1 {
          font-size: 24px;
      }

      h2 {
          font-size: 22px;
      }

      h3 {
          font-size: 18px;
      }

      h4 {
          font-size: 18px;
      }

      h5 {
          font-size: 18px;
      }

      h6 {
          font-size: 18px;
      }

      .shape_circle_2,
      .shape_circle_1 {
          width: 80px;
      }
  }