/* ============================================================
   portal.css - Portal Infotech LLP design layer
   Colors:    computerlab.co.in palette (navy #141B3A / orange
              #FF712B / body #474646 / light gray #F7F7F7 /
              green hover accent #00CE1B)
   Structure: computerlab.co.in (minimal header, navy gradient
              page banners with white triangle divider, orange
              section dividers, flat cards, ghost text-links,
              slim copyright-only footer)
   Loaded AFTER style.css, BEFORE the settings-driven inline
   colors (colors.blade.php). Selectors prefixed with `body`
   win over the settings inline style where the two conflict.
   ============================================================ */

/* ---- 0. Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@400;500&display=swap');

body { font-family: 'Poppins', sans-serif; color: #474646; }
h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: #141B3A; }
body a { color: #444242; }
body a:hover { color: #FF712B; }

/* ---- 1. Header - computerlab minimal (no topbar, logo left, nav right) ---- */
#topbar { display: none !important; } /* !important: topbar markup has Bootstrap .d-flex (display:flex !important) */
body #header { top: 0; }
/* header is fixed (74-77px, topbar hidden) — ONE compensation only; style.css .fixed-top-margin{margin-top:120px} was sized for the old topbar+header stack and overshoots by ~43px */
main.fixed-top-margin { margin-top: 77px; padding-top: 0; }
@media (max-width: 992px) { main.fixed-top-margin { margin-top: 77px; } } /* override style.css's 100px tablet margin, keep the same rule on mobile */
body #header .navbar a, body .navbar ul li a { color: #141B3A; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .3px; }
body .navbar a:hover, body .navbar .active, body .navbar a:focus, body .navbar .active:focus { color: #FF712B !important; }
body .navbar .dropdown ul a:hover, body .navbar .dropdown ul .active:hover, body .navbar .dropdown ul li:hover > a { color: #FF712B; }
body #header .logo { font-family: 'Poppins', sans-serif; font-weight: 700; color: #141B3A; }
/* BRAND-D: logo is near-square portal-logo.jpg (675x683), not a wide wordmark — cap height at 60px, keep aspect (style.css max-height:50px made it a tiny square); 60px + header padding 15px + style.css logo margins (-10/+10) = ~75px, fits the 77px header */
body #header .logo img { max-height: 60px; width: auto; }
/* BRAND-D: scrolled-state hook. style.css `.header-scrolled{box-shadow:0 2px 15px rgba(0,0,0,.1)!important}` equals the base #header shadow = no-op; this needs !important to beat it and is slightly stronger + navy-tinted */
body #header.header-scrolled { box-shadow: 0 2px 15px rgba(20,27,58,.12) !important; }

/* ---- 2. Page banner - computerlab navy gradient + white triangle divider ---- */
body .breadcrumbs {
    position: relative;
    background: linear-gradient(90deg, #141B3A 0%, #2E3E86 100%);
    min-height: 400px;
    padding: 80px 0 120px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
body .breadcrumbs h1, body .breadcrumbs h2 {
    color: #fff; text-transform: uppercase;
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 37px;
    letter-spacing: 1px; margin: 0; text-align: center;
}
body .breadcrumbs .d-flex { display: flex !important; flex-direction: column; justify-content: center; text-align: center; }
body .breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 16px 0 0; }
body .breadcrumbs ol li { color: rgba(255,255,255,.7); font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
body .breadcrumbs ol li+li::before { content: "/"; padding: 0 10px; color: rgba(255,255,255,.4); }
body .breadcrumbs ol li a { color: rgba(255,255,255,.7); }
body .breadcrumbs ol li a:hover { color: #FF712B; }
body .breadcrumbs::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px;
    background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---- 3. Section titles - Poppins navy + left orange divider ---- */
body .section-title h2 { color: #141B3A; font-family: 'Poppins', sans-serif; font-weight: 700; }
body .section-title p { color: #474646; font-family: 'Poppins', sans-serif; font-weight: 300; }
body .section-title h2::before { display: none; }
body .section-title h2::after {
    content: ""; position: absolute; display: block;
    left: 0; bottom: 0; width: 35%; height: 4px;
    background: #FF712B !important;
}

/* ---- 4. Landing block shells ---- */
body .landing-block { background: #fff; padding: 80px 0; }
body .landing-block.section-bg { background-color: #F7F7F7; }
/* clients carousel: white bg, plain logos (home block carries .section-bg) */
body .partners.landing-block { background-color: #fff !important; }
body .partners .thumbnail img { border-radius: 0; }

/* ---- 5. Services hub tabs (rendered by frontEnd/custom/module_2.blade.php) ---- */
.portal-tabs { margin-top: 30px; }
.portal-tab-nav {
    display: flex; flex-wrap: wrap; gap: 6px 4px;
    border-bottom: 2px solid #E5E7EB;
    padding-left: 0; margin-bottom: 0; list-style: none;
}
.portal-tab-nav li { margin: 0; }
.portal-tab-nav .nav-link {
    display: block; padding: 14px 22px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px;
    text-transform: uppercase; letter-spacing: .4px;
    color: #141B3A; background: transparent;
    border: none; border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none; transition: all .25s ease;
}
.portal-tab-nav .nav-link:hover { color: #FF712B; }
.portal-tab-nav .nav-link.active {
    background: #fff;
    border-bottom-color: #FF712B;
    color: #FF712B;
}
.portal-tab-panel { background: #F7F7F7; padding: 40px 30px; border: 1px solid #E5E7EB; border-top: none; }


/* ---- 7. Why choose us / icon-box cards (live markup: .icon-box-list .icon-box) ---- */
body .services .icon-box, body .icon-box-list .icon-box {
    background: #fff !important;
    border: 1px solid #FF712B !important;
    border-radius: 0;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    padding: 25px 25px 55px;
    transition: all .3s ease;
}
body .services .icon-box:hover, body .icon-box-list .icon-box:hover {
    border-color: #00CE1B !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* stock style.css turns h4/p white on hover (designed for navy hover bg); we keep bg white so text must stay dark */
body .services .icon-box:hover h4, body .icon-box-list .icon-box:hover h4,
body .services .icon-box:hover p, body .icon-box-list .icon-box:hover p,
body .services .icon-box:hover a, body .icon-box-list .icon-box:hover a { color: #141B3A !important; }
body .services .icon-box .icon, body .icon-box-list .icon-box .icon {
    width: 68px; height: 68px; margin: 0 auto 20px;
    background: #141B3A; color: #BFBFBF;
    border-radius: 50%; font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
body .services .icon-box .icon::before, body .icon-box-list .icon-box .icon::before { display: none; }
body .services .icon-box .icon i, body .icon-box-list .icon-box .icon i { color: #BFBFBF; }
body .services .icon-box:hover .icon, body .icon-box-list .icon-box:hover .icon { background: #FF712B; color: #fff; }
body .services .icon-box:hover .icon i, body .icon-box-list .icon-box:hover .icon i { color: #fff; }
body .services .icon-box h4, body .icon-box-list .icon-box h4 { color: #141B3A; font-family: 'Poppins', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; margin-bottom: 12px; }
body .services .icon-box p, body .icon-box-list .icon-box p { color: #7A7A7A; font-size: 14px; line-height: 1.8; }

/* ---- 9. Buttons - ghost text-links (Raleway, hover orange) ---- */
/* ponytail: !important on radius beats style.css `#header-search-box .btn` (id selector, 50px pill) */
body .btn-theme {
    background: transparent; color: #444242;
    border: none; border-radius: 0 !important;
    font-family: 'Raleway', sans-serif; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 8px 12px;
}
body .btn-theme:hover { background: transparent; color: #FF712B; }
body .btn-primary {
    background: transparent; color: #444242;
    border: none; border-radius: 0 !important;
    font-family: 'Raleway', sans-serif; font-weight: 500;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 8px 12px;
}
body .btn-primary:hover { background: transparent !important; border-color: transparent !important; color: #FF712B !important; }
body .btn-outline-theme { border: 1px solid #444242; color: #444242; border-radius: 0 !important; background: transparent; font-family: 'Raleway', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
body .btn-outline-theme:hover { background: transparent; border-color: #FF712B; color: #FF712B; }
/* hero slider ghost link needs light text over the dark overlay */
body #hero .slider-link { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
body #hero .slider-link:hover { color: #FF712B; border-color: #FF712B; }

/* ---- 11. Footer - slim, navy, dark bottom bar ---- */
body #footer { background: #141B3A; }
/* keep only the first (Contact Details) footer-links column, centered */
body #footer .footer-top .row > .footer-links { display: none; }
body #footer .footer-top .row > .footer-links:first-child { display: block; text-align: center; }
body #footer .footer-newsletter { display: none; }
body #footer .footer-top { padding: 45px 0 25px; }
body #footer .footer-title h3, body #footer h4 {
    color: #fff;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: 1px;
    padding-left: 12px; border-left: 3px solid #FF712B;
}
body #footer p, body #footer ul li a, body #footer address { color: rgba(255,255,255,.85); }
body #footer ul li a:hover, body #footer a:hover { color: #FF712B; }
body #footer .social-links a { color: #fff; border-color: rgba(255,255,255,.25); }
body #footer .social-links a:hover { background: #FF712B; border-color: #FF712B; color: #fff; }
body #footer .footer-bottom { background: #0D1226 !important; border-top: 1px solid rgba(255,255,255,.08); }
body #footer .copyright, body #footer .credits { color: rgba(255,255,255,.7); }
body #footer .footer-bottom a { color: rgba(255,255,255,.7); }
body #footer .footer-bottom a:hover { color: #FF712B; }

/* ---- 12. Home hero (settings-driven overlay stays; typography only) ---- */
#hero h2 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #fff; }
#hero p { font-family: 'Poppins', sans-serif; font-weight: 300; }

/* ---- 13. Small components ---- */
body .back-to-top { background: #FF712B; }
body .back-to-top:hover { background: #E05F1A; }
body .faq .faq-list a, body .faq .faq-list .faq-question { color: #141B3A; }
body .faq .faq-list a:hover { color: #FF712B; }
body .testimonials .testimonial-item h3, body .staff .member h4 { color: #141B3A; font-family: 'Poppins', sans-serif; font-weight: 700; }
body .text-primary { color: #141B3A !important; }
body .bg-secondary { background-color: #141B3A !important; border-color: #141B3A !important; }
/* flat design mandate: style.css .card/.post-main-photo/.bottom-article are 15px rounded */
body .card { border-radius: 0; }
body .post-main-photo, body .bottom-article { border-radius: 0; }
body .pagination .page-link { color: #FF712B !important; }
body .pagination .page-item.active .page-link { background: #FF712B !important; border-color: #FF712B !important; color: #fff !important; }

/* ---- 14. Responsive ---- */
@media (max-width: 991px) {
    body .breadcrumbs { min-height: 300px; padding: 60px 0 90px; }
    body .breadcrumbs h1, body .breadcrumbs h2 { font-size: 26px; }
    body .landing-block { padding: 60px 0; }
    .portal-tab-nav .nav-link { padding: 10px 14px; font-size: 12px; }
    .portal-tab-panel { padding: 24px 16px; }
    .portal-tab-nav { overflow-x: auto; flex-wrap: nowrap; }
}

/* ---- 15. projectrows view_style (frontEnd/landing/projectrows.blade.php) ----
   computerlab-style alternating navy rows; partial emits .project-row(+.alt)/.project-grid/.project-media/.project-img/.project-title/.project-text/.project-desc */
body .projectrows .project-row {
    background: #141B3A; color: #fff;
    border-radius: 0;
    padding: 40px; margin-bottom: 40px;
    display: flex; align-items: center; gap: 40px;
}
body .projectrows .project-row.alt { background: rgba(20, 27, 58, .85); }
body .projectrows .project-row.alt .project-grid { flex-direction: row-reverse; }
body .projectrows .project-grid { display: flex; align-items: center; gap: 40px; width: 100%; }
body .projectrows .project-media { flex: 0 0 40%; }
body .projectrows .project-img { width: 100%; border-radius: 0; box-shadow: 0 0 20px rgba(0, 0, 0, .45); }
body .projectrows .project-title { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: 1px; margin: 14px 0 0; text-align: center; }
body .projectrows .project-text { flex: 1 1 auto; }
body .projectrows .project-desc { color: rgba(255, 255, 255, .95); font-size: 14px; line-height: 2em; text-align: justify; margin: 0; }
@media (max-width: 767px) {
    body .projectrows .project-row { padding: 24px; }
    body .projectrows .project-grid { flex-direction: column !important; }
    body .projectrows .project-media { flex: 0 0 auto; }
}

/* ---- 16. photocarousel view_style (frontEnd/landing/photocarousel.blade.php) ----
   owl photo carousel with caption-under-image (awards/certificates) */
body .photocarousel .owl-carousel .item { padding: 5px; }
body .photocarousel .phc-figure { margin: 0; text-align: center; }
body .photocarousel .phc-img { max-height: 240px; margin: 0 auto; border: 1px solid #E5E7EB; border-radius: 0; object-fit: contain; }
body .photocarousel .phc-caption { color: #141B3A; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; padding-top: 8px; }
body .photocarousel .owl-nav button { color: #BFBFBF; font-size: 34px; }