/*==================================================
[Master Stylesheet]

Project:        Rabbit - Equestrian & Horse Riding Club
Version:        1.0
Description:    Rabbit – Horse Riding School & Club HTML 5 Bootstrap Template is a modern, elegant, and fully responsive. Rabbit specially designed for horse riding schools, equestrian clubs, stables, training centers, and horse care services.
                The HTML 5 Bootstrap Template features a clean layout with a strong visual focus, allowing you to showcase riding programs, trainers, facilities, events, and membership details effectively..
====================================================*/

/*==================================================
[Table of Contents]

1.0 Vendor Import
2.0 CSS Global Variables
    • Color Preset
    • Font Family Preset
    • Animation Duration Preset
    • Animation Delay Preset
3.0 Base & Reset
4.0 Section Style
5.0 Hero Container Style
6.0 Banner Style
7.0 Header Style
8.0 Sidebar Style
9.0 Footer Style
10.0 Heading Style
11.0 Button Style
12.0 Card Style
13.0 Color Style
14.0 Image Style
15.0 Form Style
16.0 Banner Home Style
17.0 Banner Page Style
18.0 About Style
19.0 Service Style
20.0 Testimonial Style
21.0 Gallery Style
22.0 Events Style
23.0 Team Style
24.0 Contact CTA Style
25.0 Pricing Style
26.0 FAQs Style
27.0 Contact Style
28.0 Blog Style
29.0 Maps Style
30.0 Icon Style
31.0 Accordion Style
32.0 Custom List
33.0 Custom Spacing
    33.1 Flex Spacing
    33.2 Grid Spacing

====================================================*/

/*==================================================

[Color Glossary]
This section documents all colors used throughout the stylesheet
for quick reference, consistency, and easy maintenance.

PRIMARY COLORS:
---------------
--primary: #111111 (Rich Black)
  └─ Usage: Main text color, headings, primary UI elements
  └─ Contrast Ratio: 19.6:1 on white (AAA) ✓
  └─ Best On: White, light backgrounds (secondary color)
  └─ Examples: Body text, headings, navigation, buttons
  └─ Psychology: Professional, elegant, sophisticated
  └─ Accessibility: Excellent contrast for readability

--secondary: #FDD490 (Warm Gold/Apricot)
  └─ Usage: Brand accent, highlights, backgrounds, warm touches
  └─ Contrast Ratio: 1.6:1 on white (use with dark text)
  └─ Best On: Dark backgrounds (primary color), or use for backgrounds
  └─ Examples: Section backgrounds, button accents, highlights
  └─ Psychology: Warm, friendly, equestrian heritage
  └─ Accessibility: Requires dark text (#111111) for readability
  └─ Pairing: Works beautifully with primary black (#111111)

--text-color: #7A7A7A (Medium Gray)
  └─ Usage: Body text, descriptions, secondary information
  └─ Contrast Ratio: 5.8:1 on white (AA) ✓
  └─ Best On: White, light backgrounds
  └─ Examples: Paragraph text, captions, meta information
  └─ Psychology: Neutral, calm, readable
  └─ Accessibility: AA compliant for normal text

ACCENT COLORS:
--------------
--accent-color: #FFFFFF (Pure White)
  └─ Usage: Text on dark backgrounds, clean surfaces, highlights
  └─ Contrast Ratio: 21:1 on black (AAA) ✓
  └─ Best On: Dark backgrounds (primary, overlays)
  └─ Examples: Hero text, navigation on dark header, footer text
  └─ Psychology: Clean, modern, spacious
  └─ Accessibility: Maximum contrast with primary color

TRANSPARENCY COLORS:
--------------------
--accent-transparent: #FFFFFF00 (Transparent White)
  └─ Usage: Gradient endpoints, transparent overlays
  └─ Opacity: 0% (fully transparent)
  └─ Examples: CSS gradients, fade effects
  └─ Technical: RGBA equivalent: rgba(255, 255, 255, 0)

--accent-sidebar-overlay: #33333380 (Dark Gray 50% opacity)
  └─ Usage: Modal backdrops, sidebar overlays, dimming effects
  └─ Opacity: 50% (hex: 80)
  └─ Best On: Any background (creates darkening effect)
  └─ Examples: Mobile menu overlay, modal backgrounds
  └─ Technical: RGBA equivalent: rgba(51, 51, 51, 0.5)
  └─ Psychology: Creates focus by dimming background content

COLOR COMBINATIONS & PAIRINGS:
-------------------------------
Primary Pairing:
  • Primary (#111111) + Accent White (#FFFFFF) = 21:1 contrast ✓
  • Usage: High-contrast elements, headers, buttons
  • Example: Dark header with white navigation text

Secondary Pairing:
  • Primary (#111111) + Secondary (#FDD490) = Professional warmth
  • Usage: Main brand identity, hero sections
  • Example: Black text on golden background

Tertiary Pairing:
  • Text Gray (#7A7A7A) + White (#FFFFFF) = 5.8:1 contrast ✓
  • Usage: Body content, descriptions
  • Example: Paragraph text on white cards

COLOR USAGE GUIDELINES:
-----------------------
Text on Backgrounds:
  ✓ Primary (#111111) on White = Excellent (19.6:1)
  ✓ Primary (#111111) on Secondary (#FDD490) = Good readability
  ✓ Text Gray (#7A7A7A) on White = AA compliant (5.8:1)
  ✓ Accent White (#FFFFFF) on Primary (#111111) = Excellent (21:1)
  ✗ Secondary (#FDD490) on White = Insufficient for text (use for backgrounds)

Brand Identity:
  • Primary color: Black (#111111) - sophistication
  • Brand accent: Gold (#FDD490) - equestrian heritage
  • Supporting: White (#FFFFFF) - clean, modern

DO'S & DON'TS:
--------------
✓ DO: Use primary black for all main text
✓ DO: Use secondary gold for backgrounds and accents
✓ DO: Use text gray for secondary content
✓ DO: Use white for text on dark backgrounds
✓ DO: Test all color combinations for accessibility

✗ DON'T: Use secondary gold for body text (low contrast)
✗ DON'T: Mix too many gray shades beyond text-color
✗ DON'T: Use transparent overlays without testing readability
✗ DON'T: Hardcode hex values, always use CSS variables

WCAG ACCESSIBILITY COMPLIANCE:
------------------------------
Level AAA (7:1 ratio):
  ✓ Primary on White: 19.6:1
  ✓ Accent White on Primary: 21:1

Level AA (4.5:1 ratio):
  ✓ Text Gray on White: 5.8:1

Recommendations:
  • All text passes WCAG AA minimum
  • Primary combinations exceed AAA standards
  • Always verify custom color combinations
  • Use contrast checker tools for new pairings

RESPONSIVE COLOR NOTES:
-----------------------
• Colors remain consistent across all breakpoints
• Overlay opacity may adjust for mobile (test on device)
• Secondary gold may need adjustment in direct sunlight
• Ensure sufficient contrast on all screen types (OLED, LCD)

====================================================*/

