/* General styling for the about us section */
.about-us1 {
    width: 100%; /* Full width of the page */
    margin: 0 auto; /* Center the section */
}

/* Styling for the header */
.about-us-header1 {
    background-image: url('../Assets/pexels-pixabay-358220.jpg'); /* Background image */
    background-size: cover; /* Ensure the image covers the area */
    background-position: center; /* Center the image */
    height: 200px; /* Set the height of the section */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    position: relative; /* For overlay positioning */
    text-align: center; /* Center text alignment */
}

/* Text styling */
.about-us-header1 h3 {
    font-size: 2.5rem; /* Large font size */
    font-weight: bold; /* Bold font for emphasis */
    color: white; /* Contrasting color for readability */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Subtle text shadow for better readability */
    margin: 0; /* Remove default margin */
}

/* Optional overlay for better text visibility */
.about-us-header1::before {
    content: ''; /* Add a pseudo-element */
    position: absolute; /* Position overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
    z-index: 1; /* Place behind text */
}

/* Ensure text stays on top of the overlay */
.about-us-header1 h3 {
    z-index: 2; /* Place text above overlay */
    position: relative;
}

/* Parent container for About Us content */
.about-us-content1 {
    display: flex;
    flex-direction: column; /* Default layout for smaller screens */
    gap: 20px; /* Space between .about-us-brief1 and .about-us-images1 */
    padding: 20px;
}

/* Styling for .about-us-brief1 */
.about-us-brief1 {
    padding: 20px;
    line-height: 1.6; /* Improve text readability */
    color: #333;
}

/* Styling for .about-us-images1 */
.about-us-images1 .mra,
.about-us-images1 .pdfDwn {
    width: 100%; /* Ensure both containers take up the same width */
}

.about-us-images1 {
    display: flex;
    flex-direction: column; /* Stack images and text */
    justify-content: flex-start;
    align-items: center;
    gap: 20px; /* Space between image and PDF download link */
    padding: 20px;
}

.about-us-images1 img {
    max-width: 100%; /* Ensure responsiveness */
    height: auto;
    border-radius: 8px; /* Optional: rounded corners for images */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

.pdfDwn {
    text-align: center; /* Center-align the contents */
    width: fit-content; /* Shrink the width to fit the button size */
    margin: 0 auto; /* Center the container */
}

.pdfDwn a {
    display: block; /* Ensure the link takes its own line */
    font-size: 18px; /* Make the text larger for better visibility */
    font-weight: bold; /* Emphasize the text */
    margin-bottom: 10px; /* Add space below the text */
    text-decoration: none; /* Remove underline */
    color: #007bff; /* Optional: Add a color */
}

.mra img {
    width: 100%; /* Set the first image to take full width of its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Add rounded corners for consistency */
}


.pdfDwn img {
    width: 100%; /* Match the button's width */
    max-wdth: 200px; /* Optional: Add a max width to prevent excessive scaling */
    margin-top: 10px; /* Add spacing above the image */
    border-radius: 8px; /* Optional: Add rounded corners */
}

.about-us-images1 .pdfDwn {
    display: flex;
    flex-direction: column; /* Stack the button and image vertically */
    align-items: center; /* Center-align content inside this container */
}

.about-us-images1 .pdfDwn img {
    max-height: 150px; /* Adjust the height to fit better */
    width: auto; /* Maintain aspect ratio */
    margin-top: 10px; /* Add some space above the image */
    border-radius: 8px; /* Optional: Add rounded corners for better aesthetics */
}


.about-us-images1 p {
    text-align: center;
    font-size: 1rem;
    color: #555;
}

/* PDF Download Styling */
.pdfDwn a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 15px;
    border: 2px solid #007bff;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.pdfDwn a:hover {
    background-color: #007bff;
    color: #fff;
}

/* Larger screens (1024px and above) */
@media (min-width: 1024px) {
    .about-us-content1 {
        flex-direction: row; /* Align items side by side */
        align-items: flex-start;
    }

    .about-us-brief1 {
        flex: 0 0 70%; /* Take up 70% of the available width */
    }

    .about-us-images1 {
        flex: 0 0 30%; /* Take up the remaining 30% */
    }
}


/* Adjust spacing and alignment of heading */
.about-us-brief1 h4 {
    font-size: 1.8rem; /* Slightly larger for emphasis */
    font-weight: bold; /* Make it stand out */
    margin-bottom: 15px; /* Space below the heading */
    color: #007bff; /* Accent color */
    text-align: center; /* Center heading text */
}

/* Adjust caption spacing */
.about-us-brief1 caption {
    display: block;
    font-size: 1.2rem; /* Bold and slightly larger */
    font-weight: 800;
    color: #555; /* Softer gray for contrast */
    margin-bottom: 20px; /* Add space below the caption */
    text-align: center; /* Center align caption */
}

/* Styling for paragraphs */
.about-us-brief1 p {
    margin-bottom: 20px; /* Space between paragraphs */
    text-align: justify; /* Justify text for a clean block appearance */
}

.majorP, .minorP {
    word-wrap: break-word;   /* Ensure long words break and don't overflow */
    overflow-wrap: break-word;  /* Similar to word-wrap, for better compatibility */
    width: 100%;  /* Make sure the paragraphs take the full available width */
    box-sizing: border-box;  /* Prevent padding from affecting width */
}

