/*==================================================
  FOOTER.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  FOOTER
==============================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:#070707;

    color:var(--color-white);

    padding:120px 0 40px;

}

/*==============================================
  BACKGROUND GLOW
==============================================*/

.footer::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-220px;

    width:600px;

    height:600px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(185,145,93,.12),

        transparent 70%

    );

    pointer-events:none;

}

.footer::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,255,255,.04),

        transparent 70%

    );

    pointer-events:none;

}

/*==============================================
  CONTAINER
==============================================*/

.footer .container{

    position:relative;

    z-index:2;

}

/*==============================================
  GRID
==============================================*/

.footer-grid{

    display:grid;

    grid-template-columns:

        2fr

        1fr

        1fr

        1fr;

    gap:60px;

}

/*==============================================
  LOGO
==============================================*/

.footer-logo{

    font-size:2rem;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:22px;

}

/*==============================================
  DESCRIPTION
==============================================*/

.footer-description{

    max-width:420px;

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

/*==============================================
  TITLES
==============================================*/

.footer-title{

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    margin-bottom:24px;

    color:var(--color-primary);

}

/*==============================================
  LIST
==============================================*/

.footer-links{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    position:relative;

    width:max-content;

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:

        color .35s ease,

        transform .35s ease;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:1px;

    background:var(--color-primary);

    transition:.35s;

}

.footer-links a:hover{

    color:var(--color-white);

    transform:translateX(6px);

}

.footer-links a:hover::after{

    width:100%;

}

/*==============================================
  CONTACT
==============================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-contact span{

    color:rgba(255,255,255,.70);

}

/*==============================================
  SOCIAL
==============================================*/

.footer-social{

    display:flex;

    gap:18px;

    margin-top:28px;

}

.footer-social a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:48px;

    height:48px;

    border-radius:50%;

    text-decoration:none;

    color:var(--color-white);

    border:1px solid rgba(255,255,255,.08);

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

    backdrop-filter:blur(12px);

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.footer-social a:hover{

    transform:translateY(-6px);

    border-color:rgba(185,145,93,.45);

    background:rgba(185,145,93,.08);

    box-shadow:

        0 10px 30px rgba(185,145,93,.18);

}

/*==============================================
  DIVIDER
==============================================*/

.footer-divider{

    margin:70px 0 35px;

    height:1px;

    background:linear-gradient(

        to right,

        transparent,

        rgba(255,255,255,.15),

        transparent

    );

}

/*==============================================
  BOTTOM
==============================================*/

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-copy{

    color:rgba(255,255,255,.55);

    font-size:.9rem;

}

.footer-bottom a{

    color:rgba(255,255,255,.55);

    text-decoration:none;

    transition:.35s;

}

.footer-bottom a:hover{

    color:var(--color-primary);

}

/*==============================================
  BACK TO TOP
==============================================*/

.back-to-top{

    position:fixed;

    right:40px;

    bottom:40px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    color:#fff;

    background:rgba(10,10,10,.82);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.08);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

    z-index:999;

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:rgba(185,145,93,.18);

    border-color:rgba(185,145,93,.45);

}

/*==============================================
  RESPONSIVE
==============================================*/

@media (max-width:992px){

    .footer-grid{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

}

@media (max-width:768px){

    .footer{

        padding:90px 0 35px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-social{

        justify-content:center;

    }

    .back-to-top{

        right:20px;

        bottom:20px;

        width:52px;

        height:52px;

    }

}
/*==============================================
  SOCIAL ICON
==============================================*/

.footer-social a{

    will-change:transform;

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

}

.footer-social i{

    font-size:1.1rem;

    pointer-events:none;

    will-change:transform;

}