/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*grid anim css*/

.grid-anim {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

.image-container {
            position: relative;
            height: 650px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            overflow: visible;
        }

        .image-container div {
            position: absolute;
            transition: transform 0.5s ease, transform 1s ease-out;
            transition-delay: 0.2s;
        }

        /* Different sizes for each image */
        .image1 {
            width: 190px;
			height: 350px;
			background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/10/grid1-img.png);
			background-size: cover;
			top: 0;
			left: 12%;
        }

        .image2 {
            width: 200px;
			height: 300px;
			background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/10/grid3-img.png);
			background-size: contain;
			background-repeat: no-repeat;
			right: 9%;
        }

        .image3 {
			width: 290px;
			height: 215px;
			background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/10/grid2-img.png);
			background-size: contain;
			background-repeat: no-repeat;
			bottom: -4%;
			left: 0;
		}

        .image4 {
			width: 170px;
			height: 319px;
			background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/10/grid4-img.png);
			background-size: cover;
			background-position-x: right;
			bottom: 0;
			right: -3%;
		
		}

        /* Hover effect */
       
		.grid-image-container:hover .image1 {
            transform: translateX(20px);
        }
        
        .grid-image-container:hover .image2 {
            transform: translate(-30px, 25px);
        }

        .grid-image-container:hover .image3 {
            transform: translateY(-60px);
        }

        .grid-image-container:hover .image4 {
            transform: translate(-125px, 30px);
        }

        /* Return to original position with delay */
        .image1, .image2, .image3, .image4 {
            transition-delay: 1s;
        }


/*tab slider css*/
		.tab-container {
			display: flex;
			overflow: hidden;
		}

        /* Left side list */
       .list-container {
    width: 50%;
    padding: 20px 50px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

     .list-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    transition: color 0.3s ease;
    border-bottom: 1px solid transparent !important;
    font-family: 'sohne_breitleicht';
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    text-align: left;
}
        .list-item:hover {
            color: #fff;
			border-bottom: 1px solid #ddd;
        }

.essentialslider span.tab-icon {
    margin-right: 25px;
}

        /* Active class for list items */
        .list-item.active {
    color: #fff;
    border-bottom: 1px solid #fff!important;
}

        /* Right side image display */
        .image-containr {
            width: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .image-containr img {
          /*  max-width: 100%;
            max-height: 100%; */
			max-width: 400px;
            opacity: 0;
            transition: opacity 0.5s ease;
            position: absolute;
        }

        .image-containr img.active {
            opacity: 1;
        }
		/* Arrow buttons */
        .arrows {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            padding: 5px 10px;
            user-select: none;
        }
		.arrows img {
			opacity: 1;
			/* max-width: 50px !important; */
			position: initial;
		}

        .leftarrow {
            left: 10px;
        }

        .rightarrow {
            right: 10px;
        }


/*dropdown slider css*/

.containr {
            display: flex;
            height: 60vh;
            overflow: hidden;
        }

        /* Left side dropdown */
        .dropdown-containr {
            width: 20%;
			display: flex;
			flex-direction: column;
			justify-content: end;
			z-index: 1;
		}

        select {
            width: 100%;
            cursor: pointer;
        }

        /* Right side cntnt */
        .cntnt-containr {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: end;
			align-items: center;
			overflow: hidden;
			text-align: center;
        }

        .cntnt {
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    display: flex;
    gap: 50px;
    align-items: end;
}

        .cntnt.active {
            opacity: 1;
        }

       .cntnt img {
    max-width: 270px;
}

        .cntnt-text {
            /*font-size: 1.2em;
            margin-top: 10px;
			*/
        }


/*slider number*/
.navigation-slider .flickity-page-dots {
	 position: relative;
	 left: 50%;
	 width: 70px;
	 height: 20px;
	 margin-left: -35px;
}
.navigation-slider .flickity-page-dots:before {
	 content: "/";
}
.navigation-slider .flickity-page-dots .dot, .flickity-page-dots .dot:before, .flickity-page-dots .dot:after {
	 float: left;
	 width: 30px;
	 height: 20px;
}
.navigation-slider .flickity-page-dots .dot {
	 counter-increment: carousel-cell;
	 position: absolute;
	 left: 0;
	 margin: 0;
	 opacity: 1;
}
.navigation-slider .flickity-page-dots .dot.is-selected {
	 z-index: 1;
}
.navigation-slider .flickity-page-dots .dot:before {
	 content: counter(carousel-cell);
	 background-color: #f5f5f5;
	 text-align: right;
}
.navigation-slider .flickity-page-dots .dot:last-child:after {
	 content: counter(carousel-cell);
	 position: absolute;
	 top: 0;
	 right: -65px;
	 text-align: left;
}
.slider-show-nav .flickity-prev-next-button, .slider:hover .flickity-prev-next-button {
    bottom: 0;
    top: auto;
}
/*
.navigation-slider .flickity-prev-next-button.next {
    right: 40%;
}
.navigation-slider .flickity-prev-next-button.previous {
    left: 40%;
}
*/

.navigation-slider .flickity-prev-next-button.next {
    right: 43%;
    bottom: -11px;
}
.navigation-slider .flickity-prev-next-button.previous {
    left: 44%;
    bottom: -11px;
}


.nav-vertical+.tab-panels {
    border: none;
}
/*slider arrow custom css*/
button.flickity-button svg path {
    visibility: hidden;
}
button.flickity-button svg {
    background-color: #062235;
    background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/11/Arrow-left.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
button.flickity-button.next svg {
    background-image: url(https://ubb.in/thepinnacle/wp-content/uploads/2024/11/Arrow-right.svg);
   }
.slider-show-nav .flickity-prev-next-button, .slider:hover .flickity-prev-next-button {
    opacity: 1;
}


.GE .slider-nav-circle .flickity-prev-next-button .arrow, .GE .slider-nav-circle .flickity-prev-next-button svg {
    border: transparent;
    border-radius: 100%;
}



.cntnt.active img -> line number 235
    height: 450px;






@media only screen and (max-width: 600px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	
}


/*iPad pro*/

@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
	

}