*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
  position: sticky;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* position: fixed;  */
  top: 0; 
  left: 0;
  right: 0;
  z-index: 1000;
  height: 90px; 
  width: 100%;
  font-family: 'Arial', sans-serif;

}

.navbar .logo {
  height: 60px;
  padding-left: 60px;
}

.nav-links {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-evenly;
  font-family: 'Arial', sans-serif;
  font-size: 19px;
margin-right: 170px;

}

.nav-links a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  transition: color 0.3s ease;
}

.nav-links a i {
  margin-right: 8px;
  font-size: 18px;
}

.nav-links a:hover {
  color: #007bff;
}

.navbar .dropdown {
  position: relative;
}

.navbar .dropbtn {
  background-color: transparent;
  color: #333;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 4px;
  opacity: 0;

  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-content a {
  color: black;
  padding: 16px 20px;
  text-decoration: none;
  display: block;
  position: relative;
  font-size: 14px;
  transition: background-color 0.3s ease, transform 0.3s ease; 
}

.dropdown-content a:hover {
  background-color: #e0e0e0;
  animation: bounce 0.3s; 
}

@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5px);
  }
}

.dropdown-content a:hover::before {
  content: '•';
  position: absolute;
  left: 10px;
  color: #007bff;
  font-size: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.hamburger {
display: none; /* Hide hamburger by default */
flex-direction: column;
cursor: pointer;
}

.navbar .bar {
height: 4px;
width: 25px;
background-color: black; /* Hamburger bar color */
margin: 3px 0; /* Space between bars */
}

/* Submenu styling */
.dropdown-submenu {
  position: relative;
}

.submenu-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #f9f9f9;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-submenu:hover .submenu-content {
  display: block;
}

.submenu-content a {
  color: black;
  padding: 16px 20px;
  text-decoration: none;
  display: block;
  position: relative;
}

.submenu-content a:hover {
  background-color: #f1f1f1;
}

/* Bullet points for submenu items */
.submenu-content a:hover::before {
  content: '•';
  position: absolute;
  left: 10px;
  color: #007bff;
  font-size: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Styling for the submenu dropdown */
.submenu-dropdown {
  display: none;
  position: absolute;
  left: 100%; /* Position it to the right of the Infrastructure link */
  top: 0;
  background-color: #f9f9f9;
  min-width: 150px; /* Set a width for the submenu */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 4px;
}

/* Show the submenu dropdown on hover */
.dropdown-submenu:hover .submenu-dropdown {
  display: block;
}

/* Ensure submenu links have padding */
.submenu-dropdown a {
  padding: 10px 20px;
  color: black;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.submenu-dropdown a:hover {
  background-color: #e0e0e0; /* Change background on hover */

}

/* ******** */
/* ************* */

.submenu-content {
display: none; /* Hide submenu by default */
}
.submenu-content.show {
display: block; /* Show submenu when toggled */
}
.apple-dropdown, .cloud-devops-dropdown {
display: none; /* Hide dropdowns by default */
position: absolute; /* Position it absolutely */
left: 100%; /* Position to the right of the parent */
top: 0; /* Align to the top */
background-color: #f9f9f9; /* Background color */
min-width: 160px; /* Set a min-width */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow */
z-index: 1; /* Ensure it's above other content */
}
.apple-dropdown.show, .cloud-devops-dropdown.show {
display: block; /* Show dropdown when toggled */
}
.sub-dropdown-submenu {
position: relative; /* Relative position for the dropdown */
}
/* *************************************** */
#chatbot-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* background: linear-gradient( 110deg,#1078bf,#5bb949); */
  /* transition: gradient-chatbot 0.2s ease-in-out; */
  background: linear-gradient(-45deg, #1078bf, #5bb949,#1078bf, #5bb949,#1078bf, #5bb949,#1078bf);
  background-size: 300% 300%;

  animation: gradient-chatbot 12s ease-in-out infinite;
  color: white;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 28px;
  z-index: 10000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* transition: background-color 0.3s; */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

@keyframes gradient-chatbot {
  0% {
    background-position: 0% 25%;

  }
  25% {
    background-position: 25% 50%;

  }
  50% {
    background-position:  50% 75%;


  }
  75% {
    background-position:75% 100%;


  }
  100%{
    background-position: 0% 25%;

  }
}

/* #chatbot-icon:hover {
  background-color: #0056b3;
} */

#chatbot-form-popup {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: white;
  border: 2px solid #1078bf;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  z-index: 1001;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.form-chatbot-content .close-chatbot-btn {
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  cursor: pointer;
}

.form-chatbot-content .close-chatbot-btn:hover {
  color: #000;
}

#chatbot-form-popup h2 {
  color: #1078bf;
  font-size: 18px;
  margin-top: 0;
  text-align: center;
}

#chatbotform {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chatbotform label {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 4px;
}

#chatbotform input[type="text"],#chatbotform input[type="email"],#chatbotform textarea {
  padding: 10px;
  border: 1px solid #2c3e50;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

#chatbotform textarea {
  min-height: 60px;
}

#chatbotform input[type="text"]:focus,#chatbotform input[type="email"]:focus,#chatbotform textarea:focus {
  outline: none;
  border-color: #1078bf;
}

#chatbotform button[type="submit"] {
  background-color: #1078bf;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#chatbotform button[type="submit"]:hover {
  background-color: #1078bf;
} 

/* *********************************** */

/* Hero Section Styling */
#homepage-hero-section {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

#homepage-hero-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#homepage-hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 20px;
}

#homepage-hero-section h1 {
  font-size: 2.5em;
  margin: 0;
  animation: zoomIn 2s ease-in-out;
}

#homepage-hero-section p {
  font-size: 1.2em;
  margin: 10px 0 0;
  animation: zoomIn 2s ease-in-out 1s;
}

@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  #homepage-hero-section {
      height: 300px;
  }

  #homepage-hero-section h1 {
      font-size: 2em;
  }

  #homepage-hero-section p {
      font-size: 1em;
  }
}

@media (max-width: 480px) {
  #homepage-hero-section {
      height: 200px;
  }

  #homepage-hero-section h1 {
      font-size: 1.5em;
  }

  #homepage-hero-section p {
      font-size: 0.9em;
  }
}



/* ****************************************  Overview section ****************************************  */


/*  */
/* *********** */


#homepage-overview-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* max-width: 1200px; */
}

#homepage-overview-image {
  flex: 1;
  max-width: 50%;
  padding: 10px;
}

#homepage-overview-image img {
  width: 100%;
  border-radius: 8px;
}

#homepage-overview-content {
  flex: 1;
  max-width: 50%;
  padding: 10px;
}

.homepage-overview-text {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.homepage-overview-text strong {
  color: #007bff;
}

.homepage-cta-button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.2em;
  transition: background-color 0.3s;
}

.homepage-cta-button:hover {
  background-color: #0056b3;
}

@media (max-width: 768px) {
  #homepage-overview-section {
      flex-direction: column;
  }

  #homepage-overview-image {
      order: 2;
      max-width: 100%;
      display: none;
  }

  #homepage-overview-content {
      order: 1;
      max-width: 100%;
      font-size: 20px;
  }

  .homepage-cta-button {
      order: 3;
  }
  #homepage-overview-content p{
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 10px;
  }

  .homepage-overview-text strong{
    font-size: 20px;
  }
}
/* Responsive Styling */
/* #homepage-overview-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
}

#homepage-overview-image {
  flex: 1;
  max-width: 50%;
  padding: 10px;
}

#homepage-overview-image img {
  width: 100%;
  border-radius: 8px;
}

#homepage-overview-content {
  flex: 1;
  max-width: 50%;
  padding: 10px;
}

.homepage-overview-text {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.homepage-overview-text strong {
  color: #007bff;
}

.homepage-cta-button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.2em;
  transition: background-color 0.3s;
}

.homepage-cta-button:hover {
  background-color: #0056b3;
} */



