/* @import url(./style-desktop.css); */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:700");

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;

  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: 80px calc(100vh - 80px) auto 80px;
  grid-template-rows: 80px calc(100vh - 80px) auto 80px;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 1.3rem;
}

/* Button */

.general-btn {
  background-color: white;
  padding: 0.3rem;
  font-family: inherit;
  font-weight: 700;
  border: white 2px solid;
}

.general-btn:hover,
.general-btn:active {
  background-color: transparent;
  color: white;
}

/* Css Grid */

.header-container {
  background-color: transparent;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  grid-column: 1 / -1;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2rem;
}

.main-container {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  grid-row: 1 / 4;
  grid-column: 1 / -1;
}

.footer-container {
  background-color: black;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4 / 5;
  grid-column: 1 / -1;
}

/* mobile navbar */

.nav-menu {
  position: fixed;
  right: -100%;
  top: 5rem;
  border-radius: 0.5rem 0 0 0.5rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: black;
  width: 95%;
  text-align: justify;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: -6px 6px 2px 1px rgb(255 255 255 / 4%);
  box-shadow: -6px 6px 2px 1px rgb(255 255 255 / 4%);
}

.nav-menu.active {
  right: 0;
}

.nav-item {
  margin: 2rem 0;
}

.hamburger {
  display: block;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: white;
}

.nav-menu {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav-item {
  margin-left: 2.5rem;
}

.nav-link {
  font-size: 1.1rem;
  font-weight: 400;
  color: white;
}

mobile-navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  font-family: inherit;
}

.mobile-navbar li {
  list-style: none;
}

