/*==================================================
        SERVICE DETAILS SECTION
        PREMIUM COMPACT VERSION
        PART - 1
==================================================*/

.service-details-section-mg{

    position:relative;

    width:100%;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}

.service-details-section-mg .container-mg{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 15px;

}


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

.service-details-wrapper-mg{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:24px;

    align-items:flex-start;

}



/*==========================================
            SIDEBAR
==========================================*/

.service-sidebar-mg{

    width:100%;

    position:sticky;

    top:110px;

}



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

.service-sidebar-title-mg{

    font-size:28px;

    font-weight:800;

    line-height:1.2;

    color:#151515;

    margin-bottom:22px;

    letter-spacing:-.4px;

}



/*==========================================
            CATEGORY LIST
==========================================*/

.service-category-list-mg{

    list-style:none;

    padding:0;

    margin:0;

}



/*==========================================
            LIST ITEM
==========================================*/

.service-category-list-mg li{

    margin-bottom:12px;

}

.service-category-list-mg li:last-child{

    margin-bottom:0;

}



/*==========================================
            CATEGORY CARD
==========================================*/

.service-category-item-mg{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    min-height:72px;

    padding:0 22px;

    text-decoration:none;

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:8px;

    overflow:hidden;

    transition:.35s ease;

}



/*==========================================
        LEFT BORDER
==========================================*/

.service-category-item-mg::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:#b83330;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}



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

.service-category-item-mg span{

    font-size:16px;

    font-weight:700;

    line-height:1.45;

    color:#171717;

    transition:.35s;

}



/*==========================================
            ICON
==========================================*/

.service-category-item-mg i{

    font-size:15px;

    color:#999;

    transition:.35s;

}



/*==========================================
            ACTIVE
==========================================*/

.service-category-item-mg.active-mg{

    background:#b83330;

    border-color:#b83330;

    box-shadow:

    0 10px 28px rgba(184,51,48,.18);

}

.service-category-item-mg.active-mg span{

    color:#ffffff;

}

.service-category-item-mg.active-mg i{

    color:#ffffff;

    transform:translateX(4px);

}

.service-category-item-mg.active-mg::before{

    transform:scaleY(1);

}



/*==========================================
            HOVER
==========================================*/

.service-category-item-mg:hover{

    background:#b83330;

    border-color:#b83330;

    transform:translateY(-2px);

    box-shadow:

    0 10px 28px rgba(184,51,48,.18);

}

.service-category-item-mg:hover span{

    color:#ffffff;

}

.service-category-item-mg:hover i{

    color:#ffffff;

    transform:translateX(4px);

}

.service-category-item-mg:hover::before{

    transform:scaleY(1);

}

/*==================================================
        SERVICE DETAILS
        RIGHT CONTENT
        PREMIUM COMPACT VERSION
        PART - 2
==================================================*/


/*==========================================
            RIGHT SIDE
==========================================*/

.service-content-mg{

    width:100%;

}



/*==========================================
            IMAGE BOX
==========================================*/

.service-image-box-mg{

    position:relative;

    width:100%;

    height:440px;

    overflow:hidden;

    border-radius:10px;

    background:#f4f4f4;

    box-shadow:

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

}



/*==========================================
            IMAGE
==========================================*/

.service-image-box-mg img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:1s ease;

}



/*==========================================
        IMAGE OVERLAY
==========================================*/

.service-image-box-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.04),

        rgba(0,0,0,.04)

    );

    opacity:0;

    transition:.4s;

    z-index:2;

}



/*==========================================
        IMAGE HOVER
==========================================*/

.service-image-box-mg:hover img{

    transform:scale(1.05);

}

.service-image-box-mg:hover::before{

    opacity:1;

}



/*==========================================
        IMAGE SHADOW
==========================================*/

.service-image-box-mg{

    transition:.35s;

}

.service-image-box-mg:hover{

    box-shadow:

    0 20px 45px rgba(0,0,0,.12);

}



/*==========================================
        IMAGE BORDER
==========================================*/

.service-image-box-mg::after{

    content:"";

    position:absolute;

    inset:0;

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

    border-radius:10px;

    pointer-events:none;

}



/*==========================================
        CONTENT SPACING
==========================================*/

.service-content-mg>*+*{

    margin-top:22px;

}



/*==========================================
        SMOOTH
==========================================*/

.service-image-box-mg,

.service-image-box-mg img,

.service-image-box-mg::before{

    transition:all .35s ease;

}

/*==================================================
        SERVICE DETAILS
        RESPONSIVE
        PREMIUM COMPACT VERSION
        PART - 3
==================================================*/


