/* =======================================================
   AFRO ADVENTURES PREMIUM FOOTER
   Version: 1.0
   Author: ChatGPT
   ======================================================= */

/* =======================================================
   GOOGLE FONT
   ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =======================================================
   RESET
   ======================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#ffffff;

    color:#ffffff;

    line-height:1.7;

}

/* =======================================================
   COLOR VARIABLES
   ======================================================= */

:root{\n\n    --primary:#071E49;\n\n    --secondary:#0E2B5C;\n\n    --gold:#F6BE2C;\n\n    --gold-hover:#FFD34D;\n\n    --white:#FFFFFF;\n\n    --text:#D9E3F2;\n\n    --divider:rgba(255,255,255,.12);\n\n    --shadow:0 18px 45px rgba(0,0,0,.25);\n\n    --radius:18px;\n\n    --transition:.35s ease;\n\n}

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

.aa-footer{

    position:relative;

    background:linear-gradient(
    180deg,
    #0B2345 0%,
    #071E49 100%);

    overflow:hidden;

}

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

.footer-wrapper{\n\n    width:min(1280px,92%);\n\n    margin:auto;\n\n    padding:80px 0 30px;\n\n    position:relative;\n\n    z-index:2;\n\n}

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

.footer-top{\n\n    display:flex;\n\n    justify-content:space-between;\n\n    align-items:flex-start;\n\n    gap:40px;\n\n    padding-bottom:60px;\n\n    border-bottom:1px solid var(--divider);\n\n}

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

.footer-column{\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:18px;\n\n}

/* Individual widths */

.about-column{\n\n    flex:1.6;\n\n}

.footer-column:nth-child(2){\n\n    flex:1.1;\n\n}

.footer-column:nth-child(3){\n\n    flex:1.1;\n\n}

.footer-column:nth-child(4){\n\n    flex:1.2;\n\n}

.footer-column:nth-child(5){\n\n    flex:1.1;\n\n}

.newsletter-column{\n\n    flex:1.5;\n\n}

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

.footer-logo{\n\n    width:180px;\n\n    height:auto;\n\n    margin-bottom:15px;\n\n}

/* =======================================================
   ABOUT
   ======================================================= */

.about-text{\n\n    color:var(--text);\n\n    font-size:15px;\n\n    line-height:1.9;\n\n    margin-bottom:25px;\n\n}

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

.footer-column h3{\n\n    font-size:24px;\n\n    font-weight:700;\n\n    color:var(--gold);\n\n    letter-spacing:.4px;\n\n}

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

.gold-divider{\n\n    width:65px;\n\n    height:4px;\n\n    background:var(--gold);\n\n    border-radius:30px;\n\n    margin-bottom:6px;\n\n}

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

.footer-links{\n\n    list-style:none;\n\n}

.footer-links li{\n\n    margin-bottom:12px;\n\n}

.footer-links a{\n\n    color:var(--text);\n\n    text-decoration:none;\n\n    transition:var(--transition);\n\n    font-size:15px;\n\n}

.footer-links a:hover{\n\n    color:var(--gold);\n\n    padding-left:8px;\n\n}

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

.contact-item{\n\n    display:flex;\n\n    align-items:flex-start;\n\n    gap:12px;\n\n    margin-bottom:18px;\n\n    color:var(--text);\n\n    font-size:15px;\n\n    transition:var(--transition);\n\n}

.contact-item i{\n\n    color:var(--gold);\n\n    font-size:16px;\n\n    min-width:18px;\n\n    margin-top:4px;\n\n}

.contact-item a{\n\n    color:var(--text);\n\n    text-decoration:none;\n\n    transition:var(--transition);\n\n}

.contact-item a:hover{\n\n    color:var(--gold);\n\n}

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

.newsletter-text{\n\n    color:var(--text);\n\n    font-size:15px;\n\n    line-height:1.8;\n\n    margin-bottom:18px;\n\n}

.newsletter-form{\n\n    display:flex;\n\n    flex-direction:column;\n\n    gap:15px;\n\n}

.newsletter-form input{\n\n    width:100%;\n\n    height:54px;\n\n    border:none;\n\n    outline:none;\n\n    border-radius:50px;\n\n    padding:0 24px;\n\n    background:#ffffff;\n\n    color:#333;\n\n    font-size:15px;\n\n    transition:var(--transition);\n\n}

.newsletter-form input:focus{\n\n    box-shadow:0 0 0 3px rgba(246,190,44,.35);\n\n}

.newsletter-form button{\n\n    height:54px;\n\n    border:none;\n\n    cursor:pointer;\n\n    border-radius:50px;\n\n    background:var(--gold);\n\n    color:#071E49;\n\n    font-size:16px;\n\n    font-weight:700;\n\n    transition:var(--transition);\n\n    box-shadow:var(--shadow);\n\n}

.newsletter-form button:hover{\n\n    background:var(--gold-hover);\n\n    transform:translateY(-3px);\n\n}

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

.social-icons{\n\n    display:flex;\n\n    gap:12px;\n\n    flex-wrap:wrap;\n\n}

.social-icons a{\n\n    width:44px;\n\n    height:44px;\n\n    border-radius:50%;\n\n    display:flex;\n\n    align-items:center;\n\n    justify-content:center;\n\n    background:rgba(255,255,255,.08);\n\n    color:#ffffff;\n\n    text-decoration:none;\n\n    transition:var(--transition);\n\n    border:1px solid rgba(255,255,255,.10);\n\n}

.social-icons a:hover{\n\n    background:var(--gold);\n\n    color:#071E49;\n\n    transform:translateY(-4px);\n\n}

/* =======================================================
   TRUST BAR
   ======================================================= */

.trust-bar{\n\n    display:flex;\n\n    justify-content:space-between;\n\n    align-items:center;\n\n    flex-wrap:wrap;\n\n    gap:20px;\n\n    padding:40px 0;\n\n    border-bottom:1px solid var(--divider);\n\n}

.trust-item{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:14px;\n\n    color:var(--text);\n\n    font-size:15px;\n\n    font-weight:500;\n\n}

.trust-item i{\n\n    width:54px;\n\n    height:54px;\n\n    border-radius:50%;\n\n    display:flex;\n\n    justify-content:center;\n\n    align-items:center;\n\n    background:rgba(246,190,44,.12);\n\n    color:var(--gold);\n\n    font-size:22px;\n\n}

/* =======================================================
   AFFILIATE DISCLOSURE
   ======================================================= */

.affiliate-disclosure{\n\n    margin:55px 0;\n\n    padding:35px;\n\n    background:rgba(255,255,255,.04);\n\n    border:1px solid rgba(255,255,255,.08);\n\n    border-radius:18px;\n\n}

.affiliate-disclosure h4{\n\n    color:var(--gold);\n\n    font-size:22px;\n\n    font-weight:700;\n\n    margin-bottom:18px;\n\n}

.affiliate-disclosure p{\n\n    color:var(--text);\n\n    line-height:1.9;\n\n    font-size:15px;\n\n}

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

.footer-bottom{\n\n    display:flex;\n\n    justify-content:space-between;\n\n    align-items:center;\n\n    flex-wrap:wrap;\n\n    gap:30px;\n\n    padding:35px 0;\n\n    border-top:1px solid rgba(255,255,255,.08);\n\n}

/* =======================================================
   COPYRIGHT
   ======================================================= */

.footer-bottom-left p{\n\n    color:var(--text);\n\n    font-size:14px;\n\n}

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

.footer-bottom-menu{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:24px;\n\n    flex-wrap:wrap;\n\n    list-style:none;\n\n}

.footer-bottom-menu a{\n\n    text-decoration:none;\n\n    color:var(--text);\n\n    font-size:14px;\n\n    transition:var(--transition);\n\n}

.footer-bottom-menu a:hover{\n\n    color:var(--gold);\n\n}

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

.footer-bottom-right{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:12px;\n\n}

.footer-bottom-right a{\n\n    width:42px;\n\n    height:42px;\n\n    display:flex;\n\n    justify-content:center;\n\n    align-items:center;\n\n    border-radius:50%;\n\n    background:rgba(255,255,255,.08);\n\n    color:#ffffff;\n\n    text-decoration:none;\n\n    transition:var(--transition);\n\n}

.footer-bottom-right a:hover{\n\n    background:var(--gold);\n\n    color:#071E49;\n\n    transform:translateY(-3px);\n\n}

/* =======================================================
   SMALL PRINT
   ======================================================= */

.footer-small-print{\n\n    padding-top:25px;\n\n    border-top:1px solid rgba(255,255,255,.08);\n\n}

.footer-small-print p{\n\n    text-align:center;\n\n    color:rgba(255,255,255,.65);\n\n    font-size:13px;\n\n    line-height:1.8;\n\n    max-width:980px;\n\n    margin:auto;\n\n}

/* =======================================================
   HOVER ANIMATIONS
   ======================================================= */

.footer-column{\n\n    transition:transform .35s ease;\n\n}

.footer-column:hover{\n\n    transform:translateY(-4px);\n\n}

/* =======================================================
   RESPONSIVE - LARGE DESKTOP
   ======================================================= */

@media (max-width:1400px){\n\n    .footer-wrapper{\n\n        width:94%;\n\n    }\n\n}

/* =======================================================
   RESPONSIVE - TABLET
   ======================================================= */

@media (max-width:1024px){\n\n    .footer-top{\n\n        flex-wrap:wrap;\n\n        gap:40px;\n\n    }\n\n    .footer-column{\n\n        flex:0 0 calc(50% - 20px);\n\n        max-width:calc(50% - 20px);\n\n    }\n\n    .about-column{\n\n        flex:0 0 100%;\n\n        max-width:100%;\n\n    }\n\n    .newsletter-column{\n\n        flex:0 0 100%;\n\n        max-width:100%;\n\n    }\n\n    .trust-bar{\n\n        justify-content:center;\n\n        gap:25px;\n\n    }\n\n    .footer-bottom{\n\n        flex-direction:column;\n\n        text-align:center;\n\n        gap:25px;\n\n    }\n\n    .footer-bottom-menu{\n\n        justify-content:center;\n\n    }\n\n    .footer-bottom-right{\n\n        justify-content:center;\n\n    }\n\n}

/* =======================================================
   RESPONSIVE - MOBILE
   ======================================================= */

@media (max-width:767px){\n\n    .footer-wrapper{\n\n        padding:60px 0 25px;\n\n    }\n\n    .footer-top{\n\n        flex-direction:column;\n\n        gap:40px;\n\n    }\n\n    .footer-column{\n\n        flex:100%;\n\n        max-width:100%;\n\n    }\n\n    .footer-logo{\n\n        width:160px;\n\n    }\n\n    .footer-column h3{\n\n        font-size:22px;\n\n    }\n\n    .about-text,\n\n    .newsletter-text,\n\n    .footer-links a,\n\n    .contact-item{\n\n        font-size:15px;\n\n    }\n\n    .gold-divider{\n\n        width:55px;\n\n    }\n\n    .newsletter-form{\n\n        gap:14px;\n\n    }\n\n    .newsletter-form input,\n\n    .newsletter-form button{\n\n        height:52px;\n\n    }\n\n    .trust-bar{\n\n        flex-direction:column;\n\n        align-items:flex-start;\n\n        gap:18px;\n\n    }\n\n    .trust-item{\n\n        width:100%;\n\n    }\n\n    .footer-bottom-menu{\n\n        flex-direction:column;\n\n        gap:14px;\n\n    }\n\n    .footer-bottom-right{\n\n        gap:10px;\n\n    }\n\n    .footer-bottom-right a{\n\n        width:40px;\n\n        height:40px;\n\n    }\n\n    .affiliate-disclosure{\n\n        padding:25px;\n\n    }\n\n}

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

@media (max-width:480px){\n\n    .footer-wrapper{\n\n        width:92%;\n\n    }\n\n    .footer-column h3{\n\n        font-size:20px;\n\n    }\n\n    .footer-logo{\n\n        width:140px;\n\n    }\n\n    .newsletter-form input{\n\n        padding:0 18px;\n\n        font-size:14px;\n\n    }\n\n    .newsletter-form button{\n\n        font-size:15px;\n\n    }\n\n    .affiliate-disclosure h4{\n\n        font-size:20px;\n\n    }\n\n    .affiliate-disclosure p{\n\n        font-size:14px;\n\n    }\n\n    .footer-small-print p{\n\n        font-size:12px;\n\n    }\n\n}

/* =======================================================
   ACCESSIBILITY
======================================================= */

a:focus,
button:focus,
input:focus{

    outline:3px solid rgba(246,190,44,.45);

    outline-offset:3px;

}

button{

    font-family:'Poppins',sans-serif;

}

input{

    font-family:'Poppins',sans-serif;

}

/* =======================================================
   SELECTION COLOR
======================================================= */

::selection{

    background:var(--gold);

    color:#071E49;

}

::-moz-selection{

    background:var(--gold);

    color:#071E49;

}

/* =======================================================
   SMOOTH TRANSITIONS
======================================================= */

.footer-column,
.footer-links a,
.contact-item a,
.social-icons a,
.footer-bottom-right a,
.newsletter-form button,
.newsletter-form input{

    transition:all .35s ease;

}

/* =======================================================
   IMAGE SETTINGS
======================================================= */

img{

    max-width:100%;

    display:block;

}

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

.newsletter-form input::placeholder{

    color:#8B96A9;

    opacity:1;

}

/* =======================================================
   BUTTON ACTIVE
======================================================= */

.newsletter-form button:active{

    transform:scale(.98);

}

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

.social-icons a i,
.footer-bottom-right a i{

    transition:transform .35s ease;

}

.social-icons a:hover i,
.footer-bottom-right a:hover i{

    transform:rotate(8deg) scale(1.15);

}

/* =======================================================
   LINK UNDERLINE EFFECT
======================================================= */

.footer-links a{

    position:relative;

    display:inline-block;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s ease;

}

.footer-links a:hover::after{

    width:100%;

}

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

.contact-item:hover{

    transform:translateX(6px);

}

/* =======================================================
   TRUST ITEM HOVER
======================================================= */

.trust-item{

    transition:.35s ease;

}

.trust-item:hover{

    transform:translateY(-4px);

}

.trust-item:hover i{

    background:var(--gold);

    color:#071E49;

}

/* =======================================================
   DISCLOSURE CARD
======================================================= */

.affiliate-disclosure{

    transition:.35s ease;

}

.affiliate-disclosure:hover{

    border-color:rgba(246,190,44,.35);

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

}

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

.footer-logo{

    transition:.35s ease;

}

.footer-logo:hover{

    transform:scale(1.03);

}

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

.newsletter-form button{

    position:relative;

    overflow:hidden;

}

.newsletter-form button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.6s ease;

}

.newsletter-form button:hover::before{

    left:120%;

}

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

.footer-bottom-menu li{

    position:relative;

}

.footer-bottom-menu li:not(:last-child)::after{

    content:"•";

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

    margin-left:22px;

}

/* =======================================================
   SCROLLBAR (CHROME)
======================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0B2345;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold-hover);

}

/* =======================================================
   AFRO ADVENTURES PREMIUM FOOTER
   ELEMENTOR BLUEPRINT
   =======================================================

   GLOBAL SETTINGS
   - Elementor Version: Latest Flexbox Containers
   - Use: Containers Only (No Sections/Inner Sections/Columns)
   - Theme Font: Poppins
   - Colors: Primary #071E49, Secondary #0E2B5C, Accent #F6BE2C, Text #D9E3F2
   - Maximum Content Width: 1280px (Boxed, Center Aligned)
   - Responsive: Desktop, Tablet, Mobile

   MAIN FOOTER CONTAINER
   - Widget Type: Container (Name: Main Footer)
   - Direction: Column, Width: Full Width, Content Width: Boxed (Max: 1280px)
   - Height: Auto, Gap: 0, Justify: Start, Align: Stretch
   - Padding: Top 80px, Bottom 30px
   - Background: Gradient (180deg, #0B2345 to #071E49)
   - Overflow: Hidden

   CHILD CONTAINER (Footer Wrapper)
   - Direction: Column, Gap: 0, Width: 100%, Align: Stretch

   CHILD CONTAINER (Footer Top)
   - Direction: Row, Wrap: No Wrap (Desktop), Gap: 40px, Justify: Space Between, Align: Flex Start
   - Padding Bottom: 60px, Border Bottom: 1px solid rgba(255,255,255,.12)
*/