*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'saira',sans-serif;
}

/*--------- Custom Scrollbar -----------*/
::-webkit-scrollbar{
    width: 15px;
}
::-webkit-scrollbar-track{
    background: #f0cfee;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(#642bff,#ff22e6);
    border-radius: 10px;
    border: 5px solid transparent;
    background-clip: content-box;
}


/*****  container starts here  *************************/
.container{
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 1px 0px 4px 0px #666;
    overflow: hidden;
    overflow-x: hidden;
    padding: 0px 0px;}

.row{border: 3px salid red; margin: 0px 0px;}

#log{ 
    display: flex; 
    width: 150px;
    height: 50px;
    margin: 22px 0px 0px 12px;
}

#fgotex{display:none;}

/***** nav bar starts here *********************/
.menu-items {
    display: flex; 
    margin-bottom: 0px;  
    width: 508px; 
    list-style: none;
    justify-content: center; 
    z-index: 1000;
    align-items: center;
    background-color:#ccc; 
    height: 32px;
    border-radius:0px 0px 10px 10px;
    padding-left: 0px;
    position: relative;}

li{ display: list-item;}
a  {color: #283442; 
    font-family: 'saira',sans-serif ;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    border-radius: 0px 0px 10px 10px;
    letter-spacing: 2px; padding: 6px 15px 3px 15px;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}
    
.menu-items li a.active{
    background:rgb(245, 91, 173); 
    color:#fff; 
    border-radius: 0px 0px 10px 10px;
    width: 100%;
}
 
/*==================== new style =========================*/

.menu-items li a{text-decoration: none; text-align: center; color: #283442; padding: 6px 15px 3px 15px;
    border-radius: 0px 0px 10px 10px; font-family: 'saira',sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 2px; line-height: 32px; transition: background .3s ease ,color .3s ease;
   height: 0px; transition: all 0.3s linear; top: 0px; position: relative; z-index: 1;}

.menu-items li a::before{
    content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0%; z-index: -1; transition: all 0.3s linear; border-radius: 0px 0px 10px 10px; color: #fff; }
 
.menu-items li a:hover::before{background: rgb(245, 91, 173);  border-radius: 0px 0px 10px 10px; height: 32px; z-index: -1; position: absolute; top: 0; }

.menu-items li a:hover{ color: #fff;}

/*==================== new style =========================*/
.menu-btn{
    display: flex; 
    position: relative; 
    justify-content: center; 
    align-items: center; 
    width: 1.5rem; 
    height: 1.5rem; 
    cursor: pointer;
    padding: 0px 0px 28px 0px;
}

.menu-btn_liens,
.menu-btn_liens::before,
.menu-btn_liens::after{ 
    width: 1.5rem; 
    height: 0.1rem; 
    background-color: #ff1493; 
    transition: all 0.5s ease-in-out;}

.menu-btn_liens::before,
.menu-btn_liens::after{ content: ""; position: absolute;}

.menu-btn_liens::before{transform: translateY(-0.5rem);}
.menu-btn_liens::after{transform: translateY(0.5rem);}
.menu-btn.open .menu-btn_liens{transform: translateX(2rem); background-color: transparent;}

.menu-btn.open .menu-btn_liens::before{
    transform: rotate(45deg) translate(-1.5rem, 1.5rem); 
    background-color: deeppink;}

.menu-btn.open .menu-btn_liens::after{
    transform: rotate(-45deg) translate(-1.5rem,-1.5rem); 
    background-color: deeppink;}

/****** nav bar ends here ***********/

#humb{
    padding: 50px 0px 0px 102px; 
    display: flex;
}

.copyy{
    background-color: #010718;
    height: 48px;

}
.copyy p{
    display: flex;
    align-items: center;
    justify-content: center; 
    color:#ffff;
    padding:12px 0px;
    letter-spacing: 2px;
    font-weight:lighter;
}



/*******   stand part starts here   *******/
.accord{
    min-height:55vh;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;}

.prowbox{
    max-width: 600px;
    margin-top: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid deeppink;
    cursor: pointer;}

.question{
    display: flex;
    justify-content: space-between;
    color: #b42857;
    align-items: center;}

.answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1.4s ease;}

.answer p{line-height: 2;}

.prowbox.active .answer{
    max-height: 300px;
    animation: fade 1s ease-in-out;}

.prowbox.active svg{
    transform: rotate(180deg);}
svg{
    transition: transform 0.5s ease-in;}
