/* 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;
}
}

/* ----------------------------------------- */
.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: 40px;
    background-color: white;
}
.web-app-development-hero-explore{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20%;
    height: 75px;
    background: transparent;
    
    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-weight: 700;
}
.web-app-development-hero-left p{
    margin-block: 20px;
}
.web-app-development-hero-left button{
    padding:13px;
    width: 30%;
    border: none;
    border-radius: 24px;
    background: linear-gradient(to right, #0072FF, #004499);
    color: white;
   position: relative;
   overflow: hidden;
}
.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{
   /* animation:transformright 0.3s ease;
   animation-timeline: view();
   animation-range:entry 0% cover 50%; */
}
@keyframes transformright {
    0%{
        transform: translateX(50%);
        opacity: 0;
    }
     100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.web-app-development-hero-right img{
    width: 85%;
}
@media (max-width:986px) {
    .web-app-development-hero-container{
        height: fit-content;
        padding: 20px;
    }
    .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: 40%;
        background-color: white;
        height: 60px;
    }
    
}

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


/* ----------------------------------------- */
.web-app-development-business-container{
    margin-inline: 20px;
    margin-top: 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 img{
 width:100%;
}
.web-app-development-business-right button{
    padding:13px;
    width: 30%;
    border: none;
    border-radius: 24px;
    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;
    }
}

/* ---------------------------------------- */
.web-app-development-services{
    padding-block: 50px;

}
.web-app-development-services h5{
    text-align: center;
}
.web-app-development-services h2{
    text-align: center;
    margin-bottom: 30px;
   background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent;
}
.web-app-development-services-container{
    margin-inline: 50px;
}
.web-app-development-services-box1{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/services1.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 600px;
    border-radius: 10px;
}

.web-app-development-services-box2{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/service2.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 295px;
    border-radius: 10px;
}
.web-app-development-services-box3{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/services3.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 295px;
    margin-top: 10px;
    border-radius: 10px;
}

.web-app-development-services-box4{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/services4.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 295px;
    border-radius: 10px;
}

.web-app-development-services-box5{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/services5.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 295px;
     margin-top: 10px;
    border-radius: 10px;
}
.web-app-development-services-box6{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757939378/assets/web-app-development/services6.webp");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 600px;
    border-radius: 10px;
}
.web-app-development-services-box1-hover{
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    color: white;
    position: relative;
    padding: 10px;

}
.web-app-development-services-box1-hover h3{
    z-index: 1;
}
.web-app-development-services-box1-hover p{
    z-index: 1;
    color: white;
}
.web-app-development-services-box1-hover::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 0;
    background:linear-gradient(#25222271, #000);
    filter: blur(10px);
}
.web-app-development-services-box1:hover .web-app-development-services-box1-hover{
    opacity: 1;
}
.web-app-development-services-box2:hover .web-app-development-services-box1-hover{
    opacity: 1;
}

.web-app-development-services-box3:hover .web-app-development-services-box1-hover{
    opacity: 1;
}
.web-app-development-services-box4:hover .web-app-development-services-box1-hover{
    opacity: 1;
}

.web-app-development-services-box5:hover .web-app-development-services-box1-hover{
    opacity: 1;
}
.web-app-development-services-box6:hover .web-app-development-services-box1-hover{
    opacity: 1;
}
@media (max-width:986px) {
    .web-app-development-services{
        overflow: hidden;
    }
    .web-app-development-services h2{
        margin-inline: 20px;
        text-align:left;
    }
    .web-app-development-services-container{
        margin-inline: 20px;
    }
    .web-app-development-services-box1{
        height: 300px;
        margin-bottom: 10px;
    }
    .web-app-development-services-box1-hover::before{
        height: 80%;
        background: linear-gradient(#25222271, #000000b6);
    }
    .web-app-development-services-box6{
        height: 300px;
        margin-top: 10px;
    }
    .web-app-development-services{
        padding-bottom: 20px;
    }
}

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

/* --------------------------- */
.craitrix-design-solution-container{
    margin-right: 20px;
}
.craitrix-design-solution-left{
    width: 100%;
}
.craitrix-design-solution-left img{
    width: 100%;
}
.craitrix-design-solution
{
    padding-block: 50px;
}
.craitrix-design-solution-right{
  display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 30px;
}
.craitrix-design-solution-right h2{
       background: linear-gradient(to right, #0D47A1,#0072FF);
    background-clip: text;
    color: transparent;
}
.craitrix-design-solution-right-box{
    border:1px solid #0D47A142;
    box-shadow: 0px 0px 8px 0px #00000021;
    border-radius: 9px;
    padding: 10px;
    text-align: center;
    min-height: 100%;
}
.craitrix-design-solution-right-box img{
    width: 80px;
    margin-bottom: 10px;
}
.craitrix-design-solution-right-container .col-lg-6{
  padding-left: 2px !important;
}
.craitrix-design-solution-right-container .col-lg-3{
      padding-left: 2px !important;
      padding-right: 2px !important;

}
.craitrix-design-solution-right-container .col-lg-6 .col-lg-6{
      padding-right: 2px !important;

}
@media (max-width:986px) {
    .craitrix-design-solution{
        overflow-x: hidden;
        padding-block: 0px;
    }
    .craitrix-design-solution-container{
        margin-inline: 10px;
    }
    .craitrix-design-solution-right-container .col-lg-6{
        padding-left: auto !important;
        margin-top: 5px;
    }
    .craitrix-design-solution-right-box img {
        width: 70px;
    }
    .craitrix-design-solution-right-box{
        margin-bottom: 10px;
      
    }
    .craitrix-design-solution-right-container .col-lg-6{
          padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
    .craitrix-design-solution-right-container .col-lg-6 .col-lg-6{
         padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
    .craitrix-design-solution-right-container .col-lg-3{
        margin-top: 10px;
           padding-right: calc(var(--bs-gutter-x) * .5) !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
   
}
/* ---------------------------- */

/* ------------------------------------------- */
.whitelabel-dex-models{
    padding-top: 70px;
}
.whitelabel-dex-models h2{
    text-align: center;
    background: linear-gradient(#0D47A1,#0072FF);
    background-clip: text;
    color: transparent;
    padding-bottom: 30px;
    z-index: 5;
    position: relative;
}
.whitelabel-dex-models-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 400px;
    flex-wrap: wrap; /* for smaller screens */
}

.whitelabel-dex-models-flex-box {
    position: relative; /* important for ::before */
    background: linear-gradient(45deg , #0D47A1, #0072FF); /* border gradient */
    border-radius: 50px;
    height: 400px;
    width: 150px; 
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    overflow: hidden;
}

.whitelabel-dex-models-flex-box::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: white; 
    border-radius: 47px;
    z-index: 0; 
}



.whitelabel-dex-models-flex-box img {
    width: 100px;
    margin-bottom: 15px;
    z-index: 2;
}
.whitelabel-dex-models-flex-box h6{
    color: black;
   z-index: 3;
}

.whitelabel-dex-models-flex-box-para {
    font-size: 16px; 
    line-height: 1.5;
    text-align: center;
    color: #333; 
    opacity: 0;
    height: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 2;
}

/* Hover effect */
.whitelabel-dex-models-flex-box:hover {
    width: 400px; 
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
 

}
.whitelabel-dex-models-flex-box:hover::before {
        background: linear-gradient(to bottom, #0D48A2,#0072FF);

}
.whitelabel-dex-models-flex-box:hover .whitelabel-dex-models-flex-box-para {
    opacity: 1;
    height: auto;
    color: white;
}
@media (max-width:986px) {
    .whitelabel-dex-models{
        padding-top: 20px;
    }
    .whitelabel-dex-models-flex{
        height: auto;
        padding-inline: 20px;
    }
       .whitelabel-dex-models-flex-box::before{
                background: linear-gradient(to bottom, #0D48A2, #0072FF);

       }
    .whitelabel-dex-models-flex-box{
        height: auto;
        background: linear-gradient(to bottom, #0D48A2, #0072FF);
        width:400px;
         box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }
    .whitelabel-dex-models-flex-box-para{
        opacity: 1;
        height: auto;
    color: white;
    }
    .whitelabel-dex-models h2{
        text-align: left;
        padding-inline: 20px;
    }

}




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

.whitelabel-hire-developer-container {
    padding-inline: 20px;
    margin-inline: 20px;
    
}

.whitelabel-hire-developer-left {
    display: flex;
    align-items: stretch; /* ensures both boxes same height */
    width: 100%; 
    gap: 20px; 
}
.whitelabel-hire-developer-left-box1{
    width: 100%;
}
.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;
    }
}



/* ---------------------------------- */
  :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){
    .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-tech-stack img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


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


/* ------------------------------- */
.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%;
}
.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%;
    height: 100%;
}
@media (max-width:986px) {
    .craitrix-why{
        margin-inline: 20px;
    }
    .craitrix-why-container{
        margin-inline: 0px;
    }
}
/* ----------------------------------- */

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


.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:#0A97BE;
}
.faq-box:hover .faq-left-box-question-icon{
    color: #0A97BE;
}
.faq-box.active{
    border:2px solid #0A97BE;
     box-shadow: 0px 0px 5px #0A97BE;
}
.faq-box:hover{
        border:2px solid #0A97BE;

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

.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: #0A97BE;
}

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

.faq-box-question .faq-left-box-question-icon i{
    font-size: 30px;
}
.faq-box.active .faq-left-box-question-icon {
  transform: rotate(45deg);
  color: #0A97BE;
}
.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: #0A97BE;
  font-weight: 600;
}

@media (max-width:786px) {
    .faq-left-box-question p{
        font-size: 14px;
    }
    .faq-question-icon i{
        font-size: 14px;
    }
}




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

/* --------------------------------- */
.craitrix-technology{
    margin-inline: 50px;
    margin-block: 50px;
    background: linear-gradient(to bottom right,#FFFFFF, #FF87EF1F, #0072FF1F);
    border-radius: 12px;
}
.craitrix-technology-container{
    border: 1px solid #8F8F8F;
     border-radius: 12px;
     
    padding-inline: 100px;
}
.craitrix-technology-left-span1,
.craitrix-technology-left-span2 {
    position: relative;
    display: inline-block;        
    color: #fff;
    z-index: 1;
}

.craitrix-technology-left-span1::before,
.craitrix-technology-left-span2::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;      
    z-index: -1;
}

.craitrix-technology-left-span1::before {
    background-color: #ff87efd5; 
        transform: rotate(-4deg); 

}

.craitrix-technology-left-span2::before {
    background-color: #0073ffb4; 
        transform: rotate(4deg); 

}
.craitrix-technology-left{
    padding-block: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.craitrix-technology-left h1{
    font-size: 40px !important;
    line-height: 2;
}


.craitrix-technology-left button{
    padding:13px;
    width: 60%;
    border: none;
    border-radius: 24px;
    background: linear-gradient(to right, #0072FF, #004499);
    color: white;
   position: relative;
   overflow: hidden;
   margin-top: 30px;
}
.craitrix-technology-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-technology-left button:hover::before {
  left: 120%; 
  right: 0;
}
.craitrix-technology-right{
    display: flex;
    height: 100%;
    justify-content: end;
}

.craitrix-technology-right img{
    width: 90%;
}
@media (max-width:500px) {
    .craitrix-technology{
        margin-inline: 20px;
    }
    .craitrix-technology-container {
        padding-inline: 20px;
    }
    .craitrix-technology-left h1
 {
    font-size: 24px !important;
    margin-bottom: 20px;
 }
.craitrix-technology-left button{
    margin-top: 50px;
    margin: auto;
}
.craitrix-technology-right img{
    display: none;
}
}