.service-blocks-twolgl .text p {
  line-height: 1.55;
}
.gm-linkalt {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: ui-monospace,SF Mono,Menlo,monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding: 0 0 6px;
  transition: gap .5s cubic-bezier(.22,.61,.36,1),border-color .5s ease,color .5s ease;
}
.service-blocks-twolgl .contentstrike{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform .9s ease;
    will-change: opacity, transform;
}

.service-blocks-twolgl.is-visible .contentstrike{
    opacity: 1;
    transform: translateY(0);
}
/*====================================================
GRIFFON STYLE — MX SERVICES
====================================================*/

:root{
    --mxserv23-color:#F64A00;
}

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

.service-blocks-twolgl,
.service-blocks-twolgl *{
    box-sizing:border-box;
}

.service-blocks-twolgl{
    position:relative;
    overflow:hidden;
}

/*====================================================
LAYOUT
====================================================*/

.service-blocks-twolgl .inner-boxlgl{
    display:grid;
    grid-template-columns:1fr 1fr;
    position:relative;

    height:auto;
    min-height:650px;
    overflow:hidden;

    padding:0 !important;
}

/* Alternating layout */

.service-blocks-twolgl.reverse-layout .image-boxlgl{
    order:2;
}

.service-blocks-twolgl.reverse-layout .contentstrike{
    order:1;
}

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

.service-blocks-twolgl .image-boxlgl{
    position:relative !important;

     width:100% !important;
    height:100%;


    overflow:hidden;
}

/* Image wrapper */

.service-blocks-twolgl .image-boxlgl > div{
    height:100%;
}

/* Image */

.service-blocks-twolgl .image-boxlgl img{
    width:100%;
    height:100%;

    display:block;
    object-fit:cover;

    transition:transform .8s ease;
}

/* Hover zoom */

.service-blocks-twolgl:hover .image-boxlgl img{
    transform:scale(1.04);
}

/*====================================================
SMALL IMAGE NUMBER
====================================================*/

.image-small-number{
    position:absolute;

    left:clamp(24px,3vw,40px);
    bottom:clamp(24px,3vw,40px);

    z-index:6;
}

/* Line */

.image-small-number .line{
    position:absolute;

    width:60px;
    height:1px;

    bottom:0;
    left:0;

    background:#e8dcc4eb;

    z-index:2;

    transition:width 1.2s cubic-bezier(.22,.61,.36,1) .6s;
}

/* Number */

.image-small-number .number{
    position:absolute;

    bottom:24px;
    left:0;

    font-family:ui-monospace,SF Mono,Menlo,monospace;
    font-size:11px;
    letter-spacing:.32em;

    color:#faf8f2e0;

    transform:translateY(8px);

    z-index:2;

    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1) .8s,
        transform .9s cubic-bezier(.22,.61,.36,1) .8s;
}

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

.contentstrike{
    position:relative;

    display:flex;
    flex-direction:column;

    justify-content:flex-start; /* 👈 important */

    padding:90px;
    z-index:2;
}

/*====================================================
BIG ROMAN NUMBER
====================================================*/

.image-overlay-number{
    position:absolute;

    top:30px;
    right:40px;

    z-index:1;

    pointer-events:none;
	height:0;          /* 👈 important */
    line-height:0;     /* 👈 évite impact vertical */
}

.image-overlay-number .roman{
    display:block;

    font-size:140px;
    line-height:1;
    font-weight:700;

    font-family:"Cormorant Garamond", serif;
    letter-spacing:2px;

    color:currentColor;
    opacity:.08;
}

/*====================================================
SUBTITLE
====================================================*/

.service-subtitle{
    position:absolute;

    top:20px;
    right:30px;

    font-size:90px;
    font-weight:700;

    opacity:.06;

    pointer-events:none;
}

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

.service-blocks-twolgl .title{
    margin-bottom:30px;

    font-size:58px;
    line-height:1.1;
    font-weight:600;

    font-family:"Cormorant Garamond", serif;

    white-space:normal !important;
    overflow:visible !important;
}

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

.service-blocks-twolgl .text{
    max-width:520px;
    margin-bottom:35px;

    font-size:18px;
    line-height:1.9;
}

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

.service-blocks-twolgl .btn-style1{
    position:relative;

    display:inline-block;
    width:fit-content;

    z-index:2;

    text-decoration:none;
}

.service-blocks-twolgl .btn-style1 span{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:16px 28px;

    background:var(--mxserv23-color);

    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;

    transition:all .3s ease;
}

/* Button hover */

.service-blocks-twolgl .btn-style1:hover span{
    transform:translateY(-2px);
}

/* Border effect */

.service-blocks-twolgl .btn-style1::before{
    content:"";

    position:absolute;

    top:-8px;
    left:8px;

    width:100%;
    height:100%;

    border:1px solid rgba(0,0,0,.15);

    z-index:-1;

    transition:all .3s ease;
}

.service-blocks-twolgl .btn-style1:hover::before{
    top:0;
    left:0;
}

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

