/* ========================================= */ /* PERFORMANCE OPTIMIZED CSS */ /* ========================================= */ /* Hero Image Fix (Replacing CSS background for speed) */ .b2b-hero-section { position: relative; min-height: 80vh; /* Fixed height visually to avoid CLS */ display: flex; align-items: center; background-color: #f8f9fa; /* Placeholder color while image loads */ } .hero-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .b2b-hero-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); /* Overlay for text readability */ z-index: 1; } .hero-content { z-index: 2; } /* Typography fix for Speed - Avoiding invisible text while fonts load */ body, h1, h2, p { font-display: swap; } /* Accessibility Fix: Ensure buttons have enough contrast */ .b2b-hero-section .btn-primary { background-color: #f3c04d; border-color: #f3c04d; color: #000 !important; /* Dark text for better accessibility score */ font-weight: 600; } /* Image Aspect Ratio Fixes (Stopping CLS) */ .review-logo, .card-icon, .industry-icon { aspect-ratio: auto; height: auto; } /* Tabs Optimization */ .custom-services-tabs .nav-link { transition: none; /* Removing heavy transitions for mobile performance */ contain: content; } /* Mobile specific fixes */ @media (max-width: 768px) { .b2b-hero-section { padding: 60px 15px; min-height: 60vh; } .display-5 { font-size: 1.8rem; /* Reducing large font on mobile for LCP */ } } /* Reviews Section Styling */ .reviews-section { background-color: #f7f7f7; /* Thoda light background for visibility */ padding: 40px 0; } .review-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; /* Spacing between logo and rating */ height: 100%; } .review-logo { max-height: 30px; /* Logo ki height adjust ki hai */ width: auto; object-fit: contain; margin-bottom: 5px; /* filter: grayscale(100%); Optional: logos ko grayscale kar diya hai agar woh background se zyada blend ho rahe hon */ opacity: 0.85; transition: all 0.3s ease; } .review-logo:hover { filter: grayscale(0%); /* Hover par original color wapas aa jayega */ opacity: 1; } .rating-stars { font-size: 1rem; color: #f3c04d; /* Golden color for stars */ white-space: nowrap; /* Taki stars aur number ek line me rahein */ display: flex; align-items: center; justify-content: center; } /* Rating number ki styling (e.g., 4.6) */ .rating-number { font-size: 0.9rem; color: #333; font-weight: 600; margin-left: 5px; } /* Column adjustment for smaller screens (optional, but good practice) */ @media (max-width: 576px) { .reviews-section .col-6 { flex: 0 0 50%; /* 2 items per row on extra small devices */ max-width: 50%; } } /* Styling for the "What is a B2B Portal?" section */ .what-is-portal-section { padding: 80px 0; background-color: #fff; /* White background */ } .portal-heading { font-size: 28px; font-weight: 700; color: #f3c04d; /* Golden/Primary color for heading */ /* Add an optional underline or border similar to your sample page if needed */ /* border-bottom: 3px solid #f3c04d; */ /* display: inline-block; */ /* padding-bottom: 5px; */ } .what-is-portal-section p { font-size: 17px; line-height: 1.7; color: #444; } .portal-infographic { /* max-width: ; */ height: auto; /* Animation ya shadow agar chahiye ho to yahan add kar sakte hain */ transition: transform 0.5s ease; } /* Button styling - using the theme from the Hero section */ .what-is-portal-section .btn-primary { background-color: #f3c04d; /* Golden/Primary Color */ border-color: #f3c04d; color: #1B3160; /* Dark Text */ font-weight: 600; transition: all 0.3s ease; } .what-is-portal-section .btn-primary:hover { background-color: #d18800; /* Darker golden on hover */ border-color: #d18800; color: #fff; /* White text on hover */ } /* Responsive adjustment for image */ @media (max-width: 768px) { .what-is-portal-section .col-md-5 { order: -1; /* Image ko mobile par text se pehle dikhane ke liye */ margin-bottom: 30px; } } /* Styling for Types of B2B Web Portals Section */ .types-of-portals-section { padding: 80px 0; background-color: #f9f9f9; /* Light grey background for separation */ } .portal-type-card { background-color: #fff; border: 1px solid #eee; border-radius: 10px; text-align: center; transition: all 0.3s ease; } .portal-type-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-color: #f3c04d; /* Golden border on hover */ } /* Icons */ .portal-type-card .card-icon { width: 60px; height: 60px; margin: 10px auto 20px auto; object-fit: contain; /* Optional: Icon background circle if needed */ /* background: #f3c04d20; border-radius: 50%; padding: 10px; */ } /* Card Heading (H3) */ .portal-type-card .card-title { font-size: 22px; /* Consistent heading size */ color: #1B3160; /* Dark blue/black */ margin-bottom: 15px; } /* Card Paragraph */ .portal-type-card .card-text { /* Uses the global p style (17px, #444) */ text-align: left; min-height: 100px; /* To keep card heights more uniform if text length varies slightly */ } /* Send a Request Link Button */ .send-request-link { display: inline-flex; align-items: center; gap: 8px; color: #f3c04d; /* Golden color for link */ font-weight: 600; text-decoration: none; margin-top: 15px; transition: all 0.3s ease; font-size: 17px; /* Consistent with paragraph text size */ } .send-request-link:hover { color: #d18800; /* Darker golden on hover */ gap: 12px; /* Slight arrow movement on hover */ } /* ========================================= */ /* B2B Services Tab Section - Final Styling */ /* ========================================= */ .b2b-services-tab-section { padding: 80px 0; background-color: #fff; } /* --- Left Column: Tabs Styling --- */ .custom-services-tabs { padding-right: 20px; } .custom-services-tabs .nav-link { font-size: 16px; font-weight: 500; color: #333; /* Default text color (Black/Dark Grey) */ text-align: left; padding: 15px 10px; margin-bottom: 5px; /* Resetting Bootstrap defaults to remove blue background */ background: transparent !important; border: none; border-radius: 0; /* Smooth transition for hover/active state */ transition: all 0.3s ease; /* Ensuring no default border interferes */ border-bottom: 2px solid transparent; } /* --- ACTIVE STATE (The Highlight) --- */ /* Jab user click karega toh yeh style apply hoga */ .custom-services-tabs .nav-link.active { /* 1. Text Highlight Color */ color: #DC9401 !important; font-weight: 700; /* 2. NO Blue Background */ background-color: transparent !important; /* 3. Underline Effect */ border-bottom: 2px solid #DC9401 !important; /* Optional: Thoda sa right shift effect for active feel */ padding-left: 15px; } /* Hover Effect (Before clicking) */ .custom-services-tabs .nav-link:hover:not(.active) { color: #DC9401; /* Hover par bhi golden color */ background-color: #fcfcfc !important; /* Very subtle grey background on hover only */ } /* CTA Link Specific Style (Last Item) */ .custom-services-tabs .cta-link { font-size: 18px; font-weight: 800; color: #1B3160; margin-top: 20px; } .custom-services-tabs .cta-link.active { color: #DC9401 !important; } /* --- Right Column: Content Box --- */ .custom-content-box { background-color: #fff; border: 1px solid #eee; border-radius: 8px; min-height: 450px; /* Consistent height */ } /* Image inside content box */ .content-box-image { width: 100%; height: 250px; /* Fixed height for consistency */ object-fit: cover; /* Image ko crop karke fit karega */ border-radius: 6px; margin-bottom: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .custom-content-box .content-title { font-size: 24px; color: #1B3160; margin-bottom: 15px; font-weight: 700; } /* Responsive (Mobile) */ @media (max-width: 768px) { .custom-services-tabs { padding-right: 0; margin-bottom: 30px; } .content-box-image { height: auto; max-height: 200px; } } /* ========================================= */ /* What Sets Us Apart Section Styling */ /* ========================================= */ .apart-section { padding: 80px 0; background-color: #f9f9f9; /* Light gray background for contrast */ } /* Standard Feature Box */ .apart-box { background-color: #fff; border: 1px solid #eee; border-radius: 10px; transition: all 0.3s ease; /* Ensuring content aligns well */ display: flex; flex-direction: column; } .apart-box:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; border-color: #DC9401; /* Golden border on hover */ } /* Icons inside the box */ .apart-box .card-icon { width: 50px; height: 50px; margin-bottom: 20px; object-fit: contain; } /* Headings inside the box */ .apart-box h3 { font-size: 22px; color: #1B3160; margin-bottom: 15px; font-weight: 700; } /* List items (Content paragraphs) */ .apart-box ul { padding-left: 20px; /* Space for bullets */ margin-bottom: 0; } .apart-box ul li { font-size: 17px; /* Consistent font size */ line-height: 1.6; color: #444; margin-bottom: 10px; } /* --- Special Wide CTA Box Styling --- */ .apart-box.cta-box { background-color: #fff; border: 2px solid #eee; /* Slightly thicker border for emphasis */ } .cta-box:hover { border-color: #DC9401; } .cta-box h3 { font-size: 28px; /* Slightly larger heading for CTA */ color: #1B3160; } .cta-box p.lead { font-size: 18px; font-weight: 500; color: #555; } /* CTA Button Styling */ .cta-box .btn-primary { background-color: #f3c04d; border-color: #f3c04d; color: #1B3160; font-weight: 700; } .cta-box .btn-primary:hover { background-color: #d18800; border-color: #d18800; color: #fff; } /* Responsive adjustments */ @media (max-width: 991px) { .cta-box { padding: 30px !important; } } /* ========================================= */ /* Technology Stack Section Styling */ /* ========================================= */ .tech-stack-section { background-color: #f9f9f9; } /* Background for Left Menu (Dark Theme) */ .bg-dark-custom { background-color: #2F2103; /* Matches your dark brand color */ color: #fff; min-height: 100%; } /* Tabs Styling */ .tech-tabs .nav-link { color: #fff; /* White text inactive */ padding: 20px 25px; border-radius: 0; font-size: 16px; font-weight: 500; text-align: left; transition: all 0.3s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator line */ /* Ensure flexbox for arrow positioning */ display: flex; justify-content: space-between; align-items: center; } /* Hide Arrow by default */ .tech-tabs .nav-link .arrow-icon { display: none; font-size: 14px; } /* --- ACTIVE STATE --- */ .tech-tabs .nav-link.active { background-color: #DC9401 !important; /* Golden Active Background */ color: #fff !important; font-weight: 700; border-bottom-color: #DC9401; } /* Show Arrow ONLY on Active */ .tech-tabs .nav-link.active .arrow-icon { display: block; } /* Hover Effect */ .tech-tabs .nav-link:hover:not(.active) { background-color: rgba(255, 255, 255, 0.05); color: #DC9401; padding-left: 30px; /* Slight movement effect */ } /* --- Content Area Styling --- */ .tech-list { display: flex; flex-direction: column; gap: 15px; } .tech-item { display: flex; align-items: center; padding: 15px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; transition: transform 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); } .tech-item:hover { transform: translateX(5px); border-color: #DC9401; } /* Icon inside content list */ .tech-icon { font-size: 24px; margin-right: 15px; width: 40px; text-align: center; } /* Responsive Fix */ @media (max-width: 768px) { .bg-dark-custom { min-height: auto; } .tech-tabs .nav-link { justify-content: center; /* Center text on mobile */ } .tech-tabs .nav-link .arrow-icon { display: none !important; /* Hide arrow on mobile */ } } /* ========================================= */ /* Industry Solutions Section Styling */ /* ========================================= */ .industry-solutions-section { background-color: #fff; /* White background */ } /* Feature Box Styling */ .industry-box { background-color: #fff; border: 1px solid #eee; border-radius: 12px; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; /* Center align items initially */ text-align: center; } /* Hover Effect */ .industry-box:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; border-color: #DC9401; /* Golden border on hover */ } /* GIF Icon Styling */ .industry-box .industry-icon { width: 65px; /* Size for GIFs */ height: 65px; object-fit: contain; margin-bottom: 20px; } /* Heading Styling */ .industry-box h3 { font-size: 20px; color: #1B3160; margin-bottom: 15px; font-weight: 700; } /* List Styling */ .industry-box ul { padding-left: 0; list-style: none; /* Remove default bullets */ text-align: left; /* Align text to left for readability */ width: 100%; } .industry-box ul li { font-size: 16px; color: #555; margin-bottom: 8px; padding-left: 15px; position: relative; } /* Custom Golden Bullet/Dash */ .industry-box ul li::before { content: "—"; /* Dash bullet */ color: #DC9401; /* Golden color */ font-weight: bold; position: absolute; left: 0; } /* CTA Button Styling (Consistent) */ .industry-solutions-section .btn-primary { background-color: #f3c04d; border-color: #f3c04d; color: #1B3160; font-weight: 700; transition: all 0.3s ease; } .industry-solutions-section .btn-primary:hover { background-color: #d18800; border-color: #d18800; color: #fff; }