/**
***  Hero Image Slideshow
**/

.slideshow-container { 
	width: 100vw; 
	height: 50vh; 
	position: relative;
	overflow: hidden;
}

/* Image styling */
.slideshow-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

/* Active image visible */
.slideshow-container img.active {
	opacity: 1;
}

/* Text styling */
.slideshow-text {
	position: absolute;
	bottom: 0;
	/*left: 50%;*/
	left: 0;
	right: 0;
	/*transform: translateX(-50%);*/
	display: flex;
	justify-content: space-between; /* Distribute the words equally */
	align-items: center;
	font-size: clamp(17px, 4vw, 4vw);
	text-align: center;
	z-index: 10; /* Always visible */
	font-weight: bold;
	white-space: nowrap;
	margin-bottom: 0;
	line-height: 0.6;
	padding: 0 2vw;
}

h1.slideshow-text span {
	color: #fff !important;
}
/* ^^ Hero Image Slideshow */

/**
***  Section 1
**/
@media (min-width:1700px) {
    #section-1-container {
        margin-bottom: 5vw;
    }
}

.column-container-p20 {
    padding: 20px;
  }

/* First column styling */
.side-by-side-images {
  display: flex;
  gap: 2rem;
  margin-top: 15px;
}

.side-by-side-images img {
  width: 50px;
  height: 50px;
}
@media (min-width:768px) {
  .side-by-side-images img {
      width: 100px;
      height: 100px;
  }    
}

/* Second column image overlay styling */
.image-container-relative {
  position: relative;
  min-height: 455px;
}

.overlay-listbox {
  position: absolute;
  top: 0;
  right: 0;
  width: 90%; /* Overlay covers 70% of the image width */
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue background */
  color: white;
  font-size: clamp(15px, 1.2vw, 1.2vw);
  padding: 2rem 2rem 10px 2rem;
  z-index: 10; /* Ensure overlay is above the image */
}
@media (min-width:620px) {
  .overlay-listbox {
      width: 70%;
  }  
}

/* Ensure the overlay extends below the image if the content is larger */
.overlay-listbox ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.overlay-listbox ul li {
  padding-bottom: 1rem;
}
@media (min-width:1088px) {
  .overlay-listbox ul li {
      padding-bottom: 1.5rem;
  }    
}

.lh-sm {
  line-height: 1.3;
}

.side-by-side-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
@media (min-width:768px) {
  .side-by-side-buttons {
      flex-direction: row;
  }
}

.row-gap-2r {
  row-gap: 2rem !important;
}

@media (min-width:1024px) {
  #section-1-container .fs-6 {
      font-size: 1.1rem !important;
  }
}

