.elementor-342 .elementor-element.elementor-element-bb55123{width:var( --container-widget-width, 100% );max-width:100%;margin:020px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-342 .elementor-element.elementor-element-bb55123.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-342 .elementor-element.elementor-element-43d520a{margin:020px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-342 .elementor-element.elementor-element-1430f97{margin:020px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for html, class: .elementor-element-bb55123 *//* ============================================================
   DIGITAL MARKETING COURSE HERO SECTION — PREMIUM CSS
   Mobile-first, fully responsive, modern & clean
   ============================================================ */

/* ---------- CSS VARIABLES ---------- */
:root {
  --primary-blue: #2563EB;
  --secondary-cyan: #06B6D4;
  --cta-orange: #F97316;
  --success-green: #22C55E;
  --dark-text: #0F172A;
  --secondary-text: #64748B;
  --light-bg: #F8FAFC;
  --white: #FFFFFF;
  --border: #E2E8F0;

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1200px;
  --section-padding-top: 50px;
  --section-padding-bottom: 40px;
  --section-padding-inline: 20px;
  --gap: 60px;
}

/* ---------- RESET & BASE ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero-section {
  font-family: var(--font-family);
  background: linear-gradient(135deg, #F8FAFC, #EFF6FF);
  width: 100%;
  padding: var(--section-padding-top) var(--section-padding-inline) var(--section-padding-bottom);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hero-container {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  position: relative;
}

/* ---------- DECORATIVE BLUR (behind image) ---------- */
.hero-container::after {
  content: '';
  position: absolute;
  right: -5%;
  bottom: -5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(6, 182, 212, 0.04) 70%, transparent 100%);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

/* ---------- LEFT & RIGHT COLUMNS ---------- */
.hero-content,
.hero-visual {
  width: 100%;
  z-index: 1;
  position: relative;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.2rem;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- BADGE ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary-blue);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  letter-spacing: -0.01em;
  border: 1px solid rgba(37, 99, 235, 0.08);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.04);
  animation: fadeIn 0.8s ease forwards;
  opacity: 0;
  animation-delay: 0.1s;
}

/* ---------- HEADING ---------- */
.main-heading {
  font-size: 2rem; /* mobile-first: 30px = 1.875rem? we use 2rem for better readability */
  font-weight: 800;
  line-height: 1.3;
  color: var(--dark-text);
  max-width: 100%;
  word-break: break-word;
  animation: slideUp 0.7s ease forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

/* ---------- SUB HEADING ---------- */
.sub-heading {
  font-size: 1rem;
  color: var(--secondary-text);
  line-height: 1.7;
  max-width: 100%;
  margin-top: 0.2rem;
}

/* ---------- TRUST POINTS ---------- */
.trust-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  margin: 0.2rem 0 0.2rem;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark-text);
}

.trust-list li::before {
  content: "✔";
  color: var(--success-green);
  font-weight: 700;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  background: rgba(34, 197, 94, 0.10);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- BUTTONS ---------- */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 0.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 1.5rem;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  width: 100%;
  text-align: center;
  cursor: default;
  box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

.btn-primary {
  background: var(--cta-orange);
  color: var(--white);
  border-color: var(--cta-orange);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.20);
}

.btn-primary:hover {
  background: #e05a0f;
  border-color: #e05a0f;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(249, 115, 22, 0.25);
}

