a.custom__button { position: relative; margin-top: auto; max-width: 156px; width: 100%; } a.custom__button.button__green:hover { border: 1px solid var(--customColorGreen); } /* Section 1 - Our Systems */ section.our__systems { background: url(../../assets/images/section__our__systems__bg.jpg) no-repeat center center / cover; padding-top: 100px; padding-bottom: 100px; max-height: 700px; height: 100vh; } section.our__systems .our__systems__header__container { max-height: 400px; height: 100vh; width: 100%; color: var(--customColorWhite); display: flex; flex-direction: column; justify-content: flex-end; } section.our__systems .our__systems__heading { max-width: 776px; width: 100%; color: var(--customColorWhite); } section.our__systems .our__systems__heading h1 { margin-bottom: 20px; } /* Section 2 - Cutting-edge Window and Door Systems */ section.our__systems__cards { padding: 100px 0px; } section.our__systems__cards .our__systems__cards__heading { margin-bottom: 60px; } /* Section 2 - Our Systems Cards */ section.our__systems__cards .our__systems__cards__gallery { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } section.our__systems__cards .our__systems__cards__gallery .content__title { margin: 0; } section.our__systems__cards .our__systems__card { width: 100%; max-width: 505px; /* Base width */ aspect-ratio: 1 / 1; /* Maintain square aspect ratio */ position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; /* Optional: Adjust margin for spacing */ } section.our__systems__cards .our__systems__card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease-in-out; } section.our__systems__cards .our__systems__card img:hover { transform: scale(1.1); } section.our__systems__cards .our__systems__card .gradient-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(6, 43, 46, 0.00) 50%, rgba(6, 43, 46, 0.70) 72%, #062B2E 100%); z-index: 1; pointer-events: none; } section.our__systems__cards .our__systems__card .our__systems__card__content { position: absolute; display: flex; flex-direction: column; z-index: 2; /* text-align: center; */ color: #ffffff; gap: 20px; padding: 20px; bottom: 0; left: 0; width: 100%; } /* Section 3 - Premium Window and Door Upgrades */ section.premium__window__door { padding: 100px 0px; background-color: var(--customColorLightGreen); } section.premium__window__door .premium__window__heading { display: flex; justify-content: space-between; margin-bottom: 60px; } section.premium__window__door .content__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 60px 30px; padding: 20px; } section.premium__window__door .grid__item { position: relative; overflow: hidden; /* border-radius: 8px; */ } section.premium__window__door .grid__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } section.premium__window__door .custom__button.button__green:hover { border: 1px var(--customColorGreen) solid; } @media (min-width: 1400px) { section.our__systems__cards .our__systems__cards__gallery { flex-direction: row; align-items: stretch; } section.our__systems__cards .our__systems__card { flex: 1; max-width: calc(33.333% - 20px); aspect-ratio: 1 / 1; /* Maintain square aspect ratio */ } } @media (min-width: 1200px) and (max-width: 1399px) { section.our__systems__cards .our__systems__cards__gallery { flex-direction: row; align-items: stretch; } section.our__systems__cards .our__systems__card { flex: 1; max-width: calc(50% - 10px); aspect-ratio: 1 / 1; /* Maintain square aspect ratio */ } } @media (max-width: 1199px) { /* Section 1 - Our Systems */ section.our__systems { padding-top: 70px; padding-bottom: 70px; padding-left: 30px; padding-right: 30px; } section.our__systems .our__systems__header__container { max-height: 600px; justify-content: center; } section.our__systems .our__systems__heading { text-align: center; position: relative; margin-left: auto; margin-right: auto; max-width: 100%; } /* Section 2 - Cutting-edge Window and Door Systems */ section.our__systems__cards { padding: 70px 30px; } section.our__systems__cards .our__systems__cards__heading { margin-bottom: 30px; text-align: center; } section.our__systems__cards .our__systems__cards__gallery { flex-direction: row; align-items: center; justify-content: space-evenly; } section.our__systems__cards .our__systems__card { width: 90%; max-width: 505px; aspect-ratio: 1 / 1; margin-bottom: 20px; } /* Section 3 - Premium Window and Door Upgrades */ section.premium__window__door { padding: 70px 30px; } section.premium__window__door .content__grid { grid-template-columns: repeat(3, 1fr); grid-gap: 30px; } } @media (max-width: 991px) { section.premium__window__door .content__grid { grid-template-columns: repeat(2, 1fr); grid-gap: 30px; } section.premium__window__door .premium__window__heading { flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 30px; } section.our__systems__cards .our__systems__card { max-width: 100vw; } } @media (max-width: 767px) { /* Section 1 - Our Systems */ section.our__systems { padding-top: 50px; padding-bottom: 50px; padding-left: 20px; padding-right: 20px; } section.our__systems .our__systems__header__container { max-height: 600px; justify-content: center; } /* Section 2 - Cutting-edge Window and Door Systems */ section.our__systems__cards { padding: 50px 20px; } section.our__systems__cards .our__systems__card { width: 90%; max-width: 505px; aspect-ratio: 1 / 1; margin-bottom: 20px; } /* Section 3 - Premium Window and Door Upgrades */ section.premium__window__door { padding: 50px 20px; } section.premium__window__door .content__grid { grid-template-columns: 1fr; grid-gap: 30px; } } /* Doors Block */ .new__systems__doors__header { margin-bottom: 60px; } .new__systems__doors__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-column-gap: 30px; grid-row-gap: 60px; } .new__system__door { overflow: hidden; max-width: 505px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .new__system__door img { width: 100%; height: auto; display: block; margin-bottom: 30px; } @media (max-width: 1199px) { .new__system__door { max-width: 100%; } } @media (max-width: 991px) { .new__systems__doors__header { text-align: center; } .new__system__door { text-align: center; align-items: center; } .new__systems__doors__cards { grid-template-columns: 1fr; } } /* Doors Block End */ /* Windows Block */ .new__systems__windows__header { margin-bottom: 60px; } .new__systems__windows__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-column-gap: 30px; grid-row-gap: 60px; } .new__system__window { overflow: hidden; max-width: 505px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .new__system__window img { width: 100%; height: auto; display: block; margin-bottom: 30px; } @media (max-width: 1199px) { .new__system__window { max-width: 100%; } } @media (max-width: 991px) { .new__systems__windows__header { text-align: center; } .new__system__window { text-align: center; align-items: center; } .new__systems__windows__cards { grid-template-columns: 1fr; } } /* Windows Block End */ /* Optionals Block */ .new__systems__optionals__header { margin-bottom: 60px; } .new__systems__optionals__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-column-gap: 30px; grid-row-gap: 60px; } .new__system__optional { overflow: hidden; max-width: 505px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .new__system__optional img { width: 100%; height: auto; display: block; margin-bottom: 30px; } @media (max-width: 1199px) { .new__system__optional { max-width: 100%; } } @media (max-width: 991px) { .new__systems__optionals__header { text-align: center; } .new__system__optional { text-align: center; align-items: center; } .new__systems__optionals__cards { grid-template-columns: 1fr; } } /* Optionals Block End */ /* Hardware Block */ .new__systems__hardware__header { margin-bottom: 60px; } .new__systems__hardware__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-column-gap: 30px; grid-row-gap: 60px; } .new__system__hardware { overflow: hidden; max-width: 505px; width: 100%; margin: 0 auto; } .new__system__hardware img { width: 100%; height: auto; display: block; margin-bottom: 30px; } @media (max-width: 1199px) { .new__system__hardware { max-width: 542px; } } @media (max-width: 991px) { .new__systems__hardware__header { text-align: center; } .new__system__hardware { text-align: center; } .new__systems__hardware__cards { grid-template-columns: 1fr; } } /* Hardware Block End */ div.pre__float { /* background: var(--customColorLightGreen); */ background: var(--customColorWhite); } footer { padding-top: 0; } /* Post Live Overrides */ .page-template-page-our-systems a.custom__button { max-width: 180px; } /* Product Navtabs */ .standard__padding { padding: 100px 0; } @media (max-width: 1199px) { .standard__padding { padding: 70px 30px; } } @media (max-width: 767px) { .standard__padding { padding: 50px 20px; } } ul#productsTab { /* gap: 60px; */ gap: 48px; row-gap: 0; max-width: 991px; justify-content: center; position: relative; margin: 0 auto; margin-bottom: 60px; } /* .products__margin__bottom { margin-bottom: 100px; } */ section.section-sectionProducts .nav-tabs { border: none; } section.section-sectionProducts .nav-tabs a { text-decoration: none; color: var(--customColorGreen); } section.section-sectionProducts .nav-tabs a:hover { color: var(--customColorGreen); } section.section-sectionProducts .nav-tabs .nav-link:focus, section.section-sectionProducts .nav-tabs .nav-link { border: none; } section.section-sectionProducts .nav-tabs .nav-link:focus, section.section-sectionProducts .nav-tabs .nav-link:hover { border: none; } section.section-sectionProducts .nav-tabs a.nav-link.active { font-weight: 600; color: var(--customColorGreen) !important; } section.section-sectionProducts .nav-tabs .nav-link.active { border: none; } section.section-sectionProducts .nav-item .nav-link { padding: 20px 5px; } section.section-sectionProducts .productHeader { margin-bottom: 60px; } section.section-sectionProducts .productContainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(492px, 1fr)); gap: 60px 30px; margin: 0 auto; max-width: 100%; } section.section-sectionProducts .product_image img { width: -webkit-fill-available; } section.section-sectionProducts .product_image { margin-bottom: 30px; } section.section-sectionProducts .product_content h3, section.section-sectionProducts .product_content p { margin-bottom: 20px; } section.section-sectionProducts .product_content { display: flex; flex-direction: column; } section.section-sectionProducts .product_button { /* position: relative; */ margin-top: auto; } @media (max-width: 1199px) { ul#productsTab { margin-bottom: 70px; } } @media (max-width: 991px) { section.section-sectionProducts .product_content h3, section.section-sectionProducts .product_content p { text-align: center; } section.section-sectionProducts .product_button { display: flex; justify-content: center; } } @media (max-width: 575px) { section.section-sectionProducts .productContainer { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } ul#productsTab { margin-bottom: 50px; } } /* Temporary CSS for Product Categories < 3 items */ @media (min-width: 1200px) { section.section-sectionProducts .productContainer.productsAll, section.section-sectionProducts .productContainer.productsEngrande, section.section-sectionProducts .productContainer.productsCasement, section.section-sectionProducts .productContainer.productsDoor, section.section-sectionProducts .productContainer.productsWindow, section.section-sectionProducts .productContainer.productsOptionals, section.section-sectionProducts .productContainer.productsFolding, section.section-sectionProducts .productContainer.productsSliding, section.section-sectionProducts .productContainer.productsLouver { grid-template-columns: repeat(auto-fit, minmax(48%, 0fr)); } } @media (min-width: 1872px) { section.section-sectionProducts .productContainer.productsAll, section.section-sectionProducts .productContainer.productsEngrande, section.section-sectionProducts .productContainer.productsCasement, section.section-sectionProducts .productContainer.productsDoor, section.section-sectionProducts .productContainer.productsWindow, section.section-sectionProducts .productContainer.productsOptionals { grid-template-columns: repeat(auto-fit, minmax(492px, 1fr)); } } section.section-sectionProducts .productContainer.productsFolding, section.section-sectionProducts .productContainer.productsSliding, section.section-sectionProducts .productContainer.productsLouver { grid-template-columns: repeat(auto-fit, minmax(492px, 0fr)); } section.section-sectionProducts .productContainer.productsRollUp, section.section-sectionProducts .productContainer.productsOutdoor, section.section-sectionProducts .productContainer.productsTurnTilt { grid-template-columns: repeat(auto-fit, minmax(492px, 0fr)); } @media (max-width: 1871px) { section.section-sectionProducts .productContainer.productsFolding, section.section-sectionProducts .productContainer.productsSliding, section.section-sectionProducts .productContainer.productsLouver { grid-template-columns: repeat(auto-fit, minmax(492px, 1fr)); } section.section-sectionProducts .productContainer.productsRollUp, section.section-sectionProducts .productContainer.productsOutdoor, section.section-sectionProducts .productContainer.productsTurnTilt { grid-template-columns: repeat(auto-fit, minmax(50%, 0fr)); } } @media (max-width: 1097px) { section.section-sectionProducts .product_content h3, section.section-sectionProducts .product_content p { text-align: center; } section.section-sectionProducts .product_button { display: flex; justify-content: center; } section.section-sectionProducts .productContainer.productsRollUp, section.section-sectionProducts .productContainer.productsOutdoor, section.section-sectionProducts .productContainer.productsTurnTilt { grid-template-columns: repeat(auto-fit, minmax(100%, 0fr)); } } @media (max-width: 575px) { section.section-sectionProducts .productContainer.productsFolding, section.section-sectionProducts .productContainer.productsSliding, section.section-sectionProducts .productContainer.productsLouver { grid-template-columns: repeat(auto-fit, minmax(100%, 0fr)); } } /* Temporary CSS end */ /* Change Text in Hover */ .custom__button.cta__text.hoverText { display: flex; width: auto; max-width: 180px; overflow: hidden; white-space: nowrap; text-align: center; transition: max-width 0.3s ease, background-color 0.3s ease; justify-content: center; } .custom__button.cta__text.hoverText:hover { max-width: 300px; background: none; border: 1px solid var(--customColorGreen); color: var(--customColorWhite); } .custom__button.cta__text.hoverText .text { display: flex; opacity: 1; transition: opacity 0.3s ease; } .custom__button.cta__text.hoverText:hover .text { opacity: 0; } .custom__button.cta__text.hoverText:hover::after { content: 'Get in Touch With Us Today!'; display: flex; position: absolute; z-index: 1; transition: opacity 0.3s ease; opacity: 1; /* padding-bottom: 24px; */ } @media (max-width: 991px) { a.custom__button.button__white.cta__text.hoverText { width: 300px; } }