/*
Theme Name: Divi Child
Theme URI: https://tlp.devboldd.com/
Description: Child theme for Divi
Author: Sreelakshmi
Author URI:
Template: Divi
Version: 1.0
*/
/* Add your custom CSS below */
h1,h2,h3{padding-bottom:0px!important;}
/* ==========================================
Top Header Menu - Custom Menu Item Spacing
========================================== */
/* =====================================
Header Navigation - Desktop (1171px and Above)
Add 45px gap between top menu items
===================================== */
@media only screen and (min-width: 1171px) {
#top-header-menu .et-menu {
gap: 45px;
}
}
#top-header-menu #menu-header-menu li a
{
padding-bottom: 0px !important;
}
/* Remove default top margin from menu items */
#top-header-menu .et_pb_menu__menu > nav > ul > li {
margin-top: 0 !important;
}
/* Remove default left and right padding from menu items */
#top-header-menu #menu-header-menu li {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =====================================
Header Navigation
Tablet / Small Desktop (981px - 1170px)
Fallback for Menu Item Spacing
===================================== */
@media only screen and (min-width: 981px) and (max-width: 1170px) {
/* Add spacing between the logo column and the navigation menu */
.navication-clmn1 {
padding-right: 35px !important;
}
/* Add spacing between each header menu item */
#top-header-menu .et-menu > li {
margin-right: 35px !important;
}
/* Remove spacing from the last menu item */
#top-header-menu .et-menu > li:last-child {
margin-right: 0 !important;
}
}
/* =====================================
Footer Menu Styles
===================================== */
/* Create thin brackets */
#Footer-menu .widget_nav_menu .title::before,
#Footer-menu .widget_nav_menu .title::after {
font-weight: 300;
color: #000 !important;
}
#Footer-menu .widget_nav_menu .title::before {
content: "[ ";
}
#Footer-menu .widget_nav_menu .title::after {
content: " ]";
}
/* ==========================================
Gradient Heading
Blue-to-red gradient on a Divi text module's heading.
The class goes on the module wrapper, which Divi 5 renders as a flex
container (.et_flex_module). Safari will not paint background-clip:text on a
flex or grid box, so the gradient never appeared there and the transparent
fill left the heading invisible — Chrome painted it, which is why it only
broke in Safari. The gradient therefore lives on the text element itself,
which is a plain block. It is the same width as the module, so the gradient
spans exactly the box it always did and nothing moves.
========================================== */
.gradient-heading.et_pb_module {
background: none;
background-clip: border-box;
-webkit-background-clip: border-box;
-webkit-text-fill-color: currentColor;
color: inherit;
}
.gradient-heading.et_pb_module .et_pb_text_inner > h1,
.gradient-heading.et_pb_module .et_pb_text_inner > h2,
.gradient-heading.et_pb_module .et_pb_text_inner > h3,
.gradient-heading.et_pb_module .et_pb_text_inner > h4,
.gradient-heading.et_pb_module .et_pb_text_inner > h5,
.gradient-heading.et_pb_module .et_pb_text_inner > h6,
.gradient-heading.et_pb_module .et_pb_text_inner > p {
/* Never let this box become a flex or grid container, or Safari drops the
clip again. */
display: block;
background-image: linear-gradient(90deg, #1E59D0 0%, #F7183A 100%);
background-clip: text;
-webkit-background-clip: text;
/* Divi sets `color` with !important on some text modules; text-fill-color
outranks it for painting, so the gradient still shows through. */
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Without the clip the glyphs would be transparent, i.e. invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.gradient-heading.et_pb_module .et_pb_text_inner > h1,
.gradient-heading.et_pb_module .et_pb_text_inner > h2,
.gradient-heading.et_pb_module .et_pb_text_inner > h3,
.gradient-heading.et_pb_module .et_pb_text_inner > h4,
.gradient-heading.et_pb_module .et_pb_text_inner > h5,
.gradient-heading.et_pb_module .et_pb_text_inner > h6,
.gradient-heading.et_pb_module .et_pb_text_inner > p {
color: #1E59D0;
-webkit-text-fill-color: currentColor;
}
}
/* The class on a plain element (not a Divi module) still clips itself. */
.gradient-heading:not(.et_pb_module) {
background: linear-gradient(90deg, #1E59D0 0%, #F7183A 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ==========================================
Gradient Title
Applies a blue-to-red gradient to text
========================================== */
.gradient-title {
display: inline-block;
background: linear-gradient(90deg, #1E59D0 0%, #F7183A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-bottom: 2px !important; /* fixed px value instead of em - more reliable */
overflow: visible;
}
/* THE ACTUAL FIX: allow the parent containers to stop clipping */
.et_pb_text_1,
.et_pb_text_1 .et_pb_text_inner {
overflow: visible !important;
}
/* =====================================
Header Responsive Text (981px - 1128px)
===================================== */
@media only screen and (min-width: 981px) and (max-width: 1128px) {
#text-22-responsive p{
font-size: 16px !important;
}
}
/* =====================================
Bracket Title Style
- Adds thin brackets before and after
the heading text
===================================== */
.bracket-title p{
display: inline-block;
margin: 0;
flex-direction: row;
}
.bracket-title::before,
.bracket-title::after {
font-weight: 300;
}
.bracket-title::before {
content: "[ ";
color: #F7183A;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 25px;
}
.bracket-title::after {
content: " ]";
color: #F7183A;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 25px;
}
/* ==========================================
Customer Logo Grid
========================================== */
.customer-logos {
margin: 0 auto;
}
/* ==========================================
Logo Row Layout
- Displays logos in a single horizontal row
- Evenly distributes space between logos
========================================== */
.logo-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
margin-bottom: 60px;
}
/* Remove bottom margin from the last row */
.logo-row:last-child {
margin-bottom: 0;
}
/* ==========================================
Logo Image Styling
- Maintains aspect ratio
- Prevents stretching
========================================== */
.logo-row img {
max-height: 55px;
max-width: 150px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
@media (max-width: 980px) {
.customer-logos {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
row-gap: 20px;
column-gap: 20px;
padding: 50px 20px;
}
/* Unwrap the row divs so all logos flow into one continuous grid,
ignoring the 7/7/5 desktop grouping */
.logo-row,
.logo-row.row-five {
display: contents;
}
/* Divi's editor injects
tags between images; hide them so they
don't consume grid cells and break the 3-column layout */
.customer-logos br {
display: none;
}
.logo-row img {
max-height: 45px;
max-width: 130px;
}
/* The final logo is the odd one out: center it on its own full-width row.
Scoped to the last row only, so it doesn't also match the last image
of row 1 and row 2. */
.logo-row.row-five img:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.logo-row img {
max-height: 38px;
max-width: 100px;
}
}
/* Desktop screens: 1280px+ width and 660px–760px height */
@media screen and (min-width: 1280px) and (min-height: 660px) and (max-height: 760px) {
#banner-row {
height: 465px !important;
}
#home-hero-banner {
background-position: top !important;
}
}
/* ==========================================
Number Counter
========================================== */
/* Display the number and title on the same line */
.counter-inline {
display: flex !important;
align-items: baseline; /* Align text to the same baseline */
gap: 6px; /* Space between the number and title */
}
/* Remove default spacing from the number */
.counter-inline .percent {
margin: 0;
line-height: 1;
}
/* Remove default spacing from the title */
.counter-inline .title {
margin: 0;
line-height: 1;
}
@media only screen and (max-width: 767px) {
.counter-inline {
display: block !important;
}
.counter-inline .percent {
height: 35px;
text-align: left !important;
position: relative;
}
.counter-inline h3 {
text-align: left !important;
}
}
/* ================================================
FORCE BUTTON GROUP INTO A SINGLE HORIZONTAL ROW
Row: et_pb_row_15 | Column: et_flex_column + button-group
================================================ */
/*
Each button is wrapped in a div.et_pb_module (Divi's button wrapper).
By default Divi may be giving these wrappers a fixed/percentage width
which forces stacking — this resets them to size-to-content instead.
*/
.group-button-row .et_flex_column.button-group > .et_pb_module {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
/*
The actual clickable button ( tag) inside each wrapper.
Ensures text stays on one line and the button doesn't stretch full width.
*/
.group-button-row .et_flex_column.button-group .et_pb_button {
white-space: nowrap !important;
display: inline-block !important;
width: auto !important;
}
/*
Target the exact column carrying Divi 5's flex-direction logic.
We combine .et_flex_column + .button-group together (not separately)
so this rule has enough specificity to beat Divi's own preset CSS.
The #et-boc ID wrapper adds extra weight to help it win.
*/
@media (min-width: 981px) {
.group-button-row .et_flex_column.button-group {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 15px !important;
align-items: center !important;
width: 100% !important;
}
}
/* ================================================
OPTIONAL: Responsive fallback for small screens
If 3 buttons can't fit on one line on mobile,
allow wrapping instead of forcing horizontal scroll.
================================================ */
@media (max-width: 980px) {
.group-button-row .et_flex_column.button-group {
flex-wrap: wrap !important;
}
}
/* ======================================
Tablet & Mobile Rail Buttons
====================================== */
@media only screen and (max-width: 980px) {
.rail-button .et_pb_button {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 48px;
padding: 14px 20px !important;
margin: 0 12px 16px 0;
background: #194D98 !important;
border: none !important;
border-radius: 999px;
color: #fff !important;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
/* Wrap buttons onto the next line */
.button-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
}
/* ================================================
BUTTON FONT SIZE — 981px to 1127px viewport range
================================================ */
@media (min-width: 981px) and (max-width: 1127px) {
.group-button-row .et_flex_column.button-group .et_pb_button {
font-size: 16px !important;
}
}
/* ==========================================
Button Font Size - Mobile (390px and Below)
========================================== */
@media only screen and (max-width: 390px) {
.group-button-row .et_flex_column.button-group > .et_pb_module {
font-size: 14px !important;
}
}
/* ======================================
Product Cards Hover Effects
====================================== */
/* Smooth transition for the product title */
.product-cards .product-title p {
transition: color 0.3s ease;
}
/* Smooth transition for the CTA arrow */
.product-cards .cta-arrow img {
transition: all 0.3s ease;
}
@media only screen and (min-width: 981px){
/* Change product title color on hover */
.product-cards:hover .product-title p {
color: #194D98;
}
/* Change CTA arrow image on hover */
.product-cards:hover .cta-arrow img {
content: url('/wp-content/uploads/2026/07/cta-arrow-blue.webp');
}
/* Change column background on hover */
.product-cards:hover {
background-color: #FFFFFF;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.10);
}
}
/* ======================================
Counter Section (981px - 1279px)
====================================== */
@media only screen and (min-width: 981px) and (max-width: 1279px) {
.counter-inline h3,
.counter-inline p {
font-size: 35px !important;
}
}
/* Footer widget spacing - Tablet & Mobile */
@media (max-width: 980px) {
/* ==========================================
Footer Widget Navigation Spacing
- Remove top and bottom spacing for
Service and Get in Touch menu widgets
========================================== */
#Footer-menu #nav_menu-4,
#Footer-menu #nav_menu-7 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==========================================
Footer Widget Spacing
- Remove right margin
- Add bottom spacing between footer widgets
========================================== */
#Footer-menu .et_pb_column .et_pb_widget {
margin-right: 0 !important;
margin-bottom: 50px !important;
}
/* Remove margin from the last menu item */
#Footer-menu .widget_nav_menu ul li:last-child {
margin-bottom: 0 !important;
}
}
/* ==========================================================================
INTERACTIVE COLUMN EXPAND
Row of 4 columns where one column is wider (37%) by default,
and clicking any column makes IT the wide one (37%),
while the rest shrink to 21% each.
========================================================================== */
/* Make sure the row behaves as a flex container */
.interactive-col-expand.et_flex_row {
display: flex;
}
@media (min-width: 981px) {
/* --------------------------------------------------------------------------
1. DEFAULT STATE (before any click / JS hasn't run yet)
All columns start at 21% width
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column {
flex: 0 0 21%; /* flex-grow, flex-shrink, flex-basis */
max-width: 21%;
cursor: pointer; /* shows it's clickable */
transition: flex-basis 0.4s ease, max-width 0.4s ease; /* smooth resize animation */
}
/* Default wide column — 3rd column (Bullet Train) is 37% by default.
Change ".et_pb_column_43" below if your "3rd column" is a different one. */
.interactive-col-expand > .et_pb_column_43 {
flex: 0 0 37%;
max-width: 37%;
}
/* --------------------------------------------------------------------------
2. JS-CONTROLLED STATES (added/removed dynamically on click)
These override the defaults above once JS runs.
-------------------------------------------------------------------------- */
/* Applied to whichever column is clicked → becomes the wide (37%) column */
.interactive-col-expand > .et_pb_column.col-expanded {
flex: 0 0 37% !important;
max-width: 37% !important;
}
/* Applied to all other (non-clicked) columns → shrink to 21% */
.interactive-col-expand > .et_pb_column.col-collapsed {
flex: 0 0 21% !important;
max-width: 21% !important;
}
}
/* ============================================================================
PROJECT COLUMN — BACKGROUND OVERLAY + ZOOM EFFECT
DEFAULT (before click, matches screenshot):
- Bullet Train column (.col-expanded)....... NO overlay, image fully clear
- Other 3 columns (.col-collapsed).......... dark overlay applied
ON CLICK:
- Clicked column becomes clear (overlay removed)
- All other columns get the dark overlay
============================================================================ */
/* Column with background image - needs position + overflow */
.project-col {
position: relative;
overflow: hidden;
z-index: 0;
}
/* Dark overlay element - starts fully transparent by default */
.project-col::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0; /* no overlay unless collapsed */
transition: opacity 0.35s ease;
z-index: 1;
pointer-events: none;
}
/* EXPANDED state — clicked/default-active column: NO overlay at all, image fully clear */
.project-col.col-expanded::after {
opacity: 0;
}
/* COLLAPSED state — non-active columns: dark overlay applied */
.project-col.col-collapsed::after {
opacity: 0.55; /* adjust darkness to taste */
}
/* --------------------------------------------------------------------------
TEXT & ICON — pushed above overlay, with zoom + fade transition
-------------------------------------------------------------------------- */
.project-col .et_pb_text,
.project-col .et_pb_image {
position: relative;
z-index: 2;
transition: transform 0.35s ease, opacity 0.35s ease;
}
@media only screen and (min-width: 981px) {
/* ======================================
Hover Effect (Only Non-Active Columns)
====================================== */
.project-col:not(.col-expanded):hover .et_pb_text,
.project-col:not(.col-expanded):hover .et_pb_image,
.project-col:not(.col-expanded):hover .et_pb_button {
transform: scale(1.08);
opacity: 1;
}
}
/* --------------------------------------------------------------------------
READ MORE BUTTON — visible only on expanded (clear) column
-------------------------------------------------------------------------- */
.project-col .et_pb_button_module_wrapper {
position: relative;
z-index: 2;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
.project-col.col-expanded .et_pb_button_module_wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.project-col.col-collapsed .et_pb_button_module_wrapper {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
}
/* ============================================================================
MOBILE VERSION — INTERACTIVE COLUMN EXPAND
On small screens, columns stack VERTICALLY (Divi's default phone behavior).
So instead of expanding WIDTH, we expand HEIGHT on click.
Overlay/zoom/button logic stays the same — only the dimension changes.
============================================================================ */
@media (max-width: 767px) {
/* Row stacks as a column instead of side-by-side */
.interactive-col-expand.et_flex_row {
display: flex;
flex-direction: column; /* stack columns vertically */
}
/* --------------------------------------------------------------------------
1. RESET desktop width rules so they don't fight with mobile height rules
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column {
flex: none; /* cancel desktop flex-basis */
width: 100%; /* full width since stacked */
max-width: 100%; /* override the 21%/37% desktop max-width */
}
/* --------------------------------------------------------------------------
2. DEFAULT + COLLAPSED height (small/collapsed columns)
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column {
height: 120px; /* collapsed height */
transition: height 0.4s ease; /* smooth height animation */
overflow: hidden; /* clip content when collapsed */
}
/* --------------------------------------------------------------------------
3. EXPANDED height (clicked column, e.g. Bullet Train by default)
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column.col-expanded {
height: 525px !important; /* taller on active column */
}
/* Collapsed columns explicitly stay short */
.interactive-col-expand > .et_pb_column.col-collapsed {
height: 200px !important;
}
}
/* ============================================================================
MOBILE VERSION — INTERACTIVE COLUMN EXPAND
On small screens, columns stack VERTICALLY (Divi's default phone behavior).
So instead of expanding WIDTH, we expand HEIGHT on click.
Overlay/zoom/button logic stays the same — only the dimension changes.
============================================================================ */
@media only screen and (min-width: 768px) and (max-width: 980px) {
/* Row stacks as a column instead of side-by-side */
.interactive-col-expand.et_flex_row {
display: flex;
flex-direction: column; /* stack columns vertically */
}
/* --------------------------------------------------------------------------
1. RESET desktop width rules so they don't fight with mobile height rules
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column {
flex: none; /* cancel desktop flex-basis */
width: 100%; /* full width since stacked */
max-width: 100%; /* override the 21%/37% desktop max-width */
}
/* --------------------------------------------------------------------------
2. DEFAULT + COLLAPSED height (small/collapsed columns)
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column {
height: 120px; /* collapsed height */
transition: height 0.4s ease; /* smooth height animation */
overflow: hidden; /* clip content when collapsed */
}
/* --------------------------------------------------------------------------
3. EXPANDED height (clicked column, e.g. Bullet Train by default)
-------------------------------------------------------------------------- */
.interactive-col-expand > .et_pb_column.col-expanded {
height: 575px !important; /* taller on active column */
}
/* Collapsed columns explicitly stay short */
.interactive-col-expand > .et_pb_column.col-collapsed {
height: 250px !important;
}
}
/* ==========================================
Solution Button Font Size
Mobile (390px and Below)
========================================== */
@media only screen and (max-width: 390px) {
body #page-container .group-button-row #solution-button {
font-size: 10px !important;
line-height: 14px !important;
}
}
/* -----------------------------------------
Single Post Layout - Remove Sidebar
----------------------------------------- */
body.single-post #page-container #main-content .container:before {
display: none !important;
content: none !important;
width:0px !important;
}
/* Hide comments section on single posts */
#comment-wrap {
display: none !important;
}
/* Make the main content span the full width */
.single-post #left-area {
width: 100%;
float: none;
padding-right: 0;
}
/* Hide the sidebar */
.single-post #sidebar {
display: none;
}
/* -----------------------------------------
Single Blog Post Container Width
----------------------------------------- */
.single-post #main-content > .container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding-left: 50px;
padding-right: 50px;
}
/* Hide post meta on single blog posts */
.single-post .post-meta {
display: none !important;
}
/*************************************Contact Us Page *************************************/
/* Base font and max width for the entire CF7 form container */
.wpcf7-form {
font-family: 'Inter', sans-serif;
max-width: 100%;
}
/* Removes CF7's default paragraph margin so custom spacing (form-row gap) controls layout instead */
.wpcf7-form p {
margin: 0;
}
/* Hides the leftover
tag between label and input, since label is already block-level and creates its own line break */
.form-field p br {
display: none;
}
/* Lays out each row (e.g. First Name + Last Name) side by side using flexbox with spacing between columns */
.form-row {
display: flex;
gap: 40px;
margin-bottom: 30px;
margin-top: 0px !important;
}
/* Each field takes equal width within its row and can shrink below its content size if needed */
.form-field {
flex: 1;
min-width: 0;
}
/* Used for fields that should span the full row width instead of sharing space (e.g. Message) */
.form-field.full-width {
width: 100%;
}
/* Hides placeholder/empty grid cells used to preserve row alignment (e.g. next to Company field) */
.form-field.empty-field {
visibility: hidden;
}
/* Styles every field label: block display, black color, Inter font, 18px, medium weight */
.form-field label {
display: block;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 0px !important;
}
/* Styles the required-field asterisk (*) inside labels in red, matching label's font size/weight */
.form-field label span {
color: #D53232;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-left: 2px;
}
/* Ensures CF7's auto-generated wrapper span around each input takes full width of its field */
.wpcf7-form-control-wrap {
display: block;
width: 100%;
}
/* Core styling for text, email, and tel inputs: removes default box border, adds a thin bottom underline only, transparent background */
.form-field input.wpcf7-text,
.form-field input.wpcf7-email,
.form-field input.wpcf7-tel {
width: 100%;
border: none;
border-bottom: 0.7px solid #B5B5B5;
padding: 8px 0 8px;
color: #B5B5B5;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
outline: none;
background: transparent;
box-sizing: border-box;
}
/* Placeholder color/typography for Chrome, Safari, and other WebKit-based browsers */
.wpcf7-form input.wpcf7-text::-webkit-input-placeholder,
.wpcf7-form input.wpcf7-email::-webkit-input-placeholder,
.wpcf7-form input.wpcf7-tel::-webkit-input-placeholder,
.wpcf7-form textarea.wpcf7-textarea::-webkit-input-placeholder {
color: #B5B5B5 !important;
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
opacity: 1 !important;
padding: 8px 0 8px !important;
}
/* Placeholder color/typography for Firefox (older Mozilla-specific pseudo-element) */
.wpcf7-form input.wpcf7-text::-moz-placeholder,
.wpcf7-form input.wpcf7-email::-moz-placeholder,
.wpcf7-form input.wpcf7-tel::-moz-placeholder,
.wpcf7-form textarea.wpcf7-textarea::-moz-placeholder {
color: #B5B5B5 !important;
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
opacity: 1 !important;
padding: 8px 0 8px !important;
}
/* Placeholder color/typography for modern browsers (standard spec pseudo-element) */
.wpcf7-form input.wpcf7-text::placeholder,
.wpcf7-form input.wpcf7-email::placeholder,
.wpcf7-form input.wpcf7-tel::placeholder,
.wpcf7-form textarea.wpcf7-textarea::placeholder {
color: #B5B5B5 !important;
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
opacity: 1 !important;
padding: 8px 0 8px !important;
}
/* Keeps the same thin gray underline on focus (no blue highlight/box-shadow) */
.form-field input.wpcf7-text:focus,
.form-field input.wpcf7-email:focus,
.form-field input.wpcf7-tel:focus {
border-bottom: 0.7px solid #B5B5B5;
box-shadow: none;
}
/* -------------------- Phone field: flag + arrow only, no visible text -------------------- */
/* Aligns the country flag dropdown and phone input side by side on a single shared underline */
.phone-field .phone-wrap {
display: flex;
align-items: center;
border-bottom: 0.7px solid #B5B5B5;
gap: 14px;
padding-bottom: 8px;
padding-top:8px;
}
.phone-field .phone-wrap p {
display: flex;
align-items: center;
gap: 8px;
margin: 0 !important;
width: 100%;
border: none !important;
}
/* Wrapper holds the flag image, invisible select, and custom arrow together */
.country-select-wrap {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
width: 40px;
height: 20px;
}
/* Small flag image, visually shown; the real dropdown sits invisibly on top */
.flag-icon {
width: 18px;
height: 13px;
object-fit: cover;
border-radius: 2px;
pointer-events: none;
}
/* Custom small dropdown arrow drawn with CSS */
.country-select-wrap::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 5px;
height: 5px;
border-right: 1.5px solid #666;
border-bottom: 1.5px solid #666;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* The actual select is stretched over the whole wrapper and made fully
invisible (transparent + zero font-size) — this is the ONLY rule for
.country-code in the file. Clicking the flag/arrow still opens the real
native dropdown with full country names underneath, but no text (not
"India", not "+91", not anything) is ever visibly rendered. */
.phone-field select.country-code {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 220px !important;
height: 100% !important;
opacity: 0 !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 14px !important;
cursor: pointer;
margin: 0 !important;
padding: 0 !important;
-webkit-appearance: none;
appearance: none;
}
/* Lets the phone number input take up remaining space next to the country dropdown */
.phone-field .wpcf7-form-control-wrap {
flex: 1;
}
/* Removes all border/underline from the phone input itself, since the
shared .phone-wrap already provides the single underline */
.phone-field input.wpcf7-tel {
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
}
.phone-field input.wpcf7-tel:focus {
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* -------------------- End phone field -------------------- */
/* Styles the Message textarea as a shaded gray box with rounded corners, unlike the underline-only text fields */
.form-field textarea.wpcf7-textarea {
display: flex;
align-items: flex-start;
width: 100%;
height: 110px;
background: #F4F4F4;
border: none;
border-radius: 4px;
padding: 16px 20px;
font-size: 16px;
font-family: 'Inter', sans-serif;
color: #1A1A1A;
resize: vertical;
box-sizing: border-box;
outline: none;
margin-top: 8px;
}
/* Adds a subtle gray focus outline to the Message box when the user clicks into it */
.form-field textarea.wpcf7-textarea:focus {
outline: 0.7px solid #B5B5B5;
outline-offset: -1px;
}
/* Styles the SUBMIT button with the coral-red brand color, white uppercase text, and rounded corners */
.form-submit input.wpcf7-submit {
background: #F7183A;
border: none;
border-radius: 4px;
padding: 20px 43px;
cursor: pointer;
transition: background 0.2s ease;
color: #FFF;
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Darkens the SUBMIT button color slightly on mouse hover for interactive feedback */
.form-submit input.wpcf7-submit:hover {
background: #D63631;
}
/* Styles CF7's built-in validation error text (e.g. "This field is required") shown under a field */
.wpcf7-not-valid-tip {
font-size: 13px;
color: #E74C3C;
margin-top: 4px;
display: block;
}
/* Styles the overall success/error message box CF7 shows after form submission */
.wpcf7-response-output {
margin-top: 20px;
padding: 12px 16px;
border-radius: 4px;
font-size: 14px;
}
/* Divi's default icon wrapper width for left/right-positioned blurb icons —
fixing this ensures a consistent icon box size so vertical centering lines
up predictably against the text next to it */
.contact-info-blurb.et_pb_blurb_position_left .et_pb_main_blurb_image,
.contact-info-blurb.et_pb_blurb_position_right .et_pb_main_blurb_image {
width: 20px;
align-items: center;
justify-content: center;
margin-bottom: 0 !important;
}
/* Keeps Divi's default left padding on the text container (spacing between
icon and text), but removes top/bottom/right margin so it doesn't add
extra vertical offset that would throw off the flex centering */
.contact-info-blurb.et_pb_blurb_position_left .et_pb_blurb_container {
padding-left: 6px;
margin: 0 !important;
}
/* Changes the SUBMIT button to black on mouse hover for interactive feedback */
.form-submit input.wpcf7-submit:hover {
background: #000;
}
.form-field input.wpcf7-text,
.form-field input.wpcf7-email,
.form-field input.wpcf7-tel {
width: 100%;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
outline: none;
background: transparent;
box-sizing: border-box;
}
/* Ensures the blurb content doesn't overflow its container on tablet and mobile screens */
@media (max-width: 980px) {
.contact-info-blurb .et_pb_blurb_content {
max-width: 100% !important;
}
}
@media (max-width: 767px) {
.contact-info-blurb .et_pb_blurb_content {
max-width: 100% !important;
}
}
/* On screens 980px wide or narrower (tablet and mobile), stacks each row's
fields vertically instead of side by side, adjusts row spacing, and hides
the empty placeholder field (e.g. next to Company) since it's only needed
to preserve grid alignment in the two-column desktop layout */
@media (max-width: 980px) {
.form-row {
flex-direction: column;
gap: 20px;
margin-bottom: 20px;
}
.form-row.message-row {
margin-bottom: 30px !important;
}
.form-field.empty-field {
display: none;
}
}
@media (max-width: 980px) and (min-width: 768px) {
.page-id-1034 .group-button-row .et_flex_column.button-group {
display: block !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 15px !important;
align-items: center !important;
width: 100% !important;
}
}
/* =========================================
2 Columns - Tablet & Mobile - Divi 5
========================================= */
@media only screen and (max-width: 980px) {
.two-col-tab,
.two-col-mob {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 0px 30px !important;
}
.two-col-tab > .et_pb_column,
.two-col-mob > .et_pb_column {
width: calc(50% - 15px) !important;
max-width: calc(50% - 15px) !important;
flex: 0 0 calc(50% - 15px) !important;
margin-right: 0 !important;
}
.two-col-tab > .et_pb_column:nth-child(2n),
.two-col-mob > .et_pb_column:nth-child(2n) {
margin-right: 0 !important;
}
.two-col-tab .et_pb_image,
.two-col-mob .et_pb_image {
width: 100% !important;
max-width: 100% !important;
}
.two-col-tab .et_pb_image img,
.two-col-mob .et_pb_image img {
width: 100% !important;
height: auto !important;
}
}
/* ============================================
BANNER RED SECTION - LEFT & RIGHT BURST GRAPHICS
Section class: .banner-red
Uses two separate images (no CSS flipping needed)
============================================ */
/* Step 1: Set up the section as a positioning container
and hide overflow so graphics don't cause horizontal scroll */
.banner-red {
position: relative;
overflow: hidden;
}
/* Step 2: LEFT side graphic */
.banner-red::before {
content: ""; /* required for pseudo-elements to render */
position: absolute;
top: 0;
left: 0;
width: 300px; /* adjust width to match design */
height: 100%; /* stretch full height of the section */
background-image: url('https://tlp.devboldd.com/wp-content/uploads/2026/09/Circle-left.png');
background-repeat: no-repeat;
background-size: contain; /* scale image to fit without cropping */
background-position: left center;
z-index: 1; /* sits behind the text content */
pointer-events: none; /* graphic never blocks clicks */
}
/* Step 3: RIGHT side graphic */
.banner-red::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 300px; /* adjust width to match design */
height: 100%;
background-image: url('https://tlp.devboldd.com/wp-content/uploads/2026/09/Circle-right.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right center;
z-index: 1;
pointer-events: none;
}
/* Step 4: Make sure the row/text content stays ABOVE the graphics */
.banner-red .et_pb_row {
position: relative;
z-index: 2;
}
/* ============================================
BANNER RED SECTION - RESPONSIVE OVERRIDE
Tablet & Mobile: graphics move to top-right
and bottom-left corners instead of left/right sides
============================================ */
@media only screen and (max-width: 980px) {
/* Reset ::before to sit at TOP-RIGHT corner
(was LEFT side on desktop, now repurposed) */
.banner-red::before {
top: 0;
left: auto;
right: 0;
bottom: auto;
width: 150px; /* smaller size for tablet/mobile */
height: 150px; /* fixed height instead of full section height */
background-image: url('https://tlp.devboldd.com/wp-content/uploads/2026/09/Circle-right.png');
background-position: top right;
}
/* Reset ::after to sit at BOTTOM-LEFT corner
(was RIGHT side on desktop, now repurposed) */
.banner-red::after {
top: auto;
bottom: 0;
left: 0;
right: auto;
width: 150px;
height: 150px;
background-image: url('https://tlp.devboldd.com/wp-content/uploads/2026/09/Circle-left.png');
background-position: bottom left;
}
}
/* Further shrink on small phones if needed */
@media only screen and (max-width: 480px) {
.banner-red::before,
.banner-red::after {
width: 100px;
height: 100px;
}
}
/* Red banner */
.banner-red {
position: relative !important;
z-index: 10 !important;
overflow: visible !important;
box-shadow: 0 17px 25.1px 0 rgba(175, 29, 22, 0.13) !important;
}
/* Keep the banner graphics above the background */
.banner-red::before,
.banner-red::after {
z-index: 1 !important;
}
/* Keep banner content above graphics */
.banner-red .et_pb_row {
position: relative;
z-index: 2 !important;
}
/* Our Journey section/row should stay behind the banner shadow */
.banner-red + .et_pb_section {
position: relative;
z-index: 1 !important;
}
/* Mobile: Keep the row in 3 columns */
@media (max-width: 767px) {
.three-column-mobile {
display: flex !important;
flex-wrap: nowrap !important;
}
.three-column-mobile > .et_pb_column {
width: 33.333% !important;
margin-right: 0 !important;
}
}
/* Mobile: adjust CTA arrow position Home page*/
@media (max-width: 768px) {
.cta-arrow {
margin-top: -32px !important;
}
}
/* Mobile: stacked columns */
@media (max-width: 768px) {
.equal-height-column {
display: flex !important;
flex-direction: column !important;
}
.equal-height-column > .et_pb_column {
width: 100% !important;
margin-right: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.equal-height-column > .et_pb_column > .et_pb_module:last-child {
margin-bottom: 0 !important;
}
}
/* inner hero banner in one section (By Paul)*/
@media screen and (min-width: 1280px) and (min-height: 660px) and (max-height: 760px) {
#why-us-banner {
height: 285px;
}
}
/* Footer Menu - Heading Links */
#Footer-menu h4 a {
font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
font-weight: 600;
text-transform: uppercase;
color: #000000 !important;
font-size: 18px;
line-height: 24px;
}
/* Hide on desktop, show only on mobile/tablet up to 980px */
@media only screen and (min-width: 981px) {
.hide-desktop-show-mobile {
display: none !important;
}
.et_flex_section .segment-box:last-child {
margin-top: -20px !important;
}
}
@media only screen and (max-width: 980px) {
.hide-desktop-show-mobile {
display: block !important; /* or 'flex' / 'inline-block' depending on your menu's layout */
}
}
#Footer-menu h4 a:hover {
color: #194D98 !important;
}
#Footer-menu li a:hover {
color: #194D98 !important;
}
#Footer-menu .widget_nav_menu .title:hover::before {
color: #194D98 !important;
}
#Footer-menu .widget_nav_menu .title:hover::after {
color: #194D98 !important;
}
/* Mobile & Tablet */
@media screen and (max-width: 980px) {
.product-cards > .et_pb_image:not(.cta-arrow) img {
width: 186px !important;
max-width: 186px !important;
}
}
.product-list-row {
color: #000;
font-family: Inter, sans-serif; /* fallback in case Inter isn't loaded as a webfont */
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}
.product-list-row ul{
padding:0px !important;
}
.product-list-row ul li {
margin-bottom: 12px;
}
.product-list-row ul li:last-child {
margin-bottom: 0;
}
.product-list-row ul li {
list-style: none; /* remove default bullet */
position: relative;
padding-left: 20px; /* room for the custom bullet */
margin-bottom: 12px;
}
.product-list-row ul li:last-child {
margin-bottom: 0;
}
.product-list-row ul li::before {
content: "";
position: absolute;
left: 0;
top: 7px; /* vertically centers the 10px dot against 24px line-height text */
width: 10px;
height: 10px;
background-color: #F7183A;
border-radius: 50%; /* makes it a circle rather than a square */
}