/*==================================================

[Typography System]
Complete typography system based on Poppins (headings) and 
Karla (body text) for the Rabbit equestrian template.

FONT FAMILIES:
--------------
--font-family-heading: "Poppins", sans-serif
  └─ Purpose: Headlines, headings, emphasis elements
  └─ Characteristics: Geometric sans-serif, modern, bold
  └─ Weights: 500 (Medium), 600 (Semi-Bold)
  └─ Usage: h1-h6 elements, navigation, emphasis
  └─ Designer: Indian Type Foundry
  └─ Optimal Size Range: 20px - 68px
  └─ Letter Spacing: Tighter on larger sizes (-2.5px on h1)
  └─ Fallback: Generic sans-serif system fonts
  └─ Loading: Via Google Fonts (fonts.css)

--font-family-text: "Karla", sans-serif
  └─ Purpose: Body text, UI elements, readable content
  └─ Characteristics: Grotesque sans-serif, friendly, open
  └─ Weights: 400 (Regular), 500 (Medium)
  └─ Usage: Paragraphs, buttons, links, body content
  └─ Designer: Jonathan Pinhorn
  └─ Optimal Size Range: 14px - 18px
  └─ Letter Spacing: Normal (browser default)
  └─ Fallback: Generic sans-serif system fonts
  └─ Loading: Via Google Fonts (fonts.css)

HEADING SCALE:
--------------
h1: 68px (4.25rem)
  └─ Font Weight: 600 (Semi-Bold)
  └─ Line Height: 1em (68px) - Tight for impact
  └─ Letter Spacing: -2.5px (Tighter for large display)
  └─ Font Family: Poppins
  └─ Usage: Hero headlines, main page titles
  └─ Character Limit: 15-20 characters recommended
  └─ Breakpoint Scaling: 48px tablet, 36px mobile
  └─ Examples: Homepage hero "Welcome to Rabbit Riding Club"
  └─ Psychology: Bold, commanding attention

h2: 48px (3rem)
  └─ Font Weight: 600 (Semi-Bold)
  └─ Line Height: 1em (48px) - Tight for impact
  └─ Letter Spacing: -0.5px (Slightly tighter)
  └─ Font Family: Poppins
  └─ Usage: Section headers, major divisions
  └─ Character Limit: 25-30 characters recommended
  └─ Breakpoint Scaling: 36px tablet, 28px mobile
  └─ Examples: "Our Services", "Meet Our Trainers"
  └─ Psychology: Authoritative, section leadership

h3: 32px (2rem)
  └─ Font Weight: 600 (Semi-Bold)
  └─ Line Height: 1em (32px) - Tight for impact
  └─ Letter Spacing: -0.5px (Slightly tighter)
  └─ Font Family: Poppins
  └─ Usage: Subsection headers, card titles
  └─ Character Limit: 30-40 characters recommended
  └─ Breakpoint Scaling: 24px mobile
  └─ Examples: Service card titles, feature names
  └─ Psychology: Clear hierarchy, organized

h4: 26px (1.625rem)
  └─ Font Weight: 500 (Medium) - Lighter than h1-h3
  └─ Line Height: 1.1em (28.6px) - More relaxed
  └─ Letter Spacing: Normal (browser default)
  └─ Font Family: Poppins
  └─ Usage: Smaller section headers, widget titles
  └─ Character Limit: 40-50 characters recommended
  └─ Breakpoint Scaling: 22px mobile
  └─ Examples: Blog post titles, sidebar headers

h5: 20px (1.25rem)
  └─ Font Weight: 500 (Medium)
  └─ Line Height: 1.1em (22px)
  └─ Letter Spacing: Normal
  └─ Font Family: Poppins
  └─ Usage: Small headers, emphasized content
  └─ Character Limit: 50-60 characters recommended
  └─ Examples: Card subtitles, list headers

h6: Not explicitly defined (inherits base styles)
  └─ Font Weight: 500 (assumed from pattern)
  └─ Line Height: 1.1em
  └─ Font Family: Poppins
  └─ Usage: Smallest headers, labels

BODY TEXT & UI ELEMENTS:
------------------------
Body Base: 16px (1rem)
  └─ Font Weight: 400 (Regular)
  └─ Line Height: 1.4em (22.4px) - Comfortable reading
  └─ Font Family: Karla
  └─ Color: var(--text-color) #7A7A7A
  └─ Margin: 0 (controlled externally)
  └─ Usage: All paragraph content, descriptions
  └─ Optimal Line Length: 60-75 characters (500-650px)
  └─ Readability: Excellent for body content

Buttons, Links, Anchors: 15px (0.9375rem)
  └─ Font Weight: 500 (Medium)
  └─ Line Height: 1em (15px) - Tight for UI elements
  └─ Font Family: Karla (body font, not heading)
  └─ Text Transform: UPPERCASE
  └─ Color: var(--primary) #111111
  └─ Text Decoration: none
  └─ Usage: All interactive elements, navigation
  └─ Examples: Buttons, navigation links, CTAs
  └─ Psychology: Strong, actionable

BODY ELEMENT SETTINGS:
----------------------
Base Configuration:
  └─ Font Family: Karla (--font-family-text)
  └─ Font Size: 16px (user-scalable base)
  └─ Line Height: 1.4em (comfortable reading)
  └─ Color: #111111 (--primary)
  └─ Properties:
    • margin: 0
    • padding: 0
    • box-sizing: border-box (on all elements)

TYPOGRAPHY HIERARCHY RULES:
---------------------------
1. Size Progression: Clear jumps between levels (68→48→32→26→20)
2. Weight Strategy: Heavy (600) for h1-h3, Medium (500) for h4-h5
3. Line Height Pattern: Tighter (1em) for headlines, relaxed (1.4em) for body
4. Letter Spacing: Negative for large text, normal for small text
5. Font Family Split: Poppins for display, Karla for reading

TYPOGRAPHIC SCALE RATIO:
------------------------
Ratio Analysis:
  • h1 to h2: 1.42x (68px → 48px)
  • h2 to h3: 1.5x (48px → 32px)
  • h3 to h4: 1.23x (32px → 26px)
  • h4 to h5: 1.3x (26px → 20px)
  • Average: ~1.35x (approximate golden ratio)

USAGE RECOMMENDATIONS:
----------------------
Hero Sections:
  • h1 (68px) + p (16px) = 4.25:1 ratio
  • Use h1 for main headline
  • Use p (text-color) for supporting text
  • Add generous spacing (30-40px between elements)

Section Headers:
  • h2 (48px) + p (16px) = 3:1 ratio
  • Use h2 for section titles
  • Use p for descriptions
  • Spacing: 20px between h2 and content

Card Components:
  • h3 (32px) + p (16px) = 2:1 ratio
  • Use h3 for card titles
  • Use p for card descriptions
  • Maintain 15-20px internal padding

Widget Headers:
  • h4 (26px) + content
  • Use for sidebar widgets
  • Use for secondary sections

SPACING GUIDELINES:
-------------------
After Headings:
  • After h1: 30-40px margin-bottom
  • After h2: 25-30px margin-bottom
  • After h3: 20-25px margin-bottom
  • After h4: 15-20px margin-bottom
  • After h5: 10-15px margin-bottom

Between Sections:
  • Major sections: 6em (96px) padding (see section-style)
  • Medium sections: 4em padding (section-pt-4)
  • Consistent across template

RESPONSIVE TYPOGRAPHY:
----------------------
Desktop (≥1200px):
  └─ Use full type scale as defined
  └─ h1: 68px, h2: 48px, h3: 32px

Tablet (768px - 1199px):
  └─ h1: 48-56px (reduce by 25-30%)
  └─ h2: 36-42px
  └─ h3: 28-32px
  └─ h4: 24-26px (maintain or slightly reduce)
  └─ Body: 16px (maintain)

Mobile (<768px):
  └─ h1: 36-42px (reduce by 40-45%)
  └─ h2: 28-32px
  └─ h3: 24-28px
  └─ h4: 20-22px
  └─ h5: 18-20px
  └─ Body: 16px (maintain minimum)
  └─ Increase line height slightly (1.5-1.6em)

ACCESSIBILITY COMPLIANCE:
-------------------------
✓ Base font size: 16px (meets minimum requirement)
✓ Sufficient line height for readability (1.4em body)
✓ Clear hierarchy through size and weight
✓ Semantic HTML structure (h1-h6 order)
✓ Text remains readable when zoomed to 200%
✓ Sufficient color contrast (see Color Glossary)
✓ Font weights available for emphasis (400, 500, 600)

FONT LOADING STRATEGY:
----------------------
• Fonts loaded via @import in fonts.css
• Consider font-display: swap for performance
• Fallback to system sans-serif if fonts fail
• FOUT (Flash of Unstyled Text) acceptable
• FOIT (Flash of Invisible Text) avoided

BEST PRACTICES:
---------------
✓ DO: Use heading hierarchy (h1 → h2 → h3)
✓ DO: Use negative letter-spacing on large text
✓ DO: Keep line length between 60-75 characters
✓ DO: Use text-color (#7A7A7A) for body content
✓ DO: Use primary (#111111) for headings
✓ DO: Maintain consistent spacing

✗ DON'T: Skip heading levels (h1 → h3)
✗ DON'T: Use more than 3 font weights per typeface
✗ DON'T: Make text lines too wide (>800px)
✗ DON'T: Use all caps for long text (only buttons/nav)
✗ DON'T: Reduce font sizes below 14px
✗ DON'T: Use different line heights for same element type

====================================================*/

