/* ==========================================================================
    Global Reset & Base Typography
========================================================================== */
*,
:before,
:after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    color: #1d1d1d;
    -webkit-tap-highlight-color: transparent;
}

p,
ul,
ol {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-style: none;
}

a {
    color: #842908;
    transition: all .2s
}

a:hover {
    color: #ff8421;
}

button {
    cursor: pointer;
    font-family: "Plus Jakarta Sans", sans-serif;
}

button:disabled {
    cursor: auto;
}

/* Form Styles */
textarea,
input {
    font-family: "Plus Jakarta Sans", sans-serif;
}

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500
}

.form-check {
    cursor: pointer;
    margin-bottom: 0;
}

.form-input {
    width: 100%;
    max-width: 100%;
    color: #1d1d1d;
    padding: 0.5rem;
    border: 1px solid #1d1d1d;
    border-radius: 0;
    transition: all .2s;
    position: relative
}

.form-input:focus,
.form-input:hover {
    outline: 0;
    border-color: #842908;
}

/* Group Form Elements */
.form-row-inline {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}

.form-row-inline>* {
    flex: 1;
    flex-basis: 9rem;
}

/* Button Styles */
.btn {
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    background-color: #842908;
    border: 1px solid #842908;
    box-shadow: none;
    transition: all .2s
}

.btn:hover {
    background-color: #692107;
}

/* Hidden */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Responsive Container
========================================================================== */
.container {
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
}

@media (min-width: 576px)  { .container { max-width: 600px; } }
@media (min-width: 768px)  { .container { max-width: 722px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1172px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ==========================================================================
   4. Header
========================================================================== */
.header {
    padding: 1rem 0;
}

.header .site-logo {
    max-width: 46rem;
    margin: 0 auto;
}

.header .form-wrapper {
    max-width: 46rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: -1.125rem;
    gap: 2.5rem;
}

.header .form-wrapper p {
    flex: 1;
    max-width: 21rem;
    font-size: 0.9375rem;
}

.header .form-wrapper .search-form {
    flex: 1;
    width: 100%;
    max-width: 16rem;
}

.header .search-button {
    color: #fff;
    font-weight: 600;
    border: none;
    box-shadow: none;
    margin-left: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: #842908;
    transition: .2s all;
}

.header .search-button:hover {
    background-color: #692107;
}

.header .input-btn-group {
    display: flex;
}

@media screen and (max-width:767px) {

    .header .form-wrapper .search-form,
    .header .form-wrapper p {
        max-width: 15rem;
    }

    .header .search-button {
        padding: 0.5rem;
    }
}

@media screen and (max-width:575px) {
    .header .form-wrapper {
        margin-top: 0.25rem;
    }

    .header .form-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .header .form-wrapper .search-form,
    .header .form-wrapper p {
        max-width: 100%;
    }
}

/* ========== Page Heading ============ */
.page-heading h1 {
    text-align: center;
    padding: 0 0 1rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* ==========================================================================
   Feature Banner
========================================================================== */

.feature-banner .content {
    max-width: 46rem;
    min-height: 6rem;
    margin: 0 auto;
    contain: layout paint size;   
}

/* ==========================================================================
   Category Section
========================================================================== */
.category-section {
    position: relative;
    margin: 1.5rem 0;
}

.category-section .ads {
  min-width: 200px;
  min-height: 206px;
  contain: layout paint size;
}

.category-section .section-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 80rem;
    position: relative;
    margin: 0 auto;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.category-section .category-content {
    flex: auto;
}

.category-section h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    text-align: center;
    padding-bottom: 1rem;
}

.category-section .category-content table {
    width: auto;
    margin: 0 auto;
}

.category-section .category-content table tr td {
    padding: 0 2rem;
}

/* Home Specefic */
.category-section.home {
    min-height: 12.5rem;
}

.category-section.home .ads {
    position: absolute;
    left: 0;
    top: 0;
}

.category-section.home .category-content table {
    width: auto;
    margin: 0 auto;
}

.category-section.home .category-content table tr td {
    padding: 0 2rem;
    width: auto;
}

@media screen and (max-width:991px) {
    .category-section.home {
        min-height: auto;
    }

    .category-section.home .ads {
        position: relative;
    }

    .category-section .category-content table {
        width: auto;
        margin: 0 auto;
    } 

    .category-section .category-content table tr td {
        padding: 0 2rem;
    }

    .category-section.home .category-content table tr td {
        padding: 0 .625rem;
    }
}

@media screen and (max-width:767px) {
    .category-section .section-grid {
        justify-content: center;
    }

    .category-section .category-content .catlist a {
        font-size: 0.9375rem;
        font-weight: 600;
    }
}

@media screen and (max-width:575px) {
    .category-section .category-content table tr td {
        padding: 0 0.625rem;
    }
}

/* ==========================================================================
   Directory Results
========================================================================== */
.directory-results {
    padding: 0 0 2rem 0;
}

.directory-results-list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 4vw, 1rem);
}

