/* --- Font Import & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --daikin-blue: #0097d3;
    --daikin-dark-navy: #002d72;
    --daikin-light-blue: #A0D2F4;
    --daikin-deep-blue: #002244;
    --light-blue-hover: #eff6ff;
    --daikin-blue-transparent: rgba(0, 151, 211, 0.05);
    --daikin-blue-hsl: 211, 100%, 32%;
    --border-color: #D1D5DB;
    --flamingo-orange: #f26522;
    --flamingo-orange-dark: #d85a1e;
    --flamingo-orange-alpha-10: rgba(244, 121, 32, 0.1);
    --note-bg-color: #002C56;
    --slate-950: #020617;
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-300: #CBD5E1;
    --slate-950-alpha-80: rgba(2, 6, 23, 0.8);
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-50-alpha-50: rgba(249, 250, 251, 0.5);
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950-opaque: rgba(2, 6, 23, 0.9);
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-600: #2563EB;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
    --yellow-600: #ca8a04;
    --yellow-700: #a16207;
    --yellow-800: #854d0e;
    --green-100: #d1fae5;
    --green-700: #047857;
    --orange-100: #ffedd5;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-700: #c2410c;
    --red-100: #fee2e2;
    --red-500: #EF4444;
    --red-700: #b91c1c;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --opacity-85: 0.85;
    --flamingo: #F14F27;
    --green-blue: linear-gradient(129deg, rgba(51, 255, 108, .7) -5.06%, #0097E0 91.08%);
    --dark-blue: #0f172a;
    --background-color: #ffffff;
    --ring-color: #005596; 
    --foreground: #1a202c;
    --muted-foreground: #718096;
    --background: #ffffff;
    --card-background: #ffffff;
    --background-light-gray: #f9fafb;
}

/* Modern CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #f9fafb;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

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

button {
    background: none;
    border: none;
    cursor: pointer;
}

.common-block p:not(:last-child) {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8rem;
}

.common-block a {
    color: var(--daikin-blue);
}

.common-block a:hover {
    text-decoration: underline;
}

:is(picture.full-width, picture.full-width img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* style.css */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

.w-900 {
    width: min(100%, 900px);
    margin: 0 auto;
}

/* --- Keyframe Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

/* Text Colors */
.text-white, .text-white :is(h1, h2, h3, h4, h5, h6) {
    color: var(--white) !important;
}

.text-dark, .text-dark :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gray-900) !important;
}

.text-g-800, .text-g-800 :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gray-800) !important;
}

.text-gray-dark, .text-gray-dark :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gray-700) !important;
}

.text-gray-medium, .text-gray-medium :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gray-600) !important;
}

.text-gray-light, .text-gray-light :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gray-300) !important;
}
/* Used in showroom card description */
.text-blue {
    color: var(--daikin-blue) !important;
}

.text-light-blue {
    color: var(--daikin-light-blue) !important;
}

.text-dark-navy {
    color: var(--daikin-dark-navy) !important;
}

.text-red {
    color: var(--color-red-600) !important;
}

/* Font Weights */
.font-normal {
    font-weight: 400;
}

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

.font-semibold {
    font-weight: 600;
}

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

/* Text Alignment */
.text-align-center {
    text-align: center;
}

/* Flex Utilities */
.flex-container {
    display: flex;
    align-items: center;
}

.flex-col {
    flex-direction: column;
}

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

.justify-end {
    justify-content: flex-end;
}

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

.justify-around {
    justify-content: space-around;
}

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

.align-start {
    align-items: flex-start;
}

.flex-shrink-zero {
    flex-shrink: 0;
}

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

/* Grid Layouts */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem; /* gap-8 */
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 2rem;
}

.grid-4-col {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 2rem;
}

.grid-fit-280 {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 768px) {
    .grid-2-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4-col {
        grid-template-columns: repeat(4, 1fr);
    }
}

.text-center.mt-12 {
    text-align: center;
}

.mt-12 {
    margin-top: 3rem;
}

.mt-sm {
    margin-top: 1.5rem;
}

