*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
overflow-x:hidden;
background:#fff;
}

/* =========================
   NAVBAR
========================= */

.navbar{
position:absolute;
top:0;
left:0;
width:100%;
z-index:999;
padding:26px 70px;

display:flex;
align-items:center;
justify-content:space-between;

transition:.4s ease;
}

.navbar.scrolled{
position:fixed;
background:rgba(20,20,20,.35);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}

.logo img{
height:58px;
display:block;
}

.nav-menu{
display:flex;
align-items:center;
gap:55px;
}

.nav-menu a{
color:#fff;
text-decoration:none;
font-size:17px;
font-weight:500;
transition:.3s;
}

.nav-menu a:hover{
opacity:.7;
}

.nav-right{
display:flex;
align-items:center;
gap:30px;
}

.language{
color:#fff;
text-decoration:none;
font-size:18px;
font-weight:500;
}

.cta-btn{
background:#ff5c39;
color:#fff;
text-decoration:none;
padding:18px 34px;
border-radius:22px;
font-size:17px;
font-weight:600;
transition:.35s;
}

.cta-btn:hover{
transform:translateY(-3px);
}

/* =========================
   HERO
========================= */

.hero{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.15),
rgba(0,0,0,.35)
);
}

.hero-content{
position:absolute;
left:50%;
top:58%;
transform:translate(-50%,-50%);
text-align:center;
z-index:5;
width:100%;
padding:0 20px;
}

.hero-content h1{
font-size:9vw;
font-weight:300;
line-height:.92;
letter-spacing:-4px;
color:#fff;
}

.hero-buttons{
margin-top:45px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-light{
background:#fff;
color:#111;
text-decoration:none;
padding:18px 38px;
border-radius:50px;
font-size:18px;
font-weight:600;
transition:.3s;
}

.btn-outline{
border:1px solid rgba(255,255,255,.7);
color:#fff;
text-decoration:none;
padding:18px 38px;
border-radius:50px;
font-size:18px;
font-weight:600;
backdrop-filter:blur(10px);
transition:.3s;
}

.btn-light:hover,
.btn-outline:hover{
transform:translateY(-3px);
}

/* =========================
   INTRO SECTION
========================= */

.intro{
padding:160px 0;
background:#f5f5f5;
}

.intro-wrap{
width:min(1200px,90%);
margin:auto;
}

.intro h2{
font-size:110px;
font-weight:300;
line-height:.95;
color:#202020;
}

.intro h2 span{
display:block;
color:#b2a6a6;
}

.intro p{
margin-top:50px;
max-width:1100px;
font-size:28px;
line-height:1.8;
color:#444;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

.intro h2{
font-size:80px;
}

}

@media(max-width:991px){

.navbar{
padding:20px;
}

.nav-menu{
display:none;
}

.hero-content h1{
font-size:70px;
}

.intro h2{
font-size:60px;
}

.intro p{
font-size:18px;
}

}

@media(max-width:600px){

.hero-content h1{
font-size:48px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.btn-light,
.btn-outline{
width:260px;
text-align:center;
}

.intro{
padding:100px 0;
}

.intro h2{
font-size:42px;
}

}

.expertise-section{

    background:#f2eeee;

    padding:120px 0;

    overflow:hidden;
}

.section-title{

    text-align:center;

    margin-bottom:60px;
}

.section-title h2{

    font-size:70px;
    font-weight:300;
}

.section-title span{

    color:#b3a5a5;
}

.expertise-slider{

    display:flex;

    gap:30px;

    overflow-x:auto;

    padding:0 80px;

    scroll-behavior:smooth;
}

.expertise-slider::-webkit-scrollbar{
    display:none;
}

.expertise-card{

    min-width:380px;
    height:640px;

    background:#f8f8f8;

    border-radius:40px;

    position:relative;

    overflow:hidden;

    flex-shrink:0;

    transition:.5s ease;
}

.expertise-card:hover{

    transform:translateY(-10px);
}

.expertise-card video{

    width:100%;
    height:100%;

    object-fit:cover;
}

.card-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.75)
    );
}

.card-content{

    position:absolute;

    left:40px;
    right:40px;
    bottom:40px;

    color:#fff;
}

.card-content h3{

    font-size:52px;

    line-height:1.05;

    margin-bottom:20px;

    font-weight:300;
}

.card-content p{

    font-size:18px;

    line-height:1.7;
}

.text{

    position:absolute;

    left:50px;
    right:50px;

    bottom:60px;
}

.text h3{

    font-size:34px;

    line-height:1.15;

    font-weight:300;

    color:#111;
}

.text span{

    display:block;

    color:#b5a7a7;
}

/* ICONS */

.icon-circle{

    width:60px;
    height:60px;

    background:#ff5b38;

    border-radius:50%;

    margin:50px;
}

