/* Fix for service section background color */
.servcie2.service-page-sec .servcie2-box {
  background-color: #ffffff !important; /* Override gray background with white */
}

/* Force white background for the whole service section */
.servcie2.service-page-sec.sp {
  background: #F5F6F9 !important;
  background-color: #F5F6F9 !important;
}

/* Designing Success Section Styles */
.designing-success-area {
  position: relative; /* Needed for pseudo-element background */
  background-color: #f8f9fa; /* Light grey background as fallback or base */
}

.designing-success-area::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%; /* Adjust width of the map background */
  background-image: url('../img/bg/world-map-dots.png'); /* Path to your dotted world map image */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain; /* Or cover, depending on the map image */
  opacity: 0.5; /* Adjust opacity as needed */
  z-index: 1;
}

.designing-success-area .container {
  position: relative; /* Ensure container content is above the pseudo-element */
  z-index: 2;
}

.stat-item {
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
  height: 100%; /* Ensure all items have the same height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-item .stat-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #e9f5ff; /* Light blue background for icon */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #007bff; /* Icon color */
}

.stat-item .stat-number {
  font-size: 36px;
  font-weight: 700;
  color: #1a294d;
  margin-bottom: 5px;
}

.stat-item .stat-label {
  font-size: 16px;
  color: #555;
  margin-bottom: 0;
}

.stat-item:hover,
.stat-item.highlighted { /* Added .highlighted for the specific item */
  background-color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6; /* Border for hover/highlighted state */
}

.stat-item.highlighted .stat-icon-wrapper {
    background-color: #d4ebff; /* Slightly darker blue for highlighted icon wrapper */
}

/* Ensure FontAwesome is linked in your HTML or imported if using a framework */

/* Styles for .abc animated background with mouse-reactive mask */
.abc {
  position: relative;
  padding: 50px;
  background-color: #000000; /* Dark background */
  color: #FFFFFF; /* Light text color */
  text-align: center;
  min-height: 300px;
  overflow: hidden; /* Crucial for mask and pseudo-elements */

  /* CSS variables for mouse position and mask properties */
  --mouse-x: -9999px; /* Default mask position (off-screen, so section is fully visible) */
  --mouse-y: -9999px;
  --mask-radius: 100px; /* Radius of the transparent circle */
  --mask-feather: 30px; /* Softness of the mask edge */

  mask-image: radial-gradient(
    circle calc(var(--mask-radius) + var(--mask-feather)) at var(--mouse-x) var(--mouse-y),
    transparent 0%, /* Center of mask is transparent */
    transparent var(--mask-radius), /* Transparent up to mask-radius */
    black calc(var(--mask-radius) + var(--mask-feather)) /* Fade to black (opaque) over feather distance */
  );
  mask-repeat: no-repeat; /* Mask should not tile */
}

/* Ensure content within .abc is above the pseudo-elements */
.abc > * {
  position: relative; 
  z-index: 1; /* Content above pseudo-elements (at z-index:0) */
}

.abc::before,
.abc::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Pseudo-elements should not capture mouse events */
  z-index: 0; /* Rendered above parent's background, but below parent's content (with z-index:1) */
  transform-origin: center center; /* For animations */
}