.mobile-navbar hr {
  border: 0;
  height: 1px;
  background: #ff6000;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#ccc),
    color-stop(#ff6000),
    to(#ccc)
  );
  background-image: linear-gradient(to right, #ccc, #ff6000, #ccc);
}

.mobile-navbar a {
  text-decoration: none;
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

/* Desktop navigation */
.desktop-navigation-items {
  display: none;
}

.text-theme-base * {
  color: #ff6000 !important;
}

/* Logo */
.logo-container {
  height: 2.5rem;
}

.logo-container img {
  height: 100%;
}

/* Hero background image */
.hero-image-container {
  width: 100%;
  height: 100vh;
}

.hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70%;
}

.hero-image-content p {
  font-size: 1rem;
}

.hero-content__title {
  padding-bottom: 1.5rem;
  font-size: 1.8rem;
}

.hero-image-content {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 2rem;
  color: white;
}

.hero-content__services {
  list-style: none;
  display: flex;
  font-size: 0.7rem;
  margin: 1rem 0;
}

.hero-content__service {
  padding: 0.3rem 0.5rem;
}

.know-more-btn {
  width: 100%;
}

.hero-content__service:nth-child(1) {
  background-color: #ff6000;
}

.hero-content__service:nth-child(2) {
  background-color: #274f72;
}

.hero-content__service:nth-child(3) {
  background-color: #a9a205;
}

/* Service and Expertise */

.s-and-e__title {
  background-color: white;
  padding: 0.5rem 1rem;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

.service-and-expertise {
  position: relative;
  padding: 2rem 1rem;
  text-align: justify;
}

.s-and-e__image-container {
  display: none;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: url(../images/s-and-e.jpg) no-repeat center/cover fixed;
  margin: 1.5rem auto;
}

.s-e-btn {
  background-color: transparent;
  padding: 0.3rem 1.5rem;
  font-family: inherit;
  font-weight: bold;
  border: #ff6000 2px solid;
  font-size: 1rem;
}

.s-e-btn:hover,
.s-e-btn:active {
  background-color: white;
  border: #ff6000 2px solid;
  color: black;
}

.s-e-btn a {
  text-decoration: none;
  color: #ff6000;
}

.s-e-explore-btn {
  text-align: center;
}

/* Individual services */

.individual-service {
  margin: 2rem 0;
  display: flex;
}

.individual-service h3 {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.individual-service img {
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
}

.individual-service p {
  font-size: 0.8rem;
  margin-left: 0.6rem;
}

/* .footer-socialmedia{
    text-align: center;
    
}

.footer-socialmedia a{
    text-decoration: none;
    color: white;
    text-align: center;
} */

/* Development process */

.development-process {
  background-color: black;
  display: inline-block;
  text-align: justify;
  width: 100%;
}

.development-process h1 {
  color: white;
  text-align: center;
  padding: 2rem 0 0 0;
}

.box {
  width: 110px;
  height: 110px;
  background-color: black;
  border: 1px solid grey;
  margin: 3rem auto;
  text-align: center;
  color: white;
  font-size: 0.9rem;
}

.box img {
  padding: 0.8rem 0 0;
  height: 3.3rem;
}

.box-content {
  padding-top: 0.5rem;
}

/* .dp-icon{
    height: 60px;
    width: 60px;
    align-items: center;

}

.idea{
        background-image: url("data:image/svg+xml,%3Csvg  viewBox='0 0 65 64' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.8339 47.6737H42.8052V51.5933H22.8339V47.6737Z'/%3E%3Cpath d='M26.8282 55.5129H38.8109V59.4326H26.8282V55.5129Z'/%3E%3Cpath d='M32.8196 4.55798C27.5229 4.55798 22.4431 6.62277 18.6978 10.2981C14.9524 13.9735 12.8483 18.9583 12.8483 24.156C12.7133 27.0043 13.2693 29.8433 14.4706 32.4395C15.6719 35.0358 17.4842 37.315 19.7584 39.0897C21.7555 40.9124 22.834 41.9511 22.834 43.7541H26.8282C26.8282 40.148 24.6114 38.1294 22.4545 36.1892C20.5879 34.7865 19.1003 32.9561 18.1219 30.8583C17.1435 28.7604 16.7043 26.4591 16.8426 24.156C16.8426 19.9979 18.5259 16.01 21.5221 13.0697C24.5184 10.1294 28.5822 8.47759 32.8196 8.47759C37.057 8.47759 41.1208 10.1294 44.1171 13.0697C47.1133 16.01 48.7966 19.9979 48.7966 24.156C48.9326 26.4608 48.4903 28.7632 47.5084 30.8612C46.5265 32.9591 45.035 34.7887 43.1647 36.1892C41.0278 38.149 38.811 40.1088 38.811 43.7541H42.8052C42.8052 41.9511 43.8637 40.9124 45.8808 39.0701C48.1534 37.2984 49.9649 35.0226 51.1662 32.4297C52.3675 29.8369 52.9243 27.0013 52.7909 24.156C52.7909 21.5824 52.2743 19.0339 51.2706 16.6562C50.267 14.2784 48.7959 12.118 46.9414 10.2981C45.0869 8.47827 42.8853 7.03469 40.4623 6.0498C38.0392 5.0649 35.4423 4.55798 32.8196 4.55798Z'/%3E%3C/svg%3E");

}

.wireframe{
        
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='body_1' width='57' height='57'%3E%3Cg transform='matrix(1 0 0 1 0 0)'%3E%3Cpath d='M9.24533 1L1 1L1 9.24533L9.24533 9.24533L9.24533 1z' stroke='%23FFFFFF' stroke-width='1.499' stroke-linecap='square' fill='none' /%3E%3Cpath d='M10 5L47 5' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' fill='none' /%3E%3Cpath d='M5 10L5 47' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' fill='none' /%3E%3Cpath d='M52 10L52 47' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' fill='none' /%3E%3Cpath d='M10 52L47 52' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' fill='none' /%3E%3Cpath d='M9.24533 47.7548L1 47.7548L1 56.0001L9.24533 56.0001L9.24533 47.7548z' stroke='%23FFFFFF' stroke-width='1.499' stroke-linecap='square' fill='none' /%3E%3Cpath d='M55.9972 1.00525L47.7547 1.00525L47.7547 9.25057L56 9.25057L56 1.00525L55.9972 1.00525z' stroke='%23FFFFFF' stroke-width='1.499' stroke-linecap='square' fill='none' /%3E%3Cpath d='M55.9972 47.76L47.7547 47.76L47.7547 56.0053L56 56.0053L56 47.76L55.9972 47.76z' stroke='%23FFFFFF' stroke-width='1.499' stroke-linecap='square' fill='none' /%3E%3Cpath d='M25.7443 36.759L17.4934 17.5071L36.7454 25.7579L28.5 28.5054L25.7443 36.759z' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square' fill='none' /%3E%3Cpath d='M28.5 28.5082L36.7453 36.759L28.5 28.5082z' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='square' fill='none' /%3E%3C/g%3E%3C/svg%3E");
        
} */

/* About us */

.aboutus-values-container {
  padding: 2rem 1rem;
}

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

.about-us h1 {
  text-align: center;
}

.about-us p {
  padding: 1rem 0 0 0;
}

/* Our values */

.our-values {
  padding: 2rem 0;
}

.our-values h4 {
  border-bottom: 3px solid #ff6000;
  width: fit-content;
}

.value {
  padding: 1rem 0;
}

.value p {
  text-align: justify;
  padding: 1rem 0 0 0;
}
/* Trusted Clients */
.trusted-clients{
  padding: 2rem 1rem;
  text-align: center;
  background: transparent;
}
.tc-title{
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.tc-sub{
  color: #666;
  margin-bottom: 1rem;
}
.tc-grid{
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.5rem 0 1.5rem;
}
.tc-item{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 80px;
  padding: 0.75rem;
  background: #ffffff00;
  border-radius: 6px;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.tc-item img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(100%) contrast(.9) opacity(.9);
}
.tc-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.tc-item:hover img{
  filter: none;
  opacity: 1;
}
/* Contact us */

.contact-us {
  background-color: black;
  color: white;
  padding: 2rem 1rem 0;
  text-align: justify;
}

.contact-us h1 {
  text-align: center;
  padding: 2rem 0;
}

.contact-us label {
  font-size: 0.7rem;
  padding: 2rem 0;
}

.contact-us input,
.contact-us textarea {
  background-color: black;
  color: white;
  border: 1.5px solid white;
  width: 100%;
}

.name-email input {
  height: 1.8rem;
}

/* contact us submit button */

.contact-us-submit-btn {
  text-align: center;
}

.submit-btn {
  width: 70%;
  height: 2rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.contact-us-input {
  padding: 0.8rem 0;
}

/* Footer Social media */

.footer-socialmedia {
  display: inline-block;
  font-size: 0.8rem;
}

.contact-us-socialmedia {
  display: flex;
  padding: 3rem;
  justify-content: space-around;
  color: #ff6000;
  font-size: 2rem;
}

.socialmedia {
  cursor: pointer;
  color: #ff6000;
  /* font-size: 2rem !important; */
}

.footer-copyright {
  color: white;
  text-align: center;
  padding: 1.5rem 0 0;
  font-size: 0.8rem;
}

/* floating whatsapp  */

.whatsapp-icon {
  margin-top: 10px;
}
.whatsapp_float {
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 10px #999;
  z-index: 100;
  width: 40px;
  height: 40px;
  bottom: 20px;
  right: 10px;
  font-size: 28px;
  position: fixed;
}

.whatsapp_float a {
  line-height: 1.4;
}

/* ---------------------------------------- Desktop Styling ---------------------------------------------- */

@media (min-width: 40rem) {
  .hero-image-container {
    width: 100%;
    height: 100vh;
  }

  .hero-image-container img {
    width: 100%;
    height: 100%;
  }

  .mobile-toggle {
    display: none;
  }

  .hamburger {
    display: none;
  }

  .mobile-navbar {
    display: none;
  }

  h1 {
    font-size: 2.5rem;
  }

  /* navbar */

  .desktop-navigation-items {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .desktop-navigation-items a {
    text-decoration: none;
    color: white;
    font-weight: 600;
    letter-spacing: 0.1rem;
    font-size: 1rem;
  }

  .desktop-navigation-items a:hover {
    color: #ff6000;
  }

  .desktop-navigation-items button {
    padding: 0.5rem;
    font-family: inherit;
    font-weight: 700;
  }

  .desktop-navigation-item {
    padding: 0 1.5rem;
  }

  .header-container {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  .logo-container {
    height: 3rem;
  }

  /* ----------------- hero image ---------------- */

  .hero-image-content {
    width: 100%;
  }

  .hero-content {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  .hero-content button {
    padding: 0.8rem 2rem;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid white;
  }

  .hero-content h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }

  .hero-image-content p {
    font-size: 1.1rem;
  }

  .hero-content__service {
    margin: 1.5rem 0;
    font-size: 16px;
    padding: 0.3rem 0.8rem;
  }

  /* p {
        position:fixed;
        width:100%;
        bottom:30px;
        font-size:12px;
        color:#999;
        margin-top:200px;
      } */

  /* ------------------------------------------------------------ */

  /* .hero-general-btn{
        padding: 0.8rem 2rem;
        font-size: 16px;
        font-weight: bold;
        border: 2px solid white;
    }

    .hero-general-btn:hover,
    .hero-general-btn:active{
    background-color: transparent;
    color: white;
    } */

  /* service and expertise */

  .s-and-e__title {
    width: 80%;
  }

  .service-and-expertise {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  .service-and-expertise h1 {
    font-size: 2.5rem;
  }

  .s-and-e__para {
    text-align: center;
    font-size: 1.5rem;
    padding-top: 3rem;
  }

  .individual-service img {
    vertical-align: middle;
    width: 3rem;
    height: 3rem;
  }

  .individual-service p {
    padding-left: 1rem;
    margin-left: 0rem;
  }

  .individual-service h3 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1rem;
  }

  .individual-service {
    display: flex;
    margin: 2rem 0 !important;
  }

  .s-and-e__image-container {
    display: block;
    width: 22rem;
    height: 43rem;
    border-radius: 0;
    background: url(../images/s-and-e-old.jpg) no-repeat center/cover;
    margin: 1.5rem auto;
  }

  .service-lists-container {
    width: 65%;
    padding-right: 5rem;
  }

  .service-lists-container p {
    font-size: 1.1rem;
  }

  .individual-service {
    margin: 4.5rem 0;
  }

  .s-and-e-content {
    display: flex;
    align-items: center;
  }

  .s-e-btn {
    background-color: transparent;
    padding: 0.7rem 3rem;
    font-family: inherit;
    font-weight: bold;
    border: #ff6000 2px solid;
    font-size: 1.2rem;
  }

  .s-e-btn:hover,
  .s-e-btn:active {
    background-color: white;
    border: #ff6000 2px solid;
    color: black;
  }

  .s-e-btn a {
    text-decoration: none;
    color: #ff6000;
  }

  .s-e-explore-btn {
    text-align: end;
    padding-right: 5rem;
  }

  /* our Development process */

  .development-process-boxes {
    display: flex;
    padding-top: 4rem;
  }

  .development-process {
    height: 37rem;
  }

  .development-process h1 {
    text-align: left;
    padding-top: 5rem;
    font-size: 36px;
  }

  .our-development-process {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  .box {
    width: 150px;
    height: 150px;
    border: 1px solid grey;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box:hover {
    /* color: #FF6000; */
    font-weight: bold;
    border: 1px solid #ff6000;
  }

  .box:hover svg {
    /* fill: #FF6000;
        stroke: #FF6000; */
  }

  /* .box-content{
        padding-top: 2rem;
    } */

  /* .development-process-individual:hover{
        fill: #FF6000;
        stroke: #FF6000;
    } */

  /* About us */

  .aboutus-values-container {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
    padding-top: 5rem;
  }

  .our-values {
    padding: 4rem 0;
  }

  .our-values h3 {
    padding-left: 2rem 1.5rem;
    font-size: 36px;
  }

  .values {
    display: flex;
  }

  .value {
    padding: 1.5rem;
    padding: 1.5rem 2.5rem 1.5rem 0;
  }

  /* about us */

  .about-us h1 {
    text-align: left;
    font-size: 48px;
  }

  .about-us p {
    padding: 2rem 0;
  }

  /* contact us */

  .contact-us p {
    text-align: center;
  }

  .contact-us-content {
    max-width: 1140px;
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
  }

  .contact-us-content h1 {
    font-size: 45px;
  }

  .contact-us-content p {
    font-size: 22px;
  }

  .contact-us-input {
    width: -webkit-fill-available;
  }

  .contact-us label {
    font-size: 0.9rem;
    padding: 2rem 0;
    font-weight: 500;
  }

  .name-email {
    display: flex;
    justify-content: space-between;
  }

  .name-email input {
    height: 1.8rem;
  }

  /* contact us submit button */

  .contact-us button {
    width: 20rem;
    height: 3rem;
  }

  .contact-us-submit-btn {
    text-align: right;
  }

  /* contactus social media */

  .contact-us-socialmedia {
    width: -webkit-fill-available;
    display: block;
    padding: 3rem 3rem 3rem 0;
  }

  .contact-us-socialmedia a {
    padding: 1rem;
  }

  .contact-us-btn-and-socialmedia {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }

  /* floating whatsapp  */

  .whatsapp_float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    font-size: 39px;
    z-index: 100;
  }

  .whatsapp_float i {
    line-height: 1.6;
  }

  .whatsapp-icon {
    margin-top: 16px;
  }

  #preloader {
    background: black url(../images/circle-loader.gif) no-repeat center;
    background-size: 7%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
  }
}