﻿:root {
--bg-lighter: #f2f1ef;
--forest-olive: #2A3B29;
--forest-olive-rgb: 42, 59, 41;
--sandstone: #C4A47C;
--sandstone-rgb: 196, 164, 124;
--bs-text-opacity: 1;
--bs-bg-opacity:1;
}

.section-tag {
letter-spacing: 2px;
font-size: 1rem;
margin-top: 0;
margin-bottom: .5rem !important;
color: #C4A47C;
font-weight: 500;
text-transform: uppercase;
line-height: 1.2;
display: block;
}

.bg-lighter {background-color: #f2f1ef;}

.bg-canvas-light{background:url('/i/canvas-light.webp')}
.bg-canvas-dark{background:url('/i/canvas-dark.webp')}

.text-sandstone {color: rgba(var(--sandstone-rgb), var(--bs-text-opacity)) !important;}
.bg-sandstone {background-color: rgba(var(--sandstone-rgb), var(--bs-bg-opacity)) !important;}

.text-olive {color: rgba(var(--forest-olive-rgb), var(--bs-text-opacity)) !important;}
.bg-olive {background-color: rgba(var(--forest-olive-rgb), var(--bs-bg-opacity)) !important;}


.swatch-white{background:url('/i/Arctic-White.webp')}
.swatch-olive{background:url('/i/Forest-Olive.webp')}
.swatch-sandstone{background:url('/i/Sandstone.webp')}

.icon-circle {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}

.heading-underline {
display: inline-block;
opacity: 0.5;
border-bottom: 1px solid var(--sandstone);
width: 80px;
margin-top: -10px;
margin-bottom: 30px;
}


.lined-heading {
display: flex;
align-items: center;
text-align: center;
}

.lined-heading::before,
.lined-heading::after {
content: "";
flex: 1; opacity:0.33333;
border-bottom: 1px solid var(--sandstone);
margin: 0 15px; min-width:40px /* Adjust spacing between text and lines */
}

.navbar .navbar-nav, h1, h2, h3, h4, h5, h6 {
font-family: 'Atkinson Hyperlegible',sans-serif;
}

body {
font-family: 'Atkinson Hyperlegible',sans-serif;
}

button, input, optgroup, select, textarea {
font-family: 'Atkinson Hyperlegible',sans-serif;
}

.navbar-transparent {
background-color: transparent !important;
}
/*.navbar-transparent {
position: absolute;
top: 0;
width: 100%;
background-color: transparent !important;
}*/

.swatch {
text-decoration: none
}

img {
border: 0px none;
outline: 0px none;
}

/* Hero Section */
.hero {max-width:1600px; margin-left:auto; margin-right:auto;
color: #fff;
background: url('/i/Dome-on-Wooden-Platform.webp') no-repeat center center;
background-size: cover;
min-height: 80vh;
display: flex;
align-items: center;
transition: background-image 0.4s ease-in-out;
}

.hero h1 {
font-size: 2.75rem;
line-height: 1.125;
}


/*mega-menu*/
.mega-menu .menu > li > a i {
padding-left: 5px;
font-size: 1.2em;
width: 36px;
position: relative;
top: -1px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #cdcdcd
}

.dropdown-menu > li > a i.fab, .dropdown-menu > li > a i.far, .dropdown-menu > li > a i.fas, .mega-menu .menu > li > a i.fab, .mega-menu .menu > li > a i.far, .mega-menu .menu > li > a i.fas {
width: 36px;
text-align: center
}

li.mega-menu .menu {
list-style: none;
padding: 0;
margin: 0;
box-shadow: none;
border: none;
min-width: 0;
background-color: transparent
}

.mega-menu .menu li {
position: relative
}

.mega-menu.dropdown {
position: static
}

.mega-menu > a {
position: relative
}

.mega-menu .dropdown-menu {
left: 0;
width: 100%;
padding: 20px 30px
}

.mega-menu .menu {
list-style: none;
padding: 0;
margin: 0;
box-shadow: none;
border: none;
min-width: 0;
background-color: transparent
}

.mega-menu .menu li {
position: relative
}

.mega-menu .menu > li > a {
padding: 5px 0;
border-top: 1px solid #f7f7f7;
display: block;
-webkit-transition: none;
-o-transition: none;
transition: none;
text-align: left
}

.mega-menu h6 {
font-weight: 700
}

.shadow-dark {
    text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000; 
    /*text-shadow: 5px 5px 10px rgba(11,11,11,1), -5px -5px 10px rgba(11,11,11,1);*/
}
.shadow-white {
    text-shadow: 1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px 0px 0 #ffffff, 0px 1px 0 #ffffff, -1px 0px 0 #ffffff, 0px -1px 0 #ffffff;
    /*text-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #FFFFFF, 5px 5px 10px rgba(255,255,255,1), -5px -5px 10px rgba(255,255,255,1);*/
}

.bg-overlay {
background-color: #434343
}

overlay-dark, .overlay-dark20, .overlay-dark30, .overlay-dark40, .overlay-dark60, .overlay-dark80, .overlay-dark90, .overlay-light, .overlay-light80 {
position: relative;
z-index: 1;
}

.overlay-dark:before, .overlay-dark20:before, .overlay-dark30:before, .overlay-dark40:before, .overlay-dark60:before, .overlay-dark80:before, .overlay-dark90:before, .overlay-light:before, .overlay-light80:before {
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}

.overlay-dark:before {
background-color: rgba(34,34,34,0.85);
}

.overlay-dark20:before {
background-color: rgba(34,34,34,0.2);
}

.overlay-dark30:before {
background-color: rgba(34,34,34,0.3);
}

.overlay-dark40:before {
background-color: rgba(34,34,34,0.4);
}

.overlay-dark60:before {
background-color: rgba(34,34,34,0.6);
}

.overlay-dark80:before {
background-color: rgba(34,34,34,0.8);
}

.overlay-dark90:before {
background-color: rgba(34,34,34,0.9);
}


.overlay-light:before {
background-color: rgba(255,255,255,0.4);
}

.overlay-light80:before {
background-color: rgba(255,255,255,0.8);
}

.page-triangle::before {
background-color: inherit;
top: -100px;
}
.form-check{padding-left:0px !important}
input[type="checkbox"], input[type="radio"] {
zoom: 1.75;
vertical-align: middle;
margin-top: .25em;
margin-bottom: .25em;
}

::placeholder{color:#aaa !important}


.social {
list-style: outside none none;
padding: 0;
}

.social li {
display: inline-block;
list-style: outside none none;
margin:0 .35em;
}

.social li a {
display: block;
font-size: 30px;
line-height: 30px;
height: 45px;
width: 45px;
text-align: center;
}


#footer-text span {
padding-left: 7px !important;
padding-right: 7px !important;
}

img {
max-width: 100%;
height: auto;
border: none !important;
}

@media (max-width:767px) {
#footer-text span {
padding-left: 0;
padding-right: 0;
height: 0;
font-size: 0;
display: block;
}

#footer-text span:after, #footer-text span:before {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
}