/*==========================================
        LARGE LAPTOP
==========================================*/

@media (max-width:1200px){

    .service-details-section-mg{

        padding:60px 0;

    }

    .service-details-wrapper-mg{

        grid-template-columns:280px 1fr;

        gap:20px;

    }

    .service-sidebar-title-mg{

        font-size:26px;

        margin-bottom:20px;

    }

    .service-category-item-mg{

        min-height:68px;

        padding:0 18px;

    }

    .service-category-item-mg span{

        font-size:15px;

    }

    .service-category-item-mg i{

        font-size:14px;

    }

    .service-image-box-mg{

        height:400px;

    }

}



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

@media (max-width:992px){

    .service-details-section-mg{

        padding:55px 0;

    }

    .service-details-wrapper-mg{

        grid-template-columns:1fr;

        gap:28px;

    }

    .service-sidebar-mg{

        position:relative;

        top:0;

    }

    .service-sidebar-title-mg{

        text-align:center;

        font-size:28px;

    }

    .service-category-list-mg{

        display:grid;

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

        gap:12px;

    }

    .service-category-list-mg li{

        margin:0;

    }

    .service-category-item-mg{

        min-height:66px;

    }

    .service-image-box-mg{

        height:380px;

    }

}



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

@media (max-width:768px){

    .service-details-section-mg{

        padding:45px 0;

    }

    .service-sidebar-title-mg{

        font-size:24px;

        margin-bottom:18px;

    }

    .service-category-list-mg{

        grid-template-columns:1fr;

        gap:10px;

    }

    .service-category-item-mg{

        min-height:62px;

        padding:0 16px;

        border-radius:8px;

    }

    .service-category-item-mg span{

        font-size:15px;

    }

    .service-category-item-mg i{

        font-size:14px;

    }

    .service-image-box-mg{

        height:320px;

        border-radius:8px;

    }

}



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

@media (max-width:576px){

    .service-details-section-mg{

        padding:40px 0;

    }

    .service-details-section-mg .container-mg{

        padding:0 12px;

    }

    .service-sidebar-title-mg{

        font-size:22px;

        margin-bottom:16px;

    }

    .service-category-item-mg{

        min-height:58px;

        padding:0 15px;

    }

    .service-category-item-mg span{

        font-size:14px;

        line-height:1.4;

    }

    .service-category-item-mg i{

        font-size:13px;

    }

    .service-image-box-mg{

        height:260px;

    }

}



/*==========================================
        EXTRA SMALL
==========================================*/

@media (max-width:420px){

    .service-details-section-mg{

        padding:35px 0;

    }

    .service-sidebar-title-mg{

        font-size:20px;

    }

    .service-category-item-mg{

        min-height:54px;

        padding:0 14px;

    }

    .service-category-item-mg span{

        font-size:13px;

    }

    .service-category-item-mg i{

        font-size:12px;

    }

    .service-image-box-mg{

        height:220px;

    }

}



































































/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 1
=========================================================*/

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

.service-details-section-mg{

    position:relative;
    width:100%;
    padding:60px 0;
    background:#fff;
    overflow:hidden;

}

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

.service-details-section-mg .container-mg{

    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;

}

/*=========================================
            MAIN WRAPPER
=========================================*/

.service-details-wrapper-mg{

    display:grid;
    grid-template-columns:290px 1fr;
    gap:24px;
    align-items:start;

}

/*=========================================
            SIDEBAR
=========================================*/

.service-sidebar-mg{

    position:sticky;
    top:110px;
    width:100%;

}

/*=========================================
        SIDEBAR TITLE
=========================================*/

.service-sidebar-title-mg{

    font-size:24px;
    font-weight:700;
    color:#111;
    line-height:1.3;
    margin-bottom:20px;

}

/*=========================================
        CATEGORY LIST
=========================================*/

.service-category-list-mg{

    list-style:none;
    margin:0;
    padding:0;

}

.service-category-list-mg li{

    margin-bottom:10px;

}

.service-category-list-mg li:last-child{

    margin-bottom:0;

}

/*=========================================
        CATEGORY ITEM
=========================================*/

.service-category-item-mg{

    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:66px;

    padding:0 20px;

    text-decoration:none;

    background:#fff;

    border:1px solid #ececec;

    border-radius:8px;

    overflow:hidden;

    transition:.35s ease;

}

/* Left Border */

.service-category-item-mg::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:#b83330;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

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

.service-category-item-mg span{

    font-size:15px;
    font-weight:600;
    line-height:1.45;
    color:#222;
    transition:.35s;

}

