/* =========================================================
   LOCAL FEMALE GUIDES UGANDA
   PREMIUM FOOTER
========================================================= */


/* =========================================================
   GLOBAL HORIZONTAL OVERFLOW PROTECTION
========================================================= */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}


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

.site-footer{
    width:100%;
    max-width:100%;
    box-sizing:border-box;

    background-color:#1F4D3A;

    background-image:
        var(--footer-bg-image);

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:#ffffff;

    overflow:hidden;

    position:relative;

    isolation:isolate;
}


/* =========================================================
   FOOTER IMAGE OVERLAY
========================================================= */

.site-footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(15,48,35,.90),
            rgba(15,48,35,.76)
        );

    pointer-events:none;

    z-index:-1;
}


/* =========================================================
   MAIN FOOTER CONTAINER
========================================================= */

.site-footer .footer-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:58px 32px 48px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        repeat(12,minmax(0,1fr));

    column-gap:28px;
    row-gap:10px;

    align-items:start;

    position:relative;

    z-index:1;
}


/* =========================================================
   ALL FOOTER COLUMNS
========================================================= */

.site-footer .footer-column{

    min-width:0;
    max-width:100%;

    box-sizing:border-box;
}


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

.site-footer .footer-brand{

    grid-column:span 3;

    max-width:300px;
}


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

.site-footer .footer-brand-name{

    display:block;

    max-width:100%;

    margin:0 0 16px;
    padding:0;

    font-family:"Playfair Display",serif;

    font-size:22px;
    line-height:1.25;

    font-weight:600;

    letter-spacing:.3px;

    color:#ffffff;
}


.site-footer .footer-brand-name span{

    display:block;

    margin-top:2px;

    color:#C8A24C;

    font-size:12px;

    letter-spacing:3px;

    font-family:"Inter",sans-serif;

    font-weight:600;
}


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

.site-footer .footer-description{

    display:block;

    width:100%;
    max-width:280px;

    margin:0 0 16px !important;
    padding:0 !important;

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

    font-family:"Inter",sans-serif;

    font-size:12px;
    line-height:1.7;

    box-sizing:border-box;
}


/* =========================================================
   LOCATION
========================================================= */

.site-footer .footer-location{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    width:100%;

    margin:0 0 18px;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:11px;
    line-height:1.5;

    box-sizing:border-box;
}


.site-footer .footer-location-icon{

    display:flex;

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

    width:15px;
    height:15px;

    min-width:15px;

    border:1px solid #C8A24C;

    border-radius:50%;

    color:#C8A24C;

    font-size:4px;
}


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

.site-footer .footer-social{

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    margin:0;
    padding:0;
}


.site-footer .footer-social-link{

    display:flex;

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

    width:31px;
    height:31px;

    min-width:31px;

    margin:0;
    padding:0;

    box-sizing:border-box;

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

    border-radius:50%;

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

    color:#ffffff;

    text-decoration:none;

    font-family:Arial,sans-serif;

    font-size:13px;
    line-height:1;

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


.site-footer .footer-social-link:hover{

    background:#C8A24C;

    border-color:#C8A24C;

    transform:translateY(-2px);
}


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

.site-footer .footer-heading{

    position:relative;

    display:block;

    margin:0 0 18px !important;
    padding:0 0 9px !important;

    font-family:"Playfair Display",serif;

    font-size:17px;
    line-height:1.3;

    font-weight:600;

    color:#ffffff;
}


.site-footer .footer-heading::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:28px;
    height:2px;

    background:#C8A24C;
}


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

.site-footer .footer-links{

    display:block;

    width:100%;

    margin:0 !important;
    padding:0 !important;

    list-style:none;
}


.site-footer .footer-links li{

    display:block;

    width:100%;

    margin:0 0 8px !important;
    padding:0 !important;

    box-sizing:border-box;
}


