*
{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
body
{
    height: 1vh;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
    letter-spacing: 0px;
    font-style: normal;
    font-size: 18px;
    background-color: #E1E8F2;
}
/* header */
.arrow
{
    display: none;
}
.arrow a{
    color: #99B0D5;
}
.side-menu{
    /* position: relative; */
    height: 100%;
    width: 0;
    padding: 10px 0px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #99B0D5;
    overflow-x: hidden;
    transition: 0.5s;
}
.side-menu .list
{
    position: relative;
}
.side-menu .links
{
    display: block;
    padding: 3vw 0px 0px 0px;
}
.close-btn
{
    position: absolute;
    top: 2px;
    font-size: 4vw;
    right: 10px;
    color: #091440;
}

.row{
    --bs-gutter-x: 0px;
}
.collapasable-menu
{
    padding: 20px 0px;
    cursor:pointer;
    display: none;
}
.menu-line
{
    display: none;
    width: 29px;
    color: white;
    padding: 1.5px;
    margin: 0px 0px 5px 10px;
    background-color: #99B0D5;
}
.sticky
{
    position: sticky;
    top: 0;
    width: 100%;
}
.main-heading
{
    color: #FFFFFF;
    font-size: 80px;
}
#main-heading
{
    display: inline-block;
    padding: 10px;
    border: 5px solid #65BC7B;
}

.header
{
    background-color: #33475B;
    /* margin-bottom: 30px; */
    padding: 10px 0px 10px 20px;
}
.home
{
    background-image: url("../Images/bg1.png");
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.heading h2{
    font-size: 48px;
}
.logo
{
    /* min-height: 100px; */
    /* text-align: center; */
    margin: 0px;
    padding: 20px 0px;
    transition: padding 0.3s;
}
.logo img{
    width: 30%;
}
.smal-nav
{
    text-align: right;
    padding: 0px 20px 0px 0px;
}
.small-nav-links
{
    text-decoration: none;
}
.navgation-bar
{
    margin: 0%;
    padding: 0px;
    z-index: 100;
    background-color: #091440;
    transition: padding 0.3s;
}
.list
{
    list-style: none;
    padding: 10px;
}
.links
{
    display: inline-block;
    padding: 10px 0px;
}
.links a
{
    text-decoration: none;
}

.navigation-links p
{
    display: inline;
}
.bar
{
    height: 2.5vw;
    width: 1.5px;
    margin: 0px 2vw;
    display: inline-block;
    background-color: #FBFFFF;
    vertical-align: middle;
}
.smal-nav
{
    text-align: right;
    padding: 0px 20px 0px 0px;
}
.small-nav-links
{
    text-decoration: none;
    /* padding-left: 10px; */
    margin-left: 10px;
}
.simulation-btn
{
    text-align: end;
}
.navigation-links,.small-nav-links,.simulation-btn .simulate
{
    /* padding: 0px 20px; */
    margin: 0px 10px;
    color: #FFFFFF;
    position: relative;
    font-size: 1.5vw;
}
.navigation-links::before,.small-nav-links::before,.simulation-btn .simulate::before, .active-link::before{
    content: "";
    position: absolute;
    width: 98%;
    height: 3px;
    bottom: -3px;
    left: 0;
    background-color: #65BC7B;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.navigation-links:hover::before,.small-nav-links:hover::before,.simulation-btn .simulate:hover::before,.active-link::before{
    visibility: visible;
    transform: scaleX(1);
}

.navigation-links:hover p,.small-nav-links:hover,.active-link
{
    color: #65BC7B;
}

/* Content */
.heading
{
    font-family: "Museo Slab";
    font-weight: 400;
    text-align: center;
    padding: 15px 0px;;
}
.title
{
    background-color: #65BC7B;
    display: inline-block;
    padding: 0px 0px 0px 5px;
}
.title-name{
    color: #091440;
    padding: 10px;
    text-transform: uppercase;
    background-color: #E0E0E0;
}
.mainContent{
    margin: 30px 0px;
    z-index: 101;
}
.addPadding{
    padding-top: 140px;
}
.color
{
    color: #33475B;
}
.algoName{
    background-color: #33475B;
    color: #FFFFFF;
}
.algoName-title{
    /* width: 84%; */
    display: inline-block;
    padding: 10px;
    color: #FFFFFF;
}
.algoName-title::after
{
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
.active{
    /* background-color: grey; */
}
.active:after {
  content: "\2212";
}
.Plus-sign{
    /* width: 15%; */
    display: inline-block;
}
.plus-bar{
    background-color: #091440;
    height: 1vw;
    width: 5px;
    margin: 0 auto;
}
.horizontal-bar{
    height: 5px;
    width: 1vw;
}
.algo-detail
{
    padding-top: 10px;
}
.algoContent{
    max-height: 0px;
    padding: 0px 10px;
    /* background-color: #E1E8F2; */
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.simulation-btn .simulate,.simulation-btn:hover .simulate
{
    cursor: pointer;
    text-decoration: none;
    color: #091440;
}
.detail
{
    margin-left: 10px;
}
.table{
    margin: 30px 0px;
}
.table .content{
    font-size: 1vw;
}
.table-content{
    margin-bottom: 20px;
}
table
{
    /* margin: 0px auto;     */
    display: inline-block;
    text-align: center;
}
table,th,td{
    border: 1px solid black;
}
th,td{
    padding: 10px 5px;
}
.content{
    display: inline-block;
    margin: 0px auto;
}
.buttons{
    /* margin: 0px auto; */
    display: inline-block;
    vertical-align: bottom;
}
.row-button
{
    color: white;
    background-color: #33475B !important;
    padding: 2px 5px;
    display: inline-block;
    text-decoration: none;
    border-radius: 5px;
    margin: 5px 0px;

}
.submit{
    background-color: #33475B;
    color: white;
    text-decoration: none;
    margin: 10px 0px;
    border-radius: 5px;
    padding: 10px 5px;
}
.input-quantum{
    margin-bottom: 20px;
    display: none;
}
#quantum{
    width: 70px;
    height: 30px;
    text-align: center;
}
.times{
    padding-right: 5px;
}
.times::after
{
    content: "";
    width: 2px;
    height: 98%;
    background-color: black;
    position: absolute;
    right: 0px;
}
#container-fluid{
    /* display: none; */
    max-width: 0px;
    /* overflow: hidden; */
    transition: max-width 2s linear;
}
.table > :not(caption) > * > *{
    padding: 0.25rem;
}
/* Footer */
.footer
{
    background-color: #33475B;
    margin: 10px 0px;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.3vw;;
    padding: 1.5vw 0px;
}
.footer i
{
    color: #ff1d0c;
}
.simulate-btn, .simulate-btn:hover
{
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    color: #FFFFFF;
    background-color: black;
    padding: 10px 10px;
    vertical-align: super;
    background: #64ba7b;
    background-image: linear-gradient( to top, #448a58, #64ba7b );
}
.simulate-btn:hover
{
    background-image: linear-gradient( to bottom, #448a58, #64ba7b );
}
/* algorithms */
.algos{
    margin: 0px;
    position: relative;
    border-right: 2px solid black;
    text-align: center;
    display: inline-block;
}
.algos .line{
    font-size: 2vw;
    --bs-gutter-x: 0;
}
.algos .title{
    padding: 4vw 6px;
    width: 100%;
}
.algo-footer{
    /* position: absolute;
    bottom: 0px;
    width: 100%; */
    margin-bottom: 0px;

}
.alog-image img{width: 100%;}
.alog-image{
    text-align: center;
    margin: 5px auto;
}
.table-visiblity
{
    display: none;
}
@media screen and (max-width: 576px){
    /* .header{
        position: fixed;
        top: 0;
        width: 100%;
        padding: 10px 0px;
        z-index: 99;
    } */
    .disappear
    {
        display: none;
    }
    .visible
    {
        display: block;
    }
    .navgation-bar{
        display: none;
    }
    .footer{
        font-size: 2vw;
    }
    .menu-line{
        display: block;
    }   
    .navigation-links::before{
        background-color: #091440;
    }
    .side-menu .links a
    {
        font-size: 2vw;
        color: #091440;
    }
    .side-menu .links:hover p{
        color: #091440;
    }
    .logo
    {
        text-align: center;
    }
}