/*=======================================================================================
Project     :    Waste Management / Garbage Collection Website
Version     :    1.0
Last change :    2026-09-03
Responsive  :    Desktop, Tablet (1024px) & Mobile (767.98px)
Description :    Aldous is a Bootstrap HTML template specifically designed for websites
                 related to waste pickup services, waste management solutions, recycling
                 programs, disposal guidelines, and eco-friendly sanitation services.
                 The template provides modern layouts for waste management companies,
                 municipal services, recycling programs, and eco-friendly sanitation
                 organizations.
=======================================================================================*/


/*=======================================================================================
TABLE OF CONTENTS
---------------------------------------------------------------------------------------

0.   Import, Variables, and Animation
     0.1  Import Vendor / Font
     0.2  Variables
          0.2.1  Font Variables
          0.2.2  Color Variables
          0.2.3  Font Size Variables
          0.2.4  Animation Duration Preset
          0.2.5  Animation Delay Preset
     0.3  Animation Settings
          0.3.1  Reduced Motion Accessibility
          0.3.2  Fade In Keyframe
          0.3.3  Fade Up Keyframe
          0.3.4  Fade Down Keyframe
          0.3.5  Fade Left Keyframe
          0.3.6  Fade Right Keyframe
          0.3.7  Progress Keyframe
          0.3.8  Animation Base
          0.3.9  Animation Duration Utilities
          0.3.10 Animation Delay Utilities

1.   Basic Style
     1.1  Base Settings
     1.2  Typography
     1.3  Links & Interactive Elements
     1.4  Page & Section Containers
     1.5  Service Buttons
     1.6  Section Markers & Icons
     1.7  Spacing Utilities
     1.8  Social Media Components
     1.9  State Classes
     1.10 Alert & Feedback Components
     1.11 Visibility Utilities

2.   Header Navbar Style
     2.1  Header Container
     2.2  Top Navbar
     2.3  Navbar Information
     2.4  Navbar Contact
     2.5  Main Navbar Wrapper
     2.6  Navbar Logo
     2.7  Navbar List & Links
     2.8  Dropdown Navigation
     2.9  Mobile Burger Button
     2.10 Sidebar Navigation Panel
     2.11 Sidebar Top & Close Button
     2.12 Sidebar Menu & Submenu

3.   Banner Home Style
     3.1  Home Banner
     3.2  Page Banner
     3.3  Not Found Banner
     3.4  Banner Overlay
     3.5  Banner Content Layering
     3.6  Registration Form
     3.7  Form Container
     3.8  Form Input Layout
     3.9  Form Input Elements
     3.10 Submit Button
     3.11 Banner Description
     3.12 Banner Page Title & Menu
     3.13 Banner Title
     3.14 Banner Page Description
     3.15 Banner Action Icons
     3.16 Banner Icon Hover Effects

4.   Service Style
     4.1  Service Home Layout
     4.2  Service Top Layout
     4.3  Service Tabs Container
     4.4  Service Option Tabs
     4.5  Option Buttons
     4.6  Active Tab Button
     4.7  Tab Pane Visibility
     4.8  Service Option Description
     4.9  Option Description Image
     4.10 Option Description Content
     4.11 Option Text

5.   About Us Style
     5.1  About Section
     5.2  About Home Layout
     5.3  About Image
     5.4  Achievement Card
     5.5  Achievement Icon & Subtitle
     5.6  About Content Description
     5.7  About Features
     5.8  About Feature Box
     5.9  Feature Icon
     5.10 About Progress
     5.11 About Skill
     5.12 Skill Header
     5.13 Skill Name & Percentage
     5.14 Skill Progress Container
     5.15 Progress Bar

6.   Why Choose Us Style
     6.1  Section Page Layout
     6.2  Why Home
     6.3  Why Banner
     6.4  Why Heading Container
     6.5  Why Heading Decoration
     6.6  Founder Name
     6.7  More Information
     6.8  More Information Button
     6.9  Inverse Service Button
     6.10 Why Bottom Layout
     6.11 Divider
     6.12 Benefits Container
     6.13 Benefit Item
     6.14 Benefit Icon
     6.15 Benefit Name

7.   Testimonial Style
     7.1  Testimonial Home
     7.2  Testimonial Comment Layout
     7.3  Testimonial Left Column
     7.4  Testimonial Image
     7.5  Testimonial Right Column
     7.6  User Comment Card
     7.7  Comment Profile
     7.8  User Profile Image
     7.9  Double Quote Icon
     7.10 Comment Rating
     7.11 Username
     7.12 Testimonial Statistics Grid
     7.13 Statistic Item
     7.14 Decorative Statistic Number
     7.15 Statistic Description

8.   Service Pricing Style
     8.1  Pricing Section
     8.2  Pricing Home
     8.3  Pricing Top Section
     8.4  Pricing Right Column
     8.5  Pricing Heading
     8.6  Pricing Description
     8.7  Pricing Card Container
     8.8  Pricing Image
     8.9  Pricing Card
     8.10 Pricing Card Header
     8.11 Pricing Icon
     8.12 Pricing Price
     8.13 Pricing Feature List
     8.14 Pricing Feature Item

9.   News & Blog Style
     9.1  News Home
     9.2  News Container
     9.3  Blog Card
     9.4  Blog Content
     9.5  Read More Button
     9.6  Blog Image
     9.7  Blog Banner Image

10.  Contact Us Style
     10.1 Contact Section
     10.2 Contact Page Layout
     10.3 Contact Home
     10.4 Contact Background Overlay
     10.5 Contact Information
     10.6 Contact Information List
     10.7 Contact Information Item
     10.8 Contact Information Icon
     10.9 Contact Form Container
     10.10 Contact Form Header
     10.11 Contact Form Grid
     10.12 Contact Inputs & Selects
     10.13 Contact Placeholder
     10.14 Contact Button
     10.15 Contact Button Hover State

11.  News Menu Style
     11.1 News Menu Home
     11.2 News Menu Container
     11.3 News Menu Detail
     11.4 News Menu Title
     11.5 News Menu Header
     11.6 News Menu Image
     11.7 News Menu Summary
     11.8 News Menu Subtitle
     11.9 News Menu Description
     11.10 News Menu Sidebar
     11.11 Other Posts Container
     11.12 Other Post Card
     11.13 Other Post Image
     11.14 Other Post Information
     11.15 Other Post Date
     11.16 Other Post Name
     11.17 Other Post Hover State

12.  Footer Style
     12.1 Footer Page Layout
     12.2 Footer Home
     12.3 Footer Company
     12.4 Footer Company Information
     12.5 Footer Navigation
     12.6 Footer Menu
     12.7 Footer Menu List
     12.8 Footer Menu Title
     12.9 Footer Menu Item
     12.10 Footer Contact Item
     12.11 Copyright

13.  Responsive Design
     13.1 Tablet Breakpoint — max-width: 1024px
     13.2 Mobile Breakpoint — max-width: 767.98px
     13.3 Responsive Typography
     13.4 Responsive Navbar
     13.5 Responsive Banner
     13.6 Responsive Service Layout
     13.7 Responsive About Layout
     13.8 Responsive Why Choose Us Layout
     13.9 Responsive Testimonial Layout
     13.10 Responsive Pricing Layout
     13.11 Responsive Blog Layout
     13.12 Responsive Contact Layout
     13.13 Responsive News Menu Layout
     13.14 Responsive Footer Layout

---------------------------------------------------------------------------------------*/


