/*  Theme Name: Hello Elementor Child
    Author: Forazi Tech
	Author URI: https://forazitech.com/
	Template: hello-elementor
	Version: 1.0.0
*/


@media (max-width: 767px){
    .apg-container{
    flex-direction: column-reverse;
    gap: 8px !important;
}

.apg-thumbnails{
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    height: fit-content !important;
    gap: 8px !important;
}

.apg-slider {
    min-height: fit-content !important;
}

.apg-main {
    max-width: 100% !important;
    padding-left: 0 !important;
}

.apg-thumbnail {
    min-width: 25%;
}

.apg-arrows{
    display: none !important;
}
}





/* Main Container */
.apg-container {
    display: flex;
    gap: 0px;
    margin: 0 0;
}

/* Thumbnails Column */
.apg-thumbnails {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 24px;
    max-width: 12%;
    overflow-y: auto;
    scrollbar-width: none;
    border-radius: 12px;
}

.apg-thumbnails::-webkit-scrollbar {
    display: none;
}

.apg-thumbnail {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0px solid #ddd;
    border-radius: 12px;
}

.apg-thumbnail:hover {
    border-color: #0073aa;
}

.apg-thumbnail.active {
    border-color: #0073aa;
    transform: scale(1);
}

.apg-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px !important;
}

/* Main Image Area */
.apg-main {
    flex: 1;
    position: relative;
    max-width: 88%;
    padding-left: 24px;
}

.apg-slider {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}

.apg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.apg-slide.active {
    opacity: 1;
    position: relative;
}

.apg-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

/* Navigation Arrows */
.apg-arrows {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
    width: calc(100% - 56px);
    z-index: 10;
}

.apg-arrow {
    cursor: pointer;
    transition: all 0.3s ease;
    
    height: 56px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0px 0px 0px 1px rgba(14, 59, 101, 0.04), 0px 1px 1px 0px rgba(14, 59, 101, 0.04), 0px 3px 3px 0px rgba(14, 59, 101, 0.03), 0px 6px 4px 0px rgba(14, 59, 101, 0.02), 0px 11px 4px 0px rgba(14, 59, 101, 0.01), 0px 32px 24px -12px rgba(14, 59, 101, 0.06);
    backdrop-filter: blur(4px);
}

.apg-arrow:hover {
    background: rgba(255, 255, 255, 0.30);;
}