/* ============================================================ BRAND-BLUE.CSS ============================================================ Ye file aapke LATASIA EDUCATION logo ke blue color (#185AEE) se poori site ka design match karne ke liye banayi gayi hai. IMPORTANT: Ye file aapki existing CSS files (color1.css, style.css, custom-sections.css) ko REPLACE nahi karti — ye sirf UNKE UPAR load hoti hai aur jahan zaroori hai wahan color override karti hai. Isliye layout/spacing sab same rahega, sirf COLORS badlenge. Ye file me SABSE AAKHIR me link honi chahiye (sabse last tag), taaki ye baaki CSS files ke upar priority le sake. (Home.blade.php me maine already aisa kar diya hai.) ============================================================ */ :root { /* Logo se nikala hua exact blue color */ --brand-blue: #185AEE; /* Hover / darker shade — buttons ke hover state ke liye */ --brand-blue-dark: #0F3FB0; /* Halka blue — backgrounds, highlights ke liye */ --brand-blue-light: #EAF1FE; /* Bahut halka blue — subtle hover backgrounds */ --brand-blue-pale: #F4F8FF; /* Text ke liye — blue ke sath acha lagne wala dark gray */ --brand-text-dark: #1A1A2E; } /* ============================================================ 1) FEATURE ICONS ROW (Affordable Education, Scholarships, etc.) ============================================================ */ .feature-icons-row .feature-icon-item .icon svg path, .feature-icons-row .feature-icon-item .icon svg circle, .feature-icons-row .feature-icon-item .icon svg rect, .feature-icons-row .feature-icon-item .icon svg polygon { stroke: var(--brand-blue) !important; } /* ============================================================ 2) "What can I do with Jobtex?" REVIEW SECTION ICONS ============================================================ Ye original template me green (#148160) the — ab blue. CSS ka selector inline SVG "stroke" attribute se zyada priority leta hai, isliye humein blade file ke andar SVG code CHANGE karne ki zaroorat NAHI hai — sirf yahan override kar do, kaam ho jayega. */ .review-job-section-four .icon-review .icon svg path, .review-job-section-four .icon-review .icon svg circle, .review-job-section-four .icon-review .icon svg rect { stroke: var(--brand-blue) !important; } /* ============================================================ 3) BUTTONS — Search / Cost Calculator / Scholarship / Course ============================================================ */ .btn-find, .btn-category-job, .calc-btn.btn-cost, .calc-btn.btn-scholarship, .tf-button.style-1 { background-color: var(--brand-blue) !important; border-color: var(--brand-blue) !important; color: #ffffff !important; transition: background-color 0.25s ease, transform 0.15s ease; } .btn-find:hover, .btn-category-job:hover, .calc-btn.btn-cost:hover, .calc-btn.btn-scholarship:hover, .tf-button.style-1:hover { background-color: var(--brand-blue-dark) !important; border-color: var(--brand-blue-dark) !important; color: #ffffff !important; } /* Button ke andar ka icon (arrow/svg) bhi white rahe taaki blue background ke upar dikhe */ .btn-find .btn-icon svg, .btn-category-job .icon-keyboard_arrow_right, .calc-btn .btn-icon svg path, .tf-button.style-1 .icon-keyboard_arrow_right { color: #ffffff !important; stroke: #ffffff !important; } /* ============================================================ 4) SEARCH FORM DROPDOWNS — focus/border color ============================================================ */ .form-sl select.input-filter-search:focus, .form-sl select.select-location:focus, .calc-select:focus { border-color: var(--brand-blue) !important; outline: none !important; box-shadow: 0 0 0 3px var(--brand-blue-light) !important; } /* ============================================================ 5) SECTION TITLES — chhota accent underline blue me ============================================================ */ .tf-title .group-title h1 { color: var(--brand-text-dark); position: relative; } .tf-title .group-title h1::after { content: ""; display: block; width: 60px; height: 3px; background-color: var(--brand-blue); margin-top: 10px; border-radius: 2px; } /* ============================================================ 6) COURSE CARDS ("Browse by Courses") ============================================================ */ .job-category-box { border: 1px solid #e7ecf7; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .job-category-box:hover { border-color: var(--brand-blue); box-shadow: 0 8px 24px rgba(24, 90, 238, 0.12); } .job-category-box h1 a { color: var(--brand-text-dark); } .job-category-box h1 a:hover { color: var(--brand-blue); } /* ============================================================ 7) UNIVERSITY CARDS ("Featured Universities") ============================================================ */ .university-card { border: 1px solid #e7ecf7; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .university-card:hover { border-color: var(--brand-blue); box-shadow: 0 10px 28px rgba(24, 90, 238, 0.14); transform: translateY(-3px); } .university-name a { color: var(--brand-text-dark); } .university-name a:hover { color: var(--brand-blue); } .university-meta .meta-label { color: #7a8399; } .university-meta .meta-value { color: var(--brand-blue); font-weight: 600; } /* ============================================================ 8) SEARCH RESULT INFO ("X universities found") — naya element ============================================================ */ .search-result-info { background-color: var(--brand-blue-pale); border: 1px solid var(--brand-blue-light); color: var(--brand-text-dark); padding: 10px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; } .search-result-info a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; } /* ============================================================ 9) COST CALCULATOR + SCHOLARSHIP RESULT BOXES ============================================================ */ .calc-result { border-top: 2px solid var(--brand-blue-light); margin-top: 16px; padding-top: 16px; } .calc-result h4 { color: var(--brand-text-dark); } .calc-result-list li strong { color: var(--brand-blue); } .calc-result-total { background-color: var(--brand-blue-light); border-radius: 8px; padding: 10px 14px; } .calc-result-total strong { color: var(--brand-blue-dark); font-size: 18px; } /* ============================================================ 10) SCHOLARSHIP CARD GRADUATION-CAP ILLUSTRATION ============================================================ Originally dark-green tones — ab blue-family tones taaki poori page ek hi color-theme feel de. */ .scholarship-card .calc-card-image svg rect { fill: var(--brand-blue) !important; opacity: 0.85; } .scholarship-card .calc-card-image svg rect:nth-of-type(2) { opacity: 0.65; } .scholarship-card .calc-card-image svg rect:nth-of-type(3) { opacity: 0.45; } /* ============================================================ 11) "BROWSE BY COURSES" — REDESIGNED CARD GRID ============================================================ Purani design me boxes text-length ke hisaab se alag-alag height ke the aur koi image nahi thi. Ye naya design: - Grid pe based hai (responsive, auto-fit) - Har card ki height SAME hai (flex column + margin-top:auto trick niche di gayi hai) - Image ya (agar image na ho) ek gradient placeholder dikhta hai — kabhi bhi "broken image" icon nahi dikhega */ .courses-showcase { padding: 70px 0; } .courses-showcase .tf-title { text-align: left; margin-bottom: 36px; } .section-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue); background-color: var(--brand-blue-light); padding: 5px 14px; border-radius: 20px; margin-bottom: 12px; } /* Grid — responsive, minimum 260px per card, auto-fit rest */ .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } /* Card — flex column so footer (CTA) always sits at bottom, regardless of how long the title/description is */ .course-card { display: flex; flex-direction: column; background-color: #ffffff; border: 1px solid #e7ecf7; border-radius: 14px; overflow: hidden; text-decoration: none; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .course-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(24, 90, 238, 0.16); border-color: var(--brand-blue); text-decoration: none; } /* Media area — fixed aspect ratio so every card's image area is EXACTLY the same size, no matter the source image's original dimensions */ .course-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--brand-blue-pale); } .course-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .course-card:hover .course-card-media img { transform: scale(1.06); } /* Placeholder shown when a course has no image yet. 4 rotating blue-family gradients keep the grid visually varied instead of every card looking identical. */ .course-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .course-card-placeholder span { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; font-weight: 700; color: #ffffff; letter-spacing: 1px; opacity: 0.95; } .course-card-placeholder.variant-0 { background: linear-gradient(135deg, #185AEE 0%, #0F3FB0 100%); } .course-card-placeholder.variant-1 { background: linear-gradient(135deg, #3B7BFF 0%, #185AEE 100%); } .course-card-placeholder.variant-2 { background: linear-gradient(135deg, #0F3FB0 0%, #062766 100%); } .course-card-placeholder.variant-3 { background: linear-gradient(135deg, #5B8DFF 0%, #2E5FE0 100%); } /* Duration badge — floats on top-right corner of the image */ .course-duration-badge { position: absolute; top: 12px; right: 12px; background-color: rgba(255, 255, 255, 0.95); color: var(--brand-blue-dark); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* Card body */ .course-card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; } .course-card-title { font-size: 18px; font-weight: 700; color: var(--brand-text-dark); margin: 0 0 8px; line-height: 1.35; /* Clamp to 2 lines so titles of different lengths still take up the same visual space */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .course-card-desc { font-size: 14px; color: #6b7280; line-height: 1.5; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* CTA — pinned to the bottom of every card via margin-top:auto, so it lines up in a row across the whole grid */ .course-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--brand-blue); } .course-card-cta svg { transition: transform 0.25s ease; } .course-card:hover .course-card-cta svg { transform: translateX(4px); } /* Empty state — spans the full grid width */ .course-empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 20px; background-color: var(--brand-blue-pale); border: 1px dashed var(--brand-blue-light); border-radius: 14px; } .course-empty-state p { font-size: 16px; font-weight: 700; color: var(--brand-text-dark); margin: 0 0 6px; } .course-empty-state span { font-size: 13px; color: #7a8399; } /* Small screens — single column, slightly less padding */ @media (max-width: 576px) { .courses-showcase { padding: 44px 0; } .course-grid { grid-template-columns: 1fr; } } /* ============================================================ 12) LIFESTYLE / DROPDOWN "selected" HIGHLIGHT (best-effort) ============================================================ */ .calc-card-content h3 { color: var(--brand-text-dark); } .calc-card-content h3::before { content: ""; display: inline-block; width: 8px; height: 8px; background-color: var(--brand-blue); border-radius: 50%; margin-right: 8px; }