/*
Theme Name: Rimes
Author: Paneet team
Author URI: https://paneetinteractive.co.th
Description: Rimes is designed to be flexible, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: rimes
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
    --color-primary: #14467D;
    --color-primary-2: #14467DAF;
    --color-primary-3: #DDEAFF;
    --color-primary-4: #406B96;
    --color-primary-5: #10467C;
    --color-second: #030303;
    --color-second-2: #707070;
    --color-second-3: #ACACAC;
    --color-second-4: #C3C3C3;
    --color-second-5: #00000029;
    --color-accent: #14467D00;
    --color-accent-2: #FFFFFF;
    --color-hover-accent: #FAC91C;
    --color-border: #a8a8ac;
    --color-border-2: #3785C6;
    --color-danger: #990002;
    --color-calendar-selection: #F3E4CC;
}

* {
    /* margin: 0; */
    /* padding: 0; */
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif !important;
    /* color: var(--color-second); */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 165px;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}

main {
    margin: 0;
    padding: 0;
}

* a {
    text-decoration: none !important;
    outline: none !important;
}

.site-footer--top-zero {
    margin-top: 0 !important;
    position: relative;
}

.footer-logo .custom-logo {
    max-height: 154px;
    max-width: 145px;

    width: auto;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
    text-decoration: none;
}

.footer-menu a:hover {
    color: #fff;
}

/* Style for the main navigation menu */
/* .primary-navigation ul {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
} */

/* .primary-navigation ul>li>a {
	padding: 0.5rem 1rem;
	color: white;
	text-decoration: none;
	height: 95px;
	line-height: 95px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
    outline: none;
} */

/* Arrow for dropdown menus */
/* .primary-navigation .menu-item-has-children>a::after {
	content: ' ▸';
	display: inline-block;
	margin-left: 5px;
	font-size: 12px;
	vertical-align: middle;
    line-height: 95px;
	transform: rotate(0deg);
	transition: transform 0.2s ease-in-out;
}

.primary-navigation .menu-item-has-children:hover>a::after {
	transform: rotate(90deg);
} */



/* ---  Navigation (Sub-menu Bar) --- */
/* Dropdown Sub-menu styles */
/* .primary-navigation ul ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--color-primary-4);
	padding: 5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 100;
	min-width: 100%;
	min-height: 106px;
	gap: 24px;
	justify-content: center;
}

.primary-navigation ul li:hover>ul.sub-menu {
	display: flex;
} */


/* Sub-menu  */

/* Active state (current page) */
[class*="_navigation"] ul li.current-menu-item>a {
    color: var(--color-hover-accent);
    /* font-weight: bold; */
}

.primary-navigation ul li a,
.job-opportunity-submenu,
[class*="_navigation"] ul li a,
.primary-navigation ul ul.sub-menu li a {
    font-size: 18px;
    padding: 8px 0;
    /* padding: 0; */
    /* margin: 0 34px; */
    position: relative;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s ease;
    height: 40px;
}

/* border bottom ::after */
.primary-navigation ul li a::after,
.job-opportunity-submenu::after,
[class*="_navigation"] ul li a::after,
.primary-navigation ul ul.sub-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-hover-accent);
    transition: width 0.3s ease-in-out;
}

/*  Hover */
.primary-navigation ul li a:hover,
.job-opportunity-submenu a:hover,
[class*="_navigation"] ul li a:hover,
.primary-navigation ul ul.sub-menu li a:hover {
    color: var(--color-hover-accent) !important;
    /* font-weight: bold; */
}

/* border Hover */
.primary-navigation ul li a:hover::after,
.job-opportunity-submenu:hover::after,
[class*="_navigation"] ul li a:hover::after,
.primary-navigation ul ul.sub-menu li a:hover::after {
    width: 100%;
}

/* Mobile Menu Styling */
#mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    /* 12px 16px */
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}



