/* Font Family for Headings and Menus */
h1, h2, h3, 
#primary-menu, 
#top-menu {
    font-family: 'Armata', sans-serif;
}

/* Font Family for Body and Paragraphs */
body, 
p, 
.entry-content p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem; /* Increased from default */
    line-height: 1.6;
}

/* Remove underlines from navigation links */
#primary-menu a,
#top-menu a,
.menu a,
nav a {
    text-decoration: none !important;
}

#primary-menu a:hover,
#top-menu a:hover,
.menu a:hover,
nav a:hover {
    text-decoration: none !important;
}

h1 {
    @apply text-2xl;
}

h2 {
    @apply text-3xl;
    color: #FF5300;
    font-weight: 700;
    font-size: 2em;
}

h3 {
    @apply text-lg;
    font-weight: bold;
}
article > *:not(.entry-content),
.entry-content > * {
    @apply mx-auto;
}

.entry-content, .block-editor-block-list__layout {

    p, ul, ol {
        a {
            @apply text-blue-500 no-underline;

            &:hover {
                @apply no-underline;
            }
        }

        @apply mb-8;
    }

    ul:not(.block-editor-block-variation-picker__variations) {
        list-style: none !important;
        padding-left: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    ul:not(.block-editor-block-variation-picker__variations) li {
        position: relative !important;
        padding-left: 2rem !important;
        margin-bottom: 0.75rem !important;
        display: flex !important;
        align-items: flex-start !important;
        list-style: none !important;
    }

    ul:not(.block-editor-block-variation-picker__variations) li::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0.5rem !important;
        width: 20px !important;
        height: 20px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 41 40' fill='none'%3E%3Cpath d='M20.5 1.25C10.1444 1.25 1.75 9.645 1.75 20C1.75 30.355 10.145 38.75 20.5 38.75C30.855 38.75 39.25 30.355 39.25 20C39.25 9.645 30.855 1.25 20.5 1.25ZM16.1406 31.25L16.1281 31.2375L16.1175 31.25L7.375 22.25L11.7681 17.7725L16.1287 22.2625L29.2537 8.75063L33.625 13.2494L16.1406 31.25Z' fill='%23F97316'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    ol {
        li {
            @apply list-decimal list-inside;
        }
    }
}

a:where(:not(.wp-element-button)) {
    text-decoration: none !important;
}

.star {
    color: #FBBC04 !important; /* Google review gold color with !important */
    font-size: 2rem;
}

.text-gold {
    color: gold;
}

.left-column {
    text-align: right;
}

.right-column {
    text-align: left;
}

.btn-primary {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    padding: clamp(15px, 3vw, 15px) clamp(16px, 2vw, 24px);
    display: inline-block;
    /* white-space: nowrap; */
    width: auto;
    min-width: fit-content;
    max-width: 100%;
    height: fit-content;
    min-height: fit-content;
    max-height: fit-content;
    background-color: #FE5300;
    color: white;
    box-shadow: 0px 0px 1px #320B00;
    border-radius: clamp(8px, 1.5vw, 15px);
    outline: none;
    transition: all 0.3s;
    text-decoration: none;
    text-align: center;
}

/* Mobile Menu Toggle Button */
#mobile-menu-toggle {
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    min-width: 3rem;
    min-height: 3rem;
    aspect-ratio: 1;
}

#mobile-menu-toggle svg {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

#mobile-menu-toggle:hover {
    color: #FF5300;
    background-color: #f3f4f6;
}

@media (min-width: 1024px) {
    #mobile-menu-toggle {
        display: none; /* Explicitly hide on desktop */
    }
}

/* Responsive button adjustments */
@media (max-width: 1024px) {
    .btn-primary {
        font-size: clamp(16px, 1.8vw, 22px);
        padding: clamp(12px, 2.5vw, 25px) clamp(14px, 1.8vw, 20px);
    }
}

@media (max-width: 640px) {
    .btn-primary {
        font-size: 16px;
        line-height: 1.2;
        padding: 12px 16px;
        border-radius: 8px;
    }
}

