.header-span {
   display: inline-block;
   background-color: #0B2838;
   justify-content: center;
   width: max-content;
   align-items: center;
   text-align: center;
   font-style: italic;
   transform: skew(-15deg);
   
}

.header-span h1 {
   color: #E89C31;
   margin-top: 4px;
   margin-bottom: 2px;
   margin-right: 8px;
   margin-left: 2px;
   transform: skew(15deg);
   font-size: 3em;
}

.nav-header-span-class {
   display: inline-block;
   background-color: #E89C31;
   font-style: italic;
   text-align: center;
   align-items: center;
   width: max-content;
   height: max-content;
   justify-content: center;
   transform: skew(-15deg);
}

.nav-header-span-class h5 {
    color:#0B2838;
    transform: skew(15deg);
    margin-left: 2px;
    margin-right: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.nav-header-desc-pill {

    background-color: #E89C31 !important;
    color: #0B2838 !important;
    border-radius: 30px !important;
    opacity: 1 !important;
    padding: 4px 6px !important;

}

.navbar-top {

    margin-right: 0px !important;

}


.title-animate {

    position: relative;
    animation: fadeIn 1s ease-in-out, upwardMove .8s ease-in-out;

}

@keyframes fadeIn {

    0% {opacity: 0%;}
    100% {opacity: 100%;}

}

@keyframes upwardMove {

    0% {transform: translateY(.9em);}
    100% {transform: translateY(0);}

}


.accordion-button {
    color: #0B2838;
    font-weight:100;
}

.accordion-button:not(.collapsed) {
    /* background-color: #A2D2FF;
    color: #0B2838; */
    background-color: #E89C31;
    color: #0B2838;
    font-weight:bold;
    border-width: medium;
    border-color: #0B2838;
}

.accordion-body {

    background-color: #f9f9f9;

}

.accordion-item {

    border-width: 1px;
    border-color: rgba(30,30,30,0.15);

}


.home-page-row-banner {

    min-height: 25rem;
    background-image: URL("Icon\ Grid.svg");
    background-size: cover;

}

.home-page-title-text-box {


    background-color: rgba(33, 37, 41, 1);
    border-radius: 10px;
    padding: 1.5em 3em 1em 3em;
    margin-top: 2em;

}

.home-banner-title-text {

    font-size: x-large;
    color: #E89C31;
    font-size: 3em;
    font-weight: 800;
}

.home-page-example-animate-box {

    background-color: rgba(33, 37, 41, 1);
    min-height: 80%;
    margin-top: 2em;
    margin-bottom: 1em;

}


.home-banner-title-italics {
    display: inline-block;
    background-color: #E89C31;
    justify-content: center;
    width: fit-content;
    align-items: center;
    text-align: left;
    font-style: italic;
    transform: skew(-15deg);

    margin-bottom: 1.5em;
    
 }
 
 .home-banner-title-italics h1 {
    color: rgba(33, 37, 41, 1);
    margin-top: 4px;
    margin-bottom: 2px;
    margin-right: 8px;
    margin-left: 2px;
    transform: skew(15deg);
    font-size: 3em;
    font-weight: 800;
 }



/* Setting up Animation for Home Page */

.example_head_1 {
    animation: examplehead1;
}

.example_head_2 {
    animation: examplehead2;
}

.example_head_3 {
    animation: examplehead3;
}

.example_head_4 {
    animation: examplehead4;
}

.example_head_5 {
    animation: examplehead5;
}


.example_head_stats_1 {
    animation: headstats1;
}

.example_head_stats_2 {
    animation: headstats2;
}

.example_head_stats_3 {
    animation: headstats3;
}

.example_head_stats_4 {
    animation: headstats4;
}

.example_head_stats_5 {
    animation: headstats5;
}


.example_head_1, .example_head_2, .example_head_3, .example_head_4, .example_head_5, .example_head_stats_1, .example_head_stats_2, .example_head_stats_3, .example_head_stats_4, .example_head_stats_5{
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    animation-duration: 55s;
    animation-timing-function: steps(50, end);
    animation-iteration-count: infinite;
  }


@keyframes examplehead1 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    3%, 17% {
        width: 24em;
    }

}

