@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;700&display=swap');
:root{
    --primary-color:#0535b5 ;
    --off-white: #d8d5ef;
}
body{
    font-family: 'Bitter', serif;
    margin: 0px;
    }

    hr{
        margin: 2rem 0rem; 
    }
/* @container */
.container{
    padding-left: 1rem;
    padding-right: 1rem;
    }

.container-center{
    max-width:600px;
    margin: auto;
  
}

.web-site{
    font-weight: bold;
    font-size: 1.1rem;
    display: inline;
    padding-left: 1rem;
}

/*@links */

.link {
    text-decoration: none;
    padding: 0.5rem 0.5rem;
}

.primary-link {
    background-color: var(--primary-color);
    color: white;
    border-radius: 0.5rem;
}

.secondary-link {
    border: 0.5px solid;
    background-color: white;
    border-radius: 0.5rem;
    color: var(--primary-color);
}
/* .link{
    text-decoration: none;
    padding: 0.5rem 0rem;
    text-align: center;
    
}
.secondary-link {
    background-color: white;
    color:var(--primary-color);
    border-radius: 0.5rem;
    /* display:block; */
    /* border: var(--primary-color);
    max-width:70px;
    }
    
.primary-link{
    background-color: var(--primary-color);
    color: white;
    border-radius: 0.5rem;
     border: 1px solid var(--primary-color); 
    max-width: 70px;
    display: block; 
}
/*@lists*/
 .non-bullet{
     list-style: none;
 }

 .list-item-inline{
     display: inline;
     padding: 3rem 1rem;
     
 }

 /*@navigation*/
#spanName{
    color: var(--primary-color);
}

.navigation{
    background-color: #0535b5;
    color: white;
    padding: 2rem 0 2.5rem; 
    border-bottom-left-radius: 1rem;

}

.navigation .link{
    color:white;
    
    
}

 .nav-pills{
    float: right;
    display: inline;
    margin: 1rem;
}

.navigation .web-site{
    font-weight: bold;
    font-size: larger;
    color: white;
}
.navigation .link-active{
    font-weight: bold;
}

/*@header */
.myheader{
     padding: 2rem;
}

.myheader .my-img{
    max-width: 297px;
    display: block;
    margin: auto;
}

.myheader{
    padding: 0.5rem;
} 
.my-heading{
    color:#374151;
    text-align: center;
    padding: 0rem;
}
 .myheader .my-heading .my-span{
     color: var(--primary-color);
 }

 /* section */

 .sect{
     padding: 1.5rem;
 }
 .sect h1 {
     text-align: center;
  
 }

 .ow{
     background-color: var(--off-white);
 }

 .sect .sect-para1{
     text-align:center;
 }

 /*@footer*/
.footer{
       background-color: var(--primary-color);
    color: white;
    border-top-right-radius: 1rem;
      text-align:center;
    padding: 0.7rem 1rem;

}

.footer .link{
    color: white;
    text-align: left;   
}

.footer ul{
    padding-inline-start: 0px;
    text-align: center;
    padding-bottom: 0.1rem;
}


.footer .foot-head{
    font-weight: bold;
    font-size: 24px;
}

#footer-sign{
    text-align:center;
    padding: 0.2rem;
    margin: 0rem;
    font-weight: bold;
    text-decoration: none;
}

#connectLink{
    font-weight: bold;
    text-decoration: none;
}

.proSection h1{
    padding-left: 0.5rem;
}

.proSection{
    padding: 0.1rem;
}