/* Button hover and active states */
.btn-primary:hover {
    background-color: #e64a00;
    transform: translateY(-2px);
    box-shadow: 0px 4px 8px rgba(50, 11, 0, 0.2);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0px 2px 4px rgba(50, 11, 0, 0.2);
}

/* Search Section Styles */
.search-section {
    padding: 1rem;
}

@media (max-width: 640px) {
    .search-section {
        padding: 1rem 1.5rem;
    }
}

/* Make search and button stay in a row on all devices */
.location-search-container .flex-col {
    flex-direction: column !important; /* Changed to column for mobile */
    align-items: center !important;
    gap: 1rem !important;
    width: 100%;
    margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
    .location-search-container .flex-col {
        flex-direction: row !important;
        flex-wrap: nowrap;
    }
}

/* Mobile specific search result improvements */
@media (max-width: 640px) {
    #location-search-results li {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    #location-search-results .w-16.h-16 {
        width: 4rem !important;
        height: 4rem !important;
    }
    
    #location-search-results .font-medium {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #location-search-results .text-sm {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
}

/* Find My Trainer button - ensure text is fully visible */
#find-trainer-btn {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 1.5rem;
    white-space: normal;
    text-align: center;
}

@media (min-width: 640px) {
    #find-trainer-btn {
        width: auto;
        min-width: 200px;
        white-space: nowrap;
    }
}

.specialty-banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.specialty-banner-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.75) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.specialty-banner-hover-overlay {
    transition: background-color 0.3s ease;
}

.specialty-banner-hover-overlay:hover {
    background-color: rgba(0,0,0,0.5);
}

.specialty-banner-container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 25px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.specialty-banner-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    max-width: 488px;
    margin: 0 auto 15px auto;
    color: white;
    pointer-events: none;
    z-index: 2;
    width: 100%;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.specialty-banner-description {
    position: relative;
    text-align: center;
    color: white;
    max-width: 600px;
    margin: 0 auto;
    pointer-events: none;
    z-index: 2;
    width: 100%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: 16px;
    line-height: 1.5;
}

.specialty-banner-tag {
    display: flex;
    position: absolute;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 25px;
    left: 25px;
    padding: 8px 16px;
    background-color: #FFCB0F;
    color: white;
    border-radius: 100px;
    filter: drop-shadow(0px 4px 4px rgb(0, 0, 0, 0.25));
    pointer-events: none;
    z-index: 2;
}

.specialty-banner-tag svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.specialty-banner-tag span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: 600;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .specialty-banner-title {
        font-size: 24px;
        margin: 80px auto 0px;
    }
    
    .specialty-banner-tag {
        padding: 6px 12px;
        top: 15px;
        left: 15px;
    }
    
    .specialty-banner-tag svg {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }
    
    .specialty-banner-tag span {
        font-size: 12px;
    }
}

.specialty-banner-btn {
    font-size: 23px;
    font-weight: 700;
    line-height: 28px;
    padding: 21px 27px;
    width: fit-content;
    min-width: fit-content;
    max-width: 100%;
    background-color: #FE5300;
    color: white;
    box-shadow: 0px 4px 0px #320B00;
    border: none;
    outline: none;
    transition: all 0.3s;
    text-decoration: none;
}

.faq-item {
    border: 1px solid #ccc;
    padding: 1rem;
    margin-bottom: 1rem;
}

.faq-question {
    cursor: pointer;
    font-weight: bold;
}

.faq-answer {
    display: none;
}

.faq-answer.hidden {
    display: none;
}

.faq-answer:not(.hidden) {
    display: block;
}

/* Carousel styles */
.carousel-container {
    display: flex;
    overflow-x: scroll;
    gap: 0.5rem;
    -ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar in Firefox */
}

