.elementor-kit-144{--e-global-color-primary:#DCDCDC;--e-global-color-secondary:#708090;--e-global-color-text:#0C0F0A;--e-global-color-accent:#DA8A67;--e-global-color-0f31a95:#708090;--e-global-color-08af87f:#FF5A5F;--e-global-color-0a862b9:#6D213C;--e-global-color-3e8220b:#BAAB68;--e-global-color-7a685fe:#F26419;--e-global-color-9659734:#E53D00;--e-global-color-316f5d4:#DE541E;--e-global-color-7d9023e:#F46036;--e-global-color-d6fe1f9:#F7F7FF;--e-global-color-1bf4ffc:#000300;--e-global-color-d5c6f66:#0C0F0A;--e-global-color-b811c59:#001427;--e-global-color-37a7a8d:#DA8A67;--e-global-color-b3e41a7:#DCDCDC;--e-global-typography-primary-font-family:"Outfit";--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-text-font-family:"Outfit";--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-style:italic;font-family:"Crimson Pro - Regular", Sans-serif;}.elementor-kit-144 e-page-transition{background-color:#FFBC7D;}.elementor-kit-144 a{font-family:"Crimson Pro - Regular", Sans-serif;font-size:clamp(1rem, 0.5vw + 0.9rem, 1.125rem);}.elementor-kit-144 a:hover{color:var( --e-global-color-7a685fe );font-family:"Crimson Pro - Regular", Sans-serif;}.elementor-kit-144 h1{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(2rem, 6vw, 3.5rem);}.elementor-kit-144 h2{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(1.75rem, 5vw, 2.75rem);}.elementor-kit-144 h3{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(1.5rem, 4vw, 2.25rem);line-height:1.2;}.elementor-kit-144 h4{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(1.25rem, 3vw, 1.75rem);line-height:1.2;}.elementor-kit-144 h5{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(1.125rem, 2vw, 1.375rem);line-height:1.2;}.elementor-kit-144 h6{font-family:"Crimson Pro - Semi Bold", Sans-serif;font-size:clamp(1rem, 1.7vw, 1.125rem);font-weight:600;text-transform:uppercase;line-height:1.2;}.elementor-kit-144 button,.elementor-kit-144 input[type="button"],.elementor-kit-144 input[type="submit"],.elementor-kit-144 .elementor-button{border-style:none;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */:root { /* This enables the light-dark() function and default browser dark styles */ color-scheme: light dark; /* Use light-dark(LIGHT_VALUE, DARK_VALUE) */ --bg-page: light-dark(#F7F7FF, #0C0F0A); --text-main: light-dark(#0C0F0A, #F7F7FF); --accent: #D73C2C; /* Same for both modes */ /* --- Brand Palette (Static) --- */ --color-slate-grey: #708090; --color-ghost-white: #F7F7FF; --color-onyx: #0C0F0A; --color-spicy-orange: #D73C2C; --color-onyx-muted: #1A1D1A; /* Slightly lighter for dark-mode depth */ --service-card-bg: light-dark(var(--color-onyx), var(--color-ghost-white)); /* System Typography (16px base) */ --font-h1: clamp(2rem, 5vw + 1rem, 3.5rem); --font-h2: clamp(1.75rem, 4vw + 1rem, 2.75rem); --font-h3: clamp(1.5rem, 3vw + 1rem, 2.25rem); --font-h4: clamp(1.25rem, 2vw + 1rem, 1.75rem); --font-body: clamp(1rem, 0.5vw + 0.9rem, 1.125rem); /* 3D Color Palette */ --primary: #4f46e5; --primary-side: #3730a3; /* Darker for depth */ --primary-glow: #818cf8; /* Lighter for hover */ --bg: #f8fafc; --text: #0f172a; --surface: #ffffff; /* Shared Settings */ --btn-depth: 4px; --radius: 8px; } h1, h2, h3, h4. h5 { font-family: "Crimson Pro - Semi Bold", Sans-serif; color: var(--color-spicy-orange); } h1, h2, h3, h4. h5:hover { color: var(--color-spicy-orange); } h1 elementor-heading-title { font-size: clamp(2rem, 6vw, 3.5rem); color: red; } .breadcrumb, .breadcrumb span, .breadcrumb_last { font-size: 1.2rem; font-family: "Crimson Pro - Regular", Sans-serif; } .breadcrumb a { color: #0C0F0A; font-size: 1.2rem; font-family: "Crimson Pro - Regular", Sans-serif; } .breadcrumb a:hover { color: #D73C2C; font-size: 1.2rem; font-family: "Crimson Pro - Regular", Sans-serif; } .elementor-heading-title elementor-size-default { clamp(2rem, 6vw, 3.5rem); } .elementor-widget-n-accordion .e-n-accordion-item-title-text { font-weight: bold; align-items: center; font-size: 1.8rem; letter-spacing: 0.02rem; } /* Optional: Add a subtle change when the accordion is open */ details[open] summary { color: var(--e-global-color-accent); /* Use your theme's accent color */ margin-bottom: 10px; /* Space between title and content */ } /* Desktop (Default) */ .definition p { padding-left: 2.5em; text-indent: -2.5em; padding-right: 0em; } /* Tablet (Typically 1024px and below) */ @media (max-width: 1024px) { .definition p { padding-left: 2em; text-indent: -2em; } } /* Mobile (Typically 767px and below) */ @media (max-width: 767px) { .definition p { padding-left: .5em; padding-right: .5em; text-indent: -.5em; } } .definition p { /* 1.5em is the minimum, 5vw is the preferred fluid size, 2.5em is the maximum */ padding-left: clamp(1.5em, 5vw, 2.5em); /* We negate the clamp value to pull the first line back exactly the same amount */ text-indent: calc(-1 * clamp(1.5em, 5vw, 2.5em)); } .definition p strong { color: #333; /* Or your preferred brand color */ letter-spacing: 0.05em; /* Makes the bold text a bit easier to read */ } /* Targets all H3 headings inside your main content area */ main#content h3 { font-weight: 700; /* 700 is the standard for 'Bold' */ } /* If you want to be extra specific and ensure it looks like a 'strong' tag */ main#content h3 { font-weight: bold; color: inherit; /* Ensures it keeps the heading color */ } /* Reset Elementor before we apply our rules */ .service-card { /* This ensures that any Elementor "extra" spacing is killed at the source */ & > .e-con, & > .elementor-widget { margin-bottom: 0 !important; } /* This makes your card a Flexbox container so you can control vertical alignment */ display: flex; flex-direction: column; justify-content: flex-start; } /* The Block */ .service-card { /* To apply this to the Elementor container, add 'service-card' to the CSS Classes field in Elementor */ background-color: var(--service-card-bg); border-style: solid; border-color: var(--e-global-color-d5c6f66); border-width: 1px; border-radius: 15px; /* padding: 2rem; */ position: relative; overflow: hidden; /* border: 1px solid rgba(0,0,0,0.05); */ display: flex; height: 80vh; /* Ensures all cards in a row are same height */ /* HOVER ANIMATION: Card Lift & Shadow */ &:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border-color: var(--e-global-color-0a862b9);; box-shadow: 0px 0px 60px 0px rgba(255, 253, 253, 0.5); /* HOVER ANIMATION: Interaction with nested Title */ .service-card__title { color: #F26419; /* Accent color on hover */ } /* HOVER ANIMATION: Image zoom if card has one */ .elementor-widget-image img { /* transform: scale(1.05); */ } } /* The Elements */ /* Start your .elementor-kit-144 at the custom class you added to the widget */ .service-card__title { & .elementor-icon-box-wrapper { text-align: center; } /* Target the Elementor title and any span inside it */ & .elementor-icon-box-title, & .elementor-icon-box-title span { font-family: "Outfit-Bold", Sans-Serif !important; /* Add other styles here */ font-size: clamp(1rem, 2vw, 2rem); text-transform: uppercase; font-weight: 700; line-height: 1.2; color: inherit; /* Allows the widget-level color to work */ padding-top: 1rem; padding-left: 1rem; display: inline-block; min-height: 10vh; /*calc(2 * 1.3em); /* Adjust based on your font-size/line-height */ } } /* Target the Image Container */ .service_card__image { margin-bottom: 1.5rem; border-radius: 8px; overflow: hidden; img { transition: transform 0.6s ease; } } /* Target the specific Subtitle/Location widget */ .service-card__subtitle { /* 1. The 'Location' heading (H5) */ & .elementor-icon-box-title { font-family: "outfit-regular", sans-serif !important; font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 600; color: #555; margin-bottom: 4px; /* Space between 'Location' and the city name */ & span { font-family: inherit; /* Ensures the inner span doesn't reset */ } } /* 2. The 'Lebanon, PA' text (P) */ & .elementor-icon-box-description { font-family: "outfit-regular", sans-serif !important; font-size: clamp(0.9rem, 1.5vw, 1.1rem); font-weight: 400; color: #888; line-height: 1.4; margin: 0; } } /* Target the Text Editor widget */ .service-card__details { /* Target the actual paragraph tag inside the widget container */ & .elementor-widget-container p, & p { font-family: "outfit-regular", sans-serif !important; color: white; line-height: 1.6; margin: 1rem 0; font-size: clamp(1rem, 1.8vw, 1.15rem); } /* Optional: If you use multiple paragraphs, this ensures only the last one doesn't have extra bottom margin */ & p:last-child { margin-bottom: 0; } } /* Buttons */ .service-card__button { /* Target the actual clickable button (anchor tag) */ & .elementor-button { background-color: #0073aa !important; /* Your Primary Color */ border-radius: 15rempx !important; /* Rounded corners */ padding: 12px 24px !important; transition: all 0.3s ease-in-out !important; border: none !important; display: inline-flex; justify-content: center; width: 100%; /* Makes the button fill the widget width */ /* Hover State */ &:hover { background-color: #005177 !important; /* Darker shade on hover */ /* transform: translateY(-2px); */ box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* Target the text specifically for font assignments */ & .elementor-button-text { font-family: "outfit-regular", sans-serif !important; font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important; font-weight: 600 !important; color: #ffffff !important; text-transform: uppercase; letter-spacing: 0.5px; } } } /* Desktop Defaults (Base) */ padding: 0rem; gap: 1.5rem; /* --- TABLET REFINEMENT (max-width: 1024px) --- */ @media (max-width: 1024px) { padding: 0rem; gap: 1.25rem; /* Adjust title size for tablet */ .service-card__title .elementor-icon-box-title { font-size: clamp(1.3rem, 2.5vw, 1.6rem); } /* Stack buttons on tablet if they feel too tight */ .service-card__actions { flex-direction: column; gap: 10px; } } /* --- MOBILE REFINEMENT (max-width: 767px) --- */ @media (max-width: 767px) { padding: 0rem; /* Less padding gives text more room */ gap: 1rem; /* Tighten spacing between elements */ gap: 10px 10px; /* 20px Row Gap (Vertical), 10px Column Gap (Horizontal) */ border-radius: 12px; /* Slightly tighter corners for smaller screens */ min-height 90dvh; /* Ensure images take up proper vertical space */ .elementor-widget-image { margin-bottom: 0.75rem; } /* Mobile Title refinement */ .service-card__title .elementor-icon-box-title { font-size: 1.4rem; /* Fixed size or tight clamp for mobile */ text-align: left; } /* Location/Subtitle tightening */ .service-card__subtitle { & .elementor-icon-box-title { font-size: 1.1rem; } & .elementor-icon-box-description { font-size: 0.95rem; } } /* Buttons are always full width on mobile */ .service-card__button { width: 100%; & .elementor-button { padding: 14px 20px !important; /* Slightly taller for better touch targets */ } } } }/* End custom CSS */