*{
         font-family: 'Kameron', serif;
         }
         :root{
         --blue-color:#2E86C1;
         --green-color:#1DE26F;
         }
         
         .hero::before {
         content: "";
         position: absolute;
         inset: 0;
   

         z-index: 1;
         }
         .hero-content {
         z-index: 2;
         position: relative;
         }
         @keyframes scrollBG {
         0% {
         background-position: 0 center;
         }
         100% {
         background-position:200px center;
         }
         }
         .hero h1 {
         font-size: 3rem;
         /*animation: fadeInUp 1s ease-out forwards;*/
         /*opacity: 0;*/
         font-weight: bold;
         font-family: 'Kameron', serif;
         line-height: 1;
         }

 .hero-2 h1 {
         font-size: 3rem;
         /*animation: fadeInUp 1s ease-out forwards;*/
         /*opacity: 0;*/
         font-weight: bold;
         font-family: 'Kameron', serif;
         line-height: 1;
         }

h1 {
         font-size: 3rem;
         /*animation: fadeInUp 1s ease-out forwards;*/
         /*opacity: 0;*/
         font-weight: bold !important;
         font-family: 'Kameron', serif !important;
         color: white !important;
         line-height: 1;
         }
         
         
         h2{
         font-size: 2.2rem;
         animation: fadeInUp 1s ease-out forwards;
         opacity: 0;
         font-weight: bold !important;
         font-family: 'Kameron', serif !important;
         line-height: 1 !important;
         color: var(--blue-color) !important;
         }
         
         h3{
         font-size: 1.8rem;
         animation: fadeInUp 1s ease-out forwards;
         opacity: 0;
         font-weight: bold !important;
         font-family: 'Kameron', serif !important;
         line-height: 1 !important;
         color: var(--blue-color) !important;
         }
         
         
          h4{
         font-size: 0.5rem;
/*         animation: fadeInUp 1s ease-out forwards;*/
         
/*         font-weight: lighter; !important;*/
         font-family: 'Kameron', serif !important;
         line-height: 1 !important;
         color:black;
         color: var(--blue-color) !important;
         }
  h6{
 
         font-family: 'Kameron', serif !important;
         line-height: 1 !important;
         margin-bottom:7px;
        
         }
         .custom-btn{
         font-weight: bold !important;
         padding: 10px 20px !important;
         }
         .btn-lets-talk{
         font-size: 25px !important;
         background:white;
         color: var(--blue-color);
         }
         .btn-portfolio{
         font-size: 25px !important;
         background:var(--green-color);
         color: white;
         }
         .hero p {
         font-size: 1.25rem;
         animation: fadeInUp 1s 0.5s ease-out forwards;
         opacity: 0;
         }
         .btn {
         margin-top: 20px;
         animation: fadeInUp 1s 1s ease-out forwards;
         opacity: 0;
         }
         @keyframes fadeInUp {
         from {
         opacity: 0;
         transform: translateY(30px);
         }
         to {
         opacity: 1;
         transform: translateY(0);
         }
         }
         .img-1 ,.img-2 ,.img-3 , .img-4 {
         margin: 10px;
         /*background-color: rgba(255, 255, 255, 0.5);*/
         background: white;
         border-radius: 20px;
         }
         .img-1{
         height: 200px;
         width: 200px;
         margin-top: 30px;
         margin-left: 80px;
         animation: bounceLR 8s ease-in-out infinite alternate;
         }
         .img-1 img{
         height: 100%;
         width: 100%;
         border-radius: 20px;
         }
         .img-2{
         height: 200px;
         width:300px;
         animation: floaty 8s ease-in-out infinite;
         }
         .img-2 img{
         height: 100%;
         width: 100%;
         border-radius: 20px;
         }
         .img-3{
         height:250px;
         width:200px;
         margin-left: 80px;
         animation: floaty 8s ease-in-out infinite;
         }
         .img-3 img{
         height: 100%;
         width: 100%;
         border-radius: 20px;
         }
         .img-4{
         height:200px;
         width:250px;
         margin-left: 40px;
         animation: bounceLR 8s ease-in-out infinite alternate;
         }
         .img-4{
         height: 100%;
         width: 100%;
         border-radius: 20px;
         }
         .custom-badge{
         z-index:1000;
         height: 150px;
         width: 150px;
         top:25%;
         bottom: 20%;
         position: absolute;

         animation: swoosh 10s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
         }
         .custom-badge img{
         height: 150px;
         width: 150px;
         }
         .para{
         font-size: 1.25rem;
         /*animation: fadeInUp 1s 0.5s ease-out forwards;*/
         /*opacity: 0;*/
         color: black;
         line-height: 1.2;
         }
         
         
          .para-2{
         font-size: 1rem;
         /*animation: fadeInUp 1s 0.5s ease-out forwards;*/
         /*opacity: 0;*/
         color: #000;
         line-height: 1.2;
         }
         .blog-img{
         height: 400px;
         width: 100%;
         /*animation: floaty 8s ease-in-out infinite;*/

         }
         .blog-img img{
         border-radius: 15px;
         height:100%;
         width: 100%;
         }



.hero {
         height:250px;
         /*padding:50px 0 50px 0 !important; */
          /* Replace with your image path */
         background-size: cover;
         width: 100%;
         background-repeat:  repeat-x;
         background-position:  center;
         /*animation: scrollBG 10s ease-in-out infinite alternate;*/
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         color: white;
         position: relative;
         }