@media (min-width: 768px) {
    .carousel-container {
        gap: 1rem;
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-card {
    flex-shrink: 0;
    width: calc(100vw - 3rem);
    max-width: 20rem;
    height: 24rem;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .carousel-card {
        width: 20rem;
    }
}

.carousel-card:hover {
    transform: translateY(-5px);
}

.carousel-card .bg-black {
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: 0.5;
}

.carousel-card .text-white {
    position: relative;
    z-index: 10;
    padding: 1rem;
}

.carousel-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.carousel-card p {
    font-size: 1rem;
}

/* Carousel navigation */
.carousel-prev,
.carousel-next {
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
    opacity: 1;
}

.carousel-prev:active,
.carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Style for carousel dots */
.carousel-dots {
    margin-top: 1.5rem;
}

.carousel-dot {
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.carousel-dot:hover {
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .carousel-prev,
    .carousel-next {
        padding: 0.5rem;
    }
    
    .carousel-prev svg,
    .carousel-next svg {
        width: 1rem;
        height: 1rem;
    }
}

/* Mobile Menu Toggle Button */
#primary-menu-toggle {
    position: relative;
    z-index: 60;
    margin-left: auto;
}

/* Hide social icons in header on mobile */
@media (max-width: 767px) {
    .header-social-icons {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    #primary-menu-toggle {
        display: none;
    }
}

/* Mobile Menu Styles */
#mobile-menu-overlay {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Improved Mobile Menu for All Screen Sizes */
#mobile-menu {
    background-color: #ffffff;
    color: #333333;
    transform: translateX(100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    max-width: 400px; /* Wider on desktop */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #e5e7eb;
}

#mobile-menu.active {
    transform: translateX(0);
}

#mobile-menu-close {
    color: #333;
    transition: color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: transparent;
    border: 1px solid #e5e7eb;
    min-width: auto;
}

#mobile-menu-close:hover {
    color: #FF5300;
}

.mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-item {
    margin-bottom: 0.75rem;
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-menu-item a {
    display: block;
    padding: 0.75rem 0;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.mobile-menu-item a:hover {
    color: #FF5300;
}

.logo {
    margin-left: 15px;
}
/* Desktop Menu Styles */
.desktop-menu {
    list-style: none;
    margin: 7px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.desktop-menu li {
    position: relative;
    white-space: nowrap;
}

.desktop-menu li a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem; /* Reduced from default */
    transition: color 0.2s;
    padding: 0.75rem 0.5rem; /* Reduced padding */
    display: block;
}

.desktop-menu li a:hover {
    color: #FF5300;
}

/* Style for the last menu item */
.desktop-menu li:last-child a {
    background-color: #FE5300;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.desktop-menu li:last-child a:hover {
    background-color: #e64a00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0px 4px 8px rgba(50, 11, 0, 0.2);
}

@media (max-width: 1023px) {
    .desktop-menu {
        display: none;
    }
}

body.menu-open {
    overflow: hidden;
}

/* SVG consistency in flex containers */
.flex.items-center.text-white svg,
.flex.items-center svg,
.items-center.text-white svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
    align-self: flex-start;
    vertical-align: top;
    margin: 7px 3px 0 0;
}

/* Specific alignment for SVGs in flex containers */
.flex.items-center.text-white,
.flex.items-center {
    align-items: flex-start;
}

.flex.items-center.text-white > *,
.flex.items-center > * {
    display: flex;
    align-items: flex-start;
}

/* Responsive SVG sizes */
@media (max-width: 640px) {
    .flex.items-center.text-white svg,
    .flex.items-center svg,
    .items-center.text-white svg {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin: 0 6px 0 0;
    }
}

/* Enhanced banner section styling */
section[style*="background-image"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Original overlay that adds a dark background to all sections with background-image */
section[style*="background-image"]::before {
    content: none; /* Disabling the automatic overlay */
    /* We now control overlays via PHP with inline styles */
}

/* Keep the rest of the section styling */
section[style*="background-image"] .max-w-4xl {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60%;
    padding: 4rem 1rem;
}

/* Banner content alignment fix */
section[style*="background-image"] .relative.z-10.text-white {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 4rem 0;
}

section[style*="background-image"] h1,
section[style*="background-image"] h2 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow for better readability */
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
}

section[style*="background-image"] p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
    max-width: 650px;
}

