/***************************
// Font Imports
***************************/

/* Inter font imports (TTF) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter_24pt-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Spline Sans font imports (TTF) */
@font-face {
    font-family: 'Spline Sans';
    src: url('../fonts/Spline_Sans/SplineSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../fonts/Spline_Sans/SplineSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../fonts/Spline_Sans/SplineSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../fonts/Spline_Sans/SplineSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('../fonts/Spline_Sans/SplineSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Cormorant font imports (TTF) */
@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant/Cormorant-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Yeseva One font import (TTF) */
@font-face {
    font-family: 'Yeseva One';
    src: url('../fonts/Yeseva_One/YesevaOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Work Sans font import (TTF) */
@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/Work_Sans/WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Outfit font import (variable TTF, weight axis 100-900 -- this section uses 400/600/700) */
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

/* Poppins font import (TTF) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Montserrat font import (variable TTF, weight axis 100-900 -- this section uses 600/700) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Variable.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

/***************************
// End Font Imports
***************************/

/***************************
// Default Styles
***************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --font-inter: 'Inter', sans-serif;
    --font-spline-sans: 'Spline Sans', sans-serif;
    --font-cormorant: 'Cormorant', serif;
    --font-yeseva-one: 'Yeseva One', serif;
    --font-work-sans: 'Work Sans', sans-serif;
    --font-outfit: 'Outfit', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    --font-montserrat: 'Montserrat', sans-serif;

    --color-white: #FFFFFF;
    --color-black: #000000;
}

body {
    letter-spacing: 0;
    font-family: var(--font-spline-sans);
    color: #282729;
    background-color: white;
    /*overflow-x: hidden;*/
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* Bootstrap Reboot sets `ul, ol { padding-left: 2rem }`, which (being a type
   selector) beats the `* { padding: 0 }` reset above regardless of load order.
   Generalizing the earlier one-off `.navbar-links { padding: 0 }` patch: reset it
   here for every `ul`/`ol` on the site, once. */
ul,
ol {
    margin: 0;
    padding: 0;
}

.pt-6 {
    padding-top: 6rem !important;
}

.pb-6 {
    padding-bottom: 6rem !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

.font-family-inter * {
    font-family: var(--font-inter) !important;
}

.font-family-spline-sans * {
    font-family: var(--font-spline-sans) !important;
}

.font-family-cormorant * {
    font-family: var(--font-cormorant) !important;
}

.font-family-yeseva-one * {
    font-family: var(--font-yeseva-one) !important;
}

.font-family-work-sans * {
    font-family: var(--font-work-sans) !important;
}

.font-family-outfit * {
    font-family: var(--font-outfit) !important;
}

.font-family-poppins * {
    font-family: var(--font-poppins) !important;
}

.font-family-montserrat * {
    font-family: var(--font-montserrat) !important;
}

[class*="max-"] * {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font-size-70 * {
    font-size: clamp(39px, 2.9108vw + 28.0845px, 70px) !important;
}

.font-size-62 * {
    font-size: clamp(37px, 2.3474vw + 28.1972px, 62px) !important;
}

.font-size-48 * {
    font-size: clamp(34px, 1.3146vw + 29.0702px, 48px) !important;
}

.font-size-44 * {
    font-size: clamp(33px, 1.0329vw + 29.1268px, 44px) !important;
}

.font-size-40 * {
    font-size: clamp(31px, 0.8451vw + 27.8310px, 40px) !important;
}

.font-size-36 * {
    font-size: clamp(29px, 0.6573vw + 26.5352px, 36px) !important;
}

.font-size-32 * {
    font-size: clamp(27px, 0.4695vw + 25.2394px, 32px) !important;
}

.font-size-30 * {
    font-size: clamp(26px, 0.3756vw + 24.5915px, 30px) !important;
}

.font-size-26 * {
    font-size: clamp(23px, 0.2817vw + 21.9437px, 26px) !important;
}

.font-size-25 * {
    font-size: clamp(22px, 0.2817vw + 20.9437px, 25px) !important;
}

.font-size-24 * {
    font-size: clamp(21px, 0.2817vw + 19.9437px, 24px) !important;
}

.font-size-22 * {
    font-size: clamp(20px, 0.1878vw + 19.2958px, 22px) !important;
}

.font-size-20 * {
    font-size: clamp(19px, 0.0939vw + 18.6479px, 20px) !important;
}

.font-size-18 * {
    font-size: clamp(17px, 0.0939vw + 16.6479px, 18px) !important;
}

.font-size-16 * {
    font-size: clamp(15px, 0.0939vw + 14.6479px, 16px) !important;
}

.font-size-15 * {
    font-size: clamp(14px, 0.0939vw + 13.6479px, 15px) !important;
}

.font-size-14 * {
    font-size: 14px !important;
}

.font-size-13 * {
    font-size: 13px !important;
}

.font-size-12 * {
    font-size: 12px !important;
}

.font-size-11 * {
    font-size: 11px !important;
}

.font-size-10 * {
    font-size: 10px !important;
}

strong {
    font-weight: 700 !important;
}

.font-weight-700 *:not(strong) {
    font-weight: 700 !important;
}

.font-weight-600 *:not(strong) {
    font-weight: 600 !important;
}

.font-weight-500 *:not(strong) {
    font-weight: 500 !important;
}

.font-weight-400 *:not(strong) {
    font-weight: 400 !important;
}

.font-weight-200 *:not(strong) {
    font-weight: 200 !important;
}

.line-height-160 * {
    line-height: 140% !important;
}

.line-height-150 * {
    line-height: 131.25% !important;
}

.line-height-140 * {
    line-height: 122.5% !important;
}

.line-height-130 * {
    line-height: 113.75% !important;
}

.line-height-120 * {
    line-height: 105% !important;
}

.line-height-100 * {
    line-height: 87.5% !important;
}

/* Pixel-exact line-heights (used when the Figma node specifies "Line height" in px,
   not %  -- always match that exact px value here, never approximate with a % class) */
.line-height-70px * {
    line-height: 70px !important;
}

.line-height-30px * {
    line-height: 30px !important;
}

.line-height-29\.25px * {
    line-height: 29.25px !important;
}

.line-height-24px * {
    line-height: 24px !important;
}

.line-height-19\.6px * {
    line-height: 19.6px !important;
}

.line-height-60px * {
    line-height: 60px !important;
}

.line-height-56px * {
    line-height: 56px !important;
}

.line-height-32px * {
    line-height: 32px !important;
}

.line-height-16px * {
    line-height: 16px !important;
}

.line-height-25px * {
    line-height: 25px !important;
}

.line-height-20px * {
    line-height: 20px !important;
}

.line-height-15px * {
    line-height: 15px !important;
}

.line-height-31\.2px * {
    line-height: 31.2px !important;
}

.line-height-16\.8px * {
    line-height: 16.8px !important;
}

.line-height-48px * {
    line-height: 48px !important;
}

.line-height-25\.6px * {
    line-height: 25.6px !important;
}

.line-height-33\.6px * {
    line-height: 33.6px !important;
}

.line-height-28\.8px * {
    line-height: 28.8px !important;
}

.line-height-41\.6px * {
    line-height: 41.6px !important;
}

/* Letter-spacing (always match the Figma node's "Letter spacing" value exactly).
   Figma stores it as {value, units: PIXELS or PERCENT}. CSS `letter-spacing` has no
   percent unit, so a PERCENT value is implemented as the equivalent `em` (which, like
   Figma's percent, scales with the element's own font-size) -- the class name still
   names the original Figma percent for traceability. A PIXELS value is used as-is. */
.letter-spacing-n3pct * {
    letter-spacing: -0.03em !important;
}

.letter-spacing-4pct * {
    letter-spacing: 0.04em !important;
}

.letter-spacing-0\.7px * {
    letter-spacing: 0.7px !important;
}

.letter-spacing-n0\.96px * {
    letter-spacing: -0.96px !important;
}

.letter-spacing-0\.6px * {
    letter-spacing: 0.6px !important;
}


[class*="max-"] * {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max-5-row-text * {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.max-4-row-text * {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.max-3-row-text * {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.max-2-row-text * {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.max-1-row-text * {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/***************************
// End Default Styles
***************************/


/***************************
// Buttons
***************************/
.btn img {
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.btn:not(.btn-plus):not(.btn-minus):hover img {
    transform: translateX(6px);
    transition: transform 0.3s ease;
}

.btn.btn-plus img,
.btn.btn-minus img {
    transition: none !important;
}

.btn.btn-plus:hover img,
.btn.btn-minus:hover img {
    transform: none !important;
}

/***************************
// End Buttons
***************************/

/***************************
// Shared hover-zoom (image scales up slightly on hover of its clickable wrapper --
// reused across gallery, blog cards and service cards instead of redefining the
// same transition/transform per component)
***************************/
.gallery-section img,
.blog-card-img-wrap img,
.service-card-img,
.services-list-card img {
    transition: transform 0.4s ease;
}

.gallery-lightbox a:hover img,
.blog-card-media-link:hover img,
.service-card:hover .service-card-img,
.services-list-card-media-link:hover img {
    transform: scale(1.05);
}

/***************************
// End Shared hover-zoom
***************************/

/***************************
// Navbar
***************************/
.navbar {
    padding: 0;
}

.navbar-brand img {
    width: 100%;
    height: 75px;
    object-fit: cover;
}

footer .navbar-brand img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}

.navbar-toggler.white {
    border-color: var(--color-white) !important;
}

.navbar-toggler-icon.white {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.topmost {
    background: #FCFEFE;
    padding: 10px 0;
}

.topmost-logo img {
    height: 72px;
    width: auto;
}

.navbar-main {
    background: #1E5DB1;
    padding: 20px 0;
}

.navbar-links {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

.navbar-links a {
    color: #FCFEFE;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.navbar-links a:hover {
    opacity: 0.8;
}

.navbar-flag {
    width: 40px;
    height: 31px;
    object-fit: contain;
}

.navbar-flag+.navbar-flag {
    margin-left: 5px;
}

.navbar-search-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.navbar-search-btn:hover {
    opacity: 0.7;
}

.navbar-search-bar {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
    width: 280px;
    max-width: calc(100vw - 32px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 20;
}

.navbar-search-bar.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #282729;
}

.navbar-search-submit {
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

@media (max-width: 1199.98px) {
    .topmost-logo img {
        height: 48px;
    }

    /* Bootstrap's own stock `.collapse`/`.collapsing` height-slide animates
       `#navbarLinks` -- left completely undecorated on purpose (no background/
       radius/box-shadow/padding on the animating element itself). All of that
       decoration lives on `.navbar-links` (the static-sized inner content)
       instead, so the browser never has to recompute a box-shadow against a
       *changing* box size on every animation frame (expensive, and the actual
       cause of the visible stutter/snap in earlier attempts) -- it only ever
       repaints a shadow of fixed size that's progressively revealed/clipped by
       the shrinking/growing outer wrapper. Verified against a working reference
       implementation in the apr-koinónia project (same split: bare `#topNavMenu`
       collapse + decorated inner `.top-nav-links`). Do not add background/shadow/
       transition overrides back onto `.navbar-collapse` itself.
    */
    .navbar-collapse {
        width: 100%;
    }

    .navbar-links {
        background-color: #FFFFFF;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 20px !important;
        margin-top: 15px;
        gap: 15px !important;
    }

    .navbar-links a {
        color: #1E5DB1;
    }
}

/***************************
// End Navbar
***************************/

/***************************
// Hero Section
***************************/
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: 480px;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 660px;
}

.hero-heading {
    color: #1E5DB1;
}

.hero-desc {
    color: #424242;
}

.btn-hero-primary {
    padding: 16px 32px;
    border-radius: 12px;
    background: #1E5DB1;
    border: 1.5px solid #1E5DB1;
    color: var(--color-white) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: 0px 1px 2px 0px #0000000D;
    transition: background 0.3s ease;
}

.btn-hero-primary:hover {
    background: #17498c;
}

.btn-hero-outline {
    padding: 16px 32px;
    border-radius: 12px;
    background: var(--color-white);
    border: 1.5px solid #00458F;
    color: #00458F !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-hero-outline:hover {
    background: #00458F;
    color: var(--color-white) !important;
}

.hero-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #99CBF6;
    margin-right: 13px;
}

.hero-stat-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.hero-stat-value {
    color: #00458F;
}

.hero-stat-label {
    color: #3B3B3B;
}

.hero-stat-divider {
    width: 1px;
    height: 82px;
    background: #00458F;
    margin: 0 32px;
}

@media (max-width: 767.98px) {
    .hero-section {
        /*text-align: center;*/
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-actions {
        /*justify-content: center;*/
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-stat-divider {
        margin: 0 20px;
    }
}

@media (min-width: 1200px) {
    .hero-section {
        min-height: 820px;
    }
}

/***************************
// Features Section
***************************/
.features-section {
    padding: 48px 0;
}

.feature-card {
    height: 100%;
    max-width: 290px;
    margin: 0 auto;
    padding: 31px 30px 30px;
    background: #FFFFFF;
    border: 1px solid rgba(198, 198, 205, 0.1);
    border-radius: 12px;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}

.feature-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    background: #C9E6FF;
    border-radius: 8px;
}

.feature-icon-bg img {
    max-width: 30px;
    max-height: 25px;
    object-fit: contain;
}

.feature-title {
    color: #43A047;
    margin-bottom: 12px;
}

.feature-desc {
    color: #45464D;
}

/***************************
// Why Us Section
***************************/
.why-us-section {
    padding: 64px 0;
    background-color: #DDDACE1A;
}

.why-us-title {
    color: #1E5DB1;
}

.why-us-subtitle {
    color: #5D5E5E;
}

.why-us-points {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.why-us-point {
    gap: 20px;
    align-items: center;
}

.why-us-icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.why-us-icon-bg img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.why-us-point-title {
    color: #43A047;
}

.why-us-point-desc {
    color: #5D5E5E;
}

.reviews-scroll {
    display: flex;
    flex-direction: column;
    gap: 33px;
    max-height: 680px;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    padding: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-scroll::-webkit-scrollbar {
    display: none;
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 24px;
    background: linear-gradient(135deg, #FFD8F6 0%, #FFFFFF 19.35%, #FFFFFF 58.43%, #D6E7FF 100%);
    border: 1px solid #3686F7;
    border-radius: 16px;
    box-shadow:
        0px 2px 4px 0px rgba(0, 0, 0, 0.10),
        0px 7px 7px 0px rgba(0, 0, 0, 0.09),
        0px 16px 9px 0px rgba(0, 0, 0, 0.05),
        0px 28px 11px 0px rgba(0, 0, 0, 0.01);
}

.review-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.review-user-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-left: 16px;
}

.review-name {
    color: #1A1A1A;
}

.review-date {
    color: rgba(26, 26, 26, 0.5);
}

.review-google-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.review-rating {
    gap: 4px;
}

.review-rating img {
    width: 24px;
    height: 24px;
}

.review-text {
    color: #1A1A1A;
    flex: 1;
}

@media (max-width: 991.98px) {
    .why-us-points {
        gap: 24px;
    }

    .reviews-scroll {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
    }

    .reviews-scroll .review-card {
        flex-basis: min(420px, calc(100vw - 64px));
    }
}

/***************************
// Services Section
***************************/
.services-section {
    padding: 64px 0;
}

.services-title {
    color: #1E5DB1;
}

.services-link {
    color: #43A047;
    border-bottom: 1px solid #43A047;
    padding-bottom: 2px;
    white-space: nowrap;
}

.services-grid {
    display: grid;
    grid-template-columns: 603fr 290fr 290fr;
    /*grid-template-rows: 250px 250px;*/
    grid-auto-rows: 250px;
    gap: 24px;
}

.service-card-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.service-card-2 {
    grid-column: 2 / span 2;
    grid-row: 1;
}

.service-card-3 {
    grid-column: 2;
    grid-row: 2;
}

.service-card-4 {
    grid-column: 3;
    grid-row: 2;
}

.service-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.service-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.service-card-img-cover {
    object-fit: cover;
}

.service-card-img-stretch {
    object-fit: cover;
}

.service-card-overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
}

.service-card-1 .service-card-overlay {
    padding: 40px 40px 55px;
}

.service-card-title {
    color: #FFFFFF;
}

.service-card-subtitle {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991.98px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
        /*grid-template-rows: 220px 220px 220px;*/
        grid-auto-rows: 220px;
    }

    .service-card-1 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .service-card-2 {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .service-card-3 {
        grid-column: 1;
        grid-row: 3;
    }

    .service-card-4 {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 575.98px) {
    .services-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        /*grid-template-rows: repeat(4, 220px);*/
        grid-auto-rows: 220px;
    }

    .service-card-1,
    .service-card-2,
    .service-card-3,
    .service-card-4 {
        grid-column: 1;
    }

    .service-card-1 {
        grid-row: 1;
    }

    .service-card-2 {
        grid-row: 2;
    }

    .service-card-3 {
        grid-row: 3;
    }

    .service-card-4 {
        grid-row: 4;
    }
}

/***************************
// Goal ("Célunk") Section
***************************/
.goal-section {
    /*padding-top: 256px !important;*/
    padding: 64px 0;
}

.goal-title {
    color: #1E5DB1;
}

.goal-desc {
    color: #5D5E5E;
}

.goal-desc p:not(:last-child) {
    margin-bottom: 24px;
}

.btn-goal {
    display: inline-flex;
    align-items: center;
    padding: 15px 26px;
    background: #43A047;
    color: #FFFFFF !important;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.btn-goal:hover {
    background: #357a38;
}

/* This wrapper's box IS the teal backdrop card (582x658 ratio) -- its own layout
   box is what aligns with the title on the left via the row's align-items:start.
   The photo (618x869 ratio, larger) is an overflowing absolutely-positioned child,
   sized/offset in percentages derived from the Figma offsets (photo at (-36,-211)
   relative to an (0,0)-(582,658) backdrop): left=-36/582, top=-211/658,
   width=618/582, height=869/658. Because the photo is positioned rather than
   normal flow, it doesn't add to the wrapper's reserved height below it. */
.goal-photo-wrap {
    position: relative;
    width: 100%;
    max-width: 582px;
    aspect-ratio: 582 / 658;
    margin-left: auto;
    background: rgba(54, 104, 128, 0.2);
    border-radius: 12px;
}

.goal-photo {
/*    position: absolute;
    top: -32.07%;
    left: -6.19%;
    z-index: 1;
    width: 106.19%;
    height: 132.07%;
    object-fit: cover;
    object-position: 69% center;*/
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .goal-photo-wrap {
        margin-left: 0;
    }
}

/***************************
// Location Section
***************************/
.location-section {
    padding-top: 256px !important;
    padding: 64px 0;
}

.location-title {
    color: #1E5DB1;
}

.location-desc {
    color: #5D5E5E;
}

.location-desc p:not(:last-child) {
    margin-bottom: 24px;
}

/* Same overlap technique as .goal-photo-wrap, but here the photo shares the
   backdrop's left edge and width exactly (no horizontal offset) -- it's only
   taller, bleeding upward beyond the backdrop card. Photo at (345,10), backdrop
   at (345,200), both 573 wide, both ending at y=836: top=(10-200)/636=-29.87%,
   left=0, width=100%, height=826/636=129.87%. */
.location-photo-wrap {
    position: relative;
    width: 100%;
    max-width: 573px;
    aspect-ratio: 573 / 636;
    background: rgba(54, 104, 128, 0.2);
    border-radius: 12px;
}

.location-photo {
    position: absolute;
    top: -29.87%;
    left: 0;
    width: 100%;
    height: 129.87%;
    object-fit: cover;
    border-radius: 12px;
}

.location-map {
    aspect-ratio: 627 / 315;
    border-radius: 12px;
    overflow: hidden;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/***************************
// Gallery Section (not in the Figma file -- built from a reference screenshot)
***************************/
.gallery-section {
    padding: 64px 0;
}

.gallery-section img {
    border-radius: 12px;
}

.gallery-lightbox a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.gallery-lightbox--grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: 16px;
}

.gallery-lightbox--grid > a.landscape {
    grid-column: span 2;
}

.gallery-lightbox--grid > a.portrait {
    grid-row: span 2;
}

.gallery-lightbox--grid > a.square {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-lightbox--grid > a,
.gallery-lightbox--grid > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .gallery-lightbox--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 130px;
    }
}

/***************************
// Blog Section
***************************/
.blog-section {
    padding: 64px 0;
}

.blog-title {
    color: #1E5DB1;
}

.blog-link {
    color: #43A047;
    border-bottom: 1px solid #43A047;
    padding-bottom: 2px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.blog-card-media-link {
    display: block;
}

.blog-card-img-wrap {
    /*aspect-ratio: 395 / 296;*/
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-category {
    color: #43A047;
    text-transform: uppercase;
}

.blog-card-title-link {
    display: block;
    transition: color 0.2s ease;
}

.blog-card-title-link:hover .blog-card-title {
    color: #1E5DB1;
}

.blog-card-title {
    color: #305481;
    transition: color 0.2s ease;
}

.blog-card-desc {
    color: #424752;
}

/***************************
// Final CTA Section
***************************/
.cta-section {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    padding: 64px 0;
}

.cta-bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 755px;
}

.cta-title {
    color: #FFFFFF;
}

.cta-stats {
    gap: 20px;
}

.cta-stat-value {
    color: rgba(255, 255, 255, 0.9);
}

.cta-stat-label {
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 15px 26px;
    border-radius: 8px;
    color: #FFFFFF !important;
    transition: background 0.3s ease;
}

.btn-cta-primary {
    background: #43A047;
}

.btn-cta-primary:hover {
    background: #357a38;
}

.btn-cta-secondary {
    background: #1E5DB1;
}

.btn-cta-secondary:hover {
    background: #17498c;
}

/***************************
// Footer
***************************/
.site-footer {
    background: #E6EEFF;
    padding: 80px 0 32px;
}

.footer-heading {
    color: #0D1C2F;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.footer-desc,
.footer-list,
.footer-hours-list,
.footer-copyright,
.footer-privacy,
.footer-credit {
    color: #424752;
}

.footer-logo {
    height: 51px;
    width: 108px;
}

.footer-social {
    gap: 10px;
}

.footer-social img {
    width: 36px;
    height: 36px;
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-list a,
.footer-privacy a,
.footer-credit a {
    transition: color 0.2s ease;
}

.footer-list a:hover,
.footer-privacy a:hover,
.footer-credit a:hover {
    color: #1E5DB1;
}

.footer-contact-list {
    gap: 16px;
}

.footer-contact-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-contact-list img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.footer-hours-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-card-img {
    width: 100%;
    aspect-ratio: 271 / 152;
    object-fit: cover;
}

.footer-bottom {
    gap: 12px;
    margin-top: 48px;
    padding-top: 25px;
    border-top: 1px solid rgba(194, 198, 211, 0.3);
}

@media (max-width: 767.98px) {
    .footer-bottom {
        justify-content: center !important;
        text-align: center;
    }
}

/***************************
// Bemutatkozás page -- not in the Figma file, built from a reference screenshot
// (Bemutatkozás.png) -- see the note on the Gallery section for why this doesn't
// carry the same pixel-sourced-from-JSON precision as Figma-based sections.
***************************/

/* About Hero -- confirmed present in fig_document.json (frame "Hero Section",
   size 1920x544.19, reused identically across the "Bemutatkozás", "Szolgáltatások
   lista", "Szolgáltatások belső" Figma page-frames, plus others not yet built).
   Values below are read directly from JSON, not eyeballed from a screenshot. */
.about-hero-section {
    position: relative;
    overflow: hidden;
    /*min-height: 544.19px;*/
    min-height: 400px;
}

.about-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* From the "Kép" node's IMAGE fill transform (m11=0.5076, m12=0.1850): the
       visible crop window covers image-space y = 18.5% to 69.3%, i.e. object-position-y
       = m12 / (1-m11) = 0.1850/0.4924 ≈ 37.6% -- not the CSS default 50%. */
    object-position: center 37.6%;
    z-index: 0;
}

/* GRADIENT_LINEAR fill on the "Kép" node: stops white@a=1 (pos 0) -> white@a=0
   (pos 1), paint opacity 0.7, transform {m00:5.3556, m02:-1.8921, ...}. Solving
   for the visible node's local x=0 and x=1 against that transform (gx = (x -
   m02)/m00) gives gradient-parameter t ≈ 0.353 at the left edge and t ≈ 0.540 at
   the right edge; alpha = (1-t) * 0.7 -> ≈0.453 at x=0%, ≈0.322 at x=100%. This is
   a much gentler, near-uniform wash than it looks like at a glance -- don't
   re-guess this by eye, it's a real computed value from the actual fill data. */
.about-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
   background: linear-gradient(89.96deg, rgba(255, 255, 255, 0.7) 35.37%, rgba(255, 255, 255, 0) 54.03%);
     pointer-events: none;
}

.about-hero-section .container {
    position: relative;
    z-index: 2;
}

.about-hero-title {
    color: #1E5DB1;
}

.about-hero-desc {
    color: #424242;
    max-width: 658px;
}

/* Optional breadcrumb row above the title -- present in the "Szolgáltatások
   lista"/"Szolgáltatások belső" Figma frames' Hero Section, absent from
   "Bemutatkozás"'s (confirmed in JSON, not just by screenshot appearance) */
.about-hero-breadcrumb {
    color: #00458F;
    /* Some pages store this text pre-typed in caps in Figma, others (e.g.
       "Ajándékutalvány") store it in natural case and rely on a visual
       uppercase transform -- always force it here so the HTML can just contain
       the natural-case text and render correctly regardless of which the source
       page did. (This rule was accidentally dropped in an earlier color-only
       edit -- restored.) */
    text-transform: uppercase;
}

.about-hero-breadcrumb a {
    color: #00458F;
}

.about-hero-breadcrumb a:hover {
    text-decoration: underline;
}

/* Video Section */
.video-section {
    padding: 64px 0;
}

.video-thumb-link {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.video-thumb-link img:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 573 / 299;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-thumb-link:hover img:first-child {
    transform: scale(1.03);
}

/* Separate "YouTube"-style play button image overlay -- a real Figma-extracted
   asset (fig_extracted_images/78e555...), not baked into the thumbnail photo,
   and not a hand-drawn SVG (see the project's no-inline-SVG rule) */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

.video-title {
    color: #1E5DB1;
}

.video-desc {
    color: #5D5E5E;
}

.video-desc p:not(:last-child) {
    margin-bottom: 24px;
}

/* Team Section */
.team-section {
    padding: 64px 0;
}

.team-title {
    color: #00458F;
}

.team-subtitle {
    color: #424752;
}

.team-card {
    position: relative;
    aspect-ratio: 368 / 532;
    border-radius: 12px;
    overflow: hidden;
}

.team-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GRADIENT_LINEAR fill on the card node itself (stacked with the IMAGE fill,
   both painted across the FULL card, not just a bottom strip): stops black@a=0
   at 62% -> black@a=1 at 92.8%, paint opacity 0.7 -> effective rgba(0,0,0,0.7)
   at the bottom. Painted as a full-card ::before so it matches the Figma fill
   stack; the text sits in a separate bottom-anchored .team-card-overlay div. */
.team-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.7) 92.8%);
    pointer-events: none;
}

.team-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 24px;
}

.team-card-name {
    color: #FFFFFF;
}

.team-card-role {
    color: rgba(255, 255, 255, 0.9);
}

/***************************
// Szolgáltatásaink (services list) page -- not in the Figma file, built from a
// reference screenshot (szolgaltatasok-lista.png). 4 of the 12 cards
// (Felmérés/Implantológia/Fogszabályozás/Barázdazárás) reuse the exact same
// photos+titles already used in index.html's `.services-section` bento grid --
// confirmed by direct pixel comparison, not just similar titles -- so those
// reference assets/images/services/serviceN.png directly instead of duplicating
// the file under assets/images/services-list/.
***************************/
.services-list-section {
    padding: 64px 0;
}

.services-list-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.services-list-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.services-list-card img {
    width: 100%;
    aspect-ratio: 787 / 435;
    object-fit: cover;
}

.services-list-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.services-list-card-media-link {
    display: block;
}

.services-list-card-title-link {
    display: block;
    transition: color 0.2s ease;
}

.services-list-card-title-link:hover .services-list-card-title {
    color: #17498c;
}

.services-list-card-title {
    color: #00458F;
    transition: color 0.2s ease;
}

.services-list-card-desc {
    color: #424752;
    flex: 1;
}

.services-list-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #43A047 !important;
    align-self: flex-start;
    transition: gap 0.2s ease;
}

.services-list-card-link:hover {
    gap: 10px;
}

/***************************
// Szolgáltatás belső (single service detail) page. **CORRECTION: this page IS in
// the Figma file** (frame "Szolgáltatások belső" under "Page 1", confirmed by
// direct JSON lookup) -- earlier notes here calling it "not in the Figma file"
// were wrong, based on an unfounded assumption instead of actually checking.
// Reuses .about-hero-section as-is, no modifier -- the earlier `.hero-gradient-wide`
// hack (and before that, blurring the cropped hero image) were both attempts to
// paper over a baked-in-text visibility problem that shouldn't have come up in
// the first place: the hero's gradient/typography values are shared Figma data,
// not something to re-derive per page. See the `.about-hero-section` block above
// for the corrected, JSON-sourced gradient/typography values.
***************************/

/* Content section (text + checklist + button / photo) */
.service-detail-content-section {
    padding: 64px 0;
}

.service-detail-title {
    color: #1E5DB1;
}

.service-detail-desc {
    color: #5D5E5E;
}

.service-detail-desc p:not(:last-child) {
    margin-bottom: 24px;
}

.service-detail-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #424752;
}

.service-detail-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-detail-checklist img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.service-detail-photo-wrap {
    border-radius: 12px;
    overflow: hidden;
}

.service-detail-photo {
    width: 100%;
    aspect-ratio: 551 / 618;
    object-fit: cover;
}

/* "A kezelés menete" process steps */
.process-section {
    padding: 64px 0;
}

.process-title {
    color: #1E5DB1;
}

.process-step-number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #43A047;
    color: #FFFFFF;
}

.process-step-title {
    color: #43A047;
}

.process-step-desc {
    color: #424752;
}

/* FAQ accordion */
.faq-section {
    padding: 64px 0;
}

.faq-title {
    color: #1E5DB1;
}

/* Figma data (frame "Szolgáltatások belső" > FAQ Container) shows each
   accordion item as its OWN separate white rounded card with a 16px gap between
   cards -- NOT Bootstrap's default single connected box with internal divider
   lines. Override per-item instead of on the shared outer wrapper. */
.faq-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-color: #1B1C1C;
    --bs-accordion-active-color: #1B1C1C;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E5DB1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E5DB1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.faq-accordion .accordion-item {
    border: none;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
    overflow: hidden;
    margin-bottom: 16px;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.faq-accordion .accordion-button {
    padding: 16px 24px;
}

.faq-accordion .accordion-body {
    color: #424752;
    padding: 0 24px 24px;
}

/***************************
// Ajándékutalvány page. Confirmed present in fig_document.json (frame
// "Ajándékutalvány" under "Page 1") -- checked before writing any CSS, per the
// binding rule in section 0. Structure: header → shared .about-hero-section
// (reuses the same hero photo as index.html -- same IMAGE hash confirmed in
// JSON) → .voucher-section (text column + gift-card graphic, no checklist/
// button -- confirmed absent from this frame's JSON) → cta-section → footer
// (both reused verbatim). The gift-card graphic is a real Figma-extracted asset
// (fig_extracted_images/d0536d459f...png → assets/images/ajandekutalvany/gift-card.png),
// not a screenshot crop.
***************************/
.voucher-section {
    padding: 64px 0;
}

.voucher-title {
    color: #1E5DB1;
}

.voucher-desc {
    color: #5D5E5E;
}

/* The body copy is one continuous Figma text node with mixed bold/regular runs
   and blank-line paragraph breaks -- reproduced as separate "group" divs (one
   per blank-line-separated block) so only inter-group spacing gets a margin,
   matching the source's tight intra-group line spacing vs. blank-line gaps. */
.voucher-desc-group:not(:last-child) {
    margin-bottom: 24px;
}

.voucher-photo-wrap {
    border-radius: 12px;
    overflow: hidden;
}

.voucher-photo {
    width: 100%;
    aspect-ratio: 662 / 448;
    object-fit: cover;
}

/***************************
// Árlista (price list) page. Checked fig_document.json FIRST (frame "Árlista"
// under "Page 1") before writing anything. The grid is 3 rows x 3 category
// cards; rows 2 and 3 are IDENTICAL in both the JSON and the reference
// screenshot (same 3 categories repeated) -- not a placeholder-duplication
// artifact like szolgaltatasok-lista's grid was (that one had inconsistent
// mismatched titles; this one is clean and consistent across both sources), so
// reproduced faithfully as 9 total cards rather than deduplicated to 6. The
// green tooth icon on each card header is a pure Figma VECTOR with no
// extracted raster asset -- per the binding no-hand-drawn-icon rule, the user
// exported it directly from Figma as assets/images/fog.png.
***************************/
.price-list-section {
    padding: 64px 0;
}

.price-card {
    height: 100%;
    padding: 33px;
    background: #FBF9F8;
    border: 1px solid rgba(69, 69, 69, 0.3);
    border-radius: 12px;
}

.price-card-header {
    gap: 20px;
    margin-bottom: 33px;
}

.price-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.price-card-title {
    color: #00458F;
}

.price-card-list {
    list-style: none;
}

.price-card-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E4E2E2;
}

.price-card-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.price-card-label {
    color: #1B1C1C;
}

.price-card-price {
    color: #00458F;
    white-space: nowrap;
}

/***************************
   Időpontfoglalás (booking) page -- Figma frame "Időpontfoglalás", "Progress
   Indicator" + "Main Content" (no hero on this page, header goes straight
   into the progress indicator). This page's own Footer node genuinely only
   has 4 social icons (no WhatsApp) and 3 contact items (no WhatsApp line) --
   confirmed against both fig_document.json and the reference screenshot, so
   the footer markup here intentionally differs from the other pages' footer.
   The doctor availability icons (sun/moon/clock) and the calendar prev/next
   chevrons + section close (x) icons are pure VECTOR fills with no raster
   asset in fig_extracted_images -- reconstructed as minimal inline SVG from
   their exact bounding geometry, same precedent as the navbar search icon.
***************************/
.booking-section {
    padding: 64px 0 100px;
}

.booking-progress {
    display: flex;
    align-items: flex-start;
    max-width: 1010px;
    margin: 0 auto 56px;
}

.booking-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.booking-progress-step[role="button"] {
    cursor: pointer;
}

.booking-progress-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1E5DB1;
    color: #fff;
}

.booking-progress-step.active .booking-progress-badge {
    background: #43A047;
    box-shadow: 0 0 10px rgba(67, 160, 71, 1);
}

.booking-progress-label {
    color: #424752;
    margin-top: 8px;
    text-align: center;
}

.booking-progress-step.active .booking-progress-label {
    color: #43A047;
}

.booking-progress-divider {
    flex: 1 1 auto;
    height: 1px;
    min-width: 16px;
    background: #1E5DB1;
    margin: 15px 16px 0;
}

.booking-card {
    max-width: 915px;
    margin: 0 auto;
    padding: 32px;
    background: #FBF9F8;
    border: 1px solid rgba(194, 198, 211, 0.3);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
}

#doctorSelection,
.booking-block {
    margin-bottom: 32px;
}

.booking-block:last-child {
    margin-bottom: 0;
}

.booking-heading {
    color: #00458F;
}

.booking-close-btn {
    width: 30px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: #737783;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.booking-close-btn:hover {
    color: #1E5DB1;
}

.booking-select-wrapper {
    position: relative;
}

.booking-select,
.booking-input,
.booking-textarea {
    width: 100%;
    background: #F8FAFC;
    border: 1px solid rgba(194, 198, 211, 0.5);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #424752;
    /* native form controls have no descendant text node, so the font-*
       utility classes (which target descendants only) can't reach them --
       same exception already established for .navbar-search-input. */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: box-shadow 0.2s ease;
}

.booking-select {
    padding: 14px 40px 15.59px 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M1 1L7.4 8L14 1' stroke='%23060606' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.booking-input,
.booking-textarea {
    padding: 15px 17px;
    line-height: 100%;
}

.booking-input::placeholder,
.booking-textarea::placeholder {
    color: rgba(66, 71, 82, 0.5);
}

.booking-textarea {
    resize: vertical;
    min-height: 128px;
    line-height: 160%;
}

.booking-select:focus,
.booking-input:focus,
.booking-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 93, 177, 0.3);
}

.booking-doctors {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-start;
}

.booking-doctor-card {
    flex: 1 1 190px;
    min-width: 190px;
    max-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    background: none;
    border: 1px solid #C2C6D3;
    border-radius: 8px;
    padding: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.booking-doctor-card[hidden] {
    display: none;
}

.booking-doctor-card:hover {
    border-color: #1E5DB1;
}

.booking-doctor-card.selected {
    border: 2px solid #00458F;
    background: rgba(30, 93, 177, 0.1);
    padding: 12px;
}

.booking-doctor-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.booking-doctor-name {
    color: #1B1C1C;
}

.booking-doctor-specialty {
    color: #424752;
}

.booking-doctor-availability {
    display: flex;
    align-items: center;
    gap: 4px;
}

.booking-doctor-availability svg {
    flex-shrink: 0;
}

.booking-doctor-availability-morning {
    color: #00458F;
}

.booking-doctor-availability-afternoon {
    color: #743500;
}

.booking-doctor-availability-fullday {
    color: #006E1C;
}

.booking-calendar {
    background: #FBF9F8;
    border: 1px solid #C2C6D3;
    border-radius: 8px;
    padding: 17px;
}

.booking-calendar-header {
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #C2C6D3;
}

.booking-calendar-title {
    color: #1B1C1C;
}

.booking-calendar-nav {
    width: 15.4px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: #737783;
    cursor: pointer;
    transition: color 0.2s ease;
}

.booking-calendar-nav:hover {
    color: #1E5DB1;
}

.booking-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.booking-calendar-weekdays span {
    display: block;
    text-align: center;
    color: #1C60A9;
}

.booking-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.booking-day {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #1C60A9;
    border-radius: 4px;
    color: #1B1C1C;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.booking-day:hover:not([disabled]) {
    background: rgba(30, 93, 177, 0.08);
}

.booking-day[disabled] {
    cursor: default;
}

.booking-day-outside,
.booking-day-weekend {
    border-color: #C2C6D3;
    color: #737783;
}

.booking-day-weekend {
    background: #F5F3F3;
}

.booking-day-outside:hover:not([disabled]),
.booking-day-weekend:hover:not([disabled]) {
    background: #F5F3F3;
}

.booking-day-selected {
    background: #69A0DA !important;
    border-color: #1C60A9 !important;
    color: #1B1C1C !important;
    font-weight: 700;
}

.booking-day-icon {
    width: 12px;
    height: 10px;
    border-radius: 2px;
    background: #737783;
    opacity: 0.5;
}

.booking-timeslots-heading {
    color: #1B1C1C;
    margin-bottom: 20px;
}

.booking-timeslots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.booking-slot {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #1C60A9;
    border-radius: 6px;
    color: #1C60A9;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.booking-slot:hover:not([disabled]) {
    background: rgba(30, 93, 177, 0.08);
}

.booking-slot-selected {
    background: #69A0DA !important;
    border-color: #1C60A9 !important;
    color: #1C60A9 !important;
}

.booking-slot-disabled {
    background: #F5F3F3;
    border-color: #C2C6D3;
    color: #737783;
    cursor: default;
    text-decoration: line-through;
}

.booking-action {
    padding-top: 17px;
    border-top: 1px solid #C2C6D3;
}

.booking-submit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #43A047;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.booking-submit-btn:hover {
    background: #388E3C;
}

.booking-submit-btn:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .booking-card {
        padding: 20px;
    }

    .booking-progress-label {
        display: none;
    }

    .booking-progress-divider {
        margin-top: 15px;
    }

    .booking-doctor-card {
        flex: 1 1 calc(50% - 7px);
    }

    .booking-timeslots-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-day {
        height: 38px;
    }
}

@media (max-width: 420px) {
    .booking-calendar {
        padding: 12px 6px;
    }

    .booking-calendar-grid,
    .booking-calendar-weekdays {
        gap: 4px;
    }

    .booking-day {
        height: 32px;
        font-size: 12px !important;
    }

    .booking-doctor-card {
        flex: 1 1 100%;
    }
}

/***************************
   Adatok megadása (step 2 of the booking wizard) -- Figma frame "Adatok
   megadás". Reuses .booking-section/.booking-progress/.booking-submit-btn
   from the Időpontfoglalás page above. This page's own Footer node has 5
   social icons and 4 contact items (WhatsApp included), matching the
   standard footer used on index/ajándékutalvány/etc -- NOT the reduced
   4-icon/3-item footer that is specific to the Időpontfoglalás page.
***************************/
.booking-progress-step.done .booking-progress-badge {
    background: #1E5DB1;
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
}

.adatok-columns {
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: 1230px;
    margin: 0 auto;
}

.adatok-card {
    flex: 1 1 672px;
    background: #FBF9F8;
    border: 1px solid #C2C6D3;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
    padding: 49px;
}

.adatok-card-heading {
    color: #00458F;
    text-align: center;
    margin-bottom: 15px;
}

.adatok-card-desc {
    color: #424752;
    text-align: center;
    margin-bottom: 39px;
}

.adatok-form-group {
    margin-bottom: 24px;
}

.adatok-form-row {
    display: flex;
    gap: 24px;
}

.adatok-form-row .adatok-form-group {
    flex: 1 1 0;
}

.adatok-label {
    display: block;
    color: #1B1C1C;
    margin-bottom: 8px;
}

.adatok-checkbox-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.adatok-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-left: 0;
    flex-shrink: 0;
    background: #FBF9F8;
    border: 1px solid #C2C6D3;
    accent-color: #1E5DB1;
    border-radius: 4px;
    cursor: pointer;
}

.adatok-checkbox-label {
    flex: 1 1 0%;
    min-width: 0;
    color: #424752;
    cursor: pointer;
}

.adatok-checkbox-label a {
    color: #1E5DB1;
    text-decoration: underline;
}

.adatok-form .invalid-feedback,
.contact-form .invalid-feedback {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.adatok-checkbox-row .invalid-feedback {
    flex-basis: 100%;
    margin-left: 32px;
}

.adatok-form .booking-submit-btn {
    width: 100%;
    justify-content: center;
}

.adatok-media {
    flex: 1 1 518px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.adatok-map,
.adatok-photo {
    flex: 1 1 0;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
}

.adatok-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.adatok-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .adatok-columns {
        flex-direction: column;
    }

    .adatok-media {
        min-height: 480px;
    }

    .adatok-map,
    .adatok-photo {
        min-height: 220px;
    }
}

@media (max-width: 575.98px) {
    .adatok-card {
        padding: 24px;
    }

    .adatok-form-row {
        flex-direction: column;
        gap: 24px;
    }
}

/***************************
   Összesítés (step 3 of the booking wizard) -- Figma frame "Összesítés".
   Steps 1 (Időpont) and 2 (Adatok) are both "done" here (checkmark badge,
   same as .booking-progress-step.done already used on adatok.html), step 3
   is "active". The summary card itself is a NEW, distinct card style (white
   background, not the #FBF9F8 used by .booking-card/.adatok-card, and a
   65px padding instead of 32/49px) -- confirmed from this frame's own
   Summary Card node, not assumed from the other wizard steps.
***************************/
.summary-card {
    max-width: 915px;
    margin: 0 auto;
    padding: 65px;
    background: #fff;
    border: 1px solid #E4E2E2;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
}

.summary-card-heading {
    color: #00458F;
    padding-bottom: 8px;
    margin-bottom: 32px;
    border-bottom: 1px solid #E4E2E2;
}

.summary-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 32px;
}

.summary-column-heading {
    display: block;
    color: #424752;
    margin-bottom: 16px;
}

.summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.summary-item + .summary-item {
    margin-top: 16px;
}

.summary-item-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.summary-item-label {
    display: block;
    color: #424752;
}

.summary-item-value {
    display: block;
    color: #1B1C1C;
}

.summary-item-value-muted {
    color: #737783;
    font-style: italic;
}

.summary-notice {
    color: #0C5B9E;
    margin-bottom: 32px;
}

.summary-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 16px 20px;
    margin-bottom: 32px;
    background: #F5F3F3;
    border-left: 4px solid #00458F;
    border-radius: 8px;
}

.summary-banner-icon {
    flex-shrink: 0;
    color: #00458F;
}

.summary-banner-text {
    color: #424752;
}

.summary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid #E4E2E2;
}

.summary-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 25px;
    height: 51px;
    background: none;
    border: 1px solid #43A047;
    border-radius: 8px;
    color: #43A047;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.summary-btn-outline:hover {
    background: rgba(67, 160, 71, 0.08);
    color: #43A047;
}

@media (max-width: 767.98px) {
    .summary-card {
        padding: 32px;
    }

    .summary-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .summary-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .summary-btn-outline,
    .summary-actions .booking-submit-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .summary-card {
        padding: 20px;
    }
}

/***************************
   Visszaigazolás (step 4, final step of the booking wizard) -- Figma frame
   "Visszaigazolás". Steps 1-3 are all "done" here, step 4 is "active" (shows
   the digit "4", not a checkmark -- it's the current step, not yet a
   completed one, confirmed from this frame's own Progress Indicator node).
   The whole main content area is a real photo (not a background-color) with
   a semi-transparent frosted card centered on top of it.
***************************/
.success-photo {
    position: relative;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
}

.success-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.success-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 672px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #C2C6D3;
    border-radius: 12px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.success-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(194, 198, 211, 0.2);
    text-align: center;
}

