body{
  font-family: Arial, sans-serif !important;
  user-select: none; 
}


.contact-details{
  justify-content: end;
}
.nav-sub-title{
  color: #ff6900 !important;
}
.drop-menu {
  display: none; 
  background-color: #1B1F44; 
  position: absolute; 
  top: 100%; 
  right: -325px;
  width: auto;
  padding: 20px; 
  box-sizing: border-box;
  z-index: 1000;
  border-radius: 8px; 
}
.mobile-dropdown{
  display: none;
}

@media  (max-width:768px){
  .mobile-dropdown{
    display: none;
  }
}
/* Show dropdown on hover */
.nav-item.dropdown:hover .drop-menu {
  display: block; 
}

/* Services row */
.services-row {
  display: flex; 
  justify-content: space-around; 
  max-width: 100%; 
  margin: 0;
  gap: 5px; 
}

.service-column {
  flex: 1; 
  padding: 5px; 
  min-width: 200px;
}

/* Style for the sub-services */
.sub-services {
  margin-top: 10px; 
}

.sub-services .dropdown-item {
  padding-left: 20px; 
  margin-bottom: 10px; 
}

/* Adjust dropdown item styles as needed */
.dropdown-item {
  color: white; 
}

.dropdown-item:hover {
  color: #ff6900 !important;
}

@media screen and (min-width:425px) and (max-width:600px) {
  .navbar-toggler{
    margin-left: 148% !important;
  }
}
@media screen and (min-width:600px) and (max-width:768px) {
  .navbar-toggler{
    margin-left: 707% !important;
    
  }
  @media screen and (min-width:320px)and(max-width:768px){
    .top-navbar{
      display: none !important;
    }
  }
}

.navbar-toggler{
  background-color: white;
}
.nv-icon{
  color: white;

}

/* added nav end */
#return-to-top {
  position: fixed;
  bottom: 0%; 
  right: 0%;
  width: 100px;  
  z-index: 1000;
  display: none;  
  cursor: pointer;
  animation: return 2s ease-in-out infinite;
}
#return-to-top{
  width: 100px;
  height: 100px;
}

@keyframes return {
  0% {
    transform: translateY(0) rotate(0deg); 
  }
  30% {
    transform: translateY(80px); 
  }
 
  100% {
    transform: translateY(0) rotate(0deg); 
}
}

/* WhatsApp Button Style */
#whatsapp-button {
  position: fixed;
  bottom: 0%;  
  left: 0%;
  width: 100px; 
  z-index: 1000;
  cursor: pointer;
}
#whatsapp-button img{
  width: 120px;
  height: 120px;
  animation: whatsapp 2s ease-in-out infinite;

}
@keyframes whatsapp {
  0% {
    transform: translateY(0) rotate(0deg); 
  }
  30% {
    transform: translateY(10px); 
  }
 
  100% {
    transform: translateY(0) rotate(0deg); 
}
}

/* topnavbar */
.top-navbar {
  background-color:#1b1f44;

  width: 100%;
  height: 42px;
  overflow: hidden;
}

.top-navbar .icons {
overflow: hidden;
  margin-left: 40px;
  /* display: flex;  */
  height: 100%;
  justify-content: start;
}

.top-navbar .icons li {
  display: inline-block;
  text-align: center;
}
.mail1{
  margin-top:5px;
}
.top-navbar .icons li a {
  text-decoration: none;
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
 margin-top: 3px;
  margin-left: 2px;
 

}

.top-navbar .icons i {
  color: #ff6900;
  background-color: white;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  vertical-align: middle;
 

}
.top-navbar .icons .fa-facebook:hover{
  background-color: #1877F2;
  color:white;
}
.top-navbar .icons .fa-x-twitter:hover{
  background-color:#000000;
  color:white;
}
.top-navbar .icons .fa-youtube:hover{
  background-color:#ff0000;
  color:white;
}
.top-navbar .icons .fa-pinterest:hover{
  background-color:#e60023;
  color:white;
}
.top-navbar .icons .fa-instagram:hover{
  background-color: #D62976;
  color:white;
}
.top-navbar .icons .fa-linkedin:hover{
  background-color: #0a66c2;
  color:white;
}


.top-navbar .contact-details{
  height: 100%;
  display: flex;
  /* margin-left: 300px; */
  margin-top: 3px;
  font-weight: 500;
  overflow: hidden;
  margin-right: 50px;
}


.top-navbar .contact-details i {
  color:#1B1F44;
  background-color: white;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  vertical-align: middle;
  margin-right: 10px;
}
.top-navbar .contact-details .fa-phone:hover{
  background-color: #4CAF50;
  color:white;
}
.top-navbar .contact-details .fa-envelope:hover{
  background-color: #007BFF;
  color:white;
}
@media (max-width: 1320px) {
  .top-navbar{
    display:none!important;
  }
}

/* Navbar */
.navbar {
  background-color: #ff6900;
  width: 100%;
  height: 100px;
  color: white;
  padding: 0;
/* overflow: hidden; */
  align-items: start !important;
  position:sticky;

}
.navbar-nav {
  display: flex;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column; /* Stack the icon on top and text below */
  align-items: center; /* Center the content horizontally */
  justify-content: center;
  /* margin-right: 20px; */
  padding: 5px 0; /* Add some padding to the top and bottom */
}


.nav-item i {
  font-weight: 600;
  margin-bottom: 5px; /* Add space between icon and text */
  font-size: 1.5rem;
  margin-left: 20px;
}

.nav-item a i  {
 color:white
}


.navbar-toggler {
  border: 2px solid white !important;
  margin-right: 15px;
  padding: 5px 10px;
  background: transparent;
  color: white;
}

.navbar-toggler-icon {
  font-size: 1.5rem;
  color: white;
  display: inline-block;
}

 .navbar button:hover {
  background-color:transparent!important;
  color: #fff;
  border-color:transparent!important;
  outline: none;
}

/* Make sure the toggler icon aligns properly on smaller screens */

@media (max-width: 768px) {
  .navbar-toggler {
      margin: 0 auto;
      right: 0;
      position: relative;
      display: flex;
      align-items: center;
  }

  
  .navbar-toggler-icon {
      margin-left: auto;
      margin-right: auto;
  }
}

/* Responsive styles for medium screens */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar-toggler {
     
    margin-left: 3px!important;
}

.navbar-toggler-icon {
    margin: 0 auto!important;
}
}


@media (min-width: 600px) and (max-width: 768px) {
  .navbar-toggler {
     
      margin-left: 3px!important;
  }
  
  .navbar-toggler-icon {
      margin: 0 auto!important;
  }
}


/* Navbar Container */

.navbar-brand {
  position: relative;
  background-color: white;
  margin-top: -3%;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);

}




@media (max-width:768px){
  .navbar-brand {
    height: 125% !important;
    margin-top: -4% !important;
}
.navbar img {
  /* width: 200px; */
  height: 80%;
  /* object-fit: cover; */
  padding: 3%;
  margin-top: 10%;
}

  }

  .navbar img {
    width: 270px;
    height: 91px;
    /* object-fit: cover; */
    padding: 8%;
}


.navbar-nav .nav-link {
  color: white;
  text-decoration: none;
  border-radius: 20px;
  padding: 10px;
  margin-left: 20px;
  font-weight: 550;
}

.navbar-nav .nav-link:hover {
  background-color: #ff6900;
  color: white;
}

.navbar-nav .nav-link.active {
  background-color: #ff6900;
  color: white !important;
}


/* Sub-navbar styles */
.subnavbar {
  background-color:#1B1F44;
  padding: 10px 0;
}

.subnavbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.subnavbar a {
  color: white;
  text-decoration: none;
}

.subnavbar a:hover {
  color: #ff6900;
}
.subnavbar li:after{
  content:'|';
  display:inline-block;
  color: #ff6900;
  vertical-align:middle;
  margin-left: 20px;
}
.subnavbar li:last-child:after {
   display:none;
}
#navbarNavDropdown{
  margin-left: auto !important;
}
.navbar-nav .nav-link:hover{
  color:#1B1F44;
}
.navbar-nav  i:hover{
  color:#1B1F44;
}

 /* Responsive Styles */
@media screen and (min-width:768px) and (max-width:1024px){
  .dropdown-menu{
    display: none;
  }
    .mobile-dropdown {
    display: block; 
  }
} 
@media (max-width: 768px) {
  .navbar ul {
    display: none; 
  }

  .mobile-dropdown {
    display: block; 
  }

  .dropdown-menu {
    right: 0; 
    width: 100%; 
    /* max-width: 90%; */
    --bs-dropdown-bg:#ff6900  !important;
    overflow: hidden;
    margin-top: 500px;
  }

  .navbar-brand {
    background-color: white;
    padding: 0;
    left: 0;
  }

  .navbar img {
    width: 200px;
    height: auto;
    object-fit: cover;
  }
}
/* dropdown */
.dropdown-menu .dropdown-item {
  color: white;
  background-color: #ff6900;
  text-decoration: none;
  padding: 10px;
  /* margin-left: 20px; */
  text-decoration: none;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #ff6900;
  color: white;
}

.dropdown-menu .dropdown-item.active {
  background-color: #ff6900;
  color: white !important;
}

.sub-services,
.sub-sub-services {
  list-style: none;
  padding-left: 0;
}

/* Dropdown item styles */
.dropdown-menu .dropdown-item {
  color: white;
  background-color: #ff6900; 
  text-decoration: none; 
}
.dropdown-menu .dropdown-item:hover {
  background-color: #ff6900;
  color: white !important; 
}
.dropdown-menu .dropdown-item:link {
 
  color: white !important; 
}
.dropdown-menu .dropdown-item:active {
  background-color: #ff6900; 
  color: white !important; 
}
.dropdown-menu .dropdown-item:focus {
  
  color: white !important; /* Keep text color on hover */
}
/* Sub-services */
.sub-services .dropdown-item,
.sub-sub-services .dropdown-item {
  padding: 8px 16px; /* Adjust padding for better spacing */
}

/* Sub-sub-services */
.sub-sub-services {
  padding-left: 20px; /* Indent further for sub-sub-menu */
}

/* Optional: Remove color change on active or clicked item */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: #ff6900; /* Keep background color same */
  color: white; /* Keep text color same */
}


/* banner-section */
.bannersection {
  width: 100%;
  height: auto;
  background-image: url(../images/Website\ Banner\ H8.webp);
  background-size:cover;
  background-position: center;
  position: relative;
  color: white;
  overflow:hidden;
}

.bannersection img {
  position: absolute;
  object-fit: contain;
}

.img1 {
  left: 0;
  bottom: 0;
  width: 300px;
  z-index:5;
  height: auto;
}

.img2 {
  right: 2%;
  bottom: 0;
  width: 15%;
  z-index:5;
  animation: wifi 2s ease-in-out infinite;


}
@keyframes wifi {
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation at start */
  }
  30% {
    transform: translateY(50px); /* Move up and tilt back slightly */
  }
 
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position and rotation */
}
}


.img3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1; /* Set opacity to reduce visibility */
  z-index: 1; /* Keep it behind other content */
  top: 0;
  left: 0;
  animation: waveDots 2s linear infinite; /* Use ease-in-out for smoothness */
}

/* Smooth wave-like animation for the dot image */
@keyframes waveDots {
  from {
      transform: translateY(0px);
  }
  to {
      transform: translateY(-30px);
  }
}


.img4 {
  right: 30%;
  bottom: 0;
  width: 10%;
  z-index:5;
  animation: rocketLaunch 2s ease-in-out infinite;
}
/* Rocket launch animation */

@keyframes rocketLaunch {
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation at start */
  }
  30% {
    transform: translateY(80px); /* Move up and tilt back slightly */
  }
 
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position and rotation */
}
}

.img5 {
  right: 0;
  top: 10%;
  width: 30%;
  z-index:5;
  animation: laptop 10s ease-in-out infinite;


}
@keyframes laptop{
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation at start */
  }
  30% {
    transform: translateY(50px); /* Move up and tilt back slightly */
  }
 
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position and rotation */
}
}
.img6 {
  right: 0;
  top: 5%;
  width: 10%;
  z-index:5;
  animation: code 2s ease-in-out infinite;


}
@keyframes code {
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation at start */
  }
  30% {
    transform: translateY(50px); /* Move up and tilt back slightly */
  }
 
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position and rotation */
}
}

.bannersection .content h1 {
  font-size: 45px;
  font-weight: 700;

  line-height: 1.3;
  
  z-index:5;

}

.bannersection .content p {
  font-size: 20px;
  margin-top: 10px;
  font-weight: 500;
 

  z-index:5;


}

.bannersection .banner-button {
  position: absolute !important;
  background-color: #ff6900  !important;
  color: #fff  !important;
  padding: 10px 10px  !important;
  border-radius: 10px  !important;
  font-size:25px  !important ;
  text-decoration: none  !important;
  font-weight: 400  !important;
  z-index:5  !important;
}

.bannersection .banner-button:hover {
  background-color: #1B1F44 !important;
}
.bannersection .content .banner-button i{
  color:white;
  animation: code 1s ease-in-out infinite;

}
@keyframes code {
  0% {
    transform: translateY(0) rotate(0deg); /* No rotation at start */
  }
  30% {
    transform: translateY(-10px); /* Move up and tilt back slightly */
  }
 
  100% {
    transform: translateY(0) rotate(0deg); /* Return to original position and rotation */
}
}


/* Responsive Adjustments for Mobile */
/* For screens with a width of 320px to 479px */
@media (min-width: 320px) and (max-width: 479px) {
  .bannersection {
    /* padding: 10px 0; */
    height:500px;
  }
.img1{
  display: none;
}
   .img2, .img3, .img4, .img5, .img6 {
    width: 60%;
    position: static;
    margin: 5px auto;
  }

  .bannersection .content h1 {
    font-size: 20px;
    margin-left: 10px;
  }

  .bannersection .content p {
    font-size: 14px;
    margin-left: 10px;
  }

 

  /* Hide extra images to declutter */
  .img1, .img4, .img5 {
    /* display: none; */
  }
}

/* For screens with a width of 480px to 599px */
@media (min-width: 480px) and (max-width: 599px) {
  .bannersection {
    /* padding: 20px 0; */
    height:500px;

  }

  .img1, .img2, .img3, .img4, .img5, .img6 {
    width: 50%;
    margin: 10px auto;
  }

  .bannersection .content h1 {
    font-size: 25px;
    margin-left: 20px;
  }

  .bannersection .content p {
    font-size: 18px;
    margin-left: 20px;
  }

 

  /* Show only selective images */
  .img1, .img4 {
    display:none;
  }
}

/* For screens with a width of 600px to 767px */
@media (min-width: 600px) and (max-width: 767px) {
  .bannersection {
    padding: 30px 0;
    height:500px;


  }

  .img1, .img2, .img3, .img4, .img5, .img6 {
    width: 40%;
    margin: 15px auto;
  }

  .bannersection .content h1 {
    font-size: 30px;
    margin-left: 30px;
  }

  .bannersection .content p {
    font-size: 20px;
    margin-left: 30px;
  }

 

  /* Show only essential images */
  .img1 {
    /* display: none; */
  }
}



/* .about-section */
.about-section {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 50px;
}

.about-section .about-content {
  margin-top: 40px;
}

.about-section .about-content h2 {
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: 600;
}

.about-section .about-content h2 span {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: 600;
}

.about-section .about-content p {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align:justify !important;
}

.about-section .list1 {
  /* margin-left: 20px; */
  height:100%;
  width:100%;
}

.about-section .list1 li {
  display: inline-block;
  padding: 10px 20px;
  border: 2px dotted #ff6900;
  border-radius: 5px;
  cursor: pointer;
  /* text-align: center; */
  transition: background-color 0.3s ease;
  height:100%;
  width:auto;
 
}

.about-section .list1 li a {
  color: #1B1F44;
  font-size: 20px;
}

.about-section .list1 li i {
  color: #ff6900;
}

/* Video section styling */
.about-section .video1 {
overflow: hidden;
  justify-content: center;
  align-items: center;
}

.video-element {
  width: 100%;
  min-height: 400px; /* Adjust as needed */
  height: 100%;
  object-fit: cover;

}

@media (max-width: 768px) {
  .video-element {
    min-height: 300px; /* Adjust for smaller screens */
  }
}

@media (max-width: 576px) {
  .video-element {
    min-height: 250px; /* Further adjust for mobile devices */
  }
}












