/*==================================================
        PREMIUM FOOTER
      Financial Solutions
==================================================*/

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

.footer{

    position:relative;

    overflow:hidden;

    margin-top:120px;

    background:
    linear-gradient(
    135deg,
    #03111f 0%,
    #082544 40%,
    #0b3558 100%);

    color:#ffffff;

}

/*==============================
BACKGROUND GLOW
==============================*/

.footer::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-250px;

    left:-250px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(0,200,255,.18),

    transparent 70%

    );

    pointer-events:none;

}

.footer::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-220px;

    bottom:-250px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(34,197,94,.15),

    transparent 70%

    );

    pointer-events:none;

}

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

.footer-container{

    position:relative;

    z-index:5;

    width:1300px;

    max-width:95%;

    margin:auto;

    padding:70px 0 50px;

    display:grid;

    justify-content:center;

    grid-template-columns:
    280px
    170px
    190px
    170px
    240px;

    column-gap:10px;

    row-gap:20px;

}

.footer-company{

    width:280px;

    padding-right:10px;

}

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

.footer-box{

    width:fit-content;

    position:relative;

}

.footer-box h3{

    margin-bottom:20px;

    font-size:1.25rem;

    font-weight:700;

    color:#ffffff;

    position:relative;

}

.footer-box h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:55px;

    height:3px;

    border-radius:30px;

    background:

    linear-gradient(

    90deg,

    #00c8ff,

    #22c55e

    );

}

/*==============================
COMPANY SECTION
==============================*/

.footer-brand{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    margin-bottom:28px;

}

.footer-logo{

    width:72px;

    height:72px;

    object-fit:cover;

    border-radius:18px;

    background:#ffffff;

    padding:6px;

    box-shadow:

    0 0 35px rgba(0,200,255,.30);

}

.footer-brand h2{

    font-size:1.7rem;

    font-weight:800;

    color:#ffffff;

}

.footer-brand span{

    display:block;

    margin-top:6px;

    font-size:.82rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#9fd7ff;

}

.footer-company p{

    max-width:300px;

    line-height:1.7;

    color:#cfe8ff;

    font-size:14px;

}

/*==================================================
            PART 2
      LINKS + SOCIAL ICONS
==================================================*/

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

.footer-box ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-box ul li{

    margin-bottom:16px;

}

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

.footer-box ul li a{

    position:relative;

    display:inline-flex;

    align-items:center;

    color:#cfe8ff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:all .35s ease;

}

.footer-box ul li a::before{

    content:"";

    width:0;

    height:2px;

    position:absolute;

    left:0;

    bottom:-5px;

    border-radius:30px;

    background:

    linear-gradient(
    90deg,
    #00c8ff,
    #22c55e);

    transition:.35s ease;

}

.footer-box ul li a:hover{

    color:#ffffff;

    transform:translateX(8px);

}

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

    width:100%;

}

/*==============================
SOCIAL AREA
==============================*/

.footer-social{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:35px;

}

/*==============================
SOCIAL ICON
==============================*/

.footer-social a{

    position:relative;

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:18px;

    color:#ffffff;

    font-size:20px;

    background:

    rgba(255,255,255,.06);

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

    backdrop-filter:blur(14px);

    overflow:hidden;

    transition:all .40s ease;

}

/*==============================
ICON SHINE
==============================*/

.footer-social a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.7s ease;

}

.footer-social a:hover::before{

    left:150%;

}

/*==============================
ICON HOVER
==============================*/

.footer-social a:hover{

    color:#ffffff;

    transform:

    translateY(-8px)

    scale(1.08);

    background:

    linear-gradient(
    135deg,
    #00c8ff,
    #22c55e);

    box-shadow:

    0 15px 35px rgba(0,200,255,.35),

    0 10px 25px rgba(34,197,94,.25);

}

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

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

    background:#1877f2;

}

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

    background:

    linear-gradient(
    135deg,
    #f58529,
    #dd2a7b,
    #8134af);

}

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

    background:#0a66c2;

}

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

    background:#25d366;

}

/*==============================
CONTACT LIST
==============================*/

.contact-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    color:#cfe8ff;

    line-height:1.8;

    margin-bottom:20px;

}

.contact-list i{

    width:20px;

    margin-top:3px;

    color:#00c8ff;

    font-size:17px;

    transition:.35s;

}

.contact-list li:hover i{

    color:#22c55e;

    transform:scale(1.15);

}

.contact-list a{

    color:#cfe8ff;

    text-decoration:none;

    transition:.35s;

}

.contact-list a:hover{

    color:#ffffff;

}

/*==================================================
            PART 3
      FOOTER BOTTOM + RESPONSIVE
==================================================*/

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

.footer-bottom{

    position:relative;

    z-index:5;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:28px 4%;

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

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

    backdrop-filter:blur(18px);

}

.footer-bottom::before{

    content:"";

    position:absolute;

    top:-1px;

    left:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        #00c8ff,

        #22c55e,

        transparent

    );

}

.footer-bottom-left,

.footer-bottom-right{

    color:#cfe8ff;

    font-size:15px;

    font-weight:500;

}

.footer-bottom strong{

    color:#ffffff;

    font-weight:700;

}

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

.footer-bottom strong{

    transition:.35s;

}

.footer-bottom strong:hover{

    color:#22c55e;

}

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

@media(max-width:1200px){

    .footer-container{

        grid-template-columns:

        repeat(3,1fr);

        gap:45px;

    }

}

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

@media(max-width:992px){

    .footer-container{

        grid-template-columns:

        repeat(2,1fr);

        gap:40px;

    }

}

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

@media(max-width:768px){

    .footer{

        margin-top:80px;

    }

    .footer-container{

        grid-template-columns:1fr;

        gap:45px;

        padding:70px 0 50px;

        text-align:center;

    }

    .footer-brand{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-box h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .contact-list li{

        justify-content:center;

        text-align:left;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

        padding:22px;

    }

}

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

@media(max-width:480px){

    .footer-logo{

        width:60px;

        height:60px;

    }

    .footer-brand h2{

        font-size:1.45rem;

    }

    .footer-company p{

        font-size:14px;

        line-height:1.8;

    }

    .footer-social a{

        width:50px;

        height:50px;

        font-size:18px;

    }

    .footer-bottom-left,

    .footer-bottom-right{

        font-size:14px;

        line-height:1.7;

    }

}

/*==============================
LUXURY SCROLL ANIMATION READY
==============================*/

.footer-box{

    transition:

    transform .45s ease,

    opacity .45s ease;

}

.footer-box:hover{

    transform:translateY(-8px);

}

/*==============================
SMOOTH SELECTION
==============================*/

.footer ::selection{

    background:#00c8ff;

    color:#06172d;

}