@media (min-width:768px) {
  #section-1-container .mt-4 {
      margin-top: 3rem !important;
  }
}

  /* Carousel Tabs -- NOT IN USE */
  #carousel-tabs.tabs,
  #carousel-tabs .tab-content {
      --cnvs-tab-padding-width: 0;
      --bs-nav-link-padding-y: .75rem;
      --bs-nav-link-font-size: .9125rem;
      --bs-nav-link-font-weight:	400;
      --bs-nav-tabs-border-width: 0;
      --bs-nav-link-color: var(--cnvs-contrast-1000);
      --bs-nav-link-hover-color: var(--cnvs-contrast-900);
      --bs-nav-tabs-link-active-bg: rgba(var(--bs-danger-rgb), 0.1);
      --bs-nav-tabs-link-active-color: var(--bs-danger);
      --cnvs-tabs-bg-color:rgba(var(--cnvs-contrast-rgb), 0.04);
  }

  .dark #carousel-tabs.tabs,
  .dark #carousel-tabs .tab-content {
      --bs-nav-tabs-link-active-bg: rgba(var(--bs-danger-rgb),1);
      --bs-nav-tabs-link-active-color: var(--bs-light);
  }

  #carousel-tabs .nav-link:not(.active) {
      background-color: rgba(var(--cnvs-contrast-rgb), 0.04);
  }

  #carousel-tabs .nav-link {
      border-radius: var(--bs-border-radius);
      font-weight: 500;
  }

  #carousel-tabs .nav-link.active {
      font-weight: 600;
  }

  .carousel-blur-left::before,
  .carousel-blur-right::after {
      --cnvs-carousel-blur-size: 70px;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: auto;
      width: var(--cnvs-carousel-blur-size);
      height: 100%;
      z-index: 1;
      background: linear-gradient(to right, var(--cnvs-body-bg) 50%, transparent);
  }

  .carousel-blur-right::after {
      left: auto;
      right: 0;
      background: linear-gradient(to left, var(--cnvs-body-bg) 50%, transparent);
  }

  .fs-fluid {
    font-size: clamp(16px,17px,18px);
    margin-bottom: 1rem;
  }

  .divider-width {
    max-width: clamp(200px, 20%, 240px);
  }

  .box-50 {
    max-width: 100%;
  }

  .box-75 {
    max-width: 100%;
  }
  .box-100 {
	  max-width: 100%;
  }
  @media (min-width:1200px) {
    .box-50 {
      max-width: 50%;
    }

    .box-75 {
      max-width: 75%;
    }
  }
  .services-divider {
    display: none; 
 }
 @media (min-width:495px) and (max-width:767px) {
    .services-divider {
        display: block;
        border-bottom: 3px solid var(--cnvs-skyblue); 
        flex-grow: 1; 
    }
 }
 @media (min-width:768px) and (max-width:1199px) {
    .services-divider {
        display: none; 
    }
 }
 @media (min-width:1200px) {
    .services-divider {
        display: block;
        border-bottom: 3px solid var(--cnvs-skyblue); 
        flex-grow: 1; 
    } 
 }

.services-divider.right {
    margin-right: 10px;
}

  .service-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* This makes the div a perfect square */
    background-size: cover;
    background-position: center;
  }

  .service-rectangle {
    position: relative;
    width: 100%;
    padding-bottom: 300px; 
    background-size: cover;
    background-position: center;
  }

  .img-1 {
    background-image: url('../images/tab-residential-gate-01.webp');
  }

  .img-2 {
      background-image: url('../images/tab-residential-gate-02.webp'); 
  }

  .img-3 {
      background-image: url('../images/tab-residential-gate-03.webp'); 
  }

  .img-4 {
      background-image: url('../images/tab-residential-gate-04.webp'); 
  }

  .img-5 {
    background-image: url('../images/tab-commercial-gate-01.webp');
  }

  .img-6 {
      background-image: url('../images/tab-commercial-gate-02.webp'); 
  }

  .img-7 {
      background-image: url('../images/tab-commercial-gate-03.webp'); 
  }

  .img-8 {
      background-image: url('../images/tab-commercial-gate-04.webp'); 
  }

  .img-11 {
      background-image: url('../images/tab-trash-enclosure-01.webp'); 
  }

  .img-12 {
      background-image: url('../images/tab-trash-enclosure-02.webp'); 
  }

  .img-13 {
      background-image: url('../images/tab-trash-enclosure-03.webp'); 
  }      

  .img-14 {
      background-image: url('../images/tab-artisan-01.webp'); 
  }

  .img-15 {
      background-image: url('../images/tab-artisan-02.webp'); 
  }

  .img-16 {
      background-image: url('../images/tab-artisan-03.webp'); 
  }

  .img-17 {
      background-image: url('../images/tab-artisan-04.webp'); 
  }   

  .img-18 {
      background-image: url('../images/tab-cyclone-1.webp'); 
  }

  .img-19 {
      background-image: url('../images/tab-cyclone-2.webp'); 
  }

  .img-20 {
      background-image: url('../images/tab-cyclone-3.webp'); 
  }

  .img-21 {
      background-image: url('../images/tab-concrete-04.webp');
  }

/** Carousel Tabs -- NOT IN USE **/
#carousel-tabs .nav-link.active {
    color: var(--cnvs-skyblue);
    background-color: rgb(53 137 220 / 10%);
}

video {
  width: 100%;
  height: auto;
  max-height: 300px;
}

