/* General Styles */

.infographics-module {
    background: #0D1117;
    font-family: var(--fontP);
}

.infographics-container {
    max-width: 1210px;
    margin: 0 auto;
}

.infographics-products-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 40px 0px;
    box-sizing: border-box;
    background: #0D1117;
}

.default-content-block h2 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
    line-height: 54px;
    background: linear-gradient(180.07deg, #FFFFFF 0.06%, #42B3FE 377.72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-top: 0px;
}

/* Left Section */
.left-section {
    flex: 1;
    padding: 20px;
    border-radius: 10px;
    max-width: 420px;
}

.left-section h6.product-name {
    color: #74C4E8;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    /* identical to box height */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0px;
    margin-top: 0px;
}

.left-section .initial-content .placeholder-image {
    background: #333;
    color: #aaa;
    text-align: center;
    padding: 50px;
    margin-top: 20px;
    border-radius: 8px;
}

.divider-image-icon img {
    transition: opacity 0.3s ease-in-out;
}

.hidden {
    display: none;
}

.close-btn {
    background: none;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 0px;
}

.divider-image-infographics {
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #0097E0 0%, #0097E0 50%, #0D1117 100%);
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-image-icon {
    position: absolute;
    top: 0px;
    background: #0D1117;
    height: 88px;
    display: flex;
    align-items: center;
    width: 88px;
    justify-content: center;
}

.divider-image-icon.hidden {
    display: none;
}

/* Right Section */
.right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 0px;
    position: relative;
}


.default-content-block p,
.default-content-block ul li {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #FFFFFF;
}

.right-section h4 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    text-transform: capitalize;
    background: linear-gradient(271.42deg, #0097E0 -14.47%, #74C4E8 14.19%, #B3D8EF 39.67%, #74C4E8 77.24%, #0097E0 112.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 15px;
    z-index: 1;
}

.right-section .units-location-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 3px solid #98A2B3;
    padding-bottom: 0px;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0px 35px 30px 0px #0d1117;
}

.right-section .units-location-tab {
    font-family: 'Poppins';
    flex: 1;
    padding: 15px 15px;
    background: transparent;
    color: #fff;
    text-align: center;
    border: none;
    cursor: pointer;
    border-radius: 0px;
    transition: background 0.3s ease;
    color: #98A2B3;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #98A2B3;
    position: relative;
}

