/* --- Global Styles & Variables (Can be placed at the top of your CSS file) --- */ :root { /* Colors specific to the "Why Choose Us" section */ --primary-heading-color: #3A006F; /* Dark purple/blue from image */ --body-text-color: #444444; /* Dark grey for general text from image */ --bold-text-color: #222222; /* Even darker for bold text from image */ --light-background-left: #ffffff; /* White background for left column */ --light-background-right: #FFF5FB; /* Light warm pink/purple background for right column */ --border-color-light: #eeeeee; /* Subtle border for column separation */ /* Colors specific to the Form Card */ --form-bg-color: rgba(35, 73, 175, 0.95); --form-heading-color: #fff; --form-label-color: #fff; --form-input-border: #ccc; --form-input-focus-border: #764ba2; --form-input-focus-shadow: rgba(118, 75, 162, 0.2); --form-button-bg: #7626c6; --form-button-hover-bg: #4917a0; --form-button-text: #fff; /* General use/fallback colors */ --general-section-bg: #f8f9fa; /* A very light background for overall wrappers */ --shadow-subtle: rgba(0, 0, 0, 0.08); /* Re-used for consistency */ } /* Base Font for the entire page if not already defined */ body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Link this in your HTML */ line-height: 1.6; margin: 0; padding: 0; box-sizing: border-box; /* Crucial for consistent box model behavior */ color: var(--body-text-color); /* Default text color */ } /* --- CSS for the "Why choose Erudite Educare?" Section (Matching Image) --- */ .chose-area-wrapper { padding: 80px 0; /* Consistent top and bottom padding for the section */ background-color: var(--general-section-bg); /* A very light background for the overall wrapper */ box-sizing: border-box; } /* Inner Container with the two-column layout */ .chose-area-inner { background-color: var(--light-background-right); /* Light warm pink/purple background for the whole inner block initially */ border-radius: 8px; box-shadow: 0 4px 15px var(--shadow-subtle); /* Subtle shadow for depth */ overflow: hidden; /* Ensures border-radius applies correctly to children */ display: flex; /* Use flexbox for column layout */ flex-wrap: wrap; /* Allows columns to wrap on smaller screens */ max-width: 1200px; /* Limit width of this section too, consistent with .container */ margin: 0 auto; /* Center this section as well */ } /* Column Styling */ .chose-area-inner .col-lg-6 { flex: 0 0 50%; /* 50% width on large screens */ max-width: 50%; padding: 40px; /* Internal padding for content within columns */ box-sizing: border-box; /* Include padding in element's total width */ display: flex; /* Helps align content vertically */ align-items: stretch; /* Stretch content within columns */ } /* Left Column - Specific Background & Border */ .chose-area-inner .col-lg-6:first-child { background-color: var(--light-background-left); /* White background for the left side */ border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-right: 1px solid var(--border-color-light); /* Subtle border to visually separate columns */ } /* Right Column - Specific Background & Border */ .chose-area-inner .col-lg-6:last-child { background-color: var(--light-background-right); /* The light warm pink/purple background */ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* Responsive adjustments for columns stacking on smaller screens */ @media (max-width: 991px) { .chose-area-inner .col-lg-6 { flex: 0 0 100%; /* Full width for smaller screens */ max-width: 100%; border-right: none; /* Remove vertical separator when stacked */ border-radius: 0; /* Remove specific column border-radius */ } /* Re-apply rounded corners to the top and bottom of the *stacked* block */ .chose-area-inner .col-lg-6:first-child { border-bottom: 1px solid var(--border-color-light); /* Add horizontal separator */ border-top-left-radius: 8px; border-top-right-radius: 8px; } .chose-area-inner .col-lg-6:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } /* --- Left Side Content (Why choose Erudite Educare?) --- */ .content-wrap { width: 100%; display: flex; flex-direction: column; justify-content: center; /* Center content vertically */ } .section-title-wrapper { margin-bottom: 25px; /* Spacing below title and description */ } .section-title { font-size: 2.8em; /* Large and prominent */ color: var(--primary-heading-color); /* Dark purple/blue */ margin-bottom: 15px; font-weight: 800; /* Extra bold */ line-height: 1.2; /* Tight line height for title */ } .description { font-size: 1.1em; color: var(--body-text-color); /* Dark grey for general text */ line-height: 1.8; } .description b { color: var(--bold-text-color); /* Even darker for bold text */ font-weight: bold; } /* Key Points List (Left Side) */ .key-points { margin-top: 30px; /* Spacing from description */ } .key-points ul { list-style: none; /* Remove default bullet points */ padding: 0; margin: 0; } .key-points ul li { font-size: 1.05em; margin-bottom: 15px; position: relative; padding-left: 30px; /* Space for custom icon */ color: var(--body-text-color); /* Dark grey */ line-height: 1.5; } .key-points ul li b { color: var(--bold-text-color); /* Darker for bold text */ font-weight: bold; } /* Custom Checkmark Icon for Key Points */ .key-points ul li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); /* Vertically center the icon */ width: 20px; /* Size of the icon */ height: 20px; /* IMPORTANT: Replace with the actual path to your checkmark icon image */ background-image: url('path/to/your/checkmark-icon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* --- Right Side Content (Vision, Mission, Goal) --- */ .icon-box-with-text-wrap { width: 100%; display: flex; flex-direction: column; justify-content: center; /* Center content vertically */ } .icon-box-with-text.style-02 { list-style: none; padding: 0; margin: 0; } .single-icon-box-with-text { display: flex; align-items: flex-start; /* Align icon and text at the top */ margin-bottom: 30px; /* Spacing between each Vision/Mission/Goal block */ } /* Icon Container (White Circle) */ .icon-wrap { flex-shrink: 0; /* Prevent icon container from shrinking */ margin-right: 20px; /* Space between icon and text */ width: 60px; /* Fixed size for the circular container */ height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; /* Makes it a circle */ background-color: #ffffff; /* White background as seen in image */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the circle */ } .icon-wrap img { max-width: 80%; /* Ensure icon image fits within the circle */ max-height: 80%; display: block; object-fit: contain; /* Maintain aspect ratio */ } .single-icon-box-with-text .content .title { font-size: 1.5em; color: var(--primary-heading-color); /* Dark purple/blue */ margin-bottom: 10px; font-weight: 700; /* Bold */ } .single-icon-box-with-text .content .paragraph { font-size: 1em; color: var(--body-text-color); /* Dark grey */ line-height: 1.7; } /* Our Goal Specific List (nested list within the right section) */ .goal-list { list-style: disc; /* Standard disc bullets for this nested list */ padding-left: 20px; margin-top: 15px; color: var(--body-text-color); /* Dark grey */ } .goal-list li { margin-bottom: 10px; color: inherit; /* Inherit color from parent paragraph */ } .goal-list li b { color: var(--bold-text-color); /* Darker for bold text */ } /* Toggle Button for "Show More/Less" */ .toggle-more-btn { margin-top: 15px; border: none; background: none; color: #007BFF; /* A standard blue for links/buttons */ cursor: pointer; font-size: 1em; font-weight: 600; padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .toggle-more-btn:hover { background-color: rgba(0, 123, 255, 0.05); /* Very subtle hover background */ color: #0056b3; text-decoration: underline; transform: translateY(-1px); } .toggle-more-btn:active { transform: translateY(0); } /* --- CSS for the Form Card (Added below the "Why Choose Us" section) --- */ .new-about-form { display: flex; justify-content: center; align-items: center; /* Removed min-height: 100vh; to allow it to stack naturally below other content */ padding: 60px 20px; /* Add vertical padding for separation from other sections */ box-sizing: border-box; background-color: var(--general-section-bg); /* Consistent background for the area this section lives in */ } .form-card { background: var(--form-bg-color); /* Using variable for consistency */ padding: 30px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); width: 90%; max-width: 1000px; box-sizing: border-box; /* Important for width/padding calculations */ } .form-card h2 { text-align: center; margin-bottom: 25px; color: var(--form-heading-color); font-size: 2.2em; } /* Form Layout */ .new-form-fix { display: flex; flex-direction: column; } .form-row { display: flex; flex-direction: column; gap: 20px; /* Consistent spacing */ margin-bottom: 10px; /* Add some space between rows if needed */ } /* Group inside rows */ .form-groups { display: flex; flex-direction: column; flex: 1; } label { margin-bottom: 8px; /* Slightly more space for labels */ font-weight: bold; color: var(--form-label-color); font-size: 1.05em; } input, select { padding: 12px; border: 1px solid var(--form-input-border); border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease, box-shadow 0.3s ease; width: 100%; /* Ensure inputs take full width of their container */ box-sizing: border-box; /* Prevents padding from adding to the width */ } input:focus, select:focus { border-color: var(--form-input-focus-border); box-shadow: 0 0 0 3px var(--form-input-focus-shadow); outline: none; /* Remove default browser outline */ } .new-about-button { margin-top: 30px; padding: 14px 40px; /* Slightly more padding for a larger button */ background-color: var(--form-button-bg); color: var(--form-button-text); border: none; border-radius: 8px; font-size: 18px; /* Slightly larger font for button */ font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; align-self: center; min-width: 180px; /* Ensure a minimum width for the button */ } .new-about-button:hover { background-color: var(--form-button-hover-bg); transform: translateY(-2px); } .new-about-button:active { transform: translateY(0); } /* Responsive for desktop layout */ @media (min-width: 768px) { .form-row { flex-direction: row; gap: 30px; } } /* --- Original Chose Area Adjustments (already incorporated into the main block) --- */ /* These were already integrated and handled by the more specific styles above. Keeping them commented out to show they've been considered. */ /* .key-points ul { padding-left: 1.2rem; list-style-type: disc; } .key-points li { margin-bottom: 10px; color: #333; } .chose-area-wrapper .section-title-wrapper { margin-bottom: 20px; } .icon-box-with-text-wrap ul { padding: 0; margin: 0; } .single-icon-box-with-text { margin-bottom: 20px; } */