.btn-secondary {
  background: var(--white);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.btn-secondary:hover {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

/* ---------- IMAGE ---------- */
.hero-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  border-radius: 20px;
  background: rgba(255,255,255,0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.02);
  animation: float 5s ease-in-out infinite;
}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* ============================================================
   TABLET / SMALL LAPTOP  (≥768px)
   ============================================================ */
@media (min-width: 768px) {
  .hero-section {
    padding: 70px 30px 60px;
  }

  .hero-container {
    gap: 3rem;
  }

  .hero-content {
    gap: 1.4rem;
  }

  .badge {
    font-size: 0.9rem;
    padding: 0.6rem 1.4rem;
  }

  .main-heading {
    font-size: 2.5rem; /* 40px */
    line-height: 1.25;
    max-width: 90%;
  }

  .sub-heading {
    font-size: 1.1rem;
    max-width: 85%;
    line-height: 1.8;
  }

  .trust-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.8rem;
  }

  .trust-list li {
    font-size: 1rem;
    flex: 0 1 auto;
  }

  .cta-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .btn {
    width: auto;
    min-width: 180px;
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  .hero-image {
    max-width: 420px;
  }
}

/* ============================================================
   DESKTOP  (≥1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .hero-section {
    padding: 80px 20px 60px;
    min-height: 100vh;
    align-items: center;
  }

  .hero-container {
    flex-direction: row;
    align-items: center;
    gap: var(--gap);
  }

  .hero-content {
    flex: 1 1 50%;
    align-items: flex-start;
    text-align: left;
    gap: 1.5rem;
  }

  .hero-visual {
    flex: 1 1 50%;
    justify-content: center;
  }

  .badge {
    font-size: 0.85rem;
    padding: 0.6rem 1.4rem;
    margin-bottom: 0.2rem;
  }

  .main-heading {
    font-size: 3rem; /* 48px for laptop */
    line-height: 1.15;
    max-width: 600px;
  }

  .sub-heading {
    font-size: 1.15rem;
    max-width: 560px;
    margin-top: 0;
    line-height: 1.8;
  }

  .trust-list {
    justify-content: flex-start;
    gap: 0.6rem 2rem;
    margin: 0.2rem 0;
  }

  .trust-list li {
    font-size: 1rem;
  }

  .cta-group {
    justify-content: flex-start;
    gap: 1.2rem;
  }

  .btn {
    width: auto;
    padding: 1.1rem 2.2rem;
    font-size: 1.05rem;
  }

  .hero-image {
    max-width: 520px;
  }
}

/* ============================================================
   LARGE DESKTOP  (≥1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .main-heading {
    font-size: 3.5rem; /* 56px */
  }

  .hero-image {
    max-width: 520px;
  }
}

