/*
 Theme Name:   M&R Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  M&R Theme extends Bricks
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.bricks-mobile-menu-toggle{
	color:white;
}

.brxe-button{
	cursor:pointer;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    background-size: cover;
    background-position: center;
}

.gallery-slide.active {
    opacity: 1;
    z-index: 1;
}

.gallery-parent{
	overflow:hidden;
	box-sizing:border-box;
}

.gallery-tab.active {
    /* Example styles */
    background-color: black;
    border-bottom: 3px solid white;
    color: white;
}

.gallery-tab{
	cursor: pointer;
}

/*hide mobile*/
.gallery-mobile-header{
	display:none;
}

.gallery-slide::before,
.gallery-slide::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;          /* covers 60% of the slide width */
    pointer-events: none; /* allow clicks through the gradient */
	z-index: 0;
}

/* Left gradient */
.gallery-slide::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0));
}

.gallery-slide > * {
    position: relative;
    z-index: 1;
}

/* porfolio style*/

.portfolio-btn{
	cursor:pointer;
}

.property-active{
	background-color:black !important;
}

.property-active h3{
	color:white;
}

.black-bar{
	width:20%;
}

/* dev journey blocks*/
.side-arrow-block {
  position: relative;
  background-color: #2a2a2a; /* updated color */
  color: white;
  padding: 20px;
}

/* Right-pointing arrow with 5px block extension */
.side-arrow-block::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px; /* overlaps 5px into block */
  width: 25px; /* total arrow width = rectangle + triangle */
  height: 100%;
  background-color: #2a2a2a; /* updated color */
  /* polygon: rectangle (first 5px) + triangle (last 20px) */
  clip-path: polygon(
    0 0,      /* top-left */
    5px 0,    /* top-right of rectangle */
    25px 50%, /* tip of triangle */
    5px 100%, /* bottom-right of rectangle */
    0 100%    /* bottom-left */
  );
  transform: translateZ(0); /* fix subpixel artifacts */
}

/* Mobile/tablet down: down-pointing arrow with 5px block extension */
@media (max-width: 800px) {
  .side-arrow-block::after {
    top: auto;
    bottom: -15px;  /* overlap 5px into block */
    left: 50%;
    width: 40px;   /* control arrow width */
    height: 25px;  /* rectangle + triangle height */
    transform: translateX(-50%) translateZ(0);
    background-color: #2a2a2a; /* updated color */
    /* polygon: rectangle (first 5px height) + triangle (rest) */
    clip-path: polygon(
      0 0,         /* top-left of rectangle */
      40px 0,      /* top-right of rectangle */
      20px 25px,   /* tip of triangle */
      0 0          /* back to top-left to close shape */
    );
  }
}

@media (max-width: 768px) {
 	
  .gallery-parent{
	  height:auto !important;
  }	
	
  .gallery-tab-wrap {
    display: none; /* hide tabs */
  }
  
  .gallery-mobile-header{
  	display:flex;
  }

  .gallery-tab-wrap {
    height: 5px; /* smaller height for mobile */
  }
  
  /* Make slides horizontal row */
    .gallery-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
		gap:10px;
    }
	
	.gallery-slide > .brxe-block {
	        padding: 0 10px;
	 }

    /* Each slide takes full width */
    .gallery-slide {
        flex: 0 0 100% !important;
		display: block !important;
        /*height: 100%;*/
		height:auto !important;
        box-sizing: border-box;
        opacity: 1 !important;   /* prevent fade hiding */
        position: relative !important;
        z-index: 1 !important;
		
		padding-right:10px;
    }
	
	.gallery-slide::before,
	.gallery-slide::after {
	    width: 100%;      /* full width for top/bottom gradient */
	    height: 70%;      /* covers 60% of slide height */
	}

	/* Top gradient */
	.gallery-slide::before {
	    top: 0;
	    left: 0;
	    background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));
	}
}