:root {
  --font-heading: 'Figtree', sans-serif;
  --font-body: 'Noto Sans', sans-serif;
  --bs-primary: #1B3978; 
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 27,57,120;
  --bs-btn-active-bg:#1B3978;
  --bs-btn-active-border-color:#1B3978 ;
}



.btn-outline-primary, .wpcf7 input[type=submit] {
    --bs-btn-color: #1B3978;
    --bs-btn-border-color: #1B3978;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1B3978;
    --bs-btn-hover-border-color: #1B3978;
    --bs-btn-focus-shadow-rgb: 85, 51, 255;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1B3978;
    --bs-btn-active-border-color: #1B3978;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #1B3978;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1B3978;
    --bs-gradient: none;
}


.list-group-item.active { background-color:var(--bs-primary); border-color: var(--bs-primary); color: #fff !important;  }
.list-group-item.active:hover, .list-group-item.active:focus { background-color: var(--bs-secondary) ; color: #fff !important; }


.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}

body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; font-size:20px ; color:var(--bs-primary);  }
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .navbar-brand { font-family: var(--font-heading); font-weight: 600; color: var(--bs-primary); }
p.lead { color: var(--bs-primary);  }

h2 { font-size: 2.1em; }
.footer-widget h4 { font-size: 1.3rem }
.footer-widget a, 
#content a:not(.nsl a,.btn,.woocommerce-product-gallery a), 
.home .wrapper a:not(.nsl a,.btn) { color: var(--bs-primary); text-decoration: none; position: relative;  }

.footer-widget a::after, 
#content a:not(.nsl a,.btn,.woocommerce-product-gallery a,.product a,.wc-block-cart-item__image a,.add_to_cart_button,.wc-block-grid__product-title,.wc-block-grid__product-title)::after, 
.home .wrapper a:not(.nsl a,.btn)::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background-color: var(--bs-primary); transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transform-origin: left; }

.footer-widget a:hover::after, 
.footer-widget a:focus::after, 
#content a:hover:not(.nsl a,.btn,.woocommerce-product-gallery a,.wc-block-cart-item__image a,.add_to_cart_button,.wc-block-grid__product-title)::after, 
#content a:focus:not(.nsl a,.btn,.woocommerce-product-gallery a,.wc-block-cart-item__image a,.add_to_cart_button,.wc-block-grid__product-title)::after, 
.home .wrapper a:hover:not(.nsl a,.btn,.add_to_cart_button)::after, 
.home .wrapper a:focus:not(.nsl a,.btn,.add_to_cart_button)::after{ transform: scaleX(0); opacity: 0; }

#wrapper-footer-full, #wrapper-footer { font-size: 0.8em; }

