body{
    padding: 0;
    margin: 0;
}

.logo{
    font-size: 50px;
    font-weight:bolder;
    padding: 20px;
}

nav{
    background-color: rgb(31, 25, 36);
        display: flex;
    color: aliceblue;
    justify-content:space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
width: 100%;
font-size: larger;

   
}
 header ul{
    display: flex;
    gap: 20px;
    list-style: none;

 }
header ul li a    
{
    text-decoration: none;
    color:white;
    padding: 25x;
    
}

.intro{
   position: relative;
    display: flex;
    color: rgb(234, 234, 234);
    flex-direction: column;
    align-items: center;
    padding: 300px;
    justify-content: center;
}
.intro::before{
    content:' ';
    position: absolute;
background: url("https://images.pexels.com/photos/1190297/pexels-photo-1190297.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
    width: 100%;
    background-size: cover;
    z-index: -1;
    opacity: 0.4;
    height:800px;
    background-position: center;
}


.intro .l1{
    font-size: 60px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
    }
    body
    {
        margin: 0;
        padding: 0;
        background-color: black;
    }
    /* .main{
        background-color: rgb(31, 25, 36);

      
    } */
    
    .nav
    {
        background-color: rgba(28, 26, 26, 0.73);
        color: aliceblue;
    }
    .nav ul li{
        list-style: none;
        padding: 20px;
    }
    .nav ul li a, .bar1
    {
        text-decoration: none;
        color: aliceblue;
        font-size: 20px;
    
    }
    #item2,#item3{
        margin-right: 10px;
    }
    .sidebox1
    {
        display: flex;
        flex-direction: column;
        background-color: rgba(28, 26, 26, 0.73);
    }
    .sidebox1-1
    {
        display: flex;
        color: aliceblue;
        
    }
    .sidebox1-1 span{
        padding: 1em;
    }
    .b3
    {
        position: relative;
        left: 2.5em;
    }
    /* .nav ,.sidebox1
    {
        margin: 10px;
    } */
    
    .sidebox1-2
    {
        display: flex;
        flex-direction: column;
        color: rgb(234, 232, 229);
        background-color: rgb(44, 37, 37);
        padding: 20px;
        margin: 20px;    
    }
    footer
    {
        width: 100%;
        background-color: black;
        height: 10%;
    }
    .down
    {
        display: grid;
        grid-template-columns: 2fr 3fr 1fr;
        /* align-items: center;
        justify-content: center; */
        visibility:hidden;
        background-color: black;
    }
    .down2
    {
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        font-size: smaller;
    }
    
    .downimg img
    {
        width: 3em;
    }
    
    
    #mso1
    {
    position:absolute;
    right: 0;
    padding:0.5em;
    }
    .d3
    {
        display: flex;
        flex-direction: column;
        /* position: absolute; */
        margin-left: 3em;
    }
    .down1
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .d2 input[type="range"]
    {
        width: 450px;
        background-color: black;
    }
    .d1 i
    {
        margin: 10px;
    }
    .up{
        /* background-color: rgb(19, 8, 8); */
        background-color: rgba(28, 26, 26, 0.73);
        /* width: 100%; */
        /* width:; */
        width: 100%;
        height: 10%;
        margin: 3px;
    }
    .material-symbols-outlined
    {
        color: white;
        background-color: black;
        margin: 10px;
    }
    .btn1
    {
        background-color: white;
        color: black;
        width: 8em;
        height: 3.5em;
        position:absolute;
        right: 50px;
        border-radius: 25%;
        
    }
    .sign
    {
        position: absolute;
        right: 10em;
        margin: 1em;
        color: rgb(54, 41, 41);
    }
    .mid{
        display: flex;
        flex-direction: column;
        /* height:100%;
        width: 100%; */
    }
    .mainmid
    {
        background-color: transparent;
            /* width: 80vw;
        height: 80vh; */
        padding: 1em;
        display: flex;
        flex-direction: column;
    }
    .bar1
    {
    width: 20%;
    padding: 20px;
    }
    .info
    {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(220, 239, 255);
        font-size: xx-large;
        font-weight: lighter;
        padding: 10px;
        margin: 50px;

        
    }

    .card
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-left: 1em;
    
    
    }
    .card1
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        border-radius: 10%;
        width: 12em;
        
        
    }
    
    .card img
    {
        height:8em ;
        width:8em; 
    }
    /* .card1:hover
    {
        background-color:black;
    
    } */
    .btn2
    {
    position: relative;
    bottom:6em;
    left: 3em;
    background-color: #67bf67;
    border-style: none;
    border-radius: 100%;
    padding: 8px;
    /* width: 35px; */
    border-color:#67bf67;
    color: black;
    
    }
    .new{
        color: aliceblue;
        /* background-color: rgb(91, 68, 113); */
        display: flex;
        flex-direction: column;
        margin: 20px;
        padding: 10px;
    }
    .tho{
        width: 100%;
        margin: 5px;
        background-color: rgb(31, 25, 36);
        color: aliceblue;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        border-radius: 10px;
    }
    .bttm{
margin: 5px;
color: seashell;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
text-align: center;
border: 1px solid grey;
    }