/*=========================================
            ICON
=========================================*/

.service-category-item-mg i{

    font-size:14px;
    color:#999;
    transition:.35s;

}

/*=========================================
            ACTIVE
=========================================*/

.service-category-item-mg.active-mg{

    background:#b83330;
    border-color:#b83330;
    box-shadow:0 12px 30px rgba(184,51,48,.18);

}

.service-category-item-mg.active-mg::before{

    transform:scaleY(1);

}

.service-category-item-mg.active-mg span,
.service-category-item-mg.active-mg i{

    color:#fff;

}

.service-category-item-mg.active-mg i{

    transform:translateX(4px);

}

/*=========================================
            HOVER
=========================================*/

.service-category-item-mg:hover{

    background:#b83330;
    border-color:#b83330;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(184,51,48,.18);

}

.service-category-item-mg:hover::before{

    transform:scaleY(1);

}

.service-category-item-mg:hover span,
.service-category-item-mg:hover i{

    color:#fff;

}

.service-category-item-mg:hover i{

    transform:translateX(4px);

}

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

@media(max-width:1200px){

    .service-details-wrapper-mg{

        grid-template-columns:270px 1fr;

        gap:20px;

    }

}

@media(max-width:992px){

    .service-details-wrapper-mg{

        grid-template-columns:1fr;

    }

    .service-sidebar-mg{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .service-details-section-mg{

        padding:45px 0;

    }

    .service-sidebar-title-mg{

        font-size:22px;

    }

    .service-category-item-mg{

        min-height:60px;

        padding:0 18px;

    }

    .service-category-item-mg span{

        font-size:14px;

    }

}

@media(max-width:576px){

    .service-details-section-mg{

        padding:40px 0;

    }

    .service-details-section-mg .container-mg{

        padding:0 12px;

    }

    .service-sidebar-title-mg{

        font-size:20px;

    }

    .service-category-item-mg{

        min-height:56px;

        padding:0 16px;

    }

}

@media(max-width:420px){

    .service-sidebar-title-mg{

        font-size:18px;

    }

    .service-category-item-mg{

        min-height:52px;

    }

    .service-category-item-mg span{

        font-size:13px;

    }

    .service-category-item-mg i{

        font-size:12px;

    }

}

/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 2
            HELP • CONTACT • DOWNLOAD
=========================================================*/


/*=========================================
            HELP BOX
=========================================*/

.service-help-box-mg{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    padding:22px;

    margin-bottom:22px;

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

    transition:.35s;

}

.service-help-box-mg:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}



/*=========================================
            PARAGRAPH
=========================================*/

.service-help-box-mg p{

    margin:0 0 20px;

    font-size:14px;

    line-height:1.8;

    color:#666;

}



/*=========================================
            CONTACT LIST
=========================================*/

.service-contact-list-mg{

    list-style:none;

    margin:0;

    padding:0;

}



/*=========================================
            CONTACT ITEM
=========================================*/

.service-contact-list-mg li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:15px 0;

    border-bottom:1px solid #efefef;

}

.service-contact-list-mg li:last-child{

    border-bottom:none;

    padding-bottom:0;

}



/*=========================================
            ICON
=========================================*/

.service-contact-list-mg i{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fcf3f2;

    color:#b83330;

    font-size:15px;

    transition:.35s;

}

.service-contact-list-mg li:hover i{

    background:#b83330;

    color:#ffffff;

}



/*=========================================
        CONTACT CONTENT
=========================================*/

.service-contact-list-mg strong{

    display:block;

    margin-bottom:4px;

    font-size:14px;

    font-weight:700;

    color:#111;

}

.service-contact-list-mg span{

    display:block;

    font-size:13px;

    line-height:1.7;

    color:#777;

}



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

.service-social-mg{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.service-social-mg a{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#f7f7f7;

    color:#222;

    transition:.35s;

}

.service-social-mg a:hover{

    background:#b83330;

    color:#fff;

    transform:translateY(-3px);

}



/*=========================================
            DOWNLOAD BOX
=========================================*/

.service-download-box-mg{

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    padding:22px;

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

    transition:.35s;

}

.service-download-box-mg:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}



/*=========================================
        DOWNLOAD TEXT
=========================================*/

.service-download-box-mg p{

    margin:0 0 20px;

    font-size:14px;

    line-height:1.8;

    color:#666;

}



/*=========================================
        DOWNLOAD CARD
=========================================*/

.download-card-mg{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    margin-top:14px;

    text-decoration:none;

    border:1px solid #ededed;

    border-radius:8px;

    transition:.35s;

}