.icon-drop{

    width:60px;
    height:60px;

    background:#ff5b38;

    border-radius:50% 50% 50% 0;

    transform:rotate(-45deg);

    margin:60px;
}

.icon-ring{

    width:60px;
    height:60px;

    border:15px solid #ff5b38;

    border-radius:50%;

    margin:50px;
}

.icon-grid{

    display:flex;

    gap:10px;

    margin:60px;
}

.icon-grid span{

    width:22px;
    height:22px;

    background:#ff5b38;

    border-radius:50%;
}

.expertise-card{
    position:relative;
    overflow:hidden;
    width:380px;
    height:650px;
    border-radius:40px;
    background:#f7f7f7;
    transition:.5s ease;
}

.card-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;

    transition:.5s ease;
}

.card-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    opacity:0;

    transition:.5s;
}

.expertise-card:hover .card-video{
    opacity:1;
}

.expertise-card:hover .card-overlay{
    opacity:1;
}

.expertise-card:hover{
    width:650px;
}

.expertise-card:hover .text h3,
.expertise-card:hover .card-content h3,
.expertise-card:hover .card-content p{
    color:#fff;
}

/* ==========================
   NUMBERS SECTION
========================== */

.numbers-section{

    background:#f4f2f1;

    padding:120px 80px;
}

.numbers-grid{

    display:grid;

    grid-template-columns:
    540px 1fr 1fr;

    grid-template-rows:
    310px 310px;

    gap:40px;

    max-width:1800px;

    margin:auto;
}

/* LEFT CARD */

.main-card{

    grid-row:span 2;

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:#0f5d4d;

    padding:40px;

    color:white;
}

.main-content{

    position:relative;

    z-index:2;
}

.main-content h2{

    font-size:68px;

    line-height:1.05;

    font-weight:300;
}

.main-content span{

    color:#ff5b39;
}

.learn-btn{

    display:inline-block;

    margin-top:30px;

    padding:14px 28px;

    border-radius:18px;

    background:#0b4d40;

    color:white;

    text-decoration:none;

    font-weight:500;
}

/* Decorative Shape */

.star-bg{

    position:absolute;

    inset:0;
}

.star-bg span{

    position:absolute;

    width:280px;
    height:20px;

    background:#08453a;

    left:50%;
    bottom:120px;

    transform-origin:center;
}

.star-bg span:nth-child(1){transform:translateX(-50%) rotate(0deg);}
.star-bg span:nth-child(2){transform:translateX(-50%) rotate(45deg);}
.star-bg span:nth-child(3){transform:translateX(-50%) rotate(90deg);}
.star-bg span:nth-child(4){transform:translateX(-50%) rotate(135deg);}
.star-bg span:nth-child(5){transform:translateX(-50%) rotate(180deg);}
.star-bg span:nth-child(6){transform:translateX(-50%) rotate(225deg);}
.star-bg span:nth-child(7){transform:translateX(-50%) rotate(270deg);}

.star-bg .active{

    background:#ff5b39;

    width:260px;

    transform:
    translateX(-50%)
    rotate(30deg);
}

/* RIGHT CARDS */

.stat-card{

    background:white;

    border-radius:32px;

    border:1px solid #ece7e5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    transition:.35s;
}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.icon{

    font-size:42px;

    color:#ff5b39;

    margin-bottom:20px;
}

.stat-card h3{

    font-size:72px;

    font-weight:400;

    margin-bottom:10px;

    color:#111;
}

.stat-card p{

    font-size:24px;

    color:#333;
}

/* MOBILE */

@media(max-width:1200px){

.numbers-grid{

grid-template-columns:1fr;
grid-template-rows:auto;
}

.main-card{
min-height:500px;
}

.stat-card{
min-height:280px;
}

}

.promise-section{

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:100px 10%;

    background:#f4f2f1;
}

.promise-left{
    width:50%;
}

.promise-left h2{

    font-size:90px;
    font-weight:300;
    line-height:1;
}

.promise-left span{
    display:block;
    color:#b6a8a8;
}

.promise-left p{

    margin-top:35px;

    max-width:700px;

    font-size:20px;
    line-height:1.8;
}

.learn-btn{

    margin-top:40px;

    display:inline-block;

    padding:16px 30px;

    border-radius:20px;

    background:#e8e2dd;

    color:#111;

    text-decoration:none;
}

.promise-right{

    width:420px;

    display:flex;
    flex-direction:column;

    gap:20px;
}

.promise-card{

    height:70px;

    border-radius:18px;

    background:#e9e5e3;

    display:flex;

    align-items:center;

    padding-left:35px;

    font-size:24px;

    transition:.6s;
}

.promise-card.active{

    height:170px;

    background:#ff5a36;

    color:white;

    font-size:34px;
}

/* ===================================
            FOOTER
=================================== */