/* ============================================================
   MOBILE  (≤480px)  —  CRITICAL: perfect fit on all phones
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --section-padding-top: 40px;
    --section-padding-bottom: 30px;
    --section-padding-inline: 16px;
  }

  .hero-section {
    padding: var(--section-padding-top) var(--section-padding-inline) var(--section-padding-bottom);
    min-height: auto;
  }

  .hero-container {
    gap: 1.8rem;
  }

  .hero-content {
    gap: 0.9rem;
    width: 100%;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
  }

  .main-heading {
    font-size: 1.85rem; /* ~30px */
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
    hyphens: auto;
  }

  .sub-heading {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 100%;
    padding: 0 0.1rem;
  }

  .trust-list {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .trust-list li {
    font-size: 0.9rem;
    justify-content: center;
    width: 100%;
    gap: 0.4rem;
  }

  .trust-list li::before {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1rem;
  }

  .cta-group {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    min-width: unset;
  }

  .hero-visual {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hero-image {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* ultra small devices (320px) */
  @media (max-width: 360px) {
    :root {
      --section-padding-inline: 12px;
    }
    .main-heading {
      font-size: 1.6rem;
    }
    .sub-heading {
      font-size: 0.88rem;
    }
    .btn {
      font-size: 0.88rem;
      padding: 0.7rem 0.8rem;
    }
    .badge {
      font-size: 0.65rem;
      padding: 0.3rem 0.8rem;
    }
    .trust-list li {
      font-size: 0.85rem;
    }
    .hero-image {
      max-width: 240px;
    }
  }

  /* 375px–414px fine-tuning */
  @media (min-width: 361px) and (max-width: 414px) {
    .main-heading {
      font-size: 1.8rem;
    }
    .hero-image {
      max-width: 300px;
    }
  }

  /* 430px */
  @media (min-width: 415px) and (max-width: 480px) {
    .main-heading {
      font-size: 2rem;
    }
    .hero-image {
      max-width: 320px;
    }
  }
}

/* ---------- ensure no horizontal scroll on any device ---------- */
.hero-section,
.hero-container,
.hero-content,
.hero-visual {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-43d520a */Create a premium, modern, responsive CSS stylesheet for Section 2 (Course Modules) of a Digital Marketing Course Landing Page.

IMPORTANT

This CSS is ONLY for the Course Modules section.

Do NOT generate HTML.

Use modern CSS only.

Use CSS Variables.

Use CSS Grid for module cards.

Use Flexbox where necessary.

The design should perfectly match the Hero Section.

------------------------------------------------

COLOR PALETTE

Primary Blue
#2563EB

Secondary Cyan
#06B6D4

CTA Orange
#F97316

Section Background
#F4F9FF

Card Background
#FFFFFF

Heading
#2563EB

Text
#0F172A

Description
#64748B

Border
#E5E7EB

------------------------------------------------

FONT

Use Google Font

Poppins

Heading Weight

700

Card Title

600

Description

400

Button

600

------------------------------------------------

SECTION

The section should feel compact.

Background

#F4F9FF

Padding Top

60px

Padding Bottom

60px

No unnecessary empty space.

------------------------------------------------

CONTAINER

Maximum Width

1200px

Width

90%

Center aligned

Margin auto

------------------------------------------------

HEADING

Only one heading.

Text

Course Modules

Desktop Size

46px

Tablet

40px

Mobile

32px

Color

#2563EB

Weight

700

Centered

Margin Bottom

40px

No gradient.

No subtitle.

------------------------------------------------

MODULE GRID

Desktop

4 Columns

Tablet

2 Columns

Mobile

1 Column

Gap

24px

------------------------------------------------

MODULE CARD

Background

White

Border Radius

18px

Padding

28px

Equal Height

Minimum Height

220px

Text Align

Center

Soft Shadow

0 10px 30px rgba(37,99,235,0.08)

Transition

0.35s ease

Hover

TranslateY(-8px)

Increase Shadow

0 20px 40px rgba(37,99,235,0.15)

------------------------------------------------

ICON

Place icon inside a circular background.

Circle Size

70px

Background

rgba(37,99,235,0.12)

Icon Color

#2563EB

Icon Size

34px

Margin Bottom

18px

------------------------------------------------

CARD TITLE

Font Size

22px

Weight

600

Color

#0F172A

Margin Bottom

12px

------------------------------------------------

CARD DESCRIPTION

Font Size

16px

Line Height

1.6

Color

#64748B

------------------------------------------------

BOTTOM CTA AREA

Center Align

Margin Top

50px

CTA Button

Background

#F97316

Text Color

White

Padding

16px 34px

Border Radius

12px

Font Size

17px

Weight

600

No Border

Cursor Pointer

Transition

0.3s ease

Hover

Background slightly darker

Move Up

3px

Soft Orange Shadow

0 12px 30px rgba(249,115,22,0.35)

------------------------------------------------

ANIMATIONS

Heading

Fade Up

Cards

Stagger Fade Up

Button

Fade Up

Use smooth keyframe animations.

No floating animations.

------------------------------------------------

RESPONSIVE

1200px

Maintain 4 Columns

992px

2 Columns

768px

2 Columns

576px

1 Column

Reduce Heading

32px

Reduce Card Padding

22px

Button Width

100%

------------------------------------------------

BORDER RADIUS

Cards

18px

Button

12px

Icon Circle

50%

------------------------------------------------

STYLE

Premium

Minimal

Bright

Education

Modern SaaS

Balanced White Space

Soft Shadows

Smooth Hover Effects

Professional Typography

Excellent Mobile Responsiveness

------------------------------------------------

OUTPUT

Generate a clean, well-structured CSS file.

Organize the CSS with comments for:

Variables

Section

Container

Heading

Grid

Cards

Icons

CTA Button

Animations

Responsive

Do NOT include HTML or JavaScript./* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1430f97 */Create a premium, modern, responsive CSS stylesheet for Section 3 (Why Choose Us) of a Digital Marketing Course Landing Page.

IMPORTANT

This CSS is ONLY for the Why Choose Us section.

Do NOT generate HTML.

Use modern CSS only.

Use CSS Variables.

Use CSS Grid.

Use Flexbox where required.

The design must perfectly match the Hero Section and Course Modules section.

------------------------------------------------

COLOR PALETTE

Primary Blue
#2563EB

Secondary Cyan
#06B6D4

CTA Orange
#F97316

Section Background
#FFFFFF

Card Background
#F8FBFF

Heading
#2563EB

Text
#0F172A

Description
#64748B

Border
#E5E7EB

------------------------------------------------

FONT

Google Font

Poppins

Heading Weight

700

Card Title

600

Description

400

Button

600

------------------------------------------------

SECTION

Background

#FFFFFF

Padding Top

60px

Padding Bottom

60px

Keep the section compact.

No unnecessary white space.

------------------------------------------------

CONTAINER

Maximum Width

1200px

Width

90%

Margin

0 auto

------------------------------------------------

HEADING

Only one heading.

Text

Why Choose Us

Desktop

46px

Tablet

40px

Mobile

32px

Color

#2563EB

Weight

700

Text Align

Center

Margin Bottom

45px

No subtitle.

------------------------------------------------

FEATURE GRID

Desktop

3 Columns

Tablet

2 Columns

Mobile

1 Column

Gap

24px

------------------------------------------------

FEATURE CARD

Background

#F8FBFF

Border Radius

18px

Padding

30px

Minimum Height

230px

Text Align

Center

Soft Shadow

0 10px 30px rgba(37,99,235,0.08)

Transition

0.35s ease

Cards must have equal height.

Hover

TranslateY(-8px)

Increase Shadow

0 20px 40px rgba(37,99,235,0.15)

Background changes slightly brighter.

------------------------------------------------

ICON

Large Circular Background

Size

72px

Background

rgba(37,99,235,0.12)

Icon Color

#2563EB

Icon Size

34px

Center aligned

Margin Bottom

20px

------------------------------------------------

CARD TITLE

Font Size

22px

Weight

600

Color

#0F172A

Margin Bottom

12px

------------------------------------------------

CARD DESCRIPTION

Font Size

16px

Color

#64748B

Line Height

1.6

------------------------------------------------

BOTTOM CTA

Center Align

Margin Top

50px

Button

Background

#F97316

Color

White

Padding

16px 36px

Border Radius

12px

Font Size

17px

Weight

600

No Border

Cursor Pointer

Transition

0.3s ease

Hover

Background slightly darker

TranslateY(-3px)

Soft Orange Shadow

0 12px 30px rgba(249,115,22,0.35)

------------------------------------------------

ANIMATIONS

Heading

Fade Up

Cards

Stagger Fade Up

Button

Fade Up

Animation Duration

0.8 seconds

Ease

ease

No floating animations.

------------------------------------------------

RESPONSIVE

1200px

3 Columns

992px

2 Columns

768px

2 Columns

576px

1 Column

Heading

32px

Reduce Card Padding

24px

Button

100% Width

------------------------------------------------

BORDER RADIUS

Cards

18px

Buttons

12px

Icons

50%

------------------------------------------------

STYLE

Premium

Minimal

Modern SaaS

Education Landing Page

Bright

Professional

High Conversion

Soft Shadows

Rounded Cards

Consistent spacing

Excellent Mobile Responsiveness

------------------------------------------------

OUTPUT

Generate a clean and well-organized CSS file.

Organize CSS with comments for:

CSS Variables

Section

Container

Heading

Grid

Cards

Icons

CTA Button

Animations

Responsive

Do NOT include HTML.

Do NOT include JavaScript./* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-480bc4f *//* ============================================
   SECTION 4: CAREER OPPORTUNITIES
   Digital Marketing Course Landing Page
   Modern, premium, consistent with Hero/Modules
   ============================================ */

/* ----- CSS VARIABLES (matching design system) ----- */
:root {
  --career-primary-blue: #2563EB;
  --career-secondary-cyan: #06B6D4;
  --career-cta-orange: #F97316;
  --career-section-bg: #F4F9FF;
  --career-card-bg: #FFFFFF;
  --career-heading-color: #2563EB;
  --career-title-color: #0F172A;
  --career-description-color: #64748B;
  --career-border-color: #E5E7EB;

  --career-font-family: 'Poppins', sans-serif;
  --career-heading-weight: 700;
  --career-card-title-weight: 600;
  --career-description-weight: 400;
  --career-button-weight: 600;

  --career-container-width: 1200px;
  --career-card-radius: 18px;
  --career-button-radius: 12px;
  --career-highlight-radius: 18px;
  --career-transition: 0.35s ease;
}

/* ----- SECTION ----- */
.career-section {
  background: var(--career-section-bg);
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  font-family: var(--career-font-family);
}

/* ----- CONTAINER ----- */
.career-container {
  max-width: var(--career-container-width);
  width: 90%;
  margin: 0 auto;
}

/* ----- HEADING ----- */
.career-heading {
  font-size: 46px;
  font-weight: var(--career-heading-weight);
  color: var(--career-heading-color);
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  animation: careerFadeUp 0.8s ease forwards;
}

/* ----- DESCRIPTION ----- */
.career-description {
  max-width: 700px;
  margin: 0 auto 50px;
  text-align: center;
  font-size: 18px;
  font-weight: var(--career-description-weight);
  color: var(--career-description-color);
  line-height: 1.7;
  animation: careerFadeUp 0.8s ease 0.1s forwards;
  opacity: 0;
}

/* ----- CAREER GRID (3 cols desktop) ----- */
.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ----- CAREER CARD ----- */
.career-card {
  background: var(--career-card-bg);
  border-radius: var(--career-card-radius);
  padding: 30px 24px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.08);
  transition: transform var(--career-transition), box-shadow var(--career-transition);
  will-change: transform;
  opacity: 0;
  animation: careerFadeUp 0.8s ease forwards;
}

/* stagger delay for cards (1–6) */
.career-card:nth-child(1) { animation-delay: 0.15s; }
.career-card:nth-child(2) { animation-delay: 0.25s; }
.career-card:nth-child(3) { animation-delay: 0.35s; }
.career-card:nth-child(4) { animation-delay: 0.45s; }
.career-card:nth-child(5) { animation-delay: 0.55s; }
.career-card:nth-child(6) { animation-delay: 0.65s; }

/* ----- CARD HOVER (lift + shadow) ----- */
.career-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
}

/* ----- ICON (circle) ----- */
.career-icon {
  width: 72px;
  height: 72px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--career-primary-blue);
  font-size: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
  line-height: 1;
}

