/*==========================
LEGAL HERO
==========================*/

.qm-legal-hero{

    width:100%;
    background:#ffffff;
    padding:80px 20px;
    text-align:center;

}

.qm-legal-hero .container{

    max-width:1200px;
    margin:0 auto;

}

.qm-legal-hero h1{

    font-size:58px;
    color:#002060;
    margin:0;

    font-weight:700;

}

.qm-legal-hero h3{

    margin-top:18px;
    color:#c62828;
    font-size:24px;
    font-weight:600;

}

.qm-hero-divider{

    width:650px;
    height:4px;
    background:#d4a017;

    margin:30px auto;

}

.qm-legal-hero p{

    max-width:1000px;
    margin:auto;

    font-size:20px;

    color:#555;

    line-height:38px;

}
/* Intro */

.qm-legal-intro{
padding:70px 0;
background:#fff;
text-align:center;
}

.qm-legal-intro h2{
font-size:48px;
color:#000e36;
margin-bottom:20px;
}

.qm-legal-intro p{
max-width:1100px;
margin:auto;
font-size:20px;
line-height:36px;
color:#555;
}

/* Services */

.qm-services-list{
padding:20px 0;
}

.qm-services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.qm-service-box{
background:#fff;
padding:35px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,5,.20);
text-align:center;
transition:.35s;
}

.qm-service-box:hover{
transform:translateY(-8px);
}

.qm-service-box img{
width:170px;
margin-bottom:20px;
}

.qm-service-box h3{
color:#000e36;
margin-bottom:20px;
font-size:28px;
}

.qm-service-box ul{
padding:0;
margin:0 0 25px;
list-style:none;
}

.qm-service-box li{
padding:8px 0;
font-size:17px;
color:#030000;
}

.qm-service-box a{
display:inline-block;
padding:12px 30px;
background:#c79a1b;
color:#fff;
text-decoration:none;
border-radius:6px;
font-weight:600;
}

.qm-service-box a:hover{
background:#000e36;
}

/*==================================
PART 2
==================================*/

.qm-legal-why{

padding:30px 0;
background:#ffffff;

}

.qm-legal-why-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;

}

.qm-legal-why-card{

background:#ffffff;
padding:15px;
text-align:center;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.35s;

}

.qm-legal-why-card:hover{

transform:translateY(-8px);

}

.qm-legal-why-card img{

width:90px;
margin-bottom:20px;

}

.qm-legal-why-card h3{

font-size:24px;
color:#000e36;

}

/* Process */

.qm-process{

padding:20px 0;
background:#f4f6fb;

}

.qm-process-grid{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:25px;

}

.qm-step{

text-align:center;

}

.qm-step-number{

width:70px;
height:70px;
background:#c79a1b;
color:#fff;
border-radius:50%;
margin:auto;
line-height:70px;
font-size:28px;
font-weight:bold;
margin-bottom:20px;

}

.qm-step h3{

font-size:22px;
color:#000e36;

}
/*======================================================
QANOON MARKAZ
LEGAL SERVICES
PART 3
WHY CHOOSE + CTA + RESPONSIVE
======================================================*/


/*=========================================
WHY CHOOSE
=========================================*/

.qm-service-why{

    padding:80px 0;
    background:#ffffff;

}

.qm-service-why-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:50px;

}

.qm-service-why-box{

    background:#fff;
    text-align:center;
    padding:35px 20px;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
    border-top:5px solid #e0a800;

}

.qm-service-why-box:hover{

    background:#000e36;
    transform:translateY(-8px);

}

.qm-service-why-box img{

    width:85px;
    height:85px;
    object-fit:contain;
    margin-bottom:20px;

}

.qm-service-why-box h3{

    color:#000e36;
    font-size:22px;
    transition:.35s;

}

.qm-service-why-box:hover h3{

    color:#fff;

}

.qm-service-why-box p{

    color:#666;
    line-height:30px;
    margin-top:15px;
    transition:.35s;

}

.qm-service-why-box:hover p{

    color:#eee;

}


/*=========================================
CALL TO ACTION
=========================================*/

.qm-service-contact{

    background:#000e36;
    color:#fff;
    padding:70px 0;
    text-align:center;

}

.qm-service-contact h2{

    font-size:42px;
    margin-bottom:20px;

}

.qm-service-contact p{

    max-width:900px;
    margin:auto;
    font-size:20px;
    line-height:36px;
    margin-bottom:35px;

}

.qm-service-contact .qm-btn{

    display:inline-block;
    background:#e0a800;
    color:#fff;
    padding:15px 38px;
    text-decoration:none;
    border-radius:6px;
    font-weight:600;
    transition:.3s;

}

.qm-service-contact .qm-btn:hover{

    background:#bf8d00;

}


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

.qm-service-box,
.qm-service-why-box{

    opacity:1;
    transform:none;

}

.qm-show{

    opacity:1 !important;
    transform:translateY(0) !important;

}


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

@media(max-width:1200px){

.qm-services-grid{

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

}

.qm-service-why-grid{

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

}

}


@media(max-width:768px){

.qm-services-grid{

grid-template-columns:1fr;

}

.qm-service-why-grid{

grid-template-columns:1fr;

}

.qm-service-contact h2{

font-size:32px;

}

.qm-service-contact p{

font-size:18px;
line-height:30px;

}

}
/* ==========================================================
   QANOON MARKAZ — LEGAL SERVICES
   FINAL RESPONSIVE FIX
   Desktop remains unchanged
   ========================================================== */


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