.solora-footer{

    background:#084f43;

    color:white;

    padding:0 80px 40px;

    overflow:hidden;
}

/* CTA CARD */

.footer-cta{

    position:relative;

    background:#156454;

    border-radius:35px;

    padding:90px;

    margin-bottom:80px;

    overflow:hidden;
}

.cta-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

    z-index:2;
}

.cta-content h2{

    font-size:85px;

    line-height:1;

    font-weight:300;

    max-width:900px;
}

.cta-content span{

    color:#ff5a36;
}

.cta-btn{

    background:#ff5a36;

    color:white;

    text-decoration:none;

    padding:20px 40px;

    border-radius:20px;

    font-size:18px;

    font-weight:600;

    transition:.3s;
}

.cta-btn:hover{

    transform:translateY(-5px);
}

/* Decorative Pattern */

.footer-pattern{

    position:absolute;

    inset:0;
}

.footer-pattern span{

    position:absolute;

    background:#0d564a;
}

.footer-pattern span:nth-child(1){

    width:500px;
    height:22px;

    top:50px;
    right:120px;
}

.footer-pattern span:nth-child(2){

    width:350px;
    height:22px;

    top:170px;
    right:250px;

    transform:rotate(45deg);
}

.footer-pattern span:nth-child(3){

    width:280px;
    height:22px;

    top:260px;
    right:110px;

    transform:rotate(-45deg);
}

.footer-pattern span:nth-child(4){

    width:350px;
    height:22px;

    bottom:80px;
    right:350px;
}

.footer-pattern span:nth-child(5){

    width:300px;
    height:22px;

    bottom:130px;
    right:0;
}

/* MAIN FOOTER */

.footer-main{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr 1fr;

    gap:70px;
}

.footer-logo h2{

    font-size:60px;

    margin-bottom:15px;

    color:white;
}

.footer-logo p{

    color:#d4e3df;

    line-height:1.8;
}

.footer-column h4{

    margin-bottom:25px;

    font-size:18px;
}

.footer-column a{

    display:block;

    margin-bottom:14px;

    text-decoration:none;

    color:#d4e3df;

    transition:.3s;
}

.footer-column a:hover{

    color:#ff5a36;
}

/* BOTTOM */

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    border-top:
    1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-bottom a{

    color:#fff;

    text-decoration:none;

    margin-left:25px;
}

/* RESPONSIVE */

@media(max-width:1200px){

.footer-main{

grid-template-columns:
1fr 1fr;
}

.cta-content{

flex-direction:column;

align-items:flex-start;

gap:30px;
}

.cta-content h2{

font-size:60px;
}

}

@media(max-width:768px){

.solora-footer{

padding:0 25px 30px;
}

.footer-cta{

padding:50px 30px;
}

.cta-content h2{

font-size:42px;
}

.footer-main{

grid-template-columns:1fr;
}

.footer-bottom{

flex-direction:column;

gap:15px;
}

}

.energy-slider{
    width:100%;
    min-height:100vh;
    background:#f7f7f7;
    text-align:center;
    overflow:hidden;
    position:relative;
    padding:80px 0;
}

.energy-heading{
    font-size:48px;
    font-weight:300;
    color:#555;
    margin-bottom:50px;
}

.circle-slider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    position:relative;
}

.main-circle{
    width:520px;
    height:520px;
    border-radius:50%;
    overflow:hidden;
    z-index:5;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.main-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.side-img{
    width:250px;
    height:250px;
    border-radius:50%;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    filter:blur(4px);
    opacity:.65;
    transform:scale(.9);
}

.left-1{
    background-image:url("img/solar2.jpg");
}

.left-2{
    background-image:url("img/solar3.jpg");
}

.right-1{
    background-image:url("img/solar4.jpg");
}

.right-2{
    background-image:url("img/solar5.jpg");
}

.content-box{
    margin-top:40px;
}

.content-box h3{
    font-size:42px;
    color:#14a84a;
    margin-bottom:15px;
}

.content-box p{
    width:700px;
    max-width:90%;
    margin:auto;
    font-size:20px;
    color:#666;
    line-height:1.7;
}

.controls{
    margin-top:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
}

.nav-btn{
    width:75px;
    height:75px;
    border-radius:50%;
    border:2px solid #16b13d;
    background:white;
    color:#16b13d;
    font-size:34px;
    cursor:pointer;
    transition:.3s;
}

.nav-btn:hover{
    background:#16b13d;
    color:white;
}

.learn-btn{
    background:#16b13d;
    color:white;
    text-decoration:none;
    padding:18px 40px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
}

@media(max-width:991px){

    .main-circle{
        width:320px;
        height:320px;
    }

    .side-img{
        display:none;
    }

    .energy-heading{
        font-size:32px;
    }

    .content-box h3{
        font-size:28px;
    }
}
.projects-section{
    background:#ece8e4;
    padding:80px 0 100px;
    overflow:hidden;
}

.projects-container{
    padding-left:140px;
}

.projects-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-right:140px;
    margin-bottom:70px;
}