/* ----- CARD TITLE ----- */
.career-card-title {
  font-size: 22px;
  font-weight: var(--career-card-title-weight);
  color: var(--career-title-color);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

/* ----- CARD DESCRIPTION ----- */
.career-card-desc {
  font-size: 16px;
  font-weight: var(--career-description-weight);
  color: var(--career-description-color);
  line-height: 1.6;
  margin: 0;
  max-width: 240px;
}

/* ----- HIGHLIGHT STRIP ----- */
.career-highlight {
  background: #EAF4FF;
  border-radius: var(--career-highlight-radius);
  padding: 22px 28px;
  margin-top: 45px;
  margin-bottom: 45px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--career-primary-blue);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
  animation: careerFadeUp 0.8s ease 0.7s forwards;
  opacity: 0;
}

/* ----- CTA BUTTON AREA ----- */
.career-cta-area {
  text-align: center;
  animation: careerFadeUp 0.8s ease 0.85s forwards;
  opacity: 0;
}

/* ----- CTA BUTTON ----- */
.career-btn {
  background: var(--career-cta-orange);
  color: #FFFFFF;
  padding: 16px 36px;
  border-radius: var(--career-button-radius);
  border: none;
  font-size: 17px;
  font-weight: var(--career-button-weight);
  font-family: var(--career-font-family);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.30);
  letter-spacing: -0.01em;
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
}

