/*
Theme Name: Keystone Hardscapes Theme
Text Domain: keystone-hardscapes-theme
Version: 1.0.0
Description: Custom Keystone Hardscapes Theme
Author: The QUIKRETE Companies
Author URI: https://www.keystonehardscapes.com
*/

/* Site Wide Font */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");

/*
00. Library override(ex. bootstrap etc) --------------------
01. Text and Typography ------------------------------------
02. Common element(ul,ol,li,body,div etc.) -----------------
03. Common class(padding, margin etc.) ---------------------
04. Header styles ------------------------------------------
05. Footer styles-------------------------------------------
06. Common content------------------------------------------
07. Pages and Posts-----------------------------------------
08. Extra styles--------------------------------------------
09. Media Query---------------------------------------------
*/
/* End Table of Contents */

/* =========================================================
   Root variables define here
========================================================= */
:root {
    --text-primary: 0 0 0; /* #000000 */
    --text-secondary: 0 85 150; /* #005596 */
    --text-white: 255 255 255; /* #FFFFFF */
    --text-black: 0 0 0; /* #000000 */
    --theme-bg: 0 49 98; /* #003162 */
    --hover-color: #21538f;
    /* --accent-color: #a30046; */
    /* --btn-hover: #850039; */
	
	--font-primary: "Archivo", sans-serif;
	
	/* Fluid font sizes */
    --fs-xs: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
    --fs-sm: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
    --fs-xxl: clamp(2rem, 1.75rem + 1vw, 2.5rem);

    /* Border Radius */
    --border-radius-5: 5px;
    --border-radius-10: 10px;
    --border-radius-15: 15px;
    --border-radius-20: 20px;
}

/* Theme Homeowner */
html[data-keystone-theme="homeowner"] {
    --text-primary: 0 0 0; /* #000000 */
    --text-secondary: 0 85 150; /* #005596 */
    --theme-bg: 0 85 150; /* #005596 */
    --hover-color: 33 83 43; /* #21538f */
    --theme-bg-2: 0 49 98; /* #003162 */
}
/* Theme Contractor */
html[data-keystone-theme="contractor"] {
    --text-primary: 0 0 0; /* #000000 */
    --text-secondary: 0 49 98; /* #003162 */
    --theme-bg: 0 49 98; /* #003162 */
    --hover-color: #21538f;
	--theme-bg-2: 0 49 98; /* #003162 */
}
/* Theme Designpro */
html[data-keystone-theme="designpro"] {
    --text-primary: 0 0 0; /* #000000 */
    --text-secondary: #005596;
    --theme-bg: 112 112 112; /* #707070 */
    --hover-color: #21538f;
	--theme-bg-2: 112 112 112; /* #003162 */
}

/* Root variables define here */

/* =========================================================
   00. Library override (ex. bootstrap etc)
========================================================= */
/* 00. Library override(ex. bootstrap etc) start*/
/* 00. Library override(ex. bootstrap etc) end*/

/* =========================================================
   01. Text and Typography
========================================================= */
/* 01. Text and Typography start */
html {
    font-size: 100%;
}
body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background-color: var(--text-white);
    text-rendering: optimizeLegibility;
    padding: 0;
}
p {
    font-size: var(--fs-base);
    line-height: 1.5;
}

h1 {
    font-size: var(--fs-xxl);
    line-height: 1.2;
}

h2 {
    font-size: var(--fs-xl);
    line-height: 1.2;
}

h3 {
    font-size: var(--fs-lg);
    line-height: 1.5;
}

h4 {
    font-size: var(--fs-md);
    line-height: 1.5;
}

h5 {
    font-size: var(--fs-base);
    line-height: 1.5;
}

h6 {
    font-size: var(--fs-sm);
    line-height: 1.5;
}
/* 01. Text and Typography end */