/* who we are */
.content-section {
  position: relative; 
  overflow: hidden;
  background: linear-gradient(to right, #ff6900 50%, #292F46 50%);
  position: relative;
  /* padding-bottom: 100px; */
  display:flex;

}
.content-section .card img{
width:80px;
height:80px;
align-items: center;
object-fit: cover;
}

.content-section .card{
height:100%;
}
.rocket {
  position: absolute;
  bottom: -100px; /* Start below the visible area */
  left: 0; /* Start from the left */
  animation: fly 10s linear infinite;  /* Animation */
  z-index: 1;
}
@media (max-width: 375px) {
.content-section .rocket{
  height:190px !important;
  width:150px !important;
  object-fit: cover;
  animation: fly 40s linear infinite;  /* Animation */
}
}
@keyframes fly {
  0% {
    bottom: 0; /* Start at the bottom */
    left: 0; /* Start at the left */
    transform: rotate(0deg); /* No rotation */
  }
  12.5% {
    bottom: 100%; /* Move to the top of the section */
    left: calc(100% - 50px); /* Move to the right */
    transform: rotate(14.305deg); 
  }
  25% {
    bottom: 0; /* Move back down */
    left: calc(100% - 100px); 
    transform: rotate(-30deg); /* Rotate negatively */
  }
  37.5% {
    bottom: 100%; /* Move to the top again */
    left: 0; /* Move back to the left */
    transform: rotate(-90deg); /* Rotate more negatively */
  }
  50% {
    bottom: 0; /* Return to bottom */
    left: 0; /* Stay at the left */
    transform: rotate(-14.305deg); /* Return to slight rotation */
  }
 
 


}

@media (max-width: 375px) {
  .content-section{
    width: 100%;
    height: auto;
    overflow: hidden ;
    background-color:#ff6900;
   /* padding: 10% !important; */
  
   
  }

  .content-section img{
    width: 100%;
    height: auto;
    
  }
}

@media (min-width:320px) and (max-width:1023px){
  .rocket{
    display:none !important;
}
}






.testimonials {
  background-color: #f2f2f2; /* Light grey background */
  padding: 50px; /* Padding around the section */
  text-align: center; /* Center align the content */
}

.testimonials h2 {
  font-size: 2.5rem;
  color: #ff6900; /* Orange color */
  font-family: 'Jost', Arial, sans-serif;
  margin-bottom: 40px; /* Space below the heading */
}

/* Style for the Elfsight container to match the cards */
.elfsight-app-fe1cd1bc-23bc-4f64-8bc3-ed368e637f7f {
  display: flex;
  justify-content: center;
}

.elfsight-app-fe1cd1bc-23bc-4f64-8bc3-ed368e637f7f .eapps-widget {
  max-width: 1000px; /* Set a maximum width */
}

.eapps-widget .eapps-review {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin: 10px;
  text-align: center;
  font-family: 'Jost', Arial, sans-serif;
}

.eapps-review__title {
  color: #333;
  font-size: 1.5rem;
}

.eapps-review__text {
  font-size: 1.2rem;
  color: #666;
}

.eapps-review__rating {
  color: #FFDD57; /* Yellow color for the stars */
  font-size: 1.8rem;
  margin-top: 15px;
}

.eapps-review__author {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1B1F44;
}

.eapps-review__author-details {
  font-size: 1rem;
  color: #666;
}

/* ...............................footer section......................................... */
.footer-section{
  width:100%;
  height:auto; 
  overflow: hidden;
  background-color: #1B1F44;
  padding:0;
}
.footer-section .footer-logo{
  width:100%;
  height:100%;
  object-fit: cover;
  padding-top: 40px;
  
}
.footer-section .aboutus h3{
  color:#ff6900;
  margin-top: 30px;
}
.footer-section .aboutus p{
  color:white;
  font-size: 18px;
  text-align: left;
}

.footer-section .aboutus .icons {
  overflow: hidden;
    /* margin-left: 50px; */
    /* display: flex;  */
    height: 100%;
    justify-content: start;
    margin-top: 30px;

  }
  
  .footer-section .aboutus .icons li {
    display: inline-block;
    text-align: center;
  
  
  }
  
  .footer-section .aboutus .icons li a {
    text-decoration: none;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin-top: 3px;
    /* margin-left: 10px; */
   
  
  }
  
  .footer-section .aboutus .icons i {
    color: #ff6900;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    vertical-align: middle;
   
  
  }
  .footer-section .aboutus .icons .fa-facebook:hover{
    background-color: #1877F2;
    color:white;
  }
  .footer-section .aboutus .icons .fa-x-twitter:hover{
    background-color:#000000;
    color:white;
  }
  .footer-section .aboutus .icons .fa-instagram:hover{
    background-color: #D62976;
    color:white;
  }
  .footer-section .aboutus .icons .fa-linkedin:hover{
    background-color: #0a66c2;
    color:white;
  }
  .footer-section .aboutus .icons .fa-pinterest:hover{
    background-color: red;
    color:white;
  }
  .footer-section .aboutus .icons .fa-youtube:hover{
    background-color: red;
    color:white;
  }

  
.footer-section .quicklinks h3{
  color:#ff6900;
  margin-top: 30px;

}
.footer-section .quicklinks p{
  color:white;
  font-size: 20px;

}
.footer-section .quicklinks ul li a{
  color:white;
  font-size: 20px;
}
.footer-section .quicklinks ul li a:hover{
  color:#ff6900;
  font-size: 20px;
}
.footer-section .quicklinks ul li {
  color:white;
  padding:5px;
}
.footer-section .ourservices h3{
  color:#ff6900;
  margin-top: 30px;

}
.footer-section .ourservices ul li a{
  color:white;
  font-size: 20px;
}
.footer-section .ourservices  ul li a:hover{
  color:#ff6900;
  font-size: 20px;
}
.footer-section .ourservices ul li {
  color:white;
  padding:5px;

}
.footer-section .contactus h3{
  color:#ff6900;
  margin-top: 30px;

}
.footer-section .contactus h5{
  color:#ff6900;
  text-decoration: underline #ff6900;

}
.footer-section .contactus p{
  color:white;
  text-decoration: none;
  font-size: 20px;
  /* padding:2px; */



}
.footer-section .contactus p a{
  color:white;
  text-decoration: none;
  font-size: 20px;
}
.footer-section .contactus p a:hover{
  color:#ff6900;
  text-decoration: none;
  font-size: 20px;
}
.footer-section .contactus h6{
    color:white;
    font-size: 20px;
}
.footer-section .contactus h6:hover{
  color:#ff6900;
  font-size: 20px;
}

@media (max-width: 576px) {
  .footer-section .footer-logo {
    width:100%;
  height:100%;
  object-fit: cover;
  }
}

 #color-change{
  color: black !important;
  cursor:pointer;
  font-weight: bolder;
}
#color-change a{
  text-decoration: none;
  color: black !important;

}


/* content-section */

.content-section{
  width:100%;
  height: auto; 
  overflow: hidden;
  /* padding: 80px; */
 }
 .content-section h2{
   color: white;
   font-size:2.5rem;
   font-weight: 600;
   text-align: center;
 }
 .content-section h6{
   color: white;
 font-size: 2.0rem;
 text-align: center;
 margin-top: 20px;
 font-weight: 500;
 word-spacing: 2px;
 
 }
 .content-section .card{
  text-align: center;
 padding: 10px;
  height:100%;
 
 }
 .content-section .card  h5{
   font-size: 1.8rem;
   font-weight: bold;
   margin: 10px 0;
   color: #1B1F44 !important;
 }
 .content-section .card p{
   font-size: 1.2rem;
   font-weight: 500;
   color: #1B1F44 !important;
   text-align: justify; 
 }
 .content-section .card .btn{
   border: 2px solid #1B1F44;
   color:#1B1F44;
   font-weight: 600;

 }
 .content-section .card .btn:hover{
   border: 2px solid #1B1F44;
   background-color:#1B1F44;
   font-weight: 600;
   color:white;
   position: relative !important;
   z-index: 1 !important;
 
 }
 
 
 .content-section .card{
   position: relative;
   overflow: hidden;
   border: 1px solid #ccc;
   padding: 20px;
   border-radius: 10px;
   transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
   height:100%;
   cursor: pointer;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
 .content-section .card .circle {
   position: absolute;
   top: 0;
   right: 0;
   width: 100px;
   height: 100px;
   /* background: radial-gradient(circle at 30% 107%, #e5782c 0%, #e5782c 5%, #fdf497  45%, #1B1F44  60%, #fdf497 90%); */
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 5%, #fdf497 45%, #d6249f 60%, #285aeb 90%);
 
   border-radius: 50%;
   transform: translate(50%, -50%) scale(1);
   transition: all 1s ease;
   z-index: 0;
 }
 
 .content-section .card  img,
 .content-section .card h5,
 .content-section .card p ,
 .content-section .card .btn
 {
   position: relative !important;
   z-index: 1 !important;
 }
 
 
 
 
 
 /* Hover Effects for Social Media Services Cards */
 .content-section .card:hover .circle {
   width: 300%;
   height: 300%;
   border-radius: 15px;
   /* The background will be overridden by specific platform hover */
 }
 
 .content-section .card:hover h5,
 .content-section .card:hover p {
   color: black !important;
 }
 
 .content-section .card:hover img {
   transform: scale(1.1);
   z-index:1000;
   color:white;
 }
 
 
 
 
 
 
 
 
 
 
 /* portfolio */
 .portfolio {
   text-align: center;
   background-image: url(../images/portfolio\ frame.webp);
 }
 .portfolio h4 {
   color: #ff6900;
   margin-bottom: 30px;
   padding:40px;
   font-size: 2.5rem;
 
 }
 /* Default styles for all tabs */
 #website-design-tab, #logo-design-tab,#banner-design-tab, #poster-design-tab {
   color: white;
   border-radius: 20px;
   background-color: transparent; /* Default background for non-active tabs */
   transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
 
 }
 
 /* Hover effects */
 #website-design-tab:hover, #logo-design-tab:hover, #banner-design-tab:hover, #poster-design-tab:hover {
   background-color: #ff6900;
   color: white;
   border-radius: 20px;
 }
 
 /* Active tab styles */
 #website-design-tab.active, #logo-design-tab.active, #banner-design-tab.active, #poster-design-tab.active {
   background-color: #ff6900;
   color: white;
   border-radius: 20px;
   
 }
 
 
 
 .carousel-item img {
   border-radius: 10px;
   width: auto;
   height: auto;
  object-fit: cover;
 }
 .carousel-indicators [data-bs-target] {
   background-color: #ff6900;
 }
 
 #website-design  #carouselWebsiteDesign{
   padding:50px;
 }
 #logo-design  #carouselLogoDesign{
   padding:50px;
 }
 #poster-design #carouselPosterDesign{
   padding:50px;
 
 }
 #banner-design #carouselbannerDesign{
   padding:50px;
 
 }
 #portfolioTabs {
   width: 50%;
   padding: 0;
   margin: 0 auto;
   display: inline-block;
   background-color: #1B1F44;
   border-radius: 37px;
 
 }
 
 
 /* Individual nav items */
 #portfolioTabs .nav-item {
   margin:0;
   padding: 0;
 
 }
 
 #portfolioTabs button:focus, button:active, button:hover {
   background-color: #1b1f44 !important;
   color: #fff !important;
   border-color: #1b1f44 !important;
   outline: none;
 }
 #portfolioTabs .btn{
   color: #ff6900;
   background-color: #ff6900;
 }
 /* Spacing for buttons */
 #portfolioTabs .nav-link {
   margin: 0 10px;
 }
 @media (max-width: 768px) {
   #portfolioTabs {
     width: 50%;
     padding: 0;
     margin: 0 auto;
     display: inline-block;
     background-color: #1B1F44;
     border-radius: 37px;
    
   }
   
   
   /* Individual nav items */
   #portfolioTabs .nav-item {
     margin:0;
     padding: 0;
     
   }
 }
 /* Customize carousel control icons */
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
   background-color: #ff6900; /* Orange background */
   border-radius: 50%; /* Circular shape */
   width: 50px; /* Adjust width for circle */
   height: 50px; /* Adjust height for circle */
   background-size: 50%, 50%; /* Resize the default icon */
 }
 .portfolio .tab-content .btn1{
   border: 2px solid #ff6900;
   color:#ff6900;
   font-weight: 600;
   border-radius: 10px;
   background-color: white;
   
 }
 
 .portfolio .tab-content .btn1:hover{
   border: 2px solid #ff6900;
   background-color:#ff6900;
   font-weight: 600;
   color:white;
 
 }
 .portfolio  .btn{
   border: 2px solid #ff6900;
   background-color:#ff6900;
   font-weight: 600;
   color:white;
 
 }
 
 #portfolio2 .card  img{
 width: 100% !important;
 height: 100% !important;
 }
 
 #portfolio2 .card{
   width: 100%;
   height:100%;
 }
 #portfolio2 .card{
   perspective: 1000px;
   transition: transform 0.6s ease; 
 }
 #portfolio2 .card img{
   transition: transform 0.3s ease;
 
 }
 #portfolio2 .card:hover {
   transform: rotateY(180deg); 
   box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
 }
 #portfolio2 .card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  
   border-radius: 10px;
   backface-visibility: hidden; 
   z-index: 1;
 }
 
 #portfolio2 .card:hover::before {
   transform: rotateY(180deg); 
 }
 
 #carouselWebsiteDesign .card{
   height: 100%;
 }
 
 .carousel-indicators button {
   background-color: #000; /* Color of the dots */
   border-radius: 50%; /* Make them round */
   width: 15px; /* Width of the dot */
   height: 15px; /* Height of the dot */
   opacity: 0.5; /* Opacity of inactive dots */
   position: absolute;
   z-index: 4;
 }
 
 .carousel-indicators button.active {
   opacity: 1; /* Fully visible for active dot */
   background-color: #007bff; /* Color of the active dot */
 }
 
 @media (min-width:320px) and (max-width:768px){
   .about-section .about-content h2 {
     font-size: 2.0rem;
  
   }
   .content-section h2 {
     font-size: 2.0rem;
   
   }
   .content-section .card h5  {
     
     font-size: 1.5rem;
  
   }
  
   .content-section h6 {
   
     font-size: 1.5rem;
    
   }
 
 }
 
/* ................................about page...................................... */

/* About Section */
.about-banner {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-image: url(../images/About\ Us\ Page\ Background.webp);
  background-size: cover;
  position: relative;
  padding: 20px 0;
}

.about-banner h1 {
  text-align: center;
  color: white;
  font-weight: 800;
  font-size: 40px;
  margin-bottom: 20px;
}

.counter {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
}
.aboutimg1{
  width: 200px;
  height: 200px;
  margin-left: 50px;
 
}
.counter-item {
  text-align: center;
  color: white;
}

.counter-item img {
  width: 250px;
  height: 250px;
}

.counter-item .count1, .counter-item .count2 {
  font-size: 40px;
  font-weight: bold;
  display: block;
margin-top: -200px;
color: rgb(235, 177, 32)!important;
}

.counter-item p {
  font-size: 23px;
}
.counter-item .count1 {
  font-size: 42px;
}
.counter-item .count2 {
  font-size: 45px;
}


@media (max-width: 768px) {
  
  .counter {
    align-items: center;
  }
  .about-banner h1 {
    font-size: 35px; /* Reduce heading size */
  }

  .counter-item img {
    width: 200px; /* Adjust image size */
    height: 200px;
  }

  .counter-item .count1, .counter-item .count2 {
    font-size: 28px; /* Adjust counter text size */
    margin-top: -150px; /* Adjust margin for better positioning */
  }

  .counter-item p {
    font-size: 18px; /* Adjust paragraph text size */
  }

  .aboutimg1 {
    width: 200px; /* Adjust secondary image size */
    height: 200px;
  }
}

/* Media query for very small devices 320px and smaller */
@media (max-width: 576px) {
  .counter-item img {
    width: 150px; /* Further adjust image size for smaller screens */
    height: 150px;
  }

  .counter-item .count1, .counter-item .count2 {
    font-size: 24px; /* Further adjust counter text size */
    margin-top: -120px;
  }

  .counter-item p {
    font-size: 16px;
  }

  .aboutimg1 {
    width: 150px; /* Adjust secondary image size for smaller devices */
    height: 150px;
  }
}

/* Media query for devices between 320px and 768px */
@media (min-width: 320px) and (max-width: 768px) {
  .counter {
    flex-direction: column;          /* Keep items aligned horizontally */
  /* Space items evenly across the container */
    align-items: center;          /* Center items vertically */
    width: 100%;
  }

  .about-banner h1 {
    font-size: 30px;              /* Adjust the heading size */
    margin-bottom: 15px;          /* Reduce bottom margin */
  }

  .counter-item img {
    width: 173px;
    height: 147px;
  }

  .counter-item .count1, .counter-item .count2 {
    font-size: 24px;              /* Reduce the counter font size */
    margin-top: -110px;           /* Adjust margin for proper positioning */
  }

  .counter-item p {
    font-size: 16px;              /* Adjust paragraph text size */
  }

  .aboutimg1 {
    width: 120px;                 /* Adjust secondary image size */
    height: 120px;
    
  }

  .counter-item {
    margin: 0 10px;               /* Add horizontal spacing between items */
  }
}
@media (min-width: 576px) and (max-width:767px){
  .aboutimg1 {
  margin-left: 203px !important;
  }
}
@media (min-width: 320px) and (max-width:330px){
  .aboutimg1 {
  margin-left: 74px !important;
  }
}
@media (min-width: 331px) and (max-width:345px){
  .aboutimg1 {
  margin-left: 79px !important;
  }
}
@media (min-width: 346px) and (max-width:360px){
  .aboutimg1 {
  margin-left: 85px !important;
  }
}
@media (min-width: 361px) and (max-width:370px){
  .aboutimg1 {
  margin-left: 90px !important;
  }
}
@media (min-width: 371px) and (max-width:380px){
  .aboutimg1 {
  margin-left: 94px !important;
  }
}
@media (min-width: 381px) and (max-width:390px){
  .aboutimg1 {
  margin-left: 100px !important;
  }
}
@media (min-width: 391px) and (max-width:410px){
  .aboutimg1 {
  margin-left: 105px !important;
  }
}
@media (min-width: 411px) and (max-width:420px){
  .aboutimg1 {
  margin-left: 112px !important;
  }
}
@media (min-width: 421px) and (max-width:440px){
  .aboutimg1 {
  margin-left: 118px !important;
  }
}
@media (min-width: 441px) and (max-width:455px){
  .aboutimg1 {
  margin-left: 127px !important;
  }
}
@media (min-width: 456px) and (max-width:470px){
  .aboutimg1 {
  margin-left: 132px !important;
  }
}
@media (min-width: 471px) and (max-width:480px){
  .aboutimg1 {
  margin-left: 137px !important;
  }
}
@media (min-width: 481px) and (max-width:500px){
  .aboutimg1 {
  margin-left: 145px !important;
  }
}
@media (min-width: 501px) and (max-width:520px){
  .aboutimg1 {
  margin-left: 150px !important;
  }
}
@media (min-width: 521px) and (max-width:535px){
  .aboutimg1 {
  margin-left: 160px !important;
  }
}
@media (min-width: 536px) and (max-width:555px){
  .aboutimg1 {
  margin-left: 170px !important;
  }
}
@media (min-width: 556px) and (max-width:575px){
  .aboutimg1 {
  margin-left: 177px !important;
  }
}
@media (max-width: 425px) {
  .aboutimg1 {
  margin-left: 142px;
  }
}
@media (max-width: 375px) {
  .aboutimg1 {
  margin-left: 112px;
  }
}
@media (max-width: 320px) {
  .aboutimg1 {
  margin-left: 92px;
  }
}
.about-hero-section {
  background-image: url('path/to/hero-image');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  width:100%; 
}

.about-title {
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  margin-top:20px;

}
.about-content1 {
  background-color: #fff;
  
  overflow: hidden;
  width:100%;
}
.about-content1 h6 {
  font-size: 1.2rem;
  color: #adb8c3;
}
.about-content1 h4{
  font-size: 1.5rem;
  font-weight: 600;
}