.right-section .units-location-tab {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    background: linear-gradient(271.42deg, #0097E0 -14.47%, #74C4E8 14.19%, #B3D8EF 39.67%, #74C4E8 77.24%, #0097E0 112.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.right-section .units-location-tab:not(.active) {
    opacity: 0.35;
}

.right-section .units-location-tab.active:after {
    position: absolute;
    bottom: -3px;
    left: 0px;
    height: 3px;
    width: 100%;
    content: "";
    background: linear-gradient(271.42deg, #0097E0 -14.47%, #74C4E8 14.19%, #B3D8EF 39.67%, #74C4E8 77.24%, #0097E0 112.9%);
}

.right-section .units-location-tab:hover {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    background: linear-gradient(271.42deg, #0097E0 -14.47%, #74C4E8 14.19%, #B3D8EF 39.67%, #74C4E8 77.24%, #0097E0 112.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* House Diagram */

.house-diagrams-wrapper {
    overflow: hidden;
}

.house-diagram {
    position: relative;
    min-height: 563px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    max-width: 727px;
    box-shadow: inset 0px 0px 40px 50px #0d1117;
}

div#basement.house-diagram {
    min-height: 665px;
    margin-top: -100px;
}

/* Interactive Points */
.interactive-point {
    position: absolute;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.3s, background 0.3s;
    background: linear-gradient(72.68deg, rgba(255, 255, 255, 0.25) 84.32%, rgba(179, 216, 239, 0.25) 98.77%), linear-gradient(81.32deg, rgba(255, 255, 255, 0) 20.82%, #FFFFFF 82%), radial-gradient(89.34% 211.61% at 25.57% 225.11%, #B3D8EF 28.07%, #FFFFFF 85.94%);
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 17.8566px #0097E0;
    backdrop-filter: blur(11.1604px);
    border-radius: 31.5px;
    width: 100%;
    min-width: 143px;
    height: 26px;
    max-width: 150px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #001E31;
    text-align: center;
    justify-content: center;
    z-index: 1;
}

.interactive-point:hover {
    transform: scale(1.1);
    background: linear-gradient(72.68deg, rgba(255, 255, 255, 0.25) 84.32%, rgba(179, 216, 239, 0.25) 98.77%), linear-gradient(81.32deg, rgba(255, 255, 255, 0) 20.82%, #FFFFFF 82%), radial-gradient(89.34% 211.61% at 25.57% 225.11%, #B3D8EF 28.07%, #FFFFFF 85.94%);
}

.tooltip-icon.tooltip-plus {
    position: absolute;
    left: -20px;
    background: linear-gradient(72.68deg, rgba(255, 255, 255, 0.25) 84.32%, rgba(179, 216, 239, 0.25) 98.77%), linear-gradient(81.32deg, rgba(255, 255, 255, 0) 20.82%, #FFFFFF 82%), radial-gradient(89.34% 211.61% at 25.57% 225.11%, #B3D8EF 28.07%, #FFFFFF 85.94%);
    height: 41px;
    width: 41px;
    border-radius: 31.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.interactive-point.right-align-point .tooltip-icon.tooltip-plus {
    right: -20px;
    left: auto;
}

.interactive-point.right-align-point.inline-interactive-point.active .tooltip-icon.tooltip-plus {
    position: absolute;
    left: auto;
    right: 0px;
}

.tooltip-icon img {
    max-width: 61px;
    height: 61px;
    width: 61px;
}

.interactive-point.inline-interactive-point.active {
    background: linear-gradient(72.68deg, rgba(255, 255, 255, 0.25) 84.32%, rgba(179, 216, 239, 0.25) 98.77%), linear-gradient(81.32deg, rgba(255, 255, 255, 0) 20.82%, #FFFFFF 82%), radial-gradient(89.34% 211.61% at 25.57% 225.11%, #B3D8EF 28.07%, #FFFFFF 85.94%);
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 17.8566px #0097E0;
    height: 45px;
    max-width: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: -10px;
}

.interactive-point.inline-interactive-point.active .tooltip-icon.tooltip-plus {
    position: relative;
    left: -3px;
}

.interactive-point.inline-interactive-point.active span {
    background: linear-gradient(122.68deg, rgba(49, 138, 221, 0.7) 43.49%, rgba(51, 255, 108, 0.7) 120.25%);
    border-radius: 28px;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 105px;
    color: #fff;
}



/* Diagram-Specific Positioning */

/* Attic Positions */
.attic-indoor-unit {
    top: 175px;
    right: 29%;
}

.attic-thermostat {
    top: 44%;
    left: 53%;
}

.attic-piping {
    top: 58%;
    left: 32%;
}

.attic-outdoor-unit {
    bottom: 17%;
    left: 34%;
}

/* Basement Positions */
.basement-indoor-unit {
    bottom: 11%;
    left: 42%;
}

.basement-thermostat {
    top: 45%;
    left: 49%;
}

.basement-piping {
    top: 73%;
    left: 36%;
}

.basement-outdoor-unit {
    top: 58%;
    left: 36%;
}

/* Closet Positions */

.closet-outdoor-unit {
    position: absolute;
    top: 51%;
    left: 42%;
}

.closet-piping {
    position: absolute;
    left: 30%;
    top: 16%;
}

.closet-thermostat {
    top: 37%;
    left: 32%;
}


.closet-indoor-unit {
    position: absolute;
    left: 64%;
    top: 37%;
}

.product-name-for-lhs,
.product-details-main-title-for-lhs,
.infographics-product-image-for-lhs,
.product-details-sub-title-for-lhs,
.product-details-description-for-lhs,
.explore-product-link-for-lhs {
    display: none;
}

h2.product-details-main-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 45px;
    letter-spacing: 0.05px;
    background: linear-gradient(180.07deg, #FFFFFF 0.06%, #42B3FE 377.72%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-right: 10px;
}

p.product-details-sub-title {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #74C4E8;
    mix-blend-mode: normal;
    margin-top: 30px;
}

.product-details-description {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #FFFFFF;
    mix-blend-mode: normal;
}

.details-content {
    position: relative;
}

/* Nested Section Styling */
.nested-section {
    position: absolute;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 153px;
    max-width: 350px;
    background: linear-gradient(72.68deg, rgba(255, 255, 255, 0.25) 84.32%, rgba(179, 216, 239, 0.25) 98.77%), linear-gradient(81.32deg, rgba(255, 255, 255, 0) 20.82%, #FFFFFF 82%), radial-gradient(89.34% 211.61% at 25.57% 225.11%, #B3D8EF 28.07%, #FFFFFF 85.94%);
    box-shadow: 0px 0px 17.8566px #0097E0;
    backdrop-filter: blur(11.1604px);
    border-radius: 20px;
    z-index: 1;
}

.nested-section.hidden-section {
    display: none;
}

.nested-section.positioned-top .interactive-tooltip {
    padding-top: 15px;
}

.nested-section.positioned-bottom .interactive-tooltip {
    padding-bottom: 15px;
}

.interactive-tooltip {
    padding: 35px 25px;
    width: 100%;
    flex: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nested-section.hidden {
    display: none;
}

.nested-section h3 {
    margin: 0;
    font-size: 18px;
    margin-bottom: 10px;
}

.nested-section p {
    margin: 0;
    font-size: 14px;
    color: #ccc;
}

.interactive-point.active .tooltip-icon.tooltip-plus img.tooltip-plus-icon {
    display: none;
}

.tooltip-icon.tooltip-plus img.tooltip-minus-icon {
    display: none;
}

.interactive-point.active .tooltip-icon.tooltip-plus img.tooltip-minus-icon {
    display: block;
}

.interactive-point.active {
    z-index: 2;
    background: transparent;
    box-shadow: none;
    border: 0px;
}

.interactive-point.active:hover {
    transform: none;
}

.nested-section-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 8px;
    border-radius: 5px;
}

.nested-section-info-box h5 span span svg {
    background: url(../images/infographics/arrow-black-up.svg) center / contain no-repeat;
    width: 12px;
    height: 12px;
}

.nested-section-info-box.active h5 span span svg {
    background: url(../images/infographics/arrow-black-up-white.svg) center / contain no-repeat;
}

.nested-section-info-box:hover {
    background: linear-gradient(95deg, rgba(58, 196, 245, 0.25) 2.68%, rgba(14, 14, 138, 0.25) 95.69%);
}

.nested-section-info-box.active:after {
    background: linear-gradient(122.68deg, rgba(51, 255, 108, 0.7) -19.3%, rgba(49, 138, 221, 0.7) 63.25%);
    border-radius: 5px;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: rotate(180deg);
}

.nested-section-info-box.active svg path {
    stroke: #fff;
}

.nested-section-info-box h5 {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #001E31;
    mix-blend-mode: normal;
    margin-top: 10px;
    margin-bottom: 10px;
}

.nested-section-info-box.active h5 {
    color: #fff;
}

.nested-section-info-box h5 a {
    color: #001E31;
    text-decoration: none;
}

.nested-section-info-box h5 a span {
    position: relative;
    top: -3px;
}

.nested-tabs {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.nested-tabs .nested-tab {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #252B42;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    line-height: 0px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 28px;
}

.nested-tab span svg {
    background: url(../images/infographics/arrow-black.svg) center / contain no-repeat;
    width: 25px;
    height: 25px;
}

.nested-tabs a.nested-tab.active svg {
    background: url(../images/infographics/arrow-white.svg) center / contain no-repeat;
}


.nested-tabs .nested-tab:hover {
    background: linear-gradient(95deg, rgba(58, 196, 245, 0.25) 2.68%, rgba(14, 14, 138, 0.25) 95.69%);
}

.tooltip-grid-cols {
    display: grid;
    gap: 10px;
    /* Space between grid items */
    grid-template-columns: 1fr 1fr 1fr;
    /* Default: Three equal columns */
}

.tooltip-grid-cols:has(.nested-section-info-box:nth-child(1):nth-last-child(1)) {
    grid-template-columns: 1fr;
    /* Single column for one child */
}

.tooltip-grid-cols:has(.nested-section-info-box:nth-child(2):nth-last-child(1)) {
    grid-template-columns: 1fr 1fr;
    /* Two equal columns for two children */
}

.nested-tabs a.nested-tab.active {
    background: linear-gradient(122.68deg, rgba(49, 138, 221, 0.7) 43.49%, rgba(51, 255, 108, 0.7) 120.25%);
    border-radius: 28px;
    color: #fff;
}

.nested-tabs a.nested-tab.active svg path {
    stroke: #fff;
}

.explore-product-link-container .explore-product-link-for-lhs {
    border: 1px solid #0097E0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0097E0;
    padding: 12px 15px;
    cursor: pointer;
    text-decoration: none;
    gap: 10px;
    margin-top: 20px;
}

.explore-product-link-container .explore-product-link-for-lhs svg {
    background: url(../images/infographics/blue-arrow.svg) center / contain no-repeat;
    width: 20px;
    height: 20px;
}

.explore-product-link-container {
    display: flex;
}

.explore-product-link-container .explore-product-link-for-lhs:hover {
    background: #0097E0;
    color: #fff;
}

.explore-product-link-container .explore-product-link-for-lhs:hover svg {
    background: url(../images/infographics/white-arrow.svg) center / contain no-repeat;
    width: 20px;
    height: 20px;
}

.explore-product-link-container .explore-product-link-for-lhs:hover svg path {
    stroke: #fff;
}

/* Unit Images Positioning */
.unit-items {
    position: absolute;
    left: 0px;
    max-width: initial;
}

img.unit-items.when-active.hidden {
    display: none;
}

img.unit-items.default.hidden {
    display: none;
}



.unit-items .active img.unit-items.when-active {
    display: block;
}


.attic-indoor-unit-image {
    position: absolute;
    left: -41px;
    top: -6px;
    z-index: 1;
}

.attic-thermostat-unit-image {
    position: absolute;
    left: -43px;
    top: -5px;
    z-index: 1;
}

.attic-piping-unit-image {
    position: absolute;
    left: -31px;
    z-index: 0;
    top: -5px
}

.attic-outdoor-unit-image {
    position: absolute;
    left: -40px;
    top: -7px;
    z-index: 1;
}

div#basement.house-diagram .unit-items {
    max-width: 727px;
}


.basement-thermostat-unit-image {
    position: absolute;
    left: 0px;
    top: -34px;
    z-index: 1;
}

.basement-outdoor-unit-image {
    position: absolute;
    left: 0px;
    top: -33px;
    z-index: 1;
}

.basment-indoor-unit-image {
    position: absolute;
    left: 0px;
    top: -33px;
    z-index: 1;
}

.basement-piping-unit-image {
    position: absolute;
    left: 0px;
    top: -34px;
}

div#closet.house-diagram .unit-items {
    max-width: 894px;
}

.closet-indoor-unit-image {
    position: absolute;
    left: -21px;
    top: -58px;
    z-index: 1;
}

.closet-piping-unit-image {
    position: absolute;
    top: -73px;
    left: -27px;
}

.closet-outdoor-unit-image {
    position: absolute;
    left: -11px;
    top: -63px;
    z-index: 1;
}

.closet-thermostat-unit-image {
    position: absolute;
    top: -58px;
    left: -9px;
}

.mobile-divider-image {
    display: none;
}

.active-border-image-mobile {
    display: none;
}

/* Air Handler  */

#air-handler .attic-indoor-unit-image .unit-items,
#air-handler .attic-thermostat-unit-image .unit-items,
#air-handler .attic-piping-unit-image .unit-items,
#air-handler .attic-outdoor-unit-image .unit-items {
    max-width: 920px;
}

#air-handler .attic-outdoor-unit-image .unit-items {
    max-width: 912px;
}

#air-handler .attic-outdoor-unit-image .unit-items.when-active {
    max-width: 919px;
}

#air-handler div#basement.house-diagram {
    margin-top: 30px;
}

#air-handler .basement-thermostat {
    left: 53%;
    top: 31%;
}

#air-handler .basement-outdoor-unit {
    top: 54%;
    left: 34%;
}

#air-handler .basement-piping {
    bottom: 28%;
    left: 15%;
    top: auto;
}

#air-handler .basement-indoor-unit {
    bottom: 11%;
    left: 42%;
}