.mt-8-mobile {
  margin-top: 6rem !important;
}
@media (min-width:1024px) and (max-width:1439px) {
.mt-8-mobile {
  margin-top: 6rem !important;
  }	
}
@media (min-width:1440px) {
.mt-8-mobile {
  margin-top: 8rem !important;
  }	
}
@media (min-width:768px) {
	.pl-tab {
		padding-left: 2.3rem !important;
	}
}

/* ^^ Section 1 */

/**
***  Section 2
**/
#section-2-container {
    --cnvs-section-padding: 2rem;
}
.image-container__beforeafter {
    width: 100%;
    border: 5px solid var(--cnvs-themecolor);
}

.image-container__beforeafter img:first-of-type {
    filter: grayscale(100%);
}

.image-container__beforeafter img:nth-child(2) {
    border-top: 5px solid var(--cnvs-themecolor);
}

.image-container__beforeafter img {
    width: 100%;
    height: auto;
}

/* Remove spacing between elements inside each column */
#section-2-container .column > * {
    margin: 0;
}

#section-2-container .row {
    gap: 2rem;
    flex-direction: column;
    flex-wrap: wrap;
 }
 @media (min-width: 992px) {
    #section-2-container .row {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-right: 0;
        gap: 6px;
    }
 }

 .display-7 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2;
  }
  @media (min-width: 1200px) {
    .display-7 {
      font-size: 2rem;
    }
  }


/* ^^ Section 2 */

/**
***  Section 3
**/
.full-width-container {
    width: 100vw;
    height: 530px; 
    background-image: url('../images/custom-star-gate-texas-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}
.testimonial-bg {
    background-image: url('../images/custom-star-gate-texas-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Semi-transparent blue overlay with diagonal slant */
.overlay {
    --cnvs-themecolor-rgb: 16, 29, 82;
    width: 100%; 
    height: 100%;
    background: rgba(var(--cnvs-themecolor-rgb), 0.8); 
    position: absolute;
    left: 0;
    top: 0;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
 }
 .b-overlay {
    --cnvs-themecolor-rgb: 16, 29, 82;
    width: 100%; 
    height: 100%;
    background: rgba(var(--cnvs-themecolor-rgb), 0.6); 
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
  }
/* Text container inside the overlay */
.overlay-text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    color: white;
    padding: 3rem 1rem 1rem 1rem;
}

  @media (min-width:569px) and (max-width:1074px) {
    .full-width-container {
        height: 450px;
    }
    .overlay {
        width: 77%;
    }
    .overlay-text {
        width: 66%;
        padding: 2rem 2rem 0 2rem;
    }
  }
  @media (min-width:1075px) {
    .full-width-container {
        height: 450px;
    }
    .overlay {
        width: 42%;
    }
    .overlay-text {
        width: 35%;
        padding: 2rem 2rem 0 2rem;
    }
  }

    #swiper-tab .swiper-slide {
      text-align: center;
      line-height: 50vh;
      font-weight: 500;
    }
    .swiper-pagination-progress {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 100%;
      height: auto;
      border-radius: 0;
      opacity: 1;
      margin: 0px;
      background-color: transparent;
    }
    .swiper-pagination-progress .swiper-pagination-bar {
      position: absolute;
      bottom: 0;
      border-radius: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 3px;
      margin: 0px;
      background-color: #498ac0;
    }
    .swiper-pagination-progress .swiper-pagination-bar,
    .swiper-pagination-progress .swiper-pagination span:hover {
      --cnvs-slider-arrow-color:red;
    }

    .swiper-pagination-progress .swiper-pagination-bar-active {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      width: 0%;
      height: 3px;
      border-radius: 0;
      margin: 0px;
      background-color: #111111;
    }
    .active .swiper-pagination-progress .swiper-pagination-bar-active {
      animation-name: countingBar;
      animation-duration: 9s;
      animation-timing-function: ease-in;
      animation-iteration-count: 1;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }
    @keyframes countingBar {
      0% {
        width: 0;
      }
      100% {
        width: 100%;
      }
    }
    #swiper-tab .swiper-wrapper {
      padding-bottom: 30px;
    }

    .swiper-links-container {
      list-style-type: none;
    }

    .swiper-tab-link {
      position: relative;
    }

    .swiper-tab-link.active {
      background-color: #AAA !important;
    }

    .bg-blue {
      --bs-bg-opacity: 1;
      background-color: rgba(154, 208, 253, var(--bs-bg-opacity)) !important;
    }

/* ^^ Section 3 */

/**
***  Section 4
**/
.masonry-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 100px;
    row-gap: 1rem;
 }
 @media (min-width:510px) {
    .masonry-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
 }