/* ************************  Our services section css ****************************************8 */

/* Our Services Section */

/* Our Services Section */
#homepage-services-section {
  padding: 40px 20px; /* Padding around the section */
  background-color: #f8f9fa; /* Light background color */
}

/* Title Styling */
#homepage-services-title {
  font-size: 2.5rem; /* Size for the main title */
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #2c3e50; /* Dark text color */
  margin-bottom: 30px; /* Space below the title */
  text-align: center; /* Center align the title */
  font-weight: 700; /* Bold text for title */
}

/* Card Container */
#homepage-services-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-between; /* Space out the cards */
  gap: 10px; /* Reduced spacing between cards */
}

/* Individual Service Card */
.homepage-services-card {
  flex: 0 1 30%; /* Each card takes up to 30% of the container width */
  background: linear-gradient(135deg, #8be2b8, #5cb85c); /* Linear gradient background */
  border-radius: 8px; /* Rounded corners */
  padding: 20px; /* Padding inside the card */
  height: 250px; /* Increased height */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
  text-align: center; /* Center text in each card */
  text-decoration: none; /* Remove underline from link */
}

/* Card Hover Effect */
.homepage-services-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Larger shadow on hover */
}

/* Card Title Styling */
.homepage-services-card-title {
  font-size: 1.5rem; /* Size for each card title */
  margin-bottom: 15px; /* Space below card title */
  /* color: #ffffff;  */
  color: #2c3e50;
  display: flex; /* Use flexbox for alignment */
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center items vertically */
  font-weight: 600; /* Bold text for card titles */
}

/* Icon Styling in Card Title */
.homepage-services-card-title i {
  margin-right: 10px; /* Space between icon and text */
  font-size: 1.5rem; /* Adjust icon size */
}

/* Description Text */
.homepage-services-card-description {
  font-size: 1.1rem; /* Font size for descriptions */
  color: #ffffff; /* White text color for description */
  line-height: 1.4; /* Improve readability */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}



/* Responsive Adjustments */
@media (max-width: 992px) {
  #homepage-services-container {
      flex-direction: column; /* Stack cards on tablet screens */
      gap: 15px; /* Maintain gap between stacked cards */
  }

  .homepage-services-card {
      flex: 1; /* Allow cards to take full width on small screens */
      margin-bottom: 20px; /* Space between stacked cards */
  }
}



/*  ******************************** Why Choose Section ******************************* */
.homepage-why-choose-section {
  padding: 40px 20px; /* Padding around the section */
  background-color: #e5f3ff; /* Light background color */
}

/* Title Styling */
.homepage-why-choose-title {
  font-size: 2.5rem; /* Size for the main title */
  color: #2c3e50; /* Dark text color */
  margin-bottom: 30px; /* Space below the title */
  text-align: center; /* Center align the title */
  font-weight: 700; /* Bold text for title */
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* Link Styling */
.homepage-why-choose-link {
  color: #1078bf; /* Branding color for the link */
  text-decoration: none; /* Remove underline */
  font-size: 1rem; /* Adjust font size */
  margin-left: 10px; /* Spacing between text and link */
}

.homepage-why-choose-link:hover {
  text-decoration: underline; /* Underline on hover */
}

/* Card Container */
.homepage-why-choose-container {
  display: flex; /* Enable flexbox layout */
  flex-wrap: wrap; /* Allow wrapping to the next line */
  justify-content: space-between; /* Space out the cards */
  gap: 20px; /* Add spacing between the cards */
}

/* Individual Why Choose Card */
.homepage-why-choose-card {
  flex: 0 1 calc(25% - 20px); /* Four in a row with equal spacing */
  background: linear-gradient(135deg, #ffffff, #e9ecef); /* Gradient background for cards */
  border-radius: 12px; /* Rounded corners */
  padding: 20px; /* Padding inside the card */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
  text-align: center; /* Center text in each card */
  position: relative; /* Position relative for pseudo-elements */
  overflow: hidden; /* Hide overflow for pseudo-elements */
}

/* Card Hover Effect */
.homepage-why-choose-card:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Larger shadow on hover */
}

/* Card Title Styling */
.homepage-why-choose-card-title {
  font-size: 1.5rem; /* Size for each card title */
  margin-bottom: 15px; /* Space below card title */
  color: #1078bf; /* Branding color for titles */
  display: flex; /* Use flexbox for alignment */
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center items vertically */
  font-weight: 600; /* Bold text for card titles */
}

/* Icon Styling in Card Title */
.homepage-why-choose-card-title i {
  margin-right: 10px; /* Space between icon and text */
  font-size: 1.5rem; /* Adjust icon size */
  color: #5bb949; /* Icon color */
}

/* Description Text */
.homepage-why-choose-card-description {
  font-size: 1.2rem; /* Font size for descriptions */
  /* color: #555;  */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  line-height: 1.4; /* Improve readability */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .homepage-why-choose-card {
      flex: 0 1 calc(50% - 20px); /* Two in a row on tablet screens */
  }
}

@media (max-width: 576px) {
  .homepage-why-choose-card {
      flex: 0 1 100%; /* Stack cards on smaller screens */
      margin-bottom: 20px; /* Space between cards */
  }
}

/* Pseudo-element for decorative effect */
.homepage-why-choose-card::before {
  content: '';
  position: absolute; /* Position absolute to overlay */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  right: 0; /* Stretch to the right */
  bottom: 0; /* Stretch to the bottom */
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent overlay */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s; /* Transition for smooth appearance */
}

.homepage-why-choose-card:hover::before {
  opacity: 1; /* Show overlay on hover */
}
/* infrastructure */

.infrastructure-solutions {
  max-width: 1300px;
  margin: auto;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} 

.it-inf-heading{
  /* padding-top: 5%; */
  text-align: center;
  color: #2C3E50;
  font-size: 2.2em;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#sub-heading{
  text-align: center;
}
.card-title11{
  color: #1078bf;
  padding-left: 1%;
  font-size: 1.5rem;
}

.card-title11:hover{
 color: #2c3e50;
}

.card-title11 i{
  margin-right: 10px;
  color: #5bb949;
}
.services11 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}

.service11 {

  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin: 15px;
  flex: 1 1 calc(30% - 30px); /* Three cards per row with spacing */
  transition: transform 0.3s, box-shadow 0.3s;
} 

.service11 p {
  margin: 8px 0;
  line-height: 3vh;
  font-size: 1.1rem;
  /* text-align: center; */
}

.cta-button1 {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #5bb949;
  /* background-color: #007bff; */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cta-button1:hover {
  background-color: #1078bf;
}

.diagram {
  margin-top: 40px;
  text-align: center;
}

.diagram img {
  max-width: 100%;
 height:auto;
}



/*  ************************************* Cloud and Devops section ***************************** */

/* Cloud and DevOps Section */
#homepage-cloud-devops {
  padding: 40px 20px; /* Padding around the section */
  background-color: #f8f9fa; /* Light background color */
  /* border: 1px solid; */
}

/* Title Styling */
#homepage-cloud-devops-title {
  font-size: 2.5rem;
  color: #2C3E50;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
}

/* Section Description */
#homepage-cloud-devops-description {
  font-size: 1.2rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #2c3e50;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px; /* Centering the description and spacing */
  line-height: 1.6;
}

/* Content Wrapper */
#homepage-cloud-devops-content {
  /* border: 1px solid; */
  width: 90%;
  display: flex;
  margin: auto;
  flex-wrap: wrap; /* Wrap cards on smaller screens */
  justify-content: space-between; /* Space between the cards */
  gap: 20px;
}

