/* =====================================================
   INDUSTRIAL LICENSING PAGE CSS
   GK CONSULTANCY
   BLUE PREMIUM THEME
===================================================== */


/* ===============================
   ROOT VARIABLES
================================ */

:root{

    --primary-blue:#0b3c78;
    --dark-blue:#06284f;
    --light-blue:#eaf4ff;

    --accent-blue:#1d6fdc;

    --white:#ffffff;

    --text-dark:#1f2937;
    --text-muted:#6b7280;

    --bg-light:#f8fafc;

    --border:#e5e7eb;

    --shadow:
    0 15px 35px rgba(0,0,0,0.08);

}


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

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


body{

    font-family:'Poppins',sans-serif;

    color:var(--text-dark);

    background:#fff;

}


.container{

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

}


.section-pad{

    padding:90px 0;

}


/* ===============================
   SECTION HEADER
================================ */


.section-header{

    text-align:center;

    max-width:800px;

    margin:auto;

    margin-bottom:55px;

}


.section-label{

    display:inline-block;

    color:var(--accent-blue);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:12px;

}


.section-title{

    font-size:38px;

    font-weight:700;

    color:var(--primary-blue);

    line-height:1.3;

}


.section-subtitle{

    margin-top:15px;

    color:var(--text-muted);

    font-size:16px;

    line-height:1.7;

}


.gold-divider{

    width:70px;

    height:3px;

    background:#1d6fdc;

    margin:20px 0;

}


.gold-divider.center{

    margin:20px auto;

}





/* =====================================================
   INTRO SECTION
===================================================== */


.intro-section{

    background:#ffffff;

}



.two-column{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

}




.intro-content p{

    margin-bottom:18px;

    line-height:1.8;

    color:#555;

    font-size:15px;

}




.intro-card{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

    border-top:5px solid var(--accent-blue);

}




.icon-box{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:15px;

    background:var(--light-blue);

    color:var(--accent-blue);

    font-size:30px;

    margin-bottom:25px;

}



.intro-card h3{

    font-size:22px;

    color:var(--primary-blue);

    margin-bottom:25px;

}



.intro-card ul{

    list-style:none;

}



.intro-card li{

    margin-bottom:15px;

    font-size:15px;

    color:#555;

}



.intro-card li i{

    color:#1d6fdc;

    margin-right:10px;

}





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


.services-section{

    background:#f8fafc;

}




.service-grid{

    display:grid;

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

    gap:30px;

}



.service-card{

    background:#fff;

    padding:35px 30px;

    border-radius:18px;

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

    transition:.35s;

    border:1px solid #edf2f7;

}



.service-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 45px rgba(0,70,150,.15);

}




.service-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:#eaf4ff;

    color:#1769d2;

    font-size:28px;

    margin-bottom:25px;

}




.service-card h3{

    font-size:20px;

    color:var(--primary-blue);

    margin-bottom:15px;

}




.service-card p{

    font-size:14px;

    line-height:1.7;

    color:#666;

    margin-bottom:20px;

}



.service-card a{

    text-decoration:none;

    color:#1769d2;

    font-weight:600;

    font-size:14px;

}




.service-card a:hover{

    color:#06284f;

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


.process-section{

    background:#ffffff;

}



.process-grid{

    display:grid;

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

    gap:25px;

}



.process-card{

    position:relative;

    background:#ffffff;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,.07);

    border:1px solid #edf2f7;

    transition:.35s;

    overflow:hidden;

}



.process-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 40px rgba(11,60,120,.15);

}



.process-number{

    position:absolute;

    top:10px;

    right:15px;

    font-size:60px;

    font-weight:800;

    color:

    rgba(29,111,220,.08);

}



.process-card i{

    font-size:35px;

    color:var(--accent-blue);

    margin:25px 0 20px;

}



.process-card h3{

    font-size:19px;

    color:var(--primary-blue);

    margin-bottom:12px;

}



.process-card p{

    font-size:14px;

    color:#64748b;

    line-height:1.7;

}





/* =====================================================
   DOCUMENT SECTION
===================================================== */


.document-section{

    padding:90px 0;

    background:

    linear-gradient(
    135deg,
    #f8fafc,
    #eaf4ff
    );

}



.document-box{

    display:grid;

    grid-template-columns:1fr 450px;

    gap:60px;

    align-items:center;

    background:white;

    padding:50px;

    border-radius:25px;

    box-shadow:var(--shadow);

}




.document-content h2{

    font-size:36px;

    color:var(--primary-blue);

    line-height:1.4;

    margin-bottom:20px;

}



.document-content p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}



.document-list{

    display:grid;

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

    gap:18px;

}



.document-list div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    color:#475569;

}



.document-list i{

    color:var(--accent-blue);

}



.document-image img{

    width:100%;

    border-radius:20px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}





/* =====================================================
   INDUSTRIES SECTION
===================================================== */


.industries-section{

    background:white;

}