.about-company-name {
  font-size: 3.0rem;
  color: #ff6900;
  font-weight: bold;
}

.about-person-name {
  font-size: 2.1rem;
  font-weight: bold;
  color: #1B1F44;
}

.about-description {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
  text-align:justify !important;
  
}

.about-person-image {
 
  /* width: 100%; */
 
  height: auto;
  /* margin-top: -100px; */
}


.about-solutions-section {
  background-color: #1B1F44;
}


.about-subheading {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff6900;
}
/* Styling for the solution cards */
.solution-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  /* text-align: center; */
  margin-bottom: 20px;
  height: 100%;
}
.solution-card h5 {
  background-color: #ff6900; /* Strong orange color for the header */
  color: white;
  padding: 15px;
  margin: 0; /* No margin for the heading */
  font-weight: bold;
  font-size: 1.8rem;
}
.solution-card p {
  padding: 20px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  margin: 0; /* No margin */
  text-align:center;
}
.solution-card button {
  background-color: white; /* White button background */
  color: #ff6900; /* Orange text color */
  border: 2px solid #ff6900; /* Orange border */
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 8px; /* Rounded button */
  margin-bottom: 30px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.solution-card button:hover {
  background-color: #ff6900; /* Orange background on hover */
  color: white; /* White text on hover */
}

.solution-card:hover {
  transform: translateY(-10px); /* Card moves slightly upwards on hover */
}

/* Layout for the section */
.about-solutions-section {
  background-color: #1B1F44; /* Dark background */
  padding: 50px 0;
}

.about-solutions-section h2 {
  color:#ff6900;
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-weight: bold;
}

.about-solutions-section h3 {
  font-size: 2.2rem;
  font-weight: 600;
}

.text-white {
  color: white;
}


.process-step {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 20px;
}
 
.process-step img {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.process-step h5 {
  font-size: 1.25rem;
  color: #ff6900;
}

/* Our Journey Section */
.our-journey-section {
  background-color: #f8f9fa;
  padding: 50px 0;
  overflow: hidden;
  width:100%;
}

.our-journey-section .section-title {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  
}

.our-journey-section .journey-description {
 
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align:justify !important;
}

/* Progress Bars */
.progress-bars {
  margin-bottom: 40px;
  overflow: hidden;
  width:100%;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

span {
  font-weight: bold;
  font-size: 1.2rem;
  color: #ff6900;
}

.progress-bar {
  width: 100%;
  background-color: #ddd !important;
  height: 10px;
  border-radius: 5px;
  margin: 0 10px;
  overflow: hidden;
}

.progress {
  background-color: #1B1F44 !important;
  height: 100%;
  border-radius: 5px !important;
  width: 0%; /* Start with 0% */
  transition: width 2s ease;
}

.progress-percent {
  font-weight: bold;
}


.progress-percent {
  font-weight: bold;
}








/*........... .faq-accordion.................. */
.faq-accordion {
  margin-top: 20px;
  overflow: hidden;
  width:100%;
  
}

.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
 
}

.accordion-button {
  width: 100% !important;
  background-color: #1B1F44 !important;
  color: white !important;
  padding: 15px !important;
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  transition: background-color 0.3s !important;
  position: relative !important;
}

.accordion-button:hover {
  background-color: #f1f1f1;
}

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid orange;
  border-bottom: 2px solid orange;
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 15px;
  color:black;
  background-color:whitesmoke;
  
}

.accordion-content p {
  margin: 10px 0;
  color:black;
  font-size: 18px;
  font-weight: 500;

}

.accordion-item.active .accordion-content {
  max-height: 200px; /* Adjust based on content length */
}

.accordion-item.active .arrow {
  transform: translateY(-50%) rotate(-135deg); /* Chevron up */
}



/*  .working-process-section */
.working-process-section {
  padding: 50px 0;
  text-align: center;
  overflow: hidden;
  width:100%;
}

.section-title {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

/* Container for hexagons and content */
.hexagon{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin: 0;
    overflow: hidden;
    width: 100%;


}
.hexagon-container {
  display: flex;
  gap: 50px;
  padding: 20px;
  justify-content: center;
  width:100%;
}

.hexagon-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.offset {
  margin-top: 80px; 
}

.hexagon-box {
  display: flex;
  align-items: center;
  gap: 10px; /* Reduced gap for mobile */
}

/* Align hexagon to the left for the first column */
.hexagon-column:first-child .hexagon-box {
  flex-direction: row-reverse;
}

/* Align hexagon to the right for the second column */
.hexagon-column.offset .hexagon-box {
  flex-direction: row;
}

.hexagon1, .hexagon2, .hexagon3, .hexagon4, .hexagon5 {
  position: relative;
  height: 200px;
  width: 200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon1::after, .hexagon2::after, .hexagon3::after, .hexagon4::after, .hexagon5::after { 
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: '';  

  clip-path: polygon(
      50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 
      50% 0%, 
      50% 10px,
      10px calc(25% + 10px * 0.49999999999999994), 10px calc(75% + 10px * -0.49999999999999994), 50% calc(100% - 10px), calc(100% - 10px) calc(75% + 10px * -0.49999999999999994), calc(100% - 10px) calc(25% + 10px * 0.49999999999999994), 50% 10px
  );
}

.hexagon1::after { background: rgb(238, 203, 4); }
.hexagon2::after { background: rgb(226, 89, 9); }
.hexagon3::after { background: rgb(204, 9, 230); }
.hexagon4::after { background: rgb(7, 29, 224); }
.hexagon5::after { background: rgb(7, 205, 240); }

.hexagon1 img, .hexagon2 img, .hexagon3 img, .hexagon4 img, .hexagon5 img {
  width: 40%;
  height: 40%;
  object-fit: cover;
  position: absolute;
  top: 30%;
  left: 30%;
}

.hex-content-box {
  flex: 1;
  text-align: center;
}

.step-number {
  color: #ff6900;
  font-size: 2rem;
  font-weight: bold;
}

.hex-content-box h3 {
  font-weight: bold;
  color: #1B1F44;
  margin-bottom: 10px;
}

.hex-content-box p {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify !important;
}
@media screen and (min-width:768px) and (max-width:1024px){
  .hex-content-box h3 {
    font-size: 12px;
    color: #1B1F44;
    margin-bottom: 10px;
  }
  .hex-arrow, .hex-arrow1 {
    width: 40px !important;
    height: 3px;
    background-color: black;
    position: relative;
  }
  .step-number {
    color: #ff6900;
    font-size: 1.5rem !important;
    font-weight: bold;
  }
}

/* Arrow Styles */
.hex-arrow, .hex-arrow1 {
  width: 80px;
  height: 3px;
  background-color: black;
  position: relative;
}

.hex-arrow::after {
  position: absolute;
  content: "  ";
  display: inline-block;
  left: -5px;
  top: -3px;
  width: 0; 
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;   
  border-right: 5px solid black;     
}

.hex-arrow span {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  color:#ff6900 ;
  font-weight: bold;
  font-size: 2rem;
}
.hex-arrow1::after {
  position: absolute;
  content: "  ";
  display: inline-block;
  right: -5px;
  top: -3px;
  width: 0; 
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;   
  border-left: 5px solid black;     
}

.hex-arrow1 span{
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  color:#ff6900 ;
  font-weight: bold;
  font-size: 2rem;
}

/* mobile-view-hexagon */

    .hexagon-container1 {
        display: flex;
        flex-direction: column; /* Change to column for mobile view */
        gap: 50px;
        padding: 20px;
        justify-content: center;
        align-items: center; /* Center items in the column */
    }

    .hexagon-box1 {
        display: flex;
        flex-direction: column; /* Stack content and hexagon vertically */
        align-items: center; /* Center items */
        gap: 10px; /* Space between content and hexagon */
    }

    .hexagon1, .hexagon2, .hexagon3, .hexagon4, .hexagon5 {
        position: relative;
        height: 200px;
        width: 200px;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .hexagon1::after, .hexagon2::after, .hexagon3::after, .hexagon4::after, .hexagon5::after { 
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';  
        clip-path: polygon(
            50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 
            50% 0%, 
            50% 10px,
            10px calc(25% + 10px * 0.49999999999999994), 10px calc(75% + 10px * -0.49999999999999994), 50% calc(100% - 10px), calc(100% - 10px) calc(75% + 10px * -0.49999999999999994), calc(100% - 10px) calc(25% + 10px * 0.49999999999999994), 50% 10px
        );
    }

    .hexagon1::after { background: rgb(238, 203, 4); }
    .hexagon2::after { background: rgb(226, 89, 9); }
    .hexagon3::after { background: rgb(204, 9, 230); }
    .hexagon4::after { background: rgb(7, 29, 224); }
    .hexagon5::after { background: rgb(7, 205, 240); }

    .hexagon1 img, .hexagon2 img, .hexagon3 img, .hexagon4 img, .hexagon5 img {
        width: 40%;
        height: 40%;
        object-fit: cover;
        position: absolute;
        top: 30%;
        left: 30%;
    }

    .content-box1 {
        text-align: center;
    }

    .step-number {
        color: #ff6900;
        font-size: 2rem;
        font-weight: bold;
    }

    .content-box1 h3 {
        font-weight: bold;
        color: #1B1F44;
        margin-bottom: 10px;
    }

    .content-box1 p {
        margin-top: 15px;
        font-size: 1.2rem;
        font-weight: 500;
        color: #1B1F44;
        text-align: justify !important;
    }

/*............................. hirepage ...............................*/




/* Header Section */
.hire-header h2 {
  color: #ff6900;
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-weight: bold;

}

.hire-header p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align:justify;
}

/* Hire Section */
.hire-hire-section h3 {
  color: #1B1F44;
  font-size: 1.5rem;
  font-weight: 600;
}

.hire-hire-section h6{
  color: #ff6900; /* Orange text color */  
  font-size: 2.0rem;
  font-weight: bold;
}
.hire-hire-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}
.hire-hire-section .btn {
  background-color: #ff6900;
  color: white;
}
.hire-hire-section button{
  background-color: white; /* White button background */
  color: #ff6900; /* Orange text color */
  border: 2px solid #ff6900; /* Orange border */
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 8px; /* Rounded button */
  margin-bottom: 30px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
display: flex;  
}
.hire-hire-section button:hover {
  background-color: #ff6900; /* Orange background on hover */
  color: white; /* White text on hover */
}
.hire-hire-section button a{
  text-decoration: none;
  color:#FF6900;
}
.hire-hire-section button:hover a{
  text-decoration: none;
  color:white;
}
.hire-header button {
  background-color: white; /* White button background */
  color: #ff6900; /* Orange text color */
  border: 2px solid #ff6900; /* Orange border */
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: bold;
  border-radius: 8px; /* Rounded button */
  margin-bottom: 30px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
display: flex;
}

.hire-header button:hover {
  background-color: #ff6900; /* Orange background on hover */
  color: white; /* White text on hover */
}

.hire-contact-form .btn {
  background-color: #ff6900;
}

.hire-contact-form label{
  font-size: 1.0rem;
font-weight: 500;
  color: #1B1F44;
}
.hire-contact-form h4{
  font-size: 1.8rem;
  text-align: center;
  font-weight: 600;
  color: #1B1F44;
}
.hire-contact-form .button-btn{
  /* margin-left: 41%; */
  background-color: #ff6900;
  color: white;
 
}



/* Technologies Section */
.hire-tech-section h5 {
  color: #ff6900; /* Orange text color */  
  font-size: 1.5rem;
  font-weight: bold;
}

.hire-tech-section p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}

.hire-tech-section .card {
  border: 1px solid #ddd; /* Light gray border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  height:100%
}

.hire-tech-section .card img{
  width:25%;
}

/* Backend Developer Section */
.hire-backend-section {
  background-color: #1B1F44;
  color: #fff;
  height:10% !important;
}

.hire-backend-section .card{
  height: 20% !important;
}

.hire-backend-section h3 {
  color: #ff6900;
  font-size: 2.0rem;
  font-weight: bold;
}

.hire-backend-section h5 {
  color: #1B1F44;
  font-size: 1.3rem;
  font-weight: 600;
}

.hire-backend-section p {
  color: white;
  font-size: 1.3rem;
  font-weight: 500;
}
.hire-backend-section .btn-outline-light {
  border-color: #ff6900;
  color: #ff6900;
}

.hire-backend-section .btn-outline-light:hover {
  background-color: #ff6900;
  color: #343a40;
}
.hire-backend-section .card img{
  width:50px;
}

/* Graphic Design Section */
.hire-graphic-design-section .card {
  border: 1px solid #ddd; 
  border-radius: 8px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
}

.hire-graphic-design-section .card img {
  max-width: 80px;
  margin-bottom: 1rem;
}

.hire-graphic-design-section h3 {
  color: #ff6900;
  font-size: 2.0rem;
  font-weight: bold;
}

.hire-graphic-design-section p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #1B1F44;
}

.hire-graphic-design-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.media-img{
  height: 53%;
  position: relative;
  z-index: 1;
  margin-left: 33%;
}
@media (max-width: 768px)  {
.media-img{
display:none;
}
}
@media (max-width: 1024px)  {
  .media-img{
  display:none;
  }
}
@media (max-width: 425px)  {
  .media-img{
  height: 80%;
   position: relative;
   z-index: 1;
   /* margin-left: -25%; */
  }
}
/*..................................... blog page........................................ */
/* blog banner start */
.blog-banner-section {
  width: auto;
  height: auto;
  overflow: hidden;


}
#categoryTab {
  width: 40%;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  background-color: #1B1F44;
  border-radius: 30px;
  display: flex;
  justify-content: space-evenly;
}
@media (min-width:320px) and (max-width:1024px){
  #categoryTab {
    width: 70%;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    background-color: #1B1F44;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
  }
}

#categoryTab .card {
  margin-bottom: 20px;
  
  
}

#categoryTab .nav-link {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; 
  color: white;
  border-radius: 50px;
 
}
.blog-card .card{
  height: 100%;
 
}

#categoryTab .nav-item{
  margin: 0;
  padding: 0;

}
.blog-card h5{
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;


}

.blog-card p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
}
.blog-card .btn {
 justify-content: center!important;
 align-items: center!important;
  text-align: center;
}

/* Hover state */
#categoryTab .nav-link:hover {
  color: white;
  background-color: #ff6900; 
}

/* Active tab state */
#categoryTab .nav-link.active {
  background-color: #ff6900 !important; 
  color: white !important; 
  border-radius: 20px;
}

/* Spacing between tabs */
#categoryTab .nav-link {
  margin: 0 5px;

}
#category1 .btn{
background-color: #ff6900;
color: white;
transition: all 0.3s ease, box-shadow 0.3s ease; 


}
#category2 .btn{
  background-color: #ff6900;
  color: white;
  transition: all 0.3s ease, box-shadow 0.3s ease; 
 

  }
  #category3 .btn{
    background-color: #ff6900;
    color: white;
    transition: all 0.3s ease, box-shadow 0.3s ease; 

    }
    
    #category1 .btn:hover,
    #category2 .btn:hover,
    #category3 .btn:hover {
      background-color: #1b1f44;
      color: #fff; 
      cursor: pointer; 
      transform: scale(1.1) translateY(-3px); 
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
      letter-spacing: 1px;
    }
    
    #category1 .btn:active, 
    #category2 .btn:active, 
    #category3 .btn:active {
      transform: scale(1) translateY(0); 
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }
    

/*............................ portfolio page.................................... */
#portfolioTab {
  width: 60%;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  background-color: rgba(27, 31, 68, 1);
  border-radius: 300px;
  display: flex;
  justify-content: space-evenly;
}

#portfolioTab .card {
  margin-bottom: 20px;
}

#portfolioTab .nav-link {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; 
  color: white;
  border-radius: 20px;

}

#portfolioTab .nav-item{
  margin: 0;
  padding: 0;
}

/* Hover state */
#portfolioTab .nav-link:hover {
  color: white;
  background-color: #ff6900; 
}

/* Active tab state */
#portfolioTab .nav-link.active {
  background-color: #ff6900 !important; 
  color: white !important; 
  border-radius: 20px;
}

/* Spacing between tabs */
#portfolioTab .nav-link {
  margin: 0 1px;
}

#portfolio1 .btn {
  background-color: white;
  color: #ff6900;
  border-color: #ff6900;
}
#portfolio1 .btn:hover {
  background-color: #ff6900;
  color: white;
}

#portfolioTabContent h4{
  font-size: 1.8rem;
  font-weight: bold;
  color: #1B1F44 !important;
  margin-top: 40px;
}
#portfolioTabContent h2{
  color: #ff6900;
  font-size: 2.5rem !important;
}
#portfolioTabContent p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
  text-align: justify;

}

@media (max-width: 768px) {
  #portfolioTab {
    width: 100%; 
    padding: 10px; 
    align-items: center; 
  }

  #portfolioTab .nav-link {
    width: 100%; 
    text-align: center; 
    margin-bottom: 10px; /
  }

  #portfolioTab .nav-link:hover {
    background-color: #ff6900; 
  }
}

@media (max-width: 576px) {
  #portfolioTab {
    width: 100%;
  
    border-radius: 50px;
  }

  #portfolioTab .nav-link {
    margin: 5px 0; 
    padding: 10px; 
  }

 

}

#portfolioTabContent #portfolio3{
  text-align: center;
  width: 100%;
  height:auto;
  overflow: hidden;
}
#portfolioTabContent #portfolio3 p{
  font-size: 18px;
  font-weight: 500;
}
/* Card image hover effect */
#portfolioTabContent #portfolio3 .card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on card images */
#portfolioTabContent #portfolio3 .card:hover img {
  transform: scale(1.05); 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}



#portfolioTabContent #portfolio4{
  text-align: center;
  width: 100%;
  height:auto;
  overflow: hidden;
}
#portfolioTabContent #portfolio4 p{
  font-size: 18px;
  font-weight: 500;
}
/* Card image hover effect */
#portfolioTabContent #portfolio4 .card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on card images */
#portfolioTabContent #portfolio4 .card:hover img {
  transform: scale(1.05); 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@media (min-width:320px) and (max-width:768px){
  #portfolioTabContent img{
    margin-top: 20%;
  }
  #portfolioTabContent h4{
    font-size: 1.5rem;
    font-weight: bold;
    color: #1B1F44 !important;
    margin-top: 40px;
  }
  #portfolioTabContent h2{
    color: #ff6900;
    font-size: 2.0rem !important;
  }
 
}






