/************************************************************************************/
/*    Tony's Plumbing Co. Mobile Page Style 1                                              */
/*    https://tonysplumbingco.com/m/css/mStyle1.css                                 */
/*    Copyright (c) 2021 AUTHORS.txt; Licensed 682234                               */
/************************************************************************************/
.carousel-container {
 width: 100%;
 margin: auto;
 position: relative;
 display: flex;
 flex-direction: column;
 gap: var(--lx-gap);
}
.carousel {
 aspect-ratio: 16 / 9;
 width: 100%;
 position: relative;
 overflow: hidden;
}
.carousel .item {
 opacity: 0;
 width: 100%;
 height: 100%;
 display: none;
 transition: opacity 0.5s ease-in-out;
}
.carousel .item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center;
}
.carousel .item .caption {
 width: 100%;
 padding: var(--lx-space-01);
 position: absolute;
 bottom: 0;
 text-transform: uppercase;
 text-align: center;
 color: antiquewhite;
 font-size: 12px;
 background-color: rgba(0, 0, 0, 0.5);
}
.carousel .item.active {
 opacity: 1;
 display: block;
}
.btn {
 width: 160px;
 height: 50px;
 padding: 1em 2em;
 position: absolute;
 transform: translateY(-50%);
 top: 122%;
 outline: none;
 border: none;
 cursor: pointer;
 text-transform: uppercase;
 font-size: 16px;
 font-weight: 700;
 color: #ccffff;
 background-color: #2b92c3;
 transition: transform 0.2s ease-in-out;
}
.btn, .disable-double-tap-zoom {
 touch-action: manipulation;
 user-select: none;
 -webkit-user-select: none; /* For Safari and Chrome */
 -moz-user-select: none; /* For Firefox */
 -ms-user-select: none; /* For Internet Explorer */
}
.btn:hover {
 transform: translateY(-50%) scale(0.96);
}
.prev {
 left: 0%;
}
.next {
 right: 0%;
}
.dots {
 display: flex;
 align-items: center;
 padding-top: 20px;
 justify-content: center;
 gap: 3px;
}
.dots .dot {
 cursor: pointer;
 height: 3px;
 width: 3px;
 border-radius: 50%;
 background-color: #242421;
 transition: background-color 0.2s ease;
}
.dots .dot.active, .dots .dot:hover {
 background-color: #ccffff;
}