/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */

.container{
    width: 100%;
    padding-inline: 1rem;
}


ul {
    list-style-type: none;
}

.btn {
    display: block;
    background-color: #1ab79d;
    color: whitesmoke;
    /* padding: 0.6em 1.2em; For bigger than 360px*/
    padding: 0.6em 0.8em;
    border-radius: 5px;
    transition: background .5s
}

 .btn:hover {
    background: #03be4b; 
}  

.ghost__btn {
    display: block;
    background-color: whitesmoke;
    color: #1ab79d;
    padding: 0.5em 0.8em;
    border-radius: 5px;
    transition: background .5s, color .5s
}

.ghost__btn:hover {
    background: #03be4b; 
    color: whitesmoke
}


/* xs */
@media (min-width: 475px) {
    .container{
        max-width: 100%;
    }
    .btn{ 
        padding: 0.5em 1.2em;
    }
    .ghost__btn{
        padding: 0.5em 1.2em;
    }
}

/* sm */
@media (min-width: 640px) {
    .container{
        max-width: 100%;
    }

    .btn {
        padding: 0.5em 2.5em;
    }
    
    .ghost__btn {
        padding: 0.5em 2.5em;
    }
    
}

/* md */
@media (min-width: 768px) {
    .container{
        max-width: 100%;
        padding-inline: 2rem;
    }

    .btn {
        padding: 0.5em 2.5em;
    }
    
    .ghost__btn {
        padding: 0.5em 2.5em;
    }
}

/* lg */
@media (min-width: 1024px) {
    .container{
        max-width: 100%;
        padding-inline: 4rem;
    }

    .btn {
        padding: 0.5em 2.5em;
    }
    
    .ghost__btn {
        padding: 0.5em 2.5em;
    }
}

/* xl */
@media (min-width: 1280px) {
    .container{
        max-width: 100%;
    }
    .hero .mission{
        padding-inline: 6rem;
    }
}

/* 2xl */
@media (min-width: 1536px) {
    .container{
        max-width: 100%;
    }
    .hero .mission {
        padding-inline: 10rem;
    }
}