.download-card-mg:hover{

    border-color:#b83330;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(184,51,48,.12);

}



/*=========================================
        PDF ICON
=========================================*/

.download-icon-mg{

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fcf3f2;

    color:#b83330;

    font-size:20px;

    transition:.35s;

}

.download-card-mg:hover .download-icon-mg{

    background:#b83330;

    color:#fff;

}



/*=========================================
        DOWNLOAD INFO
=========================================*/

.download-info-mg{

    flex:1;

}

.download-info-mg h5{

    margin:0 0 5px;

    font-size:15px;

    font-weight:700;

    color:#111;

}

.download-info-mg span{

    display:block;

    font-size:12px;

    color:#777;

}



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

@media(max-width:768px){

    .service-help-box-mg,

    .service-download-box-mg{

        padding:20px;

    }

    .download-card-mg{

        padding:13px;

    }

}

@media(max-width:576px){

    .service-help-box-mg,

    .service-download-box-mg{

        padding:18px;

        border-radius:8px;

    }

    .service-contact-list-mg li{

        gap:12px;

        padding:14px 0;

    }

    .service-contact-list-mg i{

        width:36px;

        height:36px;

        font-size:14px;

    }

    .service-social-mg{

        gap:8px;

    }

    .service-social-mg a{

        width:35px;

        height:35px;

    }

    .download-icon-mg{

        width:46px;

        height:46px;

        font-size:18px;

    }

}

/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 3
            CONTENT • IMAGE
=========================================================*/


/*=========================================
            RIGHT CONTENT
=========================================*/

.service-content-mg{

    width:100%;

}



/*=========================================
            HEADING
=========================================*/

.service-heading-mg{

    margin-bottom:16px;

}

.service-heading-mg h2{

    font-size:38px;

    font-weight:800;

    line-height:1.2;

    color:#111111;

    letter-spacing:-.5px;

}



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

.service-description-mg{

    margin-bottom:35px;

}

.service-description-mg p{

    font-size:15px;

    line-height:1.9;

    color:#666666;

    margin-bottom:18px;

}

.service-description-mg p:last-child{

    margin-bottom:0;

}



/*=========================================
            IMAGE BOX
=========================================*/

.service-image-box-mg{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:12px;

    background:#f7f7f7;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}



/*=========================================
            IMAGE
=========================================*/

.service-image-box-mg img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:transform .8s ease;

}



/*=========================================
            OVERLAY
=========================================*/

.service-image-box-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.03),

        rgba(0,0,0,.12)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}



/*=========================================
            BORDER
=========================================*/

.service-image-box-mg::after{

    content:"";

    position:absolute;

    inset:0;

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

    border-radius:12px;

    pointer-events:none;

    z-index:3;

}



/*=========================================
            HOVER
=========================================*/

.service-image-box-mg:hover img{

    transform:scale(1.06);

}

.service-image-box-mg:hover::before{

    opacity:1;

}

.service-image-box-mg:hover{

    box-shadow:0 22px 55px rgba(0,0,0,.12);

}



/*=========================================
        CONTENT SPACING
=========================================*/

.service-content-mg>*{

    width:100%;

}

.service-content-mg>*+*{

    margin-top:22px;

}



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

@media(max-width:1200px){

    .service-heading-mg h2{

        font-size:34px;

    }

    .service-image-box-mg{

        height:390px;

    }

}

@media(max-width:992px){

    .service-heading-mg{

        margin-top:5px;

    }

    .service-heading-mg h2{

        font-size:32px;

    }

    .service-image-box-mg{

        height:360px;

    }

}

@media(max-width:768px){

    .service-heading-mg h2{

        font-size:28px;

    }

    .service-description-mg{

        margin-bottom:28px;

    }

    .service-description-mg p{

        font-size:14px;

    }

    .service-image-box-mg{

        height:300px;

        border-radius:10px;

    }

}

@media(max-width:576px){

    .service-heading-mg h2{

        font-size:24px;

        line-height:1.3;

    }

    .service-image-box-mg{

        height:260px;

    }

}

@media(max-width:420px){

    .service-heading-mg h2{

        font-size:22px;

    }

    .service-image-box-mg{

        height:220px;

        border-radius:8px;

    }

}

/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 4
            PROGRESS CARDS
=========================================================*/


/*=========================================
        PROGRESS WRAPPER
=========================================*/

.service-progress-wrapper-mg{

    display:grid;

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

    gap:22px;

    margin:45px 0 60px;

}



/*=========================================
        PROGRESS CARD
=========================================*/

