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

.footer {

    background: #102330;

    color: white;

    padding: 25px 7vw 15px;
}


.footer-inner {

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    align-items: center;

    gap: 50px;
}


.footer-brand img {

    width: 200px;

    filter: brightness(0) invert(1);

}


.footer-brand p {

    margin-top: 18px;

    color: #f7f7f7;

    font-size: 13px;

    line-height: 1.7;
}


.footer-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 25px;
}


.footer-links a {

    font-size: 14px;

    color: #b7c0c5;

    transition: .3s;
}


.footer-links a:hover {

    color: var(--gold);
}


.footer-social {

    display: flex;

    gap: 10px;
}


.footer-social a {

    width: 38px;

    height: 38px;

    border: 1px solid #465660;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    transition: .3s;
}


.footer-social a:hover {

  

    transform: translateY(-3px);
}


.footer-bottom {

    max-width: 1250px;

    margin: 20px auto 0;

    padding-top: 22px;

    border-top: 1px solid #334751;

    display: flex;

    justify-content: space-between;

    color: #7f9099;

    font-size: 12px;

    letter-spacing: .04em;
}

 .footer-bottom span:nth-child(1), .footer-bottom span:nth-child(2) {display:none;}

@media (max-width: 850px) {
    
    .footer-bottom span:nth-child(1) img {
    width: auto;
    margin: 0 auto;
}

 .footer-bottom span:nth-child(1), .footer-bottom span:nth-child(2) {display:block;}
    
    .footer-bottom span:nth-child(4), .footer-bottom span:nth-child(5) {display:none;}

     .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;         gap: 30px;
    }

    .footer-brand img {
        margin: auto;
    }

    .footer-social {
        justify-content: center;
    }
}


@media (max-width: 550px) {
.footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
                margin: 20px auto 0;
    }
}
/* =========================================
   SMOOTH PAGE SCROLL
========================================= */

html {
    scroll-behavior: smooth;
}


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

.whatsapp-float {
    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;

    border: 1px solid rgba(18, 43, 60, 0.12);

    color: #fff;

    text-decoration: none;

    border-radius: 50%;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.06);

    z-index: 999;

    transition:
        transform 0.45s cubic-bezier(.16,1,.3,1),
        box-shadow 0.45s ease,
        color 0.3s ease;
}


/* WhatsApp Icon */

.whatsapp-float i {
    font-size: 25px;

    transition:
        transform 0.4s ease,
        color 0.3s ease;
}


/* Hover */

.whatsapp-float:hover {
    transform: translateY(-7px);

    color: #fff;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.15),
        0 0 0 6px rgba(37, 211, 102, 0.08);
}

.whatsapp-float:hover i {
    transform: scale(1.12);
}


/* =========================================
   WHATSAPP TOOLTIP
========================================= */

.whatsapp-tooltip {
    position: absolute;

    right: 72px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    white-space: nowrap;

    padding: 9px 14px;

    background: #122b3c;

    color: #ffffff;

    font-size: 12px;

    letter-spacing: 0.5px;

    border-radius: 4px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================
   WHATSAPP SOFT PULSE
========================================= */

.whatsapp-float::before {
    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(37, 211, 102, 0.25);

    border-radius: 50%;

    animation: whatsappPulse 2.5s ease-out infinite;

    pointer-events: none;
}

@keyframes whatsappPulse {

    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }

}


/* =========================================
   SCROLL TO TOP BUTTON
========================================= */

.scroll-top {
    position: fixed;

    right: 30px;
    bottom: 100px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #fab517;

    background: #fab517;

    color: #fff;

    border-radius: 50%;

    cursor: pointer;

    z-index: 998;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.85);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.45s cubic-bezier(.16,1,.3,1),
        background 0.3s ease,
        color 0.3s ease;
}


/* Active */

.scroll-top.show {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* Hover */

.scroll-top:hover {
    background: #122b3c;

    color: #ffffff;

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


/* Arrow */

.scroll-top i {
    font-size: 14px;

    transition: transform 0.3s ease;
}

.scroll-top:hover i {
    transform: translateY(-1px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .whatsapp-float {
        width: 54px;
        height: 54px;

        right: 18px;
        bottom: 20px;
    }

    .whatsapp-float i {
        font-size: 23px;
    }

    .scroll-top {
        width: 44px;
        height: 44px;

        right: 22px;
        bottom: 88px;
    }

    .whatsapp-tooltip {
        display: none;
    }

}


/* Facebook */ 
.footer-social a:nth-child(1)  { background: #1877F2;      border: 1px solid #1877F2;} 

/* Instagram */ 
.footer-social a:nth-child(2) { background: #E4405F; border: 1px solid #E4405F } 

/* LinkedIn */ 
.footer-social a:nth-child(3)  { background: #0A66C2; border: 1px solid #0A66C2 } 

/* YouTube */ 
.footer-social a:nth-child(4)  { background: #FF0000; border: 1px solid #FF0000 }


.footer-social a:nth-child(5){
    width: auto;
    height: auto;
    border: none;
    position: relative;
    bottom: -10px;
    right: 0;
}