.projects-top h2{
    font-size:110px;
    font-weight:300;
    line-height:.9;
    color:#1c1c1c;
    letter-spacing:-4px;
}

.projects-top h2 span{
    color:#a99d99;
}

.discover-btn{
    background:#fff;
    color:#8d7c73;
    text-decoration:none;
    padding:20px 40px;
    border-radius:24px;
    font-size:22px;
}

/* SLIDER */

.projects-slider{
    display:flex;
    gap:38px;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-behavior:smooth;
}

.projects-slider::-webkit-scrollbar{
    display:none;
}

/* CARD */

.project-card{
    min-width:480px;
    height:640px;
    position:relative;
    overflow:hidden;
    border-radius:36px;
    flex-shrink:0;
    cursor:pointer;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.project-card:hover img{
    transform:scale(1.08);
}

/* BOTTOM GLASS */

.project-info{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:235px;

    padding:55px 38px;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.22),
        rgba(255,255,255,.08)
    );
}

.project-category{
    color:#fff;
    font-size:20px;
    margin-bottom:28px;
}

.project-title{
    color:#fff;
    font-size:56px;
    font-weight:300;
    line-height:1.05;
}

.projects-section{
    background:#ece8e4;
    padding:80px 0 100px;
    overflow:hidden;
}

.projects-container{
    padding-left:140px;
}

.projects-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-right:140px;
    margin-bottom:70px;
}

.projects-top h2{
    font-size:110px;
    font-weight:300;
    line-height:.9;
    color:#1c1c1c;
    letter-spacing:-4px;
}

.projects-top h2 span{
    color:#a99d99;
}

.discover-btn{
    background:#fff;
    color:#8d7c73;
    text-decoration:none;
    padding:20px 40px;
    border-radius:24px;
    font-size:22px;
}

/* SLIDER */

.projects-slider{
    display:flex;
    gap:38px;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-behavior:smooth;
}

.projects-slider::-webkit-scrollbar{
    display:none;
}

/* CARD */

.project-card{
    min-width:480px;
    height:640px;
    position:relative;
    overflow:hidden;
    border-radius:36px;
    flex-shrink:0;
    cursor:pointer;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.project-card:hover img{
    transform:scale(1.08);
}

/* BOTTOM GLASS */

.project-info{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:235px;

    padding:55px 38px;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.22),
        rgba(255,255,255,.08)
    );
}

.project-category{
    color:#fff;
    font-size:20px;
    margin-bottom:28px;
}

.project-title{
    color:#fff;
    font-size:56px;
    font-weight:300;
    line-height:1.05;
}

.projects-section{
    background:#ece8e4;
    padding:80px 0 100px;
    overflow:hidden;
}

.projects-header{
    padding:0 140px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:70px;
}

.projects-header h2{
    font-size:110px;
    font-weight:300;
    line-height:.9;
    color:#222;
    letter-spacing:-4px;
}

.projects-header h2 span{
    color:#a79c98;
}

.discover-btn{
    text-decoration:none;
    background:#fff;
    color:#8d7c73;
    padding:22px 42px;
    border-radius:24px;
    font-size:22px;
}

.projectSwiper{
    padding-left:140px;
}