.btn, .wp-block-button__link.add_to_cart_button { --p: 0%; position: relative; display: inline-block; padding: 7px 20px; border-radius: 20px; transition: background-size 0.4s, background-position 0s 0.4s, color 0.4s; background-repeat: no-repeat; background-size: var(--p, 0%) 100%; background-position: left; border: 2px solid var(--bs-primary); }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-primary);  --bs-btn-hover-bg: #fff;  --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: 111, 82, 255; --bs-btn-active-color: #fff;  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); background-color: white;  color: var(--bs-primary); background-image: linear-gradient(var(--bs-primary), var(--bs-primary)); }
.btn-primary:hover, .btn-primary:focus { --p: 100%; background-position: right; color: white; }
.btn-secondary, .wp-block-button__link.add_to_cart_button { background-color: var(--bs-primary); color: white !important; background-image: linear-gradient(#fff, #fff); }
.btn-secondary:hover, .btn-secondary:focus, .wp-block-button__link.add_to_cart_button:hover, .wp-block-button__link.add_to_cart_button:focus { --p: 100%; background-position: right; color: var(--bs-primary) !important; }


.btn-primary.larger { border-radius: 30px; font-size: 1.2em;  }

.navbar-toggler { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B3978' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231B3978'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); opacity:1; }


.svg-underline { position: relative; display: inline-block; z-index: 1; padding-bottom: 0.2em; }
.svg-underline::before { content: ""; position: absolute; bottom: -0.3em; left: 50%; transform: translateX(-50%); width: 100%; max-width: 15ch; height: 0.5em; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1213 74'><path d='M1212.419,49.891c-1.141,3.965-5.24,6.292-9.23,5.24-9.25-2.63-18.62-4.86-27.95-7.19-18.003-3.599-36.107-6.67-54.29-9.21.73,4.8-3.73,9.01-8.45,8.36-185.54-22.25-305.099-22.689-426.099-26.469C411.65,15.741,408.575,15.535,47.499,40.481c-12.5,2.27-69.18,2.16-38.52-19.26,11.97-4.53,25.26-4.81,37.77-7.45C167.269-1.439,289.159-.469,410.439.441c57.52,1.77,115.08-.98,172.57,1.58,78.01,1.74,153.046-.089,230.956,3.731,96.248,5.082,273.236,7.8,368.194,28.449,7.9,3.75,33.31,2.81,30.26,15.68v.01Z' fill='%231B3978'/></svg>") no-repeat center bottom; background-size: contain; z-index: -1; pointer-events: none; }

.heading-overlap { position: relative; z-index: 2; }

.project-featured-image img { display: block; width: 100%; height: auto; box-shadow: 0 0 20px rgba(0,0,0,0.1); }


#wrapper-navbar { position: sticky; top: 0; z-index: 9500; background: white; display: block; }
.custom-logo-link { max-width: 180px }

#wrapper-navbar { box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2); }

.navbar-nav .nav-link { font-family: 'Noto Sans', sans-serif; font-weight: 600; font-size:16px ;text-transform: uppercase; background-image: linear-gradient( to right, #3FAFDA, #3FAFDA 50%, #1B3978 50% ); background-size: 200% 100%; background-position: -100%;
  display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.3s ease-in-out; text-decoration: none; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { background-position: 0; }

.navbar-icons .nav-link { font-size: 1.3rem; padding: 0.5rem; position: relative; }
.navbar-icons .badge { font-size: 0.7rem; padding: 0.35em 0.5em; }
.navbar-icons .nav-link i { transition: color 0.3s ease; color: #1B3978; }
.navbar-icons .nav-link:hover i { color: #3FAFDA; }

.navbar-toggler { border: none; }
.home .wrapper { padding-top:0; }

.hero-video-container { height: calc(100vh - 98.75px); overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-overlay { position: absolute; inset: 0; backdrop-filter: blur(2px); background-color: rgba(255, 255, 255, 0.5); z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; }
.hero-content .lead { max-width:650px }

.woocommerce-store-notice, p.demo_store { position: relative; margin: 0; width: 100%; font-size: 1em; padding: 1em 0; text-align: center; background-color: var(--bs-primary); color: #fff; z-index: 99998; transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease; overflow: hidden; max-height: 200px; opacity: 1; }
.woocommerce-store-notice.hidden { max-height: 0; opacity: 0; padding: 0; }
.hero-carousel-container { padding-top: 1rem; padding-bottom: 1rem; z-index: 999; }
.hero-carousel { z-index: 9; padding-bottom: 20px; }
.hero-carousel .slick-slide { text-align: center; }
.hero-carousel .slick-slide img { max-height: 80px; width: auto; height: auto; display: inline-block; margin: 0 auto; }


.blueLead { color: var(--bs-primary); font-size: 1.3em; line-height: 1.4em; }
.text22 { font-size: 20px;  }

.largertext p { font-size:1.7em; line-height:1.4em; font-weight:500; padding-bottom:0; margin-bottom:0; }

.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #fff; }
.video-wrapper iframe, .video-wrapper img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.custom-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1B3978; border: none; border-radius: 50%; width: 150px; height: 150px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.custom-play-button i { color: white; font-size: 4.5rem; }

.square-image { position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
.square-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

header.entry-header h1 { font-size:80px; letter-spacing:0 }
#wrapper-footer-full { background-color: #fff; margin-top:20px; padding-bottom: 12px; }

.project-grid { position: relative; margin: -10px; }
.grid-sizer { width: 25%; }
.project-tile { position: absolute; margin: 0; padding: 10px; box-sizing: border-box; }
.project-image-wrap { width: 100%; height: 100%; overflow: hidden; position: relative; }
.project-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-tile:hover .project-image-wrap img { transform: scale(1.2); }
.project-tile .overlay { margin: 10px; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.22); transition: background-color 0.3s ease; z-index: 1; }
.project-tile h3 { position: absolute; bottom: 20px; left: 20px; padding-right: 20px; color: white; margin: 0; z-index: 2; }
#content .project-tile a { position: absolute; inset: 0; z-index: 3; }
.project-tile:hover img { transform: scale(1.2); }
.project-tile:hover .overlay { background-color: rgba(0, 0, 0, 0.47); }
.mod-small  { width: 25%; height: 250px; }
.mod-wide   { width: 50%; height: 250px; }
.mod-tall   { width: 25%; height: 500px; }
.mod-large  { width: 50%; height: 500px; }

.price.custom-price-label { font-size: 17.14px !important; }

.bg-light { background-color: #f8f9fa !important; }
.custom-section.is-testimonial { background: #eef6f9; }
.testimonial-content { font-style: italic; border-left: 4px solid #ccc; padding-left: 1rem; font-size: 1.4em; }
.project-navigation a { font-family: 'Noto Sans', sans-serif; font-weight: 600; text-transform: uppercase; background-image: linear-gradient( to right, #3FAFDA, #3FAFDA 50%, #1B3978 50% ); background-size: 200% 100%; background-position: -100%;
  display: inline-block; padding: 5px 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.3s ease-in-out; text-decoration: none; }


.project-navigation a:hover, .project-navigation a:focus {  background-position: 0; }

.notice-box { border-radius: .3rem; border: 1px solid rgba(27,57,120, .125); position: relative; text-align: center;  }
.notice-box h3 { letter-spacing: 1.6px; font-size: 1rem; text-transform: uppercase; color: var(--bs-primary); line-height: 1rem; padding: 0 10px; margin: 0; position: absolute; top: -6px; transform: translateX(-50%); display: inline-block; background-color: #fff; }
.notice-box-text { padding:40px 20px; }

#sumobabylogo { opacity: 1; transition: opacity 0.3s ease-in-out; }
#sumobabylogo:hover, #sumobabylogo:focus { opacity: 0.6; }
.privacy-policy .entry-header { margin-bottom:0 !important; padding-bottom:0 !important }
.privacy-policy .content-area .py-4 { padding-top:0 !important }

.woocommerce table.shop_attributes th { min-width:250px; width:30%; font-size: 0.9em; }

.woocommerce div.product form.cart .variations select {  padding-left:10px; border:1px solid var(--bs-primary); color: var(--bs-primary); }
.related.products { clear: both; padding-top: 25px; }
#room-volume-calculator .unitinfo { border-left: none; }
#room-volume-calculator .fa-circle-info { color: var(--bs-primary); font-size: 1.4rem; cursor: pointer }

.tippy-box { background: var(--bs-primary); }
.tippy-arrow {color: var(--bs-primary) }
.unitinfo.btn-outline-secondary, .unitinfo.btn-outline-secondary[aria-expanded="false"] {
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.unitinfo.btn-outline-secondary:hover,
.unitinfo.btn-outline-secondary:focus,.unitinfo.btn-outline-secondary[aria-expanded="true"]  {
  background-color: var(--bs-primary);
  color: #fff;
  border-top: 1px solid var(--bs-primary);
  border-right: 1px solid var(--bs-primary);
  border-bottom: 1px solid var(--bs-primary);
  border-left: none; 
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

.unitinfo.btn-outline-secondary:hover .fa-circle-info,
.unitinfo.btn-outline-secondary:focus .fa-circle-info {
  color: #fff !important;
}

.fade-up, .site-main .row {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
    transition-delay: var(--delay, 0ms)
}

.fade-up.in-view, .site-main .row.in-view {
  opacity: 1;
  transform: translateY(0);
}

.prodfeatures h4, .prodfeatures h3 { font-size: 1.4rem;;  }

.compare-wrap {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 6px;

}

.compare {
  display: grid;
  grid-template-columns: minmax(180px, 22%) 1fr;
}

.compare .col {
  display: grid;
  grid-auto-rows: minmax(44px, auto);
  align-content: start;
}

.compare .col--specs {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid #ddd;
}

.compare .cols-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0;
}

.compare .cols-scroll .col {
  scroll-snap-align: start;
  border-right: 1px solid #eee;
}

.compare .cell {
  padding: 0.75rem;
  border-bottom: 1px solid #f2f2f2;
  line-height: 1.25rem;
  color: var(--bs-primary);
  font-size:0.8em;

}

.compare .cell.head {
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size:1em;
}
.compare .stronger { font-weight: 700; }
.compare .cols-scroll { grid-auto-columns: 260px; }




@media (max-width: 1024px) {
  .grid-sizer { width: 50%; }
  .mod-small  { width: 50%; height: 250px; }
  .mod-wide   { width: 50%; height: 250px; }
  .mod-tall   { width: 50%; height: 500px; }
  .mod-large  { width: 50%; height: 500px; }
 .compare .cols-scroll { grid-auto-columns: 300px; }
}

@media (min-width: 768px) {
  .heading-overlap-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
  }
}



@media only screen and (max-width: 768px) {
  .custom-play-button { width: 100px; height: 100px; }
  .custom-play-button i { font-size: 2rem; }
  .grey-section img { max-width:80%; }
  .grey-section { padding-left:12px; padding-right: 12px; }
  h2 { font-size: 2.4em; }
	header.entry-header h1 { font-size: 2.6em }
	.compare .cols-scroll { grid-auto-columns: 85vw; }
    .compare .cell { font-size: 0.65em }
    .compare .cell.head { font-size: 0.8em }
    .compare { grid-template-columns: minmax(80px, 130px) 1fr; }
    .col--specs {
    max-width: 130px;
    width: 130px;

    word-wrap: break-word;
  }
 
	.project-grid { display: flex; flex-direction: column; margin: 0; gap: 0; }
  .project-tile, .mod-small, .mod-wide, .mod-tall, .mod-large, .grid-sizer { position: relative !important; width: 100% !important; height: auto !important; }
  .project-tile { padding: 0; margin-top:15px }
  .grid-sizer { height: 0; }
  .mod-tall .project-image-wrap, .mod-large .project-image-wrap { height: 400px; }
  .mod-small .project-image-wrap, .mod-wide .project-image-wrap { height: 200px; }
  .project-image-wrap { position: relative; overflow: hidden; }
  .project-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .project-tile .overlay { margin: 0; }
	.shadow-md-only {
    box-shadow: none !important;
  }
}

