*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}
.sunita3{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}
.shadow {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.sunita3 main{

    background-color: white;
    /* padding: 10px 0px; */
    /* box-shadow: 0 0 10px rgb(0,0,0,.18); */
      margin: 10px 0px;

}

.sunita3 main .main-inner{

    width: 100%;

    position: relative; 

}

.sunita3 main .main-inner .ol{

   width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    list-style-type: none;

    color: black;

    margin: 0;

    padding: 0;

    /* border: 1px solid red; */

}

.sunita3 main .main-inner .ol .li{

 position: relative;

    padding: 14px 10px;

    margin: 0;

}

.sunita3 main .main-inner .ol .li:hover{

    background-color: #f5f5f5;

    color: #28a745;

    box-sizing:  inset 0 3px 0px #28a745;

}

.sunita3 main .main-inner .ol .li::before{

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width:100%;

    height: 5%;

    background-color: green;

    transition: .5s;

    display: none;

}

.sunita3 main .main-inner .ol .li:hover::before{

    width: 100%;

display: block;

}

.sunita3 main .main-inner .ol .li .g{

    color: rgb(8, 179, 8);

}

.sunita3 main .main-inner .ol .li i{

    font-size: 13px;

}

.sunita3 main .main-inner .ol .li img{

    width: 22px;

    /* margin-top: 11px; */

    height: 22px;

    margin-right: 5px;

    vertical-align: top;

}

/* .sunita3 main .main-inner .ol .li .ol1{
    width: 250px;
     opacity: 0;
    max-height: 0px;
    transition:max-height .5s, opacity .5s;
    list-style-type: none;
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    background:#fff;
    border-radius: 5px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition:max-height .5s, opacity .5s;
    -moz-transition:max-height .5s, opacity .5s;
    -ms-transition:max-height .5s, opacity .5s;
    -o-transition:max-height .5s, opacity .5s;
} */

.sunita3 main .main-inner .ol .li .ol1 li{

   padding:5px ;

 color: black;

 font-size: 14px;

 /* border-bottom:1px solid white; */



}

.sunita3 main .main-inner .ol .li .ol1 li:hover{

    background-color: #f5f5f5;

    color: #28a745;

    box-sizing:  inset 0 3px 0px #28a745;

}
.sunita3 main .main-inner .ol .li .ol1{
    width: 250px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    list-style-type: none;
    position: absolute;
    background:#fff;
    border-radius: 5px;

    /* animation */
    transform: translateY(-20px);
    transition: all 0.4s ease;
}

/* ❌ hover বন্ধ */
.sunita3 main .main-inner .ol li:hover .ol1{
    display: block; /* remove display none */
}

/* ✅ click করলে open হবে */
.sunita3 main .main-inner .ol .li.active .ol1{
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
}

.sunita3 main .main-inner  .ol li i{

    padding-left: 5px;

    transition: 1s;

}

 /* .ol li:hover i{

    transform: rotate(90deg);

    transition: .5s;

} */

/* .sunita3 main .main-inner .ol li:hover .ol1{
    display: block;
    opacity: 1;
   max-height: 800px;
} */

.sunita3 main .main-inner  .ol li{

    list-style-type: none;

    display: block;
    cursor: pointer;

    /* margin: 15px 0px 0px 0px; */



}





.sunita-header{

     position: sticky;

    top: 0;

    left: 0;

    display: none;

}

.sunita-header .header-section{

    width: 100%;

    /* height: 100px; */

    background-color: white;

   display: flex;

   align-items: center;

   justify-content: space-between;

    /* border: 1px solid red; */

}

.sunita-header .header-section i{

    margin:10px 20px;

    font-size: 25px;

    color: gray;

}

@media(max-width:1400px){

    .sunita3 main .main-inner ul li{

        font-size: 12px;

    }

}

@media(max-width:1200px){

    .sunita3 main .main-inner ul li{

        font-size: 10px;

    }

}

@media(max-width:1025px){

    .sunita3 main .main-inner ul li{

        font-size: 11px;

    }

    .sunita3 main .main-inner ul li i{

    font-size: 13px;

    display: none;

}

}

@media(max-width:992px){

.sunita3 main .main-inner{

   display: none;

}

.sunita-header{

    display: block;

}

}