/*.............................. contact.................................... */
.contact-banner {
  width: 100%;
  height: 400px;
  background-image: url('../images/Website\ Background.webp');
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#changing-text{
  font-size: 50px;
  background-color: #ff6900;
  color:white;
}
.contact-banner .container {
  position: relative;
  text-align: center;
}

.contact-banner .contact-banner .row {
  position: relative;
  z-index: 5;
}

.contact-banner .contactimg1,
.contact-banner .contactimg2,
.contact-banner .contactimg3 {
  position: absolute;
  z-index: 5;
}

.contact-banner .contactimg1 {
  top: 30%;
  right: 10%;
  width: 30%;
}

.contact-banner .contactimg2 {
  bottom: 0;
  right: 0%;
  width: 20%;
}

.contact-banner .contactimg3 {
  top: 20%;
  left: 2%;
  width: 20% !important;
}
@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}

.contact-banner .contactimg2 {
  animation: fadeInSlide 5s ease-in-out forwards infinite;
}

.contact-banner .contactimg3 {
  animation: fadeInSlide 5s ease-in-out forwards infinite; 
}


.text-container {
  position: relative;
  z-index: 6;
}

.contact-banner h1 {
  font-size: 50px;
  margin-bottom: 20px;
  overflow: hidden;
}

.contact-banner button {
  border: none;
  padding: 10px 40px;
  background-color: #ff6900;
  border-radius: 10px;
  margin-top: 50px;
}

.contact-banner button a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}


/* Media Queries for Responsiveness */



@media (max-width: 575px) {
  .contact-banner {
    height: auto;
    padding: 20px;
  }

  .contact-banner h1 {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .contact-banner button {
    padding: 8px 25px;
  }

  .contact-banner button a {
    font-size: 16px;
  }
  .contact-banner .contactimg1{
  
    display:none;
  
  }
 
  .contact-banner .contactimg2,
  .contact-banner .contactimg3 {
    width: 25%; /* Smaller size for mobile images */
 
    display: block;
    margin: 0 auto;
  }
}

/* For devices from 576px to 767px (tablets) */
@media (min-width: 576px) and (max-width: 767px) {
  .contact-banner h1 {
    font-size: 30px;
  }

  .contact-banner button {
    padding: 10px 35px;
  }
  .contact-banner .contactimg1{
  
    display:none;
  
  }

  .contact-banner .contactimg2,
  .contact-banner .contactimg3 {
    width: 20%;
  }
}

/* For devices above 767px (desktop view) */
@media (max-width: 768px) {
  .contact-banner h1 {
    font-size: 35px;
  }

  .contact-banner button {
    padding: 10px 40px;
  }

  .contact-banner .contactimg1 {
  display:none;
  }

  .contact-banner .contactimg2 {
    bottom: 0;
    right: 0;
    width: 20%;
  }

  .contact-banner .contactimg3 {
    top: 20%;
    left: 2%;
    width: 20%;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .contact-banner h1 {
    font-size: 40px;
  }

  .contact-banner button {
    padding: 10px 40px;
  }

  .contact-banner .contactimg1 {
top:75%;
  }

  .contact-banner .contactimg2 {
    bottom: 0;
    right: 0;
    width: 20%;
  }

  .contact-banner .contactimg3 {
    top: 20%;
    left: 2%;
    width: 20%;
  }
}
@media (min-width: 1024px) and (max-width: 1440px) {
  .contact-banner h1 {
    font-size: 40px;
  }

  .contact-banner button {
    padding: 10px 40px;
  }

  .contact-banner .contactimg1 {
top:50%;
  }

  .contact-banner .contactimg2 {
    bottom: 0;
    right: 0;
    width: 20%;
  }

  .contact-banner .contactimg3 {
    top: 20%;
    left: 2%;
    width: 20%;
  }
}


.contact-contact-section {
  background: linear-gradient(to right, #ff6900 50%, #1B1F44 50%);
  overflow:hidden;
  width:100%;
  height:auto;
}


.contact-contact-section .sub-btn{
  background-color: #ff6900;
  color: white;
  justify-content: center !important;
  font-size:larger;
  /* font-weight: bold; */
  transition: all 0.3s ease, box-shadow 0.3s ease;

}
.contact-contact-section .sub-btn:hover {
  background-color: #e65c00; 
  color: #fff; 
  cursor: pointer; 
  transform: scale(1.1) translateY(-3px); 
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); 
  letter-spacing: 1px; 
}

.contact-contact-section .sub-btn:active {
  transform: scale(1) translateY(0); 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}
/* Adjust the card for smaller screens */
.contact-contact-section .contact-contact-info .card {
  background-color: #1B1F44;
  width: 100%;  
  margin-left: 0; 
  /* border-bottom-left-radius: 100px; */
  /* border-top-left-radius: 40px; */
 
}
.contact-contact-section .contact-contact-info h4{
  font-weight: 600;
}

.contact-contact-section .contact-contact-info p{
  text-align: center;
}

.contact-contact-section .contact-card {
  background-color:smokewhite;
  width: 100%;

}
.contact-contact-section label{
  font-size: 1.0rem;
font-weight: bold;
  color: #1B1F44; 

}
.contact-contact-section .form-control{
  background-color: smokewhite;
  border: black 1px solid;
}
.contact-contact-section .icons {
  overflow: hidden;
    /* margin-left: 50px; */
    display: flex; 
    height: 100%;
    justify-content:center
  }
  
  .contact-contact-section .icons li {
    display: inline-block;
    text-align: center;
  }
  
  .contact-contact-section .icons li a {
    text-decoration: none;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    
  }
  
  .contact-contact-section .icons i {
    color: #ff6900;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    transition: background-color 0.3s ease, transform 0.3s ease; 
  
  }
  .contact-contact-section .icons i:hover {
    background-color: #ff6900;
    color: white;
    transform: scale(1.1); 
}
  
  .contact-contact-section .cartoon img{
    width:150%;
    height: 100%;
    overflow: hidden;
  }

/* Media Queries for small devices (tablets and mobile phones) */
@media (max-width: 768px) {
  .contact-contact-info {
      margin-top: 2%; 
      width: 100%;
  }

  .contact-card h4 {
      margin-left: 0; 
  }

  .contact-card {
      padding-left: 10px;
  }

  .form-container {
      padding-left: 10px; /* Adjust form padding for mobile */
  }

  /* Ensure the card width is full on small screens */
  .contact-contact-info .card, 
  .contact-card {
      width: 100%;
      margin: 0;
      /* margin-top: 20%; */

  
  }
}



/*............................... graphic-design page .........................*/
/* graphic-design start */

.graphic-header-section {
  width:100%;
  height:auto;
  overflow: hidden;
}

.graphic-header-section h1 {
  color: #ff6900; /* Orange text color */  
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 20px;
  text-align:left;
}

.graphic-header-section h2 {
  color: #1B1F44;
  margin-top: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}

.graphic-header-section p {
 
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}


/* Service Section */
.graphic-service-section {
  background-color: #1B1F44;
  color: white;
  text-align: center;
  width:100%;
  height:auto;
  overflow: hidden;
}

.graphic-service-section h2 {
  color: #fff;
  font-size: 2.5rem;
  padding:20px;

}


.graphic-service-card {
  position: relative; 
  border: 1px solid #ccc; 
  border-radius: 10px; 
  padding: 20px;
  background-color: #fff; 
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.graphic-service-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #FF6900;
  transform: scaleX(0);
  transition: transform 0.6s ease;
}

.graphic-service-card:hover {
  transform: translateY(-5px); /* Lifting the card slightly */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.graphic-service-card:hover::before {
  transform: scaleX(1); /* Scale the bottom border to full width */
}

.graphic-service-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.graphic-service-card h3 {
  color: #1B1F44;
  margin-bottom: 15px;
  font-size: 2rem;
  font-weight: bold;
}

.graphic-service-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}

/* Reasons Section */
.graphic-reasons-section {
  width:100%;
  height:auto;
  overflow: hidden;
}

.graphic-reasons-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
}

.graphic-reason-card {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  border: #616164 2px solid;
  height:100%;
  border: #ff6900 2px solid;

}
.graphic-reason-card:hover {
  background-color:#ff6900;
  color:white;
  transform: rotate(3deg);
}

.graphic-reason-card:hover h3 { 
  color:white;
}
.graphic-reason-card:hover p {
  color:white;
}
.graphic-reason-card h3 {
  color: #1B1F44;
  margin-bottom: 15px;
  font-size: 2.0rem;
  font-weight: bold;
}

.graphic-reason-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}

/* Footer Section */
.graphic-footer-section {
  background-color: #1B1F44;
  color: white;
  padding: 20px 0;
  text-align: center;
}

.graphic-footer-section p {
  margin: 0;
  font-size: 1rem;
}
/* Default styles for the card */
.graphic-service-card, .graphic-reason-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center;
}

/* On hover, the card grows in size (zoom effect) */
.graphic-service-card:hover {
  transform: scale(1.1); 
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
  .graphic-header-section h1 {
      font-size: 1.5rem;
  }
  .graphic-header-section h2 {
      font-size: 1rem;
  }
  .graphic-header-section p {
      font-size: 1.2rem;
  }
  .graphic-service-section h2 {
      font-size: 1.5rem;
  }
  .graphic-reasons-section h2 {
      font-size: 1.5rem;
  }
  .graphic-service-card h3,
  .graphic-reason-card h3 {
      font-size: 1.2rem;
  }
  .graphic-service-card p,
  .graphic-reason-card p {
      font-size: 1rem;
  }
  
}


/* ..................................ui-ux-design-page.............................. */
.ui-ux-design-section{
  width: 100%;
  height:auto;
  overflow:hidden;
  
}
.ui-ux-design-section img{
  object-fit: cover;
}
.ui-ux-image-section{
  width: 100%;
  height:auto;
  overflow:hidden;
}
.ui-ux-image-section img{
  object-fit: cover;
}
.ui-ux-image-section h2{
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
}

@media (min-width:320px) and (max-width:760px){
  .ui-ux-image-section h2{
    color: #1B1F44;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
  }
}

.ui-ux-content-section{
  width: 100%;
  height:80%;
  overflow:hidden;
  background-color: #1B1F44!important;
  text-align: center;


}
.ui-ux-content-section h3{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}
.ui-ux-content-section .card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding:10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height:100%;
 

  
}



.ui-ux-content-section  .card:hover{
  transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Shadow effect */
    border-bottom:8px solid #ff6900;
}


.ui-ux-content-section .card img {
  width: 80px;
  height: 80px;
  object-fit: cover;
 
}
.ui-ux-content-section .card h5{
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #1B1F44 !important;
  margin-top: 20px;
}
.ui-ux-content-section .card p{
  text-align: justify;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
margin-top: 10px;
}
.ui-ux-content-section .content-img{

  object-fit: cover;
  height:auto;


}

@keyframes walkAndReturn {
  0% {
    transform: translateX(0) rotateY(0); /* Start position */
  }

  50% {
    transform: translateX(-20px) rotateY(0); /* Move forward */
  }

  100% {
    transform: translateX(0) rotateY(0); /* Return to the starting position */
  }
}

.content-img img {
  animation: walkAndReturn 3s ease-in infinite !important;
  transform-origin: bottom !important; /* For smooth rotation */
  overflow: hidden;
}


@media (min-width:320px) and (max-width:768px){
  .ui-ux-content-section h3{

    font-size: 2.0rem;

  }
  .ui-ux-content-section .card h5{
   
    font-size: 1.5rem;

   
  }
}



/*.......................... logo-design-page.................................. */
.logo-design-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.logo-design-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 30px;
}
.logo-design-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
margin-top: 20px;
font-size: 18px;
text-align: justify;
}
.logo-content-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.logo-content-section .card{
  padding:30px;
  border: 5px solid #1B1F44;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height:100%;

}
.logo-content-section .card:hover{
  background-color:#ff6900 ;
  color: #fff;
  transform: scale(1.05); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.logo-content-section .card:hover h5 {
  color: #fff; 
}

.logo-content-section .card h5{
  text-align: center;
color:#1B1F44;
font-size: 28px;
font-weight: 500;
}
.logo-content-section h3{
   font-size: 2.5rem;
  font-weight: bold;
  color: #ff6900;
  text-align: center;
 
}

.logo-image-section{
  width: 100%;
  height:auto;
  overflow: hidden;
  background-color: #1B1F44;
}


.logo-image-section h3{
  text-align: center;
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
}
.logo-image-section .card{
  padding:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.logo-image-section .card:hover{
  transform: scale(1.05); 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.logo-image-section .card img{
 width:80px;
 height:80px
}
.logo-image-section .card h5{
  font-size: 1.8rem;
  font-weight: bold;
  color: #1B1F44 !important;
margin-top: 20px;
}

.logo-page-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}

.logo-page-section h3{
  text-align: center;
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
}
.logo-page-section .card{
  perspective: 1000px; /* Add perspective for 3D effect */
  transition: transform 0.6s ease; /* Smoother transition for flipping effect */
}
.logo-page-section .card img{
  transition: transform 0.3s ease;

}
.logo-page-section .card:hover {
  transform: rotateY(180deg); /* Rotate card to create mirror effect */
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2); /* Increased shadow on hover */
}
.logo-page-section .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 
  border-radius: 10px;
  backface-visibility: hidden; /* Hide back side when not flipped */
  z-index: 1;
}

.logo-page-section .card:hover::before {
  transform: rotateY(180deg); /* Rotate back side to match the front */
}


@media (min-width:320px) and (max-width:768px){
  .logo-design-section h2 {
  
    font-size: 2.0rem;
   
}
.logo-content-section h3 {
  font-size: 2.0rem;

}
.logo-content-section .card h5 {

  font-size: 1.5rem;

}
.logo-image-section h3 {

  font-size: 2.0rem;

}
.logo-image-section .card h5 {
  font-size: 1.5rem;


}
.logo-page-section h3 {
 
  font-size: 2.0rem;
}
}





/* ....................video-editing-page......................... */
.video-editing-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.video-editing-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 30px;
  /* text-align: left; */
}
.video-editing-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #292F46;
margin-top: 20px;
text-align: justify;

}
.video-editing-section ul li {
font-size: 18px;
  color:#292F46;
  font-weight: 500;
  padding: 10px;
  
}
.video-editing-section ul li i{
  color:#ff6900;
  margin-right: 10px;
}
/* Styling for the decorative square */
.video-editing-section .square {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 5px;
  background: linear-gradient(to right, #ff6900, transparent);
  z-index: 1;
  margin-left: 50px;
  margin-top: 50px;
  overflow: hidden;
}

/* Image position */
.video-editing-section img {
  position: absolute;
  width: 350px;
  height: 350px;
  margin-top: -300px;
  margin-left: 70px;
  z-index: 2;
}
.container{
  max-width: 89%;
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .video-editing-section .square {
      width: 240px;
      height: 240px;
      margin-left: 0;
      margin-top: 0;
  }

  .video-editing-section img {
      width: 260px;
      height: 260px;
      margin-top: -220px;
      margin-left: 10px;
  }
}
.video-content-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.video-content-section .card{
  padding:10px;
  border: 5px solid #ff6900;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height:100%;

}
.video-content-section .card:hover{
  background-color:#ff6900 ;
  color: #fff;
  transform: scale(1.05); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.video-content-section .card:hover h5  {
  color: #fff; 
}
.video-content-section .card:hover p  {
  color: #fff; 
}

.video-content-section .card h5{
  text-align: center;
color:#1B1F44 ;
font-size: 1.5rem;
font-weight: bold;
}
.video-content-section .card p{
  text-align: justify;
  color:#1B1F44 ;
  font-size: 1.2rem;
  font-weight: 500;
margin-top: 20px;


}
.video-content-section h3{
  text-align: center;
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
 
}

@media (min-width:320px) and (max-width:768px) {
  .video-editing-section h2{
    color: #ff6900;
    font-size: 2.0rem;
    font-weight: bold;
    margin-top: 30px;
    text-align: center;
  }
  .video-content-section h3{
    text-align: center;
    color: #1B1F44;
    font-size: 2.0rem;
    font-weight: bold;
   
  }
}   

@media (width:768px) {
  .video-editing-section .video-img{
       padding-top: 210px;
  }
} 


/* .........................responsive-design-page.................... */
.responsive-design-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.responsive-design-section h2{
  color: #ff6900;
  font-size: 2.0rem;
  font-weight: bold;
  margin-top: 28px;
}
.responsive-design-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
margin-top: 20px;
}
.responsive-design-section img{
  object-fit: cover;
  width:100%;
 margin-top: 80px;
}


.responsive-content-section{
  width: 100%;
  height:auto;
  overflow:hidden;
  background-color: #eeeff3;
  text-align: center;

}
.responsive-content-section h3{
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}
.responsive-content-section .card {
  display: flex;
  justify-content: center;
  align-items: center;
padding:50px;
  height:100%;
  border-left: 8px solid #ff6900;

}
.responsive-content-section .card:hover {
  transform: rotate(3deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-color: #ff6900;
  
}
.responsive-content-section .card:hover h5{
  color:white;
}
.responsive-content-section .card:hover p{
  color:white;
}





.responsive-content-section .card img {
  width: 70px;
  height: 70px;
  object-fit: cover;
}
.responsive-content-section .card h5{
  text-align: center;
  color:#1B1F44 ;
  font-size: 1.8rem;
  font-weight: bold;
margin-top: 20px;
}
.responsive-content-section .card p{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
margin-top: 10px;
}

/* .........................ecommerce-section-page.................... */
.ecommerce-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.ecommerce-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  margin-top: 30px;
}
.ecommerce-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  margin-top: 20px;
margin-top: 20px;
text-align: justify;
}
.ecommerce-card-section .card {
  background-color: #1B1F44; /* Blue background */
  padding: 20px;
  border-radius: 10px;
  color: #fff; /* Text color white */

}
.ecommerce-card-section .card:hover i{

transition: transform 0.5s ease;
}




.ecommerce-card-section .card:hover {
  transform: scale(1.1);



}

.ecommerce-card-section .row {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* Ensure columns stretch to the same height */
  text-align: center;
}

.ecommerce-card-section .col {
  position: relative;
  padding: 30px;
}

