.service-details__category {
    position: relative;
    display: block;
    background-color: unset !important;
    padding: 30px 30px 30px;
}


         .team-section {
             padding: 60px 0;
             background-color: #f8f8f8;
         }

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

         .section-header {
             text-align: center;
             margin-bottom: 50px;
         }

         .section-tagline {
             color: #130a4a;
             font-weight: 600;
             text-transform: uppercase;
             display: block;
             margin-bottom: 10px;
         }

         .section-header h2 {
             font-size: 32px;
             font-weight: 700;
             margin-bottom: 10px;
         }

         .section-line {
             width: 60px;
             height: 3px;
             background-color: #130a4a;
             margin: 0 auto;
             border-radius: 3px;
         }

         .team-cards {
             display: flex;
             gap: 30px;
             justify-content: center;
             flex-wrap: wrap;
         }

         .team-card {
             background-color: #fff;
             border-radius: 16px;
             padding: 30px 20px;
             text-align: center;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
             width: 300px;
             transition: transform 0.3s ease;
         }

         .team-card:hover {
             transform: translateY(-8px);
         }

         .team-card img {
             width: 100px;
             height: 100px;
             object-fit: cover;
             border-radius: 50%;
             margin-bottom: 20px;
             border: 4px solid #130a4a;
         }

         .team-card h3 {
             font-size: 20px;
             margin-bottom: 5px;
             font-weight: 600;
             color: #333;
         }

         .team-role {
             font-size: 14px;
             color: #777;
             font-weight: 500;
         }



         h2 {
             text-align: left;
             font-size: 36px;
             font-weight: 700;
             margin-bottom: 40px;
         }

         h2 span {
             color: #130a4a;
             /* Purple */
         }

         .process-container {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 50px 30px;
             position: relative;
         }

         /* .step {
             background: #fff;
             border-radius: 12px;
             padding: 20px;
             text-align: center;
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
             position: relative;
         } */
         .step {
             background: #fff;
             border-radius: 40px 0px 40px 0px !important;
             padding: 30px;
             text-align: center;
             /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
             /* box-shadow: rgb(116 16 78) 5px 6px 20px; */
            box-shadow: rgb(166 165 166) 6px 11px 4px;
             position: relative;
         }

         #step_2 {
             background: #fff;
             border-radius: 0px 40px 0px 40px !important;
                         box-shadow: rgb(166 165 166) 6px 11px 4px;

             padding: 30px;
             text-align: center;

             position: relative;
             margin: 10px;
         }

         .step-icon {
             width: 60px;
             height: 60px;
             border-radius: 50%;
             background: #130a4a;
             display: flex;
             align-items: center;
             justify-content: center;
             margin: 0 auto 15px;
             color: #fff;
             font-size: 28px;
         }

         .step p {
             font-weight: 600;
             font-size: 16px;
             margin: 0;
             color: #000;
         }

             .step1 p {
             font-weight: 600;
             font-size: 16px;
             margin: 0;
             color: #000;
         }

         .step::after {
             content: "➝";

             position: absolute;
             top: 50%;
             right: -25px;
             transform: translateY(-50%);
             font-size: 30px;
             color: #000;
         }

         .new_step::after {
             content: "↓";
             position: absolute;
             top: 100%;
             left: 50%;
             transform: translateX(-50%);
             font-size: 30px;
             color: #000;
         }


         .step:last-child::after {
             display: none;
         }

         .second-row .step::after {
             content: "←";
             left: -25px;
             right: auto;
             font-size: 30px;
         }

         .second_step::after {
             content: "⬅";
             position: absolute;
             top: 50%;
             right: -25px;
             transform: translateY(-50%);
             font-size: 20px;
             color: #000;
         }


         .first-row {
             grid-column: 1 / span 4;
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 30px;
         }

         .second-row {
             grid-column: 1 / span 4;
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 30px;
         }

         .step-drop {
             grid-column: 5 / span 1;
             margin-top: 40px;
         }

      .step{
            margin: 10px;
      }

         h2 {
             text-align: center;
             font-size: 36px;
             font-weight: 700;
             margin-bottom: 40px;
         }

         h2 span {
             color: #130a4a;
         }

         .process-container {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 40px;
             position: relative;
         }

         .step {
             background: #fff;
             border-radius: 12px;
             padding: 25px;
             text-align: center;

             position: relative;
         }

         .step-icon {
             width: 70px;
             height: 70px;
             border-radius: 50%;
             background: #130a4a;
             display: flex;
             align-items: center;
             justify-content: center;
             margin: -45px auto 15px;
             position: relative;
         }

         .step-icon i {
             font-size: 34px;
             color: white;
         }

         .step p {
             font-weight: 600;
             font-size: 16px;
             margin: 0;
         }

         /* Arrow connectors */
         .arrow {
             position: absolute;
             font-size: 28px;
             color: black;
         }

         .arrow.right {
             top: 50%;
             right: -25px;
             transform: translateY(-50%);
         }

         .arrow.down {
             bottom: -30px;
             left: 50%;
             transform: translateX(-50%) rotate(90deg);
         }

         .arrow.left {
             top: 50%;
             left: -25px;
             transform: translateY(-50%) rotate(180deg);
         }
/* Base layout (desktop grid) */
.process-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
  text-align: center;
}

.step {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  position: relative;
  box-shadow: rgb(166 165 166) 6px 11px 4px;
}