.progress-card-mg{

    position:relative;

    background:#ffffff;

    border:1px solid #ededed;

    border-radius:12px;

    padding:26px 20px;

    text-align:center;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 8px 25px rgba(0,0,0,.05);

}

.progress-card-mg::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:#b83330;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.progress-card-mg:hover{

    transform:translateY(-5px);

    border-color:#b83330;

    box-shadow:

    0 18px 45px rgba(184,51,48,.14);

}

.progress-card-mg:hover::before{

    transform:scaleX(1);

}



/*=========================================
        CIRCLE WRAPPER
=========================================*/

.circle-progress-mg{

    position:relative;

    width:135px;

    height:135px;

    margin:0 auto 18px;

}



/*=========================================
            SVG
=========================================*/

.circle-progress-mg svg{

    width:135px;

    height:135px;

    transform:rotate(-90deg);

}



/*=========================================
        COMMON CIRCLE
=========================================*/

.circle-progress-mg circle{

    fill:none;

    stroke-width:8;

}



/*=========================================
        BACKGROUND CIRCLE
=========================================*/

.bg-circle-mg{

    stroke:#ececec;

}



/*=========================================
        PROGRESS CIRCLE
=========================================*/

.progress-circle-mg{

    stroke:#b83330;

    stroke-linecap:round;

    stroke-dasharray:345.58;

    stroke-dashoffset:345.58;

    transition:

    stroke-dashoffset 2s ease,

    filter .35s ease;

}



/*=========================================
        NUMBER
=========================================*/

.progress-number-mg{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    color:#111;

}

.progress-number-mg span{

    font-size:34px;

    font-weight:800;

    line-height:1;

}



/*=========================================
        CARD TITLE
=========================================*/

.progress-card-mg h4{

    font-size:20px;

    font-weight:700;

    color:#111;

    margin-top:8px;

}



/*=========================================
        CARD TEXT
=========================================*/

.progress-card-mg p{

    margin-top:10px;

    font-size:14px;

    line-height:1.7;

    color:#777;

}



/*=========================================
        HOVER EFFECT
=========================================*/

.progress-card-mg:hover .progress-number-mg{

    color:#b83330;

}

.progress-card-mg:hover .progress-circle-mg{

    filter:drop-shadow(0 0 8px rgba(184,51,48,.45));

}



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

@media(max-width:1200px){

    .service-progress-wrapper-mg{

        gap:18px;

    }

    .progress-card-mg{

        padding:24px 16px;

    }

    .circle-progress-mg{

        width:125px;

        height:125px;

    }

    .circle-progress-mg svg{

        width:125px;

        height:125px;

    }

    .progress-number-mg span{

        font-size:30px;

    }

}



@media(max-width:992px){

    .service-progress-wrapper-mg{

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

        gap:15px;

    }

    .progress-card-mg h4{

        font-size:18px;

    }

}



@media(max-width:768px){

    .service-progress-wrapper-mg{

        grid-template-columns:1fr;

        gap:18px;

        margin:35px 0 45px;

    }

    .progress-card-mg{

        padding:22px 15px;

    }

    .circle-progress-mg{

        width:115px;

        height:115px;

    }

    .circle-progress-mg svg{

        width:115px;

        height:115px;

    }

    .progress-number-mg span{

        font-size:28px;

    }

    .progress-card-mg h4{

        font-size:17px;

    }

}



@media(max-width:576px){

    .circle-progress-mg{

        width:105px;

        height:105px;

    }

    .circle-progress-mg svg{

        width:105px;

        height:105px;

    }

    .progress-number-mg{

        font-size:18px;

    }

    .progress-number-mg span{

        font-size:24px;

    }

}



@media(max-width:420px){

    .progress-card-mg{

        padding:20px 14px;

    }

    .circle-progress-mg{

        width:95px;

        height:95px;

    }

    .circle-progress-mg svg{

        width:95px;

        height:95px;

    }

    .progress-number-mg span{

        font-size:22px;

    }

    .progress-card-mg h4{

        font-size:16px;

    }

}




/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 5
            CONSIDERABLE FACTS
=========================================================*/


/*=========================================
        FACTS SECTION
=========================================*/

.considerable-section-mg{

    display:grid;

    grid-template-columns:1fr 390px;

    gap:35px;

    align-items:center;

    margin:60px 0;

}



/*=========================================
        LEFT CONTENT
=========================================*/

.considerable-content-mg{

    width:100%;

}

.considerable-content-mg h2{

    font-size:34px;

    font-weight:800;

    color:#111111;

    line-height:1.25;

    margin-bottom:18px;

}

