/*=========================================================
    PREMIUM FOOTER
    PART 2A
    VBlink HR Consultants
=========================================================*/
/*=========================================================
    FOOTER WAVE
=========================================================*/
.footer-wave{
    position:relative;
    width:100%;
    overflow:hidden;
    line-height:0;
    background:transparent;
}

.footer-wave svg{
    display:block;
    width:100%;
    height:70px;
}

.footer-wave path{
    fill:#14213d;
}

/*=========================================================
    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;
}

/*=========================================================
    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;
}

/*=========================================================
    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;
}

/*=========================================================
    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;
}

/*=========================================================
    LOGO SECTION
=========================================================*/
.logo-section{
    display:flex;
    align-items:center;
    gap:22px;
}

/*=========================================================
    COMPANY TITLE
=========================================================*/
.company-title h2{
    font-size:25px;
    font-weight:700;
    color:#ffffff;
    margin-bottom:0px;
    letter-spacing:.5px;
}

.company-title span{
    color:#8fb3ff;
    font-size:15px;
    letter-spacing:1px;
    text-transform:uppercase;
}

/*=========================================================
    DESCRIPTION
=========================================================*/
.company-description{
    color:#dbe6ff;
    font-size:15px;
    line-height:1.5;
    text-align:justify;
}

/*=========================================================
    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;
}

/*=========================================================
    LOGO RING
=========================================================*/
.logo-ring{
    position:relative;
    width:72px;
    height:62px;
    border-radius:50%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    border:5px solid #2f54eb;
    overflow:visible;
    box-shadow:
        0 0 18px rgba(47,84,235,.45),
        0 0 45px rgba(47,84,235,.25);
    animation:ringGlow 4s ease-in-out infinite;
}

.logo-ring img{
    width:42px;
    height:42px;
    object-fit:contain;
    z-index:5;
}

/*=========================================================
    ROTATING DOTS
=========================================================*/
.dot{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff3b30;
    box-shadow:
        0 0 12px #ff3b30;
}

.dot1{
    animation:
        orbitOne 10s linear infinite;

}

.dot2{
    animation:
        orbitTwo 10s linear infinite;

}

/*=========================================================
    LOGO ANIMATION
=========================================================*/
@keyframes ringGlow{
    0%{
        box-shadow:
            0 0 15px rgba(47,84,235,.30),
            0 0 35px rgba(47,84,235,.15);
    }

    50%{
        box-shadow:
            0 0 35px rgba(47,84,235,.55),
            0 0 60px rgba(47,84,235,.30);
    }

    100%{
        box-shadow:
            0 0 15px rgba(47,84,235,.30),
            0 0 35px rgba(47,84,235,.15);
    }

}

@keyframes orbitOne{
    from{
        transform:
            rotate(0deg)
            translateX(32px)
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg)
            translateX(32px)
            rotate(-360deg);
    }

}

@keyframes orbitTwo{
    from{
        transform:
            rotate(180deg)
            translateX(32px)
            rotate(-180deg);

    }

    to{
        transform:
            rotate(540deg)
            translateX(32px)
            rotate(-540deg);
    }

}

/*=========================================================
    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);
}

/*=========================================================
    LIST RESET
=========================================================*/
.footer-column ul{
    margin:0;
    padding:0;
    list-style:none;
}

/*=========================================================
    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;

}

 /*=========================================================
    PREMIUM FOOTER
    PART 2B
    Quick Links • Services • Newsletter • Social Icons
=========================================================*/
/*=========================================================
    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);

}

/*=========================================================
    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);

}

/*=========================================================
    UNDERLINE ANIMATION
=========================================================*/
.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;

}

/*=========================================================
    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);

}


/*=========================================================
    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
        );
    transition:.4s;
    box-shadow:
        0 12px 24px rgba(47,84,235,.30);
}

.newsletter-form button:hover{
    transform:translateY(-4px);
    box-shadow:
        0 18px 35px rgba(47,84,235,.45);

}

.newsletter-form button:active{
    transform:scale(.98);
}


/*=========================================================
    SOCIAL ICON CONTAINER
=========================================================*/
.social-icons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:10px;

}