/* Individual Service Card */
.homepage-cloud-devops-card {
  flex: 0 1 32%; /* Card width, adjust for 3 cards in a row */
  /* background: linear-gradient(135deg, #1078bf, #6cdbeb);  */
  background: linear-gradient(135deg, #ffffff, #e9ecef); /* Gradient background for cards */
  border: 1px solid rgb(190, 189, 189);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* color: white; */
  color: #2c3e50;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  text-decoration: none; /* Remove underline from links */
  /* border: 1px solid blue; */
}

/* Card Hover Effect */
.homepage-cloud-devops-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Card Title Styling */
.homepage-cloud-devops-card-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  display: flex;
  font-weight: 700;
  /* color: #1078bf; */
  color: #084c7f;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  align-items: center;
}

/* Card Icon Styling */
.homepage-cloud-devops-card-title i {
  font-size: 2.2rem;
  margin-right: 10px;
  color: #5bb949;
}

/* Card Description Text */
.homepage-cloud-devops-card-description {
  font-size: 1.1rem;
  line-height: 1.4;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* CTA Button */
.homepage-cloud-devops-cta {
  text-align: center;
  margin-top: 30px;
}

.homepage-cta-button {
  padding: 10px 25px;
  background-color: #5bb949;
  /* background-color: #5bb949; */
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.homepage-cta-button:hover {
  background-color: #084C7F;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  #homepage-cloud-devops-content {
      flex-direction: column;
  }

  .homepage-cloud-devops-card {
      flex: 1 1 100%; /* Full width for smaller screens */
      margin-bottom: 20px;
  }
}


/* ***************************************** Website and application development ********************************** */


/* Website and Application Development Section */
#homepage-webandapp-development {
  padding: 20px 20px;
  background-color: #084C7F;
  text-align: center;
}

/* Title Styling */
#homepage-webandapp-title {
  font-size: 2.5rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #E5F3FF;
  margin-bottom: 10px;
  font-weight: 700;
}

/* Section Description */
#homepage-webandapp-description {
  font-size: 1.2rem;
  color: #f8f9fa;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  max-width: 900px;
  margin: 0 auto 20px;
  line-height: 1.2;
}

/* Wrapper for cards and image */
#homepage-webandapp-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align items at the start */
  gap: 15px;
}

/* Content Wrapper */
#homepage-webandapp-content {
  display: flex;
  flex-direction: column;
  flex: 0 1 60%; /* 60% width for the cards */
  gap: 15px;
}

/* Individual Service Card */
.homepage-webandapp-card {
  /* background: linear-gradient(135deg, #c5f1e5, #6cdbeb); */
  background: linear-gradient(135deg, whitesmoke,white);
  border: 1px solid #2C3E50;
  width: 95%;
  margin-left: 4%;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* color: white; */
  color: black;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  text-decoration: none;
  display: flex; /* Flexbox for alignment */
  justify-content: space-between; /* Space between text and icon */
  align-items: center; /* Center align vertically */
}

.homepage-webandapp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Card Information */
.homepage-webandapp-card-info {
  flex: 1; /* Allow the text area to take available space */
}

/* Card Title */
.homepage-webandapp-card-title {
  font-size: 1.4rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-bottom: 5px;
  color: #2C3E50;
  font-weight: 600;
}

/* Card Description */
.homepage-webandapp-card-description {
  font-size: 1rem;
  line-height: 1.3;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Icon styling */
.homepage-webandapp-card-icon {
  font-size: 4.5rem; /* Larger icons */
  margin-left: 10px; /* Space between text and icon */
  /* color: whitesmoke;  */
  color: #1078bf;
}

/* Image on the right */
#homepage-webandapp-image {
  flex: 0 1 35%; /* 35% width for the image */
}

#homepage-webandapp-image img {
  height: 650px;
  width: 570px;
  border-radius: 10px;
  margin-top: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* CTA Button */
#homepage-webandapp-cta {
  margin-top: 20px;
}

.homepage-cta-button {
  padding: 10px 25px;
  background-color: #1078bf;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.homepage-cta-button:hover {
  background-color: #084c7f;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  #homepage-webandapp-wrapper {
      flex-direction: column; /* Stack items vertically on mobile */
      align-items: center; /* Center align items */
  }

  #homepage-webandapp-content, #homepage-webandapp-image {
      flex: 1 1 100%; /* Full width for content and image */
      margin-bottom: 20px; /* Space between stacked items */
  }

  /* Adjust title and descriptions for mobile view */
  #homepage-webandapp-title {
      font-size: 2rem; /* Decrease title size for mobile */
  }

  .homepage-webandapp-description {
      font-size: 1rem; /* Decrease description size for mobile */
  }

  /* Card adjustments */
  .homepage-webandapp-card {
      flex-direction: column; /* Stack content vertically in cards */
      align-items: flex-start; /* Align items at the start */
      text-align: left; /* Align text to the left */
  }

  /* Adjust card icon size */
  .homepage-webandapp-card-icon {
      font-size: 3rem; /* Smaller icons for mobile */
      margin: 0; /* Remove margin for mobile */
      align-self: flex-end; /* Align icon to the right */
      
  }
  
  /* Adjust image size */
  #homepage-webandapp-image img {
      margin-top: 0;
      height: auto; /* Maintain aspect ratio */
      max-width: 100%; /* Ensure image fits within its container */
  }
}

/* ****************************************** Software development section css *************************** */



/* Software Development Section */
.homepage-software-development {
  /* border: 1px solid; */
  padding: 80px 20px;
  background-color: #f8f9fa; /* Light background color */
  text-align: center;
}

/* Title Styling */
.homepage-software-title {
  font-size: 2.5rem;
  color: #2c3e50;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  /* margin-bottom: 40px; */
  font-weight: 700;
  margin-top: -25px;
}

.homepage-software-content hr{
  width: 50%;
  margin: auto;
}
/* Section Description */
.homepage-software-description {
  font-size: 1.2rem;
  text-align: left;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #2c3e50;
  max-width: 900px;
  margin: 20px auto 40px;
  line-height: 1.4;
  margin-right: 30px;

}


/* Wrapper for image and button */
.homepage-software-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Align items at the center */
  gap: 20px; /* Space between items */
}

/* Image on the left */
.homepage-software-image {
  flex: 0 1 45%; /* 45% width for the image */
}

.homepage-software-image img {
  width: 100%; /* Make image responsive */
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* CTA Button styling */
.homepage-software-cta {
  flex: 0 1 45%; /* 45% width for the button */
}

.homepage-cta-button {
  padding: 10px 25px;
  background-color: #1078bf;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-size: 1.2rem; /* Increase font size for button */
}

.homepage-cta-button:hover {
  background-color: #2c3e50; /* Darker shade on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .homepage-software-wrapper {
      flex-direction: column; /* Stack items on smaller screens */
  }

  .homepage-software-image, .homepage-software-cta {
      flex: 1 1 100%; /* Take full width on mobile */
      margin-bottom: 20px; /* Space between stacked items */
  }
}
/* s/w snippets */
.containerr {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #2c3e50;
  background-color: #f8f9fa;
  height: 300px;
}

.containerr h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #2c3e50;
}