/*=======================================================================================
COLOR GLOSSARY
---------------------------------------------------------------------------------------

    --primary
        : #163A19
        : Dark green
        : Primary brand color used for headings, navigation, primary text,
          icons, dark UI elements, and major foreground components.

    --secondary
        : #FFFFFF
        : White
        : Primary light surface color used for page backgrounds, cards,
          inverse text, icons, and light UI elements.

    --text
        : #6E766F
        : Muted gray-green
        : Main body text, descriptions, secondary content, and muted information.

    --accent
        : #85BA45
        : Lime green
        : Main brand accent used for buttons, active states, icons,
          progress indicators, highlights, and interactive elements.

    --accent-2
        : #000000
        : Black
        : Strong contrast color, dark overlays, decorative text,
          and dark hover states.

    --accent-3
        : #F7F9FA
        : Very light gray
        : Soft card backgrounds, light UI surfaces, feature areas,
          and alternative section backgrounds.

    --accent-4
        : #E3E3E3
        : Light gray
        : Form borders and neutral border elements.

    --accent-5
        : #E8E9EB
        : Soft gray
        : Feature borders, testimonial borders, dividers,
          and subtle structural elements.


    Usage-Based Color Mapping
    ---------------------------------------------------------------------------

    Headings
        : --primary

    Body Paragraphs
        : --text

    Navigation
        : --primary
        : --accent for hover and active states

    Primary Buttons
        : --accent background
        : --secondary text

    Inverse Buttons
        : --primary background
        : --secondary text

    Card Backgrounds
        : --secondary
        : --accent-3

    Section Backgrounds
        : --secondary
        : --accent-3

    Borders & Dividers
        : --accent-4
        : --accent-5

    Form Fields
        : --secondary / inherited surface
        : --accent-4 for borders

    Dark Overlays
        : --accent-2 with opacity

    Light Text on Dark Backgrounds
        : --secondary

    Active / Highlight States
        : --accent


    Brand Color Meaning
    ---------------------------------------------------------------------------

    --primary (#163A19)
        : Sustainability, trust, nature, stability, and growth.

    --accent (#85BA45)
        : Freshness, environmental awareness, positive action,
          recycling, and eco-friendly branding.

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


/*=======================================================================================
TYPOGRAPHY SYSTEM
---------------------------------------------------------------------------------------

    Font Families
    ---------------------------------------------------------------------------

    --global-font
        : "Inter", sans-serif
        : Primary font family used throughout the website.

    --decorative-font
        : "Poppins", sans-serif
        : Decorative font used specifically for large statistic numbers.


    Font Size Scale — Desktop
    ---------------------------------------------------------------------------

    --font-xl
        : 4.3rem
        : 68.8px
        : Main page titles / H1

    --font-lg
        : 2.75rem
        : 44px
        : Section titles / H2

    --font-md
        : 1.75rem
        : 28px
        : Subsection titles / H3

    --font-sm
        : 1.25rem
        : 20px
        : Smaller headings / H4

    --font-xs
        : 1.125rem
        : 18px
        : Small headings / H5

    --font-xxs
        : 1rem
        : 16px
        : H6, body UI, buttons, links, and general interface text.


    Heading System
    ---------------------------------------------------------------------------

    h1, .font-xl
        : font-size var(--font-xl)
        : font-weight 500
        : line-height 1.2em

    h2, .font-lg
        : font-size var(--font-lg)
        : font-weight 400
        : line-height 1.2em

    h3, .font-md
        : font-size var(--font-md)
        : font-weight 400
        : line-height 1.2em

    h4, .font-sm
        : font-size var(--font-sm)
        : font-weight 400
        : line-height 1.2em

    h5, .font-xs
        : font-size var(--font-xs)
        : font-weight 400
        : line-height 1.2em

    h6, .font-xxs
        : font-size var(--font-xxs)
        : font-weight 400
        : line-height 1.2em


    Heading Defaults
    ---------------------------------------------------------------------------

    h1-h6
        : margin 0
        : color var(--primary)


    Body Typography
    ---------------------------------------------------------------------------

    body
        : font-family var(--global-font)
        : font-size 1rem
        : font-weight 400
        : line-height 1.5em
        : background-color var(--secondary)

    p
        : font-size var(--font-xxs)
        : font-weight 400
        : line-height 1.5em
        : color var(--text)
        : margin 0


    Interactive Typography
    ---------------------------------------------------------------------------

    button
    a
    .btn
    .nav-link
    .dropdown
        : font-size var(--font-xxs)
        : font-weight 500
        : line-height 1em
        : text-decoration none


    Navigation Typography
    ---------------------------------------------------------------------------

    .nv-link
        : font-size 1rem
        : font-weight 400
        : color var(--primary)


    Contact Typography
    ---------------------------------------------------------------------------

    .contact-name
        : font-size 1.125rem

    .other-post-date
        : font-size 0.9rem


    Responsive Typography — Tablet
    ---------------------------------------------------------------------------

    @media screen and (max-width: 1024px)

        --font-xl
            : 3.5rem

        --font-lg
            : 2rem

        --font-md
            : 1.25rem

        --font-sm
            : 1.125rem

        --font-xs
            : 1.125rem

        --font-xxs
            : 1rem


    Responsive Typography — Mobile
    ---------------------------------------------------------------------------

    @media screen and (max-width: 767.98px)

        --font-xl
            : 2.5rem

        --font-lg
            : 1.75rem

        --font-md
            : 1.25rem

        --font-sm
            : 1.125rem

        --font-xs
            : 1.125rem

        --font-xxs
            : 0.875rem


    Typography Strategy
    ---------------------------------------------------------------------------

    :root variables provide the default desktop typography scale.

    Tablet and mobile breakpoints override the shared font variables
    instead of redefining every heading selector.

    Relative rem units are used for scalable typography.

    Heading line-height remains 1.2em.

    Paragraph line-height remains 1.5em.

    Heading margins are globally normalized to zero.

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


/*=======================================================================================
ANIMATION SYSTEM
---------------------------------------------------------------------------------------

    Animation Duration Presets
    ---------------------------------------------------------------------------

    --anim-duration-fast
        : 0.5s
        : Fast animation duration for short interactions.

    --anim-duration-normal
        : 1s
        : Standard animation duration.

    --anim-duration-slow
        : 1.5s
        : Slow animation duration for longer entrance effects.


    Animation Delay Presets
    ---------------------------------------------------------------------------

    --anim-delay-none
        : 0s
        : Immediate animation.

    --anim-delay-sm
        : 0.25s
        : Short stagger delay.

    --anim-delay-md
        : 0.5s
        : Medium stagger delay.

    --anim-delay-lg
        : 1s
        : Long stagger delay.


    Keyframes
    ---------------------------------------------------------------------------

    @keyframes fade-in
        : Opacity transition
        : from opacity 0
        : to opacity 1

    @keyframes fade-up
        : Fade + vertical movement upward
        : from opacity 0 + translateY(80px)
        : to opacity 1 + translateY(0)

    @keyframes fade-down
        : Fade + vertical movement downward
        : from opacity 0 + translateY(-80px)
        : to opacity 1 + translateY(0)

    @keyframes fade-left
        : Fade + horizontal movement from the left
        : from opacity 0 + translateX(-120px)
        : to opacity 1 + translateX(0)

    @keyframes fade-right
        : Fade + horizontal movement from the right
        : from opacity 0 + translateX(120px)
        : to opacity 1 + translateX(0)

    @keyframes progress
        : Progress bar width animation
        : from width 50%
        : to width 100%


    Animation Base
    ---------------------------------------------------------------------------

    .animation-box
        : opacity 0
        : animation-fill-mode forwards
        : animation-timing-function cubic-bezier(0.25, 0.8, 0.25, 1)
        : will-change opacity, transform


    Duration Utility Classes
    ---------------------------------------------------------------------------

    .anim-fast
        : --anim-duration = var(--anim-duration-fast)

    .anim-normal
        : --anim-duration = var(--anim-duration-normal)

    .anim-slow
        : --anim-duration = var(--anim-duration-slow)


    Delay Utility Classes
    ---------------------------------------------------------------------------

    .anim-delay-none
        : --anim-delay = var(--anim-delay-none)

    .anim-delay-sm
        : --anim-delay = var(--anim-delay-sm)

    .anim-delay-md
        : --anim-delay = var(--anim-delay-md)

    .anim-delay-lg
        : --anim-delay = var(--anim-delay-lg)


    Accessibility
    ---------------------------------------------------------------------------

    @media (prefers-reduced-motion: reduce)

        .animation-box
            : animation none !important
            : opacity 1 !important
            : transform none !important


    Animation Timing
    ---------------------------------------------------------------------------

    Primary easing function
        : cubic-bezier(0.25, 0.8, 0.25, 1)

    The timing function is applied through .animation-box
    as the default animation timing configuration.

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


/*=======================================================================================
RESPONSIVE DESIGN SYSTEM
---------------------------------------------------------------------------------------

    Breakpoints
    ---------------------------------------------------------------------------

    Desktop
        : Default stylesheet state
        : Greater than 1024px

    Tablet
        : max-width: 1024px

    Mobile
        : max-width: 767.98px


    Tablet Layout Changes
    ---------------------------------------------------------------------------

    Navbar
        : .top-navbar → hidden
        : .header-container hr → hidden
        : .nv-menu → hidden
        : .service-navbar-button → hidden
        : .nv-logo → displayed
        : .nv-burger → displayed

    Banner
        : .banner-home → column-reverse
        : .banner-page → reduced responsive padding
        : .banner-notFound → reduced responsive padding
        : .banner-page-description → width 70%
        : .register-form → width 100%, max-width removed
        : .banner-title-and-menu → column layout
        : .banner-title → width 100%
        : .spacer → height 150px

    Service
        : .service-top → column
        : .service-tabs-container → column
        : .service-option-tabs → row
        : .option-button → flexible equal-width layout

    About
        : .about-home → column-reverse
        : .about-content-image → width 100%
        : .about-content-description → width 100%
        : .about-features → responsive width
        : .about-feature-box → flexible width
        : .about-progress → aligned to start

    Why Choose Us
        : .why-home → increased gap
        : .why-banner → adjusted padding
        : .spacer-2 → height 0
        : .why-bottom → column layout
        : .divider → width 100%

    Testimonial
        : .testimonial-home → reduced gap
        : .testimonial-comment → column
        : .testimonial-left → full width and static positioning
        : .testimonial-left-img-image → width 100%
        : .testimonial-left-img → width 100%
        : .testimonial-bottom → 2-column grid
        : .bottom-statistic → centered placement
        : .shadow-number-stat → reduced size and repositioned

    Pricing
        : .pricing-section → reduced top padding
        : .pricing-top → column
        : .pricing-right → width 100%
        : .pricing-card-container → 2-column grid

    Blog
        : .blog-card → column-reverse
        : .blog-content → width 100%
        : .blog-image → width 100%
        : .blog-image → max-height 400px

    Contact
        : .contact__page-layout → padding removed
        : .contact-home → responsive spacing
        : .contact-form-container → responsive positioning
        : .contact-form-header → column
        : .contact-form → 2-column grid

    News Menu
        : .news-menu-container → 1-column grid
        : .news-menu-sidebar → width 100%

    Footer
        : .footer-home → column
        : .footer-company-info → width 100%


    Mobile Layout Changes
    ---------------------------------------------------------------------------

    Typography
        : Font variables are reduced for smaller screens.

    Banner
        : .form-input-top → column
        : .banner-page-description → width 100%
        : .banner-icon-second → reduced padding
        : .banner-icon → reduced font size

    Service
        : .service-option-tabs → column
        : .service-option-description → column
        : .option-description-img → width 100%

    About
        : .about-features → column
        : .about-features → width 100%

    Why Choose Us
        : .why-banner → centered background positioning
        : .why-heading-container → reduced width
        : .more-info → column
        : .why-bottom → additional top spacing
        : .about-benefits → column

    Testimonial
        : .shadow-number-stat → reduced size and repositioned

    Pricing
        : .pricing-image img → height 43vh
        : .pricing-card-container → 1-column grid

    Contact
        : .contact-home → reduced mobile padding
        : .contact-form → 1-column grid
        : .contact-form-container → mobile repositioning

    News Menu
        : .news-menu-header → 1-column grid

    Footer
        : .copyright → centered text

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


/*=======================================================================================
CSS PROPERTIES ORDERING CONVENTION
---------------------------------------------------------------------------------------

    1. Display & Layout
        display
        position
        top / right / bottom / left
        z-index
        flex-direction
        justify-content
        align-items
        gap
        grid-template-columns

    2. Box Model
        width / height
        min-width / max-width
        min-height / max-height
        margin
        padding
        border
        border-radius

    3. Background & Color
        background
        background-color
        background-image
        background-repeat
        background-size
        background-position
        color
        opacity

    4. Typography
        font-family
        font-size
        font-weight
        line-height
        text-align
        text-decoration
        letter-spacing

    5. Visual Effects
        box-shadow
        text-shadow
        transform
        object-fit
        object-position

    6. Animation & Transition
        transition
        animation
        animation-fill-mode
        animation-timing-function
        will-change

    7. Miscellaneous
        overflow
        cursor
        visibility
        flex-shrink
        box-sizing

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


/*=======================================================================================
IMPORTANT CLASSES & FREQUENTLY CHANGED ELEMENTS
---------------------------------------------------------------------------------------

    Global Layout
        .section
        .page-container

    Navbar
        .header-container
        .top-navbar
        .nv-wrapper
        .nv-logo
        .nv-list
        .nv-link
        .nv-dropdown
        .nv-burger
        .sb-panel
        .sb-list
        .sb-submenu

    Banners
        .banner-home
        .banner-page
        .banner-notFound
        .register-form
        .banner-title
        .banner-page-description

    Buttons
        .service-button
        .submit-button
        .option-button
        .more-button
        .service-button-inverse
        .read-more-button
        .contact-button

    Service Components
        .service-home
        .service-tabs-container
        .service-option-tabs
        .option-description
        .option-description-img

    About Components
        .about-home
        .about-content-image
        .card-achievement
        .about-features
        .about-feature-box
        .about-progress
        .progress-bar

    Why Choose Us
        .why__page-layout
        .why-banner
        .why-heading
        .founder-name
        .more-info
        .about-benefits

    Testimonials
        .testimonial-home
        .testimonial-comment
        .comment-user-card
        .user-profil
        .comment-rating
        .testimonial-bottom
        .shadow-number-stat

    Pricing
        .pricing-section
        .pricing-card-container
        .pricing-card
        .pricing-icon
        .pricing-price
        .pricing-feature

    Blog
        .news-home
        .blog-card
        .blog-content
        .read-more-button
        .blog-image

    Contact
        .contact-section
        .contact-home
        .contact-info
        .contact-form-container
        .contact-form
        .contact-input
        .contact-select
        .contact-button

    News Menu
        .news-menu-container
        .news-menu-detail
        .news-menu-header
        .news-menu-sidebar
        .other-post-container
        .other-post-card

    Footer
        .footer__page-layout
        .footer-home
        .footer-company
        .footer-navigation
        .footer-menu
        .copyright

    Animation
        .animation-box
        .anim-fast
        .anim-normal
        .anim-slow
        .anim-delay-none
        .anim-delay-sm
        .anim-delay-md
        .anim-delay-lg

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


/*=======================================================================================
FILE STRUCTURE REFERENCE
---------------------------------------------------------------------------------------

main.css
│
├── 0. Import, Variables, and Animation
│   ├── 0.1 Import Vendor / Font
│   ├── 0.2 Variables
│   └── 0.3 Animation Settings
│
├── 1. Basic Style
│
├── 2. Header Navbar Style
│
├── 3. Banner Home Style
│
├── 4. Service Style
│
├── 5. About Us Style
│
├── 6. Why Choose Us Style
│
├── 7. Testimonial Style
│
├── 8. Service Pricing Style
│
├── 9. News & Blog Style
│
├── 10. Contact Us Style
│
├── 11. News Menu Style
│
├── 12. Footer Style
│
├── @media screen and (max-width: 1024px)
│   └── Tablet Responsive Overrides
│
└── @media screen and (max-width: 767.98px)
    └── Mobile Responsive Overrides

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

/* =========================== 0. Import, Variables, and Animation =========================== */

