/* 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;
    font-size: 20px;
}
h1{
    font-size: 50px !important;
}
h2{
    font-size: 40px !important;
}
.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 p{
    margin-block: 20px;
}
.web-app-development-hero-left button{
    padding:13px;
    width: 30%;
    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{
   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: 100%;
}
@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: 45%;
        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: 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;
    }
    
}

@media (max-width:786px) {
    .web-app-development-business-right .d-flex{
        display: block !important;
    }
  
}
/* ---------------------------------------- */

/* ---------------------------------------- */
.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-p{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-bottom: 30px;
    font-size: 20px;
}
.web-app-development-services-box1{
    background: url("https://res.cloudinary.com/craitrix/image/upload/v1757942041/assets/ui-ux-development/user_research.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/v1757942041/assets/ui-ux-development/wireframing_prototype.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/v1757942041/assets/ui-ux-development/ui_design_visuals.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/v1757942041/assets/ui-ux-development/ux_stratagy.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/v1757942041/assets/ui-ux-development/usability_testing.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/v1757942041/assets/ui-ux-development/responsive_design.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;
    }
}
@media (max-width:786px) {
    .web-app-development-services-p {
        width: 90%;
        text-align: left;
    }
    
}


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



/* --------------------------------- */
.ui-ux-solutions{
    padding-block: 50px;
    position: relative;
}
.ui-ux-solutions h2{
    text-align: center;
      background:linear-gradient(to right , #0072FF, #0D47A1);
    background-clip: text;
    color: transparent;
}
.ui-ux-solutions-p{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-block: 20px;
}
.ui-ux-solutions-box{
 
    border: 0.5px solid #6B46FE66;
    padding: 20px;
    border-radius: 1.5rem 0px 1.5rem 0px;
    position: relative;
    background-color: white;
    min-height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.ui-ux-solutions-box::before{
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: #004499;
    border-radius: 2rem;
    bottom: 0;
    right: 0;
    transition: all 0.3s ease;
    z-index: -1;
}
.ui-ux-solutions-box:hover::before{
    bottom:-10px;
    right: -10px;
 
}
.ui-ux-solutions-box img{
    width: 100px;
}

@media (max-width:786px) {
    .ui-ux-solutions h2{
        text-align: left;
        padding-inline: 20px;
    }
    .ui-ux-solutions-p{
        width: 90%;
        text-align: left;
    }
}

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

/* ---------------------------------- */
  :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;
}
.craitrix-features-left-box-p{
    text-align: center;
   
}

  /* 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-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: 40px;
    position: relative;
}
.craitrix-industries-boxs::before{
    position: absolute;
    content: "";
    right: 0;
    left: 0;
    height: 250px;
    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 h5{
    font-size: 25px;
}
.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: 80px;
    margin-bottom: 20px;
}

@media (max-width:786px) {
    .craitrix-industries-boxs{
        padding-inline: 20px;
    }
    .craitrix-industries-box{
        padding: 10px;
    }
    .craitrix-industries-box-p{
        width: 90%;
        text-align: left;
    }
    .craitrix-industries h2{
        text-align: left;
        padding-inline: 20px;
        margin-bottom: 10px;
    }
}




/* ------------------------------- */
.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;
}
.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{
        padding-top: 0px;
        margin-inline: 20px;
    }
    .craitrix-why-container{
        margin-inline: 0px;
    }
    .craitrix-why h2{
        margin-bottom: 10px;
    }
    
}



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


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