.career-btn:hover {
  background: #EA580C;
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(249, 115, 22, 0.40);
}

/* ----- ANIMATIONS (Fade Up) ----- */
@keyframes careerFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ----- 1200px – 3 columns (default) ----- */

/* ----- 992px – 2 columns ----- */
@media (max-width: 992px) {
  .career-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .career-heading {
    font-size: 40px;
  }
}

/* ----- 768px – 2 columns (tablet) ----- */
@media (max-width: 768px) {
  .career-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .career-card {
    padding: 26px 20px;
    min-height: 210px;
  }

  .career-card-title {
    font-size: 20px;
  }

  .career-card-desc {
    font-size: 15px;
  }

  .career-heading {
    font-size: 36px;
  }

  .career-description {
    font-size: 17px;
    margin-bottom: 40px;
  }

  .career-highlight {
    font-size: 17px;
    padding: 20px 24px;
  }
}

/* ----- 576px – 1 column (mobile) ----- */
@media (max-width: 576px) {
  .career-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .career-card {
    padding: 24px 20px;
    min-height: 190px;
  }

  .career-heading {
    font-size: 32px;
    margin-bottom: 14px;
  }

  .career-description {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .career-card-title {
    font-size: 19px;
  }

  .career-card-desc {
    font-size: 15px;
    max-width: 100%;
  }

  .career-icon {
    width: 64px;
    height: 64px;
    font-size: 30px;
  }

  .career-highlight {
    font-size: 16px;
    padding: 18px 20px;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .career-btn {
    width: 100%;
    max-width: 320px;
    padding: 16px 28px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .career-cta-area {
    padding: 0 4px;
  }
}

/* extra small devices (optional polish) */
@media (max-width: 400px) {
  .career-card {
    padding: 20px 16px;
    min-height: 170px;
  }

  .career-heading {
    font-size: 28px;
  }

  .career-description {
    font-size: 15px;
  }

  .career-highlight {
    font-size: 15px;
    padding: 16px 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2d3d736 */<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Student Success · Digital Marketing Course</title>
  <!-- Poppins from Google Fonts (matches all previous sections) -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    /* reset & fade-up keyframes */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    @keyframes fadeUp {
      0% { opacity: 0; transform: translateY(24px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    /* responsive two‑col stack */
    @media (max-width: 992px) {
      .two-col {
        flex-direction: column !important;
      }
    }
    @media (max-width: 576px) {
      .stat-grid {
        grid-template-columns: 1fr !important;
      }
      .testimonial-card {
        padding: 20px 18px !important;
      }
    }
    /* small utility to keep stat cards equal height */
    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
  </style>
</head>
<body style="margin:0; background:#F8FAFC; font-family:'Poppins',sans-serif;">

<!-- ========== SECTION 5: STUDENT SUCCESS ========== -->
<section style="background:#F8FAFC; padding:70px 24px; font-family:'Poppins',sans-serif;">
  <div style="max-width:1200px; margin:0 auto; width:90%;">

    <!-- MAIN HEADING -->
    <div style="text-align:center; margin-bottom:50px; opacity:0; animation:fadeUp 0.8s ease forwards;">
      <h2 style="font-size:46px; font-weight:700; color:#2563EB; margin:0; line-height:1.2; letter-spacing:-0.02em;">Student Success</h2>
    </div>

    <!-- TWO-COLUMN LAYOUT (desktop 50/50) -->
    <div class="two-col" style="display:flex; gap:40px; align-items:stretch;">

      <!-- ===== LEFT SIDE: 3 Testimonials ===== -->
      <div style="flex:1; display:flex; flex-direction:column; gap:24px;">

        <!-- Testimonial 1 -->
        <div class="testimonial-card" style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.1s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
          <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px;">
            <div style="width:56px; height:56px; border-radius:50%; background:#2563EB; color:white; font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(37,99,235,0.20);">AS</div>
            <div>
              <div style="font-size:18px; font-weight:600; color:#0F172A; line-height:1.3;">Aarav Sharma</div>
              <div style="font-size:14px; font-weight:400; color:#64748B;">Digital Marketing Course</div>
            </div>
          </div>
          <div style="font-size:18px; letter-spacing:2px; color:#F97316; margin-bottom:10px;">⭐⭐⭐⭐⭐</div>
          <p style="font-size:16px; font-weight:400; color:#64748B; line-height:1.6; margin:0;">"The practical projects and live classes gave me the confidence to work on real client campaigns."</p>
        </div>

        <!-- Testimonial 2 -->
        <div class="testimonial-card" style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.2s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
          <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px;">
            <div style="width:56px; height:56px; border-radius:50%; background:#06B6D4; color:white; font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(6,182,212,0.25);">PV</div>
            <div>
              <div style="font-size:18px; font-weight:600; color:#0F172A; line-height:1.3;">Priya Verma</div>
              <div style="font-size:14px; font-weight:400; color:#64748B;">Digital Marketing Course</div>
            </div>
          </div>
          <div style="font-size:18px; letter-spacing:2px; color:#F97316; margin-bottom:10px;">⭐⭐⭐⭐⭐</div>
          <p style="font-size:16px; font-weight:400; color:#64748B; line-height:1.6; margin:0;">"I started freelancing within a few months after completing the course. The learning experience was excellent."</p>
        </div>

        <!-- Testimonial 3 -->
        <div class="testimonial-card" style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.3s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
          <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px;">
            <div style="width:56px; height:56px; border-radius:50%; background:#2563EB; color:white; font-size:22px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(37,99,235,0.20);">RM</div>
            <div>
              <div style="font-size:18px; font-weight:600; color:#0F172A; line-height:1.3;">Rahul Mehta</div>
              <div style="font-size:14px; font-weight:400; color:#64748B;">Digital Marketing Course</div>
            </div>
          </div>
          <div style="font-size:18px; letter-spacing:2px; color:#F97316; margin-bottom:10px;">⭐⭐⭐⭐⭐</div>
          <p style="font-size:16px; font-weight:400; color:#64748B; line-height:1.6; margin:0;">"The trainers explained every topic in simple Hindi, making it easy to understand and apply."</p>
        </div>

      </div>

      <!-- ===== RIGHT SIDE: 4 Statistics (2×2 grid) ===== -->
      <div style="flex:1; display:flex; flex-direction:column; gap:20px;">

        <div class="stat-grid" style="flex:1;">

          <!-- Stat 1 -->
          <div style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 18px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.4s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
            <div style="font-size:40px; font-weight:700; color:#2563EB; line-height:1.2;">500+</div>
            <div style="font-size:16px; font-weight:500; color:#0F172A; margin-top:4px;">Students Trained</div>
          </div>

          <!-- Stat 2 -->
          <div style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 18px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.5s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
            <div style="font-size:40px; font-weight:700; color:#2563EB; line-height:1.2;">100+</div>
            <div style="font-size:16px; font-weight:500; color:#0F172A; margin-top:4px;">Live Projects</div>
          </div>

          <!-- Stat 3 -->
          <div style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 18px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.6s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
            <div style="font-size:40px; font-weight:700; color:#2563EB; line-height:1.2;">95%</div>
            <div style="font-size:16px; font-weight:500; color:#0F172A; margin-top:4px;">Student Satisfaction</div>
          </div>

          <!-- Stat 4 -->
          <div style="background:#FFFFFF; border-radius:18px; box-shadow:0 10px 30px rgba(37,99,235,0.08); padding:24px 18px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:transform 0.3s ease, box-shadow 0.3s ease; opacity:0; animation:fadeUp 0.8s ease 0.7s forwards;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 18px 36px rgba(37,99,235,0.12)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(37,99,235,0.08)';">
            <div style="font-size:36px; font-weight:700; color:#2563EB; line-height:1.2;">♾️</div>
            <div style="font-size:16px; font-weight:500; color:#0F172A; margin-top:4px;">Career Support</div>
            <div style="font-size:14px; font-weight:400; color:#64748B; margin-top:2px;">Lifetime Guidance</div>
          </div>

        </div>
      </div>
    </div>

    <!-- ===== BOTTOM CTA ===== -->
    <div style="text-align:center; margin-top:55px; opacity:0; animation:fadeUp 0.8s ease 0.8s forwards;">
      <a href="#" style="display:inline-block; background:#F97316; color:#FFFFFF; font-family:'Poppins',sans-serif; font-size:17px; font-weight:600; padding:16px 38px; border-radius:12px; text-decoration:none; box-shadow:0 10px 25px rgba(249,115,22,0.30); transition:background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; letter-spacing:-0.01em; border:none; cursor:pointer;" onmouseover="this.style.background='#EA580C'; this.style.transform='translateY(-3px)'; this.style.boxShadow='0 16px 35px rgba(249,115,22,0.40)';" onmouseout="this.style.background='#F97316'; this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 25px rgba(249,115,22,0.30)';">
        🚀 Become Our Next Success Story
      </a>
    </div>

  </div>
</section>

</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c4e01d7 *//* ============================================
   SECTION 6: FINAL CALL TO ACTION
   Digital Marketing Course Landing Page
   Premium, modern, consistent with all sections
   ============================================ */

/* ----- CSS VARIABLES (design system) ----- */
:root {
  --cta-primary-blue: #2563EB;
  --cta-secondary-cyan: #06B6D4;
  --cta-orange: #F97316;
  --cta-section-bg: #F4F9FF;
  --cta-card-bg: #FFFFFF;
  --cta-heading-color: #2563EB;
  --cta-paragraph-color: #64748B;
  --cta-border-color: #E5E7EB;
  --cta-benefit-bg: #F8FAFC;

  --cta-font-family: 'Poppins', sans-serif;
  --cta-heading-weight: 700;
  --cta-paragraph-weight: 400;
  --cta-benefit-weight: 500;
  --cta-button-weight: 600;

  --cta-card-radius: 24px;
  --cta-button-radius: 14px;
  --cta-benefit-radius: 12px;
  --cta-transition: 0.35s ease;
}

/* ----- SECTION ----- */
.cta-section {
  background: var(--cta-section-bg);
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
  overflow: hidden;
  font-family: var(--cta-font-family);
}

/* ----- BACKGROUND EFFECTS (subtle gradient circles) ----- */
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.cta-section::before {
  width: 320px;
  height: 320px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.01) 70%);
}

.cta-section::after {
  width: 260px;
  height: 260px;
  bottom: -60px;
  left: -50px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(6, 182, 212, 0.01) 70%);
}

/* ----- CONTAINER ----- */
.cta-container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ----- CTA BOX (white card) ----- */
.cta-box {
  background: var(--cta-card-bg);
  border-radius: var(--cta-card-radius);
  padding: 60px 48px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.08);
  border: 1px solid var(--cta-border-color);
  position: relative;
  transition: box-shadow 0.3s ease;
}

/* ----- BADGE (premium pill) ----- */
.cta-badge {
  display: inline-flex;
  background: rgba(37, 99, 235, 0.10);
  color: var(--cta-primary-blue);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.1s forwards;
}

/* ----- HEADING ----- */
.cta-heading {
  font-size: 48px;
  font-weight: var(--cta-heading-weight);
  color: var(--cta-heading-color);
  line-height: 1.2;
  margin: 0 auto 20px;
  max-width: 700px;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.2s forwards;
}

/* ----- PARAGRAPH (subheading) ----- */
.cta-paragraph {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 18px;
  font-weight: var(--cta-paragraph-weight);
  color: var(--cta-paragraph-color);
  line-height: 1.8;
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.3s forwards;
}

/* ----- BENEFITS ROW (flex container) ----- */
.cta-benefits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.4s forwards;
}

/* ----- INDIVIDUAL BENEFIT ITEM ----- */
.cta-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--cta-benefit-bg);
  border-radius: var(--cta-benefit-radius);
  border: 1px solid var(--cta-border-color);
  font-size: 16px;
  font-weight: var(--cta-benefit-weight);
  color: #0F172A;
  transition: transform var(--cta-transition),
              box-shadow var(--cta-transition),
              background var(--cta-transition);
  will-change: transform;
}

/* benefit icon (blue circle with check) */
.cta-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--cta-primary-blue);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