.directory-results-list,
.directory-results ul {
    padding: 0;
    margin-bottom: 1rem;
    list-style: none;
}

.directory-results-list:last-of-type,
.directory-results ul:last-of-type {
    margin-bottom: 0;
}

.directory-results .pagination {
    text-align: center;
    padding: 2rem 0;
}

.directory-results .related-categories {
    text-align: center;
}

.directory-results .related-categories li {
    padding: 0.5rem 0;
    list-style: none;
}

@media screen and (max-width:767px) {
    .directory-results li {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   Footer
========================================================================== */
.footer {
    padding: 2rem 0;
    border-top: 1px solid #1d1d1d;
}

.about-us-cta,
.media-partner-cta,
.footer-feedback {
    text-align: center;
    padding-bottom: 2rem;
}

.about-us-cta p,
.media-partner-cta p,
.footer-feedback p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 500;
}

.about-us-cta a,
.media-partner-cta a,
.footer-feedback a {
    font-weight: 600;
}

.footer-nav {
    padding-bottom: 2rem;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    gap: clamp(1rem, 2vw, 1.5rem);
    list-style: none;
}

.footer-nav li {
    position: relative;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 600;
}

.footer-nav li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(-6px, 2vw,-12px);
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background-color: #1d1d1d;
}

.footer-nav li:last-child::after {
    display: none;
}

.footer-description h2 {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
}

.footer-description .description-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer .location-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer .location-info h2 {
    font-style: italic;
    padding: 1rem 0;
    text-align: left;
}

.footer .location-info p {
    font-style: italic;
}

.footer .footer-copy {
    text-align: center;
    padding-top: 2.5rem;
}

/* ==========================================================================  
   Media Partners  
========================================================================== */
.media-partners {
    padding: clamp(1.5rem, 4vw, 2rem) 0;
}

.media-partners h1 {
    color: #842908;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
}

.media-partners .descriptions-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.media-partners .descriptions-block p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.media-partners .descriptions-block .promo-image {
    max-width: 34rem;
    margin: 0 auto;
}

/* ==========================================================================  
   Add Your Business & Contact Us Intro  
========================================================================== */
.contact-us-intro,
.add-business-intro {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.contact-us-intro h1,
.add-business-intro h1 {
    color: #842908; 
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.add-business-intro h2 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
}

.contact-us-intro .descriptions-block,
.add-business-intro .descriptions-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-us-intro .descriptions-block p,
.add-business-intro .descriptions-block p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.contact-us-form,
.add-business-form {
    padding: 2.5rem 0;
    background-color: #f9f9f9;
    border-top: 1px solid #1d1d1d;
}

.contact-us-form .form-head,
.add-business-form .form-head {
    text-align: center;
}

.contact-us-form .form-head h2,
.add-business-form .form-head h2 {
    color: #842908;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin-bottom: 1rem;
}

.contact-us-form .form-head p {
    max-width: 45rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.125rem);
}

.add-business-form .form-head .price {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: bold;
}

.contact-us-form .form-main,
.add-business-form .form-main {
    max-width: 37.5rem;
    padding: clamp(1rem, 4vw, 2.5rem);
    margin: clamp(1rem, 4vw, 2rem) auto 0;
    background-color: #fff;
    border: 1px solid #aaa;
}