/* --------------------------- 0.1 Import Vendor / Font --------------------------- */
@import url('fonts.css');
@import url('bootstrap.min.css');
@import url('fontawesome.min.css');
@import url('brands.css');
@import url('regular.css');
@import url('solid.css');

/* --------------------------- 0.2 Variables --------------------------- */
:root{
    /* 0.2.1 Font Variables */
    --global-font: "Atkinson Hyperlegible Next", "Noto Sans SC", system-ui, sans-serif;
    --decorative-font: Archivo, "Arial Narrow", Arial, sans-serif;
    --mono-font: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    /* 0.2.2 Color Variables */
    /* EZforWaste brand tokens */
    --primary: #0e3a2b;   /* forest */
    --secondary: #ffffff; /* surface-raised */
    --text: #4a5a51;      /* ink-muted */
    --accent: #1d7a4c;    /* green */
    --accent-2: #13261d;  /* ink */
    --accent-3: #f5f7f2;  /* surface */
    --accent-4: #dbe1d8;  /* line */
    --accent-5: #dbe1d8;  /* line */
    --yellow: #f5c330;    /* CTA only, always ink text */
    --mint: #d7eedf;
    --line-strong: #74827a;
    --danger: #b42318;

    /* 0.2.3 Font Size Variables */
    --font-xl: 3.5rem;
    --font-lg: 2.25rem;
    --font-md: 1.375rem;
    --font-sm: 1.25rem;
    --font-xs: 1.125rem;
    --font-xxs: 1rem;

    /* 0.2.4 Animation Duration Preset */
    --anim-duration-fast: 0.5s;
    --anim-duration-normal: 1s;
    --anim-duration-slow: 1.5s;

    /* 0.2.5 Animation Delay Preset */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.5s;
    --anim-delay-lg: 1s;
}

