/*====================================================
                FOOTER - PART 1
====================================================*/


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

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
.footer {

    position: relative;

    background: linear-gradient(135deg,
            #0f075e,
            #201365,
            #22014f);

    color: #ffffff;

    overflow: hidden;

    padding-top: 80px;

}


/* Decorative Background */

.footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top left,
            rgba(147, 129, 255, .18),
            transparent 45%),

        radial-gradient(circle at bottom right,
            rgba(255, 216, 190, .12),
            transparent 40%);

    pointer-events: none;

}


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

.footer-container {

    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: auto;

    padding: 0 40px 5px;

    display: grid;

    grid-template-columns:

        1.2fr 1fr .8fr 1fr;

    gap: 50px;

}


/*=========================================
            COMMON TITLE
=========================================*/

.footer h3 {

    font-size: 1.35rem;

    margin-bottom: 22px;

    color: #ffffff;

    position: relative;

}

.footer h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 55px;

    height: 3px;

    border-radius: 20px;

    background: var(--accent-light);

}


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

.footer-about {

    display: flex;

    flex-direction: column;

    gap: 25px;

}


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

.footer-logo {

    display: flex;

    align-items: center;

    gap: 18px;

}


.footer-logo img {

    width: 70px;

    height: 70px;

    object-fit: contain;

    background: #ffffff;

    padding: 8px;

    border-radius: 50%;

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

}


.footer-logo h2 {

    font-size: 1.6rem;

    color: #ffffff;

    margin-bottom: 4px;

}


.footer-logo span {

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

    font-size: .95rem;

}


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

.footer-about p {

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

    line-height: 1.9;

    font-size: .96rem;

}


/*=========================================
            MAP SECTION
=========================================*/

.footer-map {

    display: flex;

    flex-direction: column;

}


.footer-map iframe {

    width: 100%;

    height: 400px;

    border: none;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:

        0 12px 30px rgba(0, 0, 0, .25);

}


/*=========================================
        MAP HOVER EFFECT
=========================================*/

.footer-map iframe {

    transition: .35s ease;

}


.footer-map iframe:hover {

    transform: translateY(-5px);

    box-shadow:

        0 18px 35px rgba(0, 0, 0, .35);

}


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

.footer-links,

.footer-contact {

    display: flex;

    flex-direction: column;

}


/*=========================================
        GLASS CARD EFFECT
=========================================*/

.footer-about,

.footer-map,

.footer-links,

.footer-contact {

    padding: 22px;

    border-radius: 24px;

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

    backdrop-filter: blur(12px);

    border: 3px solid rgba(109, 82, 152, 0.694);

    transition: .35s ease;

}


.footer-about:hover,

.footer-map:hover,

.footer-links:hover,

.footer-contact:hover {

    transform: translateY(-6px);

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

    box-shadow:

        0 20px 45px rgba(0, 0, 0, .22);

}

/*====================================================
                FOOTER - PART 2
====================================================*/


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

.footer-links ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-top: 8px;

}

.footer-links ul li {

    list-style: none;

}

.footer-links ul li a {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

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

    transition: .35s ease;

    font-size: .96rem;

}

.footer-links ul li a::before {

    content: "➜";

    color: var(--accent-light);

    transition: .35s;

}

.footer-links ul li:hover a {

    color: #ffffff;

    transform: translateX(8px);

}

.footer-links ul li:hover a::before {

    color: var(--primary-light);

}



/*=========================================
        CONTACT DETAILS
=========================================*/

.footer-contact ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 8px;

}

.footer-contact ul li {

    display: flex;

    align-items: flex-start;

    gap: 15px;

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

    line-height: 1.7;

}

.footer-contact ul li i {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

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

    color: var(--accent-light);

    font-size: 1rem;

    flex-shrink: 0;

    transition: .35s ease;

}

.footer-contact ul li:hover i {

    background: var(--primary);

    color: #ffffff;

    transform: rotate(10deg) scale(1.08);

}

.footer-contact ul li a {

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

    text-decoration: none;

    transition: .35s ease;

}

.footer-contact ul li a:hover {

    color: #ffffff;

}



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

.footer-social {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 30px;

}

.footer-social a {

    width: 48px;

    height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 1.2rem;

    transition: all .35s ease;

}

.footer-social a:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateY(-6px) rotate(8deg);

    box-shadow:

        0 12px 25px rgba(147, 129, 255, .35);

}


/* Individual Brand Hover Colors */

.footer-social a:nth-child(1):hover {

    background: #1877F2;

}

.footer-social a:nth-child(2):hover {

    background: #E1306C;

}

.footer-social a:nth-child(3):hover {

    background: #FF0000;

}

.footer-social a:nth-child(4):hover {

    background: #25D366;

}

.footer-social a:nth-child(5):hover {

    background: #262f59;

}



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

.footer-bottom {

    position: relative;

    z-index: 2;

    margin-top: 20px;

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

    padding: 28px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}

.footer-bottom p {

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

    font-size: .95rem;

}

.footer-bottom strong {

    color: #ffffff;

}