/* =========================================================
   02. Common element (ul,ol,li,body,div etc.)
========================================================= */
/* 02. Common element(ul,ol,li,body,div etc.) start*/
a {
    color: rgb(var(--text-secondary)/1);
    text-decoration: none;
}
/* 02. Common element(ul,ol,li,body,div etc.) end*/

/* =========================================================
   03. Common class (padding, margin etc.)
========================================================= */
/*03. Common class(padding, margin etc.) start*/

.gallery-main .nav-item .nav-link,
.gallery-main .nav-item .nav-link:hover,
.gallery-taxonomy-main .nav-item .nav-link,
.gallery-taxonomy-main .nav-item .nav-link:hover,
.gallery-item .gallery-title,
.gallery-item:hover .gallery-title,
.theme-btn-1:hover,
.theme-btn-1 {
    transition: .3s ease-in-out;
}
h2.ks-primary-title {
    font-size: 64px;
}
.ks-text-primary {
    color: rgb(var(--text-secondary) / 1);
}

.theme-btn {
    padding: 8px 20px;
    border-radius: 30px;
    border: 1px solid;
    font-size: 16px;
}
.theme-btn-1 {
    border-color: rgb(var(--text-white)/1);
    color: rgb(var(--text-white)/1);
}
.theme-btn-1:hover {
    background-color: rgb(var(--text-secondary) / 1);
}
.form-check-input:focus,
input,
input:focus {
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: rgb(var(--theme-bg)/1);
    border-color: rgb(var(--theme-bg)/1);
}
/*03. Common class(padding, margin etc.) end*/
/* =========================================================
   04. Header styles
========================================================= */
/*04. Header styles start*/
.logo img {
    max-height: 50px;
}
.keystone-transparent-header-homeowner {
    background: rgb(var(--theme-bg)/0.87);
}
.keystone-transparent-header-contractor {
    background: rgb(var(--theme-bg)/0.92);
}
.keystone-transparent-header-designpro {
    background: rgb(var(--theme-bg)/0.94);
}
.navbar-nav:focus-visible {
    outline: 0;
}
.btn-keystone.active {
    background-color: rgb(var(--text-secondary) / 1);
    color: rgb(var(--text-white)/1);
}

.btn-keystone:hover {
    background-color: rgb(var(--text-secondary) / 1);
    color: rgb(var(--text-white)/1);
}

.btn-keystone-dropdown {
    background-color: rgb(var(--text-secondary) / 1) !important;
    color: rgb(var(--text-white)/1) !important;
    padding: 5px 30px;
}

.btn-keystone-dropdown:hover {
    background-color: rgb(var(--text-secondary) / 1) !important;
    color: rgb(var(--text-white)/1) !important;
}

.btn-filter-selected {
    background-color: transparent;
    border-color: #ccc;
}

.btn-filter-selected:hover {
    background-color: transparent;
    border-color: #ccc;
}
header .navbar .mega-search-menu.mega-menu-item .mega-sub-menu {
    width: max-content !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column;
}

header .navbar .mega-search-menu.mega-menu-item .mega-sub-menu .widget_custom_html {
    padding: 0 15px 15px !important;
}

body header .navbar #mega-menu-wrap-primary.mega-menu-wrap>ul#mega-menu-primary.max-mega-menu>li.mega-search-menu.mega-menu-item.mega-menu-item-has-children>a {
    display: flex;
    align-items: center;
}

body header .navbar #mega-menu-wrap-primary.mega-menu-wrap>ul#mega-menu-primary.max-mega-menu>li.mega-search-menu.mega-menu-item.mega-menu-item-has-children>a.mega-menu-link>span.mega-indicator[aria-hidden="true"] {
    display: none !important;
}
/*04. Header styles end*/

/* =========================================================
   05. Footer styles
========================================================= */
/*05. Footer styles start*/
.keystone-footer-bg {
    background-color: rgb(var(--theme-bg) / 1);
}
.footer-links a {
    text-decoration: none;
    color: rgb(var(--text-primary) / 1);
}
.newsletter-section {
    background-color: rgb(var(--theme-bg-2) / 1);
}
/*05. Footer styles end*/