.service-blocks-twolgl svg{
    width:18px;
    height:auto;
}

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

.service-blocks-twolgl .image-boxlgl .icon{
    position:absolute;

    top:50%;
    right:-45px;

    width:88px;
    height:88px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:34px;

    z-index:5;

    transform:translateY(-50%);

    box-shadow:0 10px 60px rgba(0,0,0,.12);

    transition:all .4s ease;
}

/* Reverse layout icon */

.service-blocks-twolgl.reverse-layout .image-boxlgl .icon{
    right:auto;
    left:-45px;
}

/* Icon hover */

.service-blocks-twolgl:hover .icon{
    transform:translateY(-50%) rotate(180deg) scale(-1);
}

/*====================================================
REMOVE OLD EFFECTS
====================================================*/

.service-blocks-twolgl .inner-boxlgl:after{
    display:none !important;
}

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

.inner-boxlgl ul{
    display:inline-block;
    text-align:left;
}

/*====================================================
SCROLL AREA
====================================================*/

.mf{
    width:100%;
    height:200px;

    overflow-y:scroll;

    padding-left:10px;
    padding-right:10px;

    scrollbar-color:#ffffff #0000;
    scrollbar-width:thin;
}

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

.imageanime{
    animation:flotte 2s ease-in-out infinite;
    animation-fill-mode:forwards;
    animation-delay:1s;
}

@keyframes flotte{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

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

@media(max-width:980px){

    .service-blocks-twolgl .inner-boxlgl{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .service-blocks-twolgl .image-boxlgl,
    .service-blocks-twolgl.reverse-layout .image-boxlgl{
        order:1;
        min-height:350px;
    }

    .service-blocks-twolgl .contentstrike,
    .service-blocks-twolgl.reverse-layout .contentstrike{
        order:2;
    }

    .contentstrike{
        padding:50px 30px;
    }

    .service-blocks-twolgl .title{
        font-size:38px;
    }

    .service-blocks-twolgl .text{
        font-size:16px;
        line-height:1.7;
    }

    .service-blocks-twolgl .image-boxlgl .icon{
        top:auto;
        bottom:20px;
        right:20px;

        transform:none;
    }

    .service-blocks-twolgl.reverse-layout .image-boxlgl .icon{
        left:auto;
        right:20px;
    }

    .service-blocks-twolgl:hover .icon{
        transform:rotate(180deg) scale(-1);
    }

    .image-overlay-number .roman{
        font-size:100px;
    }
}

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

@media(max-width:599px){

    .contentstrike{
        padding:35px 20px;
    }

    .service-blocks-twolgl .title{
        font-size:30px;
    }

    .image-overlay-number{
        top:20px;
        right:20px;
    }

    .image-overlay-number .roman{
        font-size:70px;
    }

    .image-small-number{
        left:20px;
        bottom:20px;
    }

    .image-small-number .line{
        width:40px;
    }
}
/*====================================================
RESPONSIVE SLIDER LAYOUT
====================================================*/

@media(max-width:980px){

    #mainservice<?php echo $modID; ?>{
        overflow:hidden;
    }

    #mainservice<?php echo $modID; ?> .owl-stage{
        display:flex;
        align-items:stretch;
    }

    .service-blocks-twolgl{
        height:100%;
    }

    .service-blocks-twolgl .inner-boxlgl{
        display:flex;
        flex-direction:column;

        height:auto;
        min-height:auto;
    }

    /* IMAGE */

.service-blocks-twolgl .image-boxlgl{
  order:1;
    width:100%;
    aspect-ratio: 16 / 9;
    /*max-height: 320px;*/
    overflow:hidden;
}

    /* CONTENT */

    .service-blocks-twolgl .contentstrike{
        order:2;

        width:100%;

        padding:40px 25px;
    }

    /* REMOVE REVERSE */

    .service-blocks-twolgl.reverse-layout .image-boxlgl,
    .service-blocks-twolgl.reverse-layout .contentstrike{
        order:unset;
    }

    /* TITLE */

    .service-blocks-twolgl .title{
        font-size:34px;
    }

    /* TEXT */

    .service-blocks-twolgl .text{
        max-width:100%;
    }

    /* ICON */

    .service-blocks-twolgl .image-boxlgl .icon{
        right:20px !important;
        left:auto !important;

        bottom:20px;
        top:auto;

        transform:none;
    }

    /* HOVER */

    .service-blocks-twolgl:hover .icon{
        transform:rotate(180deg) scale(-1);
    }

}
@media (max-width: 980px){

    #mainservice<?php echo $modID; ?>{
        overflow:hidden;
    }

    #mainservice<?php echo $modID; ?> .owl-stage-outer{
        overflow:hidden;
    }

    #mainservice<?php echo $modID; ?> .owl-stage{
        display:flex !important;
        align-items:stretch;
    }

    #mainservice<?php echo $modID; ?> .owl-item{
        display:flex;
    }

    .serv-gate{
        width:100% !important;
        display:flex !important;
    }
	
}