*{margin:0;
    padding:0;
    color:rgb(235, 223, 223);}
#navbar{height:60px;
    background-color: #0f1111;    
}
button{background-color:#f08804;}
#logo{color:#f08804;
    font-size: 25px;}
a{margin-right: 200px;
    text-decoration: none;}

#content{
    top: 100px;
    height: 60%;
    background-position: center;
    background-size: cover;
    animation: changebackground 30s ease-in-out 0s infinite normal;
}
@keyframes changebackground {
    0%   { background-image: url("top1.jpeg"); }
    17%  { background-image: url("top2.jpg"); }
    34%  { background-image: url("top3.jpg"); }
    51%  { background-image: url("top4.jpg"); }
    68% { background-image: url("top5.jpeg"); } 
    85% { background-image: url("top6.jpeg"); } 
    100% { background-image: url("top7.jpeg"); } 
  }
  
#functionbar{height:40px;
    background-color: #1b4b4b;    
}
.fun{
    margin-right: 124px;
    text-decoration: none;
    text-align: center;
}
#exx{
    display: inline;
}

#left{
        position: absolute;
        top: 180px;  
        left: 20px;   
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;      
}
#right{
        position: absolute;
        top: 180px;   
        right: 20px;    
        padding: 10px 20px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;      
}
.wat{
    text-align: center;
    height: 335px;
    width: 275px;
    padding: 5px;
    position: absolute;
    top:358px;
    left: 26px;
    background-color: rgb(126, 126, 98);
    color: #082020; 
}
.wt{
    height: 122px;
    width: 122px;
    
    border: 2px solid #1b4b4b;
    display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;

}
#wa1sa{
    height: 295px;
    width: 250px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: 1fr 1fr;    /* 2 rows */
    gap: 5px; 
    padding: 3px;
}
.wach{
    display: inline-block;
    height: 125px;
    width: 125px;
}
/*.wach2{
    display: inline-block;
    height: 125px;
    width: 125px;
}*/
#ccarea{
    height: 900px;
}
.watext{
    display: inline-block;
    height: 10px;
    width: 125px;
}
/*.watext2{
    display: inline-block;
    height: 10px;
    width: 125px;
}*/
.wadwtxt{
    text-align: center;
    color: #f08804;
}
#banner{
    display: flex;
   
    
    height: 355px;
    width: 100%;
}

/*next  banner*/


.dse{
    text-align: center;
    height: 335px;
    width: 275px;
    padding: 5px;
    position: absolute;
    top:358px;
    left: 362px;
    margin-right: 50px;
    background-color: rgb(126, 126, 98);
    color: #082020; 
}
.drp{
    height: 122px;
    width: 122px;
    
    border: 2px solid #1b4b4b;
    display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;

}
#dres{
    height: 295px;
    width: 250px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: 1fr 1fr;    /* 2 rows */
    gap: 5px; 
    padding: 3px;
}
.ds{
    display: inline-block;
    height: 125px;
    width: 125px;
}
/*.wach2{
    display: inline-block;
    height: 125px;
    width: 125px;
}*/
.drtext{
    display: inline-block;
    height: 10px;
    width: 125px;
}
/*.watext2{
    display: inline-block;
    height: 10px;
    width: 125px;
}*/
.dwtxt{
    text-align: center;
    color: #f08804;
}

/*next  banner*/


.mob{
    text-align: center;
    height: 335px;
    width: 275px;
    padding: 5px;
    position: absolute;
    top:358px;
    left: 703px;
    margin-right: 50px;
    background-color: rgb(126, 126, 98);
    color: #082020; 
}
.me{
    height: 122px;
    width: 122px;
    
    border: 2px solid #1b4b4b;
    display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;

}
#molis{
    height: 295px;
    width: 250px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: 1fr 1fr;    /* 2 rows */
    gap: 5px; 
    padding: 3px;
}
.mb{
    display: inline-block;
    height: 125px;
    width: 125px;
}
/*.wach2{
    display: inline-block;
    height: 125px;
    width: 125px;
}*/
.mbtext{
    display: inline-block;
    height: 10px;
    width: 125px;
}
/*.watext2{
    display: inline-block;
    height: 10px;
    width: 125px;
}*/
.mtxt{
    text-align: center;
    color: #f08804;
}

/*next  banner*/


.jrs{
    text-align: center;
    height: 335px;
    width: 275px;
    padding: 5px;
    position: absolute;
    top:358px;
    right:26px;
    background-color: rgb(126, 126, 98);
    color: #082020; 
}
.jt{
    height: 122px;
    width: 122px;
    
    border: 2px solid #1b4b4b;
    display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;

}
#jer{
    height: 295px;
    width: 250px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    grid-template-rows: 1fr 1fr;    /* 2 rows */
    gap: 5px; 
    padding: 3px;
}
.js{
    display: inline-block;
    height: 125px;
    width: 125px;
}
/*.wach2{
    display: inline-block;
    height: 125px;
    width: 125px;
}*/
.jytext{
    display: inline-block;
    height: 10px;
    width: 125px;
}
/*.watext2{
    display: inline-block;
    height: 10px;
    width: 125px;
}*/
.jtxt{
    text-align: center;
    color: #f08804;
}
footer{
    display: block;
    bottom: 0px;
    background-color: #153b3b;
}