.project-card{
    width:480px !important;
    height:640px;
    border-radius:34px;
    overflow:hidden;
    position:relative;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.project-card:hover img{
    transform:scale(1.08);
}

.project-info{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:220px;

    padding:45px;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:
    linear-gradient(
      to top,
      rgba(0,0,0,.45),
      rgba(0,0,0,.22),
      rgba(255,255,255,.08)
    );
}

.project-info span{
    display:block;
    color:#fff;
    font-size:20px;
    margin-bottom:25px;
}

.project-info h3{
    color:#fff;
    font-size:54px;
    line-height:1.1;
    font-weight:300;
}

@media(max-width:768px){

.projects-header{
padding:0 20px;
flex-direction:column;
align-items:flex-start;
gap:20px;
}

.projects-header h2{
font-size:60px;
}

.projectSwiper{
padding-left:20px;
}

.project-card{
width:320px !important;
height:450px;
}

.project-info h3{
font-size:34px;
}

}



.dot{
   width:10px;
   height:10px;
   border-radius:50%;
   background:#fff;
   transition:.4s;
}

.active-dot{
   background:#ff6b47;
   transform:scale(1.2);
}

.filters button.active{
   background:#ff6b47;
   color:#fff;
}

/* ==========================
   TATA POWER STYLE SECTION
========================== */

.energy-ecosystem{
    background:#f7f7f7;
    padding:120px 0;
    overflow:hidden;
}

.ecosystem-top{
    width:90%;
    margin:auto;
    margin-bottom:40px;
}

.ecosystem-top p{
    font-size:28px;
    color:#222;
}

.ecosystem-scene{
    position:relative;
    width:100%;
    max-width:1600px;
    margin:auto;
}

.ecosystem-img{
    width:100%;
    display:block;
}

/* LABELS */

.energy-node{
    position:absolute;
    z-index:5;
}

.energy-node span{
    font-size:28px;
    font-weight:600;
    color:#143f3d;
    display:block;
    margin-bottom:10px;
}

.energy-node .dot{
    width:26px;
    height:26px;
    border:3px solid #143f3d;
    background:#fff;
    cursor:pointer;
    transition:.4s;
}

.energy-node:hover .dot{
    background:#00d8a6;
    transform:scale(1.2);
}

/* POSITION */

.hydro{
    left:8%;
    top:42%;
}

.conventional{
    left:22%;
    top:40%;
}

.wind{
    left:38%;
    top:18%;
}

.solar{
    left:45%;
    top:58%;
}

.grid{
    left:55%;
    top:35%;
}

.smart{
    left:70%;
    top:48%;
}

.trading{
    right:18%;
    top:22%;
}

.ev{
    right:8%;
    top:55%;
}

/* POWER PARTICLES */

.particle{
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#00d8a6;
    box-shadow:0 0 20px #00d8a6;
}

.p1{
    top:220px;
    left:35%;
    animation:flow1 6s linear infinite;
}

.p2{
    top:270px;
    left:35%;
    animation:flow2 8s linear infinite;
}

.p3{
    top:320px;
    left:35%;
    animation:flow3 10s linear infinite;
}

@keyframes flow1{
0%{transform:translateX(0);}
100%{transform:translateX(550px);}
}

@keyframes flow2{
0%{transform:translateX(0);}
100%{transform:translateX(650px);}
}

@keyframes flow3{
0%{transform:translateX(0);}
100%{transform:translateX(750px);}
}

/* RESPONSIVE */

@media(max-width:991px){

.energy-node span{
font-size:16px;
}

.energy-node .dot{
width:18px;
height:18px;
}

}

.ecosystem-section{
    padding:120px 0;
    background:#f4f4f4;
    overflow:hidden;
}

.ecosystem-header{
    width:90%;
    margin:auto;
    margin-bottom:40px;
}

.ecosystem-header p{
    font-size:28px;
    color:#111;
}

.ecosystem-wrap{
    position:relative;
    max-width:1700px;
    margin:auto;
}

.energy-landscape{
    width:100%;
    display:block;
}

.eco-item{
    position:absolute;
    z-index:5;
}

.eco-item h4{
    color:#0f5d4d;
    font-size:26px;
    margin-bottom:10px;
}

.eco-item span{
    width:24px;
    height:24px;
    border:3px solid #0f5d4d;
    display:block;
    background:#fff;
    transition:.4s;
}

.eco-item:hover span{
    background:#00e0a5;
    transform:scale(1.2);
}

.hydro{left:8%;top:48%;}
.conventional{left:22%;top:45%;}
.wind{left:37%;top:18%;}
.solar{left:46%;top:62%;}
.transmission{left:55%;top:38%;}
.iot{left:69%;top:52%;}
.trading{left:78%;top:20%;}
.ev{left:92%;top:56%;}

.blade{
    transform-origin:center;
    animation:spin 6s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@media(max-width:991px){

.eco-item h4{
font-size:14px;
}

.eco-item span{
width:16px;
height:16px;
}

}
.energy-map{
    padding:120px 0;
    background:#f5f5f5;
}

.energy-title{
    width:90%;
    margin:auto;
    margin-bottom:50px;
    font-size:32px;
    font-weight:500;
}

.map-wrapper{
    width:100%;
    max-width:1600px;
    margin:auto;
    position:relative;
}
.map-image{
    width:110%;
    height:600px;   /* जितकी हवी तितकी वाढव */
    object-fit:cover;
    display:block;
}

/* POINTS */

.point{
    position:absolute;

    width:34px;
    height:34px;

    border:none;
    cursor:pointer;

    background:#fff;
    color:#0f5d4d;

    font-size:20px;
    font-weight:bold;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    transition:.35s;
}

.point:hover{
    background:#00d9a5;
    transform:scale(1.15);
}

/* POSITION */

.hydro{
    left:10%;
    top:42%;
}

.conventional{
    left:28%;
    top:40%;
}

.wind{
    left:46%;
    top:18%;
}

.solar{
    left:53%;
    top:63%;
}

.transmission{
    left:66%;
    top:37%;
}

.iot{
    left:83%;
    top:55%;
}

.trading{
    left:76%;
    top:24%;
}

.ev{
    left:92%;
    top:60%;
}

/* pulse effect */

.point::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px solid #00d9a5;
    animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
transform:scale(.7);
opacity:1;
}

100%{
transform:scale(1.8);
opacity:0;
}

}
.energy-flow{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#00ffd0;
    box-shadow:0 0 15px #00ffd0;
    z-index:10;
}