/* --------------------------- 0.3 Animation Settings --------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animation-box { 
        animation: none !important;
        opacity: 1 !important; 
        transform: none !important; 
    }
}

@keyframes fade-in   { 
    from {opacity:0;} to {opacity:1;} 
}

@keyframes fade-up   { 
    from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-down { 
    from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-left { 
    from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} 
}

@keyframes fade-right{ 
    from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} 
}

@keyframes progress{
    0% { width: 50%; } 100% { width: 100%;}
}

.animation-box {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.anim-fast {
    --anim-duration: var(--anim-duration-fast);
}

.anim-normal {
    --anim-duration: var(--anim-duration-normal);
}

.anim-slow {
    --anim-duration: var(--anim-duration-slow);
}

.anim-delay-none {
    --anim-delay: var(--anim-delay-none);
}

.anim-delay-sm {
    --anim-delay: var(--anim-delay-sm);
}

.anim-delay-md {
    --anim-delay: var(--anim-delay-md);
}

.anim-delay-lg {
    --anim-delay: var(--anim-delay-lg)
}

/* =========================== 1. Basic Style =========================== */

/* --------------------------- 1.1 Base Settings --------------------------- */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--global-font);
    background-color: var(--secondary);
    color: var(--accent-2);
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
}

h1, .font-xl{
    font-size: var(--font-xl);
    font-weight: 500;
    line-height: 1.2em;
}