/*==================================================
[Typography Guide]

Practical typography usage patterns, combinations, and
best practices for implementing the Rabbit template typography system.

COMMON TEXT PAIRINGS:
---------------------
Hero Section Pattern:
  • Heading: h1 (68px, Poppins 600, -2.5px letter-spacing)
  • Subheading: p (16px, Karla 400, text-color)
  • CTA: button (15px, Karla 500, UPPERCASE)
  • Ratio: 4.5:1 (headline to body)
  • Spacing: 30px between headline and text, 20px before button
  • Example: "Expert Horse Riding Instruction" + description + "Book a Lesson"

Section Header Pattern:
  • Title: h2 (48px, Poppins 600, -0.5px letter-spacing)
  • Description: p (16px, Karla 400, text-color)
  • Ratio: 3:1
  • Spacing: 25px between title and description
  • Example: "Our Services" + service overview paragraph

Card Content Pattern:
  • Card Title: h3 (32px, Poppins 600, -0.5px letter-spacing)
  • Card Text: p (16px, Karla 400, text-color)
  • Card Link: a (15px, Karla 500, UPPERCASE)
  • Ratio: 2:1 (title to text)
  • Spacing: 15px between elements
  • Example: Service cards, team member cards, pricing cards

Blog Post Pattern:
  • Post Title: h4 (26px, Poppins 500)
  • Meta Info: span (14px, Karla 400, text-color)
  • Body: p (16px, Karla 400, text-color)
  • Read More: a (15px, Karla 500, UPPERCASE)
  • Spacing: 10px between meta and title, 15px to body

Widget/Sidebar Pattern:
  • Widget Title: h5 (20px, Poppins 500)
  • Widget Content: p (16px, Karla 400) or list items
  • Spacing: 15px below title
  • Example: "Recent Posts", "Categories"

BUTTON & LINK TYPOGRAPHY:
--------------------------
Primary Button:
  └─ Font: Karla, 500 weight
  └─ Size: 15px
  └─ Transform: UPPERCASE
  └─ Color: var(--primary) or var(--accent-color) depending on background
  └─ Padding: Add generous padding (15px 30px typical)
  └─ Example: "BOOK NOW", "LEARN MORE"

Navigation Links:
  └─ Font: Karla, 500 weight
  └─ Size: 15px
  └─ Transform: UPPERCASE
  └─ Color: var(--primary) or var(--accent-color) based on header type
  └─ Hover: Transition color 0.3s ease
  └─ Example: "ABOUT", "SERVICES", "CONTACT"

Text Links (in content):
  └─ Font: Inherit from context (usually Karla 400)
  └─ Size: Inherit (typically 16px)
  └─ Transform: None (maintain sentence case)
  └─ Decoration: Underline or color change
  └─ Example: "Read more about our training programs"

Footer Links:
  └─ Font: Karla, 400-500 weight
  └─ Size: 15px
  └─ Transform: May use uppercase or sentence case
  └─ Color: var(--accent-color) on dark background
  └─ Group with h5 headers

UPPERCASE USAGE RULES:
----------------------
✓ Use UPPERCASE for:
  • All buttons (15px)
  • Navigation menu items (15px)
  • CTAs and action links
  • Small labels or tags
  • Footer navigation

✗ Avoid UPPERCASE for:
  • Headlines (h1-h6) - Use sentence case or title case
  • Body paragraphs
  • Long descriptive text
  • Blog post titles
  • Any text >20 characters

Reasoning: Uppercase reduces readability at length but 
           increases visual impact for short UI elements

TEXT EMPHASIS TECHNIQUES:
-------------------------
Strong Emphasis (Most Important):
  └─ Method: Increase heading level (h3 → h2)
  └─ Or: Use font-weight: 600 (semi-bold)
  └─ Or: Use primary color (#111111) vs text-color (#7A7A7A)
  └─ Example: Section titles, important callouts

Medium Emphasis:
  └─ Method: Use font-weight: 500 (medium)
  └─ Or: Use h4-h5 instead of paragraph
  └─ Or: Use secondary color (#FDD490) background
  └─ Example: Subheadings, card titles, widget headers

Subtle Emphasis:
  └─ Method: Use <strong> tag (inherits semi-bold)
  └─ Or: Change to primary color within text-color paragraph
  └─ Or: Slight size increase (16px → 18px)
  └─ Example: Keywords in paragraphs, important phrases

De-emphasis (Less Important):
  └─ Method: Use text-color (#7A7A7A) instead of primary
  └─ Or: Reduce size slightly (16px → 14px)
  └─ Or: Use lighter weight (500 → 400)
  └─ Example: Timestamps, meta information, captions

SPACING & RHYTHM:
-----------------
Vertical Rhythm Rules:
  • Base unit: 10px (0.625rem)
  • Standard gaps: 10px, 20px, 30px, 40px, 50px
  • Between small elements: 10px
  • Between medium elements: 20px
  • Between large elements: 30px
  • Between sections: 60px+ (6em default)

Practical Spacing:
  • Heading to paragraph: 20px
  • Paragraph to paragraph: 15-20px
  • List items: 10px between items
  • Card internal padding: 20-30px
  • Section padding: 6em (96px) default
  • Button to text: 20-30px

Line Height Strategy:
  • Headlines (h1-h3): 1em (tight, impactful)
  • Subheads (h4-h5): 1.1em (slightly relaxed)
  • Body text: 1.4em (comfortable reading)
  • UI elements: 1em (compact, efficient)
  • Lists: 1.4em (maintain readability)

CHARACTER & LINE LENGTH:
------------------------
Optimal Reading Width:
  • Body paragraphs: 60-75 characters per line
  • Translates to: ~500-650px max-width
  • Headlines: No strict limit (usually shorter naturally)
  • Sidebars: 45-60 characters (narrower columns)

Implementation:
  • Use max-width on paragraph containers
  • Bootstrap columns naturally constrain width
  • Avoid full-width text blocks on large screens
  • Break into columns if content is wide

CONTENT-SPECIFIC GUIDELINES:
-----------------------------
Blog/Article Content:
  • Title: h2 (48px) or h3 (32px)
  • Publish date/author: 14px, text-color
  • Body: p (16px), comfortable line height
  • Subheadings: h4 (26px)
  • Pull quotes: h5 (20px) with special styling
  • Read time: 14px, text-color

Service/Product Cards:
  • Card title: h3 (32px)
  • Short description: p (16px), 2-3 lines max
  • Price/feature: h4 (26px) or larger
  • CTA button: 15px UPPERCASE

Team Member Profiles:
  • Name: h4 (26px)
  • Title/role: p (16px) or smaller (14px)
  • Bio: p (16px), text-color
  • Contact info: 14-15px

Testimonials:
  • Quote text: 18-20px (larger than body for emphasis)
  • Attribution name: h5 (20px)
  • Attribution role: 14-16px, text-color
  • May use italic for quote text

Event Listings:
  • Event name: h4 (26px) or h3 (32px)
  • Date/time: 15px, may use uppercase
  • Location: 16px, text-color
  • Description: p (16px)

Pricing Tables:
  • Plan name: h3 (32px)
  • Price: h2 (48px) or larger for emphasis
  • Price period: 14-16px, text-color
  • Features: 15-16px list
  • CTA: 15px button, UPPERCASE

FORM TYPOGRAPHY:
----------------
Form Labels:
  └─ Font: Karla 500 (Medium)
  └─ Size: 15px
  └─ Transform: May use uppercase for consistency
  └─ Color: var(--primary)
  └─ Spacing: 10px margin-bottom

Input Text:
  └─ Font: Karla 400
  └─ Size: 16px (minimum for mobile to prevent zoom)
  └─ Color: var(--primary)
  └─ Placeholder: text-color (#7A7A7A)

Helper Text:
  └─ Font: Karla 400
  └─ Size: 14px
  └─ Color: var(--text-color)
  └─ Spacing: 5px margin-top

Error Messages:
  └─ Font: Karla 500
  └─ Size: 14px
  └─ Color: Red or warning color
  └─ Display: Below field with 5px margin

Submit Buttons:
  └─ Same as primary buttons (15px, UPPERCASE, Karla 500)

RESPONSIVE ADJUSTMENTS:
-----------------------
Desktop (≥1200px):
  • Use full type scale
  • Comfortable line length (60-75 chars)
  • Generous spacing (30-40px)

Tablet (768px-1199px):
  • Reduce h1-h3 by 20-30%
  • Maintain body text size (16px)
  • Reduce spacing by 15-20%
  • Adjust line length (55-70 chars)

Mobile (<768px):
  • Reduce h1-h3 by 35-45%
  • Keep body text readable (16px minimum)
  • Reduce spacing by 25-30%
  • Accept narrower line length (45-60 chars)
  • Increase touch target sizes (44px minimum)
  • May need larger line-height on small screens (1.5-1.6em)

ACCESSIBILITY CHECKLIST:
------------------------
☑ Minimum font size 16px for body text
☑ Sufficient contrast ratios (see Color Glossary)
☑ Clear heading hierarchy (h1 → h2 → h3...)
☑ Adequate line height (1.4em minimum for body)
☑ Reasonable line length (45-75 characters)
☑ Scalable with user font size settings (use rem/em)
☑ No text in images (except logos)
☑ Sufficient spacing for readability
☑ Touch targets ≥44px on mobile
☑ Text remains readable at 200% zoom

TYPOGRAPHY DON'TS:
------------------
✗ Don't use more than 2 font families
✗ Don't skip heading levels in hierarchy
✗ Don't use font sizes smaller than 14px
✗ Don't use all caps for long text (>25 characters)
✗ Don't set line-height too tight (<1.2em for body)
✗ Don't make lines too long (>90 characters)
✗ Don't center-align long paragraphs
✗ Don't use too many font weights (stick to 400, 500, 600)
✗ Don't forget mobile font scaling
✗ Don't rely on color alone for emphasis (use size/weight too)

TESTING RECOMMENDATIONS:
------------------------
1. Test on actual devices (not just browser resize)
2. Test with browser zoom at 200%
3. Test with user font size preferences
4. Test readability in different lighting conditions
5. Verify hierarchy is clear without color
6. Check line length at different screen sizes
7. Validate heading structure (HTML validator)
8. Test with screen readers
9. Verify touch targets on mobile devices
10. Check kerning/letter-spacing at different sizes

====================================================*/