.step-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #130a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -45px auto 15px;
  position: relative;
}

.step-icon i {
  font-size: 34px;
  color: white;
}

.step p {
  font-weight: 600;
  font-size: 16px;
  margin: 0;
}

/* Default arrows */
.step::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  font-size: 28px;
  color: #000;
}

/* Last element in row points down */
.new_step::after {
  content: "↓";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: #000;
}

/* Second row steps point left */
.step1::after {
  content: "←";
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  font-size: 28px;
  color: #000;
}

/* Remove arrow for the last step */
.step:last-child::after {
  display: none;
}

/* 🔥 Mobile view: stack all steps vertically with ↓ arrows */
@media (max-width: 768px) {
  .process-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  .step::after {
             content: "↓";
             position: absolute;
             top: 100%;
             left: 50%;
             transform: translateX(-50%);
             font-size: 30px;
             color: #000;
         }
          .step1::after {
             content: "↓";
             position: absolute;
             top: 100%;
             left: 50%;
             transform: translateX(-50%);
             font-size: 30px;
             color: #000;
         }
         .st::after {
             content: "↓";
             position: absolute;
             top: 100%;
             left: 50%;
             transform: translateX(-50%);
             font-size: 30px;
             color: #000;
         }


}

@media screen and (min-width: 768px)  and (max-width:1024px){
  .team-card {
             background-color: #fff;
             border-radius: 16px;
             padding: 30px 20px;
             text-align: center;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
             width: 215px;
             transition: transform 0.3s ease;
         }
        }
.about-two__text-2{
    color: #000;
    text-align: justify;

}
.about-two__text-1{

  text-align: justify;
}
.about-one__text-1{
     text-align: justify;
}
.about-one__text-2{
       color: #000;
    text-align: justify;

}
.feature-one__text{
     text-align: justify;
}
.services-one__text{
     text-align: justify;
}
.project-one__text{
     text-align: justify;
     color: #000;
}

.contact-icons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

/* Base style for both icons */
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
}

WhatsApp
.icon.whatsapp {
  background-color: #25D366; /* WhatsApp green */
}

.icon.whatsapp:hover {
  background-color: #1ebe5d;
}

/* Phone */
.icon.phone {
  background-color: #0d6efd; /* Bootstrap blue */
}

.icon.phone:hover {
  background-color: #084298;
}



/* Contact Bar Container */
.contact-bar {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}

/* Common Icon Style */
.contact-bar .icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: 0.3s ease;
}

/* WhatsApp Icon */
.contact-bar .whatsapp {
  background: #25D366;
}
.contact-bar .whatsapp:hover {
  background: #1ebe5d;
}

/* Phone Icon */
.contact-bar .phone {
  background: #0d6efd;
}
.contact-bar .phone:hover {
  background: #084298;
}

/* Floating container */
.floating-icons {
    position: fixed;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

/* Common button styles */
.floating-icons a {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    animation: pulse 5.5s infinite;  /* 👈 Animation added */
}
/*
/* WhatsApp button */
.floating-icons a.whatsapp {
    background-color: #25d366;
}

/* Phone button */
.floating-icons a.phone {
    background-color: #007bff;
}

/* Hover effect */
.floating-icons a:hover {
    transform: scale(1.2);
    transition: 0.3s;
}

/* 🔥 Animation Keyframes */
@keyframes pulse {
    0% { transform: scale(10); }
    50% { transform: scale(2.15); }
    100% { transform: scale(5); }
}

.material-card {
  text-align: center;
}

.material-card img {
  width: 155px;
  height: 155px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  transition: transform 0.3s;
}

.material-card img:hover {
  transform: scale(1.1);
}

.material-card h5 {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.newsletter__input-box {
    position: relative;
    display: block;
    left: 100px;
}

.floating-icons {
    position: fixed;
    bottom: 100px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.floating-icons .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366; /* default green */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    animation: bounce 2s infinite;
}

.floating-icons .icon.call {
    background: #007bff; /* blue for call */
    animation-delay: 0.5s; /* second icon delay */
}

.floating-icons .icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1); /* white effect */
}

/* Hover Zoom Effect */
.floating-icons .icon:hover {
    transform: scale(1.2) rotate(10deg);
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}










.about-one__call-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #28a745;     /* Green call color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    animation: ring 1.5s infinite; /* Ring effect */
}

/* Ring / Bling Animation */
@keyframes ring {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(3deg); }
    80% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}


.modal.fade .modal-dialog {
  transform: scale(0.7);
  transition: all 0.3s ease-in-out;
}
.modal.fade.show .modal-dialog {
  transform: scale(1);
}


/* Modal Box Styling */
.modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: zoomIn 0.4s ease;
}

/* Header */
.modal-header {
  background: linear-gradient(135deg, #0062cc, #0056b3);
  color: #fff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 15px 20px;
}

.modal-header h5 {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
}

/* Inputs */
.modal-body .form-control {
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.modal-body .form-control:focus {
  border-color: #0062cc;
  box-shadow: 0 0 8px rgba(0,98,204,0.3);
}

/* Submit Button */
.modal-body .btn-primary {
  background: #28a745;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 500;
  transition: all 0.3s;
}

.modal-body .btn-primary:hover {
  background: #218838;
  transform: scale(1.05);
}

/* Animation */
@keyframes zoomIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* .feature-one__text{
    color: #000 !important;
} */