@keyframes examplehead2 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    23%, 37% {
        width: 24em;
    }

}

@keyframes examplehead3 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    43%, 57% {
        width: 27em;
    }

}

@keyframes examplehead4 {

    0%, 20%, 40%, 60%, 80%, 100%  {
        width: 0;
    }

    63%, 77% {
        width: 27em;
    }

}

@keyframes examplehead5 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    83%, 97% {
        width: 30em;
    }

}


.busy-trips-header-home-page {

    background-color: #E89C31;
    width: max-content;
    text-align: center;
    align-items: center;
    display: inline-block;
    height: max-content;
    transform: skew(-15deg);
    font-style: italic;

}

.busy-trips-header-home-page h6{

    color: rgba(33, 37, 41, 1);
    margin-top: 2px !important;
    margin-bottom: 2px;
    margin-right: 8px;
    margin-left: 2px;
    transform: skew(15deg);

}

.busy-trips-header-home-page-stats {

    background-color: #7CC6FE;
    width: max-content;
    text-align: center;
    align-items: center;
    display: inline-block;
    height: max-content;
    transform: skew(-15deg);
    font-style: italic;

}

.busy-trips-header-home-page-stats h6{

    color: rgba(33, 37, 41, 1);
    margin-top: 2px !important;
    margin-bottom: 2px;
    margin-right: 8px;
    margin-left: 2px;
    transform: skew(15deg);
    font-size: 1.15em;

}




@keyframes headstats1 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    3%, 17% {
        width: 29em;
    }

}

@keyframes headstats2 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    23%, 37% {
        width: 29em;
    }

}

@keyframes headstats3 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    43%, 57% {
        width: 29em;
    }

}

@keyframes headstats4 {

    0%, 20%, 40%, 60%, 80%, 100%  {
        width: 0;
    }

    63%, 77% {
        width: 29em;
    }

}

@keyframes headstats5 {

    0%, 20%, 40%, 60%, 80%, 100% {
        width: 0;
    }

    83%, 97% {
        width: 29em;
    }

}




.home-page-info-col {

    display: flex;
    justify-content: start;
    align-items: center;
    text-align: center;
    flex-direction: column;

    transition: transform .5s ease-in-out;

}

.home-page-info-col:hover {

    transform: scale(1.075);

}

.home-page-info-col small {

    color: rgba(33, 37, 41, 1)
}

.home-page-info-col h5 {

    color: rgba(33, 37, 41, 1)
}

.home-page-info-img {

    font-size: 3em;
    color: rgba(33, 37, 41, 1);
    margin: 0.25em 0.5em;

}

.home-page-info-col span {

    display: flex;
    background-color: #E89C31;
    border-radius: 100%;
    border-color: rgba(33, 37, 41, 1);
    border-width: 4px;
    border-style: solid;


}



.routes-graph-util-select {

    width: 35%;
    height: 2.25em;
    border-radius: 25px;
    
}

.routes-graph-util-span {

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    

}

.passengers-graph-util-span {

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    
}


.otp-graph-util-span {

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    
}

.navbar-nav .dropdown-menu {

    position: absolute;

}

.popover-body {

    padding: 0px;

}

.popover {
    --bs-popover-max-width: 240px !important;
}


.btn-blue, .btn-yellow, .btn-home-page {
    
    border: 0px double #0B2838; 

    transition: all 0.3s ease-in-out; /* vendorless fallback */
    -o-transition: all 0.3s ease-in-out; /* opera */
    -ms-transition: all 0.3s ease-in-out; /* IE 10 */
    -moz-transition: all 0.3s ease-in-out; /* Firefox */
    -webkit-transition: all 0.3s ease-in-out; /*safari and chrome */

}


.btn-blue:hover, .btn-yellow:hover, .btn-home-page:hover {
    border: 4px double #0B2838; 
    cursor:pointer;

    transform: scale(1.075);
}