/* =====================================================
   GK CONSULTANCY
   PAYROLL OUTSOURCING PAGE CSS
   PREMIUM BLUE THEME
===================================================== */


/* ===============================
   GOOGLE FONT
================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/* ===============================
   GLOBAL RESET
================================ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:'Poppins',sans-serif;
    color:#1e293b;
    background:#ffffff;
    line-height:1.6;

}


html{

    scroll-behavior:smooth;

}



img{

    max-width:100%;
    display:block;

}



a{

    text-decoration:none;

}



.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



/* ===============================
   COMMON SECTION
================================ */


.section-padding{

    padding:90px 0;

}



.section-heading{

    text-align:center;
    max-width:800px;
    margin:0 auto 55px;

}



.section-heading span,
.section-tag{

    display:inline-block;
    color:#0066ff;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-bottom:15px;

}



.section-heading h2{

    font-size:42px;
    line-height:1.3;
    font-weight:700;
    color:#0f172a;
    margin-bottom:18px;

}



.section-heading h2 span{

    color:#0066ff;

}



.section-heading p{

    color:#64748b;
    font-size:16px;

}



.blue-line{

    width:70px;
    height:4px;
    background:#0066ff;
    margin:20px auto;
    border-radius:20px;

}





/* =====================================================
   HERO SECTION
===================================================== */


.payroll-hero{

    min-height:700px;
    display:flex;
    align-items:center;
    position:relative;

    background:

    linear-gradient(
    120deg,
    rgba(0,68,180,.95),
    rgba(0,140,255,.85)
    ),

    url("../assets/payroll-bg.webp");

    background-size:cover;
    background-position:center;

}



.hero-overlay{

    position:absolute;
    inset:0;
    background:
    linear-gradient(
    90deg,
    rgba(0,30,90,.7),
    transparent
    );

}



.hero-content{

    position:relative;
    max-width:750px;
    color:white;

}



.hero-tag{

    display:inline-block;
    padding:8px 20px;
    border-radius:30px;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);

    font-size:14px;
    font-weight:600;
    letter-spacing:1px;

    margin-bottom:25px;

}



.hero-content h1{

    font-size:56px;
    line-height:1.15;
    font-weight:800;
    margin-bottom:25px;

}


/* 
.hero-content h1 span{

    display:block;
    color:#dbeafe;
    font-size:38px;

} */



.hero-content p{

    font-size:17px;
    color:#e2e8f0;
    max-width:650px;
    margin-bottom:35px;

}



.hero-buttons{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}



/* Buttons */


.btn-primary,
.blue-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#0066ff;
    color:white;

    padding:15px 32px;

    border-radius:50px;

    font-size:15px;
    font-weight:600;

    transition:.3s;

}



.btn-primary:hover,
.blue-btn:hover{

    background:#0047b3;
    transform:translateY(-3px);

}



.btn-outline,
.outline-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 32px;

    border-radius:50px;

    color:white;

    border:2px solid white;

    font-weight:600;

    transition:.3s;

}



.btn-outline:hover{

    background:white;
    color:#0066ff;

}






/* =====================================================
   STATS SECTION
===================================================== */


.stats-section{

    padding:70px 0;

    background:#f8fbff;

}



.stats-grid{

    display:grid;

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

    gap:25px;

}



.stat-card{

    background:white;

    padding:35px 20px;

    text-align:center;

    border-radius:20px;

    box-shadow:
    0 15px 35px rgba(0,70,180,.08);

    transition:.3s;

}



.stat-card:hover{

    transform:translateY(-10px);

}



.stat-card i{

    font-size:35px;

    color:#0066ff;

    margin-bottom:15px;

}



.stat-card h2{

    font-size:40px;

    color:#0f172a;

    font-weight:800;

}



.stat-card p{

    color:#64748b;

    font-size:15px;

}







/* =====================================================
   SERVICES SECTION
===================================================== */