section[style*="background-image"] .title-container,
section[style*="background-image"] .description-container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Adjust spacing for mobile */
@media (max-width: 768px) {
    section[style*="background-image"] h1,
    section[style*="background-image"] h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    section[style*="background-image"] p {
        font-size: 1.125rem;
        line-height: 1.5;
    }
}

/* Add more padding and spacing for search results */
#location-search-results ul {
    padding: 0.5rem !important;
}

#location-search-results li {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 8px !important;
}

#location-search-results li:last-child {
    margin-bottom: 0 !important;
}

#location-search-results .flex-grow {
    padding-left: 0.5rem !important;
}

#location-search-results .font-medium {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
}

#location-search-results .text-sm {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

/* Top Menu Styles */
#top-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#top-menu li {
    margin: 0;
    padding: 0;
}

#top-menu a {
    color: white;
    font-weight: 500;
    position: relative;
    transition: color 0.2s;
}

#top-menu a:hover {
    color: rgba(255, 237, 213, 1); /* orange-200 */
}

/* Top menu dividers */
.top-menu-items li:not(:last-child):after {
    content: '|';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}

/* Increase spacing for top menu */
.top-menu-items {
    gap: 2rem !important;
}

.top-menu-items li {
    position: relative;
    padding: 0 0.5rem;
}

/* Underline effect for top menu items */
#top-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: rgba(255, 237, 213, 1); /* orange-200 */
    transition: width 0.3s;
}

#top-menu a:hover::after {
    width: 100%;
}

/* Mobile top menu styles */
.mobile-top-menu-item a {
    display: block;
    padding: 0.5rem 0;
    color: #4B5563; /* gray-600 */
    font-weight: 500;
    transition: color 0.2s;
}

.mobile-top-menu-item a:hover {
    color: #FF5300; /* primary orange */
}

/* Mobile Top Menu */
@media (max-width: 767px) {
    #top-menu a {
        font-size: 0.75rem; /* 12px */
        padding: 0.25rem;
    }
    
    #top-menu ul.flex.space-x-6 {
        gap: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    #top-menu a {
        font-size: 0.625rem; /* 10px */
        padding: 0.125rem;
    }
    
    #top-menu ul.flex.space-x-6 {
        gap: 0.25rem !important;
    }
}

/* Test comment to verify if watch is working - updated */

/* Improve mobile menu appearance on larger screens */
@media (min-width: 768px) {
    #mobile-menu {
        max-width: 400px;
    }
    
    #mobile-menu-overlay.active {
        backdrop-filter: blur(2px);
    }
}

/* Rating Section Styles */
.rating-section {
    padding: 2rem 0;
    position: relative;
}

.rating-section .stars-container {
    display: inline-flex;
    align-items: center;
}

.rating-section .star {
    color: #FBBC04 !important; /* Google review gold color with !important */
    font-size: 1.5rem;
    line-height: 1;
    margin: 0 1px;
}

.rating-section h2 {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
    color: inherit; /* Inherit from parent to adapt to dark/light backgrounds */
}

/* Add classes for dark background cases */
.rating-section[style*="background-color: #"] {
    color: #FFF; /* Default to white text for colored backgrounds */
}

.rating-section[style*="background-color: #"] .star {
    color: #FBBC04 !important; /* Always keep stars gold regardless of background */
}

.rating-section[style*="background-color: #fff"],
.rating-section[style*="background-color: #FFF"],
.rating-section[style*="background-color: rgb(255,255,255)"],
.rating-section[style*="background-color: rgba(255,255,255"],
.rating-section[style*="background-color: #f"] {
    color: #000; /* Use black text for light backgrounds */
}

