/* Farmers Testimonials Section */
.farmers-testimonials {
    padding: 60px 0; /* Adds 60px padding to the top and bottom of the section */
    background-color: white; /* Sets a light gray background color */
}

/* Styles for the section title heading */
.farmers-testimonials .sec-title h2 {
    font-size: 3rem; /* Sets the font size to 36px */
    margin-bottom: 20px; /* Adds 20px margin below the heading */
    text-align: center; /* Center-align the text */
    font-weight: bold; /* Make the text bold */
}

/* Styles for the "Farmers'" text in the heading */
.farmers-testimonials .sec-title h2 .gold {
    color: gold; /* Sets the text color to gold */
}

/* Styles for the "Testimonies" text in the heading */
.farmers-testimonials .sec-title h2 .green {
    color: green; /* Sets the text color to green */
}

/* Styles for the section title paragraph */
.farmers-testimonials .sec-title p {
    font-size: 18px; /* Sets the font size to 18px */
    color: black; /* Sets a grayish color for the paragraph text */
    margin-bottom: 25px;
}

/* Testimonial Videos Wrapper */
.testimonial-videos {
    display: flex; /* Displays the video items in a flex container */
    justify-content: space-between; /* Distributes space between video items */
    gap: 20px; /* Adds 20px gap between video items */
    flex-wrap: wrap; /* Allows video items to wrap to the next line if needed */
    margin-bottom: 30px; /* Adds 30px margin below the video wrapper */
}

/* Individual Video Item */
.video-item {
    width: 30%; /* Sets the width of each video item to 30% of the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the video item */
    background-color: white; /* Sets the background color to white */
    padding: 10px; /* Adds 10px padding inside the video item */
    border-radius: 8px; /* Rounds the corners of the video item */
    text-align: center; /* Centers the content inside the video item */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    border: 1px solid white; /* Adds a green border around the video item */
    position: relative; /* Enables positioning for the pseudo-element (tick) */
    overflow: hidden; /* Ensures the border-radius and pseudo-element don't overflow */
}

/* Styles for the iframe inside the video item */
.video-item iframe {
    border-radius: 8px; /* Rounds the corners of the iframe */
    max-width: 100%; /* Ensures the iframe is responsive and doesn't overflow */
    height: 250px; /* Maintains the aspect ratio of the iframe */
}

/* Styles for the video description text */
.video-item .video-description {
    font-size: 16px; /* Increase font size */
    color: black; /* Sets the text color to black */
    margin-top: 15px; /* Adds 15px margin above the description */
    padding-bottom: 10px; /* Adds 10px padding below the description */
}

/* Green tick border effect using a pseudo-element */
.video-item::before {
    content: ''; /* Required for pseudo-elements */
    position: absolute; /* Positions the pseudo-element absolutely within the video item */
    top: -2px; /* Aligns the pseudo-element with the top border */
    left: -2px; /* Aligns the pseudo-element with the left border */
    width: calc(100% + 4px); /* Makes the pseudo-element cover the entire border area */
    height: calc(100% + 4px); /* Makes the pseudo-element cover the entire border area */
    border: 2px solid gold; /* Adds a green border */
    border-radius: 8px; /* Matches the border-radius of the video item */
    z-index: -1; /* Places the pseudo-element behind the video item content */
    animation: tickBorder 2s infinite linear; /* Adds a continuous animation */
}

/* Keyframes for the green tick border animation */
@keyframes tickBorder {
    0% {
        transform: scale(1); /* Starts at normal size */
        opacity: 1; /* Fully visible */
    }
    50% {
        transform: scale(1.05); /* Slightly enlarges the border */
        opacity: 0.7; /* Partially transparent */
    }
    100% {
        transform: scale(1); /* Returns to normal size */
        opacity: 1; /* Fully visible */
    }
} 

/* Responsive Design for smaller screens */
@media screen and (max-width: 768px) {
    .video-item {
        width: 100%; /* Makes each video item take up the full width on smaller screens */
        margin-bottom: 20px; /* Adds 20px margin below each video item */
    }
}