.considerable-content-mg p{

    font-size:15px;

    line-height:1.9;

    color:#666666;

    margin-bottom:28px;

}



/*=========================================
        FACT LIST
=========================================*/

.considerable-list-mg{

    list-style:none;

    margin:0;

    padding:0;

}



/*=========================================
        FACT ITEM
=========================================*/

.considerable-list-mg li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    font-size:15px;

    font-weight:600;

    color:#222222;

}

.considerable-list-mg li:last-child{

    margin-bottom:0;

}



/*=========================================
        ICON
=========================================*/

.considerable-list-mg i{

    width:24px;

    height:24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#b83330;

    font-size:16px;

    transition:.35s;

}

.considerable-list-mg li:hover i{

    transform:rotate(360deg);

}



/*=========================================
        IMAGE BOX
=========================================*/

.considerable-image-mg{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#f5f5f5;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}



/*=========================================
        IMAGE
=========================================*/

.considerable-image-mg img{

    width:100%;

    height:320px;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:1s;

}



/*=========================================
        IMAGE OVERLAY
=========================================*/

.considerable-image-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.02),

        rgba(0,0,0,.12)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}



/*=========================================
        IMAGE BORDER
=========================================*/

.considerable-image-mg::after{

    content:"";

    position:absolute;

    inset:0;

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

    border-radius:12px;

    pointer-events:none;

}



/*=========================================
        HOVER
=========================================*/

.considerable-image-mg:hover img{

    transform:scale(1.06);

}

.considerable-image-mg:hover::before{

    opacity:1;

}

.considerable-image-mg:hover{

    box-shadow:

    0 22px 50px rgba(0,0,0,.12);

}



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

@media(max-width:1200px){

    .considerable-section-mg{

        grid-template-columns:1fr 350px;

        gap:28px;

    }

    .considerable-content-mg h2{

        font-size:30px;

    }

    .considerable-image-mg img{

        height:290px;

    }

}



@media(max-width:992px){

    .considerable-section-mg{

        grid-template-columns:1fr;

        gap:25px;

    }

    .considerable-image-mg{

        order:2;

    }

}



@media(max-width:768px){

    .considerable-section-mg{

        margin:45px 0;

    }

    .considerable-content-mg h2{

        font-size:26px;

    }

    .considerable-content-mg p{

        font-size:14px;

    }

    .considerable-list-mg li{

        font-size:14px;

        margin-bottom:15px;

    }

    .considerable-image-mg img{

        height:260px;

    }

}



@media(max-width:576px){

    .considerable-content-mg h2{

        font-size:22px;

    }

    .considerable-image-mg{

        border-radius:10px;

    }

    .considerable-image-mg img{

        height:230px;

    }

}



@media(max-width:420px){

    .considerable-content-mg h2{

        font-size:20px;

    }

    .considerable-image-mg img{

        height:200px;

    }

}







/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 6
            QUOTE + PLAN BENEFITS
=========================================================*/


/*=========================================
            QUOTE BOX
=========================================*/

.service-quote-box-mg{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    margin:60px 0;

    padding:36px 42px;

    background:linear-gradient(135deg,#b83330 0%,#d9706e 100%);

    border-radius:14px;

    overflow:hidden;

    box-shadow:

    0 20px 50px rgba(184,51,48,.20);

}



/*=========================================
        DECORATION
=========================================*/

.service-quote-box-mg::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-130px;

    top:-130px;

    border-radius:50%;

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

}

.service-quote-box-mg::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    left:-85px;

    bottom:-85px;

    border-radius:50%;

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

}



/*=========================================
        CONTENT
=========================================*/

.quote-content-mg{

    position:relative;

    z-index:2;

    flex:1;

}

.quote-content-mg p{

    margin:0 0 18px;

    font-size:21px;

    line-height:1.8;

    font-weight:500;

    color:#ffffff;

}

.quote-content-mg h5{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#ffffff;

}



/*=========================================
        ICON
=========================================*/

.quote-icon-mg{

    position:relative;

    z-index:2;

    width:82px;

    height:82px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(6px);

}

.quote-icon-mg i{

    font-size:30px;

    color:#ffffff;

}



/*=========================================
        PLAN BENEFITS
=========================================*/

.plan-benefits-mg{

    margin-top:55px;

}

.plan-benefits-mg h2{

    margin:0 0 18px;

    font-size:34px;

    font-weight:800;

    color:#111111;

    line-height:1.2;

}

.plan-benefits-mg>p{

    margin:0 0 28px;

    font-size:15px;

    line-height:1.9;

    color:#666666;

}