.hero-2 {
  /*background:url('https://images.pexels.com/photos/1181216/pexels-photo-1181216.jpeg');*/
    
    
    
    
    /* 🔹 replace with your image path */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
  width: 100%;
  
  padding:30px 30px ;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

/* 🔹 Overlay */
.hero-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  opacity:0.8;
  width: 100%;
  height: 100%;
  background: var(--blue-color); /* dark overlay for readability */
  z-index: 1;
}

/* 🔹 Text above overlay */
.hero-2 > * {
  position: relative;
  z-index: 2;
}

.bg-blue{
    
   background: var(--blue-color) !important;
}

.text-blue{
    
    color: var(--blue-color) !important;
}



 .counter-container {
         background-color:white;
         padding: 0px 0;
         color: white;
         text-align: center;
         height: 350px;
         z-index: 100;
         }
         .counter-section {
         background-color:var(--blue-color);
         padding: 0px 0;
         color: white;
         text-align: center;
         height: 200px;
         z-index: 100;
         }
         .results-heading {
         font-size: 36px;
         font-weight: 600;
         }
         .stat-card {
         border: 2px solid var(--blue-color);
         background-color: white;
         border-radius: 20px;
         padding: 30px 15px;
         height: 100%;
         transition: all 0.6s ease-in;
         cursor: pointer;
         z-index: 100;
         top: 20%;
         position: relative;
         background: white;
         color: black;
         overflow: hidden;
         }
         .stat-card:hover {
         background: #fff;
         color: white;
         }
         .stat-card-2 {
         border: 2px solid var(--blue-color);
         background-color: white;
         border-radius: 20px;
         padding: 5px;
         height: 100%;
         transition: all 0.6s ease-in;
         cursor: pointer;
         width: 100%;
         background: url('../images/background/bg-4.jpg')   ;
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;
         object-fit: contain;
         color: black;
         }
         .stat-card-2 .stat-icon {
         width: 40px;
         height: 40px;
         margin: 0 auto 15px;
         }
         .stat-card-2 .stat-number {
         font-size: 25px;
         font-weight: 700;
         margin-bottom: 10px;
         }
         .stat-card-2 .stat-text {
         font-size: 16px;
         font-weight: 500;
         text-transform: uppercase;
         }



         .stat-card::before {
         content: "";
         position: absolute;
         inset: 0;
         background: url('../images/background/bg-1.jpg') no-repeat center bottom  ;
         background-size: cover;
         transform: translateY(100%);
         transition: transform 0.5s ease;
         z-index: 0;
         }
         .stat-card:hover::before {
         transform: translateY(0);
         }
         .stat-card > * {
         position: relative;
         z-index: 1;
         transition: color 0.5s ease;
         }
         .stat-card:hover {
         color: white;
         }
         .stat-icon {
         width: 60px;
         height: 60px;
         margin: 0 auto 15px;
         }
         .stat-number {
         font-size: 36px;
         font-weight: 700;
         margin-bottom: 10px;
         }
         .stat-text {
         font-size: 16px;
         font-weight: 500;
         text-transform: uppercase;
         }
         /* Card with blue background by default */
         .highlight-card {
         background-color: #0077b6;
         color: white;
         }




























         