@media (max-width: 768px) {
    .rating-section h2 {
        flex-direction: column;
        align-items: center;
    }
    
    .rating-section .stars-container {
        margin-top: 0.5rem;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .rating-section {
        padding: 1rem 0;
    }
}

/* Content Section Styles */
.wysiwyg-section .flex {
    min-height: 400px;
}

.wysiwyg-section .wysiwyg-content,
.wysiwyg-content {
    font-size: 1.25rem;
    line-height: 1.8;
}

/* Add heading variations for wysiwyg-content */
.wysiwyg-content h1 {
    font-size: 2.75rem; /* 44px */
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ff642c;
}

.wysiwyg-content h2 {
    font-size: 2.25rem; /* 36px */
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #ff642c;
}

.wysiwyg-content h3 {
    font-size: 1.875rem; /* 30px */
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ff642c;
}

.wysiwyg-content h4 {
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 0.875rem;
    color: #333333;
}

.wysiwyg-content h5 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #333333;
}

.wysiwyg-section .wysiwyg-content p {
    margin-bottom: 1.5rem;
}

.wysiwyg-section .wysiwyg-content ul,
.wysiwyg-section .wysiwyg-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.wysiwyg-section .wysiwyg-content li {
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .wysiwyg-section .flex {
        min-height: auto;
    }
    
    .wysiwyg-section .wysiwyg-content,
    .wysiwyg-content {
        font-size: 1.125rem;
    }
    
    /* Responsive heading sizes for tablet */
    .wysiwyg-content h1 {
        font-size: 2.25rem; /* 36px */
        margin-bottom: 1.25rem;
    }
    
    .wysiwyg-content h2 {
        font-size: 1.875rem; /* 30px */
        margin-bottom: 1rem;
    }
    
    .wysiwyg-content h3 {
        font-size: 1.5rem; /* 24px */
        margin-bottom: 0.875rem;
    }
    
    .wysiwyg-content h4 {
        font-size: 1.25rem; /* 20px */
        margin-bottom: 0.75rem;
    }
    
    .wysiwyg-content h5 {
        font-size: 1.125rem; /* 18px */
        margin-bottom: 0.625rem;
    }
}

@media (max-width: 480px) {
    /* Responsive heading sizes for mobile */
    .wysiwyg-content h1 {
        font-size: 1.875rem; /* 30px */
        margin-bottom: 1rem;
    }
    
    .wysiwyg-content h2 {
        font-size: 1.5rem; /* 24px */
        margin-bottom: 0.875rem;
    }
    
    .wysiwyg-content h3 {
        font-size: 1.25rem; /* 20px */
        margin-bottom: 0.75rem;
    }
    
    .wysiwyg-content h4 {
        font-size: 1.125rem; /* 18px */
        margin-bottom: 0.625rem;
    }
    
    .wysiwyg-content h5 {
        font-size: 1rem; /* 16px */
        margin-bottom: 0.5rem;
    }
}

.wysiwyg-section .flex-col.justify-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Footer Styles */
.site-footer {
    background-color: #222 !important;
    color: #d1d5db !important;
    position: relative;
    z-index: 10;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222;
    z-index: -1;
}

.site-footer h3 {
    color: #ff642c !important;
}

.site-footer p, 
.site-footer span,
.site-footer li,
.site-footer div {
    color: #d1d5db !important;
}

.site-footer a {
    color: #d1d5db !important;
    transition: color 0.3s ease !important;
}

.site-footer a:hover {
    color: #f97316 !important;
    text-decoration: none !important;
}

/* Style the careers menu specifically */
.site-footer .menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.site-footer .menu li {
    margin-bottom: 0.5rem;
}

.site-footer .menu a {
    color: #d1d5db !important;
    display: block;
    padding: 0.25rem 0;
    transition: color 0.3s ease;
}

.site-footer .menu a:hover {
    color: #ff642c !important;
    text-decoration: none !important;
}

.site-footer .border-t {
    border-color: #374151 !important;
}

