.CorporateGiftsimg {
width: 100% !important;
    height:700px !important;
    object-fit: cover;
}
.exectiveimg {
    width: 100% !important;
    height:350px !important;
    object-fit: cover;
}
.HowWeWorkimg {
    width: 100% !important;
    height:300px !important;
    object-fit: cover;
}
.InsiderSecretimg{
    width: 100% !important;
    height:300px !important;
    object-fit: cover;
}

/* corporate event*/

.hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.hover-card img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

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

.hover-overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: #D5B56A;
  color: #000000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: center;
  padding: 20px;
}

.hover-card:hover .hover-overlay {
  opacity: 1;
}
/* corporate event*/


.gridcontainer:hover {
    transition: 0.5s all ease-out;
    transform: scale(1.05);
border-radius: 20px;
    background-color: #ffb300;

}
.gridcontainer:hover p{
    color: #000000 !important;
}


.Exhibitionimg1{
  width: 200px;
height: 200px;
}

.Exhibitionimg2{
  width: 500px;
height: 500px;
}


/* ----------  TIMELINE  ---------- */
.timeline {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
  position: relative;
}
.timeline__event {
  margin-bottom: 20px;
  position: relative;
  display: flex;
  margin: 20px 0;
  border-radius: 6px;
  align-self: center;
  width: 80%;
  background: #fff;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.1);
   
}
.timeline__event:nth-child(2n + 1) {
  flex-direction: row-reverse;
}
.timeline__event:nth-child(2n + 1) .timeline__event__date {
  border-radius: 0 6px 6px 0;
}
.timeline__event:nth-child(2n + 1) .timeline__event__content {
  border-radius: 6px 0 0 6px;
}
.timeline__event:nth-child(2n + 1) .timeline__event__icon::before {
  content: "";
  width: 2px;
  height: 100%;
  background: #f6a4ec;
  position: absolute;
  top: 0%;
  left: 50%;
  right: auto;
  z-index: -1;
  transform: translateX(-50%);
  animation: fillTop 2s forwards 4s ease-in-out;
}
.timeline__event:nth-child(2n + 1) .timeline__event__icon::after {
  content: "";
  width: 100%;
  height: 2px;
  background: #f6a4ec;
  position: absolute;
  right: 0;
  z-index: -1;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
  animation: fillLeft 2s forwards 4s ease-in-out;
}
.timeline__event__title {
  font-size: 1.2rem;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: 600;
  color: #9251ac;
  letter-spacing: 1.5px;
}
.timeline__event__content {
  padding: 22px;
  background: #fff;
  border-radius: 0 6px 6px 0;
}
.timeline__event__date {
  color: #ff00fb;
  font-size: 1.5rem;
  font-weight: 600;
  background: #f2ddfac4;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 20px;
  border-radius: 6px 0 0 6px;
}

.timeline__event__date1{
    color: #0008ff;
  font-size: 1.5rem;
  font-weight: 600;
  background: #dde1fac4;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 20px;
  border-radius: 6px 0 0 6px;
}
.timeline__event__date3{
    color: #09ff00;
  font-size: 1.5rem;
  font-weight: 600;
  background: #e3faddc4;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 20px;
  border-radius: 6px 0 0 6px;
}
.timeline__event__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9251ac;
  padding: 20px;
  align-self: center;
  margin: 0 20px;
  background: #f6a4ec;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
              0 18px 36px -18px rgba(0, 0, 0, 0.3),
              0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  position: relative;
}
.timeline__event__icon i {
  font-size: 32px;
}
.timeline__event__icon::before {
  content: "";
  width: 2px;
  height: 100%;
  background: #f6a4ec;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  animation: fillTop 2s forwards 4s ease-in-out;
}
.timeline__event__icon::after {
  content: "";
  width: 100%;
  height: 2px;
  background: #f6a4ec;
  position: absolute;
  left: 0%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  animation: fillLeftOdd 2s forwards 4s ease-in-out;
}
.timeline__event__description {
  flex-basis: 60%;
}