#air-handler .basement-indoor-unit {
    bottom: 19%;
    left: 45%;
}


#air-handler div#basement.house-diagram .unit-items {
    max-width: 828px;
}

#air-handler .basement-thermostat-unit-image {
    position: absolute;
    left: -6px;
    top: -23px;
    z-index: 1;
}


#air-handler .basement-outdoor-unit-image {
    position: absolute;
    left: -11px;
    top: -176px;
    z-index: 1;
}

#air-handler .basment-indoor-unit-image {
    position: absolute;
    left: -10px;
    top: -183px;
    z-index: 1;
}

#air-handler .basement-piping-unit-image {
    position: absolute;
    left: 1px;
    top: -193px;
}

#air-handler div#basement.house-diagram .basment-indoor-unit-image .unit-items {
    max-width: 839px;
}

#air-handler .closet-thermostat-unit-image {
    top: -59px;
    left: -9px;
}

img.infographics-product-image {
    max-height: 250px;
    object-fit: cover;
}

/* SINGLE ZONE HEAT PUMPS */

/* Attic */

#sz-hp :is(.attic-additional-sq-footage, .attic-indoor-unit-image, .attic-thermostat-unit-image, .attic-piping-unit-image, .attic-outdoor-unit-image) .unit-items {
    max-width: 1087px;
}