.site-footer svg {
    width: 1rem !important;
    height: 1rem !important;
    color: #ff642c !important;
    fill: #ff642c !important;
}

.site-footer .social-icon svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    fill: currentColor !important;
}

/* Custom Button Styles */
.btn-custom {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 24px; /* Increased from 12px to be rounder (about 2x) */
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

/* Orange (Primary) Button */
.btn-custom-orange {
    background-color: #ff642c;
    color: white;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.25);
}

.btn-custom-orange:hover {
    background-color: #ff642c;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(249, 115, 22, 0.3);
}

.btn-custom-orange:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(249, 115, 22, 0.2);
}

.btn-custom-orange::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffffff;
    opacity: 0;
    z-index: -1;
    transform: scale(0.5);
    border-radius: 24px; /* Increased from 12px to match parent */
    transition: all 0.4s ease-out;
}

.btn-custom-orange:hover::after {
    opacity: 0.15;
    transform: scale(1);
}

/* Hollow Button */
.btn-custom-hollow {
    background-color: transparent;
    color: #ff642c;
    border: 2px solid #ff642c;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.1);
}

.btn-custom-hollow:hover {
    color: white;
    background-color: #ff642c;
    border-color: #ff642c;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(249, 115, 22, 0.2);
}

.btn-custom-hollow:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(249, 115, 22, 0.1);
}

.btn-custom-hollow::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f97316;
    opacity: 0;
    z-index: -1;
    transform: scale(0.5);
    border-radius: 24px; /* Increased from 12px to match parent */
    transition: all 0.4s ease-out;
}

.btn-custom-hollow:hover::after {
    opacity: 0.15;
    transform: scale(1);
}

/* White Button */
.btn-custom-white {
    background-color: white;
    color: #ff642c;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-custom-white:hover {
    background-color: #f9fafb;
    color: #ff642c;
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.btn-custom-white:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.btn-custom-white::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f97316;
    opacity: 0;
    z-index: -1;
    transform: scale(0.5);
    border-radius: 24px; /* Increased from 12px to match parent */
    transition: all 0.4s ease-out;
}

.btn-custom-white:hover::after {
    opacity: 0.05;
    transform: scale(1);
}

/* HTML Block Content Bullet Styling */
.html-block-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.html-block-content ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
}

