1. Extracted CSS Classes

• .d-none-soft

• .btn-primary

• .dropdown

• .dropdown-item

• .footer-logo

• .footer-copy

• .footer-list

• .nav-link

• .form-check-label

• .d-desktop

2. Detailed Class & Style Explanations

Layout & Visibility Utilities

• .d-desktop

  Displays elements on desktop screens (display: block). When the screen width drops below 576px (mobile devices), it sets display: none to hide the element.

• .d-none-soft

  Utility class to hide an element from the layout (display: none).

Buttons & Form Controls

• .btn-primary

  A prominent call-to-action (CTA) button with fixed dimensions (192px wide × 47px tall), a pill shape (30px border-radius), no border, and large extra-bold text (20px font-size, 800 weight).

• label.form-check-label

  Sets standard typography for check/radio labels (14px font size, regular weight, 21px line-height).

• input[type="text"], input[type="email"](Element Selector)

  Transforms standard text inputs into pill-shaped inputs with a 47px height, 30px rounded corners, and horizontal inner padding.

Floating Widget / Dropdown Navigation

• .dropdown

  Fixed floating menu pinned to the bottom-right corner of the viewport (fixed; right: 1em; bottom: 1em). Features a heavy drop shadow (box-shadow: 0 0 10px #333) and pill-shaped corners—commonly used for a floating language selector or widget button.

• .dropdown img & .dropdown-item img

  Formats images (such as country flag icons) inside the floating dropdown, constraining them to 24px inside the main button and 18px inside dropdown list items.

Footer Elements

• footer(Base Element)

  Sets the footer background to solid black (#000) and limits footer image heights to 60px.

• .footer-logo & .footer-copy

  Left-aligns the logo and copyright text on desktop, but switches to centered text on mobile screens (< 576px).

• .footer-list

  Aligns footer navigation items to the far right (justify-content: end) on desktop. On mobile, it breaks into a block layout with centered list items (.footer-list > li).

Typography & Global Styles

• * (Universal Selector)

  Applies the Poppins Google font family across all elements on the page.

• a.nav-link

  Removes top/bottom padding on desktop navigation links, restoring Bootstrap's default padding variables on mobile devices.

• h1, h2, h5 (Headings)

  • h1: Uses fluid typography (calc(1.425rem + 2.1vw)) so the font scales dynamically with the browser width.

  • h2: Large extra-bold section heading (45px size, 58.4px line-height, 800 weight).

  • h5: Subheading sized at 15px with 27px line-height.

• *[status="error"] (Attribute Selector)

  Applies a red border (var(--bs-danger)) and rounded corners to any element carrying the custom HTML attribute status="error".