#sz-hp .attic-indoor-unit-image {
    left: -108px;
    top: -115px;
    z-index: 1;
}

#sz-hp .attic-additional-sq-footage {
    position: absolute;
    left: -108px;
    top: -115px;
    z-index: 1;
}

#sz-hp .attic-thermostat-unit-image {
    left: -108px;
    top: -115px;
}

#sz-hp .house-diagram {
    min-height: 680px;
    background-position: 30% -115px;
}

#sz-hp .attic-piping-unit-image {
    left: -108px;
    top: -115px;
}

#sz-hp .attic-outdoor-unit-image {
    left: -108px;
    top: -115px;
}

#sz-hp .attic-indoor-unit {
    top: 195px;
    right: 54%;
}

#sz-hp .attic-thermostat {
    top: 20.5%;
    left: 50%;
}

#sz-hp .attic-piping {
    top: 48%;
    left: 22.3%;
}

#sz-hp .attic-outdoor-unit {
    bottom: 28%;
    left: 30%;
}

#sz-hp .attic-additional-footage {
    top: 75px;
    left: 37%;
}

.units-location-tabs.units-location-tabs--full {
    width: auto;
    max-width: max-content;
    gap: 30px;
}

.units-location-tabs.units-location-tabs--full .units-location-tab {
    padding: 15px 3px;
    flex: auto;
}