/* ----- BENEFIT HOVER (lift + shadow) ----- */
.cta-benefit:hover {
  background: var(--cta-card-bg);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
}

/* stagger delays for benefits (1–5) */
.cta-benefit:nth-child(1) { animation-delay: 0.35s; }
.cta-benefit:nth-child(2) { animation-delay: 0.42s; }
.cta-benefit:nth-child(3) { animation-delay: 0.49s; }
.cta-benefit:nth-child(4) { animation-delay: 0.56s; }
.cta-benefit:nth-child(5) { animation-delay: 0.63s; }

/* ----- CTA BUTTON ----- */
.cta-button {
  display: inline-block;
  background: var(--cta-orange);
  color: #FFFFFF;
  padding: 18px 40px;
  border: none;
  border-radius: var(--cta-button-radius);
  font-size: 18px;
  font-weight: var(--cta-button-weight);
  font-family: var(--cta-font-family);
  cursor: pointer;
  transition: background 0.3s ease,
              transform var(--cta-transition),
              box-shadow var(--cta-transition);
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.30);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.4;
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.5s forwards;
}

/* ----- BUTTON HOVER ----- */
.cta-button:hover {
  background: #EA580C;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(249, 115, 22, 0.40);
}

/* ----- TRUST TEXT (below button) ----- */
.cta-trust {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--cta-paragraph-color);
  opacity: 0;
  animation: ctaFadeUp 0.8s ease 0.6s forwards;
}

