.setchhaus-family{
    font-family: "Inter", sans-serif !important;
}


/* header css start */
.header__main {
    background: #ffffff;
}
.g-0{
--bs-gutter-x: 0 !important;
}
/* header css end */
  .sktechhaus-wrapper {
    overflow-x: hidden;
     margin: 0;
    padding: 0;
    box-sizing: border-box;    
    
  }

  .sktechhaus-wrapper .custom-container {
    max-width: 1920px;
    padding: 0px 50px;
  }

  .sktechhaus-wrapper .pt-8 {
    padding-top: 50px;
  }

  .sktechhaus-wrapper .pb-8 {
    padding-bottom: 50px;
  }

  .sktechhaus-wrapper .text-gray-white {
    color: #ffffffc9 !important;
     font-family: "Inter", sans-serif !important;
  }

  
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}

  .sktechhaus-wrapper .hero-section {
    position: relative;
    background-image: url("/static/assets/img/sketchhaus_imgs/hero-section-banner.webp");

    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
  }


  .sktechhaus-wrapper .marque-section {
    position: relative;
  }

  .sktechhaus-wrapper .skewed-banner {
    width: 100%;  
    height: 100px;
    background: #E22201;
    
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: -17px;
    z-index: 9;
  }

  .sktechhaus-wrapper .marquee-wrapper {
    display: flex;
    align-items: center;
    width: 200%;
    /* duplicate text ke liye 2x width */
    animation: scroll 15s linear infinite;
  }

  .sktechhaus-wrapper .marquee {

    white-space: nowrap;
    color: white;
    font-size: 6.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-right: 150px;
      font-family: "Inter", sans-serif !important;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

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

  .sktechhaus-wrapper .business-case {
    background-color: #171717;
    font-family: "Inter", sans-serif !important;
  }



  .sktechhaus-wrapper .big-heading {
    font-size: 90px;
    color: #fff !important;
  }

  .sktechhaus-wrapper .clr-orng {
    color: #E22201;
    border: 1px solid white;
    padding: 10px 20px;
    margin: 8px;
    font-size: 16px !important;
  }




  .sktechhaus-wrapper .box-img {
    height: 100%;
    width: 100%;
  }

  .sktechhaus-wrapper .bg-lightdark {
    background-color: #242424;
    height: 100%;
    padding: 60px;
  }



  .sktechhaus-wrapper .laptop-img {
    width: 100%;
  }

  .sktechhaus-wrapper .second-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    z-index: 1;
     font-family: "Inter", sans-serif !important;
  }

  .sktechhaus-wrapper .second-section {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .sktechhaus-wrapper .tractor-lottie {
    background-color: #171717;
    width: 100%;
    height: 100%;
  }

  .sktechhaus-wrapper .challenges {

    background: linear-gradient(to bottom, #000000 40%, #7a0d00 100%);
  }

  .sktechhaus-wrapper .challenges-card-text {
    font-size: 37px;
    line-height: 1;
  }

  .sktechhaus-wrapper .gradient-border {
    position: relative;
    background: #000;
    padding: 20px;
    color: white;
    width: 250px;
    height: 300px;
    z-index: 1;
  }

  /* Border ko pseudo element se banate hai */
 .sktechhaus-wrapper .gradient-border::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(270deg, red, orange, yellow, red);
    background-size: 600% 600%;
    border-radius: 8px;
    z-index: -1;
    animation: borderAnimation 5s ease infinite;
  }

  /* Inner box ke liye */
   .sktechhaus-wrapper .gradient-border::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: #000;
    border-radius: 5px;
    z-index: -1;
  }

  /* Animation */
  @keyframes borderAnimation {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .sktechhaus-wrapper .card-size {
    width: 200px;
    height: 230px;
    border-radius: 10px;
    background: linear-gradient(145deg, #1c1c1c, #2a2a2a);
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
    color: #ddd;
    margin-right: -30px;
    /* cards overlap */
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1);
  }

  .sktechhaus-wrapper .card-size:hover {
    transform: translateY(-20px) rotate(3deg) scale(1.05) !important;
    transition: transform 0.3s ease-out !important; /* apna fast hover transition */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6),
      0 0 12px rgba(255, 255, 255, 0.1);
    background: #aaa;
    color: #000;
    z-index: 10;
    cursor: pointer;

  }

  .sktechhaus-wrapper .identify-icon {
    width: 50px;
    transition: filter 0.3s ease;
  }


  .sktechhaus-wrapper .cards-scroller {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #666 #222;
    padding: 30px 0;

  }

  /* Chrome, Edge, Safari custom scrollbar */
  .sktechhaus-wrapper .cards-scroller::-webkit-scrollbar {
    height: 8px;
  }

  .sktechhaus-wrapper .cards-scroller::-webkit-scrollbar-track {
    background: #222;
    border-radius: 10px;
  }

  .sktechhaus-wrapper .cards-scroller::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 10px;
  }

  .sktechhaus-wrapper .cards-scroller::-webkit-scrollbar-thumb:hover {
    background: #999;
  }


  .sktechhaus-wrapper .screen {
    background-color: #000;
  }

  .sktechhaus-wrapper .screen-card {
    background-color: #E22201;
    border-radius: 30px;
    padding: 50px 80px;
  }

  .sktechhaus-wrapper .screen2-img {
    border-radius: 30px;
  }


  .sktechhaus-wrapper .screen4-card {
    background: #D9D9D9;
    padding: 20px;
    border-radius: 20px;
  }



  .sktechhaus-wrapper .screen3-card {
    background: #FFD6CF;
    padding: 20px;
    border-radius: 20px;


  }

 

 

  .sktechhaus-wrapper .skecth-house-screen {
    background-color: #171717;
  }

  .sktechhaus-wrapper .sketch-house-tab-img {
    max-width: 600px;
  }

  @media(min-width:1500px) {
    .testimonial-icon-box{
      margin-top: 100px;
    }
      .sktechhaus-wrapper .lottie-full > canvas{
    width: 700px;
    height: 100%;
    min-height: 400px;
    /* column ki height ke hisaab se adjust kar */
  }
    .sktechhaus-wrapper .sketch-house-tab-img {
      max-width: 600px;
    }
      .second-col-img{
    height: 420px !important;
  }
  .construction-lottie {
    scale: 1.14;
    height: 450px;
}
.sktechhaus-wrapper .screen3-card {
    height: 123%;
    display: flex;
    align-items: center;
}
.sktechhaus-wrapper .screen4-card {

    height: 123%;
    display: flex;
    align-items: center;
}
  }

  .sktechhaus-wrapper .strategic {
    font-size: 6.5rem;
    line-height: 1;
    color: #fff;
    font-weight: 700;
  }

  .sktechhaus-wrapper .strategic-para {
    margin: 0;
    color: #fff;
    font-size: 20px;
  }

  .sktechhaus-wrapper .inner-wrapper {
    width: 200px;
  }

  .sktechhaus-wrapper .our-solution {
    background-color: #000;
  }

  .sktechhaus-wrapper .mobile-section-img {
    width: 100%;
  }

  .sktechhaus-wrapper .txt-demo {
    font-size: 16px;
    font-weight: 700;
  }

  .sktechhaus-wrapper .card-text {
    font-family: "Inter", sans-serif !important;
    font-size: 13px;
    line-height: 1.2 !important ;
  }

  .sktechhaus-wrapper .testimonial-section {
    background-color: #171717;
  }

  .sktechhaus-wrapper .technologies-card {
    background-color: #434343;
    color: #fff;
    border-radius: 10px;
  }

  .sktechhaus-wrapper .testmonial-icon {
    width: 100px;
  }

  .sktechhaus-wrapper .client-testimonial {
    background-color: #434343;
    border-radius: 10px;
    height: 100%;
  }

  .sktechhaus-wrapper .mobiles-section {
    background-color: #000;
  }

  .sktechhaus-wrapper .inner-our-solution {
    width: 100%;
    height: 100%;
  }

  .sktechhaus-wrapper .mobile-1 {
    margin-top: 168px;
  }

  .sktechhaus-wrapper .mobile-2 {
    margin-top: 262px;
  }

  .sktechhaus-wrapper .mobile-4 {
    margin-top: 350px;
  }

  .strategic-big-text{
    margin-bottom: 35px !important;
  }

  .sktechhaus-wrapper .item-wrapper {
    display: flex;
    gap: 40px;
    padding: 20px;
    font-family: "Inter", sans-serif !important;
  }

  .sktechhaus-wrapper .item {
    flex: 0 0 300px;
    height: 500px;
  }

  .sktechhaus-wrapper .item input[type="radio"] {
    display: none;
  }

  .sktechhaus-wrapper .item label {
    width: 100%;
    height: 100%;
    color: white;
    font-size: 24px;
    cursor: pointer;
  }

  .sktechhaus-wrapper .item input[type="radio"]:checked+label span.box-title {
    display: none;
  }

  .sktechhaus-wrapper .item input[type="radio"]:checked+label {
    width: 800px;
    background-color: #fff;
    background-image: none;
    color: #000;
    padding: 20px;
  }

  .sktechhaus-wrapper .item-wrapper input[type="radio"]:checked+label~.item label {
    width: 200px;
  }

  .sktechhaus-wrapper .cc-item-1 {
    background-image: url("/static/assets/img/sketchhaus_imgs/Rectangleimg-1.png");
  }

  .sktechhaus-wrapper .cc-item-2 {
    background-image: url("/static/assets/img/sketchhaus_imgs/Rectangleimg-2.png");
  }

  .sktechhaus-wrapper .cc-item-3 {
    background-image: url("/static/assets/img/sketchhaus_imgs/Rectangleimg-3.png");
  }

  .sktechhaus-wrapper .cc-item-4 {
    background-image: url("/static/assets/img/sketchhaus_imgs/Rectangleimg-4.png");
  }


  .sktechhaus-wrapper .cc-item-5 {
    background-image: url("/static/assets/img/sketchhaus_imgs/Rectangleimg-1.png");
  }

  .sktechhaus-wrapper .item label .content {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .sktechhaus-wrapper .item input[type="radio"]:checked+label .content {
    display: flex;
  }

  .sktechhaus-wrapper .linear-overlay {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(86, 86, 86, 0.02) 0%, rgba(74, 72, 72, 0.53) 53%, rgba(54, 53, 53, 1) 100%);
  }

  .sktechhaus-wrapper .overlay-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .sktechhaus-wrapper .swiper {
    width: 100%;
    padding: 40px 0;
  }

  .sktechhaus-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    margin: 0 !important;
    gap: 20px !important;
  }

  .sktechhaus-wrapper .box-card {
    width: 80%;
    height: 280px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .sktechhaus-wrapper .box-card img {
    border-radius: 10px 10px 0 0;
    object-fit: cover;
  }


  .sktechhaus-wrapper .swiper-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: static !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    /* halka shadow */
    color: #000 !important;
    /* black arrow */

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 20px !important;
    /* arrow size */
    font-weight: bold !important;
  }

  .sktechhaus-wrapper .close-btn {
    background: transparent;
    border: none;
    font-size: 30px;
    cursor: pointer;
  }

  .sktechhaus-wrapper .close-btn {
    transition: transform 0.3s ease;
  }

  .sktechhaus-wrapper .close-btn:hover {
    transform: rotate(90deg);
  }
   .sktechhaus-wrapper .second-col-img{
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    max-height: 360px;
  }
 .sktechhaus-wrapper .construction-lottie{
      scale: 1.14;
      
}

