/* * ZED website (Laravel) additions on top of the theme in assets/css/style.css: * header layout like leannew.qci.org.in and the accessibility options panel. */ /* --- header: Ministry logo on the left, ZED logo on the right -------------------------- */ .header-top { justify-content: space-between; } .header-top .header-brand { display: flex; align-items: center; gap: 22px; } .header-top .header-brand a img { width: auto; display: block; } .header-top .brand-ministry img { height: 62px; } .header-top .brand-emblem { display: block; width: auto; height: 62px; } /* CMS > Settings > Header and footer: National Emblem */ .header-top .brand-divider { width: 1px; height: 58px; background: #d5dde3; } .header-top .brand-zed img { height: 82px; } .header-top .brand-qci img { width: auto; height: 56px; } /* --- language and accessibility buttons at the right end of the menu bar ------------ */ .zed-header-tools { display: flex; align-items: center; gap: 8px; } .zed-header-tools .bhashini-plugin-container { display: flex; align-items: center; } /* full menu bar from 992px; below, the menu button opens the menu (also on tablets, where the menu does not fit in one row) */ @media (min-width: 992px) { .header-style-1 .main-menu .navbar { display: flex; align-items: center; } .header-style-1 .main-menu .navbar::before, .header-style-1 .main-menu .navbar::after { display: none; } .header-style-1 .main-menu .navbar > .navbar-collapse { order: 1; flex: 1 1 auto; min-width: 0; } .header-style-1 .main-menu .navbar > .navbar-header { order: 2; float: none; display: flex; align-items: center; } .zed-header-tools { margin: 0 12px 0 2px; } } @media (max-width: 767.98px) { .header-top .header-brand { gap: 12px; } .header-top { padding: 0 6px; } .header-top .brand-ministry img { height: 46px; } .header-top .brand-emblem { height: 46px; } .header-top .brand-divider { height: 44px; } .header-top .brand-zed img { height: 60px; } } @media (max-width: 991.98px) { /* menu button on the left, language and accessibility buttons on the right, in one row */ .header-style-1 .main-menu .navbar-header { display: flex; align-items: center; min-height: 56px; padding: 0 12px; } .header-style-1 .main-menu .navbar-header::before, .header-style-1 .main-menu .navbar-header::after { display: none; } .header-style-1 .main-menu .navbar-header .navbar-toggle { float: none; margin: 0; padding: 10px 8px; } .zed-header-tools { margin-left: auto; padding: 8px 0; } } /* small laptops (992-1199px): tighter menu items, so that the menu stays in one row */ @media (min-width: 992px) and (max-width: 1199.98px) { .header-style-1 .main-menu .nav > li > a { padding-left: 10px; padding-right: 10px; } .header-style-1 .nav.navbar-nav > li:first-child { margin-left: 4px; } } /* this site's Bootstrap build has 1000px and 1200px containers, wider than the page just above 992 and 1200px (the scrollbar takes its part): never wider than the page, so that it does not scroll sideways */ .container { max-width: 100%; } /* tablets (768-991px): Bootstrap 3's phone navbar (it collapses only below 768px) */ @media (min-width: 768px) and (max-width: 991.98px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .navbar-collapse.collapse { display: none !important; overflow: auto !important; } .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; } .navbar-nav { float: none !important; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a { padding: 5px 15px 5px 25px; line-height: 20px; } } /* text links in page content wrap like text (style.css makes every link inline-block: a long link wrapped as a box, its list bullet sat on the last line and the file icon on a line of its own) */ .single-services-content :is(p, li, td, ul, ol) > a:not(.btn):not(.btn-zed):not(:has(img)) { display: inline; } /* the side menu of a page above its text (narrow screens): room for its shadow */ @media (max-width: 991.98px) { .single-left-services-list { margin-bottom: 28px; } } /* --- accessibility button ------------------------------------------------------------ */ .zed-a11y { position: relative; } .zed-a11y-toggle { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: 8px; background: #fff; color: var(--zed-primary-dark, #23838b); cursor: pointer; } .zed-a11y-toggle:hover { background: #eef8f8; } .zed-a11y-toggle:focus-visible, .zed-a11y-option:focus-visible, .zed-a11y-close:focus-visible, .zed-a11y-reset:focus-visible { outline: 3px solid #f0b400; outline-offset: 2px; } .zed-a11y-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .zed-a11y-toggle svg circle { fill: currentColor; stroke: none; } /* --- panel ------------------------------------------------------------------------------- */ .zed-a11y-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1050; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 150px); overflow: auto; background: #fff; border: 1px solid #dde4e9; border-radius: 12px; box-shadow: 0 14px 34px rgba(16, 40, 60, .22); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.35; text-align: left; letter-spacing: normal; } .zed-a11y-panel[hidden] { display: none; } .zed-a11y-panel button { text-transform: none; font-weight: normal; letter-spacing: normal; } .zed-a11y-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #e6ebef; } .zed-a11y-head strong { flex: 1; font-size: 15px; } .zed-a11y-head kbd { padding: 2px 6px; font-size: 11px; font-family: inherit; background: #f1f4f6; border: 1px solid #d9e0e5; border-radius: 4px; box-shadow: none; } .zed-a11y-close { padding: 0 4px; border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; } .zed-a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; } .zed-a11y-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 86px; padding: 10px 6px; border: 1px solid #e1e7ec; border-radius: 8px; background: #fff; font-size: 12px; line-height: 1.25; text-align: center; cursor: pointer; } .zed-a11y-option:hover { border-color: var(--zed-primary, #45a5ad); background: #f3fafa; } .zed-a11y-option svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .zed-a11y-option svg .fill { fill: currentColor; } .zed-a11y-option.active { border-color: var(--zed-primary-dark, #23838b); background: var(--zed-primary-soft, #e5f4f4); box-shadow: inset 0 0 0 1px var(--zed-primary-dark, #23838b); } .zed-a11y-value { font-size: 11px; } .zed-a11y-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #e6ebef; background: #fafbfc; font-size: 12px; } .zed-a11y-reset { padding: 6px 12px; border: 1px solid #d9e0e5; border-radius: 6px; background: #fff; font-size: 12px; white-space: nowrap; cursor: pointer; } /* the panel keeps its own colours in every mode (also the high-contrast theme) */ .zed-a11y-panel strong, .zed-a11y-panel span, .zed-a11y-panel button, .zed-a11y-panel kbd { color: #2c3a45 !important; } .zed-a11y-panel .zed-a11y-value, .zed-a11y-panel .zed-a11y-foot span, .zed-a11y-panel kbd { color: #6b7781 !important; } .zed-a11y-panel .zed-a11y-option.active, .zed-a11y-panel .zed-a11y-option.active span { color: #14646b !important; } .zed-a11y-panel, .zed-a11y-panel .zed-a11y-option:not(.active), .zed-a11y-panel .zed-a11y-reset { background-color: #fff !important; } @media (max-width: 767.98px) { /* phones: the panel spans the screen below the top of the page */ .zed-a11y-panel { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-width: none; max-height: calc(100vh - 90px); } } @media (max-width: 340px) { .zed-a11y-grid { grid-template-columns: repeat(2, 1fr); } } /* --- what each option does (classes on , set by public/js/zed-accessibility.js) ---- */ html.a11y-spacing body *:not(.zed-a11y *) { letter-spacing: .12em !important; word-spacing: .16em !important; } html.a11y-line-height body :is(p, li, td, th, dd, dt, label, blockquote, h1, h2, h3, h4, h5, h6, span, a):not(.zed-a11y *) { line-height: 1.9 !important; } html.a11y-dyslexia body *:not(.zed-a11y *):not(i):not(.fa):not([class*="fa-"]):not([class*="flaticon"]):not(.glyphicon):not(.bi) { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; } html.a11y-links a:not(.zed-a11y *) { text-decoration: underline !important; outline: 2px solid #f0b400 !important; outline-offset: 1px; background-color: #fff6cc !important; color: #0b3a8c !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8.5-6.5 1.7L9.5 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; } html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-images img:not(.zed-a11y *), html.a11y-images video, html.a11y-images iframe, html.a11y-images picture { visibility: hidden !important; } html.a11y-images body *:not(.zed-a11y *) { background-image: none !important; } html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe { filter: invert(1) hue-rotate(180deg); } .zed-a11y-mask { position: fixed; left: 0; right: 0; z-index: 2147483000; background: rgba(0, 0, 0, .55); pointer-events: none; } .zed-a11y-mask-top { top: 0; } .zed-a11y-mask-bottom { bottom: 0; } /* --- Contact Us page ---------------------------------------------------------------------- */ .zed-contact { padding: 40px 0 60px; } .zed-contact-card { background: #fff; border: 1px solid #e3e9ee; border-radius: 14px; box-shadow: 0 6px 20px rgba(16, 40, 60, .06); padding: 26px 28px; margin-bottom: 24px; } .zed-contact-card-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #edf1f4; } .zed-contact-card-head h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #1d3446; } .zed-contact-card-head p { margin: 0; color: #66788a; font-size: 14px; } .zed-contact-info ul { list-style: none; margin: 0; padding: 0; } .zed-contact-info li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed #e6ebef; } .zed-contact-info li:last-child { border-bottom: 0; padding-bottom: 0; } .zed-contact-icon { flex: 0 0 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--zed-primary-soft, #e5f4f4); color: var(--zed-primary-dark, #23838b); font-size: 18px; } .zed-contact-info li div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.55; color: #4a5a68; } .zed-contact-info li strong { color: #1d3446; font-size: 14px; } .zed-contact-info li a { color: var(--zed-primary-dark, #23838b); word-break: break-word; } /* site form (CMS > Settings > Security > Contact Us form = Website form) */ .zed-contact .zed-contact-form .form-control { height: 46px; border-radius: 8px; border-color: #d4dde4; box-shadow: none; } .zed-contact .zed-contact-form textarea.form-control { height: auto; min-height: 140px; } .zed-contact .zed-contact-form label { font-weight: 600; color: #2c3a45; } .zed-contact .zed-contact-form .btn-primary, .zed-contact .zed-contact-form button[type="submit"] { padding: 12px 28px; border-radius: 8px; background: var(--zed-primary-dark, #23838b); border-color: var(--zed-primary-dark, #23838b); font-weight: 600; } /* Zoho Desk form: labels above full-width fields instead of the narrow two-column table */ .zed-contact .zsFormClass, .zed-contact .zsFormClass tbody, .zed-contact .zsFormClass tr, .zed-contact .zsFormClass td { display: block; width: 100% !important; border: 0; } .zed-contact .zsFormClass tr:first-child { display: none; } /* its "ZED Query" title: the card has its own */ .zed-contact .zsFormClass tr { margin-bottom: 16px; } .zed-contact .zsFormClass td { padding: 0 !important; white-space: normal !important; } .zed-contact .zsFormClass td.zsFontClass { margin-bottom: 6px; font-weight: 600; color: #2c3a45; font-size: 14px; } .zed-contact .zsFormClass input[type="text"], .zed-contact .zsFormClass select, .zed-contact .zsFormClass textarea { box-sizing: border-box; width: 100% !important; max-width: none !important; height: 46px; padding: 8px 12px; border: 1px solid #d4dde4 !important; border-radius: 8px; background: #fff; font-size: 14px; color: #2c3a45; box-shadow: none; } .zed-contact .zsFormClass textarea { height: 140px !important; min-height: 140px; } .zed-contact .zsFormClass input:focus, .zed-contact .zsFormClass select:focus, .zed-contact .zsFormClass textarea:focus { outline: 0; border-color: var(--zed-primary-dark, #23838b) !important; box-shadow: 0 0 0 3px rgba(35, 131, 139, .15); } .zed-contact .zsFormClass input[type="submit"], .zed-contact .zsFormClass input[type="button"], .zed-contact .zsFormClass button { height: auto; padding: 12px 28px; border: 0; border-radius: 8px; background: var(--zed-primary-dark, #23838b); color: #fff; font-weight: 600; cursor: pointer; } .zed-contact .zsFormClass input[type="reset"] { padding: 12px 22px; border: 1px solid #d4dde4; border-radius: 8px; background: #fff; color: #4a5a68; } .zed-contact .wtcuploadfile { display: inline-block; padding: 8px 14px; border: 1px dashed #b9cad8; border-radius: 8px; background: #f8fbfd; color: var(--zed-primary-dark, #23838b); } @media (max-width: 767.98px) { .zed-contact-card { padding: 20px 18px; } } .zed-contact-email { color: var(--zed-primary-dark, #23838b); word-break: break-word; } /* --- FAQs page ------------------------------------------------------------------------------- */ .zed-faq { padding: 40px 0 60px; } .zed-faq-intro h3 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: #1d3446; } .zed-faq-intro > p { color: #66788a; margin: 0 0 18px; } .zed-faq-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .zed-faq-search { position: relative; flex: 1 1 280px; } .zed-faq-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8a98a5; } .zed-faq-search input { width: 100%; height: 48px; padding: 0 16px 0 44px; border: 1px solid #d4dde4; border-radius: 24px; font-size: 15px; color: #2c3a45; background: #fff; box-shadow: 0 2px 8px rgba(16, 40, 60, .04); } .zed-faq-search input:focus { outline: 0; border-color: var(--zed-primary-dark, #23838b); box-shadow: 0 0 0 3px rgba(35, 131, 139, .15); } .zed-faq-btn { height: 48px; padding: 0 20px; border: 1px solid var(--zed-primary-dark, #23838b); border-radius: 24px; background: #fff; color: var(--zed-primary-dark, #23838b); font-weight: 600; cursor: pointer; } .zed-faq-btn:hover { background: var(--zed-primary-dark, #23838b); color: #fff; } .zed-faq-count { margin: 14px 0 10px; color: #66788a; font-size: 14px; } .zed-faq-list { display: flex; flex-direction: column; gap: 12px; } .zed-faq-item { background: #fff; border: 1px solid #e3e9ee; border-radius: 12px; box-shadow: 0 2px 10px rgba(16, 40, 60, .04); overflow: hidden; } .zed-faq-item[open] { border-color: var(--zed-primary-line, #b9dcdf); box-shadow: 0 6px 18px rgba(16, 40, 60, .08); } .zed-faq-item { scroll-margin-top: 90px; } /* the question opened from a link (/faqs#q5, chatbot): short highlight */ .zed-faq-item.is-target { animation: zed-faq-target 2.4s ease-out 1; } @keyframes zed-faq-target { 0%, 35% { border-color: var(--zed-primary, #2b9a9a); box-shadow: 0 0 0 4px rgba(43, 154, 154, .25); } 100% { box-shadow: 0 6px 18px rgba(16, 40, 60, .08); } } @media (prefers-reduced-motion: reduce) { .zed-faq-item.is-target { animation: none; border-color: var(--zed-primary, #2b9a9a); } } .zed-faq-item summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: #1d3446; line-height: 1.45; } .zed-faq-item summary::-webkit-details-marker { display: none; } .zed-faq-item summary:hover { background: #f6fafb; } .zed-faq-item summary:focus-visible { outline: 3px solid #f0b400; outline-offset: -3px; } .zed-faq-num { flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--zed-primary-soft, #e5f4f4); color: var(--zed-primary-dark, #23838b); font-size: 14px; font-weight: 700; } .zed-faq-item[open] .zed-faq-num { background: var(--zed-primary-dark, #23838b); color: #fff; } .zed-faq-q { flex: 1 1 auto; } .zed-faq-chevron { font-size: 22px; color: #8a98a5; transition: transform .2s ease; } .zed-faq-item[open] .zed-faq-chevron { transform: rotate(180deg); color: var(--zed-primary-dark, #23838b); } .zed-faq-a { padding: 4px 22px 20px 68px; color: #4a5a68; font-size: 15px; line-height: 1.75; } .zed-faq-a p:last-child { margin-bottom: 0; } .zed-faq-a a { color: var(--zed-primary-dark, #23838b); text-decoration: underline; } .zed-faq-a ul, .zed-faq-a ol { padding-left: 20px; } .zed-faq-empty { padding: 30px; text-align: center; color: #66788a; background: #fff; border: 1px dashed #d4dde4; border-radius: 12px; } .zed-faq-help { position: sticky; top: 110px; margin-top: 8px; padding: 26px; border-radius: 14px; color: #fff; text-align: center; background: linear-gradient(160deg, var(--zed-primary, #3fa1a8) 0%, var(--zed-primary-dark, #23838b) 55%, var(--zed-primary-dark, #1d6f76) 100%); box-shadow: 0 10px 26px rgba(35, 131, 139, .25); } .zed-faq-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 26px; margin-bottom: 10px; } .zed-faq-help h4 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; } .zed-faq-help p { color: rgba(255, 255, 255, .9); margin: 0 0 10px; } .zed-faq-help-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; } .zed-faq-help-line a, .zed-faq-help-line span { color: #fff; word-break: break-word; } .zed-faq-help-btn { display: inline-block; margin-top: 8px; padding: 11px 26px; border-radius: 24px; background: #fff; color: var(--zed-primary-dark, #1d6f76); font-weight: 700; text-decoration: none; } .zed-faq-help-btn:hover, .zed-faq-help-btn:focus { color: var(--zed-primary-dark, #1d6f76); text-decoration: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } @media (max-width: 991.98px) { .zed-faq-help { position: static; margin-top: 24px; } .zed-faq-a { padding-left: 22px; } } .zed-faq-help h4, .zed-faq-btn, .zed-faq-help-btn, .zed-faq-intro h3 { text-transform: none; letter-spacing: normal; } /* --- search page ------------------------------------------------------------------------------ */ .zed-search { padding: 40px 0 50px; } .zed-search-form { display: flex; gap: 10px; margin-bottom: 22px; } .zed-search-form input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 18px; border: 1px solid #d4dde4; border-radius: 25px; font-size: 16px; color: #2c3a45; } .zed-search-form input:focus { outline: 0; border-color: var(--zed-primary-dark, #23838b); box-shadow: 0 0 0 3px rgba(35, 131, 139, .15); } .zed-search-form button { height: 50px; padding: 0 26px; border: 0; border-radius: 25px; background: var(--zed-primary-dark, #23838b); color: #fff; font-weight: 600; text-transform: none; } .zed-search h3 { text-transform: none; } .zed-search .zed-search-heading { margin: 22px 0 6px; font-size: 24px; text-transform: none; } .card.search-card .card-header h3 { margin: 8px 0; color: var(--zed-primary-dark, #1f7f7f); font-size: 16px; } .card.search-card .card-body p { color: #5c6570; } .zed-search-count { color: #66788a; } .zed-search-empty { padding: 26px; border: 1px dashed #d4dde4; border-radius: 12px; background: #fff; color: #4a5a68; line-height: 1.8; } /* --- footer contact rows: icon centred against its text (one or more lines) ------------------- */ #footerPos .address li.footer-contact-row { display: flex; align-items: center; gap: 14px; overflow: visible; } #footerPos .address li.footer-contact-row > .fa { float: none; flex: 0 0 36px; margin: 0; } #footerPos .address li.footer-contact-row > span { display: flex; flex-direction: column; padding-top: 0; line-height: 1.6; min-width: 0; word-break: break-word; } #footerPos .address li.footer-contact-row > span a { color: #232527; } #footerPos .address li.footer-contact-row > span a:hover { color: var(--zed-primary, #45A5AD); } /* --- Contact / Feedback: vertical tab on the right edge of the screen ----------------------- */ .zed-side-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1030; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 11px; border-radius: 10px 0 0 10px; background: var(--zed-primary-dark, #1f7f7f); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; text-decoration: none; box-shadow: -2px 4px 14px rgba(0, 0, 0, .18); transition: padding-right .15s ease, background-color .15s ease; } .zed-side-tab span { writing-mode: vertical-rl; white-space: nowrap; } .zed-side-tab .fa { font-size: 18px; } .zed-side-tab:hover, .zed-side-tab:focus { background: var(--zed-primary-dark, #176666); color: #fff; text-decoration: none; padding-right: 15px; } .zed-side-tab:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } @media (max-width: 767.98px) { .zed-side-tab { padding: 12px 8px; font-size: 13px; gap: 8px; } .zed-side-tab .fa { font-size: 15px; } } /* --- website chatbot (partials/chatbot.blade.php, js/zed-chatbot.js) --------------------------- */ .zed-chat { font-size: 15px; line-height: 1.5; } .zed-chat button { text-transform: none; letter-spacing: 0; } .zed-chat-launcher { text-transform: none; letter-spacing: 0; position: fixed; right: 24px; bottom: 24px; z-index: 1040; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border: 0; border-radius: 30px; background: linear-gradient(135deg, var(--zed-primary, #2b9a9a), var(--zed-primary-dark, #1f7f7f)); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 6px 20px rgba(16, 70, 70, .35); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .zed-chat-launcher .fa { font-size: 20px; } .zed-chat-launcher:hover, .zed-chat-launcher:focus { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 70, 70, .4); outline: none; } .zed-chat-launcher:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } .zed-chat.is-open .zed-chat-launcher { padding: 13px 16px; } .zed-chat.is-open .zed-chat-launcher span { display: none; } .zed-chat.is-open .zed-chat-launcher .fa::before { content: "\f00d"; } /* the back-to-top arrow sits above the chat button */ .zed-chat ~ .scroll-img { bottom: 96px; right: 34px; } .zed-chat-panel { position: fixed; right: 24px; bottom: 92px; z-index: 1040; display: flex; flex-direction: column; width: 380px; height: 580px; max-height: calc(100vh - 120px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(15, 40, 50, .28); } .zed-chat-panel[hidden] { display: none; } .zed-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(135deg, var(--zed-primary, #2b9a9a), var(--zed-primary-dark, #1f7f7f)); color: #fff; } .zed-chat-avatar { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; overflow: hidden; } .zed-chat-avatar img { max-width: 34px; max-height: 34px; } .zed-chat-heading { flex: 1; min-width: 0; } .zed-chat-heading h2 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; } .zed-chat-heading p { margin: 2px 0 0; font-size: 12.5px; color: #fff; } .zed-chat-online { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #8ef0a9; vertical-align: middle; } .zed-chat-head button { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; } .zed-chat-head button:hover, .zed-chat-head button:focus { background: rgba(255, 255, 255, .3); } .zed-chat-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: #f4f8f8; } .zed-chat-msg { display: flex; margin-bottom: 12px; } .zed-chat-user { justify-content: flex-end; } .zed-chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; word-wrap: break-word; overflow-wrap: anywhere; } .zed-chat-bubble p { margin: 0; } .zed-chat-bot .zed-chat-bubble { background: #fff; color: #23313a; border: 1px solid #e1eaea; border-bottom-left-radius: 4px; } .zed-chat-user .zed-chat-bubble { background: var(--zed-primary-dark, #1f7f7f); color: #fff; border-bottom-right-radius: 4px; } .zed-chat-more { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--zed-primary-dark, #1f7f7f); } .zed-chat-more:hover, .zed-chat-more:focus { color: var(--zed-primary-dark, #145a5a); } .zed-chat-related-title { margin-top: 10px !important; font-size: 13px; font-weight: 700; color: #4b5d68; } .zed-chat-related { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; } .zed-chat-related li { margin: 3px 0; } .zed-chat-related a { color: #1f6f9f; } .zed-chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; } .zed-chat-chip { padding: 7px 12px; border: 1px solid var(--zed-primary-line, #9fd0d0); border-radius: 18px; background: #fff; color: var(--zed-primary-dark, #1f7f7f); font-size: 13.5px; text-align: left; cursor: pointer; } .zed-chat-chip:hover, .zed-chat-chip:focus { background: var(--zed-primary-dark, #1f7f7f); border-color: var(--zed-primary-dark, #1f7f7f); color: #fff; } .zed-chat-typing .zed-chat-bubble { display: inline-flex; gap: 5px; padding: 14px; } .zed-chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: #8aa5a5; animation: zed-chat-dot 1.2s infinite ease-in-out; } .zed-chat-typing span:nth-child(2) { animation-delay: .15s; } .zed-chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes zed-chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } } .zed-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e3ecec; background: #fff; } .zed-chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #cfdcdc; border-radius: 22px; font-size: 15px; color: #23313a; } .zed-chat-form input:focus { border-color: var(--zed-primary, #2b9a9a); outline: none; box-shadow: 0 0 0 3px rgba(43, 154, 154, .2); } .zed-chat-send { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--zed-primary-dark, #1f7f7f); color: #fff; font-size: 17px; cursor: pointer; } .zed-chat-send:hover, .zed-chat-send:focus { background: var(--zed-primary-dark, #145a5a); } .zed-chat-send:disabled { opacity: .5; cursor: wait; } @media (max-width: 575px) { .zed-chat-launcher { right: 14px; bottom: 14px; padding: 12px 16px 12px 14px; } .zed-chat-panel { right: 8px; left: 8px; bottom: 78px; width: auto; height: 72vh; } .zed-chat ~ .scroll-img { bottom: 80px; right: 18px; } .zed-chat.is-open ~ .scroll-img { display: none !important; } } @media (prefers-reduced-motion: reduce) { .zed-chat-launcher, .zed-chat-typing span { transition: none; animation: none; } } /* --- footer: slim bottom bar (copyright, logo, social icons) ---------------------------------- */ #footerPos .bg-footer-bottom { padding: 8px 0; } #footerPos .footer-bottom > .row { display: flex; flex-wrap: wrap; align-items: center; } #footerPos .copyright-txt p { margin: 0; padding: 0; font-size: 13.5px; } #footerPos .qci-logo-footer { display: inline-block; margin: 0; padding: 0; } #footerPos .qci-logo-footer img { width: 46px; padding: 0; } #footerPos .social-icon-rounded { margin: 0; padding: 0; } #footerPos .social-icon-rounded li a { width: 34px; height: 34px; line-height: 34px; } #footerPos .social-icon-rounded li a img { width: 18px; height: 18px; } @media (max-width: 767.98px) { #footerPos .footer-bottom > .row > div { padding-top: 4px; padding-bottom: 4px; } #footerPos .social-box { margin-top: 0; } } /* --- footer: Ministry logo above the address --------------------------------------------------- */ /* the default picture has a blank margin of 6 % on its left: pull it back so the emblem lines up with the text */ #footerPos .footer-ministry-logo { display: inline-block; margin: -4px 0 4px -11px; } #footerPos .footer-ministry-logo + .address { margin-top: 0; } #footerPos .footer-ministry-logo + .address > li:first-child { padding-top: 0; } #footerPos .footer-ministry-logo img { display: block; max-width: 230px; max-height: 64px; width: auto; height: auto; } /* --- footer: visitor count (digits in boxes, as on the LEAN website) -------------------------- */ @media (min-width: 768px) { #footerPos .footer-visitors-col { float: right; } } #footerPos .zed-visitors { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; } #footerPos .zed-visitors span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 38px; padding: 0 4px; border-radius: 4px; background: #fff; border: 1px solid #d3dade; color: #1f2d3d; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } /* --- pages showing another portal (incentives.blade.php, e.g. Benefits/Incentives) ------------ */ .zed-embed-page.incentive-page { padding: 30px 0 50px; background: #f5f8f9; } .zed-embed-only { padding-top: 10px; } .zed-embed-intro { margin-bottom: 18px; font-size: 16px; line-height: 1.7; } .zed-embed-card { overflow: hidden; border: 1px solid #dbe5e8; border-radius: 14px; background: #fff; box-shadow: 0 6px 22px rgba(16, 40, 60, .07); } .zed-embed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 18px; border-bottom: 1px solid #e3ecee; background: linear-gradient(90deg, var(--zed-primary-soft, #eef7f7), #f7fbfb); } .zed-embed-note { color: #4b5d68; font-size: 14px; } .zed-embed-note .fa { margin-right: 6px; color: var(--zed-primary, #2b9a9a); } .zed-embed-open { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 2px solid var(--zed-primary, #2b9a9a); border-radius: 6px; color: var(--zed-primary-dark, #1f7f7f); font-weight: 700; font-size: 14px; text-decoration: none; } .zed-embed-open:hover, .zed-embed-open:focus { background: var(--zed-primary, #2b9a9a); color: #fff; text-decoration: none; } .zed-embed-card { margin-bottom: 30px; text-align: left; } .zed-embed-card iframe.zed-embed-frame { display: block; width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 0; } @media (max-width: 767.98px) { .zed-embed-page.incentive-page { padding: 16px 0 30px; } .zed-embed-card iframe.zed-embed-frame { height: calc(100vh - 120px); min-height: 480px; } } /* --- Contact Us: two-column Zoho form, captcha row, buttons, side column ----------------------- */ .zed-contact { background: #f5f8f9; } .zed-contact .zsFormClass tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .zed-contact .zsFormClass tr { grid-column: 1 / -1; margin-bottom: 18px; } .zed-contact .zsFormClass tr.zs-half { grid-column: auto; } .zed-contact .zsFormClass .zs-required { color: #c0392b; font-weight: 700; } /* required fields: the "*" is text in zoho_form.blade.php */ .zed-contact .zsFormClass .zs-required-note { margin: 4px 0 0; font-weight: 400; font-size: 13px; } .zed-contact .zsFormClass td.zsFontClass label { margin: 0; font-weight: inherit; } .zed-contact .zsFormClass input[type="text"], .zed-contact .zsFormClass select, .zed-contact .zsFormClass textarea { box-sizing: border-box !important; padding: 8px 12px !important; } .zed-contact .zsFormClass select { background-color: #fff; } .zed-contact .zsFormClass input[type="text"]:hover, .zed-contact .zsFormClass select:hover, .zed-contact .zsFormClass textarea:hover { border-color: #b4c6d2 !important; } /* captcha: picture, refresh and answer on one line */ .zed-contact .zsFormClass tr.zs-captcha-row td:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } .zed-contact .zsFormClass tr.zs-captcha-row td:last-child > div:last-child { flex: 1 1 220px; } .zed-contact #zsCaptcha img { height: 46px; width: auto; padding: 0 8px; border: 1px solid #d4dde4; border-radius: 8px; background: #f3f7f9; vertical-align: middle; } .zed-contact #zsCaptcha a { display: inline-flex; align-items: center; height: 46px; padding: 0 14px; border: 1px solid var(--zed-primary-line, #b9dcdf); border-radius: 8px; background: var(--zed-primary-soft, #eef7f7); color: var(--zed-primary-dark, #1f7f7f) !important; font-weight: 600; font-size: 14px; vertical-align: middle; } .zed-contact #zsCaptcha a::before { content: "\f021"; margin-right: 6px; font-family: FontAwesome; } .zed-contact #zsCaptcha a:hover, .zed-contact #zsCaptcha a:focus { background: var(--zed-primary-dark, #1f7f7f); color: #fff !important; } /* buttons: send first and strongest, reset as a quiet secondary button */ .zed-contact .zsFormClass tr.zs-actions { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid #edf1f4; } .zed-contact .zsFormClass tr.zs-actions td { display: flex !important; flex-wrap: wrap; gap: 12px; justify-content: flex-start; padding: 0 !important; text-align: left; } .zed-contact .zsFormClass input[type="submit"] { min-width: 160px; padding: 13px 30px; font-size: 15px; letter-spacing: .02em; box-shadow: 0 6px 14px rgba(35, 131, 139, .25); } .zed-contact .zsFormClass input[type="submit"]:hover, .zed-contact .zsFormClass input[type="submit"]:focus { background: var(--zed-primary-dark, #1b6d73); } .zed-contact .zsFormClass input[type="button"][value="Reset"] { padding: 12px 24px; border: 1px solid #d4dde4; background: #fff; color: #4a5a68; box-shadow: none; } .zed-contact .zsFormClass input[type="button"][value="Reset"]:hover { border-color: #9fb3c1; background: #f6f8fa; } .zed-contact .wtcuploadfile { cursor: pointer; } .zed-contact .wtcuploadfile::before { content: "\f0c6"; margin-right: 8px; font-family: FontAwesome; } /* side column: stays in view next to the long form */ @media (min-width: 992px) { .zed-contact-aside { position: sticky; top: 90px; } } .zed-contact-help { position: relative; overflow: hidden; margin-bottom: 24px; padding: 26px 28px; border-radius: 14px; background: linear-gradient(135deg, var(--zed-primary, #2b9a9a), var(--zed-primary-dark, #1f6f7f)); color: #fff; box-shadow: 0 10px 24px rgba(31, 111, 127, .25); } .zed-contact-help::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .08); } .zed-contact-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 22px; } .zed-contact-help h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; } .zed-contact-help p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .92); } .zed-contact-help-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; background: #fff; color: var(--zed-primary-dark, #1f6f7f); font-weight: 700; text-decoration: none; } .zed-contact-help-btn:hover, .zed-contact-help-btn:focus { background: var(--zed-primary-soft, #eef7f7); color: var(--zed-primary-dark, #164f5a); text-decoration: none; } @media (max-width: 767.98px) { .zed-contact .zsFormClass tbody { grid-template-columns: minmax(0, 1fr); } .zed-contact .zsFormClass input[type="submit"], .zed-contact .zsFormClass input[type="button"][value="Reset"] { flex: 1 1 auto; } } /* --- page banners (every inner page): title and breadcrumb on the left, no decorative stripe ---- */ .bg-page-header .page-header { padding: 34px 44px 26px; text-align: left; } .bg-page-header .page-header:after, .single-services-content.single-page-content:after { display: none; } .bg-page-header .page-title h1, .bg-page-header .page-title h2 { margin: 0 0 4px; } .bg-page-header .page-header-content .breadcrumb { padding: 4px 0 0; } @media (max-width: 767.98px) { .bg-page-header .page-header { padding: 24px 20px 18px; } } /* drop-down menus open smoothly but close at once, so they do not fade out over the banner */ @media screen and (min-width: 992px) { .header-style-1 .sub-menu { transition: none; } .header-style-1 .main-menu .nav>.dropdown:hover ul.sub-menu { transition: opacity .2s ease, top .2s ease; } } /* --- News list (news.blade.php): cards with picture, type, date, summary ---------------------- */ .zed-news { padding: 36px 0 60px; background: #f5f8f9; } .zed-news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .zed-news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e3e9ee; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(16, 40, 60, .05); transition: transform .15s ease, box-shadow .15s ease; } .zed-news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 40, 60, .10); } .zed-news-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--zed-primary-soft, #e5f4f4); } .zed-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .zed-news-card:hover .zed-news-img img { transform: scale(1.04); } .zed-news-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; } .zed-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; font-size: 13px; } .zed-news-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; background: var(--zed-primary-soft, #e5f4f4); color: var(--zed-primary-dark, #1f7f7f); font-weight: 600; } .zed-news-tag-2 { background: #eaf1fb; color: #2a5d9f; } .zed-news-tag-3 { background: #fff4e0; color: #9a5b00; } .zed-news-date { color: #6b7a88; } .zed-news-date .fa { margin-right: 4px; } .zed-news-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.45; font-weight: 700; font-family: inherit; } .zed-news-body h3 a { color: #1d3446; text-decoration: none; } .zed-news-body h3 a:hover, .zed-news-body h3 a:focus { color: var(--zed-primary-dark, #1f7f7f); } .zed-news-body p { margin: 0 0 14px; color: #5a6b78; font-size: 14px; line-height: 1.6; } .zed-news-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--zed-primary-dark, #1f7f7f); font-weight: 700; font-size: 14px; text-decoration: none; } .zed-news-more:hover, .zed-news-more:focus { color: var(--zed-primary, #2b9a9a); text-decoration: none; } .zed-news-more:hover .fa-arrow-right { transform: translateX(3px); } .zed-news-more .fa { transition: transform .15s ease; } .zed-news-empty { padding: 50px 20px; border: 1px dashed #d4dde4; border-radius: 14px; background: #fff; text-align: center; color: #6b7a88; } .zed-news-empty .fa { font-size: 36px; color: var(--zed-primary, #2b9a9a); } .zed-news-side { position: sticky; top: 90px; padding: 22px; border: 1px solid #e3e9ee; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(16, 40, 60, .05); } .zed-news-side h4 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--zed-primary, #2b9a9a); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #1d3446; } .zed-news-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .zed-news-gallery a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #eef2f5; } .zed-news-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; } .zed-news-gallery a:hover img { transform: scale(1.08); } .zed-news-side-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--zed-primary-dark, #1f7f7f); font-weight: 700; font-size: 14px; } @media (max-width: 991.98px) { .zed-news-side { position: static; margin-top: 28px; } } @media (max-width: 575px) { .zed-news-grid { grid-template-columns: minmax(0, 1fr); } } /* --- E-learning page (CMS content with zed-elearning-* classes): numbered module cards -------- */ .single-page-full-content .zed-elearning-image { width: 100%; max-width: 640px; height: auto; margin: 0 auto 6px; } .single-page-full-content .zed-elearning-title { margin: 22px auto 24px !important; max-width: 720px; font-size: 20px; line-height: 1.5; font-weight: 700; text-transform: none; color: #1d3446; } .single-page-full-content ul.zed-elearning-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: zed-module; text-align: left; } .single-page-full-content ul.zed-elearning-list > li { display: block !important; margin: 0 !important; padding: 0; counter-increment: zed-module; } .single-page-full-content ul.zed-elearning-list > li::before { content: none; } .single-page-full-content ul.zed-elearning-list > li > a { position: relative; display: flex !important; flex-direction: column; gap: 6px; height: 100%; margin: 0 !important; padding: 18px 18px 46px !important; border: 1px solid #e3e9ee; border-radius: 14px; background: #fff !important; color: #1d3446 !important; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none !important; box-shadow: 0 4px 14px rgba(16, 40, 60, .05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .single-page-full-content ul.zed-elearning-list > li > a::before { content: "Module " counter(zed-module); align-self: flex-start; padding: 3px 10px; border-radius: 20px; background: var(--zed-primary-soft, #e5f4f4); color: var(--zed-primary-dark, #1f7f7f); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .single-page-full-content ul.zed-elearning-list > li > a::after { content: "Start \2197"; position: absolute; left: 18px; bottom: 14px; color: var(--zed-primary-dark, #1f7f7f); font-size: 14px; font-weight: 700; } .single-page-full-content ul.zed-elearning-list > li > a:hover, .single-page-full-content ul.zed-elearning-list > li > a:focus { transform: translateY(-3px); border-color: var(--zed-primary-line, #b9dcdf); box-shadow: 0 12px 26px rgba(16, 40, 60, .10); opacity: 1 !important; } .single-page-full-content ul.zed-elearning-list > li > a em { display: none; } /* --- menu bar: Home icon as a square button; focus ring only for the keyboard ------------------- */ .header-style-1 .main-menu .navbar-nav > li:first-child > a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 6px 0; padding: 0 !important; border-radius: 10px; transition: background-color .15s ease; } .header-style-1 .main-menu .navbar-nav > li:first-child > a:hover { background: rgba(255, 255, 255, .2); } .header-style-1 .main-menu .navbar-nav > li:first-child > a img { width: 18px; height: 18px; } .header-style-1 .main-menu .navbar-nav > li > a:focus:not(:focus-visible) { outline: none; } .header-style-1 .main-menu .navbar-nav > li > a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; } /* --- home slider: every slide in the same 4:3 frame, dots below it --------------------------------- */ .first-component-carousel .owl-slider1 .owl-item .item { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--zed-primary-soft, #e9f4f5); } .first-component-carousel .owl-slider1.owl-carousel .owl-item img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; } .first-component-carousel.zed-slider-cover .owl-slider1.owl-carousel .owl-item img { object-fit: cover; } .first-component-carousel .owl-slider1.owl-theme .owl-dots { position: static; left: auto; margin: 14px 0 0; text-align: center; } .first-component-carousel .owl-slider1.owl-theme .owl-nav { display: none; } /* empty arrow buttons (dots and autoplay are used) */ /* --- Government of India strip (Branding: layout "Government portal" or switched on) ---------- */ .zed-gov-strip { position: relative; padding: 6px 0; background: #1b2730; color: #e6edf1; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; } .zed-gov-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #ff9933 0 33.3%, #fff 33.3% 66.6%, #138808 66.6% 100%); } @media (max-width: 767.98px) { .zed-gov-strip { font-size: 11px; } } /* --- full-width home slider (partials/hero-slider.blade.php) --------------------------------------- */ .first-component.has-hero-slider { padding: 14px 0; } /* only the announcement bar under the full-width slider */ .zed-hero { position: relative; color: #e4edf1; background: linear-gradient(120deg, var(--zed-primary-dark, #1f7f7f) 0%, var(--zed-primary, #45a5ad) 120%); } .zed-hero-slide { padding: 64px 0 76px; } .zed-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; min-height: 340px; } .zed-hero-inner.has-image { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .zed-hero-badge { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 20px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .zed-hero-title { margin: 0 0 16px; color: #fff; font-size: 48px; font-weight: 800; line-height: 1.08; letter-spacing: -.015em; } .zed-hero-highlight { display: block; color: var(--zed-accent, #b3e079); } .zed-hero-lead { max-width: 560px; margin: 0 0 26px; color: rgba(255, 255, 255, .86); font-size: 18px; line-height: 1.6; } .zed-hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .zed-hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 6px; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .zed-hero-btn-primary { background: #fff; color: var(--zed-primary-dark, #1f7f7f); } .zed-hero-btn-primary:hover, .zed-hero-btn-primary:focus { background: #eef7f7; color: var(--zed-primary-dark, #1f7f7f); text-decoration: none; } .zed-hero-btn-ghost { border: 1px solid rgba(255, 255, 255, .5); color: #fff; } .zed-hero-btn-ghost:hover, .zed-hero-btn-ghost:focus { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; } .zed-hero-media { overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); aspect-ratio: 4 / 3; } .zed-hero-media img { width: 100%; height: 100%; object-fit: contain; } .zed-hero .owl-dots { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; } .zed-hero .owl-dots .owl-dot span { background: rgba(255, 255, 255, .4); } .zed-hero .owl-dots .owl-dot.active span { background: #fff; } .zed-hero .owl-nav { position: absolute; left: 0; right: 0; top: 50%; margin: 0; pointer-events: none; } .zed-hero .owl-nav button.owl-prev, .zed-hero .owl-nav button.owl-next { position: absolute; top: -22px; width: 44px; height: 44px; border-radius: 50% !important; margin: 0 !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; font-size: 24px !important; line-height: 44px !important; pointer-events: auto; } .zed-hero .owl-nav button.owl-prev { left: 18px; } .zed-hero .owl-nav button.owl-next { right: 18px; } .zed-hero .owl-nav button:hover { background: rgba(255, 255, 255, .28) !important; } @media (max-width: 991.98px) { .zed-hero-inner.has-image { grid-template-columns: minmax(0, 1fr); } .zed-hero-media { display: none; } .zed-hero-title { font-size: 36px; } .zed-hero .owl-nav { display: none; } } @media (max-width: 575px) { .zed-hero-slide { padding: 40px 0 60px; } .zed-hero-title { font-size: 30px; } .zed-hero-lead { font-size: 16px; } } /* gallery albums: number of photos under the month (gallery.blade.php) */ .gallery2-items .recent-project-content .gallery-album-count { margin: 2px 0 0; font-size: 13px; font-weight: 500; opacity: .85; } /* --- buttons and cards (all layouts; each layout may restyle them) ------------------------------- */ /* Contact Us tab on the right edge: the main colour of the buttons, darker on hover */ .zed-side-tab { background: var(--zed-primary, #45a5ad); } .zed-side-tab:hover, .zed-side-tab:focus { background: var(--zed-primary-dark, #1f7f7f); } /* second buttons (READ MORE, VIEW ALL ...): outlined in the theme colour instead of grey */ .btn-default { border: 1px solid var(--zed-primary-dark, #1f7f7f); background: #fff; color: var(--zed-primary-dark, #1f7f7f); font-weight: 600; transition: background-color .15s ease, color .15s ease; } .btn-default:hover, .btn-default:focus, .btn-default:active { border-color: var(--zed-primary-dark, #1f7f7f); background: var(--zed-primary-dark, #1f7f7f); color: #fff; } /* back to top: round, in the theme colour */ .scroll-img { width: 44px; height: 44px; line-height: 42px; border-radius: 50%; background: var(--zed-primary-dark, #1f7f7f); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: background-color .15s ease, transform .15s ease; } .scroll-img:hover, .scroll-img:focus-visible { background: var(--zed-primary, #45a5ad); transform: translateY(-2px); } /* initiative and incentive cards: same height, titles on one line where they fit, buttons in line */ .bg-services-section .services-section > .row { display: flex; flex-wrap: wrap; } .bg-services-section .services-section > .row::before, .bg-services-section .services-section > .row::after { display: none; } /* Bootstrap clearfix */ .bg-services-section .services-section > .row > .col-md-12 { width: 100%; } .bg-services-section .services-section > .row > .item { display: flex; float: none; margin-bottom: 30px; } .bg-services-section .services-content { display: flex; flex: 1; flex-direction: column; max-height: none; margin-bottom: 0; transition: transform .2s ease, box-shadow .2s ease; } .bg-services-section .services-content > .panel-body { display: flex; flex: 1; flex-direction: column; } .bg-services-section .services-content h4 { width: auto; } .bg-services-section .services-content > .panel-body > img { align-self: flex-start; width: auto; max-width: 100%; } /* icons stay on the left, at their own size */ .bg-services-section .services-content .btn { margin-top: auto; } .bg-services-section .services-content small { margin-bottom: 14px; } .bg-services-section .services-content:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 40, 60, .12); } @media (max-width: 767.98px) { .bg-services-section .services-section > .row > .item { width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { .bg-services-section .services-section > .row > .item { width: 50%; } } @media (prefers-reduced-motion: reduce) { .bg-services-section .services-content, .scroll-img { transition: none; } .bg-services-section .services-content:hover { transform: none; } } /* --- Steps to avail ZED incentives (partials/home-steps.blade.php) ---------------------------------- */ /* the theme's second colour to its main colour, like the original picture (lime to teal for ZED teal) */ .zed-steps-section { padding: 70px 0 80px; background: linear-gradient(170deg, var(--zed-accent, #b3e079) 0%, var(--zed-primary, #45a5ad) 100%); } .zed-steps-title { margin: 0 0 70px; color: #fff; font-family: var(--zed-font-heading, 'Lora', serif); font-size: 40px; font-weight: 700; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .zed-steps { display: grid; grid-template-columns: repeat(var(--zed-steps, 5), minmax(0, 1fr)); align-items: stretch; gap: 14px; margin: 0; padding: 0 0 10px; list-style: none; } .zed-steps-1 { --zed-steps: 1; } .zed-steps-2 { --zed-steps: 2; } .zed-steps-3 { --zed-steps: 3; } .zed-steps-4 { --zed-steps: 4; } .zed-step { position: relative; min-height: 200px; padding: 50px 18px 22px; border-radius: 8px; background: #fff; box-shadow: 0 14px 30px rgba(10, 40, 50, .16); } /* a staircase: all cards the same height, each one step (40px) higher than the one before */ @media (min-width: 992px) { .zed-steps { padding-top: calc((var(--zed-steps, 5) - 1) * 40px); } .zed-step:nth-child(2) { transform: translateY(-40px); } .zed-step:nth-child(3) { transform: translateY(-80px); } .zed-step:nth-child(4) { transform: translateY(-120px); } .zed-step:nth-child(5) { transform: translateY(-160px); } } /* numbered circles, from the second colour (first step) to the main colour (last step) */ .zed-step-num { position: absolute; left: 18px; top: -42px; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border: 5px solid #fff; border-radius: 50%; background: var(--zed-primary, #45a5ad); color: #fff; font-size: 36px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(10, 40, 50, .2); } .zed-step:nth-child(1) .zed-step-num { background: var(--zed-accent, #b3e079); } .zed-step:nth-child(2) .zed-step-num { background: color-mix(in srgb, var(--zed-accent, #b3e079) 75%, var(--zed-primary, #45a5ad)); } .zed-step:nth-child(3) .zed-step-num { background: color-mix(in srgb, var(--zed-accent, #b3e079) 50%, var(--zed-primary, #45a5ad)); } .zed-step:nth-child(4) .zed-step-num { background: color-mix(in srgb, var(--zed-accent, #b3e079) 25%, var(--zed-primary, #45a5ad)); } .zed-step-icon { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border-radius: 6px; background: #f1f3f5; color: #6b7680; font-size: 22px; line-height: 1; } .zed-step-icon small { font-size: 11px; } .zed-step-icon .fa-mobile { font-size: 26px; } .zed-step h3 { margin: 8px 0 12px; color: #1d252c; font-family: var(--zed-font-body, 'Work Sans', sans-serif); font-size: 17.5px; font-weight: 700; line-height: 1.35; text-transform: none; } /* text 1pt smaller than at first, like the steps picture of zed.msme.gov.in: lower cards */ .zed-step p { margin: 0; color: #4a545c; font-size: 13.5px; line-height: 1.6; } @media (max-width: 1199.98px) { .zed-step { padding: 50px 16px 22px; } .zed-step h3 { font-size: 16px; } } @media (max-width: 991.98px) { .zed-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); row-gap: 64px; } .zed-step { min-height: 0; } } @media (max-width: 575px) { .zed-steps-title { margin-bottom: 56px; font-size: 28px; } .zed-steps { grid-template-columns: minmax(0, 1fr); } .zed-step-num { width: 70px; height: 70px; top: -36px; font-size: 30px; } } /* --- notifications bar (Settings > Home page > Notifications bar): buttons in the theme colour ---- */ .bg-highlight-news { padding: 36px 0 10px; } .bg-highlight-news .news-sec { gap: 12px; margin-top: 0; } .bg-highlight-news .btn + .btn { margin-left: 0; } .btn-news, .btn-news:focus { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 8px; background: var(--zed-primary-dark, #1f7f7f); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: normal; box-shadow: 0 8px 18px rgba(16, 40, 60, .14); transition: background-color .15s ease, transform .15s ease; } .btn-news::before { content: "\f0f6"; font-family: FontAwesome; font-size: 18px; font-weight: 400; } .btn-news:hover { background: var(--zed-primary, #45a5ad); border: 0; color: #fff; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .btn-news:hover { transform: none; } } /* --- Government of India website guidelines (GIGW) and accessibility --------------------------------- */ /* skip link: hidden until a keyboard user reaches it */ .zed-skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px; border-radius: 0 0 8px 8px; background: var(--zed-primary-dark, #1f7f7f); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease; } .zed-skip-link:focus, .zed-skip-link:focus-visible { top: 0; color: #fff; outline: 3px solid #ffbf47; outline-offset: 2px; } main:focus { outline: none; } /* a clear keyboard focus everywhere (style.css removes the outline on many controls) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(0, 0, 0, .55) !important; } /* readable grey text (4.5:1 on white) instead of #737d8b */ address, .form-control, input, textarea, select { color: #5c6570; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: #6b7480; } /* footer: ownership, last updated, National Portal */ .zed-footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .85); font-size: 13px; text-align: center; } .zed-footer-meta a { color: #fff; text-decoration: underline; } .zed-footer-meta a:hover, .zed-footer-meta a:focus { color: #fff; text-decoration: none; } /* own "last updated" date of a page or news item */ .zed-page-updated { margin: 26px 0 0; padding-top: 12px; border-top: 1px solid #e3e9ee; color: #5c6570; font-size: 13.5px; } /* news item: title and the date box (spans instead of headings) */ .zed-post-title { margin: 0 0 0 62px; padding: 30px 0 6px; color: #111; font-size: 30px; font-weight: 700; text-transform: uppercase; } .date-box .date-box-day { display: block; color: #fff; font-size: 32px; font-weight: 700; line-height: 1.1; } .date-box .date-box-month { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-transform: uppercase; } @media (max-width: 767.98px) { .zed-post-title { margin-left: 0; padding-top: 90px; font-size: 24px; } } /* links to other websites and to documents (js/zed-links.js) */ a.zed-ext:not(.btn):not(.btn-zed):not(.zed-side-tab):not(:has(img))::after { content: "\f08e"; display: inline-block; margin-left: 5px; font-family: FontAwesome; font-size: .8em; font-weight: 400; text-decoration: none; opacity: .75; } /* inline (not inline-block), so that the icon stays on the line of the link's last word */ .zed-doc-type, .zed-doc-type .zed-doc-icon { display: inline; } .zed-doc-type { margin-left: 6px; line-height: 1; vertical-align: -1px; text-decoration: none; } /* file icon after a document link (zed-links.js), no text: PDF red, Word blue, Excel green, PowerPoint orange */ .zed-doc-type .zed-doc-icon { font-size: 16px; color: var(--zed-primary, #2A7F86); } a:hover .zed-doc-type .zed-doc-icon, a:focus .zed-doc-type .zed-doc-icon { color: var(--zed-primary-dark, #23838b); } /* page not found */ .zed-not-found { padding: 50px 0 70px; } .zed-not-found-lead { max-width: 640px; margin: 0 0 24px; font-size: 18px; line-height: 1.6; } .zed-not-found-search { max-width: 560px; margin-bottom: 28px; } .zed-not-found-search label { display: block; margin-bottom: 6px; font-weight: 600; } .zed-not-found-row { display: flex; gap: 10px; } .zed-not-found-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .zed-not-found-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--zed-primary-dark, #1f7f7f); border-radius: 8px; color: var(--zed-primary-dark, #1f7f7f); font-weight: 600; text-decoration: none; } .zed-not-found-links a:hover, .zed-not-found-links a:focus { background: var(--zed-primary-dark, #1f7f7f); color: #fff; } /* HTML sitemap (sitemap-page.blade.php) */ .zed-sitemap { padding: 46px 0 64px; } .zed-sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px; } .zed-sitemap-group { padding: 20px 22px; border: 1px solid #e3e9ee; border-radius: 10px; background: #fff; } .zed-sitemap-group h2 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--zed-primary, #45a5ad); color: #1d252c; font-size: 19px; font-weight: 700; } .zed-sitemap-group ul { margin: 0; padding: 0; list-style: none; } .zed-sitemap-group li { padding: 6px 0; border-bottom: 1px dashed #e3e9ee; } .zed-sitemap-group li:last-child { border-bottom: 0; } .zed-sitemap-group a { color: var(--zed-primary-dark, #1f7f7f); font-weight: 500; } /* footer: rows inside rows reached 15px past the screen edge on tablets (no sideways scrolling) */ #footerPos .footer-top > .row, #footerPos .footer-bottom > .row { margin-left: 0; margin-right: 0; } /* --- home page sections take turns: a light tint of the theme colour, then white (index.blade.php) ---- */ .zed-band.zed-band-tint > section:not(.zed-steps-section):not(.zed-4-step-process) { background-color: #f6f9fa; background-color: color-mix(in srgb, var(--zed-primary, #45a5ad) 5%, #fff); background-image: none; } .zed-band.zed-band-white > section:not(.zed-steps-section):not(.zed-4-step-process) { background-color: #fff; background-image: none; } .zed-band.zed-band-dashboard > section { background-image: none; } /* cards stand out on both: a fine border on white, white cards on the tint */ .zed-band-white .services-content, .zed-band-white .count-items, .zed-band-white .testimonial, .zed-band-white .event-items { box-shadow: 0 2px 12px rgba(16, 40, 60, .08); } .zed-band-tint .services-content, .zed-band-tint .count-items, .zed-band-tint .testimonial, .zed-band-tint .event-items { background-color: #fff; } /* pictures with a white background (e.g. the medals) blend into the tinted band */ .zed-band-tint .about-section img { mix-blend-mode: multiply; } /* Arrow buttons of the carousels: CMS > Settings > Branding > "Arrow buttons of the sliders" (body.zed-nav-