/*
 * New CSS file specifically for the layout and styling of the About Us page.
 * This addresses content overflow and responsiveness for sections like "Our Core Strengths & Advantages".
 */

/* General layout adjustments for better spacing and modern look */
body {
    font-family: 'Inter', sans-serif; /* Ensures consistent font from previous setup */
    color: #333;
    background-color: #f8f9fa;
    line-height: 1.6; /* Improved default line height for body text */
}

/* Container padding adjustments */
.container.com-sp.pad-bot-70 {
    padding-top: 60px; /* Slightly more padding at top */
    padding-bottom: 80px; /* Slightly more padding at bottom */
}

/* Main content wrapper for the About Us page */
.cor.about-sp {
    padding: 40px; /* Increased padding for a more spacious feel */
    background-color: #fff;
    border-radius: 16px; /* More rounded corners */
    box-shadow: 0 8px 30px rgba(0,0,0,0.1); /* Enhanced shadow for depth */
    margin-top: 30px; /* Slightly more top margin */
}

/* Main title section styling */
.con-title {
    text-align: center;
    margin-bottom: 60px; /* Increased bottom margin */
}
.con-title h1 {
    font-size: 2.5em; /* Adjusted font size for better overall fit */
    color: #1a237e; /* Darker blue for headings */
    margin-bottom: 18px; /* Slightly increased margin */
    text-transform: uppercase;
    font-weight: 800; /* Bolder font weight */
    line-height: 1.2; /* Ensures better readability for multi-line titles */
    white-space: normal; /* Ensures text wraps within the available space */
    word-break: break-word; /* Helps break long words if necessary to prevent overflow */
    letter-spacing: 0.05em; /* Slightly increased letter spacing for title */
}
.con-title h1 span {
    color: #007bff; /* Accent blue */
    display: block; /* Ensures the span breaks to a new line for better emphasis on smaller screens */
    font-size: 0.8em; /* Make the span slightly smaller than the main title text */
    margin-top: 5px;
}
.con-title p {
    font-size: 1.15em; /* Slightly increased paragraph font size for better readability */
    color: #444; /* Slightly darker text for better contrast */
    line-height: 1.8; /* Ensures text has good vertical spacing */
    max-width: 850px; /* Adjusted max-width */
    margin: 0 auto;
    text-align: justify; /* टेक्स्ट को जस्टिफाई किया गया ताकि किनारों पर एक समान दिखे */
    word-break: break-word; /* लंबे शब्दों को तोड़ने में मदद करता है */
    margin-bottom: 20px; /* Added margin-bottom for separation between paragraphs */
}

/* Section for "Our Core Strengths & Advantages" */
.ed-about-sec1 {
    margin-bottom: 60px; /* Increased bottom margin */
}
.ed-about-sec1 h2 {
    font-size: 2.8em;
    color: #1a237e;
    text-align: center;
    margin-bottom: 45px; /* Increased margin */
    font-weight: 700; /* Bolder */
    letter-spacing: 0.03em;
}