.sktechhaus-wrapper .our-solution-content{
  font-size: 20px; 
  font-family: "Inter", sans-serif !important;   
}


  /* media query for phone screen*/
  @media(max-width:568px) {
    .sktechhaus-wrapper .key-benifit-card {
    width: 147px !important;
}
    .sktechhaus-wrapper .our-solution-wrapper{
      flex-wrap: wrap;
    }
    .sktechhaus-wrapper .our-solution-img{
      height: 200px !important;
    }
    .sktechhaus-wrapper .challenge-text{
      margin-top: 30px;
      font-size: 25px;
      text-align: center;
      color: #fff !important ;
    }
    .sktechhaus-wrapper .challenges-card-text{
      text-align: center;
      font-size: 32px !important;
    }
    .sktechhaus-wrapper .item input[type="radio"]:checked+label {
    width: 350px;
    }
    .sktechhaus-wrapper .mobile-view-cards{
      overflow-x: hidden;
    }
    .sktechhaus-wrapper .mobile-wrapper{
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
    .sktechhaus-wrapper .card-size{
    width: 170px;
    height: 250px;
      margin: 0 !important;
    }
  .sktechhaus-wrapper .gradient-border {
    color: white;
    width: 100%;
    height: 300px;
    z-index: 1;
  }

    .sktechhaus-wrapper .mobile-section-img{
      display: none;
    }
    .sktechhaus-wrapper .phone-screen-mobile-section-img{
      display: block !important;
    }
    .sktechhaus-wrapper .laptop-section{
      display: none;
  }
  .sktechhaus-wrapper .mobile-laptop-section{
    display: block !important ;
  }
    .sktechhaus-wrapper .orbits-icon-rotation{
      display: none;
    }
    .sktechhaus-wrapper .big-heading {
      font-size: 60px;
    }

    .sktechhaus-wrapper .sketch-house-tab-img {
      max-width: 100%;
    }

    .sktechhaus-wrapper .strategic {
      font-size: 3.5rem;
    }

    .sktechhaus-wrapper .lottie-construction {
      display: flex;
      align-items: start;
      justify-content: center;
    }

    .sktechhaus-wrapper .lottie-full {
      width: 100%;
      height: 100%;
      min-height: 0px;
    }

    .sktechhaus-wrapper .glowing-card {
      display: flex;
      justify-content: center;
    }

    .sktechhaus-wrapper .card-size {
      margin-right: 0;
      /* remove negative margin */
    }




    .sktechhaus-wrapper .skewed-banner {
      bottom: -11px;
    }

    .sktechhaus-wrapper .marquee {
      font-size: 3.0rem;
    }

    .sktechhaus-wrapper .bg-lightdark {
      padding: 30px;
    }

    .sktechhaus-wrapper .row-item {
      margin-bottom: 20px;
    }

    .sktechhaus-wrapper .card-size {
      margin-right: 15px;
      /* -30px ki jagah spacing */
      flex: 0 0 auto;
      /* card shrink na ho */
    }

    .sktechhaus-wrapper img.screen2-img {
      margin-top: 25px;
    }

    .sktechhaus-wrapper .screen4-card {
      margin-top: 25px;
    }
  }

  @media (min-width: 568px) and (max-width: 1024px) {
    .sktechhaus-wrapper .bg-lightdark {
      padding: 30px
    }

    .sktechhaus-wrapper .lottie-full {
      width: auto;
      min-height: auto;
    }
    .sktechhaus-wrapper .testmonial-icon {
      width: 70px;
    }
    .sktechhaus-wrapper .sketch-house-tab-img {
    max-width: 100%;
}
  }


@media(min-width:1900px){
  .sktechhaus-wrapper .lottie-full{
    width: 800px !important;
  }
.sktechhaus-wrapper .orbits{
      position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
      transform: translateZ(0deg) rotateZ(20deg) perspective(900px) rotateX(40deg) rotateY(10deg)  !important;
      right: 300px !important;
      top: -100px;
    }
  .sktechhaus-wrapper .orbit.o3 {
    width: 800px !important;
    height: 800px !important;
  }
.sktechhaus-wrapper .orbit.o2 {
    width: 700px !important;
    height: 700px !important;
}
.sktechhaus-wrapper .orbit.o1 {
   display: none !important;
}
.sktechhaus-wrapper .item {
  flex: 0 0 320px;
  height: 600px;
}

}
.sktechhaus-wrapper .laptop-section{
    background-image: url("/static/assets/img/sketchhaus_imgs/fifth-sec-img1.webp");
     background-size: cover; 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     height: 100vh; 
     width: 100%;
     overscroll-behavior: none !important;
    scroll-behavior: auto !important;
}
.sktechhaus-wrapper .mobile-laptop-section{
  display:none;
}
.sktechhaus-wrapper .mobile-section-img{
  background-image: url("/static/assets/img/sketchhaus_imgs/mobil-section-img.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
}
.sktechhaus-wrapper .phone-screen-mobile-section-img{
  display: none;
}



/* orbits icons roatate animation  */

   
    /* 3D tilted orbital system */
    .sktechhaus-wrapper .orbits{
      position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
      transform: translateZ(0) rotateZ(20deg) perspective(900px) rotateX(40deg) rotateY(10deg);
        right: 300px;
 
    }

      .sktechhaus-wrapper .orbit{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.18); }
      /* .orbit.o1{ width:600px; height:600px; animation: spin 12s linear infinite; } */
      .sktechhaus-wrapper .orbit.o2{ width:600px; height:600px; animation: spin 22s linear infinite reverse; }
      .sktechhaus-wrapper .orbit.o3{ width:700px; height:700px; animation: spin 36s linear infinite; opacity:.9; }

    /* Icons riding on the rings */
    .sktechhaus-wrapper .icon{
      --size:54px; --glow: 0 10px 26px rgba(255,59,31,.45);
      position:absolute; left:50%; top:-27px; transform:translateX(-50%);
      width:var(--size); height:var(--size); border-radius:50%;
      background: radial-gradient(circle at 30% 30%, #ff8d74 0%, #ff654a 35%, var(--accent) 70%, #c92513 100%);
      box-shadow: var(--glow), inset 0 1px 2px rgba(255,255,255,.25);
      display:grid; place-items:center; color:#fff; font-size:20px; font-weight:700;
    }
    .sktechhaus-wrapper .icon svg{ width:24px; height:24px; fill:#fff; }

    @keyframes spin { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }


    

    /* Responsiveness */
    @media (max-width: 900px){
     .sktechhaus-wrapper .orbit.o1{ width:320px; height:320px;}
     .sktechhaus-wrapper .orbit.o2{ width:470px; height:470px;}
     .sktechhaus-wrapper .orbit.o3{ width:600px; height:600px;}
    }
    @media (max-width: 640px){
      .sktechhaus-wrapper .icon{ --size:44px; top:-22px; }
      .sktechhaus-wrapper .orbit.o1{ width:240px; height:240px;}
      .sktechhaus-wrapper .orbit.o2{ width:360px; height:360px;}
      .sktechhaus-wrapper .orbit.o3{ width:460px; height:460px;}
    }

/* sketchahus heading on business case section */
  .sktechhaus-wrapper .big-heading {
  display: inline-block;
  position: relative;
  font-size: clamp(3.5rem, 8vw, 90px); /* responsive */
  line-height: 1.1;
}

/* dono text ek hi place par overlap karne ke liye flex/inline-block trick */
.sktechhaus-wrapper .big-heading .text {
  display: block;
}

/* ek stroke text */
.sktechhaus-wrapper .big-heading .first {
  color: transparent;
  -webkit-text-stroke: 2px  #E22201;
  position: absolute;
  top: 0;
  left: 0;
}

/* animated filled text */
.sktechhaus-wrapper .big-heading .second {
  color:  #E22201;
  -webkit-text-stroke: 2px #E22201;
  display: block;
  animation: waves 4s ease-in-out infinite;
}

@keyframes waves {
  0%, 100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}



.firm-para{
  font-family: "Inter", sans-serif !important;
}


section {
  position: relative;
  z-index: auto !important;
}

.sktechhaus-wrapper .key-benifit-imgs{
  border-top-right-radius:10px !important;
  border-top-left-radius: 10px !important;
}
.sktechhaus-wrapper .key-benifit-card{
  border-radius: 10px !important;
  width: 250px !important;
}

.sktechhaus-wrapper .our-solution-img{
  height: 300px;
  border-radius: 20px;
}
/* Hover par expand
.sktechhaus-wrapper .item:hover label {
  width: 800px;
  background-color: #fff;
  background-image: none;
  color: #000;
  padding: 20px;
}

 Hover par title hide 
.sktechhaus-wrapper .item:hover label span.box-title {
  display: none;
}

 Hover par content dikhana 
.sktechhaus-wrapper .item:hover label .content {
  display: flex;
}
 */

.node-img-wrapper {
    position: absolute;
    top: 35% ;
    margin: 0 auto ;
    width: 30%;
    height: 40%;
    left: 0;
    right: 0;
    z-index: 1;
}

/* Tooltip css  */

.tooltip-inner {
  background-color: #222;   
  color: #fff;           
  font-size: 16px;         
  font-weight: 500;      
  padding: 8px 14px;        
  border-radius: 6px;       
}


.tooltip-arrow {
  --bs-tooltip-arrow-width: 1rem;  
  --bs-tooltip-arrow-height: 0.5rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #222 !important;  
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #222 !important; 
}