/*=========================================
        BENEFITS LIST
=========================================*/

.benefits-list-mg{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

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

    gap:16px 35px;

}



/*=========================================
        ITEM
=========================================*/

.benefits-list-mg li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:15px;

    font-weight:600;

    color:#222222;

    line-height:1.8;

}



/*=========================================
        BULLET
=========================================*/

.benefits-list-mg li i{

    margin-top:5px;

    color:#b83330;

    font-size:13px;

    transition:.35s;

}

.benefits-list-mg li:hover i{

    transform:scale(1.2);

}



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

@media(max-width:1200px){

    .quote-content-mg p{

        font-size:19px;

    }

}



@media(max-width:992px){

    .service-quote-box-mg{

        flex-direction:column;

        align-items:flex-start;

        padding:32px;

        gap:25px;

    }

    .benefits-list-mg{

        grid-template-columns:1fr;

    }

}



@media(max-width:768px){

    .service-quote-box-mg{

        margin:45px 0;

        padding:28px 24px;

    }

    .quote-content-mg p{

        font-size:17px;

    }

    .quote-icon-mg{

        width:72px;

        height:72px;

    }

    .quote-icon-mg i{

        font-size:26px;

    }

    .plan-benefits-mg h2{

        font-size:28px;

    }

    .plan-benefits-mg>p{

        font-size:14px;

    }

    .benefits-list-mg li{

        font-size:14px;

    }

}



@media(max-width:576px){

    .service-quote-box-mg{

        padding:22px 20px;

        border-radius:10px;

    }

    .quote-content-mg p{

        font-size:16px;

        line-height:1.7;

    }

    .quote-content-mg h5{

        font-size:14px;

    }

    .quote-icon-mg{

        width:62px;

        height:62px;

    }

    .quote-icon-mg i{

        font-size:22px;

    }

    .plan-benefits-mg h2{

        font-size:24px;

    }

}



@media(max-width:420px){

    .quote-content-mg p{

        font-size:15px;

    }

    .plan-benefits-mg h2{

        font-size:21px;

    }

    .benefits-list-mg li{

        gap:10px;

        font-size:13px;

    }

}




/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 7
            BOTTOM IMAGE • DESCRIPTION • FEATURES
=========================================================*/


/*=========================================
        BOTTOM IMAGE
=========================================*/

.service-bottom-image-mg{

    position:relative;

    width:100%;

    margin:55px 0 45px;

    overflow:hidden;

    border-radius:12px;

    background:#f6f6f6;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}

.service-bottom-image-mg img{

    width:100%;

    height:360px;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:1s;

}

.service-bottom-image-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.03),

        rgba(0,0,0,.12)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}

.service-bottom-image-mg:hover img{

    transform:scale(1.06);

}

.service-bottom-image-mg:hover::before{

    opacity:1;

}



/*=========================================
        SERVICE DESCRIPTION
=========================================*/

.service-description-mg h3{

    font-size:30px;

    font-weight:800;

    color:#111111;

    line-height:1.2;

    margin-bottom:18px;

}

.service-description-mg p{

    font-size:15px;

    line-height:1.9;

    color:#666666;

}



/*=========================================
        FEATURE GRID
=========================================*/

.service-feature-grid-mg{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:22px;

    margin-top:45px;

}



/*=========================================
        FEATURE CARD
=========================================*/

.feature-item-mg{

    background:#ffffff;

    border:1px solid #ededed;

    border-radius:12px;

    padding:28px 22px;

    text-align:center;

    transition:.35s;

    box-shadow:

    0 8px 25px rgba(0,0,0,.05);

}

.feature-item-mg:hover{

    transform:translateY(-6px);

    border-color:#b83330;

    box-shadow:

    0 18px 45px rgba(184,51,48,.14);

}



/*=========================================
        FEATURE ICON
=========================================*/

.feature-item-mg i{

    width:66px;

    height:66px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fcf3f2;

    color:#b83330;

    font-size:26px;

    transition:.35s;

}

.feature-item-mg:hover i{

    background:#b83330;

    color:#ffffff;

    transform:rotateY(180deg);

}



/*=========================================
        FEATURE TITLE
=========================================*/

.feature-item-mg h4{

    font-size:20px;

    font-weight:700;

    color:#111111;

    margin-bottom:12px;

}



/*=========================================
        FEATURE TEXT
=========================================*/

.feature-item-mg p{

    font-size:14px;

    line-height:1.8;

    color:#666666;

}



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

@media(max-width:1200px){

    .service-bottom-image-mg img{

        height:330px;

    }

}



