body {
    background-color: #f8f9fa !important;
    padding-bottom:20px;
    z-index:1;
    overflow-x:hidden;
    padding-bottom:0px;
}
.home {
    height:750px;
    background-image:url(../images/home-shape.png);
    border-radius:10px;
}
#active {
    color:rgb(0 123 255);
    font-weight:bold;
}
.heading {
    font-size: 45px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.leading{
    font-size:25px;
}

.services {
    text-align: center;
    align-items:center;
    padding: 3rem;
}

.services-row {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 12%;
}
.feature-widget {
    padding: 40px 45px;
    background-color: #ffffff;
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-box-shadow: -0.0625rem 0 0.625rem 0 rgba(0, 0, 0, 0.07), 0.3125rem 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.04) !important;
    box-shadow: -0.0625rem 0 0.625rem 0 rgba(0, 0, 0, 0.07), 0.3125rem 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.04) !important;
}
.rounded {
    border-radius: 15px !important;
}
#services .row {
    margin-right: -145px !important;
    margin-left:-145px;
}

/* navigation */
.flex{
    display:flex;
    gap: var(--gap,1rem);
}

.primary-header {
    position:fixed;
    width:100%;
    height: 100px;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    padding:2em;
    background-color:transparent;
}

.primary_navigation{
    margin:0;
    padding:0;
    list-style:none;


}
.mobile-toggle{
    display:none;
}
.primary_navigation a {
    text-decoration: none;
    font-weight: 700;
    color: black;

}

/*for mobile devices*/
@media(max-width:50em){
    .primary_navigation{
        position:fixed;
        inset:0 0 0 50%;
        background:hsla(0 0% 0% /0.20);
        backdrop-filter:blur(1rem);
        flex-direction:column;
        padding:min(30vh,10rem) 2em;
        --gap:2em;
        z-index:2;

        transform:translateX(100%);
        transition: transform 350ms ease-in;
    }
    .primary_navigation[data-visible="true"]{
        transform:translateX(0%);
        transition: transform 350ms ease-out;

    }
    .primary_navigation a{
        color:black;
    }
    .mobile-toggle{
        display:block;
        position:absolute;
        background:url('../images/list.svg');
        background-size:cover;
        background-repeat:no-repeat;
        width:2em;
        border:0;
        aspect-ratio:1;
        top:2rem;
        right:2rem;
        z-index:3;
    }
    .mobile-toggle[aria-expanded ="true"] {
        background: url('../images/x-lg.svg');
        background-size: cover;
        background-repeat: no-repeat;
    }

   
}
/**/
/*Timeline*/
.line::before {
    content: '';
    position: absolute;
    height: 39rem;
    width: 29rem;
    top: 55%;
    transform: translateX(-50%);
}
.timeline {
    height:auto;
    max-width:65rem;
    margin:0 auto;
    position:relative;
}
.timeline ul{
    list-style:none;
    padding:0;

}
    .timeline ul li {
        padding: 20px;
        background-color: white;
        color: black;
        border:1px dashed;
        border-color:lightgrey;
        margin-bottom: 1rem;
    }
.timeline-content h1{
    font-size:25px;
    font-weight:500;
    line-height:30px;
    margin-bottom:0.2rem;
}
.timeline-content p{
    font-size:16px;
    line-height:30px;
    font-weight:300;
}
.timeline-date{
    font-size:14px;
    font-weight:400;
    margin-bottom:0.2rem;
    letter-spacing:0.15rem;


}
@media (min-width:50em){
    .timeline ul li{
        width:50%;
        margin-bottom:3rem;
        position:relative;
    }
    .timeline ul li:nth-child(2n+1){
        float:left;
        clear:right;
        transform:translateX(-4%);
        border-radius:1rem 0rem 1rem 1rem;

    }
    .timeline ul li:nth-child(2n) {
        float: right;
        clear: left;
        transform: translateX(4%);
        border-radius: 0rem 1rem 1rem 1rem;
    }
    .timeline::before{
        content:'';
        position:absolute;
        height:29rem;
        width:2px;
        background-color:grey; 
        left:50%;
        transform:translateX(-50%);


    }
    .timeline ul li::after{
        content:'';
        position:absolute;
        height:1rem;
        width:1rem;
        background-color:gray;
        border-radius:50%;
        top:0;
    }
    .timeline ul li:nth-child(2n+1)::after{
        right:-4%;
        transform:translate(50%,-50%);
    }
    .timeline ul li:nth-child(2n)::after{
        left:-4%;
        transform:translate(-50%,-50%);
    }
    .timeline ul li:hover:after{
        background-color:aqua;
    }
    .timeline-date{
        position:absolute;
        top:-2rem;
    }
}