/* ------------------------------------------
   MAIN FOOTER BASE STYLES
------------------------------------------- */
.canary-footer {
    background: #e67215;
    color: #fff;
    font-family: "Poppins", sans-serif;
    width: 100%;
    overflow: hidden;
}

.footer-logo {
    width: 160px;
    max-width: 100%;
}

/* ------------------------------------------
   LINKS
------------------------------------------- */
.footer-links li {
    margin-bottom: 6px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ffe5b3;
}

/* ------------------------------------------
   NEWSLETTER BOX
------------------------------------------- */
.newsletter-box {
    background: #ef9b11;
    border-radius: 10px;
    padding: 18px;
}

.newsletter-box input {
    border-radius: 6px;
    padding: 12px;
    border: none;
    outline: none;
    font-size: 15px;
}

.newsletter-box button {
    border-radius: 6px;
    padding: 10px;
    font-size: 15px;
    background: #000;
    color: #fff;
    transition: 0.3s;
}

.newsletter-box button:hover {
    background: #333;
}

/* ------------------------------------------
   SOCIAL ICONS
------------------------------------------- */
.social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #ffffff25;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    transition: 0.3s;
}

.social-icon:hover {
    background: #fff;
    color: #e67215 !important;
}

/* ------------------------------------------
   FOOTER BOTTOM BAR
------------------------------------------- */
.canary-footer-bottom {
    margin-top: 40px;
    text-align: center;
    padding: 18px;
    font-size: 14px;
    background: #ef9b11;
    border-top: 1px solid #ffffff;
}

/* ------------------------------------------
   RESPONSIVE DESIGN — ULTRA WIDE SCREENS
------------------------------------------- */
@media (min-width: 1600px) {
    .footer-links a,
    .footer-col p {
        font-size: 16px;
    }

    .newsletter-box input,
    .newsletter-box button {
        font-size: 16px;
    }
}

/* ------------------------------------------
   LARGE DESKTOPS (1440px – 1599px)
------------------------------------------- */
@media (max-width: 1599px) {
    .footer-logo {
        width: 150px;
    }
}

/* ------------------------------------------
   DESKTOP (1200px – 1439px)
------------------------------------------- */
@media (max-width: 1439px) {
    .footer-links a {
        font-size: 15px;
    }

    .newsletter-box input {
        font-size: 14px;
    }
}

/* ------------------------------------------
   LAPTOPS (992px – 1199px)
------------------------------------------- */
@media (max-width: 1199px) {
    .footer-logo {
        width: 140px;
    }

    h5 {
        font-size: 18px;
    }

    .newsletter-box {
        padding: 15px;
    }
}

/* ------------------------------------------
   TABLETS (768px – 991px)
------------------------------------------- */
@media (max-width: 991px) {
    .row {
        text-align: center;
    }

    .newsletter-box input {
        width: 100%;
    }

    .d-flex.gap-2 {
        justify-content: center;
    }
}

/* ------------------------------------------
   SMALL TABLETS & LARGE PHONES (600px – 767px)
------------------------------------------- */
@media (max-width: 767px) {
    footer .row > div {
        margin-bottom: 30px;
    }

    .newsletter-box {
        width: 100%;
        margin: auto;
    }

    h5 {
        font-size: 17px;
    }
}

/* ------------------------------------------
   MEDIUM PHONES (480px – 599px)
------------------------------------------- */
@media (max-width: 599px) {
    .footer-links a {
        font-size: 15px;
    }

    .newsletter-box input {
        padding: 10px;
        font-size: 14px;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/* ------------------------------------------
   SMALL PHONES (390px – 479px)
------------------------------------------- */
@media (max-width: 479px) {
    .footer-logo {
        width: 130px;
    }

    .newsletter-box h5 {
        font-size: 16px;
    }

    .canary-footer-bottom {
        font-size: 12px;
    }
}

/* ------------------------------------------
   VERY SMALL PHONES (360px – 389px)
------------------------------------------- */
@media (max-width: 389px) {
    .social-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .newsletter-box input {
        font-size: 13px;
    }
}

/* ------------------------------------------
   TINY PHONES (320px – 359px)
------------------------------------------- */
@media (max-width: 359px) {
    .footer-logo {
        width: 115px;
    }

    .newsletter-box button {
        font-size: 13px;
    }
}