/* Specific styling for .majorP */
.about-us-brief1 .majorP {
    font-size: 0.9rem;
    font-weight: 400; /* Normal weight for content */
    color: #333;
    margin-bottom: 20px;
}

/* Specific styling for .minorP */
.about-us-brief1 .minorP {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    border-right: 3px solid #007bff; /* Accent border */
    padding-right: 15px; /* Add space between text and border */
}

/* Responsive design */
@media (max-width: 768px) {
    .about-us-brief1 {
        padding: 0 15px; /* Add side padding for smaller screens */
    }

    .about-us-brief1 h4 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    .about-us-brief1 caption {
        font-size: 1rem; /* Reduce caption size */
    }

    .about-us-brief1 .minorP {
        font-size: 1rem; /* Adjust minorP font size */
    }

    .mra img {
        max-width: 90%; /* Ensure the image doesn't exceed container width */
        height: auto;    /* Maintain aspect ratio */
    }

    .opBlock {
        flex-direction: column;
        align-items: center;
    }

    .profession1, .profession2, .profession3, .profession4 {
        width: 90%; /* Make each profession take most of the width on smaller screens */
    }

}


/* styling for profession block */
.professions {
    text-align: center;
    padding: 60px 20px; /* Increased padding for better spacing */
    background: linear-gradient(135deg, #eceff1, #f4f4f4); /* Subtle background gradient */
    border-top: 5px solid #007bff; /* Top border for a cleaner look */
}

.professions h3 {
    font-size: 2.5rem; /* Slightly larger for better readability */
    margin-bottom: 30px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase; /* For a more professional tone */
}

.opBlock {
    display: flex;
    flex-direction: column; /* Stack items for mobile */
    align-items: center;
    gap: 20px;
}

.profession1, .profession2, .profession3, .profession4 {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px; /* Rounder corners for a modern look */
    width: 90%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px; /* Equal height for consistency */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
    position: relative;
}

.profession1 i, .profession2 i, .profession3 i, .profession4 i {
    font-size: 3.5rem; /* Slightly larger icons for prominence */
    color: #007bff; /* Consistent color for icons */
    margin-bottom: 20px;
}

.profession1 h6, .profession2 h6, .profession3 h6, .profession4 h6 {
    font-size: 1.4rem; /* Adjusted size for better hierarchy */
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase; /* Consistent with heading */
}

.profession1 p, .profession2 p, .profession3 p, .profession4 p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.profession1:hover, .profession2:hover, .profession3:hover, .profession4:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
    box-shadow: 0px 8px 20px rgba(0, 123, 255, 0.2); /* Larger shadow for hover */
}

.profession1:before, .profession2:before, .profession3:before, .profession4:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #007bff; /* Accent color line at the top of each card */
    border-radius: 12px 12px 0 0;
}

/* styles for board members */
.board-members {
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9; /* Light background for a professional look */
}

.board-members h3 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
}

.board-members-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Center the items */
}

.board-members-profiles > div {
    flex: 1 1 calc(50% - 20px); /* Two profiles per row with spacing */
    max-width: calc(50% - 20px); /* Limit width to maintain spacing */
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.board-members-profiles > div:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}

.board-members-profiles img {
    width: 120px; /* Fixed width */
    height: 120px; /* Fixed height */
    border-radius: 50%; /* Circular images */
    margin-bottom: 10px;
    object-fit: cover; /* Ensures the image fills the space while maintaining aspect ratio */
    border: 2px solid #ddd; /* Optional: Add a subtle border */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Slight shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.board-members-profiles img:hover {
    transform: scale(1.05); /* Subtle zoom effect on hover */
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}


.board-members-profiles span {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.board-members-profiles small {
    display: block;
    font-size: 0.9rem;
    color: #666;
}


/* Large Screen Layout (768px to 1200px) */
@media (min-width: 768px) and (max-width: 1200px) {
    .opBlock {
        flex-direction: row; /* Align items in a row on larger screens between 768px and 1200px */
        justify-content: space-between; /* Add space between the items */
        align-items: flex-start; /* Align items to the top */
    }

    .profession1, .profession2, .profession3, .profession4 {
        width: 48%; /* Make each profession take up 48% of the container's width for 2 items in a row */
    }

    .board-members-profiles > div {
        flex: 1 1 calc(50% - 40px); /* Two profiles per row */
        max-width: calc(50% - 40px);
    }
}

/* Large Screen Layout (1200px and above) */
@media (min-width: 1200px) {
    .opBlock {
        flex-direction: row; /* Align items in a row on large screens */
        justify-content: space-between; /* Add space between the items */
        align-items: stretch; /* Ensure all items are stretched equally */
    }

    .profession1, .profession2, .profession3, .profession4 {
        width: 22%; /* Make each profession take up 22% of the container's width for 4 items in a row */
        max-height: 400px; /* Set a minimum height for consistency */
        height: auto; /* Allow the height to adjust depending on content */
    }

    /* Ensure text inside each profession is aligned properly */
    .profession1, .profession2, .profession3, .profession4 {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Space the content evenly */
        align-items: center; /* Center the content horizontally */
        text-align: center; /* Ensure text is centered */
    }

    /* Adjust margin for the last element for better spacing */
    .profession4 {
        margin-right: 0; /* Fix right margin to align correctly */
    }

    .board-members-profiles > div {
        flex: 1 1 calc(25% - 20px); /* Four profiles in one row */
        max-width: calc(25% - 20px);
    }
}