.service-grid{

    display:grid;

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

    gap:30px;

}



.service-card{

    background:white;

    padding:35px;

    border-radius:20px;

    border:1px solid #e2e8f0;

    transition:.35s;

    position:relative;

    overflow:hidden;

}



.service-card:before{

    content:"";

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:#0066ff;

    transform:scaleX(0);

    transition:.3s;

}



.service-card:hover:before{

    transform:scaleX(1);

}



.service-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,90,255,.12);

}



.service-card i{

    font-size:38px;

    color:#0066ff;

    margin-bottom:20px;

}



.service-card h3{

    font-size:22px;

    color:#0f172a;

    margin-bottom:12px;

}



.service-card p{

    color:#64748b;

    font-size:15px;

}







/* =====================================================
   WHY SECTION
===================================================== */


.why-section{

    padding:100px 0;

    background:#f8fafc;

}



.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.why-image img{

    width:100%;

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}




.why-content>span{

    color:#0066ff;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}



.why-content h2{

    font-size:40px;

    line-height:1.3;

    margin:15px 0;

    color:#0f172a;

}



.why-content>p{

    color:#64748b;

    margin-bottom:30px;

}



.why-item{

    display:flex;

    gap:18px;

    margin-bottom:22px;

}



.why-item i{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#0066ff;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

}



.why-item h4{

    font-size:18px;

    margin-bottom:5px;

    color:#0f172a;

}



.why-item p{

    color:#64748b;

    font-size:14px;

}
/* =====================================================
   PROCESS SECTION
===================================================== */


.process-section{

    padding:100px 0;
    background:#ffffff;

}



.process-grid{

    display:grid;

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

    gap:25px;

}



.process-card{

    position:relative;

    background:#f8fbff;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    border:1px solid #e2e8f0;

    transition:.35s;

}



.process-card:hover{

    background:white;

    transform:translateY(-10px);

    box-shadow:
    0 20px 45px rgba(0,102,255,.12);

}



.number{

    width:65px;

    height:65px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#0066ff;

    color:white;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}



.process-card h3{

    font-size:21px;

    color:#0f172a;

    margin-bottom:12px;

}



.process-card p{

    color:#64748b;

    font-size:15px;

}






/* =====================================================
   BLUE ABOUT PAYROLL SECTION
===================================================== */


.blue-section{

    padding:100px 0;

    background:

    linear-gradient(
    135deg,
    #0047b3,
    #0066ff
    );

    color:white;

}



.blue-section .section-heading span{

    color:#bfdbfe;

}



.blue-section .section-heading h2{

    color:white;

}



.blue-section .section-heading h2 span{

    color:#dbeafe;

}



.blue-section .section-heading p{

    color:#dbeafe;

}



.about-payroll{

    position:relative;

    overflow:hidden;

}



.about-payroll:before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

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

    border-radius:50%;

    top:-150px;

    right:-100px;

}



.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.about-content h3{

    font-size:32px;

    margin-bottom:20px;

}



.about-content p{

    color:#dbeafe;

    margin-bottom:25px;

}



.check-list{

    list-style:none;

    margin-bottom:35px;

}



.check-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:white;

    font-size:16px;

}



.check-list i{

    color:#bfdbfe;

    font-size:18px;

}



.about-image{

    display:flex;

    justify-content:center;

}



.image-card{

    background:white;

    color:#0f172a;

    padding:45px;

    text-align:center;

    border-radius:25px;

    max-width:380px;

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

}



.image-card i{

    font-size:60px;

    color:#0066ff;

    margin-bottom:20px;

}



.image-card h3{

    font-size:25px;

    margin-bottom:15px;

}



.image-card p{

    color:#64748b;

}







/* =====================================================
   FEATURE SECTION
===================================================== */


.feature-grid{

    display:grid;

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

    gap:25px;

}



.feature-card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    border:1px solid #e2e8f0;

    text-align:center;

    transition:.35s;

}