.ecommerce-card-section .col i {
  font-size: 3rem;
  color: #fff; 
  margin-bottom: 20px;
}

.ecommerce-card-section .col h5 {
  margin-top: 10px;
  color: #fff; /* Heading color white */
}

.ecommerce-card-section .col::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #fff; 
}

.ecommerce-card-section .col:last-child::before {
  display: none; /* Remove vertical line from the last column */
}
/* Remove vertical lines on mobile */
@media (max-width: 767px) {
  .ecommerce-card-section .col::before {
    display: none;
  }
}
  

/*............................. static-section-page............................. */
.static-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.static-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  /* margin-bottom: 30px; */

  margin-top: 30px;
  text-align: center;
}

.static-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  /* margin-top: -21px; */
/* font-size: 18px; */
text-align: justify;
padding:20px;

}


.static-website-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.static-website-section h3{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  /* margin-bottom: 30px; */

}
.static-website-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  margin-top: 25px;
  text-align: justify; 
  }
  .static-website-card-section{
    background-color: #f8f9fa;
  }
  .static-website-card-section h4{
    color: #ff6900;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 50px;  
  text-align: center;
  }
  .static-website-card-section .card{
    height: 100%;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important;
  }

@media (min-width:320px) and (max-width:768px){
  .static-section h2{
 
    font-size: 2.0rem;

  }
  .static-website-section h3{

    font-size: 2.0rem;
  
    /* margin-bottom: 30px; */
  
  }
  .static-website-section h3{
    color: #ff6900;  font-size: 2.0rem;
  
    /* margin-bottom: 30px; */
  
  }
  .static-website-card-section h4{
   
    font-size: 2.0rem;

  }
}

  
/*............................. dynamic-section-page............................. */
.dynamic-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.dynamic-section h2{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  margin-top: 20px;
  text-align: center;
}
@media screen and (min-width:320px) and (max-width:768px) {
.dynamic-section p{
  text-align:justify!important;
  
}
}

.dynamic-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
margin-top: 10px;
text-align: center;
}

.dynamic-website-section{
  width: 100%;
  height:auto;
  overflow: hidden;
}
.dynamic-website-section h3{
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  /* margin-bottom: 10px; */

}
.dynamic-website-section p{
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  margin-top: 10px; 
  text-align: justify;
  }
  .dynamic-website-section .animate img {
    transition: transform 2s ease;
  

  }
  
  .dynamic-website-section .animate img:hover {
    transform: rotate(360deg);
    transition: transform 2s ease;

  }
  .dynamic-website-card-section {
    width: 100%;
    height:auto;
    overflow: hidden;
    background-color:#f8f9fa ;
  }

  .dynamic-website-card-section h4{
    color: #ff6900;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 30px;  
  text-align: center;
  }
.dynamic-website-card-section .card{
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  height:100%;
}

  /* /........................................... website-development-page ...................................../ */

  .web-development-section{
    width: 100%;
    height:auto;
    overflow: hidden; 
  }
  .web-development-section h3{
    color: #ff6900;
    font-size: 2.5rem;
    font-weight: bold; 
    text-align: left;
    /* margin-bottom: 30px; */
  
  }
  .web-development-section p{
    font-size: 1.2rem;
    font-weight: 500;
    color: #1B1F44;
    margin-top: 20px;
    text-align: justify;
  
    }
    .website-card-section{
      width: 100%;
      height:auto;
      overflow: hidden;
      background-color: #1B1F44;
    }
    .website-card-section  h4{
      color:white;
      font-size: 2.5rem;
      font-weight: bold;
      text-align: center;
    }
    .website-card-section .card {
      position: relative; 
      border: 1px solid #ccc; 
      border-radius: 10px; 
      padding: 20px;
      background-color: #fff;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
      height: 100%;
      overflow: hidden; 
      display: flex;
      align-items: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;


    }
    .website-card-section .card::before{
      content: '';
      position: absolute; 
      top: 0;
      left: 0;
      width: 5px; 
      height: 100%;
      background-color: #FF6900; 
      transform: scaleY(0); 
      transition: transform 0.6s ease;

    }
    .website-card-section .card:hover {
      /* transform: rotate(3deg); */
      transform: translateY(-5px);
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);

      /* background-color:#ff6900 ; */
    
    }
    .website-card-section .card:hover::before {
      /* transform: rotate(3deg); */
      transform: scaleX(1);
      /* background-color:#ff6900 ; */
    
    }
   
    .website-card-section .card h5{
      text-align: center;
      font-size: 1.8rem;
      color:#1B1F44;
      font-weight: bold;
      margin-top: 10px;
    }
    .website-card-section .card p{
      text-align: justify;
      font-size: 1.2rem;
      font-weight: 500;
      color: #1B1F44;
      margin-top: 20px;

    }

    .website-content-section{
      width: 100%;
      height:auto;
      overflow: hidden; 
    }
    .website-content-section h3{
      color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;

    text-align: center;
   
    }
    .website-content-section p{
      text-align: center;
      font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
      margin-top: 10px;
      padding:20px;
    }
    .website-content-section .card{
    padding:30px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
height:100%;
border:3px solid #ff6900;

    }
    .website-content-section .card h5{
         font-size: 2.0rem;
  font-weight: 500;
      text-align: center;
    }

    .website-content-section .card {
      transition: transform 0.3s ease-in-out;
    }
    
    .website-content-section .card:hover {
      animation: bounce 0.5s ease-in-out;
      background-color: #ff6900;
      color:white;
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }
   
    


    .website-box-section{
      width: 100%;
      height:auto;
      overflow: hidden;
      background-color: #1B1F44;
    }
    .website-box-section h3{
      color:#ff6900;
    font-size: 2.5rem;
    font-weight:bold;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
    }
    .website-box-section .card{
      padding:60px;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      border: 3px solid #ff6900;
      transition: transform 0.4s ease;
      transform-origin: center;
    }
    .website-box-section .card:hover{
      transform: translate(10px, -10px);
    }
  
 
   
    .website-box-section .card h5{
      font-size: 20px;
      text-align: center;
     
    }
    .website-box-section .card i {
      font-size: 3rem;
      color:#ff6900; /* Heart icon color */
      text-align: center;
    }

    @media (min-width:320px) and (max-width:768px){
      .web-development-section h3{
     
        font-size: 2.0rem;
    
      }
      .website-card-section h4{
    
        font-size: 2.0rem;
      
        /* margin-bottom: 30px; */
      
      }
      .website-card-section .card h5{
      font-size: 1.5rem;
      
        /* margin-bottom: 30px; */
      
      }
      .website-content-section h3{
       
        font-size: 2.0rem;
    
      }

      .website-content-section .card h5{
        font-size: 1.5rem;
      }

      .responsive-content-section h3{
        font-size: 2.0rem;
      }

      .responsive-content-section .card h5{
        font-size: 1.5rem;
      }
 
    }
    

    
     /*................................. software-development-page................................... */
     .software-development-section{
      width: 100%;
      height:auto;
      overflow: hidden; 
    }
    .software-development-section h3{
      color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;

    
    
    }
    .software-development-section {
      width: 100%;
      height: auto;
      overflow: hidden;
  }
  
  .software-development-section p {
    color:#1B1F44;
text-align: justify;
      font-size: 1.2rem;
      font-weight: 500;
    
     
      margin-top: 30px;
  }
  
  /* Styling for the decorative square */
  .software-development-section .square {
      position: relative;
      width: 320px;
      height: 320px;
      border-radius: 5px;
      background: linear-gradient(to right, #ff6900, transparent);
      z-index: 1;
      margin-left: 50px;
      margin-top: 50px;
  }
  
  /* Image position */
  .software-development-section img {
      position: absolute;
      width: 350px;
      height: 350px;
      margin-top: -300px;
      margin-left: 70px;
      z-index: 2;
  }
  
  /* Mobile responsive adjustments */
  @media (max-width: 767px) {
      .software-development-section .square {
          width: 240px;
          height: 240px;
          margin-left: 0;
          margin-top: 0;
      }
  
      .software-development-section img {
          width: 260px;
          height: 260px;
          margin-top: -220px;
          margin-left: 10px;
      }
  }
  
      
      .software-development-img-section{
        width: 100%;
        height:auto;
        overflow: hidden; 
      }
      .software-development-img-section h4{
        color:#ff6900;
        text-align: center;
        font-size: 2.5rem;
        font-weight: bold;

        margin-bottom: 50px;
        margin-top: 50px;
      }
      .software-development-img-section img{
        object-fit: cover;
      
      }

      .software-card-section{
        width: 100%;
        height:auto;
        overflow: hidden;
        background-color: #1B1F44;
      }
      .software-card-section  h4{
        color: #ff6900;
      font-size: 2.5rem;
      font-weight: bold;
       margin-bottom: 30px;

      
      }
      .software-card-section  p{
        font-size: 1.2rem;
        color:white;
        font-weight: 500;
        margin-top: 20px;
      
      }
      .software-card-section .card {
        padding: 10px;
        border-left: 8px solid #ff6900; /* Define border thickness and color */
        height: 100%;
      }
      .software-card-section .card h5{
        text-align: center;
        font-size: 1.8rem;
        color:#1B1F44;
        font-weight: 500;
        margin-top: 10px;
      }
      .software-card-section .card p{
        text-align: justify;
        font-size: 1.2rem;
        color:#1B1F44;

        font-weight: 500;
        margin-top: 20px;
  
      }
      .software-box-section{
        width: 100%;
        height:auto;
        overflow: hidden;
      }
      .software-box-section h3{
        color: #1B1F44;
        font-size: 2.5rem;
        font-weight: bold;   
      text-align: center;
      margin-bottom: 50px;
      margin-top: 50px;
      }
      .software-box-section .card{
        padding:10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        border: 3px solid #ff6900;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        height:100%;
        overflow:hidden
      }
      .software-box-section .card:hover{
        transform: scale(1.1);
  
      }
     
      .software-box-section .card h5{
        font-size: 1.8rem;
        text-align: center;
        margin-top: 20px;
       
      }
      .software-box-section .card img {
         width:60px;
         height:60px;
      }
      .software-content-section{
        width: 100%;
        height:auto;
        overflow: hidden;
      
      }
      .software-content-section .card{
        padding:10px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        border: 3px solid #ff6900;
       height:100%;
      }
      .software-content-section .card:hover{   
  background-color: #eb7c2c;
  color: white;
      }
      .software-content-section .card:hover h5{   
        color: white;
            }
            .software-content-section .card:hover p{   
              color: white;
                  }
      .software-content-section .card h5{
        font-size: 1.8rem;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color:#1B1F44;

      }
      .software-content-section .card p{
        text-align: justify;
        font-size: 1.2rem;
        color:#1B1F44;

        font-weight: 500;
        margin-top: 20px;
      }

      .software-text-section{
        width: 100%;
        height:auto;
        overflow: hidden;
      
      }
      .software-text-section h2{
        color: #ff6900;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 30px;      
        text-align: center;
        margin-bottom: 30px;
        margin-top: 30px;
      }
      .software-text-section p{
        font-size: 20px;
        text-align: justify;
        margin-top: 10px;
        margin-bottom: 30px;
        color:#1B1F44;

        font-weight: 500;
      }


      @media (min-width:320px) and (max-width:768px){
        .software-development-section h3{
          color: #ff6900;
      font-size: 2.0rem;
      font-weight: bold;
      margin-bottom: 30px;
        }
        .software-development-img-section h4 {
          color: #ff6900;
          text-align: center;
          font-size: 2.0rem;
          font-weight: bold;
          margin-bottom: 50px;
          margin-top: 100px;
      }
      .software-box-section h3{
        color: #1B1F44;
        font-size: 2.0rem;
        font-weight: 500;   
      text-align: center;
      margin-bottom: 80px;
      margin-top: 100px;
      }
      .software-box-section .card h5{
        font-size: 1.5rem;
        text-align: center;
        margin-top: 20px;
       
      }
      .software-card-section .card h5 {
        text-align: center;
        font-size: 1.5rem;
        color: #1B1F44;
        font-weight: 500;
        margin-top: 10px;
    }
    .software-content-section .card h5 {
      font-size: 1.5rem;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
      color: #1B1F44;
  }
  .software-text-section h2{
    color: #ff6900;
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 30px;      
    text-align: center;
    margin-bottom: 30px;
    margin-top: 50px;
  }
      }

      /*.................................. ios-application-page.................................. */
    .ios-application-section h2{
      color: #ff6900;
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 30px;
      margin-top: 40px;
      text-align: center;
    
    }
      .ios-content-section{
        width: 100%;
        height:auto;
        overflow: hidden; 
      }
      .ios-content-section h3{
        color: #ff6900;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 30px;
      margin-top: 20px;
      text-align: center;
      }
   .ios-content-section .card {
  padding: 50px;
  height:100%;
}

.ios-content-section .card h5 {
  font-size: 1.8rem;
  text-align: center;
}

.ios-content-section .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6900;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
  z-index: 0;
}

.ios-content-section .card:hover::before {
  transform: scaleX(1);

}

.ios-content-section .card:hover {
  transform: scale(1.05);
  color: white;

}


.ios-content-section .card > * {
  position: relative;
  z-index: 1;
}



      .ios-card-section{
        width: 100%;
        height:auto;
        overflow:hidden;
        text-align: center;
        background-color: #1B1F44;
        
      
      }
      .ios-card-section h3{
        color: #ff6900;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 30px;
        margin-top: 20px;
      }
   
      .ios-card-section .card {
        position: relative; 
        border: 1px solid #ccc; 
        border-radius: 10px; 
        padding: 20px;
        background-color: #fff;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        height: 100%;
        overflow: hidden; 
        display: flex;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      
      .ios-card-section .card::before {
        content: '';
        position: absolute; 
        top: 0;
        left: 0;
        width: 5px; 
        height: 100%;
        background-color: #FF6900; 
        transform: scaleY(0); 
        transition: transform 0.6s ease;
      }  
      .ios-card-section .card:hover {
        transform: translateY(-5px);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
      }
      
      .ios-card-section .card:hover::before {
        transform: scaleX(1);
      }
      
      .ios-card-section .card img {
        width: 80px;
        height: 80px;
        object-fit: cover;
      }
      .ios-card-section .card h5{
        text-align: center;
      color: #1B1F44;
      font-size: 1.8rem;
      margin-top: 20px;
      }
      .ios-card-section .card p{
        text-align:justify;
        color:#1B1F44;

      font-size: 1.2rem;
      font-weight: 500;
      margin-top: 10px;
      }

      .ios-image-section{
        width: 100%;
        height:auto;
        overflow:hidden;
      }
      .ios-image-section h3{
        color: #ff6900;
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 30px;      
        margin-top: 20px; 
          
        
      }

      .ios-image-section p{
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        color:#1B1F44;
        text-align: justify;
        font-weight: 500;
      }


      
/* /................................... google ads page ............................../ */
      /* google-ads-start */

      .google-ads-header-section {
        /* background-color: #f7f7f7; */
        /* padding: 50px; */
        text-align: left;
       width:100%;
       height:auto;
       overflow: hidden;
      background-color: white;
      }
      
      .google-ads-header-section h1 {
        color: #ff6900; /* Orange text color */  
        font-size: 2.0rem;
        font-weight: bold;
        margin-top: 20px;
      }
      
      .google-ads-header-section h2 {
        color: #1B1F44;
        margin-top: 28px;
        font-size: 18px;
        font-weight: bold;
      }
    
      .google-ads-header-section p {
       
        margin-top: 15px;
        font-size: 1.2rem;
        font-weight: 500;
        color: #292F46;
        text-align: justify;
      }
    
    
      .google-ad-benifits-section {
        background-color: #fff;
        padding: 15px 15px;
        text-align: center;
        width: 100%;
        overflow: hidden;
      }
      
      .google-ad-benifits-section h2 {
        color: #ff6900;
        font-size: 2.5rem;
        font-weight: bold;
        /* margin-bottom: 30px; */
      }
      
      .google-ad-benifits-card {
        position: relative; /* Positioning context for the pseudo-element */
        border: 1px solid #ccc; /* Sets border color for top, left, and right */
        border-radius: 10px; /* Rounds the corners */
        padding: 20px;
        background-color: #fff; /* Background color of the card */
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
        height: 100%;
        perspective: 1000px; /* Add perspective for 3D effect */
        overflow: hidden; /* Hide overflow to maintain the shape */
        transition: color 0.3s ease; /* Smooth transition for text color */
      }
      
      .google-ad-benifits-card::before {
        content: ''; /* Create a pseudo-element */
        position: absolute; /* Position it absolutely */
        bottom: 0; /* Start at the bottom */
        left: 0; /* Align it to the left */
        width: 100%; /* Full width */
        height: 5px; /* Same height as the border-bottom */
        background-color: #ff6900; /* Match the border-bottom color */
        transform: scaleX(0); /* Start scaled down to 0 */
        transition: transform 0.6s ease; /* Smooth transition for the scaling */
        z-index: 0; /* Place it behind the content */
      }
      
      .google-ad-benifits-card:hover {
        color: white; /* Change text color to white on hover */
      }
      
      .google-ad-benifits-card:hover::before {
        transform: scaleX(1); /* Scale to full width on hover */
      }
      
    
      
    
      
      .google-ad-benifits-card:hover {
        transform: rotateY(15deg); /* Rotate card to the right on hover */
        box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2); /* Increased shadow on hover */
      }
      
    
      
      .google-ad-benifits-card h4 {
        font-size: 1.8rem;
        font-weight: bold;
        margin: 10px 0;
        color: #1B1F44 !important;
      }
      
      .google-ad-benifits-card p {
        font-size: 1.2rem;
        font-weight: 500;
        color: #1B1F44 !important;
      }
    
    
      .google-ad-features {
        background-color: #1B1F44;
        padding: 40px;
       
    }
    
    /* Section title */
    .google-ad-features-title {
        text-align: center;
        margin-bottom: 10px;
        font-size: 2.5rem;
        font-weight: bold;
        color: #fff;
        animation: slide-down 1s ease-in-out;
    }
    
    /* Service list items */
    .google-ad-features-item {
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        opacity: 0;
        animation: fade-in 1.5s ease-in-out forwards;
        transition: transform 0.3s ease-in-out;
    }
    
    /* Number circle */
    .google-ad-features-number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px; /* Default size */
        height: 50px; /* Default size */
        max-width: 20vw; /* Responsive size */
        max-height: 20vw; /* Responsive size */
        background-color: #fff;
        color: #ff6900;
        border-radius: 50%;
        font-size: 1.2rem;
        font-weight: bold;
        margin-right: 15px;
        flex-shrink: 0; /* Prevent shrinking on smaller screens */
    }
    @media (max-width: 576px) {
        .google-ad-features-number {
            width: 40px; /* Adjust width for smaller screens */
            height: 40px; /* Adjust height for smaller screens */
            font-size: 1rem; /* Adjust font size for smaller screens */
            margin-right: 10px; /* Adjust margin for smaller screens */
        }
    }
    
    /* Service content */
    
    
    .google-ad-features-content p {
        margin: 0;
        color: #fff;
        font-size: 20px;

    }
    
    /* Animations */
    @keyframes fade-in {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slide-down {
        0% {
            opacity: 0;
            transform: translateY(-30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Hover effects */
    .google-ad-features-list-item:hover {
        transform: scale(1.05);
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .google-ad-img-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%; /* Set container height, if needed */
    }
    
    .google-ad-img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    
    }
    
    
    .google-img {
        max-width: 100%;
        
        object-fit: cover;
        /* margin-top: 0%; */
    }
    
    
        @media screen and (max-width:320px) {
            .google-ad-img-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%; /* Set container height, if needed */
            }
            
            .google-ad-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                /* margin-top: 70%; */
            }
        
        
        }
        @media screen and (min-width:321px) and (max-width:425px) {
            .google-ad-img-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%; /* Set container height, if needed */
            }
            
            .google-ad-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                /* margin-top: 70%; */
            }
        
        
        }
        
        @media screen and (min-width:426px) and (max-width:600px) {
            .google-ad-img-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%; /* Set container height, if needed */
            }
            
            .google-ad-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                /* margin-top: 70%; */
            }
        
        }
        @media screen and (min-width:601px) and (max-width:768px){
            .google-ad-img-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%; /* Set container height, if needed */
            }
            
            .google-ad-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                margin-top: 70%;
            }
        }
        
    
    
        @media screen and (max-width:320px) {
          
            
            .google-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                /* margin-top: 70%; */
            }
        
        
        }
        @media screen and (min-width:321px) and (max-width:425px) {
            .google-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                /* margin-top: 70%; */
            }
        
        
        }
        @media screen and (min-width:768px) {
            .google-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                margin-top: 100%;
            }
        
        
        }
    
        @media screen and (min-width:1024px) {
            .google-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                margin-top: 10%;
            }
        
        
        }
        
        @media screen and (min-width:2056px) {
            .google-img {
                max-width: 100%;
                height: auto;
                object-fit: cover;
                margin-top: 10%;
            }
        
        
        }