.item {
    background-color: var(--cnvs-skyblue);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 1.2em;
    color: #fff;
}
.item:hover {
    transform: translateY(-10px);
}
.item1 { 
    grid-row: span 6;
    grid-column: span 2;
    background-image: url('../images/usvi-gallery-1.webp'); 
    /*background-image: -webkit-image-set(
        url("../images/about-our-company-hero-bg-768x200.webp") 1x,
        url("../images/about-our-company-hero-bg-1920x500.webp") 2x);*/
 }
 @media (min-width:768px) and (max-width:991px) {
    .item1 { 
        grid-row: span 5;
        grid-column: span 1;
    }
 }
 @media (min-width:992px) and (max-width:1199px) {
    .item1 { 
        grid-row: span 6;
        grid-column: span 2;
    }
 }
 @media (min-width:1200px) and (max-width:1399px) {
    .item1 { 
        grid-row: span 5;
        grid-column: span 2;
    }
 }
 @media (min-width:1400px) {
    .item1 { 
        grid-row: span 6;
        grid-column: span 2;
    }
 }
.item2 { 
    grid-row: span 2;
    background-image: url('../images/usvi-gallery-2.webp'); 
}
.item3 { 
    grid-row: span 3;
    background-image: url('../images/usvi-gallery-3.webp'); 
 }
 @media (min-width:768px) and (max-width:991px) {
    .item3 { 
        grid-row: span 2;
    }
 }
 @media (min-width:992px) and (max-width:1199px) {
    .item3 { 
        grid-row: span 3;
    }
 }
 @media (min-width:1200px) and (max-width:1399px) {
    .item3 { 
        grid-row: span 4;
    }
 }
 @media (min-width:1400px) {
    .item3 { 
        grid-row: span 3;
    }
 }
.item4 { 
    grid-row: span 3;
    background-image: url('../images/usvi-gallery-4.webp'); 
}
.item5 { 
    grid-row: span 3;
    background-image: url('../images/usvi-gallery-5.webp'); 
 }
 @media (min-width:768px) and (max-width:991px) {
    .item5 { 
        grid-row: span 2;
    }
 }
 @media (min-width:992px) and (max-width:1199px) {
    .item5 { 
        grid-row: span 3;
    }
 }
 @media (min-width:1200px) and (max-width:1399px) {
    .item5 { 
        grid-row: span 4;
    }
 }
 @media (min-width:1400px) {
    .item5 { 
        grid-row: span 3;
    }
 }
.item6 { 
    grid-column: span 2;
    grid-row: span 3;
    background-image: url('../images/usvi-gallery-6.webp'); 
 }
 @media (min-width:768px) and (max-width:991px) {
    .item6 { 
        grid-column: span 3;
    }
 }
 @media (min-width:992px) {
    .item6 { 
        grid-column: span 2;
    }
 }
.item7 { 
    grid-column: span 2;
    grid-row: span 3;
    background-image: url('../images/usvi-gallery-7.webp'); 
 }
 @media (min-width:768px) and (max-width:991px) {
    .item7 { 
        grid-column: span 3;
    }
 }
 @media (min-width:992px) {
    .item7 { 
        grid-column: span 2;
    }
 }
.item8 { 
    background-image: url('../images/usvi-gallery-8.webp'); 
}
.item div {
    background-color: rgba(var(--cnvs-themecolor-rgb), 0.6);
    width: 100%;
    padding: 20px;
    text-align: center;    
}
/* ^^ Section 4 */

.mx-md-n0 {
  margin-top: 0;
  margin-bottom: 0;
}