.tooltip-grid-cols.tooltip-grid-cols--2 {
    grid-template-columns: 1fr 1fr;
}

.nested-section-info-box.secondary {
    margin: 0;
    padding: 0;
}

.nested-section-info-box.secondary h5 {
    margin: 0;
}

.interactive-point.interactive-point--long.active {
    max-width: max-content;
}

.interactive-point.interactive-point--long.active span {
    max-width: none;
}

.interactive-point.interactive-point--long.active span {
    padding: 0px 20px;
}

.interactive-point.interactive-point--long.right-align-point.active span {
    padding: 0px 15px;
    max-width: max-content;
}

.interactive-point.interactive-point--long.inline-interactive-point.right-align-point.active span {
    padding-right: 45px;
}

.interactive-point.interactive-point--long:not(.active) {
    max-width: max-content;
    min-width: auto;
}

.interactive-point.interactive-point--long:not(.active) span {
    padding: 0px 10px 0px 30px;
}
.interactive-point.interactive-point--long:not(.active).right-align-point span {
    padding: 0px 30px 0px 10px;
}

/* Attic End */

/* DDU */

#sz-hp div#basement.house-diagram {
    min-height: 875px;
    margin-top: -295px;
    background-position: 92% bottom;
}

#sz-hp div#basement.house-diagram .unit-items {
    max-width: 1400px;
}

