.section-background {
    background-image: url('/asset/image/pollution2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .bg-matrix-hero {
    background-image: url('/asset/image/matrix-hero-spiro.svg');
  }



  /* for hero */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    box-sizing: border-box;
    font-family: 'Montserrat',sans-serif;
}

body{
    margin: 0;
    overflow-x: hidden;
}

header{
    min-height: 60vh;
    position: relative;
    .container{
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem 2rem;
        .navbar{
            min-height: 10vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .logo{
                font-size: 2.25rem;
                text-decoration: none;
                text-transform: uppercase;
                color: #fff;
                font-weight: 700;
            }
            .nav-links{
                display: flex;
                align-items: center;
                li{
                    list-style-type: none;
                    a{
                        text-decoration: none;
                        color: #fff;
                        margin: 0 1.25rem;
                        font-weight: 500;
                        font-size: 1.05rem;
                        position: relative;
                        &::after{
                            position: absolute;
                            content: '';
                            background-color: #fff;
                            bottom: -5px;
                            left: 0;
                            width: 0%;
                            height: 3px;
                            transition: 0.3s ease all;
                        }
                        &:hover::after{
                            width: 100%;
                        }
                    }
                }
                button{
                    border: none;
                    outline: none;
                    cursor: pointer;
                    padding: 0.75rem 1rem;
                    margin: 0 1rem;
                    border-radius: 6px;
                    background: transparent;
                    border: 2px solid #fff;
                    color: #fff;
                    font-weight: 500;
                }
            }
            i{
                display: block;
                color: #fff;
                cursor: pointer;
            }
        }
        .showcase{
            min-height: 60vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 35rem;
            h1{
                color: #fff;
                font-size: 2.5rem;
                margin-bottom: 0;
                font-weight: 700;
                margin-bottom: 1rem;
            }
            p{
                margin-top: 0;
                color: #fff;
                font-weight: 500;
                line-height: 1.4;
                font-size: 0.9rem;
                width: 30rem;
            }
            /* button{
                margin-top: 1rem;
                background-color: #000;
                color: #fff;
                border: none;
                outline: none;
                padding: 1rem 1.5rem;
                font-size: 0.9rem;
                border-radius: 6px;
                cursor: pointer;
            } */
        }
    }
    .video-container{
        overflow-x: hidden;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
            width: 100%;
        video{
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        &::after{
            overflow-x: hidden;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.709);
        }
    }
}

@media(max-width: 850px){
    header{
        .container{
            .navbar{
                .nav-links{
                    position: absolute;
                    top: 0;
                    left: 0;
                    background-color: #fff;
                    height: 100%;
                    width: 225px;
                    margin: 0;
                    padding: 0;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    transform: translateX(-100%);
                    transition: 0.4s ease all;
                    z-index: 10;
                    li{
                        a{
                            color: #000;
                            &::after{
                                background-color: #000;
                            }
                        }
                    }
                    button{
                        border-color: #000;
                        color: #000;
                        padding: 0.75rem 1.5rem;
                    }
                    &.active{
                        transform: translateX(0%);
                    }
                }
                i{
                    display: block;
                }
            }
            .showcase{
                min-height: 80vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                text-align: center;
                h1{
                    font-size: 2.25rem;
                }
            }
            .showcase2{
              min-height: 20vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 100%;
              text-align: center;
              h1{
                  font-size: 2.25rem;
              }
          }
          .video-container{
            overflow-x: hidden;
            height: 100%;
        }
        }
    }   
}

@media(max-width: 500px){
    header{
        .container{
            .showcase{
              h1{
                font-size: 2.1rem;
              }
              p{
                font-size: 0.85rem;
                width: 300px;
              }
            }
             
        }
        .video-container{
            overflow-x: hidden;
            height: 100%;
        }
    }   
}

.realtime-data {
  background-color: rgba(112, 112, 112, 0.356); 
  padding: 20px;
  border-radius: 10px;
}