.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,102,255,.15);

}



.feature-icon{

    width:75px;

    height:75px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eaf3ff;

    border-radius:20px;

}



.feature-icon i{

    color:#0066ff;

    font-size:32px;

}



.feature-card h3{

    font-size:20px;

    color:#0f172a;

    margin-bottom:12px;

}



.feature-card p{

    color:#64748b;

    font-size:15px;

}







/* =====================================================
   TESTIMONIAL SECTION
===================================================== */


.testimonial-section{

    padding:100px 0;

    background:#f8fafc;

}



.testimonial-grid{

    display:grid;

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

    gap:30px;

}



.testimonial-card{

    background:white;

    padding:35px;

    border-radius:22px;

    border:1px solid #e2e8f0;

    transition:.35s;

}



.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,102,255,.12);

}



.stars{

    color:#0066ff;

    font-size:22px;

    letter-spacing:3px;

    margin-bottom:20px;

}



.testimonial-card p{

    color:#64748b;

    font-size:15px;

    margin-bottom:25px;

}



.testimonial-card h4{

    font-size:18px;

    color:#0f172a;

}



.testimonial-card span{

    color:#0066ff;

    font-size:14px;

}







/* =====================================================
   RELATED SERVICES SECTION
===================================================== */


.related-section{

    padding:100px 0;

    background:white;

}



.related-grid{

    display:grid;

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

    gap:30px;

}



.related-card{

    padding:35px;

    background:#f8fbff;

    border-radius:22px;

    border:1px solid #e2e8f0;

    transition:.35s;

    color:#0f172a;

}



.related-card:hover{

    background:#0066ff;

    color:white;

    transform:translateY(-8px);

}



.related-card i{

    font-size:38px;

    color:#0066ff;

    margin-bottom:20px;

}



.related-card:hover i{

    color:white;

}



.related-card h3{

    font-size:22px;

    margin-bottom:12px;

}



.related-card p{

    color:#64748b;

    font-size:15px;

}



.related-card:hover p{

    color:#dbeafe;

}
/* =====================================================
   TRUSTED CLIENTS SECTION
===================================================== */


.clients-section{

    padding:80px 0;

    background:#f8fafc;

    overflow:hidden;

}



.clients-title{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:45px;

}



.clients-slider{

    overflow:hidden;

    margin-bottom:30px;

}



.clients-track{

    display:flex;

    width:max-content;

    gap:25px;

    animation:scrollClients 25s linear infinite;

}



.clients-track.reverse{

    animation:scrollReverse 25s linear infinite;

}



.clients-track span{

    background:white;

    padding:18px 35px;

    border-radius:50px;

    border:1px solid #e2e8f0;

    color:#334155;

    font-weight:600;

    white-space:nowrap;

    box-shadow:

    0 10px 30px rgba(0,80,200,.08);

}



@keyframes scrollClients{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}



@keyframes scrollReverse{


from{

transform:translateX(-50%);

}


to{

transform:translateX(0);

}


}







/* =====================================================
   FINAL CTA SECTION
===================================================== */


.final-cta{

    padding:100px 0;

    background:

    linear-gradient(
    135deg,
    #003b99,
    #0066ff
    );

}



.cta-box{

    text-align:center;

    color:white;

    max-width:850px;

    margin:auto;

}



.cta-box span{

    color:#bfdbfe;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}



.cta-box h2{

    margin:20px 0;

    font-size:45px;

    line-height:1.3;

    font-weight:800;

}



.cta-box h2 span{

    color:#dbeafe;

    font-size:45px;

}



.cta-box p{

    color:#dbeafe;

    font-size:17px;

    margin-bottom:35px;

}



.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



.cta-buttons .blue-btn{

    background:white;

    color:#0066ff;

}



.cta-buttons .blue-btn:hover{

    background:#eaf3ff;

}



.cta-buttons .outline-btn{

    border-color:white;

}






/* =====================================================
   BLOG SECTION
===================================================== */


.blog-section{

    padding:100px 0;

    background:white;

}



.blog-grid{

    display:grid;

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

    gap:30px;

}



.blog-card{

    background:white;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #e2e8f0;

    transition:.35s;

}



.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 50px rgba(0,102,255,.12);

}