/* Read More Button */
.read-more-btn .btn {
    background-color: green; /* Sets the button background color to green */
    color: white; /* Sets the button text color to white */
    padding: 12px 30px; /* Adds padding inside the button */
    font-size: 18px; /* Sets the font size to 18px */
    border-radius: 25px; /* Rounds the corners of the button */
    text-decoration: none; /* Removes the underline from the button text */
    transition: background-color 0.3s; /* Adds a smooth transition for the background color */
}

/* Hover effect for the Read More button */
.read-more-btn .btn:hover {
    background-color: gold; /* Darkens the button color on hover */
    color: green;
}

/* Modal Style */
.video-modal {
    display: none; /* Hides the modal by default */
    position: fixed; /* Fixes the modal position on the screen */
    z-index: 1; /* Ensures the modal appears above other content */
    left: 0; /* Positions the modal at the left edge of the screen */
    top: 0; /* Positions the modal at the top edge of the screen */
    width: 100%; /* Makes the modal take up the full width of the screen */
    height: 100%; /* Makes the modal take up the full height of the screen */
    overflow: auto; /* Adds scrollbars if the content overflows */
    background-color: rgba(0, 0, 0, 0.8); /* Adds a semi-transparent black background */
    padding-top: 60px; /* Adds 60px padding to the top of the modal */
}

/* Styles for the modal content */
.modal-content {
    background-color: #fefefe; /* Sets a white background for the modal content */
    margin: 5% auto; /* Centers the modal content vertically and horizontally */
    padding: 20px; /* Adds 20px padding inside the modal content */
    border: 1px solid #888; /* Adds a light gray border around the modal content */
    width: 80%; /* Sets the width of the modal content to 80% of the screen */
}

/* Styles for the close button in the modal */
.close-modal {
    color: #aaa; /* Sets the close button color to light gray */
    font-size: 28px; /* Sets the font size to 28px */
    font-weight: bold; /* Makes the close button text bold */
    position: absolute; /* Positions the close button absolutely within the modal */
    top: 0; /* Positions the close button at the top */
    right: 25px; /* Positions the close button 25px from the right */
}

/* Hover and focus effects for the close button */
.close-modal:hover,
.close-modal:focus {
    color: black; /* Changes the close button color to black on hover/focus */
    text-decoration: none; /* Removes any text decoration */
    cursor: pointer; /* Changes the cursor to a pointer on hover/focus */
}

/* Animation for sliding in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); /* Starts the element off-screen to the left */
        opacity: 0; /* Makes the element fully transparent at the start */
    }
    100% {
        transform: translateX(0); /* Moves the element to its original position */
        opacity: 1; /* Makes the element fully visible at the end */
    }
}

/* Apply the animation to the section title and paragraph */
.farmers-testimonials .sec-title h2,
.farmers-testimonials .sec-title p {
    opacity: 0; /* Makes the elements initially transparent */
    transform: translateX(-100%); /* Moves the elements off-screen to the left */
}

/* Animation for the section title heading */
.farmers-testimonials .sec-title h2 {
    animation: slideInFromLeft 1s ease-out 0.5s forwards; /* Slides in the heading after 0.5s */
}

/* Animation for the section title paragraph */
.farmers-testimonials .sec-title p {
    animation: slideInFromLeft 1s ease-out 1s forwards; /* Slides in the paragraph after 1s */
}

/* Initially hide the videos */
.testimonial-videos .video-item {
    opacity: 0; /* Makes the video items initially transparent */
    transform: translateY(20px); /* Moves the video items 20px down */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Adds a smooth transition */
}

/* Animation for the first video item */
.testimonial-videos .video-item:nth-child(1) {
    animation: fadeIn 1s ease-out 3s forwards; /* Fades in the first video after 3s */
}

/* Animation for the second video item */
.testimonial-videos .video-item:nth-child(2) {
    animation: fadeIn 1s ease-out 6s forwards; /* Fades in the second video after 6s */
}

/* Animation for the third video item */
.testimonial-videos .video-item:nth-child(3) {
    animation: fadeIn 1s ease-out 9s forwards; /* Fades in the third video after 9s */
}

/* Keyframes for the fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0; /* Starts the element fully transparent */
        transform: translateY(20px); /* Moves the element 20px down */
    }
    100% {
        opacity: 1; /* Makes the element fully visible */
        transform: translateY(0); /* Moves the element to its original position */
    }
}