/*==================================================
    1.0 Vendor Import
==================================================*/

@import url('./fonts.css');
@import url('./vendor/bootstrap.min.css');
@import url('./vendor/fontawesome.css');
@import url('./vendor/brands.css');
@import url('./vendor/regular.css');
@import url('./vendor/solid.css');

/*==================================================
    2.0 CSS Global Variables
==================================================*/

:root{
    /* Color Preset */
    --primary: #111111;
    --secondary: #FDD490;
    --text-color: #7A7A7A;
    --accent-color: #FFFFFF;
    --accent-transparent: #FFFFFF00;
    --accent-sidebar-overlay: #33333380;

    /* Font Family Preset */
    --font-family-heading: "Poppins", sans-serif;
    --font-family-text: "Karla", sans-serif;
    /* Animation Duration Preset */
    --anim-duration-fast: 0.8s;
    --anim-duration-normal: 1.1s;
    --anim-duration-slow: 1.6s;

    /* Animation Delay Preset */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.45s;
}

/*==================================================
    3.0 Base & Reset
==================================================*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    color: var(--primary);
    font-family: var(--font-family-text);
    font-size: 16px;
    line-height: 1.4em;
}

h1{
    font-size: 68px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -2.5px;
}

h2{
    font-size: 48px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.5px;
}

h3{
    font-size: 32px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.5px;
}

h4{
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1em;
}

h5{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1em;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family-heading);
    margin: 0;
}

button, a, .btn{
    color: var(--primary);
    font-family: var(--font-family-text);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1em;
    text-decoration: none;
}

p{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    margin: 0px;
    color: var(--text-color);
}

/*==================================================
    4.0 Section Style
==================================================*/