.makeover-section {
            background-color: var(--blue-color);
            color: white;
            padding: 50px 0;
            text-align: center;
            position: relative;
        }
        
        .makeover-heading {
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .makeover-subtext {
            font-size: 16px;
            margin-bottom: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .step-card {
         border-radius: 12px;
            background-color: white;
            padding: 8px 5px;
            height: 100%;
            position: relative;
            margin-top: 30px;
        }
        
        .step-icon {
            width: 55px;
            height: 55px;
            background-color: var(--green-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -35px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .step-title {
            margin-top: 25px;
            color: black;
            font-weight: 600;
            text-transform: uppercase;
            /*font-size: 16px;*/
        }
        
        .cta-button {
            background-color:var(--green-color);
            color: white;
            font-weight: 600;
            padding: 10px 30px;
            border-radius: 25px;
            border: none;
            margin-top: 40px;
            font-size: 16px;
        }
        
        .cta-button:hover {
            background-color: black;
             color: white;
        }
        
        .feedback-tab {
            position: fixed;
            right: -35px;
            top: 50%;
            transform: rotate(-90deg);
            background-color: #00a3e0;
            color: white;
            padding: 8px 15px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 14px;
        }


.cta-section{

  
height: 100%;
border-radius: 20px;
   background: var(--blue-color)  ;

}

.cta-btn-1{
         font-size: 25px !important;
background: #000046;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



         color:white !important;
         }
         
         
         
         
         
         
         .cta-btn-2{
         font-size: 25px !important;
background: #fff;  

         color: black !important;
         }


 
        .connect-button {
            position: fixed;
            right: 0;
            top: 50%;
            transform: rotate(90deg) translateY(-100%);
            transform-origin: right top;
            background-color: #0099ff;
            color: white;
            border: none;
            padding: 10px 15px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 14px;
            z-index: 1000;
        }
        
        

         @media(max-width:768px){
         .hero h1 {
         font-size:2rem;
         animation: fadeInUp 1s ease-out forwards;
         /*opacity: 0;*/
         font-weight: bold;
         font-family: 'Kameron', serif;
         line-height: 1;
         c
         }
.hero {
         height:280px;
         
         }
         h1 {
         font-size:2rem;
         animation: fadeInUp 1s ease-out forwards;
         /*opacity: 0;*/
         font-weight: bold;
         font-family: 'Kameron', serif;
         line-height: 1;
         c
         }
         .custom-btn{
         font-weight: bold !important;
         padding: 6px 12px !important;
         }
         .btn-lets-talk{
         font-size: 16px !important;
         background:white;
         color: var(--blue-color);
         }
         .btn-portfolio{
         font-size: 16px !important;
         background:var(--green-color);
         color: white;
         }
      
         .blog-img{
         height: 300px;
         width: 100%;
         }
         .blog-img img{
         border-radius: 15px;
         height:100%;
         width: 100%;
         }
         h3{
         font-size: 1.5rem !important;
         animation: fadeInUp 1s ease-out forwards;
         opacity: 0;
         font-weight: bold !important;
         font-family: 'Kameron', serif !important;
         line-height:1 !important;
         color: var(--blue-color) !important;
         }
         .para{
         font-size: 0.9rem;
         /*animation: fadeInUp 1s 0.5s ease-out forwards;*/
         /*opacity: 0;*/
         color: black;
         line-height: 1.2;
         }
         }
         /* Animation Continue    */
         @keyframes bounceLR {
         0% {
         left: 0;
         transform: translateY(0);
         }
         50% {
         transform: translateY(-30px);
         }
         100% {
         left: 6px;
         transform: translateY(0);
         }
         }
         @keyframes floaty {
         0%   { transform: translate(0, 0); }
         25%  { transform: translate(10px, -10px); }
         50%  { transform: translate(0, -20px); }
         75%  { transform: translate(-10px, -10px); }
         100% { transform: translate(0, 0); }
         }
         .floater {
         animation: floaty 6s ease-in-out infinite;
         }
         @keyframes swoosh {
         0%   { transform: translate(0, 0) rotate(0); }
         50%  { transform: translate(200px, -50px) rotate(20deg); }
         100% { transform: translate(0, 0) rotate(0); }
         }
         .swoosher {
         animation: swoosh 3s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
         }
         
         /*Developement page */



.dev-card {
      position: relative;
/*      max-width: 300px;*/

      padding: 20px;
      border-radius: 10px;
      margin-bottom: 20px;
      background: #fff;
      z-index: 1;
      border:3px solid #000;
box-shadow: 5px 5px 0px  black;
      transition: box-shadow 0.2s ease;
      overflow: hidden;
/*      animation: borderRun 1s infinite;*/
    }

    .dev-card:hover {
      box-shadow: 5px 5px 0px var(--green-color);
        border:3px solid var(--green-color);
    } 

    .dev-card::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
/*      background: linear-gradient(90deg, #1DE26F, #fff, #1DE26F, #fff, #1DE26F, #fff, #1DE26F);*/
      z-index: -1;
/*      background-size: 400% 400%;*/

      border-radius: 12px;
    }

    .dev-card::after {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      right: 4px;
      bottom: 4px;
      background: #fff;
      border-radius: 8px;
      z-index: -1;
    }

    @keyframes borderRun {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .dev-card h5 {
      font-weight: bold;
    }

    .dev-card p {
      font-size: 17px;
      color: #000;
      line-height: 1.2;
    }
.dev-card h4 {

margin-bottom: 10px ;
}



.hover-card-container .col-md-4 {

margin-bottom: 20px;


}
.hover-card {
      position: relative;


      padding: 20px;
      border-radius: 10px;
      background: #fff;
      z-index: 1;
       height: 250px !important;
      border: 1px solid #ddd;
/*      box-shadow: 5px 5px 10px #000;*/
      transition: box-shadow 0.5s ease;
      overflow: hidden;

    }

 /*   .hover-card:hover {
      box-shadow: 5px 5px 10px yellow;
    }*/

    .hover-card::before {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: linear-gradient(90deg, #1DE26F, #fff, #1DE26F, #fff, #1DE26F, #fff, #1DE26F);
      z-index: -1;
      background-size: 400% 400%;

      animation: borderRun 6s linear infinite;
      border-radius: 12px;
    }

    .hover-card::after {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      right: 4px;
      bottom: 4px;
      background: #fff;
      border-radius: 8px;
      z-index: -1;
    }

    @keyframes borderRun {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .hover-card h4 {
      font-weight: bold;
      color: black !important;
    }

    .hover-card p {
        margin-top: 10PX;
      font-size: 16px;
      line-height: 1;
      color: #000;
    }

 /* app Section */
   .app-section {
   /*    background-color: var(--blue-color);*/
   }
   .app-section .col-lg-4 , .col-md-6 .col-12 {
   margin-bottom: 20px;
   }
   .app-section .col-lg-4,
.app-section .col-md-6,
.app-section .col-12 {
    margin-bottom: 20px;
}
   .app-card {
   background-color: white;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 15px 15px rgba(0,0,0,0.05);
   transition: all 0.3s;
   height: 100%;
   border: 1px solid var(--blue-color);
   position: relative;
   z-index: 1;
   overflow: hidden;
   }
   .app-card-2 {
   background-color: white;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 15px 15px rgba(0,0,0,0.05);
   transition: all 0.3s;
max-height:450px;
   border: 1px solid var(--blue-color);
 
   overflow: hidden;
   }
   .app-card-2 .para {
       color:#000 !important;
       font-size:1.20rem;
       
       
   }
   
  
   
 
   .scrollable-desc {
    max-height: 100px !important;
    overflow-y: auto !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
 
    text-align: left;
    width: 100%;

}
.scrollable-desc::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
   .app-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 0;
   background-color: #f8f9fa;
   z-index: -1;
   transition: all 0.3s ease;
   }
   /*.app-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
   border-color: #0d6efd;
   }
   .app-card:hover::before {
   height: 100%;
   }
   */
   .app-icon-2 {
   width:100px;
   height:100px;
   background-color: #e8f3ff;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   color: #0d6efd;
   font-size: 28px;
   text-align: center;
   transition: all 0.3s;
   }
   /*.app-card:hover .app-icon-2 {
   background-color: #0d6efd;
   color: white;
   transform: rotateY(360deg);
   }*/
   .app-card h3 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 15px;
   color: #000 !important;
   text-align: center;
   }
   .app-card p {
   color: #000;
   margin-bottom: 20px;
   font-size: 15px;
   line-height: 1.2;
   }
   .app-link {
   color: #0d6efd;
   font-weight: 500;
   display: inline-block;
   text-align: center;
   }
   .app-link i {
   margin-left: 5px;
   transition: all 0.3s;
   }
   /*
   .app-link:hover i {
   margin-left: 10px;
   }*/


/*erp software company */

/**common /

     
     
    /* Other Section */
   .other-section {
   /*    background-color: var(--blue-color);*/
   }
   .other-section .col-md-3 {
   margin-bottom: 30px;
   }
   .other-section .col-md-6 {
   margin-bottom: 20px;
   }
   .other-card {
   background-color: white;
   border-radius: 10px;
   padding: 30px;
   box-shadow: 0 15px 15px rgba(0,0,0,0.05);
   transition: all 0.3s;
   height: 100%;
   border: 1px solid var(--blue-color);
   position: relative;
   z-index: 1;
   overflow: hidden;
   }
   .other-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 0;
   background-color: #f8f9fa;
   z-index: -1;
   transition: all 0.3s ease;
   }
   /*.other-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
   border-color: #0d6efd;
   }
   .other-card:hover::before {
   height: 100%;
   }
   */
   .other-icon {
   width: 70px;ten
   height: 70px;
   background-color: #e8f3ff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   color: #0d6efd;
   font-size: 28px;
   text-align: center;
   transition: all 0.3s;
   }
   /*.other-card:hover .other-icon {
   background-color: #0d6efd;
   color: white;
   transform: rotateY(360deg);
   }*/
   .other-card h3 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 15px;
   color: #333;
   text-align: center;
   }
   .other-card p {
   color: #000;
   margin-bottom: 20px;
   font-size: 15px;
   }
   .other-link {
   color: #0d6efd;
   font-weight: 500;
   display: inline-block;
   text-align: center;
   }
   .other-link i {
   margin-left: 5px;
   transition: all 0.3s;
   }
   /*
   .other-link:hover i {
   margin-left: 10px;
   }*/
   
   
        .benefit-card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
            position: relative;
            transition: all 0.3s ease;
            height:100%;
            max-height: 300px;
            margin: 0 auto;
        }

        .benefit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-number {
            position: absolute;
            top: -15px;
            right: 20px;
            background: var(--green-color);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
        }

        .icon-container {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            border: 2px solid #e9d5ff;
        }


 .icon-container-2 {
            width: 60px;
            height: 60px;
            background: var(--blue-color);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            border: 2px solid #000;
        }
 .icon-container-2 img {
            
            height: 40px;
            
        }

        .benefit-icon {
            font-size: 2rem;
            color: #8b5cf6;
        }

        .benefit-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        .benefit-description {
            color: #6b7280;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 0;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .benefit-card {
                padding: 1.5rem;
                margin: 1rem;
                max-width: none;
            }
            
            .card-number {
                width: 50px;
                height: 50px;
                font-size: 1rem;
                top: -12px;
                right: 15px;
            }
            
            .icon-container {
                width: 70px;
                height: 70px;
            }
            
            .service-icon {
                font-size: 1.7rem;
            }
            
            .benefit-title {
                font-size: 1.3rem;
            }
          
        }

        @media (max-width: 480px) {
            .benefit-card {
                padding: 1.25rem;
                border-radius: 15px;
            }
            
            .benefit-title {
                font-size: 1.2rem;
            }
            
            .benefit-description {
                font-size: 0.9rem;
            }
        }

  

        

        /* Container for multiple cards if needed */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        } 
      
      
      #user-gd {
   position: relative;
   height:500px;
   overflow-y: auto;
   scroll-behavior: smooth;
   padding-top: 1rem;
   }
   .sidebar {
   position: sticky;
   top: 0;
   height: auto;
   overflow-y: auto;
   border-right: 1px solid #eaeaea;
   background-color: #f8f9fa;
   padding-top: 1rem;
   }
   .sidebar .nav-link {
   color: #333;
   font-weight: bold;
   border-left: 3px solid transparent;
   transition: all 0.3s ease;
  font-size:18px;
   }
   .sidebar .nav-link.active {
     background: var(--blue-color)!important;
   border-left: 3px solid #007bff;
   color: #fff !important;
   }
   .content-section {
   padding: 1rem 1rem;
   height: auto;
   }
       .accordion-container    {
        
       height:100vh;
        
        
        
        
        
    }
       .accordion-container .feature-description  {
        
        text-align:left !important;
        
        
        
        
        
    }
    
      .accordion-container .feature-title  {
        
        text-align:left !important;
        
        
        
        
        
    }
    
    .service-guide img{
        
        width:100% !important;
        
    }
    .accordion-container {
 
      margin: 50px auto;
      /*box-shadow: 0 5px 15px rgba(0,0,0,0.1);*/
      border-radius: 10px;
      overflow: hidden;
    }
    
    .accordion-header {
     background: #00B4DB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      color: white;
      padding: 20px;
      text-align: center;
      font-weight: 600;
      font-size: 1.5rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    
    .card {
      border: none;
      border-radius: 0;
      margin-bottom: 0;
      border-bottom: 1px solid rgba(0,0,0,0.125);
    }
    
    .card:last-child {
      border-bottom: none;
    }
    
    .card-header {
      padding: 0;
      background-color: #fff;
      border-bottom: none;
    }
    
    .btn-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 18px 25px;
      text-align: left;
      color: #212529;
      font-weight: 600;
      text-decoration: none !important;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .btn-link:hover {
      background-color: #f8f9fa;
      color: #2575fc;
    }
    
    .btn-link .arrow {
      transition: transform 0.3s ease;
    }
    
    .btn-link.collapsed .arrow {
      transform: rotate(-90deg);
    }
    
    .card-body {
      padding: 20px 25px;
      line-height: 1.6;
      color: #495057;
      background-color: #f8f9fa;
      border-top: 1px solid rgba(0,0,0,0.125);
    }
    
    .card-feature {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .feature-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #00B4DB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      color: white;
      border-radius: 50%;
      margin-right: 15px;
      flex-shrink: 0;
    }
    
    .feature-content {
      flex-grow: 1;
    }
    
    .feature-title {
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .feature-description {
      color: #000;
      font-size: 1.2rem;
    }
    
    @media (max-width: 576px) {
      .accordion-header {
        padding: 15px;
        font-size: 1.2rem;
      }
      
      .btn-link {
        padding: 15px 20px;
        font-size: 1rem;
      }
      
      .card-body {
        padding: 15px 20px;
      }
      
      .feature-icon {
        width: 35px;
        height: 35px;
      }
    }


 .ten-reasons .para {
       color:#000 !important;
       font-size:1.20rem !important;
       
       
   }
   
   
    
      .hero-container {
           
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .left-section, .right-section {
           background: var(--blue-color)  ;

            backdrop-filter: blur(5px);
            padding: 40px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-height: 600px; /* Equal height base */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .experience-title {
  
            font-weight: bold;
            color: #fff !important;
 
        
        }
        .spec-list {
            list-style-type: none;
            padding-left: 0;
        }
        .spec-list li {
            margin-bottom: 20px;
            position: relative;
            padding-left: 30px;
            font-size: 1.1rem;
            color:#fff;
        }
        .spec-list li::before {
            content: '★'; /* Star icon */
            position: absolute;
            left: 0;
            color: #fff;
            font-size: 1.5rem;
        }
        @media (max-width: 768px) {
            .left-section, .right-section {
                padding: 20px;
            }
             
            .spec-list li {
                font-size: 1rem;
            }
        }
        
        
         .service-card-3 {
                border: 1px solid var(--blue-color);
             margin-bottom:20px;
         /*border: 1px solid #ddd;*/
         border-radius: 12px;
         overflow: hidden;
         /*background: #FAF9F6 !important;*/
         transition: transform 0.3s, box-shadow 0.3s;
         }
               .service-card-3  img{
            margin:auto;
            align-items:center;
         }
                 .service-card-3  h4{
  font-weight:bold;
  text-align:center;
         }
         .service-card-3:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 20px rgba(0,0,0,0.1);
         }
         .service-card-body-3 {
         padding: 0.5rem;

         }
         
         .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon img {
  height: 50px;
  width: auto; /* Maintains aspect ratio */
}
         
       .service-card-3 h3 {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 15px;
   color: #333;
   text-align: center;
   }  
   
   
   
   
   
     .service-guide img {
    display: block;
    width: 100%;
    max-width: 500px;     /* ✅ limit image width */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    margin: 0 auto;
  }

  /* Medium devices */
  @media (max-width: 768px) {
    .service-guide  img {
      max-width: 400px;
    }
    
    .app-card-2{
             
 height:200px;
         }
  }

  /* Small devices */
  @media (max-width: 480px) {
  .service-guide  img {
      max-width: 300px;
      border-radius: 6px;
    }
    
    .app-card-2{
             
 height:200px;
         }
  }

  /* Very small screens */
  @media (max-width: 360px) {
     .service-guide img {
      max-width: 250px;
    }
    .app-card-2{
             
 height:150px;
         }
  }
        
        
        
        
        /*District Pages */
        
        
        
        
        .feature-card {
  background: linear-gradient(135deg, #00c853, #00b4db);
  border-radius: 10px;
  min-height: 250px;
  position: relative;
  padding:30px;
}
.feature-card p{
    
    text-align:left !important;
    
}
.feature-card .feature-number {
  position: absolute;
  bottom: 30px;
  right: 15px;
  font-size: 6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
}
       
       
       
/*       .floating-img {*/
/* position:relative !important;*/
/* z-index:1000 !important;*/
/*  animation: float 3s ease-in-out infinite !important;*/
/*}*/

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}  
.icon-list {
  list-style: none;           /* remove default bullets */
  padding: 0;
  margin: 0;
}
.icon-list p {
  text-align:left;
  font-weight:bold !important;
}
.icon-list li {
  position: relative;
  padding-left: 35px;         /* space for icon */
  margin-bottom: 10px;
  line-height: 1.5;
  background: url('../images/icons/arrow.png') no-repeat left center;
  background-size: 20px 20px; /* icon size */
}


.animated-text {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
 
  /* fallback solid color */
  color: #ff6ec4;

  /* gradient background */
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #4ade80, #facc15);
  background-size: 800% 800%;

  /* WebKit browsers (Chrome, Safari, Edge Chromium) */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Firefox (use mask for gradient text) */
  background-clip: text; /* standard */
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  animation: gradientMove 5s ease infinite !important;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}










 
     
         .app-card-2{
             
 height:150px;
         }
         p{
         text-align:justify;
         }
         .dual-slider-container{
         background-image: url('../images/background/n-white-bg.jpg');  
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover; 
         background-color: #000;   
         }
         /* Hero Section */
         .hero-section {
         position: relative; /* Use relative for positioning child elements */
         z-index: 100;
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain ; /* Ensure image covers the area */
         height: 400px;
         width: 100%;
         overflow: hidden;
         }
         .hero-title {
         font-size: 42px;
         font-weight: 700;
         line-height: 1.2;
         margin-bottom: 40px;
         }
         .expertise {
         color: #ff9933;
         text-decoration: underline;
         text-underline-offset: 8px;
         text-decoration-thickness: 3px;
         }
         /* Developer Section */
         .developer-section {
         padding: 0 0 60px;
         position: relative;
         }
         .delivery-heading {
         font-size: 36px;
         /*         font-weight: 600;*/
         line-height: 1.3;
         }
         .developer-image {
         max-width: 100%;
         border-radius: 6px;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
         /* App Development Services Carousel */ 
         .app-carousel-section {
         overflow: hidden;
         margin-top: -80px;  
         position: relative;
         z-index: 200; 
         }
         .service-card-2 {
         background-color: rgba(30, 30, 35, 0.8);
         border-left: 3px solid;
         padding: 30px;
         height: 100%;
         min-height: 250px;
         margin: 10px;
         transition: transform 0.3s ease;
         }
         .service-card-2:hover {
         transform: translateY(-5px);
         }
         .service-card-2 h3 {
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 20px;
         color: #fff !important;
         }
         .service-card-2 p {
         font-size: 14px;
         line-height: 1.6;
         color: #ccc;
         margin-bottom: 0;
         }
         /* Custom navigation */
         .custom-nav-container {
         display: flex;
         align-items: center;
         margin-top: 30px;
         }
         .custom-nav-button {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background: transparent;
         border: 1px solid #666;
         color: #fff;
         font-size: 18px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         margin-right: 10px;
         }
         .custom-nav-button:hover {
         border-color: #fff;
         background-color: rgba(255, 255, 255, 0.1);
         }
         /* Custom Owl Carousel settings */
         .owl-carousel .owl-stage-outer {
         overflow: visible;
         }
         .owl-carousel .owl-item {
         opacity: 1;
         transition: opacity 0.3s ease;
         }
         .service-carousel .owl-item .first-active .item {
         background-color: #007bff; /* Blue background */
         color: #fff; /* Optional: white text */
         transition: all 0.3s ease;
         border-radius: 8px; /* Optional */
         }
         @media (max-width:768px){
         .hero-section {
         position: relative; /* Use relative for positioning child elements */
         z-index: 100;
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain ; /* Ensure image covers the area */
         height: 300px;
         width: 100%;
         overflow: hidden;
         }
         .developer-section{
         padding: 0;
         }
         }
         #scrollBox {
         width: 100%;
         max-height: 500px;
         overflow: auto; /* Enable scrolling */
         overflow-y: scroll; /* Enable scrolling */
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* Internet Explorer 10+ */
         background: #fff;
         font-size: 16px;
         color: black;
         }
         #scrollBox::-webkit-scrollbar {
         display: none; /* Chrome, Safari */
         }
         .portfolio-section {
         padding: 50px 0;
         background-color: #f8f9fa;
         }
         .section-header {
         margin-bottom: 40px;
         }
         .section-header h2 {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 10px;
         }
         .section-header .highlight {
         color: #1a73e8;
         }
         .portfolio-item {
         background-color: #fff;
         border-radius: 10px;
         overflow: hidden;
         margin: 10px;
         position: relative;
         box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
         }
         .portfolio-content {
         padding: 25px;
         }
         .portfolio-content h3 {
         font-size: 1.8rem;
         font-weight: 600;
         margin-bottom: 15px;
         }
         .portfolio-content p {
         color: #555;
         margin-bottom: 20px;
         }
         .portfolio-image {
         position: relative;
         overflow: hidden;
         }
         .portfolio-image img {
         max-width: 100%;
         transition: transform 0.3s ease;
         }
         .tech-badges {
         margin-top: 20px;
         }
         .tech-image{
         width: 60px;
         height: 60px;
         }
         .tech-badge {
         display: inline-block;
         padding: 5px 15px;
         margin-right: 8px;
         background-color: transparent;
         color: #fff;
         border-radius: 4px;
         font-size: 0.85rem;
         }
         .client-logo {
         width: 100%;
         height: 60px;
         margin-bottom: 15px;
         align-items: left;
         object-fit: contain;
         }
         .tech-img {
         width: 60px;
         height: 60px;
         object-fit: contain;
         }
         .nav-btn {
         width: 44px;
         height: 44px;
         background-color: var(--blue-color);
         border:2px solid #fff;
         border-radius: 4px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
      
         cursor: pointer;
         transition: all 0.3s ease;
         margin: 0 5px;
         }
         .nav-btn:hover {
         background-color: var(--green-color);
         }
         .nav-container {
         display: flex;
         justify-content: flex-end;
         margin-top: 15px;
         }
         .work-link {
         display: inline-flex;
         align-items: center;
         color: #fff;
         text-decoration: none;
         font-weight: bold !important;
         margin-top: 15px;
         font-size:20px;
         background: #00F260;  /* fallback for old browsers */
         background: -webkit-linear-gradient(to right, #0575E6, #00F260);  /* Chrome 10-25, Safari 5.1-6 */
         background: linear-gradient(to right, #0575E6, #00F260); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
         }
         .work-link:hover {
         text-decoration: none;
         }
         .work-link svg {
         margin-left: 5px;
         }
         @media(max-width:768px){
         .tech-img {
         width: 40px;
         height: 40px;
         object-fit: contain;
         }
         }
         /* Other Section */
         .other-section {
         /*    background-color: var(--blue-color);*/
         }
         .other-section .col-md-4 {
         margin-bottom: 20px;
         }
         .other-section .col-md-6 {
         margin-bottom: 20px;
         }
         .other-card-n{
         background-color: white;
         border-radius: 10px;
         padding:20px;
         box-shadow: 0 15px 15px rgba(0,0,0,0.05);
         transition: all 0.3s;
         height: 100%;
         border: 1px solid var(--blue-color);
         position: relative;
         z-index: 1;
         overflow: hidden;
         }
         .other-card-n::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 0;
         background-color: #f8f9fa;
         z-index: -1;
         transition: all 0.3s ease;
         }
         /*.other-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         border-color: #0d6efd;
         }
         .other-card:hover::before {
         height: 100%;
         }
         */
         .other-card-n  a{
         font-size:20px;
         font-weight:bold !important;
         }
         .other-icon-n {
         width: 70px;
         height: 70px;
         background: #2980B9;  
         background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);   
         background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  
         border-radius: 20%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 20px;
         color: #0d6efd;
         font-size: 28px;
         text-align: center;
         transition: all 0.3s;
         }
         .other-icon-n img {
         width: 50px !important ;
         height: 50px !important;
         }
         .other-card-n h3 {
         font-size: 22px;
         font-weight: 600;
         margin-bottom: 15px;
         color: #333;
         text-align: center;
         }
         .other-card-n p {
         color: #000;
         margin-bottom: 20px;
         font-size: 15px;
         }
         .other-card-n .other-link {
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         font-weight: 600;
         font-size: 16px;
         gap: 6px; /* space between text and icon */
         }
         .other-card-n .other-link::after {
         font-family: "Font Awesome 6 Free"; /* Font Awesome family */
         font-weight: 900; /* for solid icons */
         content: "\f061"; /* Unicode for fa-arrow-right */
         display: inline-block;
         transform: rotate(-45deg);
         transition: transform 0.3s ease;
         }
         .other-card-n .other-link:hover::after {
         transform: rotate(0deg) translateX(3px); /* subtle hover effect */
         }
         /*
         .other-link:hover i {
         margin-left: 10px;
         }*/
         .app-section .col-md-4 {
         margin-bottom:30px; 
         }
         .process-container {
         padding: 40px 20px;
         }
         .process-row {
         margin-bottom: 30px;
         }
         .process-step {
         position: relative;
         margin: 10px;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .process-step:hover {
         transform: translateY(-5px);
         }
         .diamond {
         width: 120px;
         height: 120px;
         background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
         transform: rotate(45deg);
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 20px;
         margin-bottom:20px;
         box-shadow: 0 10px 30px rgba(30, 136, 229, 0.3);
         position: relative;
         overflow: hidden;
         }
         .diamond::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: #667db6;  /* fallback for old browsers */
         background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);  /* Chrome 10-25, Safari 5.1-6 */
         background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
         border-radius: 20px;
         }
         .diamond-content {
         transform: rotate(-45deg);
         text-align: center;
         color: white;
         z-index: 2;
         position: relative;
         }
         .step-number {
         font-size: 40px;
         color:#fff;
         font-weight: 300;
         opacity: 0.3;
         line-height: 1;
         margin-bottom: 5px;
         }
         .step-title {
         /*font-size: 12px !important;*/
                  font-family: 'Kameron', serif;
         font-weight: 600;
         line-height: 1.2;
         margin-bottom: 3px;
         color:#fff;
         }
         .step-subtitle {04px;
         font-weight: 400;
         opacity: 0.9;
         line-height: 1.1;
         }
         .connector {
         width: 60px;
         height: 2px;
         background: linear-gradient(90deg, #ccc 0%, #999 100%);
         position: relative;
         margin: 0 10px;
         }
         .connector::before {
         content: '';
         position: absolute;
         right: -8px;
         top: -6px;
         width: 0;
         height: 0;
         border-left: 10px solid #999;
         border-top: 7px solid transparent;
         border-bottom: 7px solid transparent;
         }
         /*.logo {*/
         /*position: absolute;*/
         /*bottom: 20px;*/
         /*left: 20px;*/
         /*font-size: 14px;*/
         /*color: #666;*/
         /*font-weight: 600;*/
         /*}*/
         .logo i {
         color: #1e88e5;
         margin-right: 5px;
         }
         @media (max-width: 768px) {
         .process-row {
         flex-direction: column;
         }
         .connector {
         transform: rotate(90deg);
         margin: 20px 0;
         }
         .diamond {
         width: 150px;
         height: 150px;
         }
         .step-number {
         font-size: 36px;
         }
         /*.step-title {*/
         /*font-size: 14px !important;*/
         /*}*/
         .step-subtitle {
         font-size: 12px;
         }
         }
         .floating-tree {
         position: fixed;
         right: 20px;
         top: 50%;
         transform: translateY(-50%);
         background: #4caf50;
         width: 80px;
         height: 120px;
         border-radius: 15px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: white;
         text-align: center;
         box-shadow: 0 5px 20px rgba(76, 175, 80, 0.3);
         z-index: 1000;
         cursor: pointer;
         transition: all 0.3s ease;
         }
         .floating-tree:hover {
         transform: translateY(-50%) scale(1.05);
         }
         .floating-tree i {
         font-size: 24px;
         margin-bottom: 5px;
         }
         .floating-tree small {
         font-size: 10px;
         line-height: 1.1;
         }
         .header-nav {
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(10px);
         border-bottom: 1px solid rgba(0,0,0,0.1);
         padding: 15px 0;
         margin-bottom: 40px;
         }
         .brand-logo {
         font-size: 20px;
         font-weight: 700;
         color: #1e88e5;
         }
         .nav-link {
         color: #333 !important;
         font-weight: 500;
         margin: 0 15px;
         transition: color 0.3s ease;
         }
         /*.nav-link:hover {*/
         /*    color: #1e88e5 !important;*/
         /*}*/
         .btn-quote {
         background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
         border: none;
         padding: 10px 25px;
         border-radius: 25px;
         color: white;
         font-weight: 600;
         transition: all 0.3s ease;
         }
         .btn-quote:hover {
         transform: translateY(-2px);
         box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
         }
         .yt-testimonial{
         object-fit:cover;
         width:100%;
         height:200px;
         }
         
         
         
  /* Medium devices */
  @media (max-width: 768px) {
   
    
    .app-card-2{
             
 height:200px;
         }
  }

  /* Small devices */
  @media (max-width: 480px) {
 
    
    .app-card-2{
             
 height:200px;
         }
  }

  /* Very small screens */
  @media (max-width: 360px) {
  
    .app-card-2{
             
 height:150px;
         }
  }
  
  
  .navis {
      
      height:50px;
      width:50px;
      
      
  }
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse; /* swaps visual order */
  gap: 8px;
  position: absolute;
  bottom: 10px;
   
}

.carousel-nav .navis {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.carousel-nav .navis:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

  
  .hero-content  h6{
      font-weight:bold !important;
      
      
      
  }
  
  
  .logo-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logo-container img {
    max-width: 250px;
    transition: transform 0.3s ease;
}

.logo-container img:hover {
    transform: scale(1.05);
}

.logo-container p {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
}
  
 .client-circle {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%;
  background: #000428;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #004e92, #000428);
  background: linear-gradient(to right, #004e92, #000428);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.inner-white {
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

.inner-white img {
  max-width: 60%;
  height: auto;
  margin: 10px;
  border-radius: 5px;
  transition: transform 0.4s ease;
  object-fit: contain;
}

/* Hover effect */
.client-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(37, 117, 252, 0.5);
  background: linear-gradient(135deg, #2575fc, #6a11cb);
}

.client-circle:hover .inner-white img {
  transform: scale(1.08);
}

/* ---------------------------- */
/* 🔹 Responsive Adjustments */
/* ---------------------------- */

/* Large Tablets (max-width: 992px) */
@media (max-width: 992px) {
  .client-circle {
    width: 120px;
    height: 120px;
  }
  .inner-white {
    width: 110px;
    height: 110px;
  }
  .inner-white img {
    max-width: 65%;
  }
}

/* Small Tablets / Landscape Phones (max-width: 768px) */
@media (max-width: 768px) {
  .client-circle {
    width: 100px;
    height: 100px;
  }
  .inner-white {
    width: 90px;
    height: 90px;
  }
  .inner-white img {
    max-width: 70%;
  }
}

/* Mobile Phones (max-width: 576px) */
@media (max-width: 576px) {
  .client-circle {
    width: 80px;
    height: 80px;
  }
  .inner-white {
    width: 70px;
    height: 70px;
  }
  .inner-white img {
    max-width: 75%;
  }
}
.letter-i {
  position: relative;
 
  font-weight: bold;
  display: inline-block;
}

.stem {
  position: relative;
  z-index: 1;
}

.dot {
  position: absolute;
  top:  -50px;           /* start above the stem */
  left:  -100px;

  width: 16px;
  height: 16px;
  background: #ff3d00;  /* dot color */
  border-radius: 50%;
  animation: dotBounce 2s ease forwards;
}

/* Bounce + wave animation */
@keyframes dotBounce {
  0% {
    top: -40px;
    left: -60px;
    transform: scale(0.5);
  }
  30% {
    left: -20px;
    top: -60px;
    transform: scale(1.2);
  }
  60% {
    top: -20px;
     left: -3px;
    transform: scale(1);
  }
  80% {
    top: -30px;
    transform: scale(0.9);
  }
  100% {
    top: -2px;    /* final position on top of stem */
    left: -3px;
    transform: scale(1);
  }
}


.counter-box {
           
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            margin: 10px;
        }
        .counter-number {
            font-size: 2.5rem;
            font-weight: bold;
        }
        .counter-label {
            margin-top:10px;
            font-size: 1.1rem;
            text-transform: capitalize;
        }