/* General Styles for Instagram Post */
.ww-section-gallery {
    padding: 20px 0; /* Space around the gallery section */
}
/* Styles for Instagram Gallery Post */
.gallery-post {
    width: 100%; /* Make the gallery post full width */
    max-width: 400px; /* Set a max width to mimic Instagram post size */
    margin: 0 auto; /* Center the gallery post */
    background: white; /* Background color for the post */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    overflow: hidden; /* Prevent overflow */
}


.instagram-post {
    overflow: hidden; /* Ensures child elements don't overflow */
    width: 400px; /* Fixed width for the post */
    height: 500px; /* Fixed height for the post */
    padding: 0; /* No padding around the post to allow full image fit */
}

/* Post Header Styles */
.post-header {
    display: flex; /* Aligns items in a row */
    align-items: center; /* Vertically centers items */
    padding: 10px; /* Adds padding around the header */
    position: relative; /* Positioning context for absolute positioning */
}

/* Profile Container */
.profile-container {
    position: relative; /* Positioning context for absolute positioning of profile pictures */
    padding-top: 10px;
    margin-top: 16px;
}

/* Profile Pictures */
.profile-pic {
    width: 50px; /* Set a width for the profile picture */
    height: 50px; /* Set a height for the profile picture */
    border-radius: 50%; /* Makes the image circular */
    border: 2px solid #fff;
}

.profile-pic.top-right {
    position: absolute; /* Position absolutely */
    top: -10px; /* Adjust this value to position higher */
}

.profile-pic.bottom-left {
    position: relative; /* Keep this relatively positioned */
    margin-left: 20px; /* Space from the left */
    z-index: 4; /* Ensure it's above the other profile picture */
}

/* Change heart icon color to red */
.action-icon.left .fas.fa-heart {
    color: red; /* Set heart icon color to red */
}

/* Post Title Styles */
.post-title {
    font-size: 16px; /* Font size for the title */
    font-weight: bold; /* Make the title bold */
    margin: 0; /* Remove default margin */
    margin-left: 5px; /* Space to accommodate profile picture overlap */
}

/* Collaboration Text Styles */
.collab-text {
    margin: 0 0px; /* Space between profile names */
    font-size: 14px; /* Font size for the collaboration text */
    color: #555; /* Light color for the text */
}

/* Image Container Styles */
.image-container {
    overflow: hidden; /* Hide overflow for the scrolling effect */
    height: calc(100% - 90px); /* Use the remaining height after header */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the images horizontally */
}

/* Gallery Wrapper Styles */
.gallery-wrapper {
    display: flex;
    animation: scroll 30s linear infinite; /* Keep scrolling effect */
    animation-timing-function: ease-in-out;
    align-items: center; /* Center images vertically within the container */
    width: 100%; /* Ensure the wrapper takes full width of the container */
}

.gallery-item {
    min-width: 100%; /* Ensure each image takes up the full width of the container */
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease; /* Smooth transition */
}

.gallery-item img {
    width: 100%; /* Increase the width */
    height: auto; /* Maintain aspect ratio */
    max-width: none;
    max-height: 100%;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow around each image */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scaling and shadow */
}

.gallery-item img:hover {
    transform: scale(1.1); /* Slight zoom effect */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Shadow gets stronger on hover */
}


/* Caption Styles */
.caption {
    width: 100%; /* Full width */
    padding: 10px; /* Padding for spacing */
    background: #f8f8f8; /* Background color for visibility */
    border-top: 1px solid #dbdbdb; /* Light border above caption */
    box-sizing: border-box; /* Include padding in width */
}

/* Post Actions Styles */
.post-actions {
    display: flex;
    justify-content: space-between; /* Space between icons */
    align-items: center; /* Center icons vertically */
    padding: 10px; /* Padding around action icons */
    border-top: 1px solid #dbdbdb; /* Light border above actions */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding in width */
    background: #fff; /* Ensure background matches post */
}

/* Action Icon Styles */
.action-icon {
    display: flex;
    align-items: center; /* Center icons vertically */
    cursor: pointer; /* Pointer cursor for hover effect */
    font-size: 20px; /* Icon size */
    color: #262626; /* Dark color to match Instagram theme */
}


/* Adjust spacing between left action icons */
.action-icon.left {
    margin-right: 5px; /* Adjust this value to reduce space */
}

/* Align save icon to the right */
.action-icon.right {
    margin-left: auto; /* Align save icon to the right */
}

/* Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0); /* Start at the first image */
    }
    7.69% {
        transform: translateX(0); /* Pause at the first image */
    }
    9.23% {
        transform: translateX(-100%); /* Move to the second image */
    }
    16.92% {
        transform: translateX(-100%); /* Pause at the second image */
    }
    18.46% {
        transform: translateX(-200%); /* Move to the third image */
    }
    26.15% {
        transform: translateX(-200%); /* Pause at the third image */
    }
    27.69% {
        transform: translateX(-300%); /* Move to the fourth image */
    }
    35.38% {
        transform: translateX(-300%); /* Pause at the fourth image */
    }
    36.92% {
        transform: translateX(-400%); /* Move to the fifth image */
    }
    44.61% {
        transform: translateX(-400%); /* Pause at the fifth image */
    }
    46.15% {
        transform: translateX(-500%); /* Move to the sixth image */
    }
    53.84% {
        transform: translateX(-500%); /* Pause at the sixth image */
    }
    55.38% {
        transform: translateX(-600%); /* Move to the seventh image */
    }
    63.07% {
        transform: translateX(-600%); /* Pause at the seventh image */
    }
    64.61% {
        transform: translateX(-700%); /* Move to the eighth image */
    }
    72.30% {
        transform: translateX(-700%); /* Pause at the eighth image */
    }
    73.84% {
        transform: translateX(-800%); /* Move to the ninth image */
    }
    81.53% {
        transform: translateX(-800%); /* Pause at the ninth image */
    }
    83.07% {
        transform: translateX(-900%); /* Move to the tenth image */
    }
    90.76% {
        transform: translateX(-900%); /* Pause at the tenth image */
    }
    92.30% {
        transform: translateX(-1000%); /* Move to the eleventh image */
    }
    100% {
        transform: translateX(-1000%); /* Pause at the eleventh image */
    }
    101.54% {
        transform: translateX(-1100%); /* Move to the twelfth image */
    }
    109.23% {
        transform: translateX(-1100%); /* Pause at the twelfth image */
    }
    110.77% {
        transform: translateX(-1200%); /* Move to the thirteenth image */
    }
    118.46% {
        transform: translateX(-1200%); /* Pause at the thirteenth image */
    }
    120% {
        transform: translateX(0); /* Smooth transition back to the first image */
    }
}