.section{
    padding: 6em 1em;
}

.section-pt-4{
    padding: 4em 1em 6em 1em;
}

.section-pt-8{
    padding: 8em 1em 6em 1em;
}

.section-py-8{
    padding: 8em 1em;
}

.section-pt-1-pb-8{
    padding: 1em 1em 8em 1em;
}

/*==================================================
    5.0 Hero Container Style
==================================================*/

.hero-container{
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/*==================================================
    6.0 Banner Style
==================================================*/

.banner-home{
    padding: 1em 1em;
    min-height: 100vh;
    background-image: url('../images/hero-images123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 1;
}

.banner-home::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--primary) 0%, var(--accent-transparent) 85%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-page{
    background-image: url('../images/hero-images123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 12em 1em 6em 1em;
    position: relative;
    z-index: 1;
}

.banner-page::before{
    content: '';
    position: absolute;
    background-color: var(--primary);
    opacity: 0.5;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.testimonial-banner{
    background-image: url('../images/hero-images123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.testimonial-banner::before{
    content: '';
    position: absolute;
    background-color: var(--primary);
    opacity: 0.85;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.contact-cta-banner{
    background-image: url('../images/hero-images123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.contact-cta-banner::before{
    content: '';
    position: absolute;
    background-color: var(--primary);
    opacity: 0.5;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.footer-banner{
    background-color: var(--primary);
    color: var(--accent-color);
    padding: 7em 1em 3em 1em;
}

/*==================================================
    7.0 Header Style
==================================================*/


.navbar-container {
    padding: 20px 20px 0px 20px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 10;
}

.navbar{
    background-color: transparent;
    position: relative;
    padding: 0px;
    z-index: 1;
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar-nav{
    flex-wrap: wrap;
    justify-content: center;
}

.navbar .logo-container{
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar .logo-container img{
    width: 75%;
}

.navbar .nav-link-container{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-link{
    color: var(--accent-color);
    font-family: var(--font-family-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1em;
    text-transform: uppercase;
    padding: 15px 15px 15px 15px;
}

.nav-link:hover{
    color: var(--accent-color);
}

.nav-link:focus,
.nav-link.active,
.navbar-nav .nav-link.show{
    color: var(--secondary) !important;
}

.dropdown-menu {
    background-color: var(--accent-color);
    color: var(--primary);
    border-radius: 0;
    border: none;
    padding: 10px 10px 10px 10px;
    overflow: hidden;
    margin-top: 1.125em !important;
    border-radius: 0px;
    min-width: 240px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item{
    background-color: var(--accent-color);
    color: var(--primary);
    transition: all 300ms;
    padding: 15px 30px 15px 30px;
}

.dropdown-item:hover,
.dropdown-item.active{
    background-color: var(--accent-color);
    color: var(--secondary);
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-cta-container{
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.nav-btn{
    display: none;
    padding: 16px 16px;
    background-color: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--secondary);
    box-shadow: none;
    transition: all 300ms ease;
    border: none;
    border-radius: 0px 0px 0px 0px;
    box-shadow: none;
    font-size: 18px;
}

.nav-btn:hover{
    background-color: var(--accent-transparent);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

/*==================================================
    8.0 Sidebar Style
==================================================*/


.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--accent-sidebar-overlay);
    transition: left 0.4s ease-in-out;
    z-index: 10;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--accent-color);
    color: var(--primary);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-header .logo {
    width: 75%;
}

.sidebar-close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--secondary);
    border-radius: 8px 8px 8px 8px;
    color: var(--primary);
    font-weight: 600;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4em;
    cursor: pointer;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

.sidebar-close-btn:hover{
    background-color: var(--accent-color);
    color: var(--primary);
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar-menu li {
    padding: 10px 15px 10px 15px;
}

.sidebar-menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    transition: 0.3s;
    font-family: var(--font-family-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: normal;
    letter-spacing: 0px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.sidebar-menu a:focus {
    color: var(--secondary);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: none;
    background-color: var(--accent-color);
    border-radius: 24px;
    color: var(--primary);
    border: 1px solid var(--primary);
    font-size: 16px;
    cursor: pointer;
    padding: 3px 15px;
    transition: all 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    background-color: var(--accent-color);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/*==================================================
    9.0 Footer Style
==================================================*/

.footer__inner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__main-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 3em;
    border-bottom: 1px solid var(--accent-color);
}

.footer__copyright-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 2em;
}

.footer__copyright-text{
    color: var(--accent-color);
    text-align: end;
}

/*==================================================
    10.0 Heading Style
==================================================*/

.section-heading-fill{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(145deg, var(--secondary) 0%, var(--primary) 85%);
    line-height: 1.2em;
    letter-spacing: -0.5px;
}

.section-heading-fill-accent{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(145deg, var(--accent-color) 0%, var(--secondary) 85%);
    line-height: 1.2em;
    letter-spacing: -0.5px;
}

.section__description-container{
    width: 75%;
}

/*==================================================
    11.0 Button Style
==================================================*/

.btn{
    border: none;
    border-radius: 15px;
    padding: 17px 27px;
    outline: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.btn-secondary-accent{
    border: 1px solid var(--secondary);
    background-color: var(--secondary);
    color: var(--primary);
}

.btn-secondary-accent:hover{
    border: 1px solid var(--secondary);
    background-color: var(--accent-transparent);
    color: var(--secondary);
}

.btn-secondary-accent.btn-play{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

/*==================================================
    12.0 Card Style
==================================================*/

.card{
    border: none;
    border-radius: 5px;
    position: relative;
}

.card__about-legacy{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 3em 3em;
    background-color: var(--primary);
}

.card__service-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--secondary);
    padding-bottom: 2em;
    overflow: hidden;
}

.card-service__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 5px;
    padding: 0em 2em;
}

.team-card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--accent-color);
    border: 1px solid var(--secondary);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
    padding: 2em 2em;
    position: relative;
    z-index: 1;
}

.team-card::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(0deg, var(--primary) 0%, var(--accent-transparent) 100%);
    opacity: 0.75;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.team-card .spacer{
    height: 300px;
}

.team-card.team-card--sarah{
    background-image: url('../images/team1-3.jpg');
}

.team-card.team-card--wulan{
    background-image: url('../images/team3-3.jpg');
}

.team-card.team-card--roy{
    background-image: url('../images/team4-2.jpg');
}

.team-card.team-card--dedy{
    background-image: url('../images/team2-3.jpg');
}

.card__pricing-plan{
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 1px solid var(--secondary);
    padding: 2em 2em;
}

.card__contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.25);
    padding: 3em 3em;
    border-radius: 10px;
}

.card-blog{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1em 1em;
    border: 1px solid var(--secondary);
}

.card_recent-post{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: var(--primary);
    color: var(--accent-color);
    border-radius: 5px;
    padding: 3em 3em;
}

/*==================================================
    13.0 Color Style
==================================================*/

.secondary-accent{
    color: var(--secondary);
}

.accent-color{
    color: var(--accent-color);
}

.text-color{
    color: var(--text-color);
}

/*==================================================
    14.0 Image Style
==================================================*/

.image-container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.image-container img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 5px;
}

.avatar-image img{
    width: 100%;
    border: 1px solid var(--accent-color);
    border-radius: 100%;
}

.gallery-image img{
    width: 100%;
}

.gallery-image.gallery-image--wide img{
    height: 297px;
}

.gallery-image.gallery-image--short img{
    height: 320px;
}

.gallery-image.gallery-image--short-wide img{
    height: auto;
}

.gallery-image.gallery-image--tall img{
    height: auto;
}

.gallery-image.gallery-image--short-tall img{
    height: auto;
}

.blog-image{
    width: 100%;
}

.single-post-image{
    padding: 16px 40px;
}

.single-post-image img{
    width: 100%;
}

.footer-logo img{
    width: 35%;;
}

/*==================================================
    15.0 Form Style
==================================================*/

.form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form label{
    font-family: var(--font-family-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1em;
    color: var(--primary);
}

.form .btn-secondary-accent:hover{
    background-color: var(--primary);
    color: var(--secondary);
}

.form input,
.form textarea,
#newsletter-form input{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    border-radius: 0px;
    background-color: var(--accent-color);
    outline: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--text-color);
    color: var(--text-color);
    width: 100%;
    padding: 15px 15px;
}

#newsletter-form input{
    border-radius: 5px;
}

.form input:autofill,
.form textarea:autofill,
#newsletter-form input:autofill{
    background-color: transparent;
    color: var(--primary);
    transition: background-color 5000s ease-in-out;
    -webkit-text-fill-color: var(--primary);
    font-family: var(--font-family-text);
}

#newsletter-form button{
    border-radius: 10px;
    padding: 18.5px 15px;
}

#newsletter-form .btn-secondary-accent:hover{
    background-color: var(--primary);
    color: var(--accent-color);
}

.alert .form-validaton{
    color: var(--primary);
}

.alert.alert-newsletter .form-validaton{
    color: var(--accent-color);
}

.hidden{
    display: none;
}

/*==================================================
    16.0 Banner Home Style
==================================================*/

.banner-home__inner-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}