.containerr h3{
  margin-bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.containerr .tech-description span{
   margin-bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
text-indent: 10px;
letter-spacing: 1px;
}

/* Snippet section */
.containerr .snippet-mockup {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.containerr .snipLogo{
  width: 50px;
  height: 30px;
  object-fit: cover;
}

.containerr .snippet {
  flex: 1;
  background-color: #fff;
  perspective: 1000px; /* Enable 3D perspective */
  max-width: 32%;
}

.containerr .flip-card-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.containerr .flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.containerr .flip-card-front,
.containerr .flip-card-back {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.containerr .flip-card-front {
  background-color: #fff;
}

.containerr .flip-card-back {
  background-color: #084C7F;
  color: white;
  transform: rotateY(180deg);
}

/* Code Styles */
.containerr pre {
  background-color: #2c3e50;
  color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow: auto;
  line-height: 1.5; /* Improved line spacing */
}

.containerr .view-output,.containerr .back-button {
  margin-top: 10px;
  background-color: #084c7f;
  color: #e5f3ff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.containerr .view-output:hover,.containerr .back-button:hover {
  background-color: #5bb949;
  color: #F8F9FA;
}

/* Technology Descriptions */
.containerr .tech-description {
  font-size: 12px;
  color: #2c3e50; /* Grey for descriptions */
  margin-top: 5px;
  line-height: 1.4; /* Improve readability */
  display: flex;
  align-items: center; /* Aligns items vertically */
  gap: 10px; /* Space between logo and text */
}

/* Responsive Design */
@media (max-width: 1024px) {
.containerr .snippet {
      max-width: 48%;
  }
}

@media (max-width: 768px) {
.containerr .snippet-mockup {
      flex-wrap: wrap;
  }

  .containerr .snippet {
      max-width: 100%;
  }
}

/* **************************************** Partners Section css ********************************** */


/* Partners Section */
.homepage-partners {
  padding: 10px 20px;
  background-color: #f8f9fa;
  text-align: center;
    /* border: 2px solid red; */
  
}

/* Title Styling */
.homepage-partners-title {
  font-size: 2.5rem;
  color: #2c3e50;
  font-family: 'Cambria', Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Description Styling */
.homepage-partners-description {
  font-size: 1.2rem;
  color: #2c3e50;
  max-width: 800px;
  margin: 0 auto 40px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  line-height: 1.6;
}

/* Partners Row Styling */
.homepage-partners-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;  /* Allows wrapping for smaller screens */
  align-items: center;
  gap: 20px; /* Add space between logos */
  max-width: 1200px; /* Limit the row width */
  margin: 0 auto; /* Center the row */
}

/* Partner Logo Styling */
.partner-logo {
  width: 120px; /* Fixed width */
  height: 100px; /* Increased height */
  object-fit: contain; /* Maintain aspect ratio */
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .homepage-partners-row {
      justify-content: space-around; /* Space logos evenly for smaller screens */
  }
}

@media (max-width: 768px) {
  .partner-logo {
      width: 100px; /* Smaller fixed width for mobile */
      height: 80px; /* Smaller fixed height for mobile */
  }

  .homepage-partners-row {
      flex-wrap: wrap; /* Make sure the logos wrap for smaller screens */
  }
}



/* ********************************** */
#carouselExampleInterval {
  margin-top: 2%;
  width: 100%;
  /* border: 2px solid; */
  height: 690px;
  background-color: #F8F9FA;
}
#carouselExampleInterval .carousel-inner.homepage-testimonials-carousel {
  /* border: 1px solid red; */
  height: 590px;
  width: 100%;
}

#carouselExampleInterval .carousel-inner.homepage-testimonials-carousel > h1 {
  margin-top: 1%;
  text-align: center;
  color: #2c3e50;
}
#carouselExampleInterval .carousel-item {
  /* border: 2px solid green; */
  width: 100%;
  height: 550px;
  background-color: #F8F9FA;
}

#carouselExampleInterval .card {
  width: 84%;
  margin: auto;
  height: 350px;
  position: relative;
  top: 11%;
  border-radius: 15px;
  /* background-color:#f8f9fa; */
  box-shadow: 0 20px 30px -20px rgba(5, 5, 5, 0.24);
}

#carouselExampleInterval .header .image {
  height: 11rem;
  width: 11rem;
  margin-top: -90px;
  margin-left: 41%;
  border-radius: 9999px;
  background-color: white;
  border: 20px solid #084c7f;
}
#carouselExampleInterval .header .image > img {
  width: 130px;
  height: 130px;
  margin-left: 3%;
  margin-top: 2.5%;
  border-radius: 50%;
}

#carouselExampleInterval .stars {
  margin-left: 43%;
  color: #5bb949;
}

#carouselExampleInterval .fa-star {
  height: 1.7rem;
  width: 1.7rem;
  font-size: 1.5em;
}

#carouselExampleInterval .name {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-left: 45%;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1078bf;
  font-style: italic;
  text-decoration: underline #5bb949;
}

#carouselExampleInterval .message {
  font-style: italic;
  word-spacing: 2px;
  padding: 0 4%;
  text-align: center;
  color: rgb(79, 82, 87);
  font-size: 1.2rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#carouselExampleInterval .carousel-control-prev-icon {
  border-radius: 50px;
  height: 50px;
  width: 50px;
  background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-next-icon {
  border-radius: 50px;
  height: 50px;
  width: 50px;
  background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-prev-icon:hover {
  background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-next-icon:hover {
  background-color: #2c3e50;
}
#carouselExampleInterval #stars>#icon {
  border: 1px solid;
}

#carouselExampleInterval #stars>#icon>i {
  font-size: 20rem;
  border: 1px solid;
  height: 300px;
  width: 50%;
  position: relative;
}
#carouselExampleInterval .fa-quote-left {
  font-size: 2em;
  color: white;
  position: relative;
  left: 4%;
  top: 10%;
}
#carouselExampleInterval .fa-quote-right {
  font-size: 2em;
  color: white;
  position: relative;
  left: 94%;
  top: 10%;
}
#carouselExampleInterval .testimonials {
  border: 1px solid rgba(128, 128, 128, 0.482);
  position: relative;
  top: 40px;
  height: 510px;
  width: 71%;
  margin: auto;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  background-color: #084c7f;
}

/* ************************ testimonials ****************************** */




.homepage-testimonials {
  background: url('https://i.ibb.co/PTJDkgb/testimonials.jpg') center center / cover no-repeat;
  opacity: 1000px;
  /* background: linear-gradient(45deg,#3d93cc,rgb(220, 217, 237)); */
  padding: 50px 0;
  color: white;
}

.homepage-testimonials_container {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.homepage-testimonials_heading {
  font-size: 2.5rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
  margin-bottom: 30px;
}

.homepage-testimonials_carousel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.homepage-testimonials_inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.homepage-testimonials_item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.homepage-testimonials_image {
  border-radius: 50%;
  width: 136px;
  height: 136px;
  margin: auto;
  display: block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.homepage-testimonials_quote {
  font-size: 1.2rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin: 20px 0;
}

.homepage-testimonials_client {
  font-size: 1.4rem;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: bold;
}

.homepage-testimonials_control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 24px;
  transition: background 0.3s ease;
  z-index: 10; /* Ensure buttons are on top */
}

.homepage-testimonials_control:hover {
  background: rgba(255, 255, 255, 1);
}

.homepage-testimonials_control-prev {
  left: 10px; /* Adjust distance from the edge */
}

.homepage-testimonials_control-next {
  right: 10px; /* Adjust distance from the edge */
}

/* Mobile Styles */
@media (max-width: 768px) {
  .homepage-testimonials_heading {
    font-size: 1.5rem; /* Decrease font size for smaller screens */
  }

  .homepage-testimonials_quote {
    font-size: 1rem; /* Decrease font size for smaller screens */
  }

  .homepage-testimonials_client {
    font-size: 1.1rem; /* Decrease font size for smaller screens */
  }
}


/* ********************************** */
/* test2 */
#carouselExampleInterval {
  margin-top:2% ;
  width: 100%;
  /* border: 2px solid; */
  height: 690px;
  background-color: #F8F9FA;
}
#carouselExampleInterval .carousel-inner2 {
  /* border: 1px solid red; */
  height: 590px;
  width: 100%;

}

#carouselExampleInterval .carousel-inner2>h1{
  margin-top: 1%;
  text-align: center;
  color:#2c3e50;
}
#carouselExampleInterval .carousel-item2 {
  /* border: 2px solid green; */
  width: 100%;
  height: 550px;
  background-color: #F8F9FA;
}

#carouselExampleInterval .card {
  width: 84%;
  margin: auto;
  height: 350px;
 position: relative;
  top:11%;  
  border-radius: 15px;
  /* background-color:#f8f9fa; */
  box-shadow: 0 20px 30px -20px rgba(5, 5, 5, 0.24);
}