.html-block-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 41 40' fill='none'%3E%3Cpath d='M20.5 1.25C10.1444 1.25 1.75 9.645 1.75 20C1.75 30.355 10.145 38.75 20.5 38.75C30.855 38.75 39.25 30.355 39.25 20C39.25 9.645 30.855 1.25 20.5 1.25ZM16.1406 31.25L16.1281 31.2375L16.1175 31.25L7.375 22.25L11.7681 17.7725L16.1287 22.2625L29.2537 8.75063L33.625 13.2494L16.1406 31.25Z' fill='%23F97316'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Why Choose Us Section Styling */
.why-choose-us .feature-box {
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 2rem 1.5rem;
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.why-choose-us .feature-box:hover {
    transform: translateY(-5px);
}

.why-choose-us .feature-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #f97316;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.why-choose-us .feature-box:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Feature box hover effects for Why Choose Us section */
.why-choose-us .feature-box h3 {
    position: relative;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.why-choose-us .feature-box h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #f97316;
    transition: width 0.3s ease;
}

.why-choose-us .feature-box:hover h3::after {
    width: 50px;
}

/* Add image styling */
.why-choose-us .feature-box img {
    display: block;
    margin: 0 auto 1rem auto;
    max-width: 100%;
    height: auto;
}

/* Add paragraph styling */
.why-choose-us .feature-box p {
    text-align: center;
    width: 100%;
}

/* Why Choose Us column classes */
.why-choose-us .grid-cols-1 > div {
    width: 100%;
}

.why-choose-us .grid-cols-2 > div {
    width: 100%;
}
@media (min-width: 640px) {
    .why-choose-us .grid-cols-2 > div {
        width: 50%;
    }
}

.why-choose-us .grid-cols-3 > div {
    width: 100%;
}
@media (min-width: 640px) {
    .why-choose-us .grid-cols-3 > div {
        width: 50%;
    }
}
@media (min-width: 1024px) {
    .why-choose-us .grid-cols-3 > div {
        width: 33.333333%;
    }
}

.why-choose-us .grid-cols-4 > div {
    width: 100%;
}
@media (min-width: 640px) {
    .why-choose-us .grid-cols-4 > div {
        width: 50%;
    }
}
@media (min-width: 1024px) {
    .why-choose-us .grid-cols-4 > div {
        width: 33.333333%;
    }
}
@media (min-width: 1280px) {
    .why-choose-us .grid-cols-4 > div {
        width: 25%;
    }
}

.why-choose-us .grid-cols-5 > div {
    width: 100%;
}
@media (min-width: 640px) {
    .why-choose-us .grid-cols-5 > div {
        width: 50%;
    }
}
@media (min-width: 768px) {
    .why-choose-us .grid-cols-5 > div {
        width: 33.333333%;
    }
}
@media (min-width: 1024px) {
    .why-choose-us .grid-cols-5 > div {
        width: 25%;
    }
}
@media (min-width: 1280px) {
    .why-choose-us .grid-cols-5 > div {
        width: 20%;
    }
}

.why-choose-us .grid-cols-6 > div {
    width: 100%;
}
@media (min-width: 640px) {
    .why-choose-us .grid-cols-6 > div {
        width: 50%;
    }
}
@media (min-width: 768px) {
    .why-choose-us .grid-cols-6 > div {
        width: 33.333333%;
    }
}
@media (min-width: 1024px) {
    .why-choose-us .grid-cols-6 > div {
        width: 25%;
    }
}
@media (min-width: 1280px) {
    .why-choose-us .grid-cols-6 > div {
        width: 16.666667%;
    }
}

/* Checkmark styling for entry-content lists */
.entry-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

.entry-content ul li {
    position: relative !important;
    padding-left: 2rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: flex-start !important;
    list-style: none !important;
}

.entry-content ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 41 40' fill='none'%3E%3Cpath d='M20.5 1.25C10.1444 1.25 1.75 9.645 1.75 20C1.75 30.355 10.145 38.75 20.5 38.75C30.855 38.75 39.25 30.355 39.25 20C39.25 9.645 30.855 1.25 20.5 1.25ZM16.1406 31.25L16.1281 31.2375L16.1175 31.25L7.375 22.25L11.7681 17.7725L16.1287 22.2625L29.2537 8.75063L33.625 13.2494L16.1406 31.25Z' fill='%23F97316'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Checkmark styling for wysiwyg-content lists */
.wysiwyg-content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 1.5rem !important;
}

.wysiwyg-content ul li {
    position: relative !important;
    padding-left: 2rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: flex-start !important;
    list-style: none !important;
}

.wysiwyg-content ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.5rem !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 41 40' fill='none'%3E%3Cpath d='M20.5 1.25C10.1444 1.25 1.75 9.645 1.75 20C1.75 30.355 10.145 38.75 20.5 38.75C30.855 38.75 39.25 30.355 39.25 20C39.25 9.645 30.855 1.25 20.5 1.25ZM16.1406 31.25L16.1281 31.2375L16.1175 31.25L7.375 22.25L11.7681 17.7725L16.1287 22.2625L29.2537 8.75063L33.625 13.2494L16.1406 31.25Z' fill='%23F97316'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Full Width Banner Video Link */
.full-width-banner .video-link {
    display: inline-flex;
    align-items: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    gap: 8px;
}

.full-width-banner .video-link:hover {
    color: #FE5300;
    transform: translateY(-2px);
}

.full-width-banner .video-link svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.full-width-banner .video-link:hover svg {
    transform: scale(1.1);
}

/* Video Modal Styles */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    margin: auto;
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background-color: #FE5300;
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.video-modal-close:hover {
    background-color: #ff6b1e;
}