@keyframes fade {
    from{
        opacity: 0;
        transform: translateY(-10px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }    
}

/***** KM part starts here *******/
.km{
    position: sticky;
    top: 2300px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-bottom: 20px;
}
.km a{ 
    text-decoration: none;}

.km a span{ 
    padding: 8px;
    position: relative;
    transition: .5s;
    }
.km a span:nth-child(1){
    color: #fff;
    background:#010718;
}
.km a span:nth-child(2){
    color: #fff;
    background: #b42857;
}
 a span:nth-child(1)::before{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background: #b42857;
    transform-origin: top;
    transform: rotatex(90deg) translateY(-50%);
    transition: .5s;
}
 a:hover span:nth-child(1)::before{
    transform: rotatex(0deg) translateY(0%);
}
a span:nth-child(2)::before{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background:#010718;
    transform-origin: bottom;
    transform: rotatex(90deg) translateY(50%);
    transition: .5s;
}
 a:hover span:nth-child(2)::before{
    transform: rotatex(0deg) translateY(0%);
}

a span:nth-child(1)::after{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background:#010718;
    transform-origin: bottom;
    transform: rotatex(0deg) translateY(0%);
    transition: .5s;
}
a:hover span:nth-child(1)::after{
    transform: rotatex(90deg) translateY(50%); 
}

a span:nth-child(2)::after{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background: #b42857;
    transform-origin: top;
    transform: rotatex(0deg) translateY(0%);
    transition: .5s;
}
a:hover span:nth-child(2)::after{
    transform: rotatex(90deg) translateY(-50%); 
} 
/***** KM part endss here *******/

/***** jone part  starts  here *******/
.jone{
    width: 100%;
    display: flex;
    width: 100%;
    height: 44px;
    background-image: linear-gradient(lightpink,lightpink, #fff);
    margin-bottom: 12px;
    margin-top: 6px;
} 
/***** jone part  ends here *******/

.jonedown{
    width: 100%;
    display: flex;
    width: 100%;
    height: 44px;
    background-image: linear-gradient(#fff, lightpink,lightpink);
}
/****************************************************/

.logo44{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0px 0px 0px;  
  }

.copyyscom p{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#333;
    background-color: none;
    font-weight: 300;
    padding:15px 0px 0px 0px;
    letter-spacing: 2px;
    font-weight: bold;
}
.copyyscom p span{
    color: #d80045;
    position: relative;
    left: 10px;
    margin-right: 17px;
    font-weight: 300;
    font-weight: bold;
}

/***************************/
 
/* xxx    xxxx   xxxxx  */

@media (min-width:992px) and (max-width:2561px){
    .row{ border: 6px salid red; margin: 0px 0px;}
    .logorow {margin: 0px 0px; display: flex;}
    #log{padding: 0px 0px 0px 20px;}
    .mainbar{display: flex; padding: 0px 0px 0px 126px;}
    .menu-items{top: -100px; transition: 0.3s ease-in-out;}
    .menu-items.open{ top: 0px; transition: 0.3s ease-in-out;}
    #humb{padding: 50px 0px 0px 104px; display: flex;}
    .copyy{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#333;
        background-color: none;
        font-weight: 300;
        padding:15px 0px 0px 10px;
        letter-spacing: 2px;
        font-weight: bold;
    }
    .copyy p span{
        color: #d80045;
        position: relative;
        left: 10px;
        margin-right: 17px;
        font-weight: 300;
        font-weight: bold;
    }

}


@media (min-width:768px) and (max-width:991px){
    .row{ border: 6px salid red; margin: 0px 0px;}
    .logorow{display: flex;}
    #log{padding: 0px 0px 0px 10px;}
    .mainbar{padding: 0px 0px 0px 50px;}
    .menu-items{top: -100px; transition: 0.3s ease-in-out;}
    .menu-items.open{top: 0px; transition: .3s ease-in-out;}
    #humb{padding: 50px 0px 0px 90px;}

}

        
@media (min-width:576px) and (max-width:767px){
    .row{ border: 6px salid red; margin: 0px 0px;}
    .logorow{padding: 0px 0px 0px 0px;}
    #log{display:flex; padding: 0px 0px 0px 10px;}
    .mainbar{padding: 0px 0px 0px 38px;}
    .menu-items{ top: -100px; transition: 0.3s ease-in-out;}
    .menu-items.open{top: 0px; transition: .3s ease-in-out;}
    #humb{padding: 35px 0px 0px 75px;}


}
    

@media (min-width:230px) and (max-width:575px){
    .row{ border: 6px salid red; 
        margin: 0px 0px; 
        padding: 0px 0px;}

    #log{ display:none; }

    .logorow{ width: 50%;}

    #fgotex{
        display:flex; 
        margin: 0px -10px; 
        padding: 10px 0px 0px 20px; 
        position:static;}

    .mainbar{
        position: absolute; 
        top: 68px;}

    .menu-items{
        flex-direction: column; 
        border-radius: 0px 0px; 
        padding: 0xp 0px;
        justify-content: space-around; 
        align-items: center;
        position: absolute;
        background-color: #5a4d70; 
        color: #fff;
        top: 1px; 
        left: -100dvw; 
        right:0; 
        z-index: 1000;
        height: 60vw; 
        width: 100%; 
        transition: 0.3s ease-in-out;}
    
    .menu-items.open{ left: 0;}
    .menu-items li{
        width: 100vw; 
        height: 100%;}

    .menu-items li a{
        background-color:#5a4d70; 
        color: #fff; 
        justify-content: center; 
        align-items: center; 
        display: flex; 
        width: 100%; 
        height: 100%;}

    .menu-items li a:hover{ 
        background-color:deeppink; 
        color: #fff;
        border-radius: 0px 0px 0px 0px; 
        transition: background 0.3s ease-in-out , 
        color 0.3s ease-in-out;
        -webkit-transition: background 0.3s ease-in-out , color 0.3s ease-in-out;}

    #humb{
        padding: 26px 16px 0px 0px; 
        justify-content: end; 
        align-items: end;
    }

    
    .accord{
        min-height:75vh;}
    .copyy p{
            display: flex;
            align-items: center;
            justify-content: center; 
            color:#ffff;
            font-weight: 300;
            font-size: 14px;
            padding:14px 0px;
            letter-spacing: 2px;
            font-weight:lighter;
    }
    .prowbox.active .answer{
        max-height: 380px;
        animation: fade 1s ease-in-out;}
    .km{
        margin-top: 20px;
    }
 
}

    

    
     
    





 /* end */