h2, .font-lg{
    font-size: var(--font-lg);
    font-weight: 400;
    line-height: 1.2em;
}

h3, .font-md{
    font-size: var(--font-md);
    font-weight: 400;
    line-height: 1.2em;
}

h4, .font-sm{
    font-size: var(--font-sm);
    font-weight: 400;
    line-height: 1.2em;
}

h5, .font-xs{
    font-size: var(--font-xs);
    font-weight: 400;
    line-height: 1.2em;
}
h6, .font-xxs{
    font-size: var(--font-xxs);
    font-weight: 400;
    line-height: 1.2em;
}

h1, h2, h3, h4, h5, h6{
    margin: 0px;
    color: var(--primary);
    font-family: var(--decorative-font);
    font-weight: 700;
    text-wrap: balance;
}

h1, h2{
    font-weight: 800;
    letter-spacing: -0.02em;
}

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

button, a, .btn, .nav-link, .dropdown{
    font-size: var(--font-xxs);
    font-weight: 500;
    line-height: 1em;
    text-decoration: none;
}

ul{
    list-style: none;
    padding: 0;
}

a{
    text-decoration: none;
}

hr{
    color: var(--text);
    margin: 12px 0;
}

.section{
    padding: 0 16px 16px 16px;
}

/* --------------------------- 1.2 Reusable Style --------------------------- */
.page-container{
    padding: 96px 0;
    max-width: 1280px;
    margin: 0 auto;
}
.icon-logo{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--decorative-font);
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--primary);
}

.icon-logo img{
    width: 44px;
    height: 44px;
}

.icon-logo-navbar{
    display: none;
}

.service-button{
    color: var(--accent-3);
    background-color: var(--accent);
    padding: 7px 7px 6px 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.service-button:hover {
    transform: translateY(-5px);
    background-color: var(--primary);
}

.icon-button{
    margin-left: 10px ;
    transform: rotate(-45deg);
    color: inherit;
    font-size: 32px;
}

.section-marker{
    display: flex;
    gap: 15px;
    align-items: center;
}

.section-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary);
    background-color: var(--accent);
    font-size: 20px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
}
.icon-bg-white{
    background-color: var(--secondary);
    color: var(--accent);
}

.spacer{
    height: 50px;
}

.spacer-2{
    height: 250px;
}

.media-social-container{
    display: flex;
    gap: 10px;
}

