1022758: Need to update style section with better styling in pager component

[BarathAravindKannan]

Description

Task 1022758:
Main task: Need to convert .png to .webp images in pager component docs under styling section
Additional task : Now need to update styles in a better visually attractive UI design.

Style used for the banner - container of SfPager component:
<style> .simple-banner { width: 900px; /* height: 450px; */ padding: 40px 20px; border: 2px solid #cccccc; border-radius: 20px; } </style>

Code Studio usage(Mandatory)

• Code Studio used in this PR/MR?

  • Yes
  • No

• If Yes: Primary use (choose one)

  • Generate new content
  • Refactor/improve existing content
  • Review assistance (explanations/summaries)
  • Other:

• Outcome

  • Saved time
  • Neutral
  • Cost time

• If “Cost time” explain in short (1 or 2 lines):

Type of Change

• New documentation page
• Update to existing documentation
• Bug fix (broken links, typos, formatting issues)
• Structural change (folders, navigation, index)
• Content improvement (clarity, examples, screenshots)
• Other (please describe):

Reviewer Checklist (Mandatory)

• Reviewed the provided Code Studio usages related information
• Content changes follow UG/Documentation guidelines
• All provided information reviewed and verified
• Links and previews checked

[SyncfusionBuild]

Build Status: INQUEUE 🕒
Build Location: 1022758-PagerUpdate

[SyncfusionBuild]

Build Status: INPROGRESS 🔃
Build Location: 1022758-PagerUpdate

[SyncfusionBuild]

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 1022758-PagerUpdate
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

[Venkat-Ayothi]

Changes are fine

[Venkat-Ayothi]

Changes are fine