.flow1{
    top:180px;
    left:520px;
    animation:wire1 6s linear infinite;
}

.flow2{
    top:210px;
    left:530px;
    animation:wire2 8s linear infinite;
}

.flow3{
    top:240px;
    left:540px;
    animation:wire3 10s linear infinite;
}

@keyframes wire1{
    from{transform:translateX(0);}
    to{transform:translateX(450px);}
}

@keyframes wire2{
    from{transform:translateX(0);}
    to{transform:translateX(520px);}
}

@keyframes wire3{
    from{transform:translateX(0);}
    to{transform:translateX(600px);}
}

.wind-rotator{
    position:absolute;

    width:90px;
    height:90px;

    left:455px;
    top:55px;

    border-radius:50%;

    animation:spin 5s linear infinite;
}

.wind-rotator::before,
.wind-rotator::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:70px;
    height:3px;
    background:#0f5d4d;
    transform-origin:left center;
}

.wind-rotator::before{
    transform:rotate(0deg);
}

.wind-rotator::after{
    transform:rotate(120deg);
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

.light{
    position:absolute;
    width:10px;
    height:10px;
    background:#00ffd0;
    box-shadow:0 0 15px #00ffd0;
    animation:blink 2s infinite alternate;
}

.l1{left:930px;top:275px;}
.l2{left:960px;top:275px;}
.l3{left:930px;top:305px;}
.l4{left:960px;top:305px;}

@keyframes blink{
    from{
        opacity:.3;
    }
    to{
        opacity:1;
    }
}

.charger-ring{
    position:absolute;

    width:35px;
    height:35px;

    right:80px;
    top:250px;

    border:3px solid #00ffd0;
    border-radius:50%;

    animation:charge 2s infinite;
}

@keyframes charge{

0%{
transform:scale(.5);
opacity:1;
}

100%{
transform:scale(2);
opacity:0;
}

}

.info-card{
    position:absolute;
    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    width:420px;

    background:white;
    border-radius:20px;

    padding:25px;

    box-shadow:0 20px 40px rgba(0,0,0,.1);

    opacity:0;
    transition:.4s;
}

.point:hover ~ .info-card{
    opacity:1;
}

/* HYDRO */
.hydro{
    left:7.8%;
    top:56%;
}

/* CONVENTIONAL */
.conventional{
    left:21.2%;
    top:54%;
}

/* WIND */
.wind{
    left:35.8%;
    top:37%;
}

/* SOLAR */
.solar{
    left:42.5%;
    top:72%;
}

/* TRANSMISSION */
.transmission{
    left:52%;
    top:50%;
}

/* IOT */
.iot{
    left:65.8%;
    top:62%;
}

/* POWER TRADING */
.trading{
    left:75.3%;
    top:41%;
}

/* EV */
.ev{
    left:89.3%;
    top:66%;
}
.point{
    position:absolute;

    width:28px;
    height:28px;

    background:#fff;

    border:2px solid #1f4f4a;

    color:#1f4f4a;

    font-size:18px;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:.35s;

    z-index:20;
}

.point:hover{
    background:#00d9a5;
    border-color:#00d9a5;
    color:#fff;
    transform:scale(1.12);
}

.map-wrapper{
    position:relative;
}

.point{
    transform:translate(-50%,-50%);
}

.hotspot{
    position:absolute;
    z-index:30;
    transform:translate(-50%,-50%);
}

.hotspot h4{
     font-size:14px;
    font-weight:600
    color:#0f4f48;
    margin-bottom:12px;
    white-space:nowrap;
}

.point{
    width:32px;
    height:32px;

    background:#fff;

    border:2px solid #0f4f48;

    color:#0f4f48;

    font-size:20px;
    font-weight:700;

    cursor:pointer;

    transition:.35s;

    display:flex;
    align-items:center;
    justify-content:center;
}

.point:hover{
    background:#00d8a6;
    border-color:#00d8a6;
    color:#fff;

    transform:scale(1.12);
}
.hydro{
    left:8%;
    top:56%;
}

.conventional{
    left:22%;
    top:54%;
}

.wind{
    left:36%;
    top:36%;
}

.solar{
    left:43%;
    top:72%;
}

.transmission{
    left:54%;
    top:50%;
}

.iot{
    left:67%;
    top:63%;
}

.trading{
    left:78%;
    top:40%;
}

.ev{
    left:90%;
    top:66%;
}
.point.active{
    background:#ff6b47;
    border-color:#ff6b47;
    color:#fff;

    box-shadow:
    0 0 20px rgba(255,107,71,.5);
}

/* ==========================================
        ENERGY ECOSYSTEM SECTION
========================================== */

.energy-map{
    background:#f5f5f5;
    padding:120px 0;
    overflow:hidden;
}

.energy-container{
    width:min(1800px,95%);
    margin:auto;
}

.energy-title{
    font-size:42px;
    font-weight:300;
    color:#184f49;
    margin-bottom:50px;
}

.map-wrapper{
    position:relative;
    width:100%;
}

.map-image{
    width:100%;
    display:block;
}

/* ==========================
      HOTSPOTS
========================== */

.hotspot{
    position:absolute;
    z-index:20;
}

.hotspot h4{
    color:#14534d;
   font-size:14px;
    font-weight:600
    margin-bottom:12px;
    white-space:nowrap;
}

.point{
    width:42px;
    height:42px;

    background:#fff;

    border:2px solid #14534d;

    color:#14534d;

    font-size:24px;
    font-weight:700;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s;

    position:relative;
}

.point:hover{
    background:#00d9a5;
    color:#fff;
    border-color:#00d9a5;
    transform:scale(1.08);
}

/* Pulse Ring */

.point::before{
    content:"";
    position:absolute;
    inset:-10px;

    border-radius:50%;

    border:2px solid rgba(0,217,165,.4);

    animation:pulseRing 2s infinite;
}

@keyframes pulseRing{

0%{
transform:scale(.8);
opacity:1;
}

100%{
transform:scale(1.7);
opacity:0;
}

}

/* ==========================
       EXACT POSITIONS
========================== */

.hydro{
    left:8%;
    top:54%;
}

.conventional{
    left:20%;
    top:52%;
}

.wind{
    left:35%;
    top:31%;
}

.solar{
    left:43%;
    top:72%;
}

.transmission{
    left:53%;
    top:47%;
}

.iot{
    left:66%;
    top:60%;
}

.trading{
    left:79%;
    top:35%;
}

.ev{
    left:92%;
    top:63%;
}

/* ==========================
       ENERGY FLOW
========================== */

.energy-flow{
    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#00e0b0;

    box-shadow:
    0 0 15px #00e0b0,
    0 0 30px #00e0b0;

    z-index:15;
}

.flow1{
    top:26%;
    left:42%;
    animation:flow1 5s linear infinite;
}

.flow2{
    top:32%;
    left:43%;
    animation:flow2 7s linear infinite;
}

.flow3{
    top:38%;
    left:44%;
    animation:flow3 9s linear infinite;
}

@keyframes flow1{
from{transform:translateX(0);}
to{transform:translateX(380px);}
}

@keyframes flow2{
from{transform:translateX(0);}
to{transform:translateX(450px);}
}

@keyframes flow3{
from{transform:translateX(0);}
to{transform:translateX(520px);}
}

/* ==========================
      WIND ROTATOR
========================== */

.wind-rotator{

    position:absolute;

    width:90px;
    height:90px;

    left:31.2%;
    top:3%;

    border-radius:50%;

    animation:spinWind 6s linear infinite;
}

.wind-rotator::before,
.wind-rotator::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:75px;
    height:3px;

    background:#0f5d4d;

    transform-origin:left center;
}