#sz-hp .basment-indoor-unit-image {
    left: -619px;
    top: 0px;
}

#sz-hp .basement-no-ductwork-image {
    position: absolute;
    left: -619px;
    top: 0px;
    z-index: 1;
}

#sz-hp .basement-thermostat-unit-image {
    left: -619px;
    top: 0px;
}

#sz-hp .basement-outdoor-unit-image {
    left: -619px;
    top: 0px;
}

#sz-hp .basement-piping-unit-image {
    left: -619px;
    top: 0px;
}

#sz-hp .basement-indoor-unit {
    bottom: 36%;
    left: 28%;
}

#sz-hp .basement-outdoor-unit {
    top: 78%;
    left: 45%;
}

#sz-hp .basement-piping {
    top: 66%;
    left: 69%;
}

#sz-hp .basement-thermostat {
    top: 70%;
    left: 46%;
}

#sz-hp .basement-no-ductwork {
    top: 58%;
    left: 61%;
}

/* DDU end */

/* Hot and Cold Spot */

#sz-hp #closet.house-diagram {
    min-height: 595px;
    background-position: 17% bottom;
    margin-top: -150px;
}

#sz-hp div#closet.house-diagram .unit-items {
    max-width: 951px;
}

#sz-hp .closet-outdoor-unit-image {
    left: -38px;
    top: 0px;
}

#sz-hp .closet-hot-cold-image {
    position: absolute;
    left: -38px;
    top: -30px;
    z-index: 1;
}

#sz-hp .closet-thermostat-unit-image {
    left: -38px;
    top: 0px;
}

#sz-hp .closet-piping-unit-image {
    left: -38px;
    top: 0px;
}

#sz-hp .closet-indoor-unit-image {
    left: -38px;
    top: 0px;
}

#sz-hp .closet-outdoor-unit {
    top: 79%;
    left: 42%;
}

#sz-hp .closet-piping {
    left: 16%;
    top: 64%;
}

#sz-hp .closet-thermostat {
    top: 53%;
    left: 70%;
}

#sz-hp .closet-indoor-unit {
    left: 41%;
    top: 49%;
}

#sz-hp .closet-hot-cold-unit {
    top: 39%;
    left: 56%;
}

/* Hot and Cold Spot End */

/* SINGLE ZONE HEAT PUMPS END */

/* SINGLE ZONE AIR CONDITIONERS */

/* Attic */

#sz-ac :is(.attic-additional-sq-footage, .attic-indoor-unit-image, .attic-thermostat-unit-image, .attic-piping-unit-image, .attic-outdoor-unit-image) .unit-items {
    max-width: 1087px;
}