.add-business-form .form-main fieldset {
    margin-bottom: 1rem;
}

.add-business-form .form-main legend {
    width: 100%;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #aaa;
}

.contact-us-form .form-main .form-item,
.add-business-form .form-main .form-item {
    margin-bottom: 1rem;
}

.contact-us-form .form-main label,
.add-business-form .form-main label {
    font-size: clamp(0.9375rem, 2vw, 1rem);
}

.contact-us-form .form-main .form-input,
.add-business-form .form-main .form-input {
    font-size: 1rem;
    padding: clamp(0.5rem, 2vw, 0.75rem);
    border-color: #aaa;
}

.contact-us-form .form-main textarea.form-input,
.add-business-form .form-main textarea.form-input {
    resize: none;
} 

.contact-us-form .form-main select,
.add-business-form .form-main select {
    display: block;
    width: 100%;
    max-width: 100%;
    color: #1d1d1d;
    font-size: 1rem;
    padding: clamp(0.5rem, 2vw, 0.75rem);
    border: 1px solid #aaa;
    border-radius: 0;
    transition: all .2s;
}
.contact-us-form .form-main .form-note,
.add-business-form .form-main .form-note {
    font-size: 0.875rem;
}

.contact-us-form .form-main select:focus,
.add-business-form .form-main select:focus,
.contact-us-form .form-main .form-input:focus,
.add-business-form .form-main .form-input:focus {
    box-shadow: 0 0 2px 2px #84290833;
}

.contact-us-form .form-main .form-check-group,
.add-business-form .form-main .form-check-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-us-form .form-main .submit-area,
.add-business-form .form-main .submit-area {
    padding-top: 1rem;
    text-align: center;
}

