
/* AC248B-PROJECTS */
/* Only targeted Home Projects Owl carousel */

@media(max-width:767px){

.ac248b-projects{
 position:relative!important;
 width:100%!important;
 max-width:100%!important;
 box-sizing:border-box!important;
}

/* Hide the partial next card on the right */

.ac248b-projects .owl-stage-outer{
 width:var(--ac248b-window,100%)!important;
 max-width:100%!important;

 margin-left:auto!important;
 margin-right:auto!important;

 padding:0!important;
 overflow:hidden!important;
 box-sizing:border-box!important;
}

/* Preserve original Owl item dimensions */

.ac248b-projects .owl-stage{
 box-sizing:content-box!important;
}

/* Position arrows on both sides of center card */

.ac248b-projects .owl-nav{
 position:absolute!important;

 top:48%!important;
 left:0!important;
 right:0!important;

 height:0!important;
 margin:0!important;
 padding:0!important;

 z-index:20!important;
 pointer-events:none!important;
}

.ac248b-projects .owl-nav .owl-prev,
.ac248b-projects .owl-nav .owl-next{
 position:absolute!important;
 top:0!important;

 margin:0!important;
 transform:translateY(-50%)!important;

 z-index:21!important;
 pointer-events:auto!important;
}

.ac248b-projects .owl-nav .owl-prev{
 left:calc(
  50% - var(--ac248b-half-width,50%) + 10px
 )!important;

 right:auto!important;
}

.ac248b-projects .owl-nav .owl-next{
 right:calc(
  50% - var(--ac248b-half-width,50%) + 10px
 )!important;

 left:auto!important;
}

/* Existing dots remain centered */

.ac248b-projects .owl-dots{
 position:relative!important;
 width:100%!important;
 text-align:center!important;
 z-index:5!important;
}

}


/* AC249-HOME-PROJECTS
   Applies only after Admin settings are saved.
   Original carousel behavior stays in R248B.
*/

@media(max-width:767px){

.ac248b-projects.ac249-sized .owl-item > *{
 width:min(
  calc(100% - var(--ac249-gap,0px)),
  var(--ac249-width,440px)
 )!important;

 max-width:100%!important;
 min-height:var(--ac249-height,600px)!important;
 height:auto!important;

 margin-left:auto!important;
 margin-right:auto!important;
 box-sizing:border-box!important;
 transform:translateX(
  calc(var(--ac249-gap,0px) / -2)
 );
}

.ac248b-projects.ac249-sized.ac249-hide-neighbor
 .owl-stage-outer{
 overflow:hidden!important;
}

.ac248b-projects.ac249-sized .owl-nav{
 z-index:20!important;
}
}



/* AC251-ONE-CARD
   Actual Home Projects slider:
   .proj > .ac201-clean-shell > .ac198-stage
   .ac198-row.ac198-mode-slider
   .ac198-item > .hom-pro
   .ac198-nav.ac198-split
*/

/* MOBILE ONLY — all other sections untouched */

@media screen and (max-width:767px){

/* Remove extra side spacing around the carousel */

html body section.proj.mar-bot-red-m30
 > .container.ac201-clean-shell{

    width:100%!important;
    max-width:100%!important;

    padding-left:0!important;
    padding-right:0!important;

    box-sizing:border-box!important;
}

/* Show only the current card.
   The next white card cannot bleed to the right. */

html body section.proj.mar-bot-red-m30
 .ac198-stage{

    position:relative!important;

    display:block!important;

    width:100%!important;
    max-width:100%!important;

    margin-left:auto!important;
    margin-right:auto!important;

    padding:0!important;

    overflow:hidden!important;

    box-sizing:border-box!important;
}

/* Preserve existing slider transform, transitions
   and automatic card navigation.
   Only normalize the card track dimensions. */

html body section.proj.mar-bot-red-m30
 .ac198-row.ac198-mode-slider.ac198-count-1{

    display:flex!important;

    flex-direction:row!important;
    flex-wrap:nowrap!important;

    align-items:stretch!important;

    width:100%!important;
    max-width:none!important;

    margin:0!important;
    padding:0!important;
    gap:0!important;

    box-sizing:border-box!important;
}

/* Exactly one card per screen.
   Override Bootstrap col-md-3 / col-sm-6 widths. */

html body section.proj.mar-bot-red-m30
 .ac198-row.ac198-count-1
 > .ac198-item{

    display:block!important;

    flex:0 0 100%!important;

    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;

    float:none!important;

    margin:0!important;
    padding:0!important;

    box-sizing:border-box!important;
}

/* Card centered, both edges aligned to carousel.
   Preserve original image, colors, text and button. */

html body section.proj.mar-bot-red-m30
 .ac198-row.ac198-count-1
 > .ac198-item > .hom-pro{

    position:relative!important;

    display:block!important;

    width:100%!important;
    max-width:100%!important;

    min-width:0!important;

    margin-left:auto!important;
    margin-right:auto!important;

    box-sizing:border-box!important;
}

/* Left and right arrows aligned symmetrically
   over the edges of the centered card. */

html body section.proj.mar-bot-red-m30
 .ac198-stage > .ac198-nav.ac198-split{

    position:absolute!important;

    top:50%!important;
    left:0!important;
    right:0!important;

    transform:translateY(-50%)!important;

    display:flex!important;

    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;

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

    margin:0!important;
    padding:0 10px!important;

    z-index:30!important;

    pointer-events:none!important;

    box-sizing:border-box!important;
}

html body section.proj.mar-bot-red-m30
 .ac198-stage > .ac198-nav.ac198-split
 > button{

    position:relative!important;

    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    transform:none!important;

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

    flex:none!important;

    margin:0!important;

    pointer-events:auto!important;
    cursor:pointer!important;

    z-index:31!important;
}

/* Dots stay centered under the card */

html body section.proj.mar-bot-red-m30
 .ac198-dots{

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

    width:100%!important;

    margin-left:auto!important;
    margin-right:auto!important;

    box-sizing:border-box!important;
}

}

