:root {
    --primary-font: "Gruppo", sans-serif;
    --secondary-font:"Shadows Into Light", sans-serif;

    --primary-color: #f5f5f5;
    --secondary-color: #555;
    --third-color: #353535;

    --white: #fff;
    --black: #000;
}

body {
    font-family: var(--primary-font);
    font-size: 1.8rem;
    color: var(--black);
    background-color: var(--primay-color);
}

img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    
}

.wrapper {
    margin: 0 auto;
    width: Min(90%, 150rem);
    padding: 0 1.5rem;
    @media only screen and (max-width: 64rem) {
        width: 100%;
    }
}

.container {
    width: Min(100%, 117rem);
    padding: 0 1.5rem;
    margin: 0 auto;
}

.btn {
    color: var(--secondary-color);
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 4rem;
    padding: 1.3rem 2rem;
    border: 1px solid var(--black);
    display: inline-block;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.btn:hover {
    background-color: var(--third-color);
    color: var(--white);
    transition: all .3s ease-in-out;
}

.btn-atl {
    color: var(--white);
    font-size: 1.4rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--third-color);
    border-radius: 4rem;
    padding: 1.3rem 2rem;
    border: 1px solid var(--black);
    display: inline-block;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.btn-atl:hover {
    background-color: transparent;
    color: var(--third-color);
    transition: all .3s ease-in-out;
}

.link-middle {
    text-decoration: none;
    position: relative;
}

.link-middle::before {
    content: "";
    background: var(--black);
    height: 1px;
    display: block;
    position: absolute;
    right: 51%;
    bottom: 0;
    left: 51%;
    transition: all .3s ease-in-out;
}

.link-middle:hover::before {
    right: 0;
    left: 0;
    transition: all .3s ease-in-out;
}

.animate-fade {
    opacity: 0;
}

.animate-fade.top {
    transform: translateY(100px);
}

.animate-fade.top.fade-in {
    transform: translateY(0);
}

.animate-fade.bottom {
    transform: translateY(-100px);
}

.animate-fade.bottom.fade-in {
    transform: translateY(0);
}

.animate-fade.left {
    transform: translateX(-100px);
}

.animate-fade.left.fade-in {
    transform: translateX(0);
}

.animate-fade.right {
    transform: translateX(100px);
}

.animate-fade.right.fade-in {
    transform: translateX(0);
}

.animate-fade.clip-img {
    clip-path: inset(0 100% 0 0);
}

.animate-fade.clip-img.fade-in {
    transition: all 2s cubic-bezier(0.18, 0.32, 0.17, 0.99);
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.animate-fade.animate-clip {
    clip-path: inset(0 100% 0 0);
}

.animate-fade.animate-clip.fade-in {
    transition: all 2s cubic-bezier(0.18, 0.32, 0.17, 0.99);
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.animate-fade.fade-in {
    opacity: 1;
    transition: all 1.5s cubic-bezier(0.18, 0.32, 0.17, 0.99);
}