.blog-card img{

    width:100%;

    height:240px;

    object-fit:cover;

}



.blog-content{

    padding:30px;

}



.blog-content span{

    color:#0066ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}



.blog-content h3{

    font-size:22px;

    line-height:1.4;

    margin:15px 0;

    color:#0f172a;

}



.blog-content p{

    color:#64748b;

    font-size:15px;

    margin-bottom:20px;

}



.blog-content a{

    color:#0066ff;

    font-weight:700;

}








/* =====================================================
   FLOATING WHATSAPP BUTTON
===================================================== */


.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:90px;

    z-index:999;

}



.floating-whatsapp a{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0066ff;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.2);

    transition:.3s;

}



.floating-whatsapp a:hover{

    transform:scale(1.1);

}







/* =====================================================
   FLOATING CALL BUTTON
===================================================== */


.floating-call{

    position:fixed;

    right:25px;

    bottom:20px;

    z-index:999;

}



.floating-call a{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0047b3;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:25px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.2);

    transition:.3s;

}



.floating-call a:hover{

    transform:scale(1.1);

}








/* =====================================================
   CONSULTATION POPUP
===================================================== */


.consultation-popup{

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,.6);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

}



.consultation-box{

    background:white;

    width:90%;

    max-width:750px;

    padding:40px;

    border-radius:25px;

    position:relative;

}



.close-popup{

    position:absolute;

    right:25px;

    top:15px;

    font-size:35px;

    cursor:pointer;

    color:#334155;

}



.consultation-box h2{

    text-align:center;

    color:#0f172a;

    margin-bottom:10px;

}



.consultation-box p{

    text-align:center;

    color:#64748b;

    margin-bottom:30px;

}



.popup-grid{

    display:grid;

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

    gap:20px;

}



.popup-grid .full{

    grid-column:1/-1;

}



.popup-grid label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#334155;

}



.popup-grid input,
.popup-grid select,
.popup-grid textarea{


    width:100%;

    padding:14px 16px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    outline:none;

    font-family:Poppins;

}



.popup-grid textarea{

    height:120px;

    resize:none;

}



.popup-grid input:focus,
.popup-grid select:focus,
.popup-grid textarea:focus{

    border-color:#0066ff;

}



.popup-submit{

    border:none;

    margin-top:25px;

    cursor:pointer;

}
/* =====================================================
   RESPONSIVE DESIGN
===================================================== */


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

@media(max-width:1200px){


.container{

    width:90%;

}



.blog-grid{

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

}



.service-grid{

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

}



.feature-grid{

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

}



.related-grid{

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

}



.about-grid{

    gap:40px;

}



.cta-box h2,
.cta-box h2 span{

    font-size:38px;

}


}







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


@media(max-width:992px){



.section-heading h2{

    font-size:32px;

}



/* HERO */


.payroll-hero{

    min-height:650px;

}



.hero-content{

    max-width:700px;

}



.hero-content h1{

    font-size:42px;

}



/* STATS */


.stats-grid{

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

}



/* WHY SECTION */


.why-grid{

    grid-template-columns:1fr;

}



.why-image img{

    width:100%;

}



.why-content{

    padding-top:30px;

}



/* PROCESS */


.process-grid{

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

}



/* ABOUT */


.about-grid{

    grid-template-columns:1fr;

}



.about-image{

    order:-1;

}



/* TESTIMONIAL */


.testimonial-grid{

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

}




}








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