.success-check {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 110, 28, 0.1);
}

.success-title {
    color: #00458F;
    margin-bottom: 8px;
}

.success-desc {
    max-width: 480px;
    margin: 0 auto;
    color: #424752;
}

.success-summary {
    max-width: 448px;
    margin: 0 auto 32px;
    padding: 17px;
    background: #FBF9F8;
    border: 1px solid rgba(194, 198, 211, 0.5);
    border-radius: 8px;
}

.success-summary-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #00458F;
    margin-bottom: 8px;
}

.success-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.success-summary-item + .success-summary-item {
    margin-top: 12px;
}

.success-summary-item img {
    flex-shrink: 0;
    margin-top: 2px;
}

.success-summary-item-label {
    display: block;
    color: #1B1C1C;
}

.success-summary-item-value {
    display: block;
    color: #424752;
}

.success-status {
    color: #006E1C;
}

.success-card .summary-btn-outline {
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    .success-card {
        padding: 24px;
    }

    .success-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }
}

@media (max-width: 420px) {
    .success-photo {
        padding: 24px 12px;
    }

    .success-card {
        padding: 20px;
    }
}

/***************************
   Kapcsolat page -- Figma frame "Kapcsolat". A standalone contact page, NOT
   part of the booking wizard -- shares only the hero pattern with
   bemutatkozas/arlista/ajándékutalvány (same hero photo, confirmed by hash).
   Card background here is a distinct light blue (#E3F0FF) not used by any
   other card in the project; confirmed directly from this frame's own
   Info/Hours/Form card nodes, not assumed from a similar-looking card
   elsewhere.
***************************/
/* "Itt kezdődik a mosolya" -- NOT in the Figma "Kapcsolat" frame; added later
   from a reference screenshot only, at the user's request. Reasonable visual
   match, not pixel-sourced precision. */