.media-social-icon{
    color: var(--accent);
    display: flex;
    height: 43px;
    width: 43px;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 50%;
    background-color: var(--accent-3);
    transition: transform 0.3s ease, background-color 0.5s ease;
}

.media-social-icon:hover{
    transform: translateY(-7px);
    color: var(--secondary);
    background-color: var(--accent);
}

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

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

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

.alert {
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: var(--secondary);
    color: var(--primary);
}

.hidden{
    display: none !important;
}

/* =========================== 2. Header Navbar Style =========================== */
.header-container{
    padding: 1em 12em;
}

.top-navbar{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.navbar-information{
    display: flex;
    gap: 28px;
}

.navbar-contact-icon{
    font-size: 33px;
}

.navbar-contact{
    display: flex;
    gap: 13px;
    align-items: center;
}

.contact-name{
    font-size: 1.125rem;
}

.nv-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}
.nv-logo{
    display: none;
}

.nv-list{
    display: flex;
    gap: 35px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nv-link{
    color: var(--primary); 
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
    transition: color 0.3s ease;
}

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

.nv-link.active{
    color: var(--accent);
}

.nv-has-dropdown {
    position: relative;
}

.nv-has-dropdown a i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.nv-has-dropdown:hover a i {
    transform: rotate(180deg);
}

.nv-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--secondary);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    margin-top: 10px; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}

.nv-has-dropdown:hover .nv-dropdown {
    opacity: 1;
    visibility: visible;
}

.nv-has-dropdown:hover > .nv-link{
    color: var(--accent);
}
.nv-dropdown .nv-link {
    display: block;
    padding: 15px 20px;
    transition: all .25s ease;
    margin: 2px;
    border-radius: 16px;
}


.nv-dropdown .nv-link:hover {
    background-color: var(--accent);
    color: var(--secondary);
}

.nv-burger{
    display: none;
    font-size: 1.25rem;
    background-color: var(--accent);
    color: var(--secondary);
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
}

.sb-panel{
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: var(--secondary);
    height: 100vh;
    max-width: 350px;
    left: -100%;
    transition: left .3s ease;
}

.sb-top{
    display: flex;
    padding: 45px 20px;
    justify-content: flex-end;
}

.sb-close-btn{
    font-size: 1.25rem;
    background-color: var(--accent);
    color: var(--secondary);
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
}

.sb-list{
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    gap: 20px;
}

.sb-submenu{
    display: none;
    flex-direction: column;
    margin-top: 10px;
    padding-left:10px;
    gap: 15px;
}

