.mainheader {
            text-align: center;
        }

       .mainheader .h3 {
            color: indigo;
            
        }
		
		.mainheader h3 {
    transform: translateY(-50px);
    opacity: 0;
    animation: slideIn 1s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
		 

/* Main content styles */

.main-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

/* Left box styles */
.left-box {
  width: 48%;
  background-color: indigo; /* Changed to indigo */
  color: #fff; /* White text color */
  padding: 20px;
   box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); /* Add shadow effect */
   border-radius: 20px;
   animation: fadeIn 5s forwards; /* Apply fadeIn animation */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Start with opacity 0 */
  }
  to {
    opacity: 1; /* End with opacity 1 */
  }
}

.left-box h2 {
  color: gold; /* White text color for headings */
}

.left-box p {
  color: white; /* White text color for headings */
}

.left-box ul {
  list-style-type: square;
  padding-left: 20px;
   
}

.left-box strong{
	
	color:gold;
}

/* Right box styles */
.right-box {
  width: 48%;
  padding: 20px;
}

/* Service section styles */
.service {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 20px;
  color: #fff; /* White text color */
  background-color: indigo; /* Background color */
  backface-visibility: visible;
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
  perspective: 1000px; /* Add perspective for 3D effect */
 animation: moveUpDown 2s linear infinite alternate; /* Apply moveUpDown animation by default */
 border-radius: 20px;
 
}
 

.service:hover   {
  animation-play-state: paused; /* Pause animation on hover */
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0); /* Start with no translation */
  }
   
  100% {
    transform: translateY(-40px); /* Move up by 20px */
  }
}


.service h2 {
  margin-top: 0;
  color:gold;
}

.service p {
  margin: 0;
  color:white;
}
.service span{
	
	color:gold;
}
 
/* Icon Container Styles */
.icons-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place behind main content */
}

.icon {
    position: absolute;
    top: -50px; /* Start above the section */
    left: -50px; /* Start outside the section */
    width: 50px;
    height: 50px;
    background-color: #FF5F1F; /* Adjust as needed */
    border-radius: 50%;
    animation: fly 5s linear infinite;
}

/* Keyframe Animation */
@keyframes fly {
    0% {
        transform: translate(-50px, -50px); /* Start position */
        opacity: 0; /* Initially hidden */
    }
    100% {
        transform: translate(calc(100vw + 50px), calc(100vh + 50px)); /* End position */
        opacity: 1; /* Fully visible */
    }
}


/* Service section styles */
.bmcbottom {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 20px;
  color: #fff; /* White text color */
  background-color: indigo; /* Background color */
  backface-visibility: visible;
  transform-style: preserve-3d;
  perspective: 1000px;
  position: relative;
  perspective: 1000px; /* Add perspective for 3D effect */
 
 border-radius: 20px;
 
}

.bmcbottom p{
	
	color:gold;
}

.circle-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.circle {
  width: 250px;
  height: 250px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
 
  animation: pulse 2s infinite alternate; /* Apply pulse animation */
 
  background-size: cover; /* Ensure the image covers the circle */
  background-position: center; /* Center the image within the circle */
}

.circle-container h2{
text-align : center;
color:indigo;
}

.circle-container {
  text-align: center;
}
@keyframes pulse {
  0% {
    transform: scale(1); /* Start with normal size */
  }
  50% {
    transform: scale(1.1); /* Scale up to 110% halfway through */
  }
  100% {
    transform: scale(1); /* Return to normal size */
  }
}

.accordion {
    background-color: indigo;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    position: relative;
  }

  .active, .accordion:hover {
    background-color: grey;
  }

  .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  
  .panel p{
	  
	  color:indigo;
  }

  .arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    transition: transform 0.4s;
  }

  .active .arrow {
    transform: translateY(-50%) rotate(180deg);
  }
@media screen and (max-width: 768px) {
  .circle {
    width: 80px;
    height: 80px;
  }
  
}


/* Media query for responsiveness */
@media screen and (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .left-box, .right-box {
    width: 100%;
  }
}