/* /..................................... digital marketing ......................................./ */
   
.digital-header-section {
  background-color: white; /* Use if needed */
  padding: 10px;
  text-align: left;
  height: auto;
  width: 100%;
  overflow: hidden;
  
}

.digital-header-section h1 {
  color: #ff6900; /* Orange text color */
  font-size: 2rem;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;

}

.digital-header-section h2 {
  color: #1b1f44;
  margin-top: 28px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;

}

.digital-header-section p {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1b1f44;
  text-align: center;
  
}
@media screen and (min-width:320px)and(max-width:768px){
  .digital-header-section p {
    text-align: justify !important;
    
  }
}


.digital-header-section img {
  height: 70%;
}
.digital-marketing-cta-section button {
  background-color: white;
  border: none;
  margin-top: 20px;
  padding: 10px 20px;
  color: black;
  border-radius: 5px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.digital-marketing-cta-section button a {
  text-decoration: none;
  color:#FF6900;
}


.digital-marketing-cta-section button:hover {
  background: linear-gradient(135deg, #ff6900, #ff3d00);
  color: white!important;
  transform: translateX(5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}
.digital-marketing-cta-section button a:hover {
  text-decoration: none;
  color:white;
}

/* Digital Marketing Service Section */
.digital-marketing-service-section {
  background-color: #fff;
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
  padding: 30px;
}

.digital-marketing-service-section h2 {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 40px;
}

#serviceSlider {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}

.slider-track {
  display: flex;
  width: calc(250px * 4); /* Adjust based on the number of cards */
  transition: transform 0.5s ease;
}

.digital-marketing-service-card {
  width: 250px;
  margin: 0 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  text-align: center;
  /* padding: 15px; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.digital-marketing-service-card img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.digital-marketing-service-card h4 {
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .digital-marketing-service-section h2 {
    font-size: 2rem;
  }
}

/* Service Slider */
.digital-marketing-service-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}



/* Service Cards */
.digital-marketing-service-card {
  width: 100%;
  height: 50%;
  min-width: 250px;
  max-width: 250px;
  border: 2px solid #ff6900;
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #fff;
}

.digital-marketing-service-card img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.digital-marketing-service-card:hover {
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.digital-marketing-service-card:hover img {
  transform: rotate(10deg);
}
.digital-header-section img {
    height: 70%;
    margin-top: 10%;
}

@media screen and (max-width:320px) {
    .digital-header-section img {
        height: 93% !important;
    }

}
@media screen and (min-width:321px) and (max-width:425px) {
    .digital-header-section img {
        height: 93% !important;
    }
}

@media screen and (min-width:426px) and (max-width:600px) {
    .digital-header-section img {
        height: 93% !important;
    }
}
@media screen and (min-width:601px) and (max-width:768px){
    .digital-header-section img {
        height: 60%;
        margin-top: 54%;
    }
}
@media screen and (min-width:1044px) and (max-width:2560px){
    .digital-header-section img {
        height: 50%;
        /* margin-top: 54%; */
        margin-bottom: 10%;
    }
}

.digital-marketing-service-card h4 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0;
}

.digital-marketing-service-card p {
  font-size: 1.2rem;
  margin: 0;
}

/* Navigation Buttons */
.digital-marketing-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ff6900;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.digital-marketing-slider-btn-left {
  left: 10px; /* Adjust for alignment */
}

.digital-marketing-slider-btn-right {
  right: 10px; /* Adjust for alignment */
}

.digital-marketing-slider-btn:hover {
  background-color: #ff6900;
}

.digital-marketing-slider-btn:focus {
  outline: none;
}

/* For uniform height in cards */
.digital-marketing-service-card {
  min-height: 300px;
}

/* Digital Marketing Benefits Section */
.digital-marketing-benefits-section {
  background-color: #fff;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.digital-marketing-benefits-section h2 {
  color: #ff6900;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.digital-marketing-benefit-card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
  background-color: #fff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.digital-marketing-benefit-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.digital-marketing-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6900;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
  z-index: 0;
}

.digital-marketing-benefit-card:hover::before {
  transform: scaleX(1);

}

.digital-marketing-benefit-card:hover {
  transform: scale(1.05);
  color: white;

}

.digital-marketing-benefit-card:hover img {
  background-color: white;
  border-radius: 50%;
}

.digital-marketing-benefit-card > * {
  position: relative;
  z-index: 1;
}


.digital-marketing-benefit-card h4 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 10px 0;
}

.digital-marketing-benefit-card p {
  font-size: 1rem;
  margin: 0;
}

/* Call to Action Section */
.digital-marketing-cta-section {
  background-color: #292f46;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 10px;
}

.digital-marketing-cta-section h5 {
  font-size: 2.0rem;
  margin-bottom: 15px;
}

.digital-marketing-cta-section h6 {
  font-size: 1.2rem;
  margin: 0;
}

@media (max-width: 768px) {
  .digital-header-section {
    padding: 20px;
    height: auto;
    /* text-align: center; */
  }

  .digital-header-section h1,
  .digital-header-section h2 {
    font-size: 1.5rem;
  }

  .digital-header-section p {
    font-size: 1rem;
    text-align: justify;
  }

  .digital-header-section img {
    height: 50%;
  }

  .digital-marketing-service-section,
  .digital-marketing-benefits-section {
    padding: 20px 10px;
  }

  .digital-marketing-service-slider {
    flex-direction: column; /* Stack cards vertically */
    align-items: center; /* Center align cards */
  }

  .digital-marketing-service-card {
    width: 80%; /* Take up more space on mobile */
    min-width: unset;
    max-width: unset;
    margin-bottom: 15px; /* Space between cards */
  }

  .digital-marketing-slider-btn-left,
  .digital-marketing-slider-btn-right {
    top: auto;
    bottom: 10px; /* Move buttons to bottom */
  }
}

/* digital-marketing end */




/* /....................................... seo-page ......................................../ */
/* seo-start */

.seo-header-section {
  /* background-color: #f7f7f7; */
  padding: 20px;
  text-align: left;
  overflow: hidden;
}



@media screen and (max-width:320px) {
  .seo-con-image {
      max-width: 100% !important;
      height: 100% !important;
      margin-top: 0% !important;
  }
}
@media screen and (min-width:321px) and (max-width:425px) {
  .seo-con-image {
      max-width: 100% !important;
      height: 100% !important;
      margin-top: 0% !important;
  }
}

@media screen and (min-width:426px) and (max-width:600px) {
  .seo-con-image {
      max-width: 120%;
      height: 60%;
      margin-top: 0%;
  } 
}
@media screen and (min-width:601px) and (max-width:768px){
  .seo-con-image {
      max-width: 120%;
      height: 59%;
      margin-top: 52%;
  } 
}
@media screen and (min-width:768px) and (max-width:1024px){
  .seo-con-image {
      max-width: 120%;
      height: 59%;
      margin-top: 0%;
  }
  
}
@media screen and (max-width:1024px){
  .seo-con-image {
      max-width: 120%;
      height: 59%;
      margin-top: 0%;
  }
  
}
@media screen and (min-width:1024) and (max-width:1440){
  .seo-con-image {
      max-width: 100%;
      height: 70%;
  }
  
}
@media screen and (min-width:1440) and (max-width:2560){
  .seo-con-image {
      max-width: 100%;
      height: 70%;
  }
  
}

.seo-header-section h1 {
  color: #ff6900; /* Orange text color */  
  font-size: 2.5rem;
  font-weight: bold;
  /* margin-top: 28px; */
}

.seo-header-section h2 {
  color: #1B1F44;
  margin-top: 28px;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: justify;
}

.seo-header-section p {
 
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44;
  text-align: justify;
}
.seo-services-section {
  background-color: rgba(0, 0, 0, 0.261);
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.seo-services h2 {
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.seo-services-card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  height:100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.seo-services-card .circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 107%, #bbbdcc 0%, #0d1d99 5%, #b8bac9 45%, #dfd0da 60%, #bfc5d6 90%);
  border-radius: 50%;
  transform: translate(50%, -50%) scale(1);
  transition: all 0.5s ease;
  z-index: 0;
}
.seo-services-card img,
.seo-services-card h4,
.seo-services-card p {
  position: relative;
  z-index: 1;
}

.seo-services-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.seo-services-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
  transition: color 0.5s ease;
}

.seo-services-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #292f46 !important;
  transition: color 0.5s ease;
  text-align: justify;
}

.seo-services-card:hover .circle {
  width: 300%;
  height: 300%;
  border-radius: 15px;
}

.seo-services-card:hover h4,
.seo-services-card:hover p {
  color: white !important;
}

.seo-services-card:hover img {
  transform: scale(1.1);
  z-index: 1000;
}

.seo-services-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}


.seo-services-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.seo-services:hover img {
  transform: scale(1.1);
}

.seo-services-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
}

.seo-services-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
}


/* seo important part */

.seo-important-section {
  background-color: #fff;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.seo-important-section h2 {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}
.seo-important-card {
  position: relative; /* Needed for the pseudo-element positioning */
  border: 1px solid #ccc; /* Border for all sides */
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  background-color: #fff; /* Card background */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: hidden; /* To ensure pseudo-element doesn't overflow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.seo-important-card::before {
  content: ''; /* Empty pseudo-element */
  position: absolute; /* Positioned relative to the card */
  bottom: 0; /* Align to the bottom */
  left: 0; /* Align to the left */
  width: 100%; /* Full width */
  height: 5px; /* Height of the bottom border */
  background-color: orange; /* Orange color */
  transform: scaleX(0); /* Start at 0 width */
   /* Start the transformation from the left */
  transition: transform 0.6s ease; /* Smooth scaling transition */
}

.seo-important-card:hover {
  transform: translateY(-5px); /* Lifting the card slightly */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.seo-important-card:hover::before {
  transform: scaleX(1); /* Scale the bottom border to full width */
}

.seo-important-card img {
  width: 25%;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
  object-fit: cover;
}

.seo-important-card:hover img {
  transform: scale(1.1); /* Zoom in the image on hover */
}


.seo-important-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
}

.seo-important-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
  text-align: justify;
}

/* Service list container */
.seo-service-list {
  background-color:#1B1F44;
  padding: 40px;
 
}

/* Section title */
.seo-section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  animation: slide-down 1s ease-in-out;
}

/* Service list items */
.seo-service-list-item {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 15px;
  opacity: 0;
  animation: fade-in 1.5s ease-in-out forwards;
  transition: transform 0.3s ease-in-out;
}

/* Number circle */
.seo-service-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px; /* Default size */
  height: 50px; /* Default size */
  max-width: 20vw; /* Responsive size */
  max-height: 20vw; /* Responsive size */
  background-color: #fff;
  color: #ff6900;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0; /* Prevent shrinking on smaller screens */
}
@media (max-width: 576px) {
  .seo-service-number {
      width: 40px; /* Adjust width for smaller screens */
      height: 40px; /* Adjust height for smaller screens */
      font-size: 1rem; /* Adjust font size for smaller screens */
      margin-right: 10px; /* Adjust margin for smaller screens */
  }
}

/* Service content */
.seo-service-content h5{
  font-size: 1.3rem;
  font-weight: bold;
  color: #ff6900;
  margin-bottom: 5px;
}

.seo-service-content h6 {
  margin: 0;
  color: white;
}

