/*
Theme Name: Ecosolarlights
Theme URI: https://ecosolarlights.com/
Author: Entexis
Author URI: https://entexis.in/
Description: Bootstrap v.3 basic theme for developers to build their new theme very fast and easy.
*/


/*Required WordPress CSS*/
body{font-size:14px; font-family: "Manrope", sans-serif;} 
.aligncenter { display: block; margin: 5px auto 5px auto; text-align: center;}
.alignleft {display: inline; float: left; margin-right: 1.5em;}
.alignright {float: right; margin-left: 1.5em;}
.alignnone {clear: both;}
.wp-caption {border: 1px solid #ccc; margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block; margin: 1.2% auto 0; max-width: 98%;}
.wp-caption-text {text-align: center;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.container{ max-width: 96%; width:100%; margin:0 auto; padding:0 20px}
.site-branding {display: flex; align-items: center;}
.site-logo img { max-height: 60px; width: auto;}
.site-text {display: flex;flex-direction: column;}
.site-tagline {margin: 0; margin-left: 20px; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 800; line-height: 1.4; color: #00a3e4;}
.site-tagline span{display: block; text-align: start; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600;    line-height: 14.5px; color: #222; padding-top: 5px;}  
#header{background-color: #fff; position: relative; width:100%;  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; z-index: 999; padding:0 10px;} 
#content{padding: 60px 0 0 0;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border:0;}
.navbar-collapse {padding-right: 0; padding-left: 0;} 
.navbar-default{background: none;  border-color: transparent;}
.navbar{min-height: 0; margin-bottom: 0; border: 0} 
.navbar-collapse, .navbar-default{box-shadow:none; text-align: right;}
.navbar-nav {float: none; width: 100%;}
.navbar-nav>li {float: none; display:inline-block; margin-right: 12px;}
.navbar-default .navbar-nav>li>a{padding-left: 15px; padding-right: 15px; padding-top: 13px; padding-bottom: 13px;   transition-duration: 0.2s; color: #222; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 500; line-height: 24px;} 
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color: #00a3e4;}
.navbar-brand, .navbar-nav>li>a {text-shadow: none;}  
.navbar-default .navbar-nav>li:hover a:after{transform: translateY(12px); height: 10px; transition-duration: 0.2s; opacity: 1; transition: all 0.3s; position: absolute; content: ''; display: block; z-index: 2; left: 45%; width: 10px; border-radius: 50px; background-color: #00a3e4;}  
.row-with-vspace {margin-bottom: 10px;}
.navbar{padding-right: 190px;} 
.header-cta {display: flex; align-items: center; gap: 8px; background: #00a3e4; color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .2s, transform .15s; white-space: nowrap; width: 198px; position: absolute; right: 0;top: 3px;}   
.cta-badge { width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .25); font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center; }
.header-cta:hover{text-decoration:none; color:#fff; background-color: #7A7A7A;}
#main-column .post, #main-column .page {border: 0; margin-bottom: 0; padding: 0;} 
.home .entry-header{display:none;}
#homevideo{height:650px;}
body{overflow-x: hidden;}
.banner-heading h2{font-family: "Manrope", sans-serif; font-size: 54px; font-weight: 700; line-height: 1.3; color: #FFFFFF;}
.banner-heading h2 span{color:#00a3e4;}

.border-toprow .elementor-widget-html{display: flex; justify-content: space-between; align-content: flex-start; flex-wrap: wrap; position: relative; width: 100%;font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; line-height: 41px; color: #858585;} 
.border-toprow .elementor-widget-html div span{background-color:#fff; position:relative; z-index:1; padding:0 25px;}
.border-toprow .elementor-widget-html:after{border-top:1px solid #a1a1a1; width:100%; left:0; top:20px; position:absolute; content:""; display:block;}	
.center-miss-b span{color:#00a3e4;}
#text-show{text-shadow: -1px -1px 3px #00a3e4;}
#view-products{position:relative; padding-right:65px;}
#view-products:after{position: absolute; content: url(/wp-content/uploads/2026/05/Group-8-2.svg); right:15px; top:8px; width:35px; height:35px;}

.redlist-style ul{list-style: none; display: flex; flex-direction: column; gap: 14px; padding:0;}
.redlist-style ul li{display: flex; align-items: flex-start; gap: 12px; line-height:1.6; position:relative; padding-left: 20px;}
.redlist-style ul li:after{width: 8px; height: 8px; border-radius: 50%; background:#00a3e4; flex-shrink: 0; top: 11px; position:absolute; left:0; content:"";}
.backlight.border-toprow .elementor-widget-html div span{background-color:#fbeeed;}
#headingtext-color strong{font-weight:500; color: #a1a1a1;}

#borddr-right{position:relative;  padding-bottom: 10px;}
#borddr-right:after{position:absolute; width: 36px; height: 2px; background: #da251c; border-radius: 0px; bottom:-8px; content:""; left:0;}

.producthome .border-toprow .elementor-widget-html div span{background-color:#151515;}
.category-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.category-card {position: relative; border-radius: 8px; overflow: hidden; height: 400px; color: #fff; display: flex;align-items: flex-end; padding: 30px; text-decoration: none; transition: all 0.4s ease;}
/* Background overlay */
.category-card::before {content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2));}
.category-content {position: relative; z-index: 2; width: 100%; transition: all 0.4s ease;}
.category-title {font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 0; transition: all 0.3s ease;}
.category-desc, .category-btn {opacity: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease;}
.category-card:hover {transform: translateY(-6px);}
.category-card:hover .category-title {margin-bottom: 10px; font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 600; color:#fff;}
.category-card:hover .category-desc {opacity: 1; max-height: 200px; margin-bottom: 10px; font-family: "Manrope", sans-serif;
    font-size: 16px; font-weight: 400; color:#fff; margin-bottom:15px; } 
.category-card:hover .category-btn {opacity: 1; max-height: 50px;}
.category-card:hover .category-btn:after{position: absolute; content: url(/wp-content/uploads/2026/05/Group-8-2.svg); right:15px; top:8px; width:35px; height:35px;}

/* Button */
.category-btn {max-width: 320px;  position: relative; font-family: "Manrope", sans-serif; font-size: 18px; color: #ffffff;  border-radius: 50px;
    border-width: 2px;  border-color: #00a3e4;  background-color: #00a3e4; display: inline-block;  padding:12px 65px 12px 24px; position:relative;}
	
.category-btn:hover{background-color:#7A7A7A}
	
.videoheading p{position:relative; z-index:1; color: #fff;}

/*Footer*/
.displaynone {display:none!important;}
#site-footer{background: #222; padding: 50px 0 0; border-top: 3px solid #00a3e4; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #fff;}
#site-footer .widget-title{ font-family: "Manrope", sans-serif; font-size: 16px; color: #00a3e4; margin:0 0 15px; font-weight:600;} 
#site-footer ul{margin:0; padding:0;} 
#site-footer ul li a{text-align: start; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5;
 color: #fff;} 
#site-footer ul li{padding:5px 0; list-style:none;} 
.footer2 p{width:70%;} 
.fotter-col4 {display:flex; gap:25px;}
 

@media(max-width:1024px){
  .category-grid { grid-template-columns: repeat(2, 1fr);}
}

@media(max-width:600px){
  .category-grid {
    grid-template-columns: 1fr;
  }
}

 
.project-grid {display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 20px;}

.project-grid > div { width: 100% !important; height: 100% !important; display: block !important;margin: 0 !important;}
.card-1 {grid-column: 1 / span 2;  grid-row: 1;}
.card-2 {grid-column: 3; grid-row: 1 / span 2;}
.card-3 { grid-column: 1; grid-row: 2;}
.card-4 {grid-column: 2; grid-row: 2;}
.project-card {position: relative; height: 100%; border-radius: 18px; overflow: hidden; background-size: cover !important;  background-position: center !important; background-repeat: no-repeat;}
.overlay {position: absolute; bottom: 0; left: 0;width: 100%; padding: 25px; color: #fff; z-index: 2; background: linear-gradient(
    to top, rgba(0,0,0,0.75), rgba(0,0,0,0.8), transparent );}
.overlay h3 {font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 500; color: #FFFFFF;}
.overlay p {font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 400; color: #DBDBDB;}
.btn {max-width: 170px; position: relative; font-family: "Manrope", sans-serif; font-size: 18px; color: #ffffff; border-radius: 50px; border-width: 2px; border-color: #ffffff; border-style: solid; background-color: #61CE7000; display: inline-block; padding:10px 24px;}
.btn:hover {background: #fff; color: #000; }
.nav-wrap {display: none;}

.copright-bottom{background: #080808; padding: 20px 0px; margin-top:50px;}
.copright-bottom .container{display:flex;} 
.copright-bottom .fcopy{width:50%; font-size:14px; color:#888888;}
.fpolicy{width:50%; text-align:right; }
.fpolicy a{font-size: 16px; color: #888888; text-decoration: none; transition: color .2s; padding:0 15px; display:inline-block;}
.fpolicy a:hover{color:#fff;}
#contact-bot{margin:0 auto;}
#contact-bot strong{font-weight:500; color:#00a3e4;;}
.page #main-column .entry-header{display:none;}
#main-column .entry-content p{margin-bottom:20px;}
#main-column .entry-meta{display:none;}
#main-column .entry-meta p{font-family: "Manrope", Sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6em; color: #222222;}
.progress-bar {width: 200px; height: 4px; background: #ddd; border-radius: 2px; } 

/* ============================= */
/* MOBILE FIX */
/* ============================= */
@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
  }

  .project-card {
    height: 250px;
  }
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{background:none; color:#00a3e4; box-shadow: none;}
a, input, img{outline:none!important;}

.elementor-icon-box-icon span.elementor-icon{border: 1px solid rgba(218, 37, 28, 0.2); color:#da251c;}
.elementor-icon-box-icon span.elementor-icon svg{color:#da251c;  fill: #da251c;}
.benefit-card{padding: 36px 32px 40px!important; border-right: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2; transition: background .2s; position: relative;} 
.reveal.on {opacity: 1; transform: none;}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease;}
.benefit-card .elementor-icon-box-title{margin-bottom:15px;} 
.benefit-card:last-child {border-right: none;}
.d2 {transition-delay: .16s;}
.reveal.on { opacity: 1; transform: none;}
.d1 {transition-delay: .08s;}
.benefit-card:hover { background: #fafafa; border-top:3px solid #da251c; }
 .benefit-card {position: relative; overflow: hidden;}
.benefit-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #da251c;  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;}