/*---------------------------------------
    - Margin & Padding
-----------------------------------------*/
/*-- Margin Top --*/
.mt-5 {
  margin-top: 5px; }
/*-- Margin Bottom --*/
.mb-5 {
  margin-bottom: 5px; }

.mb-10 {
  margin-bottom: 10px; }

.mb-20 {
  margin-bottom: 20px; }

.mb-25 {
  margin-bottom: 25px; }

.mb-30 {
  margin-bottom: 30px; }

.mb-40 {
  margin-bottom: 40px; }

.mb-50 {
  margin-bottom: 50px; }

.mb-60 {
  margin-bottom: 60px; }

/*-- Padding Top --*/

.pt-80 {
  padding-top: 80px; }

.pt-130 {
  padding-top: 130px; }


/*-- Padding Bottom --*/

.pb-50 {
  padding-bottom: 50px; }

.pb-90 {
  padding-bottom: 90px; }

.pb-130 {
  padding-bottom: 130px; 
}

/*---------------------------------------
    - Responsive tiers for section spacing
    These utility classes previously had NO
    breakpoint reduction at all, so sections
    kept full desktop padding (up to 130px top
    + 130px bottom) all the way down to phone
    widths — the main cause of the oversized,
    unbalanced "too much breathing room" feel
    on tablet/mobile. Scaled down progressively.
-----------------------------------------*/
@media (max-width: 1199.98px) {
  .pt-130 { padding-top: 100px; }
  .pb-130 { padding-bottom: 100px; }
}

@media (max-width: 991.98px) {
  .pt-130 { padding-top: 76px; }
  .pb-130 { padding-bottom: 76px; }
  .pt-80  { padding-top: 56px; }
  .pb-90  { padding-bottom: 56px; }
}

@media (max-width: 767.98px) {
  .pt-130 { padding-top: 56px; }
  .pb-130 { padding-bottom: 56px; }
  .pt-80  { padding-top: 44px; }
  .pb-90  { padding-bottom: 40px; }
  .pb-50  { padding-bottom: 36px; }
}

@media (max-width: 480px) {
  .pt-130 { padding-top: 44px; }
  .pb-130 { padding-bottom: 44px; }
}

/*---------------------------------------
    - Section Background Utilities
    Every section on the site gets its background from ONE of these
    classes on the <section> element — single source of truth for
    section background color.
-----------------------------------------*/
.cc-bg-white {
  background-color: var(--white-color); }

.bg-gr {
  background-color: var(--gray-light-color); }

.cc-bg-light {
  background-color: var(--gray-lighter-color); }

.cc-bg-dark {
  background-color: var(--primary-black-color); }