.columns {
-webkit-column-width: 200px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
-moz-column-width: 200px;
-moz-column-count: 4;
-moz-column-gap: 20px;
column-width: 200px;
column-count: 4;
column-gap: 20px;
text-align: left;
list-style: none;
padding-left: 0;
margin-left: 0;
}

.columns li {
padding-left: 30px;
}






.portfolio-box {
position: relative;
overflow: hidden;
}

.portfolio-box a{
display: block;
}

.portfolio-box .portfolio-image-wrap {
display: block;
transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}

.portfolio-box .portfolio-image-wrap img {
width: 100%;
}

.portfolio-box:hover .portfolio-image-wrap {
transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
-o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
-moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
-webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
width: 100%;
}

.portfolio-box .portfolio-caption-mask {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out 0s;
z-index: 9;
}

.portfolio-box:hover .portfolio-caption-mask {
opacity: 1;
visibility: visible;
}

.portfolio-box .portfolio-caption-mask .portfolio-caption-text {
bottom: -60px;
left: 0;
opacity: 0;
padding-left: 30px;
padding-right: 30px;
position: absolute;
text-align: left;
transition: all 0.5s ease-in-out 0s;
}

.portfolio-box:hover .portfolio-caption-mask .portfolio-caption-text {
bottom: 30px;
opacity: 1;
}



.portfolio-box .portfolio-caption-mask h1, .portfolio-box .portfolio-caption-mask h2, .portfolio-box .portfolio-caption-mask h3, .portfolio-box .portfolio-caption-mask h4, .portfolio-box .portfolio-caption-mask h5, .portfolio-box .portfolio-caption-mask h6 {
color: #fff;
margin-bottom: 5px;
}

.portfolio-box .portfolio-caption-mask p {
margin-bottom: 0px;
color: #fff;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}


.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
opacity: .95;
}


.circle-hold {
position: relative;
margin: 0 auto 20px;
width: 110px;
height: 110px;
background-color: rgb(248, 249, 250);
border-radius: 50%;
}

.circle-hold > i {
color: #434343;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
line-height: 60px;
margin-top: -30px;
margin-left: -30px;
font-size: 52px;
text-align: center;
}


/* Lists design */
.check-list, .benefit-list {
list-style: none;
padding-left: 0;
}

.check-list li, .benefit-list li {
position: relative;
padding-left:25px;
margin-bottom: 6px;
}

.check-list li::before {
content: "\f058"; /* check circle */
font-family: "Font Awesome 7 Free";
font-weight: 400;
position: absolute;
left: 0;
color: var(--forest-olive);
}

.benefit-list li::before {
content: "\f111"; /* simple small bullet dot */
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 0.4rem;
position: absolute;
left: 4px;
top: 6px;
color: var(--text-sandstone);
}

.badge-tag {
padding: 6px 16px;
color: #666;
font-weight: 700;
font-size: 1.4rem;
letter-spacing: 1px;
display: inline-block;
border-radius: 4px;
}

/* Sidebar Upgrade Options Controls */
.productconfig {
border: 1px solid #EAEAEA;
}

.option-group-title {
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 10px;
}

.option-group-title i {
font-size: 1rem;
width: 20px;
text-align: center;
}

.form-row-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed #EAEAEA;
font-size: 0.82rem;
}

.form-row-item:last-child {
border-bottom: none;
}

.upgrade-price-tag {
font-weight: 600;
font-size: 0.85rem;
white-space: nowrap;
}


/* Cards Grid */
.dome-card {
position: relative;
overflow: hidden;
border-radius: 5px 5px 0 0;
}

.dome-card img {
transition: transform 0.5s ease;
width: 100%;
height: 300px;
object-fit: cover;
}

.dome-card:hover img {
transform: scale(1.05);
}

.dome-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
padding: 20px 15px;
color: #fff;
}

.dome-card-title {
font-size: 0.8rem;  letter-spacing:1px;
font-weight: 500;
text-transform: uppercase;
}

.dome-card-link {
font-size: 0.75rem;
color: rgba(255,255,255,0.8);
text-decoration: none;
}