/* --- View Structure / Accordion Toggle Button Style --- */
/* This targets the button you create in the editor with the specific ID */
.view-accordion-toggle {
    cursor: pointer;
    display: inline-flex;
    gap: 0.75rem;
    /* 12px space */
    transition: color 0.3s ease-in-out;
    position: relative;
    /* Ensure pseudo-elements are positioned relative to the button */
    align-items: center;
    color: var(--color-primary) !important;
}

/* Ensure the strong tag inside also inherits the color and transition */
.view-accordion-toggle strong {
    transition: color 0.3s ease-in-out;
    color: inherit !important;
}

/* Create the solid yellow circle using ::before */
.view-accordion-toggle::before {
    content: '';
    display: inline-block;
    background-color: #FAC91C;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    position: absolute;
    right: 0;
    /* top: 50%; */
    transform: translateX(2px);
    transition: transform 0.3s ease-in-out;
    /* Transition for rightward movement */
}

/* Create the circle and arrow icon using ::after */
.view-accordion-toggle::after {
    content: '';
    display: inline-block;

    /* Circle Styles */
    background-color: #FAC91C;
    border-radius: 9999px;
    width: 28px;
    height: 28px;

    /* LONG Arrow Icon as a mask */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3e%3cpath fill='currentColor' d='M8.29289 2.29289C8.68342 1.90237 9.31658 1.90237 9.70711 2.29289L14.2071 6.79289C14.5976 7.18342 14.5976 7.81658 14.2071 8.20711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L11 8.5H1.5C0.947715 8.5 0.5 8.05228 0.5 7.5C0.5 6.94772 0.947715 6.5 1.5 6.5H11L8.29289 3.70711C7.90237 3.31658 7.90237 2.68342 8.29289 2.29289Z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3e%3cpath fill='currentColor' d='M8.29289 2.29289C8.68342 1.90237 9.31658 1.90237 9.70711 2.29289L14.2071 6.79289C14.5976 7.18342 14.5976 7.81658 14.2071 8.20711L9.70711 12.7071C9.31658 13.0976 8.68342 13.0976 8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L11 8.5H1.5C0.947715 8.5 0.5 8.05228 0.5 7.5C0.5 6.94772 0.947715 6.5 1.5 6.5H11L8.29289 3.70711C7.90237 3.31658 7.90237 2.68342 8.29289 2.29289Z'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 60%;
    mask-size: 60%;

    /* The color of the icon itself */
    background-color: #14467D;

    /* Initial clip-path to make the arrow look short */
    clip-path: inset(0 0 0 45%);

    /* Transition for both clip-path and transform */
    transition: clip-path 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Hover state for the button text */
.view-accordion-toggle:hover {
    color: #FAC91C !important;
}

/* Apply clip-path only to ::after on hover */
.view-accordion-toggle:hover::after {
    transform: translateX(2px);
    clip-path: inset(0 0 0 0);
    /* Expand the arrow */
}

.image-overlay-transform-none .uagb-image-heading,
.image-overlay-transform-none .uagb-image-caption {
    transition: none;
    transform: none;
}


/* --- Pagination Styles (Revised for Shortcode Support) --- */

.pagination-container .nav-links,
.pagination-link-container ul.page-numbers {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid #DCDCDE;
    background-color: #FFFFFF;
    border-radius: 9999px;
    padding: 6px 12px;

    list-style: none !important;
    margin: 0 !important;
    width: auto;
    box-sizing: border-box;
}

.pagination-link-container ul.page-numbers li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.pagination-container .page-numbers,
.pagination-link-container .page-numbers a,
.pagination-link-container .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
    color: var(--color-primary, #000);
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: transparent;
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

.pagination-container .prev,
.pagination-container .next,
.pagination-link-container .prev,
.pagination-link-container .next {
    background-color: var(--color-primary-3, #e0e7ff);
    color: var(--color-primary, #000);
}

.pagination-container .prev:hover,
.pagination-container .next:hover,
.pagination-link-container .prev:hover,
.pagination-link-container .next:hover {
    background-color: #cce0ff;
}

.pagination-container .page-numbers.current,
.pagination-link-container .page-numbers.current {
    background-color: var(--color-primary-3, #e0e7ff);
    color: var(--color-primary, #000);
    font-weight: 700;
}

.pagination-container a.page-numbers:not(.prev):not(.next):hover,
.pagination-link-container a.page-numbers:not(.prev):not(.next):hover {
    background-color: #e5e7eb;
}

.pagination-container .page-numbers.dots,
.pagination-link-container .page-numbers.dots {
    background-color: transparent !important;
    width: auto;
    padding: 0 4px;
    color: #9ca3af;
    pointer-events: none;
}

/* --- END Pagination Styles --- */


/*------------------------------------------------------
    Accordion Styles
-------------------------------------------------------*/
.accordion {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.accordion-label {
    font: normal normal 600 25px/29px Roboto;
    color: var(--text-head-color, #003366);
}

.accordion-item {
    width: 100%;
    padding: 25px 0;
    position: relative;
}

.accordion-border {
    border-bottom: 1px solid var(--color-border);
}

.accordion-button {
    position: absolute;
    cursor: pointer;
    right: 0;
    transition: rotate 0.3s ease-in-out;
}

.accordion-button:focus {
    outline: none;
}

.accordion-button.active {
    rotate: -45deg;
}

.accordion-content {
    background-color: #fff;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-button.active+.accordion-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

.card-technical-products {
    border-radius: 20px;
    background-color: var(--bg-color, #F6F9FF);
    padding: 24px;
    color: #000;
}

.card-technical-products h1 {
    font: normal normal bold 20px/24px Roboto;
    margin-bottom: 20px;
}

.card-technical-products p {
    font: normal normal normal 15px/25px Roboto;
}

.card-technical-products .body {
    margin-bottom: 15px;
}

/*------------------------------------------------------
    Poster Banner Styles
-------------------------------------------------------*/
.container-poster-banner {
    position: relative;
    width: 100%;
    height: 100dvh;

    .video-poster {
        z-index: -1;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .content-poster {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: transparent linear-gradient(180deg, #10467C00 0%, #10467CE6 80%, #10467CE6 100%) 0% 0% no-repeat padding-box;

        .content-poster-inner {
            position: absolute;
            width: 100%;
            /* Default for desktop */
            bottom: calc((15px * 100dvh) / 100px);
            color: #FFFFFF;
            padding: 0 20px;

            /* Mobile adjustment: Push lower */
            @media (max-width: 768px) {
                bottom: 0 !important;
                /* Force to bottom */
                padding-bottom: 30px;
                /* Add padding for spacing */
            }

            /* Mobile default: Center alignment */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            text-align: center;

            .content-poster-text {
                max-width: 750px;
                width: 100%;
                margin: 0 auto;

                h1,
                h2 {
                    font: normal normal bold 56px/66px Roboto;
                    margin-bottom: 5px;
                }

                p {
                    font: normal normal normal 23.5px/30px Roboto;
                    letter-spacing: -0.02px;
                    margin-bottom: 20px;
                }

                /* Responsive Font Sizes */
                @media (max-width: 768px) {
                    width: 82%;

                    h1,
                    h2 {
                        font-size: 40px;
                        line-height: 46px;
                    }

                    #poster-content-html h1,
                    #poster-content-html h2,
                    #poster-content-html h3,
                    #poster-content-html h4,
                    #poster-content-html h5,
                    #poster-content-html h6 {
                        text-align: center;
                        display: block;
                    }

                    p {
                        font-size: 18px;
                        line-height: 24px;
                        margin-top: 20px;
                    }
                }

                /* @media (min-width: 1024px) {

                    #poster-content-html h1,
                    #poster-content-html h2,
                    #poster-content-html h3,
                    #poster-content-html h4,
                    #poster-content-html h5,
                    #poster-content-html h6 {
                        text-align: justify;
                        text-align-last: justify;
                        display: block;
                    }
                } */
            }

            .poster-buttons {
                padding: 20px 0;
                width: 100%;
                max-width: 500px;
                /* Limit button width on mobile */
                margin: 0 auto;

                .poster-button {
                    display: block;
                    width: 100%;
                    text-align: center;
                    padding: 12px 24px;
                    font: normal normal bold 20px/24px Roboto;
                    border-radius: 25px;
                    cursor: pointer;
                    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
                    border: 1px solid var(--color-hover-accent);
                    color: var(--color-hover-accent);

                    &:hover {
                        background-color: var(--color-hover-accent);
                        color: var(--color-primary);
                    }
                }
            }

            /* Desktop Override: Left alignment */
            @media (min-width: 769px) {
                display: block;
                text-align: left;

                .content-poster-text {
                    margin: 0 0 0 10%;
                }

                .poster-buttons {
                    margin: 0;
                    margin-right: auto;
                    margin-left: 0;
                }
            }
        }
    }
}

.a-link-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 24px;
    font: normal normal normal 20px/24px Roboto;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    border: 1px solid var(--color-hover-accent);
    color: var(--color-hover-accent);

    &:hover {
        background-color: var(--color-hover-accent);
        color: var(--color-primary);
    }
}

/*------------------------------------------------------
    Home Page Section Full Viewport Height
-------------------------------------------------------*/
/* All sections - flexible height based on content */
#section-programs,
#section-core-service,
#section-news,
#section-knowledge {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 0;
}

/*------------------------------------------------------
    Counter and Core Service Styles
-------------------------------------------------------*/
.bg-alpha-blue-to-white {
    position: relative;
    width: 100%;
    min-height: 800px;
    background: transparent linear-gradient(180deg, #10467CE6 0%, #10467CE6 25%, #10467cb9 35%, #ffffffab 55%, #ffffff 80%, #ffffff 100%) 0% 0% no-repeat padding-box;
}

.card-number-counter {

    h1,
    h2,
    h3,
    h4 {
        font: normal normal bold 33px/39px Roboto;
        color: #fff;
        text-align: center;
    }

    .counter-item {
        width: 100%;

        .counter-point {
            text-align: center;
            font: normal normal bold 80px/94px Roboto;
            letter-spacing: 0px;
            color: var(--color-hover-accent);
        }

        .counter-label {
            padding: 20px;
            text-align: center;
            font: normal normal normal 25px/29px Roboto;
            letter-spacing: 0px;
            color: #FFFFFF;
        }
    }
}

.btn-card-more {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    outline: none !important;
    border-radius: 25px;
    font-size: 20px;
    min-width: 10rem;
    min-height: 3rem;
    font-weight: bold;
}

.btn-card-more:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}


/* --- Flatpickr Custom Theme --- */
.flatpickr-calendar {
    background: #ffffff;
    border-radius: 0.5rem;
    /* 8px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    border: 1px solid #e5e7eb;
    /* gray-200 */
    width: auto !important;
    /* Allow it to be sized by its content (2 months) */
    font-family: 'Roboto', sans-serif;
}

/* Month/Year Headers (e.g., "October 2025") */
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .cur-month {
    color: var(--color-primary);
    font-weight: 600;
    /* semibold */
    fill: var(--color-primary);
}

.flatpickr-current-month .numInputWrapper .numInput {
    color: var(--color-primary);
    font-weight: 600;
}

/* Prev/Next Arrows */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--color-primary);
    opacity: 0.7;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    opacity: 1;
    fill: var(--color-primary);
}

/* Weekday Headers (M, T, W...) */
.flatpickr-weekdays .flatpickr-weekday {
    color: var(--color-second-2);
    /* gray-500 */
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.75rem;
    /* 12px */
}

/* Individual Days */
.flatpickr-day {
    color: var(--color-second);
    border: none;
    border-radius: 9999px;
    /* rounded-full */
    font-weight: 400;
    /* Use min-width to maintain size but allow flex */
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    /* Center text vertically */
}

/* Days not in the current month */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d5db;
    /* gray-300 */
}

/* Hover effect for non-selected days */
.flatpickr-day:not(.selected):not(.inRange):hover {
    /* background: #f3f4f6; 
    color:  var(--color-calendar-selection); */
}

/* Current Day */
.flatpickr-day.today {
    border: 1px solid var(--color-calendar-selection);
    color: var(--color-calendar-selection);
}

.flatpickr-day.today:hover {
    background: #e5e7eb;
}

/* Selected Day(s) & Range (The light beige/yellow color) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--color-calendar-selection) !important;
    color: var(--color-primary);
    border-color: var(--color-calendar-selection) !important;
    box-shadow: none;
}

/* Ensure start/end dates are still circular */
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    border-radius: 9999px !important;
}

/* Today + Selected */
.flatpickr-day.today.selected {
    border-color: var(--color-calendar-selection);
}

/* Style for the days *between* start and end */
.flatpickr-day.inRange:not(.startRange):not(.endRange) {
    border-radius: 0 !important;
    /* Make the middle part square-ish */
    background: var(--color-calendar-selection);
}

/* Fix for two-month view range overlap */
.flatpickr-calendar.multiMonth .flatpickr-day.inRange {
    border-radius: 0 !important;
    box-shadow: -5px 0 0 var(--color-calendar-selection), 5px 0 0 var(--color-calendar-selection);
}

/* Re-apply radius for the actual start and end dates */
.flatpickr-calendar.multiMonth .flatpickr-day.startRange {
    border-radius: 9999px 0 0 9999px !important;
}

.flatpickr-calendar.multiMonth .flatpickr-day.endRange {
    border-radius: 0 9999px 9999px 0 !important;
}

/* Fix for start/end in the same range */
.flatpickr-calendar.multiMonth .flatpickr-day.startRange.endRange {
    border-radius: 9999px !important;
}



/* ========================================================= */
/*  Field Title */
/* ========================================================= */
.forminator-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* ========================================================= */
/*  Field Label */
/* ========================================================= */

.forminator-label {
    font-size: 15px !important;
    font-weight: 700;
    margin-bottom: 8px !important;
}

/* ========================================================= */
/*  Input Fields (Input, Textarea, Select, Datepicker) */
/* ========================================================= */

.forminator-input,
.forminator-textarea,
.forminator-select .forminator-select-container,
.forminator-date-picker {
    height: 50px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    border: 1px solid #3785C6 !important;
    border-radius: 28px !important;
}

.uagb-forms-input:hover,
.uagb-forms-textarea:hover,
.uagb-forms-input:focus,
.uagb-forms-textarea:focus {
    border: 1px solid #3785C6 !important;
    outline: none !important;
}

.forminator-input-with-icon {
    position: relative !important;
}

.forminator-input-with-icon .forminator-icon-calendar,
.forminator-input-with-icon .forminator-icon-phone,
.forminator-input-with-icon .forminator-icon-email {
    top: 17px !important;
    left: 93% !important;
}

/* Fix icon position on mobile */
@media (max-width: 768px) {

    .forminator-input-with-icon .forminator-icon-calendar,
    .forminator-input-with-icon .forminator-icon-phone,
    .forminator-input-with-icon .forminator-icon-email {
        left: 88% !important;
        transform: translateX(-50%);
    }
}

/* radio */
[id^="forminator-field-radio-"][id*="-label-"] {
    margin-top: 21px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    height: 11px !important;
}

/* Fix radio label overlap on mobile */
@media (max-width: 768px) {
    [id^="forminator-field-radio-"][id*="-label-"] {
        height: auto !important;
        line-height: 1.5 !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        white-space: normal !important;
    }

    span.forminator-radio-label {
        display: inline-block !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* checkbox */
div[id^="checkbox-"] .forminator-field .forminator-label {
    /* grid-column: 1 / -1 !important; */
    width: 100% !important;
    margin-bottom: 10px !important;
}

div[id^="checkbox-"] .forminator-field {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    align-items: stretch !important;
}


div[id^="checkbox-"] .forminator-checkbox {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    height: 100% !important;
    min-height: 50px;

    padding: 8px 12px !important;
    margin: 0 !important;

    background-color: #ffffff;
    border: 1px solid #4a86c6;
    border-radius: 50px;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.2s;

    width: calc(50% - 8px) !important;
}

div[id^="checkbox-"] .forminator-checkbox input[type="checkbox"],
div[id^="checkbox-"] .forminator-checkbox .forminator-checkbox-box {
    display: none !important;
}

div[id^="checkbox-"] .forminator-checkbox .forminator-checkbox-label {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100%;
}

div[id^="checkbox-"] .forminator-checkbox:has(input:checked) {
    background-color: #4a86c6;
    border-color: #4a86c6;
}

div[id^="checkbox-"] .forminator-checkbox:has(input:checked) .forminator-checkbox-label {
    color: #ffffff !important;
}

div[id^="checkbox-"] .forminator-checkbox:hover {
    background-color: #f0f7ff;
}

div[id^="checkbox-"] .forminator-checkbox:has(input:checked):hover {
    background-color: #3a70a8;
}

/* Other */
div[id^="checkbox-"] .forminator-field {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

div[id^="checkbox-"] .forminator-checkbox:has(input[value="custom_option"]) {
    width: 130px !important;
    transition: all 0.3s ease;
    border-radius: 50px !important;
    border-right: 1px solid #4a86c6 !important;
    margin-right: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    background-color: #ffffff !important;
}

div[id^="checkbox-"] .forminator-checkbox:has(input[value="custom_option"]:checked) {
    width: 130px !important;
    border-right: none !important;
    background-color: #4a86c6 !important;
    border-color: #4a86c6 !important;
    color: #000000 !important;
}

div[id^="checkbox-"] .forminator-custom-input {
    flex-grow: 1 !important;
    width: auto !important;
    display: flex !important;
    margin-top: 0 !important;
    padding: 0 !important;
    margin-left: -45px !important;
    position: relative !important;
    z-index: 1 !important;
}

div[id^="checkbox-"] .forminator-custom-input input {
    border-radius: 0 50px 50px 0 !important;
    border: 1px solid #4a86c6 !important;
    border-left: none !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    height: 100% !important;
    padding-left: 60px !important;
}

@media (max-width: 768px) {

    div[id^="checkbox-"] .forminator-checkbox,
    div[id^="checkbox-"] .forminator-checkbox:has(input[value="custom_option"]),
    div[id^="checkbox-"] .forminator-checkbox:has(input[value="custom_option"]:checked) {
        width: 100% !important;
        border-radius: 50px !important;
        border-right: 1px solid #4a86c6 !important;
        margin-bottom: 10px !important;
    }

    div[id^="checkbox-"] .forminator-custom-input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    div[id^="checkbox-"] .forminator-custom-input input {
        border-radius: 50px !important;
        border-left: 1px solid #4a86c6 !important;
        padding-left: 20px !important;
    }
}


/* ========================================================= */
/* Next/Previous/Submit Buttons */
/* ========================================================= */

.forminator-pagination-footer {
    justify-content: end !important;
    gap: 30px;
}

/* Mobile: Back left, Next right on same line */
@media (max-width: 768px) {
    .forminator-pagination-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 15px !important;
        flex-direction: row !important;
    }

    .forminator-button-back {
        order: 1;
        flex: 1;
        margin: 0 !important;
    }

    .forminator-button-submit,
    .forminator-button-next {
        order: 2;
        flex: 1;
        margin: 0 !important;
    }
}

/* Next */
.forminator-button-submit,
.forminator-button-next {
    height: 50px !important;
    font-size: 20px !important;
    background-color: #3785C6;
    border-radius: 28px !important;
    color: #FFFFFF;
    padding: 0 60px !important;
}

.forminator-button-submit:hover,
.forminator-button-next:hover {
    background-color: #406B96;
    box-shadow: none !important;
}

/* Back */
.forminator-button-back {
    height: 50px !important;
    font-size: 20px !important;
    background-color: #505159;
    border-radius: 28px !important;
    color: #FFFFFF;
    padding: 0 60px !important;
}

.forminator-button-back:hover {
    background-color: #6b6c77;
    box-shadow: none !important;
}

/* Mobile button adjustments */
@media (max-width: 768px) {

    .forminator-button-submit,
    .forminator-button-next,
    .forminator-button-back {
        padding: 0 20px !important;
        font-size: 16px !important;
        height: 45px !important;
        line-height: 45px !important;
    }
}


/* ========================================================= */
/* Pagination Steps */
/* ========================================================= */

.forminator-pagination-steps {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
}

.forminator-step {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    z-index: 2;
    background-color: #3785C6 !important;
    color: #ffffff !important;
}

.forminator-break {
    flex-grow: 1;
    height: 4px !important;
    margin: 0 -2px !important;
    border: none !important;
    z-index: 1;
    background-color: #3785C6 !important;
}

.forminator-step-dot {
    display: none !important;
}

.forminator-step-label {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 0 !important;
    display: block !important;
}

/* Fix step label visibility on mobile */
@media (max-width: 768px) {
    .forminator-step-label {
        font-size: 12px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .forminator-step {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
}

.forminator-current~.forminator-step {
    background-color: #DCDCDE !important;
}

.forminator-current~.forminator-break {
    background-color: #DCDCDE !important;
}

.forminator-current~.forminator-step .forminator-step-label {
    color: #ffffff !important;
}

.forminator-pagination-steps .forminator-break:first-child,
.forminator-pagination-steps .forminator-break:last-child {
    display: none !important;
}

/* zoom image poster*/
.zoom-card-overlay {
    position: relative;
    overflow: hidden;
}

.zoom-card-overlay .zoom-bg-img {
    transition: transform 0.6s ease-out;
    transform: scale(1);
}

.zoom-card-overlay:hover .zoom-bg-img {
    transform: scale(1.18);
}

/* ========================================================= */
/*  Section Navigation Dots */
/* ========================================================= */

.section-nav-dots {
    position: fixed;
    right: 23px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 46px;
    align-items: flex-end;
    /* Align right so they expand left */
}

.section-nav-dots .nav-dot {
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    flex-direction: row-reverse;
    /* Dot on right, Label on left */
    background-color: transparent;
    padding: 0;
    border-radius: 50px;
}

/* Hover or Active State - Pill Shape */
.section-nav-dots .nav-dot:hover,
.section-nav-dots .nav-dot.active {
    background-color: #FFFFFF;
    padding: 10px 10px 10px 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-right: -10px;
    margin-top: -10px;
    margin-bottom: -10px;
}

.section-nav-dots .nav-dot .dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #10467C;
    border: 1px solid white;
    flex-shrink: 0;
}

.section-nav-dots .nav-dot .label {
    color: #10467C;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin: 0;
}

.section-nav-dots .nav-dot:hover .label,
.section-nav-dots .nav-dot.active .label {
    opacity: 1;
    max-width: 250px;
    /* Allow enough width */
    margin-right: 12px;
}

.section-nav-dots .nav-dot:hover .dot,
.section-nav-dots .nav-dot.active .dot {
    border: none;
}

/* Active dot color change removed as per request */
/* .section-nav-dots .nav-dot.active .dot {
    background-color: #FAC91C;
    border-color: #10467C;
} */

/* Hide on mobile */
@media (max-width: 768px) {
    .section-nav-dots {
        display: none;
    }
}

/*--- Custom Swiper Pagination ---*/
.rimes-card-carousel-container .swiper-pagination-bullet {
    background-color: #d1d5db;
    /* Gray-300 or similar */
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
}

.rimes-card-carousel-container .swiper-pagination-bullet-active {
    background-color: var(--color-hover-accent, #FAC91C);
    /* Yellow active */
}

/* ========================================================= */
/*  Swiper Pagination Dots Color */
/* ========================================================= */

.rimes-card-carousel .swiper-pagination-bullet-active {
    background: var(--color-hover-accent) !important;
}