/* =========================================================
   06. Common content
========================================================= */
/*06. Common content start*/
.bg-image {
    background-size: cover;
}
.mt-content-100 {
    margin-top: 100px;
}
.accordion {
    --bs-accordion-btn-color: #f8f8ff;
    --bs-accordion-btn-bg: rgb(var(--text-secondary) / 1);
    --bs-accordion-active-color: ghostwhite;
    --bs-accordion-active-bg: rgb(var(--text-secondary) / 1);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8f8ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f8f8ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.btn-outline {
    color: rgb(var(--text-white)/1);
    border-color: rgb(var(--text-white)/1);
    --bs-btn-hover-border-color: rgb(var(--text-white)/1);
}
.space-between {
    --bs-gutter-x: 5rem;
}

.hovereffect {
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid rgb(var(--hover-color) / 1);
}

.overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--hover-color) / 1);
    color: rgb(var(--text-white)/1);
    display: flex;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 11px;
}

.hovereffect:hover .overlay-text {
    opacity: 1;
}

table.table-bordered > :not(caption) > tr > th.state-header {
    background-color: #005398de;
    color: rgb(var(--text-white)/1);
}
.event-right-content .wp-block-column.is-vertically-aligned-top {
    align-self: auto;
}
/*06. Common content end*/

/* =========================================================
   07. Pages and Posts
========================================================= */
/*07. Pages and Posts start*/

/*Homepage start*/
.gallery-taxonomy-item,
.building-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding: 20px;
}
.gallery-taxonomy-item,
.home-start-building-section .building-box {
    aspect-ratio: 4/3;
}
.home-get-inspired-section .building-box {
    aspect-ratio: 3/4;
}
.gallery-taxonomy-item::before,
.building-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        180deg,
        rgba(65, 65, 65, 1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    z-index: -1;
    opacity: 0.5;
}
.building-box .building-box-title {
    font-size: 34px;
}

.home-find-a-pro-section {
    position: relative;
    background-image: url('/wp-content/uploads/SCM_bench-curved1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}
.home-find-a-pro-section:before {
    content: '';
    background: #000;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/*Homepage end*/
/* Product Category Page Start */
.category-tabss{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    columns: 4;
}
.tax-product-category .product-custom-field-title img {
    aspect-ratio: 16/9;
    object-fit: cover;
	height: 100%;
	object-position: center center;
}
.category-tabss .btn-keystone{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1.4em;
}
#productFilterForm .btn-keystone-dropdown{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
}
.dropdown-toggle::after{
    margin-left: auto;
}
#productFilterForm .dropdown .dropdown-menu{
    width: 100%;
}
/* Product Category Page End */
/* Product Details Page Start */
.product-custom-field-title {
    color: rgb(var(--text-secondary) / 1);
    font-weight: 600;
    cursor: pointer;
}
/* Product Details Page End */
/* Gallery Taxonomy Page Start */
.gallery-main .nav-item .nav-link,
.gallery-taxonomy-main .nav-item .nav-link {
    color: rgb(var(--text-primary)/1);
}
.gallery-main .nav-item .nav-link:hover,
.gallery-taxonomy-main .nav-item .nav-link:hover,
.gallery-taxonomy-main .nav-item .nav-link.active {
    background: rgb(var(--text-secondary)/1);
    color: rgb(var(--text-white)/1);
}
.gallery-item {
    position: relative;
    overflow: hidden;
}
.gallery-item .gallery-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: rgb(var(--text-primary)/0.5);
    z-index: 1;
}
.gallery-item .gallery-title {
    transform: translateY(100%);
}
.gallery-item:hover .gallery-title {
    transform: translateY(0);
}
.gallery-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 9),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 8),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 5),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 4),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 2),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 1) {
    grid-column: span 2;
}
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 10),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 7),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 6),
.gallery-grid-wrapper > .gallery-item:nth-child(10n + 3) {
    grid-column: span 4;
}
/* Gallery Taxonomy Page End */
/* Resources Page Start */
.resource-title-list-wrapper {
    border: 1px solid #dee2e6;
}

