/* 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.webp");
   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-block: 15px;
    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);
}




/* ----------------------------------------- */
.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 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{
    display: flex;
    justify-content: center;

}
@keyframes transformright {
    0%{
        transform: translateX(50%);
        opacity: 0;
    }
     100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.web-app-development-hero-right img{
    width: 50%;
}
@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;
    }
    
}

@media (max-width:786px) {
    .web-app-development-hero-explore {
        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-top: 70px;
    padding-bottom: 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/v1757940610/assets/mobile-app-development/Custom_Mobile_App.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/v1757940610/assets/mobile-app-development/iOS_App.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/v1757940610/assets/mobile-app-development/Android.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/v1757940610/assets/mobile-app-development/cross_platform.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/v1757940610/assets/mobile-app-development/App_UIUX\ Design.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/v1757940610/assets/mobile-app-development/App_Maintenance.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-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: 35px;
    min-height: 100%;
    background-color: #FFFFFF;
    border: 4px solid #E7E7E7;
    position: relative;
    overflow: hidden;
        transition: all 0.3s ease;
        text-align: center;

}
.craitrix-industries-box-p{
    opacity: 0;
    transition: opacity 0.6s ease;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      padding-inline: 10px;
      transform: translate(-50%,-50%);

}
.craitrix-industries-box::before{
    position: absolute;
  content: "";
  width: 150%;
  height: 350px;
  background-color: #0072FF;
  transform: rotate(45deg);
  right: -100%;
  top:-200%;
transition: all 0.6s ease;

}
.craitrix-industries-box:hover::before{
  right: -35%;
  top: -35%;
    z-index: 0;
}
.craitrix-industries-box:hover .craitrix-industries-box-p{
    opacity: 1;
    z-index: 100;
    color: white;
  
}
.craitrix-industries-box img{
    width: 40px;
    margin-bottom: 20px;
}

@media (max-width:786px) {
    .craitrix-industries-boxs{
        padding-inline: 20px;
    }
    .craitrix-industries-box{
        padding: 10px;
    }
    .craitrix-industries h2{
        padding-inline: 20px;
        text-align: left;
    }
    .craitrix-industries-box::before{
        height: 300px;
    }
    .craitrix-industries-box:hover::before {
        top: -90%;
         right: -20%;
  top: -50%;
    }
    .craitrix-industries-box-p{
        font-size: 14px !important;
    }
}


/* --------------------------------- */
.craitrix-technology{
    margin-block: 50px;
    margin-inline: 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{
    padding-block: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.craitrix-technology-left h1{
    font-size: 40px !important;
    line-height: 1.5;
}


.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;
}
.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: 100%;
}
@media (max-width:986px) {
  .craitrix-technology-right {
    display: none;
  }
    .craitrix-technology{
        margin-inline: 20px;
    }
    .craitrix-technology-container {
        padding-inline: 20px;
    }
    .craitrix-technology-left h1
 {
    font-size: 24px !important;
 }
.craitrix-technology-left button{
    margin: 20px auto;
    width: 80%;
}
}




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

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



/* ------------------------------ */
/* -------- Layout & background -------- */
.centered-carousel h2{
       text-align: center;
    margin-bottom: 30px;
    background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent;
    transform: translateY(-70px);
    z-index: 100;
    position: relative;
}
.centered-carousel {
  --card-w: min(400px, calc(100% - 220px));   /* width of the center card */
  --card-h: clamp(300px, 38vh, 320px);
  --round: 22px;
  --peek-shift: clamp(180px, 34vw, 460px);    /* how far side cards sit off edges */
  --fade: 0.55;
  position: relative;
  padding: 120px 0 88px;
  overflow: hidden;
  isolation: isolate;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0d1b2a;
}
.centered-carousel::before{
    content: "";
    position: absolute;
    height: 200px;
    top: -100px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 2;
    border-radius: 30%;

}
.centered-carousel::after{
     content: "";
    position: absolute;
    height: 200px;
    bottom: -130px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 2;
    border-radius: 30%;
}
.cc-bg {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, #0ea5ff 0%, #0b6bff 45%, #0b4dff 70%, #0b4dff 100%);
  z-index: -2;
}
.cc-viewport {
  position: relative;
  width: min(1200px, 96%);
  margin: 0 auto;
  height: var(--card-h);
}

/* -------- Arrows -------- */
.cc-nav {
  position: absolute;
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: #fff; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  z-index: 6;
}
.cc-prev { right: 80px; }
.cc-next { right: 4px; }
.cc-nav:hover { filter: brightness(.95); }

/* -------- Stage & cards (absolute, class-positioned) -------- */
.cc-stage { position: relative; width: 100%; height: 100%; }

.cc-card {
  position: absolute; top: 50%; left: 50%;
  width: var(--card-w); height: var(--card-h);
  transform: translate(-50%, -50%) scale(.9);
  opacity: var(--fade);
  transition: transform .55s ease, opacity .45s ease, filter .45s ease;
  filter: blur(0px) saturate(.9);
  border-radius: var(--round);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  background: #fff;
  z-index: 1;
  will-change: transform, opacity;
}

/* Inner layout: text | image */
.cc-card-inner {
 
}
.cc-card img {
  width: 100%; height: 100%; object-fit: cover;
}
.cc-text { padding: 28px 28px 24px 32px; gap: 14px; align-content: start; }
.cc-text div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cc-text div div{
    display: flex;
    flex-direction: column;
}
.cc-text div img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}
.cc-text p{line-height: 1.4;font-size: 16px;}
.cc-text h4 { margin: 6px 0 0; font-size: 18px; }
.cc-text small { color: #456; }
.cc-quote { font-size: 44px; color: #f59e0b; line-height: 1; display: none;}

/* Active (center) */
.cc-card.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1; filter: none; z-index: 5;
}

/* Left & right neighbors (half outside) */
.cc-card.is-prev {
  transform: translate(calc(-45% - var(--peek-shift)), -50%) scale(.92);
  z-index: 3;
}
.cc-card.is-next {
  transform: translate(calc(-55% + var(--peek-shift)), -50%) scale(.92);
  z-index: 3;
}

/* Push the rest far offscreen */
.cc-card.is-before {
  transform: translate(calc(-50% - (var(--peek-shift) * 2.2)), -50%) scale(.88);
  opacity: 0; z-index: 0; pointer-events: none;
}
.cc-card.is-after {
  transform: translate(calc(-50% + (var(--peek-shift) * 2.2)), -50%) scale(.88);
  opacity: 0; z-index: 0; pointer-events: none;
}

/* Dots */
.cc-dots { text-align: center; margin-top: 18px; }
.cc-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.7); margin: 0 5px; cursor: pointer;
}
.cc-dots button.is-on { background: #111; }

/* Responsive: stack card content on narrow screens */
@media (max-width:786px) {
    .centered-carousel::before{
        height: 180px;
    }
    .cc-text small{
        font-size: 12px;
    }
    .cc-quote {
        font-size: 30px;
    }
}
@media (max-width: 720px) {
  .centered-carousel { --card-w: calc(100% - 60px); --peek-shift: clamp(120px, 38vw, 320px); padding: 30px;}
  .cc-card-inner { grid-template-columns: 1fr; }
  .cc-text { padding: 10px;gap: 0px; }
  .cc-text p{
    font-size: 13px !important;
  }

.centered-carousel h2{
    transform: translateY(0px);
}
  .cc-card{
    height: fit-content;
  }
  .cc-nav{
    bottom: -10px;
  }
  .centered-carousel::after{
    display: none;
  }
}


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

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


.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-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;
    }
}