.banner-home__title{
    color: var(--accent-color);
}

.banner-home__description{
    width: 75%;
    color: var(--accent-color);
}

.banner-home__achievement-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner-home__stat,
.banner-home__suffix{
    font-family: var(--font-family-heading);
    color: var(--accent-color);
    font-size: 60px;
    font-weight: 600;
    line-height: 1em;
}

.banner-home__stat-title{
    color: var(--accent-color);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
}

.col>.banner-home__achievement-container{
    border-right: 1px solid var(--accent-color);
}

/*==================================================
    17.0 Banner Page Style
==================================================*/

.banner-page__inner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-page__heading{
    font-family: var(--font-family-heading);
    font-size: 68px;
    font-weight: 600;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(145deg, var(--secondary) 0%, var(--accent-color) 85%);
    line-height: 1.2em;
    letter-spacing: -0.5px;
}

/*==================================================
    18.0 About Style
==================================================*/

.about__inner-container{
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.about__highlight-item{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    padding-left: 2em;
    border-left: 2px solid var(--secondary);
}

.about__highlight-item-title{
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1em;
}

.about-legacy__title{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(145deg, var(--accent-color) 0%, var(--secondary) 85%);
}

.about-legacy__banner{
    background-image: url('../images/aboutimage123.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 100%;
    border-radius: 5px;
}

.about-legacy__banner .spacer{
    height: 50px;
}

/*==================================================
    19.0 Service Style
==================================================*/

.service__inner-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/*==================================================
    20.0 Testimonial Style
==================================================*/

.testimonial__inner-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
    text-align: center  ;
}

.testimonial__avatar-container{
    display: grid;
    gap: 20px;
}

.testimonial__avatar-container.avatar-container--lg{
    grid-template-columns: repeat(10, 1fr);
    width: 60%;
}

.testimonial__avatar-container.avatar-container--sm{
    grid-template-columns: repeat(7, 1fr);
    width: 40%;
}

.testimonial__quote-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonial__quote-text{
    font-size: 24px;
    color: var(--accent-color);
}

.testimonial__divider{
    align-self: center;
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
}

.testimonial__testimonial-author-name{
    font-family: var(--font-family-heading);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1em;
    color: var(--secondary);
}

.testimonial__testimonial-designation{
    font-family: var(--font-family-heading);
    font-size: 15px;
    font-weight: 400;
    line-height: 1em;
    color: var(--accent-color);
}

/*==================================================
    21.0 Gallery Style
==================================================*/

.gallery__inner-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/*==================================================
    22.0 Events Style
==================================================*/

.events__inner-container{
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.event__event-content-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event__event-active{
    width: 30%;
    height: 100%;
    background-image: url('../images/hero-images123.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2em 2em;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}

.event__event-active::before{
    content: '';
    position: absolute;
    background-color: var(--primary);
    opacity: 0.5;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.event__event-active .spacer{
    height: 150px;
}

.event-active-date{
    font-size: 48px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.event__event-content-list{
    display: grid;
    grid-template-columns: 10fr 65fr 25fr;
    gap: 20px;
    margin-top: 10px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--primary);
}

/*==================================================
    23.Team Style
==================================================*/

.team__inner-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.team-social-container{
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/*==================================================
    24.0 Contact CTA Style
==================================================*/

.contact-cta__inner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*==================================================
    25.0 Pricing Style
==================================================*/

.pricing__inner-container{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.pricing__heading-text{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(145deg, var(--secondary) 0%, var(--primary) 85%);
}

.pricing__price-text{
    font-family: var(--font-family-heading);
    font-size: 48px;
    font-weight: 600;
    line-height: 1em;
    letter-spacing: -0.5px;
    color: var(--primary);
}

/*==================================================
    26.0 FAQs Style
==================================================*/

.faqs__inner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*==================================================
    27.0 Contact Style
==================================================*/

.contact__inner-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.contact-info-text{
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1em;
}

/*==================================================
   28.0 Blog Style
==================================================*/

.blog__inner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog__meta-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

.blog-meta,
.blog-meta-divider{
    font-family: var(--font-family-text);
    font-size: 14px;
    color: var(--text-color);
}

.recent-post__divider{
    border-bottom: 1px solid var(--secondary);
}

.recent-post_blog-link{
    color: var(--accent-color);
}

/*==================================================
   29.0 Maps Style
==================================================*/

.maps{
    width: 100%;
    height: 350px;
    border-radius: 10px;
}

/*==================================================
   30.0 Icon Style
==================================================*/

.about__highlight-icon{
    background-color: transparent;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    font-size: 20px;
    border-radius: 5px;
    padding: 15px;
    aspect-ratio: 1/1;
}

.team-social-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary);
    fill: var(--primary);
    transition: all 0.3s ease;
}

.team-social-icon:hover{
    background-color: var(--primary);
    color: var(--accent-color);
}

.contact-info-icon{
    padding: 15px;
    font-size: 25px;
    border-radius: 5px;
    background-color: var(--primary);
    color: var(--secondary);
}

.social-footer-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    aspect-ratio: 1/1;
    border-radius: 5%;
    padding: 3px 10px;
    background-color: var(--accent-color);
    color: var(--primary);
    fill: var(--primary);
    transition: all 0.3s ease;
}

.social-footer-icon:hover{
    background-color: var(--secondary);
    color: var(--primary);
}

/*==================================================
   31.0 Accordion Style
==================================================*/

.accordion {
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.accordion .accordion-item {
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: var(--primary);
    outline: none;
}

.accordion .accordion-item .accordion-body {
    color: var(--text-color);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    padding: 25px 25px 25px 55px;
    text-align: start;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion .accordion-button {
    align-items: center;
    background-color: var(--primary);
    border: none;
    border-radius: 5px;
    color: var(--accent-color);
    display: flex;
    flex-direction: row;
    font-family: var(--font-family-heading);
    font-size: 15px;
    font-weight: 400;
    justify-content: start;
    line-height: 1em;
    outline: none;
    overflow: hidden;
    padding: 20px 20px;
    position: relative;
    text-transform: none;
}

.accordion-button::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v10.793l3.146-3.147a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.293V2.5A.5.5 0 0 1 8 2z"/></svg>');
}

.accordion .accordion-button:not(.collapsed) {
    background-color: var(--primary);
    border: none;
    box-shadow: none;
    color: var(--secondary);
    fill: var(--secondary);
    outline: none;
}

/*==================================================
   32.0 Custom List
==================================================*/

.checklist{
    list-style: none;
    padding-left: 0;
}

.checklist li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
    color: var(--text-color);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
}

.checklist li:last-child{
    margin-bottom: 0px;
}

.checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--primary);
    margin-right: 0.5em;
    font-size: 0.875rem;
    display: inline-block;
}
/*==================================================
   33.0 Custom Spacing
==================================================*/

/* 33.1 Flex Spacing */

.flex-gap-0 { 
    gap: 0px 0px; 
}
.flex-gap-1 { 
    gap: 10px 10px; 
}
.flex-gap-2 { 
    gap: 20px 20px; 
}
.flex-gap-3 { 
    gap: 30px 30px; 
}
.flex-gap-4 { 
    gap: 40px 40px; 
}
.flex-gap-5 {
    gap: 50px 50px; 
}
.flex-gap-x-0 { 
    column-gap: 0px; 
}
.flex-gap-x-1 { 
    column-gap: 10px; 
}
.flex-gap-x-2 { 
    column-gap: 20px; 
}
.flex-gap-x-3 { 
    column-gap: 30px; 
}
.flex-gap-x-4 { 
    column-gap: 40px; 
}
.flex-gap-x-5 { 
    column-gap: 50px; 
}

.flex-gap-y-0 { 
    row-gap: 0px; 
}
.flex-gap-y-1 { 
    row-gap: 10px; 
}
.flex-gap-y-2 { 
    row-gap: 20px; 
}
.flex-gap-y-3 { 
    row-gap: 30px; 
}
.flex-gap-y-4 { 
    row-gap: 40px; 
}
.flex-gap-y-5 { 
    row-gap: 50px; 
}

/* 33.2 Grid Spacing */

.grid-gap-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-gap-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-gap-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-gap-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-gap-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-gap-x-1 {
    --bs-gutter-x: 10px;
}
.grid-gap-x-2 {
    --bs-gutter-x: 20px;
}
.grid-gap-x-3 {
    --bs-gutter-x: 30px;
}
.grid-gap-x-4 {
    --bs-gutter-x: 40px;
}
.grid-gap-x-5 {
    --bs-gutter-x: 50px;
}

.grid-gap-y-1 {
    --bs-gutter-y: 10px;
}
.grid-gap-y-2 {
    --bs-gutter-y: 20px;
}
.grid-gap-y-3 {
    --bs-gutter-y: 30px;
}
.grid-gap-y-4 {
    --bs-gutter-y: 40px;
}
.grid-gap-y-5 {
    --bs-gutter-y: 50px;
}