/* =========================================================
   JAMEENGUIDE
   SOCIAL + FOOTER CSS
   File: /header-footer/social.css
========================================================= */

.jg-social-footer {
    width: 100%;
    background: #f5f8fc;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 50px;
    box-sizing: border-box;
}

.jg-social-footer *,
.jg-social-footer *::before,
.jg-social-footer *::after {
    box-sizing: border-box;
}


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

.jg-social-footer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    padding: 55px 30px 35px;

    text-align: center;
}


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

.jg-social-icons {
    display: flex;

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

    gap: 55px;

    margin-bottom: 85px;

    flex-wrap: wrap;
}


/* =========================================================
   SOCIAL CIRCLE
========================================================= */

.jg-social-icon {
    width: 150px;
    height: 150px;

    background: #ffffff;

    border-radius: 50%;

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

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Hover */

.jg-social-icon:hover {
    transform: translateY(-6px);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.11);
}


/* SVG */

.jg-social-icon svg {
    width: 78px;
    height: 78px;

    display: block;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.jg-instagram svg {
    fill: none;

    stroke: #d62976;

    stroke-width: 7;
}


/* =========================================================
   FACEBOOK
========================================================= */

.jg-facebook svg {
    fill: #1877f2;

    stroke: none;
}


/* =========================================================
   X
========================================================= */

.jg-x svg {
    fill: #000000;

    stroke: none;
}


/* =========================================================
   LINKEDIN
========================================================= */

.jg-linkedin svg {
    fill: #0a66c2;

    stroke: none;
}


/* =========================================================
   THREADS
========================================================= */

.jg-threads svg {
    fill: none;

    stroke: #000000;

    stroke-width: 5;
}


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

.jg-footer-links {
    display: flex;

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

    flex-wrap: wrap;

    gap: 0;

    margin-bottom: 65px;
}


/* Links */

.jg-footer-links a {
    color: #777;

    font-size: 30px;

    line-height: 1.6;

    text-decoration: none;

    padding: 0 14px;

    transition: color 0.2s ease;
}


/* Hover */

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


/* Separator */

.jg-footer-separator {
    color: #999;

    font-size: 30px;
}


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

.jg-footer-copyright {
    color: #777;

    font-size: 30px;

    line-height: 1.5;

    margin: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .jg-social-footer-container {
        padding: 45px 20px 30px;
    }


    .jg-social-icons {
        gap: 35px;

        margin-bottom: 60px;
    }


    .jg-social-icon {
        width: 115px;
        height: 115px;
    }


    .jg-social-icon svg {
        width: 62px;
        height: 62px;
    }


    .jg-footer-links {
        margin-bottom: 45px;
    }


    .jg-footer-links a {
        font-size: 23px;

        padding: 0 10px;
    }


    .jg-footer-separator {
        font-size: 23px;
    }


    .jg-footer-copyright {
        font-size: 23px;
    }
}


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

@media (max-width: 600px) {

    .jg-social-footer {
        margin-top: 35px;
    }


    .jg-social-footer-container {
        padding: 35px 15px 25px;
    }


    /* Social icons */

    .jg-social-icons {
        gap: 18px;

        margin-bottom: 45px;
    }


    .jg-social-icon {
        width: 62px;
        height: 62px;
    }


    .jg-social-icon svg {
        width: 38px;
        height: 38px;
    }


    /* Footer links */

    .jg-footer-links {
        max-width: 360px;

        margin: 0 auto 35px;

        line-height: 1.9;
    }


    .jg-footer-links a {
        font-size: 16px;

        padding: 0 6px;
    }


    .jg-footer-separator {
        font-size: 16px;
    }


    /* Copyright */

    .jg-footer-copyright {
        font-size: 17px;
    }
}


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

@media (max-width: 380px) {

    .jg-social-icons {
        gap: 12px;
    }


    .jg-social-icon {
        width: 55px;
        height: 55px;
    }


    .jg-social-icon svg {
        width: 33px;
        height: 33px;
    }


    .jg-footer-links a {
        font-size: 15px;
    }


    .jg-footer-separator {
        font-size: 15px;
    }


    .jg-footer-copyright {
        font-size: 16px;
    }
}