/* ----------  COLOUR VARIANTS  ---------- */
.timeline__event--type2::after {
  background: #555ac0;
}
.timeline__event--type2 .timeline__event__date {
  color: #87bbfe;
  background: #555ac0;
}
.timeline__event--type2 .timeline__event__icon {
  background: #87bbfe;
  color: #555ac0;
}
.timeline__event--type2 .timeline__event__icon::before,
.timeline__event--type2 .timeline__event__icon::after {
  background: #87bbfe;
}
.timeline__event--type2 .timeline__event__title {
  color: #555ac0;
}

.timeline__event--type3::after {
  background: #24b47e;
}
.timeline__event--type3 .timeline__event__date {
  color: #aff1b6;
  background: #24b47e;
}
.timeline__event--type3 .timeline__event__icon {
  background: #aff1b6;
  color: #24b47e;
}
.timeline__event--type3 .timeline__event__icon::before,
.timeline__event--type3 .timeline__event__icon::after {
  background: #aff1b6;
}
.timeline__event--type3 .timeline__event__title {
  color: #24b47e;
}

.timeline__event:last-child .timeline__event__icon::before {
  content: none;
}



/*--form autofill color change--*/
.card-img-top{
  width: 100% !important;
    height:200px !important;
    object-fit: cover;
}

/*---careerjob----*/

:-webkit-autofill {
  background-color: rgb(232, 240, 254) !important;   /* ← light-green */
  -webkit-box-shadow: 0 0 0 30px rgb(232, 240, 254) inset !important;
    -webkit-border: transparent !important;
}

/*  Remove auto-fill green on ALL inputs  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #000 !important;
   -webkit-border: transparent !important;
  
}

/* ----------  MOBILE  ---------- */
@media (max-width: 786px) {
  .timeline__event {
    flex-direction: column;
    align-self: center;
    width: 90vw;
  }
  .timeline__event__content {
    width: 100%;
  }
  .timeline__event__icon {
    border-radius: 6px 6px 0 0;
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .timeline__event__icon::before,
  .timeline__event__icon::after {
    display: none;
  }
  .timeline__event__date {
    border-radius: 0;
    padding: 20px;
  }
  .timeline__event:nth-child(2n + 1) {
    flex-direction: column;
  }
  .timeline__event:nth-child(2n + 1) .timeline__event__date,
  .timeline__event:nth-child(2n + 1) .timeline__event__icon {
    border-radius: 0;
    margin: 0;
  }


  .timeline__event__icon {
  display: none;

}
}

/* ----------  ANIMATIONS  ---------- */
@keyframes fillLeft {
  100% {
    right: 100%;
  }
}
@keyframes fillTop {
  100% {
    top: 100%;
  }
}
@keyframes fillLeftOdd {
  100% {
    left: 100%;
  }
}




 .card.border-2 { border-width:2px !important; }
                @media (max-width: 767px) {
                  .card-body { padding-top: 3rem !important; }
                }


/*--website development--*/
.webdevelopmentimg {
    width: 100% !important;
    height:400px !important;
    object-fit: cover;
}





/*---seo-agency---*/


/* Unique Styling for this section only */
#seoServicesProSection .seoPro-hover {
  transition: all 0.3s ease-in-out;
}
#seoServicesProSection .seoPro-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
#seoServicesProSection .text-primary {
  color: #0066ff !important;
}
#seoServicesProSection .seoPro-card i {
  background: rgba(0,102,255,0.1);
  padding: 12px;
  border-radius: 50%;
}


#seoDifferentiator .seoDiff-feature {
  transition: all 0.3s ease;
  padding: 10px;
  border-left: 3px solid transparent;
}
#seoDifferentiator .seoDiff-feature:hover {
  transform: translateX(5px);
  border-left: 3px solid #eeaf0a;
}
#seoDifferentiator .seoDiff-badge {
  width: 48px;
  height: 48px;
  background: #eeaf0a;
  color:white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 20px;
  flex-shrink: 0;
}
#seoDifferentiator .seoDiff-graphic::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(0, 120, 255, 0.08), transparent 70%);
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: 1;
}
#seoDifferentiator .seoDiff-bg-shape {
  position: absolute;
  top: 0;
  right: 20%;
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, rgba(0,120,255,0.1), rgba(255,255,255,0));
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
}



