/*=========================================================
    VBLINK HR CONSULTANTS
    FOOTER.CSS

    Dedicated Footer Stylesheet

    Contains:
    - Footer wave
    - Premium gradient footer
    - Background glow
    - Footer container
    - Glass cards
    - Company section
    - Company address
    - Quick Links
    - Services
    - Newsletter
    - Social icons
    - Background particles
    - Footer statistics
    - Footer bottom bar
    - Floating footer buttons
    - Footer animations
    - Responsive footer styling

    Does NOT contain:
    - Header
    - Main navigation
    - Side drawer
    - Main page content
=========================================================*/


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

.footer-wave{

    position:relative;

    width:100%;

    overflow:hidden;

    line-height:0;

    background:transparent;

}


.footer-wave svg{

    display:block;

    width:100%;

    height:50px;

}


.footer-wave path{

    fill:#14213d;

}


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

.footer{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #162447 35%,
            #1f2a44 65%,
            #243b72 100%
        );

    color:#ffffff;

    padding:20px 0 0;

    z-index:1;

}


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

.footer::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    top:-150px;

    background:
        radial-gradient(
            rgba(91,140,255,.18),
            transparent 70%
        );

    border-radius:50%;

    animation:
        glowMove1 16s linear infinite;

}


.footer::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-150px;

    bottom:-120px;

    background:
        radial-gradient(
            rgba(47,84,235,.16),
            transparent 70%
        );

    border-radius:50%;

    animation:
        glowMove2 18s linear infinite;

}


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

.footer-container{

    position:relative;

    z-index:10;

    width:92%;

    max-width:1450px;

    margin:20px auto;

    display:grid;

    grid-template-columns:
        1.5fr
        0.8fr
        0.8fr
        1.2fr;

    gap:15px;

}


/*=========================================================
    FOOTER GLASS CARDS
=========================================================*/

.footer-column{

    position:relative;

    padding:15px;

    border-radius:24px;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

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

    transition:.45s;

    overflow:hidden;

}


.footer-column::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.05),
            transparent 60%
        );

    opacity:0;

    transition:.45s;

}


.footer-column:hover{

    transform:
        translateY(-10px);

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

    border-color:
        rgba(91,140,255,.35);

}


.footer-column:hover::before{

    opacity:1;

}


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

.footer-company{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.footer .logo-section{

    display:flex;

    align-items:center;

    gap:22px;

}


/*=========================================================
    COMPANY TITLE
=========================================================*/

.company-title h2{

    font-size:30px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:6px;

    letter-spacing:.5px;

}


.company-title span{

    color:#8fb3ff;

    font-size:15px;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*=========================================================
    COMPANY DESCRIPTION
=========================================================*/

.company-description{

    color:#dbe6ff;

    font-size:15px;

    line-height:1.5;

    text-align:justify;

}


/*=========================================================
    COMPANY ADDRESS
=========================================================*/

.company-address{

    display:flex;

    flex-direction:column;

    gap:10px;

}


.company-address div{

    display:flex;

    align-items:flex-start;

    gap:15px;

}


.company-address i{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    box-shadow:
        0 8px 18px
        rgba(47,84,235,.35);

}


.company-address span{

    color:#dbe6ff;

    line-height:1.5;

    font-size:15px;

}


/*=========================================================
    FOOTER SECTION TITLES
=========================================================*/

.footer-column h3{

    position:relative;

    display:inline-block;

    padding:12px 24px;

    margin-bottom:15px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    border-radius:40px;

    font-size:20px;

    font-weight:600;

    letter-spacing:.6px;

    box-shadow:
        0 10px 20px
        rgba(47,84,235,.35);

}


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

.footer-column ul{

    margin:0;

    padding:0;

    list-style:none;

}


/*=========================================================
    FOOTER LIST ITEMS
=========================================================*/

.footer-column ul li{

    margin-bottom:16px;

    position:relative;

}


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

.footer-column ul li a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#dbe6ff;

    font-size:15px;

    font-weight:500;

    transition:
        all .35s ease;

}


.footer-column ul li a:hover{

    color:#ffffff;

    transform:
        translateX(10px);

}


/*=========================================================
    FOOTER LINK ICONS
=========================================================*/

.footer-column ul li a i{

    width:25px;

    height:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    color:#ffffff;

    font-size:13px;

    transition:.35s;

    box-shadow:
        0 8px 18px
        rgba(47,84,235,.25);

}


.footer-column ul li a:hover i{

    transform:
        rotate(360deg)
        scale(1.12);

    box-shadow:
        0 12px 24px
        rgba(47,84,235,.45);

}


/*=========================================================
    FOOTER LINK UNDERLINE
=========================================================*/

.footer-column ul li a::after{

    content:"";

    position:absolute;

    left:48px;

    bottom:-3px;

    width:0;

    height:2px;

    background:#5b8cff;

    transition:.35s;

}


.footer-column ul li a:hover::after{

    width:70%;

}


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

.newsletter-text{

    color:#dbe6ff;

    line-height:1.8;

    margin-bottom:12px;

    font-size:15px;

}


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

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:18px;

}