.resource-title-list-wrapper li.nav-item .nav-link {
    display: block;
    width: 100%;
}

.resource-title-list-wrapper li.nav-item .nav-link:hover,
.resource-title-list-wrapper li.nav-item .nav-link.active {
    background-color: rgb(var(--theme-bg)/1);
    color: rgb(var(--text-white)/1);
}

.resource-title-list-wrapper li.nav-item:not(:last-child) {
    border-bottom: 1px solid #dee2e6;
}

.resource-item img {
    aspect-ratio: 3/4;
}

.resource-item .resource-title {
    font-size: 16px;
}

.post-type-archive-resources .tab-pane.accordion-item.active.show {
    border-radius: 0;
    border-top: 0;
}

/* Resources Page End */
/* Contact Us Page Start */
select:focus,
select{
    box-shadow: none !important;
}
select#stateDropdown{
    background-color: rgb(var(--theme-bg)/1);
    color: rgb(var(--text-white)/1);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20stroke-width%3D'2'%20d%3D'm2%205%206%206%206-6'%2F%3E%3C%2Fsvg%3E");
}
select#stateDropdown option{
    background-color: rgb(var(--text-white)/1);
    color: rgb(var(--text-primary)/1);
}
#locationResults .theme-btn{
    background-color: rgb(var(--theme-bg)/1);
    color: rgb(var(--text-white)/1);
} 
/* Contact Us Page End */
/* Search Page Start */
.search-form-wrapper .theme-btn{
    background-color: rgb(var(--theme-bg)/1);
    color: rgb(var(--text-white)/1);
    border: 1px solid rgb(var(--theme-bg)/1);
}
/* Search Page End */
/*07. Pages and Posts end*/

/* =========================================================
   08. Extra styles
========================================================= */
/* 08. Extra styles start*/
/* 08. Extra styles end*/

/* =========================================================
   09. Media Query
========================================================= */
/*09. Media Query start*/

/* ================================
   Desktop First (max-width)
================================ */

/* Large Desktop */
@media screen and (max-width: 1199px) {
}

/* Desktop */
@media screen and (max-width: 991px) {
	.tab-content>.tab-pane {
        display: block;
        opacity: 1;
    }
}

/* Tablet */
@media screen and (max-width: 768px) {
	h2.ks-primary-title{
        font-size: 34px;
    }
	.building-box .building-box-title{
        font-size: 24px;
    }
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 9),
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 8),
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 5),
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 4),
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 2),
    .gallery-grid-wrapper > .gallery-item:nth-child(10n + 1) {
        grid-column: span 4;
    }
    .gallery-item .gallery-title {
        padding: 10px 20px;
    }
    .gallery-item .gallery-title {
        transform: translateY(0);
    }
}

/* Small Tablet */
@media screen and (max-width: 640px) {
}

/* Mobile */
@media screen and (max-width: 576px) {
}

/* Extra Small Mobile */
@media screen and (max-width: 480px) {
}

/* Very Small Mobile */
@media screen and (max-width: 420px) {
}

/* ================================
   Mobile First (min-width)
================================ */

/* Tablet and Up */
@media screen and (min-width: 576px) {
}

/* Tablet Landscape and Up */
@media screen and (min-width: 768px) {
}

/* Desktop and Up */
@media screen and (min-width: 992px) {
}

/* Large Desktop */
@media screen and (min-width: 1200px) {
}

/* Extra Large Screens */
@media screen and (min-width: 1400px) {
}

/*09. Media Query end*/