.grid-3-350 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* Icon Styles (using mask-image with data URIs) */
.icon {
    display: inline-block;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Default icon size (adjust as needed for specific uses) */
.icon {
    width: 1rem; /* Base size, like h-4 w-4 */
    height: 1rem;
}

.icon.icon-large {
    width: 3rem; /* h-12 w-12 */
    height: 3rem;
}

.icon.icon-super-large {
    width: 4rem; /* h-16 w-16 */
    height: 4rem;
}

/* Specific icon definitions */
.icon-phone {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-5.75-5.75A19.79 19.79 0 0 1 2 4.18 2 2 0 0 1 4.18 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-1.18 2.19l-.7.35a16 16 0 0 0 6 6l.35-.7a2 2 0 0 1 2.19-1.18 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>');
}

.icon-mail {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>');
}

.icon-map-pin {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin"><path d="M12 18.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="M12 22s8-4 8-10A8 8 0 0 0 4 12c0 6 8 10 8 10z"/></svg>');
}

.icon-calendar {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>');
}

.icon-download {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>');
}

.icon-clock {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>');
}

.icon-search {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');
}

.icon-users {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
}

.icon-briefcase {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>');
}

.icon-award {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award"><circle cx="12" cy="8" r="7"/><path d="M8.21 13.89 7 22l5-3 5 3-1.21-8.11"/></svg>');
}

.icon-external-link {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>');
}

.icon-check {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
}

.icon-chevron-down {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>');
}

.icon-arrow-right {
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-arrow-right'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
}

.icon-offer {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag w-6 h-6"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle></svg>')
}

.icon-video {
    mask-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path d="M4.421 0.591q0.243 0.155 0.489 0.305l0.091 0.056 0.184 0.114 0.447 0.275 0.538 0.331q0.443 0.272 0.885 0.546 0.464 0.288 0.929 0.572 0.534 0.328 1.068 0.658l0.929 0.572c0.715 0.439 0.715 0.439 1.067 0.658l0.401 0.247 0.095 0.058 0.181 0.111c0.581 0.356 1.04 0.696 1.264 1.36l0.021 0.06c0.131 0.44 0.056 0.926 -0.131 1.335l-0.035 0.078c-0.235 0.474 -0.668 0.732 -1.107 0.995l-0.251 0.151 -0.051 0.03a35.778 35.778 0 0 0 -0.429 0.264q-0.359 0.222 -0.719 0.44a63.778 63.778 0 0 0 -0.62 0.38q-0.359 0.222 -0.719 0.44a63.778 63.778 0 0 0 -0.62 0.38q-0.359 0.222 -0.719 0.44a64.556 64.556 0 0 0 -0.634 0.389 45.889 45.889 0 0 1 -0.576 0.352l-0.069 0.042 -0.065 0.039 -0.057 0.034c-0.173 0.1 -0.319 0.109 -0.519 0.085a0.646 0.646 0 0 1 -0.355 -0.328c-0.058 -0.186 -0.034 -0.337 0.04 -0.512 0.133 -0.194 0.353 -0.303 0.552 -0.419l0.185 -0.11 0.093 -0.055q0.187 -0.111 0.37 -0.227 0.336 -0.208 0.675 -0.414 0.336 -0.204 0.67 -0.41 0.359 -0.222 0.719 -0.44a63.778 63.778 0 0 0 0.62 -0.38q0.334 -0.207 0.67 -0.41a72.333 72.333 0 0 0 0.747 -0.458 31.111 31.111 0 0 1 0.38 -0.232l0.086 -0.052 0.164 -0.099c0.107 -0.065 0.211 -0.128 0.306 -0.209 0.068 -0.058 0.068 -0.058 0.122 -0.058l0.055 -0.11 0.029 -0.056c0.099 -0.206 0.137 -0.395 0.076 -0.619 -0.135 -0.375 -0.445 -0.523 -0.771 -0.718l-0.254 -0.153 -0.052 -0.032q-0.245 -0.149 -0.487 -0.302a55.222 55.222 0 0 0 -0.718 -0.443 70 70 0 0 1 -0.583 -0.358l-0.577 -0.355 -0.643 -0.397q-0.498 -0.309 -0.998 -0.615l-1.068 -0.658q-0.464 -0.287 -0.928 -0.572l-0.364 -0.224 -0.089 -0.055 -0.416 -0.258c-0.585 -0.398 -0.585 -0.398 -1.263 -0.502a0.786 0.786 0 0 0 -0.479 0.34 1.034 1.034 0 0 0 -0.127 0.52v1.082l-0.001 0.738v0.6l-0.001 1.7v0.185l-0.001 1.488 -0.001 1.528 -0.001 0.858v1.567c-0.002 0.355 0.03 0.616 0.258 0.897 0.189 0.156 0.366 0.224 0.612 0.215 0.138 -0.023 0.256 -0.083 0.383 -0.143a0.684 0.684 0 0 1 0.48 -0.017 0.7 0.7 0 0 1 0.325 0.363c0.025 0.201 0.017 0.358 -0.11 0.52 -0.19 0.226 -0.562 0.363 -0.848 0.41a3.889 3.889 0 0 1 -0.294 0.009l-0.081 -0.001a1.633 1.633 0 0 1 -0.555 -0.09l-0.068 -0.021c-0.465 -0.161 -0.815 -0.529 -1.038 -0.957 -0.191 -0.398 -0.211 -0.786 -0.211 -1.22v-0.85l-0.001 -0.735v-0.597l-0.001 -1.696v-0.185l-0.001 -1.482 -0.001 -1.523 -0.001 -0.855V2.238c-0.002 -0.606 0.085 -1.17 0.516 -1.626C2.369 -0.314 3.429 -0.044 4.422 0.591" fill="%23ffffff"/></svg>')
}

.icon-box {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package h-4 w-4"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path><path d="M12 22V12"></path><path d="m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7"></path><path d="m7.5 4.27 9 5.15"></path></svg>')
}

.icon-wrench {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench h-4 w-4"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>')
}
.icon-droplets {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplets h-4 w-4"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"></path></svg>')
}

.icon-office-phone {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-droplets h-4 w-4"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path><path d="M14.05 2a9 9 0 0 1 8 7.94"></path><path d="M14.05 6A5 5 0 0 1 18 10"></path></svg>')
}

.icon-bulb {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb h-4 w-4"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>')
}

.icon.grey-bg {
    background: var(--gray-400);
}

.icon.blue-bg {
    background: var(--daikin-blue);
}

.icon.white-bg {
    background: var(--white);
}

.icon.dark-bg {
    background: var(--gray-900);
}

.light-blue-bg {
    background: var(--daikin-light-blue);
}

main.pageMain {
    margin-top: var(--navbarHeight,169px);
}

@media (max-width: 1024px) {
    main.pageMain {
        margin-top: var(--navbarHeight, 108px);
    }
}

@media (max-width: 767px) {
    main.pageMain {
        margin-top: var(--navbarHeight, 80px);
    }
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem 1rem; /* default padding */
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    outline: none;
}

.button-primary {
    background-color: var(--daikin-blue);
    color: var(--white);
}

.button-primary:hover {
    background-color: var(--daikin-dark-navy);
    box-shadow: var(--shadow-md); /* subtle shadow on hover */
}

.button-white {
    background-color: var(--white);
    color: var(--daikin-blue);
}

.button-white:hover {
    background-color: var(--daikin-dark-navy);
    color: var(--white);
    box-shadow: var(--shadow-md); /* subtle shadow on hover */
}

.button-danger {
    background-color: var(--color-red-600);
    color: var(--white);
    border: 2px solid var(--color-red-600);
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    font-size: 1.125rem; /* text-lg */
    border-radius: 0.5rem; /* rounded-lg */
}

.button-danger:hover {
    background-color: var(--color-red-700);
    box-shadow: var(--shadow-lg);
}

.button-outline {
    background-color: transparent;
    border: 1px solid var(--daikin-blue);
    color: var(--daikin-blue);
}

.button-outline:hover {
    background-color: var(--daikin-blue);
    color: var(--white);
}

.button-icon {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
    margin-right: 0.5rem; /* mr-2 */
}

.button-danger .button-icon {
    width: 1.25rem; /* h-5 w-5 */
    height: 1.25rem;
}

.flamingo-button {
    /* Layout and positioning */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevents text from wrapping */
    gap: 0.5rem; /* Equivalent to gap-2, if you had an icon */
    /* Sizing and spacing */
    height: 2.5rem; /* Equivalent to h-10, though py-3 and text-lg will override this for height */
    padding: 0.75rem 2rem; /* Equivalent to px-8 py-3 */
    /* Text styling */
    font-size: 1.125rem; /* Equivalent to text-lg */
    font-weight: 500; /* Equivalent to font-medium */
    color: #002D58; /* A representative value for 'daikin-deep-blue'. Adjust if your specific color differs. */
    /* Border and shape */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    border: none; /* Remove default button border */
    cursor: pointer;
    /* Gradient background */
    background-image: linear-gradient(to right, #FF896B, var(--flamingo) ); /* from-[#FF896B] to-[#F14F27] */
    /* Transitions for smooth hover effects */
    transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    /* Focus outline (for accessibility) */
    outline: 2px solid transparent; /* focus-visible:outline-none */
    outline-offset: 2px; /* ring-offset-2 */
    box-shadow: 0 0 0 0px var(--ring-color, transparent), 0 0 0 0px var(--ring-offset-color, transparent); /* focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 */
}

.button .icon-external-link {
    margin-right: 0.5rem;
}

/* Hover state */
.flamingo-button:hover {
    background-image: linear-gradient(to right, #FF7A5A, #E63D1F); /* hover:from-[#FF7A5A] hover:to-[#E63D1F] */
}

.g-gradient-button {
    /* Layout and positioning */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Equivalent to gap-2 */
    white-space: nowrap; /* Prevents text from wrapping */
    /* Sizing and spacing */
    height: 2.75rem; /* Equivalent to h-11 */
    padding: 1rem 2rem; /* Equivalent to px-8 py-4 */
    /* Text styling */
    font-size: 1.125rem; /* Equivalent to text-lg */
    font-weight: 500; /* Equivalent to font-medium */
    color: #fff; /* Equivalent to text-white */
    /* Background gradient */
    background-image: var(--green-blue); /* from-[#33FF6C] to-[#318ADD] */
    /*opacity: 0.7;*/ /* Equivalent to opacity-70 */
    /* Border and shape */
    border: 0; /* Equivalent to border-0 */
    border-radius: 0.375rem; /* Equivalent to rounded-md */
    cursor: pointer;
    /* Transitions for smooth effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
    /* Focus outline (for accessibility) */
    outline: 2px solid transparent; /* focus-visible:outline-none */
    outline-offset: 2px; /* focus-visible:ring-offset-2 */
    box-shadow: 0 0 0 0px var(--ring-color, transparent), 0 0 0 0px var(--ring-offset-color, transparent); /* focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 */
}

/* Hover state for the button */
.g-gradient-button:hover {
    /* Hover gradient with opacity */
    background-image: linear-gradient(to right, rgba(51, 255, 108, 0.8), rgba(49, 138, 221, 0.8)); /* hover:from-[#33FF6C]/80 hover:to-[#318ADD]/80 */
    /* Hover shadow effect */
    box-shadow: 0 0 20px rgba(51, 255, 108, 0.3); /* hover:shadow-[0_0_20px_rgba(51,255,108,0.3)] */
}

/* Styles for the arrow icon inside the button */
.g-gradient-button svg {
    /* Transition for the transform effect */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-transform */
}

/* Group-hover effect on the icon (when the button is hovered) */
.g-gradient-button:hover svg {
    transform: translateX(0.25rem); /* Equivalent to group-hover:translate-x-1 */
}

.full-width-button {
    width: 100%;
}

.large-button {
    padding: 0.75rem 1.5rem; /* py-3 */
    font-size: 1.125rem; /* text-lg */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 600;
}

.full-width-link { /* For anchor tags acting as buttons */
    display: block;
    text-align: center;
}

.text-center:not(.mt-12):has(> .button) {
    text-align: center;
    margin: 2rem 0 0 0;
}

.button-group-container {
    display: flex;
    flex-direction: column; /* Equivalent to flex-col (default for mobile) */
    align-items: center; /* Equivalent to items-center */
    justify-content: center; /* Equivalent to justify-center */
    gap: 1rem; /* Equivalent to gap-4 (4 * 0.25rem = 1rem) */
    margin-top: 2rem;
}

@media (min-width: 640px) { /* sm breakpoint */
    .button-group-container {
        flex-direction: row; /* Equivalent to sm:flex-row */
    }
}

.styled-button,
.styled-button-link .styled-button { /* Apply styles to both button types */
    /* General button styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevents text from wrapping */
    /* Sizing and spacing */
    padding: 0.75rem 2rem; /* Equivalent to px-8 py-3 */
    /* Text styling */
    font-size: 0.875rem; /* Equivalent to text-sm */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #fff; /* Equivalent to text-white */
    /* Background and border */
    background-color: transparent; /* Equivalent to bg-transparent */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Equivalent to border border-white/30 */
    border-radius: 0.375rem; /* Equivalent to rounded-md (assuming Button component default) */
    cursor: pointer;
    /* Transitions for hover effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Equivalent to transition-all duration-300 */
    /* Resetting default button styles */
    outline: none;
    text-decoration: none; /* For the <a> tag acting as a button */
}

.styled-button:hover,
.styled-button-link .styled-button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Equivalent to hover:bg-white/10 */
    backdrop-filter: blur(4px); /* Equivalent to hover:backdrop-blur-md */
}


/* Desktop Floating Tabs */
.desktop-floating-tabs-wrapper {
    display: none; /* hidden */
    position: sticky;
    top: 7rem; /* top-36 */
    z-index: 25;
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    transition: opacity 0.2s ease-in-out;
    opacity: 1; /* opacity-100 */
    pointer-events: auto; /* pointer-events-auto */
    text-align: center; /* content center */
}

@media (min-width: 768px) {
    .desktop-floating-tabs-wrapper {
        display: block;
    }
    /* md:block */
}

.desktop-floating-tabs:not(.hidden) {
    opacity: 1;
    pointer-events: initial;
    transform: translateY(0px);
    transition: 0.3s ease;
}

.desktop-floating-tabs.hidden {
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    transform: translateY(10px);
}

.floating-tabs-container {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    background-color: rgba(255, 255, 255, 0.95); /* bg-white/95 */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    border-radius: 9999px; /* rounded-full */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    padding: 0.75rem 1rem; /* px-4 py-3 */
    margin: 0 auto; /* To center */
}

.floating-tab-button {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* space-x-2 */
    padding: 0.5rem 1.25rem; /* px-5 py-2 */
    border-radius: 9999px; /* rounded-full */
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-700);
    outline: none; /* Remove default focus outline */
}

.floating-tab-button .icon {
    background: var(--gray-700)
}

.floating-tab-button:focus {
    box-shadow: 0 0 0 2px var(--daikin-blue); /* focus:ring-2 focus:ring-daikin-blue */
    outline-offset: 2px; /* focus:ring-offset-2 */
}

.floating-tab-button:hover {
    background-color: var(--gray-100);
}

.floating-tab-button.active {
    background-color: var(--daikin-blue);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.floating-tab-button.active .icon {
    background: var(--white)
}

.floating-tab-button .tab-icon {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
}

.floating-tab-button .tab-label {
    font-size: 0.875rem; /* text-sm */
}

/* HOME PAGE */
.-sc-image {
    background: var(--sf-background-image);
    background-size: var(--sf-background-size);
    background-position: center;
    /*background-position-y: -3px;*/
}

.section-block.pdLg {
    padding-block: 5rem;
}

.text-section {
    text-align: center;
}

.text-section .button {
    margin: 2rem;
}

.section-block.bg-G-50 {
    background: var(--gray-50)
}

.section-block.bg-white {
    background: var(--white)
}

.section-block.bg-dark {
    background: var(--dark-blue)
}

.section-block.bg-blue {
    background: var(--daikin-blue)
}

.section-block.shade-flamingo {
    background: linear-gradient(to bottom right, #fef2f2, #fff7ed);
}

.section-block.shade-flamingo {
    background: linear-gradient(to bottom right, #fef2f2, #fff7ed);
}

.section-block.dark-overlay {
    position: relative;
}

.section-block.dark-overlay:before {
    content: '';
    inset: 0;
    position: absolute;
    background-color: #020617;
    background-image: linear-gradient(to bottom right, #020617f2, #020617cc);
    opacity: 0.9;
}

.section-block.dark-overlay .container {
    position: relative;
}

.section-block.lt-overlay {
    position: relative;
}

.section-block.lt-overlay:before {
    content: '';
    inset: 0;
    position: absolute;
    background-color: #ffffffb3;
    opacity: 1;
}

.section-block.lt-overlay .container {
    position: relative;
}


.bg-blue-gd.has-overlay {
    position: relative;
}

.bg-blue-gd.has-overlay:before {
    content: '';
    inset: 0;
    position: absolute;
    background: #ffffffe6;
}

.bg-blue-gd.has-overlay .container {
    position: relative;
}

.darkPintiles .values-card {
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.2); */
    background-color: rgba(0, 0, 0, 0.2); /* bg-black/20 */
    backdrop-filter: blur(12px); /* backdrop-blur-md */
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.5rem; /* p-6 */
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); /* border border-white/10 */
    overflow: hidden; /* Important for the glass overlay effect */
}

.darkPintiles .values-card-title {
    color: var(--white);
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    /* text-white */
    margin-bottom: 0.5rem; /* mb-2 */
    text-shadow: 0px 0px 1px var(--black);
}

/*.darkPintiles .values-card:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;*/ /* rounded-2xl */
    /*pointer-events: none;*/ /* Allows clicks to pass through to the card */
    /* This is a CSS gradient equivalent to bg-gradient-to-br from-white/5 to-transparent */
    /*background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}*/

/* NEW DESIGN ADDITION */

.darkPintiles .values-card:before {
    content: '';
    position: absolute;
    /* -inset-1 means top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem; */
    inset: -0.25rem;
    border-radius: 1rem; /* rounded-2xl */
    opacity: 0; /* opacity-0 */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transition-opacity duration-300 */
    pointer-events: none; /* pointer-events-none */
    background: var(--green-blue); /* bg-gradient-to-r from-[#33FF6C] to-[#318ADD] */
    filter: blur(0px); /* blur-md (Tailwind's blur-md is 12px) */
    z-index: -1; /* Place behind the main card content */
}

.darkPintiles .values-card:hover:before {
    opacity: 1; /* group-hover:opacity-20 */
}

.darkPintiles .values-card:hover .values-icon-wrapper {
    transform: scale(1.1);
    transform-origin: bottom;
    background: var(--white);
    transition: transform 0.3s linear;
}

.darkPintiles .values-card:hover .values-icon-wrapper img {
    filter: brightness(0) saturate(100%) invert(49%) sepia(70%) saturate(483%) hue-rotate(166deg) brightness(96%) contrast(91%);
    transform-origin: bottom;
}

/* NEW DESIGN ADDITION END */

.darkPintiles + .section-header-wrap {
    margin-top: 8rem;
}

.roots-block .values-icon-wrapper {
    width: 100%;
    max-width: 125px;
    height: 65px;
    border-radius: 0;
    background: transparent;
}

.roots-block .values-icon-wrapper img {
    width: 100%;
    height: 100%;
}

/* HOME PAGE END */


/* ABOUT US PAGE */
.expertise-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.header-text {
    text-align: center;
    margin-bottom: 4rem;
}

.main-heading h2 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--daikin-dark-navy);
    margin-bottom: 1rem;
}

.sub-heading {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

/* --- Card & Glassmorphism --- */
.card {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* --- Desktop Tabs --- */
.tabs-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 3rem;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tab-trigger {
    border: 1px solid transparent;
    background-color: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    white-space: normal;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    color: var(--gray-700);
}

.tab-trigger:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.tab-trigger.active {
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--daikin-blue);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border-color: rgba(0, 151, 211, 0.5);
}

.tab-content {
    display: none;
    animation: fadeInTab 0.4s;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

    .content-grid .text-content {
        order: 2;
    }

    .content-grid .image-content {
        order: 1;
    }

.expertise-section .content-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--daikin-dark-navy);
    margin-bottom: 1.5rem;
}

.expertise-section .content-paragraph {
    font-size: 1.125rem;
    color: var(--gray-700);
    line-height: 1.625;
}

.expertise-section .content-image {
    width: 100%;
    height: 20rem; /* h-80 */
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}


/* --- Mobile Accordion --- */
.accordion-item {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    overflow: hidden;
    border: none;
    margin-bottom: 0.5rem;
}

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

.accordion-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: var(--daikin-dark-navy);
    background: none;
    border: none;
    cursor: pointer;
}

    .accordion-trigger .icon {
        transition: transform 0.2s ease;
    }

