/*==================================================
  FOOTER
  Zen Spa Home
==================================================*/

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

.footer{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:100px 0 40px;

    background:var(--color-background);

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

}

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

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.2fr;

    gap:4rem;

    margin-bottom:4rem;

}

/*==============================================
  BRAND
==============================================*/

.footer-brand{

    max-width:380px;

}

.footer-logo{

    display:inline-block;

    margin-bottom:2rem;

}

.footer-logo img{

    width:180px;

    height:auto;

}

.footer-description{

    margin-bottom:2rem;

    line-height:1.9;

    color:var(--color-text-light);

}

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

.footer-social{

    display:flex;

    gap:1rem;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

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

    color:var(--color-text-light);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease;

}

.footer-social a:hover{

    transform:translateY(-4px);

    background:var(--color-primary);

    border-color:var(--color-primary);

    color:#fff;

}

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

.footer-title{

    margin-bottom:1.75rem;

    font-size:1rem;

    font-weight:600;

    color:#fff;

}

/*==============================================
  LINKS
==============================================*/

.footer-links{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.footer-links a{

    color:var(--color-text-light);

    transition:
        color .35s ease,
        padding-left .35s ease;

}

.footer-links a:hover{

    color:var(--color-primary);

    padding-left:8px;

}

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

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.footer-contact span,
.footer-contact a{

    display:flex;

    align-items:center;

    gap:.8rem;

    color:var(--color-text-light);

    transition:color .35s ease;

}

.footer-contact a:hover{

    color:var(--color-primary);

}

.footer-contact i{

    width:20px;

    flex-shrink:0;

    text-align:center;

    color:var(--color-primary);

    opacity:.9;

}

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

.footer-divider{

    width:100%;

    height:1px;

    margin:3rem 0 2rem;

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

}

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

.footer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

}

.footer-copy{

    font-size:.92rem;

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

}

/*==============================================
  BACK LINK
==============================================*/

.footer-back-top{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    font-weight:600;

    color:var(--color-primary);

    transition:
        gap .35s ease,
        color .35s ease;

}

.footer-back-top:hover{

    gap:1rem;

    color:#fff;

}

/*==============================================
  FLOATING BUTTON
==============================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #caa772
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

    z-index:1200;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:
        0 24px 55px rgba(0,0,0,.35);

}

.back-to-top i{

    transition:transform .35s ease;

}

.back-to-top:hover i{

    transform:translateY(-2px);

}

/*==============================================
  DECORATION
==============================================*/

.footer::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(185,145,93,.08),
            transparent 70%
        );

    pointer-events:none;

}

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

@media (max-width:1100px){

    .footer-grid{

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

        gap:3rem;

    }

}

@media (max-width:768px){

    .footer{

        padding:80px 0 30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:2.5rem;

    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:1.5rem;

    }

    .back-to-top{

        right:20px;

        bottom:20px;

        width:50px;

        height:50px;

    }

}