/*=========================================================
    NEWSLETTER EMAIL INPUT
=========================================================*/

.newsletter-form input{

    width:100%;

    padding:15px 18px;

    border-radius:50px;

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

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

    color:#ffffff;

    font-size:15px;

    outline:none;

    transition:.35s;

}


.newsletter-form input::placeholder{

    color:#b8c8f5;

}


.newsletter-form input:focus{

    border-color:#5b8cff;

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

    box-shadow:
        0 0 20px
        rgba(91,140,255,.25);

}


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

.newsletter-form button{

    padding:15px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    box-shadow:
        0 10px 25px
        rgba(47,84,235,.30);

    transition:.35s;

}


.newsletter-form button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(47,84,235,.45);

}


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

.social-icons{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}


.social-icons a{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    text-decoration:none;

    color:#ffffff;

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

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

    transition:.35s;

}


.social-icons a:hover{

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

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

    box-shadow:
        0 12px 25px
        rgba(47,84,235,.40);

}


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

.footer-stats{

    position:relative;

    z-index:10;

    width:92%;

    max-width:1450px;

    margin:25px auto;

    display:grid;

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

    gap:15px;

}


/*=========================================================
    STAT BOX
=========================================================*/

.stat-box{

    padding:30px 20px;

    text-align:center;

    border-radius:20px;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

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

    transition:.35s;

}


.stat-box:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(91,140,255,.35);

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

}


.stat-box h2{

    margin:0 0 8px;

    color:#ffffff;

    font-size:40px;

    font-weight:700;

}


.stat-box p{

    margin:0;

    color:#b8c8f5;

    font-size:14px;

}


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

.footer-bottom{

    position:relative;

    z-index:10;

    padding:
        10px 6%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    background:#0b1120;

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

}


.footer-bottom a{

    color:#b8c8f5;

    text-decoration:none;

    transition:.35s;

}


.footer-bottom a:hover{

    color:#ffffff;

}


.footer-links{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}


.designer strong{

    color:#5b8cff;

}


.copyright strong{

    color:#5b8cff;

}


/*=========================================================
    BACKGROUND PARTICLES
=========================================================*/

.particle{

    position:absolute;

    border-radius:50%;

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

    animation:
        floatParticle
        linear
        infinite;

    pointer-events:none;

}


.p1{

    width:8px;

    height:8px;

    left:10%;

    top:20%;

    animation-duration:18s;

}


.p2{

    width:12px;

    height:12px;

    left:28%;

    top:78%;

    animation-duration:22s;

}


.p3{

    width:6px;

    height:6px;

    right:15%;

    top:18%;

    animation-duration:16s;

}


.p4{

    width:14px;

    height:14px;

    right:8%;

    bottom:18%;

    animation-duration:24s;

}


.p5{

    width:10px;

    height:10px;

    left:62%;

    top:46%;

    animation-duration:20s;

}


/*=========================================================
    FLOATING BUTTONS
=========================================================*/

.floating-buttons{

    position:fixed;

    right:20px;

    bottom:400px;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:9999;

}


.float-btn{

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

    text-decoration:none;

    transition:.35s;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.30);

}


.float-btn:hover{

    transform:
        translateY(-6px)
        scale(1.08);

}


.float-btn.phone{

    background:#2563eb;

}


.float-btn.email{

    background:#7c3aed;

}


.float-btn.top-btn{

    background:
        linear-gradient(
            135deg,
            #2f54eb,
            #5b8cff
        );

}


