/* =========================
   THEME TWEAKS
========================= */

/* Header padding with responsive clamp */
.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
}

/* Typography wrapping */
/* Balance headings and elements with `.balance` class */
:is(h1, h2, h3, h4, h5, h6),
.balance {
    text-wrap: balance;
}

/* Use pretty wrapping for body text elements */
p,
blockquote,
li {
    text-wrap: pretty;
}

/* Remove bottom margin from final paragraph */
p:last-child:last-of-type {
    margin-bottom: 0px;
}


/* =========================
   UTILITIES
========================= */

/* Line Clamping */
.line-limit-3,
.line-limit-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-limit-3 {
    -webkit-line-clamp: 3;
}

.line-limit-2 {
    -webkit-line-clamp: 2;
}

/* Visually Hidden (accessible to screen readers) */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Smooth Transition Utility */
.transition {
    transition: all 0.25s ease-in-out;
}


/* =========================
   GP MENU ACCESSIBILITY TWEAKS
========================= */

#site-navigation ul.sub-menu {
    display: block;
}

#site-navigation li:hover .gp-icon svg {
    transform: rotate(180deg);
}

#site-navigation li:hover .sub-menu {
    visibility: visible;
}


/* =========================
   STRETCH LINK (from Bootstrap)
   Note: Only use ONE link per card or this breaks!
========================= */

.stretch-link {
    position: relative;
}

.stretch-link a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.stretch-link a:is(:focus-visible)::after {
    outline: 2px solid;
}

.stretch-link a:is(:hover, :focus) {
    outline: none;
}


/* =========================
   CONTAINER WRAPPER
========================= */

.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    background: var(--neutral-50);
}



/* ===== Pulse Glow Keyframe ===== */

@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(10, 110, 255, 0.4); 
  }
  50% { 
    box-shadow: 0 0 20px 12px rgba(10, 110, 255, 0); 
  }
}

.btn-pulse {
  animation: pulseGlow 2.5s ease-in-out infinite;
}



/* ===== Hero Dotted Background ===== */
.hero-bg {
  position: relative;
  overflow: hidden;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #E5E7EB 1.5px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

/* Content upar rahey dots ke ===== */
.hero-bg > * {
  position: relative;
  z-index: 1;
}


/* ===== Most Popular Badge Center ===== */
.gb-text-9e916308 {
  left: 50%;
  transform: translateX(-50%);
}


/* ===== Hamberger BG Fix ===== */

.gb-menu-toggle:is(:hover, :focus),
.gb-menu-toggle-fbb1cee5:is(:hover, :focus) {
  background-color: transparent !important;
  color: inherit !important;
}


.hero-bg {
    background-color: #ffffff;
}



/* Hero Grid Background */
.ezemodeler-hero {
  position: relative;
  overflow: hidden;
}

.ezemodeler-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(37,99,235,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Top Blue Glow */
.ezemodeler-hero::after {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(37,99,235,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Hero content upar rahe */
.ezemodeler-hero > * {
  position: relative;
  z-index: 1;
}




/* Shimmer Border Badge */
.badge-shimmer {
  position: relative;
  display: inline-flex;
  border-radius: 100px;
  padding: 2px;
  overflow: hidden;
}

.badge-shimmer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  padding-bottom: 200%;
  margin-top: -100%;
  margin-left: -100%;
  background: conic-gradient(
    from 0deg,
    #E2E8F0 0deg,
    #E2E8F0 120deg,
    #93B4F8 160deg,
    #2563EB 180deg,
    #93B4F8 200deg,
    #E2E8F0 240deg,
    #E2E8F0 360deg
  );
  animation: badgeSpin 3s linear infinite;
  z-index: 0;
}

.badge-shimmer > * {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 100px;
}

@keyframes badgeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





.vertical-side-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* */
    opacity: 0.5; 
}

/*  */
.vertical-side-label p {
    font-family: var(--font-mono); /*  */
    font-size: 11px;
    letter-spacing: 3px;
    margin: 0;
}


/*  */
@media (min-width: 769px) {
    .vertical-side-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        opacity: 0.5;
    }
}

/* Mobile*/
@media (max-width: 768px) {
    .vertical-side-label {
        writing-mode: horizontal-tb; /*  */
        transform: none; /* */
        display: block;
        margin-bottom: 10px; /* */
        opacity: 0.7;
    }