/* Styling for the list of advantages (the boxes shown in the image) */
.ed-advan ul {
    list-style: none; /* Removes default list bullets */
    padding: 0; /* Removes default padding */
    display: grid; /* Uses CSS Grid for a flexible and responsive column layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax for slightly smaller boxes */
    gap: 25px; /* Reduced gap for compactness */
}
.ed-advan li {
    display: flex; /* Uses Flexbox for alignment of image and text within each list item */
    align-items: flex-start; /* Aligns items to the start of the cross axis (top) */
    background-color: #f8f9fa; /* Lighter background for a cleaner look */
    padding: 25px; /* Consistent padding */
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Improved shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border-left: 6px solid #007bff; /* Slightly thicker accent border */
}
.ed-advan li:hover {
    transform: translateY(-10px); /* More pronounced lift on hover */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); /* More pronounced shadow on hover */
    background-color: #eaf6ff; /* Subtle background change on hover */
}
.ed-ad-img {
    flex-shrink: 0; /* Prevents the image from shrinking */
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ed-ad-img img {
    width: 60px; /* Slightly smaller icons for better integration */
    height: 60px;
    object-fit: contain;
}
.ed-ad-dec {
    flex-grow: 1; /* Allows the text content to grow and fill available space */
}
.ed-ad-dec h4 {
    font-size: 1.5em; /* Heading font size adjusted */
    color: #0056b3; /* Darker accent blue */
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
}
.ed-ad-dec p {
    font-size: 0.9em; /* Paragraph font size slightly reduced for compactness */
    color: #555;
    line-height: 1.6; /* Line height adjusted for compactness */
    margin-bottom: 15px;
    text-align: left; /* Changed to left align for better readability in narrow columns */
    word-wrap: break-word; /* Use word-wrap instead of word-break for better compatibility */
    overflow-wrap: break-word; /* Modern alternative to word-wrap */
}
.ed-ad-dec a {
    color: #28a745; /* Green color for links */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.ed-ad-dec a:hover {
    color: #218838;
    text-decoration: underline;
}

/* Why Choose Us section styling */
.why-choose-us {
    margin-top: 60px;
    padding: 40px;
    background-color: #e6f7ff;
    border-radius: 16px; /* Consistent rounded corners */
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Improved shadow */
}
.why-choose-us h3 {
    font-size: 2.5em;
    color: #1a237e;
    margin-bottom: 35px;
    font-weight: 700;
}
.why-choose-us ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Reduced gap */
    text-align: left;
}
.why-choose-us li {
    background-color: #fff;
    padding: 25px;
    border-left: 6px solid #28a745; /* Green accent border */
    border-radius: 10px; /* Slightly less rounded than container */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-choose-us li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.why-choose-us li strong {
    display: block;
    font-size: 1.25em; /* Slightly smaller for better fit */
    color: #333;
    margin-bottom: 8px; /* Reduced margin */
}
.why-choose-us li p {
    font-size: 0.95em;
    color: #555;
}

/* FAQ Section styling */
.faq-section {
    margin-top: 60px;
    padding: 40px;
    background-color: #f7f7f7;
    border-radius: 16px; /* Consistent rounded corners */
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Improved shadow */
}
.faq-section h3 {
    text-align: center;
    font-size: 2.5em;
    color: #1a237e;
    margin-bottom: 35px;
    font-weight: 700;
}
.faq-item {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px; /* Consistent rounded corners */
    overflow: hidden;
    background-color: #fff;
    transition: box-shadow 0.3s ease;
}
.faq-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle shadow on hover */
}
.faq-question {
    background-color: #f0f0f0;
    padding: 18px 25px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 1.1em;
}
.faq-question:hover {
    background-color: #e5e5e5;
    color: #1a237e;
}
.faq-question::after {
    content: '+';
    font-size: 1.8em;
    font-weight: 300;
    transition: transform 0.3s ease;
}
.faq-question.active::after {
    content: '-';
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    background-color: #fff;
    color: #555;
    line-height: 1.7;
    font-size: 1em;
}
.faq-answer.active {
    max-height: 300px; /* Adjust as needed for content height */
    padding: 18px 25px;
}
.faq-answer p {
    margin: 0;
}

/* Responsive adjustments for various screen sizes */
@media (max-width: 992px) {
    .con-title h1 {
        font-size: 2em; /* मध्यम स्क्रीन के लिए फ़ॉन्ट साइज़ को और कम किया गया */
    }
    .con-title h1 span {
        font-size: 0.7em;
    }
    .ed-about-sec1 h2 {
        font-size: 2.2em;
    }
    .why-choose-us h3, .faq-section h3 {
        font-size: 2.2em;
    }
    .ed-advan li {
        padding: 20px; /* Reduced padding for medium screens */
    }
    .ed-ad-dec h4 {
        font-size: 1.4em; /* Reduced heading font size for medium screens */
    }
    .ed-ad-dec p {
        font-size: 0.88em; /* Reduced paragraph font size for medium screens */
    }
}

@media (max-width: 768px) {
    .con-title h1 {
        font-size: 1.6em; /* मोबाइल स्क्रीन के लिए फ़ॉन्ट साइज़ को और भी छोटा किया गया */
    }
    .con-title h1 span {
        font-size: 0.6em;
    }
    .con-title p {
        font-size: 1em;
        text-align: left; /* Mobile paragraphs often look better left-aligned */
    }
    .ed-about-sec1 h2 {
        font-size: 1.8em;
    }
    .ed-advan li {
        flex-direction: column; /* Stacks image and text vertically */
        text-align: center;
        align-items: center;
        padding: 18px; /* Further reduced padding for mobile screens */
    }
    .ed-ad-img {
        margin-right: 0;
        margin-bottom: 12px; /* Adjusted margin for stacked layout */
    }
    .ed-ad-img img {
        width: 50px; /* Smaller icons for mobile */
        height: 50px;
    }
    .ed-ad-dec h4 {
        font-size: 1.3em; /* Further reduced heading font size for mobile screens */
    }
    .ed-ad-dec p {
        font-size: 0.8em; /* Further reduced paragraph font size for mobile screens */
        text-align: center; /* Center align text when stacked */
    }
    .why-choose-us h3, .faq-section h3 {
        font-size: 1.8em;
    }
    .why-choose-us ul, .ed-advan ul {
        grid-template-columns: 1fr; /* Ensures items stack on very small screens */
    }
    .faq-question {
        font-size: 1em;
        padding: 15px 20px;
    }
    .faq-answer {
        padding: 15px 20px;
    }
}