@media(max-width:768px){



.container{

    width:92%;

}



.section-padding,
.blue-section,
.services-section,
.why-section,
.process-section,
.testimonial-section,
.related-section,
.clients-section,
.blog-section{

    padding:60px 0;

}




/* HERO */


.payroll-hero{

    min-height:600px;

    text-align:center;

}



.hero-overlay{

    background:

    linear-gradient(
    rgba(0,40,100,.85),
    rgba(0,90,255,.85)
    );

}



.hero-content{

    padding-top:50px;

}



.hero-tag{

    font-size:12px;

}



.hero-content h1{

    font-size:32px;

    line-height:1.3;

}



.hero-content h1 span{

    font-size:28px;

}



.hero-content p{

    font-size:15px;

}



.hero-buttons{

    justify-content:center;

    flex-direction:column;

    gap:15px;

}



.btn-primary,
.btn-outline{

    width:100%;

    justify-content:center;

}





/* STATS */


.stats-grid{

    grid-template-columns:1fr;

}



.stat-card{

    padding:30px;

}





/* SECTION HEADING */


.section-heading h2{

    font-size:28px;

}



.section-heading p{

    font-size:15px;

}






/* SERVICES */


.service-grid{

    grid-template-columns:1fr;

}



.service-card{

    padding:30px 22px;

}






/* FEATURE */


.feature-grid{

    grid-template-columns:1fr;

}



.feature-card{

    padding:30px;

}







/* PROCESS */


.process-grid{

    grid-template-columns:1fr;

}



.process-card{

    text-align:center;

}





/* ABOUT */


.about-content h3{

    font-size:25px;

}



.check-list li{

    font-size:15px;

}







/* IMAGE CARD */


.image-card{

    padding:35px 25px;

}





/* TESTIMONIAL */


.testimonial-grid{

    grid-template-columns:1fr;

}



.testimonial-card{

    padding:25px;

}





/* RELATED */


.related-grid{

    grid-template-columns:1fr;

}



.related-card{

    padding:30px 20px;

}






/* CLIENTS */


.clients-title{

    font-size:24px;

}



.clients-track span{

    padding:15px 25px;

    font-size:14px;

}







/* CTA */


.final-cta{

    padding:70px 0;

}



.cta-box h2,
.cta-box h2 span{

    font-size:30px;

}



.cta-box p{

    font-size:15px;

}



.cta-buttons{

    flex-direction:column;

}



.cta-buttons a{

    width:100%;

}





/* BLOG */


.blog-grid{

    grid-template-columns:1fr;

}



.blog-card img{

    height:210px;

}





/* POPUP */


.consultation-box{

    padding:25px;

}



.popup-grid{

    grid-template-columns:1fr;

}



.popup-grid .full{

    grid-column:auto;

}




/* FLOAT BUTTON */


.floating-whatsapp,
.floating-call{

    right:15px;

}



.floating-whatsapp a,
.floating-call a{

    width:52px;

    height:52px;

    font-size:22px;

}



.floating-whatsapp{

    bottom:80px;

}



}








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


@media(max-width:480px){



.hero-content h1{

    font-size:27px;

}



.hero-content h1 span{

    font-size:23px;

}



.section-heading h2{

    font-size:24px;

}



.stat-card h2{

    font-size:35px;

}



.service-card h3,
.feature-card h3,
.related-card h3{

    font-size:20px;

}



.cta-box h2,
.cta-box h2 span{

    font-size:25px;

}



.clients-track span{

    padding:12px 18px;

}



.blog-content{

    padding:20px;

}



.blog-content h3{

    font-size:20px;

}



.consultation-box{

    width:95%;

}



.close-popup{

    font-size:28px;

}



}







/* ===============================
   ANIMATION CLASSES
================================ */


.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}



.fade-up.show{

    opacity:1;

    transform:translateY(0);

}





/* Smooth Scroll */


html{

    scroll-behavior:smooth;

}





/* Selection */


::selection{

    background:#0066ff;

    color:white;

}