.site-footer .footer-links a{

    display:inline-block;

    max-width:100%;

    margin:0;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:12px;
    line-height:1.5;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.site-footer .footer-links a:hover{

    color:#C8A24C;

    transform:translateX(3px);
}


/* =========================================================
   BOOK NOW
========================================================= */

.site-footer .footer-book-link{

    color:#C8A24C !important;

    font-weight:700;
}


/* =========================================================
   EXPLORE COLUMN
========================================================= */

.site-footer .footer-column:nth-child(2){

    grid-column:span 2;
}


/* =========================================================
   SAFARI TOURS COLUMN
========================================================= */

.site-footer .footer-column:nth-child(3){

    grid-column:span 2;
}


/* =========================================================
   DESTINATIONS COLUMN
========================================================= */

.site-footer .footer-column:nth-child(4){

    grid-column:span 2;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.site-footer .footer-newsletter{

    grid-column:span 3;

    width:100%;
    max-width:100%;

    min-width:0;
}


/* =========================================================
   NEWSLETTER LABEL
========================================================= */

.site-footer .footer-newsletter-label{

    display:block;

    margin:0 0 7px;
    padding:0;

    color:#C8A24C;

    font-family:"Inter",sans-serif;

    font-size:10px;

    font-weight:700;

    letter-spacing:2px;

    line-height:1.4;
}


/* =========================================================
   NEWSLETTER TITLE
========================================================= */

.site-footer .footer-newsletter-title{

    display:block;

    margin:0 0 10px;
    padding:0;

    font-family:"Playfair Display",serif;

    font-size:20px;
    line-height:1.25;

    font-weight:600;

    color:#ffffff;
}


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

.site-footer .footer-newsletter-text{

    display:block;

    width:100%;
    max-width:270px;

    margin:0 0 14px !important;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:11px;
    line-height:1.65;
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.site-footer .footer-newsletter-form{

    width:100%;

    margin:0;
    padding:0;
}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.site-footer .newsletter-input-wrapper{

    display:flex;

    align-items:stretch;

    width:100%;
    max-width:270px;

    height:44px;

    margin:0;
    padding:0;

    box-sizing:border-box;

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

    border-radius:4px;

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

    overflow:hidden;
}


/* =========================================================
   EMAIL INPUT
========================================================= */

.site-footer .newsletter-input-wrapper input{

    display:block;

    flex:1;

    min-width:0;

    width:1px;
    height:44px;

    margin:0;
    padding:0 12px;

    box-sizing:border-box;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    color:#ffffff !important;

    font-family:"Inter",sans-serif;

    font-size:11px;
}


.site-footer .newsletter-input-wrapper input::placeholder{

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


/* =========================================================
   NEWSLETTER BUTTON
========================================================= */

.site-footer .newsletter-input-wrapper button{

    display:flex;

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

    flex:0 0 44px;

    width:44px;
    height:44px;

    margin:0;
    padding:0;

    box-sizing:border-box;

    border:0;

    background:#C8A24C;

    color:#ffffff;

    cursor:pointer;

    font-size:18px;
    line-height:1;

    transition:
        background .25s ease,
        transform .25s ease;
}


.site-footer .newsletter-input-wrapper button:hover{

    background:#b18d3f;
}


/* =========================================================
   NEWSLETTER PRIVACY
========================================================= */

.site-footer .newsletter-privacy{

    display:block;

    width:100%;
    max-width:270px;

    margin:8px 0 0 !important;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:9px;
    line-height:1.5;
}


/* =========================================================
   PAYMENT BANNER
========================================================= */

.site-footer .footer-payment-banner{

    grid-column:4 / -1;

    width:100%;
    max-width:100%;

    margin:-6px 0 0;

    padding:0;

    box-sizing:border-box;

    align-self:end;

    min-width:0;

    position:relative;
}


.site-footer .footer-payment-banner-image{

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    margin:0;
    padding:0;

    border:0;

    box-sizing:border-box;
}


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

.site-footer .footer-bottom{

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;

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

    background:rgba(5,25,18,.58);

    overflow:hidden;

    position:relative;

    z-index:1;

    clear:both;
}


.site-footer .footer-bottom-container{

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:15px 32px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}


.site-footer .footer-bottom p{

    min-width:0;

    margin:0 !important;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:10px;
    line-height:1.5;
}


.site-footer .footer-bottom-links{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

    min-width:0;
}


.site-footer .footer-bottom-links a{

    margin:0;
    padding:0;

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

    font-family:"Inter",sans-serif;

    font-size:10px;
    line-height:1.5;

    text-decoration:none;

    transition:color .25s ease;
}


.site-footer .footer-bottom-links a:hover{

    color:#C8A24C;
}


/* =========================================================
   TABLET
   651px — 1100px
========================================================= */

@media (min-width:651px) and (max-width:1100px){

    .site-footer .footer-container{

        width:100%;
        max-width:100%;

        padding:52px 32px 44px;

        box-sizing:border-box;

        display:grid;

        /*
         * Four comfortable tablet columns.
         *
         * This prevents the navigation sections
         * from becoming excessively narrow.
         */
        grid-template-columns:
            repeat(4,minmax(0,1fr));

        column-gap:28px;
        row-gap:38px;

        align-items:start;
    }


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

    .site-footer .footer-brand{

        grid-column:span 2;

        width:100%;
        max-width:360px;

        min-width:0;
    }


    .site-footer .footer-description{

        width:100%;
        max-width:310px;
    }


    /* =====================================================
       EXPLORE
    ===================================================== */

    .site-footer .footer-column:nth-child(2){

        grid-column:span 1;

        width:100%;
        min-width:0;
    }


    /* =====================================================
       SAFARI TOURS
    ===================================================== */

    .site-footer .footer-column:nth-child(3){

        grid-column:span 1;

        width:100%;
        min-width:0;
    }


    /* =====================================================
       DESTINATIONS
    ===================================================== */

    .site-footer .footer-column:nth-child(4){

        grid-column:span 1;

        width:100%;
        min-width:0;
    }


    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .site-footer .footer-newsletter{

        grid-column:2 / -1;

        width:100%;
        max-width:100%;

        min-width:0;
    }


    .site-footer .footer-newsletter-text{

        width:100%;
        max-width:500px;
    }


    .site-footer .newsletter-input-wrapper{

        width:100%;
        max-width:420px;
    }


    .site-footer .newsletter-privacy{

        width:100%;
        max-width:420px;
    }


    /* =====================================================
       PAYMENT BANNER
    ===================================================== */

    .site-footer .footer-payment-banner{

        grid-column:1 / -1;

        width:100%;
        max-width:100%;

        margin:0;

        padding:0;

        align-self:auto;

        min-width:0;
    }


    .site-footer .footer-payment-banner-image{

        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        margin:0;
        padding:0;
    }


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

    .site-footer .footer-bottom-container{

        width:100%;

        padding-left:32px;
        padding-right:32px;

        box-sizing:border-box;
    }

}


/* =========================================================
   SMALL TABLET
   651px — 850px
========================================================= */

@media (min-width:651px) and (max-width:850px){

    .site-footer .footer-container{

        padding:46px 25px 40px;

        column-gap:22px;
        row-gap:34px;
    }


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

    .site-footer .footer-brand{

        grid-column:span 2;

        max-width:320px;
    }


    .site-footer .footer-description{

        max-width:270px;
    }


    /* =====================================================
       NAVIGATION COLUMNS
    ===================================================== */

    .site-footer .footer-column:nth-child(2),
    .site-footer .footer-column:nth-child(3){

        grid-column:span 1;
    }


    .site-footer .footer-column:nth-child(4){

        grid-column:1 / 2;

        width:100%;
    }


    /* =====================================================
       NEWSLETTER
    ===================================================== */

    .site-footer .footer-newsletter{

        grid-column:2 / -1;

        width:100%;
    }


    .site-footer .footer-newsletter-text{

        max-width:420px;
    }


    .site-footer .newsletter-input-wrapper{

        max-width:360px;
    }


    .site-footer .newsletter-privacy{

        max-width:360px;
    }


    /* =====================================================
       PAYMENT
    ===================================================== */

    .site-footer .footer-payment-banner{

        grid-column:1 / -1;

        width:100%;

        margin:0;
    }


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

    .site-footer .footer-bottom-container{

        padding-left:25px;
        padding-right:25px;
    }

}

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

@media(max-width:650px){

    .site-footer .footer-container{

        display:grid;

        grid-template-columns:1fr;

        gap:32px;

        width:100%;

        padding:45px 20px 38px;

        box-sizing:border-box;
    }


    /*
     * Every footer section becomes its own
     * full-width row.
     */

    .site-footer .footer-brand,

    .site-footer .footer-column:nth-child(2),

    .site-footer .footer-column:nth-child(3),

    .site-footer .footer-column:nth-child(4),

    .site-footer .footer-newsletter{

        grid-column:1 / -1;

        width:100%;

        max-width:100%;

        min-width:0;

        box-sizing:border-box;
    }


    /*
     * Payment banner is explicitly forced
     * onto a separate full-width row.
     */

    .site-footer .footer-payment-banner{

        grid-column:1 / -1 !important;

        grid-row:auto;

        width:100%;

        max-width:100%;

        margin:0;

        padding:0;

        align-self:auto;

        min-width:0;

        box-sizing:border-box;
    }


    .site-footer .footer-payment-banner-image{

        display:block;

        width:100%;

        max-width:100%;

        height:auto;

        margin:0;

        padding:0;
    }


    .site-footer .footer-description{

        max-width:330px;
    }


    .site-footer .footer-newsletter-text{

        max-width:330px;
    }


    .site-footer .newsletter-input-wrapper{

        max-width:330px;
    }


    .site-footer .newsletter-privacy{

        max-width:330px;
    }


    /*
     * Bottom footer is completely separated
     * from the main footer grid.
     */

    .site-footer .footer-bottom{

        display:block;

        width:100%;

        clear:both;
    }


    .site-footer .footer-bottom-container{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        width:100%;

        padding:15px 20px;

        gap:8px;

        box-sizing:border-box;
    }


    .site-footer .footer-bottom p{

        width:100%;

        max-width:100%;

        overflow-wrap:anywhere;
    }


    .site-footer .footer-bottom-links{

        width:100%;

        max-width:100%;

        justify-content:flex-start;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:380px){

    .site-footer .footer-container{

        padding-left:16px;
        padding-right:16px;
    }


    .site-footer .footer-bottom-container{

        padding-left:16px;
        padding-right:16px;
    }


    .site-footer .footer-brand-name{

        font-size:20px;
    }


    .site-footer .footer-newsletter-title{

        font-size:19px;
    }


    .site-footer .footer-payment-banner{

        width:100%;
    }

}


/* =========================================================
   BACK TO TOP BUTTON
   PREMIUM FLOATING STYLE
========================================================= */

.back-to-top{

    position:fixed;

    right:28px;
    bottom:108px;

    width:50px;
    height:50px;

    display:flex;

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

    padding:0;
    margin:0;

    border:1px solid rgba(200,162,76,.45);

    border-radius:50%;

    background:#1F4D3A;

    color:#ffffff;

    font-family:Arial,sans-serif;

    font-size:22px;
    font-weight:400;
    line-height:1;

    cursor:pointer;

    z-index:9997;

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}


.back-to-top span{

    display:block;

    line-height:1;

    transform:translateY(-1px);
}


.back-to-top:hover{

    background:#C8A24C;

    border-color:#C8A24C;

    transform:translateY(-4px);
}


.back-to-top:focus{

    outline:none;
}


.back-to-top:focus-visible{

    outline:2px solid #C8A24C;

    outline-offset:4px;
}


/* =========================================================
   BACK TO TOP - TABLET
========================================================= */

@media(max-width:900px){

    .back-to-top{

        right:22px;

        bottom:100px;

        width:48px;
        height:48px;

        font-size:21px;
    }

}


/* =========================================================
   BACK TO TOP - MOBILE
========================================================= */

@media(max-width:600px){

    .back-to-top{

        right:18px;

        bottom:92px;

        width:46px;
        height:46px;

        font-size:20px;
    }

}


/* =========================================================
   BACK TO TOP - SMALL PHONES
========================================================= */

@media(max-width:380px){

    .back-to-top{

        right:15px;

        bottom:88px;

        width:44px;
        height:44px;

        font-size:19px;
    }

}