/*=========================================================
    SOCIAL BUTTONS
=========================================================*/
.social-icons a{
    width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    color:#ffffff;
    text-decoration:none;
    font-size:20px;
    transition:.45s;
    position:relative;
    overflow:hidden;

}

/*=========================================================
    SHINE EFFECT
=========================================================*/
.social-icons a::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:-120%;
    top:0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );
    transition:.6s;

}

.social-icons a:hover::before{
    left:120%;

}

/*=========================================================
    HOVER EFFECT
=========================================================*/
.social-icons a:hover{
    transform:
        translateY(-8px)
        rotate(360deg)
        scale(1.08);

}

/*=========================================================
    BRAND COLOURS
=========================================================*/

.facebook{
    background:#1877f2;

}

.linkedin{
    background:#0077b5;

}

.instagram{
    background:
        linear-gradient(
            135deg,
            #f58529,
            #dd2a7b,
            #8134af,
            #515bd4
        );

}

.youtube{
    background:#ff0000;

}

.whatsapp{
    background:#25d366;

}

/*=========================================================
    SOCIAL SHADOWS
=========================================================*/
.facebook:hover{
    box-shadow:
        0 15px 30px rgba(24,119,242,.45);

}

.linkedin:hover{

    box-shadow:

        0 15px 30px rgba(0,119,181,.45);

}

.instagram:hover{
    box-shadow:
        0 15px 30px rgba(221,42,123,.45);

}

.youtube:hover{
    box-shadow:
        0 15px 30px rgba(255,0,0,.45);

}

.whatsapp:hover{
    box-shadow:
        0 15px 30px rgba(37,211,102,.45);

}


/*=========================================================
    SMALL BADGE (OPTIONAL)
=========================================================*/
.footer-column .badge{
    display:inline-block;
    margin-top:18px;
    padding:6px 14px;
    border-radius:30px;
    background:
        rgba(91,140,255,.15);
    color:#8fb3ff;
    font-size:13px;
    border:1px solid rgba(91,140,255,.25);

}

/*=========================================================
    DIVIDER
=========================================================*/
.footer-column hr{
    border:none;
    height:1px;
    background: rgba(255,255,255,.08);
    margin:25px 0;

}


/*=========================================================
    HOVER GLOW
=========================================================*/
.footer-column:hover{
    background:
        rgba(255,255,255,.06);

}

/*=========================================================
    PREMIUM FOOTER
    PART 2C
    Statistics • Footer Bottom • Floating Buttons
    Responsive • Animations
=========================================================*/
/*=========================================================
    COMPANY STATISTICS
=========================================================*/
.footer-stats{
    width:92%;
    max-width:1450px;
    margin:70px auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}

.stat-box{
    padding:30px 20px;
    text-align:center;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;

}

.stat-box:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
    border-color:#5b8cff;

}

.stat-box h2{
    font-size:42px;
    font-weight:700;
    color:#ffffff;
    margin-bottom:10px;

}

.stat-box h2::after{
    content:"+";
    color:#5b8cff;

}

.stat-box span{
    color:#cfdcff;
    font-size:15px;

}


/*=========================================================
    FOOTER BOTTOM
=========================================================*/
.footer-bottom{
    margin-top:3px;
    padding:10px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    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:15px;
    flex-wrap:wrap;

}

.designer strong{
    color:#5b8cff;
}

.copyright strong{
    color:#5b8cff;
}


/*=========================================================
    FLOATING BUTTONS
=========================================================*/
.floating-buttons{
    position:fixed;
    right:20px;
    bottom:200px;
    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;

    }

}



/*=========================================================
    BACKGROUND GLOW
=========================================================*/
@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
=========================================================*/
@media(max-width:1200px){
.footer-container{
    grid-template-columns:repeat(2,1fr);

}

.footer-stats{
    grid-template-columns:repeat(2,1fr);

}

}

/*=========================================================
    MOBILE
=========================================================*/
/* @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;
}

.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:200px;

}

.float-btn{
    width:30px;
    height:30px;
    font-size:18px;

}

} */



/*=========================================================*
 * MOBILE
 *=========================================================*/
