/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root {
  --primary: #FEBD02;
  --secondary: #010101;
  --text: #010101;
  --accent:#71EEB8;
  --white:#fff;
}

.title .elementor-heading-title span {
    font-weight: 400 !important;
}
.title.line-sap .elementor-heading-title span {
    display: block;
}
.footer-form .row {
    display: flex;
    align-items: flex-start;
    column-gap: 30px;
    margin-bottom: 35px;
}
.footer-form .row .col-6 {
    width: 50%;
}
.footer-form .row .col-6 label,
.footer-form .row .form-group {
    width: 100%;
}
.form-group p {
    margin-bottom: 0;
}
.footer-form .row .form-control {
    height: 50px;
    font-size: 18px;
    font-weight: 500;
    color: #010101;
    text-transform: uppercase;
    border-radius: 10px;
    border: solid 1px #fff;
}
.footer-form .row label {
     font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 7px;
}
/* .footer-form .row .form-control:focus,
.footer-form .row .form-control:focus-visible {
    border: solid 1px var(--primary);
} */

.footer-form .row .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--text);
  opacity: 1;
}
.footer-form .row .form-control::-moz-placeholder { /* Firefox 19+ */
  color:  var(--text);
  opacity: 1;
}
.footer-form .row .form-control:-ms-input-placeholder { /* IE 10+ */
  color: var(--text);
  opacity: 1;
}
.footer-form .row .form-control:-moz-placeholder { /* Firefox 18- */
  color: var(--text);
  opacity: 1;
}
.footer-form .row .wpcf7-textarea.form-control {
    height: 100px;
}
.footer-form .submit-form {
    padding: 18px 30px;
    background-color: #FEBD02 !important;
    line-height: 1;
    transition: all 0.3s ease-out;
    margin: 0 auto;
}
.footer-form .submit-form:hover {
    background-color: var(--accent) !important;
    border: solid 1px var(--accent) !important;
}

.footer-form .wpcf7-response-output {
    color: var(--white);
    text-align: center;
}

.consultation-form .btn-row { position: relative; text-align: center; justify-content: center; margin-bottom: 0;}
.consultation-form .btn-row .wpcf7-spinner { position: absolute; left: 50%; transform: translateX(-50%); top: 105%;}

.quick-link ul {
    column-count: 2;
    display: inline-block !important;
    column-gap: 3vw;
}
.quick-link ul li a.elementor-item,
.service-link ul li a.elementor-item {
    padding: 0 0 0 15px;
    margin: 0;
    position: relative;
}
.quick-link ul li a.elementor-item:hover,
.service-link ul li a.elementor-item:hover {
    padding: 0 0 0 15px;
    margin: 0;
}
.quick-link ul li a.elementor-item:before,
.service-link ul li a.elementor-item:before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--accent) !important;
    position: absolute !important;
    left: 0;
    top: 12px;
    border-radius: 5px;
    opacity: 1 !important;
}
.working-hours .elementor-icon-list-items li .elementor-icon-list-text span {
    font-weight: 700;
}