.add-business-form .form-main .submit-area p:first-child {
    color: #842908;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-us-form .form-main .submit-btn,
.add-business-form .form-main .submit-btn {
    border: 0;
    box-shadow: none;
    width: 100%;
    font-size: 1rem;
    padding: clamp(0.75rem, 2vw, 1rem);
    margin-top: 1.5rem;
}

/* ==========================================================================  
  404 Not Found
========================================================================== */
@media screen and (min-width:576px) {
    .header .not-found-title {
        margin-top: -1rem;
    }
}

.section-404 {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section-404 h1 {
    color: #842908;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    line-height: 1.5;
}

.section-404 h1 span {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
}

.section-404 p {
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.5;
}

.section-404 p a {
    color: #ff8421;
}

.section-404 p a:hover {
    text-decoration: none;
}


/* ==========================================================================  
   About Us
========================================================================== */
.about-us {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.about-us h1 {
    color: #842908;
    text-align: center;
    padding: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.about-us .about-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.about-us .about-content h2 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    margin-bottom: 0.5rem;
}

.about-us .about-content p+h2 {
    margin-top: 1.5rem;
}

.about-us .about-content p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

/* ==========================================================================  
   Employment Opportunities
========================================================================== */
.employment-opportunities {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.employment-opportunities h1 {
    color: #842908;
    text-align: center;
    padding: 0 0 clamp(1.25rem, 4vw, 2rem);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.employment-opportunities .intro-text {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.5rem;
    gap: 1rem;
}

.employment-opportunities .intro-text p {
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.employment-opportunities .job-listing {
    padding: 1.5rem 0 0;
    border-top: 1px solid #1d1d1d;
}

.employment-opportunities .job-listing h2 {
    color: #842908;
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
}

.employment-opportunities .job-listing h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.employment-opportunities .job-listing p {
    margin-bottom: 1rem;
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.employment-opportunities .job-listing p:last-child {
    margin-bottom: 0;
}

.employment-opportunities .job-listing ul {
    margin-bottom: 1.5rem;
    padding-left: clamp(1.5rem, 4vw, 2.5rem);
}

.employment-opportunities .job-listing ul li {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Link to Us & Maryland Link
========================================================================== */

.thanks-to-link,
.link-to-us {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.thanks-to-link h1,
.link-to-us h1 {
  color: #842908;
  text-align: center;
  padding: 0 0 clamp(1rem, 4vw, 1.5rem);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.thanks-to-link h2 {
    color: #842908;
    text-align: center;
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    margin-top: clamp(1.25rem, 4vw, 2rem);
    margin-bottom: 1rem;
}

.thanks-to-link p,
.link-to-us p {
  margin-bottom: 1rem;
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.link-to-us ol {
  display: flex;
  flex-direction: column;
  padding-left: 1.125rem;
  margin-bottom: 1rem;
  gap: 1rem;
}

.link-to-us ol li {
  font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

/* Maryland Link Section */
.maryland-link-section {
  padding: clamp(1.5rem, 4vw, 2rem) 0;
  border-top: 1px solid #1d1d1d;
}

.maryland-link-section .link-block {
  max-width: 50rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 0;
  margin: 0 auto;
  gap: clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid #aaa;
}

.maryland-link-section .link-block:last-child {
  border-bottom: 0;
}

.maryland-link-section .search-preview,
.maryland-link-section .logo-preview {
  flex: 1;
  display: flex;
  justify-content: center;
}

.maryland-link-section .link-block .search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.maryland-link-section .input-btn-group {
  display: flex;
}

.maryland-link-section .search-button {
  margin-left: 0.375rem;
}

.maryland-link-section .embed-code textarea {
  resize: none;
}

/* Responsive Styles */
@media screen and (max-width: 991px) {
    .maryland-link-section {
        padding: 0;
    }

    .maryland-link-section .link-block {
        flex-direction: column;
    }
}

/* ==========================================================================
   Add Business Success
========================================================================== */
.add-business-success {
    padding: 2rem 0;
}

.add-business-success h1 {
    color: #842908;
    text-align: center;
    padding: 0 0 1rem;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
}

.add-business-success p {
    text-align: center;
    margin-bottom: 1rem;
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
}

.add-business-success ul {
    max-width: 30rem;
    margin: 2rem auto;
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    list-style: none;
}

.add-business-success ul li:not(:last-child){
    display: flex;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    flex-direction: column;
    border-bottom: 1px solid #aaa;
    gap: 0.5rem;
}

.add-business-success ul li p {
    text-align: left;
    font-size: 1rem;
    margin-bottom: 0;
}

.add-business-success ul li p:first-child {
    font-weight: bold;
}

.add-business-success .thankyou-text span {
    display: block;
    font-size: 2rem;
    font-weight: bold;
}

/* ==========================================================================
   Variables  Links CSS
========================================================================== */
.business-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Thumb Layout Specefic */
.business-card.thumb {
    flex-direction: row;
    gap: 1.5rem;
}

.business-card .business-link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.business-card .business-link img {
    max-width: 46rem;
}

/* Thumb Small */
.business-card.thumb-small .business-link img {
    max-width: 6.25rem;
}

/* Thumb Medium */
.business-card.thumb-medium .business-link img {
    max-width: 12.5rem;
}

.business-card .business-info {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 4vw, 1.5rem);
}

.business-card h3 {
    font-size: clamp(1.125rem, 4vw, 1.375rem);
    text-align: center;
}

.business-card .business-address {
    max-width: 60rem;
    text-align: center;
    padding: 0.75rem;
    margin: 0.5rem auto;
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    background: #DED6BD;
}

.business-card.with-video .business-info {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 4vw, 2rem);
}

.business-card.with-video.thumb-medium .business-info {
    flex-direction: column;
}

.business-card .descript {
    margin-bottom: clamp(1rem, 4vw, 1.5rem);
}

@media screen and (max-width:767px) {
    .business-card.thumb {
        flex-direction: column;
    }

    .business-card.with-video .business-info {
        margin-top: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   Search Page CSS
========================================================================== */
.no-results,
.search-summary {
    padding: 1rem 0;
}

.no-results h2,
.search-summary h2 {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
}

.no-results h2 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
}

.search-summary p {
    font-size: 1.125rem;
    text-align: center;
    margin-bottom: 1rem;
}

.search-results {
    padding: 1rem 0 2rem;
}

.search-results .container {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.search-results ul {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: 0;
    margin: 0;
    list-style: none;
}

.search-results li {
    margin: 0;
    list-style: none;
}

.search-results .more-results h3 {
    text-align: center;
    margin-top: 2rem;
}

.google-search-block {
    padding: clamp(1rem, 4vw, 2.5rem) 0 2rem;
    text-align: center;
    margin: 0 auto;
}

.google-search-block h2 {
    font-size: clamp(1.125rem, 4vw, 1.5rem);
    margin-bottom: 1rem;
}

.google-search-block form {
    display: flex;
    align-items: center;
    max-width: 35rem;
    margin: 0 auto;
}

.google-search-block .form-input {
    padding: 0.75rem;
}

.google-search-block form .btn {
    padding: 0.75rem 0.75rem;
    cursor: pointer;
}

/* ----- Video Promo Styles ------- */
.video-promo {
    padding: 2rem 0;
    text-align: center;
}

.video-promo iframe {
    max-width: 100%;
}

.video-promo h2 {
    margin-top: 1rem;
}

.ads {
  contain: layout paint size;  
}

#AADIV33,
#AADIV50
#AADIV52 {
  contain: layout paint size;  
  min-height: 90px;
}

/* ------------------------------ */
/* Utility CSS */

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-light {
    font-weight: 300 !important;
}

.text-center {
    text-align: center !important;
}

.lead {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
}

.text-small {
    font-size: clamp(0.75rem, 4vw, 0.875rem) !important;
}

.text-large {
    font-size: clamp(1rem, 4vw, 1.125rem) !important;
}

.m-auto {
    margin: auto !important;
}

.my-auto {
    margin-block: auto !important;
}

.mt-auto {
    margin-block-start: auto !important;
}

.mb-auto {
    margin-block-end: auto !important;
}

.ml-auto {
    margin-inline-start: auto !important;
}

.mr-auto {
    margin-inline-end: auto !important;
}

.mx-auto {
    margin-inline: auto !important;
}

@media (min-width: 576px) {
    .ml-auto-sm {
        margin-inline-start: auto !important;
    }

    .mr-auto-sm {
        margin-inline-end: auto !important;
    }

    .mx-auto-sm {
        margin-inline: auto !important;
    }
}

@media (min-width: 768px) {
    .ml-auto-md {
        margin-inline-start: auto !important;
    }

    .mr-auto-md {
        margin-inline-end: auto !important;
    }

    .mx-auto-md {
        margin-inline: auto !important;
    }
}

@media (min-width: 992px) {
    .ml-auto-lg {
        margin-inline-start: auto !important;
    }

    .mr-auto-lg {
        margin-inline-end: auto !important;
    }

    .mx-auto-lg {
        margin-inline: auto !important;
    }
}

@media (min-width: 1200px) {
    .ml-auto-xl {
        margin-inline-start: auto !important;
    }

    .mr-auto-xl {
        margin-inline-end: auto !important;
    }

    .mx-auto-xl {
        margin-inline: auto !important;
    }
}

/* Margin utilities with clamp */
.m-4 {
    margin: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.m-8 {
    margin: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.m-16 {
    margin: clamp(0.5rem, 2vw, 1rem) !important;
}

.m-24 {
    margin: clamp(0.875rem, 3vw, 1.5rem) !important;
}

.m-32 {
    margin: clamp(1rem, 4vw, 2rem) !important;
}

.m-40 {
    margin: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.m-50 {
    margin: clamp(1.75rem, 6.25vw, 3.125rem) !important;
}

/* Margin top utilities with clamp */
.mt-4 {
    margin-block-start: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.mt-8 {
    margin-block-start: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.mt-16 {
    margin-block-start: clamp(0.5rem, 2vw, 1rem) !important;
}

.mt-24 {
    margin-block-start: clamp(0.875rem, 3vw, 1.5rem) !important;
}

.mt-32 {
    margin-block-start: clamp(1rem, 4vw, 2rem) !important;
}

.mt-40 {
    margin-block-start: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.mt-50 {
    margin-block-start: clamp(1.75rem, 6.25vw, 3.125rem) !important;
}

/* Margin bottom utilities with clamp */
.mb-4 {
    margin-block-end: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.mb-8 {
    margin-block-end: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.mb-16 {
    margin-block-end: clamp(0.5rem, 2vw, 1rem) !important;
}

.mb-24 {
    margin-block-end: clamp(0.875rem, 3vw, 1.5rem) !important;
}

.mb-32 {
    margin-block-end: clamp(1rem, 4vw, 2rem) !important;
}

.mb-40 {
    margin-block-end: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.mb-50 {
    margin-block-end: clamp(1.5625rem, 6.25vw, 3.125rem) !important;
}

/* Padding top utilities with clamp */
.pt-4 {
    padding-block-start: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.pt-8 {
    padding-block-start: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pt-16 {
    padding-block-start: clamp(0.5rem, 2vw, 1rem) !important;
}

.pt-24 {
    padding-block-start: clamp(0.875rem, 3vw, 1.5rem) !important;
}

.pt-32 {
    padding-block-start: clamp(1rem, 4vw, 2rem) !important;
}

.pt-40 {
    padding-block-start: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.pt-50 {
    padding-block-start: clamp(1.5625rem, 6.25vw, 3.125rem) !important;
}

/* Padding bottom utilities with clamp */
.pb-4 {
    padding-block-end: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.pb-8 {
    padding-block-end: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.pb-16 {
    padding-block-end: clamp(0.5rem, 2vw, 1rem) !important;
}

.pb-24 {
    padding-block-end: clamp(0.875rem, 3vw, 1.5rem) !important;
}

.pb-32 {
    padding-block-end: clamp(1rem, 4vw, 2rem) !important;
}

.pb-40 {
    padding-block-end: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.pb-50 {
    padding-block-end: clamp(1.5625rem, 6.25vw, 3.125rem) !important;
}

/* Base flex utilities */
.flex {
    display: flex !important;
}

.flex .flex-1 {
    flex: 1;
}

.align-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

@media (min-width: 576px) {
    .flex-sm {
        display: flex !important;
    }

    .align-center-sm {
        align-items: center !important;
    }

    .justify-center-sm {
        justify-content: center !important;
    }

    .justify-between-sm {
        justify-content: space-between !important;
    }

    .flex-column-sm {
        flex-direction: column !important;
    }

    .flex-row-sm {
        flex-direction: row !important;
    }
}

@media (min-width: 768px) {
    .flex-md {
        display: flex !important;
    }

    .align-center-md {
        align-items: center !important;
    }

    .justify-center-md {
        justify-content: center !important;
    }

    .justify-between-md {
        justify-content: space-between !important;
    }

    .flex-column-md {
        flex-direction: column !important;
    }

    .flex-row-md {
        flex-direction: row !important;
    }
}

@media (min-width: 992px) {
    .flex-lg {
        display: flex !important;
    }

    .align-center-lg {
        align-items: center !important;
    }

    .justify-center-lg {
        justify-content: center !important;
    }

    .justify-between-lg {
        justify-content: space-between !important;
    }

    .flex-column-lg {
        flex-direction: column !important;
    }

    .flex-row-lg {
        flex-direction: row !important;
    }
}

@media (min-width: 1200px) {
    .flex-xl {
        display: flex !important;
    }

    .align-center-xl {
        align-items: center !important;
    }

    .justify-center-xl {
        justify-content: center !important;
    }

    .justify-between-xl {
        justify-content: space-between !important;
    }

    .flex-column-xl {
        flex-direction: column !important;
    }

    .flex-row-xl {
        flex-direction: row !important;
    }
}

.gap-4 {
    gap: clamp(0.125rem, 0.5vw, 0.25rem) !important;
}

.gap-8 {
    gap: clamp(0.25rem, 1vw, 0.5rem) !important;
}

.gap-16 {
    gap: clamp(0.5rem, 2vw, 1rem) !important;
}

.gap-24 {
    gap: clamp(0.75rem, 3vw, 1.5rem) !important;
}

.gap-32 {
    gap: clamp(1rem, 4vw, 2rem) !important;
}

.gap-40 {
    gap: clamp(1.25rem, 5vw, 2.5rem) !important;
}

.gap-50 {
    gap: clamp(1.5625rem, 6.25vw, 3.125rem) !important;
}

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