.abc::before {
  background: radial-gradient(ellipse at center, rgba(255,100,0,0.6) 0%, rgba(255,100,0,0) 70%), /* Orange */
              radial-gradient(ellipse at center, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 60%);   /* Red */
  filter: blur(70px); /* Soft, large lights */
  opacity: 0.8;
  animation: flowLights1 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.abc::after {
  background: radial-gradient(ellipse at center, rgba(255,220,50,0.6) 0%, rgba(255,220,50,0) 70%), /* Brighter Yellow */
              radial-gradient(ellipse at center, rgba(255,150,0,0.5) 0%, rgba(255,150,0,0) 60%);  /* Deeper Orange */
  filter: blur(90px);
  opacity: 0.7;
  animation: flowLights2 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite reverse;
}

/* Keyframes for flowing, rotating, and scaling lights */
@keyframes flowLights1 {
  0%   { transform: translate(-25%, -25%) scale(0.9) rotate(0deg); }
  25%  { transform: translate(0%, 20%) scale(1.1) rotate(90deg); }
  50%  { transform: translate(25%, -20%) scale(0.9) rotate(180deg); }
  75%  { transform: translate(-10%, 15%) scale(1.2) rotate(270deg); }
  100% { transform: translate(-25%, -25%) scale(0.9) rotate(360deg); }
}

@keyframes flowLights2 {
  0%   { transform: translate(20%, 25%) scale(1) rotate(0deg); }
  25%  { transform: translate(-20%, 0%) scale(1.2) rotate(-90deg); }
  50%  { transform: translate(-25%, -20%) scale(0.8) rotate(-180deg); }
  75%  { transform: translate(15%, -15%) scale(1.1) rotate(-270deg); }
  100% { transform: translate(20%, 25%) scale(1) rotate(-360deg); }
}

/* Infographic Styles from CodePen - Prefixed with cp- */

/* Font Imports */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@800&display=swap");

:root {
  /* cp-prefixed custom properties for the infographic */
  --cp-font-size: 0.6em; /* Default scale for the infographic elements */
  --cp-bg1: #f5f8f7;
  --cp-blue: #3498db;
  --cp-green: #2ecc71;
  --cp-purple: #9b59b6;
  --cp-gold: #f1c40f;
  --cp-red: #e74c3c;
  --cp-orange: #e67e22;
  --cp-shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --cp-shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

ul.cp-infoGraphic {
  font-size: var(--cp-font-size); /* Scales the infographic children */
  display: flex;
  flex-wrap: nowrap; /* Changed from wrap */
  overflow-x: auto; /* Added for horizontal scrolling */
  padding-bottom: 20px; /* Added for scrollbar space */
  justify-content: flex-start; /* Ensure items start from the left */
  list-style: none;
  padding-left: 0; /* Remove default ul padding */
  margin: 0; /* Adjust as needed, e.g. add top/bottom margin */

  /* Hide scrollbar for IE, Edge */
  -ms-overflow-style: none;  
  /* Hide scrollbar for Firefox */
  scrollbar-width: none;  
}

/* Hide scrollbar for WebKit browsers - Corrected selector */
ul.cp-infoGraphic::-webkit-scrollbar {
  display: none;
}

ul.cp-infoGraphic li {
  position: relative;
  max-width: 25em; /* Relative to var(--cp-font-size) */
  flex-shrink: 0; /* Added to prevent shrinking */
  background: var(--cp-bg1);
  border-radius: 0.5em;
  padding: 0.5em;
  margin: 1em; /* Spacing between items */
  z-index: 1;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: var(--cp-shadow1);
}

ul.cp-infoGraphic li:hover {
  transform: translateY(-5px);
  box-shadow: var(--cp-shadow2);
}

.cp-numberWrap {
  position: absolute;
  /* left, top, etc. will be implicitly set by its position in HTML relative to li */
}

.cp-number {
  font-family: "Maven Pro", sans-serif;
  font-size: 13em; /* This is quite large, relative to parent li's scaled font-size */
  font-weight: 900;
  width: 0.9em; /* Width of the number character */
  text-align: center;
  line-height: 1; /* Adjust if vertical alignment is off */
}

.cp-number.cp-fontColor1 { color: #007aff; } /* Changed */
.cp-number.cp-fontColor2 { color: #007aff; } /* Changed */
.cp-number.cp-fontColor3 { color: #007aff; } /* Changed */
.cp-number.cp-fontColor4 { color: #007aff; } /* Changed */
.cp-number.cp-fontColor5 { color: #007aff; } /* Changed */
.cp-number.cp-fontColor6 { color: #007aff; } /* Changed */

.cp-coverWrap {
  transform: rotate(130deg);
  position: absolute;
  width: 18em; /* Relative to parent li */
  height: 15em; /* Relative to parent li */
  left: -3em;  /* Relative to parent li */
  top: -1em;   /* Relative to parent li */
}

.cp-numberCover {
  position: absolute;
  background: var(--cp-bg1);
  width: 18em; /* Relative to .cp-coverWrap */
  height: 6em; /* Relative to .cp-coverWrap */
  border-radius: 50% 50% 0 0;
  border-bottom: 3px solid var(--cp-bg1); /* Effectively transparent border against same background */
  transition: all 0.4s ease-in-out;
}

.cp-numberCover::before {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 4em;
  right: 4em;
  top: 5em;
  box-shadow: 0 0 30px 17px #48668577; /* Inner shadow effect */
  border-radius: 100px / 10px; /* Elliptical border-radius */
  z-index: -1;
}

.cp-numberCover::after {
  position: absolute;
  bottom: 0;
  content: "";
  left: -10%;
  width: 120%;
  height: 150%;
  background: radial-gradient(at bottom, #48668533, transparent, transparent);
  z-index: 1; /* This may need adjustment if it covers content unexpectedly */
}

.cp-content {
  margin: 8em 3em 1em 7em; /* Original margins, adjust based on visual outcome */
  position: relative;
  font-family: "Poppins", sans-serif;
  color: #444; /* Default text color */
}

.cp-content h2 {
  font-size: 1.7em; /* Relative to .cp-content font-size */
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cp-content p {
  line-height: 1.5em;
  font-size: 1em; /* Base font size for paragraphs in .cp-content */
}

ul.cp-infoGraphic li:hover .cp-coverWrap .cp-numberCover {
  border-radius: 100%; /* Changes shape on hover */
}

/* FontAwesome Icons */
/* Ensure FontAwesome is loaded in your project for these to work. */
.cp-icon {
  position: absolute;
  font-size: 2rem; /* Fixed size, does not scale with --cp-font-size. Change to 'em' if scaling is desired. */
  text-align: center;
  top: -1.3em; /* Relative to its own font-size (2rem) */
  left: 50%;
  transform: translateX(-50%);
}

.cp-icon:before {
  color: #666;
  font-family: FontAwesome; /* This must match the font-family name FontAwesome uses */
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

.cp-icon.cp-iconCodepen:before { content: "\f1cb"; }
.cp-icon.cp-iconSocial:before { content: "\f08a"; }
.cp-icon.cp-iconAirplane:before { content: "\f1d9"; }
.cp-icon.cp-iconMap:before { content: "\f278"; }
.cp-icon.cp-iconBulb:before { content: "\f0eb"; }
.cp-icon.cp-iconPeace:before { content: "\f25b"; }

/* Signature Animation Styles */
.hero72 {
  /* height: 100%; If you want the hero section to take full viewport height */
  /* Or a specific height, e.g., height: 500px; */
  margin: 0; /* Reset margin if needed */
  position: relative; /* Needed for absolute positioning of canvas */
  overflow: hidden; /* To contain the canvas if it overflows */
  z-index: 0; /* Ensure hero content is not overlapped by a non-transparent canvas parent */
}

.hero72 #canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place canvas behind the content */
}

.hero72 .container {
  position: relative; /* Ensure container and its content are above the canvas */
  z-index: 1;
}

/* Styles for dat.GUI if it's used and not styled elsewhere */
.hero72 .dg.main .close-button {
  background-color: #1a1a1a; /* Example color */
}

.hero72 .dg.main .close-button:hover {
  background-color: #2a2a2a; /* Example hover color */
}

.hero72 .dg li:not(.folder) {
  background: #1a1a1a;
  border-bottom: 1px solid #2c2c2c;
}

.hero72 .dg.main .cr.function:hover, .hero72 .dg.main .cr.boolean:hover {
  background: #2a2a2a;
}

.hero72 .dg.main .cr.number input[type=text] {
  color: #eee;
}

.hero72 .dg.main .cr.string input[type=text] {
  color: #eee;
}

/* Class added by JS after animation, scope to hero72 */
.hero72.o-start {
  cursor: auto; /* Restore cursor if it was hidden, or add other styles */
}

/* ===== SEO & DIGITAL MARKETING SOLUTIONS STYLES START ===== */
.seo-digital-marketing-solutions {
    /* Modern gradient background with subtle animation */
    background: linear-gradient(135deg, #007bff 0%, #0056b3 25%, #0d6efd 50%, #007bff 75%, #0056b3 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
    position: relative;
}

.seo-digital-marketing-solutions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(1px);
    z-index: 1;
}

.seo-digital-marketing-solutions .container {
    position: relative;
    z-index: 2;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.seo-section-title-wrapper .title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 60px;    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: -0.5px;
    line-height: 1.2;
    position: relative;
}

.seo-section-title-wrapper .title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-radius: 2px;
}

/* Tabs Styling */
.seo-tabs {
    border-bottom: none;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.seo-tabs .nav-link {
    background: rgba(255, 255, 255, 0.7);
    color: #4a5568;
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
    backdrop-filter: blur(10px);
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.seo-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.seo-tabs .nav-link:hover::before {
    left: 100%;
}

.seo-tabs .nav-link:hover,
.seo-tabs .nav-link:focus {
    background: rgba(255, 255, 255, 0.9);
    color: #2d3748;
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.seo-tabs .nav-link.active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4);
    z-index: 3;
}

#seoDigitalMarketingTabsContent {
    margin-top: 0;
    padding: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#seoDigitalMarketingTabsContent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.tab-pane {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.seo-tab-content-left .tab-content-title {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.seo-tab-content-left .subheading {
    font-size: 20px;
    color: #718096;
    margin-bottom: 35px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.seo-tab-content-left .feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 45px;
}

.seo-tab-content-left .feature-list li {
    font-size: 18px;
    color: #4a5568;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    transition: all 0.3s ease;
    padding: 12px 0;
    border-radius: 8px;
    position: relative;
}

.seo-tab-content-left .feature-list li:hover {
    color: #2d3748;
    background: rgba(0, 123, 255, 0.05);
    padding-left: 8px;
    transform: translateX(8px);
}

.seo-tab-content-left .feature-list li:hover i {
    transform: scale(1.2) rotate(360deg);
    color: #007bff;
}

.seo-tab-content-left .feature-list li i {
    color: #48bb78;
    margin-right: 18px;
    font-size: 20px;
    margin-top: 2px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #48bb78, #38a169);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.seo-tab-content-left .buttons-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.seo-tab-content-left .buttons-group .btn {
    padding: 16px 32px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.seo-tab-content-left .buttons-group .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.seo-tab-content-left .buttons-group .btn:hover::before {
    left: 100%;
}

.seo-tab-content-left .buttons-group .tech-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
}

.seo-tab-content-left .buttons-group .tech-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4);
    color: #ffffff;
}

.seo-tab-content-left .buttons-group .tech-link-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border: 2px solid #007bff;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}

.seo-tab-content-left .buttons-group .tech-link-btn:hover {
    background: #007bff;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.3);
    text-decoration: none;
}

.seo-tab-content-left .buttons-group .tech-link-btn i {
    margin-left: 8px;
    font-size: 0.9em;
    transition: transform 0.3s ease;
}

.seo-tab-content-left .buttons-group .tech-link-btn:hover i {
    transform: translateX(5px);
}

.seo-tab-content-right img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.seo-tab-content-right img:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

.seo-tab-content-right {
    position: relative;
}

.seo-tab-content-right::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(118, 75, 162, 0.1));
    border-radius: 16px;
    z-index: -1;
    transition: all 0.4s ease;
}

.seo-tab-content-right:hover::before {
    transform: scale(1.02);
    opacity: 0.8;
}

/* Additional modern effects and utilities for SEO section */
.seo-digital-marketing-solutions .row {
    position: relative;
}

/* Floating elements animation */
.seo-tab-content-left,
.seo-tab-content-right {
    animation: floatIn 0.8s ease-out;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced glassmorphism for content areas */
.seo-tab-content-left {
    position: relative;
    z-index: 2;
}

.seo-tab-content-left::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.seo-tab-content-left:hover::before {
    opacity: 1;
}

/* Modern scroll indicators */
.seo-tabs::-webkit-scrollbar {
    height: 4px;
}

.seo-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.seo-tabs::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-radius: 2px;
}

.seo-tabs::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0056b3, #007bff);
}

/* Accessibility improvements */
.seo-tabs .nav-link:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.seo-tab-content-left .buttons-group .btn:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Performance optimization for animations */
.seo-tabs .nav-link,
.seo-tab-content-left .buttons-group .btn,
.seo-tab-content-right img {
    will-change: transform;
}

.seo-tabs .nav-link.active,
.seo-tab-content-left .buttons-group .btn:hover,
.seo-tab-content-right img:hover {
    will-change: auto;
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .seo-digital-marketing-solutions {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 25%, #007bff 50%, #2E36EB 75%, #2d3748 100%);
    }
    
    .seo-digital-marketing-solutions::before {
        background: rgba(45, 55, 72, 0.95);
    }
    
    #seoDigitalMarketingTabsContent {
        background: rgba(45, 55, 72, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .seo-tabs {
        background: rgba(45, 55, 72, 0.3);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .seo-tabs .nav-link {
        background: rgba(45, 55, 72, 0.7);
        color: #e2e8f0;
    }
}

/* ===== INTRODUCING KEYWORD SUGGESTIONS SECTION STYLES START ===== */
.introducing-keyword-suggestions-section {
    background: linear-gradient(135deg, #e0f2f1 0%, #f5fcfb 50%, #ffffff 100%);
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.introducing-keyword-suggestions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.keyword-suggestions-box {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 60px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
}

.keyword-suggestions-box::before {
    content: '';
    position: absolute;    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #0056b3, #0d6efd);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: -200% 0; }
    50% { background-position: 200% 0; }
}

.keyword-suggestions-content-left .title {    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(135deg, #2d3748 0%, #007bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.keyword-suggestions-content-left p {
    font-size: 20px;
    color: #4a5568;
    margin-bottom: 35px;
    line-height: 1.6;
    font-weight: 400;
}

.keyword-suggestions-content-left .buttons-group .tech-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.keyword-suggestions-content-left .buttons-group .tech-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.keyword-suggestions-content-left .buttons-group .tech-btn:hover::before {
    left: 100%;
}

.keyword-suggestions-content-left .buttons-group .tech-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4);
    color: #ffffff;
}

.keyword-suggestions-content-right img {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 100%;
    height: auto;
}

.keyword-suggestions-content-right img:hover {
    transform: scale(1.02) rotate(1deg);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .keyword-suggestions-box {
        padding: 40px 30px;
        margin: 0 15px;
    }
    
    .keyword-suggestions-content-left .title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .keyword-suggestions-content-left p {
        font-size: 18px;
        margin-bottom: 30px;
    }
    
    .keyword-suggestions-content-right {
        margin-top: 40px;
    }
}
/* ===== INTRODUCING KEYWORD SUGGESTIONS SECTION STYLES END ===== */

/* ===== LEARN MORE ABOUT MOZ TOOLS SECTION STYLES START ===== */
.learn-more-moz-tools-section {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 25%, #0d6efd 50%, #007bff 75%, #0056b3 100%);
    background-size: 300% 300%;
    animation: gradientFlow 12s ease infinite;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
}

.learn-more-moz-tools-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.learn-more-moz-tools-section .container {
    position: relative;
    z-index: 2;
}

@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 0% 100%; }
    75% { background-position: 100% 0%; }
}

.learn-more-moz-tools-section .heading1 .title {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 50%, #0d6efd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.1;
    letter-spacing: -1px;
    position: relative;
    animation: textShimmer 4s ease-in-out infinite;
}

@keyframes textShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.learn-more-moz-tools-section .heading1 .title::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background: linear-gradient(135deg, #007bff, #0056b3, #0d6efd);
    border-radius: 3px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

@media (max-width: 768px) {
    .learn-more-moz-tools-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .learn-more-moz-tools-section .heading1 .title {
        font-size: 36px;
        letter-spacing: -0.5px;
    }
}

@media (max-width: 480px) {
    .learn-more-moz-tools-section .heading1 .title {
        font-size: 28px;
    }
}
/* ===== LEARN MORE ABOUT MOZ TOOLS SECTION STYLES END ===== */

/* ===== SOLUTION AREA MODERN STYLES START ===== */
.solution.sp.bg1 {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
}

.solution.sp.bg1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 10%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(118, 75, 162, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.solution .heading1 .span {
    display: inline-flex;    align-items: center;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 123, 255, 0.2);
    backdrop-filter: blur(10px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.solution .heading1 .span img {
    margin-right: 8px;
    filter: hue-rotate(200deg);
}

.solution .heading1 h2 {
    font-size: 42px;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 24px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.solution .heading1 p {
    font-size: 18px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 20px;
}

.solution .heading1 .theme-btn1 {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.solution .heading1 .theme-btn1::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
}

.solution .heading1 .theme-btn1:hover::before {
    left: 100%;
}

.solution .heading1 .theme-btn1:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.solution .heading1 .theme-btn1 span i {
    transition: transform 0.3s ease;
}

.solution .heading1 .theme-btn1:hover span i {
    transform: translateX(3px);
}

.solution-images {
    position: relative;
    padding: 40px;
}

.solution-images .image1,
.solution-images .image2,
.solution-images .image3 {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.solution-images .image1:hover,
.solution-images .image2:hover,
.solution-images .image3:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.solution-images img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.solution-images .image1:hover img,
.solution-images .image2:hover img,
.solution-images .image3:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .solution.sp.bg1 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .solution .heading1 h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    .solution .heading1 p {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .solution-images {
        padding: 20px;
        margin-top: 40px;
    }
}
/* ===== SOLUTION AREA MODERN STYLES END ===== */