/* ----- ANIMATIONS (Fade Up) ----- */
@keyframes ctaFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ----- 1200px – default (everything centered) ----- */

/* ----- 992px – tablet landscape ----- */
@media (max-width: 992px) {
  .cta-heading {
    font-size: 40px;
  }

  .cta-benefits {
    gap: 16px 28px;
  }

  .cta-benefit {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* ----- 768px – tablet portrait ----- */
@media (max-width: 768px) {
  .cta-box {
    padding: 40px 28px;
  }

  .cta-heading {
    font-size: 36px;
    margin-bottom: 16px;
  }

  .cta-paragraph {
    font-size: 17px;
    margin-bottom: 32px;
  }

  .cta-benefits {
    gap: 14px 20px;
    margin-bottom: 32px;
  }

  .cta-benefit {
    padding: 10px 14px;
    font-size: 15px;
  }

  .cta-button {
    padding: 16px 36px;
    font-size: 17px;
  }

  .cta-trust {
    font-size: 15px;
  }
}

/* ----- 576px – mobile ----- */
@media (max-width: 576px) {
  .cta-box {
    padding: 32px 20px;
  }

  .cta-heading {
    font-size: 30px;
    margin-bottom: 14px;
  }

  .cta-paragraph {
    font-size: 16px;
    margin-bottom: 28px;
    line-height: 1.7;
  }

  .cta-benefits {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 28px;
  }

  .cta-benefit {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 15px;
  }

  .cta-benefit-icon {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .cta-button {
    width: 100%;
    max-width: 320px;
    padding: 16px 28px;
    font-size: 16px;
    box-sizing: border-box;
  }

  .cta-trust {
    font-size: 14px;
    margin-top: 18px;
    padding: 0 4px;
  }

  /* adjust background circles for mobile (smaller) */
  .cta-section::before {
    width: 180px;
    height: 180px;
    top: -40px;
    right: -30px;
  }
  .cta-section::after {
    width: 140px;
    height: 140px;
    bottom: -30px;
    left: -20px;
  }
}

/* ----- extra small devices (optional polish) ----- */
@media (max-width: 400px) {
  .cta-box {
    padding: 24px 16px;
  }
  .cta-heading {
    font-size: 26px;
  }
  .cta-paragraph {
    font-size: 15px;
  }
  .cta-benefit {
    font-size: 14px;
    padding: 10px 14px;
  }
}/* End custom CSS */