@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');

html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin: 0%;
   
    
}
/* try */


:root{
    --primary-color: #02aab0; /* Teal */
    --secondary-color: #111817; /* Turquoise */
    --off-white:#cbced2;
}



/* try */

/* :root{
    --primary-color:#86198f;
    --grey-color:#a3a7af;
    --off-white:#d9dce1;
} */
h1{
    color:var(--primary-color);
}
p{
   max-width: 70vw;
    display: block;
    margin: auto;
    padding: 2rem;
}

.container-fluid{
    padding: 2rem 5rem;
}
.container-center{
   max-width: 600px;
   margin: auto;
}
.links-primary{
    background-color: var(--primary-color);
    padding:5px 4px;
    font-size:medium;
    border-radius:0.5rem;
    color:white;
    text-decoration: none; 
}
.links-secondary{
color: var(--primary-color);
border-radius: 0.5rem;
padding:5px 4px;
border: 1px solid var(--primary-color);
text-decoration: none;
}

.list-no-bullet{
    list-style: none;
}

.list-item-inline{
display: inline;
padding: 0 1.5rem;
}

.navigation{
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem;
    border-bottom-left-radius: 0.5rem;
}
.navigation .nav-pills{
    text-align: right;
}
.brand-name{
    color: white;
    padding: 0.5rem;
}
.link{
    color: white;
    text-decoration: none;
}
.navigation .active-page{
    font-weight:bold;
}
.hero .hero-img{
    max-width: 350px;
    display: block;
    margin: auto;
    padding: 0.5rem;
}
.hero .hero-header{
    text-align: center;
    color: var(--secondary-color);
    padding: 0.5rem;
}
.hero .highlighter{
    color: var(--primary-color);
}

.section{
    text-align: center;
}
/* .section h1,p,small{
    text-align: center;
} */
.section{
    padding: 2rem;
}
.section-header{
    
    margin-bottom: 0px;
}

.ow{
    background-color: var(--off-white);
}
.footer{
    background-color: var(--primary-color);
    color: white;
    text-align:center;
    border-bottom-right-radius: 0.5rem;
    padding: 1rem 0;
}
.footer-heading{
    font-size: larger;
}
footer ul{
 padding-left: 0;
}
footer img{
    height:3rem;
}