.smile-section {
    padding-top: 64px;
}

.smile-title {
    color: #00458F;
}

.smile-desc {
    color: #424752;
}

.smile-desc p:not(:last-child) {
    margin-bottom: 24px;
}

.smile-photo-wrap {
    border-radius: 12px;
    overflow: hidden;
}

.smile-photo {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    display: block;
}

.contact-section {
    padding: 100px 0;
}

.contact-columns {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 100px;
}

.contact-info-column,
.contact-form-column {
    flex: 1 1 0;
    min-width: 0;
}

.contact-card {
    padding: 33px;
    background: #E3F0FF;
    border-radius: 12px;
}

.contact-info-card,
.contact-hours-card {
    border: 1px solid #C2C6D3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.contact-info-card {
    margin-bottom: 40px;
}

.contact-form-card {
    border: 1px solid rgba(194, 198, 211, 0.2);
    box-shadow: 0 10px 30px rgba(30, 93, 177, 0.05);
}

.contact-card-heading {
    color: #00458F;
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.contact-item + .contact-item {
    margin-top: 16px;
}

.contact-item img,
.contact-item svg {
    flex-shrink: 0;
    margin-top: 4px;
}

.contact-item-label {
    display: block;
    color: #1B1C1C;
}

.contact-item-value {
    display: block;
    color: #424752;
}

.contact-item-value a {
    color: #424752;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-item-value a:hover {
    color: #1E5DB1;
}

.contact-social {
    gap: 12px;
    margin-top: 32px;
}

.contact-social img {
    width: 36px;
    height: 36px;
    transition: transform 0.2s ease;
}

.contact-social a:hover img {
    transform: scale(1.05);
}

.contact-hours-item {
    color: #1B1C1C;
}

.contact-hours-item + .contact-hours-item {
    margin-top: 16px;
}

.contact-hours-closed {
    color: #BA1A1A;
}

.contact-form-heading {
    color: #00458F;
    margin-bottom: 8px;
}

.contact-form-desc {
    color: #424752;
    margin-bottom: 32px;
}

.contact-form-row {
    display: flex;
    gap: 40px;
}

.contact-form-row .contact-form-group {
    flex: 1 1 0;
}

.contact-form-group {
    margin-bottom: 16px;
}

.contact-label {
    display: block;
    color: #1B1C1C;
    margin-bottom: 8px;
}

.contact-input,
.contact-textarea {
    width: 100%;
    padding: 15px 17px;
    background: #FBF9F8;
    border: 1px solid #C2C6D3;
    border-radius: 8px;
    color: #424752;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 100%;
    transition: box-shadow 0.2s ease;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(66, 71, 82, 0.5);
}

.contact-textarea {
    resize: vertical;
    min-height: 154px;
    line-height: 160%;
}

.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 93, 177, 0.3);
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    background: #00458F;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.contact-submit-btn:hover {
    background: #003A78;
}