/* .home-hero .swiper-wrapper .swiper-slide .swiper-slide-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
} */
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner {
    z-index: 2;
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents {
    width: 620px;
    margin: 0 auto;
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents h1 span {
    color: var(--accent);
    font-weight: 400;
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents .elementor-slide-button {
    position: relative;
    display: inline-flex;
    padding-right: 65px;
    overflow: hidden;
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents .elementor-slide-button:after {
    content: "\e801";
    font-family: "llf-icon";
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--secondary);
    font-size: 13px;
    color: var(--primary);
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents .elementor-slide-button .icon-arrow-down {
   position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%,-50%);
}
.home-hero .swiper-pagination {
    bottom: 25px !important;
}
.home-hero .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: solid 1px var(--secondary);
}
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents h1 span {
    display: block;
}
.home-hero .elementor-swiper-button-prev { left: 75px !important;}
.home-hero .elementor-swiper-button-next { right: 75px !important;}
.video-tab .e-n-tabs-heading button .e-n-tab-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.video-tab .e-n-tabs-heading .e-n-tab-title { flex: 0 0 calc(33.33% - 30px);}
.btn-rounded .elementor-button,
.btn-rounded-black .elementor-button {
    position: relative;
    padding-right: 64px;
}
.btn-rounded .elementor-button .elementor-button-icon,
.btn-rounded-black .elementor-button .elementor-button-icon {
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--primary);
    height: 100%;
    width: 50px;
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-rounded .elementor-button .elementor-button-icon .icon,
.btn-rounded-black .elementor-button .elementor-button-icon .icon,
.btn-arrow .elementor-button .elementor-button-icon .icon,
.olc_eva button span .icon {
font-size: 13px;
}
.btn-rounded-black .elementor-button .elementor-button-icon {
    background-color: var(--secondary);
    color: var(--primary);
}



.client-logos .swiper-slide .swiper-slide-inner img { opacity: 0.5; transition: all 0.3s ease-out;}
.client-logos .swiper-slide .swiper-slide-inner img:hover { opacity: 1;}


.custom-nav .elementor-swiper-button-next { border-radius: 0 10px 10px 0 !important;}
.custom-nav .elementor-swiper-button-prev { border-radius: 10px 0 0 10px !important;}
.nav-mobile .elementor-swiper-button { display: none !important;}
.btn-sticky .elementor-button .elementor-button-icon { background-color: var(--secondary); border-radius: 0 0 10px;}
.btn-sticky .elementor-button .elementor-button-icon .icon { color: var(--primary); font-size: 24px; transform: rotate(-90deg);}


.concept-carosuel .swiper-slide .swiper-slide-inner .elementor-slide-heading img {
    height: 65px !important;
    width: auto;
}
.concept-carosuel .swiper-slide .swiper-slide-inner .elementor-slide-heading span {
    display: block;
    margin: 10px 0;
}
.checklist .wpcf7-checkbox .wpcf7-list-item,
.checklist .wpcf7-radio .wpcf7-list-item { width: 100%; margin: 0;}
.ownership-form { width: 100%; max-width: 450px;}
.olc_eva .step .ownership-form span.wpcf7-form-control-wrap:before { display: none !important;}
.olc_eva .step .ownership-form .wpcf7-form-control-wrap .textbox { opacity: 1; padding: 8px; border-radius: 10px; height: 42px; border: solid 1px var(--secondary);}

.olc_eva .step .ownership-form .wpcf7-submit { padding: 8px 15px;}
.header-menu .elementor-nav-menu .sub-menu { max-width: 270px !important; width: 270px !important;}
.header-menu .elementor-nav-menu .sub-menu li a { white-space: normal;}
.post-nav .elementor-post-navigation__prev .elementor-post-navigation__link__prev { padding-right: 20px;}
.post-nav .elementor-post-navigation__next .elementor-post-navigation__link__next { padding-left: 20px;}
.post-nav .post-navigation__next--title,
.post-nav .post-navigation__prev--title { line-height: 1.2;}
p a { font-size: 18px;}
.yellow-box p a,
.yellow-box p a:hover { color: #010101;}
.yellow-box p a:hover { text-decoration: underline;}
.elementor-shortcode .wpcf7-response-output { display: none;}

.map-sec { display: flex; align-items: stretch;}
.map-sec .map-list-wrap { width: 37.5%; background-color: rgba(1, 1, 1, 0.05); padding: 3.90vw;}
.map-sec .map-svg { width: 62.5%; padding: 3.90vw;}
.map-sec .map-svg .map { height: 100%; display: flex; align-items: center; justify-content: center;}
.state-con { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 30px;}
.state-con .state-btn { min-width: 175px; height: 38px; border-radius: 5px; border: solid 1px rgba(1, 1, 1, 0.2); padding: 0 10px; text-align: left; font-size: 18px; text-transform: capitalize; font-weight: 600;}
.state-con .state-btn.avl { background-color: var(--secondary); color: var(--white);}
.state-con .state-btn.avl .icon { color: var(--primary);}
.state-con .state-btn.lmt { background-color: var(--primary); color: var(--secondary);}
.state-con .state-btn.rip { background-color: var(--accent); color: var(--secondary);}
.state-con .state-btn.avl:hover,
.state-con .state-btn.avl.active,
.state-con .state-btn.avl.hover-active { background-color: var(--white); color: var(--primary);}
.state-con .state-btn.lmt:hover,
.state-con .state-btn.lmt.active,
.state-con .state-btn.lmt.hover-active  { background-color: var(--white); color: var(--primary);}
.state-con .state-btn.rip:hover,
.state-con .state-btn.rip.active,
.state-con .state-btn.rip.hover-active { background-color: var(--white); color: #34D399;}
.state-con .state-btn .icon { margin-right: 8px;}
.state-con .state-btn em { font-size: 13px; font-weight: 400;}

.map svg .st-group.lmt .sta-name path,
.map svg .st-group.rip .sta-name path { fill: var(--secondary);}

.map-sec { background-color: var(--white);}
.map svg .st0{fill:var(--secondary)}
.map svg .st1{fill: var(--primary);}
.map svg .st2{fill:#808080;}
.map svg .st3{fill:none;stroke:#FEBD02;}
.map svg .st4{fill:#71EEB8;}
.map svg .st5{fill:#FEBD02;}
.map svg .st6{fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-miterlimit:10;}

.map svg .state,
.map svg .sta-name { cursor: pointer;}
.map svg .selected .state,
.map svg .highlight .state,
.map svg .highlight .state path { fill: var(--white) !important; stroke-width: 1px; stroke: var(--primary);}
.map svg .selected .sta-name path,
.map svg .highlight .sta-name path  { fill: var(--secondary);}



#mapTooltip { position:fixed; visibility: hidden; opacity: 0; transition:0.2s ease; background:rgba(255,255,255,1); color:var(--secondary); padding:12px 15px; border-radius:0; font-weight: 400; border: solid 1px var(--primary); font-size:13px; pointer-events:none; z-index:9999; line-height: 1.2;}

#mapTooltip.show{ opacity:1; visibility:visible;}

#mapTooltip strong{ display:block; margin-bottom:4px; font-size: 24px; font-weight: 700;}

.map-color-info { display: flex; justify-content: flex-end;}
.map-color-info ul { display: flex; flex-wrap: wrap; gap: 35px; row-gap: 5px;}
.map-color-info ul li { font-size: 18px; color: var(--secondary); font-weight: 600; display: flex; align-items: center;}
.map-color-info ul li i { width: 16px; height: 16px; background-color: #808080; border: solid 1px #010101; margin-right: 10px; border-radius: 18px;}
.map-color-info ul li i.avl { background-color: var(--secondary);}
.map-color-info ul li i.lmt { background-color: var(--primary);}
.map-color-info ul li i.rip { background-color: var(--accent);}






/* New Home */

.light-simulator{
    position:relative;
    width:100%;
    height:850px;
    margin:auto;
    overflow:hidden;
}

/* Background Images */
.scene{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:0.5s ease;
    background-repeat: no-repeat;
}

/* Default Image */
#mainScene{
    background-image:url("/spencer/outdoorlightingconcepts/wp-content/uploads/2026/05/light-off.jpg");
}

/* Overlay */
.scene::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}

/* Control Panel */
.control-panel{
    position:absolute;
    left:50%;
    bottom:60px;
    transform:translateX(-50%);
    width:90%;
    max-width:1134px;
    background:rgba(1,1,1,0.60);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:20px;
    backdrop-filter:blur(4px);
    padding:40px 30px;
    z-index:5;
    box-shadow: inset 0 0 10px 0 rgba(254,189,2,0.30);
}

.heading{
    position:absolute;
    top:-72px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(1,1,1,0.60);
    box-shadow: inset 0 0 10px 0 rgba(254,189,2,0.30);
    padding:24px 35px;
    border-radius:20px 20px 0 0;
    font-size:32px;
    color:#ffc400;
    font-weight:400;
    backdrop-filter: blur(4px);
    text-align: center;
    width: 100%;
    max-width: 780px;
    line-height: 1.2;
}

.heading span{
    color:#ffc400;
    font-weight:700;
}

.controls{
    display:flex;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
}

.control-box{
    flex:1;
    width:33%;
    padding-right:30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}
.control-box:after {
    content: "";
    width: 1px;
    height: 100%;
    background: #FEBD02;
background: linear-gradient(0deg,rgba(254, 189, 2, 0) 0%, rgba(254, 189, 2, 0.5) 48%, rgba(254, 189, 2, 0) 100%);
position: absolute;
right: 0;
top: 0;
}
.control-box:nth-child(1) { width: 25%;}
.control-box:nth-child(2) { width: 28%;}
.control-box:nth-child(3) { width: 33%;}
.control-box:last-child:after {
    display: none;
}

.control-box:last-child{
    border-right:none;
}

.control-title{
    color:#fff;
    font-size:18px;
    margin-bottom:30px;
    display:flex;
    align-items:center;
    justify-content: center;
    font-weight: 600;
    gap:10px;
    width: 100%;
}
.control-title .icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--secondary);
    border: solid 1px rgba(255,255,255,0.2);
    box-shadow: inset 0 5px 10px 0 rgba(254,189,2,0.25);
}

/* Toggle Switch */
.switch{
    position:relative;
    display:inline-block;
    width:100px;
    height:38px;
}

.switch input{
    display:none;
}


.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    border: solid 1px rgba(113, 238, 184, 0.1);
    background-color: rgba(255,255,255,0.1);
    border-radius:38px;
    transition:0.4s;
}

.slider:before{
    content:"";
    position:absolute;
    width:36px;
    height:36px;
    left:0px;
    bottom:0px;
    background:rgba(255,255,255,0.5);
    border: solid 2px rgba(254,189,2,0.10);
    border-radius:50%;
    transition:0.4s;
}

input:checked + .slider{
    background: var(--secondary);
    border: solid 1px var(--primary);
}

input:checked + .slider:before{
    transform:translateX(63px);
    border: solid 2px var(--primary);
    background:rgba(255,255,255,1);
}

/* Color Buttons */
.color-list{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content: center;
}

.color-btn{
    width:19px;
    height:19px;
    border-radius:50%;
    cursor:pointer;
    transition:0.3s;
    position: relative;
    overflow: hidden;
}

.color-btn:hover{
    transform:scale(1.15);
}
.twocolor:after {
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--white);
}
.threecolor:before,
.threecolor:after  {
    content: "";
    position: absolute;
    width: 33%;
    height: 100%;
}
.threecolor:before {
    left: 0;
    top: 0;
}
.threecolor:after {
    right: 0;
    top: 0;
}

.red{background:#E9333F;}
.orange{background:#E89930;}
.green{background:#29E237;}
.blue{background:#3152F5;}
.purple{background:#8323DC;}
.pink{background:#E32EBB;}
.redgreen{background:#E9333F;}
.redgreen:after { background-color: #29E237;}
.redgreen{background:#E9333F;}
.redgreen:after { background-color: #29E237;}
.redwhiteblue { background-color: var(--white);}
.redwhiteblue:before { background-color: #E9333F;}
.redwhiteblue:after { background-color: #3152F5;}
.orangepurple { background-color: #FFA500;}
.orangepurple:after { background-color: #800080;}

.slider .toggle-text { position: absolute; left: auto; right:17px; top: 8px; transition: all 0.3s ease-out; font-size: 18px; color: var(--white); font-weight: 600; text-transform: uppercase; }
input:checked + .slider .toggle-text { position: absolute; left: 17px; right: auto; }

@media (max-width: 1600px) {
.quick-link ul {
    column-count: 2;
    column-gap: 4.55vw;
}
}

@media (max-width: 1440px) {
.quick-link ul {
    column-count: 2;
    column-gap: 2vw;
}
.footer-form .row { margin-bottom: 30px;}
}
@media (max-width: 1366px) {
.quick-link ul { 
    column-count: 1;
    column-gap: 0vw;
}
.elementor-93 .elementor-element.elementor-element-a85fffe .elementor-nav-menu .elementor-item { white-space: normal;}
}

@media (max-width: 1024px) {
    .quick-link ul {
        column-count: 1;
        column-gap: 0;
    }
    .header-menu .elementor-nav-menu .sub-menu {
        max-width: inherit !important;
        width: 100% !important;
    }
    .map-sec { flex-wrap: wrap; flex-direction: column-reverse;}
    .map-sec .map-list-wrap,
    .map-sec .map-svg { width: 100%; padding: 40px 20px;}
    .state-con .state-btn { height: 35px; font-size: 14px; min-width: 158px;}
    .map-color-info { margin-bottom: 20px;}
    .map-color-info ul { gap: 20px;}
    .map-color-info ul li { font-size: 14px;}
    .heading{ width: 90%;}
    
}
@media (max-width: 768px) {
.home-hero .swiper-wrapper .swiper-slide .swiper-slide-inner .swiper-slide-contents {
    width: 100%;
}
.footer-form .row {
    column-gap: 20px;
}
.footer-form .row .form-control {
    height: 35px;
    font-size: 14px;
    padding: 0 10px;
}

.footer-form .row label {
    font-size: 14px;
}
.form-group .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    position: relative;
    font-size: 13px;
}
.footer-form .row p {
    margin-bottom: 0;
}
.footer-form .row.btn-row {
    justify-content: center;
}
.footer-form .row.btn-row .wpcf7-spinner { 
    position: absolute;
}
.video-tab .e-n-tabs-heading button .e-n-tab-icon {
    right: 5px;
    bottom: 5px;
}

.olc_eva button span,
.btn-rounded .elementor-button .elementor-button-icon {
    width: 40px;
}

.btn-rounded .elementor-button {
    padding-right: 58px;
}
.custom-nav .swiper { width: 100% !important;}
.custom-nav .swiper .swiper-slide .e-con-inner .elementor-widget-image a { width: 100%; margin-bottom: 15px !important;}
.platinum2024 { position: absolute !important; bottom: 20px !important;}
.platinum2025 { position: absolute !important; bottom: 105px !important;}
.concept-carosuel .swiper-slide {
    height: 220px !important;
}
.platinum-tag { left: auto !important; right: 10px !important;}
.platinum-tag25 { left: auto !important; right: 100px !important;}
.state-con .state-btn { min-width: 140px;}

.heading { font-size: 22px; padding: 15px 20px;}
.control-title { flex-wrap: wrap;}
.footer-form .row { margin-bottom: 20px;}

}

@media (max-width: 767px) {
.home-hero .elementor-swiper-button-next { right: 20px !important;}
.home-hero .elementor-swiper-button-prev { left: 20px !important;}
.video-tab .e-n-tabs-heading {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}
.video-tab .e-n-tabs-heading button {
    height: 90px;
    margin: 0 !important;
}
.video-tab .e-n-tabs-heading .e-n-tab-title { flex: 0 0 calc(32.33% - 5px);}
.video-tab .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text { z-index: 1;}
.nav-mobile .elementor-swiper-button {
    display: flex !important;
}
.concept-carosuel .swiper-slide {
    height: 320px !important;
}
.olc_eva .step label span:before { top: 1px;}
.map-sec .map-svg .map { display: block;}
 .map-sec .map-svg { padding-bottom: 40px;}
.state-con .state-btn { min-width: 49%;} 
.map-color-info { margin-bottom: 20px;}
.map-color-info ul { gap: 15px; row-gap: 0px; padding: 0; margin: 0;}
.map-color-info ul li { font-size: 13px;}
.map-color-info ul li i { width: 13px; height: 13px; margin-right: 5px;}
#mapTooltip { padding: 8px 12px; font-size: 12px;}
#mapTooltip strong { font-size: 14px;}
.platinum2025 { bottom: 90px !important;}

.heading { border-radius: 10px 10px 0 0;}
.light-simulator { height: 495px; background-color: var(--secondary);}
.scene { background-size: 100%; background-position: center top;}
.control-panel { bottom: 20px; padding: 20px; border-radius: 10px;}
.controls { align-items: flex-start;}
.control-box { padding-right: 15px;}
.control-box:after { right: -8px;}
.control-box:nth-child(1),
.control-box:nth-child(2),
.control-box:nth-child(3) { width: 25%;}
/* .control-box:nth-child(1),
.control-box:nth-child(2) { width: 50%;}
.control-box:nth-child(2) { padding-right: 0;}
.control-box:nth-child(2):after { display: none;}
.control-box:last-child { padding-top: 15px; padding-right: 0; width: 100%;}
.control-box:last-child:after { width: 100%; height: 1px; background: #FEBD02;
    background: linear-gradient(90deg, rgba(254, 189, 2, 0) 0%, rgba(254, 189, 2, 0.5) 48%, rgba(254, 189, 2, 0) 100%); left: 0; display: block;} */
.control-title { font-size: 14px; margin-bottom: 15px; text-align: center; line-height: 1;}
.control-title .icon { width: 50px; height: 50px;}
.control-title .icon img { width: 20px;}
.switch { width: 70px; height: 28px;}
.slider:before { width: 26px; height: 26px;}
.slider .toggle-text { font-size: 12px; right: 8px; top: 6px;}
input:checked + .slider:before { transform: translateX(37px);}
input:checked + .slider .toggle-text { left: 8px;}
.color-btn { width: 12px; height: 12px;}
.color-list { gap: 6px;}
.footer-form .row { margin-bottom: 20px;}

}