/*=========================================================
    PARTICLE ANIMATION
=========================================================*/

@keyframes floatParticle{

    0%{

        transform:
            translateY(0);

        opacity:.2;

    }

    50%{

        transform:
            translateY(-80px);

        opacity:1;

    }

    100%{

        transform:
            translateY(-160px);

        opacity:0;

    }

}


/*=========================================================
    FOOTER GLOW ANIMATION
=========================================================*/

@keyframes glowMove1{

    0%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(60px,40px);

    }

    100%{

        transform:
            translate(0,0);

    }

}


@keyframes glowMove2{

    0%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(-50px,-35px);

    }

    100%{

        transform:
            translate(0,0);

    }

}


/*=========================================================
    TABLET
    1200px AND BELOW
=========================================================*/

@media (max-width:1200px){

    .footer-container{

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

    }


    .footer-stats{

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

    }

}


/*=========================================================
    MOBILE
    768px AND BELOW
=========================================================*/

@media (max-width:768px){

    .footer{

        padding-top:60px;

    }


    .footer-wave svg{

        height:80px;

    }


    .footer-container{

        grid-template-columns:1fr;

        width:94%;

        gap:25px;

    }


    .footer-column{

        padding:25px;

    }


    .footer .logo-section{

        flex-direction:column;

        text-align:center;

    }


    .company-description{

        text-align:center;

    }


    .company-address div{

        justify-content:center;

    }


    .company-title{

        text-align:center;

    }


    .footer-column h3{

        display:block;

        text-align:center;

    }


    .footer-column ul li a{

        justify-content:center;

    }


    .newsletter-text{

        text-align:center;

    }


    .social-icons{

        justify-content:center;

    }


    .footer-stats{

        grid-template-columns:1fr;

        width:94%;

    }


    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }


    .footer-links{

        justify-content:center;

    }


    .floating-buttons{

        right:15px;

        bottom:150px;

    }


    .float-btn{

        width:30px;

        height:30px;

        font-size:18px;

    }
	
	 
}


/*=========================================================
    SMALL MOBILE
    480px AND BELOW
=========================================================*/

@media (max-width:480px){

    .company-title h2{

        font-size:24px;

    }


    .footer-column{

        border-radius:18px;

        padding:20px;

    }


    .footer-column h3{

        font-size:18px;

        padding:10px 18px;

    }


    .newsletter-form input{

        font-size:14px;

    }


    .newsletter-form button{

        font-size:14px;

    }


    .stat-box{

        padding:25px 15px;

    }


    .stat-box h2{

        font-size:34px;

    }


    .footer-bottom{

        padding:2px;

    }

}


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

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

    .footer::before,
    .footer::after,
    .particle{

        animation:none;

    }


    .footer-column,
    .stat-box,
    .social-icons a,
    .float-btn,
    .newsletter-form button{

        transition:none;

    }

}


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

@media print{

    .footer{

        background:#ffffff;

        color:#000000;

        box-shadow:none;

    }


    .footer::before,
    .footer::after,
    .footer-wave,
    .floating-buttons,
    .social-icons{

        display:none;

    }


    .footer-column{

        background:#ffffff;

        border:
            1px solid #cccccc;

        box-shadow:none;

        color:#000000;

    }


    .footer-bottom{

        background:#ffffff;

        color:#000000;

    }

}


/*=========================================================
    INTERACTIVE GOOGLE MAP
==========================================================*/

.footer-map-column {

    position: relative;

    z-index: 10;

    width: 100%;

}


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

.footer-map-wrapper {

    position: relative;

    width: 100%;

    max-width: 340px;

    height: 220px;

    overflow: hidden;

    border-radius: 10px;

    border: 1px solid
        rgba(255, 255, 255, 0.20);

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

    pointer-events: auto !important;

}


/*=========================================================
    GOOGLE MAP IFRAME
==========================================================*/

.footer-google-map {

    display: block;

    width: 100%;

    height: 100%;

    border: 0;

    margin: 0;

    padding: 0;

    pointer-events: auto !important;

    position: relative;

    z-index: 20;

}


/*=========================================================
    MAP TITLE
==========================================================*/

.footer-map-column h4 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 600;

}


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

@media (max-width: 768px) {

    .footer-map-wrapper {

        max-width: 100%;

        height: 220px;

    }

}