/* containers */
.container {
    max-width: 1100px;
    padding: 80px 0;
    margin: 0 auto;
    overflow: hidden;
}

/* buttons */

.btn {
    text-align: center;
    color: #000;
    background-color: var(--secondary-color);
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 1rem 2rem;
    width: 240px;
    border-radius: 20px;
    transition: ease 0.3s;
}

.btn:hover {
   transform: scale(0.98);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* text */
.second-color-text {
    background-color: var(--secondary-color);
    display: inline-block;
    padding: 0 10px;
    font-size: var(--step-3);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

/* colors */
.primary-color {
    color:var(--primary-color)
}

.secondary-color{
   color: var(--secondary-color)
} 

/* flexbox */
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}

.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;

}

/* margins  */

.m1 {
    margin: 0.5rem 0
}

.m2 {
    margin: 1rem 0
}

.m3 {
    margin: 1.5rem 0
}

.m4 {
    margin: 2rem 0
}

/* animation */

.fade-in {
    opacity: 0;
    transition: opacity 250ms ease-in;
}

.fade-in.appear {
    opacity: 1;
}

.from-left {
    transform: translateX(-40%);
    opacity: 0;
}

.from-right {
    transform: translateX(40%);
    opacity: 0;
}   

.from-left, 
.from-right {
    transition: opacity 700ms ease-in, transform 700ms ease-in

}

.from-left.appear, 
.from-right.appear {
    transform: translateX(0);
    opacity: 1;
}