@media (max-width: 768px) {

    /*---------------------------------------------
      FOOTER
    ---------------------------------------------*/
    .footer {
        padding-top: 60px;
    }

    .footer-wave svg {
        height: 80px;
    }

    /*---------------------------------------------
      FOOTER CONTAINER
    ---------------------------------------------*/
    .footer-container {
        grid-template-columns: 1fr;
        width: 94%;
        gap: 25px;
    }

    /*---------------------------------------------
      FOOTER COLUMN
    ---------------------------------------------*/
    .footer-column {
        padding: 25px;
        text-align: left;
    }

    /*---------------------------------------------
      LOGO / COMPANY SECTION
    ---------------------------------------------*/
    .logo-section {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .company-title {
        text-align: left;
    }

    .company-description {
        text-align: left;
    }

    /*---------------------------------------------
      COMPANY ADDRESS
    ---------------------------------------------*/
    .company-address div {
        justify-content: flex-start;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER HEADINGS
    ---------------------------------------------*/
    .footer-column h3 {
        display: block;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER LINKS
    ---------------------------------------------*/
    .footer-column ul {
        padding-left: 0;
        text-align: left;
    }

    .footer-column ul li {
        text-align: left;
    }

    .footer-column ul li a {
        justify-content: flex-start;
        text-align: left;
    }

    /*---------------------------------------------
      NEWSLETTER
    ---------------------------------------------*/
    .newsletter-text {
        text-align: left;
    }

    /*---------------------------------------------
      SOCIAL ICONS
    ---------------------------------------------*/
    .social-icons {
        justify-content: flex-start;
    }

    /*---------------------------------------------
      FOOTER STATS
    ---------------------------------------------*/
    .footer-stats {
        grid-template-columns: 1fr;
        width: 94%;
    }

    /*---------------------------------------------
      FOOTER BOTTOM
    ---------------------------------------------*/
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-links {
        justify-content: flex-start;
        text-align: left;
    }

    /*---------------------------------------------
      FLOATING BUTTONS
    ---------------------------------------------*/
    .floating-buttons {
        right: 15px;
        bottom: 200px;
    }

    .float-btn {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/
 /*@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;

}

} */


/*=========================================================*
 * SMALL MOBILE
 *=========================================================*/
@media (max-width: 480px) {

    /*---------------------------------------------
      COMPANY TITLE
    ---------------------------------------------*/
    .company-title {
        text-align: left;
    }

    .company-title h2 {
        font-size: 24px;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER COLUMN
    ---------------------------------------------*/
    .footer-column {
        border-radius: 18px;
        padding: 20px;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER HEADINGS
    ---------------------------------------------*/
    .footer-column h3 {
        font-size: 18px;
        padding: 10px 18px;
        text-align: left;
    }

    /*---------------------------------------------
      COMPANY DESCRIPTION
    ---------------------------------------------*/
    .company-description {
        text-align: left;
    }

    /*---------------------------------------------
      COMPANY ADDRESS
    ---------------------------------------------*/
    .company-address {
        text-align: left;
    }

    .company-address div {
        justify-content: flex-start;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER LINKS
    ---------------------------------------------*/
    .footer-column ul {
        text-align: left;
        padding-left: 0;
    }

    .footer-column ul li {
        text-align: left;
    }

    .footer-column ul li a {
        justify-content: flex-start;
        text-align: left;
    }

    /*---------------------------------------------
      NEWSLETTER
    ---------------------------------------------*/
    .newsletter-text {
        text-align: left;
    }

    .newsletter-form {
        width: 100%;
    }

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

    .newsletter-form button {
        font-size: 14px;
    }

    /*---------------------------------------------
      SOCIAL ICONS
    ---------------------------------------------*/
    .social-icons {
        justify-content: flex-start;
    }

    /*---------------------------------------------
      FOOTER STATISTICS
    ---------------------------------------------*/
    .stat-box {
        padding: 25px 15px;
        text-align: left;
    }

    .stat-box h2 {
        font-size: 34px;
        text-align: left;
    }

    /*---------------------------------------------
      FOOTER BOTTOM
    ---------------------------------------------*/
    .footer-bottom {
        padding: 2px;
        align-items: flex-start;
        text-align: left;
    }

    .footer-links {
        justify-content: flex-start;
        text-align: left;
    }

}