.wind-rotator::before{
    transform:rotate(0deg);
}

.wind-rotator::after{
    transform:rotate(120deg);
}

@keyframes spinWind{

from{
transform:rotate(0);
}

to{
transform:rotate(360deg);
}

}

/* ==========================
       BUILDING LIGHTS
========================== */

.light{

    position:absolute;

    width:10px;
    height:10px;

    background:#00e0b0;

    box-shadow:0 0 15px #00e0b0;

    animation:blink 1.5s infinite alternate;
}

.l1{
    left:73.5%;
    top:66%;
}

.l2{
    left:75%;
    top:66%;
}

.l3{
    left:73.5%;
    top:72%;
}

.l4{
    left:75%;
    top:72%;
}

@keyframes blink{

from{
opacity:.2;
}

to{
opacity:1;
}

}

/* ==========================
      EV CHARGING
========================== */

.charger-ring{

    position:absolute;

    right:8%;
    top:63%;

    width:40px;
    height:40px;

    border-radius:50%;

    border:3px solid #00e0b0;

    animation:chargePulse 2s infinite;
}

@keyframes chargePulse{

0%{
transform:scale(.5);
opacity:1;
}

100%{
transform:scale(2);
opacity:0;
}

}

/* ==========================
        INFO PANEL
========================== */

.energy-panel{

    margin-top:60px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    display:flex;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);
}

.panel-left{
    width:40%;
}

.panel-left img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.panel-right{
    flex:1;
    padding:50px;
}

.panel-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#eaf9f5;

    color:#14534d;

    font-size:14px;

    margin-bottom:20px;
}

