@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;700&display=swap");

/* Reset Margins for Bootstrap Elements */
h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 0.1em;
}

/* Font Families */
:root {
  --font-family-primary: 'Montserrat', sans-serif;
  --font-family-secondary: 'Raleway', sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 500;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-xs: 1.4;
  --line-height-sm: 1.5;
  --line-height-md: 1.6;
  --line-height-lg: 1.7;
  --line-height-xl: 1.8;

  /* Default Font Sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 1rem;      /* 16px */
  --font-size-md: 1.2rem;    /* 20px */
  --font-size-lg: 1.5rem;    /* 24px */
  --font-size-xl: 2rem;      /* 32px */
  --font-size-2xl: 2.5rem;   /* 40px */

  /* Paragraph and Button Font Sizes */
  --font-size-paragraph: 1rem; /* 16px */
  --font-size-button: 1rem;    /* 16px */
}

/* Default Utility Classes for Font Sizes */
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }
.font-md { font-size: var(--font-size-md); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }
.font-2xl { font-size: var(--font-size-2xl); }

/* Utility Classes for Font Family */
.font-primary {
  font-family: var(--font-family-primary);
}

.font-secondary {
  font-family: var(--font-family-secondary);
}

/* Utility Classes for Font Weight */
.font-light {
  font-weight: var(--font-weight-light);
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-semi-bold {
    font-weight: var(--font-weight-semi-bold);
  }

.font-bold {
  font-weight: var(--font-weight-bold);
}

/* Utility Classes for Line Height */
.line-height-xs {
  line-height: var(--line-height-xs);
}

.line-height-sm {
  line-height: var(--line-height-sm);
}

.line-height-md {
  line-height: var(--line-height-md);
}

.line-height-lg {
  line-height: var(--line-height-lg);
}

.line-height-xl {
  line-height: var(--line-height-xl);
}

/* Utility Classes for Paragraph and Button Font Sizes */
.font-paragraph {
  font-size: var(--font-size-paragraph);
}

.font-button {
  font-size: var(--font-size-button);
}

/* Custom Font Size Classes for Desktop */
.font-d-8 { font-size: 8px; }
.font-d-10 { font-size: 10px; }
.font-d-12 { font-size: 12px; }
.font-d-14 { font-size: 14px; }
.font-d-16 { font-size: 16px; }
.font-d-18 { font-size: 18px; }
.font-d-20 { font-size: 20px; }
.font-d-22 { font-size: 22px; }
.font-d-24 { font-size: 24px; }
.font-d-26 { font-size: 26px; }
.font-d-28 { font-size: 28px; }
.font-d-30 { font-size: 30px; }
.font-d-32 { font-size: 32px; }
.font-d-34 { font-size: 34px; }
.font-d-36 { font-size: 36px; }
.font-d-38 { font-size: 38px; }
.font-d-40 { font-size: 40px; }
.font-d-42 { font-size: 42px; }
.font-d-44 { font-size: 44px; }
.font-d-46 { font-size: 46px; }
.font-d-48 { font-size: 48px; }

/* Custom Font Size Classes for Tablet */
@media (max-width: 1023px) {
  :root {
    --font-size-xs: 0.625rem;  /* 10px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-md: 1.125rem;  /* 18px */
    --font-size-lg: 1.375rem;  /* 22px */
    --font-size-xl: 1.75rem;   /* 28px */
    --font-size-2xl: 2.25rem;  /* 36px */

    --font-size-paragraph: 0.875rem; /* 14px */
    --font-size-button: 0.875rem;    /* 14px */
  }

  .font-t-8 { font-size: 8px; }
  .font-t-10 { font-size: 10px; }
  .font-t-12 { font-size: 12px; }
  .font-t-14 { font-size: 14px; }
  .font-t-16 { font-size: 16px; }
  .font-t-18 { font-size: 18px; }
  .font-t-20 { font-size: 20px; }
  .font-t-22 { font-size: 22px; }
  .font-t-24 { font-size: 24px; }
  .font-t-26 { font-size: 26px; }
  .font-t-28 { font-size: 28px; }
  .font-t-30 { font-size: 30px; }
  .font-t-32 { font-size: 32px; }
  .font-t-34 { font-size: 34px; }
  .font-t-36 { font-size: 36px; }
  .font-t-38 { font-size: 38px; }
  .font-t-40 { font-size: 40px; }
  .font-t-42 { font-size: 42px; }
  .font-t-44 { font-size: 44px; }
  .font-t-46 { font-size: 46px; }
  .font-t-48 { font-size: 48px; }
}

/* Custom Font Size Classes for Mobile */
@media (max-width: 599px) {
  :root {
    --font-size-xs: 0.5rem;    /* 8px */
    --font-size-sm: 0.75rem;   /* 12px */
    --font-size-md: 1rem;      /* 16px */
    --font-size-lg: 1.25rem;   /* 20px */
    --font-size-xl: 1.5rem;    /* 24px */
    --font-size-2xl: 1.75rem;  /* 28px */

    --font-size-paragraph: 0.75rem; /* 12px */
    --font-size-button: 0.75rem;    /* 12px */
  }

  .font-m-8 { font-size: 8px; }
  .font-m-10 { font-size: 10px; }
  .font-m-12 { font-size: 12px; }
  .font-m-14 { font-size: 14px; }
  .font-m-16 { font-size: 16px; }
  .font-m-18 { font-size: 18px; }
  .font-m-20 { font-size: 20px; }
  .font-m-22 { font-size: 22px; }
  .font-m-24 { font-size: 24px; }
  .font-m-26 { font-size: 26px; }
  .font-m-28 { font-size: 28px; }
  .font-m-30 { font-size: 30px; }
  .font-m-32 { font-size: 32px; }
  .font-m-34 { font-size: 34px; }
  .font-m-36 { font-size: 36px; }
  .font-m-38 { font-size: 38px; }
  .font-m-40 { font-size: 40px; }
  .font-m-42 { font-size: 42px; }
  .font-m-44 { font-size: 44px; }
  .font-m-46 { font-size: 46px; }
  .font-m-48 { font-size: 48px; }
}


/* Universal Padding Classes */
.pd-5 { padding: 5px; } /* Padding 5px on all sides for all devices */
.pd-t-5 { padding-top: 5px; } /* Padding 5px on top for all devices */
.pd-b-5 { padding-bottom: 5px; } /* Padding 5px on bottom for all devices */
.pd-l-5 { padding-left: 5px; } /* Padding 5px on left for all devices */
.pd-r-5 { padding-right: 5px; } /* Padding 5px on right for all devices */

.pd-10 { padding: 10px; } /* Padding 10px on all sides for all devices */
.pd-t-10 { padding-top: 10px; } /* Padding 10px on top for all devices */
.pd-b-10 { padding-bottom: 10px; } /* Padding 10px on bottom for all devices */
.pd-l-10 { padding-left: 10px; } /* Padding 10px on left for all devices */
.pd-r-10 { padding-right: 10px; } /* Padding 10px on right for all devices */

.pd-20 { padding: 20px; } /* Padding 20px on all sides for all devices */
.pd-t-20 { padding-top: 20px; } /* Padding 20px on top for all devices */
.pd-b-20 { padding-bottom: 20px; } /* Padding 20px on bottom for all devices */
.pd-l-20 { padding-left: 20px; } /* Padding 20px on left for all devices */
.pd-r-20 { padding-right: 20px; } /* Padding 20px on right for all devices */

.pd-30 { padding: 30px; } /* Padding 30px on all sides for all devices */
.pd-t-30 { padding-top: 30px; } /* Padding 30px on top for all devices */
.pd-b-30 { padding-bottom: 30px; } /* Padding 30px on bottom for all devices */
.pd-l-30 { padding-left: 30px; } /* Padding 30px on left for all devices */
.pd-r-30 { padding-right: 30px; } /* Padding 30px on right for all devices */

.pd-40 { padding: 40px; } /* Padding 40px on all sides for all devices */
.pd-t-40 { padding-top: 40px; } /* Padding 40px on top for all devices */
.pd-b-40 { padding-bottom: 40px; } /* Padding 40px on bottom for all devices */
.pd-l-40 { padding-left: 40px; } /* Padding 40px on left for all devices */
.pd-r-40 { padding-right: 40px; } /* Padding 40px on right for all devices */

.pd-50 { padding: 50px; } /* Padding 50px on all sides for all devices */
.pd-t-50 { padding-top: 50px; } /* Padding 50px on top for all devices */
.pd-b-50 { padding-bottom: 50px; } /* Padding 50px on bottom for all devices */
.pd-l-50 { padding-left: 50px; } /* Padding 50px on left for all devices */
.pd-r-50 { padding-right: 50px; } /* Padding 50px on right for all devices */

/* Custom Padding Classes for Desktop */
.pd-d-5 { padding: 5px; } /* Padding 5px on all sides */
.pd-d-t-5 { padding-top: 5px; } /* Padding 5px on top */
.pd-d-b-5 { padding-bottom: 5px; } /* Padding 5px on bottom */
.pd-d-l-5 { padding-left: 5px; } /* Padding 5px on left */
.pd-d-r-5 { padding-right: 5px; } /* Padding 5px on right */

.pd-d-10 { padding: 10px; } /* Padding 10px on all sides */
.pd-d-t-10 { padding-top: 10px; } /* Padding 10px on top */
.pd-d-b-10 { padding-bottom: 10px; } /* Padding 10px on bottom */
.pd-d-l-10 { padding-left: 10px; } /* Padding 10px on left */
.pd-d-r-10 { padding-right: 10px; } /* Padding 10px on right */

.pd-d-20 { padding: 20px; } /* Padding 20px on all sides */
.pd-d-t-20 { padding-top: 20px; } /* Padding 20px on top */
.pd-d-b-20 { padding-bottom: 20px; } /* Padding 20px on bottom */
.pd-d-l-20 { padding-left: 20px; } /* Padding 20px on left */
.pd-d-r-20 { padding-right: 20px; } /* Padding 20px on right */

.pd-d-30 { padding: 30px; } /* Padding 30px on all sides */
.pd-d-t-30 { padding-top: 30px; } /* Padding 30px on top */
.pd-d-b-30 { padding-bottom: 30px; } /* Padding 30px on bottom */
.pd-d-l-30 { padding-left: 30px; } /* Padding 30px on left */
.pd-d-r-30 { padding-right: 30px; } /* Padding 30px on right */

.pd-d-40 { padding: 40px; } /* Padding 40px on all sides */
.pd-d-t-40 { padding-top: 40px; } /* Padding 40px on top */
.pd-d-b-40 { padding-bottom: 40px; } /* Padding 40px on bottom */
.pd-d-l-40 { padding-left: 40px; } /* Padding 40px on left */
.pd-d-r-40 { padding-right: 40px; } /* Padding 40px on right */

.pd-d-50 { padding: 50px; } /* Padding 50px on all sides */
.pd-d-t-50 { padding-top: 50px; } /* Padding 50px on top */
.pd-d-b-50 { padding-bottom: 50px; } /* Padding 50px on bottom */
.pd-d-l-50 { padding-left: 50px; } /* Padding 50px on left */
.pd-d-r-50 { padding-right: 50px; } /* Padding 50px on right */

/* Custom Padding Classes for Tablet */
@media (max-width: 1023px) {
  .pd-t-5 { padding: 5px; } /* Padding 5px on all sides */
  .pd-t-t-5 { padding-top: 5px; } /* Padding 5px on top */
  .pd-t-b-5 { padding-bottom: 5px; } /* Padding 5px on bottom */
  .pd-t-l-5 { padding-left: 5px; } /* Padding 5px on left */
  .pd-t-r-5 { padding-right: 5px; } /* Padding 5px on right */

  .pd-t-10 { padding: 10px; } /* Padding 10px on all sides */
  .pd-t-t-10 { padding-top: 10px; } /* Padding 10px on top */
  .pd-t-b-10 { padding-bottom: 10px; } /* Padding 10px on bottom */
  .pd-t-l-10 { padding-left: 10px; } /* Padding 10px on left */
  .pd-t-r-10 { padding-right: 10px; } /* Padding 10px on right */

  .pd-t-20 { padding: 20px; } /* Padding 20px on all sides */
  .pd-t-t-20 { padding-top: 20px; } /* Padding 20px on top */
  .pd-t-b-20 { padding-bottom: 20px; } /* Padding 20px on bottom */
  .pd-t-l-20 { padding-left: 20px; } /* Padding 20px on left */
  .pd-t-r-20 { padding-right: 20px; } /* Padding 20px on right */

  .pd-t-30 { padding: 30px; } /* Padding 30px on all sides */
  .pd-t-t-30 { padding-top: 30px; } /* Padding 30px on top */
  .pd-t-b-30 { padding-bottom: 30px; } /* Padding 30px on bottom */
  .pd-t-l-30 { padding-left: 30px; } /* Padding 30px on left */
  .pd-t-r-30 { padding-right: 30px; } /* Padding 30px on right */

  .pd-t-40 { padding: 40px; } /* Padding 40px on all sides */
  .pd-t-t-40 { padding-top: 40px; } /* Padding 40px on top */
  .pd-t-b-40 { padding-bottom: 40px; } /* Padding 40px on bottom */
  .pd-t-l-40 { padding-left: 40px; } /* Padding 40px on left */
  .pd-t-r-40 { padding-right: 40px; } /* Padding 40px on right */

  .pd-t-50 { padding: 50px; } /* Padding 50px on all sides */
  .pd-t-t-50 { padding-top: 50px; } /* Padding 50px on top */
  .pd-t-b-50 { padding-bottom: 50px; } /* Padding 50px on bottom */
  .pd-t-l-50 { padding-left: 50px; } /* Padding 50px on left */
  .pd-t-r-50 { padding-right: 50px; } /* Padding 50px on right */

  /* Add more padding values as needed */
}

/* Custom Padding Classes for Mobile */
@media (max-width: 599px) {
  .pd-m-5 { padding: 5px; } /* Padding 5px on all sides */
  .pd-m-t-5 { padding-top: 5px; } /* Padding 5px on top */
  .pd-m-b-5 { padding-bottom: 5px; } /* Padding 5px on bottom */
  .pd-m-l-5 { padding-left: 5px; } /* Padding 5px on left */
  .pd-m-r-5 { padding-right: 5px; } /* Padding 5px on right */

  .pd-m-10 { padding: 10px; } /* Padding 10px on all sides */
  .pd-m-t-10 { padding-top: 10px; } /* Padding 10px on top */
  .pd-m-b-10 { padding-bottom: 10px; } /* Padding 10px on bottom */
  .pd-m-l-10 { padding-left: 10px; } /* Padding 10px on left */
  .pd-m-r-10 { padding-right: 10px; } /* Padding 10px on right */

  .pd-m-20 { padding: 20px; } /* Padding 20px on all sides */
  .pd-m-t-20 { padding-top: 20px; } /* Padding 20px on top */
  .pd-m-b-20 { padding-bottom: 20px; } /* Padding 20px on bottom */
  .pd-m-l-20 { padding-left: 20px; } /* Padding 20px on left */
  .pd-m-r-20 { padding-right: 20px; } /* Padding 20px on right */

  .pd-m-30 { padding: 30px; } /* Padding 30px on all sides */
  .pd-m-t-30 { padding-top: 30px; } /* Padding 30px on top */
  .pd-m-b-30 { padding-bottom: 30px; } /* Padding 30px on bottom */
  .pd-m-l-30 { padding-left: 30px; } /* Padding 30px on left */
  .pd-m-r-30 { padding-right: 30px; } /* Padding 30px on right */

  .pd-m-40 { padding: 40px; } /* Padding 40px on all sides */
  .pd-m-t-40 { padding-top: 40px; } /* Padding 40px on top */
  .pd-m-b-40 { padding-bottom: 40px; } /* Padding 40px on bottom */
  .pd-m-l-40 { padding-left: 40px; } /* Padding 40px on left */
  .pd-m-r-40 { padding-right: 40px; } /* Padding 40px on right */

  .pd-m-50 { padding: 50px; } /* Padding 50px on all sides */
  .pd-m-t-50 { padding-top: 50px; } /* Padding 50px on top */
  .pd-m-b-50 { padding-bottom: 50px; } /* Padding 50px on bottom */
  .pd-m-l-50 { padding-left: 50px; } /* Padding 50px on left */
  .pd-m-r-50 { padding-right: 50px; } /* Padding 50px on right */

  /* Add more padding values as needed */
}



/* Universal Margin Classes */
.mg-5 { margin: 5px; } /* Margin 5px on all sides for all devices */
.mg-t-5 { margin-top: 5px; } /* Margin 5px on top for all devices */
.mg-b-5 { margin-bottom: 5px; } /* Margin 5px on bottom for all devices */
.mg-l-5 { margin-left: 5px; } /* Margin 5px on left for all devices */
.mg-r-5 { margin-right: 5px; } /* Margin 5px on right for all devices */

.mg-10 { margin: 10px; } /* Margin 10px on all sides for all devices */
.mg-t-10 { margin-top: 10px; } /* Margin 10px on top for all devices */
.mg-b-10 { margin-bottom: 10px; } /* Margin 10px on bottom for all devices */
.mg-l-10 { margin-left: 10px; } /* Margin 10px on left for all devices */
.mg-r-10 { margin-right: 10px; } /* Margin 10px on right for all devices */


.mg-l-15 { margin-left: 15px; } /* Margin 10px on left for all devices */

.mg-20 { margin: 20px; } /* Margin 20px on all sides for all devices */
.mg-t-20 { margin-top: 20px; } /* Margin 20px on top for all devices */
.mg-b-20 { margin-bottom: 20px; } /* Margin 20px on bottom for all devices */
.mg-l-20 { margin-left: 20px; } /* Margin 20px on left for all devices */
.mg-r-20 { margin-right: 20px; } /* Margin 20px on right for all devices */

.mg-30 { margin: 30px; } /* Margin 30px on all sides for all devices */
.mg-t-30 { margin-top: 30px; } /* Margin 30px on top for all devices */
.mg-b-30 { margin-bottom: 30px; } /* Margin 30px on bottom for all devices */
.mg-l-30 { margin-left: 30px; } /* Margin 30px on left for all devices */
.mg-r-30 { margin-right: 30px; } /* Margin 30px on right for all devices */

.mg-40 { margin: 40px; } /* Margin 40px on all sides for all devices */
.mg-t-40 { margin-top: 40px; } /* Margin 40px on top for all devices */
.mg-b-40 { margin-bottom: 40px; } /* Margin 40px on bottom for all devices */
.mg-l-40 { margin-left: 40px; } /* Margin 40px on left for all devices */
.mg-r-40 { margin-right: 40px; } /* Margin 40px on right for all devices */

.mg-50 { margin: 50px; } /* Margin 50px on all sides for all devices */
.mg-t-50 { margin-top: 50px; } /* Margin 50px on top for all devices */
.mg-b-50 { margin-bottom: 50px; } /* Margin 50px on bottom for all devices */
.mg-l-50 { margin-left: 50px; } /* Margin 50px on left for all devices */
.mg-r-50 { margin-right: 50px; } /* Margin 50px on right for all devices */

/* Custom Margin Classes for Desktop */
.mg-d-5 { margin: 5px; } /* Margin 5px on all sides */
.mg-d-t-5 { margin-top: 5px; } /* Margin 5px on top */
.mg-d-b-5 { margin-bottom: 5px; } /* Margin 5px on bottom */
.mg-d-l-5 { margin-left: 5px; } /* Margin 5px on left */
.mg-d-r-5 { margin-right: 5px; } /* Margin 5px on right */

.mg-d-10 { margin: 10px; } /* Margin 10px on all sides */
.mg-d-t-10 { margin-top: 10px; } /* Margin 10px on top */
.mg-d-b-10 { margin-bottom: 10px; } /* Margin 10px on bottom */
.mg-d-l-10 { margin-left: 10px; } /* Margin 10px on left */
.mg-d-r-10 { margin-right: 10px; } /* Margin 10px on right */

.mg-d-20 { margin: 20px; } /* Margin 20px on all sides */
.mg-d-t-20 { margin-top: 20px; } /* Margin 20px on top */
.mg-d-b-20 { margin-bottom: 20px; } /* Margin 20px on bottom */
.mg-d-l-20 { margin-left: 20px; } /* Margin 20px on left */
.mg-d-r-20 { margin-right: 20px; } /* Margin 20px on right */

.mg-d-30 { margin: 30px; } /* Margin 30px on all sides */
.mg-d-t-30 { margin-top: 30px; } /* Margin 30px on top */
.mg-d-b-30 { margin-bottom: 30px; } /* Margin 30px on bottom */
.mg-d-l-30 { margin-left: 30px; } /* Margin 30px on left */
.mg-d-r-30 { margin-right: 30px; } /* Margin 30px on right */

.mg-d-40 { margin: 40px; } /* Margin 40px on all sides */
.mg-d-t-40 { margin-top: 40px; } /* Margin 40px on top */
.mg-d-b-40 { margin-bottom: 40px; } /* Margin 40px on bottom */
.mg-d-l-40 { margin-left: 40px; } /* Margin 40px on left */
.mg-d-r-40 { margin-right: 40px; } /* Margin 40px on right */

.mg-d-50 { margin: 50px; } /* Margin 50px on all sides */
.mg-d-t-50 { margin-top: 50px; } /* Margin 50px on top */
.mg-d-b-50 { margin-bottom: 50px; } /* Margin 50px on bottom */
.mg-d-l-50 { margin-left: 50px; } /* Margin 50px on left */
.mg-d-r-50 { margin-right: 50px; } /* Margin 50px on right */

/* Custom Margin Classes for Tablet */
@media (max-width: 1023px) {
  .mg-t-5 { margin: 5px; } /* Margin 5px on all sides */
  .mg-t-t-5 { margin-top: 5px; } /* Margin 5px on top */
  .mg-t-b-5 { margin-bottom: 5px; } /* Margin 5px on bottom */
  .mg-t-l-5 { margin-left: 5px; } /* Margin 5px on left */
  .mg-t-r-5 { margin-right: 5px; } /* Margin 5px on right */

  .mg-t-10 { margin: 10px; } /* Margin 10px on all sides */
  .mg-t-t-10 { margin-top: 10px; } /* Margin 10px on top */
  .mg-t-b-10 { margin-bottom: 10px; } /* Margin 10px on bottom */
  .mg-t-l-10 { margin-left: 10px; } /* Margin 10px on left */
  .mg-t-r-10 { margin-right: 10px; } /* Margin 10px on right */

  .mg-t-20 { margin: 20px; } /* Margin 20px on all sides */
  .mg-t-t-20 { margin-top: 20px; } /* Margin 20px on top */
  .mg-t-b-20 { margin-bottom: 20px; } /* Margin 20px on bottom */
  .mg-t-l-20 { margin-left: 20px; } /* Margin 20px on left */
  .mg-t-r-20 { margin-right: 20px; } /* Margin 20px on right */

  .mg-t-30 { margin: 30px; } /* Margin 30px on all sides */
  .mg-t-t-30 { margin-top: 30px; } /* Margin 30px on top */
  .mg-t-b-30 { margin-bottom: 30px; } /* Margin 30px on bottom */
  .mg-t-l-30 { margin-left: 30px; } /* Margin 30px on left */
  .mg-t-r-30 { margin-right: 30px; } /* Margin 30px on right */

  .mg-t-40 { margin: 40px; } /* Margin 40px on all sides */
  .mg-t-t-40 { margin-top: 40px; } /* Margin 40px on top */
  .mg-t-b-40 { margin-bottom: 40px; } /* Margin 40px on bottom */
  .mg-t-l-40 { margin-left: 40px; } /* Margin 40px on left */
  .mg-t-r-40 { margin-right: 40px; } /* Margin 40px on right */

  .mg-t-50 { margin: 50px; } /* Margin 50px on all sides */
  .mg-t-t-50 { margin-top: 50px; } /* Margin 50px on top */
  .mg-t-b-50 { margin-bottom: 50px; } /* Margin 50px on bottom */
  .mg-t-l-50 { margin-left: 50px; } /* Margin 50px on left */
  .mg-t-r-50 { margin-right: 50px; } /* Margin 50px on right */

  /* Add more margin values as needed */
}

/* Custom Margin Classes for Mobile */
@media (max-width: 599px) {
  .mg-m-5 { margin: 5px; } /* Margin 5px on all sides */
  .mg-m-t-5 { margin-top: 5px; } /* Margin 5px on top */
  .mg-m-b-5 { margin-bottom: 5px; } /* Margin 5px on bottom */
  .mg-m-l-5 { margin-left: 5px; } /* Margin 5px on left */
  .mg-m-r-5 { margin-right: 5px; } /* Margin 5px on right */

  .mg-m-10 { margin: 10px; } /* Margin 10px on all sides */
  .mg-m-t-10 { margin-top: 10px; } /* Margin 10px on top */
  .mg-m-b-10 { margin-bottom: 10px; } /* Margin 10px on bottom */
  .mg-m-l-10 { margin-left: 10px; } /* Margin 10px on left */
  .mg-m-r-10 { margin-right: 10px; } /* Margin 10px on right */

  .mg-m-20 { margin: 20px; } /* Margin 20px on all sides */
  .mg-m-t-20 { margin-top: 20px; } /* Margin 20px on top */
  .mg-m-b-20 { margin-bottom: 20px; } /* Margin 20px on bottom */
  .mg-m-l-20 { margin-left: 20px; } /* Margin 20px on left */
  .mg-m-r-20 { margin-right: 20px; } /* Margin 20px on right */

  .mg-m-30 { margin: 30px; } /* Margin 30px on all sides */
  .mg-m-t-30 { margin-top: 30px; } /* Margin 30px on top */
  .mg-m-b-30 { margin-bottom: 30px; } /* Margin 30px on bottom */
  .mg-m-l-30 { margin-left: 30px; } /* Margin 30px on left */
  .mg-m-r-30 { margin-right: 30px; } /* Margin 30px on right */

  .mg-m-40 { margin: 40px; } /* Margin 40px on all sides */
  .mg-m-t-40 { margin-top: 40px; } /* Margin 40px on top */
  .mg-m-b-40 { margin-bottom: 40px; } /* Margin 40px on bottom */
  .mg-m-l-40 { margin-left: 40px; } /* Margin 40px on left */
  .mg-m-r-40 { margin-right: 40px; } /* Margin 40px on right */

  .mg-m-50 { margin: 50px; } /* Margin 50px on all sides */
  .mg-m-t-50 { margin-top: 50px; } /* Margin 50px on top */
  .mg-m-b-50 { margin-bottom: 50px; } /* Margin 50px on bottom */
  .mg-m-l-50 { margin-left: 50px; } /* Margin 50px on left */
  .mg-m-r-50 { margin-right: 50px; } /* Margin 50px on right */

  /* Add more margin values as needed */
}