.accordion-item.open .accordion-trigger .icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content-inner {
    padding: 0 1rem 1rem 1rem;
}

.accordion-content-inner .content-image {
    height: 8rem; /* reduced from 12rem */
    margin-bottom: 0.5rem;
}

/* DEALER FUNDS */

.business-tag {
    display: table;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--daikin-blue);
    color: #fff;
    margin: 0 auto 1rem auto;
    text-align: center;
}

/* DEALER FUNDS END */

/* --- Responsive Design --- */
@media (min-width: 768px) { /* Corresponds to Tailwind's 'md' breakpoint */
    .accordion-container {
        display: none;
    }
}

@media (max-width: 767px) {
    .tabs-container {
        display: none;
    }

    .expertise-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .header-text {
        margin-bottom: 1.25rem;
    }

    .main-heading h2 {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .sub-heading {
        font-size: 0.95rem;
    }

    .card {
        padding: 0.75rem;
    }

    .accordion-item {
        margin-bottom: 0.5rem;
    }

    .accordion-content-inner {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

        .accordion-content-inner .content-image {
            height: 7rem;
        }
}

@media (min-width: 1024px) { /* lg */
    .content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .content-grid .text-content {
            order: 1;
        }

        .content-grid .image-content {
            order: 2;
        }
}

@media (min-width: 640px) { /* sm */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .main-heading h2 {
        font-size: 3rem;
    }
}

/* --- Values Section --- */
.values-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--gray-50);
}

