/* Two-Column Grid for Images */
.image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; /* Space between grid items */
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

/* Individual Grid Items */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ensure Images Scale Well */
.grid-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0px; /* Optional rounded corners */
}

/* Caption Styling */
.caption {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
    font-weight: bold;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr; /* Single-column layout on mobile */
    }

    .caption {
        font-size: 0.9rem;
    }
}

/* Enlarged Title Section */
.blog-title {
    text-align: center;
    padding: 50px 20px; /* Increased padding for spacing */
    max-width: 1000px;
    margin: 0 auto; /* Centering */
}

/* Title Styling */
.blog-title h1 {
    font-size: 3rem; /* Large, bold title */
    font-weight: bold;
    color: #000; /* Adjust color as needed */
    line-height: 1.2;
}

/* Subtitle Styling */
.subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    color: #666; /* Softer color for subtitle */
    margin-top: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .blog-title {
        padding: 30px 15px; /* Reduce padding for smaller screens */
    }

    .blog-title h1 {
        font-size: 2.5rem; /* Slightly smaller title */
    }

    .subtitle {
        font-size: 1.2rem; /* Adjust subtitle size */
    }
}

@media (max-width: 480px) {
    .blog-title h1 {
        font-size: 2rem; /* Smaller font for mobile */
    }

    .subtitle {
        font-size: 1rem; /* Adjust subtitle size */
    }
}

/* Video Container - Responsive */
.video-container {
    position: relative;
    width: 100%; /* Full width */
    max-width: 1200px; /* Limits width on larger screens */
    margin: 0 auto; /* Centers it */
    overflow: hidden;
}

/* Video Element - Responsive */
.video-container video {
    width: 100%; /* Ensures it scales across all screen sizes */
    height: auto; /* Maintains aspect ratio */
    border-radius: 0px; /* Optional: Adds rounded corners */
}

/* Video Caption */
.video-container .caption {
    text-align: center;
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .video-container {
        max-width: 100%; /* Use full width on smaller screens */
        padding: 0 10px; /* Adds slight padding for mobile */
    }

    .video-container .caption {
        font-size: 0.9rem; /* Slightly smaller text */
    }
}

@media (max-width: 480px) {
    .video-container {
        padding: 0 5px; /* Less padding for very small screens */
    }

    .video-container .caption {
        font-size: 0.8rem; /* Further reduce font size */
    }
}


/* Two-Column Grid for Text */
.text-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px; /* Space between text sections */
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.6;
}

/* Individual Grid Text Blocks */
.grid-text {
    background-color: #FFFFFF; /* Light background for better contrast */
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 0px 00px rgba(0, 0, 0, 0.0); /* Soft shadow for elegance */
}

/* Text Styling */
.grid-text p {
    font-size: 1rem;
    color: #333;
    font-weight: 400;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .text-grid {
        grid-template-columns: 1fr; /* Single-column layout on mobile */
    }

    .grid-text {
        padding: 15px;
    }
}


/* Single-Column Grid Section */
.single-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px; /* Ensures the text doesn't stretch too wide */
    margin: 40px auto; /* Centers the section on the page */
    padding: 20px;
}

/* Styling for the Text Block */
.grid-text {
    background-color: #FFFFFF; /* Light background for better contrast */
    padding: 20px;
    border-radius: 0px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); /* Soft shadow for an elegant touch */
    text-align: center;
}

/* Text Styling */
.grid-text p {
    font-size: 1rem;
    color: #333;
    font-weight: 400;
    line-height: 1.6;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .single-grid {
        padding: 15px;
    }

    .grid-text {
        padding: 20px;
    }
}