#sz-ac .attic-indoor-unit-image {
    position: absolute;
    left: -108px;
    top: -115px;
    z-index: 1;
}

#sz-ac .attic-additional-sq-footage {
    position: absolute;
    left: -108px;
    top: -115px;
    z-index: 1;
}

#sz-ac .attic-thermostat-unit-image {
    left: -108px;
    top: -115px;
}

#sz-ac .house-diagram {
    min-height: 680px;
    background-position: 30% -115px;
}

#sz-ac .attic-piping-unit-image {
    left: -108px;
    top: -115px;
}

#sz-ac .attic-outdoor-unit-image {
    left: -108px;
    top: -115px;
}

#sz-ac .attic-indoor-unit {
    top: 190px;
    right: 42%;
}

#sz-ac .attic-thermostat {
    top: 20%;
    left: 50%;
}

#sz-ac .attic-piping {
    top: 48%;
    left: 22.5%;
}

#sz-ac .attic-outdoor-unit {
    bottom: 28%;
    left: 31%;
}

#sz-ac .attic-additional-footage {
    top: 50px;
    left: 42%;
}

/* Attic End */

/* DDU */

#sz-ac div#basement.house-diagram {
    min-height: 875px;
    margin-top: -295px;
    background-position: 92% bottom;
}

#sz-ac div#basement.house-diagram .unit-items {
    max-width: 1400px;
}

#sz-ac .basment-indoor-unit-image {
    left: -619px;
    top: 0px;
}

#sz-ac .basement-no-ductwork-image {
    position: absolute;
    left: -619px;
    top: 0px;
    z-index: 1;
}

#sz-ac .basement-thermostat-unit-image {
    left: -619px;
    top: 0px;
}

#sz-ac .basement-outdoor-unit-image {
    left: -619px;
    top: 0px;
}

#sz-ac .basement-piping-unit-image {
    left: -619px;
    top: 0px;
}

#sz-ac .basement-indoor-unit {
    bottom: 35.5%;
    left: 28%;
}

#sz-ac .basement-outdoor-unit {
    top: 78%;
    left: 38%;
}

#sz-ac .basement-piping {
    top: 65%;
    left: 70.5%;
}

#sz-ac .basement-thermostat {
    top: 69.5%;
    left: 45%;
}

#sz-ac .basement-no-ductwork {
    top: 57%;
    left: 59%;
}

/* DDU end */

/* Hot and Cold Spot */

#sz-ac #closet.house-diagram {
    min-height: 595px;
    background-position: 17% bottom;
    margin-top: -150px;
}

#sz-ac div#closet.house-diagram .unit-items {
    max-width: 951px;
}

#sz-ac .closet-outdoor-unit-image {
    left: -38px;
    top: 0px;
}

#sz-ac .closet-hot-cold-image {
    position: absolute;
    left: -38px;
    top: 0px;
    z-index: 1;
}

#sz-ac .closet-thermostat-unit-image {
    left: -38px;
    top: 0px;
}

#sz-ac .closet-piping-unit-image {
    left: -38px;
    top: 0px;
}

#sz-ac .closet-indoor-unit-image {
    left: -38px;
    top: 0px;
}

#sz-ac .closet-outdoor-unit {
    top: 79%;
    left: 42%;
}

#sz-ac .closet-piping {
    left: 16%;
    top: 64%;
}

#sz-ac .closet-thermostat {
    top: 53%;
    left: 70%;
}

#sz-ac .closet-indoor-unit {
    left: 45%;
    top: 61%;
}

#sz-ac .closet-hot-cold-unit {
    top: 39%;
    left: 56%;
}

/* Hot and Cold Spot End */

/* SINGLE ZONE AIR CONDITIONERS END */

/* Multi-Split Ductless  */

#multi-zone.house-diagram {
    min-height: 680px;
    background-position: 30% -115px;
}
#multi-zone .attic-indoor-unit-image {
    left: -108px;
    top: -115px;
}
#multi-zone .attic-thermostat-unit-image {
    left: -108px;
    top: -115px;
}