.values-container {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.values-header {
    text-align: center;
    margin-bottom: 4rem;
}

.values-eyebrow-wrapper {
    display: inline-block;
    margin-bottom: 1rem;
}

.values-eyebrow {
    color: var(--daikin-blue);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.values-main-heading h2 {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--daikin-dark-navy);
    margin-bottom: 1.5rem;
}

.values-sub-heading {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* --- Responsive Styles --- */
@media (min-width: 640px) {
    .values-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .values-main-heading h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .values-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .values-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    /* Hero Section */
    .page-hero-section {
        min-height: 60vh;
        padding-top: 9rem;
    }

    .page-hero-eyebrow-wrapper {
        margin-bottom: 1rem;
    }

    .page-hero-eyebrow {
        padding: 0.5rem 1.25rem;
        font-size: 0.75rem;
    }

    .page-hero-heading {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .page-hero-subheading {
        font-size: 1.125rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .page-hero-paragraph {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    /* STRONGER TOGETHER Section */
    .expertise-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .header-text {
        margin-bottom: 1.25rem;
    }

    .main-heading {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .sub-heading {
        font-size: 0.95rem;
    }

    .card {
        padding: 0.75rem;
    }

    .accordion-item {
        margin-bottom: 0.5rem;
    }

    .accordion-content-inner {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }

        .accordion-content-inner .content-image {
            height: 7rem;
        }

    /* Perfect Air Section */
    .perfect-air-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .perfect-air-heading {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .perfect-air-paragraph {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .perfect-air-content-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Values Section */
    .values-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .values-header {
        margin-bottom: 1.5rem;
    }

    .values-main-heading {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .values-sub-heading {
        font-size: 0.95rem;
    }

    .values-grid {
        gap: 1rem;
    }

    .values-card {
        padding: 1rem;
    }

    .values-icon-wrapper {
        width: 2.5rem;
        height: 2.5rem;
    }

    .values-card-title {
        font-size: 1rem;
    }

    .values-card-text {
        font-size: 0.95rem;
    }

    /* Vision Section */
    .vision-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .vision-header {
        margin-bottom: 1.25rem;
    }

    .vision-main-heading {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .vision-sub-heading {
        font-size: 0.95rem;
    }

    .vision-content-text-inner {
        padding: 1rem;
    }

    .vision-content-paragraph {
        font-size: 0.95rem;
    }

    /* Testimonial Section */
    .testimonial-showcase-section {
        padding: 1.5rem 0;
    }

    .testimonial-header {
        margin-bottom: 1rem;
    }

    .testimonial-main-heading {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .testimonial-sub-heading {
        font-size: 0.95rem;
    }

    .testimonial-card {
        padding: 0.75rem;
    }

    .card-quote {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .card-author-info {
        padding-top: 0.5rem;
    }

    .author-name {
        font-size: 1rem;
    }

    .author-title, .author-location {
        font-size: 0.85rem;
    }

    /* Local Expert Section */
    .local-expert-section {
        padding: 1.5rem 0;
    }

    .local-expert-heading {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .local-expert-paragraph {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .local-expert-image {
        border-radius: 0.5rem;
    }

    /* CTA Banner Section */
    .cta-banner-section {
        padding: 2rem 0;
    }

    .cta-banner-heading {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }

    .cta-banner-subheading {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .cta-banner-content {
        padding: 0 0.5rem;
    }

    .cta-banner-button {
        font-size: 1rem;
        padding: 0.5rem 1.25rem;
        height: 2.25rem;
    }
}

/* ABOUT US PAGE END */

/* CONTACT PAGE */

.desktop-floating-tabs + .section-block {
    padding-top: 3rem;
}

/* Section Blocks */
.section-block {
    padding-left: 0rem; /* px-2 */
    padding-right: 0rem; /* px-2 */
    padding-block: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

@media (min-width: 768px) {
    .section-block {
        padding-left: 0; /* md:px-0 */
        padding-right: 0; /* md:px-0 */
        gap: 2rem; /* md:space-y-8 */
    }
}

@media (max-width: 767px) {
    .-sc-image#products-section {
        background-position: inherit;
    }
}

.section-border-top {
    padding-top: 3rem; /* pt-12 */
    border-top: 1px solid var(--gray-200);
}

@media (min-width: 768px) {
    .section-border-top {
        padding-top: 4rem;
    }
    /* md:pt-16 */
}

.section-header {
    text-align: center;
    margin-bottom: 2rem; /* mb-8 */
}

.section-title h2, .section-title:not(:has(h2)) {
    font-size: 1.875rem; /* text-3xl */
    color: var(--daikin-dark-navy);
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 500;
}

.section-title.font-bold h2, .section-title.font-bold:not(:has(h2)) {
    font-weight: 700;
}

.section-title.h1Style h2, .section-title.h1Style:not(:has(h2)) {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
}

.section-title.section-title--md h2 {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.section-description {
    color: var(--gray-600);
    font-weight: 400;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

.section-title + .section-description {
    text-align: center;
}

.section-title + .section-description {
    text-align: center;
}

.section-description.section-description--md {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.section-description.section-description--lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.section-description.section-description--lg {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.section-description.max-width-text {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-title.large-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600;
}

@media (min-width: 1024px) {
    .section-title.large-title {
        font-size: 2.25rem;
    }
    /* lg:text-4xl */
}

.section-description.large-description {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 2rem; /* mb-8 */
}

.card-main-title {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 500;
}

.card-description {
    font-weight: 400;
}

/* Info Card General Styles (Used for Headquarters, Credit, Technical Support, Showroom, Subscription Form) */
.info-card {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); /* shadow-sm on form, others no shadow initially */
    padding: 1.5rem; /* p-6 */
    transition: box-shadow 0.15s ease-in-out;
    width: 100%;
}

.info-card.headquarters-card {
    background-color: rgba(0, 0, 0, 0.3); /* bg-black/30 */
    backdrop-filter: blur(8px); /* backdrop-blur-md */
    border-color: rgba(255, 255, 255, 0.2); /* border-white/20 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 1.5rem; /* p-6 */
    box-shadow: var(--shadow-2xl);
    max-width: 28rem; /* max-w-md */
    color: var(--white);
    text-align: center;
}

.info-card .button {
    margin-top: auto;
}

.info-card .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .info-card.headquarters-card {
        padding: 2rem;
    }
    /* md:p-8 */
}

.info-card:hover {
    box-shadow: var(--shadow-lg);
}

.info-card-title {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 600;
}

@media (min-width: 768px) {
    .info-card-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }
    /* md:text-xl md:mb-6 */
}

.info-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
}

@media (min-width: 768px) {
    .info-card-body {
        gap: 1rem;
    }
    /* md:space-y-4 */
}

.card-text-center {
    text-align: center;
    margin-bottom: 0.75rem; /* mb-3 */
}

@media (min-width: 768px) {
    .card-text-center {
        margin-bottom: 1rem;
    }
    /* md:mb-4 */
}

.card-subtitle {
    font-size: 1rem; /* text-base */
    font-weight: 500;
}

@media (min-width: 768px) {
    .card-subtitle {
        font-size: 1.125rem;
    }
    /* md:text-lg */
}

.info-item {
    display: flex;
    align-items: flex-start; /* items-start */
    font-size: 0.875rem; /* text-sm */
    color: var(--white); /* for headquarters card */
}

.info-item.align-center {
    align-items: center;
}

.info-icon {
    width: 1.25rem; /* h-5 w-5 */
    height: 1.25rem;
    margin-right: 0.75rem; /* mr-3 */
    margin-top: 0.25rem; /* mt-1 */
    flex-shrink: 0;
}

.info-item.align-center .info-icon {
    margin-top: 0;
}

.info-address p {
    font-weight: 400;
}

.info-phone-link {
    font-size: 1rem; /* text-base */
    font-weight: 500;
}

@media (min-width: 768px) {
    .info-phone-link {
        font-size: 1.125rem;
    }
    /* md:text-lg */
}

/* Showroom Section */
.showroom-section-bg {
    background-color: var(--daikin-dark-navy);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem; /* p-8 */
}

@media (min-width: 768px) {
    .showroom-section-bg {
        padding: 3rem;
    }
    /* md:p-12 */
}

@media (max-width: 767px) {
    .showroom-section-bg {
        padding: 2rem 0.5rem;
    }
    /* md:p-12 */
}

.showroom-location-card {
    background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    border-color: rgba(255, 255, 255, 0.2); /* border-white/20 */
    color: var(--white);
}

.calendar-widget {
    margin-top: 2rem;
    border-radius: 0.75rem 12px;
    overflow: hidden;
}

/* Career Option Cards */
.career-option-card {
    text-align: center;
}

    .career-option-card .icon-large {
        width: 3rem; /* h-12 w-12 */
        height: 3rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem; /* mb-4 */
    }

/* Emergency Helpline Section */
.emergency-helpline-card {
    background-color: var(--daikin-dark-navy);
    color: var(--white);
    padding: 1.5rem; /* p-6 */
}

.emergency-helpline-card .button {
    margin-bottom: 1rem;
}

.emergency-helpline-card .icon-super-large {
    width: 4rem; /* h-16 w-16 */
    height: 4rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem; /* mb-4 */
    color: var(--white);
}

.emergency-phone-number {
    font-size: 1.875rem; /* text-3xl */
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 500;
}

.emergency-instructions {
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 1rem; /* mb-4 */
    font-weight: 400;
}

.emergency-details-box {
    background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    text-align: left;
}

.details-title {
    margin-bottom: 0.75rem; /* mb-3 */
    font-weight: 500;
}

.details-list {
    list-style-type: decimal;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* space-y-1 */
    font-weight: 400;
    color: var(--white); /* for emergency card */
}

    .details-list.ordered-list {
        color: var(--gray-600); /* for tech support */
        gap: 0.5rem; /* space-y-2 */
    }

/* Technical Support Section */
.tech-support-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 */
}

.email-support-box {
    background-color: var(--daikin-light-blue); /* bg-blue-50 - changed to daikin-light-blue as it's a closer visual match */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    margin-top: auto;
}

.email-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem; /* mb-2 */
}

.email-title {
    font-weight: 500;
}

.email-link {
    color: var(--daikin-blue);
    font-weight: 400;
    word-break: break-all;
}

    .email-link:hover {
        text-decoration: underline;
    }

/* Credit Department Section */
.contact-info-details {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

.address-block p {
    font-weight: 400;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
    margin-bottom: 1rem;
}

.contact-methods .info-item .icon {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
}

.info-link {
    font-weight: 400;
}

.contact-methods :is(.info-link, .info-text) {
    color: #000000;
    transition: 0.3s linear;
    display: flex;
    align-items: center;
}

.contact-methods .info-link:hover {
    color: var(--daikin-blue);
    transition: 0.3s linear;
}

--daikin-blue

.icon-text {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.tax-credit-card {
    background-image: linear-gradient(to bottom right, var(--gray-50), var(--daikin-light-blue)); /* from-green-50 to-blue-50, using updated variables */
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
}

.tax-credit-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 */
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 1rem 0;
}

.tax-credit-list .info-item {
    align-items: center;
    font-weight: 400;
    color: inherit; /* Inherit from parent card */
}

.bullet-point {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    background-color: var(--daikin-blue);
    border-radius: 9999px; /* rounded-full */
    margin-right: 0.75rem; /* mr-3 */
}

/* Stay in Touch (Subscription) Section */
.grid-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; /* gap-12 */
    align-items: flex-start; /* items-start */
}

@media (min-width: 1024px) {
    .grid-layout-sidebar {
        grid-template-columns: 2fr 3fr;
    }
    /* lg:grid-cols-5 lg:col-span-2 & lg:col-span-3 */
}
@media (max-width: 767px) {
    .grid-layout-sidebar {
        grid-template-columns: repeat(1, 100%);
    }
    /* lg:grid-cols-5 lg:col-span-2 & lg:col-span-3 */
}

.sidebar-content {
    padding: 0rem; /* px-4 */
}

.sidebar-content .section-description {
    padding-left: 0;
}

@media (min-width: 768px) {
    .sidebar-content {
        padding: 0;
    }
    /* md:px-0 */
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 0;
    color: var(--gray-600);
    font-weight: 400;
}

.feature-item {
    display: flex;
    align-items: flex-start; /* items-start */
}

.feature-icon {
    width: 1.25rem; /* h-5 w-5 */
    height: 1.25rem;
    margin-right: 0.75rem; /* mr-3 */
    margin-top: 0.125rem; /* mt-0.5 */
    flex-shrink: 0;
}

/* Mobile Bottom Navigation (formerly mobile-floating-nav) */
.mobile-bottom-nav {
    display: none; /* md:hidden (hidden by default, JS controls visibility) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30; /* z-30 */
    opacity: 0; /* opacity-0 */
    pointer-events: none; /* pointer-events-none */
    transition: opacity 0.2s ease-in-out; /* transition-opacity duration-200 ease-in-out */
}

/* Show on small screens */
@media (max-width: 767px) { /* md:hidden breakpoint */
    .mobile-bottom-nav {
        display: block;
    }
}

/* State for JS-controlled visibility */
.mobile-bottom-nav:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav-wrapper {
    background-color: rgba(255, 255, 255, 0.95); /* bg-white/95 */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    box-shadow: var(--shadow-lg); /* shadow-lg */
    border-top: 1px solid var(--gray-200); /* border-t border-gray-200 */
    padding: 0.75rem 0.5rem; /* px-2 py-3 */
}

.mobile-nav-content {
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: space-between; /* justify-between */
    max-width: 28rem; /* max-w-md */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    gap: 5px;
}

.mobile-nav-item {
    /* Base button styles from ShadCN variant="ghost" & size="sm" */
    display: flex;
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
    gap: 0.25rem; /* gap-1 */
    padding: 0.25rem; /* p-3 */
    height: auto; /* h-9 (from ShadCN size="sm") - this value needs adjustment for content size */
    flex: 1; /* flex-1 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.2s ease-in-out; /* transition-all duration-200 */
    background: none; /* variant="ghost" implies no background by default */
    border: none;
    cursor: pointer;
    outline: none; /* focus:outline-none */
    color: var(--gray-700); /* text-gray-700 */
    /* Remove text-sm and font-medium here, apply to label below */
    white-space: nowrap; /* whitespace-nowrap */
}

/* Adjust button height to fit content better, or keep h-9 if preferred */
.mobile-nav-item {
    min-height: auto; /* Adjust as needed, h-9 is too small with icon+text */
    justify-content: center; /* Center content vertically */
    padding: 5px 10px;
}

.mobile-nav-item .icon {
    background: var(--gray-900);
}


/* Focus state (mimicking ShadCN focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2) */
.mobile-nav-item:focus-visible { /* Use :focus-visible for better accessibility */
    box-shadow: 0 0 0 2px var(--daikin-blue), /* focus:ring-2 focus:ring-daikin-blue */
    0 0 0 4px var(--gray-200); /* A simple way to represent ring-offset-2 */
}

/* Hover state */
.mobile-nav-item:hover {
    background-color: var(--gray-100); /* hover:bg-gray-100 */
    color: var(--gray-900); /* Usually hover:text-accent-foreground means a slightly darker text */
}

/* Active state */
.mobile-nav-item.active {
    background-color: var(--daikin-blue); /* bg-daikin-blue */
    color: var(--white); /* text-white */
    box-shadow: var(--shadow-md); /* shadow-md */
}

.mobile-nav-item.active .icon {
    background: var(--white);
}

.mobile-nav-icon {
    width: 1rem; /* h-4 w-4 */
    height: 1rem;
    color: currentColor; /* Inherit color from parent button */
    /* [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 */
    pointer-events: none; /* important for preventing click events on SVG itself */
    flex-shrink: 0;
}

.mobile-nav-label {
    font-size: 0.65rem; /* text-xs */
    font-weight: 500; /* font-medium */
}



/* CONTACT PAGE END */

.full-width {
    width: 100%;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    height: 3rem; /* h-11 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: var(--daikin-blue);
    color: white;
    padding: 1rem 2rem; /* px-8 py-4 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-medium */
    border: none;
    cursor: pointer;
}

.primary-button:hover {
    background-color: var(--daikin-dark-navy);
}

.primary-button-icon {
    margin-left: 0.5rem;
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    transition: transform 0.3s ease;
}

.primary-button:hover .primary-button-icon {
    transform: translateX(4px);
}

/* Custom Select/Dropdown Styles */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    height: 2.25rem;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

    .custom-select-trigger.outline-variant {
        background-color: var(--white);
        border-color: var(--gray-200);
    }

.custom-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-panel.open {
    display: block;
}

.custom-select-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.custom-select-option:hover {
    background-color: rgba(0, 114, 206, 0.1);
}

.custom-select-option.selected {
    font-weight: 600;
    color: var(--daikin-blue);
}

/* Custom scrollbar */
.results-scroll-container::-webkit-scrollbar, .custom-select-panel::-webkit-scrollbar {
    width: 6px;
}

.results-scroll-container::-webkit-scrollbar-track, .custom-select-panel::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
}

.results-scroll-container::-webkit-scrollbar-thumb, .custom-select-panel::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 3px;
}

.results-scroll-container::-webkit-scrollbar-thumb:hover, .custom-select-panel::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Icons */
.icon {
    height: 1.25rem;
    width: 1.25rem;
    display: inline-block;
    vertical-align: middle;
}

.icon-xs {
    height: 0.75rem;
    width: 0.75rem;
}

.icon-daikin-blue {
    color: var(--daikin-blue);
}

.icon-sm {
    height: 1rem;
    width: 1rem;
}

#sort-dropdown-trigger .icon-sm {
    transition: transform 0.2s;
}

#sort-dropdown-trigger.open .icon-sm {
    transform: rotate(180deg);
}

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

    .custom-select-container {
        width: 10rem;
    }
}

.bg-green-100 {
    background-color: var(--green-100);
    color: var(--green-700);
}

.bg-orange-100 {
    background-color: var(--orange-100);
    color: var(--orange-700);
}

.bg-red-100 {
    background-color: var(--red-100);
    color: var(--red-700);
}

.modal-directions-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-family: var(--font-poppins);
    font-size: 0.875rem;
    background: var(--daikin-blue);
    border-radius: .5rem;
    padding: .25rem .5rem;
    text-decoration: none !important;
    color: #fff;
    transition: 0.3s ease;
}

.modal-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.modal-directions-btn:hover {
    color: var(--white);background: var(--daikin-dark-navy);
}

.error-message {
    color: #e53935;
    font-size: 1rem;
    margin-top: 6px;
    margin-bottom: 0;
    min-height: 1.25em;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: block;
}

/* REFRIGERATION PAGE */

.browse-tag {
    display: table;
    background-color: var(--flamingo); /* Approximate for hsl(var(--flamingo-orange)) */
    color: var(--white);
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    margin: 0 auto;
    margin-bottom: 1rem; /* mb-4 */
}

/* info accordion */

/* --- Info Accordion Wrapper --- */
.info-accordion-wrapper {
    width: min(100%, 820px); /* Equivalent to w-full */
    margin: 0 auto;
}

/* --- Info Accordion Item --- */
.info-accordion-item {
    background-color: #fff; /* Equivalent to bg-white */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-lg */
    border-left: 4px solid #ef4444; /* Equivalent to border-l-4 border-red-500 */
    overflow: hidden; /* Ensures content is clipped during transition */
}

/* --- Info Accordion Trigger --- */
.info-accordion-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between; /* Pushes chevron to the right */
    padding: 1rem 1.5rem; /* Equivalent to px-6 py-4 */
    text-align: left; /* Equivalent to text-left */
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease; /* For hover effect */
}

    .info-accordion-trigger:hover {
        text-decoration: none; /* Equivalent to hover:no-underline */
        background-color: #f8f8f8; /* Subtle hover background */
    }

.info-accordion-trigger-content {
    display: flex;
    align-items: center;
    text-align: left; /* Ensure text remains left-aligned within flex item */
}

.info-accordion-icon {
    height: 1.5rem; /* Equivalent to h-6 */
    width: 1.5rem; /* Equivalent to w-6 */
    color: #ef4444; /* Equivalent to text-red-500 */
    margin-right: 0.75rem; /* Equivalent to mr-3 */
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.info-accordion-title {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: #1f2937; /* Equivalent to text-gray-800 */
}

.info-accordion-subtitle {
    font-size: 0.875rem; /* Equivalent to text-sm */
    color: #4b5563; /* Equivalent to text-gray-600 */
    margin-top: 0.25rem; /* Equivalent to mt-1 */
}

.info-accordion-chevron {
    width: 1.25rem; /* Equivalent to h-5 w-5 */
    height: 1.25rem;
    transition: transform 0.3s ease; /* For smooth rotation */
}

/* Rotate chevron when accordion item is open */
.info-accordion-item.is-open .info-accordion-chevron {
    transform: rotate(180deg);
}

/* --- Info Accordion Content --- */
.info-accordion-content {
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Smooth collapse/expand transition */
}

/* When accordion item is open, set max-height to allow content to show */
.info-accordion-item.is-open .info-accordion-content {
    max-height: 1000px; /* Large enough value to cover expected content height */
    transition: max-height 0.5s ease-in-out; /* Slightly longer transition for expansion */
}

.info-accordion-content-inner {
    padding: 0.5rem 1.5rem 1rem 1.5rem; /* Equivalent to px-6 pb-4 pt-2 */
}

/* --- Inner Content Spacing (space-y-3) --- */
.info-accordion-content-section-spacing {
    /* Mimics space-y-3 */
}

    .info-accordion-content-section-spacing > *:not(:last-child) {
        margin-bottom: 0.75rem; /* Equivalent to space-y-3 (3 * 0.25rem = 0.75rem) */
    }

.info-accordion-content-heading {
    font-weight: 600; /* Equivalent to font-semibold */
    color: #1f2937; /* Equivalent to text-gray-800 */
    margin-bottom: 0.25rem; /* Equivalent to mb-1 */
}

.info-accordion-content-paragraph {
    color: #4b5563; /* Equivalent to text-gray-600 */
    font-size: 0.875rem; /* Equivalent to text-sm */
    line-height: 1.5; /* Equivalent to leading-snug (Tailwind default) */
}

.info-accordion-impact-list {
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 0;
    color: #4b5563; /* Equivalent to text-gray-600 */
    font-size: 0.875rem; /* Equivalent to text-sm */
    /* Mimics space-y-0.5 */
}

    .info-accordion-impact-list li:not(:last-child) {
        margin-bottom: 0.125rem; /* Equivalent to space-y-0.5 */
    }

.info-accordion-mb-2 { /* Specific margin for last paragraph before button */
    margin-bottom: 0.5rem; /* Equivalent to mb-2 */
}

/* --- Call to Action Button --- */
.info-accordion-cta-area {
    padding-top: 0.25rem; /* Equivalent to pt-1 */
}

.info-accordion-contact-button {
    background-color: #dc2626; /* Equivalent to bg-red-600 */
    color: #fff; /* Equivalent to text-white */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem; /* Equivalent to px-6 py-3 */
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    font-weight: 600; /* Equivalent to font-semibold */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* Transition-colors */
}

.info-accordion-contact-button:hover {
    background-color: #b91c1c; /* Equivalent to hover:bg-red-700 */
}

.info-accordion-contact-icon {
    height: 1rem; /* Equivalent to h-4 */
    width: 1rem; /* Equivalent to w-4 */
    margin-right: 0.5rem; /* Equivalent to mr-2 */
    stroke: currentColor;
}

/* info accordion end */

/* financing section */

/* --- Responsive Grid Layout --- */
.financing-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on smaller screens */
    gap: 3rem; /* Equivalent to gap-12 */
    align-items: center; /* Equivalent to items-center */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .financing-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to lg:grid-cols-2 */
    }
}

/* --- Column Ordering --- */
/* Default order for mobile (order-1 for right content, order-2 for left image) */
.financing-image-column {
    order: 2; /* Equivalent to order-2 on mobile */
}

.financing-content-column {
    order: 1; /* Equivalent to order-1 on mobile */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .financing-image-column {
        order: 1; /* Equivalent to lg:order-1 */
    }

    .financing-content-column {
        order: 2; /* Equivalent to lg:order-2 */
    }
}

/* --- Image Placeholder --- */
.financing-image-placeholder {
    height: 20rem; /* Equivalent to h-80 (80 * 0.25rem = 20rem) */
    background-color: #e5e7eb; /* Equivalent to bg-gray-200 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem; /* For a subtle rounded look */
    overflow: hidden;
}

.financing-placeholder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.financing-placeholder-text {
    color: #6b7280; /* Equivalent to text-gray-500 */
}

/* --- Content Column --- */
.financing-title {
    font-size: 1.5rem; /* Equivalent to text-2xl */
    font-weight: 700; /* Equivalent to font-bold */
    /* Using a direct hex value for daikin-blue. Adjust if your variable is different. */
    color: var(--daikin-blue); /* Corresponds to hsl(var(--daikin-blue)) */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

.financing-description {
    font-size: 1.125rem; /* Equivalent to text-lg */
    color: var(--gray-600); /* Equivalent to text-gray-600 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

/* --- List Styling --- */
.financing-list {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
    color: var(--gray-600); /* Equivalent to text-gray-600 */
    /* Mimics space-y-3 */
}

    .financing-list li:not(:last-child) {
        margin-bottom: 0.75rem; /* Equivalent to space-y-3 */
    }

.financing-list-item {
    display: flex;
    align-items: flex-start; /* Aligns text with bullet at the top */
}

.financing-bullet {
    /* Using a direct hex value for daikin-blue. Adjust if your variable is different. */
    color: var(--daikin-blue); /* Corresponds to hsl(var(--daikin-blue)) */
    margin-right: 0.5rem; /* Equivalent to mr-2 */
    flex-shrink: 0; /* Prevents the bullet from shrinking */
}

/* financing section */

/* industry section */

/* --- Main Grid Layout --- */
.refrigeration-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on smaller screens */
    gap: 3rem; /* Equivalent to gap-12 */
    align-items: center; /* Equivalent to items-center */
}

@media (min-width: 1024px) { /* lg breakpoint */
    .refrigeration-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to lg:grid-cols-2 */
    }
}

@media (max-width: 767px) {
    .refrigeration-grid {
        gap: 1rem; /* Equivalent to gap-12 */
    }
}

/* --- Left Column: Content Styling --- */
.refrigeration-content-column {
    /* Implicitly takes 1fr */
}

.refrigeration-title {
    font-size: 1.875rem; /* Equivalent to text-3xl */
    font-weight: 700; /* Equivalent to font-bold */
    color: var(--daikin-blue); /* Representative value for hsl(var(--daikin-blue)) */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
}

.refrigeration-description {
    font-size: 1.125rem; /* Equivalent to text-lg */
    color: var(--gray-600); /* Equivalent to text-gray-600 */
    line-height: 1.625; /* Equivalent to leading-relaxed */
    margin-bottom: 2rem; /* Equivalent to mb-8 */
}

/* --- Two Side-by-Side Feature Cards --- */
.feature-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 1rem; /* Equivalent to gap-4 */
}

@media (min-width: 768px) { /* md breakpoint */
    .feature-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Equivalent to md:grid-cols-2 */
    }
}

.feature-card {
    padding: 1.5rem; /* Equivalent to p-6 */
    border-radius: 0.75rem; /* Equivalent to rounded-xl */
    border: 1px solid; /* For the border-transparent part */
    /* Common styles for all feature cards, specific colors via feature-card-blue/orange */
}

.feature-card-blue {
    background: linear-gradient(to bottom right, rgba(0, 94, 184, 0.05), rgba(0, 94, 184, 0.1)); /* bg-gradient-to-br from-[hsl(var(--daikin-blue))]/5 to-[hsl(var(--daikin-blue))]/10 */
    border-color: rgba(0, 94, 184, 0.2); /* border-[hsl(var(--daikin-blue))]/20 */
}

.feature-card-orange {
    background: linear-gradient(to bottom right, #fff7ed, #ffe8cc); /* bg-gradient-to-br from-orange-50 to-orange-100 */
    border-color: #fed7aa; /* border-orange-200 */
}

.feature-card-inner {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem; /* Equivalent to mb-3 */
}

.feature-icon-wrapper {
    /* The original classes were directly on the icon, no wrapper */
    /* h-6 w-6 text-[hsl(var(--daikin-blue))] mr-2 for icon */
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.feature-icon {
    height: 1.5rem; /* Equivalent to h-6 */
    width: 1.5rem; /* Equivalent to w-6 */
    margin-right: 0.5rem; /* Equivalent to mr-2 */
    stroke: currentColor; /* For SVGs */
}

/* Specific icon colors, assuming primary Daikin blue for the blue card and orange for the orange card */
.feature-card-blue .feature-icon {
    color: #005EB8; /* text-[hsl(var(--daikin-blue))] */
}

.feature-card-orange .feature-icon {
    color: #ea580c; /* text-orange-600 */
}

.feature-card-title {
    font-size: 1.125rem; /* Equivalent to text-lg */
    font-weight: 600; /* Equivalent to font-semibold */
    color: #1f2937; /* Equivalent to text-gray-800 */
}

.feature-card-description {
    font-size: 0.875rem; /* Equivalent to text-sm */
    color: #4b5563; /* Equivalent to text-gray-600 */
}

/* --- Right Column: Industries Styling --- */
.refrigeration-industries-column {
    background: linear-gradient(to bottom right, #f9fafb, #ffffff); /* bg-gradient-to-br from-gray-50 to-white */
    padding: 2rem; /* Equivalent to p-8 */
    border-radius: 1rem; /* Equivalent to rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-lg */
    border: 1px solid #e5e7eb; /* Equivalent to border border-gray-100 */
}

.industries-title {
    font-size: 1.25rem; /* Equivalent to text-xl */
    font-weight: 600; /* Equivalent to font-semibold */
    color: var(--gray-800); /* Equivalent to text-gray-800 */
    margin-bottom: 1.5rem; /* Equivalent to mb-6 */
    text-align: center;
}



/* AER Disclaimer Section  */
.aer-disclaimer-section {
    padding: 2rem 0;
    background-color: white;
    border-top: 1px solid #e5e7eb;
}

.aer-section-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.aer-disclaimer-header {
    text-align: center;
    margin-bottom: 1rem;
}

.aer-disclaimer-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

.disclaimer-content {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.625;
    text-align: left;
}
.disclaimer-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.disclaimer-content p:last-child {
    margin-bottom: 0;
}

/* This container is hidden by default using max-height */
#disclaimer-more-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

/* This class is toggled by JS to show the content */
#disclaimer-more-content.is-visible {
    max-height: 1000px; /* A value larger than the content's actual height */
}

.disclaimer-footer {
    margin-top: 1rem;
    text-align: center;
}

.disclaimer-content .read-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    color: #374151;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.disclaimer-content .read-more-btn:hover {
    background-color: #e5e7eb;
}

.aer-container {
    max-width: 600px;
    margin: 60px auto;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: center;
}

.aer-title {
    font-size: 2.5rem;
    color: #0072ce;
    margin-bottom: 1rem;
    font-weight: 700;
}

.aer-description {
    font-size: 1.2rem;
    color: #374151;
    margin-bottom: 0;
}


@media (min-width: 1024px) {
    .aer-expert-section .team-members-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.aer-expert-section .button-primary {
    margin-top: 2rem;
}

.aer-expert-section .container {
    text-align: center;
}

.aer-expert-section  .main-heading {
    margin-bottom: 2rem;
}

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

.partner-section {
    position: relative;
    padding: 4rem 0;
    background-image: url('/images/default-source/page-libraries/aer/aer_partner_bg.png');
    background-size: cover;
    background-position: center;
}

.partner-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(2, 6, 23, 0.8);
    z-index: 1;
}

.partner-section-container {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.partner-section-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 3rem;
    align-items: start;
}

.partner-text-content > *:not(:first-child) {
    margin-top: 2rem;
}

.partner-section .section-paragraphs > *:not(:first-child) {
    margin-top: 1rem;
}

.partner-section .section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
   
    font-family: 'Poppins', sans-serif; 
}

.partner-section .section-paragraph {
    color: white;
    font-size: 1.125rem;
    line-height: 1.625;
}

.partner-section .section-paragraph.muted {
    color: rgba(255, 255, 255, 0.9);
}

/* --- Right Column: Info Cards --- */
.partner-section .partner-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}

.partner-section .values-card {
    height: 16rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background: linear-gradient(141deg, rgba(51, 255, 108, 0.7) -0.13%, rgb(0, 151, 224) 66.58%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.partner-section .values-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    width: 4rem;
    height: 4rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}

.partner-section .info-card-icon {
    width: 2rem;
    height: 2rem;
    color: white;
    transition: color 0.3s;
}

.partner-section .values-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
    transition: color 0.3s;
}

.partner-section .values-card-text {
    font-size: 0.875rem;
    line-height: 1.625;
    color: white;
    transition: color 0.3s;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

.disclaimerSection[data-show-disclaimer="false"]:not(.sf-zone-widget) {
    display: none;
}

@media (min-width: 640px) {
    .partner-section-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .partner-section .partner-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .partner-section .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .partner-section-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .partner-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
/*    body:has(.mobile-bottom-nav) .footer {
        padding-bottom: 6rem;
    }*/
    .section-block.pdLg {
        padding-block: 3rem;
    }
    .section-title h2, .section-title:not(:has(h2)) {
        line-height: 2.5rem;
        font-size: 1.75rem;
    }
    .darkPintiles + .section-header-wrap {
        margin-top: 3rem;
    }
    .section-title.section-title--md h2 {
        font-size: 1.875rem;
    }
    .mobile-order-2 {
        order: 2;
    }
    .mobile-order-1 {
        order: 1;
    }
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
    .section-header h2 {
        font-size: 1.25rem;
    }
    .gradient-long-cards.grid-3-350 {
        display: flex;
        flex-direction: column;
    }
}


/* Residential HVAC Solutions */

/* Main Section Styles */
.residential-hvac-solutions-comfort-section {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow: hidden;
    /* Background image is applied here */
    background-image: url('/images/default-source/products-and-services/residential_hvac_bg.jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Creates a parallax effect */
}

/* Dark Overlay using a pseudo-element */
.residential-hvac-solutions-comfort-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.8); /* slate-900/80 */
    z-index: 1;
}

/* Content Container */
.residential-hvac-solutions-content-container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.residential-hvac-solutions-header {
    text-align: center;
    margin-bottom: 1rem;
}

.residential-hvac-solutions-header h2 {
    font-weight: 700;
    font-size: 1.55rem;
    color: white;
    margin-bottom: 1rem;
}

.residential-hvac-solutions-header p {
    font-size: 1rem;
    color: #cbd5e1; /* slate-300 */
    max-width: 42rem;
    margin: 0 auto;
}

/* Grids for Solution Cards */
.residential-hvac-solutions-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.residential-hvac-solutions-grid-container-secondary {
        display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Solution Card Styles */
.residential-hvac-solutions-solution-card {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem;
    text-align: center;
    color: white;
    height: 16rem; /* h-64 */
    transition: all 0.3s ease;
    cursor: pointer;
}

.residential-hvac-solutions-solution-card:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.residential-hvac-solutions-card-image-wrapper {
    height: 8rem; /* h-32 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.residential-hvac-solutions-card-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Group hover effect for image scaling */
.residential-hvac-solutions-solution-card:hover .residential-hvac-solutions-card-image {
    transform: scale(1.05);
}

.residential-hvac-solutions-card-title {
    font-weight: 700;
    font-size: 1.25rem;
}

/* Responsive Styles */
@media (min-width: 768px) { /* md breakpoint */
    .residential-hvac-solutions-header h2 {
        font-size: 3rem;
    }
    .residential-hvac-solutions-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
        .residential-hvac-solutions-grid-container-secondary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .residential-hvac-solutions-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) { /* sm breakpoint */
    .residential-hvac-solutions-content-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
        .residential-hvac-solutions-content-container {
        padding: 0 2rem;
    }

    .residential-hvac-solutions-comfort-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .residential-hvac-solutions-header h2 {
        font-size: 2.25rem;
    }

    .residential-hvac-solutions-header p {
        font-size: 1.25rem;
    }
    .residential-hvac-solutions-header {
        margin-bottom: 4rem;
    }
}

/* Supports & Benefits Section */
.residential-support-benefits-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--white);
}

/* Content Container */
.residential-support-benefits-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.residential-support-benefits-header {
    text-align: center;
    margin-bottom: 1rem;
}

.residential-support-benefits-header h2 {
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.residential-support-benefits-header p {
    font-size: 1rem;
    color: var(--muted-foreground);
    max-width: 42rem;
    margin: 0 auto;
}

/* Grid for Cards */
.residential-support-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Benefit Card Styles */
.residential-support-benefits-grid .training-card {
    position: relative;
    background-color: var(--white);
    padding: 2rem 0rem;
    text-align: center;
    border: 2px solid transparent;
    --border: 214.3 31.8% 91.4%;
    border-color: hsl(var(--border));
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.residential-support-benefits-grid .training-card a.trainin-card-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.residential-support-benefits-grid .training-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border-color: rgb(0 151 211 / 20%);
    transform: translateY(-5px);
}

.residential-support-benefits-grid .training-card .iconBox {
    width: 4rem;
    height: 4rem;
    background: #00a1e01a;
    border-radius: 1rem; /* rounded-2xl */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem auto;
    transition: background-color 0.3s ease;
}

.residential-support-benefits-grid .training-card .card-header-split {
    flex-direction: column;
    align-items: center;
}

.residential-support-benefits-grid .training-card .card-header-icon {
    width: 2rem;
    height: 2rem;
    color: var(--daikin-blue);
    top: 0;
}

.residential-support-benefits-grid .training-card .card-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.residential-support-benefits-grid .training-card .card-content .card-description {
    color: var(--muted-foreground);
    line-height: 1.75;
    text-align: center;
}

/* Responsive Styles */
@media (min-width: 768px) { /* md breakpoint */
    .residential-support-benefits-header h2 {
        font-size: 3rem;
    }
    .residential-support-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 640px) { /* sm breakpoint */
    .residential-support-benefits-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .residential-support-benefits-container {
        padding: 0 2rem;
    }

    .residential-support-benefits-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .residential-support-benefits-header h2 {
        font-size: 1.55rem;
    }

    .residential-support-benefits-header {
        margin-bottom: 4rem;
    }

    .residential-support-benefits-header p {
        font-size: 1.25rem;
    }
}