#carouselExampleInterval .header .image {
  height: 11rem;
  width: 11rem;
 margin-top: -90px;
  margin-left: 41%;
  border-radius: 9999px;
  background-color:white;
  border: 20px solid #084c7f;  
}
#carouselExampleInterval .header .image>img{
  width: 130px;
  height: 130px;
  margin-left: 3%;
  margin-top: 2.5%;
  border-radius: 50%;
}

#carouselExampleInterval .stars {
  margin-left: 43%;
 color:#5bb949; 
}

#carouselExampleInterval .fa-star {
  height: 1.7rem;
  width: 1.7rem;
  font-size: 1.5em;
}

#carouselExampleInterval .name {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-left: 45%;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1078bf;
  font-style: italic;
  text-decoration: underline #5bb949;
}

#carouselExampleInterval .message {
  font-style: italic;
  word-spacing: 2px;
  padding: 0 4%;
  text-align: center;
  color: #2c3e50;
  font-size: 1.2rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#carouselExampleInterval .carousel-control-prev-icon{
  
  border-radius: 50px;
 height: 50px;
 width: 50px;
 background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-next-icon{

  border-radius: 50px;
 height: 50px;
 width: 50px;
 background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-prev-icon:hover{
  background-color: #2c3e50;
}
#carouselExampleInterval .carousel-control-next-icon:hover{
  background-color: #2c3e50;
}
#carouselExampleInterval #stars>#icon{
  border: 1px solid;
 
}
#carouselExampleInterval #stars>#icon>i{
 font-size: 20rem;
 border: 1px solid;
 height: 300px;
 width: 50%;
 position: relative;
 
}
#carouselExampleInterval .fa-quote-left{
  font-size: 2em;
  color: white;
 position: relative;
 left: 4%;
 top: 10%;
}
#carouselExampleInterval .fa-quote-right{
  font-size: 2em;
  color: white;
  position: relative;
 left: 94%;
 top:10%;
}
#carouselExampleInterval .testimonials{
  border: 1px solid rgba(128, 128, 128, 0.482);
  position: relative;
  top: 40px;
  height: 510px;
  width: 71%;
  margin: auto;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  background-color: #084c7f;
}


/* ************our process */
#homepage-ourprocess-section {
  /* height: 500px; */
  height: auto;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 70px;
}

#homepage-ourprocess-heading {
  margin: 1%;
  color: #2c3e50; /* Bright Orange */
  font-size: 2.5rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 550;
}

.homepage-ourprocess-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.homepage-ourprocess-progressbar {
  position: absolute;
  top: 50px;
  left: 10%;
  width: 80%;
  height: 6px;
  background-color: #2c3e50; /* Bright Orange */
  z-index: 0;
  border-radius: 3px; /* Rounded edges */
}

.homepage-ourprocess-step {
  text-align: center;
  flex: 1;
  margin: 0 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border-radius: 8px;
  padding: 20px;
  background-color: #f9f9f9; /* Soft Background for Steps */
  border: 2px solid #e5f3ff; /* Bright Orange Border */
  width: 200px; /* Fixed Width */
  height: 200px; /* Fixed Height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.homepage-ourprocess-step:hover {
  transform: scale(1.05);
  /* background-color: #ffebc6;  */
  background-color: #e5f3ff;
}

.homepage-ourprocess-icon-container {
  width: 60px; /* Adjusted to fit better */
  height: 60px; /* Adjusted to fit better */
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 36px;
  /* color: #084c7f;  */
  /* color: #2c3e50; */
  color: #5bb949;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.homepage-ourprocess-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
}

.homepage-ourprocess-description {
  font-size: 16px;
  color: #2c3e50;
}

.homepage-ourprocess-arrow-divider {
  font-size: 36px;
  color: #4a9f3b; /* Bright Orange */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
}

#homepage-ourprocess-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#homepage-ourprocess-zoomed-icon {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: #5bb949; /* Bright Orange */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
/* Mobile view adjustments */
@media (max-width: 768px) {

  #homepage-ourprocess-heading {
      font-size: 2rem;
      margin-bottom: 20px;
  }

  .homepage-ourprocess-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
    gap: 10px; /* Space between grid items */
      align-items: center;
      /* row-gap: 10px; */
  }

  .homepage-ourprocess-step {
      width: 160px;
      height: 220px;
      margin-bottom: 10px;
      padding: 11px;
      grid-column: span 2;
  }

  .homepage-ourprocess-icon-container {
      width: 50px;
      height: 50px;
      font-size: 28px;
      margin-bottom: 10px;
  }

  .homepage-ourprocess-title {
      font-size: 18px;
  }

  .homepage-ourprocess-description {
      font-size: 14px;
  }

  .homepage-ourprocess-arrow-divider {
      display: none;
  }

  .homepage-ourprocess-progressbar {
      display: none;
  }
}

/*******************  */
.partners {
    padding: 80px 20px;
    background-color: #f0f4f8; /* Softer background for a more modern look */
    color: #2c3e50;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.partners h2 {
    font-size: 3rem;
    margin-bottom: 50px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2c3e50;
    font-weight: bold;
}

.partners p {
  color: #2c3e50;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.partners-slider-container {
    padding: 0 60px; /* Balanced padding for larger screens */
    overflow: hidden;
}

.partners-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 30px; /* Increased gap for more spacing between logos */
    justify-content: center;
}

.partner-slide {
    min-width: 18%; /* Adjust width to fit logos nicely */
    text-align: center;
}

.partner-img {
    width: 160px; /* Slightly larger logos */
    height: 160px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border: 3px solid transparent; /* Enhanced border thickness */
    border-radius: 10px; /* Rounded corners for a modern look */
    transition: transform 0.4s ease, border-color 0.4s ease; /* Smoother transition */
}

.partner-img:hover {
    transform: scale(1.1); /* A bit more zoom on hover */
    border-color: #1078bf; /* Blue border on hover to match modern UI trends */
}

.dots {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.dot {
    display: inline-block;
    width: 8px; /* Increased size */
    height: 8px;
    margin: 0 8px; /* More space between dots */
    background-color: #ccc; /* Softer gray */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.6s ease, transform 0.3s ease; /* Smooth transition on dot hover */
}

.dot.active {
    background-color: #1078bf; /* Match the hover color */
}

.dot:hover {
    transform: scale(1.2); /* Slightly enlarge dots on hover */
}

@media (max-width: 768px) {
    .partners-slider-container {
        padding: 0 30px; /* Less space on smaller screens */
    }

    .partner-slide {
        min-width: 45%; /* Show two logos per view on smaller screens */
    }

    .partner-img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .partners-slider-container {
        padding: 0 15px; /* Further reduce padding on very small screens */
    }

    .partner-slide {
        min-width: 100%; /* Full width for each slide on very small screens */
    }

    .partner-img {
        width: 80px;
        height: 80px;
    }
}

/* Improved animation for partner logos */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(40px); /* More exaggerated downward start */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Final position */
    }
}

/* Apply animation to partner images */
.partner-slide {
    animation: fadeIn 3s ease forwards; /* Smooth fade-in effect */
    opacity: 0; /* Initially hidden */
    animation-delay: var(--delay); /* Custom delay for staggered effect */
}

/* JS part for staggered effect (add to your JS code) */
/* ******************************************* */



.ct-contactform {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.ct-contact{
    margin-left: 100px;
    margin-right: 100px;
}

.contact-form-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
    margin-right: 100px;
}

.contact-form-container h2 {
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    text-align: center;
}

.contact-form-container label {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

.contact-form-container input,
.contact-form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background-color: #f9f9f9;
}

.contact-form-container button {
    width: 100%;
    padding: 12px;
    background-color: #4a9f3b;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form-container button:hover {
    background-color: #5bb949;
}

