* { box-sizing: border-box; }

body {
  font-family: "Poppins";
  color: #222;
  background-color: #fff !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.45;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


    .section-title {
      text-align: center;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
    }

    .section-title span {
      color: #8a2be2;
      font-weight: 700;
    }

    .service-card {
      background: #fff;
      border: none;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      border-radius: 15px;
      transition: all 0.3s ease;
      padding: 30px;
      text-align: left;
      height: 100%;
    }

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

    .service-card i {
      font-size: 28px;
      color: #8a2be2;
      margin-bottom: 15px;
    }

    .service-card h5 {
      font-weight: 600;
      color: #4a0072;
      margin-bottom: 10px;
    }

    .service-card p {
      font-size: 0.95rem;
      color: #555;
    }

    .learn-more-btn {
      display: inline-block;
      background: linear-gradient(90deg, #8a2be2, #b14bf4);
      color: #fff;
      padding: 12px 35px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 500;
      margin: 2rem auto 0;
      transition: all 0.3s ease;
    }

    .learn-more-btn:hover {
      background: linear-gradient(90deg, #7a1ed2, #9d3be9);
      color: #fff;
    }

    /* Responsive tweaks */
    @media (max-width: 767px) {
      .section-title {
        font-size: 1.6rem;
      }
      .service-card {
        padding: 25px;
      }
    }
    

.hero-section {
  min-height: 80vh;
  background-image: url('images/Group 1321314167 (2).avif');
  position: relative;
  overflow: hidden;
}

/* Decorative shape (like the star asterisk) */
.hero-section::after {
  content: "✶";
  position: absolute;
  right: 10%;
  top: 30%;
  font-size: 12rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 900;
  transform: rotate(10deg);
}

.hero-title {
  font-size: 2.8rem;
  color: #2F134C !important;
  margin-top: 50px !important;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: #bd4df9 !important;
}

.hero-btn {
background: linear-gradient(353deg, #E178EF, #FB9851);
  border: none;
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hero-btn:hover {
  background-color: #922df0;
  transform: translateY(-2px);
}

/* Responsive text adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-section::after {
    font-size: 8rem;
    right: 5%;
  }
}

/* Section 1 - Listing Optimization */
.listing-section {
  background: url('images/Group 1321314122 (1).avif') no-repeat center center/cover;
  border-radius: 20px;
  margin: 40px auto;
  color: #2e2e2e;
}

.title {
  font-size: 2rem;
  color: #9E3FFD
}

.subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #ff5004 !important;
}

.desc {
  font-size: 1rem;
  color: #555;
}

.card-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

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

/* ===== Section 2 - A/B Split Testing ===== */
.ab-section {
  background-color: #fff;
}

.small-text {
  color: #bd4df9 !important;
  font-weight: 500;
}

.highlight {
  color: #ff5004;
  font-weight: 600;
}

.ab-section h2 {
  color: #2F134C !important;
}

.btn-primary {
  background-image:linear-gradient(353deg, #E178EF, #FB9851);
  border: none;
  padding: 10px 25px;
}

.btn-primary:hover {
  background-color: #692bd8;
}

/* ===== Mockup Image Layout ===== */
.ab-mockup-wrapper {
  position: relative;
  min-height: 360px;
}

.mockup {
  position: absolute;
  width: 350px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.mockup img {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #fff;
  border-radius: 50%;
  font-weight: 600;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

/* Specific positioning to match screenshot */
.mockup-a {
  top: 30px;
  left: 10%;
  transform: ease-out 0.3;
  z-index: 2;
}

.mockup-b {
  top: 70px;
  left: 55%;
  transform: translateX(-10%) rotate(8deg);
  z-index: 1;
}

/* Hover effect */
.mockup:hover {
  transform: scale(1.05);
  z-index: 3;
}

/* Responsive */
@media (max-width: 768px) {
  .ab-mockup-wrapper {
    position: relative;
    width: 260px;           /* compact cluster */
    height: 190px;
    margin: 25px auto 0;    /* center below text */
  }

  .mockup {
    position: absolute;
    width: 220px;           /* smaller image width */
    border-radius: 12px;
    left: 50%;
    transform-origin: center center;
    transition: transform 0.3s ease;
  }

  .mockup-a {
    top: 0;
    left: 50%;
    transform: translateX(-55%) rotate(-5deg); /* slight left */
    z-index: 2;
  }

  .mockup-b {
    top: 35px;
    left: 50%;
    transform: translateX(-40%) rotate(5deg); /* right thoda kam */
    z-index: 1;
  }

  /* Disable hover scale on mobile */
  .mockup:hover {
    transform: none !important;
  }
}



/* Responsive */
@media (max-width: 768px) {
  .listing-section {
    text-align: center;
  }
  .card-box {
    margin-bottom: 20px;
  }
}
  


h2 {
  font-weight: 700;
  color: #2F134C !important;
}
/* ===== Brand Analytics ===== */
.brand-analytics {
  background: #f9f9ff;
}

.brand-analytics .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* ensures text and image both align center */
}

.brand-analytics .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Icon wrapper */
.brand-analytics .card .icon {
  display: flex;                /* needed for centering */
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

/* Image inside icon */
.brand-analytics .card .icon img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* ===== Responsive (Mobile) ===== */
@media (max-width: 768px) {
  .brand-analytics .card {
    margin: 0 auto;
    text-align: center;
  }

  .brand-analytics .card .icon {
    display: flex;              /* make sure flex still applies */
    justify-content: center;
    align-items: center;
    margin: 10px auto;
  }

  .brand-analytics .card .icon img {
    width: 45px;                /* slightly smaller icon on mobile */
    height: 45px;
    margin: 0 auto;
  }
}

/* ===== PPC MANAGEMENT SECTION ===== */
.ppc-management {
  background: #fff;
}

.ppc-management h2 {
  color: #2F134C !important;
}

.ppc-management .btn-primary {
  border: none;
  border-radius: 30px;
  transition: 0.3s;
}

.ppc-management .btn-primary:hover {
  transform: scale(1.05);
}

/* ===== Mobile Only (Image Below Text) ===== */
@media (max-width: 767px) {
  .ppc-management .row {
    display: flex;
    flex-direction: column-reverse; /* text above, image below */
    align-items: center;
  }

  .ppc-management img {
    width: 80%;
    max-width: 300px;
    margin: 20px auto 0 auto;
    display: block;
  }

  .ppc-management h2,
  .ppc-management p,
  .ppc-management .small-text,
  .ppc-management a.btn {
    text-align: center;
  }
}

:root{
  --primary-purple: #7c33ff;
  --light-purple: #f6ebff;
  --muted: #6b6b7a;
  --panel-grad-start: rgba(255,240,255,0.95);
  --panel-grad-end: rgba(230,225,255,0.95);
}


/* ---------- Inventory Panel ---------- */


.inventory-panel{
      background:  url('images/Group 1321314122 (1).avif') no-repeat center center/cover;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
}

/* gradient heading */
.text-gradient {
  color:#9E3FFD;
  font-weight: 800;
  font-size: 1.8rem;
}

/* subtitle */
.subtitle {
  color: #2F134C !important;
}

/* small cards on the right */
.small-card {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  position: relative;
}

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(124,51,255,0.06), rgba(124,51,255,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
}
.large-num {
  color: #ff5004;
  font-size: 20px;
}

/* CTA button style */
.btn-primary {
  background: linear-gradient(353deg, #E178EF, #FB9851);
  border: none;
  box-shadow: 0 6px 18px rgba(124,51,255,0.12);
}
.btn-primary:hover { transform: translateY(-2px); }

/* ---------- Section Titles ---------- */
.section-title {
  color: #2d1636;
  font-size: 1.6rem;
}

/* ---------- Feature Cards ---------- */
.feature-card {
  background: #fff;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid rgba(15,20,40,0.03);
}
.feature-card:hover, .feature-card.hovered {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(11,15,40,0.06);
}
.feature-icon {
  width:56px;
  height:56px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(124,51,255,0.08);
  color: var(--primary-purple);
  font-size: 22px;
  background: linear-gradient(180deg, rgba(124,51,255,0.03), rgba(255,255,255,0.03));
}

/* text styling inside cards */
.feature-card h6 { font-size: 0.95rem; color: #38223f; }
.feature-card p { color: var(--muted); }

/* Enhanced purple icon look */
.purple-icon {
  color: #7c33ff;
  font-size: 22px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.feature-card:hover .purple-icon {
  color: #5e0eea;
}

.text-highlight {
  color: #7c33ff;
  font-weight: 600;
}

/* ---------- Gallery Grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr; /* keep original layout for 1st row */
  gap: 8px;
  align-items: stretch;
}

/* ---------- 1st Row (no changes) ---------- */
.gallery-grid .small {
  height: 330px;
  overflow: hidden;
}

.gallery-grid .small.wide {
  height: 330px;
  overflow: hidden;
}

/* ---------- 2nd Row ---------- */
/* wide left image */
.gallery-grid .large {
  grid-column: 1 / span 2; /* cover first two columns (wider) */
  height: 420px;
  overflow: hidden;
}

/* slightly narrow right image */
.gallery-grid .medium {
  grid-column: 3; /* stays on rightmost column */
  height: 420px;
  overflow: hidden;
}

/* ---------- Image Styling ---------- */
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ---------- Responsive Adjustments ---------- */

/* ✅ Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 images per row */
    justify-items: center; /* center images */
    align-items: center;
  }

  .gallery-grid .small,
  .gallery-grid .large,
  .gallery-grid .medium {
    grid-column: auto !important; /* remove custom spans */
    height: 250px; /* all equal height */
    width: 100%; /* make all equal width */
  }
}

/* ✅ Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr; /* single column */
    justify-items: center;
  }

  .gallery-grid .small,
  .gallery-grid .large,
  .gallery-grid .medium {
    height: 220px; /* equal height */
    width: 100%;
  }
}

/* ================= PODCAST SECTION ================= */
.podcast-section {
  padding: 100px 0;
  background-color: #fff;
  position: relative;
}

.podcast-left {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Purple glow */
.podcast-left::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(155, 73, 255, 0.35), rgba(255, 255, 255, 0));
  border-radius: 50%;
  z-index: 0;
}
   
       
        .text-custom-orange {
            color: #ff5004 !important;
            font-weight: 400 !important;
        }
        
        .letter-spacing-3 {
            letter-spacing: 1px !important;
        }
        
        .animate-blink {
            animation: blink 1.5s infinite;
        }
        
        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }
        

/* Main image */
.browser-img {
  width: 100%;
  max-width: 620px !important;
  z-index: 1;
  border-radius: 15px;
  display: block;
  margin: 0 auto; /* ✅ centers the image */
}

/* Bottle image */
.bottle-img {
  position: absolute;
  top: 220px !important;
  right: 23%;
  width: 160px;
  z-index: 2;
  transition: transform 0.3s ease-out;
}

.bottle-img:hover {
  transform: scale(1.05);
}

/* Right content */
.podcast-content h6 {
  color: #8b46ff;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.podcast-content h2 {
  font-weight: 700;
  color: #1a0631;
  margin-bottom: 25px;
}

.podcast-content p {
  color: #444;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 992px) {
  .podcast-section {
    padding: 70px 0;
  }

  .podcast-left {
    flex-direction: column;
    margin-bottom: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .browser-img {
    max-width: 90% !important;
    margin: 0 auto;
    display: block;
  }

  .bottle-img {
    position: relative;
    top: -30px !important;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    margin-bottom: 10px;
  }

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

  .podcast-content h2 {
    font-size: 26px;
  }

  .podcast-content p {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .podcast-section {
    padding: 60px 0;
  }

  .browser-img {
    max-width: 100% !important;
  }

  .bottle-img {
    width: 110px;
        top: -230px !important;
        left: 103px;

  }

  .podcast-content h2 {
    font-size: 24px;
  }

  .podcast-content p {
    font-size: 14px;
  }
}





/******************************client wins***********************************************/

/* Section title */
.title-text {
  color: #2e1b4f;
  font-weight: 700;
  font-size: 2rem;
}

/* Video container look */
.video-box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Hover effect for depth */
.video-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Adjust video height ratio */
.ratio {
  border-radius: 12px;
}

/* Responsive spacing */
@media (max-width: 767px) {
  .video-box {
    margin-bottom: 1.5rem;
  }
}

   section.reviews-section {
      padding: 100px 0;
      text-align: center;
      overflow: hidden;
    }

    .reviews-section h2 {
      font-weight: 700;
      color: #2b0052;
      margin-bottom: 40px;
    }

    /* Tabs */
    .review-tabs .btn {
      border-radius: 30px;
      padding: 10px 30px;
      font-weight: 500;
      margin: 0 6px;
      transition: 0.3s;
    }

    .btn-tab-active {
      background-color: #8a2be2;
      color: #fff !important;
      border: none;
    }

    .btn-tab {
      background: transparent;
      border: 1px solid #8a2be2;
      color: #8a2be2;
    }

    .btn-tab:hover {
      background: #8a2be2;
      color: #fff;
    }

    /* Reviews Container */
    .reviews-wrapper {
      position: relative;
      margin-top: 50px;
    }

    .reviews-carousel {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 20px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 10px;
    }

    .reviews-carousel::-webkit-scrollbar {
      display: none;
    }

    .review-card {
      flex: 0 0 32%;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
      padding: 25px;
      text-align: left;
      min-width: 320px;
    }

    .stars {
      color: #8a2be2;
      font-size: 18px;
      margin-bottom: 15px;
    }

    .review-card p {
      color: #333;
      line-height: 1.6;
    }

    .review-card strong {
      color: #2b0052;
      font-weight: 600;
    }

    /* Arrows */
    .arrow-btn {
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      background: #8a2be2;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 5;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      transition: background 0.3s;
    }

    .arrow-btn:hover {
      background: #6f1fcf;
    }

    .arrow-left { left: -20px; }
    .arrow-right { right: -20px; }

    /* Powered by */
    .powered-by {
      margin-top: 30px;
      font-size: 14px;
      color: #666;
      text-align: right;
    }

    .powered-by img {
      height: 22px;
      margin-left: 5px;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .review-card {
        flex: 0 0 48%;
      }
    }

    @media (max-width: 767px) {
      .review-card {
        flex: 0 0 90%;
      }

      .arrow-left { left: 0; }
      .arrow-right { right: 0; }
      .powered-by { text-align: center; }
    }
    
    
    
/***************************************Contact Page*****************************************/
/* ===== Gradient Background ===== */
.audit-section {
  background: linear-gradient(120deg, #f3e8ff 0%, #ffffff 100%);
}

/* ===== Text Gradient ===== */
.text-gradient {
  background: linear-gradient(90deg, #7f00ff, #e100ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Form Card Styling ===== */
.form-card {
  border: none;
  transition: all 0.3s ease;
}

.form-card:hover {
  transform: translateY(-3px);
}

/* ===== Badge Images ===== */
.badge-img {
  height: 120px !important;
  width: 120px !important;
  object-fit: contain;
}

.badge-img .hover {
transform: ease-in 0.3 sec;
}

/* ===== Gradient Button ===== */
.btn-gradient {
  background: linear-gradient(353deg, #E178EF, #FB9851);
  border: none;
  color: #fff;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(90deg, #9b4dff, #c465ff);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 991px) {
  .audit-section {
    text-align: center;
  }

  .form-card {
    margin-top: 2rem;
  }

  .badge-img {
    height: 70px;
  }
}


/* ===== Calendar Section ===== */
.calendar-section {
  background: linear-gradient(135deg, #D9BEF5 0%, #FFFFFF 30%, #F5E5D3 70%, #F6CAF6 100%) !important;
  position: relative;
  padding: 120px 15px;
  overflow: hidden;
}


/* White rounded container */
.calendar-wrapper {
  background-image:url('images/Frame 1321314365.avif');
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-align: center;
  position: relative;
}


.rotating-circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 750px;
  animation: rotateCircle 40s linear infinite;
}

@keyframes rotateCircle {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

.calendar-container {
  max-width: 420px;
  background: #fff;
  z-index: 2;
}

.corner-tag {
  position: absolute;
  top: 10px;
  right: -35px;
  background: #ff5004;
  color: #fff;
  font-size: 12px;
  padding: 4px 30px;
  transform: rotate(45deg);
  border-radius: 4px;
}

/* Calendar grid */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-grid div {
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 500;
  color: #555;
}

.calendar-grid div.header {
  font-weight: 600;
  color: #bd4df9;
}

.calendar-grid div:hover {
  background: #f3e8ff;
}

.calendar-grid div.selected {
  background: #6f42c1;
  color: #fff;
}
/* Dropdown styling */
#timezoneSelect {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}

/* ===== Case Studies ===== */
.case-studies {
  background: #fff;
}

.case-card {
  background: linear-gradient(145deg, #fff, #faf6ff);
  border: 1px solid #eee;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

.btn-gradient {
  background: linear-gradient(353deg, #E178EF, #FB9851);
  color: #fff;
  border: none;
  transition: 0.3s;
}

.btn-gradient:hover {
  opacity: 0.9;
}