.panel-right h3{

    font-size:52px;

    color:#111;

    margin-bottom:20px;
}

.panel-right p{

    color:#666;

    font-size:18px;

    line-height:1.8;

    max-width:650px;
}

.panel-btn{

    display:inline-block;

    margin-top:30px;

    background:#14534d;

    color:white;

    text-decoration:none;

    padding:16px 30px;

    border-radius:18px;
}

/* ==========================
      RESPONSIVE
========================== */

@media(max-width:991px){

.energy-title{
font-size:30px;
}

.hotspot h4{
font-size:14px;
}

.point{
width:26px;
height:26px;
font-size:16px;
}

.energy-panel{
flex-direction:column;
}

.panel-left{
width:100%;
height:250px;
}

.panel-right{
padding:25px;
}

.panel-right h3{
font-size:32px;
}

}
/* ====================================
        SOLORA GREEN THEME
==================================== */

/* BODY */

body{
background:#001a17;
color:#fff;
}

/* NAVBAR */

.navbar.scrolled{
background:rgba(0,40,35,.65);
backdrop-filter:blur(18px);
}

/* BUTTONS */

.cta-btn,
.learn-btn,
.panel-btn{
background:#00d9a5 !important;
color:#001a17 !important;
border:none;
}

.cta-btn:hover,
.learn-btn:hover,
.panel-btn:hover{
background:#00f0b8 !important;
transform:translateY(-3px);
}

/* OUTLINE BUTTON */

.btn-outline{
border:1px solid #00d9a5;
color:#00d9a5;
}

.btn-outline:hover{
background:#00d9a5;
color:#001a17;
}

/* LIGHT BUTTON */

.btn-light{
background:#00d9a5;
color:#001a17;
}

/* INTRO */

.intro{
background:#02221d;
}

.intro h2{
color:#fff;
}

.intro h2 span{
color:#00d9a5;
}

.intro p{
color:#cde5df;
}

/* EXPERTISE */

.expertise-section{
background:#001f1b;
}

.section-title h2{
color:#fff;
}

.section-title span{
color:#00d9a5;
}

.expertise-card{
background:#06342d;
}

.text h3{
color:#fff;
}

.text span{
color:#00d9a5;
}

/* ICONS */

.icon-circle,
.icon-drop{
background:#00d9a5;
}

.icon-ring{
border-color:#00d9a5;
}

.icon-grid span{
background:#00d9a5;
}

/* NUMBERS */

.numbers-section{
background:#001a17;
}

.main-card{
background:#022d27;
}

.main-content span{
color:#00d9a5;
}

.stat-card{
background:#06342d;
border:1px solid rgba(0,217,165,.2);
}

.stat-card h3{
color:#fff;
}

.stat-card p{
color:#cfe7e0;
}

.icon{
color:#00d9a5;
}

/* PROMISE */

.promise-section{
background:#001a17;
}

.promise-left h2{
color:#fff;
}

.promise-left span{
color:#00d9a5;
}

.promise-left p{
color:#d5ebe5;
}

.promise-card{
background:#06342d;
color:#fff;
}

.promise-card.active{
background:#00d9a5;
color:#001a17;
}

/* ENERGY SLIDER */

.energy-slider{
background:#001a17;
}

.energy-heading{
color:#fff;
}

.content-box h3{
color:#00d9a5;
}

.content-box p{
color:#cde5df;
}

.nav-btn{
border:2px solid #00d9a5;
color:#00d9a5;
background:transparent;
}

.nav-btn:hover{
background:#00d9a5;
color:#001a17;
}

/* PROJECTS */

.projects-section{
background:#001a17;
}

.projects-top h2,
.projects-header h2{
color:#fff;
}

.projects-top h2 span,
.projects-header h2 span{
color:#00d9a5;
}

.discover-btn{
background:#06342d;
color:#00d9a5;
}

/* ENERGY MAP */

.energy-map{
background:#001a17 !important;
}

.energy-header h2{
color:#fff;
}

.energy-header span{
color:#00f5b5;
}

.energy-header p{
color:#d7ebe6;
}

.hotspot span{
color:#fff;
}

.hotspot button{
background:#fff;
border:2px solid #00d9a5;
color:#00d9a5;
}

.hotspot button:hover{
background:#00d9a5;
color:#001a17;
}

.card{
background:#022d27;
border:1px solid #00d9a5;
}

.card h3{
color:#fff;
}

.card p{
color:#d3ebe5;
}

.card a{
color:#00f5b5;
}

/* FOOTER */

.solora-footer{
background:#001a17;
}

.footer-cta{
background:#022d27;
}

.cta-content span{
color:#00d9a5;
}

.footer-column a:hover{
color:#00d9a5;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#001a17;
}

::-webkit-scrollbar-thumb{
background:#00d9a5;
border-radius:20px;
}