/*************************************************
    GENERAL STYLES
 *************************************************/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    color: #b8c1ec;
    background: #232946;
}

h1,
h2,
h3 {
    color: #eebbc3;
}

h1 {
    margin-bottom: 3rem;
    font-size: 2.5rem;
}

h2 {
    margin-bottom: 2.5rem;
    font-size: 2rem;
    color: #fffffe;
}

h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

img {
    max-width: 100%;
}

/************************************************
    UTILITIES
 ************************************************/

/* LAYOUT */
.container {
    width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.row {
    display: flex;
}

.col {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* TEXT */
.text-center {
    text-align: center;
}

/************************************************
    SITE SECTIONS
 ************************************************/

/* HEADER */
.site-header {
    margin-top: 3rem;
}

/* LESSONS SECTION */
.lessons .col {
    width: 50%;
}

.lessons .col img {
    height: 200px;
    margin-bottom: 1rem;
}


/* STEPS SECTION */
.steps {
   
    margin: 3rem 0;
    padding: 3rem 0;
    color: #232946;
    background: #eebbc3;
}

.steps h2,
.steps h3 {
    color: #232946;
}

.steps .col {
    width: calc(100% / 3);
}

.steps .col img {
    height: 200px;
    margin-bottom: 1rem;
}

/* WHY US SECTION */
.why-us {
    margin-bottom: 3rem;
}
.why-us .col-left {
    width: 40%;
}

.why-us .col-right {
    width: 60%;
}

.why-us li {
    list-style: none;
    margin-bottom: 2.5rem;
}

/************************************************
    SOLUZIONE RESPONSIVE
 ************************************************/
.border{
    border: 1px solid white;
}

@media screen and (max-width:768px)
{
 body{
    width: 768px;
    .container{
        width: 100%; 
    }
    
 }
}

@media screen and (max-width:480px) {
    body {
        width: 480px;
    }

    .container {

        margin: 0 auto;
        padding: 0 20px;
    }

    .row {

        flex-direction: column;

    }

    .img {
        width: 300px;
        height: 300px;
    }

    .why-us {
        background-color: black;
        padding-top: 3rem;
        
      
        margin-bottom: 0;
    }

    .steps{
        margin-top: 3rem;
        margin-bottom: 0;
    }

    .why-us .col-left {
    width: 70%;
    margin-bottom: 40px;
}

.card{
    width: 300px;
    margin-bottom: 40px;
}


}