.contact-form-container .success,
.contact-form-container .error {
    display: none;
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
}

.contact-form-container .success {
    color: #4a9f3b;
}

.contact-form-container .error {
    color: #dc3545;
}

/* ********************************* */


/* ********************************************* */


/* ************************************* */

.submenu-content {
    display: none; /* Hide submenu by default */
}
.submenu-content.show {
    display: block; /* Show submenu when toggled */
}
.apple-dropdown, .cloud-devops-dropdown {
    display: none; /* Hide dropdowns by default */
    position: absolute; /* Position it absolutely */
    left: 100%; /* Position to the right of the parent */
    top: 0; /* Align to the top */
    background-color: #f9f9f9; /* Background color */
    min-width: 160px; /* Set a min-width */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow */
    z-index: 1; /* Ensure it's above other content */
}
.apple-dropdown.show, .cloud-devops-dropdown.show {
    display: block; /* Show dropdown when toggled */
}
.sub-dropdown-submenu {
    position: relative; /* Relative position for the dropdown */
}


/* ****************** footer *********************** */
  
#footer {
  background-color: #084C7F;
  color: #fff;
  padding: 15px;
  text-align: center;
  clear: both;
  position: relative;
  bottom: 0;
  width: 100%;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
}

#footer h1{
  color:   #E5F3FF;
  margin-bottom: 10px;
}

#footer p {
  margin-bottom: 20px;
}

#footer a {
  text-decoration: none;
  color: #fff;
}

#footer a:hover {
  color: #ccc;
}

#divfoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

#ulLeft, #ulMidLeft, #ulRightMid, #ulRight {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 25%;
}

#ulLeft li, #ulMidLeft li, #ulRightMid li, #ulRight li {
  margin-bottom: 10px;
}

#ulLeft a, #ulMidLeft a, #ulRightMid a, #ulRight a {
  text-decoration: none;
  color: #fff;
}

#ulLeft a:hover, #ulMidLeft a:hover, #ulRightMid a:hover, #ulRight a:hover {
  color: #ccc;
}

#ulLeft img{
  height: 60px;
  background-color: #f8f9fa;
  border-radius: 10px;
}

#ulLeft #footIntro{
  width: fit-content;
  line-height: 2;
  font-style: italic;
  color:#E5F3FF ;
}

#map {
  margin-top: 20px;
}

#map iframe {
  width: 100%;
  height: 150px;
  border: none;
}

  #footer .QLs {
    margin-bottom: 10px;
  }
  
  #footer .QLs i {
    margin-right: 5px;
    color: #5BB949;
  }
  
  #footer .QLs a {
    text-decoration: none;
    color: #fff;
  }
  
  #footer .QLs a:hover {
    color: #ccc;
  }

#ulRightMid li {
  margin-bottom: 10px;
}

#ulRightMid i {
  margin-right: 10px;
  transition: transform 0.2s ease-in-out;
  color: #5BB949;
  font-size: 20px;
}

#ulRightMid a {
  text-decoration: none;
  color: #fff;
}

#ulRightMid a:hover {
  color: #ccc;
}

#ulRight {
  margin-top: 20px;
  position: absolute;
  top: 60%;
  left: 79%;
  width: fit-content;
}

#ulRight li {
  margin: 5rem;
}

#ulRight i {
  margin-right: 5px;
  font-size: 30px;
}

#ulRight a {
  text-decoration: none;
  color: #fff;
}

#ulRight a:hover {
  color: #ccc;
}

#footer a:hover {
  color: #fff; 
}

#footer i {
  margin-right: 5px; 
  transition: transform 0.5s ease-in-out;
}

#footer i:hover{
  transform: scale(1.3);
}

#footer .copyright a:hover {
  color: #fff;
}

#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer li {
  margin: 10px;
  width: max-content;
}

#footer li a {
  transition: color 0.5s ease-out;
}

#footer a:hover {
  color: #fff;
}

#footer p{
  margin-top: 20px;
}

#footer p a{
  transition: text-decoration 0.5s ease-in-out;
  font-weight: 700;
  color: #e5f3ff;
}

#footer p a:hover{
  text-decoration: underline;
  color: #f8f9fa;
}

#footer hr{
  width: 60%;
  margin: auto;
  border: 1px solid #2c3e50;
}

#footer .fa-facebook {
  color: #4a6db8;
}

#footer .fa-square-instagram {
  color: #e1306c;
}

#footer .fa-linkedin {
  color: #0077b5;
}

#footer .fa-youtube {
  color: #ff0000;
}

#footer .fa-whatsapp{
  color: #25D366;
}

#footer .fa-x-twitter{
  color: #1e1e1e;
}

#footer .fa-threads{
  color: #fff;
}

#footer .QLs {
  color: #fff;
  transition: text-decoration 0.5s ease-in;
}

#footer .QLs:hover {
  color: #ccc;
  text-decoration: underline;
}

/*  */
/* **************************************8 */
.homepage-services-section {
  /* border: 2px solid red; */
  height: 450px;
  background: linear-gradient(135deg, #e5f3ff, #f8f8fa,#e5f3ff, #f8f8fa,#e5f3ff, #f8f8fa,#e5f3ff, #f8f8fa,#e5f3ff);
  /* background-color: #084357; */
  /* background:linear-gradient(45deg,#084c7f,#4a9f3b);  */
  padding: 60px 20px;
  /* border-radius: 15px; */
  /* margin: 20px 0; */
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
}

.carousel-inner-services{
  /* border: 2px solid blue; */
  height: 390px;
  width: 88%;
  margin: auto;
}

.homepage-services-section .service-slide {
  /* border: 2px solid blue; */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  color: #000; /* Text color */
  text-decoration: none;
  /* padding: 20px; */
  background-color:#f8f8fa;
  border: 1px solid #2c3e50; /* Light border color */
  border-radius: 12px;
  /* margin: 10px; */
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  flex: 1 1 250px;
  height: 350px;
  box-shadow: 0 2px 3px  rgb(99, 98, 98) ;
}

.homepage-services-section .service-slide:hover {
  background-color: #f8f9fa;
  border-color: #2C3E50; /* Background color */
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
}

.homepage-services-section .homepage-services-heading {
  font-size: 1.4rem;
  font-weight: 550;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-bottom: 20px;
  color: #2c3e50;
}

.homepage-services-section .service-icon {
  margin: 15px 0;
  /* background-color: white; */
  color: green;
  
}
.homepage-services-section .service-icon>img{
  /* background-color: white; */
  height: 4em;
  /* border: 2px solid #2c3e50; */
  /* padding: 1% ; */
  /* border-radius: 10%; */
  object-fit: cover;
  /* background-color: #f8f8fa; */
}

.homepage-services-section .carousel-control-prev,
.homepage-services-section .carousel-control-next {
  background-color: #5bb949; /* Primary color */
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.homepage-services-section .carousel-control-prev {
  left: 10px;
}

.homepage-services-section .carousel-control-next {
  right: 10px;
}

.homepage-services-section .carousel-control-prev:hover,
.homepage-services-section .carousel-control-next:hover {
  background-color: #5bb949; /* Hover color */
  transform: scale(1.1);
}

.homepage-services-section .carousel-arrow {
  color: #ffffff; /* Arrow color */
}

.homepage-services-section .carousel-arrow:hover {
  color: #4a9f3b; /* Arrow hover color */
}

/* Icon Rotation Animation */
@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

/* Apply rotation on hover */
.homepage-services-section .service-icon:hover {
  animation: rotate 0.6s ease-in-out;
}

#carousel-item-services-4>.row{
  /* border: 2px solid blue; */
  width: 75%;
  margin: auto;
}
#carousel-item-services-4>.row .col-md-3{
  /* border: 1px solid green; */
  width: 33%;
  height: 290px;
}