/* Animations */
@keyframes fade-in {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slide-down {
  0% {
      opacity: 0;
      transform: translateY(-30px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Hover effects */
.seo-service-list-item:hover {
  transform: scale(1.05);
  background-color: rgba(0, 0, 0, 0.3);
}

@media (min-width:320px) and (max-width:768px){
  .seo-header-section h1 {

    font-size: 2.0rem;

  }
  
  .seo-header-section h2 {
   
    font-size: 2.0rem;

  }
  .seo-services h2 {

    font-size: 2.0rem;
  }
  .seo-important-card h4 {
    font-size: 1.5rem;
 
}
.seo-services-card h4 {
  font-size: 1.5rem;

}
.seo-section-title {

  font-size: 2.0rem;

}
.seo-important-section h2 {

  font-size: 2.0rem;
 
}
}

@media (min-width:500px) and (max-width:2560px){
  .ui-ux-content-section .card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 56px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
}

/* seo page end */
/* .............................social-media-marketing page........................ */


.social-media-marketing-header-section {
  /* background-color: #f7f7f7; */
  /* padding: 50px; */
  text-align: left;
 overflow: hidden;
}

.social-media-marketing-header-section h1 {
  color: #ff6900; /* Orange text color */  
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 28px;
}

.social-media-marketing-header-section h2 {
  color: #1B1F44;
  margin-top: 28px;
  font-size: 2.5rem;
  font-weight: bold;
}

.social-media-marketing-header-section p {
text-align: justify;
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #292F46;
}
.social-media-marketing-header-section img{
  object-fit: cover;
  width: 100%;

}


.socialmedia-services-section {
  background-color: whitesmoke;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.socialmedia-services-section h2 {
  color: #1B1F44;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.socialmedia-services-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
  background-color: #fff;
  height:100%;


  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.socialmedia-services-card .circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-radius: 50%;
  transform: translate(50%, -50%) scale(1);
  transition: all 0.5s ease;
  z-index: 0;
}

.socialmedia-services-card img,
.socialmedia-services-card h4,
.socialmedia-services-card p {
  position: relative;
  z-index: 1;
}

/* Base Styles for Image */
.socialmedia-services-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

/* Text Styles */
.socialmedia-services-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
  transition: color 0.5s ease;
}

.socialmedia-services-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #292f46 !important;
  transition: color 0.5s ease;
  text-align: justify;
}

/* Hover Effects for Social Media Services Cards */
.socialmedia-services-card:hover .circle {
  width: 300%;
  height: 300%;
  border-radius: 15px;
  /* The background will be overridden by specific platform hover */
}

.socialmedia-services-card:hover h4,
.socialmedia-services-card:hover p {
  color: white !important;
}

.socialmedia-services-card:hover img {
  transform: scale(1.1);
  z-index:1000;
  color:white;
}

/* ===========================
 Platform-Specific Hover Styles
=========================== */

/* Facebook */
.socialmedia-services-card.facebook:hover .circle {
  background: radial-gradient(circle at 30% 107%, #3b5998 0%, #3b5998 100%);
}

/* Instagram */
.socialmedia-services-card.instagram:hover .circle {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Twitter */
.socialmedia-services-card.twitter:hover .circle {
  background: radial-gradient(circle at 30% 107%, #00000ccc 0%, #00000e 100%);
}

/* LinkedIn */
.socialmedia-services-card.linkedin:hover .circle {
  background: radial-gradient(circle at 30% 107%, #0077B5 0%, #0077B5 100%);
}

/* Pinterest */
.socialmedia-services-card.pinterest:hover .circle {
  background: radial-gradient(circle at 30% 107%, #E60023 0%, #E60023 100%);
}

/* YouTube */
.socialmedia-services-card.youtube:hover .circle {
  background: radial-gradient(circle at 30% 107%, #FF0000 0%, #FF0000 100%);
}

/* Google My Business */
.socialmedia-services-card.googlemybusiness:hover .circle {
  background: radial-gradient(circle at 30% 107%, #4285F4 0%, #4285F4 100%);
}

/* social-media-marketing end */
@media (min-width:320px) and (max-width:768px){
  .social-media-marketing-header-section h1 {
 
    font-size: 2.00rem;

  }
  
  .social-media-marketing-header-section h2 {
  
    font-size: 2.0rem;

  }
  
  .socialmedia-services-section h2 {
 
    font-size: 2.0rem;

  }
  .socialmedia-services-card h4 {

    font-size: 1.5rem;
 
  }
}


/* ....................................android-development-page .....................................................*/
/* android development start */
.mobile-app{
  width:100%;
 height:auto;
  overflow: hidden;
  display: flex;
    /* display: flex;
    justify-content: center;
    align-items: center;
   width: 100%;
   height: 100vh;
    margin: 0;
    overflow: hidden; */
}
.solar-system {
  position: relative;
  width: 100%;
  height: auto;
}

.sun {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  background-image: url(../images/andriod-app.png);
  background-size: cover;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  border: 1px dashed black;
  border-radius: 50%;
}

.planet-container {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 70px;
  height: 70px;
  transform-origin: center;
  animation: rotate linear infinite;
  text-align: center;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
}

.planet {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 15px black;
  background-color: rgba(255, 255, 255, 0.1);

 
}

.planet-name {
  margin-left: 30px;
  color: black;
  font-size: 15px;
  
}

/* Individual Planet Icons */
.icon1 {
  background-image: url(../images/facebook.png);
  animation-duration: 5s;

 
  
}

.icon2 {
  background-image: url(../images/img1/pinterest.png);
  animation-duration: 5.5s;
}

.icon3 {
  background-image: url(../images/img1/linkidin.png);
  animation-duration: 6s;
}

.icon4 {
  background-image: url(../images/img1/youtube.png);
  animation-duration: 6.5s;
}

.icon5 {
  background-image: url(../images/img1/twitter.png);
  animation-duration: 7s;
}

.icon6 {
  background-image: url(../images/img1/skill-icons_instagram.png);
  animation-duration: 7.5s;
}

.icon7 {
  background-image: url(../images/img1/whatsapp1.jpeg);
  animation-duration: 8s;
}



@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(250px);
  }
  to {
    transform: rotate(360deg) translateX(250px);
  }
}
.android-header-section {
background-color: whitesmoke;
  padding: 50px;
  text-align: center;
}

.android-header-section h1 {
  color: #ff6900; /* Orange text color */  
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 28px;
}

.android-header-section h2 {
  color: #1B1F44;
  margin-top: 28px;
  font-size: 18px;
  font-weight: bold;
}

.android-header-section p {
 
  margin-top: 15px;
  font-size: 1.3rem;
  font-weight: 500;
  color: black;
}

.android-dev-section {
  /* background-color: #f7f7f7; */
  padding: 25px;
  overflow: hidden;
 
}

.android-dev-section h1 {
  color:#ff6900; /* Orange text color */  
  font-size: 2.5rem;
  font-weight: bold;
  /* margin-top: 28px; */
}

.android-dev-section h2 {
  color: #1B1F44;
  margin-top: 28px;
  font-size: 18px;
  font-weight: bold;
}

.android-dev-section p {
 
  /* margin-top: 15px; */
  font-size: 1.2rem;
  font-weight: 500;
  color: #292F46;
  text-align: justify;
}
.android-cartoon-section {
  background: linear-gradient(to right, #ff6900 50%, #292F46 50%);
  height: auto; /* Full view height */
  overflow: hidden;
}

/* General card styling */
/* Card Styling */
.android-dev-tech-card {
  background-color: white;
  border-radius: 10px;
  padding: 3%;
  max-width: 30%; /* Adjust width as needed */
  text-align: left; /* Align text to the left */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row; /* Align content in a row */
  align-items: center; /* Center items vertically */
  justify-content: space-between; /* Space between image and text */
  font-size: 25px;

 
}
.android-dev-tech-card1 {
  background-color: white;
  border-radius: 10px;
  padding: 3%;
  max-width: 30%;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 35% !important;
}

/* Image Styling */
.android-dev-tech-card1 img {
  width: 60px; /* Adjust size as needed */
  margin-right: 10px; /* Space between image and text */
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Text Styling */
.android-dev-tech-card1 p {
  font-weight: bold;
  margin: 0; 
  flex-grow: 1;
  text-align: left; 
  font-size: 2.5rem;
}




/* Image Styling */
.android-dev-tech-card img {
  width: 60px; /* Adjust size as needed */
  margin-right: 10px; /* Space between image and text */
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Text Styling */
.android-dev-tech-card p {
  font-weight: bold;
  margin: 0; 
  flex-grow: 1; 
  text-align: center; 
  font-size: 2.5rem;
}

/* Image styling */
.android-dev-image {
  max-width: 30% !important;
  height: -30%;
  /* margin: 0; */
  margin-left: 71%;
  margin-bottom: -33%;
}



.android-dev-image2 {
  max-width: 35% !important;
  height: auto;
  margin-top: -100%;
}

.android-dev-tech-card2 {
  background-color: white;
  border-radius: 10px;
  padding: 3%;
  max-width: 30%;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 35% !important;
}

/* Image Styling */
.android-dev-tech-card2 img {
  width: 50px; /* Adjust size as needed */
  margin-right: 10px; /* Space between image and text */
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Text Styling */
.android-dev-tech-card2 p {
  font-weight: bold;
  margin: 0; /* Remove default margin */
  flex-grow: 1; /* Allow text to grow */
  text-align: center; /* Align text to the right */
  font-size: 25px;

}

.android-dev-tech-card3 {
  background-color: white;
  border-radius: 10px;
  padding: 3%;
  max-width: 30%;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 71% !important;
}

/* Image Styling */
.android-dev-tech-card3 img {
  width: 50px; /* Adjust size as needed */
  margin-right: 10px; /* Space between image and text */
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Text Styling */
.android-dev-tech-card3 p {
  font-weight: bold;
  margin: 0; /* Remove default margin */
  flex-grow: 1; /* Allow text to grow */
  text-align: center; /* Align text to the right */
  font-size: 2.5rem;

}

@media screen and (max-width:320px) {
  .android-dev-tech-card {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%; /* Adjust width as needed */
      text-align: left; /* Align text to the left */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row; /* Align content in a row */
      align-items: center; /* Center items vertically */
      justify-content: space-between; /* Space between image and text */
  }
  .android-dev-tech-card1 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card1 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card1 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
      font-size: 1.0rem !important;

  }
  
  
  
  
  /* Image Styling */
  .android-dev-tech-card img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: center; /* Align text to the right */
      font-size: 1.0rem !important;

  }
  
  /* Image styling */
  .android-dev-image {
      max-width: 40% !important;
      height: -30%;
      /* margin: 0; */
      margin-left: 69%;
      margin-bottom: -45%;
  }
  
  
  
  .android-dev-image2 {
      max-width: 75% !important;
      height: auto;
      margin-top: -268%;
      margin-left: -13%;
     
  }
  
  .android-dev-tech-card2 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 43%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card2 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card2 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
      font-size: 1.0rem !important;

  }
  
  .android-dev-tech-card3 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 36% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card3 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card3 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
      font-size: 1.0rem !important;

  }
}
@media screen and (min-width:321px) and (max-width:425px) {
  .android-dev-tech-card {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%; /* Adjust width as needed */
      text-align: left; /* Align text to the left */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row; /* Align content in a row */
      align-items: center; /* Center items vertically */
      justify-content: space-between; /* Space between image and text */
  }
  .android-dev-tech-card1 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card1 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card1 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 1.5rem;

  }
  
  
  
  
  /* Image Styling */
  .android-dev-tech-card img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }
  
  /* Image styling */
  .android-dev-image {
      max-width: 40% !important;
      height: -30%;
      /* margin: 0; */
      margin-left: 69%;
      margin-bottom: -45%;
  }
  
  
  
  .android-dev-image2 {
      max-width: 75% !important;
      height: auto;
      margin-top: -239%;
      margin-left: -13%;
     
  }
  
  .android-dev-tech-card2 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 43%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card2 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card2 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }
  
  .android-dev-tech-card3 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 52%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 47% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card3 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card3 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }

}

@media screen and (min-width:426px) and (max-width:768px) {
  .android-dev-tech-card {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 33%; /* Adjust width as needed */
      text-align: left; /* Align text to the left */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row; /* Align content in a row */
      align-items: center; /* Center items vertically */
      justify-content: space-between; /* Space between image and text */
  }
  .android-dev-tech-card1 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 33%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card1 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card1 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }
  
  
  
  
  /* Image Styling */
  .android-dev-tech-card img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }
  
  /* Image styling */
  .android-dev-image {
      max-width: 40% !important;
      height: -30%;
      /* margin: 0; */
      margin-left: 69%;
      margin-bottom: -45%;
  }
  
  
  
  .android-dev-image2 {
      max-width: 75% !important;
      height: auto;
      margin-top: -214%;
      margin-left: -13%;
     
  }
  
  .android-dev-tech-card2 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 33%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 35% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card2 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card2 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }
  
  .android-dev-tech-card3 {
      background-color: white;
      border-radius: 10px;
      padding: 3%;
      max-width: 33%;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 36% !important;
  }
  
  /* Image Styling */
  .android-dev-tech-card3 img {
      width: 50px; /* Adjust size as needed */
      margin-right: 10px; /* Space between image and text */
      flex-shrink: 0; /* Prevent image from shrinking */
  }
  
  /* Text Styling */
  .android-dev-tech-card3 p {
      font-weight: bold;
      margin: 0; /* Remove default margin */
      flex-grow: 1; /* Allow text to grow */
      text-align: right; /* Align text to the right */
  font-size: 25px;

  }

}

@media (min-width:990PX) and (max-width:1399px){
  .android-dev-section img{
    margin-top: 10%;
  }
}

@media screen and (min-width:600px) and (max-width:768px){
     
  .android-dev-image2 {
      max-width: 75% !important;
      height: auto;
      margin-top: -124%;
      margin-left: -13%;
     
  }

}






.android-application-section {
  background-color: #fff;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;

}

.android-application-section h2 {
  color: #ff6900;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.android-application-card {
  position: relative; /* Needed for the pseudo-element positioning */
  border: 1px solid #ccc; /* Border for all sides */
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  background-color: #fff; /* Card background */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: hidden; /* To ensure pseudo-element doesn't overflow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.android-application-card::before {
  content: ''; /* Empty pseudo-element */
  position: absolute; /* Positioned relative to the card */
  bottom: 0; /* Align to the bottom */
  left: 0; /* Align to the left */
  width: 100%; /* Full width */
  height: 5px; /* Height of the bottom border */
  background-color: orange; /* Orange color */
  transform: scaleX(0); /* Start at 0 width */
   /* Start the transformation from the left */
  transition: transform 0.6s ease; /* Smooth scaling transition */
}

.android-application-card:hover {
  transform: translateY(-5px); /* Lifting the card slightly */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.android-application-card:hover::before {
  transform: scaleX(1); /* Scale the bottom border to full width */
}

.android-application-card img {
  width: 25%;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
  object-fit: cover;
}

.android-application-card:hover img {
  transform: scale(1.1); /* Zoom in the image on hover */
}
/* .android-application-card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  height:100%;

} */

/* .android-application-card img 
  .android-application-card img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}


.android-application-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.android-application-card:hover img {
  transform: scale(1.1);
} */

.android-application-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
}

.android-application-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
  text-align: justify;
}



.android-services-section {
  background-color: #1B1F44;
  padding: 40px 20px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.android-services h2 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.android-services-card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  height:100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.android-services-card .circle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 107%, #bbbdcc 0%, #0d1d99 5%, #b8bac9 45%, #dfd0da 60%, #bfc5d6 90%);
  border-radius: 50%;
  transform: translate(50%, -50%) scale(1);
  transition: all 0.5s ease;
  z-index: 0;
}
.android-services-card img,
.android-services-card h4,
.android-services-card p {
  position: relative;
  z-index: 1;
}

.android-services-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.android-services-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
  transition: color 0.5s ease;
}

.android-services-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #292f46 !important;
  transition: color 0.5s ease;
  text-align: justify;
}

.android-services-card:hover .circle {
  width: 300%;
  height: 300%;
  border-radius: 15px;
}

.android-services-card:hover h4,
.android-services-card:hover p {
  color: white !important;
}

.android-services-cardd:hover img {
  transform: scale(1.1);
  z-index: 1000;
}

.sandroid-services-card img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}


.android-services-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.android-services-card img {
  transform: scale(1.1);
}

.android-services-card h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #1B1F44 !important;
}

.android-services-card p {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1B1F44 !important;
  text-align: justify;
}



@media (min-width:320px) and (max-width:768px){
  .android-services-card h4 {
    font-size: 1.5rem;
 
  }
  .android-services-card h4 {
    font-size: 1.5rem;
  
  }
  .android-services h2 {
    
    font-size: 2.0rem;
 
  }
  .android-application-card h4 {
    font-size: 1.5rem;
   
  }
  .android-application-section h2 {
  
    font-size: 2.0rem;
   
  }
  .android-dev-section h1 {
    font-size: 2.0rem;

}
}



/*................................... animate on scroll ..........................*/
.animate {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  overflow: hidden !important;
}

/* Animated State */
.animate.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Optional: Additional Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateX(40px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.3s forwards;
}

/* Respecting Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .animate {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
  }
}
/*................................... animate1 on scroll ..........................*/
.animate1 {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
  overflow: hidden !important;
}

/* Animated State */
.animate1.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Optional: Additional Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateX(-20px);
  }
  to {
      opacity: 1;
      transform: translateX(0px);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.3s forwards;
}

/* Respecting Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .animate1 {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
  }
}

/*................................... animate2 on scroll ..........................*/

.animate2 {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
  overflow: hidden !important;
}

/* Animated State */
.animate2.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Additional Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(-20px);
  }
  to {
      opacity: 1;
      transform: translateY(0px);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.3s forwards;
}

/* Respecting Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .animate2 {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
  }
}



/*................................... animate3 on scroll ..........................*/

.animate3 {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.4s ease-in, transform 0.3s ease-in;
  overflow: hidden !important;
}

/* Animated State */
.animate3.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Additional Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(0px);
  }
  to {
      opacity: 1;
      transform: translateY(20px);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.3s forwards;
}

/* Respecting Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .animate2 {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
  }
}



/* banner section */




/* ssm banner start */
/*  */


.social-media-banner-section{
  background-image: url(../images/SMM-Page-Background.webp);
  width: 100%;
  height: 400px;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

}

.social-media-banner-section h1{
  color: white;
  font-size: 2.5rem;
}
.social-media-banner-section button {
  background-color:#ff6900;
  border: none;
  padding: 10px 10px;
font-weight: 600;
font-size: 2rem;
  border-radius: 10px;
  color:white;
  margin-top: 20px;
  justify-content: center;
  text-align: center;
}


.social-h1{
  font-size:2.5rem !important;
  font-weight: bolder !important;
  color: white !important;
}

@media (min-width:320px) and (max-width:768px){
  .social-media-banner-section h1{
    color: white;
    font-size: 2.0rem;
  }
}
/* ssm banner end */

/* seo banner start */
/*  */


.seo-banner-section {
  background: url(../images/SEO-page-Background.webp) no-repeat center center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 2%;

  /* Animation for drifting stars */
  animation: spaceEffect 30s linear infinite;
}

@keyframes spaceEffect {
  0% {
    background-position: 0% 0%; /* Starting position (top-left corner) */
  }
  100% {
    background-position: 100% 100%; /* Moving to bottom-right */
  }
}




.seo-banner-section h6{
  color: white;
  font-weight: 600;
  font-size: 2.0rem;
  text-align: center;
}
.seo-banner-section h1{
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  text-align: center;
}
.seo-banner-section button{
  background-color: white;
  border: none;
  padding: 10px 5px;
font-weight: 600;
font-size: 1.5rem;
  border-radius: 30px;
  color: blue;
align-items:center;
justify-content: center;
text-align: center;



}

.social-h1{
  font-size:2.5rem !important;
  font-weight: bolder !important;
  color: white !important;
}

.seo-banner-service-list {
  /* width: 300px; */
  /* margin: 50px auto; */
  /* padding: 20px; */
  color: white;
  align-items: flex-start;

}

.seo-banner-service-list ul {
  list-style-type: none;
  /* padding: 0; */
}

.seo-banner-service-list ul li {
  font-size: 1.5rem;
  font-weight: 600;
  /* margin-bottom: 20px; */
  display: flex;
  align-items: center;
}

.seo-banner-star {
  color: white;
  margin-right: 10px;
}

@media (min-width:320px) and (max-width:768px){
  .seo-banner-section h1 {
    color: white;
    font-weight: bolder;
    font-size: 2.5rem;
    text-align: center;
}
}
/* seo banner end */


/* hire banner start */
.hire-banner-section {
  background-image: url(../images/hire-banner.webp);
  width: 100%;
  height: 500px;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */
@keyframes fadeIn {
  from {
      opacity: 0; /* Start with opacity 0 */
  }
  to {
      opacity: 1; /* End with opacity 1 */
  }
}

.hire-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.0rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  
  
}

/* Keyframes for slide-in effect */
@keyframes slideIn {
  from {
      transform: translateY(-20px); /* Slide from above */
      opacity: 0; /* Start hidden */
  }
  to {
      transform: translateY(0); /* End at normal position */
      opacity: 1; /* Fully visible */
  }
}

.hire-banner-section p{
  font-size: 2.0rem;
  font-weight: 600;
  margin-bottom: 20px;
  align-items:center;
  opacity: 0; 
  animation: fadeIn 1.5s forwards; /* Fade in animation */
  animation-delay: calc(0.5s + 0.3s * var(--i)); /* Stagger effect */
}

.be-hire{
  font-size: 2.0rem;
  font-weight: 700;
  margin-bottom: 20px;
  align-items:center;
  opacity: 0; 
  color: #ff6900;
  animation: fadeIn 1.5s forwards; /* Fade in animation */
  animation-delay: calc(0.5s + 0.3s * var(--i)); /* Stagger effect */
}

/* Set CSS variable --i for each li for staggered animation */
.hire-banner-service-list ul li:nth-child(1) {
  --i: 1; /* First item */
}

.hire-banner-service-list ul li:nth-child(2) {
  --i: 2; /* Second item */
}

.large-dot {
  font-size: 3.5rem; /* Adjust the size as needed */
  color: white; /* Change color if needed */
  margin-right: 5px; /* Space between dot and text */
  line-height: 1; /* Set line-height to align the dot properly */
}