.contact-form-success {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(67, 160, 71, 0.1);
    border: 1px solid #43A047;
    border-radius: 8px;
    color: #2E7D32;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.contact-map {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 32px;
    height: 100%;
    display: flex;
    min-height: 300px;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-photos img {
    width: 100%;
    height: 345px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

@media (max-width: 991.98px) {
    .contact-columns {
        flex-direction: column;
    }

    .contact-info-column,
    .contact-form-column {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .contact-section {
        padding: 56px 0;
    }

    .contact-columns {
        margin-bottom: 56px;
    }

    .contact-card {
        padding: 24px;
    }

    .contact-form-row {
        flex-direction: column;
        gap: 16px;
    }

    .contact-map iframe {
        height: 260px;
    }

    .contact-photos img {
        height: 220px;
    }
}


/***************************
// Static Content Section
***************************/
.static-content {
    color: #5D5E5E;
    font-family: var(--font-inter);
    font-size: clamp(15px, 0.0939vw + 14.6479px, 16px);
    font-weight: 400;
    line-height: 24px;
}

.static-content h1,
.static-content h2,
.static-content h3,
.static-content h4,
.static-content h5,
.static-content h6 {
    color: #1E5DB1;
    font-family: var(--font-yeseva-one);
    font-weight: 400;
    letter-spacing: 0;
}

.static-content h1,
.static-content h2 {
    margin-bottom: 1rem;
    font-size: clamp(29.75px, 1.1503vw + 25.4364px, 42px);
    line-height: 45.94px;
}

.static-content h3 {
    margin-bottom: 1rem;
    font-size: clamp(25.375px, 0.5751vw + 23.2183px, 31.5px);
    line-height: 36.75px;
}

.static-content h4 {
    margin-bottom: 1rem;
    font-size: clamp(23.625px, 0.4108vw + 22.0845px, 28px);
    line-height: 31.85px;
}

.static-content h5 {
    margin-bottom: 1rem;
    font-size: clamp(20.125px, 0.2465vw + 19.2007px, 22.75px);
    line-height: 25.73px;
}

.static-content h6 {
    margin-bottom: 1rem;
    font-size: clamp(17.5px, 0.1643vw + 16.8838px, 19.25px);
    line-height: 22.05px;
}

.static-content p {
    margin-bottom: 24px;
}

.static-content img {
    border-radius: 12px;
}

.static-content p:last-child {
    margin-bottom: 0;
}

.static-content ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
    color: #424752;
    list-style: none;
}

.static-content ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.static-content ul li::before {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url('../images/pipa.webp') center / contain no-repeat;
}

/***************************
// End Static Content Section
***************************/
.air-datepicker {
    width: 100% !important;
}

.air-datepicker-cell.-current- {
    color: #69A0DA !important;
}

.air-datepicker-cell.-selected- {
    color: #fff !important;
    background: #69A0DA  !important;
}

.air-datepicker-body--cells.-days- {
    grid-auto-rows: 40px !important;
}

.air-datepicker-cell {
    border: 1px solid #1C60A9 !important;
}

.air-datepicker-cell.-disabled- {
    border: none !important;
    background-color: #F9F9F9 !important;
}

.air-datepicker-body--cells.-days- {
    gap: 10px 15px;
}

.air-datepicker-body--day-name {
    color: #1C60A9;
}

.booking-close-btn {
    display: none;
}

.static-content ol {
    padding-left: 1.2em;
}

.blog-hero-inner.about-hero-section::before {
    background: linear-gradient(89.96deg, rgba(255, 255, 255, 0.7) 100%, rgba(255, 255, 255, 0) 54.03%);
}

video {
    max-width: 100% !important;
}

.pagination-container {
    display: flex;
    justify-content: center;

    .pagination {
        gap: 6px;

        .page-link {
            color: #1C60A9;
            border: 1px solid #1C60A9;
            width: 35px;
            height: 35px;
            aspect-ratio: 1 / 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.1em;
            border-radius: 6px !important;
        }

        .page-item.active .page-link {
            color: #fff;
            background-color: #1C60A9;
            border-color: #1C60A9;
        }
    }

    .small.text-muted {
        display: none;
    }

    .page-item:first-child .page-link {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .page-item:last-child .page-link {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.floating-img {
    position: absolute;
    top: 0;
    max-width: 35%;
}

.floating-img img {
    width: 100%;
    height: auto;
}

.floating-img.sztp {
    left: 0;
    width: 200px;
}

.floating-img.sz2020 {
    right: 0;
    width: 135px;
}

@media (min-width: 1200px) {
    .floating-img.sz2020 {
        width: 160px;
    }

    .floating-img.sztp {
        width: 280px;
    }
}

.static-content img,
.static-content iframe,
.static-content video {
    max-width: 100% !important;
    height: auto;
}