@media (max-width: 1200px) {

    /* LEGAL HERO */

    .qm-legal-hero {
        padding: 65px 25px;
    }

    .qm-legal-hero h1 {
        font-size: 48px;
    }

    .qm-hero-divider {
        width: 70%;
        max-width: 650px;
    }

    .qm-legal-hero p {
        font-size: 18px;
        line-height: 32px;
    }


    /* INTRO */

    .qm-legal-intro {
        padding: 55px 25px;
    }

    .qm-legal-intro h2 {
        font-size: 40px;
    }

    .qm-legal-intro p {
        font-size: 18px;
        line-height: 32px;
    }


    /* SERVICES */

    .qm-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .qm-service-box {
        padding: 30px 22px;
    }


    /* WHY */

    .qm-legal-why {
        padding: 40px 25px;
    }

    .qm-legal-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }


    /* PROCESS */

    .qm-process {
        padding: 35px 25px;
    }

    .qm-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px;
    }


    /* SERVICE WHY */

    .qm-service-why {
        padding: 65px 25px;
    }

    .qm-service-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

}


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

@media (max-width: 768px) {

    /* ======================================================
       LEGAL HERO
       ====================================================== */

    .qm-legal-hero {
        padding: 45px 18px;
        box-sizing: border-box;
    }

    .qm-legal-hero .container {
        width: 100%;
        max-width: 100%;
    }

    .qm-legal-hero h1 {
        font-size: 34px;
        line-height: 1.25;
    }

    .qm-legal-hero h3 {
        margin-top: 12px;
        font-size: 19px;
        line-height: 1.4;
    }

    .qm-hero-divider {
        width: 80%;
        max-width: 350px;
        height: 3px;
        margin: 22px auto;
    }

    .qm-legal-hero p {
        width: 100%;
        font-size: 16px;
        line-height: 27px;
    }


    /* ======================================================
       LEGAL INTRO
       ====================================================== */

    .qm-legal-intro {
        padding: 45px 18px;
        box-sizing: border-box;
    }

    .qm-legal-intro h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    .qm-legal-intro p {
        width: 100%;
        font-size: 16px;
        line-height: 27px;
    }


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

    .qm-services-list {
        padding: 25px 15px 45px;
        box-sizing: border-box;
    }

    .qm-services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }

    .qm-service-box {
        width: 100%;
        box-sizing: border-box;
        padding: 28px 20px;
    }

    .qm-service-box img {
        width: 130px;
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .qm-service-box h3 {
        font-size: 23px;
        line-height: 1.35;
        margin-bottom: 15px;
    }

    .qm-service-box li {
        font-size: 16px;
        line-height: 26px;
    }

    .qm-service-box a {
        padding: 11px 25px;
    }


    /* ======================================================
       WHY LEGAL SERVICES
       ====================================================== */

    .qm-legal-why {
        padding: 45px 15px;
        box-sizing: border-box;
    }

    .qm-legal-why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        width: 100%;
    }

    .qm-legal-why-card {
        width: 100%;
        box-sizing: border-box;
        padding: 25px 20px;
    }

    .qm-legal-why-card img {
        width: 75px;
        height: auto;
        margin-bottom: 15px;
    }

    .qm-legal-why-card h3 {
        font-size: 21px;
        line-height: 28px;
    }


    /* ======================================================
       PROCESS
       ====================================================== */

    .qm-process {
        padding: 45px 15px;
        box-sizing: border-box;
    }

    .qm-process-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .qm-step-number {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        margin-bottom: 15px;
    }

    .qm-step h3 {
        font-size: 20px;
        line-height: 28px;
    }


    /* ======================================================
       WHY CHOOSE
       ====================================================== */

    .qm-service-why {
        padding: 50px 15px;
        box-sizing: border-box;
    }

    .qm-service-why-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        width: 100%;
        margin-top: 30px;
    }

    .qm-service-why-box {
        width: 100%;
        box-sizing: border-box;
        padding: 28px 20px;
    }

    .qm-service-why-box img {
        width: 75px;
        height: 75px;
        margin-bottom: 15px;
    }

    .qm-service-why-box h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .qm-service-why-box p {
        font-size: 15px;
        line-height: 26px;
    }


    /* ======================================================
       CALL TO ACTION
       ====================================================== */

    .qm-service-contact {
        padding: 50px 18px;
        box-sizing: border-box;
    }

    .qm-service-contact h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    .qm-service-contact p {
        width: 100%;
        font-size: 16px;
        line-height: 27px;
        margin-bottom: 25px;
    }

    .qm-service-contact .qm-btn {
        padding: 13px 28px;
    }

}


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

@media (max-width: 400px) {

    .qm-legal-hero {
        padding: 35px 14px;
    }

    .qm-legal-hero h1 {
        font-size: 29px;
    }

    .qm-legal-hero h3 {
        font-size: 17px;
    }

    .qm-hero-divider {
        width: 85%;
        margin: 18px auto;
    }

    .qm-legal-hero p {
        font-size: 15px;
        line-height: 25px;
    }

    .qm-legal-intro h2 {
        font-size: 27px;
    }

    .qm-service-box {
        padding: 24px 16px;
    }

    .qm-service-box h3 {
        font-size: 21px;
    }

    .qm-service-box li {
        font-size: 15px;
    }

    .qm-service-why-box {
        padding: 24px 16px;
    }

}