* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

:root {
    --background-color1: #03023e;
    --background-color11:45deg, #1899ad, #0e454f;
    --background-color12: 45deg, #137080, #fda31b;
    --background-color2: #FDA31B;
    --background-color3: #F5FAFF;
    --background-color4: #024a02;
    --color1: #FDA31B;
    --color2: #F5FAFF;
    --color400:#1899ad;
    --color3:#f4f9fe;
    --color44: #0e454f;
    --color33:#03023e;
    --color55:#0d5ef4;
    --color9:#121169e5;
    --para-color:#a2a4a2;
    --font-family: 'Roboto', sans-serif;
    /* --font-family1: cursive; */
    --font-family1: 'Poppins', sans-serif;
    --font-family2: cursive;
    --font-size1:25px;
    --font-size2:15px;
    --paragraph: 16.5px;
    --sub-hading: 32px;
}

.navber_main_sunita{
     position: sticky;
     top: 0;
     box-shadow: 0 0 10px rgb(0,0,0,.18);
     left: 0;
     z-index: 999;
}

.main_main_sunita{

    overflow: hidden;

}

.sunita-nav-main {

    width: 100%;

    height: 88px;

    background-color: #fff;
    
}



.sunita-nav-main .sunita-nav-main-inner {

    width: 85%;

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left {

    display: flex;

    align-items: center;
  

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left img {

    height: 70px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main {

    display: flex;

    list-style: none;

    padding: 0px;

    margin: 0;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main {

    padding: 30px 10px;

    position: relative;

    font-family:var(--font-family1);
    color: var(--color44);
    cursor: pointer;

    font-size: 14px;

    display: flex;
}
.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main .chaitali_span{
    /* border-bottom: 2px solid red; */
    position: relative;
    color: var(--color44);
}
.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main .chaitali_span::after{
    position: absolute;
    content: '';
    bottom: -5px;
    width: 0%;
    height: 2px;
    left: 0;
    transition: 1.2s;
    background: linear-gradient(45deg, #1899ad, #0e454f);
}
.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main:hover .chaitali_span::after{
    width: 100%;
}
.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main i{

    margin: 3px;

    transition: 1.2s;

}

.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main:hover i{

        transform: rotate(93deg);

}

.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main a {

    text-decoration: none;

    color: var(--color3);

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main ul {

    list-style-type: none;

    background-color: var(--background-color3);

    opacity: 0;

    position: absolute;

    max-height: 0;

    top: 100%;

    overflow: hidden;

    z-index: 22;

    left: -60px;

    transition: max-height 1.5s, opacity 1.5s;

    width: 250px;

    border-radius: 5px;

    border-top: 3px solid var(--background-color2);

    padding: 0px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main:hover ul {

    opacity: 1;

    max-height: 600PX;



}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main ul li {
color: var(--color44);
    padding:10px 20px;

    font-family: var(--font-family1);

    transition: 1s;

    position: relative;

    border-bottom: 1px solid gray;

    font-size: 16px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main ul li::before {

    content: '//';

    position: absolute;

    left: 10px;

    width: 20px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 20px;

    opacity: 0;

    transition: 1s;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main ul li:hover {

    /* background-color: var(--background-color1); */
     background: linear-gradient(45deg, #1899ad, #0e454f);

    color: var(--color2);

    padding-left: 30px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main .li-main ul li:hover::before {

    opacity: 1;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-hidden {

    display: none;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-hidden .ul-hidden-main {

   width: 100%;

    height: 300px;

    position: absolute;

    right: 0;

    top: 98%;

    overflow-y: scroll;

    opacity: 0;

    /* box-shadow: 0 0 10px rgb(0,0,0,.18); */

}

.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 {

    display: grid;

    list-style: none;
    padding: 0;
    overflow: hidden;
    /* position: absolute; */

    background:  linear-gradient(45deg, #1899ad, #0e454f);

    width: 100%;

    z-index: 999;

}


.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .a{
    color: white    ;
}
.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main {

    padding: 30px 20px;

    position: relative;

    font-family: var(--font-family1);
    color: var(--color44);

    cursor: pointer;

    font-size: 14px;

    color: white ;

    border-bottom: 1px solid var(--color1);

    border-radius:0px 2px 2px 0px;
}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 a {

    text-decoration: none;

    color: var(--color3);

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .ul {

    list-style-type: none;

    background-color: rgb(221, 218, 218);

    opacity: 0;

    max-height: 0;

    margin: auto;

    padding: 0;

    right: 10px;

    overflow: hidden;

    transition: max-height 1.5s, opacity 1.5s;

    width: 100%;

    border-radius: 5px;

    transition: .5s;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main:hover .ul {

    opacity: 1;

    max-height: 600PX;



}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .ul li {

    padding:10px 20px;

    font-family: var(--font-family1);

    transition: 1.5s;

    position: relative;

    font-size: 16px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .ul li::before {

    content: '//';

    position: absolute;

    left: 10px;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 20px;

    opacity: 0;

    transition: 1.5s;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .ul li:hover {

    background-color: var(--color3);

    color: var(--color2);

    padding-left: 30px;

}



.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main1 .li-main .ul li:hover::before {

    opacity: 1;

}

.sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-hidden .ul li i {

    font-size: 17px;

}
/* Mobile menu active */
#sub-bar {
    opacity: 0;
    max-height: 0;
    transition: 0.5s ease-in-out;
}

#sub-bar.active {
    opacity: 1;
    max-height: 800px;
}


.ul-main1 .ul {
    opacity: 0;
    max-height: 0;
    transition: 0.5s ease;
}

.ul-main1 .ul.show {
    opacity: 1;
    max-height: 600px;
}


@media(max-width:1313px) {

    .sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-main {

        display: none;

    }



    .sunita-nav-main .sunita-nav-main-inner .sunita-nav-main-inner-left .ul-hidden {

        display: block;

    }

}