#multi-zone .attic-piping-unit-image {
    left: -108px;
    top: -115px;
}
#multi-zone .attic-outdoor-unit-image {
    left: -108px;
    top: -115px;
}
#air-handler #multi-zone :is(.attic-multi-zone-benefits, .attic-indoor-unit-image, .attic-thermostat-unit-image, .attic-piping-unit-image, .attic-outdoor-unit-image) .unit-items {
    max-width: 1087px;
}

#multi-zone .attic-multi-zone-benefits {
    left: -108px;
    top: -115px;
    position: absolute;
    z-index: 1;
}
#multi-zone .interactive-point.multi-zone-benefits {
    top: 27px;
    left: 34%;
}

#multi-zone .attic-piping {
    top: 168px;
    left: 10px;
}

#multi-zone .attic-thermostat {
    top: 57.5%;
    left: 70%;
}

#multi-zone .attic-indoor-unit {
    top: 173px;
    right: 14%;
}

#multi-zone .attic-outdoor-unit {
    bottom: 25%;
    left: 33%;
}

.nested-section-info-box.active .inverse-color-active {
    filter: brightness(0) invert(1);
}
/* Media Query InfoGraphics */
@media only screen and (min-width: 1025px) and (max-width: 1300px) {
    .house-diagrams-wrapper {
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
    }

    .house-diagrams {
        width: 728px;
    }

    /* Custom scrollbar styles specifically for the .right-section */
    .house-diagrams-wrapper::-webkit-scrollbar {
        height: 8px;
        /* Height for horizontal scrollbar */
    }

    .house-diagrams-wrapper::-webkit-scrollbar-track {
        background: #0D1117;
        /* Background color for the scrollbar track */
        border-radius: 4px;
    }

    .house-diagrams-wrapper::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #0097E0 0%, #0097E0 50%, #0D1117 100%);
        border-radius: 4px;
        /* Rounded edges for the scrollbar thumb */
    }

    .house-diagrams-wrapper::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #007ACC 0%, #007ACC 50%, #0A0D14 100%);
    }
}

/*@media (min-width: 768px) and (max-width: 1025px) {
    .infographics-products-wrapper {
        flex-direction: column;
    }

    .divider-image-infographics {
        display: none;
    }

    .left-section {
        width: 100%;
        max-width: none;
    }
}*/

@media only screen and (max-width: 767px) {
    .infographics-products-wrapper {
        flex-direction: column;
        padding: 20px 0px;
    }

    .infographics-products-wrapper.active {
        height: 100vh;
        min-height: 125vh;
    }


    .left-section h6.product-name {
        font-weight: 500;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        color: #53EBF4;
    }

    .right-section {
        padding: 20px 20px;
    }

    .default-content-block h2,
    h2.product-details-main-title {
        margin-top: 10px;
        font-weight: 500;
        font-size: 24px;
        line-height: 36px;
        text-align: center;
    }

    .divider-image-icon {
        display: none;
    }

    .divider-image-infographics {
        width: 100%;
        height: auto;
        background: none;
        border-radius: 0px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-divider-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .house-diagrams-wrapper {
        overflow: hidden;
        width: 100%;
        overflow-x: auto;
        cursor: pointer;
    }

    .house-diagrams {
        width: 726px;
    }

    .right-section.hidden {
        display: none;
    }

    .left-section {
        padding: 0px 20px;
    }

    .left-section.active {
        height: 100%;
    }


    h2.product-details-main-title {
        text-align: center;
    }

    .nested-section {
        bottom: 0px;
        max-width: 100%;
    }

    .details-content {
        position: relative;
        height: 100%;
    }

    .interactive-tooltip {
        padding: 20px;
    }

    .left-section.active .active-border-image-mobile {
        display: flex;
        margin-top: 30px;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    .units-location-tabs.units-location-tabs--full {
        gap: 10px;
    }
}