/*=========================================================
        BLUE BIRD HOMESTAY - PREMIUM CONTACT BAR
==========================================================*/

:root{
    --primary:#294F4B;
    --secondary:#D8A21C;
    --white:#FFFFFF;
    --light:#F6F2DE;
}


/*=========================================================
                    DESKTOP
==========================================================*/

.sticky-contact-bar{
    position:fixed;
    top:50%;
    right:0;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:99999;
}

.dashicons-phone {
    transform: scaleX(1) !important;
}
.dashicons-phone::before{
	transform: rotateZ(88deg);
}

/* Buttons */

.sticky-contact-bar a{
    width:200px;
    height:60px;

    display:flex;
    align-items:center;

    overflow:hidden;

    text-decoration:none;

    color:var(--white);

    background:var(--primary);

    border-radius:14px 0 0 14px;

    transform:translateX(125px);

    transition:all .35s ease;

    box-shadow:0 8px 22px rgba(0,0,0,.18);
}


/* Hover */

.sticky-contact-bar a:hover{
    transform:translateX(0);
    background:var(--secondary);
    box-shadow:0 14px 30px rgba(0,0,0,.25);
}


/*=========================================================
                        ICON
==========================================================*/

.sticky-contact-bar .icon{

    width:60px;
    min-width:60px;
    height:60px;

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

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

    flex-shrink:0;

}


/* WordPress Dashicons */

.sticky-contact-bar .dashicons{

    width:24px !important;
    height:24px !important;

    font-size:24px !important;
    line-height:24px !important;

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

    color:#fff !important;

}


/*=========================================================
                        TEXT
==========================================================*/

.sticky-contact-bar .text{

    flex:1;

    text-align:center;

    font-size:15px;

    font-weight:600;

    letter-spacing:.3px;

    color:#fff;

    white-space:nowrap;

}


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

.sticky-contact-bar .phone,
.sticky-contact-bar .email,
.sticky-contact-bar .whatsapp{

    background:var(--primary);

}

.sticky-contact-bar .phone:hover,
.sticky-contact-bar .email:hover,
.sticky-contact-bar .whatsapp:hover{

    background:var(--secondary);

}


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

.floating-whatsapp{

    position:fixed;

    right:22px;
    bottom:22px;

    width:65px;
    height:65px;

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

    background:var(--secondary);

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    box-shadow:0 10px 28px rgba(0,0,0,.25);

    transition:all .35s ease;

    z-index:99999;

}


.floating-whatsapp .dashicons{

    width:30px !important;
    height:30px !important;

    font-size:30px !important;
    line-height:30px !important;

    color:#fff !important;

}


.floating-whatsapp:hover{

    background:var(--primary);

    transform:scale(1.08);

}


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

@media (max-width:768px){

.sticky-contact-bar{

    left:0;
    right:0;
    bottom:0;
    top:auto;

    width:100%;

    transform:none;

    flex-direction:row;

    gap:0;

    background:var(--primary);

    box-shadow:0 -5px 20px rgba(0,0,0,.15);

}


.sticky-contact-bar a{

    flex:1;

    width:auto;
    height:60px;

    transform:none;

    border-radius:0;

    justify-content:center;

    box-shadow:none;

}


.sticky-contact-bar a:hover{

    transform:none;

    background:var(--secondary);

}


/* Icon */

.sticky-contact-bar .icon{

    width:30px;
    min-width:30px;
    height:auto;

    margin-right:8px;

    background:none;

}


.sticky-contact-bar .dashicons{

    width:22px !important;
    height:22px !important;

    font-size:22px !important;
    line-height:22px !important;

}


/* Text */

.sticky-contact-bar .text{

    flex:none;

    font-size:14px;

}


/* Floating Button */

.floating-whatsapp{

    width:60px;
    height:60px;

    right:15px;
    bottom:80px;

}


.floating-whatsapp .dashicons{

    width:28px !important;
    height:28px !important;

    font-size:28px !important;
    line-height:28px !important;

}

}


/*=========================================================
            FORCE WHITE ICONS & TEXT
==========================================================*/

.sticky-contact-bar a,
.sticky-contact-bar .text,
.sticky-contact-bar .dashicons,
.floating-whatsapp,
.floating-whatsapp .dashicons{

    color:#fff !important;

}


/*=========================================================
                SMOOTH ANIMATION
==========================================================*/

.sticky-contact-bar a,
.floating-whatsapp{

    transition:all .35s cubic-bezier(.4,0,.2,1);

}