/* ========================================================= !!! EMERGENCY OVERRIDE - FORCE THESE CHANGES !!! ========================================================= */ /* FORCE header changes */ /* FORCE hero image to fill space */ /* HIDE floating badges */ .floating-badge { display: none !important; } /* FORCE stats layout */ /* FORCE tech bar */ .trusted-tools-card { display: flex !important; align-items: center !important; padding: 12px 20px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; } .tool-logos { display: flex !important; align-items: center !important; gap: 16px !important; flex: 1 !important; justify-content: space-around !important; } .tool-logo { font-size: 12px !important; color: #374151 !important; } .tool-logo img { height: 20px !important; width: auto !important; } /*================================================== BETHEL TALENT SOLUTIONS Premium Website Stylesheet Updated Version ==================================================*/ /*========================================== RESET ==========================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:"Inter", sans-serif; background:#ffffff; color:#1F2937; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; transition:all .35s cubic-bezier(.4,0,.2,1); } /*========================================== ROOT VARIABLES ==========================================*/ :root{ /* Brand */ --primary:#1E40AF; --primary-dark:#1E3A8A; --secondary:#3B82F6; --accent:#38BDF8; --gold:#F4B400; /* Neutral */ --dark:#0F172A; --gray:#64748B; --light:#F8FAFC; --surface:#FFFFFF; --border:#E2E8F0; /* Status */ --success:#22C55E; /* Layout */ --container:1280px; /* Radius */ --radius-sm:14px; --radius-md:20px; --radius-lg:28px; /* Shadows */ --shadow-sm: 0 8px 20px rgba(15,23,42,.05); --shadow-md: 0 15px 40px rgba(15,23,42,.08); --shadow-lg: 0 30px 70px rgba(15,23,42,.12); /* Transition */ --transition:.35s cubic-bezier(.4,0,.2,1); } /*========================================== TYPOGRAPHY ==========================================*/ h1, h2, h3, h4{ color:var(--dark); font-weight:800; line-height:1.12; letter-spacing:-.02em; } h1{ font-size:clamp(48px,5vw,70px); line-height:1.04; letter-spacing:-3px; } h2{ font-size:clamp(2.3rem,4vw,3.4rem); } h3{ font-size:1.6rem; } h4{ font-size:1.2rem; } p{ color:var(--gray); font-size:16px; line-height:1.85; margin-bottom:24px; } /*========================================== GLOBAL CONTAINER ==========================================*/ .container { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /*========================================== SECTION SPACING ==========================================*/ section{ padding:120px 0; } .section-header{ max-width:760px; margin:0 auto 72px; text-align:center; } .section-header h2{ margin-bottom:20px; } .section-header p{ max-width:700px; margin-inline:auto; } .section-tag{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; margin-bottom:22px; border-radius:999px; background:#EFF6FF; color:var(--primary); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } /*========================================== BUTTONS ==========================================*/ .btn-primary, .btn-secondary{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:15px 30px; border-radius:50px; font-weight:700; white-space:nowrap; transition:var(--transition); } .btn-primary{ color:#fff; background:linear-gradient( 135deg, var(--primary), var(--secondary) ); box-shadow:var(--shadow-sm); } .btn-primary:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } .btn-secondary{ color:var(--primary); background:#fff; border:2px solid #D9E2F0; } .btn-secondary:hover{ color:var(--primary); background:#EFF6FF; border-color:var(--primary); transform:translateY(-3px); } .full-width{ width:100%; } /*========================================== UTILITIES ==========================================*/ xt-center{ text-align:center; } .hidden{ display:none!important; } .rounded{ border-radius:var(--radius-lg); } .shadow{ box-shadow:var(--shadow-md); } /*================================================== HEADER ==================================================*/ /*========================================== LOGO ==========================================*/ /*========================================== NAVIGATION ==========================================*/ /*========================================== RIGHT NAV ACTIONS ==========================================*/ /*========================================== MOBILE MENU ==========================================*/ /*================================================== HERO SECTION ==================================================*/ /*========================================== HERO BUTTONS ==========================================*/ /*========================================== TRUST SIGNALS ==========================================*/ /*========================================== HERO STATS ==========================================*/ /*================================================== HERO IMAGE ==================================================*/ /* IMPORTANT FIX: The image is intentionally NOT styled as a card. Remove rigid borders, heavy card shadows and unnecessary framing. */ /*================================================== COMPANY STATS ==================================================*/ .stats{ padding:80px 0; background:#F8FAFC; } .stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; align-items:stretch; } .stat-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:160px; padding:30px 20px; text-align:center; background:#FFFFFF; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm); } .stat-box h2{ margin:0 0 10px; color:var(--primary); font-size:42px; line-height:1; } .stat-box p{ margin:0; color:var(--gray); font-size:15px; line-height:1.5; } /*================================================== TRUSTED TECHNOLOGY & PLATFORMS ==================================================*/ .trusted-tools{ padding:40px 0 70px; background:#ffffff; } .trusted-tools-card{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:20px 32px; background:#ffffff; border:1px solid #F1F5F9; border-radius:20px; box-shadow: 0 10px 25px -5px rgba(15,23,42,.05), 0 8px 10px -6px rgba(15,23,42,.05); } /* LABEL */ .trusted-tools-label{ flex-shrink:0; color:#1D4ED8; font-size:12px; font-weight:800; letter-spacing:.08em; white-space:nowrap; } /* LOGO ROW */ .tool-logos{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex:1; min-width:0; } /* INDIVIDUAL LOGO */ .tool-logo{ display:flex; align-items:center; gap:8px; min-height:28px; white-space:nowrap; color:#334155; font-size:15px; font-weight:600; } /* LOGO IMAGE */ .tool-logo img{ width:auto; height:27px; max-width:125px; object-fit:contain; flex-shrink:0; } /* GOOGLE */ .google-workspace img{ width:auto; height:26px; max-width:110px; } /* MICROSOFT */ .microsoft-365 img{ width:auto; height:26px; max-width:110px; } /* TABLET */ @media(max-width:1200px){ .trusted-tools-card{ align-items:flex-start; flex-direction:column; gap:22px; } .trusted-tools-label{ width:100%; } .tool-logos{ width:100%; justify-content:space-between; } } /* MOBILE */ @media(max-width:768px){ .trusted-tools{ padding:30px 0 60px; } .trusted-tools-card{ padding:24px; } .trusted-tools-label{ text-align:center; } .tool-logos{ justify-content:center; flex-wrap:wrap; gap:22px 24px; } } /* SMALL MOBILE */ @media(max-width:480px){ .tool-logos{ display:grid; grid-template-columns:repeat(2,1fr); width:100%; gap:22px 16px; } .tool-logo{ justify-content:center; font-size:13px; } .tool-logo img{ height:24px; max-width:100px; } } @media(max-width:480px){ .tool-logos{ display:grid; grid-template-columns:repeat(2,1fr); width:100%; gap:22px 16px; } .tool-logo{ justify-content:center; font-size:13px; } .tool-logo img{ height:24px; max-width:100px; } } /*================================================== SERVICES ==================================================*/ .services{ background:#F8FAFC; } .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .service-card{ position:relative; display:flex; flex-direction:column; height:100%; padding:0; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-sm); transition:var(--transition); } .service-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient( 90deg, var(--primary), var(--secondary) ); transform:scaleX(0); transform-origin:left; transition:var(--transition); } .service-card:hover{ transform:translateY(-14px); border-color:#60A5FA; box-shadow: 0 40px 80px rgba(15,23,42,.14), 0 0 0 1px rgba(96,165,250,.20); } .service-card:hover::before{ transform:scaleX(1); } .service-image{ width:100%; height:210px; display:block; object-fit:cover; } .service-content{ display:flex; flex:1; flex-direction:column; padding:30px 28px 28px; } .service-icon{ width:82px; height:82px; display:flex; align-items:center; justify-content:center; margin-bottom:28px; border-radius:50%; background:linear-gradient( 135deg, #EFF6FF, #DBEAFE ); border:1px solid rgba(59,130,246,.12); transition:var(--transition); } .service-card:hover .service-icon{ transform:scale(1.08) rotate(-6deg); } .service-icon i{ color:var(--primary); font-size:38px; } .service-tag{ display:inline-flex; width:fit-content; padding:6px 14px; margin-bottom:18px; border-radius:999px; background:#EFF6FF; color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .service-card h3{ margin-bottom:16px; font-size:24px; } .service-card p{ margin-bottom:24px; color:var(--gray); font-size:15px; line-height:1.8; } .service-features{ padding:0; margin:0 0 28px; list-style:none; } .service-features li{ display:flex; align-items:center; gap:12px; margin-bottom:12px; color:var(--dark); font-size:15px; font-weight:500; } .service-features li i{ width:22px; color:#16A34A; font-size:18px; text-align:center; } .service-card a{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; color:var(--primary); font-weight:700; } .service-card:hover a{ gap:14px; } /*================================================== INDUSTRIES ==================================================*/ .industries{ background:#F8FAFC; } .industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .industry-card{ padding:35px; text-align:center; background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-sm); transition:var(--transition); } .industry-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); } .industry-card i{ margin-bottom:20px; color:var(--primary); font-size:46px; } .industry-card h3{ margin-bottom:15px; } .industry-card p{ margin:0; } /*========================================== WHY BETHEL / WHY OUTSOURCE ==========================================*/ .why-us{ background:#ffffff; } /*========================================== SECTION HEADER ==========================================*/ .why-header{ max-width:900px; margin:0 auto 60px; text-align:center; } .why-header .section-tag{ margin-bottom:25px; } .why-header h2{ color:#0F172A; font-size:clamp(36px, 5vw, 58px); line-height:1.12; letter-spacing:-2px; margin-bottom:24px; } .why-header p{ max-width:760px; margin:0 auto; color:#64748B; font-size:18px; line-height:1.8; } .why-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1050px; margin: 0 auto; align-items: stretch; } .comparison-card { position: relative; padding: 48px; min-width: 0; background: #ffffff; border: 1px solid #E2E8F0; border-radius: 24px; box-shadow: 0 20px 40px rgba(15, 23, 42, .06); } .solution-card { border: 2px solid #2563EB; } /* WITHOUT BETHEL */ .pain-card{ background:#F8FAFC; border:1px solid #E2E8F0; } /* WITH BETHEL */ .solution-card{ position:relative; } /* HOVER EFFECT */ .solution-card:hover{ transform:translateY(-8px); box-shadow: 0 30px 65px rgba(30,64,175,.15); } .recommended-badge { position: absolute; top: 22px; right: 24px; padding: 7px 14px; border-radius: 999px; background: #1D4ED8; color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: .06em; z-index: 10; } /*========================================== CARD HEADER ==========================================*/ .comparison-card-header h3 { min-height: 58px; display: flex; align-items: center; } .comparison-title { display: flex; align-items: center; gap: 16px; } .comparison-title h3 { margin: 0; white-space: nowrap; } .comparison-title h3{ margin:0; color:#0F172A; font-size:24px; line-height:1.25; } /*========================================== HEADER ICONS ==========================================*/ .comparison-icon{ width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; } /* PAIN ICON */ .pain-icon{ background:#FEE2E2; color:#DC2626; } /* SOLUTION ICON */ .solution-icon{ background:#DBEAFE; color:var(--primary); } /* BOTH CARD HEADERS */ .comparison-title { display: flex; align-items: center; gap: 16px; } /* HEADING */ .comparison-title h3 { margin: 0; white-space: nowrap; } /* RIGHT CARD HEADER */ .solution-card .comparison-card-header { display: flex; align-items: center; } /*========================================== COMPARISON LIST ==========================================*/ .comparison-list{ list-style:none; padding:0; margin:0; } .comparison-list li{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; } .comparison-list{ list-style:none; padding:0; margin:0; } .comparison-list li{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; color:#334155; font-size:16px; line-height:1.5; } .comparison-list li:last-child{ margin-bottom:0; } .list-icon{ width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center; margin-top:1px; border-radius:50%; font-size:11px; } .pain-list-icon{ background:#FEE2E2; color:#DC2626; } .solution-list-icon{ background:#D1FAE5; color:#059669; } .solution-card .comparison-list li{ color:#0F172A; font-weight:500; } /*========================================== LIST ICONS ==========================================*/ .list-icon { width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center; margin-top:1px; border-radius:50%; font-size:11px; font-weight:700; } /* PAIN LIST */ .pain-list-icon{ background:#FEE2E2; color:#DC2626; } /* SOLUTION LIST */ .solution-list-icon{ background:#D1FAE5; color:#059669; } /* SOLUTION TEXT */ .solution-card .comparison-list li{ color:#0F172A; font-weight:500; } /*========================================== RESPONSIVE ==========================================*/ @media(max-width:900px){ .why-comparison-grid{ grid-template-columns:1fr; max-width:650px; } } @media(max-width:768px){ .why-header h2{ font-size:38px; letter-spacing:-1px; } .why-header p{ font-size:16px; } .comparison-card{ padding:30px; min-height:auto; } .comparison-title h3{ font-size:21px; } } @media(max-width:480px){ .why-header h2{ font-size:32px; } .comparison-card{ padding:25px 22px; } .comparison-title{ align-items:flex-start; } .comparison-title h3{ font-size:19px; } .recommended-badge{ position:static; display:inline-flex; margin-bottom:20px; } } /*================================================== HIRING PROCESS ==================================================*/ .process{ background:#F8FAFC; } .process-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:60px; } .process-grid::before{ content:""; position:absolute; top:38px; left:10%; right:10%; height:2px; background:#DBEAFE; z-index:0; } .process-card{ position:relative; z-index:1; padding:40px 28px; text-align:center; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow-sm); transition:var(--transition); } .process-card:hover{ transform:translateY(-10px); border-color:#BFDBFE; box-shadow:0 25px 55px rgba(15,23,42,.12); } .process-number{ width:76px; height:76px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; border-radius:50%; background:linear-gradient( 135deg, var(--primary), var(--secondary) ); color:#fff; font-size:24px; font-weight:800; } .process-card h3{ margin-bottom:16px; font-size:22px; } .process-card p{ color:var(--gray); line-height:1.7; } /*================================================== TESTIMONIALS ==================================================*/ .testimonials{ background:#F8FAFC; } /*================================================== TESTIMONIAL CAROUSEL ==================================================*/ .testimonial-carousel{ position:relative; display:flex; align-items:center; gap:24px; width:100%; } /*================================================== VIEWPORT ==================================================*/ .testimonial-viewport{ width:100%; overflow:hidden; } /*================================================== SLIDING TRACK ==================================================*/ .testimonial-track{ display:flex; gap:24px; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform; } /*================================================== CARD ==================================================*/ .testimonial-card{ flex:0 0 calc((100% - 48px) / 3); min-width:0; padding:32px; background:#ffffff; border:1px solid #E2E8F0; border-radius:16px; box-shadow: 0 10px 25px -5px rgba(15,23,42,.05), 0 8px 10px -6px rgba(15,23,42,.05); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .testimonial-card:hover{ transform:translateY(-5px); border-color:#BFDBFE; box-shadow: 0 20px 35px -10px rgba(15,23,42,.12), 0 10px 15px -8px rgba(15,23,42,.08); } /*================================================== STARS ==================================================*/ .testimonial-stars{ margin-bottom:22px; color:#F4B400; font-size:18px; letter-spacing:3px; } /*================================================== QUOTE ==================================================*/ .testimonial-quote{ min-height:125px; margin:0 0 30px; color:#475569; font-size:16px; line-height:1.8; font-style:italic; } /*================================================== CLIENT ==================================================*/ .testimonial-client{ display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid #F1F5F9; } .client-avatar{ width:48px; height:48px; flex:0 0 48px; object-fit:cover; border:2px solid #DBEAFE; border-radius:50%; background:#EFF6FF; } .testimonial-client h4{ margin:0 0 4px; color:#0F172A; font-size:16px; line-height:1.3; } .testimonial-client span{ color:#64748B; font-size:13px; } /*================================================== ARROWS ==================================================*/ .testimonial-arrow{ width:52px; height:52px; flex:0 0 52px; display:flex; align-items:center; justify-content:center; border:1px solid #BFDBFE; border-radius:50%; background:#ffffff; color:#1D4ED8; font-size:17px; cursor:pointer; box-shadow: 0 10px 25px -5px rgba(15,23,42,.08); transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } .testimonial-arrow:hover{ background:#1D4ED8; color:#ffffff; transform:translateY(-3px); box-shadow: 0 15px 30px -8px rgba(29,78,216,.35); } .testimonial-arrow:disabled{ opacity:.45; cursor:not-allowed; transform:none; } /*================================================== DOTS ==================================================*/ .testimonial-dots{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:32px; } .testimonial-dot{ width:10px; height:10px; padding:0; border:0; border-radius:50%; background:#CBD5E1; cursor:pointer; transition: width .3s ease, background .3s ease, transform .3s ease; } .testimonial-dot:hover{ transform:scale(1.15); } .testimonial-dot.active{ width:32px; border-radius:999px; background:#2563EB; } /*================================================== TABLET ==================================================*/ @media(max-width:1023px){ .testimonial-card{ flex-basis:calc((100% - 24px) / 2); } } /*================================================== MOBILE ==================================================*/ @media(max-width:767px){ .testimonial-carousel{ gap:10px; } .testimonial-arrow{ width:42px; height:42px; flex-basis:42px; font-size:14px; } .testimonial-card{ flex-basis:100%; padding:26px; } .testimonial-quote{ min-height:auto; font-size:15px; } } /*================================================== SMALL MOBILE ==================================================*/ @media(max-width:480px){ .testimonial-carousel{ display:block; } .testimonial-arrow{ position:absolute; top:50%; z-index:5; transform:translateY(-50%); } .testimonial-arrow:hover{ transform:translateY(-50%) scale(1.05); } .testimonial-prev{ left:8px; } .testimonial-next{ right:8px; } .testimonial-card{ padding:24px 22px; } } /*================================================== FAQ ==================================================*/ .faq{ background:#F8FAFC; } .faq-wrapper{ max-width:900px; margin:auto; } .faq-item{ margin-bottom:18px; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); } .faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:24px 30px; border:none; background:#fff; color:var(--dark); font-size:18px; font-weight:700; text-align:left; cursor:pointer; } .faq-question i{ color:var(--primary); transition:.3s; } .faq-answer{ display:none; padding:0 30px 25px; } .faq-item.active .faq-answer{ display:block; } .faq-item.active .faq-question i{ transform:rotate(180deg); } /*================================================== PRICING ==================================================*/ .pricing{ background:#fff; } .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .pricing-card{ padding:45px; text-align:center; background:#fff; border:1px solid var(--border); border-radius:28px; box-shadow:var(--shadow-sm); transition:var(--transition); } .pricing-card:hover{ transform:translateY(-12px); box-shadow:var(--shadow-lg); } .pricing-card.featured{ border:2px solid var(--primary); transform:scale(1.03); } .price{ margin:25px 0; color:var(--primary); font-size:52px; font-weight:800; } .price span{ color:var(--gray); font-size:18px; } .pricing-card ul{ margin:35px 0; list-style:none; } .pricing-card ul li{ margin:16px 0; color:var(--gray); } .pricing-card ul li i{ margin-right:10px; color:var(--success); } /*================================================== CONTACT ==================================================*/ .contact{ background:#fff; } .contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:start; } .contact-info{ display:flex; flex-direction:column; gap:25px; } .contact-card{ display:flex; align-items:flex-start; gap:20px; padding:38px; background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-sm); transition:var(--transition); } .contact-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .contact-card i{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:16px; background:#EEF4FF; color:var(--primary); font-size:24px; } .contact-form{ padding:45px; background:#fff; border:1px solid var(--border); border-radius:30px; box-shadow:var(--shadow-lg); } .contact-form form{ display:flex; flex-direction:column; gap:18px; } .contact-form input, .contact-form select, .contact-form textarea{ width:100%; padding:18px; border:1px solid var(--border); border-radius:14px; font-family:"Inter",sans-serif; font-size:16px; transition:.3s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(29,78,216,.12); } /*================================================== FINAL CTA ==================================================*/ .final-cta{ position:relative; overflow:hidden; padding:96px 24px; background: radial-gradient( circle at 50% -20%, rgba(96,165,250,.30), transparent 45% ), linear-gradient( 135deg, #1E3A8A 0%, #1D4ED8 55%, #1E40AF 100% ); color:#ffffff; text-align:center; } /* CONTENT LAYER */ .final-cta .container{ position:relative; z-index:2; max-width:900px; margin:0 auto; } /* BACKGROUND GLOW */ .final-cta::before{ content:""; position:absolute; width:520px; height:520px; top:-300px; left:50%; transform:translateX(-50%); border-radius:50%; background:rgba(255,255,255,.10); filter:blur(40px); pointer-events:none; } /* BADGE */ .final-cta .section-tag{ display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 20px; margin:0 auto 26px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(255,255,255,.12); color:#ffffff !important; font-size:12px; font-weight:800; letter-spacing:.08em; line-height:1; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* HEADING */ .final-cta h2{ display:block; max-width:850px; margin:0 auto 20px; color:#ffffff !important; font-size:clamp(36px,5vw,58px); font-weight:800; line-height:1.08; letter-spacing:-2px; } /* DESCRIPTION */ .final-cta p{ display:block; max-width:700px; margin:0 auto 36px; color:rgba(255,255,255,.88) !important; font-size:17px; line-height:1.7; } /* BUTTON WRAPPER */ .final-cta .cta-buttons{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; } /* ALL BUTTONS */ .final-cta .cta-buttons a{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 30px; border-radius:12px; font-weight:700; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } /* PRIMARY BUTTON */ .final-cta .btn-primary{ background:#ffffff !important; color:#1D4ED8 !important; border:1px solid #ffffff; box-shadow: 0 14px 30px rgba(15,23,42,.22); } .final-cta .btn-primary:hover{ transform:translateY(-3px); background:#F8FAFC !important; box-shadow: 0 18px 38px rgba(15,23,42,.28); } /* SECONDARY BUTTON */ .final-cta .btn-secondary{ background:transparent !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.65); } .final-cta .btn-secondary:hover{ transform:translateY(-3px); background:rgba(255,255,255,.12) !important; border-color:#ffffff; } /* MOBILE */ @media(max-width:600px){ .final-cta{ padding:76px 20px; } .final-cta h2{ font-size:36px; letter-spacing:-1px; } .final-cta p{ font-size:15px; } .final-cta .cta-buttons{ flex-direction:column; width:100%; } .final-cta .cta-buttons a{ width:100%; max-width:320px; } } /*================================================== FOOTER ==================================================*/ .footer{ padding-top:80px; background:#08111F; color:#CBD5E1; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; margin-bottom:60px; } .footer-logo{ height:60px; margin-bottom:20px; } .footer h4{ margin-bottom:22px; color:#fff; } .footer ul{ list-style:none; } .footer li{ margin-bottom:12px; } .footer a{ color:#CBD5E1; } .footer a:hover{ color:#fff; } .footer-social{ display:flex; gap:16px; } .footer-social a{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#13233E; } .footer-social a:hover{ background:var(--primary); transform:translateY(-4px); } .footer-bottom{ padding:30px 0; border-top:1px solid rgba(255,255,255,.08); text-align:center; } /*================================================== MODAL ==================================================*/ .modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(0,0,0,.65); } .modal.active{ display:flex; } .modal-content{ position:relative; width:100%; max-width:620px; padding:45px; background:#fff; border-radius:28px; animation:modalFade .35s ease; } .close-modal{ position:absolute; top:18px; right:22px; font-size:30px; cursor:pointer; } .modal-content form{ display:flex; flex-direction:column; gap:18px; margin-top:30px; } .modal-content input, .modal-content textarea{ padding:18px; border:1px solid var(--border); border-radius:14px; } /*================================================== ANIMATIONS ==================================================*/ @keyframes modalFade{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } } @keyframes float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } } @keyframes fadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } .fade-up{ animation:fadeUp .8s ease both; } /*================================================== SCROLLBAR ==================================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:20px; } ::-webkit-scrollbar-track{ background:#EEF2F7; } /*================================================== BETHEL PREMIUM UI POLISH OVERRIDES Add at the very bottom of style.css ==================================================*/ /*------------------------------------------ PREMIUM DESIGN TOKENS ------------------------------------------*/ :root{ --primary:#1E40AF; --primary-hover:#1D4ED8; --primary-dark:#1E3A8A; --blue-soft:#EFF6FF; --blue-border:#DBEAFE; --dark:#0F172A; --text:#334155; --muted:#64748B; --surface:#FFFFFF; --surface-soft:#F8FAFC; --border:#E2E8F0; --shadow-card: 0 10px 25px -5px rgba(15,23,42,.05), 0 8px 10px -6px rgba(15,23,42,.05); --shadow-card-hover: 0 20px 35px -10px rgba(15,23,42,.12), 0 10px 15px -8px rgba(30,64,175,.08); --shadow-blue: 0 15px 35px rgba(30,64,175,.16); } /*------------------------------------------ GLOBAL PAGE POLISH ------------------------------------------*/ body{ background:#FFFFFF; color:var(--text); } section{ position:relative; } section:nth-of-type(even){ background:#F8FAFC; } section:nth-of-type(odd){ background:#FFFFFF; } /*------------------------------------------ HEADER ------------------------------------------*/ /*------------------------------------------ BADGES / PILLS ------------------------------------------*/ /*------------------------------------------ BUTTONS ------------------------------------------*/ .btn-primary{ background: linear-gradient( 135deg, #1E40AF 0%, #1D4ED8 100% ); box-shadow: 0 10px 20px rgba(30,64,175,.18), inset 0 1px 0 rgba(255,255,255,.15); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-primary:hover{ transform:translateY(-3px) scale(1.015); filter:brightness(1.05); box-shadow: 0 16px 30px rgba(30,64,175,.25), 0 4px 8px rgba(15,23,42,.08); } .btn-secondary{ background:#FFFFFF; border:1px solid #BFDBFE; box-shadow:0 4px 12px rgba(15,23,42,.04); } .btn-secondary:hover{ transform:translateY(-3px) scale(1.01); background:#F8FBFF; border-color:#2563EB; box-shadow:0 10px 20px rgba(30,64,175,.10); } /*------------------------------------------ HERO ------------------------------------------*/ /*------------------------------------------ HERO TRUST ITEMS ------------------------------------------*/ /*------------------------------------------ HERO STATS ------------------------------------------*/ /*------------------------------------------ SECTION HEADERS ------------------------------------------*/ .section-header{ margin-bottom:60px; } .section-header h2{ letter-spacing:-1.5px; } .section-header p{ color:#64748B; } /*------------------------------------------ SERVICE CARDS ------------------------------------------*/ .service-card{ position:relative; overflow:hidden; border:1px solid #E2E8F0; border-top:2px solid rgba(37,99,235,.18); border-radius:22px; background:#FFFFFF; box-shadow:var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .service-card:hover{ transform:translateY(-6px); border-color:#BFDBFE; box-shadow:var(--shadow-card-hover); } .service-icon{ width:64px; height:64px; margin-bottom:24px; border-radius:18px; background: linear-gradient( 135deg, #EFF6FF, #DBEAFE ); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(30,64,175,.06); } .service-icon i{ color:#1D4ED8; font-size:29px; } .service-card h3{ color:#0F172A; } .service-card p{ color:#64748B; } /*------------------------------------------ SERVICE FEATURE CHECKMARKS ------------------------------------------*/ .service-features li{ transition: transform .2s ease, color .2s ease; } .service-features li:hover{ transform:translateX(3px); } .service-features li i{ color:#16A34A; } /*------------------------------------------ INDUSTRY CARDS ------------------------------------------*/ .industry-card{ position:relative; overflow:hidden; border:1px solid #E2E8F0; border-top:2px solid rgba(37,99,235,.18); border-radius:20px; background:#FFFFFF; box-shadow:var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .industry-card:hover{ transform:translateY(-6px); border-color:#BFDBFE; box-shadow:var(--shadow-card-hover); } .industry-card i{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; margin-bottom:18px; border-radius:18px; background:#EFF6FF; color:#1D4ED8; } /*------------------------------------------ WHY BETHEL COMPARISON ------------------------------------------*/ .comparison-card{ box-shadow:var(--shadow-card); } .pain-card{ background:#F8FAFC; } .solution-card{ border-color:#2563EB; box-shadow: 0 20px 45px rgba(30,64,175,.10), 0 8px 18px rgba(15,23,42,.04); } .solution-card:hover{ transform:translateY(-6px); box-shadow: 0 28px 55px rgba(30,64,175,.16), 0 10px 20px rgba(15,23,42,.06); } /*------------------------------------------ PROCESS CARDS ------------------------------------------*/ .process-card{ border:1px solid #E2E8F0; border-top:2px solid rgba(37,99,235,.2); box-shadow:var(--shadow-card); } .process-card:hover{ transform:translateY(-6px); border-color:#BFDBFE; box-shadow:var(--shadow-card-hover); } /*------------------------------------------ COMPANY STATS ------------------------------------------*/ .stats{ background:#F8FAFC; } .stats-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; } .stat-box{ position:relative; overflow:hidden; min-height:150px; padding:28px 20px; background:#FFFFFF; border:1px solid #E2E8F0; border-top:2px solid rgba(37,99,235,.2); border-radius:20px; box-shadow:var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease; } .stat-box::after{ content:""; position:absolute; right:-30px; bottom:-30px; width:100px; height:100px; border-radius:50%; background:rgba(59,130,246,.06); } .stat-box:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); } .stat-box h2{ position:relative; z-index:1; color:#1D4ED8; } .stat-box p{ position:relative; z-index:1; } /*------------------------------------------ TESTIMONIALS ------------------------------------------*/ .testimonials{ background:#FFFFFF; } .testimonial-grid{ position:relative; } .testimonial{ border:1px solid #E2E8F0; border-radius:22px; background:#FFFFFF; box-shadow:var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease; } .testimonial:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hover); } .client img{ border:3px solid #EFF6FF; box-shadow:0 4px 10px rgba(15,23,42,.08); } /* TESTIMONIAL ARROWS */ .testimonial-arrow{ position:absolute; top:50%; z-index:5; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid #DBEAFE; border-radius:50%; background:#FFFFFF; color:#1D4ED8; box-shadow:0 8px 20px rgba(15,23,42,.08); cursor:pointer; transform:translateY(-50%); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .testimonial-arrow:hover{ background:#EFF6FF; transform:translateY(-50%) scale(1.08); box-shadow:0 12px 25px rgba(30,64,175,.14); } .testimonial-arrow.prev{ left:-22px; } .testimonial-arrow.next{ right:-22px; } /* TESTIMONIAL DOTS */ .testimonial-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; } .testimonial-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#CBD5E1; cursor:pointer; transition: width .25s ease, background .25s ease; } .testimonial-dot.active{ width:24px; border-radius:999px; background:#2563EB; } /*------------------------------------------ CONTACT FORM ------------------------------------------*/ .contact-form{ background:#FFFFFF; border:1px solid #E2E8F0; box-shadow: 0 20px 50px rgba(15,23,42,.08), 0 5px 15px rgba(15,23,42,.04); } .contact-form input, .contact-form select, .contact-form textarea{ background:#F8FAFC; border:1px solid #E2E8F0; border-radius:14px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ background:#FFFFFF; border-color:#2563EB; box-shadow: 0 0 0 4px rgba(37,99,235,.12), 0 5px 12px rgba(15,23,42,.04); } /*------------------------------------------ FINAL CTA ------------------------------------------*/ .final-cta{ position:relative; overflow:hidden; background: radial-gradient( circle at 85% 50%, rgba(96,165,250,.20), transparent 30% ), linear-gradient( 135deg, #1E40AF, #1D4ED8 ); } .final-cta::before{ content:""; position:absolute; inset:0; background: linear-gradient( 120deg, transparent 35%, rgba(255,255,255,.06), transparent 65% ); pointer-events:none; } /*------------------------------------------ FOOTER ------------------------------------------*/ .footer{ background: linear-gradient( 180deg, #08111F, #020617 ); } .footer-social a{ transition: transform .25s ease, background .25s ease; } .footer-social a:hover{ transform:translateY(-4px); } /*------------------------------------------ BACK TO TOP ------------------------------------------*/ .back-to-top{ position:fixed; right:24px; bottom:24px; z-index:999; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:#1D4ED8; color:#FFFFFF; box-shadow: 0 12px 25px rgba(30,64,175,.28); opacity:0; visibility:hidden; transform:translateY(15px); cursor:pointer; transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease; } .back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); } .back-to-top:hover{ background:#1E3A8A; transform:translateY(-3px); } /*------------------------------------------ MOBILE REFINEMENTS ------------------------------------------*/ @media(max-width:900px){ .stats-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .testimonial-arrow.prev{ left:0; } .testimonial-arrow.next{ right:0; } } @media(max-width:600px){ .stats-grid{ grid-template-columns:1fr; } .testimonial-arrow{ width:38px; height:38px; } .testimonial-arrow.prev{ left:-8px; } .testimonial-arrow.next{ right:-8px; } .back-to-top{ right:16px; bottom:16px; } } /*================================================== FINAL TESTIMONIAL CAROUSEL OVERRIDE ==================================================*/ .testimonials{ padding:110px 0 120px; background:#F8FAFC; overflow:hidden; } /* HEADER */ .testimonials .section-header{ max-width:760px; margin:0 auto 55px; text-align:center; } /* CAROUSEL WRAPPER */ .testimonial-carousel{ position:relative; display:flex; align-items:center; gap:24px; width:100%; } /* VIEWPORT */ .testimonial-viewport{ width:100%; overflow:hidden; } /* TRACK */ .testimonial-track{ display:flex; gap:24px; width:100%; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; } /* CARD */ .testimonial-card{ flex:0 0 calc((100% - 48px) / 3); min-width:0; min-height:330px; display:flex; flex-direction:column; padding:32px; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:16px; box-shadow: 0 10px 25px -5px rgba(15,23,42,.05), 0 8px 10px -6px rgba(15,23,42,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .testimonial-card:hover{ transform:translateY(-5px); border-color:#BFDBFE; box-shadow: 0 20px 35px -10px rgba(15,23,42,.12), 0 10px 15px -8px rgba(30,64,175,.08); } /* STARS */ .testimonial-stars{ margin-bottom:24px; color:#F59E0B; font-size:18px; letter-spacing:3px; } /* QUOTE */ .testimonial-quote{ flex:1; margin:0; color:#475569; font-size:16px; line-height:1.75; } /* CLIENT */ .testimonial-client{ display:flex; align-items:center; gap:14px; margin-top:28px; padding-top:22px; border-top:1px solid #F1F5F9; } /* AVATAR */ .client-avatar{ width:48px !important; height:48px !important; flex:0 0 48px; display:block; object-fit:cover; border:2px solid #DBEAFE; border-radius:50%; background:#EFF6FF; } /* CLIENT NAME */ .testimonial-client h4{ margin:0 0 4px; color:#0F172A; font-size:16px; font-weight:700; } .testimonial-client span{ color:#64748B; font-size:13px; } /* ARROWS */ .testimonial-arrow{ position:relative !important; inset:auto !important; flex:0 0 52px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid #BFDBFE; border-radius:50%; background:#FFFFFF; color:#1D4ED8; font-size:16px; cursor:pointer; box-shadow: 0 10px 25px -5px rgba(15,23,42,.08); transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } .testimonial-arrow:hover{ background:#1D4ED8; color:#FFFFFF; transform:translateY(-3px); box-shadow: 0 15px 30px -8px rgba(29,78,216,.35); } /* DOTS */ .testimonial-dots{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:32px; } .testimonial-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#CBD5E1; cursor:pointer; transition: width .3s ease, background .3s ease; } .testimonial-dot.active{ width:30px; border-radius:999px; background:#2563EB; } /*================================================== TABLET ==================================================*/ @media(max-width:1023px){ .testimonial-card{ flex-basis:calc((100% - 24px) / 2); } } /*================================================== MOBILE ==================================================*/ @media(max-width:767px){ .testimonials{ padding:80px 0; } .testimonial-carousel{ gap:10px; } .testimonial-arrow{ flex:0 0 42px; width:42px; height:42px; } .testimonial-card{ flex-basis:100%; min-height:300px; padding:26px; } .testimonial-quote{ font-size:15px; } } @media(max-width:520px){ .testimonial-carousel{ display:block; } .testimonial-arrow{ position:absolute !important; top:50%; z-index:10; } .testimonial-prev{ left:-8px !important; } .testimonial-next{ right:-8px !important; } .testimonial-viewport{ width:100%; } } /*================================================== FINAL CTA DEBUG OVERRIDE ==================================================*/ section.final-cta { background: linear-gradient( 135deg, #1E40AF 0%, #1D4ED8 55%, #1E3A8A 100% ) !important; color:#ffffff !important; } section.final-cta h2 { color:#ffffff !important; } section.final-cta p { color:#ffffff !important; } section.final-cta .section-tag { color:#ffffff !important; } section.final-cta .btn-primary { background:#ffffff !important; color:#1D4ED8 !important; } section.final-cta .btn-secondary { background:transparent !important; color:#ffffff !important; border:1px solid #ffffff !important; } /*================================================== HERO SECTION ==================================================*/ /* MAIN HERO CONTAINER */ /*================================================== LEFT HERO CONTENT ==================================================*/ /* BADGE */ /* HEADLINE */ /* BLUE HEADLINE TEXT */ /* SUBTITLE */ /*================================================== BUTTONS ==================================================*/ /* PRIMARY BUTTON */ /* SECONDARY BUTTON */ /*================================================== TRUST BADGES ==================================================*/ /*================================================== STATS ==================================================*/ /* ---------- RIGHT IMAGE & FLOATING CARDS ---------- */ /* Ambient Radial Blue Glow Effect */ /* Remove the heavy card wrapper around the image */ /* Glassmorphism Floating Overlay Badges */ .floating-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); animation: float 4s ease-in-out infinite; } .badge-top-right { top: 0px; right: -12px; } .badge-bottom-left { bottom: 10px; left: -12px; animation-delay: 2s; } .floating-badge i.text-green { color: #10B981; font-size: 22px; } .floating-badge strong { display: block; font-size: 13px; font-weight: 700; color: #0F172A; line-height: 1.2; } .floating-badge span { font-size: 11px; color: #64748B; } .badge-stars { color: #F59E0B; font-size: 12px; display: flex; gap: 3px; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } @media (max-width: 768px) { .badge-top-right { top: -10px; right: 0px; } .badge-bottom-left { bottom: -10px; left: 0px; } } /*================================================== TRUSTED TECHNOLOGY BAR ==================================================*/ .trusted-tools { position: relative; z-index: 2; padding: 0 0 60px; background: #ffffff; } .trusted-tools-card { width: 100%; background: #ffffff; border: 1px solid #F1F5F9; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .05), 0 8px 10px -6px rgba(15, 23, 42, .05); padding: 20px 32px; } /* ========================================================= BETHEL HERO — CLEAN COMBINED STYLES ========================================================= */ /* ---------- 1. HERO MAIN CONTAINER ---------- */ /* ---------- 2. LEFT COLUMN (TEXT & BUTTONS) ---------- */ /* ---------- 3. RIGHT COLUMN (NEW FLOATING IMAGE & BADGES) ---------- */ /* Position the World Map as a soft background on the right */ /* Radial Glow Behind Image */ /* Rounded Card Frame for Main Photo */ /* Ensure the team image fills naturally without harsh borders */ /* Floating Glass Overlay Cards */ .floating-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); animation: float 4s ease-in-out infinite; } .badge-top-right { top: 0px; right: -12px; } .badge-bottom-left { bottom: 10px; left: -12px; animation-delay: 2s; } .floating-badge i.text-green { color: #10B981; font-size: 22px; } .floating-badge strong { display: block; font-size: 13px; font-weight: 700; color: #0F172A; line-height: 1.2; } .floating-badge span { font-size: 11px; color: #64748B; } .badge-stars { color: #F59E0B; font-size: 12px; display: flex; gap: 3px; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* ---------- 4. TRUSTED TECHNOLOGY BAR ---------- */ .trusted-tools { position: relative; z-index: 3; padding: 0 0 64px; background: #F8FAFC; } .trusted-tools-card { width: min(1120px, calc(100% - 48px)); margin: -1px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 32px; background: #ffffff; border: 1px solid #F1F5F9; border-radius: 18px; box-shadow: 0 10px 25px rgba(15, 23, 42, .06); } .trusted-tools-label { flex-shrink: 0; color: #1D4ED8; font-size: 11px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; } .tool-logos { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; min-width: 0; } .tool-logo { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #334155; font-size: 14px; font-weight: 600; } .tool-logo img { width: auto; height: 26px; max-width: 125px; object-fit: contain; } /* ---------- 5. MOBILE & TABLET RESPONSIVENESS ---------- */ @media (max-width: 1100px) { .trusted-tools-card { flex-direction: column; align-items: flex-start; } .tool-logos { width: 100%; } } @media (max-width: 768px) { .badge-top-right { top: -10px; right: 0px; } .badge-bottom-left { bottom: -10px; left: 0px; } .trusted-tools { padding: 30px 0 50px; } .trusted-tools-card { width: calc(100% - 40px); padding: 24px; } .trusted-tools-label { width: 100%; text-align: center; } .tool-logos { justify-content: center; flex-wrap: wrap; gap: 22px 24px; } } @media (max-width: 480px) { .tool-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; } .tool-logo { justify-content: center; font-size: 13px; } } /* ========================================================= BETHEL UI/UX REFINEMENT OVERRIDE ========================================================= */ /* 1. Header & Logo Sizing Fix */ /* 2. Hero Headline & Typography Refinement */ /* 3. Hero Visual Depth & Image Drop-Shadow */ /* 4. High-Converting Glassmorphic Floating Overlay Badges */ .floating-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 16px; box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.05); animation: floatBadge 5s ease-in-out infinite; } .badge-top-right { top: 12px; right: -8px; } .badge-bottom-left { bottom: 20px; left: -8px; animation-delay: 2.5s; } @keyframes floatBadge { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* 5. Button Micro-Interactions */ /* 6. Trusted Tech Bar Logo Uniformity */ .trusted-tools-card { border: 1px solid #E2E8F0; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04); } .tool-logo img { height: 24px; filter: grayscale(100%) opacity(0.75); transition: filter 0.3s ease, transform 0.3s ease; } .tool-logo:hover img { filter: grayscale(0%) opacity(1); transform: translateY(-1px); } /* ========================================================= BETHEL HERO & NAVBAR UI OVERWRITE (REVISED) ========================================================= */ /* 1. Sleek, Blended Navigation Bar */ /* 2. Container Stretch (Eliminates Side Void Space) */ /* 3. Reduce Top Void Space (Pulls content up to Menu) */ /* 4. Redesigned Trust Badge Pill ("TRUSTED BY GROWING BUSINESSES...") */ /* 5. Reverse Logo Behavior (Color by default -> Grayed out on hover) */ .tool-logo img, .trusted-logos img, .trusted-tools-card img { filter: grayscale(0%) opacity(1) !important; /* Original color */ transition: filter 0.3s ease, opacity 0.3s ease, transform 0.2s ease !important; } .tool-logo:hover img, .trusted-logos img:hover, .trusted-tools-card img:hover { filter: grayscale(100%) opacity(0.4) !important; /* Grayscale on hover */ transform: translateY(-1px) !important; } /* 6. Tighten Vertical Gaps (Pulls Tech Bar & Services closer) */ .trusted-tools-card, .trusted-section { margin-top: 15px !important; margin-bottom: 25px !important; } /* Pull Services Section Up */ .services-section, section:has(.our-services), #services { padding-top: 35px !important; } .our-services-badge, .badge-services { margin-top: 10px !important; } /* ========================================================= EXACT MATCH OVERRIDE FOR TARGET MOCKUP (image_609a75.png) ========================================================= */ /* 1. Header & Navigation Adjustments */ /* 2. Unbox Image & Hide Floating Badges (To match reference) */ /* Hide floating badge overlays on image */ .floating-badge, .badge-top-right, .badge-bottom-left { display: none !important; } /* 3. Top Blue Pill Badge */ .trust-badge, .trusted-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #E0E7FF !important; /* Soft blue fill */ color: #1D4ED8 !important; /* Bold blue text */ padding: 6px 14px !important; border-radius: 9999px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; border: none !important; margin-bottom: 20px !important; } /* 4. Feature Checkmarks List */ /* Circular checkmark styling */ /* 5. Stats Cards Row */ .stat-card, .stat-item { background: #F8FAFC !important; /* Light panel background */ padding: 16px 24px !important; border-radius: 12px !important; border: 1px solid #F1F5F9 !important; flex: 1 !important; } .stat-card h3, .stat-number { color: #1D4ED8 !important; font-size: 30px !important; font-weight: 800 !important; margin: 0 0 4px 0 !important; } .stat-card p, .stat-label { color: #64748B !important; font-size: 12px !important; margin: 0 !important; } /* 6. Trusted Technology Bar Card */ .trusted-tools-card, .trusted-section { background: #FFFFFF !important; border-radius: 16px !important; padding: 20px 32px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important; border: 1px solid #F1F5F9 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: 40px !important; } .trusted-tools-card h4, .trusted-label { color: #1D4ED8 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.05em !important; white-space: nowrap !important; margin: 0 !important; } /* Retain Full Original Color Logos */ .trusted-tools-card img, .tool-logo img { filter: none !important; opacity: 1 !important; max-height: 26px !important; width: auto !important; } /* ========================================================= EMERGENCY FIX OVERRIDES ========================================================= */ /* Fix Navbar & Logo Dimensions */ /* Fix Hero Layout & Grid */ /* Hero Right Image Frame */ /* Stats Row */ /* Trusted Tools Bar */ .trusted-tools-card { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 30px !important; border: 1px solid #F1F5F9 !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important; } / /*------------------------------------------ 5. TRUSTED TECHNOLOGY BAR ------------------------------------------*/ .trusted-tools { padding: 20px 0 50px !important; background: #F8FAFC !important; } .trusted-tools-card { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 28px !important; background: #FFFFFF !important; border: 1px solid #F1F5F9 !important; border-radius: 14px !important; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important; margin-top: -10px !important; } .trusted-tools-label { font-size: 11px !important; font-weight: 800 !important; color: #1D4ED8 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; white-space: nowrap !important; } .tool-logos { display: flex !important; align-items: center !important; gap: 24px !important; flex: 1 !important; justify-content: space-around !important; } .tool-logo { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; } .tool-logo img { height: 22px !important; width: auto !important; max-width: 100px !important; filter: none !important; opacity: 1 !important; } .tool-logo:hover img { filter: grayscale(100%) !important; opacity: 0.4 !important; } /* Google & Microsoft specific sizing */ .google-workspace img, .microsoft-365 img { height: 20px !important; max-width: 90px !important; } /*------------------------------------------ 6. RESPONSIVE ADJUSTMENTS ------------------------------------------*/ @media (max-width: 1100px) { } @media (max-width: 900px) { .trusted-tools-card { flex-direction: column !important; gap: 16px !important; padding: 18px !important; } .tool-logos { flex-wrap: wrap !important; justify-content: center !important; gap: 16px 20px !important; } } @media (max-width: 600px) { .tool-logos { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .tool-logo { justify-content: center !important; font-size: 12px !important; } .tool-logo img { height: 18px !important; } } /*------------------------------------------ 7. TECH LOGO BAR ------------------------------------------*/ .trusted-tools { padding: 10px 0 40px !important; background: #F8FAFC !important; } .trusted-tools-card { display: flex !important; align-items: center !important; padding: 14px 24px !important; background: #FFFFFF !important; border: 1px solid #F1F5F9 !important; border-radius: 12px !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important; gap: 20px !important; } .trusted-tools-label { font-size: 10px !important; font-weight: 700 !important; color: #1D4ED8 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; white-space: nowrap !important; } .trusted-tools-label i { font-size: 5px !important; margin-right: 4px !important; } .tool-logos { display: flex !important; align-items: center !important; gap: 18px !important; flex: 1 !important; justify-content: space-around !important; } .tool-logo { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; font-weight: 500 !important; color: #475569 !important; } .tool-logo img { height: 20px !important; width: auto !important; max-width: 80px !important; filter: none !important; opacity: 1 !important; } .google-workspace img, .microsoft-365 img { height: 18px !important; max-width: 70px !important; } /*------------------------------------------ 8. MOBILE RESPONSIVE ------------------------------------------*/ @media (max-width: 900px) { .trusted-tools-card { flex-direction: column !important; padding: 16px !important; gap: 12px !important; } .tool-logos { flex-wrap: wrap !important; justify-content: center !important; gap: 14px 18px !important; } } @media (max-width: 600px) { .tool-logos { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .tool-logo { justify-content: center !important; font-size: 11px !important; } .tool-logo img { height: 16px !important; } } /* ========================================================= FINAL - OVERRIDE EVERYTHING BELOW ========================================================= */ /* 1. HEADER */ /* 2. HERO - REMOVE ALL BOXES */ /* 3. IMAGE - NO BOX */ .floating-badge { display: none !important; } /* 4. STATS */ /* 5. TECH BAR */ .trusted-tools { padding: 10px 0 40px !important; background: #F8FAFC !important; } .trusted-tools-card { display: flex !important; align-items: center !important; padding: 14px 24px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; gap: 20px !important; } .trusted-tools-label { font-size: 10px !important; font-weight: 700 !important; color: #1D4ED8 !important; text-transform: uppercase !important; white-space: nowrap !important; letter-spacing: 0.06em !important; } .tool-logos { display: flex !important; align-items: center !important; gap: 18px !important; flex: 1 !important; justify-content: space-around !important; } .tool-logo { font-size: 12px !important; color: #475569 !important; display: flex !important; align-items: center !important; gap: 5px !important; } .tool-logo img { height: 20px !important; width: auto !important; max-width: 80px !important; filter: none !important; opacity: 1 !important; } /* 6. MOBILE */ @media (max-width: 900px) { .trusted-tools-card { flex-direction: column !important; } .tool-logos { flex-wrap: wrap !important; justify-content: center !important; } } @media (max-width: 600px) { .tool-logos { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .tool-logo { justify-content: center !important; font-size: 11px !important; } .tool-logo img { height: 16px !important; } } /* ========================================================= EMERGENCY FIX - LAST RESORT ========================================================= */ /* Fix the badge text */ /* Force remove image box */ /* Fix hero container */ /* Fix stats */ /* Hide floating badges */ .floating-badge { display: none !important; } /* Tech bar */ .trusted-tools-card { display: flex !important; align-items: center !important; padding: 12px 20px !important; background: #ffffff !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; } .tool-logos { display: flex !important; align-items: center !important; gap: 16px !important; flex: 1 !important; justify-content: space-around !important; } .tool-logo { font-size: 12px !important; color: #374151 !important; } .tool-logo img { height: 20px !important; width: auto !important; } /* ========================================================= EMERGENCY FIX - FORCE TEXT SPACES ========================================================= */ /* Force spaces to show in badge */ /* Force spaces in subtitle */ /* Force spaces in tech label */ .trusted-tools-label { white-space: normal !important; word-spacing: 3px !important; letter-spacing: 0.06em !important; } /* ========================================================= FINAL FIXES - FORCE TEXT SPACES & LAYOUT ========================================================= */ /* Fix badge text spaces */ /* Fix subtitle spaces */ /* Fix tech label spaces */ /* Fix checkmark list */ /* Fix tech bar */ .trusted-tools-card { display: flex !important; flex-wrap: wrap !important; gap: 12px 20px !important; padding: 16px 24px !important; } .tool-logos { display: flex !important; flex-wrap: wrap !important; gap: 12px 18px !important; justify-content: center !important; } .tool-logo { white-space: normal !important; font-size: 12px !important; } /* ========================================================= FINAL MATCH TARGET - DO NOT REMOVE ========================================================= */ /* Fix hero container */ /* Fix headline - 2 lines with blue */ /* Fix subtitle */ /* Fix hero image - NO BOX */ /* Hide badges */ .floating-badge { display: none !important; } /* Fix stats */ /* ========================================================= FINAL FIXES - MATCH TARGET ========================================================= */ /* Hero headline - 2 lines */ /* Hero image - fill the space */ /* Trust badge with blue background */ /* Stats - smaller numbers */ /* ========================================================= FINAL POLISH ========================================================= */ /* Make "Without the Hiring Headaches" blue */ /* Trust badge - blue background */ /* Make checkmark icons blue */ /* Stats numbers blue */ /* ========================================================= FINAL - BLUE HEADLINE ========================================================= */ /* ========================================================= FILL THE RIGHT COLUMN WITH IMAGE - FINAL FIX ========================================================= */ /* ===================================== RESTORED ORIGINAL 12-SERVICE ICON GRID ===================================== */ .services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } .services .service-card { display:flex; flex-direction:column; padding:32px 28px; min-height:100%; } .services .service-card .service-image { display:none; } .services .service-icon { width:56px; height:56px; display:grid; place-items:center; margin-bottom:22px; border-radius:16px; background:var(--primary-light,#eff6ff); color:var(--primary,#2563eb); font-size:24px; } .services .service-card h3 { margin-bottom:12px; } .services .service-card p { margin-bottom:18px; } .services .service-features { display:grid; gap:10px; margin:0 0 24px; padding:0; list-style:none; } .services .service-features li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-light,#64748b); } .services .service-features i { color:var(--primary,#2563eb); font-size:12px; } .services .service-card > a { margin-top:auto; } @media (max-width:1100px){ .services-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:800px){ .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} } /* Premium Why Bethel section and final CTA */ .why-bethel-section{position:relative;overflow:hidden;background:var(--color-bg,#f7faff)} .why-bethel-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(48px,7vw,96px)} .why-bethel-content h2,.premium-cta-content h2{max-width:720px;margin:12px 0 20px;font-size:clamp(2.4rem,4.4vw,4.5rem);line-height:.98;letter-spacing:-.05em} .why-bethel-content h2 span,.premium-cta-content h2 span{color:var(--color-primary,#2563eb)} .why-bethel-lead{max-width:620px;margin-bottom:30px;font-size:1.08rem;line-height:1.8} .why-bethel-points{display:grid;gap:18px;margin-bottom:32px} .why-bethel-point{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start} .why-bethel-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:var(--color-primary,#2563eb);background:rgba(37,99,235,.1)} .why-bethel-point h3{margin:0 0 5px;font-size:1.05rem} .why-bethel-point p{margin:0;line-height:1.65} .why-bethel-visual{position:relative;padding:18px 18px 36px 0} .why-bethel-image-wrap{overflow:hidden;border-radius:28px;box-shadow:0 30px 80px rgba(15,23,42,.16);background:#fff} .why-bethel-image-wrap img{display:block;width:100%;aspect-ratio:1.12/1;object-fit:cover} .why-bethel-badge{position:absolute;right:0;bottom:0;display:grid;gap:2px;min-width:180px;padding:18px 20px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 18px 45px rgba(15,23,42,.14);backdrop-filter:blur(14px)} .why-bethel-badge strong{color:var(--color-primary,#2563eb);font-size:1.7rem} .why-bethel-badge span{font-size:.86rem;font-weight:600} .premium-cta{padding-top:0} .premium-cta-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;overflow:hidden;border-radius:32px;background:#0b1730;box-shadow:0 30px 80px rgba(15,23,42,.18)} .premium-cta-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,72px);color:#fff} .premium-cta-content h2{color:#fff} .premium-cta-content p{max-width:560px;margin:0 0 30px;color:rgba(255,255,255,.76);line-height:1.8} .premium-cta-actions{display:flex;flex-wrap:wrap;gap:14px} .premium-cta-visual,.premium-cta-visual img{min-height:460px} .premium-cta-visual img{display:block;width:100%;height:100%;object-fit:cover} .premium-cta .section-eyebrow{color:#93c5fd} /* ========================================================= PREMIUM COUNTERS + TESTIMONIALS POLISH ========================================================= */ .stats { position: relative; overflow: hidden; padding: 92px 0 96px; background: radial-gradient(circle at 12% 20%, rgba(37,99,235,.08), transparent 28%), radial-gradient(circle at 88% 80%, rgba(96,165,250,.08), transparent 30%), #f7faff; } .stats::before, .stats::after { content: ""; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(37,99,235,.08); border-radius: 50%; pointer-events: none; } .stats::before { left: -180px; top: -180px; } .stats::after { right: -180px; bottom: -180px; } .stats-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .stats .stat-box { position: relative; isolation: isolate; overflow: hidden; min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; border: 1px solid rgba(37,99,235,.16); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 16px 40px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .stats .stat-box::before { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; bottom: -82px; border-radius: 50%; background: linear-gradient(135deg, rgba(219,234,254,.25), rgba(147,197,253,.42)); z-index: -1; } .stats .stat-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.7), transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; } .stats .stat-box:hover { transform: translateY(-8px); border-color: rgba(37,99,235,.32); box-shadow: 0 24px 55px rgba(37,99,235,.13), 0 0 0 5px rgba(37,99,235,.035); } .stats .stat-box:hover::after { transform: translateX(120%); } .stats .stat-box h2 { position: relative; margin: 0 0 8px; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.06em; color: #2563eb; font-weight: 850; } .stats .stat-box p { margin: 0; color: #64748b; font-size: .98rem; font-weight: 600; text-align: center; } .testimonials { position: relative; overflow: hidden; padding: 110px 0 120px; background: #fff; } .testimonials::before { content: ""; position: absolute; left: 50%; top: 40px; width: 720px; height: 300px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(219,234,254,.58), transparent 68%); pointer-events: none; } .testimonials .container { position: relative; z-index: 1; } .testimonials .section-header { margin-bottom: 58px; } .testimonials .section-header h2 { letter-spacing: -.045em; } .testimonial-card { position: relative; overflow: hidden; min-height: 360px; padding: 34px 34px 30px; border: 1px solid #dbe5f3; border-radius: 26px; background: linear-gradient(145deg, #fff 0%, #fbfdff 100%); box-shadow: 0 18px 45px rgba(15,23,42,.055); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .testimonial-card::before { content: "“"; position: absolute; top: -18px; right: 24px; font-family: Georgia, serif; font-size: 130px; line-height: 1; color: rgba(37,99,235,.06); pointer-events: none; } .testimonial-card:hover { transform: translateY(-8px); border-color: rgba(37,99,235,.28); box-shadow: 0 28px 60px rgba(37,99,235,.12); } .testimonial-stars { position: relative; z-index: 1; margin-bottom: 24px; letter-spacing: 4px; color: #f59e0b; font-size: 1rem; } .testimonial-quote { position: relative; z-index: 1; min-height: 142px; margin: 0 0 26px; color: #526581; font-size: 1.05rem; line-height: 1.8; } .testimonial-client { position: relative; z-index: 1; padding-top: 22px; border-top: 1px solid #e6edf6; } .testimonial-arrow { width: 54px; height: 54px; border: 1px solid #cfe0fb; background: rgba(255,255,255,.95); box-shadow: 0 12px 28px rgba(37,99,235,.10); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .testimonial-arrow:hover { transform: translateY(-3px) scale(1.04); background: #eff6ff; box-shadow: 0 16px 32px rgba(37,99,235,.16); } .testimonial-dot { transition: width .3s ease, transform .3s ease, background .3s ease; } .testimonial-dot.active { width: 30px; border-radius: 999px; transform: scaleY(1.15); } /* Keep the final CTA image composition balanced and avoid cutting off the team. */ .premium-cta-visual { overflow: hidden; } .premium-cta-visual img { object-position: center center; transform: scale(1.015); transition: transform .7s ease; } .premium-cta-card:hover .premium-cta-visual img { transform: scale(1.045); } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .stats { padding: 64px 0; } .stats-grid { grid-template-columns: 1fr; gap: 16px; } .stats .stat-box { min-height: 150px; } .testimonials { padding: 78px 0 86px; } } /* ========================================================= BETHEL TALENT SOLUTIONS — FINAL PREMIUM POLISH Version: FINAL 1 ========================================================= */ /* --- HERO: tighter composition, no wasted space, no image crop --- */ /* --- NAV: cleaner single CTA, no phone --- */ /* --- WHY / PRICING: premium right-side pricing composition --- */ .why-bethel-section { overflow: hidden; background: radial-gradient(circle at 80% 40%, rgba(219,234,254,.55), transparent 30%), #fff; } .why-bethel-grid { gap: clamp(22px, 3vw, 52px) !important; align-items: center; } .why-bethel-visual.pricing-preview-wrap { min-width: 0; width: 100%; } .pricing-preview { position: relative; padding: clamp(22px, 3vw, 34px); border: 1px solid #e2e8f0; border-radius: 30px; background: linear-gradient(145deg,#fff 0%,#f8fbff 100%); box-shadow: 0 28px 70px rgba(15,23,42,.12); overflow: hidden; } .pricing-preview::before { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; top: -120px; border-radius: 50%; background: rgba(219,234,254,.65); } .pricing-preview-header { position: relative; z-index: 1; text-align: center; margin-bottom: 24px; } .pricing-preview-header .section-eyebrow { display: inline-flex; margin-bottom: 10px; } .pricing-preview-header h3 { margin: 0 0 10px; color: #0f172a; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.05; letter-spacing: -1.5px; } .pricing-preview-header h3 span { color: #2563eb; } .pricing-preview-header p { max-width: 640px; margin: 0 auto; color: #64748b; font-size: 13px; line-height: 1.6; } .pricing-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: stretch; } .pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 16px 16px; border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.06); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .pricing-card:hover { transform: translateY(-7px); box-shadow: 0 22px 40px rgba(15,23,42,.13); border-color: #93c5fd; } .pricing-card.featured { border: 1.5px solid #2563eb; box-shadow: 0 18px 38px rgba(37,99,235,.16); } .pricing-card h4 { margin: 0 0 12px; color: #0f172a; font-size: 15px; line-height: 1.25; } .pricing-card strong { display: block; margin-bottom: 8px; color: #2563eb; font-size: 28px; line-height: 1; } .pricing-card > p { min-height: 44px; margin: 0 0 14px; color: #64748b; font-size: 11px; line-height: 1.5; } .pricing-card ul { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; } .pricing-card li { position: relative; padding-left: 15px; color: #334155; font-size: 10px; line-height: 1.35; } .pricing-card li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 800; } .pricing-card a { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 40px; border-radius: 10px; background: #2563eb; color: #fff; font-size: 11px; font-weight: 800; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } .pricing-card a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.28); } .popular-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 8px; font-weight: 800; white-space: nowrap; } /* --- STATS: premium glass-like cards and reveal motion --- */ .stats { position: relative; padding: 70px 0 !important; background: linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%) !important; overflow: hidden; } .stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(191,219,254,.38), transparent 48%); pointer-events: none; } .stats-grid { position: relative; z-index: 1; gap: 22px !important; } .stat-box { position: relative; overflow: hidden; min-height: 150px; padding: 30px 20px !important; border: 1px solid rgba(191,219,254,.85) !important; border-radius: 22px !important; background: rgba(255,255,255,.82) !important; box-shadow: 0 15px 35px rgba(15,23,42,.07) !important; transition: transform .3s ease, box-shadow .3s ease; } .stat-box::after { content: ""; position: absolute; width: 90px; height: 90px; right: -24px; bottom: -28px; border-radius: 50%; background: #eff6ff; } .stat-box:hover { transform: translateY(-6px); box-shadow: 0 24px 45px rgba(15,23,42,.12) !important; } .stat-box h2 { position: relative; z-index: 1; font-size: clamp(36px,4vw,50px) !important; letter-spacing: -2px; } .stat-box p { position: relative; z-index: 1; } /* --- TESTIMONIALS: stronger premium cards, preserved content/carousel --- */ .testimonials { position: relative; overflow: hidden; background: linear-gradient(180deg,#fff 0%,#f8fbff 100%); } .testimonials .section-header h2 { letter-spacing: -2px; } .testimonial-card { border: 1px solid #dbe5f1 !important; border-radius: 22px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 18px 40px rgba(15,23,42,.07) !important; transition: transform .3s ease, box-shadow .3s ease; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(15,23,42,.12) !important; } .testimonial-stars { letter-spacing: 3px; text-shadow: 0 3px 12px rgba(245,158,11,.18); } .testimonial-arrow { transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .testimonial-arrow:hover { transform: scale(1.08); box-shadow: 0 10px 22px rgba(37,99,235,.16); } /* --- FINAL CTA: image stays proportional and whole --- */ .premium-cta-card { overflow: hidden; align-items: stretch !important; min-height: 0 !important; border-radius: 30px !important; box-shadow: 0 24px 70px rgba(15,23,42,.16) !important; } .premium-cta-content { padding: clamp(34px,5vw,72px) !important; } .premium-cta-content h2 { font-size: clamp(42px,5vw,72px) !important; line-height: .98 !important; letter-spacing: -3px !important; } .premium-cta-visual { min-height: 0 !important; height: auto !important; background: #f8fafc; } .premium-cta-visual img { width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: cover !important; object-position: center !important; display: block; } /* subtle premium entrance animations */ @keyframes bethelFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .pricing-card, .stat-box, .testimonial-card { animation: bethelFadeUp .7s ease both; } .pricing-card:nth-child(2), .stat-box:nth-child(2) { animation-delay: .08s; } .pricing-card:nth-child(3), .stat-box:nth-child(3) { animation-delay: .16s; } .stat-box:nth-child(4) { animation-delay: .24s; } @media (max-width: 1100px) { .pricing-cards { gap: 8px; } .pricing-card { padding: 16px 12px 12px; } } @media (max-width: 900px) { .pricing-cards { grid-template-columns: 1fr; } .pricing-card > p { min-height: auto; } } @media (max-width: 600px) { .stats { padding: 48px 0 !important; } .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .stat-box { min-height: 125px; padding: 22px 12px !important; } .stat-box h2 { font-size: 34px !important; } .premium-cta-content h2 { font-size: 44px !important; } } /* ============================================ FINAL 2 REFINEMENTS — NAV + HERO ============================================ */ @media (max-width: 1100px) { } @media (max-width: 820px) { } @media (max-width: 520px) { } /* ===== FINAL 3 HERO REFINEMENT ===== */ :root { --hero-gap-final: clamp(18px, 2.2vw, 42px); } /* Keep the left content as one visually aligned column */ /* CTA buttons remain inline */ /* Benefits stay in the hero, directly below the buttons */ /* Counters aligned as the final row */ /* Reduce oversized image wrapper whitespace while preserving aspect ratio */ /* Navigation logo readability */ /* Center the navigation CTA vertically */ /* Responsive */ @media (max-width: 900px) { } @media (max-width: 560px) { } /* ========================================================= BETHEL TALENT SOLUTIONS — FINAL 4 OVERRIDES Focus: hero + final CTA visual balance ========================================================= */ /* Keep the navigation clean: logo + menu + only Let's Talk */ /* HERO: image remains large and prominent; text and image sit close together */ /* Trusted tools sits directly beneath the hero as a premium divider */ .trusted-tools { padding: 24px 0 72px; } .trusted-tools-card { border: 1px solid rgba(148,163,184,.22); box-shadow: 0 18px 50px rgba(15,23,42,.07); } /* FINAL CTA: make the team image a true, highly visible half of the section */ .premium-cta { padding: 112px 0; } .premium-cta-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 640px; overflow: hidden; border-radius: 30px; background: #0b1935; box-shadow: 0 30px 80px rgba(15,23,42,.18); } .premium-cta-content { position: relative; z-index: 2; padding: clamp(44px, 5vw, 76px); } .premium-cta-visual { position: relative; min-height: 640px; display: flex; align-items: stretch; justify-content: center; overflow: hidden; background: #f7fbff; } .premium-cta-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(247,251,255,.10), transparent 18%); } .premium-cta-visual img { display: block; width: 100%; height: 100%; min-height: 640px; object-fit: cover; object-position: center; transform: scale(1.02); transition: transform .8s cubic-bezier(.2,.8,.2,1); } .premium-cta-card:hover .premium-cta-visual img { transform: scale(1.055); } /* Prevent any later generic image rules from making the CTA visual tiny */ .premium-cta-visual img[loading="lazy"] { max-width: none; } @media (max-width: 1100px) { } @media (max-width: 820px) { .premium-cta-visual, .premium-cta-visual img { min-height: 420px; height: 420px; } } @media (max-width: 560px) { .premium-cta-content { padding: 38px 26px; } } /* ========================================================= VERSION 4 — CLEAN FINAL LAYOUT OVERRIDE Single source of truth for the two requested sections. ========================================================= */ /* HERO -------------------------------------------------- */ /* FINAL CTA / READY TO BUILD YOUR TEAM ------------------ */ .premium-cta { padding: 92px 0 !important; } .premium-cta-card { display: grid !important; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; align-items: stretch !important; min-height: 0 !important; overflow: hidden !important; border-radius: 30px !important; } .premium-cta-content { min-width: 0 !important; padding: clamp(42px, 5vw, 76px) !important; } .premium-cta-visual { min-width: 0 !important; min-height: 0 !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #f7fbff !important; } .premium-cta-visual img, .premium-cta-visual img[loading="lazy"] { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; object-fit: contain !important; object-position: center !important; transform: none !important; } .premium-cta-card:hover .premium-cta-visual img { transform: none !important; } /* TABLET */ @media (max-width: 900px) { .premium-cta-visual { min-height: 0 !important; } } /* MOBILE */ @media (max-width: 560px) { .premium-cta-content { padding: 38px 26px !important; } } /* ========================================================= FINAL 5 — HERO LAYOUT OVERRIDE Based on the Premium Updated hero structure. Single source of truth for the main hero layout. ========================================================= */ @media (max-width: 1100px) { } @media (max-width: 800px) { } @media (max-width: 560px) { } /* ========================================================= FINAL 6 HERO OVERRIDE Based on the Premium Updated hero structure. Single source of truth for the final hero layout. ========================================================= */ @media (max-width: 1100px) { } @media (max-width: 820px) { } @media (max-width: 560px) { } /* ========================================================= BETHEL TALENT SOLUTIONS — FINAL 7 CANONICAL HEADER + HERO Source of truth: Premium Updated hero architecture. One layout system. No legacy hero overrides. ========================================================= */ /* HEADER */ .header { height: 80px; background: #ffffff; border-bottom: 1px solid #F1F5F9; position: relative; z-index: 1000; } .header .container { height: 100%; } .navbar { height: 100%; display: flex; align-items: center; justify-content: space-between; } .logo img { display: block; width: 143px; height: auto; object-fit: contain; } .nav-menu { display: flex; align-items: center; gap: 36px; margin: 0; padding: 0; list-style: none; } .nav-menu li a { color: #334155; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; } .nav-menu li a:hover { color: #1E40AF; } .nav-actions { display: flex; align-items: center; gap: 16px; } .nav-consultation { min-height: 48px; padding: 0 24px; border-radius: 999px; } .mobile-menu { display: none; } /* HERO — EXACT PREMIUM GEOMETRY */ .hero { padding: 100px 0 40px; background: #ffffff; overflow: visible; } .hero-shell { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 15px; align-items: stretch; max-width: 1380px; margin: 0 auto; padding: 0 40px; min-height: 600px; } .hero-left { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; min-width: 0; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 16px; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 999px; color: #1E40AF; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 20px; } .hero-tag i { font-size: 6px; color: #1E40AF; } .hero-left h1 { font-size: 48px; line-height: 1.08; letter-spacing: -2px; color: #0F172A; margin: 0 0 16px; } .hero-left h1 span { color: #1E40AF; } .hero-left > p { font-size: 16px; line-height: 1.7; color: #64748B; max-width: 540px; margin: 0 0 24px; } .hero-buttons { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .hero-buttons a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; } .hero-buttons .btn-primary { background: #1E40AF; color: #ffffff; } .hero-buttons .btn-secondary { background: #ffffff; color: #1E40AF; border: 1px solid #DBEAFE; } .hero-trust { display: flex; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; } .hero-trust div { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; } .hero-trust i { color: #2563EB; font-size: 14px; } .hero-stats { display: flex; gap: 0; border-top: 1px solid #E2E8F0; padding-top: 16px; max-width: 480px; } .hero-stat { flex: 1; padding: 0 16px; border-right: 1px solid #E2E8F0; } .hero-stat:first-child { padding-left: 0; } .hero-stat:last-child { border-right: none; } .hero-stat strong { display: block; font-size: 24px; font-weight: 800; color: #1E40AF; } .hero-stat span { font-size: 12px; color: #64748B; } .hero-right { display: flex; align-items: stretch; height: 100%; min-height: 600px; padding: 0; margin: 0; background: transparent; } .hero-right img { display: block; width: 100%; height: 100%; min-height: 600px; object-fit: cover; object-position: center 30%; background: transparent; border-radius: 0; box-shadow: none; padding: 0; margin: 0; } @media (max-width: 1100px) { .nav-menu { gap: 22px; } .hero-shell { max-width: 1380px; gap: 20px; } .hero-left h1 { font-size: 44px; } } @media (max-width: 768px) { .header { height: 72px; } .nav-menu, .nav-actions { display: none; } .mobile-menu { display: block; font-size: 22px; color: #0F172A; } .hero { padding: 64px 0 32px; } .hero-shell { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding: 0 20px; } .hero-left { padding: 0; } .hero-left h1 { font-size: clamp(38px, 9vw, 48px); letter-spacing: -1.5px; } .hero-left > p { max-width: none; } .hero-buttons a { flex: 1 1 220px; justify-content: center; } .hero-right { min-height: 420px; } .hero-right img { min-height: 420px; } .hero-stats { max-width: none; } } @media (max-width: 480px) { .hero-shell { padding: 0 16px; } .hero-trust { gap: 12px; } .hero-trust div { font-size: 12px; } .hero-stat { padding: 0 10px; } .hero-stat strong { font-size: 21px; } .hero-stat span { font-size: 11px; } } /* ========================================================= BETHEL TALENT SOLUTIONS FINAL 8 — SURGICAL POLISH ========================================================= */ .header { height: 80px; } .logo img { width: 143px; max-width: 100%; height: auto; } .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1380px; } .hero-left { min-width: 0; align-items: flex-start; } .hero-left > * { max-width: 100%; } .hero-left > p, .hero-buttons, .hero-trust, .hero-stats { margin-left: 0; } .hero-stats { width: 100%; max-width: 480px; } .hero-stat { text-align: center; padding: 0 16px; } .hero-stat:first-child { padding-left: 0; } .hero-stat:last-child { padding-right: 0; } .footer { padding: 72px 0 24px; } .footer-grid { gap: 64px; } .footer-logo { width: 230px; height: auto; max-height: 72px; object-fit: contain; object-position: left center; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer li { margin-bottom: 12px; } .footer li a { color: inherit; text-decoration: none; transition: color .2s ease; } .footer li a:hover { color: #ffffff; } @media (max-width: 900px) { .hero-shell { grid-template-columns: 1fr; gap: 32px; } .hero-right, .hero-right img { min-height: 420px; } .hero-left h1 { font-size: clamp(38px, 7vw, 48px); } } @media (max-width: 640px) { .header { height: 72px; } .logo img { width: 135px; } .hero-shell { padding-left: 16px; padding-right: 16px; } .hero-stats { max-width: 100%; } .hero-stat { padding: 0 8px; } .hero-stat strong { font-size: 22px; } .hero-stat span { font-size: 11px; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } } /* ========================================================= FINAL 10 — ABOUT US SECTION ========================================================= */ .about-us-section { padding: 104px 0; background: #ffffff; } .about-us-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } .about-us-image { overflow: hidden; border-radius: 18px; background: #eff6ff; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.10); } .about-us-image img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .about-us-content { max-width: 620px; } .about-us-content .section-eyebrow { display: inline-block; margin-bottom: 16px; color: #1e40af; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .about-us-content h2 { margin: 0 0 22px; color: #0f172a; font-size: clamp(34px, 4vw, 52px); line-height: 1.06; letter-spacing: -1.8px; } .about-us-content h2 span { color: #1e40af; } .about-us-content p { margin: 0 0 16px; color: #64748b; font-size: 16px; line-height: 1.75; } .about-us-content .about-us-lead { color: #334155; font-size: 18px; line-height: 1.65; font-weight: 500; } .about-us-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; } .about-us-pillar { padding: 20px; border: 1px solid #dbeafe; border-radius: 12px; background: #f8fbff; } .about-us-pillar strong { display: block; margin-bottom: 8px; color: #1e40af; font-size: 15px; } .about-us-pillar span { display: block; color: #64748b; font-size: 13px; line-height: 1.6; } .about-us-cta { display: inline-flex; align-items: center; gap: 10px; } @media (max-width: 800px) { .about-us-inner { grid-template-columns: 1fr; gap: 40px; } .about-us-image img { aspect-ratio: 16 / 10; } } @media (max-width: 560px) { .about-us-section { padding: 72px 0; } .about-us-inner { width: min(100% - 32px, 1180px); } .about-us-pillars { grid-template-columns: 1fr; } }