/* Baycor Custom Overrides - all changes go in style.css */ /* Global Body Background Reset */ html, body, body.home, body.home-1, body.home-2, body.home-3, body.home-4 { background-color: #FFFFFF !important; background: #FFFFFF !important; } .cg-ser1-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cg-ser1-tab-btn { width: 440px; max-width: 440px; -webkit-box-flex: 0; -ms-flex: 0 0 440px; flex: 0 0 440px; } .cg-ser1-tab-content { width: 100%; max-width: 850px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cg-ser1-img-text .item-text .inner-icon { width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cg-ser1-img-text .item-text .inner-icon svg, .cg-ser1-img-text .item-text .inner-icon img { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; display: block; object-fit: contain; } .cg-ser1-img-text .item-text .inner-icon svg path, .cg-ser1-img-text .item-text .inner-icon svg g, .cg-ser1-img-text .item-text .inner-icon svg rect, .cg-ser1-img-text .item-text .inner-icon svg circle, .cg-ser1-img-text .item-text .inner-icon svg polygon, .cg-ser1-img-text .item-text .inner-icon svg polyline { fill: #ffffff !important; } .cg-ser1-img-text .item-text .inner-icon svg [stroke]:not([stroke="none"]) { stroke: #ffffff !important; } .cg-ser1-img-text .item-text .inner-icon img { filter: brightness(0) invert(1) !important; } /* ========================================================= */ /* Responsive Styles: Tablet & Mobile (Slider + Clear Photo Card) */ /* ========================================================= */ @media only screen and (max-width: 991px) { .cg-ser1-content { -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 20px; } /* Horizontal Slider for Tab Buttons */ .cg-ser1-tab-btn { width: 100% !important; max-width: 100% !important; -webkit-box-flex: 0 !important; -ms-flex: none !important; flex: none !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; padding-bottom: 12px; margin-bottom: 5px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--cg-pr-c2) #E1E2E9; } .cg-ser1-tab-btn::-webkit-scrollbar { height: 5px; } .cg-ser1-tab-btn::-webkit-scrollbar-track { background: #E8EEF5; border-radius: 10px; } .cg-ser1-tab-btn::-webkit-scrollbar-thumb { background: var(--cg-pr-c2); border-radius: 10px; } .cg-ser1-tab-btn .nav-tabs { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; gap: 12px !important; border: none !important; width: -webkit-max-content !important; width: -moz-max-content !important; width: max-content !important; padding: 2px 4px !important; } .cg-ser1-tab-btn .nav-item { -webkit-box-flex: 0 !important; -ms-flex: 0 0 auto !important; flex: 0 0 auto !important; } .cg-ser1-tab-btn .nav-link { padding: 0 !important; border: none !important; background: transparent !important; } .cg-ser-item-icon-text { width: auto !important; min-width: 250px !important; max-width: 280px !important; padding: 12px 18px !important; margin-bottom: 0 !important; gap: 12px !important; border-radius: 10px !important; } .cg-ser-item-icon-text .item-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; } .cg-ser-item-icon-text .item-icon svg, .cg-ser-item-icon-text .item-icon img { width: 30px !important; height: 30px !important; } .cg-ser-item-icon-text .item-text { font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; text-align: left !important; } .cg-ser1-tab-content { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } } /* Tablet (768px - 991px): Side-by-Side Card */ @media only screen and (min-width: 768px) and (max-width: 991px) { .cg-ser1-img-text { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; position: relative !important; width: 100% !important; border-radius: 16px !important; overflow: hidden !important; background-color: var(--cg-pr-c1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .cg-ser1-img-text .item-img { -webkit-box-flex: 1 !important; -ms-flex: 1 1 45% !important; flex: 1 1 45% !important; width: 45% !important; min-height: 420px !important; position: relative !important; margin-bottom: 0 !important; clip-path: none !important; } .cg-ser1-img-text .item-img .inner-img { width: 100% !important; height: 100% !important; } .cg-ser1-img-text .item-img .inner-img img { width: 100% !important; height: 100% !important; min-height: 420px !important; object-fit: cover !important; object-position: center !important; display: block !important; } .cg-ser1-img-text .item-text { -webkit-box-flex: 1 !important; -ms-flex: 1 1 55% !important; flex: 1 1 55% !important; width: 55% !important; max-width: 55% !important; position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important; padding: 35px 30px !important; background: transparent !important; clip-path: none !important; transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; text-align: left !important; } .cg-ser1-img-text .item-btn-client { position: absolute !important; top: 20px !important; right: 20px !important; z-index: 4 !important; margin: 0 !important; } } /* Mobile (< 768px): Photo on Top (Full Subject Clear) + Text Attached Below */ @media only screen and (max-width: 767px) { .cg-ser1-img-text { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; position: relative !important; width: 100% !important; max-width: 500px !important; margin: 0 auto !important; border-radius: 16px !important; overflow: hidden !important; background-color: var(--cg-pr-c1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; } .cg-ser1-img-text .item-img { width: 100% !important; height: 260px !important; position: relative !important; margin-bottom: 0 !important; clip-path: none !important; flex-shrink: 0 !important; } .cg-ser1-img-text .item-img .inner-img { width: 100% !important; height: 100% !important; } .cg-ser1-img-text .item-img .inner-img img { width: 100% !important; height: 260px !important; object-fit: cover !important; object-position: center !important; display: block !important; } .cg-ser1-img-text .item-text { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 24px 20px 26px !important; background: var(--cg-pr-c1) !important; clip-path: none !important; transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; text-align: left !important; border-radius: 0 0 16px 16px !important; } .cg-ser1-img-text .item-text .inner-icon { margin-bottom: 10px !important; } .cg-ser1-img-text .item-text p { font-size: 14px !important; line-height: 1.5 !important; padding-bottom: 14px !important; margin-bottom: 0 !important; color: #DDE7F0 !important; } .cg-ser1-img-text .item-text li { font-size: 13.5px !important; line-height: 1.4 !important; margin-bottom: 8px !important; color: #FFFFFF !important; } .cg-ser1-img-text .item-text li i { margin-right: 8px !important; } .cg-ser1-img-text .item-btn-client { position: absolute !important; top: 14px !important; right: 14px !important; bottom: auto !important; left: auto !important; z-index: 4 !important; margin: 0 !important; justify-content: flex-end !important; } .cg-ser1-img-text .item-btn-client .cg-btn-1 a span { background: transparent !important; } .cg-ser-item-icon-text { width: auto !important; min-width: 250px !important; max-width: 280px !important; padding: 12px 18px !important; margin-bottom: 0 !important; gap: 12px !important; border-radius: 10px !important; } .cg-ser-item-icon-text .item-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; } .cg-ser-item-icon-text .item-icon svg, .cg-ser-item-icon-text .item-icon img { width: 30px !important; height: 30px !important; } .cg-ser-item-icon-text .item-text { font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; text-align: left !important; } .cg-ser1-tab-content { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } } /* Tablet (768px - 991px): Side-by-Side Card */ @media only screen and (min-width: 768px) and (max-width: 991px) { .cg-ser1-img-text { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; position: relative !important; width: 100% !important; border-radius: 16px !important; overflow: hidden !important; background-color: var(--cg-pr-c1) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; } .cg-ser1-img-text .item-img { -webkit-box-flex: 1 !important; -ms-flex: 1 1 45% !important; flex: 1 1 45% !important; width: 45% !important; min-height: 420px !important; position: relative !important; margin-bottom: 0 !important; clip-path: none !important; } .cg-ser1-img-text .item-img .inner-img { width: 100% !important; height: 100% !important; } .cg-ser1-img-text .item-img .inner-img img { width: 100% !important; height: 100% !important; min-height: 420px !important; object-fit: cover !important; object-position: center !important; display: block !important; } .cg-ser1-img-text .item-text { -webkit-box-flex: 1 !important; -ms-flex: 1 1 55% !important; flex: 1 1 55% !important; width: 55% !important; max-width: 55% !important; position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important; margin: 0 !important; padding: 35px 30px !important; background: transparent !important; clip-path: none !important; transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; text-align: left !important; } .cg-ser1-img-text .item-btn-client { position: absolute !important; top: 20px !important; right: 20px !important; z-index: 4 !important; margin: 0 !important; } } /* Footer Background & Overlay (Baycor Brand Blue) */ .elementor-1354 .elementor-element.elementor-element-84fb541, .elementor-2570 .elementor-element.elementor-element-84fb541, .elementor-2571 .elementor-element.elementor-element-84fb541, .cg-footer1-sec { background-color: #001d36 !important; } .elementor-1354 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .elementor-2570 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .elementor-2571 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .cg-footer1-sec > .elementor-background-overlay { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 70, 127, 0.86)), to(rgba(0, 29, 54, 0.96))) !important; background: linear-gradient(180deg, rgba(0, 70, 127, 0.86) 0%, rgba(0, 29, 54, 0.96) 100%) !important; opacity: 0.90 !important; } .cg-footer-cta { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } .cg-footer-cta-wrap { border-left: none !important; } .cg-ftr-cta-item .item-icon { background: rgba(255, 255, 255, 0.12) !important; } /* ========================================================= */ /* 1. Hero Slider H1 Responsive Typography & Full Width */ /* ========================================================= */ @media (max-width: 991px) { .elementor-element-948e911, .elementor-element-948e911 > .elementor-container, .elementor-element-d4ea769, .elementor-element-d4ea769 > .elementor-widget-wrap, .elementor-element-7f45e5d, .elementor-element-7f45e5d > .elementor-widget-container, #cg-hero1, .cg-hero1-sec, .cg-hero1-slider, .cg-hero1-slider-for, .cg-hero1-slider-for .swiper-wrapper, .cg-hero1-slider-for .swiper-slide, .cg-hr1-item, .cg-hr1-item .item-inner-item { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; } .cg-hr1-item .item-img { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; } .cg-hr1-item .item-img img { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; } } @media (max-width: 767px) { .hero-text1 { padding: 105px 15px 35px !important; max-width: 100% !important; } .hero-text1 .hero_title, .hero-text1 .hero_title .split-word { font-size: 30px !important; line-height: 1.2 !important; } .hero-text1 .hero-slug { font-size: 13px !important; margin-bottom: 10px !important; } .hero-text1 p { font-size: 14.5px !important; line-height: 1.45 !important; margin-bottom: 22px !important; } .cg-ab1-sec.pt-115, .cg-ab1-sec { padding-top: 30px !important; padding-bottom: 40px !important; } .cg-ab1-list-item { margin-bottom: 18px !important; padding-bottom: 18px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-text1 { padding: 140px 20px 45px !important; } .hero-text1 .hero_title, .hero-text1 .hero_title .split-word { font-size: 42px !important; line-height: 1.2 !important; } .cg-ab1-sec.pt-115, .cg-ab1-sec { padding-top: 45px !important; padding-bottom: 50px !important; } } /* ========================================================= */ /* 2. Feature Cards (Boxes 1, 2, 3) Uniform Responsive Design */ /* ========================================================= */ /* Desktop (>= 992px): All 3 boxes 350px with centered content */ .cg-ft1-item { height: 350px !important; margin-bottom: 30px !important; } .cg-ft1-item:is(.cg-ft-item2) { height: 350px !important; padding: 40px 35px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; background-color: var(--cg-pr-c3) !important; } .cg-ft1-item:is(.cg-ft-item2) .item-text { height: auto !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; gap: 10px !important; } .cg-ft1-item:is(.cg-ft-item2) .item-text h3 { color: #fff !important; font-size: 64px !important; font-weight: 700 !important; line-height: 1 !important; margin: 0 !important; padding-bottom: 0 !important; } .cg-ft1-item:is(.cg-ft-item2) .item-text p { color: #fff !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 !important; } /* Box 3 (Certifications & Accreditations): Red smaller subtitle across all viewports */ .cg-ft1-item:is(.cg-ft-item3) .item-text h3 { font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--cg-title-color, #00467F) !important; margin: 0 !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text h3 span { color: #C00000 !important; display: block !important; margin-top: 6px !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* Tablet (768px - 991px): Uniform 320px height */ @media only screen and (min-width: 768px) and (max-width: 991px) { .cg-ft1-item { height: 320px !important; margin-bottom: 25px !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text h3 { font-size: 21px !important; max-width: 100% !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text h3 span { font-size: 15px !important; white-space: nowrap !important; } .cg-ft1-item:is(.cg-ft-item3) .item-shape { position: absolute !important; bottom: 50px !important; left: 25px !important; width: 115px !important; height: 115px !important; border-radius: 50% !important; background-color: var(--cg-pr-c2, #00467F) !important; z-index: 2 !important; opacity: 1 !important; transform: none !important; } .cg-ft1-item:is(.cg-ft-item3) .item-img { position: absolute !important; left: 10px !important; right: auto !important; bottom: 0 !important; width: 280px !important; max-width: 280px !important; z-index: 3 !important; pointer-events: none !important; transform: none !important; opacity: 1 !important; } } /* Mobile (< 767px) */ @media only screen and (max-width: 767px) { /* Box 3: Accreditations, Truck and Decorative Circle Responsive Fix */ .cg-ft1-item:is(.cg-ft-item3) { height: 310px !important; min-height: 310px !important; padding: 24px 20px 20px !important; position: relative !important; overflow: hidden !important; margin-top: 0 !important; margin-bottom: 25px !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text { position: relative !important; z-index: 5 !important; max-width: 100% !important; width: 100% !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text h3 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--cg-title-color, #00467F) !important; max-width: 100% !important; margin: 0 !important; } .cg-ft1-item:is(.cg-ft-item3) .item-text h3 span { color: #C00000 !important; display: block !important; margin-top: 6px !important; font-size: clamp(11px, 3.2vw, 13px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.15px !important; white-space: nowrap !important; } .cg-ft1-item:is(.cg-ft-item3) .item-shape { position: absolute !important; bottom: 45px !important; left: 20px !important; width: 110px !important; height: 110px !important; border-radius: 50% !important; background-color: var(--cg-pr-c2, #00467F) !important; z-index: 2 !important; opacity: 1 !important; transform: none !important; } .cg-ft1-item:is(.cg-ft-item3) .item-img { position: absolute !important; left: 10px !important; right: auto !important; bottom: 0 !important; width: 280px !important; max-width: 85% !important; z-index: 3 !important; pointer-events: none !important; transform: none !important; opacity: 1 !important; } .cg-ft1-item:is(.cg-ft-item3) .item-img img { width: 100% !important; height: auto !important; display: block !important; } .elementor-motion-effects-container > .elementor-motion-effects-layer, .elementor-1354 .elementor-element.elementor-element-84fb541, .elementor-2570 .elementor-element.elementor-element-84fb541, .elementor-2571 .elementor-element.elementor-element-84fb541, .cg-footer1-sec { background-image: none !important; background-color: #00467F !important; background: #00467F !important; } .elementor-1354 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .elementor-2570 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .elementor-2571 .elementor-element.elementor-element-84fb541 > .elementor-background-overlay, .cg-footer1-sec > .elementor-background-overlay { display: none !important; background: transparent !important; opacity: 0 !important; } /* Footer Top CTA: Left-Aligned with Footer Sections */ .cg-footer-cta { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 30px 0 25px 0 !important; gap: 20px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; width: 100% !important; box-sizing: border-box !important; } .cg-footer-cta .brand-logo { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 12px auto !important; padding: 0 !important; text-align: center !important; } .cg-footer-cta .brand-logo a { display: inline-block !important; margin: 0 auto !important; text-align: center !important; } .cg-footer-cta .brand-logo img, .cg-footer-cta .logo_site-size { width: 260px !important; max-width: 85vw !important; height: auto !important; max-height: 80px !important; margin: 0 auto !important; display: block !important; object-fit: contain !important; object-position: center center !important; } .cg-footer-cta-wrap { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; gap: 16px !important; padding: 0 !important; margin: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; box-sizing: border-box !important; } .cg-ftr-cta-item { width: 100% !important; max-width: 100% !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } .cg-ftr-cta-item .item-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; -webkit-box-flex: 0 !important; -ms-flex: 0 0 42px !important; flex: 0 0 42px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; color: #FFFFFF !important; margin: 0 !important; } .cg-ftr-cta-item .item-text { min-width: 0 !important; -webkit-box-flex: 1 !important; -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; text-align: left !important; margin: 0 !important; padding: 0 !important; } .cg-ftr-cta-item .item-text span { font-size: 12px !important; font-weight: 500 !important; line-height: 1.2 !important; margin-bottom: 3px !important; color: rgba(255, 255, 255, 0.75) !important; display: block !important; text-align: left !important; } .cg-ftr-cta-item .item-text a { font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; color: #FFFFFF !important; display: block !important; text-align: left !important; } /* Main Footer Widgets Wrap Spacing & Alignment */ .cg-footer-widget-wrap { padding-top: 35px !important; padding-bottom: 45px !important; gap: 30px !important; } .cg-ftr1-widget { width: 100% !important; max-width: 100% !important; text-align: left !important; box-sizing: border-box !important; } .cg-ftr1-widget .newslatter-widget { max-width: 100% !important; text-align: left !important; } .cg-ftr1-widget .newslatter-widget h3 { font-size: 26px !important; line-height: 1.25 !important; padding-bottom: 16px !important; text-align: left !important; max-width: 100% !important; } .cg-ftr1-widget .newslatter-widget form { width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; } .cg-ftr1-widget .newslatter-widget form input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .cg-ftr1-widget .widget-title { font-size: 18px !important; margin-bottom: 18px !important; text-align: left !important; } .cg-ftr1-widget .menu-widget ul { text-align: left !important; padding-left: 0 !important; } .cg-ftr1-widget .menu-widget li { text-align: left !important; } .cg-ftr1-widget .menu-widget li a { text-align: left !important; } .cg-footer-bottom { padding: 22px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; } .cg-footer-bottom p { font-size: 13px !important; line-height: 1.5 !important; } } /* ========================================================= */ /* 6. Counter Section: Clean Responsive Layout (No line/dot) */ /* ========================================================= */ @media (max-width: 991px) { .cg-counter1-content:before { display: none !important; } .cg-count-item1:before { display: none !important; } .cg-count-item1 { padding-top: 15px !important; margin-bottom: 25px !important; text-align: center !important; } .cg-count-item1 .inner-item { text-align: center !important; } .cg-count-item1 h3 { font-size: 48px !important; padding-bottom: 8px !important; line-height: 1 !important; } .cg-count-item1 p { font-size: 15px !important; line-height: 1.35 !important; margin: 0 auto !important; max-width: 240px !important; } } /* ========================================================= */ /* 7. Services Hub: Interactive Options & Content Showcase */ /* ========================================================= */ html { scroll-behavior: auto !important; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .baycor-services-showcase-wrap { position: relative; width: 100%; } .baycor-services-nav-bar { background: #00467F; padding: 14px 0; border-bottom: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 15px rgba(0, 70, 127, 0.15); position: relative; z-index: 10; } .baycor-nav-slider-container { position: relative; padding: 0 45px; } .baycor-service-nav-swiper { width: 100%; overflow: hidden; padding: 4px 0; } .baycor-service-nav-swiper .swiper-slide { width: auto !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .baycor-nav-pill { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 9px 20px; border-radius: 30px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); color: #FFFFFF !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .baycor-nav-pill i { margin-right: 7px; font-size: 13px; opacity: 0.9; } .baycor-nav-pill:hover { background: rgba(255, 255, 255, 0.28) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: #FFFFFF !important; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .baycor-nav-pill.active { background: #C00000 !important; border-color: #C00000 !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(192, 0, 0, 0.35); } .baycor-nav-pill.active i { opacity: 1; } /* Tracecoo Brand Orange (#F16E22) Rules */ .baycor-nav-pill[href="#tracecoo"].active { background: #F16E22 !important; border-color: #F16E22 !important; box-shadow: 0 4px 14px rgba(241, 110, 34, 0.45) !important; } .baycor-nav-pill[href="#tracecoo"]:hover { background: rgba(241, 110, 34, 0.28) !important; border-color: rgba(241, 110, 34, 0.55) !important; } #tracecoo .cg-btn-1 a span { background-color: #F16E22 !important; } #tracecoo .cg-btn-1 a span:before { background-color: #D85810 !important; } #tracecoo .cg-btn-1 a span i { color: #F16E22 !important; background-color: #FFFFFF !important; } #tracecoo .cg-btn-1 a:hover span { box-shadow: 0 8px 24px rgba(241, 110, 34, 0.35); } .baycor-nav-btn { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; z-index: 10; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; outline: none !important; } .baycor-nav-btn:hover { background: #C00000; border-color: #C00000; color: #FFFFFF; } .baycor-nav-btn.swiper-button-disabled { opacity: 0.3; cursor: not-allowed; } .baycor-services-main-container { background: #FFFFFF; padding: 60px 0 50px; } .baycor-service-main-swiper { width: 100%; } .baycor-service-main-swiper .swiper-slide { opacity: 0 !important; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } .baycor-service-main-swiper .swiper-slide-active { opacity: 1 !important; } .baycor-service-img-card { border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.12); width: 100%; height: 480px; position: relative; background-color: #E2E8F0; } .baycor-service-img-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; -webkit-transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .baycor-service-img-card:hover img { -webkit-transform: scale(1.04); transform: scale(1.04); } .baycor-main-prev:hover { background: #E2E8F0 !important; } .baycor-main-next:hover { background: #C00000 !important; border-color: #C00000 !important; } @media (max-width: 991px) { .baycor-nav-slider-container { padding: 0 35px; } .baycor-services-main-container { padding: 45px 0 40px; } .baycor-service-img-card { height: 360px !important; margin-top: 15px; } } @media (max-width: 767px) { .baycor-nav-slider-container { padding: 0 30px; } .baycor-nav-pill { padding: 7px 14px; font-size: 12.5px; } .baycor-service-img-card { height: 270px !important; margin-top: 20px; } .baycor-services-main-container { padding: 35px 0 30px; } .baycor-services-progress-wrap { margin-top: 30px !important; } } /* Centered Sections Heading & Content Rules for HSSE and Services */ #hsse-pillars, #hsse-tenets, #hsse-credentials, #hsse-faq, #hsse-cta-banner, #why-choose-baycor { text-align: center; } #hsse-pillars .elementor-column, #hsse-tenets .elementor-column, #hsse-credentials .elementor-column, #hsse-faq .elementor-column, #hsse-cta-banner .elementor-column, #why-choose-baycor .elementor-column { margin-left: auto !important; margin-right: auto !important; text-align: center !important; float: none !important; } #hsse-pillars .elementor-widget-wrap, #hsse-tenets .elementor-widget-wrap, #hsse-credentials .elementor-widget-wrap, #hsse-faq .elementor-widget-wrap, #hsse-cta-banner .elementor-widget-wrap, #why-choose-baycor .elementor-widget-wrap { width: 100% !important; text-align: center !important; margin: 0 auto !important; } #hsse-pillars .elementor-widget-go-s-heading, #hsse-tenets .elementor-widget-go-s-heading, #hsse-credentials .elementor-widget-go-s-heading, #hsse-faq .elementor-widget-go-s-heading, #why-choose-baycor .elementor-widget-go-s-heading { width: 100% !important; max-width: 840px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } #hsse-pillars .elementor-widget-html, #hsse-tenets .elementor-widget-html, #hsse-credentials .elementor-widget-html, #hsse-faq .elementor-widget-accordion, #hsse-cta-banner .elementor-widget-html { width: 100% !important; } #hsse-pillars .cg-sec-title, #hsse-tenets .cg-sec-title, #hsse-credentials .cg-sec-title, #hsse-faq .cg-sec-title, #hsse-cta-banner .cg-sec-title, #why-choose-baycor .cg-sec-title { display: block !important; margin: 0 auto 40px !important; text-align: center !important; max-width: 840px !important; width: 100% !important; } #hsse-pillars .cg-sec-title .subtitle, #hsse-tenets .cg-sec-title .subtitle, #hsse-credentials .cg-sec-title .subtitle, #hsse-faq .cg-sec-title .subtitle, #hsse-cta-banner .cg-sec-title .subtitle, #why-choose-baycor .cg-sec-title .subtitle { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; padding: 8px 22px !important; margin-bottom: 14px !important; text-align: center !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; border-radius: 30px !important; vertical-align: middle !important; } #hsse-pillars .cg-sec-title h2, #hsse-tenets .cg-sec-title h2, #hsse-credentials .cg-sec-title h2, #hsse-faq .cg-sec-title h2, #hsse-cta-banner .cg-sec-title h2, #why-choose-baycor .cg-sec-title h2 { display: block !important; text-align: center !important; font-size: 36px !important; line-height: 1.25 !important; margin: 0 auto 16px !important; max-width: 800px !important; width: 100% !important; } #hsse-pillars .cg-sec-title .elementor-gt-desc, #hsse-tenets .cg-sec-title .elementor-gt-desc, #hsse-faq .cg-sec-title .elementor-gt-desc, #why-choose-baycor .cg-sec-title .elementor-gt-desc { display: block !important; margin-top: 16px !important; margin-bottom: 0 !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; font-size: 15.5px !important; line-height: 1.65 !important; color: #475569 !important; } /* HSSE Section: Certified Safety (Credentials) Dark Overlay & Contrast */ #hsse-credentials { position: relative !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } #hsse-credentials::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 14, 28, 0.94) !important; z-index: 0 !important; } #hsse-credentials > .elementor-container { position: relative !important; z-index: 1 !important; } #hsse-credentials .cg-sec-title { margin: 0 auto 20px !important; } #hsse-credentials .cg-sec-title .subtitle { color: #FFFFFF !important; background: transparent !important; border: none !important; padding: 0 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 12px !important; display: inline-block !important; } #hsse-credentials .cg-sec-title h2 { color: #FFFFFF !important; margin-bottom: 0 !important; } #hsse-credentials .baycor-cert-desc { display: block !important; color: rgba(255, 255, 255, 0.92) !important; margin: 0 auto 40px !important; max-width: 860px !important; text-align: center !important; } #hsse-credentials .baycor-cert-desc p { color: rgba(255, 255, 255, 0.92) !important; font-size: 15.5px !important; line-height: 1.7 !important; margin-bottom: 16px !important; text-align: center !important; } #hsse-credentials .baycor-cert-desc p:last-child { margin-bottom: 0 !important; } #hsse-credentials .baycor-cert-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; padding: 32px 26px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; transition: all 0.3s ease !important; height: 100% !important; } #hsse-credentials .baycor-cert-card:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important; } /* HSSE Section: Tenets with Cards & Images */ .baycor-tenet-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 6px 20px rgba(0, 45, 82, 0.06) !important; display: flex !important; flex-direction: row !important; align-items: stretch !important; transition: all 0.3s ease !important; width: 100% !important; box-sizing: border-box !important; } .baycor-tenet-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 30px rgba(0, 45, 82, 0.12) !important; } .baycor-tenet-img-wrap { width: 270px !important; min-width: 270px !important; position: relative !important; background: #F1F5F9 !important; overflow: hidden !important; } .baycor-tenet-img-wrap img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; transition: transform 0.5s ease !important; } .baycor-tenet-card:hover .baycor-tenet-img-wrap img { transform: scale(1.05) !important; } .baycor-tenet-badge { position: absolute !important; top: 14px !important; left: 14px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; color: #FFFFFF !important; font-weight: 800 !important; font-size: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 2 !important; } .baycor-tenet-body { padding: 26px 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; flex-grow: 1 !important; text-align: left !important; box-sizing: border-box !important; } @media (max-width: 991px) { .baycor-tenet-card { flex-direction: column !important; } .baycor-tenet-img-wrap { width: 100% !important; min-width: 100% !important; height: 220px !important; } .baycor-tenet-body { padding: 22px 20px !important; } } /* HSSE Section 4: Risk Prevention & Execution (Checklist Grid + Horizontal Banner) */ .baycor-risk-checklist-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; box-sizing: border-box !important; } .baycor-risk-checklist-card { background: #FFFFFF !important; border: 1px solid rgba(0, 70, 127, 0.1) !important; border-radius: 12px !important; padding: 18px 22px !important; display: flex !important; align-items: center !important; gap: 16px !important; box-shadow: 0 4px 16px rgba(0, 70, 127, 0.04) !important; transition: all 0.3s ease !important; box-sizing: border-box !important; width: 100% !important; } .baycor-risk-checklist-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.08) !important; border-color: rgba(0, 70, 127, 0.22) !important; } .baycor-risk-checklist-card i { color: #C00000 !important; font-size: 22px !important; flex-shrink: 0 !important; } .baycor-risk-checklist-card strong { color: #00467F !important; font-size: 15.5px !important; display: block !important; margin-bottom: 3px !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; } .baycor-risk-checklist-card span { color: #64748B !important; font-size: 13.5px !important; line-height: 1.5 !important; display: block !important; } /* Horizontal Banner Below the Checklist */ .baycor-ops-horizontal-banner { position: relative !important; width: 100% !important; max-width: 1200px !important; margin: 35px auto 0 auto !important; height: 380px !important; min-height: 380px !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.12) !important; box-sizing: border-box !important; background: #E2E8F0 !important; } .baycor-ops-horizontal-banner img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } .baycor-ops-horizontal-banner .baycor-ops-floating-card { position: absolute !important; bottom: 24px !important; left: 24px !important; max-width: 560px !important; width: auto !important; right: auto !important; background: rgba(0, 70, 127, 0.92) !important; backdrop-filter: blur(12px) !important; padding: 20px 26px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; text-align: left !important; box-sizing: border-box !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-tag { font-size: 12px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; margin-bottom: 5px !important; display: flex !important; align-items: center !important; gap: 7px !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-tag i { color: #FFFFFF !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-title { font-size: 18px !important; color: #FFFFFF !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 6px !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-desc { font-size: 13px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 !important; } @media (max-width: 1024px) { .baycor-risk-checklist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .baycor-ops-horizontal-banner { height: 330px !important; min-height: 330px !important; margin-top: 28px !important; } .baycor-ops-horizontal-banner .baycor-ops-floating-card { bottom: 18px !important; left: 18px !important; right: 18px !important; max-width: 100% !important; padding: 16px 20px !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-title { font-size: 16.5px !important; } } @media (max-width: 767px) { .baycor-risk-checklist-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .baycor-risk-checklist-card { padding: 15px 18px !important; gap: 12px !important; } .baycor-ops-horizontal-banner { height: 290px !important; min-height: 290px !important; margin-top: 22px !important; } .baycor-ops-horizontal-banner .baycor-ops-floating-card { bottom: 12px !important; left: 12px !important; right: 12px !important; padding: 12px 16px !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-tag { font-size: 11px !important; margin-bottom: 3px !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-title { font-size: 15px !important; margin-bottom: 0 !important; } .baycor-ops-horizontal-banner .baycor-ops-badge-desc { display: none !important; } } /* HSSE Section 6: FAQ Full Centering on White Background */ #hsse-faq { background-color: #FFFFFF !important; } #hsse-faq .elementor-column { text-align: center !important; } #hsse-faq .elementor-widget-accordion, #hsse-faq .elementor-accordion { display: block !important; max-width: 950px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; box-sizing: border-box !important; } #hsse-faq .elementor-accordion .elementor-accordion-item { border: 1.5px solid #E2E8F0 !important; border-radius: 10px !important; margin-bottom: 16px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(0, 45, 82, 0.05) !important; transition: all 0.3s ease !important; background: #F8FAFC !important; width: 100% !important; box-sizing: border-box !important; } #hsse-faq .elementor-accordion .elementor-accordion-item:hover { border-color: #00467F !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.08) !important; } #hsse-faq .elementor-accordion .elementor-tab-title { background: #F8FAFC !important; border: none !important; padding: 18px 24px !important; font-size: 16px !important; font-weight: 600 !important; color: #00467F !important; transition: all 0.3s ease !important; } #hsse-faq .elementor-accordion .elementor-tab-title.elementor-active { background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; color: #00467F !important; font-weight: 700 !important; } /* HSSE FAQ styles handled in universal accordion block below */ /* ========================================================= */ /* Comprehensive Global Responsive Normalization for HSSE */ /* ========================================================= */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } *, *::before, *::after { box-sizing: border-box !important; } .elementor-2437 { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } .elementor-2437 .elementor-section { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .elementor-2437 .elementor-container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } @media (min-width: 1025px) { .elementor-2437 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; } } /* Tablet Screen (<= 991px) */ @media (max-width: 991px) { .elementor-2437 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2437 .elementor-section { padding-top: 65px !important; padding-bottom: 65px !important; } .elementor-2437 .elementor-widget-go-s-heading { margin-bottom: 24px !important; } .elementor-2437 .elementor-element-0a64c9a { margin-bottom: 20px !important; } .elementor-2437 .cg-sec-title, .elementor-2437 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2437 .cg-sec-title h2, .elementor-2437 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2437 .cg-sec-title .subtitle, .elementor-2437 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2437 .elementor-gt-desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } } /* Mobile Screen ( .elementor-section:first-child, .elementor-2427 .elementor-section[data-id="225e7d1"] { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background-color: #FFFFFF !important; } .elementor-2427 > .elementor-section:first-child > .elementor-container, .elementor-2427 .elementor-section[data-id="225e7d1"] > .elementor-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .elementor-2427 > .elementor-section:first-child .elementor-column, .elementor-2427 > .elementor-section:first-child .elementor-widget-wrap { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Nav Bar & Main Carousel Containers */ .baycor-services-showcase-wrap { width: 100% !important; max-width: 100% !important; } .baycor-services-nav-bar { width: 100% !important; background: #00467F !important; padding: 14px 0 !important; } .baycor-services-nav-bar .container { width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; } .baycor-services-main-container { width: 100% !important; max-width: 100% !important; background: #FFFFFF !important; padding: 60px 0 50px !important; } .baycor-services-main-container .container { width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; } /* Other Sections in Services (Why Choose Baycor & CTA) */ .elementor-2427 #why-choose-baycor, .elementor-2427 #baycor-cta-banner { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-top: 90px !important; padding-bottom: 90px !important; } .elementor-2427 #why-choose-baycor > .elementor-container, .elementor-2427 #baycor-cta-banner > .elementor-container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; padding-left: 20px !important; padding-right: 20px !important; } /* Tablet Screen ( .elementor-section:first-child, .elementor-2427 .elementor-section[data-id="225e7d1"] { padding: 0 !important; } .elementor-2427 #why-choose-baycor, .elementor-2427 #baycor-cta-banner { padding-top: 65px !important; padding-bottom: 65px !important; } .elementor-2427 #why-choose-baycor > .elementor-container, .elementor-2427 #baycor-cta-banner > .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2427 .elementor-widget-go-s-heading { margin-bottom: 24px !important; } .elementor-2427 .cg-sec-title, .elementor-2427 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2427 .cg-sec-title h2, .elementor-2427 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2427 .cg-sec-title .subtitle, .elementor-2427 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2427 .elementor-gt-desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } .baycor-nav-slider-container { padding: 0 35px !important; } .baycor-services-main-container { padding: 45px 0 40px !important; } .baycor-services-main-container .container { padding-left: 20px !important; padding-right: 20px !important; } .baycor-service-img-card { height: 380px !important; margin-top: 25px !important; } } /* Mobile Screen ( .elementor-section:first-child, .elementor-2427 .elementor-section[data-id="225e7d1"] { padding: 0 !important; } .elementor-2427 #why-choose-baycor, .elementor-2427 #baycor-cta-banner { padding-top: 50px !important; padding-bottom: 50px !important; } .elementor-2427 #why-choose-baycor > .elementor-container, .elementor-2427 #baycor-cta-banner > .elementor-container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .elementor-2427 .elementor-widget-go-s-heading { margin-bottom: 18px !important; } .elementor-2427 .cg-sec-title, .elementor-2427 .cg-sec-title.headline { margin-bottom: 6px !important; } .elementor-2427 .cg-sec-title h2, .elementor-2427 .sec_title { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .elementor-2427 .cg-sec-title .subtitle, .elementor-2427 .subtitle { font-size: 11px !important; letter-spacing: 1.2px !important; margin-bottom: 6px !important; } .elementor-2427 .elementor-gt-desc { margin-top: 6px !important; margin-bottom: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; } .elementor-2427 .sec_desc, .elementor-2427 p { font-size: 14px !important; line-height: 1.6 !important; } .baycor-nav-slider-container { padding: 0 30px !important; } .baycor-nav-pill { padding: 7px 14px !important; font-size: 12.5px !important; } .baycor-service-img-card { height: 280px !important; margin-top: 20px !important; } .baycor-services-main-container { padding: 35px 0 30px !important; } .baycor-services-main-container .container { padding-left: 16px !important; padding-right: 16px !important; } .baycor-services-progress-wrap { margin-top: 25px !important; } #baycor-cta-banner .d-flex { flex-direction: column !important; align-items: center !important; gap: 14px !important; } #baycor-cta-banner .baycor-btn-cta-primary, #baycor-cta-banner .baycor-btn-cta-phone { width: 100% !important; max-width: 320px !important; justify-content: center !important; text-align: center !important; } } /* ========================================================================== Home: Specialized Freight & 3PL Logistics - Service Tab Buttons Slide Hover ========================================================================== */ .cg-ser1-content .item-btn-client, .cg-ser1-img-text .item-btn-client { display: none !important; } .cg-ser1-tab-btn .nav-link { background: transparent !important; border: none !important; padding: 0 !important; display: block !important; width: 100% !important; } .cg-ser1-tab-btn .cg-ser-item-icon-text { position: relative !important; z-index: 1 !important; overflow: hidden !important; background-color: #FFFFFF !important; border: 1.5px solid #E2E8F0 !important; border-radius: 12px !important; padding: 18px 26px !important; margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 16px !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(0, 70, 127, 0.04) !important; -webkit-transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; } /* Sliding background pseudo-element (starts at 0% width) */ .cg-ser1-tab-btn .cg-ser-item-icon-text:before { top: 0 !important; left: 0 !important; z-index: -1 !important; width: 0% !important; height: 100% !important; content: "" !important; position: absolute !important; border-radius: 10px !important; background-color: #C00000 !important; /* Brand Red slide */ -webkit-transition: width 450ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; transition: width 450ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; } /* Item Typography & Icon defaults */ .cg-ser1-tab-btn .cg-ser-item-icon-text .item-text { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 17px !important; font-weight: 700 !important; color: #00467F !important; line-height: 1.3 !important; margin: 0 !important; text-align: left !important; position: relative !important; z-index: 2 !important; -webkit-transition: color 300ms ease !important; transition: color 300ms ease !important; } .cg-ser1-tab-btn .cg-ser-item-icon-text .item-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; position: relative !important; z-index: 2 !important; -webkit-transition: all 300ms ease !important; transition: all 300ms ease !important; } .cg-ser1-tab-btn .cg-ser-item-icon-text .item-icon svg, .cg-ser1-tab-btn .cg-ser-item-icon-text .item-icon img, .cg-ser1-tab-btn .cg-ser-item-icon-text .item-icon i { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; object-fit: contain !important; -webkit-transition: all 300ms ease !important; transition: all 300ms ease !important; } .cg-ser1-tab-btn .cg-ser-item-icon-text .item-icon svg path { fill: #00467F !important; -webkit-transition: fill 300ms ease !important; transition: fill 300ms ease !important; } /* --- HOVER EFFECT: Slide red from left to right --- */ .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text:before { width: 100% !important; } .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text { border-color: #C00000 !important; -webkit-transform: translateX(6px) !important; transform: translateX(6px) !important; box-shadow: 0 10px 24px rgba(192, 0, 0, 0.25) !important; } .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text .item-text { color: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text .item-icon svg path { fill: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text .item-icon svg, .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text .item-icon i { color: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link:not(.active):hover .cg-ser-item-icon-text .item-icon img { filter: brightness(0) invert(1) !important; } /* --- ACTIVE STATE: Selected Tab (Solid Blue with White Text/Icon) --- */ .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text { background-color: #00467F !important; border-color: #00467F !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.3) !important; transform: none !important; } .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text:before { width: 100% !important; background-color: #00467F !important; } .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text .item-text { color: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text .item-icon svg path { fill: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text .item-icon svg, .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text .item-icon i { color: #FFFFFF !important; } .cg-ser1-tab-btn .nav-link.active .cg-ser-item-icon-text .item-icon img { filter: brightness(0) invert(1) !important; } .elementor-2388 .elementor-element-a880a5d { width: 100% !important; max-width: 100% !important; background-color: #f8fafc !important; padding-top: 0 !important; padding-bottom: 45px !important; margin: 0 !important; overflow: hidden !important; } .elementor-2388 #baycor-operational-strength-ticker .elementor-container, .elementor-2388 .elementor-element-a880a5d .elementor-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .elementor-2388 #baycor-operational-strength-ticker .cg-text-scroller, .elementor-2388 .elementor-element-a880a5d .cg-text-scroller { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; } /* Homepage RFQ Section Gap Elimination */ .elementor-1855 .elementor-element-cfe50f4, .elementor-2597 .elementor-element-cfe50f4, .elementor-2598 .elementor-element-cfe50f4, .elementor-element.elementor-element-cfe50f4 { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; background-color: transparent !important; } .elementor-1855 .elementor-element-cfe50f4 .cg-quote1-sec, .elementor-2597 .elementor-element-cfe50f4 .cg-quote1-sec, .elementor-2598 .elementor-element-cfe50f4 .cg-quote1-sec, .elementor-element.elementor-element-cfe50f4 .cg-quote1-sec { margin-top: 0 !important; margin-bottom: 0 !important; } /* Homepage Top Hero Slider & About Baycor Section: Light Gray Background */ .elementor-1855 .elementor-element-948e911, .elementor-1855 .elementor-element-bcf3e92, .elementor-1855 .elementor-element-014267d, .elementor-1855 .cg-slider1-sec, .elementor-1855 .cg-about1-sec { background-color: #f8fafc !important; background: #f8fafc !important; } /* Homepage Tracecoo Video: Light Gray Background */ .elementor-1855 .elementor-element-d050819 { background-color: #f8fafc !important; } /* Homepage Tracecoo Infographic: Pure White Background with 100px top padding (matching Section 7) */ .elementor-1855 .elementor-element-c9ba863 { background-color: #ffffff !important; padding-top: 100px !important; padding-bottom: 90px !important; } .elementor-1855 .elementor-element-c9ba863 .tracecoo-section-heading .subtitle { color: var(--cg-pr-c3, #C00000) !important; font-family: var(--cg-font2, "Rubik", sans-serif) !important; font-size: 16px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; margin: 0 auto 15px auto !important; padding: 0 !important; background: transparent !important; border: none !important; } .elementor-1855 .elementor-element-c9ba863 .tracecoo-section-heading .subtitle:before, .elementor-1855 .elementor-element-c9ba863 .tracecoo-section-heading .subtitle:after { display: none !important; content: none !important; } /* Homepage Our Competitive Advantage: Pure White Background */ .elementor-1855 .elementor-element-db5fd7b { background-color: #ffffff !important; padding-bottom: 0 !important; } .elementor-1855 .elementor-element-db5fd7b .cg-cta1-content { padding-bottom: 60px !important; } /* Homepage Latest Logistics Intelligence / News (Blog): Light Gray Background */ .elementor-1855 .elementor-element-b882fb1 { background-color: #f8fafc !important; } /* Homepage Section 14 (Contact Us & Counters): Pure White Background */ .elementor-1855 .elementor-element-32dc3f1, .elementor-1855 #cg-counter1, .elementor-1855 .cg-counter1-sec { background-color: #ffffff !important; } /* ========================================================= */ /* Homepage (1855) Responsive Section Spacing Normalization */ /* ========================================================= */ @media (max-width: 767px) { .elementor-1855 .elementor-element.elementor-element-014267d { padding: 0px 0px 55px 0px !important; } .elementor-1855 .elementor-element.elementor-element-118efed { padding: 55px 0px 55px 0px !important; } .elementor-1855 .elementor-element.elementor-element-ea45fb8 { padding: 55px 0px 0px 0px !important; } .elementor-1855 .elementor-element.elementor-element-db5fd7b { padding: 55px 0px 0px 0px !important; } .elementor-1855 .elementor-element.elementor-element-db5fd7b .cg-cta1-content { padding-bottom: 35px !important; } .elementor-1855 .elementor-section:has(.elementor-widget-video), .elementor-1855 .elementor-element.elementor-element-d050819, .elementor-1855 .cg-tracecoo-intro-sec { padding-top: 55px !important; padding-bottom: 45px !important; } .elementor-1855 .elementor-element.elementor-element-c9ba863 { padding-top: 55px !important; padding-bottom: 55px !important; } .elementor-1855 .elementor-element.elementor-element-b882fb1 { padding: 55px 0px 55px 0px !important; } .elementor-1855 .elementor-element.elementor-element-32dc3f1, .elementor-1855 #cg-counter1, .elementor-1855 .cg-counter1-sec { padding-top: 55px !important; padding-bottom: 40px !important; } } /* About Us Parallax Banner Image Framing & Visibility */ .cg-breadcurmb-img { max-height: 540px !important; border-radius: 16px !important; } .cg-hero2-img .item-img img { object-position: center bottom !important; transform-origin: center bottom !important; } /* Section 14 & Footer Spacing / Anti-overlap Fix */ .cg-counter1-sec { margin-bottom: 0 !important; padding-bottom: 40px !important; } .cg-cta-contact-img { margin-bottom: 0 !important; padding-bottom: 20px !important; } /* Footer Container & Top CTA Spacing */ .elementor-1354 .elementor-element.elementor-element-84fb541, .elementor-2570 .elementor-element.elementor-element-84fb541, .elementor-2571 .elementor-element.elementor-element-84fb541, .cg-footer1-sec { padding-top: 55px !important; margin-top: 0 !important; position: relative !important; z-index: 2 !important; } .cg-footer-cta { padding-top: 25px !important; padding-bottom: 35px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } @media (min-width: 768px) { .cg-footer-cta .brand-logo { display: flex !important; align-items: center !important; max-width: 320px !important; width: auto !important; } .cg-footer-cta .brand-logo img, .cg-footer-cta .logo_site-size { width: 290px !important; max-width: 320px !important; height: auto !important; max-height: 95px !important; object-fit: contain !important; } .cg-footer-cta-wrap { padding: 0 !important; border-left: none !important; } } /* ========================================================================== Full-Bleed Parallax Hero Header with Gradient Overlay & In-Banner Title ========================================================================== */ #cg-hero2, .cg-hero2-sec { background-color: #0F2C59 !important; background-image: none !important; position: relative !important; overflow: hidden !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; } /* 100% Full-Bleed Parallax Background Wrapper */ .cg-hero2-bg-wrap, .cg-hero2-img, .cg-breadcurmb-img { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; z-index: 1 !important; overflow: hidden !important; border-radius: 0 !important; clip-path: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } .cg-hero2-bg-wrap:before, .cg-hero2-img:before, .cg-breadcurmb-img:before { display: none !important; } .cg-hero2-bg-wrap .item-img, .cg-hero2-img .item-img, .cg-breadcurmb-img .item-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; overflow: hidden !important; z-index: 1 !important; display: block !important; } .cg-hero2-bg-wrap .item-img img, .cg-hero2-img .item-img img, .cg-breadcurmb-img .item-img img { position: absolute !important; top: -18% !important; left: 0 !important; width: 100% !important; height: 136% !important; min-height: 136% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* Photo-Friendly Gradient: 0% Opacity from 50% upwards, Pure Black/Dark at Bottom */ .cg-hero2-gradient-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 2 !important; background: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 18%, rgba(0, 0, 0, 0.40) 35%, rgba(0, 0, 0, 0.10) 46%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0) 100% ) !important; pointer-events: none !important; } /* Remove any legacy decorative container or airplane graphics */ .cg-hero2-content .cg-h2-img, .cg-hero2-content .cg-h2-img2, .cg-h2-img, .cg-h2-img2, #cg-hero2 .cg-h2-img, #cg-hero2 .cg-h2-img2 { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Hero Content Area on top of the Parallax Banner */ #cg-hero2 .container { position: relative !important; z-index: 5 !important; width: 100% !important; } .cg-hero2-text-wrap { position: relative !important; z-index: 5 !important; padding: 0 !important; margin: 0 !important; } .cg-hero2-text, .cg-breadcurmb-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } /* Modern Pill Breadcrumb Navigation - Strictly Single Line Continuous (No Wrap) */ .baycor-breadcrumb-nav, .cg-breadcurmb-text ul, .cg-hero2-text ul { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; gap: 8px !important; padding: 7px 18px !important; background: rgba(10, 30, 60, 0.70) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 30px !important; margin: 0 0 16px 0 !important; list-style: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; } .baycor-breadcrumb-nav::-webkit-scrollbar, .cg-breadcurmb-text ul::-webkit-scrollbar, .cg-hero2-text ul::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* Reset any legacy float / pseudo elements from style.css */ .baycor-breadcrumb-nav li, .cg-breadcurmb-text ul li, .cg-hero2-text ul li { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; white-space: nowrap !important; font-size: 13.5px !important; font-weight: 600 !important; color: #FFFFFF !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } .baycor-breadcrumb-nav li:before, .baycor-breadcrumb-nav li:after, .cg-breadcurmb-text ul li:before, .cg-breadcurmb-text ul li:after { display: none !important; } .baycor-breadcrumb-nav li a, .cg-breadcurmb-text ul li a, .cg-hero2-text ul li a { color: #FFFFFF !important; font-weight: 600 !important; text-decoration: none !important; transition: color 0.3s ease !important; opacity: 0.92 !important; white-space: nowrap !important; } .baycor-breadcrumb-nav li a:hover, .cg-breadcurmb-text ul li a:hover, .cg-hero2-text ul li a:hover { color: #38BDF8 !important; opacity: 1 !important; text-decoration: underline !important; } .baycor-breadcrumb-nav li + li::before, .cg-breadcurmb-text ul li + li::before, .cg-hero2-text ul li + li::before { content: "›" !important; color: #38BDF8 !important; font-size: 16px !important; font-weight: 700 !important; margin-right: 8px !important; margin-left: 2px !important; display: inline-block !important; line-height: 1 !important; position: static !important; background: transparent !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; } .baycor-breadcrumb-nav li.item-current, .baycor-breadcrumb-nav li.item-current .current, .cg-breadcurmb-text ul li:last-child { color: #38BDF8 !important; font-weight: 700 !important; white-space: nowrap !important; } /* Refined, Elegant Heading Typography with High Contrast Drop Shadow */ .cg-hero2-text .hero_title { color: #FFFFFF !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; font-weight: 700 !important; margin: 0 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.70), 0 4px 25px rgba(0, 0, 0, 0.45) !important; } /* Desktop Spacing (>= 992px) - Generous & Immersive Height */ @media (min-width: 992px) { #cg-hero2, .cg-hero2-sec { padding-top: 240px !important; padding-bottom: 90px !important; min-height: 490px !important; } .cg-hero2-text .hero_title { font-size: 38px !important; line-height: 1.24 !important; max-width: 880px !important; } } /* Tablet Spacing (577px - 991px) */ @media (min-width: 577px) and (max-width: 991px) { #cg-hero2, .cg-hero2-sec { padding-top: 165px !important; padding-bottom: 65px !important; min-height: 380px !important; } .cg-hero2-text .hero_title { font-size: 29px !important; line-height: 1.28 !important; max-width: 100% !important; } .baycor-breadcrumb-nav { padding: 6px 14px !important; margin-bottom: 12px !important; max-width: 100% !important; } } /* Mobile ( .elementor-container, #about-cta-banner > .elementor-container, #service-cta-banner > .elementor-container, #industry-cta-banner > .elementor-container, #hsse-cta-banner > .elementor-container, #procurement-cta-banner > .elementor-container, #tracecoo-cta-banner > .elementor-container, .elementor-element-a0ea16f > .elementor-container, .elementor-element-a627e6d > .elementor-container, .elementor-element-ind_sec_cta > .elementor-container, .elementor-element-proc_sec_cta > .elementor-container, .elementor-element-tracecoo_sec_cta > .elementor-container, .elementor-element-3fd4f92 > .elementor-container { position: relative !important; z-index: 2 !important; } /* Industry Solutions Floating Sector Icons */ .baycor-ind-floating-icon { transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important; } .baycor-industry-card:hover .baycor-ind-floating-icon { transform: translateY(-4px) scale(1.08) !important; box-shadow: 0 14px 28px rgba(0, 45, 82, 0.32) !important; } .baycor-m-br { display: none; } /* ========================================================================== Baycor 3-Second Rotating Showcase Carousel: "Sectors We Serve" ========================================================================== */ .baycor-sectors-carousel-wrapper { position: relative; width: 100%; max-width: 1380px; margin: 0 auto; box-sizing: border-box; } .baycor-carousel-container { display: flex; gap: 24px; width: 100%; height: 520px; min-height: 520px; position: relative; align-items: stretch; justify-content: center; box-sizing: border-box; } /* Left Column: Image Viewport (42%) */ .baycor-carousel-left { flex: 0 0 42%; max-width: 42%; position: relative; height: 100%; } .baycor-carousel-image-viewport { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #0F2C59; box-shadow: 0 20px 48px rgba(0, 45, 82, 0.16); border: 1.5px solid rgba(0, 70, 127, 0.2); } .baycor-carousel-image-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.05); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; } .baycor-carousel-image-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 2; } .baycor-carousel-image-inner { position: relative; width: 100%; height: 100%; } .baycor-carousel-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } .baycor-carousel-counter { position: absolute; top: 18px; right: 18px; background: rgba(0, 70, 127, 0.9); backdrop-filter: blur(12px); padding: 6px 16px; border-radius: 30px; color: #FFFFFF; font-size: 13px; font-weight: 800; border: 1.5px solid rgba(255, 255, 255, 0.3); z-index: 5; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .baycor-carousel-tag { position: absolute; bottom: 20px; left: 20px; background: #C00000; color: #FFFFFF; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 6px; z-index: 5; box-shadow: 0 6px 16px rgba(192, 0, 0, 0.4); } .baycor-carousel-icon-badge { position: absolute; bottom: 16px; right: 20px; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); box-shadow: 0 10px 24px rgba(0, 29, 54, 0.35); display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; z-index: 5; transition: transform 0.35s ease; } .baycor-carousel-icon-badge img { width: 32px; height: 32px; object-fit: contain; display: block; } .baycor-carousel-progress-track { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: rgba(255, 255, 255, 0.25); z-index: 10; overflow: hidden; } .baycor-carousel-progress-fill { height: 100%; background: #C00000; width: 0%; } /* Center Column: Content Cards Deck (44%) */ .baycor-carousel-center { flex: 0 0 44%; max-width: 44%; position: relative; height: 100%; box-sizing: border-box; } .baycor-carousel-content-viewport { position: relative; width: 100%; height: 100%; box-sizing: border-box; } .baycor-carousel-content-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF; border-radius: 20px; padding: 34px 30px; box-shadow: 0 16px 42px rgba(0, 45, 82, 0.08); border: 2px solid #E2E8F0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 1; overflow: hidden; } .baycor-carousel-content-slide.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; z-index: 2; border-color: #00467F; box-shadow: 0 20px 50px rgba(0, 70, 127, 0.14); } .baycor-carousel-content-card { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; box-sizing: border-box; } .baycor-carousel-card-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; } .baycor-carousel-card-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #DFF6FF !important; color: #00467F !important; font-size: 11.5px !important; font-weight: 700 !important; padding: 5px 12px !important; border-radius: 20px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .baycor-carousel-card-badge i { color: #C00000 !important; font-size: 12px !important; } .baycor-carousel-card-index { font-size: 12px !important; font-weight: 800 !important; color: #94A3B8 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } .baycor-carousel-title { font-size: 22px !important; font-weight: 700 !important; color: #00467F !important; line-height: 1.3 !important; margin: 0 0 12px 0 !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; } .baycor-carousel-desc { font-size: 14.5px !important; line-height: 1.65 !important; color: #475569 !important; margin: 0 0 20px 0 !important; } .baycor-carousel-feature-list { list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 11px !important; } .baycor-carousel-feature-list li { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; list-style-type: none !important; font-size: 13.5px !important; line-height: 1.45 !important; color: #1E293B !important; font-weight: 600 !important; text-align: left !important; } .baycor-carousel-feature-list li:before { display: none !important; content: none !important; } .baycor-carousel-feature-list li i { color: #C00000 !important; font-size: 14.5px !important; line-height: 1.45 !important; margin-top: 1px !important; flex-shrink: 0 !important; display: inline-block !important; } .baycor-carousel-feature-list li span { flex: 1 1 auto !important; color: #1E293B !important; } /* Right Column: Navigation Rail (14%) */ .baycor-carousel-right, .baycor-carousel-rail-col { flex: 0 0 14%; max-width: 14%; position: relative; height: 100%; } .baycor-carousel-rail-dock { width: 100%; height: 100%; background: #FFFFFF; border-radius: 20px; padding: 16px 10px; box-shadow: 0 10px 30px rgba(0, 45, 82, 0.08); border: 1.5px solid #E2E8F0; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; box-sizing: border-box; } .baycor-carousel-rail-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 0px; border-bottom: 1px solid #F1F5F9; flex-shrink: 0; } .baycor-carousel-rail-header span:first-child { font-size: 10px; font-weight: 800; color: #00467F; letter-spacing: 1.2px; } .baycor-carousel-rail-badge { font-size: 9px; font-weight: 700; color: #94A3B8; background: #F1F5F9; padding: 1px 5px; border-radius: 8px; } .baycor-carousel-rail-list { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; gap: 2px; margin: 0; padding: 0; } .baycor-carousel-nav-item, a.baycor-carousel-nav-item, button.baycor-carousel-nav-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 7px 10px !important; border-radius: 10px !important; border: 1px solid transparent !important; background: transparent !important; color: #64748B !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; text-align: left !important; text-decoration: none !important; box-shadow: none !important; transition: all 0.2s ease !important; margin: 0 !important; } .baycor-carousel-nav-item:hover, a.baycor-carousel-nav-item:hover, button.baycor-carousel-nav-item:hover { background: #F8FAFC !important; color: #00467F !important; } .baycor-carousel-nav-item.active, a.baycor-carousel-nav-item.active, button.baycor-carousel-nav-item.active { background: #DFF6FF !important; color: #00467F !important; font-weight: 700 !important; border-left: 3.5px solid #C00000 !important; padding-left: 8px !important; } .baycor-carousel-nav-dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #CBD5E1 !important; transition: all 0.2s ease !important; flex-shrink: 0 !important; } .baycor-carousel-nav-item.active .baycor-carousel-nav-dot, a.baycor-carousel-nav-item.active .baycor-carousel-nav-dot { background: #C00000 !important; transform: scale(1.4) !important; } .baycor-carousel-nav-num { font-size: 10.5px !important; font-weight: 800 !important; color: #94A3B8 !important; } .baycor-carousel-nav-item.active .baycor-carousel-nav-num, a.baycor-carousel-nav-item.active .baycor-carousel-nav-num { color: #00467F !important; } .baycor-carousel-nav-label { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Bottom Centered RFQ / Get a Quote CTA Row */ .baycor-carousel-cta-row { margin-top: 45px; text-align: center; display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; } .baycor-carousel-cta-row .cg-btn-1, .elementor-2474 #industry-intro .cg-btn-1 { display: inline-flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; } .baycor-carousel-cta-row .cg-btn-1 a, .elementor-2474 #industry-intro .cg-btn-1 a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; text-decoration: none !important; } .baycor-carousel-cta-row .cg-btn-1 a span, .elementor-2474 #industry-intro .cg-btn-1 a span { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; padding: 16px 26px 16px 30px !important; border-radius: 10px !important; background-color: #00467F !important; color: #FFFFFF !important; font-size: 16.5px !important; font-weight: 700 !important; line-height: 1 !important; box-sizing: border-box !important; width: auto !important; text-align: center !important; } .baycor-carousel-cta-row .cg-btn-1 a span i, .elementor-2474 #industry-intro .cg-btn-1 a span i { margin: 0 !important; width: 32px !important; height: 32px !important; min-width: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #FFFFFF !important; color: #00467F !important; border-radius: 4px !important; font-size: 14px !important; flex-shrink: 0 !important; } /* Mobile Top Navigation Strip */ .baycor-carousel-mobile-nav { display: none; width: 100%; max-width: 100%; margin-bottom: 16px; } .baycor-carousel-mobile-track { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px; } .baycor-carousel-mobile-track::-webkit-scrollbar { display: none; } .baycor-carousel-mobile-btn, a.baycor-carousel-mobile-btn, button.baycor-carousel-mobile-btn { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 16px !important; border-radius: 20px !important; border: 1px solid #E2E8F0 !important; background: #FFFFFF !important; color: #475569 !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; transition: all 0.2s ease !important; } .baycor-carousel-mobile-btn.active, a.baycor-carousel-mobile-btn.active, button.baycor-carousel-mobile-btn.active { background: #00467F !important; border-color: #00467F !important; color: #FFFFFF !important; box-shadow: 0 4px 14px rgba(0, 70, 127, 0.25) !important; } .baycor-carousel-mobile-num { font-size: 11px !important; font-weight: 800 !important; opacity: 0.85 !important; } /* ========================================================================== Comprehensive Responsive System for Industry Solutions (.elementor-2474) Matching /hsse/ (2437), /services/ (2427) and /about-us/ (2388) ========================================================================== */ /* Tablet (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { .elementor-2474 .elementor-container { padding-left: 24px !important; padding-right: 24px !important; } .baycor-carousel-container { gap: 18px; height: 520px; } .baycor-carousel-left { flex: 0 0 42%; max-width: 42%; } .baycor-carousel-center { flex: 0 0 44%; max-width: 44%; } .baycor-carousel-right, .baycor-carousel-rail-col { flex: 0 0 14%; max-width: 14%; } .baycor-carousel-content-slide { padding: 26px 22px; } .baycor-carousel-rail-dock { padding: 12px 8px; } } /* Tablet Screen (<= 991px) */ @media (max-width: 991px) { .elementor-2474 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2474 .elementor-section { padding-top: 65px !important; padding-bottom: 65px !important; box-sizing: border-box !important; } .elementor-2474 .elementor-widget-go-s-heading { margin-bottom: 24px !important; } .elementor-2474 .elementor-element-ind_w_intro_head { margin-bottom: 20px !important; } .elementor-2474 .cg-sec-title, .elementor-2474 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2474 .cg-sec-title h2, .elementor-2474 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2474 .cg-sec-title .subtitle, .elementor-2474 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2474 .elementor-gt-desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } .baycor-sectors-carousel-wrapper { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .baycor-carousel-container { flex-direction: column !important; height: auto !important; min-height: unset !important; gap: 18px !important; } .baycor-carousel-left { flex: 0 0 100% !important; max-width: 100% !important; height: 280px !important; } .baycor-carousel-image-viewport { border-radius: 16px !important; height: 100% !important; } .baycor-carousel-center { flex: 0 0 100% !important; max-width: 100% !important; height: auto !important; min-height: unset !important; } .baycor-carousel-content-viewport { height: auto !important; position: relative !important; } .baycor-carousel-content-slide { position: relative !important; display: none !important; height: auto !important; min-height: unset !important; padding: 28px 24px !important; border-radius: 16px !important; transform: none !important; opacity: 0; } .baycor-carousel-content-slide.active { display: flex !important; opacity: 1 !important; transform: none !important; } .baycor-carousel-right, .baycor-carousel-rail-col { display: none !important; } .baycor-carousel-mobile-nav { display: block !important; margin-bottom: 14px !important; } .baycor-carousel-mobile-track { display: flex !important; gap: 8px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 6px !important; } .baycor-carousel-mobile-btn { flex-shrink: 0 !important; padding: 8px 16px !important; font-size: 12px !important; border-radius: 20px !important; } .baycor-carousel-cta-row { margin-top: 25px !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; } .baycor-carousel-cta-row .cg-btn-1, .baycor-carousel-cta-row .cg-btn-1 a, .elementor-2474 #industry-intro .cg-btn-1, .elementor-2474 #industry-intro .cg-btn-1 a { display: inline-flex !important; width: auto !important; max-width: 100% !important; justify-content: center !important; text-align: center !important; margin: 0 auto !important; } .baycor-carousel-cta-row .cg-btn-1 a span, .elementor-2474 #industry-intro .cg-btn-1 a span { width: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 14px 22px 14px 26px !important; gap: 12px !important; font-size: 15.5px !important; } } /* Mobile Screen (< 767px) */ @media (max-width: 767px) { #cross-industry-standard .row > div { margin-bottom: 16px !important; } #cross-industry-standard .row > div:last-child { margin-bottom: 0 !important; } #cross-industry-standard div[style*="background: #F8FAFC"] { padding: 24px 18px !important; border-radius: 12px !important; } /* FAQ Accordion on Mobile */ #industry-faq .elementor-accordion .elementor-tab-title { padding: 14px 16px !important; border-radius: 10px !important; } #industry-faq .elementor-accordion .elementor-accordion-title { font-size: 14px !important; line-height: 1.35 !important; } #industry-faq .elementor-accordion .elementor-accordion-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 12px !important; } #industry-faq .elementor-accordion .elementor-tab-content { padding: 14px 16px !important; font-size: 13.5px !important; line-height: 1.6 !important; } /* Bottom CTA Banner on Mobile */ #industry-cta-banner .d-flex { flex-direction: column !important; align-items: center !important; gap: 12px !important; } #industry-cta-banner .baycor-btn-cta-primary, #industry-cta-banner .baycor-btn-cta-phone { width: 100% !important; max-width: 320px !important; justify-content: center !important; text-align: center !important; padding: 14px 20px !important; } #industry-cta-banner p { font-size: 14.5px !important; line-height: 1.6 !important; margin-bottom: 22px !important; } } /* Extra Small Phones (<= 480px) */ @media (max-width: 480px) { .elementor-2474 .elementor-container { padding-left: 14px !important; padding-right: 14px !important; } .baycor-carousel-left { height: 220px !important; } .baycor-carousel-content-slide { padding: 20px 15px !important; } .baycor-carousel-title { font-size: 17.5px !important; } .baycor-carousel-desc { font-size: 13px !important; } .baycor-carousel-feature-list li { font-size: 12px !important; } .baycor-carousel-card-badge { font-size: 10px !important; padding: 3px 8px !important; } .baycor-carousel-card-index { font-size: 10.5px !important; } } /* ========================================================================== Procurement & Supply Page Premium Custom Styles (.elementor-2495) ========================================================================== */ /* Section 1: Intro Media Box */ .baycor-intro-media-box { transition: transform 0.35s ease, box-shadow 0.35s ease; } .baycor-intro-media-box:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 70, 127, 0.15) !important; } .baycor-intro-media-box:hover img { transform: scale(1.03); } /* Section 2: 6 Industry Sourcing Boxes with Hover & Background Reveal */ .baycor-proc-grid { width: 100%; margin: 0 auto; } .baycor-proc-card { position: relative; background-color: #FFFFFF; border-radius: 22px; border: 1.5px solid #E2E8F0; padding: 36px 30px; height: 100%; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 26px rgba(0, 45, 82, 0.05); overflow: hidden; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease; z-index: 1; box-sizing: border-box; } .baycor-proc-card-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: var(--proc-bg); background-size: cover; background-position: center; opacity: 0; transform: scale(1.1); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1; } .baycor-proc-card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(11, 36, 71, 0.88) 0%, rgba(2, 23, 44, 0.96) 100%); opacity: 0; transition: opacity 0.5s ease; z-index: 2; } .baycor-proc-card-body { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; height: 100%; flex-grow: 1; } .baycor-proc-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .baycor-proc-icon-wrap { width: 58px; height: 58px; border-radius: 16px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1.5px solid rgba(0, 70, 127, 0.1); box-shadow: 0 4px 14px rgba(0, 70, 127, 0.08); } .baycor-proc-badge { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #64748B; background: #F1F5F9; padding: 5px 13px; border-radius: 20px; transition: all 0.35s ease; } .baycor-proc-title { font-size: 21px; font-weight: 700; color: #00467F; line-height: 1.3; margin: 0 0 12px 0; font-family: var(--cg-heading, Rubik, sans-serif); transition: color 0.35s ease; } .baycor-proc-divider { width: 40px; height: 3px; background: #C00000; border-radius: 2px; margin-bottom: 20px; transition: width 0.4s ease, background-color 0.35s ease; } .baycor-proc-list { list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; } .baycor-proc-list li { display: flex !important; align-items: flex-start !important; gap: 12px !important; font-size: 14px !important; line-height: 1.45 !important; color: #334155 !important; font-weight: 500 !important; transition: color 0.35s ease; } .baycor-proc-list li i { color: #C00000 !important; font-size: 12px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: rgba(192, 0, 0, 0.08) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-top: 1px !important; transition: all 0.35s ease; } .baycor-proc-cta { margin-top: auto; padding-top: 16px; border-top: 1px solid #F1F5F9; transition: border-color 0.35s ease; } .baycor-proc-link { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; border-radius: 12px; background: #F8FAFC; border: 1px solid #E2E8F0; font-size: 13.5px; font-weight: 700; color: #00467F; text-decoration: none; transition: all 0.35s ease; box-sizing: border-box; } .baycor-proc-link i { color: #C00000; transition: transform 0.3s ease, color 0.3s ease; } /* Card Hover State */ .baycor-proc-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 28px 60px rgba(2, 23, 44, 0.32); border-color: rgba(255, 255, 255, 0.25); } .baycor-proc-card:hover .baycor-proc-card-bg { opacity: 1; transform: scale(1.0); } .baycor-proc-card:hover .baycor-proc-card-overlay { opacity: 1; } .baycor-proc-card:hover .baycor-proc-icon-wrap { background: #C00000; color: #FFFFFF; border-color: #C00000; transform: scale(1.08) rotate(3deg); box-shadow: 0 6px 22px rgba(192, 0, 0, 0.45); } .baycor-proc-card:hover .baycor-proc-badge { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; } .baycor-proc-card:hover .baycor-proc-title { color: #FFFFFF; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .baycor-proc-card:hover .baycor-proc-divider { width: 60px; background: #38BDF8; } .baycor-proc-card:hover .baycor-proc-list li { color: rgba(255, 255, 255, 0.94) !important; } .baycor-proc-card:hover .baycor-proc-list li i { background: rgba(56, 189, 248, 0.22) !important; color: #38BDF8 !important; transform: scale(1.1); } .baycor-proc-card:hover .baycor-proc-cta { border-top-color: rgba(255, 255, 255, 0.2); } .baycor-proc-card:hover .baycor-proc-link { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: #FFFFFF; backdrop-filter: blur(8px); } .baycor-proc-card:hover .baycor-proc-link i { color: #38BDF8; transform: translateX(5px); } /* ========================================================================== Section 3: End-to-End Procurement Lifecycle (Corporate Roadmap Carousel) ========================================================================== */ .baycor-lifecycle-carousel-wrapper { position: relative; width: 100%; max-width: 100%; } .baycor-lifecycle-swiper { position: relative; width: 100%; overflow: hidden; padding: 12px 6px 50px 6px !important; } .baycor-lifecycle-swiper .swiper-wrapper { align-items: stretch; } .baycor-lifecycle-swiper .swiper-slide { height: auto !important; display: flex !important; } .baycor-lifecycle-swiper .baycor-lifecycle-item { height: 100% !important; width: 100% !important; } .baycor-lifecycle-pagination { position: absolute !important; bottom: 0px !important; left: 0 !important; right: 0 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; z-index: 10 !important; } .baycor-lifecycle-pagination .swiper-pagination-bullet { width: 10px !important; height: 10px !important; border-radius: 20px !important; background: #CBD5E1 !important; opacity: 1 !important; transition: all 0.35s ease !important; margin: 0 !important; cursor: pointer !important; } .baycor-lifecycle-pagination .swiper-pagination-bullet-active { width: 28px !important; background: #C00000 !important; box-shadow: 0 2px 8px rgba(192, 0, 0, 0.4) !important; } .baycor-lifecycle-item { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 20px; padding: 32px 26px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 22px rgba(0, 45, 82, 0.04); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; box-sizing: border-box; } .baycor-lifecycle-item::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 4px; background: linear-gradient(90deg, #00467F, #C00000); transition: width 0.4s ease; } .baycor-lifecycle-item:hover::before { width: 100%; } .baycor-lifecycle-item:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 70, 127, 0.12); border-color: #00467F; } .baycor-lifecycle-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .baycor-lifecycle-badge { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #00467F; background: #DFF6FF; padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(0, 70, 127, 0.15); transition: all 0.3s ease; } .baycor-lifecycle-item:hover .baycor-lifecycle-badge { background: #C00000; color: #FFFFFF; border-color: #C00000; } .baycor-lifecycle-icon-wrap { width: 48px; height: 48px; border-radius: 14px; background: #F8FAFC; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid #E2E8F0; transition: all 0.3s ease; } .baycor-lifecycle-item:hover .baycor-lifecycle-icon-wrap { transform: scale(1.1); background: #DFF6FF; color: #00467F; } .baycor-lifecycle-heading { font-size: 18px; font-weight: 700; color: #00467F; line-height: 1.35; margin: 0 0 12px 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-lifecycle-text { font-size: 14px; line-height: 1.65; color: #475569; margin: 0 0 22px 0; flex-grow: 1; } .baycor-lifecycle-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #64748B; background: #F1F5F9; padding: 6px 14px; border-radius: 20px; align-self: flex-start; transition: all 0.3s ease; } .baycor-lifecycle-pill i { color: #C00000; font-size: 13px; } .baycor-lifecycle-item:hover .baycor-lifecycle-pill { color: #00467F; background: #DFF6FF; } /* ========================================================================== Section 4: The Baycor Advantage (Media Showcase & Interactive Stack) ========================================================================== */ .baycor-adv-media-box { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 70, 127, 0.16); border: 2px solid #FFFFFF; } .baycor-adv-img { width: 100%; height: 100%; min-height: 520px; max-height: 560px; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .baycor-adv-media-box:hover .baycor-adv-img { transform: scale(1.04); } .baycor-floating-pill { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(0, 70, 127, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.25); color: #FFFFFF; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transition: transform 0.35s ease; } .baycor-floating-pill.top-pill { top: 24px; left: 24px; } .baycor-floating-pill.bottom-pill { bottom: 24px; right: 24px; left: 24px; } .baycor-floating-pill .pill-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #38BDF8; flex-shrink: 0; } .baycor-floating-pill .pill-icon.red-icon { background: #C00000; color: #FFFFFF; } .baycor-floating-pill .pill-text strong { display: block; font-size: 14px; font-weight: 700; color: #FFFFFF; font-family: var(--cg-heading, Rubik, sans-serif); line-height: 1.2; } .baycor-floating-pill .pill-text span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; } .baycor-adv-cards-stack { display: flex; flex-direction: column; gap: 18px; width: 100%; box-sizing: border-box; } .baycor-adv-card { background: #FFFFFF; border-radius: 16px; padding: 22px 24px; border: 1.5px solid #E2E8F0; box-shadow: 0 6px 18px rgba(0, 70, 127, 0.05); display: flex; align-items: flex-start; gap: 18px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-adv-card:hover { transform: translateX(8px); border-color: #00467F; box-shadow: 0 12px 30px rgba(0, 70, 127, 0.12); } .baycor-adv-card-icon { width: 46px; height: 46px; border-radius: 12px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; transition: all 0.35s ease; border: 1px solid rgba(0, 70, 127, 0.1); margin-top: 2px; } .baycor-adv-card:hover .baycor-adv-card-icon { background: #C00000; color: #FFFFFF; transform: scale(1.1); border-color: #C00000; } .baycor-adv-card-content h4 { font-size: 16.5px; font-weight: 700; color: #00467F; margin: 0 0 6px 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-adv-card-content p { font-size: 14px; line-height: 1.6; } /* ========================================================================== Alternative Industry Portfolio Showcase (.baycor-proc-showcase-container) ========================================================================== */ .baycor-proc-showcase-container { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; box-sizing: border-box; } .baycor-proc-showcase-layout { display: flex; align-items: stretch; gap: 30px; width: 100%; box-sizing: border-box; } /* Left Navigation Column */ .baycor-proc-nav-col { width: 360px; min-width: 360px; flex-shrink: 0; } .baycor-proc-nav-list { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; justify-content: space-between; } .baycor-proc-nav-tab { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; background: #FFFFFF !important; background-color: #FFFFFF !important; border: 1.5px solid #E2E8F0 !important; border-radius: 16px !important; text-align: left !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0, 45, 82, 0.03) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; width: 100% !important; outline: none !important; } /* Hover on Inactive Tab: Red background with white text */ .baycor-proc-nav-tab:hover:not(.active) { background: #C00000 !important; background-color: #C00000 !important; border-color: #C00000 !important; transform: translateX(4px) !important; box-shadow: 0 8px 24px rgba(192, 0, 0, 0.3) !important; } .baycor-proc-nav-tab:hover:not(.active) .baycor-proc-tab-icon { background: rgba(255, 255, 255, 0.2) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.3) !important; } .baycor-proc-nav-tab:hover:not(.active) .baycor-proc-tab-num { color: rgba(255, 255, 255, 0.9) !important; } .baycor-proc-nav-tab:hover:not(.active) .baycor-proc-tab-title { color: #FFFFFF !important; } .baycor-proc-tab-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: #DFF6FF !important; color: #00467F !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 19px !important; flex-shrink: 0 !important; border: 1px solid rgba(0, 70, 127, 0.1) !important; transition: all 0.3s ease !important; } .baycor-proc-tab-text { display: flex !important; flex-direction: column !important; gap: 2px !important; flex-grow: 1 !important; overflow: hidden !important; } .baycor-proc-tab-num { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; color: #64748B !important; transition: color 0.3s ease !important; } .baycor-proc-tab-title { font-size: 14.5px !important; font-weight: 700 !important; color: #00467F !important; line-height: 1.25 !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: color 0.3s ease !important; } .baycor-proc-tab-progress { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 3px !important; background: rgba(0, 70, 127, 0.1) !important; display: none !important; } .baycor-proc-tab-bar { height: 100% !important; width: 0% !important; background: #C00000 !important; } @keyframes baycorTabProgress { from { width: 0%; } to { width: 100%; } } /* Active Nav Tab: Corporate Navy background */ .baycor-proc-nav-tab.active { background: #00467F !important; background-color: #00467F !important; border-color: #00467F !important; box-shadow: 0 12px 28px rgba(0, 70, 127, 0.25) !important; transform: translateX(6px) !important; } .baycor-proc-nav-tab.active .baycor-proc-tab-icon { background: #C00000 !important; color: #FFFFFF !important; border-color: #C00000 !important; transform: scale(1.06) !important; } .baycor-proc-nav-tab.active .baycor-proc-tab-num { color: #38BDF8 !important; } .baycor-proc-nav-tab.active .baycor-proc-tab-title { color: #FFFFFF !important; } .baycor-proc-nav-tab.active .baycor-proc-tab-progress { display: block !important; background: rgba(255, 255, 255, 0.2) !important; } /* Right Content Column */ .baycor-proc-content-col { flex: 1; min-width: 0; } .baycor-proc-panels-wrapper { position: relative; width: 100%; height: 100%; } .baycor-proc-panel { display: none; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; height: 100%; } .baycor-proc-panel.active { display: block; opacity: 1; transform: translateY(0); } .baycor-proc-panel-card { display: grid !important; grid-template-columns: 44% 56% !important; background: #FFFFFF !important; border-radius: 22px !important; border: 1.5px solid #E2E8F0 !important; box-shadow: 0 14px 40px rgba(0, 45, 82, 0.08) !important; overflow: hidden !important; height: 100% !important; min-height: 520px !important; box-sizing: border-box !important; align-items: stretch !important; } .baycor-proc-panel-media { position: relative !important; overflow: hidden !important; width: 100% !important; height: 100% !important; min-height: 100% !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } .baycor-proc-panel-media img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important; } .baycor-proc-panel-card:hover .baycor-proc-panel-media img { transform: scale(1.04) !important; } .baycor-proc-media-badge { position: absolute !important; top: 18px !important; left: 18px !important; background: rgba(0, 70, 127, 0.92) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; padding: 6px 14px !important; border-radius: 20px !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 7px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important; z-index: 2 !important; } .baycor-proc-media-badge i { color: #C00000 !important; } .baycor-proc-panel-info { padding: 36px 32px; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; box-sizing: border-box; } .baycor-proc-info-tag { font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: #C00000; margin-bottom: 8px; } .baycor-proc-info-title { font-size: 22px; font-weight: 700; color: #00467F; line-height: 1.25; margin: 0 0 12px 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-proc-info-desc { font-size: 14px; line-height: 1.6; color: #475569; margin: 0 0 16px 0; } .baycor-proc-info-divider { width: 45px; height: 3px; background: #00467F; border-radius: 2px; margin-bottom: 20px; } .baycor-proc-info-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 11px; } .baycor-proc-info-list li { display: flex !important; align-items: flex-start !important; gap: 11px !important; font-size: 13.5px !important; line-height: 1.45 !important; color: #334155 !important; font-weight: 500 !important; } .baycor-proc-info-list li i { color: #C00000 !important; font-size: 14px !important; margin-top: 2px !important; flex-shrink: 0 !important; } /* Bottom Centered CTA */ .baycor-proc-showcase-cta { margin-top: 40px; display: flex; justify-content: center; align-items: center; width: 100%; } /* ========================================================================== Standardized Responsive Styles for Procurement & Supply (.elementor-2495) ========================================================================== */ /* Tablet Screen (<= 991px) */ @media (max-width: 991px) { .elementor-2495 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2495 .elementor-section { padding-top: 65px !important; padding-bottom: 65px !important; } /* Standardized Heading Spacing on Tablet */ .elementor-2495 .elementor-element-proc_w_intro_heading, .elementor-2495 .elementor-element-proc_w_carousel_heading, .elementor-2495 .elementor-element-proc_w_lifecycle_heading, .elementor-2495 .elementor-element-proc_w_adv_heading, .elementor-2495 .elementor-element-proc_w_faq_heading { margin-bottom: 24px !important; } .elementor-2495 .cg-sec-title, .elementor-2495 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2495 .cg-sec-title h2, .elementor-2495 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2495 .cg-sec-title .subtitle, .elementor-2495 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2495 .elementor-gt-desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } /* Section 1: Intro Two Columns Separation on Tablet */ #procurement-intro .elementor-element-proc_col_intro_left { padding-right: 22px !important; padding-left: 0 !important; box-sizing: border-box !important; } #procurement-intro .elementor-element-proc_col_intro_right { padding-left: 22px !important; padding-right: 0 !important; box-sizing: border-box !important; } #procurement-intro div[style*="border-left: 4px solid #C00000"] { padding: 22px 20px !important; margin-top: 15px !important; box-sizing: border-box !important; } #procurement-intro .baycor-intro-media-box { margin-bottom: 18px !important; } #procurement-intro .baycor-intro-media-box img { height: 200px !important; } /* Section 2: Industry Sourcing Showcase */ .baycor-proc-showcase-layout { flex-direction: column !important; gap: 18px !important; } .baycor-proc-nav-col { width: 100% !important; min-width: 100% !important; } .baycor-proc-nav-list { flex-direction: row !important; overflow-x: auto !important; flex-wrap: nowrap !important; padding: 4px 4px 12px 4px !important; gap: 10px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } .baycor-proc-nav-list::-webkit-scrollbar { display: none !important; } .baycor-proc-nav-tab { width: auto !important; min-width: 200px !important; flex-shrink: 0 !important; padding: 12px 16px !important; border-radius: 14px !important; } .baycor-proc-nav-tab.active { transform: none !important; } .baycor-proc-panel-card { grid-template-columns: 1fr !important; min-height: auto !important; border-radius: 18px !important; } .baycor-proc-panel-media { position: relative !important; min-height: 260px !important; height: 260px !important; } .baycor-proc-panel-info { padding: 28px 24px !important; } /* Section 3: Lifecycle Carousel */ .baycor-lifecycle-item { padding: 26px 22px !important; border-radius: 16px !important; } /* Section 4: Advantage & Operational Synergy */ #procurement-advantage .baycor-risk-checklist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } #procurement-advantage .baycor-ops-horizontal-banner { height: 330px !important; min-height: 330px !important; margin-top: 28px !important; } #procurement-advantage .baycor-ops-floating-card { bottom: 18px !important; left: 18px !important; right: 18px !important; padding: 16px 20px !important; } /* Section 5: FAQ Accordion */ #procurement-faq .elementor-accordion .elementor-tab-title { padding: 16px 18px !important; font-size: 15px !important; } } /* Mobile Screen (<= 767px) */ @media (max-width: 767px) { .elementor-2495 .elementor-container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .elementor-2495 .elementor-section { padding-top: 50px !important; padding-bottom: 50px !important; } /* Standardized Heading Spacing on Mobile */ .elementor-2495 .elementor-element-proc_w_intro_heading { margin-bottom: 12px !important; } .elementor-2495 .elementor-element-proc_w_carousel_heading, .elementor-2495 .elementor-element-proc_w_lifecycle_heading, .elementor-2495 .elementor-element-proc_w_adv_heading, .elementor-2495 .elementor-element-proc_w_faq_heading { margin-bottom: 18px !important; } .elementor-2495 .cg-sec-title, .elementor-2495 .cg-sec-title.headline { margin-bottom: 6px !important; } .elementor-2495 .cg-sec-title h2, .elementor-2495 .sec_title { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .elementor-2495 .cg-sec-title .subtitle, .elementor-2495 .subtitle { font-size: 11px !important; letter-spacing: 1.2px !important; margin-bottom: 6px !important; } .elementor-2495 .elementor-gt-desc { margin-top: 6px !important; margin-bottom: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; } .elementor-2495 .sec_desc, .elementor-2495 p { font-size: 14px !important; line-height: 1.6 !important; } /* Section 1: Intro Mobile Stacking */ #procurement-intro .elementor-element-proc_col_intro_left, #procurement-intro .elementor-element-proc_col_intro_right { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } #procurement-intro .elementor-element-proc_col_intro_left { margin-bottom: 22px !important; } #procurement-intro div[style*="border-left: 4px solid #C00000"] { padding: 16px 14px !important; margin-top: 10px !important; margin-bottom: 0 !important; border-radius: 0 10px 10px 0 !important; } #procurement-intro div[style*="border-left: 4px solid #C00000"] p { font-size: 14.5px !important; line-height: 1.65 !important; } #procurement-intro .baycor-intro-media-box img { height: 180px !important; } #procurement-intro .d-flex { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } #procurement-intro .cg-btn-1, #procurement-intro .cg-btn-1 a { width: 100% !important; justify-content: center !important; text-align: center !important; } #procurement-intro .cg-btn-1 a span { width: 100% !important; justify-content: center !important; padding: 13px 20px !important; } /* Section 2: Industry Sourcing Showcase */ .baycor-proc-nav-tab { min-width: 175px !important; padding: 10px 14px !important; } .baycor-proc-tab-icon { width: 36px !important; height: 36px !important; font-size: 16px !important; } .baycor-proc-tab-title { font-size: 13px !important; } .baycor-proc-tab-num { font-size: 10px !important; } .baycor-proc-panel-card { border-radius: 16px !important; } .baycor-proc-panel-media { min-height: 230px !important; height: 230px !important; } .baycor-proc-media-badge { top: 12px !important; left: 12px !important; padding: 4px 10px !important; font-size: 11px !important; } .baycor-proc-panel-info { padding: 22px 16px !important; } .baycor-proc-info-tag { font-size: 11px !important; } .baycor-proc-info-title { font-size: 19px !important; margin-bottom: 8px !important; } .baycor-proc-info-desc { font-size: 13.5px !important; line-height: 1.55 !important; margin-bottom: 12px !important; } .baycor-proc-info-divider { margin-bottom: 14px !important; } .baycor-proc-info-list { gap: 9px !important; } .baycor-proc-info-list li { font-size: 13px !important; line-height: 1.4 !important; gap: 8px !important; } .baycor-proc-info-list li i { font-size: 13px !important; margin-top: 1px !important; } .baycor-proc-showcase-cta { margin-top: 25px !important; } .baycor-proc-showcase-cta .cg-btn-1, .baycor-proc-showcase-cta .cg-btn-1 a { width: 100% !important; max-width: 320px !important; justify-content: center !important; text-align: center !important; margin: 0 auto !important; } .baycor-proc-showcase-cta .cg-btn-1 a span { width: 100% !important; justify-content: center !important; padding: 13px 20px !important; } /* Section 3: Lifecycle Carousel */ .baycor-lifecycle-item { padding: 22px 18px !important; border-radius: 16px !important; } .baycor-lifecycle-heading { font-size: 17px !important; margin-bottom: 8px !important; } .baycor-lifecycle-text { font-size: 13.5px !important; line-height: 1.6 !important; margin-bottom: 16px !important; } .baycor-lifecycle-badge { font-size: 11px !important; padding: 4px 10px !important; } .baycor-lifecycle-icon-wrap { width: 40px !important; height: 40px !important; font-size: 17px !important; } .baycor-lifecycle-pill { font-size: 11.5px !important; padding: 5px 12px !important; } /* Section 4: Advantage & Operational Synergy */ #procurement-advantage .baycor-risk-checklist-grid { grid-template-columns: 1fr !important; gap: 12px !important; } #procurement-advantage .baycor-risk-checklist-card { padding: 15px 18px !important; gap: 12px !important; border-radius: 14px !important; } #procurement-advantage .baycor-risk-checklist-card strong { font-size: 14.5px !important; line-height: 1.3 !important; } #procurement-advantage .baycor-risk-checklist-card span { font-size: 13px !important; line-height: 1.5 !important; } #procurement-advantage .baycor-ops-horizontal-banner { height: 290px !important; min-height: 290px !important; margin-top: 22px !important; border-radius: 16px !important; } #procurement-advantage .baycor-ops-floating-card { bottom: 12px !important; left: 12px !important; right: 12px !important; padding: 12px 16px !important; border-radius: 12px !important; } #procurement-advantage .baycor-ops-badge-tag { font-size: 11px !important; margin-bottom: 3px !important; } #procurement-advantage .baycor-ops-badge-title { font-size: 15px !important; margin-bottom: 0 !important; } #procurement-advantage .baycor-ops-badge-desc { display: none !important; } /* Section 5: FAQ Accordion */ #procurement-faq .elementor-accordion .elementor-tab-title { padding: 14px 16px !important; border-radius: 10px !important; } #procurement-faq .elementor-accordion .elementor-accordion-title { font-size: 14px !important; line-height: 1.35 !important; } #procurement-faq .elementor-accordion .elementor-accordion-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 12px !important; } #procurement-faq .elementor-accordion .elementor-tab-content { padding: 14px 16px !important; font-size: 13.5px !important; line-height: 1.6 !important; } /* Section 6: Bottom CTA Banner on Mobile */ #procurement-cta-banner .cg-sec-title, #procurement-cta-banner .cg-sec-title.headline { margin-bottom: 8px !important; } #procurement-cta-banner h2.sec_title { font-size: 21px !important; line-height: 1.25 !important; margin-bottom: 8px !important; } #procurement-cta-banner p { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 18px !important; max-width: 100% !important; } #procurement-cta-banner .d-flex { flex-direction: column !important; align-items: center !important; gap: 12px !important; } #procurement-cta-banner .baycor-btn-cta-primary, #procurement-cta-banner .baycor-btn-cta-phone { width: 100% !important; max-width: 320px !important; justify-content: center !important; text-align: center !important; padding: 14px 20px !important; } } /* Extra Small Phones (<= 480px) */ @media (max-width: 480px) { .elementor-2495 .elementor-container { padding-left: 14px !important; padding-right: 14px !important; } .elementor-2495 .elementor-section { padding-top: 45px !important; padding-bottom: 45px !important; } .baycor-proc-nav-tab { min-width: 160px !important; padding: 10px 12px !important; } .baycor-proc-panel-media { min-height: 200px !important; height: 200px !important; } .baycor-proc-panel-info { padding: 18px 14px !important; } .baycor-proc-info-title { font-size: 17.5px !important; } .baycor-proc-info-list li { font-size: 12.5px !important; } } /* ========================================================================== Standardized Responsive Styles for About Us (.elementor-2388) ========================================================================== */ /* Tablet Screen (<= 991px) */ @media (max-width: 991px) { .elementor-2388 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2388 .elementor-section { padding-top: 65px !important; padding-bottom: 65px !important; } /* Standardized Heading Spacing on Tablet */ .elementor-2388 .elementor-widget-go-s-heading { margin-bottom: 24px !important; } .elementor-2388 .elementor-element-670ca02, .elementor-2388 .elementor-element-6fbf9c2 { margin-bottom: 20px !important; } .elementor-2388 .cg-sec-title, .elementor-2388 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2388 .cg-sec-title h2, .elementor-2388 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2388 .cg-sec-title .subtitle, .elementor-2388 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2388 .elementor-gt-desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } } /* Mobile Screen (<= 767px) */ @media (max-width: 767px) { .elementor-2388 .elementor-container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .elementor-2388 .elementor-section { padding-top: 50px !important; padding-bottom: 50px !important; } /* Standardized Heading Spacing on Mobile */ .elementor-2388 .elementor-widget-go-s-heading { margin-bottom: 18px !important; } .elementor-2388 .elementor-element-670ca02, .elementor-2388 .elementor-element-6fbf9c2 { margin-bottom: 12px !important; } .elementor-2388 .cg-sec-title, .elementor-2388 .cg-sec-title.headline { margin-bottom: 6px !important; } .elementor-2388 .cg-sec-title h2, .elementor-2388 .sec_title { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .elementor-2388 .cg-sec-title .subtitle, .elementor-2388 .subtitle { font-size: 11px !important; letter-spacing: 1.2px !important; margin-bottom: 6px !important; } .elementor-2388 .elementor-gt-desc { margin-top: 6px !important; margin-bottom: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; } .elementor-2388 .sec_desc, .elementor-2388 p { font-size: 14px !important; line-height: 1.6 !important; } /* Section 9: Bottom CTA Banner on Mobile */ .elementor-2388 .elementor-element-a0ea16f h2 { font-size: 21px !important; line-height: 1.25 !important; margin-bottom: 8px !important; } .elementor-2388 .elementor-element-a0ea16f p { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 18px !important; max-width: 100% !important; } .elementor-2388 .baycor-cta-buttons { flex-direction: column !important; align-items: center !important; gap: 12px !important; } .elementor-2388 .cg-btn-cta-red, .elementor-2388 .cg-btn-cta-red a, .elementor-2388 .cg-btn-cta-red a span { width: 100% !important; max-width: 320px !important; justify-content: center !important; text-align: center !important; padding: 14px 20px !important; } } /* Extra Small Phones (<= 480px) */ @media (max-width: 480px) { .elementor-2388 .elementor-container { padding-left: 14px !important; padding-right: 14px !important; } .elementor-2388 .elementor-section { padding-top: 45px !important; padding-bottom: 45px !important; } } /* ========================================================================== Tracecoo Digital Platform Styles (.elementor-2506) ========================================================================== */ /* Eyebrows (Kickers) across all Tracecoo sections */ .elementor-2506 .cg-sec-title .subtitle, .elementor-2506 .subtitle { font-size: 13px !important; font-weight: 800 !important; color: #C00000 !important; text-transform: uppercase !important; letter-spacing: 1.6px !important; margin-bottom: 10px !important; display: inline-block !important; position: relative !important; } .elementor-2506 .cg-sec-title h2, .elementor-2506 .sec_title { font-size: 34px !important; line-height: 1.25 !important; color: #00467F !important; font-weight: 700 !important; font-family: var(--cg-heading, Rubik, sans-serif) !important; } .elementor-2506 .sec_desc { font-size: 15.5px !important; line-height: 1.65 !important; color: #475569 !important; max-width: 820px !important; margin: 12px auto 0 auto !important; } /* SECTION 0: Portal Action Bar - Centered Column with Standardized Buttons */ #tracecoo-portal-bar, .elementor-2506 .elementor-element-tracecoo_sec_portal_bar, .elementor-2506 section[data-id="tracecoo_sec_portal_bar"] { width: 100% !important; margin-top: -45px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; z-index: 10 !important; } #tracecoo-po-tracking, .elementor-2506 .elementor-element-tracecoo_sec_po_tracking, .elementor-2506 section[data-id="tracecoo_sec_po_tracking"] { padding-top: 45px !important; } .baycor-tracecoo-portal-bar { width: 100%; max-width: 860px; margin: 0 auto; box-sizing: border-box; } .baycor-portal-bar-inner { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 24px; padding: 34px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.08); gap: 20px; box-sizing: border-box; } .baycor-portal-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; } .baycor-tracecoo-logo-img { height: auto; max-height: 38px; width: auto; max-width: 210px; object-fit: contain; margin: 0 auto; display: block; } .baycor-portal-pill { display: inline-flex; align-items: center; gap: 7px; background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; } .baycor-portal-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; } /* Secondary Portal Button (Blue with Red Slide Hover) */ .baycor-btn-portal-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 2px solid #00467F !important; background-color: #00467F !important; border-radius: 6px; color: #FFFFFF !important; font-weight: 700; font-size: 15px; font-family: var(--cg-heading, Rubik, sans-serif); text-decoration: none !important; position: relative; overflow: hidden; z-index: 1; -webkit-transition: all 400ms cubic-bezier(0.7, 0, 0.2, 1); transition: all 400ms cubic-bezier(0.7, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(0, 70, 127, 0.25); cursor: pointer; } .baycor-btn-portal-secondary:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; -webkit-transition: 550ms cubic-bezier(0.7, 0, 0.2, 1); transition: 550ms cubic-bezier(0.7, 0, 0.2, 1); background-color: #C00000 !important; border-radius: 4px; } .baycor-btn-portal-secondary .baycor-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255, 255, 255, 0.2); color: #FFFFFF; border-radius: 4px; transition: all 400ms ease; } .baycor-btn-portal-secondary:hover { border-color: #C00000 !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(192, 0, 0, 0.35); color: #FFFFFF !important; } .baycor-btn-portal-secondary:hover:before { width: 100%; } .baycor-btn-portal-secondary:hover .baycor-btn-icon { background: rgba(255, 255, 255, 0.35); color: #FFFFFF; } /* Tracecoo Content Red Buttons (Red with Blue Slide Hover) */ .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary, .elementor-2506 .baycor-plan-btn, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary, .elementor-2506 .baycor-scroll-to-plans { background-color: #C00000 !important; border-color: #C00000 !important; color: #FFFFFF !important; box-shadow: 0 6px 20px rgba(192, 0, 0, 0.25); position: relative; overflow: hidden; z-index: 1; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99); } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary:before, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary:before, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary:before, .elementor-2506 .baycor-plan-btn:before, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary:before, .elementor-2506 .baycor-scroll-to-plans:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); background-color: #00467F !important; border-radius: 6px; } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary .baycor-btn-icon, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary .baycor-btn-icon, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary .baycor-btn-icon, .elementor-2506 .baycor-plan-btn .baycor-btn-icon, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary .baycor-btn-icon, .elementor-2506 .baycor-scroll-to-plans .baycor-btn-icon { background: #FFFFFF !important; color: #C00000 !important; transition: all 350ms ease; } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary:hover, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary:hover, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary:hover, .elementor-2506 .baycor-plan-btn:hover, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary:hover, .elementor-2506 .baycor-scroll-to-plans:hover { border-color: #00467F !important; color: #FFFFFF !important; box-shadow: 0 10px 25px rgba(0, 70, 127, 0.35); -webkit-transform: translateY(-2px); transform: translateY(-2px); } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary:hover span, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary:hover span, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary:hover span, .elementor-2506 .baycor-plan-btn:hover span, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary:hover span, .elementor-2506 .baycor-scroll-to-plans:hover span { color: #FFFFFF !important; } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary:hover:before, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary:hover:before, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary:hover:before, .elementor-2506 .baycor-plan-btn:hover:before, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary:hover:before, .elementor-2506 .baycor-scroll-to-plans:hover:before { width: 100% !important; } .elementor-2506 #tracecoo-portal-bar .baycor-btn-cta-primary:hover .baycor-btn-icon, .elementor-2506 #tracecoo-po-tracking .baycor-btn-cta-primary:hover .baycor-btn-icon, .elementor-2506 #tracecoo-plans .baycor-btn-cta-primary:hover .baycor-btn-icon, .elementor-2506 .baycor-plan-btn:hover .baycor-btn-icon, .elementor-2506 #tracecoo-video .baycor-btn-cta-primary:hover .baycor-btn-icon, .elementor-2506 .baycor-scroll-to-plans:hover .baycor-btn-icon { background: #FFFFFF !important; color: #00467F !important; } /* SECTION 1: Tracecoo Hero MacBook Device with Scroll-Driven Zoom */ .baycor-sec1-cta-wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 42px; width: 100%; } .baycor-tracecoo-hero-showcase-wrap { width: 100%; max-width: 1140px; margin: 0 auto; position: relative; box-sizing: border-box; } .baycor-mac-stage-outer { position: relative; width: 100%; max-width: 1020px; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .baycor-mac-ambient-glow { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); width: 85%; height: 75%; background: radial-gradient(circle, rgba(56, 189, 248, 0.24) 0%, rgba(192, 0, 0, 0.09) 45%, rgba(255, 255, 255, 0) 75%); filter: blur(50px); -webkit-filter: blur(50px); pointer-events: none; z-index: 0; } .baycor-mac-stage-container { position: relative; z-index: 1; width: 100%; perspective: 1500px; display: flex; justify-content: center; align-items: center; } .baycor-mac-device-wrap { position: relative; width: 100%; max-width: 980px; display: flex; justify-content: center; align-items: center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } /* MacBook Bezel Outer Shell */ .baycor-mac-bezel-frame { position: relative; z-index: 3; width: 100%; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 25px 50px rgba(0, 45, 82, 0.18)); } /* Screen Display Viewport strictly contained inside the MacBook screen glass */ .baycor-mac-screen-viewport { position: absolute; top: 5.6%; left: 10.7%; width: 78.6%; height: 84.4%; z-index: 1; border-radius: 0 !important; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #000000; } .baycor-mac-wallpaper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; z-index: 1; pointer-events: none; } .baycor-mac-app-zoom-wrap { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: scale(0.60); transform-origin: center center; will-change: transform; } .baycor-mac-dashboard-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Floating Notification Badges */ .baycor-mac-floating-badge { position: absolute; z-index: 5; width: 38%; max-width: 380px; height: auto; pointer-events: auto; will-change: transform; filter: drop-shadow(0 16px 32px rgba(0, 45, 82, 0.16)); } .baycor-mac-float-top-right { top: -2%; right: 3%; } .baycor-mac-float-bottom-left { bottom: 7%; left: 3%; } /* SECTION 2: The 4 Stages Grid */ .baycor-tracecoo-stages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; width: 100%; box-sizing: border-box; } .baycor-stage-card { background: #FFFFFF; border-radius: 18px; border: 1.5px solid #E2E8F0; border-top: 4px solid #00467F; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.04); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-stage-card:hover { transform: translateY(-6px); border-top-color: #C00000; box-shadow: 0 16px 36px rgba(0, 70, 127, 0.12); border-color: #CBD5E1; } .baycor-stage-header { display: flex; align-items: center; justify-content: space-between; } .baycor-stage-num { font-size: 12px; font-weight: 800; color: #C00000; letter-spacing: 1px; text-transform: uppercase; } .baycor-stage-icon { width: 46px; height: 46px; border-radius: 12px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 19px; border: 1px solid rgba(0, 70, 127, 0.1); transition: all 0.3s ease; } .baycor-stage-card:hover .baycor-stage-icon { background: #C00000; color: #FFFFFF; border-color: #C00000; } .baycor-stage-title { font-size: 17px; font-weight: 700; color: #00467F; line-height: 1.35; margin: 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-stage-desc { font-size: 13.5px; line-height: 1.6; color: #475569; margin: 0; flex-grow: 1; } .baycor-stage-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; background: #F1F5F9; color: #00467F; padding: 5px 12px; border-radius: 20px; align-self: flex-start; margin-top: 6px; } /* SECTION 3: Tracecoo Features Swiper Carousel */ .baycor-features-carousel-outer { width: 100%; max-width: 1140px; margin: 0 auto; position: relative; box-sizing: border-box; } .baycor-features-slider { overflow: hidden; padding: 10px 4px 20px 4px; width: 100%; } .baycor-features-slider .swiper-wrapper { display: flex; align-items: stretch; } .baycor-features-slider .swiper-slide { height: auto; display: flex; } .baycor-feature-slide-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-top: 4px solid #00467F; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; min-height: 420px; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.04); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-feature-slide-card:hover { transform: translateY(-8px); border-top-color: #C00000; border-color: #CBD5E1; box-shadow: 0 20px 45px rgba(0, 70, 127, 0.12); } .baycor-feature-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .baycor-feature-card-title { font-size: 20px; font-weight: 700; color: #00467F; line-height: 1.25; margin: 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-feature-card-icon { width: 44px; height: 44px; border-radius: 12px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: 1px solid rgba(0, 70, 127, 0.1); transition: all 0.3s ease; } .baycor-feature-slide-card:hover .baycor-feature-card-icon { background: #C00000; color: #FFFFFF; border-color: #C00000; } .baycor-feature-card-desc { font-size: 14.5px; line-height: 1.65; color: #475569; margin: 0 0 20px 0; flex-grow: 1; } .baycor-feature-card-img-wrap { background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); border-radius: 14px; border: 1px solid #E2E8F0; padding: 16px; display: flex; align-items: center; justify-content: center; height: 155px; overflow: hidden; box-sizing: border-box; } .baycor-feature-card-img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .baycor-feature-slide-card:hover .baycor-feature-card-img { transform: scale(1.06); } /* Controls: Arrows & Bullets */ .baycor-features-controls-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 35px; } .baycor-features-arrow { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid #00467F; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 70, 127, 0.08); } .baycor-features-arrow:hover { background: #C00000; border-color: #C00000; color: #FFFFFF; transform: scale(1.08); box-shadow: 0 8px 20px rgba(192, 0, 0, 0.25); } .baycor-features-pagination { position: static !important; width: auto !important; display: flex; align-items: center; gap: 8px; } .baycor-features-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #CBD5E1; opacity: 1; border-radius: 6px; margin: 0 !important; transition: all 0.3s ease; cursor: pointer; } .baycor-features-pagination .swiper-pagination-bullet-active { width: 28px; background: #C00000; border-radius: 6px; } /* SECTION 4: Bank-Grade Security (Light Blue Split Layout) */ .elementor-2506 #tracecoo-security .subtitle { color: #C00000 !important; } .elementor-2506 #tracecoo-security .sec_title, .elementor-2506 #tracecoo-security h2 { color: #00467F !important; } .elementor-2506 #tracecoo-security .sec_desc { color: #475569 !important; } .baycor-security-split-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; width: 100%; max-width: 1140px; margin: 0 auto; box-sizing: border-box; } /* Left Column: Vertical Stack of Security Cards */ .baycor-security-features-col { min-width: 0 !important; width: 100%; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; } .baycor-sec-feature-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-left: 4px solid #00467F; border-radius: 16px; padding: 20px 22px; display: flex; align-items: flex-start; gap: 18px; box-shadow: 0 4px 16px rgba(0, 70, 127, 0.04); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-sec-feature-card:hover { transform: translateX(6px); border-left-color: #C00000; border-color: #CBD5E1; box-shadow: 0 10px 28px rgba(0, 70, 127, 0.10); } .baycor-sec-icon-box { width: 46px; height: 46px; border-radius: 12px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; border: 1px solid rgba(0, 70, 127, 0.12); transition: all 0.3s ease; } .baycor-sec-feature-card:hover .baycor-sec-icon-box { background: #C00000; color: #FFFFFF; border-color: #C00000; } .baycor-sec-content { display: flex; flex-direction: column; gap: 4px; } .baycor-sec-content h4 { font-size: 17px; font-weight: 700; color: #00467F; margin: 0; font-family: var(--cg-heading, Rubik, sans-serif); line-height: 1.3; } .baycor-sec-content p { font-size: 13.5px; line-height: 1.55; color: #475569; margin: 0; } /* Right Column: 2-Image Carousel */ .baycor-security-slider-col { min-width: 0 !important; width: 100%; box-sizing: border-box; } .baycor-security-slider-frame { background: #FFFFFF; border-radius: 20px; border: 1.5px solid #E2E8F0; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.10); overflow: hidden; padding: 16px; box-sizing: border-box; width: 100%; max-width: 100%; } .baycor-security-swiper { width: 100% !important; max-width: 100% !important; overflow: hidden !important; position: relative; } .baycor-security-swiper .swiper-wrapper { display: flex; width: 100%; } .baycor-security-swiper .swiper-slide { width: 100% !important; flex-shrink: 0; box-sizing: border-box; } .baycor-security-slide-item { border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); box-sizing: border-box; } .baycor-security-img { width: 100%; max-width: 100%; height: auto; display: block; object-fit: contain; } .baycor-sec-slider-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; padding-bottom: 4px; } .baycor-sec-arrow { width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid #00467F; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0, 70, 127, 0.06); } .baycor-sec-arrow:hover { background: #C00000; border-color: #C00000; color: #FFFFFF; transform: scale(1.08); } .baycor-sec-pagination { position: static !important; width: auto !important; display: flex; align-items: center; gap: 6px; } .baycor-sec-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #CBD5E1; opacity: 1; border-radius: 4px; margin: 0 !important; transition: all 0.3s ease; cursor: pointer; } .baycor-sec-pagination .swiper-pagination-bullet-active { width: 24px; background: #C00000; border-radius: 4px; } /* SECTION: Tracecoo Pricing & Platform Plans */ .baycor-plans-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; width: 100%; max-width: 1040px; margin: 0 auto; box-sizing: border-box; } .baycor-plan-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-top: 5px solid #00467F; border-radius: 24px; padding: 36px 32px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 28px rgba(0, 70, 127, 0.05); position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-plan-card:hover { transform: translateY(-8px); border-top-color: #C00000; border-color: #CBD5E1; box-shadow: 0 24px 50px rgba(0, 70, 127, 0.14); } .baycor-plan-featured { border-top-color: #C00000; box-shadow: 0 14px 36px rgba(192, 0, 0, 0.08); background: linear-gradient(180deg, #FFFFFF 0%, #FFFBFB 100%); } .baycor-plan-ribbon { position: absolute; top: 26px; right: -36px; width: 155px; text-align: center; transform: rotate(45deg); background: #C00000; color: #FFFFFF; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 5px 0; box-shadow: 0 2px 8px rgba(192, 0, 0, 0.3); z-index: 2; box-sizing: border-box; } .baycor-plan-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .baycor-plan-tag { display: inline-block; background: #F1F5F9; color: #00467F; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 4px 14px; border-radius: 20px; text-transform: uppercase; border: 1px solid #E2E8F0; transition: all 0.3s ease; } .baycor-plan-card:hover .baycor-plan-tag { background: rgba(192, 0, 0, 0.08); color: #C00000; border-color: rgba(192, 0, 0, 0.25); } .baycor-plan-icon { width: 52px; height: 52px; border-radius: 14px; background: #DFF6FF; color: #00467F; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all 0.3s ease; border: 1px solid rgba(0, 70, 127, 0.1); } .baycor-plan-card:hover .baycor-plan-icon { background: #C00000; color: #FFFFFF; border-color: #C00000; } .baycor-plan-title { font-size: 26px; font-weight: 800; color: #00467F; margin: 0 0 8px 0; font-family: var(--cg-heading, Rubik, sans-serif); } .baycor-plan-subtitle { font-size: 14.5px; line-height: 1.6; color: #475569; margin: 0 0 24px 0; padding-bottom: 20px; border-bottom: 1px solid #E2E8F0; } .baycor-plan-features-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; flex-grow: 1; } .baycor-plan-feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: #334155; } .baycor-plan-check { color: #C00000; font-size: 16px; flex-shrink: 0; margin-top: 2px; } .baycor-plan-footer { width: 100%; margin-top: auto; } .baycor-plan-btn { width: 100% !important; justify-content: center; text-align: center; } /* SECTION 6: Video Platform Showcase & Animated Stats */ .baycor-tracecoo-video-showcase { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; box-sizing: border-box; } .baycor-video-player-box { position: relative; width: 100%; height: 520px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 45, 82, 0.12); border: 2px solid #E2E8F0; background: #000000; box-sizing: border-box; } .baycor-video-iframe { width: 100%; height: 100%; border: none; display: block; } /* Animated Performance Statistics Card */ .baycor-video-stats-card { background: #FFFFFF; border-radius: 20px; border: 1.5px solid #E2E8F0; padding: 32px 28px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; justify-content: space-between; box-shadow: 0 10px 30px rgba(0, 70, 127, 0.05); box-sizing: border-box; width: 100%; } .baycor-stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; box-sizing: border-box; } .baycor-stat-number { font-size: 42px; font-weight: 800; color: #00467F; line-height: 1; font-family: var(--cg-heading, Rubik, sans-serif); display: flex; align-items: baseline; justify-content: center; } .baycor-stat-number .counter { font-weight: 800; color: #00467F; } .baycor-stat-symbol { font-size: 28px; font-weight: 700; color: #C00000; margin-left: 2px; } .baycor-stat-label { font-size: 13.5px; font-weight: 600; color: #475569; line-height: 1.35; text-align: center; } .baycor-stat-divider { width: 1px; height: 48px; background: #E2E8F0; } .baycor-video-cta-row { display: flex; justify-content: center; align-items: center; width: 100%; } /* SECTION 7: FAQ Accordion (Standardized Global FAQ System) */ #tracecoo-faq { background-color: #FFFFFF !important; } #tracecoo-faq .elementor-column { text-align: center !important; } #tracecoo-faq .elementor-widget-accordion, #tracecoo-faq .elementor-accordion { display: block !important; max-width: 950px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; box-sizing: border-box !important; } #tracecoo-faq .elementor-accordion .elementor-accordion-item { border: 1.5px solid #E2E8F0 !important; border-radius: 10px !important; margin-bottom: 16px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(0, 45, 82, 0.05) !important; transition: all 0.3s ease !important; background: #F8FAFC !important; width: 100% !important; box-sizing: border-box !important; } #tracecoo-faq .elementor-accordion .elementor-accordion-item:hover { border-color: #00467F !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.08) !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title { background: #F8FAFC !important; border: none !important; padding: 18px 24px !important; font-size: 16px !important; font-weight: 600 !important; color: #001D36 !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; cursor: pointer !important; margin: 0 !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title, #tracecoo-faq .elementor-accordion .elementor-tab-title h3, #tracecoo-faq .elementor-accordion .elementor-accordion-title { font-size: 16px !important; font-weight: 600 !important; color: #001D36 !important; line-height: 1.4 !important; letter-spacing: normal !important; text-decoration: none !important; margin: 0 !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title.elementor-active { background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; color: #00467F !important; font-weight: 700 !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title.elementor-active, #tracecoo-faq .elementor-accordion .elementor-tab-title.elementor-active h3, #tracecoo-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title { color: #00467F !important; font-weight: 700 !important; } #tracecoo-faq .elementor-accordion .elementor-accordion-icon { color: #00467F !important; font-size: 14px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 14px !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { color: #00467F !important; } #tracecoo-faq .elementor-accordion .elementor-tab-content { background: #FFFFFF !important; border: none !important; padding: 20px 24px 24px !important; font-size: 14.5px !important; line-height: 1.7 !important; color: #475569 !important; text-align: left !important; } @media (max-width: 767px) { #tracecoo-faq .elementor-accordion .elementor-tab-title { padding: 16px 18px !important; font-size: 15px !important; } #tracecoo-faq .elementor-accordion .elementor-tab-title, #tracecoo-faq .elementor-accordion .elementor-tab-title h3, #tracecoo-faq .elementor-accordion .elementor-accordion-title { font-size: 15px !important; } #tracecoo-faq .elementor-accordion .elementor-tab-content { padding: 16px 18px 20px !important; font-size: 14px !important; } } /* SECTION 8: Final Conversion Banner */ #tracecoo-cta-banner { text-align: center !important; } #tracecoo-cta-banner .elementor-widget-html, #tracecoo-cta-banner .elementor-widget-container { width: 100% !important; display: flex !important; justify-content: center !important; } #tracecoo-cta-banner .sec_title, #tracecoo-cta-banner h2 { color: #FFFFFF !important; text-align: center !important; } #tracecoo-cta-banner p { color: rgba(255, 255, 255, 0.88) !important; text-align: center !important; } /* ========================================================================== Responsive Breakpoints for Tracecoo (.elementor-2506) ========================================================================== */ /* Tablet Screen (<= 991px) */ @media (max-width: 991px) { .elementor-2506 .elementor-container { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .elementor-2506 .elementor-section { padding-top: 65px !important; padding-bottom: 65px !important; } #tracecoo-portal-bar, .elementor-2506 .elementor-element-tracecoo_sec_portal_bar, .elementor-2506 section[data-id="tracecoo_sec_portal_bar"] { margin-top: -35px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #tracecoo-po-tracking, .elementor-2506 .elementor-element-tracecoo_sec_po_tracking, .elementor-2506 section[data-id="tracecoo_sec_po_tracking"] { padding-top: 35px !important; } .elementor-2506 .elementor-widget-go-s-heading { margin-bottom: 24px !important; } .elementor-2506 .elementor-element-tracecoo_w_po_heading { margin-bottom: 20px !important; } .elementor-2506 .cg-sec-title, .elementor-2506 .cg-sec-title.headline { margin-bottom: 10px !important; } .elementor-2506 .cg-sec-title h2, .elementor-2506 .sec_title { font-size: 28px !important; line-height: 1.3 !important; margin-bottom: 8px !important; } .elementor-2506 .cg-sec-title .subtitle, .elementor-2506 .subtitle { font-size: 11.5px !important; letter-spacing: 1.2px !important; margin-bottom: 8px !important; } .elementor-2506 .sec_desc { margin-top: 8px !important; margin-bottom: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; } .baycor-portal-bar-inner { padding: 26px 20px; gap: 18px; } .baycor-portal-brand { justify-content: center; } .baycor-portal-actions { justify-content: center; } .baycor-tracecoo-stages-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .baycor-security-split-layout { grid-template-columns: 1fr; gap: 32px; } .baycor-plans-container { grid-template-columns: 1fr; gap: 28px; } .baycor-video-player-box { height: 380px; } .baycor-video-stats-card { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 26px 20px; } .baycor-stat-divider { display: none; } .baycor-stat-number { font-size: 36px; } .baycor-laptop-display-card { margin-top: 24px; } } /* Mobile Screen (<= 767px) */ @media (max-width: 767px) { .elementor-2506 .elementor-container { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } .elementor-2506 .elementor-section { padding-top: 50px !important; padding-bottom: 50px !important; } #tracecoo-portal-bar, .elementor-2506 .elementor-element-tracecoo_sec_portal_bar, .elementor-2506 section[data-id="tracecoo_sec_portal_bar"] { margin-top: -25px !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #tracecoo-po-tracking, .elementor-2506 .elementor-element-tracecoo_sec_po_tracking, .elementor-2506 section[data-id="tracecoo_sec_po_tracking"] { padding-top: 25px !important; } .elementor-2506 .elementor-widget-go-s-heading { margin-bottom: 18px !important; } .elementor-2506 .elementor-element-tracecoo_w_po_heading { margin-bottom: 12px !important; } .elementor-2506 .cg-sec-title, .elementor-2506 .cg-sec-title.headline { margin-bottom: 6px !important; } .elementor-2506 .cg-sec-title h2, .elementor-2506 .sec_title { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 6px !important; } .elementor-2506 .cg-sec-title .subtitle, .elementor-2506 .subtitle { font-size: 11px !important; letter-spacing: 1.2px !important; margin-bottom: 6px !important; } .elementor-2506 .sec_desc { margin-top: 6px !important; margin-bottom: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; } .baycor-portal-actions { flex-direction: column; gap: 12px; width: 100%; } .baycor-btn-portal-secondary, .baycor-portal-actions .baycor-btn-cta-primary { width: 100%; max-width: 320px; justify-content: center; text-align: center; } .baycor-intro-highlight-box { padding: 18px 16px; } .baycor-intro-highlight-box p { font-size: 14.5px; } /* MacBook Showcase Mobile Scaling */ .baycor-mac-stage-outer { margin-top: 25px; } .baycor-mac-floating-badge { width: 48%; max-width: 260px; } .baycor-mac-float-top-right { top: -6%; right: -3%; } .baycor-mac-float-bottom-left { bottom: -6%; left: -3%; } .baycor-tracecoo-stages-grid { grid-template-columns: 1fr; gap: 14px; } .baycor-feature-slide-card { padding: 24px 18px; min-height: 360px; } .baycor-feature-card-title { font-size: 18px; } .baycor-feature-card-desc { font-size: 13.5px; min-height: auto; margin-bottom: 16px; } .baycor-feature-card-img-wrap { height: 140px; } .baycor-security-split-layout { grid-template-columns: 1fr; gap: 24px; } .baycor-sec-feature-card { padding: 16px 14px; gap: 14px; } .baycor-sec-icon-box { width: 40px; height: 40px; font-size: 16px; } .baycor-sec-content h4 { font-size: 15.5px; } .baycor-sec-content p { font-size: 13px; } .baycor-plans-container { grid-template-columns: 1fr; gap: 24px; } .baycor-plan-card { padding: 28px 20px; } .baycor-plan-title { font-size: 22px; } .baycor-video-player-box { height: 240px; } .baycor-video-stats-card { grid-template-columns: 1fr; gap: 20px; padding: 22px 16px; } .baycor-stat-number { font-size: 32px; } #tracecoo-cta-banner .baycor-btn-cta-primary, #tracecoo-cta-banner .baycor-btn-cta-phone { width: 100%; max-width: 320px; justify-content: center; text-align: center; padding: 14px 20px !important; } } /* ========================================================================== Global Header & Stacking Priority (Header Always Above All Page Elements) ========================================================================== */ header, .site-header, .cg-header-section, .cg-header-area, .cg-header-top, .txa_sticky_header, .txa_sticky_show, .elementor-location-header, div[data-elementor-type="header"], div[data-elementor-type="cargozen_template"], .header_style_one, .header_style_two, .header_style_three, .header_style_four { z-index: 999999 !important; position: relative; } .txa_sticky_header, .txa_sticky_show, .is-sticky, .sticky-header { z-index: 999999 !important; position: fixed !important; } .cg-header-section .dropdown-menu, .cg-header-section .sub-menu, .navbar-nav .dropdown-menu { z-index: 9999999 !important; } /* -------------------------------------------------------------------------- Quick Contact Strip (Below Hero) - Seamless Full Width No Borders -------------------------------------------------------------------------- */ div[data-id="sec_petrolera_contact_bar"], .elementor-element-sec_petrolera_contact_bar { padding: 0 !important; margin: 0 !important; border: none !important; background-color: #F8FAFC !important; } div[data-id="sec_petrolera_contact_bar"] > .elementor-container, div[data-id="sec_petrolera_contact_bar"] .elementor-column, div[data-id="sec_petrolera_contact_bar"] .elementor-widget-wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } .baycor-contact-bar-wrap { background-color: #F8FAFC !important; padding: 22px 0 !important; border: none !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; color: #334155 !important; position: relative; z-index: 10; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } .baycor-contact-bar-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } .contact-bar-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; } .contact-bar-divider { width: 1.5px; height: 80px; background: #E2E8F0; } .contact-office-card { display: flex; flex-direction: column; gap: 8px; } .office-title-block { display: flex; flex-direction: column; gap: 2px; } .office-tag { font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #C00000 !important; line-height: 1.2; } .office-name { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 18px !important; font-weight: 800 !important; color: #00467F !important; margin: 0 !important; line-height: 1.3 !important; } .office-details-list { display: flex; flex-direction: column; gap: 6px; } .office-detail-item { display: flex; align-items: center; gap: 10px; color: #475569 !important; font-size: 13.5px; line-height: 1.45; text-decoration: none !important; transition: all 0.25s ease; } .office-detail-item strong { color: #0F172A; } .office-detail-item:hover { color: #C00000 !important; transform: translateX(3px); } .detail-icon { font-size: 15px !important; color: #00467F !important; flex-shrink: 0; width: 16px; text-align: center; transition: transform 0.25s ease, color 0.25s ease; } .office-detail-item:hover .detail-icon { color: #C00000 !important; } .office-contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .person-name-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #475569 !important; line-height: 1.45; } .person-name-row strong { color: #0F172A; } .person-name-row .detail-icon { margin-top: 3px; } @media (max-width: 991px) { .baycor-contact-bar-wrap { padding: 20px 24px !important; } .contact-bar-grid { grid-template-columns: 1fr; gap: 20px; } .contact-bar-divider { width: 100%; height: 1px; background: #E2E8F0; } } @media (max-width: 767px) { .baycor-contact-bar-wrap { padding: 18px 16px !important; } .office-contact-row { flex-direction: column; align-items: flex-start; gap: 6px; } .office-name { font-size: 17px !important; } } /* -------------------------------------------------------------------------- SECTION 0: Top Header & Hero with Video Background -------------------------------------------------------------------------- */ .baycor-petrolera-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } .baycor-petrolera-hero-wrapper { position: relative; z-index: 1 !important; min-height: auto; padding-top: 235px; padding-bottom: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #001f3f; color: #FFFFFF; box-sizing: border-box; } .baycor-hero-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 !important; overflow: hidden; } .baycor-hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; } .baycor-hero-video.desktop-only { display: block; } .baycor-hero-video.mobile-only { display: none; } .baycor-hero-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 25, 50, 0.65) 0%, rgba(0, 25, 50, 0.35) 50%, rgba(0, 15, 30, 0.50) 100%); z-index: 2 !important; pointer-events: none; } .hero-main-content { position: relative; z-index: 3 !important; padding: 0 24px; width: 100%; display: flex; align-items: center; } .hero-split-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; } .hero-text-col { display: flex; flex-direction: column; } .hero-h1-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 42px; font-weight: 800; line-height: 1.2; color: #FFFFFF; margin: 0 0 24px 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-subheadline { font-size: 17px; line-height: 1.65; color: #E2E8F0; margin: 0 0 28px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .hero-quick-features { display: flex; flex-direction: column; gap: 12px; } .hero-feature-item { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; color: #FFFFFF; } .hero-feature-item i { color: #22C55E; font-size: 17px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } .hero-form-col { display: flex; justify-content: flex-end; } .baycor-lp-quote-form { background: #FFFFFF; border-radius: 20px; padding: 32px 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); width: 100%; max-width: 440px; color: #1E293B; box-sizing: border-box; } .quote-form-header { margin-bottom: 20px; } .quote-form-header h3 { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 21px; font-weight: 800; color: #00467F; margin: 0 0 8px 0; line-height: 1.25; } .quote-form-header p { font-size: 13px; color: #64748B; margin: 0; line-height: 1.45; } .quote-form-body { display: flex; flex-direction: column; gap: 14px; } .form-row { display: flex; flex-direction: column; gap: 5px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row label, .form-group label, .baycor-lp-quote-form label { font-size: 12px; font-weight: 700; color: #334155; white-space: nowrap !important; } .form-row input, .form-row select { width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid #CBD5E1; border-radius: 8px; font-size: 13.5px; color: #1E293B; background-color: #F8FAFC; box-sizing: border-box; transition: all 0.25s ease; } .form-row input:focus, .form-row select:focus { outline: none; border-color: #00467F; background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(0, 70, 127, 0.12); } .btn-submit-quote, .baycor-lp-quote-form button[type="submit"], .baycor-lp-quote-form input[type="submit"], .wpcf7-submit.btn-submit-quote { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; height: 52px !important; padding: 10px 14px 10px 22px !important; background-color: #C00000 !important; color: #FFFFFF !important; border: 1.5px solid #C00000 !important; border-radius: 10px !important; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; box-shadow: 0 6px 18px rgba(192, 0, 0, 0.3) !important; -webkit-transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; cursor: pointer !important; box-sizing: border-box !important; margin-top: 8px !important; } .btn-submit-quote:before, .baycor-lp-quote-form button[type="submit"]:before, .baycor-lp-quote-form input[type="submit"]:before, .wpcf7-submit.btn-submit-quote:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; -webkit-transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); background-color: #00467F !important; } .btn-submit-quote .baycor-btn-icon, .baycor-lp-quote-form button[type="submit"] .baycor-btn-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; background: #FFFFFF; color: #C00000; border-radius: 6px; font-size: 15px; -webkit-transition: all 350ms ease; transition: all 350ms ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .btn-submit-quote:hover, .baycor-lp-quote-form button[type="submit"]:hover, .baycor-lp-quote-form input[type="submit"]:hover, .wpcf7-submit.btn-submit-quote:hover { color: #FFFFFF !important; border-color: #00467F !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0, 70, 127, 0.35) !important; } .btn-submit-quote:hover:before, .baycor-lp-quote-form button[type="submit"]:hover:before, .baycor-lp-quote-form input[type="submit"]:hover:before, .wpcf7-submit.btn-submit-quote:hover:before { width: 100% !important; } .btn-submit-quote:hover .baycor-btn-icon, .baycor-lp-quote-form button[type="submit"]:hover .baycor-btn-icon { color: #00467F; background: #FFFFFF; } .quote-wa-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #25D366; text-decoration: none; -webkit-transition: color 250ms ease; transition: color 250ms ease; margin-top: 10px; text-align: center; } .quote-wa-link:hover { color: #128C7E; text-decoration: underline; } /* -------------------------------------------------------------------------- SECTION 1: Sub-Hero Specialized Overview Banner -------------------------------------------------------------------------- */ .baycor-petrolera-subhero-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 85px 0; color: #FFFFFF; position: relative; background-color: #002244; } .subhero-inner { max-width: 960px; margin: 0 auto; text-align: center; } .subhero-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 32px; font-weight: 800; line-height: 1.35; color: #FFFFFF; margin: 0 0 18px 0; } .subhero-text { font-size: 16.5px; line-height: 1.7; color: #E2E8F0; margin: 0; } /* -------------------------------------------------------------------------- SECTION 2: Problem / Industry Challenge & Interactive Carousel -------------------------------------------------------------------------- */ .baycor-petrolera-challenge-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 95px 0 85px; background-color: #FFFFFF; position: relative; } .oil-ops-split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: stretch; margin-bottom: 60px; } .oil-ops-left-col { display: flex; flex-direction: column; justify-content: center; } .challenge-subtitle { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #C00000; text-transform: uppercase; margin-bottom: 12px; } .oil-ops-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 32px; font-weight: 800; line-height: 1.25; margin: 0 0 24px 0; } .oil-ops-title-red { color: #C00000; display: block; } .oil-ops-title-blue { color: #00467F; display: block; } .oil-ops-checklist { display: flex; flex-direction: column; gap: 12px; } .oil-ops-item { display: flex; align-items: center; gap: 14px; background: #FFFFFF; border: 1.5px solid #E2E8F0; padding: 13px 18px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 70, 127, 0.04); transition: all 0.25s ease; } .oil-ops-item:hover { border-color: #00467F; transform: translateX(6px); box-shadow: 0 8px 20px rgba(0, 70, 127, 0.08); } .oil-ops-item-icon { font-size: 20px; color: #16A34A; display: flex; align-items: center; justify-content: center; min-width: 24px; } .oil-ops-item-text { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 15px; font-weight: 700; color: #00467F; line-height: 1.4; } .oil-ops-right-col { display: flex; flex-direction: column; width: 100%; height: 100%; } /* Bulletproof Image Carousel */ .baycor-oil-carousel-box { position: relative; width: 100%; height: 100%; min-height: 440px; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 70, 127, 0.14); border: 2px solid #E2E8F0; background: #001f3f; display: flex; flex-direction: column; } .baycor-oil-slides { position: relative; width: 100%; height: 100%; flex-grow: 1; overflow: hidden; } .baycor-oil-slide { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transform: scale(1.02); overflow: hidden; } .baycor-oil-slide.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; } .baycor-oil-img { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; display: block !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .baycor-oil-caption { position: absolute; bottom: 26px; left: 20px; background: rgba(0, 31, 63, 0.85); color: #FFFFFF; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(4px); z-index: 5; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .baycor-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #00467F; border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 10; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: all 0.25s ease; } .baycor-carousel-nav:hover { background: #C00000; color: #FFFFFF; transform: translateY(-50%) scale(1.08); } .baycor-carousel-nav.prev { left: 14px; } .baycor-carousel-nav.next { right: 14px; } .baycor-carousel-dots { position: absolute; bottom: 10px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 10; } .baycor-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: all 0.25s ease; } .baycor-dot.active { background: #C00000; width: 22px; border-radius: 10px; } /* Certifications Bar */ .challenge-certifications-bar { background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 18px; padding: 32px 28px; text-align: center; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.04); } .cert-bar-title { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; color: #00467F; text-transform: uppercase; margin: 0 0 24px 0; } .cert-seals-flex { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: start; justify-items: center; width: 100%; box-sizing: border-box; } .cert-seal-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; max-width: 100%; text-align: center; } .cert-seal-img-wrap { width: 100%; height: 75px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .cert-seal-img-wrap img { max-height: 70px; max-width: 90%; width: auto; height: auto; object-fit: contain; filter: grayscale(0%); transition: all 0.25s ease; } .cert-seal-item:hover .cert-seal-img-wrap img { transform: translateY(-4px) scale(1.06); } .cert-seal-item span { font-size: 12px; font-weight: 700; color: #00467F; text-align: center; line-height: 1.3; display: block; width: 100%; } /* -------------------------------------------------------------------------- SECTION 3: 30+ Years Experience Banner with Animated Counter -------------------------------------------------------------------------- */ .baycor-petrolera-exp-wrap { background-color: #f8fafc; padding: 55px 0; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; position: relative; } .exp-inner-box { display: flex; align-items: center; gap: 40px; max-width: 1100px; margin: 0 auto; background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 18px; padding: 32px 42px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05); } .exp-counter-col { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 220px; text-align: center; } .exp-number-wrap { display: flex; align-items: baseline; justify-content: center; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); line-height: 1; margin-bottom: 6px; } .exp-number-count { font-size: 72px; font-weight: 900; color: #C00000; letter-spacing: -2px; font-variant-numeric: tabular-nums; } .exp-number-plus { font-size: 52px; font-weight: 900; color: #00467F; margin-left: 2px; } .exp-number-label { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #00467F; text-transform: uppercase; white-space: nowrap; } .exp-divider { width: 2px; height: 80px; background: linear-gradient(to bottom, transparent, #CBD5E1, transparent); flex-shrink: 0; } .exp-content { flex: 1; } .exp-text { font-size: 17.5px; line-height: 1.65; color: #334155; margin: 0; } .exp-text strong { color: #00467F; font-weight: 800; } /* -------------------------------------------------------------------------- SECTION 4: Multimodal Transport (3 Interactive Cards) -------------------------------------------------------------------------- */ .baycor-petrolera-multimodal-wrap { padding: 95px 0; background: #FFFFFF; } .multimodal-header { max-width: 900px; margin: 0 auto 55px; } .multimodal-subtitle { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #C00000; text-transform: uppercase; margin-bottom: 12px; } .multimodal-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.3; margin: 0; } .multimodal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .multimodal-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.06); display: flex; flex-direction: column; transition: all 0.35s ease; } .multimodal-card:hover { transform: translateY(-8px); border-color: #00467F; box-shadow: 0 16px 36px rgba(0, 70, 127, 0.14); } .multi-card-img-wrap { position: relative; height: 220px; overflow: hidden; } .multi-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .multimodal-card:hover .multi-card-img { transform: scale(1.06); } .multi-card-pills { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .multi-card-pills span { background: rgba(0, 31, 63, 0.85); color: #FFFFFF; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); } .multi-card-body { padding: 28px 24px; display: flex; flex-direction: column; flex-grow: 1; } .multi-card-icon { width: 44px; height: 44px; border-radius: 10px; background: #DFF6FF; color: #C00000; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; } .multi-card-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 20px; font-weight: 800; color: #00467F; margin: 0 0 12px 0; line-height: 1.3; } .multi-card-text { font-size: 14.5px; line-height: 1.65; color: #64748B; margin: 0 0 22px 0; flex-grow: 1; } .multi-card-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 18px; background-color: #00467F; color: #FFFFFF !important; border: 1.5px solid #00467F; border-radius: 8px; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 14px; font-weight: 700; text-decoration: none !important; position: relative; overflow: hidden; z-index: 1; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99); box-shadow: 0 4px 12px rgba(0, 70, 127, 0.25); cursor: pointer; } .multi-card-btn:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); background-color: #C00000; } .multi-card-btn:hover { color: #FFFFFF !important; border-color: #C00000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(192, 0, 0, 0.35); } .multi-card-btn:hover:before { width: 100%; } .multi-card-btn .baycor-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; background-color: #C00000; color: #FFFFFF; border-radius: 6px; font-size: 15px; transition: all 350ms ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); } .multi-card-btn .baycor-btn-icon i { color: #FFFFFF; transition: all 350ms ease; } .multi-card-btn:hover .baycor-btn-icon { background-color: #FFFFFF; color: #C00000; transform: scale(1.05); } .multi-card-btn:hover .baycor-btn-icon i { color: #C00000; } /* -------------------------------------------------------------------------- SECTION 5: Strategic Hubs (Houston + Venezuela) -------------------------------------------------------------------------- */ .baycor-petrolera-hubs-wrap { background-color: #F4F7FA; background-image: url('https://baycor1.local/wp-content/uploads/petrolera/Frame-1-3.png'); background-size: contain; background-position: top right; background-repeat: no-repeat; background-blend-mode: multiply; padding: 95px 0; color: #1E293B; position: relative; } .hubs-split-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: center; } .hubs-graphic-col { display: flex; justify-content: center; align-items: center; } .hubs-img { width: 100%; max-width: 440px; height: auto; object-fit: contain; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 12px 28px rgba(0, 70, 127, 0.12)); } .hubs-subtitle { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #C00000; text-transform: uppercase; margin-bottom: 12px; } .hubs-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.25; margin: 0 0 18px 0; } .hubs-desc { font-size: 16px; line-height: 1.7; color: #475569; margin: 0 0 24px 0; } .hubs-desc strong { color: #00467F; font-weight: 700; } .hubs-points { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; } .hubs-pt { display: flex; align-items: center; gap: 16px; font-size: 15px; line-height: 1.55; color: #334155; } .hubs-pt strong { color: #00467F; } .hubs-pt i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; background-color: #00467F; color: #FFFFFF !important; border-radius: 50%; font-size: 17px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 70, 127, 0.22); transition: all 0.3s ease; } .hubs-pt:hover i { background-color: #C00000; transform: scale(1.08); box-shadow: 0 6px 16px rgba(192, 0, 0, 0.3); } .baycor-lp-btn-wa-solid { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: fit-content !important; max-width: fit-content !important; align-self: flex-start !important; padding: 10px 14px 10px 24px !important; background-color: #00467F !important; color: #FFFFFF !important; border: 1.5px solid #00467F !important; border-radius: 8px !important; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; box-shadow: 0 6px 18px rgba(0, 70, 127, 0.25) !important; cursor: pointer !important; } .baycor-lp-btn-wa-solid:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); background-color: #C00000 !important; } .baycor-lp-btn-wa-solid:hover { color: #FFFFFF !important; border-color: #C00000 !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(192, 0, 0, 0.35) !important; } .baycor-lp-btn-wa-solid:hover:before { width: 100% !important; } .baycor-lp-btn-wa-solid .baycor-btn-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; background-color: #C00000 !important; color: #FFFFFF !important; border-radius: 6px !important; font-size: 18px !important; transition: all 350ms ease !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; } .baycor-lp-btn-wa-solid .baycor-btn-icon i { color: #FFFFFF !important; transition: all 350ms ease !important; } .baycor-lp-btn-wa-solid:hover .baycor-btn-icon { background-color: #FFFFFF !important; color: #C00000 !important; transform: scale(1.05) !important; } .baycor-lp-btn-wa-solid:hover .baycor-btn-icon i { color: #C00000 !important; } /* -------------------------------------------------------------------------- SECTION 6: Tracecoo Technology Platform & Video Modal -------------------------------------------------------------------------- */ .baycor-petrolera-tracecoo-wrap { padding: 95px 0; background: #FFFFFF; } .tracecoo-header { max-width: 860px; margin: 0 auto 35px; text-align: center; } .tracecoo-brand-logo { max-width: 220px; width: 100%; height: auto; margin: 0 auto 20px auto; display: block; } .tracecoo-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.25; margin: 0 0 16px 0; text-align: center; } .tracecoo-desc { font-size: 16.5px; line-height: 1.65; color: #475569; max-width: 820px; margin: 0 auto 28px auto; text-align: center; } .tracecoo-btn-wrap { display: flex; justify-content: center; margin-bottom: 30px; } .tracecoo-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: #C00000; color: #FFFFFF; border: none; font-size: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 30px rgba(223, 17, 25, 0.4); transition: all 0.3s ease; } .tracecoo-play-btn:hover { background: #00467F; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 14px 36px rgba(0, 70, 127, 0.4); } .tracecoo-cta-row { margin-top: 36px; text-align: center; } .baycor-lp-btn-outline-blue { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border-radius: 30px; border: 2px solid #00467F; background: transparent; color: #00467F !important; font-size: 15px; font-weight: 700; text-decoration: none !important; transition: all 0.3s ease; } .baycor-lp-btn-outline-blue:hover { background: #00467F; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 70, 127, 0.2); } /* Modal Popup */ .baycor-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 15, 35, 0.85); backdrop-filter: blur(8px); z-index: 99999; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .baycor-modal-overlay.is-active { display: flex; } .baycor-modal-container { position: relative; width: 100%; max-width: 900px; background: #000000; border-radius: 16px; overflow: hidden; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); } .baycor-modal-close { position: absolute; top: 12px; right: 16px; background: rgba(255, 255, 255, 0.2); color: #FFFFFF; border: none; font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .baycor-modal-close:hover { background: #C00000; } .baycor-modal-video-frame { position: relative; padding-bottom: 56.25%; height: 0; } .baycor-modal-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------------------------------------------------------------------------- SECTION 7: KPI & Reporting Standards -------------------------------------------------------------------------- */ .baycor-petrolera-reports-wrap { background-size: cover; background-position: top right; background-repeat: no-repeat; padding: 95px 0; background-color: #f8fafc; } .reports-header { max-width: 860px; margin: 0 auto 50px; } .reports-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.3; margin: 0 0 16px 0; } .reports-desc { font-size: 16px; line-height: 1.65; color: #475569; margin: 0; } .reports-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .reports-main-graphic { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 70, 127, 0.08); } .reports-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .report-badge-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: 24px 20px; box-shadow: 0 4px 16px rgba(0, 70, 127, 0.04); text-align: center; transition: all 0.3s ease; } .report-badge-card:hover { transform: translateY(-4px); border-color: #00467F; box-shadow: 0 10px 24px rgba(0, 70, 127, 0.1); } .report-badge-card img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 12px; } .report-badge-card h4 { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 16px; font-weight: 800; color: #00467F; margin: 0 0 8px 0; } .report-badge-card p { font-size: 13px; line-height: 1.5; color: #64748B; margin: 0; } /* -------------------------------------------------------------------------- SECTION 8: Operational Liaison -------------------------------------------------------------------------- */ .baycor-petrolera-liaison-wrap { padding: 95px 0; background: #FFFFFF; } .liaison-header { max-width: 860px; margin: 0 auto 40px; } .liaison-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.3; margin: 0 0 16px 0; } .liaison-desc { font-size: 16px; line-height: 1.65; color: #475569; margin: 0; } .liaison-img { width: 100%; max-width: 1080px; height: auto; border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 70, 127, 0.08); } /* -------------------------------------------------------------------------- SECTION 9: Integrated Strategic Partner -------------------------------------------------------------------------- */ .baycor-petrolera-partner-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 110px 0; background-color: #002B49; color: #FFFFFF; } .partner-split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; } .partner-brand-logo { height: 48px; width: auto; margin-bottom: 20px; } .partner-subtitle { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #38BDF8; text-transform: uppercase; margin-bottom: 10px; } .partner-title { display: inline-block; background-color: #C00000 !important; color: #FFFFFF !important; padding: 14px 22px; border-radius: 10px; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 30px; font-weight: 800; line-height: 1.35; margin: 0 0 20px 0; box-shadow: 0 8px 24px rgba(192, 0, 0, 0.4); } .partner-desc { font-size: 16.5px; line-height: 1.7; color: #E2E8F0; margin: 0 0 30px 0; } /* -------------------------------------------------------------------------- SECTION 10: FAQ Accordion -------------------------------------------------------------------------- */ .baycor-petrolera-faq-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 95px 0; background-color: #FFFFFF; } .faq-header { max-width: 860px; margin: 0 auto 50px; } .faq-subtitle { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #C00000; text-transform: uppercase; margin-bottom: 12px; } .faq-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 34px; font-size: 34px; font-weight: 800; color: #00467F; line-height: 1.3; margin: 0 0 16px 0; } .faq-desc { font-size: 16px; line-height: 1.65; color: #475569; margin: 0; } /* -------------------------------------------------------------------------- SECTION 10: FAQ Accordion (Native Elementor Accordion Widget) -------------------------------------------------------------------------- */ #faq-petrolera .elementor-widget-accordion, #faq-petrolera .elementor-accordion, #faq-oil-gas .elementor-widget-accordion, #faq-oil-gas .elementor-accordion, .elementor-element-sec_petrolera_faq .elementor-widget-accordion, .elementor-element-sec_petrolera_faq .elementor-accordion, .elementor-2507 .elementor-widget-accordion, .elementor-2507 .elementor-accordion, .elementor-2643 .elementor-widget-accordion, .elementor-2643 .elementor-accordion { display: block !important; max-width: 950px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; text-align: left !important; box-sizing: border-box !important; } #faq-petrolera .elementor-accordion .elementor-accordion-item, #faq-oil-gas .elementor-accordion .elementor-accordion-item, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-item, .elementor-2507 .elementor-accordion .elementor-accordion-item, .elementor-2643 .elementor-accordion .elementor-accordion-item { border: 1.5px solid #E2E8F0 !important; border-radius: 12px !important; margin-bottom: 16px !important; overflow: hidden !important; box-shadow: 0 4px 16px rgba(0, 45, 82, 0.04) !important; transition: all 0.3s ease !important; background: #F8FAFC !important; width: 100% !important; box-sizing: border-box !important; } #faq-petrolera .elementor-accordion .elementor-accordion-item:last-child, #faq-oil-gas .elementor-accordion .elementor-accordion-item:last-child, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-item:last-child, .elementor-2507 .elementor-accordion .elementor-accordion-item:last-child, .elementor-2643 .elementor-accordion .elementor-accordion-item:last-child { margin-bottom: 0 !important; } #faq-petrolera .elementor-accordion .elementor-accordion-item:hover, #faq-oil-gas .elementor-accordion .elementor-accordion-item:hover, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-item:hover, .elementor-2507 .elementor-accordion .elementor-accordion-item:hover, .elementor-2643 .elementor-accordion .elementor-accordion-item:hover { border-color: #00467F !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.08) !important; } #faq-petrolera .elementor-accordion .elementor-tab-title, #faq-oil-gas .elementor-accordion .elementor-tab-title, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title, .elementor-2507 .elementor-accordion .elementor-tab-title, .elementor-2643 .elementor-accordion .elementor-tab-title { background: #FFFFFF !important; border: none !important; padding: 18px 24px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; transition: all 0.3s ease !important; cursor: pointer !important; margin: 0 !important; } #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active { background: #FFFFFF !important; border-bottom: 1.5px solid #E2E8F0 !important; } /* Accordion Title Text */ #faq-petrolera .elementor-accordion .elementor-tab-title, #faq-petrolera .elementor-accordion .elementor-tab-title h3, #faq-petrolera .elementor-accordion .elementor-accordion-title, #faq-oil-gas .elementor-accordion .elementor-tab-title, #faq-oil-gas .elementor-accordion .elementor-tab-title h3, #faq-oil-gas .elementor-accordion .elementor-accordion-title, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title h3, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-title, .elementor-2507 .elementor-accordion .elementor-tab-title, .elementor-2507 .elementor-accordion .elementor-tab-title h3, .elementor-2507 .elementor-accordion .elementor-accordion-title, .elementor-2643 .elementor-accordion .elementor-tab-title, .elementor-2643 .elementor-accordion .elementor-tab-title h3, .elementor-2643 .elementor-accordion .elementor-accordion-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 16px !important; font-weight: 700 !important; color: #00467F !important; text-decoration: none !important; margin: 0 !important; text-align: left !important; flex: 1 1 auto !important; line-height: 1.4 !important; letter-spacing: normal !important; transition: color 0.25s ease !important; } /* Red title when active */ #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title, #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active h3, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active h3, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active h3, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active h3, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active h3 { color: #C00000 !important; } /* Accordion Icon Container (Left side) */ #faq-petrolera .elementor-accordion .elementor-tab-title .elementor-accordion-icon, #faq-oil-gas .elementor-accordion .elementor-tab-title .elementor-accordion-icon, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon, .elementor-2507 .elementor-accordion .elementor-tab-title .elementor-accordion-icon, .elementor-2643 .elementor-accordion .elementor-tab-title .elementor-accordion-icon { color: #C00000 !important; font-size: 14px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #DFF6FF !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin: 0 16px 0 0 !important; transition: all 0.25s ease !important; } #faq-petrolera .elementor-accordion .elementor-accordion-icon i, #faq-oil-gas .elementor-accordion .elementor-accordion-icon i, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-icon i, .elementor-2507 .elementor-accordion .elementor-accordion-icon i, .elementor-2643 .elementor-accordion .elementor-accordion-icon i, #faq-petrolera .elementor-accordion .elementor-accordion-icon svg, #faq-oil-gas .elementor-accordion .elementor-accordion-icon svg, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-icon svg, .elementor-2507 .elementor-accordion .elementor-accordion-icon svg, .elementor-2643 .elementor-accordion .elementor-accordion-icon svg { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, sans-serif !important; font-weight: 900 !important; font-style: normal !important; line-height: 1 !important; } /* Icon visibility toggle */ #faq-petrolera .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-opened, #faq-oil-gas .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-2507 .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-2643 .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-opened { display: none !important; } #faq-petrolera .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-closed, #faq-oil-gas .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-2507 .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-2643 .elementor-accordion .elementor-accordion-icon .elementor-accordion-icon-closed { display: inline-flex !important; } #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed { display: none !important; } #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-opened, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-opened, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-opened { display: inline-flex !important; } /* Active Icon (Solid Red with white minus) */ #faq-petrolera .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon, #faq-oil-gas .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon, .elementor-2507 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon, .elementor-2643 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon { background: #C00000 !important; color: #FFFFFF !important; } #faq-petrolera .elementor-accordion .elementor-tab-content, #faq-oil-gas .elementor-accordion .elementor-tab-content, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-content, .elementor-2507 .elementor-accordion .elementor-tab-content, .elementor-2643 .elementor-accordion .elementor-tab-content { background: #FFFFFF !important; border: none !important; padding: 22px 26px 26px 26px !important; box-sizing: border-box !important; font-size: 15px !important; line-height: 1.75 !important; color: #475569 !important; text-align: left !important; overflow: hidden !important; } @media (max-width: 767px) { #faq-petrolera .elementor-accordion .elementor-tab-title, #faq-oil-gas .elementor-accordion .elementor-tab-title, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-title, .elementor-2507 .elementor-accordion .elementor-tab-title, .elementor-2643 .elementor-accordion .elementor-tab-title { padding: 16px 18px !important; font-size: 15px !important; } #faq-petrolera .elementor-accordion .elementor-tab-content, #faq-oil-gas .elementor-accordion .elementor-tab-content, .elementor-element-sec_petrolera_faq .elementor-accordion .elementor-tab-content, .elementor-2507 .elementor-accordion .elementor-tab-content, .elementor-2643 .elementor-accordion .elementor-tab-content { padding: 16px 18px 20px !important; font-size: 14px !important; } } /* Prevent SplitText character truncation / clipping on landing page subtitles */ .baycor-petrolera-container .subtitle, .baycor-petrolera-container .cg-sub-anim, .baycor-petrolera-container .cg-sub-anim span, .baycor-petrolera-container .cg-sub-anim div { opacity: 1 !important; transform: none !important; visibility: visible !important; display: inline-block !important; } /* -------------------------------------------------------------------------- SECTION 11: Conversion Footer -------------------------------------------------------------------------- */ .baycor-petrolera-footer-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 120px 0 0; background-color: #001A33; color: #FFFFFF; } .footer-flex { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr; gap: 40px; padding-bottom: 80px; } .footer-logo-img { height: 48px; width: auto; margin-bottom: 18px; } .footer-brand-text { font-size: 14px; line-height: 1.65; color: #94A3B8; margin: 0 0 20px 0; } .footer-social-links { display: flex; gap: 12px; } .footer-social-links a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none !important; transition: all 0.25s ease; } .footer-social-links a:hover { background: #C00000; transform: translateY(-2px); } .footer-heading { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 14px; font-weight: 800; letter-spacing: 1px; color: #38BDF8; text-transform: uppercase; margin: 0 0 20px 0; } .footer-col-contact p { font-size: 14px; line-height: 1.6; color: #CBD5E1; margin: 0 0 12px 0; display: flex; align-items: flex-start; gap: 10px; } .footer-col-contact p i { color: #C00000; margin-top: 3px; } .footer-col-cta p { font-size: 14px; line-height: 1.6; color: #CBD5E1; margin: 0 0 18px 0; } .baycor-lp-btn-footer-wa { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #FFFFFF !important; font-size: 14px; font-weight: 700; padding: 12px 22px; border-radius: 30px; text-decoration: none !important; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3); transition: all 0.25s ease; } .baycor-lp-btn-footer-wa:hover { background: #1eb954; transform: translateY(-2px); } .footer-bottom-bar { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 24px 0; background: rgba(0, 15, 30, 0.5); } .bottom-flex { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #64748B; } .bottom-flex p { margin: 0; } /* -------------------------------------------------------------------------- RESPONSIVE ADAPTATIONS (Desktop, Tablet, Mobile) -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .baycor-petrolera-hero-wrapper { padding-top: 155px; padding-bottom: 55px; } .hero-split-grid { grid-template-columns: 1fr; gap: 32px; } .hero-text-col { text-align: center; max-width: 760px; margin: 0 auto; } .hero-main-title { font-size: 30px; } .hero-quick-features { align-items: center; } .hero-quote-card { max-width: 500px; margin: 0 auto; text-align: left; } .oil-ops-split-grid { grid-template-columns: 1fr; gap: 36px; } .oil-ops-title { font-size: 28px; text-align: center; } .challenge-subtitle { text-align: center; display: block; } .baycor-oil-carousel-box { min-height: 360px; height: 360px; } .challenge-cards-grid, .multimodal-grid-3 { grid-template-columns: 1fr; gap: 24px; } .hubs-split-grid, .reports-split-layout, .partner-split-grid { grid-template-columns: 1fr; gap: 36px; } .footer-flex { grid-template-columns: 1fr 1fr; gap: 36px; } .cert-seals-flex { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; } .topbar-center { display: none; } } @media (max-width: 767px) { .baycor-hero-video.desktop-only { display: none; } .baycor-hero-video.mobile-only { display: block; } .baycor-petrolera-hero-wrapper { padding-top: 130px; padding-bottom: 45px; } .hero-main-content { padding: 0 16px; } .hero-main-title { font-size: 22px; line-height: 1.3; text-align: center; margin-bottom: 12px; } .hero-main-desc { font-size: 14px; line-height: 1.55; text-align: center; margin-bottom: 16px; } .hero-quick-features { align-items: flex-start; text-align: left; gap: 8px; font-size: 13px; } .oil-ops-title { font-size: 22px !important; text-align: center; } .oil-ops-item { padding: 12px 14px; gap: 10px; } .oil-ops-item-text { font-size: 14px; } .baycor-oil-carousel-box { min-height: 250px; height: 250px; } .cert-seals-flex { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .subhero-title, .challenge-title, .multimodal-title, .hubs-title, .tracecoo-title, .reports-title, .liaison-title, .partner-title, .faq-title { font-size: 24px !important; } .hero-quote-card { padding: 20px 16px; border-radius: 14px; max-width: 100%; } .form-row-2 { grid-template-columns: 1fr; gap: 0; } .reports-cards-grid { grid-template-columns: 1fr; } .exp-inner-box { flex-direction: column; text-align: center; padding: 24px 18px; gap: 16px; } .exp-divider { width: 60px; height: 2px; background: linear-gradient(to right, transparent, #CBD5E1, transparent); } .exp-number-count { font-size: 54px; } .exp-number-plus { font-size: 38px; } .exp-text { font-size: 15px; } .footer-flex { grid-template-columns: 1fr; gap: 30px; } .bottom-flex { flex-direction: column; text-align: center; gap: 8px; } .baycor-petrolera-subhero-wrap, .baycor-petrolera-challenge-wrap, .baycor-petrolera-multimodal-wrap, .baycor-petrolera-hubs-wrap, .baycor-petrolera-tracecoo-wrap, .baycor-petrolera-reports-wrap, .baycor-petrolera-liaison-wrap, .baycor-petrolera-partner-wrap, .baycor-petrolera-faq-wrap { padding: 60px 0 !important; } } /* -------------------------------------------------------------------------- Blog Post Cards Standardized Styling (#f8fafc) -------------------------------------------------------------------------- */ .cg-blog1-item { background-color: #f8fafc !important; border: 1.5px solid #E2E8F0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 8px 24px rgba(0, 70, 127, 0.04) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cg-blog1-item:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 36px rgba(0, 70, 127, 0.1) !important; border-color: #CBD5E1 !important; } .cg-blog1-item .item-text { background-color: #f8fafc !important; padding: 34px 26px 26px !important; } .cg-blog1-item .item-text .blog_title a { color: #00467F !important; transition: color 0.25s ease !important; } .cg-blog1-item .item-text .blog_title a:hover { color: #C00000 !important; } .cg-blog1-item .item-text .blog_more { color: #C00000 !important; font-weight: 700 !important; } .cg-blog1-item .item-text .blog_more:before { background-color: #C00000 !important; } /* Baycor Blog Author Badge (Official Avatar & Clean Single-Line Pill) */ .cg-blog1-item .item-text .blog-author { background-color: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 50px !important; box-shadow: 0 2px 8px rgba(0, 45, 90, 0.04) !important; color: #334155 !important; padding: 8px 18px !important; justify-content: center !important; align-items: center !important; gap: 8px !important; display: flex !important; width: fit-content !important; margin: 22px auto 0 auto !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .cg-blog1-item .item-text .blog-author:hover { background-color: #FFFFFF !important; border-color: #CBD5E1 !important; box-shadow: 0 4px 14px rgba(0, 45, 90, 0.08) !important; transform: translateY(-1px) !important; } /* Eliminate theme red separator dot */ .cg-blog1-item .item-text .blog-author:before, .cg-blog1-item .item-text .blog-author::before { display: none !important; content: none !important; } .cg-blog1-item .item-text .blog-author a, .cg-blog1-item .item-text .blog-author .blog-author-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; color: #334155 !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0.1px !important; } .cg-blog1-item .item-text .blog-author a:hover { color: #00467F !important; } .cg-blog1-item .item-text .blog-author .baycor-author-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; border-radius: 50% !important; object-fit: contain !important; background-color: #FFFFFF !important; border: 1.5px solid #00467F !important; box-shadow: 0 1px 4px rgba(0, 70, 127, 0.18) !important; padding: 2px !important; box-sizing: border-box !important; flex-shrink: 0 !important; display: inline-block !important; } .cg-blog1-item .item-text .blog-author i.fa-user-circle, .cg-blog1-item .item-text .blog-author i.fa-comment, .cg-blog1-item .item-text .blog-author a[href*="#respond"], .cg-blog1-item .item-text .blog-author a:has(.fa-comment) { display: none !important; } .tracecoo-brand-logo, .tracecoo-header .tracecoo-brand-logo, .tracecoo-header img.tracecoo-brand-logo, #tracecoo-petrolera .tracecoo-brand-logo { max-width: 300px !important; width: 100% !important; height: auto !important; margin: 0 auto 20px auto !important; display: block !important; } .tracecoo-btn-wrap { display: flex; justify-content: center; margin-top: 20px; } .baycor-tracecoo-hero-showcase-wrap { width: 100%; max-width: 1140px; margin: 0 auto; position: relative; box-sizing: border-box; } .baycor-mac-stage-outer { position: relative; width: 100%; max-width: 1020px; margin: 40px auto 0 auto; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .baycor-mac-ambient-glow { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); width: 85%; height: 75%; background: radial-gradient(circle, rgba(56, 189, 248, 0.24) 0%, rgba(192, 0, 0, 0.09) 45%, rgba(255, 255, 255, 0) 75%); filter: blur(50px); -webkit-filter: blur(50px); pointer-events: none; z-index: 0; } .baycor-mac-stage-container { position: relative; z-index: 1; width: 100%; perspective: 1500px; display: flex; justify-content: center; align-items: center; } .baycor-mac-device-wrap { position: relative; width: 100%; max-width: 980px; display: flex; justify-content: center; align-items: center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } .baycor-mac-device-wrap:hover { transform: translateY(-4px) scale(1.01); } .baycor-mac-bezel-frame { position: relative; z-index: 3; width: 100%; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 25px 50px rgba(0, 45, 82, 0.18)); } .baycor-mac-screen-viewport { position: absolute !important; top: 5.6% !important; left: 10.7% !important; width: 78.6% !important; height: 84.4% !important; right: auto !important; bottom: auto !important; z-index: 1 !important; border-radius: 4px !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; background-color: #0b021a !important; padding: 0 !important; } .baycor-mac-wallpaper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; z-index: 1 !important; display: block !important; pointer-events: none; } .baycor-mac-app-zoom-wrap { position: relative !important; z-index: 2 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform-origin: center center; will-change: transform; } .baycor-mac-dashboard-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 0% !important; display: block !important; border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .baycor-mac-floating-badge { position: absolute; z-index: 5; width: 38%; max-width: 380px; height: auto; pointer-events: auto; will-change: transform; filter: drop-shadow(0 16px 32px rgba(0, 45, 82, 0.16)); transition: transform 0.3s ease; } .baycor-mac-float-top-right { top: -4%; right: -2%; animation: floatNotificationTop 4.5s ease-in-out infinite alternate; } .baycor-mac-float-bottom-left { bottom: -4%; left: -2%; animation: floatNotificationBottom 5s ease-in-out infinite alternate; } .baycor-mac-floating-badge:hover { transform: scale(1.05) !important; } @keyframes floatNotificationTop { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(-12px) rotate(0.6deg); } } @keyframes floatNotificationBottom { 0% { transform: translateY(0px) rotate(0deg); } 100% { transform: translateY(10px) rotate(-0.6deg); } } .reports-header { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1100px; margin: 0 auto 50px; text-align: left; } .reports-header-text { flex: 1; } .reports-header-badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .reports-header-icon { width: 140px; height: auto; max-width: 140px; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 70, 127, 0.15)); transition: transform 0.4s ease; } .reports-header-icon:hover { transform: scale(1.08) rotate(3deg); } .reports-title span, .reports-title-red { color: #C00000 !important; } .reports-logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; } .report-logo-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: 18px 16px; display: flex; align-items: center; justify-content: center; height: 80px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } .report-logo-card:hover { border-color: #00467F; transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 70, 127, 0.1); } .report-logo-card img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; } .report-logo-card:hover img { transform: scale(1.08); } .logo-slb img, img.logo-slb { max-height: 40px !important; } .logo-halliburton img, img.logo-halliburton { max-height: 42px !important; } .logo-chevron img, img.logo-chevron { max-height: 52px !important; } .logo-repsol img, img.logo-repsol { max-height: 48px !important; } .liaison-title span, .liaison-title-red { color: #C00000 !important; } .liaison-img-container { position: relative; display: inline-block; cursor: zoom-in; border-radius: 0; overflow: visible; box-shadow: none !important; transition: all 0.3s ease; max-width: 100%; } .liaison-img-container:hover { transform: none; box-shadow: none !important; } .liaison-img { width: 100%; max-width: 1080px; height: auto; display: block; box-shadow: none !important; border-radius: 0 !important; transition: opacity 0.3s ease; } .liaison-img-container:hover .liaison-img { transform: none; opacity: 0.95; } .liaison-zoom-badge { position: absolute; bottom: 20px; right: 20px; background: rgba(0, 70, 127, 0.9); color: #FFFFFF; padding: 8px 18px; border-radius: 30px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(4px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: all 0.3s ease; pointer-events: none; } .liaison-img-container:hover .liaison-zoom-badge { background: #C00000; transform: scale(1.06); } /* Fullscreen Interactive Zoom Lightbox Modal */ .baycor-zoom-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(4, 15, 30, 0.96) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; z-index: 9999999 !important; display: flex !important; flex-direction: column !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .baycor-zoom-modal.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .zoom-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px; background: rgba(0, 26, 51, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.12); z-index: 10; flex-shrink: 0; } .zoom-modal-title { color: #FFFFFF; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; } .zoom-modal-toolbar { display: flex; align-items: center; gap: 10px; } .zoom-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: #FFFFFF; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; transition: all 0.2s ease; } .zoom-btn:hover { background: #00467F; border-color: #38BDF8; color: #FFFFFF; transform: scale(1.08); } .zoom-btn.close-btn { background: #C00000; border-color: #C00000; margin-left: 8px; } .zoom-btn.close-btn:hover { background: #E60000; transform: scale(1.1); } .zoom-level { color: #38BDF8; font-family: var(--cg-heading, Montserrat, monospace); font-size: 13.5px; font-weight: 700; min-width: 54px; text-align: center; background: rgba(0, 0, 0, 0.35); padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); } .zoom-modal-viewport { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; -webkit-user-select: none; } .zoom-modal-viewport.is-dragging { cursor: grabbing; } .zoom-image-wrapper { transform-origin: center center; transition: transform 0.15s ease-out; display: inline-block; will-change: transform; } .zoom-image-wrapper img { max-width: 90vw; max-height: 80vh; object-fit: contain; display: block; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); border-radius: 8px; pointer-events: none; } .zoom-modal-hint { padding: 10px 20px; text-align: center; background: rgba(0, 26, 51, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: #94A3B8; flex-shrink: 0; } .zoom-modal-hint i { color: #38BDF8; margin-right: 6px; } .partner-title span, .partner-title-blue, .partner-title-white { color: #00467F; font-weight: 800; } .baycor-lp-btn-partner { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: fit-content !important; max-width: fit-content !important; padding: 10px 14px 10px 24px !important; background-color: #C00000 !important; color: #FFFFFF !important; border: 1.5px solid #C00000 !important; border-radius: 8px !important; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; box-shadow: 0 6px 18px rgba(192, 0, 0, 0.35) !important; cursor: pointer !important; } .baycor-lp-btn-partner:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99); background-color: #00467F !important; } .baycor-lp-btn-partner:hover { color: #FFFFFF !important; border-color: #00467F !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0, 70, 127, 0.45) !important; } .baycor-lp-btn-partner:hover:before { width: 100% !important; } .baycor-lp-btn-partner .baycor-btn-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; background-color: #FFFFFF !important; color: #C00000 !important; border-radius: 6px !important; font-size: 18px !important; transition: all 350ms ease !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; } .baycor-lp-btn-partner .baycor-btn-icon i { color: #C00000 !important; transition: all 350ms ease !important; } .baycor-lp-btn-partner:hover .baycor-btn-icon { background-color: #FFFFFF !important; color: #00467F !important; transform: scale(1.05) !important; } .baycor-lp-btn-partner:hover .baycor-btn-icon i { color: #00467F !important; } .faq-title span, .faq-title-red { color: #C00000 !important; font-weight: 800 !important; } /* -------------------------------------------------------------------------- Subtitles and Section Helper Classes Standardized -------------------------------------------------------------------------- */ .reports-subtitle, .liaison-subtitle, .tracecoo-subtitle, .hubs-subtitle, .multimodal-subtitle, .challenge-subtitle, .faq-subtitle { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #C00000 !important; text-transform: uppercase; margin-bottom: 12px; } /* Hero Widget Aliases */ .hero-main-title { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 42px; font-weight: 800; line-height: 1.2; color: #FFFFFF; margin: 0 0 24px 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-main-desc { font-size: 17px; line-height: 1.65; color: #E2E8F0; margin: 0 0 28px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .hero-qf-item { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 700; color: #FFFFFF; } .hero-quote-card { background: #FFFFFF; border-radius: 20px; padding: 32px 30px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); width: 100%; max-width: 440px; color: #1E293B; box-sizing: border-box; } .quote-card-header h3 { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 21px; font-weight: 800; color: #00467F; margin: 0 0 8px 0; } .quote-card-header p { font-size: 13px; color: #64748B; margin: 0; } .quote-card-footer { margin-top: 14px; text-align: center; } /* Layout Columns */ .hubs-graphic-col, .reports-graphic-col, .liaison-graphic-wrap { display: flex; justify-content: center; align-items: center; } .hubs-text-col, .reports-list-col, .partner-text-col { display: flex; flex-direction: column; } .partner-spacer-col { display: flex; align-items: center; justify-content: center; } .partner-cta-row { margin-top: 10px; } /* Reports Section Layout & Graphic */ .reports-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .reports-main-graphic { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 70, 127, 0.08); } /* Reports List & Logos Block (Step 392) */ .reports-list { display: flex; flex-direction: column; gap: 14px; } .reports-item { display: flex; align-items: center; gap: 16px; background: #FFFFFF; border: 1.5px solid #E2E8F0; padding: 16px 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 70, 127, 0.04); transition: all 0.25s ease; } .reports-item:hover { border-color: #00467F; transform: translateX(6px); box-shadow: 0 8px 22px rgba(0, 70, 127, 0.09); } .reports-item-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; background-color: #00467F; color: #FFFFFF !important; border-radius: 50%; font-size: 18px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 70, 127, 0.2); transition: all 0.3s ease; } .reports-item:hover .reports-item-icon { background-color: #C00000; transform: scale(1.06); box-shadow: 0 6px 16px rgba(192, 0, 0, 0.3); } .reports-item-text h4 { font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); font-size: 16px; font-weight: 800; color: #00467F; margin: 0 0 4px 0; line-height: 1.35; } .reports-item-text p { font-size: 14px; line-height: 1.55; color: #475569; margin: 0; } .reports-logos-block { margin-top: 55px; padding-top: 40px; border-top: 1px solid #E2E8F0; text-align: center; } .reports-logos-header { max-width: 800px; margin: 0 auto 28px; } .reports-logos-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #C00000; margin-bottom: 8px; } .reports-logos-desc { font-size: 15px; line-height: 1.6; color: #475569; font-weight: 500; margin: 0; } /* ========================================================================== Global Mobile & Tablet Responsive Polish & Touch Target Standards ========================================================================== */ @media (max-width: 991px) { /* Safe Header Top Spacing for Hero & Breadcrumb Banners */ .cg-hero2-sec, #cg-hero2, .baycor-petrolera-hero-wrapper, .tracecoo-hero-wrap, .elementor-location-single-page { padding-top: 140px !important; } } @media (max-width: 767px) { /* Mobile Touch Target Standards (Min 48px height) */ .cg-btn-1 a, .baycor-btn, .baycor-lp-btn, .baycor-lp-btn-partner, .baycor-btn-cta-primary, .baycor-btn-cta-phone, .multi-card-btn, button[type="submit"], .wpcf7-submit { min-height: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 24px !important; font-size: 15px !important; touch-action: manipulation; } /* Prevent text overflow on small mobile screens */ h1.hero_title, h2.sec_title, .partner-title, .hero-main-title { word-break: break-word !important; overflow-wrap: break-word !important; } /* Accordion mobile spacing */ .elementor-accordion .elementor-tab-title { padding: 16px 18px !important; font-size: 15px !important; } } /* ========================================================= */ /* Header Phone Number Hover Effect */ /* ========================================================= */ .cg-header-section .action-cta a, .cg-header-section:is(.header_style_one) .cg-header-navigation .action-cta a, .cg-header-section .cg-header-navigation .action-cta .item-text a { transition: color 0.25s ease-in-out !important; } .cg-header-section .action-cta a:hover, .cg-header-section:is(.header_style_one) .cg-header-navigation .action-cta a:hover, .cg-header-section .cg-header-navigation .action-cta .item-text a:hover { color: #C00000 !important; } /* ========================================================= */ /* Quote Form Submit Button - Matches .baycor-btn-cta-primary */ /* ========================================================= */ .cg-quote1-form .quote-submit-wrap, .log-team-contact-form .quote-submit-wrap, .quote-submit-wrap { margin-top: 25px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* Primary Button Styling - Applied directly to button */ .log-team-contact-form button.quote-submit-btn, .log-team-contact-form .quote-submit-btn, .cg-quote1-form button.quote-submit-btn, .cg-quote1-form .quote-submit-btn, button.quote-submit-btn, .quote-submit-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 13px 28px !important; background: #C00000 !important; background-color: #C00000 !important; color: #FFFFFF !important; border: 1.5px solid #C00000 !important; border-radius: 8px !important; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: capitalize !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; z-index: 1 !important; cursor: pointer !important; outline: none !important; box-shadow: 0 6px 20px rgba(192, 0, 0, 0.3) !important; -webkit-transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; transition: all 400ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; box-sizing: border-box !important; line-height: normal !important; } /* Sliding hover background effect */ .log-team-contact-form button.quote-submit-btn:before, .log-team-contact-form .quote-submit-btn:before, .cg-quote1-form button.quote-submit-btn:before, .cg-quote1-form .quote-submit-btn:before, button.quote-submit-btn:before, .quote-submit-btn:before { top: 0 !important; left: 0 !important; z-index: -1 !important; width: 0% !important; height: 100% !important; content: "" !important; position: absolute !important; -webkit-transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; transition: width 500ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; background-color: #FFFFFF !important; border-radius: 6px !important; } .log-team-contact-form button.quote-submit-btn:hover:before, .log-team-contact-form .quote-submit-btn:hover:before, .cg-quote1-form button.quote-submit-btn:hover:before, .cg-quote1-form .quote-submit-btn:hover:before, button.quote-submit-btn:hover:before, .quote-submit-btn:hover:before { width: 100% !important; } .log-team-contact-form button.quote-submit-btn:hover, .log-team-contact-form .quote-submit-btn:hover, .cg-quote1-form button.quote-submit-btn:hover, .cg-quote1-form .quote-submit-btn:hover, button.quote-submit-btn:hover, .quote-submit-btn:hover { color: #C00000 !important; border-color: #C00000 !important; transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(192, 0, 0, 0.35) !important; } /* Reset inner span so it doesn't create duplicate boxes or padding */ .log-team-contact-form button.quote-submit-btn > span, .cg-quote1-form button.quote-submit-btn > span, button.quote-submit-btn > span, .quote-submit-btn > span { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; color: inherit !important; font: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; width: auto !important; } .log-team-contact-form button.quote-submit-btn > span:before, .cg-quote1-form button.quote-submit-btn > span:before, button.quote-submit-btn > span:before, .quote-submit-btn > span:before { display: none !important; } /* Icon badge matching standard primary buttons */ .log-team-contact-form button.quote-submit-btn i, .cg-quote1-form button.quote-submit-btn i, button.quote-submit-btn i, .quote-submit-btn i { width: 28px !important; height: 28px !important; min-width: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; margin-left: 6px !important; border-radius: 4px !important; color: #C00000 !important; background-color: #FFFFFF !important; -webkit-transition: all 350ms ease !important; transition: all 350ms ease !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; } .log-team-contact-form button.quote-submit-btn:hover i, .cg-quote1-form button.quote-submit-btn:hover i, button.quote-submit-btn:hover i, .quote-submit-btn:hover i { color: #FFFFFF !important; background-color: #C00000 !important; transform: translateX(3px) !important; } /* Guarantee badge below button */ .quote-guarantee-badge { margin-top: 14px !important; font-size: 13px !important; color: #64748B !important; } .quote-guarantee-badge i { margin-right: 6px !important; color: #C00000 !important; } @media (max-width: 767px) { .log-team-contact-form button.quote-submit-btn, .log-team-contact-form .quote-submit-btn, .cg-quote1-form button.quote-submit-btn, button.quote-submit-btn, .quote-submit-btn { width: 100% !important; max-width: 300px !important; font-size: 14.5px !important; padding: 12px 20px !important; white-space: nowrap !important; } } /* ========================================================= */ /* Baycor Header Animated Topbar Ticker */ /* ========================================================= */ .baycor-top-ticker { position: relative !important; overflow: visible !important; max-width: 680px !important; height: 26px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .baycor-ticker-icon { margin-right: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; height: 26px !important; flex-shrink: 0 !important; overflow: visible !important; } .cg-header-top .top-cta .baycor-ticker-icon.is-tracecoo { width: 32px !important; min-width: 32px !important; } .baycor-ticker-icon i { color: #FFFFFF !important; font-size: 14px !important; -webkit-transition: opacity 0.22s ease, -webkit-transform 0.22s ease !important; transition: opacity 0.22s ease, transform 0.22s ease !important; } .baycor-ticker-icon.icon-swapping i { opacity: 0 !important; -webkit-transform: scale(0.6) rotate(-15deg) !important; transform: scale(0.6) rotate(-15deg) !important; } .cg-header-top .top-cta .baycor-ticker-icon.is-tracecoo i { display: none !important; } .cg-header-top .top-cta .baycor-ticker-icon:not(.is-tracecoo) .baycor-ticker-tracecoo-svg { display: none !important; } .cg-header-top .top-cta .baycor-ticker-icon.is-tracecoo .baycor-ticker-tracecoo-svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; -webkit-transition: opacity 0.22s ease, -webkit-transform 0.22s ease !important; transition: opacity 0.22s ease, transform 0.22s ease !important; } .cg-header-top .top-cta .baycor-ticker-icon.is-tracecoo .baycor-ticker-tracecoo-svg svg { width: 32px !important; height: 23px !important; display: block !important; overflow: visible !important; } .baycor-ticker-icon.icon-swapping .baycor-ticker-tracecoo-svg { opacity: 0 !important; -webkit-transform: scale(0.6) rotate(-15deg) !important; transform: scale(0.6) rotate(-15deg) !important; } .baycor-ticker-container { position: relative !important; height: 24px !important; line-height: 24px !important; overflow: hidden !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; min-width: 0 !important; } .baycor-ticker-track { position: relative !important; width: 100% !important; height: 24px !important; } .baycor-ticker-slide { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 24px !important; line-height: 24px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; -webkit-transform: translateY(100%) !important; transform: translateY(100%) !important; -webkit-transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.45s !important; transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.45s !important; pointer-events: none !important; } .baycor-ticker-slide.active { position: relative !important; opacity: 1 !important; visibility: visible !important; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; pointer-events: auto !important; z-index: 2 !important; } .baycor-ticker-slide.leaving { position: absolute !important; opacity: 0 !important; visibility: hidden !important; -webkit-transform: translateY(-100%) !important; transform: translateY(-100%) !important; pointer-events: none !important; z-index: 1 !important; } .baycor-ticker-slide a { color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; display: inline-block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 24px !important; -webkit-transition: color 0.25s ease !important; transition: color 0.25s ease !important; } .baycor-ticker-slide a:hover { color: #38BDF8 !important; text-decoration: none !important; } @media (max-width: 1400px) { .baycor-top-ticker { max-width: 520px !important; } .baycor-ticker-slide a { font-size: 13.5px !important; } } @media (max-width: 1200px) { .baycor-top-ticker { max-width: 420px !important; } .baycor-ticker-slide a { font-size: 12.5px !important; } } /* ========================================================= */ /* Header Topbar - Email & Social Hover Effects (#38BDF8) */ /* ========================================================= */ /* Email item normal state: white */ .cg-header-top .top-cta .item-icon, .cg-header-top .top-cta .item-icon i { color: #FFFFFF !important; opacity: 1 !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-transition: color 0.25s ease !important; transition: color 0.25s ease !important; } .cg-header-top .top-cta a[href^="mailto:"], .cg-header-top .top-cta .item-text a:not(.baycor-ticker-slide a) { color: #FFFFFF !important; text-decoration: none !important; -webkit-transition: color 0.25s ease !important; transition: color 0.25s ease !important; } /* Email item hover state: #38BDF8 */ .cg-header-top .top-cta:hover .item-icon i, .cg-header-top .top-cta:has(a[href^="mailto:"]:hover) .item-icon i, .cg-header-top .top-cta a[href^="mailto:"]:hover ~ .item-icon i { color: #38BDF8 !important; } .cg-header-top .top-cta:hover a[href^="mailto:"], .cg-header-top .top-cta a[href^="mailto:"]:hover, .cg-header-top .top-cta .item-text a:not(.baycor-ticker-slide a):hover { color: #38BDF8 !important; text-decoration: none !important; } /* Social links hover */ .cg-header-top .action-social a.agn-social-link, .cg-header-top .action-social a { color: #FFFFFF !important; opacity: 0.85 !important; -webkit-transition: color 0.25s ease, opacity 0.25s ease, -webkit-transform 0.25s ease !important; transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .cg-header-top .action-social a.agn-social-link:hover, .cg-header-top .action-social a:hover { color: #38BDF8 !important; opacity: 1 !important; -webkit-transform: translateY(-2px) !important; transform: translateY(-2px) !important; } .cg-header-top .action-social a.agn-social-link:hover i, .cg-header-top .action-social a:hover i { color: #38BDF8 !important; } /* ========================================================= */ /* Tracecoo Showcase Button - Standardized .cg-btn-1 Styles */ /* Red Base -> Blue Sliding Hover */ /* ========================================================= */ .tracecoo-showcase-btn { display: inline-flex !important; text-decoration: none !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; } .tracecoo-showcase-btn > span { z-index: 1 !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; overflow: hidden !important; position: relative !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; border-radius: 10px !important; padding: 16px 28px 16px 36px !important; font-size: 16px !important; font-weight: 700 !important; font-family: var(--cg-heading, "Rubik", sans-serif) !important; color: #FFFFFF !important; text-transform: capitalize !important; background-color: var(--cg-pr-c3, #C00000) !important; box-shadow: 0 4px 15px rgba(192, 0, 0, 0.25) !important; -webkit-transition: all 400ms ease-in-out !important; transition: all 400ms ease-in-out !important; box-sizing: border-box !important; } .tracecoo-showcase-btn > span:before { top: 0 !important; left: 0 !important; z-index: -1 !important; width: 0% !important; height: 100% !important; content: "" !important; position: absolute !important; -webkit-transition: 700ms var(--cube-1, cubic-bezier(0.55, 0.085, 0, 0.99)) !important; transition: 700ms var(--cube-1, cubic-bezier(0.55, 0.085, 0, 0.99)) !important; background-color: var(--cg-pr-c2, #00467F) !important; border-radius: 10px !important; } .tracecoo-showcase-btn:hover > span:before { width: 100% !important; } .tracecoo-showcase-btn:hover > span { color: #FFFFFF !important; box-shadow: 0 6px 22px rgba(0, 70, 127, 0.35) !important; } .tracecoo-showcase-btn i { width: 30px !important; height: 30px !important; min-width: 30px !important; display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; font-size: 15px !important; margin-left: 18px !important; border-radius: 3px !important; color: var(--cg-pr-c3, #C00000) !important; background-color: #FFFFFF !important; -webkit-transition: color 400ms ease-in-out, transform 300ms ease-in-out !important; transition: color 400ms ease-in-out, transform 300ms ease-in-out !important; } .tracecoo-showcase-btn:hover i { color: var(--cg-pr-c2, #00467F) !important; -webkit-transform: translateX(4px) !important; transform: translateX(4px) !important; } /* ========================================================================== MOBILE HEADER BAR & HAMBURGER BUTTON (FULL RECTANGLE & WHITE BUTTON BG) ========================================================================== */ /* 1. Hamburger button: Pure white background (neutralizing Elementor kit accent red), black icon bars */ .cg-header-section .cg-mobile-btn-trigger, .cg-header-section .mobile_menu_button, .cg-header-section button.mobile-menu-btn, .cg-header-section button.open_mobile_menu, .elementor-kit-8 .cg-header-section button.cg-mobile-btn-trigger, .elementor-kit-8 .cg-header-section button.mobile_menu_button, .elementor-kit-8 button.cg-mobile-btn-trigger, .elementor-kit-8 button.open_mobile_menu { background-color: #FFFFFF !important; background: #FFFFFF !important; border: none !important; box-shadow: none !important; outline: none !important; } .cg-header-section .cg-mobile-btn-trigger:hover, .cg-header-section .cg-mobile-btn-trigger:focus, .cg-header-section .cg-mobile-btn-trigger:active, .cg-header-section .mobile_menu_button:hover, .cg-header-section .mobile_menu_button:focus, .cg-header-section .mobile_menu_button:active, .elementor-kit-8 button.cg-mobile-btn-trigger:hover, .elementor-kit-8 button.cg-mobile-btn-trigger:focus, .elementor-kit-8 button.cg-mobile-btn-trigger:active { background-color: #FFFFFF !important; background: #FFFFFF !important; } .cg-mobile-btn-trigger span, .mobile_menu_button span { background-color: #000000 !important; } /* 2. Mobile Header Container: Full white rectangle, no cut/angled polygon borders */ @media screen and (max-width: 991px) { .cg-header-section:is(.header_style_one) .cg-header-navigation, .cg-header-section .cg-header-navigation { margin: 0 !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; background-color: #FFFFFF !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; padding: 14px 20px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation:before, .cg-header-section .cg-header-navigation:before { clip-path: none !important; -webkit-clip-path: none !important; border-radius: 0 !important; background-color: #FFFFFF !important; width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; } .cg-header-section:is(.header_style_one) .cg-header-content { padding: 0 !important; margin: 0 !important; width: 100% !important; } #cg-header.cg-header-section { width: 100% !important; left: 0 !important; right: 0 !important; } } /* ========================================================================== MOBILE HAMBURGER MENU: BRAND BLUE BACKGROUND, WHITE TEXT & RED ACCENTS ========================================================================== */ /* 1. Hide Top White Floating Header when Mobile Menu is Open */ body.mobile_menu_overlay_on .cg-header-section, body.mobile_menu_overlay_on header, body.mobile_menu_overlay_on .header_style_one, body.mobile_menu_overlay_on .cg-logo-navigation, body.mobile_menu_overlay_on .txa_sticky_header, body.mobile_menu_overlay_on .txa_sticky_show { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-15px) !important; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important; } /* 2. Menu Stacking & Overlay */ .mobile_menu_wrap.mobile_menu_on { z-index: 9999999 !important; position: relative !important; } .mobile_menu_overlay { z-index: 9999998 !important; background-color: rgba(0, 20, 45, 0.7) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } /* 3. Mobile Drawer Content (Brand Blue Background) */ .mobile_menu_content { background-color: #00467F !important; background: #00467F !important; width: 320px !important; max-width: 85vw !important; padding: 65px 25px 40px 25px !important; z-index: 9999999 !important; box-shadow: 6px 0 30px rgba(0, 30, 60, 0.4) !important; border-right: 1px solid rgba(255, 255, 255, 0.12) !important; position: fixed !important; overflow-x: hidden !important; } /* 3.1 Background Pattern Overlay (fading out towards top of menu, visible at bottom) */ .mobile_menu_content .mobile_menu_pattern_overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; background-image: url('/wp-content/themes/cargozen/assets/img/baycor-pattern.png') !important; background-repeat: repeat !important; background-position: bottom center !important; background-size: 320px auto !important; pointer-events: none !important; z-index: 1 !important; filter: invert(1) !important; opacity: 0.7 !important; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 85%) !important; mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 35%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 85%) !important; } .mobile_menu_content .mobile-main-navigation, .mobile_menu_content .mobile-lang-wrapper, .mobile_menu_content .ptx-mobile-header-social { position: relative !important; z-index: 5 !important; } /* 4. Hide Redundant Logo & Search Bar inside Mobile Menu */ .mobile_menu_content .m-brand-logo, .mobile_menu_content .mobile-search-bar { display: none !important; } /* 5. Close Button (Brand Red Circular Accent) */ .mobile_menu .mobile_menu_close { top: 20px !important; right: 20px !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background-color: #C00000 !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(192, 0, 0, 0.35) !important; transition: all 0.3s ease !important; z-index: 10 !important; } .mobile_menu .mobile_menu_close:hover { background-color: #A00000 !important; color: #FFFFFF !important; transform: rotate(90deg) scale(1.05) !important; } /* 6. Navigation Menu Items: White Text with Red Accent */ .mobile_menu_content .mobile-main-navigation .navbar-nav { margin-top: 10px !important; } .mobile_menu_content .mobile-main-navigation .navbar-nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; position: relative !important; } .mobile_menu_content .mobile-main-navigation .navbar-nav li:last-child { border-bottom: none !important; } .mobile_menu_content .mobile-main-navigation .navbar-nav li a { color: #FFFFFF !important; font-family: var(--cg-heading, "Rubik", sans-serif) !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; padding: 14px 45px 14px 0 !important; display: flex !important; align-items: center !important; transition: all 0.25s ease !important; } .mobile_menu_content .mobile-main-navigation .navbar-nav li a:hover, .mobile_menu_content .mobile-main-navigation .navbar-nav li.current-menu-item > a, .mobile_menu_content .mobile-main-navigation .navbar-nav li.current_page_item > a { color: #C00000 !important; padding-left: 6px !important; } /* 7. Dropdown Toggle Buttons (Red Accent) */ .mobile_menu .dropdown .dropdown-btn { top: 8px !important; right: 0 !important; width: 36px !important; height: 34px !important; border-radius: 6px !important; background-color: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; transition: all 0.25s ease !important; } .mobile_menu .dropdown .dropdown-btn:hover, .mobile_menu .dropdown .dropdown-btn.active { background-color: #C00000 !important; color: #FFFFFF !important; border-color: #C00000 !important; } .mobile_menu .dropdown .dropdown-btn i { transition: transform 0.25s ease !important; } .mobile_menu .dropdown .dropdown-btn.active i { transform: rotate(180deg) !important; } /* 8. Submenu Dropdown Styling */ .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu { background-color: rgba(0, 45, 82, 0.45) !important; border-radius: 8px !important; padding: 8px 12px !important; margin: 4px 0 10px 0 !important; border-left: 2px solid #C00000 !important; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 0 !important; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li:last-child { border-bottom: none !important; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a { color: rgba(255, 255, 255, 0.88) !important; font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0.3px !important; padding: 9px 0 !important; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a:hover { color: #C00000 !important; padding-left: 4px !important; } /* 9. Social Links at Bottom (if present) */ .mobile_menu .ptx-mobile-header-social a { color: #FFFFFF !important; background-color: rgba(255, 255, 255, 0.12) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; margin: 0 4px !important; transition: all 0.25s ease !important; } .mobile_menu .ptx-mobile-header-social a:hover { background-color: #C00000 !important; color: #FFFFFF !important; transform: translateY(-2px) !important; } /* 10. Mobile Language Switcher (Below the Navigation Menu - Centered) */ .mobile_menu_content .mobile-lang-wrapper { margin-top: 25px !important; padding-top: 20px !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .mobile_menu_content .mobile-lang-wrapper .baycor-lang-switcher { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; padding: 6px 12px !important; border-radius: 8px !important; } .mobile_menu_content .mobile-lang-wrapper .baycor-lang-switcher a.lang-link { color: #FFFFFF !important; text-decoration: none !important; font-family: var(--cg-heading, "Rubik", sans-serif) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.8px !important; padding: 5px 10px !important; border-radius: 5px !important; line-height: 1 !important; transition: all 0.25s ease !important; opacity: 0.8 !important; display: inline-block !important; } .mobile_menu_content .mobile-lang-wrapper .baycor-lang-switcher a.lang-link:hover { opacity: 1 !important; background-color: rgba(255, 255, 255, 0.22) !important; color: #FFFFFF !important; } .mobile_menu_content .mobile-lang-wrapper .baycor-lang-switcher a.lang-link.is-active { opacity: 1 !important; background-color: #C00000 !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(192, 0, 0, 0.45) !important; } .mobile_menu_content .mobile-lang-wrapper .baycor-lang-switcher .lang-sep { color: rgba(255, 255, 255, 0.35) !important; font-size: 12px !important; user-select: none !important; } /* ========================================================= BAYCOR INTERNATIONAL - LOCATIONS INTERACTIVE MAP SECTION ========================================================= */ .baycor-locations-sec { padding: 55px 0 !important; background-color: #FFFFFF; width: 100%; box-sizing: border-box; position: relative; z-index: 1; } .baycor-locations-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; } .baycor-locations-header { margin-bottom: 35px; text-align: center; } .baycor-locations-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #C00000; text-transform: uppercase; letter-spacing: 1.5px; background: rgba(192, 0, 0, 0.08); padding: 6px 18px; border-radius: 30px; margin-bottom: 14px; } .baycor-locations-title { font-size: 38px; font-weight: 700; color: #00467F; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); margin-top: 0; margin-bottom: 16px; line-height: 1.25; } .baycor-locations-desc { font-size: 16px; line-height: 1.7; color: #475569; max-width: 840px; margin: 0 auto; } /* Legend Bar */ .baycor-locations-legend-bar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 35px; } .baycor-legend-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 40px; cursor: pointer; transition: all 0.25s ease; font-size: 14px; font-weight: 600; color: #334155; user-select: none; } .baycor-legend-pill:hover, .baycor-legend-pill.active { border-color: #00467F; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 70, 127, 0.1); color: #00467F; transform: translateY(-2px); } .baycor-legend-pill .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .baycor-legend-pill .legend-dot.dot-all { background: #00467F; } .baycor-legend-pill .legend-dot.dot-hq { background: #C00000; box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.25); } .baycor-legend-pill .legend-dot.dot-agent { background: #00467F; box-shadow: 0 0 0 3px rgba(0, 70, 127, 0.25); } /* Map Card */ .baycor-map-card { background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%); border: 1.5px solid #E2E8F0; border-radius: 18px; padding: 30px 24px 20px 24px; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.07); position: relative; overflow: visible; margin-bottom: 45px; box-sizing: border-box; } .baycor-map-viewport { width: 100%; position: relative; overflow: visible; } .baycor-map-canvas { position: relative; width: 100%; max-width: 1050px; margin: 0 auto; aspect-ratio: 700 / 360; box-sizing: border-box; } .baycor-map-base-img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0.9; filter: contrast(1.05); pointer-events: none; user-select: none; } /* Map Pins */ .baycor-pin { position: absolute; width: 32px; height: 32px; transform: translate(-50%, -50%); cursor: pointer; z-index: 10; transition: transform 0.25s ease; outline: none; } .baycor-pin .pin-marker { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); position: relative; z-index: 2; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .baycor-pin .pin-beacon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; pointer-events: none; z-index: 1; } .baycor-pin.pin-hq .pin-marker { background: #C00000; border: 2px solid #FFFFFF; } .baycor-pin.pin-hq .pin-beacon { border: 2px solid #C00000; animation: baycorPulse 2s infinite ease-out; } .baycor-pin.pin-agent .pin-marker { background: #00467F; border: 2px solid #FFFFFF; } .baycor-pin.pin-agent .pin-beacon { border: 2px solid #00467F; animation: baycorPulse 2.4s infinite ease-out; animation-delay: 0.6s; } .baycor-pin:hover, .baycor-pin.pin-active { z-index: 45 !important; } .baycor-pin:hover .pin-marker, .baycor-pin.pin-active .pin-marker { transform: scale(1.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Tooltips */ .pin-tooltip { position: absolute; left: 50%; width: 280px; background: #FFFFFF; border-radius: 12px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0, 45, 82, 0.24); border: 1.5px solid #E2E8F0; z-index: 50; pointer-events: auto; opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: left; box-sizing: border-box; } .pin-tooltip.tooltip-bottom { top: calc(100% + 12px); transform: translate(-50%, -8px); } .pin-tooltip.tooltip-top { bottom: calc(100% + 12px); transform: translate(-50%, 8px); } .pin-tooltip.tooltip-left-align { left: auto !important; right: -10px !important; transform: translate(0, -8px) !important; } .baycor-pin:hover .pin-tooltip.tooltip-bottom, .baycor-pin.pin-active .pin-tooltip.tooltip-bottom { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .baycor-pin:hover .pin-tooltip.tooltip-top, .baycor-pin.pin-active .pin-tooltip.tooltip-top { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .baycor-pin:hover .pin-tooltip.tooltip-left-align, .baycor-pin.pin-active .pin-tooltip.tooltip-left-align { opacity: 1; visibility: visible; transform: translate(0, 0) !important; } .tooltip-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 8px; } .tooltip-badge.badge-hq { background: #FEE2E2; color: #C00000; } .tooltip-badge.badge-agent { background: #E0F2FE; color: #00467F; } .tooltip-city { font-size: 16px; font-weight: 700; color: #00467F; margin: 0 0 6px 0; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); line-height: 1.25; } .tooltip-addr { font-size: 13px; font-weight: 600; color: #C00000; margin: 0 0 8px 0; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; } .tooltip-info { font-size: 13px; line-height: 1.5; color: #475569; margin: 0 0 10px 0; } .tooltip-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #C00000 !important; text-decoration: none !important; border-bottom: 1.5px solid #C00000; padding-bottom: 2px; transition: color 0.2s ease; } .tooltip-btn:hover { color: #00467F !important; border-color: #00467F; } .baycor-map-hint { text-align: center; font-size: 13.5px; color: #64748B; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; } /* Location Cards Grid */ .baycor-loc-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; box-sizing: border-box; } .baycor-loc-card { background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 16px rgba(0, 45, 82, 0.04); transition: all 0.25s ease; cursor: pointer; position: relative; box-sizing: border-box; } .baycor-loc-card.card-hq { border-color: rgba(192, 0, 0, 0.35); background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F8 100%); } .baycor-loc-card:hover, .baycor-loc-card.card-active { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 45, 82, 0.12); border-color: #00467F; } .baycor-loc-card.card-hq:hover, .baycor-loc-card.card-hq.card-active { border-color: #C00000; box-shadow: 0 12px 28px rgba(192, 0, 0, 0.16); } .loc-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-status-pill { font-size: 11.5px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.5px; } .card-status-pill.pill-hq { background: #FEE2E2; color: #C00000; } .card-status-pill.pill-agent { background: #E0F2FE; color: #00467F; } .card-flag { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .card-flag .loc-flag-img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); display: inline-block; vertical-align: middle; } .loc-card-title { font-size: 19px; font-weight: 700; color: #00467F; margin: 0 0 4px 0; font-family: var(--cg-heading, Montserrat, Rubik, sans-serif); } .loc-card-country { font-size: 12.5px; font-weight: 700; color: #64748B; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.8px; } .loc-card-address { font-size: 13.5px; font-weight: 600; color: #C00000; line-height: 1.45; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; } .loc-card-service { font-size: 13.5px; line-height: 1.5; color: #475569; margin: 0 0 16px 0; flex-grow: 1; } .card-locate-btn { background: #F1F5F9; border: 1.5px solid #CBD5E1; color: #00467F; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; } .card-locate-btn:hover, .baycor-loc-card.card-active .card-locate-btn { background: #00467F; color: #FFFFFF; border-color: #00467F; } .card-action-btn.btn-hq { background: #C00000; color: #FFFFFF !important; border: 1.5px solid #C00000; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; transition: all 0.2s ease; } .card-action-btn.btn-hq:hover { background: #990000; border-color: #990000; } .card-action-btn.btn-agent { background: #00467F; color: #FFFFFF !important; border: 1.5px solid #00467F; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; transition: all 0.2s ease; } .card-action-btn.btn-agent:hover { background: #002d52; border-color: #002d52; } .loc-card-address.addr-agent { color: #00467F; } .loc-card-address.addr-agent i { color: #00467F; } @keyframes baycorPulse { 0% { width: 32px; height: 32px; opacity: 0.8; } 100% { width: 60px; height: 60px; opacity: 0; } } /* Responsive Rules */ @media (max-width: 1100px) { .baycor-loc-cards-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 991px) { .baycor-locations-sec { padding: 55px 0 !important; } .baycor-locations-title { font-size: 32px; } .baycor-loc-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .baycor-locations-sec { padding: 55px 0 !important; } .baycor-locations-container { padding: 0 16px !important; } .baycor-locations-title { font-size: 26px !important; } .baycor-locations-desc { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 20px !important; } .baycor-locations-legend-bar { gap: 8px !important; margin-bottom: 20px !important; } .baycor-legend-pill { padding: 7px 14px !important; font-size: 12px !important; } .baycor-map-card { padding: 14px 10px 18px 10px !important; border-radius: 14px !important; margin-bottom: 30px !important; overflow: visible !important; } .baycor-map-viewport { overflow: visible !important; width: 100% !important; padding-bottom: 0 !important; } .baycor-map-canvas { width: 100% !important; min-width: 0 !important; max-width: 100% !important; aspect-ratio: 700 / 360 !important; position: relative !important; } .baycor-pin { width: 24px !important; height: 24px !important; } .baycor-pin .pin-marker { width: 22px !important; height: 22px !important; font-size: 9px !important; border-width: 1.5px !important; } .baycor-pin .pin-beacon { width: 24px !important; height: 24px !important; } .baycor-pin:hover .pin-marker, .baycor-pin.pin-active .pin-marker { transform: scale(1.3) !important; } .baycor-map-hint { font-size: 11.5px !important; margin-top: 12px !important; } .baycor-loc-cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; } /* Responsive tooltips within mobile viewport */ .pin-tooltip { width: 210px !important; padding: 10px 12px !important; border-radius: 10px !important; box-shadow: 0 10px 25px rgba(0, 45, 82, 0.25) !important; } .tooltip-city { font-size: 13px !important; margin-bottom: 4px !important; } .tooltip-addr { font-size: 11px !important; line-height: 1.35 !important; margin-bottom: 5px !important; } .tooltip-info { font-size: 11px !important; line-height: 1.35 !important; margin-bottom: 6px !important; } .tooltip-badge { font-size: 9px !important; padding: 2px 6px !important; margin-bottom: 5px !important; } .tooltip-btn { padding: 4px 8px !important; font-size: 10px !important; } /* Keep tooltips within screen boundaries on mobile */ .baycor-pin[data-loc="houston"] .pin-tooltip, .baycor-pin[data-loc="miami"] .pin-tooltip, .baycor-pin[data-loc="colombia"] .pin-tooltip, .baycor-pin[data-loc="argentina"] .pin-tooltip { left: -10px !important; transform: none !important; } .baycor-pin[data-loc="houston"].pin-active .pin-tooltip, .baycor-pin[data-loc="miami"].pin-active .pin-tooltip, .baycor-pin[data-loc="colombia"].pin-active .pin-tooltip, .baycor-pin[data-loc="argentina"].pin-active .pin-tooltip { transform: none !important; } } /* Separation between Contact Form and Locations Section */ .elementor-1859 .elementor-element.elementor-element-1e8ca8e { margin-bottom: 40px !important; } @media (max-width: 767px) { .elementor-1859 .elementor-element.elementor-element-1e8ca8e { margin-bottom: 25px !important; } } /* ========================================================= */ /* Baycor Technical Blog Styling (Executive Tables & Scoped) */ /* ========================================================= */ .single-post .baycor-exec-table-wrap { margin-top: 28px !important; margin-bottom: 20px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow-x: auto !important; box-shadow: 0 4px 20px rgba(0, 70, 127, 0.06) !important; } /* Neutralize BFC gap addition when h2/h3 follows an executive table */ .single-post .baycor-exec-table-wrap + h2 { margin-top: 12px !important; } .single-post .baycor-exec-table-wrap + h3 { margin-top: 12px !important; } .single-post .baycor-exec-table-wrap table { width: 100% !important; min-width: 650px !important; border-collapse: collapse !important; } .single-post .baycor-exec-table-wrap th { background-color: #00467F !important; color: #ffffff !important; font-size: 14.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 16px 20px !important; border-bottom: 2px solid #003360 !important; } .single-post .baycor-exec-table-wrap td { padding: 15px 20px !important; font-size: 14.5px !important; line-height: 1.6 !important; vertical-align: middle !important; } .single-post .baycor-exec-table-wrap tbody tr:hover { background-color: #f1f5f9 !important; } .single-post .ed-blog-details-text h2 { font-size: 26px !important; font-weight: 700 !important; color: #00467F !important; margin-top: 36px !important; margin-bottom: 18px !important; border-left: 4px solid #C00000 !important; padding-left: 15px !important; line-height: 1.35 !important; } /* Consecutive headings: when h3 immediately follows h2 */ .single-post .ed-blog-details-text h2 + h3:not(.baycor-cta-title) { margin-top: 10px !important; } .single-post .ed-blog-details-text h3:not(.baycor-cta-title) { font-size: 20px !important; font-weight: 700 !important; color: #1e293b !important; margin-top: 28px !important; margin-bottom: 14px !important; padding-bottom: 0 !important; line-height: 1.4 !important; } /* ========================================================= */ /* Baycor Modern Interactive Blog Archive Cards & Sidebar */ /* ========================================================= */ .cg-blog-feed-sec { background-color: #f8fafc !important; } .cg-blog-feed-item.baycor-modern-card { background: #ffffff !important; border-radius: 20px !important; border: 1px solid rgba(226, 232, 240, 0.95) !important; box-shadow: 0 10px 30px -10px rgba(0, 45, 90, 0.07) !important; overflow: hidden !important; transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.35s ease !important; margin-bottom: 50px !important; } .cg-blog-feed-item.baycor-modern-card:hover { transform: translateY(-8px) !important; box-shadow: 0 25px 50px -12px rgba(0, 70, 127, 0.22), 0 0 0 1px rgba(0, 70, 127, 0.15) !important; border-color: rgba(0, 70, 127, 0.3) !important; } /* Image Container & Hover Zoom */ .cg-blog-feed-item .item-img-meta { position: relative !important; width: 100% !important; margin-bottom: 0 !important; overflow: hidden !important; border-radius: 20px 20px 0 0 !important; } .baycor-img-wrapper { position: relative !important; overflow: hidden !important; width: 100% !important; display: block !important; margin-bottom: 0 !important; border-radius: 20px 20px 0 0 !important; } .baycor-card-img-link { display: block !important; width: 100% !important; height: auto !important; overflow: hidden !important; } .baycor-card-img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block !important; border-radius: 20px 20px 0 0 !important; transition: transform 0.65s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.65s ease !important; } .cg-blog-feed-item.baycor-modern-card:hover .baycor-card-img { transform: scale(1.04) !important; filter: brightness(1.02) !important; } /* Category Badge (Glassmorphic) */ .baycor-card-cat-badge { position: absolute !important; top: 22px !important; left: 22px !important; z-index: 5 !important; } .baycor-card-cat-badge a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 18px !important; background: rgba(0, 70, 127, 0.88) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: #ffffff !important; border-radius: 30px !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; transition: all 0.35s ease !important; text-decoration: none !important; } .baycor-card-cat-badge a:hover { background: #C00000 !important; border-color: #C00000 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(192, 0, 0, 0.35) !important; } /* Date Badge Modernization */ .item-date.baycor-card-date { position: absolute !important; top: 22px !important; right: 22px !important; left: auto !important; z-index: 10 !important; width: 66px !important; height: 66px !important; background: rgba(192, 0, 0, 0.92) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-radius: 14px !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(192, 0, 0, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease !important; } .cg-blog-feed-item.baycor-modern-card:hover .item-date.baycor-card-date { transform: scale(1.06) translateY(-2px) !important; box-shadow: 0 12px 25px rgba(192, 0, 0, 0.45) !important; } .item-date.baycor-card-date .date-meta span { font-size: 22px !important; font-weight: 800 !important; line-height: 1.05 !important; display: block !important; } .item-date.baycor-card-date .date-meta small { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; display: block !important; opacity: 0.95 !important; } /* Card Content Area */ .cg-blog-feed-item .item-text { padding: 34px 38px 38px 38px !important; } /* Meta Bar */ .baycor-card-meta { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 22px !important; margin-bottom: 16px !important; padding: 0 !important; list-style: none !important; } .baycor-card-meta li { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 13.5px !important; font-weight: 600 !important; color: #64748b !important; margin: 0 !important; } .baycor-card-meta li i { color: #00467F !important; font-size: 14px !important; } /* Post Title */ .cg-blog-feed-item .blog_title { font-size: 27px !important; font-weight: 800 !important; line-height: 1.38 !important; margin-bottom: 16px !important; padding-bottom: 0 !important; } .cg-blog-feed-item .blog_title a { color: #0f172a !important; transition: color 0.3s ease !important; text-decoration: none !important; } .cg-blog-feed-item.baycor-modern-card:hover .blog_title a { color: #00467F !important; } /* Excerpt */ .baycor-card-excerpt p { color: #475569 !important; font-size: 16px !important; line-height: 1.68 !important; margin-bottom: 20px !important; padding-bottom: 0 !important; max-width: 100% !important; } /* Card Footer & CTA Button */ .baycor-card-footer { padding-top: 18px !important; border-top: 1px solid #f1f5f9 !important; margin-top: 20px !important; display: flex !important; justify-content: flex-start !important; } .baycor-read-more-btn { display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 11px 26px !important; border-radius: 50px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #00467F !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important; text-decoration: none !important; } .baycor-read-more-btn i { font-size: 13px !important; transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .baycor-read-more-btn:hover { background: #00467F !important; color: #ffffff !important; border-color: #00467F !important; box-shadow: 0 10px 22px rgba(0, 70, 127, 0.28) !important; transform: translateY(-2px) !important; } .baycor-read-more-btn:hover i { transform: translateX(6px) !important; } /* ========================================================= */ /* Modernized Sidebar Styling */ /* ========================================================= */ .cg-side-widget { background: #ffffff !important; border-radius: 18px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 8px 24px -6px rgba(0, 45, 90, 0.05) !important; padding: 30px !important; margin-bottom: 35px !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .cg-side-widget:hover { box-shadow: 0 16px 35px -8px rgba(0, 70, 127, 0.12) !important; border-color: rgba(0, 70, 127, 0.2) !important; } .cg-side-widget .widget-title { font-size: 20px !important; font-weight: 700 !important; color: #00467F !important; border-left: 3px solid #C00000 !important; padding-left: 12px !important; margin-bottom: 22px !important; text-transform: capitalize !important; } .sidebar-search-box { position: relative !important; } .sidebar-search-box .search-input { border-radius: 50px !important; border: 1px solid #e2e8f0 !important; padding: 12px 50px 12px 20px !important; background: #f8fafc !important; font-size: 14px !important; width: 100% !important; transition: all 0.3s ease !important; } .sidebar-search-box .search-input:focus { border-color: #00467F !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(0, 70, 127, 0.1) !important; outline: none !important; } .sidebar-search-box .search-btn { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #00467F !important; color: #ffffff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.3s ease, transform 0.3s ease !important; } .sidebar-search-box .search-btn:hover { background: #C00000 !important; transform: translateY(-50%) scale(1.05) !important; } .recent-post-item { display: flex !important; align-items: center !important; gap: 15px !important; padding: 14px 0 !important; border-bottom: 1px solid #f1f5f9 !important; transition: transform 0.25s ease !important; } .recent-post-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; } .recent-post-item:hover { transform: translateX(4px) !important; } .recent-post-item .item-img { width: 75px !important; height: 75px !important; border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; background: #0f172a !important; } .recent-post-item .item-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s ease !important; } .recent-post-item:hover .item-img img { transform: scale(1.1) !important; } .recent-post-item .item-text span { font-size: 12px !important; color: #94a3b8 !important; display: block !important; margin-bottom: 5px !important; } .recent-post-item .item-text span i { color: #C00000 !important; margin-right: 4px !important; } .recent-post-item .item-text h3 { margin: 0 !important; padding: 0 !important; } .recent-post-item .item-text h3 a { font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #0f172a !important; transition: color 0.25s ease !important; } .recent-post-item:hover .item-text h3 a { color: #00467F !important; } /* Mobile & Tablet Responsiveness */ @media (max-width: 767px) { .cg-blog-feed-item .item-text { padding: 24px 20px 26px 20px !important; } .cg-blog-feed-item .blog_title { font-size: 21px !important; line-height: 1.35 !important; } .baycor-card-cat-badge { top: 15px !important; left: 15px !important; } .baycor-card-cat-badge a { padding: 5px 12px !important; font-size: 10.5px !important; } .item-date.baycor-card-date { top: 15px !important; right: 15px !important; width: 56px !important; height: 56px !important; } .item-date.baycor-card-date .date-meta span { font-size: 18px !important; } .item-date.baycor-card-date .date-meta small { font-size: 9.5px !important; } .baycor-read-more-btn { width: 100% !important; justify-content: center !important; } } /* ========================================================= */ /* Baycor Modern Executive Footer Redesign */ /* ========================================================= */ /* --- 1. Top Bar: Single Row on Desktop (Logo + Email + Warehouse) --- */ @media (min-width: 992px) { .cg-footer-cta { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 35px 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important; width: 100% !important; box-sizing: border-box !important; } .cg-footer-cta .brand-logo { display: flex !important; align-items: center !important; flex: 0 0 auto !important; max-width: 290px !important; margin: 0 !important; padding: 0 !important; } .cg-footer-cta .brand-logo img, .cg-footer-cta .logo_site-size { width: 270px !important; max-width: 290px !important; height: auto !important; max-height: 85px !important; object-fit: contain !important; display: block !important; transition: filter 0.35s ease, transform 0.35s ease !important; } .cg-footer-cta .brand-logo a:hover img { filter: brightness(1.1) drop-shadow(0 0 16px rgba(255, 255, 255, 0.25)) !important; transform: translateY(-2px) !important; } .cg-footer-cta-wrap { display: contents !important; border: none !important; border-left: none !important; padding: 0 !important; margin: 0 !important; } } /* Contact Info Items & Interactive Badges */ .cg-ftr-cta-item { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px !important; transition: transform 0.3s ease !important; } .cg-ftr-cta-item:hover { transform: translateY(-2px) !important; } .cg-ftr-cta-item .item-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .cg-ftr-cta-item:hover .item-icon { background: #C00000 !important; border-color: #C00000 !important; transform: scale(1.08) !important; box-shadow: 0 6px 20px rgba(192, 0, 0, 0.45) !important; } .cg-ftr-cta-item .item-text { text-align: left !important; } .cg-ftr-cta-item .item-text span { font-size: 11.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: rgba(255, 255, 255, 0.65) !important; margin-bottom: 2px !important; display: block !important; } .cg-ftr-cta-item .item-text a { font-size: 15.5px !important; font-weight: 700 !important; color: #ffffff !important; display: block !important; white-space: nowrap !important; transition: color 0.3s ease !important; text-decoration: none !important; } .cg-ftr-cta-item:hover .item-text a { color: #60a5fa !important; } /* --- 2. Main Footer Widget Area (3 Balanced Columns) --- */ .cg-footer-widget-wrap { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: flex-start !important; padding-top: 60px !important; padding-bottom: 50px !important; gap: 40px !important; width: 100% !important; } /* Hide any remaining newsletter element safely */ .cg-ftr1-widget:has(.newslatter-widget), .newslatter-widget { display: none !important; } @media (min-width: 992px) { /* Quick Links (Column 1) */ .cg-footer-widget-wrap > .cg-ftr1-widget:nth-of-type(1) { flex: 0 0 28% !important; max-width: 28% !important; } /* Services & Solutions (Column 2) */ .cg-footer-widget-wrap > .cg-ftr1-widget:nth-of-type(2) { flex: 0 0 40% !important; max-width: 40% !important; } /* Contact (Column 3) */ .cg-footer-widget-wrap > .cg-ftr1-widget:nth-of-type(3) { flex: 0 0 26% !important; max-width: 26% !important; } } /* Column Headings */ .cg-ftr1-widget .widget-title, .cg-ftr1-widget .cta-widget h3 { color: #ffffff !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; margin-bottom: 22px !important; padding-bottom: 8px !important; border-bottom: 2px solid #C00000 !important; display: inline-block !important; } /* Navigation Links */ .cg-ftr1-widget .menu-widget ul { padding: 0 !important; margin: 0 !important; list-style: none !important; } .cg-ftr1-widget .menu-widget li { margin-bottom: 11px !important; } .cg-ftr1-widget .menu-widget li a { color: rgba(255, 255, 255, 0.72) !important; font-size: 14.5px !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important; text-decoration: none !important; } .cg-ftr1-widget .menu-widget li a::before { content: "›" !important; color: rgba(192, 0, 0, 0.9) !important; font-size: 16px !important; line-height: 1 !important; font-weight: 700 !important; transition: transform 0.3s ease, color 0.3s ease !important; } .cg-ftr1-widget .menu-widget li a:hover { color: #ffffff !important; transform: translateX(6px) !important; } .cg-ftr1-widget .menu-widget li a:hover::before { color: #60a5fa !important; transform: translateX(2px) !important; } /* Contact Column Enhancement */ .cg-ftr1-widget .cta-widget .txt_call { font-size: 23px !important; font-weight: 800 !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; transition: all 0.3s ease !important; text-decoration: none !important; letter-spacing: 0.5px !important; } .cg-ftr1-widget .cta-widget .txt_call:hover { color: #60a5fa !important; transform: translateY(-2px) !important; } .cg-ftr1-widget .cta-widget .txt_call::before { content: "" !important; display: inline-block !important; width: 22px !important; height: 22px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C00000'%3E%3Cpath d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center center / contain !important; flex-shrink: 0 !important; transition: transform 0.3s ease !important; } .cg-ftr1-widget .cta-widget .txt_call:hover::before { transform: rotate(15deg) scale(1.15) !important; } /* Circular 'Get in Touch' / 'Contáctanos' Footer Button - Hidden */ .cg-ftr1-widget .cta-widget .cg-circle-btn, .cg-ftr2-widget .cta-widget .cg-circle-btn, .cg-circle-btn.bi-btn-area { display: none !important; margin-top: 24px !important; } .cg-circle-btn .bi-btn-main { width: 100px !important; height: 100px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } .cg-circle-btn .bi-btn-main:hover { background: #C00000 !important; border-color: #C00000 !important; transform: translateY(-4px) scale(1.04) !important; box-shadow: 0 15px 35px rgba(192, 0, 0, 0.45) !important; } /* --- 3. Copyright Section & Footer Language Switcher --- */ .cg-footer-cpr, .cg-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 22px 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 13.5px !important; } .cg-footer-bottom .cg-footer-bottom-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 20px !important; } .cg-footer-bottom .cg-footer-copyright-text { text-align: left !important; } .cg-footer-bottom .cg-footer-copyright-text p { margin: 0 !important; text-align: left !important; color: rgba(255, 255, 255, 0.6) !important; } .cg-footer-cpr a, .cg-footer-bottom a { color: #C00000 !important; font-weight: 600 !important; transition: color 0.3s ease !important; text-decoration: none !important; } .cg-footer-cpr a:hover, .cg-footer-bottom a:hover { color: #ffffff !important; text-decoration: underline !important; } /* Language Switcher in bottom right corner */ .cg-footer-bottom .cg-footer-bottom-lang { display: flex !important; align-items: center !important; flex-shrink: 0 !important; margin-left: auto !important; } .cg-footer-bottom .cg-footer-bottom-lang .baycor-lang-switcher { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; padding: 3px 8px !important; border-radius: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important; } .cg-footer-bottom .cg-footer-bottom-lang .baycor-lang-switcher a.lang-link { font-size: 12px !important; padding: 3px 6px !important; } /* Mobile responsive: language switcher above copyright line */ @media (max-width: 767px) { .cg-footer-bottom .cg-footer-bottom-container { flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 14px !important; text-align: center !important; } .cg-footer-bottom .cg-footer-bottom-lang { order: 1 !important; margin: 0 auto !important; } .cg-footer-bottom .cg-footer-copyright-text { order: 2 !important; text-align: center !important; } .cg-footer-bottom .cg-footer-copyright-text p { text-align: center !important; } } /* Responsive Overrides for Tablet & Mobile */ @media (max-width: 991px) { .cg-footer-cta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 30px 15px !important; } .cg-footer-cta .brand-logo { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto 12px auto !important; padding: 0 !important; text-align: center !important; } .cg-footer-cta .brand-logo a { display: inline-block !important; margin: 0 auto !important; text-align: center !important; } .cg-footer-cta .brand-logo img, .cg-footer-cta .logo_site-size { width: 260px !important; max-width: 85vw !important; height: auto !important; max-height: 80px !important; margin: 0 auto !important; display: block !important; object-fit: contain !important; object-position: center center !important; } .cg-footer-cta-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; padding: 0 !important; border: none !important; border-left: none !important; width: 100% !important; } .cg-footer-widget-wrap { flex-wrap: wrap !important; gap: 35px !important; padding-top: 40px !important; } .cg-footer-widget-wrap > .cg-ftr1-widget { flex: 0 0 100% !important; max-width: 100% !important; } } /* ========================================================= Hero Slider (Home) Alignment & Overflow Optimization ========================================================= */ .hero-text1 { max-width: 920px !important; padding: 160px 0px 130px !important; } @media (min-width: 1200px) { .hero-text1 .hero_title { font-size: 60px !important; line-height: 1.14 !important; margin-bottom: 14px !important; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-text1 { max-width: 820px !important; padding: 145px 0px 120px !important; } .hero-text1 .hero_title { font-size: 50px !important; line-height: 1.16 !important; margin-bottom: 12px !important; } } .hero-text1 p { margin-bottom: 20px !important; line-height: 1.55 !important; } /* ========================================================= Home Hero Slider Buttons: Red Base, White Hover ========================================================= */ #cg-hero1 .hero-text1 .cg-btn-1 a span { background-color: #C00000 !important; color: #FFFFFF !important; border: 2px solid #C00000 !important; box-shadow: 0 6px 20px rgba(192, 0, 0, 0.3) !important; transition: all 400ms ease-in-out !important; } #cg-hero1 .hero-text1 .cg-btn-1 a span:before { background-color: #FFFFFF !important; } #cg-hero1 .hero-text1 .cg-btn-1 a span i { background-color: #FFFFFF !important; color: #C00000 !important; border: 1px solid #FFFFFF !important; transition: all 400ms ease-in-out !important; } /* Hover State */ #cg-hero1 .hero-text1 .cg-btn-1 a:hover span, #cg-hero1 .hero-text1 .cg-btn-1 a span:hover { color: #C00000 !important; background-color: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: 0 8px 25px rgba(255, 255, 255, 0.45) !important; } #cg-hero1 .hero-text1 .cg-btn-1 a:hover span:before, #cg-hero1 .hero-text1 .cg-btn-1 a span:hover:before { width: 100% !important; background-color: #FFFFFF !important; } #cg-hero1 .hero-text1 .cg-btn-1 a:hover span i, #cg-hero1 .hero-text1 .cg-btn-1 a span:hover i { background-color: #C00000 !important; color: #FFFFFF !important; border-color: #C00000 !important; } /* ========================================================= Home Quote Form (.cg-quote1-form) Refinements ========================================================= */ /* Ensure Cargo Details textarea matches inputs perfectly */ .cg-quote1-form textarea, .cg-quote1-form textarea.wpcf7-textarea { width: 100% !important; color: #FFFFFF !important; font-weight: 500 !important; font-family: inherit !important; font-size: 14.5px !important; border-radius: 6px !important; padding: 14px 20px !important; margin-bottom: 20px !important; background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.31) !important; height: 120px !important; min-height: 120px !important; resize: vertical !important; outline: none !important; box-sizing: border-box !important; transition: all 0.25s ease !important; } .cg-quote1-form textarea:focus, .cg-quote1-form input:focus, .cg-quote1-form select:focus { background-color: rgba(255, 255, 255, 0.14) !important; border-color: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important; outline: none !important; } .cg-quote1-form textarea::-webkit-input-placeholder, .cg-quote1-form textarea::placeholder { color: rgba(255, 255, 255, 0.72) !important; font-weight: 500 !important; font-size: 14px !important; } /* White text for 'Strict Confidentiality' on Home form */ .cg-quote1-sec .quote-guarantee-badge, .cg-quote1-sec .quote-guarantee-badge span, .cg-quote1-form .quote-guarantee-badge, .cg-quote1-form .quote-guarantee-badge span { color: #FFFFFF !important; opacity: 0.95 !important; } .cg-quote1-sec .quote-guarantee-badge i, .cg-quote1-form .quote-guarantee-badge i { color: #FFFFFF !important; margin-right: 6px !important; } /* ========================================================= Home Quote Section (.cg-quote1-sec) Typography Styling: - "GET AN ESTIMATE" Subtitle & Form Title -> Pure White - "Consult With It Advisor? Click Now" -> Pure White ========================================================= */ /* 1. Subtitle 'GET AN ESTIMATE' on left column */ .cg-quote1-sec .subtitle, .cg-quote1-sec .cg-sub-tilte, .cg-quote1-sec .cg-sub-anim, .cg-quote1-sec .cg-sec-title .subtitle, .cg-quote1-sec .cg-sec-title .cg-sub-tilte, .cg-quote1-sec .cg-quote1-text .subtitle, .cg-quote1-sec .cg-quote1-text .cg-sub-tilte, #cg-quote1 .subtitle, #cg-quote1 .cg-sub-tilte, #cg-quote1 .cg-sub-anim { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; } /* 2. Form header 'GET AN ESTIMATE' on right column */ .cg-quote1-form h3, .cg-quote1-form.headline h3, .cg-quote1-sec .cg-quote1-form h3, #cg-quote1 .cg-quote1-form h3 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* 3. 'Consult With It Advisor? Click Now' text & link */ .cg-quote1-sec .cg-qt-txt, .cg-quote1-sec .cg-qt-txt *, .cg-quote1-sec .cg-qt-txt p, .cg-quote1-sec .cg-qt-txt span, .cg-quote1-content .cg-qt-txt, .cg-quote1-content .cg-qt-txt *, .cg-quote1-content .cg-qt-txt p, #cg-quote1 .cg-qt-txt, #cg-quote1 .cg-qt-txt *, #cg-quote1 .cg-qt-txt p, .cg-qt-txt, .cg-qt-txt p { color: #FFFFFF !important; font-size: 15.5px !important; font-weight: 500 !important; margin-bottom: 0 !important; } .cg-quote1-sec .cg-qt-txt a, .cg-quote1-sec .cg-qt-txt p a, .cg-quote1-content .cg-qt-txt a, .cg-quote1-content .cg-qt-txt p a, #cg-quote1 .cg-qt-txt a, #cg-quote1 .cg-qt-txt p a, .cg-qt-txt a, .cg-qt-txt p a { color: #FFFFFF !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: #FFFFFF !important; text-underline-offset: 4px !important; transition: all 0.2s ease !important; } .cg-quote1-sec .cg-qt-txt a:hover, .cg-quote1-sec .cg-qt-txt p a:hover, .cg-quote1-content .cg-qt-txt a:hover, .cg-quote1-content .cg-qt-txt p a:hover, #cg-quote1 .cg-qt-txt a:hover, #cg-quote1 .cg-qt-txt p a:hover, .cg-qt-txt a:hover, .cg-qt-txt p a:hover { color: #FFFFFF !important; opacity: 0.85 !important; text-decoration-color: rgba(255, 255, 255, 0.7) !important; } /* ========================================================= Contact Page Quote Form (.log-team-contact-form) Styling Matching Home Form Elegance with Modern Card Aesthetics ========================================================= */ .log-team-contact-form { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; box-shadow: 0 12px 35px rgba(0, 70, 127, 0.08) !important; padding: 50px 45px !important; max-width: 900px !important; margin: 0 auto !important; } @media (max-width: 767px) { .log-team-contact-form { padding: 30px 20px !important; } } .log-team-contact-form label { color: #00467F !important; font-size: 14px !important; font-weight: 700 !important; margin-bottom: 8px !important; display: block !important; letter-spacing: 0.2px !important; } /* Standardized fields: input, select, textarea */ .log-team-contact-form input, .log-team-contact-form select, .log-team-contact-form textarea { width: 100% !important; height: 52px !important; background-color: #F8FAFC !important; border: 1.5px solid #CBD5E1 !important; border-radius: 8px !important; padding: 12px 20px !important; color: #0F172A !important; font-size: 15px !important; font-weight: 500 !important; margin-bottom: 22px !important; outline: none !important; box-sizing: border-box !important; transition: all 0.25s ease !important; } /* Custom Select Dropdown with Chevron SVG */ .log-team-contact-form .qt-select-option { position: relative !important; } .log-team-contact-form .qt-select-option:before { content: "" !important; width: 14px !important; height: 14px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300467F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center center / contain !important; position: absolute !important; right: 18px !important; top: 19px !important; pointer-events: none !important; z-index: 2 !important; } .log-team-contact-form select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; padding-right: 42px !important; cursor: pointer !important; } /* Textarea height & resize */ .log-team-contact-form textarea { height: 130px !important; min-height: 130px !important; padding-top: 14px !important; padding-bottom: 14px !important; border-radius: 8px !important; resize: vertical !important; } /* Field Focus State */ .log-team-contact-form input:focus, .log-team-contact-form select:focus, .log-team-contact-form textarea:focus { background-color: #FFFFFF !important; border-color: #00467F !important; box-shadow: 0 0 0 3.5px rgba(0, 70, 127, 0.12) !important; } /* Field Placeholders */ .log-team-contact-form input::-webkit-input-placeholder, .log-team-contact-form textarea::-webkit-input-placeholder { color: #94A3B8 !important; font-size: 14.5px !important; font-weight: 400 !important; } .log-team-contact-form input::placeholder, .log-team-contact-form textarea::placeholder { color: #94A3B8 !important; font-size: 14.5px !important; font-weight: 400 !important; } /* Contact Info Boxes Above Quote Form */ .log-contact-info-wrap .row { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; } .log-contact-info-wrap .row > [class*="col-"] { display: flex !important; flex-direction: column !important; } .log-contact-info-item { background-color: #00467F !important; border: 1px solid rgba(0, 70, 127, 0.25) !important; box-shadow: 0 10px 30px rgba(0, 70, 127, 0.12) !important; transition: transform 0.35s ease, box-shadow 0.35s ease !important; position: relative; overflow: hidden; margin-bottom: 24px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; height: calc(100% - 24px) !important; } .log-contact-info-item:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 36px rgba(0, 70, 127, 0.22) !important; } .log-contact-info-item .info-bg { height: 100% !important; opacity: 0 !important; transition: opacity 0.4s ease !important; } .log-contact-info-item:hover .info-bg { opacity: 1 !important; } .log-contact-info-item .inner-icon { background-color: rgba(255, 255, 255, 0.18) !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; } .log-contact-info-item .inner-icon i { color: #FFFFFF !important; } .log-contact-info-item .inner-text { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } .log-contact-info-item .inner-text h3 { color: #FFFFFF !important; } .log-contact-info-item .inner-text p, .log-contact-info-item .inner-text a { color: #F1F5F9 !important; text-decoration: none !important; transition: color 0.2s ease !important; } .log-contact-info-item .inner-text p:last-child { margin-bottom: 0 !important; } .log-contact-info-item .inner-text a:hover { color: #FFFFFF !important; text-decoration: underline !important; } .log-contact-info-item .info-bg:before { background-color: rgba(0, 70, 127, 0.58) !important; } /* ========================================================= Home Page - Tracecoo Heading & Video Spacing (Exactly 30px) ========================================================= */ .elementor-1855 .elementor-element.elementor-element-f25f68a, .elementor-element-f25f68a { margin-bottom: 30px !important; } .elementor-element-f25f68a .cg-sec-title, .elementor-element-f25f68a .elementor-widget-container, .elementor-element-f25f68a .elementor-gt-desc { margin-bottom: 0 !important; padding-bottom: 0 !important; } .elementor-1855 .elementor-element.elementor-element-318e9b9, .elementor-element-318e9b9 { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================================== BAYCOR BLOG DETAILS - STRICTLY SCOPED STYLING (ZERO IMPACT ON OTHER PAGES) ========================================================================== */ /* 1. Harmonized Vertical Spacing for Content Blocks (Uniform 24px Rhythm) */ .single-post .ed-blog-details-text p { font-size: 16px !important; line-height: 1.8 !important; color: #475569 !important; margin-top: 0 !important; margin-bottom: 24px !important; } /* Introductory paragraph immediately preceding a list sits closer to its items */ .single-post .ed-blog-details-text p:has(+ ul), .single-post .ed-blog-details-text p:has(+ ol) { margin-bottom: 12px !important; } /* Introductory paragraph immediately preceding an executive table */ .single-post .ed-blog-details-text p:has(+ .baycor-exec-table-wrap) { margin-bottom: 16px !important; } .single-post .ed-blog-details-text p.lead { font-size: 18.5px !important; line-height: 1.75 !important; color: #1e293b !important; font-weight: 500 !important; margin-top: 0 !important; margin-bottom: 24px !important; } .single-post .ed-blog-details-text ul, .single-post .ed-blog-details-text ol { margin-top: 0 !important; margin-bottom: 24px !important; padding-left: 24px !important; } .single-post .ed-blog-details-text ul li, .single-post .ed-blog-details-text ol li { font-size: 15.5px !important; line-height: 1.8 !important; color: #334155 !important; margin-bottom: 10px !important; } .single-post .ed-blog-details-text ul li:last-child, .single-post .ed-blog-details-text ol li:last-child { margin-bottom: 0 !important; } /* Suppress empty paragraphs or whitespace-only paragraphs created by wpautop */ .single-post .ed-blog-details-text p:empty, .single-post .ed-blog-details-text p:has(> :empty:only-child) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important; } .single-post .ed-blog-details-text div[style*="background-color: #f8fafc"], .single-post .baycor-checklist-box { margin-top: 24px !important; margin-bottom: 24px !important; border-radius: 12px !important; } /* Checklist Box Inner Typography & Margin Normalization */ .single-post .baycor-checklist-box h4 { margin-top: 0 !important; margin-bottom: 14px !important; } .single-post .baycor-checklist-box ul { margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; list-style: none !important; } .single-post .baycor-checklist-box ul li { padding-left: 0 !important; margin-bottom: 9px !important; list-style: none !important; font-size: 15px !important; line-height: 1.65 !important; } .single-post .baycor-checklist-box ul li:last-child { margin-bottom: 0 !important; } .single-post .baycor-checklist-box ul li:before, .single-post .baycor-checklist-box ul li::before { display: none !important; content: none !important; } /* 2. Executive CTA Section at the End of Posts (Redesigned & Readable) */ .single-post .baycor-post-cta-card, .baycor-post-cta-card { background: linear-gradient(135deg, #002D5A 0%, #00467F 100%) !important; border-radius: 16px !important; padding: 44px 36px !important; margin-top: 36px !important; margin-bottom: 24px !important; text-align: center !important; box-shadow: 0 14px 38px -8px rgba(0, 45, 90, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; position: relative !important; overflow: hidden !important; box-sizing: border-box !important; } /* Prevent double margin gap when CTA immediately follows a box, paragraph, or list */ .single-post .ed-blog-details-text p + .baycor-post-cta-card, .single-post .ed-blog-details-text ul + .baycor-post-cta-card, .single-post .ed-blog-details-text ol + .baycor-post-cta-card, .single-post .baycor-checklist-box + .baycor-post-cta-card { margin-top: 14px !important; } .single-post .baycor-post-cta-card h3, .single-post .ed-blog-details-text .baycor-post-cta-card h3, .single-post .baycor-post-cta-card .baycor-cta-title, .baycor-post-cta-card .baycor-cta-title { color: #FFFFFF !important; font-size: 24px !important; font-weight: 700 !important; margin-top: 0 !important; margin-bottom: 14px !important; line-height: 1.35 !important; letter-spacing: -0.2px !important; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important; } .single-post .baycor-post-cta-card p, .single-post .ed-blog-details-text .baycor-post-cta-card p, .single-post .baycor-post-cta-card .baycor-cta-desc, .baycor-post-cta-card .baycor-cta-desc { color: #E2E8F0 !important; font-size: 16px !important; line-height: 1.65 !important; max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 26px !important; } .single-post .baycor-post-cta-card strong, .baycor-post-cta-card strong { color: #FFFFFF !important; font-weight: 700 !important; } /* 3. Standardized Baycor Button (Red Base -> Pure White Hover + Red/White Arrow Badge) */ .single-post .baycor-post-cta-card .tracecoo-showcase-btn, .single-post .baycor-post-cta-card .baycor-btn-cta-primary, .baycor-post-cta-card .tracecoo-showcase-btn, .baycor-post-cta-card .baycor-btn-cta-primary { display: inline-flex !important; text-decoration: none !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: pointer !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn > span, .single-post .baycor-post-cta-card .baycor-btn-cta-primary > span, .baycor-post-cta-card .tracecoo-showcase-btn > span, .baycor-post-cta-card .baycor-btn-cta-primary > span { z-index: 1 !important; display: inline-flex !important; overflow: hidden !important; position: relative !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; padding: 16px 28px 16px 36px !important; font-size: 16px !important; font-weight: 700 !important; font-family: var(--cg-heading, "Rubik", sans-serif) !important; color: #FFFFFF !important; text-transform: capitalize !important; background-color: var(--cg-pr-c3, #C00000) !important; box-shadow: 0 4px 15px rgba(192, 0, 0, 0.35) !important; transition: all 400ms ease-in-out !important; box-sizing: border-box !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn > span:before, .single-post .baycor-post-cta-card .baycor-btn-cta-primary > span:before, .baycor-post-cta-card .tracecoo-showcase-btn > span:before, .baycor-post-cta-card .baycor-btn-cta-primary > span:before { top: 0 !important; left: 0 !important; z-index: -1 !important; width: 0% !important; height: 100% !important; content: "" !important; position: absolute !important; transition: 700ms cubic-bezier(0.55, 0.085, 0, 0.99) !important; background-color: #FFFFFF !important; border-radius: 10px !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn:hover > span:before, .single-post .baycor-post-cta-card .baycor-btn-cta-primary:hover > span:before, .baycor-post-cta-card .tracecoo-showcase-btn:hover > span:before, .baycor-post-cta-card .baycor-btn-cta-primary:hover > span:before { width: 100% !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn:hover > span, .single-post .baycor-post-cta-card .baycor-btn-cta-primary:hover > span, .baycor-post-cta-card .tracecoo-showcase-btn:hover > span, .baycor-post-cta-card .baycor-btn-cta-primary:hover > span { color: #002D5A !important; background-color: #FFFFFF !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn i, .single-post .baycor-post-cta-card .baycor-btn-cta-primary i, .baycor-post-cta-card .tracecoo-showcase-btn i, .baycor-post-cta-card .baycor-btn-cta-primary i { width: 30px !important; height: 30px !important; min-width: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; margin-left: 18px !important; border-radius: 4px !important; color: var(--cg-pr-c3, #C00000) !important; background-color: #FFFFFF !important; transition: all 350ms ease-in-out !important; } .single-post .baycor-post-cta-card .tracecoo-showcase-btn:hover i, .single-post .baycor-post-cta-card .baycor-btn-cta-primary:hover i, .baycor-post-cta-card .tracecoo-showcase-btn:hover i, .baycor-post-cta-card .baycor-btn-cta-primary:hover i { color: #FFFFFF !important; background-color: #C00000 !important; transform: translateX(4px) !important; } .single-post .baycor-post-cta-card .baycor-cta-btn-wrap { display: flex !important; justify-content: center !important; align-items: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 4. Tags & Share Separator Spacing */ .single-post .art-blog-share-tag { margin-top: 36px !important; padding-top: 25px !important; padding-bottom: 25px !important; border-top: 1px solid #e2e8f0 !important; } /* 5. Author Box Modern Styling (Baycor Logistics Team) */ .single-post .art-blog-details-author { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 32px !important; margin-top: 24px !important; margin-bottom: 40px !important; box-shadow: 0 8px 25px -6px rgba(0, 45, 90, 0.06) !important; display: flex !important; align-items: center !important; gap: 25px !important; } .single-post .art-blog-details-author .inner-img { width: 96px !important; height: 96px !important; min-width: 96px !important; border-radius: 50% !important; border: 3px solid #00467F !important; background: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 70, 127, 0.15) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 10px !important; box-sizing: border-box !important; } .single-post .art-blog-details-author .inner-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; background: transparent !important; } .single-post .art-blog-details-author .inner-text { max-width: 100% !important; } .single-post .art-blog-details-author .inner-text h4.name { color: #00467F !important; font-size: 22px !important; font-weight: 700 !important; margin-bottom: 8px !important; letter-spacing: -0.2px !important; } .single-post .art-blog-details-author .inner-text p { color: #475569 !important; font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 0 !important; } /* 6. Blog Posts: Deactivate and Remove Comments & Comment Box */ .single-post .gt-client-review-form, .single-post #comments, .single-post .blog-details-comments-wrap, .single-post #respond, .single-post .comment-respond, .single-post .agt-cn-form, .gt-client-review-form, #comments, .blog-details-comments-wrap, #respond, .comment-respond, .agt-cn-form { display: none !important; } /* 7. Home: Complete Freight & Warehouse Solutions - Hide contact email badge over image */ .cg-cta1-img .item-cta { display: none !important; } /* 8. Header Language Dropdown: Readable Dark Text for Options, White Text on Hover/Selected */ .action-language select, .action-language .gt_selector, select.gt_selector { color: #ffffff !important; } .action-language select option, .action-language .gt_selector option, select.gt_selector option, .action-currency select option { color: #001D36 !important; background-color: #ffffff !important; } .action-language select option:checked, .action-language select option:hover, .action-language select option:focus, .action-language .gt_selector option:checked, .action-language .gt_selector option:hover, .action-language .gt_selector option:focus, select.gt_selector option:checked, select.gt_selector option:hover, select.gt_selector option:focus, .action-currency select option:checked, .action-currency select option:hover, .action-currency select option:focus { color: #ffffff !important; background-color: #00467F !important; } /* 9. Tracecoo Bottom CTA Button: Ensure Icon Stays White on Hover */ #tracecoo-cta-banner .baycor-btn-cta-primary .baycor-btn-icon, .baycor-btn-cta-primary .baycor-btn-icon { background-color: #FFFFFF !important; color: #DF1119 !important; } #tracecoo-cta-banner .baycor-btn-cta-primary .baycor-btn-icon i, .baycor-btn-cta-primary .baycor-btn-icon i { color: #DF1119 !important; } #tracecoo-cta-banner .baycor-btn-cta-primary:hover .baycor-btn-icon, #tracecoo-cta-banner .baycor-btn-cta-primary:hover span.baycor-btn-icon, .baycor-btn-cta-primary:hover .baycor-btn-icon, .baycor-btn-cta-primary:hover span.baycor-btn-icon { background-color: #DF1119 !important; color: #FFFFFF !important; } #tracecoo-cta-banner .baycor-btn-cta-primary:hover .baycor-btn-icon i, #tracecoo-cta-banner .baycor-btn-cta-primary:hover span.baycor-btn-icon i, .baycor-btn-cta-primary:hover .baycor-btn-icon i, .baycor-btn-cta-primary:hover span.baycor-btn-icon i { color: #FFFFFF !important; } /* ========================================================================== BAYCOR CORPORATE LANGUAGE SWITCHER (EN | ES | IT) ========================================================================== */ .action-language { margin-right: 20px; display: inline-flex; align-items: center; } /* Remove legacy dropdown chevron arrow from language switcher */ .action-language::after, .action-language::before, .action-language:after, .action-language:before, .cg-header-section .top-action .action-language::after, .cg-header-section .top-action .action-language::before, .cg-header-section .top-action .action-language:after, .cg-header-section .top-action .action-language:before, .cg-header-section .action-language::after, .cg-header-section .action-language::before, .cg-header-section .action-language:after, .cg-header-section .action-language:before, .cg-header-section:is(.header_style_one) .cg-header-top .top-action .action-language::after, .cg-header-section:is(.header_style_one) .cg-header-top .top-action .action-language::before, .cg-header-section:is(.header_style_one) .cg-header-top .top-action .action-language:after, .cg-header-section:is(.header_style_one) .cg-header-top .top-action .action-language:before, .cg-header-section:is(.header_style_two) .cg-header-navigation .action-language::after, .cg-header-section:is(.header_style_two) .cg-header-navigation .action-language::before, .cg-header-section:is(.header_style_two) .cg-header-navigation .action-language:after, .cg-header-section:is(.header_style_two) .cg-header-navigation .action-language:before, .cg-header-section:is(.header_style_three) .cg-header-top-wrap .top-action .action-language::after, .cg-header-section:is(.header_style_three) .cg-header-top-wrap .top-action .action-language::before, .cg-header-section:is(.header_style_three) .cg-header-top-wrap .top-action .action-language:after, .cg-header-section:is(.header_style_three) .cg-header-top-wrap .top-action .action-language:before { display: none !important; content: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } .baycor-lang-switcher { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); padding: 3px 8px; border-radius: 6px; font-family: var(--cg-heading-font, 'Rubik', sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; } .baycor-lang-switcher a.lang-link { color: #FFFFFF !important; text-decoration: none !important; padding: 4px 6px; border-radius: 4px; transition: all 0.25s ease; opacity: 0.75; } .baycor-lang-switcher a.lang-link:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.2); color: #FFFFFF !important; } .baycor-lang-switcher a.lang-link.is-active { opacity: 1; background-color: #C00000 !important; color: #FFFFFF !important; box-shadow: 0 2px 6px rgba(192, 0, 0, 0.4); } .baycor-lang-switcher .lang-sep { color: rgba(255, 255, 255, 0.4); font-size: 11px; user-select: none; } @media (max-width: 991px) { .action-language { margin-right: 10px; } .baycor-lang-switcher { padding: 2px 6px; font-size: 11px; } } /* ========================================================================== LANDING PAGE APERTURA PETROLERA - RESPONSIVE MOBILE FIXES ========================================================================== */ @media (max-width: 767px) { /* 1. Hero Main Title: Escala adecuada para mobile sin desbordar */ .hero-main-title, h1.hero-main-title, .hero-text-col h1.hero-main-title { font-size: 24px !important; line-height: 1.25 !important; text-align: center !important; margin-bottom: 14px !important; word-break: break-word !important; } /* 2. Seccion "REPORTES Y KPIS OPERATIVOS": El icono de las lupas queda detras del titulo como marca de agua */ .reports-header { position: relative !important; display: block !important; margin-bottom: 25px !important; text-align: left !important; } .reports-header-text { width: 100% !important; position: relative !important; z-index: 2 !important; padding-right: 0 !important; } .reports-header-badge { position: absolute !important; top: -5px !important; right: 0 !important; opacity: 0.12 !important; pointer-events: none !important; z-index: 1 !important; display: block !important; } .reports-header-icon { width: 90px !important; max-width: 90px !important; height: auto !important; } /* 3. Seccion Tablet y Cajas: Tablet de primero en orden vertical, luego las cajas una por una */ .reports-split-layout { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 25px !important; } .reports-graphic-col { order: 1 !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 5px !important; } .reports-graphic-col img, .reports-main-graphic { width: 100% !important; max-width: 240px !important; height: auto !important; display: block !important; margin: 0 auto !important; } .reports-list-col { order: 2 !important; width: 100% !important; } .reports-list { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; } .reports-item { width: 100% !important; } /* 4. Seccion Estandares y Auditorias: Logo Halliburton visible y legible */ .reports-logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .report-logo-card { padding: 12px 14px !important; min-height: 64px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .logo-halliburton img, img.logo-halliburton, .report-logo-card.logo-halliburton img { max-height: 42px !important; width: auto !important; max-width: 135px !important; height: auto !important; object-fit: contain !important; display: block !important; } /* 5. Texto "Un socio logistico estrategico que se integra a tu operacion" */ .partner-title, h2.partner-title { font-size: 19px !important; line-height: 1.35 !important; padding: 10px 16px !important; border-radius: 8px !important; margin-bottom: 16px !important; display: inline-block !important; word-break: break-word !important; } } @media (max-width: 480px) { .hero-main-title, h1.hero-main-title, .hero-text-col h1.hero-main-title { font-size: 21px !important; line-height: 1.25 !important; } .partner-title, h2.partner-title { font-size: 17px !important; line-height: 1.35 !important; padding: 8px 12px !important; } .reports-header-icon { width: 75px !important; max-width: 75px !important; } .reports-main-graphic { max-width: 220px !important; } } /* ========================================================================== Header Navigation Responsiveness (Single Line on All Screen Sizes) ========================================================================== */ .cg-header-section .cg-header-navigation .main-navigation ul.navbar-nav { flex-wrap: nowrap !important; } .cg-header-section .cg-header-navigation .main-navigation ul.navbar-nav > li { white-space: nowrap !important; } .cg-header-section .cg-header-navigation .main-navigation ul.navbar-nav > li > a { white-space: nowrap !important; } @media (max-width: 1700px) { .cg-header-section:is(.header_style_one) .cg-header-navigation .main-navigation li { margin: 0 14px !important; } } @media (max-width: 1500px) { .cg-header-section:is(.header_style_one) .cg-header-navigation .main-navigation li { margin: 0 10px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation { padding: 22px 30px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .brand-logo { max-width: 170px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .header-btn a { padding: 14px 24px !important; } } @media (max-width: 1360px) { .cg-header-section:is(.header_style_one) .cg-header-navigation .main-navigation li { margin: 0 7px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .main-navigation li a { font-size: 14px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation { padding: 18px 20px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .brand-logo { max-width: 150px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .header-btn a { padding: 12px 18px !important; font-size: 13px !important; } .cg-header-section:is(.header_style_one) .cg-header-navigation .action-cta .item-text { font-size: 13px !important; } } /* Deactivate offcanvas menu trigger completely */ .navSidebar-button, .offcanvas-trigger, .xs-sidebar-group { display: none !important; } /* ========================================================================== Hero Slider Seamless Loading & Elegant Transition Fix ========================================================================== */ /* 1. Prevent raw un-split title & slider text flash before SplitText/Swiper initializes */ .hero-text1 .hero_title { opacity: 0; transition: opacity 0.35s ease-out; } .cg-hero1-slider-for.swiper-initialized .hero-text1 .hero_title, .swiper-slide:is(.swiper-slide-active) .hero-text1 .hero_title { opacity: 1; } .cg-hero1-slider-for:not(.swiper-initialized) { opacity: 0; transition: opacity 0.4s ease-out; } .cg-hero1-slider-for.swiper-initialized { opacity: 1; } /* 2. Prevent orphan navigation card flash before Swiper initialization */ .cg-hero1-slider-nav { opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s ease; } .cg-hero1-slider-nav.swiper-initialized { opacity: 1; visibility: visible; } /* 3. Soft initial presentation for hero container */ .cg-hero1-slider { position: relative; overflow: hidden; } /* 4. Smooth transition for navigation thumbnails */ .cg-hero1-thumb { transition: all 0.4s ease-in-out !important; } /* 5. Smooth slide transition */ .cg-hero1-slider-for .swiper-slide { transition: opacity 0.6s ease-in-out; } /* ========================================================================== Hero Slider Mobile & Tablet Image Framing & Contrast Optimization ========================================================================== */ /* 1. Global / Desktop Contrast Overlay (Replaces 404 bg-shape.png with elegant gradient) */ .cg-hr1-item .item-img:before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(8, 28, 58, 0.88) 0%, rgba(8, 28, 58, 0.65) 45%, rgba(8, 28, 58, 0.2) 80%, rgba(8, 28, 58, 0.05) 100%) !important; } /* 2. Mobile & Tablet Responsive Framing (max-width: 991px) */ @media (max-width: 991px) { /* Vertical readability gradient on mobile/tablet */ .cg-hr1-item .item-img:before { background: linear-gradient(180deg, rgba(8, 28, 58, 0.82) 0%, rgba(8, 28, 58, 0.50) 45%, rgba(8, 28, 58, 0.85) 100%) !important; } /* Slide 1: Focus on the heavy crane lifting the industrial rig */ .cg-hero1-slider-for img[src*="SLIDE-1"], .cg-hero1-slider-for [data-swiper-slide-index="0"] .item-img img { object-position: 72% center !important; } /* Slide 2: Focus on the mobile crane hoisting the Mack truck */ .cg-hero1-slider-for img[src*="SLIDE-2"], .cg-hero1-slider-for [data-swiper-slide-index="1"] .item-img img { object-position: 70% center !important; } /* Slide 3: Focus on the semi-truck pulling the massive industrial pipe load */ .cg-hero1-slider-for img[src*="SLIDE-3"], .cg-hero1-slider-for [data-swiper-slide-index="2"] .item-img img { object-position: 28% center !important; } } /* 3. Small Mobile Devices (max-width: 767px) Uniform Height & Typography */ @media (max-width: 767px) { .cg-hr1-item { min-height: 480px !important; display: flex !important; align-items: center !important; } .cg-hr1-item .item-inner-item { width: 100% !important; } .hero-text1 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } }