.nav-container {
  display: flex;
  justify-content: center;  
  align-items: center;
  gap: 16px;
  background-color: #f5f4ff;
  padding: 10px 26px;
  border-radius: 99px;
  width: fit-content;
  margin: 0 auto;         
  margin-top: 40px; 
}
.nav-container a:hover{
color:black;
}

.nav-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 9999px;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  background-color: transparent;
  color: #000000;
  transition: background-color 0.3s;
}
@media (max-width: 678px) {
.nav-container {
  display: grid;
  border-radius: 9px;
  margin: 0 auto;      
}
.nav-button {
  font-size: 16px;
}
}
@media (min-width: 678px) and (max-width: 778px) {
  .nav-button {
  font-size: 16px;
}
}
.nav-button:hover {
  background-color: #e2e0fe;
}

.nav-button.active {
  background-color: #4e2fda;
  color: #ffffff !important;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
}

/* Placeholder icons: you can replace with actual images or SVG */
.video-icon {
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 8v8l6-4-6-4zm-2-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5h-8a5 5 0 0 1-5-5v-8a5 5 0 0 1 5-5z"/></svg>');
}

.photo-icon {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%236c5ffc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm2 2v12h12V6H6zm2.5 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zM8 14l2.5-3 3 4h-7.5z"/></svg>');
}

.audio-icon {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%236c5ffc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v18c4.97 0 9-4.03 9-9s-4.03-9-9-9zM3 12a9 9 0 0 0 9 9V3a9 9 0 0 0-9 9z"/></svg>');
}

.more-icon {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%236c5ffc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5h4v4H5V5zm5 0h4v4h-4V5zm5 0h4v4h-4V5zM5 10h4v4H5v-4zm5 0h4v4h-4v-4zm5 0h4v4h-4v-4zM5 15h4v4H5v-4zm5 0h4v4h-4v-4zm5 0h4v4h-4v-4z"/></svg>');
}
.blog1-scetion-area h2{
font-weight: 800;
padding: 0 0 50px 10px;
}
.bg-ai{
background: linear-gradient(45.8deg, rgb(175, 104, 254) 9.3%, rgb(85 46 244) 75.1%);
}
.heading5 
span{font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s16);
  line-height: var(--ztc-font-size-font-s16);
  font-weight: var(--ztc-weight-medium);
  color: var(--ztc-text-text-5);
  border-radius: 8px;
  transition: all 0.4s;
  position: relative;
  z-index: 1;
  display: inline-block;
margin-bottom: 16px;}

.heading5 span::after {
  position: absolute;
  content: "";
  left: 0;
  top: -6px;
  width: 20px;
  height: 2px;
  transition: all 0.4s;
  background: var(--ztc-bg-bg-10);
}
.bg-ai  h1{
color: white;
font-weight: 800;
}
.bg-ai p{
color: white;
font-size:22px;
line-height: 2rem;
}
.bg-ai .header-btn5{
  color: white;
  border: 1px solid white;
}
.service1-section-area .header-btn5{
padding:10px 24px;
}
.service1-section-area a:hover {
color: white !important;
}