/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Premium Gradient Footer
| This file controls only the website footer.
|--------------------------------------------------------------------------
*/





.hyro-gradient-footer{

    position:relative;

    overflow:hidden;

    padding:60px 0 22px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #ec4899 0%,
        #c084fc 52%,
        #8b5cf6 100%
    );

}

.hyro-gradient-footer *{
    box-sizing:border-box;
}

.hyro-gradient-footer-circle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    pointer-events:none;
}

.hyro-gradient-footer-circle.circle-left{
    width:420px;
    height:420px;
    top:-300px;
    left:-155px;
}

.hyro-gradient-footer-circle.circle-right{
    width:470px;
    height:470px;
    right:-290px;
    bottom:-285px;
}

.hyro-gradient-footer-inner{
    position:relative;
    z-index:2;
}

.hyro-gradient-footer-grid{

    display:grid;

    grid-template-columns:1.45fr repeat(3,1fr);

    gap:48px;

    padding-bottom:38px;

}

.hyro-gradient-footer-logo{
    display:inline-flex;
    flex-direction:column;
    color:#ffffff;
    text-decoration:none;
}

.hyro-gradient-footer-logo strong{
    color:#ffffff;
    font-size:36px;
    font-weight:700;
    line-height:1;
    letter-spacing:1px;
}

.hyro-gradient-footer-logo span{
    margin-top:12px;
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.65px;
}

.hyro-gradient-footer-brand p{

    max-width:400px;

    margin:18px 0 18px;

    color:#ffffff;

    font-size:15px;

    line-height:1.65;

}

.hyro-gradient-footer-company{

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}
.hyro-gradient-footer-social{

    display:flex;

    gap:10px;

    margin-top:10px;

}

.hyro-gradient-footer-social a{
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.88);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:rgba(255,255,255,.06);
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease;
}

.hyro-gradient-footer-social a:hover{
    color:#ec4899;
    background:#ffffff;
    transform:translateY(-3px);
}

.hyro-gradient-footer-column h3{

    margin:0 0 16px;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

.hyro-gradient-footer-column a,
.hyro-gradient-footer-column span{

    display:block;

    margin:10px 0;

    color:#ffffff;

    font-size:15px;

    line-height:1.4;

    text-decoration:none;

}

.hyro-gradient-footer-column a{
    transition:transform .2s ease;
}

.hyro-gradient-footer-column a:hover{
    color:#ffffff;
    transform:translateX(4px);
}

.hyro-gradient-footer-column span{
    opacity:.92;
}

.hyro-gradient-footer-divider{

    width:42px;

    height:1px;

    margin:14px 0;

    background:rgba(255,255,255,.75);

}

.hyro-gradient-footer-bottom{

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.65);

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#ffffff;

    font-size:14px;

}

.hyro-gradient-footer-legal{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.hyro-gradient-footer-legal a{
    color:#ffffff;
    font-size:15px;
    text-decoration:none;
}

.hyro-gradient-footer-legal a:hover{
    text-decoration:underline;
}

.hyro-gradient-footer-legal i{
    width:1px;
    height:18px;
    background:rgba(255,255,255,.75);
}

@media(max-width:980px){

    .hyro-gradient-footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:50px;
    }

}

@media(max-width:620px){

    .hyro-gradient-footer{
        padding:70px 0 27px;
    }

    .hyro-gradient-footer-grid{
        grid-template-columns:1fr;
        gap:38px;
        padding-bottom:48px;
    }

    .hyro-gradient-footer-logo strong{
        font-size:30px;
    }

    .hyro-gradient-footer-brand p{
        font-size:15px;
    }

    .hyro-gradient-footer-column h3{
        margin-bottom:20px;
    }

    .hyro-gradient-footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .hyro-gradient-footer-legal{
        gap:12px;
    }

}