/* 
EcoTrack AI
Carbon Footprint Awareness Platform
Developer: Aditya Kumar Jha
Copyright © 2026
*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}


body {

    background: #f1fff4;
    color: #143d20;
    line-height: 1.6;

}



/* Navbar */


header {

    background: #0b5d2a;
    padding: 20px;
    position: sticky;
    top: 0;
    z-index: 100;

}


nav {

    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;

}


nav h1 {

    color: white;
    font-size: 28px;

}


button {

    background: #55d66b;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: .3s;

}


button:hover {

    transform: scale(1.05);
    background: #35bd52;

}




/* Hero Section */


.hero {

    min-height: 85vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 50px;

    background:
    linear-gradient(
        rgba(0,80,30,0.7),
        rgba(0,100,40,0.7)
    ),
    url("https://images.unsplash.com/photo-1497250681960-ef046c08a56e");


    background-size: cover;
    color: white;

}



.hero-text {

    max-width: 600px;

}


.hero h2 {

    font-size: 60px;
    line-height: 1.1;

}


.hero p {

    margin: 25px 0;
    font-size: 20px;

}


.earth {

    font-size: 180px;
    animation: rotate 5s infinite linear;

}


@keyframes rotate {

    from{
        transform: rotate(0);
    }

    to{
        transform: rotate(360deg);
    }

}




/* Features */


.features {

    padding: 60px 10%;
    text-align:center;

}


.features h2,
.calculator h2,
.dashboard h2,
.assistant h2 {

    font-size:40px;
    margin-bottom:40px;

}



.cards {

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;

}


.card {


    background:white;
    padding:30px;
    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.1);

    transition:.3s;

}



.card:hover {

    transform:translateY(-10px);

}




.card h3 {

    color:#0b7a35;
    margin-bottom:15px;

}





/* Calculator */


.calculator {


    padding:60px 10%;
    text-align:center;
    background:#dcffe4;

}



.calculator input,
.calculator select {


    width:80%;
    max-width:500px;

    padding:15px;

    margin:10px;

    border-radius:10px;

    border:1px solid #aaa;

    font-size:16px;


}



#result {


    margin-top:30px;

    background:white;

    padding:25px;

    border-radius:20px;

    display:none;

    font-size:18px;

}





/* Dashboard */


.dashboard {

    padding:60px 10%;
    text-align:center;

}



.stats {


    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    gap:20px;


}



.stats div {


    background:#0b5d2a;

    color:white;

    padding:30px;

    border-radius:20px;


}




.stats p {

    font-size:30px;
    color:#55d66b;

}





/* Assistant */


.assistant {


    padding:60px 10%;

    background:#eaffef;

    text-align:center;


}



.assistant ul {


    list-style:none;

    margin-top:30px;

}


.assistant li {


    background:white;

    padding:15px;

    margin:15px auto;

    max-width:600px;

    border-radius:15px;

    box-shadow:0 5px 15px #ccc;

}




/* Footer */


footer {

    background:#073d1b;

    color:white;

    text-align:center;

    padding:30px;

}





/* Mobile Responsive */


@media(max-width:768px){


.hero {

    flex-direction:column;
    text-align:center;

}


.hero h2 {

    font-size:40px;

}


.earth {

    font-size:100px;

}


nav h1 {

    font-size:20px;

}


}