/* *****************contact popup */
.popup1 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.popup-content1 {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 400px;
}

.popup-content1 h2 {
  margin-bottom: 20px;
  color: #333;
}

.popup-content1 label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.popup-content1 input, 
.popup-content1 textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popup-content1 .btn1 {
  background-color: #5bb949;
  color: white;
  border: none;
}

.popup-content1 .btn1:hover {
  background-color: #4a9f3b;
}

.close-btn1 {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
}


/* mobile */

@media (max-width: 480px){

  .navbar .logo {
    height: 60px;
    padding: 5px;
    /* padding-left: 60px; */
}
  .nav-links {
      display: none; /* Hide links by default */
      flex-direction: column; /* Stack links vertically */
      position: absolute; /* Position dropdown */
      top: 60px; /* Space below navbar */
      left: 0;
      right: 0;
      background-color: black;
 
      z-index: 10; /* Ensure it’s above other content */
  }
  
.nav-links a {
  text-decoration: none;
  color:white;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  transition: color 0.3s ease;
}

  .nav-links.show {
      display: flex; /* Show links when toggled */
  }

  .hamburger {
  
      display: flex; /* Show hamburger icon on mobile */
      margin-right: 20px;
  }
.apple-dropdown{
  min-width:160px ;
}
  .cloud-devops-dropdown{
    /* background-color: rgb(209, 20, 20); */
    /* position: absolute; */
    /* right: 0; */
    /* z-index:; */
    margin-left: 100px;
    min-width: 100px;
    /* padding: 0 ; */

    border-left: 2px solid white;
  }

.dropbtn {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
}
.dropdown-content{
  background-color: #333;
}


  #chatbot-icon{
    left: 75%;
    bottom: 3%;
    width: 50px;
    font-size: 15px;
/* display: none; */
  }




  #homepage-hero-section{
    height: 180px;
    padding: 10px;
    width: 100%;
    
  }
  #homepage-hero-section h1{
    font-size: 1rem;
  }
  #homepage-hero-section p{
    font-size: 0.6rem; 
    margin: 5px 0;
  }



  #homepage-overview-section{
    padding: 5px 15px;
  }
  #homepage-overview-image{
    position: relative;
left: 0;
    max-height: 30vh;
  }
  #homepage-overview-image img{
    max-height: 30vh;

  }
  .homepage-overview-text {
    font-size: 0.1rem;
    line-height: 1;
    margin:2px 0 ;
  }

  #homepage-ourprocess-section{
    margin: 0;
  }
 

 }



@media screen and (min-width: 340px) and (max-width: 780px) {
  #footer {
      padding: 5px 10px; 
      margin: 0;
      font-size: 12px; 
      background-color: #084C7F; 
      color: #fff; 
      text-align: center; /* Center content in the footer */
      height: 495px;
  }

  #divfoot {
      display: flex;
      flex-wrap: wrap; 
      justify-content: center;
      align-items: flex-start; 
      text-align: center;
      padding: 15px 5px 5px 5px;
  }

  #ulLeft, #ulMidLeft, #ulRightMid {
      width: 50%; 
      list-style: none; 
      padding: 0; 
  }
  #ulRightMid {
    position: relative;
    right: 5%;
  }

  #ulLeft img {
      height: 28px;
      margin-bottom: 10px; 
      margin-left: 30px;
      padding: 2px;
      border-radius: 5px;
  }

  #footIntro {
      font-size: 10px; 
      text-align: center; 
      margin: 10px 0; 
      font-style: italic; 
  }

  #ulMidLeft h1, #ulRightMid h1 {
      font-size: 16px;
      margin-bottom: 10px; 
      color: #E5F3FF;
  }

  #ulRightMid li, #ulLeft li, #ulMidLeft li {
      font-size: 12px;
      margin: 5px 0; 
  }

  #ulRightMid a, #ulMidLeft a {
      color: #E5F3FF; 
      transition: color 0.3s ease; 
  }

  #ulRightMid a:hover, #ulMidLeft a:hover {
      color: #5bb949; 
  }

  #map {
      width: 35%;
      margin: 10px 0;
  }

  #map iframe {
      height: 60px; 
      border-radius: 8px; 
      width: 100%;
  }

  #ulRight {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      list-style: none;
      padding: 0 0;
      position: absolute;
      left: 13rem;
      
  }

  #ulRight li { 
      display: flex;
      justify-content: center;
      align-items: center;
  }

  #ulRight li i{
    font-size: 17px;
    margin-right: 5px;
  }
  #ulRight a {
      color: #E5F3FF; 
      transition: color 0.3s ease; 
  }

  #ulRight a:hover {
      color: #5bb949; 
  }

  hr {
      width: 90%; 
      margin: 5px auto; 
      border: 1px solid #ccc; 
  }

  #footer p {
      font-size: 10px; 
      text-align: center; 
      margin-top: 10px; 
  }

  #footer p a {
      font-weight: 600; 
      color: #E5F3FF; 
      transition: color 0.3s ease; 
  }

  #footer p a:hover {
      color: #5bb949; 
  }
}

@media screen and (min-width: 340px) and (max-width: 480px) {
  /* Main container adjustments */
  .containerr {
      display: flex;
      /* flex-direction: column; */
      flex-wrap: wrap;
      align-items: center;
      padding: 5px;
      margin-top: 10px;
      height: 100%;

  }

  /* Snippet and card sizing */
  .snippet {
      width: 100%; 
      max-width: 320px; 
      /* min-width: 100px; */
      /* margin-bottom: 20px;  */
      margin: 5px;
      height: 100%;
  }

  .flip-card {
      width: 320px;
      height: 360px;
      perspective: 1000px;
      margin: 3px;
  }

  .flip-card-inner {
      position: relative;
      width: 100%;
      min-height: 280px;
      transform-style: preserve-3d;
      transition: transform 0.6s ease-in-out;
      border-radius: 10px;

  }

  /* Flip front and back adjustments */
  .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      /* height: ; */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      backface-visibility: hidden;
      padding: 8px;
      box-sizing: border-box;
      border-radius: 10px;
      border: 2px solid #2c3e50;
  }

  /* Front side */
  .flip-card-front {
      background-color: #f8f9fa;
      color: #2c3e50;
  }

  .tech-description {
      font-size: 18px;
      display: flex;
      height: 100px;
      align-items: center;
      margin-bottom: 10px;
      text-align: center;
  }

  .tech-description img.snipLogo {
      width: 100%;
      height: 100px;
      height: 64px;
      margin-right: 8px;
  }

  .flip-card-front h3 {
      font-size: 14px;
      margin: 10px 0;
  }

  .flip-card-front pre {
      font-size: 12px;
      /* background: #eaeaea; */
      padding: 8px;
      border-radius: 5px;
      width: 90%;
      height: 100px;
      white-space: pre-wrap; /* Wrap long lines */
  }

  /* Button adjustments */
  .view-output, .back-button {
      margin-top: 10px;
      padding: 8px 12px;
      font-size: 14px;
      background-color: #084C7F;
      color: #fff;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      width: 80%;
      max-width: 150px;
  }

  .view-output:hover, .back-button:hover {
      background-color: #5bb949;
  }

  /* Back side */
  .flip-card-back {
      background-color: #084C7F;
      color: #fff;
      transform: rotateY(180deg);
  }

  .flip-card-back h3 {
      font-size: 16px;
      margin-bottom: 10px;
  }

  .flip-card-back div {
      font-size: 14px;
  }

  /* Flip effect */
  .flip-card.show-back .flip-card-inner {
      transform: rotateY(180deg);
  }


 
}