.footer-bottom a {

    color: var(--accent-light);

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.footer-bottom a:hover {

    color: #ffffff;

}

.footer-bottom i {

    color: #ff4d6d;

    margin: 0 4px;

    animation: heartBeat 1.6s infinite;

}



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

.footer-bottom::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 50%;

    transform: translateX(-50%);

    width: 120px;

    height: 3px;

    border-radius: 50px;

    background: linear-gradient(to right,

            transparent,

            var(--accent-light),

            transparent);

}

/*====================================================
                FOOTER - PART 3
====================================================*/


/*=========================================
            BACK TO TOP
=========================================*/
.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s;

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

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.back-to-top i{

    position:absolute;

    font-size:20px;

    color:#1565c0;

}

.progress-ring{

    position:absolute;

    transform:rotate(-90deg);

}

.progress-bg{

    fill:none;

    stroke:#e6e6e6;

    stroke-width:4;

}

.progress-bar{

    fill:none;

    stroke:#1565c0;

    stroke-width:4;

    stroke-linecap:round;

    stroke-dasharray:163.36;

    stroke-dashoffset:163.36;

    transition:stroke-dashoffset .1s linear;

}


/*=========================================
            FLOATING ANIMATION
=========================================*/

.footer-about,
.footer-map,
.footer-links,
.footer-contact {

    animation: footerFloat 6s ease-in-out infinite;

}

.footer-map {

    animation-delay: .5s;

}

.footer-links {

    animation-delay: 1s;

}

.footer-contact {

    animation-delay: 1.5s;

}



/*=========================================
            SCROLL REVEAL
=========================================*/

.footer.reveal {

    opacity: 1;

    transform: translateY(0);

}

.footer {

    opacity: 0;

    transform: translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}



/*=========================================
            KEYFRAMES
=========================================*/

@keyframes footerFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}

@keyframes heartBeat {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.3);

    }

}

@keyframes rotateArrow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



/*=========================================
            LARGE SCREEN
=========================================*/

@media (min-width:1600px) {

    .footer-container {

        max-width: 1600px;

        gap: 70px;

    }

    .footer-logo h2 {

        font-size: 2rem;

    }

    .footer-map iframe {

        height: 300px;

    }

}



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

@media (max-width:1100px) {

    .footer-container {

        grid-template-columns:

            repeat(2, 1fr);

    }

    .footer-map iframe {

        height: 240px;

    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

}



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

@media (max-width:768px) {

    .footer {

        padding-top: 60px;

        padding-bottom: 8px;

    }

    .footer-container {

        width: 100%;

        max-width: 100%;

        grid-template-columns: 1fr;

        padding: 0 16px 5px;

        gap: 30px;

        box-sizing: border-box;

    }

    .footer-about,
    .footer-map,
    .footer-links,
    .footer-contact {

        padding: 7px;

    }

    .footer-logo {

        justify-content: center;

        text-align: center;

        flex-direction: column;

    }

    .footer-about p {

        text-align: center;

    }

    .footer h3 {

        text-align: center;

    }

    .footer h3::after {

        left: 50%;

        transform: translateX(-50%);

    }

    .footer-links ul {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 12px 20px;

        margin-top: 8px;
        align-items: center;

    }

    .footer-links ul li a {

        gap: 8px;

        font-size: 0.9rem;

    }

    .footer-contact ul {

        gap: 18px;

    }

    .footer-social {

        justify-content: center;

    }

    .footer-map iframe {

        height: 220px;

    }

    .footer-bottom {

        padding: 20px 16px;

        text-align: center;

    }

    .back-to-top {

        width: 52px;

        height: 52px;

        right: calc(20px + env(safe-area-inset-right));

        bottom: calc(20px + env(safe-area-inset-bottom));

        top: auto;

    }

}



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

@media (max-width:480px) {

    .footer-logo img {

        width: 60px;

        height: 60px;

    }

    .footer-logo h2 {

        font-size: 1.4rem;

    }

    .footer-about p {

        font-size: .9rem;

    }

    .footer-bottom p {

        font-size: .85rem;

    }

    .footer-social a {

        width: 44px;

        height: 44px;

        font-size: 1rem;

    }

    .footer-container {

        padding-left: 12px;

        padding-right: 12px;

    }

    .footer-bottom {

        padding-left: 12px;

        padding-right: 12px;

    }

    .footer-about p,
    .footer-contact li span,
    .footer-contact li a,
    .footer-links li a {

        word-break: break-word;

    }

    .back-to-top {

        width: 48px;

        height: 48px;

        right: calc(16px + env(safe-area-inset-right));

        bottom: calc(16px + env(safe-area-inset-bottom));

    }

}



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

.footer a:focus,
.back-to-top:focus {

    outline: 3px solid var(--accent-light);

    outline-offset: 4px;

}



/*=========================================
        REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto;

    }

}



/*=========================================
        SOCIAL QR   
=========================================*/
.social-qr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 7%;
}
.social-qr img{
    width: 24%;
    border-radius: 15px;
}