.industry-grid{

    display:grid;

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

    gap:25px;

}



.industry-card{

    padding:35px 25px;

    background:white;

    border-radius:18px;

    text-align:center;

    border:1px solid #e2e8f0;

    transition:.35s;

}



.industry-card:hover{

    background:

    linear-gradient(
    135deg,
    var(--primary-blue),
    var(--accent-blue)
    );

    transform:translateY(-8px);

    border-color:transparent;

}



.industry-card i{

    font-size:40px;

    color:var(--accent-blue);

    margin-bottom:18px;

    transition:.3s;

}



.industry-card h3{

    font-size:18px;

    color:var(--primary-blue);

    transition:.3s;

}



.industry-card:hover i,

.industry-card:hover h3{

    color:white;

}





/* =====================================================
   WHY CHOOSE US SECTION
===================================================== */


.why-section{

    padding:90px 0;

    background:

    linear-gradient(
    135deg,
    #06284f,
    #0b3c78
    );

}



.why-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.why-left .section-label{

    color:#E5C971;

}



.why-left h2{

    color:white;

    font-size:38px;

    line-height:1.4;

    margin:20px 0;

}



.why-left p{

    color:

    rgba(255,255,255,.8);

    line-height:1.8;

    font-size:16px;

}



.why-right{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.why-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    border-radius:18px;

    background:

    rgba(255,255,255,.10);

    border:

    1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

}



.why-item i{

    min-width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:white;

    color:var(--primary-blue);

    font-size:25px;

}



.why-item h4{

    color:white;

    font-size:19px;

    margin-bottom:8px;

}



.why-item p{

    color:

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

    font-size:14px;

    margin:0;

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


.related-section{

    background:#f8fafc;

}



.related-grid{

    display:grid;

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

    gap:25px;

}



.related-card{

    background:white;

    padding:30px 22px;

    text-decoration:none;

    border-radius:18px;

    text-align:center;

    border:1px solid #e2e8f0;

    transition:.35s;

}



.related-card:hover{

    transform:translateY(-10px);

    background:

    linear-gradient(
    135deg,
    #0b3c78,
    #1d6fdc
    );

    box-shadow:

    0 20px 40px rgba(11,60,120,.18);

}



.related-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    border-radius:15px;

    background:#eaf4ff;

    color:#1d6fdc;

    font-size:28px;

    transition:.3s;

}



.related-card h4{

    font-size:17px;

    color:var(--primary-blue);

    margin-bottom:12px;

    transition:.3s;

}



.related-card p{

    font-size:13px;

    line-height:1.7;

    color:#64748b;

    transition:.3s;

}



.related-card:hover .related-icon{

    background:white;

}



.related-card:hover h4,

.related-card:hover p{

    color:white;

}





/* =====================================================
   CLIENTS SECTION
===================================================== */


.clients-section{

    padding:80px 0;

    background:white;

    overflow:hidden;

}



.clients-title{

    text-align:center;

    font-size:28px;

    font-weight:700;

    color:var(--primary-blue);

    margin-bottom:45px;

}



.clients-slider{

    width:100%;

    overflow:hidden;

    margin-bottom:25px;

}



.clients-track{

    display:flex;

    width:max-content;

    gap:30px;

    animation:

    clientScroll 25s linear infinite;

}



.clients-track.reverse{

    animation:

    clientScrollReverse 28s linear infinite;

}



.client-item{

    padding:18px 35px;

    background:#f8fafc;

    border-radius:50px;

    border:1px solid #e2e8f0;

    color:#334155;

    font-size:15px;

    font-weight:500;

    white-space:nowrap;

}





@keyframes clientScroll{


from{

    transform:translateX(0);

}


to{

    transform:translateX(-50%);

}


}



@keyframes clientScrollReverse{


from{

    transform:translateX(-50%);

}


to{

    transform:translateX(0);

}


}






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


.final-cta{

    padding:90px 0;

    background:

    linear-gradient(
    135deg,
    #06284f,
    #0b3c78
    );

    text-align:center;

}



.cta-content{

    max-width:800px;

    margin:auto;

}



.cta-content .section-label{

    color:#E5C971;

}



.cta-content h2{

    color:white;

    font-size:42px;

    line-height:1.3;

    margin:20px 0;

}



.cta-content h2 span{

    color:#E5C971;

}



.cta-content p{

    color:

    rgba(255,255,255,.8);

    font-size:16px;

    line-height:1.8;

    margin-bottom:35px;

}




.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}



.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 30px;

    border-radius:50px;

    background:#1d6fdc;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.btn-primary:hover{

    background:white;

    color:#0b3c78;

}




.btn-outline{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 30px;

    border-radius:50px;

    border:2px solid white;

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.btn-outline:hover{

    background:white;

    color:#0b3c78;

}





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


.blog-section{

    background:#f8fafc;

}



.blog-grid{

    display:grid;

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

    gap:30px;

}



.blog-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:

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

    transition:.35s;

}



