/* popup */

.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.popup-banner{
    background:url("https://res.cloudinary.com/cryptiecraft/image/upload/v1754761789/assets/popup-banner.png");
   background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    border-radius: 1rem 1rem 0px 0px;
}
.popup-banner img{
    padding-block: 50px;
    width: 100px;
    height: auto;
}
.popup-content {
    background-color: white;
    border-radius: 20px;
    text-align: center;
    width: 60%;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.popup-content .col-lg-6{
    padding-left: 0px !important;
    padding-right: 0px !important;

}
.popup-content-left{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
        border-radius: 2rem;
}
.popup-content-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 20px;
    background-color: #F0FBFF;
    border-radius:0px 2rem 2rem 0px;
}
.popup-content-right h4{
    color: #0072FF;
}
.popup-content-left img{
    width: 100%;
    height: 100%;
    border-radius: 2rem 0px 0px 2rem;
}
.popup-content .illustration {
    width: 300px;
    margin-bottom: 20px;
}
.popup-content-container{
    padding: 50px;    
}
.popup-round-img{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
}
.popup h2 {
    font-size: 31px !important;
    font-weight: 500;
    color: #0099cc;
    margin-bottom: 20px;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.button-container a{
    text-decoration: none;
    width: 100%;
}

.button-container button {
    width: 100%;
    padding: 10px 25px;
    border: none;
    border-radius: 1rem;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background-color 0.3s;
}

.button-container button img{
    width: 30px;
    height: auto;
}
.whatsapp-btn {
    background-color: #5FD669;
    color: black;
}

.whatsapp-btn:hover {
    background-color: #339e72;
}

.teams-btn {
    background-color: #0088cc;
    color: white;
}

.teams-btn:hover {
    background-color: #0088cc79;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: black;
    cursor: pointer;
}

.close-btn:hover {
    color: #0000009f;
}


@media (max-width:1200px) {
    .Whitelabel-hero-left-button{
        width: 100%;
    }
    
    .Coinbase-Clone-button{
     font-size: 12px;
     padding: 12px 20px;
    }
}
@media (max-width:1000px) {
    .popup-banner img{
        width:70px;
        height: auto;
    }
    .popup-content-container {
        padding:20px
    }
}
@media (max-width:986px) {
     .overlay{
        width: 100% !important;
     }
   .overlay .button-container{
        display: flex;
        gap:5px;
        width: 50%;
  margin: 20px auto;    }
    .overlay .button-container button{
         width: 100%;
         font-size: 14px;
         gap: 5px;
       
    }

    .Coinbase-Clone-button{
     font-size: 12px;
     padding: 12px 20px;
    }
}
@media (max-width:786px) {
    .popup-content{
        width: 70%;
    }
    .popup-content-container{
        padding:25px;
    }
    .popup-content-container h2{
        font-size: 30px !important;
    }
    .popup-banner img {
        width: 80px;
        height: auto;
    }
}

@media (max-width:568px) {
    .popup-banner img{
        height: auto;
        padding-top:0px;
        padding-bottom:50px;
    }
    .popup-content-container h2{
        font-size: 24px !important;
    }
    .popup-content-right{
        padding-inline: 10px;
    }
    .popup-content-right h4{
        font-size: 12px !important;
    }
    .popup-content-container p{
        font-size: 14px;
    }
    .Coinbase-Clone-button{
     font-size: 12px;
     padding: 12px 20px;
    }
    .Whitelabel-hero-left h1{
        font-size: 30px !important;
    }
   .overlay{
    padding:20px !important
   }
   .overlay h2{
    font-size: 16px;
   }
  .overlay .button-container button{
    font-size: 12px;
    padding: 5px 10px;
  }
      .popup-content {
        width: 90%;
      }
      .close-btn
{
  right: 0;
}
.button-container button img{
    width: 20px;
}
}

p{
    line-height: 1.7;
    color: #000;
}

.animate-on-scroll{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.fade-up{
        transform: translateY(-50px);
}
.fade-left{
    transform: translateX(-50px);
}
.fade-right{
     transform: translateX(50px);
}
.animate-on-scroll.show{
    opacity: 1;
    transform: translate(0,0);
}
.craitrix-nav-logo{
    width: 200px;
}
.whitelabel-crypto-nav-section .navbar{
     position: absolute !important;
    width: 100%;
    z-index: 2;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
    top: 0;
}
.whitelabel-crypto-nav-section .navbar-nav{
   
           width: 50% !important;
           justify-content: space-between !important;
}
.whitelabel-crypto-nav-section .d-flex{
    gap: 10px !important;
    width: 360px !important;
}
.whitelabel-crypto-nav-section .d-flex button {
  position: relative;
  border-radius: 46px;
  color: #0E48A2; 
  padding: 10px 16px;
  width: 50%;
  background-color: white; 
  border: none; 
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
}
.whitelabel-crypto-nav-section .d-flex button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 46px;
  padding: 2px; 
  background: linear-gradient(#0D47A1, #0072FF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}
.whitelabel-crypto-nav-section .d-flex .btn.active{
    background: linear-gradient(to right , #0D48A2,#0072FF);
    color: white;
    
}

.navbar-light .navbar-nav .nav-link
{
    color: black !important;
}
@media (max-width:986px) {
    .whitelabel-crypto-nav-section .navbar-nav{
        width: 100% !important;
    }
    .navbar-light .navbar-nav .nav-link{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
@media (max-width:986px) {
    .whitelabel-crypto-nav-section .navbar {
        padding:10px;
    }
}
.custom-toggler {
  border: none;
  background: transparent;
  padding: 8px;
  outline: none;
}

.toggler-bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #000; /* black bars */
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* Animate when button is "open" */
.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; 
  width: 80%;
  top: 60px;
  left: 0;
  right: 0;
  margin: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

}

.dropdown, .dropend, .dropstart, .dropup{
    position:static !important;
    padding: 20px;
}

.mega-menu {
  width: 80% !important;
  left: 0;
  right: 0;
  margin: auto;
  top: 100%;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Left column (titles) */
.mega-titles li {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: all 0.3s ease;
}
.mega-titles li:hover,
.mega-titles li.active {
  background: #f5f5f5;
  color: #0D48A2;
}

/* Right column panels */
.mega-panel {
  display: none;
}
.mega-panel.active {
  display: block;
}

/* ----------------------------------------- */
.web-app-development-hero{
    padding-top: 100px;
   padding-bottom: 50px;
    background: linear-gradient(45deg,rgb(102, 161, 228),pink, rgb(102, 161, 228));
}


.web-app-development-hero-container{
     width: 95%;
    margin-inline: auto;
    box-shadow: 0px 0px 23px 0px #00000040;
    border-radius: 23px;
    position: relative;
    padding-block: 50px;
    padding-inline: 100px;
    background-color: white;
}
.web-app-development-hero-explore{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20%;
    height: 75px;
    background: transparent;
        border-bottom-right-radius: 23px;

    border-top-left-radius: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
   box-shadow: 10px 10px 5px 0px #00000040 inset;
-webkit-box-shadow: 10px 10px 5px 0px #00000040 inset;
-moz-box-shadow: 10px 10px 5px 0px #00000040 inset;

}
.web-app-development-hero-explore a{
    text-decoration: none;
    color:#0072FF ;
    font-size: 20px;
    font-weight: 500;
}
.web-app-development-hero-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

}
.web-app-development-hero-left h1{
     background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent  ;
    font-size: 50px;
    font-weight: 700;
}
.web-app-development-hero-left p{
    margin-block: 20px;
}
.web-app-development-hero-left button{
    padding:13px;
    width: 50%;
    border: none;
    border-radius: 12px;
    background: linear-gradient(to right, #0072FF, #004499);
    color: white;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: center;
}
.web-app-development-hero-left button::before{
 content: '';
    position: absolute;
      top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.5s ease;

}
.web-app-development-hero-left button:hover::before {
  left: 120%; 
  right: 0;
}
.web-app-development-hero-right{
    width: 100%;
   
}
@keyframes transformright {
    0%{
        transform: translateX(50%);
        opacity: 0;
    }
     100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.web-app-development-hero-right img{
    width: 95%;
}
@media (max-width:986px) {
    .web-app-development-hero-container{
        height: fit-content;
        padding-inline: 20px;
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .web-app-development-hero-left button{
        width: 80%;
        margin: auto;
    }
    .web-app-development-hero-right img{
        margin-block: 20px;
    }
    .web-app-development-hero-explore{
        width: 45%;
        background-color: white;
    }
    
}

@media (max-width:786px) {
    .web-app-development-hero-explore{
        height: 60px;
    }
}

/* ----------------------------------------- */
.web-app-development-business-container{
    margin-inline: 20px;
    margin-block: 50px;
}

.web-app-development-business-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.web-app-development-business-right h2{
     background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent;
}
.web-app-development-business-right p{
    line-height: 1.7;
}
.web-app-development-business-left {
    display: flex;
    justify-content: center;
    height: 100%;
}
.web-app-development-business-left img{
 width:60%;
 margin: auto;
}
.web-app-development-business-right button{
    padding:13px;
    width: 30%;
    border: none;
    border-radius: 12px;
    background: linear-gradient(to right, #0072FF, #004499);
    color: white;
   position: relative;
   overflow: hidden;
}
.web-app-development-business-right button::before{
 content: '';
    position: absolute;
      top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.5s ease;

}
.web-app-development-business-right button:hover::before {
  left: 120%; 
  right: 0;
}

@media (max-width:986px) {
    .web-app-development-business-right button{
        width: 60%;
    }
    .web-app-development-business-container{
        margin-top: 20px;
    }
    .web-app-development-business-left img{
        margin-top: 20px;
    }
}

/* -------------------------- */
.on-demand-services{
    padding-block: 50px;
    background-color: #EFF6FF;
}
.on-demand-services h2{
    text-align: center;
    padding-bottom: 30px;
    background: linear-gradient(135deg , #0072FF, #004499);
    background-clip: text;
    color: transparent;
}
.on-demand-services-para{
    width: 80%;
    margin: auto;
    text-align: center;
}
.on-demand-services-container{
    margin-inline: 50px;
    margin-block: 20px;
}
.on-demand-services-box h4{
    padding: 40px 60px;
    background-color: #004499;
    color: white;
    margin-bottom: 0px !important;
    
}
.on-demand-services-row{
     display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.on-demand-services-box{
    flex: 1 1 calc(30.33% - 30px); /* 3 per row */
  max-width: calc(30.33% - 30px);
  height: 500px; /* fixed height */
  background: #f4f4f4;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s ease;
  position: relative;
 
}
.on-demand-services-box-inside{
    position: absolute;
    inset: 0;
    background:url("./assets/on-demand-service1.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: end;
opacity: 0;



}
.on-demand-services-box-inside h3{
    position: relative;
    z-index: 2;
    padding: 10px;
}
.on-demand-services-box-inside p{
    color: white;
    position: relative;
    z-index: 2;
    padding: 10px;
    opacity: 0;
    transition: all 0.8s ease;
   
}
.on-demand-services-box-inside::before{
    position: absolute;
    content: "";
    bottom:0;
    width: 100%;
    height: 100%;
    background:linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.521), rgb(0, 0, 0),black);
   -webkit-backdrop-filter:blur(20px);
}
.on-demand-services-box:hover{
    flex: 1 1 calc(36% - 10px);   /* expands width */
  max-width: calc(36% - 10px);
  height: 500px;
  margin-inline: 20px;
}
.on-demand-services-box:hover h4{
   display: none;
}
.on-demand-services-box:hover .on-demand-services-box-inside{
    opacity: 1;
}
.on-demand-services-box:hover .on-demand-services-box-inside p{
    opacity: 1;
}
@media (max-width:786px) {
    .on-demand-services-box-inside{
        opacity: 1;
    }
    .on-demand-services-box-inside p{
        opacity: 1;
    }
    .on-demand-services-box h4{
        display: none;
    }
    .on-demand-services-para{
        width: 100%;
    }
}





.on-demand-services-box img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@media (max-width:786px) {
    .on-demand-services-box{
        max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
        height: 320px;
    }
    .on-demand-services-box:hover{
           max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
        margin-inline: 0px;
    }
    .on-demand-services-container{
        margin-inline: 20px;
    }
    .on-demand-services h2{
        padding-bottom: 0px;
    }
    .on-demand-services{
        padding-bottom: 0px;
    }
  
}


/* ---------------------------------- */
.on-demand-features{
    padding: 50px;
    background: linear-gradient(135deg ,#0072FF,#004499);
}
.on-demand-features h2{
    text-align: center;
    margin-bottom: 30px;
    color: white;
}
.on-demand-features-div{
    padding-inline: 40px;
    padding-top: 50px;
    padding-bottom: 100px;
    border: 1px solid #0D47A1;
     border-radius: 1rem;
     background-color: white;
}
.on-demand-features-div-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 20px;
}
 .on-demand-features-para{
    text-align: center;
    color: white;
    width: 80%;
    margin: auto;
 }
@media (max-width:786px) {
    .on-demand-features-para{
        width: 100%;
    }
}


/* Left content */
  .features {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .feature {
    display: flex;
    gap: 10px;
    padding: 18px 24px;
    border-radius: 12px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .feature i{
    opacity: 0;
    font-size: 24px;
    transition: all 0.3s ease;
    color: #0072FF;
  }
.feature-move{
    transform: translateX(15%);
}
  /* .feature.active {
    border-color: #007bff;
    background: #eef6ff;
    box-shadow: 0 6px 14px rgba(0,123,255,0.25);
  } */
     .feature.active h4{
        color: #0072FF;
     }
   .feature.active i{
    opacity: 1;
   }
.on-demand-features-div:hover .card1.front{
     z-index: 2;
    transform: rotate(13deg) translateX(90px) translateY(30px);
}
.on-demand-features-div:hover .card1.back{
     z-index: 1;
    transform: rotate(-18deg) translateX(-90px) translateY(0);
}
  /* Cards container */
  .cards {
    position: relative;
    width: 320px;
    height: 420px;
  }

  .card1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.5s ease, z-index 0.5s ease;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }

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

  /* Initial positions: one tilted left, one right, bottom aligned */
  .card1.front {
    z-index: 2;
    transform: rotate(-8deg) translateX(0) translateY(0);
    transition: all 0.6s ease;
  }

  .card1.back {
    z-index: 1;
    transform: rotate(8deg) translateX(30px) translateY(20px);
       transition: all 0.6s ease;   
  }

  /* Swap on hover */
  .cards.active .card1.front {
    z-index: 1;
    transform: rotate(13deg) translateX(90px) translateY(0);
  }

  .cards.active .card1.back {
    z-index: 2;
       transform: rotate(-18deg) translateX(-90px) translateY(30px);

  }

  @media (max-width:986px) {
    .on-demand-features {
        padding:15px
    }
    .feature-move{
        transform: translate(0px);
    }
    .on-demand-features-div
{
    padding-inline: 0px;
    padding-top: 10px;
}
.features{
    gap: 0px;
}
.cards{
    width: 170px;
    height: 220px;
}
  }
/* ----------------------------------- */


/* --------------------------------- */
.craitrix-understanding-container{
    margin-inline: 50px;
}
.craitrix-understanding-left img{
      width: 80%;
}
.craitrix-understanding{
    padding-block: 50px;
}
.craitrix-understanding-left h2{
     background: linear-gradient(to right, #0D47A1,#0072FF);
    background-clip: text;
    color: transparent;
    margin-bottom: 40px;
}
.craitrix-understanding-right{
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    height: 100%;
    
}
.craitrix-understanding-right-wrapper{
    display: flex;
    flex-direction: column;
    gap: 30px;
height: 660px;
padding: 20px;
    overflow-y: auto;

}
/* Style the scrollbar */
.craitrix-understanding-right-wrapper::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    height: 10px; /* Height of the scrollbar (for horizontal scrollbars) */
}

/* Style the scrollbar track (background) */
.craitrix-understanding-right-wrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Light gray background */
    border-radius: 10px; /* Rounded corners */
}

/* Style the scrollbar thumb (the draggable part) */
.craitrix-understanding-right-wrapper::-webkit-scrollbar-thumb {
    background:linear-gradient(to bottom , #0072FF,#004499); /* Dark gray color */
    border-radius: 10px; /* Rounded corners */
}

/* Style the scrollbar thumb on hover */
.craitrix-understanding-right-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}

/* Optional: Style the scrollbar buttons (if applicable) */
.craitrix-understanding-right-wrapper::-webkit-scrollbar-button {
    display: none; /* Hide buttons (optional) */
}

.craitrix-understanding-right-box{
    padding: 20px;
    box-shadow: 0px 0px 9px 0px #0072FF40;
    border-radius: 16px;
    position: relative;
    background-color: white;
}
.craitrix-understanding-right-box p{
    margin-bottom: 0px !important;
}
.craitrix-understanding-right-box::before{
    content: "";
    position: absolute;
  background: linear-gradient(45deg, #0D47A1, #0072FF);
 inset: 2px;
  border-radius: 16px;
  transition: all 0.1s ease;
  z-index: -1;
}
.craitrix-understanding-right-box:hover{
    cursor: pointer;
}
.craitrix-understanding-right-box:hover::before{
   inset: -4px;
}
@media (max-width:786px) {
    .craitrix-understanding {
        padding-block: 20px;
    }
    .craitrix-understanding-container{
        margin-inline: 20px;
    }
    .craitrix-understanding-right-wrapper{
        height: auto;
        gap: 10px;
    }
    .craitrix-understanding-right-wrapper {
        padding: 3px;
    }
    .craitrix-understanding-left img{
        display: flex;
        margin: auto;
    }
    .craitrix-understanding-right{
        margin-top: 20px;
    }
}

/* ----------------------------------------- */
.on-demand-ahead{
    background-color: #EFF6FF;
    padding-block: 30px;
}
.on-demand-ahead-left h2{
     padding-top: 30px;
     font-size: 50px;
  background: linear-gradient(45deg, #0D47A1, #0072FF);
  background-clip: text;
  color: transparent;
}
.on-demand-ahead-container{
    margin-inline: 30px;
}
.on-demand-ahead-right-right{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    height: 450px;
}
.on-demand-ahead-right-left{
        background-color:#004499;
 border-radius: 1rem;
 position: relative;
 height: 450px;
}
.on-demand-ahead-right-left img{
    width: 100%;
    height: 100%;
}
.on-demand-ahead-right-left h3{
    position: absolute;
    bottom: 50px;
    left: 10px;
    color: white;
}
.on-demand-ahead-right-right-box1{
    height: 300px;
        background-color:#004499;
 border-radius: 1rem;
 padding-inline: 10px;
 position: relative;

}
.on-demand-ahead-right-black{
   position: absolute;
   right: -10px;
   width: 100px;
   height: 100px;
   top: -10px;
   background-color: #000;
   border-radius: 0.5rem;
}
.on-demand-ahead-right-right-box1 h2{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.on-demand-ahead-right-right-box2{
    height: 130px;
     
    background-color: #E2E2E2;
        border-radius: 1rem;
 padding-inline: 10px;
 color: #000;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 20px;
 margin: auto;

}
.on-demand-ahead-right-right-box2 div i{
  font-size: 20px;
    color: #004499;
    
}

.on-demand-ahead-last{
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100px;
    background-color: #E2E2E2;
        border-radius: 1rem;
        margin-top: 10px;
       
}
@media (max-width:986px) {
    .on-demand-ahead-right-right-box2{
        margin: 0px;
    }
    .on-demand-ahead-last {
        justify-content: space-between;
    }
}
@media (max-width:786px) {
    .on-demand-ahead-left h2{
        padding-top: 0px;
    }
    .on-demand-ahead-container{
        margin-inline: 20px;
    }
    .on-demand-ahead-right-right{
        margin-top: 20px;
        height: auto;
    }
    .on-demand-ahead-right-right-box2 {
        height: auto;
        padding: 10px;
        margin: 0px;
    }
    .on-demand-ahead-last h5{
        font-size: 16px !important;
    }
}
/* ------------------------------ */


/* -------------------------------- */
.craitrix-industries{
    padding-block: 30px ;
}
.craitrix-industries h2{
    text-align: center;
    margin-bottom: 30px;
    background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent  ;
}
.craitrix-industries-boxs{
    padding-inline: 60px;
    position: relative;
}
.craitrix-industries-boxs::before{
    position: absolute;
    content: "";
    right: 0;
    left: 0;
    height: 150px;
    width: 100%;
    background:linear-gradient(to right , #0072FF, #0D47A1);
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.craitrix-industries-box{
    padding: 15px;
    min-height: 100%;
    background-color: #FFFFFF;
    border: 4px solid #E7E7E7;
    position: relative;
    overflow: hidden;
        transition: all 0.3s ease;

}
.craitrix-industries-box-p{
   width: 80%;
   margin: auto;
   padding-bottom: 20px;
   text-align: center;
}
.craitrix-industries-box::before{
    position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  background-color: #0072FF;
  transform: rotate(45deg);
  right: -100px;
  top:-100px;
          transition: all 0.3s ease;

}
.craitrix-industries-box:hover::before{
   right: -50px;
   top: -50px;
}
.craitrix-industries-box img{
    width: 40px;
    margin-bottom: 20px;
}

@media (max-width:786px) {
    .craitrix-industries-boxs{
        padding-inline: 20px;
    }
    .craitrix-industries-box{
        padding: 10px;
    }
}


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


/* -------------------------------------------- */
.whitelabel-hire-developer {
    padding-block: 50px;
}

.whitelabel-hire-developer-container {
    padding-inline: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.whitelabel-hire-developer-left {
    display: flex;
    align-items: stretch; /* ensures both boxes same height */
    width: 100%; 
    gap: 20px; 
}
.whitelabel-hire-developer-left-box1{
    width: 80%;
}
.whitelabel-hire-developer-left-box1 img {
    width: 100%;
    border-radius: 1rem;
    display: block;
    object-fit: cover;
}

.whitelabel-hire-developer-left-box2 {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    border: 2px solid rgba(0, 120, 212, 0.15);
    box-shadow: 0 8px 25px 0px rgba(0, 120, 212, 0.25);
    padding: 20px;
    border-radius: 1rem;
    background: #fff; 
   
}

.whitelabel-hire-developer-left-box2:hover{
    background: linear-gradient(to bottom, #0D48A2,#0072FF);
    box-shadow: 0px 0px 15px #0000;
  
}

.whitelabel-hire-developer-left-box2:hover img{
    transform: rotate(90deg);
}

.whitelabel-hire-developer-left-box2 h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    background: linear-gradient(90deg, #0D47A1, #0072FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.whitelabel-hire-developer-left-box2:hover h4{
        background: linear-gradient(90deg, #ffffff, #ffffff);
         -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.whitelabel-hire-developer-left-box2 img {
    width: 40px; 
    height: auto;
}
.whitelabel-hire-developer-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.whitelabel-hire-developer-right img{
    width: 100%;
    border-radius: 22px;
    margin-top: 20px;
}
.whitelabel-hero-left button {
  background: linear-gradient(to right , #0D48A2 , #0072FF);
  padding: 15px 20px;
  width: 200px;
  border: none;
  color: white;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}


.whitelabel-hire-developer-right button{
    background: linear-gradient(to right , #0D48A2 , #0072FF);
  padding: 10px 20px;
  width: 40%;
  border: none;
  color: white;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.whitelabel-hire-developer-right button::before{
    content: '';
    position: absolute;
      top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}


/* trigger shine on hover */
.whitelabel-hire-developer-right button:hover::before {
  left: 120%; 
  right: 0;
}
@media (max-width:986px) {
    .whitelabel-hire-developer-right button {
        display: flex;
        justify-content: center;
        width: 80%;
        margin: auto;
    }
    .whitelabel-hire-developer-left-box1 img {
        min-height: 100%;
    }
    .whitelabel-hire-developer-left-box2 h4{
        font-size: 16px;
    }
    .whitelabel-hire-developer-right p{
        padding-block: 20px;
    }
}


/* ---------------------------------- */
  :root{ --accent:#0072FF; --tracker:#ffcc00; --bg:#f6f8fb; }
  .craitrix-features{ position:relative; background:#fff; padding:28px; border-radius:10px; box-shadow:0 6px 30px rgba(0,0,0,.06); overflow:hidden; }

  .craitrix-features-head{ text-align:center; margin-bottom:18px;
    background:linear-gradient(135deg,var(--accent), #004499);
    -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;font-size:18px;
  }
  .step { margin-bottom: 90px; position:relative; }

  .craitrix-features-left-box{
    background:#fff; padding:18px; width:100%; max-width:520px; border-radius:8px; border:1px solid rgba(0,0,0,.06);
    box-shadow: 6px 10px 26px rgba(0,0,0,.04); position:relative; z-index:6;
  }
  .craitrix-features-left-box h4{ color:var(--accent); margin-bottom:8px }
  .craitrix-features-left-box-count{ position:absolute; top:-12px; left:-12px; background:gold; padding:8px 12px; border-radius:9px; font-weight:700; box-shadow:4px 6px 18px rgba(0,0,0,.08); }
.craitrix-features-left-box-inside{
    display: flex;
    align-items: center;
    gap: 10px;
}
.craitrix-features-left-box-inside img{
    width: 50px;
}
  /* timeline icon column */
  .timeline-icon{
    width:96px;
    height:96px;
    border-radius:50%;
    border:3px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--accent);
    font-weight:700;
    z-index:7;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    animation: glowPulse 1.6s infinite ease-in-out;
  }
  .timeline-icon img{ max-width:70%; height:auto; display:block; }

  @keyframes glowPulse {
    0% { box-shadow: 0 0 6px rgba(0,114,255,0.45), 0 0 14px rgba(0,114,255,0.20); }
    50% { box-shadow: 0 0 20px rgba(0,114,255,0.55), 0 0 36px rgba(0,114,255,0.22); }
    100% { box-shadow: 0 0 6px rgba(0,114,255,0.45), 0 0 14px rgba(0,114,255,0.20); }
  }

  /* svg connectors & tracker overlay */
  .connect-svg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; z-index:2; pointer-events:none; }
  .connect-path {
    fill: none;
    stroke: #0072ff;
    stroke-width: 2.5;
    stroke-dasharray: 6 6; /* dotted */
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tracker-rocket { pointer-events:none;
   
}

  /* spacing */
  .craitrix-features-container{ padding-left: 30px; padding-right:30px; padding-top: 30px; }

  /* reversed rows: visually put icon BEFORE content on large screens */
  .step.reverse .col-content { order: 2; }
  .step.reverse .col-icon    { order: 1; }

  /* small screens: stack vertically */
  @media (max-width:986px){
     .craitrix-features .row { flex-direction:column; }
    .connect-svg{ display:none; } /* disable overlay on small screens for clarity */
    .timeline-icon{ margin:14px auto;
    display: none; }

    .craitrix-features-container{
        padding-right: 10px;
        padding-left: 10px;
    }
  }


    .craitrix-features-left-box-count{
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translate(-50%,-50%);
    background-color: yellow;
    border-radius:1rem;
    padding: 10px 17px;
     border: 1px solid #00000014;
    box-shadow: 15px 20px 50px 0px #0000000A;
}
.craitrix-features-left-box-count::before{
content: "";
position: absolute;
transform: rotate(20deg) ;
background-color: white;
    border-radius:0.5rem;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.craitrix-features-container-left{
    position: relative;
}
.craitrix-features-container-right{
    position: relative;
}
.craitrix-features-img{
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 50%;
}
.craitrix-features-img2{
    position: absolute;
    top: 0;
    right: -150px;
    height: 100%;
    width: 50%;
}
@media (max-width:986px) {
    .craitrix-features-img2
{
    width: 100%;
}
   .craitrix-features-img
{
    width: 100%;
}
}


/* ------------------------------- */
.craitrix-why{

    padding-block: 50px;
    margin-left: 50px;
    overflow: hidden;
}
.craitrix-why-container{
    margin-inline: 20px;
}
.craitrix-why h2{
    background: linear-gradient(to right, #0D47A1,#0072FF);
    background-clip: text;
    color: transparent;
    margin-bottom: 40px;
}
.craitrix-why-left{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
.craitrix-why-right{
   position: relative;
   height: 100%;
      display: flex;
    justify-content: center;
    align-items: center;
}
.craitrix-why-right::before{
    content: "";
    position: absolute;
    height: 100%;
    border-radius: 50%;
    width: 100%;
    transform: translateX(30%);
    background:linear-gradient(#DB436845 , #ffffff,#0072FF);
    filter: blur(30px);
    
    z-index: -1;

}
.craitrix-why-right img{
    width: 100%;
}
@media (max-width:986px) {
    .craitrix-why{
        margin-inline: 20px;
    }
}



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


.faq-left-box-question,
.faq-right-box-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 0.5rem;
  /* background-color: rgba(0, 0, 0, 0.589); */
  cursor: pointer;
}
.faq{
    background-color: #EDF2F780;
    padding-block: 50px;
}
.faq h2{
        background: linear-gradient(135deg, #0D47A1,#0072FF);
         background-clip: text;
         color: transparent;
         text-align: center;
         margin-bottom: 20px;
}
.faq-left-box-question p i{
    font-size: 30px;
}
.faq-right-box-question p i{
    font-size: 30px;
}
.faq-left-box-question p{
    margin-bottom: 0px !important;
}
.faq-right-box-question p{
    margin-bottom: 0px !important;
}

.faq-box {
  /* border: 1px solid black; */
  background-color: white;
  border-radius: 0.5rem;
  margin-bottom: 20px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;  transition: all 0.3s ease;
}
.faq-box:hover .faq-left-box-question-para{
    color:#004499;
}
.faq-box:hover .faq-left-box-question-icon{
    color: #004499;
}
.faq-box.active{
    border:2px solid #004499;
     box-shadow: 0px 0px 5px #004499;
}
.faq-box:hover{
        border:2px solid #004499;

        box-shadow:0px 0px 5px #004499;
}

.faq-left-box-answer,
.faq-right-box-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 20px;
  transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq-box.active .faq-left-box-answer,
.faq-box.active .faq-right-box-answer {
  max-height: 300px; /* set high enough for your content */
  opacity: 1;
  padding: 10px 20px;
}

.faq-question-icon {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  transition: transform 0.3s ease, color 0.3s ease;
  line-height: 1;
  transform-origin: center;
  color: #000;
}

.faq-box.active .faq-question-icon {
  transform: rotate(45deg);
  color: #004499;
}

/* Rotate to make "+" look like "×" */
.faq-box.active .faq-question-icon {
  transform: rotate(45deg);
  color: #004499;
}

.faq-box-question .faq-left-box-question-icon i{
    font-size: 30px;
}
.faq-box.active .faq-left-box-question-icon {
  transform: rotate(45deg);
  color: #004499;
}
.faq-container{
    margin-inline: 20px;
}
.faq-box.active .faq-left-box-question-para,
.faq-box.active .faq-left-box-question-icon,
/* .faq-box.active .faq-left-box-answer p,
.faq-box.active .faq-right-box-answer p, */
.faq-box.active .faq-right-box-question p,
.faq-box.active .faq-left-box-question p {
  color: #004499;
  font-weight: 600;
}

@media (max-width:786px) {
    .faq-left-box-question p{
        font-size: 14px;
    }
    .faq-question-icon i{
        font-size: 14px;
    }
    .faq h2{
        padding-inline: 20px;
    }
}
/* ---------------------------------- */
/* ---------------------------------- */
.craitrix-footer{
    position: relative;
    margin-top: 30px;
    padding-top: 100px;
    overflow: hidden;
}
.craitrix-footer-bottom-box4{
    position: relative;
}
.craitrix-footer-bottom-img{
    width: 100%;
    position: relative;
    top: -50px;
}
.craitrix-footer-top{
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 50px;
}
.craitrix-footer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1000px;
  margin-top: 20px;
  border: 3px solid transparent;
  box-shadow: 0px 0px 35px #0073ff75;
  border-radius: 50% 50% 0 0;

  /* Show only the top half */
  /* clip-path: inset(0 0 50% 0); */
}
.craitrix-footer-top-inner{
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 50px;
 
}
.craitrix-footer-top img{
    width: 100px;
}
.craitrix-footer-top h5{
    margin-top: 20px;
    color: #0072FF;
}
.craitrix-footer-top button{
    background: linear-gradient(to right, #0D47A1, #0072FF);
    border:none;
    padding: 10px 20px;
    color: white;
    width: 200px;
    border-radius:24px ;
    position: relative;
}
.craitrix-footer-top button::before{
     content: '';
    position: absolute;
      top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.craitrix-footer-container{
    margin-left: 100px;
    margin-right: 50px;
}
.craitrix-footer-bottom{
    display: flex;
    justify-content: space-between;
    padding-inline: 20px;
    align-items: stretch;
    padding-block: 40px;
    z-index: 100;
    position: relative;
    background-color: white;
    margin-inline: 100px;
   
}
.craitrix-footer-bottom-div{
    margin-top: -50px;
}
.craitrix-footer-bottom .col-lg-3{
    width: 23% !important;
}
.craitrix-footer-bottom .col-lg-3:last-child{
    width: 27% !important;
}
.craitrix-footer-bottom h5{
    background: linear-gradient(#0072FF,#0D47A1);
    background-clip: text;
    color: transparent;
}
.craitrix-footer-bottom ul{
    padding-left: 0px !important;
}
.craitrix-footer-bottom ul li{
    list-style: none;
    margin-bottom: 10px;
}
.craitrix-footer-top button:hover::before {
  left: 120%; 
  right: 0;
}
.craitrix-footer-bottom-box2-news input{
    border: none;
    border-bottom: 1px solid black;
    width: 100%;
}
.craitrix-footer-bottom-box2-news div{
    display: flex;
    align-items: center;
}
.input-wrapper {
    position: relative;
}
.input-wrapper i{
  position:absolute;
  right: 5px;
}

.craitrix-footer-follow {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
}
.craitrix-footer-follow div{
    display: flex;
    gap: 10px;
}
.craitrix-footer-follow img{
    width: 25px;
}
.craitrix-footer-follow a{
    text-decoration: none;
}
.craitrix-footer-getin-Touch a{
    text-decoration: none;
}
.craitrix-footer-getin-Touch img{
    width: 25px;
}
.craitrix-footer-getin-Touch-icons{
    display: flex;
    gap: 10px;
}
.craitrix-footer-getin-Touch-icons a{
    border: 1px solid black;
    padding: 10px;
    background-color: #0A97BE4A;
    border-radius: 12px;
   border-image: linear-gradient(45deg, #9E9E9E, #F3F3F3);
   background: 
        linear-gradient(#0A97BE4A, #0A97BE4A) padding-box, /* inside background */
        linear-gradient(45deg, #9E9E9E, #F3F3F3) border-box; /* border gradient */

}

@media (max-width:986px){
    .craitrix-footer{
        padding-top: 0px;
    }
    .craitrix-footer::before{
        height: 450px;
    }
    .craitrix-footer-top img{
        width: 60px;
    }
    .craitrix-footer-container{
        margin-left: 0px;
        margin-right: 0px;
        padding-inline: 10px;
    }
    .craitrix-footer-bottom{
        padding-inline: 0px;
    }
    .craitrix-footer-bottom .col-lg-3{
        width: 100% !important;
    }
    .craitrix-footer-bottom .col-lg-3:last-child{
        width: 100% !important;
    }
}

@media (max-width:486PX) {
    .craitrix-footer::before{
        height: 410px;
    }
    .craitrix-footer-top-inner p{
        padding-inline: 20px;
        text-align: center;
    }
}


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

/* --------------------------------- */
.craitrix-contactus{
    background: linear-gradient(45deg,#0072FF,#0D47A1);
    padding-block: 50px;
}
.craitrix-contactus h2{
    background: linear-gradient(to right, #0D47A1,#0072FF);
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
    font-size: 40px;
}
.craitrix-contactus-container{
    background-color: white;
    width: 90%;
    margin: auto;
    padding: 50px;
    border-radius: 35px;
}
.craitrix-contactus-left{
    width: 80%;
    margin: auto;
}
.craitrix-contactus-left input{
    width: 100%;
    font-size: 18px;
    padding: 10px;
     border-radius: 12px;
}
.craitrix-contactus-left select{
     font-size: 18px;
    padding: 10px;
     border-radius: 12px;
}
.craitrix-contactus-left textarea{
     font-size: 18px;
    padding: 10px;
     border-radius: 12px;
}
.craitrix-contactus-left-input{
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
   
}

.craitrix-contactus-left-input-name{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.craitrix-contactus-left-country,
.craitrix-contactus-left-msg{
    display: flex;
    flex-direction: column;
}

.craitrix-contactus-left button{

    margin-top: 30px;
    padding:13px;
    width: 100%;
    border: none;
    border-radius: 20px;
    background: linear-gradient(to right, #0072FF, #004499);
    color: white;
   position: relative;
   overflow: hidden;
}
.craitrix-contactus-left button::before{
 content: '';
    position: absolute;
      top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-20deg);
  transition: left 0.5s ease;

}
.craitrix-contactus-left button:hover::before {
  left: 120%; 
  right: 0;
}
.craitrix-contactus-right{
    width: 90%;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.craitrix-contactus-right-box{
    background: url(./assets/contact-image.jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    position: relative;
    border-radius: 12px;
}
.craitrix-contactus-right-box-inside{
    background-color: white;
    width: 80%;
    margin: auto;
    border-radius: 12px;
    padding: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

}

.craitrix-contactus-right-contact{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.craitrix-contactus-right-contact-phone{
    display: flex;
    align-items: center;
    gap: 20px;
}
.craitrix-contactus-right-contact-phone img{
    width: 20px;
}
.craitrix-contactus-right-contact-phone-details p{
   margin-bottom: 0px !important;
}
.craitrix-contactus-right-contact-email-details p{
   margin-bottom: 0px !important;
}
.craitrix-contactus-right-contact-phone-img{
    padding: 10px;
    border: 1px solid black;
    border-radius: 50%;
}
.craitrix-contactus-right-contact-email-img{
    padding: 10px;
    border: 1px solid black;
    border-radius: 50%;
}
.craitrix-contactus-right-contact-email img{
    width: 20px;
}
.craitrix-contactus-right-contact-email{
    display: flex;
    align-items: center;
    gap: 20px;
}
@media (max-width:500px) {
    .craitrix-contactus-container{
        padding: 10px;
        border-radius: 14px;
    }
    .craitrix-contactus-left{
        width: 95%;
    }
    .craitrix-contactus-container{
        width: 95%;
    }
    .craitrix-contactus-right{
        width: 100%;
        margin-top: 20px;
        justify-content: start  ;
    }
    .craitrix-contactus-right-box-inside{
        width: 90%;
        padding: 15px;
    }
    .craitrix-contactus-right-contact-phone-details p{
        font-size: 12px;
    }
      .craitrix-contactus-right-contact-email-details p{
        font-size: 12px;
    }
}