/* explore  */
@media screen and (320px <= width <= 480px) {
  
  .homepage-services-section {
    margin-top: 0;
    padding: 0;
    height: 500px;
    /* border: 1px solid red; */
  }
  .carousel-inner-services{
    width: 99%;
    height: 415px;
    margin: auto;
    position: relative;
    bottom: 35px;
    /* right: -50px; */
    /* border: 1px solid blue; */
    /* margin-right: 10px; */
    }
    .homepage-services-section .carousel-item{
    /* border: 2px solid green; */
    width: 100%;
   height: 480px;
   margin-top: 0;
   padding:0;
   /* margin: 0; */
   /* margin-right: 50px; */
  }
  .carousel-item>.row{

    display: flex;
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* border: 1px solid red; */
    height: 430px;
    width: 99%;
    /* margin: auto; */
    justify-content: center;
  }
  .carousel-item>.row>.col-md-3{
    /* border: 1px solid violet; */
    width:50%;
    height: 200px;  
    /* margin-right: 20px; */
  }
  .homepage-services-section .service-slide {
    font-size: 0.8rem;
    height: 190px;
   width: 100%;
   /* border: 2px solid darkgoldenrod; */
 
  }
  .homepage-services-section .service-icon{
    margin: 6px 0;
  }
  .homepage-services-section .service-icon>img{
    height: 3em;
}
  .homepage-services-section .homepage-services-heading {
    font-size: 0.7rem;
    margin-top: 5px;
    /* display: flex; */
    /* flex-wrap: wrap; */
  }
  .col-md-3 p{
    font-size: 0.8rem;
   margin-top: -15px; 
  }
  #carousel-item-services-4>.row{
    /* border: 2px solid blue; */
    width: 100%;
    height: 430px;
  }
 
  .homepage-services-section .carousel-control-prev,
.homepage-services-section .carousel-control-next {
  height: 30px;
  width: 30px;
}

#carousel-item-services-4>.row .col-md-3{
  /* border: 1px solid green; */
  width:50%;
  height: 200px;
}
#carousel-item-services-4>.row .col-md-3>.service-slide{
  width:100%;
}
}

/*  */

@media (max-width: 768px) {
  .navbar .logo{
    height: 40px;
    width: auto;
    position: relative;
    left: 0;
  }
  
  .nav-links {
      display: none; /* Hide links by default */
      flex-direction: column; /* Stack links vertically */
      position: absolute; /* Position dropdown */
      top: 70px; /* Space below navbar */
      left: 0;
      /* right: 0; */
      max-width: 150px;
      background-color: #2c3e50;
 /* border: 2px solid; */
 /* margin: 0; */
 /* padding: 0; */
 /* margin-bottom: 0; */
 gap: 20px;
 padding: 10px;
      z-index: 10; /* Ensure it’s above other content */
  }
  
.nav-links a {
  text-decoration: none;
  color:#e5f3ff;
  display: flex;
  align-items: center;
  /* font-family: inherit; */
  font-size: 0.9rem;
  transition: color 0.3s ease;
  /* border: 2px solid red; */
  /* padding: 0; */
}

  .nav-links.show {
      display: flex; /* Show links when toggled */
  }

  .navlinks span{
    color: white;
  }

  .nav-links .dropbtn{
    color: #e5f3ff;
    /* border: 2px solid white; */
font-size: 0.9rem;
  }
  .hamburger {
    margin-right: 20px;
      display: flex; /* Show hamburger icon on mobile */
  }
  
.dropbtn {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  margin-left: 50px;
  /* margin-bottom: 220px; */
}
.dropdown-content{
  background-color: #2c3e50;
  /* margin-left: 0; */
  /* margin-right: 10%; */
  min-width: 70px;
  position: absolute;
  /* color: ; */
  border: 2px solid #fff;
  /* margin-top: 0; */
  /* margin-right: 100px; */
  position: relative;
  /* top: 100px; */

padding: 0;
margin: 0;
/* margin-bottom: 0; */
}
.submenu-content{
  border: 2px solid #2c3e50;
  background-color: #1078bf;
color: #2c3e50;
min-width: fit-content;
/* padding: 0; */
position: relative;
/* right: -90px; */
left: 10px;
}
.cloud-devops-dropdown{
  /* background-color: rgb(209, 20, 20); */
  /* position: absolute; */
  /* right: 0; */
  /* z-index:; */
  margin-left: 160px;
  min-width: 100px;
  /* padding: 0 ; */

  border-left: 2px solid white;
}

.apple-dropdown{
  /* border: 2px solid violet; */
  color: black;
  /* position: absolute; */
  /* top: 40px; */
  /* left: 0; */
  display: block;
  background-color: #2c3e50;
  /* right: 100px; */
  z-index: 10;
  /* background-color: red; */
}
.cloud-devops-dropdown{
  /* border: 2px solid green; */
  /* position: absolute; */
  display: block;
  /* top: 120px; */
  /* left:0; */
  background-color: #2c3e50;
  color: #fff;
}
.cloud-devops-dd-mob{
  /* border:2px solid red; */
  /* background-color: red; */
  /* min-width: 300px; */
  position: relative;
  top: 80%;
  left: 2%;
  /* z-index: 2; */
}
}

 /* Testimonial Section Styling */
 #testimonial-section1 {
  text-align: center;
  padding: 40px 20px;
  background-color: #e5f3ff;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.9;
  letter-spacing: 2px;
}

#testimonial-section1 h2 {
  font-size: 1.8rem;
  color: #084C7F;
  margin-bottom: 20px;
  
}

.testimonial-slider1 {
  position: relative;
}

.testimonial-slide1 {
  display: none; /* Hide all slides by default */
  font-size: 1rem;
  color: #fff;
  padding: 20px;
  height: 200px;

  background: #2c3e50;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: fade1 1s ease-in-out; /* Fade animation */
}

.testimonial-slide1 p {
  font-style: italic;
  color: #f8f9fa;
}

.testimonial-slide1 h3 {
  color: #fff;
  font-weight: 600;
  margin-top: 15px;
}

/* Navigation Buttons */
.prev1, .next1 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #1078bf;
  border: none;
  background-color: transparent;
  padding: 10px;
  transition: color 0.3s;
}

.prev1:hover, .next1:hover {
  color: #007bff;
}

.prev1 {
  left: 10px;
}

.next1 {
  right: 10px;
}

/* Fade Animation */
@keyframes fade1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Styling for 350px - 480px */
@media (max-width: 480px) {
  #testimonial-section1 {
      padding: 20px;
  }

  #testimonial-section1 h2 {
      font-size: 1.5rem;
  }

  .testimonial-slide1 p {
      font-size: 0.95rem;
  }

  .prev1, .next1 {
      font-size: 1.5rem;
  }
}

/* popup */
/* Pop-up Form Styles */
.popup-form {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Background overlay */
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
}

.form-group {
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button[type="submit"] {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 4px;
}

button[type="submit"]:hover {
  background-color: #218838;
}

/* Hidden class to hide pop-up */
.hidden {
  display: none;
}

/* Add responsiveness */
/* @media (max-width: 768px) {
  .popup-content {
    width: 90%;
  }

} */
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .popup-content {
    width: 90%;
    font-size: 14px; /* Smaller text for mobile */
    padding: 15px; /* Reduced padding for smaller screens */
  
  }

  input, textarea {
    font-size: 14px; /* Adjust text size */
    padding: 8px; /* Smaller padding */
  }

  button[type="submit"] {
    font-size: 16px;
    padding: 10px 20px; /* Adjust button size for mobile */
  }

  .close-btn {
    font-size: 24px; /* Slightly smaller close button */
  }
}

/* For extra small screens like phones (less than 480px) */
@media (max-width: 480px) {
  .popup-content {
    margin: 10% ; /* Adjust margin for better centering */
      /* background-color: red; */
    height: 60vh;
    width: 70vw;
  }

  input, textarea {
    font-size: 12px; /* Smaller text for ultra-small screens */
  }

  button[type="submit"] {
    font-size: 14px; /* Adjust button font size */
    padding: 8px 16px; /* Compact button size */
  }
  /* .popup-form{
  
  } */
}