/* === SEO Timeline (unique namespace: st-) === */
#seoTimeline {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  position: relative;
}

.st-timeline {
  position: relative;
  margin: 0 auto;
  padding-left: 40px;
  max-width: 720px;
}

.st-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0b63e6 0%, #86b8ff 100%);
  border-radius: 2px;
}

.st-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.st-dot {
  min-width: 45px;
  height: 45px;
  background: #eeaf0a;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(11, 99, 230, 0.3);
}

.st-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  flex: 1;
  transition: all 0.3s ease;
}

.st-content:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Responsive */
@media (max-width: 768px) {
  .st-timeline { padding-left: 0; }
  .st-timeline::before { left: 50%; transform: translateX(-50%); }
  .st-item { flex-direction: column; align-items: center; text-align: center; }
  .st-dot { margin-bottom: 12px; }
  .st-content { padding: 16px 18px; }
}




/* === WHY THIS PROCESS WORKS (unique: wtpw-) === */
#whyThisProcessWorks {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.wtpw-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(11, 99, 230, 0.1);
}

.wtpw-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(11,99,230,0.15);
  border-color: #eeaf0a;
}

.wtpw-icon {
  background: linear-gradient(135deg, #eeaf0a, #eeaf0a);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(11,99,230,0.3);
}

@media (max-width: 768px) {
  .wtpw-item { text-align: center; flex-direction: column; align-items: center; }
  .wtpw-icon { margin-bottom: 12px; }
}



.result-card:hover {
  transform: translateY(-8px);
  transition: all 0.3s ease;
}


.industry-card:hover {
  transform: translateY(-8px);
  transition: all 0.3s ease;
}

/*---seo-agency---*/

/*--SMM--*/


.social-title {
  font-size: 2.75rem;
  line-height: 1.2;
}
.social-text {
  font-size: 1.125rem;
  line-height: 1.8;
}
@media (max-width: 767px) {
  .social-title {
    font-size: 2rem;
  }
  .social-text {
    font-size: 1rem;
  }
}

.tech-title {
  font-size: 2.5rem;
  line-height: 1.2;
}
.tech-intro {
  font-size: 1.125rem;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}
.tech-point h5 {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.tech-note {
  font-size: 1.125rem;
  line-height: 1.8;
}
.tech-point:hover {
  transform: translateY(-6px);
  transition: all 0.3s ease;
}




.smm-title {
  font-size: 2.5rem;
}
.smm-intro {
  font-size: 1.125rem;
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.8;
}
.smm-card h5 {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}
.smm-card p {
  margin-bottom: 0.5rem;
}
.smm-card:hover {
  transform: translateY(-6px);
  transition: all 0.3s ease;
}



.process-flow {
  position: relative;
}

.process-step {
  position: relative;
  background: #fff;
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
  margin: 0 10px;
}

.process-step:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.process-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  width: 40px;
  height: 4px;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0));
  transform: translateY(-50%) rotate(0deg);
  border-radius: 2px;
  z-index: -1;
}

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

.step-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}



.industry-card {
  border-radius: 15px;
  background: #fff;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.3));
  transition: all 0.5s ease;
  z-index: 0;
}

.industry-card:hover::before {
  left: 0;
}

.industry-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.industry-card h5, 
.industry-card .icon {
  position: relative;
  z-index: 1;
}


.why-creatives-section {
  position: relative;
}

.timeline-wrap {
  position: relative;
  padding-left: 30px;
}

.timeline-wrap::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 15px;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,193,7,0.4), rgba(255,193,7,0.1));
  border-radius: 5px;
}

.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

.icon-circle:hover {
  transform: scale(1.1) rotate(10deg);
  background: linear-gradient(135deg, #ffc107, #ffb300);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.7);
}

.timeline-item p {
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  transition: color 0.3s ease;
}

.timeline-item:hover p {
  color: #000;
}


#result-card {
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
#result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,193,7,0.2), rgba(255,193,7,0.4), rgba(255,193,7,0.2));
  transition: all 0.6s ease;
}
#result-card:hover::before {
  left: 100%;
}
#result-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.3);
}

#icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
  transition: all 0.4s ease;
}

#icon-wrap:hover {
  transform: scale(1.15) rotate(8deg);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.7);
}

/*--SMM--*/



/*--graphic design--*/





  #graphic-design-section {
    background: #FFF9E0;
  }
  #gd-heading {
    font-weight: 700;
    color: #d4a000;
    font-size: 2rem;
  }
  .gd-highlight {
    color: #000;
  }
  #gd-intro {
    color: #333;
    font-size: 1rem;
  }
  .gd-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
  }
  .gd-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(212,160,0,0.3);
  }
  .gd-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #d4a000;
  }
  .gd-card-title {
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
  }
  .gd-card-text {
    color: #555;
    font-size: 0.95rem;
  }
  #gd-closing {
    font-weight: 600;
    font-size: 1.2rem;
    color: #333;
  }


  
  .expertise-diagonal {
    background: #FFFAF0;
  }
  .diagonal-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #e07a5f;
  }
  .diagonal-intro {
    color: #555;
    font-size: 1rem;
    margin-top: 10px;
  }

  .diagonal-card-wrapper {
    position: relative;
  }

  .diagonal-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .diagonal-card:hover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow: 0 15px 35px rgba(184, 147, 16, 0.25);
  }

  .diagonal-icon {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .bg-orange { background: #f08a5d; }
  .bg-red { background: #b83b5e; }
  .bg-purple { background: #6a2c70; }
  .bg-blue { background: #0b4f6c; }
  .bg-teal { background: #01a7c2; }
  .bg-orange-dark { background: #e07a5f; }
  .bg-purple-dark { background: #8a2be2; }

  .diagonal-card h5 {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
  }
  .diagonal-card p {
    color: #555;
    font-size: 0.95rem;
  }
  .diagonal-closing {
    font-weight: 600;
    font-size: 1.2rem;
    color: #444;
    margin-top: 20px;
  }

  @media(max-width: 991px){
    .diagonal-card-wrapper { margin-top: 40px !important; }
    .diagonal-card { transform: none !important; }
    .diagonal-icon { top: -20px; right: -20px; }
  }


.feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.border-top-blue { border-top: 4px solid #007bff; }
.border-top-green { border-top: 4px solid #28a745; }
.border-top-yellow { border-top: 4px solid #ffc107; }
.border-top-purple { border-top: 4px solid #6f42c1; }
.border-top-orange { border-top: 4px solid #fd7e14; }

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
.text-blue { color: #007bff; }
.text-green { color: #28a745; }
.text-yellow { color: #ffc107; }
.text-purple { color: #6f42c1; }
.text-orange { color: #fd7e14; }

.feature-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}
.feature-text {
  color: #555;
  font-size: 0.95rem;
}


  .timeline1::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #007bff, #17a2b8);
  }
  .timeline1-item {
    position: relative;
  }
  .timeline1-icon {
    position: relative;
    z-index: 2;
  }
  .timeline1-item:hover h5 {
    color: #007bff;
    transition: color 0.3s ease;
  }
  .timeline1-item:hover p {
    transform: translateX(5px);
    transition: 0.3s ease;
  }

.bv-card {
  border-radius: 15px;
  padding: 10px 15px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bv-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.bv-icon {
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.bv-card h5 {
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}
.bv-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.4;
}

/* Background Colors */
.bv-blue { background: #e7f0ff; }
.bv-green { background: #e6f9e9; }
.bv-yellow { background: #fff8e1; }
.bv-orange { background: #fff2e0; }
.bv-purple { background: #f3e7ff; }

/* Responsive */
@media (max-width: 768px) {
  .bv-card { flex-direction: column; align-items: center; text-align: center; padding: 15px 10px; }
  .bv-icon { margin-bottom: 8px; width: 30px; height: 30px; font-size: 1.3rem; }
}


  .service-card {
    transition: all 0.3s ease;
  }
  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }
  .benefit-badge {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
  }
  .benefit-badge:hover {
background: linear-gradient(90deg, #FFC107, #FFEB3B);
    color: #fff;
    transform: scale(1.05);
  }
   .benefit-badge:hover i {
    color: black !important;
}
  

.visual-impact-diagonal {
  background: #fdfdfd;
  overflow: hidden;
  position: relative;
}

.impact-diag-card {
  border-radius: 20px;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.impact-diag-card:hover {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Diagonal effect */
.diag-left { transform: rotate(-2deg); }
.diag-right { transform: rotate(2deg); }

.impact-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.impact-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.impact-diag-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
}

/* Background Colors */
.bg-blue { background: #e7f0ff; }
.bg-green { background: #e6f9e9; }
.bg-yellow { background: #fff8e1; color: #333; }

/* Overlapping subtle shapes (optional) */
.visual-impact-diagonal::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(0,123,255,0.05);
  border-radius: 50%;
  top: -100px;
  left: -100px;
  z-index: 0;
}
.visual-impact-diagonal::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255,193,7,0.05);
  border-radius: 50%;
  bottom: -80px;
  right: -80px;
  z-index: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .impact-diag-card { transform: rotate(0); padding: 20px 15px; }
  .impact-number { font-size: 2rem; }
  .impact-icon { font-size: 1.5rem; }
}

    .hover-card {
      transition: all 0.3s ease;
      border-radius: 20px;
      background: #fff;
    }
    .hover-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

/*--graphic design--*/




/*-- email marketting--*/



.email-benefits-section {
  background: #f7f9fc;
}

.benefit-card {
  background: #fff;
  border-radius: 18px;
  padding: 25px 20px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.benefit-icon {
  font-size: 2rem;
  margin-bottom: 15px;
  display: inline-block;
  padding: 7px 10px;
  border-radius: 50%;
  background: #eead0a58;
}

.highlight-box {
  background: linear-gradient(135deg, #fff4d9, #ffeec2);
  border-radius: 20px;
  padding: 25px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 6px 15px rgba(0,0,0,0.07);
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .benefit-card { padding: 20px; }
  .benefit-icon { font-size: 1.8rem; padding: 12px; }
}

/* Section Styling */
#email-marketing-section {
  padding: 60px 20px;
  background: #f8f9fc;
  text-align: center;
}


#email-marketing-section p.sub-title {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

/* Grid Layout */
.email-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

/* Feature Cards */
.feature-box {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.feature-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  border-radius: 12px 12px 0 0;
}

#box-1::before { background: linear-gradient(to right, #6a11cb, #8e2de2); }
#box-2::before { background: linear-gradient(to right, #ff7a00, #ffb84d); }
#box-3::before { background: linear-gradient(to right, #009ffd, #2a2a72); }
#box-4::before { background: linear-gradient(to right, #16a085, #84fab0); }
#box-5::before { background: linear-gradient(to right, #f12711, #f5af19); }

/* Hover Effect */
.feature-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.feature-box h3 {
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: bold;
  color: #EEAF0A;
}

.feature-box p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}



.card-custom {
  background: #fff;
  border-left: 5px solid #007bff;
  border-radius: 12px;
  transition: 0.3s ease;
}
.card-custom:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.icon-box {
  background: #FFC107;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}





.trends-timeline {
  margin-left:200px;
  position: relative;
  padding-left: 40px;

}

.trends-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  width: 4px;
  height: 100%;
  background: #dee2e6;
  border-radius: 2px;
}

.trend-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: flex-start;
}

.trend-icon {
  position: absolute;
  left: -4px;
  width: 36px;
  height: 36px;
  background: #007bff;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trend-content {
  background: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-left: 50px;
}

.trend-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.trend-content h5 {
  margin-bottom: 8px;
  font-weight: 600;
}

.trend-content p {
  margin: 0;
  color: #555;
}

@media (max-width: 767px) {
  .trends-timeline {
    padding-left: 20px;
     margin-left:auto;
  }
  .trend-content {
    margin-left: 40px;
  }
}




.maintenance-card {
  background: #fff;
  border-radius: 15px;
  padding: 25px 20px;
  border-left: 5px solid;
  transition: transform 0.3s, box-shadow 0.3s;
}

.maintenance-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Unique border colors for each card */
.border-blue { border-color: #007bff; }
.border-green { border-color: #28a745; }
.border-orange { border-color: #fd7e14; }
.border-purple { border-color: #6f42c1; }
.border-red { border-color: #dc3545; }
.border-teal { border-color: #20c997; }

.maintenance-card h5 {
  margin-bottom: 10px;
  font-weight: 600;
}

.maintenance-card p {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  .maintenance-card {
    margin: 0 auto;
  }
}



.timeline {
  position: relative;
  padding-left: 40px;
  margin-top: 30px;
}

/*---

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  width: 4px;
  height: 100%;
  background:#FFC107;
  border-radius: 2px;
}

---*/


.timeline-item {
  position: relative;
  margin-bottom: 40px;
}
.timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.timeline-content {
  background: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  margin-left:20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.timeline-content h5 {
  margin-bottom: 8px;
  font-weight: 600;
}
.timeline-content p {
  margin: 0;
  color: #555;
}




.bg-light-alt {
  background: #f9fafb;
}

.modern-table {
  border-radius: 12px;
  overflow: hidden;
  border: none;
}

.modern-table thead {
  background: #007bff;
  color: #fff;
}

.modern-table tbody tr {
  transition: transform 0.3s, box-shadow 0.3s;
  background: #fff;
}

.modern-table tbody tr:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.modern-table td, .modern-table th {
  vertical-align: middle;
  padding: 18px;
}

@media (max-width: 767px) {
  .modern-table td, .modern-table th {
    padding: 12px;
    font-size: 0.9rem;
  }
}

.plan-card {
  border: 2px dashed #eeaf0a;
  border-radius: 20px;
  transition: transform 0.4s, box-shadow 0.4s;
  background-color: #ffffff;
}

.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.plan-icon {
  font-size: 2.5rem;
  color: #0d6efd;
}

@media (max-width: 768px) {
  .plan-card {
    margin-bottom: 20px;
  }
}


/*--email marketing--*/



/*--ADS Agency--*/




  .ads-wrapper {
    background-color: #f8f9fa;
  }

  #ads-heading {
    font-size: 2rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
  }

  #ads-heading::after {
    content: "";
    width: 70px;
    height: 4px;
    background-color: #ffb100;
    display: block;
    margin: 12px auto 0;
    border-radius: 4px;
  }

  #ads-description {
    font-size: 1.1rem;
    color: #444;
  }

  /* Base styling */
  .ads-point-box {
    background-color: #ffffff;
    padding: 22px 28px;
    margin-bottom: 22px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    position: relative;
  }

  /* Odd: left border */
  .ads-point-box:nth-child(odd) {
    border-left: 5px solid #ffb100;
  }

  /* Even: right border */
  .ads-point-box:nth-child(even) {
    border-right: 5px solid #0059ff;
  }

  .ads-point-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }

  .ads-point-box h5 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222;
  }

  .ads-point-box p {
    font-size: 1rem;
    color: #555;
  }

  #ads-final-note p {
    font-size: 1.2rem;
    font-weight: 700;
    color: #000;
  }

  @media (max-width: 768px) {
    .ads-point-box {
      padding: 18px;
      border-left: 5px solid #ffb100 !important;
      border-right: none !important;
    }
  }




  #adsExpertiseSection {
    background: #f9f9fb;
  }
  .adsExpertise-title {
    font-weight: 700;
    font-size: 2rem;
  }
  .adsExpertise-subtext {
    max-width: 700px;
    margin: 0 auto;
    color: #555;
  }
  .adsExpertise-tabs .nav-link {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 15px;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
  }
  .adsExpertise-tabs .nav-link.active,
  .adsExpertise-tabs .nav-link:hover {
    background: #ffd700;
    color: #000;
    border-color: #ffd700;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  .adsExpertise-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    animation: fadeIn 0.4s ease-in-out;
  }
  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: translateY(0);}
  }


.adsagencyimg{

  width: auto;
  height: 300px;
}



#howWeWorkSection {
  background: #f9f9fb;
}
.howWeWork-title {
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
}
.howWeWork-subtext {
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px auto;
  text-align: center;
}
.howWeWork-box {
  background: #fff;
  padding: 25px 20px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.howWeWork-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.step-number {
  position: absolute;
  top: -15px;
  left: -15px;
  background: #ffd700;
  color: #000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.howWeWork-box h4 {
  margin-top: 10px;
  font-weight: 600;
}
.howWeWork-box p {
  color: #555;
  margin-top: 10px;
}




#ads-performance .d-flex {
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#ads-performance .d-flex:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/*--ADS Agency--*/


/*-- amazon and noon --*/



.tab-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.tab-card {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  border-left: 6px solid transparent;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.tab-card:nth-child(odd) {
  background: linear-gradient(145deg,#ffffff 0%,#f7f9ff 100%);
  border-left-color: #007bff;
}
.tab-card:nth-child(even) {
  background: linear-gradient(145deg,#fefeff 0%,#f3f8ff 100%);
  border-left-color: #6610f2;
}
.tab-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
.tab-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100%;
  background: rgba(0,123,255,0.05);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: opacity .3s ease;
}
.tab-card:hover::before {
  opacity: 0.15;
}
.tab-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #eeaf0a;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
.tab-card p {
  color: #555;
  margin: 0;
}
@media(max-width:768px){
  .tab-card{padding:1.5rem;}
  .tab-title{font-size:1rem;}
}

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 15px auto;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
  background: rgba(0,123,255,0.15);
}


/*--zoho creator--*/



.zoho-premium-section {
  position: relative;
  overflow: hidden;
}
.zoho-graphic-box {
  width: 280px;
  height: 280px;
  margin: auto;
}
.circle-bg {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0,123,255,0.1), transparent 70%);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}
.zoho-feature-item {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  padding-left: 10px;
}
.zoho-feature-item:hover {
  transform: translateX(5px);
  border-left: 3px solid #ffbf00;
}
.zoho-feature-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.zoho-feature-item:hover .zoho-feature-icon {
  transform: rotate(10deg);
}

.zoho-service-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px 25px;
  text-align: left;
  position: relative;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  border-top: 4px solid transparent;
  transition: all 0.4s ease;
}
.zoho-service-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(0,123,255,0.1), transparent 80%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  border-top-right-radius: 16px;
}
.zoho-service-box:hover {
  transform: translateY(-8px);
  border-top-color: #007bff;
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.icon-wrap {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.zoho-service-box:hover .icon-wrap {
  transform: rotate(10deg);
}



.zoho-ribbon-section {
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.ribbon-item {
  background: rgba(255,255,255,0.8);
  border-radius: 18px;
  padding: 30px 25px;
  text-align: center;
  width: 270px;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

.ribbon-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.ribbon-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  margin: 0 auto 15px auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  animation: floatIcon 3s ease-in-out infinite;
}

/* Floating motion */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Gradient Orbs for background depth */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
.orb1 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at center, #007bff55, transparent 70%);
  top: -80px;
  left: -100px;
}
.orb2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, #00bcd455, transparent 70%);
  bottom: -100px;
  right: -100px;
}



/*--zoho creator--*/

/*--linkedIn services   --*/


.linkedin-section {
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  overflow: hidden;
  position: relative;
}

.linkedin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.linkedin-list li {
  font-size: 16px;
  font-weight: 500;
  color: #444;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 5px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.linkedin-list li:hover {
  transform: translateX(6px);
  color: #0077b5;
}

.linkedin-list i {
  font-size: 18px;
}

.linkedin-graphic {
  position: relative;
}

.linkedin-logo {
  z-index: 2;
  position: relative;
  animation: floatLogo 4s ease-in-out infinite;
}

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

.glow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}

.circle1 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, #0077b5aa, transparent 70%);
  top: -50px;
  left: -30px;
}

.circle2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at center, #00bcd4aa, transparent 70%);
  bottom: -50px;
  right: -50px;
}





.linkedin-services {
  background: linear-gradient(135deg, #f9faff 0%, #ffffff 100%);
}

.service-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e4e7ec;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  border-color: #0077b5;
}

.icon-wrap {
background: linear-gradient(135deg, #FFCC33, #FF9900);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
}

.service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
  


.numbered-feature {
  background: #fff;
  border-radius: 16px;
  padding: 20px 25px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.numbered-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.feature-number {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.feature-content h5 {
  font-size: 18px;
}

.feature-content p {
  font-size: 15px;
  line-height: 1.6;
}

/*--linkedIn services   --*/

/*-- podcast-services--*/


.podcast-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
}
.podcast-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.podcast-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}



.service-card {
  border-radius: 16px;
  padding: 30px 25px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transition: all 0.35s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}
.service-icon {
  position: absolute;
  top: -25px;
  left: 25px;
  font-size: 36px;
  color: rgba(0,0,0,0.08);
}
.wave-bg::before {
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  transform: rotate(30deg);
  z-index:0;
}
.service-content { position: relative; z-index:1; }
.service-content ul { padding-left:20px; margin-top:10px; }
.service-content ul li { margin-bottom:5px; color:#555; font-size:14px; }
@media (max-width:768px){ .service-card { margin-left:0 !important; margin-right:0 !important; } .service-icon { top:-20px; left:15px; font-size:28px; } }

/*-- podcast-services--*/

/* personal brandig */



.branding-text-overlay {
  max-width: 600px;
  background: rgba(255,255,255,0.85);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.1);
  z-index: 2;
}
.branding-text-overlay h2 { font-size: 32px; margin-bottom: 20px; }
.branding-text-overlay p, .branding-text-overlay li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
.branding-text-overlay ul { list-style-type: disc; padding-left: 20px; }



@media(max-width:768px){
  .container { flex-direction: column; text-align:center; }
  .branding-text-overlay { margin-bottom: 20px; }
  .branding-illustration img { max-width: 200px; }
}


/* ====== PERSONAL BRANDING - CHOOSE SECTION ====== */
.pb-choose-section {
  background-color:#FFF3BE;
  color: #1f2937;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Heading */
.pb-hero h2 { font-size: 28px; line-height:1.15; }
.pb-hero p { color:#6b7280; margin-bottom:0.75rem; }

/* Feature rows - fluid, elegant rows (not boxed) */
.pb-features { max-width:980px; margin: 0 auto; display: grid; gap: 18px; }

.pb-feature-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 10px;
  border-radius: 12px;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;
  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.4));
  /* subtle divider line instead of heavy box */
  border-left: 3px solid rgba(0,0,0,0.03);
  backdrop-filter: blur(4px);
}
.pb-feature-row:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(15,23,42,0.06);
}

/* Left badge — compact, vertical wordmark */
.pb-badge {
  min-width:92px;
  max-width:110px;
  padding:10px 12px;
  border-radius:10px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  line-height:1.1;
  text-align:center;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
  flex-shrink:0;
  transform: translateZ(0);
}

/* Badge color accents (swap or theme as needed) */
.bg-accent-1 { background: linear-gradient(135deg,#6aa8ff,#3b82f6); }
.bg-accent-2 { background: linear-gradient(135deg,#6ee7b7,#10b981); }
.bg-accent-3 { background: linear-gradient(135deg,#ffd07a,#f59e0b); color:#111827; }
.bg-accent-4 { background: linear-gradient(135deg,#9ad4ff,#60a5fa); }

/* Text column */
.pb-text {
  font-size:15px;
  color:#374151;
  line-height:1.6;
  flex:1 1 auto;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .pb-feature-row { padding:14px; gap:14px; }
  .pb-badge { min-width:78px; font-size:12px; padding:8px 10px; }
  .pb-hero h2 { font-size:24px; }
  .pb-text { font-size:14px; }
}
@media (max-width: 560px) {
  .pb-features { gap:12px; }
  .pb-feature-row { flex-direction: column; align-items: stretch; text-align:center; padding:12px; }
  .pb-badge { margin: 0 auto 8px auto; }
  .pb-text { padding: 0 6px; }
}


/* personal brandig */