@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

:root{
    --green:#27ae60;
    --black:#192a56;
    --light-color:#666;
    --teal: darkcyan;
     --box-shadow:.5rem .5rem 0 rgba(22, 160, 133, .2);
    --text-shadow:.4rem .4rem 0 rgba(0, 0, 0, .2);
    --border:.2rem solid var(--teal);
    --border-hover:.1rem solid #3399ff;
}

*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-transform: capitalize;
    transition: all .2s ease-out;
    text-decoration: none;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 7rem;
    scroll-behavior: smooth;
}

section{
    width: 80%;
    justify-items:center ;
    justify-content: center ;
    margin-left: 10%;
}

h1 {
 color: var(--black);
 font-size: 3.5rem;
 padding:1rem 0;
}

.s-box h3 {
 color: var(--black);
 font-size: 2.5rem;
 padding:1rem 0;
}
.s-box p{
 color: var(--light-color);
 font-size: 1.4rem;
 line-height: 2;
 text-transform: none;
 margin-bottom: 20px;
}