.hire-banner-section button {
  background-color: white;
  border: none;
  padding: 5px 10px;
  font-weight: 600;
  font-size: 2rem;
  border-radius: 10px;
  color: blue;
  align-items: flex-start;
  margin-right: auto;
  transition: transform 0.3s, background-color 0.3s; /* Smooth transition for hover */
}

.hire-banner-section button:hover {
  transform: scale(1.1); /* Enlarge button on hover */
  background-color:white; 
}
.hire-banner-section button:hover a {
  transform: scale(1.1); /* Enlarge button on hover */
  color:white; 
}

.social-h1 {
  font-size: 2.5rem !important;
  font-weight: bolder !important;
  color: white !important;
}

@media (min-width:320px) and (max-width:768px){
  .hire-banner-section h1{
    font-size: 1.5rem;
  }

  .hire-banner-section p{
    font-size: 1.2rem;
   
  }
  
  .be-hire{
    font-size: 1.2rem;

  }
}

/* hire banner end */



/* graphic banner start */
/*  */


.graphic-banner-section {
  background: url(../images/Graphic-Design-banner.webp) no-repeat center center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: left;
  padding: 2%;

  /* Animation for drifting stars */
 
}







.graphic-banner-section h1{
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  text-align: left;
}
.graphic-banner-section button{
  background-color: white;
  border: none;
  padding: 5px 10px;
font-weight: 600;
font-size: 2rem;
  border-radius: 30px;
  color: #1B1F44;
justify-content: left;



}

.social-h1{
  font-size:2.5rem !important;
  font-weight: bolder !important;
  color: white !important;
}

.graphic-banner-service-list {
  /* width: 300px; */
  /* margin: 50px auto; */
  /* padding: 20px; */
  color: white;
  align-items: flex-start;

}

.graphic-banner-service-list ul {
  list-style-type: none;
  /* padding: 0; */
}

.graphic-banner-service-list ul li {
  font-size: 2.0rem;
  font-weight: 600;
  /* margin-bottom: 20px; */
  display: flex;
  align-items: center;
}

.graphic-banner-star {
  color: white;
  margin-right: 10px;
}

@media (min-width:320px) and (max-width:768px){
  .graphic-banner-section h1{
 
    font-size: 2.0rem;
   
  }
  .graphic-banner-service-list ul li {
    font-size: 1.5rem;
  
  }
}

/* graphic banner end */



/* digital-marketing banner start */
.digital-banner-section {
  background-image: url(../images/Digital-Marketing-banner.webp);
  width: 100%;
  height: 500px;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */
@keyframes fadeIn {
  from {
      opacity: 0; /* Start with opacity 0 */
  }
  to {
      opacity: 1; /* End with opacity 1 */
  }
}

.digital-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}

/* Keyframes for slide-in effect */
@keyframes slideIn {
  from {
      transform: translateY(-20px); /* Slide from above */
      opacity: 0; /* Start hidden */
  }
  to {
      transform: translateY(0); /* End at normal position */
      opacity: 1; /* Fully visible */
  }
}

@media (min-width:320px) and (max-width:768px){
  .digital-banner-section h1 {
   
    font-size: 2.0rem;
  
  }
  
}


/* digital-marketing banner end */
/* logo-marketing banner start */
.logo-banner-section {
  background-image: url(../images/logo-design-company-coimbatore-banner.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */

}

/* Keyframes for fade-in effect */


.logo-banner-section h1 {
  color: white;
  font-size: 2.0rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}

.logo-banner-section h6{
  color:white;
  font-size: 2.5rem;
  font-weight: bolder;

}

@media (min-width:320px) and (max-width:768px){
  .logo-banner-section h1 {
 
    font-size: 1.5rem;
   
  }
  
  .logo-banner-section h6{
   
    font-size: 1.5rem;
  
  
  }
}


/* logo-marketing banner end */


/* ui banner start */
.ui-banner-section {
  background-image: url(../images/ui-banner.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */


.ui-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 4.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}


.ui-h1{
  font-weight: bolder;
  font-size: 3.5rem;
}

@media (min-width:320px) and (max-width:768px){
  .ui-banner-section h1 {
    color: white;
    font-weight: bolder;
    font-size: 3.0rem;
    transform: translateY(-20px); /* Start slightly up for slide effect */
    opacity: 0; /* Start hidden */
    animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
    justify-content: center;
  }


}



/* ui banner end */


/* video banner start */
.video-banner-section {
  background-image: url(../images/video-banner.webp);
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */


.video-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 4.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}

@media (min-width:320px) and (max-width:768px){
  .video-banner-section h1 {
    color: white;
    font-weight: bolder;
    font-size: 3.0rem;
    transform: translateY(-20px); /* Start slightly up for slide effect */
    opacity: 0; /* Start hidden */
    animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
    justify-content: center;
  }


}


.video-h1{
  font-weight: bolder;
  font-size: 3.5rem;
}



/* video banner end */

/* website banner start */
/*  */

.website-banner-section {
  background: url(../images/Web-new.webp) no-repeat center center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: left;
  padding: 2%;

  /* Animation for drifting stars */
  /* animation: spaceEffect 30s linear infinite; */
}






.website-banner-section h1{
  color: white;
  font-weight: bolder;
  font-size: 3.0rem;
  text-align: left;
}


.social-h1{
  font-size:2.5rem !important;
  font-weight: bolder !important;
  color: white !important;
}

.website-banner-service-list {
  /* width: 300px; */
  /* margin: 50px auto; */
  /* padding: 20px; */
  color: white;
  align-items: flex-start;

}

.website-banner-service-list ul {
  list-style-type: none;
  /* padding: 0; */
}



.website-banner-service-list ul li {
  font-size: 2.0rem;
  font-weight: 600;
  /* margin-bottom: 20px; */
  display: flex;
  align-items: center;
}

.website-banner-star {
  color: white;
  margin-right: 10px;
}

@media (min-width:320px) and (max-width:768px){
  .website-banner-section h1{
   
    font-size: 2.5rem;

  }
  
  .website-banner-service-list ul li {
    font-size: 1.5rem;
 
  }
}
/* website banner end */


/* static banner start */
/*  */


.static-banner-section {
  background: url(../images/static-banner.webp) no-repeat center center;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 500px;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 2%;

  /* Animation for drifting stars */
  animation: spaceEffect 30s linear infinite;
}


.static-banner-section h1{
  color: white;
  font-weight: bolder;
  font-size: 3.0rem;
  text-align: left;
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}

@media (min-width:320px) and (max-width:768px){
  .static-banner-section h1{

    font-size: 2.5rem;
   
  }
}


/* static banner end */

/* dynamic banner start */
.dynamic-banner-section {
  background-image: url(../images/dynamic-banner.webp);
  width: 100%;
  height: 500px;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
  
}

/* Keyframes for fade-in effect */


.dynamic-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}


.dynamic-h1{
  color: #ff6900 !important;
}

@media (min-width:320px) and (max-width:768px){
  .dynamic-banner-section h1 {
   
    font-size: 2.5rem;
   
  }
}

/* dynamic banner end */


/* e-com banner start */
.e-com-banner-section {
  background-image: url(../images/e-com-banner.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
  
}

/* Keyframes for fade-in effect */


.e-com-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.0rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}


.e-com-h1{
  color: #ff6900 !important;
  font-size: 4rem !important;
}
.e-com-banner-section span{
  color: #ff6900 !important;
  font-size: 3.0rem !important;
}

@media (min-width:320px) and (max-width:768px){
  .e-com-banner-section h1 {
 
    font-size: 2.5rem;
  
    
  }
  
}

/* e-com  banner end */



/* software banner start */
.software-banner-section {
  background-image: url(../images/software-banner.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;

  animation: spaceEffect 30s linear infinite;
  
}

/* Keyframes for fade-in effect */


.software-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 2.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}


.software-h1{
  color: #ff6900 !important;
  font-size: 2.8rem !important;
}

.vision-h1{
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Optional border for frosted effect */
    border-radius: 15px; /* Optional rounded corners */
    padding: 20px; /* Optional padding for content */
}

@media (min-width:320px) and (max-width:768px){
  .software-banner-section h1 {
    color: white;
    font-weight: bolder;
    font-size: 2.0rem;
 
    
  
}
}
/* software  banner end */


/* mobile banner start */
.mobile-banner-section {
  background-image: url(../images/mobile-app.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10%;

  animation: spaceEffect 30s linear infinite;
  
}

/* Keyframes for fade-in effect */


.mobile-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}



@media (min-width:320px) and (max-width:768px){
  .mobile-banner-section h1 {
  
    font-size: 2.0rem;
   
    
  }
}

/* mobile  banner end */


/* ios banner start */
.ios-banner-section {
  background-image: url(../images/ios-banner.jpg);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 10%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */


.ios-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.2rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}
.ios-banner-section h6 {
  color: white;
  font-weight: bolder;
  font-size: 2.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}


.ios-h1{
  font-weight: bolder;
  font-size: 3.5rem;
}

@media (min-width:320px) and (max-width:768px){
  .ios-banner-section h1 {
 
    font-size: 2.5rem;
  
  }
}


/* ios banner end */


/* new animation  start */
.android-css-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.android-css-circle-container {
  position: relative;
  width: 600px;
  height: 600px;
  animation: rotate-container 30s linear infinite; /* Rotate the container */
}

.android-css-mobile-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the mobile image */
  z-index: 1; /* Ensure it is above the rotating icons */
}

.android-css-mobile-image img {
  width: auto;
  height: auto; /* Set a fixed height for uniformity */
}

/* Static Position for Mobile Image */
.android-css-mobile-image {
  animation: none; /* No rotation animation for mobile image */
}

.android-css-circle-item {
  position: absolute;
  width: 171px;
  text-align: center;
  transform-origin: center; /* Center for rotation */
  transition: transform 0.5s ease, background-color 0.3s; /* Smooth transitions */
  background-color: transparent; /* Default background color */
  transform-origin: 346px;
  top: 43%;
  left: 35%;
}

.android-css-circle-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 50%; /* Add round border */
  border: 2px solid #ccc; /* Optional border style */
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

/* Slightly scale up the icon on hover */
.android-css-circle-item:hover img {
  transform: scale(1.2); /* Scale up the icon */
}

.android-css-circle-item p {
  font-size: 14px;
  transition: color 0.3s; /* Smooth transition for text color */
}

/* Change text color on hover */
.android-css-circle-item:hover p {
  color: #333; /* Dark text color on hover */
}

/* Circle item positions with increased radius for spacing and opposite rotation */
.circle-item-1 {
  transform: rotate(0deg) translate(350px) rotate(0deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-2 {
  transform: rotate(40deg) translate(350px) rotate(-40deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-3 {
  transform: rotate(80deg) translate(350px) rotate(-80deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-4 {
  transform: rotate(120deg) translate(350px) rotate(-120deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-5 {
  transform: rotate(160deg) translate(350px) rotate(-160deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-6 {
  transform: rotate(200deg) translate(350px) rotate(-200deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-7 {
  transform: rotate(240deg) translate(350px) rotate(-240deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-8 {
  transform: rotate(280deg) translate(350px) rotate(-280deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

.circle-item-9 {
  transform: rotate(320deg) translate(350px) rotate(-320deg); /* Increased translate value */
  animation: rotate-counter 30s linear infinite;
}

/* Animation for the entire container to rotate */
@keyframes rotate-container {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Animation for circle items to rotate in the opposite direction */


/* Optional styling for the dashed circle */
.android-css-circle-container::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border: 2px dashed #ccc;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}



/* new animation  end */



/* portfolio banner start */
.portfolio-banner-section {
  background-image: url(../images/portfolio-banner.webp);
  width: 100%;
  height: auto;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: left;
  justify-content: left;
  padding: 10%;

  animation: spaceEffect 30s linear infinite;
  
}

/* Keyframes for fade-in effect */


.portfolio-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 4.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
  
}




/* Overall container for the imagination box */
.imagination-box {
  position: relative;
  width: auto;
  padding: 20px;
  background: linear-gradient(to bottom, #267fff, #37b8ff); /* Blue gradient */
  border-radius: 10px;
  border: 3px solid white;
  color: white;
  font-family: 'Arial', sans-serif;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  display: inline-block;
}

/* Styling the h1 text inside the box */
.imagination-h1 h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Quote marks styling */
.quote-left, .quote-right {
  font-size: 60px;
  font-weight: bold;
  position: absolute;
  color: white;
}

/* Position for left quote */
.quote-left {
  top: -15px;
  left: 10px;
}

/* Position for right quote */
.quote-right {
  bottom: -30px;
  right: 10px;
}


.imagination-box::before {
  top: 20px;
  left: 20px;
}

.imagination-box::after {
  bottom: 20px;
  right: 20px;
}

@media (min-width:320px) and (max-width:768px){
  .imagination-h1 h1 {
    font-size: 1.0rem !important;
   
  }

  .portfolio-banner-section h1 {
    font-size: 4.0rem;    
  }
  
}

/* portfolio  banner end */



/* google-ads banner start */
.google-ads-banner-section {
  background-image: url(../images/google-ads-banner.webp);
  width: 100%;
  height: 500px;
  background-size: cover;
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1%;
  opacity: 0; /* Start hidden for fade-in effect */
  animation: fadeIn 1.5s forwards; /* Fade in animation */
}

/* Keyframes for fade-in effect */
@keyframes fadeIn {
  from {
      opacity: 0; /* Start with opacity 0 */
  }
  to {
      opacity: 1; /* End with opacity 1 */
  }
}

.google-ads-banner-section h1 {
  color: white;
  font-weight: bolder;
  font-size: 3.5rem;
  transform: translateY(-20px); /* Start slightly up for slide effect */
  opacity: 0; /* Start hidden */
  animation: slideIn 1.5s forwards 0.5s; /* Slide in with delay */
  justify-content: center;
}

/* Keyframes for slide-in effect */
@keyframes slideIn {
  from {
      transform: translateY(-20px); /* Slide from above */
      opacity: 0; /* Start hidden */
  }
  to {
      transform: translateY(0); /* End at normal position */
      opacity: 1; /* Fully visible */

  }
}

@media (min-width:320px) and (max-width:768px){
  .google-ads-banner-section h1 {
   
    font-size: 2.5rem;

  }
}


/* google-ads banner end */

/* HIRE-MESSAGE POP-UP */

.sendhirepop-up{
  position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);
background-color: #ff6900; 
color: white; 
padding: 15px 20px; 
border-radius: 5px; 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 

font-size: 14px; 
z-index: 1100; 
display: none;
}


/* blog1 page start */

.article{
  background-color: #1b1f44;
  margin: 5%;
  color: white;
  font-size: 20px;
}
.social-icons .icons {
  overflow: hidden;
    /* margin-left: 50px; */
    /* display: flex;  */
    height: 100%;
    justify-content: center;
  }
  
  .social-icons .icons li {
    display: inline-block;
    text-align: center;
    justify-content: center;
  }
  
  .social-icons .icons li a {
    text-decoration: none;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
   margin-top: 3px;
    margin-left: 10px;
   
  
  }
  
  .social-icons .icons i {
    color: #ff6900;
    background-color: white;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    vertical-align: middle;
  }


  .social-icons .icons .fa-facebook:hover{
    background-color: #1877F2;
    color:white;
  }
  .social-icons .icons .fa-x-twitter:hover{
    background-color:#000000;
    color:white;
  }
  .social-icons .icons .fa-instagram:hover{
    background-color: #D62976;
    color:white;
  }
  .social-icons .icons .fa-linkedin:hover{
    background-color: #0a66c2;
    color:white;
  }
  .social-icons .icons .fa-youtube:hover{
    background-color: red;
    color:white;
  }
  .social-icons .icons .fa-pinterest:hover{
    background-color: red;
    color:white;
  }
  @media (max-width: 768px) {
    .article {
      flex-direction: column; 
      align-items: flex-start; 
    }
  
    .social-icons {
      margin-top: 10px;
      width: 100%; 
    }
  
    .social-icons .icons {
      justify-content: center;
      flex-wrap: wrap; 
    }
    .blog1-question {
      position:relative;
      top: 20px; 
      align-self: start; /* To ensure proper alignment within the flexbox or grid container */
    }
  }
  
.blog1-banner{
  width: 100% !important;
  overflow: hidden;
  object-fit: cover;
  height:auto;
}
.blog1-banner img{
  width: 100% !important;
  overflow: hidden;
  object-fit: cover;
  height:500px;
 
}

.blog1-question {
  position: sticky !important;
  top: 20px; 
  align-self: start; /* To ensure proper alignment within the flexbox or grid container */
}
.blog1-question h2 {
  border-bottom: 2px solid #1b1f44;
  padding-bottom: 10px;
  color: #1b1f44 !important;
}
.blog1-question ul {
  list-style: none;
  padding: 0;
}

.blog1-question li {
  margin-bottom: 10px;
  color: #1b1f44 !important;
 
  font-size: 1.2rem;
}
.blog1-section li{
  color: #1b1f44 !important;
 
  font-size: 1.2rem;
}
.blog1-question a {
  text-decoration: none;
  color: #1b1f44;
  cursor: pointer;
}
.blog1-question a:hover {
  text-decoration: underline;
}

.blog1-content h2 {
  margin-top: 0;
  font-size: 2.0rem;

  color: #ff6900 !important;
}
.blog1-content p {
  /* margin-top: 0; */
  color: #1b1f44;
font-weight: 500;
  font-size: 1.2rem !important;
}
.blog1-section {
  margin-bottom: 20px;
}
.blog1-section a{
 color: #ff6900;
}
/* Clearfix to ensure footer doesn't overlap */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .blog1-question, .blog1-content {
      width: 100%;
      float: none;
  }
}

@media (min-width:320px) and (max-width:768px){
  .blog1-question {
    position: relative !important;
    top: 20px;
    align-self: start;
}
}
/* Ensure images within blog sections are responsive and properly spaced */
.blog1-section img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 20px; /* Adds space below images */
}

/* Optional: Add hover effect to images */
.blog1-section img:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* Optional: Float images left or right with text wrapping */
.blog1-section img.float-left-custom {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

.blog1-section img.float-right-custom {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}

/* Clear floats after images if using floats */
.blog1-section::after {
  content: "";
  display: table;
  clear: both;
}

.blog3-books{
  width: 25% !important;
  height: 20% !important;
}

.side-ban-img{
  width: 100%;
  height:auto;
}

/* blog1 page end */