@media(max-width:992px){

    .service-feature-grid-mg{

        grid-template-columns:

        repeat(2,1fr);

    }

}



@media(max-width:768px){

    .service-bottom-image-mg{

        margin:40px 0;

    }

    .service-bottom-image-mg img{

        height:280px;

    }

    .service-description-mg h3{

        font-size:26px;

    }

    .service-description-mg p{

        font-size:14px;

    }

    .service-feature-grid-mg{

        grid-template-columns:1fr;

        gap:18px;

    }

    .feature-item-mg{

        padding:24px 20px;

    }

}



@media(max-width:576px){

    .service-bottom-image-mg{

        border-radius:10px;

    }

    .service-bottom-image-mg img{

        height:230px;

    }

    .service-description-mg h3{

        font-size:22px;

    }

    .feature-item-mg{

        border-radius:10px;

    }

    .feature-item-mg i{

        width:58px;

        height:58px;

        font-size:22px;

    }

    .feature-item-mg h4{

        font-size:18px;

    }

}



@media(max-width:420px){

    .service-bottom-image-mg img{

        height:200px;

    }

    .service-description-mg h3{

        font-size:20px;

    }

    .feature-item-mg{

        padding:20px 16px;

    }

    .feature-item-mg i{

        width:52px;

        height:52px;

        font-size:20px;

    }

}

/*=========================================================
            SERVICE DETAILS SECTION
            FINAL CSS - PART 8
            RELATED SERVICES
=========================================================*/


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

.related-services-mg{

    width:100%;

    margin:70px 0 0;

}



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

.related-title-mg{

    margin-bottom:35px;

    text-align:center;

}

.related-title-mg span{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#fcf3f2;

    color:#b83330;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:14px;

}

.related-title-mg h2{

    font-size:34px;

    font-weight:800;

    color:#111111;

    line-height:1.2;

}



/*=========================================
        GRID
=========================================*/

.related-grid-mg{

    display:grid;

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

    gap:25px;

}



/*=========================================
        CARD
=========================================*/

.related-card-mg{

    background:#ffffff;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #ececec;

    transition:.35s;

    box-shadow:

    0 8px 28px rgba(0,0,0,.05);

}

.related-card-mg:hover{

    transform:translateY(-8px);

    border-color:#b83330;

    box-shadow:

    0 18px 45px rgba(184,51,48,.15);

}



/*=========================================
        IMAGE
=========================================*/

.related-img-mg{

    position:relative;

    overflow:hidden;

}

.related-img-mg img{

    width:100%;

    height:220px;

    display:block;

    object-fit:cover;

    transition:1s;

}

.related-img-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.02),

        rgba(0,0,0,.18)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

}

.related-card-mg:hover .related-img-mg img{

    transform:scale(1.08);

}

.related-card-mg:hover .related-img-mg::before{

    opacity:1;

}



/*=========================================
        CONTENT
=========================================*/

.related-content-mg{

    padding:24px;

}

.related-content-mg h3{

    font-size:22px;

    font-weight:700;

    color:#111111;

    margin-bottom:12px;

}

.related-content-mg p{

    font-size:14px;

    line-height:1.8;

    color:#666666;

    margin-bottom:18px;

}



/*=========================================
        BUTTON
=========================================*/

.related-content-mg a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#111111;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

.related-content-mg a i{

    transition:.35s;

}

.related-card-mg:hover .related-content-mg a{

    color:#b83330;

}

.related-card-mg:hover .related-content-mg a i{

    transform:translateX(6px);

}



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

@media(max-width:1200px){

    .related-grid-mg{

        gap:20px;

    }

    .related-img-mg img{

        height:200px;

    }

}



@media(max-width:992px){

    .related-grid-mg{

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

    }

}



@media(max-width:768px){

    .related-services-mg{

        margin-top:50px;

    }

    .related-title-mg h2{

        font-size:28px;

    }

    .related-grid-mg{

        grid-template-columns:1fr;

        gap:18px;

    }

    .related-content-mg{

        padding:20px;

    }

}



@media(max-width:576px){

    .related-title-mg h2{

        font-size:24px;

    }

    .related-img-mg img{

        height:190px;

    }

    .related-content-mg h3{

        font-size:20px;

    }

}



@media(max-width:420px){

    .related-title-mg h2{

        font-size:21px;

    }

    .related-img-mg img{

        height:170px;

    }

    .related-content-mg{

        padding:18px;

    }

    .related-content-mg h3{

        font-size:18px;

    }

    .related-content-mg p{

        font-size:13px;

    }

}