.blog-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 40px rgba(11,60,120,.15);

}



.blog-image{

    width:100%;

    height:230px;

    object-fit:cover;

}



.blog-body{

    padding:30px;

}



.blog-tag{

    color:#1d6fdc;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}



.blog-body h3{

    font-size:20px;

    color:var(--primary-blue);

    margin:15px 0;

    line-height:1.4;

}



.blog-body p{

    color:#64748b;

    font-size:14px;

    line-height:1.7;

    margin-bottom:20px;

}



.blog-body a{

    text-decoration:none;

    color:#1d6fdc;

    font-weight:600;

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


.consultation-popup{

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,.65);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;

    padding:20px;

}



.consultation-popup.active{

    display:flex;

}




.consultation-box{

    width:100%;

    max-width:650px;

    background:white;

    border-radius:25px;

    padding:40px;

    position:relative;

    animation:

    popupShow .35s ease;

    max-height:90vh;

    overflow-y:auto;

}




@keyframes popupShow{


from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}




.close-consultation{

    position:absolute;

    right:25px;

    top:20px;

    width:35px;

    height:35px;

    border-radius:50%;

    background:#eaf4ff;

    color:#0b3c78;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    cursor:pointer;

}



.consultation-box h2{

    color:#0b3c78;

    font-size:30px;

    margin-bottom:10px;

}



.consultation-box p{

    color:#64748b;

    margin-bottom:25px;

}





/* ===============================
   FORM DESIGN
================================ */


.form-group{

    margin-bottom:20px;

}



.form-group label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#334155;

    margin-bottom:8px;

}



.form-group input,

.form-group select,

.form-group textarea{


    width:100%;

    padding:14px 16px;

    border-radius:10px;

    border:1px solid #dbe3ee;

    outline:none;

    font-family:Poppins,sans-serif;

    transition:.3s;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#1d6fdc;

    box-shadow:

    0 0 0 3px rgba(29,111,220,.12);

}



.form-group textarea{

    resize:none;

}





.form-submit{

    width:100%;

    padding:15px;

    border:none;

    border-radius:50px;

    background:

    linear-gradient(
    135deg,
    #0b3c78,
    #1d6fdc
    );

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}



.form-submit:hover{

    transform:translateY(-3px);

    box-shadow:

    0 10px 25px rgba(29,111,220,.3);

}





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


.floating-wa{

    position:fixed;

    right:25px;

    bottom:100px;

    z-index:999;

}



.floating-wa a{


width:65px;

height:65px;

display:flex;

align-items:center;

justify-content:center;

background:#25D366;

border-radius:50%;

color:white;

font-size:32px;

text-decoration:none;

box-shadow:

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

transition:.3s;

}



.floating-wa a:hover{

    transform:scale(1.1);

}





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


.floating-call{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:999;

}



.floating-call a{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b3c78;

    color:white;

    border-radius:50%;

    font-size:25px;

    text-decoration:none;

    box-shadow:

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

    transition:.3s;

}



.floating-call a:hover{

    background:#1d6fdc;

    transform:scale(1.1);

}





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


@media(max-width:992px){


.two-column,

.document-box,

.why-wrapper{

    grid-template-columns:1fr;

}



.service-grid{

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

}



.process-grid{

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

}



.industry-grid{

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

}



.related-grid{

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

}



.blog-grid{

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

}



.document-image{

    order:-1;

}



}





@media(max-width:768px){


.section-pad{

    padding:60px 0;

}



.section-title{

    font-size:28px;

}



.two-column{

    gap:30px;

}



.intro-card{

    padding:25px;

}



.service-grid,

.process-grid,

.industry-grid,

.related-grid,

.blog-grid{

    grid-template-columns:1fr;

}



.service-card{

    padding:30px 22px;

}



.document-box{

    padding:25px;

}



.document-content h2{

    font-size:28px;

}



.document-list{

    grid-template-columns:1fr;

}



.why-left h2{

    font-size:30px;

}



.cta-content h2{

    font-size:30px;

}



.cta-buttons{

    flex-direction:column;

}



.btn-primary,

.btn-outline{

    justify-content:center;

}



.clients-title{

    font-size:22px;

}



.client-item{

    padding:15px 25px;

    font-size:13px;

}



.consultation-box{

    padding:25px;

}



.consultation-box h2{

    font-size:24px;

}



.floating-wa a,

.floating-call a{

    width:55px;

    height:55px;

    font-size:22px;

}



.floating-wa{

    right:18px;

    bottom:90px;

}



.floating-call{

    right:18px;

    bottom:25px;

}



}




@media(max-width:480px){


.container{

    width:92%;

}



.section-title{

    font-size:25px;

}



.process-card,

.service-card{

    padding:25px 18px;

}



.why-item{

    flex-direction:column;

    text-align:center;

}



.document-box{

    padding:20px;

}



}