.sb-dropdown-open{
    display: flex;
}
/* =========================== 3.Banner Home Style =========================== */
.banner-home{
    display: flex;
    flex-direction: column;
    background-image: url('../images/garbage-collection-day-2025-04-06-09-41-17-utc-e1767087383981.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 80px 176px;
    height: auto;
    position: relative;
    background-position: center;
    color: var(--secondary);
    gap: 20px;
    overflow: hidden;
}

.banner-page{
    display: flex;
    flex-direction: column;
    background-image: url('../images/garbage-collection-day-2025-04-06-12-03-55-utc.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 368px 176px 80px;
    height: auto;
    position: relative;
    background-position: center right;
    color: var(--secondary);
    gap: 20px;
    overflow: hidden;
}

.banner-notFound{
    display: flex;
    flex-direction: column;
    background-image: url('../images/garbage-collection-day-2025-04-06-11-50-52-utc.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    padding: 368px 176px 80px;
    height: auto;
    position: relative;
    background-position: center right;
    color: var(--secondary);
    gap: 20px;
    overflow: hidden;
    margin: 16px;

}

.banner-home::before,
.banner-page::before,
.banner-notFound::before{
    content: '';
    position: absolute;
    background-color: var(--accent-2);
    width: 100%;
    height: 100%;
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner-home > *,
.banner-page > *,
.banner-notFound > *{
    z-index: 2;
}

.register-form{
    background-color: var(--secondary);
    width: 36%;
    color: var(--accent-2);
    padding: 20.8px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    border-radius: 10px;
    align-self: flex-end;
}

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

.form-input-top{
    width: 100%;
    display: flex;
    gap: 10px;
}

.input-top{
    flex: 1;
}

.input-label{
    margin-bottom: 8px;
}
.input-form{
    width: 100%;
    padding: 12px 17px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    margin: 0;
}

.input-form:hover{
    border-color: var(--accent-2);
}

.submit-button{
    border: 0;
    padding: 13px;
    text-align: center;
    border-radius: 999px;
    width: fit-content;
    font-weight: 400;
    background-color: var(--accent);
    color: var(--accent-3);
    transition: all .3s ease;
}

.submit-button:hover{
    background-color: var(--primary);
}

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

.banner-info-notFound{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center
}

.banner-title-and-menu{
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.banner-title{
    width: 60%;
    color: var(--secondary);
}

.banner-page-description{
    color: var(--secondary);
    width: 41%;
}

.banner-icon-second{
    background-color: var(--accent);
    border-radius: 50%;
    padding: 8px;
}

.banner-icon{
    transform: rotate(-45deg);
    color: var(--accent);
    background-color: var(--secondary);
    padding: 5px;
    width: auto;
    font-size: 50px;
    font-weight: bold;
    border-radius: 50%;
}

.banner-icon-second {
    transition: all .5s ease;
}

.banner-icon-wrapper:hover .banner-icon-second {
    transform: translateY(-10px);
    background-color: var(--primary);
}

.banner-icon-wrapper:hover .banner-icon-second .banner-icon {
    color: var(--primary);
}

/* =========================== 4.Service Style =========================== */
.service-home{
    display: flex;
    flex-direction: column;
    gap: 40px;

}
.service-top{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.service-tabs-container{
    display: flex;
    justify-content: space-between;
}

.service-option-tabs{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-button{
    padding: 15px 30px;
    border: 0px;
    background-color: var(--accent-3);
    color: var(--primary);
    border-radius: 10px;
    font-size: var(--font-xs);
}

.option-button:hover{
    background-color: var(--accent);
    color: var(--secondary);
    transition: all .3s ease;
}

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

.tab-pane {
    display: none !important;
}

.tab-pane.active.show {
    display: flex !important;
}

.service-option-description{
    display: flex;
    gap: 20px;
}

.option-description-img{
    max-height: 200px;
    object-fit: cover;
    border-radius: 15px;
}

.option-description{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
    max-width: 500px;
    align-items: flex-start;
}

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

/* =========================== 5.About Us Style =========================== */
.about-section{
    background-color: var(--accent-3);
}

.about-home{
    display: flex;
    gap: 40px;
}

.about-content-image{
    background-image: url('../images/garbage-collection-day-2025-04-06-11-51-57-utc.jpg');
    background-position: -149px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    width: 47%;
    height: 550px;
    position: relative;
}

.card-achievement{
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--accent);
    color: var(--secondary);
    position: absolute;
    border-radius: 15px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    padding: 24px 25.6px;
    bottom: -20px;
    right: -60px;
}

.achievement-icon{
    font-size: 50px;
    text-align: left;
}
.achievement-subtitle{
    color: var(--secondary);
    max-width: 150px;
}

.about-content-description{
    display: flex;
    flex-direction: column;
    width: 53%;
    gap: 25px;
}

.about-features{
    align-self: flex-end;
    display: flex;
    gap: 16px;
}

.about-feature-box{
    display: flex;
    gap: 10px;
    border: 1px solid var(--accent-5);
    padding: 12px 50px 12px 20px;
    border-radius: 11px;
    color: var(--primary);
    align-items: center;
    
}

.feature-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background-color: var(--primary);
    color: var(--secondary);
    border-radius: 50%;
}

.about-progress{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: flex-end;
    max-width: 570px;
    width: 100%;
    color: var(--primary);
}

.about-skill{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skill-header{
    display: flex;
    align-items: center;
    position: relative;
}

.skill-name{
    font-weight: 500;
}

.skill-percent{
    font-weight: 500;
    position: absolute;
}

.skill-progress{
    padding: 9px;
    width: 100%;
    border: 1px solid var(--accent-5);
    border-radius: 999px;
}

.progress-bar{
    height: 10px;
    background-color: var(--accent);
    border-radius: 999px;
}

/* =========================== 6.Why Choose Us Style =========================== */
.why__page-layout{
    max-width: 1489px;
    padding: 112px 0 64px;
    margin: 0 auto;
}

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

.why-banner{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: url('../images/keeping-the-city-clean-cropped-shot-of-a-team-of-2025-04-06-07-23-19-utc.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -55px;
    align-items: flex-start;
    position: relative;
    padding: 72px 0 0 58px;
    width: 100%;
    border-radius: 15px 15px 0 0;
}

.why-heading-container{
    width: 40%;
}


.why-heading {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: var(--accent-2);
    background-color: var(--accent-3);
    padding: 4px 8px;
    border-radius: 0 999px 999px 0;
}

.founder-name{
    color: var(--secondary);
    padding: 7px 10px 6px 6px;
    background-color: var(--accent);
    border-radius: 0 999px 999px 0;
    width: fit-content;
}

.more-info{
    align-self: flex-end;
    display: flex;
    gap: 20px;
    padding: 25.6px 50px;
    background-color: var(--accent);
    width: fit-content;
    position: relative;
    bottom: -10px;
    right: 0;
    border-radius: 10px 0 10px 10px;
}

.more-button{
    color: var(--primary);
    background-color: var(--secondary);
    border: 0;
    padding: 13px;
    text-align: center;
    border-radius: 999px;
    font-weight: 400;
    transition: all .3s ease;
}

.more-button:hover{
    background-color: var(--accent-2);
    color: var(--secondary);
}
.service-button-inverse{
    background-color: var(--primary);
    color: var(--secondary);
    
}

.service-button-inverse:hover{
    background-color: var(--secondary);
    color: var(--accent-2);
}

.why-bottom{
    display: flex;
    gap: 20px;
    align-items: center;
}

.divider{
    border-top: 1px solid var(--accent);
    width: 70px;
}

.about-benefits{
    display: flex;
    gap: 20px;
}

.benefit-item{
    display: flex;
    gap: 10px;
    align-items: center;
}

.benefit-icon{
    height: 32px;
    width: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    color: var(--secondary);
    font-size: 20px;
}

.benefit-name{
    color: var(--primary);
}

/* =========================== 7.Testimonial Style =========================== */

.testimonial-home{
    border-top: 1px solid var(--accent-5) ;
    padding-top: 90px;
    display: flex;
    flex-direction: column;
    gap: 90px;
}

.testimonial-comment{
    display: flex;
    gap: 35px;
}

.testimonial-left{
    width: 57%;
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: flex-start;
    position: sticky;
    top: 20px;
    height: 100%;
}

.testimonial-left-img{
    width: 100%;
    height: 54vh;
    object-fit: cover;
    object-position: center center;
    border-radius: 15px;
}

.testimonial-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-user-card{
    display: flex;
    flex-direction: column;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--accent-4);
    gap: 20px;
}

.comment-profil{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-profil{
    height: 77px;
    width: 77px;
    object-fit: cover;
    border-radius: 75px;
}

.double-quote-icon{
    font-size: 48px;
}

.comment-rating{
    padding-top: 10px;
    font-size: 30px;
    letter-spacing: 5px;
}

.username{
    color: var(--accent-2);
    font-weight: 500;
}

.testimonial-bottom{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.bottom-statistic{
    height: 100px;
    align-items: center;
}

.shadow-number-stat{
    display: flex;
    justify-content: center;
    top: -50px;
    left: -100px;
    font-family: var(--decorative-font);
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.2em;
    position: absolute;
    z-index: -1;
    -webkit-text-fill-color: var(--secondary);
    -webkit-text-stroke-color: var(--accent-5);
    -webkit-text-stroke-width: 1px;
}

.stat-description{
    width: 50%;
    margin-left: 97px;
    position: relative;
}

/* =========================== 8.Service Pricing Style =========================== */
.pricing-section{
    background-color: var(--primary);
    padding: 96px 24px 24px;
}

.pricing-home{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: var(--secondary);
    gap: 50px;
}
.pricing-top{
    max-width: 1280px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    color: var(--secondary);
}

.pricing-right{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 60%;
}
.pricing-heading{
    color: var(--secondary);
}

.pricing-description{
    color: var(--secondary);
}


.pricing-card-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 15px;
    overflow: hidden;
}

.pricing-image img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.pricing-card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--secondary);
    padding: 40px;
    border: 1px solid var(--accent-4);
    align-items: flex-start;
}

.pricing-card-header{
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: space-between;
}
.pricing-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 38px;
    height: 62px;
    width: 62px;
    color: var(--secondary);
    background-color: var(--accent);
    border-radius: 50%;
}

.pricing-price{
    display: flex;
    align-items: flex-end;
    color: var(--primary);
}

.pricing-feature-list{
    color: var(--primary);
}

.pricing-feature{
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 8px 0;
}

/* =========================== 9. News & Blog Style =========================== */
.news-home{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.blog-card{
    background-color: var(--accent-3);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
}

.blog-content{
    padding: 78px 35px 35px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    color: var(--accent-2);
    width: 45%;
}

.read-more-button{
    color: var(--secondary);
    background-color: var(--accent);
    border: 0;
    padding: 13px 20px;
    text-align: center;
    border-radius: 999px;
    width: fit-content;
    font-weight: 400;
    transition: background-color .3s ease;
}

.read-more-button:hover{
    background-color: var(--primary);
    color: var(--secondary);
    
}

.blog-image{
    width: 55%;
    max-height: 400px;
    height: 100%;    
    overflow: hidden;
}

.blog-banner{
    width: 100%;
    object-fit: cover;
}

/* =========================== 10.Contact Us Style =========================== */
.contact-section{
    background-color: var(--accent-3);
}

.contact__page-layout{
    padding: 96px 208px;
}

.contact-home{
    background-image: url('../images/garbage-collection-day-2025-04-06-11-50-52-utc.jpg');
    border-radius: 15px;
    padding: 40px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -160px;
    position: relative;
}

.contact-home::before{
    content: '';
    position: absolute;
    background-color: var(--secondary);
    width: 100%;
    height: 100%;
    opacity: 0.3;
    top: 0;
    left: 0;
    z-index: 1;
}

.contact-home > *{
    z-index: 2;
}

.contact-info{
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.contact-info-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-info-item{
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
}
.contact-info-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary);
    height: 35px;
    width: 35px;
    background-color: var(--primary);
    border-radius: 50%;
}

.contact-form-container{
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    gap: 20px;
    background-color: var(--primary);
    color: var(--secondary);
    padding: 40px;
    border-radius: 0 15px 15px 15px;
    position: relative;
    left: -40px;
    bottom: -80px;
}

.contact-form-header{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}


.contact-heading{
    color: var(--secondary);
}

.contact-form{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-right: auto;
}
.contact-input, .contact-select{
    padding: 7px 12px;
    border: 1px solid var(--secondary);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}

.contact-input::placeholder{
    font-size: 14px;
}

.contact-button{
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background-color: var(--primary);
    color: var(--secondary);
    transition: 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.contact-button:hover{
    color: var(--accent-2);
    background-color: var(--secondary);
}

/* =========================== 11.News Menu Style =========================== */
.news-menu-home{
    display: flex;
    flex-direction: column;
}

.news-menu-container{
    display: grid;
    grid-template-columns: 2fr 420px;
    gap: 60px;
    align-items: flex-start;
}

.news-menu-detail{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.news-menu-title{
    max-width: 900px;
}

.news-menu-header{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: flex-start;
}

.news-menu-image{
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 10px;
}

.news-menu-summary{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-menu-subtitle{
    color: var(--primary);
}

.news-menu-description{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-menu-sidebar{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.other-post-container{
    background: var(--accent-3);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.other-post-card{
    display: flex;
    gap: 15px;
    text-decoration: none;
}

.other-post-image{
    width: 105px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.other-post-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.other-post-date{
    color: var(--accent-2);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
}

.other-post-name{
    color: var(--primary);
    line-height: 1.4;
    transition: .3s;
}

.other-post-card:hover .other-post-name{
    color: var(--accent);
}

/* =========================== 12.Footer Style =========================== */
.footer__page-layout{
    background-color: var(--accent-3);
}
.footer-home{
    margin: 0 auto;
    padding: 64px 0;
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

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

.footer-company-info{
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: space-between;
}

.footer-navigation{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-menu{
    flex: 1;
    min-width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-menu-list li{
    padding-bottom: 5px;
}

.footer-menu-title{
    color: var(--accent-2);
}

.footer-menu-item{
    color: var(--text);
    font-weight: 300;
    font-size: var(--font-xs);
}

.footer-contact-item{
    color: var(--text);
    font-weight: 300;
    font-size: var(--font-xs);
    padding-bottom: 5px;
}

.copyright{
    background-color: var(--secondary);
    color: var(--primary);
    padding: 16px;
    font-size: var(--font-xs);
}
/* =========================== 13. EZforWaste Brand Additions =========================== */
:focus-visible{
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.pricing-section :focus-visible,
.contact-form-container :focus-visible{
    outline-color: var(--yellow);
}

/* The one primary action per screen: Book a pickup */
.btn-cta{
    background-color: var(--yellow);
    color: var(--accent-2);
    font-weight: 700;
}

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

.form-note{
    font-size: 0.875rem;
    color: var(--text);
}

.contact-form-container .form-note{
    color: var(--secondary);
}

.data{
    font-family: var(--mono-font);
}